/* ============================================================================
   chat-photo.css · Visualizador de foto da conversa (chat/photo-viewer.js).

   Carregado em chats/show.php (a conversa, nos três modos) e nas páginas-lista
   que embutem a conversa num iframe (client/chats/index.php, também o portal
   do atendente, e chats/index.php do admin): lá o visualizador abre no
   documento PAI e cobre a tela toda, inclusive a coluna da lista. Não depende
   do chat-msg.css; só dos tokens do ui-kit (docs/DESIGN-SYSTEM.md). Regras da
   casa: sem box-shadow, sem !important, só opacity e transform animam,
   prefers-reduced-motion.
   ============================================================================ */

/* Um elemento só, filho do <body>, tela inteira: barra de 56px em cima, palco
   no meio (a foto, por transform), legenda embaixo. */
.cpv {
    position: fixed; inset: 0; z-index: var(--ui-z-modal, 1055); display: flex; flex-direction: column;
    background: rgba(10, 11, 14, .92); color: #fff; font-family: var(--ui-font, inherit);
    opacity: 0; transition: opacity calc(var(--ui-dur-2, 200ms) * .75) var(--ui-ease-in, ease-in);
}
.cpv[hidden] { display: none; }
.cpv.is-open { opacity: 1; transition-duration: var(--ui-dur-2, 200ms); transition-timing-function: var(--ui-ease-out, ease-out); }
.cpv-bar { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2, 8px); padding: 0 var(--ui-space-3, 12px); }
.cpv-count { min-width: 0; font-size: var(--ui-fs-body, .875rem); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.cpv-count[hidden] { display: none; }
.cpv-acts { display: flex; align-items: center; gap: var(--ui-space-1, 4px); margin-left: auto; }
.cpv-btn {
    display: inline-grid; place-items: center; width: var(--ui-target, 40px); height: var(--ui-target, 40px); padding: 0; margin: 0;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff;
    cursor: pointer; text-decoration: none; transition: background-color var(--ui-dur-1, 120ms) var(--ui-ease, ease);
}
.cpv-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.cpv-btn:focus-visible, .cpv-nav:focus-visible, .cpv-retry:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cpv-btn[hidden] { display: none; }
.cpv-btn:disabled { opacity: .4; cursor: default; }
.cpv-ico { width: var(--ui-ic-lg, 20px); height: var(--ui-ic-lg, 20px); }
.cpv-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.cpv-stage.is-grab { cursor: grab; }
.cpv-stage.is-grabbing { cursor: grabbing; }
.cpv-img {
    position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; width: auto; height: auto;
    transform: translate(-50%, -50%) scale(1); transform-origin: 50% 50%; will-change: transform;
    pointer-events: auto; -webkit-user-drag: none; user-select: none;
}
.cpv-img.is-anim { transition: transform var(--ui-dur-2, 200ms) var(--ui-ease-out, ease-out); }
.cpv.is-loading .cpv-img, .cpv.is-error .cpv-img { visibility: hidden; }
.cpv-wait, .cpv-err { position: absolute; inset: 0; display: grid; place-items: center; place-content: center; gap: var(--ui-space-3, 12px); text-align: center; padding: var(--ui-space-4, 16px); }
.cpv-wait[hidden], .cpv-err[hidden] { display: none; }
.cpv-spin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-right-color: #fff; animation: uiSpin .7s linear infinite; }
.cpv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpv-err .cpv-ico { width: 40px; height: 40px; color: rgba(255, 255, 255, .6); }
.cpv-err-t { margin: 0; font-size: var(--ui-fs-body-lg, .9375rem); color: rgba(255, 255, 255, .9); }
.cpv-retry {
    display: inline-flex; align-items: center; gap: var(--ui-space-2, 8px); height: var(--ui-target, 40px); padding: 0 var(--ui-space-4, 16px);
    border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--ui-r-pill, 999px); background: rgba(255, 255, 255, .1); color: #fff;
    font: inherit; font-size: var(--ui-fs-body, .875rem); font-weight: var(--ui-fw-medium, 500); cursor: pointer;
}
.cpv-retry:hover { background: rgba(255, 255, 255, .2); }
.cpv-retry .cpv-ico { width: var(--ui-ic-sm, 16px); height: var(--ui-ic-sm, 16px); }
.cpv-nav {
    position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(10, 11, 14, .6); color: #fff; cursor: pointer;
    transform: translateY(-50%); transition: background-color var(--ui-dur-1, 120ms) var(--ui-ease, ease);
}
.cpv-nav:hover { background: rgba(255, 255, 255, .18); }
.cpv-nav:disabled { opacity: .3; cursor: default; }
.cpv-nav[hidden] { display: none; }
.cpv-nav-prev { left: var(--ui-space-4, 16px); }
.cpv-nav-next { right: var(--ui-space-4, 16px); }
.cpv-nav .cpv-ico { width: var(--ui-ic-xl, 24px); height: var(--ui-ic-xl, 24px); }
.cpv-caption {
    flex: 0 0 auto; max-height: 28vh; overflow: auto; padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
    text-align: center; font-size: var(--ui-fs-body, .875rem); line-height: var(--ui-lh-body, 1.5); color: rgba(255, 255, 255, .9);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.cpv-caption[hidden] { display: none; }
@media (max-width: 640px) {
    .cpv-btn { width: var(--ui-target-touch, 44px); height: var(--ui-target-touch, 44px); }
    .cpv-acts { gap: 2px; }
    .cpv-nav { display: none; }
    .cpv-caption { padding: var(--ui-space-3, 12px); }
}

/* ── Movimento reduzido ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cpv, .cpv-img, .cpv-btn, .cpv-nav, .cpv-retry { transition: none; }
}