/* [CS-RESET-100] reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--ff);
  font-size: var(--fs);
  color: var(--c-fg);
  background: var(--c-bg);
  line-height: 1.5;
}
button, input, textarea {
  font: inherit;
  color: inherit;
}
ul { list-style: none; padding: 0; margin: 0; }
textarea { resize: none; }

/* [CS-LAYOUT-100] 3-column app — 페이지 자체 스크롤 X. 내부 스크롤 영역만
   (UI-CMP-107 sessions / UI-CMP-111 messages / UI-CMP-139 inspector body).
   양쪽 모두 rail 32 + body 288 = 320 패턴 (mirror). collapsed = rail 32만.
   collapsed 상태는 [CS-PAGE-103] 참조 (body class 가 --w-left/--w-right 갱신).
   main 최소 보장 폭 = 480px → viewport 1280 미만 = drawer 모드 (CS-PAGE-103).
   원래 임계 = 1120 (320+480+320 grid 합산) 였으나 main 자식 (composer 등)
   min-content 가 main 1fr 를 540 까지 늘리는 케이스가 있어 사용자 측 cutoff
   1177 발견 → 안전 마진 + HD laptop 임계 (1280) 로 일괄 상향. */
.app {
  display: grid;
  grid-template-columns: var(--w-left, 320px) minmax(480px, 1fr) var(--w-right, 320px);
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 160ms ease;
}

/* [CS-CMP-103] sidebar (.sidebar = rail 32 + body 1fr) — inspector 와 mirror.
   rail 항상 보임 (collapsed 시에도 32px 유지). body 만 토글. */
.sidebar {
  background: var(--c-bg-2);
  border-right: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 32px 1fr;
  position: relative; /* .splitter--left absolute 기준 (UI-CMP-107 의 폭 조절 상호작용, JS-CMP-111) */
  min-width: 0;
  min-height: 0;
}
.sidebar__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--c-border);
}

.sidebar__hd {
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.sidebar__hd-action {
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--rd);
  line-height: 1;
}
.sidebar__hd-action:hover { background: var(--c-bg-3); color: var(--c-fg); }
.sidebar__hd-action.is-active { background: var(--c-bg-3); color: var(--c-fg); }

.brand {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* [CS-CMP-122] sidebar actions row (UI-CMP-150) — header 와 sessions 사이
   버튼 영역. 앞으로 버튼 계열은 여기 추가. flex 가로 배치 + 자식 1fr 균등
   분할 (양쪽 정렬, 여러 버튼이면 동일 폭). */
.sidebar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.sidebar__actions > * {
  flex: 1;
}

.sessions {
  overflow-y: auto;
  flex: 1;
  min-height: 0;   /* min-height auto 함정 회피 — 내부 스크롤 작동 보장 */
  padding: var(--sp-2);
  /* 스크롤바 = 얇고 절제 */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.sessions::-webkit-scrollbar { width: 8px; }
.sessions::-webkit-scrollbar-track { background: transparent; }
.sessions::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 4px; }
.sessions::-webkit-scrollbar-thumb:hover { background: var(--c-fg-3); }

/* [CS-CMP-102] sidebar item — 트리 node row (.session-node > .session-item).
   .session-node 의 --depth (JS 가 셋) 가 padding-left 좌측 들여쓰기 결정. */
.session-node { list-style: none; }
.session-item {
  padding: var(--sp-2) var(--sp-3);
  padding-left: calc(var(--sp-2) + var(--depth, 0) * 14px);
  border-radius: var(--rd);
  cursor: pointer;
  color: var(--c-fg-2);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.session-item:hover { background: var(--c-bg-3); color: var(--c-fg); }
.session-item.is-active { background: var(--c-bg-3); color: var(--c-fg); }
.session-item__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* [CS-CMP-116] subtree depth badge (UI-CMP-134) — 자손 있을 때만, "↳N" */
.session-item__depth {
  font-size: 10px;
  color: var(--c-fg-3);
  font-family: var(--ff-mono);
  padding: 1px 5px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* [CS-CMP-113] expand toggle (▸ / ▾) — 자식 없으면 spacer */
.session-item__tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-size: 10px;
  color: var(--c-fg-3);
  flex-shrink: 0;
  user-select: none;
}
.session-item__tog:hover:not(.is-empty) { color: var(--c-fg); }
.session-item__tog.is-empty { color: transparent; pointer-events: none; }

/* 자식 ul = 들여쓰기 자체는 .session-item padding-left 가 함. ul 은 정렬만. */
.session-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 자식 nodes 사이 약간의 간격 */
.session-node + .session-node { margin-top: 2px; }

/* [CS-CMP-114] drag & drop feedback (UI-CMP-102 drag, UI-CMP-107 root drop) */
.session-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.session-item.is-drop-target {
  outline: 2px dashed var(--c-accent);
  outline-offset: -2px;
  background: var(--c-bg-3);
}
.sessions.is-drop-root {
  background: var(--c-bg-3);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

/* [CS-CMP-104] main panel (.main / .main__hd / .title) */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;   /* messages 내부 스크롤 작동 보장 (auto 함정 회피) */
  overflow: hidden; /* main 자식의 min-content 가 main grid track 폭 강제 차단 */
}

/* main 자식 (composer/messages/main__hd) min-content 가 main 폭 강제 차단.
   grid mode (≥1280) 와 drawer mode (<1280) 둘 다에서 적용. composer__row
   의 grid track 도 별도 min-width: 0 박혀 있어야 한다 (line 309 의 minmax(0,1fr) 외). */
.composer,
.composer__row,
.messages,
.main__hd {
  min-width: 0;
  max-width: 100%;
}
.composer textarea {
  width: 100%;
  min-width: 0;
}

.main__hd {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-fg-2);
  font-size: var(--fs-sm);
}

/* [CS-PAGE-100] messages list */
.messages {
  overflow-y: auto;
  flex: 1;
  min-height: 0;   /* min-height auto 함정 회피 — 내부 스크롤 작동 보장 */
  min-width: 0;    /* 좁은 main 에서 자식 (bubble) 이 grid item 폭 강제 못하도록 */
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* 스크롤바 = 얇고 절제 */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.messages::-webkit-scrollbar { width: 10px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 5px; }
.messages::-webkit-scrollbar-thumb:hover { background: var(--c-fg-3); }

/* [CS-CMP-123] search view (UI-CMP-152) — main 전체 "검색 모드".
   main 안 flex column 의 자식. 검색 모드 진입 시 = title (UI-CMP-110)
   '검색' + status (UI-CMP-113) hidden + messages (UI-CMP-111) hidden +
   composer (UI-CMP-100) hidden + 본 view 만 main__hd 아래 전부 차지. =
   openSession 의 카운터파트 패턴. ([hidden] 룰: .messages / .composer 가
   display:flex 박혀있어 hidden 속성 무시됨 → 명시 [hidden] override 필요) */
.messages[hidden],
.composer[hidden] { display: none !important; }
.search-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: var(--sp-5);
  gap: var(--sp-4);
}
.search-view[hidden] { display: none; }
.search-view__input {
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  padding: var(--sp-3);
  color: var(--c-fg);
  outline: none;
  font-size: var(--fs-md);
}
.search-view__input:focus { border-color: var(--c-border-2); }
.search-view__results {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.search-result {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd);
  cursor: pointer;
  color: var(--c-fg-2);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.search-result:hover {
  background: var(--c-bg-2);
  border-color: var(--c-border);
  color: var(--c-fg);
}
.search-result.is-empty {
  color: var(--c-fg-3);
  text-align: center;
  cursor: default;
}
.search-result.is-empty:hover { background: transparent; border-color: transparent; }

/* [CS-CMP-101] message bubble */
.msg {
  max-width: 760px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd-lg);
  white-space: pre-wrap;
  word-break: break-word;
}
.msg--user {
  align-self: flex-end;
  background: var(--c-user-bg);
  border: 1px solid var(--c-border);
}
.msg--assistant {
  align-self: flex-start;
  background: var(--c-assistant-bg);
  color: var(--c-fg);
}
.msg--error {
  align-self: flex-start;
  color: var(--c-error);
  font-size: var(--fs-sm);
}

/* [CS-CMP-100] composer */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}
.composer__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: stretch;
}
.composer textarea {
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  padding: var(--sp-3);
  color: var(--c-fg);
  outline: none;
}
.composer textarea:focus { border-color: var(--c-border-2); }

