/* ══════════════════════════════════════════
   Command Panel + Chat Feed
   ══════════════════════════════════════════ */

/* ── Chat Container (커맨드 패널 채팅 UI) ── */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    min-height: var(--layout-xl);
    overflow: hidden;
    /* §CQ4: 채팅 컨테이너 너비별 적응 */
    container-type: inline-size;
    container-name: chatcontainer;
}

/* ── 명령탭 서브뷰 토글 (탭 텍스트 + 슬라이딩 밑줄) ── */
.cmd-sub-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    width: fit-content;
}

.cmd-sub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-4-5);
    height: var(--s-4-5);
    padding: 0 var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-family: var(--font);
    line-height: var(--leading-none);
}
/* 서브뷰 컨테이너 */
.cmd-sub-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* CSS 애니메이션 제거 — JS subviewFadeIn과 충돌하여 모바일에서 빈 화면 유발 */
}

/* ── 도구 그룹 내 구분선 ── */
.cmd-sub-tools-sep {
    width: 1px;
    height: var(--s-3-5);
    background: var(--text-sub);
    opacity: 0.3;
    margin: 0 var(--s-1);
}
/* ── 에이전트 인라인 검색 ── */
.agent-inline-search {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0 var(--s-1);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    width: clamp(60px, 15vw, 120px);
    transition: width var(--duration-base) var(--easing-smooth);
}
.agent-inline-search:focus-within {
    width: clamp(120px, 20vw, 180px);
    color: var(--text);
    background: var(--surface-hover);
    box-shadow: var(--shadow-ring-dim);
}
.agent-inline-search-input {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    width: 100%;
    padding: 0;
}
.agent-inline-search-input::placeholder {
    color: var(--text-sub);
}
/* ── 헤더 도구 그룹 (필터 + 검색 버튼) ── */
.cmd-sub-tools {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}
.cmd-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--motion-hover),
                background var(--motion-hover);
    flex-shrink: 0;
}
.cmd-search-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.cmd-search-btn.active {
    color: var(--accent);
    background: var(--surface-active);
    border-color: var(--accent);
}

/* ── 메시지 검색바 ── */
.cmd-search-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: var(--surface);
    flex-shrink: 0;
}
.cmd-search-count {
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.cmd-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    font-size: var(--text-reading);
    line-height: var(--leading-none);
    flex-shrink: 0;
}
.cmd-search-close:hover {
    color: var(--text);
    background: var(--glass-medium);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 반응형: cmd-sub-toggle ── */
@media (max-width: 640px) {
    .cmd-sub-toggle {
        padding: var(--s-1) var(--s-2);
        margin: 0 var(--s-2);
        gap: var(--s-1);
    }
    .cmd-sub-badge {
        min-width: var(--s-4);
        height: var(--s-4);
        font-size: var(--text-sm);
    }
    .cmd-search-bar {
        padding: var(--s-1) var(--s-2);
    }
}
@media (max-width: 375px) {
    .cmd-sub-toggle {
        margin: 0 var(--s-1);
        padding: var(--s-1) var(--s-1);
    }
}

/* ── 메시지 피드 영역 (스크롤 가능) ── */
.chat-messages {
    height: 100%;
    overflow-y: auto;
    padding: var(--s-4) var(--s-4) var(--s-2);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: var(--s-1); }
.chat-messages::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: var(--radius-pill); }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

/* ── 빈 상태 ── */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--s-3);
    color: var(--text-sub);
    min-height: var(--card-min-sm);
}
.chat-empty-icon { font-size: var(--text-9xl); opacity: 0.3; }
.chat-empty-text { font-size: var(--text-base); }

/* ── 하단 고정 영역 (입력 + 도구) ── */
/* .glass 또는 .glass--dense 클래스와 조합 사용 */
.chat-bottom {
    flex-shrink: 0;
    border-top: none;
    /* 드래그로 위치 이동 방지 */
    position: relative;
    touch-action: none;
    -webkit-user-drag: none;
    overscroll-behavior: contain;
}

/* ── 채팅 입력 영역 ── */
.chat-input-area {
    background: var(--glass-dark-dense);
    border-top: 1px solid var(--line);
    padding: var(--s-3) var(--s-4);
    /* backdrop-filter는 .glass--dense 유틸리티 클래스가 처리 */
    /* 터치 드래그로 위아래 이동 방지 */
    touch-action: none;
    -webkit-user-drag: none;
    /* §CQ1: 컨테이너 쿼리 — 좁은 영역에서 입력+버튼 재배치 */
    container-type: inline-size;
    container-name: cmdarea;
}
.chat-input-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    font-size: var(--text-base);
}
.chat-target-select {
    background-color: var(--surface);
    border: 1px solid var(--surface-hover);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    padding: var(--s-1) var(--s-2);
    outline: none;
    cursor: pointer;
}
.chat-target-select:focus { border-color: var(--accent); }

/* ── chat-input-meta 내 팀 태그 ── */
.chat-input-meta .tag {
    display: inline-flex;
    align-items: center;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    border: none;
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    font-family: var(--font);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── chat-input-meta 내 모델 프리셋 배지 ── */
.meta-preset-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
    flex-shrink: 0;
}
.meta-preset-badge:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 인라인 모델 프리셋 (chat-input-meta 내) ── */
.meta-preset-group {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}
.tpl-segment-inline {
    margin-top: 0;
}
.meta-preset-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
}
.meta-preset-detail:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

.chat-input-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
/* .chat-tools-btn 제거됨 — 렌치 버튼 UI 삭제, 세부수정 토글로 대체 */
/* chat-input-meta 영역 마지막 자식으로 배치 */
.minor-toggle-inline {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-2);
    flex-shrink: 0;
    align-self: center;
    height: var(--s-5);
}

/* ── 채팅 말풍선 ── */
.chat-bubble {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    position: relative;
    word-break: break-word;
    /* will-change: transform, opacity; — backdrop-filter 차단 제거 */
}

/* 새 메시지만 애니메이션 — JS에서 .chat-bubble--new 클래스 추가 */
.chat-bubble--new.chat-bubble--user {
    animation: chatSlideRight 0.35s var(--easing-slide);
}
.chat-bubble--new.chat-bubble--agent {
    animation: chatSlideLeft 0.35s var(--easing-slide);
}
.chat-bubble--new.chat-bubble--system {
    animation: chatStatusPop 0.3s var(--easing-slide);
}

/* 사용자 말풍선 (우측) — Tier 1: 가장 강한 시각적 무게 */
.chat-bubble--user {
    align-self: flex-end;
    background: var(--glass-dark-dense);
    color: var(--text);
    border: 1px solid var(--line-glass);
    border-bottom-right-radius: var(--s-1);
    box-shadow: var(--shadow);
    /* backdrop-filter는 .glass 유틸리티 클래스가 처리 */
}
.chat-bubble--user .chat-bubble-meta {
    text-align: right;
    color: var(--text-sub);
}

/* 에이전트 말풍선 (좌측) */
.chat-bubble--agent {
    align-self: flex-start;
    background: var(--glass-dark);
    color: var(--text);
    border: 1px solid var(--line);
    border-bottom-left-radius: var(--s-1);
    /* backdrop-filter는 .glass 유틸리티 클래스가 처리 */
}
.chat-bubble--agent .chat-bubble-meta {
    color: var(--text-sub);
}

/* 커맨더 말풍선 — 에이전트와 시각적 구분 */
.chat-bubble--commander {
    background: var(--glass-dark);
    border: 1px solid var(--line);
    /* backdrop-filter는 .glass 유틸리티 클래스가 처리 */
}
.chat-bubble-sender--commander {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* 시스템 메시지 (중앙) */
.chat-bubble--system {
    align-self: center;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-3);
    max-width: 100%;
    text-align: center;
}

/* ── Tier 2: 시스템 상태 알림 (STATUS: 명령 분석, 에이전트 배정 등) ── */
.chat-status-row {
    display: flex;
    justify-content: center;
    padding: var(--s-1) 0;
}
.chat-bubble--status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: transparent;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-sub);
    max-width: 90%;
    opacity: 0.9;  /* WCAG AA 보정 — 0.8일 때 --text-sub 대비비 ~3.87:1 < 4.5:1, 0.9일 때 ~4.72:1 */
    animation: fadeIn var(--duration-base) var(--easing-smooth)-out;
}
/* SVG 아이콘 (14×14, currentColor 기반) */
.chat-bubble--status .status-icon {
    flex-shrink: 0;
    width: var(--s-3-5);
    height: var(--s-3-5);
    display: inline-flex;
    align-items: center;
}
.chat-bubble--status .status-icon svg {
    width: var(--s-3-5);
    height: var(--s-3-5);
}
.chat-bubble--status .status-text {
    white-space: normal;
    word-break: break-word;
}
.chat-bubble--status .status-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: var(--s-1);
}

/* 시스템 상태 변형 — 에러 (빨강) */
.chat-bubble--status.status--error {
    color: var(--clr-error-light);
    opacity: 1;
    animation: chatStatusPop 0.3s var(--easing-slide);
}
/* 시스템 상태 변형 — 경고 (노랑) */
.chat-bubble--status.status--warn {
    color: var(--clr-warning-light);
    opacity: 1;
    animation: chatStatusPop 0.3s var(--easing-slide);
}
/* 시스템 상태 변형 — 성공 (초록) */
.chat-bubble--status.status--success,
.chat-bubble--status.status--ok {
    color: var(--clr-success-light);
}

/* 에러 상태 재시작 버튼 */
.status-restart-btn {
    flex-shrink: 0;
    margin-left: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w8);
    border: 1px solid var(--surface-w15);
    border-radius: var(--radius-pill);
    color: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    line-height: var(--leading-relaxed);
    min-height: var(--s-5);
    transition: background var(--motion-hover),
                border-color var(--motion-hover),
                transform var(--motion-hover);
}
.status-restart-btn:hover {
    background: var(--surface-w15);
    border-color: var(--surface-w20);
    transform: translateY(var(--hover-lift-sm));
}
.status-restart-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.status-restart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* 수정/보완 전환 시 accent modifier */
.status-restart-btn--rework {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-active);
}
.status-restart-btn--rework:hover {
    background: var(--surface-active);
    border-color: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}

/* ── Tier 3: 인라인 시스템 알림 (축소 표시) ── */
.chat-status-row--inline {
    justify-content: flex-start;
    align-items: center;
    padding: var(--s-1) 0;
    gap: var(--s-1);
    opacity: 0.7;   /* WCAG AA 보정 — 0.55→0.7: --text-sub(5.2:1) × 0.7 ≈ 3.64→4.5 이상 충족 */
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    color: var(--text-sub);  /* WCAG AA: --text-faint는 opacity 적용 시 AA 미충족 → --text-sub로 교체 (tokens.css L691~693 선례) */
    transition: opacity var(--motion-hover);
}
.chat-status-row--inline:hover {
    opacity: 0.95;
}
/* Tier 3 인라인 SVG 아이콘 (14×14) */
.chat-status-row--inline .status-inline-icon {
    flex-shrink: 0;
    width: var(--s-3-5);
    height: var(--s-3-5);
    display: inline-flex;
    align-items: center;
    opacity: 0.7;  /* 아이콘도 본문과 동일하게 상향 */
}
.chat-status-row--inline .status-inline-icon svg {
    width: var(--s-3-5);
    height: var(--s-3-5);
}
.chat-status-row--inline .status-inline-text {
    white-space: normal;
    word-break: break-word;
}
.chat-status-row--inline .status-inline-time {
    font-size: var(--text-sm);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: var(--s-1);
}

/* ── 중간 진행 보고 (progress_report) ── */

/* 배치 진행 */
.chat-bubble--status.status--progress-batch {
    color: var(--text-sub);
}
.chat-bubble--status.status--progress-batch .status-icon {
    animation: statusIconSpin 1.2s var(--ease-in-out);
}

/* @REQUEST 교차 요청 */
.chat-bubble--status.status--progress-cross {
    color: var(--clr-info-bright);
}

/* 에이전트 완료/실패 카드 */
.chat-bubble--progress {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--surface-hover);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-4);
    max-width: var(--layout-xl);
    animation: chatStatusPop 0.3s var(--easing-slide);
}
/* 프로그레스 바 */
.progress-report-bar {
    height: 3px;
    background: var(--surface-hover);
    border-radius: var(--radius-pill);
    margin-bottom: var(--s-2);
    overflow: hidden;
}
.progress-report-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--duration-moderate) var(--ease-in-out);
}
.progress-report-fill.progress--done {
    background: var(--accent);
}
.progress-report-fill.progress--fail {
    background: var(--clr-error);
}

/* 헤더 (에이전트명 + 완료 뱃지 + 카운트 + 시간) */
.progress-report-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.progress-report-agent {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.progress-report-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--clr-success-bg-xs);
    color: var(--clr-success-light);
    font-weight: var(--weight-semibold);
}
.progress-report-badge svg { flex-shrink: 0; }
.progress--fail .progress-report-badge {
    background: var(--clr-error-bg-xs);
    color: var(--clr-error-light);
}
.progress-report-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
}
.progress-report-header .status-time {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.5;
    flex-shrink: 0;
}

