:root {
  color-scheme: dark;
  --bg: #101012;
  --sidebar: #151517;
  --raise: #1c1c20;
  --raise2: #29292e;
  --border: #34343b;
  --fg: #f2f2f5;
  --muted: #a1a1ac;
  --blue: #4995ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--fg);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 1px solid transparent; color: var(--fg); background: transparent;
  min-width: 44px; min-height: 44px; padding: 10px 14px; border-radius: 10px;
  line-height: 1.4; overflow-wrap: anywhere; vertical-align: middle;
}
button:hover { background: var(--raise2); }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #9c9ca8; outline-offset: 2px; }
#messages:focus-visible { outline: none; }
button[data-icon]::before, .file-icon::before, .file-download::before {
  content: ''; display: block; width: 20px; height: 20px; flex: 0 0 20px;
  background: currentColor; mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
[data-icon="archive"] { --icon: url("./icons/archive.svg"); }
[data-icon="arrow-down"] { --icon: url("./icons/arrow-down.svg"); }
[data-icon="arrow-left"] { --icon: url("./icons/arrow-left.svg"); }
[data-icon="arrow-up"] { --icon: url("./icons/arrow-up.svg"); }
[data-icon="attach"] { --icon: url("./icons/attach.svg"); }
[data-icon="bell"] { --icon: url("./icons/bell.svg"); }
[data-icon="book"] { --icon: url("./icons/book.svg"); }
[data-icon="chevron-down"] { --icon: url("./icons/chevron-down.svg"); }
[data-icon="chevron-right"] { --icon: url("./icons/chevron-right.svg"); }
[data-icon="close"] { --icon: url("./icons/close.svg"); }
[data-icon="folder"] { --icon: url("./icons/folder.svg"); }
[data-icon="lock"] { --icon: url("./icons/lock.svg"); }
[data-icon="logout"] { --icon: url("./icons/logout.svg"); }
[data-icon="menu"] { --icon: url("./icons/menu.svg"); }
[data-icon="message"] { --icon: url("./icons/message.svg"); }
[data-icon="mic"] { --icon: url("./icons/mic.svg"); }
[data-icon="more"] { --icon: url("./icons/more.svg"); }
[data-icon="pin"] { --icon: url("./icons/pin.svg"); }
[data-icon="plus"] { --icon: url("./icons/plus.svg"); }
[data-icon="settings"] { --icon: url("./icons/settings.svg"); }
[data-icon="stop"] { --icon: url("./icons/stop.svg"); }
[data-icon="user"] { --icon: url("./icons/user.svg"); }

input, textarea, select {
  background: #151518; border: 1px solid var(--border); border-radius: 10px;
  color: var(--fg); padding: 11px 12px; min-width: 0; max-width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blue); flex: none; }
