/* One conversation, one document. These rules supersede the old in-message split layout. */
.document-archive[hidden],.draft-panel [hidden],.draft-panel>[hidden] { display:none!important; }
.local-demo-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:8px 14px; background:var(--active); border-bottom:1px solid var(--active-border); color:var(--text); font-size:12px; }
.local-demo-banner a,.local-demo-banner button { color:var(--teal); background:transparent; border:1px solid var(--border); border-radius:6px; padding:4px 8px; text-decoration:none; font:inherit; }
.header>.local-demo-banner { grid-column:1/-1; grid-row:2; border-radius:8px; }
.header:has(.local-demo-banner)>:is(.header-brand,.brand-logo,.header-actions) { grid-row:1; }
.document-reference { display:flex; align-items:center; gap:10px; max-width:100%; margin:12px 0 4px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; font:inherit; font-size:13px; overflow-wrap:anywhere; cursor:pointer; }
.document-reference::before { content:'↗'; color:var(--teal); font-size:18px; }
.document-reference[aria-pressed=true] { border-color:var(--focus-border); background:var(--active); }
.studio-entry[aria-pressed=true] { border-color:var(--teal); background:var(--active); color:var(--teal); }
/* Trial indicator: same place, now a readable pill that opens the message plans. */
.credit-badge { margin:0; display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 13px; border:1px solid var(--active-border); border-radius:999px; background:var(--active); color:var(--text); font:inherit; font-size:13px; font-weight:550; line-height:1.3; cursor:pointer; white-space:nowrap; }
.credit-badge::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.credit-badge:hover { border-color:var(--teal); }
.credit-badge[hidden] { display:none; }
.plan-list { display:grid; gap:10px; margin:14px 0; }
.plan-card { border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:var(--background); }
.plan-card.plan-current { border-color:var(--active-border); background:var(--active); }
.plan-card h3 { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; font-size:16px; }
.plan-card ul { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.55; }
.plan-price { margin:4px 0 0; color:var(--muted); font-size:14px; }
.plan-tag { padding:2px 9px; border:1px solid var(--active-border); border-radius:99px; color:var(--teal); font-size:11px; font-weight:500; white-space:nowrap; }
.plan-tag.plan-soon { border-color:var(--border); color:var(--muted); }
/* Profile: the Save name button is sized to its label, not the full form width. */
html:root #save-profile-name { justify-self:start; width:auto; min-height:38px; padding:7px 16px; font-size:13.5px; }
.company-note { align-self:stretch; margin:28px 0 0; color:var(--muted); font-size:11px; letter-spacing:.04em; text-align:center; opacity:.75; }
.recommended-tag { display:inline-block; width:fit-content; margin-top:8px; padding:3px 8px; border:1px solid var(--active-border); border-radius:99px; color:var(--teal); background:var(--active); font-size:10px; font-weight:500; line-height:1.4; font-style:normal; letter-spacing:.02em; }
/* Welcome screen: index.html moves the message box directly under the starter cards; in a
   conversation it returns to its docked place at the bottom. Same component, same styles. */
/* It scrolls with the page like the cards above it and never overlaps them. */
html:root .welcome>.composer-area.composer-inline { position:static; z-index:auto; flex:none; align-self:stretch; width:100%; max-width:none; min-width:0; max-height:none; box-sizing:border-box; margin:22px 0 0; padding:0 0 4px; overflow:visible; background:none; }
html:root .welcome>.composer-area.composer-inline>.footnote { margin-bottom:0; }
html:root .welcome>.composer-area.composer-inline>.status:empty { display:none; }
/* REPORTS: generated in the Studio panel. In Studio the chat keeps a compact reference to the
   report; Classic (no panel tabs) keeps the full text in the conversation as before. */
