/* v2 Sprint 3 «Living Ramsly Orb» (Osama 2026-10-18): coral #FF4B3E + warm amber #FF8A4C, emerald #10B981 for a moment when a
   reply goes out / a task is done. Same .reem markup everywhere (reem() in app.js); loaded after app.css + ramsly.css and
   overrides the old avatar look. States: idle (breathing) · alert (proactive bubble) · listen (sound rings) · think (particles)
   · talk (mouth + core follow the voice, data-f) · happy (smiling eyes) · ok (emerald). */
.reem.orb{--lx:0;--ly:0;--c1:#FFE3CC;--c2:#FF8A4C;--c3:#FF4B3E;--c4:#B8261B;--glow:rgba(255,106,70,.42)}
.reem.orb .halo{inset:-16%;border-radius:50%;background:radial-gradient(circle,var(--glow) 0,rgba(255,75,62,.16) 46%,transparent 70%);box-shadow:none;animation:orbBreath 3.4s ease-in-out infinite;transition:background .5s}
.reem.orb .halo:after{display:none}
.reem.orb.free .halo,.reem.orb.free .ring{display:block}
.reem.orb .ring{inset:-4%;border:2px solid rgba(255,138,76,.75);opacity:0}
.reem.orb .av{inset:10%;border-radius:50%;overflow:visible}
.reem.orb.free .av{inset:12%;border-radius:50%}
.reem.orb .ob,.reem.orb .ob:before,.reem.orb .ob:after{position:absolute;inset:0;border-radius:47% 53% 52% 48%/51% 46% 54% 49%}
.reem.orb .ob{background:radial-gradient(circle at 32% 28%,var(--c1) 0,var(--c2) 30%,var(--c3) 64%,var(--c4) 100%);
  box-shadow:inset calc(var(--s)*-.06) calc(var(--s)*-.09) calc(var(--s)*.14) rgba(110,10,0,.32),inset calc(var(--s)*.05) calc(var(--s)*.06) calc(var(--s)*.1) rgba(255,255,255,.35),0 calc(var(--s)*.08) calc(var(--s)*.2) rgba(255,75,62,.34);
  animation:orbMorph 7s ease-in-out infinite}
/* liquid-glass sheen */
.reem.orb .ob:before{content:"";inset:7% 18% 52% 14%;border-radius:50%;background:linear-gradient(170deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-18deg);opacity:.85}
/* emerald layer (cross-fades in for .ok) */
.reem.orb .ob:after{content:"";background:radial-gradient(circle at 32% 28%,#D1FAE5 0,#34D399 30%,#10B981 64%,#047857 100%);opacity:0;transition:opacity .35s}
.reem.orb.ok .ob:after{opacity:1}
.reem.orb.ok{--glow:rgba(16,185,129,.45)}
.reem.orb .oc{position:absolute;left:30%;top:52%;width:40%;height:30%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,240,200,.85),rgba(255,200,140,.25) 55%,transparent 72%);mix-blend-mode:screen;animation:orbCore 2.6s ease-in-out infinite;transition:transform .09s}
/* eyes: follow --lx/--ly, blink on data-f=blink, smile when happy, look up while thinking */
.reem.orb .oe{position:absolute;left:0;right:0;top:34%;height:22%;display:flex;justify-content:center;gap:16%;transform:translate(calc(var(--lx)*9%),calc(var(--ly)*12%));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.reem.orb .oe b{width:12%;height:100%;border-radius:999px;background:#fff;box-shadow:0 0 calc(var(--s)*.05) rgba(255,255,255,.9);transform-origin:50% 60%;transition:transform .09s,height .25s,border-radius .25s,background .25s}
.reem.orb[data-f=blink] .oe b{transform:scaleY(.12)}
.reem.orb.happy .oe b,.reem.orb[data-f=happy] .oe b{height:46%;background:transparent;border:calc(var(--s)*.028 + 1px) solid #fff;border-bottom:0;border-radius:999px 999px 0 0;box-shadow:none;margin-top:6%}
.reem.orb.think .oe{transform:translate(-14%,-16%)}
.reem.orb.listen .oe b{transform:scale(1.15,1.08)}
.reem.orb .om{position:absolute;left:43%;width:14%;top:62%;height:4%;border-radius:0 0 999px 999px;background:rgba(255,255,255,.9);opacity:0;transition:height .08s,opacity .2s}
.reem.orb.happy .om{opacity:1;height:7%;border-radius:0 0 999px 999px}
.reem.orb.talk .om{opacity:1;border-radius:999px}
.reem.orb[data-f=mouth-e] .om{height:5%}.reem.orb[data-f=mouth-o] .om{height:9%;left:45%;width:10%}.reem.orb[data-f=mouth-a] .om{height:12%}
.reem.orb[data-f=mouth-e] .oc{transform:scale(1.12)}.reem.orb[data-f=mouth-o] .oc{transform:scale(1.25)}.reem.orb[data-f=mouth-a] .oc{transform:scale(1.4)}
/* think: light particles orbit inside + a turning ring */
.reem.orb .op{position:absolute;inset:8%;border-radius:50%;opacity:0;transition:opacity .3s;animation:spin 2.2s linear infinite}
.reem.orb .op b{position:absolute;width:9%;height:9%;border-radius:50%;background:#FFF4E0;box-shadow:0 0 calc(var(--s)*.06) #FFD9A8}
.reem.orb .op b:nth-child(1){left:46%;top:0}.reem.orb .op b:nth-child(2){right:4%;top:40%;width:6%;height:6%}.reem.orb .op b:nth-child(3){left:40%;bottom:2%;width:7%;height:7%}.reem.orb .op b:nth-child(4){left:4%;top:34%;width:5%;height:5%}.reem.orb .op b:nth-child(5){right:18%;bottom:14%;width:4%;height:4%}
.reem.orb.think .op{opacity:1}
.reem.orb.think .ring{opacity:1;border-style:dashed;animation:spin 3s linear infinite}
.reem.orb.think .halo{animation:orbBreath 1.2s ease-in-out infinite}
.reem.orb.think .ob{animation:orbMorph 2.4s ease-in-out infinite}
/* listen: rings ripple out with the voice */
.reem.orb.listen .ring{opacity:0;border-style:solid;border-color:rgba(255,138,76,.9);animation:orbWave 1.5s ease-out infinite}
.reem.orb.listen .ring.r2{animation-delay:.75s}
.reem.orb.listen.loud .ring{animation-duration:.9s}.reem.orb.listen.loud .ring.r2{animation-delay:.45s}
.reem.orb.listen .halo{animation:orbBreath .9s ease-in-out infinite}
.reem.orb.listen .ob{animation:orbMorph 1.6s ease-in-out infinite}
/* alert: the proactive bubble is up → warm gold pulse */
.reem.orb.alert{--glow:rgba(255,170,60,.6)}
.reem.orb.alert .halo{animation:orbBreath 1s ease-in-out infinite}
.reem.orb.alert .ring{opacity:1;border-color:rgba(255,190,90,.9);animation:orbWave 1.6s ease-out infinite}
/* small avatars (chat bubbles): no particles, softer shadow */
.reem.orb.sm .op,.reem.orb.sm .ring{display:none}
.reem.orb.sm .oe{gap:20%}
.reem.orb.free:before{background:radial-gradient(ellipse,rgba(255,75,62,.3),transparent 70%)}
[data-theme=dark] .reem.orb.free:before{background:radial-gradient(ellipse,rgba(255,138,76,.35),transparent 70%)}
.reem.orb .spk{background:radial-gradient(circle,#FFE6B0 0 30%,transparent 32%),conic-gradient(from 45deg,transparent 0 10%,#FFB561 10% 15%,transparent 15% 35%,#FFB561 35% 40%,transparent 40% 60%,#FFB561 60% 65%,transparent 65% 85%,#FFB561 85% 90%,transparent 90%)}
.fab{background:transparent!important;box-shadow:none!important}
.fab .reem.orb .halo{animation:orbBreath 3.2s ease-in-out infinite}
.fab .reem.orb.alert .halo{animation:orbBreath 1s ease-in-out infinite}
.fab .reem.orb.listen .halo{animation:orbBreath .9s ease-in-out infinite}
@keyframes orbBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
@keyframes orbMorph{0%,100%{border-radius:47% 53% 52% 48%/51% 46% 54% 49%}25%{border-radius:53% 47% 45% 55%/46% 54% 47% 53%}50%{border-radius:49% 51% 56% 44%/55% 49% 51% 45%}75%{border-radius:55% 45% 49% 51%/48% 55% 45% 52%}}
@keyframes orbCore{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes orbWave{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.reem.orb .ob,.reem.orb .halo,.reem.orb .oc,.reem.orb .op,.reem.orb .ring{animation:none!important}}

/* the chat's changing thinking line */
.tl{display:inline-block}.tl.sw{animation:tlIn .35s ease both}
@keyframes tlIn{from{opacity:0;transform:translateY(4px)}}

/* the micro speech bubble next to the floating orb */
.otip{position:fixed;z-index:25;max-width:min(300px,calc(100% - 32px));display:flex;align-items:flex-start;gap:6px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--solid);box-shadow:0 14px 34px rgba(11,16,32,.18);border:1px solid rgba(255,138,76,.35);opacity:0;transform:translateY(10px) scale(.92);transition:opacity .25s,transform .35s cubic-bezier(.2,1.5,.4,1)}
.otip.on{opacity:1;transform:none}
.otip.l{transform-origin:0 100%;border-bottom-left-radius:6px}.otip.r{transform-origin:100% 100%;border-bottom-right-radius:6px}
.otip .ot{flex:1;text-align:start;font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:500}
.otip .ox{flex:none;width:24px;height:24px;border-radius:50%;color:var(--mut);font-size:12px;background:var(--track)}