/* STUDIO LAYOUT (optional) and the shared pieces it introduced.
   Classic stays exactly as it was: everything Studio-specific is switched off unless
   <html data-layout="studio">. Colours come from the active theme, so Studio works with
   OLED Dark (the black dashboard), Creative (the deep-teal workspace) and Light. */

/* ---- Shared in every layout: guided task panel in the composer ---- */
.task-bar { border-bottom:1px solid var(--border); padding:2px 2px 10px; margin-bottom:8px; }
.task-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.task-head strong { font-size:13px; font-weight:600; color:var(--teal); letter-spacing:-.1px; }
.task-clear { width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:20px; line-height:1; }
.task-clear:hover { background:var(--hover); color:var(--text); }
.task-hint { margin:0 0 8px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.task-tools { display:flex; flex-wrap:wrap; gap:8px; }
.task-tool { border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text); padding:6px 14px; min-height:36px; font-size:12.5px; }
.task-tool:hover { background:var(--hover); border-color:var(--active-border); }

/* ---- Shared in every layout: in-place document editing on a page-like surface ---- */
.paper-editor { overflow:auto; max-height:70dvh; padding:16px; margin:0 12px 12px; border:1px solid var(--border); border-radius:10px; background:var(--hover); overscroll-behavior:contain; }
.paper-editor[hidden] { display:none; }
.document-dock .paper-editor,.focus-layer .paper-editor { flex:1 1 0; min-height:0; max-height:none; }
.paper-sheet { width:min(100%,816px); margin:0 auto; padding:clamp(18px,6%,60px); border-radius:4px; background:#fff; color:#16181a; box-shadow:0 5px 18px #0003; font-family:Roboto,"Helvetica Neue",Arial,sans-serif; }
.paper-block { border:1px solid transparent; border-radius:6px; padding:6px 10px; margin:0 -10px 8px; }
.paper-block:hover { border-color:#d3dad7; }
.paper-block:focus-within { border-color:#1b7f68; background:#f3faf7; }
.paper-heading { display:block; width:100%; border:0; border-bottom:1px solid #2a2d2f; border-radius:0; background:transparent; color:#16181a; font:700 12.5px/1.5 inherit; font-family:inherit; letter-spacing:.07em; text-transform:uppercase; padding:2px 0 3px; margin:0 0 8px; }
.paper-body { display:block; width:100%; min-height:44px; max-height:none; border:0; padding:0; background:transparent; color:#16181a; font:400 13px/1.6 inherit; font-family:inherit; resize:none; overflow:hidden; }
.paper-block:first-child .paper-body { text-align:center; font-size:13.5px; }
.paper-heading:focus,.paper-body:focus { outline:none; }
/* In page view the original text box stays in the document (it is what gets saved) but out of sight. */
.draft-panel.paper-mode>.draft-editor { position:absolute!important; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; border:0!important; flex:none!important; opacity:0; pointer-events:none; overflow:hidden; clip-path:inset(50%); }
@media(max-width:600px) { .paper-editor { margin:0 6px 8px; padding:8px; } .paper-sheet { padding:16px; } }

/* ---- Switched off in Classic / switched off in Studio ---- */
:root:not([data-layout="studio"]) :is(.studio-nav,.recent-work,.chip-studio-only,.notify,.label-studio,.home-dock,.studio-tabs,.studio-tabpanel) { display:none!important; }
:root[data-layout="studio"] :is(.chip-classic-only,.label-classic) { display:none!important; }
.home-dock { display:none; }

/* ---- Studio: sidebar ---- */
:root[data-layout="studio"] .sidebar>.nav-group:not(.studio-nav) { display:none; }
:root[data-layout="studio"] body:not(.history-open) .recent-chats { display:none; }
:root[data-layout="studio"] .sidebar { gap:18px; }
:root[data-layout="studio"] .studio-nav .nav-button { gap:12px; }
:root[data-layout="studio"] .studio-nav .nav-button svg { width:18px; height:18px; }
:root[data-layout="studio"] .studio-nav .nav-button[aria-current="page"] { background:var(--hover); color:var(--text); }
.studio-rule { border:0; border-top:1px solid var(--border); margin:14px 6px; }
:root[data-layout="studio"] .nav-bottom .nav-group { display:flex; align-items:center; gap:6px; }
:root[data-layout="studio"] .nav-bottom [data-view="profile"] { flex:1; min-width:0; gap:10px; white-space:nowrap; padding-left:8px; padding-right:8px; }
:root[data-layout="studio"] .nav-bottom [data-view="profile"][data-initial] svg { display:none; }
:root[data-layout="studio"] .nav-bottom [data-view="profile"][data-initial]::before,
:root[data-layout="studio"] #account-button[data-initial]::before { content:attr(data-initial); font-size:13px; font-weight:600; line-height:1; }
:root[data-layout="studio"] .nav-bottom [data-view="profile"][data-initial]::before { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:var(--hover); color:var(--text); }
:root[data-layout="studio"] .nav-bottom [data-view="settings"] { flex:none; width:44px; padding:0; justify-content:center; }
:root[data-layout="studio"] .nav-bottom [data-view="settings"] .nav-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---- Studio: header (bell + initial avatar) ---- */
:root[data-layout="studio"] .prototype-label { display:none; }
:root[data-layout="studio"] .header-actions { gap:10px; }
.notify { position:relative; }
.notify summary { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--panel-bg); color:var(--text); cursor:pointer; list-style:none; }
.notify summary::-webkit-details-marker { display:none; }
.notify summary svg { width:18px; height:18px; }
.notify summary:hover { background:var(--hover); }
.notify-panel { position:absolute; right:0; top:48px; z-index:55; width:min(280px,80vw); padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--panel-shadow); font-size:13px; }
.notify-panel p { margin:6px 0 0; color:var(--muted); line-height:1.5; }
:root[data-layout="studio"] #account-button[data-initial] { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; font-size:0; }

/* ---- Studio: dashboard content ---- */
:root[data-layout="studio"] .welcome .eyebrow { display:none; }
:root[data-layout="studio"] .welcome h1 { font-size:clamp(26px,2.5vw,34px); letter-spacing:-.8px; }
:root[data-layout="studio"] .welcome .subtitle { font-size:16px; color:var(--muted); margin-top:8px; }
:root[data-layout="studio"] .suggestions { gap:12px; margin-top:30px; }
:root[data-layout="studio"] .chip { min-height:118px; padding:18px 18px 16px; gap:8px; border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow:none; font-size:16px; }
:root[data-layout="studio"] .chip svg { width:18px; height:18px; margin-bottom:12px; }
:root[data-layout="studio"] .chip small { font-size:13.5px; line-height:1.5; }
.recent-work { width:100%; margin-top:34px; }
.recent-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.recent-head h2 { margin:0; font-size:15px; font-weight:600; letter-spacing:-.2px; }
.recent-head .text-button { color:var(--secondary-text); font-size:13px; min-height:36px; }
.recent-item { position:relative; display:grid; gap:2px; width:100%; min-height:64px; padding:14px 8px 14px 42px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--text); text-align:left; }
.recent-item::before { content:''; position:absolute; left:10px; top:19px; width:13px; height:17px; border:1.5px solid var(--muted); border-radius:3px; }
.recent-item:hover { background:var(--hover); }
.recent-item strong { font-size:14.5px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-item small { color:var(--muted); font-size:12.5px; }
.recent-empty { color:var(--muted); font-size:13px; line-height:1.6; margin:8px 0 0; }

/* ---- Studio: composer as one row (message, attach, send) ---- */
:root[data-layout="studio"] .composer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:8px; border-radius:16px; padding:10px 12px; }
:root[data-layout="studio"] .composer>#chat-attachment,:root[data-layout="studio"] .composer>.task-bar { grid-column:1/-1; }
:root[data-layout="studio"] .composer>#prompt { grid-column:1; align-self:center; }
:root[data-layout="studio"] .composer>.composer-tools { grid-column:2; margin:0; gap:6px; }
:root[data-layout="studio"] .composer .upload span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:root[data-layout="studio"] .composer .upload { width:40px; height:40px; padding:0; justify-content:center; border-color:transparent; }

/* ---- Studio: contextual choices as two clear buttons (primary + secondary) ---- */
:root[data-layout="studio"] .context-actions { display:flex; flex-wrap:wrap; gap:10px; }
:root[data-layout="studio"] .context-action { flex:0 1 auto; width:auto; min-height:44px; padding:10px 18px; border-radius:10px; display:inline-flex; align-items:center; box-shadow:none; }
:root[data-layout="studio"] .context-action strong { font-size:14px; font-weight:600; }
:root[data-layout="studio"] .context-action:first-child { background:var(--teal); color:var(--accent-text); border-color:transparent; }
:root[data-layout="studio"] .context-action:first-child strong { color:inherit; }
:root[data-layout="studio"] .context-action:first-child:hover { filter:brightness(1.06); }
:root[data-layout="studio"] .context-action :is(.context-action-description,.context-action-arrow) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---- Studio: document pane tabs (Resume / Analysis / Job match / Suggestions) ---- */
.studio-tabs { flex:none; display:flex; gap:22px; padding:0 8px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:3; background:var(--surface); }
.studio-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:14px 2px 12px; min-height:46px; font-size:14px; letter-spacing:-.1px; }
.studio-tabs button:hover { color:var(--text); }
.studio-tabs button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--teal); font-weight:550; }
.studio-tabpanel { padding:22px 20px 28px; font-size:14px; line-height:1.7; color:var(--text); overflow:auto; }
.studio-tabpanel[hidden] { display:none; }
.studio-empty { max-width:420px; color:var(--muted); }
.studio-empty strong { display:block; color:var(--text); font-size:15px; margin-bottom:6px; }
.studio-empty button { margin-top:14px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); padding:9px 16px; min-height:40px; font-size:13px; }
.studio-empty button:hover { background:var(--hover); }
:root[data-layout="studio"] .document-dock { flex-direction:column; }
:root[data-layout="studio"] .document-dock[data-tab]:not([data-tab="resume"])>:is(.draft-panel,.focus-home) { display:none!important; }
.home-dock[data-tab]:not([data-tab="resume"])>.home-document { display:none!important; }

