/* ============================================================================
   CoConvo — Build Assistant (Rung 0)  ·  PURELY ADDITIVE
   A separate, first-class 3-pane IDE section. Self-contained: every class is
   prefixed `ccb-` and nothing here affects hide-mode or the rest of the app.
   Light + dark palettes; dark follows the app's [data-theme="night"] OR a local
   .ccb-night override toggled from the Build header.
   ============================================================================ */

.ccb-root{
  --ccb-bg:#f6f7fb;
  --ccb-bg2:#eef1f8;
  --ccb-surface:rgba(255,255,255,.72);
  --ccb-surface-solid:#ffffff;
  --ccb-stroke:rgba(15,23,42,.10);
  --ccb-stroke-strong:rgba(15,23,42,.16);
  --ccb-ink:#1e293b;
  --ccb-ink-soft:#475569;
  --ccb-faint:#94a3b8;
  --ccb-accent:#6366f1;
  --ccb-accent2:#8b5cf6;
  --ccb-accent3:#22d3ee;
  --ccb-aurora:linear-gradient(135deg,#6366f1 0%,#8b5cf6 45%,#22d3ee 100%);
  --ccb-good:#10b981;
  --ccb-warn:#f59e0b;
  --ccb-bad:#ef4444;
  --ccb-shadow:0 18px 48px -24px rgba(30,41,59,.45);
  --ccb-glass-blur:saturate(150%) blur(14px);

  display:none;
  position:fixed; inset:0; z-index:400;
  grid-template-rows:auto 1fr;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, rgba(34,211,238,.10), transparent 55%),
    linear-gradient(180deg,var(--ccb-bg),var(--ccb-bg2));
  color:var(--ccb-ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ccb-root.ccb-open{display:grid}
body.ccb-locked{overflow:hidden}

/* ── Dark palette: global night OR local override ── */
[data-theme="night"] .ccb-root:not(.ccb-day),
.ccb-root.ccb-night{
  --ccb-bg:#0a0e1a;
  --ccb-bg2:#0d1326;
  --ccb-surface:rgba(20,28,48,.62);
  --ccb-surface-solid:#121a30;
  --ccb-stroke:rgba(148,163,184,.16);
  --ccb-stroke-strong:rgba(148,163,184,.26);
  --ccb-ink:#e7ecf6;
  --ccb-ink-soft:#aab6cd;
  --ccb-faint:#7686a3;
  --ccb-accent:#818cf8;
  --ccb-accent2:#a78bfa;
  --ccb-accent3:#67e8f9;
  --ccb-shadow:0 22px 60px -28px rgba(0,0,0,.7);
  background:
    radial-gradient(1200px 620px at 10% -12%, rgba(129,140,248,.18), transparent 60%),
    radial-gradient(1100px 640px at 112% -4%, rgba(103,232,249,.12), transparent 55%),
    linear-gradient(180deg,var(--ccb-bg),var(--ccb-bg2));
}

/* ── Header ── */
.ccb-header{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--ccb-stroke);
  background:var(--ccb-surface);
  -webkit-backdrop-filter:var(--ccb-glass-blur); backdrop-filter:var(--ccb-glass-blur);
}
.ccb-brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:15px; letter-spacing:.2px}
.ccb-logo{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--ccb-aurora); color:#fff; font-size:15px; box-shadow:0 6px 18px -6px rgba(99,102,241,.7);
}
.ccb-brand small{display:block; font-weight:500; font-size:11px; color:var(--ccb-faint); letter-spacing:.3px}
.ccb-head-sp{flex:1}
.ccb-iconbtn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--ccb-stroke);
  background:var(--ccb-surface); color:var(--ccb-ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.ccb-iconbtn:hover{transform:translateY(-1px); color:var(--ccb-ink); border-color:var(--ccb-stroke-strong)}
.ccb-iconbtn:active{transform:scale(.94)}
.ccb-iconbtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ccb-iconbtn.ccb-close:hover{color:var(--ccb-bad); border-color:rgba(239,68,68,.4)}

/* ── Body grid (resizable like Cursor: two 6px drag handles between panes) ── */
.ccb-body{
  position:relative;
  display:grid;
  grid-template-columns:var(--ccb-col-left,284px) 6px minmax(360px,1fr) 6px var(--ccb-col-right,372px);
  min-height:0; overflow:hidden;
}
.ccb-pane{min-height:0; display:flex; flex-direction:column; overflow:hidden}
.ccb-left{border-right:1px solid var(--ccb-stroke); background:var(--ccb-surface); -webkit-backdrop-filter:var(--ccb-glass-blur); backdrop-filter:var(--ccb-glass-blur)}
.ccb-right{border-left:1px solid var(--ccb-stroke); background:var(--ccb-surface); -webkit-backdrop-filter:var(--ccb-glass-blur); backdrop-filter:var(--ccb-glass-blur)}
.ccb-center{min-width:0}

/* Drag handles */
.ccb-resizer{position:relative; cursor:col-resize; background:transparent; z-index:6; touch-action:none; align-self:stretch}
.ccb-resizer::after{content:""; position:absolute; top:0; bottom:0; left:2px; right:2px; border-radius:3px; background:transparent; transition:background .15s}
.ccb-resizer:hover::after,
.ccb-resizer.ccb-rz-active::after{background:var(--ccb-accent)}
.ccb-resizer:focus-visible{outline:none}
.ccb-resizer:focus-visible::after{background:var(--ccb-accent)}

.ccb-scroll{overflow-y:auto; min-height:0; flex:1}
.ccb-scroll::-webkit-scrollbar{width:9px}
.ccb-scroll::-webkit-scrollbar-thumb{background:var(--ccb-stroke-strong); border-radius:9px; border:2px solid transparent; background-clip:padding-box}

.ccb-sectlabel{font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--ccb-faint); padding:14px 16px 7px}

