/* ==========================================================
   Lokizenith AI — made by Lokiz Studios
   ========================================================== */
:root{
  --acc:#00ff9c; --acc-rgb:0,255,156; --acc2:#00c977; --acc3:#7dffcf;
  --bg:#030806; --bg2:#06110c; --panel:rgba(10,24,17,.62); --panel2:rgba(14,32,23,.78);
  --line:rgba(var(--acc-rgb),.14); --line2:rgba(var(--acc-rgb),.28);
  --text:#e8fff4; --muted:#8fb8a5; --dim:#5d8573; --danger:#ff5b7a; --warn:#ffd166;
  --radius:16px; --fs:15px; --chat-w:820px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --sidebar-w:290px;
}
@layer base {
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:var(--font);font-size:var(--fs);color:var(--text);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  input,textarea,select{font:inherit;color:inherit}
}
body:has(#lokibotView.active) .whatsnew,
body:has(#lokibotView.active) .geo-ask {
  display: none !important;
}
::selection{background:rgba(var(--acc-rgb),.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(var(--acc-rgb),.18);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--acc-rgb),.35);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
kbd{font-family:var(--mono);font-size:.68em;padding:2px 6px;border-radius:6px;border:1px solid var(--line2);background:rgba(0,0,0,.35);color:var(--muted)}
[hidden]{display:none!important}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:calc(.5 * var(--bg-int,1))}
.aurora span{position:absolute;border-radius:50%;will-change:transform;animation:float 26s ease-in-out infinite}
.aurora span:nth-child(1){width:46vw;height:46vw;left:5%;top:8%;background:radial-gradient(circle,rgba(var(--acc-rgb),.33),transparent 65%)}
.aurora span:nth-child(2){width:38vw;height:38vw;right:6%;top:30%;background:radial-gradient(circle,rgba(0,140,90,.45),transparent 65%);animation-duration:32s;animation-delay:-8s}
.aurora span:nth-child(3){width:42vw;height:42vw;left:30%;bottom:-4%;background:radial-gradient(circle,rgba(20,255,200,.18),transparent 65%);animation-duration:38s;animation-delay:-16s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(8vw,-6vh) scale(1.15)}50%{transform:translate(-4vw,8vh) scale(.92)}75%{transform:translate(-8vw,-4vh) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.bg-off #bg,body.bg-off .aurora{display:none}

/* ---------- layout ---------- */
.app{position:relative;z-index:1;display:flex;height:100vh;height:100dvh}
.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px 12px 12px;background:linear-gradient(180deg,rgba(4,14,9,.86),rgba(3,9,6,.9));border-right:1px solid var(--line);transition:transform .45s var(--ease),margin .45s var(--ease)}
body.sb-collapsed .sidebar{margin-left:calc(-1 * var(--sidebar-w))}
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.only-mobile{display:none!important}

/* brand */
.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 8px}
.logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(var(--acc-rgb),.35),rgba(0,0,0,.6));border:1px solid var(--line2);box-shadow:0 0 24px rgba(var(--acc-rgb),.25),inset 0 0 12px rgba(var(--acc-rgb),.15);animation:logoPulse 4s ease-in-out infinite}
.logo svg{width:24px;height:24px}
.logo path{stroke:var(--acc);stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;animation:draw 2.4s var(--ease) both}
.logo circle{fill:var(--acc);animation:blink 3s ease-in-out infinite}
@keyframes draw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes logoPulse{0%,100%{box-shadow:0 0 18px rgba(var(--acc-rgb),.2),inset 0 0 12px rgba(var(--acc-rgb),.12)}50%{box-shadow:0 0 34px rgba(var(--acc-rgb),.42),inset 0 0 16px rgba(var(--acc-rgb),.25)}}
.brand-text{display:flex;align-items:baseline;gap:6px;flex:1}
.brand-text b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,var(--acc3),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 6s linear infinite}
.brand-text span{font-size:.72rem;font-weight:700;color:var(--bg);background:var(--acc);padding:2px 6px;border-radius:6px;box-shadow:0 0 12px rgba(var(--acc-rgb),.6)}
@keyframes sheen{to{background-position:-200% 0}}

.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:.25s var(--ease)}
.icon-btn:hover{background:rgba(var(--acc-rgb),.1);color:var(--acc);transform:scale(1.06)}

.btn-new{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-weight:600;background:linear-gradient(135deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.06));border:1px solid var(--line2);transition:.3s var(--ease)}
.btn-new kbd{margin-left:auto}
.btn-new .plus{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--acc);color:#02130b;font-weight:800;transition:transform .4s var(--spring)}
.btn-new:hover{border-color:rgba(var(--acc-rgb),.6);box-shadow:0 0 28px rgba(var(--acc-rgb),.2);transform:translateY(-1px)}
.btn-new:hover .plus{transform:rotate(90deg) scale(1.1)}
.shimmer::after,.btn-new::after,.lc-go::after,.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);animation:shimmer 3.8s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.btn-lokicode{position:relative;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;text-align:left;background:linear-gradient(135deg,rgba(0,0,0,.45),rgba(var(--acc-rgb),.08));border:1px solid var(--line);overflow:hidden;transition:.3s var(--ease)}
.btn-lokicode::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--acc) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite;opacity:.8}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.lc-icon{font-family:var(--mono);font-weight:700;color:var(--acc);width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(var(--acc-rgb),.1);font-size:.82rem;text-shadow:0 0 10px rgba(var(--acc-rgb),.7)}
.lc-text{display:flex;flex-direction:column;line-height:1.2}
.lc-text small{color:var(--dim);font-size:.72rem}
.lc-arrow{margin-left:auto;color:var(--acc);font-size:1.3rem;transition:transform .3s var(--ease)}
.btn-lokicode:hover{background:linear-gradient(135deg,rgba(0,0,0,.4),rgba(var(--acc-rgb),.16));box-shadow:0 0 30px rgba(var(--acc-rgb),.15)}
.btn-lokicode:hover .lc-arrow{transform:translateX(4px)}
.btn-lokicode.on{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.14)}

.search-wrap input{width:100%;padding:10px 12px 10px 34px;border-radius:12px;background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d8573' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") 11px 50% no-repeat;border:1px solid var(--line);outline:none;transition:.25s}
.search-wrap input:focus{border-color:rgba(var(--acc-rgb),.5);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12)}

.history{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px}
.h-group{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 8px 6px}
.h-item{position:relative;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;cursor:pointer;color:#cfeee0;transition:background .2s,transform .25s var(--ease);animation:slideIn .4s var(--ease) both}
.h-item:hover{background:rgba(var(--acc-rgb),.07);transform:translateX(2px)}
.h-item.active{background:linear-gradient(90deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.04));box-shadow:inset 2px 0 0 var(--acc)}
.h-item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}
.h-item .pin-ic{color:var(--acc);font-size:.75rem}
.h-item .acts{display:flex;gap:2px;opacity:0;transition:opacity .2s}
.h-item:hover .acts,.h-item.active .acts{opacity:1}
.h-item .acts button{width:26px;height:26px;border-radius:7px;font-size:.8rem;color:var(--muted)}
.h-item .acts button:hover{background:rgba(var(--acc-rgb),.15);color:var(--acc)}
.h-item .acts button.del:hover{background:rgba(255,91,122,.15);color:var(--danger)}
.h-item input{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--acc);border-radius:7px;padding:3px 6px;outline:none;font-size:.88rem}
.h-empty{color:var(--dim);font-size:.85rem;text-align:center;padding:24px 8px}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.sidebar-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.btn-settings{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font-weight:600;color:#cfeee0;border:1px solid transparent;transition:.25s var(--ease)}
.btn-settings:hover{background:rgba(var(--acc-rgb),.08);border-color:var(--line)}
.btn-settings .gear{display:inline-block;color:var(--acc);font-size:1.1rem;transition:transform .7s var(--ease)}
.btn-settings:hover .gear{transform:rotate(180deg)}
.madeby{text-align:center;font-size:.74rem;color:var(--dim);letter-spacing:.04em}
.madeby b{background:linear-gradient(90deg,var(--acc),var(--acc3),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 4s linear infinite}

.scrim{display:none}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(3,8,6,.9),rgba(3,8,6,.6));}
.model-picker{position:relative}
.model-btn{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:13px;font-weight:700;font-size:.98rem;border:1px solid var(--line);background:rgba(0,0,0,.35);transition:.25s var(--ease)}
.model-btn:hover{border-color:rgba(var(--acc-rgb),.5);box-shadow:0 0 22px rgba(var(--acc-rgb),.15)}
.model-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:blink 2s infinite}
body.stark .model-dot{background:linear-gradient(135deg,#fff,var(--acc));box-shadow:0 0 14px var(--acc),0 0 4px #fff}
.model-btn .chev{color:var(--muted);transition:transform .3s}
.model-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.stark-badge{font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:linear-gradient(90deg,var(--acc),#b6ffe2);color:#02130b;text-transform:uppercase}
.model-menu{position:absolute;top:calc(100% + 10px);left:0;width:340px;padding:8px;border-radius:18px;background:rgba(5,15,10,.96);border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(var(--acc-rgb),.08);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top left;pointer-events:none;transition:.28s var(--ease);z-index:35}
.model-menu.open,.labs-menu.open,.plus-menu.open,.think-menu.open{opacity:1;transform:none;pointer-events:auto}
.m-opt{display:flex;gap:12px;width:100%;text-align:left;padding:12px;border-radius:13px;transition:.2s;border:1px solid transparent;cursor:pointer}
.m-opt:hover{background:rgba(var(--acc-rgb),.07)}
.m-opt.sel{background:rgba(var(--acc-rgb),.1);border-color:var(--line2)}
.m-opt .m-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;background:rgba(var(--acc-rgb),.1);flex-shrink:0}
.m-opt.stark .m-ic{background:linear-gradient(135deg,rgba(var(--acc-rgb),.45),rgba(255,255,255,.1));box-shadow:0 0 18px rgba(var(--acc-rgb),.3)}
.m-opt b{display:flex;align-items:center;gap:8px}
.m-opt small{display:block;color:var(--muted);font-size:.78rem;margin-top:3px;line-height:1.4}
.m-opt .check{margin-left:auto;color:var(--acc);opacity:0}
.m-opt.sel .check{opacity:1}

.think-picker{position:relative;margin-left:auto}
.think-btn{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:13px;font-weight:700;font-size:.92rem;border:1px solid var(--line);background:rgba(0,0,0,.35);transition:.25s var(--ease);color:var(--fg);cursor:pointer}
.think-btn:hover{border-color:rgba(var(--acc-rgb),.5);box-shadow:0 0 22px rgba(var(--acc-rgb),.15)}
.think-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);animation:blink 2.2s infinite}
.think-btn .chev{color:var(--muted);transition:transform .3s}
.think-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.think-menu{position:absolute;top:calc(100% + 10px);right:0;width:340px;padding:8px;border-radius:18px;background:rgba(5,15,10,.96);border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(var(--acc-rgb),.08);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:.28s var(--ease);z-index:35}
.rec-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:.65rem;font-weight:800;letter-spacing:.03em;background:rgba(var(--acc-rgb),.2);color:var(--acc);border:1px solid rgba(var(--acc-rgb),.4);margin-left:6px;vertical-align:middle;text-transform:uppercase}

.top-actions{position:relative}
.labs-btn{position:relative;overflow:hidden;padding:9px 15px;border-radius:12px;font-weight:700;color:var(--acc);border:1px solid var(--line2);background:rgba(var(--acc-rgb),.07);transition:.25s var(--ease)}
.labs-btn:hover{background:rgba(var(--acc-rgb),.16);box-shadow:0 0 24px rgba(var(--acc-rgb),.25)}
.labs-menu{position:absolute;right:0;top:calc(100% + 10px);width:330px;padding:8px;border-radius:18px;background:rgba(5,15,10,.96);border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:.28s var(--ease)}
.lab-opt{display:flex;align-items:center;gap:12px;width:100%;padding:11px;border-radius:12px;text-align:left;transition:.2s}
.lab-opt:hover{background:rgba(var(--acc-rgb),.08)}
.lab-opt .li{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--acc-rgb),.1);font-size:1.1rem;flex-shrink:0}
.lab-opt b{font-size:.92rem}
.lab-opt small{display:block;color:var(--muted);font-size:.75rem}
.lab-opt .tag{margin-left:auto;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--acc);white-space:nowrap}
.lab-opt.locked{opacity:.65}
.lab-opt.locked .tag::before{content:"🔒 "}

