/* v32: light by default. Original layout and all application controls remain. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --side: #f5f6f8;
  --panel: #f5f7fa;
  --hover: #e9edf2;
  --line: #d2d9e2;
  --text: #202733;
  --muted: #526070;
  --soft: #626d7b;
  --green: #0b8066;
  --blue: #eaf0fc;
  --red: #bf3038;
  --surface: #ffffff;
  --field: #ffffff;
  --active: #e0e7f0;
  --primary: #243746;
  --on-primary: #ffffff;
  --accent-text: #14634f;
  --link: #22529c;
  --code: #f4f6f8;
  --note: #eaf5ef;
  --track: #dfe5eb;
  --warning: #82430d;
  --warning-line: #bc793b;
  --success-line: #43866a;
  --focus: #21775f;
  --fade-rgb: 255,255,255;
  --shadow: 0 8px 28px rgba(26,40,55,.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #212121;
  --side: #171717;
  --panel: #2b2b2b;
  --hover: #353535;
  --line: #505050;
  --text: #ececec;
  --muted: #c0c0c0;
  --soft: #b0b0b0;
  --blue: #253e63;
  --red: #ff8b91;
  --surface: #292929;
  --field: #242424;
  --active: #393939;
  --primary: #f2f3f4;
  --on-primary: #171717;
  --accent-text: #a1e4cf;
  --link: #b8d2ff;
  --code: #18191b;
  --note: #203d34;
  --track: #434343;
  --warning: #ffd0a8;
  --warning-line: #c18b59;
  --success-line: #71b197;
  --focus: #a1e4cf;
  --fade-rgb: 33,33,33;
  --shadow: 0 8px 28px rgba(0,0,0,.2);
}

/* Surfaces use shared tokens so changing theme cannot leave dark input islands. */
body, .workspace { background: var(--bg); color: var(--text); }
input, textarea, select { color: var(--text); background: var(--field); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--soft); opacity: 1; }
input[type="checkbox"] { accent-color: var(--green); }
.login-card, .project-card, .modal, .project-card-head {
  background: var(--surface); border-color: var(--line);
}
.sidebar { background: var(--side); border-color: var(--line); }
.side-bottom, .topbar, .project-drawer { border-color: var(--line); }
.topbar { background: var(--bg); }
.new-chat, .config-panel, .dropzone, .file-card, .upload-row {
  background: var(--panel); border-color: var(--line);
}
.nav-list button.sel { background: var(--active); }
.new-chat:hover, .side-action:hover, .nav-list button:hover, .profile-row:hover,
.ghost:hover, .icon:hover, .project-pill:hover { background: var(--hover); }
.drop-icon, .file, .round, .brand-controls button, .flow-actions button,
.orc-actions button, .modal-actions button:not(.primary) {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.primary, .send, .dropzone button, .orc-actions .primary,
.brand-context-modal .modal-actions button {
  background: var(--primary); color: var(--on-primary);
}
.file-card a, .queue-head { color: var(--text); }
.file-card small, .upload-meta small, .upload-meta em { color: var(--muted); }
.file-remove { background: var(--surface); color: var(--muted); border-color: var(--line); }
.file-remove:hover { background: var(--panel); color: var(--red); border-color: var(--red); }
.upload-queue { background: var(--surface); border-color: var(--line); }
.bar { background: var(--track); }
.bar span { background: var(--primary); }
.upload-row.done { border-color: var(--success-line); }
.upload-row.done .bar span { background: var(--green); }
.upload-row.error, .image-card.broken { border-color: var(--red); }
.upload-row.error .bar span { background: var(--red); }
.image-card.broken::before { color: var(--red); }
.eyebrow { color: var(--accent-text); }
.user .bubble { background: var(--blue); color: var(--text); }
.bubble a, .image-card a, .brand-context-modal a { color: var(--link); }
.code-block, .inline-code, .orc-result { background: var(--code); color: var(--text); border-color: var(--line); }
.composer { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.composer-wrap { background: linear-gradient(180deg,rgba(var(--fade-rgb),0),var(--bg) 18%); }
.composer textarea { background: transparent; }
.round.recording { background: #bb2532; color: #ffffff; }
.request-flow { background: var(--panel); border-color: var(--line); }
.request-flow strong { color: var(--accent-text); }
.request-flow span { color: var(--muted); }
.request-flow[data-tone="error"] { border-color: var(--warning-line); }
.request-flow[data-tone="error"] strong { color: var(--warning); }
.request-flow[data-tone="success"] { border-color: var(--success-line); }
.brand-review-note { background: var(--note); color: var(--text); }
.brand-context-modal .modal-actions { background: var(--surface); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline-color: var(--focus); }

/* Contain long project names, filenames and generated content at their source. */
.shell, .workspace, .chat, .composer-wrap, .project-card, .config-panel,
.dropzone, .files, .file-card, .brand-controls, .request-flow, .modal form {
  min-width: 0;
  max-width: 100%;
}
.shell, .workspace { width: 100%; }
.shell { grid-template-columns: var(--sidebar) minmax(0,1fr); }
.workspace { grid-template-columns: minmax(0,1fr); }
.composer { min-width: 0; width: 100%; }
#chatUploadHost, #projectUploadHost, .upload-queue, .upload-row, .upload-meta,
.upload-meta > div, .queue-head, .queue-head strong {
  min-width: 0; max-width: 100%;
}
#chatUploadHost { width: 100%; max-width: min(820px,100%); }
.upload-queue { width: 100%; grid-template-columns: minmax(0,1fr); }
.upload-row, .upload-meta { width: 100%; }
.upload-meta strong { max-width: 100%; }
.upload-meta em { min-width: 0; flex: 0 1 auto; }
.queue-head strong { overflow-wrap: anywhere; }
.queue-head > span { flex: 0 0 auto; }
.chat { overscroll-behavior: contain; }
.bubble, .md, .brand-controls small, .request-flow, .upload-meta em,
.brand-context-modal, .users-list, .modal h2 { overflow-wrap: anywhere; }
.md { max-width: 100%; }
.md pre, .md table, .md img, .md video, .md audio { max-width: 100%; }
.project-card-head > div { min-width: 0; }
.project-card-head h2 { overflow-wrap: anywhere; }
#collapseProject { flex: 0 0 auto; }
.dropzone input[type="file"] { width: 100%; min-width: 0; }
.dropzone strong { max-width: 100%; }
.orc-actions { grid-template-columns: auto auto minmax(0,1fr) auto; }
.orc-actions > *, .modal input, .modal textarea, .brand-controls select { min-width: 0; }
.modal-actions button, .dropzone button, .primary, .profile-row,
.new-chat, .side-action, .file-remove { min-height: 44px; }
.modal-actions button { padding: 10px 14px; border-radius: 10px; }
.file-remove { width: 44px; flex: 0 0 44px; }
.topbar .icon { min-width: 44px; }
.modal-actions { flex-wrap: wrap; }
.modal { margin: auto; max-height: calc(var(--app-height,100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.modal label { display: block; margin-top: 12px; }
.modal::backdrop { background: rgba(15,23,34,.42); }
.brand-context-modal .modal-actions { bottom: -18px; }
.login {
  display: flex; flex-direction: column; align-items: center;
  height: var(--app-height,100dvh); overflow: auto;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.login-card { width: min(100%,420px); margin: auto 0; flex: 0 0 auto; box-shadow: var(--shadow); }
.login-card label { text-align: left; color: var(--muted); font-weight: 600; margin-bottom: -8px; }
.login-card input { width: 100%; min-width: 0; }
#themeToggle .avatar { background: var(--active); color: var(--text); }

/* An open desktop drawer shares the remaining height with the conversation. */
@media(min-width:781px) {
  .workspace:has(> .project-drawer:not(.hide)) {
    grid-template-rows: calc(var(--top) + env(safe-area-inset-top)) minmax(0,1fr) minmax(0,1fr) auto;
  }
  .workspace:has(> .project-drawer:not(.hide)) > .project-drawer { min-height: 0; max-height: none; }
}
@media(max-width:780px) {
  .project-drawer, .composer-wrap { background: var(--bg); }
  .topbar .project-pill { min-width: 0; }
  .project-card-head { background: var(--surface); }
  .orc-actions { grid-template-columns: minmax(0,1fr); }
  .modal { width: calc(100% - 24px); }
  .modal.wide, .brand-context-modal { width: calc(100% - 24px); padding: 14px; }
  .brand-context-modal .modal-actions { bottom: -14px; }
  .brand-controls { grid-template-columns: minmax(0,1fr) auto; }
  .brand-controls button { white-space: normal; max-width: 132px; }
  .composer textarea { max-height: min(180px,calc(var(--app-height,100dvh) * .24)); }
  .login-card { padding: 24px 20px; }
}
@media(max-height:500px) {
  .login { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
  .login-card { gap: 10px; padding: 18px; }
  .login-card h1 { margin: 8px 0 0; }
  .login-card p { margin: 0; }
}
@supports(-webkit-touch-callout:none) {
  input, textarea, select, .brand-controls select { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .sidebar, .bar span { transition: none; }
  .round.recording { animation: none; }
}