/* ---- Studio: desktop composition (dashboard + document pane) ---- */
@media(min-width:1120px) {
  /* The sidebar can be collapsed and reopened on wide screens too (the choice is remembered). */
  :root[data-layout="studio"] body:has(#chat-view:not([hidden])) { overflow:hidden; }
  :root[data-layout="studio"] .page:has(#chat-view:not([hidden])) { height:100dvh; min-height:0; display:grid; grid-template-columns:minmax(440px,1fr) minmax(420px,1.08fr); grid-template-rows:minmax(0,1fr) auto; gap:0; padding:0; }
  :root[data-layout="studio"] .page:has(#chat-view:not([hidden]))>.header { display:none; }
  :root[data-layout="studio"] .page>#chat-view:not([hidden]) { grid-column:1; grid-row:1; width:100%; max-width:none; margin:0; padding:60px 44px 20px; overflow-y:auto; overscroll-behavior:contain; justify-content:flex-start; align-items:stretch; }
  :root[data-layout="studio"] .page:has(#chat-view:not([hidden]))>.composer-area { grid-column:1; grid-row:2; position:static; width:100%; max-width:none; margin:0; padding:8px 44px 18px; background:none; }
  :root[data-layout="studio"] .page:has(#chat-view:not([hidden]))>.home-dock { grid-column:2; grid-row:1/3; display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--border); background:var(--surface); }
  .home-dock .studio-tabpanel { flex:1; min-height:0; }
  .home-dock .home-document { flex:1; min-height:0; display:flex; flex-direction:column; padding:14px 18px 12px; }
  .home-dock .home-document[hidden] { display:none; }
  .home-dock .resume-document { flex:1; min-height:0; display:flex; flex-direction:column; padding:0; }
  .home-dock .resume-style-note,.home-dock .resume-export-note { display:none; }
  .home-dock .resume-style { display:flex; align-items:center; gap:8px; font-size:12px; margin:0 0 6px; }
  .home-dock .resume-state { margin:0 0 8px; font-size:11.5px; }
  .home-dock .resume-document .resume-pages { flex:1 1 0; min-height:0; max-height:none; overflow:auto; padding:14px; border-radius:10px; }
  .home-dock .resume-sheet { width:min(100%,816px); }
  .home-dock .resume-exports { grid-template-columns:1.3fr 1fr 1fr; margin-top:10px; }
  .home-dock .resume-exports .resume-google { grid-column:auto; }
  .home-dock .resume-exports button { min-height:40px; font-size:12px; }
  .home-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
  .home-actions strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .home-actions button { flex:none; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); padding:7px 14px; min-height:36px; font-size:12.5px; }
  .home-actions button:hover { background:var(--hover); }
  /* Active conversation: compact header above the split workspace. */
  :root[data-layout="studio"] .page:has(.chat-thread:not([hidden])) .header { min-height:56px; padding:8px 0; }
}
@media(prefers-reduced-motion:no-preference) {
  .recent-item,.task-tool,.studio-tabs button,.notify summary { transition:background .16s,color .16s,border-color .16s; }
}