/* ── Left: chat history + file tree ── */
.ccb-search{margin:6px 12px 8px; position:relative}
.ccb-search input{
  width:100%; box-sizing:border-box; padding:9px 12px 9px 32px; border-radius:10px;
  border:1px solid var(--ccb-stroke); background:var(--ccb-surface-solid); color:var(--ccb-ink); font-size:13px; outline:none;
}
.ccb-search input:focus{border-color:var(--ccb-accent)}
.ccb-search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--ccb-faint); fill:none; stroke-width:2}
.ccb-histitem{
  display:flex; align-items:center; gap:9px; margin:2px 8px; padding:9px 11px; border-radius:10px;
  cursor:pointer; color:var(--ccb-ink-soft); font-size:13px; border:1px solid transparent; transition:background .14s, border-color .14s;
}
.ccb-histitem:hover{background:var(--ccb-surface-solid)}
.ccb-histitem.ccb-on{background:var(--ccb-surface-solid); border-color:var(--ccb-stroke-strong); color:var(--ccb-ink); font-weight:600}
.ccb-histitem .ccb-htitle{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccb-cptag{font-size:10px; font-weight:700; color:var(--ccb-accent); background:rgba(99,102,241,.12); border-radius:20px; padding:2px 7px; flex:none}
.ccb-newchat{
  display:flex; align-items:center; justify-content:center; gap:7px; margin:8px 12px; padding:10px;
  border-radius:11px; border:1px dashed var(--ccb-stroke-strong); background:transparent; color:var(--ccb-ink-soft);
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
}
.ccb-newchat:hover{border-color:var(--ccb-accent); color:var(--ccb-accent)}

.ccb-tree{padding:2px 8px 16px}
.ccb-fileitem{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--ccb-ink-soft); font-family:ui-monospace,Menlo,monospace;
}
.ccb-fileitem:hover{background:var(--ccb-surface-solid); color:var(--ccb-ink)}
.ccb-fileitem.ccb-on{background:var(--ccb-surface-solid); color:var(--ccb-ink); font-weight:600}
.ccb-fileitem .ccb-fico{opacity:.7}
.ccb-empty{padding:14px 16px; color:var(--ccb-faint); font-size:12.5px; line-height:1.5}

