/* =====================================================================
   rheo for Salesforce — DS §07 サイドパネル（Translucent Panel）
   ---------------------------------------------------------------------
   読み込み順: tokens.css → ds-tokens.css → base.css → components.css
               → ds-components.css → ds-shell.css → pages/<画面>.css

   ★ 読み込むのはアプリ 9 画面。impact.html だけが読み込まない ★
     markup は js/ds/sidebar.js が <aside id="appSidebar" class="app-sidebar
     ds-panel" data-ds-sidebar> へ描画する（各画面での markup 重複を防ぐ）。
     要素 id（newConvBtn / historyBtn / sfConnectionBadge …）は旧
     index.html と完全に同一で、js/pages/index.js を無改修で動かす。

   DS §07 の仕様:
     - 地は不透明な板ではなく半透明サーフェス
       rgba(22,22,25,.60) ＋ blur 30px・saturate 140%、境界 1px 白 10〜16%
     - 閉: アイコンレールだけの角丸（R28）ピル
     - 開: レールと地続きのまま右へ拡張、内部はヘアラインで区切る
     - 項目はピル型・高さ 44px（ヒット領域 44px 以上を厳守）
       アクティブは白い充実ピル＋ダーク文字
   ===================================================================== */

/* ── パネル本体（開いた状態が既定。閉はレールピル） ──
   幅は --ds-panel-w（js/ds/sidebar.js がドラッグで書き換える）。
   ★ インラインの width ではなくカスタムプロパティにすること ★
     インライン style は .collapsed の width: 72px に勝ってしまい、
     一度ドラッグすると折りたたみが効かなくなる。 */
.ds-panel {
    width: var(--ds-panel-w, 300px); flex-shrink: 0;
    position: relative;
    display: flex; flex-direction: column;
    margin: 14px 0 14px 14px;
    border-radius: var(--r-panel);
    background: var(--panel-glass-bg);
    backdrop-filter: var(--panel-glass-blur);
    -webkit-backdrop-filter: var(--panel-glass-blur);
    border: 1px solid var(--panel-glass-border);
    box-shadow: var(--panel-glass-shadow);
    overflow: hidden;
    transition: width 0.25s ease;
}

/* ── ヘッダー（ブランド + 開閉トグル） ── */
.ds-panel .sidebar-header {
    padding: var(--sp-16) var(--sp-16) 10px;
    display: flex; align-items: center; gap: var(--sp-8);
    flex-shrink: 0;
}
.ds-panel .sidebar-brand {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1; overflow: hidden; align-items: flex-start;
}
/* ロゴ画像（images/rheo-logo.svg）。折りたたみ時は .sidebar-brand ごと消える。 */
.ds-panel .sidebar-brand .brand-logo { height: 26px; width: auto; display: block; max-width: 100%; }
.ds-panel .brand-sub {
    font-family: var(--font-latin); font-weight: 600; font-size: 8.5px;
    letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase; white-space: nowrap;
}
.ds-panel .sidebar-toggle {
    flex-shrink: 0; width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: rgba(255, 255, 255, 0.65);
    border-radius: var(--r-icon); box-shadow: none;
}
.ds-panel .sidebar-toggle:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.10); color: #fff; border: none;
}
.ds-panel .sidebar-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ── メニュー（ピル型・44px） ── */
.ds-panel .sidebar-menu {
    padding: var(--sp-4) 14px; display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
.ds-panel .sidebar-item {
    display: flex; align-items: center; gap: 12px;
    height: 44px; padding: 0 14px; flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8); font-size: 14px; letter-spacing: 0.01em;
    border-radius: var(--r-pill); cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    border: none; background: transparent; width: 100%; text-align: left;
    white-space: nowrap; box-shadow: none;
}
.ds-panel .sidebar-item:hover:not(:disabled) {
    color: #fff; background: rgba(255, 255, 255, 0.08); border: none;
}
.ds-panel .sidebar-item svg {
    width: 18px; height: 18px; flex-shrink: 0;
    stroke: currentColor; fill: none; opacity: 0.85;
}
.ds-panel .sidebar-item:hover svg { opacity: 1; }
/* 現在画面: 白い充実ピル＋ダーク文字（§07 モックの「新しい会話」） */
.ds-panel .sidebar-item.ds-active {
    background: var(--ds-white); color: var(--ds-ink); font-weight: 700;
}
.ds-panel .sidebar-item.ds-active:hover { background: var(--ds-white); color: var(--ds-ink); }
.ds-panel .sidebar-item.ds-active svg { opacity: 1; }
.ds-panel .sidebar-divider { height: 1px; background: var(--hairline); margin: 12px 8px; flex-shrink: 0; }

/* ── フッター（接続状態 / 環境 / ユーザー / ログアウト） ── */
.ds-panel .sidebar-footer {
    flex-shrink: 0; padding: 10px 14px 14px;
    border-top: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
/* 接続インジケータ: Success の淡い塗りピル（§07 モック） */
.ds-panel .conn-badge {
    display: inline-flex; align-items: center; gap: var(--sp-8);
    height: 34px; padding: 0 14px;
    font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.82);
    background: rgba(52, 199, 123, 0.10);
    border: 1px solid rgba(52, 199, 123, 0.35);
    border-radius: var(--r-pill); white-space: nowrap;
}
.ds-panel .conn-badge .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 10px rgba(52, 199, 123, 0.8); flex-shrink: 0;
}
.ds-panel #connectorBadges { display: flex; flex-direction: column; gap: var(--sp-8); }
.ds-panel #connectorBadges:empty { display: none; }

