/* ══ Galeria (/client/gallery) ════════════════════════════════════════════════
   Design system novo (docs/DESIGN-SYSTEM.md + docs/UX-CALMA.md). SÓ LAYOUT e
   as peças que o kit ainda não tem: cartão de arquivo com miniatura, área de
   soltar arquivos e o painel de envios. Tokens --ui-*; sem cor solta, sem
   sombra, sem regra forçada, sem fundo de página. Namespace gl-*. */

.gl-page { position: relative; min-width: 0; }
.gl-top { margin-bottom: var(--ui-space-4); }
.gl-top .dsh-breadcrumb { margin: 0; }
.gl-head { align-items: center; }
.gl-head .ui-page-actions .ui-btn svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gl-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── Primeiro uso ── */
.gl-hero .ui-empty-actions .ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gl-hero-hint { margin: var(--ui-space-4) auto 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.gl-hero-steps { margin-top: var(--ui-space-8); }

/* ── Números ── */
.gl-kpis { margin-bottom: var(--ui-space-5); }
/* Números: padrão único (ui-kpi + ui-tile neutro à direita do rótulo, ícone 18 px);
   o ladrilho do espaço fica âmbar só quando o espaço está quase cheio/cheio. */
.gl-kpis .ui-kpi-top { align-items: flex-start; }
.gl-kpis .ui-kpi-top > .ui-tile svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.gl-meter-wrap { margin: var(--ui-space-2) 0 0; }
.gl-meter-wrap[hidden] { display: none; }

/* ── Biblioteca ── */
.gl-bar .gl-search { flex: 1 1 200px; max-width: 260px; }
/* Grade/Lista só com ícone (com dica): filtros, busca, ordem e visualização cabem numa linha em 1366. */
.gl-bar .ui-viewswitch-txt { display: none; }
.gl-bar .ui-table-bar-end .ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gl-bulk .ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gl-lib.is-empty .gl-area, .gl-lib.is-empty .gl-foot { display: none; }
.gl-area { min-width: 0; }
.gl-area > [hidden] { display: none; }
.gl-foot:empty { display: none; }
.gl-sentinel { height: 1px; }
/* Regra do plano (quanto tempo fica guardado): nota discreta no pé. */
.gl-keep { margin: var(--ui-space-4) 0 0; }

/* Grade: miniatura quadrada + nome + "...". */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--ui-space-4); margin: 0; padding: var(--ui-space-1) var(--ui-table-pad) var(--ui-space-5); list-style: none; border-top: 1px solid var(--ui-border-subtle); padding-top: var(--ui-space-5); }
.gl-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); transition: border-color var(--ui-dur-1) var(--ui-ease), background-color var(--ui-dur-1) var(--ui-ease); }
.gl-card:hover { border-color: var(--ui-line-strong); }
.gl-card.is-selected { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), .06); }
.gl-card.is-new { animation: uiFadeIn var(--ui-dur-3) var(--ui-ease-out); }
.gl-card:has(.ui-dropdown.open) { z-index: 3; }

.gl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--ui-border-subtle); border-radius: calc(var(--ui-r-lg) - 1px) calc(var(--ui-r-lg) - 1px) 0 0; background: var(--ui-fill-1); color: var(--ui-ink-2); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.gl-thumb:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.gl-thumb > img, .gl-thumb > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-thumb-file { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2); }
.gl-thumb-ext { font-size: var(--ui-fs-help); font-weight: var(--ui-fw-semibold); letter-spacing: .04em; color: var(--ui-muted); }
.gl-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--ui-bg-card); color: var(--ui-ink); pointer-events: none; }
.gl-play svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); margin-left: 2px; }

/* Caixa de seleção: aparece no hover, no foco, com algo marcado e sempre no toque. */
.gl-pick { position: absolute; top: var(--ui-space-2); left: var(--ui-space-2); z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: var(--ui-r-md); background: var(--ui-bg-card); border: 1px solid var(--ui-border-subtle); cursor: pointer; opacity: 0; transition: opacity var(--ui-dur-1) var(--ui-ease); }
.gl-pick .ui-checkbox { margin: 0; }
.gl-card:hover .gl-pick, .gl-card:focus-within .gl-pick, .gl-card.is-selected .gl-pick, .gl-lib.is-selecting .gl-pick { opacity: 1; }
@media (hover: none) { .gl-pick { opacity: 1; width: 40px; height: 40px; } }

.gl-info { display: flex; align-items: flex-start; gap: var(--ui-space-1); min-width: 0; padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-3) var(--ui-space-3); }
.gl-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.gl-name { overflow: hidden; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink); white-space: nowrap; text-overflow: ellipsis; }
.gl-meta { overflow: hidden; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gl-menu { flex: 0 0 auto; }
.gl-menu .ui-menu { min-width: 200px; }

/* Lista: miniatura de 40 no lugar do avatar. */
.gl-table .gl-row-thumb { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden; border-radius: var(--ui-r-md); background: var(--ui-fill-2); color: var(--ui-ink-2); }
.gl-table .gl-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-table .gl-row-thumb svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.gl-table .gl-row-open { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--ui-r-sm); }
.gl-table .gl-row-open:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.gl-sub-sm { display: none; }
.gl-table .gl-row-open:hover .ui-cell-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-line-strong); }