/* ── Center: tabs + editor + preview ── */
.ccb-tabs{display:flex; align-items:center; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--ccb-stroke); background:var(--ccb-surface)}
.ccb-tab{
  padding:8px 15px; border-radius:9px 9px 0 0; font-size:13px; font-weight:600; color:var(--ccb-faint);
  cursor:pointer; border:1px solid transparent; border-bottom:none; display:flex; align-items:center; gap:7px;
}
.ccb-tab:hover{color:var(--ccb-ink-soft)}
.ccb-tab.ccb-on{color:var(--ccb-ink); background:var(--ccb-bg); border-color:var(--ccb-stroke)}
.ccb-tab-sp{flex:1}

/* Keep-it-working chip */
.ccb-kiw{
  display:inline-flex; align-items:center; gap:7px; margin:0 6px; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600; border:1px solid var(--ccb-stroke); background:var(--ccb-surface-solid); color:var(--ccb-ink-soft);
}
.ccb-kiw .ccb-dot{width:8px; height:8px; border-radius:50%; background:var(--ccb-faint)}
.ccb-kiw.ccb-checking{color:var(--ccb-warn); border-color:rgba(245,158,11,.4)}
.ccb-kiw.ccb-checking .ccb-dot{background:var(--ccb-warn); animation:ccb-pulse 1s infinite}
.ccb-kiw.ccb-ok{color:var(--ccb-good); border-color:rgba(16,185,129,.4)}
.ccb-kiw.ccb-ok .ccb-dot{background:var(--ccb-good)}
.ccb-kiw.ccb-fixing{color:var(--ccb-accent2); border-color:rgba(139,92,246,.45)}
.ccb-kiw.ccb-fixing .ccb-dot{background:var(--ccb-accent2); animation:ccb-pulse .7s infinite}
.ccb-kiw.ccb-failed{color:var(--ccb-bad); border-color:rgba(239,68,68,.4)}
.ccb-kiw.ccb-failed .ccb-dot{background:var(--ccb-bad)}

