/* VyKode Web — the app itself in the browser: the same colours (ui/Ui.kt C, dark and light), the same fonts (Android's
 * Roboto / Noto Sans Arabic, and the serif of the titles and the replies), the same honeycomb (ui/ZelligeViews.kt),
 * the same pieces (drawer, header, chat, composer, cards, sheets). Sizes are the app's dp. RTL first, English LTR. */
:root,[data-theme=dark]{
  --bg:#0A0E17;--s1:#111726;--s2:#182033;--line:#243049;--text:#E6EAF5;--dim:#8C97AD;
  --amber:#00F2FE;--amber-soft:#0B2532;--on-amber:#06101C;--green:#7BD88F;--red:#FF7A7A;--blue:#7AB8FF;--purple:#B57BFF;
  --press:rgba(255,255,255,.07);--scrim:rgba(2,4,10,.7);--stop:#8E3B3B;--shadow:0 14px 40px rgba(0,0,0,.6);
  --amber-a:rgba(0,242,254,.10);--amber-b:rgba(0,242,254,.45);--red-a:rgba(255,122,122,.08);--green-a:rgba(123,216,143,.1);
  /* v0.39: the brand gradient, its text, and the soft neon glow of the main buttons and the active cards */
  --grad:linear-gradient(135deg,#00F2FE 0%,#4D8CF0 52%,#8A2BE2 100%);--on-grad:#06101C;
  --glow:0 0 0 1px rgba(0,242,254,.22),0 6px 22px -6px rgba(0,242,254,.5),0 10px 32px -10px rgba(138,43,226,.6);
  --glow-card:0 0 0 1px rgba(0,242,254,.35),0 0 22px -4px rgba(0,242,254,.28);--ring:rgba(0,242,254,.55);
  --zl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54.00' height='31.18' viewBox='0 0 54.00 31.18'%3E%3Cpath d='M18.00 0.00 L9.00 15.59 L-9.00 15.59 L-18.00 0.00 L-9.00 -15.59 L9.00 -15.59Z M72.00 0.00 L63.00 15.59 L45.00 15.59 L36.00 0.00 L45.00 -15.59 L63.00 -15.59Z M45.00 15.59 L36.00 31.18 L18.00 31.18 L9.00 15.59 L18.00 0.00 L36.00 0.00Z M18.00 31.18 L9.00 46.77 L-9.00 46.77 L-18.00 31.18 L-9.00 15.59 L9.00 15.59Z M72.00 31.18 L63.00 46.77 L45.00 46.77 L36.00 31.18 L45.00 15.59 L63.00 15.59Z' fill='none' stroke='%2300F2FE' stroke-width='1' stroke-opacity='0.075'/%3E%3Ccircle cx='18.00' cy='0.00' r='1.6' fill='%2300F2FE' fill-opacity='0.22'/%3E%3Ccircle cx='45.00' cy='15.59' r='1.6' fill='%2300F2FE' fill-opacity='0.22'/%3E%3Ccircle cx='9.00' cy='31.18' r='1.6' fill='%2300F2FE' fill-opacity='0.22'/%3E%3C/svg%3E");
  --zl-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54.00' height='31.18' viewBox='0 0 54.00 31.18'%3E%3Cpath d='M18.00 0.00 L9.00 15.59 L-9.00 15.59 L-18.00 0.00 L-9.00 -15.59 L9.00 -15.59Z M72.00 0.00 L63.00 15.59 L45.00 15.59 L36.00 0.00 L45.00 -15.59 L63.00 -15.59Z M45.00 15.59 L36.00 31.18 L18.00 31.18 L9.00 15.59 L18.00 0.00 L36.00 0.00Z M18.00 31.18 L9.00 46.77 L-9.00 46.77 L-18.00 31.18 L-9.00 15.59 L9.00 15.59Z M72.00 31.18 L63.00 46.77 L45.00 46.77 L36.00 31.18 L45.00 15.59 L63.00 15.59Z' fill='none' stroke='%230077A8' stroke-width='1' stroke-opacity='0.09'/%3E%3Ccircle cx='18.00' cy='0.00' r='1.6' fill='%230077A8' fill-opacity='0.22'/%3E%3Ccircle cx='45.00' cy='15.59' r='1.6' fill='%230077A8' fill-opacity='0.22'/%3E%3Ccircle cx='9.00' cy='31.18' r='1.6' fill='%230077A8' fill-opacity='0.22'/%3E%3C/svg%3E");
  --band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.00' height='19.05' viewBox='0 0 33.00 19.05'%3E%3Cpath d='M11.00 0.00 L5.50 9.53 L-5.50 9.53 L-11.00 0.00 L-5.50 -9.53 L5.50 -9.53Z M44.00 0.00 L38.50 9.53 L27.50 9.53 L22.00 0.00 L27.50 -9.53 L38.50 -9.53Z M27.50 9.53 L22.00 19.05 L11.00 19.05 L5.50 9.53 L11.00 0.00 L22.00 0.00Z M11.00 19.05 L5.50 28.58 L-5.50 28.58 L-11.00 19.05 L-5.50 9.53 L5.50 9.53Z M44.00 19.05 L38.50 28.58 L27.50 28.58 L22.00 19.05 L27.50 9.53 L38.50 9.53Z' fill='none' stroke='%2300F2FE' stroke-width='1' stroke-opacity='0.07'/%3E%3Ccircle cx='11.00' cy='0.00' r='1.6' fill='%2300F2FE' fill-opacity='0.18'/%3E%3Ccircle cx='27.50' cy='9.53' r='1.6' fill='%2300F2FE' fill-opacity='0.18'/%3E%3Ccircle cx='5.50' cy='19.05' r='1.6' fill='%2300F2FE' fill-opacity='0.18'/%3E%3C/svg%3E");
  --band-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.00' height='19.05' viewBox='0 0 33.00 19.05'%3E%3Cpath d='M11.00 0.00 L5.50 9.53 L-5.50 9.53 L-11.00 0.00 L-5.50 -9.53 L5.50 -9.53Z M44.00 0.00 L38.50 9.53 L27.50 9.53 L22.00 0.00 L27.50 -9.53 L38.50 -9.53Z M27.50 9.53 L22.00 19.05 L11.00 19.05 L5.50 9.53 L11.00 0.00 L22.00 0.00Z M11.00 19.05 L5.50 28.58 L-5.50 28.58 L-11.00 19.05 L-5.50 9.53 L5.50 9.53Z M44.00 19.05 L38.50 28.58 L27.50 28.58 L22.00 19.05 L27.50 9.53 L38.50 9.53Z' fill='none' stroke='%230077A8' stroke-width='1' stroke-opacity='0.08'/%3E%3Ccircle cx='11.00' cy='0.00' r='1.6' fill='%230077A8' fill-opacity='0.18'/%3E%3Ccircle cx='27.50' cy='9.53' r='1.6' fill='%230077A8' fill-opacity='0.18'/%3E%3Ccircle cx='5.50' cy='19.05' r='1.6' fill='%230077A8' fill-opacity='0.18'/%3E%3C/svg%3E");
  --zellige:var(--zl);--zband:var(--band);
  /* the old names (sign-in, plans, account) */
  --card:var(--s1);--card2:var(--s2);--bg2:var(--s1);--line2:var(--line);--gold:var(--amber);--gold2:var(--amber);--gold3:var(--amber);--ink:var(--on-amber);--dim2:var(--dim);
  --sans:Roboto,"Noto Sans Arabic","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Noto Serif","Noto Naskh Arabic",Georgia,"Times New Roman",serif;
  --mono:"Noto Sans Mono","Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
  --font:var(--sans);--display:var(--serif);
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#F4F6FB;--s1:#FFFFFF;--s2:#EAEEF6;--line:#D3DAE7;--text:#111827;--dim:#5B6578;
  --amber:#0077A8;--amber-soft:#DDF3FA;--on-amber:#FFFFFF;--green:#1E8E3E;--red:#D32F2F;--blue:#1A66CC;--purple:#7B3FD1;
  --press:rgba(0,0,0,.06);--scrim:rgba(10,14,23,.45);--shadow:0 14px 40px rgba(17,24,39,.16);
  --amber-a:rgba(0,119,168,.1);--amber-b:rgba(0,119,168,.45);--red-a:rgba(211,47,47,.07);--green-a:rgba(30,142,62,.09);
  --glow:0 0 0 1px rgba(0,119,168,.18),0 6px 18px -8px rgba(0,119,168,.45),0 10px 26px -12px rgba(138,43,226,.4);
  --glow-card:0 0 0 1px rgba(0,119,168,.35),0 6px 20px -8px rgba(0,119,168,.3);--ring:rgba(0,119,168,.55);
  --zellige:var(--zl-light);--zband:var(--band-light);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{overflow:hidden}
#app{height:100%;zoom:var(--fs,1)}
a{color:var(--amber)}
button,input,textarea,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.noscript{padding:40px;text-align:center}
.ltr{direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}.small{font-size:12.5px}.grow{flex:1}.center{display:grid;place-items:center;padding:30px}
.ic{width:24px;height:24px;flex:none;display:block}
[dir=rtl] .ic.mir{transform:scaleX(-1)}
.star{width:16px;height:16px;flex:none;display:block;color:var(--amber)}
.star.spin,.spin-star{animation:turn 2.2s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:turn .8s linear infinite;flex:none}
.spin.big{width:26px;height:26px;color:var(--amber)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* the app's page: a faint honeycomb in cyan, strongest at the top and fading down; a soft light of the brand at the top */
.zl-bg{position:relative;isolation:isolate;background:radial-gradient(1100px 420px at 50% -120px,rgba(0,242,254,.07),rgba(138,43,226,.05) 45%,transparent 70%),var(--bg)}
.zl-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--zellige);background-size:54px 31.18px;background-position:0 0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.35) 38%,transparent 72%);mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.35) 38%,transparent 72%)}

