/* ══════════════════════════════════════════════════════════════════════
   CONSOLE — desktop shell (Claude Design handoff, direction "1c Console")

   Denser, instrument-like desktop layout: the 68px icon rail + 256px
   sidebar are merged into ONE collapsible sidebar, a status strip (P/L,
   site, token usage, theme toggle) sits above every view, and the chat
   surface gains a tabbed live-context column on the right.

   Desktop only (matches app.js's own isMobile() threshold, <=1199 is
   mobile/tablet) — mobile, iPad and the pocket-rail layout are untouched.
   Loaded last so it wins the cascade over styles.css/premium.css/
   theme-studio.css, whose variables (--ink-N, --fg-N, --line-N, --accent*,
   --pos/--neg/--warn, --sans/--code/--display) it reuses rather than
   hardcoding colours — so both the light "Studio" theme and its dark
   companion (activated by the theme toggle here) apply automatically.
   ══════════════════════════════════════════════════════════════════════ */

/* MOBILE/TABLET SAFETY BOUNDARY
   The Console markup lives in index.html at every width. Keep every new
   Console surface hidden by default, then reveal it only inside the desktop
   media query below. This preserves the original mobile and tablet shell. */
.console-sb-head,
.console-nav,
#console-statusbar,
#console-context {
  display: none;
}

