/* chat — domain styles; order is declared in index.html. */
.messages { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 34px max(24px, calc((100% - 880px) / 2)) 160px; scroll-behavior: smooth; }
.message-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 11px; row-gap: 4px; margin-bottom: 25px; }
.message-avatar { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #3730a3; color: #fff; font-size: 0.75rem; font-weight: 750; }
.message-row.user .message-avatar { visibility: hidden; }
.message-body { min-width: 0; }
.message-content { min-width: 0; max-width: 100%; color: var(--text); font-size: 0.875rem; overflow-wrap: anywhere; }
.message-row.assistant .message-body { padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px 15px 15px 15px; background: #fbfbfd; box-shadow: var(--shadow-sm); }
.message-row.user .message-body { justify-self: end; max-width: min(78%, 650px); padding: 11px 15px; border-radius: 15px 15px 4px 15px; background: var(--primary-soft); color: #252064; }
.message-row.failed .message-body { border-color: #f0b7c0; background: var(--danger-soft); color: #7b2330; }
.message-row.failed .message-content { color: #7b2330; }
.message-row.failed .message-meta { color: #a23b49; }
.message-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--subtle); font-size: 0.625rem; }
.message-row.user .message-meta { justify-content: flex-end; }
.message-status { color: var(--danger); font-weight: 700; }
.copy-message { min-width: 44px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.6875rem; }
.copy-message:hover { background: rgba(102, 112, 133, .1); color: var(--text); }
.message-audio { min-height: 46px; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 6px 9px; border-top: 1px solid var(--line); }
.message-audio audio { width: 100%; min-width: 0; height: 38px; }
.message-audio-status { color: var(--muted); font-size: 0.6875rem; }
.message-audio-action { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--primary); cursor: pointer; }
.message-audio-action svg { width: 18px; height: 18px; }
.message-audio-action.loading svg { animation: spin .9s linear infinite; }
.message-audio-action:disabled { cursor: wait; opacity: .7; }
.message-row.streaming .message-content::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 4px; vertical-align: -2px; border-radius: 2px; background: var(--primary); animation: blink 1s infinite; }
.message-content.plain-text { white-space: pre-wrap; }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 12px; }
.message-content h1, .message-content h2, .message-content h3 { margin: 20px 0 9px; line-height: 1.3; }
.message-content h1 { font-size: 1.4em; }
.message-content h2 { font-size: 1.22em; }
.message-content h3 { font-size: 1.08em; }
.message-content ul, .message-content ol { padding-left: 23px; }
.message-content pre { max-width: 100%; overflow-x: auto; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f4f5f8; }
.message-content code { padding: 2px 5px; border-radius: 5px; background: #edeef2; font-family: "SFMono-Regular", Consolas, monospace; font-size: .9em; }
.message-content pre code { padding: 0; background: transparent; }
.message-content blockquote { margin-left: 0; padding-left: 13px; border-left: 3px solid #aaa5ef; color: var(--muted); }
.message-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.message-content th, .message-content td { padding: 7px 9px; border: 1px solid var(--line); }
.message-content a { color: var(--primary); }
.message-content img { max-width: 100%; }
.message-loading { width: min(100%, 880px); display: flex; align-items: center; gap: 10px; margin: 24px auto; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface-soft); }
.message-loading::before { content: ""; width: 16px; height: 16px; border: 2px solid #d5d2f6; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.empty-state { position: absolute; inset: 68px 0 130px; display: grid; align-content: center; justify-items: center; padding: 28px; text-align: center; pointer-events: none; }
.empty-orbit { width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #dedcf8; border-radius: 50%; background: #f7f6ff; }
.agent-empty-avatar { display: block; width: 58px; height: 58px; border-radius: 18px; font-size: 1.4375rem; }
.empty-state .eyebrow { margin: 0 0 8px; }
.empty-state h2 { margin: 0 0 9px; font-size: clamp(1.5625rem, 4vw, 2.125rem); letter-spacing: -.04em; }
.empty-state > p:last-child { max-width: 510px; margin: 0; color: var(--muted); font-size: 0.875rem; }
.composer { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px max(24px, calc((100% - 880px) / 2)) max(13px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, #fff 76%, rgba(255, 255, 255, 0)); }
.composer-inner { display: flex; align-items: flex-end; gap: 9px; padding: 8px 8px 8px 15px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 26px rgba(16, 24, 40, .09); }
.image-attachment { width: min(100%, 880px); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 auto 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--text); font-size: 0.75rem; }
.image-attachment span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-attachment .icon-button { width: 28px; height: 28px; flex: 0 0 28px; }
.composer-inner:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 56, 202, .1), 0 8px 26px rgba(16, 24, 40, .09); }
.composer-icon-button { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--surface-soft); color: var(--primary); cursor: pointer; }
.composer-icon-button.recording { background: var(--danger); color: #fff; animation: recording-pulse 1.2s infinite; }
.recording-timer { align-self: center; color: var(--danger); font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 700; }
.composer textarea { min-height: 36px; max-height: min(160px, 28dvh); flex: 1; resize: none; border: 0; outline: 0; padding: 7px 0; color: var(--text); background: transparent; }
.composer textarea::placeholder { color: var(--subtle); }
.send-button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: var(--primary); color: #fff; cursor: pointer; }
.send-button:hover { background: var(--primary-hover); }
.send-button:disabled:not(.busy) { background: #aeb4c5; }
.send-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stop-icon { display: none; width: 12px; height: 12px; border-radius: 2px; background: currentColor; }
.send-button.busy { background: var(--danger); }
.send-button.busy svg { display: none; }
.send-button.busy .stop-icon { display: block; }
.composer > p { margin: 6px 0 0; color: var(--subtle); text-align: center; font-size: 0.625rem; }
.mobile-backdrop { display: none; }

.toast-region { position: fixed; z-index: 100; top: max(15px, env(safe-area-inset-top)); right: 15px; display: grid; gap: 8px; width: min(370px, calc(100vw - 30px)); pointer-events: none; }