/* Multi-chat wrapper drawer ("Chats") — left-edge tab + Telegram-style list.
   Color tokens (--cw-*) live in tokens.css. */

:root{
  --cw-drawer-w:100vw;
  --cw-list-w:290px;
  --cw-list-bg:#f5f7fb;
  --cw-row-active:rgba(79,70,229,.10);
  --cw-row-hover:rgba(15,23,42,.04);
  --cw-running:#3b82f6;
  --cw-error:#dc2626;
  --cw-awaiting:#16a34a;
  --cw-idle:transparent;
}

/* --- Edge tab (always visible) ------------------------------------------ */
.cw-edge-tab{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:240;
  display:flex;align-items:center;gap:6px;
  padding:14px 8px;
  background:var(--pri);color:var(--txt-on-pri);
  border:none;border-radius:0 10px 10px 0;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.8rem;font-weight:600;letter-spacing:.06em;
  transition:transform .15s,background .15s;
}
.cw-edge-tab:hover{background:var(--pri-hover)}
.cw-edge-tab svg{width:14px;height:14px;writing-mode:horizontal-tb;flex-shrink:0}
.cw-edge-tab[hidden]{display:none}
.cw-edge-tab .cw-edge-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--cw-error);color:var(--txt-on-pri);
  font-size:.66rem;font-weight:700;line-height:18px;text-align:center;
  writing-mode:horizontal-tb;
  box-shadow:0 0 0 2px var(--card);
}
.cw-edge-badge[hidden]{display:none}

/* --- Drawer container --------------------------------------------------- */
.cw-scrim{
  position:fixed;inset:0;background:var(--scrim-soft);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  z-index:230;opacity:0;pointer-events:none;transition:opacity .2s;
}
.cw-scrim.cw-open{opacity:1;pointer-events:auto}

.cw-drawer{
  position:fixed;left:0;top:0;height:100vh;
  width:var(--cw-drawer-w);
  background:var(--card);
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  transform:translateX(-100%);transition:transform .22s ease;
  z-index:250;
}
.cw-drawer.cw-open{transform:translateX(0)}

.cw-hdr{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.cw-hdr h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--txt)}
.cw-hdr-actions{display:flex;align-items:center;gap:8px}
.cw-close{
  background:none;border:none;color:var(--dim);cursor:pointer;
  padding:4px;line-height:0;border-radius:6px;
}
.cw-close:hover{background:var(--bg);color:var(--txt)}
.cw-close svg{width:18px;height:18px}

.cw-body{
  flex:1;min-height:0;
  display:grid;grid-template-columns:var(--cw-list-w) 1fr;
}

/* --- Left: list --------------------------------------------------------- */
.cw-list{
  display:flex;flex-direction:column;min-height:0;
  background:var(--cw-list-bg);
  border-right:1px solid var(--border);
}

.cw-search-row{
  padding:10px 12px;border-bottom:1px solid var(--border);
  background:var(--cw-list-bg);
  position:sticky;top:0;z-index:1;
}
.cw-search{
  width:100%;box-sizing:border-box;
  padding:8px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:.86rem;color:var(--txt);background:var(--card);
  transition:border-color .15s,box-shadow .15s;
}
.cw-search:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-tint-mid)}

.cw-list-scroll{flex:1;overflow-y:auto;padding:6px 0 12px}
.cw-section-label{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim);padding:10px 14px 4px;
}
.cw-section-label[hidden]{display:none}

.cw-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;
  padding:10px 14px;cursor:pointer;border-left:3px solid transparent;
  transition:background .12s;
}
.cw-row.cw-row-orch{grid-template-columns:36px 1fr auto}
.cw-row:hover{background:var(--cw-row-hover)}
.cw-row.active{background:var(--cw-row-active);border-left-color:var(--pri)}
.cw-row.cw-row-pinned{background:var(--pri-tint)}
.cw-row.cw-row-pinned.active{background:var(--cw-row-active)}

.cw-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--border);color:var(--txt);
  font-size:.86rem;font-weight:700;
  flex-shrink:0;
}
.cw-avatar svg{width:18px;height:18px;color:var(--txt-on-pri)}
/* Orchestrator avatar uses lighter indigo→violet stops than the brand
   header gradient — preserved as literals to keep the visual distinction. */
.cw-avatar.cw-avatar-orch{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}

.cw-row-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cw-row-title{
  display:flex;align-items:center;gap:6px;
  font-size:.88rem;font-weight:600;color:var(--txt);
  white-space:nowrap;
  min-width:0;
}
/* Lesson-id text is the only flex child allowed to shrink; pills and icons
   keep their natural width so they don't get clipped on long lesson ids. */
