:root{
  color-scheme:dark;
  --bg:#0b0c10; --card:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --text:#ecebe7; --soft:#c3c5ce; --mute:#8d909c; --accent:#b8c4ff;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --sans:'Figtree',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;
  --brand:'Chakra Petch','Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lock,html.lock body{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(184,196,255,.3)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.hide{display:none !important}

/* fondo */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:64vw;height:64vw;left:-18vw;top:-22vw;background:radial-gradient(circle,rgba(74,91,216,.5),transparent 66%)}
.aurora i:nth-child(2){width:56vw;height:56vw;right:-16vw;top:12vh;background:radial-gradient(circle,rgba(154,75,120,.45),transparent 66%)}
.aurora i:nth-child(3){width:60vw;height:60vw;left:18vw;bottom:-32vw;background:radial-gradient(circle,rgba(42,133,134,.45),transparent 66%)}
.grain{position:fixed;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* logos de las IA */
.lg{display:inline-grid;place-items:center;width:18px;height:18px;flex:none}
.lg svg{width:100%;height:100%;overflow:visible}

/* botones y campos */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:500;transition:background .3s,transform .2s}
.btn[hidden]{display:none}
.wnb{white-space:nowrap}
.btn:hover{background:#fff}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.sm{padding:8px 16px;font-size:14px}
.btn[disabled]{opacity:.5;pointer-events:none}
.lnk{font-size:14px;color:var(--soft);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px;padding:4px 2px}
.field{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.25);transition:border-color .3s,background .3s}
.field:focus-within{border-color:rgba(184,196,255,.55);background:rgba(0,0,0,.4)}
.field input,.field textarea{flex:1;min-width:0;background:none;border:0;outline:0;padding:13px 14px;font-size:14.5px}
.field textarea{resize:none}
.field ::placeholder{color:#656875}
.send{flex:none;width:46px;height:46px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;transition:transform .2s,background .3s,opacity .3s}
.send:hover{background:#fff}
.send:active{transform:scale(.92)}
.send[disabled]{opacity:.35;pointer-events:none}
.send svg{width:20px;height:20px}
.seg{position:relative;display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;color:var(--mute);font-size:14px;white-space:nowrap;transition:color .3s}
.seg button[aria-selected=true]{color:var(--text)}
.seg .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:rgba(255,255,255,.1);transition:transform .55s var(--ease),width .55s var(--ease)}
.seg .lg{width:16px;height:16px;opacity:.4;transition:opacity .3s}
.seg button.has .lg{opacity:1}

/* escritura suave, letra por letra, con cursor de código */
[data-typed]{position:relative}
.tc{opacity:0;color:var(--accent);transition:opacity .55s ease,color 1.2s ease}
.tc.on{opacity:1;color:inherit}
.tw{white-space:nowrap}
[data-typed] li,[data-typed] pre,[data-typed] h4{transition:opacity .5s ease}
[data-typed] li:not(.sh),[data-typed] pre:not(.sh),[data-typed] h4:not(.sh){opacity:0}
.tcaret{position:absolute;left:0;top:0;width:2px;height:1em;border-radius:2px;background:var(--accent);box-shadow:0 0 10px 1px rgba(184,196,255,.7);pointer-events:none;opacity:0;transition:opacity .5s ease}
.tcaret.on{opacity:1}
.tcaret.idle{animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;z-index:9800;padding:12px 20px;border-radius:999px;width:max-content;box-sizing:border-box;background:rgba(236,235,231,.96);color:#0b0c10;font-size:14px;transition:all .5s var(--ease);pointer-events:none;max-width:min(90vw,560px);text-align:center}
@media (max-width:560px){#toast{border-radius:20px;max-width:calc(100vw - 32px);padding:11px 16px;line-height:1.4}}
#toast.show{opacity:1;transform:translate(-50%,0)}
.corner{position:fixed;right:12px;bottom:12px;width:15px;height:15px;z-index:40;opacity:.55;pointer-events:none;transition:opacity .8s}
.corner svg{width:100%;height:100%;display:block}
.corner{pointer-events:auto;transition:opacity .8s,transform .6s cubic-bezier(.2,.9,.3,1)}.corner:hover{opacity:1;transform:rotate(90deg) scale(1.5)}

/* ---------- cursor: flecha con viento, vidrio legible y etiqueta nítida ---------- */
.cursor-on,.cursor-on *{cursor:none !important}
#cd,#cr,#cl{position:fixed;left:0;top:0;pointer-events:none}
#cd{width:0;height:0;z-index:10001;opacity:0;transition:opacity .3s}
#ca{position:absolute;left:-2.5px;top:-2.2px;width:22px;height:30px;overflow:visible;transform-origin:2.5px 2.2px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
#cr{z-index:9998;opacity:0;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.1);backdrop-filter:blur(6px) saturate(1.6) brightness(1.12);-webkit-backdrop-filter:blur(6px) saturate(1.6) brightness(1.12);box-shadow:0 10px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.28);transition:opacity .3s,background .3s,border-color .3s}
#cl{z-index:9999;opacity:0;transition:opacity .25s}
.cursor-on #cd{opacity:1}
.cursor-on #cr.link,.cursor-on #cr.txt{opacity:1}
#cs{position:absolute;left:-9px;top:-9px;width:18px;height:18px;opacity:0;pointer-events:none}
#cs svg{width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(184,196,255,.85))}
.cursor-hide #cd,.cursor-hide #cr,.cursor-hide #cl{opacity:0 !important}
#cr.txt{background:rgba(255,255,255,.92);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.cur-hov{color:transparent !important;text-decoration-color:transparent !important}
.cur-hov:not(select)>*{visibility:hidden}
.rip{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);pointer-events:none;z-index:9990}

/* logotipo SymphorIA */
.word{display:inline-flex;align-items:center;font-family:var(--serif);font-size:28px;line-height:1;letter-spacing:-.02em}
.zb{width:.8em;height:.8em;margin-left:.08em;overflow:visible;flex:none}

html,body{height:100%;overflow:hidden}
:root{--c:#b8c4ff}
.glow{position:fixed;z-index:-1;right:-12vw;top:-22vh;width:62vw;height:62vw;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--c),transparent 62%);opacity:.14;transition:opacity .6s}
.glow.swap{opacity:0}

/* entrada: continúa la expansión que empezó en la página principal */
#veil{position:fixed;inset:0;z-index:300;pointer-events:none;background:#0b0c10;opacity:0;transition:opacity 1.1s ease .05s}
#veil::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,var(--c),transparent 70%);opacity:.18}
html.enter:not(.go) #veil{opacity:1;transition:none}
.side,.top,.composer,.msgs{transition:opacity 1s var(--ease) var(--td,0s),translate 1.1s var(--ease) var(--td,0s)}
html.enter:not(.go) .side{opacity:0;translate:-28px 0}
html.enter:not(.go) .top{opacity:0;translate:0 -18px;--td:.12s}
html.enter:not(.go) .msgs{opacity:0;--td:.2s}
html.enter:not(.go) .composer{opacity:0;translate:0 26px;--td:.3s}
html.bye body{opacity:0;transition:opacity .4s ease}

.shell{display:grid;grid-template-columns:minmax(310px,370px) minmax(0,1fr);height:100vh;height:100dvh}

/* ---------- panel de modelos ---------- */
.side{display:flex;flex-direction:column;gap:12px;padding:20px 16px 14px;border-right:1px solid var(--line);background:rgba(11,12,16,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);min-height:0;position:relative;z-index:5}
.side-head{display:flex;align-items:center;justify-content:space-between}
.back{display:inline-flex;align-items:center;gap:12px;padding:4px 6px;margin-left:-6px;border-radius:12px;color:var(--soft)}
.back svg.arr{width:18px;height:18px;transition:transform .5s var(--ease)}
.back:hover svg.arr{transform:translateX(-4px)}
.back .word{font-size:26px;color:var(--text)}
.x-close{display:none;width:36px;height:36px;border-radius:50%;place-items:center;color:var(--soft)}
.x-close svg{width:20px;height:20px}
.mode .seg{width:100%}
.mode .seg button{flex:1;justify-content:center}

.live{display:flex;align-items:center;gap:9px;padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-family:var(--mono);font-size:12px;color:var(--mute)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#5b5e6b;flex:none}
.live[data-s=live] .live-dot{background:#7fd6b8;animation:ping 2.2s infinite}
.live[data-s=loading] .live-dot{background:#f2b36b;animation:blink2 .9s ease-in-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(127,214,184,.55)}70%,100%{box-shadow:0 0 0 9px rgba(127,214,184,0)}}
@keyframes blink2{50%{opacity:.35}}
.live b{color:var(--soft);font-weight:500}
.live .sp{flex:1}
.refresh{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--mute)}
.refresh svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.refresh:hover{color:var(--text)}
.refresh:hover svg{transform:rotate(120deg)}
.live[data-s=loading] .refresh svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.search{position:relative;padding-left:12px}
.search>svg{width:16px;height:16px;color:var(--mute);flex:none}
.search input{padding:11px 10px !important}
.search kbd{font-family:var(--mono);font-size:11px;color:var(--mute);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;margin-right:10px;transition:opacity .3s}
.search:focus-within kbd,.search.has kbd{display:none}
.qx{display:none;width:30px;height:30px;margin-right:4px;border-radius:50%;place-items:center;color:var(--mute)}
.qx svg{width:14px;height:14px}
.search.has .qx{display:grid}

.filters{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--mute);transition:color .3s,background .3s,border-color .3s}
.fchip:hover{color:var(--soft)}
.fchip[aria-pressed=true]{color:var(--text);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.fchip svg{width:13px;height:13px}
.fchip[data-k=fav][aria-pressed=true] svg{fill:#f2c46b;stroke:#f2c46b}

.sortrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.sortrow b{color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums}
.seg.mini{padding:3px}
.seg.mini button{padding:5px 10px;font-size:11.5px;font-family:var(--mono)}
.seg.mini .pill{top:3px;bottom:3px}

.mlist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:6px 6px 14px 0;margin-right:-8px;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 26px),transparent)}
.mlist::-webkit-scrollbar{width:8px}
.mlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}

