/* ============================================================
   Engagement / Inbox — styles  (token-only · dual-theme)
   ============================================================ */
.inx{ flex:1 1 auto; min-width:0; height:100vh; min-height:0; display:flex; flex-direction:column;
  position:relative; isolation:isolate; overflow:hidden; }

/* ---------- command bar ---------- */
.in-bar{ flex:0 0 auto; display:flex; align-items:center; gap:22px; padding:14px 20px;
  background:var(--glass-head); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border-bottom:1px solid var(--line-soft); position:relative; }
.in-bar::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--acc-line),var(--ai-b),transparent); opacity:.5; }
.in-id{ flex:0 0 auto; padding-right:22px; border-right:1px solid var(--line-soft); }
.in-kpis{ flex:1; display:flex; align-items:center; gap:18px; min-width:0; }
.in-kdiv{ width:1px; align-self:stretch; background:var(--line-soft); }
.in-kpi{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.in-kpi .kv{ font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); line-height:1; display:flex; align-items:baseline; gap:7px; }
.in-kpi .kd{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); padding:1.5px 6px; border-radius:6px; }
.in-kpi .kd.up{ color:var(--good); background:rgba(70,217,160,.14); }
.in-kpi .kd.down{ color:var(--bad); background:rgba(255,107,125,.14); }
.in-kpi .kl{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.in-sent-bar{ display:flex; width:150px; height:9px; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-soft); }
.in-sent-bar span{ height:100%; }
.in-bar-r{ flex:0 0 auto; }
.in-search{ display:flex; align-items:center; gap:8px; height:36px; width:228px; padding:0 12px; border-radius:11px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-3); transition:.2s var(--out); }
.in-search:focus-within{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); color:var(--ink-2); }
.in-search input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--ink); font-size:var(--fs-base); font-weight:var(--fw-med); }
.in-search input::placeholder{ color:var(--ink-4); }

/* ---------- body ---------- */
.in-body{ flex:1; min-height:0; display:flex; align-items:stretch; }

/* left rail */
.in-rail{ flex:0 0 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--glass-rail); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--line-soft); }
.in-rail-scroll{ flex:1; overflow-y:auto; padding:12px 10px; display:flex; flex-direction:column; gap:4px; }
.in-rail-grp{ display:flex; flex-direction:column; gap:2px; }
.in-rail-h{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; padding:14px 8px 6px; }
.in-fold,.in-chan{ display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:11px; cursor:pointer;
  color:var(--ink-2); transition:background .16s var(--out), color .16s var(--out); width:100%; text-align:left; }