/* drag-over hint — 점선 강조 */
.composer.is-dragover {
  outline: 2px dashed var(--c-accent);
  outline-offset: -4px;
}

/* [CS-CMP-118] UI-FORM-102 클립 버튼 + UI-FORM-103 첨부 chips */
.composer__attach {
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  color: var(--c-fg-2);
  font-size: 16px;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.composer__attach:hover { background: var(--c-bg-3); color: var(--c-fg); }

.composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.composer__chips[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  padding: 4px 6px 4px 4px;
  max-width: 220px;
  font-size: 12px;
}
.chip--image img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.chip--file .chip__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.chip__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip__remove {
  background: transparent;
  border: 0;
  color: var(--c-fg-2);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.chip__remove:hover { color: var(--c-fg); }

/* [CS-CMP-119] UI-CMP-135 AI 설정 pill (composer 우측) + UI-CMP-136 popover */
.composer__row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.composer__ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  color: var(--c-fg-2);
  padding: 0 10px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer__ai:hover { background: var(--c-bg-3); color: var(--c-fg); }
.composer__ai-icon { font-size: 13px; }
.composer__ai-summary { font-feature-settings: "tnum"; }

.ai-popover {
  position: fixed;
  z-index: 70;
  width: 320px;
}
.ai-popover[hidden] { display: none !important; }
.ai-popover__card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 70vh;
  overflow: auto;
}
.ai-popover__group { display: flex; flex-direction: column; gap: 6px; }
.ai-popover__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-fg-2);
}
.ai-popover__hint {
  font-size: 11px;
  color: var(--c-fg-3);
}
.ai-popover__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* [UI-CMP-175] LV 슬라이더 (P4 폴리시) — 기본 모드 역량 선택. */
.ai-lv-slider {
  width: 100%;
  margin: 2px 0 4px;
  accent-color: var(--c-accent, #5b8def);
  cursor: pointer;
}
.ai-popover__models {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-popover__group-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-fg-2);
  margin-top: 4px;
}
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: var(--c-bg-2);
  color: var(--c-fg);
}
.ai-pill input { accent-color: var(--c-accent); }
.ai-pill:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-bg-3);
}
.ai-pill.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* [UI-CMP-179] popover 스킬 섹션 (접이식, 기본 접힘) */
.ai-popover__skills {
  border-top: 1px solid var(--c-border);
  padding-top: 8px;
  margin-top: 2px;
}
.ai-popover__skills-sum {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-fg-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ai-popover__skills-sum::-webkit-details-marker { display: none; }
.ai-popover__skills-sum::before {
  content: "▸";
  font-size: 9px;
  transition: transform 0.12s;
}
.ai-popover__skills[open] .ai-popover__skills-sum::before { transform: rotate(90deg); }
.ai-skills-badge { color: var(--c-accent); font-weight: 600; }
.ai-skills-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.ai-skill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.ai-skill:hover { background: var(--c-bg-2); }
.ai-skill.is-on { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.ai-skill input { accent-color: var(--c-accent); flex-shrink: 0; }
.ai-skill__name { color: var(--c-fg); min-width: 0; }

/* 메시지 bubble 안 첨부 표시 — body 위쪽 */
.msg__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.msg__att {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  background: var(--c-bg-2);
  padding: 4px;
  max-width: 260px;
}
.msg__att-img {
  max-width: 240px;
  max-height: 200px;
  border-radius: 4px;
  display: block;
}
.msg__att-icon {
  font-size: 18px;
  padding: 0 4px;
}
.msg__att-name {
  font-size: 12px;
  color: var(--c-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.msg__att-name:hover { color: var(--c-fg); text-decoration: underline; }

/* [CS-CMP-105] buttons (.btn / .btn--primary) */
.btn {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-fg);
  border-radius: var(--rd);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.btn:hover { border-color: var(--c-border-2); }
.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-fg);
  border-color: var(--c-accent);
}
.btn--primary:hover { filter: brightness(1.05); }

.title {
  font-weight: 500;
  color: var(--c-fg);
  /* 좁은 main 에서 긴 세션 제목이 hd 폭 강제 늘리지 않도록 ellipsis. */
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.main__hd #hd-status { margin-left: auto; flex-shrink: 0; }

/* [CS-CMP-126] Phase 1.5.0 main __hd 의 kind-pill (UI-CMP-167).
   data-kind="standalone" = ▣ "PM 모드 전환" (클릭 가능, hover 활성)
   data-kind="pm"         = 📁 "PM 모드" indicator (disabled, accent 강조)
   data-kind="hidden" or hidden 속성 = display:none. */
.kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg-2);
  color: var(--c-fg-2);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.kind-pill[hidden] { display: none !important; }
.kind-pill__icon { font-size: 12px; line-height: 1; }
.kind-pill__label { font-size: 12px; }
.kind-pill[data-kind="standalone"]:hover {
  background: var(--c-bg-3);
  color: var(--c-fg);
  border-color: var(--c-fg-2);
}
.kind-pill[data-kind="pm"] {
  background: color-mix(in oklch, var(--c-accent) 14%, transparent);
  color: var(--c-accent);
  border-color: color-mix(in oklch, var(--c-accent) 40%, var(--c-border));
  cursor: default;
}
.kind-pill[data-kind="pm"]:hover {
  background: color-mix(in oklch, var(--c-accent) 14%, transparent);
  color: var(--c-accent);
}
.kind-pill:disabled { cursor: default; }

/* sidebar session-item 의 PM kind 표시 — data-kind="pm" row 만 좌측에 📁 small dot.
   현재는 색 강조만 (icon 추가는 후속). */
.session-item[data-kind="pm"] .session-item__title::before {
  content: "📁 ";
  font-size: 11px;
  opacity: 0.85;
}
.session-item[data-kind="teammate"] .session-item__title::before {
  content: "🧑 ";
  font-size: 11px;
  opacity: 0.85;
}

/* [CS-CMP-127] Phase 1.5.1 — 팀원 풀 패널 (UI-CMP-169~171). PM 모드일 때
   inspector aside agent 탭 안에 표시.
   ※ display:flex 가 [hidden] attribute 의 default display:none 을 cascading
     으로 이김 → 명시적 override 박음 ([[feedback_html_hidden_vs_display_flex]]). */
.teammates-pool[hidden],
.inspector__placeholder[hidden] { display: none !important; }
.teammates-pool { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); }
.teammates-pool__hd { display: flex; flex-direction: column; gap: 2px; }
.teammates-pool__title { font-size: 13px; font-weight: 600; margin: 0; color: var(--c-fg); }
.teammates-pool__sub { font-size: 11px; color: var(--c-fg-2); margin: 0; }
.teammates-pool__form { display: flex; flex-direction: column; gap: 6px; }
.teammates-pool__label { font-size: 11px; color: var(--c-fg-2); }
.teammates-pool__select,
.teammates-pool__input {
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-fg);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
}
.teammates-pool__spawn { margin-top: 4px; font-size: 12px; padding: 6px 10px; }
.teammates-pool__divider { border-top: 1px solid var(--c-border); margin: 4px 0; }
.teammates-pool__list-title { font-size: 12px; font-weight: 500; margin: 0; color: var(--c-fg); }
.teammates-pool__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }

