/* Chitta live-interface replay (real answers, no backend). Tokens from Chitta shared/styles.css (bright theme). */
.cld{--bg:#17181c;--bg2:#1d1f24;--panel:#24262c;--panel2:#2c2f36;--panel3:#353942;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.16);--line3:rgba(255,255,255,.24);--text:#f7f8fa;--text2:#cccfd6;--muted:#9298a3;--faint:#6b7180;--accent:#ffb866;--accent2:#f08a3c;--accent-soft:rgba(255,184,102,.16);--user:#2d2a24;--user-line:rgba(255,184,102,.22);--ok:#5fd39a;--warn:#f2c35a;--ease:cubic-bezier(.2,.8,.2,1);--cf:"InterV","Inter","Segoe UI Variable Text","Segoe UI",Roboto,"Noto Sans","Nirmala UI",system-ui,sans-serif;--cm:ui-monospace,"Cascadia Code",Consolas,monospace}
.cld-wrap{max-width:1080px;margin:0 auto}
.cld-win{background:var(--bg);color:var(--text);font:14.5px/1.6 var(--cf);letter-spacing:-.006em;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.3);display:flex;flex-direction:column;height:min(640px,82vh);text-align:left;position:relative}
.cld-win *{box-sizing:border-box}
.cld-top{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.cld-mark{width:22px;height:22px;border-radius:7px;flex:none;background:radial-gradient(circle,var(--bg) 0 27%,transparent 28%),conic-gradient(from 200deg,#f7c77f,#e07b39,#b8452a,#f2a65a,#f7c77f)}
.cld-name{font-weight:650;font-size:14px}.cld-tag{font-size:10px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.cld-title{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2)}
.cld-prana{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel);border-radius:10px;padding:3px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.cld-prana b{font-weight:650}.cld-prana i{font-style:normal;color:var(--muted);border-left:1px solid var(--line2);padding-left:7px}
.cld-prana .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.cld-prana.busy .dot{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:cldp 1.2s infinite}
.cld-prana.low .dot{background:var(--warn)}
@keyframes cldp{50%{opacity:.35}}
.cld-wc{display:flex;color:var(--muted)}.cld-wc span{width:34px;text-align:center;font-size:13px}
.cld-feed{flex:1;overflow-y:auto;padding:18px 20px 8px;scroll-behavior:smooth}
.cld-col{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.cld-day{text-align:center;font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.cld-empty{text-align:center;color:var(--muted);padding:30px 10px}.cld-empty h3{color:var(--text);font-size:20px;margin:10px 0 4px;font-weight:620}
.cld-empty .cld-mark{width:44px;height:44px;border-radius:14px;margin:0 auto}
.cld-msg{display:flex;gap:12px;animation:cldin 280ms var(--ease) both}
@keyframes cldin{from{opacity:0;transform:translateY(6px)}}
.cld-msg.u{flex-direction:row-reverse}
.cld-msg .c{display:flex;flex-direction:column;min-width:0;flex:1}.cld-msg.u .c{align-items:flex-end;flex:0 1 auto;max-width:min(78%,600px)}
.cld-av{width:30px;height:30px;flex:none;border-radius:10px;margin-top:22px;background:radial-gradient(circle,var(--bg) 0 27%,transparent 28%),conic-gradient(from 200deg,#f7c77f,#e07b39,#b8452a,#f2a65a,#f7c77f);box-shadow:0 4px 14px rgba(224,123,57,.25)}
.cld-msg.busy .cld-av{animation:cldspin 2.4s linear infinite}@keyframes cldspin{to{transform:rotate(360deg)}}
.cld-uav{width:30px;height:30px;flex:none;border-radius:50%;margin-top:22px;background:linear-gradient(135deg,#f7c77f,#e07b39);color:#1a1205;font:700 11px/30px var(--cf);text-align:center}
.cld-head{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin:0 4px 5px}.cld-head b{color:var(--text);font-size:13px;font-weight:600}
.cld-b{min-width:0;max-width:100%}
.cld-msg.u .cld-b{background:var(--user);border:1px solid var(--user-line);padding:9px 15px;border-radius:22px 22px 6px 22px;white-space:pre-wrap;overflow-wrap:anywhere}
.cld-msg.a .cld-b{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:6px 22px 22px 22px;padding:13px 17px;overflow-wrap:anywhere}
.cld-b p{margin:0 0 .7em}.cld-b p:last-child{margin-bottom:0}.cld-b h1,.cld-b h2,.cld-b h3{font-size:16px;margin:0 0 .5em;font-weight:650}
.cld-b ul{margin:0 0 .7em;padding-left:20px}.cld-b hr{border:0;border-top:1px solid var(--line2);margin:12px 0}
.cld-b a{color:var(--accent);text-decoration:none}.cld-b a sup{font-size:10px}
.cld-b code{font:12.5px var(--cm);background:var(--panel2);border-radius:6px;padding:1px 5px}
.cld-b em{color:var(--text2)}
.cld-b img{display:block;width:100%;max-width:360px;border-radius:14px;margin:0 0 10px;border:1px solid var(--line)}
.cld-dots{display:inline-flex;gap:5px;padding:4px 0}.cld-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:cldp 1s infinite}.cld-dots i:nth-child(2){animation-delay:.2s}.cld-dots i:nth-child(3){animation-delay:.4s}
.cld-stage{font-size:12.5px;color:var(--muted);margin-left:8px}
.cld-sys{margin-top:8px;font-size:12px;color:var(--muted)}
.cld-sys summary{cursor:pointer;list-style:none;display:inline-flex;gap:6px;align-items:center;user-select:none}.cld-sys summary::-webkit-details-marker{display:none}
.cld-sys summary::before{content:"›";display:inline-block;transition:transform .18s;font-size:14px}.cld-sys[open] summary::before{transform:rotate(90deg)}
.cld-sys ul{margin:6px 0 0;padding:8px 12px 8px 26px;border-left:2px solid var(--line2);background:rgba(0,0,0,.18);border-radius:0 10px 10px 0}
.cld-foot{display:flex;gap:12px;align-items:center;margin:7px 4px 0;font-size:11.5px;color:var(--faint)}.cld-foot .sp{flex:1}.cld-foot .t{border:1px solid var(--line2);border-radius:999px;padding:0 8px}
.cld-cw{padding:6px 16px 10px;flex:none}
.cld-chips{max-width:760px;margin:0 auto 8px;display:flex;gap:6px;flex-wrap:wrap}
.cld-chips button{font:500 12.5px var(--cf);color:var(--text2);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer}
.cld-chips button:hover,.cld-chips button:focus-visible{border-color:var(--accent);color:var(--text);outline:0}
.cld-comp{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:28px;padding:6px 8px 6px 16px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.cld-comp:focus-within{border-color:var(--line3);box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 0 4px rgba(242,166,90,.06)}
.cld-comp input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font:15px/1.5 var(--cf);padding:8px 2px 6px}
.cld-comp input::placeholder{color:var(--faint)}
.cld-row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cld-pill{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:999px;padding:3px}
.cld-pill button{font:540 12.5px var(--cf);color:var(--muted);background:none;border:0;padding:4px 12px;border-radius:999px;cursor:pointer;transition:all .18s var(--ease)}
.cld-pill button.on{background:var(--panel3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cld-send{width:34px;height:34px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a1205;font-size:16px;cursor:pointer;flex:none}
.cld-send:disabled{opacity:.4;cursor:default}
.cld-note{max-width:760px;margin:6px auto 0;text-align:center;font-size:11px;color:var(--faint)}
.cld-cap{text-align:center;color:var(--muted,#9aa);font-size:13px;margin:12px auto 0;max-width:760px}
@media (max-width:640px){.cld-win{height:78vh;border-radius:12px}.cld-tag,.cld-wc,.cld-title{display:none}.cld-top{justify-content:space-between}.cld-feed{padding:14px 10px 6px}.cld-av,.cld-uav{display:none}.cld-msg.u .c{max-width:90%}.cld-pill button{padding:4px 9px}}
@media (prefers-reduced-motion:reduce){.cld *{animation:none!important;transition:none!important}}