/* Pajama — modelled on the owner's favourite bot app: white and soft grays, black for the
   user's messages and main buttons, gray rounded bubbles for Pajama, playful bouncy characters.
   No purple. Fonts are system fonts only (nothing downloaded, nothing licensed):
   - display: Segoe UI Variable Display (Windows 11) / SF Pro Display (Mac) — round, confident;
   - text: Segoe UI Variable Text / system-ui — comfortable for long reading;
   - mono: Cascadia Mono / Consolas for code and folder paths. */
:root {
  --font-display: "Segoe UI Variable Display", "SF Pro Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", monospace;

  --bg: #ffffff; --side: #f7f7f8; --panel: #ffffff; --bubble: #f1f1f2; --hover: #ececee; --raised: #ffffff;
  --line: #e6e6e8; --line-strong: #d4d4d8;
  --text: #0d0d0e; --muted: #6b6b70; --faint: #9a9aa0;
  --ink: #0d0d0e; --ink-text: #ffffff;           /* black buttons and user bubbles */
  --ok: #2fbf6f; --warn: #e0a030; --bad: #df4f43; --unread: #1f6feb;
  --code: #f4f4f5;
  /* Pajama bottoms: bright blue, light stripes, darker waistband, orange drawstring */
  --pj-cloth: #3c7cf6; --pj-stripe: #9cc0ff; --pj-band: #2a5fd6; --pj-cuff: #2a5fd6; --pj-eye: #ffffff; --pj-string: #ff8a3d;
  --shadow: 0 2px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.07);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --side: #111113; --panel: #151517; --bubble: #1c1c1f; --hover: #222226; --raised: #18181b;
  --line: #26262a; --line-strong: #34343a;
  --text: #f1f1f3; --muted: #a1a1a8; --faint: #6c6c73;
  --ink: #f1f1f3; --ink-text: #0b0b0c; --code: #18181b;
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; border-radius: 12px; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13.5px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Pajama, the character (pyjama bottoms) ================= */
.pj { overflow: visible; display: block; }
.pj .pj-cloth { fill: var(--pj-cloth); }
.pj .pj-stripe { fill: var(--pj-stripe); opacity: .55; }
.pj .pj-cuff { stroke: var(--pj-cuff); stroke-width: 4; stroke-linecap: round; fill: none; }
.pj .pj-band { fill: var(--pj-band); }
.pj .pj-eyes rect { fill: var(--pj-eye); }
.pj .pj-string { stroke: var(--pj-string); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.pj .pj-knot { fill: var(--pj-string); }
.pj .pj-shadow { fill: #000; opacity: .12; transform-box: fill-box; transform-origin: 50% 50%; }
.pj .pj-body, .pj .pj-leg, .pj .pj-eyes, .pj .pj-bow { transform-box: fill-box; }
.pj .pj-body { transform-origin: 50% 100%; }
.pj .pj-leg-l { transform-origin: 85% 0%; }   /* legs swing from the hip */
.pj .pj-leg-r { transform-origin: 15% 0%; }
.pj .pj-bow { transform-origin: 50% 0%; animation: pj-string 3.2s ease-in-out infinite; }
.pj .pj-eyes { transform-origin: 50% 50%; animation: pj-blink 5s infinite; }
.pj .pj-zzz text { font: 800 14px var(--font-display); fill: var(--faint); opacity: 0; animation: pj-z 3.6s infinite; }
.pj .pj-zzz text:nth-child(2) { animation-delay: 1.2s; font-size: 12px; }
.pj .pj-zzz text:nth-child(3) { animation-delay: 2.4s; font-size: 10px; }
/* idle: floats, legs dangle lazily out of step */
.pj.mood-idle .pj-body, .pj.mood-happy .pj-body { animation: pj-float 3.2s ease-in-out infinite; }
.pj.mood-idle .pj-shadow, .pj.mood-happy .pj-shadow { animation: pj-shadow 3.2s ease-in-out infinite; }
.pj.mood-idle .pj-leg-l { animation: pj-dangle-l 3.2s ease-in-out infinite; }
.pj.mood-idle .pj-leg-r { animation: pj-dangle-r 3.2s ease-in-out infinite .4s; }
/* happy: a cheeky kick */
.pj.mood-happy .pj-leg-r { animation: pj-kick 2.4s var(--ease-bounce) .5s 2; }
.pj.mood-happy .pj-leg-l { animation: pj-dangle-l 3.2s ease-in-out infinite; }
/* thinking: bouncing on the spot, legs tucked */
.pj.mood-thinking .pj-body { animation: pj-bounce .58s var(--ease-bounce) infinite alternate; }
.pj.mood-thinking .pj-shadow { animation: pj-shadow-fast .58s ease-in-out infinite alternate; }
.pj.mood-thinking .pj-eyes { animation: pj-look 1.6s ease-in-out infinite; }
.pj.mood-thinking .pj-leg-l { animation: pj-tuck-l .58s ease-in-out infinite alternate; }
.pj.mood-thinking .pj-leg-r { animation: pj-tuck-r .58s ease-in-out infinite alternate; }
/* working: marching along */
.pj.mood-working .pj-body { animation: pj-march-body .5s ease-in-out infinite alternate; }
.pj.mood-working .pj-leg-l { animation: pj-step .5s ease-in-out infinite alternate; }
.pj.mood-working .pj-leg-r { animation: pj-step .5s ease-in-out infinite alternate-reverse; }
.pj.mood-working .pj-bow { animation: pj-string .5s ease-in-out infinite alternate; }
.pj.mood-attention .pj-body { animation: pj-wobble 2.4s ease-in-out infinite; }
.pj.mood-attention .pj-leg-l, .pj.mood-attention .pj-leg-r { animation: pj-knock 2.4s ease-in-out infinite; }
/* one-shots */
.pj.do-hop .pj-body { animation: pj-hop .72s var(--ease-bounce) 1 !important; }
.pj.do-hop .pj-leg-l { animation: pj-splay-l .72s var(--ease-bounce) 1 !important; }
.pj.do-hop .pj-leg-r { animation: pj-splay-r .72s var(--ease-bounce) 1 !important; }
.pj.do-wave .pj-leg-r { animation: pj-kick 1.4s var(--ease-bounce) 1 !important; }
@keyframes pj-dangle-l { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-4deg); } }
@keyframes pj-dangle-r { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }
@keyframes pj-kick { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-34deg); } 40% { transform: rotate(-26deg); } 55% { transform: rotate(-36deg); } 75% { transform: rotate(4deg); } }
@keyframes pj-tuck-l { from { transform: rotate(0) scaleY(1); } to { transform: rotate(10deg) scaleY(.9); } }
@keyframes pj-tuck-r { from { transform: rotate(0) scaleY(1); } to { transform: rotate(-10deg) scaleY(.9); } }
@keyframes pj-step { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
@keyframes pj-march-body { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
@keyframes pj-splay-l { 0%, 100% { transform: none; } 55% { transform: rotate(22deg); } }
@keyframes pj-splay-r { 0%, 100% { transform: none; } 55% { transform: rotate(-22deg); } }
@keyframes pj-knock { 0%, 100% { transform: none; } 30% { transform: rotate(6deg); } 60% { transform: rotate(-6deg); } }
@keyframes pj-string { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes pj-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pj-shadow { 0%, 100% { transform: scale(1); opacity: .12; } 50% { transform: scale(.8); opacity: .07; } }
@keyframes pj-shadow-fast { from { transform: scale(1.05); opacity: .14; } to { transform: scale(.68); opacity: .05; } }
@keyframes pj-bounce { 0% { transform: translateY(0) scale(1.08, .9); } 100% { transform: translateY(-13px) scale(.96, 1.05); } }
@keyframes pj-sway { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-4px); } }
@keyframes pj-pump-l { from { transform: rotate(0); } to { transform: rotate(16deg); } }
@keyframes pj-pump-r { from { transform: rotate(0); } to { transform: rotate(-16deg); } }
@keyframes pj-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-40deg); } 30% { transform: rotate(-18deg); } 45% { transform: rotate(-42deg); } 60% { transform: rotate(-16deg); } 75% { transform: rotate(-30deg); } }
@keyframes pj-hop { 0% { transform: none; } 25% { transform: scale(1.14, .84); } 55% { transform: translateY(-26px) scale(.93, 1.09); } 80% { transform: scale(1.07, .93); } 100% { transform: none; } }
@keyframes pj-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes pj-blink { 0%, 91%, 100% { transform: scaleY(1); } 93.5% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
@keyframes pj-look { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(2px, -3px); } }
@keyframes pj-z { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -16px); } }

