/* ============================================================
   glass.css — the optional Glass interface style.

   Applies only under :root[data-ui-style="glass"]; Classic (no
   attribute, or "classic") is untouched. The brand pinks are Hub's own
   tokens (--primary, --primary-light, --primary-dark, --primary-soft,
   --primary-ring), shared by both styles; every tint and gradient here is
   derived from them. Light and dark each have their own glass surfaces.
   ============================================================ */

:root[data-ui-style="glass"]{
  --g-surface: rgba(255,255,255,.58);
  --g-surface-strong: rgba(255,255,255,.80);
  --g-surface-soft: rgba(255,255,255,.40);
  --g-control: rgba(255,255,255,.72);
  --g-border: rgba(255,255,255,.72);
  --g-line: rgba(209,21,108,.10);
  --g-highlight: inset 0 1px 0 rgba(255,255,255,.85);
  --g-shadow: 0 10px 30px -14px color-mix(in srgb,var(--primary) 30%,transparent), 0 2px 8px rgba(26,26,46,.05);
  --g-shadow-lg: 0 24px 60px -20px color-mix(in srgb,var(--primary) 35%,transparent), 0 8px 24px rgba(26,26,46,.08);
  --g-blur: blur(28px) saturate(145%);
  --g-radius: 22px;
  --g-radius-nested: 16px;
  --g-radius-control: 11px;
  /* The page's own tokens, made glassy so every component follows. */
  --bg-card: var(--g-surface);
  --bg-sidebar: var(--g-surface);
  --bg-hover: color-mix(in srgb,var(--primary) 6%,rgba(255,255,255,.55));
  --bg-muted: rgba(255,255,255,.42);
  --border: rgba(255,255,255,.72);
  --border-soft: var(--g-line);
  --overlay: rgba(255,255,255,.55);
  /* Maps draw land and borders as SVG fills: they need solid colours. */
  --map-land: #EFE1EA;
  --map-edge: #D9BFCF;
}
:root[data-ui-style="glass"][data-theme="dark"]{
  --g-surface: rgba(30,30,46,.56);
  --g-surface-strong: rgba(30,30,46,.86);
  --g-surface-soft: rgba(30,30,46,.38);
  --g-control: rgba(22,22,31,.62);
  --g-border: rgba(255,255,255,.10);
  --g-line: rgba(255,255,255,.07);
  --g-highlight: inset 0 1px 0 rgba(255,255,255,.07);
  --g-shadow: 0 12px 34px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
  --g-shadow-lg: 0 28px 70px -20px rgba(0,0,0,.7);
  --bg-hover: color-mix(in srgb,var(--primary) 10%,rgba(30,30,46,.6));
  --bg-muted: rgba(22,22,31,.45);
  --border: rgba(255,255,255,.10);
  --overlay: rgba(22,22,31,.55);
  --map-land: #2A2438;
  --map-edge: #453A57;
}