.ccb-share{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:20px; cursor:pointer;
  font-size:12.5px; font-weight:700; color:#fff; border:0; background:var(--ccb-aurora);
  box-shadow:0 8px 20px -10px rgba(99,102,241,.8); margin-right:6px;
}
.ccb-share:hover{filter:brightness(1.06)}
.ccb-share svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.ccb-stage{position:relative; flex:1; min-height:0; overflow:auto; background:var(--ccb-bg)}
.ccb-preview-host{display:block; width:100%; min-height:100%; background:#fff}
.ccb-wc-frame{width:100%; height:100%; min-height:420px; border:0; background:#fff}
.ccb-wc-status{position:absolute; left:14px; bottom:12px; font-size:12px; color:var(--ccb-ink-soft); background:var(--ccb-surface-solid); padding:6px 11px; border-radius:8px; border:1px solid var(--ccb-stroke)}
.ccb-code{margin:0; padding:18px 20px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.65; color:var(--ccb-ink); white-space:pre-wrap; word-break:break-word}
.ccb-diff{padding:14px 18px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.6}
.ccb-diff .ccb-del{background:rgba(239,68,68,.12); color:#b91c1c; display:block; border-radius:4px; padding:0 6px}
.ccb-diff .ccb-add{background:rgba(16,185,129,.14); color:#047857; display:block; border-radius:4px; padding:0 6px}
[data-theme="night"] .ccb-root:not(.ccb-day) .ccb-diff .ccb-del,.ccb-root.ccb-night .ccb-diff .ccb-del{color:#fca5a5}
[data-theme="night"] .ccb-root:not(.ccb-day) .ccb-diff .ccb-add,.ccb-root.ccb-night .ccb-diff .ccb-add{color:#6ee7b7}
.ccb-stage-empty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--ccb-faint); padding:40px}
.ccb-stage-empty .ccb-bigico{font-size:44px; margin-bottom:12px; opacity:.6}

/* ── Right: agent panel ── */
.ccb-agent-head{padding:14px 16px 6px; display:flex; align-items:center; gap:10px}
.ccb-agent-head b{font-size:14px}
.ccb-agent-head span{font-size:11.5px; color:var(--ccb-faint)}

.ccb-convo{flex:1; min-height:0; overflow-y:auto; padding:10px 14px}
.ccb-msg{margin:10px 0; display:flex; gap:9px; align-items:flex-start}
.ccb-msg .ccb-av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; overflow:hidden}
.ccb-msg.ccb-user .ccb-av{background:var(--ccb-stroke-strong); color:var(--ccb-ink)}
.ccb-msg.ccb-ai .ccb-av{background:var(--ccb-aurora); color:#fff; border-radius:8px}
/* Fix 4: real user photo (round, subtle border) + initials fallback on brand gradient */
.ccb-msg .ccb-av .ccb-av-img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.ccb-msg .ccb-av.ccb-av-user{border:1px solid var(--ccb-stroke-strong)}
.ccb-msg .ccb-av.ccb-av-initials{background:var(--ccb-aurora); color:#fff; font-size:11px; font-weight:700; letter-spacing:.3px}
.ccb-bub{flex:1; font-size:13.5px; line-height:1.55; color:var(--ccb-ink); padding-top:3px}
.ccb-bub p{margin:0 0 7px}

/* Activity / tool lines */
.ccb-tool{
  display:flex; align-items:center; gap:8px; margin:4px 0 4px 35px; font-size:12.5px; color:var(--ccb-ink-soft);
  padding:5px 10px; border-radius:8px; background:var(--ccb-surface-solid); border:1px solid var(--ccb-stroke);
}
.ccb-tool .ccb-tdot{width:7px; height:7px; border-radius:50%; background:var(--ccb-accent); flex:none}
.ccb-tool.ccb-running .ccb-tdot{animation:ccb-pulse .8s infinite}
.ccb-tool.ccb-err{color:var(--ccb-bad); border-color:rgba(239,68,68,.35)}

/* Plan card */
.ccb-plan{
  margin:10px 0 10px 35px; border:1px solid var(--ccb-stroke-strong); border-radius:14px; overflow:hidden;
  background:var(--ccb-surface-solid); box-shadow:var(--ccb-shadow);
}
.ccb-plan-h{padding:10px 14px; font-weight:700; font-size:13px; background:linear-gradient(90deg,rgba(99,102,241,.12),transparent)}
.ccb-plan-b{padding:8px 14px 12px; font-size:13px; line-height:1.55; color:var(--ccb-ink-soft); white-space:pre-wrap}
.ccb-plan-acts{display:flex; gap:8px; padding:0 14px 13px}
.ccb-pbtn{flex:1; padding:8px; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid var(--ccb-stroke-strong); background:transparent; color:var(--ccb-ink)}
.ccb-pbtn.ccb-approve{background:var(--ccb-aurora); color:#fff; border:0}
.ccb-pbtn:hover{filter:brightness(1.05)}

/* Checkpoint rail */
.ccb-checkpoints{padding:6px 14px 2px; border-top:1px solid var(--ccb-stroke)}
.ccb-cp{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; font-size:12px; color:var(--ccb-ink-soft); cursor:default}
.ccb-cp .ccb-cpdot{width:9px; height:9px; border-radius:50%; border:2px solid var(--ccb-accent); flex:none}
.ccb-cp .ccb-cptime{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccb-undo{font-size:11px; font-weight:700; color:var(--ccb-accent); cursor:pointer; opacity:0; transition:opacity .14s; border:0; background:none}
.ccb-cp:hover .ccb-undo{opacity:1}

/* Composer + voice + effort */
.ccb-composer{position:relative; padding:10px 14px 14px; border-top:1px solid var(--ccb-stroke)}
.ccb-effort{display:flex; gap:4px; background:var(--ccb-surface-solid); border:1px solid var(--ccb-stroke); border-radius:11px; padding:3px; margin-bottom:9px}
.ccb-effort button{flex:1; padding:7px 4px; border:0; background:transparent; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--ccb-faint); cursor:pointer; transition:.14s}
.ccb-effort button.ccb-on{background:var(--ccb-aurora); color:#fff}
.ccb-inputrow{display:flex; align-items:flex-end; gap:9px}
.ccb-input{
  flex:1; resize:none; min-height:44px; max-height:140px; padding:11px 13px; border-radius:13px; font-size:13.5px; line-height:1.5;
  border:1px solid var(--ccb-stroke-strong); background:var(--ccb-surface-solid); color:var(--ccb-ink); outline:none; font-family:inherit;
}
.ccb-input:focus{border-color:var(--ccb-accent)}

.ccb-voice{
  width:46px; height:46px; border-radius:50%; flex:none; border:0; cursor:pointer; position:relative; display:grid; place-items:center;
  background:var(--ccb-aurora); color:#fff; box-shadow:0 8px 22px -8px rgba(99,102,241,.8);
}
.ccb-voice svg{width:20px; height:20px; fill:#fff}
.ccb-voice .ccb-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--ccb-accent2); opacity:0}
.ccb-voice.ccb-live .ccb-ring{animation:ccb-ring 1.6s ease-out infinite}
.ccb-voice.ccb-live .ccb-ring:nth-child(2){animation-delay:.5s}
.ccb-voice.ccb-live .ccb-ring:nth-child(3){animation-delay:1s}
.ccb-send{
  width:46px; height:46px; border-radius:50%; flex:none; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--ccb-ink); color:var(--ccb-bg); transition:.15s;
}
.ccb-send svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.ccb-send:hover{transform:translateY(-1px)}
.ccb-stop{background:var(--ccb-bad); color:#fff}
.ccb-stop svg{stroke:#fff}

.ccb-meterrow{display:flex; align-items:center; gap:8px; margin-top:9px; font-size:11.5px; color:var(--ccb-faint)}
.ccb-meterrow .ccb-cost{margin-left:auto}

/* ── Disguise (boss key), default OFF ── */
.ccb-root.ccb-disguise .ccb-left,
.ccb-root.ccb-disguise .ccb-right,
.ccb-root.ccb-disguise .ccb-resizer{display:none}
.ccb-root.ccb-disguise .ccb-body{grid-template-columns:1fr}
.ccb-root.ccb-disguise .ccb-tabs,
.ccb-root.ccb-disguise .ccb-kiw,
.ccb-root.ccb-disguise .ccb-share,
.ccb-root.ccb-disguise .ccb-brand small{display:none}
.ccb-root.ccb-disguise .ccb-stage{background:#fff}
.ccb-root.ccb-disguise .ccb-code{max-width:740px; margin:0 auto; color:#1f2937; font-family:Georgia,"Times New Roman",serif; font-size:15px; line-height:1.7}

/* ── Animations ── */
@keyframes ccb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ccb-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@keyframes ccb-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ccb-msg,.ccb-tool,.ccb-plan{animation:ccb-fadein .22s ease both}
.ccb-blink{display:inline-block;width:7px;height:14px;vertical-align:-2px;background:var(--ccb-accent);animation:ccb-pulse .9s infinite;border-radius:1px}

/* ── Menu launcher icon tint (keeps app menu styling) ── */
#menuBuildBtn .menu-ico{filter:saturate(1.2)}

/* ── Media: + button, popup menu, chips, tray, consent ── */
.ccb-plus{
  width:46px; height:46px; border-radius:50%; flex:none; border:1px solid var(--ccb-stroke-strong); cursor:pointer;
  background:var(--ccb-surface-solid); color:var(--ccb-ink); font-size:24px; line-height:1; display:grid; place-items:center; transition:.15s;
}
.ccb-plus:hover{border-color:var(--ccb-accent); color:var(--ccb-accent); transform:translateY(-1px)}
.ccb-plusmenu{
  position:absolute; bottom:120px; left:14px; z-index:6; display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--ccb-surface-solid); border:1px solid var(--ccb-stroke-strong); border-radius:13px; box-shadow:var(--ccb-shadow); min-width:200px;
}
.ccb-plusmenu[hidden]{display:none}
.ccb-plusmenu button{
  text-align:left; padding:9px 12px; border:0; background:transparent; color:var(--ccb-ink); font-size:13px; font-weight:600; border-radius:9px; cursor:pointer;
}
.ccb-plusmenu button:hover{background:var(--ccb-bg)}

.ccb-chip{
  margin:6px 0 8px 35px; padding:8px; border:1px solid var(--ccb-stroke); border-radius:12px; background:var(--ccb-surface-solid);
  display:flex; align-items:center; gap:9px; max-width:300px;
}
.ccb-chip img{width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none}
.ccb-chip audio{height:34px; max-width:210px}
.ccb-chip .ccb-chip-ico{font-size:22px}
.ccb-chip a{color:var(--ccb-accent); font-weight:700; font-size:13px; text-decoration:none}

.ccb-mediatray{padding:4px 8px 16px; display:flex; flex-direction:column; gap:4px}
.ccb-media-item{
  display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:9px; text-decoration:none; color:var(--ccb-ink-soft);
}
.ccb-media-item:hover{background:var(--ccb-surface-solid); color:var(--ccb-ink)}
.ccb-media-item img{width:34px; height:34px; object-fit:cover; border-radius:7px; flex:none}
.ccb-media-item .ccb-chip-ico{font-size:20px; width:34px; text-align:center; flex:none}
.ccb-media-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px}

.ccb-consent{position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(8,12,24,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.ccb-consent-card{
  max-width:420px; margin:20px; padding:22px; border-radius:18px; background:var(--ccb-surface-solid); border:1px solid var(--ccb-stroke-strong);
  box-shadow:var(--ccb-shadow); color:var(--ccb-ink);
}
.ccb-consent-card b{font-size:16px}
.ccb-consent-card p{font-size:13px; line-height:1.55; color:var(--ccb-ink-soft); margin:10px 0 14px}
.ccb-consent-row{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; margin-bottom:14px}
.ccb-consent-acts{display:flex; gap:9px}
.ccb-consent-go:disabled{opacity:.5; cursor:not-allowed}

/* ── Claude Code skin launcher (Phase 1; shown only on the disguise skin) ── */
.ccb-skin-launch{
  display:none; position:fixed; right:18px; bottom:18px; z-index:390;
  align-items:center; gap:7px; padding:10px 15px; border-radius:24px; border:0; cursor:pointer;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#22d3ee); color:#fff; font-weight:700; font-size:13px;
  box-shadow:0 10px 26px -10px rgba(99,102,241,.8); font-family:ui-sans-serif,system-ui,sans-serif;
  transition:transform .15s, filter .15s;
}
body.hide-mode.t-claudecode .ccb-skin-launch{display:inline-flex}
.ccb-skin-launch:hover{filter:brightness(1.06); transform:translateY(-1px)}
.ccb-skin-launch:active{transform:scale(.96)}

/* ── Editable artifact title (in the tabs bar) ── */
.ccb-arttitle{
  flex:none; width:190px; max-width:32%; margin:0 8px 6px 4px; padding:6px 10px; border-radius:8px;
  border:1px solid transparent; background:transparent; color:var(--ccb-ink); font-size:13.5px; font-weight:700; outline:none;
}
.ccb-arttitle:hover{border-color:var(--ccb-stroke)}
.ccb-arttitle:focus{border-color:var(--ccb-accent); background:var(--ccb-surface-solid)}

/* ── Activity timeline overlay (within the Build body) ── */
.ccb-timeline{
  position:absolute; inset:0; z-index:8; display:none; flex-direction:column;
  background:var(--ccb-bg); 
}
.ccb-timeline.ccb-on{display:flex}
.ccb-tl-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--ccb-stroke); background:var(--ccb-surface)}
.ccb-tl-head b{font-size:15px}
.ccb-tl-close{margin-left:auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--ccb-stroke); background:var(--ccb-surface-solid); color:var(--ccb-ink-soft); cursor:pointer; font-size:14px}
.ccb-tl-close:hover{color:var(--ccb-bad)}
.ccb-tl-list{flex:1; min-height:0; overflow-y:auto; padding:10px 14px 24px}
.ccb-tl-item{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; cursor:pointer; border:1px solid transparent}
.ccb-tl-item:hover{background:var(--ccb-surface-solid); border-color:var(--ccb-stroke)}
.ccb-tl-ic{font-size:18px; width:26px; text-align:center; flex:none}
.ccb-tl-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ccb-tl-title{font-size:13.5px; font-weight:600; color:var(--ccb-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ccb-tl-meta{font-size:11.5px; color:var(--ccb-faint)}
.ccb-tl-del{flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--ccb-stroke); background:transparent; color:var(--ccb-faint); cursor:pointer; opacity:0; transition:opacity .14s}
.ccb-tl-item:hover .ccb-tl-del{opacity:1}
.ccb-tl-del:hover{color:var(--ccb-bad); border-color:rgba(239,68,68,.4)}
.ccb-tl-del svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ── Rung 2: real-environment terminal (flag-gated, OFF by default) ── */
.ccb-sandbox-only{display:none !important}
.ccb-root.ccb-sandbox .ccb-sandbox-only{display:flex !important}
.ccb-term{display:flex; flex-direction:column; height:100%; background:#0b1020; color:#d7e0f0; font-family:ui-monospace,Menlo,monospace}
.ccb-root.ccb-night .ccb-term,[data-theme="night"] .ccb-root:not(.ccb-day) .ccb-term{background:#06090f}
.ccb-term-bar{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(148,163,184,.2)}
.ccb-term-bar button{background:rgba(148,163,184,.16); color:#cfe0ff; border:0; border-radius:7px; padding:6px 11px; font-size:12px; font-weight:600; cursor:pointer}
.ccb-term-bar button:hover{background:rgba(148,163,184,.28)}
.ccb-term-note{margin-left:auto; font-size:11.5px; color:#7686a3}
.ccb-term-out{flex:1; min-height:0; overflow:auto; margin:0; padding:12px 14px; font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word}
.ccb-term-out .ccb-tl-cmd{color:#7dd3fc}
.ccb-term-out .ccb-tl-out{color:#d7e0f0}
.ccb-term-out .ccb-tl-err{color:#fca5a5}
.ccb-term-out .ccb-tl-ok{color:#6ee7b7}
.ccb-term-out .ccb-tl-sys{color:#94a3b8}
.ccb-term-inrow{display:flex; align-items:center; gap:8px; padding:9px 12px; border-top:1px solid rgba(148,163,184,.2)}
.ccb-term-inrow span{color:#6ee7b7; font-weight:700}
.ccb-term-in{flex:1; background:transparent; border:0; outline:0; color:#e7ecf6; font-family:inherit; font-size:13px}

/* ── Reduced motion: honor the OS preference across the whole Build section ── */
@media (prefers-reduced-motion: reduce){
  .ccb-root *, .ccb-skin-launch{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .ccb-voice .ccb-ring{display:none}
  .ccb-blink{animation:none !important; opacity:.6}
}

/* ── Responsive ── */
@media(max-width:1080px){
  /* Collapse the sidebar + its handle; agent panel stays draggable. */
  .ccb-body{grid-template-columns:minmax(0,1fr) 6px var(--ccb-col-right,340px)}
  .ccb-left,
  .ccb-resizer.ccb-rz-left{display:none}
}
@media(max-width:760px){
  .ccb-body{grid-template-columns:1fr}
  .ccb-resizer{display:none}
  .ccb-right{position:fixed; right:0; top:55px; bottom:0; width:min(390px,92vw); z-index:5; box-shadow:var(--ccb-shadow)}
  .ccb-center{grid-column:1}
}