/* ---------- views ---------- */
.view{position:absolute;inset:0;top:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(14px) scale(.995);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.view.active{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.main>.view{top:var(--top-h,65px)}

/* ---------- messages ---------- */
.messages{flex:1;overflow-y:auto;contain:paint;padding:28px 20px 40px;scroll-behavior:smooth}
.msg{max-width:var(--chat-w);margin:0 auto 26px;display:flex;gap:14px;animation:msgIn .55s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.msg.user{flex-direction:row-reverse}
.avatar{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.msg.user .avatar{background:linear-gradient(135deg,#1d3a2c,#0c1d15);border:1px solid var(--line2);color:var(--acc3)}
.msg.bot .avatar{background:radial-gradient(circle at 30% 25%,rgba(var(--acc-rgb),.5),rgba(0,0,0,.7));border:1px solid var(--line2);box-shadow:0 0 18px rgba(var(--acc-rgb),.25)}
.msg.bot .avatar svg{width:20px;height:20px}
.msg.bot .avatar path{stroke:var(--acc);stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.msg.bot .avatar circle{fill:var(--acc)}
.msg.bot.busy .avatar{animation:logoPulse 1.4s ease-in-out infinite}
.bubble-col{min-width:0;flex:1;display:flex;flex-direction:column}
.msg.user .bubble-col{align-items:flex-end}
.bubble{position:relative;line-height:1.65;word-wrap:break-word;overflow-wrap:anywhere}
.msg.user .bubble{max-width:85%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.08));border:1px solid var(--line2);white-space:pre-wrap}
.msg.bot .bubble{padding:2px 2px}
.bubble[dir=auto]{unicode-bidi:plaintext}
.bubble p{margin:.5em 0}
.bubble p:first-child{margin-top:0}
.bubble h1,.bubble h2,.bubble h3{margin:1em 0 .45em;line-height:1.3;letter-spacing:-.01em}
.bubble h1{font-size:1.4em}.bubble h2{font-size:1.22em}.bubble h3{font-size:1.08em;color:var(--acc3)}
.bubble ul,.bubble ol{padding-inline-start:1.4em;margin:.5em 0}
.bubble li{margin:.25em 0}
.bubble li::marker{color:var(--acc)}
.bubble a{color:var(--acc);text-decoration:none;border-bottom:1px dashed rgba(var(--acc-rgb),.5)}
.bubble a:hover{border-bottom-style:solid}
.bubble strong{color:#fff}
.bubble blockquote{border-inline-start:3px solid var(--acc);padding:4px 14px;margin:.6em 0;color:var(--muted);background:rgba(var(--acc-rgb),.05);border-radius:0 10px 10px 0}
.bubble table{border-collapse:collapse;margin:.8em 0;width:100%;font-size:.92em;display:block;overflow-x:auto}
.bubble th,.bubble td{border:1px solid var(--line2);padding:7px 11px;text-align:start}
.bubble th{background:rgba(var(--acc-rgb),.1)}
.bubble code:not(.hljs){font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:6px;background:rgba(var(--acc-rgb),.1);color:var(--acc3)}
.bubble hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.cite{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin:0 1px;border-radius:6px;font-size:.68rem;font-weight:700;vertical-align:2px;background:rgba(var(--acc-rgb),.16);color:var(--acc)!important;border:0!important;transition:.2s}
.cite:hover{background:var(--acc);color:#02130b!important}
.codeblock{margin:.8em 0;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#06110c;direction:ltr;text-align:left}
.codeblock .cb-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(var(--acc-rgb),.07);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.codeblock .cb-head span{flex:1;min-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codeblock .cb-head button{padding:3px 9px;border-radius:7px;font-size:.74rem;color:var(--muted);transition:.2s;flex-shrink:0}
.codeblock .cb-head button:hover{background:rgba(var(--acc-rgb),.15);color:var(--acc)}
.codeblock pre{margin:0;overflow-x:auto}
.codeblock code.hljs{display:block;padding:14px 16px;font-family:var(--mono);font-size:.84rem;line-height:1.6;background:transparent}
.hljs{background:transparent!important}

.attach-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;justify-content:flex-end}
.attach-list img{max-width:220px;max-height:180px;border-radius:12px;border:1px solid var(--line2);cursor:zoom-in;transition:transform .3s var(--ease)}
.attach-list img:hover{transform:scale(1.03)}
.file-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line2);font-size:.82rem}
.file-pill .fi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(var(--acc-rgb),.14);font-size:.9rem}
.file-pill small{color:var(--dim);display:block;font-size:.7rem}

/* generated media */
.gen-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0}
.gen-img{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:imgIn .9s var(--ease) both}
.gen-img img{display:block;width:100%;cursor:zoom-in}
.gen-img .gi-acts{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;opacity:0;transform:translateY(6px);transition:.25s var(--ease)}
.gen-img:hover .gi-acts{opacity:1;transform:none}
.gi-acts button,.gi-acts a{padding:7px 11px;border-radius:10px;background:rgba(0,0,0,.8);border:1px solid var(--line2);font-size:.78rem;color:#fff;text-decoration:none}
@keyframes imgIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.img-skel{aspect-ratio:1;border-radius:16px;border:1px solid var(--line2);background:linear-gradient(110deg,rgba(var(--acc-rgb),.04) 30%,rgba(var(--acc-rgb),.14) 50%,rgba(var(--acc-rgb),.04) 70%);background-size:300% 100%;animation:skel 1.6s linear infinite;display:grid;place-items:center;color:var(--muted);font-size:.85rem;max-width:380px}
@keyframes skel{to{background-position:-300% 0}}
.file-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:10px 0;border-radius:16px;background:linear-gradient(135deg,rgba(var(--acc-rgb),.12),rgba(0,0,0,.35));border:1px solid var(--line2);animation:msgIn .5s var(--ease) both;max-width:520px}
.file-card .fc-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.5rem;background:rgba(0,0,0,.4);border:1px solid var(--line2)}
.file-card .fc-meta{flex:1;min-width:0}
.file-card .fc-meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card .fc-meta small{color:var(--muted);font-size:.78rem}
.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:700;color:#02130b;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 24px rgba(var(--acc-rgb),.3);transition:.25s var(--ease);white-space:nowrap}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--acc-rgb),.45)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;font-weight:600;border:1px solid var(--line2);background:rgba(0,0,0,.3);transition:.2s}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.08)}

.sources{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.src{display:inline-flex;align-items:center;gap:7px;max-width:260px;padding:6px 10px 6px 7px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--line);font-size:.76rem;color:var(--muted);text-decoration:none;transition:.22s var(--ease);animation:msgIn .4s var(--ease) both}
.src:hover{border-color:var(--acc);color:var(--text);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--acc-rgb),.15)}
.src img{width:16px;height:16px;border-radius:4px;background:#fff1}
.src .n{font-weight:800;color:var(--acc)}
.src .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* working / worked */
.work{margin-bottom:10px;max-width:100%}
.work-head{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);transition:.3s var(--ease)}
.work.live .work-head{border-color:rgba(var(--acc-rgb),.45);box-shadow:0 0 24px rgba(var(--acc-rgb),.12)}
.orb{position:relative;width:14px;height:14px}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc)}
.orb::before{animation:orbPulse 1.4s ease-out infinite}
.orb::after{inset:3px;box-shadow:0 0 10px var(--acc)}
@keyframes orbPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.working-word{font-weight:800;letter-spacing:.04em;background:linear-gradient(90deg,var(--acc2) 0%,#eafff5 45%,var(--acc) 55%,var(--acc2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wshim 1.6s linear infinite,wpulse 1.6s ease-in-out infinite}
@keyframes wshim{to{background-position:-250% 0}}
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.7}}
.work-dots i{display:inline-block;width:4px;height:4px;margin:0 1px;border-radius:50%;background:var(--acc);animation:dot 1.2s infinite}
.work-dots i:nth-child(2){animation-delay:.15s}.work-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.work-secs{font-family:var(--mono);font-size:.8rem;color:var(--acc3);min-width:44px;font-variant-numeric:tabular-nums}
.work-now{font-size:.8rem;color:var(--muted);max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fadeSwap .4s var(--ease)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.work-toggle{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--acc);background:rgba(var(--acc-rgb),.1);transition:.3s var(--ease)}
.work-toggle:hover{background:rgba(var(--acc-rgb),.22)}
.work.open .work-toggle{transform:rotate(180deg)}
.worked-word{font-weight:700;color:var(--muted);font-size:.86rem;display:inline-flex;align-items:center;gap:7px}
.worked-word svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round}
.worked-word b{color:var(--acc3);font-family:var(--mono);font-weight:600}
.work-log{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease),margin .3s}
.work.open .work-log{grid-template-rows:1fr;margin-top:8px}
.work-log>div{overflow:hidden}
.work-log ol{list-style:none;position:relative;margin:2px 0 4px 10px;padding:6px 0 6px 18px;border-left:1px dashed var(--line2)}
.work-log li{position:relative;font-size:.82rem;color:var(--muted);padding:3px 0;animation:logIn .4s var(--ease) both;display:flex;gap:8px}
.work-log li::before{content:"";position:absolute;left:-22.5px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.work-log li.cur::before{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.work-log li .lt{font-family:var(--mono);font-size:.72rem;color:var(--dim);min-width:38px}
.work-log li .lx{flex:1;overflow-wrap:anywhere}
.work-log li .lx a{color:var(--acc3);text-decoration:none}
.work-log li .lx img{width:13px;height:13px;vertical-align:-2px;border-radius:3px;margin-right:4px}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

.msg-actions{display:flex;gap:2px;margin-top:8px;opacity:0;transition:opacity .25s}
.msg:hover .msg-actions,.msg:focus-within .msg-actions{opacity:1}
.msg-actions button{padding:5px 8px;border-radius:8px;font-size:.78rem;color:var(--dim);transition:.2s}
.msg-actions button:hover{background:rgba(var(--acc-rgb),.1);color:var(--acc)}
.edit-box{width:100%;max-width:640px}
.edit-box textarea{width:100%;min-height:80px;padding:12px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid var(--acc);outline:none;resize:vertical;line-height:1.5}
.edit-box .row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.err-card{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,91,122,.4);background:rgba(255,91,122,.08);color:#ffc2cf;font-size:.9rem}

.upgrade-card{position:relative;overflow:hidden;padding:20px;border-radius:20px;max-width:520px;background:linear-gradient(135deg,rgba(var(--acc-rgb),.18),rgba(0,0,0,.5) 60%);border:1px solid rgba(var(--acc-rgb),.45);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 50px rgba(var(--acc-rgb),.12);animation:pop .6s var(--spring) both}
.upgrade-card::before{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc-rgb),.45),transparent 70%);animation:float 9s ease-in-out infinite}
.upgrade-card h3{position:relative;display:flex;align-items:center;gap:10px;font-size:1.1rem;margin-bottom:6px}
.upgrade-card p{position:relative;color:var(--muted);font-size:.9rem;line-height:1.55;margin-bottom:14px}
.upgrade-card ul{position:relative;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;font-size:.84rem}
.upgrade-card li::before{content:"✦ ";color:var(--acc)}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}

