@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg:       #FFFFFF;
  --bg2:      #F4F4F5;
  --bg3:      #EBEBEB;
  --card:     #FFFFFF;

  --border:   rgba(99,102,241,0.10);
  --border2:  rgba(99,102,241,0.18);

  --accent:       #6366F1;
  --accent2:      #4F46E5;
  --accent-light: rgba(99,102,241,0.12);

  --green:          #16a34a;
  --green-bg:       rgba(22,163,74,0.08);
  --green-border:   rgba(22,163,74,0.20);
  --red:            #DC2626;
  --red-bg:         rgba(220,38,38,0.08);
  --red-border:     rgba(220,38,38,0.20);
  --yellow:         #D97706;
  --yellow-bg:      rgba(217,119,6,0.08);
  --yellow-border:  rgba(217,119,6,0.20);
  --purple:         #7c3aed;
  --blue:           #6366F1;

  --text:   #18181B;
  --text2:  #3F3F46;
  --muted:  #71717A;
  --muted2: #A1A1AA;

  --sidebar-bg:     #1e1e2e;
  --sidebar-border: #2a2a3e;
  --sidebar-hover:  #2a2a3e;
  --sidebar-w:      228px;

  --topbar-bg:     #FFFFFF;
  --topbar-border: #E4E4E7;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; display:flex; -webkit-font-smoothing:antialiased; }

.layer { position:fixed; inset:0; display:none; z-index:10; }
.layer.active { display:flex; }

