/* Chart command surface ----------------------------------------------------
   Extends the Floating Ribbon language into the chart tabs and command row.
   Existing controls and behavior stay intact; this file owns their visual
   grouping, dimensions and interaction feedback. */

:root {
  --command-cyan:#57e0e9;
  --command-violet:#9b6cff;
  --command-line:rgba(255,255,255,.09);
  --command-line-strong:rgba(132,151,236,.34);
  --command-control:rgba(255,255,255,.025);
  --command-control-hover:linear-gradient(135deg,rgba(66,207,219,.075),rgba(133,82,224,.09));
}

body.product-charts #chart-tabs-bar {
  box-sizing:border-box;
  display:flex;
  height:46px;
  min-height:46px;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  overflow:visible;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(260px 70px at 18% 0,rgba(72,211,223,.035),transparent 72%),
    linear-gradient(180deg,rgba(13,14,18,.98),rgba(7,8,11,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}

body.product-charts #chart-tabs {
  display:flex;
  min-width:0;
  height:34px;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
body.product-charts #chart-tabs::-webkit-scrollbar {display:none;}

body.product-charts .chart-tab {
  position:relative;
  display:flex;
  height:34px;
  flex:none;
  align-items:center;
  border:0;
}

body.product-charts .chart-tab-select {
  display:flex;
  box-sizing:border-box;
  min-width:132px;
  max-width:220px;
  height:34px;
  align-items:center;
  gap:7px;
  margin:0;
  padding:0 30px 0 10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  color:#9298a3;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  font-size:10.5px;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .18s ease,transform .16s ease;
}
body.product-charts .chart-tab-select:hover {
  border-color:rgba(120,135,190,.25);
  color:#e8eaf0;
  background:var(--command-control-hover);
  box-shadow:0 0 16px rgba(100,99,225,.055),inset 0 1px rgba(255,255,255,.035);
}
body.product-charts .chart-tab-select[aria-selected="true"] {
  border-color:var(--command-line-strong);
  color:#fbfcff;
  background:
    radial-gradient(90px 36px at 12% 0,rgba(70,218,228,.13),transparent 78%),
    linear-gradient(135deg,rgba(42,51,62,.92),rgba(34,27,50,.92));
  box-shadow:0 0 0 1px rgba(255,255,255,.014),0 0 18px rgba(75,208,225,.075),0 0 22px rgba(137,82,229,.075),inset 0 1px rgba(255,255,255,.055);
}
body.product-charts .chart-tab-mark {
  display:grid;
  width:16px;
  height:16px;
  flex:none;
  place-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:5px;
  color:#aab1bf;
  background:rgba(255,255,255,.035);
  font-size:7px;
}
body.product-charts .chart-tab-select[aria-selected="true"] .chart-tab-mark {
  border-color:rgba(87,224,233,.23);
  color:#77e3e9;
  background:linear-gradient(135deg,rgba(61,208,220,.12),rgba(138,84,230,.13));
  box-shadow:0 0 9px rgba(87,224,233,.10);
}
body.product-charts .chart-tab-select strong {color:inherit;font-weight:720;}
body.product-charts .chart-tab-select small {color:#707784;font-size:9px;}
body.product-charts .chart-tab-select[aria-selected="true"] small {color:#89919f;}
body.product-charts .chart-tab-close {
  position:absolute;
  right:5px;
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:7px;
  color:#717986;
  background:transparent;
  opacity:0;
  cursor:pointer;
}
body.product-charts .chart-tab:hover .chart-tab-close,
body.product-charts .chart-tab:focus-within .chart-tab-close {opacity:1;}
body.product-charts .chart-tab-close:hover {
  border-color:rgba(255,255,255,.09);
  color:#fff;
  background:rgba(255,255,255,.065);
}
body.product-charts #chart-tab-add-wrap {height:34px;align-items:center;}
body.product-charts #chart-tab-add {
  display:grid;
  box-sizing:border-box;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:10px;
  color:#7f8793;
  background:transparent;
  font-size:18px;
  line-height:1;
}
body.product-charts #chart-tab-add:hover,
body.product-charts #chart-tab-add[aria-expanded="true"] {
  border-color:rgba(126,151,245,.28);
  color:#f4f6fb;
  background:var(--command-control-hover);
  box-shadow:0 0 17px rgba(106,103,231,.07);
}

/* Menu material follows the product switcher rather than the older flat menu. */
body.product-charts :is(#chart-tab-menu,#chart-tab-workspace-menu) {
  padding:8px!important;
  border:1px solid rgba(140,143,158,.25)!important;
  border-radius:14px!important;
  color:#d9dce3!important;
  background:
    radial-gradient(280px 150px at 100% 0,rgba(139,83,225,.11),transparent 72%),
    linear-gradient(145deg,rgba(24,26,31,.995),rgba(10,11,15,.995))!important;
  box-shadow:0 24px 64px rgba(0,0,0,.58),0 0 25px rgba(119,79,222,.065),inset 0 1px rgba(255,255,255,.04)!important;
}
body.product-charts :is(#chart-tab-menu,#chart-tab-workspace-menu) button {
  min-height:42px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:#ced1d9!important;
  background:transparent!important;
}
body.product-charts :is(#chart-tab-menu,#chart-tab-workspace-menu) button:is(:hover,:focus-visible,[aria-expanded="true"]) {
  border-color:rgba(128,121,229,.28)!important;
  color:#fff!important;
  background:linear-gradient(105deg,rgba(71,213,222,.065),rgba(137,82,225,.10))!important;
}

/* Unified chart command row. */
body.product-charts #chart-toolbar {
  box-sizing:border-box;
  display:flex;
  height:52px;
  min-height:52px;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  overflow:visible;
  flex-wrap:nowrap;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(320px 80px at 28% 0,rgba(70,212,223,.027),transparent 74%),
    linear-gradient(180deg,rgba(10,11,14,.98),rgba(7,8,10,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.015);
}

body.product-charts #chart-toolbar > :is(input,button,.toolbar-popover-wrap),
body.product-charts #chart-toolbar .toolbar-btn,
body.product-charts #chart-quick-actions > button {
  box-sizing:border-box;
  height:38px;
  min-height:38px;
  margin-block:0;
}