/* empty state */
.empty{max-width:var(--chat-w);margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 10px 10px}
.hero-orb{position:relative;width:96px;height:96px;margin-bottom:22px}
.hero-orb .core{position:absolute;inset:14px;border-radius:28px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(var(--acc-rgb),.55),rgba(0,0,0,.85));border:1px solid rgba(var(--acc-rgb),.5);box-shadow:0 0 60px rgba(var(--acc-rgb),.35);animation:heroFloat 5s ease-in-out infinite}
.hero-orb .core svg{width:40px;height:40px}
.hero-orb .core path{stroke:var(--acc);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;animation:draw 2s var(--ease) both}
.hero-orb .core circle{fill:var(--acc)}
.hero-orb .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.35);animation:ring 3s ease-out infinite}
.hero-orb .ring:nth-child(2){animation-delay:1s}.hero-orb .ring:nth-child(3){animation-delay:2s}
@keyframes ring{from{transform:scale(.7);opacity:1}to{transform:scale(1.7);opacity:0}}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}
.empty h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px}
.empty h1 .g{background:linear-gradient(90deg,var(--acc),#d6fff0,var(--acc));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s linear infinite}
.empty .sub{color:var(--muted);margin-bottom:28px;max-width:520px;line-height:1.55}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:680px}
.chip{position:relative;overflow:hidden;text-align:left;padding:14px 16px;border-radius:16px;background:rgba(6,18,12,.65);border:1px solid var(--line);transition:.3s var(--ease);animation:msgIn .6s var(--ease) both}
.chip:nth-child(2){animation-delay:.07s}.chip:nth-child(3){animation-delay:.14s}.chip:nth-child(4){animation-delay:.21s}
.chip b{display:flex;align-items:center;gap:8px;font-size:.9rem;margin-bottom:3px}
.chip small{color:var(--dim);font-size:.8rem}
.chip .tag{font-size:.6rem;padding:1px 6px;border-radius:999px;background:rgba(var(--acc-rgb),.18);color:var(--acc);font-weight:800}
.chip:hover{border-color:rgba(var(--acc-rgb),.55);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 24px rgba(var(--acc-rgb),.15);background:rgba(var(--acc-rgb),.08)}

/* composer */
.composer-wrap{padding:0 20px 14px;position:relative}
.composer-wrap::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:40px;background:linear-gradient(transparent,rgba(3,8,6,.6));pointer-events:none}
.attach-tray{max-width:var(--chat-w);margin:0 auto 8px;display:flex;flex-wrap:wrap;gap:8px}
.attach-tray:empty{display:none}
.tray-item{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(0,0,0,.5);border:1px solid var(--line2);font-size:.8rem;animation:pop .4s var(--spring) both}
.tray-item img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.tray-item .x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#1a2a22;border:1px solid var(--line2);font-size:.65rem;display:grid;place-items:center}
.tray-item .x:hover{background:var(--danger);color:#fff}
.composer{position:relative;max-width:var(--chat-w);margin:0 auto;display:flex;align-items:flex-end;gap:6px;padding:8px;border-radius:22px;background:rgba(6,16,11,.94);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.45);transition:.3s var(--ease)}
.composer:focus-within{border-color:rgba(var(--acc-rgb),.6);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 4px rgba(var(--acc-rgb),.08),0 0 40px rgba(var(--acc-rgb),.15)}
.composer.drag{border-style:dashed;border-color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.composer textarea{flex:1;min-width:0;resize:none;max-height:220px;padding:10px 6px;background:none;border:0;outline:none;line-height:1.5;unicode-bidi:plaintext}
.composer textarea::placeholder{color:var(--dim)}
.tools{position:relative}
.tool-btn{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:1.15rem;color:var(--muted);transition:.25s var(--ease)}
.tool-btn:hover{background:rgba(var(--acc-rgb),.1);color:var(--acc)}
#plusBtn.open{transform:rotate(45deg);color:var(--acc)}
.tool-btn.mic.rec{background:var(--danger);color:#fff;animation:recPulse 1.2s infinite}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(255,91,122,.6)}100%{box-shadow:0 0 0 14px rgba(255,91,122,0)}}
.plus-menu{position:absolute;bottom:calc(100% + 14px);left:-4px;width:260px;padding:6px;border-radius:16px;background:rgba(5,15,10,.97);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(8px) scale(.97);transform-origin:bottom left;pointer-events:none;transition:.25s var(--ease);z-index:30}
.plus-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border-radius:11px;font-size:.88rem;text-align:left;transition:.2s}
.plus-menu button:hover{background:rgba(var(--acc-rgb),.09)}
.plus-menu button span{flex:1}
.plus-menu i{font-style:normal;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(var(--acc-rgb),.15);color:var(--acc)}
body:not(.stark) .plus-menu .stark i::before{content:"🔒 "}
.mode-chip{align-self:center;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 11px;border-radius:999px;background:rgba(var(--acc-rgb),.15);border:1px solid rgba(var(--acc-rgb),.45);color:var(--acc);font-size:.78rem;font-weight:700;white-space:nowrap;animation:pop .35s var(--spring)}
.mode-chip button{width:18px;height:18px;border-radius:50%;font-size:.6rem;background:rgba(0,0,0,.35)}
.send{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 6px 20px rgba(var(--acc-rgb),.35);transition:.25s var(--spring);flex-shrink:0}
.send svg{width:19px;height:19px;fill:#02130b}
.send:hover:not(:disabled){transform:scale(1.08) rotate(-8deg);box-shadow:0 8px 28px rgba(var(--acc-rgb),.55)}
.send:disabled{background:rgba(var(--acc-rgb),.15);box-shadow:none;cursor:default}
.send:disabled svg{fill:var(--dim)}
.send.stop{background:linear-gradient(135deg,#ff7b93,#d6335a);box-shadow:0 6px 20px rgba(255,91,122,.35)}
.send.stop svg{display:none}
.send.stop::after{content:"";width:13px;height:13px;border-radius:3px;background:#fff}
.composer-hint{text-align:center;font-size:.72rem;color:var(--dim);margin-top:8px}

.code-view{overflow-y:auto !important;overflow-x:hidden;height:100% !important;min-height:100% !important;padding:24px clamp(16px,3vw,42px) 160px;gap:18px;scroll-behavior:smooth}
.code-view>*{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}
.lc-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lc-title-wrap{display:flex;flex-direction:column;gap:2px;flex:1}
.lc-head h1{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.lc-glyph{font-family:var(--mono);color:var(--acc);text-shadow:0 0 18px rgba(var(--acc-rgb),.8);animation:blink 2.4s infinite}
.lc-sub{color:var(--muted);font-size:.86rem}
.lc-stats-badge{padding:6px 14px;border-radius:999px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.3);color:var(--acc);font-family:var(--mono);font-size:.78rem;font-weight:700}
.back-btn{padding:8px 14px;border-radius:11px;border:1px solid var(--line2);color:var(--muted);font-weight:600;transition:.2s}
.back-btn:hover{color:var(--acc);border-color:var(--acc);transform:translateX(-2px)}
.lc-langs-bar-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.lc-langs-title{font-size:.84rem;font-weight:700;color:#6ee7b7;letter-spacing:.02em}
.lc-langs-sub{font-size:.75rem;color:var(--dim)}
.lc-langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.lang{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:13px;font-size:.86rem;font-weight:700;border:1px solid var(--line2);background:rgba(4,14,9,.75);color:var(--muted);transition:.22s var(--ease);cursor:pointer}
.lang i{width:9px;height:9px;border-radius:50%;background:var(--c,#888);box-shadow:0 0 10px var(--c,#888)}
.lang:hover{color:var(--text);border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.lang.on{color:#02130b;background:var(--acc);border-color:var(--acc);box-shadow:0 0 24px rgba(var(--acc-rgb),.45)}
.lang.on i{background:#02130b;box-shadow:none}
.lc-prompt{display:flex;gap:12px;align-items:stretch;padding:12px;border-radius:20px;background:rgba(6,16,11,.95);border:1px solid var(--line2);transition:.3s;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.lc-prompt:focus-within{border-color:rgba(var(--acc-rgb),.65);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.1),0 0 40px rgba(var(--acc-rgb),.18)}
.lc-prompt textarea{flex:1;resize:vertical;background:none;border:0;outline:none;padding:8px;line-height:1.55;min-height:64px;font-size:.95rem;unicode-bidi:plaintext}
.lc-prompt-actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
.lc-check{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.lc-check input{accent-color:var(--acc)}
.lc-go{position:relative;overflow:hidden;padding:12px 22px;border-radius:13px;font-weight:800;color:#02130b;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 8px 24px rgba(var(--acc-rgb),.35);transition:.25s var(--ease);white-space:nowrap;cursor:pointer}
.lc-go:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--acc-rgb),.5)}
.lc-go:disabled{opacity:.55;transform:none;cursor:wait}
.lc-working{padding:0}
.lc-panel{border-radius:18px;overflow:visible !important;border:1px solid var(--line2);background:rgba(4,12,8,.96);box-shadow:0 24px 60px rgba(0,0,0,.45);height:auto !important;max-height:none !important}
.lc-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(var(--acc-rgb),.07);border-bottom:1px solid var(--line);border-radius:18px 18px 0 0}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.lc-file{font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--text)}
.lc-lines-tag{font-family:var(--mono);font-size:.74rem;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--muted)}
.lc-bar-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.lc-bar-actions button{padding:6px 12px;border-radius:9px;font-size:.8rem;font-weight:600;color:var(--muted);border:1px solid var(--line);transition:.2s;cursor:pointer}
.lc-bar-actions button:hover{color:var(--acc);border-color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.lc-bar-actions .run{position:relative;overflow:hidden;color:#02130b;background:var(--acc);border-color:var(--acc);font-weight:800;box-shadow:0 0 18px rgba(var(--acc-rgb),.4)}
.lc-bar-actions .run:hover{color:#02130b;background:#5dffbf;transform:translateY(-1px)}
.lc-code{min-height:220px;height:auto !important;max-height:none !important;overflow-y:visible !important;overflow-x:auto;direction:ltr;border-radius:0 0 18px 18px}
.lc-code pre{margin:0;height:auto !important;min-height:220px;overflow:visible !important}
.lc-code code.hljs{display:block;padding:18px 22px;font-family:var(--mono);font-size:.86rem;line-height:1.68;counter-reset:ln;white-space:pre;min-height:220px;height:auto !important;max-height:none !important;overflow:visible !important}
.lc-code code .ln{counter-increment:ln}
.lc-code code .ln::before{content:counter(ln);display:inline-block;width:3.8em;margin-left:-.4em;margin-right:1.4em;text-align:right;color:var(--dim);opacity:.65;user-select:none}
.lc-code.typing code::after{content:"▋";color:var(--acc);animation:blink .8s infinite}
.lc-stdin{border-top:1px solid var(--line)}
.lc-stdin input{width:100%;padding:11px 16px;background:rgba(0,0,0,.3);border:0;outline:none;font-family:var(--mono);font-size:.82rem}
.lc-out-head span{font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:8px}
.lc-out-head span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.lc-out-head div{margin-left:auto;display:flex;gap:6px}
#lcFix{color:#02130b;background:var(--warn);border-color:var(--warn)}
.lc-output{margin:0;padding:14px 18px;min-height:90px;max-height:360px;overflow:auto;font-family:var(--mono);font-size:.84rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;direction:ltr}
.lc-output .muted{color:var(--dim)}
.lc-output .err{color:#ff8fa5}
.lc-output .warn{color:var(--warn)}
.lc-output .ok{color:var(--acc)}
.lc-output .meta{color:var(--dim);font-size:.76rem}
.lc-output .explain{font-family:var(--font);white-space:normal;line-height:1.6}
.lc-preview{display:block;width:100%;height:420px;border:0;border-top:1px solid var(--line);background:#fff;animation:pop .5s var(--ease)}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,4,2,.78);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:min(640px,100%);max-height:min(86vh,900px);display:flex;flex-direction:column;border-radius:24px;background:linear-gradient(180deg,rgba(8,22,15,.97),rgba(4,12,8,.98));border:1px solid var(--line2);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(var(--acc-rgb),.1);animation:modalPop .45s var(--spring)}
.modal-card.wide{width:min(980px,100%)}
@keyframes modalPop{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.modal.closing{animation:fade .25s reverse both}
.modal.closing .modal-card{animation:modalPop .25s reverse both}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:1.15rem;font-weight:800;flex:1;display:flex;align-items:center;gap:10px}
.modal-body{overflow-y:auto;padding:18px 22px 24px}
.set-sec{margin-bottom:22px}
.set-sec h3{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.set-sec h3::after{content:"";flex:1;height:1px;background:var(--line)}
.set-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid rgba(var(--acc-rgb),.06)}
.set-row:last-child{border-bottom:0}
.set-row .lbl{flex:1}
.set-row .lbl b{display:block;font-size:.9rem;font-weight:600}
.set-row .lbl small{color:var(--dim);font-size:.77rem}
.set-row.col{flex-direction:column;align-items:stretch}
.set-row select,.set-row input[type=text],.set-row textarea,.lab-input,.lab-select{padding:9px 12px;border-radius:11px;background:rgba(0,0,0,.45);border:1px solid var(--line2);outline:none;transition:.2s}
.set-row textarea,.lab-input{width:100%;resize:vertical;line-height:1.5}
.set-row select:focus,.set-row input:focus,.set-row textarea:focus,.lab-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12)}
select option{background:#06110c}
input[type=range]{accent-color:var(--acc);width:150px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line2);transition:.3s;cursor:pointer}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#9bb8aa;transition:.35s var(--spring)}
.switch input:checked+span{background:rgba(var(--acc-rgb),.35);border-color:var(--acc)}
.switch input:checked+span::after{left:23px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.swatches{display:flex;gap:8px;align-items:center}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:.25s var(--spring)}
.swatch:hover{transform:scale(1.15)}
.swatch.on{border-color:#fff;box-shadow:0 0 14px var(--sw)}
.swatches input[type=color]{width:30px;height:30px;border:0;background:none;padding:0;cursor:pointer}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:rgba(0,0,0,.45);border:1px solid var(--line)}
.seg button{padding:6px 11px;border-radius:8px;font-size:.8rem;color:var(--muted);transition:.2s}
.seg button.on{background:var(--acc);color:#02130b;font-weight:700}
.danger-btn{padding:9px 14px;border-radius:11px;border:1px solid rgba(255,91,122,.5);color:#ff9aae;font-weight:600;transition:.2s}
.danger-btn:hover{background:rgba(255,91,122,.15)}
.shortcuts{display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:.84rem;color:var(--muted)}

/* labs content */
.lab-grid{display:grid;gap:14px}
.lab-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lab-out{border-radius:16px;border:1px solid var(--line2);background:rgba(0,0,0,.35);padding:16px;min-height:60px}
.lab-out.md{line-height:1.6}
.lab-frame{width:100%;height:480px;border:0;border-radius:14px;background:#fff}
.lab-desc{color:var(--muted);font-size:.9rem;line-height:1.55}
.voice-stage{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px 0}
.voice-orb{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(var(--acc-rgb),.8),rgba(0,60,35,.9) 60%,#010604);box-shadow:0 0 60px rgba(var(--acc-rgb),.4);transition:.4s var(--ease);cursor:pointer;font-size:2.4rem}
.voice-orb::before,.voice-orb::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.4);opacity:0}
.voice-orb.listening{animation:heroFloat 3s ease-in-out infinite}
.voice-orb.listening::before{animation:ring 1.6s ease-out infinite}
.voice-orb.listening::after{animation:ring 1.6s ease-out .8s infinite}
.voice-orb.speaking{animation:speak 0.6s ease-in-out infinite alternate}
.voice-orb.thinking{animation:wpulse 1s infinite}
@keyframes speak{from{transform:scale(1);box-shadow:0 0 40px rgba(var(--acc-rgb),.3)}to{transform:scale(1.08);box-shadow:0 0 90px rgba(var(--acc-rgb),.7)}}
.voice-status{font-weight:700;font-size:1.05rem}
.voice-transcript{max-width:600px;text-align:center;color:var(--muted);min-height:3em;unicode-bidi:plaintext}
.chart-box{background:rgba(0,0,0,.35);border-radius:16px;padding:14px;border:1px solid var(--line2);height:420px;position:relative}
.lock-card{text-align:center;padding:30px 10px}
.lock-card .big{font-size:3rem;margin-bottom:10px;animation:heroFloat 4s ease-in-out infinite}

/* toasts */
.toasts{position:fixed;z-index:200;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;background:rgba(6,18,12,.96);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(var(--acc-rgb),.12);font-size:.88rem;font-weight:500;animation:toastIn .45s var(--spring) both;pointer-events:auto}
.toast.out{animation:toastOut .35s var(--ease) both}
.toast.err{border-color:rgba(255,91,122,.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:30px;cursor:zoom-out;animation:fade .3s}
.lightbox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.8);animation:modalPop .4s var(--spring)}

/* reduce motion */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .think-label{display:none}
  .think-track button{padding:6px 8px;font-size:.72rem}
}
@media (max-width:820px){
  .only-mobile{display:grid!important}
  .sidebar{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(86vw,320px);transform:translateX(-105%);box-shadow:30px 0 80px rgba(0,0,0,.6)}
  body.sb-open .sidebar{transform:none}
  body.sb-collapsed .sidebar{margin-left:0}
  .scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s}
  body.sb-open .scrim{opacity:1;pointer-events:auto}
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .model-btn{padding:8px 11px;font-size:.88rem}
  .model-menu{width:min(330px,calc(100vw - 24px))}
  .think{order:5;width:100%;margin-left:0;justify-content:center}
  .think-track{width:100%}
  .think-track button{flex:1;padding:6px 2px}
  .top-actions{margin-left:auto}
  .labs-btn{padding:8px 12px}
  .messages{padding:18px 12px 30px}
  .msg{gap:10px}
  .avatar{width:30px;height:30px}
  .msg.user .bubble{max-width:92%}
  .chips{grid-template-columns:1fr}
  .chip:nth-child(n+4){display:none}
  .composer-wrap{padding:0 10px 10px}
  .work-now{max-width:150px}
  .lc-prompt{flex-direction:column}
  .lc-prompt-actions{flex-direction:row;align-items:center}
  .lc-bar{flex-wrap:wrap}
  .lc-bar-actions{width:100%;margin-left:0}
  .lc-bar-actions button{flex:1}
  .upgrade-card ul{grid-template-columns:1fr}
  .modal{padding:10px;align-items:end}
  .modal-card{max-height:92vh;border-radius:22px 22px 16px 16px}
  .set-row{flex-wrap:wrap}
  .lab-frame{height:360px}
}

/* ==========================================================
   v2.1 — perf modes, RTL, lessons, widgets, call, labs
   ========================================================== */
:root{--spd:1}
.view,.msg,.modal-card{animation-duration:calc(.55s * var(--spd))}
body.perf .aurora,body.perf .grain{display:none}
body.perf *,body.perf *::before,body.perf *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.12s!important}
body.perf .logo,body.perf .msg.bot .avatar,body.perf .think-fill,body.perf .composer{box-shadow:none!important}
body.perf .btn-lokicode::before{display:none}
body.reduce-motion .ripple{display:none}
body.compact .msg{margin-bottom:14px;gap:10px}
body.compact .messages{padding:16px 14px 24px}
body.compact .msg.user .bubble{padding:8px 12px}
body.compact .bubble{line-height:1.5}
body.bubble-solid .msg.user .bubble{background:#0f2a1d;border-color:var(--line2)}
body.bubble-solid .msg.bot .bubble{background:rgba(10,24,17,.92);border:1px solid var(--line);border-radius:18px;padding:12px 16px}
body.bubble-minimal .msg.user .bubble{background:transparent;border:0;border-inline-end:3px solid var(--acc);border-radius:0;padding:4px 12px}
body.bubble-glass .msg.bot .bubble{background:rgba(var(--acc-rgb),.035);border:1px solid var(--line);border-radius:18px;padding:12px 16px}

/* RTL */
html[dir=rtl] .msg.user .bubble{border-radius:18px 18px 18px 4px}
html[dir=rtl] .bubble blockquote{border-radius:10px 0 0 10px}
html[dir=rtl] pre,html[dir=rtl] code,html[dir=rtl] .lc-code,html[dir=rtl] .lc-out,html[dir=rtl] kbd,html[dir=rtl] textarea.code{direction:ltr;text-align:left}
html[dir=rtl] .sidebar{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .chev,html[dir=rtl] .back-btn svg{transform:scaleX(-1)}
html[lang=he] body,html[lang=ar] body{font-family:var(--font),'Rubik','Noto Sans Hebrew','Noto Sans Arabic',system-ui,sans-serif}
html[lang=ar] .bubble{line-height:1.8}

/* streaming */
.bubble.streaming>*:last-child::after{content:"";display:inline-block;width:.5em;height:1em;margin-inline-start:3px;vertical-align:-2px;border-radius:2px;background:var(--acc);animation:blink .9s steps(2) infinite}
.work.streaming{opacity:.85}

/* ripple + new pill */
.btn-primary,.btn-new,.chip,.lc-go,.send,.q-opt,.ls-subject,.call-btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(var(--acc-rgb),.35);transform:scale(0);opacity:1;animation:ripple calc(.6s * var(--spd)) var(--ease) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.new-pill{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:99px;font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.04em;background:var(--acc);color:#02130b;vertical-align:2px;animation:pillIn .5s var(--spring) both}
@keyframes pillIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.lab-opt.is-new{border-color:rgba(var(--acc-rgb),.35)}
.btn-lessons{margin-top:6px}
.btn-lessons::before{animation-delay:-2s!important}
.call-btn svg{width:18px;height:18px}
.call-btn:hover{color:var(--acc)}

/* green beautiful animated image placeholder */
.img-ph{position:relative;width:min(100%,480px);aspect-ratio:1;border-radius:24px;overflow:hidden;border:1.5px solid rgba(0,255,156,0.65);background:radial-gradient(circle at 50% 35%,rgba(0,255,156,0.22),transparent 65%),linear-gradient(165deg,#021a0f 0%,#010d07 60%,#000503 100%);box-shadow:0 16px 50px rgba(0,0,0,0.8),0 0 35px rgba(0,255,156,0.2),inset 0 0 40px rgba(0,255,156,0.12);isolation:isolate;animation:pop .5s var(--ease) both;display:flex;flex-direction:column;justify-content:space-between;padding:18px;box-sizing:border-box}
.ph-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,156,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.12) 1px,transparent 1px);background-size:24px 24px;transform:perspective(320px) rotateX(50deg) translateY(20%) scale(1.6);transform-origin:bottom;opacity:.8}
.ph-rings{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;pointer-events:none}
.ph-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(0,255,156,0.4);animation:phSpin 16s linear infinite}
.ph-ring.r2{inset:24px;border:1.5px dotted rgba(125,255,207,0.55);animation:phSpin 10s linear infinite reverse}
.ph-ring.r3{inset:48px;border:1px solid rgba(0,255,156,0.3);animation:phSpin 22s linear infinite}
@keyframes phSpin{to{transform:rotate(360deg)}}
.ph-core-pulse{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,156,0.45) 0%,rgba(0,255,156,0.1) 60%,transparent 75%);animation:phCorePulse 2.4s ease-in-out infinite}
@keyframes phCorePulse{0%,100%{transform:translate(-50%,-50%) scale(0.9);opacity:0.6}50%{transform:translate(-50%,-50%) scale(1.25);opacity:1}}
.ph-scan{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(0,255,156,.14) 75%,rgba(0,255,156,.6));border-bottom:2px solid #00ff9c;box-shadow:0 4px 15px rgba(0,255,156,0.4);animation:phScan 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes phScan{from{transform:translateY(-100%)}to{transform:translateY(360%)}}
.ph-sparks i{position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#7dffcf;box-shadow:0 0 8px #00ff9c;animation:phSpark 2.8s linear infinite}
@keyframes phSpark{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-440px);opacity:0}}
.ph-top-badge{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-brand-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,255,156,0.15);border:1px solid rgba(0,255,156,0.45);color:#00ff9c;font-size:11px;font-weight:700;letter-spacing:0.8px;padding:3px 9px;border-radius:99px;text-transform:uppercase}
.ph-brand-chip span{width:7px;height:7px;border-radius:50%;background:#00ff9c;box-shadow:0 0 8px #00ff9c;animation:vphBlink 1.2s ease-in-out infinite}
.ph-sec-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,0.65);border:1px solid rgba(0,255,156,0.35);color:#7dffcf;font-family:monospace;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.ph-sec-chip b{color:#00ff9c;font-size:13px}
.ph-middle{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;margin:auto 0}
.ph-icon{font-size:2.2rem;animation:heroFloat 2.6s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(0,255,156,0.5))}
.ph-analysis-box{width:100%;max-width:380px;background:rgba(0,0,0,0.75);border:1px solid rgba(0,255,156,0.3);border-radius:12px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,0.4);display:flex;flex-direction:column;gap:4px;text-align:start}
.ph-analysis-head{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8ebd9c}
.ph-radar-dot{width:6px;height:6px;border-radius:50%;background:#00ff9c;box-shadow:0 0 8px #00ff9c;animation:vphBlink 0.9s step-start infinite}
.ph-analysis-task{font-size:12.5px;font-weight:700;color:#ffffff;line-height:1.4;min-height:34px;display:flex;align-items:center}
.ph-analysis-task.swap{animation:fadeSwap .35s var(--ease)}
.ph-bottom{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}
.ph-bar{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(0,255,156,0.25)}
.ph-bar span{display:block;height:100%;background:linear-gradient(90deg,#00d2ff,#00ff9c);box-shadow:0 0 10px #00ff9c;transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
html[dir=rtl] .ph-bar span{transform-origin:right}
.ph-status-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8ebd9c;font-family:monospace}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;opacity:0;transform:scale(1.08)}
.img-ph.reveal .ph-img{animation:phReveal .9s var(--ease) forwards}
.img-ph.reveal .ph-top-badge,.img-ph.reveal .ph-middle,.img-ph.reveal .ph-bottom{opacity:0;transition:opacity .4s}
@keyframes phReveal{0%{opacity:0;transform:scale(1.08);clip-path:circle(0% at 50% 50%)}100%{opacity:1;transform:none;clip-path:circle(75% at 50% 50%)}}
.noanim,.noanim *{animation:none!important}

/* photo understanding & vision insights card */
.photo-insights-card{margin:12px 0;background:rgba(5,15,10,0.92);border:1px solid rgba(0,255,156,0.38);border-radius:18px;padding:16px;box-shadow:0 12px 35px rgba(0,0,0,0.65),0 0 20px rgba(0,255,156,0.12);backdrop-filter:blur(14px);animation:pop .45s var(--ease) both}
.pi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.08);gap:10px;flex-wrap:wrap}
.pi-title-col{display:flex;align-items:center;gap:10px}
.pi-icon{font-size:1.6rem}
.pi-title{font-size:14px;font-weight:700;color:#fff;display:block}
.pi-sub{font-size:11px;color:#7dffcf;display:block}
.pi-badge{font-size:10px;background:rgba(0,255,156,0.14);color:#00ff9c;border:1px solid rgba(0,255,156,0.35);padding:2px 8px;border-radius:99px;font-weight:700}
.pi-sec{margin-top:12px}
.pi-sec-label{font-size:11px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;color:#8ebd9c;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.pi-summary-box{background:rgba(0,255,156,0.06);border-inline-start:3px solid #00ff9c;border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.5;color:#eafff5}
.pi-objects-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pi-obj-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(0,255,156,0.25);border-radius:20px;padding:4px 10px;font-size:12px;color:#ffffff;transition:background .2s}
.pi-obj-chip:hover{background:rgba(0,255,156,0.15)}
.pi-obj-loc{font-size:10px;background:rgba(0,255,156,0.18);color:#7dffcf;padding:1px 6px;border-radius:10px}
.pi-ocr-box{position:relative;background:#020906;border:1px solid rgba(0,255,156,0.22);border-radius:10px;padding:12px;margin-top:6px;font-family:monospace;font-size:12px;color:#7dffcf;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto}
.pi-copy-btn{position:absolute;top:8px;right:8px;background:rgba(0,255,156,0.15);border:1px solid rgba(0,255,156,0.4);color:#00ff9c;border-radius:6px;padding:4px 9px;font-size:11px;cursor:pointer;font-weight:600;transition:all .2s}
.pi-copy-btn:hover{background:#00ff9c;color:#02130b}
.pi-no-text{font-size:12px;color:#8ebd9c;font-style:italic;padding:6px 0}
.pi-attrs-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.06)}
.pi-colors-wrap{display:flex;align-items:center;gap:6px}
.pi-color-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.5);display:inline-block}
.pi-tags-wrap{display:flex;gap:6px;flex-wrap:wrap}
.pi-tag{font-size:11px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);padding:2px 8px;border-radius:6px;color:#ddd}

/* video placeholder - cinematic camera viewfinder */
.video-ph{position:relative;width:min(100%,540px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid rgba(0,255,156,0.4);background:#030906;box-shadow:0 14px 45px rgba(0,0,0,0.7),inset 0 0 40px rgba(0,0,0,0.8);isolation:isolate;animation:pop .5s var(--ease) both;display:flex;flex-direction:column;justify-content:space-between;padding:16px;box-sizing:border-box}
.video-ph[data-ratio="9:16"]{aspect-ratio:9/16;max-height:520px;width:auto;margin:0 auto}
.video-ph[data-ratio="1:1"]{aspect-ratio:1;max-width:440px}
.video-ph[data-ratio="4:3"]{aspect-ratio:4/3}
.vph-reticle{position:absolute;inset:12px;border:1px dashed rgba(0,255,156,0.2);border-radius:8px;pointer-events:none}
.vph-corner{position:absolute;width:16px;height:16px;border-color:#00ff9c;border-style:solid;pointer-events:none}
.vph-tl{top:12px;left:12px;border-width:2px 0 0 2px}
.vph-tr{top:12px;right:12px;border-width:2px 2px 0 0}
.vph-bl{bottom:12px;left:12px;border-width:0 0 2px 2px}
.vph-br{bottom:12px;right:12px;border-width:0 2px 2px 0}
.vph-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;pointer-events:none;opacity:0.35}
.vph-cross::before,.vph-cross::after{content:"";position:absolute;background:#00ff9c}
.vph-cross::before{left:11px;top:0;width:2px;height:24px}
.vph-cross::after{top:11px;left:0;height:2px;width:24px}
.vph-top-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;font-family:monospace;font-size:11px}
.vph-rec{display:inline-flex;align-items:center;gap:6px;background:rgba(255,0,60,0.18);border:1px solid rgba(255,0,60,0.4);color:#ff3b5c;padding:3px 8px;border-radius:6px;font-weight:800;letter-spacing:1px}
.vph-rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 8px #ff3b5c;animation:vphBlink 1s step-start infinite}
@keyframes vphBlink{50%{opacity:0}}
.vph-meta{color:#8ebd9c;font-size:11px;display:flex;gap:8px}
.vph-center{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0}
.vph-icon{font-size:2rem;animation:heroFloat 2.4s ease-in-out infinite}
.vph-step{font-size:13px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.9)}
.vph-step.swap{animation:fadeSwap .35s var(--ease)}
.vph-timecode{font-family:monospace;font-size:13px;color:#7dffcf;font-weight:700;letter-spacing:1px;background:rgba(0,0,0,0.6);padding:3px 10px;border-radius:6px;border:1px solid rgba(0,255,156,0.25)}
.vph-bottom-bar{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px}
.vph-progress{width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,0.12);overflow:hidden}
.vph-progress span{display:block;height:100%;background:linear-gradient(90deg,#00d2ff,#00ff9c);transform-origin:left;transform:scaleX(0);transition:transform .2s linear}
.vph-stats{display:flex;justify-content:space-between;font-size:10px;color:#8ebd9c;font-family:monospace}


/* widget */
.widget-card{margin:10px 0;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#050f0a;box-shadow:0 18px 50px rgba(0,0,0,.4);animation:pop .5s var(--ease) both}
.wg-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(var(--acc-rgb),.05)}
.wg-ic{color:var(--acc)}
.wg-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.wg-tag{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line2);color:var(--acc3)}
.wg-acts{display:flex;gap:4px}
.wg-acts button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:.2s}
.wg-acts button:hover{background:rgba(var(--acc-rgb),.12);color:var(--acc)}
.widget-card iframe{display:block;width:100%;height:440px;border:0;background:#fff}
.widget-card.full{position:fixed;inset:12px;z-index:150;margin:0;display:flex;flex-direction:column;animation:modalPop .35s var(--ease)}
.widget-card.full iframe{flex:1;height:auto}

/* settings tabs */
.set-tabs{position:sticky;top:-1px;z-index:3;display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;margin-bottom:6px;background:linear-gradient(180deg,#07130d 75%,transparent);scrollbar-width:none}
.set-tabs button{flex-shrink:0;padding:6px 12px;border-radius:99px;font-size:.8rem;color:var(--muted);border:1px solid var(--line);transition:.25s}
.set-tabs button.on,.set-tabs button:hover{color:#02130b;background:var(--acc);border-color:var(--acc)}
.set-sec{scroll-margin-top:60px}

/* confetti */
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:200;pointer-events:none}

/* ================= LokiLessons ================= */
.lessons-view{overflow:hidden}
.ls-wrap{display:flex;height:100%;min-height:0}
.ls-side{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px 12px;border-inline-end:1px solid var(--line);background:rgba(3,10,7,.6);overflow-y:auto}
.ls-brand{display:flex;gap:10px;align-items:center;padding:4px 6px 10px}
.ls-logo{font-size:1.6rem;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(var(--acc-rgb),.12);border:1px solid var(--line2)}
.ls-brand b{display:block;font-size:1.05rem}.ls-brand small{color:var(--muted);font-size:.75rem}
.ls-subjects{display:grid;gap:6px}
.ls-subject{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;text-align:start;border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s var(--spring);animation:slideIn .4s var(--ease) both}
.ls-subject:hover{background:rgba(var(--acc-rgb),.06);transform:translateX(2px)}
html[dir=rtl] .ls-subject:hover,.lessons-view[dir=rtl] .ls-subject:hover{transform:translateX(-2px)}
.ls-subject.on{background:rgba(var(--acc-rgb),.12);border-color:var(--line2)}
.ls-ic{font-size:1.3rem;width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:hsla(var(--h,150),70%,45%,.16)}
.ls-nm{flex:1;min-width:0;display:grid;gap:2px}
.ls-nm b{font-size:.9rem}.ls-nm small{font-size:.7rem;color:var(--muted)}
.ls-prog{height:3px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:3px}
.ls-prog i{display:block;height:100%;background:var(--acc);transform-origin:left;transition:transform .8s var(--ease)}
.lessons-view[dir=rtl] .ls-prog i{transform-origin:right}
.ls-due{min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:.68rem;font-weight:800;background:var(--warn);color:#201500}
.ls-back{margin-top:auto}
.ls-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ls-head{display:flex;align-items:center;gap:14px;padding:16px 22px 8px;animation:fadeSwap .4s var(--ease)}
.ls-hicon{font-size:2rem;width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;border-radius:16px;background:rgba(var(--acc-rgb),.1);border:1px solid var(--line2)}
.ls-htxt{flex:1;min-width:0}
.ls-htxt h2{font-size:1.3rem;margin-bottom:6px}
.ls-topics{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ls-topic{flex-shrink:0;padding:4px 10px;border-radius:99px;font-size:.74rem;border:1px solid var(--line);color:var(--muted);transition:.2s}
.ls-topic:hover{color:var(--acc);border-color:var(--acc)}
.ls-hstat{display:grid;justify-items:center;gap:2px;font-size:.68rem;color:var(--muted)}
.ls-ring{width:52px;height:52px}
.ls-ring circle{fill:none;stroke-width:6}
.ls-ring circle:first-child{stroke:rgba(255,255,255,.08)}
.ls-ring .v{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ls-ring text{fill:#fff;font-size:15px;font-weight:800}
.ls-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 22px 10px;border-bottom:1px solid var(--line)}
.ls-tool{padding:7px 12px;border-radius:11px;font-size:.82rem;border:1px solid var(--line2);background:rgba(0,0,0,.25);transition:transform .2s var(--spring),background .2s}
.ls-tool:hover:not(:disabled){transform:translateY(-2px);background:rgba(var(--acc-rgb),.1)}
.ls-tool.primary{background:var(--acc);color:#02130b;font-weight:700;border-color:var(--acc)}
.ls-tool.ghost{border-color:transparent;color:var(--muted)}
.ls-tool:disabled{opacity:.45;cursor:default}
.ls-badge{font-style:normal;margin-inline-start:4px;padding:0 6px;border-radius:99px;background:var(--warn);color:#201500;font-size:.7rem}
.ls-hints,.ls-diff{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.ls-diff select{padding:5px 8px;border-radius:9px;background:rgba(0,0,0,.45);border:1px solid var(--line2)}
.ls-msgs{flex:1;overflow-y:auto;padding:18px 22px 30px;contain:paint;scroll-behavior:smooth}
.ls-msgs>*{max-width:820px;margin-inline:auto}
.ls-msg{margin-bottom:18px;animation:msgIn .45s var(--ease) both}
.ls-msg.user{display:flex;justify-content:flex-end}
.ls-msg.user .bubble{max-width:80%;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.08));border:1px solid var(--line2);white-space:pre-wrap}
.ls-msg.assistant>.bubble{padding:12px 16px;border-radius:16px;background:rgba(var(--acc-rgb),.035);border:1px solid var(--line)}
.ls-welcome{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;border:1px dashed var(--line2);background:rgba(var(--acc-rgb),.03);animation:pop .5s var(--ease) both}
.ls-wicon{font-size:2rem;animation:heroFloat 4s ease-in-out infinite}
.ls-working{margin-bottom:14px}
.ls-composer{display:flex;align-items:flex-end;gap:8px;max-width:820px;width:calc(100% - 44px);margin:0 auto 16px;padding:8px;border-radius:20px;background:rgba(6,16,11,.94);border:1px solid var(--line2)}
.ls-composer textarea{flex:1;resize:none;border:0;outline:0;background:transparent;padding:9px 8px;max-height:160px;line-height:1.5}
.ls-composer .send.stop{background:var(--danger)}

/* quiz */
.quiz{border-radius:20px;border:1px solid var(--line2);background:linear-gradient(170deg,rgba(10,30,20,.9),rgba(4,12,8,.95));padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.qz-head{display:flex;align-items:center;gap:10px}
.qz-head b{flex:1;min-width:0}
.qz-count{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qz-dots{display:flex;gap:5px;margin:10px 0 14px}
.qz-dots i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.08);transition:background .3s,transform .3s var(--spring)}
.qz-dots i.cur{background:rgba(var(--acc-rgb),.5);transform:scaleY(1.5)}
.qz-dots i.ok{background:var(--acc)}
.qz-dots i.bad{background:var(--danger)}
.qz-card.in{animation:qzIn .45s var(--ease) both}
@keyframes qzIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.lessons-view[dir=rtl] .qz-card.in{animation-name:qzInR}
@keyframes qzInR{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.qz-type{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--acc3);padding:2px 8px;border-radius:99px;border:1px solid var(--line2);margin-bottom:8px}
.qz-q{font-size:1.05rem;font-weight:600;line-height:1.55;margin-bottom:12px}
.qz-opts{display:grid;gap:8px}
.qz-opts.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.q-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;text-align:start;border:1px solid var(--line2);background:rgba(0,0,0,.25);transition:border-color .2s,background .2s,transform .2s var(--spring);animation:slideIn .35s var(--ease) both}
.q-opt:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(var(--acc-rgb),.5)}
.q-opt.sel{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.q-opt.right{border-color:var(--acc);background:rgba(var(--acc-rgb),.18)}
.q-opt.wrongpick{border-color:var(--danger);background:rgba(255,91,122,.14)}
.q-opt:disabled{cursor:default}
.q-l{width:26px;height:26px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:rgba(var(--acc-rgb),.12);color:var(--acc3)}
.q-opt.right .q-l{background:var(--acc);color:#02130b}
.q-opt.wrongpick .q-l{background:var(--danger);color:#fff}
.qz-open{width:100%;padding:10px 12px;border-radius:13px;background:rgba(0,0,0,.4);border:1px solid var(--line2);outline:none;resize:vertical;line-height:1.5}
.qz-open:focus{border-color:var(--acc)}
.qz-hint{margin-top:10px;padding:9px 12px;border-radius:11px;background:rgba(255,209,102,.09);border:1px solid rgba(255,209,102,.3);font-size:.88rem;animation:fadeSwap .3s}
.qz-result{margin-top:12px;padding:12px 14px;border-radius:13px;display:grid;gap:6px;font-size:.9rem;line-height:1.55}
.qz-result.ok{background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.4)}
.qz-result.bad{background:rgba(255,91,122,.08);border:1px solid rgba(255,91,122,.4)}
.qz-result.pop{animation:pop .4s var(--spring)}
.qz-exp{color:var(--muted)}
.qz-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.qz-score{text-align:center;display:grid;justify-items:center;gap:8px}
.qz-score.in{animation:pop .5s var(--ease) both}
.qz-ring{position:relative;width:130px;height:130px}
.qz-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.qz-ring circle{fill:none;stroke-width:9;stroke:rgba(255,255,255,.08)}
.qz-ring .v{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease)}
.qz-pct{position:absolute;inset:0;display:grid;place-content:center;font-size:1.1rem}
.qz-pct b{font-size:2rem;line-height:1}.qz-pct small{color:var(--muted);font-size:.75rem}
.qz-review{width:100%;text-align:start;display:grid;gap:6px;margin-top:6px}
.qz-review h4{margin-bottom:4px}
.qr{display:flex;gap:10px;padding:9px 11px;border-radius:12px;border:1px solid var(--line);font-size:.86rem}
.qr.bad{border-color:rgba(255,91,122,.3)}
.qr-i{font-weight:800;color:var(--acc)}.qr.bad .qr-i{color:var(--danger)}
.qr-a{color:#ffb3c0;margin-top:3px}.qr-c{color:var(--acc3);margin-top:2px}
.qz-score .qz-foot{width:100%;justify-content:center}

/* flashcards */
.fc-box{border-radius:20px;border:1px solid var(--line2);padding:16px;background:rgba(4,12,8,.9);transition:opacity .18s,transform .18s}
.fc-box.next{opacity:0;transform:translateX(-20px)}
.fc-top{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.fc-bar{flex:1;height:4px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.fc-bar i{display:block;height:100%;background:var(--acc);transform-origin:left;transition:transform .4s}
.fc-scene{perspective:1000px}
.fc-card{position:relative;height:210px;transform-style:preserve-3d;transition:transform .6s var(--ease);cursor:pointer;outline:none}
.fc-card.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:grid;place-content:center;gap:10px;text-align:center;padding:18px;font-size:1.1rem;font-weight:600;border:1px solid var(--line2);background:radial-gradient(circle at 50% 0%,rgba(var(--acc-rgb),.16),rgba(4,14,9,.95) 70%)}
.fc-face small{font-size:.72rem;color:var(--muted);font-weight:400}
.fc-back{transform:rotateY(180deg);background:radial-gradient(circle at 50% 100%,rgba(60,224,255,.14),rgba(4,14,9,.95) 70%);font-weight:500;font-size:1rem}
.fc-card:focus-visible{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35);border-radius:16px}
.fc-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;animation:fadeSwap .3s}
.fc-grade button{padding:8px;border-radius:11px;font-size:.82rem;font-weight:700;border:1px solid var(--line2);transition:transform .2s var(--spring)}
.fc-grade button:hover{transform:translateY(-2px)}
.fc-grade .g0{color:#ff8fa3}.fc-grade .g1{color:var(--warn)}.fc-grade .g2{color:var(--acc)}.fc-grade .g3{color:#3ce0ff}
.fc-done{text-align:center;padding:24px;font-size:1.05rem}

/* summary + mind map */
.sm-box{border-radius:20px;border:1px solid var(--line2);padding:18px;background:rgba(4,12,8,.9)}
.sm-box h3{font-size:1.2rem;margin-bottom:6px}
.sm-box h4{margin:16px 0 8px;color:var(--acc3)}
.sm-intro{color:var(--muted);line-height:1.6;margin-bottom:12px}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sm-card{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--acc-rgb),.04);animation:pop .45s var(--ease) both}
.sm-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.sm-card ul{padding-inline-start:1.1em;display:grid;gap:3px;font-size:.88rem;line-height:1.5}
.sm-card li::marker{color:var(--acc)}
.mm{display:grid;justify-items:center;gap:12px}
.mm-center{padding:10px 18px;border-radius:99px;font-weight:800;background:var(--acc);color:#02130b;box-shadow:0 0 30px rgba(var(--acc-rgb),.35)}
.mm-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;width:100%}
.mm-branch{padding:10px;border-radius:14px;border:1px solid var(--line2);border-top:3px solid hsl(calc(150 + var(--i,0) * 40),80%,55%);animation:pop .45s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
.mm-node{font-weight:700;margin-bottom:6px}
.mm-kids{display:flex;flex-wrap:wrap;gap:5px}
.mm-kids span{font-size:.76rem;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.06)}
.sm-terms{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem}
.sm-terms dt{font-weight:700;color:var(--acc3)}.sm-terms dd{color:var(--muted)}

@media (max-width:820px){
  .ls-wrap{flex-direction:column}
  .ls-side{width:auto;flex-direction:row;align-items:center;padding:8px;border-inline-end:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden}
  .ls-brand,.ls-back{display:none}
  .ls-subjects{display:flex}
  .ls-subject{flex-shrink:0}
  .ls-nm small,.ls-prog{display:none}
  .ls-head{padding:10px 14px 4px}.ls-hstat{display:none}
  .ls-tools{padding:6px 14px 8px;overflow-x:auto;flex-wrap:nowrap}
  .ls-tool{flex-shrink:0}
  .ls-msgs{padding:12px 14px 20px}
  .ls-composer{width:calc(100% - 20px);margin-bottom:10px}
  .widget-card iframe{height:360px}
}

/* ================= Live call ================= */
.call-ov{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 20px 34px;color:#eafff5;opacity:0;transform:scale(1.03);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.call-ov.open{opacity:1;transform:none}
.call-ov.closing{opacity:0;transform:scale(.97)}
.co-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 45%,rgba(var(--acc-rgb),.18),transparent 55%),#020705}
.co-top{display:flex;align-items:center;gap:10px;width:100%;max-width:720px}
.co-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:blink 1.2s infinite}
.co-top b{flex:1}
.co-time{font-variant-numeric:tabular-nums;color:var(--muted)}
.co-lang{padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.5);border:1px solid var(--line2)}
.co-stage{flex:1;display:grid;place-items:center;width:100%}
.co-orb{--s:1;position:relative;width:min(46vw,240px);aspect-ratio:1;display:grid;place-items:center}
.co-orb .core{width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4ffe8,var(--acc) 40%,#00653f 85%);box-shadow:0 0 60px rgba(var(--acc-rgb),.55),inset 0 -10px 30px rgba(0,0,0,.35);transform:scale(var(--s));transition:transform .09s linear}
.co-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.45);opacity:0}
.co-orb[data-state=listening] i,.co-orb[data-state=speaking] i{animation:ring 2.4s var(--ease) infinite}
.co-orb .r2{animation-delay:.8s!important}.co-orb .r3{animation-delay:1.6s!important}
.co-orb[data-state=thinking] .core{animation:coThink 1.2s ease-in-out infinite}
@keyframes coThink{0%,100%{transform:scale(.9) rotate(0)}50%{transform:scale(1) rotate(180deg)}}
.co-orb[data-state=thinking] .core{background:conic-gradient(from 0deg,var(--acc),#3ce0ff,#c4ffe8,var(--acc))}
.co-orb[data-state=speaking] .core{background:radial-gradient(circle at 35% 30%,#e9fffb,#3ce0ff 40%,#00653f 85%)}
.co-orb[data-state=muted] .core{filter:grayscale(1);opacity:.5}
.co-orb[data-state=idle] .core{animation:heroFloat 3s ease-in-out infinite}
.co-status{font-size:1.05rem;font-weight:600;min-height:1.6em;text-align:center}
.co-caps{width:100%;max-width:640px;min-height:80px;display:grid;gap:8px;margin:12px 0 18px;text-align:center}
.co-caps>div{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;line-height:1.5}
.co-caps>div.has{opacity:1;transform:none}
.co-you{color:var(--muted);font-size:.92rem}
.co-ai{font-size:1.05rem}
.call-ov.nocaps .co-caps{visibility:hidden}
.co-ctrl{display:flex;gap:18px;align-items:center}
.co-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:800;transition:transform .2s var(--spring),background .2s}
.co-btn:hover{transform:scale(1.08)}
.co-btn svg{width:24px;height:24px;fill:currentColor}
.co-end{width:70px;height:70px;background:var(--danger);border-color:var(--danger)}
.co-mute.on{background:#fff;color:#111}
.co-cc.on{background:rgba(var(--acc-rgb),.2);border-color:var(--acc);color:var(--acc)}
.co-unsup{max-width:480px;text-align:center;padding:18px;border-radius:16px;border:1px solid rgba(255,91,122,.4);background:rgba(255,91,122,.08);line-height:1.6}

/* ================= Labs ================= */
.ms-ex{display:flex;flex-wrap:wrap;gap:6px}
.ms-out{display:grid;gap:12px}
.ms-ph{color:var(--muted)}
.ms-prob{padding:12px;border-radius:12px;background:rgba(var(--acc-rgb),.06);text-align:center;overflow-x:auto}
.ms-steps{display:grid;gap:8px;padding-inline-start:1.4em}
.ms-steps li{padding:8px 10px;border-radius:11px;border:1px solid var(--line);animation:slideIn .4s var(--ease) both}
.ms-steps li::marker{color:var(--acc);font-weight:800}
.ms-l{overflow-x:auto;margin-top:4px}
.ms-ans{padding:12px 14px;border-radius:13px;border:1px solid var(--acc);background:rgba(var(--acc-rgb),.1);font-weight:700;animation:pop .4s var(--spring)}
.ms-plot{width:100%;height:280px;border-radius:13px;border:1px solid var(--line2);background:#020906}
.tr-wrap{display:grid;gap:12px}
.tr-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tr-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tr-pane{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--line2);background:rgba(0,0,0,.35);min-height:190px}
.tr-pane textarea{flex:1;border:0;outline:0;resize:none;background:transparent;padding:12px;line-height:1.55}
.tr-out{flex:1;padding:12px;line-height:1.55;white-space:pre-wrap}
.tr-out.typing::after{content:"▍";color:var(--acc);animation:blink .8s steps(2) infinite}
.tr-pane.out{background:rgba(var(--acc-rgb),.05)}
.tr-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.tr-alt{display:grid;gap:6px}
.tr-a{display:grid;gap:2px;text-align:start;padding:9px 12px;border-radius:12px;border:1px solid var(--line);animation:slideIn .35s var(--ease) both}
.tr-a small{color:var(--muted)}
.tr-a:hover{border-color:var(--acc)}
.mm-stage{border-radius:16px;border:1px solid var(--line2);background:#020906;overflow:hidden}
.mm-stage svg{display:block;width:100%;height:auto}
.mm-l{fill:none;stroke-width:2.5;stroke-dasharray:var(--d,600);stroke-dashoffset:var(--d,600);animation:mmDraw .9s var(--ease) forwards}
@keyframes mmDraw{to{stroke-dashoffset:0}}
.mm-n{animation:pop .5s var(--spring) both;transform-box:fill-box;transform-origin:center}
.mm-n.mm-b{cursor:pointer}
.mm-n.mm-b:hover rect{stroke-width:3}
.dq-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:420px}
.dq-left,.dq-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.dq-name{font-size:.8rem;color:var(--muted)}
.dq-doc{flex:1;max-height:420px;overflow-y:auto;padding:12px;border-radius:13px;border:1px solid var(--line);background:rgba(0,0,0,.35);font-size:.84rem;line-height:1.6;white-space:pre-wrap}
.dq-doc mark{background:rgba(var(--acc-rgb),.3);color:#fff;border-radius:3px;padding:0 2px}
.dq-doc mark.flash{animation:dqFlash 1.2s}
@keyframes dqFlash{0%,100%{background:rgba(var(--acc-rgb),.3)}30%{background:rgba(var(--acc-rgb),.85)}}
.dq-chat{flex:1;max-height:420px;overflow-y:auto;display:grid;align-content:start;gap:10px}
.dq-q{justify-self:end;max-width:85%;padding:8px 12px;border-radius:13px;background:rgba(var(--acc-rgb),.14);border:1px solid var(--line2)}
.dq-a{padding:10px 12px;border-radius:13px;border:1px solid var(--line);animation:msgIn .4s var(--ease) both}
.dq-quotes{display:grid;gap:5px;margin-top:8px}
.dq-quote{text-align:start;font-size:.8rem;padding:6px 9px;border-radius:9px;border-inline-start:3px solid var(--acc);background:rgba(var(--acc-rgb),.06);color:var(--muted)}
.dq-quote:hover{color:#fff}
.dq-up{cursor:pointer}
.us-card{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line2);background:rgba(4,12,8,.9);animation:pop .45s var(--ease) both}
.us-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.us-head img{border-radius:5px}
.us-head a{color:var(--acc);font-weight:700;text-decoration:none}
.us-meta{margin-inline-start:auto;font-size:.78rem;color:var(--muted)}
.us-tldr{padding:12px 14px;border-radius:13px;background:rgba(var(--acc-rgb),.08);border-inline-start:3px solid var(--acc);line-height:1.6}
.us-points{display:grid;gap:5px;padding-inline-start:1.2em;line-height:1.55}
.us-points li::marker{color:var(--acc)}
.us-quotes{display:grid;gap:6px}
.us-quotes blockquote{padding:6px 12px;border-inline-start:3px solid var(--line2);color:var(--muted);font-style:italic}
.us-tags{display:flex;flex-wrap:wrap;gap:5px}
.us-tags span{font-size:.72rem;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--acc3)}
@media (max-width:820px){.tr-panes,.dq-wrap{grid-template-columns:1fr}}
.ls-ring text{text-anchor:middle;font-size:13px}
select.ls-diff{padding:6px 8px;border-radius:9px;background:rgba(0,0,0,.45);border:1px solid var(--line2);font-size:.78rem}
.ls-hicon{background:hsla(var(--h,150),70%,45%,.16)}
#prompt::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){#prompt{min-width:0}}
/* composer: mode chip gets its own row on phones (prevents a squeezed textarea) */
@media (max-width:640px){.composer{flex-wrap:wrap}.mode-chip{order:-1;flex:0 0 100%;justify-content:space-between;white-space:normal}}

/* ============================================================
   COMPACT LOW & SHORT TOPBAR + MUCH SMALLER LOKIBOT BUTTON + SIDEBAR CLOSE
   ============================================================ */
#closeSidebar {
  display: grid !important;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.85rem;
}
body.sb-collapsed #openSidebar {
  display: grid !important;
}
.topbar {
  padding: 4px 10px !important;
  min-height: 36px !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.topbar .icon-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
}
.topbar .model-btn,
.topbar .think-btn {
  padding: 4px 8px !important;
  height: 28px !important;
  font-size: 0.75rem !important;
  gap: 5px !important;
  border-radius: 9px !important;
  white-space: nowrap;
}
.topbar .rec-badge {
  font-size: 0.54rem !important;
  padding: 1px 4px !important;
  margin-left: 3px !important;
}
.topbar #thinkPicker {
  margin-inline-start: auto;
  margin-inline-end: 4px;
}
.lokibot-nav-btn,
.lokibot-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px !important;
  height: 26px !important;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.7rem !important;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 55%, #0ea5e9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.35);
  transition: transform 0.2s var(--spring), box-shadow 0.2s;
  white-space: nowrap;
}
.lokibot-nav-btn:hover,
.lokibot-top-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45);
}
.lokibot-nav-btn .lb-nav-ico {
  display: inline-flex;
  align-items: center;
}
.lokibot-nav-btn .lb-nav-ico svg {
  width: 13px !important;
  height: 13px !important;
  display: block;
}
.lokibot-nav-btn .lb-nav-pill {
  font-size: 0.55rem !important;
  font-weight: 800;
  padding: 1px 4px !important;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.28);
  color: #e0f2fe;
}
.lokibot-top-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
}
@media (max-width: 640px) {
  .topbar .rec-badge {
    display: none !important;
  }
  .topbar .model-btn,
  .topbar .think-btn {
    padding: 3px 6px !important;
    font-size: 0.7rem !important;
    height: 26px !important;
  }
  .lokibot-nav-btn .lb-nav-pill {
    display: none;
  }
}

/* ============================================================
   SLASH COMMANDS AUTOCOMPLETE MENU (/mini mind, /deep research, etc.)
   ============================================================ */
.composer-wrap {
  position: relative;
}
.slash-menu {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 10px);
  max-width: 540px;
  margin: 0 auto;
  background: rgba(13, 10, 26, 0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(168, 85, 247, 0.22);
  z-index: 120;
  overflow: hidden;
  animation: pop 0.2s var(--ease);
}
.slash-menu-head {
  padding: 9px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(168, 85, 247, 0.08);
  letter-spacing: 0.02em;
}
.slash-menu-list {
  max-height: 250px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  gap: 4px;
}
.slash-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.slash-opt:hover,
.slash-opt.active {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.24), rgba(56, 189, 248, 0.15));
  border: 1px solid rgba(168, 85, 247, 0.38);
}
.slash-opt-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.slash-opt-body {
  flex: 1;
  min-width: 0;
}
.slash-opt-cmd {
  font-weight: 800;
  font-size: 0.88rem;
  color: #f3e8ff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.slash-opt-title {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}
.slash-opt-desc {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   REBUILT LOKICODE 4.0 STARK EXTRA HIGH (INFINITE SCROLL + WORKING BAR + VERIFY)
   ============================================================ */
#codeView.code-view {
  display: none;
  flex-direction: column;
  height: 100% !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 20px clamp(14px, 3vw, 36px) 220px !important;
  gap: 18px !important;
}
#codeView.code-view.active {
  display: flex;
}
.lc-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0 !important;
}
.lc-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.14), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  flex-shrink: 0 !important;
}
.lc-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lc-hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 1.15rem;
  color: #022c22;
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}
.lc-hero-title {
  font-size: 1.22rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.lc-stark-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #059669, #0ea5e9);
  color: #fff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lc-hero-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}
#codeView.code-view > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}
.lc-langs-wrap {
  flex-shrink: 0 !important;
}
.lc-prompt-card,
#lcForm.lc-prompt-card {
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.96), rgba(2, 44, 34, 0.98)) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 16px 44px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(110, 231, 183, 0.35) !important;
}
.lc-prompt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.lc-prompt-lbl {
  font-weight: 800;
  font-size: 0.95rem;
  color: #a7f3d0;
  letter-spacing: 0.01em;
}
#lcPrompt,
.lc-prompt-card textarea,
.lc-input-row textarea {
  flex: 1;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 104px;
  padding: 15px 18px;
  border-radius: 16px;
  border: 2px solid #34d399 !important;
  background: rgba(4, 57, 39, 0.95) !important;
  color: #ecfdf5 !important;
  font-size: 1rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.35), 0 0 20px rgba(16, 185, 129, 0.24);
}
#lcPrompt::placeholder,
.lc-prompt-card textarea::placeholder,
.lc-input-row textarea::placeholder {
  color: rgba(167, 243, 208, 0.72) !important;
}
#lcPrompt:focus,
.lc-prompt-card textarea:focus,
.lc-input-row textarea:focus {
  border-color: #6ee7b7 !important;
  background: rgba(6, 72, 48, 0.98) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.34), 0 0 28px rgba(16, 185, 129, 0.42);
}
.lc-prompt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.lc-prompt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: #d1fae5;
}
.lc-realtime-hint {
  color: #6ee7b7;
  font-weight: 700;
}
.lc-langs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lc-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.83rem;
  font-weight: 700;
  background: rgba(2, 24, 15, 0.65);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #d1fae5;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.lc-lang-pill:hover {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.22);
  transform: translateY(-1px);
}
.lc-lang-pill.active {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #6ee7b7;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  color: #022c22;
}
.lc-lang-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.lc-input-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.lc-send-btn,
#lcGo.lc-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 0.96rem;
  color: #022c22 !important;
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  border: 1px solid #a7f3d0 !important;
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.48);
  cursor: pointer;
  transition: transform 0.18s var(--spring), opacity 0.2s;
}
.lc-send-btn:hover,
#lcGo.lc-go:hover {
  transform: translateY(-1px) scale(1.02);
}
.lc-send-btn.busy {
  opacity: 0.75;
  pointer-events: none;
}
.lc-quick-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.lc-qi-label {
  font-size: 0.76rem;
  color: #a7f3d0;
  font-weight: 700;
}
.lc-idea,
.lc-quick-ideas button {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(2, 28, 18, 0.75);
  border: 1px solid rgba(52, 211, 153, 0.38);
  color: #d1fae5;
  cursor: pointer;
  transition: all 0.15s;
}
.lc-idea:hover,
.lc-quick-ideas button:hover {
  color: #022c22;
  border-color: #6ee7b7;
  background: #34d399;
}

