/**
 * Chart Sidebar Styles
 * 侧边导航栏 + 内容面板样式
 */

/* ========== Main Content 布局 ========== */
.main-content {
  display: flex;
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* ========== 侧边导航栏 (60px 宽) ========== */
.sidebar-nav {
  width: 60px;
  background: var(--bg-secondary, #161b22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-color, #30363d);
  z-index: 100;
  flex-shrink: 0;
}

/* 左侧位置（默认）*/
.sidebar-nav[data-position="left"] {
  order: 0;
  border-right: 1px solid var(--border-color, #30363d);
  border-left: none;
}

/* 右侧位置 */
.sidebar-nav[data-position="right"] {
  order: 3;
  border-left: 1px solid var(--border-color, #30363d);
  border-right: none;
}

/* 导航按钮容器 */
.nav-buttons {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 4px; /* ⭐ 统一间距 */
}

/* 导航按钮 - ⭐ 改为与图表工具列一致的风格 */
.nav-btn {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background: var(--bg-primary, #0d1117); /* ⭐ 改为深色背景 */
  border: 1px solid var(--border-color, #30363d); /* ⭐ 添加边框 */
  border-radius: 6px; /* ⭐ 改为 6px 圆角 */
  color: var(--text-secondary, #8b949e);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s; /* ⭐ 改为 0.2s */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ⭐ SVG 图标继承按钮颜色 */
.nav-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}

.nav-btn:hover {
  border-color: var(--accent-primary, #58a6ff); /* ⭐ 悬停边框变蓝 */
  background: var(--bg-secondary, #161b22); /* ⭐ 悬停背景 */
  color: var(--accent-primary, #58a6ff); /* ⭐ 悬停文字变蓝 */
}

.nav-btn.active {
  background: rgba(31, 111, 235, 0.15); /* ⭐ 半透明蓝色背景（提高透明度） */
  border-color: var(--accent-primary, #58a6ff); /* ⭐ 蓝色边框 */
  color: var(--accent-primary, #58a6ff); /* ⭐ 蓝色图标 */
}

.nav-btn:active {
  transform: scale(0.95); /* ⭐ 点击效果 */
}

/* 分隔线 */
.nav-divider {
  height: 1px;
  background: var(--border-color, #30363d);
  margin: 4px 8px; /* ⭐ 减小上下间距 */
}

/* 导航栏底部 */
.nav-bottom {
  padding: 8px 0;
  border-top: 1px solid var(--border-color, #30363d);
}

/* ⭐ 用户头像按钮 - 移除 emoji 相关样式 */
.user-avatar .avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* ========== 双容器面板系统 (300px 宽) ========== */
.sidebar-panel-container {
  width: 300px;
  background: var(--bg-secondary, #161b22);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  z-index: 90;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color, #30363d);
}

/* 左侧位置 - 使用动态 order */
.sidebar-panel-container[data-position="left"] {
  border-right: 1px solid var(--border-color, #30363d);
  border-left: none;
}

/* 右侧位置 - 使用动态 order */
.sidebar-panel-container[data-position="right"] {
  border-left: 1px solid var(--border-color, #30363d);
  border-right: none;
}

/* 隐藏状態：確保完全 0 寬，不留空白 */
.sidebar-panel-container.hidden {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  flex: 0 0 0 !important;
}

/* 面板头部 - ⭐ 隐藏头部，侧边栏导航已足够 */
.panel-header {
  display: none; /* ⭐ 完全隐藏头部 */
}

/* 关闭按钮 */
.btn-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #8b949e);
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  background: var(--bg-hover, rgba(110, 118, 129, 0.1));
  color: var(--error-color, #ff4d4f);
}

/* 面板内容 */
/* 面板内容区域 */
.panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0; /* ⭐ 移除 padding，内容更紧凑，组件内部自己控制间距 */
}

/* 自定义滚动条 */
.panel-body::-webkit-scrollbar {
  width: 6px;
}

.panel-body::-webkit-scrollbar-track {
  background: var(--bg-primary, #0d1117);
}

.panel-body::-webkit-scrollbar-thumb {
  background: var(--border-color, #30363d);
  border-radius: 3px;
}

.panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #8b949e);
}

/* ========== 主区域 ========== */
.main-area {
  flex: 1;
  order: 2;
  display: flex;
  flex-direction: column;
  min-width: 0; /* K線圖自己處理寬度，不設下限 */
  position: relative;
  overflow: hidden;
  min-height: 0; /* ⭐ 确保flex子元素可以正确缩小 */
}

/* 图表区域 */
.chart-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--bg-primary, #0d1117);
  min-height: 0; /* ⭐ 确保flex子元素可以正确缩小 */
}

#chart-app {
  width: 100%;
  height: 100%;
}

/* ========== 响应式（桌面端优先）========== */
@media (max-width: 1280px) {
  body::before {
    content: '请使用桌面端访问，屏幕宽度至少 1280px';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--error-color, #ff4d4f);
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 9999;
    font-size: 14px;
  }
}


/* ===== 全局焦點與選取樣式統一 ===== */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12) !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #4d93e8;
}

/* 選取文字時的背景色 */
::selection {
  background: rgba(88, 166, 255, 0.25);
  color: #e6edf3;
}

/* ==================== 響應式佈局 v2 ==================== */

/* --- 商品列表縮窄模式（compact）--- */
#symbolPanel.compact {
  width: 140px !important;
}

/* compact 只隱藏 /USDT 和收藏按鈕，保留漲跌幅 */
#symbolPanel.compact .symbol-quote,
#symbolPanel.compact .favorite-btn {
  display: none !important;
}

#symbolPanel.compact .symbol-item {
  padding: 6px 8px;
}

#symbolPanel.compact .symbol-left {
  flex: 1;
  min-width: 0;
}

#symbolPanel.compact .symbol-base {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#symbolPanel.compact .symbol-price {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

#symbolPanel.compact .symbol-right {
  min-width: 0;
}

#symbolPanel.compact .symbol-change {
  font-size: 11px;
  white-space: nowrap;
}

/* --- 訂單簿縮窄模式（compact）--- */
#orderbookPanel.compact {
  width: 200px !important;
}

#orderbookPanel.compact .total-col {
  display: none !important;
}

#orderbookPanel.compact .orderbook-row {
  padding: 6px 8px;
}

/* compact 模式隱藏點差 % 幅度 */
#orderbookPanel.compact #orderbook-spread-display,
#orderbookPanel.compact .spread-pct-col {
  display: none !important;
}

/* --- 下單面板浮動按鈕（AI助理上方）--- */
#floating-order-btn {
  display: none;
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 999;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1f6feb 0%, #0969da 100%);
  border: none;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 111, 235, 0.45);
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
}

#floating-order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(31, 111, 235, 0.6);
  background: linear-gradient(135deg, #388bfd 0%, #1f6feb 100%);
}

#floating-order-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(31, 111, 235, 0.4);
}

#floating-order-btn.visible {
  display: flex;
}

/* 浮動下單面板 overlay */
#tradingPanel.floating {
  position: fixed !important;
  right: 16px !important;
  bottom: 84px !important;
  top: auto !important;
  left: auto !important;
  width: 300px !important;
  max-height: 80vh;
  z-index: 998;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow-y: auto;
  border: 1px solid var(--border-color, #30363d) !important;
}

#tradingPanel.floating.hidden {
  display: none !important;
  width: 0 !important;
}

/* 移除 <1280px 舊紅色警告 */
@media (max-width: 1280px) {
  body::before {
    display: none !important;
  }
}