:root{--bg:#0f1115;--card:#171a21;--card2:#1d212a;--line:#2a2f3a;--txt:#e6e8ec;
  --mut:#9aa3b2;--accent:#31c48d;--accentdim:#1f8b63;--red:#e04040;--amber:#f0b866;
  --blue:#7db4ff;--purple:#c99bf0;--green:#5fd6a0;--safe:env(safe-area-inset-bottom,0)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding-top:68px;padding-bottom:calc(60px + var(--safe));-webkit-font-smoothing:antialiased}
/* header */
.header-break{display:none}
@media(max-width:600px){.header-break{display:block;width:100%;height:0}.header-spacer{display:none}}
#header h1{margin:0;font-size:18px;white-space:nowrap;display:flex;align-items:center;gap:8px}
#header h1 .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
#back-btn{font-size:28px;font-weight:700;cursor:pointer;padding:6px 10px;color:var(--txt);flex:none;
  border-radius:8px;transition:color .15s,background .15s;display:none;
  line-height:1;text-decoration:none;min-width:44px;min-height:44px}
#back-btn.show{display:flex;align-items:center;justify-content:center}
#search{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);font-size:16px;min-width:140px}
#search::placeholder{color:var(--mut)}
#search.hidden,#search-wrap.hidden,#search-clear.hidden{display:none}
/* main content */
#content{padding:16px;padding-bottom:16px;max-width:840px;margin:0 auto}
.view{display:none}
.view.active{display:block}
.view h2{font-size:15px;color:var(--mut);margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em}
/* stats grid */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 14px;cursor:pointer;transition:border-color .15s;
  display:flex;flex-direction:column;justify-content:center;height:120px}
