/* ===== Code Tab (vibe coding sessions) ===== */

/* The dedicated sidebar shown only on the Code tab. Borrows the same
   .sidebar visual rules so it lines up with the existing layout.
   display: flex 를 유지하되, 기본 상태에서는 width: 0 으로 숨기고
   code-mode 진입 시 transition으로 펼쳐지게 처리한다. */
.code-fullheight-sidebar {
    display: flex;
    flex-direction: column;
    width: 0;
    min-width: 0;
    border: 0 solid var(--glass-border, rgba(0,0,0,0.06));
    background: var(--glass-bg, rgba(255,255,255,0.88));
    backdrop-filter: blur(var(--glass-blur, 24px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 24px));
    overflow: hidden;
    border-radius: 14px;
    margin: 20px 0 20px 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--glass-shadow, 0 8px 40px rgba(0,0,0,0.12));
    transition: width 0.3s ease, min-width 0.3s ease,
                margin 0.3s ease, padding 0.3s ease,
                opacity 0.25s ease, border-width 0.3s ease;
}

#app.code-mode #sidebar { display: none; }
#app.code-mode .code-fullheight-sidebar {
    width: var(--sidebar-width, 260px);
    min-width: var(--sidebar-width, 260px);
    margin: 20px 10px 20px 20px;
    border-width: 1px;
    opacity: 1;
    pointer-events: auto;
}

/* ===== Sidebar UI 1 / UI 2 토글 ===== */
.sidebar-mode-toggle {
    display: inline-flex;
    margin-top: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 2px;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}
.sidebar-mode-toggle .smt-btn {
    flex: 1;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    padding: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 120ms ease;
    font-size: 14px;
}
.sidebar-mode-toggle .smt-btn:hover { color: var(--text-primary); }
.sidebar-mode-toggle .smt-btn.active {
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.sidebar-mode-toggle .smt-btn i { font-size: 14px; }

/* ===== Session row: hover-revealed menu trigger ===== */
.code-session-item { position: relative; }
.code-session-menu-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    padding: 2px 4px;
    margin-left: auto;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 80ms ease, background 100ms ease, color 100ms ease;
    line-height: 1;
}
.code-session-item:hover .code-session-menu-trigger,
.code-session-menu-trigger[aria-expanded="true"] {
    opacity: 1;
}
.code-session-menu-trigger:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.code-session-menu-trigger i { font-size: 14px; }

.code-session-menu {
    position: absolute;
    top: 100%;
    right: 8px;
    z-index: 60;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.code-session-menu .csm-item {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.2;
}
.code-session-menu .csm-item:hover { background: rgba(255, 255, 255, 0.5); }
.code-session-menu .csm-item i { font-size: 15px; opacity: 0.85; }
.code-session-menu .csm-item.csm-danger {
    color: var(--red);
}
.code-session-menu .csm-item.csm-danger:hover {
    background: rgba(220, 38, 38, 0.08);
}
.code-session-menu .csm-sep {
    margin: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Per-row project chip — shows the main project name + +N extras. */
.code-session-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: rgba(99, 144, 234, 0.08);
    color: #4070d0;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-session-project-chip i { font-size: 11px; }
.code-session-project-chip-extra {
    margin-left: 2px;
    padding-left: 4px;
    border-left: 1px solid currentColor;
    opacity: 0.7;
}

/* ===== Composer: project picker pill ===== */
.code-project-pill {
    appearance: none;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 280px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.code-project-pill:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}
.code-project-pill[aria-expanded="true"] {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.92);
}
.code-project-pill i { font-size: 13px; opacity: 0.9; }
.code-project-pill #code-project-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-project-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    z-index: 1000;
    width: min(420px, calc(100vw - 24px));
    min-width: 300px;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 8px;
}
.code-project-menu .cpm-head {
    padding: 4px 8px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.code-project-menu .cpm-head strong {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}
.code-project-menu .cpm-hint {
    font-size: 11px;
    color: var(--text-tertiary);
}
.code-project-menu .cpm-item {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}
.code-project-menu .cpm-item:hover { background: #f3f4f6; }
.code-project-menu .cpm-item.selected i:first-child { color: var(--accent); }
.code-project-menu .cpm-item .cpm-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-project-menu .cpm-item .cpm-radio {
    flex-shrink: 0;
    font-size: 16px;
}
/* 리소스 행: 타입 배지 + 이름 전체 표시, 주소는 title 툴팁 */
.code-project-menu .cpm-item--resource {
    align-items: flex-start;
    padding: 8px 10px;
}
.code-project-menu .cpm-item--resource .cpm-radio {
    margin-top: 2px;
}
.code-project-menu .cpm-res-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.code-project-menu .cpm-res-badge > i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.code-project-menu .cpm-res-type-label {
    white-space: nowrap;
}
.code-project-menu .cpm-item--resource .cpm-name--full {
    flex: 1;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    font-weight: 500;
}
.code-project-menu .cpm-main-tag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent-light);
    flex-shrink: 0;
}
.code-project-menu .cpm-loading,
.code-project-menu .cpm-error,
.code-project-menu .cpm-empty {
    padding: 16px;
    color: var(--text-primary);
    font-size: 13px;
    text-align: center;
}
.code-project-menu .cpm-empty-sub {
    margin-top: 4px;
    font-size: 11px;
}

/* ===== Sidebar UI 2: Project-centric accordion ===== */
.code-proj-row {
    border-bottom: 1px solid var(--border-color);
}
.code-proj-row:last-child { border-bottom: 0; }

.code-proj-head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 6px 6px;
    background: transparent;
    transition: background 100ms ease;
}
.code-proj-head:hover { background: rgba(255, 255, 255, 0.35); }

.code-proj-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-align: left;
}
.code-proj-toggle:hover { color: var(--accent-text); }
.code-proj-toggle i { font-size: 14px; flex-shrink: 0; }
.code-proj-toggle i:first-child {
    color: var(--text-tertiary);
    transition: transform 80ms ease, color 80ms ease;
}
.code-proj-toggle:hover i:first-child { color: var(--accent); }
.code-proj-folder { color: var(--accent); opacity: 0.85; }
.code-proj-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.code-proj-actions {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    opacity: 0;
    transition: opacity 80ms ease;
    flex-shrink: 0;
}
.code-proj-head:hover .code-proj-actions,
.code-proj-actions:focus-within { opacity: 1; }
.code-proj-actions .btn-icon {
    width: 26px;
    height: 26px;
    color: var(--text-tertiary);
}
.code-proj-actions .btn-icon:hover {
    color: var(--accent-text);
    background: var(--bg-input);
}
.code-proj-actions .btn-icon i { font-size: 13px; }
/* Container too narrow → collapse trailing 3 actions visually. The
   JS keeps them in DOM so users can still tab to them; the head
   gets compact-mode when sidebar width is small. */
@media (max-width: 280px) {
    .code-proj-actions .btn-icon[data-act]:not([data-act="new-session"]) {
        display: none;
    }
}

.code-proj-sessions {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 0;
}
.code-proj-sessions .code-session-item {
    padding-left: 28px;       /* indent under the folder icon */
    font-size: 12.5px;
}
.code-proj-sessions .code-status-badge { font-size: 9px; }

.code-proj-empty {
    padding: 8px 28px;
    color: var(--text-primary);
    font-size: 11px;
    font-style: italic;
}

/* "프로젝트 미지정" 그룹 — UI 2 에서 main project 가 없는 세션들이
   몰리는 곳. Folder 색만 약간 dim. */
.code-proj-orphan .code-proj-folder { color: var(--text-tertiary); }

/* ===== Toast (sidebar 컨텍스트 알림) ===== */
#code-sidebar-toast-host {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.code-sidebar-toast {
    pointer-events: auto;
    padding: 10px 14px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    opacity: 1;
    transition: opacity 600ms ease;
}
.code-sidebar-toast.fading { opacity: 0; }