.report-reference { display:flex; align-items:center; gap:10px; max-width:100%; margin:12px 0 4px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; font:inherit; font-size:13px; overflow-wrap:anywhere; cursor:pointer; }
.report-reference::before { content:'↗'; color:var(--teal); font-size:18px; }
.report-reference:hover { border-color:var(--focus-border); }
:root[data-layout=studio] .report-message>.report-full { display:none; }
:root:not([data-layout=studio]) .report-message>.report-reference { display:none; }
.report-progress { display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin:0 0 14px; padding:8px 16px; border:1px solid var(--active-border); border-radius:999px; background:var(--active); color:var(--teal); font-size:14px; font-weight:600; line-height:1.4; }
.report-progress::before { content:''; flex:none; width:9px; height:9px; border-radius:50%; background:var(--teal); }
@media(prefers-reduced-motion:no-preference) { .report-progress::before { animation:lolo-working 1.1s ease-in-out infinite; } }
.report-wait { margin:0; color:var(--muted); font-size:13px; }
/* MODES: a short introduction to Classic and Studio, shown until the user picks one. */
.mode-intro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; margin-top:24px; }
.mode-intro[hidden] { display:none; }
.mode-card { display:grid; gap:4px; align-content:start; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--panel-bg); color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.mode-card strong { font-size:15px; font-weight:600; }
.mode-card span { color:var(--muted); font-size:13px; line-height:1.5; }
.mode-card small { color:var(--teal); font-size:12px; }
.mode-card:hover,.mode-card[aria-pressed=true] { border-color:var(--active-border); background:var(--active); }
@media(max-width:600px) { .mode-intro { grid-template-columns:minmax(0,1fr); gap:8px; margin-top:16px; } }
.home-toggle { display:none; }
/* RESIZABLE PANELS: thin handles on the sidebar edge and between chat and document. */
.panel-resizer { display:none; cursor:col-resize; touch-action:none; z-index:21; }
.panel-resizer::after { content:''; position:absolute; inset:0 4px; border-radius:3px; background:transparent; }
.panel-resizer:hover::after,.panel-resizer:focus-visible::after,body.panel-resizing .panel-resizer::after { background:var(--active-border); }
.panel-resizer:focus-visible { outline:none; }
body.panel-resizing { cursor:col-resize; user-select:none; -webkit-user-select:none; }
body.panel-resizing :is(canvas,textarea,.resume-pages) { pointer-events:none; }
@media(min-width:901px) {
  html:root .sidebar { width:var(--sidebar-width,224px); }
  html:root body:not(.sidebar-collapsed) .page { margin-left:var(--sidebar-width,224px); }
  body:not(.sidebar-collapsed) .sidebar-resizer { display:block; position:fixed; top:0; bottom:0; left:calc(var(--sidebar-width,224px) - 5px); width:10px; }
}
@media(prefers-reduced-motion:no-preference) { .panel-resizer::after { transition:background-color .15s; } }
/* Hide/Show document: only beside an open conversation on wide screens (compact screens keep the
   Chat/Document switch). With the document hidden, the chat takes the room like a chat without one. */
.document-toggle { display:none; }
@media(min-width:1120px) {
  html:root .page.has-document-workspace:has(>.chat-thread:not([hidden])) .document-toggle:not([hidden]) { display:inline-flex; align-items:center; gap:6px; }
  html:root .page[data-document-closed=true] .chat-thread:not([hidden]),html:root .page[data-document-closed=true]:has(.chat-thread:not([hidden]))>.composer-area { width:100%; max-width:820px; margin-inline:auto; }
}
/* LOLO is working: the existing status line becomes a clear, larger pill while a reply is
   requested and written. Theme colours only; the dot is still under reduced motion. */
