:root{
  --blue:#1d63ff;
  --blue2:#4a8cff;
  --blue3:#dce7ff;
  --green:#22c55e;
  --bg:#edf3ff;
  --panel:#ffffff;
  --line:#d8e3fb;
  --text:#15213f;
  --muted:#697896;
  --mine:#dfe9ff;
  --other:#ffffff;
  --danger:#ef4444;
  --shadow:0 18px 60px rgba(28,59,119,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;overflow:hidden}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button,input{font:inherit}
button{border:0;background:none;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
input{border:0;outline:0;background:#f5f8ff;border-radius:999px;padding:13px 15px;min-width:0;color:var(--text)}
.hidden{display:none!important}
.mobile-only{display:none!important}

.loader{position:fixed;inset:0;z-index:50;display:grid;place-content:center;gap:12px;text-align:center;background:radial-gradient(circle at top,#c7dbff,transparent 36%),linear-gradient(145deg,#f8fbff,#e6efff)}
.loader-logo,.brand-dot{width:76px;height:76px;border-radius:28px;display:grid;place-items:center;margin:auto;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-weight:950;font-size:38px;box-shadow:0 24px 60px rgba(29,99,255,.28)}
.loader h1{margin:0}
.loader p{margin:0;color:var(--muted)}

.app{height:100dvh;overflow:hidden}
.auth-screen{height:100dvh;display:grid;place-items:center;padding:18px}
.auth-card{width:min(430px,100%);display:grid;gap:13px;padding:30px;border-radius:34px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.95)}
.auth-card h1{margin:4px 0 0;font-size:32px;line-height:1.05}
.auth-card p,.auth-card small{margin:0;color:var(--muted)}
.auth-card input{background:#f7faff;border:1px solid #d9e4ff;border-radius:18px}
.primary,.secondary{border-radius:18px;padding:14px 16px;font-weight:900}
.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 14px 30px rgba(29,99,255,.22)}
.secondary{background:#edf3ff;color:var(--blue)}

.shell{height:100dvh;display:grid;grid-template-columns:360px minmax(0,1fr);background:#dfe9ff;overflow:hidden}
.left-pane,.chat-pane{min-height:0}
.left-pane{background:var(--panel);border-right:1px solid var(--line);min-width:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto}
.wa-top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f7faff;border-bottom:1px solid var(--line)}
.wa-top b{font-size:22px}
.wa-top small,.chat-head small{display:block;color:var(--muted);font-size:12px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eef4ff;font-size:18px;color:var(--blue)}
.search-wrap{display:flex;gap:8px;padding:12px}
.search-wrap input{flex:1}
.mini-btn{padding:0 14px;border-radius:999px;background:var(--blue);color:#fff;font-weight:800}
.list-title{padding:0 16px 8px;color:var(--blue);font-weight:900}
.side-list{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding:0 8px 12px;min-height:0}
.row{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 8px;border-radius:16px;cursor:pointer}
.row:hover,.row.active{background:#edf3ff}
.row h3{margin:0;font-size:16px}
.row p{margin:4px 0 0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.row time{font-size:11px;color:var(--muted)}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d8e5ff,#fff);font-weight:950;position:relative;color:var(--blue)}
.avatar.online:after{content:"";position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:3px solid #fff}
.empty-mini{margin:20px;color:var(--muted);text-align:center;line-height:1.45}

.chat-pane{display:grid;grid-template-rows:64px minmax(0,1fr) auto;min-width:0;background-color:#eff4ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23111' stroke-width='2' opacity='.16'%3E%3Ccircle cx='28' cy='26' r='15' fill='%23fff'/%3E%3Ccircle cx='23' cy='22' r='1.6' fill='%23111'/%3E%3Ccircle cx='33' cy='22' r='1.6' fill='%23111'/%3E%3Cpath d='M22 30c2.4 3 11.6 3 14 0'/%3E%3Ccircle cx='80' cy='64' r='15' fill='%23fff'/%3E%3Ccircle cx='75' cy='60' r='1.6' fill='%23111'/%3E%3Ccircle cx='85' cy='60' r='1.6' fill='%23111'/%3E%3Cpath d='M74 68c2.4 3 11.6 3 14 0'/%3E%3Ccircle cx='48' cy='89' r='12' fill='%23fff'/%3E%3Ccircle cx='44' cy='85' r='1.4' fill='%23111'/%3E%3Ccircle cx='52' cy='85' r='1.4' fill='%23111'/%3E%3Cpath d='M42 93c2 2.5 10 2.5 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.chat-head{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#f7faff;border-bottom:1px solid var(--line)}
.chat-titlebox{min-width:0;flex:1}
.chat-titlebox b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-actions{display:flex;gap:8px}
.messages{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding:18px;display:flex;flex-direction:column;gap:8px;min-height:0;scroll-behavior:smooth}
.empty-state{margin:auto;max-width:360px;text-align:center;color:var(--muted);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.88);padding:24px;border-radius:24px;backdrop-filter:blur(6px)}
.empty-state div{font-size:42px}
.empty-state b{display:block;color:var(--text);font-size:18px}
.bubble{max-width:min(680px,78%);padding:9px 11px 7px;border-radius:16px;background:var(--other);box-shadow:0 2px 10px rgba(10,35,90,.06);white-space:pre-wrap;word-break:break-word;line-height:1.36;border:1px solid rgba(216,227,251,.7)}
.bubble.mine{align-self:flex-end;background:var(--mine)}
.bubble small{display:block;text-align:right;color:#63728d;font-size:10px;margin-top:4px}
.send-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;background:#f7faff;border-top:1px solid var(--line)}
.send-bar input{flex:1;background:#fff;border:1px solid var(--line)}
.round-btn,.send-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#edf4ff;color:var(--blue)}
.send-btn{background:var(--blue);color:#fff;font-weight:900}
.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);padding:7px 6px;box-shadow:0 -10px 26px rgba(10,35,90,.06);z-index:20}.nav-tab{display:grid;place-items:center;gap:2px;color:#6f7d9d;border-radius:16px;padding:6px 0}.nav-tab span{font-size:20px}.nav-tab small{font-size:11px}.nav-tab.active{color:var(--blue);background:#edf3ff}

.call-overlay{position:fixed;inset:0;background:rgba(5,18,53,.62);backdrop-filter:blur(10px);z-index:80;display:grid;place-items:center;padding:16px}
.call-card{width:min(520px,100%);background:#0e1f4d;color:#fff;border-radius:34px;box-shadow:0 30px 90px #0009;overflow:hidden;text-align:center}
.call-top{padding:28px 22px 16px}
.call-avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(135deg,var(--blue2),var(--blue));font-size:38px;font-weight:950}
.call-card h2{margin:14px 0 6px}
.call-card p{margin:0;color:#c9d7ff}
.video-stage{position:relative;background:#000;aspect-ratio:16/10}
.video-stage video:first-child{width:100%;height:100%;object-fit:cover;background:#000}
.video-stage video:last-child{position:absolute;right:14px;bottom:14px;width:32%;max-width:160px;border-radius:18px;border:2px solid rgba(255,255,255,.75);background:#111}
.call-controls{display:flex;gap:12px;justify-content:center;padding:18px}
.call-accept,.call-decline{padding:14px 20px;border-radius:999px;color:#fff;font-weight:900}
.call-accept{background:var(--green)}
.call-decline{background:var(--danger)}

.profile-card{margin:12px;padding:18px;border-radius:22px;background:#fff;box-shadow:0 4px 20px rgba(10,35,90,.06)}
.profile-card h3{margin:0 0 8px}
.profile-card p{margin:0 0 14px;color:var(--muted);line-height:1.45}
.profile-card button{display:block;width:100%;margin:8px 0;padding:13px;border-radius:16px;background:#edf3ff;color:var(--blue);font-weight:900}
.profile-card button.danger2{background:#fee2e2;color:#b91c1c}
.call-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.call-shortcuts button{margin:0}

.side-list::-webkit-scrollbar,.messages::-webkit-scrollbar{width:9px}
.side-list::-webkit-scrollbar-thumb,.messages::-webkit-scrollbar-thumb{background:#cfdbfb;border-radius:20px}
.side-list::-webkit-scrollbar-track,.messages::-webkit-scrollbar-track{background:transparent}

@media(max-width:820px){
  html,body{overflow:hidden}
  .mobile-only{display:grid!important}
  .shell{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .left-pane{grid-column:1;grid-row:1;border-right:0}
  .chat-pane{grid-column:1;grid-row:1;display:none}
  .shell.chat-open .left-pane{display:none}
  .shell.chat-open .chat-pane{display:grid}
  .wa-top{height:58px}
  .bottom-nav{padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .row{grid-template-columns:50px minmax(0,1fr) auto}
  .row p{max-width:56vw}
  .chat-head{height:58px}
  .messages{padding:12px 10px 10px}
  .bubble{max-width:86%;font-size:15px}
  .send-bar{padding:8px 10px 8px calc(10px + env(safe-area-inset-left))}
  .auth-card{border-radius:28px}
  .auth-card h1{font-size:30px}
  .call-card{height:min(720px,92dvh);display:flex;flex-direction:column}
  .video-stage{flex:1;aspect-ratio:auto}
  .call-controls{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

:root[data-theme="light"]{--blue:#2563eb;--blue2:#60a5fa;--bg:#f8fbff;--panel:#ffffff;--line:#e5edf9;--text:#111827;--muted:#667085;--mine:#dbeafe;--other:#ffffff;--shadow:0 18px 60px rgba(31,41,55,.10)}
:root[data-theme="dark"]{--blue:#60a5fa;--blue2:#2563eb;--bg:#07111f;--panel:#0f1b2d;--line:#223149;--text:#edf5ff;--muted:#9fb0c8;--mine:#123b74;--other:#16243a;--shadow:0 18px 60px rgba(0,0,0,.35)}
:root[data-theme="violet"]{--blue:#7c3aed;--blue2:#a78bfa;--bg:#f3efff;--panel:#ffffff;--line:#e1d7ff;--text:#241343;--muted:#75658d;--mine:#ede9fe;--other:#ffffff;--shadow:0 18px 60px rgba(91,33,182,.16)}
:root[data-theme="green"]{--blue:#059669;--blue2:#34d399;--bg:#eafaf4;--panel:#ffffff;--line:#cceee1;--text:#10231f;--muted:#61776f;--mine:#d1fae5;--other:#ffffff;--shadow:0 18px 60px rgba(5,150,105,.14)}
:root[data-theme="dark"] .wa-top,
:root[data-theme="dark"] .chat-head,
:root[data-theme="dark"] .send-bar,
:root[data-theme="dark"] .bottom-nav{background:#0f1b2d}
:root[data-theme="dark"] input,
:root[data-theme="dark"] .send-bar input{background:#101f35;color:var(--text);border-color:#263a59}
:root[data-theme="dark"] .profile-card,
:root[data-theme="dark"] .empty-state{background:rgba(15,27,45,.92);border-color:#243956}
:root[data-theme="dark"] .chat-pane{background-color:#0a1322}
.settings-title{margin-top:16px!important}
.settings-note{font-size:12px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 14px}
.theme-choice{margin:0!important;border:1px solid var(--line)!important;background:#f7faff!important;color:var(--text)!important}
.theme-choice.active{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
:root[data-theme="dark"] .theme-choice{background:#101f35!important;color:var(--text)!important}

.brand-subtitle{margin-top:-8px;font-size:12px;color:#6b7280}.brand-dot{font-size:12px;font-weight:800;letter-spacing:.4px}

/* NMS release theme fix */
html[data-theme="blue"],
body[data-theme="blue"],
.theme-blue {
  --bg:#071426;
  --card:#0d2342;
  --text:#eef6ff;
  --muted:#9db3d1;
  --blue:#2f80ff;
  --blue2:#00c2ff;
  --mine:#123d72;
  --other:#10243f;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  background:
    radial-gradient(circle at 20% 0%, rgba(47,128,255,.35), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(0,194,255,.24), transparent 30%),
    var(--bg) !important;
  color:var(--text) !important;
}

html[data-theme="light"],
body[data-theme="light"],
.theme-light {
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101827;
  --muted:#8b93a3;
  --blue:#3168f5;
  --blue2:#6b7cff;
  --mine:#e8faee;
  --other:#ffffff;
  --shadow:0 24px 64px rgba(15,23,42,.10);
  background:var(--bg) !important;
  color:var(--text) !important;
}

html[data-theme="blue"] .panel,
html[data-theme="blue"] .card,
html[data-theme="blue"] .sidebar,
html[data-theme="blue"] .chat,
html[data-theme="blue"] .modal,
body[data-theme="blue"] .panel,
body[data-theme="blue"] .card,
body[data-theme="blue"] .sidebar,
body[data-theme="blue"] .chat,
body[data-theme="blue"] .modal {
  background:rgba(13,35,66,.92) !important;
  color:var(--text) !important;
  border-color:rgba(120,180,255,.18) !important;
}

/* NMS release theme fix */
html[data-theme="blue"],
body[data-theme="blue"],
.theme-blue {
  --bg:#071426;
  --card:#0d2342;
  --text:#eef6ff;
  --muted:#9db3d1;
  --blue:#2f80ff;
  --blue2:#00c2ff;
  --mine:#123d72;
  --other:#10243f;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  background:
    radial-gradient(circle at 20% 0%, rgba(47,128,255,.35), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(0,194,255,.24), transparent 30%),
    var(--bg) !important;
  color:var(--text) !important;
}

html[data-theme="light"],
body[data-theme="light"],
.theme-light {
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101827;
  --muted:#8b93a3;
  --blue:#3168f5;
  --blue2:#6b7cff;
  --mine:#e8faee;
  --other:#ffffff;
  --shadow:0 24px 64px rgba(15,23,42,.10);
  background:var(--bg) !important;
  color:var(--text) !important;
}

html[data-theme="blue"] .panel,
html[data-theme="blue"] .card,
html[data-theme="blue"] .sidebar,
html[data-theme="blue"] .chat,
html[data-theme="blue"] .modal,
body[data-theme="blue"] .panel,
body[data-theme="blue"] .card,
body[data-theme="blue"] .sidebar,
body[data-theme="blue"] .chat,
body[data-theme="blue"] .modal {
  background:rgba(13,35,66,.92) !important;
  color:var(--text) !important;
  border-color:rgba(120,180,255,.18) !important;
}

/* NMS update 100: visibly different light/blue themes */
html[data-theme="blue"], body[data-theme="blue"], .theme-blue {
  --bg:#071426; --card:#0d2342; --text:#eef6ff; --muted:#9db3d1;
  --blue:#2f80ff; --blue2:#00c2ff; --mine:#123d72; --other:#10243f;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  background:radial-gradient(circle at 20% 0%, rgba(47,128,255,.35), transparent 34%),radial-gradient(circle at 90% 20%, rgba(0,194,255,.24), transparent 30%),var(--bg) !important;
  color:var(--text) !important;
}
html[data-theme="light"], body[data-theme="light"], .theme-light {
  --bg:#f6f7fb; --card:#ffffff; --text:#101827; --muted:#8b93a3;
  --blue:#3168f5; --blue2:#6b7cff; --mine:#e8faee; --other:#ffffff;
  --shadow:0 24px 64px rgba(15,23,42,.10);
  background:var(--bg) !important; color:var(--text) !important;
}
html[data-theme="blue"] .panel, html[data-theme="blue"] .card, html[data-theme="blue"] .sidebar,
html[data-theme="blue"] .chat, html[data-theme="blue"] .modal,
body[data-theme="blue"] .panel, body[data-theme="blue"] .card, body[data-theme="blue"] .sidebar,
body[data-theme="blue"] .chat, body[data-theme="blue"] .modal {
  background:rgba(13,35,66,.92) !important; color:var(--text) !important; border-color:rgba(120,180,255,.18) !important;
}


/* NMS hotfix: visual difference between light and blue themes, no version bump */
html[data-theme="blue"], body[data-theme="blue"], .theme-blue{
  --bg:#eef5ff;
  --card:#ffffff;
  --text:#071b3a;
  --muted:#6c7fa3;
  --blue:#1d6fff;
  --blue2:#5aa7ff;
  --mine:#dbeafe;
  --other:#ffffff;
  background: radial-gradient(circle at 20% 0%, rgba(29,111,255,.18), transparent 32%), linear-gradient(180deg,#eef5ff 0%,#f8fbff 100%) !important;
}
html[data-theme="light"], body[data-theme="light"], .theme-light{
  --bg:#f7f7f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#7b8190;
  --blue:#2563eb;
  --blue2:#6366f1;
  --mine:#eefdf3;
  --other:#ffffff;
}

/* UPDATE_110_STABLE_UI */
.nms-guest-landing{padding:18px;display:block}.nms-landing-card{max-width:920px;margin:0 auto 18px;padding:28px;border-radius:28px;background:linear-gradient(135deg,#0f172a,#123b88 55%,#22c1ff);color:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden;position:relative}.nms-landing-card:after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:999px;background:rgba(255,255,255,.16)}.nms-landing-top{display:flex;justify-content:space-between;gap:12px;align-items:center;opacity:.96}.nms-landing-top span{padding:6px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.12)}.nms-landing-card h1{font-size:clamp(30px,5vw,58px);line-height:.98;margin:28px 0 14px;letter-spacing:-.04em}.nms-landing-card p{max-width:650px;font-size:17px;opacity:.9}.nms-landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:22px 0}.nms-landing-grid span{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px)}.nms-landing-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.nms-oauth,.nms-login-scroll{appearance:none;border:0;border-radius:16px;padding:13px 18px;font-weight:800;text-decoration:none;cursor:pointer}.nms-ya{background:#ffd633;color:#111827}.nms-login-scroll{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}.nms-push-hint{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9999;border:0;border-radius:999px;padding:13px 16px;background:#2563eb;color:white;font-weight:800;box-shadow:0 16px 48px rgba(37,99,235,.35)}
body.theme-blue,[data-theme="blue"],html[data-theme="blue"]{--bg:#eef6ff;--card:#ffffff;--text:#071735;--muted:#557094;--blue:#0b7cff;--blue2:#00b4ff;--mine:#dff0ff;--other:#ffffff;background:radial-gradient(circle at top left,#dbeafe 0,#eef6ff 42%,#f8fbff 100%)!important}body.theme-light,[data-theme="light"],html[data-theme="light"]{--bg:#f7f7fb;--card:#ffffff;--text:#111827;--muted:#7b8496;--blue:#3168f5;--blue2:#6b7cff;--mine:#e8faee;--other:#ffffff}
@media(max-width:700px){.nms-guest-landing{padding:12px}.nms-landing-card{border-radius:22px;padding:22px}.nms-landing-actions>*{flex:1;text-align:center}.nms-push-hint{left:16px;right:16px}}