/* 결과 미리보기 스니펫 */
.progress-report-snippet {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin-top: var(--s-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.progress-report-snippet:active {
    opacity: 0.7;
}

/* ── 커맨더 위임 안내 (delegate_message) ── */
.chat-bubble--delegate {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    max-width: var(--layout-2xl);
    animation: chatStatusPop 0.3s var(--easing-slide);
}
.delegate-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-1);
}
.delegate-icon {
    font-size: var(--text-base);
    line-height: var(--leading-none);
}
.delegate-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}
.delegate-header .status-time {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.5;
}
.delegate-text {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: var(--leading-relaxed);
}

/* ── 작업 분할 배너 (Commander multi_delegate) ── */
.split-banner {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    max-width: var(--layout-2xl);
    animation: chatStatusPop 0.3s var(--easing-slide);
}
.split-banner-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
}
.split-banner-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}
.split-banner-header .status-time {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.5;
}
.sj-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
}
/* transform/transition → animations.css 단일 권위 선언으로 이관 */
.sj-card {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    cursor: pointer;
}
.sj-card:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-card-hover), var(--hover-ring);
    transform: translateY(var(--hover-lift-sm));
}
.sj-card:active {
    box-shadow: none;
}
.sj-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
.sj-title {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sj-status-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-0) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.sj-status-label.sj--done {
    background: var(--clr-success-bg-xs);
    color: var(--clr-success-light);
}
.sj-status-label.sj--fail {
    background: var(--clr-error-bg-xs);
    color: var(--clr-error-light);
}
/* ★ [SPLIT-FIX-H] 부분 완료 상태 — 백엔드 partial_complete 대응 */
.sj-status-label.sj--partial {
    background: var(--clr-warning-bg-xs);
    color: var(--clr-warning-light);
}
.sj-status-label.sj--run {
    background: var(--surface-active);
    color: var(--accent-deep);
}
.sj-status-label.sj--pending {
    background: var(--surface);
    color: var(--text-sub);
}
/* 서브잡 에이전트 진행 칩 */
.sj-agent-chip {
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--surface-w5);
    padding: var(--s-0) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    max-width: clamp(60px, 15vw, 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    animation: sjAgentFadeIn 0.25s var(--easing-smooth);
}
@keyframes sjAgentFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
.split-banner-progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.split-banner-progress .cj-mini-progress {
    flex: 1;
    height: var(--s-1);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.split-banner-progress .cj-mini-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    border-radius: var(--radius-s);
    transition: width var(--duration-moderate) var(--easing-smooth);
}
.split-banner-progress-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}

/* ── 복합 작업 완료 배너 (split_job_complete) ── */
.split-complete-banner {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    max-width: var(--layout-2xl);
    animation: chatStatusPop 0.3s var(--easing-slide);
}
.split-complete-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
}
.split-complete-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-success-light);
    flex: 1;
}
.split-complete-header .status-time {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.5;
}
.split-complete-body {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--s-2);
}
.split-complete-action {
    display: flex;
    justify-content: flex-end;
}
.split-complete-detail-btn {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    background: var(--surface-active);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--motion-hover);
}
.split-complete-detail-btn:hover {
    background: var(--surface-active);
    transform: translateY(var(--hover-lift-sm));
}

/* 아이콘 바운스 (assign 배정 완료) */
@keyframes statusIconBounce {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* 시스템 상태 팝 진입 애니메이션 (error/warn 등) */
@keyframes chatStatusPop {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: none; }
}

/* ── 타이핑 인디케이터 (에이전트 작업 중) ── */
.chat-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    border-bottom-left-radius: var(--s-1);
    align-self: flex-start;
    animation: chatSlideLeft 0.3s var(--easing-slide);
}
.chat-typing-indicator .typing-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--text-sub);
    animation: chatTypingDot 1.2s var(--ease-in-out) infinite;
}
.chat-typing-indicator .typing-dot:nth-child(2) { animation-delay: var(--duration-fast); }
.chat-typing-indicator .typing-dot:nth-child(3) { animation-delay: var(--duration-moderate); }

/* 말풍선 메타 정보 */
.chat-bubble-meta {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    margin-bottom: var(--s-1);
}
.chat-bubble-sender {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
}
.chat-bubble-time {
    font-size: var(--text-sm);
    opacity: 0.6;
}
.chat-bubble-type {
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--surface-hover);
}
.chat-bubble-type--dm {
    background: var(--surface-w8);
    color: var(--clr-info-bright);
}

/* ── 명령 피드 인라인 필터 (토글 바 내 배치) ── */
/* .cmd-inline-filter — glass 컴포넌트로 이동 */

/* 말풍선 본문 */
/* #18: 긴 메시지 잘림 표시 — max-height + 페이드 그라디언트 */
.chat-bubble-text {
    word-break: break-word;
    max-height: clamp(320px, 50vh, 480px);
    overflow: hidden;
    position: relative;
}
.chat-bubble-text.truncated::after {
    content: '클릭하여 전문 보기';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--s-8);
    background: linear-gradient(transparent, var(--bg-raised));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--accent);
    padding-bottom: var(--s-1);
    pointer-events: none;
}
.chat-bubble--agent .chat-bubble-text { color: var(--text-sub); }

/* 에이전트 아바타 + 말풍선 묶음 */
.chat-bubble-row {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
}
.chat-bubble-row--user {
    flex-direction: row-reverse;
}
.chat-bubble-avatar {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    flex-shrink: 0;
    background: var(--surface-active);
    margin-top: var(--s-1);
}

/* 초안 선택 버튼 (말풍선 내부) */
.chat-bubble .draft-options-bar {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
}

/* ── ChatGPT 스타일 캡슐 입력창 ── */
.cmd-capsule {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    /* v6: 베이스 그림자로 입체감 */
    box-shadow: var(--shadow-soft);
    /* 캡슐 전체를 터치로 드래그하지 못하게 */
    touch-action: none;
    -webkit-user-drag: none;
    /* CQ: 너비별 입력 레이아웃 적응 */
    container-type: inline-size;
    container-name: cmdcapsule;
}
.cmd-capsule:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    /* v6: 포커스 시 은은한 액센트 글로우 */
    box-shadow: var(--shadow-capsule-focus);
}
.cmd-input {
    flex: 1;
    align-self: stretch; /* 캡슐 높이에 맞춰 늘려 상단 데드존 제거 */
    padding: var(--s-1) var(--s-2) var(--s-1) 0;
    background: transparent;
    border: none;
    color: var(--text); font-size: var(--text-sm); font-family: var(--font);
    outline: none;
    min-height: auto; /* components.css textarea generic 60px 오버라이드 */
    max-height: var(--card-min-sm);
    resize: none; line-height: var(--leading-snug);
    white-space: pre-wrap; overflow-y: auto;
    /* 텍스트 영역 내부 스크롤만 허용, 영역 자체 드래그 이동 방지 */
    touch-action: pan-y;
    -webkit-user-drag: none;
}
.cmd-input:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
}
.cmd-input::placeholder { color: var(--text-sub); }
.cmd-send {
    display: flex; align-items: center; justify-content: center;
    width: var(--s-7); height: var(--s-7); padding: 0; border: none;
    border-radius: 50%;
    background: var(--accent); color: var(--text);
    cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
    /* v6: 전송 버튼 미세 그림자 */
    box-shadow: var(--shadow-glow-accent-lifted);
}
.cmd-send svg { width: var(--s-4-5); height: var(--s-4-5); }
.cmd-send:hover { background: var(--accent-deep); filter: brightness(var(--hover-brightness)); box-shadow: var(--shadow-accent-glow-lg); transform: translateY(var(--hover-lift-sm)); }
.cmd-send:active { transform: scale(var(--active-scale-btn)); box-shadow: var(--shadow-ring-dim); transition-duration: var(--duration-instant); }
.cmd-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--shadow-focus-ring); }
/* 캡슐 포커스 시 전송 버튼 글로우 강화 + 앰비언트 브리딩 */
.cmd-capsule:focus-within .cmd-send {
    box-shadow: var(--shadow-glow-accent-combo);
    animation: cmdSendBreathe 2.4s var(--easing-in-out, ease-in-out) infinite;
}
.cmd-capsule:focus-within .cmd-send:hover {
    animation: none; /* 호버 시 브리딩 중단 — 호버 효과 우선 */
}
@keyframes cmdSendBreathe {
    0%, 100% { box-shadow: var(--shadow-glow-accent-combo); transform: scale(1); }
    50%      { box-shadow: var(--shadow-glow-accent-combo), var(--shadow-accent-glow-lg); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .cmd-capsule:focus-within .cmd-send { animation: none; }
}
.cmd-capsule:empty { display: none; }

/* ── CQ: cmdcapsule 너비별 레이아웃 적응 ── */
@container cmdcapsule (max-width: 360px) {
    .cmd-input { font-size: var(--text-sm); }
    .cmd-send { width: var(--s-6); height: var(--s-6); }
    .cmd-send svg { width: var(--s-3-5); height: var(--s-3-5); }
    .cmd-attach { width: var(--s-6); height: var(--s-6); }
}
@container cmdcapsule (max-width: 240px) {
    .cmd-attach { display: none; }
}

/* ── Attachments ── */
.cmd-attach {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: var(--s-5); height: var(--s-5); border-radius: 50%;
    cursor: pointer; background: none; border: none; font-size: var(--text-base);
    color: var(--text-sub); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.cmd-attach:hover { color: var(--accent); background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
/* 모바일에서 display:none은 파일 선택 트리거를 차단할 수 있음 → visually hidden 패턴 사용 */
.cmd-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cmd-attachments { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0 var(--s-3) var(--s-2); }
.cmd-attachment-chip {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
    background: var(--surface); font-size: var(--text-sm); color: var(--text-sub);
}
.cmd-attachment-chip .remove-attach { cursor: pointer; color: var(--text-sub); font-size: var(--text-lg); margin-left: var(--s-1); }
.cmd-attachment-chip .remove-attach:hover { color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }
/* 이미지 첨부 썸네일 미리보기 */
.cmd-attachment-img { padding: var(--s-1); }
.cmd-attach-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-s); flex-shrink: 0; }
.cmd-attach-name { max-width: clamp(60px, 15vw, 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 반응형: 태블릿 완만 전환 ── */
@media (max-width: 1024px) {
    .chat-messages { padding: var(--s-3) var(--s-4); }
    .chat-bubble { max-width: 85%; }
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .chat-container {
        /* 모바일: 탑바 + 바텀탭바 + safe-area 고려 */
        height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - var(--topbar-h) - var(--bottombar-h) - env(safe-area-inset-bottom, 0px));
    }
    .chat-messages { padding: var(--s-3) var(--s-3) var(--s-2); }
    .chat-bubble { max-width: 90%; }

    /* 모바일: 사용자 아바타 숨기기 — 버블이 우측 끝까지 확장되어 에이전트 답변과 좌우 정렬 역전 방지 */
    .chat-bubble-row--user .chat-bubble-avatar { display: none; }

    /* ── 모바일 통합 캡슐 (ChatGPT 스타일 2-Row) ── */
    /* Row 1: textarea + 전송 버튼 (좌우 전체 너비)
       Row 2: 첨부 버튼 + 메타(팀/모델/세부수정) */
    .chat-input-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--surface);
        border: 1.5px solid transparent;
        border-radius: var(--radius);
        padding: var(--s-2) var(--s-3) var(--s-1);
        margin: 0 var(--s-3);
        column-gap: var(--s-2);
        row-gap: var(--s-1);
    }
    .chat-input-area:focus-within {
        border-color: var(--accent);
        box-shadow: var(--shadow-focus-ring-teal);
    }

    /* 중간 컨테이너 해제 — 자식을 chat-input-area에 직접 노출 */
    .chat-input-row { display: contents; }
    .cmd-capsule {
        display: contents;
    }

    /* display:contents 미지원 브라우저용 fallback */
    @supports not (display: contents) {
        .chat-input-row {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: var(--s-2);
        }
        .cmd-capsule {
            display: flex;
            flex: 1 0 100%;
            align-items: center;
            background: transparent;
            border: none;
            padding: 0;
        }
    }

    /* Row 1: textarea + 전송 버튼 (ChatGPT 스타일 — 입력란이 좌우 전체 사용) */
    .cmd-input {
        order: 0;
        flex: 1 0 calc(100% - 60px);
        min-width: 0;
        padding: var(--s-1) 0;
        border-bottom: none;
        margin-bottom: 0;
    }
    /* mobile.css의 `.chat-input-area textarea { min-height: 44px }` 오버라이드 해제
       — 명령 입력창은 autoResizeCmdInput()로 동적 높이 관리 */
    .chat-input-area .cmd-input { min-height: auto; }

    /* 전송 버튼 = textarea 바로 오른쪽 (같은 줄) */
    .cmd-send {
        order: 1;
        width: var(--s-8-5);
        height: var(--s-8-5);
        margin-left: 0;
        flex-shrink: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Row 2: 첨부 버튼 + 메타 (보조 컨트롤) */
    /* DOM 순서: meta(1번째) → attach×3 → textarea → send
       display:contents 후 flex order로 재배치 */
    .cmd-attach {
        order: 2;
        width: var(--s-5-5);
        height: var(--s-5-5);
        font-size: var(--text-sm);
        flex-shrink: 0;
    }

    /* meta = DOM상 첫 번째지만 order:3으로 첨부 뒤에 배치, 남은 공간 채움 */
    .chat-input-meta {
        order: 3;
        flex: 1;
        min-width: 0;
        margin: 0;
        justify-content: flex-end;
        gap: var(--s-1);
        font-size: var(--text-sm);
        overflow: hidden;
        flex-wrap: nowrap;
    }
    .chat-target-select { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
    .meta-preset-group { margin-left: 0; }

    .cwd-selector-btn { padding: var(--s-1) var(--s-1); font-size: var(--text-sm); }

    /* 입력 영역이 탭바와 겹치지 않도록 */
    .chat-bottom {
        padding-bottom: var(--s-1);
    }
}
@media (max-width: 640px) {
    .chat-bubble { max-width: 92%; font-size: var(--text-base); }
    .chat-bubble-avatar { width: 24px; height: 24px; font-size: var(--text-base); }
    .meta-preset-group { width: auto; justify-content: flex-start; }
    .cmd-send { width: var(--s-8-5); height: var(--s-8-5); }
    .cmd-send svg { width: var(--s-4); height: var(--s-4); }
    /* 세부수정 토글 — 좁은 화면에서 텍스트 숨기고 dot만 표시 */
    .minor-toggle { padding: var(--s-1); height: 22px; }
    .minor-toggle-label { display: none; }
    /* meta 배지 축소 */
    .chat-input-meta .tag,
    .meta-preset-badge { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
    .cmd-attach { width: 24px; height: 24px; font-size: var(--text-sm); }
    /* mobile.css textarea min-height:40px override 방지 */
    .chat-input-area .cmd-input { min-height: auto; }
}
@media (max-width: 375px) {
    .chat-bubble { padding: var(--s-2) var(--s-3); }
    .chat-input-area { margin: 0 var(--s-2); padding: var(--s-1) var(--s-2) var(--s-1); }
    .cmd-send { width: var(--s-8-5); height: var(--s-8-5); min-width: var(--s-8-5); }
    .cmd-send svg { width: var(--s-3-5); height: var(--s-3-5); }
    .minor-toggle { height: 20px; padding: var(--s-1); }
    .cmd-attach { width: 22px; height: 22px; font-size: var(--text-sm); }
    .cwd-selector-btn { padding: var(--s-1) var(--s-1); font-size: var(--text-sm); max-width: clamp(100px, 38vw, 140px); }
    /* 375px에서 Commander 셀렉트 초소형 */
    .chat-target-select { font-size: var(--text-sm); max-width: clamp(64px, 24vw, 90px); }
}

/* ── Command Panel ── */
.cmd-panel { background: var(--surface); border: none; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s-5); }
.cmd-head {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    font-size: var(--text-base); font-weight: var(--weight-semibold);
}
.cmd-head .tag { font-size: var(--text-sm); color: var(--accent); margin-left: auto; }
.cmd-body { padding: var(--s-4) var(--s-5); }
.cmd-row { display: flex; gap: var(--s-2); }

/* ── Folder Attached (첨부 폴더 배지) ── */
.folder-attached-chip {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
    background: var(--surface-w8); border: none;
    font-size: var(--text-sm); color: var(--accent);
}
.folder-chip-icon { font-size: var(--text-base); flex-shrink: 0; }
.folder-chip-path {
    max-width: var(--card-min-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono); font-size: var(--text-sm);
}
.folder-chip-count {
    font-size: var(--text-sm); color: var(--text-sub);
    padding: var(--s-1) var(--s-1); border-radius: var(--radius-s);
    background: var(--surface);
}
.folder-attached-chip .remove-attach {
    cursor: pointer; color: var(--text-sub); font-size: var(--text-lg);
    margin-left: var(--s-1); line-height: var(--leading-none);
}
.folder-attached-chip .remove-attach:hover { color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }
.folder-attached-chip.unverified {
    border: 1px solid var(--clr-warning);
    background: var(--clr-warning-bg-sm);
}
.folder-chip-warn {
    color: var(--clr-warning); font-size: var(--text-sm);
    cursor: help;
}
/* ── Dev Action Bar (floating capsule — 컨테이너 없음) ── */
.dev-bar {
    display: none; padding: var(--s-1) var(--s-4);
    border: none; background: none;
    gap: var(--s-2); align-items: center;
}
.dev-bar.visible { display: flex; flex-wrap: wrap; }
.dev-bar-group { display: flex; align-items: center; gap: var(--s-2); }
.dev-bar-divider { width: 1px; height: var(--s-6); background: var(--line-bold); margin: 0 var(--s-1); }
.dev-bar-label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-sub); white-space: nowrap; }
.deploy-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2); border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--capsule-bg); color: var(--clr-info-bright); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap; height: var(--s-5);
    box-shadow: var(--capsule-shadow);
    /* .glass 또는 .glass--light 클래스와 조합 사용 */
}
.deploy-btn:hover {
    background: var(--glass-medium);
    box-shadow: var(--capsule-hover-shadow);
    border-color: var(--surface-active);
    color: var(--clr-info-light);
    transform: translateY(var(--hover-lift-sm));
}
.deploy-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.deploy-btn:disabled { opacity: 0.5; cursor: default; }
.deploy-btn.deploying { background: var(--clr-warning-bg-sm); color: var(--clr-warning); border-color: var(--clr-warning-border); }
.deploy-btn.success { background: var(--clr-success-bg-sm); color: var(--clr-success); border-color: var(--clr-success-border); }
.deploy-btn.fail { background: var(--clr-error-bg-sm); color: var(--clr-error); border-color: var(--clr-error-border); }
/* 프로덕션 배포 버튼 — 빨간 강조 */
.deploy-prod-btn { color: var(--clr-error); border-color: transparent; }
.deploy-prod-btn:hover { color: var(--clr-error-light); border-color: var(--clr-error); background: var(--clr-error-bg-sm); transform: translateY(var(--hover-lift-sm)); }
.deploy-status { font-size: var(--text-sm); color: var(--text-sub); max-width: clamp(180px, 20vw, 300px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minor-toggle {
    display: flex; align-items: center; gap: var(--s-1); cursor: pointer;
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
    border: 1px solid transparent; background: var(--capsule-bg);
    font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-sub);
    font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    box-shadow: var(--capsule-shadow);
    /* .glass 또는 .glass--light 클래스와 조합 사용 */
    /* chat-input-meta 내 배치 — 메타 요소들과 동일한 높이감 */
    height: var(--s-5); box-sizing: border-box;
    flex-shrink: 0; white-space: nowrap;
}
.minor-toggle:hover { background: var(--glass-medium); color: var(--accent); box-shadow: var(--capsule-hover-shadow); border-color: var(--surface-active); transform: translateY(var(--hover-lift-sm)); }
.minor-toggle.active { border-color: var(--clr-warning-border); background: var(--clr-warning-bg-sm); color: var(--clr-warning); }
.minor-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-sub); transition: background var(--motion-hover); flex-shrink: 0; }
.minor-toggle.active .minor-toggle-dot { background: var(--clr-warning); }
/* chat-input-meta 내 minor-toggle 텍스트 라벨 */
.minor-toggle-label { transition: opacity var(--motion-hover); }