/* まとめ行「コネクタ接続中」（3 件以上つながったとき。markup は
   js/pages/index.js の renderConnectionBadges）。連携先が増えると
   フッターが縦に伸びてユーザー名・ログアウトを押し出すため 1 行へ畳み、
   クリックで .conn-group-list を開く。 */
.ds-panel .conn-group-toggle {
    width: 100%; font: inherit; font-size: var(--fs-caption);
    text-align: left; cursor: pointer;
    transition: background 0.18s ease;
}
.ds-panel .conn-group-toggle:hover { background: rgba(52, 199, 123, 0.18); }
.ds-panel .conn-group-toggle:focus-visible {
    outline: 2px solid rgba(52, 199, 123, 0.7); outline-offset: 2px;
}
.ds-panel .conn-group-label {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
}
.ds-panel .conn-group-count {
    flex-shrink: 0; min-width: 20px; padding: 1px 6px;
    font-family: var(--font-mono); font-size: 11px; text-align: center;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(52, 199, 123, 0.22); border-radius: var(--r-pill);
}
.ds-panel .conn-group-caret { display: inline-flex; flex-shrink: 0; }
.ds-panel .conn-group-caret svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    opacity: 0.7; transition: transform 0.18s ease;
}
.ds-panel .conn-group-toggle[aria-expanded="true"] .conn-group-caret svg {
    transform: rotate(180deg);
}
/* 展開したシステム名。まとめ行の下にぶら下がっていることが分かるよう
   左に少し寄せる（縦線＋インデント） */
.ds-panel .conn-group-list {
    display: flex; flex-direction: column; gap: var(--sp-8);
    margin-left: 10px; padding-left: 10px;
    border-left: 1px solid var(--hairline);
    /* 展開しても下のユーザー名・ログアウトを押し出さない（フッターは
       overflow: hidden なので、伸びた分はそのまま切れてしまう） */
    max-height: 34vh; overflow-y: auto; overflow-x: hidden;
}
/* 環境ラベルはコード表記（JetBrains Mono） */
.ds-panel #activeEnvLabel {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(255, 255, 255, 0.5); padding: 0 6px;
}
.ds-panel .sidebar-user {
    display: flex; align-items: center; gap: 10px; padding: 0 6px;
    font-size: 12.5px; color: rgba(255, 255, 255, 0.78); overflow: hidden;
}
.ds-panel .sidebar-user svg {
    width: 20px; height: 20px; flex-shrink: 0;
    stroke: rgba(255, 255, 255, 0.6); fill: none;
}
.ds-panel .sidebar-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 閉じた状態: アイコンレールだけの R28 ピル（§07 CLOSED） ──
   開閉は旧実装と同じく #appSidebar の .collapsed で切り替える
   （js/pages/index.js の sidebarToggleBtn ハンドラを無改修で流用）。 */
.ds-panel.collapsed { width: 72px; }
.ds-panel.collapsed .sidebar-header { justify-content: center; padding: 18px 0 8px; }
.ds-panel.collapsed .sidebar-brand { display: none; }
.ds-panel.collapsed .sidebar-menu { padding: var(--sp-4) 0; align-items: center; }
.ds-panel.collapsed .sidebar-item {
    width: 40px; height: 40px; justify-content: center; padding: 0; gap: 0;
    border-radius: var(--r-icon);
}
.ds-panel.collapsed .sidebar-item.ds-active { border-radius: var(--r-icon); }
.ds-panel.collapsed .sidebar-item span,
.ds-panel.collapsed .conn-badge span:not(.dot),
.ds-panel.collapsed #activeEnvLabel,
.ds-panel.collapsed .sidebar-user span { display: none; }
.ds-panel.collapsed .sidebar-divider { width: 40px; margin: 10px auto; }
.ds-panel.collapsed .sidebar-footer { align-items: center; padding: 10px 0 14px; }
.ds-panel.collapsed .conn-badge {
    width: auto; height: auto; padding: 6px; border: none; background: transparent;
}
/* 閉じた状態（アイコンレール）は緑の点だけ。開閉の余地が無いので
   まとめ行の展開リストは畳んだまま出さない（.conn-group-caret は
   上の span:not(.dot) で一緒に消える） */
.ds-panel.collapsed .conn-group-toggle { width: auto; cursor: default; }
.ds-panel.collapsed .conn-group-toggle:hover { background: transparent; }
.ds-panel.collapsed .conn-group-list { display: none; }
.ds-panel.collapsed .sidebar-user { justify-content: center; padding: 0; }

/* ── 幅のドラッグ調整（markup は js/ds/sidebar.js） ──
   パネルの右端に掴みしろを置く。線は既定では出さず、hover / フォーカス /
   ドラッグ中だけ見せる。折りたたみ中は幅が固定なので出さない。 */
.ds-panel-resizer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 10px; z-index: 2;
    cursor: col-resize; touch-action: none;
}
.ds-panel-resizer::after {
    content: ''; position: absolute; top: 14px; bottom: 14px; right: 3px; width: 2px;
    border-radius: 2px; background: transparent; transition: background 0.2s ease;
}
.ds-panel-resizer:hover::after,
.ds-panel-resizer:focus-visible::after,
.ds-panel-resizer.dragging::after { background: rgba(255, 255, 255, 0.30); }
.ds-panel-resizer:focus-visible { outline: none; }
.ds-panel.collapsed .ds-panel-resizer { display: none; }
/* ドラッグ中は width のトランジションを切る（指に追従させる） */
.ds-panel.no-transition { transition: none; }

/* 会話履歴（#historyDrawer）はチャット画面にしか無いため、DS 版の
   スタイル（パネルの右に開く 2 列目 §07 OPEN + HISTORY）は
   pages/index.css 側に置いている。 */