input::placeholder, textarea::placeholder { color: #92929d; }
a { color: #8bbcff; overflow-wrap: anywhere; }
p { line-height: 1.6; }
h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.primary { background: var(--blue); color: #07101e; font-weight: 600; padding: 10px 18px; }
.primary:hover, .action:hover { background: #72adff; }
.secondary { background: var(--raise2); border-color: var(--border); }
.round { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 12px; }
.hint, small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.danger { color: #ffacb3; border-color: #5e353d; }
.workspace { display: grid; grid-template-columns: 280px minmax(0,1fr); height: var(--viewport-height,100dvh); overflow: hidden; }
aside {
  background: var(--sidebar); border-right: 1px solid #27272d; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom)); min-height: 0;
}
.wordmark { display: block; width: 88px; height: auto; flex-shrink: 0; }
.pair-card .wordmark { width: 120px; }
.brand { display: flex; flex: 0 0 64px; align-items: center; justify-content: space-between; padding: 0 12px; margin-bottom: 8px; }
#search { width: 100%; margin-bottom: 16px; font-size: 13px; background: #202025; border-color: transparent; }
#sidebar-scroll { flex: 1; overflow: auto; min-height: 0; scrollbar-width: thin; }
#sidebar-scroll nav { min-width: 0; }
#sessions button { padding-left: 12px; padding-right: 12px; display: block; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sessions button[aria-current=true] { background: var(--raise2); }
.sidebar-bottom { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 14px; margin-top: 12px; border-top: 1px solid #303036; }
#new-session { flex: none; width: 100%; justify-content: flex-start; min-width: 0; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; white-space: nowrap; background: var(--raise2); color: var(--fg); border-color: var(--border); }
#new-session:hover { background: #34343b; }
#settings, #open-notifications { color: #c4c4ce; }
main { --content-gutter: max(24px,calc((100% - 840px)/2)); min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
header { height: 64px; flex: none; display: flex; gap: 8px; align-items: center; padding: 0 var(--content-gutter); }
header > button { flex-shrink: 0; }
#open-drawer, #close-drawer { display: none; }
#header-new { display: none; width: 44px; padding: 0; margin-left: auto; }
.knowledge-button:not([hidden]) + #header-new { margin-left: 0; }
header .knowledge-button { margin-left: auto; color: #c2c2cd; font-size: 13px; }
.project-breadcrumb { padding-left: 0; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 176px); color: #c2c2cd; font-size: 13px; justify-content: flex-start; }
.project-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection { min-height: 22px; flex: none; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; padding: 0 var(--content-gutter) 4px; overflow-wrap: anywhere; }
.connection:empty { display: none; }
#execution-status { color: #d1b98f; }
.notice { background: #28232a; border: 1px solid #483542; padding: 12px 16px; margin: 8px var(--content-gutter); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; }
.messages { flex: 1; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; min-height: 0; padding: 24px var(--content-gutter) 24px var(--content-gutter); scrollbar-gutter: stable; }
.empty { color: var(--muted); text-align: center; margin: 0; }
.messages:has(> .empty:only-child) { display: grid; place-items: center; }
.turn { margin-bottom: 32px; min-width: 0; overflow-wrap: anywhere; }
.from-me { margin-left: auto; max-width: 80%; width: fit-content; background: var(--raise2); padding: 12px 17px; border-radius: 18px 18px 4px 18px; white-space: pre-wrap; line-height: 1.55; }
.from-it { margin-top: 20px; max-width: 100%; font-size: 16px; line-height: 1.65; min-width: 0; overflow-wrap: anywhere; }
.from-it p { margin: 12px 0; }
.from-it pre { max-width: 100%; overflow: auto; background: var(--raise); padding: 16px; border: 1px solid var(--border); border-radius: 12px; white-space: pre; font-size: 13px; }
.from-it code { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.from-it :not(pre)>code { background: var(--raise); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.table-scroll { overflow: auto; max-width: 100%; }
table { border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border: 1px solid var(--border); min-width: 130px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.trace { color: var(--muted); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.composer-wrap { flex: none; padding: 8px var(--content-gutter) calc(8px + env(safe-area-inset-bottom)); }
.composer { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 44px; align-items: end; gap: 4px 6px; background: #222227; border: 1px solid #37373e; border-radius: 22px; padding: 8px; transition: border-color .15s; }
.composer:focus-within { border-color: #72727e; }
.composer > button { width: 44px; height: 44px; padding: 0; grid-row: 1; }
.composer #attach { grid-column: 1; justify-self: start; }
.composer #dictate { grid-column: 3; }
.composer #action { grid-column: 4; }
.composer textarea { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; resize: none; border: 0; border-radius: 0; background: transparent; line-height: 1.5; padding: 8px; max-height: min(240px,35dvh); overflow-y: auto; }
.composer textarea:focus-visible { outline: none; box-shadow: none; }
.composer .action { background: var(--blue); color: #07101e; border-radius: 50%; width: 44px; height: 44px; }
.composer-hint { min-height: 17px; text-align: left; margin: 6px 0 0; font-size: 11px; }
.attachments { display: flex; gap: 6px; flex-wrap: wrap; max-height: 120px; overflow: auto; }
.pending { padding: 10px 20px; background: var(--raise); font-size: 13px; overflow-wrap: anywhere; }
.pending button { color: #8bbcff; }
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.pair-card { width: min(100%,380px); }
.pair-card h1 { font-size: 38px; letter-spacing: -.045em; }
.pair-card label, .pair-card input { display: block; width: 100%; margin-top: 12px; }
.pair-card label { font-size: 13px; color: #c4c4ce; }
.pair-card button { width: 100%; margin-top: 14px; }
#pin-code, #pin-confirmation { font-size: 26px; letter-spacing: .65em; text-align: center; padding-left: 1em; }
#pair-error, #pin-error, #project-form-error, #conversation-error, #knowledge-error, #personal-error { color: #ffacb3; font-size: 13px; overflow-wrap: anywhere; }
/* Dialogs share spacing, header geometry and control sizes. Only their body scrolls past the header. */
dialog { background: var(--raise); color: var(--fg); border: 1px solid var(--border); border-radius: 20px; padding: 0 24px 24px; width: min(520px,calc(100% - 32px)); max-height: calc(var(--viewport-height,100dvh) - 48px); overflow: auto; scrollbar-width: thin; box-shadow: 0 24px 100px #0008; }
dialog::backdrop { background: #050509b8; }
.dialog-heading { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--raise); padding: 18px 0 16px; z-index: 2; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.dialog-heading h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 21px; }
.dialog-heading button { width: 44px; flex: 0 0 44px; padding: 0; color: #c4c4ce; }
dialog p:empty { display: none; }
dialog > p, #personal-body > p, #knowledge-body > p { font-size: 14px; }
dialog input:not([type=checkbox]), dialog textarea, dialog select { width: 100%; }
dialog button { max-width: 100%; }
.device { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.device span { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.device button { flex: none; color: #ffacb3; }
.settings-actions { display: grid; gap: 10px; margin-top: 24px; }
.settings-actions button { justify-content: flex-start; text-align: left; }
#execution-usage { padding: 12px 0; line-height: 1.6; }
#project-navigation { --tree-indent: 32px; }
#project-navigation .nav-tools { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 12px; }
#project-navigation .nav-tools button { padding: 8px; font-size: 12px; color: #b5b5c0; }
#project-navigation .nav-tools button::before { width: 16px; height: 16px; flex-basis: 16px; }
.nav-heading { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; margin: 26px 12px 10px; text-transform: uppercase; }
.nav-empty { margin: 10px 13px 16px; }
.project-row, .conversation-row { display: flex; align-items: center; min-width: 0; position: relative; border-radius: 10px; margin: 3px 0; }
.project-row:hover, .conversation-row:hover { background: #212126; }
.project-row .row-name, .conversation-row .row-name { flex: 1; min-width: 0; justify-content: flex-start; text-align: left; font-size: 13px; padding: 10px 6px; gap: 8px; }
.row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row-name::before { color: var(--muted); }
.project-row .row-action, .conversation-row .row-action { flex: 0 0 32px; width: 32px; min-width: 32px; min-height: 44px; padding: 0; color: var(--muted); border-radius: 8px; }
.row-action::before { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
.conversation-row.nested { margin-left: var(--tree-indent); }
.conversation-row:has(button[aria-current=true]), .project-row:has(button[aria-current=true]) { background: #2b2b33; }
.row-name:focus-visible { outline-offset: -2px; }
.conversation-project-label { position: absolute; left: 34px; bottom: 2px; font-size: 10px; color: var(--muted); max-width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row:has(.conversation-project-label) { padding-bottom: 16px; }
.load-more { font-size: 12px; color: var(--muted); width: 100%; }
.project-screen { flex: 1; min-height: 0; overflow: auto; padding: 40px var(--content-gutter) 40px var(--content-gutter); scrollbar-gutter: stable; }
.project-screen h2 { font-size: 32px; letter-spacing: -.03em; margin: 8px 0 24px; overflow-wrap: anywhere; }
.project-screen h3 { font-size: 14px; color: #b5b5c0; font-weight: 600; margin-top: 32px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.project-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.project-brief { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; line-height: 1.6; }
.project-screen .conversation-row { background: var(--raise); border: 1px solid #2b2b32; padding: 4px 8px; margin: 8px 0; }
.project-screen .conversation-row .row-name { font-size: 14px; padding: 12px 8px; }
.project-screen .row-action { width: 44px; min-width: 44px; flex-basis: 44px; }
#project-form label, #conversation-form label { display: block; margin: 20px 0 8px; font-size: 13px; color: #c4c4ce; }
#project-form textarea { min-height: 120px; }
#project-form .checkbox-label, #conversation-form .checkbox-label { display: flex; align-items: center; gap: 10px; }
#project-save, #conversation-save { width: 100%; margin: 8px 0 10px; }
#project-archive, #project-delete, #conversation-archive { width: 100%; margin-top: 10px; }
#project-order-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#project-order-controls button { flex: 1; background: var(--raise2); }
#project-delete-confirmation { background: #301c20; padding: 14px; border-radius: 12px; font-size: 13px; margin-top: 12px; }
#knowledge-dialog, #personal-dialog { width: min(720px,calc(100% - 32px)); }
#personal-dialog { height: min(760px,calc(var(--viewport-height,100dvh) - 48px)); }
#personal-dialog[data-view=inbox] { width: min(860px,calc(100% - 32px)); height: min(840px,calc(var(--viewport-height,100dvh) - 48px)); }
#personal-dialog .personal-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 4px; margin: 0 0 24px; border: 1px solid var(--border); border-radius: 12px; background: #141418; }
#personal-dialog .personal-tabs button { min-width: 0; padding: 9px 6px; font-size: 13px; background: transparent; border: 0; color: var(--muted); }
#personal-dialog .personal-tabs button[aria-current=true] { background: #363641; color: var(--fg); }
#personal-dialog .personal-tabs button:hover { color: var(--fg); background: var(--raise2); }
#personal-body section, #personal-body form, #knowledge-body form, .knowledge-record { display: grid; gap: 12px; margin: 20px 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #202025; min-width: 0; overflow-wrap: anywhere; }
#personal-body section > p, #personal-body section > h3, .knowledge-record > p { margin: 0; }
#personal-body label, #knowledge-body label { display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: #c4c4ce; min-width: 0; }
#knowledge-body > label { margin: 20px 0; }
#personal-body input[type=checkbox] { width: 20px; justify-self: start; }
#personal-body textarea, #knowledge-body textarea { min-height: 100px; }
#personal-body pre, #knowledge-body pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; background: #141418; padding: 12px; border-radius: 8px; }
#knowledge-body > h3 { margin: 28px 0 12px; }
#personal-body section > button, .knowledge-record > button { justify-self: start; }
#personal-body form > button, #knowledge-body form > button { justify-self: start; }
.inbox-empty { text-align: center; color: var(--muted); padding: 64px 12px; margin: 0; }
input[type=file] { font-size: 13px; padding: 8px; }
input::file-selector-button { background: var(--raise2); color: var(--fg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin-right: 10px; min-height: 40px; }
@media (max-width: 899px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
  aside { position: fixed; z-index: 5; inset: 0 auto 0 0; width: min(92vw,360px); transform: translateX(-100%); visibility: hidden; transition: transform .18s ease,visibility .18s; }
  body.drawer-open aside { transform: translateX(0); visibility: visible; }
  #close-drawer, #open-drawer { display: inline-flex; width: 44px; padding: 0; }
  .brand { flex-basis: 60px; }
  main { --content-gutter: 16px; }
  #header-new { display: inline-flex; }
  .backdrop { position: fixed; inset: 0; background: #0009; z-index: 4; width: 100%; height: 100%; border-radius: 0; }
  header { height: 60px; padding: 0 var(--content-gutter); gap: 4px; }
  .project-breadcrumb { max-width: calc(100% - 188px); padding: 8px; }
  #project-navigation { --tree-indent: 44px; }
  .project-row .row-action, .conversation-row .row-action { width: 44px; min-width: 44px; flex-basis: 44px; }
  .project-row .row-name, .conversation-row .row-name { font-size: 14px; }
  .messages { padding: 18px var(--content-gutter) 18px var(--content-gutter); }
  .composer-wrap { padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); }
  .from-me { max-width: 88%; }
  .project-screen { padding: 24px var(--content-gutter) 24px var(--content-gutter); }
  .project-screen h2 { font-size: 27px; }
  .project-page-actions button { width: 100%; }
}
@media (max-width: 520px) {
  dialog { width: calc(100% - 24px); max-height: calc(var(--viewport-height,100dvh) - 24px); padding: 0 16px 20px; border-radius: 16px; }
  #knowledge-dialog, #personal-dialog { width: calc(100% - 24px); }
  .dialog-heading { padding: 12px 0; gap: 12px; margin-bottom: 16px; }
  .dialog-heading h2 { font-size: 19px; }
  header .knowledge-button { width: 44px; padding: 0; }
  header .knowledge-button span { display: none; }
  .project-breadcrumb { max-width: calc(100% - 144px); }
  #personal-dialog .personal-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  #personal-body section, #personal-body form, #knowledge-body form, .knowledge-record { padding: 14px; }
  #personal-body section > button, .knowledge-record > button, #personal-body form > button, #knowledge-body form > button { width: 100%; }
  .device { gap: 8px; }
  .device button { padding: 8px; font-size: 13px; }
  .composer-hint { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { aside { transition: none; } }

/* File cards share the same presentation before and after sending. */
.file-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 10px; margin: 16px 0; max-width: 720px; }
.file-card, .attachment { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--raise); color: var(--fg); text-decoration: none; text-align: left; }
.file-card { min-height: 84px; }
.file-card:hover { background: var(--raise2); border-color: #666675; }
.file-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 48px; border-radius: 10px; background: #2d3342; color: #a4bfff; }
[data-kind=image] > .file-icon { background: #233d36; color: #89d5b1; }
[data-kind=audio] > .file-icon, [data-kind=video] > .file-icon { background: #37304b; color: #c8b0ef; }
[data-kind=sheet] > .file-icon { background: #283c32; color: #9ed7a8; }
[data-kind=archive] > .file-icon { background: #403528; color: #e9c187; }
.file-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
.file-name { color: var(--fg); font-size: 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.file-meta { font-size: 12px; line-height: 1.5; color: var(--muted); }
.file-download { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 44px; color: #b9b9c7; }
.attachment { flex: 0 1 350px; padding: 10px; margin-bottom: 6px; gap: 10px; }
.attachment .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment .file-icon { flex-basis: 36px; height: 40px; }
.attachment button { flex: 0 0 44px; padding: 0; }
@media (max-width:520px) { .file-card { padding: 12px; gap: 10px; } .file-download { flex-basis: 24px; } }
[data-icon="file"] { --icon: url("./icons/file.svg"); }
[data-icon="image"] { --icon: url("./icons/image.svg"); }
[data-icon="video"] { --icon: url("./icons/video.svg"); }
[data-icon="sheet"] { --icon: url("./icons/sheet.svg"); }
[data-icon="code"] { --icon: url("./icons/code.svg"); }

.onboarding-status{display:block;max-width:100%;margin:0 0 8px;padding:6px 10px;border:1px solid var(--line,#303238);border-radius:10px;background:transparent;color:var(--muted,#a8abb2);font-size:12px;text-align:left;white-space:normal;overflow-wrap:anywhere}
.onboarding-status[hidden]{display:none}
.onboarding-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.onboarding-actions button{padding:8px 12px;white-space:normal;min-height:40px}
#onboarding-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(var(--viewport-height,100dvh) - 48px);padding:0 24px 24px;overflow-y:auto}
.onboarding-item{border:1px solid var(--line,#303238);border-radius:14px;padding:16px;margin:16px 0;display:flex;flex-wrap:wrap;gap:10px}
.onboarding-item h3,.onboarding-item small,.onboarding-item p,.onboarding-item pre,.onboarding-item label{width:100%;margin:0;overflow-wrap:anywhere}
.onboarding-item label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.onboarding-item label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:10px}
.onboarding-item input[type=checkbox]{width:18px;min-height:18px;flex:none}
.onboarding-item textarea,.onboarding-item input:not([type=checkbox]){width:100%;min-width:0}
.onboarding-item pre{white-space:pre-wrap;max-height:300px;overflow:auto}
.onboarding-footer{position:sticky;bottom:-24px;padding:16px 0;background:var(--raise);border-top:1px solid var(--border);margin-top:16px}
.onboarding-footer button{width:100%;white-space:normal;min-height:44px}

/* Results and recorder expose human-readable state inside the shared dialog grid. */
.calculation-result output { display: block; font-size: 28px; line-height: 1.3; overflow-wrap: anywhere; margin: 12px 0; }
.recording-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.recording-status { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); }
.recording-status[data-state="recording"] { color: #ffadb5; border-color: #713f48; }
#onboarding-error { scroll-margin-top: 100px; }

#onboarding-error { color: #ffacb3; }
#onboarding-body > p { font-size: 14px; }
@media (max-width:520px) { #onboarding-dialog { width:calc(100% - 24px); max-height:calc(var(--viewport-height,100dvh) - 24px); padding:0 16px 20px; } .onboarding-footer { bottom:-20px; } }

/* Subtract reserved scrollbar space from the outer gutter, not the content column. */
.messages, .project-screen { padding-right: max(0px,calc(var(--content-gutter) - var(--scrollbar-width,0px))); }

.dictation-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; color:var(--muted); }
.dictation-bar button { flex:none; padding:8px; }

.dictation-bar { flex-wrap:wrap; }
#dictation-download { display:block; margin-top:8px; color:var(--muted); font-size:12px; }

/* Conversation layout: one reading column shared by history and composer. */
main { --content-gutter: max(24px,calc((100% - 960px)/2)); }
header { padding: 0 28px; border-bottom: 1px solid #ffffff08; }
.conversation-title { font-size: 14px; font-weight: 500; color: #c5c5cf; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages { padding-top: 36px; }
.turn { margin-bottom: 44px; }
.from-me { max-width: 86%; border-radius: 16px; background: #26262c; padding: 13px 18px; }
.from-it { margin-top: 24px; font-size: 16px; line-height: 1.75; }
.from-it p { line-height: inherit; margin: 14px 0; }
.from-it h2 { font-size: 25px; letter-spacing: -.025em; margin: 28px 0 14px; }
.from-it h3 { font-size: 20px; margin: 24px 0 12px; }
.from-it h4 { font-size: 17px; margin: 20px 0 10px; }
.from-it > div > :first-child { margin-top: 0; }
.work-status { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 14px; width: fit-content; border: 1px solid #ffffff12; border-radius: 12px; color: #c7c7d1; }
.work-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #a8b9cc; flex: none; }
.composer-wrap { padding-top: 12px; }
.composer { background: #202025; border-color: #ffffff22; border-radius: 20px; box-shadow: 0 5px 25px #00000015; }
.composer-hint { color: #a0a0ad; margin-top: 8px; }
#messages:focus-visible { outline: 2px solid #9c9ca8; outline-offset: -3px; }
@media (max-width: 899px) {
  main { --content-gutter: 24px; }
  header { padding: 0 20px; }
  .conversation-title { flex: 1; }
  .messages { padding-top: 24px; }
}
@media (max-width: 480px) {
  main { --content-gutter: 16px; }
  header { padding: 0 12px; }
  .turn { margin-bottom: 32px; }
  .from-it { font-size: 15px; line-height: 1.7; }
  .from-it h2 { font-size: 22px; }
  .from-me { max-width: 92%; padding: 11px 14px; }
}

.action-list { margin-top: 18px; }
.agent-action { border: 1px solid #ffffff16; border-radius: 12px; margin: 8px 0; font-size: 13px; color: #c5c5cf; }
.agent-action summary { cursor: pointer; padding: 13px 16px; min-height: 44px; overflow-wrap: anywhere; }
.agent-action summary:focus-visible { outline: 2px solid #9c9ca8; outline-offset: -2px; border-radius: 12px; }
.agent-action p { padding: 0 16px 14px; margin: 0; color: var(--muted); }
@media (max-width: 899px) {
  .composer-wrap { padding-left: max(var(--content-gutter),env(safe-area-inset-left)); padding-right: max(var(--content-gutter),env(safe-area-inset-right)); }
}

.markdown ul, .markdown ol { padding-left: 1.6em; margin: 14px 0; }
.markdown li { padding-left: .25em; margin: 5px 0; }
.markdown li > ul, .markdown li > ol { margin: 5px 0; }
.markdown blockquote { border-left: 3px solid #778492; margin: 22px 0; padding: 2px 20px; color: #bec4cd; }
.markdown .table-scroll { max-width: 100%; margin: 20px 0; border: 1px solid var(--border); border-radius: 10px; }
.markdown table { border-collapse: collapse; width: 100%; font-size: 14px; }
.markdown th, .markdown td { padding: 11px 14px; min-width: 110px; border: 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.markdown th { background: #ffffff06; text-align: left; font-weight: 600; }
.code-block { margin: 22px 0; min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--raise); }
.code-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 2px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }
.copy-button { min-height: 36px; padding: 7px 10px; font-size: 12px; color: var(--muted); }
.from-it .code-block pre { margin: 0; border: 0; border-radius: 0; background: transparent; }
.markdown a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

.history-control{align-self:center;margin:4px 16px;padding:6px 12px;border-radius:20px;font-size:13px}

.turn-controls{display:flex;justify-content:flex-end;gap:8px;margin:8px 0}.turn-controls button{font-size:13px;padding:6px 12px;border:1px solid var(--border);border-radius:12px}.turn-queue{max-height:140px;overflow:auto;margin-bottom:8px}.queued-turn{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:13px}.queued-turn span{flex:1;overflow-wrap:anywhere}.queued-turn button{flex-shrink:0;font-size:12px;padding:4px 8px}

/* Leave reading space when the keyboard or a queued draft reduces viewport height. */
.composer-wrap { flex: 0 1 auto; min-height: 0; max-height: 60%; overflow-y: auto; }
.context-button { font-size: 12px; margin-left: 0; padding-left: 0; }
@media (max-width:480px) { .copy-button { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .composer { transition:none; } }
main:has(> #project-screen:not([hidden])) .conversation-title { display:none; }
main:has(> #project-screen:not([hidden])) .project-breadcrumb { max-width:calc(100% - 104px); }

/* Shared interaction geometry: focus remains visible without outlining entire panes. */
select { appearance: none; min-height: 44px; line-height: 1.5; padding: 10px 38px 10px 12px; background-image: url("./icons/select-chevron.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
#pin-form { text-align: center; }
#pin-form .wordmark { margin-inline: auto; }
.project-row .row-name:hover, .conversation-row .row-name:hover { background: transparent; }
.project-breadcrumb:hover { background: #ffffff08; }
#messages:focus-visible { outline: 1px solid #62626e; outline-offset: -1px; }
.composer:has(#dictate[hidden]) { grid-template-columns: 44px minmax(0,1fr) 44px; }
.composer:has(#dictate[hidden]) #action { grid-column: 3; }
.composer textarea { min-height: 44px; }
.composer-hint { margin-top: 4px; }
.messages { padding-top: 20px; padding-bottom: 16px; }

.nav-section-toggle { display:flex; width:100%; margin:16px 0 6px; padding:8px 10px; min-height:40px; justify-content:flex-start; text-align:left; }
.nav-section-toggle::before { width:14px!important; height:14px!important; flex-basis:14px!important; }

#chat { position:relative; }
.file-drop-target { position:absolute; inset:12px; z-index:3; display:grid; place-items:center; padding:24px; border:2px dashed #a1a1ac; border-radius:16px; background:#202025ed; text-align:center; pointer-events:none; }

.sidebar-account { flex:1; min-width:0; padding-inline:4px; justify-content:flex-start; color:var(--muted); font-size:12px; }
.sidebar-account span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.account-credentials { display:grid; gap:10px; padding-block:12px; border-bottom:1px solid var(--border); }
.account-credentials h3,.account-credentials p { margin:0; }
.account-credentials label { font-size:13px; }
#password-error,#credentials-error { color:#ffacb3; font-size:13px; }

/* Received updates share the readable Markdown surface of conversations. */
.inbox-card { position: relative; overflow-wrap: anywhere; }
.inbox-card h3 { margin: 0 0 6px; }
.inbox-card > small { display: block; color: var(--muted); }
.inbox-card .markdown { margin: 16px 0; }
.inbox-card .markdown h2, .inbox-card .markdown h3 { font-size: 16px; margin: 18px 0 8px; }
.inbox-card > a { display: inline-block; margin: 0 16px 12px 0; }
.inbox-unread { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--fg); }
.inbox-card[data-read=false] { border-left: 3px solid var(--muted); }