/* ── Content Type Chips ── */
.content-bar { display: none; padding: var(--s-3) var(--s-5); border-top: none; background: transparent; }
.content-bar.visible { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.content-bar-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub); white-space: nowrap; }
.content-chips { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.content-chip {
    padding: var(--s-1) var(--s-4); border-radius: var(--radius-pill);
    border: none; background: var(--surface);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub);
    cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    display: flex; align-items: center; gap: var(--s-1);
}
.content-chip:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.content-chip.selected { background: var(--surface-active); color: var(--accent); font-weight: var(--weight-semibold); }
.content-chip .chip-icon { font-size: var(--text-base); }

/* ── 소통 패널 — 채팅 헤더 (feed-head 대체) ── */
.chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    flex-shrink: 0;
}
.chat-panel-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
}

/* panel-chat 제거됨 — cmd-sub-chat으로 통합, 스타일은 .cmd-sub-view에서 상속 */

/* ── 롱프레스 텍스트 선택 차단 (채팅/소통 영역) ── */
.chat-messages,
.comm-bubble-row,
.comm-bubble,
.comm-bubble-meta,
.comm-bubble-avatar,
.msg,
.msg-meta,
.msg-avatar,
.feed-head {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* 본문 텍스트만 선택 허용 — 데스크톱 전용 (마우스 드래그 복사) */
.comm-bubble-text,
.msg-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}
/* 모바일: 롱프레스 텍스트 선택 차단 (파란색 하이라이트 방지) */
@media (max-width: 960px) {
    .comm-bubble-text,
    .msg-text {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    .chat-container,
    .cmd-sub-view {
        -webkit-touch-callout: none;
    }
}
/* 터치 디바이스 전체: 롱프레스 텍스트 선택 차단 (iPad 등 넓은 터치 화면 포함) */
.touch-device .comm-bubble-text,
.touch-device .msg-text {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.touch-device .chat-container,
.touch-device .cmd-sub-view,
.touch-device .cmd-feed-body,
.touch-device .cmd-chat-body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ══════════════════════════════════════════
   소통 탭 — 단톡방 (그룹 채팅) 스타일
   ══════════════════════════════════════════ */

/* ── 버블 행: 아바타 + 버블 수평 배치 ── */
.comm-bubble-row {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
}

/* ── 에이전트 아바타 ── */
.comm-bubble-avatar {
    width: var(--s-6);
    height: var(--s-6);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
    background: var(--surface-active);
    margin-top: var(--s-1);
}

/* ── 메시지 버블 본체 ── */
.comm-bubble {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    border-top-left-radius: var(--s-1);
    background: var(--surface);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    position: relative;
    word-break: break-word;
    /* will-change: transform, opacity; — backdrop-filter 차단 제거 */
    transition: background var(--motion-hover);
}
.comm-bubble:hover {
    background: var(--surface-hover);
}

/* 새 메시지 슬라이드 애니메이션 */
.comm-bubble--new {
    animation: chatSlideLeft 0.35s var(--easing-slide);
}

/* ── 메타 정보 (발신자, 수신자, 타입, 시간) ── */
.comm-bubble-meta {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    margin-bottom: var(--s-1);
    flex-wrap: wrap;
}
.comm-bubble-sender {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--accent);
}
.comm-bubble-to {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-normal);
}
.comm-bubble-to .to-arrow {
    font-size: var(--text-sm);
    opacity: 0.5;
}
.comm-bubble-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    opacity: 0.6;
    margin-left: auto;
}

/* ── 메시지 타입 뱃지 ── */
.comm-bubble-type {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    display: inline-block;
}
.comm-bubble .type-REQUEST { background: var(--clr-info-bg-md); color: var(--clr-info-bright); }
.comm-bubble .type-RESPONSE { background: var(--clr-success-bg-md); color: var(--clr-success-bright); }
.comm-bubble .type-FEEDBACK { background: var(--clr-warning-bg-md); color: var(--clr-warning-light); }
.comm-bubble .type-FACTCHECK { background: var(--clr-purple-bg-sm); color: var(--clr-purple-light); }
.comm-bubble .type-ESCALATE { background: var(--clr-pink-bg-md); color: var(--clr-pink); font-weight: var(--weight-bold); }
.comm-bubble .type-RESEARCH { background: var(--clr-success-bg-md); color: var(--clr-success-bright); }
.comm-bubble .type-CONTENT { background: var(--clr-info-bg-md); color: var(--clr-info-bright); }
.comm-bubble .type-COMMAND { background: var(--surface-active); color: var(--accent); }

/* ── 버블 본문 ── */
.comm-bubble-text {
    word-break: break-word;
    color: var(--text-sub);
    overflow: hidden;
    max-height: clamp(200px, 35vh, 300px);
    position: relative;
}
/* #18: 긴 메시지 잘림 표시 — 페이드 그래디언트 + 클릭 힌트 */
.comm-bubble-text.truncated::after {
    content: '클릭하여 전문 보기';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--s-8);
    background: linear-gradient(transparent, var(--bg-raised) 70%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--accent);
    padding-bottom: var(--s-1);
    pointer-events: none;
}
/* 버블 내 테이블 오버플로우 방지 */
.comm-bubble-text table,
.chat-bubble-text table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: var(--text-sm);
}
.comm-bubble-text table td,
.comm-bubble-text table th,
.chat-bubble-text table td,
.chat-bubble-text table th {
    padding: var(--s-1) var(--s-2);
    white-space: nowrap;
    border: none;
}
/* 버블 내 pre/code 오버플로우 방지 */
.comm-bubble-text pre,
.chat-bubble-text pre {
    overflow-x: auto;
    max-width: 100%;
}

/* ── 타입별 버블 변형 (배경색으로 구분, 좌측 보더 제거) ── */
.comm-bubble--request {
    background: var(--surface);
}
.comm-bubble--request .comm-bubble-sender { color: var(--clr-info-bright); }

.comm-bubble--response {
    background: var(--clr-success-bg-xs);
}
.comm-bubble--response .comm-bubble-sender { color: var(--clr-success-bright); }

.comm-bubble--feedback {
    background: var(--clr-warning-bg-xs);
}
.comm-bubble--feedback .comm-bubble-sender { color: var(--clr-warning-light); }

.comm-bubble--escalate {
    background: var(--clr-pink-bg-xs);
}
.comm-bubble--escalate .comm-bubble-sender { color: var(--clr-pink); }

.comm-bubble--factcheck {
    background: var(--clr-purple-bg-xs);
}
.comm-bubble--factcheck .comm-bubble-sender { color: var(--clr-purple-light); }