/* `no-sidebar-mode` — every tab OTHER than chat and code uses this.
   Hides BOTH the regular sidebar and the code-dedicated sidebar so
   alerts / infra / users / inquiries / audit pages render full
   width without any vertical chrome on the left. */
#app.no-sidebar-mode #sidebar { display: none; }
#app.no-sidebar-mode .code-fullheight-sidebar { display: none; }

/* Code tab carries its own model selector in the composer
   (#code-model-select) which is the single source of truth for the
   active session's model_id. The topbar select drives the chat tab
   only — hiding it here prevents the "I changed the model but the
   answer didn't" confusion when the user is in the code tab.
   `visibility: hidden` 으로 시각·인터랙션은 차단하되 `.topbar-actions`
   의 폭은 유지한다. `display: none` 으로 처리하면 actions 가 좁아지면서
   `.topbar-tabs` (flex:1 + justify-content:center)의 가운데 정렬 기준이
   우측으로 이동해, 채팅탭과 코드탭 사이에서 탭 그룹 위치가 달라 보이는
   문제가 생긴다. visibility: hidden 은 click·focus·screen reader 모두
   차단하므로 기존 의도("코드탭에서는 select 비활성")는 그대로다. */
#app.code-mode .topbar .model-select {
    visibility: hidden;
    pointer-events: none;
}

/* 햄버거 토글로 접히는 상태 — #app 포함하여 specificity 확보 */
#app.code-mode .code-fullheight-sidebar.collapsed {
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* 사이드바 접힘 시 main-content 좌측 여백을 우측과 동일하게 */
#app.code-mode .code-fullheight-sidebar.collapsed ~ .main-content {
    margin-left: 20px;
}

