/* ZEKA R18 SOURCE: style.css */ /* ZEKA Studio Portable — «شن و مرکب» One stylesheet. Mobile-first, right-to-left-first. Every control in this file is built from the same four numbers: height 30 / 36 / 44, radius 10 / 16 / 24 / pill, padding 10 / 14 / 20, and one type scale. Nothing has a size of its own. */ /* ───────────────────────────── faces ───────────────────────────── */ /* Azo Sans is a licensed face and is not redistributed here. If it is installed on the machine it is used; otherwise Geist — the face the reference layout itself is set in — carries the Latin, and Vazirmatn the Persian. To add the real files, drop azo-sans*.woff2 in assets/fonts and add a url() to the three rules below. */ @font-face{font-family:'Azo Sans';src:local('Azo Sans'),local('AzoSans-Regular');font-weight:400;font-display:swap} @font-face{font-family:'Azo Sans';src:local('Azo Sans Medium'),local('AzoSans-Medium');font-weight:500 600;font-display:swap} @font-face{font-family:'Azo Sans';src:local('Azo Sans Bold'),local('AzoSans-Bold');font-weight:700;font-display:swap} /* This portable ZIP contains NO binary fonts. Prefer locally installed OFL faces when present; system fallbacks work offline and make no 404 requests. Do not imply that Geist, Instrument Serif or Vazirmatn are bundled. */ @font-face{font-family:'Geist';font-weight:100 900;font-display:swap;src:local('Geist'),local('Geist Regular')} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:local('Instrument Serif Italic')} @font-face{font-family:'Vazirmatn';font-weight:100 900;font-display:swap;src:local('Vazirmatn'),local('Vazirmatn Regular')} /* ───────────────────────────── tokens ───────────────────────────── */ :root{ color-scheme:light; --canvas:#EBE9E5; --surface:#F4F2EE; --surface-2:#E3E0DA; --surface-3:#D9D5CD; --field:#FAF9F7; --ink:#151514; --ink-2:#3A3937; --ink-3:#56544F; --ink-4:#6B685F; --line:#DAD6CE; --line-2:#C6C1B7; --line-ctl:#8B867D; --brand:#C94718; --brand-2:#A93A12; --brand-soft:#F6E4DA; --brand-line:#EBC4B0; --key:#151514; --key-2:#2E2D2A; --key-on:#F4F2EE; --sand:#C94718; --saffron:#B63F17; --saffron-soft:#F6E4DA; --garnet:#B3202A; --garnet-soft:#F7DEDE; --plum:#C94718; --rose:#C94718; --ok:#171717; --grain:.05; --shadow-1:0 1px 2px rgba(21,21,20,.05); --shadow-2:0 2px 6px -3px rgba(21,21,20,.14),0 12px 28px -18px rgba(21,21,20,.26); --shadow-pop:0 8px 14px -8px rgba(21,21,20,.18),0 28px 56px -28px rgba(21,21,20,.34); /* the four numbers everything is built from */ --h-sm:30px; --h:36px; --h-lg:44px; --r-sm:10px; --r:16px; --r-lg:24px; --pill:999px; --gap:10px; --pad:16px; --pad-lg:24px; --rail:252px; --rail-min:64px; --measure:60ch; --page:900px; --sans:'Azo Sans','Geist','Vazirmatn',system-ui,sans-serif; --display:'Azo Sans','Geist','Vazirmatn',system-ui,sans-serif; --accent-face:'Instrument Serif','Vazirmatn',Georgia,serif; --latin:'Azo Sans','Geist',system-ui,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --ease:cubic-bezier(.2,0,0,1); } :root[data-theme=dark]{ color-scheme:dark; --canvas:#111110; --surface:#1A1A18; --surface-2:#232220; --surface-3:#2C2B27; --field:#1C1B19; --ink:#F1EFEA; --ink-2:#D3D0C9; --ink-3:#A5A29A; --ink-4:#8B877E; --line:#282723; --line-2:#3A3833; --line-ctl:#6B675F; --brand:#F85F2E; --brand-2:#FF8F66; --brand-soft:#2A1B14; --brand-line:#4A2C1E; --key:#F1EFEA; --key-2:#FFFFFF; --key-on:#151514; --sand:#F85F2E; --saffron:#FF8F66; --saffron-soft:#2A1B14; --garnet:#FF5A62; --garnet-soft:#2E1719; --plum:#F85F2E; --rose:#F85F2E; --ok:#F2ECE2; --grain:.03; --shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 2px 6px -3px rgba(0,0,0,.5),0 14px 32px -20px rgba(0,0,0,.8); --shadow-pop:0 10px 18px -10px rgba(0,0,0,.6),0 32px 64px -32px rgba(0,0,0,.9); } /* ───────────────────────────── base ───────────────────────────── */ *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow:hidden} body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; opacity:var(--grain);mix-blend-mode:multiply;background-size:140px 140px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E")} :root[data-theme=dark] body::before{mix-blend-mode:screen} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0;color:inherit; -webkit-tap-highlight-color:transparent} a{color:inherit;text-decoration:none} svg{flex:none} h1,h2,h3{margin:0;font-weight:500;line-height:1.2;letter-spacing:-.02em} p{margin:0} code,.ltr,[dir=ltr]{font-family:var(--mono);font-size:.92em;direction:ltr;unicode-bidi:isolate} b,strong{font-weight:600} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)} ::selection{background:var(--brand-soft);color:var(--ink)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .grow{flex:1;min-width:0} .note{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink-3)} .note b{color:var(--ink-2);font-weight:500} .faint{color:var(--ink-4);font-weight:400} .eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--latin); font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)} .eyebrow::before{content:'';width:30px;height:1px;background:var(--line-2)} /* ───────────────────────────── one control, four sizes ───────────────────────────── */ input[type=text],input[type=number],input[type=password],input[type=search],select,textarea{ width:100%;min-height:var(--h);padding:0 14px;background:var(--field); border:1px solid var(--line-ctl);border-radius:var(--r-sm);color:var(--ink); font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s} textarea{padding:10px 14px;line-height:1.7;resize:vertical} input::placeholder,textarea::placeholder{color:var(--ink-4)} input:hover,select:hover,textarea:hover{border-color:var(--ink-4)} input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} select{appearance:none;padding-inline-end:32px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%), linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 18px) 16px,calc(100% - 13px) 16px; background-size:5px 5px;background-repeat:no-repeat} [dir=rtl] select{background-position:15px 16px,20px 16px} input[type=search]{-webkit-appearance:none} label.field{display:block;margin-bottom:14px} label.field>span{display:block;margin-bottom:7px;font-size:12.5px;color:var(--ink-3)} label.check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:13.5px; color:var(--ink-2);line-height:1.6;cursor:pointer} label.check input{appearance:none;flex:none;width:18px;height:18px;min-height:0;margin:1px 0 0; padding:0;border:1px solid var(--line-ctl);border-radius:6px;background:var(--field)} label.check input:checked{background:var(--key);border-color:var(--key); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:13px;background-position:center;background-repeat:no-repeat} :root[data-theme=dark] label.check input:checked{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23151514' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .pair{display:grid;gap:0 12px;grid-template-columns:1fr 1fr} .row{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;margin-top:12px} .row:first-child{margin-top:0} /* every button, chip and pill: the same height, the same radius, the same text */ .btn,.chip,.pill,.chipstart,.seg button{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:var(--h);padding:0 16px;flex:none;border-radius:var(--pill); border:1px solid var(--line-2);background:transparent;color:var(--ink-2); font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap; transition:background .15s var(--ease),border-color .15s,color .15s,transform .08s} .btn:hover,.chip:hover,.pill:hover,.chipstart:hover{background:var(--surface-2); border-color:var(--line-ctl);color:var(--ink)} .btn:active,.chip:active,.pill:active{transform:translateY(1px)} .btn:disabled{opacity:.4;cursor:not-allowed;transform:none} .btn.small,.pill.small{height:var(--h-sm);padding:0 12px;font-size:12.5px} .btn.key{background:var(--key);border-color:var(--key);color:var(--key-on);font-weight:500} .btn.key:hover{background:var(--key-2);border-color:var(--key-2);color:var(--key-on)} .btn.stop{border-color:var(--garnet);color:var(--garnet)} .btn.stop:hover{background:var(--garnet-soft);border-color:var(--garnet);color:var(--garnet)} .btn.ghost{border-color:transparent} .btn.ghost:hover{background:var(--surface-2);border-color:transparent} .icon-btn{display:inline-grid;place-items:center;width:var(--h);height:var(--h);flex:none; border-radius:var(--pill);border:1px solid transparent;color:var(--ink-3); transition:background .15s,color .15s} .icon-btn:hover{background:var(--surface-2);color:var(--ink)} .tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px; border-radius:var(--pill);border:1px solid var(--line);background:transparent; color:var(--ink-3);font-size:11.5px;line-height:1;white-space:nowrap; max-width:100%;overflow:hidden;text-overflow:ellipsis} .tag.on{border-color:var(--brand-line);color:var(--brand)} .tag.warn{border-color:color-mix(in srgb,var(--saffron) 45%,transparent);color:var(--saffron)} .seg{display:inline-flex;gap:4px;padding:0;border:0;background:none} .seg button{height:var(--h-sm);min-width:var(--h-sm);padding:0 10px;font-size:12px; font-family:var(--latin);border-color:transparent;color:var(--ink-4)} .seg button:hover{background:var(--surface-2);color:var(--ink-2)} .seg button[aria-pressed=true]{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)} /* ── chip + popover: an option never opens a box of its own ── */ .chiprow{display:flex;align-items:center;gap:8px;min-width:0} .popwrap{position:relative;display:inline-flex;flex:none} .chip .lbl{color:var(--ink-4);font-weight:400} .chip .val{font-family:var(--latin)} .chip .val:not(:empty){color:var(--ink)} .chip[aria-expanded=true]{background:var(--surface-2);border-color:var(--line-ctl);color:var(--ink)} .chip .caret{width:11px;height:11px;opacity:.6;transition:transform .18s var(--ease)} .chip[aria-expanded=true] .caret{transform:rotate(180deg)} .chip.toggle{cursor:pointer;gap:8px} .chip.toggle input{appearance:none;width:8px;height:8px;min-height:0;margin:0;padding:0; border:1px solid var(--line-ctl);border-radius:50%;background:transparent} .chip.toggle.on{border-color:var(--line-ctl);color:var(--ink)} .chip.toggle.on input{background:var(--brand);border-color:var(--brand)} .pop{position:fixed;z-index:70;width:min(320px,calc(100vw - 20px)); max-height:min(68dvh,460px);overflow-y:auto;padding:var(--pad); border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface); box-shadow:var(--shadow-pop);animation:rise .16s var(--ease)} .pop>h4{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-4);font-weight:500;font-family:var(--latin)} .pop label.field:last-child{margin-bottom:0} .pop .models{max-height:44dvh} @keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .note.nochip{margin:0;font-size:12px;color:var(--ink-4)} /* ───────────────────────────── shell ───────────────────────────── */ .shell{position:relative;z-index:1;height:100dvh;display:grid;grid-template-columns:100%;min-height:0} .scrim{position:fixed;inset:0;z-index:55;display:none;background:color-mix(in srgb,var(--ink) 45%,transparent)} .rail{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:min(84vw,286px); display:flex;flex-direction:column;gap:6px;overflow-y:auto; padding:20px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--surface);border-inline-end:1px solid var(--line); transform:translateX(-100%);transition:transform .24s var(--ease)} [dir=rtl] .rail{transform:translateX(100%)} body.open .rail{transform:none;box-shadow:var(--shadow-pop)} .rail>*{flex:none} .brandline{display:flex;align-items:center;gap:10px;height:var(--h-lg);margin-bottom:14px} .brandline .z{position:relative;display:grid;place-items:center;width:36px;height:36px; flex:none;border-radius:11px;background:var(--key);color:var(--key-on)} .brandline .z svg{width:20px;height:20px} .brandline .z::after{content:'';position:absolute;inset-block-start:-3px;inset-inline-end:-3px; width:8px;height:8px;border-radius:50%;background:var(--sand);border:2px solid var(--surface)} .brandline .txt{flex:1;min-width:0} .brandline b{display:block;font-family:var(--latin);font-size:15px;font-weight:600; letter-spacing:.02em;line-height:1.2} .brandline span{display:block;font-size:11.5px;color:var(--ink-4);line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-toggle{display:none} .newchat{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; height:var(--h-lg);border-radius:var(--pill);background:var(--key);color:var(--key-on); font-size:14px;font-weight:500;transition:background .15s var(--ease)} .newchat:hover{background:var(--key-2)} .rail-label{font-family:var(--latin);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-4);padding:20px 12px 6px} .nav{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:var(--h-lg); padding:0 12px;border-radius:var(--r-sm);text-align:start;color:var(--ink-3); font-size:14.5px;transition:background .15s,color .15s} .nav svg{opacity:.7;width:18px;height:18px} .nav:hover{background:var(--surface-2);color:var(--ink)} .nav.on{background:var(--surface-2);color:var(--ink)} .nav.on svg{opacity:1;color:var(--brand)} .nav .tip{width:5px;height:5px;border-radius:50%;margin-inline-start:auto; background:var(--brand);opacity:0} .nav.on .tip{opacity:1} .chats-search{margin:4px 0 2px} .threads-list{display:flex;flex-direction:column;gap:2px} .tgroup{font-size:10.5px;letter-spacing:.1em;color:var(--ink-4);padding:14px 12px 4px} .thread{display:flex;align-items:center;gap:6px;height:var(--h);padding:0 12px; border-radius:var(--r-sm);cursor:pointer;transition:background .15s} .thread:hover{background:var(--surface-2)} .thread.on{background:var(--surface-2)} .thread b{flex:1;min-width:0;font-size:13.5px;font-weight:400;color:var(--ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thread.on b{color:var(--ink);font-weight:500} .tact{display:flex;gap:2px;opacity:0;transition:opacity .15s} .thread:hover .tact,.thread.on .tact{opacity:1} .mini{display:grid;place-items:center;width:26px;height:26px;border-radius:8px; color:var(--ink-4);transition:background .15s,color .15s} .mini:hover{background:var(--surface-3);color:var(--ink)} .prefs{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px} .rail-card{display:flex;align-items:center;gap:9px;height:var(--h);margin-top:10px; padding:0 12px;border-radius:var(--pill);border:1px solid var(--line); font-size:12.5px;color:var(--ink-3);cursor:pointer;transition:background .15s} .rail-card:hover{background:var(--surface-2)} .rail-card .k{display:flex;align-items:center;gap:9px;min-width:0} .rail-card .k i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--garnet)} .rail-card.ok .k i{background:var(--ok)} .rail-card .k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ───────────────────────────── views ───────────────────────────── */ main{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column} .view{display:none;flex-direction:column;height:100%;min-height:0} .view.on{display:flex} .head{flex:none;display:flex;align-items:center;gap:12px; padding:14px 18px;min-height:64px} .head h1{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em} .head h1 em{font-family:var(--accent-face);font-style:italic;font-weight:400; font-size:1.08em;color:var(--brand);letter-spacing:0} .head[data-tone=image] h1 em{color:var(--saffron)} .head[data-tone=video] h1 em{color:var(--rose)} .head[data-tone=music] h1 em{color:var(--plum)} .head p{display:none} .head .grow{min-width:0} .burger{display:grid;place-items:center;width:var(--h);height:var(--h);flex:none; border-radius:var(--pill);border:1px solid var(--line-2);color:var(--ink-2)} .burger:hover{background:var(--surface-2)} .body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:4px 18px calc(32px + env(safe-area-inset-bottom))} .pane{display:grid;gap:16px} .panel{position:relative;margin-bottom:16px;padding:var(--pad);border:1px solid var(--line); border-radius:var(--r);background:var(--surface)} .panel>h3{margin-bottom:4px;font-size:15px;font-weight:500;letter-spacing:-.01em} .head-row{display:flex;align-items:center;gap:12px;margin-bottom:8px} .head-row h3{flex:1;min-width:0;font-size:15px} .empty{padding:32px 20px;text-align:center;color:var(--ink-3)} .empty b{display:block;margin-bottom:6px;font-size:15px;font-weight:500;color:var(--ink)} .empty p{max-width:44ch;margin:0 auto;font-size:13px} .stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:16px} .stat{padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .stat b{display:block;font-family:var(--latin);font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.3} .stat span{display:block;font-size:11.5px;color:var(--ink-4)} .toolbar{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center;margin-bottom:16px} .toolbar input,.toolbar select{width:auto;flex:1 1 160px;min-width:0} .twoup{display:grid;gap:14px} .pre{margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface-2);color:var(--ink-2);font-family:var(--mono);font-size:12px; line-height:1.7;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto} /* ───────────────────────────── model picker ───────────────────────────── */ .picker{position:absolute;z-index:70;inset-inline:0;bottom:calc(100% + 10px); max-width:420px;padding:var(--pad);border:1px solid var(--line-2);border-radius:var(--r); background:var(--surface);box-shadow:var(--shadow-pop);animation:rise .16s var(--ease)} .families{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none} .families::-webkit-scrollbar{display:none} .fam{display:flex;flex-direction:column;justify-content:center;flex:none;height:var(--h-lg); padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);text-align:start} .fam:hover{border-color:var(--line-ctl)} .fam b{font-family:var(--latin);font-size:12.5px;font-weight:500;line-height:1.3} .fam small{font-size:10.5px;color:var(--ink-4);white-space:nowrap} .fam.on{background:var(--surface-2);border-color:var(--line-ctl)} .models{display:flex;flex-direction:column;gap:2px;max-height:40dvh;overflow-y:auto;margin-top:8px} .model{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--h-lg); padding:8px 12px;border-radius:var(--r-sm);border:1px solid transparent;text-align:start} button.model:hover{background:var(--surface-2)} .model.on{background:var(--surface-2);border-color:var(--line-2)} .model.off{opacity:.45} .model .what{flex:1;min-width:0} .model .what b{display:block;font-family:var(--latin);font-size:13.5px;font-weight:500; line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .model .what code{display:block;font-size:10.5px;color:var(--ink-4); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ───────────────────────────── chat ───────────────────────────── */ .stream{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto; display:flex;flex-direction:column;gap:22px;padding:8px 18px 4px;overscroll-behavior:contain} .view.is-empty .stream{justify-content:center;align-items:center;padding-bottom:12vh} .hero{padding:0 0 4px} .hero.hero-minimal{display:flex;justify-content:center;align-items:center;width:100%;text-align:center} .hero .mark{display:none} .hero h2{font-family:var(--display);font-size:clamp(34px,6vw,72px);font-weight:600; line-height:1.04;letter-spacing:-.04em;max-width:none;text-align:center} .hero .two{position:relative;display:inline-block;white-space:nowrap; font-family:var(--accent-face);font-style:italic;font-weight:400;font-size:1.06em; letter-spacing:-.01em} .hero .scribble{display:none} .hero .eyebrow{margin-bottom:18px} .paths{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .chipstart{color:var(--ink-3)} .chipstart svg{width:15px;height:15px;opacity:.65} .msg{display:flex;flex-direction:column;max-width:100%} .msg.me{align-items:flex-end} .msg.ai{align-items:flex-start} .who{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-family:var(--latin); font-size:11px;letter-spacing:.06em;color:var(--ink-4)} .who .orb{width:6px;height:6px;border-radius:50%;background:var(--brand)} .bubble{position:relative;max-width:min(100%,var(--measure));line-height:1.75;word-break:break-word} .msg.me .bubble{padding:12px 18px;border-radius:var(--r-lg);border-end-end-radius:8px; background:var(--surface-2)} .bubble>b.h{display:block;margin:14px 0 4px;font-size:16px;font-weight:600} .bubble>b.h:first-child{margin-top:0} .bubble .li{display:block;padding-inline-start:18px;position:relative} .bubble .li::before{content:'';position:absolute;inset-inline-start:5px;top:.8em; width:4px;height:4px;border-radius:50%;background:var(--ink-4)} .bubble .li[data-n]::before{content:attr(data-n) '.';position:absolute;inset-inline-start:0; top:0;width:auto;height:auto;background:none;color:var(--ink-4);font-family:var(--latin);font-size:12.5px} .bubble code{padding:2px 6px;border-radius:6px;background:var(--surface-2);font-size:12.5px} .bubble .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .bubble .meta{margin-top:10px;font-size:11.5px;color:var(--ink-4);font-family:var(--latin)} .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:0;max-height:0;overflow:hidden;opacity:0; transition:opacity .15s var(--ease),max-height .15s var(--ease),margin-top .15s} .msg:hover .acts,.msg:focus-within .acts{opacity:1;max-height:40px;margin-top:10px} .acts button{height:var(--h-sm);padding:0 12px;border-radius:var(--pill); border:1px solid var(--line);font-size:12px;color:var(--ink-3)} .acts button:hover{background:var(--surface-2);color:var(--ink)} .warn{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--garnet) 40%,transparent); background:var(--garnet-soft);color:var(--garnet);font-size:13px} .codeblock{margin:12px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .codehead{display:flex;align-items:center;justify-content:space-between;gap:10px; height:var(--h);padding:0 14px;border-bottom:1px solid var(--line); background:var(--surface-2);font-family:var(--latin);font-size:11px; letter-spacing:.08em;color:var(--ink-4)} .copycode{height:24px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line-2); font-size:11.5px;color:var(--ink-2)} .copycode:hover{background:var(--surface)} .codeacts{display:inline-flex;gap:6px} .codeblock .pre{border:0;border-radius:0;max-height:380px} /* ───────────────────────────── composer ───────────────────────────── */ .composer-wrap{position:relative;z-index:1;flex:none; padding:14px 18px calc(18px + env(safe-area-inset-bottom))} .composer{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-2); transition:border-color .16s var(--ease),box-shadow .16s} .composer:focus-within{border-color:var(--ink-4)} .composer.dropping{border-color:var(--sand);border-style:dashed} .composer textarea{width:100%;min-height:78px;max-height:min(42vh,260px); padding:16px 18px 2px;border:0;background:transparent;font-size:15.5px;line-height:1.6; resize:none;overflow-y:auto} .composer textarea:focus{box-shadow:none} .attach-row{display:flex;gap:10px;overflow-x:auto;padding:14px 16px 0;scrollbar-width:none} .attach-row:empty{display:none} .attach{position:relative;flex:none;width:120px;padding:10px 12px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--surface-2)} .attach b{display:block;font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .attach small{display:block;font-size:10.5px;color:var(--ink-4);font-family:var(--latin)} .attach .ext{display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 6px; margin-bottom:4px;border-radius:6px;background:var(--key);color:var(--key-on); font-family:var(--latin);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .attach.pic{width:72px;height:72px;padding:0;overflow:hidden} .attach.pic img{width:100%;height:100%;object-fit:cover;display:block} .attach.pic b,.attach.pic small{display:none} .attach>button{position:absolute;inset-block-start:-7px;inset-inline-end:-7px; display:grid;place-items:center;width:22px;height:22px;border-radius:50%; border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);font-size:13px} .attach>button:hover{background:var(--garnet);border-color:var(--garnet);color:#fff} .bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px 12px} .bar .grow{flex:1 1 0} .tool{display:grid;place-items:center;width:var(--h);height:var(--h);flex:none; border-radius:var(--pill);border:1px solid var(--line-2);color:var(--ink-3)} .tool:hover{background:var(--surface-2);color:var(--ink)} .pill code{font-family:var(--latin);font-size:13px;color:inherit} .pill i{width:6px;height:6px;border-radius:50%;background:var(--brand)} .pill.on{border-color:var(--line-ctl);color:var(--ink)} .send{display:grid;place-items:center;width:var(--h);height:var(--h);flex:none; border-radius:50%;background:var(--key);color:var(--key-on); transition:background .15s,transform .08s} .send:hover{background:var(--key-2)} .send:active{transform:translateY(1px)} .send:disabled{opacity:.35;cursor:not-allowed} .foot,.home-cards{display:none} /* ───────────────────────────── studio ───────────────────────────── */ .studio{flex:1;min-height:0;display:flex;flex-direction:column} .results{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; display:flex;flex-direction:column;container-type:size;padding:8px 18px 4px} .results>div:empty{display:none} .results>div:has(.empty){flex:1;display:flex;flex-direction:column;justify-content:center} .studio .composer textarea{min-height:62px} .refbox{margin:14px 16px 0;padding:12px 14px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--surface-2)} .refbox.droppable{border-style:dashed} .refbox.dropping{border-color:var(--sand)} .refhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .refhead span:first-child{font-size:13px;font-weight:500} .refhead .note{flex:1;min-width:150px;margin:0;font-size:11.5px;color:var(--ink-4); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .refbox .row{gap:8px;margin-top:10px} .ref{display:inline-flex;align-items:center;gap:8px;height:var(--h);padding:0 10px; border-radius:var(--pill);border:1px solid var(--line-2);font-size:12px;max-width:100%} .ref img{width:24px;height:24px;border-radius:6px;object-fit:cover} .ref .refn{display:grid;place-items:center;width:18px;height:18px;border-radius:50%; background:var(--key);color:var(--key-on);font-family:var(--latin);font-size:10px; font-style:normal;font-weight:600} .ref .reficon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px; background:var(--surface-3);color:var(--ink-3);font-size:11px} .ref span{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ref small{color:var(--ink-4);font-family:var(--latin);font-size:10.5px} .ref button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%; color:var(--ink-4);font-size:12px} .ref button:hover{background:var(--surface-2);color:var(--ink)} .job{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin-bottom:24px} .jobprompt{align-self:flex-end;max-width:85%;margin-bottom:12px;padding:12px 18px; border-radius:var(--r-lg);border-end-end-radius:8px;background:var(--surface-2); color:var(--ink-2);font-size:13.5px;line-height:1.7} .gen{position:relative;aspect-ratio:1/1;width:min(100%,32dvh);width:min(100%,62cqh); align-self:flex-start;overflow:hidden;border-radius:var(--r); border:1px solid var(--line);background:var(--surface);color:var(--brand)} .gen.done{display:grid;gap:1px;grid-template-columns:1fr;aspect-ratio:auto;width:100%} .gen.done:has(.shot+.shot){grid-template-columns:1fr 1fr} .gen canvas{position:absolute;inset:0;width:100%;height:100%;color:inherit} .gen canvas[data-snake]{display:none} .gen.playing canvas[data-snake]{display:block} .gen.playing canvas[data-dots]{display:none} .dotbox{cursor:pointer;touch-action:none} .genhint,.genpct{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px; height:var(--h-sm);padding:0 12px;border-radius:var(--pill);border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);font-size:11.5px;color:var(--ink-2);white-space:nowrap} .genhint{inset-block-start:14px;inset-inline-start:14px;max-width:calc(100% - 28px); overflow:hidden;text-overflow:ellipsis} .genhint i{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:currentColor} .genhint i::after{content:'';position:absolute;inset:0;border-radius:50%;background:currentColor; opacity:.5;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{75%,100%{transform:scale(2.2);opacity:0}} .genpct{inset-block-end:14px;inset-inline-end:14px;font-variant-numeric:tabular-nums;color:var(--ink-3)} .genpct b{color:var(--ink);font-weight:500} .gen.playing .genhint,.gen.playing .genpct{display:none} .dotscore,.dotnote{position:absolute;z-index:2;height:var(--h-sm);padding:0 12px; display:inline-flex;align-items:center;border-radius:var(--pill);font-size:11.5px; border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 84%,transparent)} .dotscore{inset-block-start:14px;inset-inline-end:14px;font-family:var(--latin); background:var(--key);border-color:var(--key);color:var(--key-on);display:none} .gen.playing .dotscore{display:inline-flex} .dotnote{inset-block-end:52px;inset-inline-start:50%;transform:translateX(-50%);color:var(--ink-2)} .dotnote:empty{display:none} .shot{position:relative;margin:0;overflow:hidden;background:var(--surface-2)} .shot img,.shot video{display:block;width:100%;height:100%;max-height:430px;object-fit:cover; animation:reveal .7s cubic-bezier(.23,1,.32,1) both} .shot audio{display:block;width:100%;padding:16px} @keyframes reveal{from{opacity:0;transform:scale(1.04);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}} .shot figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:2; display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px; background:linear-gradient(to top,color-mix(in srgb,#000 55%,transparent),transparent); font-family:var(--latin);font-size:11px;color:#EFECE6} .shot:has(audio) figcaption{position:static;background:none;color:var(--ink-4);padding:0 16px 16px} .shot figcaption code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr} .shot .btn{background:color-mix(in srgb,#fff 18%,transparent);border-color:transparent;color:#fff; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .shot .btn:hover{background:color-mix(in srgb,#fff 28%,transparent);border-color:transparent;color:#fff} .shot:has(audio) .btn{background:transparent;border-color:var(--line-2);color:var(--ink)} .jobfoot{margin-top:12px;gap:8px} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-top:12px} .card{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);overflow:hidden} .card img,.card video{display:block;width:100%;height:auto} .card audio{display:block;width:100%;padding:10px} .card .meta{display:flex;align-items:center;justify-content:space-between;gap:10px; height:var(--h);padding:0 12px;border-top:1px solid var(--line); font-family:var(--latin);font-size:10.5px;color:var(--ink-4)} .card .meta code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ───────────────────────────── lists and sheets ───────────────────────────── */ .skill,.item{display:flex;gap:14px;margin-bottom:12px;padding:var(--pad); border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .skill.off{opacity:.55} .skill b{font-size:14.5px;font-weight:500} .skill p{margin:4px 0 10px;font-size:13px;color:var(--ink-3);max-width:var(--measure)} .item .what{flex:1;min-width:0} .item .what>b{display:block;font-family:var(--latin);font-size:13.5px;font-weight:500;word-break:break-all} .item audio{width:100%;max-width:340px;margin-top:12px} .ledrow{display:flex;align-items:center;gap:12px;min-height:var(--h-lg); border-bottom:1px solid var(--line);font-size:13px} .ledrow:last-child{border-bottom:0} .ledrow .when{flex:none;min-width:92px;font-family:var(--latin);font-size:11.5px;color:var(--ink-4)} .ledrow .what{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis} .ledrow .usd{flex:none;font-family:var(--latin);font-weight:500;font-variant-numeric:tabular-nums} .ledrow .usd.est{color:var(--ink-4);font-weight:400} .modal{position:fixed;inset:0;z-index:90;display:grid;place-items:end center; background:color-mix(in srgb,var(--ink) 45%,transparent);animation:fade .16s var(--ease)} .sheet{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto; padding:var(--pad-lg) var(--pad-lg) calc(var(--pad-lg) + env(safe-area-inset-bottom)); border:1px solid var(--line-2);border-start-start-radius:var(--r-lg); border-start-end-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-pop); animation:up .2s var(--ease)} .sheet .row:last-child{margin-top:20px} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes up{from{transform:translateY(16px);opacity:.4}to{transform:none;opacity:1}} .toast{position:fixed;z-index:95;inset-block-end:calc(16px + env(safe-area-inset-bottom)); inset-inline:16px;max-width:420px;margin-inline:auto;padding:14px 18px; border-radius:var(--r);background:var(--ink);color:var(--canvas);font-size:13.5px; line-height:1.6;box-shadow:var(--shadow-pop);transition:opacity .2s,transform .2s} .toast.bad{background:var(--garnet);color:#fff} .toast.hide{opacity:0;transform:translateY(10px);pointer-events:none} /* ───────────────────────────── the sculpture ───────────────────────────── */ .sculpt{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;contain:strict} .view.is-empty .sculpt{display:block} .sculpt-canvas{position:absolute;inset:0;display:block;width:100%;height:100%} .sculpt::after{content:'';position:absolute;inset:auto 0 0;height:46%;pointer-events:none; background:linear-gradient(to top,var(--canvas) 16%,color-mix(in srgb,var(--canvas) 55%,transparent) 58%,transparent)} .sculpt-word{position:absolute;inset-inline:0;top:50%;transform:translateY(-58%); text-align:center;font-family:var(--latin);font-weight:600;letter-spacing:-.06em; line-height:.8;font-size:clamp(64px,13vw,210px); color:color-mix(in srgb,var(--ink) 4%,transparent);pointer-events:none;user-select:none} .view.is-empty .stream{pointer-events:auto} .view.is-empty .hero .chipstart{pointer-events:auto} /* ───────────────────────────── ≥760: the tablet seam ───────────────────────────── */ @media (min-width:760px){ .head{padding:20px 32px;min-height:76px} .head h1{font-size:21px} .body{padding:4px 32px 40px} .stream{padding:16px 32px 4px} .composer-wrap{padding:16px 32px 28px} .results{padding:16px 32px 4px} .composer textarea{min-height:56px} .pane{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .twoup{grid-template-columns:1fr 1fr} .refhead .note{display:block;overflow:visible} .modal{place-items:center} .sheet{border-radius:var(--r-lg)} .toast{inset-inline-start:auto;inset-inline-end:24px;margin-inline:0} } /* ───────────────────────────── ≥1060: the desk ───────────────────────────── */ @media (min-width:1060px){ .shell{grid-template-columns:var(--rail) minmax(0,1fr)} .rail,[dir=rtl] .rail{position:static;width:auto;transform:none;transition:none; box-shadow:none;padding:24px 16px} .scrim{display:none!important} .burger{display:none} .rail-toggle{display:grid;place-items:center;width:var(--h-sm);height:var(--h-sm);flex:none; border-radius:var(--pill);color:var(--ink-4)} .rail-toggle:hover{background:var(--surface-2);color:var(--ink)} .stream,.composer-wrap{padding-inline:max(32px,calc((100% - var(--page))/2))} .results{padding-inline:max(32px,calc((100% - 980px)/2))} .body,.head{padding-inline:max(32px,calc((100% - 1160px)/2))} .acts{opacity:0} body.rail-min .shell{grid-template-columns:var(--rail-min) minmax(0,1fr)} body.rail-min .rail{padding:24px 10px;align-items:center} body.rail-min .brandline{justify-content:center} body.rail-min .brandline .txt,body.rail-min .rail-label,body.rail-min .chats-search, body.rail-min .threads-list,body.rail-min .rail-card,body.rail-min .rail-toggle{display:none} body.rail-min .prefs{flex-direction:column;align-items:center} body.rail-min .newchat,body.rail-min .nav{font-size:0;justify-content:center; padding-inline:0;width:var(--h-lg);margin-inline:auto} body.rail-min .nav .tip{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } @media (hover:none){ .acts{opacity:1;max-height:40px;margin-top:10px} .tact{opacity:1} } /* v24: file download card + stable message actions (no layout shift = no hover flicker) */ .bubble .files.fcards{flex-direction:column;align-items:stretch;gap:8px} .fcard{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;box-sizing:border-box; padding:12px 14px;border-radius:14px;border:1px solid var(--line); background:color-mix(in srgb,var(--ink) 5%,var(--surface));color:var(--ink);text-decoration:none; text-align:left;transition:background .15s,border-color .15s} .fcard:hover{background:color-mix(in srgb,var(--ink) 9%,var(--surface));border-color:var(--line-2)} .fcard-ico{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb,var(--ink) 9%,var(--surface));color:var(--ink-2)} .fcard-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .fcard-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .fcard-txt b{font-weight:600;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fcard-txt small{font-size:12px;color:var(--ink-4);letter-spacing:.02em} .bubble a.fcard{color:var(--ink);text-decoration:none} .acts{max-height:none!important;overflow:visible;margin-top:8px!important;gap:2px;opacity:0; pointer-events:none;transition:opacity .15s var(--ease)} .msg:hover .acts,.msg:focus-within .acts{opacity:1;pointer-events:auto} @media (hover:none){.acts{opacity:1;pointer-events:auto}} .acts button{width:30px;height:30px;padding:0;border:0;background:transparent;display:inline-grid; place-items:center;font-size:0;color:var(--ink-4);border-radius:8px} .acts button:hover{background:var(--surface-2);color:var(--ink)} .acts button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .fcards .tag{align-self:flex-start} /* ZEKA R18 SOURCE: zeka-theme.css */ /* Azo Sans is commercial. Local installation or owner-licensed .woff2 files only. */ @font-face{font-family:'Azo Sans';src:local('Azo Sans Black');font-weight:900;font-display:swap} @font-face{font-family:'Azo Sans';src:local('Azo Sans Regular');font-weight:400;font-display:swap} @font-face{font-family:'Azo Sans';src:local('Azo Sans Thin');font-weight:100;font-display:swap} /* ZEKA approved THINK LIMITLESS theme, integrated with existing functional controls. The landing, eye, dark palette and typography are derived from owner's supplied HTML. */ :root{ --z-bone:#f2ece2; --z-black:#171717; --z-gold:#F85F2E; --z-copper:#7A2E16; --z-ui:'Azo Sans','Geist','Vazirmatn',sans-serif; --z-display:'Azo Sans','Geist',Arial,sans-serif; --z-iris-1:#F85F2E; --z-iris-2:#7A2E16; --z-pupil:.09; /* v3.21: Normal = small pupil (power mode below enlarges it) */ } :root[data-theme=dark]{ --canvas:#171717; --surface:#1b1b1b; --surface-2:#212121; --surface-3:#2a2a2a; --field:#1b1b1b; --ink:#f2ece2; --ink-2:#dad4ca; --ink-3:#ada69a; --ink-4:#918c83; --line:#2c2c2c; --line-2:#3b3b3b; --line-ctl:#5a5a5a; --brand:#F85F2E; --brand-2:#FF8F66; --brand-soft:#241e17; --brand-line:#4a3826; --key:#f2ece2; --key-2:#fffaf2; --key-on:#171717; --sand:#F85F2E; --garnet:#FF5A62; --ok:#F2ECE2; --sans:var(--z-ui); --display:var(--z-display); --accent-face:var(--z-ui); --pill:999px; /* v3.21: radius tokens (--r 16 / --r-lg 24) are now identical in both themes */ } :root[data-theme=light]{--sans:var(--z-ui);--display:var(--z-display);--accent-face:var(--z-ui)} .zeka-landing{position:fixed;inset:0;min-height:100dvh;z-index:150;background:var(--z-black);color:var(--z-bone);overflow:hidden;display:grid;place-items:center;font-family:var(--z-ui)} body.z-registered .zeka-landing{display:none} body:not(.z-registered)>.shell{visibility:hidden;pointer-events:none} .z-land-nav{direction:ltr;position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;font-size:12px;font-weight:600;letter-spacing:.11em} .z-brand{display:flex;align-items:center;gap:12px;font-size:17px;letter-spacing:.06em} .z-brand-square{display:grid;place-items:center;background:var(--z-bone);color:#0b0b0b;width:33px;height:33px;border-radius:9px;font-size:18px} .z-land-type{font-family:var(--z-display);font-size:clamp(56px,11.2vw,192px);font-weight:900;line-height:.96;letter-spacing:-.01em;text-align:center;color:var(--z-bone);position:relative;z-index:1;direction:ltr} .z-land-center{position:absolute;z-index:2;inset:0;display:grid;place-items:center;pointer-events:none} .z-eye{--s:32vmin;width:var(--s);height:var(--s);border-radius:50%;position:relative;display:block;flex:none;background:#050505;box-shadow:0 0 0 .8vmin #050505,0 0 4vmin 2vmin rgba(0,0,0,.7),0 50px 120px rgba(0,0,0,.55)} .z-lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;transform:translateZ(0);background:radial-gradient(circle,var(--z-iris-1) 0,var(--z-iris-1) 20%,var(--z-iris-2) 47%,#050505 71%)} .z-iris{position:absolute;inset:0;transform:translate3d(var(--px,0px),var(--py,0px),0);will-change:transform} .z-fib{position:absolute;inset:0;border-radius:50%;animation:z-eye-turn 90s linear infinite;background:repeating-conic-gradient(rgba(0,0,0,.3) 0 1.2deg,transparent 1.2deg 4deg),repeating-conic-gradient(rgba(255,255,255,.13) 0 .7deg,transparent .7deg 3deg);-webkit-mask:radial-gradient(circle,transparent 13%,#000 22%,#000 56%,transparent 68%);mask:radial-gradient(circle,transparent 13%,#000 22%,#000 56%,transparent 68%)} .z-pupil{position:absolute;left:50%;top:50%;width:calc(var(--z-pupil)*100%);aspect-ratio:1;border-radius:50%;background:#000;transform:translate(-50%,-50%) scale(var(--dl,1));box-shadow:0 0 0 .6vmin rgba(0,0,0,.55);transition:width .42s ease} .z-shine{position:absolute;z-index:4;left:27%;top:19%;width:17%;height:10%;border-radius:50%;background:#fff;opacity:.38;filter:blur(5px);transform:rotate(-32deg)} .z-lens:after{content:"";position:absolute;inset:0;border-radius:50%;z-index:6;pointer-events:none;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.08),transparent 38%),radial-gradient(circle,transparent 58%,rgba(0,0,0,.55) 100%)} .z-lid{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(#050505,#050505) top/100% calc(var(--bl,0)*50.5%) no-repeat,linear-gradient(#050505,#050505) bottom/100% calc(var(--bl,0)*50.5%) no-repeat} @keyframes z-eye-turn{to{transform:rotate(360deg)}} .z-land-bottom{position:absolute;z-index:3;left:4vw;right:4vw;bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;direction:ltr} .z-land-bottom p{font-size:clamp(14px,1.54vw,22.4px);font-weight:600;line-height:1.1;letter-spacing:-.01em} .z-land-bottom small{display:block;font-size:.62em;font-weight:400;opacity:.7;margin-top:10px} .z-land-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .z-land-modes{display:flex;padding:4px;border:1px solid rgba(242,236,226,.35);border-radius:99px} .z-land-modes button{color:var(--z-bone);font-weight:600;padding:11px 20px;border-radius:99px} .z-land-modes button[aria-pressed=true]{background:var(--z-bone);color:#111} .z-land-go{padding:15px 27px;border-radius:99px;background:var(--z-bone);color:#171717;font-weight:600;display:flex;gap:16px;align-items:center;transition:transform .25s} .z-land-go:hover{transform:scale(1.05)} /* Original page layout preserved; palettes, hierarchy and control texture unified. */ :root[data-theme=dark] .rail{background:#0b0b0c;border-color:rgba(255,255,255,.08)} :root[data-theme=dark] main{background:#171717} :root[data-theme=dark] .newchat{border-radius:999px} :root[data-theme=dark] .composer{background:rgba(10,10,11,.95);border-color:rgba(255,255,255,.13);box-shadow:0 12px 40px rgba(0,0,0,.2)} :root[data-theme=dark] .msg.me .bubble{background:var(--z-bone);color:#111} :root[data-theme=dark] .msg.ai .bubble{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:14px 18px} :root[data-theme=dark] .head h1 em{font-style:normal;font-family:var(--z-display);font-weight:900;color:var(--z-bone)} .z-chat-hero{position:relative;min-height:240px;display:grid!important;place-items:center;isolation:isolate} .z-chat-hero h2{font-family:var(--z-display);font-weight:900;font-size:clamp(55px,8vw,134px);line-height:1.08;text-align:center;letter-spacing:-.015em;direction:ltr;color:var(--ink)} .z-chat-eye{--s:min(21vmin,182px);position:absolute;z-index:1;pointer-events:none} .z-web-hint{color:#fb5962;font-size:12px;font-weight:600} .z-skill-hint{position:absolute;bottom:100%;inset-inline:20px;z-index:45;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;max-height:240px;overflow-y:auto;box-shadow:var(--shadow-pop)} .z-skill-hint button{display:flex;width:100%;padding:10px 14px;align-items:center;justify-content:space-between;text-align:start;gap:12px} .z-skill-hint button:hover,.z-skill-hint button:focus{background:var(--surface-2)} .z-skill-hint small{color:var(--ink-3)} .stream{overflow-anchor:none;overscroll-behavior:contain} :root[data-theme=dark] .rail .nav.on{background:rgba(255,255,255,.08)} @media(max-width:820px){.z-land-type{font-size:clamp(41.6px,9.6vw,110.4px)}.z-land-nav{padding:18px 4vw}.z-land-nav>span{font-size:10px}.z-land-bottom{bottom:max(22px,env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start}.z-land-actions{width:100%;justify-content:space-between}.z-land-modes button{padding:10px 15px}.z-eye{--s:36vmin}.z-chat-eye{--s:min(24vmin,145px)}} @media(prefers-reduced-motion:reduce){.z-fib{animation:none}.z-land-go{transition:none}} /* Original files remain the download source; viewer never transcodes or replaces them. */ .z-media-viewer{position:fixed;inset:0;z-index:400;background:rgba(4,4,5,.97);color:#f2ece2;display:flex;flex-direction:column;gap:18px;padding:max(14px,env(safe-area-inset-top)) 3vw max(14px,env(safe-area-inset-bottom));direction:rtl} .z-media-viewer[hidden]{display:none!important} .z-media-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font:14px var(--z-ui)} .z-media-toolbar #z-media-name{overflow:hidden;text-overflow:ellipsis;max-width:45vw;white-space:nowrap;direction:ltr} .z-media-actions{display:flex;gap:8px;align-items:center} .z-media-actions button,.z-media-actions a{min-width:38px;min-height:38px;border:1px solid #4d4b48;border-radius:99px;padding:8px 12px;text-align:center;color:#f2ece2} .z-media-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain} .z-media-stage img,.z-media-stage video{display:block;max-width:100%;max-height:100%;object-fit:contain;transform:scale(var(--media-scale,1));transform-origin:center;transition:transform .12s} .z-media-stage audio{width:min(800px,100%)} @media(max-width:600px){.z-media-toolbar #z-media-name{max-width:100%}.z-media-stage img,.z-media-stage video{max-width:98%}} /* Approved studio visual vocabulary: aperture / film reel / vinyl record. These decorative empties never stand in for generated files or real previews. */ #imageOut:has(.empty),#videoOut:has(.empty),#musicOut:has(.empty){position:relative;isolation:isolate;overflow:hidden;min-height:320px} #imageOut:has(.empty)::before,#videoOut:has(.empty)::before,#musicOut:has(.empty)::before{ content:"";position:absolute;z-index:0;left:50%;top:46%;width:min(33vmin,230px);height:min(33vmin,230px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none} #imageOut:has(.empty)::before{background:repeating-conic-gradient(from 8deg,#2e2e33 0 1.2deg,#1b1b1b 1.2deg 60deg);border:13px solid #1d1d20;box-shadow:0 0 0 2px rgba(255,255,255,.15),0 45px 110px rgba(0,0,0,.55)} #videoOut:has(.empty)::before{background:radial-gradient(circle,var(--z-iris-1) 0 8%,#141416 9% 100%);box-shadow:inset 0 0 0 17px #25252a,0 45px 110px rgba(0,0,0,.55)} #musicOut:has(.empty)::before{background:repeating-radial-gradient(circle,#09090a 0 2px,#1d1d20 2px 3px);box-shadow:0 45px 110px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1)} #imageOut:has(.empty)::after,#videoOut:has(.empty)::after,#musicOut:has(.empty)::after{position:absolute;z-index:-1;inset:10% 0 auto;content:"IMAGE";font:clamp(90px,16vw,250px)/1 var(--z-display);letter-spacing:-.02em;text-align:center;opacity:.11;pointer-events:none} #videoOut:has(.empty)::after{content:"VIDEO"}#musicOut:has(.empty)::after{content:"MUSIC"} #imageOut:has(.empty)>.empty,#videoOut:has(.empty)>.empty,#musicOut:has(.empty)>.empty{position:relative;z-index:2;margin-top:auto;background:transparent} @media(max-height:650px){#imageOut:has(.empty),#videoOut:has(.empty),#musicOut:has(.empty){min-height:185px}#imageOut:has(.empty)::before,#videoOut:has(.empty)::before,#musicOut:has(.empty)::before{width:110px;height:110px}} /* ZEKA X2 Power atmosphere, applicable to every work area, not just the chat. */ /* Image / Video / Music emblems are static by design. The landing eye remains animated independently. */ #imageOut:has(.empty)::before,#videoOut:has(.empty)::before,#musicOut:has(.empty)::before{animation:none!important} @media(prefers-reduced-motion:reduce){#imageOut:has(.empty)::before,#videoOut:has(.empty)::before,#musicOut:has(.empty)::before{animation:none!important}} /* Claude-inspired hierarchy: model is an explicit composer control, not a hidden label. */ .z-preview-overlay{position:fixed;inset:0;z-index:450;background:#111;color:#f2ece2;display:flex;flex-direction:column;direction:ltr} .z-preview-overlay[hidden]{display:none!important} .z-preview-bar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#1b1b1b;border-bottom:1px solid #353538;flex-wrap:wrap} .z-preview-bar strong{margin-right:auto;font-size:14px} .z-preview-bar button,.z-preview-bar a{border:1px solid #4a4a4b;border-radius:8px;padding:7px 12px;font:12px var(--z-ui)} .z-preview-bar button[aria-pressed=true]{background:#f2ece2;color:#111} .z-preview-bar button:hover,.z-preview-bar a:hover{border-color:#f2ece2} .z-preview-sizes{display:flex;gap:6px} .z-preview-area{flex:1;min-height:0;display:flex;justify-content:center;padding:16px;background:#292929;overflow:auto} #z-preview-frame{display:block;height:100%;max-width:100%;width:100%;border:0;background:#fff;box-shadow:0 20px 70px #0006;transition:width .2s} #z-preview-frame[data-size=tablet]{width:768px} #z-preview-frame[data-size=mobile]{width:390px} @media(max-width:640px){.z-preview-bar{gap:6px}.z-preview-bar strong{width:100%}.z-preview-area{padding:6px}} .z-table-scroll{width:100%;max-width:100%;overflow:auto;margin:12px 0;border:1px solid var(--line-2);border-radius:12px;user-select:text} .z-markdown-table{width:100%;border-collapse:collapse;min-width:270px;font-size:13px;line-height:1.55;user-select:text} .z-markdown-table th,.z-markdown-table td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:start;white-space:normal} .z-markdown-table thead{background:var(--surface-2)} .z-markdown-table tr:last-child td{border-bottom:0} .z-chat-hero h2{font-size:clamp(50px,8vw,132px)!important} @media(max-width:820px){.z-chat-hero h2{font-size:clamp(44px,10vw,86px)!important}} .z-settings-tabs{display:flex;gap:7px;overflow:auto;flex-wrap:wrap;padding:2px 0 18px} .z-settings-tabs button{border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;white-space:nowrap;font-size:12px} .z-settings-tabs button[aria-pressed=true]{color:var(--key-on);background:var(--key)} #view-settings .pane>div:has([data-z-settings-section]:not([hidden])){min-width:0} .z-model-trigger:focus-visible,.z-turbo-toggle:focus-visible,#attachBtn:focus-visible{outline:2px solid var(--z-gold);outline-offset:3px} /* Small screens: keep the eye prominent without hiding the two-word headline. */ @media(max-width:620px){ .z-land-center{transform:translateY(-108px)} .z-land-type{transform:translateY(74px)} } /* Local terminal mode has no financial limit controls. Usage history stays visible. */ :root[data-local-unrestricted="true"] #costLimitsPanel{display:none!important} /* X2 Power eye response (v3.21, reversed): Normal = small pupil (.09), X2 Power = large pupil (.204). Stays large even after the 17s crimson atmosphere fades; returns to small on Normal. This follows the persistent X2 state (data-turbo), not the temporary visual pulse. */ :root[data-turbo="on"]{--z-pupil:.204} @media(prefers-reduced-motion:reduce){.z-pupil{transition:none}} /* X2 Power: 12s full red atmosphere, then a slow 5s fade back. Active status remains visible on the button until explicitly switched off. */ @property --z-power-tint{syntax:'';inherits:true;initial-value:0%} :root{--z-power-tint:0%;--z-power-red:#a30f17} :root[data-theme=light]{--z-power-red:#a30f17} /* The percentage is driven every animation frame by zeka-theme.js during the 5-second return. The old keyframes competed with the timeout and caused snaps. */ /* Motion preferences are handled by the JS fade controller. */ /* V35: Model pickers stay anchored above their own composer chip. This deliberately matches the Chat model picker on mobile: no modal, no scrim. */ #pop-imageModel,#pop-videoModel,#pop-musicModel{ position:fixed!important;inset:auto;transform:none!important; width:min(440px,calc(100vw - 20px));max-width:none; max-height:min(62dvh,520px);overflow:auto; padding:14px;border:1px solid #454048;border-radius:18px; background:#141416;box-shadow:0 20px 60px #000a; z-index:92;direction:ltr;text-align:left } #pop-imageModel .models,#pop-videoModel .models,#pop-musicModel .models{ display:flex;flex-direction:column;gap:3px;max-height:35dvh;overflow:auto } #pop-imageModel .model,#pop-videoModel .model,#pop-musicModel .model{ position:relative;min-height:45px;border:1px solid transparent;border-radius:11px;padding:10px 12px } #pop-imageModel .model.on,#pop-videoModel .model.on,#pop-musicModel .model.on{ border-color:#62503b;background:#2a241e } #pop-imageModel .model.on .what::after,#pop-videoModel .model.on .what::after,#pop-musicModel .model.on .what::after{ content:'✓';position:absolute;right:14px;color:#F85F2E } #pop-imageModel input[type=search],#pop-videoModel input[type=search],#pop-musicModel input[type=search]{ width:100%;margin:5px 0 8px;border:1px solid #424247;border-radius:10px; padding:10px;font-size:14px;background:#1b1b20;color:#fff } #pop-imageModel .families,#pop-videoModel .families,#pop-musicModel .families{gap:6px;padding:6px 0} #pop-imageModel .fam,#pop-videoModel .fam,#pop-musicModel .fam{min-width:82px;min-height:52px;border-radius:10px} .z-media-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .z-media-pop-head h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px} .z-media-pop-close{display:grid;place-items:center;width:30px;height:30px;border:1px solid #3b3b40; border-radius:10px;background:#222226;color:#eee;font-size:22px;line-height:1;cursor:pointer} .z-media-pop-close:focus-visible{outline:2px solid #F85F2E} @media(max-width:620px){ #pop-imageModel,#pop-videoModel,#pop-musicModel{width:calc(100vw - 20px);max-height:min(58dvh,450px);padding:12px;border-radius:16px} #pop-imageModel .models,#pop-videoModel .models,#pop-musicModel .models{max-height:28dvh} } /* V35: More prominent two-word hero title, without enlarging other text. */ .z-land-type{font-size:clamp(68px,14vw,248px);letter-spacing:-.04em;max-width:calc(100vw - 24px)} @media(max-width:620px){.z-land-type{font-size:clamp(56px,15vw,92px);letter-spacing:-.055em}} /* V35: collapsed sidebar always has a visible way back. */ @media(min-width:1060px){ body.rail-min .brandline .z{display:none} body.rail-min .brandline{width:100%;justify-content:center} body.rail-min .rail-toggle{display:grid;width:42px;height:42px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;color:var(--ink)} body.rail-min .newchat,body.rail-min .nav{width:42px;height:42px;min-height:42px;margin-inline:auto;padding:0;flex:none} body.rail-min .newchat svg,body.rail-min .nav svg{flex:none;width:19px;height:19px;opacity:1} body.rail-min .rail{padding:20px 10px;gap:8px} body.rail-min .nav{border-radius:12px} } .cost-simple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cost-simple .stat{min-height:116px;padding:20px}.cost-simple .stat b{font-size:clamp(24px,3vw,34px)}.cost-simple .stat span{font-size:13px}.cost-explainer{margin:12px 0 22px;line-height:1.6}.cost-detail{margin-bottom:16px}.cost-detail>summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none;padding:3px 0 16px}.cost-detail>summary::before{content:'+';display:inline-block;margin-right:12px;font-size:21px;color:#F85F2E}.cost-detail[open]>summary::before{content:'−'}.cost-detail>summary small{display:block;font-size:12px;opacity:.6;font-weight:400;margin:5px 0 0 27px} @media(max-width:680px){.cost-simple{grid-template-columns:1fr}.cost-simple .stat{min-height:85px}} /* V34: reliable full-frame Snake gameplay and directly clickable media previews. */ .dotbox{position:relative;align-self:flex-start;width:min(100%,460px);height:auto!important;aspect-ratio:1/1;min-height:280px;max-height:min(66dvh,460px);overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);touch-action:none;isolation:isolate} .dotbox canvas[data-dots],.dotbox canvas[data-snake]{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1} .dotbox canvas[data-snake]{display:none} .dotbox.playing canvas[data-snake]{display:block;z-index:3} .dotbox.playing canvas[data-dots],.dotbox.playing .dotlabel,.dotbox.playing .dothint{display:none!important} .dotbox .dotscore,.dotbox .dotnote{z-index:5;pointer-events:none} .dotbox:focus-visible{outline:2px solid var(--sand);outline-offset:3px} .z-media-thumb{display:block;width:100%;border:0;background:transparent;cursor:zoom-in;padding:0;text-align:initial} .z-media-thumb img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain} .z-media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:14px;padding:16px 0} .z-media-gallery>.card{max-width:100%;min-width:0} .z-media-gallery .meta{height:auto;min-height:44px;padding:8px;flex-wrap:wrap} .z-media-viewer{box-sizing:border-box;max-width:100vw;max-height:100dvh} .z-media-stage img{max-height:calc(100dvh - 116px)} /* V36 always-visible build identifier; ensures users can distinguish an old tab/install. */ .zeka-build-badge{position:fixed;left:9px;bottom:9px;z-index:78;pointer-events:none; color:#BFF5EE;background:rgba(14,14,17,.87);border:1px solid rgba(248,95,46,.42); border-radius:8px;padding:5px 8px;font:600 10px/1.25 system-ui,sans-serif;letter-spacing:.035em; direction:ltr;unicode-bidi:isolate;opacity:.88;box-shadow:0 3px 12px rgba(0,0,0,.12)} @media(max-width:620px){.zeka-build-badge{left:6px;bottom:6px;font-size:9px;padding:4px 6px}} /* V37: actionable API status, rather than a misleading "VERIFIED" UI badge. */ .zeka-key-notice{position:relative;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 18px;border-bottom:1px solid rgba(234,169,75,.32); background:rgba(151,91,26,.13);color:var(--ink);font:500 12px/1.5 var(--sans)} .zeka-key-notice[hidden],.zeka-boot-error[hidden]{display:none!important} .zeka-key-notice strong{font-weight:750} .zeka-key-notice button,.zeka-boot-error button{flex:none;cursor:pointer;border:1px solid currentColor; background:var(--ink);color:var(--canvas);border-radius:12px;padding:7px 12px;line-height:1.3;font:600 12px var(--sans)} .zeka-boot-error{position:fixed;inset:auto 12px 12px;z-index:9999;max-width:620px; border:1px solid #c55e52;border-radius:16px;background:#30211f;color:#fff; display:flex;flex-direction:column;align-items:start;gap:8px;padding:18px;box-shadow:0 16px 48px #0009} @media(max-width:620px){.zeka-key-notice{padding:8px 10px;gap:8px;align-items:start;flex-direction:column} .zeka-key-notice button{align-self:flex-end}} #toast{pointer-events:none!important} /* v38: explicit, visible controls instead of relying on previous-release overrides */ .z-land-type{font-size:clamp(86px,17vw,285px)!important;line-height:.92!important;letter-spacing:-.055em!important} @media(max-width:620px){.z-land-type{font-size:clamp(60px,16vw,115px)!important}} .zeka-rail-reopen{position:fixed;left:11px;top:16px;z-index:110;display:grid;place-items:center; width:42px;height:42px;border:1px solid #47474a;border-radius:13px;background:#202023;color:#f2ece2;cursor:pointer} .zeka-rail-reopen[hidden]{display:none!important} body:not(.rail-min) .zeka-rail-reopen{display:none!important} @media(max-width:1059px){.zeka-rail-reopen{display:none!important}} /* Popover portals live in body; they cannot be clipped by an image/video composer. */ #pop-imageModel,#pop-videoModel,#pop-musicModel{position:fixed!important;z-index:301!important;transform:none!important;inset:auto} #pop-imageModel[hidden],#pop-videoModel[hidden],#pop-musicModel[hidden]{display:none!important} /* The running job is a game surface; expand it without hiding the rest of ZEKA. */ .dotbox{cursor:pointer;min-width:min(100%,280px);user-select:none} .dotbox.expanded{position:fixed!important;inset:4dvh 4vw!important;margin:auto!important; width:min(88vw,84dvh,680px)!important;height:min(88vw,84dvh,680px)!important;max-height:84dvh!important; min-height:0!important;aspect-ratio:1!important;z-index:330!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.89),0 25px 100px #000} .dotexpand{position:absolute;top:9px;right:9px;z-index:15;min-width:36px;min-height:36px; border:1px solid #7777;border-radius:10px;background:#171719d9;color:#fff;font:20px sans-serif;cursor:pointer} .dotbox .dotnote,.dotbox .dotscore{pointer-events:none} /* Cost Control is a simple ledger and overview. Keep internal inputs hidden. */ #costLimitsPanel[hidden]{display:none!important} #view-cost .pane{grid-template-columns:minmax(0,1fr)!important} /* v3.20 — keep the actual moving ZEKA eye behind every active conversation. A soft 40% ghost, not a removed/recreated hero; messages stay readable. */ #view-chat{position:relative;isolation:isolate} #view-chat .z-chat-ambient{position:absolute;inset:72px 0 96px;z-index:0;display:grid;place-items:center; pointer-events:none;overflow:hidden;opacity:.40;visibility:visible;transition:opacity .7s ease,filter .7s ease; filter:blur(7px);user-select:none} #view-chat.is-empty .z-chat-ambient{opacity:0;visibility:hidden} #view-chat .z-chat-ambient .z-chat-ambient-inner{position:relative;display:grid;place-items:center; width:min(83vw,780px);min-height:300px} #view-chat .z-chat-ambient .z-eye{--s:min(31vmin,260px);position:absolute;z-index:2} #view-chat .z-chat-ambient .z-chat-ambient-title{font-family:var(--z-display);font-size:clamp(44px,8vw,115px); font-weight:900;line-height:1.04;letter-spacing:-.015em;color:var(--ink);text-align:center} #view-chat .stream{position:relative;z-index:1;direction:ltr;background:transparent!important} #view-chat .stream .msg{align-self:stretch;direction:ltr} #view-chat .stream .msg.me{align-items:flex-end} #view-chat .stream .msg.ai{align-items:flex-start} #view-chat .stream .msg .bubble{direction:inherit;max-width:min(86%,780px)} #view-chat .stream .msg.me .bubble{background:var(--z-bone);color:#161514;border-radius:18px 18px 6px 18px} :root[data-theme="light"] #view-chat .stream .msg.me .bubble{background:#242322;color:#fff} #view-chat .stream .msg .bubble[dir="auto"]{unicode-bidi:plaintext} #view-chat .stream .msg.ai .bubble{background:color-mix(in srgb,var(--canvas) 87%,transparent); border-radius:18px;padding:12px 16px} #view-chat .stream .msg.me .bubble .files{justify-content:flex-end} #view-chat .stream .z-chat-file-preview{display:flex;align-items:center;gap:8px;padding:6px 9px; border:1px solid var(--line-2);border-radius:10px;font-size:12px;max-width:100%;min-width:0} #view-chat .stream .z-chat-file-preview img{width:60px;height:60px;object-fit:cover;border-radius:8px;display:block} #view-chat .stream .z-chat-file-preview span{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-chat .composer[data-submitting="true"] #attachList{display:none!important} @media(max-width:640px){#view-chat .z-chat-ambient .z-eye{--s:min(38vmin,190px)} #view-chat .stream .msg .bubble{max-width:95%}} @media(prefers-reduced-motion:reduce){#view-chat .z-chat-ambient{transition:none;filter:blur(7px)}} /* ZEKA R18 SOURCE: composer.css */ /* ZEKA Studio — chat composer. One calm surface: attachments on top, the text field, and a single row of controls underneath ( + · model · send ). Everything else lives in menus. Colours come from the theme variables, so light and dark both work. */ #view-chat .composer [hidden]{display:none!important} /* ── the surface ── */ #view-chat .composer{ border-radius:26px;padding:0; border:1px solid var(--line-2);background:var(--surface); box-shadow:var(--shadow-2); transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} #view-chat .composer:focus-within{ border-color:var(--line-ctl); box-shadow:var(--shadow-2),0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)} #view-chat .composer.dropping{border-color:var(--sand)} /* ── text field ── */ #view-chat .composer textarea{ display:block;width:100%;min-height:56px;max-height:min(40vh,320px); padding:17px 20px 4px;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none; font-size:15.5px;line-height:1.7;resize:none;overflow-y:auto} #view-chat .composer textarea:focus,#view-chat .composer textarea:focus-visible{outline:0;border:0;box-shadow:none} #view-chat .composer textarea::placeholder{color:var(--ink-4)} /* ── attachments ── */ #view-chat .attach-row{display:flex;gap:8px;overflow-x:auto;padding:14px 14px 0;scrollbar-width:none} #view-chat .attach-row::-webkit-scrollbar{display:none} #view-chat .attach{ position:relative;flex:none;display:flex;align-items:center;gap:10px; min-width:150px;max-width:240px;height:56px;padding-block:0;padding-inline:10px 38px; border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} #view-chat .attach .ext{ display:grid;place-items:center;flex:none;min-width:34px;height:34px;padding:0 6px;margin:0; border-radius:9px;background:var(--key);color:var(--key-on); font-family:var(--latin);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase} #view-chat .attach .meta{min-width:0;display:flex;flex-direction:column;gap:1px} #view-chat .attach .meta b{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-chat .attach .meta small{font-size:11px;color:var(--ink-4);font-family:var(--latin);direction:ltr;align-self:flex-start} #view-chat .attach.pic{width:56px;min-width:0;padding:0;overflow:hidden} #view-chat .attach.pic img{width:100%;height:100%;object-fit:cover;display:block} #view-chat .attach>button{ position:absolute;inset-block-start:50%;inset-inline-end:8px;transform:translateY(-50%); display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:transparent;color:var(--ink-3);font-size:15px;line-height:1;border:0} #view-chat .attach>button:hover{background:var(--garnet);color:#fff} #view-chat .attach.pic>button{inset-block-start:4px;inset-inline-end:4px;transform:none; background:rgba(0,0,0,.62);color:#fff;width:20px;height:20px;font-size:13px} #view-chat .attach.pic>button:hover{background:var(--garnet)} #view-chat .attach.loading{padding-inline-end:14px;color:var(--ink-3)} #view-chat .attach .spin{ flex:none;width:18px;height:18px;border-radius:50%; border:2px solid var(--line-2);border-top-color:var(--ink-3);animation:zc-spin .8s linear infinite} /* ── drop veil ── */ #view-chat .drop-veil{ position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; border:2px dashed var(--sand);border-radius:inherit; background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink-2);font-size:14px;font-weight:500; opacity:0;pointer-events:none;transition:opacity .12s} #view-chat .composer.dropping .drop-veil{opacity:1} /* ── control row ── */ #view-chat .bar{ display:flex;align-items:center;flex-wrap:nowrap;gap:6px; padding:6px 10px 10px;direction:ltr} #view-chat .bar .grow{flex:1 1 0;min-width:4px} #view-chat .tool{ width:38px;height:38px;border:1px solid var(--line-2);background:transparent;color:var(--ink-3); transition:background .14s,color .14s,border-color .14s} #view-chat .tool:hover,#view-chat .tool[aria-expanded=true]{background:var(--surface-2);color:var(--ink)} #view-chat .tool svg{transition:transform .18s var(--ease)} #view-chat .tool[aria-expanded=true] svg{transform:rotate(45deg)} /* X2 Power: compact, steady lamp; no flashing or bouncing. */ #view-chat .turbo-chip{ position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 10px; border-radius:var(--pill);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2); direction:ltr;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s} #view-chat .turbo-chip:hover{border-color:var(--ink-3)} #view-chat .turbo-chip .tc-bolt{display:none} #view-chat .turbo-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:none} #view-chat .turbo-chip .tc-text{display:flex;line-height:1;text-align:start} #view-chat .turbo-chip .tc-text b{font-family:var(--latin);font-size:12px;font-weight:600;white-space:nowrap} #view-chat .turbo-chip .tc-text small{display:none} #view-chat .turbo-chip[aria-pressed=true]{background:var(--surface-2);border-color:#a95858;color:var(--ink); box-shadow:0 0 8px rgba(200,100,100,.12)} #view-chat .turbo-chip[aria-pressed=true]::before{background:#d98181;box-shadow:0 0 6px rgba(217,129,129,.5)} /* model picker trigger: quiet text, not a bordered button */ #view-chat .z-model-trigger{ display:inline-flex;align-items:center;gap:7px;height:36px;max-width:min(52vw,260px); padding:0 10px!important;border:0!important;border-radius:var(--pill);background:transparent; color:var(--ink-2);font-weight:500;overflow:hidden;direction:ltr} #view-chat .z-model-trigger:hover,#view-chat .z-model-trigger[aria-expanded=true]{background:var(--surface-2);color:var(--ink)} #view-chat .z-model-trigger #chatModelLabel{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--z-ui,var(--latin));font-size:13px} #view-chat .model-symbol{color:var(--brand);font-size:15px;line-height:1} #view-chat .model-chevron{font-size:16px;line-height:1;opacity:.55;transition:transform .16s var(--ease)} #view-chat .z-model-trigger[aria-expanded=true] .model-chevron{transform:rotate(180deg)} /* send / stop share one place */ #view-chat .send{ display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%; background:var(--key);color:var(--key-on); transition:background .15s,color .15s,transform .08s,opacity .15s} #view-chat .send:hover{background:var(--key-2)} #view-chat .send:active{transform:scale(.94)} #view-chat .composer[data-empty=true] #sendBtn{background:var(--surface-2);color:var(--ink-4);cursor:default} #view-chat .composer[data-empty=true] #sendBtn:active{transform:none} #view-chat #stopBtn:not([hidden])+#sendBtn{display:none} /* ── the + menu ── */ .plus-wrap{position:relative;flex:none} .plus-menu{ position:absolute;left:0;right:auto;bottom:calc(100% + 10px);z-index:80; /* the control row is always LTR, so anchor to its physical left */ display:flex;flex-direction:column;gap:2px;min-width:290px;max-width:min(340px,calc(100vw - 36px));padding:6px; border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-pop); transform-origin:bottom left;animation:zc-pop .14s var(--ease)} :root[dir=rtl] .plus-menu{direction:rtl} .plus-menu>button{ display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px; text-align:start;color:var(--ink);background:transparent;border:0} .plus-menu>button:hover,.plus-menu>button:focus-visible{background:var(--surface-2);outline:0} .plus-menu>button>svg{flex:none;color:var(--ink-3)} .plus-menu .mi{flex:1;min-width:0} .plus-menu .mi b{display:block;font-size:13.5px;font-weight:500} .plus-menu .mi small{display:block;margin-top:1px;font-size:11.5px;color:var(--ink-4)} .plus-menu .switch{ position:relative;flex:none;width:34px;height:20px;border-radius:var(--pill); background:var(--line-2);transition:background .16s} .plus-menu .switch::after{ content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%; background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:inset-inline-start .16s var(--ease)} .plus-menu [aria-pressed=true] .switch{background:var(--brand)} .plus-menu [aria-pressed=true] .switch::after{inset-inline-start:16px} @keyframes zc-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}} @keyframes zc-spin{to{transform:rotate(360deg)}} /* ── phones ── */ @media (max-width:640px){ #view-chat .composer{border-radius:22px} #view-chat .bar{gap:4px;padding:4px 8px 8px} #view-chat .turbo-chip{padding:0 10px 0 9px;gap:5px} #view-chat .turbo-chip .tc-text small{display:none} #view-chat .z-model-trigger{max-width:46vw} #view-chat .attach{min-width:150px;max-width:220px} } @media (pointer:coarse){ /* 16px keeps iOS from zooming the page when the field gets focus */ #view-chat .composer textarea{font-size:16px} #view-chat .tool,#view-chat .send{width:42px;height:42px} } @media (prefers-reduced-motion:reduce){ #view-chat .turbo-chip,#view-chat .turbo-chip *,#view-chat .turbo-chip::after{animation:none!important;transition:none!important} .plus-menu{animation:none} #view-chat .attach .spin{animation-duration:2s} } /* ───────── model dropdown: compact, anchored to the model button ───────── boot.js moves the pane to and sets left / top|bottom / width / max-height from the button's position, so it always opens right next to it, whichever side the composer is on. */ #chatPickerPane.z-model-pop{ position:fixed;inset-inline:auto;z-index:520;width:340px;max-width:calc(100vw - 24px); display:flex;flex-direction:column;gap:6px;padding:8px;overflow:hidden;box-sizing:border-box; background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.2); font-family:var(--z-ui,var(--latin));animation:none;opacity:1} #chatPickerPane.z-model-pop[hidden]{display:none} #chatPickerPane .z-model-pop-head{display:none} /* no title bar, Esc or a click outside closes it */ #chatPickerPane #chatSearch{ flex:none;height:34px;margin:0;padding:0 12px;border-radius:9px;font-size:13px; background:var(--surface-2);border:1px solid transparent;color:var(--ink)} #chatPickerPane #chatSearch:focus{border-color:var(--line-ctl);outline:none} #chatPickerPane .families{ flex:none;display:flex;gap:4px;padding:0;overflow-x:auto;scrollbar-width:none;direction:ltr} #chatPickerPane .families::-webkit-scrollbar{display:none} #chatPickerPane .fam{ flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:0; padding:0 12px;border:0;border-radius:8px;background:transparent;text-align:center} #chatPickerPane .fam b{font-size:12.5px;font-weight:500;color:var(--ink-3);white-space:nowrap} #chatPickerPane .fam small{display:none} #chatPickerPane .fam:hover{background:var(--surface-2)} #chatPickerPane .fam.on{background:var(--surface-3)} #chatPickerPane .fam.on b{color:var(--ink)} #chatPickerPane .models{ flex:1 1 auto;min-height:0;max-height:none;margin:0;padding:0;overflow-y:auto; display:flex;flex-direction:column;gap:1px} #chatPickerPane .model{ direction:ltr;display:flex;align-items:center;gap:8px;width:100%;min-height:38px; padding:0 10px;border:0;border-radius:9px;background:transparent;text-align:left} #chatPickerPane .model:hover,#chatPickerPane .model.on{background:var(--surface-2)} #chatPickerPane .model .what{flex:1;min-width:0} #chatPickerPane .model .what b{ display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #chatPickerPane .model .tag{ flex:none;padding:0;border:0;background:none;font-size:11px;color:var(--ink-4);direction:rtl} #chatPickerPane .model.on::after{content:'✓';flex:none;color:var(--brand);font-size:14px;line-height:1} #chatPickerPane .model.off{opacity:.55} #chatPickerPane .note{margin:6px 8px;font-size:12px} /* ───────── Image · Video · Music: the same composer as the chat ───────── One calm surface: reference files on top, the prompt, then one row ( + · model · options · send ). */ .studio-composer [hidden]{display:none!important} .studio-composer{ border-radius:26px;padding:0;border:1px solid var(--line-2);background:var(--surface); box-shadow:var(--shadow-2); transition:border-color .16s var(--ease),box-shadow .16s var(--ease)} .studio-composer:focus-within{ border-color:var(--line-ctl); box-shadow:var(--shadow-2),0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)} .studio-composer.dropping,.studio-composer:has(.refbox.dropping){border-color:var(--sand);border-style:dashed} .studio-composer textarea{ display:block;width:100%;min-height:56px;max-height:min(40vh,320px); padding:17px 20px 4px;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none; font-size:15.5px;line-height:1.7;resize:none;overflow-y:auto} .studio-composer textarea:focus,.studio-composer textarea:focus-visible{outline:0;border:0;box-shadow:none} .studio-composer textarea::placeholder{color:var(--ink-4)} .studio-composer #musicExtra{padding:14px 20px 0} /* the old bordered reference box becomes a quiet hint + the attachment row */ .studio-composer .refbox{margin:0;padding:12px 18px 0;border:0;border-radius:0;background:transparent} .studio-composer .refbox.droppable,.studio-composer .refbox.dropping{border:0} .studio-composer .refhead{gap:8px} .studio-composer .refhead span:first-child{font-size:12px;font-weight:500;color:var(--ink-3)} .studio-composer .refhead span:first-child:empty{display:none} .studio-composer .refhead .note{font-size:11px;-webkit-line-clamp:1} .studio-composer .refbox .row{margin-top:0} .studio-composer .refbox .row:empty{display:none} .studio-composer .refbox .attach-row,.studio-composer .refbox #imageRefList.attach-row{padding:10px 0 2px} .studio-composer .attach-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none} .studio-composer .attach-row::-webkit-scrollbar{display:none} .studio-composer .attach{ position:relative;flex:none;display:flex;align-items:center;gap:10px; width:auto;min-width:150px;max-width:240px;height:56px;padding-block:0;padding-inline:10px 38px; border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .studio-composer .attach .ext{ display:grid;place-items:center;flex:none;min-width:34px;height:34px;padding:0 6px;margin:0; border-radius:9px;background:var(--key);color:var(--key-on); font-family:var(--latin);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase} .studio-composer .attach .meta{min-width:0;display:flex;flex-direction:column;gap:1px} .studio-composer .attach .meta b{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .studio-composer .attach .meta small{font-size:11px;color:var(--ink-4);font-family:var(--latin);direction:ltr;align-self:flex-start} .studio-composer .attach.pic{width:56px;min-width:0;padding:0;overflow:hidden} .studio-composer .attach.pic img{width:100%;height:100%;object-fit:cover;display:block} .studio-composer .attach>button{ position:absolute;inset-block-start:50%;inset-inline-end:8px;transform:translateY(-50%); display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:transparent;color:var(--ink-3);font-size:15px;line-height:1;border:0} .studio-composer .attach>button:hover{background:var(--garnet);color:#fff} .studio-composer .attach.pic>button{inset-block-start:4px;inset-inline-end:4px;transform:none; background:rgba(0,0,0,.62);color:#fff;width:20px;height:20px;font-size:13px} /* control row, identical rhythm to the chat */ .studio-composer .bar{ display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 10px 10px;direction:ltr} .studio-composer .bar .grow{flex:1 1 0;min-width:4px} .studio-composer .bar .chiprow{display:contents} .studio-composer .bar .pop,.studio-composer .bar select,.studio-composer .bar input{direction:inherit} :root[dir=rtl] .studio-composer .bar .pop{direction:rtl} .studio-composer .tool{ width:38px;height:38px;border:1px solid var(--line-2);background:transparent;color:var(--ink-3); transition:background .14s,color .14s,border-color .14s} .studio-composer .tool:hover{background:var(--surface-2);color:var(--ink)} .studio-composer .chip{height:36px;border-radius:var(--pill);border-color:transparent;background:transparent;color:var(--ink-2)} .studio-composer .chip:hover,.studio-composer .chip[aria-expanded=true]{background:var(--surface-2);color:var(--ink)} .studio-composer .chip .val{font-size:13px} .studio-composer .send{ display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%; background:var(--key);color:var(--key-on);transition:background .15s,transform .08s,opacity .15s} .studio-composer .send:hover{background:var(--key-2)} .studio-composer .send:active{transform:scale(.94)} .studio-composer .send:disabled{opacity:.4;cursor:default} /* results: finished files, each with its own preview and download */ .job .card .meta{gap:8px} .job .card .meta .btn{height:32px;padding:0 12px;font-size:12px} .job>.row:last-child:has([data-dl-all]){margin-top:10px} @media (max-width:640px){ .studio-composer{border-radius:22px} .studio-composer .bar{gap:4px;padding:4px 8px 8px} .studio-composer .chip .lbl{display:none} } @media (pointer:coarse){ .studio-composer textarea{font-size:16px} .studio-composer .tool,.studio-composer .send{width:42px;height:42px} } /* ═════ v3.11 · one model menu everywhere, real icons, calm status ═════ The chat model menu is the reference. Image / Video / Music menus now share its exact look (theme tokens, compact rows, tick at the end) and follow light / dark automatically. */ /* icons: every SVG icon is the same box, centred, never scaled by the text around it */ .ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:middle;fill:none;stroke:currentColor;overflow:visible} svg.ic[width]{width:auto;height:auto} .plus-menu>button>svg,.nav>svg,.rail button>svg{flex:none;width:18px;height:18px} .plus-menu>button{align-items:center} .plus-menu .mi b,.plus-menu .mi small{line-height:1.45} #view-chat .model-symbol,#view-chat .model-chevron{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;line-height:0;font-size:0} #view-chat .model-symbol .ic{width:15px;height:15px} #view-chat .model-chevron .ic{width:16px;height:16px} .z-model-close,.z-media-pop-close,#z-media-close{display:inline-grid;place-items:center;line-height:0;font-size:0} .attach>button,.studio-composer .attach>button,#view-chat .attach>button{font-size:0;line-height:0} .attach>button .ic{width:12px;height:12px} /* shared model menu */ :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel){ display:flex;flex-direction:column;gap:6px;padding:8px;overflow:hidden;box-sizing:border-box; width:340px;max-width:calc(100vw - 20px);max-height:min(62dvh,460px); background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.2); font-family:var(--z-ui,var(--latin));direction:ltr;text-align:left;animation:none;opacity:1} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel)[hidden]{display:none!important} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel){z-index:520} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .z-media-pop-head{display:none} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) input[type=search]{ flex:none;width:100%;height:34px;margin:0;padding:0 12px;border-radius:9px;font-size:13px; background:var(--surface-2);border:1px solid transparent;color:var(--ink)} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) input[type=search]:focus{border-color:var(--line-ctl);outline:none} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .families{ flex:none;display:flex;gap:4px;padding:0;overflow-x:auto;scrollbar-width:none;direction:ltr} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .families::-webkit-scrollbar{display:none} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam{ flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:0;min-height:0; padding:0 12px;border:0;border-radius:8px;background:transparent;text-align:center} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam b{font-family:var(--z-ui,var(--latin));font-size:12.5px;font-weight:500;color:var(--ink-3);white-space:nowrap} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam small{display:none} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam:hover{background:var(--surface-2)} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam.on{background:var(--surface-3)} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .fam.on b{color:var(--ink)} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .models{ flex:1 1 auto;min-height:0;max-height:none;margin:0;padding:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model{ position:relative;direction:ltr;display:flex;align-items:center;gap:8px;width:100%;min-height:38px; padding:0 10px;border:0;border-radius:9px;background:transparent;text-align:left} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model:hover, :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model.on{background:var(--surface-2);border-color:transparent} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model .what{flex:1;min-width:0} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model .what b{ display:block;font-family:var(--z-ui,var(--latin));font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model.on .what::after{content:none} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .model.on::after{ content:'';flex:none;width:16px;height:16px;background:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} @media(max-width:560px){:is(#pop-imageModel,#pop-videoModel,#pop-musicModel){width:calc(100vw - 20px)}} /* X2 Power in the chat uses the exact red of the landing page button */ #view-chat .turbo-chip[aria-pressed=true],:root[data-turbo=on] #view-chat .turbo-chip{ background:#871522!important;border-color:#ff4b56!important;color:#fff!important; box-shadow:0 0 0 1px #ff4b5655,0 0 14px #ff4b5638!important} #view-chat .turbo-chip[aria-pressed=true]::before,:root[data-turbo=on] #view-chat .turbo-chip::before{ background:#ff4b56!important;box-shadow:0 0 6px #ff4b56!important} /* quiet status line inside the reply (retry / continue notices) */ .z-status{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:13px;line-height:1.6} .z-status-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;animation:zc-pulse 1.2s ease-in-out infinite} @keyframes zc-pulse{0%,100%{opacity:.35}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.z-status-dot{animation:none}} /* sidebar + menu rows: icon and label share one optical size (icon never smaller than the text) */ .nav,.newchat{font-size:14px;line-height:1} .nav svg,.newchat svg{width:20px;height:20px;flex:none} .plus-menu>button{gap:12px;padding-block:9px} .plus-menu>button>svg{width:20px;height:20px} .plus-menu .mi b{font-size:13.5px} .plus-menu .mi small{font-size:11.5px} body.rail-min .newchat,body.rail-min .nav{font-size:0} /* ═════ v3.12 · model menu = one slim list, families open a flyout ═════ */ :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel){ width:280px!important;max-width:calc(100vw - 24px);max-height:none!important;overflow:visible!important;padding:6px;gap:4px} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .families{display:none!important} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) input[type=search]{margin:2px 2px 4px;width:calc(100% - 4px)} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .models{ display:flex!important;flex-direction:column;gap:1px;overflow:visible!important;max-height:none!important} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) :is(.model,.mhead){ position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px; border:0;border-radius:9px;background:transparent!important;color:var(--ink);text-align:left;cursor:pointer;font:inherit} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) :is(.model,.mhead):hover, :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.open>.mhead, :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .model:focus-visible{background:var(--surface-2)!important} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .model.on{background:transparent!important;border:0} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .what{flex:1;min-width:0} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .what b{ font-family:var(--z-ui,var(--latin));font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mcur{flex:none;max-width:110px;color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mchev{flex:none;width:16px;height:16px;color:var(--ink-3);transform:rotate(-90deg)} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.has-on>.mhead .mchev{color:var(--brand)} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow{position:relative} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .sub{ display:none;position:absolute;left:calc(100% + 2px);top:-6px;z-index:5;width:260px;padding:6px;box-sizing:border-box; background:var(--surface);border:1px solid var(--line-2);border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.2);max-height:calc(100dvh - 24px);overflow-y:auto} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .sub::before{content:'';position:absolute;left:-10px;top:0;width:10px;height:100%} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.open>.sub{display:block} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.fly-left>.sub{left:auto;right:calc(100% + 2px)} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.fly-left>.sub::before{left:auto;right:-10px} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.fly-up>.sub{top:auto;bottom:-6px} @media(max-width:560px){ :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel){width:calc(100vw - 24px)!important} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .sub{position:static;width:auto;box-shadow:none;border:0; padding:0 0 4px 14px;max-height:none;background:transparent} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.open>.mhead .mchev{transform:none} } /* messages never cover the composer; build badge never covers the sidebar */ .toast{inset-block-end:auto!important;inset-block-start:16px!important;inset-inline-start:50%!important; inset-inline-end:auto!important;transform:translateX(-50%)!important;max-width:min(560px,calc(100vw - 24px))} .toast.hide{transform:translate(-50%,-10px)!important} .zeka-build-badge{left:auto!important;right:10px;bottom:6px!important;opacity:.45;font-size:9px} /* collapsed rail: language / theme rows stay inside the narrow column */ body.rail-min .prefs,body.rail-min .rail .langs,body.rail-min .rail .themes{ max-width:100%;flex-wrap:wrap;justify-content:center;overflow:hidden} body.rail-min .rail .lang button{padding-inline:6px} /* X2 Power: the page goes the landing red in light theme too */ :root[data-theme=light]{--z-power-red:#a30f17} :root[data-theme=light][data-turbo-pulse="on"] #view-chat .head, :root[data-theme=light][data-turbo-pulse="on"] #view-chat .hero, :root[data-theme=light][data-turbo-pulse="on"] .view>.head{color:#fff} :root[data-theme=light][data-turbo-pulse="on"] :is(#view-chat .stream,#view-chat .head){ --ink:#f2ece2;--ink-2:#f2ece2;--ink-3:#ead9d6;--ink-4:#e3c8c5;color:#f2ece2} :root[data-theme=light][data-turbo-pulse="on"] #view-chat .head em, :root[data-theme=light][data-turbo-pulse="on"] #view-chat .head i{color:#FFE1D6} body.rail-min .prefs{display:none!important} /* v3.14: readable, consistent media composers and anchored option menus. */ :root[data-theme="dark"] .studio-composer{border:1.5px solid #f2ece2} :root[data-theme="light"] .studio-composer{border:1.5px solid #111114} .studio-composer:focus-within{border-color:var(--brand)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 24%,transparent)} .studio-composer .chip[data-pop]{border:1px solid var(--brand-line);border-radius:999px;padding:7px 11px;min-height:38px;max-width:min(100%,360px)} .studio-composer .chip[data-pop] .val{font-size:13px;font-weight:600;color:var(--ink)} .studio-composer .chip[data-pop][aria-expanded="true"]{border-color:var(--brand);background:var(--brand-soft)} .z-compact-pop{width:min(295px,calc(100vw - 20px));padding:9px;border:1px solid var(--brand-line)!important;border-radius:15px;box-shadow:0 14px 44px #0004;background:var(--surface);color:var(--ink);direction:ltr;text-align:left} .z-compact-pop h4{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--ink-3);margin:3px 9px 8px;text-transform:uppercase} .z-compact-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden} .z-compact-list{display:flex;flex-direction:column;gap:3px;max-height:min(48dvh,315px);overflow-y:auto} .z-compact-choice{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;min-height:42px;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font:500 13px var(--z-ui,var(--sans));cursor:pointer;line-height:1.4} .z-compact-choice:hover,.z-compact-choice:focus-visible{background:var(--surface-2);outline:none;border-color:var(--line-2)} .z-compact-choice.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--ink)} .z-compact-choice svg{height:17px;width:17px;fill:none;stroke:var(--brand);stroke-width:2.1;flex:none;visibility:hidden} .z-compact-choice.on svg{visibility:visible} @media(max-width:600px){.studio-composer .chip[data-pop]{min-height:42px}.z-compact-choice{min-height:44px}} /* v3.14: consistent high-contrast outer chat/media composer frame. */ :root[data-theme="dark"] .composer{border-color:#f2ece2!important;border-width:1.5px!important} :root[data-theme="light"] .composer{border-color:#111114!important;border-width:1.5px!important} /* ZEKA v3.15 — consistent composition surface inspired by accessible popover/listbox systems. Reference tips are still in data and service errors; they do not crowd the composer. */ :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer), :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer):focus-within { border:1.5px solid #f2ece2!important; box-shadow:0 12px 36px rgba(0,0,0,.19)!important; } :root[data-theme="light"] :is(#view-chat .composer,.studio-composer), :root[data-theme="light"] :is(#view-chat .composer,.studio-composer):focus-within { border:1.5px solid #171717!important; box-shadow:0 10px 32px rgba(40,30,20,.08)!important; } /* No verbose reference/count/HTTPS or routine estimated-price copy under controls. */ .studio-composer .refhead{display:none!important} #imageNote:not([role="alert"]),#videoNote:not([role="alert"]),#musicNote:not([role="alert"]), #videoPricePreview:not([role="alert"]){display:none!important} #imageRefBox,#videoRefBox{padding:10px 14px 0;min-height:0} .studio-composer .refbox .row[id$="RefActions"]:not(:empty){display:flex;gap:8px;align-items:center} .studio-composer .refbox [data-ref-add]{ appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center; flex:0 0 78px;width:78px;min-height:72px;padding:6px;border:1px dashed var(--line-ctl); border-radius:14px;background:var(--surface-2);color:transparent;position:relative; overflow:hidden;white-space:nowrap;font-size:0;line-height:1; } .studio-composer .refbox [data-ref-add]::before{ content:'+';font:400 22px/1 var(--z-ui,var(--sans));color:var(--ink-2); display:block;margin-bottom:7px; } .studio-composer .refbox [data-ref-add]::after{ content:'Reference';font:500 11px/1.25 var(--z-ui,var(--sans));color:var(--ink-2); } .studio-composer .refbox [data-ref-add]:hover, .studio-composer .refbox [data-ref-add]:focus-visible{background:var(--surface-3);border-color:var(--ink-3);outline-offset:2px} .studio-composer .refbox .attach-row{padding:6px 0} .studio-composer .bar{gap:7px;align-items:center;flex-wrap:wrap;padding:6px 10px 10px} .studio-composer .chip[data-pop]{display:inline-flex;align-items:center;gap:7px;min-height:38px; padding:7px 11px;border:1px solid var(--line-2);border-radius:999px; max-width:min(100%,310px);background:transparent;white-space:nowrap} .studio-composer .chip[data-pop]:hover,.studio-composer .chip[data-pop][aria-expanded="true"]{ background:var(--surface-2);border-color:var(--ink-3)} .studio-composer .chip[data-pop] .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .studio-composer .chip[data-pop] .caret{width:14px;height:14px;flex:none} /* Optional music input fields must never force a giant empty composer. */ #view-music .studio-composer{overflow:visible} #view-music .studio-composer #musicDesc{min-height:67px;max-height:min(32vh,180px);padding:16px 18px 5px} #view-music .studio-composer #musicExtra[hidden]{display:none!important} #view-music .studio-composer #musicExtra{ padding:8px 16px 12px;border-top:1px solid var(--line-2); display:grid;gap:10px;background:transparent } #view-music .studio-composer #musicExtra .field{display:grid;gap:5px;margin:0;min-width:0} #view-music .studio-composer #musicExtra .field>span{font-size:12px;color:var(--ink-3)} #view-music .studio-composer #musicExtra textarea{ min-height:82px;max-height:160px;height:82px;resize:vertical;padding:9px 12px; border:1px solid var(--line-ctl);border-radius:12px;background:var(--field);font-size:14px } #view-music .studio-composer #musicExtra input[type=text], #view-music .studio-composer #musicExtra input[type=number]{ min-height:38px;height:38px;border:1px solid var(--line-ctl);border-radius:10px} #view-music .studio-composer #musicExtra .pair{display:flex;align-items:end;gap:12px;flex-wrap:wrap} #view-music .studio-composer #musicExtra .pair>.field{flex:1 1 180px} #view-music .studio-composer #musicExtra .check{display:flex;align-items:center;gap:8px;min-height:38px;font-size:13px} #view-music .studio-composer #musicExtra .check input{width:17px;height:17px;min-height:17px;accent-color:var(--brand)} #view-music .studio-composer .z-music-extra-trigger{display:inline-flex;align-items:center;gap:7px; min-height:38px;padding:7px 11px;border-radius:999px;background:transparent; border:1px solid var(--line-2);font-size:12.5px;white-space:nowrap} #view-music .studio-composer .z-music-extra-trigger[aria-expanded=true]{background:var(--surface-2);border-color:var(--ink-3)} #view-music .studio-composer .z-music-extra-trigger .ic{width:16px;height:16px} #view-music .studio-composer .z-music-extra-trigger .caret{width:13px;height:13px;transition:transform .15s} #view-music .studio-composer .z-music-extra-trigger[aria-expanded=true] .caret{transform:rotate(180deg)} /* Accessible responsive media menus: bounded height, no detached flyout overflow. */ :is(#pop-imageModel,#pop-videoModel,#pop-musicModel){ max-height:min(70dvh,470px)!important;max-width:calc(100vw - 20px);overflow-y:auto!important; border-radius:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink); } :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model, :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .mhead{min-height:42px} @media(max-width:600px){ #view-music .studio-composer .bar{gap:5px} #view-music .studio-composer .z-music-extra-trigger span{font-size:12px} :is(#pop-imageModel,#pop-videoModel,#pop-musicModel){max-height:55dvh!important} } /* v3.16: nested models are a real adjacent flyout on desktop. Small viewports use an in-list fallback because two columns cannot fit. */ /* Reference tile sits inside the writing area, like the supplied compact example. When files exist, thumbnails use their own row and the prompt gets full width. */ .studio-composer:has(>.refbox:not([hidden])){ display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:4px;align-items:center; } .studio-composer:has(>.refbox:not([hidden]))>.refbox{ grid-column:1;grid-row:1;padding:10px 4px 2px 12px;min-width:0; } .studio-composer:has(>.refbox:not([hidden]))>textarea{ grid-column:2;grid-row:1;min-width:0;padding:16px 12px 5px 4px; } .studio-composer:has(>.refbox:not([hidden]))>.bar{grid-column:1/-1;grid-row:3} .studio-composer:has(>.refbox:not([hidden])):has(.refbox .attach)>.refbox{ grid-column:1/-1;grid-row:1;padding:10px 12px 2px; } .studio-composer:has(>.refbox:not([hidden])):has(.refbox .attach)>textarea{ grid-column:1/-1;grid-row:2;padding:14px 18px 3px; } .studio-composer .refbox .row[id$="RefActions"]{min-width:0} .studio-composer .refbox [data-ref-add]{width:78px;min-width:78px} /* Media screens show only actionable labels and controls, not repeated tutorials. */ :is(#view-image,#view-video,#view-music) .head .grow>p, :is(#view-image,#view-video,#view-music) .results .empty>p{display:none} /* ZEKA v3.17 — softer inverted composer surface. Dark theme uses a warm cream (not pure white) to reduce eye strain; light theme keeps the requested black surface. */ :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer){ --surface:#f2ece2;--surface-2:#ebe3d6;--surface-3:#dfd4c3;--field:#f6f1e8; --ink:#181614;--ink-2:#2c2722;--ink-3:#564f47;--ink-4:#72685e; --line:#d2c7b6;--line-2:#c5baa9;--line-ctl:#867968; --key:#171717;--key-2:#2b2b2b;--key-on:#ffffff; --brand-soft:#ece2d4;--brand-line:#b39c81; background:#f2ece2!important;color:#181614!important;border:1.5px solid #f2ece2!important; box-shadow:0 18px 48px rgba(0,0,0,.24)!important; } :root[data-theme="light"] :is(#view-chat .composer,.studio-composer){ --surface:#000000;--surface-2:#232323;--surface-3:#303030;--field:#111111; --ink:#ffffff;--ink-2:#eeeeee;--ink-3:#c8c8c8;--ink-4:#aaaaaa; --line:#414141;--line-2:#646464;--line-ctl:#aaaaaa; --key:#ffffff;--key-2:#eaeaea;--key-on:#111111; --brand-soft:#332619;--brand-line:#94724c; background:#000000!important;color:#ffffff!important;border:1.5px solid #000000!important; box-shadow:0 18px 48px rgba(35,25,15,.15)!important; } :is(#view-chat .composer,.studio-composer):focus-within{ outline:2px solid transparent; } :is(#view-chat .composer,.studio-composer) textarea, :is(#view-chat .composer,.studio-composer) input:not([type=checkbox]), :is(#view-chat .composer,.studio-composer) .chip, :is(#view-chat .composer,.studio-composer) .tool{ color:var(--ink);caret-color:var(--ink); } :is(#view-chat .composer,.studio-composer) textarea::placeholder, :is(#view-chat .composer,.studio-composer) input::placeholder{color:var(--ink-4)!important;opacity:1} :is(#view-chat .composer,.studio-composer) .bar{ display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 12px 12px; } .studio-composer .bar .grow{flex:1 1 0;min-width:0} .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger){ min-height:38px;border:1px solid var(--line-2);background:var(--surface); color:var(--ink);max-width:min(100%,330px);font-size:12.5px; } .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger):hover, .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger)[aria-expanded=true]{ border-color:var(--line-ctl);background:var(--surface-2);color:var(--ink) } .studio-composer .bar .chip .val,.studio-composer .bar .chip .lbl{color:var(--ink);white-space:nowrap} .studio-composer .send,#view-chat .composer .send{background:var(--key)!important;color:var(--key-on)!important} .studio-composer .send svg,#view-chat .composer .send svg{color:inherit} .studio-composer .refbox [data-ref-add]{background:var(--surface-2);border-color:var(--line-ctl)} .studio-composer .refbox [data-ref-add]::before,.studio-composer .refbox [data-ref-add]::after{color:var(--ink-2)} /* Use the fixed-height, wrapping control design with send button kept at the end. */ .studio-composer .bar>.send{margin-left:auto} @media(max-width:560px){ .studio-composer .bar{padding:8px 10px 11px;gap:6px} .studio-composer .bar .chip[data-pop] .lbl{display:none} .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger){max-width:calc(100vw - 42px)} } /* ZEKA v3.19 — compact media control chips (~25% smaller) so settings fit naturally inside every composer, especially video. */ /* v3.21 size system for every composer (chat + image/video/music): round buttons (+ and send) = 38px, option chips / model trigger / X2 chip = 32px. */ :root{--cmp-btn:38px;--cmp-chip:32px} .studio-composer .bar{gap:6px;padding:8px 12px 10px;align-items:center} .studio-composer .tool, .studio-composer .send{width:var(--cmp-btn);height:var(--cmp-btn)} .studio-composer .chip, .studio-composer .chip[data-pop], .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger), #view-music .studio-composer .z-music-extra-trigger{ min-height:var(--cmp-chip)!important;height:var(--cmp-chip);border-radius:999px; padding:4px 11px!important;gap:6px;font-size:12px!important; } #view-chat .turbo-chip,#view-chat .z-model-trigger{height:var(--cmp-chip)} .studio-composer .chip .val, .studio-composer .chip[data-pop] .val, .studio-composer .bar .chip .val, .studio-composer .bar .chip .lbl, .studio-composer .bar :is(.chip[data-pop],.z-music-extra-trigger){font-size:12px!important;line-height:1.15} .studio-composer .chip[data-pop] .caret, #view-music .studio-composer .z-music-extra-trigger .caret{width:12px;height:12px} #view-video .studio-composer textarea{min-height:48px;padding:14px 18px 2px;max-height:min(24vh,132px)} #view-video .studio-composer .bar{padding-top:6px;padding-bottom:10px;align-items:flex-end} @media (pointer:coarse){ :root{--cmp-btn:42px;--cmp-chip:36px} #view-chat .tool,#view-chat .send{width:var(--cmp-btn);height:var(--cmp-btn)} } /* Side-by-side submenu inspired by anchored accessible menu patterns. Remove the v3.15 stacked override; prevent parent overflow clipping. */ @media(min-width:641px){ :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel):not([hidden]){ overflow:visible!important;max-height:none!important; } :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .models{ overflow:visible!important;max-height:none!important; } :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow{position:relative} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow>.sub{ display:none;position:absolute!important;top:-6px;left:calc(100% + 6px)!important; right:auto!important;bottom:auto!important;z-index:850;width:260px; max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden; margin:0;padding:6px;border:1px solid var(--line-2);border-radius:14px; background:var(--surface);box-shadow:0 18px 46px rgba(0,0,0,.34) } :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.open>.sub{display:block} :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.fly-left>.sub{ left:auto!important;right:calc(100% + 6px)!important; } :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow>.sub::before{display:none} } @media(max-width:640px){ :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow>.sub{ position:static!important;inset:auto!important;width:100%!important;max-height:38dvh!important; overflow-y:auto!important;box-shadow:none!important;margin:4px 0 6px!important; padding:4px 0 4px 12px!important;border:0!important;border-inline-start:2px solid var(--brand-line)!important; background:transparent!important; } :is(#chatPickerPane,#pop-imageModel,#pop-videoModel,#pop-musicModel) .mrow.open>.sub{display:block} } /* Video composer: keep the prompt area compact so option chips sit lower, closer to the bottom edge instead of floating in the middle. */ #view-video .studio-composer{display:flex;flex-direction:column;justify-content:flex-start} #view-video .studio-composer textarea{ min-height:46px;max-height:min(26vh,150px);padding:15px 18px 2px;line-height:1.5 } #view-video .studio-composer .bar{padding:8px 14px 14px;align-items:flex-end} #view-video .studio-composer .bar>.send{align-self:flex-end} /* Final theme rule also wins when a field is focused. */ :root[data-theme="light"] :is(#view-chat .composer,.studio-composer), :root[data-theme="light"] :is(#view-chat .composer,.studio-composer):focus-within{background:#000000!important;border:1.5px solid #000000!important} :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer), :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer):focus-within{background:#f2ece2!important;border:1.5px solid #f2ece2!important} /* ZEKA v3.29 — active chat is text-only: landing/empty-chat eye is untouched. */ #view-chat:not(.is-empty) .z-chat-ambient{display:none!important;visibility:hidden!important;opacity:0!important} #view-chat:not(.is-empty) .z-chat-hero{display:none!important} /* Answers follow the selected interface language, not the first ASCII token. */ #view-chat .stream .msg.ai .bubble{ color:var(--ink)!important;font-size:15.5px;line-height:1.95; font-weight:400;letter-spacing:normal;white-space:normal!important; word-break:normal;overflow-wrap:anywhere;text-rendering:optimizeLegibility; max-width:min(92%,860px); } #view-chat .stream .msg.ai .bubble[dir="rtl"]{direction:rtl;text-align:right;unicode-bidi:embed} #view-chat .stream .msg.ai .bubble[dir="ltr"]{direction:ltr;text-align:left} #view-chat .stream .msg.ai .bubble b, #view-chat .stream .msg.ai .bubble strong{font-weight:650} #view-chat .stream .msg.ai .bubble .li{display:block;line-height:1.9} #view-chat .stream .msg.ai .bubble .codeblock, #view-chat .stream .msg.ai .bubble pre{direction:ltr;text-align:left;unicode-bidi:isolate} #view-chat .stream .msg.ai .bubble pre{white-space:pre-wrap!important} #view-chat .stream .msg.ai .bubble .z-table-scroll{overflow-x:auto;max-width:100%} /* Dots variant of the supplied loading-state component, adapted without React. */ .z-think-bubble{background:transparent!important;padding:7px 0!important} .z-thinking{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1.35; max-width:100%;color:var(--ink-3);white-space:nowrap} .z-thinking-grid{display:grid;grid-template-columns:repeat(3,4px);gap:1.5px;flex:none} .z-thinking-pixel{display:block;width:4px;height:4px;border-radius:50%;background:var(--ink); opacity:.12;animation:zeka-pixel-on 650ms ease-in-out infinite} .z-thinking-label{color:var(--ink-2);font-weight:500; background-image:linear-gradient(90deg,var(--ink-3) 35%,var(--ink) 50%,var(--ink-3) 65%); background-size:200% 100%;background-clip:text;-webkit-background-clip:text; -webkit-text-fill-color:transparent;animation:zeka-shimmer-text 1.4s linear infinite} .z-thinking-time{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums} @keyframes zeka-pixel-on{0%,100%{opacity:.12}50%{opacity:1}} @keyframes zeka-shimmer-text{0%{background-position:200% 0}100%{background-position:-200% 0}} @media(prefers-reduced-motion:reduce){ .z-thinking-pixel,.z-thinking-label{animation:none!important} .z-thinking-label{-webkit-text-fill-color:var(--ink-2);background:none} } /* Prevent literal HTML template indentation from inflating user bubbles. */ #view-chat .stream .msg.me .bubble{white-space:normal!important} /* v3.36.8: direction follows content, not app language or first Latin token. */ #view-chat .stream .msg .bubble[dir="rtl"]{direction:rtl;text-align:right;unicode-bidi:embed} #view-chat .stream .msg .bubble[dir="ltr"]{direction:ltr;text-align:left} #view-chat .stream .msg .bubble .codeblock, #view-chat .stream .msg .bubble pre{direction:ltr;text-align:left;unicode-bidi:isolate} /* v3.36.9: standard Markdown blocks; individual Persian blocks align RTL. */ #view-chat .stream .msg .bubble p { margin: 0 0 .65em; white-space: normal; text-align: start; } #view-chat .stream .msg .bubble h1, #view-chat .stream .msg .bubble h2, #view-chat .stream .msg .bubble h3, #view-chat .stream .msg .bubble h4, #view-chat .stream .msg .bubble h5, #view-chat .stream .msg .bubble h6 { margin: .7em 0 .35em; line-height: 1.45; text-align: start; } #view-chat .stream .msg .bubble .z-md-list { margin: .35em 0 .8em; padding-inline-start: 1.7em; text-align: start; } #view-chat .stream .msg .bubble .z-md-list li { display: list-item; margin: .1em 0; } #view-chat .stream .msg .bubble blockquote { margin: .65em 0; padding: .15em .9em; border-inline-start: 3px solid var(--line); text-align: start; } #view-chat .stream .msg .bubble .z-md-hr { margin: 1em 0; border: 0; border-top: 1px solid var(--line); } #view-chat .stream .msg .bubble a:not(.fcard) { color: var(--brand); text-decoration: underline; overflow-wrap: anywhere; } #view-chat .stream .msg .bubble .codeblock { unicode-bidi: isolate; } /* v3.36.42 — compact, localized model curation. Only UI hints; never price data. */ :is(#pop-videoModel) .model .what .z-model-reason { display:block;margin-top:3px;font-size:10.5px;line-height:1.25; font-weight:400;color:var(--ink-3);white-space:nowrap; overflow:hidden;text-overflow:ellipsis } :is(#pop-videoModel) .model:has(.z-model-reason){min-height:48px;padding-block:5px} #videoWanRecommendation:not([hidden]){ display:inline-flex;align-items:center;max-width:min(280px,100%); min-height:25px;padding:3px 9px;box-sizing:border-box;border-radius:999px; border:1px solid var(--line-2);background:var(--surface-2); color:var(--ink-2);font-size:10.5px;font-weight:500;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:var(--z-ui,var(--latin)) } #videoWanRecommendation[hidden]{display:none!important} @media(max-width:560px){ #videoWanRecommendation:not([hidden]){max-width:calc(100vw - 24px);font-size:10px} } .z-chat-file-preview video{display:block;max-width:220px;max-height:130px;width:100%;border-radius:9px;background:#111} /* ZEKA R18 SOURCE: zeka-fixes.css */ /* ZEKA 3.36.45 — focused UI/accessibility regression repairs. Loaded last to avoid adding another set of competing !important rules to the older composer stylesheet. */ :root{--z-focus:var(--brand)} :where(button,input,textarea,a,[tabindex]):focus-visible{ outline:2px solid var(--z-focus);outline-offset:2px } /* The model pane is appended directly to document.body. Its scrollable list, not the viewport, owns vertical overflow, including flat search results. */ #chatPickerPane.z-model-pop:not([hidden]){ box-sizing:border-box;max-width:calc(100vw - 24px); display:flex;flex-direction:column;min-height:0; } #chatPickerPane.z-model-pop.is-searching:not([hidden]){ overflow:hidden!important;min-height:0!important; } #chatPickerPane.z-model-pop.is-searching .models.flat{ min-height:0;flex:1 1 auto;max-height:none!important; overflow-y:auto!important;overflow-x:hidden!important; overscroll-behavior:contain;scrollbar-width:thin } @media(max-width:640px){ #chatPickerPane.z-model-pop:not([hidden]){overflow:hidden!important} #chatPickerPane.z-model-pop .models{min-height:0!important;flex:1 1 auto; overflow-y:auto!important;max-height:none!important} } #chatPickerPane .models.flat .model{flex-shrink:0} /* All option chips, including Creative Mode and Aspect Ratio, share the same subtle border as the model selector. */ .studio-composer .bar .demo-option>.chip[data-demo-pop], .studio-composer .bar .chip[data-pop]{ border:1px solid var(--line-2);background:var(--surface);border-radius:var(--pill) } .studio-composer .bar .demo-option>.chip[data-demo-pop]:hover, .studio-composer .bar .demo-option>.chip[data-demo-pop][aria-expanded=true]{ border-color:var(--line-ctl);background:var(--surface-2) } /* Body-mounted option popups need to beat the floating version badge. */ body>.z-compact-pop,body>.pop.z-compact-pop, body>.pop[id^="pop-"]{z-index:120} /* Mobile drawer: truly hidden until opened, so keyboard focus cannot enter invisible sidebar controls. Desktop behaviour remains unchanged. */ @media(max-width:1059px){ body:not(.open) .rail{visibility:hidden;pointer-events:none} body.open .rail{visibility:visible;pointer-events:auto} } .threads-list .thread:focus-visible{outline:2px solid var(--z-focus);outline-offset:-2px} .threads-list .thread:focus-within .tact{opacity:1;visibility:visible;pointer-events:auto} #zAskInput{display:block;width:100%;margin:8px 0 12px;padding:11px 13px; font:inherit;color:var(--ink);background:var(--surface-2); border:1px solid var(--line-2);border-radius:10px} .z-ask-label{display:block;font-size:13px;color:var(--ink-2)} /* Preserve the screen-reader label even when the visual label is compacted. */ @media(max-width:560px){ .studio-composer .bar .chip[data-pop] .lbl{ display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 } .studio-composer .bar{position:relative;padding-inline-end:58px;align-items:center} .studio-composer .bar>.send{position:absolute;right:10px;bottom:10px;margin:0} .studio-composer .bar>.grow{flex-basis:0;min-width:0} #view-chat .bar{flex-wrap:nowrap;min-width:0} #view-chat .bar .grow{min-width:0} } /* One focus color throughout interactions, without hiding the keyboard ring. */ :where(button,input,textarea,select,a,[tabindex]):focus-visible{outline-color:var(--brand)!important} .prefs .seg svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;pointer-events:none} /* ZEKA R18 SOURCE: zeka-rail.css */ /* Sidebar: one icon size and weight in both states, and a collapsed state that keeps the logo. */ .rail .nav svg,.rail .newchat svg{width:20px;height:20px;flex:none;stroke-width:1.75} .rail .nav svg{opacity:.75} .rail .nav.on svg,.rail .nav:hover svg{opacity:1} .rail .rail-toggle svg{width:18px;height:18px} body.rail-min .brandline{display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:10px;width:100%;height:auto;margin:0 0 10px} body.rail-min .brandline .z{display:grid!important;width:40px;height:40px;flex:none} body.rail-min .brandline .txt{display:none} body.rail-min .rail-toggle{display:grid!important;place-items:center;width:40px;height:40px;flex:none; border-radius:12px;background:transparent;border:1px solid var(--line-2);box-shadow:none;color:var(--ink-3)} body.rail-min .rail-toggle:hover{background:var(--surface-2);color:var(--ink)} /* the floating copy of the toggle sat exactly on the in-rail one and drew a second box under it */ .zeka-rail-reopen{display:none!important} body.rail-min .rail{align-items:center;gap:8px;padding:18px 10px} body.rail-min .newchat,body.rail-min .nav{width:40px;height:40px;min-height:40px;margin:0;padding:0; border-radius:12px;justify-content:center;flex:none} body.rail-min .newchat svg,body.rail-min .nav svg{width:20px;height:20px} body.rail-min .nav .tip{display:none} /* v3.36.38 · scoped media history; distinct from text conversations. */ .z-media-history-pane[hidden]{display:none!important} .z-media-history-pane{min-height:0;overflow-y:auto;flex:1} .z-media-thread{display:flex;width:100%;flex-direction:column;gap:5px;text-align:start;border:0;background:transparent;color:var(--ink-2);cursor:pointer;min-height:52px;padding:10px 12px;font:inherit;border-radius:var(--r-sm)} .z-media-thread:hover{background:var(--surface-2)} .z-media-thread.on{background:var(--surface-3);color:var(--ink)} .z-media-thread b{display:block;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .z-media-thread small{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail .chats-label[hidden],.rail #threadSearch[hidden],.rail #threadList[hidden]{display:none!important} /* ZEKA R18 SOURCE: designer-v328-extras.css */ /* Designer preview extensions (the production v3.20 CSS above is unchanged). */ body.open .scrim{display:block;pointer-events:auto} .demo-prefs{display:flex;gap:6px;align-items:center;padding:5px 0} .demo-prefs button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-2);border-radius:10px;color:var(--ink);font-size:18px} .demo-prefs button[aria-pressed="true"]{background:var(--surface-2);border-color:var(--brand);color:var(--brand)} .demo-lang{font-size:11px;font-weight:700;margin-inline:auto;color:var(--ink-3)} .demo-empty-hero{align-self:center;margin:auto 0;text-align:center;max-width:100%;pointer-events:none} .demo-empty-hero h2{font-family:var(--z-display);font-weight:900;line-height:.97;letter-spacing:-.02em;font-size:clamp(40px,8vw,100px)} .demo-empty-hero em{font-style:normal;color:var(--ink-3)} .demo-empty-hero p{font-size:13px;color:var(--ink-3);margin-top:22px} .demo-option .pop{z-index:2100} #view-chat .stream .msg .bubble{white-space:pre-wrap} #view-chat .stream .z-chat-file-preview{white-space:normal} #zekaBuildBadge{max-width:max-content} @media(max-width:640px){.demo-empty-hero h2{font-size:clamp(36px,9vw,62px)}} /* ═════ v3.21 designer fixes ═════ */ /* 1. Page headings: light theme now uses the same heavy upright face as dark (it was italic regular). */ :root[data-theme=light] .head h1 em{font-style:normal;font-family:var(--z-display);font-weight:900;color:var(--ink)} /* 2. Empty chat: the real eye sits behind the two-word title, exactly like the landing. */ .demo-hero-stage{position:relative;display:grid;place-items:center;width:100%} .demo-hero-stage h2{position:relative;z-index:1} .demo-hero-stage .z-chat-eye{--s:min(30vmin,240px);position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);z-index:2;pointer-events:none} /* 3. Settings tabs: one readable column, hidden groups leave no empty gap. */ #view-settings .pane{grid-template-columns:minmax(0,760px)!important;justify-content:start} #view-settings .pane>div:not(:has([data-z-settings-section]:not([hidden]))){display:none} /* 4. Build badge never touches the composer on phones. */ @media(max-width:640px){.zeka-build-badge{bottom:2px!important;font-size:8.5px;padding:2px 5px}} /* 5. Mixed Persian / English text: direction follows the first strong character (set by JS). */ [dir=auto]{text-align:start} .thread b{display:block} /* 6. Reference tile row inside Image / Video composers. */ .studio-composer .refbox .row.attach-row{margin-top:0} /* ═════ v3.22: video / image composer layout + language switcher ═════ */ :is(#view-video,#view-image) .composer-wrap{padding-inline:max(24px,calc((100% - 1080px)/2));padding-bottom:calc(26px + env(safe-area-inset-bottom))} :is(#view-video,#view-image) .studio-composer{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; width:100%;min-height:0;border-radius:30px} :is(#view-video,#view-image) .studio-composer>.refbox{order:0;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px; width:100%;padding:12px 18px 0;margin:0} :is(#view-video,#view-image) .studio-composer>.refbox .row{margin:0;display:flex;align-items:center;gap:10px;min-width:0} :is(#view-video,#view-image) .studio-composer>.refbox .row[id$="RefActions"]{order:-1} :is(#view-video,#view-image) .studio-composer>.refbox [data-ref-add]{flex:0 0 auto;width:68px;min-width:68px;min-height:64px;padding:4px;border-radius:14px} :is(#view-video,#view-image) .studio-composer>.refbox [data-ref-add]::after{content:attr(data-label)} :is(#view-video,#view-image) .studio-composer>textarea{order:1;flex:1 1 auto;min-height:60px;max-height:min(24vh,160px); padding:14px 22px 4px;font-size:16px;line-height:1.65} :is(#view-video,#view-image) .studio-composer>.bar{order:2;margin-top:auto;width:100%;padding:4px 14px 12px; direction:inherit;justify-content:flex-start;align-items:center;gap:8px;row-gap:8px} :is(#view-video,#view-image) .studio-composer .bar>.grow{display:none} :is(#view-video,#view-image) .studio-composer .bar>.send{margin-left:0;margin-inline-start:auto;align-self:center} .results .empty b,.results .empty p{text-align:center} @media(max-width:640px){:is(#view-video,#view-image) .studio-composer{min-height:0;border-radius:22px} :is(#view-video,#view-image) .composer-wrap{padding-inline:12px} :is(#view-video,#view-image) .studio-composer>.bar{padding:6px 10px 12px}} .zg-card{display:flex;gap:16px;align-items:center;width:100%;max-width:860px;align-self:center;padding:14px;margin-bottom:12px;border:1px solid var(--line-2);border-radius:18px;background:var(--surface-2)} .zg-media{flex:none;width:210px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center} .zg-media img,.zg-media video{width:100%;height:100%;object-fit:contain;background:#000}.zg-media audio{width:92%} .zg-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--brand);animation:zgs .8s linear infinite} @keyframes zgs{to{transform:rotate(360deg)}} .zg-info{flex:1;min-width:0;display:grid;gap:6px}.zg-info b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zg-info small,.zg-st{font-size:12px;color:var(--ink-4)} .zg-bar{height:6px;border-radius:9px;background:var(--surface-3);overflow:hidden}.zg-bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .15s} .zg-acts{display:flex;gap:8px;flex:none} @media(max-width:640px){.zg-card{flex-wrap:wrap}.zg-media{width:100%}.zg-acts{width:100%}} /* language switcher */ .demo-prefs{flex-wrap:wrap} .demo-langs{display:flex;gap:4px;margin-inline-start:auto} .demo-prefs .demo-langs button{width:auto;min-width:30px;height:28px;padding:0 6px;border-radius:8px;font-size:11px;font-weight:700} [dir=rtl] .zeka-build-badge{right:auto!important;left:12px!important} /* ZEKA Showcase — live samples + code + download (21st.dev-style) */ .sc-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .sc-cats .btn[aria-pressed=true]{background:var(--surface-3);border-color:var(--brand);color:var(--ink)} .sc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .sc-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s var(--ease),box-shadow .15s} .sc-card:hover,.sc-card:focus-visible{border-color:var(--brand-line);transform:translateY(-2px);box-shadow:var(--shadow-2);outline:0} .sc-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#171717;border-bottom:1px solid var(--line);direction:ltr} .sc-thumb iframe{position:absolute;top:0;left:0;width:800px;height:500px;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .3s} .sc-thumb iframe.on{opacity:1} .sc-meta{display:flex;align-items:center;gap:8px;padding:12px 14px 4px} .sc-meta b{flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sc-tag{font-size:11px;color:var(--ink-4);border:1px solid var(--line-2);border-radius:var(--pill);padding:1px 9px;white-space:nowrap} .sc-acts{display:flex;gap:8px;padding:8px 14px 14px} .sc-modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)} .sc-box{width:min(1100px,100%);height:min(760px,100%);display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-pop);overflow:hidden} .sc-box.sm{width:min(520px,100%);height:auto;max-height:100%;overflow:auto} .sc-mh,.sc-mt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)} .sc-mh b{font-weight:500}.sc-mh small{display:block;color:var(--ink-4);font-size:12px;line-height:1.3} .sc-seg{display:flex;gap:4px} .sc-seg .btn[aria-pressed=true]{background:var(--surface-3);border-color:var(--brand);color:var(--ink)} .sc-mb{flex:1;min-height:0;display:flex;background:var(--canvas)} .sc-stage{flex:1;min-width:0;display:flex;justify-content:center;padding:12px} .sc-stage iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:#171717;transition:width .25s var(--ease)} .pre.sc-code{flex:1;min-width:0;max-height:none;margin:12px;white-space:pre;tab-size:2;direction:ltr;text-align:left} .sc-code .tg{color:var(--brand)}.sc-code .cm{color:var(--ink-4)}.sc-code .st{color:var(--ok)} .sc-box[data-tab=code] .sc-stage,.sc-box[data-tab=code] .sc-vp{display:none} .sc-box[data-tab=preview] .sc-code{display:none} .sc-add{display:grid;gap:12px;padding:16px} .sc-add textarea{min-height:150px;font-family:var(--mono);font-size:12px;direction:ltr;text-align:left} @media(max-width:640px){.sc-modal{padding:0}.sc-box{height:100%;border-radius:0}.sc-box.sm{height:auto}} .pcard{cursor:default} .pv{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1b1b1b;border-bottom:1px solid var(--line);direction:ltr} .pv .w{position:absolute;inset:0} .pv .bg{position:absolute;inset:-40%;background:repeating-linear-gradient(90deg,#ffffff12 0 2px,transparent 2px 36px),repeating-linear-gradient(0deg,#ffffff12 0 2px,transparent 2px 36px),radial-gradient(circle at 70% 30%,#F85F2E33,transparent 40%)} .pv .sj{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;border-radius:50%;background:var(--brand);box-shadow:0 0 30px #F85F2E66} .pv *{animation-duration:3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} .pv[data-a=panr] .bg,.pv[data-a=track] .bg,.pv[data-a=whip] .bg{animation-name:kx} .pv[data-a=whip] .bg{animation-duration:.5s;filter:blur(1px)} .pv[data-a=panl] .bg{animation-name:kxr} .pv[data-a=tiltu] .bg{animation-name:ky} .pv[data-a=tiltd] .bg{animation-name:kyr} .pv[data-a=zin] .w{animation-name:kzi} .pv[data-a=zout] .w{animation-name:kzo} .pv[data-a=izoom] .w{animation-name:kzi;animation-duration:2.2s;--z:5} .pv[data-a=dolly] .bg,.pv[data-a=dollyo] .bg,.pv[data-a=vertigo] .bg{animation-name:kb} .pv[data-a=dolly] .sj,.pv[data-a=dollyo] .sj{animation-name:ks} .pv[data-a=dollyo] *{animation-direction:alternate-reverse} .pv[data-a=orbit] .bg,.pv[data-a=orbitr] .bg{animation-name:kr} .pv[data-a=orbitr] .bg{animation-direction:alternate-reverse} .pv[data-a=crane] .bg{animation-name:kc} .pv[data-a=shake] .w{animation-name:kh;animation-direction:normal;animation-duration:.8s} .pv[data-a=time] .bg{animation-name:kt} @keyframes kx{to{transform:translateX(-18%)}} @keyframes kxr{to{transform:translateX(18%)}} @keyframes ky{to{transform:translateY(-18%)}} @keyframes kyr{to{transform:translateY(18%)}} @keyframes kzi{to{transform:scale(var(--z,1.8))}} @keyframes kzo{from{transform:scale(1.8)}} @keyframes kb{to{transform:scale(1.3)}} @keyframes ks{to{transform:scale(1.9)}} @keyframes kr{to{transform:rotate(60deg)}} @keyframes kc{to{transform:translateY(22%) scale(.75)}} @keyframes kh{0%{transform:translate(0,0)}25%{transform:translate(1%,-1.5%)}50%{transform:translate(-1.5%,1%)}75%{transform:translate(1%,1.5%)}100%{transform:translate(-1%,-1%)}} @keyframes kt{to{filter:hue-rotate(80deg) brightness(.5)}} @media(prefers-reduced-motion:reduce){.pv *{animation:none!important}} .pv.pi{display:grid;place-items:center;color:rgba(255,255,255,.5);background:linear-gradient(135deg,hsl(var(--h) 45% 22%),hsl(calc(var(--h) + 60) 40% 10%))} .pp{margin:0;padding:6px 14px 0;font:11.5px/1.6 var(--mono);color:var(--ink-3);text-align:left;cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pp.open{display:block;-webkit-line-clamp:unset} /* Headline outline over the eye: the iris stays untouched, the letters read as thin engraved lines. */ .z-ghost{position:absolute;z-index:3;margin:0;text-align:center;direction:ltr;color:rgba(242,236,226,.07);-webkit-text-stroke:1.6px rgba(242,236,226,.55);pointer-events:none;text-transform:uppercase;white-space:normal;font-style:normal;transform:none} .z-ghost *{color:inherit!important;font-style:normal!important} /* Rail controls: two segmented groups on one row, one size, one radius, one stroke */ .demo-prefs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:6px 0} .demo-prefs .demo-seg{display:flex;align-items:center;gap:2px;margin:0;padding:3px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)} .demo-prefs .demo-seg button{display:grid;place-items:center;width:30px;min-width:30px;height:28px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink-3);font:600 11px/1 var(--z-ui);letter-spacing:.02em;cursor:pointer;transition:background .15s,color .15s} .demo-prefs .demo-seg.demo-langs button{width:32px;min-width:32px} .demo-prefs .demo-seg button svg{width:16px;height:16px;flex:none} .demo-prefs .demo-seg button:hover{background:var(--surface-2);color:var(--ink)} .demo-prefs .demo-seg button[aria-pressed=true]{background:var(--surface-3);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-line)} .demo-prefs .demo-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .rail .nav svg{width:20px;height:20px;stroke-width:1.75} .rail .nav:focus-visible,.rail .newchat:focus-visible{outline:2px solid var(--brand);outline-offset:2px} @media(pointer:coarse){.demo-prefs .demo-seg button{height:36px;min-width:38px}} /* v3.36.25: targeted RTL/readability/zoom safeguards, no global theme reset. */ :root[dir=rtl] :is(h1,h2,h3,h4,.rail-label,.tgroup,.eyebrow,.head,.nav,.thread,.panel,.empty,.pop,.z-media-pop-head h4){letter-spacing:normal} :root[dir=rtl] :is(#pop-imageModel,#pop-videoModel,#pop-musicModel){direction:rtl;text-align:start} :root[dir=rtl] :is(#pop-imageModel,#pop-videoModel,#pop-musicModel) .model{direction:rtl;text-align:start} .attach .ext{font-size:11px} .z-media-stage:has(img){justify-content:flex-start;align-items:flex-start} .z-media-stage img{margin:auto;flex:none;object-fit:contain;transform:none!important;transition:width .12s,height .12s} .z-media-history{border:1px solid var(--line-2);border-radius:14px;padding:12px;margin:8px 0} .z-media-prompt{margin:10px 0}.z-media-prompt details{margin-top:6px} .media-save-heading{margin:14px 0 10px;font-size:15px} .job.bad{border-color:color-mix(in srgb,var(--line-2),#b94c55 45%)} .z-recovery{opacity:.85}.z-recovery .bubble{font-size:13px} .zeka-build-badge{display:none!important} :root[data-zeka-debug=on] .zeka-build-badge{display:block!important} #view-chat .attach .ext,.studio-composer .attach .ext{font-size:11px} :root[data-zeka-debug=on] .zeka-build-badge{font-size:11px!important} /* v3.36.29: optional text-only owner-funded prompt enhancer */ .z-enhancer-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:2px 15px 6px;min-height:42px} .z-enhance-btn{border:1px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-size:12px;font-weight:700;border-radius:12px;min-height:34px;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .z-enhance-btn:hover{background:var(--brand-2);color:#fff} .z-enhance-btn:focus-visible,.z-enhance-undo:focus-visible{outline:2px solid var(--brand);outline-offset:3px} .z-enhance-btn:disabled{opacity:.65;cursor:wait} .z-enhance-undo{border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--ink);min-height:32px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer} .z-enhance-status{font-size:12px;color:var(--ink-3);line-height:1.5;min-width:0;overflow-wrap:anywhere} .z-enhancer-tools [hidden]{display:none!important} :is(#view-image,#view-video) .studio-composer>.z-enhancer-tools{order:2} :is(#view-image,#view-video) .studio-composer>.bar{order:3} @media(max-width:640px){.z-enhancer-tools{padding-inline:11px;gap:6px}.z-enhance-btn{font-size:11px}} /* ZEKA R18 SOURCE: generation.css */ /* ZEKA 3.36.35 — a quiet status, a readable brief, optional waiting game. */ :is(#view-image,#view-video,#view-music) .results>[id$="Jobs"]{ width:100%;max-width:780px;margin-inline:auto;flex:none;min-width:0} .results .job.z-generation{ position:relative;width:100%;max-width:none;min-width:0;margin:14px 0 24px; padding:22px 24px;border:1px solid var(--line);border-radius:22px; background:color-mix(in srgb,var(--surface) 74%,var(--canvas)); box-shadow:0 5px 24px -16px rgb(0 0 0 / .15);gap:0} .z-generation .z-job-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:24px;margin-bottom:17px} .z-job-state{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-3)} .z-job-state>i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--brand)} .z-generation[data-state="done"] .z-job-state{color:var(--ok)} .z-generation[data-state="done"] .z-job-state>i{background:var(--ok)} .z-generation[data-state="failed"] .z-job-state,.z-generation.bad .z-job-state{color:var(--garnet)} .z-generation[data-state="failed"] .z-job-state>i{background:var(--garnet)} .z-job-time{margin:0;color:var(--ink-4);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.025em} .z-generation .z-media-prompt.z-job-prompt{margin:0;min-width:0} .z-job-prompt .z-job-prompt-text{ margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5; overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext; text-align:start;font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.9;color:var(--ink)} .z-job-prompt-text[dir="auto"]{font-family:'Vazirmatn',Tahoma,Arial,system-ui,sans-serif} .z-job-prompt.is-open .z-job-prompt-text{display:block;-webkit-line-clamp:unset;overflow:visible} .z-job-more,.z-job-action,.z-wait-game>summary{ font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--ink-3); background:transparent;border:0;padding:7px 0;min-height:32px;cursor:pointer; text-underline-offset:4px;text-decoration-thickness:1px} .z-job-more{display:block;margin-top:6px;color:var(--brand)} .z-job-more[hidden]{display:none!important} .z-job-more:hover,.z-job-action:hover,.z-wait-game>summary:hover{color:var(--ink);text-decoration:underline} .z-job-more:focus-visible,.z-job-action:focus-visible,.z-wait-game>summary:focus-visible{ outline:2px solid var(--brand);outline-offset:4px;border-radius:4px} .z-job-progress{height:2px;overflow:hidden;background:var(--line);border-radius:8px;margin-top:22px} .z-job-progress>i{display:block;width:32%;height:100%;border-radius:inherit;background:var(--brand); animation:z-generation-wait 2.6s ease-in-out infinite} @keyframes z-generation-wait{0%{transform:translateX(-110%)}100%{transform:translateX(420%)}} :root[dir="rtl"] .z-job-progress>i{animation-direction:reverse} .z-job-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px;margin-top:11px} .z-job-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-width:0; color:var(--ink-4);font-family:var(--sans);font-size:12px;line-height:1.5} .z-job-meta>bdi{max-width:100%;overflow-wrap:anywhere} .z-generation:has(.z-wait-game) .z-job-footer{padding-inline-end:78px} .z-wait-game{margin-top:-32px;min-width:0} .z-wait-game>summary{display:flex;align-items:center;justify-content:center;gap:7px;list-style:none; margin-inline-start:auto;width:max-content;min-width:52px;padding-inline:4px;user-select:none} .z-wait-game>summary::-webkit-details-marker{display:none} .z-wait-game[open]>summary{color:var(--brand)} .z-generation .z-wait-game>.dotbox{margin:16px auto 2px;width:min(100%,340px);min-width:0; min-height:0;max-height:none;aspect-ratio:1;border-radius:16px;color:var(--brand)} .z-generation .dotexpand{color:var(--ink);background:var(--surface-2);border-color:var(--line-2);font-size:18px} .z-generation .dotbox.playing .dotscore{display:inline-flex} .z-generation .dotbox .dotnote{max-width:90%;height:auto;min-height:30px;padding-block:5px;white-space:normal;text-align:center} .z-generation .grid{margin-top:16px;min-width:0} .z-generation .card{min-width:0;overflow:hidden} .z-generation .card .meta>code{min-width:0;max-width:100%;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .z-generation .warn{margin-top:12px;font-size:14px;line-height:1.7} .z-generation .note{font-size:13px;line-height:1.8} :is(#view-image,#view-video,#view-music) .studio-composer>textarea, #view-music .studio-composer #musicDesc{ font-family:'Vazirmatn',Tahoma,Arial,system-ui,sans-serif;font-size:17px;line-height:1.85; min-height:84px;max-height:min(34vh,260px);padding:18px 22px 8px} @media(max-width:640px){ :is(#view-image,#view-video,#view-music) .results{padding-inline:14px} .results .job.z-generation{padding:19px 18px;margin-top:8px;border-radius:18px} .z-generation .z-job-head{margin-bottom:14px} .z-job-prompt .z-job-prompt-text{font-size:16px;line-height:1.95} .z-job-more,.z-job-action,.z-wait-game>summary{min-height:38px} .z-wait-game{margin-top:-38px} .z-job-footer{min-height:38px} :is(#view-image,#view-video,#view-music) .studio-composer>textarea, #view-music .studio-composer #musicDesc{font-size:16px;padding-inline:18px} } @media(prefers-reduced-motion:reduce){.z-job-progress>i{animation:none;transform:none;opacity:.65}} /* 3.36.45: visible, read-only proof of each media job's uploaded references. */ .z-job-references{margin:12px 0 8px;min-width:0} .z-job-ref-heading{display:block;font-size:12px;opacity:.73;margin-bottom:7px} .z-job-ref-grid{display:flex;gap:9px;flex-wrap:wrap} .z-job-ref-item{display:flex;flex-direction:column;gap:4px;min-width:0;width:112px;max-width:145px} .z-job-ref-item img,.z-job-ref-item video{display:block;width:100%;height:88px;object-fit:contain;background:rgba(125,125,125,.10);border:1px solid rgba(125,125,125,.20);border-radius:10px} .z-job-ref-name{font-size:11px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* ZEKA R18 SOURCE: zeka-legibility.css */ /* ZEKA legibility: Vazirmatn for Persian, Inter for English/Turkish/Russian. Google Fonts with system fallbacks; no proprietary font binaries bundled. */ html[lang="fa"] { --z-ui: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; --z-display: "Vazirmatn", Tahoma, sans-serif; } html[lang="en"], html[lang="tr"], html[lang="ru"] { --z-ui: "Inter", "Segoe UI", Arial, sans-serif; --z-display: "Inter", "Segoe UI", Arial, sans-serif; } html:lang(fa) body { font-family: var(--z-ui); line-height: 1.85; } html:lang(fa) :is(h1,h2,h3,h4,.rail-label,.tgroup,.eyebrow,.head,.nav,.thread,.panel,.empty,.pop,.z-media-pop-head h4){letter-spacing:0!important} html:lang(fa) :is(textarea,.bubble,.job,.stream,.results,.z-enhance-status){font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;line-height:1.85;letter-spacing:normal} html:not(:lang(fa)) :is(textarea,.bubble,.job,.stream,.results,.z-enhance-status){font-family:"Inter","Segoe UI",Arial,sans-serif;line-height:1.65;letter-spacing:normal} html :is(.rail-label,.tgroup,.eyebrow,.attach .ext){font-size:11px} html :is(.z-enhance-btn,.z-enhance-undo,.z-enhance-status){font-size:12px} .z-chat-enhancer{padding:2px 10px 0;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .z-chat-enhancer .z-enhance-btn{padding:5px 10px;font-size:11px} .z-chat-enhancer .z-enhance-status{max-width:min(540px,75vw)} /* ZEKA R18 SOURCE: zeka-polish.css */ /* ZEKA Studio Portable — UI polish layer (visual only). Loaded last. No backend, no JS logic, no API behaviour is changed here. Each block fixes one audited defect; delete this file to restore the previous look. */ /* ── 1. Typography: bundled, offline fonts (no Google request needed) ── Azo Sans stays first when the owner has it installed. Onest replaces the generic Inter fallback for Latin/Cyrillic; Vazirmatn covers Persian. */ @font-face{font-family:'ZEKA Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/ZekaVazirmatn-Arabic.woff2) format('woff2-variations'),url(/fonts/ZekaVazirmatn-Arabic.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:'ZEKA Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/ZekaOnest-latin.woff2) format('woff2-variations'),url(/fonts/ZekaOnest-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2010-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'ZEKA Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/ZekaOnest-latin-ext.woff2) format('woff2-variations'),url(/fonts/ZekaOnest-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'ZEKA Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/ZekaOnest-cyrillic.woff2) format('woff2-variations'),url(/fonts/ZekaOnest-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'ZEKA Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/ZekaOnest-cyrillic-ext.woff2) format('woff2-variations'),url(/fonts/ZekaOnest-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} :root,html[lang]{ --z-ui:'Azo Sans','ZEKA Onest','ZEKA Vazirmatn','Vazirmatn',system-ui,sans-serif; --z-display:'Azo Sans','ZEKA Onest','ZEKA Vazirmatn','Vazirmatn',system-ui,sans-serif; --latin:'Azo Sans','ZEKA Onest',system-ui,sans-serif; } html[lang="fa"]{ --z-ui:'ZEKA Vazirmatn','Vazirmatn','Azo Sans','ZEKA Onest',Tahoma,sans-serif; } html:lang(fa) :is(textarea,.bubble,.job,.stream,.results,.z-enhance-status), html:not(:lang(fa)) :is(textarea,.bubble,.job,.stream,.results,.z-enhance-status){font-family:var(--z-ui)} body{font-family:var(--z-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* ── 2. Video: the Wan note is a small box inside the composer ── JS already shows/hides #videoWanRecommendation (only for Wan 3 + Reference). It is a full-width box above the option chips, and also sits under "Wan 3" in the model menu. */ #videoWanRecommendation:not([hidden]){ display:flex!important;align-items:center;gap:7px;order:-1;flex:1 1 100%;max-width:100%; min-height:0;margin:0 0 4px;padding:6px 11px;border-radius:10px;box-sizing:border-box; border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--ink-2); font:500 11.5px/1.5 var(--z-ui);white-space:normal;overflow:visible;text-overflow:clip } #videoWanRecommendation:not([hidden])::before{content:"\2726";color:var(--brand);font-size:11px;flex:none} #videoWanRecommendation[hidden]{display:none!important} #pop-videoModel .model .what .z-model-reason{ display:block!important;margin-top:4px;white-space:normal;overflow:visible;text-overflow:clip; font-size:11px;line-height:1.35;font-weight:500;color:var(--brand,#F85F2E) } #pop-videoModel .model:has(.z-model-reason){min-height:52px;padding-block:8px;align-items:center} /* ── 3. One composer width on every studio page (chat, image, video, music) ── */ @media(min-width:900px){ :is(#view-chat,#view-image,#view-video,#view-music) .composer-wrap{ padding-inline:max(32px,calc((100% - 1000px) / 2))!important } } /* ── 4. Prompt Enhancer: as small and quiet as possible ── */ .z-enhancer-tools,.z-chat-enhancer{min-height:0!important;padding:0 14px 2px!important;gap:6px!important} .z-enhance-btn, .z-chat-enhancer .z-enhance-btn{ display:inline-flex;align-items:center;gap:4px;min-height:22px!important;height:22px; padding:0 9px 0 7px!important;border-radius:999px; border:1px solid color-mix(in srgb,#a30f17 32%,transparent); background:transparent;color:#a30f17; font:600 10.5px/1 var(--z-ui)!important;letter-spacing:0;box-shadow:none; transition:background .16s ease,border-color .16s ease,transform .16s ease } .z-enhance-btn:hover{background:color-mix(in srgb,#a30f17 14%,transparent);color:#8c0c13;border-color:color-mix(in srgb,#a30f17 55%,transparent)} .z-enhance-btn:active{transform:scale(.96)} .z-enhance-btn:focus-visible{outline:2px solid #a30f17;outline-offset:2px} :root[data-theme="light"] .z-enhance-btn{color:#ff8a80;border-color:rgba(255,138,128,.38)} :root[data-theme="light"] .z-enhance-btn:hover{color:#ffb3ab;background:rgba(255,138,128,.16)} .z-enhance-undo{min-height:22px!important;height:22px;padding:0 9px!important;border-radius:999px;font-size:10.5px!important} .z-enhance-status{font-size:11px!important} /* ── 5. Chips: one height, one rhythm, value-first ── */ .studio-composer .bar{gap:6px!important} @media(min-width:561px){.studio-composer .bar .chip{padding-inline:9px!important}} .studio-composer .bar .chip .lbl{opacity:.62;font-weight:500} .studio-composer .bar .chip .val{font-weight:650} /* A chip with no value (e.g. Audio on/off) must still say what it is. */ .studio-composer .bar .chip:has(.val:empty) .lbl{ display:inline!important;position:static!important;width:auto!important;height:auto!important; margin:0!important;clip:auto!important;overflow:visible!important;opacity:1 } /* ── 6. Mobile composers: nothing overlaps, send is always at the end ── */ @media(max-width:560px){ /* The old rule pinned send to the physical right while reserving space on the inline end; in Persian (RTL) chips ran under the button. */ .studio-composer .bar{padding-inline-end:56px!important;padding-inline-start:10px!important;position:relative} .studio-composer .bar>.send{position:absolute!important;right:auto!important;left:auto!important; inset-inline-end:10px!important;bottom:10px!important;margin:0!important} /* Chat: +, X2, model and send fit on one line. */ #view-chat .composer .bar{flex-wrap:nowrap!important;gap:6px!important;padding-inline:10px!important} #view-chat .composer .bar>.grow{flex:1 1 0!important;min-width:0!important} #view-chat .composer .bar>:is(.plus-wrap,.send,.turbo-chip){flex:none!important} #view-chat .composer .bar>.z-model-trigger{flex:0 1 auto!important;min-width:0!important;max-width:150px!important} #view-chat .composer .bar>.z-model-trigger #chatModelLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-chat .turbo-chip .tc-text small{display:none!important} .z-enhancer-tools{padding:0 10px 2px} } /* ── 7. API-key banner: one tidy line on desktop, two at most on mobile ── */ .zeka-key-notice{padding:8px 16px;font-size:12px;line-height:1.45} .zeka-key-notice button{border-radius:999px;padding:6px 14px} @media(max-width:620px){ .zeka-key-notice{flex-direction:row!important;align-items:center!important;gap:10px;padding:8px 12px} .zeka-key-notice>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;flex:1 1 auto} .zeka-key-notice button{align-self:center!important;white-space:nowrap} } /* ── 8. Page headers: titles never break mid-word, actions wrap below ── */ .view>.head{flex-wrap:wrap;row-gap:8px} .view>.head h1{white-space:nowrap} @media(max-width:560px){ .view>.head .grow{flex:1 1 auto} .view>.head>:not(.burger):not(.grow){flex:none} } /* ── 9. Prompt cards: Persian text in a readable face, correct direction ── */ .pp{font-family:var(--z-ui)!important;font-size:12px;line-height:1.75;unicode-bidi:plaintext;text-align:start} .pp:lang(en),html:not(:lang(fa)) .pp{font-family:var(--mono)!important;font-size:11.5px;line-height:1.6} /* ── 10. Light theme on the red X2 canvas: header icon and accent word stay readable ── */ :root[data-theme=light][data-turbo-pulse="on"] .view>.head h1 em{color:#FFE1D6!important} :root[data-theme=light][data-turbo-pulse="on"] .view>.head .burger{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:transparent!important} /* ── 11. Sidebar: compact, so the whole menu is visible without scrolling ── */ body:not(.rail-min) .rail{gap:2px;padding-top:14px} body:not(.rail-min) .rail .brandline{height:40px;margin-bottom:6px} body:not(.rail-min) .rail .newchat{height:38px;font-size:13.5px} body:not(.rail-min) .rail .rail-label{padding:12px 12px 3px;font-size:10px;line-height:1.2} body:not(.rail-min) .rail .nav{height:35px;gap:11px;padding:0 11px;font-size:13.5px} body:not(.rail-min) .rail .nav svg{width:18px;height:18px} body:not(.rail-min) .rail .chats-label{padding-top:12px} body:not(.rail-min) .rail .prefs{margin-top:4px} /* ── 12. X2 Power chip: small ── */ #view-chat .turbo-chip.z-turbo-toggle{height:26px!important;min-height:26px!important;padding:0 10px 0 9px!important;gap:5px!important} #view-chat .turbo-chip.z-turbo-toggle .tc-text b{font-size:11px!important} #view-chat .turbo-chip.z-turbo-toggle::before{width:6px;height:6px} /* ── 13. Chat start screen: the eye + headline are a quiet brand mark, not a hero ── */ #view-chat .z-chat-ambient .z-chat-ambient-inner{min-height:150px!important;width:min(70vw,420px)!important} #view-chat .z-chat-ambient .z-eye{--s:min(11vmin,92px)!important} #view-chat .z-chat-ambient .z-chat-ambient-title{font-size:clamp(30px,4.4vw,56px)!important} @media(max-width:640px){ #view-chat .z-chat-ambient .z-eye{--s:68px!important} #view-chat .z-chat-ambient .z-chat-ambient-title{font-size:34px!important} } /* ── 14. Landing: one thing to do — Start ── Eye + headline stay the hero. The Start button is large, centred under them, with a soft pulse and a miniature eye as its icon (brand DNA). Normal / X2 Power is a small quiet switch. */ .zeka-landing .z-land-bottom{ left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));padding-inline:20px; flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:nowrap;text-align:center } .zeka-landing .z-land-bottom p{font-size:clamp(13px,1.3vw,18px);font-weight:600;opacity:.92} .zeka-landing .z-land-bottom small{font-size:.8em;margin-top:6px} .zeka-landing .z-land-actions{flex-direction:column;align-items:center;gap:14px;width:auto;flex-wrap:nowrap} .zeka-landing .z-land-go{ order:-1;gap:14px;justify-content:center;min-width:min(300px,86vw);min-height:60px;padding:19px 34px;font-size:17px;font-weight:700; letter-spacing:.01em;border-radius:999px;background:var(--z-iris);color:var(--z-iris-ink); box-shadow:0 12px 36px -8px rgba(248,95,46,.45); animation:z-go-ring 2s ease-out .6s 2 both } .zeka-landing .z-land-go:hover{transform:scale(1.04);background:var(--z-iris-hi)} .zeka-landing .z-land-go:active{transform:scale(.97)} .zeka-landing .z-land-go:focus-visible{outline:3px solid var(--z-bone);outline-offset:4px} /* the arrow becomes a miniature eye: ring + pupil */ .zeka-landing .z-land-go>span:last-child{ font-size:0;width:24px;height:24px;border-radius:50%;flex:none;box-sizing:border-box; border:2.5px solid var(--z-iris-ink);background:radial-gradient(circle,var(--z-iris-ink) 0 30%,transparent 33%) } @keyframes z-go-ring{0%{box-shadow:0 12px 36px -8px rgba(248,95,46,.45),0 0 0 0 rgba(248,95,46,.55)} 70%{box-shadow:0 12px 36px -8px rgba(248,95,46,.45),0 0 0 20px rgba(248,95,46,0)} 100%{box-shadow:0 12px 36px -8px rgba(248,95,46,.45),0 0 0 0 rgba(248,95,46,0)}} @media(prefers-reduced-motion:reduce){.zeka-landing .z-land-go{animation:none}} .zeka-landing .z-land-modes{padding:3px;border-color:rgba(242,236,226,.22)} .zeka-landing .z-land-modes button{padding:6px 14px;font-size:12px;font-weight:600;opacity:.8} .zeka-landing .z-land-modes button[aria-pressed=true]{opacity:1} /* lift the hero a little so the bottom stack never touches the headline */ @media(min-width:621px){.z-land-center,.z-land-type{transform:translateY(-4.5vh)}} /* ── 15. Option popups follow the composer palette (no cream box on a black composer) ── */ :root[data-theme="light"] :is(body>.pop[id^="pop-"],body>.z-compact-pop){ --surface:#0C0C11;--surface-2:#1C1C25;--surface-3:#262631;--field:#171717; --ink:#F2EDE4;--ink-2:#D9D5CC;--ink-3:#ADADB8;--ink-4:#8F8F9C;--line:#24242E;--line-2:#3A3A47;--line-ctl:#6A6A7A; --brand:#F85F2E;--brand-2:#FF8F66;--brand-soft:#2A1710;--brand-line:#6B2E1A; background:#0C0C11!important;color:#F2EDE4!important;border-color:#2E2E3A!important } :root[data-theme="dark"] :is(body>.pop[id^="pop-"],body>.z-compact-pop){ --surface:#F2EDE4;--surface-2:#E8E2D6;--surface-3:#DAD3C4;--field:#F8F4EC; --ink:#14141B;--ink-2:#2B2B35;--ink-3:#4D4D58;--ink-4:#62626D;--line:#D5CEBF;--line-2:#C5BDAC;--line-ctl:#8A8579; --brand:#B63F17;--brand-2:#8F2F10;--brand-soft:#F8E3DA;--brand-line:#E2A98F; background:#F2EDE4!important;color:#14141B!important;border-color:#D5CEBF!important } /* ═════════ BRAND PALETTE — "ZEKA Ember" ═════════ Orange sampled from the supplied reference (#F85F2E). Black + warm white are the base; orange is the ONLY action colour (primary buttons, selected state, focus, active icon). One colour = one meaning. Roughly 70% black/white neutrals · 20% surfaces/lines · 10% orange. X2 Power keeps its red canvas. */ :root{ --z-ink:#171717;--z-bone:#F2EEE6;--z-power:#A30F17; --z-iris:#F85F2E;--z-iris-hi:#FF8F66;--z-iris-deep:#B63F17;--z-iris-ink:#1A0A04; --z-black:#171717;--z-gold:#F85F2E;--z-iris-1:#F85F2E;--z-iris-2:#7A2E16; --ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-soft:cubic-bezier(.22,.61,.36,1) } :root,:root[data-theme="light"]{ --canvas:#EFEBE4;--surface:#F7F4EE;--surface-2:#E9E4DB;--surface-3:#DCD6CA;--field:#FBF9F5; --ink:#141414;--ink-2:#38362F;--ink-3:#5A574F;--ink-4:#6A675F; --line:#DAD4C8;--line-2:#C6BFB0;--line-ctl:#8A857A; --brand:#B63F17;--brand-2:#8F2F10;--brand-soft:#F8E3DA;--brand-line:#E2A98F; --key:#F85F2E;--key-2:#B63F17;--key-on:#1A0A04; --sand:#B63F17;--saffron:#B63F17;--saffron-soft:#F8E3DA } :root[data-theme="dark"]{ --canvas:#171717;--surface:#1E1E1E;--surface-2:#262626;--surface-3:#303030;--field:#141414; --ink:#F2EEE6;--ink-2:#D6D2CA;--ink-3:#ABA8A1;--ink-4:#96938C; --line:#2C2C2C;--line-2:#3A3A3A;--line-ctl:#5C5C5C; --brand:#F85F2E;--brand-2:#FF8F66;--brand-soft:#2A1710;--brand-line:#6B2E1A; --key:#F85F2E;--key-2:#FF8F66;--key-on:#1A0A04; --sand:#F85F2E;--saffron:#F85F2E;--saffron-soft:#2A1710 } :root[data-theme="dark"] .rail{background:#171717;border-color:#222} /* composer is inverted on purpose: cream on dark theme, black on light theme */ :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer){ --brand:#B63F17;--brand-2:#8F2F10;--brand-soft:#F8E3DA;--brand-line:#E2A98F; --key:#F85F2E;--key-2:#B63F17;--key-on:#1A0A04;--line-ctl:#8A857A; --ink-4:#6A675F;--ink-3:#4D4A43;--surface:#F2EEE6;--surface-2:#E9E4DB;--surface-3:#DCD6CA;--field:#FBF9F5 } :root[data-theme="light"] :is(#view-chat .composer,.studio-composer){ --brand:#F85F2E;--brand-2:#FF8F66;--brand-soft:#2A1710;--brand-line:#6B2E1A; --key:#F85F2E;--key-2:#FF8F66;--key-on:#1A0A04; --surface:#171717;--surface-2:#1F1F1F;--surface-3:#2A2A2A;--field:#141414;--ink-4:#9D9A93;--line-2:#3A3A3A;--line-ctl:#666 } :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer), :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer):focus-within{background:#F2EEE6!important;border-color:#F2EEE6!important} :root[data-theme="light"] :is(#view-chat .composer,.studio-composer), :root[data-theme="light"] :is(#view-chat .composer,.studio-composer):focus-within{background:#171717!important;border-color:#171717!important} /* X2/X3 atmosphere: dark canvas → accent becomes warm white (orange on red is only 2.7:1). Iris colours: zeka-power.css */ :root[data-turbo-pulse="on"]{--z-iris:#F2EEE6;--z-iris-hi:#FFFFFF} /* popups follow the composer they belong to */ :root[data-theme="light"] :is(body>.pop[id^="pop-"],body>.z-compact-pop){ --surface:#171717;--surface-2:#1F1F1F;--surface-3:#2A2A2A;--field:#141414; --ink:#F2EEE6;--ink-2:#D6D2CA;--ink-3:#ABA8A1;--ink-4:#96938C;--line:#262626;--line-2:#3A3A3A;--line-ctl:#666; --brand:#F85F2E;--brand-2:#FF8F66;--brand-soft:#2A1710;--brand-line:#6B2E1A; background:#171717!important;color:#F2EEE6!important;border-color:#2E2E2E!important } :root[data-theme="dark"] :is(body>.pop[id^="pop-"],body>.z-compact-pop){ --surface:#F2EEE6;--surface-2:#E9E4DB;--surface-3:#DCD6CA;--field:#FBF9F5; --ink:#141414;--ink-2:#38362F;--ink-3:#4D4A43;--ink-4:#6A675F;--line:#D9D3C7;--line-2:#C6BFB0;--line-ctl:#8A857A; --brand:#B63F17;--brand-2:#8F2F10;--brand-soft:#F8E3DA;--brand-line:#E2A98F; background:#F2EEE6!important;color:#141414!important;border-color:#D9D3C7!important } /* ═════════ BUTTON SYSTEM ═════════ Primary = orange fill (one per screen: Start, Send/Generate). Secondary = hairline outline (chips, New chat). Tertiary = text. Selected = soft orange tint + orange line. Danger = red text, never filled. */ .studio-composer .bar .chip[aria-expanded="true"],.studio-composer .bar .chip:hover{border-color:var(--brand)!important} .studio-composer .bar .chip[aria-expanded="true"]{background:var(--brand-soft)!important} body:not(.rail-min) .rail .newchat{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);font-weight:600} body:not(.rail-min) .rail .newchat:hover{border-color:var(--brand);background:var(--brand-soft)} .rail .newchat svg{color:var(--brand)} /* flat, quiet sidebar like the reference: neutral selected pill, orange only on the icon + dot */ .rail .nav.on,:root[data-theme="dark"] .rail .nav.on{background:var(--surface-3);color:var(--ink)} .rail .nav.on svg{color:var(--brand)} .rail .nav.on .tip{background:var(--brand)} .rail .rail-label{font-size:11px;letter-spacing:.1em;opacity:.8} /* touch: visual size stays small, tap area does not (WCAG 2.2 SC 2.5.8) */ .z-enhance-btn,.z-enhance-undo,#view-chat .turbo-chip.z-turbo-toggle{position:relative} .z-enhance-btn::after,.z-enhance-undo::after,#view-chat .turbo-chip.z-turbo-toggle::after{content:"";position:absolute;inset:-9px -4px} @media(pointer:coarse){ .studio-composer .send,#view-chat .composer .send{width:48px;height:48px} .z-enhance-btn,.z-chat-enhancer .z-enhance-btn{min-height:26px!important;height:26px;font-size:11.5px!important} } /* ═════════ SUBTLE LIFE (hover/press/entrance only — nothing loops, so WCAG 2.2.2 is not triggered) ═════════ */ .studio-composer .send,#view-chat .composer .send{ box-shadow:0 8px 22px -8px color-mix(in srgb,var(--key) 75%,transparent); transition:transform .22s var(--ease-pop),box-shadow .2s,background .15s } .studio-composer .send:hover,#view-chat .composer .send:hover{transform:translateY(-2px) scale(1.05)} .studio-composer .send:active,#view-chat .composer .send:active{transform:scale(.93)} .studio-composer .send svg,#view-chat .composer .send svg{transition:transform .22s var(--ease-pop)} .studio-composer .send:hover svg,#view-chat .composer .send:hover svg{transform:translateY(-2px)} .studio-composer .send:disabled,#view-chat .composer .send:disabled{box-shadow:none;transform:none} .studio-composer .bar .chip{transition:transform .18s var(--ease-soft),border-color .15s,background .15s} .studio-composer .bar .chip:hover{transform:translateY(-1px)} .studio-composer .bar .chip:active{transform:scale(.97)} .rail .nav,.rail .newchat{transition:background .15s,color .15s,transform .18s var(--ease-soft)} .rail .nav svg,.rail .newchat svg{transition:transform .25s var(--ease-pop),color .15s} .rail .nav:hover{transform:translateX(2px)} :root[dir="rtl"] .rail .nav:hover{transform:translateX(-2px)} .rail .nav:hover svg{transform:scale(1.14) rotate(-6deg);color:var(--brand)} .rail .newchat:hover svg{transform:rotate(90deg)} .rail .nav:active{transform:scale(.98)} .z-enhance-btn{transition:transform .18s var(--ease-pop),background .15s,border-color .15s} .z-enhance-btn:hover{transform:translateY(-1px)} .z-enhance-btn:active{transform:scale(.95)} .turbo-chip{transition:transform .18s var(--ease-pop),background .15s} .turbo-chip:hover{transform:translateY(-1px)} .zeka-landing .z-land-go{transition:transform .22s var(--ease-pop),background .15s} .zeka-landing .z-land-go:hover>span:last-child{transform:scale(1.18)} .zeka-landing .z-land-go>span:last-child{transition:transform .25s var(--ease-pop)} /* one-time entrance of the composer and main title */ @keyframes z-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .studio-composer,#view-chat .composer{animation:z-rise .45s var(--ease-soft) both} .view.on>.view-title,.view.on>h1,.view.on .page-title{animation:z-rise .4s var(--ease-soft) both} .prompt-card,.pcard{transition:transform .2s var(--ease-soft),border-color .15s,box-shadow .2s} .prompt-card:hover,.pcard:hover{transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){ .studio-composer,#view-chat .composer,.view.on>.view-title,.view.on>h1,.view.on .page-title{animation:none} .rail .nav,.rail .nav svg,.rail .newchat svg,.studio-composer .send,.studio-composer .send svg,.studio-composer .bar .chip,.z-enhance-btn,.turbo-chip{transition:none!important;transform:none!important} } /* ═════════ DURATION — chip "⏱ 5 s" + slider ═════════ */ .studio-composer .chip[data-demo-pop$="Len"] .lbl{ position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;display:block!important;opacity:1!important } .studio-composer .chip[data-demo-pop$="Len"]::before{ content:"";width:14px;height:14px;flex:none;background:currentColor;opacity:.72; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6'/%3E%3C/svg%3E") center/contain no-repeat } .studio-composer .chip[data-demo-pop$="Len"] .val{direction:ltr;unicode-bidi:isolate} .studio-composer .chip[data-demo-pop$="Len"] .val::after{content:" s";opacity:.7;font-weight:500} #pop-videoLen{width:min(300px,calc(100vw - 20px))} .z-dur{display:grid;gap:10px;padding:4px 4px 2px;direction:ltr} .z-dur-read{display:flex;align-items:baseline;justify-content:center;gap:6px;color:var(--ink)} .z-dur-read b{font:700 40px/1 var(--z-ui);letter-spacing:-.02em;min-width:1.2ch;text-align:right} .z-dur-read span{font:600 15px var(--z-ui);color:var(--ink-3)} .z-dur-range,.z-dur-range:focus,.z-dur-range:hover{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;padding:0;border:0!important;background:transparent!important;cursor:pointer;box-shadow:none!important;outline:0!important;min-height:0;border-radius:0} .z-dur-range::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--brand) var(--p,0%),color-mix(in srgb,var(--line-ctl) 45%,transparent) var(--p,0%))} .z-dur-range::-moz-range-track{height:8px;border-radius:99px;background:color-mix(in srgb,var(--line-ctl) 45%,transparent)} .z-dur-range::-moz-range-progress{height:8px;border-radius:99px;background:var(--brand)} .z-dur-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%; background:#fff;border:3px solid var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .18s var(--ease-pop)} .z-dur-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.35)} .z-dur-range:hover::-webkit-slider-thumb{transform:scale(1.1)} .z-dur-range:active::-webkit-slider-thumb{transform:scale(1.2)} .z-dur-range:focus-visible{outline:none} .z-dur-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 35%,transparent)} .z-dur-range:disabled{opacity:.5;cursor:not-allowed} .z-dur-ends{display:flex;justify-content:space-between;font:500 11.5px var(--z-ui);color:var(--ink-4)} #pop-videoLen .z-compact-list{flex-direction:row;flex-wrap:wrap;gap:6px} #pop-videoLen .z-compact-choice{justify-content:center;min-height:40px;padding:0 14px;flex:0 1 auto;border-radius:999px;border:1px solid var(--line-2);font:600 12.5px var(--z-ui)} #pop-videoLen .z-compact-choice.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)} #pop-videoLen .z-compact-choice svg{display:none} #pop-videoLen .z-compact-choice span::after{content:" s"} /* ═════════ SIDEBAR "Workshop" — folded group (script: zeka-polish.js) ═════════ */ .rail .rail-label.z-fold{display:flex;align-items:center;gap:6px;width:100%;margin:6px 0 2px;padding:6px 12px;cursor:pointer;border:0;background:transparent; color:var(--ink-3);font:600 11px/1 var(--z-ui);letter-spacing:.1em;text-transform:uppercase;text-align:start;border-radius:8px;opacity:1} .rail .rail-label.z-fold:hover{color:var(--ink);background:var(--surface-2)} .rail .rail-label.z-fold::after{content:"";width:7px;height:7px;margin-inline-start:auto;border:solid currentColor;border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease-soft)} .rail .rail-label.z-fold[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)} .rail .z-fold-items{display:grid;overflow:hidden;transition:grid-template-rows .22s var(--ease-soft);grid-template-rows:0fr} .rail .z-fold-items>div{min-height:0;overflow:hidden} .rail .z-fold-items.open{grid-template-rows:1fr} .rail .z-fold-items:not(.open) .nav{visibility:hidden} @media(prefers-reduced-motion:reduce){.rail .z-fold-items,.rail .rail-label.z-fold::after{transition:none}} body.rail-min .rail .rail-label.z-fold{display:none} body.rail-min .rail .z-fold-items{grid-template-rows:1fr} body.rail-min .rail .z-fold-items:not(.open) .nav{visibility:visible} /* ═════════ LANDING — short / narrow phones: headline and Start must never collide ═════════ */ @media(max-height:700px){ .zeka-landing .z-land-go{min-height:52px;padding:14px 28px;font-size:16px} .z-land-bottom small{display:none} .z-land-bottom{bottom:max(14px,env(safe-area-inset-bottom))} } @media(max-height:700px) and (max-width:620px){ .z-land-center{transform:translateY(-150px)!important} .z-land-type{transform:translateY(28px)!important} } @media(max-height:700px) and (min-width:621px){ .z-land-center,.z-land-type{transform:translateY(-13vh)!important} } @media(max-width:380px){ .z-land-type{font-size:clamp(46px,14.4vw,60px)!important;letter-spacing:-.05em!important} .zeka-landing .z-land-go{min-width:min(280px,90vw)} } /* ZEKA R18 SOURCE: zeka-power.css */ /* ZEKA Power: Normal (gray-lilac) · X2 (red) · X3 (dark purple + camera-aperture lens). Every colour change is a slow cross-fade; nothing switches in one frame. */ /* ── eye colour follows the level; registered colours let the browser animate the gradient ── */ @property --z-iris-1{syntax:'';inherits:true;initial-value:#A8A8A8} @property --z-iris-2{syntax:'';inherits:true;initial-value:#3A3A3A} :root{ --z-iris-1:#A8A8A8;--z-iris-2:#3A3A3A; --z-red:#a30f17;--z-ember:#4a1e0d; --z-t2:0%;--z-t3:0%; --z-zoom:1; transition:--z-iris-1 1.6s cubic-bezier(.4,0,.2,1),--z-iris-2 1.6s cubic-bezier(.4,0,.2,1); } :root[data-power="x2"]{--z-iris-1:#E5303A;--z-iris-2:#7A0F18} :root[data-power="x3"]{--z-iris-1:#F85F2E;--z-iris-2:#5A220F} /* the eye grows a little under X3 and returns slowly */ .z-eye{transform:scale(var(--z-zoom));transform-origin:50% 50%;will-change:transform} /* ── page atmosphere: values are driven frame by frame (zeka-power.js), so it eases in and out ── */ :root[data-atmo="on"] body, :root[data-atmo="on"] .shell, :root[data-atmo="on"] main, :root[data-atmo="on"] .view, :root[data-atmo="on"] #view-chat{ background-color:color-mix(in srgb,color-mix(in srgb,var(--canvas),var(--z-red) var(--z-t2)),var(--z-ember) var(--z-t3))!important; } :root[data-atmo="on"] .zeka-landing{ background-color:color-mix(in srgb,color-mix(in srgb,var(--z-black),var(--z-red) var(--z-t2)),var(--z-ember) var(--z-t3))!important; } /* text that flips to light on the tinted canvas follows with a short ease instead of snapping */ #view-chat .head,#view-chat .hero,.view>.head,#view-chat .stream{transition:color .7s ease} /* ── lens aperture (X3) ── */ .z-aperture{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0} .z-aperture .blades{fill:url(#zApGrad);fill-rule:evenodd} .z-aperture .rim{fill:none;stroke:rgba(255,190,150,.55);stroke-width:1.1;stroke-linejoin:round} .z-aperture .seam-shadow{stroke:rgba(0,0,0,.55);stroke-width:1.9;stroke-linecap:round} .z-aperture .seam{stroke:rgba(255,180,140,.42);stroke-width:.9;stroke-linecap:round} /* ── the three-lamp switch in the composer: X3 · Normal · X2 (physical left / middle / right) ── */ .z-power{display:inline-flex;align-items:center;gap:2px;flex:none;direction:ltr;height:30px;padding:2px;border-radius:999px; border:1px solid var(--line-2);background:transparent} .z-power button{--c:#A8A8A8;position:relative;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 8px; border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink-3);cursor:pointer; font:600 11.5px/1 var(--latin,inherit);white-space:nowrap;-webkit-tap-highlight-color:transparent; transition:color .5s ease,background-color .6s ease,border-color .6s ease} .z-power button[data-power="x3"]{--c:#F85F2E} .z-power button[data-power="x2"]{--c:#E5303A} .z-power button i{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:none;transition:background-color .6s ease,box-shadow .6s ease} .z-power button:hover{color:var(--ink)} .z-power button:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px} .z-power button[aria-checked=true]{color:var(--ink);background:color-mix(in srgb,var(--c) 15%,transparent);border-color:color-mix(in srgb,var(--c) 70%,transparent)} .z-power button[aria-checked=true] i{background:var(--c);box-shadow:0 0 7px color-mix(in srgb,var(--c) 70%,transparent)} @media (max-width:640px){ .z-power{height:28px} .z-model-trigger .model-symbol{display:none} .z-power button{height:22px;padding:0 5px 0 4px;gap:3px;font-size:10.5px} } .z-power-note{--c:#8A8A8A;margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.4; color:inherit;opacity:0;transform:translateY(2px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;min-height:1.4em} .z-power-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;transition:background-color .5s ease} .z-power-note[data-on="1"]{opacity:.82;transform:none} .z-power-note[data-level="x2"]{--c:#D8262F} .z-power-note[data-level="x3"]{--c:#F85F2E} .z-chat-enhancer{align-items:center} /* ── landing: three segments, same order as the switch ── */ .z-land-modes{direction:ltr} .z-land-modes button{transition:background-color .6s ease,color .6s ease,border-color .6s ease} .z-land-modes button[data-z-mode="x2"][aria-pressed=true]{background:#871522;color:#fff} .z-land-modes button[data-z-mode="x3"][aria-pressed=true]{background:#B63F17;color:#fff} /* ── Power X2 on Image / Video / Music: one small lamp toggle beside Prompt Enhancer ── */ .z-x2-btn{--c:#E5303A;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:999px; border:1px solid var(--line-2);background:transparent;color:var(--ink-3);cursor:pointer;font:600 12px/1 var(--latin,inherit); white-space:nowrap;-webkit-tap-highlight-color:transparent; transition:color .5s ease,background-color .6s ease,border-color .6s ease} .z-x2-btn i{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:none;transition:background-color .6s ease,box-shadow .6s ease} .z-x2-btn:hover{color:var(--ink)} .z-x2-btn:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px} .z-x2-btn[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--c) 15%,transparent);border-color:color-mix(in srgb,var(--c) 70%,transparent)} .z-x2-btn[aria-pressed=true] i{background:var(--c);box-shadow:0 0 7px color-mix(in srgb,var(--c) 70%,transparent)} .z-x2-btn:disabled{opacity:.6;cursor:wait} @media (max-width:640px){.z-x2-btn{height:28px;padding:0 9px 0 7px;font-size:11px}} /* ── settings: models of the chosen level ── */ .z-card-models{display:block;font-size:12px;line-height:1.5;color:var(--ink-3);font-family:var(--latin,inherit);direction:ltr;text-align:start;unicode-bidi:plaintext} .z-power-models{margin:0 0 14px;padding:14px;border-radius:16px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface-2) 60%,transparent)} .z-power-models h4{margin:0 0 10px;font-size:14px} .z-power-models .z-pm[hidden]{display:none} /* ── settings: three plain cards ── */ .z-power-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 16px} .z-power-cards button{--c:#8A8A8A;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;padding:14px; border-radius:16px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer; transition:border-color .5s ease,background-color .5s ease,box-shadow .5s ease} .z-power-cards button[data-power="x2"]{--c:#D8262F} .z-power-cards button[data-power="x3"]{--c:#C94718} .z-power-cards b{font-size:15px;line-height:1.2} .z-power-cards span{font-size:12.5px;line-height:1.65;color:var(--ink-2)} :root[data-theme="dark"] .z-power-cards button[data-power="x2"]{--c:#FF6A70} :root[data-theme="dark"] .z-power-cards button[data-power="x3"]{--c:#FF8F66} .z-power-cards em{font-style:normal;font-size:12px;font-weight:700;color:var(--c);margin-top:auto} .z-power-cards button[aria-checked=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)} .z-power-cards button:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px} .z-adv{margin:6px 0 14px;border-top:1px solid var(--line-2);padding-top:10px} .z-adv summary{cursor:pointer;font-weight:600;font-size:13px;padding:6px 0;color:var(--ink-2)} @media (max-width:760px){.z-power-cards{grid-template-columns:1fr}.z-power-cards button{flex-direction:column}} @media (prefers-reduced-motion:reduce){ :root{transition-duration:.8s} .z-eye{will-change:auto} } /* ── quiet notes: anything that talks about cost, cheap or free is low-contrast and never shouts ── */ .z-power-cards em{opacity:.55;font-weight:600} .z-power-card-note,.z-card-models{opacity:.6} .z-power-note[data-on="1"]{opacity:.5} .z-power-note::before{opacity:.7} #enhancerQuotaNote,.cost-explainer{opacity:.55} /* the recommendation note stays a small box, but its words are faint */ #videoWanRecommendation:not([hidden]){border-color:var(--line);background:transparent;color:var(--ink-3);opacity:.6;font-weight:400} #videoWanRecommendation:not([hidden])::before{opacity:.6} #pop-videoModel .model .what .z-model-reason{color:var(--ink-3)!important;opacity:.55;font-weight:400} .z-power-cards span{opacity:.75} /* ZEKA R18 SOURCE: zeka-samples.css */ /* ZEKA model samples in the empty space of Image / Video / Music. Quiet, small, one accent. */ .zs-host{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 16px;min-height:0} .zs-host[hidden]{display:none} .zs{--zs-ink:var(--ink,#F1EFEA);--zs-quiet:color-mix(in srgb,var(--zs-ink) 46%,transparent); --zs-line:color-mix(in srgb,var(--zs-ink) 12%,transparent);--zs-accent:var(--brand,#F85F2E); display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:640px;margin:0 auto; opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease} .zs.is-in{opacity:1;transform:none} .zs-eyebrow{margin:0;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--zs-quiet)} html:lang(fa) .zs-eyebrow{letter-spacing:0;text-transform:none;font-size:12px} .zs-line{margin:0;max-width:44ch;font-size:13px;line-height:1.5;color:var(--zs-quiet);text-align:center} /* image: three cards, fanned; they open up a little on hover */ .zs-fan{position:relative;display:flex;justify-content:center;align-items:center;height:clamp(150px,30vh,260px);width:100%} .zs-card{--w:clamp(96px,17vh,170px);position:absolute;width:var(--w);aspect-ratio:4/5;margin:0;border-radius:14px;overflow:hidden; background:#1b1b1b;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.45); transform:translateX(calc(var(--i) * 62%)) rotate(calc(var(--i) * 5deg)) scale(calc(1 - (var(--i) * var(--i)) * .07)); z-index:calc(3 - (var(--i) * var(--i)));transition:transform .5s cubic-bezier(.2,.8,.2,1)} .zs-fan:hover .zs-card{transform:translateX(calc(var(--i) * 92%)) rotate(calc(var(--i) * 2deg)) scale(1)} .zs-card img{display:block;width:100%;height:100%;object-fit:cover;user-select:none} /* video: one frame, controls only when needed */ .zp{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;max-height:42vh;border-radius:18px;overflow:hidden; background:#0d0d0d;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px rgba(0,0,0,.45);isolation:isolate} .zp video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer} .zp-bar{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:10px;padding:26px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:1;transition:opacity .35s ease} .zp.is-playing:not(.is-awake) .zp-bar{opacity:0} .zp-btn{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s} .zp-btn:hover{background:rgba(255,255,255,.24)} .zp-btn svg{width:16px;height:16px;fill:currentColor} .zp-track{position:relative;flex:1;height:18px;cursor:pointer;touch-action:none} .zp-track::before,.zp-track i{content:"";position:absolute;inset:7.5px 0;border-radius:3px} .zp-track::before{background:rgba(255,255,255,.24)} .zp-track i{background:var(--zs-accent);transform-origin:left;transform:scaleX(0)} .zp-track:hover::before,.zp-track:hover i{inset:6.5px 0} .zp-time{flex:none;min-width:64px;font:500 11px/1 var(--sans,system-ui);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78);text-align:right} /* music: play, title, waveform */ .za{font-family:var(--sans,system-ui);display:flex;align-items:center;gap:14px;width:100%;max-width:520px;padding:14px 16px 14px 14px;border-radius:20px; background:color-mix(in srgb,var(--zs-ink) 5%,transparent);border:1px solid var(--zs-line)} .za-play{display:grid;place-items:center;flex:none;width:52px;height:52px;padding:0;border:0;border-radius:50%; background:var(--zs-accent);color:#171717;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease} .za-play:hover{transform:scale(1.05)} .za.is-playing .za-play{box-shadow:0 0 0 6px color-mix(in srgb,var(--zs-accent) 18%,transparent)} .za-play svg{width:20px;height:20px;fill:currentColor} .za-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .za-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .za-head b{overflow:hidden;font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;color:var(--zs-ink)} .za-time{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:var(--zs-quiet)} .za-wave{--p:0%;position:relative;height:36px;cursor:pointer;touch-action:none} .za-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px} .za-bars span{flex:1;height:30%;min-height:3px;border-radius:2px;background:color-mix(in srgb,var(--zs-ink) 22%,transparent);transition:height .4s ease} .za-done{clip-path:inset(0 calc(100% - var(--p)) 0 0)} .za-done span{background:var(--zs-accent)} :is(.zp-btn,.za-play,.zp-track,.za-wave):focus-visible{outline:2px solid var(--zs-accent);outline-offset:3px} @media (max-width:600px){ .zs{gap:12px} .zs-card{--w:clamp(86px,27vw,128px)} .zp{border-radius:14px} .za{gap:12px;padding:12px} .za-play{width:46px;height:46px} } @media (prefers-reduced-motion:reduce){.zs,.zs-card,.za-bars span{transition:none}} /* ZEKA R18 SOURCE: zeka-flat.css */ /* ZEKA flat: grown-up, minimal, no glow. Buttons are solid black or bone, never orange; no gradients, no light rings, no pulsing. Orange stays only as a small signal (active dot, progress line, focus outline). Loaded last. */ /* landing call to action */ .zeka-landing .z-land-go{ min-width:min(260px,86vw);min-height:54px;padding:15px 30px;gap:12px; border-radius:14px;background:var(--z-bone,#F2EEE6)!important;color:#171717!important; font-size:16px;font-weight:600;letter-spacing:0; box-shadow:none!important;animation:none!important;transition:background .15s ease} .zeka-landing .z-land-go:hover{transform:none!important;background:#FFFFFF!important} .zeka-landing .z-land-go:active{transform:none!important;background:#E4DED3!important} .zeka-landing .z-land-go:focus-visible{outline:2px solid #F2EEE6;outline-offset:3px} /* the icon is a plain arrow again, not a glowing eye */ .zeka-landing .z-land-go>span:last-child{ width:auto;height:auto;border:0!important;border-radius:0;background:none!important; font-size:17px;line-height:1;transform:none!important} .zeka-landing .z-land-go:hover>span:last-child{transform:translate(2px,-2px)!important} @media(max-width:600px){.zeka-landing .z-land-go{min-height:50px;padding:13px 26px;font-size:15px}} /* send buttons: solid, the opposite of the composer they sit on */ :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer){--key:#171717;--key-2:#2B2B2B;--key-on:#F2EEE6} :root[data-theme="light"] :is(#view-chat .composer,.studio-composer){--key:#F2EEE6;--key-2:#FFFFFF;--key-on:#171717} :is(.studio-composer,#view-chat .composer) .send{box-shadow:none!important} :is(.studio-composer,#view-chat .composer) .send:active{transform:none!important} /* no coloured glow around fields and composers */ :is(#view-chat .composer,.studio-composer):focus-within{box-shadow:none!important} input:focus,select:focus,textarea:focus{box-shadow:none!important} :root[data-theme="dark"] :is(input,select,textarea):focus{border-color:#5C5C5C} :root[data-theme="light"] :is(input,select,textarea):focus{border-color:#8A857A} /* sample music player: the play button follows the same rule */ .za-play{background:var(--ink,#F2EEE6)!important;color:var(--canvas,#171717)!important;box-shadow:none!important} .za.is-playing .za-play{box-shadow:none!important} .za-play:hover{transform:none!important;opacity:.88} /* ZEKA R18 SOURCE: zeka-c.css */ /* ZEKA design C: warm charcoal, one simple typeface (Azo Sans), quiet type, one exciting thing: the eye. Everything on the landing fits one screen. Loaded last; the eye itself is not changed here. */ /* ── landing: eye, one line of title, one line of text, one button, the power choice ── */ body:not(.z-registered) .zeka-landing{display:flex!important} body.z-registered .zeka-landing{display:none!important} .zeka-landing{flex-direction:column;align-items:center;justify-content:center;gap:28px; padding:96px 20px 40px;box-sizing:border-box;background:#141210} .zeka-landing .z-land-nav>span{display:none} /* no tagline: logo only */ .zeka-landing .z-land-center{position:static!important;inset:auto!important;transform:none!important;order:1; display:block;pointer-events:none} .zeka-landing .z-land-center .z-eye{--s:min(34vmin,300px)!important} .zeka-landing .z-land-type{order:2;position:static!important;transform:none!important;max-width:none; font-size:clamp(40px,5.4vw,76px)!important;font-weight:500!important;line-height:1!important; letter-spacing:-.03em!important;text-transform:none} .zeka-landing .z-land-bottom{order:3;position:static!important;inset:auto!important;left:auto;right:auto;bottom:auto; transform:none!important;display:flex;flex-direction:column!important;align-items:center!important; gap:20px;text-align:center} .zeka-landing .z-land-bottom p{display:block;margin:0;font-size:18px;font-weight:400;line-height:1.5;opacity:1; color:var(--ink-3,#ABA8A1)} .zeka-landing .z-land-bottom p span{display:inline;font-weight:400;color:inherit} .zeka-landing .z-land-bottom p small{display:inline;margin:0 0 0 .3em;font-size:1em;color:inherit} .zeka-landing .z-land-actions{flex-direction:column!important;align-items:center!important;gap:16px!important;width:auto!important} /* the button: a bone pill, flat */ .zeka-landing .z-land-go{border-radius:999px!important;min-width:0!important;min-height:50px!important; padding:0 30px!important;font-size:15px!important;font-weight:500!important} .zeka-landing .z-land-go>span:last-child{display:none!important} /* the power choice: three quiet words, the chosen one underlined */ .zeka-landing .z-land-modes{border:0!important;background:none!important;padding:0!important;gap:20px!important} .zeka-landing .z-land-modes button{font-family:var(--z-ui)!important;font-size:14px!important;font-weight:400!important; letter-spacing:0!important;padding:6px 0!important;border-radius:0!important;background:none!important; color:var(--ink-3,#ABA8A1)!important;border-bottom:1px solid transparent!important;box-shadow:none!important} .zeka-landing .z-land-modes button[aria-checked="true"]{color:#F2EEE6!important;border-bottom-color:#F2EEE6!important} @media(max-width:620px){ .zeka-landing{gap:22px;padding:80px 20px 32px} .zeka-landing .z-land-center .z-eye{--s:min(54vw,220px)!important} .zeka-landing .z-land-type{font-size:clamp(36px,11vw,46px)!important} .zeka-landing .z-land-bottom{width:100%} .zeka-landing .z-land-bottom p{font-size:16px} .zeka-landing .z-land-actions{width:100%!important} .zeka-landing .z-land-go{align-self:stretch;justify-content:center} } /* ── the app: quiet headings, warm composer instead of a bright cream slab ── */ .head h1 em{font-weight:500!important;font-family:var(--z-ui)!important} :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer), :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer):focus-within{ background:#1C1916!important;border:1px solid rgba(242,238,230,.12)!important;box-shadow:none!important; --surface:#1C1916;--surface-2:#221F1B;--surface-3:#2E2A25;--field:#181613; --ink:#F2EEE6;--ink-2:#D6D2CA;--ink-3:#ABA8A1;--ink-4:#8F8B83; --line:#2A2622;--line-2:#38332D;--line-ctl:#5A554E; --brand:#F85F2E;--brand-soft:#2A1710;--brand-line:#6B2E1A; --key:#F2EEE6;--key-2:#FFFFFF;--key-on:#141210;color:#F2EEE6} :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer) :is(textarea,input){color:#F2EEE6!important} :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer) textarea::placeholder{color:#8F8B83!important} :root[data-theme="dark"] .studio-composer :is(.chip,.btn){background:transparent!important;color:#F2EEE6!important; border-color:rgba(242,238,230,.16)!important} :root[data-theme="dark"] .studio-composer .chip .lbl{color:#ABA8A1!important} :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer) .send{background:#F2EEE6!important;color:#141210!important} /* chat start screen: the same eye, the same quiet title under it (not word art around it) */ #view-chat .z-chat-ambient .z-chat-ambient-inner{display:flex!important;flex-direction:column;align-items:center;gap:22px; min-height:0!important;width:auto!important} #view-chat .z-chat-ambient .z-eye{position:relative!important;inset:auto!important;transform:none;--s:min(26vmin,200px)!important} #view-chat .z-chat-ambient .z-chat-ambient-title{position:static!important;transform:none!important; font-family:var(--z-ui)!important;font-size:clamp(28px,3.4vw,44px)!important;font-weight:500!important; line-height:1!important;letter-spacing:-.03em!important;text-transform:none!important;opacity:.92} @media(max-width:640px){#view-chat .z-chat-ambient .z-eye{--s:min(40vw,150px)!important} #view-chat .z-chat-ambient .z-chat-ambient-title{font-size:28px!important}} .z-chat-hero{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:24px} .z-chat-hero .z-chat-eye{position:relative!important;inset:auto!important;left:auto!important;top:auto!important; transform:scale(var(--z-zoom,1))!important;margin:0!important;--s:min(26vmin,200px)!important} .z-chat-hero h2{position:static!important;transform:none!important;font-family:var(--z-ui)!important; font-size:clamp(28px,3.4vw,44px)!important;font-weight:500!important;line-height:1!important;letter-spacing:-.03em!important} @media(max-width:640px){.z-chat-hero .z-chat-eye{--s:min(40vw,150px)!important}.z-chat-hero h2{font-size:28px!important}} /* the chat's Prompt Enhancer button on the dark composer: readable red */ :root[data-theme="dark"] #view-chat .composer .z-enhance-btn{color:#FF8A80!important;border-color:rgba(255,138,128,.38)!important} :root[data-theme="dark"] #view-chat .composer .z-enhance-btn:hover{color:#FFB3AB!important;background:rgba(255,138,128,.14)!important} /* ZEKA R18 SOURCE: zeka-r16-tune.css */ /* ZEKA r16 tune — only two requested visual changes: 1) make the warm brown/charcoal palette darker and closer to black 2) make the eye in Normal mode about 15% whiter Loaded last to avoid side effects. */ :root{ /* Normal eye: slightly whiter / brighter */ --z-iris-1:#C2C2C2; --z-iris-2:#4A4540; } /* keep X2/X3 exactly as they were */ :root[data-power="x2"]{--z-iris-1:#E5303A;--z-iris-2:#7A0F18} :root[data-power="x3"]{--z-iris-1:#F85F2E;--z-iris-2:#5A220F} /* Darker brown → more black, while preserving the same design language */ :root[data-theme="dark"]{ --canvas:#0F0D0C; --surface:#141210; --surface-2:#1A1714; --surface-3:#24201C; --field:#0D0C0B; --line:#221F1B; --line-2:#2D2925; --brand-soft:#1B110C; --brand-line:#552616; } :root[data-theme="dark"] .rail, .zeka-landing, :root[data-theme="on"] .zeka-landing{ background:#0F0D0C!important; } :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer), :root[data-theme="dark"] :is(#view-chat .composer,.studio-composer):focus-within{ background:#141210!important; border-color:rgba(242,238,230,.10)!important; --surface:#141210; --surface-2:#1A1714; --surface-3:#24201C; --field:#0D0C0B; --line:#221F1B; --line-2:#2D2925; --brand-soft:#1B110C; --brand-line:#552616; } /* ZEKA R18 SOURCE: zeka-r18.css */ /* ZEKA r18 — loaded after zeka-r16-tune.css. Four requested changes only: 1) the app page uses the landing black 2) the eye rises out of a dark pit (soft gradient edge) in Normal, X2 and X3 3) phone composers: low, one row of controls, nothing on top of anything 4) small icon motion */ /* ── 1. the page after the landing: the same black as the landing ── */ :root[data-theme="dark"] main{background:#0F0D0C} /* ── 2. the eye: no hard black ring; black at the edge, fading out like a pit ── */ .z-eye{box-shadow:none!important} .z-eye::before{content:"";position:absolute;inset:calc(var(--s) * -.42);z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(circle closest-side,#050505 0,#050505 54%,rgba(5,5,5,.88) 59%,rgba(5,5,5,.66) 66%, rgba(5,5,5,.42) 75%,rgba(5,5,5,.2) 86%,rgba(5,5,5,.06) 95%,rgba(5,5,5,0) 100%)} /* inside the edge: the lens darkens softly into the black (little → more), so lens, rim and pit are one gradient */ .z-lens:after{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.08),transparent 38%), radial-gradient(circle closest-side,transparent 56%,rgba(5,5,5,.22) 70%,rgba(5,5,5,.55) 84%,rgba(5,5,5,.9) 96%,#050505 100%)!important} /* in the chat the eye sits close to the top edge: a shorter pit, so nothing is cut */ :is(.z-chat-hero .z-chat-eye,#view-chat .z-chat-ambient .z-eye)::before{inset:calc(var(--s) * -.3); background:radial-gradient(circle closest-side,#050505 0,#050505 62%,rgba(5,5,5,.85) 67%,rgba(5,5,5,.6) 74%, rgba(5,5,5,.34) 83%,rgba(5,5,5,.12) 93%,rgba(5,5,5,0) 100%)} /* ── 3. phones: composers like the big chat apps — short text area, one row of controls ── */ @media (max-width:640px){ :is(#view-chat .composer,.studio-composer){border-radius:20px!important} /* writing area: starts low, grows while typing */ #view-chat .composer textarea,.studio-composer>textarea,#view-video .studio-composer textarea, #view-music .studio-composer #musicDesc{min-height:44px!important;max-height:28dvh!important; padding:12px 14px 2px!important;line-height:1.45!important;font-size:16px!important;height:auto} /* chat: the enhancer is one small line, the power note dot (already shown by the switch) is hidden */ #view-chat .z-chat-enhancer{padding:2px 12px 0!important;margin:0!important;min-height:0!important} #view-chat .z-enhance-btn{min-height:28px!important;height:28px;padding:0 10px!important;font-size:12px!important} #view-chat .z-power-note{display:none!important} /* one row; chips never wrap into a second line */ :is(#view-chat .composer,.studio-composer) .bar{flex-wrap:nowrap!important;gap:6px!important; padding:6px 8px 8px!important;align-items:center!important;min-width:0} :is(#view-chat .composer,.studio-composer) .bar>*{flex-shrink:0} :is(#view-chat .composer,.studio-composer) .bar>.grow{flex:1 1 0!important;min-width:0!important} :is(#view-chat .composer,.studio-composer) :is(.tool,.send){width:38px!important;height:38px!important;min-width:38px} :is(#view-chat .composer,.studio-composer) .send svg{width:17px;height:17px} /* chat row: + · power · model · send — the model name gives way, never the buttons */ #view-chat .composer .bar>.z-model-trigger{flex:0 1 auto!important;min-width:0!important;max-width:none!important; overflow:hidden;padding-inline:8px 4px} #view-chat .composer .bar>.z-model-trigger #chatModelLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #view-chat .composer .bar>.z-power{flex:none} /* media rows: model chip stays, the other chips slide sideways inside their own lane; send stays at the end */ .studio-composer .bar>.chiprow{display:flex!important;flex:1 1 auto!important;min-width:0!important;flex-wrap:nowrap!important; gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent)} :root[dir="rtl"] .studio-composer .bar>.chiprow{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 18px),transparent)} .studio-composer .bar>.chiprow::-webkit-scrollbar{display:none} .studio-composer .bar>.chiprow>*{flex-shrink:0} /* send back in the row (it was pinned absolutely over the chips) */ :root .studio-composer .bar>.send{position:static!important;inset:auto!important;margin:0 0 0 auto!important;margin-inline-start:auto!important} .studio-composer .bar :is(.chip,.chip[data-pop],.z-music-extra-trigger,.z-compact-choice){min-height:34px!important; height:34px;padding:0 11px!important;font-size:12.5px!important;white-space:nowrap} /* chat model pill: the name gets the room (the spark symbol was already meant to hide on phones) */ #view-chat .composer .z-model-trigger .model-symbol{display:none!important} #view-chat .composer .z-power button{padding:0 6px 0 5px!important} /* very narrow phones: the model name needs the chevron's room more than the chevron */ @media (max-width:400px){#view-chat .composer .z-model-trigger .model-chevron{display:none!important} #view-chat .composer .bar{gap:5px!important}} /* the bar never grows wider than the box */ .studio-composer>.bar,#view-chat .composer>.bar{min-width:0!important;max-width:100%} /* reference tile: same tile, phone size, beside the text (not on its own row) */ .studio-composer:has(>.refbox:not([hidden])){display:grid!important;grid-template-columns:66px minmax(0,1fr)!important;align-items:center} .studio-composer:has(>.refbox:not([hidden]))>:not(.refbox):not(textarea):not(.bar){grid-column:1/-1} .studio-composer:has(>.refbox:not([hidden]))>.refbox{padding:10px 2px 2px 10px!important} .studio-composer .refbox [data-ref-add]{flex:0 0 54px!important;width:54px!important;min-width:54px!important; min-height:54px!important;height:54px;padding:4px!important;border-radius:12px!important} .studio-composer .refbox [data-ref-add]::before{font-size:18px!important;margin-bottom:3px!important} .studio-composer .refbox [data-ref-add]::after{font-size:9.5px!important} } /* ── 4. motion: icons answer the hand, things arrive softly. Only the eye loops. ── */ @keyframes z18-up{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} @keyframes z18-in{from{opacity:0;scale:.92}to{opacity:1;scale:1}} @keyframes z18-pop{0%{scale:.78}55%{scale:1.16}100%{scale:1}} @keyframes z18-drop{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}} .zeka-landing .z-land-center{animation:z18-in .9s cubic-bezier(.2,.8,.2,1) both} .zeka-landing .z-land-type{animation:z18-up .7s .18s cubic-bezier(.2,.8,.2,1) both} .zeka-landing .z-land-bottom{animation:z18-up .7s .32s cubic-bezier(.2,.8,.2,1) both} .z-chat-hero .z-chat-eye{animation:z18-in .7s cubic-bezier(.2,.8,.2,1) both} .z-chat-hero h2{animation:z18-up .6s .12s cubic-bezier(.2,.8,.2,1) both} /* side menu: the chosen icon pops once; hover lifts it; the gear turns */ .rail .nav svg{transition:transform .28s cubic-bezier(.3,1.4,.5,1),color .15s} .rail .nav:hover svg{transform:translateY(-2px) scale(1.12)} .rail .nav[data-view="settings"]:hover svg{transform:rotate(60deg)} .rail .newchat svg{transition:transform .28s cubic-bezier(.3,1.4,.5,1)} .rail .newchat:hover svg{transform:rotate(90deg)} /* composer: the plus turns, the send arrow lifts on hover and flies on press */ :is(.studio-composer,#view-chat .composer) .tool svg{transition:transform .25s cubic-bezier(.3,1.4,.5,1)} :is(.studio-composer,#view-chat .composer) .tool:hover svg{transform:rotate(90deg)} #view-chat .composer .tool[aria-expanded="true"] svg{transform:rotate(45deg)} :is(.studio-composer,#view-chat .composer) .send svg{transition:transform .22s cubic-bezier(.3,1.4,.5,1)} :is(.studio-composer,#view-chat .composer) .send:hover svg{transform:translateY(-2px)} :is(.studio-composer,#view-chat .composer) .send:active svg{transform:translateY(-6px);transition-duration:.08s} /* the model symbol turns a little; chips' carets already turn */ #view-chat .model-symbol svg{transition:transform .35s cubic-bezier(.3,1.4,.5,1)} #view-chat .z-model-trigger:hover .model-symbol svg{transform:rotate(72deg) scale(1.12)} .z-enhance-btn{transition:transform .2s cubic-bezier(.3,1.4,.5,1),background .15s,color .15s} .z-enhance-btn:hover{transform:translateY(-1px)} /* icons arrive one after another: when the app opens, and again each time the phone menu opens */ @keyframes z18-icon-in{from{opacity:0;translate:0 7px;scale:.8}to{opacity:1;translate:0 0;scale:1}} @keyframes z18-icon-in-menu{from{opacity:0;translate:-8px 0;scale:.8}to{opacity:1;translate:0 0;scale:1}} @keyframes z18-hop{0%{translate:0 0}40%{translate:0 -5px}100%{translate:0 0}} .rail :is(.nav,.newchat) svg{animation:z18-icon-in .55s cubic-bezier(.2,.8,.2,1) backwards} body:not(.z-registered) .rail :is(.nav,.newchat) svg{animation-name:none} /* hidden under the landing: start when the studio opens */ body.open .rail :is(.nav,.newchat) svg{animation-name:z18-icon-in-menu} .rail .newchat svg{animation-delay:.05s} .rail .nav:nth-of-type(1) svg{animation-delay:0.12s} .rail .nav:nth-of-type(2) svg{animation-delay:0.17s} .rail .nav:nth-of-type(3) svg{animation-delay:0.22s} .rail .nav:nth-of-type(4) svg{animation-delay:0.26s} .rail .nav:nth-of-type(5) svg{animation-delay:0.30s} .rail .nav:nth-of-type(6) svg{animation-delay:0.35s} .rail .nav:nth-of-type(7) svg{animation-delay:0.40s} .rail .nav:nth-of-type(8) svg{animation-delay:0.44s} .rail .nav:nth-of-type(9) svg{animation-delay:0.48s} .rail .nav:nth-of-type(10) svg{animation-delay:0.53s} .rail .nav:nth-of-type(11) svg{animation-delay:0.57s} .rail .nav:nth-of-type(12) svg{animation-delay:0.62s} .rail .nav.on svg{animation:z18-pop .42s cubic-bezier(.3,1.5,.5,1) backwards} /* every icon button answers a tap (phones have no hover) */ :is(.rail .nav,.rail .newchat,.rail button,.tool,.send,.chip,.zp-btn,.za-play,.icon-btn,.z-media-pop-close) svg{transition:transform .18s cubic-bezier(.3,1.4,.5,1)} :is(.rail .nav,.rail .newchat,.rail button,.tool,.chip,.zp-btn,.icon-btn,.z-media-pop-close):active svg{transform:scale(.84)!important;transition-duration:.08s} /* the send arrow hops once when there is something to send */ #view-chat .composer[data-empty="false"] .send:not(.stop) svg, .studio-composer:has(>textarea:not(:placeholder-shown)) .send svg{animation:z18-hop .5s cubic-bezier(.3,1.4,.5,1)} /* play / pause keys swap with a small pop */ :is(.za-play,.zp-btn) svg{animation:z18-pop .3s cubic-bezier(.3,1.5,.5,1)} /* menus open with a short drop, not a jump */ .pop:not([hidden]),.plus-menu:not([hidden]),#chatPickerPane:not([hidden]){animation:z18-drop .18s ease-out both} @media (prefers-reduced-motion:reduce){ .zeka-landing .z-land-center,.zeka-landing .z-land-type,.zeka-landing .z-land-bottom,.z-chat-hero .z-chat-eye,.z-chat-hero h2, .rail .nav.on svg,.pop:not([hidden]),.plus-menu:not([hidden]),#chatPickerPane:not([hidden]), .rail :is(.nav,.newchat) svg,.send svg,:is(.za-play,.zp-btn) svg{animation:none!important} :is(.rail .nav,.rail .newchat,.rail button,.tool,.chip,.zp-btn,.icon-btn,.z-media-pop-close):active svg{transform:none!important} .rail .nav svg,.rail .newchat svg,:is(.studio-composer,#view-chat .composer) :is(.tool,.send) svg,#view-chat .model-symbol svg,.z-enhance-btn{ transition:none!important;transform:none!important} } /* ───── r21 Recent / History: readable rows, options menu, manager ───── */ :root .threads-list .thread.z-media-thread{height:auto!important;min-height:52px;flex-direction:row;align-items:center;gap:6px;padding:8px 8px 8px 12px} :root[dir=rtl] .threads-list .thread.z-media-thread{padding:8px 12px 8px 8px} .z-media-thread .z-mt-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .z-media-thread .z-mt-text b,.z-media-thread .z-mt-text small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35} .z-media-thread .z-mt-text b{font-size:12.5px;font-weight:600;color:var(--ink-2)} .z-media-thread.on .z-mt-text b{color:var(--ink)} .z-media-thread .z-mt-text small{font-size:11px;color:var(--ink-3)} .z-media-thread.z-st-error .z-mt-text small{color:#e58a7b} .thread .zr-dots{flex:none;opacity:.55} .thread:hover .zr-dots,.thread.on .zr-dots,.thread:focus-within .zr-dots{opacity:1} @media (hover:none){.thread .zr-dots{opacity:.9}} .zr-dots{width:28px;height:28px;display:inline-grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer} .zr-dots:hover,.zr-dots:focus-visible{background:var(--surface-3,rgba(255,255,255,.08));color:var(--ink)} .zr-searchrow{display:flex;align-items:center;gap:6px;margin:0 8px 6px} .zr-searchrow>input{flex:1;min-width:0;margin:0!important} .zr-manage{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px;background:transparent;color:var(--ink-3);cursor:pointer} .zr-manage:hover,.zr-manage:focus-visible{color:var(--ink);background:var(--surface-2)} .zr-menu{position:fixed;z-index:10000;min-width:200px;max-width:min(280px,calc(100vw - 16px));max-height:min(60vh,420px);overflow:auto;padding:6px;border-radius:12px;background:#171412;border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.5)} .zr-menu button{display:block;width:100%;text-align:start;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#efe8e1;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zr-menu button:hover,.zr-menu button:focus-visible{background:rgba(255,255,255,.07);outline:0} .zr-menu button.zr-indent{padding-inline-start:22px;font-size:12.5px;color:#cfc6bd} .zr-menu button.danger{color:#f09a8a} .zr-mlabel{padding:8px 10px 4px;font-size:11px;color:#8f857c} .zr-dialog{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55)} .zr-card{width:min(420px,100%);padding:18px;border-radius:16px;background:#171412;border:1px solid rgba(255,255,255,.1);color:#efe8e1} .zr-q{margin:0 0 12px;font-size:14px;line-height:1.7} .zr-in{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0f0d0c;color:#fff;font:inherit} .zr-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} .zr-btns button{min-height:38px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#efe8e1;font:inherit;cursor:pointer} .zr-btns .zr-ok{background:#efe8e1;color:#0f0d0c;border-color:transparent} .zr-btns .zr-ok.danger{background:#c9533f;color:#fff} .zr-sheet{position:fixed;inset:0;z-index:9990;display:flex;justify-content:center;align-items:flex-start;padding:max(16px,env(safe-area-inset-top)) 16px 16px;background:rgba(0,0,0,.55);overflow:auto} .zr-sheet[hidden]{display:none} .zr-panel{width:min(860px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;border-radius:18px;background:#0f0d0c;border:1px solid rgba(255,255,255,.1);color:#efe8e1;box-shadow:0 24px 60px rgba(0,0,0,.55)} .zr-panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px} .zr-panel h2{margin:0;font-size:17px;font-weight:600} .zr-close{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#cfc6bd;font-size:22px;cursor:pointer} .zr-close:hover{background:rgba(255,255,255,.07)} .zr-tools{display:flex;gap:8px;padding:6px 18px} .zr-search{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#171412;color:#fff;font:inherit} .zr-sort{flex:none;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#171412;color:#efe8e1;font:inherit} .zr-chips,.zr-folders{display:flex;gap:6px;padding:6px 18px;overflow-x:auto;scrollbar-width:none} .zr-chips::-webkit-scrollbar,.zr-folders::-webkit-scrollbar{display:none} .zr-chip,.zr-f{flex:none;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#cfc6bd;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap} .zr-chip.on,.zr-f.on{background:#efe8e1;color:#0f0d0c;border-color:transparent} .zr-fwrap{display:inline-flex;align-items:center;gap:2px;flex:none} .zr-fx{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:#8f857c;cursor:pointer;font-size:14px} .zr-fx:hover{color:#fff;background:rgba(255,255,255,.07)} .zr-list{overflow:auto;padding:6px 10px 14px;min-height:120px} .zr-row{display:flex;align-items:center;gap:6px;border-radius:12px} .zr-row:hover{background:rgba(255,255,255,.04)} .zr-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 8px;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer} .zr-kind{flex:none;min-width:58px;text-align:center;padding:4px 8px;border-radius:8px;font-size:11px;background:rgba(255,255,255,.06);color:#cfc6bd} .zr-text{display:flex;flex-direction:column;gap:3px;min-width:0} .zr-text b{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zr-text small{font-size:11.5px;color:#8f857c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zr-text small.zr-bad{color:#e58a7b}.zr-text small.zr-run{color:#d9b56b} .zr-empty{padding:24px;text-align:center;color:#8f857c} @media (max-width:560px){.zr-sheet{padding:0}.zr-panel{border-radius:0;max-height:100dvh;height:100dvh}.zr-kind{min-width:48px}.zr-tools{flex-wrap:wrap}.zr-sort{min-height:40px}} @media (prefers-reduced-motion:no-preference){.zr-menu,.zr-card,.zr-panel{animation:zr-in .16s ease-out}@keyframes zr-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}} /* r21: music composer never pushes the send button off narrow phones (320 px) */ #view-music .studio-composer .bar{min-width:0;max-width:100%} #view-music .studio-composer .bar>.z-music-extra-trigger{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-music .studio-composer .bar>.z-music-extra-trigger>*{min-width:0} #view-music .studio-composer .bar>.popwrap{flex:0 1 auto;min-width:0} #view-music .studio-composer .bar>.send{flex:none} /* r21: generated music card */ .z-music-card{display:flex;flex-direction:column;gap:10px;padding:12px} .z-music-card .za{width:100%} .z-music-card .meta{display:flex;align-items:center;gap:8px;min-width:0} .z-music-card .meta code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;opacity:.7} .z-music-cover{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#f85f2e,#7a2cbf);color:#fff}