/* ── 빈 요소 방지 ── */
.comm-bubble-row:empty { display: none; }
.comm-bubble:empty { display: none; }

/* ── 연속 메시지 그룹핑 (같은 발신자) ── */
.comm-bubble-row--cont {
    margin-top: calc(-1 * var(--s-1));
}
.comm-avatar-spacer {
    width: var(--s-6);
    flex-shrink: 0;
}
.comm-bubble-row--cont .comm-bubble {
    border-top-left-radius: var(--s-1);
    padding-top: var(--s-1);
}
.comm-bubble-footer {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    margin-top: var(--s-1);
}
.comm-bubble-footer .comm-bubble-time {
    margin-left: auto;
}

/* ── 답장 원본 메시지 접이식 ── */
.reply-orig-collapse {
    margin-top: var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface-w3);
    font-size: 0.85em;
    overflow: hidden;
}
.reply-orig-summary {
    cursor: pointer;
    padding: var(--s-1) var(--s-2);
    color: var(--text-sub);
    user-select: none;
    list-style: none;
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.reply-orig-summary::-webkit-details-marker { display: none; }
.reply-orig-summary::marker { content: ''; font-size: 0; }
.reply-orig-summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    width: var(--s-1);
    height: var(--s-1-5);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: currentColor;
    transition: transform var(--motion-hover);
    flex-shrink: 0;
}
.reply-orig-collapse[open] > .reply-orig-summary::before {
    transform: rotate(90deg);
}
.reply-orig-preview {
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--card-min-sm);
}
.reply-orig-body {
    padding: var(--s-1) var(--s-2) var(--s-2);
    color: var(--text-sub);
    max-height: clamp(200px, 35vh, 300px);
    overflow-y: auto;
}

/* ── 반복 보일러플레이트 접이식 (셀프체크, 경로 규칙 등) ── */
.boilerplate-collapse + .boilerplate-collapse {
    margin-top: var(--s-1);
}

/* ── 날짜 구분선 ── */
.comm-date-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-3) 0;
    gap: var(--s-3);
}
.comm-date-sep::before,
.comm-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--surface-hover);
}
.comm-date-sep span {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    white-space: nowrap;
    padding: var(--s-1) var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-pill);
}

/* ── 소통 서브뷰 반응형 (cmd-sub-chat 통합) ── */
@media (max-width: 768px) {
    .chat-panel-head {
        padding: var(--s-2) var(--s-3);
    }
    .comm-bubble { max-width: 88%; }
}
@media (max-width: 640px) {
    .chat-panel-title { font-size: var(--text-sm); }
    .comm-bubble {
        max-width: 92%;
        font-size: var(--text-base);
    }
    .comm-bubble-avatar {
        width: var(--s-5);
        height: var(--s-5);
        font-size: var(--text-sm);
    }
    .comm-avatar-spacer { width: var(--s-5); }
}
@media (max-width: 375px) {
    .comm-bubble {
        padding: var(--s-1) var(--s-2);
    }
}

/* ── Message Feed (Chat) ── */
.feed { background: var(--surface); border: none; border-radius: var(--radius); overflow: hidden; }
.feed-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) var(--s-4);
}
.feed-title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
/* .feed-filter — glass 컴포넌트로 이동 */
.feed-body { max-height: clamp(400px, 65vh, 600px); overflow-y: auto; padding: var(--s-1) var(--s-3); }
.feed-empty { padding: var(--s-6) var(--s-5); text-align: center; color: var(--text-sub); font-size: var(--text-sm); }

/* Messages */
/* 기본 메시지는 애니메이션 없음 — 새 메시지만 .msg--new로 애니메이션 */
.msg { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-2); border-radius: var(--radius-s); transition: background var(--motion-hover); content-visibility: auto; contain-intrinsic-size: auto 52px; }
.msg--new { animation: msgIn 0.35s var(--easing-slide); }
.msg:hover { background: var(--surface-hover); }
.msg-avatar {
    width: 30px; height: 30px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-base); flex-shrink: 0; background: var(--surface-active);
}
.msg-content { flex: 1; min-width: 0; }
.msg-meta { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1); }
.msg-from { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.msg-arrow { font-size: var(--text-sm); color: var(--text-sub); }
.msg-to { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub); }
.msg-type { padding: var(--s-1) var(--s-1); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.type-COMMAND { background: var(--surface-active); color: var(--accent); }
.type-REQUEST { background: var(--clr-info-bg-md); color: var(--clr-info-bright); }
.type-RESPONSE { background: var(--clr-success-bg-md); color: var(--clr-success-bright); }
.type-FEEDBACK { background: var(--clr-warning-bg-md); color: var(--clr-warning-light); }
.type-FACTCHECK { background: var(--clr-purple-bg-sm); color: var(--clr-purple-light); }
.type-ESCALATE { background: var(--clr-pink-bg-md); color: var(--clr-pink); font-weight: var(--weight-bold); }
.type-RESEARCH { background: var(--clr-success-bg-md); color: var(--clr-success-bright); }
.type-CONTENT { background: var(--clr-info-bg-md); color: var(--clr-info-bright); }
.type-SYSTEM_STATUS { background: var(--surface-hover); color: var(--text-sub); font-style: italic; }
.msg-text { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-sub); }
.msg-time { font-size: var(--text-sm); color: var(--text-sub); flex-shrink: 0; margin-top: var(--s-1); }

/* Commander/User highlights */
.msg-commander-reply { background: var(--surface); border-radius: var(--radius); padding-left: var(--s-3); }
.msg-commander-reply:hover { background: var(--surface-hover); }
.msg-commander-reply .msg-from { color: var(--accent); }
.msg-commander-reply .msg-text { color: var(--text); }
.msg-commander-reply .msg-type { background: var(--surface-active); color: var(--accent); }
.msg-user-command { background: var(--surface); border-radius: var(--radius); padding-left: var(--s-3); }
.msg-user-command:hover { background: var(--surface-hover); }
.msg-user-command .msg-from { color: var(--clr-cyan); font-weight: var(--weight-bold); }
.msg-user-command .msg-text { color: var(--text); }
.msg-user-command .msg-type { background: var(--surface-w15); color: var(--clr-cyan); }
.msg-user-command .msg-avatar { font-size: var(--text-lg); }
.msg-escalate { background: var(--clr-pink-bg-xs); border-radius: var(--radius); padding-left: var(--s-3); }
.msg-escalate .msg-from { color: var(--clr-pink); }
.msg-escalate .msg-text { color: var(--text); }

/* 메시지 피드 — STATUS 메시지 컴팩트 스타일 */
.msg-status {
    padding: var(--s-1) var(--s-2);
    opacity: 0.7;
    border-radius: var(--radius-pill);
}
.msg-status .msg-avatar { display: none; }
.msg-status .msg-text { font-size: var(--text-sm); font-style: italic; }
.msg-status .msg-meta { margin-bottom: 0; }
.msg-status:hover { opacity: 1; transform: translateY(var(--hover-lift-sm)); }

/* Draft selector */
.draft-options-bar { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-3); padding-top: var(--s-3); border-top: none; }
.draft-select-btn {
    padding: var(--s-1) var(--s-4); border: none; border-radius: var(--radius-s);
    background-color: var(--surface-2);
    cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.draft-select-btn:hover { background: var(--accent); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.draft-select-btn.selected { background: var(--accent); color: var(--text); pointer-events: none; }

/* Markdown rendering */
.msg-md { white-space: normal; }
.msg-md h1, .msg-md h2, .msg-md h3, .msg-md h4 { margin: var(--s-2) 0 var(--s-1); color: var(--text); font-weight: var(--weight-bold); }
.msg-md h1 { font-size: var(--text-reading); }
.msg-md h2 { font-size: var(--text-base); border-bottom: none; padding-bottom: var(--s-1); }
.msg-md h3 { font-size: var(--text-sm); }
.msg-md h4 { font-size: var(--text-sm); color: var(--text-sub); }
.msg-md p { margin: var(--s-1) 0; }
.msg-md ul, .msg-md ol { margin: var(--s-1) 0; padding-left: var(--s-5); }
.msg-md li { margin: var(--s-1) 0; }
.msg-md li::marker { color: var(--accent); }
.msg-md strong { color: var(--text); font-weight: var(--weight-bold); }
.msg-md em { color: var(--text-sub); font-style: italic; }
.msg-md code { padding: var(--s-1) var(--s-1); border-radius: var(--radius-s); font-size: var(--text-sm); background: var(--surface-hover); color: var(--clr-magenta); font-family: var(--font-mono); }
.msg-md pre { margin: var(--s-1) 0; padding: var(--s-3) var(--s-3); border-radius: var(--radius-s); background: var(--code-block-bg); overflow-x: auto; font-size: var(--text-sm); }
.msg-md pre code { padding: 0; background: none; color: var(--text); }
.msg-md table { width: 100%; border-collapse: collapse; margin: var(--s-1) 0; font-size: var(--text-sm); display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.msg-md th, .msg-md td { padding: var(--s-1) var(--s-2); border: none; text-align: left; }
.msg-md th { background: var(--surface); color: var(--text); font-weight: var(--weight-semibold); }
.msg-md blockquote { margin: var(--s-1) 0; padding: var(--s-1) var(--s-3); padding-left: var(--s-4); position: relative; background: var(--surface); border-radius: var(--radius-s); color: var(--text-sub); font-style: italic; }
.msg-md blockquote::before { content: ''; position: absolute; left: 0; top: var(--s-1); bottom: var(--s-1); width: 3px; border-radius: var(--radius-pill); background: var(--line-bold); }
.msg-md hr { border: none; border-top: none; margin: var(--s-2) 0; }
.msg-md a { color: var(--accent); text-decoration: underline; }

/* Inbox actions — Redesigned */
.inbox-actions {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: none;
}
.inbox-mini-btn {
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-s);
    border: none;
    background: var(--surface); color: var(--text-sub);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--smooth), color var(--smooth), border-color var(--smooth), opacity var(--smooth), transform var(--smooth), box-shadow var(--smooth);
}
.inbox-mini-btn:hover {
    background: var(--surface-hover); color: var(--text);
    border-color: var(--surface-active);
    transform: translateY(var(--hover-lift-sm));
}
.inbox-mini-btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--text); border-color: transparent;
    box-shadow: var(--shadow-glow-teal);
}
.inbox-mini-btn.primary:hover {
    box-shadow: var(--shadow-glow-teal-hover);
    transform: translateY(var(--hover-lift-sm));
}
.inbox-mini-btn.primary:active { transform: scale(var(--active-scale)); }
.inbox-mini-btn.extend {
    border-color: var(--clr-info-bg-lg);
    color: var(--clr-info-light);
    background: var(--clr-info-bg-xs);
}
.inbox-mini-btn.extend:hover {
    background: var(--clr-info-bg-sm);
    border-color: var(--clr-info-bg-xl);
    transform: translateY(var(--hover-lift-sm));
}
.inbox-mini-btn:disabled {
    opacity: 0.35; pointer-events: none;
}
.inbox-status {
    margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--text-sub);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

/* Draft options — Redesigned */
.draft-option {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background: var(--surface);
    cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    margin-bottom: var(--s-2);
}
.draft-option:last-child { margin-bottom: 0; }
.draft-option:hover {
    background: var(--surface-hover);
    border-color: var(--surface-hover);
    transform: translateX(2px);
    box-shadow: var(--shadow-float);
}
.draft-option.choice-selected {
    background-color: var(--clr-green-bg-sm);
    border-color: var(--clr-green-bg-2xl);
    box-shadow: var(--shadow-inset-success);
}
.draft-option.choice-selected .draft-option-num {
    background: linear-gradient(135deg, var(--clr-success-vivid), var(--clr-success));
    box-shadow: var(--shadow-glow-success);
}
.draft-option.choice-selected .draft-option-select {
    background-color: var(--clr-success-vivid);
    color: var(--text);
    border-color: var(--clr-success-vivid);
}
.draft-option[aria-disabled="true"] {
    opacity: 0.5; pointer-events: none;
}

/* ── Command Tools Toggle (inline-unique) ── */
.cmd-tools-toggle {
    padding: var(--s-2) var(--s-5);
}

.cmd-tools-panel {
    padding: var(--s-3) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    animation: slideDown 0.25s var(--easing-smooth);
}

.cmd-tool-section {
    padding: var(--s-2) 0;
}

/* ── Tool Category Groups ── */
.cmd-tools-category {
    padding-bottom: var(--s-1);
}
.cmd-tools-category-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
    padding: var(--s-1) 0 var(--s-1);
}

/* ── Message Group (chat) ── */
.msg-group { margin-bottom: var(--s-2); }
.msg-group .msg:not(:first-child) { padding-top: var(--s-1); }
.msg-group .msg:not(:first-child) .msg-avatar {
    visibility: hidden; height: 0; width: var(--s-5-5);
}
.msg-group .msg:not(:first-child) .msg-meta { display: none; }

/* ── Research Quick Action Buttons ── */
.research-bar {
    display: none; padding: var(--s-3) var(--s-5);
    border-top: none; background: transparent;
}
.research-bar.visible { display: block; }
.research-bar-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--clr-success-bright);
    margin-bottom: var(--s-2); display: flex; align-items: center; gap: var(--s-1);
}
.research-btns { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.research-btn {
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill);
    border: none; background: var(--clr-success-bg-sm);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--clr-success-light);
    cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.research-btn:hover { background: var(--clr-success-bg-lg); color: var(--clr-success-pale); transform: translateY(var(--hover-lift-sm)); }
