.work-attachment{display:grid;gap:4px;width:100%;min-height:52px;padding:10px 12px;margin:6px 0;
  text-align:left;font:inherit;font-size:13px;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;overflow-wrap:anywhere}
.work-attachment span{font-size:12px;color:var(--text2)}
.work-attachment:disabled{opacity:.6;cursor:default}
.work-attachment:focus-visible,.work-media-viewer :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.work-media-viewer{color:var(--text);background:var(--bg);border:1px solid var(--line);
  padding:0;border-radius:16px;max-width:calc(100vw - 24px);width:760px;max-height:calc(100dvh - 24px);box-shadow:var(--shadow)}
.work-media-viewer::backdrop{background:#14141488;backdrop-filter:blur(4px)}
.work-media-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;
  position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line)}
.work-media-viewer h2{font-size:16px;min-width:0;overflow-wrap:anywhere;margin:0}
.work-media-viewer header .btn{flex:none}
.work-media-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}
.work-media-content img,.work-media-content video{max-width:100%;max-height:calc(100dvh - 200px);object-fit:contain;border-radius:8px}
.work-media-content audio{width:100%}
.work-media-content a{display:inline-flex;align-items:center;justify-content:center}
.work-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;
  width:min(420px,100%);overflow:hidden;border-radius:8px;margin-bottom:8px}
.work-photo-grid[data-count="1"]{grid-template-columns:1fr}
.work-photo-grid:is([data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],[data-count="10"]){grid-template-columns:repeat(3,minmax(0,1fr))}
.work-photo{position:relative;min-width:0;width:100%;aspect-ratio:4/3;padding:0!important;
  border:0;border-radius:0;background:var(--hover);color:var(--text2);overflow:hidden;cursor:pointer}
.work-photo-grid[data-count="1"] .work-photo{aspect-ratio:4/3}
.work-photo>span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}
.work-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.work-photo img.work-photo-loaded{opacity:1}
.work-photo:focus-visible{outline:2px solid var(--text);outline-offset:-3px;z-index:1}
.work-message:has(.work-photo-grid){width:420px;min-width:0;box-sizing:border-box}
.work-photo-grid[data-count="3"] .work-photo:first-child,
.work-photo-grid[data-count="5"] .work-photo:first-child,
.work-photo-grid[data-count="7"] .work-photo:first-child,
.work-photo-grid[data-count="10"] .work-photo:first-child{grid-column:1/-1;aspect-ratio:2.6}
.work-album-count{font:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.work-album-originals{display:flex;flex-direction:column;gap:12px;padding:16px}
.work-message-meta{flex-wrap:wrap;align-items:center}
/* ⚠️ У неотправленного подпись в ОДНУ строку (п. 182): имя, время,
   причина и кнопка. Правило стоит рядом с общим и после него —
   иначе `flex-wrap:wrap` выше перебивало его, и подпись разъезжалась
   на три строки (замерено 27.10.2026 на 1440 и 1920 px). */
.work-message-meta.work-message-meta--queued{flex-wrap:nowrap;align-items:baseline}
/* ⚠️ Каждая часть подписи неразрывна, иначе перенос случался ВНУТРИ
   них: «18:58,» оставалось в строке, а «27.10.26» уезжало вниз
   (замерено 27.10.2026 на 1440 px). */
.work-message-meta--queued>*{white-space:nowrap;flex:0 0 auto}
/* ⚠️ Пузырь неотправленного шире обычного ровно настолько, чтобы
   подпись помещалась: иначе она не влезает ни при какой вёрстке.
   Размер при этом НЕ меняется от самой отправки (п. 181) — он задан
   один раз и не зависит ни от слова в кнопке, ни от итога. */
.chat-queued{min-width:min(460px, 100%)}
.work-message-meta--queued .chat-send-error{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
/* One scrolling body: positioned photographs never pass over the controls. */
.work-media-viewer[open]{display:flex;flex-direction:column;overflow:hidden}
.work-media-viewer>header{position:relative;z-index:2;flex:none}
.work-media-viewer>:is(.work-media-content,.work-album-originals){min-height:0;overflow:auto;overscroll-behavior:contain;isolation:isolate}
.work-album-originals>.work-message{flex:none}