body.product-charts #chart-toolbar #instrument-search-open {
  display:flex;
  width:190px;
  min-width:164px;
  max-width:220px;
  padding:0 9px 0 7px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  color:#eef0f4;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.010));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  justify-content:flex-start;
  gap:9px;
}
body.product-charts #chart-toolbar #instrument-search-open:hover,
body.product-charts #chart-toolbar #instrument-search-open:focus-visible {
  border-color:rgba(96,205,221,.28)!important;
  background:linear-gradient(135deg,rgba(66,207,219,.055),rgba(133,82,224,.06));
}
body.product-charts #instrument-search-open .market-selector-symbol {
  min-width:0;
  overflow:hidden;
  color:#f0f2f6;
  font-size:11.5px;
  font-weight:760;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.product-charts #instrument-search-open .market-selector-caret {
  color:#717987;
}

body.product-charts #chart-toolbar :is(button,.toolbar-btn) {
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  color:#b6bbc5;
  background:var(--command-control);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .18s ease,transform .16s ease;
}
body.product-charts #chart-toolbar :is(button,.toolbar-btn):is(:hover,:focus-visible) {
  outline:0;
  border-color:rgba(126,151,245,.28);
  color:#f3f5fa;
  background:var(--command-control-hover);
  box-shadow:0 0 16px rgba(106,103,231,.055),inset 0 1px rgba(255,255,255,.035);
}

/* Drawings are a left-rail workspace. Keep the existing programmatic trigger
   for shortcuts and restored state without exposing a second toolbar route. */
body.product-charts #chart-toolbar > .rail-only-popover-host {
  width:0;
  min-width:0;
  height:0;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
}
body.product-charts #chart-toolbar > .rail-only-popover-host > #tools-btn {
  display:none!important;
}
body.product-charts #chart-toolbar :is(button,.toolbar-btn):active {transform:translateY(1px);}

body.product-charts #chart-toolbar :is(#watchlist-star,#pine-toolbar-btn,#tools-btn) {
  width:38px;
  min-width:38px;
  padding:0;
  justify-content:center;
}
body.product-charts #chart-toolbar #watchlist-star[aria-pressed="true"] {
  border-color:rgba(90,214,220,.32);
  color:#79e0e5;
  background:linear-gradient(135deg,rgba(47,185,194,.11),rgba(102,71,193,.10));
  box-shadow:0 0 14px rgba(74,210,221,.075),inset 0 1px rgba(255,255,255,.04);
}
body.product-charts #chart-toolbar #timeframe-btn {min-width:112px;padding-inline:12px;}
body.product-charts #chart-toolbar :is(#chart-style-btn,#chart-layout-btn) {padding-inline:11px;}
body.product-charts #chart-toolbar #indicators-btn {min-width:106px;padding-inline:12px;}

/* A quiet separator marks the move from market controls to chart controls. */
body.product-charts #chart-toolbar .chart-style-picker {
  position:relative;
  margin-left:7px;
}
body.product-charts #chart-toolbar .chart-style-picker::before {
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:-7px;
  width:1px;
  background:rgba(255,255,255,.075);
}

body.product-charts #chart-toolbar .toolbar-spacer {min-width:8px;flex:1;}
body.product-charts #chart-quick-actions {
  position:relative;
  display:flex;
  height:38px;
  align-items:center;
  gap:5px;
  margin-left:4px;
  padding-left:11px;
  border-left:1px solid rgba(255,255,255,.075);
}
body.product-charts #chart-quick-actions > button {padding-inline:11px;}
body.product-charts #chart-quick-actions > :is(#chart-focus,#ai-toggle,#editor-toggle) {gap:7px;}
body.product-charts #chart-more {padding-inline:10px;}