/* [UI-CMP-172/173] 조직 활동 = 카드 그리드 (anti-slop: 톤 절제).
   inspector(좁음=1열) + teammate 메인(넓음=다열) 동일 컴포넌트 = .org-grid + .org-card. */
.org-activity { display: flex; flex-direction: column; gap: 6px; }
.org-activity__hd { display: flex; align-items: center; justify-content: space-between; }
.org-activity__refresh {
  background: none; border: none; color: var(--c-fg-3); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 4px;
}
.org-activity__refresh:hover { color: var(--c-fg); background: var(--c-bg-3); }

/* 조직 활동 = 데이터 테이블 (시간/발신/유형/수신/요청/응답) + 필터 */
.org-table__filters { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--c-fg-2); }
.org-table__filters label { display: flex; align-items: center; gap: 4px; }
.org-table__select {
  background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 4px;
  color: var(--c-fg); font: inherit; font-size: 11px; padding: 3px 6px; max-width: 140px;
}
.org-table-wrap { overflow: auto; border: 1px solid var(--c-border); border-radius: 6px; }
.org-table-wrap--compact { max-height: 300px; }
.org-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.org-table th {
  text-align: left; padding: 6px 8px; background: var(--c-bg-2); color: var(--c-fg-2);
  font-weight: 600; position: sticky; top: 0; border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.org-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-border); color: var(--c-fg); vertical-align: top; }
.org-table tbody tr:last-child td { border-bottom: none; }
.org-row.is-clickable { cursor: pointer; }
.org-row.is-clickable:hover td { background: var(--c-bg-3); }
.org-table__c-time { width: 46px; }
.org-table__c-type { width: 72px; }
.org-table__c-route { width: 150px; }
.org-td-time { color: var(--c-fg-3); white-space: nowrap; }
.org-td-route { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: var(--c-fg-2); }
.org-td-kind { white-space: nowrap; font-size: 10px; }
.org-row--reply .org-td-kind, .org-row--report .org-td-kind { color: var(--c-fg-2); }
.org-td-content {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.org-row--reply .org-td-content { color: var(--c-fg-2); }

/* [UI-CMP-173] teammate 세션 메인 = 조직 활동 테이블 뷰 (채팅창 대신) */
.org-grid-view { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); flex: 1; min-height: 0; }
.org-grid-view[hidden] { display: none !important; }
.org-grid-view__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.org-grid-view__title { font-size: 14px; font-weight: 600; color: var(--c-fg); display: block; }
.org-grid-view__sub { font-size: 11px; color: var(--c-fg-2); display: block; margin-top: 2px; }
.org-grid-view .org-table-wrap { flex: 1; min-height: 0; }
.teammates-pool__item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 4px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.teammates-pool__item:hover { background: var(--c-bg-3); border-color: var(--c-fg-2); }
.teammates-pool__item-role {
  font-size: 10px; color: var(--c-fg-2); font-family: var(--ff-mono);
  background: var(--c-bg-3); padding: 1px 6px; border-radius: 3px;
}
.teammates-pool__empty { font-size: 12px; }