/* Space between Prompt Box and Code Page: Animated Working Indicator */
.lc-mid-space {
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: fit-content !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 !important;
}
.lc-work-box[hidden],
.lc-work-drawer[hidden],
.lc-verify-banner[hidden],
.lc-word-audit[hidden],
.lc-verified-pill[hidden] {
  display: none !important;
}
.lc-work-box {
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 58px !important;
  overflow: visible !important;
  border-radius: 18px;
  border: 2px solid rgba(168, 85, 247, 0.65);
  background: linear-gradient(90deg, rgba(28, 18, 56, 0.98), rgba(16, 29, 54, 0.98));
  box-shadow: 0 10px 32px rgba(139, 92, 246, 0.32);
  animation: pop 0.25s var(--ease);
}
.lc-work-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  min-height: 56px !important;
  height: auto !important;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap !important;
}
.lc-work-orb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #ec4899, #0ea5e9, #10b981, #8b5cf6);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.55);
}
.lc-work-box.is-live .lc-work-orb,
.lc-work-orb.spinning {
  animation: coThink 1s linear infinite;
}
.lc-work-box.is-done .lc-work-orb,
.lc-work-orb.done {
  background: #10b981;
  box-shadow: 0 0 14px #10b981;
  animation: none;
}
.lc-work-info {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 180px;
}
.lc-work-status {
  font-weight: 800;
  font-size: 0.92rem;
  color: #f3e8ff;
  flex-shrink: 0;
}
.lc-work-timer {
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(168, 85, 247, 0.3);
  color: #f3e8ff;
  border: 1px solid rgba(192, 132, 252, 0.6);
  flex-shrink: 0;
}
.lc-work-cur {
  font-size: 0.86rem;
  font-weight: 600;
  color: #e2e8f0;
  flex: 1 1 180px;
  line-height: 1.4;
}
.lc-word-audit {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
  flex-shrink: 0;
}
.lc-work-arrow {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid rgba(192, 132, 252, 0.45);
  color: #fff;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s, background 0.2s;
}
.lc-work-box.open .lc-work-arrow,
.lc-work-arrow.open {
  transform: rotate(180deg);
  background: rgba(168, 85, 247, 0.45);
}
.lc-work-drawer {
  padding: 16px 18px;
  border-top: 1px solid rgba(192, 132, 252, 0.25);
  background: rgba(10, 8, 24, 0.94);
  border-radius: 0 0 16px 16px;
  height: auto !important;
  overflow: visible !important;
}
.lc-work-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.lc-work-col {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lc-work-col h4 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d8b4fe;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lc-work-col .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.lc-work-col .dot.done { background: #10b981; box-shadow: 0 0 8px #10b981; }
.lc-work-col .dot.active { background: #a855f7; box-shadow: 0 0 8px #a855f7; }
.lc-work-col .dot.info { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
#lcFinishedList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: #d1fae5;
}
#lcFinishedList li {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}
#lcFinishedList .t-check {
  color: #34d399;
  font-weight: 900;
}
#lcFinishedList .t-time {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
.lc-cur-box,
.lc-audit-summary {
  font-size: 0.84rem;
  color: #f1f5f9;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

/* Verification Result Banner */
.lc-verify-banner {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 700;
  animation: pop 0.25s var(--ease);
}
.lc-verify-banner.ok {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #a7f3d0;
}
.lc-verify-banner.fixed {
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #bae6fd;
}

/* Code Page Panel — Stretches infinitely with code length */
.lc-code-panel,
.lc-panel {
  flex-shrink: 0 !important;
  border-radius: 20px;
  border: 1px solid var(--line2);
  background: #070510;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.lc-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px 20px 0 0;
}
.lc-code-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lc-dots {
  display: inline-flex;
  gap: 6px;
}
.lc-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.lc-dots i:nth-child(1) { background: #ef4444; }
.lc-dots i:nth-child(2) { background: #f59e0b; }
.lc-dots i:nth-child(3) { background: #10b981; }
.lc-meta-pill {
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.lc-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.lc-btn {
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
}
.lc-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.lc-btn-verify {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(14, 165, 233, 0.25));
  border-color: rgba(16, 185, 129, 0.55);
  color: #a7f3d0;
}
.lc-btn-copy {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(236, 72, 153, 0.24));
  border-color: rgba(168, 85, 247, 0.5);
  color: #f3e8ff;
}
.lc-code-body {
  display: grid;
  grid-template-columns: auto 1fr;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible !important;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.65;
}
.lc-lines {
  padding: 0 14px;
  text-align: right;
  color: rgba(255, 255, 255, 0.28);
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.lc-lines span {
  display: block;
}
.lc-pre {
  margin: 0;
  padding: 0 18px;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  white-space: pre;
}

@media (max-width: 720px) {
  .lc-input-row {
    flex-direction: column;
  }
  .lc-send-btn {
    padding: 12px;
  }
  .lc-code-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- LokiCode Mode Switcher (New Code vs Edit Existing Code) ---------- */
.lc-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.lc-mode-tabs {
  display: inline-flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lc-mode-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: left;
}
.lc-mode-tab b {
  font-size: 0.88rem;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lc-mode-tab small {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 2px;
}
.lc-mode-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.lc-mode-tab.on {
  background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.22), rgba(168, 85, 247, 0.24));
  border-color: rgba(var(--acc-rgb), 0.55);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.lc-mode-tab.on b {
  color: var(--acc);
}
.lc-mode-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lc-mode-badge {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(var(--acc-rgb), 0.15);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.35);
}
.lc-mode-hint {
  font-size: 0.76rem;
  color: var(--dim);
}

/* ---------- Metrics Bar ---------- */
.lc-metrics-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  font-family: var(--mono);
}
.lc-metrics-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lc-metric {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lc-active-item {
  color: var(--acc);
  font-weight: 600;
  font-size: 0.8rem;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons in LokiCode panel */
.lc-btn-save {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(5, 150, 105, 0.35)) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
  color: #a7f3d0 !important;
  font-weight: 700 !important;
}
.lc-btn-save:hover {
  background: rgba(16, 185, 129, 0.45) !important;
  color: #fff !important;
}
.lc-btn-history {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25)) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #e9d5ff !important;
  font-weight: 700 !important;
}
.lc-btn-history .badge {
  background: #a855f7;
  color: #fff;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
}
.lc-btn-subtle {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
.lc-btn-subtle:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ---------- History Modal Styling ---------- */
.lc-hist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  margin-bottom: 14px;
}
.lc-hist-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
}
.lc-hist-list {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
}
.lc-hist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: all 0.2s;
}
.lc-hist-card:hover {
  border-color: rgba(var(--acc-rgb), 0.4);
  background: rgba(255, 255, 255, 0.07);
}
.lc-hist-card.active {
  border-color: var(--acc);
  background: rgba(var(--acc-rgb), 0.08);
}
.lc-hist-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.lc-hist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lc-hist-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-hist-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.lc-hist-meta {
  font-size: 0.76rem;
  color: var(--dim);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lc-hist-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.lc-hist-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  transition: 0.15s;
}
.lc-hist-btn.load {
  background: var(--acc);
  color: #02130b;
  border-color: var(--acc);
  font-weight: 800;
}
.lc-hist-btn.load:hover {
  background: #5dffbf;
}
.lc-hist-btn.del {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}
.lc-hist-btn.del:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ---------- Starter Templates Modal ---------- */
.lc-tpl-subtitle {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.lc-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
}
.lc-tpl-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: 0.2s;
  cursor: pointer;
}
.lc-tpl-card:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
}
.lc-tpl-card h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lc-tpl-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  flex: 1;
}