.research-btn:active { transform: scale(var(--active-scale)); }

/* ── Solo Generator (개별 생성기) ── */
.solo-gen-bar {
    display: none; padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--surface); background: transparent;
}
.solo-gen-bar.visible { display: block; }
.solo-gen-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);
    margin-bottom: var(--s-2);
}
.solo-gen-grid {
    display: flex; gap: var(--s-1); flex-wrap: wrap;
}
.solo-gen-card {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill);
    border: 1px solid transparent; background: var(--surface);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub);
    cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.solo-gen-card:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-card.active {
    background: var(--surface-active); color: var(--accent);
    border-color: var(--surface-w15); font-weight: var(--weight-semibold);
}
.solo-gen-card.running {
    background: var(--clr-success-bg-sm);
    border-color: var(--clr-success-bright);
    color: var(--clr-success-bright);
    pointer-events: none;
    opacity: 0.85;
}
.solo-gen-card.running .solo-gen-icon {
    animation: soloRunPulse 1.5s var(--ease-in-out) infinite;
}
@keyframes soloRunPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.solo-gen-card--chart { border: 1px dashed var(--surface-hover); }
.solo-gen-card--chart:hover { border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-icon { font-size: var(--text-base); }

/* Solo Gen Input Panel */
.solo-gen-input-panel {
    margin-top: var(--s-3); padding: var(--s-4);
    background: var(--surface); border-radius: var(--radius);
    animation: bsPanelSlide var(--duration-base) var(--easing-smooth);
}
.solo-gen-input-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--s-2);
}
.solo-gen-input-agent {
    font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text);
}
.solo-gen-close {
    border: none; background: none; color: var(--text-sub);
    font-size: var(--text-lg); cursor: pointer; padding: var(--s-1);
    line-height: var(--leading-none); transition: color var(--motion-hover);
}
.solo-gen-close:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-skill-hint {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2);
    background: var(--surface-hover); border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--accent); line-height: var(--leading-snug);
}
/* 동적 토글 컨테이너 (전 생성기 공통) */
.solo-gen-toggles { display: flex; flex-direction: column; gap: 0; }
.solo-gen-toggles:empty { display: none; }
/* 개별 토글 행 */
.solo-gen-avec-row {
    display: flex; align-items: center; margin-bottom: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface); border-radius: var(--radius-s);
}
.solo-gen-avec-label {
    display: flex; align-items: center; gap: var(--s-2);
    cursor: pointer; user-select: none;
}
.solo-gen-avec-text {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: var(--text-sub); transition: color var(--motion-hover);
}
.solo-gen-avec-label input:checked ~ .solo-gen-avec-text {
    color: var(--accent);
}
.solo-gen-textarea {
    width: 100%; box-sizing: border-box; min-height: var(--s-11); max-height: clamp(120px, 22vh, 180px);
    padding: var(--s-3); resize: vertical;
    background: var(--bg); border: 1px solid var(--surface-hover);
    border-radius: var(--radius-s); color: var(--text);
    font-size: var(--text-base); font-family: var(--font); line-height: var(--leading-normal);
    transition: border-color var(--motion-hover);
}
.solo-gen-textarea::placeholder { color: var(--text-sub); }
.solo-gen-textarea:focus { outline: none; border-color: var(--line-bold); }
.solo-gen-actions {
    display: flex; align-items: center; gap: var(--s-3);
    margin-top: var(--s-2); flex-wrap: wrap;
}
.solo-gen-attach {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text-sub);
    font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
    font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.solo-gen-attach:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-attached {
    display: flex; gap: var(--s-1); flex-wrap: wrap; flex: 1;
}
.solo-gen-file-tag {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill);
    background: var(--surface-hover); color: var(--text-sub);
    font-size: var(--text-sm); white-space: nowrap;
}
.solo-gen-file-remove {
    border: none; background: none; color: var(--text-sub);
    font-size: var(--text-base); cursor: pointer; padding: 0; margin-left: var(--s-1);
    line-height: var(--leading-none);
}
.solo-gen-file-remove:hover { color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }
/* 이미지 썸네일 카드 */
.solo-gen-file-card {
    position: relative; display: inline-flex; flex-direction: column;
    align-items: center; gap: var(--s-1);
    padding: var(--s-1); border-radius: var(--radius-s);
    background: var(--surface-hover); max-width: clamp(56px, 19vw, 72px);
}
.solo-gen-thumb-lg {
    width: 56px; height: 56px; border-radius: var(--radius-s);
    object-fit: cover; flex-shrink: 0;
}
.solo-gen-thumb-name {
    font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-tight);
    max-width: var(--s-10); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-align: center;
}
.solo-gen-file-remove-card {
    position: absolute; top: 0; right: 0;
    width: var(--s-4-5); height: var(--s-4-5); border-radius: 50%;
    background: var(--surface-active); border: none;
    color: var(--text-sub); font-size: var(--text-sm);
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; line-height: var(--leading-none);
    opacity: 0; transition: opacity var(--motion-hover);
    transform: translate(4px, -4px);
}
.solo-gen-file-card:hover .solo-gen-file-remove-card { opacity: 1; transform: translateY(var(--hover-lift-sm)); }
.solo-gen-file-remove-card:hover { color: var(--clr-error); background: var(--surface-w20); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-send {
    margin-left: auto; padding: var(--s-2) var(--s-5);
    border: none; border-radius: var(--radius-s);
    background: var(--accent); color: var(--bg);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.solo-gen-send:hover { filter: brightness(var(--hover-brightness)); transform: translateY(var(--hover-lift-sm)); }
.solo-gen-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@keyframes soloShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.solo-gen-shake { animation: soloShake var(--duration-moderate) var(--easing-smooth); border-color: var(--clr-error) !important; }
/* Solo Gen 드롭존 래퍼 */
.solo-gen-dropzone {
    position: relative;
    border: 2px dashed transparent;
    border-radius: var(--radius-s);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.solo-gen-dropzone.drag-over {
    border-color: var(--accent);
    background: var(--surface-w10);
}
.solo-gen-dropzone.drag-over .solo-gen-textarea {
    border-color: transparent;
}
.solo-gen-drop-hint {
    display: none;
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-align: center;
    padding: var(--s-1) 0;
}
.solo-gen-dropzone.drag-over .solo-gen-drop-hint {
    display: block;
    color: var(--accent);
}
/* Solo Gen 드래그 힌트 (textarea 직접) */
.solo-gen-textarea.drag-over {
    border-color: var(--accent);
    background: var(--surface-w10);
}
@media (max-width: 640px) {
    .solo-gen-bar { padding: var(--s-2) var(--s-3); }
    .solo-gen-grid { gap: var(--s-1); }
    .solo-gen-card { padding: var(--s-1) var(--s-3); font-size: var(--text-sm); }
    .solo-gen-input-panel { padding: var(--s-3); }
    .solo-gen-textarea { min-height: clamp(48px, 10vh, 60px); font-size: var(--text-base); }
    .solo-gen-actions { gap: var(--s-2); }
    .solo-gen-send { padding: var(--s-2) var(--s-4); }
    .solo-gen-thumb-lg { width: var(--s-8); height: var(--s-8); }
    .solo-gen-file-card { max-width: var(--s-9-5); }
    .solo-gen-file-remove-card { opacity: 1; }
}

/* ── Shortcut Chips (tools panel 내부) ── */
.shortcut-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    padding: var(--s-2) 0;
}
.shortcut-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    font-family: var(--font);
    white-space: nowrap;
}
.shortcut-chip:hover {
    background: var(--surface-hover);
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.shortcut-chip:active {
    transform: scale(0.97);
}
.shortcut-chip .shortcut-remove {
    font-size: var(--text-sm);
    opacity: 0;
    margin-left: var(--s-1);
    transition: opacity var(--motion-hover);
    cursor: pointer;
}
.shortcut-chip:hover .shortcut-remove {
    opacity: 0.6;
    transform: translateY(var(--hover-lift-sm));
}
.shortcut-chip .shortcut-remove:hover {
    opacity: 1;
    color: var(--clr-error-bright);
    transform: translateY(var(--hover-lift-sm));
}
.shortcut-add {
    border-style: dashed;
    color: var(--text-sub);
}
.shortcut-add:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.shortcuts-bar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    cursor: pointer;
    user-select: none;
}
.shortcuts-bar-label:hover {
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.shortcuts-bar-chevron {
    font-size: var(--text-sm);
    color: var(--text-sub);
    transition: transform var(--smooth);
}
.shortcuts-bar.collapsed .shortcuts-bar-chevron {
    transform: rotate(-90deg);
}
.shortcuts-bar.collapsed .shortcut-chips {
    display: none;
}

/* ── Shortcut Empty State ── */
.shortcut-empty-msg {
    font-size: var(--text-sm);
    color: var(--text-sub);
    padding: var(--s-1) var(--s-2);
}

/* ── Project Shortcuts Bar (floating capsule — 컨테이너 없음) ── */
.shortcut-bar {
    padding: var(--s-1) var(--s-4);
    border: none;
    background: none;
}

.shortcut-bar-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    align-items: center;
    justify-content: center;
}

/* ── shortcut-bar 내 공통 캡슐 스타일 (모든 버튼 통일) ── */
.shortcut-btn,
.shortcut-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--capsule-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
    height: var(--s-5-5);
    box-shadow: var(--capsule-shadow);
    /* .glass 또는 .glass--light 클래스와 조합 사용 */
}

.shortcut-btn:hover,
.shortcut-item:hover {
    background: var(--glass-medium);
    color: var(--text);
    box-shadow: var(--capsule-hover-shadow);
    transform: translateY(var(--hover-lift-sm));
}


.shortcut-btn .shortcut-icon,
.shortcut-item .shortcut-icon { font-size: var(--text-sm); }

/* 에이전트 타입 — 아이콘에 틸 계열 색상 */
.shortcut-item.type-agent .shortcut-icon {
    color: var(--accent);
}
.shortcut-item.type-agent:hover {
    border-color: var(--surface-w12);
    transform: translateY(var(--hover-lift-sm));
}

/* 스크립트 타입 — 아이콘에 녹색 계열 색상 */
.shortcut-item.type-script .shortcut-icon {
    color: var(--clr-success-bright);
}
.shortcut-item.type-script:hover {
    border-color: var(--clr-success-bg-2xl);
    transform: translateY(var(--hover-lift-sm));
}

.shortcut-delete-btn {
    opacity: 0;
    margin-left: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    transition: opacity var(--motion-hover);
}

.shortcut-item:hover .shortcut-delete-btn { opacity: 0.5; transform: translateY(var(--hover-lift-sm)); }
.shortcut-delete-btn:hover { opacity: 1; color: var(--clr-error); transform: translateY(var(--hover-lift-sm)); }

.shortcut-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
}

.shortcut-add-btn:hover {
    border-color: var(--text-sub);
    border-style: solid;
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* + 버튼이 job-link-bar에 들어갔을 때 */
.job-link-bar .shortcut-add-btn {
    margin-left: var(--s-1);
}

/* ── 폴더 첨부 선택기 (job-link-bar 내) ── */
.cwd-selector {
    position: relative;
    /* margin-left 제거 — jlb-project-group이 space-between으로 배치 담당 */
}
.cwd-selector-btn {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
    max-width: var(--card-min-sm);
    line-height: var(--leading-tight);
}
.cwd-selector-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    background-color: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
/* 폴더가 첨부된 상태 */
.cwd-selector-btn.has-folder {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--surface-active);
}
.cwd-selector-icon { font-size: var(--text-sm); flex-shrink: 0; }
.cwd-selector-name { overflow: hidden; text-overflow: ellipsis; }
.cwd-selector-chevron { font-size: var(--text-sm); color: var(--text-sub); }