/* worker blobs: soft colour, white eyes, a little jelly wobble on hover */
.blob { position: relative; display: inline-block; flex: none; }
.blob svg { width: 100%; height: 100%; display: block; overflow: visible; }
.blob .blob-body { fill: var(--blob); }
.blob .blob-eyes rect { fill: #fff; }
.blob .blob-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: pj-blink 6s infinite; }
.blob svg { transform-origin: 50% 90%; transition: transform .35s var(--ease-bounce); }
:hover > .blob svg, .blob:hover svg { transform: scale(1.08, .94) translateY(-1px); }
.blob .blob-dot { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--faint); border: 2.5px solid var(--side); }
.blob.ready .blob-dot { background: var(--ok); }
.blob.working .blob-dot { background: var(--ok); animation: beat 1.3s infinite; }
.blob.found .blob-dot, .blob.needs_setup .blob-dot { background: var(--warn); }
.blob.error .blob-dot, .blob.blocked .blob-dot { background: var(--bad); }
.blob.working svg { animation: jelly 1s ease-in-out infinite; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.08, .92); } 60% { transform: scale(.95, 1.05); } }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }

/* ================= shell ================= */
.shell { display: grid; grid-template-columns: 300px 1fr; height: 100vh; height: 100dvh; }
.sidebar { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 14px 14px; min-height: 0; }
.side-top { display: flex; justify-content: flex-end; gap: 8px; }
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: transform .3s var(--ease-bounce), background .15s; }
.round:hover { background: var(--hover); transform: scale(1.06); }
.round:active { transform: scale(.92); }
.round.plain { background: none; border-color: transparent; color: var(--muted); }
.round.new .ic { transition: transform .4s var(--ease-bounce); }
.round.new:hover .ic { transform: rotate(90deg); }
.persona { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 22px; cursor: pointer; user-select: none; }
.persona .pj { width: 112px; height: 112px; }
.persona-name { font: 600 15px var(--font-display); color: var(--text); }
.persona-sub { font-size: 12px; color: var(--faint); margin-top: -4px; }
.chats { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; color: var(--text); text-decoration: none; transition: background .15s, transform .3s var(--ease-bounce); animation: rise .38s var(--ease-bounce) both; }
.chat-item:hover { background: var(--hover); }
.chat-item:active { transform: scale(.98); }
.chat-item.active { background: var(--hover); }
.chat-item .pj { width: 42px; height: 42px; flex: none; }
.chat-text { min-width: 0; flex: 1; }
.chat-title { font: 600 15.5px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-prev { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .unread { width: 9px; height: 9px; border-radius: 50%; background: var(--unread); flex: none; }
.side-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.brain { font-size: 12px; color: var(--faint); padding: 0 6px; }
.brain.stub { color: var(--bad); }
.foot-row { display: flex; gap: 8px; align-items: center; }
.pill-btn { flex: 1; white-space: nowrap; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 600 15px var(--font-display); transition: transform .3s var(--ease-bounce), background .15s; }
.pill-btn:hover { background: var(--hover); transform: translateY(-1px); }
.pill-btn:active { transform: scale(.97); }
.pill-btn .stack { display: inline-flex; }
.pill-btn .stack .blob { margin-left: -7px; }
.pill-btn .stack .blob:first-child { margin-left: 0; }
.pill-btn .stack .blob .blob-dot { display: none; }

/* ================= main ================= */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.topbar { position: absolute; top: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.topbar .menu { display: none; position: absolute; left: 12px; pointer-events: auto; }
.title-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; max-width: min(520px, 70%); padding: 8px 22px 8px 10px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line); animation: drop .5s var(--ease-bounce) both; }
.title-pill .pj { width: 34px; height: 34px; flex: none; }
.title { font: 600 16.5px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode { pointer-events: auto; position: absolute; right: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; transition: all .3s; }
.mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mode.on { color: var(--text); box-shadow: var(--shadow); }
.mode.on .mode-dot { background: var(--ok); animation: beat 1.6s ease-in-out infinite; }

/* ================= conversation ================= */
.messages { flex: 1; overflow: auto; padding: 84px 28px 20px; display: flex; flex-direction: column; align-items: center; scrollbar-width: thin; }
.thread { width: min(1040px, 100%); display: flex; flex-direction: column; gap: 18px; }
.daystamp { text-align: center; color: var(--muted); font-size: 14.5px; margin: 10px 0 2px; animation: fade .4s ease both; }
.msg { display: flex; animation: pop .45s var(--ease-bounce) both; transform-origin: 0% 100%; }
.msg .body { overflow-wrap: anywhere; font-size: 17px; line-height: 1.62; }
.msg.pyjama .body, .msg.status .body { background: var(--bubble); padding: 16px 24px; border-radius: 30px; max-width: min(860px, 92%); }
.msg.status .body { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--muted); font-size: 15.5px; }
.msg .who { font-size: 12.5px; color: var(--faint); margin: 0 0 4px 22px; }
.msg .who .stub { color: var(--bad); font-weight: 600; }
.msg .stack { display: flex; flex-direction: column; min-width: 0; }
.msg.user { justify-content: flex-end; transform-origin: 100% 100%; }
.msg.user .body { background: var(--ink); color: var(--ink-text); padding: 16px 26px; border-radius: 30px; max-width: min(760px, 80%); }
.body p { margin: 0 0 12px; } .body p:last-child { margin-bottom: 0; }
.body ul { margin: 4px 0 12px; padding-left: 22px; } .body li { margin: 3px 0; }
.body pre { background: var(--code); border: 1px solid var(--line); padding: 12px 14px; border-radius: 16px; overflow: auto; font: 13.5px/1.5 var(--font-mono); }
.msg.pyjama .body pre { background: var(--panel); }
.body code { background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 6px; border-radius: 6px; font: 14px var(--font-mono); }
.msg.user .body code { background: rgba(255,255,255,.15); }
.body strong { font-weight: 650; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* "<worker> is working" — inline at the end of the thread, with Pajama bouncing beside it */
.working-line { display: flex; align-items: center; gap: 14px; padding: 2px 8px; animation: pop .45s var(--ease-bounce) both; }
.working-line .pj { width: 46px; height: 46px; flex: none; }
.working-line .text { font: 500 18px var(--font-display); background: linear-gradient(90deg, var(--text) 0%, var(--text) 30%, var(--faint) 50%, var(--text) 70%, var(--text) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
.working-line.attention .text { animation: none; background: none; color: var(--warn); }
.working-line .acts { margin-left: auto; display: flex; gap: 6px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13.5px; transition: all .25s var(--ease-bounce); }
.chip-btn:hover { color: var(--text); background: var(--hover); transform: translateY(-1px); }
.chip-btn.danger:hover { color: var(--bad); }
.chip-btn .ic { width: 16px; height: 16px; }

.plan { margin-top: 14px; background: var(--panel); border-radius: 24px; padding: 16px 18px; border: 1px solid var(--line); animation: pop .5s var(--ease-bounce) .1s both; }
.plan h4 { margin: 0 0 12px; font: 650 16px var(--font-display); }
.plan-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-steps li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; animation: rise .4s var(--ease-bounce) both; }
.plan-steps li:nth-child(2) { animation-delay: .07s; } .plan-steps li:nth-child(3) { animation-delay: .14s; } .plan-steps li:nth-child(4) { animation-delay: .21s; } .plan-steps li:nth-child(5) { animation-delay: .28s; }
.level { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text); background: var(--bubble); padding: 3px 10px; border-radius: 999px; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--ink-text); height: 46px; padding: 0 22px 0 10px; border-radius: 999px; font: 650 15px var(--font-display); transition: transform .3s var(--ease-bounce), box-shadow .3s; }
.btn-primary .pj { width: 30px; height: 30px; }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn-primary:active { transform: scale(.95); }

/* ================= first screen ================= */
.main.welcome .messages { justify-content: center; padding-top: 40px; }
.hero { text-align: center; padding: 0 8px 6px; }
.hero .pj { width: clamp(170px, 19vw, 230px); height: clamp(170px, 19vw, 230px); margin: 0 auto 14px; cursor: pointer; animation: arrive .95s var(--ease-bounce) both; }
.hero h1 { font: 700 clamp(26px, 3vw, 36px)/1.2 var(--font-display); letter-spacing: -.6px; margin: 0 auto 14px; max-width: 18em; animation: rise .6s var(--ease-bounce) .2s both; }
.hero p { margin: 0 auto; max-width: 40em; color: var(--muted); font-size: 17px; line-height: 1.7; animation: rise .6s var(--ease-bounce) .32s both; }
.main.welcome .composer-wrap { padding-bottom: 10vh; }
.main.welcome .composer { animation: rise .6s var(--ease-bounce) .45s both; }
@keyframes arrive { 0% { opacity: 0; transform: translateY(50px) scale(.5); } 65% { opacity: 1; transform: translateY(-10px) scale(1.06); } 100% { transform: none; } }

/* ================= composer: big pill, "+" on the left, black round button on the right ================= */
.composer-wrap { padding: 8px 28px 20px; display: flex; flex-direction: column; align-items: center; }
.composer { width: min(1040px, 100%); background: var(--panel); border: 1.5px solid var(--line-strong); border-radius: 40px; padding: 8px 9px 8px 9px; box-shadow: 0 2px 10px rgba(0,0,0,.04); transition: border-color .25s, box-shadow .3s, transform .3s var(--ease-bounce); }
.composer:focus-within { border-color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.composer.bump { animation: bump .45s var(--ease-bounce); }
@keyframes bump { 30% { transform: scale(.985); } 100% { transform: none; } }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
.composer .plus { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--side); color: var(--text); flex: none; transition: transform .35s var(--ease-bounce), background .15s; }
.composer .plus:hover { background: var(--hover); transform: rotate(90deg); }
.composer .plus.set { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.composer .plus.needed { animation: nudge 1.1s var(--ease-bounce) 3; border-color: var(--text); }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px) rotate(-8deg); } 60% { transform: translateX(4px) rotate(8deg); } }
#input { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: 18px/1.5 var(--font-text); max-height: 40vh; padding: 11px 4px; align-self: center; }
#input::placeholder { color: var(--faint); }
.send { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ink-text); flex: none; transition: transform .3s var(--ease-bounce); }
.send .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.send:hover { transform: scale(1.08); }
.send:active { transform: scale(.88); }
.send .bars { display: flex; gap: 3px; align-items: center; height: 22px; }
.send .bars i { width: 3px; border-radius: 3px; background: currentColor; animation: eq 1.1s ease-in-out infinite; }
.send .bars i:nth-child(1) { height: 8px; } .send .bars i:nth-child(2) { height: 16px; animation-delay: .1s; } .send .bars i:nth-child(3) { height: 22px; animation-delay: .2s; } .send .bars i:nth-child(4) { height: 14px; animation-delay: .3s; } .send .bars i:nth-child(5) { height: 9px; animation-delay: .4s; }
@keyframes eq { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.folder { display: flex; gap: 8px; align-items: center; margin: 8px 6px 4px; padding-top: 10px; border-top: 1px solid var(--line); animation: rise .3s ease both; }
.folder .lbl { font-size: 13px; color: var(--muted); white-space: nowrap; }
.folder input { flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--side); color: var(--text); font: 13px var(--font-mono); }
.allow { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 2px 8px 6px; }
.allow input { accent-color: var(--ink); }
.ghost { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--text); border: 1px solid var(--line); background: var(--panel); transition: all .2s var(--ease-bounce); }
.ghost:hover { background: var(--hover); transform: translateY(-1px); }
.hint { width: min(1040px, 100%); font-size: 13px; color: var(--faint); min-height: 18px; padding: 8px 8px 0; text-align: center; }
.hint.error { color: var(--bad); }

