/* Live Strippi, orbs and small interface pieces (ui-kit.js, strippi-motion.js). Works in "Nacht" and "Hell". */

/* Strippi: the canvas takes the size of the place it sits in. */
.strippi-bot-slot{display:block;width:100%;height:100%;line-height:0}
.strippi-bot-slot>canvas{display:block;cursor:pointer}
.studio-mascot .strippi-bot-slot{width:190px;height:190px;margin:auto}
@media(max-width:760px){.studio-mascot .strippi-bot-slot{width:84px;height:84px}}

/* Orb with optional label */
.strippi-orb-wrap{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.strippi-orb{display:inline-block;line-height:0}
.strippi-orb-label{color:var(--muted);font-size:13px;background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 50%,var(--muted) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:orb-shimmer 1.6s linear infinite}
@keyframes orb-shimmer{to{background-position:-200% 0}}
.companion-thinking{display:flex;align-items:center}
#cloud-header .strippi-orb-wrap,[data-auto-bank-status] .strippi-orb-wrap{margin-right:6px}

/* Tooltip at the pointer */
#float-tip{position:fixed;left:0;top:0;z-index:90;max-width:280px;padding:9px 12px;border-radius:10px;background:#0f3337;color:#f3eadb;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
#float-tip strong{display:block;font-weight:600;color:inherit}
#float-tip span{display:block;opacity:.75;margin-top:2px}
#float-tip.show{animation:tip-in .16s ease-out}
@keyframes tip-in{from{opacity:0}}
html:not(.night) #float-tip{background:#ffffff;color:#20231d;border-color:#e3e6df}
.has-tip{cursor:help;text-decoration:underline dotted color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}

/* Switches – iOS style. ui-kit.js drives two springs as CSS variables:
   --p position (0 off … 1 on, may overshoot slightly), --g grab (0 … 1 while held).
   Thumb travel, track colour and glow all follow --p; the thumb widens into a glass lens with --g.
   Without the script the checked state alone sets --p. */
button.switch-row{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;touch-action:pan-y}
.sw{--p:0;--g:0;--sw-off:rgba(120,120,128,.32);position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:999px;cursor:grab;
 background:color-mix(in srgb,var(--accent) calc(var(--p)*100%),var(--sw-off));
 box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 0 calc(var(--p)*12px) color-mix(in srgb,var(--accent) calc(var(--p)*40%),transparent)}
[aria-checked="true"]>.sw{--p:1}
.sw:active{cursor:grabbing}
.sw>i{position:absolute;top:2px;left:2px;height:24px;border-radius:999px;
 width:calc(24px + var(--g)*8px);
 transform:translateX(calc(var(--p)*(18px - var(--g)*8px))) scale(calc(1 + var(--g)*.12));
 background:color-mix(in srgb,#fff calc(100% - var(--g)*45%),transparent);
 -webkit-backdrop-filter:blur(calc(var(--g)*3px)) saturate(calc(1 + var(--g)*.8));backdrop-filter:blur(calc(var(--g)*3px)) saturate(calc(1 + var(--g)*.8));
 box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16),0 calc(3px + var(--g)*4px) calc(1px + var(--g)*12px) rgba(0,0,0,calc(.06 + var(--g)*.12))}
/* Liquid highlight: a bright rim and a soft inner glow fade in while held */
.sw>i::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--g);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 -6px 10px rgba(255,255,255,.35),inset 0 4px 6px rgba(255,255,255,.25);pointer-events:none}
html.night .sw{--sw-off:rgba(255,255,255,.14)}

/* Sun / moon theme toggle */
.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0!important;border-radius:50%!important}
.theme-toggle svg{width:20px;height:20px;overflow:visible}
.theme-toggle .tt-core{fill:currentColor;transition:r .35s}
.theme-toggle .tt-cut{transition:cx .4s cubic-bezier(.3,1.3,.5,1),cy .4s cubic-bezier(.3,1.3,.5,1);cx:30;cy:-6}
.theme-toggle .tt-rays{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none;transform-origin:12px 12px;transition:transform .45s,opacity .3s}
.theme-toggle.is-night .tt-cut{cx:17;cy:7}
.theme-toggle.is-night .tt-core{r:8}
.theme-toggle.is-night .tt-rays{transform:rotate(-60deg) scale(.4);opacity:0}
.theme-switch>button[data-theme-choice]{display:none}
.shell>header .theme-toggle{margin-left:auto}
.shell>header .theme-toggle+.pill{margin-left:8px}

