/* ChatBar — the composer, as real material.
   Send-destination router, attach chips, state orb, compact modal.
   Zero deps, CSP-safe. Theme via CSS custom properties on .cb-root;
   flip [data-cb-theme="dark"] for the Studio dark palette.
   Sibling of Skim Chips — same grammar, same palette, one family.
   ENOK Foundry · https://enok.com */

.cb-root{
  /* Light — Santorini white / earth adobe (low glow, earthy, no gradients) */
  --cb-bg:#FBF8F1; --cb-panel:#FFFFFF; --cb-sunk:#F5F1E7;
  --cb-line:#E5DECF; --cb-line-2:#D6CCB8;
  --cb-ink:#2A2622; --cb-ink2:#7A7266; --cb-ink3:#A79D8C;
  --cb-accent:#46708C; --cb-accent-bg:#E9EEF2;
  --cb-run:#3E6B4A;  --cb-run-bg:#E8EFE5;
  --cb-wait:#8A6A2A; --cb-wait-bg:#F3EBD8;
  --cb-err:#A24B37;  --cb-err-bg:#F4E3DC;
  --cb-r-bar:16px; --cb-r-btn:10px; --cb-r-chip:6px;
  /* Tangible shadows — components sit on real depth, never on a global dim */
  --cb-shadow:0 1px 2px rgba(42,38,34,.05), 0 10px 26px -14px rgba(42,38,34,.30);
  --cb-shadow-lift:0 2px 5px rgba(42,38,34,.07), 0 26px 56px -22px rgba(42,38,34,.45);
  --cb-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cb-ink); line-height:1.5;
}
.cb-root[data-cb-theme="dark"]{
  --cb-bg:#191713; --cb-panel:#221F1A; --cb-sunk:#1E1B16;
  --cb-line:#3A352C; --cb-line-2:#4A4438;
  --cb-ink:#F2EDE2; --cb-ink2:#A79D8C; --cb-ink3:#7A7266;
  --cb-accent:#7FA6C2; --cb-accent-bg:#25303A;
  --cb-run:#8FB98A;  --cb-run-bg:#232C22;
  --cb-wait:#CBA55E; --cb-wait-bg:#2E2818;
  --cb-err:#D08A6E;  --cb-err-bg:#2E211B;
  --cb-shadow:0 1px 2px rgba(0,0,0,.34), 0 10px 26px -14px rgba(0,0,0,.62);
  --cb-shadow-lift:0 2px 5px rgba(0,0,0,.40), 0 26px 56px -22px rgba(0,0,0,.72);
}

.cb-root *,.cb-root *::before,.cb-root *::after{box-sizing:border-box;}
.cb-root button{font:inherit;color:inherit;}
.cb-root [hidden]{display:none !important;}

/* ── The bar ──────────────────────────────────────────────────────────── */
.cb-bar{
  position:relative; display:flex; flex-direction:column; gap:9px;
  background:var(--cb-panel); border:1px solid var(--cb-line);
  border-radius:var(--cb-r-bar); box-shadow:var(--cb-shadow);
  padding:11px 12px 10px; transition:border-color .16s, box-shadow .16s;
}
.cb-bar[data-cb-focus]{border-color:var(--cb-line-2); box-shadow:var(--cb-shadow-lift);}
.cb-bar[data-cb-compact]{gap:7px; padding:9px 10px 8px; border-radius:13px;}

/* ── Attachment chips ─────────────────────────────────────────────────── */
.cb-attachments{display:flex; flex-wrap:wrap; gap:6px; margin:1px 0 0;}
.cb-attachments:empty{display:none;}
.cb-att{
  display:inline-flex; align-items:center; gap:6px; max-width:24ch;
  font-size:11.5px; font-weight:600; line-height:1.4; padding:3.5px 5px 3.5px 8px;
  color:var(--cb-ink); background:var(--cb-sunk);
  border:1px solid var(--cb-line); border-radius:var(--cb-r-chip);
}
.cb-att .cb-att-glyph{color:var(--cb-ink2); font-size:11px; flex:none;}
.cb-att .cb-att-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cb-att .cb-att-meta{color:var(--cb-ink2); font-family:var(--cb-mono); font-size:10.5px; flex:none;}
.cb-att[data-kind="consent"]{color:var(--cb-err); background:transparent;
  border:1.5px dashed var(--cb-err);}
