/* ===== Folha de anexos ===== */
.anx-root{ position:fixed; inset:0; pointer-events:none; z-index:70; }
.anx-root .anx-backdrop{
  position:fixed; left:0; right:0; top:var(--topbar-h); bottom:0;
  background:rgba(15,23,42,.28); opacity:0; transition:opacity .18s ease; pointer-events:auto;
}
.anx-root .anx-sheet{
  position:fixed; left:12px; right:12px; bottom:calc(var(--composer-h) + 12px);
  background:#fff; border-radius:16px;
  box-shadow:0 18px 50px rgba(2,6,23,.20);
  transform:translateY(16px); opacity:0; transition:transform .22s ease, opacity .22s ease;
  pointer-events:auto;
}
.anx-open .anx-backdrop{ opacity:1; }
.anx-open .anx-sheet{ transform:translateY(0); opacity:1; }

/* Escolha inicial */
.anx-row{ display:flex; gap:10px; padding:12px; }
.anx-opt{
  flex:1; display:flex; align-items:center; gap:10px;
  padding:12px 14px; border:1px solid var(--line,#e5e7eb); border-radius:12px; background:#fff;
  cursor:pointer; user-select:none; transition:transform .02s ease, background .12s ease, border-color .12s ease;
}
.anx-opt:active{ transform:translateY(1px) }
.anx-icon{ width:22px; height:22px; display:grid; place-items:center; color:#374151 }
.anx-label{ font-weight:800; color:#111827 }
.anx-sub{ font-size:.85rem; color:#6b7280; margin-left:auto }

/* Passo mensagem + preview */
.anx-content{ padding:12px }

/* grid base (2 colunas) */
.anx-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px; margin-bottom:10px; grid-auto-flow:dense;
}
.anx-thumb{
  position:relative; width:100%; aspect-ratio:1/1;
  border:1px solid var(--line,#e5e7eb); border-radius:10px; overflow:hidden; background:#f8fafc; display:block;
}
.anx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 1 imagem = herói */
.anx-thumb.hero{
  grid-column:1 / -1; grid-row: span 2; aspect-ratio: 2 / 2;
}

/* overlay do "+N" quando >4 imagens */
.anx-thumb .anx-more{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); color:#fff; font-weight:800; font-size:1.05rem;
}

/* ===== Prévia de PDF (cortado no topo) ===== */
.anx-pdf-hero{
  position:relative; width:100%;
  border:1px solid var(--line,#e5e7eb); border-radius:10px; overflow:hidden; background:#f8fafc;
  aspect-ratio: 2 / 1; min-height:140px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:8px;
}
.anx-pdf-hero img{
  width:100%; height:100%; object-fit:cover; object-position: top center; display:block;
}
.anx-pdf-loading{
  width:28px; height:28px; border-radius:999px;
  border:3px solid #e5e7eb; border-top-color:#3b82f6; animation:anxspin 1s linear infinite;
  position:absolute;
}
.anx-pdf-fallback{ display:grid; place-items:center; color:#9ca3af; }
.anx-pdf-fallback svg{ width:38px; height:38px; }
@keyframes anxspin{ to{ transform:rotate(360deg); } }

/* Arquivos */
.anx-file{
  padding:8px 10px; border:1px solid var(--line,#e5e7eb); border-radius:10px; background:#f8fafc; margin-bottom:10px;
  font-size:.92rem; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Campo de texto */
.anx-text{
  width:100%; min-height:64px; max-height:160px; resize:vertical;
  border:1px solid var(--line,#e5e7eb); border-radius:12px; padding:10px 12px; font:inherit; outline:none;
}
.anx-text:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.18); }

/* Ações */
.anx-actions{
  display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid var(--line,#e5e7eb);
}
.anx-btn{
  border:1px solid var(--line,#e5e7eb); background:#fff; color:#111; border-radius:12px;
  padding:10px 14px; font-weight:800; cursor:pointer; transition:transform .02s ease, filter .12s ease;
}
.anx-btn:active{ transform:translateY(1px) }
.anx-btn.primary{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.anx-btn.alt{ background:#fff; color:#111; }
.anx-btn.circle{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center; padding:0;
}

/* Estado desativado */
.anx-root .anx-btn[disabled], .anx-root .anx-btn[aria-disabled="true"], .anx-root .anx-btn.is-disabled{
  opacity:.65 !important; cursor:not-allowed !important; pointer-events:none !important;
  box-shadow:none !important; filter:grayscale(18%) !important;
}
.anx-root .anx-btn.primary[disabled], .anx-root .anx-btn.primary[aria-disabled="true"], .anx-root .anx-btn.primary.is-disabled{
  background:#e5e7eb !important; border-color:#e5e7eb !important; color:#9ca3af !important;
}

/* alinhamento dos botões à direita */
.anx-right{ margin-left:auto; display:flex; gap:10px; }

/* ===== Layout especial p/ exatamente 3 imagens ===== */
.anx-grid.grid-3-landscape{
  grid-template-areas:
    "a a"
    "b c";
}
.anx-grid.grid-3-landscape .anx-item-1{ grid-area:a; aspect-ratio:2 / 1 !important; }
.anx-grid.grid-3-landscape .anx-item-2{ grid-area:b; aspect-ratio:1 / 1 !important; }
.anx-grid.grid-3-landscape .anx-item-3{ grid-area:c; aspect-ratio:1 / 1 !important; }

.anx-grid.grid-3-portrait{
  grid-template-areas:
    "a b"
    "a c";
}
.anx-grid.grid-3-portrait .anx-item-1{ grid-area:a; aspect-ratio:1 / 2 !important; }
.anx-grid.grid-3-portrait .anx-item-2{ grid-area:b; aspect-ratio:1 / 1 !important; }
.anx-grid.grid-3-portrait .anx-item-3{ grid-area:c; aspect-ratio:1 / 1 !important; }

/* responsivo */
@media (max-width:420px){
  .anx-row{ flex-direction:column; }
  .anx-right{ gap:8px; }
}

/* ===== Preparando (skeleton + barra) ===== */
.anx-prep{ padding:12px; }
.anx-prep-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.anx-prep-title{ font-weight:800; color:#111827; }
.anx-prep-sub{ font-size:.9rem; color:#6b7280; }

.anx-progress{
  position:relative; height:8px; border-radius:999px; background:#eef2f7; overflow:hidden; margin:8px 0 12px 0;
}
.anx-progress > span{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#3b82f6; border-radius:999px; transition:width .15s ease;
}

/* grid de skeleton (mini thumbs) */
.anx-skel-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.anx-skel-thumb{
  height:64px; border-radius:10px; background:#f3f4f6; animation:anxpulse 1.2s ease-in-out infinite;
}
@keyframes anxpulse{
  0%{ opacity:.6 } 50%{ opacity:1 } 100%{ opacity:.6 }
}

/* (compat) Topbar antigo — não usado quando há bolha flutuante */
.anx-topbar{ display:none; }
.anx-top-cancel{ display:none; }

/* Sucesso (quando usar a folha visível) */
.anx-done{
  display:flex; align-items:center; gap:10px; padding:12px;
}
.anx-done .anx-check{
  width:22px; height:22px; color:#16a34a; display:grid; place-items:center;
}
.anx-done .anx-done-title{ font-weight:800; color:#065f46; }
.anx-done .anx-done-sub{ font-size:.9rem; color:#6b7280; }