.mi{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 8px 10px 12px;border:1px solid transparent;border-radius:16px;text-align:left;transition:background .3s,border-color .3s,box-shadow .4s}
.mi:hover{background:rgba(255,255,255,.04)}
.mi.sel,.mi.on{background:rgba(255,255,255,.07);border-color:var(--line);box-shadow:0 0 30px -14px var(--vc)}
.mi.sel::before{content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--vc);box-shadow:0 0 12px var(--vc)}
.mi.in{animation:mi-in .55s var(--ease) both;animation-delay:calc(var(--i) * 24ms)}
@keyframes mi-in{from{opacity:0;transform:translateX(-16px)}}
.mi-name{font-family:var(--serif);font-size:19.5px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-name mark{background:none;color:var(--vc);text-shadow:0 0 14px var(--vc)}
.mi-sub{display:flex;align-items:center;gap:6px;margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden}
.mi-sub .dotsep{opacity:.5}
.tg{font-style:normal;padding:1px 7px;border-radius:999px;border:1px solid var(--line);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.tg.free{color:#7fd6b8;border-color:rgba(127,214,184,.35);background:rgba(127,214,184,.08)}
.tg.paid{color:#f2b36b;border-color:rgba(242,179,107,.35);background:rgba(242,179,107,.08)}
.tg.new{color:#0b0c10;border-color:transparent;background:linear-gradient(90deg,#8fb0ff,var(--wine),var(--gold),#8fb0ff);background-size:200% 100%;animation:sheen 3s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

.av{position:relative;flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-size:22px;line-height:1;color:#0b0c10;background:linear-gradient(140deg,var(--vc),color-mix(in srgb,var(--vc) 50%,#fff))}
.av.xs{width:20px;height:20px;border-radius:7px;font-size:13px}
.av.big{width:50px;height:50px;border-radius:16px;font-size:30px;animation:avpop .7s var(--ease) both}
@keyframes avpop{from{transform:scale(.6) rotate(-8deg);opacity:0}}
.av .n{position:absolute;right:-6px;top:-6px;width:19px;height:19px;border-radius:50%;background:var(--text);color:var(--bg);font:600 11px var(--mono);display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--ease)}
.mi.on .av .n{transform:scale(1)}
.mi.busy .av{animation:busyav 1.1s ease-in-out infinite}
@keyframes busyav{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--vc) 30%,transparent)}}

.star{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--mute);opacity:.45;transition:opacity .3s,color .3s}
.star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mi:hover .star{opacity:1}
.mi.fav .star{opacity:1;color:#f2c46b}
.mi.fav .star svg{fill:#f2c46b}
.star.pop svg{animation:starpop .55s var(--ease)}
@keyframes starpop{35%{transform:scale(1.6) rotate(18deg)}}

.msk{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 12px}
.msk i{display:block;border-radius:12px;width:38px;height:38px}
.msk div{display:flex;flex-direction:column;gap:8px}
.msk b{display:block;height:11px;border-radius:6px}
.msk i,.msk b{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.14),rgba(255,255,255,.05));background-size:200% 100%;animation:shimmer 1.4s infinite linear}
.msk b:nth-child(2){width:55%}
.mnone{margin:auto;text-align:center;padding:34px 18px;color:var(--mute);font-size:13.5px}
.mnone h4{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--soft);margin-bottom:6px}
.mnone .btn{margin-top:14px}
.mwarn{padding:10px 12px;border:1px solid rgba(242,179,107,.3);background:rgba(242,179,107,.07);border-radius:12px;font-size:12.5px;color:#f2c9a0;margin-bottom:4px}

.side-foot{font-family:var(--mono);font-size:12px;color:var(--mute);line-height:1.7;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.side-foot b{color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums}
.side-done{display:none}

/* ---------- zona principal ---------- */
.main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);min-height:86px}
.menu{display:none;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--soft);flex:none}
.menu svg{width:16px;height:16px}
.title{display:flex;align-items:center;gap:14px;min-width:0}
.t-main{min-width:0}
.title h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.02;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(44vw,560px)}
.t-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--mute);flex-wrap:wrap}
.t-desc{margin-top:6px;font-size:12.5px;color:var(--mute);max-width:62ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-family:var(--sans);font-size:12.5px;color:var(--soft);animation:chipin .5s var(--ease) both}
.cchip .rm{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.cchip .rm svg{width:11px;height:11px}
.cchip .rm:hover{color:var(--text)}
.now{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none}
.now-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--soft);animation:chipin .5s var(--ease) both}
.now-chip.live{border-color:color-mix(in srgb,var(--vc) 55%,transparent);box-shadow:0 0 22px -6px var(--vc)}
.now-chip b{font-weight:500;color:var(--text);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-chip em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mute)}
.now-chip.idle{color:var(--mute);font-family:var(--mono);font-size:12px;padding:7px 14px 7px 11px;gap:8px}
.now-chip .nd{width:7px;height:7px;border-radius:50%;flex:none;background:#7fd6b8;box-shadow:0 0 10px #7fd6b8}
.now-chip.off .nd{background:#ff8f7a;box-shadow:0 0 10px #ff8f7a}
.now-chip.warn .nd,.now-chip.wait .nd{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.now-chip.wait .nd{animation:blink2 1s ease-in-out infinite}
.now-chip.off{color:#ffb3a7;border-color:rgba(255,143,122,.4)}
button.now-chip{cursor:pointer}
.now.many .now-chip em{display:none}
.now.many .now-chip{padding:6px 11px 6px 6px;gap:8px}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--vc,var(--c));animation:bounce 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes chipin{from{opacity:0;transform:translateY(-6px) scale(.96)}}

.msgs{flex:1;min-height:0;overflow-y:auto;padding:30px clamp(16px,4vw,48px) 20px;overscroll-behavior:contain}
.msgs::-webkit-scrollbar{width:8px}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.lane{width:min(100%,840px);margin:0 auto;display:flex;flex-direction:column;gap:26px;min-height:100%}
.empty{margin:auto;text-align:center;color:var(--mute);max-width:46ch;padding:40px 0}
.empty .av{width:84px;height:84px;border-radius:26px;font-size:50px;margin:0 auto 22px;animation:avpop .8s var(--ease) both}
.empty .av::after{content:"";position:absolute;inset:-10px;border-radius:34px;border:1px solid var(--vc);opacity:0;animation:ring 2.8s ease-out infinite}
@keyframes ring{from{transform:scale(.9);opacity:.55}to{transform:scale(1.4);opacity:0}}
.empty h4{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);color:var(--soft);line-height:1.05;margin-bottom:10px}
.empty p{font-size:14.5px}
.empty .btn{margin-top:18px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.sugg button{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13.5px;color:var(--soft);transition:background .3s,color .3s,border-color .3s;animation:chipin .6s var(--ease) both;animation-delay:calc(var(--i) * 90ms + 300ms)}
.sugg button:hover{background:rgba(255,255,255,.08);color:var(--text)}

.m{animation:pop .6s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}}
.m.user{align-self:flex-end;max-width:min(82%,640px)}
.m.user .who{justify-content:flex-end}
.m.user .bub{background:rgba(255,255,255,.09);padding:12px 18px;border-radius:22px 22px 6px 22px;white-space:pre-wrap;word-break:break-word}
.who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--mute);margin-bottom:8px;flex-wrap:wrap}
.who b{color:var(--soft);font-weight:500}
.who .md::before{content:"▸ ";opacity:.6}
.who .wr{display:none;align-items:center;gap:7px;color:var(--vc)}
.who .tk{font-variant-numeric:tabular-nums}
.m.writing .who .wr{display:inline-flex}
.m.writing .who .md{display:none}
.m.bot{position:relative;padding:2px 0 2px 18px;max-width:100%;--vc:var(--c)}
.m.bot::before{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--p,1) * 100%);border-radius:2px;background:var(--c);box-shadow:0 0 12px -1px var(--c)}
.m.bot .body{line-height:1.7}
.body p{margin:0 0 .75em}
.body p:last-child{margin:0}
.body ul,.body ol{padding-left:1.3em;margin:0 0 .75em}
.body h4{font-weight:600;margin:.9em 0 .3em}
.body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.body code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.08);padding:.12em .4em;border-radius:6px}
.body pre{position:relative;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:14px;padding:16px;overflow-x:auto;margin:.6em 0 .9em;font-family:var(--mono);font-size:13.5px;line-height:1.65}
.body pre code{background:none;padding:0;font-size:inherit}
.cnv{position:relative;margin:.7em 0 1em;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(0,0,0,.38)}
.cnv pre code{background:none !important;padding:0 !important;border:0 !important;box-shadow:none !important}
.cnv>pre{margin:0 !important;border:0 !important;border-radius:0 0 16px 16px !important;background:none !important}
.cnv-h{position:sticky;top:6px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:16px 16px 0 0;background:rgba(20,19,25,.88);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.cnv-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.cnv-t b{font:500 12.5px var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnv-t small{font:11px var(--mono);color:var(--mute);white-space:nowrap}
.cnv-b{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--soft,#cfd0d6);font:12px var(--sans,inherit);transition:background .2s,border-color .2s,color .2s}
.cnv-b svg{width:14px;height:14px}
.cnv-b:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--gold-rgb),.4);color:var(--text)}
.cnv-b.ok{color:#7fd6b8;border-color:rgba(127,214,184,.45)}
.cnv-b.ic{padding:5px 7px;font-size:16px;line-height:1}
@media (max-width:600px){.cnv-b span{display:none}.cnv-b{padding:6px 8px}.cnv-t small{display:none}}
.cnvfull{display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .3s}
.cnvfull.on{opacity:1}
.cnv.big{width:min(1100px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:rgba(14,13,18,.97);overflow:hidden}
.cnv.big .cnv-h{position:static}
.cnv.big pre{flex:1;overflow:auto;padding:18px;font:13.5px/1.6 var(--mono);white-space:pre}
/* «Copiar» de toda la respuesta: se queda a la vista abajo mientras ves esa respuesta */
.m.bot .acts{position:sticky;bottom:8px;z-index:2;width:max-content;max-width:100%;padding:4px;border-radius:14px;background:rgba(14,13,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cpc{position:absolute;right:8px;top:8px;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(11,12,16,.8);font-family:var(--mono);font-size:11px;color:var(--mute);opacity:0;transition:opacity .3s,color .3s}
.body pre:hover .cpc,.cpc:focus-visible{opacity:1}
.cpc.ok{color:#7fd6b8;border-color:rgba(127,214,184,.4)}
.m .meta{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.acts{display:flex;gap:6px;margin-top:8px;opacity:0;transition:opacity .35s}
.m:hover .acts,.acts:focus-within,.m.last .acts{opacity:1}
.act{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--mute);transition:color .3s,border-color .3s,background .3s}
.act:hover{color:var(--text);background:rgba(255,255,255,.05)}
.act svg{width:13px;height:13px}
.act.ok{color:#7fd6b8;border-color:rgba(127,214,184,.4)}
.m.err{align-self:center;color:#ffb3a7;background:rgba(255,120,100,.08);border:1px solid rgba(255,120,100,.25);padding:10px 16px;border-radius:14px;font-size:14px;text-align:center;max-width:min(90%,560px)}
.think{display:flex;flex-direction:column;gap:8px;padding:6px 0}
.skel{height:10px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.16),rgba(255,255,255,.05));background-size:200% 100%;animation:shimmer 1.4s infinite linear}
.skel:nth-child(1){width:88%}.skel:nth-child(2){width:72%}.skel:nth-child(3){width:46%}
@keyframes shimmer{to{background-position:-200% 0}}
.stat{font-family:var(--mono);font-size:12px;color:var(--mute);display:inline-flex;align-items:center;gap:8px}

/* comparar */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cmp-card{border:1px solid var(--line);border-radius:20px;padding:18px;background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:12px;min-height:150px;animation:pop .7s var(--ease) both;position:relative;overflow:hidden;--vc:var(--c)}
.cmp-card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:0;transition:opacity .4s}
.cmp-card.live::before{opacity:1}
.cmp-card.fast{border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 0 36px -14px var(--c)}
.cmp-card .who{margin:0}
.cmp-card .who .stat{margin-left:auto}
.cmp-card .body{font-size:14.5px;color:var(--soft);line-height:1.65}
.cmp-card .meta{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmp-card .acts{opacity:1;margin:0}
.badge-fast{display:none;align-items:center;gap:5px;color:#0b0c10;background:var(--c);padding:1px 9px;border-radius:999px;font-weight:600;font-size:10.5px;letter-spacing:.03em;animation:avpop .6s var(--ease) both}
.cmp-card.fast .badge-fast{display:inline-flex}

.tobottom{position:absolute;right:clamp(16px,4vw,48px);bottom:112px;z-index:6;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(236,235,231,.95);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.tobottom.show{opacity:1;transform:none;pointer-events:auto}
.tobottom svg{width:18px;height:18px}


/* v1.9 · archivos de la IA: tarjeta + lienzo con código y vista previa */
.fcard{display:flex;align-items:center;gap:8px;margin:.7em 0 1em;padding:8px 8px 8px 8px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));max-width:560px;transition:border-color .25s,background .25s}
.fcard:hover{border-color:rgba(var(--gold-rgb),.4);background:linear-gradient(160deg,rgba(var(--gold-rgb),.07),rgba(255,255,255,.02))}
.fc-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:2px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left}
.fc-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;font:700 10.5px var(--mono);letter-spacing:.04em;color:#1a1408;background:linear-gradient(150deg,#ffd9a0,var(--gold) 55%,var(--wine))}
.fcard[data-ext="css"] .fc-ic,.cvp-h .fc-ic.css{background:linear-gradient(150deg,#b8d4ff,#6f9cff)}
.fcard[data-ext="js"] .fc-ic,.fcard[data-ext="ts"] .fc-ic{background:linear-gradient(150deg,#fff3a6,#f0c94a)}
.fcard[data-ext="py"] .fc-ic{background:linear-gradient(150deg,#a6e3ff,#4fa3d9)}
.fcard[data-ext="md"] .fc-ic,.fcard[data-ext="txt"] .fc-ic{background:linear-gradient(150deg,#e9e7e2,#a9a6a0)}
.fc-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.fc-t b{font:500 13.5px var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-t small{font:11.5px var(--sans,inherit);color:var(--mute)}
.fcard .cnv-b{flex:none}
@media (max-width:600px){.fcard{flex-wrap:wrap}.fc-main{flex-basis:100%}.fcard .cnv-b{flex:1;justify-content:center}.fcard .cnv-b span{display:inline}}
.cnv.mini{position:relative}
.cnv.mini .cnv-cp{position:absolute;top:8px;right:8px;z-index:2;opacity:.75}
.cnv.mini:hover .cnv-cp{opacity:1}
.cnv.mini>pre{border-radius:16px !important;padding-right:96px !important}
.cvp{position:fixed;inset:0;z-index:420;display:flex;justify-content:flex-end;background:rgba(5,6,10,0);transition:background .35s ease}
.cvp.on{background:rgba(5,6,10,.45)}
.cvp-in{width:min(820px,52vw);height:100%;display:flex;flex-direction:column;background:#110f15;border-left:1px solid rgba(255,255,255,.12);box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cvp.on .cvp-in{transform:none}
.cvp-h{display:flex;align-items:center;gap:8px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.cvp-h .fc-ic{width:36px;height:36px;border-radius:10px}
.cvp-tabs{display:flex;gap:4px;margin:10px 14px 0;padding:4px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.1));align-self:flex-start}
.cvp-tabs button{padding:6px 14px;border-radius:999px;border:0;background:none;color:var(--mute);font:inherit;font-size:13px}
.cvp-tabs button[aria-selected="true"]{background:rgba(255,255,255,.1);color:var(--text)}
.cvp-b{flex:1;min-height:0;display:flex;padding:12px 14px 14px}
.cvp-code{flex:1;margin:0;overflow:auto;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);font:13px/1.65 var(--mono);white-space:pre;color:#e8e6e1;counter-reset:ln}
.cvp-prev{flex:1;display:flex;border-radius:14px;overflow:hidden;background:#fff}
.cvp-prev iframe{flex:1;width:100%;border:0;background:#fff}
.cvp-prev .cvp-md{flex:1;overflow:auto;padding:22px 26px;background:#141318;color:var(--text)}
@media (max-width:899px){.cvp-in{width:100%;border-left:0;background:#100f14}.cvp-h{padding-top:calc(12px + env(safe-area-inset-top))}.cvp-h .cnv-b span{display:none}}
html.noanim .cvp,html.noanim .cvp-in{transition-duration:.01s}
.cvp-prev[hidden],.cvp-code[hidden]{display:none !important}
body.canvasing #szBot,body.canvasing #szBotB,body.canvasing .bbeta,body.canvasing .bb{visibility:hidden}
.fname-h{display:none}
/* v2.0 · crear imágenes */
.imgb[aria-pressed="true"]{color:#f3d79e;background:rgba(var(--gold-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.45)}
body.imaging .comp-in,body.imaging .composer .field{box-shadow:0 0 0 1px rgba(143,176,255,.5),0 0 40px -12px rgba(143,176,255,.5)}
.szimg{margin:0;display:flex;flex-direction:column;gap:8px;max-width:520px}
.szimg-f{min-height:120px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.szimg-f img{display:block;width:100%;height:auto}
.szimg figcaption{font-size:13px;color:var(--mute)}
.szimg-b{display:flex;gap:8px}
.szimg-no{margin:0;padding:18px;color:var(--mute);font-size:13.5px}
.imgbig{display:grid;place-items:center;padding:20px;background:rgba(5,6,10,.9);opacity:0;transition:opacity .3s}
.imgbig.on{opacity:1}
.imgbig img{max-width:96vw;max-height:92vh;border-radius:14px}
/* v2.0 · voz */
.act[data-a="voice"].on{color:#f3d79e;border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.1)}
.act[data-a="voice"].on svg{animation:vozPulse 1s ease-in-out infinite}
@keyframes vozPulse{50%{transform:scale(1.15)}}

/* en el celular, la barrita de cada respuesta va solo con íconos (cabe entera y no tapa el texto) */
@media (max-width:600px){.m.bot .acts .act{font-size:0;gap:0;padding:8px 10px}.m.bot .acts .act svg{width:17px;height:17px}.m.bot .acts .act span{display:none}}
/* v2.1 · presentaciones */
.fcard.deck .fc-ic{background:linear-gradient(150deg,#ffb38a,#d24726)}
.cvp-b.deckv{flex-direction:column;gap:16px;overflow:auto}
.slw{flex:none}
.sl{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0c10;border:1px solid rgba(255,255,255,.1);padding:5% 6%;container-type:inline-size}
.sl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1%;background:var(--gold)}
.sl-t::before{width:auto;right:0;bottom:auto;height:1.6%;background:var(--wine)}
.sl h2{margin:14% 0 0;font:400 6.2cqw/1.08 Georgia,serif;color:#ecebe7}
.sl-t .sl-bar{display:block;width:12%;height:1.2%;margin:3% 0;background:var(--gold)}
.sl-t p{margin:0;font-size:3cqw;color:#c9c8c3}
.sl-t small{position:absolute;left:6%;bottom:5%;font-size:1.7cqw;color:#8d8c88}
.sl h3{margin:0;font:400 4.4cqw/1.1 Georgia,serif;color:#ecebe7}
.sl .sl-bar{display:block;width:9%;height:1%;margin:2.5% 0 3%;background:var(--wine)}
.sl ul{margin:0;padding-left:4%;color:#d9d7d2;font-size:2.9cqw;line-height:1.35}
.sl li{margin-bottom:1.6%}
.sl-n{position:absolute;right:4%;bottom:4%;font-size:1.7cqw;color:#8d8c88}
.sl-notes{margin:6px 2px 0;font-size:12.5px;color:var(--mute)}
/* v2.1 · memoria */
.meml{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto}
.meml li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-size:14px}
.meml li span{flex:1}
.meml .memnone{color:var(--mute);font-size:13.5px}
.memadd{display:flex;gap:8px;align-items:center}
.memadd .field{flex:1;margin:0}
.memadd input{width:100%}
/* ---------- caja de escribir ---------- */
.composer{padding:10px clamp(16px,4vw,48px) 28px}
.comp-in{width:min(100%,840px);margin:0 auto;display:flex;align-items:flex-end;gap:10px}
.comp-in .field{flex:1;min-width:0;align-items:flex-end;border-radius:22px;background:rgba(0,0,0,.35)}
.comp-in textarea{min-width:0;width:100%;max-height:170px;line-height:1.5;padding:15px 18px;font-size:15.5px}
.hintline{width:min(100%,840px);margin:10px auto 0;font-family:var(--mono);font-size:11.5px;color:var(--mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hintline a{text-decoration:underline;text-underline-offset:3px}
#scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .45s ease}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(92vw,410px);z-index:80;transform:translateX(-105%);transition:transform .6s var(--ease);background:rgba(11,12,16,.96);box-shadow:30px 0 80px rgba(0,0,0,.55);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .side.open{transform:none}
  #scrim.on{opacity:1;pointer-events:auto}
  .x-close{display:grid}
  .menu{display:inline-flex}
  .side-done{display:inline-flex;justify-content:center}
  .top{flex-wrap:wrap;gap:10px;padding:12px 16px;min-height:0}
  .title h1{max-width:60vw}
  .t-desc{display:none}
  .now{justify-content:flex-start;flex:1 1 100%}
  .tobottom{bottom:104px}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px){ .m,.cmp-card,.now-chip,.mi.in,.sugg button,.cchip{animation:none} .side{transition:none} }

/* ===== v2: cursor de carga, portal Z, escritura con brillo ===== */
#cw{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;opacity:0;scale:.4;transition:opacity .25s,scale .45s var(--ease);background:conic-gradient(#ff5f57,#ffbd2e,#d9e84f,#28c840,#1ec8ff,#7c5cff,#ff5fb7,#ff5f57);-webkit-mask:radial-gradient(circle,transparent 3.5px,#000 4.5px);mask:radial-gradient(circle,transparent 3.5px,#000 4.5px);filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.cursor-busy #cw{opacity:1;scale:1;animation:cwspin .9s linear infinite}
#cd.mini #cw{opacity:0 !important}
@keyframes cwspin{to{rotate:360deg}}
.pz{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;pointer-events:none}
.pz svg{display:block;width:100%;height:100%;overflow:visible}
#portal{position:fixed;inset:0;z-index:9500;background:#0b0c10;pointer-events:none;opacity:0}
#portal .pg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(214,128,104,.24),transparent 60%)}
.field.mw{position:relative}
.mir{position:absolute;inset:0;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;color:var(--text);z-index:0}
.field.mw textarea{position:relative;z-index:1;color:transparent;caret-color:var(--accent);scrollbar-width:none}
.field.mw textarea::-webkit-scrollbar{display:none}
@keyframes nw{0%{opacity:0;color:var(--accent);text-shadow:0 0 18px var(--accent),0 0 4px var(--accent)}40%{opacity:1;color:var(--accent);text-shadow:0 0 12px rgba(184,196,255,.8)}100%{color:var(--text);text-shadow:0 0 0 transparent}}
.mir .nw{animation:nw .9s var(--ease) both}

html.enter #veil{background:#b39eff}
html.enter.po #veil{background:#0b0c10}
.attach{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--soft);background:rgba(0,0,0,.25);transition:background .3s,color .3s,transform .2s}
.attach:hover{background:rgba(255,255,255,.08);color:var(--text)}.attach:active{transform:scale(.92)}.attach svg{width:20px;height:20px}
.tray{width:min(100%,840px);margin:0 auto 10px;display:flex;flex-wrap:wrap;gap:8px}.tray:empty{display:none}
.fc{display:inline-flex;align-items:center;gap:8px;max-width:250px;padding:5px 6px 5px 5px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:12.5px;color:var(--soft);animation:avpop .5s var(--ease) both}
.fc img,.fc .ic{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none}
.fc .ic{display:grid;place-items:center;background:rgba(255,255,255,.09);font:600 9.5px var(--mono);text-transform:uppercase;color:var(--text);font-style:normal}
.fc b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fc .x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none}.fc .x svg{width:12px;height:12px}
.fc.ro{padding-right:10px}
.fc.load .ic,.fc.load img{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.2),rgba(255,255,255,.06));background-size:200% 100%;animation:shimmer 1.2s infinite linear}
.fc.err{border-color:rgba(255,140,120,.5)}
.fcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body.drag::after{content:"Suelta tus archivos aquí";position:fixed;inset:14px;z-index:9000;display:grid;place-items:center;border:2px dashed rgba(184,196,255,.6);border-radius:26px;background:rgba(11,12,16,.72);backdrop-filter:blur(8px);font-family:var(--serif);font-size:30px;pointer-events:none}

/* ===== v3: fondo de 3 círculos, menú contextual, flotado ===== */
.aurora i{border-radius:50%;filter:blur(34px);opacity:.62;animation:orb 22s ease-in-out infinite alternate;translate:calc(var(--mx,0) * var(--k,1) * 1px) calc(var(--my,0) * var(--k,1) * 1px);transition:translate .9s var(--ease)}
.aurora i:nth-child(1){--k:.7;width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#8fb0ff}
.aurora i:nth-child(2){--k:-1;width:42vmax;height:42vmax;right:-14vmax;top:18vh;background:var(--wine);animation-duration:27s;animation-delay:-8s}
.aurora i:nth-child(3){--k:1.3;width:44vmax;height:44vmax;left:22vw;bottom:-26vmax;background:#ff8f7a;animation-duration:31s;animation-delay:-15s}
.aurora::after{content:"";position:absolute;inset:0;backdrop-filter:blur(46px) saturate(1.25);-webkit-backdrop-filter:blur(46px) saturate(1.25);background:rgba(11,12,16,.52)}
@keyframes orb{to{transform:translate3d(6vmax,-4vmax,0) scale(1.12)}}
@keyframes drift{0%,100%{translate:0 0;rotate:0deg}25%{translate:4px -5px;rotate:.25deg}50%{translate:-3px -8px;rotate:-.2deg}75%{translate:-5px -3px;rotate:.15deg}}
.ctxm{position:fixed;z-index:9800;min-width:220px;padding:6px;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(18,19,26,.62);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 20px 60px rgba(0,0,0,.5);animation:drift 9s ease-in-out infinite}
.ctxm button{text-align:left;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--soft);transition:background .25s,color .25s}
.ctxm button:hover{background:rgba(255,255,255,.09);color:var(--text)}

#tour{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .5s ease}
#tour.on{opacity:1}
.tcard{position:relative;width:min(92vw,470px);padding:30px 30px 24px;border:1px solid rgba(255,255,255,.14);border-radius:30px;background:rgba(18,19,26,.66);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden;animation:drift 10s ease-in-out infinite}
.tcard::before{content:"";position:absolute;inset:-30% -20% auto;height:80%;background:radial-gradient(ellipse at 50% 0,var(--tc,var(--wine)),transparent 70%);opacity:.32;transition:background .8s;pointer-events:none}
.tcard>*{position:relative}
.tn{font:12px var(--mono);color:var(--mute);letter-spacing:.08em;margin:18px 0 8px}
.tcard h3{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.02;letter-spacing:-.015em}
.tcard p{margin-top:12px;color:var(--soft);font-size:15.5px;min-height:5em}
.tdots{display:flex;gap:6px;margin:18px 0}
.tdots i{height:4px;width:14px;border-radius:4px;background:rgba(255,255,255,.18);transition:width .5s var(--ease),background .4s}
.tdots i.on{width:34px;background:var(--tc,var(--wine))}
.tbtn{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* v4: el body opaco tapaba el fondo */
html body{background:transparent}

/* ===== v5: cursor de texto, fondo con celeste, ventana de conexión ===== */
#ci{position:absolute;left:-1px;top:-11px;width:2px;height:22px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(184,196,255,.85);opacity:0;scale:.4 1;transition:opacity .2s,scale .3s var(--ease)}
.cursor-text #ci{opacity:1;scale:1 1}
.cursor-text #ca{opacity:0 !important}
.cursor-typing #cd{opacity:0 !important}
.aurora i:nth-child(4){--k:-.6;width:34vmax;height:34vmax;right:12vw;bottom:-12vmax;background:#6fd3d6;opacity:.4;animation-duration:25s;animation-delay:-4s}
.aurora::before{content:"";position:absolute;inset:0;z-index:1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:30px 30px;-webkit-mask:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);mask:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%)}
#conn{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .5s ease}
#conn.on{opacity:1}

.cursor-busy #ci{opacity:0 !important}
.cbox{display:flex;gap:8px;align-items:center;margin-top:12px}
.cbox input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);color:var(--text);font:13px var(--mono)}
.cbox span{flex:1;color:var(--soft);font-size:14px}
.cbox .ok{color:#7fd6b8;font-size:13px}

/* v7: fondo optimizado: degradados suaves en vez de filtros de desenfoque animados */
.aurora{contain:strict}
.aurora i{filter:none;opacity:.9;will-change:transform}
.aurora i:nth-child(1){background:radial-gradient(circle,rgba(143,176,255,.95) 0%,rgba(143,176,255,.35) 38%,transparent 68%)}
.aurora i:nth-child(2){background:radial-gradient(circle,rgba(214,128,104,.95) 0%,rgba(214,128,104,.35) 38%,transparent 68%)}
.aurora i:nth-child(3){background:radial-gradient(circle,rgba(255,143,122,.9) 0%,rgba(255,143,122,.32) 38%,transparent 68%)}
.aurora i:nth-child(4){background:radial-gradient(circle,rgba(111,211,214,.85) 0%,rgba(111,211,214,.28) 38%,transparent 68%);opacity:.55}
.aurora::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:radial-gradient(ellipse at 50% 30%,rgba(11,12,16,.22),rgba(11,12,16,.5) 78%)}

/* v7: proveedores separados, ayuda con bloqueadores, avisos de límite */
.prov{margin:2px 0 10px;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
.prov button{text-align:center}
.mgrp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:14px 8px 6px;position:sticky;top:-1px;z-index:2;background:linear-gradient(var(--bg) 70%,transparent)}
.mgrp b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--text)}
.mgrp span{font:11px var(--mono);letter-spacing:.04em;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--mute)}
.mgrp span.on{color:#7fd6b8;border-color:rgba(127,214,184,.35)}
.mgrp small{width:100%;color:var(--mute);font-size:11.5px}
.spend{display:inline-flex;align-items:flex-end;gap:2px;margin-left:6px;padding:2px 7px 2px 6px;border-radius:999px;border:1px solid var(--line);font:600 10.5px var(--mono);font-style:normal;color:var(--mute);vertical-align:middle}
.spend b{width:3px;border-radius:2px;background:rgba(255,255,255,.18)}.spend b:nth-child(1){height:5px}.spend b:nth-child(2){height:8px}.spend b:nth-child(3){height:11px}
.spend em{font-style:normal;margin-left:4px}
.spend.s1{color:#7fd6b8;border-color:rgba(127,214,184,.35)}.spend.s1 b:nth-child(1){background:#7fd6b8}
.spend.s2{color:#f2c46b;border-color:rgba(242,196,107,.35)}.spend.s2 b:nth-child(-n+2){background:#f2c46b}
.spend.s3{color:#ff8f7a;border-color:rgba(255,143,122,.4)}.spend.s3 b{background:#ff8f7a}
@media (max-width:600px){.spend em{display:none}}
.mfam{display:flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;padding:6px 10px 2px;color:var(--text)}
.mfam .gico{width:20px;height:20px;border-radius:7px;flex:none}
.mfam b{font-weight:500;font-size:13.5px;letter-spacing:.01em}
.mfam small{color:var(--mute);font:11px var(--mono)}
.cnote{margin-top:6px;color:var(--mute);font-size:12.5px;line-height:1.45}
.m.err .swb{margin-top:10px}
#blk{position:fixed;inset:0;z-index:9750;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .45s ease}
#blk.on{opacity:1}
#blk .tcard{width:min(94vw,520px)}
#blk .tcard p,#conn .tcard p{min-height:0}
.bbar{display:flex;align-items:center;gap:8px;margin:18px 0 6px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,.35)}
.bbar .dots{display:flex;gap:5px}.bbar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.bbar .url{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.07);font:12px var(--mono);color:var(--soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bbar .bi{position:relative;flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--soft)}
.bbar .bi svg{width:18px;height:18px}
.bbar .bi.hl{color:#fff;background:rgba(214,128,104,.22)}
.bbar .bi.hl::before{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid var(--wine);animation:blkpulse 1.6s ease-out infinite}
.bbar .bi .nb{position:absolute;top:-9px;right:-7px;width:17px;height:17px;border-radius:50%;background:var(--wine);color:#0b0c10;font:700 10.5px var(--sans);display:grid;place-items:center}
@keyframes blkpulse{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.bsteps{margin:14px 0 4px;padding-left:20px;color:var(--soft);font-size:14.5px;display:grid;gap:7px}
.bsteps b{color:var(--text);font-weight:500}
.bforce{margin-top:12px;padding:12px 14px;border:1px dashed rgba(214,128,104,.45);border-radius:14px;font-size:13.5px;color:var(--soft);display:none}
.bforce.on{display:block;animation:avpop .5s var(--ease) both}
.bforce .tbtn{margin-top:10px}

/* v8: SynXCoin's */
.sxc{width:1.05em;height:1.05em;vertical-align:-.17em;flex:none;display:inline-block;filter:drop-shadow(0 0 6px rgba(214,128,104,.35))}

.side-foot .sxfoot{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px 6px 6px;margin:-6px 0 -6px -6px;border-radius:12px;color:var(--soft);font-size:12.5px;transition:background .25s}
.side-foot .sxfoot:hover{background:rgba(255,255,255,.07);color:var(--text)}
.sxfoot .sxc{font-size:17px}
.sxfoot b{color:var(--text);font-weight:600}
.sxbar{display:block;width:54px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.sxbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8fb0ff,var(--wine),var(--gold));transform-origin:left;transition:transform .8s var(--ease)}
.sxbar.warn i{background:linear-gradient(90deg,#f2b36b,#ff8f7a)}
.saver{display:inline-flex;align-items:center;gap:5px;margin-right:10px;padding:2px 9px 2px 7px;border:1px solid var(--line);border-radius:20px;font:inherit;color:var(--mute);transition:all .3s}
.saver svg{width:13px;height:13px}
.saver[aria-pressed="true"]{color:#7fd6b8;border-color:rgba(127,214,184,.45);background:rgba(127,214,184,.1)}
.agentb[aria-pressed="true"]{color:#f3d79e;border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.1)}
.agentb.busy svg{animation:agSpin 1s linear infinite}
#railAgent[aria-pressed="true"]{color:#f3d79e;background:rgba(var(--gold-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.4)}
body.agenting .comp-in,body.agenting .composer .field{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.45),0 0 40px -12px rgba(var(--gold-rgb),.5)}
.agkeep{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 4px 18px;padding:10px 12px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.06);font-size:13.5px}
.agkeep span{flex:1 1 220px}
/* v1.8 · modo agente: sin selector de IA, pasos en vivo y la decisión al final */
.agpill{display:none;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.1);color:#f3d79e;font:500 13.5px var(--sans,inherit)}
.agpill svg{width:16px;height:16px}
.agpill em{font-style:normal;font-size:12px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--soft,#c3c5ce);transition:background .25s,color .25s}
.agpill:hover em,.agpill:focus-visible em{background:rgba(255,255,255,.14);color:#fff}
body.agenting .agpill{display:inline-flex}
body.agenting #cPick,body.agenting #cCmp,body.agenting #tabbar [data-tab="ia"]{display:none !important}
.aghello .agbadge{display:inline-flex;align-items:center;gap:8px;margin:0 auto 10px;padding:6px 14px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.1);color:#f3d79e;font:600 12px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;animation:agBadge .7s cubic-bezier(.22,1,.36,1) both}
.aghello .agbadge svg{width:15px;height:15px}
@keyframes agBadge{from{opacity:0;transform:translateY(8px) scale(.94);filter:blur(4px)}}
.agrun{display:flex;flex-direction:column;gap:10px;margin:4px 0 12px;padding:14px 16px;max-width:520px;border-radius:18px;border:1px solid rgba(var(--gold-rgb),.32);background:linear-gradient(160deg,rgba(var(--gold-rgb),.08),rgba(255,255,255,.02));animation:agIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes agIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
.agrun .ag-h{display:flex;align-items:center;gap:12px}
.agrun .pxw{width:44px;height:44px;border-radius:11px}
.agrun .ag-t{display:flex;flex-direction:column}
.agrun .ag-t b{color:#f3d79e;font-weight:600}
.agrun .ag-t small{color:var(--mute,#8d909c);font-size:12.5px}
.agrun .ag-s{list-style:none;margin:0;padding:0 0 0 4px;display:flex;flex-direction:column;gap:7px}
.agrun .ag-s li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute,#8d909c);opacity:.55;transition:opacity .35s,color .35s}
.agrun .ag-s li i{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;position:relative;transition:background .35s,border-color .35s}
.agrun .ag-s li.on{opacity:1;color:var(--text,#ecebe7)}
.agrun .ag-s li.on i{border-color:var(--gold);border-top-color:transparent;animation:agSpin .9s linear infinite}
.agrun .ag-s li.done{opacity:.9;color:var(--soft,#c3c5ce)}
.agrun .ag-s li.done i{background:var(--gold);border-color:var(--gold)}
.agrun .ag-s li.done i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #1a1408;border-width:0 2px 2px 0;transform:rotate(45deg)}
.agsum{margin:2px 0 6px auto;max-width:min(520px,92%);display:flex;flex-direction:column;align-items:flex-end}
.agsum .ag-row{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.06);color:var(--soft,#c3c5ce);font:inherit;font-size:13px;text-align:left}
.agsum .ag-ic svg{width:15px;height:15px;color:#f3d79e;display:block}
.agsum .ag-tx b{color:#f3d79e;font-weight:600}
.agsum .ag-tx em{font-style:normal}
.agsum .ag-c{width:14px;height:14px;transition:transform .3s}
.agsum.open .ag-c{transform:rotate(90deg)}
.agsum .ag-d{margin-top:6px;padding:10px 14px;border-radius:14px;border:1px solid var(--line,rgba(255,255,255,.1));background:rgba(255,255,255,.03);font-size:13.5px;max-width:100%}
.agsum .ag-d small{display:block;margin-bottom:4px;color:var(--mute,#8d909c);font:600 10.5px var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase}
.agsum .ag-d p{margin:0;white-space:pre-wrap}
.agkeep{margin:-2px 0 10px 0;max-width:620px}
.agkeep .agk-b{display:flex;flex-wrap:wrap;gap:8px}
.agkeep small{flex-basis:100%;color:var(--mute,#8d909c);font-size:12px}
html.noanim .agrun,html.noanim .aghello .agbadge{animation:none}
html.noanim .agrun .ag-s li.on i{animation-duration:2s}
@media (max-width:899px){#cSeg,#cSeg[hidden]{display:grid !important;grid-template-columns:repeat(2,1fr);gap:4px;padding:4px;margin:4px 0 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03)}#cSeg .pill{display:none}#cSeg button{display:flex;padding:8px 6px;border-radius:999px;font-size:13px;color:var(--mute);border:0;background:none}#cSeg button[aria-selected="true"]{background:rgba(255,255,255,.1);color:var(--text)}}
@keyframes agSpin{to{transform:rotate(360deg)}}
#sx{position:fixed;inset:0;z-index:9720;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .45s ease}
#sx.on{opacity:1}
#sx .tcard{width:min(94vw,500px);max-height:92vh;overflow-y:auto;scrollbar-width:thin}
#sx .tcard p{min-height:0}
.tcard p.cnote{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.sxbig{display:flex;align-items:center;gap:12px;margin:16px 0 4px;font-family:var(--serif);font-size:54px;line-height:1;letter-spacing:-.02em}
.sxbig .sxc{font-size:46px}
.sxbig small{font-family:var(--sans);font-size:13px;color:var(--mute);letter-spacing:0}
.sxstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.sxstats div{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.2)}
.sxstats b{display:block;font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sxstats span{font-size:11.5px;color:var(--mute)}
.sxrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sxrow button{padding:6px 11px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;color:var(--soft);transition:all .25s}
.sxrow button[aria-pressed="true"]{color:var(--text);border-color:rgba(214,128,104,.6);background:rgba(214,128,104,.16)}
.sxlbl{margin-top:16px;font:12px var(--mono);letter-spacing:.06em;color:var(--mute)}
.sxsave{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.sxsave p{flex:1;font-size:13px;color:var(--soft);margin:0}
.sxsw{flex:none;width:44px;height:26px;border-radius:20px;background:rgba(255,255,255,.14);position:relative;transition:background .3s}
.sxsw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.sxsw[aria-pressed="true"]{background:#5fbf9c}
.sxsw[aria-pressed="true"]::after{transform:translateX(18px)}

/* v9: péndulo de Newton en el logo (muy leve); al pasar el mouse se separan y crecen la S y la z */
.mark{overflow:visible}
.mark .sw{transform-box:view-box}
.mark .sw1{transform-origin:11px -25px;animation:swL 2.8s infinite}
.mark .sw3{transform-origin:33px -25px;animation:swR 2.8s infinite}
@keyframes swL{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.25,.75,.45,1)}16%{transform:rotate(11deg);animation-timing-function:cubic-bezier(.55,0,.75,.25)}32%,100%{transform:rotate(0deg)}}
@keyframes swR{0%,50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.25,.75,.45,1)}66%{transform:rotate(-11deg);animation-timing-function:cubic-bezier(.55,0,.75,.25)}82%,100%{transform:rotate(0deg)}}
.mark circle{transition:transform .6s var(--ease);transform-box:fill-box;transform-origin:center}
.mark text{transition:transform .55s var(--ease);transform-box:fill-box;transform-origin:center}
.mk-s{font-family:var(--serif);font-size:20px;fill:#0b0c10}
.mk-z{font-family:var(--serif);font-size:9.5px;fill:#0b0c10}
/* cuenta */
.accb{flex:none;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.25);color:var(--soft);font-size:13px;transition:background .3s,color .3s,border-color .3s}
.accb:hover{background:rgba(255,255,255,.07);color:var(--text)}
.accb.out{padding:7px 14px}
.av-me{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--sans);color:#0b0c10;background:linear-gradient(135deg,#8fb0ff,var(--wine) 55%,var(--gold));flex:none}
.av-me.big{width:58px;height:58px;font-size:24px}
.accb .sy{width:7px;height:7px;border-radius:50%;background:#7fd6b8;box-shadow:0 0 8px #7fd6b8}
.accb .sy.wait{background:#f2b36b;box-shadow:0 0 8px #f2b36b;animation:blink2 .9s ease-in-out infinite}
.accb .sy.bad{background:#ff8f7a;box-shadow:0 0 8px #ff8f7a}

/* v9: chat más oscuro y cómodo para leer */
.main{background:linear-gradient(180deg,rgba(7,8,11,.84),rgba(7,8,11,.9))}
.top{background:rgba(7,8,11,.35)}
/* barra lateral más clara */
.back .mark{height:22px;width:32px;margin-right:2px}
.slbl{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:2px 2px -4px}
.prov{display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin:0}
.prov button{justify-content:center;padding:8px 6px;font-size:13px;gap:6px}
.pdot{width:7px;height:7px;border-radius:50%;background:#5b5e6b;flex:none;transition:background .4s,box-shadow .4s}
.pdot.on{background:#7fd6b8;box-shadow:0 0 8px #7fd6b8}
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent);padding-right:18px}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none}
.sortrow{flex-wrap:wrap;row-gap:6px}
.sortrow .live{padding:3px 4px 3px 9px;border-radius:999px;gap:6px;font-size:11px;background:rgba(0,0,0,.2);margin-right:auto}
.sortrow .live b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sortrow .live .sp{display:none}
.sortrow .refresh{width:22px;height:22px}
.sortrow .refresh svg{width:13px;height:13px}
.sortrow .live-dot{width:7px;height:7px}
/* tutorial nuevo */
.tx{margin-top:14px}
.tconn{display:grid;gap:8px}
.trow{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.22)}
.trow b{font-weight:600;font-size:14px;min-width:86px}
.trow span{flex:1;color:var(--mute);font-size:12.5px}
.trow input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.3);color:var(--text);font:12.5px var(--mono)}
.trow .ok{color:#7fd6b8;font-size:13px;font-style:normal}
.tpicks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tpick{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.tpick:hover{transform:translateY(-2px)}
.tpick b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--text)}
.tpick span{font-size:11.5px;color:var(--mute)}
.tpick em{font-style:normal;font-size:12.5px;color:var(--soft);margin-top:6px}
.tpick.on{border-color:rgba(214,128,104,.7);background:rgba(214,128,104,.14)}
.tsum{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22);color:var(--soft);font-size:14.5px}
.tsum b{color:var(--text)}
@media (max-width:560px){.tpicks{grid-template-columns:1fr}.trow{flex-wrap:wrap}.trow b{min-width:0}}
/* cuenta */
#acc{position:fixed;inset:0;z-index:9720;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .45s ease}
#acc.on{opacity:1}
#acc .tcard{width:min(94vw,480px);max-height:90vh;overflow-y:auto;scrollbar-width:thin}
#acc .tcard p{min-height:0}
.accme{display:flex;align-items:center;gap:14px;margin:16px 0 10px}
.accme b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1}
.accme span{font:12px var(--mono);color:var(--mute)}
.accfield{display:flex;gap:8px;margin-top:8px}
.accfield input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);color:var(--text);font:14px var(--sans)}
.accwarn{margin-top:10px;padding:10px 12px;border:1px solid rgba(242,179,107,.35);background:rgba(242,179,107,.08);border-radius:12px;font-size:12.5px;color:#f2c9a0}

@media (max-width:760px){
  .top{position:relative}
  #accBtn span:not(.av-me),#accBtn .sy{display:none}
  #accBtn.accb:not(.out){padding:3px}
  .hintline>span:first-child{font-size:0}
  .hintline .saver{font-size:12px}
  #clearBtn{padding:8px 10px;font-size:12px}
  .comp-in{gap:8px}
}

/* v2.1 · buscar en internet */
.webb[aria-pressed="true"]{color:#9fd3ff;background:rgba(127,190,255,.14);box-shadow:inset 0 0 0 1px rgba(127,190,255,.45)}
body.webbing .comp-in,body.webbing .composer .field{box-shadow:0 0 0 1px rgba(127,190,255,.5),0 0 40px -12px rgba(127,190,255,.5)}
.websum .ag-row{border-color:rgba(127,190,255,.35);background:rgba(127,190,255,.06)}
.websum .ag-ic svg{color:#9fd3ff}
.websum .ag-tx b{color:#9fd3ff}
.webrun{border-color:rgba(127,190,255,.35);background:linear-gradient(160deg,rgba(127,190,255,.08),rgba(255,255,255,.02))}
.webrun .ag-t b{color:#9fd3ff}
.srcl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;text-align:left}
.srcl a{display:flex;flex-direction:column;padding:6px 10px;border-radius:10px;text-decoration:none;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.srcl a:hover{border-color:rgba(127,190,255,.4)}
.srcl b{font-weight:500;color:var(--text);font-size:13.5px}
.srcl small{color:var(--mute);font-size:12px}
a.cite{display:inline-grid;place-items:center;min-width:18px;height:18px;margin:0 2px;padding:0 5px;border-radius:999px;font:600 10.5px var(--mono);color:#0d1622;background:#9fd3ff;text-decoration:none;vertical-align:2px}
a.cite:hover{background:#cde9ff}

/* en el celular, «Crear imagen» y «Buscar en internet» van dentro del clip (y el clip se ilumina si están activos) */
.amenu .only-small{display:none}
@media (max-width:600px){#imgBtn,#webBtn{display:none !important}.amenu .only-small{display:flex}body.imaging #attachBtn,body.webbing #attachBtn{color:#f3d79e;background:rgba(var(--gold-rgb),.14)}}
/* ===== v10 ===== */
/* péndulo de Newton rápido y seguido: tin, sale, tin, sale */
.mark .sw1{animation:swL 1.15s infinite}
.mark .sw3{animation:swR 1.15s infinite}
@keyframes swL{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}25%{transform:rotate(13deg);animation-timing-function:cubic-bezier(.6,0,.8,.3)}50%,100%{transform:rotate(0deg)}}
@keyframes swR{0%,50%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}75%{transform:rotate(-13deg);animation-timing-function:cubic-bezier(.6,0,.8,.3)}100%{transform:rotate(0deg)}}
/* al pasar el mouse: deja el péndulo, crece un poquito, se separan y crecen la S y la z */
.logo .mark,.back .mark{transition:transform .5s var(--ease),opacity .8s var(--ease)}
/* fondo repartido por toda la pantalla y que gira suave al bajar */
.aurora .orbit{position:absolute;inset:0;transform:rotate(calc(var(--sp,0) * 140deg)) scale(calc(1 + var(--sp,0) * .18));transition:transform .5s cubic-bezier(.2,.7,.3,1);will-change:transform}
.aurora .orbit i:nth-child(1){left:-16vmax;top:-18vmax;right:auto;bottom:auto}
.aurora .orbit i:nth-child(2){right:-16vmax;top:-12vmax;left:auto;bottom:auto}
.aurora .orbit i:nth-child(3){left:-12vmax;bottom:-24vmax;right:auto;top:auto}
.aurora .orbit i:nth-child(4){right:-8vmax;bottom:-18vmax;left:auto;top:auto}
.aurora::after{background:radial-gradient(ellipse at calc(50% + var(--sp,0) * 30%) calc(30% + var(--sp,0) * 45%),rgba(11,12,16,.2),rgba(11,12,16,.5) 78%)}
/* modo rendimiento: sin vidrios, sin fondo animado, sin péndulo */
html.noglass *,html.noglass *::before,html.noglass *::after{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
html.noglass .tcard,html.noglass .ctxm{background:#15161d !important}
html.nobg .aurora i{animation:none !important;opacity:.45}
html.nobg .aurora .orbit{transform:none !important}
html.noanim .mark .sw,html.noanim .tcard,html.noanim .ctxm{animation:none !important}
html.nocur .cursor-on,html.nocur .cursor-on *,html.nocur.cursor-on,html.nocur.cursor-on *{cursor:auto !important}
html.nocur #cd,html.nocur #cr,html.nocur #cl{display:none !important}
/* ventanas flotantes comunes */
.szm{position:fixed;inset:0;z-index:9730;display:grid;place-items:center;padding:18px;background:rgba(5,6,10,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .45s ease}
.szm.on{opacity:1}
.szm .tcard{width:min(94vw,520px);max-height:90vh;overflow-y:auto;scrollbar-width:thin}
.szm .tcard p{min-height:0}
.authc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.authc .full{grid-column:1 / -1;justify-self:center}
.cfgo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cfgo button{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22);color:var(--soft);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.cfgo button:hover{transform:translateY(-2px)}
.cfgo button b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.1;color:var(--text)}
.cfgo button span{font-size:12px;color:var(--mute);line-height:1.4}
.cfgo button[aria-pressed="true"]{border-color:rgba(214,128,104,.7);background:rgba(214,128,104,.14)}
.cfgo .rec{position:absolute;top:-9px;right:10px;padding:1px 8px;border-radius:20px;background:#7fd6b8;color:#0b0c10;font:600 10px var(--sans)}
.cfgrow{display:flex;align-items:center;gap:12px;margin-top:8px;padding:11px 14px;border:1px solid var(--line);border-radius:14px}
.cfgrow p{flex:1;margin:0;font-size:13.5px;color:var(--soft)}
.cfgrow p small{display:block;font-size:12px;color:var(--mute)}
.cfgsw{flex:none;width:44px;height:26px;border-radius:20px;background:rgba(255,255,255,.14);position:relative;transition:background .3s}
.cfgsw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.cfgsw[aria-pressed="true"]{background:#5fbf9c}
.cfgsw[aria-pressed="true"]::after{transform:translateX(18px)}
.cfglbl{margin-top:16px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* miniatura: así se verá la página */
.mp{position:relative;height:138px;margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b0c10;animation:mpin .6s cubic-bezier(.22,1,.36,1) both}
@keyframes mpin{from{opacity:0;transform:translateY(10px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.mp .bl{position:absolute;border-radius:50%;filter:blur(16px);opacity:.85;animation:mpf 5s ease-in-out infinite alternate}
.mp .bl:nth-child(1){width:96px;height:96px;left:-26px;top:-30px;background:#8fb0ff}
.mp .bl:nth-child(2){width:86px;height:86px;right:-20px;top:-16px;background:var(--wine);animation-delay:-2s}
.mp .bl:nth-child(3){width:90px;height:90px;left:30%;bottom:-48px;background:#ff8f7a;animation-delay:-3.5s}
@keyframes mpf{to{transform:translate(14px,8px) scale(1.12)}}
.mp .gl{position:absolute;inset:0;background:rgba(11,12,16,.32)}
.mp .nv{position:absolute;left:10px;right:10px;top:9px;display:flex;align-items:center;gap:6px}
.mp .nv i{width:24px;height:9px;border-radius:5px;background:linear-gradient(90deg,#8fb0ff,var(--wine),var(--gold))}
.mp .nv b{width:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.mp .nv b:last-child{margin-left:auto;width:30px;height:10px;border-radius:6px}
.mp .h1{position:absolute;left:50%;top:36px;transform:translateX(-50%);width:62%;height:12px;border-radius:6px;background:rgba(255,255,255,.88)}
.mp .h2{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:44%;height:12px;border-radius:6px;background:#b8c4ff}
.mp .cds{position:absolute;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mp .cds b{height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.09);backdrop-filter:blur(6px);box-shadow:0 0 16px rgba(214,128,104,.3)}
.mp .cu{position:absolute;left:62%;top:48%;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);box-shadow:0 0 12px rgba(184,196,255,.6);animation:mpc 3.4s ease-in-out infinite}
@keyframes mpc{50%{transform:translate(-40px,14px)}}
.mp em{position:absolute;right:8px;top:8px;padding:2px 8px;border-radius:20px;background:rgba(0,0,0,.55);font:10.5px var(--mono);font-style:normal;color:var(--soft)}
.mp.speed{background:#101116}
.mp.speed .bl,.mp.speed .gl,.mp.speed .cu{display:none}
.mp.speed .cds b{background:#1a1b22;border-color:#2a2b33;backdrop-filter:none;box-shadow:none}
.mp.speed .nv i{background:#8fb0ff}
.mp.speed .h2{background:#9aa3c7}

/* v10: lista de modelos virtual (solo se dibuja lo que se ve) */
.mlist{position:relative;display:block}
.vwin{position:relative}
.vrow{position:absolute;left:0;right:0}
.vrow>.mgrp{position:static;background:none}
/* filtros: se arrastran, se mueven con la ruedita y tienen flechas */
.fwrap{position:relative}
.filters{cursor:grab;-webkit-mask:none;mask:none;padding-right:0;scroll-behavior:smooth}
.filters.dragging{cursor:grabbing;scroll-behavior:auto}
.filters.dragging .fchip{pointer-events:none}
.filters.l.r{-webkit-mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.filters.r:not(.l){-webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.filters.l:not(.r){-webkit-mask:linear-gradient(90deg,transparent,#000 34px);mask:linear-gradient(90deg,transparent,#000 34px)}
.farr{position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:grid;place-items:center;background:rgba(20,21,28,.92);border:1px solid var(--line);color:var(--soft);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:2}
.farr svg{width:14px;height:14px}
.farr.lft{left:-4px}.farr.rgt{right:-4px}
.fwrap:has(.filters.l) .farr.lft,.fwrap:has(.filters.r) .farr.rgt{opacity:1;pointer-events:auto}
.farr:hover{color:var(--text);transform:scale(1.08)}
/* botón detener */
.send.stop svg{display:none}
.send.stop::after{content:"";width:13px;height:13px;border-radius:3px;background:currentColor}
/* configuración y equipo */
.cfgb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--mute);border:1px solid var(--line);transition:color .3s,background .3s}
.cfgb:hover{color:var(--text);background:rgba(255,255,255,.07)}
.cfgb svg{width:17px;height:17px}
.side-head{gap:8px}
.side-head .back{margin-right:auto}
.team{margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.2)}
.team h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 6px}
.tmem{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tmem span{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;color:var(--soft)}
.tmem span button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.tmem span button:hover{color:#ff8f7a}
.tinv{display:flex;gap:8px;margin-top:6px}
.tinv input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);color:var(--text);font:13.5px var(--sans)}
.tlist{display:grid;gap:8px;margin-top:8px}
.tbeta{font:10px var(--mono);padding:1px 7px;border-radius:20px;border:1px solid rgba(214,128,104,.5);color:#cbbcff;margin-left:6px;vertical-align:2px}

/* ===== v11 ===== */
/* cursor del botón del medio (desplazamiento automático) */
#cm{position:absolute;left:-15px;top:-15px;width:30px;height:30px;opacity:0;scale:.5;transition:opacity .2s,scale .35s var(--ease)}
#cm svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px rgba(184,196,255,.7))}
.cursor-mid #cm{opacity:1;scale:1}
.cursor-mid #ca,.cursor-mid #ci,.cursor-mid #cw,.cursor-mid #cs{opacity:0 !important}
/* respuestas en vivo */
.scaret{display:inline-block;width:.5em;height:1.05em;margin-left:2px;vertical-align:-.18em;border-radius:2px;background:linear-gradient(180deg,#b8c4ff,var(--wine));box-shadow:0 0 12px rgba(214,128,104,.8);animation:scb 1s ease-in-out infinite}
@keyframes scb{50%{opacity:.35}}
/* confirmaciones con vidrio */
.szc .tbtn .btn.warn{background:#ff8f7a;color:#0b0c10}
.cfgseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.cfgseg button{padding:9px 6px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--soft);transition:all .25s}
.cfgseg button[aria-pressed="true"]{color:var(--text);border-color:rgba(214,128,104,.7);background:rgba(214,128,104,.14)}

/* v11: conversaciones */
.thb{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.25);color:var(--soft);font-size:13px;transition:background .3s,color .3s}
.thb:hover{background:rgba(255,255,255,.07);color:var(--text)}
.thb svg{width:16px;height:16px}
.thb b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#thPop{position:absolute;z-index:60;top:92px;right:clamp(12px,3vw,32px);width:min(92vw,400px);max-height:min(70vh,560px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(16,17,23,.86);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;animation:thin .45s cubic-bezier(.22,1,.36,1) both}
@keyframes thin{from{opacity:0;transform:translateY(-8px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.thhead{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.thhead input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.3);color:var(--text);font:13.5px var(--sans)}
.thlist{overflow-y:auto;padding:6px 8px 12px;overscroll-behavior:contain}
.thg{padding:12px 8px 4px;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.thi{display:flex;align-items:center;gap:8px;padding:9px 8px 9px 12px;border-radius:14px;cursor:pointer;transition:background .25s}
.thi:hover{background:rgba(255,255,255,.06)}
.thi.cur{background:rgba(214,128,104,.14);box-shadow:inset 2px 0 0 var(--wine)}
.thi .tt{flex:1;min-width:0}
.thi .tt b{display:block;font-weight:500;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thi .tt small{display:block;font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thi .tt input{width:100%;padding:5px 8px;border:1px solid rgba(214,128,104,.6);border-radius:8px;background:rgba(0,0,0,.35);color:var(--text);font:14px var(--sans)}
.thi button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--mute);opacity:0;transition:opacity .2s,color .2s,background .2s}
.thi:hover button,.thi.cur button{opacity:1}
.thi button:hover{color:var(--text);background:rgba(255,255,255,.08)}
.thi button[data-del]:hover{color:#ff8f7a}
.thi button svg{width:14px;height:14px}
.thnone{padding:24px 12px;text-align:center;color:var(--mute);font-size:13.5px}
@media (max-width:760px){#thPop{left:12px;right:12px;width:auto;top:70px}.thb span{display:none}.thb{padding:7px 10px}}
/* batalla ciega */
.btrow{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.bt-tog{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--mute);transition:all .3s}
.bt-tog[aria-pressed="true"]{color:#ffd2c8;border-color:rgba(255,143,122,.6);background:rgba(255,143,122,.13)}
.vote{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:14px;border:1px dashed rgba(255,143,122,.5);border-radius:18px;background:rgba(255,143,122,.06);animation:avpop .5s var(--ease) both}
.vote span{width:100%;text-align:center;font-family:var(--serif);font-size:22px}
.cmp-card.win{box-shadow:0 0 0 2px #f2c46b,0 0 40px rgba(242,196,107,.35)}
.cmp-card .who.reveal{animation:avpop .6s var(--ease) both}
.rank{display:grid;gap:6px;margin-top:12px}
.rank div{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;font-size:13.5px}
.rank i{font-style:normal;font-family:var(--mono);color:var(--mute)}
.rank b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--soft)}

/* v12: especialidad, candado de OpenRouter, cuenta y equipos */
.mi-ex{margin-top:3px;font-size:11.5px;color:var(--soft);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-ex::before{content:"✦ ";color:var(--vc)}
.t-ex{margin-top:4px;font-size:12.5px;color:var(--soft)}
.t-ex b{font-weight:500;color:var(--text)}
.prov button.lock{color:var(--mute)}
.prov button.lock::after{content:"🔒";font-size:10px;margin-left:4px;filter:grayscale(.3)}
.olock{margin:6px 2px 10px;padding:14px;border:1px dashed rgba(214,128,104,.45);border-radius:18px;background:linear-gradient(135deg,rgba(143,176,255,.07),rgba(214,128,104,.07))}
.olock b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--text)}
.olock span{margin-left:8px;font:11px var(--mono);color:var(--mute)}
.olock p{margin:4px 0 10px;font-size:12.5px;color:var(--soft)}
.mgrp .pu-logo{margin-right:6px;vertical-align:-2px}
.prov .pu-logo{width:14px;height:14px;border-radius:4px;vertical-align:-2px}
.accb .av-me{width:28px;height:28px}
.acard{position:relative;margin:0 -30px 6px;padding:0 30px}
.acard .pfban{height:84px}
.acard .pfme{margin-top:0}
.acard .pfme b{font-size:26px}
.aact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tmc{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.22)}
.tmc h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:24px}
.tmc h4 small{font:11px var(--mono);color:var(--mute);padding:2px 8px;border:1px solid var(--line);border-radius:20px}
.tmrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.tmrow:last-child{border-bottom:0}
.tmrow .tx{flex:1;min-width:0}
.tmrow .tx b{display:block;font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmrow .tx small{display:block;font:11px var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmrow .x{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.tmrow .x:hover{color:#ff8f7a;background:rgba(255,143,122,.1)}
.tmbar{display:block;width:70px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.tmbar i{display:block;height:100%;background:linear-gradient(90deg,#8fb0ff,var(--wine));transform-origin:left}
.tmkey{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(127,214,184,.08);border:1px solid rgba(127,214,184,.3);font-size:13px;color:#bfeedd}
.tmkey span{flex:1}
.tminv{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px;border:1px solid rgba(242,196,107,.45);border-radius:16px;background:rgba(242,196,107,.07)}
.tminv p small{font:11px var(--mono);color:var(--mute)}
.tminv p{flex:1;margin:0;font-size:13.5px;color:var(--soft)}
.tmseg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tmseg button{padding:6px 10px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--soft)}
.tmseg button[aria-pressed="true"]{color:var(--text);border-color:rgba(214,128,104,.7);background:rgba(214,128,104,.14)}
.tmload{padding:16px;text-align:center;font:12px var(--mono);color:var(--mute)}

/* SynthFlow: nombre, ejemplos y modo principiante */
.sf-k{font:11px var(--mono) !important;letter-spacing:.24em;color:var(--mute);margin:0 0 16px !important}
.intent{margin:26px auto 0;max-width:560px;text-align:center}
.ilbl{font:11px var(--mono) !important;letter-spacing:.06em;color:var(--mute);margin:0 0 10px !important;text-transform:uppercase}
.iseg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.iseg button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.22);font-size:13.5px;color:var(--soft);transition:border-color .3s,background .3s,color .3s}
.iseg button:hover{color:var(--text);background:rgba(255,255,255,.06)}
.iseg button[aria-pressed="true"]{border-color:rgba(214,128,104,.75);background:rgba(214,128,104,.16);color:var(--text)}
.ipick{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.25);text-align:left;animation:chipin .6s var(--ease) both}
.ipick p{margin:0;color:var(--soft);font-size:14px}
.ifacts{list-style:none;margin:10px 0 6px !important;padding:0 !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap;gap:6px}
.ifacts li{display:block;margin:0 !important}
.ifacts li{padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.ifacts b{display:block;font-weight:500;font-size:13px;color:var(--text)}
.ifacts small{display:block;font:10px var(--mono);color:var(--mute)}
.ipick .ilim{font:11.5px var(--mono);color:var(--mute);margin:6px 0 4px}
.attach.pulse{animation:attPulse 1.4s var(--ease) 2}
@keyframes attPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,128,104,0)}40%{box-shadow:0 0 0 8px rgba(214,128,104,.35)}}
.m.err .errnote{display:block;margin-top:8px;font:11.5px var(--mono);color:#e7b4ab;opacity:.85}
.mi-ex .pti{font-weight:600;color:var(--gold)}
.mwarn.pask{color:var(--soft)}
.mwarn.pask .lnk{color:var(--gold);font-size:inherit}

/* ===== v14: cabecera, móvil y tablet ===== */
.clrmini{display:none}
.kbdh{font-style:normal}
@media (max-width:900px){
  .top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"menu now help ths acc" "title title title title title";align-items:center;gap:10px 8px;padding:10px 14px}
  .top>.menu{grid-area:menu}.top>.title{grid-area:title;min-width:0}.top>#helpBtn{grid-area:help}.top>.thb{grid-area:ths}.top>.now{grid-area:now;min-width:0;flex:none}.top>#accBtn{grid-area:acc}
  .now{overflow:hidden}
  .now-chip{max-width:100%;min-width:0}
  .now-chip.idle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex}
  .title h1{max-width:100%;font-size:clamp(24px,6vw,34px)}
}
@media (max-width:560px){
  .menu{padding:9px 11px}
  .menu span,.menu .ml{display:none}
  #clearBtn{display:none}
  .clrmini{display:inline-flex}
  .kbdh{display:none}
  .now-chip .nx{display:none}
  .title .av{width:40px;height:40px;font-size:22px;border-radius:13px}
  .composer{padding:8px 12px calc(14px + env(safe-area-inset-bottom))}
  .thb{padding:7px 10px}
}
/* pantallas táctiles: blancos de al menos 40 px */
@media (pointer:coarse){
  .cfgb,.thb,.menu,.accb,.attach,.x-close{min-width:40px;min-height:40px}
  .fchip,.sugg button,.iseg button,.act,.saver,.now-chip,.seg button,.star{min-height:40px}
  .star{min-width:40px}
}

.aspace{margin:10px 0;padding:11px 14px;border:1px solid var(--line);border-radius:14px;display:grid;gap:7px}
.aspace>div{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.aspace span{font:12px var(--mono);color:var(--mute)}
.aspace .tmbar{width:100%}
.aspace small{font-size:12px;color:#ffc0b3}
.aspace.warn .tmbar i{background:linear-gradient(90deg,var(--gold),#ff8f7a)}
.aout2{display:flex;justify-content:center;margin-top:6px}
.aout2 .lnk{font-size:12.5px;color:var(--mute)}
.btn.danger{background:#ff8f7a;color:#0b0c10}
.rolep{font-style:normal;padding:1px 8px;margin-right:4px;border-radius:999px;background:linear-gradient(90deg,var(--wine),var(--gold));color:#0b0c10;font:600 10.5px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.rolep.r-admin{background:linear-gradient(90deg,#8fb0ff,var(--wine))}
.rolep.r-staff{background:linear-gradient(90deg,#7fd6b8,#8fb0ff)}
.rolep.r-user{background:rgba(255,255,255,.1);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.35)}

/* prueba guiada */
.trialbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto 10px;max-width:880px;padding:10px 14px;border:1px solid rgba(var(--gold-rgb),.4);border-radius:16px;background:linear-gradient(90deg,rgba(var(--wine-rgb),.14),rgba(var(--gold-rgb),.1));font-size:13.5px;color:var(--soft);animation:chipin .6s var(--ease) both}
.trialbar b{color:var(--text);font-weight:600}
.trialbar em{font-style:normal;color:var(--gold)}
.trialbar .tb-ico{font-size:18px}
.trialbar>span:nth-child(2){flex:1;min-width:180px}
.tb-dots{display:inline-flex;gap:4px}
.tb-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .4s}
.tb-dots i.on{background:linear-gradient(135deg,var(--wine),var(--gold));box-shadow:0 0 8px rgba(var(--gold-rgb),.5)}

.trow2{display:grid;grid-template-columns:12px auto 1fr;align-items:center;gap:4px 10px;padding:8px 2px;border-top:1px solid var(--line)}
.trow2 b{font-weight:600;font-size:14px}
.trow2 span{font-size:13px;color:var(--soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow2 small{grid-column:2 / -1;font:11px var(--mono);color:var(--mute)}
.pdot2{width:9px;height:9px;border-radius:50%;background:#7fd6b8;box-shadow:0 0 0 0 rgba(127,214,184,.5);animation:pdotPulse 2.4s ease-out infinite}
.pdot2.off{background:#ff8f7a;animation-name:pdotPulseR}
.pdot2.warn,.pdot2.wait{background:var(--gold);animation-name:pdotPulseA}
@keyframes pdotPulse{0%{box-shadow:0 0 0 0 rgba(127,214,184,.55)}70%,100%{box-shadow:0 0 0 9px rgba(127,214,184,0)}}
@keyframes pdotPulseR{0%{box-shadow:0 0 0 0 rgba(255,143,122,.55)}70%,100%{box-shadow:0 0 0 9px rgba(255,143,122,0)}}
@keyframes pdotPulseA{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.55)}70%,100%{box-shadow:0 0 0 9px rgba(var(--gold-rgb),0)}}
html.noanim .pdot2{animation:none}
.tkeys{margin-top:8px}
.tkeys summary{cursor:pointer;font-size:13.5px;color:var(--soft);padding:6px 0}
.tkeys .tinv{margin-top:6px}
.trialbar.pulse{animation:tbPulse 1.2s var(--ease) 2}
@keyframes tbPulse{40%{box-shadow:0 0 0 6px rgba(var(--gold-rgb),.25);border-color:var(--gold)}}

/* ===================================================================
   v15 · nueva distribución: barrita (C) + tus chats (A) + selector flotante
   =================================================================== */
:root{--rw:68px;--rx:248px;--cw:276px;--gold:#e6b65f;--wine:#c9566c}
.shell{display:flex;grid-template-columns:none;height:100vh;height:100dvh;position:relative}
.main{flex:1;min-width:0}

/* ---------- barrita ---------- */
.rail{position:relative;z-index:40;flex:none;width:var(--rw)}
.rin{position:absolute;left:0;top:0;bottom:0;width:var(--rw);display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;border-right:1px solid var(--line);background:rgba(11,12,16,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:width .62s cubic-bezier(.22,1,.36,1),background .5s ease,box-shadow .6s ease,backdrop-filter .5s ease}
.rail.open .rin{width:var(--rx);background:rgba(16,15,20,.5);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);box-shadow:30px 0 90px -20px rgba(0,0,0,.6),inset -1px 0 0 rgba(var(--gold-rgb),.12)}
.rhead{position:relative;display:flex;align-items:center;height:48px;margin-bottom:10px}
.rbtn{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:46px;padding:0 13px;border-radius:14px;color:var(--soft);font-size:14px;white-space:nowrap;text-align:left;transition:background .3s,color .3s}
.rbtn>svg{width:20px;height:20px;flex:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rbtn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.rbtn:hover>svg{transform:scale(1.08)}
.rbtn[aria-pressed="true"]{background:rgba(255,255,255,.08);color:var(--text)}
.rbtn[aria-pressed="true"]::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(var(--wine),var(--gold));box-shadow:0 0 10px rgba(var(--gold-rgb),.6)}
.rl{display:inline-block;max-width:0;opacity:0;overflow:hidden;transform:translateX(-8px);filter:blur(4px);transition:max-width .55s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),filter .35s ease}
.rail.open .rl{max-width:190px;opacity:1;transform:none;filter:none;transition-delay:calc(.12s + var(--i,0) * 35ms)}
.rtog{width:46px;flex:none;padding:0;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.rtog .chv{transition:transform .55s cubic-bezier(.22,1,.36,1);transform-origin:14.5px 12px}
.rail.open .rtog .chv{transform:scaleX(-1)}
.rword{position:absolute;left:58px;top:50%;translate:0 -50%;font-family:var(--serif);font-size:27px;line-height:1;letter-spacing:-.02em;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-70px) scale(.9);filter:blur(8px);transition:opacity .45s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .5s ease}
.rail.open .rword{opacity:1;pointer-events:auto;transform:none;filter:none;transition-delay:.14s}
.rword .word{font-size:27px}
.rword.tw .word{animation:rwTw .6s cubic-bezier(.22,1,.36,1)}
@keyframes rwTw{40%{transform:scale(1.06);filter:brightness(1.3) drop-shadow(0 0 10px rgba(242,166,200,.6))}}
.rsp{flex:1}
.rbot{display:flex;flex-direction:column;gap:2px}
.rgrp{display:flex;flex-direction:column;gap:2px}
/* SynXCoin's en la barrita: solo cuando la barrita está abierta o tus chats escondidos */
/* SynXCoin's en la barrita: cerrada se ve el icono con el número de hoy (abajo); abierta, el detalle */
.rcoin{overflow:hidden}
.rcoin .sxc{font-size:20px;flex:none;margin:0 -1px}
.rcoin b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.rcoin .rl{display:inline-flex;gap:6px;align-items:baseline}
.rcoin .rcn{position:absolute;right:5px;top:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:rgba(var(--gold-rgb),.2);color:#f0d8a8;font:600 9.5px var(--mono);display:grid;place-items:center;transition:opacity .3s}
.rail.open .rcoin .rcn{opacity:0}
.rme{padding-left:7px;gap:12px}
.rme .av-me{width:32px;height:32px;flex:none;box-shadow:0 0 0 2px rgba(11,12,16,.9),0 0 0 3px rgba(var(--gold-rgb),.35)}
.rme .rl small{display:block;font:10.5px var(--mono);color:var(--mute)}
.rme .rl b{display:block;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.rme .sy{position:absolute;left:33px;top:9px;width:9px;height:9px;border-radius:50%;background:#7fd6b8;box-shadow:0 0 0 2px #0b0c10}
.rme .sy.wait{background:#f2b36b;animation:blink2 .9s ease-in-out infinite}
.rme .sy.bad{background:#ff8f7a}
.rme.out .av-me{background:rgba(255,255,255,.08);color:var(--soft);box-shadow:none;border:1px dashed rgba(255,255,255,.25)}
.rguide{display:flex;flex-direction:column;align-items:center;gap:2px;width:48px;margin:6px 0 0;padding:6px 0 4px;border-radius:14px;color:var(--mute);font-size:10.5px;transition:color .3s,background .3s}
.rguide svg{width:17px;height:17px}
.rguide:hover{color:var(--text);background:rgba(255,255,255,.06)}
/* etiqueta flotante con la barrita cerrada */
.rail:not(.open) [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;translate:0 -50%;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(18,19,26,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);font-size:12.5px;white-space:nowrap;pointer-events:none;animation:tipin .35s cubic-bezier(.22,1,.36,1) both;z-index:5}
@keyframes tipin{from{opacity:0;transform:translateX(-6px)}}

/* ---------- tus chats ---------- */
.chats{position:relative;z-index:20;flex:none;width:var(--cw);overflow:hidden;border-right:1px solid var(--line);background:rgba(11,12,16,.42);transition:width .62s cubic-bezier(.22,1,.36,1),opacity .45s ease,border-color .4s}
.cin{width:var(--cw);height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px 14px 12px}
.shell.nochats .chats{width:0;opacity:0;border-right-color:transparent;pointer-events:none}
.chead{display:flex;align-items:center;justify-content:space-between;height:48px;margin-bottom:-2px}
.chead .back{transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1),filter .45s ease}
.shell.ropen .chead .back{opacity:0;transform:translateX(-60px) scale(.92);filter:blur(8px)}
.chats .x-close{display:none}
.cseg{width:100%;display:grid;grid-template-columns:1fr 1fr}
.cseg button{justify-content:center}
.csearch{padding-left:12px}
.csearch svg{width:15px;height:15px;color:var(--mute);flex:none}
.csearch input{padding:10px !important;font-size:13.5px !important}
.chats .thlist{flex:1;min-height:0;overflow-y:auto;padding:0 2px 8px;margin:0 -4px;overscroll-behavior:contain;scrollbar-width:thin}
.chats .thi{animation:thiin .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes thiin{from{opacity:0;transform:translateX(-10px);filter:blur(4px)}}
.thi .av.xs{flex:none}
.thi .tt mark{background:none;color:var(--gold)}
.thi .snip{display:block;font-size:11.5px;color:var(--soft);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{padding-top:10px;border-top:1px solid var(--line);transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .4s}
.shell.ropen .side-foot{opacity:0;transform:translateY(8px);filter:blur(5px)}
.side-foot .sxfoot{margin:0;width:100%;justify-content:flex-start;padding:8px 10px}
.fvi{display:block;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .25s;animation:thiin .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 22ms)}
.fvi:hover{background:rgba(255,255,255,.06)}
.fvi b{display:flex;align-items:center;gap:6px;font:11.5px var(--mono);color:var(--mute);margin-bottom:4px}
.fvi b::before{content:"★";color:var(--gold)}
.fvi p{margin:0;font-size:13px;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.thnone em{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--mute)}

/* ---------- cabecera nueva ---------- */
.top{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:72px;padding:12px clamp(16px,3vw,32px)}
.top .tsp{flex:1}
.mlogo,.paym{display:none}
.pickrow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.mchip{position:relative;display:inline-flex;align-items:center;gap:10px;max-width:min(42vw,420px);min-height:46px;padding:5px 14px 5px 5px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);transition:background .3s,border-color .3s,box-shadow .5s,transform .3s cubic-bezier(.22,1,.36,1);animation:chipin .55s cubic-bezier(.22,1,.36,1) both}
.mchip:hover{background:rgba(255,255,255,.08);border-color:color-mix(in srgb,var(--vc) 55%,transparent);box-shadow:0 0 30px -10px var(--vc)}
.mchip .av{width:34px;height:34px;border-radius:50%;font-size:19px}
.mchip b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mchip .cv{width:14px;height:14px;flex:none;color:var(--mute);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.side.open~* .mchip .cv,.mchip[aria-expanded="true"] .cv{transform:rotate(180deg)}
.mchip.c{padding-right:6px;gap:8px}
.mchip.c b{font-size:18px}
.mchip.c .av{width:30px;height:30px;font-size:17px}
.mchip .rm{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none}
.mchip .rm:hover{color:var(--text);background:rgba(255,255,255,.09)}
.mchip .rm svg{width:11px;height:11px}
.mchip.out{animation:chipout .4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chipout{to{opacity:0;transform:scale(.8);filter:blur(6px)}}
.addb{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:1px dashed rgba(255,255,255,.24);border-radius:999px;color:var(--soft);font-size:14px;transition:all .35s cubic-bezier(.22,1,.36,1);animation:chipin .6s cubic-bezier(.22,1,.36,1) .1s both}
.addb svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.addb:hover{color:var(--text);border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.07)}
.addb:hover svg{transform:rotate(90deg)}
.addb.ic{width:46px;padding:0;justify-content:center}
.addb.ic span{display:none}
.bt-mini{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--mute);transition:all .3s}
.bt-mini[aria-pressed="true"]{color:#ffd2c8;border-color:rgba(255,143,122,.6);background:rgba(255,143,122,.13)}
.guideb,.moreb{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--soft);font-size:14px;transition:background .3s,color .3s}
.guideb:hover,.moreb:hover{background:rgba(255,255,255,.08);color:var(--text)}
.guideb svg{width:16px;height:16px}
.moreb{width:42px;padding:0;justify-content:center}
.moreb svg{width:18px;height:18px}
.top .now{flex:none}
.cmp-run{display:flex;flex-direction:column;gap:18px}
.cmpgo[hidden]{display:none}
.thlist.still .thi,.thlist.still .fvi{animation:none}

/* ---------- selector de IA flotante ---------- */
#side.side{position:fixed;z-index:95;left:var(--px,90px);top:var(--py,80px);right:auto;bottom:auto;width:min(470px,calc(100vw - 24px));height:min(76vh,680px);display:flex;flex-direction:column;gap:10px;padding:16px 14px 10px 16px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:rgba(16,17,23,.8);backdrop-filter:blur(28px) saturate(1.45);-webkit-backdrop-filter:blur(28px) saturate(1.45);box-shadow:0 40px 110px -20px rgba(0,0,0,.75),0 0 0 1px rgba(var(--wine-rgb),.08);transform-origin:var(--ox,30px) 0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.94);filter:blur(8px);transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .4s ease,visibility 0s linear .55s;min-height:0}
#side.side.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .4s ease,visibility 0s}
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.phead b{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.015em}
#side .x-close{display:grid;width:38px;height:38px;border:1px solid var(--line)}
.pnote{margin:-2px 0 0;padding:9px 12px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.07);font-size:12.5px;color:#f0d8a8;line-height:1.45}
.pmore{border:1px solid var(--line);border-radius:14px;padding:0 12px;background:rgba(0,0,0,.18)}
.pmore summary{cursor:pointer;list-style:none;padding:9px 0;font:12px var(--mono);color:var(--mute);display:flex;align-items:center;gap:8px}
.pmore summary::-webkit-details-marker{display:none}
.pmore summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pmore[open] summary::before{transform:rotate(45deg)}
.pmin{display:flex;flex-direction:column;gap:10px;padding:2px 0 12px}
#side .mlist{flex:1;min-height:120px}
#side .side-done{display:none}
.mi.cmpd{opacity:.5}
.mi.cmpd::after{content:"ya está";position:absolute;right:46px;top:50%;translate:0 -50%;font:10px var(--mono);color:var(--mute)}

/* ---------- v1.0B: primera vez (camino B) ---------- */
#bflow{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:radial-gradient(900px 600px at 50% -20%,rgba(var(--wine-rgb),.22),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(42,133,134,.14),transparent 60%),#0b0c10;opacity:0;transition:opacity .55s ease}
#bflow.on{opacity:1}
#bflow.bye{opacity:0;transition:opacity .55s ease .05s}
#bflow.bye .bf-pane{transform:translateY(-30px) scale(.98);filter:blur(8px);opacity:0;transition:all .5s cubic-bezier(.55,0,.75,.2)}
.bf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px clamp(16px,3vw,32px)}
.bf-logo .flw-w,.bf-logo{font-family:var(--serif);font-size:28px;line-height:1;letter-spacing:-.02em}
.bf-steps{list-style:none;margin:0;padding:4px;display:flex;flex-wrap:wrap;gap:4px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.bf-steps li{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;color:var(--mute);font-size:13.5px;transition:background .5s,color .5s}
.bf-steps li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:500;border:1px solid rgba(255,255,255,.2)}
.bf-steps li.on{background:rgba(var(--gold-rgb),.14);color:#f0d8a8}
.bf-steps li.on b{background:var(--gold);color:#1a1205;border-color:var(--gold);font-weight:600}
.bf-steps li.done{color:var(--soft)}
.bf-steps li.done b{background:rgba(var(--gold-rgb),.25);color:var(--gold);border-color:transparent}
.bf-r{display:flex;gap:10px}
.bf-stage{position:relative;flex:1;min-height:0;overflow:auto;padding:0 clamp(16px,3vw,32px) 32px}
.bf-pane{width:min(1140px,100%);margin:0 auto;display:flex;flex-direction:column;gap:26px;padding-top:clamp(6px,3vh,30px)}
.bf-h{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.bf-h .greet{max-width:none}
.bf-h p{margin:0;color:#a3a6b1;font-size:15.5px}
.bf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:1080px;margin:0 auto}
.bf-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:150px;padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:var(--text);text-align:left;animation:gpin .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 50ms);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s,box-shadow .45s}
.bf-card:hover{transform:translateY(-5px);border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.06);box-shadow:0 24px 60px -28px rgba(var(--wine-rgb),.7)}
.bf-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--tc,var(--gold));background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bf-card:hover .bf-ic{transform:rotate(-8deg) scale(1.08)}
.bf-ic svg{width:22px;height:22px}
.bf-ic i{font-style:normal;font-size:20px}
.bf-card b{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.05}
.bf-card small{font-size:13.5px;color:#a3a6b1;line-height:1.4}
.bf-card.more{border-style:dashed;border-color:rgba(var(--gold-rgb),.35)}
.bf-card.more .bf-ic{color:var(--gold)}
.bf-grid.all .bf-card{min-height:120px}
.bf-skip{margin:0;text-align:center;font-size:14px;color:var(--mute)}
.bf-skip .lnk{color:var(--gold)}
.bf-h2{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.bf-h2 h2{margin:6px 0 4px;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.02;letter-spacing:-.02em}
.bf-h2 h2 em{color:var(--gold)}
.bf-h2 p{margin:0;color:#a3a6b1;font-size:15px}
.bf-back{color:var(--gold);text-decoration:none}
.bf-recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.bf-rec{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);animation:gpin .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.1s + var(--i) * 90ms);transition:border-color .35s,background .35s}
.bf-rec.on{border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.06)}
.bf-rh{display:flex;align-items:center;gap:12px}
.bf-rh .av{width:50px;height:50px;border-radius:16px;font-size:24px}
.bf-rh b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1}
.bf-rh small{font-size:12.5px;color:var(--mute)}
.bf-rec p{margin:0;font-size:14.5px;line-height:1.45;color:#d6d7dc}
.bf-rec ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#a3a6b1}
.bf-rec li::before{content:"✓ ";color:var(--gold)}
.bf-rec .mpay{align-self:flex-start}
.bf-ra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.bf-ra .btn{flex:1;min-height:44px;justify-content:center}
.bf-wait{color:var(--mute);text-align:center}
.bf-go{position:sticky;bottom:12px;align-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.3);background:rgba(20,16,14,.9);backdrop-filter:blur(14px);font-size:14px;color:var(--soft)}
.bf-go b{color:var(--text)}
.bf-go[hidden]{display:none}
html.bflowing .shell{filter:blur(6px)}
@media (max-width:900px){.bf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .bf-top{padding:14px 16px}
  .bf-steps{order:3;width:100%;background:none;border:0;padding:0;gap:8px;justify-content:space-between}
  .bf-steps li{flex:1;flex-direction:column;align-items:flex-start;gap:6px;padding:0;min-height:0;background:none !important;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  .bf-steps li::before{content:"";display:block;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
  .bf-steps li.on::before,.bf-steps li.done::before{background:var(--gold)}
  .bf-steps li b{display:none}
  .bf-r .bf-guide{display:none}
  .bf-card{min-height:104px;padding:14px;gap:6px}
  .bf-card b{font-size:21px}
  .bf-card small{font-size:12px}
  .bf-ic{width:34px;height:34px;border-radius:11px}
  .bf-ic svg{width:18px;height:18px}
  .bf-h .greet{font-size:clamp(34px,10vw,44px)}
}
html.noanim .bf-card,html.noanim .bf-rec{animation:none}

/* ---------- v1.0B: tus chats (como «A · Inicio») ---------- */
.cseg[hidden]{display:none !important}
.cnew{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);font-size:14.5px;transition:background .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.cnew:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--gold-rgb),.4)}
.cnew:active{transform:scale(.98)}
.cnew svg{width:16px;height:16px}
.cnew[hidden]{display:none}
.cfavh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px 2px}
.cfavh b{font-family:var(--serif);font-weight:400;font-size:18px;color:#f2c46b;white-space:nowrap}
.cfavh .lnk{flex:none;white-space:nowrap;font-size:13px}
.cfavh[hidden]{display:none}
.chats .thg{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:12px 10px 4px}
.chats .thi{gap:10px;padding:10px 8px 10px 10px;border-radius:12px}
.chats .thi .thd{width:8px;height:8px;border-radius:50%;flex:none;background:var(--vc);box-shadow:0 0 8px -1px var(--vc);opacity:.85}
.chats .thi .tt b{font-weight:400;color:var(--soft)}
.chats .thi.cur{background:rgba(255,255,255,.08);box-shadow:none}
.chats .thi.cur .tt b{color:var(--text)}
.chats .thi .tt small{display:none}

/* ---------- v1.0B: inicio limpio («A · Inicio») ---------- */
.cpick{display:none}
body.fresh .cpick{display:flex;align-items:center;gap:8px;min-width:0}
.cpk{display:inline-flex;align-items:center;gap:9px;min-height:44px;max-width:min(320px,52vw);padding:0 14px 0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);color:var(--text);font-size:14px;transition:background .3s,border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.cpk:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--gold-rgb),.45)}
.cpk .av{width:30px;height:30px;border-radius:50%;font-size:16px;flex:none}
.cpk b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk .sug{font-style:normal;font-size:11.5px;color:var(--gold);border:1px solid rgba(var(--gold-rgb),.4);border-radius:999px;padding:1px 8px;flex:none}
.cpk .cv{width:14px;height:14px;flex:none;transition:transform .35s}
.cpk2{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px dashed rgba(255,255,255,.22);color:var(--soft);font-size:14px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.cpk2:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(var(--gold-rgb),.5)}
.cpk2 svg{width:15px;height:15px}
.cpk2[hidden]{display:none}
.hsub2{margin:-4px 0 0;max-width:52ch;font-size:15.5px;color:#a3a6b1;line-height:1.5;animation:chipin .7s cubic-bezier(.22,1,.36,1) .3s both}
.hcomp{width:100%;max-width:800px}
.composer.big{padding:0;width:100%}
.composer.big .comp-in{width:100%;display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"f f f f" "a p . s";align-items:center;gap:12px 8px;padding:16px 16px 12px;border-radius:26px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);box-shadow:0 30px 80px -40px rgba(var(--wine-rgb),.55);transition:border-color .4s,box-shadow .5s}
.composer.big .comp-in:focus-within{border-color:rgba(var(--gold-rgb),.4);box-shadow:0 30px 90px -36px rgba(var(--wine-rgb),.7)}
.composer.big .comp-in>.field{grid-area:f;border:0;background:none}
.composer.big .comp-in textarea{font-size:16.5px;padding:6px 8px;min-height:56px}
.composer.big .attw{grid-area:a}
.composer.big .cpick{grid-area:p}
.composer.big .send{grid-area:s}
.composer.big .hintline,.composer.big .trialbar{display:none}
.composer.big .tray{margin-bottom:8px}
body.fresh .hello{padding-top:clamp(18px,6vh,60px);gap:22px}
body.fresh .hello .topics{max-width:800px}
.hexr{margin:4px auto 14px;max-width:760px;gap:10px}
.hexr .hxs{padding:11px 14px;gap:4px;border-radius:15px}
.hexr .hxs span{font-size:13.5px}
.hexs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;width:100%;max-width:800px}
.hex{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:var(--text);text-align:left;font-size:14.5px;line-height:1.4;animation:chipin .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.35s + var(--i) * 80ms);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.hex:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--gold-rgb),.35);transform:translateY(-3px)}
.hex small{font:11px var(--mono);letter-spacing:.08em;color:var(--gold)}
.hfoot{margin:0;font-size:12.5px;color:var(--mute)}
.tpanel{width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.paypill{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(143,211,199,.35);background:rgba(143,211,199,.07);color:#bfeee4;font-size:13.5px;white-space:nowrap;animation:chipin .55s cubic-bezier(.22,1,.36,1) both;transition:background .3s}
.paypill i{width:8px;height:8px;border-radius:50%;background:#7fd6b8;box-shadow:0 0 10px #7fd6b8;flex:none}
.paypill b{color:#fff;font-weight:600}
.paypill .cv{width:14px;height:14px}
.paypill.tr{border-color:rgba(var(--gold-rgb),.38);background:rgba(var(--gold-rgb),.08);color:#f0d8a8}
.paypill.tr i{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.paypill.or{border-color:rgba(184,196,255,.4);background:rgba(184,196,255,.07);color:#d6dcff}
.paypill.or i{background:#b8c4ff;box-shadow:0 0 10px #b8c4ff}
.paypill.sz{border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.07);color:#f3dcae}
.paypill.sz i{background:var(--gold);box-shadow:0 0 10px var(--gold);animation:szlive 2.4s ease-in-out infinite}
.paypill.off{border-color:rgba(255,143,122,.4);background:rgba(255,143,122,.07);color:#ffc6b9}
.paypill.off i{background:#ff8f7a;box-shadow:0 0 10px #ff8f7a}
.paypill:hover{filter:brightness(1.1)}
@media (max-width:760px){
  body.fresh .cpick{order:-1;width:100%}
  body.fresh .comp-in{flex-wrap:wrap}
  body.fresh .comp-in .cpick{flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .cpk{max-width:62vw}
  .cpk2 span{display:none}
  .hsub2{font-size:14px}
  .hexs{grid-template-columns:1fr}
  .hexs.hexr{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(64%,1fr);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 2px 4px;margin:2px 0 10px}
  .hexr .hxs{scroll-snap-align:start}
  .hfoot{display:none}
}
html.noanim .hex,html.noanim .paypill{animation:none}

/* cabecera: con 3 o 4 IA los chips se compactan para que siempre quepa el «+» */
.pickrow .mchip.c{max-width:190px}
.pickrow.n3 .mchip.c,.pickrow.n4 .mchip.c{max-width:150px;padding-right:8px}
.pickrow.n4 .mchip.c b{font-size:16px}
.pickrow .mchip.c b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now.idle{display:none}

/* ---------- v1.0B: selector de IA ampliado (se abre desde donde lo tocas) ---------- */
#scrim.pick{opacity:1;pointer-events:auto;z-index:94;background:rgba(5,6,10,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#side.side{position:fixed;z-index:96;left:50%;top:50%;right:auto;bottom:auto;translate:-50% -50%;width:min(780px,calc(100vw - 32px));height:min(86vh,800px);display:flex;flex-direction:column;gap:12px;padding:22px 20px 14px 22px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:rgba(18,17,22,.9);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);box-shadow:0 50px 140px -30px rgba(0,0,0,.9),0 0 0 1px rgba(var(--wine-rgb),.1);opacity:0;visibility:hidden;pointer-events:none;transform:none;filter:none;transition:none}
#side.side.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition:none}
#side .phead b{font-size:clamp(28px,3.4vw,36px)}
#side .ptabs{align-self:flex-start;flex:none}
#side .ptabs button{padding:8px 16px;font-size:13.5px}
.ptopics{display:flex;flex-wrap:wrap;gap:7px;flex:none}
.tchip.sm{min-height:34px;padding:0 13px;font-size:13px}
.tchip.sm[aria-pressed="true"]{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.14);color:#f6dfae}
.tchip.rise{animation:tchipRise .55s cubic-bezier(.22,1,.36,1) both}
@keyframes tchipRise{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(5px)}}
#side .pnote{flex:none;margin:0;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--soft)}
#side .pnote b{color:var(--text);font-weight:600}
#side .pnote.warn{border-color:rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.07);color:#f0d8a8}
#side .pnote.warn b{color:#ffe7b0}
#side .mlist{flex:1;min-height:150px;margin-right:-8px;padding-right:8px}
#side .mi{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:10px 10px 10px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);border-radius:18px}
#side .mi:hover{background:rgba(255,255,255,.05)}
#side .mi.ck{border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.07)}
#side .mi.sel{border-color:rgba(255,255,255,.16)}
#side .mi .av{width:42px;height:42px;border-radius:13px;font-size:19px}
.mi-t{min-width:0}
.mi-name{display:flex;align-items:center;gap:8px;min-width:0}
.mi-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpay{flex:none;font-style:normal;font-family:var(--sans);font-size:11px;line-height:1;padding:4px 9px;border-radius:999px;border:1px solid rgba(143,211,199,.45);color:#9fe0d4;white-space:nowrap}
.mpay.tr{border-color:rgba(var(--gold-rgb),.55);color:#f0d8a8}
.mpay.or{border-color:rgba(184,196,255,.5);color:#c9d1ff}
.mpay.lock{border-style:dashed;opacity:.85;border-color:rgba(255,255,255,.24);color:var(--mute);background:none}
#side .mi-ex{margin-top:4px}
#side .mi-ex::before{content:none}
.mi-a{display:flex;align-items:center;gap:8px}
.mi-a .star{position:static;opacity:.55}
#side .mi:hover .mi-a .star,#side .mi.fav .mi-a .star{opacity:1}
.mi-a .ckb{min-height:36px;padding:0 11px}
.mi-a .muse{min-height:36px;padding:0 16px}
.mya{font:11px var(--mono);color:var(--mute);padding:0 8px}
#side .mi.cmpd{opacity:.55}
#side .mi.cmpd::after{content:none}
.pfoot{display:flex;align-items:flex-start;gap:10px;flex:none;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.pfoot .pmore{flex:1;min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain}
#side .pfoot{flex:0 1 auto;min-height:0;max-height:46%}
#side .mlist{min-height:120px}
#side.side{overflow:hidden}
@media (max-width:560px){.pmx{display:none}}
.pfoot .pmore .filters{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px}
.pgo{flex:none;min-height:42px;padding:0 18px}
.pgo.pop{animation:pgoPop .55s cubic-bezier(.22,1,.36,1)}
@keyframes pgoPop{from{transform:scale(.85);opacity:0;filter:blur(4px)}}
.flychip{position:fixed;left:0;top:0;z-index:9700;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(24,22,28,.92);color:var(--text);font-size:14px;white-space:nowrap;pointer-events:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 24px -6px var(--vc)}
.flychip b{font-weight:500;font-family:var(--serif);font-size:17px}
@media (max-width:760px){
  #side.side{left:0;right:0;top:auto;bottom:0;translate:none;width:100%;height:min(88vh,88dvh);border-radius:26px 26px 0 0;padding:18px 14px calc(12px + env(safe-area-inset-bottom))}
  .ptopics{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .ptopics::-webkit-scrollbar{display:none}
  .ptopics .tchip{flex:none}
  #side .mi{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .mi-a{grid-column:1 / -1;justify-content:flex-end}
  .mi-a .star{margin-right:auto}
  #side .side-done{display:none}
}
html.noglass #side.side{background:#16151b !important}
html.noanim .tchip.rise,html.noanim .pgo.pop{animation:none}

/* ---------- saludo e inicio ---------- */
.hello{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:34px 0 18px}
.greet{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.02em;color:var(--text);max-width:19ch;text-wrap:balance}
.greet .wp{margin-left:-.1em}
.greet .w{display:inline-block;animation:gw 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 55ms + .05s)}
@keyframes gw{from{opacity:0;transform:translateY(.45em) rotate(1.5deg);filter:blur(12px)}}
.greet em{font-style:italic;background:linear-gradient(90deg,var(--wine),var(--gold),#ffd9a0,var(--gold),var(--wine));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;animation:gw 1s cubic-bezier(.22,1,.36,1) both,flowsheen 7s linear infinite;animation-delay:calc(var(--i) * 55ms + .05s),0s}
@keyframes flowsheen{to{background-position:-250% 0}}
.hsub{margin:0;font-size:14.5px;color:var(--mute);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;animation:chipin .7s cubic-bezier(.22,1,.36,1) .35s both}
.hsub .hm{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border:1px solid var(--line);border-radius:999px;color:var(--text);background:rgba(255,255,255,.04);transition:background .3s,border-color .3s}
.hsub .hm:hover{background:rgba(255,255,255,.08);border-color:rgba(var(--gold-rgb),.45)}
.hsub .hm .av{width:24px;height:24px;border-radius:50%;font-size:14px}
.topics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px}
.tchip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);font-size:13.5px;color:var(--soft);transition:color .3s,background .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1);animation:chipin .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 28ms + .45s)}
.tchip:hover{color:var(--text);background:rgba(255,255,255,.07);transform:translateY(-2px)}
.tchip[aria-pressed="true"]{color:#f6e3bd;border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.12);box-shadow:0 0 26px -10px rgba(var(--gold-rgb),.8)}
.tchip.more{border-style:dashed;color:var(--gold)}
.tpanel{width:100%;max-width:820px;text-align:left}
.tphead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 2px 10px}
.tphead h5{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;color:var(--text)}
.tphead h5 em{font-style:italic;color:var(--gold)}
.tphead small{font-size:12px;color:var(--mute)}
.rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);transition:border-color .35s,background .35s,transform .45s cubic-bezier(.22,1,.36,1),box-shadow .5s;animation:rcin .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes rcin{from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(8px)}}
.rcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--vc) 45%,transparent);box-shadow:0 20px 50px -24px var(--vc)}
.rcard.on{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.06)}
.rcard .rh{display:flex;align-items:center;gap:10px}
.rcard .rh b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.05}
.rcard .rh small{display:block;font:11px var(--mono);color:var(--mute)}
.rcard p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.45}
.rcard .rpay{align-self:flex-start;font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--soft)}
.rcard .rpay.tr{border-color:rgba(var(--gold-rgb),.45);color:#f0d8a8}
.rcard .rpay.pu{border-color:rgba(127,214,184,.4);color:#bfeedd}
.rcard .rpay.or{border-color:rgba(184,196,255,.4);color:#d4dbff}
.rcard .ra{display:flex;align-items:center;gap:8px;margin-top:auto}
.rcard .ra .btn{flex:1;justify-content:center}
.ckb{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--soft);cursor:pointer;user-select:none;transition:all .3s}
.ckb input{accent-color:var(--gold);width:15px;height:15px;margin:0}
.ckb:has(input:checked){border-color:rgba(var(--gold-rgb),.55);color:#f6e3bd;background:rgba(var(--gold-rgb),.08)}
.texs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.texs button{text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.2);font-size:13px;color:var(--soft);transition:all .3s;animation:chipin .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 70ms + .25s)}
.texs button:hover{color:var(--text);border-color:rgba(var(--gold-rgb),.45)}
.texs button::before{content:"✦ ";color:var(--gold)}
.cmpgo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px auto 0;padding:8px 8px 8px 18px;border:1px solid rgba(var(--gold-rgb),.35);border-radius:999px;background:rgba(20,16,14,.7);width:max-content;max-width:100%;animation:chipin .5s cubic-bezier(.22,1,.36,1) both;font-size:13.5px;color:var(--soft)}
.btn.flow{background:linear-gradient(90deg,var(--wine),var(--gold));color:#1a0f08;font-weight:600}
.btn.flow:hover{filter:brightness(1.08)}
.hconn{display:flex;flex-direction:column;align-items:center;gap:10px;animation:chipin .7s cubic-bezier(.22,1,.36,1) .3s both}
.hconn p{margin:0;font-size:14.5px;color:var(--mute);max-width:46ch}

/* ---------- comparar: llegan en orden, sin cajas vacías ---------- */
.lane:has(.cmp-run){width:min(100%,1220px)}
.pickrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px 2px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.pickrow::-webkit-scrollbar{display:none}
.pickrow>*{flex:none}
body.cmpm .top .now-chip.live{display:none}
.cmp-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
.cmp-grid>.cmp-card{flex:1 1 250px;min-width:0;animation:none}
.cmp-card.arrive{animation:arrive .85s cubic-bezier(.22,1,.36,1) both}
@keyframes arrive{0%{opacity:0;transform:translateY(20px) scale(.96);filter:blur(12px)}60%{filter:blur(0)}100%{opacity:1;transform:none}}
.cmp-grid .vote{flex:1 1 100%}
.cmp-wait{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 2px}
.cmp-wait span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(184,196,255,.08);border:1px solid rgba(184,196,255,.18);font-size:12.5px;color:#d4dbff;animation:chipin .45s cubic-bezier(.22,1,.36,1) both}
.cmp-wait span.out{animation:chipout .4s cubic-bezier(.22,1,.36,1) forwards}
.cmp-card .flowb{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:6px 14px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.08);font-size:12.5px;color:#f6e3bd;transition:all .35s cubic-bezier(.22,1,.36,1)}
.cmp-card .flowb:hover{background:linear-gradient(90deg,rgba(var(--wine-rgb),.35),rgba(var(--gold-rgb),.35));transform:translateY(-1px) scale(1.03)}
.cmp-card .flowb i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;margin:-4px 0 -4px -6px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cmp-card .flowb:hover i{transform:rotate(-12deg) scale(1.25)}
.cmp-card.picked{box-shadow:0 0 0 2px rgba(var(--gold-rgb),.8),0 0 50px -10px rgba(var(--gold-rgb),.6)}
.cmp-note{font:11.5px var(--mono);color:var(--mute);text-align:center;margin-top:-6px}

/* ---------- favoritos: estrella en las respuestas y vuelo dorado ---------- */
.act[data-a="star"][aria-pressed="true"]{color:#f6d9a0;border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.1)}
.act[data-a="star"][aria-pressed="true"] svg{fill:var(--gold);stroke:var(--gold)}
.m.bot.starred::after{content:"★";position:absolute;left:-7px;top:-4px;font-size:12px;color:var(--gold);text-shadow:0 0 10px rgba(var(--gold-rgb),.8);animation:avpop .5s cubic-bezier(.22,1,.36,1) both}
.flystar{position:fixed;left:0;top:0;z-index:9990;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;color:#ffd98f;filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.95))}
.flystar svg{width:100%;height:100%;fill:currentColor}
.flytrail{position:fixed;left:0;top:0;z-index:9989;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffe2a8,var(--wine) 70%,transparent 72%)}
.rbtn.got>svg{animation:gotfav .8s cubic-bezier(.22,1,.36,1)}
@keyframes gotfav{30%{transform:scale(1.45) rotate(-14deg);color:#f6d9a0;filter:drop-shadow(0 0 8px var(--gold))}}
.m.flash{animation:mflash 1.6s ease}
@keyframes mflash{0%,100%{background:transparent}25%{background:rgba(var(--gold-rgb),.1)}}

/* ---------- caja de escribir ---------- */
.attw{position:relative;flex:none;display:flex;align-items:center;gap:6px}
.attach[aria-expanded="true"]{background:rgba(var(--gold-rgb),.12);color:#f6e3bd;border-color:rgba(var(--gold-rgb),.5)}
.attach svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.attach[aria-expanded="true"] svg{transform:rotate(-30deg) scale(1.05)}
.amenu{position:absolute;left:0;bottom:calc(100% + 12px);z-index:30;width:270px;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(18,19,26,.82);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 24px 70px rgba(0,0,0,.55);transform-origin:20px 100%;animation:amin .45s cubic-bezier(.22,1,.36,1) both}
.amenu[hidden]{display:none}
.amenu.bye{animation:amout .28s ease forwards}
@keyframes amin{from{opacity:0;transform:translateY(10px) scale(.94);filter:blur(6px)}}
@keyframes amout{to{opacity:0;transform:translateY(8px) scale(.96);filter:blur(4px)}}
.amenu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;transition:background .25s;animation:chipin .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 50ms + 60ms)}
.amenu button:nth-child(2){--i:1}.amenu button:nth-child(3){--i:2}
.amenu button:hover{background:rgba(255,255,255,.08)}
.amenu i{font-style:normal;font-size:20px;width:30px;text-align:center}
.amenu b{display:block;font-weight:500;font-size:14px;color:var(--text)}
.amenu small{display:block;font-size:11.5px;color:var(--mute)}
.amenu .ahint{margin:6px 10px 6px;font-size:11.5px;color:var(--mute);line-height:1.4}
.only-touch{display:none !important}
@media (pointer:coarse){.only-touch{display:flex !important}}
.payl{display:inline-flex;align-items:center;gap:7px;margin-right:10px;padding:2px 10px 2px 8px;border:1px solid var(--line);border-radius:20px;color:var(--soft)}
.payl i{width:7px;height:7px;border-radius:50%;background:#7fd6b8;box-shadow:0 0 8px #7fd6b8;flex:none}
.payl.tr{border-color:rgba(var(--gold-rgb),.4);color:#f0d8a8}
.payl.tr i{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.payl.off i{background:#ff8f7a;box-shadow:0 0 8px #ff8f7a}
.payl .lnk{font-size:11.5px;padding:0;margin-left:4px;color:var(--mute)}
.payl:empty{display:none}
.trialbar[hidden]{display:none}

/* ---------- menú «⋯» ---------- */
.ctxm.mm{animation:mmin .4s cubic-bezier(.22,1,.36,1) both}
@keyframes mmin{from{opacity:0;transform:translateY(-6px) scale(.96);filter:blur(5px)}}
.ctxm.mm button{display:flex;align-items:center;gap:10px}
.ctxm.mm hr{border:0;border-top:1px solid var(--line);margin:4px 6px}

/* ---------- barra de pestañas (celular) ---------- */
.tabbar{display:none}

/* entrada con la página */
html.enter:not(.go) .rail{opacity:0;translate:-24px 0}
html.enter:not(.go) .chats{opacity:0;translate:-18px 0;--td:.08s}
.rail,.chats{transition-property:width,opacity,translate,border-color;transition-duration:.62s,1s,1.1s,.4s;transition-timing-function:cubic-bezier(.22,1,.36,1)}

/* tablet: tus chats flotan sobre la conversación */
@media (max-width:1100px) and (min-width:761px){
  .chats{position:absolute;left:var(--rw);top:0;bottom:0;z-index:35;background:rgba(14,15,20,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:30px 0 80px rgba(0,0,0,.5)}
  .chats .x-close{display:grid}
  .mchip{max-width:34vw}
  .guideb span{display:none}
  .guideb{width:42px;padding:0;justify-content:center}
}

/* celular: la UI de C (pestañas abajo) con el inicio de A */
@media (max-width:760px){
  .rail{display:none}
  .shell{flex-direction:column}
  .chats{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:min(86dvh,760px);z-index:96;border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:26px 26px 0 0;background:rgba(16,17,23,.86);backdrop-filter:blur(28px) saturate(1.45);-webkit-backdrop-filter:blur(28px) saturate(1.45);box-shadow:0 -30px 90px rgba(0,0,0,.6);transform:translateY(105%);opacity:1;transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .chats.msheet{transform:none}
  .shell.nochats .chats{width:auto;opacity:1;pointer-events:auto}
  .cin{width:100%;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .chats .x-close{display:grid}
  .shell.ropen .chead .back{opacity:1;transform:none;filter:none}
  .top{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"logo sp guide more" "pick pick pick pick";gap:8px;padding:10px 14px;min-height:0}
  .mlogo{display:inline-flex;grid-area:logo;align-items:center}
  .mlogo .word{font-size:25px}
  .pickrow{grid-area:pick;flex-wrap:wrap;overflow:visible;-webkit-mask:none;mask:none;padding:2px 0}
  .pickrow::-webkit-scrollbar{display:none}
  .top .tsp{grid-area:sp}
  .guideb{grid-area:guide;width:42px;padding:0;justify-content:center}
  .guideb span{display:none}
  .moreb{grid-area:more}
  .top .now{display:none}
  .paym{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--soft);white-space:nowrap}
  .paym.tr{border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.08);color:#f0d8a8}
  .paym i{width:6px;height:6px;border-radius:50%;background:#7fd6b8}
  .paym.tr i{background:var(--gold)}
  .paym.off i{background:#ff8f7a}
  .mchip{max-width:62vw;min-height:42px}
  .mchip b{font-size:18px}
  .addb span{display:none}
  .addb{width:42px;min-height:42px;padding:0;justify-content:center}
  .payl{display:none}
  .hintline{display:none}
  .composer{padding:8px 12px 8px}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:6px 6px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(11,12,16,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:14px;color:var(--mute);font-size:11px;transition:color .3s,background .3s}
  .tabbar button svg{width:21px;height:21px}
  .tabbar button[aria-pressed="true"]{color:var(--text);background:rgba(255,255,255,.07)}
  .tabbar .tci .sxc{font-size:21px}
  .tabbar .tme .av-me{width:24px;height:24px;font-size:11px}
  #side.side{left:0 !important;right:0;top:auto !important;bottom:0;width:auto;height:min(86dvh,760px);border-radius:26px 26px 0 0;border-bottom:0;transform:translateY(100%);filter:none;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #side.side.open{transform:none}
  #side .side-done{display:inline-flex;justify-content:center}
  .hello{padding:18px 0 8px;gap:14px}
  .greet{font-size:clamp(34px,10vw,44px)}
  .tobottom{bottom:150px}
  .amenu{width:min(270px,80vw)}
}
@media (max-width:760px){ #scrim.on{opacity:1;pointer-events:auto} }

/* modo rendimiento: mismas posiciones, sin vidrio ni animaciones largas */
html.noglass .rin,html.noglass .rail.open .rin,html.noglass #side.side,html.noglass .amenu,html.noglass .chats{background:#14151b !important}
html.noanim .rin,html.noanim .rl,html.noanim .rword,html.noanim .chats,html.noanim #side.side,html.noanim .chead .back,html.noanim .rcoin{transition-duration:.01s !important;transition-delay:0s !important}
html.noanim .greet .w,html.noanim .greet em,html.noanim .tchip,html.noanim .rcard,html.noanim .cmp-card.arrive,html.noanim .thi,html.noanim .fvi,html.noanim .texs button{animation:none !important}
@media (prefers-reduced-motion:reduce){ .greet .w,.greet em,.tchip,.rcard,.cmp-card.arrive{animation-duration:.01s !important} }

/* ===== v16: Guía Asistida (paneles, barra de progreso y ejemplo de comparar) ===== */
#szgHud{position:fixed;left:50%;top:14px;z-index:9745;display:flex;align-items:center;gap:12px;padding:7px 8px 7px 12px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.3);background:rgba(18,16,20,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 50px -16px rgba(0,0,0,.8);opacity:0;transform:translate(-50%,-16px);filter:blur(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),filter .5s ease;max-width:calc(100vw - 24px)}
#szgHud.on{opacity:1;transform:translate(-50%,0);filter:none}
#szgHud.low{top:auto;bottom:16px}
.gp-say{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:18px;border:1px solid rgba(var(--gold-rgb),.25);background:rgba(var(--gold-rgb),.06)}
.gp-say .sf{flex:none;animation:wbbob 3.4s ease-in-out infinite}
.szgp .gp-say p{margin:0;color:#ecebe7;font-size:14.5px;line-height:1.5;min-height:1.5em}
#szgHud .gh-t{font-size:12.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#szgHud .gh-t b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold,var(--gold));font-weight:500}
#szgHud .gh-t i{font-style:normal}
#szgHud .gh-bar{width:90px;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;flex:none}
#szgHud .gh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.22,1,.36,1)}
#szgHud .gh-x{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:12.5px;color:var(--soft);transition:background .3s,color .3s}
#szgHud .gh-x:hover{background:rgba(255,255,255,.08);color:var(--text)}
.szgp{position:fixed;inset:0;z-index:9720;display:grid;place-items:center;padding:70px 16px 16px;background:rgba(5,6,10,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .45s ease}
.szgp.on{opacity:1}
.szgp .gp-in{width:min(760px,100%);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow:auto;box-sizing:border-box;padding:24px;border-radius:26px;border:1px solid rgba(255,255,255,.13);background:rgba(18,17,22,.86);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 40px 110px -30px rgba(0,0,0,.9);transform:translateY(18px) scale(.97);filter:blur(8px);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .5s ease}
.szgp.on .gp-in{transform:none;filter:none}
#drv .tcard{width:min(520px,calc(100vw - 32px))}
.drh{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.drh h3{margin:2px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,4vw,30px);line-height:1.1}
.drh .tn{margin:0}
.drl{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.drl li{position:relative;padding:10px 12px 10px 34px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--soft);font-size:14px;line-height:1.45}
.drl li::before{content:"";position:absolute;left:13px;top:16px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#8fd3e8,var(--gold))}
.drl b{color:var(--text);font-weight:500}
.drst{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1px solid rgba(143,211,232,.25);background:rgba(143,211,232,.06)}
.drst .pdot2{margin-top:6px}
.drst b{display:block;font-weight:500}
.drst span{display:block;color:var(--soft);font-size:13.5px;margin-top:2px}
.drst small{display:block;color:var(--muted,#8d909c);font-size:12.5px;margin-top:4px}
/* ---------- bloqueo: sin Puter ni OpenRouter no se puede escribir ---------- */
.lockc{display:flex;align-items:center;gap:14px;text-align:left;flex-wrap:wrap;margin:0 0 10px;padding:14px 16px;border-radius:20px;border:1px solid rgba(var(--gold-rgb),.32);background:linear-gradient(135deg,rgba(var(--gold-rgb),.09),rgba(var(--wine-rgb),.07));box-shadow:0 18px 50px -24px rgba(var(--gold-rgb),.35);animation:lkIn .6s cubic-bezier(.22,1,.36,1) both}
.lockc[hidden]{display:none}
.trow2 small.tdet{grid-column:1/-1;display:block;width:100%;margin-top:4px;color:#f0d8a8;font:11.5px var(--mono);white-space:normal;line-height:1.4}
.cbox .opt{display:block;font:11px var(--mono);color:var(--mute);margin-top:2px}
.lk-ico{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--gold-rgb),.14);color:#f0d8a8}
.lk-ico svg{width:20px;height:20px}
.lk-t{flex:1 1 260px;min-width:0}
.lk-t b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;color:var(--text)}
.lk-t small{display:block;margin-top:3px;color:var(--soft);font-size:13px;line-height:1.45}
.lk-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lockc.nudge{animation:lkNudge .55s cubic-bezier(.36,.07,.19,.97)}
.lockc.nudge .lk-ico{animation:lkShake .55s ease}
@keyframes lkIn{from{opacity:0;transform:translateY(10px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes lkNudge{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes lkShake{0%,100%{transform:none}25%{transform:rotate(-14deg)}50%{transform:rotate(11deg)}75%{transform:rotate(-6deg)}}
body.locked #cPickRow,body.locked #pickRow,body.locked #payPill,body.locked #now,body.locked .topics,body.locked #tPanel,body.locked .hfoot,body.locked #hintRight,body.locked #trialBar,body.locked .hintline .saver{display:none !important}
body.locked #inp{cursor:not-allowed}
body.locked #hexR,body.locked .agentb,body.locked #railAgent,body.locked #cmpBtn{display:none !important}
.cpk2.agentb[aria-pressed="true"]{color:#f3d79e;border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.12);border-style:solid}
@media (max-width:600px){.cpk2.agentb span{display:none}}
body.locked .comp-in{opacity:.55;filter:saturate(.6)}
body.locked .attach,body.locked #sendBtn{pointer-events:none}
body.locked .hsub2{display:none}
/* SynthonIA preocupada: aparece si te ve perdido mientras todo está bloqueado */
#szWorry{position:fixed;right:22px;bottom:22px;z-index:9740;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
#szWorry .wb{position:relative;width:min(330px,calc(100vw - 32px));box-sizing:border-box;padding:16px 16px 14px;border-radius:22px;border:1px solid rgba(var(--gold-rgb),.34);background:rgba(20,17,20,.84);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);color:var(--text);opacity:0;transform:translateY(14px) scale(.9);transform-origin:85% 100%;filter:blur(6px);transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.56,.64,1),filter .45s ease;pointer-events:auto}
#szWorry .wb::after{content:"";position:absolute;right:46px;bottom:-9px;width:16px;height:16px;transform:rotate(45deg);background:rgba(20,17,20,.95);border-right:1px solid rgba(var(--gold-rgb),.34);border-bottom:1px solid rgba(var(--gold-rgb),.34)}
#szWorry.say .wb{opacity:1;transform:none;filter:none}
#szWorry .wb b{display:block;margin-bottom:4px;font:600 12px var(--sans,system-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
#szWorry .wb p{margin:0;font-size:14.5px;line-height:1.5;min-height:3em}
#szWorry .wx{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--soft);font-size:18px;line-height:1;cursor:pointer}
#szWorry .wx:hover{background:rgba(255,255,255,.08);color:var(--text)}
#szWorry .wq{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#szWorry .wq button{min-height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--soft);font:inherit;font-size:12.5px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
#szWorry .wq button:hover{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.35);color:var(--text)}
#szWorry .wq[hidden],#szWorry .wa[hidden]{display:none}
#szWorry .wa{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#szWorry .wme{position:relative;width:86px;height:86px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.45);background:radial-gradient(circle at 50% 35%,rgba(var(--gold-rgb),.16),rgba(24,18,20,.94) 70%);box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 0 rgba(var(--gold-rgb),.4);display:grid;place-items:center;cursor:pointer;pointer-events:auto;opacity:0;transform:translateY(40px) scale(.4) rotate(-12deg);transition:opacity .4s ease,transform .75s cubic-bezier(.34,1.56,.64,1)}
#szWorry.in .wme{opacity:1;transform:none;animation:wPulse 2.4s ease-out .8s 2}
#szWorry .wme .szface{animation:wbbob 2.6s ease-in-out infinite}
#szWorry .wme .fdrop{transform-origin:86px 34px;animation:wDrop 1.6s ease-in-out infinite}
#szWorry.out .wme{opacity:0;transform:translateY(30px) scale(.5)}
#szWorry.out .wb{opacity:0;transform:translateY(10px) scale(.92);filter:blur(6px)}
@keyframes wPulse{0%{box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 0 rgba(var(--gold-rgb),.45)}100%{box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 22px rgba(var(--gold-rgb),0)}}
@keyframes wDrop{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
html.noglass #szWorry .wb{background:#16141a;backdrop-filter:none;-webkit-backdrop-filter:none}
html.noanim #szWorry .wme,html.noanim #szWorry .wb{transition-duration:.01s;animation:none}
@media (max-width:760px){
  .lockc{padding:12px;gap:10px}
  .lk-ico{width:36px;height:36px}
  .lk-t b{font-size:18px}
  .lk-b{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .lk-b [data-lk=pu]{grid-column:1/-1}
  .lk-b .lnk{justify-self:center}
  #szWorry{right:12px;bottom:calc(150px + env(safe-area-inset-bottom))}
  #szWorry .wme{width:70px;height:70px}
}
.szgp.bye .gp-in{transform:translateY(-14px) scale(.97);filter:blur(8px)}
.szgp.rev:not(.on) .gp-in{transform:translateY(-18px) scale(.97)}
.szgp.bye.back .gp-in{transform:translateY(18px) scale(.97) !important;filter:blur(8px)}
.gp-back{background:none;border:0;color:var(--soft);font:inherit;font-size:13.5px;cursor:pointer;padding:8px 4px}
.gp-back:hover{color:#ecebe7}
.gp-say .sf svg{width:58px;height:58px}
@media (max-width:560px){.gp-say .sf svg{width:46px;height:46px}}
.szgp h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,38px);line-height:1.05;letter-spacing:-.01em}
.szgp p{margin:0 0 14px;color:var(--soft);font-size:14.5px;line-height:1.5}
.szgp .gp-tag{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;background:rgba(var(--gold-rgb),.12);color:#f0d8a8;font:500 11.5px var(--mono)}
.gp-topics{display:flex;flex-wrap:wrap;gap:8px}
.gp-topics .tchip[aria-pressed="true"]{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.14);color:#f6dfae}
.gp-act{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px}
.gp-n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.gp-act .btn[disabled]{opacity:.45}
.gp-row{padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.gp-row>b{display:block;margin-bottom:8px;font-weight:500;font-size:14.5px}
.gp-ias{display:flex;flex-wrap:wrap;gap:8px}
.gp-ia{display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);animation:gpin .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 90ms + .1s)}
.gp-ia em{display:block;font-style:normal;font-family:var(--serif);font-size:18px;line-height:1.1}
.gp-ia small{display:block;font-size:11px;color:var(--mute)}
.gp-ia.none{font-size:13px;color:var(--mute)}
@keyframes gpin{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
.gd-q{margin:0 0 10px auto;max-width:80%;width:fit-content;padding:10px 14px;border-radius:16px 16px 6px 16px;background:rgba(255,255,255,.08);font-size:14px}
.gd-wait{display:flex;flex-wrap:wrap;gap:8px;min-height:6px;margin-bottom:10px}
.gd-wait>span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(184,196,255,.09);color:#c9d1ff;font-size:12.5px;animation:gpin .4s ease both;transition:opacity .35s,transform .35s,filter .35s}
.gd-wait>span.out{opacity:0;transform:translateY(-6px);filter:blur(4px)}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.gd-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);animation:gdin .8s cubic-bezier(.22,1,.36,1) both}
@keyframes gdin{0%{opacity:0;transform:translateY(18px) scale(.97);filter:blur(10px)}60%{filter:none}}
.gd-who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px}
.gd-who b{font-weight:500}
.gd-fast{margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(var(--gold-rgb),.16);color:var(--gold);font-size:10.5px}
.gd-card ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45;color:#d6d7dc}
.gd-flow{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 8px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.07);color:#f0d8a8;font-size:12.5px;transition:background .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.gd-flow.won{background:linear-gradient(90deg,var(--wine),var(--gold));color:#1a0f08;transform:scale(1.05)}
html.guiding #toast{z-index:9800}
html.noglass #szgHud,html.noglass .szgp .gp-in{background:#16141a;backdrop-filter:none;-webkit-backdrop-filter:none}
html.noanim .szgp .gp-in,html.noanim .gp-ia,html.noanim .gd-card,html.noanim .gd-wait>span{animation:none !important;transition-duration:.01s !important}
@media (max-width:560px){#szgHud .gh-bar{display:none}.szgp{padding-top:64px}.szgp .gp-in{padding:18px}}
/* ===== v2.2 · diseño claro, estilo Claude (se conservan el vidrio, el fondo y las animaciones) ===== */
:root{--code:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;--mono:'IBM Plex Mono',ui-monospace,Consolas,Menlo,monospace}
pre,code,kbd,.cvp-code,.cnv pre,.rccode,.hk-code,.og code,.fc .ic{font-family:var(--code)!important}

/* ---- la caja para escribir: todo adentro, como en Claude ---- */
.composer{padding:8px clamp(12px,4vw,48px) 18px}
.composer .comp-in{width:min(100%,780px);margin:0 auto;display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"c c c" "f f f" "a p s";align-items:center;gap:6px 8px;padding:10px 10px 10px 12px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(30,29,36,.72);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 18px 50px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .3s,box-shadow .3s}
.composer .comp-in:focus-within{border-color:rgba(var(--gold-rgb),.38)}
.composer .comp-in>.field{grid-area:f;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.composer .comp-in textarea{padding:4px 6px!important;font-size:16px!important;min-height:26px;max-height:220px}
.composer.big .comp-in textarea{min-height:56px}
.composer .attw{grid-area:a;display:flex;align-items:center;gap:6px}
.composer .cpick{grid-area:p;min-width:0;display:flex!important;align-items:center;gap:6px;overflow:hidden;justify-content:flex-end;order:0!important;width:auto!important;flex:initial!important}
.composer .send{grid-area:s;width:36px;height:36px;border-radius:12px}
.composer .send svg{width:18px;height:18px}
.composer .attach{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.composer .attach svg{width:18px;height:18px}
#imgBtn,#webBtn{display:none!important}
.amenu .only-small{display:flex!important}
.amenu [aria-checked="true"]{background:rgba(var(--gold-rgb),.1)}
.amenu .mck{font-style:normal;color:var(--gold);margin-left:auto;width:14px}
.cpk{min-height:36px!important;padding:0 10px 0 6px!important;border-radius:12px!important;font-size:13.5px!important;background:rgba(255,255,255,.03)!important}
.cpk2{min-height:36px!important;border-radius:12px!important;font-size:13.5px!important;padding:0 12px!important}
.agpill{min-height:36px;border-radius:12px}
.onchips{grid-area:c;display:flex;flex-wrap:wrap;gap:6px}
.onchips:empty{display:none}
.onchip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border-radius:999px;font-size:12.5px;color:#f3dcae;background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.3);animation:chipin .4s cubic-bezier(.22,1,.36,1) both}
.onchip svg{width:12px;height:12px;opacity:.7}
.onchip:hover{background:rgba(var(--gold-rgb),.18)}
/* debajo de la caja: solo tu límite, discreto */
.hintline{width:min(100%,780px)!important;justify-content:center!important;margin-top:8px!important;font-size:12px!important}
.hintline .kbdh,.hintline .saver[aria-pressed="false"],.hintline .saver{display:none!important}
#sideFoot .sxfoot{display:none}

/* ---- la conversación: respuestas limpias, sin marcos ---- */
.lane{gap:26px}
.m.bot{padding-left:0!important}
.m.bot::before,.m.bot.brand::before{display:none!important}
.m.bot>.body,.m.bot.brand>.body{padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.m.bot .body{font-size:16px;line-height:1.75;color:var(--text)}
.m.bot .body p{margin:0 0 .8em}
.who{font-size:13px!important;gap:8px;margin-bottom:10px}
.m.bot.brand .who>b{background:none!important;-webkit-text-fill-color:currentColor;color:var(--text)!important;font-weight:600}
.m.bot.brand .who .md{border:0!important;background:rgba(255,255,255,.06)!important;color:var(--mute)!important;font-size:11.5px!important;padding:2px 8px!important}
.who .md::before{content:none!important}
.m.user .who{display:none!important}
.m.user .bub{background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.06);border-radius:20px!important;padding:10px 16px!important;font-size:15.5px;line-height:1.6}
.m .meta{font-size:12px!important;opacity:.8;margin-top:6px!important}
.work{margin:0 0 10px!important}
.work.fin .wk-row{border:0!important;background:none!important;padding:2px 2px!important;gap:6px!important}
.work.fin .wk-row .pxw{display:none}
.work.fin .wk-w{font-size:12.5px!important;color:var(--mute)!important}
.work.fin .wk-s{display:none}
/* botones bajo cada respuesta: solo íconos (dicen qué hacen al pasar el mouse) */
.m.bot .acts{position:static!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;margin-top:6px!important;gap:2px!important}
.m.bot .acts .act{font-size:0!important;gap:0!important;width:32px;height:32px;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;border:0!important;border-radius:9px!important;background:none!important;color:var(--mute)}
.m.bot .acts .act:hover{background:rgba(255,255,255,.08)!important;color:var(--text)}
.m.bot .acts .act svg{width:16px!important;height:16px!important}
.m.bot .acts .act span{display:none}
.m.bot .acts .act[data-a="star"][aria-pressed="true"]{color:var(--gold)}
.m.bot .acts .act[data-a="cont"]{font-size:12.5px!important;width:auto;padding:0 10px!important}

/* ---- arriba: menos botones ---- */
.guideb span{display:none}
.guideb{width:40px;padding:0!important;justify-content:center}
.top{border-bottom-color:transparent!important}

/* ---- inicio vacío: saludo, caja e ideas (sin texto repetido) ---- */
body.fresh .hsub2,body.fresh .hfoot{display:none!important}

/* ---- celular ---- */
@media (max-width:760px){
  .composer{padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
  .composer .comp-in{padding:8px 8px 8px 10px;border-radius:22px}
  .cpk{max-width:46vw!important}
  .cpk .sug{display:none}
  .cpk2 span{display:none}
  .m.bot .body{font-size:15.5px}
  body.fresh .comp-in .cpick{flex:initial!important;overflow:hidden!important}
}
/* ajustes finos */
.ctxm .mico svg,.m.bot .acts .act svg{display:block;margin:0!important;position:static!important;translate:none!important}
.ctxm button>*{align-self:center}
.m.bot .acts .act{vertical-align:middle;line-height:0}
/* la IA se elige arriba durante la conversación; en el inicio vacío, dentro de la caja */
body:not(.fresh) .composer #cPick,body:not(.fresh) .composer #cCmp{display:none!important}
.composer .cpick{justify-content:flex-start}
/* detalles de cada respuesta: se ven en la última y al pasar el mouse */
.m.bot:not(.last) .meta{opacity:0;transition:opacity .3s}
.m.bot:not(.last):hover .meta{opacity:.8}
.side-foot:has(.sxfoot:only-child){border-top:0}
/* el menú «+» con vidrio que sí se lee */
.amenu{background:rgba(24,23,30,.94)!important;backdrop-filter:blur(24px) saturate(1.3)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3)!important;border-radius:16px!important}
.amenu button{align-items:center!important}
.amenu button>i{display:grid;place-items:center;width:28px;flex:none;font-style:normal}
#attMenu.amenu{background:rgba(24,23,30,.97)!important}
@media (hover:none){#attMenu .ahint{display:none}}
/* ===== v2.3 · SuperiorSynth (antes «modo agente»): ícono animado, pestaña junto a Chats, sello arriba y barrita del límite ===== */
.ssi{display:block;width:18px;height:18px;flex:none;overflow:visible}
.ssi.lg{width:24px;height:24px}
.ssi .ssi-o{stroke-opacity:.8}
.ssi .ssi-s{transform-box:fill-box;transform-origin:center;animation:ssBeat 4.2s cubic-bezier(.45,0,.25,1) infinite}
.ssi.lg .ssi-s,.sstop .ssi-s,#railAgent[aria-pressed="true"] .ssi-s{filter:drop-shadow(0 0 2.5px rgba(var(--gold-rgb),.6))}
.ssi .ssi-k{transform-box:fill-box;transform-origin:center;animation:ssTw 2.6s ease-in-out infinite}
@keyframes ssBeat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.18)}86%{transform:scale(.96)}93%{transform:scale(1.06)}}
@keyframes ssTw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
html.noanim .ssi .ssi-s,html.noanim .ssi .ssi-k{animation:none}
@media (prefers-reduced-motion:reduce){.ssi .ssi-s,.ssi .ssi-k{animation:none}}
.ssmount{display:inline-flex;align-items:center;justify-content:center}

/* barra lateral (PC): el botón con su ícono */
#railAgent .ssmount .ssi{width:21px;height:21px}
#railAgent[aria-pressed="true"]{color:#f3d79e;background:linear-gradient(135deg,rgba(var(--gold-rgb),.16),rgba(var(--wine-rgb),.12))}
#railAgent[aria-pressed="true"] .ssi-s{animation-duration:1.8s}

/* SuperiorSynth ya no tiene pestaña en tus chats: se elige en el botón de modo */
#cSeg{position:relative}
#cSeg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;position:relative;z-index:1}
#cSeg button .ssmount .ssi{width:16px;height:16px}
#cSeg button[data-v="agents"][aria-selected="true"]{color:#f3d79e}
#cAgH{display:none !important}
@media (min-width:900px){
  #cSeg,#cSeg[hidden]{display:none !important;grid-template-columns:1fr 1fr;gap:0;padding:4px;margin:0 0 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
  #cSeg [data-v="favs"]{display:none !important}
  #cSeg button{padding:8px 6px;border-radius:9px;border:0;background:none;color:var(--mute);font:500 13.5px var(--sans,inherit);cursor:pointer;transition:color .25s}
  #cSeg button:hover{color:var(--text)}
  #cSeg button[aria-selected="true"]{color:var(--text)}
  #cSeg .pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:9px;background:rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)}
  body.agenting #cSeg .pill{background:linear-gradient(135deg,rgba(var(--gold-rgb),.2),rgba(var(--wine-rgb),.14))}
}
@media (max-width:899px){
  #cSeg button{font-size:12.5px;gap:5px}
  #cSeg button[data-v="agents"][aria-selected="true"]{background:linear-gradient(135deg,rgba(var(--gold-rgb),.2),rgba(var(--wine-rgb),.14)) !important}
}

/* ya no va «El agente elige la IA · Apagar» en la caja de escribir */
.agpill,body.agenting .agpill{display:none !important}

/* sello de SuperiorSynth arriba a la izquierda */
.sstop{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 12px 0 10px;border-radius:15px;border:1px solid rgba(var(--gold-rgb),.32);background:linear-gradient(135deg,rgba(var(--gold-rgb),.12),rgba(var(--wine-rgb),.07));color:var(--text);cursor:pointer;transition:border-color .25s,background .25s;animation:ssIn .6s cubic-bezier(.22,1,.36,1)}
.sstop:hover{border-color:rgba(var(--gold-rgb),.6)}
.sstop .ssi{width:26px;height:26px}
.sstop .sst-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.sstop .sst-t b{font:500 19px var(--serif,Georgia,serif);letter-spacing:-.01em;background:linear-gradient(100deg,#fff1d2,var(--gold) 55%,#e58aa0);-webkit-background-clip:text;background-clip:text;color:transparent}
.sstop .sst-t small{font-size:11.5px;color:var(--mute)}
.sstop .cv{width:15px;height:15px;color:var(--mute)}
@keyframes ssIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:899px){
  .sstop{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  .sstop .sst-t,.sstop .cv{display:none}
}
.ctxm.sstm .mhd{color:#f3d79e}

/* barrita del límite de hoy: solo se mira (no se toca) */
.paym.tlim{display:inline-flex !important;align-items:center;gap:8px;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);pointer-events:none;user-select:none;-webkit-user-select:none;cursor:default;flex:none}
.tlim .tl-l{font-size:11.5px;color:var(--mute);letter-spacing:.02em}
.tlim .tl-t{display:block;position:relative;width:70px;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.tlim .tl-t b{position:absolute;inset:0;border-radius:inherit;transform-origin:left center;background:linear-gradient(90deg,#5fc7a3,#9fe3c9);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.tlim.warn .tl-t b{background:linear-gradient(90deg,#e69a4a,#f2b36b)}
.tlim.full .tl-t b{background:#ff8f7a}
.tlim em{font-style:normal;font-size:11.5px;color:var(--soft);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
@media (min-width:900px){#pickRow .paym.tlim{margin-left:4px}}
@media (max-width:420px){.tlim .tl-t{width:46px}.tlim .tl-l{display:none}}

/* el sello del centro («Modo SuperiorSynth activado») con el ícono nuevo */
.aghello .agbadge .ssi{width:16px;height:16px}
.agsum .ag-ic .ssi,.agrun .ssi{width:16px;height:16px}

/* ===== v2.3 · barra del celular a la izquierda (se abre con ☰) ===== */
.navbtn,.tabbar .tb-head{display:none}
@media (max-width:899px){
  html.noglass .tabbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0d0e12}
  html.navleft .navbtn{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);margin-right:2px}
  html.navleft .navbtn svg{width:21px;height:21px}
  html.navleft .tabbar{position:fixed;z-index:9600;top:0;left:0;bottom:0;width:min(82vw,300px);display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));border-top:0;border-right:1px solid var(--line);background:#0f0f14;backdrop-filter:none;-webkit-backdrop-filter:none;transform:translateX(-104%);transition:transform .38s cubic-bezier(.22,1,.36,1);box-shadow:20px 0 60px -20px rgba(0,0,0,.8);overflow-y:auto}
  html.navleft.navopen .tabbar{transform:none}
  html.navleft .tabbar .tb-head{display:flex;align-items:center;min-height:48px;padding:0 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:26px}
  html.navleft .tabbar button{flex-direction:row;justify-content:flex-start;gap:14px;min-height:50px;padding:0 14px;border-radius:13px;font-size:15.5px;color:var(--soft)}
  html.navleft .tabbar button svg{width:22px;height:22px}
  html.navleft .tabbar button[aria-pressed="true"]{color:var(--text);background:rgba(255,255,255,.07)}
  html.navleft .tabbar #tabMe{margin-top:auto}
  html.navleft .composer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .navscrim{position:fixed;inset:0;z-index:9590;background:rgba(4,4,8,.55);opacity:0;transition:opacity .3s ease}
  .navscrim.on{opacity:1}
}
/* ===== v2.3 · estilo Simple de SynthFlow: solo tus chats, la caja de escribir y las respuestas.
   Tranquilo y plano, con su propia paleta cálida (los temas de color no aplican aquí) ===== */
/* Simple conserva su serifa (como Claude), aunque el resto de la página use Bricolage Grotesque */
html.simple{--serif:'Instrument Serif',Georgia,'Times New Roman',serif}
html.simple{--sbg:#252422;--sside:#1d1c1a;--scard:#2f2e2b;--sline:rgba(255,255,255,.085);--stext:#f2efe8;--ssoft:#c8c4b8;--smute:#9a968b;--sacc:#d9a066;--sacc-rgb:217,160,102;
  --gold:#d9a066;--gold-rgb:217,160,102;--wine:#c07a5a;--wine-rgb:192,122,90;--text:var(--stext);--soft:var(--ssoft);--mute:var(--smute);--line:var(--sline)}
html.simple,html.simple body,html.simple .shell,html.simple .main,html.simple .msgs{background:var(--sbg) !important}
html.simple .aurora,html.simple .grain,html.simple #glow,html.simple .corner,html.simple #szBot,html.simple #betaBot,html.simple #szBotB,html.simple .guideb,html.simple #hexR,html.simple .tpanel,html.simple .rguide{display:none !important}
html.simple *{text-shadow:none !important}
/* barra y lista de chats */
html.simple .rin,html.simple .rail.open .rin,html.simple .chats{background:var(--sside) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-color:var(--sline) !important;box-shadow:none !important}
html.simple .rail .rbtn[aria-pressed="true"],html.simple .rail .rbtn:hover{background:rgba(255,255,255,.06) !important}
html.simple .rail .rbtn::before,html.simple .rail .rbtn::after{display:none !important}
html.simple .cnew{background:transparent !important;border:1px solid var(--sline) !important;box-shadow:none !important}
html.simple .thlist .th,html.simple .thlist [data-k]{border-radius:10px}
/* arriba */
html.simple .top{background:transparent !important;border:0 !important;box-shadow:none !important}
html.simple .mchip,html.simple .paypill,html.simple .addb,html.simple .moreb,html.simple .sstop{background:transparent !important;border-color:var(--sline) !important;box-shadow:none !important}
html.simple .mchip b,html.simple .sstop .sst-t b{font-family:var(--sans,inherit) !important;font-size:15px !important;font-weight:600;background:none !important;-webkit-text-fill-color:var(--stext);color:var(--stext)}
/* saludo */
html.simple .hello{gap:18px}
html.simple .greet{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:clamp(30px,4.2vw,42px) !important;letter-spacing:-.01em;color:var(--stext)}
html.simple .greet *{background:none !important;-webkit-text-fill-color:currentColor !important;color:inherit !important;animation:none !important;filter:none !important}
html.simple .aghello .agbadge{background:transparent;border-color:var(--sline);color:var(--ssoft)}
/* la caja de escribir */
html.simple .composer{background:transparent !important}
html.simple .comp-in{background:var(--scard) !important;border:1px solid var(--sline) !important;border-radius:20px !important;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.6) !important}
html.simple .comp-in::before,html.simple .comp-in::after{display:none !important}
html.simple .comp-in:focus-within{border-color:rgba(255,255,255,.16) !important}
html.simple #inp{font-size:16px;color:var(--stext)}
html.simple .send{background:var(--sacc) !important;color:#1f1a14 !important;border-radius:11px !important;box-shadow:none !important}
html.simple .send.stop{background:var(--stext) !important}
html.simple .attach,html.simple .cpk,html.simple .cpk2{background:transparent !important;border-color:var(--sline) !important;box-shadow:none !important}
html.simple .mir .nw{animation:none !important;color:inherit !important}
html.simple .hintline{opacity:.75}
/* los mensajes */
html.simple .m.user .bub{background:rgba(0,0,0,.28) !important;border:1px solid var(--sline) !important;border-radius:18px !important;box-shadow:none !important;color:var(--stext)}
html.simple .m.bot .body{font-size:16px;line-height:1.68;color:var(--stext)}
html.simple .m.bot .who{opacity:.8}
html.simple .m.bot .who .av,html.simple .m.bot .who img{filter:saturate(.75)}
html.simple .m.bot .acts button{color:var(--smute)}
html.simple .m.bot .acts button:hover{color:var(--stext);background:rgba(255,255,255,.06)}
html.simple .body code{background:rgba(255,255,255,.07)}
html.simple .body pre{background:#1a1917 !important;border:1px solid var(--sline) !important}
html.simple .body a{color:var(--sacc)}
html.simple .agsum .ag-row,html.simple .agkeep,html.simple .agrun{background:transparent !important;border-color:var(--sline) !important}
/* celular */
@media (max-width:899px){
  html.simple .tabbar{background:var(--sside) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-color:var(--sline) !important}
  html.simple .tabbar button[aria-pressed="true"]{background:rgba(255,255,255,.06) !important}
}
/* ventanas y menús, también planos */
html.simple .tcard,html.simple .ctxm,html.simple .amenu{background:#2a2927 !important;border-color:var(--sline) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* el cursor de SymphorIA se queda en Simple, pero más liso: sin vidrio, sin brillo ni sombra grande */
html.simple #cr{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important;background:rgba(255,255,255,.08) !important}
html.simple #ca{filter:none !important}
/* v2.3.1 · botón y menú de «Esfuerzo» en la caja de escribir */
.cpk3{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--soft);font-size:14px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.cpk3 svg{width:18px;height:18px;flex:none}
.cpk3:hover{background:rgba(255,255,255,.08);color:var(--text)}
.cpk3.on{color:var(--text);border-color:rgba(var(--gold-rgb,230,182,95),.5);background:rgba(var(--gold-rgb,230,182,95),.1)}
.cpk3 span:empty{display:none}
.cpk3:focus-visible{outline:2px solid var(--accent,#b8c4ff);outline-offset:2px}
.composer .cpk3{min-height:36px;min-width:36px;border-radius:12px;font-size:13.5px;padding:0 10px}
#effMenu.amenu{position:fixed;left:8px;bottom:80px;z-index:120}
#effMenu[hidden]{display:none}
#effMenu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;color:var(--soft)}
#effMenu button:hover,#effMenu button:focus-visible{background:rgba(255,255,255,.08);color:var(--text);outline:none}
#effMenu button[aria-checked="true"]{background:rgba(255,255,255,.07);color:var(--text)}
#effMenu i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);flex:none}
#effMenu i svg{width:17px;height:17px}
#effMenu span{display:flex;flex-direction:column;min-width:0;flex:1}
#effMenu b{font-weight:600;font-size:14px}
#effMenu small{font-size:12px;color:var(--mute,#8d909c)}
#effMenu em{font-style:normal;font-size:11px;color:var(--mute,#8d909c);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 8px;white-space:nowrap}
#effMenu em.ck{border:0;font-size:15px;color:var(--text)}
#effMenu .lk{opacity:.7}
html.simple .cpk3{background:transparent !important;border-color:var(--sline) !important}

/* fila de la caja de escribir, igual que el modelo de referencia: todo del mismo alto, píldoras y círculos.
   Orden: [+] [IA] [esfuerzo] … [Comparar con otra IA] (los botones nuevos van antes de «Comparar») */
.composer .attach,.composer .cpk,.composer .cpk2,.composer .cpk3,.composer .agpill{min-height:40px !important;height:40px;border-radius:999px !important;box-sizing:border-box}
.composer .attach,.composer .cpk3:not(.on){width:40px;min-width:40px;padding:0 !important;justify-content:center}
.composer .cpk{padding:0 12px 0 8px !important;border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.04) !important;gap:8px !important}
.composer .cpk2{padding:0 14px !important;font-size:13.5px !important}
.composer .cpick{gap:8px !important}
.composer .cpk3.on{padding:0 14px 0 12px !important}
@media (max-width:600px){ .composer .cpk3 span{display:none !important} .composer .cpk3.on{width:40px;min-width:40px;padding:0 !important;justify-content:center} }
/* v2.3.1 · píldora de modo (Automática · Chat · SuperiorSynth) y qué se muestra en cada una */
.cpk4{display:inline-flex;align-items:center;gap:8px;min-height:40px;height:40px;padding:0 10px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--text);font-size:14px;white-space:nowrap;box-sizing:border-box;transition:background .3s,border-color .3s}
.cpk4:hover{background:rgba(255,255,255,.08)}
.cpk4:focus-visible{outline:2px solid var(--accent,#b8c4ff);outline-offset:2px}
.cpk4 b{font-weight:600}
.cpk4 .cm-ico{display:grid;place-items:center;width:18px;height:18px}
.cpk4 .cm-ico svg{width:18px;height:18px}
.cpk4 .cm-chev{width:15px;height:15px;opacity:.7}
body[data-cmode="auto"] .cpk4,body[data-cmode="agent"] .cpk4{border-color:rgba(var(--gold-rgb,230,182,95),.4)}
/* Automática y SuperiorSynth eligen la IA solos: no se muestra el selector. Chat sí. El botón «Apagar» del agente sobra: el modo ya dice dónde estás. */
body[data-cmode="auto"] .composer #cPick,body[data-cmode="agent"] .composer #cPick,body[data-cmode="auto"] .composer #agPill,body[data-cmode="agent"] .composer #agPill{display:none !important}
#modeMenu.amenu{position:fixed;left:8px;bottom:80px;z-index:120;width:300px}
#modeMenu[hidden]{display:none}
#modeMenu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;color:var(--soft)}
#modeMenu button:hover,#modeMenu button:focus-visible{background:rgba(255,255,255,.08);color:var(--text);outline:none}
#modeMenu button[aria-checked="true"]{background:rgba(255,255,255,.07);color:var(--text)}
#modeMenu i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);flex:none}
#modeMenu i svg{width:18px;height:18px}
#modeMenu span{display:flex;flex-direction:column;min-width:0;flex:1}
#modeMenu b{font-weight:600;font-size:14px}
#modeMenu small{font-size:12px;color:var(--mute,#8d909c)}
#modeMenu em.ck{font-style:normal;font-size:15px;color:var(--text)}
html.simple .cpk4{background:transparent !important;border-color:var(--sline) !important}
.composer .cpk4{border-radius:999px !important}
/* celular: la fila NO se desliza de lado (eso corría todos los íconos hacia la izquierda). Todo cabe en una línea: el nombre de la IA se acorta con «…» */
@media (max-width:900px){
  .composer .cpk2 span{display:none}
  .composer .cpick,body.fresh .comp-in .cpick{flex-wrap:nowrap !important;overflow:hidden !important;min-width:0;gap:6px !important}
  .composer .cpick>*{flex:0 0 auto}
  .composer .cpick>#cPick{flex:1 1 0;min-width:0}
  .composer #cPick b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .composer .cpk4{padding:0 8px 0 10px;gap:6px}
  .composer .cpk4 .cm-chev{width:13px;height:13px}
}
@media (max-width:340px){ .composer .cpk4 b{display:none} .composer .cpk4{padding:0 8px} }

/* ===== v2.4 · SynthFlow con vidrio líquido sobre el fondo espacial (boceto «SynthFlow escritorio») ===== */
html:not(.simple) .main{background:transparent}
html:not(.simple) .top{background:transparent;border-color:transparent}

/* barra de íconos y panel de chats: vidrio casi transparente, con su brillo de esquina */
html:not(.simple):not(.noglass) .rin,html:not(.simple):not(.noglass) .rail.open .rin{background:var(--lg-bg),rgba(18,10,40,.18);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border-right:1px solid var(--lg-edge);box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
html:not(.simple):not(.noglass) .chats{background:var(--lg-bg),rgba(18,10,40,.12);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border-right:1px solid var(--lg-edge)}
.rail .rbtn[aria-pressed="true"]{background:linear-gradient(135deg,rgba(123,63,242,.32),rgba(255,61,154,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 18px -4px rgba(123,63,242,.7)}
.chats .cnew{background:var(--lg-bg);border:1px solid var(--lg-edge);box-shadow:var(--lg-shadow)}
.chats .thi.cur{background:linear-gradient(90deg,rgba(123,63,242,.22),rgba(61,224,255,.08));box-shadow:inset 0 0 0 1px rgba(61,224,255,.28)}

/* caja de escribir: vidrio líquido, borde que se enciende en cian al escribir y botón Enviar con el degradado de la marca */
html:not(.simple) .composer .comp-in,html:not(.simple) .composer.big .comp-in{background:var(--lg-bg),rgba(20,12,44,.22);border:1px solid var(--lg-edge);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);box-shadow:var(--lg-shadow)}
html:not(.simple) .composer .comp-in:focus-within{border-color:rgba(61,224,255,.55);box-shadow:var(--lg-shadow),0 0 0 4px rgba(61,224,255,.08),0 0 34px -8px rgba(61,224,255,.45)}
html:not(.simple) .send:not(.stop){background:var(--grad);color:#fff;box-shadow:0 6px 22px -6px rgba(255,61,154,.65),inset 0 1px 0 rgba(255,255,255,.35)}
html:not(.simple) .send:not(.stop):hover{filter:brightness(1.12);background:var(--grad)}
.composer .attach{background:rgba(255,255,255,.05);border-color:var(--lg-edge)}

/* mensajes: tu burbuja es vidrio con un filo violeta; la respuesta va limpia sobre el fondo */
html:not(.simple) .m.user .bub{background:var(--lg-bg),rgba(123,63,242,.14);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);box-shadow:var(--lg-shadow)}
.body pre{background:rgba(8,4,24,.55);border-color:var(--lg-edge)}

/* saludo: «FlowIA’r» con el degradado del boceto, que respira lento */
.greet em,.greet .fl,.hello h1 em{background:var(--grad-text);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:v24shine 9s ease-in-out infinite alternate}
@keyframes v24shine{to{background-position:100% 0}}

/* ventanas flotantes y menús (Ajustes, cuenta, selector): vidrio más denso para leer bien */
html:not(.noglass) .tcard,html:not(.noglass) .amenu,html:not(.noglass) .ctxm,html:not(.noglass) #side.side{background:var(--lg-bg),rgba(16,9,38,.55) !important;border:1px solid var(--lg-edge) !important;backdrop-filter:blur(22px) saturate(170%) !important;-webkit-backdrop-filter:blur(22px) saturate(170%) !important;box-shadow:var(--lg-shadow),0 40px 120px -30px rgba(0,0,0,.8) !important}
/* en computador el selector son dos tarjetas («Filtros» y «Las IA»): el vidrio va en cada una y no en una caja grande detrás */
@media (min-width:900px){
  html:not(.noglass) #side.side.two-p{background:none !important;border:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
  html:not(.noglass) #side.two-p .pf-l,html:not(.noglass) #side.two-p .pf-r{background:var(--lg-bg),rgba(16,9,38,.6);border-color:var(--lg-edge);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:var(--lg-shadow),0 40px 120px -30px rgba(0,0,0,.8)}
}
/* «Medidor del día»: arco de vidrio con el degradado de la marca; brilla un poco cuando cambia */
#sideFoot .sxfoot.gauge{display:grid;justify-items:center;gap:2px;width:100%;margin:0;padding:12px 12px 10px;border-radius:20px;border:1px solid var(--lg-edge);background:var(--lg-bg),rgba(20,12,44,.2);box-shadow:var(--lg-shadow);text-align:center}
.sxfoot.gauge .gz-t{font-size:12px;letter-spacing:.04em;color:var(--mute)}
.sxfoot.gauge .gz{width:118px;height:64px;overflow:visible}
.sxfoot.gauge .gz path{fill:none;stroke-width:10;stroke-linecap:round}
.sxfoot.gauge .gz-bg{stroke:rgba(255,255,255,.09)}
.sxfoot.gauge .gz-v{stroke:url(#gzG);filter:drop-shadow(0 0 6px rgba(123,63,242,.7));transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1)}
.sxfoot.gauge.warn .gz-v{stroke:#ffc857}.sxfoot.gauge.full .gz-v{stroke:#ff6b6b}
.sxfoot.gauge .gz-n{margin-top:-30px;display:grid;justify-items:center;text-align:center;line-height:1.15}
.sxfoot.gauge{flex-direction:column;align-items:center}
.sxfoot.gauge .gz-n b{font-size:18px;color:#fff}
.sxfoot.gauge .gz-n small{font-size:11px;color:var(--mute)}
.sxfoot.gauge .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#sideFoot .sxfoot.gauge{display:flex !important;flex-direction:column;align-items:center;justify-content:center;position:relative}
#sideFoot .sxfoot.gauge .gz{display:block;margin-top:4px}
#sideFoot .sxfoot.gauge .gz-n{margin-top:-26px;align-items:center;justify-items:center}
/* píldora de modo y esfuerzo (traídas de main) con el mismo vidrio; en el celular, en modo Chat la píldora queda solo con su ícono para que quepa el nombre de la IA */
html:not(.simple) .composer .cpk3,html:not(.simple) .composer .cpk4{background:var(--lg-bg);border-color:var(--lg-edge);box-shadow:var(--lg-shadow)}
html:not(.simple) .composer .cpk3.on{border-color:rgba(255,122,69,.55);background:linear-gradient(135deg,rgba(255,122,69,.16),rgba(255,61,154,.1));color:#fff}
@media (max-width:600px){
  body[data-cmode="chat"] .composer .cpk4 b,body[data-cmode="chat"] .composer .cpk4 .cm-chev{display:none}
  body[data-cmode="chat"] .composer .cpk4{width:40px;min-width:40px;padding:0;justify-content:center}
  .composer #cPick{overflow:hidden}
}
/* v2.5 · íconos de archivo del boceto */
.fc-ic.img{background:none !important;padding:0;overflow:visible}
.fc-ic.img .fico{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.cvp-h .fc-ic.img .fico{width:38px;height:38px}
#tray .fc .ic.img{background:none;padding:0;display:grid;place-items:center}
#tray .fc .ic.img .fico{width:30px;height:30px;object-fit:contain}
/* v3.0 · EnerX: el medidor del día es una batería grande (en vez del arco) */
#sideFoot .sxfoot.gauge.gbatt .lbatt{display:block;margin:8px 0 4px;width:72px;height:48px}
#sideFoot .sxfoot.gauge.gbatt .gz-n{margin-top:0}
.tlim .lbatt{width:26px;height:17px}
/* ===== v2.4 · SynthCode: la revisión de cada página, la notita de arreglo y el lienzo con herramientas ===== */
.ckbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:4px 0 8px;padding:9px 10px 9px 12px;max-width:560px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03);font-size:13px;color:var(--soft,#cfd0d6);animation:ckIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes ckIn{from{opacity:0;transform:translateY(4px)}}
.ckbar .ck-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;background:rgba(255,255,255,.06)}
.ckbar .ck-ic svg,.ckbar .ck-go svg,.ck-fix svg{width:15px;height:15px}
.ckbar .ck-ic.spin svg{animation:ckSpin .9s linear infinite}
@keyframes ckSpin{to{transform:rotate(360deg)}}
.ckbar .ck-t{flex:1 1 180px;display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.35}
.ckbar .ck-t b{font-weight:600;color:var(--text)}
.ckbar .ck-t small{color:var(--mute);font-size:12px}
.ckbar.run{border-color:rgba(230,182,95,.28)}
.ckbar.run .ck-ic{color:#e6b65f}
.ckbar.ok{border-color:rgba(127,214,184,.3);background:rgba(127,214,184,.05)}
.ckbar.ok .ck-ic{color:#7fd6b8;background:rgba(127,214,184,.12)}
.ckbar.warn{border-color:rgba(230,182,95,.32);background:rgba(230,182,95,.05)}
.ckbar.warn .ck-ic{color:#e6b65f;background:rgba(230,182,95,.12)}
.ckbar.bad{border-color:rgba(255,128,118,.34);background:rgba(255,128,118,.05)}
.ckbar.bad .ck-ic{color:#ff8a7e;background:rgba(255,128,118,.12)}
.ckbar .ck-row{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ckbar .ck-fix{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ckbar .ck-l{flex-basis:100%;margin:4px 0 2px;padding:0 0 0 4px;list-style:none;display:grid;gap:6px}
.ckbar .ck-l[hidden]{display:none}
.ckbar .ck-l li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.45;color:var(--soft,#cfd0d6);overflow-wrap:anywhere}
.ckbar .ck-l li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:#e6b65f}
.ckbar .ck-l li.bad::before{background:#ff8a7e}
.ckbar.idle{padding:0;border:0;background:none;animation:none}
.ckbar .ck-go{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--soft,#cfd0d6);font:inherit;font-size:12.5px;transition:background .2s,border-color .2s,color .2s}
.ckbar .ck-go:hover{background:rgba(127,214,184,.08);border-color:rgba(127,214,184,.4);color:var(--text)}
.ckbar button:focus-visible{outline:2px solid #e6b65f;outline-offset:2px}

.fixnote{margin:2px 0 8px auto;max-width:min(560px,92%);display:flex;flex-direction:column;align-items:flex-end}
.fixnote .fx-row{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(127,214,184,.32);background:rgba(127,214,184,.06);color:var(--soft,#c3c5ce);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.fixnote .fx-ic svg{width:15px;height:15px;display:block;color:#7fd6b8}
.fixnote .fx-d{margin:6px 0 0;padding:10px 12px;max-height:240px;overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);color:var(--soft,#cfd0d6);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.fixnote .fx-d[hidden]{display:none}

/* lienzo: la vista previa con herramientas */
.cvp-prev.tools{flex-direction:column;background:#17151c}
.cvp-prev.tools iframe{flex:1;width:100%;align-self:center;background:#fff;transition:max-width .35s cubic-bezier(.22,1,.36,1)}
.cvp-prev.tools[data-size="tab"] iframe,.cvp-prev.tools[data-size="cel"] iframe{margin:10px 0;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.cvt{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid rgba(255,255,255,.07);background:#17151c}
.cvt-sz{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}
.cvt-sz button{padding:5px 11px;border:0;border-radius:999px;background:none;color:var(--mute);font:inherit;font-size:12px}
.cvt-sz button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--text)}
.cvt-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:none;color:var(--soft,#cfd0d6);font:inherit;font-size:12px}
.cvt-b svg{width:14px;height:14px}
.cvt-b:hover{background:rgba(255,255,255,.06)}
.cvt-con{margin-left:auto}
.cvt-n{min-width:18px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:600;font-size:11px;text-align:center}
.cvt.has-err .cvt-n{background:rgba(255,128,118,.2);color:#ff9d93}
.cvt button:focus-visible{outline:2px solid #e6b65f;outline-offset:2px}
.cvt-log{max-height:34%;min-height:90px;overflow:auto;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);background:#0f0e13;font:12px/1.5 var(--code,monospace)}
.cvt-log[hidden]{display:none}
.cvt-ln{padding:3px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:#d9d7d2;white-space:pre-wrap;overflow-wrap:anywhere}
.cvt-ln.error{color:#ff9d93;background:rgba(255,128,118,.06)}
.cvt-ln.warn{color:#f1cf86;background:rgba(230,182,95,.05)}
.cvt-empty{margin:0;padding:10px 12px;color:var(--mute);font-family:var(--sans,inherit)}
@media (max-width:600px){.cvt-sz button{padding:5px 8px}.cvt-con span{display:none}}

/* colores del código en el lienzo */
.cvp-code .hc{color:#7d8597;font-style:italic}
.cvp-code .hs{color:#a5d6a7}
.cvp-code .hk{color:#f3a3c8}
.cvp-code .hn{color:#f7c98b}
.cvp-code .hf{color:#9ecbff}
html.noanim .ckbar,html.noanim .ckbar .ck-ic.spin svg{animation:none}
@media (prefers-reduced-motion:reduce){.ckbar,.ckbar .ck-ic.spin svg{animation:none}}
/* ===== v2.6 · SynthCode con los colores «Noche Synth» y el vidrio de la v2.6 ===== */
.ckbar{background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ckbar.run,.ckbar.warn{border-color:rgba(255,200,87,.32)}
.ckbar.run .ck-ic,.ckbar.warn .ck-ic{color:#ffc857;background:rgba(255,200,87,.12)}
.ckbar.warn{background:rgba(255,200,87,.05)}
.ckbar .ck-l li::before{background:#ffc857}
.ckbar .ck-l li.bad::before{background:#ff8a7e}
.ckbar .ck-go:hover{background:rgba(61,224,255,.08);border-color:rgba(61,224,255,.4)}
.ckbar button:focus-visible,.cvt button:focus-visible{outline-color:#3de0ff}
.cvp-prev.tools,.cvt{background:#120c26}
.cvt-log{background:#0b0820}
.cvt-sz button[aria-pressed="true"]{background:linear-gradient(90deg,rgba(123,63,242,.45),rgba(255,61,154,.3));color:#fff}
.ckbar.idle{padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* ===== v2.6 · Proyectos: vidrio «Noche Synth», cada proyecto con su color =====
   v2.9: todo sale de los colores del tema (Océano, Bosque, Lavanda…) */
.pjv{position:absolute;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(90% 60% at 80% -10%,color-mix(in srgb,var(--sb-primary) 22%,transparent),transparent 60%),radial-gradient(70% 50% at 0% 100%,color-mix(in srgb,var(--sb-secondary) 12%,transparent),transparent 60%),var(--sb-bg);animation:pjIn .35s cubic-bezier(.22,1,.36,1);outline:0}
.pjv[hidden]{display:none}
body.pjon .tabbar{position:relative;z-index:31}
@keyframes pjIn{from{opacity:0;transform:translateY(8px)}}
.pj-in{width:min(1080px,100%);margin:0 auto;padding:18px 28px 60px;box-sizing:border-box}
.pj-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
.pj-back,.pj-close{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:rgba(255,255,255,.04);color:var(--soft);font:inherit;font-size:13.5px;transition:background .2s,color .2s}
.pj-back:hover,.pj-close:hover{background:rgba(255,255,255,.09);color:var(--text)}
.pj-back svg,.pj-close svg{width:16px;height:16px}
.pjv h1{margin:0;font-family:var(--serif,inherit);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;color:var(--text);overflow-wrap:anywhere}
.pjv .btn svg{width:17px;height:17px}
.pj-lh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.pj-lh p{margin:8px 0 0;max-width:560px;color:var(--soft);font-size:15px;line-height:1.5}
.pj-newb{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:0;background:var(--grad);color:#fff;font-weight:600;box-shadow:0 10px 30px -12px color-mix(in srgb,var(--sb-secondary) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.pj-newb:hover{filter:brightness(1.1)}
.pj-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pj-q{flex:1 1 240px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.pj-q:focus-within{border-color:color-mix(in srgb,var(--sb-light) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--sb-light) 8%,transparent)}
.pj-q svg{width:17px;height:17px;color:var(--mute);flex:none}
.pj-q input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:14.5px;outline:0}
.pj-sort{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px}
.pj-sort select{min-height:44px;padding:0 12px;border-radius:14px;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:color-mix(in srgb,var(--sb-deep) 70%,var(--sb-bg));color:var(--text);font:inherit;font-size:13.5px}
.pj-arch{min-height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:none;color:var(--soft);font:inherit;font-size:13.5px}
.pj-arch[aria-pressed="true"]{background:color-mix(in srgb,var(--sb-spark) 12%,transparent);border-color:color-mix(in srgb,var(--sb-spark) 40%,transparent);color:color-mix(in srgb,var(--sb-spark) 70%,#fff)}
.pj-arch[hidden]{display:none}
.pj-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pjc{position:relative;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;animation:pjIn .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 35ms);transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s}
.pjc::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--pc),transparent)}
.pjc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pc) 55%,transparent)}
.pjc-go{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:150px;padding:18px 52px 16px 18px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pjc-ic,.pj-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--pc);background:color-mix(in srgb,var(--pc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 35%,transparent)}
.pjc-ic svg,.pj-ic svg{width:21px;height:21px}
.pjc-n{margin-top:6px;font-size:16px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.pjc-d{color:var(--soft);font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pjc-go small{margin-top:auto;padding-top:6px;color:var(--mute);font-size:12px}
.pjc-star{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--mute);transition:color .2s,background .2s}
.pjc-star:hover{background:rgba(255,255,255,.08);color:var(--text)}
.pjc-star svg{width:18px;height:18px}
.pjc-star[aria-pressed="true"]{color:var(--sb-spark)}
.pjc-star[aria-pressed="true"] svg{fill:currentColor}
.pjc-go:focus-visible,.pjv button:focus-visible,.pj-menu button:focus-visible{outline:2px solid var(--sb-light);outline-offset:2px}
.pj-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:46px 20px;border-radius:24px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02)}
.pj-empty b{font-size:18px;color:var(--text)}
.pj-empty p{max-width:440px;margin:0;color:var(--soft);font-size:14px;line-height:1.5}
.pj-big{--pc:var(--sb-primary);display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#fff;background:var(--grad);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--sb-secondary) 60%,transparent)}
.pj-big svg{width:32px;height:32px}
.pj-exs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.pj-exs.sm{justify-content:flex-start;align-items:center;margin:2px 0 0}
.pj-exs.sm>span{color:var(--mute);font-size:13px}
.pj-ex{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--soft);font:inherit;font-size:13px;transition:background .2s,border-color .2s,color .2s}
.pj-ex:hover{background:color-mix(in srgb,var(--sb-light) 8%,transparent);border-color:color-mix(in srgb,var(--sb-light) 40%,transparent);color:var(--text)}
.pj-none{grid-column:1/-1;padding:30px 0;color:var(--mute);text-align:center}
.pj-none.sm{padding:14px 0;text-align:left;font-size:14px;line-height:1.5}

.pj-form{display:flex;flex-direction:column;gap:18px;max-width:620px}
.pj-f{display:flex;flex-direction:column;gap:8px}
.pj-f>span{color:var(--text);font-size:15px;font-weight:500}
.pj-f small{color:var(--mute);font-weight:400}
.pj-f input,.pj-f textarea,.pj-ta{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:14px;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:rgba(255,255,255,.04);color:var(--text);font:inherit;font-size:15px;line-height:1.5;resize:vertical;outline:0}
.pj-f input{min-height:48px}
.pj-f input:focus,.pj-f textarea:focus,.pj-ta:focus{border-color:color-mix(in srgb,var(--sb-light) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--sb-light) 8%,transparent)}
.pj-acts{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.pj-acts.sm{margin-top:10px;gap:10px}
.pj-acts .btn{min-height:44px;padding:0 20px}
.pj-acts .lnk{min-height:44px}

.pj-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.pj-h .pj-ic{width:52px;height:52px;border-radius:16px;flex:none}
.pj-h .pj-ic svg{width:27px;height:27px}
.pj-ht{flex:1;min-width:0}
.pj-ht p{margin:8px 0 0;color:var(--soft);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.pj-tag{display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--sb-spark) 12%,transparent);color:color-mix(in srgb,var(--sb-spark) 70%,#fff);font-size:12px;font-style:normal}
.pj-h .pjc-star{position:static;flex:none}
.pj-more{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--lg-edge,rgba(255,255,255,.14));background:rgba(255,255,255,.04);color:var(--soft)}
.pj-more svg{width:18px;height:18px}
.pj-more:hover{background:rgba(255,255,255,.09);color:var(--text)}
.pj-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.pj-ask{position:relative;display:flex;align-items:flex-end;gap:10px;padding:12px 12px 12px 16px;border-radius:22px;background:var(--lg-bg,rgba(255,255,255,.06)),color-mix(in srgb,var(--sb-deep) 40%,transparent);border:1px solid var(--lg-edge,rgba(255,255,255,.14));box-shadow:var(--lg-shadow,none)}
.pj-ask:focus-within{border-color:color-mix(in srgb,var(--sb-light) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--sb-light) 8%,transparent),0 0 34px -8px color-mix(in srgb,var(--sb-light) 45%,transparent)}
.pj-ask textarea{flex:1;min-width:0;min-height:52px;max-height:220px;padding:6px 0;border:0;background:none;color:var(--text);font:inherit;font-size:15.5px;line-height:1.5;resize:none;outline:0}
.pj-ask .send{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 6px 22px -6px color-mix(in srgb,var(--sb-secondary) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.pj-ask .send svg{width:20px;height:20px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pj-sh{margin:26px 0 10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pj-chats{display:flex;flex-direction:column;gap:6px}
.pj-chat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:inherit;font:inherit;text-align:left;transition:background .2s,border-color .2s}
.pj-chat:hover{background:rgba(255,255,255,.07);border-color:color-mix(in srgb,var(--sb-light) 30%,transparent)}
.pj-chat b{max-width:100%;font-weight:500;font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-chat small{color:var(--mute);font-size:12px}
.pj-side{display:flex;flex-direction:column;gap:14px}
.pj-card{padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pj-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pj-ch h3{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.pj-ch .lnk{min-height:36px}
.pj-fb{display:flex;align-items:center;gap:10px}
.pj-fb .btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px}
.pj-fb .btn svg{width:15px;height:15px}
.pj-it{margin:0;color:var(--soft);font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.pj-muted{display:block;margin:0;color:var(--mute);font-size:13px;line-height:1.5}
.pj-cap{height:6px;margin:2px 0 8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.pj-cap i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sb-light),var(--sb-primary),var(--sb-secondary));transition:width .5s cubic-bezier(.22,1,.36,1)}
.pj-fl{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pj-fl li{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 8px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.pj-fi{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:color-mix(in srgb,var(--sb-light) 10%,transparent);color:color-mix(in srgb,var(--sb-light) 60%,#fff);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.pj-fn{flex:1;min-width:0;display:flex;flex-direction:column}
.pj-fn b{font-weight:500;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-fn small{color:var(--mute);font-size:11.5px}
.pj-fx{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:0;background:none;color:var(--mute)}
.pj-fx:hover{background:rgba(255,128,118,.12);color:#ff9d93}
.pj-fx svg{width:15px;height:15px}

.pj-menu{position:fixed;z-index:9000;min-width:220px;max-width:min(300px,calc(100vw - 16px));padding:6px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),color-mix(in srgb,var(--sb-bg) 80%,transparent);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -20px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:pjIn .2s ease}
.pj-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--soft);font:inherit;font-size:14px;text-align:left}
.pj-menu button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-menu button:hover{background:rgba(255,255,255,.08);color:var(--text)}
.pj-menu button[aria-checked="true"]::after{content:"✓";color:var(--sb-light)}
.pj-menu button.dg{color:#ff9d93}
.pj-menu button svg{width:16px;height:16px;flex:none}
.pj-menu hr{margin:4px 6px;border:0;border-top:1px solid rgba(255,255,255,.1)}
.pjdot{width:10px;height:10px;flex:none;border-radius:3px;background:var(--pc)}

/* en la conversación y en tu lista de chats */
.pjcrumb{position:relative;z-index:4;display:flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 32px);min-height:34px;margin:10px auto 2px;padding:0 14px 0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);background:color-mix(in srgb,var(--pc) 14%,color-mix(in srgb,var(--sb-bg) 82%,transparent));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);font:inherit;font-size:13px;box-shadow:0 8px 24px -14px rgba(0,0,0,.8)}
.pjcrumb[hidden]{display:none}
.pjcrumb svg{width:16px;height:16px;flex:none;color:var(--pc)}
.pjcrumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjcrumb:hover{filter:brightness(1.15)}
.thpj{display:inline-flex!important;align-items:center;gap:4px;max-width:100%;margin-top:2px;color:var(--pc);font-size:11px}
.thpj svg{width:12px;height:12px;flex:none}
.thpj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chats .cproj{margin-top:8px}
.chats .cproj svg{width:18px;height:18px;color:var(--sb-light)}

@media (max-width:860px){
  .pj-grid{grid-template-columns:1fr}
  .pj-side{order:-1}
}
@media (max-width:620px){
  .pj-in{padding:12px 16px calc(90px + env(safe-area-inset-bottom))}
  .pj-lh .pj-newb{width:100%;justify-content:center}
  .pj-sort span{display:none}
  .pj-list{grid-template-columns:1fr}
  .pjc-go{min-height:0}
  .pj-h{flex-wrap:wrap}
  .pj-h .pj-ic{width:44px;height:44px}
  .pj-side{order:0}
}
html.noanim .pjv,html.noanim .pjc,html.noanim .pj-menu{animation:none}
@media (prefers-reduced-motion:reduce){.pjv,.pjc,.pj-menu{animation:none}}

/* v2.9.1 · «Sintéticos»: la etiquetita en el lienzo de lo que la IA crea y se puede ver en vivo */
.cvp-syn{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(120deg,rgba(141,76,255,.28),rgba(255,61,154,.22));color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}

/* v3.0 · el Sintético se abre AL LADO de la conversación, como en Claude: sin oscurecer ni tapar el chat, que sigue usable.
   En pantallas medianas se esconde la lista de chats mientras está abierto (igual que Claude recoge su barra).
   El modo compacto achica .shell con zoom:var(--ui-z); el margen se divide por ese zoom para que cuadre con el panel. */
:root{--syn-w:clamp(420px,46vw,860px)}
@media (min-width:900px){
  .cvp{left:auto;width:var(--syn-w);background:none !important;pointer-events:none}
  .cvp-in{width:100%;pointer-events:auto;zoom:var(--ui-z,1);background:color-mix(in srgb,var(--sb-bg,#0b0820) 34%,transparent);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);border-left:1px solid color-mix(in srgb,var(--sb-light,#fff) 16%,rgba(255,255,255,.08));box-shadow:-24px 0 60px -30px rgba(0,0,0,.7)}
  html.simple .cvp-in,html.rtr .cvp-in{background:var(--bg,#0b0c10);-webkit-backdrop-filter:none;backdrop-filter:none}
  body.canvasing .shell .main{margin-right:calc(var(--syn-w) / var(--ui-z,1));transition:margin-right .35s cubic-bezier(.22,1,.36,1)}
  html.noanim body.canvasing .shell .main{transition:none}
}
@media (min-width:900px) and (max-width:1499px){ body.canvasing .shell .chats{display:none} }

/* Sintéticos en la barra lateral: la lista de todo lo que creó la IA */
.synv{position:absolute;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;animation:pjIn .35s cubic-bezier(.22,1,.36,1)}
html:not(.simple) .synv{background:radial-gradient(80% 55% at 85% -10%,color-mix(in srgb,var(--sb-primary) 30%,transparent),transparent 62%),radial-gradient(70% 55% at 0% 105%,color-mix(in srgb,var(--sb-secondary) 22%,transparent),transparent 62%),color-mix(in srgb,var(--sb-bg) 62%,transparent);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%)}
html.simple .synv{background:var(--bg,#0b0c10)}
.synv[hidden]{display:none}
.syn-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.syn-w{position:relative;display:flex}
.syn-w .syn-c{flex:1;min-width:0}
.syn-go{position:absolute;right:10px;top:12px;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sb-light,#fff) 22%,rgba(255,255,255,.1));background:rgba(255,255,255,.06);color:var(--soft,#ddd);font:inherit;font-size:11.5px;cursor:pointer}
.syn-go:hover{background:rgba(255,255,255,.14);color:var(--text,#fff)}
.syn-c{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--sb-light,#fff) 18%,rgba(255,255,255,.1));background:linear-gradient(160deg,color-mix(in srgb,var(--sb-primary,#7b3ff2) 12%,rgba(255,255,255,.05)),rgba(255,255,255,.02) 70%);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s}
.syn-c:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sb-light,#fff) 45%,transparent)}
.syn-c .fc-ic{width:36px;height:36px;border-radius:10px}
.syn-c b{font-weight:600;font-size:14.5px;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syn-c small{color:var(--mute);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syn-c small+small{margin-top:auto}
@media (max-width:620px){.syn-l{grid-template-columns:1fr 1fr}.syn-c{min-height:104px;padding:12px}}

/* ===== v2.9.2 · SynthFlow compacto o normal (Ajustes → Tamaño de SynthFlow; compacto por defecto) =====
   core (00) le pone html.compact. Todo lo de .shell (barras, chats, saludo, mensajes, caja de escribir) se achica junto con zoom.
   Para UI nueva: dentro de .shell no hace falta nada; lo que va suelto en body (ventanas centradas) lleva zoom:var(--ui-z).
   Ojo: los menús que se colocan por JS con getBoundingClientRect no llevan zoom (se descuadran). */
:root{--ui-z:1}
html.compact{--ui-z:.9}
@media (max-width:899px){ html.compact{--ui-z:.93} }
html.compact .shell{zoom:var(--ui-z);height:calc(100vh / var(--ui-z)) !important;height:calc(100dvh / var(--ui-z)) !important}
html.compact .szm > .tcard{zoom:var(--ui-z)}
/* en el celular la caja de escribir se queda en 16 px de verdad: con menos, el iPhone hace zoom al tocarla */
@media (max-width:899px){ html.compact #inp{font-size:calc(16px / var(--ui-z)) !important} }

/* ===== v3.0 · Proyectos como en Claude, con el color de tu tema =====
   · El fondo es vidrio del tema (se ve el cielo de atrás, 60-75 % transparente) en vez de un panel casi negro.
   · Las tarjetas, la caja «¿Qué quieres hacer…?» y el panel de la derecha toman los colores del tema (Océano, Bosque, Lavanda…).
   · A la derecha, un solo panel «Conocimiento del proyecto» (instrucciones + archivos), como en Claude.
   · En el celular el título ya no se parte letra por letra. */
html:not(.simple) .pjv{
  background:radial-gradient(80% 55% at 85% -10%,color-mix(in srgb,var(--sb-primary) 30%,transparent),transparent 62%),
    radial-gradient(70% 55% at 0% 105%,color-mix(in srgb,var(--sb-secondary) 22%,transparent),transparent 62%),
    color-mix(in srgb,var(--sb-bg) 62%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%)}
.pjv h1{font-family:var(--sans,inherit);font-weight:600;letter-spacing:-.02em;font-size:clamp(26px,3.2vw,34px);overflow-wrap:normal;word-break:normal;hyphens:auto}
.pj-lh{align-items:center}
.pj-lh p{color:color-mix(in srgb,var(--sb-text,#fff) 72%,transparent)}

/* tarjetas de la lista: vidrio con el color del proyecto */
html:not(.simple) .pjc{background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 14%,rgba(255,255,255,.06)),rgba(255,255,255,.02) 70%);
  border-color:color-mix(in srgb,var(--pc) 26%,rgba(255,255,255,.1));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html:not(.simple) .pjc:hover{box-shadow:0 22px 50px -28px color-mix(in srgb,var(--pc) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.pjc::before{height:2px;background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 30%,transparent) 60%,transparent)}
.pjc-go{min-height:132px}
.pjc-n{font-size:15.5px}

/* buscar y ordenar con el tema */
html:not(.simple) .pj-q,html:not(.simple) .pj-sort select,html:not(.simple) .pj-arch{background:color-mix(in srgb,var(--sb-deep) 30%,rgba(255,255,255,.04));border-color:color-mix(in srgb,var(--sb-light) 18%,rgba(255,255,255,.1))}

/* página del proyecto */
.pj-h{align-items:center}
.pj-h .pj-ic{width:44px;height:44px;border-radius:14px}
.pj-h .pj-ic svg{width:23px;height:23px}
.pj-ht p{margin-top:4px;color:color-mix(in srgb,var(--sb-text,#fff) 70%,transparent)}
html:not(.simple) .pj-ask{background:color-mix(in srgb,var(--sb-deep) 38%,rgba(255,255,255,.05));border-color:color-mix(in srgb,var(--sb-light) 26%,rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.pj-sh{margin-top:28px;font-size:12px;color:color-mix(in srgb,var(--sb-light) 60%,var(--mute))}
.pj-chats{gap:0;border-top:1px solid rgba(255,255,255,.08)}
.pj-chat{min-height:60px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;background:none;padding:12px 6px}
.pj-chat:hover{background:color-mix(in srgb,var(--sb-light) 7%,transparent);border-color:rgba(255,255,255,.08);border-radius:12px}

/* «Conocimiento del proyecto»: un solo panel con dos partes, como en Claude */
.pj-side{gap:0;padding:6px 0 0;border-radius:22px;border:1px solid color-mix(in srgb,var(--sb-light) 20%,rgba(255,255,255,.1));overflow:hidden;
  background:linear-gradient(170deg,color-mix(in srgb,var(--sb-primary) 12%,rgba(255,255,255,.05)),rgba(255,255,255,.02) 65%)}
html:not(.simple) .pj-side{-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.pj-kh{display:flex;flex-direction:column;gap:2px;padding:12px 16px 10px}
.pj-kh h2{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.pj-kh small{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-side .pj-card{border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.08);background:none;box-shadow:none}
.pj-side .pj-ch h3{font-size:13.5px}
.pj-fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pj-fl li{flex-direction:column;align-items:flex-start;gap:6px;position:relative;padding:10px}
.pj-fl .pj-fx{position:absolute;top:4px;right:4px}
.pj-fn{width:100%}

@media (max-width:620px){
  .pjv h1{font-size:26px}
  .pj-h{flex-wrap:nowrap;align-items:flex-start}
  .pj-h .pj-ic{display:none}
  .pj-ht h1{font-size:24px;line-height:1.15}
  .pj-bar{margin-bottom:16px}
  .pj-back,.pj-close{min-height:38px;padding:0 12px;font-size:13px}
  .pj-fl{grid-template-columns:1fr 1fr}
}