/* More is a true secondary-actions menu. Duplicate routes such as Appearance,
   Data, Save image and Code remain internal targets for their dedicated rail
   buttons, and are intentionally absent from this customer-facing surface. */
body.product-charts #chart-more-wrap {position:relative;height:38px;}
body.product-charts #chart-more-popover {
  position:fixed;
  left:auto!important;
  bottom:auto!important;
  z-index:90;
  display:none;
  box-sizing:border-box;
  width:268px;
  max-height:min(540px,calc(100dvh - 24px));
  overflow:auto;
  padding:8px;
  border:1px solid rgba(133,139,166,.24);
  border-radius:14px;
  background:
    radial-gradient(250px 130px at 100% 0,rgba(132,77,223,.11),transparent 72%),
    linear-gradient(145deg,rgba(24,26,31,.995),rgba(10,11,15,.995));
  box-shadow:0 24px 64px rgba(0,0,0,.58),0 0 24px rgba(112,78,222,.065),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(18px) saturate(125%);
}
body.product-charts #chart-more-popover.open {display:block;}
body.product-charts #chart-more-popover .chart-more-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
}
body.product-charts #chart-more-popover .chart-more-section + .chart-more-section {
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}
body.product-charts #chart-more-popover .chart-more-heading {
  grid-column:1/-1;
  padding:2px 4px 4px;
  color:#727986;
  font-size:9px;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.product-charts #chart-more-popover :is(.chart-more-action,.chart-more-zoom) {
  min-width:0;
}
body.product-charts #chart-more-popover .chart-more-action {
  display:flex!important;
  width:100%;
  min-height:38px;
  justify-content:flex-start;
  padding:0 10px;
  text-align:left;
}
body.product-charts #chart-more-popover .chart-more-action .toolbar-label {display:inline!important;}
body.product-charts #chart-more-popover :is(#chart-zoom-out,#chart-zoom-in) {display:flex!important;align-items:center;justify-content:center;}
body.product-charts #chart-more-popover #chart-volume[aria-pressed="true"] {
  border-color:rgba(90,214,220,.32);
  color:#79e0e5;
  background:linear-gradient(135deg,rgba(47,185,194,.11),rgba(102,71,193,.10));
}
body.product-charts #chart-more-popover #chart-volume .ui-icon {width:15px;height:15px;}
body.product-charts #chart-more-popover #chart-reset-panes,
body.product-charts #chart-more-popover #chart-backtest {grid-column:1/-1;}
body.product-charts #chart-more-popover .chart-more-zoom {
  display:flex;
  grid-column:1/-1;
  height:38px;
  align-items:center;
  gap:5px;
  padding-left:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  color:#9da4af;
  background:rgba(255,255,255,.018);
  font-size:11px;
}
body.product-charts #chart-more-popover .chart-more-zoom > span {margin-right:auto;}
body.product-charts #chart-more-popover .chart-more-zoom > button {
  width:30px;
  min-width:30px;
  height:28px;
  min-height:28px;
  padding:0;
}
body.product-charts #chart-command-internals[hidden] {display:none!important;}
body:not(.product-charts) #drawing-history-controls {display:none;}
body.product-charts #drawing-history-controls {
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  background:rgba(255,255,255,.016);
}
body.product-charts #drawing-history-controls .toolbar-btn {
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border-radius:7px;
  font-size:16px;
}
body.product-charts #chart-toolbar :is(button,.toolbar-btn)[aria-pressed="true"],
body.product-charts #chart-toolbar :is(button,.toolbar-btn)[aria-expanded="true"] {
  border-color:rgba(126,151,245,.33)!important;
  color:#f7f8fc!important;
  background:linear-gradient(135deg,rgba(58,194,207,.085),rgba(126,78,219,.11))!important;
  box-shadow:0 0 16px rgba(91,197,226,.065),0 0 20px rgba(133,82,224,.055),inset 0 1px rgba(255,255,255,.04)!important;
}
body.product-charts #chart-toolbar button:disabled {opacity:.38;box-shadow:none;transform:none;}

@media(max-width:1180px) {
  body.product-charts #chart-toolbar {
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  body.product-charts #chart-toolbar::-webkit-scrollbar {display:none;}
  body.product-charts #chart-toolbar .toolbar-spacer {min-width:12px;}
  body.product-charts #chart-quick-actions {flex:none;}
}

@media(max-width:720px) {
  body.product-charts #chart-tabs-bar {height:44px;min-height:44px;padding-inline:7px;}
  body.product-charts .chart-tab-select {min-width:122px;}
  body.product-charts #chart-toolbar {height:50px;min-height:50px;padding-inline:7px;}
}

@media(prefers-reduced-motion:reduce) {
  body.product-charts .chart-tab-select,
  body.product-charts #chart-toolbar :is(button,.toolbar-btn) {transition:none;}
}