/* ── App chrome (v3): global header + portal sidebar ─────────────────────
   Same calm language as portal-home.css / mgmt-home.css: neutral surfaces,
   hairline borders, one indigo accent for "you are here", stroke icons from
   ui-icons.js instead of emoji. Visual only — sidebar geometry, the mobile
   drawer (≤980px) and the phone header layout stay owned by style.css.
   IDs (#globalTopHeader, #portalSidebar) keep these above the legacy rules
   without piling on !important. */

:root{
  --ch-surface:#ffffff;
  --ch-surface-2:#f8fafc;
  --ch-hover:var(--dk-hover);
  --ch-border:var(--dk-border);
  --ch-text:var(--dk-text);
  --ch-muted:var(--dk-muted);
  --ch-faint:var(--dk-faint);
  --ch-accent:var(--dk-accent);
  --ch-accent-soft:var(--dk-accent-soft);
  --ch-danger:#e11d48;
}
html[data-theme="dark"]{
  --ch-surface:#0f172a;
  --ch-surface-2:#111a2e;
  --ch-hover:var(--dk-hover);
  --ch-border:var(--dk-border);
  --ch-text:var(--dk-text);
  --ch-muted:var(--dk-muted);
  --ch-faint:var(--dk-faint);
  --ch-accent:var(--dk-accent);
  --ch-accent-soft:var(--dk-accent-soft);
  --ch-danger:#fb7185;
}

#globalTopHeader .di-ic,
#portalSidebar .di-ic{ width:18px; height:18px; flex:0 0 auto; display:block; }

/* ═══ header ═══ */
#globalTopHeader .gtop-shell{
  background:color-mix(in srgb, var(--ch-surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--ch-border);
  box-shadow:none;
}

#globalTopHeader .gtop-logo{ gap:10px; border-radius:12px; padding:4px 4px 4px 10px; }
#globalTopHeader .gtop-logo:hover{ background:var(--ch-hover); }
#globalTopHeader .gtop-logo:focus-visible{ outline:2px solid var(--ch-accent); outline-offset:2px; }
#globalTopHeader .gtop-logo-icon{
  width:34px; height:34px;
  border-radius:10px;
  background:var(--dk-accent-fill);
  color:#fff;
  box-shadow:none;
}
html[data-theme="dark"] #globalTopHeader .gtop-logo-icon{ background:var(--dk-accent-fill); }
#globalTopHeader .gtop-logo-icon .di-ic{ width:17px; height:17px; }
#globalTopHeader .gtop-logo-text{ display:flex; flex-direction:column; line-height:1.35; }
#globalTopHeader .gtop-logo-name{
  font-size:14.5px;
  font-weight:800;
  letter-spacing:0;
  color:var(--ch-text);
}
#globalTopHeader .gtop-logo-portal{
  font-size:11.5px;
  font-weight:600;
  color:var(--ch-muted);
}

/* tabs: quiet text links, indigo only for the current page */
#globalTopHeader .gtop-nav{
  background:transparent;
  border:0;
  padding:0;
  gap:2px;
}
#globalTopHeader .gtop-ni{
  height:36px;
  padding:0 12px;
  gap:7px;
  border-radius:10px;
  background:transparent;
  color:var(--ch-muted);
  font-size:13px;
  font-weight:600;
  box-shadow:none;
}
#globalTopHeader .gtop-ni-ic{ display:inline-flex; font-size:0; }
#globalTopHeader .gtop-ni-ic .di-ic{ width:16px; height:16px; }
#globalTopHeader .gtop-ni:hover{ background:var(--ch-hover); color:var(--ch-text); }
#globalTopHeader .gtop-ni.is-active{
  background:var(--ch-accent-soft);
  color:var(--ch-accent);
  box-shadow:none;
}
#globalTopHeader .gtop-ni:focus-visible{ outline:2px solid var(--ch-accent); outline-offset:1px; }
#globalTopHeader .gtop-ni-badge{
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ch-danger);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
}

/* action buttons */
#globalTopHeader .gtop-right{ gap:6px; }
#globalTopHeader .gtop-ib{
  width:38px; height:38px;
  border-radius:11px;
  border:0;
  background:transparent;
  color:var(--ch-muted);
  box-shadow:none;
  position:relative;
  transition:background-color .15s ease, color .15s ease;
}
#globalTopHeader .gtop-ib:hover{ background:var(--ch-hover); color:var(--ch-text); }
#globalTopHeader .gtop-ib:focus-visible{ outline:2px solid var(--ch-accent); outline-offset:1px; }
#globalTopHeader .gtop-ib .di-ic{ width:19px; height:19px; }
/* "turn on notifications" is an invitation, not a second bell */
#globalTopHeader .gtop-ib-pill{
  width:auto;
  padding:0 12px;
  gap:6px;
  background:var(--ch-accent-soft);
  color:var(--ch-accent);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