/* ---------- Interactive Runner & Stdin Console ---------- */
.lc-runner-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lc-runner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  border: 1px solid var(--line2);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.lc-runner-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.lc-runner-status-pill {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.4);
}
.lc-runner-status-pill.running {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.4);
}
.lc-runner-status-pill.err {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}
.lc-terminal {
  background: #020705;
  border-radius: 12px;
  border: 1px solid var(--line2);
  padding: 14px 16px;
  min-height: 180px;
  max-height: 380px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: #e2e8f0;
}
.lc-terminal .meta { color: #94a3b8; }
.lc-terminal .ok { color: #34d399; font-weight: 700; }
.lc-terminal .warn { color: #fbbf24; }
.lc-terminal .err { color: #f87171; }
.lc-terminal .stdin-echo { color: #38bdf8; font-weight: 700; }

.lc-stdin-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
}
.lc-stdin-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lc-stdin-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 9px 12px;
  color: #7dd3fc;
  font-family: var(--mono);
  font-size: 0.86rem;
  outline: none;
}
.lc-stdin-row input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.lc-stdin-send {
  padding: 9px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  font-size: 0.84rem;
  white-space: nowrap;
}
.lc-stdin-send:hover {
  background: #38bdf8;
}
.lc-stdin-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--muted);
}
.lc-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 8px;
  color: #cbd5e1;
  font-family: var(--mono);
  cursor: pointer;
}
.lc-chip:hover {
  background: rgba(var(--acc-rgb), 0.2);
  color: var(--acc);
}


