/* ────────────────────────────────────────────────────────────
   설비박사 챗봇 전용 CSS  (Core/app.css + design-tokens.css 위에 덮어씀)
   Brand: --ds-brand-doctor (#7C3AED purple)
   ──────────────────────────────────────────────────────────── */

/* ── 앱 전체 레이아웃 ────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }

:root,
[data-theme=light] {
    --pd-bg:          var(--surface-base, #f8fafc);
    --pd-surface:     var(--surface-raised, #ffffff);
    --pd-surface-2:   var(--surface-sunken, #eef2f7);
    --pd-surface-3:   var(--surface-hover, #f1f5f9);
    --pd-border:      var(--border-subtle, #e2e8f0);
    --pd-border-2:    var(--border-strong, #cbd5e1);
    --pd-text:        var(--text-base, #1e293b);
    --pd-text-strong: var(--text-strong, #0f172a);
    --pd-text-muted:  var(--text-muted, #64748b);
    --pd-muted:       var(--text-muted, #64748b);
    --pd-accent:      var(--ds-brand-doctor, var(--accent, #7c3aed));
    --pd-accent-2:    var(--ds-brand-doctor-hover, var(--accent-hover, #8b5cf6));
    --pd-code-bg:     var(--surface-sunken, #f1f5f9);
}

[data-theme=dark] {
    color-scheme: dark;
    --pd-bg:          var(--surface-base, #0b1120);
    --pd-surface:     var(--surface-raised, #172033);
    --pd-surface-2:   var(--surface-sunken, #0f172a);
    --pd-border:      var(--border-subtle, #263244);
    --pd-border-2:    var(--border-strong, #334155);
    --pd-text:        var(--text-base, #e5e7eb);
    --pd-text-strong: var(--text-strong, #ffffff);
    --pd-text-muted:  #a8b3c5;
    --pd-muted:       #9aa8bb;
    --pd-accent:      var(--accent, #00bedc);
    --pd-code-bg:     #0b1324;
}

.cb-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--pd-bg, #f8fafc);
    color: var(--pd-text, #1e293b);
}

/* ── 헤더 ───────────────────────────────────────────────────── */
.cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 52px;
    background: var(--pd-surface, #fff);
    border-bottom: 1px solid var(--pd-border, #e2e8f0);
    flex-shrink: 0;
    gap: 1rem;
}

.cb-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--pd-text-strong, #0f172a);
}

.cb-logo { height: 28px; width: 28px; object-fit: contain; }