.in-fold .ic,.in-chan .ci{ flex:0 0 auto; color:var(--ink-3); display:grid; place-items:center; transition:color .16s var(--out); }
.in-fold .lbl{ flex:1; font-size:var(--fs-base); font-weight:var(--fw-med); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.in-fold .ct,.in-chan .ct{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink-3); font-family:'JetBrains Mono',monospace; }
.in-fold:hover,.in-chan:hover{ background:var(--hover); color:var(--ink); }
.in-fold:hover .ic,.in-chan:hover .ci{ color:var(--ink); }
.in-fold.on,.in-chan.on{ background:var(--acc-soft); color:var(--acc-2); box-shadow:inset 0 0 0 1px var(--acc-line); }
.in-fold.on .ic,.in-chan.on .ci{ color:var(--acc-2); }
.in-fold.on .ct,.in-chan.on .ct{ color:var(--acc-2); }
.in-fold.acc .ct{ color:#fff; background:var(--acc); padding:1px 7px; border-radius:8px; }
.in-fold.acc.on .ct{ background:var(--acc); color:#fff; }
.in-chan .ci{ width:24px; height:24px; border-radius:7px; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, hsl(var(--ch) 78% 60%), hsl(var(--ch) 68% 42%));
  box-shadow:0 3px 9px -3px hsl(var(--ch) 78% 50% / .6), inset 0 1px 0 rgba(255,255,255,.3); }
.in-chan .ci.all{ background:var(--well-2); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); }
.in-chan .lbl{ flex:1; display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.in-chan .lbl b{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.in-chan .lbl i{ font-size:var(--fs-micro); font-weight:var(--fw-bold); font-style:normal; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.in-team{ display:flex; flex-direction:column; gap:3px; }
.in-tm{ display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:10px; }
.in-tm .tn{ flex:1; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.in-tm .st{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; }
.in-tm .st.on{ color:var(--good); }

/* center list */
.in-list{ flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--glass-2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.in-list-head{ flex:0 0 auto; display:flex; align-items:center; height:46px; padding:0 16px; border-bottom:1px solid var(--line-soft); }
.in-list-head .t-label{ flex:1; }
.in-sort{ display:flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; color:var(--ink-2);
  font-size:var(--fs-sub); font-weight:var(--fw-bold); transition:.16s var(--out); }
.in-sort:hover{ background:var(--hover); color:var(--ink); }
.in-list-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px; display:flex; flex-direction:column; gap:4px; }

.in-row{ display:flex; gap:11px; padding:11px 11px 11px 7px; border-radius:13px; cursor:pointer; text-align:left; width:100%;
  border:1px solid transparent; position:relative; transition:background .16s var(--out), transform .2s var(--spring), box-shadow .2s var(--out); }
.in-row:hover{ background:var(--hover); transform:translateX(2px); }
.in-row.on{ background:var(--acc-soft); border-color:var(--acc-line); box-shadow:0 8px 26px -14px var(--acc-glow); }
.in-dot{ flex:0 0 6px; width:6px; align-self:center; }
.in-row.unread .in-dot{ height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc-glow); }
.in-av{ position:relative; flex:0 0 auto; align-self:flex-start; }
.in-pbadge{ position:absolute; bottom:-3px; right:-3px; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, hsl(var(--ch) 80% 60%), hsl(var(--ch) 68% 42%));
  box-shadow:0 2px 7px -2px hsl(var(--ch) 80% 50% / .7), inset 0 1px 0 rgba(255,255,255,.3); border:1.5px solid var(--bg); }
.in-row-main{ flex:1; min-width:0; }
.in-row-top{ display:flex; align-items:center; gap:8px; }
.in-row-top .nm{ flex:1; font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.in-row.unread .in-row-top .nm{ font-weight:var(--fw-black); }
.in-row-top .nm .vf{ color:var(--acc-2); flex:0 0 auto; }
.in-row-top .tm{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); flex:0 0 auto; }
.in-row-kind{ display:flex; align-items:center; gap:5px; margin-top:3px; color:var(--ink-3); font-size:var(--fs-micro); font-weight:var(--fw-bold); }
.in-row-kind .on-post{ font-style:normal; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.in-row-snip{ font-size:var(--fs-sub); font-weight:var(--fw-reg); color:var(--ink-2); line-height:1.42; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.in-row.unread .in-row-snip{ color:var(--ink); font-weight:var(--fw-med); }
.in-row-foot{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.in-row-foot .sent{ display:grid; place-items:center; }
.in-row-foot .intent{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:6px; background:var(--well); }
.in-row-foot .pri{ color:var(--warn); display:grid; place-items:center; }
.in-row-foot .spacer{ flex:1; }
.in-row-foot .unass{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); }

.in-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:40px 20px; text-align:center; }
.in-empty .ring{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:var(--ink-3); background:var(--well); box-shadow:inset 0 0 0 1px var(--line); }
.in-empty .t{ font-size:var(--fs-lg); font-weight:var(--fw-black); color:var(--ink); }
.in-empty .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }

/* right detail */
.in-detail{ flex:0 0 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border-left:1px solid var(--line-soft); }
.in-detail.empty{ align-items:center; justify-content:center; }
.in-dhead{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.in-av.lg{ align-self:center; }
.in-dwho{ flex:1; min-width:0; }
.in-dwho .nm{ font-size:var(--fs-lg); font-weight:var(--fw-black); color:var(--ink); display:flex; align-items:center; gap:6px; }
.in-dwho .nm .vf{ color:var(--acc-2); }
.in-dwho .hd{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; }
.in-dact{ display:flex; gap:4px; }
.in-ib{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.in-ib:hover{ background:var(--hover); color:var(--ink); }
.in-ib.on{ color:var(--warn); background:rgba(255,180,84,.14); box-shadow:inset 0 0 0 1px rgba(255,180,84,.3); }
.in-asg-pop{ position:absolute; top:40px; right:0; min-width:210px; z-index:60; padding:6px;
  background:var(--pop-bg,var(--glass-3)); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:13px; box-shadow:var(--shadow-pop); animation:pop .18s var(--spring); }
.in-asg-pop .ah{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-4); text-transform:uppercase; letter-spacing:.1em; padding:6px 9px 7px; }
.in-asg-pop .arow{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border-radius:9px; cursor:pointer; color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); transition:.14s var(--out); }
.in-asg-pop .arow span{ flex:1; text-align:left; }
.in-asg-pop .arow:hover{ background:var(--hover); color:var(--ink); }
.in-asg-pop .arow.on{ color:var(--acc-2); }
.in-asg-pop .arow .aun{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--well); color:var(--ink-3); flex:0 0 24px; }

.in-dscroll{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.in-post{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:13px; background:var(--well); border:1px solid var(--line-soft); }
.in-post-thumb{ flex:0 0 40px; width:40px; aspect-ratio:9/16; border-radius:9px; position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 70% 60% / .4), transparent 60%), repeating-linear-gradient(135deg, rgba(130,130,140,.2) 0 7px, rgba(130,130,140,.08) 7px 14px); box-shadow:inset 0 0 0 1px var(--line); }
.in-post-thumb .pp{ position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:5px; display:grid; place-items:center; color:#fff; background:rgba(8,9,14,.5); }
.in-post-thumb .pd{ position:absolute; bottom:2px; right:2px; font-size:7px; font-weight:var(--fw-bold); color:#fff; background:rgba(8,9,14,.6); padding:0 3px; border-radius:3px; }
.in-post-meta{ flex:1; min-width:0; }
.in-post-meta .pl{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.in-post-meta .pn{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--ink); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.in-post-meta .pv{ display:flex; align-items:center; gap:5px; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); margin-top:3px; }
.in-post-open{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); flex:0 0 30px; }
.in-post-open:hover{ background:var(--hover); color:var(--ink); }

.in-strip{ display:flex; flex-wrap:wrap; gap:6px; }
.in-strip .chip{ display:flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:8px; background:var(--well); border:1px solid var(--line-soft);
  font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.in-strip .chip.tag{ color:var(--ink-3); text-transform:none; letter-spacing:0; font-weight:var(--fw-bold); }

.in-msgs{ display:flex; flex-direction:column; gap:12px; }
.in-msg{ display:flex; gap:9px; align-items:flex-end; max-width:88%; }
.in-msg.me{ align-self:flex-end; flex-direction:row; }
.in-bub{ display:flex; flex-direction:column; gap:4px; }
.in-bub .bt{ padding:10px 13px; border-radius:14px; font-size:var(--fs-base); font-weight:var(--fw-med); line-height:1.45; color:var(--ink);
  background:var(--well-2); border:1px solid var(--line-soft); border-bottom-left-radius:5px; }
.in-msg.me .in-bub .bt{ background:linear-gradient(135deg,var(--acc-soft),rgba(22,192,216,.07)); border-color:var(--acc-line); border-bottom-left-radius:14px; border-bottom-right-radius:5px; }
.in-bub .bm{ display:flex; align-items:center; gap:8px; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); padding:0 3px; }
.in-msg.me .in-bub{ align-items:flex-end; }
.in-bub .lk{ display:flex; align-items:center; gap:3px; color:var(--bad); }

/* composer */
.in-comp{ flex:0 0 auto; border-top:1px solid var(--line-soft); padding:12px 14px 14px; background:var(--glass-head); display:flex; flex-direction:column; gap:10px; }
.in-ai-row{ display:flex; flex-direction:column; gap:7px; }
.in-ai-lbl{ display:flex; align-items:center; gap:6px; font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ai-b); text-transform:uppercase; letter-spacing:.1em; }
.in-ai-lbl svg{ filter:drop-shadow(0 0 5px var(--ai-b)); }
.in-ai-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.in-ai-chip{ flex:0 0 auto; max-width:280px; height:30px; padding:0 12px; border-radius:9px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-2);
  background:rgba(22,192,216,.1); border:1px solid var(--acc-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.18s var(--out); }