.cb-att[data-kind="consent"] .cb-att-glyph{color:var(--cb-err);}
.cb-att-x{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:17px; height:17px; padding:0; border:0; border-radius:4px;
  background:transparent; color:var(--cb-ink2); cursor:pointer;
}
.cb-att-x:hover{background:var(--cb-line); color:var(--cb-ink);}
.cb-att-x svg{width:11px; height:11px;}

/* ── Field ────────────────────────────────────────────────────────────── */
.cb-field{display:flex; align-items:flex-end;}
.cb-input{
  flex:1 1 auto; width:100%; min-height:24px; max-height:180px;
  border:0; outline:0; padding:2px 2px 1px; margin:0; resize:none; overflow-y:auto;
  background:transparent; color:var(--cb-ink);
  font:inherit; font-size:15px; line-height:1.5;
}
.cb-input::placeholder{color:var(--cb-ink3);}
.cb-bar[data-cb-compact] .cb-input{font-size:14.5px; max-height:120px;}

/* ── Foot row ─────────────────────────────────────────────────────────── */
.cb-foot{display:flex; align-items:center; gap:8px;}
.cb-foot .cb-grow{flex:1 1 auto;}

/* State orb — one circle, one ring. Never a glow, never a gradient. */
.cb-orb{
  position:relative; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--cb-sunk); border:1px solid var(--cb-line);
}
.cb-orb::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  background:var(--cb-ink3); transition:background .18s;
}
.cb-orb::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid transparent;
}
.cb-orb[data-state="idle"]::before{background:var(--cb-ink3);}
.cb-orb[data-state="listen"]::before{background:var(--cb-accent);}
.cb-orb[data-state="listen"]::after{border-color:var(--cb-accent); opacity:.5;
  animation:cb-ripple 1.6s ease-out infinite;}
.cb-orb[data-state="think"]::before{background:var(--cb-accent); inset:6.5px;}
.cb-orb[data-state="think"]::after{border-color:var(--cb-accent);
  border-right-color:transparent; border-bottom-color:transparent;
  animation:cb-spin 1.05s linear infinite;}
.cb-orb[data-state="send"]::before{background:var(--cb-run);}
.cb-orb[data-state="send"]::after{border-color:var(--cb-run); opacity:.55;
  animation:cb-ripple .9s ease-out 1;}
.cb-orb[data-state="error"]::before{background:var(--cb-err);}
.cb-orb[data-state="error"]::after{border-color:var(--cb-err); opacity:.45;}

/* Destination button — the router handle */
.cb-dest{
  display:inline-flex; align-items:center; gap:6px; max-width:20ch;
  padding:4.5px 8px 4.5px 9px; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:600; line-height:1.4;
  color:var(--cb-ink); background:var(--cb-sunk); border:1px solid var(--cb-line);
  transition:background .14s, border-color .14s;
}
.cb-dest:hover{border-color:var(--cb-line-2);}
.cb-dest[aria-expanded="true"]{background:var(--cb-accent-bg); border-color:var(--cb-accent);
  color:var(--cb-accent);}
.cb-dest-glyph{flex:none; font-size:12px; color:var(--cb-ink2);}
.cb-dest[aria-expanded="true"] .cb-dest-glyph{color:var(--cb-accent);}
.cb-dest-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cb-dest svg{width:13px; height:13px; flex:none; opacity:.7;}

/* Icon actions + send */
.cb-icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:31px; height:31px; padding:0; border-radius:var(--cb-r-btn); cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--cb-ink2);
  transition:background .14s, color .14s;
}
.cb-icon:hover{background:var(--cb-sunk); color:var(--cb-ink);}
.cb-icon[aria-pressed="true"]{background:var(--cb-accent-bg); color:var(--cb-accent);
  border-color:var(--cb-accent);}
.cb-icon svg{width:17px; height:17px;}

.cb-send{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:31px; height:31px; padding:0; border-radius:var(--cb-r-btn); cursor:pointer;
  background:var(--cb-ink); color:var(--cb-panel); border:1px solid var(--cb-ink);
  transition:opacity .14s, background .14s;
}
.cb-send svg{width:16px; height:16px;}
.cb-send[disabled]{opacity:.32; cursor:default;}
.cb-send:not([disabled]):hover{background:var(--cb-accent); border-color:var(--cb-accent);}

