:root { --bg: #328cc1; --fg: #fff; --in: #f1f1f1; --out: #dcf3ff; --texto: #1d1d1d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    display: flex; flex-direction: column; height: 100dvh;
    font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto); background: #fff;
}
#topo { background: var(--bg); color: var(--fg); padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
#topo { display: flex; align-items: center; gap: 10px; }
#topo h1 { margin: 0; font-size: 18px; }
#logo { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; background: #fff; }
#mensagens { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.in { align-self: flex-start; background: var(--in); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--out); border-bottom-right-radius: 4px; }
.msg.seguida { margin-top: -4px; }
.msg .baixar { display: block; margin-top: 4px; font-size: 13px; }
.dia { align-self: center; font-size: 12px; padding: 2px 10px; border-radius: 10px; background: #eee; color: #555; }
.msg small { display: block; margin-top: 4px; font-size: 11px; opacity: .6; }
.msg img, .msg video { max-width: 100%; max-height: 250px; border-radius: 8px; }
.opcoes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.opcoes button { text-align: left; }
button { font: inherit; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--bg); color: var(--fg); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
#inicio, #fim { padding: 16px; }
#form { display: flex; flex-direction: column; gap: 10px; }
#form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
input { font: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
#status { margin: 0; padding: 0 16px; font-size: 13px; color: #b00; }
#status:empty { display: none; }
#envio { display: flex; gap: 8px; padding: 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #eee; }
#envio #texto { flex: 1; min-width: 0; }
.anexo { display: flex; align-items: center; cursor: pointer; font-size: 20px; }
[hidden] { display: none !important; }