/* Copy buttons */
.copy-btn{display:inline-grid;place-items:center;width:28px;height:28px;min-height:28px!important;padding:0!important;border-radius:8px!important;vertical-align:middle}
.copy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.copy-btn .cp-ok{opacity:0;stroke-dasharray:24;stroke-dashoffset:24}
.copy-btn.copied .cp-a,.copy-btn.copied .cp-b{opacity:0}
.copy-btn.copied .cp-ok{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out;stroke:var(--accent)}
.focus-balances .row .copy-btn{margin-left:8px;opacity:.5}.focus-balances .row:hover .copy-btn{opacity:1}

/* Reveal: blurred figures sharpen one after another, the subtitle comes in word by word */
.num-reveal{animation:num-reveal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes num-reveal{from{filter:blur(12px);opacity:.15;transform:translateY(6px)}to{filter:blur(0);opacity:1;transform:none}}
#subtitle .word{display:inline-block;animation:word-reveal .55s ease-out both;animation-delay:var(--d,0ms)}
@keyframes word-reveal{from{filter:blur(8px);opacity:0;transform:translateY(4px)}to{filter:none;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.num-reveal,#subtitle .word,.strippi-orb-label,#float-tip.show{animation:none!important}}
/* The chat button's name tag rules must not paint the figure itself. */
#strippi-companion>.strippi-bot-slot{background:none!important;padding:0!important;border-radius:0!important;width:64px;height:64px;margin:0 auto;box-shadow:none!important}
@media(max-width:760px){#strippi-companion>.strippi-bot-slot{width:52px;height:52px}}
@media(max-width:760px){.shell>header #theme-toggle-header{display:none}}
@media(max-width:760px){#mercury-menu{white-space:nowrap;flex:0 0 auto}#mercury-search{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;text-align:left}.shell>header .pill{flex:0 0 auto}}
/* Theme change: the new design grows as a circle from the sun/moon button. */
::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:9999;clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%));animation:vt-reveal .45s cubic-bezier(.22,1,.36,1) forwards}
@keyframes vt-reveal{to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,50%))}}
/* One sun/moon button: in the header on the computer, under "Darstellung" on the phone. */
#theme-toggle-panel{display:none}
@media(max-width:760px){#theme-toggle-panel{display:inline-grid}}
.theme-switch:has(#theme-toggle-panel){display:none}
@media(max-width:760px){.theme-switch:has(#theme-toggle-panel){display:flex}}
/* No name tag under Strippi (the button keeps its accessible name). */
#strippi-companion>span:not(.strippi-bot-slot){display:none!important}

/* Greeting bubble next to Strippi */
#strippi-greet{position:fixed;right:96px;bottom:44px;z-index:65;max-width:min(320px,calc(100vw - 120px));display:flex;align-items:flex-start;gap:4px;padding:12px 10px 12px 16px;border-radius:18px 18px 4px 18px;background:var(--cream,#fffdf8);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 40px rgba(13,47,51,.18);opacity:0;transform:translateY(8px) scale(.96);transform-origin:right bottom;transition:opacity .25s,transform .35s cubic-bezier(.3,1.4,.5,1)}
#strippi-greet.show{opacity:1;transform:none}
#strippi-greet .greet-text{all:unset;cursor:pointer;font-size:14px;line-height:1.5;flex:1}
#strippi-greet .greet-text:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
#strippi-greet .greet-close{flex:0 0 auto;width:24px;height:24px;min-height:24px;padding:0;border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;border-radius:50%}
html.night #strippi-greet{background:#12393d;color:#f3eadb;border-color:rgba(232,200,130,.25);box-shadow:0 18px 40px rgba(0,0,0,.45)}
html.night #strippi-greet .greet-close{color:#a7c1bc}
@media(max-width:760px){#strippi-greet{right:72px;bottom:calc(30px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 96px)}#strippi-greet .greet-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){#strippi-greet{transition:none}}
/* Refresh button: the arrow turns while banks are being checked */
#focus-refresh-button{display:inline-flex;align-items:center;gap:6px;font-size:12px;min-height:35px;white-space:nowrap}
#focus-refresh-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
#focus-refresh-button:hover svg{transform:rotate(90deg)}
#focus-refresh-button.is-busy svg{animation:refresh-spin .9s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){#focus-refresh-button span{display:none}#focus-refresh-button{min-height:42px;padding:8px 12px}.heading #focus-refresh-button{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){#focus-refresh-button.is-busy svg{animation-duration:3s}}
/* Smoother buttons everywhere: soft press and spring back */
button{transition:background .2s,border-color .2s,box-shadow .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
button:active:not(:disabled):not(.switch-row){transform:scale(.97)}
@media(prefers-reduced-motion:reduce){button:active{transform:none!important}}