/* The file viewer of Rozmowa and the pages (linked after chat.css in index.html). */

/* The file viewer (ADR 0062): a frame of a fixed size from the first frame (nothing jumps while
   the file loads), the file's badge, name and what it is in the bar with its tools and the
   download, the file drawn on a darker paper below: documents as white pages. */
dialog.attachment-preview { width: min(1120px, calc(100vw - 48px)); height: calc(100dvh - 48px); max-width: 100%; max-height: 100dvh; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px #252c1c26; overflow: hidden; }
dialog.attachment-preview[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: viewer-in .24s var(--ease); }
dialog.attachment-preview::backdrop { background: #292b2766; backdrop-filter: blur(3px); animation: q-fade-in .2s ease; }
@keyframes viewer-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.viewer-bar { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
.viewer-badge { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--olive); background: var(--sage); }
.viewer-badge--doc { background: var(--blue); color: #3e5868; }
.viewer-badge--slides { background: var(--sand); color: #8a6a3c; }
.viewer-badge--pdf { background: var(--rose); color: #8b4f3e; }
.viewer-badge--text, .viewer-badge--file { background: var(--sidebar); color: #5f6255; }
.viewer-title { flex: 1; min-width: 0; }
.viewer-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.35 var(--sans); }
.viewer-meta { color: var(--muted); font-size: 12px; line-height: 1.4; }
.viewer-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.viewer-tools:empty { display: none; }
.viewer-tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.viewer-tool-group .icon-button { width: 30px; height: 30px; }

.viewer-tool-group .viewer-zoom-fit { min-width: 48px; justify-content: center; margin: 0; padding: 4px 6px; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.viewer-counter { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-download { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; white-space: nowrap; flex-shrink: 0; transition: background .15s var(--ease); }
.viewer-download:hover { background: var(--ink-hover); color: var(--surface); }
.viewer-stage { position: relative; min-height: 0; overflow: auto; background: var(--sidebar); scrollbar-width: thin; scrollbar-color: #c9cabd transparent; overscroll-behavior: contain; scrollbar-gutter: stable; }
.viewer-stage:focus { outline: none; }
.viewer-arrive { animation: q-fade-in .22s var(--ease) both; }
.viewer-pad { padding: 20px 24px; }
.viewer-fill { height: 100%; display: flex; flex-direction: column; }
.viewer-fill .preview-3d-stage { flex: 1; height: auto; }
.viewer-center { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.viewer-note { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 32px; text-align: center; }
.viewer-note .dialog-meta { max-width: 420px; }
/* Pages: white sheets in a column, each its own size; drawn only near the view. */
.viewer-doc { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 24px 40px; min-width: min-content; }
.viewer-page { position: relative; flex-shrink: 0; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px #292b271f, 0 6px 22px #292b2712; overflow: hidden; --scale-round-x: 1px; --scale-round-y: 1px; }
.viewer-page canvas { display: block; width: 100%; height: 100%; animation: q-fade-in .18s ease both; }
.viewer-placeholder { display: flex; justify-content: center; padding: 24px; }
.viewer-sheet-skeleton { width: min(720px, 100%); aspect-ratio: 1 / 1.3; padding: 9% 10%; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px #292b271f, 0 6px 22px #292b2712; }
.viewer-sheet-skeleton .q-skeleton { --raised: #f2f1ec; }
/* Text: Markdown as a page; code, JSON, logs and plain text as numbered lines on a white sheet,
   code coloured by Prism's tokens (ADR 0062). */
.viewer-text-page { width: min(820px, 100%); padding: 56px 64px 64px; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px #292b271f, 0 6px 22px #292b2712; font-size: 15px; line-height: 1.65; }
.viewer-code { width: min(1040px, 100%); background: #fff; border-radius: 6px; box-shadow: 0 1px 2px #292b271f, 0 6px 22px #292b2712; overflow: hidden; }
.viewer-code-body { display: grid; grid-template-columns: auto minmax(0, 1fr); font: 12.5px/1.65 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.viewer-code-nums { padding: 14px 12px 14px 16px; color: #a3a597; text-align: right; white-space: pre; user-select: none; border-right: 1px solid #eceae2; background: #fbfaf6; font-variant-numeric: tabular-nums; }
.viewer-code-text { margin: 0; padding: 14px 18px; overflow-x: auto; white-space: pre; color: #2c2e29; tab-size: 4; }
.viewer-code-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.viewer-code-foot .viewer-code-more[hidden], .viewer-code-note:empty { display: none; }
.tok-comment, .tok-prolog, .tok-doctype, .tok-cdata { color: #8a8d80; font-style: italic; }
.tok-keyword, .tok-tag, .tok-important, .tok-atrule, .tok-selector { color: #8b4f3e; }
.tok-string, .tok-char, .tok-attr-value, .tok-regex, .tok-inserted { color: #4f6b2f; }
.tok-number, .tok-boolean, .tok-constant, .tok-symbol { color: #2f5d8a; }
.tok-function, .tok-class-name, .tok-builtin { color: #6a4f9a; }
.tok-property, .tok-attr-name, .tok-variable, .tok-key { color: #8a6a3c; }
.tok-punctuation, .tok-operator { color: #6d7064; }
.tok-deleted { color: var(--danger); }
.markdown-body pre .tok-comment { color: #8a8d80; }
@media (max-width: 720px) { .viewer-text-page { padding: 28px 22px 36px; } }
/* A Word document's frame: what the document's own styles do to its host stays inside it. */
/* (As wide as its pages, so a zoomed page scrolls sideways in the stage; `contain: paint` is the
   containing block of anything the document fixes, and clips it.) */
.viewer-docx-frame { position: relative; contain: paint; width: fit-content; min-width: 100%; min-height: 100%; }
/* Presentations: each slide a white box of the deck's size, its shapes placed in points and the
   whole slide scaled to the frame (ADR 0062). */
.slide-holder { position: relative; flex-shrink: 0; overflow: hidden; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px #292b271f, 0 6px 22px #292b2712; }
.slide { position: absolute; top: 0; left: 0; overflow: hidden; background: #fff; color: #000; transform-origin: 0 0; font-family: Calibri, Carlito, 'DM Sans', Arial, sans-serif; line-height: 1.2; }
.slide-layer, .slide-group-inner { position: absolute; inset: 0; transform-origin: 0 0; }
.slide-shape, .slide-pic, .slide-frame, .slide-group { box-sizing: border-box; }
.slide-pic { overflow: hidden; }
.slide-pic img { display: block; width: 100%; height: 100%; }
.slide-text { position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; overflow-wrap: break-word; }
.slide-p { margin: 0; }
.slide-bullet { display: inline-block; text-indent: 0; }
.slide-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.slide-table td { position: relative; padding: 0; border: 0.75pt solid #9a9c90; vertical-align: top; }
.slide-table td .slide-text { position: static; }
.slide-frame--other { display: grid; place-items: center; border: 1pt dashed #b9bbae; color: #77796e; font-size: 14pt; background: #f7f6f1; }
.slide-table-styled td { border: 1pt solid #fff; }
.slide-media { position: absolute; left: 6pt; bottom: 6pt; padding: 2pt 6pt; border-radius: 4pt; background: #292b27b3; color: #fff; font-size: 10pt; }
.slide-p { white-space-collapse: preserve; }
.slide-failed { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: #77796e; font-size: 14px; text-align: center; }
/* Spreadsheets: a grid in the spreadsheet's shape, only the rows in view drawn; the sheets'
   tabs and what is still being read under it (ADR 0062). */
.sheet-view { height: 100%; display: flex; flex-direction: column; background: #fff; }
.sheet-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-grid { position: relative; flex: 1; min-height: 0; overflow: auto; font-size: 12.5px; line-height: 27px; color: #2c2e29; outline: none; scrollbar-width: thin; scrollbar-color: #c9cabd transparent; }
.sheet-grid:focus-visible { box-shadow: inset 0 0 0 2px #7f896566; }
.sheet-body { position: relative; width: var(--width); }
.sheet-row { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: var(--cols); width: var(--width); height: 28px; }
.sheet-head { position: sticky; z-index: 2; background: #f5f4ef; color: var(--muted); font-size: 11.5px; }
.sheet-head .sheet-cell { text-align: center; font-weight: 500; }
.sheet-cell { min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid #ebe9e1; border-bottom: 1px solid #ebe9e1; }
.sheet-num { position: sticky; left: 0; z-index: 1; padding: 0 8px; text-align: right; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; background: #f5f4ef; border-right: 1px solid #e2e0d6; border-bottom: 1px solid #ebe9e1; }
.sheet-corner { z-index: 3; }
.sheet-row--wait .sheet-cell { background: #fbfaf7; }
.sheet-empty { padding: 24px; }
.sheet-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; background: var(--paper); border-top: 1px solid var(--line); }
.sheet-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sheet-tabs[hidden] { display: none; }
.sheet-tabs .preview-sheet-tab { white-space: nowrap; }
.sheet-status { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sheet-bar .sheet-retry { margin: 0; padding: 0; font-size: 12px; }
.sheet-bar .sheet-retry[hidden] { display: none; }
/* pdf.js's text layer (its pdf_viewer.css, the parts it needs): the text over the page, invisible
   until selected. */
.viewer-page .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; opacity: 1; letter-spacing: normal; word-spacing: normal; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 0; --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.viewer-page .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; }
.viewer-page .textLayer > :not(.markedContent), .viewer-page .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.viewer-page .textLayer .markedContent { display: contents; }
.viewer-page .textLayer ::selection { background: #7f8a6566; color: transparent; }
.viewer-page .textLayer br::selection { background: transparent; }
@media (max-width: 720px) {
  dialog.attachment-preview { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .viewer-bar { padding: 10px 10px 10px 14px; gap: 8px; flex-wrap: wrap; }
  .viewer-download span { display: none; }
  .viewer-download { width: 36px; padding: 0; justify-content: center; }
  .viewer-tools { order: 5; width: 100%; justify-content: space-between; }
  .viewer-doc { padding: 12px 8px 24px; gap: 10px; }
  .viewer-pad { padding: 14px; }
}
.preview-media { display: block; max-width: 100%; margin: auto; border: 0; }
img.preview-media, video.preview-media { max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 4px; }
/* A 3D model turned in place: the stage keeps its size while the model loads (no jump). */
.preview-3d-stage { position: relative; height: 62dvh; min-height: 280px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle at 50% 35%, var(--surface), var(--sidebar)); overflow: hidden; }
.preview-3d-stage[aria-busy="true"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: q-sweep 1.4s var(--ease) 150ms infinite both; }
.preview-3d-status { position: absolute; inset: 0; }
.preview-3d { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; animation: q-fade-in .25s var(--ease); }
.preview-3d:active { cursor: grabbing; }
.preview-3d:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
.preview-3d-hint { margin-top: 10px; }
/* The sheets' tabs under a spreadsheet's grid. */
.preview-sheet-tab { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--muted); background: transparent; transition: background .15s var(--ease), color .15s var(--ease); }
.preview-sheet-tab:hover { background: var(--sidebar); color: var(--ink); }
.preview-sheet-tab[aria-selected="true"] { background: var(--sage); color: var(--ink); font-weight: 500; }
@keyframes q-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes q-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .preview-3d-stage[aria-busy="true"]::after, .preview-3d { animation: none; } }
.dialog-meta { font-size: 13px; color: var(--muted); }
.text-button { display: inline-flex; gap: 8px; align-items: center; padding: 9px 0; margin-top: 8px; color: #6c7c50; font-size: 13.5px; }