.code-fullheight-sidebar .sidebar-header {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.code-fullheight-sidebar .conversation-list-section {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.code-fullheight-sidebar .section-label {
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.code-fullheight-sidebar .sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}

.code-session-list {
    display: flex;
    flex-direction: column;
}

.code-session-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    margin: 3px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.code-session-item:hover {
    background: rgba(255, 255, 255, 0.45);
}
.code-session-item.active {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.code-session-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.code-session-item-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Streaming spinner — hidden by default, shown when the session
   runtime has set `data-streaming="1"` on the item. Drives the
   sidebar indicator for "여러 세션의 병렬 작업" so a background-
   running session is visible without switching tabs. The `spin`
   keyframe lives in style.css (shared with the chat-tab spinners). */
.code-session-spinner {
    display: none;
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 13px;
    line-height: 1;
}
.code-session-spinner i {
    display: inline-block;
    animation: spin 1.2s linear infinite;
}
.code-session-item[data-streaming="1"] .code-session-spinner {
    display: inline-flex;
}
/* Completion checkmark — same slot as the spinner but rendered as a
   solid green check. Hidden by default; shown when the session's
   most recent turn finished cleanly (`data-completed="1"` set by
   _markSessionStreaming). Persists across tab switches and across
   re-entries until the user fires a new prompt on this session, at
   which point _markSessionStreaming(sid, true) strips the attribute
   and the spinner takes over again. */
.code-session-checkmark {
    display: none;
    flex: 0 0 auto;
    color: #16a34a;
    font-size: 13px;
    line-height: 1;
}
.code-session-item[data-completed="1"] .code-session-checkmark {
    display: inline-flex;
}
.code-session-item-meta {
    font-size: 11px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-status-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: none;
}
.code-status-badge.creating { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.code-status-badge.ready    { background: rgba(16, 185, 129, 0.12); color: #047857; }
.code-status-badge.error    { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.code-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.code-empty-state {
    margin: auto;
    text-align: center;
    color: var(--text-primary);
    padding: 32px;
}
.code-empty-state i {
    font-size: 48px;
    color: var(--text-primary);
    display: block;
    margin-bottom: 16px;
}
.code-empty-state h3 { color: var(--text-primary); font-size: 16px; margin-bottom: 6px; }

/* Active session layout. Single-column now that the preview pane has
 * moved into the shared right-side Artifacts pane (window.ArtifactsUI).
 * The Artifacts pane is positioned absolutely off the right edge of
 * `.main-content` so we don't need to reserve a grid track for it. */
.code-session-view {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "chat"
        "composer";
    gap: 0;
    height: 100%;
}

.code-session-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    border-bottom: none;
    background: transparent;
}
.code-session-toolbar-row1 {
    display: flex;
    width: 100%;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}
.code-header-pills {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.code-session-name {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
}
.code-session-repo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    font-size: 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.code-session-repo:hover {
    background: rgba(99, 144, 234, 0.08);
    border-color: rgba(99, 144, 234, 0.35);
}
.code-session-repo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Claude-Code style branch picker pill + worktree checkbox. Lives
   in the composer controls, right of the project picker. */
.code-session-branch-wrap {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 0;
    font-size: 12px;
}
.code-branch-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 28px;
    padding: 0 10px;
    font: inherit; color: var(--text-primary); cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.code-branch-pill:hover { 
    background: rgba(255, 255, 255, 0.92); 
    border-color: rgba(0, 0, 0, 0.12);
}
.code-branch-pill[aria-expanded="true"] { 
    background: rgba(255, 255, 255, 0.92); 
    border-color: var(--accent);
}
.code-branch-pill i { font-size: 13px; opacity: 0.7; }
.code-branch-pill > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.code-branch-menu {
    position: absolute; top: calc(100% + 6px); right: 0; left: auto;
    min-width: 260px; max-width: 360px; z-index: 1000;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 6px;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px;
}
.code-branch-menu[hidden] { display: none; }
.code-branch-current {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    background: rgba(99, 144, 234, 0.10);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--accent, #6390ea); font-weight: 600;
}
.code-branch-search {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}
.code-branch-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    font: inherit; color: var(--text-primary);
}
.code-branch-search i { color: var(--text-tertiary); }
.code-branch-list {
    max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.code-branch-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 8px 10px;
    background: transparent; border: 0; border-radius: 6px;
    cursor: pointer; text-align: left;
    font: inherit; color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.code-branch-item:hover { background: rgba(255, 255, 255, 0.5); }
.code-branch-item.active { color: var(--accent, #6390ea); font-weight: 600; }
.code-branch-item i { font-size: 14px; }
.code-branch-empty,
.code-branch-loading {
    padding: 12px; text-align: center;
    color: var(--text-tertiary); font-size: 12px;
}

.code-session-worktree-chk {
    display: inline-flex; align-items: center; gap: 4px;
    height: 28px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer; user-select: none;
    color: var(--text-primary);
    font-size: 11px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.code-session-worktree-chk:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
}
.code-session-worktree-chk input { margin: 0; }

.code-session-toolbar {
    display: flex;
    width: 100%;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.code-session-toolbar .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    border-radius: 8px;
}
.code-session-toolbar .btn-icon:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--accent);
}

.code-chat-area {
    grid-area: chat;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Per-session chat areas are kept alive in a Map (one detached
   <div class="code-chat-area"> per session) and swapped into this
   slot when the user activates a session. The slot must be
   `display: contents` so the wrapper itself is layout-transparent and
   the nested `.code-chat-area` becomes a direct grid child — without
   this, `grid-area: chat` above never matches and the chat collapses
   to zero height. */
.code-chat-area-slot {
    display: contents;
}

.code-msg {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.code-msg.role-user {
    /* 사용자 요구: 코드탭에서는 사용자 프롬프트도 좌측 정렬 + 배경색
       제거(어시스턴트 메시지와 같은 컬럼). 채팅탭은 별개로 우측 보라색
       말풍선을 유지한다 — 같은 메시지 모델을 쓰지만 시각 정책이 다름. */
    align-self: flex-start;
    background: transparent;
    color: var(--text-primary);
    max-width: 100%;
    padding: 4px 0;
}
.code-msg.role-assistant {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    max-width: 90%;
    /* 마크다운/리스트가 말풍선 가장자리에 닿지 않도록 충분한 내부 여백.
       기존 10px/14px은 bullet · 표 · 코드 인라인이 끼면 답답해 보였음. */
    padding: 14px 18px;
    /* Preserve paragraph breaks the agent emits as "\n\n" — without this,
       a long turn renders as one wall of text with no visual rhythm. */
    white-space: pre-wrap;
}

/* "Final answer" bubble promoted out of a CoT trace at `done` time.
 * Unlike the default streaming assistant bubble (which holds plain-text
 * chunks and needs pre-wrap), this one carries rendered markdown HTML
 * lifted from a trace text segment — paragraphs, lists, code blocks
 * already have their own block layout, so pre-wrap would just insert
 * stray whitespace inside them. */
.code-msg.role-assistant.code-final-answer {
    white-space: normal;
    padding: 14px 18px;
}
.code-msg.role-assistant.code-final-answer > *:first-child { margin-top: 0; }
.code-msg.role-assistant.code-final-answer > *:last-child { margin-bottom: 0; }
.code-msg.role-assistant.code-final-answer p { margin: 6px 0; line-height: 1.6; }
/* 머지 참고: HEAD 쪽의 ul/ol/li/code/pre 단순 규칙은 dev-kdh 가 아래에
   더 풍부한 마크다운 스타일로 대체했으므로 삭제. h1-h4 도 같은 이유. */

/* 제목 (h1~h4) */
.code-msg.role-assistant.code-final-answer h1,
.code-msg.role-assistant.code-final-answer h2,
.code-msg.role-assistant.code-final-answer h3,
.code-msg.role-assistant.code-final-answer h4 {
    margin: 16px 0 8px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.code-msg.role-assistant.code-final-answer h1 { font-size: 18px; }
.code-msg.role-assistant.code-final-answer h2 { font-size: 16px; }
.code-msg.role-assistant.code-final-answer h3 { font-size: 14px; }
.code-msg.role-assistant.code-final-answer h4 { font-size: 13px; }

/* 리스트 */
.code-msg.role-assistant.code-final-answer ul,
.code-msg.role-assistant.code-final-answer ol {
    margin: 8px 0;
    padding-left: 20px;
}
.code-msg.role-assistant.code-final-answer li {
    margin: 4px 0;
    line-height: 1.55;
}
.code-msg.role-assistant.code-final-answer li::marker {
    color: var(--accent);
}

/* 인라인 코드 */
.code-msg.role-assistant.code-final-answer code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #d63384;
}

/* 코드 블록 */
.code-msg.role-assistant.code-final-answer pre {
    background: rgba(30, 30, 30, 0.92);
    color: #e6e6e6;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.5;
}
.code-msg.role-assistant.code-final-answer pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* 블록 인용 */
.code-msg.role-assistant.code-final-answer blockquote {
    border-left: 3px solid var(--accent);
    margin: 10px 0;
    padding: 8px 14px;
    background: rgba(99, 144, 234, 0.06);
    border-radius: 0 6px 6px 0;
    color: var(--text-secondary);
}

/* 강조 */
.code-msg.role-assistant.code-final-answer strong {
    font-weight: 700;
    color: var(--text-primary);
}
.code-msg.role-assistant.code-final-answer em {
    font-style: italic;
    color: var(--text-secondary);
}

/* 구분선 */
.code-msg.role-assistant.code-final-answer hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 12px 0;
}

/* 링크 */
.code-msg.role-assistant.code-final-answer a {
    color: var(--accent);
    text-decoration: none;
}
.code-msg.role-assistant.code-final-answer a:hover {
    text-decoration: underline;
}

/* 테이블 */
.code-msg.role-assistant.code-final-answer table {
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    margin: 10px 0;
    font-size: 13px;
    table-layout: auto;
    border-radius: 6px;
    overflow: hidden;
}
.code-msg.role-assistant.code-final-answer th,
.code-msg.role-assistant.code-final-answer td {
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}
.code-msg.role-assistant.code-final-answer th {
    background: rgba(99, 144, 234, 0.08);
    font-weight: 600;
    color: var(--text-primary);
}

/* The "생각 중…" label. Used to ship a pulsing dot via ::before; that
 * has been replaced by the global `.is-running` text shimmer toggled
 * from JS, so this rule only carries layout/typography now. */
.code-thinking {
    align-self: flex-start;
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: baseline;
}

.code-tool-card {
    align-self: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 90%;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.code-tool-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.3);
    padding: 7px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    font-weight: 600;
}
.code-tool-card-header.error { color: #b91c1c; }
.code-tool-card-body {
    padding: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow-y: auto;
}
.code-tool-card-args {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}
.code-tool-diff {
    background: var(--bg);
}
.code-tool-diff .diff-add { color: #047857; }
.code-tool-diff .diff-del { color: #b91c1c; }
.code-tool-diff .diff-hunk { color: var(--primary); }

.code-permission-card {
    align-self: flex-start;
    width: 100%;
    max-width: 90%;
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: 10px;
    background: rgba(255, 251, 235, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12px 16px;
    font-size: 13px;
}
.code-permission-card-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.code-permission-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ===== Composer (pill input + controls) ===== */

.code-composer {
    grid-area: composer;
    padding: 14px 22px 18px;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 10;
    isolation: isolate;
}

.code-composer-pill {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 4px 4px 4px 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.code-composer-pill:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 144, 234, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.code-composer-pill.drag-over {
    border-color: var(--primary, #6390ea);
    background: rgba(99, 144, 234, 0.06);
    box-shadow: 0 0 0 3px rgba(99, 144, 234, 0.2);
}

/* Pending attachments strip — sits above the composer pill. Image
   thumbs the user picked / pasted / dragged but hasn't submitted yet. */
.code-attach-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px 0;
}
.code-attach-strip[hidden] { display: none; }
.code-attach-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
}
.code-attach-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.code-attach-remove {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.code-attach-remove:hover { background: rgba(0, 0, 0, 0.8); }

/* Document chips (PDF / Word / Excel / PowerPoint). Same row as
   image thumbs but pill-shaped. position:relative is required so
   the absolutely-positioned remove button sits inside the chip
   instead of escaping to the page edge. */
.code-attach-doc {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 32px 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.3;
    max-width: 340px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.12s ease, background 0.12s ease,
                box-shadow 0.12s ease;
}
.code-attach-doc:hover {
    border-color: var(--text-tertiary, #999);
    background: var(--bg-hover, #f0f1f3);
}
.code-attach-doc[data-uploading="1"] { opacity: 0.7; }

/* The file-format icon (Word/Excel/PPT/PDF) sits in a small coloured
   chip so it reads at a glance — mirrors Claude Code's compact style.
   Default neutral; format-specific overrides below recolour it. */
.code-attach-doc > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--bg-active, #e8eaed);
    color: var(--text-secondary, #666);
    font-size: 16px;
    flex-shrink: 0;
}
.code-attach-doc > .ri-file-pdf-2-line   { background: #fde2e1; color: #c63a32; }
.code-attach-doc > .ri-file-word-2-line  { background: #dbe7fb; color: #1e63c4; }
.code-attach-doc > .ri-file-excel-2-line { background: #def3e2; color: #1e7e3a; }
.code-attach-doc > .ri-file-ppt-2-line   { background: #fde8d3; color: #c3611f; }

/* Filename (first <span> after the icon). Truncate so a 60-char
   filename doesn't blow out the strip width. */
.code-attach-doc > span:nth-of-type(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1a1a1a);
    flex: 1 1 auto;
    min-width: 0;
}
/* Size label (second <span>) — small + tertiary so it sits quietly. */
.code-attach-doc > span:nth-of-type(2) {
    color: var(--text-tertiary, #999);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 2px;
}

.code-attach-doc .code-attach-remove {
    /* Hidden by default — fade in when the chip is hovered or focused
       so the strip looks clean at rest. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    /* Flat × instead of the dark-circle pattern used on image thumbs;
       a chip is too small for the heavy circle styling. */
    background: transparent;
    color: var(--text-secondary, #666);
    width: 22px; height: 22px;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}
.code-attach-doc:hover .code-attach-remove,
.code-attach-doc:focus-within .code-attach-remove {
    opacity: 1;
    pointer-events: auto;
}
.code-attach-doc:hover .code-attach-remove:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #1a1a1a);
}

/* Thumbnails inside a sent user bubble. Different sizing — match
   the bubble width but cap height so a tall screenshot doesn't
   blow out the chat scroll. */
.code-msg.role-user .code-msg-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.code-msg.role-user .code-msg-imgs img {
    max-width: 240px;
    max-height: 200px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.code-composer-pill textarea {
    flex: 1;
    min-height: 38px;
    /* Mirror the chat-tab composer's auto-grow behaviour. JS sets
       the height up to 320px; past that the textarea scrolls
       internally so the rest of the composer chrome (mode pill,
       attach strip, model select) stays on-screen. */
    max-height: 320px;
    padding: 10px 4px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    resize: none;
    outline: none;
    font-family: inherit;
    overflow-y: hidden;     /* JS flips this to auto once we hit the cap */
}
.code-composer-pill textarea::placeholder {
    color: var(--text-tertiary);
}
.code-composer-submit {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: var(--accent, #6390ea);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    transition: background 0.15s ease, transform 0.1s ease;
}
.code-composer-submit:hover {
    background: var(--accent-hover, #4f7fd8);
    transform: scale(1.05);
}
.code-composer-submit i { font-size: 16px; }

/* Mirrors the submit button geometry so it slots into the same spot
   in the pill when a turn is in flight. Distinct color so the user
   sees an unambiguous "stop" affordance. */
.code-composer-stop {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    transition: background 0.15s ease;
}
.code-composer-stop:hover { background: #b91c1c; }
.code-composer-stop[hidden] { display: none !important; }
.code-composer-stop i { font-size: 16px; }

/* Controls row under the pill */
.code-composer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
    flex-wrap: wrap;
}
.code-composer-controls-left,
.code-composer-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.code-composer-controls-right { color: var(--text-secondary); font-size: 12px; }

/* 참고 프로젝트 — 하나의 pill 안에 버튼 + chip들이 함께 들어감 */
.code-ref-projects-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 4px 10px;
    min-height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.75);
    flex-wrap: wrap;
    transition: border-color 0.15s, background 0.15s;
}
.code-ref-projects-wrap:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
}
.code-ref-projects-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
}
.code-ref-projects-btn:hover { color: var(--accent); }
.code-ref-projects-btn i { font-size: 14px; }
.code-ref-projects-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: 300px;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
    padding: 6px 0;
}
.ref-proj-list { padding: 4px 0; }
.ref-proj-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}
.ref-proj-item:hover { background: #f3f4f6; }
.ref-proj-item.selected { background: rgba(99, 144, 234, 0.06); }
.ref-proj-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.ref-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-proj-item--resource .cpm-res-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.ref-proj-item--resource .cpm-res-badge > i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ref-proj-item--resource .ref-proj-name--full {
    flex: 1;
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
.ref-proj-footer {
    padding: 6px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: flex-end;
}
.ref-proj-confirm-btn {
    padding: 5px 14px;
    border-radius: 6px;
    border: none;
    background: var(--accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ref-proj-confirm-btn:hover { background: var(--accent-hover); }

/* 참조 프로젝트 chip — pill 내부에 위치 */
.code-ref-projects-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-left: 6px;
}
.ref-proj-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--accent);
    font-size: 11px;
    color: #ffffff;
    white-space: nowrap;
    font-weight: 600;
}
.ref-proj-chip-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.ref-proj-chip-x {
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0 1px;
    transition: color 0.1s;
}
.ref-proj-chip-x:hover { color: #ffffff; }

.code-composer-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.code-composer-icon:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Mode pill (replaces the old segmented control).
   The selector group is shared with `.code-model-pill` so the two
   composer dropdowns read as a matched pair. Anything visual goes in
   the shared rule; position / popover anchoring is per-pill. */
.code-mode-pill, .code-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    width: fit-content;
    box-sizing: border-box;
}
.code-mode-pill:hover, .code-model-pill:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--accent);
    color: var(--accent);
}
.code-mode-pill i, .code-model-pill i { font-size: 14px; opacity: 0.7; }

.code-mode-menu, .code-model-menu {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The HTML `hidden` attribute defaults to `display: none` via the UA
   stylesheet, but our class above sets `display: flex` with the same
   specificity (and later in source order) so it wins. Force-hide here. */
.code-mode-menu[hidden], .code-model-menu[hidden] {
    display: none !important;
}

/* Reasoning-effort pill wrap — its menu is anchored to the wrap so the
   popover sits under the pill itself, not the controls-right container. */
.code-reasoning-wrap { position: relative; display: inline-flex; }
.code-reasoning-wrap[hidden] { display: none !important; }
.code-reasoning-wrap .code-mode-menu {
    width: 220px;
    left: auto;
    right: 0;
}
.code-reasoning-wrap .code-mode-menu::after {
    left: auto;
    right: 24px;
}
/* Tiny pointer arrow under the popover, anchored over the pill. */
.code-mode-menu::after, .code-model-menu::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transform: rotate(45deg);
}
.code-mode-menu button, .code-model-menu button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    transition: background 0.12s ease;
}
.code-mode-menu button:hover, .code-model-menu button:hover {
    background: #f3f4f6;
}
.code-mode-menu button .hint, .code-model-menu button .hint {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Each pill needs a relative parent so its popover anchors correctly. */
.code-composer-controls-left,
.code-composer-controls-right { position: relative; }
.code-mode-pill.open, .code-model-pill.open {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--accent);
    color: var(--accent);
}

/* Model pill lives on the right edge, so its popover anchors right
   instead of left and the arrow sits over the right side of the
   popover (above the pill, which is itself flush right). */
.code-model-menu {
    left: auto;
    right: 0;
}
.code-model-menu::after {
    left: auto;
    right: 24px;
}

/* (Old `.code-model-select` block removed — the native <select> has
   been replaced by a button + popover pair which inherits its visual
   rules from the shared `.code-mode-pill, .code-model-pill` selector
   group above.) */

.code-skill-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 12px;
    right: auto;
    /* The composer now lives only in the chat column (grid-area
       "composer" no longer spans the preview), so anchoring to the
       pill's right edge keeps the popup naturally inside the chat
       column without an explicit pane-width subtraction. */
    right: 12px;
    max-width: 560px;
    min-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-secondary, var(--bg));
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16),
                0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 1000;
}
.code-skill-popup[hidden] {
    display: none !important;
}

.code-skill-item {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    align-items: baseline;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.code-skill-item:last-child { border-bottom: none; }
.code-skill-item.active,
.code-skill-item:hover {
    background: var(--bg-input, rgba(99, 144, 234, 0.06));
}
.code-skill-trigger {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    color: var(--primary);
    min-width: 90px;
}
.code-skill-desc {
    color: var(--text-secondary);
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-skill-hint {
    color: var(--text-tertiary);
    font-weight: 400;
    font-style: italic;
    margin-left: 6px;
}
.code-skill-meta {
    color: var(--text-tertiary);
    font-size: 11px;
    margin-left: 6px;
}

/* Env-vars modal rows */
.env-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.env-row {
    display: grid;
    grid-template-columns: 200px 1fr 28px;
    gap: 6px;
    align-items: center;
}
.env-row .form-input {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    padding: 6px 10px;
}
.env-row .env-key {
    text-transform: uppercase;
}
.env-row .env-del {
    width: 28px;
    height: 28px;
    color: var(--text-tertiary);
}
.env-row .env-del:hover { color: #b91c1c; }

/* ----- 개발 미리보기 설정 modal — env vars section ----- */
.tunnel-env-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.tunnel-env-project {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.tunnel-env-project > summary {
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
.tunnel-env-project-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 0;
}
.tunnel-env-project-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(99, 144, 234, 0.10);
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
}
.tunnel-env-project-pill em {
    color: var(--accent);
    font-style: normal;
}
.tunnel-env-paste {
    margin-top: 8px;
    border: 0;
    padding: 0;
    background: transparent;
}
.tunnel-env-paste > summary {
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.tunnel-env-paste[open] > summary {
    margin-bottom: 8px;
}
.tunnel-env-paste textarea {
    width: 100%;
    min-height: 110px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    box-sizing: border-box;
}
.tunnel-env-paste-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}
.tunnel-env-paste-replace-label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ----- SSH / DB tunnel modal ----- */
.tunnel-section h4 {
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tunnel-form-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.6fr;
    gap: 8px;
}
.tunnel-form-grid label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text-secondary);
    gap: 4px;
}
.tunnel-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Removed max-height/overflow-y to stop the modal from getting a
       horizontal scrollbar when a wide port-forward row exists. */
    overflow: visible;
}
.tunnel-row {
    /* Two-line layout — see _appendTunnelRow. Top: label + del,
       bottom: 4-field grid. min-width:0 lets children shrink. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    min-width: 0;
}
.tun-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tun-row-head .tun-label {
    flex: 1;
    min-width: 0;
}
.tun-row-head .tun-del {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
}
.tun-row-fields {
    display: grid;
    /* 4 cells via grid, last is the arrow which is a tiny fixed
       column. minmax(0,...) is essential so children can shrink
       below their intrinsic width — without it the row overflows. */
    grid-template-columns: minmax(0, 100px) 20px minmax(0, 1fr) minmax(0, 100px);
    gap: 8px;
    align-items: end;
}
.tun-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tun-field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin: 0;
    padding: 0;
}
.tun-field .form-input {
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.tunnel-arrow {
    color: var(--text-tertiary);
    text-align: center;
    font-size: 14px;
    align-self: center;
    margin-top: 16px;       /* offset to align with input baseline */
}

/* ---- MCP: better alignment + clearer labels ---- */
.mcp-row-meta {
    display: flex;
    gap: 14px;
    /* The 통신 방식 column is taller (small label above + 38px
       select). The chip / button next to it have no such label, so
       `center` would float them at mid-column height — leaving the
       활성화 chip visibly above the stdio select. `flex-end` aligns
       every control's BOTTOM edge with the select's bottom edge,
       which is the natural baseline. */
    align-items: flex-end;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.mcp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mcp-field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin: 0;
}
.mcp-row-meta .mcp-transport {
    width: 170px;
    margin: 0 !important;
}
.mcp-row-meta .mcp-enabled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: background 0.1s ease, border-color 0.1s ease;
    /* Same height as the form-select for visual alignment */
    height: 38px;
    box-sizing: border-box;
}
.mcp-row-meta .mcp-enabled:hover {
    background: var(--bg-secondary);
    border-color: var(--text-tertiary);
}
.mcp-row-meta .mcp-enabled input { margin: 0; }
.mcp-row-meta .mcp-enabled span { line-height: 1; }
.mcp-row-meta .mcp-test {
    margin-left: auto;
    height: 38px;
    white-space: nowrap !important;
}

/* ---- settings.json bucket headers ---- */
#project-modal .settings-bucket-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
#project-modal .settings-bucket-head i {
    font-size: 14px;
}
.tunnel-status-line {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.tunnel-status-line.ok  { background: rgba(16, 185, 129, 0.08); color: #047857; }
.tunnel-status-line.err { background: rgba(239, 68, 68, 0.08);  color: #b91c1c; }

/* MCP server modal ---------------------------------------------- */
.mcp-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 6px;
}
.mcp-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg);
}
.mcp-row-head {
    display: grid;
    grid-template-columns: 1fr 100px auto 28px;
    gap: 8px;
    align-items: center;
}
.mcp-row-head .form-input,
.mcp-row-head .form-select {
    font-size: 12px;
    padding: 6px 8px;
}
.mcp-enabled {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.mcp-row .mcp-del {
    width: 28px;
    height: 28px;
    color: var(--text-tertiary);
}
.mcp-row .mcp-del:hover { color: #b91c1c; }
.mcp-row-body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mcp-row-body label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-secondary);
}
.mcp-row-body .form-input,
.mcp-row-body .form-textarea {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    padding: 6px 8px;
}
.mcp-row-body [hidden] { display: none !important; }

/* TodoWrite card */
.code-todo-card .code-todo-list {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.code-todo-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 3px 0;
    line-height: 1.45;
}
.code-todo-marker {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-weight: 600;
}
.code-todo-content { flex: 1; word-break: break-word; }
.code-todo-completed .code-todo-content {
    color: var(--text-tertiary);
    text-decoration: line-through;
}
.code-todo-completed .code-todo-marker { color: #10b981; }
.code-todo-in_progress .code-todo-marker { color: var(--primary); }
.code-todo-pending .code-todo-marker { color: var(--text-tertiary); }


/* =====================================================================
 * Code-tab Chain-of-Thought (ReAct trace)
 *
 * The trace timeline (.cot-trace) is shared with the chat tab — see
 * style.css for the core layout. Here we only adjust how it sits inside
 * the flex-column .code-chat-area, and add a colored unified-diff block
 * for tool segments that emit a .diff payload (Edit / Write / etc.).
 * ===================================================================== */

.code-chat-area .cot-trace {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* The chat tab uses --border-color / --accent / --bg-secondary which
 * are defined globally; the code tab historically referenced --bg /
 * --border / --primary which were never declared, so we standardise
 * here on the global tokens for visual parity with the chat tab. */
.trace-tool-diff {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
}

.trace-tool-diff .diff-add  { color: #047857; }
.trace-tool-diff .diff-del  { color: #b91c1c; }
.trace-tool-diff .diff-hunk { color: var(--accent); }

[data-theme="dark"] .trace-tool-diff .diff-add  { color: #34d399; }
[data-theme="dark"] .trace-tool-diff .diff-del  { color: #f87171; }

/* Activity labels: in the code tab the chat area uses --bg / --border
 * tokens that are subtly different. Mirror the chat-tab look so
 * Thought / Ran / Explored / ... read identically. */
.code-chat-area .trace-activity-header:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* =====================================================================
   Error Analysis dashboard (toolbar 🐞 button)
   ===================================================================== */

.code-error-view {
    grid-area: chat;             /* sit in the same cell as the chat */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 12px;
    overflow: hidden;
}
.code-error-view[hidden] { display: none; }

.code-error-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 12px;
    text-align: center;
    flex: 1 1 auto;
}
/* The 48px size MUST only target the top-level shield icon — not
   the wrench icon inside the SSH 설정하기 button. Use a direct
   descendant selector so the button's internal <i> renders at its
   default 14px. */
.code-error-empty > i {
    font-size: 48px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.code-error-empty h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.code-error-empty p {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}
/* Buttons in the empty state — explicit sizing so they don't
   inherit a stretched layout from any global rule. */
.code-error-empty .btn-primary,
.code-error-empty .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 140px;
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    line-height: 1;
}
.code-error-empty .btn-primary i,
.code-error-empty .btn-secondary i {
    font-size: 15px;
    color: inherit;
    margin: 0;
}

.code-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.code-error-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.code-error-monitor-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-active, #e8eaed);
    color: var(--text-secondary);
    white-space: nowrap;
}
.code-error-monitor-pill.running {
    background: rgba(26,127,55,0.12);
    color: #1a7;
}
/* Right-aligned action cluster in the header.
   Every button/select inside must stay on a single horizontal line —
   the previous build let "모니터 중지" render vertically when the
   action cluster ran out of room. `flex-shrink:0` + nowrap on each
   child keeps the row honest. */
.code-error-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.code-error-actions button,
.code-error-actions select,
.code-error-actions .btn-icon {
    white-space: nowrap;
    flex-shrink: 0;
}
.code-error-actions .btn-secondary,
.code-error-actions .btn-primary {
    padding: 6px 12px;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.code-error-actions select {
    height: 32px;
    font-size: 13px;
    padding: 0 10px;
}

.code-error-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 0 16px;
}
.code-error-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.code-error-tab:hover {
    background: transparent;
    color: var(--text-primary);
}
.code-error-tab.active {
    color: var(--text-primary);
    border-bottom-color: #6390ea;
    font-weight: 600;
}

/* =====================================================================
   Error Analysis dashboard — TABLE layout (matches the reference
   "All orders / Active / To invoice / To ship" screenshot the user
   pasted: tabs with counts, free-text filter, checkbox column, status
   badge, and icon-only inline actions per row).
   ===================================================================== */

/* Tab count badge */
.code-error-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 7px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--bg-active, #e8eaed);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.code-error-tab.active .code-error-tab-count {
    background: #6390ea;
    color: #fff;
}

/* Filter / batch-action row, sits directly above the table */
.code-error-subbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.code-error-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    max-width: 480px;
}
.code-error-search i {
    color: var(--text-tertiary);
}
.code-error-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
}

/* Table wrapper — vertical scroll container */
.code-error-tablewrap {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 16px 20px;
    background: var(--bg-secondary, #f7f8fa);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", sans-serif;
}
.code-error-empty-state {
    text-align: center;
    color: var(--text-primary);
    padding: 80px 20px;
    font-size: 14px;
}

/* The table itself — float on a soft background like the
   reference candidate / ticket lists. White card on grey canvas,
   thin row dividers, bigger row padding. */
.code-error-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.code-error-table thead th {
    text-align: left;
    padding: 14px 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary, #f9fafb);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}
.code-error-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--border-color);
}
.code-error-table tbody td {
    padding: 18px 20px;
    vertical-align: middle;
    color: var(--text-primary);
    line-height: 1.5;
    background: transparent;
}
.code-error-row {
    cursor: pointer;
    transition: background 0.12s ease;
}
.code-error-row:hover {
    background: rgba(74,144,226,0.05);
}

/* Severity is communicated by the badge in the 중요도 column —
   the previous left-edge color stripe was loud and made every row
   look like an alert. References (Image 3/4) use selection-only
   left accents, not severity. We only highlight the SELECTED row
   with a thin accent. */
.code-error-row.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 #6390ea;
}
.code-error-row.is-selected {
    background: rgba(74, 144, 226, 0.06);
}

/* Column widths — wider actions cell so 4 icon buttons fit
   horizontally with breathing room. */
.code-error-table .col-check   { width: 44px; padding-left: 20px; padding-right: 8px; }
.code-error-table .col-id      {
    width: 130px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
}
.code-error-table .col-sev     { width: 130px; }
.code-error-table .col-source  { width: 200px; color: var(--text-secondary); font-size: 13px; }
.code-error-table .col-when    { width: 150px; color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.code-error-table .col-actions {
    width: 200px;
    text-align: right;
    white-space: nowrap;
    padding-right: 20px;
}

/* Title cell — readable prose, NOT monospace. The raw log line
   above (.err-title) keeps its monospace because it's literal log
   output; the summary below it is real prose so it gets the body
   sans-serif. Both clamp to 2 lines so the table row stays
   compact like the reference. */
.code-error-table .col-title .err-title {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.code-error-table .col-title .err-summary {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.code-error-table .col-when div:first-child {
    font-weight: 500;
    color: var(--text-primary);
}
.code-error-table .col-when .err-abs-time {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 2px;
}
.code-error-table .col-source i { margin-right: 4px; opacity: 0.7; }

/* Severity pill badge — three Korean severity buckets (위험 / 주의 /
   낮음). Backend can emit fatal / critical / error / warning / info /
   unknown; the JS helper `_severityLabel()` collapses those down to
   one of `level-high` / `level-medium` / `level-low` here. Old
   `severity-error` etc. classes are kept as aliases so any unmigrated
   call sites still render in a sensible colour. */
.code-error-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    /* Default = 낮음 (green) so an unknown severity is visually mild
       rather than alarming red. */
    background: rgba(22,163,74,0.12);
    color: #16a34a;
}
.code-error-severity-badge::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* High (위험) — red. Maps from backend `fatal` / `critical` / `error`. */
.code-error-severity-badge.level-high,
.code-error-severity-badge.severity-fatal,
.code-error-severity-badge.severity-critical,
.code-error-severity-badge.severity-error {
    background: rgba(220,38,38,0.12);
    color: #dc2626;
}
/* Medium (주의) — amber/yellow. Maps from `warning`. */
.code-error-severity-badge.level-medium,
.code-error-severity-badge.severity-warning,
.code-error-severity-badge.severity-warn {
    background: rgba(217,119,6,0.14);
    color: #d97706;
}
/* Low (낮음) — green. Maps from `info` / `debug` / `notice` / unknown. */
.code-error-severity-badge.level-low,
.code-error-severity-badge.severity-info,
.code-error-severity-badge.severity-debug,
.code-error-severity-badge.severity-notice {
    background: rgba(22,163,74,0.12);
    color: #16a34a;
}

/* Row tint mirrors the badge so a scan of the table conveys severity
   without reading each pill. Kept subtle — pure tint, no border. */
.code-error-table .code-error-row.level-high   { background: rgba(220,38,38,0.04); }
.code-error-table .code-error-row.level-medium { background: rgba(217,119,6,0.05); }
.code-error-table .code-error-row.level-low    { background: rgba(22,163,74,0.04); }

/* Inline action buttons — icon-only, equal-spaced row that always
   stays horizontal regardless of the global .btn-icon rule. */
.code-error-table .col-actions { white-space: nowrap; }
.code-error-table .col-actions .btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 1px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease,
                border-color 0.12s ease;
    vertical-align: middle;
}
.code-error-table .col-actions .btn-icon i { font-size: 15px; }
.code-error-table .col-actions .btn-icon:hover {
    background: var(--bg-secondary, #f3f4f6);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.code-error-table .col-actions .code-err-fix:hover  { color: #6390ea; }
.code-error-table .col-actions .code-err-done:hover { color: #16a34a; }
.code-error-table .col-actions .code-err-copy:hover { color: #6b7280; }

/* Header columns — keep the master checkbox visually centred over
   the per-row checkboxes. */
.code-error-table thead .col-check { padding-left: 20px; padding-right: 8px; }
.code-error-table thead .col-actions { padding-right: 20px; }

/* Native checkbox styling — rounded, accent-colored to match the
   blue used elsewhere in the app. */
.code-error-table input[type="checkbox"],
#code-err-select-all {
    width: 16px;
    height: 16px;
    accent-color: #6390ea;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}


/* =====================================================================
   Error-detail modal — GitHub-flavoured markdown render.
   Goal: match the polish of GitHub's CONTRIBUTING.md preview (the
   reference screenshot the user pasted) — clearly demarcated heading
   hierarchy, breathable line-height, distinct inline-code chips,
   readable code blocks with their own background, ordered/unordered
   lists with proper margins, and a footer action row pinned at the
   bottom of the modal.
   ===================================================================== */

.code-error-detail {
    --md-fg:           var(--text-primary,   #1f2328);
    --md-muted:        var(--text-secondary, #59636e);
    --md-border:       var(--border-color,   #d1d9e0);
    --md-codebg:       #f6f8fa;
    --md-inline-bg:    rgba(175,184,193,0.20);
    --md-link:         #0969da;
    line-height: 1.6;
    color: var(--md-fg);
    font-size: 14px;
    /* Match the modal body's own scrolling — let the body grow until
       the modal max-height kicks in. */
    max-height: 78vh;
    overflow: auto;
    padding: 4px 2px 0;
}

/* Header (titleline + meta on the right) */
.code-error-detail .code-error-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--md-border);
}
.code-error-detail .code-error-detail-titleline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--md-fg);
}
.code-error-detail .code-error-detail-titleline i { font-size: 22px; }
.code-error-detail .code-error-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--md-muted);
    font-size: 12.5px;
}
.code-error-detail .code-error-detail-meta .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--md-muted);
    display: inline-block;
}

/* Trigger ("원본 로그") block — sits above the AI analysis */
.code-error-detail .code-error-detail-trigger {
    margin-bottom: 18px;
}
.code-error-detail .md-h-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--md-muted);
    margin: 0 0 6px;
}
.code-error-detail .code-error-detail-trigger pre {
    margin: 0;
    padding: 12px 14px;
    background: var(--md-codebg);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    overflow: auto;
    max-height: 220px;
    white-space: pre-wrap;
    word-break: break-all;
}
.code-error-detail-context {
    margin-top: 6px;
}
.code-error-detail-context summary {
    font-size: 12px;
    color: var(--md-muted);
    cursor: pointer;
    padding: 4px 0;
}
.code-error-detail-context summary:hover { color: var(--md-fg); }

/* The markdown body */
.code-error-detail .code-error-detail-body {
    padding-top: 4px;
}

/* Headings — GitHub-style sizing & underline on h1/h2 */
.code-error-detail-body h1,
.code-error-detail-body h2,
.code-error-detail-body h3,
.code-error-detail-body h4,
.code-error-detail-body h5,
.code-error-detail-body h6 {
    margin: 24px 0 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--md-fg);
}
.code-error-detail-body h1 {
    font-size: 1.7em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--md-border);
}
.code-error-detail-body h2 {
    font-size: 1.4em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--md-border);
}
.code-error-detail-body h3 { font-size: 1.2em; }
.code-error-detail-body h4 { font-size: 1.05em; }

/* Paragraphs / list margins */
.code-error-detail-body p,
.code-error-detail-body ul,
.code-error-detail-body ol,
.code-error-detail-body blockquote {
    margin: 0 0 14px;
}
.code-error-detail-body ul,
.code-error-detail-body ol {
    padding-left: 28px;
}
.code-error-detail-body li { margin: 4px 0; }
.code-error-detail-body li > p { margin: 4px 0; }

/* Blockquote */
.code-error-detail-body blockquote {
    padding: 0 14px;
    color: var(--md-muted);
    border-left: 4px solid var(--md-border);
}

/* Inline code chip — distinct from regular text */
.code-error-detail-body :not(pre) > code {
    padding: 0.18em 0.45em;
    margin: 0 1px;
    font-size: 0.92em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--md-inline-bg);
    border-radius: 5px;
    color: var(--md-fg);
}

/* Fenced code blocks — proper background + scroll */
.code-error-detail-body pre {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--md-codebg);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    overflow: auto;
    line-height: 1.5;
    font-size: 12.5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.code-error-detail-body pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre;
}