/* [CS-CMP-106] status indicator (sidebar item / main hd / bubble 공통) */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-fg-2);
  font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}
.status:empty { display: none; }
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.status[data-phase="done"]::before,
.status[data-phase=""]::before { animation: none; opacity: 0.4; }
.status[data-phase="thinking"]::before { background: #c0c0c0; }
.status[data-phase="writing"]::before  { background: #d8d8d8; }
.status[data-phase="tool"]::before     { background: #e0a060; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* [CS-CMP-107] bubble detail panel ("자세히 보기" 토글) */
.msg__detail {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}
.msg__detail summary {
  cursor: pointer;
  color: var(--c-fg-3);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  user-select: none;
}
.msg__detail summary:hover { color: var(--c-fg-2); }
.msg__detail-content {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-fg-2);
  white-space: pre-wrap;
  max-height: 360px;
  overflow-y: auto;
}
.msg__detail-content .row { margin-bottom: var(--sp-2); }
/* [Gap 4] 도구 실행 결과 에러 row 강조 */
.msg__detail-content .row--error {
  background: rgba(255, 90, 90, 0.08);
  border-radius: var(--rd);
  padding: 2px 4px;
}
/* [Gap 1] turn 중단 marker */
.msg__interrupted {
  margin-top: var(--sp-2);
  font-size: 11px;
  color: var(--c-fg-3);
  letter-spacing: 0.02em;
}
/* [Gap 5] slash command 피드백 = system 메시지 */
.msg--system .msg__body {
  font-size: var(--fs-sm);
  color: var(--c-fg-2);
  white-space: pre-wrap;
  font-family: var(--ff-mono);
  background: var(--c-bg-2);
  border-left: 2px solid var(--c-border);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd);
}
/* [Gap 1] streaming 중 send→중지 버튼 */
.btn--stop {
  background: rgba(255, 90, 90, 0.14);
  border-color: rgba(255, 90, 90, 0.4);
  color: #ff8080;
}
.msg__detail-content .row__type {
  display: inline-block;
  padding: 1px 5px;
  background: var(--c-bg-3);
  border-radius: 3px;
  margin-right: var(--sp-2);
  color: var(--c-fg);
}

/* [CS-CMP-108] context menu (sidebar item 우클릭 = UI-CMP-116/117) */
.ctx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: var(--fs-sm);
}
.ctx-menu__item {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--c-fg);
  user-select: none;
}
.ctx-menu__item:hover { background: var(--c-bg-2); }
.ctx-menu__item.is-danger { color: var(--c-danger, #c54040); }
.ctx-menu__item.is-danger:hover { background: rgba(197, 64, 64, 0.08); }

/* [CS-CMP-109] sidebar item pin indicator (s.pinned_at 있을 때) */
.session-item__pin {
  font-size: 11px;
  opacity: 0.85;
  margin-right: var(--sp-2);
}
.session-item.is-pinned { background: var(--c-bg-2); }

/* [CS-CMP-111] profile card (UI-CMP-120) — sidebar 하단 = avatar + 닉네임 + 설정 버튼 */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-2);
  min-width: 0;
}
.profile-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg-3);
  border: 1px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-fg-2);
  flex-shrink: 0;
}
.profile-card__name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-card__settings,
.profile-card__notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rd);
  color: var(--c-fg-2);
  text-decoration: none;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.profile-card__settings:hover,
.profile-card__notify:hover { background: var(--c-bg-3); color: var(--c-fg); }
.profile-card__notify.has-unread { color: var(--c-accent); }

/* [CS-CMP-115] session picker modal (UI-CMP-126/127/128/129) — body 자식 fixed */
.session-picker[hidden] { display: none !important; }
.session-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--sp-5) var(--sp-5);
}
.session-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.session-picker__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--rd-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.session-picker__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.session-picker__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-fg);
}
.session-picker__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.session-picker__close:hover { color: var(--c-fg); }
.session-picker__input {
  margin: var(--sp-3) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  font-size: var(--fs-sm);
  color: var(--c-fg);
  outline: none;
}
.session-picker__input:focus { border-color: var(--c-border-2); }
.session-picker__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--sp-2) var(--sp-2);
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.session-picker__list::-webkit-scrollbar { width: 8px; }
.session-picker__list::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 4px; }
.session-picker__item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd);
  font-size: var(--fs-sm);
  color: var(--c-fg);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-picker__item.is-focus { background: var(--c-bg-3); }
.session-picker__item.is-root { color: var(--c-fg-2); font-style: italic; }
.session-picker__empty {
  padding: var(--sp-3);
  color: var(--c-fg-3);
  font-size: var(--fs-sm);
  text-align: center;
  list-style: none;
}

/* ========================================================================
 * [CS-PAGE-103] 3-column layout collapsed states + drawer mode.
 * body class 가 --w-left / --w-right 를 override (CS-LAYOUT-100 의 var grid).
 * 양쪽 모두 rail 32px 유지 + body 토글 (mirror 패턴 — 일관성 우선).
 * 영속 = localStorage `aice.layout.chat.left/right` (JS-CMP-110).
 * 단축키 = Ctrl+B (좌) / Ctrl+J (우).
 *
 * Drawer mode @media (max-width: 1279px) — main 깨짐 회피 안전 임계.
 * 사이드바 = position fixed overlay (main 위로 떠서 가림). main = 100vw.
 * 사이드바가 main 을 가려도 깨짐 방지 (사용자 요청).
 * ====================================================================== */
body.is-left-collapsed  { --w-left:  32px; }
body.is-right-collapsed { --w-right: 32px; }

