/* ============================================================================
   desk.css — the Desk workspace (/dashboard), ported VERBATIM from the classic Desk (public/index.html's <style>
   blocks) plus the stylesheets the classic scripts injected at run time (the tool bubbles, the floating pane, the
   Desk-level dialog host, the Issues panel, the agents pulse) — so the workspace looks exactly as it did.
   Served AS IS from public/ (app/dashboard/page.tsx links it after Next's own stylesheets) — never through Next's CSS
   pipeline, whose minifier merged rules and dropped two of them: the phone layout's #pane-container
   { bottom: 0 !important } and the unprefixed backdrop-filter on the footer's glass tools (leaving only the -webkit-
   one, which only Safari reads). Only ever loaded on the workspace document (links into and out of it are full loads),
   where its page-wide rules (the reset, the :root palette, html/body) are the Desk's own.
   ========================================================================== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --topnav-h: 44px;
      --divider-w: 6px;
      --bg: #0f1117;
      --nav-bg: #161b22;
      --nav-border: #30363d;
      --nav-text: #e6edf3;
      --nav-muted: #8b949e;
      --accent: #0891b2;
      --accent-hover: #0e7490;
      --accent-10: rgba(8,145,178,0.14);
      /* the ACTIVE pane — its label on the side, and the shared tools in the centre that act on it */
      --active: #f97316;
      --active-10: rgba(249,115,22,0.10);
      --active-30: rgba(249,115,22,0.40);
      --select-bg: #21262d;
      --select-border: #30363d;
      /* the module design tokens bar-tools.js's panels (runner · shield · Vault) are drawn in — the Desk's own colours, so the
         same panels follow this theme (the light block below redefines the --nav-* they point at) */
      --bg-elevated: var(--nav-bg);
      --border: var(--nav-border);
      --text-primary: var(--nav-text);
      --text-muted: var(--nav-muted);
    }

    /* Light theme. The topnav's toggle sets data-appsite-theme on <html> and
       relays it to every pane, so Desk's own chrome has to answer to the same
       attribute — otherwise the bar stays dark while every pane turns white.
       A mirror of the block above: same roles, no token left undefined. */
    :root[data-appsite-theme="light"] {
      --bg: #f4f6fa;
      --nav-bg: #ffffff;
      --nav-border: #d7dce4;
      --nav-text: #12161f;
      --nav-muted: #5a6472;
      --accent: #0e7490;
      --accent-hover: #155e75;
      --accent-10: rgba(14,116,144,0.12);
      --active: #ea580c;
      --active-10: rgba(234,88,12,0.10);
      --active-30: rgba(234,88,12,0.40);
      --select-bg: #eef1f6;
      --select-border: #d0d6df;
    }

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

    /* ── Top nav — 3-column grid ── */
    #topnav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--topnav-h);
      background: var(--nav-bg);
      border-bottom: 1px solid var(--nav-border);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      z-index: 200;
      user-select: none;
    }

    /* Left pane controls — left-aligned */
    .nav-pane-left {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      justify-content: flex-start;
      min-width: 0;
      overflow: hidden;
    }

    /* Center controls — measured, not guessed (2026-10-12): the sides get what the centre leaves, so the centre is
       budgeted at every width (the breakpoints below) and a pane's dropdown is never the thing that gets clipped. */
    .nav-center {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .brand-logo { max-width: 96px; }

    /* Right pane controls — right-aligned */
    .nav-pane-right {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      justify-content: flex-end;
      min-width: 0;
      overflow: hidden;
    }

    .brand {
      font-size: 12px;
      font-weight: 700;
      color: var(--nav-text);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .pane-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--nav-muted);
      white-space: nowrap;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .pane-icon-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 40px;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 6px;
      border-radius: 7px;
      background: var(--select-bg);
      border: 1px solid var(--select-border);
      cursor: default;
    }
    .pane-icon-label svg { display: block; width: 20px; height: 20px; }

    #topnav select {
      background: var(--select-bg);
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-text);
      font-size: 12px;
      padding: 3px 22px 3px 8px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b949e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      /* its own width when there is room (190px cut off "Reports & Analytics", "Cybersecurity"), down to 90px with the
         name ellipsised when there is not — a narrower dropdown, never a clipped one */
      min-width: 90px;
      max-width: 240px;
      text-overflow: ellipsis;
      flex-shrink: 1;
    }
    #topnav select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

    .nav-sep { width: 1px; height: 20px; background: var(--nav-border); margin: 0 2px; flex-shrink: 0; }
    .division-group { display: flex; align-items: center; gap: 4px; flex-shrink: 1; }
    /* #topnav #divisionSelect, not #divisionSelect: "#topnav select" above outranks a lone id, and the cap never applied */
    #topnav #divisionSelect { min-width: 90px; max-width: 140px; }

    /* ── ONE button family, the Desk-lite bar's (.appsite-topnav-navbtn): 28px, bordered, line icons — the history arrows,
       the shared tools, swap, bond and Display. Not borderless glyphs of three sizes beside bordered ones. ── */
    .nav-hist-btn, .nav-icon-btn, .popout-btn, .swap-btn, .bond-btn {
      display: inline-flex; align-items: center; justify-content: center;
      height: 28px; min-width: 28px; padding: 0 6px;
      border-radius: 7px;
      border: 1px solid var(--select-border);
      background: var(--select-bg);
      color: var(--nav-muted);
      font-size: 11px; line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .nav-hist-btn:hover:not(:disabled), .nav-icon-btn:hover:not(:disabled), .popout-btn:hover:not(:disabled),
    .swap-btn:hover, .bond-btn:hover { color: var(--accent); border-color: var(--accent); }
    .nav-hist-btn:disabled, .nav-icon-btn:disabled { opacity: 0.35; cursor: default; }
    .nav-hist-btn[hidden], .nav-icon-btn[hidden] { display: none !important; }
    .nav-icon-btn svg, .popout-btn svg, .bond-btn svg { display: block; }
    .nav-icon-btn.active, .popout-btn.popped-out, .bond-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-10); }
    .swap-btn { font-size: 14px; }
    .nav-hist-btn { min-width: 22px; padding: 0 2px; }   /* an arrow needs no 28px square */

    /* ── The shared tools: ONE set, acting on the ACTIVE pane. The chip names that pane and its module in the active
       colour (the same orange the pane's own label turns); clicking it hands the tools to the other pane. ── */
    .nav-tools { display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: 9px; border: 1px solid var(--active-30); background: var(--active-10); flex-shrink: 0; }
    .nav-tools-chip {
      display: inline-flex; align-items: center; gap: 6px;
      height: 28px; padding: 0 8px; max-width: 150px;
      border-radius: 7px; border: 1px solid transparent; background: transparent;
      color: var(--active); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer;
      transition: border-color 0.15s;
    }
    .nav-tools-chip:hover { border-color: var(--active); }
    .nav-tools-chip svg { display: block; flex-shrink: 0; }
    .nav-tools-side { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
    .nav-tools-name { overflow: hidden; text-overflow: ellipsis; }
    .nav-tools .nav-icon-btn:hover:not(:disabled) { color: var(--active); border-color: var(--active); }
    /* the bar's tools (public/bar-tools.js): the active module's shield at the end of the pane tools, then the runner and the Vault */
    .nav-tools-shield, .nav-bar-tools { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .nav-tools-shield:empty, .nav-bar-tools:empty { display: none; }
    .appsite-bar-shield { padding: 0 3px; }
    .appsite-bar-shield img { display: block; height: 20px; width: auto; }
    .nav-tools .fs-btn.fs-active { color: var(--active); border-color: var(--active); background: var(--active-10); }
    /* Narrower desks, in the order things are given up. A step is sized for the width just ABOVE the next one (its worst
       case): a side with icon + arrows + a 90px dropdown needs 210px, without the arrows 158px.
       Measured with the bar's tools in (the active module's shield, the runner, the Vault — public/bar-tools.js):
       ≤1360 (centre 768): the chip's module name, the separators, a smaller wordmark and division — 1221px leaves 226;
       ≤1220 (centre 604): the chip's side word (the orange icon still says which pane), Courses and Plans, the division's
              house icon — 1041px leaves 218 (an iPad on its side, 1024, takes the next step);
       ≤1040 (centre ~440): the history arrows, the wordmark, the agents pulse and the chip (the orange box and the orange
              pane label still say which pane), a narrower pane label and division — an iPad on end (768px) fits. */
    @media (max-width: 1360px) {
      .nav-tools-name, .nav-center > .nav-sep { display: none !important; }
      .nav-center { gap: 5px; }
      .brand-logo { max-width: 80px; }
      #topnav #divisionSelect { max-width: 120px; }
    }
    @media (max-width: 1220px) {
      .nav-tools-side, #toolLearn, #toolPlans, .division-group > svg { display: none !important; }
      .nav-tools { gap: 2px; }
      .nav-center { gap: 4px; padding: 0 6px; }
      .pane-icon-label { padding: 3px 4px; }
      .brand-logo { max-width: 64px; }
      #topnav #divisionSelect { max-width: 110px; }
    }
    @media (max-width: 1040px) {
      .nav-hist-btn, .brand-logo, #appsite-agents-icon, .nav-tools-chip { display: none !important; }
      .pane-icon-label { min-width: 30px; padding: 3px 3px; }
      #topnav #divisionSelect { max-width: 96px; }
    }

    /* ── Display — theme · dim · zoom in one menu (the Desk-lite bar's .appsite-display-pop, in the Desk's palette) ── */
    .nav-display { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
    #deskDisplayBtn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-10); }
    .nav-display-pop {
      display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 400;
      width: 260px; padding: 12px 14px 14px; border-radius: 12px;
      border: 1px solid var(--nav-border); background: var(--nav-bg); color: var(--nav-text);
      box-shadow: 0 14px 40px rgba(0,0,0,.35); font-size: 12.5px; white-space: normal; text-align: left;
    }
    .nav-display-pop.open { display: block; }
    .nav-display-pop .adp-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
    .nav-display-pop .adp-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
    .nav-display-pop .adp-label { color: var(--nav-muted); font-weight: 600; font-size: 12px; }
    .nav-display-pop .adp-seg { grid-column: 2 / 4; display: inline-flex; border: 1px solid var(--select-border); border-radius: 8px; overflow: hidden; }
    .nav-display-pop .adp-seg button { flex: 1; padding: 6px 0; font: inherit; font-size: 12px; font-weight: 600; border: 0; background: transparent; color: var(--nav-muted); cursor: pointer; }
    .nav-display-pop .adp-seg button[aria-pressed="true"] { background: var(--accent-10); color: var(--accent); }
    .nav-display-pop #scaleSlider, .nav-display-pop #deskDimmerRange { width: 100%; }
    .nav-display-pop #scaleValue, .nav-display-pop #deskDimValue { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--nav-text); font-weight: 700; font-size: 12px; }
    .nav-display-pop .adp-reset { width: 100%; margin-top: 6px; height: 28px; border-radius: 7px; border: 1px solid var(--select-border); background: var(--select-bg); color: var(--nav-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
    .nav-display-pop .adp-reset:hover { color: var(--accent); border-color: var(--accent); }

    /* ── Scale slider ── */
    .scale-group {
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .scale-group label {
      font-size: 10px;
      color: var(--nav-muted);
      letter-spacing: 0.04em;
    }
    #scaleSlider, #deskDimmerRange {
      -webkit-appearance: none;
      appearance: none;
      width: 70px;
      height: 3px;
      border-radius: 2px;
      background: var(--select-border);
      outline: none;
      cursor: pointer;
    }
    #scaleSlider::-webkit-slider-thumb, #deskDimmerRange::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
    }
    #scaleSlider::-moz-range-thumb, #deskDimmerRange::-moz-range-thumb {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
    }
    #scaleValue, #deskDimValue {
      font-size: 10px;
      color: var(--nav-muted);
      min-width: 30px;
      text-align: right;
    }

    .sign-out-btn {
      background: transparent;
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-muted);
      font-size: 11px;
      padding: 3px 9px;
      cursor: pointer;
      white-space: nowrap;
    }
    .sign-out-btn:hover { color: var(--nav-text); border-color: var(--nav-muted); }

    /* ── User avatar badge ── */
    .user-avatar-btn {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--nav-border);
      background: #21262d;
      color: var(--nav-text);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      padding: 0;
      flex-shrink: 0;
      transition: border-color 0.15s;
    }
    .user-avatar-btn:hover { border-color: var(--accent); }
    .user-avatar-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

    /* ── User dropdown ── */
    #userDropdown {
      display: none;
      position: fixed;
      top: calc(var(--topnav-h) + 6px);
      right: 10px;
      background: #1c2128;
      border: 1px solid var(--nav-border);
      border-radius: 10px;
      padding: 8px 0;
      min-width: 200px;
      z-index: 1000;
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    }
    #userDropdown.open { display: block; }
    .user-dropdown-header {
      padding: 8px 14px 10px;
      border-bottom: 1px solid var(--nav-border);
      margin-bottom: 4px;
    }
    .user-dropdown-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--nav-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-dropdown-email {
      font-size: 11px;
      color: var(--nav-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-dropdown-item {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: var(--nav-muted);
      font-size: 12px;
      padding: 7px 14px;
      cursor: pointer;
      border-radius: 0;
    }
    .user-dropdown-item:hover { background: #21262d; color: var(--nav-text); }
    .user-dropdown-divider { height: 1px; background: var(--nav-border); margin: 4px 0; }

    /* ── Pane popped-out placeholder ── */
    .pane-popout-msg {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #0f1117;
      color: var(--nav-muted);
      font-size: 13px;
      z-index: 5;
    }
    .pane-popout-msg button {
      margin-top: 6px;
      background: transparent;
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-muted);
      font-size: 12px;
      padding: 5px 12px;
      cursor: pointer;
    }
    .pane-popout-msg button:hover { color: var(--nav-text); border-color: var(--nav-muted); }

    /* ── Hamburger button (mobile only) ── */
    #hamburgerBtn {
      display: none;
      background: transparent;
      border: none;
      color: var(--nav-text);
      cursor: pointer;
      padding: 6px;
      margin-left: auto;
      border-radius: 6px;
      line-height: 1;
    }
    #hamburgerBtn svg { display: block; }

    /* ── Mobile drawer ── */
    #mobileDrawer {
      display: none;
      position: fixed;
      top: var(--topnav-h);
      left: 0; right: 0;
      background: var(--nav-bg);
      border-bottom: 1px solid var(--nav-border);
      padding: 12px 16px;
      z-index: 199;
      flex-direction: column;
      gap: 12px;
    }
    #mobileDrawer.open { display: flex; }

    .drawer-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .drawer-row .pane-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--nav-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      min-width: 34px;
    }
    .drawer-row select {
      flex: 1;
      background: var(--select-bg);
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-text);
      font-size: 14px;
      padding: 6px 28px 6px 10px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b949e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .drawer-hist-btn {
      background: transparent;
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-muted);
      font-size: 13px;
      cursor: pointer;
      padding: 5px 9px;
      line-height: 1;
    }
    .drawer-hist-btn:disabled { opacity: 0.25; cursor: default; }

    .drawer-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .drawer-tools .scale-group { gap: 8px; }
    .drawer-tools #mScaleSlider { width: 100px; }
    .drawer-divider { height: 1px; background: var(--nav-border); }

    .drawer-sign-out {
      background: transparent;
      border: 1px solid var(--select-border);
      border-radius: 6px;
      color: var(--nav-muted);
      font-size: 13px;
      padding: 7px 14px;
      cursor: pointer;
      text-align: center;
    }

    /* ── Pane container ── */
    :root { --footer-h: 60px; }

    #pane-container {
      position: fixed;
      top: var(--topnav-h);
      left: 0; right: 0; bottom: var(--footer-h);
      display: flex;
      flex-direction: row;
    }

    .pane {
      flex: 1;
      min-width: 0;
      position: relative;
      overflow: hidden;
      background: #fff;
    }

    .pane iframe {
      border: none;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: top left;
    }

    /* loading overlay per pane */
    .pane-loading {
      position: absolute;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--nav-muted);
      font-size: 13px;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    .pane-loading.hidden { opacity: 0; pointer-events: none; }
    /* Animated ⚡ while an AppSite page is loading in this pane */
    .pane-loading.is-loading { flex-direction: column; gap: 10px; }
    .pane-loading.is-loading::before {
      content: '⚡'; font-size: 56px; line-height: 1;
      animation: boltFlash 0.9s ease-in-out infinite;
    }
    @keyframes boltFlash {
      0%, 100% { opacity: .35; transform: scale(.92); filter: drop-shadow(0 0 4px rgba(245,158,11,.3)); }
      50%      { opacity: 1;   transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(245,158,11,.9)); }
    }

    /* ── Divider — spiral binding ── */
    #divider {
      width: var(--divider-w);
      flex-shrink: 0;
      background: var(--nav-border);
      cursor: col-resize;
      position: relative;
      transition: background 0.15s;
      display: flex;
      align-items: stretch;
      /* The panes' zoom transform creates stacking contexts that would paint
         OVER the divider's children — the big ⚡ Live button must overlay both
         panes, so the divider itself sits above them and never clips. */
      z-index: 55;
      overflow: visible;
      justify-content: center;
      overflow: hidden;
    }
    /* Spiral coil rings: repeating circles centered in the divider */
    #divider::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        circle at center,
        rgba(255,255,255,0.22) 35%,
        transparent 36%
      );
      background-size: 6px 14px;
      background-repeat: repeat-y;
      background-position: center top;
      pointer-events: none;
      transition: opacity 0.15s;
    }
    /* On hover/drag: rings turn accent blue */
    #divider:hover::before,
    #divider.dragging::before {
      background-image: radial-gradient(
        circle at center,
        var(--accent) 35%,
        transparent 36%
      );
      opacity: 1;
    }
    #divider:hover, #divider.dragging { background: rgba(8,145,178,0.15); }

    /* Divider rail — stacked buttons centered on the divider, shown on hover */
    .divider-rail {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;
    }
    #divider:hover .divider-rail,
    #divider.dragging .divider-rail {
      opacity: 1;
      pointer-events: all;
    }
    /* Big ⚡ Live — ALWAYS visible while a live-enabled lesson is open: a
       140px round button FIXED to the viewport, centered on the divider so it
       overlays both panes. Body-level + position:fixed = no pane transform,
       stacking context, or overflow can ever clip or cover it. */
    #dividerLiveBtn {
      position: fixed; transform: translate(-50%, -50%);
      width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
      font-size: 30px; line-height: 1; color: #fff;
      background: transparent;
      z-index: 9500; pointer-events: all;
      filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
      transition: transform .15s, filter .2s;
    }
    #dividerLiveBtn:hover { transform: translate(-50%, -50%) scale(1.12); }
    #dividerLiveBtn.on { animation: livePulse 1.6s ease-in-out infinite; }
    @keyframes livePulse {
      0%, 100% { filter: drop-shadow(0 0 10px rgba(245,158,11,.6)); }
      50%      { filter: drop-shadow(0 0 30px rgba(245,158,11,1)); }
    }
    /* While the big Live button occupies center, the hover rail steps aside below it */
    #divider.has-training .divider-rail { top: calc(50% + 48px); transform: translateX(-50%); }
    .divider-rail-btn {
      background: #0891b2;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 8px;
      cursor: pointer;
      white-space: nowrap;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      line-height: 1.2;
    }
    .divider-rail-btn:hover { background: #0e7490; }
    .divider-rail-btn.mobile { background: #334155; }
    .divider-rail-btn.mobile:hover { background: #1e293b; }
    .divider-rail-btn.third { background: #7c3aed; }
    .divider-rail-btn.third:hover { background: #6d28d9; }

    /* inactive pane dim ring */
    .pane:not(.active-pane)::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px var(--accent);
      border-radius: 0;
      z-index: 10;
    }

    /* empty pane placeholder */
    .pane-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--nav-muted);
      font-size: 13px;
      background: #0f1117;
    }
    .pane-placeholder svg { opacity: 0.3; }
    .pane-placeholder p { opacity: 0.5; }

    /* ── Fullscreen pane — hides other pane + divider ── */
    #pane-container.fs-left #paneRight,
    #pane-container.fs-left #divider { display: none; }
    #pane-container.fs-right #paneLeft,
    #pane-container.fs-right #divider { display: none; }
    #pane-container.fs-left #paneLeft,
    #pane-container.fs-right #paneRight { flex: 1 1 100% !important; width: 100% !important; }

    .fs-btn.fs-active { color: var(--accent); }

    /* Reveal-pane buttons — hidden by default, shown on the HIDDEN pane's nav side */
    .fs-reveal-btn {
      display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
      color: var(--accent); background: rgba(99,102,241,0.12);
      border: 1px solid rgba(99,102,241,0.3); border-radius: 6px;
      padding: 3px 10px; cursor: pointer; white-space: nowrap;
    }
    .fs-reveal-btn:hover { background: rgba(99,102,241,0.22); }

    /* When left pane is fullscreen: hide right nav controls, show reveal button on right */
    body.fs-left .nav-pane-right > :not(#fsRevealRight) { display: none !important; }
    body.fs-left #fsRevealRight { display: flex; }

    /* When right pane is fullscreen: hide left nav controls, show reveal button on left */
    body.fs-right .nav-pane-left > :not(#fsRevealLeft) { display: none !important; }
    body.fs-right #fsRevealLeft { display: flex; }

    /* Center exit button — hide it now (reveal buttons on the sides replace it) */
    #fsExitBtn { display: none !important; }

    /* ── Mobile: single pane, tab bar ── */
    @media (max-width: 640px) {
      :root { --topnav-h: 48px; }

      /* hide pane-specific sections, show only center with brand + hamburger */
      .nav-pane-left,
      .nav-pane-right { display: none !important; }

      /* make center fill and put hamburger at far right */
      #topnav {
        grid-template-columns: 1fr auto;
      }
      .nav-center {
        grid-column: 1;
        justify-content: flex-start;
      }
      #hamburgerBtn { display: block; grid-column: 2; }

      /* one pane: the shared tools, swap and bond have nothing to act between (the drawer keeps Hub and Refresh);
         Display stays, its menu a sheet under the bar */
      .nav-tools, #swapBtn, #bondBtn, .nav-center > .nav-sep, .division-group > svg, .nav-bar-tools { display: none !important; }
      .nav-center { min-width: 0; gap: 6px; padding: 0 8px; }
      .brand-logo { max-width: 56px; }   /* the Desk-lite bar's phone size */
      #topnav #divisionSelect { max-width: 100px; }
      #appsite-agents-icon { display: none !important; }   /* the agents pulse — the 390px bar has no room beside alerts and you */
      .nav-display-pop { position: fixed; top: calc(var(--topnav-h) + 6px); left: 8px; right: 8px; width: auto; }

      /* hide right pane and divider — single pane view */
      #paneRight,
      #divider { display: none; }

      /* ONE pane. Not two with a tab bar between them: half that chrome
         steered a pane you could not see, and a cross-pane link opened in the
         hidden one and looked like nothing had happened. */
      .pane { display: none; }
      .pane.mobile-active { display: block; flex: 1; }
      #mobileTabBar { display: none !important; }
      #pane-container { bottom: 0 !important; }

      /* mobile tab bar at bottom */
      #mobileTabBar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 52px;
        background: var(--nav-bg);
        border-top: 1px solid var(--nav-border);
        z-index: 200;
      }
      #pane-container {
        bottom: 52px; /* mobile tab bar */
      }

      .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
        color: var(--nav-muted);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border: none;
        background: transparent;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .mobile-tab.active { color: var(--accent); }
      .mobile-tab svg { opacity: 0.7; }
      .mobile-tab.active svg { opacity: 1; }

      /* Moved: see the mobile-footer block at the END of this stylesheet. Hiding them HERE
         did nothing — #deskFooter and #infoFooter are redefined further down the
         sheet, outside any media query, so the later display:flex won on every
         screen and both footers sat on top of the mobile pane. */
    }

    /* hide tab bar on desktop */
    #mobileTabBar { display: none; }

    /* ── Info footer (below module nav) ── */
    #infoFooter {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 20px;
      background: var(--nav-bg);
      border-top: 1px solid var(--nav-border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 8px;
      z-index: 199;
      font-size: 10px;
      color: var(--nav-muted);
    }
    #infoFooter a { color: var(--nav-muted); text-decoration: none; }
    #infoFooter a:hover { color: var(--nav-text); text-decoration: underline; }
    #infoFooter .footer-sep { width: 1px; height: 10px; background: var(--nav-border); }
    #infoFooter .footer-spacer { flex: 1; }

    /* ── Footer module nav bar ── */
    #deskFooter {
      position: fixed;
      bottom: 20px; left: 0; right: 0;
      height: 40px;
      background: var(--nav-bg);
      border-top: 1px solid var(--nav-border);
      display: flex;
      align-items: center;
      padding: 0 8px;
      gap: 2px;
      z-index: 200;
      user-select: none;
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
    }
    #deskFooter::-webkit-scrollbar { display: none; }
    #deskFooter .footer-spacer { display: none; }
    #deskFooter #footerStatus { font-size: 10px; color: var(--nav-muted); transition: color 0.3s; white-space: nowrap; padding: 0 6px; flex-shrink: 0; }
    .footer-mod-btn {
      position: relative;
      background: transparent;
      border: none;
      color: var(--nav-muted);
      cursor: pointer;
      padding: 4px 2px;
      border-radius: 6px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2px;
      font-size: 9px;
      line-height: 1;
      flex: 1;
      min-width: 36px;
      transition: color 0.15s, background 0.15s;
    }
    .footer-mod-btn:hover { color: #f97316; background: rgba(249,115,22,0.08); }
    .footer-mod-btn.hover-blue:hover { color: var(--accent); background: rgba(8,145,178,0.12); }
    .footer-mod-btn.active { color: #f97316; background: rgba(249,115,22,0.15); }
    .footer-mod-btn.active-inactive { color: var(--accent); }
    .footer-mod-btn.active:hover { color: #f97316; background: rgba(249,115,22,0.15); }
    .footer-mod-btn.active-inactive:hover { color: var(--accent); background: rgba(8,145,178,0.12); }
    /* Blue mode: after a pane loads, all buttons hover blue targeting the inactive pane */
    #deskFooter.footer-mode-inactive .footer-mod-btn:hover { color: var(--accent); background: rgba(8,145,178,0.12); }
    #deskFooter.footer-mode-inactive .footer-mod-btn.active:hover { color: var(--accent); background: rgba(8,145,178,0.12); }
    .footer-mod-btn svg { display: block; }
    .footer-mod-label { font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; max-width: min(56px, 100%); overflow: hidden; text-overflow: ellipsis; }
    /* min(…, 100%): with every module in the bar a button is narrower than 56px, and the label ran into its neighbours
       ("CUSTOMECYBERSECU", Paul 2026-10-01 "fix css"). The label now ends at its own button; the full name is the tooltip. */
    .notif-badge-footer {
      position: absolute; top: 1px; right: 6px;
      min-width: 14px; height: 14px; padding: 0 3px;
      border-radius: 8px; background: #dc2626; color: #fff;
      font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
      box-shadow: 0 0 0 2px var(--nav-bg, #0b0f14);
      pointer-events: none; z-index: 3;
    }

    /* ── AI footer button — oversized, overflows above the bar ── */
    #_desk-ai-footer-btn {
      position: relative;
      flex-shrink: 0;
      width: 52px; height: 52px;
      margin-bottom: 12px;
      border-radius: 14px;
      background: rgba(29,78,216,0.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(99,142,255,0.35);
      color: #93c5fd;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      box-shadow: 0 4px 16px rgba(29,78,216,0.25), 0 1px 4px rgba(0,0,0,0.4);
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      z-index: 201;
    }
    #_desk-ai-footer-btn:hover { background: rgba(29,78,216,0.30); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,78,216,0.35), 0 2px 6px rgba(0,0,0,0.4); }
    #_desk-ai-footer-btn svg { display: block; }
    #_desk-ai-footer-btn .ai-btn-label { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
    #_desk-ai-footer-btn.ai-in-pane { background: rgba(15,118,110,0.25); border-color: rgba(20,184,166,0.4); color: #5eead4; }
    #_desk-ai-footer-btn.ai-in-pane:hover { background: rgba(15,118,110,0.35); }

    /* ── Desk Config button ── */
    #_desk-config-btn {
      position: relative; flex-shrink: 0;
      width: 52px; height: 52px; margin-bottom: 12px;
      border-radius: 14px;
      background: rgba(100,116,139,0.18);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(148,163,184,0.35);
      color: #94a3b8;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
      transition: background 0.15s, transform 0.12s, color 0.15s;
      z-index: 201; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    }
    #_desk-config-btn:hover { background: rgba(100,116,139,0.30); transform: translateY(-2px); color: #e2e8f0; }
    #_desk-config-btn svg { display: block; }

    /* ── Category filter button + popover ── */
    #footerCatBtn {
      flex-shrink: 0;
      background: rgba(8,145,178,0.12);
      border: 1px solid rgba(8,145,178,0.3);
      border-radius: 6px;
      color: var(--accent);
      cursor: pointer;
      font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 3px 8px; white-space: nowrap;
      display: flex; align-items: center; gap: 4px;
      transition: background 0.15s, color 0.15s;
    }
    #footerCatBtn:hover { background: rgba(8,145,178,0.22); color: #67e8f9; }
    #footerCatPopover {
      position: fixed;
      bottom: 68px;
      left: 50%; transform: translateX(-50%);
      background: #1c2128;
      border: 1px solid #30363d;
      border-radius: 10px;
      padding: 8px;
      display: none;
      gap: 6px;
      flex-wrap: wrap;
      z-index: 9100;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
      max-width: 360px;
    }
    #footerCatPopover.open { display: flex; }
    .footer-cat-pill {
      background: rgba(255,255,255,0.06);
      border: 1px solid #30363d;
      border-radius: 20px;
      color: #e6edf3;
      cursor: pointer;
      font-size: 11px; font-weight: 600; padding: 5px 14px;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .footer-cat-pill:hover { background: rgba(8,145,178,0.2); border-color: rgba(8,145,178,0.5); color: #67e8f9; }

    /* ── Desk Config Dialog ── */
    #deskConfigDialog {
      display: none; position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.55); align-items: flex-end; justify-content: center;
      padding-bottom: 70px;
    }
    #deskConfigDialog.open { display: flex; }
    #deskConfigPanel {
      width: 520px; max-width: 96vw; max-height: 72vh;
      background: #1c2128; border: 1px solid #30363d; border-radius: 14px;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 80px rgba(0,0,0,0.7);
      overflow: hidden;
    }
    /* .dcp-* — the Desk Config panels: desk-config.css beside this file (shared with Back End → Settings) */

    /* ── Hub footer button — oversized glass, overflows above bar ── */
    #_desk-hub-footer-btn {
      position: relative;
      flex-shrink: 0;
      width: 52px; height: 52px;
      margin-bottom: 12px;
      border-radius: 14px;
      background: rgba(8,145,178,0.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(8,200,230,0.35);
      color: #67e8f9;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      box-shadow: 0 4px 16px rgba(8,145,178,0.25), 0 1px 4px rgba(0,0,0,0.4);
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      z-index: 201;
    }
    #_desk-hub-footer-btn:hover { background: rgba(8,145,178,0.30); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8,145,178,0.35), 0 2px 6px rgba(0,0,0,0.4); }
    #_desk-hub-footer-btn svg { display: block; }
    #_desk-hub-footer-btn .hub-btn-label { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
    #_desk-issues-footer-btn {
      position: relative;
      flex-shrink: 0;
      width: 52px; height: 52px;
      margin-bottom: 12px;
      border-radius: 14px;
      background: rgba(168,85,247,0.16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(196,141,253,0.35);
      color: #d8b4fe;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      box-shadow: 0 4px 16px rgba(168,85,247,0.22), 0 1px 4px rgba(0,0,0,0.4);
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      z-index: 201;
    }
    #_desk-issues-footer-btn:hover { background: rgba(168,85,247,0.30); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168,85,247,0.35), 0 2px 6px rgba(0,0,0,0.4); }
    #_desk-issues-footer-btn svg { display: block; }
    #_desk-issues-footer-btn .issues-btn-label { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
    /* ── Learn footer button — the course for the module you are in, beside it ── */
    #_desk-learn-footer-btn {
      position: relative;
      flex-shrink: 0;
      width: 52px; height: 52px;
      margin-bottom: 12px;
      border-radius: 14px;
      background: rgba(245,158,11,0.16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(251,191,36,0.38);
      color: #fcd34d;
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px;
      box-shadow: 0 4px 16px rgba(245,158,11,0.22), 0 1px 4px rgba(0,0,0,0.4);
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
      z-index: 201;
    }
    #_desk-learn-footer-btn:hover { background: rgba(245,158,11,0.30); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,158,11,0.35), 0 2px 6px rgba(0,0,0,0.4); }
    #_desk-learn-footer-btn svg { display: block; }
    #_desk-learn-footer-btn .learn-btn-label { font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }

    /* ── SDK footer button — oversized glass, overflows above bar ── */
    #sdkWebappBtn {
      position: relative !important;
      flex-shrink: 0 !important;
      width: 52px !important; height: 52px !important;
      margin-bottom: 12px !important;
      border-radius: 14px !important;
      background: rgba(220,38,38,0.18) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border: 1px solid rgba(248,113,113,0.35) !important;
      color: #fca5a5 !important;
      cursor: pointer !important;
      display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
      gap: 3px !important;
      box-shadow: 0 4px 16px rgba(220,38,38,0.25), 0 1px 4px rgba(0,0,0,0.4) !important;
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
      z-index: 201 !important;
      font-size: 8px !important; font-weight: 700 !important; letter-spacing: 0.06em !important;
      text-transform: uppercase !important; white-space: nowrap !important;
      padding: 0 !important;
    }
    #sdkWebappBtn:hover { background: rgba(220,38,38,0.30) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(220,38,38,0.35), 0 2px 6px rgba(0,0,0,0.4) !important; }

    /* Highlight target pane border when hovering footer nav icons */
    .pane.footer-hover-target::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px #0891b2;
      z-index: 20;
    }
    .pane.footer-hover-target-orange::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px #f97316;
      z-index: 20;
    }
    /* Inactive mode: active pane stays orange all the time; inactive pane blue only on hover */
    .pane.footer-active-pane-indicator::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 2px rgba(249,115,22,0.55);
      z-index: 20;
    }

    /* Footer module preview card */
    #footerPreviewCard {
      position: fixed;
      bottom: 52px;
      z-index: 20000;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      padding: 12px 14px;
      min-width: 140px;
      max-width: 200px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.12s, transform 0.12s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }
    #footerPreviewCard.visible {
      opacity: 1;
      transform: translateY(0);
    }
    #footerPreviewCard .fpc-icon {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.06);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: #f97316;
    }
    #footerPreviewCard .fpc-name {
      font-size: 12px; font-weight: 700; color: #e6edf3; line-height: 1.2;
    }
    #footerPreviewCard .fpc-badge {
      font-size: 9px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: #8b949e;
      background: rgba(255,255,255,0.05);
      border: 1px solid #30363d;
      border-radius: 4px;
      padding: 2px 6px;
    }
    #footerPreviewCard .fpc-badge.left-pane { color: #f97316; border-color: rgba(249,115,22,0.4); }
    #footerPreviewCard .fpc-badge.right-pane { color: #0891b2; border-color: rgba(8,145,178,0.4); }
    #footerPreviewCard::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px; height: 6px;
      background: #161b22;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      border-top: 1px solid #30363d;
    }

    /* ── Mobile: no desk footer ──────────────────────────────────────────────
       This block MUST stay below the #deskFooter / #infoFooter rules above.
       Same specificity means source order decides, and the earlier copy of this
       inside the max-width:640px block was silently overridden by them. */
    @media (max-width: 640px) {
      #deskFooter { display: none; }
      #infoFooter { display: none; }
    }


