/* ── Side panel: the tab strip is the only header row; the document fills the rest ── */
.article-panel { position:relative; }
/* Wide view: the panel is a card beside the chat, full height; the composer stays in the chat column. */
@media(min-width:1100px) {
    .article-panel { height:auto; margin:10px 12px 12px 4px; border:1px solid var(--border); border-radius:10px; }
    /* Document mode: a gutter on the left for the resize handle; the card itself clips nothing so the handle can sit beside it. */
    .article-panel.document-active { margin-left:22px; overflow:visible; }
    .article-panel.document-active .panel-tabbar { border-radius:9px 9px 0 0; }
    .article-panel.document-active .document-panel { border-radius:0 0 9px 9px; }
    .app-main > footer { right:var(--side-panel-space, 0px); }
}
/* Tab strip on a recessed band; the selected tab shares the header's paper and joins it with curved feet like a browser tab. */
/* One surface for the whole card; the selected tab and the editing header share a slightly raised "paper" tone. */
.article-panel { --panel-paper:color-mix(in srgb, var(--text) 9%, var(--surface)); }
.article-panel.document-active { background:var(--surface); }
.panel-tabbar { display:flex; align-items:flex-end; flex-shrink:0; }
.panel-close { flex-shrink:0; width:30px; height:30px; margin:0 6px 4px 2px; }
.panel-tabs {
    display:flex; align-items:flex-end; gap:0; flex:1; min-width:0; height:40px; padding:8px 12px 0 18px; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
}
.panel-tabs::-webkit-scrollbar { display:none; }
.panel-tab {
    position:relative; display:flex; align-items:center; gap:7px; flex:0 1 180px; min-width:0; height:32px; margin:0 1px; padding:0 12px;
    font:inherit; font-size:13px; color:var(--text-secondary); background:transparent; border:0; border-radius:9px 9px 0 0; cursor:pointer;
}
.panel-tab:hover:not([aria-selected="true"]) { color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent); }
.panel-tab:not([aria-selected="true"]):not(:hover) + .panel-tab:not([aria-selected="true"]):not(:hover)::before {
    content:""; position:absolute; left:-2px; top:8px; bottom:8px; width:1px; background:var(--border-strong);
}
.panel-tab[aria-selected="true"] {
    z-index:2; color:var(--text); font-weight:500; background:var(--panel-paper);
}
/* Curved feet: a transparent quarter-circle cut out of a paper-coloured square on each side */
.panel-tab[aria-selected="true"]::before, .panel-tab[aria-selected="true"]::after {
    content:""; position:absolute; bottom:0; width:9px; height:9px; background:var(--panel-paper);
}
.panel-tab[aria-selected="true"]::before { left:-10px; -webkit-mask:radial-gradient(circle at 0 0, transparent 8px, #000 8.5px); mask:radial-gradient(circle at 0 0, transparent 8px, #000 8.5px); }
.panel-tab[aria-selected="true"]::after { right:-10px; -webkit-mask:radial-gradient(circle at 100% 0, transparent 8px, #000 8.5px); mask:radial-gradient(circle at 100% 0, transparent 8px, #000 8.5px); }
.panel-tab-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-tab-meta { flex-shrink:0; font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--text-dim); }
.panel-tab-add {
    flex-shrink:0; width:28px; height:28px; margin:0 0 2px 4px; padding:0; font:400 19px/1 inherit; color:var(--text-secondary);
    background:transparent; border:0; border-radius:8px; cursor:pointer;
}
.panel-tab-add:hover, .panel-tab-add[aria-expanded="true"] { color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
.panel-tab:focus-visible, .panel-tab-add:focus-visible { outline:2px solid var(--accent-60); outline-offset:-2px; }
/* Renaming swaps the selected tab for an input of the same footprint */
.panel-tabs .panel-title-input {
    flex:0 1 220px; min-width:90px; height:30px; margin:0 1px 2px; padding:0 9px; font:inherit; font-size:13px; font-weight:500;
    color:var(--text); background:var(--bg); border:1px solid var(--accent-50); border-radius:8px; outline:none;
}
.panel-title-input.hidden, .panel-tab[hidden] { display:none; }
.document-dirty { width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--warning); }
.document-dirty.hidden { display:none; }
.panel-actions { display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; }
/* Formats without an editing toolbar (Markdown, SVG, PDF…) get a slim bar for the same actions */
.document-bar { display:flex; align-items:center; flex-shrink:0; min-height:40px; margin:0 4px 6px; padding:3px 6px; background:var(--panel-paper); border-radius:4px 4px 12px 12px; }
.document-bar.hidden { display:none; }
.document-actions { gap:4px; }
.document-actions .document-dirty { margin-right:4px; }
/* Inside the light editing toolbars the actions take the toolbar's colours and size */
.word-toolbar .document-actions { margin-left:auto; padding-left:6px; }
.word-approve-all:not(.hidden) ~ .document-actions { margin-left:6px; }
.word-toolbar .panel-icon-btn { width:28px; height:28px; border-radius:6px; }
.word-toolbar .panel-save { height:26px; margin-right:2px; padding:0 12px; font:600 12px system-ui, sans-serif; border-radius:6px; }
.panel-icon-btn {
    display:grid; place-items:center; width:34px; height:34px; padding:0;
    color:var(--text-secondary); background:transparent; border:0; border-radius:8px; cursor:pointer;
}
.panel-icon-btn:hover, .panel-icon-btn[aria-expanded="true"] { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.panel-icon-btn[aria-pressed="true"] { color:var(--accent); background:var(--accent-12); }
.panel-icon-btn.hidden, .panel-save.hidden { display:none; }
.panel-save {
    height:30px; margin-right:4px; padding:0 14px; font:inherit; font-size:13px; font-weight:600;
    color:#10130c; background:var(--accent); border:0; border-radius:8px; cursor:pointer;
}
.panel-save:hover { filter:brightness(1.08); }
.panel-save:disabled { opacity:.6; cursor:default; }
.panel-icon-btn:focus-visible, .panel-save:focus-visible,
.panel-menu-item:focus-visible { outline:2px solid var(--accent-60); outline-offset:-2px; }

/* Popover menus */
.panel-menu {
    position:absolute; z-index:20; min-width:210px; max-width:min(320px, calc(100% - 16px)); max-height:60vh; overflow-y:auto;
    padding:5px; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.panel-menu-item {
    display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; text-align:left;
    font:inherit; font-size:13px; color:var(--text); background:transparent; border:0; border-radius:6px; cursor:pointer;
}
.panel-menu-item:hover:not(:disabled), .panel-menu-item:focus-visible { background:color-mix(in srgb, var(--text) 8%, transparent); }
.panel-menu-item:disabled { opacity:.4; cursor:default; }
.panel-menu-item[aria-checked="true"] { background:var(--accent-12); }
.panel-menu-item.danger { color:var(--danger); }
.panel-menu-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-menu-meta { flex-shrink:0; font-size:11px; color:var(--text-dim); }
.panel-menu-sep { height:1px; margin:5px 4px; background:var(--border); }

/* Document body */
.document-panel { display:flex; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.document-panel.hidden, .document-source.hidden, .document-preview.hidden, .document-banner.hidden, .document-empty-state.hidden { display:none; }
.document-status:empty { display:none; }
.document-status { padding:7px 14px; font-size:12px; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.document-banner {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:9px 14px; font-size:13px;
    background:color-mix(in srgb, var(--warning) 12%, transparent); border-bottom:1px solid var(--border);
}
.document-banner span { flex:1 1 180px; }
.document-banner button {
    padding:5px 10px; font:inherit; font-size:12px; color:var(--text); background:transparent;
    border:1px solid var(--border-strong); border-radius:7px; cursor:pointer;
}
.document-banner button:hover { background:color-mix(in srgb, var(--text) 7%, transparent); }
.document-source {
    flex:1; min-height:0; margin:0; padding:20px 22px; resize:none; border:0; outline:none;
    font:13px/1.65 ui-monospace, "SF Mono", Menlo, monospace; tab-size:2; color:var(--text); background:var(--bg);
}
.document-preview { position:relative; flex:1; min-height:0; overflow:hidden; background:transparent; }
.document-preview iframe, .document-preview canvas { background:#fff; }
.document-preview iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.document-preview .document-empty { color:#555; padding:25px; }
.document-pdf-page { display:block; width:100%; height:auto; }
.document-pdf-nav {
    position:sticky; bottom:12px; display:flex; align-items:center; gap:4px; width:max-content; margin:-52px auto 12px; padding:4px;
    color:#fff; background:rgba(20,20,22,.82); border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.25); font-size:12px;
    font-variant-numeric:tabular-nums; backdrop-filter:blur(6px);
}
.document-pdf-nav span { padding:0 6px; }
.document-pdf-nav button {
    width:28px; height:28px; font-size:18px; line-height:1; color:inherit; background:transparent; border:0; border-radius:50%; cursor:pointer;
}
.document-pdf-nav button:hover:not(:disabled) { background:rgba(255,255,255,.15); }
.document-pdf-nav button:disabled { opacity:.35; cursor:default; }

/* Empty state */
.document-empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; text-align:center; }
.document-empty-title { margin:0; font-size:15px; font-weight:500; color:var(--text); }
.document-empty-hint { margin:0 0 12px; font-size:13px; color:var(--text-secondary); }
.document-empty-actions { display:flex; gap:8px; }
.document-empty-actions button {
    padding:8px 14px; font:inherit; font-size:13px; color:var(--text); background:transparent;
    border:1px solid var(--border-strong); border-radius:8px; cursor:pointer;
}
.document-empty-actions button:first-child { color:#10130c; background:var(--accent); border-color:transparent; font-weight:600; }
.document-empty-actions button:disabled { opacity:.45; cursor:default; }

/* Chat cards and footer entry point */
.document-card {
    display:inline-flex; align-items:center; gap:8px; margin:8px 16px; max-width:calc(100% - 32px); padding:9px 12px;
    font:inherit; font-size:13px; text-align:left; overflow-wrap:anywhere; color:var(--text);
    background:var(--article-card-bg); border:1px solid var(--border); border-radius:10px; cursor:pointer;
}
.document-card::before {
    content:""; width:14px; height:16px; flex-shrink:0; border:1.5px solid var(--text-secondary); border-radius:2px 5px 2px 2px;
}
.document-card:hover { background:var(--article-card-bg-hover); border-color:var(--border-strong); }

/* Agent work card in the chat: spinner while running, then a tick; activity log of notes and tool calls */
.document-work-card { max-width:min(85%, 780px); padding:10px 14px; cursor:default; background:var(--article-card-bg); border:1px solid var(--border); border-radius:12px; }
.document-work-head { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; color:var(--text); }
.document-work-spinner { flex-shrink:0; width:14px; height:14px; border:2px solid var(--border-strong); border-top-color:var(--accent); border-radius:50%; animation:search-spin .7s linear infinite; }
.document-work-card.done .document-work-spinner { border:0; animation:none; background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.document-work-card.cancelled .document-work-spinner, .document-work-card.error .document-work-spinner { background:var(--warning); -webkit-mask:none; mask:none; border-radius:50%; width:10px; height:10px; margin:0 2px; }
.document-work-card.error .document-work-spinner { background:var(--danger); }
.document-work-file { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; color:var(--text-secondary); }
.document-work-file:not(:empty)::before { content:"· "; }
.document-work-log { margin:8px 0 0; padding:0 0 0 2px; list-style:none; font-size:12.5px; line-height:1.45; color:var(--text-secondary); }
.document-work-log li { position:relative; padding:2px 0 2px 20px; overflow-wrap:anywhere; }
.document-work-log li::before { content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.document-work-note { color:var(--text); }
.document-work-note::before { background:var(--accent) !important; }
.document-work-call.pending::before { background:transparent !important; border:1.5px solid var(--accent); animation:search-spin .7s linear infinite; border-top-color:transparent; width:6px !important; height:6px !important; }
.document-work-call.ok::before { background:#4ade80 !important; }
.document-work-call.failed { color:var(--danger); }
.document-work-call.failed::before { background:var(--danger) !important; }
.document-work-outcome { margin-left:6px; font-size:11.5px; color:var(--text-dim); }
.document-work-outcome:not(:empty)::before { content:"— "; }

/* Spreadsheet: toolbar and formula bar on top, an Excel-like paper grid, sheet tabs and stats below */
.document-preview.spreadsheet-preview { display:flex; flex-direction:column; color:#000; background:transparent; }
.word-toolbar.sheet-toolbar { position:static; flex-wrap:wrap; flex-shrink:0; row-gap:3px; margin-bottom:0; border-radius:4px 4px 0 0; }
.sheet-toolbar .word-format { display:inline-flex; align-items:center; justify-content:center; font:13px/1 system-ui, sans-serif; }
.sheet-toolbar .word-format svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.sheet-toolbar .word-format sub { font-size:8px; }
.sheet-toolbar .word-tool { flex:none; height:26px; }
.sheet-toolbar #sheet-number-format { width:112px; }
.sheet-toolbar #sheet-font-size { width:48px; }
.sheet-sep { flex:0 0 1px; height:18px; margin:0 4px; background:var(--border-strong); }
.sheet-sigma { font-size:15px !important; }
.sheet-menu .word-format { position:relative; }
.sheet-letter { font:600 13px/1 Georgia, serif; margin-top:-4px; }
.sheet-bar { position:absolute; left:5px; right:5px; bottom:3px; height:3px; border-radius:1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.sheet-palette { display:grid; grid-template-columns:repeat(6, 22px); gap:4px; padding:4px 6px 6px; }
.sheet-swatch { width:22px; height:22px; padding:0; border:1px solid rgba(0,0,0,.18); border-radius:4px; cursor:pointer; }
.sheet-swatch:hover { outline:2px solid #1a73e8; outline-offset:1px; }
.sheet-custom-color { width:calc(100% - 12px); height:24px; margin:2px 6px 4px; padding:0; border:1px solid var(--border-strong); border-radius:5px; background:var(--surface); cursor:pointer; }
.sheet-context { position:fixed; z-index:1000; min-width:210px; }
.sheet-context .word-menu-item { display:flex; justify-content:space-between; gap:18px; }
.sheet-context .word-menu-item:disabled { opacity:.45; cursor:default; }
.sheet-context kbd { font:11px system-ui, sans-serif; color:var(--text-dim); }
.sheet-menu-sep { height:1px; margin:4px 2px; background:var(--border); }
.spreadsheet-formula-bar { display:flex; align-items:center; gap:6px; padding:2px 8px 7px; margin:0 4px 6px; flex-shrink:0; background:var(--panel-paper); border-radius:0 0 12px 12px; }
.spreadsheet-formula-bar input {
    min-width:0; height:26px; padding:0 8px; font:13px system-ui, sans-serif; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:5px; outline:none;
}
.spreadsheet-formula-bar input:focus { border-color:#1a73e8; }
.spreadsheet-name-box { width:92px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.sheet-fx { font:italic 600 13px Georgia, serif; color:var(--text-dim); padding:0 2px; }
.spreadsheet-value { flex:1; font-family:ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.spreadsheet-value[readonly] { background:color-mix(in srgb, var(--text) 4%, var(--surface)); }
.spreadsheet-note { flex-shrink:0; color:#333 !important; background:#fff8e1 !important; }
.sheet-scroll { position:relative; flex:1; min-height:0; overflow:auto; outline:none; background:#fff; overscroll-behavior:contain; }
.sheet-wrap { position:relative; width:max-content; }
.sheet-grid {
    table-layout:fixed; border-collapse:separate; border-spacing:0; font:11pt Calibri, Carlito, "Segoe UI", Arial, sans-serif; color:#000;
    user-select:none; -webkit-user-select:none; cursor:cell;
}
.sheet-grid td {
    height:inherit; padding:0 3px; overflow:hidden; white-space:nowrap; text-overflow:clip; vertical-align:bottom; line-height:1.2;
    background:#fff; border-right:1px solid #e2e3e3; border-bottom:1px solid #e2e3e3;
}
.sheet-grid td.sheet-number, .sheet-grid td.sheet-bool, .sheet-grid td.sheet-error { text-align:right; }
.sheet-grid td.sheet-bool, .sheet-grid td.sheet-error { text-align:center; }
.sheet-grid td.sheet-error { color:#c00000; }
/* Text flows over empty cells to the right, clipped where the next filled cell starts */
.sheet-grid td.sheet-spill { overflow:visible; }
.sheet-spill-text { display:inline-block; overflow:hidden; vertical-align:bottom; pointer-events:none; }
.sheet-grid tr.sheet-hidden-row td, .sheet-grid tr.sheet-hidden-row th { overflow:hidden; font-size:0; border-bottom-width:0; }
.sheet-grid th {
    position:sticky; z-index:20; padding:0; overflow:hidden; font:12px system-ui, sans-serif; color:#555; text-align:center;
    background:#f8f9fa; border-right:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; cursor:default;
}
.sheet-grid thead th { top:0; height:22px; }
.sheet-grid tbody th { left:0; }
.sheet-grid .sheet-corner { left:0; z-index:22; cursor:pointer; background:#eceef0 linear-gradient(135deg, transparent 60%, #b5b8bc 60%) right 3px bottom 3px/9px 9px no-repeat; }
.sheet-grid th.frozen-head { z-index:21; }
.sheet-grid th.on { color:#174ea6; background:#d3e3fd; font-weight:600; }
.sheet-col-head { cursor:s-resize !important; }
.sheet-row-head { cursor:e-resize !important; }
.sheet-col-resize { position:absolute; top:0; right:-3px; width:7px; height:100%; z-index:2; cursor:col-resize; }
.sheet-row-resize { position:absolute; left:0; bottom:-3px; width:100%; height:7px; z-index:2; cursor:row-resize; }
.sheet-col-resize:hover, .sheet-row-resize:hover { background:#1a73e8; opacity:.5; }
.sheet-frozen.sheet-freeze-bottom { border-bottom:2px solid #9aa0a6; }
.sheet-frozen.sheet-freeze-right { border-right:2px solid #9aa0a6; }
.sheet-selection { position:absolute; z-index:7; pointer-events:none; background:rgba(26,115,232,.1); border:1px solid #1a73e8; box-sizing:border-box; }
.sheet-active { position:absolute; z-index:8; pointer-events:none; border:2px solid #1a73e8; box-sizing:border-box; }
.sheet-fill-handle { position:absolute; z-index:9; width:7px; height:7px; background:#1a73e8; border:1px solid #fff; box-sizing:border-box; cursor:crosshair; }
.sheet-fill-box { position:absolute; z-index:7; pointer-events:none; border:1px dashed #5f6368; box-sizing:border-box; }
.sheet-clip {
    position:absolute; z-index:8; pointer-events:none; box-sizing:border-box; border:2px dashed #1a73e8; animation:sheet-march 1s linear infinite;
}
@keyframes sheet-march { 50% { border-color:#9fc3f7; } }
.sheet-editor {
    position:absolute; z-index:10; box-sizing:border-box; padding:0 3px; font:11pt Calibri, Carlito, "Segoe UI", Arial, sans-serif; color:#000;
    background:#fff; border:2px solid #1a73e8; outline:none; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.sheet-selection.hidden, .sheet-fill-handle.hidden, .sheet-fill-box.hidden, .sheet-clip.hidden, .sheet-editor.hidden { display:none; }
.spreadsheet-footer { display:flex; align-items:center; gap:8px; padding:0 8px; height:32px; flex-shrink:0; margin:6px 4px 0; background:var(--panel-paper); border-radius:12px 12px 4px 4px; }
.spreadsheet-tabs { display:flex; align-items:stretch; gap:1px; flex:1; min-width:0; height:100%; overflow-x:auto; scrollbar-width:none; }
.spreadsheet-tab {
    flex-shrink:0; padding:0 14px; font:12px system-ui, sans-serif; white-space:nowrap; color:var(--text-secondary); background:transparent; border:0;
    border-bottom:3px solid transparent; cursor:pointer;
}
.spreadsheet-tab:hover:not(:disabled) { color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent); }
.spreadsheet-tab[aria-selected="true"] { color:var(--text); background:var(--surface); border-bottom-color:#1e8e3e; font-weight:600; }
.spreadsheet-tab-add { padding:0 12px; font-size:17px; color:var(--text-secondary); }
.sheet-stats { flex-shrink:0; font:12px system-ui, sans-serif; color:var(--text-secondary); white-space:pre; font-variant-numeric:tabular-nums; }

/* Resizable width (wide view, document mode) */
.article-panel.document-active { flex-shrink:0;
    width:var(--document-panel-width, clamp(380px, 45vw, 760px)); min-width:320px; max-width:none; }
.document-panel-resizer { display:none; position:absolute; top:0; bottom:0; left:-20px; width:18px; z-index:40; cursor:col-resize; touch-action:none; }
.article-panel.document-active > .document-panel-resizer { display:block; }
/* A hairline that fades out at both ends marks the handle; it firms up while hovered or dragged. */
.document-panel-resizer::after {
    content:""; position:absolute; top:0; bottom:0; left:8px; width:2px; background:color-mix(in srgb, var(--text) 22%, transparent); transition:background .15s;
    -webkit-mask:linear-gradient(transparent, #000 15%, #000 85%, transparent); mask:linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.document-panel-resizer:hover::after, .document-panel-resizer:focus-visible::after, body.document-panel-resizing .document-panel-resizer::after { background:var(--text-secondary); }
.document-panel-resizer:focus-visible { outline:none; }
/* Iframes would swallow the pointer while dragging across the preview. */
body.document-panel-resizing { cursor:col-resize; user-select:none; }
body.document-panel-resizing iframe { pointer-events:none; }
body.document-panel-resizing * { cursor:col-resize !important; }
/* Content keeps its own layers inside the preview, so nothing it draws can cover the handle. */
.document-preview { isolation:isolate; }

@media(max-width:1099px) {
    .article-panel.document-active:not(.hidden) { display:flex !important; position:fixed; inset:60px 0 0;
        width:100%; min-width:0; max-width:none; height:auto; z-index:110; background:var(--bg); }
    /* Stop above the composer rather than covering it, so chatting about the document still works. */
    .article-panel.document-active:not(.hidden) { bottom:var(--composer-clearance, 140px); padding-bottom:0; }
    .article-panel.document-active > .document-panel-resizer { display:none; }
}

/* Read-only DOCX original: banner above the preview frame */
.document-preview.with-banner { display:flex; flex-direction:column; }
.document-preview.with-banner iframe { flex:1; height:auto; min-height:0; }
.document-preview.with-banner .document-banner { color:var(--text); background:var(--surface); }

/* Word: the page floats on the card's surface; the paper-toned toolbar stays on top while scrolling */
.document-preview.word-preview { color:#000; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--text) 28%, transparent) transparent; }
.word-toolbar {
    position:sticky; top:0; z-index:3; display:flex; flex-wrap:nowrap; align-items:center; gap:2px; padding:5px 8px; margin:0 4px 6px;
    color:var(--text); background:var(--panel-paper); border-radius:4px 4px 12px 12px;
}
.word-tool {
    flex:0 1 auto; min-width:36px; height:26px; margin-right:2px; padding:0 4px; font:12px system-ui, sans-serif; color:var(--text);
    background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; outline:none; cursor:pointer; text-overflow:ellipsis;
}
.word-tool option { color:#111; background:#fff; }
.word-style { width:104px; }
.word-font { width:104px; }
.word-size { width:44px; padding:0 2px; }
.word-color {
    flex:0 0 auto; width:26px; height:26px; margin-right:2px; padding:2px; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; cursor:pointer;
}
.word-format {
    flex:0 0 auto; width:26px; height:26px; padding:0; font:13px/1 Georgia, serif; color:var(--text-secondary); background:transparent; border:0; border-radius:6px; cursor:pointer;
}
.word-format:hover:not(:disabled), .word-format[aria-pressed="true"], .word-menu-button[aria-expanded="true"] { color:var(--text); background:color-mix(in srgb, var(--text) 10%, transparent); }
.word-menu { position:relative; flex:0 0 auto; }
.word-menu-list {
    position:absolute; top:calc(100% + 4px); left:0; z-index:5; display:flex; flex-direction:column; min-width:170px; padding:4px;
    background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.word-menu-list.hidden { display:none; }
.word-menu-item {
    height:28px; padding:0 10px; font:12px system-ui, sans-serif; color:var(--text); text-align:left; white-space:nowrap; background:transparent; border:0; border-radius:5px; cursor:pointer;
}
.word-menu-item:hover:not(:disabled), .word-menu-item[aria-pressed="true"] { background:color-mix(in srgb, var(--text) 8%, transparent); }
.word-menu-item[aria-pressed="true"]::after { content:" ✓"; color:var(--text-dim); }
/* Line-drawn icons for the menu buttons: list rows, two columns, a dashed break, a picture frame */
.word-icon-list, .word-icon-columns, .word-icon-break, .word-icon-image { display:inline-block; width:14px; height:12px; vertical-align:-1px; box-sizing:border-box; }
.word-icon-list { background:linear-gradient(currentColor 0 0) 4px 1px/10px 1.5px no-repeat, linear-gradient(currentColor 0 0) 4px 5.5px/10px 1.5px no-repeat, linear-gradient(currentColor 0 0) 4px 10px/10px 1.5px no-repeat,
    radial-gradient(circle, currentColor 45%, transparent 50%) 0 0/3px 3px no-repeat, radial-gradient(circle, currentColor 45%, transparent 50%) 0 4.5px/3px 3px no-repeat, radial-gradient(circle, currentColor 45%, transparent 50%) 0 9px/3px 3px no-repeat; }
.word-icon-columns { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1.5h4M1 4.5h4M1 7.5h4M1 10.5h4M9 1.5h4M9 4.5h4M9 7.5h4M9 10.5h4'/%3E%3C/svg%3E");
    background:currentColor; -webkit-mask:var(--icon) center/14px 12px no-repeat; mask:var(--icon) center/14px 12px no-repeat; }
.word-icon-break { border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; background:repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px) 0 5px/14px 1.5px no-repeat; }
.word-icon-image { border:1.5px solid currentColor; border-radius:2px; background:radial-gradient(circle, currentColor 50%, transparent 55%) 2px 1.5px/3px 3px no-repeat, linear-gradient(135deg, transparent 50%, currentColor 50%) 3px 4px/7px 6px no-repeat; }
.word-toolbar :disabled { opacity:.45; cursor:default; }
.word-approve-all {
    flex-shrink:0; white-space:nowrap; margin-left:auto; height:28px; padding:0 12px; font:600 12px system-ui, sans-serif; color:var(--text); cursor:pointer; border:2px solid transparent; border-radius:999px;
    background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--word-rainbow) border-box;
}
.word-approve-all.hidden { display:none; }
.word-preview { --word-rainbow:linear-gradient(90deg,#ff5f6d,#ffb347,#f9e04b,#4ade80,#38bdf8,#818cf8,#e879f9); }
.word-page {
    position:relative; box-sizing:border-box; margin:6px auto 40px; background:#fff; color:#000; min-height:400px;
    box-shadow:0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12); border-radius:4px;
}
/* Page stack: the sheet's background repeats page/gap; pushed blocks carry their own top padding (see paginate) */
.word-page[data-pages] { background-color:transparent; box-shadow:none; border-radius:0; }
.word-body { outline:none; min-height:200px; overflow-wrap:anywhere; }
.word-body p { margin:0; white-space:pre-wrap; }
.word-body p.word-list { position:relative; padding-left:calc(var(--list-level, 0) * 18pt + 18pt) !important; }
.word-body p.word-list::before { content:attr(data-list); position:absolute; left:calc(var(--list-level, 0) * 18pt); text-indent:0; }
/* Sections flow into columns; a break is a dashed rule with its kind written underneath */
.word-section { column-gap:35pt; }
.word-body p[data-section] { position:relative; margin-bottom:18px; border-bottom:1px dashed #9a9aa6; }
.word-body p[data-section]:not(.word-list)::before {
    content:attr(data-section-label); position:absolute; left:0; bottom:-15px; font:10px/14px system-ui, sans-serif; color:#8a8a96; text-indent:0;
}
.word-body p.word-break {
    position:relative; height:16px; margin:8px 0; padding:0 !important; font:10px/14px system-ui, sans-serif; color:#8a8a96; text-align:center; border-top:1px dashed #9a9aa6;
}
.word-body p.word-break::before { content:attr(data-section-label); }
.word-obj { user-select:all; }
.word-obj-footnote { color:#2753c9; cursor:help; font-size:.7em; vertical-align:super; line-height:0; }
.word-obj-image img { max-width:100%; height:auto; vertical-align:bottom; }
.word-obj-pagebreak { display:block; margin:8px 0; font:11px system-ui, sans-serif; color:#999; text-align:center; border-top:1px dashed #ccc; }
.word-obj-mark:empty { display:inline; }
.word-table { margin:6pt 0; }
.word-table-scroll { overflow-x:auto; }
.word-table table { width:100%; border-collapse:collapse; font-size:.92em; }
.word-table.word-column-edge td, .word-table.word-column-edge th, body.word-column-resizing, body.word-column-resizing * { cursor:col-resize; }
body.word-column-resizing { user-select:none; }
.word-table td, .word-table th { padding:3pt 5pt; color:#000; background:#fff; border:1px solid #888; vertical-align:top; white-space:pre-wrap; }
.word-object { margin:6pt 0; padding:8px 10px; font:12px system-ui, sans-serif; color:#666; background:#f5f5f7; border-radius:6px; }

/* The agent's latest work: grey fill with a rounded rainbow frame until approved */
.word-body { isolation:isolate; }
.word-body .word-pending { position:relative; }
.word-body .word-pending::after {
    content:""; position:absolute; inset:0 -12px; top:var(--page-shift, 0px); z-index:-1; pointer-events:none; border:solid transparent; border-width:0 2px;
    background:linear-gradient(#f0f0f2,#f0f0f2) padding-box, var(--word-rainbow) border-box;
}
.word-body .word-pending.first::after { border-top-width:2px; border-top-left-radius:12px; border-top-right-radius:12px; top:calc(var(--page-shift, 0px) - 4px); }
.word-body .word-pending.last::after { border-bottom-width:2px; border-bottom-left-radius:12px; border-bottom-right-radius:12px; bottom:-4px; }
/* Tables paint their own cell backgrounds, so the frame goes on top of them (border only) with room around the grid */
.word-body .word-table.word-pending, .word-body .word-object.word-pending { padding:6px 0; margin:12px 0; }
.word-body .word-table.word-pending::after { z-index:1; inset:-2px -12px; top:calc(var(--page-shift, 0px) - 2px); background:var(--word-rainbow) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.word-body .word-table.word-pending::before { content:""; position:absolute; inset:-2px -12px; top:calc(var(--page-shift, 0px) - 2px); z-index:-1; background:#f0f0f2; border-radius:inherit; }
.word-body .word-table.word-pending.first::after, .word-body .word-table.word-pending.first::before { border-top-left-radius:12px; border-top-right-radius:12px; top:calc(var(--page-shift, 0px) - 4px); }
.word-body .word-table.word-pending.last::after, .word-body .word-table.word-pending.last::before { border-bottom-left-radius:12px; border-bottom-right-radius:12px; bottom:-4px; }
.word-approvals { position:absolute; inset:0; pointer-events:none; }
.word-approve {
    position:absolute; transform:translate(4px, -60%); pointer-events:auto; height:24px; padding:0 10px;
    font:600 11.5px system-ui, sans-serif; color:#fff; background:#141416; border:0; border-radius:999px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.word-approve:hover:not(:disabled) { background:#000; }
.word-approve:disabled { opacity:.5; cursor:default; }

/* Ask about a selection: a rounded square above the selection's top-right corner opens a pill-shaped prompt */
.word-ask { position:absolute; z-index:6; display:flex; justify-content:flex-end; pointer-events:none; }
.word-ask.hidden, .word-ask .hidden { display:none; }
.word-ask-button {
    pointer-events:auto; display:grid; place-items:center; width:30px; height:30px; padding:0; color:#fff; background:#141416;
    border:1px solid rgba(124,179,66,.45); border-radius:9px; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.22);
    animation:word-ask-in .15s ease; transition:transform .15s, border-color .15s;
}
.word-ask-button:hover { transform:scale(1.06); border-color:#7cb342; }
.word-ask-button:focus-visible, .word-ask-send:focus-visible { outline:2px solid #7cb342; outline-offset:2px; }
.word-ask-form {
    pointer-events:auto; display:flex; align-items:center; gap:6px; width:100%; padding:4px; box-sizing:border-box;
    background:var(--surface, #141416); color:var(--text, #ececf1); border:1px solid var(--border, rgba(255,255,255,.08));
    border-radius:24px; box-shadow:0 4px 24px rgba(0,0,0,.2); animation:word-ask-in .18s ease;
}
.word-ask-form input {
    flex:1; min-width:0; padding:8px 4px 8px 13px; font:13px system-ui, sans-serif; color:inherit; background:transparent; border:0; outline:0;
}
.word-ask-form input::placeholder { color:var(--text-secondary, #a1a1aa); }
.word-ask-send {
    flex-shrink:0; display:grid; place-items:center; width:32px; height:32px; padding:0; color:#fff; background:#7cb342;
    border:0; border-radius:50%; cursor:pointer;
}
.word-ask-send:hover { background:#6a9c36; }
::highlight(word-ask) { background-color:rgba(124,179,66,.32); }
@keyframes word-ask-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .word-ask-button, .word-ask-form { animation:none; transition:none; } }

/* The thread's documents: a tab on the chat column's right edge that opens the panel (hidden while it is open). */
.thread-documents-btn { position:absolute; top:50%; right:12px; transform:translateY(-50%);
    z-index:30; display:grid; place-items:center; width:60px; height:60px; padding:0; border:1px solid var(--border);
    border-radius:14px; background:var(--surface, #141416); color:var(--text-secondary); cursor:pointer;
    box-shadow:0 4px 20px rgba(0,0,0,.12); transition:border-color .2s, color .2s, box-shadow .2s; }
.thread-documents-btn:hover { border-color:#7cb342; color:var(--text); box-shadow:0 6px 24px rgba(0,0,0,.16); }
.thread-documents-btn:focus-visible { outline:2px solid #7cb342; outline-offset:3px; }
.thread-documents-btn.hidden { display:none; }
.thread-documents-count { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:#7cb342; color:#fff; font-size:11px; font-weight:600; line-height:18px; text-align:center; }
.thread-documents-count:empty { display:none; }
@media (max-width:768px) { .thread-documents-btn { display:none; } }