/* =====================
   SANDBOX (mockup vivo) + ANEXOS
   Linkar depois de app.css:
   <link rel="stylesheet" href="assets/css/sandbox.css">
===================== */

.att-card{
  border:1px solid var(--b1);
  border-radius:11px;
  overflow:hidden;
  background:var(--surf);
  margin:8px 0;
  transition:border-color var(--tr),background var(--tr);
}

/* ---- mockup vivo (sandbox) ---- */
.sx-card{ display:flex; flex-direction:column; }
.sx-toolbar{
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-bottom:1px solid var(--b1);
}
.sx-dot{ width:6px; height:6px; border-radius:50%; background:var(--t3); flex-shrink:0; }
.sx-dot.ok{ background:#3DD68C; box-shadow:0 0 6px rgba(61,214,140,.5); }
.sx-dot.err{ background:#ff6b6b; box-shadow:0 0 6px rgba(255,107,107,.5); }
.sx-dot.loading{ background:var(--acc); animation:sxPulse 1s infinite; }
@keyframes sxPulse{ 50%{ opacity:.35; } }
.sx-lang{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--t2);
  background:var(--elev); border:1px solid var(--b1); border-radius:6px; padding:2px 7px;
}
.sx-toggle{
  margin-left:auto; background:var(--elev); color:var(--t2); border:1px solid var(--b2);
  border-radius:7px; font-size:11px; padding:4px 9px; cursor:pointer; font-family:'JetBrains Mono',monospace;
}
.sx-toggle:hover{ border-color:var(--acc); color:var(--acc); }
.sx-body{ position:relative; min-height:220px; background:#fff; }
.sx-body iframe{ width:100%; height:100%; min-height:220px; border:none; display:block; }
.sx-err{
  position:absolute; inset:0; background:rgba(10,8,10,.95); color:#ffb4b4;
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:14px; overflow:auto; display:none;
}
.sx-err.show{ display:block; }
.sx-code{
  margin:0; padding:12px; background:#0d0f14; color:#9fe6cf;
  font-family:'JetBrains Mono',monospace; font-size:12px; max-height:320px; overflow:auto; line-height:1.6;
}

/* ---- anexo de código (estático ou grande) ---- */
.att-code .att-head{
  display:flex; align-items:center; gap:7px; padding:8px 11px;
  border-bottom:1px solid var(--b1);
}
.att-ic{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--acc);
  background:var(--acc-soft); border-radius:6px; padding:1px 6px;
}
.att-title{ font-size:12px; font-weight:700; color:var(--t1); }
.att-meta{ font-size:10.5px; color:var(--t3); font-family:'JetBrains Mono',monospace; }
.att-act{
  margin-left:auto; background:var(--elev); color:var(--t2); border:1px solid var(--b2);
  border-radius:7px; font-size:10.5px; padding:4px 8px; cursor:pointer; font-family:'JetBrains Mono',monospace;
}
.att-act:hover{ color:var(--t1); border-color:var(--b3); }
.att-act + .att-act{ margin-left:5px; }
.att-pre{ margin:0; padding:12px; background:#0d0f14; max-height:320px; overflow:auto; font-size:12px; line-height:1.6; }

/* ---- mídia (imagem/vídeo) ---- */
.att-img, .att-video{ width:100%; max-height:360px; object-fit:cover; display:block; background:#000; }
.att-img{ cursor:pointer; }
.att-cap{ padding:7px 11px; font-size:11px; color:var(--t2); border-top:1px solid var(--b1); }

/* =====================
   PREVIEW DE ANEXOS — composer (antes de enviar) e bolha do usuário (depois)
===================== */
.att-preview{
  display:flex; flex-wrap:wrap; gap:6px; padding:0 2px 8px; display:none;
}
.att-preview-sent{ display:flex; padding:6px 2px 0; }
.ap-chip{
  display:flex; align-items:center; gap:6px;
  background:var(--elev); border:1px solid var(--b2); border-radius:9px;
  padding:4px 8px; font-size:11px; color:var(--t2); max-width:200px;
}
.ap-chip-pasted{ max-width:260px; padding:6px 9px; align-items:flex-start; }
.ap-chip-sent{ background:var(--acc-soft); border-color:var(--acc-glow); }
.ap-thumb{ width:22px; height:22px; border-radius:6px; object-fit:cover; flex-shrink:0; cursor:pointer; }
.ap-ic{
  width:22px; height:22px; border-radius:6px; background:var(--surf);
  display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
}
.ap-info{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.ap-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; font-weight:600; color:var(--t1); }
.ap-snippet{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--t3);
}
.ap-size{ color:var(--t3); font-family:'JetBrains Mono',monospace; font-size:9.5px; flex-shrink:0; margin-left:auto; }
.ap-x{
  background:none; border:none; color:var(--t3); cursor:pointer; font-size:14px;
  line-height:1; padding:0 2px; flex-shrink:0;
}
.ap-x:hover{ color:var(--danger,#ff6b6b); }

/* =====================
   LIGHTBOX — ver imagem colada/anexada/recebida em tamanho real
===================== */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  z-index:9999; cursor:zoom-out; padding:24px;
}
.lightbox-overlay.show{ display:flex; }
.lightbox-img{
  max-width:90vw; max-height:90vh; object-fit:contain;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  cursor:default;
}