/* GFM tables */
.code-error-detail-body table {
    border-collapse: collapse;
    margin: 0 0 16px;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.code-error-detail-body th,
.code-error-detail-body td {
    border: 1px solid var(--md-border);
    padding: 6px 12px;
    font-size: 13px;
}
.code-error-detail-body th {
    background: var(--md-codebg);
    font-weight: 600;
}

/* Links */
.code-error-detail-body a {
    color: var(--md-link);
    text-decoration: none;
}
.code-error-detail-body a:hover { text-decoration: underline; }

/* Horizontal rule */
.code-error-detail-body hr {
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: var(--md-border);
}

/* Action footer — pinned to the bottom of the scroll area */
.code-error-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--md-border);
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #fff);
}

/* Dark-mode token tweaks */
[data-theme="dark"] .code-error-detail {
    --md-codebg:    #161b22;
    --md-inline-bg: rgba(110,118,129,0.40);
    --md-border:    #30363d;
    --md-link:      #4493f8;
}

/* The default project modal is 700px wide. GitHub-style markdown
   wants ~880-960px so headings + code blocks + tables don't wrap
   prematurely. The .modal-wide class is added by _openDetailView via
   the modal element's class list; removed when any other modal opens. */
.modal.modal-wide { max-width: 960px; }

/* =====================================================================
   Unified settings-modal typography & spacing
   ---------------------------------------------------------------------
   Every code-tab settings popup (환경 변수 / SSH 터널 / MCP 서버 /
   Hooks / settings.json / Worktrees / 첨부 / 에러분석 SSH 등) shares
   the same #project-modal element with `#modal-body` swapped in by
   JS. Each one had its own ad-hoc inline styling that produced a
   slightly different look — dense in some places, cramped in others.
   This block normalises them all so they read like the reference
   "Settings" page screenshot: a clear title, a muted description,
   well-spaced sections with subtle dividers, comfortable inputs,
   and a sticky action row at the bottom.
   ===================================================================== */