/* ── Edit profile dialog (index.html's second <style>) ── */
/* Edit profile dialog — matches the Desk's own dropdown chrome rather than
   introducing a second dialog language. */
.profile-dialog-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100000;
  display:flex; align-items:center; justify-content:center; }
.profile-dialog-bg[hidden] { display:none; }
.profile-dialog { background:var(--bg-elevated,#161b22); color:var(--text-primary,#e6edf3);
  border:1px solid var(--border,#30363d); border-radius:12px; padding:20px; width:380px; max-width:94vw;
  box-shadow:0 18px 48px rgba(0,0,0,.5); }
.profile-dialog-title { font-size:15px; font-weight:700; margin-bottom:2px; }
.profile-dialog-sub { font-size:12px; color:var(--text-muted,#8b949e); margin-bottom:14px; }
.profile-field { display:block; margin-bottom:12px; }
.profile-field > span { display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted,#8b949e); margin-bottom:4px; }
.profile-field input { width:100%; box-sizing:border-box; padding:7px 10px; font:inherit; font-size:13px;
  color:inherit; background:var(--bg-base,#0d1117); border:1px solid var(--border,#30363d); border-radius:6px; }
.profile-field small { display:block; font-size:11px; color:var(--text-muted,#8b949e); margin-top:4px; }
.profile-dialog-msg { font-size:12px; min-height:16px; margin-bottom:8px; }
.profile-dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.profile-btn { padding:6px 14px; font:inherit; font-size:13px; border-radius:6px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid var(--border,#30363d); }
.profile-btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:600; }
.profile-btn[disabled] { opacity:.55; cursor:default; }

/* ── Tool bubbles (desk.js ensureTabBubble) ── */
    #deskTabBubble { position: fixed; z-index: 10000; min-width: 190px; max-width: 260px;
      background: #12161f; border: 1px solid #283041; border-radius: 12px;
      box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 10px 12px; pointer-events: none;
      opacity: 0; transform: translateY(6px) scale(.94); transform-origin: bottom center;
      transition: opacity .16s ease, transform .18s cubic-bezier(.2,.9,.3,1.25); }
    #deskTabBubble.visible { opacity: 1; transform: none; }
    #deskTabBubble .tb-title { font-size: 11px; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; margin-bottom: 7px; }
    #deskTabBubble .tb-row { display: flex; justify-content: space-between; gap: 12px;
      font-size: 11px; line-height: 1.7; }
    #deskTabBubble .tb-k { color: #7d8794; white-space: nowrap; }
    #deskTabBubble .tb-v { color: #e8eef6; font-weight: 600; text-align: right;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
    #deskTabBubble .tb-tail { position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
      background: #12161f; border-right: 1px solid #283041; border-bottom: 1px solid #283041;
      transform: translateX(-50%) rotate(45deg); }

/* ── The floating pane (desk.js openDeskFloatPane) ── */
#desk-float{position:fixed;z-index:9000;left:max(24px,calc(50vw - 460px));top:84px;width:min(920px,calc(100vw - 48px));height:min(640px,calc(100vh - 120px));min-width:360px;min-height:260px;display:flex;flex-direction:column;background:#0d1117;border:1px solid #30363d;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden;resize:both;}
#desk-float[hidden]{display:none;}
 #desk-float .df-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#161b22;border-bottom:1px solid #30363d;cursor:grab;user-select:none;touch-action:none;}
#desk-float .df-head:active{cursor:grabbing;}
 #desk-float .df-title{flex:1;min-width:0;font:600 13px/1.2 Inter,system-ui,sans-serif;color:#e6edf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#desk-float .df-btn{font:600 12px Inter,system-ui,sans-serif;color:#c9d1d9;background:#21262d;border:1px solid #30363d;border-radius:7px;padding:4px 9px;cursor:pointer;}
 #desk-float .df-btn:hover{border-color:#22d3ee;color:#22d3ee;}
#desk-float iframe{flex:1;width:100%;border:0;background:#0d1117;}
 #desk-float .df-shield{position:absolute;inset:40px 0 0 0;display:none;}
 #desk-float.dragging .df-shield{display:block;}

/* ── The Desk-level dialog host (desk-dialog-host.js) ── */
.desk-dlg-overlay{position:fixed;inset:0;z-index:99999;background:rgba(3,6,12,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
.desk-dlg{width:460px;max-width:calc(100vw - 32px);background:#12161f;border:1px solid #36405380;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);color:#e8eef6;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;gap:14px;padding:22px;}
.desk-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px -4px 2px;cursor:grab;user-select:none;touch-action:none;}
.desk-dlg-head:active{cursor:grabbing;}
.desk-dlg-title{font-size:17px;font-weight:700;letter-spacing:-.02em;}
.desk-dlg-hint{font-size:10px;font-weight:600;color:#4a525f;}
.desk-dlg-body{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;}
.desk-dlg-field{display:flex;flex-direction:column;gap:5px;}
.desk-dlg-label{font-size:12px;font-weight:600;color:#7d8794;}
.desk-dlg-input{width:100%;background:#1b212c;border:1px solid #283041;border-radius:8px;padding:9px 12px;font-size:14px;color:#e8eef6;outline:none;}
.desk-dlg-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.14);}
.desk-dlg-actions{display:flex;justify-content:flex-end;gap:10px;}
.desk-dlg-btn{font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;}
.desk-dlg-btn.primary{background:#3b82f6;color:#fff;}
.desk-dlg-btn.secondary{background:#1b212c;color:#e8eef6;border-color:#283041;}
.desk-dlg-err{font-size:12px;color:#ef4444;}

/* ── The Issues panel (issues-panel.js) ── */
      #_issues-panel { position: fixed; bottom: 80px; right: 96px; z-index: 9999;
        width: 520px; max-width: calc(100vw - 16px); height: 480px; max-height: calc(100vh - 100px);
        background: #12161f; border: 1px solid rgba(168,85,247,.35); border-radius: 14px;
        box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.08);
        color: #e8eef6; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        display: none; flex-direction: column; overflow: hidden;
        transform-origin: bottom right; }
      #_issues-panel.open { display: flex; animation: issuesPop .18s cubic-bezier(.2,.9,.3,1.2); }
      #_issues-panel.dragging { user-select: none; }
      @keyframes issuesPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
      #_issues-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px;
        cursor: grab; user-select: none; touch-action: none; border-bottom: 1px solid #1f2632; }
      #_issues-head:active { cursor: grabbing; }
      #_issues-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
      #_issues-title svg { color: #c084fc; }
      #_issues-repo-chip { font-size: 10px; font-weight: 700; color: #c084fc; background: rgba(168,85,247,.14);
        border: 1px solid rgba(168,85,247,.3); border-radius: 5px; padding: 2px 7px; white-space: nowrap;
        max-width: 150px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
      #_issues-spacer { flex: 1; }
      .issues-head-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 12px;
        padding: 4px 6px; border-radius: 6px; }
      .issues-head-btn:hover { color: #e8eef6; background: #1b212c; }
      #_issues-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid #1f2632; }
      .issues-tab { background: none; border: none; border-bottom: 2px solid transparent; color: #7d8794;
        font-size: 12px; font-weight: 600; padding: 6px 12px 8px; cursor: pointer; }
      .issues-tab:hover { color: #e8eef6; }
      .issues-tab.active { color: #c084fc; border-bottom-color: #c084fc; }
      #_issues-body { flex: 1; overflow-y: auto; padding: 10px 12px 14px; }
      .issues-note { font-size: 12px; color: #7d8794; padding: 18px 8px; text-align: center; line-height: 1.6; }
      .issues-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; cursor: pointer; }
      .issues-row:hover { background: #1b212c; }
      .issues-row-main { flex: 1; min-width: 0; }
      .issues-row-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .issues-row-sub { font-size: 10.5px; color: #7d8794; margin-top: 2px; }
      .issues-pill { font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
      .issues-pill.open   { color: #4ade80; background: rgba(74,222,128,.12); }
      .issues-pill.closed { color: #94a3b8; background: rgba(148,163,184,.12); }
      .issues-bar { height: 4px; border-radius: 2px; background: #1f2632; overflow: hidden; margin-top: 5px; }
      .issues-bar-fill { height: 100%; background: #c084fc; }
    
/* ── The agents indicator (desk.js APPSITE_AGENTS_INDICATOR_V1) ── */
@keyframes appsiteAgentPulse{0%,100%{opacity:1}50%{opacity:.25}}


/* ── The Next page's own frame ───────────────────────────────────────────────────────────────────────────────────
   The workspace switches off the template's stylesheets for its document (components/desk/Workspace.tsx), so the page
   is drawn on the browser's defaults plus this file, exactly as the classic Desk was. What remains of the template is the
   root layout's inline style on <body>; the Desk's own background goes back on. */
html body { background: var(--bg) !important; }