/* Usrati look and feel (usrati.gov.ae/family), modern pass, laid over the TDRA design.
* Style only: no selector here changes layout logic, visibility rules or anything the scripts rely on.
* Loaded LAST in index.html. To return to the TDRA look, remove its , and with it the answer-speed dropdown:
* the #speedDd wrapper and its trigger in index.html, and speed-dropdown.js. */
/* ======================================================================
1. Fonts (all SIL Open Font License, self-hosted from Fontsource 5.1.0)
English Arabic
headings Plus Jakarta Sans Tajawal
body Public Sans Noto Sans Arabic
Each face is limited to its own alphabet (unicode-range), so in a mixed line the
English words take the English face and the Arabic words the Arabic one.
====================================================================== */
/* English body: Public Sans (variable, 100-900) */
@font-face {
font-family:'Public Sans';
font-style:normal; font-weight:100 900; font-display:swap;
src:url('/static/fonts/public-sans-latin.v1.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-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Public Sans';
font-style:normal; font-weight:100 900; font-display:swap;
src:url('/static/fonts/public-sans-latin-ext.v1.woff2') format('woff2');
unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* English headings: Plus Jakarta Sans (variable, 200-800) */
@font-face {
font-family:'Plus Jakarta Sans';
font-style:normal; font-weight:200 800; font-display:swap;
src:url('/static/fonts/plus-jakarta-sans-latin.v1.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-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Plus Jakarta Sans';
font-style:normal; font-weight:200 800; font-display:swap;
src:url('/static/fonts/plus-jakarta-sans-latin-ext.v1.woff2') format('woff2');
unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arabic body: Noto Sans Arabic (variable, 100-900); Arabic characters only */
@font-face {
font-family:'Noto Sans Arabic';
font-style:normal; font-weight:100 900; font-display:swap;
src:url('/static/fonts/noto-sans-arabic.v1.woff2') format('woff2');
unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Arabic headings: Tajawal (static weights 400 / 500 / 700 / 800); Arabic characters only */
@font-face { font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap;
src:url('/static/fonts/tajawal-arabic-400.v1.woff2') format('woff2');
unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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:'Tajawal'; font-style:normal; font-weight:500; font-display:swap;
src:url('/static/fonts/tajawal-arabic-500.v1.woff2') format('woff2');
unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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:'Tajawal'; font-style:normal; font-weight:600 700; font-display:swap;
src:url('/static/fonts/tajawal-arabic-700.v1.woff2') format('woff2');
unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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:'Tajawal'; font-style:normal; font-weight:800 900; font-display:swap;
src:url('/static/fonts/tajawal-arabic-800.v1.woff2') format('woff2');
unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E,
U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* ======================================================================
2. Tokens
====================================================================== */
:root {
/* Usrati palette */
--us-slate:#5A6175; /* the action colour: buttons, selected states */
--us-slate-deep:#454B5C;
--us-taupe:#C8C0AE; /* service-card taupe */
--us-sand:#E5DDCA; /* footer sand */
--us-sand-soft:#F4EFE5;
--us-brown:#8C7B5B; /* the logo's tone */
--us-ink:#212529;
--us-muted:#5F5A50;
--us-line:#E7E1D4;
/* radius steps with size: small controls < chips < cards < the question box */
--us-r-sm:8px;
--us-r-md:12px;
--us-r-lg:16px;
--us-r-xl:22px;
--us-shadow-float:0 1px 2px rgba(35,38,45,.05), 0 12px 32px -8px rgba(35,38,45,.16);
--us-shadow-raise:0 1px 2px rgba(35,38,45,.06), 0 2px 6px -2px rgba(35,38,45,.08);
/* mapped onto the design's roles */
--md-primary:var(--us-slate);
--md-on-primary:#ffffff;
--md-primary-container:var(--us-slate);
--md-on-primary-container:var(--us-line);
--md-secondary:var(--us-slate);
--md-secondary-container:var(--us-sand);
--md-on-secondary-container:#463E2E;
--md-tertiary:var(--us-brown);
--md-tertiary-container:var(--us-sand);
--md-on-tertiary-container:#463E2E;
--md-surface:#FFFFFF;
--md-surface-bright:#FFFFFF;
--md-surface-container-lowest:#FFFFFF;
--md-surface-container-low:#FFFFFF;
--md-surface-container:#FFFFFF;
--md-surface-container-high:var(--us-sand-soft);
--md-surface-container-highest:#ECE5D5;
--md-on-surface:var(--us-ink);
--md-on-surface-variant:var(--us-muted);
--md-outline:#8A8475;
--md-outline-variant:#D9D1BF;
/* greeting gradient: Usrati browns */
--md-primary-30:#6B5D42;
--md-primary-40:#8C7B5B;
--md-primary-50:#A6967A;
--md-primary-70:#C8C0AE;
--md-primary-80:#E5DDCA;
--ua-line:var(--us-line);
--ua-tint:var(--us-sand-soft);
--ua-tint-line:#E4DBC8;
--md-hover-layer:linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 0 0);
--md-press-layer:linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 0 0);
/* English face first, Arabic face second: each only covers its own alphabet */
--font:'Public Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
--font-heading:'Plus Jakarta Sans', 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
--md-display-small:600 2.75rem/1.15 var(--font-heading);
--md-display-small-track:-.02em;
--md-title-small:600 .9375rem/1.3rem var(--font);
--md-label-large:600 .875rem/1.25rem var(--font);
}
::selection { background:var(--us-sand); color:var(--us-ink); }
/* The app is exactly the window: never wider than 100vw, never taller than 100vh, in every browser.
* No zoom / scale tricks (they rendered differently across Chrome versions and pushed the app past
* the window's right and bottom edges). The panels' margin and the welcome screen's tightening on
* short windows (section 8) keep everything inside. */
@media (min-width: 821px) {
html, body { width:100%; height:100%; overflow:hidden; zoom:normal; }
.app {
position:fixed; inset:0;
width:100vw; height:100vh; max-width:100vw; max-height:100vh;
transform:none; overflow:hidden;
}
}
:focus-visible { outline:2px solid var(--us-slate); outline-offset:2px; }
/* slim scrollbars */
* { scrollbar-width:thin; scrollbar-color:#D3CAB6 transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#D3CAB6; border-radius:10px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background-color:#BDB39D; }
::-webkit-scrollbar-track { background:transparent; }
/* ======================================================================
3. Top bar
====================================================================== */
.topbar {
height:72px; background:#fff; border-bottom:1px solid var(--us-line);
position:relative; z-index:5;
}
.topbar .brand { height:44px; mix-blend-mode:multiply; } /* the PNG's white background melts into the panel */
/* ======================================================================
4. Sidebar
====================================================================== */
.side { background:linear-gradient(180deg, #EEF2F7 0%, #F8F5EF 100%); border-inline-end:1px solid var(--us-line); }
.side-head { height:72px; }
/* New chat: white card with a warm, layered drop shadow (brand brown, not grey) that lifts on hover */
.newchat {
height:48px; margin-block:4px; border-radius:var(--us-r-md);
background:#fff; color:var(--us-ink); border:1px solid rgba(200,192,174,.35);
box-shadow:
0 1px 1px rgba(107,93,66,.025),
0 2px 4px -1px rgba(107,93,66,.04),
0 8px 18px -8px rgba(107,93,66,.10);
transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.newchat:hover {
background-image:none; border-color:rgba(200,192,174,.6); transform:translateY(-1px);
box-shadow:
0 1px 2px rgba(107,93,66,.03),
0 4px 8px -2px rgba(107,93,66,.05),
0 14px 26px -10px rgba(107,93,66,.15);
}
.newchat:active { transform:translateY(0); box-shadow:0 1px 2px rgba(107,93,66,.05); }
.newchat .ic { color:var(--us-cta); }
.newchat kbd {
padding:2px 6px; border-radius:6px; background:var(--us-sand-soft); color:var(--us-muted);
font:500 .75rem/1rem var(--font);
}
.side-find {
height:42px; border-radius:var(--us-r-md);
background:rgba(255,255,255,.7); border:1px solid var(--us-line);
}
.side-find:focus-within { background:#fff; outline:2px solid var(--us-slate); outline-offset:-1px; }
.chat-group > .lbl { padding:14px 16px 6px; font:600 .75rem/1rem var(--font); color:var(--us-muted); letter-spacing:.02em; }
.chat { border-radius:var(--us-r-sm); transition:background-color .15s ease; }
.chat.on { background-color:#fff; color:var(--us-ink); box-shadow:var(--us-shadow-raise); }
.chat.on .open { font-weight:600; }
.scopebtn { border-radius:var(--us-r-md); }
/* language switch: a brand pill, the globe in a sand circle, the letter in Usrati's Arabic face */
.langbtn {
height:40px; gap:8px; padding-inline:5px 14px; border-radius:999px;
border:1px solid var(--us-line); background:#fff; color:var(--us-cta-ink);
box-shadow:0 1px 2px rgba(107,93,66,.05);
transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.langbtn .ic {
box-sizing:content-box; width:16px; height:16px; padding:7px; border-radius:50%;
background:var(--us-cta-tint); color:var(--us-cta);
transition:transform .4s ease, background-color .2s ease;
}
.langbtn .lang-short { font:600 .9375rem/1 var(--font); color:var(--us-cta-ink); }
.langbtn:hover {
background-image:none; background-color:#FBF8F2; border-color:var(--us-taupe);
box-shadow:0 4px 10px -6px rgba(107,93,66,.25);
}
.langbtn:hover .ic { transform:rotate(-20deg); background-color:#EBE2CF; }
.langbtn:active .ic { transform:rotate(-20deg) scale(.92); }
.langbtn:focus-visible { outline:2px solid var(--us-cta); outline-offset:2px; }
/* Full-name label: the button names the language it switches to ("العربية" in the English UI,
* "English" in the Arabic one). i18n.js already keeps that name in the button's title on every switch,
* so the label is drawn from it; the short "ع" / "EN" stays in the markup for the folded rail. */
.langbtn .lang-short { display:none; }
.langbtn::after {
content:attr(title);
font:600 .9375rem/1 var(--font); color:var(--us-cta-ink); white-space:nowrap;
}
/* folded sidebar rail: no room for the full name, so globe + short letter */
.nav-rail .app .langbtn { padding-inline:4px 10px; gap:6px; }
.nav-rail .app .langbtn .lang-short { display:inline; }
.nav-rail .app .langbtn::after { content:none; }
/* ======================================================================
5. Welcome screen
The one bold move: Usrati's outlined wordmark, as a faint watermark
behind the greeting (decorative, hidden from screen readers).
====================================================================== */
.hello h2 { color:var(--us-ink); }
/* the greeting on one line: drop the script's
. The space before the accent part is a real one (thread.js), so
* each language gets its own font's word space; a margin here was narrower than Tajawal's and joined the Arabic words. */
.hello h2 br { display:none; }
.hello p { color:var(--us-muted); font-size:1.0625rem; line-height:1.6; }
/* starter questions: lighter Usrati cards, the taupe kept for the icon */
.cards { gap:14px; }
.cards button {
padding:18px; border:1px solid var(--us-line); border-radius:var(--us-r-lg);
background:#FBF9F5; color:var(--us-ink);
transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cards button:hover {
background-image:none; background-color:#fff; border-color:var(--us-taupe); box-shadow:var(--us-shadow-raise);
}
.cards .tile {
width:44px; height:44px; border-radius:var(--us-r-md);
background:var(--us-sand); color:#4A4130;
}
.cards .q { color:var(--us-ink); }
.cards .meta { color:var(--us-muted); }
.cards .go-in { color:var(--us-brown); transition:transform .2s ease; }
.cards button:hover .go-in { transform:translate(2px, -2px); }
[dir="rtl"] .cards button:hover .go-in { transform:translate(-2px, -2px); }
.talk { border-radius:var(--us-r-md); background:var(--us-sand-soft); color:var(--us-slate-deep); border:1px solid var(--us-line); }
/* ======================================================================
6. Conversation: modern chat layout in the brand colours
- no assistant avatar: the answer is clean text in the reading column
- the person's message is a light, warm bubble on the reading side's end
- comfortable reading type, room between exchanges, sources as small cards
====================================================================== */
.col { padding-top:32px; padding-bottom:16px; }
.turn { padding:0; gap:10px; }
.turn.you { margin-top:32px; }
.turn.you:first-child { margin-top:0; }
.turn.agent { margin-top:16px; padding-inline-start:0; }
/* the assistant's face is gone from the thread (the voice screen keeps its own) */
.agent-avatar.in-thread { display:none; }
/* the person's message */
.turn.you .bubble {
max-width:min(78%, 620px); padding:12px 18px;
background:#F4EEE2; color:var(--us-ink); border:1px solid #EAE1CE;
border-radius:22px; border-end-end-radius:6px;
font:400 1rem/1.6 var(--font);
}
/* the answer */
.answer-box { padding-block:0; }
.answer { color:var(--us-ink); font:400 1.0625rem/1.75 var(--font); }
.answer strong { font-weight:650; color:#1B1D21; }
.answer a:not(.cite) { color:var(--us-cta); text-decoration:underline; text-decoration-color:rgba(127,110,80,.35); text-underline-offset:3px; }
.answer a:not(.cite):hover { text-decoration-color:currentColor; }
.answer.streaming::after { background:var(--us-cta); border-radius:2px; }
/* ---- thinking style: shown while an answer is being prepared ----
* The status line ("Searching tdra.gov.ae…", "Thinking…", "Going through what was found…") becomes a soft pill
* with an animated brand sparkle; the model's reasoning, when the server sends it, shows in a calm card under it.
* Labels, timing and behaviour are the app's own (live.js); this is styling only. */
.working { padding:2px 0; }
.working .lead {
display:inline-flex; align-items:center; gap:10px; width:fit-content;
padding-block:7px; padding-inline:9px 16px; border-radius:999px; /* logical, so Arabic mirrors it */
background:#FBF8F2; border:1px solid var(--us-line);
box-shadow:0 1px 2px rgba(107,93,66,.05);
animation:us-think-in .35s ease-out both;
}
.working .dots { display:none; } /* the sparkle below replaces the three dots */
.working .lead::before {
content:""; flex:none; width:20px; height:20px; border-radius:50%;
background:
radial-gradient(circle at 50% 50%, rgba(229,221,202,.95) 0 38%, rgba(229,221,202,0) 70%);
animation:us-think-halo 1.8s ease-in-out infinite;
}
.working .lead::after { /* the sparkle itself, drawn over the halo */
content:""; position:absolute; width:16px; height:16px; inset-inline-start:11px; top:calc(50% - 8px);
background:linear-gradient(135deg, var(--us-cta-light), var(--us-cta) 55%, var(--us-cta-hover));
-webkit-mask:var(--us-sparkle) center/contain no-repeat; mask:var(--us-sparkle) center/contain no-repeat;
animation:us-think-spark 1.8s ease-in-out infinite;
}
.working .lead { position:relative; }
.working .say {
font:500 .9375rem/1.3 var(--font); letter-spacing:0;
background:linear-gradient(90deg, var(--us-muted) 0%, var(--us-cta) 40%, #C9B994 50%, var(--us-cta) 60%, var(--us-muted) 100%);
background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
animation:ig-shimmer 2.2s linear infinite;
}
.working .say:empty { display:none; } /* before the first status the pill is the sparkle alone */
.working .lead:has(.say:empty) { padding:7px 9px; }
@keyframes us-think-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes us-think-halo { 0%,100% { transform:scale(.85); opacity:.7; } 50% { transform:scale(1.15); opacity:1; } }
@keyframes us-think-spark { 0% { transform:rotate(0) scale(.9); } 50% { transform:rotate(45deg) scale(1.08); } 100% { transform:rotate(90deg) scale(.9); } }
/* The model's reasoning text is not shown: only the thinking pill above says what is happening.
* (Developer view still lists its search steps in this card.) */
.live .think { display:none; }
.live:not(:has(.step)) { display:none; }
.live {
max-width:min(640px, 100%); margin-top:10px; padding:12px 16px;
background:#FBF8F2; border:1px solid var(--us-line); border-radius:14px;
font:400 .875rem/1.6 var(--font); color:var(--us-muted);
}
.live .step .mark.active { color:var(--us-cta); }
.live .step .mark.done { background:var(--us-cta-tint); color:var(--us-cta-ink); }
/* citation markers in the text */
.cite {
min-width:20px; height:20px; padding:0 6px; margin-inline:2px; vertical-align:.15em;
border-radius:6px; background:var(--us-cta-tint); color:var(--us-cta-ink);
font:600 .6875rem/20px var(--font); box-shadow:inset 0 0 0 1px rgba(200,192,174,.7);
transition:background-color .15s ease, color .15s ease;
}
@media (hover: hover) { .cite:hover { background:var(--us-cta); color:#fff; box-shadow:none; } }
/* sources: a quiet label, then small cards */
.sources { margin-top:14px; gap:10px; }
.sources .cap { gap:6px; padding-inline-start:0; font:600 .8125rem/1 var(--font); letter-spacing:0; color:var(--us-muted); }
.sources .cap .ic { font-size:15px; color:var(--us-cta); }
.sources .grid { gap:8px; }
.sources .src {
height:auto; min-height:38px; padding-block:6px; padding-inline:6px 14px; gap:10px; max-width:min(320px, 100%);
border:1px solid var(--us-line); border-radius:12px; background:#FBF8F2;
transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sources .src:hover {
background-image:none; background-color:#fff; border-color:var(--us-taupe);
box-shadow:0 6px 16px -10px rgba(107,93,66,.45); transform:translateY(-1px);
}
.sources .src .n {
width:24px; height:24px; border-radius:7px; background:var(--us-cta-tint); color:var(--us-cta-ink);
font:700 .75rem/1 var(--font);
}
.sources .src .t { font:600 .8125rem/1.25 var(--font); color:var(--us-ink); }
.sources .src .h { font:400 .75rem/1 var(--font); color:var(--us-muted); }
/* under the answer: time taken, quiet */
.acts { margin-top:2px; }
.acts .meta { margin-inline-start:0; font:400 .75rem/1 var(--font); color:#9A9182; }
.acts button { border-radius:var(--us-r-sm); }
@media (max-width: 820px) {
.turn.you .bubble { max-width:88%; }
.col { padding-top:20px; }
}
.review, .contact-card { border-radius:var(--us-r-lg); border-color:var(--us-line); box-shadow:var(--us-shadow-raise); }
.review-status, .contact-icon { border-radius:var(--us-r-sm); }
.contact-btn { border-radius:var(--us-r-md); }
/* voice screen: the status chip's dot is brand brown, not the slate primary; it still turns red while the microphone
* is live (voice.css, a more specific rule). The agent's faces are turned gold in section 10. */
.voice-chip .dot { background:var(--us-cta); }
/* ======================================================================
7. Question box: the only floating surface, so the only real shadow
====================================================================== */
.field {
border:1px solid var(--us-line); border-radius:var(--us-r-xl); background:#fff;
box-shadow:var(--us-shadow-float);
transition:box-shadow .2s ease, border-color .2s ease;
}
.field:focus-within {
outline:none; border-color:var(--us-taupe);
box-shadow:0 0 0 4px rgba(200,192,174,.35), var(--us-shadow-float);
}
.think-toggle { height:36px; padding:3px; gap:2px; border-radius:var(--us-r-md); background:var(--us-sand-soft); }
.think-toggle button,
.think-toggle button:first-child,
.think-toggle button:last-child {
border:0; border-radius:9px; padding-inline:10px 14px; color:var(--us-muted);
transition:background-color .2s ease, color .2s ease;
}
.think-toggle button.on { background-color:#fff; color:var(--us-ink); box-shadow:var(--us-shadow-raise); }
.seg { border-color:var(--us-line); border-radius:var(--us-r-md); }
.seg button { border-radius:9px; }
.seg button.on { background-color:var(--us-slate); color:#fff; }
.go { transition:background-color .2s ease, transform .15s ease; }
.go:not(:disabled):hover { background-color:var(--us-slate-deep); background-image:none; }
.go:not(:disabled):active { transform:scale(.95); }
#banner { border-radius:var(--us-r-md); }
.toast { border-radius:var(--us-r-md); background:var(--us-ink); }
@media (max-width: 820px) {
.field { border-radius:var(--us-r-lg); }
}
/* ======================================================================
8. Panel layout (structure of the reference design)
- the page is a soft grey canvas; sidebar and main are two floating
rounded panels
- sidebar: logo + collapse button, search, chat history, language
- top bar: dark "New chat" button + sign-in at the end
- empty state: orb, greeting, a large question box in the centre,
suggestion cards under it
Visual order only: the DOM order, ids and scripts are unchanged.
====================================================================== */
:root { --us-canvas:linear-gradient(135deg, #EEF2F7 0%, #F8F5EF 100%); --us-panel-r:20px; }
body { background:var(--us-canvas); }
/* ---- sidebar header: the collapse button ---- */
.side-head { gap:8px; padding-inline:16px 12px; }
.navbtn { width:40px; height:40px; font-size:20px; border-radius:10px; }
/* ---- top bar ---- */
.topbar { background:transparent; border-bottom:0; box-shadow:none; padding-inline:20px; }
.top-acts { align-items:center; gap:12px; }
/* ---- wide screens: two floating panels ---- */
@media (min-width: 821px) {
/* the panels float on the canvas: 24px top and bottom, 12px left and right, 12px between them */
:root { --us-page-pad-y:24px; --us-page-pad-x:12px; --us-page-gap:12px; }
.app {
padding:var(--us-page-pad-y) var(--us-page-pad-x);
column-gap:var(--us-page-gap); background:var(--us-canvas);
}
.side { border-radius:var(--us-panel-r); border:1px solid var(--us-line); background:#FFFFFF; }
.main { border-radius:var(--us-panel-r); border:1px solid var(--us-line); overflow:hidden; background:#FFFFFF; }
.main:has(.hello) {
background:radial-gradient(900px 500px at 50% 62%, rgba(229,221,202,.35), rgba(229,221,202,0) 70%), #FFFFFF;
}
:root:not(.nav-rail) :is(.side-head, .side-top, .chats, .side-foot, .side-find) { min-width:0; }
/* folded rail: the collapse button centred */
.nav-rail .app .side-head { padding-inline:0; justify-content:center; }
.nav-rail .app .side-top { padding-inline:0; align-items:center; }
}
/* ---- sidebar contents ---- */
.side-find {
margin:4px 14px 14px; height:42px; background:#fff; border:1px solid var(--us-line);
box-shadow:0 1px 2px rgba(35,38,45,.05), 0 2px 8px -4px rgba(35,38,45,.08);
}
.chats { padding:0 10px 12px; }
.chat-group > .lbl { padding:16px 12px 6px; font:500 .8125rem/1rem var(--font); color:var(--us-brown); letter-spacing:0; }
.chat { height:40px; padding-inline:12px 4px; color:var(--us-slate); }
.chat.on { background-color:var(--us-sand-soft); box-shadow:none; color:var(--us-ink); }
.side-foot { padding:10px 14px 14px; }
.side-foot-row { padding:4px 6px; }
/* ---- question box, reference style ---- */
.field { padding:18px 18px 14px; padding-inline-start:46px; }
.field::before { /* the sparkle before the prompt */
content:""; position:absolute; top:22px; inset-inline-start:20px; width:16px; height:16px;
background:linear-gradient(135deg, var(--us-slate), var(--us-brown));
-webkit-mask:var(--us-sparkle) center/contain no-repeat;
mask:var(--us-sparkle) center/contain no-repeat;
pointer-events:none;
}
:root {
--us-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 7.4L22 11l-7.4 2.6L12 21l-2.6-7.4L2 11l7.4-2.6z'/%3E%3Cpath d='M20 0l.9 2.1L23 3l-2.1.9L20 6l-.9-2.1L17 3l2.1-.9z'/%3E%3C/svg%3E");
}
.field-row { margin-inline-start:-28px; gap:10px; } /* the controls line up with the box edge, under the sparkle */
.composer { background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 34%); }
/* ---- controls row: pill style in the Usrati brand colour ----
* [ (clip) ] [ Fast response ] [ Deep think ] ............ [ ==send== ]
* The brand colour is the logo's taupe (#C4BCAC). It is too light to carry white text
* (about 1.9:1), so actions use deeper shades of the same hue:
* --us-cta #7F6E50 white text at ~5:1 (WCAG AA)
* --us-cta-hover #6B5D42
* --us-cta-tint #F1EADB the chosen pill, with --us-cta-ink text at ~5.4:1 */
:root {
--us-cta:#7F6E50;
--us-cta-hover:#6B5D42;
--us-cta-light:#A39271;
--us-cta-tint:#F1EADB;
--us-cta-ink:#5E5139;
}
/* attach: a round outlined button, beside the talk / send button */
.field .attach-btn {
flex:0 0 auto; width:44px; height:44px; border-radius:50%;
border:1px solid var(--us-line); background:#fff; color:var(--us-cta);
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.field .attach-btn:hover:not(:disabled) { background:var(--us-cta-tint); border-color:var(--us-taupe); color:var(--us-cta-ink); }
/* answer speed: a dropdown (speed-dropdown.js). The trigger is a pill showing the current choice;
* the menu is the original #thinkToggle, drawn as a card that opens upward. */
.speed-dd { position:relative; display:inline-flex; }
.speed-trigger {
display:inline-flex; align-items:center; gap:8px; height:44px; padding-inline:16px 14px; cursor:pointer;
border:1px solid var(--us-taupe); border-radius:999px; background:var(--us-cta-tint); color:var(--us-cta-ink);
font:600 .9375rem/1 var(--font); white-space:nowrap;
transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.speed-trigger .speed-ic { font-size:18px; }
.speed-trigger .speed-chev { font-size:14px; opacity:.75; transition:transform .2s ease; }
.speed-trigger:hover { background:#EBE2CF; }
.speed-trigger:disabled { opacity:.55; cursor:not-allowed; }
.speed-trigger:focus-visible { outline:2px solid var(--us-cta); outline-offset:3px; }
.speed-dd.open .speed-trigger { box-shadow:0 0 0 4px rgba(200,192,174,.35); }
.speed-dd.open .speed-chev { transform:rotate(180deg); }
.speed-dd .think-toggle {
position:absolute; z-index:30; bottom:calc(100% + 10px); inset-inline-start:0;
display:none; flex-direction:column; gap:2px; height:auto; min-width:220px; padding:6px;
background:#fff; border:1px solid var(--us-line); border-radius:14px;
box-shadow:0 2px 4px rgba(33,37,41,.04), 0 16px 36px -10px rgba(33,37,41,.22);
}
.speed-dd.open .think-toggle { display:flex; animation:us-menu-in .16s ease-out both; }
@keyframes us-menu-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.speed-dd .think-toggle button,
.speed-dd .think-toggle button:first-child,
.speed-dd .think-toggle button:last-child {
display:flex; align-items:center; gap:10px; width:100%; height:44px; padding-inline:12px 36px;
position:relative; border:0; border-radius:10px; background:transparent; color:var(--us-ink);
font:500 .9375rem/1 var(--font); text-align:start; box-shadow:none;
}
.speed-dd .think-toggle button .ic { font-size:18px; color:var(--us-cta); }
.speed-dd .think-toggle button span { display:inline; } /* full labels in the menu, phones included */
.speed-dd .think-toggle button:hover,
.speed-dd .think-toggle button:focus-visible { background:#FBF8F2; outline:none; }
.speed-dd .think-toggle button.on { background:var(--us-cta-tint); color:var(--us-cta-ink); font-weight:600; }
.speed-dd .think-toggle button.on::after { /* check mark on the current choice */
content:""; position:absolute; inset-inline-end:12px; top:50%; width:16px; height:16px; margin-top:-8px;
background:var(--us-cta);
-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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 620px) {
.speed-trigger .speed-label { display:none; } /* icon + caret on a phone; the menu keeps labels */
.speed-trigger { padding-inline:14px 12px; }
}
/* "Talk to me instead" removed from the welcome screen: the talk button in the question box starts voice */
.talk { display:none !important; }
/* send / talk: a wide pill in the brand colour */
.go {
width:68px; height:44px; border-radius:999px; font-size:20px; color:#fff;
background:linear-gradient(180deg, var(--us-cta-light) -40%, var(--us-cta) 60%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -8px rgba(107,93,66,.75);
transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.go:not(:disabled):hover {
background:linear-gradient(180deg, var(--us-cta) -40%, var(--us-cta-hover) 60%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -8px rgba(107,93,66,.85);
}
.go:not(:disabled):active { transform:scale(.96); }
/* hover animation, decoration only (stops under prefers-reduced-motion via tokens.css):
* talk icon -> brand-coloured waves ripple out of the pill and the icon pulses;
* send arrow -> the arrow nudges upward. */
.go { position:relative; overflow:visible; }
.go::before, .go::after {
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
border:2px solid var(--us-cta-light); opacity:0;
}
.go:not(:disabled):not(.voice-live):has(use[href*="broadcast"]):hover::before { animation:us-ripple 1.6s ease-out infinite; }
.go:not(:disabled):not(.voice-live):has(use[href*="broadcast"]):hover::after { animation:us-ripple 1.6s ease-out .8s infinite; }
.go:not(:disabled):not(.voice-live):has(use[href*="broadcast"]):hover .ic { animation:us-pulse 1.6s ease-in-out infinite; }
.go:not(:disabled):has(use[href*="arrow"]):hover .ic { animation:us-nudge .9s ease-in-out infinite; }
@keyframes us-ripple {
0% { opacity:.7; transform:scale(1); }
100% { opacity:0; transform:scale(1.35, 1.7); }
}
@keyframes us-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
@keyframes us-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.go:focus-visible, .think-toggle button:focus-visible, .field .attach-btn:focus-visible {
outline:2px solid var(--us-cta); outline-offset:3px;
}
.go.voice-live { background:var(--md-error); box-shadow:0 8px 18px -8px rgba(186,26,26,.6); }
/* ---- developer view: model, Effort, Websites, Settings, Voice pills ----
* Compact branded pills so the full set fits one row beside attach + talk on a normal screen;
* on a narrower box they wrap, and attach + talk stay pinned to the bottom-end corner. */
.field-row { align-items:flex-end; }
.ctrls { gap:6px; row-gap:8px; }
.pill {
height:36px; padding-inline:12px 8px; gap:6px; max-width:220px;
border:1px solid var(--us-line); border-radius:999px; background:#fff; color:var(--us-ink);
font:500 .8125rem/1 var(--font); letter-spacing:0;
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pill:has(> .ic:first-child) { padding-inline-start:10px; }
.pill > .ic { font-size:16px; color:var(--us-cta); }
.pill .chev { font-size:14px; color:var(--us-muted); transition:transform .2s ease; }
.pill:hover { background-image:none; background-color:#FBF8F2; border-color:var(--us-taupe); }
.pill[aria-expanded="true"] {
background-color:var(--us-cta-tint); border-color:var(--us-taupe); color:var(--us-cta-ink);
}
.pill[aria-expanded="true"] .chev { transform:rotate(180deg); color:var(--us-cta-ink); }
.pill:focus-visible { outline:2px solid var(--us-cta); outline-offset:2px; }
.pill:disabled { opacity:.55; background:#fff; }
/* the model name is the longest label: let it shrink first */
#modelPill { max-width:190px; }
/* their pop-up menus, in the same card style as the speed dropdown */
.pop {
bottom:calc(100% + 10px); padding:6px;
background:#fff; border:1px solid var(--us-line); border-radius:14px;
box-shadow:0 2px 4px rgba(33,37,41,.04), 0 16px 36px -10px rgba(33,37,41,.22);
}
.pop:not([hidden]) { animation:us-menu-in .16s ease-out both; }
.pop-head { padding:10px 12px 6px; font:600 .75rem/1rem var(--font); color:var(--us-brown); letter-spacing:.02em; }
.pop-item { margin-inline:0; border-radius:10px; }
.pop-item:hover { background-image:none; background-color:#FBF8F2; }
.pop-item.on { border-radius:10px; background-color:var(--us-cta-tint); color:var(--us-cta-ink); }
.pop-item .tick { color:var(--us-cta); }
/* top-bar developer buttons (Search playground, Export) */
.ghost {
height:38px; padding-inline:14px; border:1px solid var(--us-line); border-radius:10px;
background:#fff; color:var(--us-cta-ink); font:600 .8125rem/1 var(--font); letter-spacing:0;
transition:background-color .15s ease, border-color .15s ease;
}
.ghost:hover { background-image:none; background-color:var(--us-cta-tint); border-color:var(--us-taupe); }
/* sidebar developer link (Files & vector stores) */
.scopebtn { color:var(--us-cta-ink); }
.scopebtn .ic { color:var(--us-cta); }
.scopebtn:hover { background-image:none; background-color:var(--us-sand-soft); }
/* ---- empty state: orb, greeting, big question box, suggestions under it ---- */
.main:has(.hello) { overflow-x:hidden; overflow-y:auto; }
.main:has(.hello) :is(.scroll, #thread, .hello) { display:contents; }
.main:has(.hello) .topbar { order:0; }
.main:has(.hello) .hello h2 { order:2; margin-top:auto; align-self:center; width:min(840px, calc(100% - 48px)); text-align:center; font-size:clamp(1.9rem, 3vw, 2.6rem); }
.main:has(.hello) .hello p { order:3; align-self:center; width:min(560px, calc(100% - 48px)); text-align:center; margin-top:10px; }
/* greeting + cards centred in the space above; the question box pinned to the bottom of the screen */
.main:has(.hello) .cards { order:4; align-self:center; width:min(840px, calc(100% - 48px)); margin-top:28px; margin-bottom:auto; }
.main:has(.hello) .talk { order:5; align-self:center; margin-top:16px; flex:none; }
.main:has(.hello) .composer { order:6; flex:none; padding-top:24px; margin-top:0; margin-bottom:0; background:none; }
.main:has(.hello) .voice-stage { order:7; }
.main:has(.hello) .field textarea { min-height:3rem; } /* two lines of text (1.5rem line height) */
.main:has(.hello) .composer-in { position:relative; }
.main:has(.hello) .composer-in::before { /* the soft glow around the box */
content:""; position:absolute; z-index:-1; inset:-30px -70px -10px; pointer-events:none;
background:
radial-gradient(50% 60% at 30% 50%, rgba(154,160,178,.28), transparent 70%),
radial-gradient(50% 60% at 72% 55%, rgba(229,221,202,.6), transparent 70%);
filter:blur(28px);
}
/* the starter cards under the box: compact, quieter than the box (defaults; the height steps below override) */
.main:has(.hello) .cards button { padding:14px 16px; background:rgba(255,255,255,.75); }
.main:has(.hello) .cards .tile { width:38px; height:38px; }
/* ---- fit the window height: on shorter screens the welcome screen tightens step by step,
* so greeting + cards + question box always fit without scrolling ---- */
@media (min-width: 821px) and (max-height: 920px) {
.topbar, .side-head { height:60px; }
.main:has(.hello) .hello h2 { font-size:clamp(1.6rem, 4.6vh, 2.4rem); }
.main:has(.hello) .hello p { margin-top:6px; font-size:1rem; line-height:1.5; }
.main:has(.hello) .cards { margin-top:18px; gap:10px; }
.main:has(.hello) .cards button { padding:10px 14px; }
.main:has(.hello) .composer { padding-top:16px; padding-bottom:14px; }
.main:has(.hello) .smallprint { margin-top:8px; }
}
@media (min-width: 821px) and (max-height: 800px) {
.main:has(.hello) .cards .meta { display:none; } /* the card's category line */
.main:has(.hello) .cards .tile { width:32px; height:32px; font-size:16px; }
.main:has(.hello) .cards button { padding:8px 12px; }
.main:has(.hello) .hello p { max-width:none; width:min(760px, calc(100% - 48px)); } /* intro on fewer lines */
}
@media (min-width: 821px) and (max-height: 680px) {
.main:has(.hello) .hello p { display:none; } /* very short windows: greeting, cards, box */
.main:has(.hello) .cards { margin-top:12px; gap:8px; }
.main:has(.hello) .cards button { padding:6px 12px; }
.main:has(.hello) .cards .tile { display:none; }
.main:has(.hello) .cards .q { font-size:.875rem; }
.topbar, .side-head { height:52px; }
}
@media (min-width: 821px) and (max-height: 580px) {
.main:has(.hello) .cards { display:none; } /* tiny windows: greeting + question box */
.main:has(.hello) .hello h2 { margin-bottom:auto; } /* keep the greeting centred above the box */
}
/* ---- narrow screens: one full-bleed panel, the drawer as before ---- */
@media (max-width: 820px) {
.main { background:#FFFFFF; }
.side-head { padding-inline:4px 12px; }
.main:has(.hello) .composer { padding-inline:16px; }
}
/* ======================================================================
7-8. Redesign v3 (home-interactive, Nov 2026): button system v2, landing polish, then the
"Skin v3" layer: floating icon rail that morphs into the chat panel, top-bar EN/عربي switch,
pill question box with a turning gold edge, three starter cards. Style only.
The menu now starts folded as the rail (boot.js: navRail unless the list was opened).
====================================================================== */
/* ======================================================================
Redesign layer: button system v2 + landing polish
One shape language for every action: soft-square 12px corners, three
tiers (primary / secondary / quiet), one hover, press and focus style.
The UAE PASS button is UAE PASS's own artwork and is left untouched.
====================================================================== */
:root {
--bx-r:12px;
--bx-r-sm:10px;
--bx-line:#E2DACA;
--bx-line-hover:#C8C0AE;
--bx-hover:#FAF6EE;
--bx-focus:0 0 0 2px #fff, 0 0 0 4px var(--us-cta);
--bx-lift:0 1px 2px rgba(35,38,45,.05), 0 10px 24px -12px rgba(94,81,57,.35);
}
/* ---------- primary: solid brand fill ---------- */
.go,
.pop-foot button,
.contact-btn.primary {
border-radius:var(--bx-r);
background:var(--us-cta); background-image:none; color:#fff; border:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(35,38,45,.12), 0 8px 18px -10px rgba(94,81,57,.7);
transition:background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.go { width:56px; height:44px; font-size:20px; }
.go:not(:disabled):hover,
.pop-foot button:hover,
.contact-btn.primary:hover {
background:var(--us-cta-hover); background-image:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(35,38,45,.12), 0 12px 24px -10px rgba(94,81,57,.8);
}
.go:not(:disabled):active,
.pop-foot button:active,
.contact-btn.primary:active { transform:scale(.97); }
.go:disabled { background:#EEEAE2; color:#9A9384; box-shadow:none; }
.go.voice-live { background:var(--md-error); }
.go::before, .go::after { border-radius:inherit; }
/* ---------- secondary: white, hairline, warms on hover ---------- */
.field .attach-btn,
.speed-trigger,
.pill,
.ghost,
.langbtn,
.contact-btn:not(.primary),
.service-chip,
.set-actions button {
border:1px solid var(--bx-line); background:#fff; background-image:none; color:var(--us-ink);
box-shadow:0 1px 2px rgba(35,38,45,.04);
transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.field .attach-btn { width:44px; height:44px; border-radius:var(--bx-r); color:var(--us-cta); }
.speed-trigger { height:44px; border-radius:var(--bx-r); color:var(--us-cta-ink); font-weight:600; }
.speed-trigger .speed-ic { color:var(--us-cta); }
.pill { border-radius:var(--bx-r-sm); }
.ghost { border-radius:var(--bx-r-sm); color:var(--us-cta-ink); }
.langbtn { border-radius:var(--bx-r); }
.langbtn .ic { border-radius:8px; }
.contact-btn:not(.primary) { border-radius:var(--bx-r); color:var(--us-cta-ink); }
.service-chip { border-radius:var(--bx-r-sm); color:var(--us-cta-ink); }
.set-actions button { border-radius:var(--bx-r-sm); color:var(--us-cta-ink); }
.field .attach-btn:hover:not(:disabled),
.speed-trigger:hover,
.pill:hover,
.ghost:hover,
.langbtn:hover,
.contact-btn:not(.primary):hover,
.service-chip:hover,
.set-actions button:hover {
background:var(--bx-hover); background-image:none; border-color:var(--bx-line-hover); color:var(--us-cta-ink);
box-shadow:0 1px 2px rgba(35,38,45,.05), 0 4px 10px -6px rgba(94,81,57,.3);
}
.field .attach-btn:active:not(:disabled),
.speed-trigger:active,
.pill:active,
.ghost:active,
.contact-btn:not(.primary):active,
.service-chip:active { transform:scale(.97); background:var(--us-cta-tint); }
/* open / chosen state: tinted fill with a brand edge */
.pill[aria-expanded="true"],
.speed-dd.open .speed-trigger {
background:var(--us-cta-tint); border-color:var(--us-cta-light); color:var(--us-cta-ink);
box-shadow:0 0 0 3px rgba(200,192,174,.35);
}
/* New chat: same shape language, the plus in a brand tile */
.newchat { border-radius:var(--bx-r); border-color:var(--bx-line); }
.newchat .ic {
box-sizing:content-box; width:16px; height:16px; padding:6px; border-radius:8px;
background:var(--us-cta); color:#fff;
}
.newchat:hover { border-color:var(--bx-line-hover); }
/* ---------- quiet: text buttons under an answer ---------- */
.acts button { border-radius:var(--bx-r-sm); color:var(--us-muted); transition:background-color .15s ease, color .15s ease; }
.acts button:hover { background:var(--us-sand-soft); background-image:none; color:var(--us-cta-ink); }
/* ---------- one focus ring everywhere ---------- */
.go:focus-visible, .pop-foot button:focus-visible, .contact-btn:focus-visible,
.field .attach-btn:focus-visible, .speed-trigger:focus-visible, .pill:focus-visible,
.ghost:focus-visible, .langbtn:focus-visible, .service-chip:focus-visible,
.set-actions button:focus-visible, .acts button:focus-visible, .newchat:focus-visible,
.cards button:focus-visible {
outline:none; box-shadow:var(--bx-focus);
}
/* ======================================================================
Landing polish
====================================================================== */
.main:has(.hello) {
background-color:#fff;
background-image:
radial-gradient(55% 40% at 50% 0%, rgba(229,221,202,.55), transparent 72%),
radial-gradient(40% 30% at 85% 12%, rgba(154,160,178,.16), transparent 70%);
background-repeat:no-repeat;
}
/* eyebrow above the greeting */
.main:has(.hello) .hello h2::before {
content:"AI Assistant · TDRA";
display:block; width:fit-content; margin:0 auto 18px;
padding-block:6px; padding-inline:26px 14px; border-radius:999px;
border:1px solid var(--bx-line); background:rgba(255,255,255,.8);
background-image:radial-gradient(circle at 14px 50%, var(--us-cta) 0 3px, transparent 3.5px);
font:600 .75rem/1rem var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--us-cta-ink);
white-space:pre; -webkit-text-fill-color:var(--us-cta-ink);
animation:ig-fadeup .45s ease both;
}
html[lang="ar"] .main:has(.hello) .hello h2::before {
content:"المساعد الذكي · هيئة تنظيم الاتصالات";
letter-spacing:0; text-transform:none;
background-image:radial-gradient(circle at calc(100% - 14px) 50%, var(--us-cta) 0 3px, transparent 3.5px);
}
.main:has(.hello) .hello h2 {
font-weight:700; letter-spacing:-.032em; line-height:1.12;
font-size:clamp(2rem, 3.4vw, 3rem);
}
.hello h2 .accent {
background:linear-gradient(100deg, #6B5D42, #A39271, #8C7B5B, #6B5D42);
background-size:300% 100%;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.main:has(.hello) .hello p {
width:min(600px, calc(100% - 48px)); margin-top:14px;
font-size:1.0625rem; line-height:1.65; color:var(--us-muted);
}
/* starter cards: white, eyebrow category, arrow chip that fills on hover */
.main:has(.hello) .cards { gap:12px; margin-top:36px; }
.main:has(.hello) .cards button {
gap:14px; padding:16px 16px 16px 16px; border-radius:16px;
border:1px solid #ECE6DA; background:#fff;
box-shadow:0 1px 2px rgba(35,38,45,.04);
transition:transform .2s var(--md-ease-standard), border-color .2s ease, box-shadow .2s ease;
}
.main:has(.hello) .cards button:hover {
transform:translateY(-2px); border-color:var(--bx-line-hover); box-shadow:var(--bx-lift);
}
.main:has(.hello) .cards button:active { transform:translateY(0); }
.main:has(.hello) .cards .tile {
width:42px; height:42px; border-radius:12px; font-size:19px;
background:linear-gradient(145deg, #F7F2E8, #E9E0CC); color:var(--us-cta-ink);
box-shadow:inset 0 0 0 1px rgba(200,192,174,.45);
}
.cards .txt { flex-direction:column-reverse; gap:4px; }
.cards .q { font:600 .9375rem/1.35 var(--font); color:var(--us-ink); }
.cards .meta {
font:600 .6875rem/1rem var(--font); letter-spacing:.07em; text-transform:uppercase; color:var(--us-cta-ink);
}
html[lang="ar"] .cards .meta { letter-spacing:0; text-transform:none; font-size:.75rem; }
.cards .go-in {
display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
background:var(--us-sand-soft); color:var(--us-cta-ink); font-size:16px;
transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.cards button:hover .go-in { background:var(--us-cta); color:#fff; transform:none; }
[dir="rtl"] .cards button:hover .go-in { transform:none; }
.cards .go-in .ic { width:16px; height:16px; transition:transform .2s ease; }
.cards button:hover .go-in .ic { transform:translate(1px, -1px); }
[dir="rtl"] .cards button:hover .go-in .ic { transform:translate(-1px, -1px); }
/* question box: softer edge, a real focus state */
.field {
border-radius:22px; border-color:#E4DDCF; background:#fff;
box-shadow:0 1px 2px rgba(35,38,45,.04), 0 18px 40px -20px rgba(94,81,57,.3);
transition:border-color .2s ease, box-shadow .2s ease;
}
.field:focus-within {
outline:none; border-color:var(--us-cta-light);
box-shadow:0 0 0 4px rgba(200,192,174,.32), 0 18px 40px -20px rgba(94,81,57,.35);
}
.smallprint { color:#7A7466; }
@media (max-width: 820px) { .field { border-radius:18px; } }
/* ======================================================================
Layout v2: a floating icon rail + soft, very round content surfaces
The menu is a slim pill that hugs its icons at the top-start corner
(menu, new chat, search, language); the chat list opens from it into
the full panel. Content sits on one large rounded surface.
====================================================================== */
:root { --rail-btn:#F2F0EB; --rail-btn-hover:#E8E4DA; --surface-r:32px; }
@media (min-width: 821px) {
.app { padding:20px; column-gap:20px; }
.main { border-radius:var(--surface-r); border:1px solid #EEEAE1;
box-shadow:0 1px 2px rgba(35,38,45,.03), 0 24px 60px -36px rgba(94,81,57,.25); }
.side { border-radius:28px; }
/* the rail itself */
.nav-rail .app { --nav-width:72px; }
.nav-rail .app .side {
align-self:start; height:auto; overflow:visible;
padding:10px 0 12px; gap:10px; border-radius:36px;
background:#fff; border:1px solid #EEEAE1;
box-shadow:0 1px 2px rgba(35,38,45,.04), 0 16px 36px -20px rgba(94,81,57,.35);
}
.nav-rail .app .side-head { height:auto; padding:0; justify-content:center; }
.nav-rail .app .side-top { padding:0; gap:10px; align-items:center; }
.nav-rail .app .side-foot { margin:0; padding:10px 0 0; align-items:center; border-top:1px solid #F0ECE4;
margin-inline:12px; }
.nav-rail .app .side-foot-row { padding:0; }
/* every rail button: a 48px soft circle */
.nav-rail .app .navbtn,
.nav-rail .app .newchat,
.nav-rail .app .railfind,
.nav-rail .app .scopebtn {
position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; margin:0;
border:0; border-radius:50%; background:var(--rail-btn); background-image:none; color:var(--us-ink);
box-shadow:none; transform:none; font-size:22px;
transition:background-color .15s ease, transform .15s ease;
}
.nav-rail .app .newchat .ic { width:22px; height:22px; padding:0; background:none; color:var(--us-ink); border-radius:0; }
.nav-rail .app :is(.navbtn, .newchat, .railfind, .scopebtn):hover { background:var(--rail-btn-hover); }
.nav-rail .app :is(.navbtn, .newchat, .railfind, .scopebtn):active { transform:scale(.94); }
/* the menu button carries the brand: a filled circle at the top of the rail */
.nav-rail .app .navbtn { background:var(--us-cta); color:#fff; }
.nav-rail .app .navbtn:hover { background:var(--us-cta-hover); }
/* language: a 48px circle with the globe, the short letter as a badge */
.nav-rail .app .langbtn {
position:relative; width:48px; height:48px; padding:0; gap:0; justify-content:center;
border-radius:50%; border:2px solid var(--us-cta-light); background:#fff; box-shadow:none;
}
.nav-rail .app .langbtn .ic { padding:0; width:20px; height:20px; background:none; color:var(--us-cta-ink); }
.nav-rail .app .langbtn .lang-short {
position:absolute; inset-block-end:-4px; inset-inline-end:-4px; display:grid; place-items:center;
min-width:20px; height:20px; padding:0 4px; border-radius:999px; border:2px solid #fff;
background:var(--us-cta); color:#fff; font:700 .625rem/1 var(--font);
}
/* hover labels to the side of the rail (they read the buttons' own titles) */
.nav-rail .app :is(.navbtn, .newchat, .railfind)::after {
content:attr(title); position:absolute; inset-inline-start:calc(100% + 14px); top:50%;
transform:translate(-4px, -50%); opacity:0; pointer-events:none; white-space:nowrap; z-index:50;
padding:6px 10px; border-radius:8px; background:var(--us-ink); color:#fff;
font:600 .75rem/1rem var(--font); letter-spacing:0;
transition:opacity .15s ease, transform .15s ease;
}
[dir="rtl"] .nav-rail .app :is(.navbtn, .newchat, .railfind)::after { transform:translate(4px, -50%); }
.nav-rail .app :is(.navbtn, .newchat, .railfind):is(:hover, :focus-visible)::after { opacity:1; transform:translate(0, -50%); }
/* the rail lets the content start right beside it */
.nav-rail .app .main { grid-column:2; }
}
/* softer, rounder content surfaces to match */
.main:has(.hello) .cards button { border-radius:24px; padding:18px 20px; }
.main:has(.hello) .cards .tile { border-radius:50%; width:44px; height:44px; }
.cards .go-in { border-radius:50%; box-sizing:border-box; padding:9px; overflow:visible; }
.nav-rail .app .langbtn .lang-short { font-size:.75rem; min-width:22px; height:22px; }
.field { border-radius:28px; }
.field .attach-btn { border-radius:50%; }
.go { border-radius:999px; }
.speed-trigger { border-radius:999px; }
.review, .contact-card { border-radius:24px; }
.turn.you .bubble { border-radius:22px; border-end-end-radius:6px; }
/* ======================================================================
Skin v3: U-ASK structure in the Usrati brand (style only; markup, ids, scripts unchanged)
Airy full-bleed page on a soft green/cream wash, a floating icon rail
centred at the start edge, a white top bar with an EN/عربي switch,
a single-line pill question box with a gradient edge, green accents.
====================================================================== */
:root {
/* the Usrati faces (section 1): body Public Sans / Noto Sans Arabic, headings Plus Jakarta Sans / Tajawal */
--font:'Public Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
--font-heading:'Plus Jakarta Sans', 'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
--ux-green:#7F6E50; --ux-green-deep:#6B5D42; --ux-green-dark:#5E5139; --ux-green-light:#A39271; --ux-slate:#5A6175;
--ux-tint:#F1EADB; --ux-tint-2:#FBF8F2; --ux-line:#E7E1D4; --ux-edge:#E5DDCA;
--ux-ink:#212529; --ux-muted:#5F5A50; --ux-icon:#5A6175; --ux-page:#FAF8F4;
/* the Usrati brand roles, pointed at the U-ASK greens so every themed rule follows */
--us-cta:var(--ux-green); --us-cta-hover:var(--ux-green-deep); --us-cta-light:var(--ux-green-light);
--us-cta-tint:var(--ux-tint); --us-cta-ink:var(--ux-green-deep);
--us-slate:var(--ux-slate); --us-slate-deep:#454B5C;
--us-taupe:#C8C0AE; --us-sand:#E5DDCA; --us-sand-soft:var(--ux-tint-2); --us-brown:#8C7B5B;
--us-ink:var(--ux-ink); --us-muted:var(--ux-muted); --us-line:var(--ux-line);
--us-canvas:var(--ux-page);
--md-primary:var(--ux-green-deep); --md-secondary:var(--ux-green);
--md-secondary-container:var(--ux-tint); --md-on-secondary-container:var(--ux-green-deep);
--md-surface:var(--ux-page); --md-on-surface:var(--ux-ink); --md-on-surface-variant:var(--ux-muted);
--ua-tint:var(--ux-tint); --ua-tint-line:var(--ux-edge); --ua-line:var(--ux-line);
--bx-line:var(--ux-line); --bx-line-hover:#C8C0AE; --bx-hover:var(--ux-tint-2);
--bx-focus:0 0 0 2px #fff, 0 0 0 4px var(--ux-green);
--rail-btn:transparent; --rail-btn-hover:var(--ux-tint);
}
body { color:var(--ux-ink); }
/* ---------- the page: full bleed on a soft wash ---------- */
body, .app {
background-color:var(--ux-page);
background-image:
radial-gradient(60% 55% at 12% 88%, rgba(200,192,174,.32), transparent 70%),
radial-gradient(50% 45% at 88% 12%, rgba(229,221,202,.30), transparent 72%),
radial-gradient(45% 40% at 55% 55%, rgba(154,160,178,.16), transparent 70%);
background-attachment:fixed;
}
@media (min-width: 821px) {
.app { padding:0; column-gap:0; }
.main, .main:has(.hello) { border:0; border-radius:0; box-shadow:none; background:transparent; }
:root:not(.nav-rail) .side {
border-radius:0; border:0; border-inline-end:1px solid var(--ux-line); background:#fff; box-shadow:none;
}
}
/* ---------- top bar: white strip, logo at the start, language switch at the end ---------- */
.topbar { height:56px; padding-block:10px 6px; padding-inline:22px 32px; background:#fff; } /* logical, so Arabic mirrors it */
.topbar .brand { height:36px; }
.top-acts { gap:12px; }
/* EN | عربي segmented switch, drawn on the existing language button */
.topbar .langbtn {
display:inline-flex; align-items:center; gap:2px; height:34px; padding:3px; margin-inline-start:12px;
border:1px solid var(--ux-line); border-radius:999px; background:rgba(255,255,255,.8);
box-shadow:0 8px 20px -16px rgba(107,93,66,.4); color:var(--ux-muted);
}
.topbar .langbtn .ic, .topbar .langbtn .lang-short { display:none; }
.topbar .langbtn::before {
content:"EN"; display:grid; place-items:center; height:26px; padding:0 10px; border-radius:999px;
background:var(--ux-green); color:#fff; font:700 11.5px/1 var(--font);
}
html[lang="ar"] .topbar .langbtn::before { content:"عربي"; font-size:12px; }
.topbar .langbtn::after {
content:attr(title); display:grid; place-items:center; height:26px; padding:0 10px;
font:700 12px/1 var(--font); color:var(--ux-muted);
}
.topbar .langbtn:hover { background:#fff; border-color:#C8C0AE; }
.topbar .langbtn:hover::after { color:var(--ux-green-deep); }
.side .langbtn { display:none; } /* the switch lives in the top bar on every screen */
@media (min-width: 821px) { .topbar .langbtn { display:inline-flex; } }
/* the rail's own language rules must not reach the top bar's switch */
:root .app .topbar .langbtn {
position:static; width:auto; height:34px; padding:3px; gap:2px; justify-content:flex-start;
border:1px solid var(--ux-line); border-radius:999px; background:rgba(255,255,255,.8);
}
:root .app .topbar .langbtn .ic, :root .app .topbar .langbtn .lang-short { display:none; }
:root .app .topbar .langbtn::after { content:attr(title); }
/* ---------- the rail: floating, vertically centred at the start edge ---------- */
@media (min-width: 821px) {
.nav-rail .app { --nav-width:0px; }
.nav-rail .app .side {
position:fixed; z-index:30; inset-inline-start:14px; top:50%; transform:translateY(-50%);
width:58px; height:auto; padding:12px 0; gap:6px; align-items:center; overflow:visible;
background:#fff; border:1px solid var(--ux-line); border-radius:22px;
box-shadow:0 18px 40px -24px rgba(107,93,66,.4);
}
.nav-rail .app .side-top { order:1; gap:6px; }
.nav-rail .app .side-head { order:2; }
.nav-rail .app .side-foot { order:3; margin:0; padding:0; border:0; }
.nav-rail .app .side-foot:not(:has(.scopebtn:not([hidden]):not([style*="none"]))) { display:none; }
.nav-rail .app :is(.navbtn, .newchat, .railfind, .scopebtn) {
width:40px; height:40px; border-radius:12px; background:transparent; color:var(--ux-icon); font-size:19px;
}
.nav-rail .app .newchat .ic { width:19px; height:19px; color:inherit; }
.nav-rail .app :is(.navbtn, .newchat, .railfind, .scopebtn):hover { background:var(--ux-tint); color:var(--ux-green); }
.nav-rail .app .navbtn:hover { background:var(--ux-tint); }
.nav-rail .app :is(.navbtn, .newchat, .railfind)::after { background:var(--ux-ink); }
}
/* ---------- landing ---------- */
.main:has(.hello) .hello h2::before { content:none; display:none; }
.main:has(.hello) .hello h2 {
font:700 clamp(1.75rem, 2.5vw, 2.125rem)/1.24 var(--font-heading); letter-spacing:-.02em; color:var(--ux-ink);
margin-top:auto;
}
.hello h2 .accent {
background:linear-gradient(100deg, var(--ux-green-dark), var(--ux-green), var(--ux-green-light), var(--ux-green), var(--ux-green-dark));
background-size:320% 100%;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.main:has(.hello) .hello p {
width:min(480px, calc(100% - 48px)); margin-top:10px;
font:400 15px/23px var(--font); color:var(--ux-muted);
}
/* greeting, question box, then the starter questions, all centred together */
.main:has(.hello) .composer { order:4; padding-top:28px; padding-bottom:0; }
.main:has(.hello) .composer-in { max-width:720px; }
.main:has(.hello) .composer-in::before {
inset:-20px -60px -20px;
background:radial-gradient(50% 60% at 50% 60%, rgba(200,192,174,.45), transparent 70%);
filter:blur(30px);
}
.main:has(.hello) .smallprint { display:none; }
.main:has(.hello) .cards {
order:5; width:min(720px, calc(100% - 48px)); margin-top:22px; margin-bottom:auto; gap:10px;
}
.main:has(.hello) .voice-stage { order:7; }
.main:has(.hello)::after { content:""; order:8; flex:0 0 40px; }
/* starter questions: quiet white cards in the green family */
.main:has(.hello) .cards button {
padding:12px 14px; gap:12px; border-radius:18px; border:1px solid var(--ux-line); background:rgba(255,255,255,.85);
box-shadow:0 1px 2px rgba(33,37,41,.04);
}
.main:has(.hello) .cards button:hover {
transform:translateY(-1px); border-color:#C8C0AE; background:#fff;
box-shadow:0 1px 2px rgba(33,37,41,.05), 0 14px 30px -18px rgba(107,93,66,.45);
}
.main:has(.hello) .cards .tile {
width:36px; height:36px; font-size:17px; background:var(--ux-tint); color:var(--ux-green-dark); box-shadow:none;
}
.cards .q { font:600 14px/1.35 var(--font); color:var(--ux-ink); }
.cards .meta { color:var(--ux-green-deep); }
.cards .go-in { width:28px; height:28px; padding:7px; background:var(--ux-tint); color:var(--ux-green); }
.cards button:hover .go-in { background:var(--ux-green); color:#fff; }
/* ---------- the question box: one pill row with a gradient edge ---------- */
.field {
flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px;
padding:6px 8px; padding-inline-start:8px; min-height:60px; border-radius:28px;
border:2px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(120deg, #E5DDCA, #D9DDE6, #C8C0AE, #E5DDCA) border-box;
box-shadow:0 1px 2px rgba(33,37,41,.06), 0 6px 16px -6px rgba(33,37,41,.10),
0 24px 48px -20px rgba(107,93,66,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.field:focus-within {
border-color:transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(120deg, #A39271, #8F96A8, #C8C0AE, #A39271) border-box;
box-shadow:0 0 0 4px rgba(200,192,174,.45), 0 24px 48px -20px rgba(107,93,66,.32);
}
.field::before { content:none; display:none; }
.field textarea, .main:has(.hello) .field textarea {
order:1; flex:1 1 220px; min-width:0; min-height:24px; padding:8px 4px;
font:400 15.5px/24px var(--font); color:var(--ux-ink);
}
.field textarea::placeholder { color:#7A7264; }
.field-row { display:contents; margin:0; }
.ctrls { order:2; flex:0 1 auto; gap:6px; }
.field .attach-btn { order:0; }
.field-row > .go { order:3; }
/* + / attach: a bare round button at the start */
.field .attach-btn {
width:40px; height:40px; border:0; border-radius:50%; background:transparent; box-shadow:none;
color:var(--ux-ink); font-size:20px;
}
.field .attach-btn:hover:not(:disabled) { background:var(--ux-tint); color:var(--ux-green); border:0; }
/* Quick response: a tinted green chip */
.speed-trigger {
height:36px; padding-block:0; padding-inline:12px 14px; gap:6px; border:0; border-radius:999px; box-shadow:none;
background:var(--ux-tint); color:var(--ux-green-dark); font:600 13px/1 var(--font);
}
.speed-trigger .speed-ic { font-size:15px; color:var(--ux-green); }
.speed-trigger .speed-chev { font-size:12px; color:var(--ux-green); opacity:.6; }
.speed-trigger:hover { background:#EBE2CF; color:var(--ux-green-deep); border:0; box-shadow:none; }
.speed-dd.open .speed-trigger { background:#EBE2CF; box-shadow:0 0 0 3px rgba(200,192,174,.5); }
/* talk / send: a tinted capsule; filled green once there is something to send */
.go {
width:40px; height:36px; padding:3px; border-radius:999px; font-size:18px;
background:var(--ux-tint); color:var(--ux-green-dark); box-shadow:none;
}
.go:not(:disabled):hover { background:#EBE2CF; color:var(--ux-green-deep); box-shadow:none; }
.go:has(use[href*="arrow"]) { background:var(--ux-green); color:#fff; box-shadow:0 8px 18px -10px rgba(107,93,66,.8); }
.go:not(:disabled):has(use[href*="arrow"]):hover { background:var(--ux-green-deep); color:#fff; }
.go:disabled { background:#F3F0EA; color:#A39C8E; }
.go.voice-live { background:var(--md-error); color:#fff; }
.go::before, .go::after { border-color:var(--ux-green-light); }
/* developer pills and menus in the same family */
.pill { height:36px; border-radius:999px; border-color:var(--ux-line); color:var(--ux-ink); font:500 13px/1 var(--font); }
.pill > .ic { color:var(--ux-green); }
.pill:hover { background:var(--ux-tint-2); border-color:#C8C0AE; }
.pop, .speed-dd .think-toggle { border-color:var(--ux-line); border-radius:16px;
box-shadow:0 2px 4px rgba(33,37,41,.04), 0 18px 40px -16px rgba(107,93,66,.35); }
.pop-item:hover, .speed-dd .think-toggle button:hover, .speed-dd .think-toggle button:focus-visible { background:var(--ux-tint-2); }
.pop-head { color:var(--ux-green-deep); }
/* ---------- conversation ---------- */
.turn.you .bubble { background:var(--ux-tint); border-color:var(--ux-edge); color:var(--ux-ink); }
.sources .src .n, .cite:hover { background:var(--ux-green); color:#fff; }
.cite { background:var(--ux-tint); color:var(--ux-green-deep); }
.acts button:hover { background:var(--ux-tint); color:var(--ux-green-deep); }
.composer { background:linear-gradient(180deg, rgba(250,252,251,0) 0%, var(--ux-page) 40%); }
.composer-in { max-width:760px; }
.smallprint { color:var(--ux-muted); }
/* new chat in the open list keeps the green tile */
.newchat .ic { background:var(--ux-green); }
:root:not(.nav-rail) .chat.on { background:var(--ux-tint); }
@media (max-width: 820px) {
.topbar { padding:8px 12px; }
.field { border-radius:24px; }
.main:has(.hello) .composer { padding-inline:16px; }
}
/* Usrati wash: the brand's slate-to-sand canvas */
body, .app {
background-color:var(--ux-page);
background-image:
radial-gradient(60% 55% at 12% 88%, rgba(154,160,178,.18), transparent 70%),
radial-gradient(50% 45% at 88% 12%, rgba(229,221,202,.55), transparent 72%),
linear-gradient(135deg, #EEF2F7 0%, #F8F5EF 100%);
}
.hello h2 .accent {
background:linear-gradient(100deg, #5E5139, #8C7B5B, #A39271, #8C7B5B, #5E5139);
background-size:320% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.main:has(.hello) .cards .tile { background:linear-gradient(145deg, #F7F2E8, #E9E0CC); color:#5E5139; }
.cards .go-in { color:#5E5139; }
.speed-trigger .speed-ic, .speed-trigger .speed-chev { color:#5E5139; }
/* ---------- lighter, luminous canvas ---------- */
:root { --ux-page:#FDFCFA; }
body, .app {
background-color:#FDFCFA;
background-image:
radial-gradient(38% 34% at 50% 38%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
radial-gradient(42% 40% at 86% 8%, rgba(240,230,206,.55), transparent 70%),
radial-gradient(40% 42% at 8% 92%, rgba(214,220,234,.45), transparent 70%),
radial-gradient(30% 30% at 18% 18%, rgba(247,241,228,.7), transparent 70%),
linear-gradient(160deg, #F8F9FC 0%, #FFFFFF 45%, #FBF8F1 100%);
background-attachment:fixed;
}
/* a slow sheen drifting across the page */
.app { position:relative; isolation:isolate; }
.app::before {
content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
background-size:250% 250%; animation:ux-sheen 14s ease-in-out infinite;
}
@keyframes ux-sheen { 0%,100% { background-position:100% 0; } 50% { background-position:0 100%; } }
/* ---------- header blended into the page ---------- */
.topbar, [dir="rtl"] .topbar { background:transparent; border:0; box-shadow:none; }
/* the logo's white tile melts into the background */
.topbar .brand, .topbar .uaepass-btn img { mix-blend-mode:multiply; }
:root .app .topbar .langbtn {
background:rgba(255,255,255,.55); border-color:rgba(231,225,212,.7);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -16px rgba(107,93,66,.4);
}
:root .app .topbar .langbtn::before {
background:linear-gradient(180deg, #A39271, #7F6E50);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
/* glassier surfaces so the light shows through */
.field {
background:
linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)) padding-box,
linear-gradient(120deg, #EFE6D2, #E3E7F0, #D9CFB8, #EFE6D2) border-box;
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.main:has(.hello) .cards button {
background:rgba(255,255,255,.7); border-color:rgba(231,225,212,.75);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(33,37,41,.03);
}
.main:has(.hello) .cards button:hover { background:rgba(255,255,255,.95); }
.nav-rail .app .side { background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
:root:not(.nav-rail) .app .side { background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.composer { background:linear-gradient(180deg, rgba(253,252,250,0) 0%, rgba(253,252,250,.85) 40%); }
.main:has(.hello) .composer { background:none; }
.go:has(use[href*="arrow"]), .newchat .ic { background:linear-gradient(180deg, #A39271, #7F6E50); }
.hello h2 .accent { animation:ig-hue 6s ease-in-out infinite; }
/* ---------- chat list rows ---------- */
.chats { gap:2px; }
.chat-group { gap:2px; }
.chat-group > .lbl {
padding:14px 12px 6px; font:600 .6875rem/1rem var(--font); letter-spacing:.08em; text-transform:uppercase; color:#8C7B5B;
}
html[lang="ar"] .chat-group > .lbl { letter-spacing:0; text-transform:none; font-size:.75rem; }
.chat, :root:not(.nav-rail) .chat {
position:relative; height:44px; gap:6px; padding-inline:14px 6px; border-radius:14px;
border:1px solid transparent; background:transparent; color:#4A4F5C;
transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.chat .open { font:500 .875rem/1.25rem var(--font); }
@media (hover: hover) {
.chat:hover { background:rgba(255,255,255,.7); background-image:none; border-color:rgba(231,225,212,.7); color:var(--ux-ink); }
}
/* the chat on screen: a raised glass row with a gold dot */
.chat.on, :root:not(.nav-rail) .chat.on {
padding-inline-start:34px;
background:linear-gradient(180deg, #FFFFFF, #FBF8F2);
border-color:#EDE5D4; color:var(--ux-ink);
box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(107,93,66,.06), 0 8px 18px -12px rgba(107,93,66,.35);
}
.chat.on::before {
content:""; position:absolute; inset-inline-start:15px; top:50%; width:7px; height:7px; margin-top:-3.5px;
border-radius:50%; background:linear-gradient(180deg, #B8A887, #7F6E50);
box-shadow:0 0 0 3px rgba(200,192,174,.35);
}
.chat.on .open { font-weight:600; color:var(--ux-ink); }
/* the ×: a small round button that warms on hover */
.chat .x {
width:28px; height:28px; border-radius:50%; font-size:14px; color:#8A8478;
transition:background-color .15s ease, color .15s ease;
}
.chat .x:hover, .chat .x:focus-visible { background:#F4EEE2; background-image:none; color:#5E5139; }
@media (hover: hover) { .chat .x:hover { color:#B3261E; background:#FBEDEB; } }
.chat:has(.open:focus-visible) { outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ux-green); }
.chat .answering { background:#7F6E50; }
/* ---------- question box: a living, shining frame ----------
* A gold light travels round the edge (a conic gradient whose angle turns), a soft sheen sweeps
* across the glass every few seconds, and the glow breathes. All decoration: it stops under
* prefers-reduced-motion (tokens.css). */
@property --ux-ang { syntax:''; inherits:false; initial-value:0deg; }
.field {
--ux-ang:0deg;
border:2px solid transparent;
background:
linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box,
conic-gradient(from var(--ux-ang),
#EFE6D2 0deg, #E3E7F0 60deg, #D9CFB8 110deg,
#B8A26F 150deg, #FFF6DC 175deg, #B8A26F 200deg,
#D9CFB8 240deg, #E3E7F0 300deg, #EFE6D2 360deg) border-box;
animation:ux-frame-turn 6s linear infinite, ux-frame-glow 4s ease-in-out infinite;
}
.field:focus-within {
border-color:transparent;
background:
linear-gradient(#fff, #fff) padding-box,
conic-gradient(from var(--ux-ang),
#D9CFB8 0deg, #A39271 70deg, #FFF3CF 150deg, #8C7B5B 180deg,
#FFF3CF 210deg, #A39271 290deg, #D9CFB8 360deg) border-box;
animation:ux-frame-turn 3s linear infinite, ux-frame-glow 2.4s ease-in-out infinite;
}
@keyframes ux-frame-turn { to { --ux-ang:360deg; } }
@keyframes ux-frame-glow {
0%,100% { box-shadow:0 1px 2px rgba(33,37,41,.05), 0 18px 40px -22px rgba(107,93,66,.30), 0 0 0 0 rgba(200,192,174,0); }
50% { box-shadow:0 1px 2px rgba(33,37,41,.05), 0 22px 48px -20px rgba(107,93,66,.38), 0 0 0 5px rgba(229,221,202,.45); }
}
/* the sheen: a diagonal band of light gliding across the glass */
.field::before {
content:""; display:block; position:absolute; inset:0; top:auto; height:100%;
width:auto; border-radius:inherit; pointer-events:none; z-index:0;
-webkit-mask:none; mask:none;
background:linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,250,236,.85) 50%, transparent 60%, transparent 100%);
background-size:250% 100%; background-repeat:no-repeat;
animation:ux-frame-sheen 5.5s ease-in-out infinite;
}
@keyframes ux-frame-sheen {
0% { background-position:130% 0; opacity:0; }
15% { opacity:1; }
55% { background-position:-30% 0; opacity:1; }
60%,100% { background-position:-30% 0; opacity:0; }
}
.field > *, .field-row > * { position:relative; z-index:1; }
.field > .pop { position:absolute; z-index:40; }
.field-row > .sr-only { position:absolute; }
/* ---------- starter questions: three tall cards in one row ----------
* Only the first three starters show; each card stacks icon + arrow on top, then the category and the
* question. Same buttons, same clicks: layout only. */
.main:has(.hello) .cards { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.main:has(.hello) .cards button:nth-child(n+4) { display:none; }
.main:has(.hello) .cards button {
display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"tile . go" "txt txt txt";
align-items:start; row-gap:18px; column-gap:0; min-height:168px; padding:18px 18px 20px; border-radius:22px;
text-align:start;
}
.main:has(.hello) .cards .tile { grid-area:tile; width:46px; height:46px; border-radius:14px; font-size:20px; }
.main:has(.hello) .cards .go-in { grid-area:go; width:34px; height:34px; padding:9px; }
.main:has(.hello) .cards .txt { grid-area:txt; align-self:end; gap:6px; }
.main:has(.hello) .cards .q { font:600 15px/1.4 var(--font); }
.main:has(.hello) .cards .meta { display:block; }
/* a soft corner glow that warms on hover */
.main:has(.hello) .cards button {
background:
radial-gradient(120% 90% at 100% 0%, rgba(240,230,206,.55), transparent 55%),
rgba(255,255,255,.75);
}
.main:has(.hello) .cards button:hover {
background:
radial-gradient(120% 90% at 100% 0%, rgba(229,214,180,.7), transparent 60%),
#fff;
transform:translateY(-3px);
}
[dir="rtl"] .main:has(.hello) .cards button {
background:radial-gradient(120% 90% at 0% 0%, rgba(240,230,206,.55), transparent 55%), rgba(255,255,255,.75);
}
/* short windows: the cards lose height before they lose content */
@media (max-height: 820px) { .main:has(.hello) .cards button { min-height:140px; row-gap:12px; padding:14px 16px 16px; } }
/* narrow screens: back to compact rows, still three */
@media (max-width: 820px) {
.main:has(.hello) .cards { grid-template-columns:minmax(0, 1fr); gap:10px; }
.main:has(.hello) .cards button {
grid-template-columns:auto 1fr auto; grid-template-areas:"tile txt go"; align-items:center;
column-gap:12px; row-gap:0; min-height:0; padding:12px 14px; border-radius:18px;
}
.main:has(.hello) .cards .txt { align-self:center; }
.main:has(.hello) .cards .tile { width:40px; height:40px; }
}
/* ---------- starter cards, refined ----------
* Lined-up text (category chips start on the same line in every card), a fine gold edge,
* a light sweep and an "Ask now" cue on hover, the icon tile turning gold. */
@media (min-width: 821px) {
.main:has(.hello) .cards button {
position:relative; overflow:hidden; isolation:isolate;
grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto;
grid-template-areas:"tile . go" "txt txt txt" "foot foot foot";
row-gap:16px; min-height:188px; padding:20px 20px 18px; border-radius:24px;
border:1.5px solid transparent;
background:
radial-gradient(120% 90% at 100% 0%, rgba(240,230,206,.6), transparent 55%) padding-box,
linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) padding-box,
linear-gradient(150deg, #EFE6D2, rgba(231,225,212,.5) 40%, rgba(231,225,212,.5) 60%, #E3D7BC) border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(33,37,41,.03), 0 14px 30px -24px rgba(107,93,66,.4);
transition:transform .35s var(--ux-morph, ease), box-shadow .35s ease, background .35s ease;
}
[dir="rtl"] .main:has(.hello) .cards button {
background:
radial-gradient(120% 90% at 0% 0%, rgba(240,230,206,.6), transparent 55%) padding-box,
linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) padding-box,
linear-gradient(210deg, #EFE6D2, rgba(231,225,212,.5) 40%, rgba(231,225,212,.5) 60%, #E3D7BC) border-box;
}
.main:has(.hello) .cards button:hover {
transform:translateY(-4px);
background:
radial-gradient(130% 100% at 100% 0%, rgba(229,214,180,.75), transparent 60%) padding-box,
linear-gradient(#fff, #fff) padding-box,
linear-gradient(150deg, #C9B68C, #EFE6D2 45%, #EFE6D2 60%, #B8A26F) border-box;
box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(33,37,41,.04), 0 26px 44px -26px rgba(107,93,66,.55);
}
[dir="rtl"] .main:has(.hello) .cards button:hover {
background:
radial-gradient(130% 100% at 0% 0%, rgba(229,214,180,.75), transparent 60%) padding-box,
linear-gradient(#fff, #fff) padding-box,
linear-gradient(210deg, #C9B68C, #EFE6D2 45%, #EFE6D2 60%, #B8A26F) border-box;
}
/* text starts at the same height in every card */
.main:has(.hello) .cards .txt { align-self:start; gap:10px; }
.main:has(.hello) .cards .meta {
align-self:flex-start; width:fit-content; padding:4px 10px; border-radius:999px;
background:rgba(241,234,219,.75); border:1px solid rgba(229,221,202,.9);
font:600 .6563rem/1rem var(--font); letter-spacing:.08em; color:#5E5139;
}
.main:has(.hello) .cards .q { font:600 1rem/1.45 var(--font-heading); letter-spacing:-.01em; color:var(--ux-ink); }
/* icon tile: sand at rest, gold when the card is pointed at */
.main:has(.hello) .cards .tile {
width:48px; height:48px; border-radius:15px; font-size:21px;
background:linear-gradient(145deg, #FAF5EA, #EADFC8); color:#5E5139;
box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(107,93,66,.45);
transition:background .3s ease, color .3s ease, transform .35s var(--ux-morph, ease);
}
.main:has(.hello) .cards button:hover .tile {
background:linear-gradient(145deg, #B8A887, #7F6E50); color:#fff; transform:rotate(-6deg) scale(1.05);
}
/* arrow chip turns to point onward */
.main:has(.hello) .cards .go-in { width:36px; height:36px; padding:10px; transition:background-color .3s ease, color .3s ease, transform .35s var(--ux-morph, ease); }
.main:has(.hello) .cards button:hover .go-in { background:linear-gradient(180deg, #A39271, #7F6E50); color:#fff; transform:rotate(45deg); }
[dir="rtl"] .main:has(.hello) .cards button:hover .go-in { transform:rotate(-45deg); }
.main:has(.hello) .cards button:hover .go-in .ic { transform:none; }
/* "Ask now" cue at the foot, rising in on hover */
.main:has(.hello) .cards button::after {
content:"Ask now"; grid-area:foot; justify-self:start;
font:600 .75rem/1rem var(--font); color:#7F6E50; letter-spacing:.02em;
padding-top:12px; width:100%; border-top:1px dashed rgba(200,192,174,.7);
opacity:.8; transform:translateY(2px); transition:opacity .3s ease, transform .3s ease, color .3s ease;
}
html[lang="ar"] .main:has(.hello) .cards button::after { content:"اسأل الآن"; letter-spacing:0; }
.main:has(.hello) .cards button:hover::after { opacity:1; transform:none; color:#5E5139; }
/* a band of light sweeping across on hover */
.main:has(.hello) .cards button::before {
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
background:linear-gradient(110deg, transparent 35%, rgba(255,248,230,.9) 50%, transparent 65%);
background-size:250% 100%; background-position:130% 0; opacity:0;
}
.main:has(.hello) .cards button:hover::before { animation:ux-card-sweep .9s ease-out both; }
}
/* cleanup: no footer cue, no corner tint, plain sentence-case category, everything on one grid */
@media (min-width: 821px) {
.main:has(.hello) .cards button::after { content:none; display:none; }
.main:has(.hello) .cards button,
[dir="rtl"] .main:has(.hello) .cards button {
grid-template-rows:auto 1fr; grid-template-areas:"tile . go" "txt txt txt";
align-items:center; row-gap:18px; min-height:0; padding:20px;
background:
linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)) padding-box,
linear-gradient(150deg, #EFE6D2, rgba(231,225,212,.55) 45%, rgba(231,225,212,.55) 60%, #E3D7BC) border-box;
}
.main:has(.hello) .cards button:hover,
[dir="rtl"] .main:has(.hello) .cards button:hover {
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(150deg, #C9B68C, #EFE6D2 45%, #EFE6D2 60%, #B8A26F) border-box;
}
.main:has(.hello) .cards .tile, .main:has(.hello) .cards .go-in { align-self:center; }
.main:has(.hello) .cards .txt { align-self:start; gap:6px; }
.main:has(.hello) .cards .meta {
padding:0; border:0; background:none; border-radius:0;
font:500 .8125rem/1.25rem var(--font); letter-spacing:0; text-transform:none; color:#7F6E50;
}
}
@media (min-width: 821px) and (max-height: 820px) {
.main:has(.hello) .cards button { padding:16px; row-gap:12px; }
}
.cards .meta { text-transform:none; letter-spacing:0; }
@keyframes ux-card-sweep { 0% { background-position:130% 0; opacity:1; } 100% { background-position:-30% 0; opacity:0; } }
@media (min-width: 821px) and (max-height: 820px) {
.main:has(.hello) .cards button { min-height:150px; row-gap:10px; padding:14px 16px 12px; }
.main:has(.hello) .cards button::after { padding-top:8px; }
}
/* ---------- the menu morphs: floating rail <-> floating chat panel ----------
* Both states are one fixed, floating surface; only its size, place and corners change, so the
* browser can tween between them. The page beside it slides over in step, and what is inside
* fades in once the surface has room for it. nav.js still just toggles .nav-rail on . */
@media (min-width: 821px) {
:root { --ux-morph:cubic-bezier(.22, 1, .36, 1); --ux-morph-t:.55s; --ux-rail-h:158px; }
.app { transition:grid-template-columns var(--ux-morph-t) var(--ux-morph); }
.app.nav-animate { transition:grid-template-columns var(--ux-morph-t) var(--ux-morph); }
:root:not(.nav-rail) .app { --nav-width:320px; }
.app > .main { grid-column:2; }
.app .side {
position:fixed; z-index:30; inset-inline-start:16px;
transition:
top var(--ux-morph-t) var(--ux-morph), transform var(--ux-morph-t) var(--ux-morph),
width var(--ux-morph-t) var(--ux-morph), height var(--ux-morph-t) var(--ux-morph),
border-radius var(--ux-morph-t) var(--ux-morph), padding var(--ux-morph-t) var(--ux-morph),
box-shadow var(--ux-morph-t) var(--ux-morph), background-color .3s ease;
will-change:width, height, top;
}
/* open: a tall glass panel */
:root:not(.nav-rail) .app .side {
top:16px; transform:translateY(0); width:288px; height:calc(100vh - 32px); padding:0;
overflow:hidden; border-radius:28px; border:1px solid var(--ux-line);
background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 1px 2px rgba(33,37,41,.04), 0 30px 60px -30px rgba(107,93,66,.35);
}
/* folded: the slim pill, centred on the edge */
.nav-rail .app .side {
top:50%; transform:translateY(-50%); width:58px; height:var(--ux-rail-h); padding:12px 0;
border-radius:22px;
}
[dir="rtl"] .app .side { inset-inline-start:16px; }
/* contents fade and drift in after the surface has started to open or fold */
:root:not(.nav-rail) .app .side > * { animation:ux-side-in .38s .16s var(--ux-morph) both; }
.nav-rail .app .side > * { animation:ux-rail-in .32s .14s var(--ux-morph) both; }
:root:not(.nav-rail) .app .chats .chat { animation:ux-side-in .36s var(--ux-morph) both; }
:root:not(.nav-rail) .app .chats .chat:nth-child(2) { animation-delay:.22s; }
:root:not(.nav-rail) .app .chats .chat:nth-child(3) { animation-delay:.26s; }
:root:not(.nav-rail) .app .chats .chat:nth-child(n+4) { animation-delay:.3s; }
/* the menu button turns as the panel opens */
.app .navbtn .ic { transition:transform var(--ux-morph-t) var(--ux-morph); }
:root:not(.nav-rail) .app .navbtn .ic { transform:rotate(90deg); }
}
@keyframes ux-side-in { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes ux-rail-in { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
[dir="rtl"] { --ux-dir:-1; }
@media (min-width: 821px) {
[dir="rtl"]:not(.nav-rail) .app .side > * { animation-name:ux-side-in-rtl; }
}
@keyframes ux-side-in-rtl { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
/* ---------- top bar order: language switch first, then sign-in ---------- */
.topbar > .brand-pic, .topbar > .menubtn { order:0; }
.topbar > .langbtn { order:1; margin-inline-start:auto !important; }
.topbar > .top-acts { order:2; margin-inline-start:12px; }
/* trim the white margin baked into the UAE PASS image so only its black button shows */
.topbar .uaepass-btn .uaepass-full { clip-path:inset(3px 3px 3px 3px round 7px); }
/* the talk button breathes with the frame */
.go:not(:disabled):not(.voice-live):has(use[href*="broadcast"]) { animation:ux-go-pulse 2.8s ease-in-out infinite; }
@keyframes ux-go-pulse {
0%,100% { box-shadow:0 0 0 0 rgba(163,146,113,0); }
50% { box-shadow:0 0 0 6px rgba(229,221,202,.6); }
}
@supports not (background:conic-gradient(from 0deg, red, blue)) {
.field { background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#EFE6D2,#B8A26F,#EFE6D2) border-box; }
}
/* ---------- type as the reference renders it ----------
* The category line on the starter cards shows at regular weight. */
@media (min-width: 821px) {
.main:has(.hello) .cards .meta { font-weight:400; }
}
/* ======================================================================
9. Chat history header, the sidebar button, and the "Talk to me instead" tooltip
====================================================================== */
/* the open list: "Chat history" at the start, the sidebar button at the end */
.side-title { display:none; }
:root:not(.nav-rail) .side-head .side-title,
.drawer-open .side-head .side-title {
display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font:700 1.0625rem/1.4 var(--font-heading); letter-spacing:-.01em; color:var(--ux-ink);
}
.side-head { justify-content:space-between; padding-inline:20px 12px; }
.app .navbtn { color:var(--ux-icon); background:transparent; }
.app .navbtn:hover { background:var(--ux-tint); color:var(--ux-green-deep); }
.navbtn .nav-ic { width:22px; height:22px; }
/* the chevron points to close the open list, and away to open the rail; the old menu glyph's turn is gone */
.navbtn .nav-ic-open { display:none; }
.app .navbtn .ic, :root:not(.nav-rail) .app .navbtn .ic { transform:none; }
[dir="rtl"] .app .navbtn .ic.nav-ic,
[dir="rtl"]:not(.nav-rail) .app .navbtn .ic.nav-ic { transform:scaleX(-1); } /* the list sits on the right in Arabic */
@media (min-width: 821px) {
:root:not(.nav-rail) .app .side-head { height:68px; padding-inline:20px 12px; justify-content:space-between; }
.nav-rail .app .side-title { display:none; }
.nav-rail .app .navbtn .nav-ic-close { display:none; }
.nav-rail .app .navbtn .nav-ic-open { display:block; }
.nav-rail .app .navbtn .nav-ic { width:22px; height:22px; }
}
/* "Talk to me instead": a dark bubble over the voice button, its arrow on the button's centre (talk-tip.js) */
.talk-tip {
position:fixed; z-index:80; /* top and left come from talk-tip.js */
padding:8px 14px; border-radius:12px;
background:linear-gradient(180deg, #34353A, #1F2023); color:#fff;
font:700 .8125rem/1rem var(--font-heading); white-space:nowrap; letter-spacing:0;
box-shadow:0 1px 2px rgba(0,0,0,.2), 0 12px 24px -10px rgba(0,0,0,.45);
pointer-events:none; visibility:hidden; opacity:0; /* shown and hidden by talk-tip.js with Motion */
}
.talk-tip-arrow {
position:absolute; top:100%; width:12px; height:12px; margin-top:-7px; /* its left: talk-tip.js */
background:#1F2023; border-radius:2px; transform:translateX(-50%) rotate(45deg);
}
/* ======================================================================
10. Agent avatars: blue pictures shown gold, by CSS alone
img/avatars/agent-*.svg stay as they are (blue); this filter recolours them on screen. Tune the numbers to change
the gold: hue-rotate turns it (lower = redder, higher = greener), saturate is how strong, brightness how light.
====================================================================== */
.agent-avatar { /* the male face (Suhail) */
filter:grayscale(1) sepia(1) saturate(1) hue-rotate(-27deg) brightness(.92) contrast(.96);
}
.agent-avatar[data-gender="female"] { /* the female face (Mira) */
filter:grayscale(1) sepia(1) saturate(.8) hue-rotate(-17deg) brightness(.9) contrast(1.2);
}
.field:not(:has(.attach-btn:not([hidden]))) { padding-inline-start:1.5rem; }
/* ---------- the loader (index.html #bootLoader) ----------
Usrati's tree on the page's own canvas, over everything from the first paint until main.js fades it (hideLoader).
The pulse is CSS so it moves before any script has arrived; reduced motion (tokens.css) leaves it still. The give-up
keyframe hides it after 12 seconds whatever happens, so a script that fails to load cannot leave the page covered:
tokens.css shortens durations under reduced motion but not delays, so the give-up still waits its 12 seconds. */
.boot-loader {
position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:#FDFCFA;
animation:boot-loader-giveup .3s ease 12s forwards;
}
.boot-loader img { width:88px; height:88px; animation:boot-loader-pulse 1.6s ease-in-out infinite; }
@keyframes boot-loader-pulse { 0%,100% { opacity:.55; transform:scale(.94); } 50% { opacity:1; transform:scale(1); } }
@keyframes boot-loader-giveup { to { opacity:0; visibility:hidden; } }