.cw-row-title-text{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
}
.cw-pin-icon{flex-shrink:0;color:var(--dim);display:inline-flex}
.cw-pin-icon svg{width:12px;height:12px}
.cw-row-snippet{
  font-size:.76rem;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
.cw-row-snippet.cw-snippet-empty{font-style:italic;opacity:.7}

/* Auto-spawned section — orchestrator-fired sessions awaiting dev review.
   Distinct accent + small pill so the dev can spot them at a glance. */
.cw-section-label.cw-section-auto{
  color:var(--pri);
  display:flex;align-items:center;justify-content:space-between;
}
.cw-row.cw-row-auto{
  background:linear-gradient(90deg,rgba(99,102,241,.05),transparent 60%);
  border-left-color:rgba(99,102,241,.45);
}
.cw-row.cw-row-auto:hover{background:linear-gradient(90deg,rgba(99,102,241,.1),var(--cw-row-hover) 60%)}
.cw-row.cw-row-auto.active{
  background:var(--cw-row-active);
  border-left-color:var(--pri);
}
.cw-auto-icon{flex-shrink:0;font-size:.85rem;line-height:1}
.cw-snippet-auto{color:var(--txt);opacity:.85}
.cw-pill{
  display:inline-flex;align-items:center;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;
  background:rgba(99,102,241,.14);color:var(--pri);
  flex-shrink:0;
}
.cw-pill-feedback{background:rgba(99,102,241,.14);color:var(--pri)}
.cw-pill-article-update{background:rgba(245,158,11,.16);color:#b45309}
.cw-pill-manual{background:rgba(107,114,128,.16);color:#374151}
.cw-pill-more{background:rgba(107,114,128,.18);color:#374151;font-size:.6rem;padding:1px 5px}
/* Auto-spawned row's aside stacks the timestamp on top and the +N pill
   directly below it, so the pill stays visible even when the lesson_id
   in the title is long enough to truncate. */
.cw-row-aside.cw-row-aside-stack{
  flex-direction:column;align-items:flex-end;gap:4px;
}
.cw-row-time{
  font-size:.7rem;color:var(--dim);
  white-space:nowrap;
}

.cw-row-aside{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cw-status-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--cw-idle);
  flex-shrink:0;transition:background .15s,box-shadow .15s;
}
.cw-status-dot.cw-dot-running{background:var(--cw-running);box-shadow:0 0 0 3px var(--info-tint);animation:cwPulse 1.4s ease-in-out infinite}
.cw-status-dot.cw-dot-error{background:var(--cw-error);box-shadow:0 0 0 3px var(--err-tint)}
.cw-status-dot.cw-dot-awaiting{background:var(--cw-awaiting);box-shadow:0 0 0 3px var(--ok-tint)}
.cw-status-dot.cw-dot-done{background:var(--cw-awaiting);box-shadow:none}
.cw-status-dot.cw-dot-idle{background:transparent;box-shadow:none}
@keyframes cwPulse{0%,100%{opacity:1}50%{opacity:.55}}

.cw-row-add{
  background:none;border:1px solid var(--border);border-radius:6px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--pri);cursor:pointer;
  transition:background .12s,border-color .12s;
}
.cw-row-add:hover{background:var(--card);border-color:var(--pri)}
.cw-row-add svg{width:14px;height:14px}

.cw-list-empty{
  padding:24px 16px;font-size:.82rem;color:var(--dim);font-style:italic;text-align:center;
}

/* --- Right: pane host --------------------------------------------------- */
.cw-pane{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--card);
  position:relative;
}
.cw-pane-host{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.cw-pane-host[hidden]{display:none !important}

.cw-pane-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--dim);text-align:center;padding:40px 24px;
}
.cw-pane-empty .cw-pane-empty-icon{color:var(--dim);opacity:.5}
.cw-pane-empty svg{width:48px;height:48px}
.cw-pane-empty h3{margin:0;font-size:1rem;font-weight:600;color:var(--txt)}
.cw-pane-empty p{margin:0;font-size:.85rem;line-height:1.55;max-width:360px}

/* When a session is mounted into the pane, neutralize the .cc-shell-inner
   layout so it fills the pane host correctly. */
.cw-pane-host > .cc-session-root{flex:1;display:flex;min-height:0;width:100%}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 720px){
  .cw-body{grid-template-columns:1fr}
  .cw-list{display:none}
  .cw-drawer.cw-show-list .cw-list{display:flex}
  .cw-drawer.cw-show-list .cw-pane{display:none}
}