#globalTopHeader .gtop-ib-pill:hover{ background:var(--dk-accent-fill); color:#fff; }
#globalTopHeader .gtop-ib-pill .di-ic{ width:16px; height:16px; }
#globalTopHeader .gtop-ib-badge{
  position:absolute;
  top:3px; right:auto;
  inset-inline-end:3px;
  box-sizing:border-box;
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ch-danger);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  border:2px solid var(--ch-surface);
}
#globalTopHeader .gtop-ib-badge.hidden{ display:none !important; }

#globalTopHeader .gtop-avatar{
  width:36px; height:36px;
  margin-inline-start:4px;
  border-radius:50%;
  border:0;
  background:var(--ch-accent-soft);
  color:var(--ch-accent);
  box-shadow:0 0 0 2px var(--ch-surface), 0 0 0 3px var(--ch-border);
}
#globalTopHeader .gtop-avatar:hover{ box-shadow:0 0 0 2px var(--ch-surface), 0 0 0 3px var(--ch-accent); }
#globalTopHeader .gtop-avatar-initial{ font-size:14px; font-weight:800; color:var(--ch-accent); }
#globalTopHeader .gtop-avatar-ring{ display:none; }

@media (max-width:980px){
  #globalTopHeader .gtop-logo-portal{ display:none; }
  #globalTopHeader .gtop-ib-pill span{ display:none; }
  #globalTopHeader .gtop-ib-pill{ width:38px; padding:0; }
}

/* ═══ sidebar ═══ */
#portalSidebar{
  background:var(--ch-surface);
  border-left:1px solid var(--ch-border);
  box-shadow:none;
}
#portalSidebar .sidebar-header{
  padding:18px 18px 12px;
  border-bottom:0;
}
#portalSidebar .sidebar-header::after{ display:none; }
#portalSidebar .brand{
  font-size:13px;
  font-weight:800;
  color:var(--ch-faint);
  letter-spacing:0;
  background:none;
  -webkit-text-fill-color:currentColor;
}

#portalSidebar .nav{
  display:flex !important;
  flex-direction:column;
  gap:2px;
  padding:0 12px;
}
#portalSidebar #sidebarCoreNav.hidden,
#portalSidebar .nav.hidden{ display:none !important; }
#portalSidebar .snav-group{ display:flex; flex-direction:column; gap:2px; }
#portalSidebar .snav-group + .snav-group{ margin-top:14px; }
/* a group whose every item is hidden for this portal/role disappears */
#portalSidebar .snav-group:not(:has(> button:not(.hidden))){ display:none; }
#portalSidebar .snav-label,
#portalSidebar .mini-title{
  margin:0 0 4px !important;
  padding:0 10px;
  font-size:11.5px;
  font-weight:700;
  color:var(--ch-faint) !important;
  letter-spacing:0;
  text-align:start;
  direction:rtl;
  background:none;
  border:0;
}
#portalSidebar #sidebarSalesSection,
#portalSidebar #sidebarAiSection,
#portalSidebar #sidebarPopularSection,
#portalSidebar #sidebarSupportSection{ margin-top:14px; }
#portalSidebar #sidebarSalesSection .mini-title,
#portalSidebar #sidebarAiSection .mini-title,
#portalSidebar #sidebarPopularSection .mini-title,
#portalSidebar #sidebarSupportSection .mini-title{ padding:0 22px; }

#portalSidebar .nav button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  width:100%;
  min-height:38px;
  margin:0;
  padding:0 10px;
  border:0 !important;
  border-radius:10px;
  background:transparent !important;
  color:var(--ch-muted) !important;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  text-align:start;
  box-shadow:none !important;
  transform:none;
  transition:background-color .12s ease, color .12s ease;
}
#portalSidebar:not(.collapsed) .nav button::before,
#portalSidebar:not(.collapsed) .nav button::after{ content:none; }
#portalSidebar .nav button:hover{
  background:var(--ch-hover) !important;
  color:var(--ch-text) !important;
  transform:none;
}
#portalSidebar .nav button:focus{ outline:none; }
#portalSidebar .nav button:focus-visible{ outline:2px solid color-mix(in srgb, var(--ch-accent) 45%, transparent); outline-offset:-2px; }
/* the current item is already marked; no extra ring when focus lands on it
   (Chrome shows :focus-visible after programmatic focus, which read as a
   heavy frame around the selected item) */
