/* Presentation only. No document metrics, content, or interaction handlers. */
:root {
  --background:#000; --surface:#101112; --text:#f5f6f6; --muted:#929a9a;
  --teal:#91f2ce; --border:#292e2e; --secondary-text:#bec6c5;
  --hover:#191e1d; --active:#152821; --active-border:#365c4c;
  --focus-border:#91f2ce; --accent-text:#06231a;
  --workspace-bg:#000; --sidebar-bg:#080a09; --panel-bg:#0b0e0d;
  --bubble:#171e1b; --panel-shadow:0 20px 60px #0002;
}
:root[data-theme="creative"] {
  color-scheme:dark; --background:#09151d; --surface:#122630; --text:#f4fafb;
  --muted:#99b1ba; --teal:#80f3db; --border:#37515c; --secondary-text:#c5d6dc;
  --hover:#1c3a43; --active:#164049; --active-border:#428d91; --focus-border:#80f3db;
  --accent-text:#04272a; --sidebar-bg:#0b1b24d9; --panel-bg:#122630c9; --bubble:#23404d;
  --workspace-bg:radial-gradient(ellipse at 72% 12%,#1a5e6c5c,transparent 52%),radial-gradient(ellipse at 95% 90%,#12575d5c,transparent 48%),linear-gradient(130deg,#0b1521,#0b222c);
  --panel-shadow:0 20px 70px #0003,inset 0 1px #c5fbff0c;
}
:root[data-theme="light"] {
  color-scheme:light; --background:#f7f9f8; --surface:#fff; --text:#202926;
  --muted:#606f69; --teal:#176c55; --border:#d9e2dd; --secondary-text:#506159;
  --hover:#edf3ef; --active:#e1f0e7; --active-border:#abcbbc; --focus-border:#328568;
  --accent-text:#fff; --sidebar-bg:#f0f4f1; --panel-bg:#fff; --bubble:#e7efea;
  --workspace-bg:#f7f9f8; --panel-shadow:0 12px 42px #233d2e07;
}
body { background:var(--workspace-bg); background-attachment:fixed; font-size:15px; line-height:1.55; }
button,input,textarea,select { font-family:inherit; }
.sidebar { width:224px; padding:28px 18px 20px; gap:28px; background:var(--sidebar-bg); }
.sidebar-top { padding:0 8px; }
.brand-logo { width:116px; height:54px; }
:root[data-theme="creative"] .brand-logo { mix-blend-mode:screen; }
:root[data-theme="light"] .brand-logo { filter:invert(1) hue-rotate(155deg); mix-blend-mode:multiply; }
.nav-button { border-radius:12px; padding:12px 14px; min-height:46px; font-size:14px; letter-spacing:-.15px; }
.nav-label { font-size:10px; letter-spacing:1.25px; }
.sidebar-note { opacity:.55; font-size:10px; }
.history-hint { font-size:11px; margin-bottom:10px; }
.nav-bottom { border-top-color:var(--border); }
.page { margin-left:224px; }
.header { min-height:98px; padding:22px 38px; grid-template-columns:1fr auto; }
.header>.brand-logo { display:none; }
.prototype-label { text-transform:none; letter-spacing:.2px; font-size:12px; }
.header-actions { gap:20px; }
#account-button { border-radius:100px; background:var(--panel-bg); padding:9px 18px; }
.welcome { align-items:flex-start; text-align:left; width:min(100%,1060px); margin:0 auto; padding:52px 48px 64px; justify-content:center; }
.welcome>.spark { display:none; }
.eyebrow { font-size:10px; letter-spacing:1.8px; color:var(--teal); margin-bottom:16px; }
h1 { font-size:clamp(32px,3.4vw,48px); letter-spacing:-1.8px; font-weight:600; line-height:1.12; }
.subtitle { font-size:18px; margin-top:14px; letter-spacing:-.3px; }
.suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; max-width:none; margin-top:38px; }
.chip { display:grid; grid-template-columns:1fr; justify-items:start; align-content:start; text-align:left; padding:24px; gap:14px; border-radius:18px; background:var(--panel-bg); font-size:17px; font-weight:550; letter-spacing:-.4px; box-shadow:var(--panel-shadow); min-height:170px; }
.chip svg { width:25px; height:25px; }
.chip small { font-size:13px; font-weight:400; line-height:1.6; color:var(--muted); letter-spacing:0; }
.chip:hover { background:var(--hover); transform:translateY(-2px); }
#preprompt-actions { width:100%; }
.context-actions { gap:12px; margin-top:20px; }
.context-action { background:var(--panel-bg); border-radius:16px; padding:20px; min-height:132px; box-shadow:var(--panel-shadow); }
.context-action strong { font-size:14px; letter-spacing:-.2px; }
.context-action-description { font-size:12px; color:var(--muted); }
.composer-area { width:min(100%,1060px); padding:0 48px 24px; position:sticky; bottom:0; z-index:4; background:linear-gradient(transparent,var(--background) 35%); }
.composer { border-radius:20px; padding:14px 16px 12px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--panel-shadow); }
#prompt { font-size:15px; line-height:1.6; }
.send { border-radius:13px; width:40px; height:40px; }
.upload { border-radius:12px; }
.footnote,.chat-note { font-size:10px; color:var(--muted); }
.chat-thread { width:min(100%,1060px); padding:28px 48px 44px; }
.messages { gap:28px; }
.message-text { font-size:15px; line-height:1.8; }
.message-user>.message-text { background:var(--bubble); color:var(--text); border:1px solid var(--border); border-radius:18px 18px 5px 18px; padding:12px 18px; }
.message-actions { opacity:.65; }
.draft-panel { border-radius:18px; background:var(--panel-bg); box-shadow:var(--panel-shadow); }
.draft-toolbar { background:transparent; padding:20px; border-bottom:1px solid var(--border); }
.draft-toolbar h3 { font-size:14px; letter-spacing:-.2px; }
.draft-controls button { border-radius:9px; font-size:11px; min-height:36px; }
.resume-document { padding:20px; }
.resume-sheet { border-radius:4px; box-shadow:0 5px 18px #0002; }
.resume-pages { gap:20px; }
.resume-pages { background:var(--hover); border:1px solid var(--border); }
.resume-sheet figcaption { color:var(--muted); }
.resume-state { font-size:12px; }
.resume-style-note,.resume-export-note { font-size:11px; line-height:1.7; }
.resume-exports { gap:10px; }
.resume-exports button { border-radius:12px; min-height:44px; font-size:12px; }
.section-view { max-width:850px; padding:48px; width:100%; margin:0 auto; }
.appearance,.empty-state { background:var(--panel-bg); border-radius:18px; padding:24px; }
.theme-options { gap:10px; flex-wrap:wrap; }
.theme-option { border-radius:12px; }
.auth-dialog { background:var(--surface); border-radius:24px; box-shadow:var(--panel-shadow); }
:root[data-theme="creative"] .sidebar,:root[data-theme="creative"] .draft-panel { backdrop-filter:blur(18px); }
/* Latest full document becomes the second pane without moving or cloning any node.
   Earlier drafts retain their existing controls in the conversation. */
@media(min-width:1120px) {
  .chat-thread:has(.resume-document) { width:100%; max-width:1680px; padding:24px 32px 36px; }
  .messages:has(.resume-document) { display:grid; grid-template-columns:minmax(330px,1fr) minmax(420px,1.12fr); column-gap:32px; row-gap:0; align-items:start; }
  .messages:has(.resume-document)>.message { grid-column:1; margin-bottom:28px; }
  .messages>.message:has(.resume-document):not(:has(~ .message .resume-document)) { display:contents; }
  .messages>.message:has(.resume-document):not(:has(~ .message .resume-document))>* { grid-column:1; }
  .messages>.message:has(.resume-document):not(:has(~ .message .resume-document))>.draft-panel { grid-column:2; grid-row:1 / span 1000; position:sticky; top:24px; max-height:calc(100dvh - 48px); overflow:auto; margin:0; }
  .messages:has(.resume-document) .message .draft-panel { max-height:520px; overflow:auto; }
  .messages:has(.resume-document) .resume-sheet canvas { width:auto; max-width:100%; max-height:52dvh; margin:auto; }
  .messages:has(.resume-document) .resume-pages { padding:12px; }
  .messages:has(.resume-document) .resume-exports { grid-template-columns:1.4fr 1fr 1fr; }
  .messages:has(.resume-document) .resume-exports .resume-google { grid-column:auto; }
  .messages:has(.resume-document) .draft-toolbar { padding:14px 20px; }
  .page:has(.chat-thread:not([hidden]) .resume-document)>.composer-area { width:calc((100% - 96px) / 2.12); margin-left:32px; padding:16px 0 20px; }
}
@media(max-width:1119px) {
  .welcome { max-width:880px; padding:40px 32px; }
  .composer-area,.chat-thread { padding-left:32px; padding-right:32px; }
}
@media(max-width:800px) {
  .page { margin-left:0; }
  .sidebar { width:min(290px,86vw); }
  .header { padding:18px 24px; min-height:80px; }
  .header-brand { gap:10px; }
  .header>.brand-logo { display:block; width:100px; height:46px; }
  .header { grid-template-columns:44px 1fr auto; }
  .welcome { padding:28px 24px 40px; }
  h1 { font-size:36px; }
  .composer-area,.chat-thread { padding-left:24px; padding-right:24px; }
}
@media(max-width:520px) {
  .suggestions { gap:10px; margin-top:28px; }
  .chip { padding:18px 14px; min-height:156px; font-size:14px; border-radius:14px; gap:12px; }
  .chip small { font-size:11px; }
  h1 { font-size:32px; }
  .subtitle { font-size:15px; }
  .resume-document { padding:12px; }
  .context-actions { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:no-preference) {
  .chip,.nav-button,.context-action,.account-button,.theme-option { transition:background .18s,border-color .18s,color .18s,transform .18s; }
  .context-action:hover { transform:translateY(-1px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }