:root{
  --bg:#0b0f14;
  --surface:#111824;
  --surface2:#162033;
  --text:#eaf0ff;
  --muted:#a8b3cf;
  --accent:#3b82f6;
  --danger:#ef4444;
  --ok:#22c55e;
  --outline:#25314a;
  --pad:#ffffff;
  --key:#f1f5f9;
  --keyPressed:#e2e8f0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 18% 10%, var(--surface2) 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.hidden{display:none !important}

/* Before app.js runs, hide login if this tab already has a JWT (avoids login flash on refresh). */
html.has-session-token #screenLogin{display:none !important}
html.has-session-token #screenApp.hidden{display:block !important}

.sdkBanner{
  position:fixed;top:0;left:0;right:0;z-index:10000;
  padding:10px 14px;text-align:center;font-size:13px;font-weight:650;
  background:rgba(239,68,68,.92);color:#fff;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.appVoiceError{
  margin-bottom:12px;padding:10px 12px;border-radius:12px;
  background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.4);
  color:#fecaca;font-size:13px;font-weight:650;
}

/* ----- Login screen (distinct from app) ----- */
.loginScreen{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(59,130,246,.12), transparent 55%),
    radial-gradient(700px 400px at 10% 80%, rgba(22,32,51,.9), var(--bg));
}
.loginCard{
  width:100%;
  max-width:420px;
  padding:28px 24px 22px;
  border-radius:22px;
  border:1px solid rgba(37,49,74,.85);
  background:linear-gradient(165deg, rgba(17,24,36,.98), rgba(11,15,20,.94));
  box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.loginBrand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.loginLogo{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;letter-spacing:-1px;
  background:linear-gradient(145deg, rgba(59,130,246,1), rgba(37,99,235,.85));
  color:#fff;
  box-shadow:0 10px 30px rgba(59,130,246,.35);
}
.loginTitle{font-size:22px;font-weight:800;letter-spacing:.2px}
.loginSubtitle{font-size:13px;color:var(--muted);margin-top:4px}
.loginHint{font-size:13px;line-height:1.45;color:rgba(234,240,255,.78);margin:0 0 16px}
.loginFields{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.otpLabel{margin:4px 0 0}
#otpCode{letter-spacing:0.4em;font-size:18px;font-weight:800;text-align:center}
.loginBtn{width:100%;padding:14px 16px;border-radius:14px;margin-top:4px;font-size:15px}
.loginFoot{margin:16px 0 0;text-align:center}
.loginError{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fecaca;
  padding:10px 12px;border-radius:12px;font-size:13px;margin-bottom:10px;
}

/* ----- App shell ----- */
.wrap{max-width:1060px;margin:0 auto;padding:28px 16px 40px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:6px}
.brand h1{font-size:24px;letter-spacing:.2px;margin:0;font-weight:750}
.topActions{display:flex;align-items:center;gap:10px}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(59,130,246,.55);
  background:rgba(59,130,246,.12);
  font-weight:650;font-size:12.5px;
}
.dot{width:9px;height:9px;border-radius:99px;background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.dot.off{background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.14)}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }

.appTabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;
}
.tabBtn{
  padding:10px 16px;border-radius:12px;font-size:13px;font-weight:750;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--text);
}
.tabBtn:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4)}
.tabBtn.active{
  background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 1px rgba(59,130,246,.2) inset;
}
.tabPanel{display:block}
.tabPanel.hidden{display:none !important}

.sessionCard{margin-top:14px}

.wrapRow{flex-wrap:wrap;gap:10px;align-items:center}
.contactsForm input{max-width:220px;flex:1;min-width:140px}
.contactsWrap{overflow:auto;max-height:420px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22)}
.contactsTable{width:100%;border-collapse:collapse;font-size:13px}
.contactsTable th,.contactsTable td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.contactsTable th{
  color:rgba(234,240,255,.75);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  position:sticky;top:0;background:rgba(11,15,20,.95);z-index:1;
}
.contactsTable .btnCallSmall{
  padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;
  background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.45);color:var(--text);
  margin-right:6px;
}
.contactsTable .btnDelSmall{
  padding:6px 10px;border-radius:10px;font-size:12px;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);
}
.historyCardFlat{margin-top:0}

.card{
  background:linear-gradient(180deg, rgba(17,24,36,.92), rgba(17,24,36,.72));
  border:1px solid rgba(37,49,74,.72);
  border-radius:18px;
  padding:16px;
  box-shadow:0 16px 60px rgba(0,0,0,.5);
}
.card h2{margin:0 0 10px;font-size:14px;letter-spacing:.18px;text-transform:uppercase;color:rgba(234,240,255,.86)}

.row{display:flex;gap:10px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}
.spacer{flex:1}

input,button{font:inherit}
input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:12px 12px;
  border-radius:14px;
  outline:none;
}
input:focus{border-color:rgba(59,130,246,.65);box-shadow:0 0 0 4px rgba(59,130,246,.14)}