/* ================= sheets ================= */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.18); z-index: 9; animation: fade .2s ease both; }
.sheet { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 18px 22px 28px; overflow: auto; z-index: 10; box-shadow: 0 24px 70px rgba(0,0,0,.18); animation: sheet-in .42s var(--ease-bounce) both; }
.sheet.wide { width: min(900px, calc(100% - 20px)); }
@keyframes sheet-in { from { opacity: 0; transform: translateX(48px) scale(.97); } to { opacity: 1; transform: none; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 19px var(--font-display); }
.sheet h3 { margin: 22px 0 8px; font: 650 15px var(--font-display); }
.about-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 6px; }
.about-hero .pj { width: 84px; height: 84px; flex: none; }
.display { font: 700 28px/1.2 var(--font-display) !important; letter-spacing: -.5px; margin: 0 !important; }
.about p { line-height: 1.8; font-size: 16px; }
.about ul { padding-left: 22px; line-height: 1.95; font-size: 16px; }
.about li { animation: rise .4s var(--ease-bounce) both; }
.about li:nth-child(2) { animation-delay: .04s; } .about li:nth-child(3) { animation-delay: .08s; } .about li:nth-child(4) { animation-delay: .12s; } .about li:nth-child(5) { animation-delay: .16s; } .about li:nth-child(6) { animation-delay: .2s; } .about li:nth-child(7) { animation-delay: .24s; } .about li:nth-child(8) { animation-delay: .28s; }
.worker-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.worker { border-radius: 22px; padding: 14px 16px; background: var(--side); animation: pop .4s var(--ease-bounce) both; transition: transform .25s var(--ease-bounce); }
.worker:hover { transform: translateY(-2px); }
.worker:nth-child(2) { animation-delay: .05s; } .worker:nth-child(3) { animation-delay: .1s; } .worker:nth-child(4) { animation-delay: .15s; } .worker:nth-child(5) { animation-delay: .2s; }
.worker .row { display: flex; align-items: center; gap: 12px; }
.worker .row .blob .blob-dot { border-color: var(--side); }
.worker .name { font: 650 16px var(--font-display); flex: 1; display: flex; align-items: center; gap: 8px; }
.worker .name .ic { width: 15px; height: 15px; color: var(--faint); }
.worker .detail { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.worker .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.worker details { font-size: 12px; color: var(--muted); margin-top: 8px; }
.worker details summary { cursor: pointer; }
.worker input { width: 100%; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: 12px var(--font-mono); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state.ready { color: var(--ok); } .state.working { color: var(--ok); } .state.working::before { animation: beat 1.4s infinite; }
.state.found, .state.needs_setup { color: var(--warn); } .state.error, .state.blocked { color: var(--bad); }
.pair { display: block; padding: 12px 14px; background: var(--side); border-radius: 16px; user-select: all; overflow-wrap: anywhere; font: 13px var(--font-mono); }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14.5px; }
.seg { display: inline-flex; background: var(--side); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { padding: 7px 16px; border-radius: 999px; font-size: 13.5px; color: var(--muted); transition: all .25s var(--ease-bounce); }
.seg button.on { background: var(--ink); color: var(--ink-text); }
table.steps { width: 100%; border-collapse: collapse; font-size: 13px; }
table.steps th, table.steps td { text-align: left; border-bottom: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
table.steps th { color: var(--faint); font-weight: 500; }
.tx { border: 1px solid var(--line); border-radius: 16px; margin: 8px 0; padding: 9px 13px; font-size: 13px; }
.tx summary { cursor: pointer; color: var(--muted); }
.tx pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--side); padding: 10px; border-radius: 10px; max-height: 420px; overflow: auto; font: 12.5px/1.5 var(--font-mono); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(310px, 88vw); z-index: 11; transform: translateX(-102%); transition: transform .35s var(--ease-bounce); box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: 10px 0 40px rgba(0,0,0,.18); }
  .topbar .menu { display: grid; }
  .title-pill { max-width: 62%; padding-right: 16px; }
  .mode #modeText { display: none; }
  .mode { right: 10px; padding: 7px; }
  .messages { padding: 76px 14px 16px; }
  .composer-wrap { padding: 6px 10px 12px; }
  .msg.pyjama .body, .msg.status .body { padding: 13px 18px; }
  .msg .body { font-size: 16px; }
  .working-line .acts .lbl { display: none; }
  .hero .pj { width: 150px; height: 150px; }
  .composer .plus { width: 42px; height: 42px; } .send { width: 46px; height: 46px; } #input { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Pajama's face and slippers */
.pj .pj-mouth { stroke: var(--pj-eye); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.pj .pj-slipper ellipse { fill: var(--pj-string); }
.pj .pj-slipper .pj-fluff { fill: #ffd3b0; }
.pj .pj-slipper { transform-box: fill-box; transform-origin: 50% 100%; }
.pj.mood-working .pj-slipper-l { animation: pj-tap .5s ease-in-out infinite alternate; }
.pj.mood-working .pj-slipper-r { animation: pj-tap .5s ease-in-out infinite alternate-reverse; }
.pj.mood-happy .pj-slipper-r, .pj.do-wave .pj-slipper-r { animation: pj-slip-kick 2.4s var(--ease-bounce) .5s 2; }
@keyframes pj-tap { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-4px) rotate(6deg); } }
@keyframes pj-slip-kick { 0%, 100% { transform: none; } 25% { transform: translate(10px, -14px) rotate(-30deg); } 40% { transform: translate(8px, -10px) rotate(-22deg); } 55% { transform: translate(11px, -15px) rotate(-32deg); } 75% { transform: none; } }