/* ── App shell ── */
#app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
#appBody { display:flex; flex:1; overflow:hidden; min-width:0; }
.tb-logo { font-size:13px; font-weight:700; white-space:nowrap; color:var(--color-text); }
.tb-logo strong { color:var(--color-primary); }
.tb-action { font-size:11px !important; padding:4px 10px !important; white-space:nowrap; flex-shrink:0; }
/* ── Sidebar ── */
#sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--color-surface); color:var(--color-text); display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; border-right:1px solid var(--color-border); }
.sb-nav { list-style:none; margin:8px 0 0; padding:0; flex-shrink:0; }
.sb-nav li { padding:6px 14px; font-size:12px; color:var(--color-text); cursor:pointer; border-radius:6px; margin:1px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-nav li:hover { background:var(--color-bg); }
.sb-nav li.active { background:var(--color-primary-light); color:var(--color-primary); font-weight:600; }
.sb-section { padding:10px 14px 4px; font-size:10px; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.6px; flex-shrink:0; }
#exNav.sb-courses { flex:1; overflow-y:auto; padding:0 0 8px; font-size:12px; }
#exNav.sb-courses > ul { padding-left:0; }
#exNav.sb-courses ul { list-style:none; padding-left:12px; margin:0; }
#exNav.sb-courses li { display:flex; align-items:center; flex-wrap:wrap; }
#exNav.sb-courses li > ul { width:100%; }
#exNav.sb-courses .ex-folder { cursor:pointer; padding:4px 6px 4px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; color:var(--color-text); border-radius:4px; }
#exNav.sb-courses .ex-folder:hover { background:var(--color-bg); }
#exNav.sb-courses .ex-folder.active { background:var(--color-primary-light); color:var(--color-primary); font-weight:600; }
#exNav.sb-courses .ex-count { font-size:10px; opacity:.6; margin-left:4px; }
#exNav.sb-courses .caret { cursor:pointer; display:inline-block; width:14px; text-align:center; color:var(--color-text-muted); font-size:10px; flex-shrink:0; }
#exNav.sb-courses .collapsed > ul { display:none; }
/* ── Main area ── */
#mainArea { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
/* ── Top bar ── */
#topBar { height:var(--topbar-h); min-height:var(--topbar-h); display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--color-surface); border-bottom:1px solid var(--color-border); flex-shrink:0; z-index:100; }
.tb-search { flex:1; }
#topBar .tb-search { display:flex; align-items:center; gap:8px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:normal; color:var(--color-text-muted); cursor:pointer; flex-shrink:0; }
#topBar .tb-search:hover { border-color:var(--color-primary); }
.tb-search kbd { background:var(--color-border); border-radius:4px; padding:1px 5px; font-size:10px; }
.tb-dev { font-size:11px; color:var(--color-text-muted); white-space:nowrap; }
.tb-avatar { width:30px; height:30px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; cursor:pointer; }
/* ── Main content scroll area ── */
#mainContent { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
/* ── Pipeline ── */
#statsWidget { display:none; padding:6px 16px; border-bottom:1px solid var(--color-border); background:var(--color-surface); font-size:12px; color:var(--color-text-muted); gap:8px; flex-wrap:wrap; align-items:center; }
.pipeline { display:flex; gap:0; align-items:stretch; padding:0 16px; border-bottom:1px solid var(--color-border);
  background:var(--color-surface); font-size:12px; min-height:32px; flex-wrap:wrap; flex-shrink:0; }
.pipeline:empty { display:none; min-height:0; }
.pipe-seg { display:flex; align-items:center; gap:6px; padding:6px 14px; border-right:1px solid var(--color-border); }
.pipe-seg:last-child { border-right:0; }
.pipe-seg .cnt { font-weight:700; font-size:14px; min-width:16px; text-align:center; }
.pipe-seg .lbl { color:var(--color-text-muted); }
.pipe-seg .lbl a { color:var(--color-primary); text-decoration:none; max-width:220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
.pipe-seg .lbl a:hover { text-decoration:underline; }
.pipe-seg.active { color:var(--color-primary); }
.pipe-seg.active .lbl { color:var(--color-primary); }
.pipe-seg.s-done { color:var(--color-ok); }
.pipe-seg.s-done .lbl { color:var(--color-ok); }
/* ── Chat panel ── */
.chat-panel { width:var(--chat-w); min-width:var(--chat-w); display:flex; flex-direction:column;
  border-left:1px solid var(--color-border); background:var(--color-surface); flex-shrink:0; overflow:hidden; }
.chat-header { padding:10px 14px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.chat-header select { flex:1; min-width:0; font-size:12px; padding:5px 8px; }
.chat-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.chat-input { padding:10px; border-top:1px solid var(--color-border); display:flex; gap:8px; flex-shrink:0; }
/* ── Chat maximize overlay ── */
.chat-max-backdrop { position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.45); }
.chat-panel.maximized { position:fixed; z-index:901; top:5vh; left:5vw; width:90vw; min-width:0;
  height:90vh; border:1px solid var(--color-border); border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.35); }
.chat-panel.maximized .chat-messages { padding:16px 20px; }
.chat-panel.maximized .chat-msg { max-width:760px; }
/* ── Stats bar ── */
.stats-bar { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
/* ── Sidebar utilities ── */
.sb-count-dim { opacity:.6; }
/* ── Pipeline error state ── */
.pipe-seg.s-error { color:var(--color-danger); }
.pipe-seg.s-error .lbl { color:var(--color-danger); }