.cb-hint{font-size:11.5px; color:var(--cb-ink3); white-space:nowrap;}
.cb-hint kbd{font-family:var(--cb-mono); font-size:10.5px; border:1px solid var(--cb-line);
  border-radius:4px; padding:1px 4px; color:var(--cb-ink2);}

/* ── Destination menu ─────────────────────────────────────────────────── */
.cb-menu{
  position:absolute; z-index:40; left:10px; bottom:calc(100% + 8px);
  min-width:238px; max-width:300px; max-height:302px; overflow-y:auto;
  padding:6px; background:var(--cb-panel); border:1px solid var(--cb-line);
  border-radius:13px; box-shadow:var(--cb-shadow-lift);
  animation:cb-rise .14s ease-out;
}
.cb-menu[data-cb-place="below"]{bottom:auto; top:calc(100% + 8px);}
.cb-menu-group{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cb-ink3); padding:8px 9px 5px;
}
.cb-menu-group:first-child{padding-top:4px;}
.cb-opt{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 9px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--cb-ink);
}
.cb-opt:hover,.cb-opt[data-cb-active]{background:var(--cb-sunk);}
.cb-opt-glyph{flex:none; width:19px; text-align:center; font-size:12.5px; color:var(--cb-ink2);}
.cb-opt-text{min-width:0; flex:1 1 auto;}
.cb-opt-label{font-size:13.5px; font-weight:600; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cb-opt-hint{font-size:11.5px; color:var(--cb-ink2); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cb-opt-check{flex:none; width:14px; height:14px; color:var(--cb-accent); opacity:0;}
.cb-opt[aria-selected="true"] .cb-opt-check{opacity:1;}
.cb-opt[aria-selected="true"] .cb-opt-glyph{color:var(--cb-accent);}

/* ── Compact modal ────────────────────────────────────────────────────────
   MODULARITY law: the panel is tangible material on a true shadow. There is
   NO dimming scrim — the page behind stays legible and un-greyed. The catcher
   layer below is fully transparent; it only routes an outside click. */
.cb-catcher{position:fixed; inset:0; z-index:60; background:transparent;}
.cb-modal{
  position:fixed; z-index:61; left:50%; transform:translateX(-50%);
  bottom:max(18px, env(safe-area-inset-bottom, 0px));
  width:min(560px, calc(100vw - 24px));
  background:var(--cb-panel); border:1px solid var(--cb-line-2);
  border-radius:19px; box-shadow:var(--cb-shadow-lift); padding:10px;
  animation:cb-rise .17s ease-out;
}
.cb-modal[data-cb-anchor="center"]{top:50%; bottom:auto; transform:translate(-50%,-50%); animation:none;}
.cb-modal .cb-bar{border:0; box-shadow:none; padding:2px 2px 0; border-radius:0;}
.cb-modal .cb-menu{left:2px;}
.cb-modal-head{display:flex; align-items:center; gap:8px; padding:3px 6px 8px;}
.cb-modal-title{font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--cb-ink2);}
.cb-modal-head .cb-grow{flex:1 1 auto;}

/* ── Focus ────────────────────────────────────────────────────────────── */
.cb-root :focus-visible{outline:2px solid var(--cb-accent); outline-offset:2px;}
.cb-root .cb-input:focus-visible{outline:0;}

@keyframes cb-rise{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}
.cb-modal{animation-name:cb-rise;}
@keyframes cb-spin{to{transform:rotate(360deg);}}
@keyframes cb-ripple{
  0%{transform:scale(.72); opacity:.6;}
  100%{transform:scale(1.28); opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .cb-menu,.cb-modal,.cb-bar,.cb-dest,.cb-icon,.cb-send,.cb-orb::before{
    animation:none !important; transition:none !important;}
  .cb-orb[data-state="listen"]::after,
  .cb-orb[data-state="think"]::after,
  .cb-orb[data-state="send"]::after{animation:none !important; opacity:.5;}
  /* State stays readable without motion: the ring holds its color. */
  .cb-orb[data-state="think"]::after{border-color:var(--cb-accent);}
}