.cb-header-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cb-conn-badge {
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}
.cb-conn-badge.ok  { background: #dcfce7; color: #15803d; }
.cb-conn-badge.err { background: #fee2e2; color: #dc2626; }

[data-theme=dark] .cb-conn-badge.ok  { background: #14532d44; color: #4ade80; }
[data-theme=dark] .cb-conn-badge.err { background: #7f1d1d44; color: #f87171; }

.cb-alarm-badge {
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: #fef3c7;
    color: #b45309;
    font-weight: 700;
}
[data-theme=dark] .cb-alarm-badge { background: #78350f44; color: #fbbf24; }

/* ── 설정 버튼 & 패널 ────────────────────────────────────────── */
.cb-settings-btn,
.cb-theme-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; padding: 2px 6px; border-radius: 6px;
    color: var(--pd-text-muted, #64748b);
    transition: background .15s;
}
.cb-settings-btn:hover,
.cb-theme-btn:hover { background: var(--pd-border, #e2e8f0); }
[data-theme=dark] .cb-settings-btn:hover,
[data-theme=dark] .cb-theme-btn:hover {
    background: var(--pd-surface-2, #0f172a);
    color: var(--pd-text-strong, #fff);
}

.cb-settings-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.35);
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 60px 1rem 0;
}
.cb-settings-panel {
    background: var(--pd-surface, #fff);
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 1.25rem;
    width: 340px;
    display: flex; flex-direction: column; gap: .75rem;
}
.cb-settings-title { font-weight: 700; font-size: .95rem; }
.cb-settings-label { font-size: .78rem; color: var(--pd-text-muted, #64748b); }
.cb-settings-input {
    width: 100%; box-sizing: border-box;
    padding: .45rem .6rem;
    border: 1px solid var(--pd-border, #cbd5e1);
    border-radius: 6px;
    font-size: .85rem;
    background: var(--pd-bg, #f8fafc);
    color: var(--pd-text, #1e293b);
}
.cb-settings-hint { font-size: .73rem; color: var(--pd-text-muted, #94a3b8); word-break: break-all; }
.cb-settings-msg  { font-size: .78rem; color: #15803d; font-weight: 600; }
[data-theme=dark] .cb-settings-msg { color: #4ade80; }
.cb-settings-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }
.cb-btn-cancel {
    padding: .35rem .85rem; border-radius: 6px; font-size: .82rem; cursor: pointer;
    border: 1px solid var(--pd-border, #cbd5e1);
    background: none; color: var(--pd-text, #334155);
}
.cb-btn-save {
    padding: .35rem .9rem; border-radius: 6px; font-size: .82rem; cursor: pointer;
    border: none; background: var(--pd-accent, #7c3aed); color: #fff; font-weight: 600;
}
.cb-btn-save:hover { filter: brightness(1.1); }
[data-theme=dark] .cb-settings-panel { background: #1e293b; border-color: #334155; }
[data-theme=dark] .cb-settings-input { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme=dark] .cb-btn-cancel { color: #e2e8f0; border-color: #475569; }
[data-theme=dark] .cb-settings-hint,
[data-theme=dark] .cb-settings-label,
[data-theme=dark] .cb-radio-label { color: #cbd5e1; }

/* ── 설정 패널 탭 ──────────────────────────────────────────────── */
.cb-stab-row {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--pd-border, #e2e8f0);
    margin-bottom: .75rem;
}
.cb-stab {
    padding: .35rem .85rem; border: none; background: none; cursor: pointer;
    font-size: .82rem; font-weight: 500; color: var(--pd-text-muted, #64748b);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s;
}
.cb-stab.active { color: var(--pd-accent, #3b82f6); border-bottom-color: var(--pd-accent, #3b82f6); font-weight: 600; }
.cb-stab:hover:not(.active) { color: var(--pd-text, #1e293b); }
[data-theme=dark] .cb-stab.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ── 라디오 그룹 ─────────────────────────────────────────────── */
.cb-radio-row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .25rem; }
.cb-radio-label { display: flex; align-items: center; gap: .4rem; font-size: .83rem; cursor: pointer; }

/* ── 탭 네비게이션 ───────────────────────────────────────────── */
.cb-tabs {
    display: flex;
    background: var(--pd-surface, #fff);
    border-bottom: 1px solid var(--pd-border, #e2e8f0);
    padding: 0 1rem;
    flex-shrink: 0;
}
.cb-tab {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--pd-text-muted, #64748b);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
}
.cb-tab:hover { color: var(--pd-text, #1e293b); }
.cb-tab.active {
    color: var(--pd-accent, #3b82f6);
    border-bottom-color: var(--pd-accent, #3b82f6);
    font-weight: 600;
}
[data-theme=dark] .cb-tabs { background: var(--pd-surface, #1e293b); border-color: var(--pd-border, #334155); }
[data-theme=dark] .cb-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ── 메인 컨텐츠 영역 ────────────────────────────────────────── */
.cb-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── API 디버그 페이지 (트리 UI) ─────────────────────────────── */
.dbt-root {
    flex: 1; overflow-y: auto;
    padding: .6rem .75rem;
    display: flex; flex-direction: column; gap: .5rem;
    max-width: 1020px; margin: 0 auto;
    width: 100%; box-sizing: border-box;
}

/* 헤더 바 */
.dbt-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
    padding: .45rem .8rem;
    background: var(--pd-surface, #fff);
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 8px;
    font-size: .82rem;
}
.dbt-header-info { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.dbt-header-label { font-weight: 700; color: var(--pd-text, #1e293b); white-space: nowrap; }
.dbt-header-url {
    font-family: monospace; font-size: .8rem;
    color: var(--pd-text-muted, #64748b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbt-loading-dot { color: #f59e0b; font-size: .75rem; animation: dbt-blink .8s infinite; }
@keyframes dbt-blink { 0%,100% { opacity:1; } 50% { opacity:.2; } }

.dbt-header-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.dbt-ep-badge {
    font-size: .68rem; padding: 1px 7px; border-radius: 10px;
    background: var(--pd-border, #e2e8f0); color: var(--pd-text-muted, #64748b);
    font-weight: 600;
}
.dbt-hdr-btn {
    padding: .22rem .65rem; border-radius: 5px; font-size: .73rem; cursor: pointer;
    border: 1px solid var(--pd-border, #cbd5e1);
    background: none; color: var(--pd-text-muted, #64748b); white-space: nowrap;
    transition: background .12s;
}
.dbt-hdr-btn:hover { background: var(--pd-bg, #f8fafc); color: var(--pd-text, #1e293b); }
.dbt-search {
  padding: 3px 8px; font-size: .78rem; border: 1px solid var(--pd-border, #cbd5e1); border-radius: 5px;
  outline: none; width: 180px; background: var(--pd-surface, #fff); color: var(--pd-text, #1e293b);
}
.dbt-search:focus { border-color: var(--pd-accent, #3b82f6); }
.dbt-ping-result { font-size: .73rem; font-weight: 600; white-space: nowrap; }
.dbt-ping-ok  { color: var(--signal-ok, #16a34a); }
.dbt-ping-err { color: var(--signal-err, #dc2626); }
[data-theme=dark] .dbt-ping-ok  { color: #4ade80; }
[data-theme=dark] .dbt-ping-err { color: #f87171; }
[data-theme=dark] .dbt-header { background: #1e293b; border-color: #334155; }
[data-theme=dark] .dbt-header-url { color: #94a3b8; }
[data-theme=dark] .dbt-ep-badge { background: #334155; }
[data-theme=dark] .dbt-hdr-btn { border-color: #475569; color: #94a3b8; }
[data-theme=dark] .dbt-hdr-btn:hover { background: #0f172a; color: #e2e8f0; }

/* 트리 */
.dbt-tree { display: flex; flex-direction: column; gap: .4rem; }

/* 그룹 */
.dbt-group {
    background: var(--pd-surface, #fff);
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 8px; overflow: hidden;
}
[data-theme=dark] .dbt-group { background: #1e293b; border-color: #334155; }

.dbt-group-hd {
    display: flex; align-items: center; gap: .4rem;
    padding: .42rem .75rem;
    cursor: pointer; user-select: none;
    background: var(--pd-bg, #f8fafc);
    transition: background .12s;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--pd-text-muted, #64748b);
}
.dbt-group-hd:hover { background: #f0f4f8; }
[data-theme=dark] .dbt-group-hd { background: #0f172a; }
[data-theme=dark] .dbt-group-hd:hover { background: #1a2535; }

.dbt-arrow { font-size: .7rem; flex-shrink: 0; color: var(--pd-text-muted, #94a3b8); }
.dbt-group-name { flex: 1; }
.dbt-group-badge {
    font-size: .66rem; padding: 1px 5px; border-radius: 8px;
    background: var(--pd-border, #e2e8f0); color: var(--pd-text-muted, #64748b);
    text-transform: none; letter-spacing: 0;
}
[data-theme=dark] .dbt-group-badge { background: #334155; }

/* ADB 상태 배지 (PlcDebug 그룹 헤더) */
.dbt-adb-badge {
    font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 8px;
    cursor: default; user-select: none;
}
.dbt-adb-ok  { background: rgba(22,163,74,.15);  color: #16a34a; border: 1px solid rgba(22,163,74,.3); }
.dbt-adb-err { background: rgba(220,38,38,.1);   color: #dc2626; border: 1px solid rgba(220,38,38,.25); }
[data-theme=dark] .dbt-adb-ok  { background: rgba(63,185,80,.15); color: #3fb950; border-color: rgba(63,185,80,.3); }
[data-theme=dark] .dbt-adb-err { background: rgba(248,81,73,.12); color: #f85149; border-color: rgba(248,81,73,.28); }

/* 엔드포인트 목록 */
.dbt-ep-list {
    border-top: 1px solid var(--pd-border, #e2e8f0);
    padding: .3rem 0 .3rem .5rem;
}
[data-theme=dark] .dbt-ep-list { border-color: #334155; }

/* 노드 (트리 가지) */
.dbt-ep-node {
    display: flex; gap: 0;
    padding: .3rem .6rem .3rem 0;
    border-bottom: 1px solid var(--pd-border, #f1f5f9);
}
.dbt-ep-node:last-child { border-bottom: none; }
[data-theme=dark] .dbt-ep-node { border-color: #ffffff08; }
.dbt-ep-node.dbt-ep-danger { border-left: 2px solid #fca5a5; padding-left: 0; }
[data-theme=dark] .dbt-ep-node.dbt-ep-danger { border-left-color: #f87171; }

/* 트리 커넥터 */
.dbt-connector {
    flex-shrink: 0; width: 20px;
    display: flex; align-items: flex-start; padding-top: .15rem;
}
.dbt-vert-line {
    font-family: monospace; font-size: .8rem;
    color: var(--pd-border, #cbd5e1); line-height: 1;
    user-select: none;
}
[data-theme=dark] .dbt-vert-line { color: #475569; }

/* 노드 컨텐츠 */
.dbt-ep-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }

/* 주행 행 (method + path + buttons) */
.dbt-ep-row {
    display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap;
}
.dbt-path {
    font-family: monospace; font-size: .8rem;
    color: var(--pd-text, #1e293b); flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme=dark] .dbt-path { color: #cbd5e1; }

.dbt-ep-btns { display: flex; gap: .25rem; flex-shrink: 0; }

/* 메서드 배지 */
.dbt-method {
    font-size: .64rem; font-weight: 700; padding: 2px 5px;
    border-radius: 3px; font-family: monospace; flex-shrink: 0;
    min-width: 40px; text-align: center;
}
.dbt-m-get    { background: #dbeafe; color: #1d4ed8; }
.dbt-m-post   { background: #dcfce7; color: #15803d; }
.dbt-m-put    { background: #fef3c7; color: #b45309; }
.dbt-m-delete { background: #fee2e2; color: #dc2626; }
[data-theme=dark] .dbt-m-get    { background: #1e3a5f; color: #60a5fa; }
[data-theme=dark] .dbt-m-post   { background: #14532d44; color: #4ade80; }
[data-theme=dark] .dbt-m-put    { background: #78350f44; color: #fbbf24; }
[data-theme=dark] .dbt-m-delete { background: #7f1d1d44; color: #f87171; }

/* 버튼 */
.dbt-btn-fill {
    padding: .2rem .5rem; border-radius: 4px; font-size: .7rem; cursor: pointer;
    border: 1px solid #a5b4fc; background: #eef2ff; color: #4338ca;
    white-space: nowrap; transition: background .12s;
}
.dbt-btn-fill:hover { background: #e0e7ff; }
[data-theme=dark] .dbt-btn-fill { background: #1e1b4b44; border-color: #6366f1; color: #a5b4fc; }

.dbt-btn-run {
    padding: .2rem .6rem; border: none; border-radius: 4px;
    font-size: .75rem; font-weight: 600; cursor: pointer;
    background: var(--pd-accent, #3b82f6); color: #fff;
    white-space: nowrap; transition: background .12s, opacity .12s;
}
.dbt-btn-run:hover:not(:disabled) { background: #2563eb; }
.dbt-btn-run:disabled { opacity: .4; cursor: not-allowed; }
.dbt-btn-danger { background: #dc2626; }
.dbt-btn-danger:hover:not(:disabled) { background: #b91c1c; }

/* 파라미터 행 */
.dbt-params-row {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.dbt-ptag {
    font-size: .58rem; font-weight: 700; padding: 1px 4px;
    border-radius: 3px; flex-shrink: 0; font-family: monospace;
}
.dbt-ptag-q { background: #dbeafe; color: #1d4ed8; }
.dbt-ptag-b { background: #dcfce7; color: #15803d; }
[data-theme=dark] .dbt-ptag-q { background: #1e3a5f; color: #60a5fa; }
[data-theme=dark] .dbt-ptag-b { background: #14532d44; color: #4ade80; }

.dbt-pname {
    font-size: .72rem; color: var(--pd-text-muted, #64748b);
    white-space: nowrap;
}
.dbt-pinput {
    padding: .18rem .4rem;
    border: 1px solid var(--pd-border, #cbd5e1);
    border-radius: 4px; font-size: .74rem;
    background: var(--pd-bg, #f8fafc);
    color: var(--pd-text, #1e293b);
    width: 115px; transition: border-color .12s;
}
.dbt-pinput:focus { outline: none; border-color: var(--pd-accent, #3b82f6); }
[data-theme=dark] .dbt-pinput { background: #0f172a; border-color: #475569; color: #e2e8f0; }

/* 결과 */
.dbt-result {
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 6px; overflow: hidden;
    background: var(--pd-bg, #f8fafc);
}
[data-theme=dark] .dbt-result { background: #0f172a; border-color: #334155; }

.dbt-result-hd {
    display: flex; align-items: center; gap: .4rem;
    padding: .25rem .55rem;
    border-bottom: 1px solid var(--pd-border, #e2e8f0);
    font-size: .72rem;
}
[data-theme=dark] .dbt-result-hd { border-color: #334155; }

.dbt-status {
    font-weight: 700; padding: 1px 6px; border-radius: 3px;
    font-family: monospace; font-size: .7rem;
}
.dbt-ok  { background: #dcfce7; color: #15803d; }
.dbt-err { background: #fee2e2; color: #dc2626; }
[data-theme=dark] .dbt-ok  { background: #14532d44; color: #4ade80; }
[data-theme=dark] .dbt-err { background: #7f1d1d44; color: #f87171; }

.dbt-ms { color: var(--pd-text-muted, #94a3b8); font-size: .7rem; }
.dbt-btn-xs {
    margin-left: auto; padding: 1px 7px; font-size: .68rem; cursor: pointer;
    border-radius: 4px; border: 1px solid var(--pd-border, #e2e8f0);
    background: none; color: var(--pd-text-muted, #64748b);
}
.dbt-btn-xs:hover { background: var(--pd-surface, #fff); }
[data-theme=dark] .dbt-btn-xs { border-color: #334155; color: #94a3b8; }

.dbt-pre {
    margin: 0; padding: .4rem .6rem;
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
    font-size: .73rem; line-height: 1.5;
    overflow-x: auto; max-height: 260px; overflow-y: auto;
    white-space: pre; color: var(--pd-text, #1e293b);
}
[data-theme=dark] .dbt-pre { color: #e2e8f0; }

/* ── 채팅 루트 ────────────────────────────────────────────────── */
.cb-chat-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: .5rem .75rem;
    box-sizing: border-box;
    gap: .5rem;
}

/* ── 퀵 질문 버튼 ────────────────────────────────────────────── */
.cb-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    flex-shrink: 0;
}

.cb-quick-btn {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--pd-border, #e2e8f0);
    background: var(--pd-surface, #fff);
    color: var(--pd-text, #1e293b);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.cb-quick-btn:hover:not(:disabled) {
    background: var(--pd-accent, #3b82f6);
    border-color: var(--pd-accent, #3b82f6);
    color: #fff;
}
.cb-quick-btn:disabled { opacity: .5; cursor: not-allowed; }
.cb-quick-clear  { color: #64748b; }
.cb-export-btn   { color: #2563eb; }

/* ── 메시지 복사 · 리포트 다운로드 버튼 ──────────────────────── */
.cb-btn-copy,
.cb-btn-download-report {
    display: inline-block; margin-left: .4rem;
    padding: 1px 6px; border: none; border-radius: 4px; cursor: pointer;
    font-size: .75rem; background: none;
    color: var(--pd-text-muted, #94a3b8);
    opacity: 0; transition: opacity .15s, background .12s;
    vertical-align: middle;
}
.cb-msg-bubble:hover .cb-btn-copy,
.cb-msg-bubble:hover .cb-btn-download-report { opacity: 1; }
.cb-btn-copy:hover { background: var(--pd-border, #e2e8f0); color: var(--pd-text, #334155); }
.cb-btn-download-report {
    color: var(--pd-accent, #0891a8);
    font-weight: 600;
}
.cb-btn-download-report:hover {
    background: color-mix(in srgb, var(--pd-accent, #0891a8) 12%, transparent);
    color: var(--pd-accent, #0891a8);
}
[data-theme=dark] .cb-btn-download-report { color: #00d7df; }
[data-theme=dark] .cb-btn-download-report:hover { background: rgba(0,215,223,.14); }

/* ── HTML 리포트 인라인 프리뷰 ────────────────────────────────── */
.cb-html-preview-wrap {
  margin-top: .5rem;
  border: 1px solid var(--pd-border, #dbe3ee);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cb-html-iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: none;
  background: #fff;
}

[data-theme=dark] .cb-html-preview-wrap {
  border-color: #334155;
  background: #1e293b;
}

[data-theme=dark] .cb-html-iframe {
  background: #1e293b;
  color-scheme: light; /* iframe 내부는 항상 라이트 모드 */
}

/* ── 메시지 목록 ─────────────────────────────────────────────── */
.cb-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .5rem 0;
}

/* ── 웰컴 화면 ────────────────────────────────────────────────── */
.cb-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1rem;
    color: var(--pd-muted, #94a3b8);
    padding: 2rem;
    text-align: center;
}
.cb-welcome-icon { font-size: 3rem; }
.cb-welcome-text { font-size: .95rem; line-height: 1.6; }

/* ── 메시지 버블 ─────────────────────────────────────────────── */
.cb-msg {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
.cb-msg-user { flex-direction: row-reverse; }

.cb-msg-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    background: var(--pd-border, #e2e8f0);
    color: var(--pd-muted, #64748b);
}
.cb-msg-user .cb-msg-avatar {
    background: var(--pd-accent, #3b82f6);
    color: #fff;
}

.cb-msg-bubble {
    max-width: 80%;
    padding: .65rem .95rem;
    border-radius: 12px;
    font-size: .875rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    transition: box-shadow .15s;
}

.cb-msg-user .cb-msg-bubble {
    background: var(--pd-accent, #3b82f6);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.cb-msg-assistant .cb-msg-bubble {
    background: var(--pd-surface, #fff);
    border: 1px solid var(--pd-border, #e2e8f0);
    border-bottom-left-radius: 4px;
}

[data-theme=dark] .cb-msg-assistant .cb-msg-bubble {
    background: var(--pd-surface, #1e293b);
    border-color: var(--pd-border, #334155);
    color: var(--pd-text, #e5e7eb);
}

[data-theme=dark] .cb-msg-assistant .cb-msg-bubble h3,
[data-theme=dark] .cb-msg-assistant .cb-msg-bubble h4,
[data-theme=dark] .cb-msg-assistant .cb-msg-bubble h5,
[data-theme=dark] .cb-msg-assistant .cb-msg-bubble strong {
    color: var(--pd-text-strong, #fff);
}

[data-theme=dark] .cb-msg-assistant .cb-msg-bubble table,
[data-theme=dark] .cb-msg-assistant .cb-msg-bubble th,
[data-theme=dark] .cb-msg-assistant .cb-msg-bubble td {
    border-color: var(--pd-border-2, #334155);
}

[data-theme=dark] .cb-msg-assistant .cb-msg-bubble th {
    background: var(--pd-surface-2, #0f172a);
    color: var(--pd-text-strong, #fff);
}

.cb-msg-bubble ::selection,
.cb-input::selection,
.lls-page ::selection {
    background: #1d4ed8;
    color: #fff;
}

.cb-msg-bubble code {
    background: var(--pd-code-bg, #f1f5f9);
    padding: 1px 4px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
    font-size: .82em;
}
[data-theme=dark] .cb-msg-bubble code { background: #0f172a; }

.cb-msg-bubble pre {
    background: var(--pd-code-bg, #f1f5f9);
    border-radius: 6px;
    padding: .6rem .8rem;
    overflow-x: auto;
    margin: .4rem 0;
    font-size: .82em;
}
[data-theme=dark] .cb-msg-bubble pre { background: #0f172a; }

.cb-msg-bubble strong { font-weight: 700; }

.cb-msg-bubble table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: .65rem 0;
    overflow: hidden;
    border: 1px solid var(--pd-border-2, #cbd5e1);
    background: var(--pd-surface, #fff);
}

.cb-msg-bubble th,
.cb-msg-bubble td {
    border: 1px solid var(--pd-border-2, #cbd5e1);
    padding: .42rem .65rem;
    text-align: left;
    vertical-align: top;
}

.cb-msg-bubble th {
    background: var(--pd-surface-2, #eef2f7);
    color: var(--pd-text-strong, #0f172a);
    font-weight: 800;
}

.cb-msg-bubble td {
    color: var(--pd-text, #1e293b);
}

.cb-msg-bubble tr:nth-child(even) td {
    background: color-mix(in srgb, var(--pd-surface-2, #eef2f7) 45%, transparent);
}

[data-theme=dark] .cb-msg-bubble table {
    border-color: #52647d;
    background: #071426;
}

[data-theme=dark] .cb-msg-bubble th,
[data-theme=dark] .cb-msg-bubble td {
    border-color: #52647d;
}

[data-theme=dark] .cb-msg-bubble tr:nth-child(even) td {
    background: rgba(255, 255, 255, .035);
}

/* ── 메시지 타임스탬프 ──────────────────────────────────────── */
.cb-msg-time {
    display: block; text-align: right;
    font-size: .7rem; color: var(--pd-muted, #94a3b8);
    margin-top: .25rem; opacity: .7;
}
.cb-busy-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    padding: .3rem .55rem;
    background: rgba(0,215,223,.06);
    border: 1px solid rgba(0,215,223,.18);
    border-radius: 6px;
    min-height: 28px;
}
.cb-progress-text {
    font-size: .78rem;
    color: var(--pd-accent, #00d7df);
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-elapsed-badge {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pd-text-muted, #94a3b8);
    background: rgba(255,255,255,.07);
    border-radius: 4px;
    padding: 1px 6px;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}
.cb-step-badge {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #60a5fa;
    background: rgba(96,165,250,.15);
    border: 1px solid rgba(96,165,250,.3);
    border-radius: 10px;
    padding: 1px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── 타이핑 애니메이션 ───────────────────────────────────────── */
.cb-thinking { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.cb-dot-anim {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pd-muted, #94a3b8);
    animation: cb-bounce .8s infinite;
}
@keyframes cb-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

/* ── 알람 배너 ────────────────────────────────────────────────── */
.cb-alarm-banner {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: .4rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    animation: cb-slide-in .2s ease;
}
[data-theme=dark] .cb-alarm-banner {
    background: #78350f44;
    border-color: #f59e0b44;
    color: #fcd34d;
}
@keyframes cb-slide-in {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ── 다음 확인 질문 (Follow-up chips) ────────────────────────── */
.cb-followups {
    width: min(820px, 100%);
    margin-top: .2rem;
    padding: .7rem;
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 8px;
    background: var(--pd-surface, #fff);
}

.cb-followups-title {
    margin-bottom: .5rem;
    color: var(--pd-text-muted, #64748b);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cb-followups-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
}

.cb-followup-chip {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 48px;
    padding: .5rem .65rem;
    text-align: left;
    border: 1px solid var(--pd-border, #e2e8f0);
    border-left: 3px solid var(--pd-accent, #0891a8);
    border-radius: 7px;
    background: var(--pd-surface-2, #f1f5f9);
    color: var(--pd-text, #1e293b);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.cb-followup-chip:hover:not(:disabled) {
    background: var(--pd-surface, #fff);
    border-color: var(--pd-accent, #0891a8);
}

.cb-followup-chip:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cb-followup-chip.danger  { border-left-color: var(--signal-err, #dc2626); }
.cb-followup-chip.warning { border-left-color: var(--signal-warn, #b45309); }

.cb-followup-chip strong {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pd-text-strong, #0f172a);
}

.cb-followup-chip span {
    color: var(--pd-text-muted, #64748b);
    font-size: .68rem;
    line-height: 1.25;
}

/* ── 입력 영역 ────────────────────────────────────────────────── */
.cb-input-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.cb-input {
    flex: 1;
    padding: .55rem .75rem;
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 10px;
    background: var(--pd-surface, #fff);
    color: var(--pd-text, #1e293b);
    font-size: .875rem;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    outline: none;
    transition: border-color .15s;
    min-height: 2.5rem;
    max-height: 7.5rem;
    overflow-y: auto;
}
.cb-input:focus { border-color: var(--pd-accent, #3b82f6); }
.cb-input:disabled { opacity: .6; }
[data-theme=dark] .cb-input {
    background: var(--pd-surface, #1e293b);
    border-color: var(--pd-border, #334155);
    color: var(--pd-text, #e5e7eb);
}
[data-theme=dark] .cb-input::placeholder { color: #7f8ea3; }

.cb-btn-send,
.cb-btn-stop {
    padding: .55rem 1.1rem;
    border: none;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, opacity .15s;
}

.cb-btn-send {
    background: var(--pd-accent, #3b82f6);
    color: #fff;
}
.cb-btn-send:hover:not(:disabled) { background: #2563eb; }
.cb-btn-send:disabled { opacity: .4; cursor: not-allowed; }

.cb-btn-stop {
    background: #fee2e2;
    color: #dc2626;
}
.cb-btn-stop:hover { background: #fecaca; }
[data-theme=dark] .cb-btn-stop { background: #7f1d1d44; color: #f87171; }

.cb-btn-clear {
    padding: .4rem .7rem;
    border: 1px solid var(--pd-border, #e2e8f0);
    border-radius: 8px;
    background: none;
    color: var(--pd-text-muted, #94a3b8);
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.cb-btn-clear:hover { background: var(--pd-border, #e2e8f0); color: var(--pd-text, #334155); }
[data-theme=dark] .cb-btn-clear { border-color: #475569; color: #64748b; }
[data-theme=dark] .cb-btn-clear:hover { background: #334155; color: #e2e8f0; }

/* ── 스크롤바 ─────────────────────────────────────────────────── */
.cb-messages::-webkit-scrollbar { width: 5px; }
.cb-messages::-webkit-scrollbar-track { background: transparent; }
.cb-messages::-webkit-scrollbar-thumb {
    background: var(--pd-border, #e2e8f0);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   비주얼 카드 공통 (vis-*)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --vis-green:  #22c55e;
  --vis-blue:   #3b82f6;
  --vis-purple: #a855f7;
  --vis-orange: #f97316;
  --vis-red:    #ef4444;
  --vis-yellow: #eab308;
  --vis-gray:   #94a3b8;
  --vis-gold:   #f59e0b;
  --vis-silver: #94a3b8;
  --vis-bronze: #b45309;
  --vis-bg:     #f8fafc;
  --vis-border: #e2e8f0;
  --vis-text:   #0f172a;
  --vis-sub:    #64748b;
}
[data-theme=dark] {
  --vis-bg:      #1e293b;
  --vis-border:  #334155;
  --vis-text:    #f1f5f9;
  --vis-sub:     #94a3b8;
  --vis-blue-bg: rgba(59,130,246,.15);
  --vis-blue:    #60a5fa;
}

/* 메시지 바디 (버블 + 비주얼) */
.cb-msg-body { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }

/* 비주얼 영역 */
.cb-visual-area { width: 100%; }

/* 카드 공통 */
.vis-card {
  background: var(--vis-bg);
  border: 1px solid var(--vis-border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-top: .25rem;
  font-size: .85rem;
  color: var(--vis-text);
  overflow: hidden;
}

.vis-card-hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .75rem;
}
.vis-icon { font-size: 1rem; }
.vis-ts {
  margin-left: auto;
  font-size: .75rem;
  color: var(--vis-sub);
  font-weight: 400;
}
.vis-period { font-size: .75rem; color: var(--vis-sub); font-weight: 400; white-space: nowrap; }
.vis-warn-banner { background: #fff3cd; border-left: 3px solid #f59e0b; color: #92400e; font-size: .8rem; padding: .4rem .75rem; border-radius: 0 4px 4px 0; margin-bottom: .5rem; }
[data-theme=dark] .vis-warn-banner { background: #2d1f00; border-left-color: #f59e0b; color: #fbbf24; }
.vis-flow-tag {
  background: var(--vis-blue);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .75rem;
}
.vis-badge-count {
  background: var(--vis-red);
  color: #fff;
  border-radius: 9px;
  padding: 1px 7px;
  font-size: .75rem;
}
.vis-badge-alarm { background: #ef4444; }
.vis-badge-ok    { background: var(--vis-green); color:#fff; border-radius:9px; padding:1px 7px; font-size:.75rem; }
.vis-empty { color: var(--vis-sub); font-style: italic; padding: .5rem 0; }
.vis-more,
.vis-rank-more,
.vis-alarm-more,
.vis-anomaly-more {
  color: var(--vis-sub); font-size: .78rem; margin-top: .4rem;
  background: none; border: none; cursor: pointer; text-decoration: underline; display: block; padding: 0;
}
.vis-sort-btn {
  font-size: .72rem; padding: 1px 6px; margin-left: 4px;
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 4px;
  background: transparent; color: var(--text-muted, #64748b); cursor: pointer;
}
.vis-sort-btn:hover { background: var(--surface-hover, #f1f5f9); }
.vis-copy-btn {
  font-size: .72rem; padding: 1px 6px; margin-left: 4px;
  border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 4px;
  background: transparent; color: var(--text-muted, #64748b); cursor: pointer;
}
.vis-copy-btn:hover { background: var(--surface-hover, #f1f5f9); }
.vis-sort-hd-btn {
  font-size: .68rem; padding: 0 3px; background: none; border: none; cursor: pointer;
  color: inherit; opacity: .7;
}
.vis-sort-hd-btn:hover { opacity: 1; }

/* ── Flow 그리드 ──────────────────────────────────────────────── */
.vis-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .5rem;
}
.vis-flow-cell {
  border-radius: 8px;
  border: 1px solid var(--vis-border);
  padding: .6rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.vis-flow-name   { font-weight: 600; font-size: .82rem; }
.vis-flow-ct     { font-size: .78rem; color: var(--vis-sub); }
.vis-flow-moving { font-size: .72rem; color: var(--vis-blue); }

.vis-state-run     { border-left: 3px solid var(--vis-green); }
.vis-state-idle    { border-left: 3px solid var(--vis-yellow); }
.vis-state-err     { border-left: 3px solid var(--vis-red); cursor: pointer; }
.vis-state-move    { border-left: 3px solid var(--vis-blue); }
.vis-state-unknown { border-left: 3px solid var(--vis-gray); }

.vis-flow-state-badge {
  font-size: .72rem;
  font-weight: 600;
  opacity: .8;
}
.vis-state-run  .vis-flow-state-badge { color: var(--vis-green); }
.vis-state-idle .vis-flow-state-badge { color: var(--vis-yellow); }
.vis-state-err  .vis-flow-state-badge { color: var(--vis-red); }
.vis-state-move .vis-flow-state-badge { color: var(--vis-blue); }

.vis-dev      { font-size: .72rem; }
.vis-dev-hi   { color: var(--vis-red); }
.vis-dev-lo   { color: var(--vis-blue); }

/* ── OEE 게이지 ────────────────────────────────────────────────── */
.vis-oee-gauges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.vis-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 70px;
}
.vis-gauge-big .vis-gauge-ring {
  width: 80px; height: 80px;
  font-size: 1.1rem;
}
.vis-gauge-ring {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(
    var(--gauge-color, var(--vis-blue)) calc(var(--gauge-pct, 0) * 1%),
    var(--vis-border) 0
  );
  display: flex; align-items: center; justify-content: center;
}
.vis-gauge-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--vis-bg);
}
.vis-gauge-val {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: .8rem;
  color: var(--vis-text);
}
.vis-gauge-val-copyable { cursor: pointer; }
.vis-gauge-val-copyable:hover { opacity: .75; }
.vis-gauge-label { font-size: .75rem; color: var(--vis-sub); font-weight: 600; }
.vis-gauge-note  { font-size: .68rem; color: var(--vis-yellow); text-align: center; max-width: 80px; }
.vis-gauge-target-note { font-size: .65rem; color: var(--vis-sub); text-align: center; }
.vis-gauge-target-line {
  position: absolute; width: 2px; height: 50%;
  border-left: 2px dashed rgba(0,0,0,0.35);
  transform-origin: bottom center;
  bottom: 50%; left: calc(50% - 1px);
  z-index: 2; pointer-events: none;
}
[data-theme=dark] .vis-gauge-target-line { border-left-color: rgba(255,255,255,0.4); }

/* ── OEE 메트릭 ────────────────────────────────────────────────── */
.vis-oee-metrics {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.vis-metric {
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 80px;
}
.vis-metric-label { font-size: .72rem; color: var(--vis-sub); }
.vis-metric-val   { font-size: .85rem; font-weight: 600; }
.vis-metric-ok  { color: var(--vis-green); }
.vis-metric-err { color: var(--vis-red); }
.vis-ok   { color: var(--vis-green); }
.vis-warn { color: var(--vis-yellow); }
.vis-err  { color: var(--vis-red); }

/* ── 순위 바 ────────────────────────────────────────────────────── */
.vis-ranking { display: flex; flex-direction: column; gap: .35rem; }
.vis-ranking-title { font-size: .78rem; font-weight: 600; margin-bottom: .25rem; color: var(--vis-sub); }
.vis-rank-row {
  display: flex; align-items: center; gap: .5rem;
}
.vis-rank-no   { font-size: .75rem; color: var(--vis-sub); width: 16px; text-align: right; }
.vis-rank-name { font-size: .82rem; font-weight: 600; min-width: 70px; }
.vis-rank-bar-wrap {
  flex: 1;
  background: var(--vis-border);
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
}
.vis-rank-bar {
  height: 100%;
  background: var(--vis-blue);
  border-radius: 3px;
  transition: width .4s ease;
}
.vis-rank-val  { font-size: .78rem; width: 45px; text-align: right; font-weight: 600; }
.vis-rank-pct  { font-size: .72rem; width: 34px; text-align: right; color: var(--vis-sub); }
.vis-rank-pct.vis-warn  { color: var(--vis-orange, #f97316); font-weight: 600; }
.vis-rank-pct.vis-error { color: var(--vis-red, #f85149);   font-weight: 600; }
.vis-rank-down { font-size: .7rem; color: var(--vis-sub); width: 60px; text-align: right; }

/* ── 다운타임 테이블 ──────────────────────────────────────────── */
.vis-expand-btn { display: block; width: 100%; margin-top: 4px; padding: 3px 0; font-size: .72rem; border: 1px dashed var(--vis-border); border-radius: 6px; background: transparent; cursor: pointer; color: var(--vis-sub); text-align: center; }
.vis-expand-btn:hover { background: var(--vis-bg-hover, #f5f5f5); color: var(--vis-blue); }
.vis-window-tabs, .vis-filter-row { display: flex; gap: 4px; margin-bottom: 6px; }
.vis-window-tabs button, .vis-filter-row button { padding: 2px 10px; font-size: .72rem; border: 1px solid var(--vis-border); border-radius: 12px; background: transparent; cursor: pointer; color: var(--vis-sub); }
.vis-window-tabs button.active, .vis-filter-row button.active { background: var(--vis-blue); color: #fff; border-color: var(--vis-blue); }
.vis-filter-row button.err { color: var(--vis-red); }
.vis-filter-row button.active.err { background: var(--vis-red); border-color: var(--vis-red); color: #fff; }
.vis-filter-row button:disabled { opacity: .4; cursor: not-allowed; }
.vis-table-wrap { overflow-x: auto; }
.vis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.vis-table th {
  text-align: left;
  padding: .35rem .6rem;
  background: var(--vis-border);
  font-weight: 600;
  font-size: .75rem;
  color: var(--vis-sub);
}
.vis-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.vis-th-sort:hover { color: var(--vis-text); }
.vis-table td {
  padding: .3rem .6rem;
  border-bottom: 1px solid var(--vis-border);
}
.vis-table tr:last-child td { border-bottom: none; }
.vis-row-fail td { color: var(--vis-red); }
.vis-td-dur { font-weight: 600; }

/* ── 알람 리스트 ───────────────────────────────────────────────── */
.vis-alarm-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.vis-alarm-tabs button { padding: 2px 10px; font-size: .72rem; border: 1px solid var(--vis-border); border-radius: 12px; background: transparent; cursor: pointer; color: var(--vis-sub); }
.vis-alarm-tabs button.active { background: var(--vis-blue); color: #fff; border-color: var(--vis-blue); }
.vis-alarm-tabs button.err { color: var(--vis-red); }
.vis-alarm-tabs button.active.err { background: var(--vis-red); border-color: var(--vis-red); color: #fff; }
.vis-alarm-tabs button.warn { color: var(--vis-yellow); }
.vis-alarm-tabs button.active.warn { background: var(--vis-yellow); border-color: var(--vis-yellow); color: #000; }
.vis-alarm-list { display: flex; flex-direction: column; gap: .3rem; }
.vis-alarm-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 6px;
  background: #fef2f2;
  font-size: .8rem;
}
[data-theme=dark] .vis-alarm-item { background: #3f1818; }
.vis-alarm-item.vis-level-error  { border-left: 3px solid var(--vis-red); }
.vis-alarm-item.vis-level-warning { background: #fffbeb; border-left: 3px solid var(--vis-yellow); }
[data-theme=dark] .vis-alarm-item.vis-level-warning { background: #2d2500; }
.vis-alarm-level   { font-size: .7rem; font-weight: 700; color: var(--vis-red); min-width: 45px; }
.vis-alarm-kind    { font-weight: 600; }
.vis-alarm-flow    { color: var(--vis-blue); }
.vis-alarm-work    { color: var(--vis-sub); }
.vis-alarm-elapsed { margin-left: auto; color: var(--vis-sub); font-size: .72rem; }
.vis-alarm-copy { margin-left: 4px; padding: 0 5px; font-size: .72rem; border: 1px solid var(--vis-border); border-radius: 3px; background: transparent; cursor: pointer; color: var(--vis-sub); line-height: 1.4; }
.vis-alarm-copy:hover { background: var(--vis-hover); }

/* ── 스파크라인 (CT 추이) ──────────────────────────────────────── */
.vis-chart-meta {
  display: flex; gap: 1rem; font-size: .78rem; color: var(--vis-sub);
  margin-bottom: .5rem;
}
.vis-chart-meta strong { color: var(--vis-text); }
.vis-sparkline {
  display: flex; align-items: flex-end;
  height: 60px; gap: 2px;
  background: var(--vis-border);
  border-radius: 6px;
  padding: 4px 6px;
  overflow: hidden;
}
.vis-spark-bar {
  flex: 1;
  background: var(--vis-blue);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .2s;
  cursor: default;
}
.vis-spark-bar.vis-spark-hi { background: var(--vis-red); cursor: pointer; }
.vis-refresh-btn {
  background: none; border: none; cursor: pointer; color: var(--vis-sub);
  font-size: .9rem; padding: 2px 5px; border-radius: 3px; line-height: 1;
  margin-left: auto; transition: color .15s;
}
.vis-refresh-btn:hover:not(:disabled) { color: var(--vis-blue); }
.vis-refresh-btn:disabled { opacity: .5; cursor: not-allowed; }
.vis-refresh-spin { animation: vis-spin .7s linear infinite; }
@@keyframes vis-spin { to { transform: rotate(360deg); } }
.vis-cycle-pop {
  position: relative; margin-top: .4rem;
  background: var(--vis-surface, #1a2235); border: 1px solid var(--vis-border-strong, #3a527f);
  border-radius: 8px; padding: .55rem .75rem; font-size: .78rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.vis-cycle-pop-close {
  position: absolute; top: .3rem; right: .4rem;
  background: none; border: none; cursor: pointer; color: var(--vis-sub); font-size: .8rem;
  padding: 2px 5px; border-radius: 3px;
}
.vis-cycle-pop-close:hover { background: rgba(248,81,73,.15); color: #f85149; }
.vis-cycle-pop-copy {
  position: absolute; top: .3rem; right: 2.2rem;
  background: none; border: none; cursor: pointer; color: var(--vis-sub); font-size: .8rem;
  padding: 2px 5px; border-radius: 3px;
}
.vis-cycle-pop-copy:hover { background: var(--vis-hover); }
.vis-cycle-pop-time { color: var(--vis-sub); font-size: .72rem; }
.vis-cycle-pop-ct { color: var(--vis-text); }
.vis-cycle-pop-ratio { color: var(--vis-text); }
.vis-cycle-pop-ratio.vis-cycle-hi { color: var(--vis-red, #f85149); }
.vis-chart-axis {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--vis-sub);
  margin-top: .25rem;
}

/* ── 시프트 ────────────────────────────────────────────────────── */
.vis-shift-info { display: flex; flex-direction: column; gap: .4rem; }
.vis-shift-time { font-weight: 600; font-size: .9rem; }
.vis-shift-type { font-size: .8rem; color: var(--vis-sub); margin-left: .3rem; }
.vis-shift-target { font-size: .8rem; color: var(--vis-sub); }
.vis-progress-wrap {
  height: 10px; background: var(--vis-border);
  border-radius: 5px; overflow: hidden;
}
.vis-progress-bar {
  height: 100%;
  background: var(--vis-green);
  border-radius: 5px;
  transition: width .4s ease;
}
.vis-shift-counts {
  display: flex; gap: 1rem; font-size: .82rem;
  flex-wrap: wrap;
}
.vis-shift-rate { font-weight: 700; color: var(--vis-green); }
.vis-shift-eta { font-size: .82rem; font-weight: 600; color: var(--vis-blue); }
.vis-shift-eta.done { color: var(--vis-green); }
.vis-shift-eta.overrun { color: var(--signal-warn, #d97706); }
.vis-speed-ok   { font-size: .8rem; font-weight: 600; color: var(--vis-green); }
.vis-speed-warn { font-size: .8rem; font-weight: 600; color: var(--vis-red); }

/* ── Nav 상태 ──────────────────────────────────────────────────── */
.vis-nav-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.vis-anomaly-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.vis-anomaly-item {
  font-size: .78rem; padding: .25rem .5rem;
  border-radius: 4px; border-left: 3px solid var(--vis-gray);
}
.vis-anomaly-item.vis-level-error   { border-color: var(--vis-red); color: var(--vis-red); }
.vis-anomaly-item.vis-level-warning { border-color: var(--vis-yellow); }

/* ── Flow Detail / Gantt / Averages 공통 ──────────────────────────── */
.vis-row-wrap { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.vis-section-label { font-size: .75rem; color: var(--pd-muted,#94a3b8); margin: .5rem 0 .25rem; }
.vis-tag-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.vis-tag {
  padding: .15rem .55rem; border-radius: 10px; font-size: .75rem;
  background: var(--vis-blue-bg,#dbeafe); color: var(--vis-blue,#2563eb);
}
.vis-tag-start { background: #d1fae5; color: #065f46; }
.vis-tag-end   { background: #fce7f3; color: #9d174d; }
.vis-tag-more  { background: #f1f5f9; color: #64748b; }
[data-theme=dark] .vis-tag-start { background: #052e16; color: #4ade80; }
[data-theme=dark] .vis-tag-end   { background: #2d0a1e; color: #f9a8d4; }
[data-theme=dark] .vis-tag-more  { background: #1e293b; color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════
   모바일 반응형 (768px 이하)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 헤더 패딩 축소 */
  .cb-header { padding: 0 .5rem; }

  /* 설정 패널 전체 너비 */
  .cb-settings-panel { width: calc(100vw - 2rem); }

  /* 탭 글자 축소 */
  .cb-tab { padding: .4rem .6rem; font-size: .78rem; }

  /* 채팅 루트 패딩 축소 */
  .cb-chat-root { padding: .4rem .5rem; }

  /* 빠른 질문 버튼: 줄바꿈 + 최소 너비 */
  .cb-quick-btn { min-width: 5rem; font-size: .75rem; padding: 4px 10px; }

  /* 메시지 버블 가로폭 확장 */
  .cb-msg-bubble { max-width: 95%; }

  /* 입력 영역: 세로 방향 + 전체 너비 */
  .cb-input-row { flex-direction: column; align-items: stretch; }
  .cb-input { width: 100%; }
  .cb-btn-send,
  .cb-btn-stop { width: 100%; text-align: center; }

  /* 비주얼 카드 패딩 축소 */
  .vis-card { padding: .75rem .85rem; }

  /* Flow 그리드: 단일 열 */
  .vis-flow-grid { grid-template-columns: 1fr; }

  /* OEE 메트릭: 2열 그리드 */
  .vis-oee-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

  /* OEE 게이지: 가로 스크롤 대신 줄바꿈 */
  .vis-oee-gauges { gap: .6rem; }

  /* 순위 바: name 최소 너비 축소 */
  .vis-rank-name { min-width: 50px; }

  /* 태그 목록 줄바꿈 */
  .vis-row-wrap { gap: .5rem; }

  /* 테이블 셀 폰트 축소 */
  .vis-table { font-size: .72rem; }
  .vis-table th, .vis-table td { padding: .25rem .4rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   현장 엔지니어 콘솔 레이아웃
   ═══════════════════════════════════════════════════════════════════ */

.cb-chat-root.cb-ops-root {
  flex-direction: row;
  gap: 0;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #eef2f7;
}

[data-theme=dark] .cb-chat-root.cb-ops-root {
  background: #0b1120;
}

.cb-ops-sidebar {
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--pd-border, #d7dee8);
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  /* collapse animation */
  width: 330px;
  padding: .75rem;
  transition: width .28s cubic-bezier(.4,0,.2,1), padding .28s;
}

.cb-ops-sidebar:not(.open) {
  width: 0;
  padding: 0;
  overflow: hidden;
  border-right-color: transparent;
}

[data-theme=dark] .cb-ops-sidebar {
  background: #111827;
  border-color: #263244;
}
[data-theme=dark] .cb-ops-sidebar:not(.open) {
  border-right-color: transparent;
}

.cb-chat-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: .75rem .9rem;
  overflow: hidden;
  gap: .65rem;
}

.cb-ops-status,
.cb-workflows,
.cb-ops-actions,
.cb-thread-head {
  background: var(--pd-surface, #fff);
  border: 1px solid var(--pd-border, #dbe3ee);
  border-radius: 8px;
}

[data-theme=dark] .cb-ops-status,
[data-theme=dark] .cb-workflows,
[data-theme=dark] .cb-ops-actions,
[data-theme=dark] .cb-thread-head {
  background: #172033;
  border-color: #263244;
}

.cb-ops-status,
.cb-workflows {
  padding: .8rem;
}

.cb-panel-head,
.cb-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.cb-thread-head {
  flex-shrink: 0;
  padding: .55rem .75rem;
}

.cb-thread-head-left {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.cb-panel-kicker {
  color: #64748b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cb-panel-title,
.cb-thread-title {
  color: var(--pd-text, #0f172a);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.cb-thread-title {
  font-size: .95rem;
}

[data-theme=dark] .cb-panel-kicker { color: #94a3b8; }
[data-theme=dark] .cb-panel-title,
[data-theme=dark] .cb-thread-title { color: #e5e7eb; }

.cb-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--pd-border, #cbd5e1);
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
}

.cb-icon-btn:hover:not(:disabled) { background: #f1f5f9; }
.cb-icon-btn:disabled { opacity: .55; cursor: not-allowed; }
[data-theme=dark] .cb-icon-btn { background: #0f172a; color: #cbd5e1; border-color: #334155; }

.cb-sidebar-toggle {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--pd-border, #dbe3ee);
  background: var(--pd-surface, #fff);
  color: var(--pd-text-muted, #64748b);
  cursor: pointer;
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.cb-sidebar-toggle:hover { background: var(--pd-surface-3, #f1f5f9); color: var(--pd-text, #0f172a); border-color: var(--pd-border-2, #cbd5e1); }
[data-theme=dark] .cb-sidebar-toggle { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-theme=dark] .cb-sidebar-toggle:hover { background: #1e2d45; border-color: #4a6090; color: #e2e8f0; }

.cb-status-grid {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.cb-status-tile {
  min-height: 68px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #64748b;
  border-radius: 7px;
  padding: .55rem .65rem;
  background: #fbfdff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cb-status-tile.ok { border-left-color: #16a34a; }
.cb-status-tile.warn { border-left-color: #d97706; }
.cb-status-tile.err { border-left-color: #dc2626; }
.cb-status-tile.clickable { cursor: pointer; }
.cb-status-tile.clickable:hover { opacity: .85; }

.cb-status-label {
  font-size: .72rem;
  color: #64748b;
}

.cb-status-tile strong {
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1;
}

[data-theme=dark] .cb-status-tile {
  background: #111827;
  border-color: #293548;
}

[data-theme=dark] .cb-status-label { color: #94a3b8; }
[data-theme=dark] .cb-status-tile strong { color: #f8fafc; }

.cb-data-note {
  margin-top: .65rem;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  padding: .45rem .55rem;
  font-size: .76rem;
  color: #475569;
  background: #f8fafc;
}

.cb-data-note.err {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff1f2;
}

[data-theme=dark] .cb-data-note {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme=dark] .cb-data-note.err {
  background: #3f1717;
  border-color: #7f1d1d;
  color: #fecaca;
}

.cb-section-title {
  font-size: .7rem;
  font-weight: 800;
  color: #64748b;
  margin-bottom: .55rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

[data-theme=dark] .cb-section-title { color: #94a3b8; }

.cb-workflow-group + .cb-workflow-group {
  margin-top: .85rem;
}

.cb-workflow-group-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .1rem 0 .4rem;
  color: #334155;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cb-workflow-group-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #0f766e;
}

.cb-workflow-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.cb-workflow-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: .65rem;
  align-items: center;
  text-align: left;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #2563eb;
  background: #fff;
  color: #0f172a;
  border-radius: 7px;
  padding: .58rem .65rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}

.cb-workflow-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

.cb-workflow-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cb-workflow-btn.danger { border-left-color: #dc2626; }
.cb-workflow-btn.warning { border-left-color: #d97706; }

[data-theme=dark] .cb-workflow-btn {
  background: #111827;
  color: #f8fafc;
  border-color: #293548;
}

[data-theme=dark] .cb-workflow-btn:hover:not(:disabled) {
  background: #162033;
  border-color: #3b82f6;
}

.cb-workflow-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef6;
  color: #0f172a;
  font-weight: 900;
  font-size: .9rem;
}

.cb-workflow-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}

.cb-workflow-copy strong {
  font-size: .86rem;
  line-height: 1.2;
}

.cb-workflow-copy small {
  color: #64748b;
  font-size: .72rem;
  line-height: 1.25;
  white-space: normal;
}

.cb-workflow-copy em { display: none; }

[data-theme=dark] .cb-workflow-icon { background: #263244; color: #e2e8f0; }
[data-theme=dark] .cb-workflow-copy small { color: #94a3b8; }

.cb-ops-actions {
  padding: .65rem;
  display: flex;
  gap: .45rem;
}

.cb-secondary-btn {
  flex: 1;
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.cb-secondary-btn.primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.cb-secondary-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cb-export-msg {
  font-size: 12px; color: var(--signal-ok, #16a34a); font-weight: 600;
  white-space: nowrap;
}

[data-theme=dark] .cb-secondary-btn {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme=dark] .cb-secondary-btn.primary {
  background: #0f766e;
  border-color: #14b8a6;
  color: #f8fafc;
}

.cb-thread-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  align-items: center;
}

.cb-thread-badges span {
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .7rem;
  color: #475569;
  background: #f8fafc;
  font-weight: 500;
}

.cb-badge-msg {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.cb-badge-backend {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: .68rem !important;
  letter-spacing: .02em;
}

[data-theme=dark] .cb-thread-badges span {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme=dark] .cb-badge-msg {
  background: rgba(59,130,246,.15) !important;
  border-color: rgba(59,130,246,.3) !important;
  color: #93c5fd !important;
}

[data-theme=dark] .cb-badge-backend {
  background: rgba(0,215,223,.1) !important;
  border-color: rgba(0,215,223,.28) !important;
  color: #00d7df !important;
}

.cb-badge-tokens {
  background: #fefce8 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
  font-size: .65rem !important;
  font-variant-numeric: tabular-nums;
}

[data-theme=dark] .cb-badge-tokens {
  background: rgba(234,179,8,.1) !important;
  border-color: rgba(234,179,8,.3) !important;
  color: #fbbf24 !important;
}

.cb-chat-panel .cb-messages {
  background: var(--pd-surface, #fff);
  border: 1px solid var(--pd-border, #dbe3ee);
  border-radius: 8px;
  padding: .9rem;
}

[data-theme=dark] .cb-chat-panel .cb-messages {
  background: #172033;
  border-color: #263244;
}

.cb-welcome {
  align-items: stretch;
  justify-content: center;
  gap: 1.25rem;
  color: #334155;
}

.cb-welcome-hero {
  text-align: center;
  padding: .5rem 0 .25rem;
}

.cb-welcome-title {
  font-weight: 800;
  font-size: 1.1rem;
  color: #0f172a;
  margin-bottom: .3rem;
}

.cb-welcome-sub {
  font-size: .8rem;
  color: #64748b;
  line-height: 1.5;
}

.cb-welcome-grid {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.cb-welcome-action {
  min-height: 96px;
  border-radius: 10px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
  padding: .9rem .85rem .75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}

.cb-welcome-action-icon {
  font-size: 1.1rem;
  font-weight: 900;
  color: #0f766e;
  margin-bottom: .1rem;
  display: block;
}

.cb-welcome-action strong { font-size: .88rem; font-weight: 700; }
.cb-welcome-action span { font-size: .74rem; color: #64748b; line-height: 1.3; }
.cb-welcome-action:hover:not(:disabled) {
  border-color: #0f766e;
  background: #f0fdfa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,118,110,.12);
}
.cb-welcome-action:disabled { opacity: .55; cursor: not-allowed; }

[data-theme=dark] .cb-welcome-title { color: #f8fafc; }
[data-theme=dark] .cb-welcome-sub { color: #94a3b8; }
[data-theme=dark] .cb-welcome-action {
  background: #111827;
  border-color: #293548;
  color: #f8fafc;
}
[data-theme=dark] .cb-welcome-action-icon { color: #00d7df; }
[data-theme=dark] .cb-welcome-action span { color: #94a3b8; }
[data-theme=dark] .cb-welcome-action:hover:not(:disabled) {
  border-color: #00d7df;
  background: rgba(0,215,223,.06);
  box-shadow: 0 4px 12px rgba(0,215,223,.12);
}

.cb-msg-avatar {
  border-radius: 7px;
  background: #e8eef6;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.cb-msg-user .cb-msg-avatar {
  background: linear-gradient(135deg, #0f766e 60%, #14b8a6);
  color: #fff;
  box-shadow: 0 1px 4px rgba(15,118,110,.28);
}

[data-theme=dark] .cb-msg-avatar {
  background: #1e2d45;
  color: #94a3b8;
}

[data-theme=dark] .cb-msg-user .cb-msg-avatar {
  background: linear-gradient(135deg, #00d7df 0%, #00bedc 100%);
  color: #000028;
  box-shadow: 0 1px 6px rgba(0,215,223,.3);
}

.cb-msg-bubble {
  border-radius: 8px;
  max-width: min(820px, 88%);
  width: fit-content;
}

.cb-msg-user .cb-msg-body {
  align-items: flex-end;
}

.cb-msg-user .cb-msg-bubble {
  background: #0f766e;
  border-bottom-right-radius: 3px;
  margin-left: auto;
  margin-right: 0;
}

.cb-msg-assistant .cb-msg-body {
  align-items: flex-start;
}

.cb-msg-assistant .cb-msg-bubble {
  border-bottom-left-radius: 3px;
  margin-right: auto;
  max-width: min(900px, 100%);
}

.cb-chat-panel .cb-input-row {
  background: var(--pd-surface, #fff);
  border: 1px solid var(--pd-border, #dbe3ee);
  border-radius: 8px;
  padding: .55rem .55rem .4rem;
  flex-wrap: wrap;
}

[data-theme=dark] .cb-chat-panel .cb-input-row {
  background: #172033;
  border-color: #263244;
}

.cb-input {
  border-radius: 7px;
}

.cb-btn-send,
.cb-btn-stop {
  border-radius: 7px;
  min-width: 76px;
}

.cb-btn-send {
  background: #0f766e;
}

.cb-btn-send:hover:not(:disabled) {
  background: #0d9488;
}

.cb-alarm-banner {
  border-radius: 8px;
  border-color: #f59e0b;
}

.cb-input-hint {
  width: 100%;
  font-size: .69rem;
  color: var(--pd-text-muted, #94a3b8);
  padding: .18rem .2rem 0;
  opacity: .7;
  user-select: none;
  display: flex; justify-content: space-between; align-items: center;
}
[data-theme=dark] .cb-input-hint { color: #5a7099; }
.cb-char-count { font-variant-numeric: tabular-nums; font-size: .69rem; flex-shrink: 0; }
.cb-char-warn { color: var(--signal-warn, #d97706) !important; opacity: 1; }
.cb-char-err  { color: var(--signal-err,  #dc2626) !important; opacity: 1; font-weight: 700; }

/* ── 새 진단 근거 패널 ───────────────────────────────────────── */

.ev-panel {
  width: 100%;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  border-radius: 8px;
  padding: .75rem;
  color: #0f172a;
  font-size: .82rem;
}

[data-theme=dark] .ev-panel {
  background: #111827;
  border-color: #293548;
  color: #f8fafc;
}

.ev-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.ev-copy-btn {
  font-size: .72rem; padding: .2rem .5rem; border-radius: 4px;
  border: 1px solid #cbd5e1; background: #f8fafc; color: #475569;
  cursor: pointer; white-space: nowrap;
}
.ev-copy-btn:hover { background: #e2e8f0; }
.ev-copy-btn:disabled { opacity: .4; cursor: default; }
.ev-minimize-btn {
  padding: 2px 8px; font-size: 14px; font-weight: 700; border-radius: 4px;
  border: 1px solid #e2e8f0; background: transparent; cursor: pointer; line-height: 1;
  color: #64748b;
}
.ev-minimize-btn:hover { background: #e2e8f0; }

.ev-kicker {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ev-title {
  font-weight: 800;
  font-size: .92rem;
  color: #0f172a;
}

.ev-time {
  color: #64748b;
  font-size: .72rem;
  white-space: nowrap;
}

[data-theme=dark] .ev-kicker,
[data-theme=dark] .ev-time { color: #94a3b8; }
[data-theme=dark] .ev-title { color: #f8fafc; }

.ev-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .45rem;
  margin-bottom: .65rem;
}

.ev-metrics > div {
  min-height: 58px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #2563eb;
  border-radius: 7px;
  background: #fff;
  padding: .5rem .6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ev-metrics > div.ev-hot {
  border-left-color: #dc2626;
}

.ev-metrics span {
  color: #64748b;
  font-size: .7rem;
}

.ev-metrics strong {
  color: #0f172a;
  font-size: .98rem;
  line-height: 1;
}

[data-theme=dark] .ev-metrics > div {
  background: #172033;
  border-color: #293548;
}
[data-theme=dark] .ev-metrics span { color: #94a3b8; }
[data-theme=dark] .ev-metrics strong { color: #f8fafc; }

.ev-note {
  border: 1px solid #dbe3ee;
  background: #fff;
  border-radius: 7px;
  padding: .5rem .6rem;
  color: #475569;
  margin-bottom: .65rem;
  line-height: 1.5;
}

[data-theme=dark] .ev-note {
  background: #172033;
  border-color: #293548;
  color: #cbd5e1;
}

.ev-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.ev-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.1fr) minmax(85px, 1fr) minmax(100px, 1fr) minmax(54px, auto);
  gap: .55rem;
  align-items: center;
  min-height: 34px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #64748b;
  border-radius: 7px;
  background: #fff;
  padding: .35rem .55rem;
}

.ev-row.ev-ok { border-left-color: #16a34a; }
.ev-row.ev-warning { border-left-color: #d97706; }
.ev-row.ev-error { border-left-color: #dc2626; }

.ev-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8rem;
}

.ev-row span,
.ev-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: .75rem;
  font-style: normal;
}

.ev-row em {
  text-align: right;
  font-weight: 800;
  color: #0f172a;
}

[data-theme=dark] .ev-row {
  background: #172033;
  border-color: #293548;
}
[data-theme=dark] .ev-row span { color: #cbd5e1; }
[data-theme=dark] .ev-row em,
[data-theme=dark] .ev-row strong { color: #f8fafc; }

.ev-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  padding: .65rem;
  color: #64748b;
  background: #fff;
}

[data-theme=dark] .ev-empty {
  background: #172033;
  border-color: #334155;
  color: #94a3b8;
}

.ev-progress {
  height: 10px;
  border-radius: 999px;
  background: #dbe3ee;
  overflow: hidden;
}

.ev-progress span {
  display: block;
  height: 100%;
  background: #0f766e;
}

.ev-bars {
  height: 84px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  padding: .45rem;
  background: #fff;
}

.ev-bars span {
  flex: 1;
  min-width: 3px;
  border-radius: 3px 3px 0 0;
  background: #2563eb;
}

.ev-bars span.idle {
  background: #d97706;
}
.ev-more { color: var(--vis-sub); font-size: .78rem; margin-top: .4rem; }
.ev-more-btn { background: none; border: none; color: var(--vis-blue); font-size: .78rem; margin-top: .4rem; cursor: pointer; padding: 0; text-decoration: underline; }
.ev-more-btn:hover { opacity: .75; }

/* ── ev-chart : 수평 막대 차트 ──────────────────────────────────────── */
.ev-chart { margin: .35rem 0; }

.ev-chart-legend {
  display: flex; gap: .6rem; margin-bottom: .45rem; flex-wrap: wrap;
}
.ev-chart-legend-item {
  display: flex; align-items: center; gap: .28rem;
  font-size: .68rem; color: #64748b;
}
.ev-chart-legend-dot {
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
}
[data-theme=dark] .ev-chart-legend-item { color: #94a3b8; }

.ev-chart-flow {
  margin-bottom: .55rem;
}
.ev-chart-flow-name {
  font-size: .74rem; font-weight: 700; color: #334155;
  margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme=dark] .ev-chart-flow-name { color: #cbd5e1; }

.ev-chart-row {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .22rem; min-height: 18px;
}
.ev-chart-seg-lbl {
  font-size: .66rem; color: #94a3b8; width: 18px; flex-shrink: 0; text-align: right;
}
.ev-chart-track {
  flex: 1; background: #f1f5f9; border-radius: 3px; overflow: hidden; height: 12px;
}
[data-theme=dark] .ev-chart-track { background: #1e293b; }

.ev-chart-fill {
  height: 100%; border-radius: 3px; transition: width .45s cubic-bezier(.4,0,.2,1);
}
.ev-chart-fill.ct  { background: #2563eb; }
.ev-chart-fill.mt  { background: #16a34a; }
.ev-chart-fill.wt  { background: #d97706; }
.ev-chart-fill.oee { background: #7c3aed; }
.ev-chart-fill.alm { background: #dc2626; }

.ev-chart-val {
  font-size: .70rem; color: #475569; min-width: 52px; text-align: right; white-space: nowrap;
}
[data-theme=dark] .ev-chart-val { color: #94a3b8; }

/* ── ev-vchart : 수직 그룹 막대 차트 ───────────────────────────────── */
.ev-vchart-wrap { margin: .35rem 0; overflow-x: auto; }
.ev-vchart {
  display: flex; align-items: stretch; gap: 6px; height: 140px;
}
.ev-vchart-group {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 36px;
}
.ev-vchart-bars {
  display: flex; align-items: flex-end; gap: 3px;
  flex: 1; width: 100%; justify-content: center;
  border-bottom: 1px solid #e2e8f0;
}
[data-theme=dark] .ev-vchart-bars { border-color: #293548; }
.ev-vchart-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  transition: height .45s cubic-bezier(.4,0,.2,1);
  min-height: 2px; max-width: 22px; cursor: default;
}
.ev-vchart-vals {
  display: flex; gap: 3px; justify-content: center; width: 100%;
  flex-shrink: 0;
}
.ev-vchart-vals > span {
  flex: 1; max-width: 22px; font-size: .56rem; font-weight: 600;
  color: #475569; text-align: center; white-space: nowrap;
}
[data-theme=dark] .ev-vchart-vals > span { color: #94a3b8; }
.ev-vchart-label {
  font-size: .63rem; color: #64748b; text-align: center;
  margin-top: .28rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; width: 100%;
}
[data-theme=dark] .ev-vchart-label { color: #94a3b8; }

/* ── ev-teep : TEEP 누적 막대 ───────────────────────────────────────── */
.ev-teep-wrap { margin: .45rem 0; }

.ev-teep-bar {
  height: 30px; display: flex; border-radius: 6px; overflow: hidden; border: 1px solid #dbe3ee;
}
[data-theme=dark] .ev-teep-bar { border-color: #293548; }

.ev-teep-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem; color: #fff; font-weight: 800;
  transition: width .5s ease; overflow: hidden; white-space: nowrap; min-width: 0;
}
.ev-teep-seg.run  { background: #16a34a; }
.ev-teep-seg.down { background: #dc2626; }
.ev-teep-seg.nonp { background: #d97706; }
.ev-teep-seg.res  { background: #94a3b8; }

.ev-teep-legend {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .45rem;
}
.ev-teep-lbl {
  display: flex; align-items: center; gap: .28rem;
  font-size: .70rem; color: #475569;
}
.ev-teep-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
[data-theme=dark] .ev-teep-lbl { color: #94a3b8; }

[data-theme=dark] .ev-bars {
  background: #172033;
  border-color: #293548;
}

@media (max-width: 900px) {
  .cb-chat-root.cb-ops-root {
    flex-direction: column;
    overflow: hidden;
  }

  .cb-ops-sidebar {
    width: 100% !important;
    min-width: 0;
    max-height: 46vh;
    border-right: none;
    border-bottom: 1px solid var(--pd-border, #d7dee8);
    transition: none;
  }

  .cb-ops-sidebar:not(.open) {
    max-height: 0;
    overflow: hidden;
  }

  .cb-chat-panel {
    min-height: 0;
    padding: .55rem;
  }

  .cb-workflow-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cb-followups-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cb-ops-sidebar {
    max-height: 52vh;
    padding: .55rem;
  }

  .cb-status-grid,
  .cb-welcome-grid,
  .cb-workflow-list {
    grid-template-columns: 1fr;
  }

  .cb-followups-list {
    grid-template-columns: 1fr;
  }

  .cb-thread-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cb-thread-badges {
    justify-content: flex-start;
  }

  .cb-msg {
    gap: .45rem;
  }

  .cb-msg-bubble {
    max-width: 100%;
  }

  .ev-row {
    grid-template-columns: 1fr;
    gap: .2rem;
    align-items: start;
  }

  .ev-row em {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Siemens-inspired industrial skin  (다크 모드 전용)
   짙은 네이비 배경 + 화이트 타이포 + 시안 액센트
   ═══════════════════════════════════════════════════════════════════ */

[data-theme=dark] {
  --pd-bg: #000028;
  --pd-surface: #07142f;
  --pd-surface-2: #0d1d3d;
  --pd-surface-3: #12284d;
  --pd-border: #22365f;
  --pd-border-2: #3a527f;
  --pd-text: #f4f7ff;
  --pd-text-strong: #ffffff;
  --pd-text-muted: #b9c6dd;
  --pd-muted: #9eabc4;
  --pd-accent: #00d7df;
  --pd-accent-2: #00ffb9;
  --pd-code-bg: #02091f;
  color-scheme: dark;
}

html[data-theme=dark],
[data-theme=dark] body {
  background: #000028;
  color: var(--pd-text);
}

[data-theme=dark] .cb-app {
  background:
    linear-gradient(180deg, rgba(0, 215, 223, .05), transparent 180px),
    #000028;
}

[data-theme=dark] .cb-header {
  background: #000028;
  color: #fff;
  border-bottom: 1px solid rgba(0, 215, 223, .28);
}

[data-theme=dark] .cb-brand {
  gap: .7rem;
  letter-spacing: .01em;
}

[data-theme=dark] .cb-logo {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 215, 223, .45);
}

[data-theme=dark] .cb-title {
  font-weight: 900;
  color: #fff;
}

[data-theme=dark] .cb-header-right {
  gap: .75rem;
}

[data-theme=dark] .cb-conn-badge.ok {
  background: rgba(0, 255, 185, .16);
  color: #8fffe4;
  border: 1px solid rgba(0, 255, 185, .42);
}

[data-theme=dark] .cb-conn-badge.err {
  background: rgba(255, 85, 119, .14);
  color: #ff91a8;
  border: 1px solid rgba(255, 85, 119, .42);
}

[data-theme=dark] .cb-alarm-badge {
  background: rgba(255, 184, 77, .16);
  color: #ffd38a;
  border: 1px solid rgba(255, 184, 77, .42);
}

[data-theme=dark] .cb-theme-btn,
[data-theme=dark] .cb-settings-btn {
  color: #fff;
  border: 1px solid transparent;
}

[data-theme=dark] .cb-theme-btn:hover,
[data-theme=dark] .cb-settings-btn:hover {
  background: rgba(0, 215, 223, .12);
  border-color: rgba(0, 215, 223, .35);
}

[data-theme=dark] .cb-tabs {
  background: #000028;
  border-bottom: 1px solid rgba(0, 215, 223, .22);
}

[data-theme=dark] .cb-tab {
  color: #dbe7ff;
}

[data-theme=dark] .cb-tab:hover {
  color: #fff;
}

[data-theme=dark] .cb-tab.active {
  color: #fff;
  border-bottom-color: var(--pd-accent);
}

[data-theme=dark] .cb-main {
  background:
    linear-gradient(90deg, rgba(0, 215, 223, .08) 0, rgba(0, 215, 223, 0) 180px),
    #000a22;
}

[data-theme=dark] .cb-chat-root.cb-ops-root {
  background:
    linear-gradient(180deg, rgba(0, 215, 223, .045), transparent 240px),
    #000a22;
}

[data-theme=dark] .cb-ops-sidebar {
  background: #020a20;
  border-right-color: rgba(0, 215, 223, .26);
}

[data-theme=dark] .cb-ops-status,
[data-theme=dark] .cb-workflows,
[data-theme=dark] .cb-ops-actions,
[data-theme=dark] .cb-thread-head,
[data-theme=dark] .cb-chat-panel .cb-messages,
[data-theme=dark] .cb-chat-panel .cb-input-row,
[data-theme=dark] .dbt-header,
[data-theme=dark] .dbt-group,
[data-theme=dark] .lls-card {
  background: rgba(7, 20, 47, .96);
  border-color: rgba(0, 215, 223, .24);
  box-shadow: 0 10px 30px rgba(0, 0, 40, .22);
}

[data-theme=dark] .cb-panel-kicker,
[data-theme=dark] .cb-section-title,
[data-theme=dark] .ev-kicker {
  color: #7edee6;
  letter-spacing: .09em;
}

[data-theme=dark] .cb-panel-title,
[data-theme=dark] .cb-thread-title,
[data-theme=dark] .cb-status-tile strong,
[data-theme=dark] .cb-workflow-copy strong,
[data-theme=dark] .dbt-header-label,
[data-theme=dark] .dbt-path,
[data-theme=dark] .lls-title,
[data-theme=dark] .lls-card-title {
  color: #fff;
}

[data-theme=dark] .cb-status-tile,
[data-theme=dark] .cb-data-note,
[data-theme=dark] .cb-workflow-btn,
[data-theme=dark] .cb-welcome-action,
[data-theme=dark] .cb-thread-badges span,
[data-theme=dark] .ev-panel,
[data-theme=dark] .ev-metrics > div,
[data-theme=dark] .ev-note,
[data-theme=dark] .ev-row,
[data-theme=dark] .ev-empty,
[data-theme=dark] .ev-bars,
[data-theme=dark] .dbt-result,
[data-theme=dark] .dbt-pinput,
[data-theme=dark] .lls-input {
  background: rgba(3, 13, 35, .96);
  border-color: rgba(124, 194, 255, .24);
  color: var(--pd-text);
}

[data-theme=dark] .cb-status-tile {
  border-left-color: rgba(0, 215, 223, .72);
}

[data-theme=dark] .cb-status-tile.ok,
[data-theme=dark] .ev-row.ev-ok {
  border-left-color: #00ffb9;
}

[data-theme=dark] .cb-status-tile.warn,
[data-theme=dark] .ev-row.ev-warning {
  border-left-color: #ffbf5f;
}

[data-theme=dark] .cb-status-tile.err,
[data-theme=dark] .ev-row.ev-error {
  border-left-color: #ff5577;
}

[data-theme=dark] .cb-status-label,
[data-theme=dark] .cb-workflow-copy small,
[data-theme=dark] .cb-workflow-copy em,
[data-theme=dark] .cb-data-note,
[data-theme=dark] .cb-thread-badges span,
[data-theme=dark] .ev-time,
[data-theme=dark] .ev-metrics span,
[data-theme=dark] .ev-row span,
[data-theme=dark] .dbt-header-url,
[data-theme=dark] .dbt-pname,
[data-theme=dark] .dbt-ms,
[data-theme=dark] .lls-desc,
[data-theme=dark] .lls-hint,
[data-theme=dark] .lls-backend-desc {
  color: var(--pd-text-muted);
}

[data-theme=dark] .cb-workflow-group + .cb-workflow-group {
  margin-top: .95rem;
}

[data-theme=dark] .cb-workflow-group-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .15rem 0 .45rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
}

[data-theme=dark] .cb-workflow-group-title::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--pd-accent);
}

[data-theme=dark] .cb-workflow-list {
  gap: .5rem;
}

[data-theme=dark] .cb-workflow-btn {
  border-left-color: rgba(0, 215, 223, .8);
}

[data-theme=dark] .cb-workflow-btn:hover:not(:disabled) {
  background: rgba(0, 215, 223, .10);
  border-color: rgba(0, 215, 223, .55);
  transform: translateY(-1px);
}

[data-theme=dark] .cb-workflow-btn.danger {
  border-left-color: #ff5577;
}

[data-theme=dark] .cb-workflow-btn.warning {
  border-left-color: #ffbf5f;
}

[data-theme=dark] .cb-workflow-icon {
  background: linear-gradient(135deg, #083f60, #008c9a);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

[data-theme=dark] .cb-workflow-copy em {
  display: none;
}

[data-theme=dark] .cb-followups {
  width: min(820px, 100%);
  margin-top: .2rem;
  padding: .7rem;
  border: 1px solid rgba(0, 215, 223, .22);
  border-radius: 8px;
  background: rgba(3, 13, 35, .72);
}

[data-theme=dark] .cb-followups-title {
  margin-bottom: .5rem;
  color: #7edee6;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-theme=dark] .cb-followups-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}

[data-theme=dark] .cb-followup-chip {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: 54px;
  padding: .52rem .65rem;
  text-align: left;
  border: 1px solid rgba(124, 194, 255, .26);
  border-left: 4px solid rgba(0, 215, 223, .8);
  border-radius: 7px;
  background: rgba(7, 20, 47, .88);
  color: #fff;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}

[data-theme=dark] .cb-followup-chip:hover:not(:disabled) {
  background: rgba(0, 215, 223, .12);
  border-color: rgba(0, 215, 223, .58);
  transform: translateY(-1px);
}

[data-theme=dark] .cb-followup-chip:disabled {
  opacity: .55;
  cursor: not-allowed;
}

[data-theme=dark] .cb-followup-chip.danger {
  border-left-color: #ff5577;
}

[data-theme=dark] .cb-followup-chip.warning {
  border-left-color: #ffbf5f;
}

[data-theme=dark] .cb-followup-chip strong {
  font-size: .78rem;
  line-height: 1.2;
}

[data-theme=dark] .cb-followup-chip span {
  color: var(--pd-text-muted);
  font-size: .68rem;
  line-height: 1.25;
}

[data-theme=dark] .cb-sidebar-toggle {
  background: rgba(0, 215, 223, .08);
  border-color: rgba(0, 215, 223, .3);
  color: rgba(0, 215, 223, .9);
}
[data-theme=dark] .cb-sidebar-toggle:hover {
  background: rgba(0, 215, 223, .18);
  border-color: rgba(0, 215, 223, .6);
  color: #00d7df;
}

[data-theme=dark] .cb-secondary-btn {
  background: transparent;
  color: #fff;
  border-color: rgba(124, 194, 255, .35);
}

[data-theme=dark] .cb-secondary-btn.primary,
[data-theme=dark] .cb-btn-send,
[data-theme=dark] .lls-btn-save,
[data-theme=dark] .dbt-btn-run {
  background: var(--pd-accent);
  color: #000028;
  border-color: var(--pd-accent);
}

[data-theme=dark] .cb-secondary-btn.primary:hover,
[data-theme=dark] .cb-btn-send:hover:not(:disabled),
[data-theme=dark] .lls-btn-save:hover,
[data-theme=dark] .dbt-btn-run:hover:not(:disabled) {
  background: #5ff8ff;
  color: #000028;
}

[data-theme=dark] .cb-msg-assistant .cb-msg-bubble {
  background: #02142d;
  border-color: rgba(0, 215, 223, .26);
  color: #f4f7ff;
}

[data-theme=dark] .cb-msg-user .cb-msg-bubble {
  background: #00877f;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 135, 127, .22);
}

[data-theme=dark] .cb-msg-avatar {
  background: #e7f0ff;
  color: #000028;
}

[data-theme=dark] .cb-msg-user .cb-msg-avatar {
  background: var(--pd-accent);
  color: #000028;
}

[data-theme=dark] .cb-input {
  background: #020b22;
  border-color: rgba(124, 194, 255, .32);
  color: #fff;
}

[data-theme=dark] .cb-input::placeholder {
  color: #7f8ea3;
}

[data-theme=dark] .cb-btn-stop {
  background: rgba(255, 85, 119, .15);
  color: #ff91a8;
  border: 1px solid rgba(255, 85, 119, .38);
}

[data-theme=dark] .cb-badge-msg {
  background: rgba(0, 215, 223, .12) !important;
  border-color: rgba(0, 215, 223, .3) !important;
  color: #7edee6 !important;
}

[data-theme=dark] .cb-badge-backend {
  background: rgba(0, 255, 185, .1) !important;
  border-color: rgba(0, 255, 185, .3) !important;
  color: #00ffb9 !important;
}

[data-theme=dark] .cb-input-hint {
  color: rgba(0, 215, 223, .35);
}

[data-theme=dark] .cb-welcome-title {
  color: #fff;
}

[data-theme=dark] .cb-welcome-sub {
  color: var(--pd-text-muted);
}

[data-theme=dark] .cb-welcome-action {
  background: rgba(7, 20, 47, .8);
  border-color: rgba(0, 215, 223, .18);
}

[data-theme=dark] .cb-welcome-action-icon {
  color: var(--pd-accent);
}

[data-theme=dark] .cb-welcome-action:hover:not(:disabled) {
  background: rgba(0, 215, 223, .10);
  border-color: var(--pd-accent);
  box-shadow: 0 4px 12px rgba(0,215,223,.15);
}

[data-theme=dark] .dbt-root {
  max-width: 1100px;
}

[data-theme=dark] .dbt-group-hd {
  background: #06142d;
  color: #fff;
}

[data-theme=dark] .dbt-group-hd:hover {
  background: #0b2144;
}

[data-theme=dark] .dbt-ep-node {
  border-bottom-color: rgba(124, 194, 255, .12);
}

[data-theme=dark] .dbt-method.dbt-m-get {
  background: rgba(91, 168, 255, .18);
  color: #9dcbff;
}

[data-theme=dark] .dbt-method.dbt-m-post {
  background: rgba(0, 255, 185, .16);
  color: #8fffe4;
}

[data-theme=dark] .dbt-method.dbt-m-delete {
  background: rgba(255, 85, 119, .16);
  color: #ff91a8;
}

[data-theme=dark] .dbt-btn-fill,
[data-theme=dark] .dbt-hdr-btn,
[data-theme=dark] .lls-btn-test {
  background: transparent;
  color: #9dcbff;
  border-color: rgba(124, 194, 255, .38);
}

[data-theme=dark] .dbt-btn-fill:hover,
[data-theme=dark] .dbt-hdr-btn:hover,
[data-theme=dark] .lls-btn-test:hover:not(:disabled) {
  background: rgba(0, 215, 223, .10);
  color: #fff;
}

[data-theme=dark] .dbt-pre {
  background: #02091f;
  color: #f4f7ff;
}

[data-theme=dark] .lls-scroll-wrapper {
  background:
    linear-gradient(180deg, rgba(0, 215, 223, .045), transparent 240px),
    #000a22 !important;
}

[data-theme=dark] .lls-backend-item {
  background: #020d25;
  border-color: rgba(124, 194, 255, .24);
}

[data-theme=dark] .lls-backend-item:hover,
[data-theme=dark] .lls-backend-item.selected {
  background: rgba(0, 215, 223, .10);
  border-color: var(--pd-accent);
}

[data-theme=dark] .lls-desc a {
  color: #7edee6;
}

[data-theme=dark] .lls-pill.ok {
  background: rgba(0, 255, 185, .16);
  color: #8fffe4;
  border-color: rgba(0, 255, 185, .40);
}

[data-theme=dark] .lls-pill.err {
  background: rgba(255, 85, 119, .14);
  color: #ff91a8;
  border-color: rgba(255, 85, 119, .38);
}

@media (max-width: 768px) {
  [data-theme=dark] .cb-followups-list {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   모바일 터치 UX · 사이드바 토글 (최우선 — 파일 최하단)
   ═══════════════════════════════════════════════════════════════════ */

/* 사이드바 토글 버튼 — 데스크탑 기본 숨김 */
.cb-sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--pd-border-2, rgba(0,215,223,.38));
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--pd-text-muted, #94a3b8);
  touch-action: manipulation;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding: 0;
}
.cb-sidebar-toggle:hover {
  background: rgba(255,255,255,.09);
  color: var(--pd-text, #f4f7ff);
}

/* thread-head 내 좌측 래퍼 (토글 + 타이틀) */
.cb-thread-head-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

/* ── 900px 이하: 사이드바 토글 표시 + 기본 접힘 ── */
@media (max-width: 900px) {
  .cb-sidebar-toggle { display: flex; }

  /* 닫힌 상태 */
  .cb-ops-sidebar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: max-height .32s ease-out, padding .25s ease-out, box-shadow .25s;
    border-bottom: none;
    border-right: none;
  }

  /* 열린 상태 */
  .cb-ops-sidebar.open {
    max-height: 56vh;
    padding-top: .75rem;
    padding-bottom: .75rem;
    overflow-y: auto;
    border-bottom: 1px solid var(--pd-border, rgba(0,215,223,.26));
    box-shadow: 0 6px 20px rgba(0,0,20,.35);
  }
}

/* ── 640px 이하: iOS 줌 방지 + 터치 목표 최적화 ── */
@media (max-width: 640px) {
  /* iOS 자동 줌 방지: 입력 font-size ≥ 16px */
  .cb-input,
  .cb-settings-input,
  .lls-input { font-size: 16px; }

  /* 터치 목표 최소 44px */
  .cb-btn-send,
  .cb-btn-stop {
    min-height: 44px;
    touch-action: manipulation;
  }
  .cb-secondary-btn,
  .cb-workflow-btn,
  .cb-followup-chip,
  .cb-welcome-action,
  .cb-sidebar-toggle,
  .cb-icon-btn,
  .cb-theme-btn,
  .cb-settings-btn { touch-action: manipulation; }

  /* 탭: 가로 스크롤 + 최소 터치 높이 */
  .cb-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cb-tabs::-webkit-scrollbar { display: none; }
  .cb-tab {
    white-space: nowrap;
    min-height: 44px;
    padding: 0 .85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GanttViewer (.gv-*)
   ═══════════════════════════════════════════════════════════════════ */
.gv-wrap {
  font-size: .8rem;
  color: var(--pd-text, #e2e8f0);
  padding: .5rem 0;
}
.gv-empty {
  padding: .75rem;
  color: var(--pd-text-muted, #94a3b8);
  font-size: .8rem;
  text-align: center;
}

/* ── 헤더 ── */
.gv-head {
  margin-bottom: .5rem;
}
.gv-head-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.gv-flow-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--pd-accent, #00d7df);
}
.gv-meta {
  color: var(--pd-text-muted, #94a3b8);
  font-size: .75rem;
}
.gv-trunc-badge {
  font-size: .7rem;
  background: rgba(251,191,36,.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 4px;
  padding: 1px 6px;
}
.gv-time-range {
  font-size: .72rem;
  color: var(--pd-text-muted, #94a3b8);
  margin-top: .15rem;
}

/* ── 차트 영역 ── */
.gv-chart {
  border: 1px solid var(--pd-border, rgba(0,215,223,.2));
  border-radius: 6px;
  overflow: hidden;
}

/* axis row (시간 레이블) */
.gv-axis-row {
  display: flex;
  height: 22px;
  background: var(--pd-surface-2, rgba(0,0,0,.25));
  border-bottom: 1px solid var(--pd-border, rgba(0,215,223,.2));
}

/* lane row */
.gv-row {
  display: flex;
  height: 26px;
  border-bottom: 1px solid var(--pd-border, rgba(0,215,223,.1));
}
.gv-row:last-child { border-bottom: none; }
.gv-row:nth-child(odd) { background: rgba(255,255,255,.02); }

/* lane label column */
.gv-lane-col {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 6px;
  display: flex;
  align-items: center;
  font-size: .72rem;
  color: var(--pd-text-muted, #94a3b8);
  border-right: 1px solid var(--pd-border, rgba(0,215,223,.2));
}
.gv-axis-label-cell {
  background: var(--pd-surface-2, rgba(0,0,0,.25));
}

/* bars column (relative container) */
.gv-bars-col {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.gv-axis-bar {
  background: var(--pd-surface-2, rgba(0,0,0,.25));
}

/* time tick labels */
.gv-tick {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  font-size: .65rem;
  color: var(--pd-text-muted, #94a3b8);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* vertical grid lines */
.gv-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

/* event bar */
.gv-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  min-width: 2px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: default;
  transition: filter .1s;
}
.gv-bar { cursor: pointer; }
.gv-bar:hover { filter: brightness(1.25); }
.gv-bar-sel { outline: 2px solid #fff; outline-offset: 1px; filter: brightness(1.3); }
.gv-popover {
  background: var(--pd-panel, #1e2a3a); border: 1px solid var(--pd-border-strong, #3a527f);
  border-radius: 8px; padding: 10px 14px; margin: 6px 0; font-size: .8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 200px;
}
.gv-popover-hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; }
.gv-popover-close { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--pd-text-muted, #94a3b8); padding: 0 4px; }
.gv-popover-close:hover { color: #f85149; }
.gv-popover-row { display: flex; gap: 8px; padding: 2px 0; }
.gv-popover-lbl { color: var(--pd-text-muted, #94a3b8); min-width: 40px; flex-shrink: 0; }
.gv-bar-lbl {
  font-size: .6rem;
  color: #fff;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* gap overlay */
.gv-gap-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(251,191,36,.18) 0px,
    rgba(251,191,36,.18) 3px,
    transparent 3px,
    transparent 7px
  );
  border-left: 1px solid rgba(251,191,36,.4);
  border-right: 1px solid rgba(251,191,36,.4);
  cursor: default;
}

/* ── TopGap 범례 ── */
.gv-gaps-section {
  margin-top: .6rem;
  padding: .4rem .6rem;
  background: rgba(251,191,36,.07);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 5px;
}
.gv-gaps-title {
  font-size: .72rem;
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: .3rem;
}
.gv-gaps-list {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.gv-gap-row {
  display: flex;
  gap: .5rem;
  font-size: .71rem;
  align-items: baseline;
}
.gv-gap-lane {
  color: var(--pd-text-muted, #94a3b8);
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gv-gap-period {
  color: var(--pd-text, #e2e8f0);
  flex: 1;
}
.gv-gap-dur {
  color: #fbbf24;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Work 색상 범례 ── */
.gv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-top: .5rem;
  font-size: .71rem;
}
.gv-legend-item {
  display: flex;
  align-items: center;
  gap: .25rem;
  color: var(--pd-text-muted, #94a3b8);
}
.gv-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.gv-legend-gap {
  width: 16px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(251,191,36,.5) 0px,
    rgba(251,191,36,.5) 2px,
    transparent 2px,
    transparent 5px
  );
  border: 1px solid rgba(251,191,36,.5);
}
.gv-gap-more { color: var(--vis-sub); font-size: .78rem; margin-top: .4rem; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; display: block; }