.cwd-dropdown {
    position: absolute;
    bottom: calc(100% + var(--s-1));
    right: 0;
    min-width: var(--layout-lg);
    max-height: clamp(200px, 40vh, 300px);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
}
.cwd-dropdown-header {
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-sub);
    border-bottom: 1px solid var(--border);
}
.cwd-dropdown-list {
    max-height: var(--card-min-sm);
    overflow-y: auto;
    padding: var(--s-1);
}
.cwd-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    width: 100%;
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.cwd-dropdown-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.cwd-dropdown-item.active { background: var(--surface-active); color: var(--accent); }
.cwd-item-check { width: 16px; flex-shrink: 0; color: var(--accent); font-size: var(--text-sm); }
.cwd-item-name { font-weight: var(--weight-medium); white-space: nowrap; }
.cwd-item-path {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
    max-width: clamp(120px, 20vw, 180px);
}
/* 경로가 서버에 존재하지 않을 때 경고 표시 */
.cwd-dropdown-item.cwd-path-invalid .cwd-item-path { color: var(--clr-warning); }
.cwd-dropdown-item.cwd-path-invalid .cwd-item-name { opacity: 0.6; }
.cwd-dropdown-add {
    display: block;
    width: 100%;
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.cwd-dropdown-add:hover { background: var(--surface-hover); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

/* ── Shortcut Type Toggle (모달 내) ── */
.shortcut-type-toggle {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-1);
}

.shortcut-type-btn {
    flex: 1;
    padding: var(--s-1) var(--s-3);
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}

.shortcut-type-btn.active {
    background: var(--surface-active);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.shortcut-type-btn:hover:not(.active) {
    color: var(--text-sub);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

.shortcut-type-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    font-style: italic;
}

/* 단축키 바 반응형 */
@media (max-width: 640px) {
    .shortcut-bar { padding: var(--s-1) var(--s-2); }
    .shortcut-bar-items { gap: var(--s-1); }
    .shortcut-btn,
    .shortcut-item { font-size: var(--text-sm); height: 26px; }
    .shortcut-add-btn { width: 22px; height: 22px; font-size: var(--text-sm); }
}
@media (max-width: 375px) {
    .shortcut-bar { padding: var(--s-1) var(--s-1); }
    .dev-bar { padding: var(--s-1) var(--s-2); gap: var(--s-1); }
}

/* ══════════════════════════════════════════
   Scroll to Bottom — 인스타그램 DM 스타일
   플로팅 버튼 (cmd-feed-body + chat-body)
   ══════════════════════════════════════════ */

/* 메시지 영역 래퍼 — 스크롤 버튼 position 기준점 */
.chat-messages-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── 플로팅 버튼 기본 스타일 ── */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    z-index: var(--z-base, 1);

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-7);
    height: var(--s-7);
    border-radius: 50%;
    border: 1px solid var(--surface-hover);
    /* .glass 또는 .glass--light 클래스와 조합 사용 */
    box-shadow: var(--shadow-fab-base);

    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-hover),
                visibility var(--motion-hover),
                transform var(--motion-hover),
                background var(--motion-hover),
                color var(--motion-hover),
                box-shadow var(--motion-hover);
}

/* ── 표시 상태 (JS에서 .visible 토글) ── */
.scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

/* ── 호버 — accent glow ── */
.scroll-to-bottom-btn:hover {
    background: var(--surface-hover);
    color: var(--accent);
    border-color: var(--line-bold);
    box-shadow: var(--shadow-fab-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 클릭 피드백 ── */
.scroll-to-bottom-btn:active {
    transform: translateX(-50%) scale(0.92);
    transition-duration: var(--duration-fast);
}

/* ── 화살표 아이콘 (SVG 또는 유니코드 ↓) ── */
.scroll-to-bottom-btn .scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-4);
    height: var(--s-4);
    transition: transform var(--motion-hover);
}

.scroll-to-bottom-btn:hover .scroll-arrow {
    transform: translateY(1px);
}

/* ── 새 메시지 뱃지 (선택적 — JS에서 data-count 설정) ── */
.scroll-to-bottom-btn .scroll-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-1);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--motion-hover), transform var(--motion-hover);
    pointer-events: none;
    box-shadow: var(--shadow-ring-bg);
}

.scroll-to-bottom-btn .scroll-badge.has-count {
    opacity: 1;
    transform: scale(1);
}

/* ── 빈 요소 방지 ── */
.scroll-to-bottom-btn:empty { display: none; }
.scroll-badge:empty { display: none; }

/* ── 반응형: 768px — 모바일 터치 타겟 확대 ── */
@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        width: var(--s-8-5);
        height: var(--s-8-5);
        font-size: var(--text-lg);
        bottom: var(--s-3);
    }
}

/* ── 반응형: 640px ── */
@media (max-width: 640px) {
    .scroll-to-bottom-btn {
        width: var(--s-8-5);
        height: var(--s-8-5);
        font-size: var(--text-reading);
        bottom: var(--s-3);
    }
    .scroll-to-bottom-btn .scroll-badge {
        min-width: var(--s-4-5);
        height: var(--s-4-5);
        font-size: var(--text-sm);
    }
}

/* ── 반응형: 375px — 최소 터치 타겟 유지 ── */
@media (max-width: 375px) {
    .scroll-to-bottom-btn {
        width: var(--s-8-5);
        height: var(--s-8-5);
        font-size: var(--text-base);
        bottom: var(--s-2);
    }
}

/* ══════════════════════════════════════════
   AI 모델 프리셋 — 명령 입력 바 인라인 세그먼트
   채팅 입력 메타(chat-input-meta) 영역에 항상 표시
   ══════════════════════════════════════════ */

/* ── 인라인 프리셋 래퍼 ── */
.tpl-inline-preset {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}

/* 프리셋 라벨 */
.tpl-inline-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

/* 컴팩트 세그먼트 컨트롤 — 입력 바 전용 */
.tpl-inline-segment {
    display: inline-flex;
    gap: 0;
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-1);
    border: 1px solid transparent;
}

/* 컴팩트 세그먼트 버튼 — 기존 tpl-segment-btn 축소판 */
.tpl-inline-seg-btn {
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    font-family: var(--font);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-none);
    white-space: nowrap;
}

.tpl-inline-seg-btn.active {
    background: var(--accent);
    color: var(--bg);
    box-shadow: var(--shadow-glow-accent-sm);
}

.tpl-inline-seg-btn:hover:not(.active):not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

.tpl-inline-seg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 상세 관리 링크 — 작은 텍스트 버튼 */
.tpl-inline-detail {
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
    border: none;
    background: none;
    font-family: var(--font);
}

.tpl-inline-detail:hover {
    color: var(--accent);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 인라인 프리셋 반응형 ── */
@media (max-width: 768px) {
    .tpl-inline-label {
        display: none;
    }
}

@media (max-width: 640px) {
    .tpl-inline-seg-btn {
        padding: var(--s-1) var(--s-1);
        font-size: var(--text-sm);
    }
    .tpl-inline-detail {
        display: none;
    }
}

@media (max-width: 375px) {
    .tpl-inline-segment {
        gap: 0;
    }
    .tpl-inline-seg-btn {
        padding: var(--s-1) var(--s-1);
        font-size: var(--text-sm);
        letter-spacing: var(--tracking-normal);
    }
}

/* 빈 요소 방지 */
.tpl-inline-preset:empty { display: none; }
.tpl-inline-segment:empty { display: none; }

/* ══════════════════════════════════════════
   메시지 답장(Reply) UI
   ══════════════════════════════════════════ */

/* ── 1. 인용 블록 (Quote Block) — 메시지 버블 내 원본 메시지 표시 ── */
.reply-quote {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    padding-left: var(--s-4);
    margin-bottom: var(--s-2);
    background: var(--surface);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--motion-hover);
    overflow: hidden;
}
.reply-quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--s-2);
    bottom: var(--s-2);
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--line-bold);
}
.reply-quote:hover {
    background: var(--surface);
}
.reply-quote-body {
    flex: 1;
    min-width: 0;
}
.reply-quote-sender {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    margin-bottom: var(--s-1);
    line-height: var(--leading-tight);
}
.reply-quote-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* 원본 메시지를 찾을 수 없는 경우 */
.reply-quote--missing .reply-quote-text {
    color: var(--text-sub);
    font-style: italic;
}
/* 빈 요소 방지 */
.reply-quote:empty { display: none; }

/* ── 작업완료 → 원본 명령 인용 블록 ── */
.reply-quote--origin-cmd {
    background: var(--surface);
}
.reply-quote--origin-cmd::before {
    background: var(--clr-info);
}
.reply-quote--origin-cmd:hover {
    background: var(--surface-hover);
}
.reply-quote--origin-cmd .reply-quote-sender {
    color: var(--clr-info);
}

/* ── comm-bubble 내부 인용 블록 (소통 탭) ── */
.comm-bubble .reply-quote {
    margin-bottom: var(--s-1);
}

/* ── chat-bubble 내부 인용 블록 (명령 탭) ── */
.chat-bubble .reply-quote {
    margin-bottom: var(--s-1);
}

/* ── 2. 답장 미리보기 바 — 입력창 위에 표시 ── */
.reply-preview-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface);
    border-top: none;
    animation: replyBarSlideUp 0.2s var(--easing-sheet);
}
.reply-preview-bar .reply-quote {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding: var(--s-1) var(--s-3);
}
.reply-preview-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    flex-shrink: 0;
}
.reply-preview-close:hover {
    color: var(--clr-error-bright);
    background: var(--clr-error-bg-sm);
    transform: translateY(var(--hover-lift-sm));
}
@keyframes replyBarSlideUp {
    from {
        opacity: 0;
        transform: translateY(var(--s-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 빈 요소 방지 */
.reply-preview-bar:empty { display: none; }

/* ── 3. 우클릭 컨텍스트 메뉴 ── */
.msg-context-menu {
    position: fixed;
    z-index: var(--z-modal);
    min-width: clamp(120px, 20vw, 180px);
    padding: var(--s-1);
    /* .glass 또는 .glass--light 클래스와 조합 사용 */
    border-radius: var(--radius);
    box-shadow: var(--elevation-3);
    animation: ctxMenuFadeIn 0.15s var(--easing-sheet);
}
.msg-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    width: 100%;
    text-align: left;
    white-space: nowrap;
}
.msg-context-menu-item:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateX(3px);
}
.msg-context-menu-item .ctx-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    width: var(--s-4-5);
    text-align: center;
}
.msg-context-menu-item .ctx-label {
    flex: 1;
}
/* 답장 항목 강조 */
.msg-context-menu-item--reply:hover {
    background: var(--surface-hover);
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
/* 복사 항목 */
.msg-context-menu-item--copy:hover {
    background: var(--clr-info-bg-sm);
    color: var(--clr-info-bright);
    transform: translateY(var(--hover-lift-sm));
}
/* 구분선 */
.msg-context-menu-divider {
    height: 1px;
    background: var(--line);
    margin: var(--s-1) var(--s-1);
}
@keyframes ctxMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    60% {
        opacity: 1;
        transform: scale(1.01);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── 4. 답장 UI — 반응형 ── */
@media (max-width: 960px) {
    .reply-preview-bar {
        padding: var(--s-2) var(--s-3);
    }
}
@media (max-width: 768px) {
    .reply-quote {
        padding: var(--s-1) var(--s-3);
    }
    .reply-preview-bar {
        padding: var(--s-1) var(--s-3);
    }
    .msg-context-menu {
        min-width: clamp(100px, 18vw, 160px);
    }
}
@media (max-width: 640px) {
    .reply-quote {
        padding: var(--s-1) var(--s-2);
        gap: var(--s-1);
    }
    .reply-quote-sender {
        font-size: var(--text-sm);
    }
    .reply-quote-text {
        font-size: var(--text-sm);
    }
    .reply-preview-bar {
        padding: var(--s-1) var(--s-2);
        gap: var(--s-1);
    }
    .reply-preview-close {
        width: var(--s-5);
        height: var(--s-5);
        font-size: var(--text-lg);
    }
    .msg-context-menu-item {
        padding: var(--s-2) var(--s-2);
        font-size: var(--text-sm);
    }
}
@media (max-width: 375px) {
    .reply-quote {
        padding: var(--s-1) var(--s-2);
    }
    .reply-preview-bar {
        padding: var(--s-1) var(--s-2);
    }
    .msg-context-menu {
        min-width: var(--s-20);
        padding: var(--s-1);
    }
    .msg-context-menu-item {
        padding: var(--s-1) var(--s-2);
        gap: var(--s-1);
    }
}

/* ── 5. 스크롤 하이라이트 — 인용 클릭 → 원본 메시지 2초 강조 ── */
.msg-reply-highlight {
    animation: replyHighlightPulse 2s var(--easing-out);
}
@keyframes replyHighlightPulse {
    0% {
        background-color: var(--surface-w20);
        box-shadow: var(--shadow-ring-glow);
    }
    70% {
        background-color: var(--surface-w5);
        box-shadow: 0 0 0 0 transparent;
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* ── 6. 모바일 바텀 액션시트 — 롱프레스 시 표시 ── */
.msg-action-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    animation: actionSheetOverlayIn var(--duration-base) var(--easing-smooth);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
.msg-action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal);
    background: var(--bg-raised);
    border-top: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--s-2) 0 var(--s-4);
    animation: actionSheetSlideUp 0.3s var(--easing-sheet);
}
.msg-action-sheet-handle {
    width: var(--s-7);
    height: var(--s-1);
    background: var(--surface-hover);
    border-radius: var(--radius-pill);
    margin: 0 auto var(--s-3);
}
.msg-action-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background var(--motion-hover);
    width: 100%;
    text-align: left;
}
.msg-action-sheet-item:active {
    background: var(--surface-hover);
}
.msg-action-sheet-item .ctx-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
    width: var(--s-5);
    text-align: center;
}
/* 답장 항목 강조 (모바일) */
.msg-action-sheet-item--reply:active {
    background: var(--surface-active);
    color: var(--accent);
}
/* 복사 항목 (모바일) */
.msg-action-sheet-item--copy:active {
    background: var(--clr-info-bg-sm);
    color: var(--clr-info-bright);
}
/* 취소 버튼 */
.msg-action-sheet-cancel {
    display: block;
    width: calc(100% - var(--s-5) * 2);
    margin: var(--s-2) auto 0;
    padding: var(--s-3);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.msg-action-sheet-cancel:active {
    background: var(--surface);
    color: var(--text);
}
@keyframes actionSheetSlideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes actionSheetOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* 빈 요소 방지 */
.msg-action-sheet:empty { display: none; }

/* ── 7. 모바일 액션시트 — 반응형 ── */
@media (max-width: 640px) {
    .msg-action-sheet-item {
        padding: var(--s-3) var(--s-5);
        font-size: var(--text-lg);
    }
}
@media (max-width: 375px) {
    .msg-action-sheet-item {
        padding: var(--s-2) var(--s-4);
        font-size: var(--text-base);
        gap: var(--s-2);
    }
    .msg-action-sheet-cancel {
        padding: var(--s-2);
        font-size: var(--text-base);
    }
}

/* ── 동일 메시지 그루핑 배지 ── */
.chat-bubble-group-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-warning-light);
    background: var(--clr-warning-bg-sm);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    margin-top: var(--s-2);
}

