:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #171717;
  color: #e8e8e8;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
button, input, textarea, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #b7b7b7; outline-offset: 4px; }
button { touch-action: manipulation; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app { position: fixed; top: var(--app-top, 0px); inset-inline: 0; height: var(--app-height, 100dvh); display: flex; flex-direction: column; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left)); }
h1 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.quiet-button { background: transparent; color: #aaa; border: 0; border-radius: .5rem; padding: .6rem .75rem; font-size: .85rem; }
.quiet-button:hover { color: #eee; background: #242424; }
.transcript-wrap { position: relative; flex: 1; min-height: 0; }
#history { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-color: #444 transparent; scrollbar-width: thin; }
#history:focus-visible { outline-offset: -3px; }
.conversation-column { max-width: 46rem; min-height: 100%; margin: 0 auto; padding: 1.5rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); }
#empty { min-height: 40vh; display: grid; place-items: center; text-align: center; }
#empty h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); font-weight: 500; letter-spacing: -.035em; color: #ddd; }
article { position: relative; margin: 0 0 1.8rem; overflow-wrap: anywhere; line-height: 1.7; font-size: 1rem; }
article.user { width: fit-content; max-width: 85%; margin-left: auto; padding: .65rem 1rem; border-radius: 1.25rem; background: #2a2a2a; white-space: pre-wrap; }
article.assistant { padding-bottom: .2rem; }
.message-body > :first-child { margin-top: 0; }
.message-body > :last-child { margin-bottom: 0; }
.message-body p, .message-body ul, .message-body ol { margin: 0 0 1rem; }
.message-body li + li { margin-top: .3rem; }
.message-body ul, .message-body ol { padding-left: 1.5rem; }
.message-body li > p { margin-bottom: .5rem; }
.message-body h1, .message-body h2, .message-body h3, .message-body h4, .message-body h5, .message-body h6 { margin: 1.4rem 0 .6rem; line-height: 1.35; font-size: 1.05rem; font-weight: 650; }
.message-body h1, .message-body h2 { font-size: 1.2rem; }
a { color: #d6e2ef; text-decoration-color: #758394; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; }
code { border-radius: .3rem; background: #292929; padding: .15em .35em; }
pre { max-width: 100%; overflow-x: auto; white-space: pre; padding: 1rem; border: 1px solid #333; border-radius: .75rem; background: #202020; line-height: 1.6; }
pre code { background: transparent; padding: 0; font-size: inherit; }
blockquote { border-left: 2px solid #555; margin: 1rem 0; padding-left: 1rem; color: #b8b8b8; }
hr { border: 0; border-top: 1px solid #3a3a3a; margin: 1.5rem 0; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9rem; margin: 1rem 0; }
th, td { border-bottom: 1px solid #383838; padding: .5rem .75rem; text-align: left; }
.copy { padding: .35rem .5rem; font-size: .75rem; }
.activity { margin: -.3rem 0 1.5rem; font-size: .8rem; color: #999; }
.activity summary, .privacy summary { cursor: pointer; padding: .5rem 0; width: fit-content; }
.activity ul { padding-left: 1.25rem; line-height: 1.6; }
.activity li + li { margin-top: .35rem; }
.warning, [data-state="error"] { color: #eab595; font-size: .85rem; line-height: 1.5; }
.warning { margin: .5rem 0 0; white-space: pre-wrap; }
.latest { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 2rem; box-shadow: 0 2px 12px #0005; }
.chat-footer { width: 100%; max-width: 46rem; margin: 0 auto; padding: .5rem max(1rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#status { margin: 0 0 .65rem; font-size: .8rem; color: #999; overflow-wrap: anywhere; max-height: 7rem; overflow-y: auto; line-height: 1.5; }
#status[data-state="error"] { color: #eab595; }
#composer { display: flex; align-items: flex-end; background: #252525; border: 1px solid #383838; border-radius: 1.5rem; overflow: hidden; }
#composer:focus-within { border-color: #666; }
textarea { flex: 1; width: 0; min-height: 3.5rem; max-height: min(180px, calc(var(--app-height, 100dvh) * .3)); resize: none; border: 0; background: transparent; color: inherit; padding: 1rem; line-height: 1.5; font-size: 1rem; overflow-y: auto; }
textarea:focus { outline: none; }
textarea::placeholder { color: #929292; }
.composer-action { padding: .45rem; }
.round-button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; color: #171717; background: #e8e8e8; }
.round-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#stop svg { fill: currentColor; stroke: none; }
.connection-hint { display: block; width: 100%; padding: .7rem .25rem .15rem; font-size: .75rem; text-align: center; }
dialog { position: fixed; top: calc(var(--app-top, 0px) + max(1rem, env(safe-area-inset-top))); bottom: auto; width: calc(100% - 2rem); max-width: 28rem; max-height: calc(var(--app-height, 100dvh) - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom))); margin: 0 auto; padding: 1.25rem; background: #202020; color: inherit; border: 1px solid #3b3b3b; border-radius: 1rem; overflow-y: auto; box-shadow: 0 16px 64px #0006; }
dialog::backdrop { background: #0009; }
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.settings-header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.settings-section { margin-bottom: 1.5rem; }
.settings-section h3, .settings-section label { display: block; margin: 0 0 .65rem; font-size: .9rem; font-weight: 600; }
input[type="password"] { width: 100%; padding: .8rem; background: #171717; color: inherit; border: 1px solid #484848; border-radius: .6rem; font-size: 1rem; }
.muted, .privacy, #settings-status { color: #aaa; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.muted { margin: .65rem 0 0; }
.settings-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.secondary-button { padding: .7rem .85rem; border: 1px solid #484848; border-radius: .6rem; background: transparent; color: #ddd; font-size: .8rem; }
.secondary-button:hover:not(:disabled) { background: #303030; }
.privacy { margin: 0 0 1.25rem; }
#settings-status[data-state="error"] { color: #eab595; }
.primary-button { width: 100%; padding: .8rem 1rem; border: 0; border-radius: .65rem; background: #e8e8e8; color: #171717; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .answer-actions { opacity: 0; }
  article:hover .answer-actions, article:focus-within .answer-actions, article:has(.feedback-editor:not([hidden])) .answer-actions { opacity: 1; }
}
@media (min-width: 600px) and (min-height: 700px) {
  dialog { top: calc(var(--app-top, 0px) + 5rem); max-height: calc(var(--app-height, 100dvh) - 6rem); }
}

.header-start { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.header-actions { display: flex; align-items: center; flex-shrink: 0; }
#chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; }
.sidebar-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
dialog.sidebar { top: var(--app-top, 0px); left: 0; right: auto; margin: 0; width: min(20rem, calc(100% - 3rem)); max-width: none; height: var(--app-height, 100dvh); max-height: var(--app-height, 100dvh); border-radius: 0 1rem 1rem 0; padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#sidebar-new-chat { width: 100%; text-align: left; }
#chat-list { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; }
.chat-entry { display: block; width: 100%; padding: .8rem; border: 0; border-radius: .6rem; background: transparent; color: #ccc; text-align: left; }
.chat-entry:hover:not(:disabled), .chat-entry[aria-current="true"] { background: #303030; color: #eee; }
.chat-entry span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.chat-entry small { display: block; color: #999; margin-top: .3rem; font-size: .7rem; }

.answer-actions { display: flex; align-items: center; gap: .25rem; margin-top: .4rem; }
.feedback-buttons { display: flex; align-items: center; gap: .15rem; }
.vote-button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: .4rem; }
.vote-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.thumb-down { transform: rotate(180deg); }
.vote-button[aria-pressed="true"] { color: #eee; background: #333; }
.feedback-status { font-size: .7rem; color: #aaa; margin-left: .4rem; }
.feedback-editor { max-width: 28rem; margin-top: .65rem; padding: .9rem; border: 1px solid #383838; border-radius: .75rem; background: #202020; }
.feedback-editor label { display: block; font-size: .85rem; margin-bottom: .5rem; }
.feedback-editor textarea { display: block; width: 100%; min-height: 5rem; max-height: 10rem; border: 1px solid #444; border-radius: .5rem; padding: .65rem; background: #171717; }
.feedback-editor textarea:focus-visible { outline: 2px solid #b7b7b7; outline-offset: 2px; }