/* Roomier modal body — the previous 24px felt cramped for forms
   with 3+ sections like the MCP server modal. */
#project-modal .modal-body {
    padding: 28px 32px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", sans-serif;
}

/* Title — the first h3 at the top of every modal body. */
#project-modal .modal-body > h3:first-child,
#project-modal .modal-body > article > h3:first-child,
#project-modal .modal-body .code-error-detail .code-error-detail-titleline {
    /* Slightly larger, tighter line-height, no italic — matches the
       "Account settings" treatment in the reference. */
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
}

/* Top description paragraph — the muted explanatory text that
   sits right under each modal's title. */
#project-modal .modal-body > h3:first-child + p,
#project-modal .modal-body > h3:first-child + p + p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 22px;
    font-style: normal;       /* JS-supplied styles sometimes set italic */
}

/* Generic intra-modal section header (e.g. "SSH 접속 정보",
   "포트 포워딩 룰" in the SSH modal). */
#project-modal .modal-body h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 24px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
#project-modal .modal-body h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Form labels — bold-but-not-loud, sitting just above their input.
   The JS-generated HTML uses both <label>field<input/></label> and
   <label class="form-label">...</label> patterns; both get the same
   treatment. */
#project-modal .modal-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}
#project-modal .modal-body label > .form-input,
#project-modal .modal-body label > .form-textarea,
#project-modal .modal-body label > .form-select {
    margin-top: 6px;
}