@media (min-width: 1200px) {

  /* ── shell: rail out, one sidebar column + content ── */
  .rail { display: none; }
  .app {
    grid-template-columns: var(--console-sb-w, 236px) minmax(0, 1fr);
    transition: grid-template-columns .22s cubic-bezier(.16,1,.3,1);
  }
  .app.console-collapsed { --console-sb-w: 56px; }

  .sidebar { width: 100%; }
  /* The rail is gone, so the sidebar is now the only way to navigate —
     the per-view "≡" buttons (#sidebar-toggle etc.) still fire and still
     toggle .sidebar's .hidden class, but it must never actually disappear
     here. console-sb-collapse (56px icons-only) is the one control that
     shrinks it at this width. */
  .sidebar.hidden { display: flex !important; }
  /* Their job is now done by console-sb-collapse, so the per-view "≡"
     buttons would just be an inert control at this width. */
  #sidebar-toggle, #trading-sidebar-toggle, #website-sidebar-toggle, #work-sidebar-toggle {
    display: none;
  }

  /* ── sidebar header: mark + wordmark + collapse toggle ── */
  .console-sb-head {
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 12px; flex-shrink: 0;
    border-bottom: 1px solid var(--line);
  }
  .console-sb-head svg { flex-shrink: 0; }
  .console-sb-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--code); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--fg-3);
  }
  .console-sb-collapse {
    width: 24px; height: 24px; flex-shrink: 0;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: transparent; color: var(--fg-3); cursor: pointer;
    font-size: 11px; line-height: 1;
    transition: border-color .12s, color .12s;
  }
  .console-sb-collapse:hover { border-color: var(--line-3); color: var(--fg); }

  /* ── nav ── */
  .console-nav { display: flex; flex-direction: column; gap: 1px; padding: 8px; flex-shrink: 0; }
  .sidebar .console-nav .rail-btn {
    width: 100%; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 10px; padding: 8px 9px; border-radius: var(--r2);
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    animation: none; /* the rail's staggered entrance doesn't belong to this layout */
  }
  .sidebar .console-nav .rail-btn:hover svg { transform: none; }
  .sidebar .console-nav .rail-btn svg { width: 17px; height: 17px; }
  .sidebar .console-nav .rail-btn span:not(.notif-badge) { flex: 1; text-align: left; line-height: 1.1; }
  .sidebar .console-nav .rail-btn .notif-badge { position: static; margin-left: auto; }

  /* ── threads (general/chat sidebar panel), restyled dense ── */
  .sidebar-panel[data-panel="general"] .sidebar-head {
    padding: 11px 14px 6px; border-bottom: none;
  }
  .sidebar-panel[data-panel="general"] .sidebar-title {
    font-family: var(--code); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg-4); font-weight: 500;
  }
  .sidebar-panel[data-panel="general"] .sidebar-title::before { display: none; }
  .conv-item { border-radius: var(--r2); margin: 0 6px; padding: 7px 8px; gap: 8px; }
  .conv-item::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--c-chat);
  }
  .conv-item.active::before { background: var(--accent); }
  .conv-item.active { border-left-color: transparent; }
  .conv-item-title { font-size: 12.5px; }

  /* ── collapsed: icons only ── */
  .app.console-collapsed .console-sb-label,
  .app.console-collapsed .sidebar-panel,
  .app.console-collapsed .sidebar-footer .usage-bar-wrap,
  .app.console-collapsed .sidebar-footer .user-meta-small {
    display: none;
  }
  .app.console-collapsed .console-nav .rail-btn { justify-content: center; padding: 8px 2px; }
  .app.console-collapsed .console-nav .rail-btn span:not(.notif-badge) { display: none; }
  .app.console-collapsed .sidebar-footer { justify-content: center; padding: 12px 8px; }

  /* ══════════════════════════
     STATUS STRIP — sits above every view, never scrolls away
  ══════════════════════════ */
  #console-statusbar {
    display: flex; align-items: center; gap: 0;
    height: 52px; padding: 0 16px 0 20px; flex-shrink: 0;
    border-bottom: 1px solid var(--line); background: var(--ink-1);
  }
  .console-crumb-group { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
  .console-crumb {
    font-family: var(--code); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .console-live {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-family: var(--code); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pos);
  }
  .console-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
  .console-metrics {
    display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    font-family: var(--code); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fg-2);
  }
  .console-metrics .cm-sep { color: var(--line-4); }
  .console-metrics b { font-weight: 600; color: var(--fg); }
  .console-theme-toggle {
    width: 26px; height: 26px; margin-left: 14px; flex-shrink: 0;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: transparent; color: var(--fg-3); cursor: pointer; font-size: 12px; line-height: 1;
    transition: border-color .12s, color .12s;
  }
  .console-theme-toggle:hover { border-color: var(--line-3); color: var(--fg); }

  /* ══════════════════════════
     CONTEXT COLUMN — tabbed live panel beside chat/command centre

     .main stays the column flexbox it already is (header stacks vertically
     above the view; .main > .view is depended on elsewhere for stacking
     context, so the view elements aren't re-parented). The status strip
     takes a fixed 52px off the top; the context column is positioned
     against that same box and the active view gets a matching right
     margin, so nothing needs wrapping to sit them side by side.
  ══════════════════════════ */
  #console-statusbar { flex-shrink: 0; }
  .view { height: auto; flex: 1; min-height: 0; }
  .main { position: relative; }
  #console-context {
    position: absolute; top: 52px; right: 0; bottom: 0;
    width: 352px;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--line); background: var(--ink-1); overflow: hidden;
    z-index: 2;
  }
  /* Only 1c's two designed screens (chat, command centre) carry the column —
     every other view keeps the full width it already has. */
  .app:has(#view-general.active) .view.active,
  .app:has(#view-dashboard.active) .view.active {
    margin-right: 352px;
  }
  .app:not(:has(#view-general.active)):not(:has(#view-dashboard.active)) #console-context {
    display: none;
  }
  .console-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .console-tab {
    flex: 1; height: 28px; border-radius: var(--r);
    border: 1px solid transparent; background: transparent; color: var(--fg-3); cursor: pointer;
    font-family: var(--code); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    transition: background .12s, border-color .12s, color .12s;
  }
  .console-tab.active { background: var(--ink-3); border-color: var(--line-2); color: var(--fg); }
  .console-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .console-panel.hidden { display: none; }
  .console-card {
    background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r2); padding: 14px;
  }
  .console-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .console-card-label {
    font-family: var(--code); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  }
  .console-card-tag { font-family: var(--code); font-size: 9.5px; }
  .console-card-val {
    font-family: var(--code); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
    line-height: 1; margin-top: 9px; color: var(--fg);
  }
  .console-card-sub { font-size: 12px; color: var(--fg-2); margin-top: 5px; line-height: 1.5; }
  .console-panel-empty { padding: 4px 2px; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }

  /* ══════════════════════════
     DASH CARDS + HOLDINGS — denser, instrument-style numerals
  ══════════════════════════ */
  .dash-card-label { font-family: var(--code); letter-spacing: .1em; }
  .dash-card-val { font-family: var(--code); font-variant-numeric: tabular-nums; }
  .pf-table .num { font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
}