/* ============================================================
   CUNNACT Dashboard v2 — Stitch "Connective Clarity" layout
   Additive only: never removes/renames classes app.js depends on.
   ============================================================ */

/* ---- Shell: persistent top bar + body row ---- */
.app-shell{ display:flex; flex-direction:column; height:100dvh; }
.app-shell-body{ flex:1; min-height:0; display:grid; grid-template-columns:var(--nav-rail,74px) var(--sidebar,350px) minmax(0,1fr); }

.app-topbar{
  flex:none; height:64px; display:flex; align-items:center; gap:18px;
  padding:0 22px; background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  border-bottom:1px solid var(--border); backdrop-filter:blur(18px); position:relative; z-index:400;
}
.app-topbar-left{ display:flex; align-items:center; gap:10px; flex:none; }
.app-topbar-logo{ width:30px; height:30px; border-radius:9px; display:block; }
.app-topbar-name{ font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.app-topbar-tagline{
  display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:var(--surface-3); color:var(--ink-faint); font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.app-topbar-tagline i{ width:7px; height:7px; border-radius:50%; background:var(--online); box-shadow:0 0 0 3px color-mix(in srgb,var(--online) 15%,transparent); }
.app-topbar-search{
  flex:1; max-width:440px; margin:0 auto; position:relative; display:flex; align-items:center;
  height:40px; border-radius:12px; background:var(--surface-3); padding:0 44px 0 38px;
  color:var(--ink-faint); transition:background .16s var(--ease), box-shadow .16s var(--ease);
}
.app-topbar-search svg{ position:absolute; left:12px; width:16px; height:16px; pointer-events:none; }
.app-topbar-search input{ width:100%; height:100%; border:0; background:transparent; outline:0; font-size:12.5px; color:var(--ink); }
.app-topbar-search input::placeholder{ color:var(--ink-faint); }
.app-topbar-search:focus-within{ background:var(--surface-2); box-shadow:0 0 0 3px var(--accent-soft); }
.app-topbar-search kbd{
  position:absolute; right:10px; padding:3px 7px; border-radius:7px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--ink-faint); font-size:10px; font-weight:700; font-family:var(--font);
}
.app-topbar-right{ flex:none; display:flex; align-items:center; gap:6px; }
.app-topbar-right .avatar{ width:32px; height:32px; }

/* ---- Nav rail polish ---- */
.nav-rail{ background:color-mix(in srgb,var(--surface-2) 94%,transparent); }
.nav-rail-btn.active{
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  border-color:transparent; box-shadow:0 8px 20px var(--accent-soft);
}

/* ---- "Chats  N Active" heading ---- */
.chats-heading{ display:flex; align-items:baseline; gap:9px; }
.chats-heading strong{ font-family:var(--font-display); font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.chats-heading em{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.03em; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:999px;
}

/* ---- Filter pill row ---- */
.chat-filter-pills{ display:flex; align-items:center; gap:7px; margin:10px 2px 2px; overflow-x:auto; }
.filter-pill{
  flex:none; display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 12px;
  border-radius:999px; background:var(--surface-3); color:var(--ink-soft); font-size:11px; font-weight:700;
  transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
  white-space:nowrap;
}
.filter-pill em{
  font-style:normal; font-size:9.5px; font-weight:800; opacity:.8;
}
.filter-pill:hover{ transform:translateY(-1px); }
.filter-pill.active{
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  box-shadow:0 6px 16px var(--accent-soft);
}
.filter-pill.active em{ opacity:1; }

/* ---- 24h Stories strip ---- */
.stories-strip{ padding:12px 2px 4px; }
.stories-strip-head{ display:flex; align-items:center; justify-content:space-between; padding:0 2px 8px; }
.stories-strip-head span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-faint); font-weight:800; }
.stories-strip-head button{ font-size:10px; font-weight:800; color:var(--accent); background:none; border:0; cursor:pointer; }
.stories-strip-track{ display:flex; align-items:flex-start; gap:13px; overflow-x:auto; padding:2px 2px 6px; }
.story-chip{ flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; width:58px; background:none; border:0; cursor:pointer; }
.story-ring{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,#7653FA 0%,#2376FC 52%,#01B3D9 100%);
  padding:2px; transition:transform .16s var(--ease);
}
.story-ring.seen{ background:var(--surface-3); }
.story-ring.add{ background:var(--surface-3); }
.story-chip:hover .story-ring{ transform:scale(1.05); }
.story-ring-inner{
  width:100%; height:100%; border-radius:50%; background:var(--surface); display:grid; place-items:center;
  overflow:hidden; color:var(--accent); font-weight:800; font-size:15px;
}
.story-ring-inner img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.story-ring-inner svg{ width:18px; height:18px; }
.story-chip small{ font-size:9.5px; font-weight:700; color:var(--ink-soft); max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stories-strip-dynamic{ display:flex; align-items:flex-start; gap:13px; }
.stories-strip[hidden], .stories-strip.is-empty{ display:none; }

/* ---- Chat list rows: elevated / rounded-2xl polish ---- */
.chat-item{ border-radius:16px; }
.chat-item.active{
  background:var(--surface-2); box-shadow:0 1px 0 0 var(--border) inset, var(--shadow-sm);
}
.chat-item.is-pinned{ position:relative; }

/* ---- Group Info drawer (profile-drawer) polish ---- */
.profile-drawer{ width:min(400px,92vw); }
.profile-drawer-avatar{ width:96px; height:96px; border-radius:28px; box-shadow:var(--shadow-md); }
.profile-drawer-avatar .avatar-fallback{ font-size:30px; border-radius:28px; }
.drawer-stats-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0 6px; }
.drawer-stats-row .stat-card{
  text-align:center; padding:12px 8px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2);
}
.drawer-stats-row .stat-card strong{ display:block; font-family:var(--font-display); font-size:19px; color:var(--ink); }
.drawer-stats-row .stat-card span{ display:block; margin-top:3px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:800; }
.group-members-list .member-row, .group-members-list > div{ border-radius:14px; }

/* ---- Chat filter: hidden state used by dashboard-v2.js ---- */
.chat-item.filtered-out{ display:none !important; }

@media(max-width:1000px){
  .app-shell-body{ grid-template-columns:var(--sidebar,310px) minmax(0,1fr); }
  .app-topbar-tagline{ display:none; }
}
@media(max-width:820px){
  .app-shell-body{ grid-template-columns:1fr; }
  .app-topbar{ padding:0 14px; gap:10px; }
  .app-topbar-search{ max-width:none; }
  .app-topbar-name{ display:none; }
}
@media(max-width:600px){
  .app-topbar-search kbd{ display:none; }
}

/* ============================================================
   CUNNACT WhatsApp-style dashboard shell
   Reference: modern WhatsApp desktop information hierarchy.
   Keeps CUNNACT branding + existing DOM/JS hooks intact.
   ============================================================ */
:root{
  --wa-sidebar-width:clamp(360px,30vw,480px);
  --wa-chat-bg:#0b1014;
}
:root[data-theme="dark"]{
  --bg:#0b1117;
  --surface:#111820;
  --surface-2:#18212a;
  --surface-3:#202c36;
  --border:rgba(226,232,240,.085);
  --border-strong:rgba(226,232,240,.15);
  --ink:#edf2f7;
  --ink-soft:#c4ccd4;
  --ink-faint:#8e9aa6;
  --accent:#6f7cff;
  --accent-strong:#8290ff;
  --accent-soft:rgba(111,124,255,.16);
}

html,body,#app{height:100%;}
body{background:var(--bg);}

/* The old top command bar and extra rail are replaced by the messaging shell. */
.app-shell{
  height:100dvh!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:var(--wa-sidebar-width) minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  overflow:hidden!important;
  background:var(--bg)!important;
}
.app-topbar{display:none!important;}
.app-shell-body{display:contents!important;}
.nav-rail{display:none!important;}

/* Left WhatsApp-like conversation column. */
.sidebar{
  grid-column:1;
  grid-row:1;
  width:auto!important;
  min-width:0!important;
  height:100dvh!important;
  padding:0!important;
  background:var(--surface)!important;
  border-right:1px solid var(--border)!important;
  overflow:hidden!important;
}
.sidebar-top{
  min-height:70px!important;
  padding:0 18px!important;
  background:var(--surface-2)!important;
  border-bottom:1px solid var(--border)!important;
}
.brand-lockup{min-width:0;}
.desktop-brand-text strong{
  font-size:18px!important;
  letter-spacing:-.025em!important;
}
.desktop-brand-text span{font-size:8px!important;letter-spacing:.16em!important;}
.top-actions{gap:2px!important;}
.top-actions .icon-btn{
  width:42px!important;height:42px!important;border-radius:50%!important;
}

/* Keep account functionality but make it behave like the header menu in a messenger. */
.current-user-card{
  display:none!important;
}

.sidebar-search-block{
  margin:0!important;
  padding:16px 16px 9px!important;
  background:var(--surface)!important;
}
.section-heading-row{
  margin:0 2px 12px!important;
}
.chats-heading strong{
  font-size:24px!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
}
.chats-heading em{
  font-size:9px!important;
  padding:4px 8px!important;
  background:var(--accent-soft)!important;
}
.heading-actions{display:flex;align-items:center;gap:6px;}
.new-chat-btn{
  width:40px!important;height:40px!important;
  padding:0!important;border-radius:50%!important;
  justify-content:center!important;
  background:var(--surface-3)!important;
  border:1px solid var(--border)!important;
  color:var(--ink-soft)!important;
}
.new-chat-btn span{display:none!important;}
.new-chat-btn svg{width:19px!important;height:19px!important;}
.mobile-group-btn{display:none!important;}

.search-row.compact-search{
  height:44px!important;
  border-radius:11px!important;
  background:var(--surface-3)!important;
  border:1px solid transparent!important;
  padding-left:42px!important;
}
.search-row.compact-search:focus-within{
  border-color:var(--border-strong)!important;
  box-shadow:none!important;
}
.search-row.compact-search svg{left:14px!important;width:17px!important;height:17px!important;}
.search-row.compact-search input{
  font-size:12.5px!important;
  color:var(--ink)!important;
}
.search-global-launch{color:var(--ink-faint)!important;}

.chat-filter-pills{
  margin:11px 0 0!important;
  gap:8px!important;
}
.filter-pill{
  height:32px!important;
  padding:0 14px!important;
  border:1px solid var(--border)!important;
  background:transparent!important;
  color:var(--ink-soft)!important;
  font-size:11px!important;
}
.filter-pill.active{
  color:#fff!important;
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:none!important;
}

/* Compact status strip: keep the feature accessible without turning the chat list into a card dashboard. */
.stories-strip{
  padding:9px 16px 7px!important;
  border-bottom:1px solid var(--border)!important;
}
.stories-strip-head{padding:0 1px 6px!important;}
.stories-strip-head span{font-size:9px!important;}
.stories-strip-track{gap:11px!important;padding-bottom:2px!important;}
.story-chip{width:50px!important;}
.story-ring{width:42px!important;height:42px!important;}
.story-chip small{font-size:8.5px!important;}

.chat-list{
  padding:3px 7px 6px!important;
  background:var(--surface)!important;
}
.chat-item{
  min-height:72px!important;
  margin:0!important;
  padding:9px 10px!important;
  border-radius:7px!important;
  gap:12px!important;
  border-bottom:1px solid var(--border)!important;
  transform:none!important;
}
.chat-item:hover{background:var(--surface-2)!important;transform:none!important;}
.chat-item.active{
  background:var(--surface-3)!important;
  box-shadow:none!important;
}
.chat-item .avatar{width:52px!important;height:52px!important;}
.chat-item strong{font-size:13px!important;font-weight:750!important;}
.chat-item .time{font-size:10px!important;}
.preview-line{margin-top:5px!important;}
.preview-line .text{font-size:11px!important;color:var(--ink-faint)!important;}
.unread-badge{background:var(--accent)!important;min-width:19px!important;height:19px!important;}

.sidebar-bottom{
  flex-direction:row!important;
  padding:8px 12px!important;
  gap:8px!important;
  border-top:1px solid var(--border)!important;
  background:var(--surface-2)!important;
}
.sidebar-bottom .utility-card{
  min-width:0!important;
  min-height:42px!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  background:transparent!important;
}
.sidebar-bottom .utility-card>span:nth-child(2){display:none!important;}
.sidebar-bottom .utility-icon{width:31px!important;height:31px!important;}
.sidebar-bottom .utility-chevron{display:none!important;}
.sidebar-brand-note{
  display:none!important;
}

/* Main WhatsApp-like conversation area. */
.chat-panel{
  grid-column:2;
  grid-row:1;
  min-width:0!important;
  height:100dvh!important;
  background:var(--wa-chat-bg)!important;
  position:relative!important;
}
.chat-header{
  min-height:70px!important;
  padding:8px 18px!important;
  background:var(--surface-2)!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:none!important;
}
.chat-header-left{gap:12px!important;}
.chat-header .avatar{width:46px!important;height:46px!important;}
.chat-title-line strong{font-size:14px!important;font-weight:800!important;}
.chat-header .meta>span{font-size:10px!important;}
.chat-header-actions{gap:1px!important;}
.chat-header-actions .icon-btn{
  width:42px!important;height:42px!important;
  border-radius:50%!important;
  background:transparent!important;
  border-color:transparent!important;
  color:var(--ink-soft)!important;
  transform:none!important;
}
.chat-header-actions .icon-btn:hover:not(:disabled){
  background:var(--surface-3)!important;
  color:var(--ink)!important;
  transform:none!important;
}

.messages{
  padding:28px clamp(18px,5vw,80px) 24px!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(111,124,255,.045),transparent 26%),
    radial-gradient(circle at 84% 76%,rgba(16,185,129,.025),transparent 24%),
    var(--wa-chat-bg)!important;
}

.composer{
  min-height:68px!important;
  padding:9px 18px calc(9px + env(safe-area-inset-bottom,0px))!important;
  gap:7px!important;
  background:var(--surface-2)!important;
  border-top:1px solid var(--border)!important;
  backdrop-filter:none!important;
}
.composer-icon{
  width:40px!important;height:40px!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
}
.composer-icon:hover:not(:disabled){
  background:var(--surface-3)!important;
  transform:none!important;
}
.composer textarea{
  min-height:42px!important;
  border:0!important;
  border-radius:21px!important;
  padding:11px 16px!important;
  background:var(--surface-3)!important;
  box-shadow:none!important;
}
.composer textarea:focus{box-shadow:none!important;background:var(--surface-3)!important;}
.composer-hint{display:none!important;}
.send-btn{
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:var(--accent)!important;box-shadow:none!important;
}
.send-btn:hover:not(:disabled){background:var(--accent-strong)!important;box-shadow:none!important;}

/* Empty chat state should feel like a messaging app, not a dashboard card. */
.welcome-orb{border-radius:50%!important;width:74px!important;height:74px!important;}
.welcome h1{font-size:25px!important;}

/* Desktop sizing similar to the supplied WhatsApp reference. */
@media(min-width:1200px){
  .sidebar{grid-column:1;}
  .chat-panel{grid-column:2;}
}

@media(max-width:820px){
  .app-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .sidebar{grid-column:1!important;grid-row:1!important;}
  .chat-panel{grid-column:1!important;grid-row:1!important;}
  .sidebar-top{min-height:62px!important;padding:0 12px!important;}
  .sidebar-search-block{padding:12px 12px 7px!important;}
  .chats-heading strong{font-size:22px!important;}
  .chat-item{min-height:68px!important;}
  .chat-item .avatar{width:50px!important;height:50px!important;}
  .stories-strip{padding-left:12px!important;padding-right:12px!important;}
  .chat-header{min-height:64px!important;padding:7px 10px!important;}
  .chat-header-actions .icon-btn{width:38px!important;height:38px!important;}
  .messages{padding:16px 10px 18px!important;}
  .composer{padding-left:8px!important;padding-right:8px!important;}
}

@media(max-width:520px){
  .filter-pill{padding:0 11px!important;}
  .chat-header-actions .icon-btn{width:34px!important;height:34px!important;}
  .chat-header-actions .icon-btn svg{width:17px!important;height:17px!important;}
  .composer-icon{width:36px!important;height:36px!important;}
  .send-btn{width:40px!important;height:40px!important;}
  #contactBtn,#locationBtn,#gifBtn,#stickerBtn{display:none!important;}
}


/* ============================================================
   CUNNACT — WhatsApp desktop reference pass
   Keep the persistent navigation rail. The reference screenshots
   use: navigation rail + chat list + conversation workspace.
   ============================================================ */
:root{
  --cunnact-rail:68px;
  --cunnact-chatlist:408px;
  --cunnact-wa-bg:#0f1418;
  --cunnact-wa-panel:#11171c;
  --cunnact-wa-panel-2:#20272d;
  --cunnact-wa-hover:#252d33;
  --cunnact-wa-green:#25d366;
  --cunnact-wa-text:#e9edef;
  --cunnact-wa-muted:#8696a0;
}

/* Shell: rail + conversations + chat. */
.app-shell{
  height:100dvh!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:var(--cunnact-rail) minmax(350px,var(--cunnact-chatlist)) minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  overflow:hidden!important;
  background:var(--cunnact-wa-bg)!important;
}
.app-topbar{display:none!important;}
.app-shell-body{display:contents!important;}