/* sidebar 는 그대로 (좌 세로 rail + 우 body). inspector 는 5-13 재배치 후
   = body 안 가로 rail header 구조라 inspector__body 자체는 hidden X (rail
   header 가 그 안에 있음). collapsed 룰은 CS-CMP-120 block 안 정의. */
body.is-left-collapsed .sidebar    { grid-template-columns: 32px 0; }
body.is-left-collapsed  .sidebar__body  { display: none; }

/* drawer mode 의 본 정의는 main.css 의 끝 (CS-PAGE-103 drawer mode override
   block) 으로 옮겨 cascade 우선 보장. 본 자리에는 placeholder 만 두지 않음. */

/* ========================================================================
 * [CS-CMP-120] sidebar rail (UI-CMP-145/146) + inspector aside (UI-CMP-137)
 * + rail/탭 (UI-CMP-138/140/141/142) + body (UI-CMP-139) + collapse 토글
 * (UI-CMP-143/144). 좌우 mirror 패턴.
 * Phase 0 = inspector body 안 콘텐츠는 모두 placeholder (개발 중).
 * ====================================================================== */

/* 좌측 sidebar rail (UI-CMP-145) — inspector rail 과 mirror */
.sidebar__rail {
  background: var(--c-bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2) 0;
  gap: var(--sp-2);
}
.sidebar__tab {
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--rd);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  position: relative;
}
.sidebar__tab:hover { background: var(--c-bg-3); color: var(--c-fg); }
.sidebar__tab[aria-selected="true"] {
  color: var(--c-fg);
  background: var(--c-bg-3);
}
.sidebar__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  /* 좌측 rail 의 활성 탭 accent 는 우측 (body 쪽) 가장자리 */
  right: -2px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.sidebar__rail-spacer { flex: 1; }

/* (5-13 폐기) .sidebar__collapse / .inspector__collapse = UI-CMP-143/144
   삭제로 selector 사용처 X. 삭제. 양쪽 동시 토글은 UI-CMP-154 가 처리. */

/* inspector container (UI-CMP-137) — 우측 사이드바.
   기본 폭 = var(--w-right, 320). 내부 = body (UI-CMP-139) 1개 (수직 flex).
   collapsed 시 = inspector 폭 32 + body 안 rail header (UI-CMP-138, 가로) 만
   보이고 hd + panel 은 hidden. rail header 안 토글 (UI-CMP-154) 만 노출 = 화면
   우측 끝. */
.inspector {
  background: var(--c-bg-2);
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative; /* .splitter--right absolute 기준 (UI-CMP-137 의 폭 조절 상호작용, JS-CMP-111) */
  overflow: hidden;
}

/* [CS-CMP-121] splitter — sidebar (UI-CMP-104/107) 우측 / inspector
   (UI-CMP-137) 좌측 가장자리 drag handle. 별도 UI 라벨 부여 X (mind-eye
   룰 위반 회피). UI-CMP-107 / UI-CMP-137 의 가장자리 상호작용으로 흡수.
   6px hit area + 가운데 2px accent. drag = JS-CMP-111. collapsed (rail 32)
   에서만 hidden — drawer mode + expanded 도 활성. */
.splitter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
  user-select: none;
  transition: background 120ms ease;
}
.splitter::before {
  /* 8px hit area + 가운데 가시 띠. */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
}
.splitter:hover::before,
.splitter.is-dragging::before {
  background: var(--c-accent);
}
.splitter--left  { right: -3px; }
.splitter--right { left:  -3px; }

/* collapsed = splitter 숨김 (폭 변경 무의미) + inspector body 안의 hd + panel
   hidden + rail header 만 보임 (UI-CMP-154 토글 유지 = expand 경로). */
body.is-left-collapsed  .splitter--left  { display: none; }
body.is-right-collapsed .splitter--right { display: none; }
body.is-right-collapsed .inspector__hd,
body.is-right-collapsed .inspector__panel { display: none; }
/* collapsed 시 rail header 안 탭 hidden, UI-CMP-154 토글만 보임 (--toggle 변형).
   border-bottom (rail) / border-left (--toggle) 모두 제거 = sidebar rail
   (UI-CMP-145/146) 처럼 깔끔한 아이콘 only. 토글은 32px rail 안 가로 가운데. */
body.is-right-collapsed .inspector__tab:not(.inspector__tab--toggle),
body.is-right-collapsed .inspector__rail-spacer { display: none; }
body.is-right-collapsed .inspector__rail {
  border-bottom: 0;
  justify-content: flex-end;  /* 토글 우측 끝 고정 — 폭 transition 중 위치 이동 방지 */
  padding: var(--sp-2) 2px;
}
body.is-right-collapsed .inspector__tab--toggle {
  border-left: 0;
  border-radius: var(--rd);
  margin-left: 0;
}

/* rail (UI-CMP-138) — body 상단 가로 bar. 탭 3 좌측 + spacer + UI-CMP-154 토글
   우측 끝 (= 화면 우측 끝, UI-CMP-146 sidebar 토글과 mirror). */
.inspector__rail {
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  width: 100%;
  min-width: 0;
  padding: 0 4px;
  gap: 2px;
  flex-shrink: 0;
}
.inspector__tab {
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--rd);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  position: relative;
}
.inspector__tab:hover { background: var(--c-bg-3); color: var(--c-fg); }
.inspector__tab[aria-selected="true"] {
  color: var(--c-fg);
  background: var(--c-bg-3);
}
/* 활성 탭 하단 작은 accent bar (가로 rail 이라 하단 띠 = sidebar 의 좌측 띠와 mirror) */
.inspector__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -2px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.inspector__rail-spacer { flex: 1; }

/* [UI-CMP-154 변형] inspector rail 우측 끝 토글 버튼 — 탭 X (active
   상태 / accent 띠 없음). UI-CMP-146 와 동일 ☰ 아이콘 + 좌측 구분선. */
.inspector__tab--toggle {
  margin-left: 4px;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
  flex-shrink: 0;
}
.inspector__tab--toggle::before { display: none !important; }

