), vt clara_avatar.php.
Vana .chat-side img / .clara-widget-dock img kuju oli juba lahku laind (dokk sai varju,
chat.php ei saanud) ja tal oli kaks eri allikat. */
.clara-av--suur{width:100%; max-width:420px; border-radius:8px; display:block; margin:0 auto 14px;}
@media (max-width:820px){ .clara-av--suur{width:64px; max-width:64px; margin:0; border-radius:8px;} }
.chat-side .word{font-family:'Source Serif 4', Georgia, serif; font-style:italic; font-weight:500; font-size:19px; color:var(--c-ink); display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 4px;}
@media (max-width:820px){ .chat-side .word{justify-content:flex-start;} }
.chat-side .word .dot{width:6px; height:6px; border-radius:50%; background:var(--c-accent); flex-shrink:0;}
.chat-side .sub{font-size:12.5px; color:var(--c-muted); margin:0;}
.voice-toggle{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-muted); margin-top:14px; cursor:pointer; justify-content:center;}
@media (max-width:820px){ .voice-toggle{justify-content:flex-start; margin:0 0 0 auto;} }
.voice-toggle input{width:auto; margin:0;}
.chat-main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.chat-thread{flex:1; min-height:360px; max-height:60vh; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px;}
.chat-msg{max-width:78%; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; white-space:pre-wrap;}
.chat-msg.user{align-self:flex-end; background:var(--accent-soft); color:var(--ink); border-bottom-right-radius:4px;}
.chat-msg.clara{align-self:flex-start; background:var(--c-bg); color:var(--c-ink); border:1px solid var(--c-border); border-bottom-left-radius:4px; display:flex; gap:9px; align-items:flex-start;}
.chat-msg.clara .mini-av{width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; margin-top:1px;}
.chat-msg.clara .txt{flex:1;}
.chat-msg.clara .speak-btn{flex-shrink:0; align-self:flex-start; background:none; border:none; padding:2px; margin-top:2px; color:var(--c-muted); cursor:pointer; border-radius:4px;}
.chat-msg.clara .speak-btn:hover{color:var(--c-accent); background:var(--c-border);}
/* todo #79: vestluse kuluindikaator - vaikselt märgatav (mitte hoiatav punane), ainult siis
nähtav kui vastus reaalselt tasulise API-kutse tekitas. */
.chat-msg.clara .cost-badge{flex-shrink:0; align-self:flex-start; margin-top:2px; padding:1px 6px; font-size:11px; font-family:monospace; color:var(--c-muted); background:var(--c-border); border-radius:8px;}
.chat-msg.error{align-self:flex-start; background:var(--danger-soft); color:var(--danger); border-bottom-left-radius:4px;}
.chat-empty{color:var(--muted); font-size:13px; text-align:center; padding:40px 20px;}
.chat-input-row{border-top:1px solid var(--border); padding:14px 16px; display:flex; gap:10px; align-items:flex-end;}
.chat-input-row textarea{resize:none; min-height:42px; max-height:140px;}
.chat-input-row button{flex-shrink:0;}
/* --- Clara laiub-widget (2026-08-28, Jürgeni soov: "täpselt samamoodi nagu Inna" -
investeerimise-assistent-server/app/index.php #innaAvatarDock/#innaModal muster) - alati
nähtav dokk + kõrvalpaneel, KÕIGIL lehtedel (partials/nav.php kaudu), mitte ainult
chat.php's endal. TEADLIK ERINEVUS Innast: Inna oma versioon on tegelikult AINULT
index.php dashboard'il, mitte igal Inna lehel (lessons.php/forum.php/settings.php'l seda
pole) - Jürgen küsis Clarale otseselt "kõigi alamenüüde puhul", nii et see läheb Inna
praegusest tegelikust ulatusest kaugemale, mitte lihtsalt kopeerib.
chat.php'l endal widget'it EI kuvata (vt partials/nav.php tingimust) - juba täisvaade. */
.clara-widget-dock{
display:none; position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:100;
cursor:pointer; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
/* 2026-08-28 (Jürgeni soov): sama suurus, mis chat.php's (.chat-side img) - width:420px,
height:auto (loomulik proportsioon, EI kärbita object-fit:cover'iga, sama nagu seal). */
.clara-av--dokk{width:420px; height:auto; border-radius:8px; display:block; box-shadow:0 14px 32px rgba(181,101,29,.28), 0 0 0 4px var(--card);}
.clara-widget-dock .hint{font-size:11.5px; color:var(--c-muted); max-width:170px;}
@media (min-width:1300px){
.clara-widget-dock{display:flex;}
body.clara-widget-page .wrap{margin-left:480px;}
}
.clara-widget-panel{
position:fixed; top:0; right:0; bottom:0; width:min(400px,100vw);
transform:translateX(100%); transition:transform .25s ease; z-index:100;
background:var(--card); box-shadow:-8px 0 24px rgba(30,42,50,.15);
display:flex; flex-direction:column;
}
.clara-widget-panel.open{transform:translateX(0);}
/* 2026-08-28 (Jürgeni tähelepanek, parandatud kaks korda): postkastide/muude lehtede sisu,
mis ulatub parema servani (nt "Kustuta" nupp), jäi avatud vestlusakna ALLA peitu -
position:fixed KATAB sisu, ei jäta sellele ruumi.
ESIMENE katse (body{display:flex}, Inna dashboard'i mustri järgi) OLI KATKI ja eemaldatud:
Inna körjes on
JA kogu leht ÜHE .wrap sees, seega body flex'iks muutmisel on tal
vaid KAKS reaalset in-flow last last (.wrap + sticky #innaModal). Clara struktuur on
erinev - .topbar (nav.php) on OMAETE element VÄLJASPOOL .wrap't, mõlemad body OTSESED
lapsed - body{display:flex} (rea-suunaline vaikimisi) pani .topbar ja .wrap KÕRVUTI, mitte
üksteise ALLA, mistõttu kogu leht (sh nav) läks segamini ja enamik sisu kadus ekraanilt
välja. Selle asemel PALJU lihtsam ja ohutum lahendus: EI puutu flow/flex'i üldse, lihtsalt
jäta paneeli laiuse jagu margin-right nii .topbar'ile kui .wrap'ile (mõlemad täislaiuses
staatilised elemendid, samamoodi nagu dokk juba margin-left'iga teeb) - paneel ise jääb
ALATI position:fixed, lihtsalt sisu ei ulatu enam selle alla. */
@media (min-width:1300px){
body.clara-panel-open .topbar, body.clara-panel-open .wrap{margin-right:400px;}
}
.clara-widget-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--c-border);}
.clara-widget-head img{width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 3px 10px rgba(181,101,29,.3), 0 0 0 2px var(--card);}
.clara-widget-head .word{font-family:'Source Serif 4', Georgia, serif; font-style:italic; font-weight:500; font-size:16px; color:var(--c-ink); display:flex; align-items:center; gap:6px;}
.clara-widget-head .word .dot{width:6px; height:6px; border-radius:50%; background:var(--c-accent); flex-shrink:0;}
.clara-widget-head .sub{font-size:11px; color:var(--c-muted);}
.clara-widget-close{margin-left:auto; background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1;}
.clara-widget-thread{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
/* --- env-banner (Orchestrator todo #67, 2026-09-06) -- vt shared-modules/env-banner/README.md --- */
.env-banner {
position: sticky;
top: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: #1a1a1a;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.env-banner-test { background: #f5c518; }
.env-banner-live { background: #b7dfc0; }
.env-banner button#envBannerClose {
background: transparent;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: #1a1a1a;
padding: 0 4px;
}
.env-banner button#envBannerClose:hover {
opacity: 0.7;
}
/* --- password-toggle (Orchestrator todo #75, 2026-09-06) --- */
.pw-toggle-wrap { position: relative; display: block; width: 100%; }
.pw-toggle-input { width: 100%; padding-right: 34px !important; box-sizing: border-box; }
.pw-toggle-input::-ms-reveal, .pw-toggle-input::-ms-clear { display: none; } /* Edge topelt-silma fix, vt shared-modules/password-toggle */
.pw-toggle-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 15px;
line-height: 1;
padding: 4px 6px;
color: var(--muted, #666);
border-radius: 4px;
}
.pw-toggle-btn:hover { opacity: 0.7; background: var(--bg, rgba(0,0,0,0.05)); }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--primary, #2a5d8f); outline-offset: 1px; }
/* ═══ Clara avatar: kaadripohine esitus (todo #182 faas C, 2026-10-18) ═══════════════════
Kaks reziimi, SAMA moot (vt clara_avatar.php):
.clara-av--foto staatiline ![]()
+ vaikne hingamine (tanane seis, kaadreid pole)
.clara-av--kaadrid horisontaalne sprait + steps() (faas C, kui kaadrid on olemas)
SPRAIDI NIHE ON PROTSENTIDES, MITTE PIKSLITES, ja see ei ole stiilivalik: avatar on
responsiivne (420px dokis, 64px mobiilis) ning pikslipohine background-position laheks
igal murdepunktil paigast ara. background-size: n*100% + position-x 0%..100% + steps(n)
annab TAPSELT kaadrid 0..n-1 sealtkaudu, et protsentuaalne nihe arvutatakse
(konteiner - pilt) suhtes. Uhtegi mootu ei pea CSS-is korrata, kui kaadrite arv muutub --
ta tuleb manifestist muutujana.
KOLM PAUSI (clara-avatar.js paneb klassid): peidetud kaart (--seisab), ekraanilt valjas
dokk (--valjas), prefers-reduced-motion (klass + eraldi media-reegel, et ta kehtiks ka
siis, kui JS ei joua kaivituda). Pohjus: vidin on IGAL lehel, seega iga kaader on kulu,
mida maksab iga lahtine kaart terve paeva -- mobiili aku kaasa arvatud. */
.clara-av{display:block;}
.clara-av--kaadrid{
aspect-ratio: var(--av-laius) / var(--av-korgus);
background-repeat:no-repeat;
background-image: var(--av-ootel-sprait);
background-size: calc(var(--av-ootel-kaadreid) * 100%) 100%;
}
/* OOTEL EI ANIMEERI PIDEVALT. Alusreegel jatab ta SEISMA esimese kaadri peale; liikumine
tuleb ainult siis, kui JS lisab .clara-av--ring, ja ta lopeb ISE (iteration-count).
Jurgen 2026-10-18: "kui clara kogu aeg jarjest pead liigutab, siis on ka imelik ... teeb
uhe ringi ara, aga peale seda on paus nt 15 sekki". Pausi PIKKUS tuleb manifestist
(clara-avatar.js loeb data-av-paus), mitte siit -- CSS-i keyframe'i protsente ei saa
muutujast arvutada, seega pausi ei saagi CSS-is hoida.
RINGI pikkus = uks kestus korda --av-ootel-kordusi (edasi-tagasi jada juures 2 ehk
edasi + tagasi; uhesuunalise juures 1). 'both' hoiab lopus viimase kaadri kuni klass
eemaldatakse -- ilma selleta vilguks ta hetkeks esimesele kaadrile tagasi. */
.clara-av--kaadrid.clara-av--ring{
animation: clara-av-sprait var(--av-ootel-kestus) steps(var(--av-ootel-kaadreid), jump-none)
var(--av-ootel-kordusi, 1) var(--av-ootel-suund, normal) both;
}
/* Motleb ja raagib on TEADLIKULT pidevad: seal ta TEEB midagi ja see kestab teadmata kaua --
seismajaamine keset vastuse ootamist naeks valja nagu kinnijooksmine, mitte nagu rahu. */
.clara-av--kaadrid.clara-av--motleb,
.clara-av--kaadrid.clara-av--raagib{
animation: clara-av-sprait var(--av-ootel-kestus) steps(var(--av-ootel-kaadreid), jump-none)
infinite var(--av-ootel-suund, normal);
}
/* jump-none EI OLE PEENHAALESTUS, vaid parandus. background-position-x protsent arvutatakse
(KONTEINER MIINUS PILT) suhtes, mitte pildi laiuse suhtes -- seega kaader k noauab protsenti
k/(n-1), mitte k/n. Tavaline steps(n) annab k/n ja iga samm nihkub veidi paigast: ekraanil
paistsid kaadri vasakus ja paremas servas ribad NAABERKAADRIST. jump-none annab tapselt
n vaartust 0..1 (kaasa arvatud 1), ehk k/(n-1) -- iga kaader istub tapselt kohale.
Leitud brauseris 2026-10-18; 8-kaadrilise platsihoidjaga EI OLNUD seda naha, sest seal olid
koik kaadrid peaaegu uhesugused ja nihe ei paistnud valja. */
/* "Motleb" ei ole eraldi kaadrijada (veel) -- sama silmus aeglasemalt, et ootamine naeks
valja nagu ootamine, mitte nagu sama asi. Eraldi jada saab manifesti lisada hiljem. */
.clara-av--kaadrid.clara-av--motleb{animation-duration: calc(var(--av-ootel-kestus) * 1.6);}
.clara-av--kaadrid.clara-av--raagib[data-av-raagib]{
background-image: var(--av-raagib-sprait);
background-size: calc(var(--av-raagib-kaadreid) * 100%) 100%;
animation: clara-av-sprait var(--av-raagib-kestus) steps(var(--av-raagib-kaadreid), jump-none)
infinite var(--av-ootel-suund, normal);
}
@keyframes clara-av-sprait{ from{background-position-x:0%;} to{background-position-x:100%;} }
/* Edasi-tagasi silmus (manifesti 'edasi_tagasi'): vt avatar_sprait.php -- paris i2v-klipp ei
tule algusesse tagasi, seega uhesuunaline silmus hupleks iga tsukli lopus. alternate teeb
silmuse sujuvaks ILMA UHEGI LISAKAADRITA failis.
SUUND TULEB MUUTUJAST --av-ootel-suund, MITTE eraldi animation-direction reeglist, ja see on
PARANDUS, mitte stiilivalik. Varem seisis siin `.clara-av--edasi-tagasi{animation-direction:
alternate;}` -- aga `animation` LUHIVORM ulal LAHTESTAB koik nimetamata alamomadused, sh
suuna, ja tema valija on kahe klassiga ehk spetsiifilisem. Tulemus: Clara tegi pea poorde
KAKS KORDA SAMAS SUUNAS, mitte edasi ja tagasi (Jurgen 2026-10-18: "teeb samas suunas 2x ja
see on veider"). Luhivormis peab suund olema KAASAS. */
/* SISSEJUHATUS: uhekordne jada enne silmust (nt poosi vottmine). Kolm asja korraga ja koik
kolm on vajalikud: iteration-count 1 (ei kordu), fill-mode forwards (jaab VIIMASE kaadri
peale seisma, mitte ei hupa tagasi esimesele enne kui JS klassi vahetab) ja direction
normal (vajalik, sest .clara-av--edasi-tagasi klass on elemendil juba olemas ja tema
alternate kehtiks muidu ka siin). */
.clara-av--kaadrid.clara-av--sisse{
background-image: var(--av-sisse-sprait);
background-size: calc(var(--av-sisse-kaadreid) * 100%) 100%;
animation: clara-av-sprait var(--av-sisse-kestus) steps(var(--av-sisse-kaadreid), jump-none) 1 normal forwards;
}
/* HOIUVORM, MITTE FAASI C TULEMUS: kuni paris kaadrid puuduvad, teeb foto vaikse (1,2 %)
skaleeriva liigutuse, et ta ei seisaks paris paigal. 7 s silmus, transform-origin all
(nagu hingamine, mitte nagu zoom keskelt). Ara nimeta seda "Clara liigub". */
.clara-av--foto{
transform-origin:50% 100%;
animation: clara-av-hingab 7s ease-in-out infinite;
will-change: transform;
}
@keyframes clara-av-hingab{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.012);} }
.clara-av.clara-av--seisab, .clara-av.clara-av--valjas{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
.clara-av{animation:none;}
}