/* ===== HALVION — theme + header tools (shared by every page) ===== */
:root{--err:#ff9aa6}
.err{color:var(--err)}

/* circular reveal used by the theme switch (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
/* fallback cross-fade for browsers without View Transitions */
html.tswap *,html.tswap *::before,html.tswap *::after{transition:background-color .45s,color .45s,border-color .45s,fill .45s,stroke .45s}

/* ---- header tools: language + theme ---- */
.tools{display:flex;align-items:center;gap:8px}
.tools .lg{margin-left:0}
#lgb{border:1px solid transparent;transition:border-color .3s}
#lgb:hover{border-color:var(--line)}
#lgm button:focus-visible{outline-offset:-2px}

.tt{position:relative;width:64px;height:48px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none}
.tt .trk{--c:7px;position:absolute;left:3px;right:3px;top:10px;bottom:10px;
clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
background:linear-gradient(115deg,var(--vio),rgba(243,223,162,.18) 45%,var(--ice));transition:filter .5s,transform .5s var(--e)}
.tt .trk::before{content:"";position:absolute;inset:1px;background:var(--surf);
clip-path:polygon(calc(var(--c) - .6px) 0,100% 0,100% calc(100% - var(--c) + .6px),calc(100% - var(--c) + .6px) 100%,0 100%,0 calc(var(--c) - .6px))}
.tt .trk::after{content:"";position:absolute;left:9px;right:36px;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--vio));opacity:0;transition:opacity .5s}
.tt .trk i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--ice);transition:opacity .5s;animation:tw 3.2s ease-in-out infinite}
.tt .trk i:nth-child(1){right:10px;top:6px}
.tt .trk i:nth-child(2){right:18px;top:16px;animation-delay:-1.1s}
.tt .trk i:nth-child(3){right:7px;top:17px;animation-delay:-2.2s}
@keyframes tw{0%,100%{opacity:.9}50%{opacity:.25}}
.tt:hover .trk{filter:drop-shadow(0 0 6px rgba(212,168,58,.55))}
.tt:active .trk{transform:scaleX(.96)}