/* body (UI-CMP-139) — rail header + hd + panel. 부모 .inspector 의 flex column
   자식 = flex: 1 로 stretch. collapsed 시 hd + panel 만 hidden, rail header
   는 항상 보임 (UI-CMP-154 토글 노출 = expand 경로). */
.inspector__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.inspector__hd {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-fg-2);
  font-weight: 600;
  letter-spacing: -0.005em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector__panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.inspector__panel::-webkit-scrollbar { width: 8px; }
.inspector__panel::-webkit-scrollbar-track { background: transparent; }
.inspector__panel::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 4px; }

/* [collapse 모션 — 단계 분리] 좌/우 mirror.
   collapse/expand 시 콘텐츠 페이드 (80ms) ↔ 폭 transition (160ms) 을
   시간상 분리해서 짓이김 방지 + 모던 IDE panel 모션 (VS Code/JetBrains).
   JS-CMP-110 이 .sidebar / .inspector 에 .is-fading 클래스 토글:
   - collapse: is-fading add → 80ms 후 body.is-*-collapsed add + is-fading remove (CSS 가 display:none + 폭 transition)
   - expand:   is-fading add → body.is-*-collapsed remove + 160ms 후 is-fading remove
   prefers-reduced-motion 시 JS 가 단계 분기 폐기 (즉시 적용).
   좌측 = sidebar__body 통째 (display:none 박힘). 우측 = inspector 의 hd/panel/탭/spacer 개별. */
.sidebar__body {
  transition: opacity 80ms ease;
}
.sidebar.is-fading .sidebar__body {
  opacity: 0;
}
.inspector__hd,
.inspector__panel,
.inspector__tab:not(.inspector__tab--toggle),
.inspector__rail-spacer {
  transition: opacity 80ms ease;
}
.inspector.is-fading .inspector__hd,
.inspector.is-fading .inspector__panel,
.inspector.is-fading .inspector__tab:not(.inspector__tab--toggle),
.inspector.is-fading .inspector__rail-spacer {
  opacity: 0;
}

/* '개발 중' placeholder — settings 의 UI-CMP-133 와 시각 톤 통일 */
.inspector__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-fg-3);
  font-size: var(--fs-sm);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}
.inspector__placeholder-icon { font-size: 22px; opacity: 0.6; }
.inspector__placeholder-text { line-height: 1.45; max-width: 220px; }

/* ========================================================================
 * [CS-PAGE-103 — drawer mode override block]
 * 본 block 은 main.css 의 모든 다른 .sidebar / .inspector / .main / .composer
 * rule 보다 cascade 후순위로 정의되어 우선 적용됨. specificity 강화
 * (.app .sidebar, .app .inspector, .app .main) 로 다른 동등 specificity rule
 * 도 override.
 *
 * 적용 = viewport < 1280px (HD laptop 임계). 사이드바 = position fixed
 * overlay (main 위로). main = 100vw 차지 + padding 32 좌우 (rail 영역 비움).
 * 원래 1120 (grid 자연 합산) 였으나 main 자식 min-content 가 1fr 늘려서
 * 사용자 cutoff 1177 깨짐 → 1280 으로 안전 상향 (5-13 fix).
 * ====================================================================== */
@media (max-width: 1279px) {
  /* drawer mode = sidebar/inspector fixed (grid 에서 빠짐, auto-placement
     skip). main 만 grid 안. single column 으로 viewport 전체 받음. main 에
     grid-column: 1 명시는 불필요 (column 1 이 1fr 인 single track). */
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .main {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* main 자식 min-width/max-width 룰은 main.css 전역 (line ~165) 에 박혀
     있어 drawer mode 안에서 중복 X. 여기에는 drawer 특화 (padding) 만. */

  /* 사이드바/인스펙터 = position fixed overlay. */
  .app .sidebar,
  .app .inspector {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 50;
    box-shadow: 0 0 16px rgba(0,0,0,0.25);
    transition: width 160ms ease;
  }
  /* 좌측 sidebar — 좌측 fixed. right 강제 auto. */
  .app .sidebar {
    left: 0 !important;
    right: auto !important;
    width: var(--w-left, 320px);
  }
  /* 우측 inspector — 우측 fixed. left 강제 auto (default left:0 방지). */
  .app .inspector {
    right: 0 !important;
    left: auto !important;
    width: var(--w-right, 320px);
  }
  /* drawer 안 collapsed 시 rail 32 만 보이도록 width 강제. */
  body.is-left-collapsed  .app .sidebar  { width: 32px; }
  body.is-right-collapsed .app .inspector { width: 32px; }
  /* drawer 모드에서도 expanded 상태면 splitter 활성 = fixed overlay 사이드바
     자체의 폭 가변. collapsed 시는 body.is-*-collapsed 룰이 hide 처리. */
}

/* 매우 좁은 viewport (≤ 600px) — composer 안 ⚙pill 의 summary text 숨겨서
   가용 폭 확보 (composer 의 min-content 합 줄임). */
@media (max-width: 600px) {
  .app .composer__ai-summary { display: none; }
  .app .composer__ai { padding: 0 8px; max-width: 36px; }
}

/* ==========================================================================
 * [CS-CMP-124] notify subsystem styles —
 *   UI-CMP-155 banner stack (우하단 fixed)
 *   UI-CMP-156 banner item (좌측 accent + title + body + close)
 *   UI-CMP-157 inbox 🔔 button + count badge (profile-card 위에 정의)
 *   UI-CMP-158 inbox drawer (body 자식 overlay, 우측 슬라이드)
 *   UI-CMP-159 inbox item row
 * neutral + 좌측 accent stripe (anti-slop). 글래스 효과 X.
 * ====================================================================== */

/* 🔔 badge */
.notify-inbox__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--c-bg-2);
  pointer-events: none;
}

/* banner stack — 우하단 고정 column. composer 위 여백 확보. */
.notify-banner-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
  max-width: 360px;
}
.notify-banner {
  display: flex;
  align-items: stretch;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  pointer-events: auto;
  overflow: hidden;
  cursor: pointer;
  animation: notify-banner-in 180ms ease-out;
  min-width: 240px;
}
.notify-banner.is-leaving {
  animation: notify-banner-out 180ms ease-in forwards;
}
@keyframes notify-banner-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes notify-banner-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(20px); opacity: 0; }
}
.notify-banner__accent {
  width: 3px;
  background: var(--c-accent);
  flex-shrink: 0;
}
.notify-banner__body {
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
}
.notify-banner__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notify-banner__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notify-banner__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.notify-banner__close:hover { color: var(--c-fg); }