/* ============================================================
   LOKIBOT 3.0 — CURSOR + GROK 4.7 AUTONOMOUS STUDIO (BUILT FROM SCRATCH)
   ============================================================ */
#lokibotView.lokibot-view {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  background: #060913;
  color: #f1f5f9;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
}
#lokibotView.lokibot-view.active {
  display: flex !important;
  flex-direction: column !important;
}

.lbg-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: radial-gradient(circle at 15% 0%, rgba(16, 185, 129, 0.08), transparent 40%),
              radial-gradient(circle at 85% 0%, rgba(14, 165, 233, 0.08), transparent 40%),
              #060913;
  color: #f1f5f9;
  position: relative;
  overflow: hidden;
}

.lbg-mob-scrim {
  display: none;
}

/* Top Command Bar */
.lbg-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  min-height: 54px;
  background: rgba(10, 15, 29, 0.94);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(12px);
  z-index: 30;
}

.lbg-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lbg-mob-menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font-size: 1rem;
  cursor: pointer;
}

.lbg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.lbg-back-btn:hover {
  background: rgba(51, 65, 85, 0.85);
  color: #ffffff;
  border-color: rgba(16, 185, 129, 0.45);
}

.lbg-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lbg-brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #04130d;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}
.lbg-brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}
.lbg-brand-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.lbg-brand-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: #34d399;
}