button{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:750;
  color:var(--text);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
button.primary{
  background:linear-gradient(180deg, rgba(59,130,246,1), rgba(59,130,246,.86));
  border-color:rgba(59,130,246,.75);
}
button.danger{
  background:rgba(239,68,68,.16);
  border-color:rgba(239,68,68,.35);
}
button:disabled{opacity:.55;cursor:not-allowed}

.muted{color:var(--muted)}
.small{font-size:12.5px;line-height:1.35}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.pad{
  background:var(--pad);
  border-radius:18px;
  padding:14px;
  color:#0f172a;
}
.pad .muted{color:#64748b}
.pad .dialHint strong{color:#0f172a}
.dialDisplay{
  display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px
}
.dialDisplay .num{
  font-size:22px;font-weight:800;letter-spacing:.25px
}
.dialDisplay .sub{font-size:12.5px;color:#64748b;font-weight:700}

.keys{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
.key{
  user-select:none;
  height:56px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--key);
  border:1px solid rgba(15,23,42,.08);
  font-weight:850;
  font-size:20px;
}
.key:active{background:var(--keyPressed)}

.log{
  height:320px;overflow:auto;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
}
.logLine{font-size:12.5px;line-height:1.35;color:rgba(234,240,255,.86)}
.logLine b{color:var(--text)}

/* ----- Incoming overlay ----- */
.incomingOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  padding:20px;
}
.incomingCard{
  width:100%;max-width:420px;
  border-radius:20px;
  padding:22px;
  border:1px solid rgba(59,130,246,.35);
  background:linear-gradient(180deg, rgba(17,24,36,.98), rgba(11,15,20,.95));
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.incomingLabel{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800}
.callModalSubtitle{font-size:20px;font-weight:700;margin:8px 0 4px;line-height:1.25}
.callModalDetail{font-size:13px;color:var(--muted);margin-bottom:12px;word-break:break-all;line-height:1.35}
.callModalTimer{font-size:28px;font-weight:800;margin:6px 0 14px;letter-spacing:.06em;color:var(--accent)}
.incomingRow{display:flex;gap:12px}
.incomingAccept,.incomingDecline{flex:1;padding:14px}
.incomingHangup{width:100%;padding:14px}

.contactsSearch{
  width:100%;max-width:420px;padding:10px 12px;margin-bottom:10px;border-radius:12px;
  border:1px solid var(--outline);background:var(--surface2);color:var(--text);font-size:13px
}
.waSearchFull{max-width:none}

.waPeerTitleWrap{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.waPeerName{font-size:15px;font-weight:700;line-height:1.2}
.waPeerSub{font-size:12.5px;opacity:.85;line-height:1.25;word-break:break-all}

.historyCard{margin-top:14px}
.historyCardFlat h2{margin:0}
.historyHead{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px
}
.historyHead h2{margin:0}
.historyRefresh{
  margin-left:auto;padding:8px 12px;border-radius:10px;font-size:12.5px;
  background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.45);
  color:var(--text);
}
.historyWrap{
  overflow:auto;max-height:360px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.historyTable{
  width:100%;border-collapse:collapse;font-size:12.5px;
}
.historyTable th,
.historyTable td{
  text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.historyTable th{
  color:rgba(234,240,255,.75);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;
  position:sticky;top:0;background:rgba(11,15,20,.95);z-index:1;
}
.historyTable tr:last-child td{border-bottom:none}
.historyTable .dirIn{color:#7dd3fc;font-weight:700}
.historyTable .dirOut{color:#a7f3d0;font-weight:700}
.historyEmpty td{color:var(--muted);text-align:center;padding:20px}
@media (max-width: 700px){
  .historyTable th:nth-child(4),
  .historyTable td:nth-child(4),
  .historyTable th:nth-child(6),
  .historyTable td:nth-child(6){display:none}
}

/* WhatsApp */
.waLayout{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width:900px){
  .waLayout{grid-template-columns:1fr}
}
.waSidebarHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.waH2{margin:0;font-size:1.1rem}
.waPickerLabel{display:block;margin:6px 0 4px}
.waPicker{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--outline);
  background:var(--surface2);color:var(--text);font-size:13px;margin-bottom:10px
}
.waConvList{
  max-height:min(52vh,480px);
  overflow:auto;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
}
.waConvItem{
  width:100%;text-align:left;padding:10px 12px;border:none;border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;color:var(--text);cursor:pointer;font-size:13px;
}
.waConvItem:hover{background:rgba(59,130,246,.1)}
.waConvItem.active{background:rgba(59,130,246,.2);border-left:3px solid var(--accent)}
.waConvItemTop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.waUnreadBadge{
  flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:#22c55e;color:#052e16;font-size:11px;font-weight:700;line-height:20px;text-align:center
}
.waConvPrimary{font-weight:700;font-size:12.5px;word-break:break-word;flex:1;min-width:0;line-height:1.25}
.waConvSecondary{font-size:11.5px;margin-top:2px;opacity:.9}
.waConvPeer{font-weight:700;font-size:12.5px;word-break:break-all;flex:1;min-width:0}
.waConvPrev{color:var(--muted);font-size:12px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.waMain{display:flex;flex-direction:column;min-height:min(70vh,640px)}
.waChatHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)
}
.waPeerTitle{font-size:14px;font-weight:700}
.waChatActions{display:flex;gap:8px}
.btnSmall{padding:8px 12px;border-radius:10px;font-size:12.5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);cursor:pointer}
.btnSmall.danger{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45)}
.waThread{
  flex:1;overflow:auto;padding:10px 4px;border-radius:14px;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);margin-bottom:12px;display:flex;flex-direction:column;gap:8px
}
.waBubble{
  max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.45;
  word-break:break-word;
}
.waBubble.in{align-self:flex-start;background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.35)}
.waBubble.out{align-self:flex-end;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.35)}
.waMeta{font-size:11px;color:var(--muted);margin-top:6px}
.waImg{max-width:min(100%,280px);border-radius:10px;display:block;margin-top:8px;background:rgba(0,0,0,.3)}
.waComposer textarea{
  width:100%;resize:vertical;min-height:52px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--outline);background:var(--surface2);color:var(--text);font:inherit;margin-bottom:8px
}
.waComposerRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.contactsTable .btnWaSmall{
  padding:6px 8px;border-radius:8px;font-size:11.5px;margin-left:4px;
  background:rgba(37,211,102,.2);border:1px solid rgba(37,211,102,.45);color:var(--text);cursor:pointer
}