.tt .orb{position:absolute;left:7px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 35% 28%,#3a3220,#0A0906 72%);
box-shadow:0 0 0 1px rgba(243,223,162,.7),0 0 12px rgba(212,168,58,.55);
transition:transform .7s var(--e),background .5s,box-shadow .5s}
.tt[data-t=light] .orb{transform:translateX(26px);
background:radial-gradient(circle at 35% 28%,#fff4c8,#D9A53A 78%);
box-shadow:0 0 0 1px rgba(122,77,8,.6),0 0 16px rgba(212,168,58,.85)}
.tt .orb svg{width:14px;height:14px;overflow:visible}
.tt .mn,.tt .sn{transform-box:fill-box;transform-origin:center;transition:transform .7s var(--e),opacity .4s}
.tt .mn{fill:#F3DFA2}
.tt .sn{fill:#3b2604;stroke:#3b2604;stroke-width:2;stroke-linecap:round;opacity:0;transform:rotate(-90deg) scale(.3)}
.tt[data-t=light] .sn{opacity:1;transform:none}
.tt[data-t=light] .mn{opacity:0;transform:rotate(90deg) scale(.3)}
.tt[data-t=light] .trk i{opacity:0;animation:none}
.tt[data-t=light] .trk::after{opacity:.9}

@media(max-width:900px){.tools{margin-left:auto;gap:0}}

/* ---- Amharic: taller line-height for the big display headings ---- */
html[lang=am] .xh h1,html[lang=am] .info h1{font-size:clamp(34px,6.2vw,96px);line-height:1.12;letter-spacing:0}
html[lang=am] .hero h1 span,html[lang=am] .xh h1 em{padding-bottom:.04em}
html[lang=am] .si .n,html[lang=am] .num{line-height:1}

/* =================== LIGHT THEME =================== */
html[data-theme=light]{
--bg:#F5F0E4;--surf:#ECE4D1;--vio:#A06A12;--ice:#7A4D08;--tx:#17130A;--mu:#6B6250;
--line:rgba(23,19,10,.16);--err:#C0283D;color-scheme:light}
html[data-theme=light] ::selection{background:var(--vio);color:#fff}
html[data-theme=light] body::after{opacity:.035;mix-blend-mode:multiply}
html[data-theme=light] header.s{background:rgba(245,240,228,.78)}
html[data-theme=light] .hero::before,html[data-theme=light] .xh::before{background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),rgba(23,19,10,.05) calc(100%/12 - 1px) calc(100%/12))}

/* buttons / gradient fills now carry light text */
html[data-theme=light] .btn.p{color:var(--bg)}
html[data-theme=light] .btn:hover,html[data-theme=light] .btn.p:hover,html[data-theme=light] .big:hover{color:#fff}
html[data-theme=light] #cm .u{color:#fff}
html[data-theme=light] #cf button{color:var(--bg)}
html[data-theme=light] #cf button:hover{color:#fff}
html[data-theme=light] [aria-invalid=true]{border-color:var(--err)}

/* outlined display numerals */
html[data-theme=light] .si .n,html[data-theme=light] .num{-webkit-text-stroke-color:rgba(23,19,10,.4)}

/* floating panels */
html[data-theme=light] #lgm{background:rgba(245,240,228,.97)}
html[data-theme=light] #co .tip{background:rgba(245,240,228,.95)}
html[data-theme=light] #cp{background:rgba(245,240,228,.96);box-shadow:0 40px 120px rgba(60,40,10,.28),0 0 80px rgba(212,168,58,.16)}
html[data-theme=light] #cm .b{background:rgba(23,19,10,.05)}
html[data-theme=light] .pn{background:rgba(255,255,255,.55)}
html[data-theme=light] .grp{background:rgba(23,19,10,.03)}
html[data-theme=light] .grp:hover{background:rgba(23,19,10,.06)}
html[data-theme=light] .tt .trk{background:linear-gradient(115deg,var(--vio),rgba(160,106,18,.25) 45%,var(--ice))}

/* hero artwork: the dark fade block would smear on a light page */
html[data-theme=light] .art rect[fill="url(#fd)"]{display:none}
html[data-theme=light] .ring ellipse{stroke:#A06A12}

/* photo + illustration panels stay dark on purpose */
html[data-theme=light] .pf .nm{color:#F7F2E7}
html[data-theme=light] .stage{border-color:rgba(160,106,18,.45)}
html[data-theme=light] .stage .scap{color:#A39A86}
html[data-theme=light] .holo{color:#F7F2E7}
html[data-theme=light] .holo b{color:#F3DFA2}
html[data-theme=light] .holo i{background:#F3DFA2;box-shadow:0 0 10px #F3DFA2}

@media(max-width:900px){
html[data-theme=light] .links{background:rgba(245,240,228,.98)}}

/* =================== HALVION AI ROBOT LAUNCHER =================== */
/* Robot colours: edit these two to re-tint the whole character (e.g. #865DFF / #79D8FF for violet-blue). */
:root{--rb-a:#F3DFA2;--rb-b:#C8932B;--rb-size:84px;--rb-off:26px}
@media(max-width:900px){:root{--rb-size:72px;--rb-off:22px}}
@media(max-width:600px){:root{--rb-size:64px;--rb-off:16px}}

#co{right:calc(var(--rb-off) + env(safe-area-inset-right,0px));bottom:calc(var(--rb-off) + env(safe-area-inset-bottom,0px));width:var(--rb-size);height:var(--rb-size);border-radius:50%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#co:hover{transform:scale(1.05)}
#co:active{transform:scale(.97)}
#co:focus-visible{outline:2px solid var(--ice);outline-offset:6px}

#co .rb{position:absolute;inset:0;display:block;pointer-events:none;transform:perspective(260px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--e)}
#co .rb svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(200,147,43,.28))}
#co .rb svg *{pointer-events:none}

/* idle "thinking" loop: one 6s cycle, every layer on the same clock */
#co .rb-ring{transform-box:fill-box;transform-origin:center;animation:rot 70s linear infinite}
#co .rb-body{transform-box:view-box;transform-origin:50px 84px;animation:rb-think 6s ease-in-out infinite}
#co .rb-eyes,#co .rb-tipled{animation:rb-eyes 6s ease-in-out infinite}
#co .rb-eyes{transform:translate(calc(var(--ex,0)*1.4px),calc(var(--ey,0)*1px));transition:transform .5s var(--e)}
#co .rb-vis{transform:translate(calc(var(--ex,0)*.7px),calc(var(--ey,0)*.5px));transition:transform .5s var(--e)}
#co .rb-glow{opacity:.8;transform-box:fill-box;transform-origin:center;transition:opacity .5s,transform .5s var(--e)}
#co:hover .rb-glow,#co:focus-visible .rb-glow,#co.hi .rb-glow{opacity:1;transform:scale(1.14)}
#co .rb-th{transform-box:fill-box;transform-origin:center;opacity:0;animation:rb-th 6s ease-in-out infinite}
#co .rb-pt{transform-box:fill-box;transform-origin:center;opacity:0;animation:rb-pt 6s ease-out infinite}
#co .rb-pt:nth-child(2){animation-delay:.12s}
#co .rb-pt:nth-child(3){animation-delay:.24s}
#co.hi .rb svg{animation:rb-greet .9s var(--e)}
@keyframes rb-think{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-3px) rotate(0)}40%{transform:translateY(-3.5px) rotate(-6deg)}62%{transform:translateY(-2px) rotate(-6deg)}84%{transform:translateY(-.5px) rotate(0)}}
@keyframes rb-eyes{0%,100%{opacity:.8}38%,62%{opacity:1}}
@keyframes rb-th{0%,30%{opacity:0;transform:translateY(4px) scale(.5)}40%,52%{opacity:1;transform:none}58%,100%{opacity:0;transform:translateY(-2px) scale(.3)}}
@keyframes rb-pt{0%,54%{opacity:0;transform:translate(0,0) scale(.4)}60%{opacity:.95}86%,100%{opacity:0;transform:translate(var(--dx,4px),var(--dy,-5px)) scale(1)}}
@keyframes rb-greet{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.08) rotate(5deg)}68%{transform:scale(1.03) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}

/* tooltip: hover + keyboard focus */
#co .tip{right:calc(100% + 16px);transform:translate(6px,-50%);transition:opacity .4s,transform .4s var(--e)}
#co:hover .tip,#co:focus-visible .tip{transform:translate(0,-50%)}
#co[aria-expanded=true] .tip{opacity:0!important}
@media(hover:none){#co:not(:focus-visible) .tip{display:none}}

/* notification badge: hidden unless HalvionChat.notify(true) is called */
#co .nb{position:absolute;top:8%;right:8%;width:12px;height:12px;border-radius:50%;background:var(--ice);box-shadow:0 0 0 2px var(--bg),0 0 10px var(--ice);pointer-events:none}
#co .nb[hidden]{display:none}

/* first-visit prompt */
.rbn{position:fixed;z-index:90;right:calc(var(--rb-off) + env(safe-area-inset-right,0px));bottom:calc(var(--rb-off) + var(--rb-size) + 16px + env(safe-area-inset-bottom,0px));max-width:min(264px,calc(100vw - 2*var(--rb-off) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));background:rgba(15,13,8,.94);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--e)}
.rbn[hidden]{display:none}
.rbn.o{opacity:1;transform:none}
.rbn::after{content:"";position:absolute;right:calc(var(--rb-size)/2 - 6px);bottom:-6px;width:10px;height:10px;background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.rbn-go{display:block;width:100%;text-align:left;background:none;border:0;color:var(--tx);font:500 14px/1.45 var(--b);padding:14px 44px 14px 16px;cursor:pointer;min-height:48px}
.rbn-x{position:absolute;top:0;right:0;width:44px;height:44px;background:none;border:0;color:var(--mu);font-size:14px;cursor:pointer}
.rbn-x:hover{color:var(--tx)}
.rbn-go:focus-visible,.rbn-x:focus-visible,#cc button:focus-visible,#cf button:focus-visible,.ch button:focus-visible{outline:2px solid var(--ice);outline-offset:-3px}
html[data-theme=light] .rbn{background:rgba(245,240,228,.96);box-shadow:0 18px 50px rgba(60,40,10,.22)}

/* chat panel: sits above the robot at every size, never leaves the viewport, "holographic" open */
#cp{right:calc(var(--rb-off) + env(safe-area-inset-right,0px));bottom:calc(var(--rb-off) + var(--rb-size) + 12px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 2*var(--rb-off) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));height:min(400px,calc(100svh - var(--rb-off) - var(--rb-size) - 120px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));min-height:260px;transform-origin:100% 100%;transform:translateY(16px) scale(.94);overflow:hidden}
#cp.o{transform:none}
#cp::after{content:"";position:absolute;left:0;right:0;top:-60px;height:60px;background:linear-gradient(to bottom,transparent,rgba(200,147,43,.2),transparent);opacity:0;pointer-events:none;z-index:2}
#cp.o::after{animation:rb-scan 1s var(--e) .05s 1 both}
@keyframes rb-scan{0%{opacity:0;top:-60px}15%{opacity:1}100%{opacity:0;top:100%}}
.ch svg{width:40px;height:40px;overflow:visible}
#cc{display:none}
/* chat panel: no title bar; only a small close button floats in the corner */
.ch{position:absolute;top:0;right:0;z-index:3;padding:0;border:0;background:none;display:block}
.ch svg,.ch>div{display:none}
.ch button{width:44px;height:44px;margin:0}
#cm{padding-top:44px}
/* thin message bar so it never covers the conversation */
#cm{min-height:0;flex:1 1 auto}
#cf{flex:none;height:44px;align-items:stretch}
#cf input{padding:0 14px;height:44px;font-size:15px;min-width:0}
#cf button{width:44px;height:44px;font-size:17px;flex:none}