:root {
  --bg: #14352c;
  --bg2: #1c4a3e;
  --card: #f4efe4;
  --ink: #1a1a1a;
  --muted: #5c6b66;
  --in: #ffffff;
  --out: #c8e6c0;
  --warn: #8a3b12;
  --ok: #1f6b4a;
  --accent: #d4a017;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--card); }
#app { max-width: 720px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
header { padding: 12px 16px; background: var(--bg2); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; }
header h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }
header button, .btn { background: transparent; color: var(--card); border: 1px solid #7aa392; border-radius: 8px; padding: 6px 10px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 14px 16px; border-bottom: 1px solid #2a564a; cursor: pointer; }
.lista li:active { background: var(--bg2); }
.nome { font-weight: 600; }
.previa { color: #b7c9c2; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { font-size: 0.75rem; color: #9cb5ac; margin-top: 4px; display: flex; gap: 10px; }
.janela.fechada { color: #f0c0a8; }
.msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bolha { max-width: 80%; padding: 10px 12px; border-radius: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.bolha.in { align-self: flex-start; background: var(--in); border-bottom-left-radius: 4px; }
.bolha.out { align-self: flex-end; background: var(--out); border-bottom-right-radius: 4px; }
.bolha .quando { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 4px; }
.composer { padding: 10px 12px 16px; background: var(--bg2); }
.composer.bloqueado { opacity: 0.85; }
.aviso { background: #3a2418; color: #f0c0a8; padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 8px; }
.composer form { display: flex; gap: 8px; }
.composer textarea { flex: 1; resize: none; min-height: 44px; border-radius: 10px; border: 0; padding: 10px; font: inherit; }
.composer button[type=submit] { background: var(--accent); color: #1a1a1a; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 700; }
.composer textarea:disabled, .composer button:disabled { opacity: 0.5; }
.login { padding: 40px 20px; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.login input { padding: 12px; border-radius: 10px; border: 0; font: inherit; }
.login .erro { color: #f0c0a8; }
.catalogo { font-size: 0.8rem; color: #c5d8d0; padding: 0 12px 8px; }
.catalogo details { background: var(--bg2); border-radius: 8px; padding: 8px; }
.catalogo li { margin: 4px 0; }
.empty { padding: 40px 16px; color: #9cb5ac; text-align: center; }

.midia { margin-top: 6px; }
.midia img, .midia video { max-width: 100%; max-height: 60vh; border-radius: 10px; display: block; cursor: pointer; }
.midia audio { width: 100%; max-width: 320px; display: block; }
.midia a { color: inherit; text-decoration: underline; }

.lista li.pendente { border-left: 4px solid var(--accent, #e0a020); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.tag.alerta { background: #e0a020; color: #1b2a22; font-weight: 600; }
.tag.presenca { background: #3b82f6; color: #fff; }
.tag.ok { opacity: 0.8; }
.presenca { background: #3b82f6; color: #fff; padding: 6px 12px; font-size: 0.85rem; text-align: center; }
.bolha .autor { display: block; font-size: 0.7rem; opacity: 0.75; margin-top: 2px; }