/* Word files in chat (Oct 21 2026) — the file card, the Word file button and the on-page viewer (static/docxview.js). */

/* ---- the card: name · size · View · Download (on your own .docx and on the studio's made ones) ---- */
.file-card { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 6px 8px;
  border-radius: var(--radius-small); background: #0003; color: inherit; font-size: 13px; flex-wrap: wrap; }
.file-card .fc-ic { font-size: 18px; flex: none; }
.file-card .fc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.file-card .fc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-card .fc-sub { opacity: .8; font-size: 12px; }
.file-card .fc-acts { display: inline-flex; gap: 6px; flex: none; }
.file-card .btn { text-decoration: none; }
.msg-foot .file-card { margin-left: 6px; }
.docx-make { margin-left: 6px; }

/* ---- the viewer: one big sheet over the page ----
   Oct 21 polish (Mit: "more aesthetic and better aligned, without redesigning"): the same controls, laid out on one baseline —
   file · name · pages·size on the left, a joined − % + group, Fit width and Download on the right, ✕ pinned to the corner; a deeper
   desk so white pages stand out, layered page shadows, Word-true line spacing (static/docxview.js wordLines), no auto-hyphens. */
html.dxv-open, html.dxv-open body { overflow: hidden; }
.dxv-ov, .dialog.dxv { --dxv-desk: #E6E8EC; --dxv-bar-h: 56px; --dxv-gap: 24px;
  --dxv-page-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .12); }
[data-theme="dark"] .dxv-ov, [data-theme="dark"] .dialog.dxv { --dxv-desk: #0E0F12;
  --dxv-page-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .55); }
.overlay.dxv-ov { padding: 3vh 3vw; z-index: 80; animation: dxv-fade .14s ease-out; }   /* Oct 21 live: above the "newer version" banner (z 70), which hid the viewer's ✕ and Download */
.dialog.dxv { width: min(94vw, 1040px); max-width: none; height: 94vh; height: 94dvh; max-height: none; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); animation: dxv-rise .16s ease-out; }
@keyframes dxv-fade { from { opacity: 0; } }
@keyframes dxv-rise { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* the bar: one row — who it is on the left, what you can do on the right, ✕ in the corner */
.dxv-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: var(--dxv-bar-h);
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); transition: box-shadow .15s ease; }
.dialog.dxv.dxv-scrolled .dxv-bar { box-shadow: 0 4px 14px rgba(16, 24, 40, .10); }
.dxv-id { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.dxv-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-small);
  background: var(--surface-subtle); font-size: 18px; line-height: 1; }
.dxv-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dxv-bar .dxv-name { margin: 0; font-size: 14px; line-height: 1.25; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxv-pages { font-size: 12px; line-height: 1.2; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dxv-pages:empty { display: none; }
.dxv-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.dxv-bar .btn { text-decoration: none; }
/* − 115% + as one control: shared border, one height with the buttons beside it */
.dxv-zoom { display: inline-flex; align-items: stretch; height: 32px; flex: none; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--surface); }
.dxv-zb { width: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.dxv-zb:hover { background: var(--surface-subtle); }
.dxv-zb:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: -2px; }
.dxv-pct { display: grid; place-items: center; min-width: 52px; padding: 0 4px; font-size: 13px; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
/* ✕: a quiet square in the corner, the same 32 px as the rest of the row */
.dxv-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; padding: 0; border: 0;
  border-radius: 8px; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: .8; }
.dxv-x:hover { background: var(--surface-subtle); opacity: 1; }
.dxv-x:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 0; opacity: 1; }

/* the desk the pages lie on */
.dxv-box { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--dxv-desk); scrollbar-gutter: stable; scrollbar-width: thin; scroll-behavior: auto; }
.dxv-box:focus { outline: none; }
.dxv-box:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-cyan); }
.dxv-state { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.dxv-state p { margin: 0; max-width: 46ch; }
.dxv-skel { width: min(100%, 640px); aspect-ratio: 8.5 / 5; padding: 40px 44px; border-radius: 2px; background: #fff;
  box-shadow: var(--dxv-page-shadow); display: flex; flex-direction: column; gap: 14px; }
.dxv-skel i { display: block; height: 11px; border-radius: 8px; background: #E4E6EA; animation: dxv-pulse 1.2s ease-in-out infinite; }
.dxv-skel i:nth-child(1) { width: 46%; height: 14px; } .dxv-skel i:nth-child(2) { width: 82%; } .dxv-skel i:nth-child(3) { width: 64%; } .dxv-skel i:nth-child(4) { width: 90%; }
@keyframes dxv-pulse { 50% { opacity: .45; } }

/* docx-preview's pages on our desk: white pages, soft layered shadows, even gaps, no grey frame of its own */
.dxv-doc .docx-wrapper { background: transparent !important; padding: var(--dxv-gap) !important; display: flex; flex-flow: column; align-items: center; }
.dxv-doc .docx-wrapper > section.docx { margin: 0 0 var(--dxv-gap) !important; border-radius: 2px; box-shadow: var(--dxv-page-shadow); color: #000;
  content-visibility: auto; contain-intrinsic-size: auto 1056px; }           /* long briefs: pages off screen are not drawn until scrolled to */
.dxv-doc .docx-wrapper > section.docx:last-child { margin-bottom: 0 !important; }
/* Oct 21 live: docx-preview gives every run the theme's default font (`.docx span { font-family: var(--docx-minorHAnsi-font) }`, Cambria),
   so a house brief whose Normal style says Arial showed serif. Word lets the paragraph style win: runs inherit it here too. A run's own
   font (inline style, or a character style rule docx-preview writes later in the page) still wins. */
.dxv-doc .docx span { font-family: inherit; }
.dxv-doc section.docx { font-family: Arial, "TeX Gyre Heros", Helvetica, sans-serif; overflow-wrap: break-word; hyphens: manual;
  -webkit-hyphens: manual; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }   /* Word does not split words with hyphens unless told to */
.dxv-doc section.docx img { max-width: 100%; height: auto; }

/* tablets and small laptops: the tools wrap under the name before anything squeezes */
@media (max-width: 860px) {
  .dxv-bar { flex-wrap: wrap; row-gap: 8px; }
  .dxv-id { flex-basis: calc(100% - 46px); order: 0; }
  .dxv-x { order: 1; }
  .dxv-tools { order: 2; flex: 1 1 100%; justify-content: flex-end; }
}

/* phones: the sheet fills the screen and the pages wrap to its width (no sideways scroll) */
@media (max-width: 700px) {
  .overlay.dxv-ov { padding: 0; }
  .dialog.dxv { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; animation: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .dxv-ov, .dialog.dxv { --dxv-gap: 10px; }
  .dxv-bar { padding: 8px 8px 8px 12px; gap: 8px; }
  .dxv-ic { width: 30px; height: 30px; font-size: 16px; }
  .dxv-tools { justify-content: space-between; }
  .dxv-box { overflow-x: hidden; scrollbar-gutter: auto; }
  .dxv-doc .docx-wrapper { align-items: stretch; }
  .dxv-doc .docx-wrapper > section.docx { width: auto !important; min-width: 0 !important; min-height: 0 !important;
    padding: 22px 18px !important; contain-intrinsic-size: auto 900px; }
  .dxv-doc section.docx table { max-width: 100%; }
}