/*!
 * AlphaDesk · 图表面板样式（web/css/chart.css）
 * 只作用于 .ap-chart 内部（tooltip 由 ECharts 挂在 body 上，故 .ap-tip 为独立前缀）。
 * 依赖全局 CSS 变量，但每个 var() 都带 fallback —— 独立演示页可直接使用。
 */

/* ============================================================
 * 根容器
 * ============================================================ */
.ap-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--text, #e6edf7);
  font-family: var(--font, "Inter", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif);
  background: var(--panel, #0d1420);
  border-radius: var(--radius, 10px);
}

.ap-chart *,
.ap-chart *::before,
.ap-chart *::after {
  box-sizing: border-box;
}

.ap-chart .up { color: var(--up, #ff4d5e); }
.ap-chart .down { color: var(--down, #12d99a); }
.ap-chart .flat { color: var(--flat, #8b9bb4); }

/* ============================================================
 * 报价条（64px）
 * ============================================================ */
.ap-qbar {
  flex: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border, rgba(120, 160, 220, .14));
  background: linear-gradient(180deg, var(--panel-2, #101a2a), var(--panel, #0d1420));
  overflow: hidden;
}

.ap-q-id {
  flex: 0 0 auto;
  min-width: 74px;
  max-width: 138px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ap-q-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-q-code {
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .07em;
  color: var(--muted, #6b7d96);
  font-variant-numeric: tabular-nums;
}

.ap-q-px {
  flex: 0 0 auto;
  min-width: 108px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ap-q-price {
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease;
}

.ap-q-delta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2, #a7b6cc);
}

.ap-q-stats {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  overflow: hidden;
}

.ap-q-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  white-space: nowrap;
}

.ap-q-item i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .05em;
  color: var(--muted, #6b7d96);
}

.ap-q-item b {
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text, #e6edf7);
  font-variant-numeric: tabular-nums;
}

/* 窄屏：依次隐藏次要字段 */
.ap-chart.ap-w-narrow .ap-qbar { gap: 12px; }
.ap-chart.ap-w-narrow .ap-lv1 { display: none; }
.ap-chart.ap-w-tight .ap-lv2 { display: none; }
.ap-chart.ap-w-tight .ap-q-price { font-size: 22px; }
.ap-chart.ap-w-tight .ap-q-stats { gap: 10px; }

/* ============================================================
 * 工具栏
 * ============================================================ */
.ap-tbar {
  flex: 0 0 auto;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border, rgba(120, 160, 220, .14));
  background: var(--bg-2, #0a1019);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ap-tbar::-webkit-scrollbar { display: none; }

.ap-tgroup {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(120, 160, 220, .10);
  border-radius: 8px;
  background: rgba(120, 160, 220, .055);
}

.ap-tsep {
  flex: 0 0 auto;
  width: 1px;
  height: 15px;
  background: var(--border, rgba(120, 160, 220, .14));
}

.ap-tbtn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2, #a7b6cc);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}

.ap-tbtn:hover {
  color: var(--text, #e6edf7);
  background: rgba(120, 160, 220, .12);
}

.ap-tbtn:focus { outline: none; }
.ap-tbtn:focus-visible {
  outline: 1px solid var(--accent, #38e1ff);
  outline-offset: 1px;
}

.ap-tbtn.is-active {
  color: var(--accent, #38e1ff);
  background: rgba(56, 225, 255, .10);
  border-color: rgba(56, 225, 255, .38);
  box-shadow: inset 0 0 0 1px rgba(56, 225, 255, .08), 0 0 10px rgba(56, 225, 255, .10);
}

.ap-tbtn:disabled {
  opacity: .32;
  cursor: not-allowed;
  background: transparent;
}

/* ============================================================
 * 画布
 * ============================================================ */
.ap-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.ap-echart {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.ap-legend {
  position: absolute;
  top: 4px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: calc(100% - 24px);
  pointer-events: none;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--muted, #6b7d96);
}

.ap-lg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
}

.ap-lg-item i {
  display: inline-block;
  width: 8px;
  height: 2px;
  border-radius: 2px;
}

/* ============================================================
 * 状态遮罩（loading / 空 / 错误）
 * ============================================================ */
.ap-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 11, 18, .62);
  backdrop-filter: blur(2px);
}

.ap-overlay[hidden] { display: none; }

.ap-ov-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: min(420px, 86%);
  padding: 16px 22px;
  border: 1px solid var(--border, rgba(120, 160, 220, .14));
  border-radius: var(--radius, 10px);
  background: rgba(13, 20, 32, .92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.ap-ov-text {
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: var(--text-2, #a7b6cc);
}

.ap-ov-btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 6px;
  color: var(--accent, #38e1ff);
  border: 1px solid rgba(56, 225, 255, .4);
  background: rgba(56, 225, 255, .08);
  transition: background .14s ease;
}

.ap-ov-btn:hover { background: rgba(56, 225, 255, .18); }

.ap-ov-spin {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(120, 160, 220, .2);
  border-top-color: var(--accent, #38e1ff);
  border-radius: 50%;
  animation: ap-spin .8s linear infinite;
}

.ap-ov-spin[hidden] { display: none; }
.ap-ov-btn[hidden] { display: none; }

@keyframes ap-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
 * 报价数字闪烁（300ms）
 * ============================================================ */
@keyframes ap-flash-up {
  0% { background-color: rgba(255, 77, 94, .42); color: #fff; }
  100% { background-color: transparent; }
}

@keyframes ap-flash-down {
  0% { background-color: rgba(18, 217, 154, .38); color: #fff; }
  100% { background-color: transparent; }
}

.ap-flash-up,
.ap-flash-down {
  border-radius: 3px;
}

.ap-flash-up { animation: ap-flash-up .34s ease-out; }
.ap-flash-down { animation: ap-flash-down .34s ease-out; }

/* ============================================================
 * Tooltip 深色玻璃卡片（ECharts 挂在 body 上，独立前缀）
 * ============================================================ */
.ap-tip {
  min-width: 176px;
  padding: 8px 10px 9px;
  color: var(--text, #e6edf7);
  font-family: var(--mono, "JetBrains Mono", "Consolas", monospace);
  font-size: 11px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.ap-tip-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(120, 160, 220, .16);
  color: var(--text-2, #a7b6cc);
  font-size: 10.5px;
}

.ap-tip-hd b { font-size: 12px; font-weight: 600; }

.ap-tip-bd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 14px;
}

.ap-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ap-tip-row i {
  font-style: normal;
  font-size: 10px;
  color: var(--muted, #6b7d96);
}

.ap-tip-row b {
  font-weight: 500;
  color: var(--text, #e6edf7);
}

.ap-tip .up { color: var(--up, #ff4d5e); }
.ap-tip .down { color: var(--down, #12d99a); }
.ap-tip .flat { color: var(--flat, #8b9bb4); }

.ap-tip-ft {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(120, 160, 220, .12);
}

.ap-tip-ft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 9.5px;
  color: var(--text-2, #a7b6cc);
}

/* ============================================================
 * 超小容器兜底
 * ============================================================ */
@media (max-width: 620px) {
  .ap-qbar { height: 58px; gap: 10px; }
  .ap-q-price { font-size: 22px; }
  .ap-tbar { gap: 6px; }
  .ap-tbtn { padding: 4px 7px; font-size: 10.5px; }
}