/* ============================================================
   AFTER — "inside Collivo" workflow (mirror of the BEFORE carousel)
   Kiki theme. Files drag from the explorer into the chat as
   reference pills; one message comes from the circles popup via
   a Copy-reference button. Dependency-free.
   ============================================================ */
:root{
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Source Serif 4',Georgia,serif;
  --bg:oklch(0.965 0.025 60);
  --card:oklch(0.992 0.010 60);
  --ink:oklch(0.300 0.030 30);
  --ink-soft:oklch(0.420 0.030 35);
  --muted:oklch(0.520 0.035 42);
  --line:oklch(0.880 0.025 55);
  --green:oklch(0.55 0.15 145);
  --green-deep:oklch(0.47 0.14 145);
  --green-wash:oklch(0.90 0.06 145);
  --warm:oklch(0.916 0.034 55);
  --tint:oklch(0.952 0.030 58);
  /* explorer */
  --fx-body:#fcf6ec; --fx-border:#e6d9c6; --fx-h1:#f5e9d9; --fx-h2:#efe1cd;
  --fx-text:#3c3027; --fx-muted:#9b9183; --fx-guide:#e4d8c6;
  /* file-type accents */
  --t-doc:#3b82f6; --t-img:#8b5cf6; --t-sheet:#1f9d57; --t-mail:#d6492f;
  --t-plan:#6d676e; --t-note:#003566;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
img,svg{display:block}

.fit{position:relative;width:100%;max-width:1100px;margin:0 auto;overflow:hidden}
.scene{position:absolute;top:0;left:0;width:1100px;height:640px;transform-origin:top left}
.scene{
  background:radial-gradient(125% 120% at 50% -10%, #fbf3e6, #f3ead9 62%, #efe1c8);
}
.scene::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(150,120,70,.10) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}

/* ===== running subtitle ===== */
.stagecap{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:90%;max-width:760px;text-align:center;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-0.012em;color:#6b675f;z-index:60;opacity:1;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
.stagecap.enter{opacity:0;transform:translate(-50%,8px)}
.stagecap b{color:#23211d;font-weight:700}

/* ===== browser window ===== */
.cwin{position:absolute;left:64px;top:64px;width:972px;height:516px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px -32px rgba(74,52,28,.5),0 6px 16px -8px rgba(74,52,28,.22);overflow:hidden;display:flex;flex-direction:column}
.cbar{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;background:linear-gradient(180deg,#fbf6ec,#f2ead9);border-bottom:1px solid #ece1cf;flex:none}
.cbar .dots{display:flex;gap:7px}
.cbar .dots i{width:11px;height:11px;border-radius:50%;background:#e3d6c0;display:block}
.cbar .url{flex:1;max-width:380px;margin:0 auto;text-align:center;font-family:var(--mono);font-size:12px;color:#8d8472;background:#fff;border:1px solid #ece1cf;border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .right{display:flex;align-items:center;gap:10px;min-width:120px;justify-content:flex-end}
.presence{display:flex}
.presence .av{width:25px;height:25px;border-radius:50%;border:2px solid #fbf6ec;margin-left:-7px;overflow:hidden;background:var(--warm)}
.presence .av:first-child{margin-left:0}
.presence .av img{width:100%;height:100%;object-fit:cover;background:#fff}
.msgbtn{position:relative;width:34px;height:34px;border-radius:9px;border:1px solid #e7dcc9;background:#fff;display:grid;place-items:center;color:#6f6052;transition:background .15s,border-color .15s,box-shadow .15s}
.msgbtn svg{width:18px;height:18px}
.msgbtn .badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:9px;background:var(--green);color:#fff;font:700 9px/15px var(--mono);text-align:center;padding:0 3px;border:1.5px solid #fff}
.msgbtn.hot{background:var(--green-wash);border-color:color-mix(in oklab,var(--green) 40%,transparent);color:var(--green-deep);box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 14%,transparent)}

/* ===== body split ===== */
.cbody{flex:1;min-height:0;display:grid;grid-template-columns:248px 1fr}

/* ===== file explorer ===== */
.fx{background:var(--fx-body);border-right:1px solid var(--fx-border);display:flex;flex-direction:column;min-height:0}
.fx-head{display:flex;align-items:center;gap:9px;height:42px;padding:0 14px;background:linear-gradient(180deg,var(--fx-h1),var(--fx-h2));border-bottom:1px solid var(--fx-border);flex:none}
.fx-head svg{width:16px;height:16px;color:#6f6052}
.fx-head .t{flex:1;font-size:11.5px;font-weight:700;letter-spacing:.07em;color:#4a3d30}
.fx-tree{padding:7px 0;overflow:hidden;flex:1}
.fx-row{position:relative;display:flex;align-items:center;gap:7px;height:30px;padding-right:10px;font-size:13.5px;color:var(--fx-text);white-space:nowrap}
.fx-row .chev{width:13px;height:13px;flex:none;color:#6f6052}
.fx-row .chev.sp{visibility:hidden}
.fx-ic{width:18px;height:18px;flex:none;display:grid;place-items:center}
.fx-ic svg{width:18px;height:18px}
.fx-tile{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(40,30,20,.18)}
.fx-tile svg{width:12px;height:12px;color:#fff}
.fx-nm{font-size:13.5px;font-weight:450;overflow:hidden;text-overflow:ellipsis}
.fx-row.root .fx-nm{font-weight:600}
.fx-row.muted .fx-nm{color:var(--fx-muted)}
.fx-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--fx-guide)}
/* draggable file rows light up */
.fx-row.file{border-radius:7px;cursor:grab}
.fx-row.file.lift{background:color-mix(in oklab,var(--green) 12%,transparent)}
.fx-row.taken .fx-nm{color:var(--fx-muted)}
.fx-row.taken .fx-check{margin-left:auto;color:var(--green);display:flex}
.fx-check{display:none}
.fx-check svg{width:14px;height:14px}

/* ===== chat panel ===== */
.chat{display:flex;flex-direction:column;min-width:0;background:var(--tint)}
.chat-head{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;background:#f6efe2;border-bottom:1px solid color-mix(in oklab,var(--line) 60%,transparent);flex:none}
.chat-head .grip{color:var(--muted)}
.chat-head .grip svg{width:16px;height:16px}
.chat-head .ti{font-size:15px;font-weight:700;letter-spacing:-.01em}
.chat-head .meta{margin-left:auto;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.chat-head .meta svg{width:13px;height:13px}
.chat-thread{flex:1;min-height:0;padding:16px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.spacechip{align-self:center;display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 11px;border-radius:999px;background:color-mix(in oklab,var(--green) 11%,var(--card));border:1px solid color-mix(in oklab,var(--green) 24%,var(--line));box-shadow:var(--card-shadow,0 1px 2px rgba(120,80,30,.06));font-size:13px;font-weight:600}
.spacechip svg{width:15px;height:15px;color:var(--green)}
.convo-start{display:flex;align-items:center;gap:12px;color:var(--muted)}
.convo-start .ln{flex:1;height:1px;background:var(--line)}
.convo-start .lb{padding:4px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.ai-greet{display:flex;gap:11px;align-items:flex-start}
.ai-av{width:30px;height:30px;border-radius:9px;flex:none;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-xs,0 1px 2px rgba(40,30,20,.12))}
.ai-av svg{width:17px;height:17px}
.ai-greet .gx{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.ai-greet .gx b{color:var(--ink)}

/* ===== composer ===== */
.composer{flex:none;background:var(--card);border-top:1.5px solid var(--green);border-radius:16px 16px 0 0;box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 8%,transparent),0 -10px 26px -18px rgba(74,52,28,.3);margin:0 14px;padding:13px 14px 11px;transition:box-shadow .2s}
.composer.drop{box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 24%,transparent),0 12px 30px -14px color-mix(in oklab,var(--green) 40%,transparent)}
.cp-field{min-height:46px;font-size:15px;line-height:1.7;color:var(--ink);padding:2px 2px 8px}
.cp-field .ph{color:var(--muted)}
.cp-caret{display:inline-block;width:2px;height:1.05em;background:var(--green-deep);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pill{display:inline-flex;align-items:center;gap:5px;vertical-align:-2px;margin:0 2px;padding:2px 8px 2px 6px;background:var(--card);border:1px solid var(--line);border-radius:7px;box-shadow:0 1px 2px rgba(40,30,20,.07);font-size:13.5px;font-weight:500;white-space:nowrap;animation:pillIn .34s cubic-bezier(.34,1.56,.64,1)}
.pill svg{width:13px;height:13px;flex:none}
.pill .mctx{display:inline-flex;width:15px;height:15px;border-radius:4px;background:var(--green);color:#fff;align-items:center;justify-content:center}
.pill .mctx svg{width:10px;height:10px}
@keyframes pillIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.cp-tools{display:flex;align-items:center;gap:7px}
.tbtn{height:32px;min-width:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:600;padding:0 10px;box-shadow:0 1px 1px rgba(40,30,20,.05)}
.tbtn.ico{padding:0}
.tbtn svg{width:16px;height:16px}
.tbtn.green{background:color-mix(in oklab,var(--green) 10%,var(--card));border-color:color-mix(in oklab,var(--green) 32%,var(--line));color:var(--green-deep)}
.tbtn.dark{background:oklch(0.32 0.03 262);border-color:oklch(0.32 0.03 262);color:#fff}
.tbtn .cnt{font-variant-numeric:tabular-nums}
.cp-send{margin-left:auto;width:34px;height:34px;border-radius:10px;border:none;background:var(--green);color:#fff;display:grid;place-items:center}
.cp-send svg{width:17px;height:17px}
.cp-send.pulse{animation:send .4s ease}
@keyframes send{40%{transform:scale(.84);background:var(--green-deep)}}

/* ===== circles / messages popup ===== */
.popup{position:absolute;right:18px;top:56px;width:330px;height:392px;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 30px 64px -26px rgba(74,52,28,.55),0 8px 20px -10px rgba(74,52,28,.3);z-index:45;overflow:hidden;display:flex;flex-direction:column;transform-origin:top right;opacity:0;transform:scale(.92) translateY(-8px);pointer-events:none;transition:opacity .26s,transform .26s cubic-bezier(.34,1.4,.6,1)}
.popup.on{opacity:1;transform:none}
.popup::before{content:"";position:absolute;top:-7px;right:24px;width:13px;height:13px;background:var(--card);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.pop-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid color-mix(in oklab,var(--line) 60%,transparent);flex:none}
.pop-head .ti{font-size:14px;font-weight:700}
.pop-head .x{margin-left:auto;color:var(--muted)}
.pop-head .x svg{width:16px;height:16px}
.pop-tabs{display:flex;gap:4px;padding:8px 12px 6px;flex:none}
.pop-tab{font-size:12px;font-weight:600;color:var(--muted);padding:5px 11px;border-radius:8px}
.pop-tab.on{background:color-mix(in oklab,var(--green) 12%,var(--card));color:var(--green-deep)}
.pop-circles{flex:none;padding:2px 8px 8px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid color-mix(in oklab,var(--line) 50%,transparent)}
.circle-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px}
.circle-row.on{background:color-mix(in oklab,var(--green) 10%,var(--card))}
.circle-ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font:700 11px var(--mono)}
.circle-tx{min-width:0;flex:1}
.circle-tx .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circle-tx .pv{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circle-row .un{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.pop-thread{flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;gap:11px;overflow:hidden;background:var(--tint)}
.cmsg{display:flex;gap:9px;position:relative}
.cmsg .av{width:26px;height:26px;border-radius:7px;flex:none;overflow:hidden;display:grid;place-items:center;color:#fff;font:700 10px var(--mono)}
.cmsg img.av{width:26px;height:26px;object-fit:cover;display:block;background:#fff}
.cmsg .bd{min-width:0;flex:1}
.cmsg .who{font-size:11.5px;font-weight:700;margin-bottom:3px}
.cmsg .who time{color:var(--muted);font-weight:500;margin-left:5px}
.cmsg .bub{font-size:12.5px;line-height:1.5;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:10px;border-top-left-radius:3px;padding:8px 11px}
.cmsg.pickme .bub{border-color:color-mix(in oklab,var(--green) 40%,var(--line));box-shadow:0 0 0 3px color-mix(in oklab,var(--green) 12%,transparent)}
.copyref{margin-top:7px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green-deep);background:color-mix(in oklab,var(--green) 10%,var(--card));border:1px solid color-mix(in oklab,var(--green) 30%,var(--line));border-radius:8px;padding:4px 10px 4px 8px;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s,background .15s}
.copyref.show{opacity:1;transform:none}
.copyref.press{background:color-mix(in oklab,var(--green) 24%,var(--card))}
.copyref svg{width:13px;height:13px}

/* ===== flying reference ghost (drag + copy) ===== */
.ghost{position:absolute;top:0;left:0;z-index:54;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 30px -10px rgba(74,52,28,.45);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;opacity:0;transform:rotate(-3deg)}
.ghost svg{width:14px;height:14px}
.ghost .mctx{display:inline-flex;width:15px;height:15px;border-radius:4px;background:var(--green);color:#fff;align-items:center;justify-content:center}
.ghost .mctx svg{width:10px;height:10px}
.ghost.on{opacity:1}

/* ===== toast ===== */
.toast{position:absolute;top:0;left:0;z-index:58;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:#23332a;color:#eafff0;font-size:12px;font-weight:600;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);transition:opacity .22s,transform .22s;white-space:nowrap}
.toast svg{width:14px;height:14px;color:#7fe0a0}
.toast.on{opacity:1;transform:none}

/* ===== counter ===== */
.counter{position:absolute;left:64px;bottom:24px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--green-deep);background:color-mix(in oklab,var(--green) 12%,#fff);border:1px solid color-mix(in oklab,var(--green) 30%,transparent);border-radius:999px;padding:6px 13px 6px 10px;z-index:40}
.counter svg{width:14px;height:14px}

/* ===== cursor ===== */
.cursor{position:absolute;top:0;left:0;width:23px;height:23px;z-index:70;will-change:transform}
.cursor svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.34));transition:transform .14s ease}
.cursor.click svg{transform:scale(.8)}
.cursor.grabbing svg{transform:scale(.86)}

@media (prefers-reduced-motion:reduce){
  .cursor svg,.pill,.copyref,.toast,.popup,.ghost{transition:none;animation:none}
}