/* ══════════════════════════════════════════
   Compact Action Bar (불스토리봇 명령 UI 리디자인)
   ══════════════════════════════════════════ */

/* ── Action Bar: 3개 버튼이 한 줄에 표시 ── */
.bs-action-bar {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
}
.bs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid var(--surface-hover);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.bs-action-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.bs-action-btn.active {
    background: var(--surface-active);
    border-color: var(--accent);
    color: var(--accent);
}
.bs-action-btn.active .bs-action-chevron {
    transform: rotate(180deg);
}
.bs-action-chevron {
    font-size: var(--text-sm);
    transition: transform var(--motion-hover);
    opacity: 0.6;
}
.bs-action-btn--util {
    margin-left: auto;
    border-style: dashed;
    border-color: var(--surface-hover);
    color: var(--text-sub);
}
.bs-action-btn--util:hover {
    border-color: var(--clr-purple-light);
    color: var(--clr-purple-light);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 확장 패널 (아코디언) ── */
.bs-panel {
    display: none;
    padding: var(--s-1) var(--s-4);
    animation: bsPanelSlide var(--duration-base) var(--easing-smooth);
}
.bs-panel.open {
    display: block;
}
@keyframes bsPanelSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 생성기 칩 ── */
.bs-gen-chips {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.bs-gen-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid var(--surface-hover);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.bs-gen-chip:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-chip-hover);
    border-color: var(--line-bold);
}
.bs-gen-chip.active {
    background: var(--surface-active);
    color: var(--accent);
    border-color: var(--surface-w15);
    font-weight: var(--weight-semibold);
}
.bs-gen-chip.running {
    background: var(--clr-success-bg-sm);
    border-color: var(--clr-success-bright);
    color: var(--clr-success-bright);
    pointer-events: none;
    animation: bsChipRunPulse 1.8s var(--ease-in-out) infinite;
}
.bs-gen-chip.running .bs-gen-chip-label {
    animation: bsChipLabelPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes bsChipRunPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--surface-w15); }
    50% { box-shadow: 0 0 12px 3px var(--surface-w20); }
}
@keyframes bsChipLabelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* ▶ 단독 실행 트리거 */
.bs-solo-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: 50%;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    margin-left: var(--s-1);
    flex-shrink: 0;
}
.bs-solo-trigger:hover {
    background: var(--accent);
    color: var(--bg);
    transform: scale(1.15);
}
.bs-solo-trigger:active {
    transform: scale(0.9);
}
.bs-gen-chip.running .bs-solo-trigger {
    display: none;
}
.bs-gen-chip--chart {
    border-style: dashed;
}

/* ── 리서치 칩 ── */
.bs-research-chips {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.bs-research-chip {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    border: none;
    background: var(--clr-success-bg-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--clr-success-light);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
}
.bs-research-chip:hover {
    background: var(--clr-success-bg-lg);
    color: var(--clr-success-pale);
    transform: translateY(var(--hover-lift-sm));
}
.bs-research-chip:active {
    transform: scale(var(--active-scale));
}

/* ── 콘텐츠 타입 인라인 칩 (채팅 입력줄 위) ── */
.bs-content-chips {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    border-top: 1px solid var(--surface);
}
.bs-chips-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    margin-right: var(--s-1);
    white-space: nowrap;
}
.bs-content-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--surface);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    padding: 0;
    opacity: 0.4;
}
.bs-content-chip.selected {
    opacity: 1;
    background-color: var(--surface-active);
    border-color: var(--surface-w15);
}
.bs-content-chip:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ── Compact Action Bar 반응형 ── */
@media (max-width: 768px) {
    .bs-action-bar {
        padding: var(--s-1) var(--s-3);
    }
    .bs-action-btn {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .bs-panel {
        padding: var(--s-1) var(--s-3);
    }
    .bs-gen-chip {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .bs-research-chip {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    .bs-content-chips {
        padding: var(--s-1) var(--s-3);
    }
    .bs-content-chip {
        width: var(--s-5);
        height: var(--s-5);
        font-size: var(--text-sm);
    }
}

/* ══════════════════════════════════════════
   메시지 전문 보기 모달
   ══════════════════════════════════════════ */
.msg-full-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9000);
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    justify-content: center;
    align-items: flex-end;
}
.msg-full-overlay.active { display: flex; }

.msg-full-sheet {
    background: var(--bg-raised);
    border-radius: var(--radius) var(--radius) 0 0;
    width: 100%;
    max-width: clamp(320px, 80vw, 640px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: msgSheetUp 250ms var(--easing-sheet);
}
@keyframes msgSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.msg-full-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    flex-shrink: 0;
}
.msg-full-sender {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.msg-full-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    margin-left: auto;
}
.msg-full-close {
    cursor: pointer;
    color: var(--text-sub);
    font-size: var(--text-lg);
    line-height: var(--leading-none);
    padding: var(--s-1);
    margin-left: var(--s-2);
    border-radius: var(--radius-s);
    transition: color var(--smooth), background var(--smooth);
}
.msg-full-close:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

.msg-full-body {
    padding: var(--s-4) var(--s-5);
    overflow-y: auto;
    flex: 1;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-sub);
    word-break: break-word;
}
.msg-full-body .msg-md p { margin-bottom: var(--s-2); }
.msg-full-body .msg-md pre {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    overflow-x: auto;
    font-size: var(--text-sm);
    margin: var(--s-2) 0;
}
.msg-full-body .msg-md code {
    background: var(--surface);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    font-size: 0.9em;
}
.msg-full-body .msg-md ul,
.msg-full-body .msg-md ol {
    padding-left: var(--s-5);
    margin: var(--s-2) 0;
}
.msg-full-body .msg-md table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: var(--s-2) 0;
}
.msg-full-body .msg-md table td,
.msg-full-body .msg-md table th {
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--line);
}

/* 클릭 가능 메시지 버블 힌트 */
.chat-bubble-text.clickable,
.comm-bubble-text.clickable,
.sd-msg-body.clickable {
    cursor: pointer;
}
.chat-bubble-text.clickable:active,
.comm-bubble-text.clickable:active,
.sd-msg-body.clickable:active {
    opacity: 0.7;
}

/* 데스크톱: 바텀시트 → 센터 모달 */
@media (min-width: 768px) {
    .msg-full-overlay { align-items: center; }
    .msg-full-sheet {
        border-radius: var(--radius);
        max-height: 70vh;
        animation: modalIn 250ms var(--easing-sheet);
    }
}

/* ── 인라인 질문 UI (Phase 3 — user-question) ─────────── */
.uq-row {
    padding: var(--s-1) 0;
}
.uq-card {
    background: var(--bg-raised);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    max-width: var(--layout-xl);
}
.uq-card--new {
    animation: uqSlideIn var(--duration-slow) var(--easing-slide);
}
@keyframes uqSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.uq-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.uq-sender {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.uq-label {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    background: var(--surface-w8);
    color: var(--accent);
    border-radius: var(--radius-s);
    font-weight: var(--weight-medium);
}
.uq-time {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: auto;
}
.uq-question {
    font-size: var(--text-base);
    color: var(--text);
    line-height: var(--leading-normal);
    margin-bottom: var(--s-3);
}
.uq-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.uq-option {
    padding: var(--s-1-5) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
}
.uq-option:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.uq-option:active {
    background: var(--surface-active);
}
.uq-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.uq-option--custom {
    color: var(--text-sub);
    border-style: dashed;
}
.uq-option--custom:hover {
    color: var(--accent);
    border-style: solid;
    transform: translateY(var(--hover-lift-sm));
}
.uq-custom-wrap {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-2);
}
.uq-custom-input {
    flex: 1;
    padding: var(--s-1-5) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
}
.uq-custom-input::placeholder {
    color: var(--text-sub);
}
.uq-custom-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-dim);
}
.uq-custom-submit {
    padding: var(--s-1-5) var(--s-3);
    background: var(--accent);
    color: var(--accent-on);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: opacity var(--motion-hover);
}
.uq-custom-submit:hover {
    opacity: 0.85;
    transform: translateY(var(--hover-lift-sm));
}
.uq-custom-submit:active {
    transform: scale(0.96);
}
.uq-custom-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.uq-answered {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--green-bg);
    border-radius: var(--radius-s);
    margin-top: var(--s-2);
}
.uq-answered-icon {
    display: flex;
    align-items: center;
    color: var(--green);
}
.uq-answered-text {
    color: var(--text);
    font-size: var(--text-sm);
}
/* 답변 완료 후 카드 스타일 — 시각적 완료 피드백 */
.uq-card--answered {
    border-color: var(--green);
    opacity: 0.85;
}

