/* Readability refinements only; theme identities and document metrics stay intact. */
:root { --muted:#a7b0ad; }
:root[data-theme="creative"] { --muted:#b0c6cf; }
:root[data-theme="light"] { --muted:#53665c; }
.sidebar-note { display:none; }
.footnote { font-size:10px; margin:6px 0 0; }
.messages { gap:18px; }
.messages:has(.resume-document)>.message { margin-bottom:18px; }
.message-text { line-height:1.7; }
.message-actions { margin-top:4px; }
.composer { padding:10px 14px; }
#prompt { min-height:28px; max-height:180px; resize:none; overflow-y:auto; box-sizing:border-box; }
.composer-tools { margin-top:4px; }
.resume-document { min-width:0; }
.draft-panel { min-width:0; }
.document-view-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 0 12px; }
.document-view-tools button { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; padding:7px 10px; min-height:36px; cursor:pointer; font:inherit; font-size:12px; }
.document-view-tools button:hover { background:var(--hover); }
.document-view-tools button:disabled { opacity:.4; }
.document-view-tools button[aria-pressed="true"] { border-color:var(--focus-border); }
.document-view-tools output { width:64px; text-align:center; color:var(--secondary-text); font-size:12px; }
.document-view-tools button:last-child { margin-left:auto; }
.resume-document .resume-pages { display:block; max-height:65dvh; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:16px; }
.resume-document .resume-pages:empty { aspect-ratio:auto; min-height:250px; }
.resume-document .resume-pages .resume-sheet { width:var(--paper-width,100%); max-width:none; margin:0 auto 24px; }
.resume-document .resume-pages .resume-sheet:last-child { margin-bottom:0; }
.resume-document .resume-pages .resume-sheet canvas { width:100%; height:auto; max-width:none; max-height:none; margin:0; box-shadow:0 3px 16px #0003; }
.draft-toolbar { padding:12px 16px; }
.resume-style-note { margin:0 0 6px; }
.resume-export-note { margin-bottom:0; }
.quick-appearance { position:relative; }
.quick-appearance summary { display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; list-style:none; border:1px solid var(--border); border-radius:50%; color:var(--text); font-size:23px; background:var(--panel-bg); }
.quick-appearance summary::-webkit-details-marker { display:none; }
.quick-appearance-options { position:absolute; right:0; top:48px; min-width:180px; z-index:55; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--panel-shadow); }
.quick-appearance-options button { display:block; width:100%; border:0; border-radius:8px; background:transparent; color:var(--text); text-align:left; padding:10px 12px; font:inherit; font-size:13px; }
.quick-appearance-options button:hover { background:var(--hover); }
.quick-appearance-options button[aria-pressed="true"] { background:var(--active); color:var(--teal); }
.quick-appearance-options button[aria-pressed="true"]::after { content:'✓'; float:right; }
body.document-focus-open { overflow:hidden; }
/* FOCUS MODE: the document sits in its own full-window layer. The toolbar and export bar keep
   their natural height; only the pages area scrolls, so nothing can be covered or cut off. */
.focus-layer { position:fixed; inset:0; z-index:80; display:flex; background:#000c;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.focus-layer[hidden] { display:none; }
.focus-layer>.draft-panel { flex:1; min-width:0; min-height:0; max-height:none; margin:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.focus-layer .draft-toolbar { flex:none; }
.focus-layer .draft-panel>div:not(.draft-toolbar) { display:flex; flex:1; min-height:0; flex-direction:column; }
/* One compact control row (style on the left, view tools on the right) leaves the height to the page. */
.focus-layer .resume-document { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto auto; align-items:center; column-gap:12px; flex:1; min-height:0; padding:6px 14px 10px; }
.focus-layer .resume-style { grid-column:1; grid-row:1; display:flex; align-items:center; gap:8px; margin:0; font-size:12px; min-width:0; }
.focus-layer .resume-style select { min-height:34px; padding:4px 10px; max-width:220px; }
.focus-layer .document-view-tools { grid-column:2; grid-row:1; justify-content:flex-end; flex-wrap:wrap; padding:6px 0; }
.focus-layer .document-view-tools button:last-child { margin-left:0; }
.focus-layer .resume-state { grid-column:1/-1; grid-row:2; margin:2px 0 6px; }
.focus-layer .resume-document .resume-pages { grid-column:1/-1; grid-row:3; align-self:stretch; min-height:0; max-height:none; height:auto; overflow:auto; padding:16px; }
.focus-layer .resume-style-note { display:none; }
.focus-layer .resume-sheet { max-width:none; width:var(--paper-width,min(100%,816px)); }
.focus-layer .resume-exports { grid-column:1/-1; grid-row:4; position:static; margin-top:8px; grid-template-columns:1.3fr 1fr 1fr; }
.focus-layer .resume-exports .resume-google { grid-column:auto; }
.focus-layer .resume-exports button { min-height:40px; }
.focus-layer .resume-export-note { grid-column:1/-1; grid-row:5; margin:6px 0 0; }
/* On short windows (laptops at 125-150% zoom, phones in landscape) the advice line gives way to the page. */
@media(max-height:640px) { .focus-layer .resume-export-note { display:none; } .focus-layer .draft-toolbar { padding:6px 12px; } .focus-layer .resume-document .resume-pages { padding:8px; } }
@media(max-width:560px) {
  .focus-layer .resume-document { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto auto; }
  .focus-layer .document-view-tools { grid-column:1; grid-row:2; justify-content:flex-start; }
  .focus-layer .resume-state { grid-row:3; }
  .focus-layer .resume-document .resume-pages { grid-row:4; }
  .focus-layer .resume-exports { grid-row:5; grid-template-columns:1fr 1fr 1fr; }
  .focus-layer .resume-exports button { font-size:11px; padding:6px 4px; }
  .focus-layer .resume-export-note { grid-row:6; display:none; }
}
.focus-layer .draft-editor { flex:1; min-height:0; }
@media(min-width:1120px) {
  .messages:has(.resume-document) { grid-template-columns:minmax(300px,.85fr) minmax(490px,1.3fr); column-gap:24px; }
  .messages>.message:has(.resume-document):not(:has(~ .message .resume-document))>.draft-panel { max-height:calc(100dvh - 48px); overflow:auto; }
  .messages:has(.resume-document) .resume-document .resume-pages .resume-sheet canvas { max-height:none; width:100%; }
  .page:has(.chat-thread:not([hidden]) .resume-document)>.composer-area { width:calc((100% - 88px) * .85 / 2.15); }
}
@media(max-width:600px) {
  .header-actions { gap:8px; }
  .header { padding-left:16px; padding-right:16px; gap:6px; }
  .document-view-tools { gap:4px; }
  .document-view-tools button { padding:7px 8px; }
  .document-view-tools output { width:54px; }
  .resume-document .resume-pages { max-height:65dvh; padding:8px; }
  .focus-layer { padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .focus-layer .resume-document { padding:8px; }
  .focus-layer .resume-document .resume-pages { padding:8px; }
}