.lbg-api-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.32);
  font-size: 0.7rem;
  font-weight: 700;
  color: #a7f3d0;
  white-space: nowrap;
  flex-shrink: 0;
}
.lbg-api-pill code {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.65rem;
  color: #34d399;
  background: rgba(6, 9, 19, 0.65);
  padding: 1px 5px;
  border-radius: 4px;
}
.lbg-api-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

/* Workspace Mode Tabs */
.lbg-mode-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
  flex-shrink: 0;
}
.lbg-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.lbg-mode-tab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}
.lbg-mode-tab.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(14, 165, 233, 0.22));
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.45);
}

.lbg-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lbg-swarm-btn {
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.lbg-swarm-btn:hover {
  background: rgba(245, 158, 11, 0.22);
}
.lbg-swarm-btn.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
}
.lbg-new-bot-btn {
  padding: 6px 13px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #04130d;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  transition: transform 0.15s ease;
  white-space: nowrap;
}
.lbg-new-bot-btn:hover {
  transform: translateY(-1px);
}

/* Main 3-Zone Body */
.lbg-body {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 295px;
  overflow: hidden;
  position: relative;
}

/* Left Sidebar */
.lbg-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: rgba(11, 17, 32, 0.92);
  border-inline-end: 1px solid rgba(148, 163, 184, 0.14);
  overflow: hidden;
}
.lbg-sb-head {
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.lbg-sb-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lbg-sb-heading {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.lbg-sb-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.lbg-sb-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-sb-icon-btn:hover {
  border-color: #10b981;
  color: #34d399;
}
.lbg-search-box input {
  width: 100%;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(6, 9, 19, 0.75);
  color: #f1f5f9;
  font-size: 0.78rem;
  outline: none;
}
.lbg-search-box input:focus {
  border-color: #10b981;
}

.lbg-sb-list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbg-list-sec-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  padding: 8px 6px 4px;
}
.lbg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.lbg-item:hover {
  background: rgba(30, 41, 59, 0.55);
}
.lbg-item.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(14, 165, 233, 0.12));
  border-color: rgba(16, 185, 129, 0.4);
}
.lbg-item-ava {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.lbg-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0b1120;
}
.lbg-item-body {
  flex: 1;
  min-width: 0;
}
.lbg-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lbg-item-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lbg-tag-swarm,
.lbg-tag-grok {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.lbg-tag-swarm {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.lbg-tag-grok {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.lbg-item-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.lbg-item-edit {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  font-size: 0.74rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lbg-item-edit:hover {
  border-color: #10b981;
  transform: scale(1.06);
}

/* Group Cluster Avatar */
.lb-group-cluster {
  position: relative;
  display: inline-block;
}
.lb-cluster-item {
  position: absolute;
}
.lb-ci-0 { top: 0; left: 18%; z-index: 3; }
.lb-ci-1 { bottom: 0; left: 0; z-index: 2; }
.lb-ci-2 { bottom: 0; right: 0; z-index: 1; }

.lbg-sb-foot {
  padding: 10px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.lbg-engine-card {
  padding: 9px 11px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.lbg-ec-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ecfdf5;
}
.lbg-ec-status {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
}
.lbg-ec-sub {
  font-size: 0.66rem;
  color: #94a3b8;
  margin-top: 3px;
}

/* Center Workspace Stage */
.lbg-stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #070b15;
  overflow: hidden;
}

/* Active Agent Subbar */
.lbg-agent-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(13, 19, 35, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lbg-subbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.lbg-subbar-ava {
  cursor: pointer;
  flex-shrink: 0;
}
.lbg-subbar-info {
  min-width: 0;
}
.lbg-subbar-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lbg-subbar-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
}
.lbg-subbar-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}
.lbg-subbar-spec {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.lbg-subbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.lbg-reasoning-select {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 0.73rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}
.lbg-chip-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.lbg-chip-btn:hover {
  border-color: #10b981;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}

/* Panes */
.lbg-pane {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lbg-pane[hidden] {
  display: none !important;
}

/* Mode 1: Chat Messages & Composer */
.lbg-messages {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 18px clamp(16px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lbg-starter-card,
.lbg-empty-state {
  margin: auto;
  max-width: 580px;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.16);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lbg-starter-card h3,
.lbg-empty-state h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.lbg-starter-card p,
.lbg-empty-state p {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
}

.lbg-quick-prompts-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 6px;
}
.lbg-prompt-pill {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lbg-prompt-pill:hover {
  border-color: #10b981;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}

.lbg-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}
.lbg-msg-user {
  align-items: flex-end;
}
.lbg-msg-meta-user {
  display: flex;
  gap: 5px;
  font-size: 0.7rem;
  color: #64748b;
}
.lbg-user-bubble {
  background: linear-gradient(135deg, #059669, #0284c7);
  color: #ffffff;
  padding: 11px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 85%;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.22);
}

.lbg-msg-bot {
  align-items: flex-start;
}
.lbg-bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lbg-bot-ava {
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lbg-bot-name {
  font-weight: 800;
  font-size: 0.84rem;
  color: #f8fafc;
  cursor: pointer;
}
.lbg-bot-engine-tag {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.lbg-bot-latency {
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  color: #38bdf8;
}
.lbg-bot-time {
  font-size: 0.68rem;
  color: #64748b;
}

.lbg-think-trace {
  width: 100%;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.15);
  padding: 5px 10px;
  font-size: 0.73rem;
  color: #94a3b8;
}
.lbg-think-trace summary {
  cursor: pointer;
  font-weight: 700;
  color: #34d399;
}
.lbg-think-trace ul {
  margin: 6px 0 2px;
  padding-inline-start: 18px;
  display: grid;
  gap: 3px;
}

.lbg-bot-bubble {
  width: 100%;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
  padding: 14px 18px;
  border-radius: 6px 16px 16px 16px;
  font-size: 0.9rem;
  line-height: 1.62;
}
.lb-mention-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
  font-weight: 800;
}

/* Code Card in Chat */
.lbg-code-card {
  margin: 10px 0;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #050811;
}
.lbg-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(30, 41, 59, 0.75);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.lbg-code-lang {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  font-weight: 800;
  color: #34d399;
}
.lbg-code-acts {
  display: flex;
  gap: 6px;
}
.lbg-code-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-code-composer-btn {
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}
.lb-code-block {
  margin: 0;
  padding: 12px;
  background: #050811;
  color: #e2e8f0;
  font-family: var(--mono, monospace);
  font-size: 0.79rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* Bottom Composer Area */
.lbg-composer-wrap {
  flex: 0 0 auto;
  padding: 10px clamp(14px, 3vw, 36px) calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 15, 29, 0.95);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  position: relative;
  z-index: 20;
}

.lb-typing-indicator {
  max-width: 780px;
  margin: 0 auto 8px;
  padding: 5px 14px 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  width: fit-content;
}
.lb-typing-indicator[hidden] {
  display: none !important;
}
.lb-typing-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lb-typing-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.lb-typing-bot-name {
  font-weight: 800;
  color: #34d399;
}
.lb-typing-label {
  color: #cbd5e1;
}
.lb-typing-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 12px;
}
.lb-typing-wave i {
  width: 3px;
  height: 6px;
  border-radius: 99px;
  background: #10b981;
  display: inline-block;
  animation: lbWaveBar 1s ease-in-out infinite;
}
.lb-typing-wave i:nth-child(2) { animation-delay: 0.15s; }
.lb-typing-wave i:nth-child(3) { animation-delay: 0.3s; }
.lb-typing-wave i:nth-child(4) { animation-delay: 0.45s; }
@keyframes lbWaveBar {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 12px; opacity: 1; }
}
.lb-typing-cycle-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
}

.lbg-composer {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.24);
}
.lbg-composer:focus-within {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.lbg-comp-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lbg-comp-btn:hover {
  border-color: #10b981;
  color: #34d399;
}
.lbg-chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #f8fafc;
  font-size: 0.88rem;
  padding: 6px 4px;
}
.lbg-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #04130d;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.lb-mention-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 60;
  max-height: 220px;
  overflow-y: auto;
}
.lb-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.lb-mention-item:hover,
.lb-mention-item.active {
  background: rgba(16, 185, 129, 0.16);
}
.lb-everyone-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #10b981;
  color: #04130d;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.lb-mention-name {
  font-weight: 800;
  font-size: 0.82rem;
  color: #f8fafc;
}
.lb-mention-desc {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Mode 2: Cursor Composer Multi-File IDE */
.lbg-composer-ide {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #060913;
}
.lbg-ide-promptbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  flex-wrap: wrap;
}
.lbg-ide-prompt-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lbg-ide-badge {
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #34d399;
  font-size: 0.74rem;
  font-weight: 800;
}
.lbg-ide-agent-tag {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 600;
}
.lbg-ide-form {
  flex: 1;
  min-width: 260px;
  display: flex;
  gap: 8px;
}
.lbg-ide-input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #050811;
  color: #f8fafc;
  font-size: 0.8rem;
  outline: none;
}
.lbg-ide-input:focus {
  border-color: #10b981;
}
.lbg-ide-gen-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #04130d;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lbg-ide-grid {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  grid-template-columns: 195px minmax(0, 1.35fr) minmax(240px, 0.9fr);
  overflow: hidden;
}
.lbg-ide-files {
  background: rgba(11, 17, 32, 0.95);
  border-inline-end: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lbg-ide-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.66rem;
  font-weight: 800;
  color: #94a3b8;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lbg-ide-add-file {
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-ide-file-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lbg-ide-file-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
}
.lbg-ide-file-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #ffffff;
}
.lbg-ide-fname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbg-ide-file-btn small {
  font-size: 0.64rem;
  color: #64748b;
}