/* ── Soltar arquivos ── */
.gl-drop { position: fixed; inset: 0; z-index: var(--ui-z-drawer); display: grid; place-items: center; padding: var(--ui-space-6); background: var(--ui-scrim); animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.gl-drop[hidden] { display: none; }
.gl-drop-box { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); width: min(440px, 100%); padding: var(--ui-space-12) var(--ui-space-6); border: 2px dashed var(--ui-accent); border-radius: var(--ui-r-2xl); background: var(--ui-bg-raised); text-align: center; pointer-events: none; }
.gl-drop-t { margin-top: var(--ui-space-2); font-size: var(--ui-fs-title); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.gl-drop-s { font-size: var(--ui-fs-label); color: var(--ui-muted); }

/* ── Envios em andamento ── */
.gl-tray { position: fixed; right: var(--ui-space-6); bottom: var(--ui-space-6); z-index: var(--ui-z-dropdown); display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 2 * var(--ui-space-4)); max-height: min(420px, 60vh); border: 1px solid var(--ui-border); border-radius: var(--ui-r-xl); background: var(--ui-bg-raised); animation: uiFadeIn var(--ui-dur-2) var(--ui-ease-out); }
.gl-tray[hidden] { display: none; }
.gl-tray-head { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-2) var(--ui-space-3) var(--ui-space-4); border-bottom: 1px solid var(--ui-border-subtle); }
.gl-tray-t { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.gl-tray-list { flex: 1 1 auto; margin: 0; padding: var(--ui-space-1) 0; overflow-y: auto; list-style: none; }
.gl-up { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: var(--ui-space-2) var(--ui-space-4); }
.gl-up .ui-tile { margin-top: 2px; }
.gl-up-body { display: flex; flex-direction: column; gap: var(--ui-space-1); flex: 1 1 auto; min-width: 0; }
.gl-up-name { overflow: hidden; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-medium); color: var(--ui-ink); white-space: nowrap; text-overflow: ellipsis; }
.gl-up-st { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.gl-up.is-error .gl-up-st { color: var(--ui-warn-ink); }
.gl-up.is-done .gl-up-st { color: var(--ui-ok-ink); }
.gl-up .ui-progress { height: 4px; }
.gl-up .ui-progress[hidden] { display: none; }
.gl-up-act { align-self: flex-start; padding-left: 0; padding-right: 0; }
.gl-up-act[hidden] { display: none; }

/* ── Ver um arquivo ── */
.gl-pv-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gl-pv-stage { display: grid; place-items: center; min-height: 200px; max-height: 62vh; overflow: hidden; border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.gl-pv-stage img, .gl-pv-stage video { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.gl-pv-stage audio { width: min(440px, calc(100% - 2 * var(--ui-space-6))); margin: var(--ui-space-8) 0; }
.gl-pv-file { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-8) var(--ui-space-4); text-align: center; color: var(--ui-ink-2); }
.gl-pv-file .ui-tile { margin-bottom: var(--ui-space-1); }
.gl-pv-file-name { max-width: 100%; overflow-wrap: anywhere; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); }
.gl-pv-file-meta { font-size: var(--ui-fs-label); color: var(--ui-muted); }
.gl-pv-use { margin: var(--ui-space-4) 0 0; }
.gl-pv-use:empty { display: none; }
.gl-pv-use .ui-spinner { width: 14px; height: 14px; }
.gl-pv-del { color: var(--ui-danger-ink); }
.gl-pv-del:hover { color: var(--ui-danger-ink); }
.gl-pv .ui-mfoot .ui-btn svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

/* ── Confirmar apagar ── */
.gl-del-check { display: flex; align-items: center; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); font-size: var(--ui-fs-label); color: var(--ui-muted); }
.gl-del-check[hidden] { display: none; }
.gl-del-warn { margin-bottom: var(--ui-space-4); }
.gl-del-choices { margin-bottom: var(--ui-space-4); }
.gl-del .ui-mlist:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    .gl-card.is-new, .gl-drop, .gl-tray { animation: none; }
    .gl-pick, .gl-card { transition: none; }
}
@media (max-width: 760px) {
    .gl-bar .gl-search { max-width: none; }
    /* 360 px: "41 fotos · 2 documentos" e "de 50 MB do seu plano" inteiros (o kit corta com reticências). */
    .gl-kpis .ui-kpi-ctx { white-space: normal; }
    .gl-sub-sm { display: inline; }
    .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
    .gl-tray { right: var(--ui-space-3); bottom: var(--ui-space-3); left: var(--ui-space-3); width: auto; max-width: none; }
    .gl-hero-steps { margin-top: var(--ui-space-6); }
}
@media (max-width: 600px) {
    /* Celular: o ícone sobe para cima do rótulo (mesmo padrão do Instagram). */
    .gl-kpis .ui-kpi-top > .ui-tile { --ui-tile-size: 28px; margin: 0; }
    .gl-kpis .ui-kpi-top { flex-direction: column-reverse; align-items: flex-start; gap: var(--ui-space-2); }
}