/* Inputs — bigger padding + softer focus ring (the previous focus
   state just swapped the border color, which is easy to miss). */
#project-modal .modal-body .form-input,
#project-modal .modal-body .form-textarea,
#project-modal .modal-body .form-select {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-size: 13.5px;
    line-height: 1.45;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#project-modal .modal-body .form-input:focus,
#project-modal .modal-body .form-textarea:focus,
#project-modal .modal-body .form-select:focus {
    border-color: #6390ea;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}
#project-modal .modal-body .form-textarea {
    min-height: 90px;
}

/* Tiny helper labels under inputs (e.g. "비워두고 저장하면 기존 키가
   유지됩니다") — the JS sometimes inlines these as <p> with
   muted color. Make sure they have consistent treatment. */
#project-modal .modal-body p {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 6px 0 16px;
}

/* Action row — promote into a real footer with a top divider and
   stickiness so long forms (Hooks, MCP) keep the buttons reachable. */
#project-modal .modal-body .form-actions {
    margin: 24px -32px -24px;
    padding: 16px 32px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: -24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    z-index: 1;
}

/* Primary button: solid accent, prominent — used for 저장 / 생성 /
   해결하기 / 모니터 시작. */
#project-modal .modal-body .btn-primary {
    background: var(--accent, #6390ea);
    border: 1px solid transparent;
    color: #fff;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#project-modal .modal-body .btn-primary:hover {
    background: var(--accent-hover, #3670e4);
}

/* Secondary button: outlined, neutral — for 닫기 / 취소. */
#project-modal .modal-body .btn-secondary {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#project-modal .modal-body .btn-secondary:hover {
    background: var(--bg-secondary);
}

