/* 2026-10-13 v2.7
 * - Styled follow-up question chips inside answer bubbles.
 *
 * 2026-10-06 v2.6
 * - Styled passkey sign-in, the trusted-device dialogs and the trusted-device list.
 *
 * 2026-09-11 v2.5
 * - Styled authenticated attachment downloads in the source dialog.
 *
 * 2026-09-11 v2.4
 * - Added compact NL/EN selectors and accessible assistant-message feedback controls.
 *
 * 2026-09-11 v2.3
 * - Added a prominent matched-chapter block and compact wrapping alternative chapter links.
 *
 * 2026-09-11 v2.2
 * - Grouped multiple matched templates and their chapters inside one answer bubble.
 *
 * 2026-09-10 v2.1
 * - Added the single-chapter excerpt and compact Read more action.
 *
 * 2026-09-07 v2.0
 * - Kept restored conversations inside the mobile viewport without horizontal page overflow.
 * - Left-aligned mobile user questions and wrapped long questions, answers and chapter titles.
 * - Prevented automatic mobile input zoom and double-tap zoom while retaining pinch zoom.
 *
 * 2026-09-04 v1.9
 * - Matched the desktop account footer height to the default composer height.
 * - Added accessible chapter buttons below chapter-backed answers.
 * - Added responsive refresh and cleanup actions to the conversation toolbar.
 * - Positioned chat processing, offline, success and error messages in a fixed top overlay.
 * - Added the active-conversation cleanup action to the workspace toolbar.
 * - Restyled the source overview as an interactive conversation-specific list.
 * - Hid the composer status area when there is no actionable message.
 * - Added accessible conversation delete controls and confirmation feedback.
 * - Kept the application shell fixed while long conversations scroll internally.
 * - Added the Bureau Veritas Captain John 2027 application interface.
 */

:root {
    --brand: #a80b2f;
    --brand-dark: #71051f;
    --paper: #fff;
    --green-soft: #e7f3ec;
    --green-fill: #237a50;
    --feedback-positive: #e8f4ed;
    --feedback-border: #d898a8;
    --red: #a80b2f;
    --red-dark: #71051f;
    --red-soft: #f8e9ed;
    --ink: #232220;
    --muted: #706d68;
    --surface: #f7f6f3;
    --surface-high: #efede8;
    --line: #dcd8d1;
    --line-strong: #bcb6ad;
    --green: #237a50;
    --sidebar-width: 19rem;
    --source-width: 18rem;
    --radius-small: .55rem;
    --radius-medium: .85rem;
    --radius-large: 1.15rem;
    color-scheme: light;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; max-width: 100%; width: 100%; }
