/* css/rightbar.css */
/* ===== RIGHT SIDEBAR CONTAINER ===== */
#right-sidebar {
  border-left: 2px solid var(--hud-panel-border);
}

#right-sidebar.sidebar-expanded {
  width: 320px;
}

#right-sidebar.sidebar-collapsed {
  width: 45px;
}

/* ===== RIGHT SIDEBAR INTERNAL CONTENT & COLLAPSED STATES ===== */
.sidebar-content {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-collapsed .sidebar-content {
  display: none;
}

.sidebar-collapsed .panel-title {
  display: none;
}

.sidebar-collapsed .panel-header {
  justify-content: center;
  padding: 0;
}

/* ===== 標準右側邊欄收合圖標 (Pure CSS - 修復方向與重疊) ===== */
.sidebar-toggle-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  vertical-align: middle;
  color: inherit;
}

/* 1. 右側邊欄垂直分隔線 (靠右，右側留出邊欄空間) */
.sidebar-toggle-icon::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 1.5px;
  background-color: currentColor;
}

/* 2. 內部箭頭 (預設展開狀態：尖端朝右 >，拉開距離避免碰撞) */
.sidebar-toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2.5px; /* 置中於左側艙區，與分隔線保持安全距離 */
  width: 4px;
  height: 4px;
  box-sizing: border-box;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  /* 展開狀態：旋轉 45deg 尖端朝右 > */
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 當側邊欄收合 (.sidebar-collapsed) 時 ===== */
/* 箭頭平滑翻轉 180° 朝左 < (符合附圖：提示點擊可向左展開) */
#right-sidebar.sidebar-collapsed .sidebar-toggle-icon::after {
  transform: translateY(-50%) rotate(-135deg);
}

/* 按鈕懸停光效 */
.toggle-btn:hover .sidebar-toggle-icon {
  color: #fff;
  filter: drop-shadow(0 0 5px var(--hud-cyan, #00f3ff));
}