/* Small-variant secondary buttons inside multi-row editors (MCP /
   Worktrees / Hooks add buttons). Tighter shape so they don't loom. */
#project-modal .modal-body .btn-secondary.btn-sm,
#project-modal .modal-body .btn-primary.btn-sm {
    padding: 5px 10px;
    height: 28px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}

/* Worktrees 생성 행: grid `align-items: end` 와 label 의
   `margin-bottom: 14px` 가 충돌해 +생성 버튼이 inputs 보다
   아래로 14px 밀려 보였다. 이 컨텍스트에서만 label margin 을
   제거해 버튼 bottom == input bottom 으로 맞춘다. */
#project-modal .modal-body #wt-create label {
    margin-bottom: 0;
}

/* Universal fix for the same Korean-text-rendering-vertically bug
   we hit in the dashboard header. Buttons / selects anywhere in the
   modal MUST stay on a single horizontal line. */
#project-modal .modal-body button,
#project-modal .modal-body select {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Trash bin icon for row deletion in MCP / Worktree editors */
#project-modal .modal-body .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease,
                border-color 0.1s ease;
    flex-shrink: 0;
}
#project-modal .modal-body .btn-icon:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Hooks-modal event collapsible cards: gentler border + spacing */
#project-modal .modal-body details.hook-section,
#project-modal .modal-body details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 8px 0;
    background: var(--bg-primary);
}
#project-modal .modal-body details summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    list-style: none;
}
#project-modal .modal-body details summary::-webkit-details-marker { display: none; }
#project-modal .modal-body details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 6px;
    font-size: 9px;
    color: var(--text-tertiary);
    transition: transform 0.12s ease;
}
#project-modal .modal-body details[open] summary::before {
    transform: rotate(90deg);
}

