#tradeDock{position:fixed;top:120px;right:0;width:320px;max-height:76vh;z-index:99990;
  background:#141821;border:1px solid #2a2f3a;border-right:none;border-radius:14px 0 0 14px;
  box-shadow:-8px 0 30px rgba(0,0,0,.4);transition:transform .25s ease;overflow:visible;display:block}
#tradeDock.collapsed{transform:translateX(308px)}
#dockToggle{position:absolute;left:0;top:14px;width:26px;height:34px;border:none;background:#7c5cff;color:#fff;
  border-radius:8px 0 0 8px;cursor:pointer;font-size:15px;font-weight:800;transform:translateX(-26px);box-shadow:-4px 0 12px rgba(0,0,0,.3)}
.dock-inner{padding:14px 14px 14px 18px;overflow-y:auto;max-height:76vh}
.dock-run{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dock-run-btn{background:#2fe38b;color:#04121a;border:none;border-radius:10px;padding:10px 16px;font-weight:800;cursor:pointer;font-family:inherit}
.dock-run-btn.stopping{background:#ff5d73;color:#fff}
.dock-status{font-size:.8rem;color:#cdd6e5;display:flex;align-items:center;gap:6px}
.dock-live{width:8px;height:8px;border-radius:50%;background:#2fe38b;box-shadow:0 0 8px #2fe38b;opacity:.3;animation:dockPulse 1.6s infinite}
@keyframes dockPulse{50%{opacity:.35}}
.dock-subtabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid #2a2f3a}
.dock-sub{flex:1;background:none;border:none;color:#93a1bd;padding:8px 4px;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;border-bottom:2px solid transparent}
.dock-sub.active{color:#e9eef7;border-bottom-color:#7c5cff}
.dock-empty-note{color:#6b7a94;font-size:.82rem;text-align:center;padding:22px 10px;line-height:1.5}
.dock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.dock-grid div{background:#1e2530;border:1px solid #2a2f3a;border-radius:8px;padding:9px 6px;text-align:center}
.dock-grid span{display:block;font-size:.62rem;color:#93a1bd;text-transform:uppercase;margin-bottom:3px}
.dock-grid b{font-size:.9rem;color:#e9eef7}
.dock-grid b.pos{color:#2fe38b}.dock-grid b.neg{color:#ff5d73}
.dock-reset{width:100%;background:#1e2530;border:1px solid #2a2f3a;color:#cdd6e5;padding:9px;border-radius:8px;cursor:pointer;font-family:inherit}
.txn-row{display:flex;justify-content:space-between;gap:8px;padding:7px 6px;border-bottom:1px solid #1e2530;font-size:.75rem;color:#cdd6e5}
.log-row{padding:5px 6px;border-bottom:1px solid #1e2530;font-size:.72rem;color:#cdd6e5;line-height:1.4}
.log-row .log-t{color:#6b7a94;margin-right:4px}
.log-row.win{color:#2fe38b}.log-row.loss{color:#ff5d73}.log-row.warn{color:#ffb547}.log-row.err{color:#ff5d73}
@media(max-width:900px){#tradeDock{top:390px;width:84vw;max-height:calc(100vh - 410px)}.dock-inner{max-height:calc(100vh - 410px)}#tradeDock.collapsed{transform:translateX(calc(84vw - 12px))}}

#smartchart { width:100% !important; height:75vh !important; min-height:560px !important; position:relative !important; display:block !important; }
#smartchart > *, #smartchart .smartcharts-mobile, #smartchart .ciq-chart-area, #smartchart .cq-context { height:100% !important; width:100% !important; }
#tab-charts { width:100% !important; max-width:100% !important; }

/* Charts tab breaks out of the centered app-shell to go full-width, like real Deriv */
#tab-charts:not(.hidden) {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 16px;
  box-sizing: border-box;
}
/* Reserve space on the right so the chart isn't hidden under the fixed dock (when expanded) */
#tab-charts:not(.hidden) #smartchart {
  width: 100% !important;
  padding-right: 24px;
}
@media(min-width:901px){
  /* leave room for the 320px dock on desktop so chart never sits under it */
  #tab-charts:not(.hidden){ padding-right: 336px; }
}

/* Re-enable SmartCharts market selector clicks (blocked by pointer-events:none) */
.cq-top-ui-widgets,
.sc-dialog.cq-menu-dropdown,
.sc-dialog__body,
.sc-dialog__body *,
.sc-mcd,
.sc-mcd *,
[class*="sc-mcd__item--"] {
  pointer-events: auto !important;
}

/* After selection, fully neutralize the market-menu overlay so it can't block the chart */
.sc-dialog.cq-menu-dropdown.apex-closed {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