body { background: var(--surface); color: var(--ink); font-size: 16px; overflow: hidden; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #1573e6; outline-offset: 2px; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.eyebrow { color: var(--red); font-size: .72rem; font-weight: 800; letter-spacing: .11em; margin: 0 0 .25rem; text-transform: uppercase; }
.button { align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-small); display: inline-flex; font-weight: 750; gap: .45rem; justify-content: center; min-height: 2.75rem; padding: .65rem .9rem; }
.button--primary { background: var(--brand); border-color: var(--red); color: #fff; }
.button--primary:hover:not(:disabled) { background: var(--brand-dark); }
.button--secondary { background: var(--paper); }
.button--wide { width: 100%; }
.button:disabled { opacity: .45; }
.button-group { display: flex; gap: .6rem; }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 50%; display: inline-flex; height: 2.75rem; justify-content: center; width: 2.75rem; }
.icon-button svg { height: 1.4rem; width: 1.4rem; }
.icon-button--light { color: #fff; }
.icon-button--small { font-size: 1.55rem; height: 2.35rem; width: 2.35rem; }
.captain-avatar { align-items: center; background: #fff; border-radius: 50%; display: inline-flex; flex: 0 0 auto; height: 3rem; justify-content: center; overflow: hidden; width: 3rem; }
.captain-avatar img { height: 100%; object-fit: cover; width: 100%; }
.captain-avatar--large { height: 4.7rem; width: 4.7rem; }
.language-switcher { align-items: center; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; display: inline-flex; padding: .12rem; }
.language-switcher button { background: transparent; border: 0; border-radius: 999px; color: var(--muted); font-size: .61rem; font-weight: 850; min-height: 1.65rem; min-width: 2rem; padding: .2rem .4rem; }
.language-switcher button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.language-switcher button:disabled { opacity: .55; }
.language-switcher--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.language-switcher--light button { color: rgba(255,255,255,.8); }
.language-switcher--light button[aria-pressed="true"] { background: var(--paper); color: var(--red-dark); }

.login-flow { align-items: center; display: grid; inset: 0; justify-items: center; overflow: auto; padding: 2rem; position: fixed; z-index: 20; }
.login-backdrop { background: linear-gradient(135deg, var(--brand-dark), var(--brand) 55%, #c61743); inset: 0; position: fixed; }
.login-backdrop::after { background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 26%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 25%); content: ""; inset: 0; position: absolute; }
.login-card { background: var(--surface); border-radius: var(--radius-large); box-shadow: 0 1.5rem 4rem rgba(48,0,13,.27); max-width: 34rem; padding: 2rem; position: relative; width: 100%; }
.login-brand { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: .9rem; margin-bottom: 1.4rem; padding-bottom: 1.2rem; padding-right: 4.8rem; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 1.15rem; }
.login-brand small { color: var(--muted); margin-top: .1rem; }
.login-language-switcher { position: absolute; right: 2rem; top: 2rem; }
.login-progress { display: grid; gap: 1rem; grid-template-columns: repeat(2,1fr); list-style: none; margin: 0 0 2rem; padding: 0; }
.login-progress li { align-items: center; color: var(--muted); display: flex; font-size: .78rem; font-weight: 800; gap: .5rem; }
.login-progress li::after { background: var(--line); content: ""; flex: 1; height: 1px; }
.login-progress li:last-child::after { display: none; }
.login-progress li span { align-items: center; border: 2px solid var(--line-strong); border-radius: 50%; display: flex; height: 2rem; justify-content: center; width: 2rem; }
.login-progress li.is-active { color: var(--red); }
.login-progress li.is-active span { background: var(--brand); border-color: var(--red); color: #fff; }
.login-progress li.is-complete span { background: var(--green-fill); border-color: var(--green); color: #fff; }
.login-step h1 { font-size: clamp(1.65rem, 4vw, 2.15rem); letter-spacing: -.035em; margin: 0; }
.login-intro { color: var(--muted); line-height: 1.55; margin: .55rem 0 1.4rem; }
.form-field-group { display: grid; gap: .4rem; margin-bottom: 1rem; }
.form-field-group label { font-size: .76rem; font-weight: 800; }
.form-field-group input { background: var(--paper); border: 2px solid var(--line-strong); border-radius: var(--radius-small); min-height: 3.25rem; padding: .7rem .8rem; width: 100%; }
.form-field-group input:focus { border-color: var(--red); outline: 0; }
.form-field-group input[aria-invalid="true"] { border-color: var(--red); }
.code-input { font-size: 1.5rem !important; font-weight: 800; letter-spacing: .55em; text-align: center; }
.field-help, .field-error, .form-status { font-size: .72rem; line-height: 1.45; margin: 0; }
.field-help, .form-status { color: var(--muted); }
.field-error { color: var(--red-dark); font-weight: 700; }
.form-status { margin-top: .65rem; min-height: 1rem; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); height: 100vh; height: 100dvh; max-height: 100dvh; max-width: 100vw; min-height: 0; overflow: hidden; width: 100%; }
.conversation-sidebar { background: linear-gradient(180deg,var(--brand-dark),var(--brand)); color: #fff; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.brand-block { align-items: center; display: flex; gap: .75rem; padding: 1rem; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { white-space: nowrap; }
.sidebar-language-switcher { flex: 0 0 auto; margin-left: auto; }
.sidebar-language-switcher button { align-items: center; display: inline-flex; justify-content: center; }
.brand-copy small { color: rgba(255,255,255,.72); font-size: .7rem; margin-top: .1rem; }
.sidebar-tools { display: grid; gap: .65rem; padding: .35rem 1rem 1rem; }
.new-chat { background: var(--paper); border-color: #fff; color: var(--red-dark); justify-content: flex-start; }
.sidebar-search { align-items: center; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-small); display: grid; grid-template-columns: auto minmax(0,1fr); min-height: 2.7rem; padding: 0 .75rem; }
.sidebar-search input { background: transparent; border: 0; color: #fff; min-width: 0; outline: 0; padding: .65rem; }
.sidebar-search input::placeholder { color: rgba(255,255,255,.7); }
.conversation-list { --scrollbar-track: #71051f; --scrollbar-thumb: #bc647a; min-height: 0; overflow-y: auto; padding: .2rem .65rem 1rem; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; }
.conversation-list::-webkit-scrollbar { width: 8px; }
.conversation-list::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.conversation-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid var(--scrollbar-track); border-radius: 999px; }
.conversation-list::-webkit-scrollbar-thumb:hover { background: #d58a9c; }
.conversation-list::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
.group-label { color: rgba(255,255,255,.6); font-size: .64rem; font-weight: 800; letter-spacing: .08em; margin: .85rem .45rem .35rem; text-transform: uppercase; }
.conversation-row { align-items: center; display: grid; gap: .1rem; grid-template-columns: minmax(0,1fr) auto; }
.conversation-item { background: transparent; border: 0; border-radius: var(--radius-small); color: #fff; display: grid; gap: .2rem; padding: .7rem .75rem; text-align: left; width: 100%; }
.conversation-item:hover, .conversation-item[aria-current="true"] { background: rgba(255,255,255,.14); }
.conversation-item strong { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small { color: rgba(255,255,255,.67); font-size: .62rem; }
.conversation-delete { align-items: center; background: transparent; border: 0; border-radius: 50%; color: rgba(255,255,255,.78); display: inline-flex; height: 2.6rem; justify-content: center; width: 2.6rem; }
.conversation-delete:hover, .conversation-delete:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.conversation-delete svg { height: 1.05rem; width: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
    .conversation-delete { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .conversation-row:hover .conversation-delete,
    .conversation-row:focus-within .conversation-delete { opacity: 1; pointer-events: auto; }
}
@media (any-pointer: coarse) {
    .conversation-delete { opacity: 1; pointer-events: auto; }
}
.conversation-empty { color: rgba(255,255,255,.72); font-size: .72rem; line-height: 1.5; padding: .75rem; }
.account-footer { align-items: center; border-top: 1px solid rgba(255,255,255,.2); display: grid; gap: .65rem; grid-template-columns: auto minmax(0,1fr) auto; min-height: 5.6rem; padding: .85rem 1rem; }
.account-mark { align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.38); border-radius: 50%; display: flex; font-size: .7rem; font-weight: 800; height: 2.3rem; justify-content: center; width: 2.3rem; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: .7rem; }
.account-copy small { color: rgba(255,255,255,.68); font-size: .58rem; margin-top: .12rem; }
.account-actions { align-items: center; display: flex; gap: .25rem; }

.workspace-main { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.workspace-header { align-items: center; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; gap: .9rem; max-width: 100%; min-height: 4.7rem; min-width: 0; overflow: hidden; padding: .65rem 1rem; }
.workspace-title { flex: 1 1 0; min-width: 0; overflow: hidden; }
.workspace-title h1 { font-size: .95rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { align-items: center; display: flex; flex: 0 0 auto; gap: .75rem; margin-left: auto; min-width: 0; }
.conversation-action { min-height: 2.5rem; padding: .5rem .75rem; white-space: nowrap; }
.conversation-action svg { flex: 0 0 auto; height: 1rem; width: 1rem; }
.sources-button { min-height: 2.5rem; padding: .5rem .75rem; }
.connection-state { align-items: center; color: var(--green); display: flex; font-size: .68rem; gap: .4rem; }
.connection-state span { background: currentColor; border-radius: 50%; height: .5rem; width: .5rem; }
.connection-state.is-offline { color: var(--red); }
.mobile-menu { display: none; }
.command-layout { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; overflow: hidden; position: relative; }
body.source-map-open .command-layout { grid-template-columns: var(--source-width) minmax(0,1fr); }
.source-map { background: var(--surface); border-right: 1px solid var(--line); min-height: 0; min-width: 0; overflow-y: auto; padding: 1rem; }
.panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: .75rem; }
.panel-heading h2 { font-size: 1rem; margin: 0; }
.source-search input { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); min-height: 2.55rem; padding: .55rem .7rem; width: 100%; }
.source-tree { display: grid; gap: .45rem; margin-top: .75rem; }
.source-group { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--ink); cursor: pointer; display: flex; gap: .6rem; justify-content: space-between; min-height: 2.9rem; padding: .7rem; text-align: left; width: 100%; }
.source-group:hover, .source-group:focus-visible { border-color: var(--red); }
.source-group strong { font-size: .72rem; line-height: 1.35; }
.source-group .source-arrow { color: var(--red-dark); flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; }
.source-empty { color: var(--muted); font-size: .72rem; }
.chat-workspace { background: var(--paper); display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.chat-notice-layer { display: grid; gap: .4rem; justify-items: center; left: 50%; max-width: 52rem; pointer-events: none; position: absolute; top: .8rem; transform: translateX(-50%); width: calc(100% - 2rem); z-index: 4; }
.chat-notice-layer > p { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--muted); font-size: .72rem; font-weight: 700; margin: 0; max-width: 100%; padding: .55rem .75rem; text-align: center; }
.chat-notice-layer > p:empty { display: none; }
.chat-thread { max-width: 100%; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem,3vw,2.2rem); }
.thread-messages { display: grid; gap: 1.15rem; margin: 0 auto; max-width: 52rem; min-width: 0; width: 100%; }
.message { display: grid; gap: .35rem; justify-self: start; max-width: min(88%,44rem); min-width: 0; }
.message--user { justify-self: end; max-width: min(82%,38rem); }
.message-meta { align-items: center; color: var(--muted); display: flex; font-size: .68rem; gap: .45rem; }
.message--user .message-meta { justify-content: flex-end; }
.mini-avatar { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; display: flex; height: 1.8rem; justify-content: center; overflow: hidden; width: 1.8rem; }
.mini-avatar img { height: 100%; width: 100%; }
.message-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-medium); font-size: .86rem; line-height: 1.6; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: .85rem 1rem; word-break: normal; }
.message--user .message-bubble { background: var(--brand); border-color: var(--red); color: #fff; }
.message-bubble p, .message-bubble a { max-width: 100%; overflow-wrap: anywhere; }
.message-bubble img, .source-dialog-body img { height: auto; max-width: 100%; }
.message-bubble table, .source-dialog-body table { display: block; max-width: 100%; overflow-x: auto; }
.message-bubble > :first-child { margin-top: 0; }
.message-bubble > :last-child { margin-bottom: 0; }
.message-bubble a { color: var(--red-dark); }
.message-bubble hr { border: 0; border-top: 1px solid var(--line); height: 0; margin: .75rem 0; }
.message-chapter-excerpt { margin-bottom: .35rem; }
.message-read-more { background: transparent; border: 0; color: var(--red-dark); font-size: .72rem; font-weight: 800; padding: .15rem 0; text-decoration: underline; text-underline-offset: .16rem; }
.message-read-more:hover { color: var(--red); }
.message-matched-chapter { display: grid; gap: .35rem; min-width: 0; }
.message-matched-chapter-title { color: var(--ink); font-size: .96rem; line-height: 1.35; overflow-wrap: anywhere; }
.message-matched-chapter .message-template-title { color: var(--red-dark); font-size: .72rem; letter-spacing: .025em; }
.message-alternative-chapters { border-top: 1px solid var(--line); color: var(--muted); display: grid; font-size: .66rem; gap: .25rem; margin-top: .75rem; min-width: 0; padding-top: .6rem; }
.message-alternative-links { align-items: baseline; display: flex; flex-wrap: wrap; gap: .15rem .55rem; min-width: 0; }
.message-alternative-chapter { background: transparent; border: 0; color: var(--red-dark); font-size: .66rem; padding: .05rem 0; text-align: left; text-decoration: underline; text-underline-offset: .14rem; }
.message-alternative-chapter:hover, .message-alternative-chapter:focus-visible { color: var(--red); }
.message-chapters { display: grid; gap: .45rem; margin-top: .75rem; max-width: 100%; min-width: 0; }
.message-chapters-label { color: var(--muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.message-template-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-medium); display: grid; gap: .6rem; min-width: 0; padding: .8rem; }
.message-template-group + .message-template-group { margin-top: .35rem; }
.message-template-group .message-chapter { background: var(--surface); }
.message-template-title { color: var(--ink); font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.message-chapter { align-items: center; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--ink); display: flex; gap: .75rem; justify-content: space-between; max-width: 100%; min-height: 2.75rem; min-width: 0; overflow-wrap: anywhere; padding: .6rem .75rem; text-align: left; width: 100%; }
.message-chapter:hover, .message-chapter:focus-visible { border-color: var(--red); }
.message-chapter > span:first-child { display: grid; gap: .1rem; max-width: 100%; min-width: 0; }
.message-chapter strong { font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.message-chapter small { color: var(--muted); font-size: .64rem; }
.chapter-arrow { color: var(--red-dark); flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; }
.message-source { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--red-dark); font-size: .68rem; font-weight: 800; margin-top: .75rem; min-height: 2.35rem; padding: .5rem .65rem; width: 100%; }
.message-source--template { margin-top: 0; }
.message-feedback { color: var(--muted); display: grid; font-size: .66rem; gap: .4rem; margin-left: .2rem; max-width: 30rem; }
.message-template-group .message-feedback, .message-bubble > .message-feedback { border-top: 1px solid var(--line); margin: .4rem 0 0; max-width: 100%; padding-top: .6rem; }
.message-feedback-rating { align-items: center; display: flex; gap: .3rem; }
.message-feedback-rating > span { margin-right: .15rem; }
.message-feedback-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--muted); display: inline-flex; font-size: .85rem; height: 1.9rem; justify-content: center; padding: 0; width: 2rem; }
.message-feedback-button[data-feedback-value="1"] { color: var(--green); }
.message-feedback-button[data-feedback-value="-1"] { color: var(--red); }
.message-feedback-button:hover, .message-feedback-button:focus-visible { background: var(--paper); border-color: var(--line-strong); }
.message-feedback-button[aria-pressed="true"] { background: var(--red-soft); border-color: var(--feedback-border); }
.message-feedback-button[data-feedback-value="1"][aria-pressed="true"] { background: var(--feedback-positive); border-color: var(--green); }
.message-feedback-comment { display: grid; gap: .3rem; }
.message-feedback-comment label { font-weight: 750; }
.message-feedback-comment-row { align-items: stretch; display: grid; gap: .35rem; grid-template-columns: minmax(0,1fr) auto; }
.message-feedback-comment textarea { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); font-size: .72rem; line-height: 1.4; min-height: 3.4rem; padding: .45rem .55rem; resize: vertical; width: 100%; }
.message-feedback-save { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--red-dark); font-size: .66rem; font-weight: 800; padding: .45rem .6rem; }
.message-feedback-save:hover, .message-feedback-save:focus-visible { border-color: var(--red); }
.message-feedback-status { min-height: .9rem; }
.new-conversation-state { align-content: center; display: grid; justify-items: center; min-height: 100%; padding: 2rem; text-align: center; }
.new-conversation-state h2 { font-size: 1.35rem; margin: .9rem 0 .25rem; }
.new-conversation-state p { color: var(--muted); margin: 0; }
.answer-loading { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--muted); display: flex; font-size: .72rem; gap: .35rem; margin: 0; max-width: 100%; padding: .55rem .75rem; }
.answer-loading span { animation: pulse 1s infinite alternate; background: var(--brand); border-radius: 50%; height: .45rem; width: .45rem; }
.answer-loading span:nth-child(2) { animation-delay: .15s; }
.answer-loading span:nth-child(3) { animation-delay: .3s; margin-right: .25rem; }
@keyframes pulse { from { opacity: .25; transform: translateY(0); } to { opacity: 1; transform: translateY(-.18rem); } }
.composer { border-top: 1px solid var(--line); display: grid; padding: .8rem clamp(1rem,3vw,2.2rem) 1rem; }
.composer > label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.composer-row { align-items: end; background: var(--paper); border: 2px solid var(--line-strong); border-radius: var(--radius-medium); display: grid; gap: .5rem; grid-template-columns: minmax(0,1fr) auto; margin: 0 auto; max-width: 52rem; padding: .42rem; width: 100%; }
.composer-row:focus-within { border-color: var(--red); }
.composer textarea { background: transparent; border: 0; min-height: 2.55rem; outline: 0; padding: .58rem .5rem; resize: none; width: 100%; }
.send-button { align-items: center; background: var(--brand); border: 0; border-radius: 50%; color: #fff; display: flex; font-size: 1.15rem; height: 2.65rem; justify-content: center; width: 2.65rem; }
.send-button:disabled { opacity: .4; }
.source-dialog, .confirm-dialog { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-large); color: var(--ink); padding: 0; width: calc(100% - 2rem); }
.source-dialog { max-width: 46rem; }
.confirm-dialog { max-width: 26rem; }
.source-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(18,18,18,.55); }
.source-dialog header { gap: .75rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1rem 1.1rem; }
.source-dialog header > div:first-child { flex: 1 1 15rem; min-width: 0; }
.source-dialog-actions { align-items: center; display: flex; gap: .5rem; margin-left: auto; }
.source-copy { gap: .4rem; white-space: nowrap; }
.source-copy-status { color: var(--muted); font-size: .74rem; margin: .65rem 1.1rem 0; }
.source-dialog-text { user-select: text; -webkit-user-select: text; }
.source-dialog h2 { font-size: 1rem; margin: 0; }
.source-dialog-body { font-size: .86rem; line-height: 1.65; max-height: min(66vh,42rem); overflow-y: auto; padding: 1.1rem; }
.attachments-wrapper { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.attachments-wrapper h3 { font-size: .82rem; margin: 0 0 .55rem; }
.attachments-wrapper ul { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.attachment-download { align-items: center; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-small); color: var(--red-dark); cursor: pointer; display: flex; font: inherit; font-size: .74rem; font-weight: 750; gap: .75rem; justify-content: space-between; min-height: 2.6rem; padding: .58rem .7rem; text-align: left; width: 100%; }
.attachment-download:hover, .attachment-download:focus-visible { border-color: var(--red); }
.attachment-download:disabled { cursor: wait; opacity: .55; }
.confirm-dialog-body { padding: 1.4rem; text-align: center; }
.confirm-icon { align-items: center; background: var(--red-soft); border: 1px solid var(--red); border-radius: 50%; color: var(--red); display: flex; height: 3.4rem; justify-content: center; margin: 0 auto .8rem; width: 3.4rem; }
.confirm-icon svg { height: 1.5rem; width: 1.5rem; }
.confirm-dialog h2 { margin: 0 0 .35rem; }
.confirm-dialog p { color: var(--muted); margin: 0 0 1.1rem; }
.confirm-dialog .conversation-title { color: var(--ink); display: block; font-size: .82rem; margin: -.45rem 0 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-dialog .field-error { margin: -.4rem 0 .9rem; }
.confirm-actions { justify-content: center; }

.message-clarification { border-top: 1px solid var(--line); display: grid; gap: .5rem; margin-top: .85rem; padding-top: .75rem; }
.clarify-question { color: var(--ink); font-size: .8rem; font-weight: 800; margin: 0; }
.clarify-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.clarify-chip { align-items: center; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--red-dark); cursor: pointer; display: inline-flex; font: inherit; font-size: .74rem; font-weight: 750; justify-content: center; min-height: 2.1rem; padding: .35rem .85rem; }
.clarify-chip:hover, .clarify-chip:focus-visible { border-color: var(--red); color: var(--red); }
.clarify-chip--all { background: transparent; border-style: dashed; color: var(--muted); }
.clarify-chip:disabled { cursor: default; opacity: .5; }
.passkey-login { display: grid; gap: .85rem; margin-bottom: 1.1rem; }
.button--passkey svg { flex: none; height: 1.25rem; width: 1.25rem; }
.passkey-divider { align-items: center; color: var(--muted); display: flex; font-size: .72rem; gap: .75rem; }
.passkey-divider::before, .passkey-divider::after { background: var(--line); content: ""; flex: 1; height: 1px; }
.passkey-dialog { max-width: 28rem; }
.passkey-dialog-body { text-align: left; }
.passkey-dialog-body .confirm-icon { margin-left: 0; }
.confirm-icon--success { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.trust-points { display: grid; font-size: .8rem; gap: .5rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.trust-points li { padding-left: 1.4rem; position: relative; }
.trust-points li::before { color: var(--green); content: "\2713"; font-weight: 800; left: 0; position: absolute; }
.passkey-actions { flex-wrap: wrap; }
.passkey-actions .button { flex: 1 1 auto; }
.passkey-name-form .form-field-group { margin-bottom: .9rem; }
.passkey-devices-dialog { max-width: 32rem; }
.passkey-devices-header { align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between; margin-bottom: .6rem; }
.passkey-devices-header p { font-size: .8rem; margin: 0; }
.device-list { display: grid; gap: .55rem; list-style: none; margin: .6rem 0 1rem; max-height: min(50vh,22rem); overflow-y: auto; padding: 0; }
.device-row { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-medium); display: grid; gap: .75rem; grid-template-columns: auto minmax(0,1fr) auto; padding: .75rem .85rem; }
.device-icon { align-items: center; background: var(--surface-high); border-radius: var(--radius-small); color: var(--ink); display: flex; height: 2.5rem; justify-content: center; width: 2.5rem; }
.device-icon--current { background: var(--red-soft); color: var(--red); }
.device-icon svg { height: 1.25rem; width: 1.25rem; }
.device-copy { display: grid; gap: .15rem; min-width: 0; }
.device-copy strong { align-items: center; display: flex; flex-wrap: wrap; font-size: .86rem; gap: .4rem; }
.device-copy small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.device-badge { background: var(--green-soft); border-radius: .35rem; color: var(--green); font-size: .62rem; font-style: normal; font-weight: 800; padding: .1rem .4rem; }
.device-remove { font-size: .7rem; min-height: 2.2rem; padding: .35rem .65rem; }
.device-empty { color: var(--muted); font-size: .8rem; padding: .5rem 0; }

@media (max-width: 900px) {
    .app-shell { grid-template-columns: minmax(0,1fr); }
    .conversation-sidebar { bottom: 0; box-shadow: 1rem 0 2rem rgba(0,0,0,.2); position: fixed; top: 0; transform: translateX(-105%); transition: transform 180ms ease; width: min(88vw,21rem); z-index: 8; }
    body.sidebar-open .conversation-sidebar { transform: translateX(0); }
    body.sidebar-open::after { background: rgba(0,0,0,.45); content: ""; inset: 0; position: fixed; z-index: 7; }
    .mobile-menu { display: inline-flex; }
}
@media (max-width: 680px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    .login-flow { padding: 0; }
    .login-card { border-radius: 0; min-height: 100dvh; padding: 1.35rem; }
    button, a, input, textarea { touch-action: manipulation; }
    .form-field-group input, .composer textarea, .message-feedback-comment textarea { font-size: 16px; }
    .connection-state { display: none; }
    .workspace-actions { gap: .25rem; }
    .conversation-action { min-height: 2.5rem; padding: .5rem; width: 2.5rem; }
    .workspace-action-copy { display: none; }
    body.source-map-open .command-layout { display: block; }
    .source-map { border-bottom: 1px solid var(--line); border-right: 0; max-height: 45vh; }
    .message { max-width: 100%; }
    .message--user { justify-self: start; max-width: 100%; }
    .message--user .message-meta { justify-content: flex-start; }
    .message-feedback-comment-row { grid-template-columns: minmax(0,1fr); }
    .button-group { display: grid; grid-template-columns: 1fr; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* Login recovery uses the existing code-request flow. */
.code-error-row { align-items: center; display: flex; gap: .5rem .75rem; justify-content: space-between; }
.code-error-row .field-error { flex: 1; min-width: 0; }
.resend-code-button { flex: 0 1 58%; font-size: .68rem; min-height: 2rem; padding: .4rem .6rem; }
.resend-code-button span, .resend-code-dialog strong { overflow-wrap: anywhere; }
.resend-code-dialog { max-height: calc(100dvh - 2rem); overflow-y: auto; }
[data-code-status]:empty { display: none; }
@media (max-width: 420px) {
    .code-error-row { align-items: stretch; flex-direction: column; }
    .resend-code-button { align-self: flex-end; max-width: 100%; }
}

/* Follow the OS appearance, including changes while the page is open. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --paper: #191a1d;
        --red: #ee91a8;
        --red-dark: #f3a7b9;
        --red-soft: #3b242d;
        --ink: #f1eee9;
        --muted: #b3b0aa;
        --surface: #222326;
        --surface-high: #2e3034;
        --line: #3b3d42;
        --line-strong: #72757c;
        --green: #7dd8a5;
        --green-soft: #203b2d;
        --feedback-positive: #203b2d;
        --feedback-border: #8b6471;
    }
    :focus-visible { outline-color: #84b8ff; }
    .login-backdrop { background: linear-gradient(135deg,#18191c,#34151f 65%,#511c2b); }
    .conversation-sidebar { background: linear-gradient(180deg,#28131a,#49182a); }
    .conversation-list { --scrollbar-track: #28131a; --scrollbar-thumb: #966174; }
    .a2-dialog { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
    .a2-dialog-button { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
    .a2-dialog-error { color: var(--red-dark); }
    .source-dialog-body a { color: var(--red-dark); }
}

/* Date groups share the sidebar's existing visual language. */
.conversation-group + .conversation-group { border-top: 1px solid rgba(255,255,255,.22); margin-top: .65rem; padding-top: .35rem; }
.conversation-group-header { align-items: center; display: flex; gap: .25rem; justify-content: space-between; min-height: 2.1rem; }
.conversation-group-header .group-label { margin: .55rem .45rem; }
.conversation-group-actions { display: flex; margin-left: auto; }
.conversation-group-action { align-items: center; background: transparent; border: 0; border-radius: .4rem; color: rgba(255,255,255,.8); display: inline-flex; height: 2.4rem; justify-content: center; width: 2.4rem; }
.conversation-group-action:hover, .conversation-group-action:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.conversation-group-action:disabled { opacity: .4; }
.conversation-group-action--label { flex-shrink: 0; font-size: .64rem; padding: 0 .55rem; white-space: nowrap; width: auto; }
.conversation-group > summary.group-label { cursor: pointer; padding: .35rem 0; }