/* Auto-hiding, minimal tab bar. Every view gets the full window; the bar slides down over the
 * content when the pointer reaches the top edge (or a tab gets keyboard focus) and slides away
 * again shortly after the pointer leaves. Driven by public/js/tabbar-autohide.js. */
html.tabbar-autohide #tabBar.tab-bar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 44px;
  padding: 0 16px;
  gap: 2px;
  align-items: center;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  background: color-mix(in srgb, var(--console-bg, #000) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--console-fg, #fff) 12%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  z-index: 100000;
}
html.tabbar-autohide.tabbar-shown #tabBar.tab-bar { transform: none; opacity: 1; }

/* Minimal tabs: plain labels, active one underlined, close button only on hover/active. */
html[data-color-mode].tabbar-autohide #tabBar .tab-item {
  height: 30px;
  padding: 0 12px;
  gap: 6px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  color: color-mix(in srgb, var(--console-fg, #fff) 55%, transparent) !important;
  font-size: 12.5px;
  letter-spacing: .01em;
  box-shadow: none;
}
html[data-color-mode].tabbar-autohide #tabBar .tab-item:hover {
  background: color-mix(in srgb, var(--console-fg, #fff) 8%, transparent) !important;
  color: var(--console-fg, #fff) !important;
}
html[data-color-mode].tabbar-autohide #tabBar .tab-item.active {
  background: transparent !important;
  color: var(--console-fg, #fff) !important;
  box-shadow: inset 0 -2px 0 var(--console-fg, #fff);
  border-radius: 0;
}
/* a tab is only as wide as its name; hovering it grows it to show its × */
html #tabBar .tab-item .tab-close { display: inline-flex; justify-content: center; width: 0; min-width: 0; margin-left: -6px; padding: 0; overflow: hidden; opacity: 0; transition: width .15s ease, margin .15s ease, opacity .15s ease; }
html #tabBar .tab-item:hover .tab-close, html #tabBar .tab-item:focus-within .tab-close { width: 14px; margin-left: 0; opacity: .7; }
html #tabBar .tab-item .tab-close:hover { opacity: 1; }
.sv-tab .sv-tab-close { display: inline-flex; justify-content: center; width: 0; margin-left: -6px; padding: 0 !important; overflow: hidden; transition: width .15s ease, margin .15s ease, opacity .15s ease; }
.sv-tab:hover .sv-tab-close { width: 14px; margin-left: 0; opacity: .7; }
html[data-color-mode].tabbar-autohide #tabBar #openHomeBtn {
  background: transparent !important;
  border: 0 !important;
  color: color-mix(in srgb, var(--console-fg, #fff) 60%, transparent) !important;
}

/* Small pull handle at the top edge so the hidden bar is discoverable (also tappable on touch). */
#tabbarHandle {
  position: fixed;
  top: 0; left: 50%;
  width: 56px; height: 12px;
  margin-left: -28px;
  z-index: 99999;
  cursor: pointer;
  display: none;
}
#tabbarHandle::after {
  content: '';
  position: absolute;
  top: 4px; left: 10px; right: 10px;
  height: 4px;
  border-radius: 4px;
  background: var(--console-fg, #fff);
  opacity: .22;
  transition: opacity .2s;
}
#tabbarHandle:hover::after { opacity: .5; }
html.tabbar-autohide #tabbarHandle { display: block; }
html.tabbar-autohide.tabbar-shown #tabbarHandle { display: none; }

/* Views and panels that were offset below the old fixed-height bar now start at the top. */
html.tabbar-autohide :is(#insiderTabContent, #insiderPersonTabsContainer, #globalSplitPane, .paper-view, .lb-view, #researchView .shop-home.shop-tabview) { top: 0 !important; }
html.tabbar-autohide body:is(.split-open, .split-left-full) #scriptDocOverlay { top: 0 !important; }

/* Floating brand (top left of every view) with the night/day switch to its right. */
#floatingBrand {
  position: fixed; top: 12px; left: 16px; z-index: 99990;
  display: flex; align-items: center; gap: 8px;
  transition: opacity .2s ease, transform .2s ease;
}
#floatingBrand .floating-brand-logo {
  display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--console-bg, #000) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-decoration: none;
}
#floatingBrand .brand-logo { height: 22px; }
#floatingBrand #floatingModeSlot { padding: 0 !important; background: transparent !important; }
#floatingBrand #floatingModeSlot:empty { display: none; }
html[data-color-mode] #floatingBrand #colorModeToggle { width: 36px; height: 36px; border-radius: 10px; background: var(--console-bg) !important; }
/* While the tab bar is open, everything it overlaps fades away instead of peeking out beneath it. */
html.tabbar-shown :is(#floatingBrand, #actionsPopout, #networkTabContent .graph-main > .toolbar) {
  opacity: 0 !important; pointer-events: none !important; transform: translateY(-6px);
}
html.tabbar-shown #actionsPopout * { pointer-events: none !important; }
/* Canvas: animation toggle and 3D sit top-right, left of the actions arrow. */
html[data-color-mode] #networkTabContent .graph-main > .toolbar { justify-content: flex-end !important; left: auto !important; right: 48px !important; gap: 8px; }
#actionsPopout { transition: opacity .2s ease, transform .2s ease; }
html[data-color-mode] #ambientToggleBtn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  background: var(--console-bg) !important; color: var(--console-fg) !important;
  border: 1px solid var(--console-border) !important; font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; cursor: pointer;
}
html[data-color-mode] #ambientToggleBtn.is-off { color: color-mix(in srgb, var(--console-fg) 50%, transparent) !important; }
html[data-color-mode] #networkTabContent .graph-main > .toolbar #toggle3dBtn { margin-left: 0 !important; }

/* Notifications (e.g. "Opened “The Elite”"): a small pill at the bottom centre that fades and slides in. */
html[data-color-mode] .no-results-popup {
  top: auto !important; bottom: 28px;
  transform: translate(-50%, 12px) !important;
  opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1) !important;
  background: color-mix(in srgb, var(--console-bg, #000) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--console-fg, #fff) 14%, transparent) !important;
  border-radius: 999px !important;
  padding: 9px 16px 9px 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important;
  pointer-events: none;
  z-index: 100001 !important;
}
html[data-color-mode] .no-results-popup.visible { transform: translate(-50%, 0) !important; opacity: 1; }
html[data-color-mode] .no-results-popup .popup-content { gap: 9px !important; }
html[data-color-mode] .no-results-popup .popup-icon { font-size: 0 !important; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
html[data-color-mode] .no-results-popup .popup-text { color: var(--console-fg, #fff) !important; font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important; }
/* Views with their own top-left controls make room for the floating brand (logo + night button, ~190px wide, ~48px tall). */
#worldMapView .leaflet-top.leaflet-left { top: 52px !important; }
#crmView .pi-view-switch { padding-left: 210px !important; }
:is(#insiderTabContent, #insiderPersonTabsContainer) .insider-standalone-header { padding-left: 210px !important; }
#scriptNotesSidebar { padding-top: 48px !important; }
#researchView { padding-top: 64px !important; }

/* Canvas save button sits in the floating brand, left of the night/day switch, on the canvas only.
   (updateSaveButtonVisibility() still decides whether there is anything to save.) */
#floatingBrand #globalSaveBtn { display: none !important; }
body:has(#graphView.active) #floatingBrand #globalSaveBtn:not([style*="display: none"]) {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0 !important; border-radius: 10px !important;
  background: var(--console-bg, #000) !important; border: 1px solid var(--console-border, rgba(255,255,255,.2)) !important;
  color: var(--console-fg, #fff) !important; cursor: pointer;
}
#floatingBrand #globalSaveBtn:hover { background: color-mix(in srgb, var(--console-fg, #fff) 8%, var(--console-bg, #000)) !important; }
#floatingBrand #globalSaveBtn svg { width: 16px; height: 16px; margin: 0 !important; }

/* the top tab bar (Home, chart tabs, account) reads in Arial */
html #tabBar.tab-bar, html #tabBar.tab-bar * { font-family: Arial, Helvetica, sans-serif !important; }
/* the + (new tab): vertically centered with the tabs, close to the last tab */
html #tabBar .tab-add { align-self: center; margin-bottom: 0 !important; margin-left: -8px !important; line-height: 1; }

/* account menu (top right): who you are, then Profile, Settings, Plan & AI credits, Security, Log out */
#userDropdown.um-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 280px; padding: 6px; background: var(--console-bg, #0b0b0d); border: 1px solid color-mix(in srgb, var(--console-fg, #fff) 14%, transparent); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); z-index: 1000; }
#userDropdown .um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--console-fg, #fff) 10%, transparent); margin-bottom: 4px; }
#userDropdown .um-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, #22c55e 22%, transparent); color: #4ade80; font-weight: 700; font-size: 14px; flex: none; }
#userDropdown .um-who { display: flex; flex-direction: column; min-width: 0; }
#userDropdown .um-who b { font-size: 13.5px; color: var(--console-fg, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#userDropdown .um-who small { font-size: 11.5px; color: color-mix(in srgb, var(--console-fg, #fff) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#userDropdown .um-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--console-fg, #fff); text-decoration: none; text-align: left; cursor: pointer; box-sizing: border-box; }
#userDropdown .um-item:hover { background: color-mix(in srgb, var(--console-fg, #fff) 8%, transparent); }
#userDropdown .um-item svg { flex: none; opacity: .75; }
#userDropdown .um-item span { display: flex; flex-direction: column; min-width: 0; }
#userDropdown .um-item b { font-size: 13px; font-weight: 600; }
#userDropdown .um-item small { font-size: 11px; color: color-mix(in srgb, var(--console-fg, #fff) 50%, transparent); }
#userDropdown .um-sep { height: 1px; margin: 4px 6px; background: color-mix(in srgb, var(--console-fg, #fff) 10%, transparent); }
#userDropdown .um-logout { color: #f87171; }
/* split ("duo") and account buttons: no white box, just the icons */
html #tabBar #globalSplitBtn, html #tabBar #globalFullBtn, html #tabBar #userMenuBtn { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html #tabBar #globalSplitBtn:hover, html #tabBar #globalFullBtn:hover, html #tabBar #userMenuBtn:hover { background: color-mix(in srgb, var(--console-fg, #fff) 10%, transparent) !important; }
html #tabBar #userMenuBtn { padding: 4px 6px !important; border-radius: 99px !important; gap: 4px !important; }
html #tabBar #userMenuBtn > svg:first-child { display: none; }
html #tabBar .um-btn-initial { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, #22c55e 22%, transparent); color: #4ade80; font-weight: 700; font-size: 12px; }

/* the home page: the bar stays in place, and the page starts below it */
html.tabbar-autohide.tabbar-pinned #tabBar.tab-bar { transform: none; opacity: 1; }
html.tabbar-pinned #floatingBrand { display: none; }

/* ---------- the search box, everywhere (home page look): a soft rounded field with a magnifier ---------- */
.ih-sbox { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--console-fg, #fff) 10%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--console-fg, #fff) 3%, var(--console-bg, #000)); transition: border-color .15s; }
.ih-sbox:focus-within { border-color: color-mix(in srgb, var(--console-fg, #fff) 35%, transparent); }
.ih-sbox > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: color-mix(in srgb, var(--console-fg, #fff) 50%, transparent); stroke-width: 2; stroke-linecap: round; }
html[data-color-mode] .ih-sbox.ih-sbox.ih-sbox.ih-sbox.ih-sbox.ih-sbox input, html[data-color-mode] .ih-sbox.ih-sbox.ih-sbox.ih-sbox.ih-sbox.ih-sbox input:focus { flex: 1; min-width: 0; width: 100%; height: 100% !important; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: var(--console-fg, #fff) !important; font: 500 14px Arial, Helvetica, sans-serif !important; }
.ih-sbox input::placeholder { color: color-mix(in srgb, var(--console-fg, #fff) 45%, transparent); }
.ih-sbox input::-webkit-search-cancel-button { display: none; }
.ih-sbox.is-sm { height: 38px; padding: 0 12px; border-radius: 10px; }
html[data-color-mode] .ih-sbox.ih-sbox.ih-sbox.is-sm input { font-size: 13px !important; }

/* ---------- CRM, the world map / globe and insider trading use the app's colors ---------- */
/* (the background from Settings, its lines and text, as on the home page; light mode keeps its own) */
html:not([data-color-mode="light"]) #crmView {
  --pi-bg: var(--console-bg, #000); --pi-panel: var(--console-bg, #000);
  --pi-panel-2: color-mix(in srgb, var(--console-fg, #fff) 2.5%, var(--console-bg, #000));
  --pi-ink: var(--console-fg, #fff); --pi-muted: color-mix(in srgb, var(--console-fg, #fff) 62%, transparent);
  --pi-dim: color-mix(in srgb, var(--console-fg, #fff) 45%, transparent);
  --pi-line: color-mix(in srgb, var(--console-fg, #fff) 14%, transparent); --pi-soft-line: color-mix(in srgb, var(--console-fg, #fff) 9%, transparent);
}
html:not([data-color-mode="light"]) #worldMapView #worldMapCanvas.leaflet-container { background: var(--console-bg, #000) !important; }
html:not([data-color-mode="light"]) #worldMapView :is(#wmNewsPanel, .wm-customize-btn, .leaflet-bar a, #wmLayersToggle.wm-layer-edge-tab, #worldMapControls.wm-controls, #worldMapControls .wm-panel-title, #wmDrawTools.wm-draw-tools) {
  background: color-mix(in srgb, var(--console-bg, #000) 94%, transparent) !important; border-color: color-mix(in srgb, var(--console-fg, #fff) 14%, transparent) !important;
}
html:not([data-color-mode="light"]) #worldMapView :is(.wm-customize-btn, .leaflet-bar a, #wmLayersToggle.wm-layer-edge-tab):hover { background: color-mix(in srgb, var(--console-fg, #fff) 7%, var(--console-bg, #000)) !important; }
html:not([data-color-mode="light"]) #worldMapView .leaflet-control-attribution { background: color-mix(in srgb, var(--console-bg, #000) 86%, transparent) !important; }
html:not([data-color-mode="light"]) :is(#insiderTabContent, #insiderPersonTabsContainer) {
  --ins-surface: color-mix(in srgb, var(--console-fg, #fff) 2.5%, var(--console-bg, #000)); --ins-line: color-mix(in srgb, var(--console-fg, #fff) 11%, transparent);
  --console-border: var(--ins-line); /* (its panels' outlines: thin lines, as on the home page) */
}
html:not([data-color-mode="light"]) :is(#insiderTabContent, #insiderPersonTabsContainer) :is(.insider-stat-card, .sec-search-section, .insider-filters-standalone, .insider-table-standalone) {
  background: var(--ins-surface) !important; border-color: var(--ins-line) !important; box-shadow: none !important;
}
html:not([data-color-mode="light"]) :is(#insiderTabContent, #insiderPersonTabsContainer) .insider-stat-card :is(.stat-label) { color: color-mix(in srgb, var(--console-fg, #fff) 56%, transparent) !important; }
html:not([data-color-mode="light"]) :is(#insiderTabContent, #insiderPersonTabsContainer) .insider-stat-card:is(.total, .ratio) .stat-value { color: var(--console-fg, #fff) !important; }
html:not([data-color-mode="light"]) :is(#insiderTabContent, #insiderPersonTabsContainer) :is(.sec-search-row input, .filter-group :is(input, select)) { background: var(--console-bg, #000) !important; border-color: color-mix(in srgb, var(--console-fg, #fff) 16%, transparent) !important; }
/* CRM: plain Arial throughout (no display / mono typefaces) */
#crmView { --pi-font: Arial, Helvetica, sans-serif; --pi-mono: Arial, Helvetica, sans-serif; }
#crmView, #crmView :not(svg):not(svg *) { font-family: Arial, Helvetica, sans-serif !important; }
/* Watchlist: no strip of its own at the top; your own entries form */
#crmView .pi-view-switch { display: none !important; }
#crmView .pi-manual { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pi-line); }
#crmView .pi-manual .pi-manual-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
#crmView .pi-manual .pi-field { width: 100%; box-sizing: border-box; min-height: 34px; font-size: 12.5px; }
#crmView .pi-manual textarea.pi-field, #crmView form[data-role="summary-form"] textarea { resize: vertical; padding-top: 8px; width: 100%; box-sizing: border-box; }
#crmView button.pi-chip { cursor: pointer; background: transparent; color: inherit; margin-bottom: 8px; }
/* the Trading (paper) page starts at the top too, under a strip that holds the floating brand */
html.tabbar-autohide :is(.paper-view, .lb-view) iframe { height: calc(100% - 60px) !important; margin-top: 60px; }
/* a clear divider between tabs (a short vertical line on the left of each tab after the first) */
html[data-color-mode].tabbar-autohide #tabBar .tab-item { position: relative; }
html[data-color-mode].tabbar-autohide #tabBar .tab-item ~ .tab-item::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px;
  background: color-mix(in srgb, var(--console-fg, #fff) 24%, transparent); pointer-events: none;
}
html[data-color-mode].tabbar-autohide #tabBar .tab-item:hover::before,
html[data-color-mode].tabbar-autohide #tabBar .tab-item:hover + .tab-item::before { opacity: 0; }