.local-chat { position: relative; z-index: 3; box-sizing: border-box; width: 100%; padding: 1.3rem; border: 1px solid color-mix(in srgb, var(--background) 65%, transparent); border-radius: 0; color: var(--foreground); background: color-mix(in srgb, var(--background) 55%, transparent); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 14px 60px rgb(0 75 90 / .09); text-align: left; }
@supports not (backdrop-filter: blur(1px)) { .local-chat { background: var(--background); } }
.chat-heading { display: flex; gap: .65rem; align-items: center; }
.chat-heading h2 { font-size: 1.1rem; margin: .25rem 0; letter-spacing: -.03em; }
.chat-eyebrow { color: var(--link); font-size: .6rem; letter-spacing: .13em; margin: 0; }
.chat-avatar { color: var(--link); font-size: 1.9rem; }
.local-chat button { border: 1px solid var(--border); border-radius: 0; padding: .55rem .7rem; font: inherit; font-size: .8rem; color: var(--foreground); background: color-mix(in srgb, var(--background) 60%, transparent); cursor: pointer; min-height: 40px; }
.local-chat button:hover { background: var(--surface); }
.local-chat button:disabled { opacity: .5; cursor: default; }
.local-chat :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
#chat-close { margin-left: auto; border: 0; font-size: 1.2rem; }
.chat-note, #chat-status { font-size: .7rem; line-height: 1.45; color: var(--muted-foreground); margin: .6rem 0 0; }
#chat-status:empty { display: none; }
.chat-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.chat-actions span { font-size: .65rem; color: var(--muted-foreground); }
.chat-messages { margin: 1rem 0 .65rem; height: 160px; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }
.chat-message { padding: .7rem .8rem; margin: .5rem 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: .85rem; background: color-mix(in srgb, var(--background) 65%, transparent); border-left: 2px solid var(--link); }
.chat-message[data-role="user"] { margin-left: 2rem; border-left: 0; border-right: 2px solid var(--accent); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.chat-suggestions { display: flex; gap: .4rem; flex-wrap: wrap; }
.chat-suggestions button { text-align: left; font-size: .72rem; min-height: 36px; }
#chat-form { margin-top: .8rem; }
.chat-input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chat-composer { display: flex; align-items: end; border: 1px solid var(--border); background: color-mix(in srgb, var(--background) 80%, transparent); }
#chat-input { box-sizing: border-box; width: 100%; resize: vertical; max-height: 8rem; background: transparent; color: var(--foreground); border: 0; padding: .7rem; font: inherit; font-size: .85rem; }
#chat-send { margin: .3rem; background: var(--foreground); color: var(--background); font-size: 1.1rem; }
.hero:has(.chat-slot) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.hero:has(.chat-slot) .hero-copy { width: 100%; }
@media (max-width: 760px) { .hero:has(.chat-slot) { grid-template-columns: 1fr; gap: 2rem; } .local-chat { padding: 1rem; } }

.chat-slot { position: relative; z-index: 3; min-width: 0; }
.local-chat[data-state="page"] { position: fixed; z-index: 60; right: 1.25rem; bottom: 1.25rem; width: min(390px, calc(100vw - 2.5rem)); max-height: calc(100dvh - var(--chat-pin-top) - 1.25rem); overflow-y: auto; background: color-mix(in srgb, var(--background) 85%, transparent); }
.local-chat[data-state="page"].chat-expanded { top: var(--chat-pin-top); bottom: 1.25rem; width: min(600px, calc(100vw - 2.5rem)); display: flex; flex-direction: column; }
.local-chat.chat-expanded .chat-messages { flex: 1; height: auto; min-height: 100px; max-height: none; }
.chat-reopen { position: fixed; z-index: 60; right: 1.25rem; bottom: 1.25rem; min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 0; background: var(--foreground); color: var(--background); font: inherit; cursor: pointer; }
.chat-reopen:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.chat-footer-slot { min-height: 72px; display: flex; align-items: center; justify-content: flex-end; padding: .75rem 1.25rem; }
.chat-reopen.chat-docked { position: static; }
#chat-expand { margin-left: auto; }
#chat-expand:not([hidden]) + #chat-close { margin-left: 0; }
@media (max-width: 760px) { .local-chat[data-state="page"] { right: .75rem; bottom: .75rem; width: calc(100vw - 1.5rem); } .local-chat[data-state="page"].chat-expanded { inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; z-index: 100; } .chat-reopen { right: .75rem; bottom: .75rem; } }

.chat-preview { padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--background) 65%, transparent); background: color-mix(in srgb, var(--background) 55%, transparent); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5); }
.chat-preview-label { color: var(--muted-foreground); font-size: .7rem; margin: .5rem 0 1.25rem; }
.chat-preview .chat-message { margin-block: .9rem; }
.chat-preview-invite { font-size: .8rem; color: var(--link); margin: 1.25rem 0 0; }
@media (max-width: 760px) {
  html:has(.local-chat[data-state="page"].chat-expanded:not([hidden])) { overflow: hidden; }
  .local-chat.chat-expanded { overscroll-behavior: contain; }
}
#chat-input { resize: none; min-height: 44px; max-height: 144px; overflow-y: hidden; }
.chat-settings { margin-top: .7rem; padding: .7rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.chat-settings-heading { display: flex; align-items: center; gap: .55rem; font-size: .75rem; }
#chat-mode { flex: 1; min-width: 0; font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: 0; padding: .5rem; }
#chat-settings-close { border: 0; font-size: 1.1rem; }
.chat-tools { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }
.chat-tools:has(button:not([hidden])) { min-height: 40px; }
.chat-preview .chat-suggestions { margin-top: 1rem; }

#chat-expand { border: 0; width: 40px; padding: .5rem; }
.chat-expand-icon { display: block; margin: auto; }
.collapse-arrows, #chat-expand[aria-pressed="true"] .expand-arrows { display: none; }
#chat-expand[aria-pressed="true"] .collapse-arrows { display: block; }

/* One focus ring encloses the field and send button, without overlapping them. */
.local-chat .chat-composer:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.local-chat #chat-input:focus-visible, .local-chat #chat-send:focus-visible { outline: none; }
#chat-send:focus-visible { box-shadow: inset 0 0 0 2px var(--background); }
#chat-settings-open { display: inline-flex; align-items: center; gap: .5rem; }
.chat-engine-dot { display: inline-block; width: 8px; height: 8px; background: #168347; border-radius: 50%; flex: 0 0 auto; }
.chat-engine-dot[data-status="unavailable"] { background: #d2443c; }
.chat-engine-dot[data-status="loading"] { background: transparent; border: 1.5px solid var(--border); border-top-color: var(--link); animation: chat-engine-spin .8s linear infinite; }
@keyframes chat-engine-spin { to { transform: rotate(360deg); } }
.chat-preview-thinking { color: var(--link); letter-spacing: .2em; }
.chat-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { .chat-engine-dot[data-status="loading"] { animation: none; } }

/* Suggestions float over the transcript only while composing or choosing one. */
#chat-form { position: relative; }
#chat-suggestions { position: absolute; z-index: 2; inset-inline: 0; bottom: calc(100% + .65rem); padding: .5rem; background: color-mix(in srgb, var(--background) 92%, transparent); border: 1px solid var(--border); box-shadow: 0 -6px 20px rgb(0 0 0 / .08); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
#chat-form:focus-within #chat-suggestions { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { #chat-suggestions { transition: none; transform: none; } }