/* boot */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg)}
.boot .logo svg{width:84px;height:84px;animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05);opacity:.8}}
.mark{display:inline-block;width:20px;height:23px;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 0 10px rgba(0,242,254,.6));animation:breathe 1.6s ease-in-out infinite}

/* ---------------------------------------------------------------- the app's controls (ui/Ui.kt) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:8px 18px;min-height:44px;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--grad);color:var(--on-grad);box-shadow:var(--glow);text-decoration:none;transition:transform .12s,filter .15s,box-shadow .2s;user-select:none}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.55;cursor:default;filter:none;transform:none;box-shadow:none}
.btn.tonal,.btn.ghost{background:var(--s2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.tonal:hover,.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--amber-b)}
.btn.outline{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.btn.danger{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:6px 14px;font-size:13px;border-radius:10px}
.btn .ic{width:19px;height:19px}
.btn .spin{width:16px;height:16px}
.ib{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;flex:none;padding:0;transition:transform .12s,background .15s}
.ib:hover{background:var(--press)}.ib:active{transform:scale(.86)}
.ib .ic{width:24px;height:24px}
.ib.sm{width:36px;height:36px}.ib.sm .ic{width:20px;height:20px}
.ib.dimc{color:var(--dim)}.ib.amber{color:var(--amber)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--dim);cursor:pointer}
.icon-btn:hover{background:var(--press);color:var(--text)}
.icon-btn .ic,.icon-btn svg{width:20px;height:20px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:18px;padding:7px 14px;font-size:13px;background:var(--s1);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;white-space:nowrap;transition:transform .12s;text-decoration:none}
.chip:active{transform:scale(.94)}
.chip.on,.chip.gold{background:var(--grad);color:var(--on-grad);box-shadow:0 0 14px -3px rgba(0,242,254,.45)}
.chip .ic{width:15px;height:15px}
span.chip{cursor:default}
.input{width:100%;padding:11px 14px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:var(--s2);color:var(--text);outline:none;font-size:15px;min-height:46px}
.input:focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.input::placeholder,textarea::placeholder{color:var(--dim)}
.input.bad{box-shadow:inset 0 0 0 1.5px var(--red)}
.input[type=email],.input.ltr-in{direction:ltr;text-align:left}
textarea.input{resize:vertical;min-height:96px;line-height:1.5}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--dim);font-weight:700}
.field .row{position:relative}
.field .eye{position:absolute;inset-block:0;inset-inline-start:4px;margin:auto 0;height:40px}
.field .row .input[type=password],.field .row .input.pw{padding-inline-start:48px;direction:ltr;text-align:left}
.field small.err{color:var(--red);font-size:12.5px}
.field small.hint{color:var(--dim);font-size:12.5px}
.field small.err:not([hidden]) ~ small.hint{display:none}
.alert{border-radius:14px;padding:11px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);background:var(--s1)}
.alert.err{box-shadow:inset 0 0 0 1px var(--red);color:var(--text)}
.alert.info{box-shadow:inset 0 0 0 1px var(--amber-b);background:var(--amber-soft);color:var(--text)}
.alert.ok{box-shadow:inset 0 0 0 1px var(--green);color:var(--text)}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.row-btns>.btn{flex:1}
.stack{display:grid;gap:12px}
.danger-text{color:var(--red)!important}
.sep{height:1px;background:var(--line);margin:8px 0}

/* switch (the app's Switch: amber when on) */
.sw{position:relative;width:40px;height:22px;flex:none;border-radius:11px;background:var(--line);transition:background .18s;cursor:pointer;border:0;padding:0}
.sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:inset-inline-start .18s,background .18s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw[aria-checked=true]{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-b)}
.sw[aria-checked=true]::after{inset-inline-start:20px;background:var(--amber)}
input[type=range]{accent-color:var(--amber);width:100%}

/* toasts (Android's Toast) */
.toasts{position:fixed;z-index:200;inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;max-width:480px;background:var(--s2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);padding:10px 16px;border-radius:22px;font-size:14px;animation:up .2s ease-out;text-align:center}
@keyframes up{from{opacity:0;transform:translateY(8px)}}

/* full-screen notices (maintenance, off) */
.notice{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center}
.notice .box{max-width:440px;display:grid;justify-items:center}
.notice h2{margin:18px 0 8px;font:700 24px/1.3 var(--serif)}
.notice p{color:var(--dim);margin:0 0 22px}