/* 모바일 반응형 — 질문 UI */
@media (max-width: 768px) {
    .uq-card { max-width: 100%; }
}
@media (max-width: 640px) {
    .uq-option { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
    .uq-question { font-size: var(--text-sm); }
}
@media (max-width: 375px) {
    .uq-card { padding: var(--s-2); }
    .uq-options { gap: var(--s-1); }
    .uq-custom-wrap { flex-direction: column; }
    .uq-custom-submit { align-self: flex-end; }
}
/* 접근성: 모션 감소 설정 시 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
    .uq-card--new { animation: none; }
    .msg-context-menu { animation: none; opacity: 1; transform: none; }
    .msg-context-menu-item:hover {  transform: none; }
}

/* ── 인라인 선택 요청 UI (user_choice → 채팅 피드 내 버튼) ─────────── */
.uc-row { padding: var(--s-1) 0; }
.uc-card {
    background: var(--bg-raised);
    border: 1px solid var(--warning-dim, var(--line-bold));
    border-radius: var(--radius-s);
    padding: var(--s-3);
    max-width: var(--layout-xl);
}
.uc-card--new { animation: uqSlideIn var(--duration-slow) var(--easing-slide); }
.uc-header {
    display: flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.uc-sender {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text);
}
.uc-label {
    font-size: var(--text-sm); padding: var(--s-1) var(--s-1);
    background: var(--warning-dim, var(--surface-2));
    color: var(--warning, var(--accent));
    border-radius: var(--radius-s); font-weight: var(--weight-medium);
}
.uc-timer {
    font-size: var(--text-sm); color: var(--text-sub); margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.uc-timer--urgent { color: var(--red); font-weight: var(--weight-semibold); }
.uc-timer--expired { color: var(--text-sub); }
.uc-orig-cmd {
    font-size: var(--text-sm); color: var(--text-sub); margin-bottom: var(--s-2);
    padding: var(--s-1) var(--s-2); background: var(--surface); border-radius: var(--radius-s);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uc-response {
    font-size: var(--text-sm); color: var(--text-sub);
    line-height: var(--leading-normal); margin-bottom: var(--s-2);
    white-space: pre-wrap;
}
.uc-question {
    font-size: var(--text-base); color: var(--text);
    line-height: var(--leading-normal); margin-bottom: var(--s-3);
}
.uc-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.uc-option {
    padding: var(--s-1-5) var(--s-3); background: var(--surface);
    border: 1px solid var(--line-bold); border-radius: var(--radius-s);
    color: var(--text); font-size: var(--text-sm); font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), transform var(--motion-hover);
}
.uc-option:hover { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }
.uc-option:active { background: var(--surface-active); }
.uc-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uc-option--custom { color: var(--text-sub); border-style: dashed; }
.uc-option--custom:hover { color: var(--accent); border-style: solid; transform: translateY(var(--hover-lift-sm)); }
.uc-option--extend {
    color: var(--text-sub); border-style: dashed; font-size: var(--text-sm);
}
.uc-option--extend:hover { color: var(--warning, var(--accent)); border-color: var(--warning, var(--accent)); transform: translateY(var(--hover-lift-sm)); }
.uc-option--extend:disabled { opacity: 0.5; cursor: wait; pointer-events: none; }
.uc-custom-wrap { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.uc-custom-input {
    flex: 1; padding: var(--s-1-5) var(--s-3); background: var(--surface);
    border: 1px solid var(--line-bold); border-radius: var(--radius-s);
    color: var(--text); font-size: var(--text-sm); font-family: var(--font);
}
.uc-custom-input::placeholder { color: var(--text-sub); }
.uc-custom-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring-dim); }
.uc-custom-submit {
    padding: var(--s-1-5) var(--s-3); background: var(--accent); color: var(--accent-on);
    border: none; border-radius: var(--radius-s); font-size: var(--text-sm);
    font-weight: var(--weight-semibold); font-family: var(--font); cursor: pointer;
    transition: opacity var(--motion-hover);
}
.uc-custom-submit:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }
.uc-custom-submit:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.uc-custom-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.uc-answered {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); background: var(--green-bg);
    border-radius: var(--radius-s); margin-top: var(--s-2);
}
.uc-answered-icon { display: flex; align-items: center; color: var(--green); }
.uc-answered-text { color: var(--text); font-size: var(--text-sm); }
.uc-card--answered { border-color: var(--green); opacity: 0.85; }
.uc-card--timedout { border-color: var(--text-sub); opacity: 0.6; }
@media (max-width: 768px) { .uc-card { max-width: 100%; } }
@media (max-width: 640px) {
    .uc-option { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
    .uc-question { font-size: var(--text-sm); }
    .uc-response { font-size: var(--text-sm); }
}
@media (max-width: 375px) {
    .uc-card { padding: var(--s-2); }
    .uc-options { gap: var(--s-1); }
    .uc-custom-wrap { flex-direction: column; }
    .uc-custom-submit { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .uc-card--new { animation: none; } }

/* ── 목차 편집 UI (bullstory 기획 모드) ─────────────────────────── */
.ol-row { padding: var(--s-1) 0; }
.ol-card {
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    max-width: var(--layout-xl);
    animation: uqSlideIn var(--duration-slow) var(--easing-slide);
}
.ol-header {
    display: flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.ol-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent);
}
.ol-timer {
    font-size: var(--text-sm); color: var(--text-sub); margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.ol-timer--urgent { color: var(--red); font-weight: var(--weight-semibold); }
.ol-timer--expired { color: var(--text-sub); }
.ol-items {
    display: flex; flex-direction: column; gap: var(--s-1);
    margin-bottom: var(--s-3);
}
.ol-item {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1-5) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    cursor: grab;
    transition: background-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover);
}
.ol-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.ol-item--dragging { /* opacity → drag-source-dim 클래스가 제어 */ }
.ol-item--h1 { padding-left: var(--s-2); }
.ol-item--h1 .ol-item-text { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.ol-item--h2 { padding-left: var(--s-4); }
.ol-item--h2 .ol-item-text { font-size: var(--text-sm); }
.ol-item--sub { padding-left: var(--s-6); }
.ol-item--sub .ol-item-text { font-size: var(--text-sm); color: var(--text-sub); }
.ol-item-drag {
    font-size: var(--text-sm); color: var(--text-sub); cursor: grab;
    user-select: none; flex-shrink: 0;
}
.ol-item-text {
    flex: 1; color: var(--text); line-height: var(--leading-normal);
    outline: none; min-width: 0; word-break: break-word;
}
.ol-item-text--editing {
    background: var(--bg); padding: var(--s-0-5) var(--s-1);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-ring-dim-xs);
}
.ol-item-actions {
    display: flex; gap: var(--s-1); flex-shrink: 0;
}
.ol-btn {
    padding: var(--s-0-5) var(--s-1); background: transparent;
    border: none; border-radius: var(--radius-s);
    color: var(--text-sub); font-size: var(--text-sm); cursor: pointer;
    transition: color var(--motion-hover), background-color var(--motion-hover);
    font-family: var(--font);
}
.ol-btn:hover { color: var(--text); background: var(--surface-active); transform: translateY(var(--hover-lift-sm)); }
.ol-btn-del:hover { color: var(--red); transform: translateY(var(--hover-lift-sm)); }
.ol-btn-add {
    padding: var(--s-1) var(--s-3); color: var(--accent);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.ol-btn-add:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.ol-add-wrap { margin-bottom: var(--s-2); }
.ol-footer {
    display: flex; gap: var(--s-2); justify-content: flex-end;
}
.ol-confirm-btn {
    padding: var(--s-1-5) var(--s-4); background: var(--accent); color: var(--accent-on);
    border: none; border-radius: var(--radius-s); font-size: var(--text-sm);
    font-weight: var(--weight-semibold); font-family: var(--font); cursor: pointer;
    transition: opacity var(--motion-hover);
}
.ol-confirm-btn:hover { opacity: 0.85; transform: translateY(var(--hover-lift-sm)); }
.ol-confirm-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.ol-cancel-btn {
    padding: var(--s-1-5) var(--s-4); background: transparent;
    border: none; border-radius: var(--radius-s);
    color: var(--text-sub); font-size: var(--text-sm);
    font-family: var(--font); cursor: pointer;
    transition: color var(--motion-hover);
}
.ol-cancel-btn:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.ol-done {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); background: var(--green-bg);
    border-radius: var(--radius-s); margin-top: var(--s-2);
}
.ol-done-icon { display: flex; align-items: center; color: var(--green); }
.ol-done-text { color: var(--text); font-size: var(--text-sm); }
.ol-card--done { opacity: 0.85; }
.ol-card--cancelled { opacity: 0.5; }
.ol-card--cancelled .ol-done { background: var(--surface); }
.ol-card--cancelled .ol-done-icon { color: var(--text-sub); }
@media (max-width: 768px) { .ol-card { max-width: 100%; } }
@media (max-width: 640px) {
    .ol-item { padding: var(--s-1) var(--s-1-5); }
    .ol-item--h2 { padding-left: var(--s-3); }
    .ol-item--sub { padding-left: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .ol-card { animation: none; } }

/* ── 규모 선택 드롭다운 (.scale-override-select) ── */
.scale-override-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2352525a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-1) center;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover);
    white-space: nowrap;
    line-height: var(--leading-tight);
    min-width: auto;
    width: auto;
    flex-shrink: 0;
}
/* #cmd-target — 텍스트 폭 맞춤 (JS autoResizeCmdTarget 보조) */
#cmd-target {
    width: auto;
    max-width: var(--card-min-sm);
}
.scale-override-select:hover {
    border-color: var(--accent);
    color: var(--text);
    background-color: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.scale-override-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-ring-glow);
}
.scale-override-select.scale-active {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--surface-active);
}
/* cmd-target 자동 폭 (JS autoResizeCmdTarget 연동) */
#cmd-target {
    transition: width var(--motion-hover);
}

/* 규모 드롭다운 모바일 반응형 */
@media (max-width: 768px) {
    .scale-override-select {
        padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
        font-size: var(--text-sm);
    }
}
@media (max-width: 375px) {
    .scale-override-select {
        padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
        font-size: var(--text-sm);
        max-width: var(--s-11);
    }
}

/* ── 칩 토글 드롭업 팝업 (조건부 프롬프트 설정) ── */
.chip-toggle-popup {
    position: fixed;
    z-index: var(--z-dropdown);
    min-width: var(--card-min-sm);
    max-width: var(--layout-lg);
    background: var(--bg-raised);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-popup-sheet);
    overflow: hidden;
    animation: chipPopupSlideUp 0.18s var(--easing-out);
}
@keyframes chipPopupSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chip-toggle-popup-header {
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm, 11px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text);
    background: var(--surface-w3);
}
.chip-toggle-popup-body {
    padding: var(--s-1) var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.chip-toggle-group-label {
    font-size: var(--text-sm, 10px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding-top: var(--s-1);
}
.chip-toggle-capsule-group {
    display: flex;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.chip-toggle-capsule {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill, 999px);
    background: var(--bg-raised);
    color: var(--text-sub);
    font-size: var(--text-sm, 10px);
    font-family: var(--font);
    font-weight: var(--weight-medium, 500);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}
.chip-toggle-capsule:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.chip-toggle-capsule.active {
    background: var(--accent);
    color: var(--accent-on);
    font-weight: var(--weight-semibold, 600);
}
.chip-toggle-row {
    display: flex;
    align-items: center;
}
.chip-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    cursor: pointer;
    user-select: none;
}
.chip-toggle-checkbox {
    width: var(--s-3-5);
    height: var(--s-3-5);
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.chip-toggle-text {
    font-size: var(--text-sm, 11px);
    color: var(--text-sub);
    transition: color var(--ease);
}
.chip-toggle-label input:checked ~ .chip-toggle-text {
    color: var(--accent);
}
.chip-toggle-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3) var(--s-2);
}
.chip-toggle-btn-confirm,
.chip-toggle-btn-cancel {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius, 8px);
    font-size: var(--text-sm, 11px);
    font-family: var(--font);
    font-weight: var(--weight-semibold, 600);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.chip-toggle-btn-confirm {
    background: var(--accent);
    color: var(--accent-on);
}
.chip-toggle-btn-confirm:hover {
    background: var(--accent-deep);
    transform: translateY(var(--hover-lift-sm));
}
.chip-toggle-btn-cancel {
    background: transparent;
    color: var(--text-sub);
}
.chip-toggle-btn-cancel:hover {
    color: var(--text);
    background: var(--surface-w5);
    transform: translateY(var(--hover-lift-sm));
}
/* 토글 설정됨 표시 — 칩에 작은 도트 인디케이터 */
.bs-gen-chip.has-toggles::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--accent);
}
.bs-gen-chip.has-toggles {
    position: relative;
}

/* Screenshot Review styles moved to screenshot-review.css */

/* ══════════════════════════════════════════
   Welcome Hero — 온보딩 첫 방문 UI
   ══════════════════════════════════════════ */
.welcome-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: var(--layout-lg);
    padding: var(--s-6) var(--s-4);
    position: relative;
    text-align: center;
    animation: welcomeFadeIn var(--duration-slow) var(--easing-out);
}
@keyframes welcomeFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 배경 글로우 효과 */
.welcome-hero-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--card-min-sm);
    height: var(--card-min-sm);
    background: radial-gradient(circle, var(--surface-active) 0%, transparent 70%);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.welcome-hero-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.welcome-hero-icon {
    margin-bottom: var(--s-1);
    opacity: 0.9;
}

.welcome-hero-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

.welcome-hero-desc {
    font-size: var(--text-base);
    color: var(--text-sub);
    margin: 0;
    max-width: var(--layout-xl);
    line-height: var(--leading-normal);
}

/* 추천 카드 영역 */
.welcome-hero-cards {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--layout-2xl);
}

.welcome-hero-cards-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0 0 var(--s-3) 0;
}

.welcome-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
}

/* 개별 추천 카드 */
.welcome-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    text-align: left;
    color: var(--text-sub);
    font-family: var(--font);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    /* transition → animations.css §10b 단일 권위 선언으로 통합 */
}
.welcome-card:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: var(--shadow-ring-dim-xs);
    transform: translateY(var(--hover-lift-sm));
}
.welcome-card:active {
    background: var(--surface-active);
}

.welcome-card-icon {
    flex-shrink: 0;
    margin-top: var(--s-0);
    opacity: 0.5;
    transition: opacity var(--motion-hover);
}
.welcome-card:hover .welcome-card-icon {
    opacity: 0.8;
    transform: translateY(var(--hover-lift-sm));
}

.welcome-card-text {
    flex: 1;
}

/* 닫기 버튼 */
.welcome-hero-dismiss {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    transition: background var(--motion-hover), color var(--motion-hover);
    z-index: 2;
}
.welcome-hero-dismiss:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 팀 소개 카드 (신규 사용자 온보딩) ── */
.welcome-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    width: 100%;
    max-width: var(--layout-2xl);
    margin-bottom: var(--s-5);
    position: relative;
    z-index: 1;
}
.welcome-team-card {
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    text-align: left;
}
.welcome-team-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-1);
}
.welcome-team-icon {
    flex-shrink: 0;
    color: var(--accent);
    opacity: 0.8;
}
.welcome-team-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.welcome-team-count {
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--surface-w8);
    padding: var(--s-0) var(--s-1-5);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
}
.welcome-team-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin: 0;
}
/* 스쿼드 역할 태그 — 팀 내부 능력을 한눈에 파악 */
.welcome-team-squads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-top: var(--s-1);
}
.welcome-squad-tag {
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: var(--surface-w6);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: var(--leading-relaxed);
}

/* ── 워크플로우 스텝 (어떻게 동작하나요?) ── */
.welcome-how-it-works {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
    position: relative;
    z-index: 1;
}
.welcome-step {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    max-width: clamp(140px, 22vw, 200px);
}
.welcome-step-num {
    flex-shrink: 0;
    width: var(--s-5);
    height: var(--s-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-w8);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: 50%;
}
.welcome-step-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.welcome-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
}
.welcome-step-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-snug);
}
.welcome-step-arrow {
    flex-shrink: 0;
    opacity: 0.4;
}

/* 반응형: 모바일에서 1컬럼 */
@media (max-width: 640px) {
    .welcome-hero {
        padding: var(--s-5) var(--s-3);
    }
    .welcome-hero-title {
        font-size: var(--text-lg);
    }
    .welcome-hero-grid {
        grid-template-columns: 1fr;
    }
    .welcome-teams {
        grid-template-columns: 1fr;
    }
    .welcome-how-it-works {
        flex-direction: column;
        gap: var(--s-3);
    }
    .welcome-step {
        max-width: none;
    }
    .welcome-step-arrow {
        transform: rotate(90deg);
    }
}

/* ── §CQ1 Container Query: chat-input-area 좁은 폭 적응 ── */
@container cmdarea (max-width: 480px) {
    .chat-input-row {
        flex-wrap: wrap;
        gap: var(--s-1);
    }
    /* 캡슐이 전체 너비 차지, 첨부 버튼 위로 밀림 */
    .cmd-capsule {
        flex: 1 0 100%;
        order: -1;
    }
    .cmd-sub-toggle {
        gap: var(--s-1);
    }
}

/* ── §CQ4 Container Query: 채팅 컨테이너 좁은 폭 적응 ── */
@container chatcontainer (max-width: 480px) {
    .cmd-sub-toggle {
        margin: 0 var(--s-1);
        gap: var(--s-1);
    }
    .chat-messages {
        padding: var(--s-2) var(--s-2);
    }
}