.lbg-ide-editor-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-inline-end: 1px solid rgba(148, 163, 184, 0.14);
}
.lbg-ide-editor-bar,
.lbg-ide-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.75rem;
}
.lbg-ide-editor-actions {
  display: flex;
  gap: 6px;
}
.lbg-ide-act-btn {
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-ide-run-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: none;
  background: #10b981;
  color: #04130d;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.lbg-ide-textarea {
  flex: 1;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 14px;
  background: #040710;
  color: #e2e8f0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.8rem;
  line-height: 1.55;
}

.lbg-ide-console-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #050811;
}
.lbg-ide-status {
  font-size: 0.68rem;
  color: #34d399;
  font-family: var(--mono, monospace);
}
.lbg-ide-console-out {
  flex: 1;
  margin: 0;
  padding: 12px;
  overflow-y: auto;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.76rem;
  line-height: 1.5;
  color: #a7f3d0;
  white-space: pre-wrap;
}

/* Right Inspector Sidebar */
.lbg-inspector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(11, 17, 32, 0.92);
  border-inline-start: 1px solid rgba(148, 163, 184, 0.14);
  overflow-y: auto;
}
.lbg-insp-card,
.lbg-insp-section {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.lbg-insp-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.lbg-insp-ava {
  cursor: pointer;
}
.lbg-insp-name {
  font-size: 0.94rem;
  font-weight: 800;
  color: #ffffff;
}
.lbg-insp-role {
  font-size: 0.73rem;
  color: #94a3b8;
  line-height: 1.4;
}
.lbg-insp-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.lbg-insp-btn {
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.75);
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-insp-btn:hover {
  border-color: #10b981;
  color: #34d399;
}
.lbg-insp-del:hover {
  border-color: #ef4444;
  color: #f87171;
}

.lbg-insp-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lbg-insp-sec-title {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 8px;
}
.lbg-insp-sec-head .lbg-insp-sec-title {
  margin-bottom: 0;
}
.lbg-link-btn {
  border: none;
  background: transparent;
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.lbg-telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lbg-tel-item {
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(6, 9, 19, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lbg-tel-item span {
  font-size: 0.64rem;
  color: #64748b;
}
.lbg-tel-item b,
.lbg-tel-item code {
  font-size: 0.72rem;
  color: #e2e8f0;
  font-family: var(--mono, monospace);
}

.lbg-swarm-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lbg-swarm-mem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(6, 9, 19, 0.65);
}
.lbg-sm-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lbg-sm-txt b {
  font-size: 0.75rem;
  color: #f8fafc;
}
.lbg-sm-txt small {
  font-size: 0.66rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lbg-sm-edit {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
}

/* ============================================================
   LIVE VIRTUAL LINUX COMPUTER (UBUNTU 24.04 + CHROME + LIVE MOUSE & TYPING)
   ============================================================ */
.lb-msg-computer-wrap {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #0f172a;
  color: #f8fafc;
}
.lb-msg-comp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  background: #1e293b;
  color: #e2e8f0;
}
.lb-comp-live-pill {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.lb-linux-vm {
  background: #1e1b2e;
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #334155;
  font-family: var(--sans);
}
.lb-linux-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  background: #090d16;
  font-size: 0.66rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
}
.lb-linux-activities,
.lb-linux-clock {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-linux-screen {
  position: relative;
  min-height: 215px;
  background: linear-gradient(135deg, #2e1065 0%, #1e1b4b 50%, #0f172a 100%);
  padding: 8px 8px 8px 40px;
  overflow: hidden;
}
.lb-linux-dock {
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 8px;
}
.lb-dock-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.08);
}
.lb-dock-icon.active {
  background: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}
.lb-linux-window {
  background: #ffffff;
  color: #111827;
  border-radius: 8px;
  overflow: hidden;
  min-height: 195px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.lb-chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #e2e8f0;
  font-size: 0.68rem;
}
.lb-chrome-dots {
  display: flex;
  gap: 4px;
}
.lb-chrome-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.lb-chrome-dots i:nth-child(1) { background: #ef4444; }
.lb-chrome-dots i:nth-child(2) { background: #f59e0b; }
.lb-chrome-dots i:nth-child(3) { background: #10b981; }
.lb-chrome-tab {
  background: #ffffff;
  padding: 2px 10px;
  border-radius: 6px 6px 0 0;
  font-weight: 700;
  color: #1e293b;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-chrome-addr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.lb-chrome-url {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.68rem;
  background: #fff;
  color: #334155;
}
.lb-chrome-viewport {
  padding: 10px;
}
.lb-google-logo {
  text-align: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.lb-google-searchbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid #cbd5e1;
  font-size: 0.74rem;
  color: #111827;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.lb-typing-caret {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: #2563eb;
  animation: blink 0.8s infinite;
}
.lb-google-results {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.lb-g-res {
  padding: 5px 7px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.lb-g-url {
  font-size: 0.62rem;
  color: #059669;
}
.lb-g-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #1d4ed8;
}
.lb-g-snip {
  font-size: 0.66rem;
  color: #475569;
}
.lb-term-bar {
  padding: 5px 10px;
  background: #1e293b;
  color: #e2e8f0;
  font-family: var(--mono);
  font-size: 0.68rem;
}
.lb-term-body {
  padding: 10px;
  background: #090d16;
  color: #34d399;
  font-family: var(--mono);
  font-size: 0.7rem;
  min-height: 165px;
  display: grid;
  align-content: start;
  gap: 4px;
}
.lb-linux-cursor {
  position: absolute;
  z-index: 25;
  pointer-events: none;
  transition: left 0.26s cubic-bezier(0.22, 1, 0.36, 1), top 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lb-cursor-click-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ec4899;
  opacity: 0;
}
.lb-linux-cursor.clicking .lb-cursor-click-ring {
  animation: ring 0.5s ease-out;
}
.lb-comp-badge-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}
.lb-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.lb-comp-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.lb-comp-act {
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  cursor: pointer;
}

/* ============================================================
   MODE 3: FULL-SCREEN UBUNTU 24.04 LINUX WORKSPACE
   ============================================================ */
.lbg-linux-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 14px 18px;
  gap: 12px;
  background: #060913;
}
.lbg-linux-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
  flex-wrap: wrap;
}
.lbg-linux-tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.lbg-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.lbg-linux-tb-sub {
  font-size: 0.74rem;
  color: #94a3b8;
}
.lbg-linux-tb-actions {
  display: flex;
  gap: 8px;
}
.lbg-linux-stage {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lbg-linux-stage .lb-linux-vm {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lbg-linux-stage .lb-linux-screen {
  flex: 1;
  min-height: 360px;
}
.lbg-linux-stage .lb-linux-window {
  min-height: 330px;
}

/* ============================================================
   MODE 4: BOT & AVATAR STUDIO (BUILT FROM SCRATCH)
   ============================================================ */
.lbg-studio-wrap {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 20px clamp(16px, 3vw, 36px);
}
.lbg-studio-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.lbg-studio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  flex-wrap: wrap;
}
.lbg-studio-header h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}
.lbg-studio-header p {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}
.lbg-studio-head-btns {
  display: flex;
  gap: 8px;
}

.lbg-studio-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
}
.lbg-studio-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(6, 9, 19, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.lbg-studio-ava-stage {
  width: 148px;
  height: 148px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: grid;
  place-items: center;
}
.lbg-random-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}
.lbg-equipped-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.lbg-equipped-pills span {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.85);
  color: #cbd5e1;
}

.lbg-studio-form-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lbg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lbg-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lbg-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
}
.lbg-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #050811;
  color: #f8fafc;
  font-size: 0.82rem;
  outline: none;
  font-family: inherit;
}
.lbg-input:focus {
  border-color: #10b981;
}
.lbg-textarea {
  resize: vertical;
  min-height: 54px;
}
.lbg-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}
.lbg-preset-chip {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-preset-chip:hover {
  border-color: #10b981;
  color: #34d399;
}

.lbg-ava-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 10px;
  background: #050811;
  border: 1px solid rgba(148, 163, 184, 0.14);
  overflow-x: auto;
}
.lbg-ava-tab {
  flex: 1;
  padding: 6px 9px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.lbg-ava-tab.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.lbg-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  max-height: 205px;
  overflow-y: auto;
  padding: 4px 2px;
}
.lbg-pick-card {
  padding: 7px 5px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(6, 9, 19, 0.75);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
}
.lbg-pick-card.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.14);
  color: #ffffff;
}
.lbg-color-swatches {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
.lbg-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.lbg-color-swatch.active {
  outline: 3px solid #10b981;
  outline-offset: 2px;
}

.lbg-studio-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.lbg-cancel-btn {
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(30, 41, 59, 0.75);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.lbg-save-bot-btn,
.lbg-primary-cta {
  padding: 8px 18px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #04130d;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

/* ============================================================
   GROUP SWARM MODAL (DARK MODE)
   ============================================================ */
.lb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(6px);
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 16px;
}
.lb-modal-backdrop[hidden] {
  display: none !important;
}
.lb-modal {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: 20px;
}
.lb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lb-modal-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}
.lb-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  cursor: pointer;
}
.lb-cg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-available-bots {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.lb-avail-bot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(6, 9, 19, 0.65);
  cursor: pointer;
}
.lb-avail-bot.added {
  background: rgba(16, 185, 129, 0.14);
  border-color: #10b981;
}
.lb-avail-info {
  flex: 1;
  min-width: 0;
}
.lb-avail-name {
  font-weight: 800;
  font-size: 0.84rem;
  color: #f8fafc;
}
.lb-avail-spec {
  font-size: 0.72rem;
  color: #94a3b8;
}
.lb-avail-status {
  font-size: 0.74rem;
  font-weight: 800;
  color: #34d399;
}
.lb-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1120px) {
  .lbg-body {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .lbg-inspector {
    display: none;
  }
  .lbg-api-pill {
    display: none;
  }
  .lbg-ide-grid {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .lbg-ide-console-col {
    grid-column: 1 / -1;
    max-height: 180px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
  }
}

@media (max-width: 860px) {
  .lbg-topbar {
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  .lbg-mob-menu-btn {
    display: grid;
    place-items: center;
  }
  .lbg-mode-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .lbg-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .lbg-mob-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.65);
    z-index: 75;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .lbg-shell.mob-left-open .lbg-mob-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .lbg-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 80;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
  }
  .lbg-shell.mob-left-open .lbg-sidebar {
    transform: translateX(0);
  }
  .lbg-studio-grid {
    grid-template-columns: 1fr;
  }
  .lbg-field-row {
    grid-template-columns: 1fr;
  }
}