/* inbox drawer — body 자식 overlay. backdrop 클릭 닫기 + 우측 패널 슬라이드. */
.notify-drawer[hidden] { display: none !important; }
.notify-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: block;
}
.notify-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 180ms ease;
}
.notify-drawer.is-open .notify-drawer__backdrop { opacity: 1; }
.notify-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  background: var(--c-bg-2);
  border-left: 1px solid var(--c-border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.notify-drawer.is-open .notify-drawer__panel { transform: translateX(0); }
.notify-drawer__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.notify-drawer__title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-fg);
}
.notify-drawer__actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.notify-drawer__action {
  background: transparent;
  border: 0;
  color: var(--c-fg-2);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--rd);
  cursor: pointer;
}
.notify-drawer__action:hover { background: var(--c-bg-3); color: var(--c-fg); }
.notify-drawer__action--danger:hover { color: var(--c-danger, #c44); }
.notify-drawer__close {
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 4px;
  cursor: pointer;
  border-radius: var(--rd);
}
.notify-drawer__close:hover { color: var(--c-fg); background: var(--c-bg-3); }

.notify-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-2) transparent;
}
.notify-drawer__empty {
  padding: var(--sp-5) var(--sp-4);
  color: var(--c-fg-3);
  font-size: var(--fs-sm);
  text-align: center;
}
.notify-drawer__item {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.notify-drawer__item:hover { background: var(--c-bg-3); }
.notify-drawer__item.is-unread { background: color-mix(in srgb, var(--c-accent) 6%, transparent); }
.notify-drawer__item.is-unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-50%);
}
.notify-drawer__item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-fg);
  padding-left: 8px;
}
.notify-drawer__item-body {
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-fg-2);
  padding-left: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notify-drawer__item-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--c-fg-3);
  padding-left: 8px;
}

/* [CS-CMP-125] AskUserQuestion 카드 (UI-CMP-164/165/166) — path δ 정정
   (5-24) = claude AskUserQuestion 1:1 모방. ai bubble 안 inline. 1-4 sub-
   question 묶음. 각 question = header chip + question text + options 2-4 +
   multiSelect 지원 + preview side. 카드 전체 1 skip + 1 Other 자유입력. */