#portalSidebar .nav button.active:focus-visible{ outline:none; }
#portalSidebar .nav button.active{
  background:var(--ch-accent-soft) !important;
  color:var(--ch-accent) !important;
  font-weight:700;
  border:0 !important;
  box-shadow:none !important;
}
/* slim marker on the reading-start edge of the current item */
#portalSidebar:not(.collapsed) .nav button.active::before{
  content:"";
  position:absolute;
  inset-inline-start:-12px;
  top:9px; bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--ch-accent);
}
#portalSidebar .nav button .nav-icon{
  width:20px; height:20px;
  min-width:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none !important;
  border:0 !important;
  border-radius:0;
  box-shadow:none !important;
  color:inherit;
  font-size:0;
  opacity:.9;
}
#portalSidebar .nav button.active .nav-icon{ opacity:1; }
#portalSidebar .nav button .nav-text{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:inherit;
  font-weight:inherit;
}
#portalSidebar .nav button .nav-badge{
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ch-danger) !important;
  color:#fff !important;
  font-size:11px;
  font-weight:800;
  box-shadow:none !important;
  border:0 !important;
}
#portalSidebar .nav button .nav-badge.hidden{ display:none !important; }
#portalSidebar .nav button.active .nav-badge{ background:var(--dk-accent-fill) !important; color:#fff !important; }
html[data-theme="dark"] #portalSidebar .nav button.active .nav-badge{ color:#0b1020 !important; }

#portalSidebar .sidebar-empty-state{
  margin:12px;
  border-radius:12px;
  background:var(--ch-surface-2);
  border:1px dashed var(--ch-border);
  color:var(--ch-muted);
}

@media (prefers-reduced-motion:reduce){
  #globalTopHeader *, #portalSidebar *{ transition:none !important; }
}

/* drawer: keep the title clear of the close (✕) button */
@media (max-width:980px){
  #portalSidebar .sidebar-header{ padding-inline-end:64px; }
}

/* dark ground: neutral slate wash (the legacy green/indigo radial glows
   clashed with the slate surfaces used everywhere in v3) */