.in-ai-chip:hover{ background:var(--ai-grad); color:#fff; border-color:transparent; box-shadow:0 6px 18px -6px var(--ai-glow); transform:translateY(-1px); }
.in-comp-box{ background:var(--well); border:1px solid var(--line); border-radius:13px; transition:.2s var(--out); overflow:hidden; }
.in-comp-box:focus-within{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.in-ta{ width:100%; background:none; border:none; outline:none; resize:none; padding:12px 13px 6px; font-size:var(--fs-base); font-weight:var(--fw-reg); color:var(--ink); line-height:1.5; min-height:58px; }
.in-ta::placeholder{ color:var(--ink-4); }
.in-comp-foot{ display:flex; align-items:center; padding:6px 8px 8px; gap:8px; }
.in-comp-tools{ display:flex; gap:2px; flex:1; }
.ct-btn{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.ct-btn:hover{ background:var(--hover); color:var(--acc-2); }
.in-comp-send{ display:flex; align-items:center; gap:9px; }
.in-comp-send .kbd{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); padding:2px 6px; border-radius:6px; background:var(--well-2); box-shadow:inset 0 0 0 1px var(--line-soft); }
.in-send{ display:flex; align-items:center; gap:7px; height:36px; padding:0 16px; border-radius:11px; color:#fff; font-size:var(--fs-base); font-weight:var(--fw-black);
  background:var(--ai-grad); box-shadow:0 8px 22px -8px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s var(--spring), box-shadow .22s var(--out); }
.in-send:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 30px -8px var(--ai-glow); }
.in-send:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* compact tier — drop the left rail into a thin icon strip, stack detail under list */
html[data-compact] .in-rail{ display:none; }
html[data-compact] .in-detail{ position:absolute; inset:46px 0 0 auto; z-index:40; box-shadow:var(--shadow-float); }
@media (max-width:1100px){
  .in-kpis{ gap:12px; }
  .in-kpi:nth-child(n+5){ display:none; }
}

/* ---- sidebar now carries 11 nav items: let the rail scroll on short
   viewports without clipping the active marker (moved inside the item) ---- */
.nav-rail{ overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.nav-rail::-webkit-scrollbar{ width:0; height:0; }
.nav-item.on::before{ left:4px; }