/* ---------------------------------------------------------------- sheets (ui/Ui.kt Sheet): from the bottom on a phone */
.sheet-bg{position:fixed;inset:0;z-index:100;background:var(--scrim);display:grid;place-items:center;padding:16px;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:460px;max-height:min(88vh,780px);display:flex;flex-direction:column;background:var(--s1);border-radius:22px;box-shadow:var(--shadow);animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.sheet.wide{max-width:860px}
.sheet .handle{display:none;width:40px;height:5px;border-radius:3px;background:var(--line);margin:10px auto 2px;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 10px 4px 18px}
[dir=rtl] .sheet-head{padding:14px 18px 4px 10px}
.sheet-head h3{margin:0;font-size:18px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-head h3.mono{font-family:var(--mono);font-size:16px;direction:ltr}
.sheet-body{overflow:auto;padding:6px 18px 18px;display:grid;align-content:start;gap:8px}
.sheet-body>.lead{color:var(--dim);font-size:13px;margin:0}
.menu{display:grid;gap:2px}
.mi{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--text);padding:14px 8px;border-radius:10px;cursor:pointer;text-align:start;font-size:15px;width:100%;text-decoration:none}
.mi:hover{background:var(--press)}
.mi .ic{width:20px;height:20px;color:var(--dim)}
.mi.red,.mi.danger-text{color:var(--red)}

/* ================================================================ the shell: drawer · header · page */
.shell{position:fixed;inset:0;display:flex;background:var(--bg)}
.shell>.page-host{flex:1;min-width:0;display:flex;flex-direction:column}
.hdr{display:flex;align-items:center;gap:0;padding:4px;min-height:56px;flex:none;position:relative;z-index:2}
.hdr-title{flex:1;min-width:0;padding:0 6px;font:700 18px/1.3 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:start}
.hdr-title.dim{color:var(--dim)}
.hdr-star{display:inline-flex;margin-inline-end:8px}.hdr-star .star{width:16px;height:16px}
.hdr-actions{display:flex;align-items:center}
.hdr-actions .ib{width:41px;height:41px}.hdr-actions .ib .ic{width:23px;height:23px}
.content{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.page{flex:1;min-height:0;display:flex;flex-direction:column;animation:enter .19s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.strip{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--dim);background:var(--s1);box-shadow:inset 0 -1px 0 var(--line);cursor:pointer;flex:none}
.strip .star{width:14px;height:14px}
.strip b{color:var(--text);font-weight:700}
.banner{padding:9px 14px;text-align:center;font-weight:700;font-size:13px;background:#7A2E2E;color:#fff;flex:none}

/* ---------------------------------------------------------------- the drawer (ui/Drawer.kt) */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .26s}
.drawer.open .scrim{opacity:1}
.dpanel{position:absolute;inset-block:0;inset-inline-start:0;width:min(84vw,360px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--s2),var(--s1) 50%,var(--s1));box-shadow:0 0 40px rgba(0,0,0,.45);transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
[dir=rtl] .dpanel{transform:translateX(100%)}
.drawer.open .dpanel{transform:none}
.dband{position:absolute;inset:0 0 auto;height:150px;z-index:-1;pointer-events:none;background-image:var(--zband);background-size:33px 19.05px}
.dband::after{content:"";position:absolute;inset:80px 0 0;background:linear-gradient(180deg,transparent,var(--s1))}
.dhead{display:flex;align-items:center;gap:12px;padding:18px 8px 12px 18px}
[dir=rtl] .dhead{padding:18px 18px 12px 8px}
.dlogo{width:40px;height:40px;flex:none;display:block}.dlogo .logo,.dlogo svg{width:40px;height:40px;display:block}
.dbrand{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dbrand b{font:700 21px/1.15 var(--serif);color:var(--text);letter-spacing:.2px}
.dbrand small{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dclose .ic{width:20px;height:20px}
.dfind{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:0 12px;height:42px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);cursor:text;transition:box-shadow .15s}
.dfind:focus-within{box-shadow:inset 0 0 0 1.5px var(--amber-b)}
.dfind .ic{width:18px;height:18px;flex:none}
.dsearch{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;color:var(--text);font-size:14.5px}
.dsearch::placeholder{color:var(--dim)}
.dfind kbd{font:11.5px/1.4 var(--mono);color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:0 6px}
@media (pointer:coarse){.dfind kbd{display:none}}
.dnew{padding:0 14px 4px;flex:none}
.newchat{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:16px;padding:12px 18px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s}
.newchat:hover{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-b)}
.newchat:active{transform:scale(.97)}
.newchat .ic{width:19px;height:19px;color:var(--amber)}
.dlabel{padding:14px 24px 5px;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.3px}
.dnav{display:flex;align-items:center;gap:14px;width:calc(100% - 16px);margin:0 8px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:15px;cursor:pointer;text-align:start;transition:transform .12s,background .15s}
.dnav:hover{background:var(--press)}.dnav:active{transform:scale(.98)}
.dnav .ic{width:20px;height:20px;color:var(--dim)}
.dnav.on{background:var(--amber-soft);box-shadow:inset 0 0 0 1px rgba(0,242,254,.18)}.dnav.on .ic{color:var(--amber)}.dnav.on span{font-weight:700}
.dtopics{display:grid;gap:1px}
.dtopic{display:flex;align-items:center;gap:12px;width:calc(100% - 16px);margin:0 8px;padding:9px 14px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:15px;cursor:pointer;text-align:start;transition:background .15s}
.dtopic:hover{background:var(--press)}
.dtopic .bar{width:4px;height:20px;border-radius:3px;flex:none;background:var(--dim)}
.dtopic.amber .bar{background:var(--amber)}.dtopic.blue .bar{background:var(--blue)}.dtopic.purple .bar{background:var(--purple)}
.dtopic span{flex:1}
.dtopic small{min-width:24px;padding:1px 7px;border-radius:9px;background:var(--s2);color:var(--dim);font-size:12px;text-align:center}
.dtopic.on{background:var(--press);box-shadow:inset 0 0 0 1px var(--line)}.dtopic.on span{font-weight:700}.dtopic.on small{color:var(--text)}
.dscroll{flex:1;min-height:0;overflow:auto;padding-bottom:8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 24px),transparent)}
.dscroll::-webkit-scrollbar{display:none}
.ddiv{height:1px;background:var(--line);margin:10px 22px 6px}
.dsec{display:flex;align-items:center;padding:4px 10px 2px 22px;color:var(--dim);font-size:13.5px;font-weight:700}
[dir=rtl] .dsec{padding:4px 22px 2px 10px}
.dsec>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsec .ib{width:36px;height:36px;color:var(--amber)}.dsec .ib .ic{width:18px;height:18px}
.drow{display:flex;align-items:center;gap:14px;width:calc(100% - 16px);margin:0 8px;padding:11px 14px;border:0;border-radius:14px;background:transparent;color:var(--text);font-size:15px;cursor:pointer;text-align:start;transition:transform .12s,background .15s;position:relative}
.drow:hover{background:var(--press)}.drow:active{transform:scale(.98)}
.drow .ic{width:18px;height:18px;color:var(--dim)}
.drow span.t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:start}
.drow.on{background:var(--amber-soft)}.drow.on .ic{color:var(--amber)}.drow.on span.t{font-weight:700}
.drow .star{width:15px;height:15px}
.drow .more{display:none;width:30px;height:30px;margin:-6px -8px -6px 0;color:var(--dim)}
.drow:hover .more{display:inline-grid}
.drow .more .ic{width:18px;height:18px}
.dempty{color:var(--dim);font-size:13.5px;padding:10px 22px}
.drow .pin{display:inline-grid;place-items:center}.drow .pin .ic{width:13px;height:13px;color:var(--amber)}
.dfoot{flex:none;display:grid;gap:6px;padding:10px 12px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--line);background:var(--s1)}
.dcredit{border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--amber-a),transparent 70%),var(--s2);box-shadow:inset 0 0 0 1px var(--line)}
.dc-main{display:grid;gap:7px;width:100%;border:0;background:transparent;color:var(--text);padding:12px 14px 10px;text-align:start;cursor:pointer;font:inherit}
.dc-h{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:12.5px;font-weight:700}
.dc-h .ic{width:16px;height:16px;color:var(--amber)}
.dc-h>span:first-of-type{flex:1}
.dc-tier{font-size:11px;padding:2px 8px;border-radius:9px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.dc-tier.t-pro,.dc-tier.t-max{background:var(--grad);color:var(--on-grad);box-shadow:none}
.dc-n{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dc-n b{font:700 25px/1 var(--sans);color:var(--text)}
.dc-n span{color:var(--dim);font-size:14px}
.dc-w{margin-inline-start:auto;color:var(--green);font-size:12px;font-weight:700}
.dcredit .meter-bar{height:6px}
.dcredit.low .meter-bar i{background:var(--red)}
.dc-main small.dim{font-size:11.5px}
.dc-acts{display:flex;gap:6px;padding:0 10px 10px}
.dc-up,.dc-top{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:8px 12px;font:700 13px var(--sans);cursor:pointer;transition:transform .12s}
.dc-up:active,.dc-top:active{transform:scale(.96)}
.dc-up{flex:1;min-width:0;background:var(--grad);color:var(--on-grad)}.dc-up span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-top{background:var(--bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.dc-up .ic,.dc-top .ic{width:15px;height:15px}
.duser{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:14px;padding:7px 8px;background:transparent;color:var(--text);cursor:pointer;text-align:start;font:inherit}
.duser:hover{background:var(--press)}
.duser .av{--av-gap:var(--s1)}
.du-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.du-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-t small{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duser>.ic{width:18px;height:18px;color:var(--dim);transform:rotate(90deg)}

/* ---------------------------------------------------------------- the chat (ui/ChatPage.kt) */
.chatpage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.cscroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.clist{padding:10px 14px;max-width:780px;margin:0 auto;display:flex;flex-direction:column}
.clist>*{margin:6px 0}
.clist>.srow-wrap{margin:1px 0}
.pop{animation:popin .32s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes popin{from{opacity:0;transform:translateY(10px)}}
.older{align-self:center;border:0;background:transparent;color:var(--amber);font-weight:700;font-size:13px;padding:10px;cursor:pointer}
/* the user's bubble: SURFACE2, round, the top corner on its side small; on the start side (as the app) */
.u{display:flex;flex-direction:column;align-items:flex-start}
.ubub{max-width:90%;background:var(--s2);padding:10px 15px;border-radius:6px 20px 20px 20px;font-size:15.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
[dir=rtl] .ubub{border-radius:20px 6px 20px 20px}
.ubub .cmd{display:block;font:11px var(--mono);color:var(--dim);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubub .att{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.13);border-radius:12px;padding:8px 12px 8px 8px;margin-bottom:8px;direction:ltr;text-align:left;white-space:normal}
.ubub .att:last-child{margin-bottom:0}
.ubub .att b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.ubub .att small{font-size:11px;opacity:.7}
.ubub img.att-img{display:block;width:190px;height:140px;object-fit:cover;border-radius:12px;margin-bottom:8px;background:var(--s1)}
.ext{display:grid;place-items:center;min-width:40px;height:40px;border-radius:8px;background:var(--amber-soft);color:var(--amber);font:700 10.5px var(--sans);letter-spacing:.2px;flex:none}
/* the assistant: words without a frame (Markdown), serif like Claude's replies (Settings: «خط كلاسيكي للردود») */
.a{display:flex;flex-direction:column}
.atext{font-size:16px;line-height:1.62;color:var(--text);padding:0 2px;word-wrap:break-word;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.serif-chat .atext{font-family:var(--serif);line-height:1.7}
.atext>:first-child{margin-top:0}.atext>:last-child{margin-bottom:0}
.atext p{margin:0 0 10px}
.atext ul,.atext ol{margin:4px 0 10px;padding-inline-start:22px}
.atext li{margin:3px 0}
.atext .h,.atext h1,.atext h2,.atext h3{font-weight:700;margin:12px 0 6px;font-size:1.06em}
.atext code{font-family:var(--mono);font-size:.84em;background:var(--s2);border-radius:6px;padding:1px 5px;direction:ltr;unicode-bidi:isolate}
.atext pre{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:10px 12px;overflow:auto;font-size:13px;max-height:320px;direction:ltr;text-align:left;position:relative}
.atext pre code{background:none;padding:0;font-size:inherit}
.atext a{color:var(--blue);word-break:break-all}
.atext blockquote{margin:6px 0;padding:2px 12px;border-inline-start:3px solid var(--line);color:var(--dim)}
.atext table{border-collapse:collapse;font-size:14px;margin:6px 0}.atext td,.atext th{border:1px solid var(--line);padding:4px 8px}
.acts{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.acts button{border:0;background:transparent;color:var(--dim);font-weight:700;font-size:12px;padding:8px 14px 4px 2px;cursor:pointer}
[dir=rtl] .acts button{padding:8px 2px 4px 14px}
.acts button.undo{color:var(--amber);font-size:13px}
.acts button:hover{color:var(--text)}.acts button.undo:hover{color:var(--amber);filter:brightness(1.1)}
/* thinking («💭 التفكير · 120 كلمة ›») */
.think{display:flex;flex-direction:column;margin-bottom:4px}
.think-h{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:0;background:transparent;color:var(--dim);font-weight:700;font-size:12.5px;padding:4px 2px;cursor:pointer}
.think-h small{font-weight:400;font-size:11.5px}
.think-h .ic{width:14px;height:14px;transition:transform .18s}
.think.open .think-h .ic{transform:rotate(90deg)}
[dir=rtl] .think.open .think-h .ic.mir{transform:scaleX(-1) rotate(90deg)}
.think-b{display:none;font-size:12.5px;line-height:1.5;font-style:italic;color:var(--dim);background:var(--s1);border-radius:12px;padding:8px 12px;white-space:pre-wrap;unicode-bidi:plaintext;text-align:start;max-height:300px;overflow:auto;margin:2px 0 4px}
.think.open .think-b{display:block}
.live-think .think-h{cursor:default}
.live-think .think-b{display:block;max-height:9em;overflow:hidden}
/* the steps row («‹ بدّلت 4 ملف · قريت 10  ✦») */
.srow{display:flex;align-items:center;width:100%;gap:0;border:0;background:transparent;color:var(--dim);padding:7px 4px;border-radius:12px;cursor:pointer;text-align:start;font-size:14px;transition:background .15s,transform .12s}
.srow:hover{background:var(--press)}.srow:active{transform:scale(.985)}
.srow .chev{display:inline-flex;transform:rotate(180deg);margin-inline-end:8px;flex:none}
.srow .chev .ic{width:14px;height:14px}
.srow .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:start}
.srow .star{width:15px;height:15px;margin-inline-start:10px;color:var(--dim)}
.srow.live .star{color:var(--amber)}
.srow.failed{color:var(--red)}.srow.failed .star{color:var(--red)}
/* the files changed («26 ملف تبدّل · PLAN.md، board.json…») */
.fbox{background:var(--s1);border-radius:14px;padding:9px 12px;margin-top:8px}
.fbox-h{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:0;color:var(--text);cursor:pointer;text-align:start}
.fbox-h>.ic{width:16px;height:16px;color:var(--amber)}
.fbox-h .tx{flex:1;min-width:0;display:grid}
.fbox-h b{font-size:13px}
.fbox-h small{font:11.5px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbox-h .chev{display:inline-flex;transition:transform .18s}.fbox-h .chev .ic{width:15px;height:15px;color:var(--dim)}
.fbox.open .fbox-h .chev{transform:rotate(90deg)}
[dir=rtl] .fbox.open .fbox-h .chev{transform:rotate(-90deg)}
.fbox-b{display:none;padding-top:6px}
.fbox.open .fbox-b{display:block}
.fbox-b button{display:block;width:100%;border:0;background:transparent;color:var(--dim);font:12px var(--mono);padding:5px 0 5px 26px;text-align:left;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:8px}
.fbox-b button:hover{color:var(--text);background:var(--press)}
/* the task list (ChatCards.tasks) */
.tasks{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:11px 14px}
.tasks.done{box-shadow:inset 0 0 0 1px var(--green)}
.tasks-h{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:0;color:var(--text);cursor:pointer;text-align:start}
.tasks-h>.ic{width:18px;height:18px;color:var(--amber)}
.tasks.done .tasks-h>.ic{color:var(--green)}
.tasks-h .tx{flex:1;min-width:0;display:grid}
.tasks-h b{font-size:14px}
.tasks-h small{font-size:12px;color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tasks-h .n{font:700 12.5px var(--mono);color:var(--dim);margin:0 8px}
.tasks.done .tasks-h .n{color:var(--green)}
.tasks-h .chev{display:inline-flex;transition:transform .18s}.tasks-h .chev .ic{width:16px;height:16px;color:var(--dim)}
.tasks.open .tasks-h .chev{transform:rotate(90deg)}
[dir=rtl] .tasks.open .tasks-h .chev{transform:rotate(-90deg)}
.tasks-bar{height:4px;border-radius:3px;background:var(--s2);margin-top:9px;overflow:hidden}
.tasks-bar i{display:block;height:100%;border-radius:3px;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tasks.done .tasks-bar i{background:var(--green)}
.tasks-b{display:none;padding-top:6px}
.tasks.open .tasks-b{display:block}
.task{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13.5px;unicode-bidi:plaintext}
.task .mk{width:16px;height:16px;display:grid;place-items:center;flex:none;font-weight:700;font-size:13px;color:var(--dim)}
.task .mk .star{width:16px;height:16px}
.task.done{color:var(--dim)}.task.done span.tt{text-decoration:line-through}
.task.done .mk{color:var(--green)}
.task.now{font-weight:700}.task.now .mk{color:var(--amber)}
.task.todo span.tt{opacity:.8}
/* a file card (ui/FileCard.kt): the published site, the APK, a project */
.fcard{display:flex;align-items:center;gap:12px;width:100%;border:0;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:12px 12px 12px 16px;cursor:pointer;color:var(--text);text-align:start;transition:transform .12s;text-decoration:none}
[dir=rtl] .fcard{padding:12px 16px 12px 12px}
.fcard:active{transform:scale(.98)}
.fcard.off{opacity:.55}
.fcard .tx{flex:1;min-width:0;display:grid;gap:4px}
.fcard .tx b{font:400 16.5px/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext;text-align:start}
.fcard .tx small{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:start}
.fcard .tile{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:14px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);transition:transform .12s}
.fcard .tile:active{transform:scale(.9)}
.fcard .tile .ic{width:22px;height:22px}
.fcard.green .tile{color:var(--green)}.fcard.amber .tile{color:var(--amber)}
/* the error card («توقّف العمل») and the notes */
.ecard{background:var(--s1);box-shadow:inset 0 0 0 1px var(--red);border-radius:14px;padding:10px 14px;display:grid;gap:4px}
.ecard b{color:var(--red);font-size:13px}
.ecard p{margin:0;font-size:14px;unicode-bidi:plaintext;text-align:start}
.ecard .btn{margin-top:6px}
.note{align-self:stretch;text-align:center;font-size:12.5px;color:var(--dim);padding:4px 12px}
.pcard{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:4px}
.pcard.latest{box-shadow:inset 0 0 0 1px var(--amber)}
.pcard b{font-size:15px}.pcard b.ok{color:var(--green)}
.pcard p{margin:0;font-size:13px;color:var(--dim)}
.pcard .btn{margin-top:6px}
/* a running build / publish */
.bcard{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:10px}
.bcard.ok{box-shadow:inset 0 0 0 1px var(--green)}.bcard.fail{box-shadow:inset 0 0 0 1px var(--red)}
.bc-head{display:flex;gap:12px;align-items:center}
.bc-head b{display:block;font-size:15px}.bc-head small{color:var(--dim);font-size:13px}
.bc-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--s2);color:var(--amber);flex:none}
.bcard.ok .bc-icon{color:var(--green)}.bcard.fail .bc-icon{color:var(--red)}
.bc-icon .ic{width:20px;height:20px}.bc-icon .star{width:18px;height:18px}
.bc-detail{font-size:12.5px;line-height:1.5;color:var(--dim);background:var(--red-a);border-radius:10px;padding:8px 10px;word-break:break-word}
/* the agent's question (ui/ChoiceCard.kt) */
.ask{background:var(--s1);box-shadow:inset 0 0 0 1px var(--amber);border-radius:18px;padding:14px;display:grid;gap:8px}
.ask>small{color:var(--amber);font-weight:700;font-size:11px}
.ask>b{font-size:16px;line-height:1.4;unicode-bidi:plaintext}
.ask>.dim{font-size:12px;margin-top:-4px}
.opt{display:flex;align-items:center;gap:12px;border:0;width:100%;text-align:start;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:12px;cursor:pointer;color:var(--text)}
.opt.on{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber)}
.opt .mk{width:24px;height:24px;flex:none;border-radius:12px;box-shadow:inset 0 0 0 2px var(--dim);display:grid;place-items:center;color:var(--on-amber);font-weight:700;font-size:13px}
.ask.multi .opt .mk{border-radius:7px}
.opt.on .mk{background:var(--amber);box-shadow:none}
.opt .tx{flex:1;min-width:0;display:grid;gap:2px}
.opt .tx b{font-size:15px}.opt .tx small{font-size:13px;color:var(--dim);line-height:1.4}
.opt .pal{display:flex;height:22px;border-radius:8px;overflow:hidden;margin-top:8px;background:var(--line)}
.opt .pal i{flex:1}
.ask.done{opacity:.6;pointer-events:none}
/* the line of what the agent does now, at the end of the chat */
.down{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;border:0;background:var(--s2);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.35);animation:popin .2s}
.down .ic{width:22px;height:22px}
/* an empty chat */
.hempty{padding:40px 2px 10px;display:flex;flex-direction:column;align-items:stretch}
.hempty .logo{align-self:center;width:84px;height:84px;animation:breathe 1.8s ease-in-out infinite}
.hempty .logo svg{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(0,242,254,.35))}
.hempty h1{margin:6px 0 0;text-align:center;font:400 30px/1.3 var(--serif);color:var(--text)}
.hempty h2{margin:4px 0 26px;text-align:center;font:400 19px/1.4 var(--serif);color:var(--dim)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile2{display:grid;align-content:start;gap:2px;border:0;text-align:start;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:14px;cursor:pointer;color:var(--text);transition:transform .12s,box-shadow .2s}
.tile2:hover,.idea:hover,.fcard:hover{box-shadow:var(--glow-card)}
.tile2:active{transform:scale(.96)}
.tile2 .ic{width:24px;height:24px;color:var(--amber);margin-bottom:8px;filter:drop-shadow(0 0 6px rgba(0,242,254,.45))}
.tile2 b{font-size:14.5px}.tile2 small{font-size:12px;color:var(--dim)}
.pempty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 6px 10px}
.pempty .ic.big{width:56px;height:56px;color:var(--amber)}
.pempty h1{margin:14px 0 0;font-size:22px;font-weight:700;unicode-bidi:plaintext}
.pempty p{margin:8px 12px;color:var(--dim);font-size:14px}
.pempty p.small{font-size:12.5px;margin-bottom:18px}
.idea{display:block;width:100%;border:0;text-align:start;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:13px 16px;font-size:14px;color:var(--text);cursor:pointer;margin:4px 0}
.idea:active{transform:scale(.98)}
/* queued messages, attachments waiting, quick replies */
.below{padding:0 12px;max-width:780px;width:100%;margin:0 auto;flex:none}
.queue{display:grid;gap:4px;margin-bottom:4px}
.qrow{display:flex;align-items:center;gap:6px;background:var(--amber-soft);border-radius:12px;padding:6px 4px 6px 12px;font-size:13px}
[dir=rtl] .qrow{padding:6px 12px 6px 4px}
.qrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ---------------------------------------------------------------- the composer (ui/Composer.kt) */
.comp{flex:none;padding:4px 10px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--bg)}
.cbox{position:relative;max-width:780px;margin:0 auto;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line),0 8px 28px rgba(0,0,0,.18);border-radius:24px;display:flex;flex-direction:column;transition:box-shadow .15s,background .15s}
.cbox:focus-within{box-shadow:inset 0 0 0 1px var(--amber-b),0 0 26px -6px rgba(0,242,254,.35),0 8px 28px rgba(0,0,0,.2)}
.cin{width:100%;border:0;background:transparent;outline:none;resize:none;padding:13px 16px 4px;min-height:46px;max-height:calc(7 * 1.45em + 16px);font-size:16px;line-height:1.45;color:var(--text);unicode-bidi:plaintext;text-align:start;overflow-y:auto}
.cin::placeholder{color:var(--dim)}
/* the attachments: chips on top of the text */
.catt{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.achip{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:100%;height:34px;padding:0 4px 0 6px;border-radius:12px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--text)}
[dir=rtl] .achip{padding:0 6px 0 4px}
.achip img{width:24px;height:24px;border-radius:7px;object-fit:cover;flex:none}
.achip .ext{min-width:28px;height:22px;border-radius:6px;font-size:9px}
.achip>.ic{width:16px;height:16px;color:var(--blue);flex:none}
.achip .an{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.achip small{color:var(--dim);font-size:11.5px;white-space:nowrap}
.achip .x{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:8px;background:transparent;color:var(--dim);cursor:pointer;padding:0;flex:none}
.achip .x:hover{background:var(--press);color:var(--text)}
.achip .x .ic{width:14px;height:14px}
/* the tools row */
.ctools,.crec{display:flex;align-items:center;gap:6px;padding:4px 8px 8px}
.cleft,.csug{display:flex;align-items:center;gap:6px;min-width:0}
.csug{flex:1}
.csug-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
[dir=rtl] .csug-in{-webkit-mask-image:linear-gradient(270deg,#000 85%,transparent);mask-image:linear-gradient(270deg,#000 85%,transparent)}
.csug-in::-webkit-scrollbar{display:none}
.chip.sg{flex:none;padding:7px 12px;font-size:13px;background:var(--s2)}
.chip.sg .ic{width:13px;height:13px;color:var(--amber)}
.ctools .grow{flex:1}
.ctools.sugg .model{padding:0 10px}.ctools.sugg .model .ml,.ctools.sugg .model .dn{display:none}
.csug:not([hidden])+.grow{display:none}
.cb{display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;flex:none;padding:0;transition:transform .12s,background .15s}
.cb:active{transform:scale(.88)}
.cb .ic{width:20px;height:20px}
.cb.sm{width:32px;height:32px;background:var(--s2);color:var(--dim)}
.cb.sm .ic{width:15px;height:15px}
.cb.plus{width:38px;height:38px;background:var(--s2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.cb.plus[aria-expanded=true]{background:var(--amber-soft);color:var(--amber);transform:rotate(45deg)}
.cb.mic{width:40px;height:40px;background:transparent;color:var(--dim)}
.cb.mic:hover{background:var(--press);color:var(--text)}
.cb.prim{width:42px;height:42px}
.cb.prim .ic{width:21px;height:21px}
.cb.voice{background:var(--amber-soft);color:var(--amber)}
.cb.send{background:var(--grad);color:var(--on-grad);box-shadow:0 0 16px -3px rgba(0,242,254,.55)}
.cb.stop{background:var(--text);color:var(--bg)}
.cb.stop .ic{width:16px;height:16px}
.cb.bounce{animation:bounce .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes bounce{40%{transform:scale(1.14)}}
.cb.x{width:40px;height:40px;background:var(--s2);color:var(--text)}
.cb.ok{width:40px;height:40px;background:var(--text);color:var(--bg)}
.cb.pause{width:36px;height:36px;background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.cb.pause .ic{width:16px;height:16px}
.model{display:inline-flex;align-items:center;gap:6px;max-width:210px;height:36px;border:0;border-radius:18px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);padding:0 10px 0 12px;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;transition:transform .12s,background .15s}
[dir=rtl] .model{padding:0 12px 0 10px}
.model:hover{background:var(--amber-soft)}
.model:active{transform:scale(.95)}
.model .ml{min-width:0;overflow:hidden;text-overflow:ellipsis}
.model .ic{width:14px;height:14px;flex:none}
.model .ic-sparkle{color:var(--amber)}
.model .dn,[dir] .model .dn{width:13px;height:13px;color:var(--dim);transform:rotate(90deg)}
/* the drop zone: ＋ or files over the chat */
.cdrop{position:relative;margin:8px;padding:22px 16px 16px;border-radius:18px;border:1.5px dashed var(--amber-b);background:linear-gradient(180deg,var(--amber-a),transparent);display:grid;justify-items:center;gap:4px;text-align:center}
.cbox.dragging .cdrop{background:var(--amber-a);border-style:solid}
.cdrop b{font-size:15px;color:var(--text)}
.cdrop small{font-size:12.5px;color:var(--dim)}
.dz-row{display:flex;gap:10px;margin-top:12px}
.dz{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);cursor:pointer;transition:transform .12s,background .15s}
.dz:hover{background:var(--amber-soft);color:var(--amber)}
.dz:active{transform:scale(.9)}
.dz .ic{width:19px;height:19px}
.dclose2{position:absolute;top:6px;inset-inline-end:6px;width:32px;height:32px;color:var(--dim)}
.dclose2 .ic{width:16px;height:16px}
/* the recording bar */
.crec{padding:8px 8px 8px}
.crec-x{border:0;border-radius:16px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:700 13px var(--sans);padding:8px 14px;cursor:pointer}
.crec-x:hover{background:var(--press)}
.crec-mid{flex:1;display:grid;justify-items:center;gap:2px;min-width:0}
.rhint{font-size:11.5px;color:var(--dim)}
.crec-t{display:flex;align-items:center;gap:8px}
.crec-t .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:recdot 1.2s ease-in-out infinite}
.crec.paused .crec-t .dot{animation:none;opacity:.4}
@keyframes recdot{50%{opacity:.25}}
.crec .bars{flex:0 1 110px;height:26px;margin:0 4px}
.bars{flex:1;height:30px;margin:0 10px 0 12px;display:flex;align-items:center;gap:3px;overflow:hidden;justify-content:flex-end}
.bars i{display:block;width:3px;border-radius:2px;background:var(--amber);flex:none;min-height:3px}
.clock{font:14px var(--mono);color:var(--text)}
@media (max-width:420px){.crec .bars{display:none}.model{max-width:150px}}

/* ---------------------------------------------------------------- the voice mode (ui/VoiceMode.kt) */
.voice-page{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s}
.voice-top{display:flex;align-items:center;padding:14px 8px 0 16px}
[dir=rtl] .voice-top{padding:14px 16px 0 8px}
.voice-top b{flex:1;color:var(--dim);font-size:15px}
.voice-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 28px;text-align:center}
.orb{width:220px;height:220px;border-radius:50%;border:0;cursor:pointer;position:relative;background:radial-gradient(circle at 35% 30%,#A8FBFF,#00F2FE 32%,#5A6CF0 62%,#8A2BE2 100%);box-shadow:0 0 60px rgba(0,242,254,.35),0 0 90px rgba(138,43,226,.3);transition:transform .3s}
.orb.listen{animation:orb 1.4s ease-in-out infinite}
.orb.work{animation:turn 6s linear infinite;filter:saturate(.7)}
.orb.speak{animation:orb .7s ease-in-out infinite}
@keyframes orb{50%{transform:scale(1.06)}}
.voice-st{margin-top:24px;font:400 22px/1.4 var(--serif)}
.voice-tr{margin-top:12px;font:400 15.5px/1.5 var(--serif);color:var(--dim);max-height:7.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.voice-bot{display:flex;justify-content:center;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.voice-bot .cb{width:60px;height:60px;background:var(--stop);color:#fff}

/* ---------------------------------------------------------------- the project: files, preview, build */
.pbar{display:flex;align-items:center;gap:2px;padding:4px 10px 4px 6px;min-height:48px;flex:none;box-shadow:inset 0 -1px 0 var(--line)}
[dir=rtl] .pbar{padding:4px 6px 4px 10px}
.pbar .ttl{flex:1;min-width:0;font:700 14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:start;padding:0 4px}
[dir=rtl] .pbar .ttl{text-align:right}
.pbar .ib{width:38px;height:38px}.pbar .ib .ic{width:20px;height:20px}
.pbar .save{border:0;border-radius:10px;background:var(--grad);color:var(--on-grad);font-weight:700;font-size:13px;padding:7px 14px;cursor:pointer;margin:0 4px}
.pbar .live-tag{font-size:11px;font-weight:700;border-radius:8px;background:var(--amber);color:var(--on-amber);padding:2px 8px}
.pbar select{flex:1;min-width:0;border:0;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;padding:7px 10px;color:var(--text);font:13px var(--mono);direction:ltr}
.flist{flex:1;min-height:0;overflow:auto;padding:4px 8px 20px}
.frow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);padding:11px 10px;border-radius:10px;cursor:pointer;text-align:left;direction:ltr;font:14px var(--mono)}
.frow:hover{background:var(--press)}
.frow.live{background:var(--s1);color:var(--amber)}
.frow .ext2{width:30px;flex:none;text-align:center;font:700 10px var(--mono);color:var(--dim)}
.frow>.ic{width:18px;height:18px;color:var(--dim);margin:0 6px}
.frow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow small{font:11px var(--mono);color:var(--dim)}
.fempty{color:var(--dim);font-size:13px;padding:16px 12px}
.editor{flex:1;min-height:0;display:flex;direction:ltr;background:var(--bg)}
.gutter{flex:none;padding:12px 8px 12px 10px;text-align:right;color:var(--dim);opacity:.6;font:var(--efs,13px)/1.6 var(--mono);user-select:none;overflow:hidden;white-space:pre;min-width:38px}
.code{flex:1;min-width:0;min-height:0;border:0;outline:none;resize:none;background:transparent;color:var(--text);font:var(--efs,13px)/1.6 var(--mono);padding:12px 14px 12px 6px;tab-size:4;white-space:pre;overflow:auto}
.code.wrap{white-space:pre-wrap;word-break:break-all}
.code[readonly]{opacity:.85}
.binary{margin:auto;display:grid;justify-items:center;gap:8px;padding:20px}
.binary img{max-width:100%;max-height:50vh;border-radius:10px;background:repeating-conic-gradient(var(--s2) 0 25%,var(--s1) 0 50%) 0 0/16px 16px}
.preview{flex:1;min-height:0;display:flex;flex-direction:column}
.pholder{flex:1;min-height:0;display:flex;justify-content:center;padding:10px;overflow:auto}
.pframe{border:0;background:#fff;width:100%;height:100%;border-radius:12px}
.pholder.phone .pframe{width:390px;max-width:100%;border-radius:22px;box-shadow:0 0 0 8px var(--s2),0 0 0 9px var(--line),0 24px 60px rgba(0,0,0,.45)}
.preview.full{position:fixed;inset:0;z-index:95;background:var(--bg)}
.preview.full .pholder{padding:0}.preview.full .pframe{border-radius:0;box-shadow:none;width:100%}
.perrs{padding:6px 12px;display:grid;gap:3px;max-height:84px;overflow:auto;background:var(--red-a);box-shadow:inset 0 1px 0 var(--line)}
.perr{font-size:12px;color:var(--red);display:flex;gap:6px;align-items:baseline;min-width:0}
.perr .ltr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcmd{display:flex;align-items:center;gap:8px;padding:6px 10px 10px;flex:none}
.pcmd input{flex:1;min-width:0;border:0;border-radius:22px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);padding:10px 16px;color:var(--text);outline:none;font-size:14px}
.pcmd input:focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.pcmd .cb{width:40px;height:40px}
.pmsg{margin:auto;padding:30px;text-align:center;color:var(--dim);white-space:pre-line;max-width:340px;font-size:14px}
.pmsg .ic{width:40px;height:40px;margin:0 auto 10px;color:var(--line)}
.buildp{flex:1;overflow:auto;padding:14px;display:grid;align-content:start;gap:12px}
.howto{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:12px 14px;font-size:14px}
.howto ol{margin:6px 0 0;padding-inline-start:20px;color:var(--dim)}

/* the desktop: the drawer stays open on the side; a project's files / preview next to its chat */
.panel{display:none}
@media (min-width:1000px){
  .drawer{position:relative;inset:auto;visibility:visible;pointer-events:auto;flex:none;width:300px;z-index:1}
  .drawer .scrim{display:none}
  .dpanel,[dir=rtl] .dpanel{position:absolute;inset-inline:0;width:auto;transform:none;box-shadow:inset -1px 0 0 var(--line);transition:none}
  [dir=rtl] .dpanel{box-shadow:inset 1px 0 0 var(--line)}
  .hdr .ib.menu{display:none}
  .dclose{display:none}
  .shell.split .dclose{display:inline-grid}
  .shell.with-panel .panel{display:flex;flex-direction:column;flex:none;width:min(46vw,760px);min-width:360px;background:var(--s1);box-shadow:inset 1px 0 0 var(--line);position:relative}
  [dir=rtl] .shell.with-panel .panel{box-shadow:inset -1px 0 0 var(--line)}
  .shell.with-panel.split .panel{width:min(64vw,1180px)}
  /* code + preview side by side: the drawer folds back into the ≡ menu, so the chat keeps its room */
  .shell.split .drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;width:auto}
  .shell.split .drawer.open{visibility:visible;pointer-events:auto}
  .shell.split .drawer .scrim{display:block}
  .shell.split .dpanel{width:360px;transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.45);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  [dir=rtl] .shell.split .dpanel{transform:translateX(100%)}
  .shell.split .drawer.open .dpanel{transform:none}
  .shell.split .hdr .ib.menu{display:inline-flex}
  .panel-tabs{display:flex;align-items:center;gap:4px;padding:6px 10px;min-height:56px;flex:none;box-shadow:inset 0 -1px 0 var(--line)}
  .panel-tabs button{border:0;background:transparent;color:var(--dim);border-radius:18px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .panel-tabs button .ic{width:16px;height:16px}
  .panel-tabs button[aria-selected=true]{background:var(--amber-soft);color:var(--amber)}
  .panel-tabs .grow{flex:1}
  .panel-body{flex:1;min-height:0;display:flex;flex-direction:column}
  .splitbox{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .splitbox>div{display:flex;flex-direction:column;min-width:0;min-height:0}
  .splitbox>div:first-child{box-shadow:inset -1px 0 0 var(--line)}
  [dir=rtl] .splitbox>div:first-child{box-shadow:inset 1px 0 0 var(--line)}
  .sheet .handle{display:none}
}
@media (max-width:999px){
  .sheet-bg{align-items:end;padding:0}
  .sheet{max-width:none;border-radius:22px 22px 0 0;max-height:88vh;padding-bottom:env(safe-area-inset-bottom);animation:slideup .26s cubic-bezier(.2,.8,.2,1)}
  .sheet .handle{display:block}
  .pholder{padding:8px}
  .pholder.phone .pframe{box-shadow:none;border-radius:12px;width:100%}
  .sheet-head{padding-top:6px}
  @keyframes slideup{from{transform:translateY(100%)}}
  .tiles{gap:10px}
}

/* ---------------------------------------------------------------- settings (ui/SettingsPage.kt) */
.set{flex:1;min-height:0;overflow:auto}
.set-in{max-width:640px;margin:0 auto;padding:4px 14px 40px}
.set-t{font-size:12px;font-weight:700;color:var(--amber);padding:0 6px;margin:16px 0 6px}
.set-card{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;overflow:hidden;margin-top:8px}
.set-t+.set-card{margin-top:0}
.srw{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;border:0;background:transparent;color:var(--text);padding:10px 14px 10px 16px;text-align:start;cursor:default;position:relative}
[dir=rtl] .srw{padding:10px 16px 10px 14px}
button.srw,label.srw{cursor:pointer}
button.srw:hover,label.srw:hover{background:var(--press)}
.srw+.srw::before,.srw+.sld::before,.sld+.srw::before,.sld+.sld::before{content:"";position:absolute;top:0;inset-inline:16px 0;height:1px;background:var(--line)}
.srw>.ic{width:22px;height:22px;color:var(--amber)}
.srw.red>.ic,.srw.red .st{color:var(--red)}
.srw .sx{flex:1;min-width:0;display:grid;gap:2px}
.srw .st{font-size:15px}
.srw .ss{font-size:12px;color:var(--dim);line-height:1.4}
.srw .sv{font-size:13px;color:var(--dim);max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srw .chev .ic{width:20px;height:20px;color:var(--dim)}
.sld{padding:12px 16px 8px;position:relative}
.sld .sh{display:flex;align-items:center}.sld .sh span{flex:1;font-size:15px}.sld .sh b{color:var(--amber);font-size:13px}
.sld .ss{font-size:12px;color:var(--dim);margin-top:2px}
.sld input{margin-top:8px;direction:ltr}
.set-note{font-size:12px;color:var(--dim);padding:0 8px;margin:8px 0 0;line-height:1.5}
.prof{display:flex;align-items:center;gap:14px;width:100%;border:0;text-align:start;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:14px 12px 14px 14px;margin-top:8px;color:var(--text);cursor:pointer}
.prof.paid{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-b)}
.prof .px{flex:1;min-width:0;display:grid;gap:1px}
.prof .px b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof .px small{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof .px small.pl{color:var(--dim)}.prof.paid .px small.pl{color:var(--amber);font-weight:700}
.apphead{display:flex;align-items:center;gap:14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:14px 16px;margin-top:16px}
.apphead .logo svg{width:34px;height:34px}
.apphead b{display:block;font-size:18px}.apphead small{color:var(--dim);font-size:12px}

/* ---------------------------------------------------------------- discover (ui/DiscoverPage.kt) */
.disc{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 14px 0;max-width:780px;width:100%;margin:0 auto}
.disc-q{display:flex;gap:8px;align-items:center}
.disc-q .cb{width:46px;height:46px;background:var(--grad);color:var(--on-grad);box-shadow:var(--glow)}
.disc-f{display:flex;gap:8px;overflow:auto;padding:10px 0 6px;scrollbar-width:none;flex:none}
.disc-r{flex:1;min-height:0;overflow:auto;padding-bottom:20px;display:grid;align-content:start;gap:10px}
.repo{display:grid;gap:5px;border:0;text-align:start;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:12px 14px;cursor:pointer;color:var(--text);width:100%}
.repo b{font:700 14px var(--mono);color:var(--amber);direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repo p{margin:0;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext;text-align:start}
.repo small{font-size:12px;color:var(--dim);direction:ltr;text-align:left}
.repo .got{color:var(--green);font-weight:700;font-size:12px}
.disc-st{text-align:center;color:var(--dim);font-size:13px;padding:8px}
.disc-st.err{color:var(--red)}
.issue{display:grid;gap:4px;border:0;text-align:start;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--text);width:100%;font-size:13px}
.issue small{color:var(--dim);font-size:11px;direction:ltr;text-align:left}

/* ---------------------------------------------------------------- sign-in (the app's own colours) */
.auth{position:fixed;inset:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;background:var(--s1);box-shadow:inset -1px 0 0 var(--line);isolation:isolate}
[dir=rtl] .auth-side{box-shadow:inset 1px 0 0 var(--line)}
.auth-side .zl{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--zellige);background-size:54px 31.18px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 50%,transparent 90%);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 50%,transparent 90%)}
.brand{position:relative;display:flex;align-items:center;gap:12px;font:700 24px var(--serif);color:var(--text);text-decoration:none}
.brand .logo{width:42px;height:42px;display:grid;place-items:center}
.brand .logo svg{width:42px;height:42px}
.brand small{font:500 12px var(--sans);color:var(--dim);margin-inline-start:2px}
.auth-pitch{position:relative;max-width:520px}
.auth-pitch h1{font:700 clamp(30px,3.4vw,44px)/1.25 var(--serif);margin:0 0 14px}
.auth-pitch h1 em{font-style:normal;color:var(--amber)}
.auth-pitch p{color:var(--dim);font-size:17px;margin:0 0 26px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.perks li{display:flex;gap:12px;align-items:flex-start}
.perks .pi{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--amber-soft);color:var(--amber)}
.perks .pi .ic,.perks .pi svg{width:19px;height:19px}
.perks b{display:block;font-size:15.5px}
.perks span{color:var(--dim);font-size:14px}
.auth-side .copy{position:relative;color:var(--dim);font-size:13px}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:420px}
.auth-card .mob-brand{display:none}
.auth-card h2{font:700 26px/1.3 var(--serif);margin:0 0 4px}
.auth-card .sub{color:var(--dim);margin:0 0 22px;font-size:15px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:4px;margin-bottom:22px}
.seg button{border:0;background:transparent;border-radius:12px;padding:10px;font-weight:700;color:var(--dim);cursor:pointer;min-height:44px}
.seg button[aria-selected=true]{background:var(--grad);color:var(--on-grad)}
.auth-form{display:grid;gap:16px}
.auth-form .btn{margin-top:4px}
.auth-note{margin-top:22px;padding:14px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);display:flex;gap:12px;color:var(--dim);font-size:14px}
.auth-note .ic,.auth-note svg{flex:none;width:22px;height:22px;color:var(--amber);margin-top:1px}
.auth-legal{font-size:12.5px;color:var(--dim);text-align:center;margin:0}
.auth-legal a{color:var(--dim)}
.auth-foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:13px;color:var(--dim)}
.auth-foot a{color:var(--dim);text-decoration:none}.auth-foot a:hover{color:var(--text)}
.auth-foot .lang-switch{color:var(--amber)}
.oauth{display:grid;gap:10px;margin:4px 0 6px}
.oauth-btn{justify-content:center;font-weight:700}
.or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px;margin:8px 0 4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.ts{display:flex;justify-content:center;min-height:65px;margin:4px 0 2px}
.ts[hidden]{display:none}
[dir=ltr] .field .eye{inset-inline-start:auto;inset-inline-end:4px}
[dir=ltr] .field .row .input[type=password],[dir=ltr] .field .row .input.pw{padding-inline-start:14px;padding-inline-end:48px}
@media (max-width:900px){
  .auth{grid-template-columns:1fr;align-content:start}
  .auth-side{display:none}
  .auth-main{justify-content:flex-start;padding:28px 16px 32px}
  .auth-card .mob-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin:6px 0 24px}
  .auth-card .mob-brand p{color:var(--dim);margin:10px 0 0;font-size:15px;max-width:320px}
  .auth-card h2{font-size:22px}
}

/* ---------------------------------------------------------------- plans, models, account (sheets) */
.models{display:grid;gap:6px}
.model-row{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);border-radius:14px;padding:10px 12px;cursor:pointer;min-height:54px}
.model-row.on{box-shadow:inset 0 0 0 1.5px var(--amber);background:var(--amber-soft)}
.model-row.locked{opacity:.7}
.m-main{flex:1;min-width:0;display:grid}
.m-main b{font-weight:700;font-size:15px}
.m-main small{color:var(--dim);font-size:12.5px}
.model-row .chip{padding:3px 9px;font-size:12px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:4px 0}
.plan{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column}
.plan.hot{box-shadow:inset 0 0 0 1.5px var(--amber)}
.plan.mine{background:var(--amber-soft)}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan-head b{font:700 18px var(--serif)}
.plan ul{list-style:none;padding:0;margin:10px 0 14px;display:grid;align-content:start;gap:5px;color:var(--dim);font-size:14px;flex:1}
.plan li:before{content:"✓ ";color:var(--amber)}
.plan li.no{opacity:.6}.plan li.no:before{content:"✕ ";color:var(--dim)}
.plan-buy{display:grid;gap:8px}
.sheet.acc{max-width:580px}
.account{display:grid;gap:12px}
.acc-hero{display:flex;gap:16px;align-items:center;padding:6px 2px 4px}
.ah-text{display:grid;gap:4px;min-width:0}
.ah-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ah-name b{font:700 20px var(--serif)}
.ah-mail{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ah-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ah-meta .chip{padding:3px 10px;font-size:12px}
.plan-pill .seal{width:15px;height:15px}
.acc-card{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:14px}
.acc-card h4{margin:0 0 10px;font-size:15px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-head h4{margin:0}
.plan-card .pc-head{display:flex;align-items:center;gap:12px}
.plan-card .pc-head>div{display:grid;flex:1;min-width:0}
.plan-card .pc-head b{font:700 18px var(--serif)}
.plan-card p{margin:10px 0 0}
.plan-card .row-btns{margin-top:12px}
.plan-card.t-pro,.plan-card.t-max{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber-b)}
.meters{display:grid;gap:12px}
.meter{display:grid;gap:5px}
.m-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.m-top b{font-weight:700;font-size:13px}
.m-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.m-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .5s ease}
.meter.full .m-bar i{background:var(--red)}
.meter.unl .m-bar i{background:repeating-linear-gradient(90deg,var(--amber-b) 0 6px,transparent 6px 10px)}
.meter small{font-size:12px}
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.stat{display:grid;justify-items:center;gap:2px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.stat b{font:700 20px var(--serif);color:var(--amber)}
.stat small{font-size:12px;color:var(--dim)}
.acc-projects{display:grid;gap:4px;max-height:300px;overflow:auto;margin:0 -6px}
.prow{display:flex;align-items:center;gap:8px;padding-inline-end:6px;border-radius:12px}
.prow:hover{background:var(--press)}
.pr-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:8px 6px;cursor:pointer;text-align:start;font:inherit}
.pr-text{display:grid;min-width:0}
.pr-text b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-text small{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .chip{flex:none;padding:3px 10px;font-size:12px}
.pi-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);color:var(--amber);flex:none}
.pi-icon .ic{width:17px;height:17px}
.acc-set{display:grid;gap:2px;padding:6px}
@media (max-width:520px){.acc-hero{flex-direction:column;text-align:center}.ah-name,.ah-meta{justify-content:center}.ah-text{justify-items:center}}
/* the account picture: initials on a colour of their own, a ring and the plan's seal */
.av{--av:32px;--av-gap:var(--bg);position:relative;display:inline-block;width:var(--av);height:var(--av);flex:none;border-radius:50%;padding:2px;background:var(--line)}
.av-in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:2px solid var(--av-gap);color:#fff;font-weight:700;font-size:calc(var(--av) * .38);line-height:1;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.av.t-pro{background:linear-gradient(135deg,#00F2FE,#8A2BE2)}
.av.t-max{background:conic-gradient(from 210deg,#E6FEFF,#00F2FE,#8A2BE2,#00F2FE,#E6FEFF);box-shadow:0 0 0 2px rgba(0,242,254,.16),0 0 18px rgba(0,242,254,.38)}
.av-badge{position:absolute;inset-inline-end:-6%;bottom:-6%;width:44%;height:44%;min-width:14px;min-height:14px}
.seal{display:inline-block;width:16px;height:16px;flex:none;line-height:0}
.seal svg{width:100%;height:100%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.seal.big{width:34px;height:34px}
.av-badge.seal.big{width:30%;height:30%}
.sheet .av{--av-gap:var(--s1)}.prof .av{--av-gap:var(--s1)}.prof.paid .av{--av-gap:var(--amber-soft)}
.ad{width:100%;margin-top:18px;border:1px dashed var(--line);border-radius:14px;padding:8px;min-height:60px}
.ad small{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}
.ad small a{color:var(--dim)}
.sync-dot{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--dim);font-size:11px;margin-inline-start:8px}
.sync-dot i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.sync-dot.ok i{background:var(--green);box-shadow:0 0 0 3px var(--green-a)}
.sync-dot.busy i{background:var(--amber);animation:pulse2 1s ease-in-out infinite}
.sync-dot.error i{background:var(--red)}
@keyframes pulse2{50%{opacity:.35}}

/* the timeline of a turn (WorkViews.showSummary): a rail with zellige diamonds, the step, its path, its icon */
.tl{display:grid}
.tl-row{display:flex;align-items:flex-start;gap:6px;animation:popin .3s both}
.rail{position:relative;width:22px;align-self:stretch;flex:none}
.rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.tl-row.first .rail::before{top:15px}.tl-row.last .rail::before{bottom:calc(100% - 15px)}.tl-row.first.last .rail::before{display:none}
.rail i{position:absolute;left:50%;top:15px;width:7px;height:7px;background:var(--dim);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 3px var(--s1)}
.tl-row.failed .rail i{background:var(--red)}.tl-row.live .rail i{background:var(--amber)}
.tl-b{flex:1;min-width:0;padding:6px 4px 14px 6px;display:grid;gap:3px}
.tl-head{font-size:15px;unicode-bidi:plaintext;text-align:start}
.tl-row.failed .tl-head{color:var(--red)}
.tl-det{font:12.5px var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
[dir=rtl] .tl-det{text-align:right}
.tl-now{color:var(--amber);font-size:12px}
.tl-small{font-size:12.5px;color:var(--dim)}
.tl-th{margin:2px 0 0;font:italic 14px/1.5 var(--serif);color:var(--dim);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;cursor:pointer}
.tl-th.all{-webkit-line-clamp:unset;display:block}
.tl-note{margin:0;font:15.5px/1.5 var(--serif)}
.tl-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);margin-top:6px}
.tl-ic .ic{width:18px;height:18px}
.tl-row.failed .tl-ic{color:var(--red)}
.chatpage.dropping{box-shadow:inset 0 0 0 2px var(--amber);border-radius:12px}
/* the design board in the preview (themes × screens, like the app) */
.board{display:grid;gap:6px;padding:8px 10px;box-shadow:inset 0 -1px 0 var(--line);background:var(--s1);flex:none}
.board-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.board-h b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-h .chip{padding:4px 10px;font-size:12px}
.board-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.board-row::-webkit-scrollbar{display:none}
.bchip{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:12px;padding:6px 10px;background:var(--s2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:12.5px}
.bchip b{font-weight:800}
.bchip span{color:var(--dim);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bchip.sm{padding:4px 9px;font-size:12px}
.bchip.on{background:var(--amber-soft);box-shadow:inset 0 0 0 1px var(--amber);color:var(--amber)}
.bchip.on span{color:var(--amber)}
.bchip .dots{display:inline-flex;gap:2px}
.bchip .dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
/* the points: the plan's month, the wallet, the top-ups; the sheet when they run out */
.credits-card .cr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 8px}
.credits-card .cr-row b{display:block;font-size:20px;margin-top:2px}
.credits-card .cr-row b.gold{color:var(--amber)}
.meter-bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.meter-bar i{display:block;height:100%;background:var(--grad);border-radius:5px}
.cr-t{display:block;margin:10px 0 6px}
.packs{display:grid;gap:6px}
.pack{display:flex;align-items:center;justify-content:center;gap:4px}
.upsell{display:grid;gap:10px}
.up-hero{display:flex;gap:12px;align-items:flex-start}
.up-hero .star{width:26px;height:26px;flex:none;margin-top:2px}
.up-hero b{font:700 17px/1.4 var(--serif)}
.up-hero p{margin:4px 0 0}
.up-opt{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:12px;display:grid;gap:8px}
.up-opt p{margin:0}
.up-h{display:flex;align-items:center;gap:8px;justify-content:space-between}
/* the own domains */
.domains-card .dom{display:grid;gap:6px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--line)}
.dom-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dom-h a{color:var(--text);font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.chip.ok{color:var(--green)}.chip.warn{color:var(--amber)}
.dns{display:grid;gap:4px}
.dns-r{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.3fr) auto;gap:6px;align-items:center;background:var(--s1);border-radius:10px;padding:4px 6px 4px 10px;font-size:12px}
.dns-r code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--mono)}
.dns-r code.v{color:var(--amber)}
.dom-add{display:grid;gap:6px;margin-top:10px}

/* the templates gallery (v0.38, js/templates.js) */
.tpl-row{width:100%;margin-top:22px;text-align:start}
.tpl-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.tpl-head b{font-size:15px}
.linkbtn{border:0;background:none;color:var(--amber);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:4px}
.tpl-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tpl{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;color:var(--text);text-align:start;cursor:pointer;scroll-snap-align:start;font:inherit}
.tpl-img{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line)}
.tpl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tpl:hover .tpl-img img{transform:scale(1.04)}
.tpl-kind{position:absolute;top:8px;inset-inline-start:8px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;background:rgba(10,12,16,.75);color:#fff}
.tpl b{font-size:13.5px;line-height:1.4}
.tpl small{font-size:12.5px;color:var(--dim);line-height:1.5}
.tpl:focus-visible .tpl-img{outline:2px solid var(--amber);outline-offset:2px}
.tpl-filters{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tpl-big{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--s2)}
.tpl-big img{display:block;width:100%;height:auto}
.tpl-one .sheet-body>p{margin:10px 0}
@media (max-width:640px){.tpl-grid{grid-template-columns:1fr 1fr;gap:10px}}

/* v0.39: the hexagon of the brand in the small pieces: the divider of the drawer, the bullets of the timeline */
.hex-sep{display:flex;align-items:center;gap:10px;color:var(--dim);margin:10px 0}
.hex-sep::before,.hex-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.hex-sep i{width:10px;height:11px;flex:none;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.8}