html:root .status.is-working { display:flex; align-items:center; justify-content:center; gap:10px; width:fit-content; max-width:100%; margin:0 auto 12px; padding:8px 16px; border:1px solid var(--active-border); border-radius:999px; background:var(--active); color:var(--teal); font-size:15px; font-weight:600; line-height:1.4; }
html:root .status.is-working:empty { display:none; }
html:root .status.is-working::before { content:'';flex:none; width:9px; height:9px; border-radius:50%; background:var(--teal); }
@media(prefers-reduced-motion:no-preference) { html:root .status.is-working::before { animation:lolo-working 1.1s ease-in-out infinite; } }
@keyframes lolo-working { 0%,100% { opacity:.35; transform:scale(.75); } 50% { opacity:1; transform:scale(1.15); } }
/* Formatted replies: tables stay readable and scroll sideways on narrow screens; quotes, code, links. */
.formatted-response .table-scroll { max-width:100%; overflow-x:auto; margin:12px 0; border:1px solid var(--border); border-radius:10px; }
.formatted-response table { width:100%; border-collapse:collapse; font-size:.93em; line-height:1.5; }
.formatted-response th,.formatted-response td { min-width:96px; padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:break-word; word-break:normal; }
.formatted-response th { background:var(--hover); font-weight:600; }
.formatted-response tbody tr:last-child td { border-bottom:0; }
.formatted-response code { padding:1px 5px; border-radius:5px; background:var(--hover); font-size:.92em; }
.formatted-response pre { margin:12px 0; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--hover); overflow-x:auto; white-space:pre; }
.formatted-response pre code { padding:0; background:none; }
.formatted-response blockquote { margin:12px 0; padding:2px 14px; border-left:3px solid var(--active-border); color:var(--secondary-text); }
.formatted-response a { color:var(--teal); text-decoration:underline; }
.library-switch { margin:0 0 20px; }
.library-switch[hidden],.task-saved-list[hidden] { display:none; }
.task-saved-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.task-saved-choice { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:root .composer { width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--focus-border); border-radius:18px; padding:14px 16px 10px; background:var(--surface); box-shadow:0 3px 18px #0001; }
html:root .composer:focus-within { border-color:var(--teal); outline:2px solid var(--active-border); outline-offset:2px; }
html:root #prompt { display:block; width:100%; min-height:44px; padding:4px 0; font-size:15px; line-height:1.5; border:0; outline:none; background:transparent; color:var(--text); }
html:root .composer-tools { margin-top:8px; gap:12px; }
html:root[data-layout=studio] .composer { display:block; }
html:root[data-layout=studio] .composer>.composer-tools { display:flex; width:100%; margin-top:8px; }
html:root[data-layout=studio] .composer .upload { width:auto; height:auto; padding:8px 10px; border-color:var(--border); }
html:root[data-layout=studio] .composer .upload span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
.studio-entry { min-height:44px; }
html:root .upload { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; min-height:40px; border:1px solid var(--border); border-radius:10px; }
#chat-attachment:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding:8px 10px; border:1px solid var(--active-border); border-radius:10px; background:var(--active); color:var(--text); font-size:12px; }
#chat-attachment-name { min-width:0; overflow-wrap:anywhere; }
#remove-chat-attachment { flex:none; min-height:32px; border:0; border-radius:6px; padding:4px 8px; background:var(--surface); color:var(--text); }
html:root .header-actions { flex-wrap:wrap; gap:10px; justify-content:flex-end; }
html:root .header-actions .prototype-label { display:none; }
html:root .document-dock>.draft-panel,html:root .focus-layer>.draft-panel { display:flex!important; flex-direction:column; align-items:stretch; width:100%; height:100%; min-height:0; padding:0; overflow:hidden!important; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
html:root .document-dock .draft-toolbar,html:root .focus-layer .draft-toolbar { display:flex; flex:none; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
html:root .draft-toolbar h3 { white-space:normal; overflow-wrap:anywhere; flex:1 1 160px; margin:0; font-size:14px; }
.draft-controls { display:flex; flex-wrap:wrap; gap:6px; }
.draft-controls .account-button { min-height:36px; padding:6px 10px; font-size:12px; }
html:root .document-dock .draft-panel>div:not(.draft-toolbar):not(.paper-editor),html:root .focus-layer .draft-panel>div:not(.draft-toolbar):not(.paper-editor) { display:flex!important; flex:1 1 0; min-height:0; flex-direction:column; overflow:hidden; }
html:root .document-dock .draft-panel>div[hidden]:not(.draft-toolbar):not(.paper-editor),html:root .focus-layer .draft-panel>div[hidden]:not(.draft-toolbar):not(.paper-editor) { display:none!important; }
html:root .document-dock .resume-document,html:root .focus-layer .resume-document { display:flex!important; flex:1 1 0; flex-direction:column; align-items:stretch; min-height:0; padding:10px 12px; gap:6px; }
html:root .document-dock .resume-style,html:root .focus-layer .resume-style { display:flex; flex:none; align-items:center; gap:10px; margin:0; font-size:12px; }
html:root .document-dock .document-view-tools,html:root .focus-layer .document-view-tools { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-start; padding:0; gap:6px; }
html:root .document-view-tools .document-close { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; min-height:44px; padding:0; border-radius:10px; font-size:24px; line-height:1; }
html:root .document-dock .resume-state,html:root .focus-layer .resume-state { flex:none; margin:2px 0; font-size:12px; }
html:root .document-dock .resume-pages,html:root .focus-layer .resume-pages { flex:1 1 0; align-self:stretch; min-height:0; height:auto; max-height:none; overflow:auto; overscroll-behavior:contain; padding:12px; border-radius:8px; background:#d8dddf; }
html:root .document-dock .resume-exports,html:root .focus-layer .resume-exports { display:grid; flex:none; position:static; grid-template-columns:1.3fr 1fr 1fr; gap:6px; margin:0; padding:6px 0 0; background:var(--surface); }
html:root .resume-exports .resume-google { grid-column:auto; }
html:root .document-dock .resume-export-note { flex:none; margin:0; font-size:10px; line-height:1.4; }
html:root .document-status { flex:none; margin:0; padding:8px 14px; font-size:12px; color:var(--secondary-text); }
.document-status:empty { display:none; }
/* Long history belongs to the sidebar's scroll area, never underneath account controls. */
html:root .sidebar>* { flex-shrink:0; }
html:root .sidebar-top { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:4px; padding-inline:0; }
html:root .sidebar-top>.brand-logo { grid-column:2; grid-row:1; justify-self:center; max-width:100%; }
html:root .sidebar-top>.menu-button { grid-column:3; grid-row:1; justify-self:end; }
html:root .document-dock .paper-editor,html:root .focus-layer .paper-editor { flex:1 1 0; min-height:0; margin:0; padding:24px 18px; border:0; border-radius:0; overflow:auto; background:var(--background); }
html:root .draft-panel .draft-content { flex:1; min-height:0; padding:18px; overflow:auto; }
.paper-sheet { box-sizing:border-box; }
.paper-block:focus-within { outline:2px solid #1b7f68; outline-offset:2px; }
:root[data-theme=dark] .paper-sheet { background:#141918; color:#eff6f2; box-shadow:0 5px 24px #0006; }
:root[data-theme=dark] .paper-heading,:root[data-theme=dark] .paper-body { color:#eff6f2; }
:root[data-theme=dark] .paper-heading { border-bottom-color:#657970; }
:root[data-theme=dark] .paper-block:hover { border-color:#50655b; }
:root[data-theme=dark] .paper-block:focus-within { background:#1d3028; outline-color:#52d6c6; }
.paper-body::selection,.paper-heading::selection { background:#256c59; color:#fff; }
/* Document paper is print-accurate in every application theme. Editing consumes the PDF's
   measured page positions and bundled font; theme colors remain on the surrounding workspace. */
html:root .document-layout-editor { display:flex; flex-direction:column; gap:20px; width:100%; }
html:root .document-dock .paper-editor:has(.document-layout-editor),html:root .focus-layer .paper-editor:has(.document-layout-editor) { padding:12px; background:#d8dddf; }
html:root .document-layout-editor .layout-sheet { position:relative; width:min(100%,816px); height:1056px; min-height:0; margin:0 auto; padding:0; overflow:hidden; background:#fff; color:#111; border:0; border-radius:0; box-shadow:0 3px 16px #0002; }
html:root .layout-page { position:absolute; inset:0 auto auto 0; width:816px; height:1056px; transform-origin:top left; background:#fff; color:#111; font-family:LoloDocument,Roboto,sans-serif; }
html:root .layout-block { position:absolute; display:flex; flex-direction:column; color:#111; }
html:root .layout-row { display:flex; flex-direction:column; flex:none; min-width:0; }
html:root .layout-row.layout-columns { flex-direction:row; align-items:baseline; }
html:root .layout-bullet { position:relative; margin-left:11pt!important; }
html:root .layout-bullet::before { content:'•'; position:absolute; left:-11pt; top:0; }
html:root .layout-page .layout-field.paper-body { display:block; box-sizing:border-box; width:auto; min-width:0; min-height:1em; height:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:inherit; text-align:inherit; white-space:pre-wrap; overflow-wrap:break-word; resize:none; box-shadow:none; outline:none; }
html:root .layout-field:focus-visible { outline:1px dashed var(--teal); outline-offset:3px; }
html:root .layout-field strong { font-weight:700; }
html:root .layout-block.section-updated { border:0; background:transparent; box-shadow:none; outline:1px dashed var(--teal); outline-offset:4px; }
.section-updated { border-left:3px solid #25836d; background:#ecf8f2; }
:root[data-theme=dark] .section-updated { background:#1d3028; }
html:root .section-updated { box-shadow:inset 3px 0 #25836d; }
html:root .document-dock .studio-tabpanel { flex:1; min-height:0; }
/* Text-only documents (cover letters, section proposals) are ordinary flowing text that scrolls. */
html:root .document-dock .draft-panel>div.draft-content:not([hidden]),html:root .focus-layer .draft-panel>div.draft-content:not([hidden]) { display:block!important; overflow:auto; }
@media(min-width:1120px) {
  /* About 40% conversation, 60% document by default; the user can drag the divider (35–72%). */
  html:root .page.has-document-workspace:not([data-document-closed=true]):has(>.chat-thread:not([hidden]))>.document-resizer { display:block; position:relative; grid-column:2; grid-row:2/4; justify-self:start; width:12px; margin-left:-16px; }
  html:root .page:has(.chat-thread:not([hidden])) { grid-template-columns:minmax(340px,1fr) minmax(0,var(--document-width,60%)); grid-template-rows:auto minmax(0,1fr) auto; gap:0 20px; padding:0 24px 16px; }
  html:root .page .chat-thread:not([hidden]) { grid-column:1; grid-row:2; width:100%; max-width:none; min-width:0; margin:0; padding:16px 4px; }
  html:root .page:has(.chat-thread:not([hidden]))>.composer-area { grid-column:1; grid-row:3; position:static; width:100%; max-width:none; min-width:0; box-sizing:border-box; margin:0; padding:10px 4px 0; }
  html:root .page.has-document-workspace:has(.chat-thread:not([hidden]))>.document-dock { display:flex; flex-direction:column; grid-column:2; grid-row:2/4; min-height:0; overflow:hidden; }
  html:root .page:not(.has-document-workspace):has(.chat-thread:not([hidden])),html:root .page[data-document-closed=true]:has(.chat-thread:not([hidden])) { grid-template-columns:minmax(0,1fr); }
  html:root .page:not(.has-document-workspace) .chat-thread { max-width:820px; margin-inline:auto; }
  html:root .page:is(:not(.has-document-workspace),[data-document-closed=true]):has(.chat-thread:not([hidden]))>.composer-area { max-width:820px; margin-inline:auto; }
  /* Studio home is one clean column; the latest-document preview appears only when asked for. */
  html:root[data-layout=studio] .page:not(.home-document-open):has(#chat-view:not([hidden])) { grid-template-columns:minmax(0,1fr); }
  html:root[data-layout=studio] .page:not(.home-document-open):has(#chat-view:not([hidden]))>.home-dock { display:none; }
  html:root[data-layout=studio] .page:not(.home-document-open)>#chat-view:not([hidden]) { padding-inline:max(44px,calc((100% - 980px) / 2)); }
  html:root[data-layout=studio] .page:has(>#chat-view:not([hidden])) .home-toggle:not([hidden]) { display:inline-flex; align-items:center; }
  /* Studio remains accessible on the dashboard as well as in an active chat. */
  html:root[data-layout=studio] .page:has(#chat-view:not([hidden])) { grid-template-rows:auto minmax(0,1fr) auto; }
  html:root[data-layout=studio] .page:has(#chat-view:not([hidden]))>.header { display:grid; grid-column:1/-1; grid-row:1; padding:10px 24px; }
  html:root[data-layout=studio] .page>#chat-view:not([hidden]) { grid-row:2; }
  html:root[data-layout=studio] .page:has(#chat-view:not([hidden]))>.composer-area { grid-row:3; }
  html:root[data-layout=studio] .page:has(#chat-view:not([hidden]))>.home-dock { grid-row:2/4; }
}
@media(max-width:1119.98px) {
  html:root .page.has-document-workspace:has(.chat-thread:not([hidden]))>.document-dock { display:flex; flex-direction:column; overflow:hidden; }
  html:root .document-dock>.draft-panel { min-height:0; height:100%; }
  html:root .workspace-switch button,html:root .draft-controls button,html:root .document-view-tools button { min-height:44px; }
  .credit-badge { font-size:12px; }
  .header-actions .account-button { padding:7px 10px; }
}
/* Preview pages grow to their full height. Scroll the surrounding workspace, not a box
   inside the resume; editing retains its own bounded editor. Zoom overflow scrolls here too. */
html:root .page>.document-dock:has(>.draft-panel:not([data-document-mode=edit]) .resume-document),
html:root .focus-layer:has(>.draft-panel:not([data-document-mode=edit]) .resume-document) { overflow:auto; overscroll-behavior:contain; align-items:flex-start; }
/* Keep the sticky tab surface as wide as the pane while document pages scroll beneath it. */
html:root .page>.document-dock:has(>.draft-panel:not([data-document-mode=edit]) .resume-document) { align-items:stretch; }
html:root .document-dock>.studio-tabs { width:100%; min-width:0; left:0; }
html:root :is(.document-dock,.focus-layer)>.draft-panel:not([data-document-mode=edit]):has(.resume-document) { flex:none; height:auto; min-height:0; overflow:visible!important; }
html:root :is(.document-dock,.focus-layer) .draft-panel:not([data-document-mode=edit])>div:has(>.resume-document):not([hidden]) { flex:none; overflow:visible; }
html:root :is(.document-dock,.focus-layer) .draft-panel:not([data-document-mode=edit]) .resume-document { flex:none; }
html:root :is(.document-dock,.focus-layer) .draft-panel:not([data-document-mode=edit]) .resume-pages { flex:none; height:auto; max-height:none; overflow:visible; }
@media(max-width:600px) {
  html:root .header { grid-template-columns:auto 1fr; }
  html:root .header>.brand-logo { display:none; }
  html:root .header-actions { gap:6px; }
  .credit-badge { margin-left:auto; font-size:12px; min-height:32px; padding:4px 11px; }
  html:root .document-dock .resume-exports { grid-template-columns:1fr; }
  html:root .document-dock .resume-export-note { display:none; }
  html:root .document-dock .paper-editor { padding:12px; }
  html:root .composer { padding:12px; }
}
@media(prefers-reduced-motion:no-preference) {
  .composer,.document-reference,.studio-entry { transition:border-color .16s,background-color .16s; }
  .section-updated { animation:section-arrived .65s ease-out; }
  @keyframes section-arrived { from { outline:2px solid #25836d; outline-offset:4px; } to { outline-color:transparent; outline-offset:0; } }
}
:is(.document-reference,.studio-entry,#remove-chat-attachment):focus-visible { outline:2px solid var(--teal); outline-offset:3px; }