/**
 * ============================================================================
 * 세션 목록 (사이드바) — 두 얼굴이 같은 원본을 쓴다
 * ============================================================================
 *
 * `bundleAssets.mjs` 의 `SHARED_INTO_LEGACY` 가 이 파일을 두 벌 모두에 넣는다.
 * `sgax_sessions.js` 와 짝이다 — 렌더러가 한 벌이면 스타일도 한 벌이어야 한다.
 *
 * 옮겨 오기 전에는 두 `sgax_core.css` 에 규칙 17개가 **한 글자도 안 다르게** 각각
 * 들어 있었다(2026-09-07 확인). 우연히 같았을 뿐이라 한쪽만 고쳐질 자리였다.
 *
 * 로드 순서: `sgax_core.css` 다음 — `--sidebar-text` 같은 변수를 그쪽이 정의한다.
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
   한 줄의 크기 — 운영팀 요청으로 80% (2026-09-10)

   클릭 영역(=하이라이트되는 `.session-item` 상자)과 그 안의 칩·제목을 같은 비율로
   줄인다. **여기 한 숫자만 고치면 된다** — 값을 여러 규칙에 흩어 적으면 다음에
   조정할 때 한둘이 남는다.

   글자는 사용자 설정(`--font-scale`)에 이 값을 **곱한다.** 100% 기준 실측:
   줄 높이 52px → 42.1px · 제목 17.3px → 13.8px · 칩 11.5px → 9.2px.

   **`:root` 에 둔다.** `.session-list` 안에 두면 그 밖에서 줄을 그릴 때 `calc()` 가
   통째로 무효가 되고 `padding` 이 0 이 된다 — 줄이 납작해지는데 원인이 안 보인다.

   목록 바깥 여백(`.session-list` 의 `padding`)은 안 건드린다 — 그걸 줄이면 줄이
   오히려 **넓어진다.**
   ---------------------------------------------------------------------------- */
:root {
  --session-scale: 0.8;
}

.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* 비로그인 상태 로그인 프롬프트 */
.session-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 16px;
}

.session-login-text {
  color: var(--sidebar-text);
  font-size: var(--font-size-base);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.session-login-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 32px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.session-login-btn:hover {
  opacity: 0.9;
}

.session-item {
  padding: calc(12px * var(--session-scale));
  border-radius: calc(8px * var(--session-scale));
  cursor: pointer;
  margin-bottom: calc(4px * var(--session-scale));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.session-item.active {
  background: rgba(var(--primary-rgb), 0.3);
}

.session-title {
  font-size: calc(var(--font-size-base) * var(--session-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.session-delete {
  opacity: 0;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: calc(4px * var(--session-scale));
  font-size: calc(var(--font-size-base) * var(--session-scale));
}

.session-item:hover .session-delete {
  opacity: 1;
}

/* 세션 목록 아이템 구조 */
.session-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--session-scale));
}

.session-item-main {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--session-scale));
  min-width: 0;
}

.session-badge {
  flex-shrink: 0;
  font-size: calc(9.6px * var(--font-scale) * var(--session-scale));
  padding: calc(1px * var(--session-scale)) calc(6px * var(--session-scale));
  border-radius: calc(4px * var(--session-scale));
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  font-weight: 500;
  white-space: nowrap;
}

.session-item.active .session-badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.session-subtitle {
  font-size: calc(9.6px * var(--font-scale) * var(--session-scale));
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-item.active .session-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* ----------------------------------------------------------------------------
   유형 칩의 색 (통합 목록 · 운영팀 시안 2026-09-07)

   값은 서버가 정한다(`services/sessionMeta.mjs` `sessionKind`) — 프론트는 색만 준다.
   모르는 유형은 클래스가 안 붙어 위의 기본색으로 남는다. 새 유형이 늘어도 안 깨진다.
   ---------------------------------------------------------------------------- */

.session-badge-celeb {
  background: rgba(244, 114, 182, 0.16);
  color: #f9a8d4;
}

.session-badge-direct {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

.session-badge-support {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}

/* 활성 줄은 배경이 밝아 칩 색을 흰 계열로 되돌린다 (기본 규칙과 같은 뜻) */
.session-item.active .session-badge-celeb,
.session-item.active .session-badge-direct,
.session-item.active .session-badge-support {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}