.stat-card:active{border-color:var(--accent)}
.stat-card .sc-num{font-size:32px;font-weight:700;line-height:1.1}
.stat-card .sc-label{font-size:12px;color:var(--mut);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.stat-card .sc-num{color:#f0a860}
.stat-card.stat-tasks{grid-column:1 / -1;background:linear-gradient(135deg,#1e3a5f 0%,#162447 100%);border-color:#89b4fa;min-height:100px;align-items:center;text-align:center}
.stat-card.stat-tasks .sc-num{color:#89b4fa;font-size:48px}
.stat-card.stat-tasks .sc-label{color:#b4d0f0;font-size:14px;letter-spacing:.08em}
.stat-card.stat-tasks .sc-sub{color:#89b4fa;font-size:13px;margin-top:4px}
.stat-card .sc-sub{font-size:11px;color:var(--mut);margin-top:2px}
/* sub-filter pills */
.subfilter{display:flex;gap:6px;margin-bottom:14px}
.subpill{padding:6px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);cursor:pointer;font-size:13px;
  user-select:none;transition:all .15s}
.subpill:hover:not(.active){border-color:var(--accent);color:#fff}
.subpill.active{background:var(--accentdim);border-color:var(--accent);color:#fff}
.hbtn{font-size:10px;font-weight:700;padding:3px 10px;border-radius:6px;
  border:1px solid var(--accent);background:var(--accentdim);color:#fff;
  cursor:pointer;margin-left:2px}
.hbtn:active{background:var(--accent)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;position:relative;word-break:break-word;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:5px;overflow-x:hidden}
.tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:5px;background:var(--card2);color:var(--mut)}
.tag.SMS,.tag.MMS{background:#132a4d;color:var(--blue)}
.tag.Voicemail{background:#3a2a12;color:var(--amber)}
.tag.Recording{background:#123a2a;color:var(--green)}
.tag.Call{background:#2a1a3a;color:var(--purple)}
.tag.Fax{background:#3a1220;color:#f08aa8}
.tag.Email{background:#1a2a3a;color:#7db4ff}
.tag.Contract{background:#3a1717;color:#ff8a8a}
.dir{font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--line)}
.dir.Inbound{color:var(--blue);border-color:#254a7d}
.dir.Outbound{color:var(--purple);border-color:#4a2a6d}
.num{font-weight:600;color:var(--txt);text-decoration:none;cursor:pointer}
.num:hover{text-decoration:underline;color:var(--accent)}
.when{color:var(--mut);font-size:12px}
.body-text{margin:4px 0;white-space:pre-wrap;word-break:break-word;font-size:14px}
audio{width:100%;height:36px}
.preview{color:var(--mut);font-size:12px;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.full{display:none;margin-top:8px;word-break:break-word;overflow-wrap:anywhere}
.card.exp{cursor:pointer}
.card.exp .chev{margin-left:auto;color:var(--mut);transition:transform .15s;flex:none;font-size:12px}
.card.exp.open .chev{transform:rotate(90deg)}
.card.exp.open .full{display:block}
.card.exp.open .preview{display:none}
.card.exp.open{background:var(--card2);border-left:3px solid var(--accent)}
.empty{color:var(--mut);text-align:center;padding:40px 20px}
.loading{color:var(--mut);text-align:center;padding:20px}
.badge-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
/* bottom nav */
#nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;
  background:rgba(23,26,33,.96);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:30px;padding:6px 10px;z-index:70}
.nav-btn{display:flex;flex-direction:row;align-items:center;
  justify-content:center;padding:12px 18px;color:var(--mut);font-size:10px;
  cursor:pointer;border:1px solid var(--line);border-radius:30px;
  background:var(--card2);gap:8px;
  transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;
  position:relative;min-height:48px}
.nav-btn:active{background:var(--accentdim)}
.nav-btn.active{color:var(--accent);border-color:var(--accent)}
.nav-icon{font-size:22px;line-height:1}
.nav-label{font-size:13px;font-weight:600}
/* toast */
#toast{position:fixed;left:50%;bottom:calc(50% - 30px);
  transform:translate(-50%,20px);background:#1c242f;
  border:1px solid #2c3644;color:var(--txt);padding:12px 20px;
  border-radius:12px;font-size:15px;opacity:0;transition:transform .25s,opacity .25s;
  z-index:120;max-width:85vw;text-align:center;white-space:nowrap;
  pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.5)}
#toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#toast a{color:#6fb4ff;font-weight:700;margin-left:14px}
/* urgent badges */
.urgent-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px}
.urgent-badge.callback{background:#3a2016;color:#f0a860}
.urgent-badge.cancel{background:#3a1717;color:#ff8a8a}
.urgent-badge.reschedule{background:#3a2a12;color:var(--amber)}
.cb-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px}
.cb-badge.ok{background:#123a2a;color:var(--green)}
.cb-badge.bad{background:#3a2016;color:#f0a860}
.vm-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px;background:#3a2a12;color:var(--amber)}
/* section headings */
.section-title{font-size:13px;color:var(--mut);text-transform:uppercase;
  letter-spacing:.05em;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* handled */
.card.handled{opacity:.55}
/* stalenes s indicator */
.stale-dot{position:absolute;top:8px;right:8px;width:16px;height:16px;
  border-radius:50%;background:var(--red);display:none;box-shadow:0 0 6px var(--red)}
.stale-dot.show{display:block;animation:stale-pulse 2s infinite}
@keyframes stale-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
/* overlay */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--bg);z-index:65;overflow-y:auto;overflow-x:hidden;
  padding-bottom:80px;-webkit-overflow-scrolling:touch}
.overlay-hdr{position:sticky;top:0;z-index:5;background:var(--bg);
  border-bottom:1px solid var(--line);padding:12px 16px;display:flex;
  align-items:center;gap:12px}
.overlay-hdr .back-btn{font-size:22px;cursor:pointer;color:var(--mut);
  padding:4px 8px;min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;background:none;border:none}
.overlay-hdr .title{font-size:18px;font-weight:700}
.overlay-hdr .close-btn{cursor:pointer;font-size:13px;font-weight:600;
  padding:8px 14px;border:1px solid var(--line);border-radius:8px;
  color:var(--accent);margin-left:auto;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;box-sizing:border-box}
.overlay-body{padding:16px;width:100%;max-width:840px;margin:0 auto;
  box-sizing:border-box;overflow-x:hidden}
/* email */
.email-item{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.email-item:hover{background:var(--card2)}
.email-item.unread{border-left:3px solid var(--accent);padding-left:11px}
.email-item .email-from{font-weight:600;font-size:14px;margin-bottom:2px}
.email-item .email-subject{font-size:13px;color:var(--txt);margin-bottom:2px}
.email-item .email-preview{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-item .email-date{font-size:11px;color:var(--mut);float:right}
.email-body{margin:16px 0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6}
.email-header{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.email-header .eh-subject{font-size:18px;font-weight:700;margin-bottom:8px}
.email-header .eh-meta{font-size:12px;color:var(--mut);margin-bottom:2px}
.email-actions{display:flex;gap:8px;margin-top:16px}
.email-btn{padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--txt);font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.email-btn.primary{border-color:var(--accent);background:var(--accentdim);color:#fff}
.compose-field{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--txt);font-size:14px;margin-bottom:8px;box-sizing:border-box;font-family:inherit}
.compose-body{min-height:120px;resize:vertical}
/* login guard */
.login-guard{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;
  background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center}
.login-guard .box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:32px 24px;text-align:center;max-width:360px;width:90%}
.login-guard .box h3{font-size:18px;margin:0 0 8px}
.login-guard .box p{font-size:14px;color:var(--mut);margin:0 0 16px}
.login-guard select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);color:var(--txt);font-size:15px;margin-bottom:12px}
.login-guard button{width:100%;padding:12px;border:none;border-radius:10px;
  background:var(--accentdim);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
/* chat */
#chat-input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);color:var(--txt);font-size:14px;resize:vertical;min-height:100px;font-family:inherit}
#chat-input::placeholder{color:var(--mut)}
#chat-submit{width:100%;padding:12px;border:none;border-radius:10px;
  background:var(--accentdim);color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:8px}
#chat-result{margin-top:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  white-space:pre-wrap;font-size:13px;min-height:40px}
#chat-result .tts-result{white-space:normal}
#chat-result .tts-count{font-weight:600;margin-bottom:10px;font-size:14px}
#chat-result .tts-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
#chat-result .tts-table th{text-align:left;padding:6px 8px;background:var(--card2);border-bottom:2px solid var(--line);font-weight:600;color:var(--mut);position:sticky;top:0}
#chat-result .tts-table td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top;word-break:break-word}

/* dropdown menus (tools, user, contacts) */
.dropdown{display:none;position:absolute;top:56px;right:16px;background:var(--card2);
  border:1px solid var(--line);border-radius:10px;padding:6px 0;z-index:65;
  min-width:180px;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.dropdown div{padding:12px 16px;cursor:pointer;font-size:14px;color:var(--txt);
  min-height:44px;display:flex;align-items:center}
.dropdown div:hover{background:var(--card)}