/* Helper / hint text that sometimes appears under the form-actions
   (e.g. "저장 후 Preview를 다시 시작해야...") */
#project-modal .modal-body > p:last-child:not(:first-child) {
    color: var(--text-tertiary);
    font-size: 11.5px;
    text-align: right;
    margin: 8px 0 0;
}

/* =====================================================================
   Per-modal structural fixes (env vars / SSH / MCP / Hooks)
   ---------------------------------------------------------------------
   The unified typography upgrade earlier got rid of inline-styled
   text, but each individual modal still had structural issues — env
   rows showing a phantom scrollbar track, MCP "테스트" button
   overflowing the head row, Hooks rows using a 4-col grid that
   crammed in narrow modals, SSH PEM textarea ballooning to half the
   screen. This block rewires the layout of those structural areas to
   match the cleaner DOM that openEnvVarsModal / openTunnelConfigModal
   / openMcpServersModal / openHooksModal now emit.
   ===================================================================== */

/* Shared bits across modals */
#project-modal .settings-section {
    margin-bottom: 22px;
}
#project-modal .settings-section + .settings-section {
    margin-top: 4px;
}
#project-modal .settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
#project-modal .settings-section-head h4 {
    margin: 0;
    padding: 0;
    border: 0;
}
#project-modal .settings-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
#project-modal .settings-field {
    display: block;
    margin-bottom: 14px;
}
#project-modal .settings-hint {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
    font-weight: 400;
}
#project-modal .settings-action-hint {
    flex: 1;
    text-align: left;
    color: var(--text-tertiary);
    font-size: 11.5px;
    line-height: 1.4;
    align-self: center;
    margin-right: 8px;
}
#project-modal .form-actions {
    align-items: center;
}

/* Collapsible sections (.env paste, etc.) — flat row not card */
#project-modal .settings-collapsible {
    margin-top: 8px;
    border: 0;
    padding: 0;
    background: transparent;
}
#project-modal .settings-collapsible summary {
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
}
#project-modal .settings-collapsible[open] summary {
    margin-bottom: 8px;
}
#project-modal .settings-inline-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
#project-modal .settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
#project-modal .settings-inline-check input { margin: 0; }
#project-modal .settings-inline-row .btn-sm {
    margin-left: auto;
}

/* ---- Env vars modal ---- */
/* Kill the phantom 320px-tall scrollbar shell when there's only 1 row */
.env-rows {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 12px;
    gap: 8px;
}
.env-row {
    grid-template-columns: 200px 1fr 32px !important;
    gap: 8px;
    align-items: center;
}
.env-row .form-input {
    padding: 8px 12px !important;
    font-size: 12.5px;
}
.env-row .env-del {
    width: 32px !important;
    height: 32px !important;
}
.env-paste-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 12.5px !important;
    min-height: 130px !important;
}

/* ---- SSH / DB tunnel modal ---- */
.settings-pem {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    min-height: 110px !important;
    max-height: 160px;
    resize: vertical;
}

/* ---- MCP modal — head row split into 2 rows (name+del, then meta+test) ---- */
.mcp-rows { gap: 14px; }
.mcp-row {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-primary);
}
.mcp-row + .mcp-row { margin-top: 10px; }
.mcp-row-head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.mcp-row-head .mcp-name {
    flex: 1;
    min-width: 0;
}
.mcp-row-head .mcp-del {
    flex-shrink: 0;
}
/* (Stale duplicate definitions of .mcp-row-meta / .mcp-enabled /
   .mcp-test removed — they overrode the corrected `flex-end`
   alignment block above and produced the bug where the 활성화 chip
   floated visibly above the stdio select.) */
.mcp-row-body label {
    display: block;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.mcp-row-body .form-input,
.mcp-row-body .form-textarea {
    margin-top: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 12.5px !important;
}
.mcp-probe-result {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    max-height: 240px;
    overflow: auto;
}
.mcp-probe-result[hidden] { display: none; }

/* ---- Hooks modal — fluid row that doesn't break on narrow widths ---- */
.hook-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#project-modal details.hook-section {
    /* Lighten the heavy card-style from earlier */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
}
#project-modal details.hook-section[open] {
    background: var(--bg-primary);
}
.hook-section summary {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.hook-section .hook-event-name {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-weight: 600;
}
.hook-section .hook-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--bg-active, #e8eaed);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}
.hook-section[open] .hook-count {
    background: rgba(74,144,226,0.15);
    color: #6390ea;
}
.hook-section .hook-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.hook-section .hook-add {
    margin-top: 8px;
}
.hook-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 100px 32px;
    gap: 8px;
    align-items: center;
}
.hook-row .form-input {
    padding: 8px 10px !important;
    font-size: 12.5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.hook-blocking-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
.hook-blocking-label input { margin: 0; }
.hook-del {
    width: 32px !important;
    height: 32px !important;
}

/* ---- settings.json modal ---- */
#project-modal .settings-grid-buckets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
#project-modal .settings-grid-buckets label {
    margin-bottom: 0;
}
#project-modal .settings-grid-buckets .form-textarea,
#project-modal .settings-codeish {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 12.5px !important;
    margin-top: 6px;
}