.msg__ask-user {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--rd);
  background: var(--c-bg-2, var(--c-bg));
}
.msg__ask-user-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--c-border);
}
.msg__ask-user-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.msg__ask-user-hd {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.msg__ask-user-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-fg-2);
  background: var(--c-bg-3);
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.msg__ask-user-icon {
  font-size: 16px;
  line-height: 1.2;
  color: var(--c-accent);
}
.msg__ask-user-question {
  flex: 1;
  min-width: 200px;
  font-size: var(--fs-sm);
  color: var(--c-fg);
  white-space: pre-wrap;
}
.msg__ask-user-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.msg__ask-user-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--c-fg);
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
}
.msg__ask-user-opt:hover {
  background: var(--c-bg-3);
  border-color: var(--c-accent);
}
.msg__ask-user-opt.is-selected {
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  border-color: var(--c-accent);
}
.msg__ask-user-opt:disabled {
  cursor: default;
  opacity: 0.5;
}
.msg__ask-user-opt--multi::before {
  content: "□ ";
  color: var(--c-fg-3);
  font-weight: 700;
}
.msg__ask-user-opt--multi.is-selected::before {
  content: "■ ";
  color: var(--c-accent);
}
.msg__ask-user-opt-label {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.msg__ask-user-opt-desc {
  font-size: 11px;
  color: var(--c-fg-3);
}
.msg__ask-user-preview {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  background: var(--c-bg-3);
  border-radius: var(--rd);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--c-fg-2);
  white-space: pre-wrap;
  max-height: 160px;
  overflow: auto;
}
.msg__ask-user-confirm {
  align-self: flex-start;
  background: var(--c-accent);
  border: 0;
  border-radius: var(--rd);
  padding: 4px 12px;
  color: var(--c-bg);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.msg__ask-user-confirm:disabled {
  opacity: 0.5;
  cursor: default;
}
.msg__ask-user-skip {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--c-border);
  border-radius: var(--rd);
  padding: 4px 12px;
  color: var(--c-fg-2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.msg__ask-user-skip:hover {
  background: var(--c-bg-3);
  color: var(--c-fg);
}
.msg__ask-user-skip:disabled {
  cursor: default;
  opacity: 0.5;
}
.msg__ask-user-other {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.msg__ask-user-other-input {
  flex: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--rd);
  padding: 6px 10px;
  font: inherit;
  color: var(--c-fg);
}
.msg__ask-user-other-input:disabled {
  opacity: 0.5;
}
.msg__ask-user-other-submit {
  background: var(--c-accent);
  border: 0;
  border-radius: var(--rd);
  padding: 6px 12px;
  color: var(--c-bg);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.msg__ask-user-other-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.msg__ask-user-status {
  font-size: 12px;
  color: var(--c-fg-2);
  padding-left: 2px;
}
.msg__ask-user--answered {
  border-left-color: var(--c-fg-3);
  background: color-mix(in srgb, var(--c-fg-3) 4%, transparent);
}

/* [CS-CMP-128] 에이전트 허브 (◉ 탭) — 요약 카드 (6-07 재배치) */
.agent-hub { display: flex; flex-direction: column; gap: var(--sp-3); }
.hub-card { border: 1px solid var(--c-border); border-radius: var(--rd-lg); background: var(--c-bg); padding: var(--sp-3); }
.hub-card__hd { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.hub-card__hd h3 { flex: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--c-fg); margin: 0; }
.hub-card__badge { color: var(--c-accent); font-weight: 600; font-size: 11px; }
.hub-card__manage { border: 1px solid var(--c-border-2); border-radius: var(--rd); background: var(--c-bg-3); color: var(--c-fg-2); font-size: 11px; padding: 3px 9px; cursor: pointer; }
.hub-card__manage:hover { border-color: var(--c-accent); color: var(--c-fg); }
.hub-card__body { font-size: 12px; color: var(--c-fg-2); line-height: 1.4; }
.hub-note { font-size: 11px; color: var(--c-fg-3); line-height: 1.5; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-border); border-radius: var(--rd); }

/* [CS-CMP-129] 에이전트 허브 모달 (amodal — session-picker 패턴, z 1000) */
.amodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 4vw 1rem; }
.amodal[hidden] { display: none; }
.amodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.amodal__card { position: relative; background: var(--c-bg); border: 1px solid var(--c-border-2); border-radius: var(--rd-lg); width: min(90vw, 30rem); min-width: 16rem; max-width: 95vw; height: auto; min-height: 10rem; max-height: 90vh; resize: both; overflow: auto; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.amodal__card--wide { width: min(90vw, 30rem); }   /* 6-07: 비율 초기 + resize:both (우하단 코너 드래그로 크기 조정) */
.amodal__hd { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.amodal__hd h2 { flex: 1; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-fg); }
.amodal__x { background: none; border: 0; color: var(--c-fg-3); font-size: 16px; cursor: pointer; line-height: 1; }
.amodal__new { border: 1px solid var(--c-accent); border-radius: var(--rd); background: none; color: var(--c-fg); font-size: 11px; padding: 3px 10px; cursor: pointer; }
.amodal__bd { padding: var(--sp-4); overflow-y: auto; }
.amodal__lbl { display: block; font-size: 11px; color: var(--c-fg-3); margin: var(--sp-3) 0 4px; }
.amodal__inp, .amodal__txt { width: 100%; background: var(--c-bg-2); border: 1px solid var(--c-border); color: var(--c-fg); border-radius: var(--rd); padding: 6px 8px; font-size: var(--fs-sm); font-family: inherit; }
.amodal__txt { resize: vertical; line-height: 1.5; }
.amodal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* [CS-CMP-130] 스킬 그리드 CRUD (스킬 관리 모달) */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-2); }
.skill-card { position: relative; border: 1px solid var(--c-border); border-radius: var(--rd); background: var(--c-bg); padding: var(--sp-3); }
.skill-card.is-on { border-color: var(--c-accent); background: var(--c-bg-2); }
.skill-card__top { display: flex; align-items: center; gap: 6px; cursor: pointer; padding-right: 30px; }
.skill-card__top input { accent-color: var(--c-accent); flex-shrink: 0; }
.skill-card__nm { font-size: 12px; font-weight: 600; color: var(--c-fg); }
.skill-card__ds { font-size: 10.5px; color: var(--c-fg-3); margin-top: 4px; line-height: 1.35; }
.skill-card__act { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; }
.skill-card__act button { background: none; border: 0; color: var(--c-fg-3); font-size: 11px; cursor: pointer; padding: 0; }
.skill-card__act button:hover { color: var(--c-fg); }
.skill-card__scope { margin-left: auto; font-size: 10px; color: var(--c-fg-3); border: 1px solid var(--c-border); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.skill-card.is-locked { opacity: .5; }
.skill-card.is-locked .skill-card__top { cursor: not-allowed; }
.skill-scope { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.skill-scope label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.skill-scope input { accent-color: var(--c-accent); }

/* popover 슬림 — 모델 모달 상세 버튼 */
.ai-popover__more { width: 100%; margin-top: var(--sp-2); border: 1px solid var(--c-border-2); border-radius: var(--rd); background: var(--c-bg-3); color: var(--c-fg-2); font-size: 11px; padding: 5px; cursor: pointer; }
.ai-popover__more:hover { border-color: var(--c-accent); color: var(--c-fg); }


/* 워크스페이스 파일 (W3, 6-08) */
.ws-files { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ws-files__bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--c-border); }
.ws-files__path { font-size: 11px; color: var(--c-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-files__bar-sp { flex: 1; }
.ws-files__btn { background: none; border: 1px solid var(--c-border); border-radius: var(--rd); color: var(--c-fg); font-size: 12px; padding: 2px 7px; cursor: pointer; }
.ws-files__btn:hover { background: var(--c-bg-2); }
.ws-files__tree { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 0; }
.ws-files__msg { color: var(--c-fg-3); font-size: 12px; padding: 8px; }
.ws-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--rd); cursor: pointer; user-select: none; }
.ws-row:hover { background: var(--c-bg-2); }
.ws-row.is-sel { background: var(--c-bg-3); box-shadow: inset 2px 0 0 var(--c-accent); }
.ws-row.is-sel:hover { background: var(--c-bg-3); }
.ws-row.is-drop { box-shadow: inset 0 0 0 2px var(--c-accent); }
.ws-files__btn.is-drop { box-shadow: inset 0 0 0 2px var(--c-accent); }
.ws-row__nm { flex: 1; font-size: 12px; color: var(--c-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row__sz { font-size: 10px; color: var(--c-fg-3); }
.ws-row__act { display: none; gap: 3px; }
.ws-row:hover .ws-row__act { display: flex; }
.ws-row__act button { background: none; border: 0; color: var(--c-fg-3); font-size: 11px; cursor: pointer; padding: 0 2px; }
.ws-row__act button:hover { color: var(--c-fg); }
.ws-files__drop { font-size: 10px; color: var(--c-fg-3); text-align: center; padding: 4px; border-top: 1px dashed var(--c-border); }
.ws-files.is-drag { outline: 2px dashed var(--c-accent); outline-offset: -2px; }
.ws-files.is-drag .ws-files__drop { color: var(--c-accent); }
.amodal__card--wide { max-width: min(92vw, 56rem); width: min(92vw, 56rem); }
.ws-prev__txt { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 70vh; overflow: auto; background: var(--c-bg-2); padding: 10px; border-radius: var(--rd); }
.ws-prev__img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.ws-prev__note { color: var(--c-fg-3); font-size: 13px; padding: 12px; text-align: center; }