#layer-setup { background:var(--bg); align-items:center; justify-content:center; }
.setup-box { background:var(--card); border:1px solid var(--border2); border-radius:16px; padding:40px; width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.setup-logo { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--accent); margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.setup-sub { font-size:13px; color:var(--muted); margin-bottom:28px; }
.setup-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; padding:14px; background:var(--bg3); border-radius:10px; border:1px solid var(--border); }
.step-num { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-text { font-size:12px; line-height:1.6; color:var(--muted); }
.step-text strong { color:var(--text); }
.step-text code { background:var(--bg); border:1px solid var(--border2); border-radius:4px; padding:1px 6px; font-size:11px; color:var(--accent); font-family:monospace; }
.setup-input { background:var(--bg3); border:1.5px solid var(--border2); color:var(--text); padding:10px 14px; border-radius:8px; font-size:13px; font-family:var(--font-body); outline:none; width:100%; margin-bottom:8px; transition:border-color .15s; }
.setup-input:focus { border-color:var(--accent); }
.setup-input::placeholder { color:var(--muted2); }
.setup-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; width:100%; margin-top:4px; font-family:var(--font-display); transition:background .15s; }
.setup-btn:hover { background:var(--accent2); }
.sql-toggle { font-size:12px; color:var(--accent); cursor:pointer; margin-top:14px; text-align:center; display:block; }
.sql-panel { display:none; margin-top:12px; background:var(--bg3); border:1px solid var(--border2); border-radius:10px; padding:14px; max-height:220px; overflow-y:auto; }
.sql-panel pre { font-size:10.5px; color:#818CF8; font-family:monospace; line-height:1.6; white-space:pre-wrap; }
.copy-sql-btn { background:var(--bg); border:1px solid var(--border2); color:var(--muted); font-size:11px; padding:4px 10px; border-radius:6px; cursor:pointer; float:right; margin-bottom:6px; font-family:var(--font-body); }
.setup-err { color:var(--red); font-size:12px; margin-top:6px; display:none; }
.setup-ok  { color:var(--green); font-size:12px; margin-top:6px; display:none; }

#layer-login { background:var(--bg); align-items:center; justify-content:center; }
.login-wrap { display:grid; grid-template-columns:1fr 1fr; width:880px; min-height:520px; border-radius:20px; overflow:hidden; border:1px solid var(--border2); box-shadow:var(--shadow-lg); }
.login-left { background:linear-gradient(160deg,#1e1e2e 0%,#16162a 100%); padding:50px 44px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid #2a2a3e; }
.login-brand { font-family:var(--font-display); font-size:28px; font-weight:800; color:#E0E7FF; display:flex; align-items:center; gap:12px; }
.login-tagline { font-size:14px; color:var(--muted); margin-top:6px; }
.login-features { margin-top:auto; }
.login-feat { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.feat-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.feat-label { font-size:13px; color:#9CA3AF; }
.login-right { background:var(--card); padding:50px 44px; display:flex; flex-direction:column; justify-content:center; }
.login-title { font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:6px; color:var(--text); }
.login-sub { font-size:13px; color:var(--muted); margin-bottom:28px; }
.login-tabs { display:flex; margin-bottom:24px; background:var(--bg3); border-radius:8px; padding:3px; }
.login-tab { flex:1; text-align:center; padding:7px; border-radius:6px; font-size:13px; cursor:pointer; color:var(--muted); transition:all .15s; }
.login-tab.active { background:var(--accent); color:#fff; font-weight:600; }
.login-form { display:flex; flex-direction:column; gap:10px; }
.login-input { background:var(--bg3); border:1.5px solid var(--border2); color:var(--text); padding:11px 14px; border-radius:8px; font-size:13px; font-family:var(--font-body); outline:none; transition:border-color .15s; }
.login-input:focus { border-color:var(--accent); }
.login-input::placeholder { color:var(--muted2); }
.login-select { background:var(--bg3); border:1.5px solid var(--border2); color:var(--text); padding:11px 14px; border-radius:8px; font-size:13px; font-family:var(--font-body); outline:none; cursor:pointer; }
.login-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-display); transition:background .15s; margin-top:4px; }
.login-btn:hover { background:var(--accent2); }
.login-err { color:var(--red); font-size:12px; margin-top:4px; display:none; }
.login-ok  { color:var(--green); font-size:12px; margin-top:4px; display:none; }
.role-badges { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.role-badge { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:1px solid rgba(79,70,229,0.15); background:rgba(79,70,229,0.05); }
.rb-icon  { font-size:18px; }
.rb-label { font-size:12px; font-weight:600; }
.rb-desc  { font-size:11px; color:var(--muted); }

#layer-app { display:none; width:100%; height:100vh; flex-direction:row; }
#layer-app.active { display:flex; }

.sidebar { width:var(--sidebar-w); background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); display:flex; flex-direction:column; flex-shrink:0; height:100vh; }
.logo { padding:20px 16px 16px; border-bottom:1px solid var(--sidebar-border); }
.logo-mark { font-family:var(--font-display); font-size:16px; font-weight:800; color:#E0E7FF; display:flex; align-items:center; gap:8px; }
.logo-sub { font-size:9px; color:#4a4a6a; letter-spacing:1.5px; text-transform:uppercase; margin-top:3px; padding-left:36px; }
nav { flex:1; padding:10px 10px 10px 8px; overflow-y:auto; }
.nav-section { font-size:9px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:#4a4a6a; padding:14px 10px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 8px; border-radius:0 8px 8px 0; cursor:pointer; font-size:13px; color:#9090b0; transition:all .15s; margin-bottom:1px; border-left:2.5px solid transparent; font-weight:500; }
.nav-item:hover { background:var(--sidebar-hover); color:#E0E7FF; }
.nav-item.active { background:rgba(99,102,241,0.15); color:#E0E7FF; border-color:transparent; border-left-color:#6366F1; font-weight:600; }
.nav-item .icon { width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:currentColor; }
.sidebar-footer { padding:14px; border-top:1px solid var(--sidebar-border); }
.user-pill { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.user-info .uname { font-size:12px; font-weight:600; color:#E0E7FF; }
.user-info .urole { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; margin-top:2px; }
.user-info .urole::before { content:''; width:5px; height:5px; border-radius:50%; background:#22c55e; display:inline-block; }
.db-badge { display:flex; align-items:center; gap:5px; font-size:10px; margin-top:8px; color:#22c55e; }
.db-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.main { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:60px; border-bottom:1px solid var(--topbar-border); background:var(--topbar-bg); flex-shrink:0; }
.page-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text); }
.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar-search { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1.5px solid var(--border2); border-radius:8px; padding:7px 12px; font-size:13px; color:var(--muted); cursor:pointer; transition:all .15s; min-width:220px; }
.topbar-search:hover { border-color:var(--accent); }
.topbar-search:focus-within { border-color:var(--accent); }
.topbar-search input { background:transparent; border:none; outline:none; font-size:13px; color:var(--text); font-family:var(--font-body); width:100%; }
.topbar-search input::placeholder { color:var(--muted2); }
.topbar-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .15s; }
.topbar-btn:hover { background:var(--bg3); color:var(--text2); }
.notif-btn { position:relative; }
.notif-dot { position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--topbar-bg); }
.role-chip { padding:5px 12px; border-radius:99px; font-size:11px; font-weight:600; }
.role-chip.admin     { background:rgba(79,70,229,0.15); color:#818CF8; border:1px solid rgba(79,70,229,0.3); }
.role-chip.atendente { background:rgba(22,163,74,0.12);  color:#4ade80;  border:1px solid rgba(22,163,74,0.25); }
.role-chip.investidor{ background:rgba(217,119,6,0.12);  color:#FCD34D;  border:1px solid rgba(217,119,6,0.25); }

.content { flex:1; overflow:hidden; padding:20px 24px; min-height:0; display:flex; flex-direction:column; background:var(--bg); }
.page { display:none; flex:1; overflow-y:auto; }
.page.active { display:flex; flex-direction:column; }

#page-investidores { overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
@media (max-width:768px) {
  #page-investidores { padding-bottom:80px !important; }
  body.inv-active .content { overflow-y:auto !important; overflow-x:hidden !important; }
}

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stats-grid.cols3 { grid-template-columns:repeat(3,1fr); }

.stat-card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:18px; position:relative; overflow:hidden; transition:box-shadow .2s, transform .2s, border-color .2s; cursor:default; box-shadow:var(--shadow-sm); }
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--accent); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); border-radius:12px 12px 0 0; }
.stat-label { font-size:10px; color:var(--muted); letter-spacing:.8px; text-transform:uppercase; font-weight:600; margin-bottom:10px; }
.stat-val { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--text); margin-bottom:4px; line-height:1; }
.stat-sub  { font-size:11px; color:var(--muted); }
.stat-icon { position:absolute; right:14px; top:14px; color:var(--accent); opacity:.15; }

.stat-alert { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.2); }
.stat-alert::before { background:var(--red); }
.stat-alert .stat-val   { color:var(--red); }
.stat-alert .stat-label { color:rgba(220,38,38,0.7); }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:18px; transition:border-color .2s; box-shadow:var(--shadow-sm); }
.card:hover { border-color:var(--border2); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title  { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted2); padding:0 12px 10px; border-bottom:1px solid var(--border2); }
td { padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text2); font-size:13px; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(79,70,229,0.05); }
.empty-row td { text-align:center; color:var(--muted2); padding:28px; font-size:13px; }

.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:600; }
.badge-green  { background:var(--green-bg);    color:#4ade80;  border:1px solid var(--green-border); }
.badge-yellow { background:var(--yellow-bg);   color:#FCD34D;  border:1px solid var(--yellow-border); }
.badge-red    { background:var(--red-bg);      color:#F87171;  border:1px solid var(--red-border); }
.badge-blue   { background:var(--accent-light);color:#818CF8;  border:1px solid rgba(79,70,229,0.3); }
.badge-purple { background:rgba(124,58,237,0.12); color:#C084FC; border:1px solid rgba(124,58,237,0.25); }
.badge-gray   { background:rgba(107,114,128,0.12); color:var(--muted); border:1px solid rgba(107,114,128,0.2); }

.input-group { display:flex; gap:10px; margin-bottom:16px; align-items:center; }
input, select, textarea { background:var(--bg3); border:1.5px solid var(--border2); color:var(--text); padding:9px 14px; border-radius:8px; font-size:13px; font-family:var(--font-body); outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,0.15); }
.input-flex { flex:1; }
select { cursor:pointer; }
label { font-size:12px; color:var(--muted); margin-bottom:4px; display:block; font-weight:500; }
.form-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group.full { grid-column:1/-1; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .15s; font-family:var(--font-body); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent2); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--muted); border:1.5px solid var(--border2); }
.btn-ghost:hover { color:var(--text); background:rgba(79,70,229,0.08); border-color:var(--border2); }

.vi { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.vi-car  { background:rgba(79,70,229,0.15); }
.vi-moto { background:rgba(22,163,74,0.12); }

.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--border2); }
.tl-item  { position:relative; margin-bottom:18px; }
.tl-dot   { position:absolute; left:-24px; width:14px; height:14px; border-radius:50%; border:2px solid var(--bg); }
.tl-dot.rental { background:var(--accent); }
.tl-dot.maint  { background:var(--yellow); }
.tl-dot.devol  { background:var(--green); }
.tl-title { font-size:13px; font-weight:500; color:var(--text); }
.tl-sub   { font-size:11px; color:var(--muted); margin-top:2px; }
.tl-date  { font-size:10px; color:var(--muted2); margin-top:3px; }

.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-month  { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); }
.cal-nav { background:rgba(79,70,229,0.1); border:1px solid var(--border2); color:var(--text); padding:6px 12px; border-radius:6px; cursor:pointer; font-size:14px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow  { text-align:center; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted2); padding:6px 0; }
.cal-day  { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; cursor:pointer; font-size:13px; transition:background .1s; gap:3px; color:var(--text2); }
.cal-day:hover { background:rgba(79,70,229,0.12); }
.cal-day.today { background:rgba(79,70,229,0.2); color:#818CF8; font-weight:700; }
.cal-day.selected:not(.today) { background:rgba(79,70,229,0.15); color:#818CF8; font-weight:700; border:1.5px solid var(--accent); }
.cal-day.other { color:var(--muted2); }
.dots { display:flex; gap:2px; }
.dot  { width:4px; height:4px; border-radius:50%; }

/* ══ CHAT WHATSAPP — REDESIGN ══ */
.chat-layout { display:grid; grid-template-columns:300px 1fr 280px; gap:0; height:calc(100vh - 68px); min-height:0; border-radius:14px; overflow:hidden; border:1px solid var(--border); }

/* ── Lista de contatos ── */
.chat-list { background:#111b21; border-right:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; overflow:hidden; }
.chat-list-hdr { padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:19px; font-weight:700; color:#e9edef; background:#202c33; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.chat-list-hdr-title { display:flex; align-items:center; gap:8px; }
.chat-search-wrap { padding:8px 12px; background:#111b21; flex-shrink:0; }
.chat-search-wrap input { width:100%; background:#202c33; border:none; border-radius:8px; padding:8px 14px 8px 36px; font-size:13px; color:#e9edef; outline:none; }
.chat-search-wrap input::placeholder { color:#8696a0; }
#chat-contacts { flex:1; overflow-y:auto; }
.chat-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.04); transition:background .1s; position:relative; }
.chat-item:hover { background:#202c33; }
.chat-item.active { background:#2a3942; }
.chat-item.active div { color:#e9edef !important; }
.chat-item-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.chat-item-time { font-size:11px; color:#8696a0; }
.chat-item-time.unread { color:#00a884; }
.chat-unread-badge { min-width:20px; height:20px; background:#00a884; color:#111b21; border-radius:99px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }

/* ── Avatar ── */
.cavatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; overflow:hidden; }

/* ── Janela de chat ── */
.chat-window { background:#0b141a; display:flex; flex-direction:column; min-height:0; overflow:hidden; position:relative; }
/* Fundo com textura sutil igual WPP */
.chat-window::before { content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0); background-size:24px 24px; pointer-events:none; z-index:0; }

/* ── Header da conversa ── */
.chat-top { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,0.06); background:#202c33; position:relative; z-index:1; }
.chat-top-info { flex:1; min-width:0; }
.chat-top-name { font-size:15px; font-weight:600; color:#e9edef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-top-sub { font-size:12px; color:#8696a0; margin-top:1px; }
.chat-top-actions { display:flex; gap:6px; align-items:center; }

/* ── Área de mensagens ── */
.chat-msgs { flex:1; overflow-y:auto; min-height:0; padding:16px 8%; display:flex; flex-direction:column; gap:2px; background:transparent; position:relative; z-index:1; }

/* ── Balões de mensagem ── */
.msg { max-width:65%; padding:7px 12px 22px; border-radius:8px; font-size:13.5px; line-height:1.55; position:relative; word-break:break-word; }
.msg-in  { background:#202c33; color:#e9edef; align-self:flex-start; border-top-left-radius:2px; margin-bottom:2px; }
.msg-out { background:#005c4b; color:#e9edef; align-self:flex-end; border-top-right-radius:2px; margin-bottom:2px; }
/* Cauda do balão */
.msg-in::before  { content:''; position:absolute; top:0; left:-8px; width:0; height:0; border-top:8px solid #202c33; border-left:8px solid transparent; }
.msg-out::after  { content:''; position:absolute; top:0; right:-8px; width:0; height:0; border-top:8px solid #005c4b; border-right:8px solid transparent; }
/* Timestamp dentro do balão */
.msg-time { font-size:11px; color:rgba(233,237,239,0.6); position:absolute; bottom:5px; right:10px; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.msg-check { font-size:12px; }

/* ── Input de mensagem ── */
.chat-input-area { padding:8px 12px; display:flex; gap:8px; align-items:flex-end; background:#202c33; border-top:none; position:relative; z-index:1; }
.chat-input-wrap { flex:1; background:#2a3942; border-radius:10px; display:flex; align-items:center; padding:4px 6px; gap:6px; }
.chat-input { flex:1; background:transparent; border:none; padding:7px 8px; font-size:14px; color:#e9edef; font-family:var(--font-body); outline:none; resize:none; max-height:120px; line-height:1.5; }
.chat-input::placeholder { color:#8696a0; }
.chat-btn-send { width:42px; height:42px; border-radius:50%; background:#00a884; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.chat-btn-send:hover { background:#00c49a; }
.chat-btn-send svg { width:20px; height:20px; fill:#fff; }
.chat-tool-btn { background:none; border:none; cursor:pointer; padding:7px; border-radius:50%; color:#8696a0; font-size:18px; transition:color .15s, background .15s; display:flex; align-items:center; }
.chat-tool-btn:hover { color:#e9edef; background:rgba(255,255,255,0.08); }

/* ── Painel lateral direito ── */
.chat-side { background:#111b21; border-left:1px solid rgba(255,255,255,0.06); padding:0; overflow-y:auto; display:flex; flex-direction:column; }
.chat-side-section { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.06); }
.cst { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#8696a0; margin-bottom:8px; }

/* ── Status WPP ── */
.wpp-ok { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; background:rgba(0,168,132,0.1); border:1px solid rgba(0,168,132,0.25); font-size:12px; color:#00a884; margin-bottom:0; }
.wdot { width:8px; height:8px; border-radius:50%; background:#00a884; animation:pulse 2s infinite; flex-shrink:0; }

/* ── Respostas rápidas ── */
.qr { background:#202c33; border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:8px 10px; font-size:12px; cursor:pointer; margin-bottom:6px; transition:border-color .15s, background .15s; line-height:1.4; color:#e9edef; }
.qr:hover { border-color:#00a884; color:#00a884; background:rgba(0,168,132,0.06); }

/* ── Separador de data ── */
.chat-date-sep { display:flex; align-items:center; justify-content:center; margin:10px 0 6px; }
.chat-date-sep span { font-size:11.5px; color:#e9edef; background:#182229; padding:5px 12px; border-radius:8px; font-weight:500; }

.contract-preview { background:#fff; color:#111; padding:28px; border-radius:8px; font-size:12.5px; line-height:1.8; font-family:'Georgia',serif; border:1px solid #ddd; }
.contract-preview h2 { text-align:center; font-size:14px; margin-bottom:4px; }
.cp-sub { text-align:center; color:#555; margin-bottom:18px; font-size:11px; }
.contract-preview p { margin-bottom:8px; }
.sign-row   { display:flex; justify-content:space-between; margin-top:28px; }
.sign-block { text-align:center; font-size:11px; color:#555; }
.sign-line  { border-top:1px solid #999; width:150px; margin:24px auto 5px; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:200; backdrop-filter:blur(4px); }
.modal-overlay.show { display:flex; }
.modal { background:var(--card); border:1px solid var(--border2); border-radius:16px; padding:28px; width:540px; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-title  { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text); }
.modal-close { background:rgba(79,70,229,0.1); border:none; color:var(--muted); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.modal-close:hover { background:rgba(79,70,229,0.2); color:var(--text); }
.modal-footer { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }

.user-card { background:rgba(79,70,229,0.06); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; align-items:center; gap:14px; margin-bottom:10px; transition:border-color .15s; }
.user-card:hover { border-color:var(--border2); }
.uc-info    { flex:1; }
.uc-name    { font-size:14px; font-weight:600; color:var(--text); }
.uc-email   { font-size:12px; color:var(--muted); margin-top:2px; }
.uc-actions { display:flex; gap:8px; align-items:center; }

.access-denied { display:flex; flex-direction:column; align-items:center; justify-content:center; height:60vh; gap:12px; text-align:center; }
.ad-icon  { font-size:48px; opacity:.15; }
.ad-title { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--red); }
.ad-sub   { color:var(--muted); font-size:13px; max-width:300px; line-height:1.6; }

.notify { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:10px; font-size:13px; font-weight:500; z-index:999; animation:slideUp .3s ease; display:none; box-shadow:var(--shadow-lg); }
.notify.success { background:var(--green-bg); border:1px solid var(--green-border); color:#4ade80; }
.notify.error   { background:var(--red-bg);   border:1px solid var(--red-border);   color:#F87171; }
.notify.warning { background:rgba(245,185,66,.12); border:1px solid rgba(245,185,66,.3); color:#F5B942; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.tab-filter { display:flex; gap:6px; margin-bottom:16px; }
.tab-btn { padding:6px 14px; border-radius:99px; font-size:12px; cursor:pointer; border:1.5px solid var(--border2); color:var(--muted); background:transparent; font-family:var(--font-body); transition:all .15s; font-weight:500; }
.tab-btn.active, .tab-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
/* Scrollbar global estilo WhatsApp */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(255,255,255,0.15) transparent; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:transparent; border-radius:99px; transition:background .2s; }
*:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); }
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22) !important; }
.scrollbar-thin::-webkit-scrollbar { width:4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:transparent; border-radius:99px; }
.scrollbar-thin:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); }
.input-group { display:flex; gap:10px; margin-bottom:16px; align-items:center; }

.search-results { position:absolute; top:100%; left:0; right:0; background:var(--card); border:1px solid var(--border2); border-radius:10px; box-shadow:var(--shadow-lg); z-index:100; max-height:300px; overflow-y:auto; margin-top:4px; }
.search-item { padding:10px 14px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); transition:background .1s; color:var(--text2); }
.search-item:hover { background:rgba(79,70,229,0.08); }
.search-item:last-child { border:none; }
.search-tag { font-size:10px; color:var(--muted); background:rgba(79,70,229,0.1); padding:2px 7px; border-radius:99px; }

@media (max-width:768px) {
  body { overflow:auto; height:auto; }
  .login-wrap { grid-template-columns:1fr; width:100%; min-height:100vh; border-radius:0; border:none; }
  .login-left { display:none; }
  .login-right { padding:60px 28px 48px; min-height:100vh; justify-content:center; }
  .setup-box { width:100%; max-width:100%; min-height:100vh; border-radius:0; border:none; padding:32px 20px; }
  #layer-app { overflow:auto; }
  .sidebar { position:fixed; left:-100%; z-index:100; transition:left .25s; height:100%; }
  .sidebar.open { left:0; box-shadow:4px 0 24px rgba(0,0,0,.6); }
  .main { width:100%; }
  .topbar { padding:0 14px; gap:8px; }
  .topbar-search { min-width:0; flex:1; }
  .page-title { font-size:15px; }
  .content { padding:14px 12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .stat-val { font-size:22px; }
  .grid2 { grid-template-columns:1fr; }
  .card { overflow-x:auto; padding:14px; }
  table { min-width:460px; }
  .modal { width:calc(100vw - 24px); max-height:92vh; padding:20px 16px; border-radius:14px; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
  .modal-footer { flex-direction:column-reverse; }
  .modal-footer .btn { width:100%; justify-content:center; }
}

@media (max-width:768px) {
  #btn-hamburguer { display:flex !important; }
  .sidebar { position:fixed; left:-260px; z-index:100; transition:left .25s cubic-bezier(.4,0,.2,1); height:100%; width:260px; }
  .sidebar.open { left:0; box-shadow:4px 0 32px rgba(0,0,0,.7); }
}

/* Botão voltar: oculto no desktop, visível só no mobile via media query */
.chat-back-btn { display: none; }

/* ── CHAT MOBILE ── */
@media (max-width:768px) {
  /* Layout: 3 colunas vira 1 coluna empilhada */
  .chat-layout {
    grid-template-columns: 100% !important;
    grid-template-rows: 1fr;
    height: calc(100vh - 68px);
    position: relative;
    overflow: hidden;
  }
  /* Lista: ocupa tela inteira por padrão */
  .chat-list {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 2;
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  /* Janela de conversa: fora da tela à direita por padrão */
  .chat-window {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 3;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  /* Painel lateral: escondido no mobile */
  .chat-side {
    display: none !important;
  }
  /* Quando uma conversa está aberta: lista some, janela aparece */
  .chat-layout.chat-open .chat-list {
    transform: translateX(-100%);
  }
  .chat-layout.chat-open .chat-window {
    transform: translateX(0);
  }
  /* Botão voltar: aparece só no mobile */
  .chat-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #aebac1;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 13px;
    flex-shrink: 0;
  }
  /* Header do chat: compactar no mobile */
  .chat-top-actions {
    gap: 6px !important;
  }
  .chat-top-actions .btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}