/* Persistent left navigation rail — do NOT remove it. */
.nav-rail{
  display:flex!important;
  grid-column:1!important;
  grid-row:1!important;
  width:var(--cunnact-rail)!important;
  height:100dvh!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:12px 0 14px!important;
  background:#11161a!important;
  border-right:1px solid rgba(233,237,239,.08)!important;
  z-index:30!important;
}
.nav-logo{
  width:44px!important;height:44px!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:#20272d!important;border:1px solid rgba(233,237,239,.07)!important;
}
.nav-logo img{width:30px!important;height:30px!important;display:block!important;}
.nav-rail-links,.nav-rail-bottom{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;}
.nav-rail-links{margin-top:10px!important;flex:1!important;justify-content:flex-start!important;padding-top:8px!important;}
.nav-rail-btn{
  position:relative!important;width:48px!important;height:48px!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;color:#aeb8be!important;
  border:1px solid transparent!important;background:transparent!important;
}
.nav-rail-btn svg{width:23px!important;height:23px!important;}
.nav-rail-btn:hover{background:#20272d!important;color:#f1f4f5!important;}
.nav-rail-btn.active{
  color:#fff!important;background:rgba(124,137,255,.18)!important;
  border-color:rgba(124,137,255,.18)!important;box-shadow:none!important;
}
.nav-rail-btn.active::before{
  content:"";position:absolute;left:-1px;top:10px;width:3px;height:28px;border-radius:0 4px 4px 0;background:var(--accent);
}
.rail-badge{
  position:absolute!important;right:1px!important;top:1px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;
  display:grid!important;place-items:center!important;border-radius:999px!important;background:#25d366!important;color:#06130b!important;
  font-size:9px!important;font-weight:900!important;border:2px solid #11161a!important;
}

/* Chat list column. */
.sidebar{
  grid-column:2!important;grid-row:1!important;width:auto!important;min-width:0!important;height:100dvh!important;
  padding:0!important;background:#11171c!important;border-right:1px solid rgba(233,237,239,.09)!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
}
.sidebar-top{
  min-height:70px!important;padding:0 14px!important;background:#11171c!important;border-bottom:0!important;
}
.brand-lockup{gap:9px!important;}
.brand-symbol{width:38px!important;height:38px!important;border-radius:12px!important;box-shadow:none!important;}
.desktop-brand-text strong{font-size:18px!important;}
.desktop-brand-text span{font-size:8px!important;letter-spacing:.15em!important;}
.top-actions{gap:2px!important;}
.top-actions .icon-btn{width:40px!important;height:40px!important;border-radius:50%!important;}

/* Keep user identity accessible but use the reference compact profile row. */
.current-user-card{
  display:flex!important;margin:0 12px 5px!important;padding:8px 10px!important;border:1px solid rgba(233,237,239,.07)!important;
  border-radius:12px!important;background:#182026!important;min-height:58px!important;
}
.current-user-card .avatar.lg{width:44px!important;height:44px!important;}
.current-user-card .meta strong{font-size:12px!important;}
.current-user-card .user-email{font-size:9px!important;}
.current-user-card .online-text{font-size:9px!important;}

.sidebar-search-block{padding:8px 12px 10px!important;background:#11171c!important;}
.section-heading-row{margin:0 2px 10px!important;}
.chats-heading strong{font-size:22px!important;letter-spacing:-.035em!important;}
.chats-heading em{background:rgba(37,211,102,.13)!important;color:#55dc86!important;padding:3px 8px!important;}
.new-chat-btn{
  width:40px!important;height:40px!important;border-radius:50%!important;background:#25d366!important;color:#07130b!important;
  border:0!important;box-shadow:none!important;
}
.new-chat-btn:hover{background:#39df78!important;}
.search-row.compact-search{height:43px!important;border-radius:10px!important;background:#20272d!important;border:0!important;}
.search-row.compact-search:focus-within{background:#252d33!important;}
.search-row.compact-search input::placeholder{color:#93a0a8!important;}
.chat-filter-pills{gap:6px!important;margin:9px 0 0!important;}
.filter-pill{height:30px!important;padding:0 13px!important;border:1px solid rgba(233,237,239,.1)!important;background:transparent!important;color:#aeb8be!important;}
.filter-pill.active{background:rgba(37,211,102,.14)!important;color:#61e28e!important;border-color:rgba(37,211,102,.2)!important;box-shadow:none!important;}

/* Stories stay available, but compact like WhatsApp's sidebar. */
.stories-strip{padding:9px 12px 8px!important;background:#11171c!important;border-bottom:1px solid rgba(233,237,239,.07)!important;}
.stories-strip-head{padding:0 1px 7px!important;}
.stories-strip-head span{font-size:9px!important;}
.stories-strip-head button{color:#61e28e!important;}
.stories-strip-track{gap:10px!important;}
.story-ring{width:43px!important;height:43px!important;}
.story-chip{width:50px!important;}
.story-chip small{font-size:8.5px!important;color:#aeb8be!important;}

.chat-list{padding:2px 5px 5px!important;background:#11171c!important;overflow:auto!important;}
.chat-item{
  min-height:72px!important;padding:9px 10px!important;border-radius:7px!important;border-bottom:1px solid rgba(233,237,239,.055)!important;
  gap:12px!important;background:transparent!important;
}
.chat-item:hover{background:#20272d!important;}
.chat-item.active{background:#2a3035!important;box-shadow:none!important;}
.chat-item .avatar{width:52px!important;height:52px!important;}
.chat-item strong{font-size:13px!important;color:#f0f2f3!important;}
.chat-item .time{font-size:10px!important;color:#87959e!important;}
.preview-line .text{font-size:11px!important;color:#9aa7ae!important;}
.unread-badge{background:#25d366!important;color:#07130b!important;min-width:19px!important;height:19px!important;}

.sidebar-bottom{padding:7px 10px!important;background:#11171c!important;border-top:1px solid rgba(233,237,239,.07)!important;}
.sidebar-bottom .utility-card{background:#182026!important;border:0!important;}

/* Main conversation workspace. */
.chat-panel{
  grid-column:3!important;grid-row:1!important;min-width:0!important;height:100dvh!important;background:var(--cunnact-wa-bg)!important;
}
.chat-header{
  min-height:70px!important;padding:8px 14px!important;background:#20272d!important;border-bottom:1px solid rgba(233,237,239,.09)!important;
}
.chat-header .avatar{width:46px!important;height:46px!important;}
.chat-title-line strong{font-size:15px!important;color:#f0f2f3!important;}
.chat-header .meta>span{font-size:10px!important;color:#9aa7ae!important;}
.chat-header-actions{gap:2px!important;}
.chat-header-actions .icon-btn{width:42px!important;height:42px!important;border-radius:50%!important;color:#c7d0d5!important;background:transparent!important;border:0!important;}
.chat-header-actions .icon-btn:hover{background:#2a3238!important;color:#fff!important;}

.messages{
  padding:24px clamp(18px,5vw,72px) 24px!important;
  background-color:#0f1418!important;
  background-image:radial-gradient(rgba(233,237,239,.045) 1px,transparent 1px)!important;
  background-size:22px 22px!important;
}
.composer{min-height:68px!important;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px))!important;background:#20272d!important;border-top:1px solid rgba(233,237,239,.09)!important;}
.composer-icon{width:42px!important;height:42px!important;border-radius:50%!important;color:#c7d0d5!important;}
.composer-icon:hover:not(:disabled){background:#2b3339!important;}
.composer textarea{min-height:44px!important;border:0!important;border-radius:22px!important;padding:12px 16px!important;background:#2a3238!important;}
.send-btn{width:44px!important;height:44px!important;border-radius:50%!important;background:#25d366!important;color:#06130b!important;box-shadow:none!important;}
.send-btn:hover:not(:disabled){background:#39df78!important;}

/* Reference-like context menus. */
.dropdown-menu,.context-menu,.message-menu,.composer-popover{
  background:#20272d!important;border:1px solid rgba(233,237,239,.11)!important;border-radius:12px!important;box-shadow:0 18px 48px rgba(0,0,0,.42)!important;backdrop-filter:blur(16px)!important;
}
.dropdown-item{min-height:40px!important;color:#e9edef!important;border-radius:8px!important;}
.dropdown-item:hover{background:#2a3238!important;}

/* Message bubbles: WhatsApp-like silhouette while retaining CUNNACT colors. */
.message-bubble{border-radius:9px!important;box-shadow:none!important;}
.message-bubble.outgoing{background:#176b48!important;color:#e9edef!important;}
.message-bubble.incoming{background:#20272d!important;color:#e9edef!important;}
.message-bubble .message-time{color:#a7b6bc!important;}

/* Emoji / sticker / attachment pickers. */
.composer-popover{border-radius:12px!important;}
.emoji-picker,.emoji-panel,.sticker-panel,.gif-panel{background:#20272d!important;border:1px solid rgba(233,237,239,.11)!important;box-shadow:0 20px 55px rgba(0,0,0,.45)!important;}

/* Contact/profile drawer: match the reference's right-side information panel. */
.profile-drawer{
  width:min(410px,92vw)!important;background:#11171c!important;border-left:1px solid rgba(233,237,239,.1)!important;box-shadow:-18px 0 50px rgba(0,0,0,.28)!important;
}
.profile-drawer-head{background:#20272d!important;}
.profile-drawer-avatar{width:112px!important;height:112px!important;border-radius:50%!important;box-shadow:none!important;}

/* Modals / status / channels use the same dark messenger surface. */
.modal{background:rgba(0,0,0,.62)!important;backdrop-filter:blur(4px)!important;}
.modal-content{background:#11171c!important;border:1px solid rgba(233,237,239,.1)!important;border-radius:12px!important;box-shadow:0 24px 80px rgba(0,0,0,.5)!important;}
.modal-header{background:#20272d!important;border-bottom:1px solid rgba(233,237,239,.08)!important;}
.social-hub-modal{width:min(1120px,96vw)!important;max-height:90vh!important;}
.social-tabs{background:#11171c!important;border-bottom:1px solid rgba(233,237,239,.08)!important;}
.social-tab.active{color:#61e28e!important;border-bottom-color:#25d366!important;}
.social-panel{background:#11171c!important;}
.social-list-card,.social-card,.stories-grid>*,.story-card{background:#20272d!important;border-color:rgba(233,237,239,.08)!important;}

/* Call screens. */
.call-modal-content{background:#10161a!important;border-radius:16px!important;}
.call-stage{background:#080d10!important;border-radius:12px!important;}
.call-control{background:#20272d!important;color:#e9edef!important;border:1px solid rgba(233,237,239,.08)!important;border-radius:50%!important;}
.call-control.end-call{background:#ef4444!important;color:#fff!important;}

/* Mobile: keep the rail as a bottom/compact navigation rather than deleting it. */
@media(max-width:820px){
  .app-shell{grid-template-columns:1fr!important;grid-template-rows:1fr 62px!important;}
  .nav-rail{grid-column:1!important;grid-row:2!important;width:100%!important;height:62px!important;flex-direction:row!important;padding:5px 8px!important;border-right:0!important;border-top:1px solid rgba(233,237,239,.08)!important;}
  .nav-logo{display:none!important;}
  .nav-rail-links{flex-direction:row!important;justify-content:space-around!important;gap:2px!important;width:100%!important;padding:0!important;margin:0!important;}
  .nav-rail-bottom{display:none!important;}
  .nav-rail-btn{width:44px!important;height:44px!important;}
  .nav-rail-btn.active::before{display:none!important;}
  .sidebar{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  .chat-panel{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.chat-open .sidebar{display:none!important;}
  #app:not(.chat-open) .chat-panel{display:none!important;}
}
@media(max-width:520px){
  .current-user-card{margin-left:8px!important;margin-right:8px!important;}
  .sidebar-search-block{padding-left:9px!important;padding-right:9px!important;}
  .chat-item{min-height:68px!important;}
}

/* Attachment picker — mirrors the compact WhatsApp-style action sheet. */
.attachment-tool-wrap{position:relative!important;}
.attachment-panel{
  position:absolute!important;left:0!important;bottom:54px!important;width:250px!important;padding:8px!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px!important;z-index:2500!important;
}
.attachment-panel[hidden]{display:none!important;}
.attachment-panel>button{
  min-height:42px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:8px 9px!important;
  color:#e9edef!important;border-radius:8px!important;text-align:left!important;font-size:11.5px!important;font-weight:650!important;
}
.attachment-panel>button:hover{background:#2a3238!important;}
.attach-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;font-weight:900;font-size:13px;background:#2b3339;color:#61e28e;}
.attach-icon.doc{color:#a98bff}.attach-icon.media{color:#42a5ff}.attach-icon.camera{color:#ff6b9a}.attach-icon.audio{color:#ff9b45}.attach-icon.contact{color:#55c8ff}.attach-icon.location{color:#61e28e}.attach-icon.poll{color:#ffd166}.attach-icon.event{color:#ff6b8a}.attach-icon.sticker{color:#c18cff}
.text-icon{font-weight:800!important;font-size:11px!important;letter-spacing:-.02em!important;}
.emoji-panel,.sticker-panel{width:360px!important;max-width:min(90vw,360px)!important;max-height:390px!important;overflow:auto!important;padding:12px!important;}
.emoji-panel button,.sticker-panel button{border-radius:8px!important;}

/* Screenshot-like message action/reaction bar. */
.message-actions-popover,.reaction-bar{background:#20272d!important;border:1px solid rgba(233,237,239,.1)!important;box-shadow:0 16px 42px rgba(0,0,0,.42)!important;border-radius:12px!important;}

/* Keep the rail visible at desktop even though the earlier redesign rules hid it. */
@media(min-width:821px){.nav-rail{display:flex!important}.sidebar{display:flex!important}.chat-panel{display:block!important}.app-shell{grid-template-columns:var(--cunnact-rail) minmax(350px,var(--cunnact-chatlist)) minmax(0,1fr)!important;}}

/* ============================================================
   CUNNACT FINAL LAYOUT LOCK — DO NOT LET CHAT COMPOSER FLOAT
   The conversation workspace is a strict vertical grid. The
   composer is ALWAYS the last row, regardless of message count,
   previews, replies, selection mode or empty-chat state.
   ============================================================ */
.chat-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto!important;
  grid-template-areas:
    "chat-header"
    "chat-messages"
    "blocked"
    "media-preview"
    "reply"
    "selection"
    "composer"!important;
  min-width:0!important;
  min-height:0!important;
  height:100dvh!important;
  overflow:hidden!important;
}
.chat-panel > .chat-header{grid-area:chat-header!important;min-width:0!important;}
.chat-panel > .messages{grid-area:chat-messages!important;min-width:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;}
.chat-panel > #blockedNotice{grid-area:blocked!important;min-width:0!important;}
.chat-panel > #imagePreviewBar{grid-area:media-preview!important;min-width:0!important;}
.chat-panel > #replyBar{grid-area:reply!important;min-width:0!important;}
.chat-panel > #selectionToolbar{grid-area:selection!important;min-width:0!important;}
.chat-panel > #messageForm{grid-area:composer!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;position:relative!important;z-index:20!important;}
.chat-panel > .messages + .blocked-notice[hidden],
.chat-panel > #imagePreviewBar[hidden],
.chat-panel > #replyBar[hidden],
.chat-panel > #selectionToolbar[hidden]{display:none!important;}

/* Keep the desktop navigation rail + chat-list sidebar visible on normal desktop/tablet widths. */
@media(min-width:821px){
  .app-shell{grid-template-columns:var(--cunnact-rail,68px) minmax(350px,var(--cunnact-chatlist,408px)) minmax(0,1fr)!important;}
  .nav-rail{display:flex!important;grid-column:1!important;grid-row:1!important;}
  .sidebar{display:flex!important;grid-column:2!important;grid-row:1!important;}
  .chat-panel{display:grid!important;grid-column:3!important;grid-row:1!important;height:100dvh!important;}
}

/* At mobile widths the rail becomes the bottom navigation; chat composer still stays pinned. */
@media(max-width:820px){
  .chat-panel{grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto!important;height:calc(100dvh - 62px)!important;}
  .chat-panel > #messageForm{min-height:68px!important;}
  .chat-panel > .messages{min-height:0!important;}
}

/* CUNNACT: user-requested dashboard declutter (keep DOM/hooks, remove these controls from UI) */
.current-user-card,
#chatsActiveCount,
#globalSearchBtn,
.stories-strip,
#navSavedBtn,
#groupCallBtn,
#gifBtn,
#contactBtn,
#locationBtn,
#emojiBtn,
#stickerBtn {
  display: none !important;
}

/* ============================================================
   New-chat side screen — reference-aligned dedicated sidebar page
   ============================================================ */
:root{
  --cunnact-rail:56px;
  --cunnact-chatlist:360px;
}
@media(min-width:821px){
  .app-shell{
    grid-template-columns:var(--cunnact-rail) minmax(320px,var(--cunnact-chatlist)) minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
  }
  .app-shell-body{display:contents!important;}
  .nav-rail{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    width:var(--cunnact-rail)!important;
    min-width:var(--cunnact-rail)!important;
    height:100dvh!important;
    padding:9px 6px!important;
    flex-direction:column!important;
    align-items:center!important;
    border-right:1px solid var(--border)!important;
    background:var(--surface-2)!important;
  }
  .nav-rail-links{width:100%;}
  .nav-rail-btn{width:42px;height:42px;}
  .sidebar{grid-column:2!important;grid-row:1!important;}
  .chat-panel{grid-column:3!important;grid-row:1!important;}
}

.sidebar-default-view{display:flex;flex-direction:column;min-height:0;height:100%;}
.sidebar-default-view[hidden]{display:none!important;}

.new-chat-side-view{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface)!important;
}
.new-chat-side-view[hidden]{display:none!important;}
.new-chat-side-header{
  flex:none;
  height:68px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.new-chat-side-header h2{
  margin:0;
  flex:1;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.02em;
}
.new-chat-back-btn,.new-chat-grid-btn{
  width:40px;height:40px;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}
.new-chat-back-btn:hover,.new-chat-grid-btn:hover{background:var(--surface-2);color:var(--ink);transform:translateY(-1px)}
.new-chat-back-btn svg{width:23px;height:23px}
.new-chat-grid-btn svg{width:20px;height:20px}
.new-chat-side-search{
  flex:none;
  margin:12px 14px 7px;
  height:38px;
  border-radius:20px;
  background:var(--surface-2);
  border:1px solid transparent;
  padding:0 14px 0 36px;
  position:relative;
}
.new-chat-side-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.new-chat-side-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-faint);pointer-events:none}
.new-chat-side-search input{width:100%;height:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:12px}
.new-chat-side-search input::placeholder{color:var(--ink-faint)}
.new-chat-shortcuts{flex:none;padding:4px 14px 8px;display:flex;flex-direction:column;gap:2px}
.new-chat-shortcut{
  width:100%;display:flex;align-items:center;gap:14px;padding:11px 9px;border:0;border-radius:10px;
  background:transparent;color:var(--ink);text-align:left;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .16s var(--ease)
}
.new-chat-shortcut:hover{background:var(--surface-2)}
.new-chat-shortcut-icon{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent);color:#fff;box-shadow:0 8px 18px var(--accent-soft)
}
.new-chat-shortcut-icon svg{width:22px;height:22px}
.new-chat-side-results{flex:1;min-height:0;overflow:auto;padding:3px 8px 16px}
.new-chat-side-results .new-chat-section{margin:0;padding:0}
.new-chat-side-results .new-chat-section-title{display:none}
.new-chat-side-results .new-chat-contact-list{display:block}
.new-person-row{
  width:100%;display:flex;align-items:center;gap:12px;padding:9px 9px;border:0;border-radius:10px;
  background:transparent;text-align:left;color:var(--ink);cursor:pointer;transition:background .14s var(--ease)
}
.new-person-row:hover{background:var(--surface-2)}
.new-person-row .meta{min-width:0;flex:1}
.new-person-row .meta strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-person-row .meta span{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-chat-letter{padding:12px 11px 5px;color:var(--ink-faint);font-size:10px;font-weight:800;letter-spacing:.12em}
.self-chat-row{margin-bottom:2px}
.self-chat-row .meta span{color:var(--ink-soft)}
.new-chat-side-note{padding:12px 14px 18px;text-align:center;color:var(--ink-faint);font-size:10px}

@media(max-width:820px){
  .new-chat-side-view{position:fixed;inset:0;z-index:2100;height:100dvh;}
  .new-chat-side-header{height:64px;padding:0 14px}
  .new-chat-side-search{margin:10px 12px 6px}
  .new-chat-shortcuts{padding:3px 10px 8px}
  .new-chat-side-results{padding-left:5px;padding-right:5px}
}


/* ============================================================
   STATUS PAGE — dedicated WhatsApp-style status workspace
   Keeps the CUNNACT nav rail and uses the sidebar as the status list.
   ============================================================ */
.status-side-view{height:100%;min-height:0;display:flex;flex-direction:column;background:#11171c!important;color:#e9edef;position:relative;overflow:visible!important;}
.status-side-view[hidden]{display:none!important;}
.status-side-header{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;background:#20272d;border-bottom:1px solid rgba(233,237,239,.08);}
.status-side-header h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#f1f4f5;}
.status-side-actions{display:flex;align-items:center;gap:2px;position:relative;}
.status-side-actions .icon-btn{width:38px;height:38px;border-radius:50%;color:#cfd6da;background:transparent;}
.status-side-actions .icon-btn:hover{background:#2a3238;color:#fff;}
.status-add-btn{color:#cfd6da!important;}
.status-add-menu,.status-more-menu{position:absolute;top:50px;z-index:5000;min-width:190px;padding:7px;background:#20272d;border:1px solid rgba(233,237,239,.1);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.44);}
.status-add-menu{right:0;}
.status-more-menu{right:42px;}
.status-add-menu[hidden],.status-more-menu[hidden]{display:none!important;}
.status-add-menu button,.status-more-menu button{width:100%;min-height:40px;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#e9edef;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left;font-size:12px;font-weight:650;}
.status-add-menu button:hover,.status-more-menu button:hover{background:#2a3238;}
.status-add-menu svg{width:18px;height:18px;flex:none;color:#aeb8be;}
.my-status-row{flex:none;width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;background:#20272d;border:0;border-bottom:1px solid rgba(233,237,239,.06);color:inherit;text-align:left;cursor:pointer;}
.my-status-row:hover{background:#262e34;}
.my-status-avatar-wrap{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center;}
.my-status-avatar-wrap .avatar{width:46px;height:46px;}
.my-status-plus{position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#06130b;border:2px solid #20272d;font-size:16px;line-height:1;font-weight:800;}
.my-status-copy{display:flex;flex-direction:column;min-width:0;gap:3px;}
.my-status-copy strong{font-size:13px;color:#f0f2f3;}
.my-status-copy small{font-size:10.5px;color:#8f9ba2;}
.status-section-label{padding:16px 18px 9px;text-transform:uppercase;letter-spacing:.11em;font-size:9px;font-weight:800;color:#7f8c94;}
.status-updates-list{min-height:0;overflow-y:auto;padding:0 8px 20px;overflow:auto;min-height:0;}
.status-update-row{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;background:transparent;border:0;border-radius:8px;color:inherit;text-align:left;cursor:pointer;}
.status-update-row:hover{background:#20272d;}
.status-avatar-ring{width:48px;height:48px;flex:none;border-radius:50%;padding:2px;display:grid;place-items:center;background:#25d366;}
.status-avatar-ring.seen{background:#4b555b;}
.status-avatar-inner{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#11171c;font-size:15px;font-weight:800;color:#dce3e6;}
.status-avatar-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.status-update-copy{display:flex;flex-direction:column;min-width:0;gap:3px;}
.status-update-copy strong{font-size:13px;color:#f0f2f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.status-update-copy small{font-size:10.5px;color:#909ca3;}
.status-list-empty{padding:28px 18px;color:#8f9ba2;display:flex;flex-direction:column;gap:5px;font-size:11px;}
.status-list-empty strong{font-size:13px;color:#dce3e6;}
.status-main-panel{grid-column:3;grid-row:1;height:100dvh;min-width:0;min-height:0;background:#11171c;display:grid;place-items:center;overflow:hidden;}
.status-main-panel[hidden]{display:none!important;}
.status-main-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:-4vh;gap:12px;color:#7e8a91;padding:24px;}
.status-main-icon{width:70px;height:70px;display:grid;place-items:center;color:#4a555c;}
.status-main-icon svg{width:60px;height:60px;}
.status-main-empty h2{margin:0;font-size:24px;font-weight:500;color:#f0f2f3;letter-spacing:-.02em;}
.status-main-empty p{margin:0;font-size:13px;color:#8f9ba2;}
#app.status-open .chat-panel{display:none!important;}
#app.status-open .sidebar{grid-column:2!important;}
#app.status-open .status-panel{display:grid!important;}
@media(max-width:820px){
  .status-main-panel{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.status-open .sidebar{display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;position:relative!important;}
  #app.status-open .status-main-panel{display:none!important;}
  #app.status-open .status-side-view{display:flex!important;}
  #app.status-open .sidebar-default-view,#app.status-open .new-chat-side-view{display:none!important;}
}

/* Current-user profile shortcut at the bottom of the CUNNACT rail. */
.nav-rail-profile-btn{
  position:relative!important;width:48px!important;height:48px!important;padding:0!important;
  border-radius:14px!important;border:1px solid transparent!important;background:transparent!important;
  display:grid!important;place-items:center!important;color:#aeb8be!important;cursor:pointer!important;
}
.nav-rail-profile-btn:hover{background:#20272d!important}
.nav-rail-profile-btn:focus-visible{outline:2px solid rgba(124,137,255,.7)!important;outline-offset:2px!important}
.nav-rail-profile-btn .avatar{width:34px!important;height:34px!important;border-radius:50%!important}
@media(max-width:820px){.nav-rail-profile-btn{display:none!important}}

/* ============================================================
   WhatsApp-style dashboard menu + chat selection mode
   ============================================================ */
.dashboard-menu{
  width:240px!important;
  padding:6px!important;
  border-radius:10px!important;
  transform-origin:top right;
}
.dashboard-menu .dropdown-item{
  min-height:42px!important;
  padding:0 11px!important;
  gap:11px!important;
  font-size:13px!important;
  font-weight:600!important;
  background:transparent!important;
}
.dashboard-menu .dropdown-item svg{width:18px!important;height:18px!important;flex:none!important;opacity:.94}
.dashboard-menu .dropdown-item:hover{background:#2a3238!important;transform:none!important;}
.dashboard-menu .danger-item:hover{background:rgba(239,68,68,.10)!important;color:#ff8b96!important}
.dashboard-menu .menu-divider{height:1px;background:rgba(233,237,239,.10);margin:5px 4px}
.chat-selection-toolbar{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:#20272d;
  border-bottom:1px solid rgba(233,237,239,.08);
}
.chat-selection-toolbar[hidden]{display:none!important}
.chat-selection-toolbar strong{flex:1;font-size:12px;color:#e9edef}
.chat-selection-toolbar .icon-btn{width:34px!important;height:34px!important;border-radius:50%!important}
.chat-select-check{
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(233,237,239,.38);
  display:grid;place-items:center;flex:none;
  font-size:13px;font-weight:800;color:#07120b;
}
.chat-select-check.selected{background:#25d366;border-color:#25d366}
.chat-selected{background:#25312b!important}
@media(max-width:820px){.dashboard-menu{width:230px!important}.chat-selection-toolbar{padding:8px 9px}}


/* ---- WhatsApp-style conversation contact info drawer ---- */
.profile-drawer{width:min(360px,92vw)!important;background:#202124!important;border-left:1px solid rgba(255,255,255,.06)!important;box-shadow:-18px 0 48px rgba(0,0,0,.35)!important}
.profile-drawer-head{height:64px!important;padding:0 14px!important;display:grid!important;grid-template-columns:40px 1fr 40px!important;align-items:center!important;gap:8px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;background:#202124!important}
.profile-drawer-head .icon-btn{width:38px;height:38px;border-radius:10px;color:#f1f3f4}
.profile-drawer-title{font-size:16px;color:#f1f3f4;justify-self:start}
.profile-drawer-title strong{font-weight:700}
.profile-drawer-body{padding:28px 0 40px!important;overflow:auto!important;text-align:center!important;background:#202124!important}
#drawerContactDetails{padding:0 18px}
.profile-drawer-avatar{width:118px!important;height:118px!important;margin:0 auto 18px!important;border-radius:50%!important;box-shadow:none!important}
.profile-drawer-body h3{font-size:22px!important;line-height:1.2!important;color:#f1f3f4!important;letter-spacing:-.02em!important}
.drawer-username{margin-top:7px!important;color:#aeb3b8!important;font-size:12px!important;font-weight:500!important}
.profile-drawer-body> #drawerContactDetails > p{margin:9px auto 20px!important;color:#aeb3b8!important;font-size:12px!important;line-height:1.45!important;max-width:290px!important}
.drawer-contact-actions{display:flex;justify-content:center;gap:34px;margin:8px 0 26px}
.drawer-action-btn{background:none;border:0;color:#22c96d;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;min-width:54px}
.drawer-action-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#2a2d31;color:#f1f3f4;font-size:19px;line-height:1}
.drawer-action-btn small{font-size:10px;color:#f1f3f4}
.drawer-hidden-profile-btn{display:none!important}
.drawer-info-list{margin:0 -18px;border-top:1px solid rgba(255,255,255,.08)}
.drawer-info-row{width:100%;min-height:68px;padding:12px 18px;background:#202124;border:0;border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;gap:16px;color:#f1f3f4;text-align:left;cursor:pointer}
.drawer-info-row:hover{background:#26282c}
.drawer-info-static{cursor:default}
.drawer-info-icon{width:24px;flex:none;text-align:center;font-size:22px;color:#b9bec3}
.drawer-info-copy{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.drawer-info-copy strong{font-size:13px;font-weight:500}
.drawer-info-copy small{font-size:10px;color:#9aa0a6}
.drawer-info-chevron{color:#7d8389;font-size:20px;line-height:1}
.drawer-danger-row .drawer-info-icon,.drawer-danger-row .drawer-info-copy strong{color:#ff7f7f}
.profile-drawer:not(.group-mode) .drawer-shared-section{display:none!important}
@media(max-width:820px){.profile-drawer{width:100%!important}.profile-drawer-head{padding:0 12px!important}.profile-drawer-body{padding-bottom:calc(38px + env(safe-area-inset-bottom,0px))!important}}

/* Structural hidden elements must stay hidden even when component rules declare display. */
.nav-rail-btn[hidden], .nav-rail-btn[hidden]:hover { display:none!important; }

/* ============================================================
   Dedicated WhatsApp-style Channels page
   ============================================================ */
/* ============================================================
   Dedicated WhatsApp-style Channels page — layout lock
   Keep CUNNACT rail | Channels list | Channel workspace.
   ============================================================ */
#app.channels-open > .app-shell-body > .sidebar{display:none!important;}
#app.channels-open > .app-shell-body > .chat-panel{display:none!important;}
#app.channels-open > .app-shell-body > .channels-side-view{display:flex!important;grid-column:2!important;grid-row:1!important;height:100dvh!important;min-height:0!important;z-index:4!important;}
#app.channels-open > .app-shell-body > .channels-main-panel{display:flex!important;grid-column:3!important;grid-row:1!important;height:100dvh!important;min-height:0!important;z-index:2!important;}
@media(max-width:820px){
  #app.channels-open > .app-shell-body > .sidebar{display:none!important;}
  #app.channels-open > .app-shell-body > .channels-side-view{display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;width:100%!important;}
  #app.channels-open > .app-shell-body > .channels-main-panel{display:none!important;}
  #app.channels-open > .app-shell-body > .channels-main-panel:not([hidden]){display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;width:100%!important;z-index:5!important;}
}
.channels-side-view{height:100%;min-height:0;display:flex;flex-direction:column;background:#11171c!important;color:#e9edef;overflow:hidden;}
.channels-side-view[hidden],.channels-main-panel[hidden]{display:none!important;}
.channels-side-header{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 20px;background:#20272d;border-bottom:1px solid rgba(233,237,239,.08);}
.channels-side-header h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;color:#f1f4f5;}
.channels-create-btn{width:40px;height:40px;border-radius:50%;background:transparent!important;color:#dce3e6!important;}
.channels-create-btn:hover{background:#2a3238!important;color:#fff!important;}
.channels-side-search{margin:12px 14px 10px;height:38px;border-radius:8px;background:#2a3238;display:flex;align-items:center;gap:9px;padding:0 12px;flex:none;}
.channels-side-search svg{width:16px;height:16px;color:#9aa6ad;flex:none;}
.channels-side-search input{width:100%;border:0;outline:0;background:transparent;color:#e9edef;font-size:12px;}
.channels-side-search input::placeholder{color:#98a3aa;}
.channels-side-list{min-height:0;flex:1;overflow:auto;padding:0 7px 14px;}
.channel-side-row{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 10px;border:0;border-radius:8px;background:transparent;color:#e9edef;text-align:left;cursor:pointer;}
.channel-side-row:hover{background:#20272d;}
.channel-side-row.active{background:#2a3238;}
.channel-side-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#2f3840;color:#dce3e6;font-weight:800;font-size:15px;}
.channel-side-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.channel-side-copy{min-width:0;display:flex;flex-direction:column;gap:3px;}
.channel-side-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f2f4f5;}
.channel-side-copy small{font-size:10.5px;color:#9aa6ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channel-side-meta{display:flex;align-items:flex-end;align-self:stretch;flex-direction:column;justify-content:center;gap:7px;min-width:38px;}
.channel-side-meta time{font-size:9.5px;color:#9aa6ad;white-space:nowrap;}
.channel-side-meta b{min-width:18px;height:18px;border-radius:999px;background:#25d366;color:#07140b;display:grid;place-items:center;font-size:9px;padding:0 5px;}
.channels-list-empty{padding:28px 18px;display:flex;flex-direction:column;gap:6px;color:#8e999f;font-size:11px;text-align:center;}
.channels-list-empty strong{font-size:13px;color:#dce3e6;}
.channels-main-panel{grid-column:3;grid-row:1;min-width:0;min-height:0;height:100dvh;background:#11171c;color:#e9edef;display:flex;flex-direction:column;overflow:hidden;}
.channels-main-header{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 14px;border-bottom:1px solid rgba(233,237,239,.08); padding: 2px 5px 5px !important; background: #11171c !important; overflow: auto !important;}
.channels-main-title-wrap{display:flex;align-items:center;gap:11px;min-width:0;}
.channel-main-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#303940;color:#dce3e6;font-weight:800;}
.channel-main-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.channels-main-title-wrap .meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.channels-main-title-wrap strong{font-size:15px;color:#f2f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channels-main-title-wrap .meta span{font-size:10.5px;color:#98a4ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channels-main-actions{display:flex;align-items:center;gap:4px;position:relative;}
.channels-main-actions .icon-btn{width:38px;height:38px;border-radius:50%;color:#cfd6da;background:transparent;}
.channels-main-actions .icon-btn:hover{background:#2a3238;color:#fff;}
.channel-more-menu{right:0;top:46px;min-width:180px;}
.channels-main-posts{min-height:0;flex:1;overflow:auto;background:#11171c;padding:16px 18px 28px;}
.channels-main-empty{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:#8f9ba2;}
.channels-main-empty strong{font-size:16px;color:#dce3e6;}
.channels-main-empty span{font-size:12px;color:#8f9ba2;}
.channels-main-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#20272d;color:#68747b;font-size:34px;}
.channels-main-spinner{font-size:12px;color:#9aa6ad;}
.channel-feed-intro{display:flex;align-items:center;gap:12px;margin:0 auto 14px;max-width:840px;padding:12px 14px;border-radius:10px;background:#20272d;border:1px solid rgba(233,237,239,.07);}
.channel-feed-intro>span:first-child{font-size:20px;}
.channel-feed-intro div{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.channel-feed-intro strong{font-size:12px;color:#f2f4f5;}
.channel-feed-intro small{font-size:10.5px;color:#9aa6ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channel-followed-pill{background:#123a27!important;color:#61e28e!important;border-radius:999px;padding:5px 8px;font-size:9px!important;}
.channel-inline-composer{max-width:840px;margin:0 auto 14px;padding:12px;border:1px solid rgba(233,237,239,.09);background:#20272d;border-radius:10px;}
.channel-inline-composer textarea{width:100%;min-height:74px;resize:vertical;border:0;outline:0;background:#11171c;color:#e9edef;border-radius:8px;padding:10px;font-size:12px;}
.channel-inline-composer>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;}
.channel-inline-composer input[type=file]{min-width:0;font-size:10px;color:#9aa6ad;}
.channel-post-feed{display:flex;flex-direction:column;gap:14px;max-width:840px;margin:0 auto;}
.channel-post{background:#20272d;border:1px solid rgba(233,237,239,.08);border-radius:10px;overflow:hidden;}
.channel-post-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px 6px;gap:8px;}
.channel-post-head strong{font-size:11.5px;color:#f2f4f5;}
.channel-post-head time{font-size:9px;color:#8f9ba2;white-space:nowrap;}
.channel-post>p{margin:0;padding:2px 13px 10px;white-space:pre-wrap;font-size:12px;line-height:1.5;color:#dce3e6;}
.channel-post>img,.channel-post>video{display:block;width:min(100%,720px);max-height:460px;object-fit:cover;margin:0 auto;background:#11171c;}
.channel-post-actions{display:flex;gap:6px;padding:8px 10px 10px;border-top:1px solid rgba(233,237,239,.06);}
.channel-post-actions button{border:0;background:#2a3238;color:#cfd6da;border-radius:8px;padding:7px 10px;font-size:10px;cursor:pointer;}
.channel-post-actions button:hover{background:#344049;color:#fff;}
@media(max-width:820px){
  .channels-main-panel{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.channels-open .sidebar{display:none!important;}
  .channels-side-view{height:calc(100dvh - 62px)!important;}
  .channels-main-posts{padding:12px 10px 20px;}
}
@media(min-width:821px){.channels-main-panel{display:flex!important}.channels-main-panel[hidden]{display:none!important}}

/* ============================================================
   Dedicated Calls page — WhatsApp-style calls workspace
   ============================================================ */
.calls-side-view{height:100dvh;min-height:0;display:flex;flex-direction:column;background:#11171c!important;color:#e9edef;overflow:hidden;}
.calls-side-view[hidden],.calls-main-panel[hidden]{display:none!important;}
.calls-side-header{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;background:#20272d;border-bottom:1px solid rgba(233,237,239,.08);}
.calls-side-header h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;color:#f1f4f5;}
.calls-side-actions{display:flex;align-items:center;gap:2px;}
.calls-side-actions .icon-btn{width:40px;height:40px;border-radius:50%;background:transparent!important;color:#dce3e6!important;}
.calls-side-actions .icon-btn:hover{background:#2a3238!important;color:#fff!important;}
.calls-side-search{margin:12px 14px 8px;height:38px;border-radius:8px;background:#2a3238;display:flex;align-items:center;gap:9px;padding:0 12px;flex:none;}
.calls-side-search svg{width:16px;height:16px;color:#9aa6ad;flex:none;}
.calls-side-search input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#e9edef;font-size:12px;}
.calls-side-search input::placeholder{color:#98a3aa;}
.calls-section-label{padding:13px 18px 8px;text-transform:none;font-size:12px;font-weight:700;color:#e9edef;flex:none;}
.calls-section-label.recent-label{padding-top:17px;}
.call-favourite-row{width:100%;display:flex;align-items:center;gap:14px;padding:10px 18px;background:transparent;border:0;color:#e9edef;text-align:left;cursor:pointer;}
.call-favourite-row:hover{background:#20272d;}
.call-favourite-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#06130b;flex:none;}
.call-favourite-icon svg{width:20px;height:20px;}
.call-favourite-row>span:last-child{font-size:13px;font-weight:600;}
.calls-recent-list{flex:1;min-height:0;overflow:auto;padding:0 7px 18px;}
.call-history-page-row{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 10px;border-radius:8px;background:transparent;}
.call-history-page-row:hover{background:#20272d;}
.call-history-page-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#2f3840;color:#dce3e6;font-size:14px;font-weight:800;}
.call-history-page-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.call-history-page-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.call-history-page-copy strong{font-size:13px;color:#f2f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-history-page-copy small{font-size:10.5px;color:#9aa6ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-history-direction{color:#7fe2a0;}
.call-history-direction.missed{color:#ff7b86;}
.call-history-page-meta{display:flex;align-items:center;gap:8px;align-self:stretch;}
.call-history-page-meta time{font-size:9.5px;color:#9aa6ad;white-space:nowrap;}
.call-history-call-btn{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#dce3e6;cursor:pointer;}
.call-history-call-btn svg{width:18px;height:18px;}
.call-history-call-btn:hover{background:#2a3238;color:#fff;}
.call-history-page-row.missed .call-history-page-copy strong{color:#f7c7ca;}
.calls-list-empty{padding:30px 18px;display:flex;flex-direction:column;gap:5px;text-align:center;color:#8f9ba2;font-size:11px;}
.calls-list-empty strong{font-size:13px;color:#dce3e6;}
.calls-main-panel{grid-column:3;grid-row:1;height:100dvh;min-width:0;min-height:0;background:#11171c;color:#e9edef;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.calls-main-panel[hidden]{display:none!important;}
.calls-main-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px;max-width:780px;margin-top:-6vh;}
.calls-main-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:18px;color:#6b747a;background:#20272d;}
.calls-main-icon svg{width:48px;height:48px;}
.calls-main-empty h2{margin:0;font-size:25px;font-weight:500;letter-spacing:-.03em;color:#f0f2f3;}
.calls-main-empty p{margin:0;color:#8f9ba2;font-size:13px;}
.calls-main-actions{display:flex;align-items:flex-start;justify-content:center;gap:22px;margin-top:25px;flex-wrap:wrap;}
.call-landing-action{width:96px;display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:0;color:#dce3e6;cursor:pointer;}
.call-landing-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#2a3035;color:#e9edef;transition:transform .15s ease,background .15s ease;}
.call-landing-action:hover .call-landing-icon{transform:translateY(-2px);background:#343c42;}
.call-landing-icon svg{width:23px;height:23px;}
.call-landing-action>span:last-child{font-size:11px;color:#f0f2f3;white-space:nowrap;}
.calls-main-encryption{display:flex;align-items:center;gap:6px;margin-top:46px;font-size:10.5px;color:#7f8a91;}
.calls-main-encryption svg{width:14px;height:14px;}
.call-picker-modal{width:min(560px,calc(100vw - 28px));max-width:560px;overflow:hidden;padding:0;}
.call-picker-search{margin:2px 18px 8px;height:40px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);}
.call-picker-search svg{width:16px;height:16px;color:var(--ink-faint);}
.call-picker-search input{width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px;}
.call-picker-list{max-height:min(55vh,440px);overflow:auto;padding:4px 12px 14px;}
.call-picker-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 6px;border-radius:10px;}
.call-picker-row:hover{background:var(--surface-2);}
.call-picker-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-3);color:var(--ink);font-weight:800;}
.call-picker-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.call-picker-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.call-picker-meta strong{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-picker-meta small{font-size:10px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-picker-actions{display:flex;gap:5px;}
.call-picker-actions button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface-3);color:var(--ink-soft);cursor:pointer;}
.call-picker-actions button:hover{background:var(--accent-soft);color:var(--accent-strong);}
.call-picker-actions svg{width:17px;height:17px;}
#app.calls-open .sidebar-default-view,#app.calls-open .new-chat-side-view{display:none!important;}
#app.calls-open .chat-panel{display:none!important;}
#app.calls-open .status-side-view,#app.calls-open .channels-side-view{display:none!important;}
#app.calls-open .calls-side-view{display:flex!important;grid-column:2!important;grid-row:1!important;}
#app.calls-open .calls-main-panel{display:flex!important;grid-column:3!important;grid-row:1!important;}
@media(max-width:820px){
  #app.calls-open .calls-main-panel{display:none!important;}
  #app.calls-open .calls-side-view{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  .calls-side-header{height:64px;}
  .calls-main-actions{gap:12px;}
}


/* Group screen / group info reference pass */
.group-drawer-info-list{display:flex;flex-direction:column;margin:18px -22px 0;border-top:1px solid rgba(233,237,239,.08);}
.group-drawer-info-list .drawer-info-row{border:0;border-radius:0;border-bottom:1px solid rgba(233,237,239,.06);min-height:56px;text-align:left;padding:11px 22px;background:transparent;}
.group-drawer-info-list .drawer-info-row:hover{background:#20272d;}
.group-drawer-info-list .drawer-danger-row .drawer-info-copy strong{color:#ff9aa9;}
.group-created-meta{padding:24px 22px 12px;text-align:left;color:#7f8a91;font-size:11px;line-height:1.5;}
.group-changes-list{padding:8px 10px 22px;max-height:min(65vh,620px);overflow:auto;}
.group-change-row{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;}
.group-change-row:hover{background:#20272d;}
.group-change-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#263038;color:#25d366;flex:none;}
.group-change-icon svg{width:17px;height:17px;}
.group-change-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.group-change-copy strong{font-size:12px;color:#e9edef;font-weight:650;}
.group-change-copy span{font-size:10px;color:#8e9aa1;}
#filterCountGroups{opacity:.9;}
@media(max-width:820px){.group-drawer-info-list{margin-left:-12px;margin-right:-12px}.group-drawer-info-list .drawer-info-row{padding-left:18px;padding-right:18px}.group-created-meta{padding-left:18px;padding-right:18px;}}

/* Requests live inside New chat now; the former rail slot is Channels. */
.new-chat-request-shortcut{position:relative;}
.new-chat-request-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:#25d366;color:#06110a;font-size:10px;font-weight:800;}
.new-chat-request-badge[hidden]{display:none!important;}

/* Mobile chat header: keep search, voice/video and more visible in the top bar. */
@media(max-width:820px){
  .app-shell.chat-open .chat-header-actions{display:flex!important;align-items:center!important;gap:1px!important;min-width:0!important;flex-shrink:0!important;}
  .app-shell.chat-open .chat-header-actions .icon-btn{display:grid!important;visibility:visible!important;opacity:1!important;flex:0 0 36px!important;width:36px!important;height:36px!important;}
  .app-shell.chat-open .chat-header-left{min-width:0!important;flex:1 1 auto!important;}
}
@media(max-width:520px){
  .app-shell.chat-open .chat-header-actions .icon-btn{flex-basis:34px!important;width:34px!important;height:34px!important;}
  .app-shell.chat-open .chat-header-actions .icon-btn svg{width:17px!important;height:17px!important;}
}

/* CUNNACT mobile chat header: WhatsApp-style quick actions */
@media (max-width: 820px){
  .app-shell.chat-open .chat-header{min-height:64px!important;padding:7px 8px!important;gap:6px!important;}
  .app-shell.chat-open .chat-header-left{gap:7px!important;min-width:0!important;}
  .app-shell.chat-open .chat-header-left .meta{min-width:0!important;overflow:hidden!important;}
  .app-shell.chat-open .chat-header-left .meta .chat-title-line strong{max-width:36vw!important;}
  .app-shell.chat-open .chat-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:0!important;min-width:0!important;flex:0 0 auto!important;}
  .app-shell.chat-open .chat-header-actions .icon-btn{display:grid!important;visibility:visible!important;opacity:1!important;flex:0 0 36px!important;width:36px!important;height:36px!important;padding:0!important;}
  .app-shell.chat-open .chat-header-actions #chatPopoutBtn{display:none!important;}
  .app-shell.chat-open .chat-header-actions #groupCallBtn{display:none!important;}
  .app-shell.chat-open .chat-header-actions #chatMoreBtn{display:grid!important;}
}
@media (max-width: 520px){
  .app-shell.chat-open .chat-header-actions .icon-btn{flex-basis:33px!important;width:33px!important;height:33px!important;}
  .app-shell.chat-open .chat-header-actions .icon-btn svg{width:17px!important;height:17px!important;}
  .app-shell.chat-open .chat-header-left .meta .chat-title-line strong{max-width:30vw!important;}
}


/* ============================================================
   CUNNACT CALLS — final interaction/layout pass
   ============================================================ */
.calls-side-view{background:var(--surface)!important;color:var(--ink)!important;border-right:1px solid var(--border)!important;}
.calls-side-view[hidden],.calls-main-panel[hidden]{display:none!important;}
.calls-side-header{height:68px!important;background:var(--surface)!important;border-bottom:1px solid var(--border)!important;padding:0 14px 0 18px!important;}
.calls-side-header h2{font-family:var(--font-display);font-size:20px!important;color:var(--ink)!important;}
.calls-side-actions .icon-btn{color:var(--ink-soft)!important;background:transparent!important;}
.calls-side-actions .icon-btn:hover{background:var(--surface-2)!important;color:var(--ink)!important;}
.calls-side-search{margin:12px 14px 10px!important;height:42px!important;border-radius:12px!important;background:var(--surface-2)!important;border:1px solid var(--border)!important;}
.calls-side-search input{color:var(--ink)!important;}
.calls-section-label{color:var(--ink)!important;padding:14px 18px 8px!important;}
.call-favourite-row{color:var(--ink)!important;border-radius:10px;margin:0 8px;width:calc(100% - 16px)!important;padding:10px 10px!important;}
.call-favourite-row:hover{background:var(--surface-2)!important;}
.call-favourite-icon{background:linear-gradient(135deg,var(--accent),var(--accent-strong))!important;color:#fff!important;width:40px;height:40px;box-shadow:0 8px 18px var(--accent-soft);}
.calls-recent-list{padding:2px 8px 20px!important;}
.call-history-page-row{border-radius:12px!important;padding:10px 8px!important;transition:background .15s ease,transform .15s ease;cursor:pointer;}
.call-history-page-row:hover{background:var(--surface-2)!important;}
.call-history-page-copy strong{color:var(--ink)!important;}
.call-history-page-copy small,.call-history-page-meta time{color:var(--ink-faint)!important;}
.call-history-direction{color:var(--online)!important;}
.call-history-direction.missed{color:#ef6674!important;}
.call-history-call-btn:hover{background:var(--accent-soft)!important;color:var(--accent-strong)!important;}
.calls-list-empty{color:var(--ink-faint)!important;}
.calls-list-empty strong{color:var(--ink)!important;}
.calls-main-panel{background:var(--bg)!important;color:var(--ink)!important;}
.calls-main-empty{max-width:760px;margin-top:-4vh!important;}
.calls-main-icon{background:var(--surface-2)!important;color:var(--accent)!important;border:1px solid var(--border)!important;box-shadow:0 12px 30px var(--shadow-sm);}
.calls-main-empty h2{color:var(--ink)!important;font-family:var(--font-display);}
.calls-main-empty p{color:var(--ink-faint)!important;}
.call-landing-icon{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--border)!important;}
.call-landing-action:hover .call-landing-icon{background:var(--accent-soft)!important;color:var(--accent-strong)!important;}
.call-landing-action>span:last-child{color:var(--ink)!important;}
.calls-main-encryption{color:var(--ink-faint)!important;}

/* The calls view shares the sidebar grid slot; never let the hidden chat sidebar cover it. */
#app.calls-open > .app-shell-body > .sidebar{display:none!important;}
#app.calls-open > .app-shell-body > .calls-side-view{display:flex!important;grid-column:2!important;grid-row:1!important;z-index:3!important;}
#app.calls-open > .app-shell-body > .calls-main-panel{display:flex!important;grid-column:3!important;grid-row:1!important;z-index:2!important;}

.call-picker-modal{background:var(--surface)!important;border:1px solid var(--border)!important;}
.call-picker-modal .modal-header{background:var(--surface)!important;}

.incoming-call-card{background:var(--surface)!important;color:var(--ink)!important;padding:34px 28px!important;border:1px solid var(--border)!important;}
.call-incoming-avatar,.call-active-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface-2);border:3px solid var(--accent-soft);box-shadow:0 0 0 8px var(--accent-soft);}
.call-incoming-avatar{width:88px;height:88px;margin:0 auto 14px;}
.call-active-avatar{width:44px;height:44px;flex:none;border-width:2px;box-shadow:none;}
.call-incoming-avatar img,.call-active-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.call-incoming-avatar .avatar-fallback,.call-active-avatar .avatar-fallback{font-weight:800;color:var(--ink);font-size:28px;}
.call-active-avatar .avatar-fallback{font-size:15px;}
.incoming-call-card h2{color:var(--ink)!important;margin:7px 0 3px!important;}
.incoming-call-card p{color:var(--ink-faint)!important;}
.incoming-call-status{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 18px;font-size:11px;color:var(--online);}
.call-pulse{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 5px color-mix(in srgb,var(--online) 18%,transparent);animation:callPulse 1.4s infinite ease-out;}
@keyframes callPulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.25);opacity:.65}}
.incoming-call-actions{gap:12px!important;}
.incoming-call-actions .btn{min-width:122px!important;min-height:44px!important;border-radius:999px!important;}

.call-modal-content{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:var(--shadow-lg)!important;}
.call-header{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;padding:14px 16px!important;}
.call-header-person{display:flex;align-items:center;gap:10px;min-width:0;}
.call-header-person h2{font-family:var(--font-display);color:var(--ink)!important;font-size:16px!important;margin:2px 0!important;}
.call-header-person p{color:var(--ink-faint)!important;margin:0!important;font-size:10.5px!important;}
.call-header-actions{display:flex;align-items:center;gap:8px;}
.call-duration{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint);padding:7px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);min-width:50px;text-align:center;}
.call-stage{background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--accent) 9%,var(--bg)) 0%,var(--bg) 42%,var(--bg) 100%)!important;border:0!important;border-radius:0!important;min-height:480px!important;position:relative;overflow:hidden;}
.call-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 2px 2px, color-mix(in srgb,var(--ink) 10%,transparent) 1px,transparent 1px);background-size:26px 26px;opacity:.16;}
.call-stage-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--ink);}
.call-stage-placeholder[hidden]{display:none!important;}
.call-stage-avatar{width:106px;height:106px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--surface-2);border:3px solid var(--accent-soft);box-shadow:0 0 0 10px var(--accent-soft);}
.call-stage-avatar img{width:100%;height:100%;object-fit:cover;}
.call-stage-avatar .avatar-fallback{font-size:34px;color:var(--ink);font-weight:850;}
.call-stage-placeholder strong{font-family:var(--font-display);font-size:18px;}
.call-stage-placeholder small{font-size:11px;color:var(--ink-faint);}
.local-call-video{z-index:5!important;right:16px!important;top:16px!important;width:180px!important;height:120px!important;border-radius:16px!important;border:2px solid var(--border)!important;box-shadow:var(--shadow-md)!important;}
.remote-call-videos{position:relative;z-index:3!important;padding:12px!important;align-items:stretch!important;}
.remote-video-card{background:var(--surface-2)!important;border:1px solid var(--border)!important;}
.call-controls{background:var(--surface)!important;border-top:1px solid var(--border)!important;padding:12px 12px 14px!important;gap:9px!important;}
.call-controls-primary{align-items:center!important;}
.call-control.call-control-circle{min-width:62px!important;min-height:58px!important;padding:8px 9px!important;border-radius:14px!important;background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--border)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;}
.call-control.call-control-circle:hover{background:var(--accent-soft)!important;color:var(--accent-strong)!important;}
.call-control-icon{font-size:17px;line-height:1;}
.call-control-label{font-size:9px;font-weight:750;}
.call-control.end-call{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important;border-radius:50%!important;min-width:62px!important;width:62px!important;}
.call-control.end-call:hover{background:#dc2626!important;}
@media(max-width:820px){
  #app.calls-open > .app-shell-body > .sidebar{display:none!important;}
  #app.calls-open > .app-shell-body > .calls-side-view{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;width:100%!important;}
  #app.calls-open > .app-shell-body > .calls-main-panel{display:none!important;}
  .call-picker-modal{width:calc(100vw - 18px)!important;max-width:none!important;}
  .call-stage{min-height:calc(100dvh - 220px)!important;}
  .local-call-video{width:118px!important;height:84px!important;right:10px!important;top:10px!important;}
  .call-header{padding:10px 11px!important;}
  .call-header-actions .btn{display:none!important;}
  .call-controls{gap:6px!important;padding:10px 8px!important;}
  .call-control.call-control-circle{min-width:50px!important;min-height:54px!important;padding:7px 5px!important;}
  .call-control.end-call{min-width:58px!important;width:58px!important;}
  .call-stage-avatar{width:92px;height:92px;}
}


/* ============================================================
   CUNNACT TRACE — WhatsApp-style status composer and workspace
   UI-only pass: keeps the existing stories collection/backend.
   ============================================================ */
.status-side-view{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;background:var(--surface)!important;color:var(--ink)!important;position:relative!important;overflow:hidden!important;border-right:1px solid var(--border)!important;}
.status-side-view[hidden]{display:none!important;}
.status-side-header{height:68px!important;flex:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 14px 0 18px!important;background:var(--surface)!important;border-bottom:1px solid var(--border)!important;}
.status-side-header h2{margin:0!important;font-family:var(--font-display)!important;font-size:20px!important;font-weight:800!important;letter-spacing:-.03em!important;color:var(--ink)!important;}
.status-side-actions{display:flex!important;align-items:center!important;gap:2px!important;position:relative!important;}
.status-side-actions .icon-btn{width:38px!important;height:38px!important;border-radius:50%!important;color:var(--ink-soft)!important;background:transparent!important;}
.status-side-actions .icon-btn:hover{background:var(--surface-2)!important;color:var(--ink)!important;}
.status-add-menu,.status-more-menu{top:52px!important;min-width:205px!important;padding:7px!important;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:var(--shadow-lg)!important;}
.status-add-menu{right:0!important;}
.status-more-menu{right:42px!important;}
.status-add-menu button,.status-more-menu button{min-height:42px!important;color:var(--ink)!important;border-radius:10px!important;background:transparent!important;font-size:12px!important;}
.status-add-menu button:hover,.status-more-menu button:hover{background:var(--surface-2)!important;}
.my-status-row{flex:none!important;width:calc(100% - 16px)!important;margin:8px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;background:var(--surface-2)!important;border:0!important;border-radius:13px!important;color:var(--ink)!important;text-align:left!important;cursor:pointer!important;}
.my-status-row:hover{background:var(--surface-3)!important;}
.my-status-avatar-wrap{width:50px!important;height:50px!important;}
.my-status-plus{width:19px!important;height:19px!important;background:var(--online)!important;border-color:var(--surface-2)!important;color:#fff!important;}
.my-status-copy strong{font-size:13px!important;color:var(--ink)!important;}
.my-status-copy small{font-size:11px!important;color:var(--ink-faint)!important;}
.status-section-label{padding:14px 18px 9px!important;font-size:10px!important;color:var(--ink-faint)!important;text-transform:none!important;letter-spacing:0!important;font-weight:750!important;}
.status-updates-list{min-height:0!important;overflow:auto!important;padding:0 8px 20px!important;}
.status-update-row{width:100%!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 10px!important;background:transparent!important;border:0!important;border-radius:10px!important;color:var(--ink)!important;text-align:left!important;cursor:pointer!important;}
.status-update-row:hover{background:var(--surface-2)!important;}
.status-avatar-ring{width:50px!important;height:50px!important;padding:2px!important;background:linear-gradient(135deg,#7653FA 0%,#2376FC 52%,#01B3D9 100%)!important;}
.status-avatar-ring.seen{background:var(--border)!important;}
.status-avatar-inner{background:var(--surface)!important;color:var(--ink)!important;}
.status-update-copy strong{font-size:13px!important;color:var(--ink)!important;}
.status-update-copy small{font-size:11px!important;color:var(--ink-faint)!important;}
.status-list-empty{padding:28px 14px!important;color:var(--ink-faint)!important;}
.status-list-empty strong{color:var(--ink)!important;}
.status-main-panel{grid-column:3!important;grid-row:1!important;height:100dvh!important;min-width:0!important;min-height:0!important;background:var(--bg)!important;display:grid!important;place-items:center!important;overflow:hidden!important;}
.status-main-panel[hidden]{display:none!important;}
.status-main-empty{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:12px!important;color:var(--ink-faint)!important;padding:24px!important;margin-top:-3vh!important;}
.status-main-icon{width:76px!important;height:76px!important;display:grid!important;place-items:center!important;color:var(--ink-faint)!important;opacity:.65!important;}
.status-main-icon svg{width:64px!important;height:64px!important;}
.status-main-empty h2{margin:0!important;font-size:27px!important;font-weight:650!important;color:var(--ink)!important;letter-spacing:-.03em!important;}
.status-main-empty p{margin:0!important;font-size:13px!important;color:var(--ink-faint)!important;max-width:450px!important;}

.trace-composer-modal{padding:0!important;background:var(--bg)!important;backdrop-filter:none!important;z-index:6200!important;}
.trace-composer-shell{width:100%!important;height:100%!important;display:grid!important;grid-template-rows:auto 1fr auto!important;position:relative!important;overflow:hidden!important;background:#263238;transition:background .25s ease!important;}
.trace-composer-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;padding:12px 16px!important;color:#fff!important;position:relative!important;z-index:3!important;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent)!important;}
.trace-composer-title{min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important;align-items:center!important;}
.trace-composer-title span{font-size:9px!important;font-weight:900!important;letter-spacing:.18em!important;opacity:.8!important;}
.trace-composer-title strong{font-size:14px!important;font-weight:800!important;}
.trace-composer-tools{display:flex!important;align-items:center!important;gap:5px!important;}
.trace-icon-btn,.trace-bottom-icon{width:42px!important;height:42px!important;border-radius:50%!important;border:0!important;background:rgba(0,0,0,.16)!important;color:#fff!important;display:grid!important;place-items:center!important;cursor:pointer!important;backdrop-filter:blur(10px)!important;}
.trace-icon-btn:hover,.trace-bottom-icon:hover{background:rgba(0,0,0,.28)!important;}
.trace-icon-btn svg,.trace-bottom-icon svg{width:20px!important;height:20px!important;}
.trace-icon-btn span{font-size:15px!important;font-weight:700!important;}
.trace-canvas{min-height:0!important;position:relative!important;display:grid!important;place-items:center!important;padding:72px 7vw 112px!important;overflow:auto!important;}
.trace-text-input{width:min(820px,92vw)!important;min-height:180px!important;max-height:48vh!important;border:0!important;outline:0!important;resize:none!important;background:transparent!important;color:#fff!important;text-align:center!important;font-size:38px!important;line-height:1.18!important;font-weight:750!important;font-family:var(--font-display)!important;text-shadow:0 2px 14px rgba(0,0,0,.2)!important;}
.trace-text-input::placeholder{color:rgba(255,255,255,.68)!important;}
.trace-text-input.is-large{font-size:52px!important;line-height:1.08!important;}
.trace-text-input.is-script{font-family:Georgia,serif!important;font-style:italic!important;font-size:46px!important;}
.trace-text-input.with-media{min-height:80px!important;font-size:18px!important;text-align:left!important;max-width:680px!important;background:rgba(0,0,0,.18)!important;padding:12px 15px!important;border-radius:14px!important;}
.trace-media-preview{width:min(900px,88vw)!important;max-height:62vh!important;display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:18px!important;background:rgba(0,0,0,.18)!important;box-shadow:0 20px 60px rgba(0,0,0,.25)!important;margin-bottom:12px!important;}
.trace-media-preview img,.trace-media-preview video{max-width:100%!important;max-height:60vh!important;object-fit:contain!important;border-radius:18px!important;display:block!important;}
.trace-media-preview[hidden]{display:none!important;}
.trace-media-input,.trace-privacy-select{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.trace-emoji-panel{position:absolute!important;top:66px!important;right:128px!important;width:min(340px,88vw)!important;padding:10px!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important;background:rgba(17,23,28,.92)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.35)!important;backdrop-filter:blur(18px)!important;z-index:8!important;}
.trace-emoji-panel[hidden]{display:none!important;}
.trace-emoji-panel button{height:44px!important;border:0!important;background:transparent!important;border-radius:10px!important;font-size:22px!important;cursor:pointer!important;}
.trace-emoji-panel button:hover{background:rgba(255,255,255,.12)!important;}
.trace-tools-panel{position:absolute!important;left:16px!important;bottom:78px!important;width:min(460px,calc(100vw - 32px))!important;padding:12px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;background:rgba(17,23,28,.94)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.35)!important;backdrop-filter:blur(18px)!important;z-index:8!important;}
.trace-tools-panel[hidden]{display:none!important;}
.trace-tool-field{display:grid!important;gap:5px!important;}
.trace-tool-field label{font-size:10px!important;font-weight:800!important;color:#cfd8dc!important;}
.trace-tool-field input,.trace-tool-field textarea{width:100%!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:10px!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:9px 10px!important;outline:none!important;font:inherit!important;}
.trace-tool-field textarea{resize:vertical!important;}
.trace-bottom-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:12px 18px max(16px,env(safe-area-inset-bottom))!important;color:#fff!important;position:relative!important;z-index:5!important;background:linear-gradient(0deg,rgba(0,0,0,.32),transparent)!important;}
.trace-bottom-left,.trace-bottom-right{display:flex!important;align-items:center!important;gap:8px!important;}
.trace-audience-btn{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:42px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important;background:rgba(0,0,0,.12)!important;color:#fff!important;backdrop-filter:blur(10px)!important;font-weight:750!important;font-size:12px!important;cursor:pointer!important;}
.trace-audience-btn:hover{background:rgba(0,0,0,.22)!important;}
.trace-audience-icon{font-size:13px!important;}
.trace-send-btn{width:58px!important;height:58px!important;border-radius:50%!important;border:0!important;background:var(--online)!important;color:#06130b!important;display:grid!important;place-items:center!important;box-shadow:0 14px 34px rgba(0,0,0,.26)!important;cursor:pointer!important;}
.trace-send-btn:hover{transform:translateY(-1px) scale(1.02)!important;}
.trace-send-btn svg{width:24px!important;height:24px!important;}

.trace-privacy-modal{background:rgba(0,0,0,.65)!important;backdrop-filter:blur(12px)!important;}
.trace-privacy-shell{width:min(520px,calc(100vw - 28px))!important;max-height:min(86vh,760px)!important;display:flex!important;flex-direction:column!important;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:var(--shadow-lg)!important;overflow:hidden!important;}
.trace-privacy-header{display:flex!important;align-items:center!important;gap:10px!important;padding:14px 16px!important;border-bottom:1px solid var(--border)!important;}
.trace-privacy-header>div{display:flex!important;flex-direction:column!important;gap:2px!important;}
.trace-privacy-header span{font-size:9px!important;letter-spacing:.16em!important;font-weight:900!important;color:var(--accent)!important;}
.trace-privacy-header h2{margin:0!important;font-size:18px!important;color:var(--ink)!important;}
.trace-privacy-body{overflow:auto!important;padding:18px!important;}
.trace-privacy-intro{font-size:12px!important;color:var(--ink-faint)!important;margin:0 0 12px!important;}
.trace-privacy-option{display:flex!important;align-items:center!important;gap:12px!important;padding:12px 10px!important;border-radius:12px!important;cursor:pointer!important;}
.trace-privacy-option:hover{background:var(--surface-2)!important;}
.trace-privacy-option input{width:18px!important;height:18px!important;accent-color:var(--accent)!important;}
.trace-privacy-option span{display:flex!important;flex-direction:column!important;gap:3px!important;}
.trace-privacy-option strong{font-size:13px!important;color:var(--ink)!important;}
.trace-privacy-option small{font-size:10.5px!important;color:var(--ink-faint)!important;}
.trace-audience-picker-wrap{margin-top:12px!important;padding-top:12px!important;border-top:1px solid var(--border)!important;}
.trace-privacy-footer{display:flex!important;justify-content:flex-end!important;padding:12px 16px!important;border-top:1px solid var(--border)!important;}

@media(max-width:820px){
  #app.status-open .sidebar{display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.status-open .status-main-panel{display:none!important;}
  #app.status-open .status-side-view{display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  .trace-composer-topbar{padding:10px 10px!important;}
  .trace-canvas{padding:52px 16px 96px!important;}
  .trace-text-input{font-size:30px!important;width:95vw!important;max-height:54vh!important;}
  .trace-text-input.is-large{font-size:40px!important;}
  .trace-text-input.is-script{font-size:36px!important;}
  .trace-emoji-panel{top:60px!important;right:10px!important;}
  .trace-tools-panel{grid-template-columns:1fr!important;left:10px!important;right:10px!important;width:auto!important;bottom:78px!important;}
  .trace-audience-btn{max-width:calc(100vw - 105px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
}


/* WhatsApp-like full-screen Trace viewer. */
.trace-viewer-modal{padding:0!important;background:#000!important;backdrop-filter:none!important;z-index:6100!important;}
.trace-viewer-shell{position:relative!important;width:100%!important;height:100%!important;min-height:100dvh!important;overflow:hidden!important;background:#090b0d!important;color:#fff!important;display:grid!important;grid-template-rows:auto 1fr auto!important;}
.trace-viewer-topbar{position:absolute!important;inset:0 0 auto 0!important;height:74px!important;display:grid!important;grid-template-columns:46px 1fr 46px!important;align-items:center!important;gap:8px!important;padding:10px 14px!important;z-index:10!important;background:linear-gradient(180deg,rgba(0,0,0,.66),transparent)!important;}
.trace-viewer-progress{position:absolute!important;left:14px!important;right:14px!important;top:7px!important;height:3px!important;display:flex!important;gap:3px!important;}
.trace-viewer-progress span{height:100%!important;flex:1!important;border-radius:9px!important;background:rgba(255,255,255,.28)!important;overflow:hidden!important;}
.trace-viewer-progress span.done,.trace-viewer-progress span.active{background:#fff!important;}
.trace-viewer-owner{min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;}
.trace-viewer-owner-meta{display:flex!important;flex-direction:column!important;gap:2px!important;max-width:min(72vw,620px)!important;text-shadow:0 1px 7px rgba(0,0,0,.55)!important;}
.trace-viewer-owner-meta strong{font-size:14px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.trace-viewer-owner-meta span{font-size:10px!important;color:rgba(255,255,255,.82)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.trace-viewer-back,.trace-viewer-close{background:rgba(0,0,0,.22)!important;}
.trace-viewer-body{grid-row:1 / -1!important;min-height:0!important;width:100%!important;height:100%!important;display:grid!important;place-items:center!important;position:relative!important;padding:26px max(24px,7vw) 82px!important;overflow:hidden!important;background:radial-gradient(circle at 50% 40%,rgba(40,48,56,.28),transparent 48%),#090b0d!important;}
.trace-viewer-body::before{content:"";position:absolute!important;inset:0!important;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 55%)!important;pointer-events:none!important;}
.trace-viewer-body img,.trace-viewer-body video{position:relative!important;z-index:1!important;max-width:min(900px,84vw)!important;max-height:calc(100dvh - 130px)!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:4px!important;background:#000!important;box-shadow:0 20px 70px rgba(0,0,0,.5)!important;}
.trace-viewer-body .story-viewer-text{position:relative!important;z-index:1!important;color:#fff!important;font-size:36px!important;line-height:1.2!important;text-shadow:0 2px 18px rgba(0,0,0,.45)!important;max-width:820px!important;}
.trace-viewer-body .story-viewer-sticker{position:relative!important;z-index:1!important;font-size:84px!important;}
.trace-viewer-body .story-viewer-link,.trace-viewer-body .story-poll{position:relative!important;z-index:1!important;background:rgba(17,23,28,.76)!important;color:#fff!important;border-color:rgba(255,255,255,.16)!important;backdrop-filter:blur(12px)!important;}
.trace-viewer-body .story-viewer-tools{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;bottom:94px!important;color:rgba(255,255,255,.8)!important;z-index:2!important;background:rgba(0,0,0,.28)!important;border-radius:999px!important;padding:7px 10px!important;}
.trace-viewer-edge{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:12!important;width:42px!important;height:42px!important;border:0!important;border-radius:50%!important;background:rgba(0,0,0,.3)!important;color:#fff!important;font-size:40px!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer!important;}
.trace-viewer-edge:hover{background:rgba(0,0,0,.5)!important;}
.trace-viewer-edge-prev{left:20px!important;}.trace-viewer-edge-next{right:20px!important;}
.trace-viewer-replybar{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;bottom:14px!important;width:min(760px,calc(100vw - 28px))!important;display:flex!important;align-items:center!important;gap:6px!important;padding:7px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;background:rgba(14,18,22,.82)!important;backdrop-filter:blur(16px)!important;z-index:13!important;}
.trace-reaction-select{display:none!important;}
.trace-reply-icon{flex:0 0 38px!important;width:38px!important;height:38px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#fff!important;font-size:20px!important;cursor:pointer!important;}
.trace-reply-icon:hover{background:rgba(255,255,255,.1)!important;}
.trace-viewer-replybar input{flex:1!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font-size:13px!important;padding:0 5px!important;}
.trace-viewer-replybar input::placeholder{color:rgba(255,255,255,.58)!important;}
.trace-reply-send{flex:0 0 42px!important;width:42px!important;height:42px!important;border:0!important;border-radius:50%!important;background:var(--online)!important;color:#06130b!important;display:grid!important;place-items:center!important;cursor:pointer!important;}
.trace-reply-send svg{width:19px!important;height:19px!important;}
@media(max-width:820px){
 .trace-viewer-topbar{height:64px!important;padding:9px 9px!important;}
 .trace-viewer-progress{left:9px!important;right:9px!important;top:5px!important;}
 .trace-viewer-body{padding:20px 0 76px!important;}
 .trace-viewer-body img,.trace-viewer-body video{max-width:100vw!important;max-height:calc(100dvh - 120px)!important;border-radius:0!important;}
 .trace-viewer-body .story-viewer-text{font-size:28px!important;padding:0 24px!important;}
 .trace-viewer-edge{width:38px!important;height:38px!important;font-size:34px!important;}
 .trace-viewer-edge-prev{left:8px!important;}.trace-viewer-edge-next{right:8px!important;}
 .trace-viewer-replybar{bottom:max(9px,env(safe-area-inset-bottom))!important;width:calc(100vw - 16px)!important;border-radius:18px!important;}
}

/* ============================================================
   CUNNACT TRACE FINAL LAYOUT FIX
   The Trace screen uses the same three-column shell as the
   WhatsApp-style reference: nav rail | Trace list | workspace.
   The normal Chats sidebar must not occupy a blank column.
   ============================================================ */
#app.status-open .sidebar{display:none!important;}
#app.status-open .chat-panel{display:none!important;}
#app.status-open .status-side-view{display:flex!important;grid-column:2!important;grid-row:1!important;height:100dvh!important;min-height:0!important;}
#app.status-open .status-main-panel{display:grid!important;grid-column:3!important;grid-row:1!important;height:100dvh!important;min-height:0!important;}
@media(max-width:820px){
  #app.status-open .sidebar{display:none!important;}
  #app.status-open .status-side-view{display:flex!important;grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.status-open .status-main-panel{display:none!important;}
  #app.status-open .chat-panel{display:none!important;}
}


/* Trace self-state + channel owner controls */
.my-status-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.channel-manage-modal{width:min(720px,92vw);max-height:min(86vh,820px);overflow:auto;}
.channel-manage-grid{display:grid;gap:12px;}
.channel-manage-grid label{display:grid;gap:6px;font-size:11px;font-weight:700;color:var(--ink, #dce3e6);}
.channel-manage-grid label input,.channel-manage-grid label textarea,.channel-manage-grid label select{width:100%;border:1px solid var(--border, rgba(233,237,239,.12));background:var(--surface-2, #20272d);color:var(--ink, #e9edef);border-radius:10px;padding:10px 11px;outline:0;font:inherit;font-weight:500;}
.channel-manage-grid label input:focus,.channel-manage-grid label textarea:focus,.channel-manage-grid label select:focus{border-color:var(--primary, #5b6cff);box-shadow:0 0 0 3px rgba(91,108,255,.13);}
.channel-manage-grid label small{font-size:10px;color:var(--ink-faint, #8f9ba2);font-weight:500;}
.channel-setting-toggle{display:flex!important;align-items:center;gap:9px;padding:10px 0;color:var(--ink,#dce3e6)!important;}
.channel-setting-toggle input{width:16px!important;height:16px!important;accent-color:var(--primary,#5b6cff);}
.channel-manage-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border, rgba(233,237,239,.08));}
.channel-manage-people{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:300px;overflow:auto;}
.channel-manage-person{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 8px;border-radius:10px;background:var(--surface-2,#20272d);}
.channel-manage-person-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.channel-manage-person-meta strong{font-size:11px;color:var(--ink,#f0f2f3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channel-manage-person-meta small{font-size:9.5px;color:var(--ink-faint,#8f9ba2);}
.channel-manage-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.channel-manage-actions .btn{min-height:30px;padding:6px 9px;font-size:9px;}
.channel-manage-actions-footer{margin-top:16px;padding-top:13px;border-top:1px solid var(--border,rgba(233,237,239,.08));}
@media(max-width:820px){.channel-manage-modal{width:100%;max-height:calc(100dvh - 20px);border-radius:16px 16px 0 0;align-self:end;}.channel-manage-person{grid-template-columns:36px minmax(0,1fr);}.channel-manage-actions{grid-column:2;justify-content:flex-start;}.channel-manage-actions-footer{position:sticky;bottom:0;padding-bottom:4px;background:var(--surface,#11171c);}}

/* Harden dedicated channels layout against the [hidden] UA rule and legacy classes. */
#app.channels-open .channels-side-view{display:flex!important;grid-column:2!important;grid-row:1!important;visibility:visible!important;opacity:1!important;}
#app.channels-open .channels-main-panel{display:flex!important;grid-column:3!important;grid-row:1!important;visibility:visible!important;opacity:1!important;}
#app.channels-open .channels-side-view[hidden],#app.channels-open .channels-main-panel[hidden]{display:flex!important;}
#app.channels-open .sidebar,#app.channels-open .chat-panel{display:none!important;}
@media(max-width:820px){
  #app.channels-open .channels-side-view{display:flex!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:calc(100dvh - 62px)!important;}
  #app.channels-open .channels-main-panel{display:flex!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:calc(100dvh - 62px)!important;}
}

/* ============================================================
   OWN PROFILE WORKSPACE — WhatsApp-style in-place profile page
   Opens from the rail avatar without navigating away from index.html.
   ============================================================ */
.own-profile-view{
  display:grid;
  grid-template-columns:minmax(320px,380px) minmax(0,1fr);
  grid-column:2 / 4;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:100dvh;
  overflow:hidden;
  background:var(--bg,#0b1117);
  color:var(--ink,#edf2f7);
  z-index:12;
}
.own-profile-view[hidden]{display:none!important;}
.own-profile-sidebar{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--surface,#111820);
  border-right:1px solid var(--border,rgba(255,255,255,.08));
  overflow:hidden;
}
.own-profile-sidebar-head{height:68px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--border,rgba(255,255,255,.07));flex:none;}
.own-profile-sidebar-head h1{margin:0;font-size:22px;letter-spacing:-.03em;font-family:var(--font-display,Inter,sans-serif);}
.own-profile-back{width:38px;height:38px;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;border-radius:12px;cursor:pointer;}
.own-profile-back:hover{background:var(--surface-2,#18212a)}
.own-profile-back svg{width:20px;height:20px;}
.own-profile-search{margin:14px 16px 8px;height:42px;border-radius:12px;background:var(--surface-3,#20272d);display:flex;align-items:center;padding:0 13px;gap:9px;flex:none;}
.own-profile-search svg{width:16px;height:16px;color:var(--ink-faint,#8f9ba2);flex:none}
.own-profile-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;}
.own-profile-search input::placeholder{color:var(--ink-faint,#8f9ba2)}
.own-profile-summary{margin:8px 10px 12px;padding:18px 12px;border:0;border-radius:16px;background:transparent;color:inherit;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;flex:none;}
.own-profile-summary:hover{background:var(--surface-2,#18212a)}
.own-profile-avatar{width:86px!important;height:86px!important;border-radius:50%!important;flex:none!important;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.own-profile-summary-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.own-profile-summary-text strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.own-profile-summary-text small{color:var(--accent,#5b6cff);font-size:11px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.own-profile-status-bubble{display:inline-flex;align-self:flex-start;padding:4px 8px;border-radius:999px;background:var(--surface-3,#20272d);color:var(--ink-soft,#aeb8be);font-size:9.5px;}
.own-profile-nav{min-height:0;overflow:auto;padding:2px 10px 18px;}
.own-profile-nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 12px;border:0;background:transparent;color:var(--ink);border-radius:12px;text-align:left;cursor:pointer;min-height:58px;}
.own-profile-nav-item:hover{background:var(--surface-2,#18212a)}
.own-profile-nav-item.active{background:var(--surface-2,#18212a);box-shadow:inset 3px 0 0 var(--accent,#5b6cff)}
.own-profile-nav-item.danger{color:var(--danger,#ef6464)}
.own-profile-nav-item span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.own-profile-nav-item strong{font-size:12.5px;font-weight:700;}
.own-profile-nav-item small{font-size:9.5px;color:var(--ink-faint,#8f9ba2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.own-profile-nav-icon{width:28px;flex:none;text-align:center;color:var(--ink-soft,#aeb8be);font-size:18px;}
.own-profile-nav-item.active .own-profile-nav-icon{color:var(--accent,#5b6cff)}
.own-profile-nav-item.danger .own-profile-nav-icon,.own-profile-nav-item.danger strong{color:inherit}
.own-profile-detail{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg,#0b1117);overflow:hidden;}
.own-profile-detail-head{min-height:84px;padding:18px 28px;border-bottom:1px solid var(--border,rgba(255,255,255,.07));display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;}
.own-profile-detail-head h2{margin:6px 0 0;font-size:25px;letter-spacing:-.04em;font-family:var(--font-display,Inter,sans-serif)}
.own-profile-detail-head p{margin:4px 0 0;color:var(--ink-faint,#8f9ba2);font-size:11px;}
.own-profile-edit-btn{border:1px solid var(--border-strong,rgba(255,255,255,.12));background:var(--surface-2,#18212a);color:var(--ink);padding:9px 13px;border-radius:10px;font-weight:700;font-size:11px;cursor:pointer;}
.own-profile-edit-btn:hover{border-color:var(--accent,#5b6cff);}
.own-profile-detail-body{flex:1;min-height:0;overflow:auto;padding:28px;}
.own-profile-card{max-width:860px;margin:0 auto;display:grid;gap:14px;}
.own-profile-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;padding:26px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,var(--surface),var(--surface-2));}
.own-profile-hero-avatar{width:150px;height:150px;border-radius:36px;overflow:hidden;background:var(--surface-3);}
.own-profile-hero-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.own-profile-hero-copy{min-width:0}
.own-profile-hero-copy h3{font-size:24px;margin:8px 0 2px;letter-spacing:-.035em;}
.own-profile-hero-copy .own-profile-id{color:var(--accent);font-weight:800;font-size:12px;}
.own-profile-hero-copy p{margin:14px 0 0;color:var(--ink-soft);line-height:1.65;font-size:13px;max-width:620px;}
.own-profile-action-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.own-profile-action-row button,.own-profile-action-row a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;}
.own-profile-action-row .primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:transparent;color:#fff;}
.own-profile-info-card{padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);}
.own-profile-info-row{display:flex;justify-content:space-between;gap:20px;padding:14px 2px;border-bottom:1px solid var(--border);}
.own-profile-info-row:last-child{border-bottom:0}
.own-profile-info-row span{color:var(--ink-faint);font-size:10px;}
.own-profile-info-row strong{font-size:12px;max-width:65%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.own-profile-section-note{max-width:760px;margin:0 auto;color:var(--ink-soft);font-size:12px;line-height:1.65;}
.own-profile-section-grid{max-width:760px;margin:14px auto 0;display:grid;gap:10px;}
.own-profile-setting-card{padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.own-profile-setting-card strong{font-size:12px}.own-profile-setting-card small{display:block;color:var(--ink-faint);font-size:10px;margin-top:4px;}
.own-profile-setting-card .value{font-size:11px;color:var(--accent);font-weight:750;text-align:right;}
#app.profile-open .app-topbar{display:none!important;}
#app.profile-open .sidebar,#app.profile-open .chat-panel,#app.profile-open .status-side-view,#app.profile-open .status-main-panel,#app.profile-open .channels-side-view,#app.profile-open .channels-main-panel,#app.profile-open .calls-side-view,#app.profile-open .calls-main-panel{display:none!important;}
#app.profile-open > .app-shell-body > .own-profile-view{display:grid!important;grid-column:2 / 4!important;grid-row:1!important;}
#app.profile-open .nav-rail-btn.active{background:transparent!important;box-shadow:none!important;}
@media(max-width:820px){
  .own-profile-view{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px);grid-template-columns:1fr;}
  .own-profile-sidebar{border-right:0;}
  .own-profile-detail{display:none;}
  .own-profile-view.mobile-detail-open .own-profile-sidebar{display:none;}
  .own-profile-view.mobile-detail-open .own-profile-detail{display:flex;}
  .own-profile-detail-head{min-height:70px;padding:14px 16px;}
  .own-profile-detail-body{padding:16px;}
  .own-profile-hero{grid-template-columns:1fr;text-align:center;padding:22px;}
  .own-profile-hero-avatar{margin:0 auto;width:126px;height:126px;border-radius:30px;}
  .own-profile-action-row{justify-content:center;}
}
@media(min-width:821px){
  .own-profile-view{grid-column:2 / 4!important;}
}

/* ============================================================
   IN-PLACE PROFILE EDITOR — WhatsApp-style reference behavior
   Profile avatar opens this view inside index.html; no page navigation.
   ============================================================ */
#app.profile-open > .app-shell-body > .own-profile-view{display:grid!important;grid-column:2 / 4!important;grid-row:1!important;min-width:0;min-height:0;}
#app.profile-open > .app-shell-body > .sidebar,
#app.profile-open > .app-shell-body > .chat-panel,
#app.profile-open > .app-shell-body > .status-side-view,
#app.profile-open > .app-shell-body > .status-main-panel,
#app.profile-open > .app-shell-body > .channels-side-view,
#app.profile-open > .app-shell-body > .channels-main-panel,
#app.profile-open > .app-shell-body > .calls-side-view,
#app.profile-open > .app-shell-body > .calls-main-panel{display:none!important;}
#app.profile-open .own-profile-detail{display:flex!important;min-width:0;min-height:0;background:var(--bg,#0b1117);overflow:hidden;}
#app.profile-open .own-profile-detail-head{display:none!important;}
#app.profile-open .own-profile-detail-body{padding:0!important;overflow:hidden!important;}
.wa-own-profile-editor{height:100%;display:flex;flex-direction:column;background:var(--bg,#11171c);color:var(--ink,#f0f2f5);}
.wa-own-profile-head{height:68px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));background:var(--surface,rgba(20,28,34,.94));flex:none;}
.wa-own-profile-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;}
.wa-own-profile-head .own-profile-back{color:var(--ink,#f0f2f5);}
.wa-own-profile-scroll{width:min(420px,100%);height:100%;overflow:auto;border-right:1px solid var(--border,rgba(255,255,255,.08));background:var(--surface,#11171c);padding:38px 34px 60px;}
.wa-own-profile-photo-wrap{position:relative;width:156px;height:156px;margin:0 auto 56px;border:0;background:transparent;display:block;cursor:pointer;padding:0;}
.wa-own-profile-photo{width:156px!important;height:156px!important;border-radius:50%!important;display:block!important;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.2);background:var(--surface-3,#202b33);}
.wa-own-profile-photo img{width:100%;height:100%;object-fit:cover;}
.wa-own-profile-photo-badge{position:absolute;right:4px;bottom:5px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#25d366);color:#07110b;border:4px solid var(--surface,#11171c);}
.wa-own-profile-photo-badge svg{width:19px;height:19px;}
.wa-profile-label{margin:0 4px 8px;color:var(--accent,#25d366);font-size:12px;font-weight:700;letter-spacing:.02em;}
.wa-profile-row{min-height:72px;display:flex;align-items:center;gap:18px;padding:12px 4px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));margin-bottom:34px;}
.wa-profile-row-main{flex:1;min-width:0;display:flex;align-items:center;}
.wa-profile-value{font-size:16px;font-weight:500;color:var(--ink,#f0f2f5);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wa-profile-input{width:100%;border:0;border-bottom:2px solid var(--accent,#25d366);outline:0;background:transparent;color:var(--ink,#f0f2f5);font:inherit;font-size:16px;padding:6px 0 7px;}
.wa-profile-pencil{width:34px;height:34px;border:0;background:transparent;color:var(--ink-soft,#aeb7bd);display:grid;place-items:center;border-radius:9px;cursor:pointer;flex:none;}
.wa-profile-pencil:hover{color:var(--accent,#25d366);background:var(--surface-2,#182027);}
.wa-profile-pencil svg{width:18px;height:18px;}
.wa-profile-note{margin:12px 4px 0;color:var(--ink-faint,#8f9ba2);font-size:11px;line-height:1.55;}
#app.profile-open .nav-rail-btn.active{background:transparent!important;box-shadow:none!important;}
@media(min-width:821px){
  #app.profile-open > .app-shell-body > .own-profile-view{grid-column:2 / 4!important;}
}
@media(max-width:820px){
  #app.profile-open > .app-shell-body > .own-profile-view{grid-column:1!important;grid-row:1!important;height:calc(100dvh - 62px)!important;}
  #app.profile-open .own-profile-detail{width:100%;}
  .wa-own-profile-scroll{width:100%;border-right:0;padding:30px 22px 54px;}
  .wa-own-profile-head{height:62px;padding:0 14px;}
  .wa-own-profile-head h1{font-size:18px;}
  .wa-own-profile-photo-wrap{width:136px;height:136px;margin-bottom:44px;}
  .wa-own-profile-photo{width:136px!important;height:136px!important;}
  .wa-own-profile-photo-badge{width:38px;height:38px;}
}

/* ============================================================
   In-place profile settings shell — WhatsApp-style reference
   UI only: category controls are intentionally staged for the
   next feature pass; existing backend/auth logic is untouched.
   ============================================================ */
#app.profile-open .own-profile-detail-body{position:relative;}
.wa-own-profile-settings-btn{display:grid;place-items:center;}
.wa-own-profile-head{position:relative;}
.own-profile-settings-btn{margin-left:auto;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--ink,#f0f2f5);cursor:pointer;flex:none;}
.own-profile-settings-btn:hover{background:var(--surface-2,#182027);color:var(--accent,#5b6cff);}
.own-profile-settings-btn svg{width:20px;height:20px;}
.wa-settings-page{height:100%;display:flex;flex-direction:column;width:min(560px,100%);background:var(--surface,#11171c);color:var(--ink,#f0f2f5);border-right:1px solid var(--border,rgba(255,255,255,.08));overflow:hidden;}
.wa-settings-head{height:68px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--surface,#11171c);border-bottom:1px solid var(--border,rgba(255,255,255,.08));flex:none;}
.wa-settings-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;}
.wa-settings-search{height:44px;margin:14px 20px 12px;padding:0 13px;display:flex;align-items:center;gap:10px;border-radius:22px;background:var(--surface-3,#20272d);flex:none;}
.wa-settings-search:focus-within{outline:2px solid rgba(37,211,102,.35);outline-offset:-2px;}
.wa-settings-search svg{width:18px;height:18px;color:var(--ink-faint,#8f9ba2);flex:none;}
.wa-settings-search input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink,#f0f2f5);font:inherit;font-size:13px;}
.wa-settings-search input::placeholder{color:var(--ink-faint,#8f9ba2)}
.wa-settings-list{min-height:0;overflow:auto;padding:4px 8px 28px;}
.wa-settings-item{width:100%;min-height:70px;padding:11px 20px;display:flex;align-items:center;gap:18px;border:0;background:transparent;color:var(--ink,#f0f2f5);text-align:left;cursor:pointer;border-radius:12px;}
.wa-settings-item:hover{background:var(--surface-2,#182027)}
.wa-settings-item.danger{color:#ff6b7a;margin-top:4px;}
.wa-settings-icon{width:28px;flex:0 0 28px;display:grid;place-items:center;color:var(--ink-soft,#aeb8be);font-size:21px;line-height:1;}
.wa-settings-item.danger .wa-settings-icon{color:inherit;}
.wa-settings-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.wa-settings-copy strong{font-size:15px;font-weight:650;line-height:1.15;}
.wa-settings-copy small{font-size:11.5px;color:var(--ink-faint,#8f9ba2);line-height:1.35;}
@media(max-width:820px){
  .wa-settings-page{width:100%;border-right:0;}
  .wa-settings-head{height:62px;padding:0 14px;}
  .wa-settings-head h1{font-size:18px;}
  .wa-settings-search{margin:12px 16px 10px;}
  .wa-settings-item{min-height:66px;padding:10px 16px;gap:15px;}
  .wa-settings-copy strong{font-size:14px;}
  .wa-settings-copy small{font-size:10.5px;}
}


/* ============================================================
   CUNNACT SETTINGS — WhatsApp Web-style in-place workspace
   Far-left rail stays fixed; Settings list occupies the middle
   column; selected setting fills the large right pane.
   ============================================================ */
#app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{
  display:grid!important;
  grid-column:2 / 4!important;
  grid-row:1!important;
  grid-template-columns:minmax(330px,390px) minmax(0,1fr)!important;
  height:100dvh!important;
  min-width:0!important;
  min-height:0!important;
  background:#111b21;
}
#app.profile-open .own-settings-in-place .settings-sidebar{
  width:auto!important;
  height:100%!important;
  background:#111b21!important;
  border-right:1px solid rgba(134,150,160,.18)!important;
}
#app.profile-open .own-settings-in-place .settings-detail{
  width:auto!important;
  height:100%!important;
  min-width:0!important;
  background:#0b141a!important;
}
#app.profile-open .own-settings-in-place .settings-sidebar-head{
  min-height:64px!important;
  padding:0 20px!important;
  background:#202c33!important;
  border-bottom:1px solid rgba(134,150,160,.16)!important;
}
#app.profile-open .own-settings-in-place .settings-sidebar-head h1{
  font-size:20px!important;
  color:#e9edef!important;
  letter-spacing:0!important;
}
#app.profile-open .own-settings-in-place .settings-back-btn{
  order:-1;
  margin-right:0;
  color:#aebac1!important;
}
#app.profile-open .own-settings-in-place .settings-sidebar-head > div{display:contents;}
#app.profile-open .own-settings-in-place .settings-sidebar-head h1{order:2;flex:1;}
#app.profile-open .own-settings-in-place .settings-sidebar-head .settings-back-btn{order:1;}
#app.profile-open .own-settings-in-place .settings-sidebar-search{
  height:38px!important;
  margin:14px 12px 10px!important;
  border-radius:8px!important;
  background:#202c33!important;
}
#app.profile-open .own-settings-in-place .settings-profile-preview{
  min-height:104px!important;
  margin:0!important;
  padding:10px 20px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:3px 15px!important;
  align-items:center!important;
  border-radius:0!important;
  background:#111b21!important;
  text-align:left!important;
  cursor:pointer!important;
}
#app.profile-open .own-settings-in-place .settings-profile-preview:hover,
#app.profile-open .own-settings-in-place .settings-profile-preview.active{background:#202c33!important;}
#app.profile-open .own-settings-in-place .settings-profile-avatar-btn{grid-row:1 / span 2;grid-column:1;justify-self:start;}
#app.profile-open .own-settings-in-place .avatar-settings-v6{width:58px!important;height:58px!important;}
#app.profile-open .own-settings-in-place .settings-profile-preview-bubble{
  position:static!important;
  transform:none!important;
  grid-row:1!important;grid-column:2!important;
  justify-self:start!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#8696a0!important;
  font-size:11px!important;
}
#app.profile-open .own-settings-in-place .settings-profile-preview strong{
  grid-row:2!important;grid-column:2!important;
  margin:0!important;font-size:15px!important;color:#e9edef!important;
}
#app.profile-open .own-settings-in-place .settings-nav-list{padding:4px 8px 18px!important;}
#app.profile-open .own-settings-in-place .settings-nav-item{
  min-height:58px!important;
  padding:8px 14px!important;
  gap:15px!important;
  border-radius:8px!important;
  color:#e9edef!important;
}
#app.profile-open .own-settings-in-place .settings-nav-item:hover{background:#202c33!important;}
#app.profile-open .own-settings-in-place .settings-nav-item.active{background:#2a3942!important;}
#app.profile-open .own-settings-in-place .settings-nav-item.active .settings-nav-icon{color:#00a884!important;}
#app.profile-open .own-settings-in-place .settings-nav-item b{font-size:14px!important;font-weight:500!important;}
#app.profile-open .own-settings-in-place .settings-nav-item small{font-size:11px!important;color:#8696a0!important;}
#app.profile-open .own-settings-in-place .settings-nav-item.danger{color:#ea8585!important;}
#app.profile-open .own-settings-in-place .settings-detail-head{
  min-height:64px!important;
  padding:0 24px!important;
  background:#202c33!important;
  border-bottom:1px solid rgba(134,150,160,.16)!important;
}
#app.profile-open .own-settings-in-place .settings-detail-head .eyebrow{display:none;}
#app.profile-open .own-settings-in-place .settings-detail-head h2{font-size:17px!important;color:#e9edef!important;margin:0!important;}
#app.profile-open .own-settings-in-place .settings-detail-head p{font-size:11px!important;color:#8696a0!important;margin-top:4px!important;}
#app.profile-open .own-settings-in-place .settings-detail-scroll{
  padding:0!important;
  background:#0b141a!important;
}
#app.profile-open .own-settings-in-place .settings-detail-scroll>.settings-profile-hero{display:none!important;}
#app.profile-open .own-settings-in-place .settings-detail-scroll>.profile-form{
  width:100%!important;max-width:none!important;margin:0!important;
}
#app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6{
  margin:0!important;
  min-height:100%;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:28px 42px 60px!important;
  color:#e9edef!important;
}
#app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6 + .settings-card-v6{margin-top:0!important;}
#app.profile-open .own-settings-in-place .privacy-v7-content{max-width:820px!important;padding:8px 0 40px!important;}
#app.profile-open .own-settings-in-place .privacy-group-title{color:#00a884!important;font-size:12px!important;}
#app.profile-open .own-settings-in-place .privacy-setting-item,
#app.profile-open .own-settings-in-place .privacy-setting-toggle-row,
#app.profile-open .own-settings-in-place .privacy-profile-discovery-row{
  min-height:66px!important;
  padding:10px 0!important;
  border-bottom:1px solid rgba(134,150,160,.13)!important;
  background:transparent!important;
}
#app.profile-open .own-settings-in-place .privacy-setting-item:hover{background:#111b21!important;}
#app.profile-open .own-settings-in-place .privacy-setting-copy strong{font-size:14px!important;color:#e9edef!important;}
#app.profile-open .own-settings-in-place .privacy-setting-copy small{font-size:11px!important;color:#8696a0!important;}
#app.profile-open .own-settings-in-place .settings-inline-page-head{display:none!important;}
#app.profile-open .own-settings-in-place .settings-profile-actions{position:sticky!important;bottom:0!important;margin:0!important;background:#202c33!important;border-top:1px solid rgba(134,150,160,.16)!important;}
#app.profile-open .own-settings-in-place .account-settings-screen{padding:28px 42px 60px!important;}
#app.profile-open .own-settings-in-place .account-settings-heading{display:none!important;}
#app.profile-open .own-settings-in-place .account-settings-item{min-height:66px!important;padding:14px 0!important;color:#e9edef!important;border-bottom:1px solid rgba(134,150,160,.13)!important;}
#app.profile-open .own-settings-in-place .account-settings-item>span:last-child{font-size:15px!important;}
#app.profile-open .own-settings-in-place .account-danger-zone{margin-top:28px!important;max-width:820px!important;border-top:1px solid rgba(234,133,133,.2)!important;padding-top:24px!important;}
#app.profile-open .own-settings-in-place .settings-subpage .settings-inline-page-head{display:none!important;}
#app.profile-open .own-settings-in-place .help-list button,
#app.profile-open .own-settings-in-place .shortcut-list>div{color:#e9edef!important;border-bottom-color:rgba(134,150,160,.13)!important;}
#app.profile-open .own-settings-in-place select,
#app.profile-open .own-settings-in-place input,
#app.profile-open .own-settings-in-place textarea{color:#e9edef!important;background:#202c33!important;border-color:rgba(134,150,160,.18)!important;}
#app.profile-open .own-settings-in-place .toggle input:checked + .toggle-slider{background:#00a884!important;}
#app.profile-open .own-settings-in-place .settings-sidebar-search:focus-within{outline:2px solid rgba(0,168,132,.22)!important;}
@media(max-width:820px){
  #app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{
    grid-column:1!important;grid-template-columns:1fr!important;height:calc(100dvh - 62px)!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail{display:none!important;}
  #app.profile-open .own-settings-in-place.mobile-detail-open .settings-sidebar{display:none!important;}
}

#app.profile-open .own-settings-in-place .settings-detail-back{display:none;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#aebac1;place-items:center;cursor:pointer;flex:none;}
#app.profile-open .own-settings-in-place .settings-detail-back svg{width:20px;height:20px;}
#app.profile-open .own-settings-in-place .settings-detail-actions{display:none!important;}

/* Light theme counterpart: same WhatsApp-like geometry, light surfaces. */
html[data-theme="light"] #app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{background:#efeae2;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar{background:#fff!important;border-right-color:rgba(17,27,33,.10)!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-head,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-head{background:#f0f2f5!important;border-bottom-color:rgba(17,27,33,.10)!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-head h1,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-head h2,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-head p{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-search{background:#f0f2f5!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-profile-preview{background:#fff!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-profile-preview:hover,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-profile-preview.active{background:#f0f2f5!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-profile-preview strong,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item,
html[data-theme="light"] #app.profile-open .own-settings-in-place .privacy-setting-copy strong,
html[data-theme="light"] #app.profile-open .own-settings-in-place .account-settings-item{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item:hover,
html[data-theme="light"] #app.profile-open .own-settings-in-place .privacy-setting-item:hover{background:#f0f2f5!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail{background:#efeae2!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll{background:#efeae2!important;color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item b{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item small,
html[data-theme="light"] #app.profile-open .own-settings-in-place .privacy-setting-copy small{color:#667781!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll input,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll textarea,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll select{background:#fff!important;color:#111b21!important;border-color:rgba(17,27,33,.15)!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-profile-actions{background:#f0f2f5!important;}

@media(max-width:820px){
  #app.profile-open .own-settings-in-place .settings-detail{display:none!important;}
  #app.profile-open .own-settings-in-place.mobile-detail-open .settings-sidebar{display:none!important;}
  #app.profile-open .own-settings-in-place.mobile-detail-open .settings-detail{display:flex!important;grid-column:1!important;grid-row:1!important;width:100%!important;}
  #app.profile-open .own-settings-in-place.mobile-detail-open .settings-detail-back{display:grid!important;}
  #app.profile-open .own-settings-in-place.mobile-detail-open .settings-detail-head{padding:0 14px!important;gap:10px!important;}
}

/* ============================================================
   CUNNACT SETTINGS — visual match to WhatsApp desktop reference
   Default state: left settings list + calm/empty right workspace.
   Details appear only after a setting is clicked.
   ============================================================ */
@media(min-width:821px){
  #app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{
    grid-template-columns:408px minmax(0,1fr)!important;
    height:100dvh!important;
    background:#111b21!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar{
    width:408px!important;
    background:#111b21!important;
    border-right:1px solid rgba(134,150,160,.14)!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-head{
    height:76px!important;
    min-height:76px!important;
    padding:0 20px!important;
    background:#111b21!important;
    border-bottom:0!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-head h1{
    font-size:24px!important;
    line-height:1!important;
    font-weight:600!important;
    color:#e9edef!important;
    letter-spacing:-.025em!important;
  }
  /* On desktop WhatsApp keeps the app rail as the way out; no second back arrow. */
  #app.profile-open .own-settings-in-place .settings-sidebar-head .settings-back-btn{
    display:none!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-search{
    height:42px!important;
    margin:0 20px 14px!important;
    padding:0 14px!important;
    border-radius:22px!important;
    background:#202c33!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-search svg{width:18px!important;height:18px!important;color:#8696a0!important;}
  #app.profile-open .own-settings-in-place .settings-sidebar-search input{font-size:14px!important;color:#dfe5e7!important;}
  #app.profile-open .own-settings-in-place .settings-nav-list{
    padding:0 9px 22px!important;
    overflow:auto!important;
  }
  #app.profile-open .own-settings-in-place .settings-nav-item{
    min-height:74px!important;
    padding:12px 18px!important;
    gap:18px!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#e9edef!important;
  }
  #app.profile-open .own-settings-in-place .settings-nav-item:hover{background:#202c33!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item.active{background:#2a3942!important;}
  #app.profile-open .own-settings-in-place .settings-nav-icon{
    width:34px!important;
    flex:0 0 34px!important;
    color:#aebac1!important;
    display:grid!important;
    place-items:center!important;
    font-size:20px!important;
  }
  #app.profile-open .own-settings-in-place .settings-nav-icon svg{width:27px!important;height:27px!important;display:block!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item.active .settings-nav-icon{color:#aebac1!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item b{font-size:17px!important;font-weight:500!important;line-height:1.15!important;color:#e9edef!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item small{font-size:13px!important;color:#8696a0!important;line-height:1.3!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item.danger{color:#ea8585!important;margin-top:3px!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item.danger .settings-nav-icon{color:#ea8585!important;}

  #app.profile-open .own-settings-in-place .settings-detail{
    background:#202020!important;
    border:0!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-head{
    height:72px!important;
    min-height:72px!important;
    padding:0 28px!important;
    background:#202020!important;
    border-bottom:1px solid rgba(134,150,160,.10)!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-head[hidden]{display:none!important;}
  #app.profile-open .own-settings-in-place .settings-detail-head h2{font-size:19px!important;color:#e9edef!important;font-weight:500!important;}
  #app.profile-open .own-settings-in-place .settings-detail-head p{font-size:12px!important;color:#8696a0!important;}

  #app.profile-open .own-settings-in-place .settings-detail-scroll{
    background:#202020!important;
    padding:0!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6{
    padding:32px 52px 64px!important;
    background:#202020!important;
    color:#e9edef!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6[hidden]{display:none!important;}
}

.settings-home-placeholder{
  position:relative;
  width:100%;
  min-width:0;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202020;
  color:#e9edef;
}
.settings-home-placeholder[hidden]{display:none!important;}
.settings-home-actions{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:54px;
  transform:translateY(-4px);
}
.settings-home-action{
  width:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0;
  border:0;
  background:none;
  color:#e9edef;
  cursor:pointer;
  font:inherit;
}
.settings-home-action:hover .settings-home-action-icon{background:#313131;transform:translateY(-1px);}
.settings-home-action-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#303030;
  color:#f1f3f4;
  transition:transform .16s ease,background .16s ease;
}
.settings-home-action-icon svg{width:27px;height:27px;}
.settings-home-action strong{font-size:14px;font-weight:500;white-space:nowrap;}

@media(max-width:820px){
  #app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{
    grid-template-columns:1fr!important;
    height:calc(100dvh - 62px)!important;
    background:#111b21!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-head{
    min-height:64px!important;
    height:64px!important;
    padding:0 14px!important;
    background:#111b21!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar-head h1{font-size:21px!important;color:#e9edef!important;}
  #app.profile-open .own-settings-in-place .settings-sidebar-head .settings-back-btn{display:grid!important;order:-1!important;}
  #app.profile-open .own-settings-in-place .settings-sidebar-search{margin:10px 14px 12px!important;height:40px!important;border-radius:20px!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item{min-height:68px!important;padding:10px 14px!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item b{font-size:15px!important;}
  #app.profile-open .own-settings-in-place .settings-nav-item small{font-size:11px!important;}
  #app.profile-open .own-settings-in-place .settings-detail{background:#202020!important;}
  #app.profile-open .own-settings-in-place .settings-detail-scroll{background:#202020!important;}
  .settings-home-actions{gap:20px;padding:0 12px;}
  .settings-home-action{width:92px;}
  .settings-home-action-icon{width:54px;height:54px;}
  .settings-home-action strong{font-size:12px;}
}

html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-home-placeholder{background:#efeae2!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-head{background:#fff!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-search{background:#f0f2f5!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-sidebar-head h1,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item b{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item:hover{background:#f0f2f5!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item.active{background:#e9edef!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-nav-item small{color:#667781!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-home-action{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-home-action-icon{background:#d8dbdd!important;color:#111b21!important;}

@media(min-width:821px){
  #app.profile-open{
    grid-template-columns:68px 408px minmax(0,1fr)!important;
  }
  #app.profile-open .nav-rail{
    width:68px!important;
    min-width:68px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    background:#202020!important;
    border-right:1px solid rgba(134,150,160,.14)!important;
  }
}

/* Profile detail keeps the photo control available after the sidebar preview was removed. */
.profile-photo-settings-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 0 20px;margin-bottom:18px;
  border-bottom:1px solid rgba(134,150,160,.13);
}
.profile-settings-avatar-btn{flex:0 0 auto;width:58px;height:58px;border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer;}
.avatar-settings-editor{width:58px!important;height:58px!important;border-radius:50%!important;}
.profile-photo-settings-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.profile-photo-settings-copy strong{font-size:15px;font-weight:600;}
.profile-photo-settings-copy small{font-size:12px;color:#8696a0;line-height:1.35;}
.profile-photo-change-btn{margin-left:auto;flex:none;}
html[data-theme="light"] #app.profile-open .profile-photo-settings-row{border-bottom-color:rgba(17,27,33,.10);}
html[data-theme="light"] #app.profile-open .profile-photo-settings-copy small{color:#667781;}
@media(max-width:520px){
  .profile-photo-settings-row{gap:12px;}
  .profile-photo-settings-copy small{font-size:11px;}
}


/* ============================================================
   CUNNACT SETTINGS — exact WhatsApp desktop interaction model
   Selecting a setting replaces the middle list; the large right
   workspace stays visible with the three quick actions.
   ============================================================ */
@media (min-width:821px){
  #app.profile-open > .app-shell-body > .own-profile-view.own-settings-in-place{
    --settings-list-width:408px;
    position:relative!important;
    grid-template-columns:var(--settings-list-width) minmax(0,1fr)!important;
    overflow:visible!important;
  }
  #app.profile-open .own-settings-in-place .settings-sidebar{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    position:relative!important;
    z-index:2!important;
    transition:none!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    min-width:0!important;
    overflow:visible!important;
    z-index:1!important;
  }
  #app.profile-open .own-settings-in-place .settings-home-placeholder{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-scroll{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:calc(-1 * var(--settings-list-width))!important;
    width:var(--settings-list-width)!important;
    height:auto!important;
    min-height:100%!important;
    overflow:auto!important;
    box-sizing:border-box!important;
    padding:0!important;
    background:#111b21!important;
    color:#e9edef!important;
    z-index:4!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-sidebar{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-head{
    display:flex!important;
    position:absolute!important;
    left:calc(-1 * var(--settings-list-width))!important;
    top:0!important;
    width:var(--settings-list-width)!important;
    height:72px!important;
    min-height:72px!important;
    box-sizing:border-box!important;
    padding:0 24px!important;
    background:#111b21!important;
    border-bottom:1px solid rgba(134,150,160,.12)!important;
    z-index:7!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active.settings-general-active .settings-detail-head{display:none!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-head h2{
    font-size:20px!important;font-weight:500!important;color:#e9edef!important;margin:0!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-head p{
    display:none!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-head .eyebrow{display:none!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-back{display:grid!important;margin-right:4px!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active:not(.settings-general-active) .settings-detail-scroll{
    padding-top:72px!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6[hidden]{display:none!important;}
  #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6{
    width:100%!important;min-height:100%!important;box-sizing:border-box!important;
    margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    background:#111b21!important;color:#e9edef!important;
    padding:28px 24px 50px!important;
  }
  #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-general-section{
    padding:0 24px 50px!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading{
    height:72px!important;min-height:72px!important;margin:0 -24px 28px!important;
    padding:0 20px!important;display:flex!important;align-items:center!important;
    gap:14px!important;border-bottom:1px solid rgba(134,150,160,.12)!important;
    box-sizing:border-box!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-back-arrow{
    width:40px!important;height:40px!important;flex:0 0 40px!important;
    display:grid!important;place-items:center!important;padding:0!important;border:0!important;
    border-radius:50%!important;background:transparent!important;color:#e9edef!important;cursor:pointer!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-back-arrow:hover{background:#202c33!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .general-back-arrow svg{width:22px!important;height:22px!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading h2{
    margin:0!important;font-size:20px!important;font-weight:500!important;line-height:1!important;
    color:#e9edef!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-section-label{
    margin:0 0 10px!important;color:#8696a0!important;font-size:13px!important;
    font-weight:500!important;line-height:1.3!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row{
    min-height:72px!important;padding:14px 0!important;margin:0!important;
    border-bottom:1px solid rgba(134,150,160,.10)!important;background:transparent!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row strong{
    display:block!important;font-size:15px!important;font-weight:500!important;color:#e9edef!important;line-height:1.35!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row p{
    max-width:290px!important;margin:3px 0 0!important;font-size:12px!important;
    line-height:1.35!important;color:#8696a0!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-subsection-label{
    margin:30px 0 10px!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-select-row{
    min-height:48px!important;padding:0 12px!important;box-sizing:border-box!important;
    border:1px solid rgba(134,150,160,.14)!important;border-radius:8px!important;background:#202c33!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-select-row select{
    min-width:0!important;width:100%!important;border:0!important;outline:0!important;
    background:transparent!important;color:#e9edef!important;font-size:14px!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-font-hint{
    margin:10px 0 0!important;color:#8696a0!important;font-size:12px!important;line-height:1.45!important;
  }
  #app.profile-open .own-settings-in-place .radhe-ai-icon{color:#a855f7!important;}
  #app.profile-open .own-settings-in-place .settings-home-action:hover .radhe-ai-icon{background:#342640!important;}

  /* Scale General content density with font size while keeping the 408px pane stable. */
  #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row strong{
    font-size:calc(15px * var(--cunnact-settings-scale,1))!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row p{
    font-size:calc(12px * var(--cunnact-settings-scale,1))!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-select-row select{
    font-size:calc(14px * var(--cunnact-settings-scale,1))!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-font-hint{
    font-size:calc(12px * var(--cunnact-settings-scale,1))!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-section-label{
    font-size:calc(13px * var(--cunnact-settings-scale,1))!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading h2{
    font-size:calc(20px * var(--cunnact-settings-scale,1))!important;
  }
}

@media(max-width:820px){
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-sidebar{display:none!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail{
    display:flex!important;position:fixed!important;inset:0 0 62px 0!important;
    width:100%!important;height:auto!important;z-index:20!important;overflow:hidden!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-home-placeholder{display:none!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-scroll{
    position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;height:100%!important;min-height:0!important;padding:0!important;
    background:#111b21!important;overflow:auto!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active:not(.settings-general-active) .settings-detail-scroll{padding-top:62px!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-head{
    position:absolute!important;left:0!important;top:0!important;width:100%!important;height:62px!important;
    min-height:62px!important;padding:0 14px!important;background:#111b21!important;
    border-bottom:1px solid rgba(134,150,160,.12)!important;z-index:8!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active.settings-general-active .settings-detail-head{display:none!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-detail-scroll .settings-card-v6{
    min-height:100%!important;padding:0 18px 42px!important;background:#111b21!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .settings-general-section{padding:0 18px 42px!important;}
  #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading{
    height:62px!important;min-height:62px!important;margin:0 -18px 24px!important;padding:0 12px!important;
    border-bottom:1px solid rgba(134,150,160,.12)!important;
  }
  #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading h2{font-size:19px!important;}
}

html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-scroll .settings-card-v6,
html[data-theme="light"] #app.profile-open .own-settings-in-place .settings-detail-head,
html[data-theme="light"] #app.profile-open .own-settings-in-place .general-page-heading{
  background:#fff!important;color:#111b21!important;
}
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading{border-bottom-color:rgba(17,27,33,.10)!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-back-arrow,
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-page-heading h2,
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row strong{color:#111b21!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-setting-row p,
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .settings-section-label,
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-font-hint{color:#667781!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-select-row{background:#f0f2f5!important;border-color:rgba(17,27,33,.12)!important;}
html[data-theme="light"] #app.profile-open .own-settings-in-place.settings-detail-active .general-select-row select{color:#111b21!important;}

.status-main-icon img{width:64px!important;height:64px!important;object-fit:contain;display:block;}

/* ============================================================
   CUNNACT LIGHT THEME — complete dashboard parity
   The WhatsApp-style reference pass above intentionally used
   dark fixed values. This final light-theme layer maps every
   dashboard surface back to the global light tokens without
   changing the dark theme.
   ============================================================ */
html[data-theme="light"]{
  --cunnact-wa-bg:#f4f7f9;
  --cunnact-wa-panel:#ffffff;
  --cunnact-wa-panel-2:#f0f2f5;
  --cunnact-wa-hover:#eef1f4;
  --cunnact-wa-text:#111827;
  --cunnact-wa-muted:#667781;
}
html[data-theme="light"] body{background:var(--bg)!important;color:var(--ink)!important;}
html[data-theme="light"] #app,
html[data-theme="light"] .app-shell{
  background:#f4f7f9!important;
  color:#111827!important;
}
html[data-theme="light"] .nav-rail{
  background:#ffffff!important;
  border-right:1px solid rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .nav-logo{
  background:#f0f2f5!important;
  border-color:rgba(17,24,39,.08)!important;
}
html[data-theme="light"] .nav-rail-btn{color:#667781!important;}
html[data-theme="light"] .nav-rail-btn:hover,
html[data-theme="light"] .nav-rail-profile-btn:hover{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .nav-rail-btn.active{
  color:#ffffff!important;
  background:linear-gradient(135deg,#2346D5,#4F46E5)!important;
  border-color:transparent!important;
}
html[data-theme="light"] .rail-badge{
  border-color:#ffffff!important;
}

html[data-theme="light"] .sidebar{
  background:#ffffff!important;
  border-right:1px solid rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .sidebar-top,
html[data-theme="light"] .sidebar-search-block,
html[data-theme="light"] .chat-list,
html[data-theme="light"] .stories-strip,
html[data-theme="light"] .sidebar-bottom{
  background:#ffffff!important;
}
html[data-theme="light"] .current-user-card{
  background:#f7f9fa!important;
  border-color:rgba(17,24,39,.09)!important;
}
html[data-theme="light"] .current-user-card .meta strong,
html[data-theme="light"] .chat-item strong,
html[data-theme="light"] .chats-heading strong{color:#111827!important;}
html[data-theme="light"] .current-user-card .user-email,
html[data-theme="light"] .current-user-card .online-text,
html[data-theme="light"] .chat-item .time,
html[data-theme="light"] .preview-line .text,
html[data-theme="light"] .story-chip small,
html[data-theme="light"] .stories-strip-head span{color:#667781!important;}
html[data-theme="light"] .search-row.compact-search{
  background:#f0f2f5!important;
  border-color:rgba(17,24,39,.06)!important;
}
html[data-theme="light"] .search-row.compact-search:focus-within{background:#ffffff!important;}
html[data-theme="light"] .search-row.compact-search input,
html[data-theme="light"] .search-row.compact-search input::placeholder{color:#111827!important;}
html[data-theme="light"] .search-row.compact-search input::placeholder{color:#667781!important;}
html[data-theme="light"] .filter-pill{
  color:#54656f!important;
  border-color:rgba(17,24,39,.10)!important;
  background:#ffffff!important;
}
html[data-theme="light"] .filter-pill.active{
  background:rgba(35,70,213,.10)!important;
  color:#2346D5!important;
  border-color:rgba(35,70,213,.18)!important;
}
html[data-theme="light"] .new-chat-btn{color:#ffffff!important;}
html[data-theme="light"] .story-ring.seen,
html[data-theme="light"] .story-ring.add{background:#dfe5e9!important;}
html[data-theme="light"] .story-ring-inner{background:#ffffff!important;color:#2346D5!important;}
html[data-theme="light"] .chat-item{border-bottom-color:rgba(17,24,39,.07)!important;}
html[data-theme="light"] .chat-item:hover{background:#f0f2f5!important;}
html[data-theme="light"] .chat-item.active{background:#eef2f5!important;box-shadow:none!important;}
html[data-theme="light"] .sidebar-bottom .utility-card{
  background:#f7f9fa!important;
  border:1px solid rgba(17,24,39,.08)!important;
}

html[data-theme="light"] .chat-panel{
  background:#f4f7f9!important;
}
html[data-theme="light"] .chat-header{
  background:rgba(255,255,255,.96)!important;
  color:#111827!important;
  border-bottom-color:rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .chat-title-line strong{color:#111827!important;}
html[data-theme="light"] .chat-header .meta>span{color:#667781!important;}
html[data-theme="light"] .chat-header-actions .icon-btn{color:#54656f!important;}
html[data-theme="light"] .chat-header-actions .icon-btn:hover{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .messages{
  background-color:#f7f9fa!important;
  background-image:radial-gradient(rgba(17,24,39,.05) 1px,transparent 1px)!important;
}
html[data-theme="light"] .message-bubble.incoming{
  background:#ffffff!important;
  color:#111827!important;
  border:1px solid rgba(17,24,39,.08)!important;
}
html[data-theme="light"] .message-bubble.outgoing{
  background:linear-gradient(135deg,#2346D5,#4F46E5)!important;
  color:#ffffff!important;
}
html[data-theme="light"] .message-bubble .message-time{color:#667781!important;}
html[data-theme="light"] .message.outgoing .message-meta small{color:rgba(255,255,255,.74)!important;}
html[data-theme="light"] .composer{
  background:#ffffff!important;
  border-top-color:rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .composer-icon{color:#667781!important;}
html[data-theme="light"] .composer-icon:hover:not(:disabled){background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .composer textarea{
  background:#f0f2f5!important;
  color:#111827!important;
}
html[data-theme="light"] .composer textarea::placeholder{color:#667781!important;}
html[data-theme="light"] .send-btn{color:#06130b!important;}

html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .context-menu,
html[data-theme="light"] .message-menu,
html[data-theme="light"] .composer-popover,
html[data-theme="light"] .emoji-picker,
html[data-theme="light"] .emoji-panel,
html[data-theme="light"] .sticker-panel,
html[data-theme="light"] .gif-panel,
html[data-theme="light"] .message-actions-popover,
html[data-theme="light"] .reaction-bar,
html[data-theme="light"] .attachment-panel{
  background:#ffffff!important;
  color:#111827!important;
  border-color:rgba(17,24,39,.10)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .attachment-panel>button{color:#111827!important;}
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .attachment-panel>button:hover{background:#f0f2f5!important;}
html[data-theme="light"] .attach-icon{background:#eef2f5!important;}

html[data-theme="light"] .profile-drawer{
  background:#ffffff!important;
  border-left-color:rgba(17,24,39,.10)!important;
  box-shadow:-18px 0 48px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .profile-drawer-head,
html[data-theme="light"] .profile-drawer-body{background:#ffffff!important;}
html[data-theme="light"] .profile-drawer-head{border-bottom-color:rgba(17,24,39,.10)!important;}
html[data-theme="light"] .profile-drawer-head .icon-btn,
html[data-theme="light"] .profile-drawer-title,
html[data-theme="light"] .profile-drawer-body h3{color:#111827!important;}
html[data-theme="light"] .drawer-username,
html[data-theme="light"] .profile-drawer-body> #drawerContactDetails > p{color:#667781!important;}

html[data-theme="light"] .modal{background:rgba(15,23,42,.24)!important;}
html[data-theme="light"] .modal-content{
  background:#ffffff!important;
  color:#111827!important;
  border-color:rgba(17,24,39,.10)!important;
  box-shadow:0 24px 80px rgba(15,23,42,.20)!important;
}
html[data-theme="light"] .modal-header{
  background:#ffffff!important;
  border-bottom-color:rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .social-tabs,
html[data-theme="light"] .social-panel{background:#ffffff!important;}
html[data-theme="light"] .social-list-card,
html[data-theme="light"] .social-card,
html[data-theme="light"] .stories-grid>*,
html[data-theme="light"] .story-card{
  background:#f7f9fa!important;
  border-color:rgba(17,24,39,.09)!important;
}

html[data-theme="light"] .call-modal-content{background:#ffffff!important;color:#111827!important;}
html[data-theme="light"] .call-stage{background:#f0f2f5!important;}
html[data-theme="light"] .call-control{
  background:#ffffff!important;color:#111827!important;
  border-color:rgba(17,24,39,.10)!important;
}

html[data-theme="light"] .chat-selection-toolbar{
  background:#ffffff!important;
  border-bottom-color:rgba(17,24,39,.10)!important;
}
html[data-theme="light"] .chat-selection-toolbar strong{color:#111827!important;}
html[data-theme="light"] .chat-select-check{border-color:rgba(17,24,39,.25)!important;color:#07120b!important;}
html[data-theme="light"] .chat-selected{background:#eef7f1!important;}

html[data-theme="light"] .status-side-view,
html[data-theme="light"] .status-main-panel{background:#ffffff!important;color:#111827!important;}
html[data-theme="light"] .status-side-header,
html[data-theme="light"] .my-status-row{background:#f0f2f5!important;border-bottom-color:rgba(17,24,39,.08)!important;}
html[data-theme="light"] .status-side-header h2,
html[data-theme="light"] .my-status-copy strong,
html[data-theme="light"] .status-update-copy strong,
html[data-theme="light"] .status-main-empty h2{color:#111827!important;}
html[data-theme="light"] .status-side-actions .icon-btn,
html[data-theme="light"] .status-main-empty,
html[data-theme="light"] .status-main-empty p,
html[data-theme="light"] .my-status-copy small,
html[data-theme="light"] .status-update-copy small,
html[data-theme="light"] .status-section-label,
html[data-theme="light"] .status-list-empty{color:#667781!important;}
html[data-theme="light"] .status-side-actions .icon-btn:hover,
html[data-theme="light"] .status-update-row:hover{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .status-add-menu,
html[data-theme="light"] .status-more-menu{
  background:#ffffff!important;color:#111827!important;border-color:rgba(17,24,39,.10)!important;box-shadow:0 18px 48px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .status-add-menu button,
html[data-theme="light"] .status-more-menu button{color:#111827!important;}
html[data-theme="light"] .status-add-menu button:hover,
html[data-theme="light"] .status-more-menu button:hover{background:#f0f2f5!important;}
html[data-theme="light"] .my-status-plus{border-color:#f0f2f5!important;}
html[data-theme="light"] .status-avatar-inner{background:#ffffff!important;color:#111827!important;}

/* Keep the settings/detail shell fully light when the same theme is active. */
html[data-theme="light"] .own-profile-view.own-settings-in-place,
html[data-theme="light"] .settings-sidebar,
html[data-theme="light"] .settings-detail,
html[data-theme="light"] .settings-home-placeholder{background:#ffffff!important;color:#111827!important;}
html[data-theme="light"] .emoji-grid::-webkit-scrollbar-thumb{background:#c5cdd2!important;}
html[data-theme="light"] .emoji-grid::-webkit-scrollbar-thumb:hover{background:#aeb8be!important;}

/* ============================================================
   CUNNACT CHANNELS — in-index workspace polish + Join flow
   ============================================================ */
.channels-side-header-actions{display:flex;align-items:center;gap:7px;}
.channels-text-action{border:0;background:transparent;color:#8da2ff;font:inherit;font-size:11px;font-weight:750;padding:7px 8px;border-radius:8px;cursor:pointer;}
.channels-text-action:hover{background:rgba(91,108,255,.10);color:#fff;}
.channel-side-row-wrap{position:relative;display:flex;align-items:center;gap:2px;margin:2px 0;border-radius:8px;}
.channel-side-row-wrap .channel-side-row{flex:1;min-width:0;}
.channel-side-membership{flex:none;margin-right:7px;}
.channel-side-membership .btn{min-height:29px;padding:5px 9px;font-size:9px;line-height:1;border-radius:999px;}
.channel-membership-label{display:inline-flex;align-items:center;min-height:26px;padding:4px 7px;border-radius:999px;font-size:8.5px;font-weight:750;white-space:nowrap;}
.channel-membership-label.owner{color:#9db0ff;background:rgba(91,108,255,.12);}
.channel-membership-label.private{color:#98a4ab;background:rgba(152,164,171,.10);}
.channel-side-copy em{display:block;font-style:normal;font-size:9px;color:#7f8a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.channel-side-row.active + .channel-side-membership .channel-membership-label.owner{background:rgba(255,255,255,.12);}
@media(max-width:520px){
  .channels-side-header{padding-left:14px;padding-right:10px;}
  .channels-side-header-actions{gap:4px;}
  .channel-side-row{padding-left:8px;padding-right:4px;}
  .channel-side-membership{margin-right:3px;}
}

/* Channels are part of index.html; no legacy social channel pane is needed. */
html[data-theme="light"] .channels-side-view,
html[data-theme="light"] .channels-main-panel{background:#ffffff!important;color:#111827!important;}
html[data-theme="light"] .channels-side-header,
html[data-theme="light"] .channels-main-header{background:#ffffff!important;border-bottom-color:rgba(17,24,39,.10)!important;}
html[data-theme="light"] .channels-side-header h2,
html[data-theme="light"] .channels-main-title-wrap strong{color:#111827!important;}
html[data-theme="light"] .channels-text-action{color:#3451d1!important;}
html[data-theme="light"] .channels-text-action:hover{background:#eef2ff!important;color:#2346d5!important;}
html[data-theme="light"] .channels-create-btn{color:#54656f!important;}
html[data-theme="light"] .channels-create-btn:hover{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .channels-side-search{background:#f0f2f5!important;border:1px solid rgba(17,24,39,.06)!important;}
html[data-theme="light"] .channels-side-search input{color:#111827!important;}
html[data-theme="light"] .channels-side-search input::placeholder{color:#667781!important;}
html[data-theme="light"] .channel-side-row{color:#111827!important;}
html[data-theme="light"] .channel-side-row:hover{background:#f0f2f5!important;}
html[data-theme="light"] .channel-side-row.active{background:#e9edef!important;}
html[data-theme="light"] .channel-side-avatar,
html[data-theme="light"] .channel-main-avatar{background:#eef1f4!important;color:#111827!important;}
html[data-theme="light"] .channel-side-copy strong{color:#111827!important;}
html[data-theme="light"] .channel-side-copy small,
html[data-theme="light"] .channel-side-copy em,
html[data-theme="light"] .channel-side-meta time{color:#667781!important;}
html[data-theme="light"] .channel-side-meta b{background:#dff7e7!important;color:#126437!important;}
html[data-theme="light"] .channel-membership-label.owner{color:#3451d1!important;background:#eef2ff!important;}
html[data-theme="light"] .channel-membership-label.private{color:#667781!important;background:#f0f2f5!important;}
html[data-theme="light"] .channels-main-actions .icon-btn{color:#54656f!important;}
html[data-theme="light"] .channels-main-actions .icon-btn:hover{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .channels-main-posts{background:#f7f9fa!important;}
html[data-theme="light"] .channels-main-empty{color:#667781!important;}
html[data-theme="light"] .channels-main-empty strong,
html[data-theme="light"] .channels-main-empty h2{color:#111827!important;}
html[data-theme="light"] .channel-inline-composer,
html[data-theme="light"] .channel-post{background:#ffffff!important;border-color:rgba(17,24,39,.09)!important;}
html[data-theme="light"] .channel-inline-composer textarea{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .channel-inline-composer input[type=file]{color:#667781!important;}
html[data-theme="light"] .channel-post-head strong,
html[data-theme="light"] .channel-post>p{color:#111827!important;}
html[data-theme="light"] .channel-post-head time{color:#667781!important;}
html[data-theme="light"] .channel-post-actions{border-top-color:rgba(17,24,39,.08)!important;}
html[data-theme="light"] .channel-post-actions button{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .channel-post-actions button:hover{background:#e5e9ec!important;color:#111827!important;}
html[data-theme="light"] .channel-comments{border-top-color:rgba(17,24,39,.10)!important;}
html[data-theme="light"] .channel-comment{color:#111827!important;}
html[data-theme="light"] .channel-comment-form input{background:#ffffff!important;color:#111827!important;border-color:rgba(17,24,39,.12)!important;}

/* ============================================================
   MOBILE UX PASS — dashboard reference alignment
   ============================================================ */
.mobile-trace-quick-btn{display:none;}
.mobile-trace-quick-btn .avatar{width:40px!important;height:40px!important;}
.mobile-trace-quick-btn .avatar.has-trace{padding:2.5px!important;}

/* On the chat list, the compact profile avatar replaces the top-right new-chat shortcut.
   The bottom navigation still exposes New chat, so no chat creation capability is lost. */
@media(max-width:820px){
  #newChatBtn{display:none!important;}
  .mobile-trace-quick-btn{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    border-radius:50%!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
  .mobile-trace-quick-btn:hover{background:transparent!important;}

  /* Remove the extra saved/request utility strip above the mobile bottom navigation. */
  .sidebar-bottom,
  .sidebar-brand-note{display:none!important;}

  /* WhatsApp-style mobile chat: once a conversation is open, use the whole viewport.
     The bottom navigation is hidden; the chat header's back button is the exit path. */
  #app.chat-open{
    grid-template-rows:1fr!important;
  }
  #app.chat-open .nav-rail{display:none!important;}
  #app.chat-open .chat-panel{
    grid-row:1!important;
    height:100dvh!important;
  }
}

/* Contact-info light theme: the lower action/list rows must switch with the drawer too. */
html[data-theme="light"] .profile-drawer,
html[data-theme="light"] .profile-drawer-head,
html[data-theme="light"] .profile-drawer-body,
html[data-theme="light"] #drawerContactDetails{background:#ffffff!important;color:#111827!important;}
html[data-theme="light"] .drawer-contact-actions{color:#111827!important;}
html[data-theme="light"] .drawer-action-btn{color:#2346D5!important;}
html[data-theme="light"] .drawer-action-icon{background:#f0f2f5!important;color:#111827!important;}
html[data-theme="light"] .drawer-action-btn small{color:#54656f!important;}
html[data-theme="light"] .drawer-info-list{border-top-color:rgba(17,24,39,.10)!important;background:#ffffff!important;}
html[data-theme="light"] .drawer-info-row{
  background:#ffffff!important;
  color:#111827!important;
  border-bottom-color:rgba(17,24,39,.08)!important;
}
html[data-theme="light"] .drawer-info-row:hover{background:#f0f2f5!important;}
html[data-theme="light"] .drawer-info-icon{color:#667781!important;}
html[data-theme="light"] .drawer-info-copy strong{color:#111827!important;}
html[data-theme="light"] .drawer-info-copy small{color:#667781!important;}
html[data-theme="light"] .drawer-info-chevron{color:#83909a!important;}
html[data-theme="light"] .drawer-danger-row .drawer-info-icon,
html[data-theme="light"] .drawer-danger-row .drawer-info-copy strong{color:#d9363e!important;}
html[data-theme="light"] .drawer-stats-row .stat-card{background:#f7f9fa!important;border-color:rgba(17,24,39,.08)!important;color:#111827!important;}


/* MOBILE UX REFINEMENT — match the supplied WhatsApp-style reference.
   The mobile list gets one floating New Chat action above the bottom nav;
   the duplicate bottom-rail plus and separate New Group control are hidden. */
@media(max-width:820px){
  #navNewChatBtn{display:none!important;}
  #newGroupBtn{display:none!important;}
  #newChatBtn.mobile-new-chat-fab{
    display:grid!important;
    position:fixed!important;
    right:14px!important;
    bottom:74px!important;
    z-index:3200!important;
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    padding:0!important;
    place-items:center!important;
    border:3px solid rgba(255,255,255,.92)!important;
    border-radius:50%!important;
    background:linear-gradient(135deg,#8B5CF6 0%,#3B82F6 54%,#06B6D4 78%,#10B981 100%)!important;
    color:#fff!important;
    box-shadow:0 10px 28px rgba(15,23,42,.30),0 0 0 1px rgba(255,255,255,.10)!important;
  }
  #newChatBtn.mobile-new-chat-fab:hover{
    transform:translateY(-1px)!important;
    background:linear-gradient(135deg,#7C3AED 0%,#2563EB 54%,#0891B2 78%,#059669 100%)!important;
  }
  #newChatBtn.mobile-new-chat-fab:active{transform:scale(.96)!important;}
  #newChatBtn.mobile-new-chat-fab svg{width:27px!important;height:27px!important;stroke-width:2.15!important;}
  #newChatBtn.mobile-new-chat-fab span{display:none!important;}
}