/* ─── Variáveis ─────────────────────────────────────────────────────────────── */
:root {
    --green:        #25D366;
    --green-dark:   #128C7E;
    --green-teal:   #075E54;
    --bubble-sent:  #DCF8C6;
    --bubble-recv:  #FFFFFF;
    --sidebar-bg:   #F0F2F5;
    --chat-bg:      #E5DDD5;
    --text-primary: #111827;
    --text-muted:   #6B7280;
    --border:       #E5E7EB;
    --shadow:       0 1px 3px rgba(0,0,0,.12);
    --radius:       8px;
    --sidebar-w:    340px;
    --danger:       #EF4444;
    --danger-dark:  #B91C1C;
}

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:14px; color:var(--text-primary); height:100%; overflow:hidden; }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.app-container { display:flex; height:100dvh; overflow:hidden; }

/* ─── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); display:flex; flex-direction:column; background:var(--sidebar-bg); border-right:1px solid var(--border); overflow:hidden; flex-shrink:0; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--green-teal); color:#fff; min-height:60px; }
.user-info { display:flex; align-items:center; gap:10px; }
.user-name  { font-weight:600; font-size:15px; }
.header-actions { display:flex; gap:4px; }

.btn-icon { background:none; border:none; cursor:pointer; font-size:18px; padding:6px; border-radius:50%; color:#fff; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:background .2s; -webkit-tap-highlight-color:transparent; }
.btn-icon:hover { background:rgba(255,255,255,.15); }

.avatar { width:40px; height:40px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#fff; flex-shrink:0; }
.avatar-me { background:var(--green-dark); }

.search-box { padding:8px 12px; background:var(--sidebar-bg); }
.search-box input { width:100%; padding:8px 12px; border:none; border-radius:20px; background:#fff; font-size:13px; outline:none; }

.contact-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.contact-item { display:flex; align-items:center; gap:12px; padding:10px 16px; text-decoration:none; color:inherit; border-bottom:1px solid var(--border); transition:background .15s; cursor:pointer; min-height:64px; }
.contact-item:hover { background:#fff; }
.contact-item.active { background:#fff; }
.contact-info { display:flex; flex-direction:column; gap:2px; flex:1; overflow:hidden; }
.contact-name   { font-weight:500; font-size:14px; }
.contact-number { font-size:12px; color:var(--text-muted); }
.empty-msg { padding:24px 16px; color:var(--text-muted); font-size:13px; }
.empty-msg a { color:var(--green-dark); }

/* ─── Chat area ──────────────────────────────────────────────────────────────── */
.chat-area { flex:1; display:flex; flex-direction:column; background:var(--chat-bg); overflow:hidden; position:relative; min-width:0; }
.chat-area.empty-chat { background:#F0F2F5; }

/* ─── Chat header ────────────────────────────────────────────────────────────── */
.chat-header { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--green-teal); color:#fff; min-height:60px; flex-shrink:0; }
.chat-header-info { display:flex; flex-direction:column; flex:1; min-width:0; }
.chat-contact-name   { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contact-status { font-size:11px; opacity:.8; }
.chat-header-actions { display:flex; gap:4px; margin-left:auto; }
.btn-back { font-size:20px !important; color:#fff !important; }

/* ─── Mensagens ──────────────────────────────────────────────────────────────── */
.messages-container { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; display:flex; flex-direction:column; }
.messages-inner     { display:flex; flex-direction:column; gap:4px; margin-top:auto; }

.message { display:flex; max-width:75%; margin-bottom:2px; }
.message-sent     { align-self:flex-end; }
.message-received { align-self:flex-start; }

.message-bubble { padding:8px 10px 6px; border-radius:var(--radius); box-shadow:var(--shadow); position:relative; min-width:80px; word-break:break-word; }
.message-sent .message-bubble     { background:var(--bubble-sent); border-top-right-radius:2px; }
.message-received .message-bubble { background:var(--bubble-recv); border-top-left-radius:2px; }

.message-sender { display:block; font-size:11px; font-weight:700; color:var(--green-dark); margin-bottom:2px; }
.message-text   { font-size:14px; line-height:1.4; word-break:break-word; white-space:pre-wrap; }
.message-time   { display:block; font-size:10px; color:var(--text-muted); text-align:right; margin-top:4px; }
.message-status { font-size:11px; color:#4FC3F7; margin-left:4px; }

/* ─── Mídia inline ───────────────────────────────────────────────────────────── */
/* Imagem dentro da bolha */
.msg-imagem { display:block; max-width:280px; max-height:300px; width:100%; border-radius:6px; object-fit:cover; cursor:pointer; margin-bottom:4px; }

/* Vídeo inline */
.msg-video { display:block; max-width:280px; border-radius:6px; margin-bottom:4px; }

/* Player de áudio */
.msg-audio { display:block; width:100%; max-width:280px; margin-bottom:4px; }
.msg-audio audio { width:100%; }

/* Anexo genérico (documento / zip / etc.) */
.msg-anexo { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.05); border-radius:6px; padding:8px 10px; text-decoration:none; color:var(--text-primary); margin-bottom:4px; max-width:280px; }
.msg-anexo:hover { background:rgba(0,0,0,.1); }
.msg-anexo-icone { font-size:24px; flex-shrink:0; }
.msg-anexo-info  { display:flex; flex-direction:column; overflow:hidden; }
.msg-anexo-nome  { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-anexo-tipo  { font-size:10px; color:var(--text-muted); }

/* Legenda abaixo da mídia */
.msg-legenda { font-size:13px; line-height:1.3; margin-top:2px; white-space:pre-wrap; word-break:break-word; }

/* ─── Separador de data ──────────────────────────────────────────────────────── */
.date-separator { display:flex; justify-content:center; margin:12px 0 8px; }
.date-separator span { background:rgba(255,255,255,.75); padding:4px 12px; border-radius:8px; font-size:11px; color:var(--text-muted); box-shadow:var(--shadow); }

/* ─── Footer / barra de input ────────────────────────────────────────────────── */
.chat-footer { padding:8px 12px; background:#F0F2F5; border-top:1px solid var(--border); flex-shrink:0; padding-bottom:max(8px,env(safe-area-inset-bottom)); }

/* Preview de arquivo selecionado */
.preview-area { display:none; align-items:center; gap:8px; padding:6px 8px; background:#fff; border-radius:8px; margin-bottom:6px; border:1px solid var(--border); }
.preview-area.visivel { display:flex; }
.preview-thumb { width:40px; height:40px; object-fit:cover; border-radius:4px; }
.preview-nome  { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-rem   { background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); padding:2px 4px; }

.message-form { display:flex; align-items:flex-end; gap:6px; }

.message-form textarea { flex:1; padding:9px 14px; border:none; border-radius:22px; background:#fff; font-size:14px; resize:none; outline:none; max-height:120px; line-height:1.4; font-family:inherit; -webkit-appearance:none; }

/* Botões de ação na barra de input */
.btn-attach { width:40px; height:40px; border-radius:50%; border:none; background:var(--sidebar-bg); color:var(--green-dark); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s; -webkit-tap-highlight-color:transparent; position:relative; }
.btn-attach:hover { background:#E0E0E0; }

/* Botão gravar áudio — estados */
.btn-mic { width:40px; height:40px; border-radius:50%; border:none; background:var(--sidebar-bg); color:var(--green-dark); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s,color .2s; -webkit-tap-highlight-color:transparent; }
.btn-mic:hover    { background:#E0E0E0; }
.btn-mic.gravando { background:var(--danger); color:#fff; animation:pulsar .8s infinite; }

@keyframes pulsar {
    0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
    50%      { box-shadow:0 0 0 8px rgba(239,68,68,0); }
}

/* Cronômetro de gravação */
.rec-timer { font-size:12px; color:var(--danger); font-weight:600; display:none; align-items:center; gap:4px; }
.rec-timer.visivel { display:flex; }
.rec-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulsar-dot .8s infinite; }
@keyframes pulsar-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

.btn-send { width:44px; height:44px; border-radius:50%; border:none; background:var(--green); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s; -webkit-tap-highlight-color:transparent; }
.btn-send:hover { background:var(--green-dark); }

.form-hint { font-size:11px; color:var(--text-muted); text-align:center; margin-top:4px; }

/* ─── Input file oculto ──────────────────────────────────────────────────────── */
#inputArquivo { display:none; }

/* ─── Alertas ────────────────────────────────────────────────────────────────── */
.alert { padding:10px 16px; border-radius:var(--radius); font-size:13px; margin:8px 16px; flex-shrink:0; }
.alert-erro    { background:#FEE2E2; color:#B91C1C; }
.alert-sucesso { background:#D1FAE5; color:#065F46; }

/* ─── Botões ─────────────────────────────────────────────────────────────────── */
.btn { padding:8px 16px; border-radius:6px; border:none; cursor:pointer; font-size:14px; text-decoration:none; display:inline-block; -webkit-tap-highlight-color:transparent; }
.btn-primary  { background:var(--green);   color:#fff; }
.btn-primary:hover  { background:var(--green-dark); }
.btn-danger   { background:var(--danger);  color:#fff; }
.btn-danger:hover   { background:var(--danger-dark); }
.btn-secondary      { background:#E5E7EB; color:var(--text-primary); }
.btn-secondary:hover{ background:#D1D5DB; }

/* ─── Empty state ────────────────────────────────────────────────────────────── */
.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-muted); text-align:center; padding:32px; }
.empty-icon  { font-size:64px; opacity:.4; }
.empty-state h2 { color:var(--green-dark); font-size:24px; }

/* ─── Modal ──────────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box { background:#fff; border-radius:12px; padding:28px 24px; max-width:360px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,.2); transform:scale(.95); transition:transform .2s; }
.modal-overlay.open .modal-box { transform:scale(1); }
.modal-icon    { font-size:40px; text-align:center; margin-bottom:12px; }
.modal-title   { font-size:17px; font-weight:700; text-align:center; margin-bottom:8px; }
.modal-desc    { font-size:13px; color:var(--text-muted); text-align:center; margin-bottom:24px; line-height:1.5; }
.modal-actions { display:flex; gap:10px; justify-content:center; }
.modal-actions .btn { min-width:100px; text-align:center; padding:10px 20px; }

/* Lightbox de imagem */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:200; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox img { max-width:95vw; max-height:90vh; border-radius:6px; object-fit:contain; }
.lightbox-close { position:absolute; top:16px; right:20px; color:#fff; font-size:32px; cursor:pointer; background:none; border:none; }

/* ─── Login / Registro ───────────────────────────────────────────────────────── */
body.login-body { overflow:auto; background:var(--green-teal); display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:16px; }
.login-container { width:100%; max-width:420px; }
.login-card  { background:#fff; border-radius:12px; padding:36px 32px; box-shadow:0 4px 24px rgba(0,0,0,.2); }
.login-logo  { text-align:center; margin-bottom:28px; }
.login-icon  { font-size:52px; }
.login-title { font-size:22px; color:var(--green-teal); margin-top:8px; }
.login-subtitle { color:var(--text-muted); font-size:13px; margin-top:4px; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:13px; font-weight:600; }
.form-group input { padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:16px; outline:none; transition:border-color .2s; -webkit-appearance:none; }
.form-group input:focus { border-color:var(--green); }
.field-error { color:var(--danger); font-size:12px; }
.password-hint { font-size:11px; color:var(--text-muted); }
.btn-login { width:100%; padding:12px; font-size:15px; margin-top:4px; }
.login-register-link { text-align:center; margin-top:16px; font-size:13px; color:var(--text-muted); }
.login-register-link a { color:var(--green-dark); font-weight:600; text-decoration:none; }
.register-card { padding:32px; }

/* ─── Contatos page ──────────────────────────────────────────────────────────── */
.chat-area.contatos-main { background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; }
.contatos-header { display:none; }
.contatos-body   { padding:32px; flex:1; }
.contatos-titulo { margin-bottom:24px; color:var(--green-dark); }
.contatos-form   { max-width:420px; display:flex; flex-direction:column; gap:16px; }
.contatos-lista-mobile { display:none; }
.contact-item-manage { cursor:default; }
.btn-icon-delete { color:var(--text-muted) !important; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }

/* ─── Mobile < 768px ─────────────────────────────────────────────────────────── */
@media (max-width:767px) {
    .app-container { position:relative; overflow:hidden; }
    .sidebar { position:absolute; inset:0; width:100%; min-width:0; z-index:10; transform:translateX(0); transition:transform .25s ease; }
    .chat-area { position:absolute; inset:0; width:100%; transform:translateX(100%); transition:transform .25s ease; z-index:20; }
    .app-container.show-chat .sidebar   { transform:translateX(-100%); }
    .app-container.show-chat .chat-area { transform:translateX(0); }
    .app-container.show-sidebar .sidebar   { transform:translateX(0); }
    .app-container.show-sidebar .chat-area { transform:translateX(100%); }
    .message { max-width:88%; }
    .msg-imagem,.msg-video,.msg-audio,.msg-anexo { max-width:100%; }
    .sidebar-header,.chat-header { padding-top:max(12px,env(safe-area-inset-top)); }
    .chat-footer { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
    .login-card { padding:28px 20px; }
    .register-card { padding:24px 20px; }
    .contatos-header { display:flex; }
    .contatos-body   { padding:16px; }
    .contatos-form   { max-width:100%; }
    .contatos-titulo { display:none; }
    .contatos-lista-mobile { display:block; margin-bottom:24px; }
    .contatos-lista-mobile h3 { font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
    .modal-actions { flex-direction:column; }
    .modal-actions .btn { width:100%; }
}

/* ─── Tablet 768-1024px ──────────────────────────────────────────────────────── */
@media (min-width:768px) and (max-width:1024px) {
    :root { --sidebar-w:280px; }
}