/* ChatWidget: the frame, the sides messages sit on, the live message, and the message box. What a message looks
   like inside its side is up to the item's own layout. */
.na-chat { --na-chat-messages-height: 560px; display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .75rem; background: var(--cui-card-bg, #fff); overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .035); }
.na-chat [hidden] { display: none !important; }

.na-chat__frame { position: relative; min-width: 0; }
.na-chat__scroll { height: var(--na-chat-messages-height); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; background: var(--cui-tertiary-bg, #f6f7f9); }
.na-chat__scroll:focus-visible { outline: 2px solid var(--cui-primary, #321fdb); outline-offset: -2px; }

.na-chat__items,
.na-chat__live { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.na-chat__live { margin-top: .6rem; }

.na-chat__item { display: flex; min-width: 0; }
.na-chat__item > * { min-width: 0; max-width: 85%; }
.na-chat__item--self { justify-content: flex-end; }
.na-chat__item--other { justify-content: flex-start; }
.na-chat__item--system { justify-content: center; }
.na-chat__item--system > * { max-width: 100%; }

/* Items of one group in a row fold under a line that opens them all. */
.na-chat__group-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .45rem; border: 0; border-radius: .4rem; background: transparent; color: var(--cui-secondary-color, #6b7280); font-size: .8125rem; }
.na-chat__group-toggle:hover { background: var(--cui-secondary-bg, #e9ecef); color: var(--cui-body-color, #212631); }
.na-chat__group-toggle:focus-visible { outline: 2px solid var(--cui-primary, #321fdb); outline-offset: 1px; }
.na-chat__group-chevron { transition: transform .15s ease; }
.na-chat__group-toggle[aria-expanded="true"] .na-chat__group-chevron { transform: rotate(90deg); }
.na-chat__item--grouped { padding-left: 1rem; }

.na-chat__empty { padding: 2rem 1rem; color: var(--cui-secondary-color, #6b7280); font-size: .82rem; text-align: center; }

/* The live message and the typing dots stand in for the other side's next message until it is stored. */
.na-chat__bubble { padding: .6rem .8rem; border: 1px solid var(--cui-border-color, #dee2e6); border-radius: .85rem; border-bottom-left-radius: .3rem; background: var(--cui-card-bg, #fff); color: var(--cui-body-color, #212631); font-size: .875rem; line-height: 1.45; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .03); }
.na-chat__live-text { display: inline; white-space: pre-wrap; overflow-wrap: anywhere; }
.na-chat__live-text.na-markdown { display: block; white-space: normal; }
.na-chat__caret { display: inline-block; width: .45em; height: 1em; margin-left: .1em; vertical-align: text-bottom; background: currentColor; opacity: .45; animation: na-chat-blink 1s steps(1) infinite; }
.na-chat__typing { display: inline-flex; align-items: center; gap: .3rem; padding: .75rem .9rem; }
.na-chat__dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--cui-secondary-color, #9ca3af); animation: na-chat-pulse 1.2s ease-in-out infinite; }
.na-chat__dot:nth-child(2) { animation-delay: .15s; }
.na-chat__dot:nth-child(3) { animation-delay: .3s; }

.na-chat__jump { position: absolute; left: 50%; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; transform: translateX(-50%); border-radius: 999px; box-shadow: 0 4px 14px rgba(15, 23, 42, .14); font-size: .78rem; }

.na-chat__footer { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .75rem .75rem; border-top: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); }
.na-chat__status { color: var(--cui-secondary-color, #6b7280); font-size: .78rem; }
.na-chat__composer { display: flex; align-items: flex-end; gap: .5rem; }
.na-chat__input { flex: 1 1 auto; min-height: 2.4rem; max-height: 12rem; resize: none; }
.na-chat__send,
.na-chat__stop { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.4rem; }
.na-chat__send { width: 2.6rem; padding: 0; }
.na-chat__send--sending { opacity: .65; }
.na-chat__button-icon { display: inline-flex; line-height: 1; }

@keyframes na-chat-pulse { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes na-chat-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .na-chat__dot,
    .na-chat__caret { animation: none; }
    .na-chat__group-chevron { transition: none; }
}

@media (max-width: 767px) {
    .na-chat__item > * { max-width: 100%; }
}