/* ── Background: Hub's own base with diffuse pink and supporting glows ── */
:root[data-ui-style="glass"] body{
  background-color: var(--bg-body);
  background-image:
    radial-gradient(42% 52% at 8% 6%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 70%),
    radial-gradient(38% 46% at 96% 4%, color-mix(in srgb,var(--info,#3B82F6) 12%,transparent), transparent 70%),
    radial-gradient(46% 56% at 90% 96%, color-mix(in srgb,var(--primary-light) 14%,transparent), transparent 70%),
    radial-gradient(40% 50% at 4% 98%, color-mix(in srgb,var(--purple,#8b5cf6) 9%,transparent), transparent 70%);
  background-attachment: fixed;
}
:root[data-ui-style="glass"][data-theme="dark"] body{
  background-image:
    radial-gradient(42% 52% at 8% 6%, color-mix(in srgb,var(--primary) 20%,transparent), transparent 70%),
    radial-gradient(38% 46% at 96% 4%, color-mix(in srgb,var(--info,#60A5FA) 10%,transparent), transparent 70%),
    radial-gradient(46% 56% at 90% 96%, color-mix(in srgb,var(--primary-light) 14%,transparent), transparent 70%);
}

/* ── Frosted surfaces ───────────────────────────────────────── */
:root[data-ui-style="glass"] :is(.card,.kpi-card,.d-sidebar,.d-topbar,.chat-shell,.lb-hero,.lb-step,.lb-list,.lb-you,.lb-guide,.library-panel,.cx-stat,.module-card,.an-tile,.ca-steps li){
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-highlight), var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
:root[data-ui-style="glass"] :is(.card,.kpi-card,.chat-shell,.lb-hero,.lb-list,.library-panel,.module-card){ border-radius: var(--g-radius); }
:root[data-ui-style="glass"] .card{ padding: 22px 24px; }
:root[data-ui-style="glass"] .card-head{ border-bottom-color: var(--g-line); }
:root[data-ui-style="glass"] .grid{ gap: 20px; }
/* Selected summary cards carry a faint brand tint. */
:root[data-ui-style="glass"] .kpi-card.c-primary,:root[data-ui-style="glass"] .lb-step.p1{
  background: linear-gradient(160deg, color-mix(in srgb,var(--primary) 10%,var(--g-surface)), var(--g-surface) 60%);
}
/* Nested panels inside a card: a little more opaque, smaller radius. */
:root[data-ui-style="glass"] .card :is(.cx-card,.cx-stat,.table-scroll,.cx-scroll,.ca-steps li){ border-radius: var(--g-radius-nested); }
:root[data-ui-style="glass"] .card .cx-card{ background: var(--g-surface-soft); border-color: var(--g-border); }

/* ── Navigation and header ─────────────────────────────────── */
:root[data-ui-style="glass"] .d-sidebar{ border-radius: 24px; }
:root[data-ui-style="glass"] .nav-link,:root[data-ui-style="glass"] .nav-submenu a{ border-radius: 12px; }
:root[data-ui-style="glass"] .nav-link:hover,:root[data-ui-style="glass"] .nav-submenu a:hover{ background: rgba(255,255,255,.55); color: var(--t-base); }
:root[data-ui-style="glass"][data-theme="dark"] .nav-link:hover,:root[data-ui-style="glass"][data-theme="dark"] .nav-submenu a:hover{ background: rgba(255,255,255,.06); }
:root[data-ui-style="glass"] :is(.nav-link.is-active,.nav-submenu a.is-active){
  background: linear-gradient(135deg, color-mix(in srgb,var(--primary) 16%,rgba(255,255,255,.75)), rgba(255,255,255,.55));
  color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent), var(--g-highlight);
}
:root[data-ui-style="glass"][data-theme="dark"] :is(.nav-link.is-active,.nav-submenu a.is-active){
  background: linear-gradient(135deg, color-mix(in srgb,var(--primary) 26%,transparent), rgba(255,255,255,.04));
}
:root[data-ui-style="glass"] :is(.nav-link,.nav-submenu a):focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
@media (min-width:901px){
  :root[data-ui-style="glass"] .d-topbar{ margin: 12px 16px 0 16px; border-radius: 20px; top: 12px; }
}
:root[data-ui-style="glass"] .d-topbar{ border-bottom: 1px solid var(--g-border); }
:root[data-ui-style="glass"] .icon-btn,:root[data-ui-style="glass"] .avatar,:root[data-ui-style="glass"] .cmd{
  background: var(--g-surface-soft); border: 1px solid var(--g-border); border-radius: 12px;
}

/* ── Buttons, inputs and controls ──────────────────────────── */
:root[data-ui-style="glass"] .btn{ border-radius: var(--g-radius-control); transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
:root[data-ui-style="glass"] :is(.btn--primary,.cx-btn.primary,.chat-editor .chat-composer-send){
  background: linear-gradient(135deg, var(--primary-light), var(--primary) 55%, var(--primary-dark));
  border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -8px color-mix(in srgb,var(--primary) 70%,transparent);
}
:root[data-ui-style="glass"] :is(.btn--primary,.cx-btn.primary):hover{ filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -8px color-mix(in srgb,var(--primary) 80%,transparent); }
:root[data-ui-style="glass"] :is(.btn--ghost,.cx-btn:not(.primary),.chat-small-btn,.chat-member-pill,.cx-filter){
  background: var(--g-surface-soft); border: 1px solid var(--g-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-ui-style="glass"] :is(.input,.select,.textarea,input.input,select.select,textarea.input){
  background: var(--g-control); border: 1px solid var(--g-border); border-radius: var(--g-radius-control);
}
:root[data-ui-style="glass"] :is(.input,.select,.textarea):focus{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
:root[data-ui-style="glass"] :is(.tag,.badge){ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-ui-style="glass"] :is(.lb-seg,.cx-tabs){ background: var(--g-surface-soft); border-color: var(--g-border); }
:root[data-ui-style="glass"] .lb-seg button[aria-checked="true"]{ background: var(--g-surface-strong); }

/* ── Tables in glass containers ────────────────────────────── */
:root[data-ui-style="glass"] .table-scroll{ border-radius: 14px; }
:root[data-ui-style="glass"] .table thead th{ background: rgba(255,255,255,.35); border-bottom-color: var(--g-line); }
:root[data-ui-style="glass"][data-theme="dark"] .table thead th{ background: rgba(255,255,255,.03); }
:root[data-ui-style="glass"] .table tbody td{ border-bottom-color: var(--g-line); }
:root[data-ui-style="glass"] .table tbody tr:hover td{ background: color-mix(in srgb,var(--primary) 5%,transparent); }
:root[data-ui-style="glass"] .cx-table th{ background: var(--g-surface-strong); }

/* ── Menus, dialogs, notifications: more opaque so text stays clear ── */
:root[data-ui-style="glass"] :is(.dd-menu,.modal-demo,.cx-dialog,.palette-modal,.chat-emoji-pop,.hub-appearance-pop,dialog.library-upload){
  background: var(--g-surface-strong);
  border: 1px solid var(--g-border);
  border-radius: 20px;
  box-shadow: var(--g-highlight), var(--g-shadow-lg);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
:root[data-ui-style="glass"] .am-modal-backdrop,:root[data-ui-style="glass"] .cx-dialog::backdrop{
  background: color-mix(in srgb,var(--primary) 8%,rgba(26,26,46,.28));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-ui-style="glass"] .modal-head,:root[data-ui-style="glass"] .modal-foot{ border-color: var(--g-line); }

/* ── Chat ──────────────────────────────────────────────────── */
:root[data-ui-style="glass"] .chat-shell{ overflow: hidden; }
:root[data-ui-style="glass"] .chat-rail,:root[data-ui-style="glass"] .chat-pane{ background: transparent; }
:root[data-ui-style="glass"] .chat-rail{ border-right-color: var(--g-line); }
:root[data-ui-style="glass"] .chat-thread{ background: transparent; }
:root[data-ui-style="glass"] .chat-editor{ background: var(--g-surface-strong); border-color: var(--g-border); box-shadow: var(--g-highlight), var(--g-shadow); }
:root[data-ui-style="glass"] .chat-item.is-active{ background: linear-gradient(135deg, var(--primary), color-mix(in srgb,var(--primary) 78%,#000)); box-shadow: var(--g-highlight), 0 6px 18px color-mix(in srgb,var(--primary) 28%,transparent); }
:root[data-ui-style="glass"] .chat-item.is-active,:root[data-ui-style="glass"] .chat-item.is-active *{ color: #fff; }
:root[data-ui-style="glass"] .chat-line:not(.is-own) .chat-text{ background: var(--g-surface-strong); border: 1px solid var(--g-border); }
:root[data-ui-style="glass"] .chat-line.is-own .chat-text{ background: linear-gradient(135deg, var(--primary-light), var(--primary)); }

/* ── Loading states ─────────────────────────────────────────── */
:root[data-ui-style="glass"] :is(.lb-skeleton,.skeleton){ background: linear-gradient(90deg, var(--g-surface-soft), var(--g-surface-strong), var(--g-surface-soft)); background-size: 200% 100%; }

/* ── No blur available: solid, readable surfaces ───────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-ui-style="glass"]{ --g-surface: rgba(255,255,255,.92); --g-surface-strong: #fff; --bg-card: rgba(255,255,255,.92); }
  :root[data-ui-style="glass"][data-theme="dark"]{ --g-surface: rgba(30,30,46,.94); --g-surface-strong: #1E1E2E; --bg-card: rgba(30,30,46,.94); }
}

/* ── Phones: less blur and spacing, for comfort and speed ──── */
@media (max-width:720px){
  :root[data-ui-style="glass"]{ --g-blur: blur(16px) saturate(140%); --g-radius: 18px; }
  :root[data-ui-style="glass"] .card{ padding: 18px; }
  :root[data-ui-style="glass"] .d-sidebar{ border-radius: 0 22px 22px 0; background: var(--g-surface-strong); }
}

/* ── Motion: restrained, and none when asked ───────────────── */
:root[data-ui-style="glass"] :is(.card,.btn,.nav-link,.nav-submenu a,.icon-btn,.chat-item){ transition: background-color .19s ease, border-color .19s ease, box-shadow .19s ease, color .19s ease; }
@media (prefers-reduced-motion: reduce){
  :root[data-ui-style="glass"] *{ transition-duration: 0s !important; }
}

/* ── The appearance control itself (both styles) ───────────── */
.hub-appearance{ position: relative; display: inline-flex; }
.hub-appearance-pop{ position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; width: 268px; padding: 14px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.hub-appearance-pop[hidden]{ display: none; }
.hub-appearance-pop h3{ margin: 0 0 4px; font-size: 13px; color: var(--t-base); }
.hub-appearance-pop p{ margin: 0 0 12px; font-size: 12px; color: var(--t-muted); }
.hub-appearance-group{ margin: 0 0 12px; border: 0; padding: 0; }
.hub-appearance-group legend{ padding: 0; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-light); }
.hub-appearance-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hub-appearance-opts button{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--t-base); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.hub-appearance-opts button[aria-checked="true"]{ border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); color: var(--primary); }
.hub-appearance-opts button:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.hub-swatch{ width: 100%; height: 34px; border-radius: 7px; border: 1px solid var(--border); }
.hub-swatch.classic{ background: linear-gradient(90deg,#fff 0 30%, #FAFAFA 30%); }
.hub-swatch.glass{ background: radial-gradient(60% 90% at 20% 10%, rgba(209,21,108,.35), transparent 70%), radial-gradient(50% 80% at 90% 90%, rgba(59,130,246,.3), transparent 70%), #f6eef4; position: relative; }
.hub-swatch.glass::after{ content: ""; position: absolute; inset: 7px 10px; border-radius: 5px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); }
.hub-swatch{ position: relative; }
.hub-swatch.light{ background: #FAFAFA; }
.hub-swatch.dark{ background: #16161F; }

/* Liquid glass finish; applies only to the existing Glass appearance. */
:root[data-ui-style="glass"]{
 --g-surface:rgba(255,255,255,.32);--g-surface-strong:rgba(255,255,255,.78);--g-surface-soft:rgba(255,255,255,.20);--g-control:rgba(255,255,255,.64);--g-border:rgba(255,255,255,.68);
 --g-highlight:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.50),inset 0 -1px 0 rgba(255,255,255,.28);
 --g-shadow:0 12px 36px -18px rgba(58,28,57,.24),0 2px 6px rgba(38,25,45,.04);
 --g-shadow-lg:0 28px 70px -24px rgba(40,20,48,.32),0 6px 18px rgba(40,20,48,.08);
 --g-blur:blur(26px) saturate(175%);
 --g-sheen:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 23%,transparent 48%,rgba(255,255,255,.08) 76%,rgba(255,255,255,.30));
 --border:var(--g-border);
}
:root[data-ui-style="glass"][data-theme="dark"]{
 --g-surface:rgba(28,29,44,.40);--g-surface-strong:rgba(28,29,44,.84);--g-surface-soft:rgba(255,255,255,.045);--g-control:rgba(20,21,32,.70);--g-border:rgba(255,255,255,.22);
 --g-highlight:inset 0 1px 0 rgba(255,255,255,.32),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06);
 --g-shadow:0 16px 40px -18px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.12);--g-shadow-lg:0 28px 70px -20px rgba(0,0,0,.72);
 --g-sheen:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 25%,transparent 50%,rgba(255,255,255,.015) 76%,rgba(255,255,255,.07));--border:var(--g-border);
}
:root[data-ui-style="glass"] body{
 background-image:radial-gradient(ellipse at 5% 8%,color-mix(in srgb,var(--primary-light) 24%,transparent),transparent 53%),radial-gradient(ellipse at 95% 28%,color-mix(in srgb,var(--info,#3b82f6) 18%,transparent),transparent 52%),radial-gradient(ellipse at 42% 95%,color-mix(in srgb,var(--purple,#8b5cf6) 18%,transparent),transparent 56%);
}
:root[data-ui-style="glass"][data-theme="dark"] body{
 background-image:radial-gradient(ellipse at 5% 8%,color-mix(in srgb,var(--primary) 24%,transparent),transparent 53%),radial-gradient(ellipse at 95% 28%,color-mix(in srgb,var(--info,#60a5fa) 15%,transparent),transparent 52%),radial-gradient(ellipse at 42% 95%,color-mix(in srgb,var(--purple,#8b5cf6) 20%,transparent),transparent 56%);
}
/* Reflections are backgrounds, so they never cover text or intercept clicks. */
:root[data-ui-style="glass"] :is(.card,.kpi-card,.d-sidebar,.d-topbar,.chat-shell,.lb-hero,.lb-step,.lb-list,.lb-you,.lb-guide,.library-panel,.cx-stat,.module-card,.an-tile,.ca-steps li){background-color:var(--g-surface);background-image:var(--g-sheen);background-origin:border-box;border-color:var(--g-border);box-shadow:var(--g-highlight),var(--g-shadow)}
:root[data-ui-style="glass"] :is(.dd-menu,.modal-demo,.cx-dialog,.palette-modal,.chat-emoji-pop,.hub-appearance-pop,dialog.library-upload){background-color:var(--g-surface-strong);background-image:var(--g-sheen)}
:root[data-ui-style="glass"] :is(.btn--primary,.cx-btn.primary,.chat-editor .chat-composer-send){background-image:linear-gradient(180deg,rgba(255,255,255,.24),transparent 52%),linear-gradient(135deg,var(--primary-light),var(--primary) 55%,var(--primary-dark));box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -9px var(--primary)}
:root[data-ui-style="glass"] :is(.icon-btn,.cmd){background-image:var(--g-sheen);box-shadow:var(--g-highlight)}
:root[data-ui-style="glass"] .hub-swatch.glass::after{background:var(--g-sheen),rgba(255,255,255,.20);box-shadow:var(--g-highlight),0 3px 8px rgba(40,20,48,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(max-width:720px){:root[data-ui-style="glass"]{--g-blur:blur(16px) saturate(160%)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root[data-ui-style="glass"]{--g-surface:#f9f5f9;--g-surface-strong:#fff;--g-control:#fff}
 :root[data-ui-style="glass"][data-theme="dark"]{--g-surface:#252534;--g-surface-strong:#1e1e2e;--g-control:#16161f}
}
@media(prefers-reduced-transparency:reduce){
 :root[data-ui-style="glass"]{--g-surface:#f9f5f9;--g-surface-strong:#fff;--g-control:#fff;--g-blur:none}
 :root[data-ui-style="glass"][data-theme="dark"]{--g-surface:#252534;--g-surface-strong:#1e1e2e;--g-control:#16161f}
}