/* A5 CRM — css/media.css: WhatsApp media in the chats (js/media.js, A5Comms.fileHtml in screens/deal.js) and the viewer.
   Calm, in the bubble's own tokens (light / dark follow them); only the viewer is always dark, as photo viewers are. */

/* ── voice / audio: ▶ · waveform; under it the length + speed, the bubble's time on the same line at the right ── */
.cm-bub.vb{position:relative;min-width:min(300px,100%);padding-bottom:6px}
.cm-bub.vb .meta{position:absolute;right:12px;bottom:6px;margin:0}
.cm-voice{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:28px 16px;align-items:center;column-gap:10px;padding:2px 0 0}
.cm-voice .vp{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;
  transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.cm-voice .vp:hover{background:var(--accent-hover)}
.cm-voice .vp:active{transform:scale(.94)}
.cm-voice .vp:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.cm-voice .vp svg{width:16px;height:16px;fill:currentColor}
.cm-voice .vp .i-pause,.cm-voice.playing .vp .i-play{display:none}
.cm-voice.playing .vp .i-pause{display:block}
.cm-voice .vw{grid-column:2;display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;border-radius:var(--radius-xs)}
.cm-voice .vw:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.cm-voice .vw i{flex:1 1 0;min-width:2px;max-width:4px;height:var(--h);border-radius:2px;background:color-mix(in srgb,var(--text-3) 42%,transparent);transition:background 120ms linear}
.cm-voice .vw i.on{background:var(--accent)}
.cm-voice .vw:hover i:not(.on){background:color-mix(in srgb,var(--text-3) 60%,transparent)}
.cm-voice .vr{grid-column:2;display:flex;align-items:center;gap:8px;min-width:0;padding-right:64px}
.cm-voice .vt{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.cm-voice.playing .vt,.cm-voice.paused .vt{color:var(--accent)}
.cm-voice .vs{height:16px;min-width:28px;padding:0 6px;border:0;border-radius:8px;background:color-mix(in srgb,var(--text-3) 14%,transparent);
  font:600 11px/16px var(--font-sans);color:var(--text-2);cursor:pointer;font-variant-numeric:tabular-nums}
.cm-voice .vs:hover{background:color-mix(in srgb,var(--text-3) 24%,transparent);color:var(--text-strong)}
.cm-voice .vl{grid-column:1/3;margin-top:6px;font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-voice + .tx{display:block;margin:8px 0 18px}

/* ── photo / video: the picture fills the bubble, the time sits on it ── */
.cm-bub.mb{position:relative;padding:3px}
.cm-bub.mb .who{padding:3px 8px 4px}
.cm-bub.mb .cm-rq{margin:3px 5px 5px}
.cm-bub.mb .tx{display:block;padding:6px 8px 0}
.cm-bub.mb.cap .meta{padding:0 8px 3px}
.cm-bub.mb:not(.cap) .meta{position:absolute;right:9px;bottom:9px;margin:0;height:18px;padding:0 7px;border-radius:9px;background:rgba(10,12,16,.52);color:#fff;pointer-events:none}
.cm-bub.mb:not(.cap) .meta .tk,.cm-bub.mb:not(.cap) .meta .cm-fl{color:#fff}
.cm-media{position:relative;display:block;width:100%;max-width:320px;padding:0;border:0;border-radius:calc(var(--radius-bubble) - 3px);overflow:hidden;
  background:var(--surface-offset);cursor:zoom-in;line-height:0}
.cm-media:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.cm-media img{display:block;width:100%;min-width:180px;max-height:380px;object-fit:cover;transition:filter var(--dur-2) var(--ease-out)}
.cm-media:hover img,.cm-media:hover video{filter:brightness(.94)}
.cm-media.vid{cursor:pointer}
.cm-media.vid video{display:block;width:100%;min-width:220px;max-height:380px;object-fit:cover;background:#000;pointer-events:none}
.cm-media .pl{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(10,12,16,.55);color:#fff;transition:transform var(--dur-1) var(--ease-out),background var(--dur-1)}
.cm-media .pl svg{width:20px;height:20px;margin-left:2px;fill:currentColor}
.cm-media:hover .pl{transform:scale(1.06);background:rgba(10,12,16,.7)}
.cm-media .du{position:absolute;left:9px;bottom:9px;height:18px;padding:0 7px;border-radius:9px;background:rgba(10,12,16,.52);color:#fff;font:var(--t-caption);line-height:18px;font-variant-numeric:tabular-nums}
.cm-media .du:empty{display:none}

/* ── sticker: no bubble, just the sticker ── */
.cm-bub.sb{padding:0;background:none;box-shadow:none}
.cm-msg.out .cm-bub.sb{background:none}
.cm-bub.sb .cm-media{max-width:150px;background:none;border-radius:0}
.cm-bub.sb .cm-media img{min-width:0;max-height:150px;object-fit:contain}
.cm-bub.sb .meta{padding:0 2px}

/* ── documents: a card by type, open · download ── */
/* the card is the bubble's content: a tinted inset, no second hairline */
.cm-bub.db{min-width:min(280px,100%);padding:4px 4px 5px}
.cm-bub.db .who{padding:2px 6px 4px}
.cm-bub.db .meta{padding:0 6px}
.cm-bub.db .tx{display:block;padding:6px 6px 0}
.cm-bub.db .cm-doc{margin:0;max-width:none;box-shadow:none;background:var(--surface-offset)}
.cm-msg.out .cm-bub.db .cm-doc{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.cm-bub.db .cm-doc.off{background:none;box-shadow:inset 0 0 0 1px var(--border-soft)}
.cm-doc{display:flex;align-items:center;gap:4px;max-width:360px;margin:2px 0 2px;padding:6px 6px 6px 8px;border-radius:var(--radius-s);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft)}
.cm-msg.in .cm-doc{background:var(--surface-offset)}
.cm-doc + .tx{display:block;margin-top:6px}
.cm-doc .dm{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:2px 4px 2px 0;border-radius:var(--radius-xs);color:inherit;text-decoration:none}
.cm-doc .dm:focus-visible,.cm-doc .dd:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}
.cm-doc .dt{display:grid;place-items:center;flex:none;width:36px;height:44px;border-radius:6px;font:700 10px/1 var(--font-sans);letter-spacing:.02em;
  background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.cm-doc.t-pdf .dt{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.cm-doc.t-doc .dt{background:var(--badge-info-bg);color:var(--badge-info-text);box-shadow:inset 0 0 0 1px var(--badge-info-border)}
.cm-doc.t-xls .dt{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.cm-doc.t-ppt .dt{background:var(--badge-warning-bg);color:var(--badge-warning-text);box-shadow:inset 0 0 0 1px var(--badge-warning-border)}
.cm-doc .dn{display:grid;gap:2px;min-width:0}
.cm-doc .dn b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:var(--t-body-medium);color:var(--text-strong);overflow-wrap:anywhere}
.cm-doc .dn small{font:var(--t-caption);color:var(--text-3)}
.cm-doc .dm:hover .dn b{text-decoration:underline;text-underline-offset:3px}
.cm-doc .dd{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--radius-s);color:var(--icon);transition:background var(--dur-1),color var(--dur-1)}
.cm-doc .dd:hover{background:var(--surface-hover);color:var(--text-strong)}
.cm-doc .dd .ic{width:16px;height:16px}
/* no file: the link expired before it was saved, or it is still being saved */
.cm-doc.off{padding:6px 10px 6px 8px;gap:10px;background:none;box-shadow:inset 0 0 0 1px var(--border-soft)}
.cm-doc.off .dn b{font-weight:500;color:var(--text-2)}
.cm-doc.wait .dt{animation:cm-pulse 1.4s ease-in-out infinite}
@keyframes cm-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cm-doc.wait .dt{animation:none}}

/* ── the viewer (always dark) ── */
.mv{position:fixed;inset:0;z-index:2000;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:56px minmax(0,1fr);
  background:rgba(8,9,12,.94);color:#fff;animation:mv-in 160ms var(--ease-out)}
@keyframes mv-in{from{opacity:0}}
.mv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 12px 0 20px}
.mv-who{font:var(--t-body-medium);color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mv-n{font:var(--t-caption);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.mv-sp{flex:1}
.mv-b{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:#fff;cursor:pointer;text-decoration:none}
.mv-b:hover{background:rgba(255,255,255,.12)}
.mv-b:focus-visible,.mv-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mv-stage{grid-column:2;display:grid;place-items:center;min-height:0;padding:4px 0 28px}
.mv-stage img,.mv-stage video{display:block;max-width:100%;max-height:calc(100vh - 96px);border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5);background:#000}
.mv-nav{align-self:center;justify-self:center;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.mv-nav:hover{background:rgba(255,255,255,.2)}
.mv-nav[hidden]{display:none}
@media (max-width:700px){.mv{grid-template-columns:48px minmax(0,1fr) 48px}.mv-nav{width:36px;height:36px}}