html[data-theme="dark"] body:not(.light-theme){
  background:linear-gradient(180deg, #0b1120 0%, #0f172a 100%) !important;
}

/* ── Bell activity popover: theme tokens (legacy rules hard-code white,
      so in dark mode the light text sat on a white card) ──────────────── */
#inboxPopover.inbox-popover{ background:var(--dk-surface-solid); border-color:var(--dk-border-strong); color:var(--dk-text); }
#inboxPopover .inbox-popover-head{ background:var(--dk-surface-solid); border-bottom-color:var(--dk-border); }
#inboxPopover .inbox-popover-title{ color:var(--dk-text); }
#inboxPopover .inbox-popover-close{ color:var(--dk-muted); }
#inboxPopover .inbox-popover-close:hover{ background:var(--dk-hover); color:var(--dk-text); }
#inboxPopover .inbox-popover-tabs{ background:var(--dk-surface-solid); border-bottom-color:var(--dk-border); }
#inboxPopover .inbox-tab{ color:var(--dk-muted); }
#inboxPopover .inbox-tab:hover{ background:var(--dk-hover); color:var(--dk-text); }
#inboxPopover .inbox-tab.is-active{ background:var(--dk-accent-fill); color:var(--dk-on-accent,#fff); }
#inboxPopover .inbox-popover-body{ background:var(--dk-surface-solid); }
#inboxPopover .inbox-feed-item{ border-bottom-color:var(--dk-border); }
#inboxPopover .inbox-feed-item:hover{ background:var(--dk-hover); }
#inboxPopover .inbox-feed-item.is-unread{ background:var(--dk-accent-soft); }
#inboxPopover .inbox-feed-title{ color:var(--dk-text); }
#inboxPopover .inbox-feed-body{ color:var(--dk-muted); }
#inboxPopover .inbox-feed-time,
#inboxPopover .inbox-empty{ color:var(--dk-faint); }
#inboxPopover .inbox-feed-icon{ background:var(--dk-chip); }
#inboxPopover .inbox-feed-dot{ background:var(--dk-accent-fill); }
#inboxPopover .inbox-popover-foot{ background:var(--dk-surface-2); border-top-color:var(--dk-border); }
#inboxPopover .inbox-popover-all{ color:var(--dk-accent); }
#inboxPopover .inbox-popover-all:hover{ background:var(--dk-accent-soft); }
#inboxPopover .inbox-feed-icon-task{ background:rgba(22,163,74,.16); }
#inboxPopover .inbox-feed-icon-mention{ background:rgba(234,179,8,.18); }
#inboxPopover .inbox-feed-icon-comment{ background:rgba(59,130,246,.16); }
#inboxPopover .inbox-feed-icon-announce{ background:rgba(168,85,247,.16); }

/* ── Chrome-extension install guide (puzzle button) ───────────────────── */
.xg-backdrop{ position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:16px; direction:rtl; }
.xg{ width:min(560px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--dk-surface-solid); color:var(--dk-text); border:1px solid var(--dk-border); border-radius:18px; box-shadow:var(--dk-shadow-pop); overflow:hidden; }
.xg-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--dk-border); }
.xg-logo{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--dk-accent-soft); color:var(--dk-accent); }
.xg-logo svg{ width:22px; height:22px; }
.xg-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.xg-title b{ font-size:15px; }
.xg-title > span{ font-size:12px; color:var(--dk-muted); }
.xg-ver{ color:var(--dk-accent); font-weight:700; }
.xg-x{ flex:none; width:32px; height:32px; border:0; border-radius:9px; background:none; color:var(--dk-muted); cursor:pointer; font-size:15px; }
.xg-x:hover{ background:var(--dk-hover); color:var(--dk-text); }
.xg-body{ padding:16px 18px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.xg-dl{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; border:0; border-radius:12px; background:var(--dk-accent-fill); color:var(--dk-on-accent,#fff); font:inherit; font-weight:800; font-size:14px; cursor:pointer; }
.xg-dl svg{ width:19px; height:19px; }
.xg-dl:hover{ filter:brightness(1.07); }
.xg-steps{ list-style:none; margin:0; padding:0; counter-reset:xg 1; display:flex; flex-direction:column; gap:10px; }
.xg-steps li{ counter-increment:xg; position:relative; padding:11px 48px 12px 14px; border:1px solid var(--dk-border); border-radius:12px; background:var(--dk-surface-2); }
.xg-steps li::before{ content:counter(xg); position:absolute; right:12px; top:11px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--dk-accent-fill); color:#fff; font-size:12px; font-weight:800; }
.xg-step-t{ font-size:13.5px; margin-bottom:4px; }
.xg-steps p, .xg-more p, .xg-more li{ margin:0; font-size:12.5px; line-height:1.95; color:var(--dk-muted); }
.xg-steps p b, .xg-more b{ color:var(--dk-text); }
.xg code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; padding:1px 6px; border-radius:6px; background:var(--dk-chip); color:var(--dk-text); }
.xg-copy{ display:flex; align-items:center; gap:8px; margin-top:7px; padding:6px 6px 6px 10px; border:1px dashed var(--dk-border-strong); border-radius:10px; background:var(--dk-surface-solid); }
.xg-copy code{ flex:1; background:none; font-size:13px; font-weight:700; text-align:left; }
.xg-copy button{ flex:none; border:1px solid var(--dk-border-strong); background:var(--dk-surface-solid); color:var(--dk-text); border-radius:8px; padding:4px 12px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.xg-copy button:hover{ border-color:var(--dk-accent); color:var(--dk-accent); }
.xg-mock{ display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px; border-radius:10px; background:#fff; color:#202124; border:1px solid #dadce0; font:500 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.xg-mock-t{ font-size:14px; font-weight:600; }
.xg-mock-sp{ flex:1; }
.xg-sw{ width:30px; height:16px; border-radius:999px; background:#bdc1c6; position:relative; }
.xg-sw i{ position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; }
.xg-sw.is-on{ background:#1a73e8; } .xg-sw.is-on i{ left:16px; }
.xg-sw.is-on, .xg-mock-btn.is-hl{ box-shadow:0 0 0 3px rgba(234,88,12,.55); }
.xg-mock-btn{ padding:6px 10px; border:1px solid #dadce0; border-radius:6px; color:#1a73e8; background:#fff; }
.xg-more{ border:1px solid var(--dk-border); border-radius:12px; padding:0 14px; }
.xg-more summary{ cursor:pointer; padding:11px 0; font-weight:700; font-size:13px; }
.xg-more[open] summary{ border-bottom:1px solid var(--dk-border); margin-bottom:8px; }
.xg-more > p, .xg-more > ul{ padding-bottom:12px; }
.xg-more ul{ margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:6px; }
@media (max-width:520px){ .xg-backdrop{ padding:8px; align-items:flex-end; } .xg{ border-radius:18px 18px 12px 12px; } }
.xg-mock{ flex-wrap:wrap; }
.xg-mock-btn, .xg-mock > span{ white-space:nowrap; }
@media (max-width:520px){ .xg-mock-btn:not(.is-hl){ display:none; } }