/* ===== Terminal Reform — four workspaces (Observe/Build/Trade/Verify) ===== */
/* Removes the legacy right-column tool bar and the ⚡ Trading Services float
   button; tools move into a drawer; Trade/Build/Verify open overlay panels.
   Supports 4 languages + RTL (Arabic) + mobile. */

#toolBar{display:none!important}                 /* tools now live in the drawer */
/* One trading entry; preserve legacy nodes for compatibility, not navigation.
   旧工作区排（桌面第一排的 wsBarSlot/workspaceBar、手机第二层的 mWsSelWrap、
   手机工作区排 #workspaceBarMobile）保留 DOM 以兼容既有脚本与测试，
   但不再作为导航入口显示 —— 交易入口统一为「交易机会」面板。 */
.topbar #wsBarSlot,.topbar #workspaceBar,.topbar #mWsSelWrap,
#workspaceBarMobile.ws-bar-mobile{display:none!important}
@media(max-width:768px){
  /* 手机档第一排的入口按钮隐藏：交易/指标改由底栏承担，避免重复入口 */
  .topbar .topbar-row-primary #btnOpportunities,
  .topbar .topbar-row-primary #btnIndicators{display:none!important}
}

.ws-bar{display:flex;align-items:center;gap:6px;padding:4px 12px;background:#16203a;
  border-bottom:1px solid #334155;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.ws-bar::-webkit-scrollbar{display:none}
.ws-tab{display:flex;align-items:center;gap:6px;padding:5px 14px;border:1px solid #334155;
  background:#0f172a;color:#94a3b8;border-radius:6px;cursor:pointer;font-size:12px;
  transition:all .2s;white-space:nowrap}
.ws-tab:hover{color:#ffcc00;border-color:#ffcc00}
.ws-tab.active{background:rgba(255,204,0,.12);border-color:#ffcc00;color:#ffcc00;font-weight:600}
.ws-emoji{font-size:14px}
.ws-name{font-size:12px}

/* Tools drawer (desktop) */
.tool-drawer{position:fixed;top:0;right:-340px;bottom:0;width:300px;background:#1e293b;
  border-left:1px solid #334155;z-index:120;transition:right .25s ease;display:flex;
  flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.4)}
html[dir="rtl"] .tool-drawer{right:auto;left:-340px;border-left:0;border-right:1px solid #334155}
.tool-drawer.open{right:0}
html[dir="rtl"] .tool-drawer.open{left:0}
.tool-drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:115;opacity:0;
  pointer-events:none;transition:opacity .25s}
.tool-drawer-mask.open{opacity:1;pointer-events:auto}
.tool-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #334155}
.tool-drawer-title{font-size:14px;font-weight:700;color:#ffcc00}
.tool-drawer-close{background:none;border:none;color:#94a3b8;font-size:18px;cursor:pointer}
.tool-drawer-close:hover{color:#ffcc00}
.tool-drawer-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px}

/* Workspace overlay panels */
.ws-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:110;
  background:#16203a;border-left:1px solid #334155;display:flex;flex-direction:column;
  box-shadow:-10px 0 30px rgba(0,0,0,.45);overflow:hidden}
html[dir="rtl"] .ws-panel{right:auto;left:0;border-left:0;border-right:1px solid #334155}
.ws-panel[hidden]{display:none}
.ws-panel-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:105;opacity:0;
  pointer-events:none;transition:opacity .25s}
.ws-panel-mask.show{opacity:1;pointer-events:auto}
.ws-panel-inner{flex:1;overflow-y:auto;padding:14px}
/* Mobile usability: the Demo/Trade/Verify panels cover the chart (full width on
   phones) and the mask behind them is not reachable, so each panel carries an
   explicit "back to chart" bar. Observe IS the chart and never renders one. */
.ws-panel-close-bar{display:flex;justify-content:flex-end;align-items:center;gap:6px;
  padding:6px 10px;background:#16203a;border-bottom:1px solid #334155;flex-shrink:0}
.ws-panel-close-bar .ws-btn{padding:3px 10px;font-size:12px;white-space:nowrap}
html[dir="rtl"] .ws-panel-close-bar{justify-content:flex-start}
@media(max-width:768px){.ws-panel-close-bar{padding:8px 10px}.ws-panel-close-bar .ws-btn{padding:6px 12px;font-size:13px}}

.ws-card{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:12px;margin-bottom:12px}
.ws-card h4{color:#ffcc00;font-size:13px;margin:0 0 10px;font-weight:600}
.ws-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;gap:8px}
.ws-row>span:first-child{color:#94a3b8}
.ws-row b{color:#e2e8f0;font-weight:600}
.ws-input{background:#0f172a;border:1px solid #475569;color:#e2e8f0;padding:6px 9px;border-radius:5px;
  font-size:12px;width:100%}
.ws-select{background:#0f172a;border:1px solid #475569;color:#e2e8f0;padding:6px 9px;border-radius:5px;
  font-size:12px;width:100%}
.ws-field{margin-bottom:9px}
.ws-field label{display:block;font-size:11px;color:#94a3b8;margin-bottom:4px}
.ws-btn{background:#ffcc00;color:#0f172a;border:none;border-radius:5px;padding:8px 14px;font-size:12px;
  font-weight:700;cursor:pointer;transition:all .2s;width:100%}
.ws-btn:hover{background:#ffd700}
.ws-btn:disabled{opacity:.5;cursor:not-allowed}
.ws-btn.ghost{background:transparent;border:1px solid #475569;color:#94a3b8}
.ws-btn.danger{background:#b91c1c;color:#fff}
.ws-btn.teal{background:#064f46;color:#26a69a;border:1px solid #26a69a}
.ws-note{font-size:11px;color:#64748b;line-height:1.6}
.ws-ok{color:#26a69a}.ws-err{color:#f87171}.ws-warn{color:#fbbf24}.ws-muted{color:#64748b}
.ws-msg{font-size:12px;padding:8px 10px;border-radius:6px;margin:6px 0;display:none}
.ws-msg.show{display:block}
.ws-msg.ok{background:rgba(38,166,154,.12);border:1px solid #26a69a;color:#4ade80}
.ws-msg.err{background:rgba(248,113,113,.12);border:1px solid #f87171;color:#fca5a5}
.ws-msg.warn{background:rgba(251,191,36,.1);border:1px solid #fbbf24;color:#fde68a}
.ws-table{width:100%;border-collapse:collapse;font-size:11px}
.ws-table th{color:#94a3b8;text-align:left;padding:5px 6px;border-bottom:1px solid #334155;font-weight:600}
.ws-table td{padding:5px 6px;border-bottom:1px solid #1e293b;color:#e2e8f0}
html[dir="rtl"] .ws-table th{text-align:right}
.ws-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}
.ws-pill.ok{background:rgba(38,166,154,.18);color:#4ade80}
.ws-pill.err{background:rgba(248,113,113,.18);color:#fca5a5}
.ws-pill.warn{background:rgba(251,191,36,.15);color:#fde68a}
.ws-pill.info{background:rgba(148,163,184,.15);color:#cbd5e1}
.ws-status-bar{display:flex;align-items:center;gap:8px;font-size:12px;padding:10px 14px;
  background:#0f172a;border-bottom:1px solid #334155}
.ws-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ws-dot.green{background:#26a69a}.ws-dot.red{background:#ef5350}.ws-dot.amber{background:#fbbf24}
.ws-tab-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.ws-chips{display:flex;gap:6px;flex-wrap:wrap}
.ws-chip{padding:4px 10px;border:1px solid #334155;border-radius:12px;font-size:11px;color:#94a3b8;
  cursor:pointer;background:#0f172a}
.ws-chip.active{border-color:#ffcc00;color:#ffcc00}
.ws-empty{color:#64748b;font-size:12px;text-align:center;padding:20px 0}

@media(max-width:768px){
  .ws-panel{width:100%;border-left:0}
  .ws-bar{padding:4px 6px;gap:4px}
  .ws-tab{padding:5px 10px}
}

/* ============================================================================
   交易机会统一面板（任务书 4.1/4.2，2026-09-14）
   ----------------------------------------------------------------------------
   面板宿主是既有的 #toolPanel 抽屉（桌面 28vw 侧栏 / 手机全屏上滑），
   与指标面板、工具 iframe 同一容器，因此无需第二套抽屉样式。
   三个收编容器（.opp-hosted-ws）取消视口级定位，改为面板内静态流。
   ========================================================================== */
#opportunitiesPanel{background:#16203a}
.opp-head{padding:8px 12px 6px;border-bottom:1px solid #334155;flex-shrink:0}
.opp-title{font-size:13px;font-weight:700;color:#ffcc00;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth;padding-bottom:2px}
.opp-tabs::-webkit-scrollbar{display:none}
/* 可横向滚动时给出可见提示（320–430px 四段位可能超出）：右侧渐隐 + 文案提示 */
.opp-tabs[data-scrollable="1"]{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%)}
html[dir="rtl"] .opp-tabs[data-scrollable="1"]{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to left,#000 calc(100% - 18px),transparent 100%)}
.opp-tabs-hint{margin-top:4px;font-size:11px;color:#94a3b8;line-height:1.4}
.opp-tabs-hint[hidden]{display:none}
.opp-tab{padding:5px 10px;border:1px solid #334155;background:#0f172a;color:#94a3b8;
  border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap;min-height:32px;
  display:inline-flex;align-items:center;transition:all .2s;flex:0 0 auto}
.opp-tab:hover{color:#ffcc00;border-color:#ffcc00}
.opp-tab.on{background:rgba(255,204,0,.12);border-color:#ffcc00;color:#ffcc00;font-weight:600}
.opp-tab:focus-visible{outline:2px solid #ffcc00;outline-offset:1px}
.opp-section{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.opp-body{flex:1;overflow-y:auto;padding:10px 12px}
.opp-empty{color:#64748b;font-size:12px;line-height:1.6;padding:14px 4px;text-align:center}

/* 收编容器：面板内静态流（覆盖 .ws-panel 的视口级 absolute 定位）。
   注意 [hidden] 必须显式压住，否则 ID 选择器优先级会盖掉 .ws-panel[hidden]。 */
#opportunitiesPanel .opp-hosted-ws{position:static;top:auto;right:auto;bottom:auto;left:auto;
  width:auto;flex:1;min-height:0;z-index:auto;box-shadow:none;border-left:0;border-right:0}
#opportunitiesPanel .opp-hosted-ws[hidden]{display:none}
html[dir="rtl"] #opportunitiesPanel .opp-hosted-ws{left:auto;right:auto;border-right:0}

/* 中和旧全屏遮罩 #wsPanelMask —— 集成期的必要修复（实测缺陷，非预防性）。
   背景：机会面板把三个工作区容器**收编进 #toolPanel 抽屉**后，旧遮罩失去了用途；
   但终端状态机 switchTerminalWorkspace 仍会给它加 .show（z-index:105、全屏、
   pointer-events:auto），而抽屉 #toolPanel 的 z-index 只有 50 ——
   实测遮罩盖在面板之上，**整个机会面板（含「带入模拟」「预览风险」）都点不动**，
   Playwright 报 "ws-panel-mask … intercepts pointer events"。
   候选版本没有这个元素所以从未暴露；本集成恢复它是为满足指标侧测试对
   switchTerminalWorkspace('observe') 的断言。
   处理：只中和"显示态"，不删元素、不改任何 JS —— 指标测试要的元素与 onclick 都还在。 */
.ws-panel-mask.show{display:none}

@media(max-width:768px){
  /* 手机端触控目标 ≥44×44（与终端既有手机规范一致）。
     min-height 管住了高，**宽度**此前没管：实测 320/360px 下中文「模拟」
     只有 42px 宽（收窄档 padding:8px 之后更小），够不到 44。
     高矮只写 min-height 是"半条标准"，这里补齐宽的那一半。
     真实下单入口 [data-opp-sim] 同理：inline 的 min-height:40px 也压不过这里。 */
  .opp-tab{min-height:44px;min-width:44px;justify-content:center;
    padding:9px 12px;font-size:13px}
  /* 必须 !important：机会卡的「带入模拟」按钮自带**内联** min-height:40px
     （渲染在 static/js/terminal-opportunities.js 的 HTML 串里）。非 important
     的样式声明一律输给内联样式 —— 实测 min-width 生效而 min-height 不生效，
     正是这个原因。CSS 里用 !important 压内联是本文件既有手法（见上方
     #opportunitiesPanel .opp-hosted-ws[hidden]）。桌面档不受影响：
     @media(max-width:768px) 之外的规则根本不参与级联。 */
  #opportunitiesPanel [data-opp-sim]{min-width:44px !important;
    min-height:44px !important}
  .opp-head{padding:8px 10px 6px}
  .opp-title{font-size:14px}
}

/* 320–360px：收紧段位内边距与字号，让四个子段位尽量一屏可见；
   仍超出时由 .opp-tabs-hint 给出明确的横滑提示（可发现性不依赖隐藏滚动条）。 */
@media(max-width:360px){
  .opp-tab{min-height:44px;min-width:44px;padding:8px 8px;font-size:12px;gap:4px}
  .opp-tabs{gap:4px}
  .opp-tabs-hint{font-size:10.5px}
}

/* ── 机会段「图上信号」开关的外观与触控尺寸（2026-09-17 独立复核补齐项 4）──
   实测缺陷（线上真实浏览器，390 与 1280 两档一致）：
   #btnSignalLayerToggle 为 **84×21**，border 是浏览器默认的 `2px outset`、
   border-radius 0、padding 0、font-size 13.33px、cursor default，
   全仓库（含线上快照与指标封版 8641d6fd）**没有任何 .sc-layer-* 样式** ——
   它一直以**原生按钮**形态渲染。
   两处不达标：① 高 21px 远低于本模块 44×44 的触控要求（宽 84 达标，高不达标）；
   ② 与面板其它控件视觉明显不统一（复核已在截图中指出）。
   处置：**只补外观与触控尺寸**，行为（onclick / aria-pressed / 文案同步）仍归
   signal-center-t3.js，一行未动。
   作用域**限定在 #opportunitiesPanel 内**。措辞更正（2026-09-17 独立复核指出）：
   实测**全站仅此一个**该按钮（线上渲染页 .sc-layer-btn ×1、#btnSignalLayerToggle ×1；
   signal-center-t3.js:201 是 getElementById('btnSignalLayerToggle')，取的就是同一个）——
   原注释写的"信号中心自己若有同名按钮，不受影响"**不准确**。
   限定作用域的真实理由是**不越界**：将来信号中心若自建同名控件，不会被这里的外观规则意外影响。 */
#opportunitiesPanel .sc-layer-row{display:flex;margin:2px 0 8px}
#opportunitiesPanel .sc-layer-btn{min-height:44px;min-width:44px;padding:0 14px;
  display:inline-flex;align-items:center;border:1px solid #3b82f6;border-radius:8px;
  background:transparent;color:#93c5fd;font-size:13px;line-height:1.2;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
#opportunitiesPanel .sc-layer-btn:hover{background:rgba(59,130,246,.12)}
#opportunitiesPanel .sc-layer-btn:focus-visible{outline:2px solid #ffcc00;outline-offset:1px}
/* 开关的"已开启"态由模块写在 aria-pressed 上（文案另有同步），此处只做视觉呼应 */
#opportunitiesPanel .sc-layer-btn[aria-pressed="true"]{border-color:#ffcc00;color:#ffcc00;
  background:rgba(255,204,0,.12)}
