*{box-sizing:border-box}html,body{height:100%;margin:0;background:transparent;color:#eef8ff;font-family:Segoe UI,Arial,sans-serif}
body{display:flex;justify-content:flex-end;align-items:flex-end;padding:10px}.app{width:min(390px,100vw);height:min(620px,calc(100vh - 20px));display:grid;grid-template-rows:54px 190px 42px 1fr auto 60px;overflow:hidden;background:#030a12;border:1px solid #26323b;border-radius:22px;box-shadow:0 18px 55px #0009}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid #18232d}.brand{font-size:18px;font-weight:750;letter-spacing:.8px}.brand span{color:#42cfff}.brand small{display:block;font-size:6.5px;letter-spacing:2px;color:#73899b;margin-top:2px}.online{font-size:9px;color:#a9bac5}.online i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39d99d;margin-right:5px}
.hero{display:flex;align-items:center;justify-content:center;background:transparent;overflow:visible}.face{width:240px;height:180px;background:transparent;border:0;box-shadow:none;filter:none;transition:.14s}.bot-svg{width:100%;height:100%;overflow:visible}
.headOutline{fill:#9aa2a8;stroke:#bac0c5;stroke-width:1}.visor{fill:#151a1e;stroke:#555f66;stroke-width:1.2}.ear{fill:#747d83;stroke:#a3abb0;stroke-width:1}.antenna{fill:none;stroke:#a8b0b5;stroke-width:3}.antennaDot{fill:#a8b0b5}.eye{fill:#818a90}.lip{fill:none;stroke:#858e94;stroke-width:4;stroke-linecap:round}
.face.listening .headOutline,.face.speaking .headOutline{fill:#83b8d7;stroke:#61e1ff;filter:drop-shadow(0 0 7px #32d8ff)}.face.listening .visor,.face.speaking .visor{stroke:#28cff5}.face.listening .ear,.face.speaking .ear{fill:#1d6d98;stroke:#52e1ff}.face.listening .antenna,.face.speaking .antenna{stroke:#5be5ff}.face.listening .antennaDot,.face.speaking .antennaDot,.face.listening .eye,.face.speaking .eye{fill:#48e1ff;filter:drop-shadow(0 0 7px #32d8ff)}.face.listening .lip,.face.speaking .lip{stroke:#65e9ff;filter:drop-shadow(0 0 5px #35d9ff)}
.face.speaking .lip{transform-box:fill-box;transform-origin:center;animation:talk .16s infinite alternate ease-in-out}.face.listening .eye{transform-box:fill-box;transform-origin:center;animation:listen .55s infinite alternate ease-in-out}@keyframes talk{from{transform:scaleY(.5) scaleX(.9)}to{transform:scaleY(1.7) scaleX(1.05)}}@keyframes listen{to{transform:scaleX(1.08)}}
.statusbar{display:flex;align-items:center;justify-content:center;gap:12px;border-block:1px solid #18232d}.statusbar button{width:31px;height:31px;border-radius:50%;border:1px solid #304756;background:#07131e;color:#61d9f5;cursor:pointer}.statusbar button.off{color:#667783}.statusbar span{min-width:115px;text-align:center;font-size:10px;color:#9eb4c2}
.chat{overflow:auto;padding:10px 12px;background:#030a12}.msg{max-width:86%;padding:9px 11px;border-radius:14px;border:1px solid #273946;background:#0a141d;font-size:11px;line-height:1.4;margin:0 0 8px;white-space:pre-wrap}.msg.user{margin-left:auto;background:#102a3d;border-color:#23516c}.msg.bot{margin-right:auto;background:#071723}.msg.pending{opacity:.72}.sources{font-size:8px;color:#7798aa;margin-top:5px}
.draft{margin:0 11px 7px;padding:9px;border:1px solid #1b8067;border-radius:12px;background:#061817;font-size:10px}.hidden{display:none}.draft pre{max-height:110px;overflow:auto;background:#02070b;padding:7px;font-size:8px}.draft>div{display:flex;justify-content:flex-end;gap:6px}.draft button{border:1px solid #27516a;border-radius:8px;background:#071723;color:white;padding:5px 8px}#confirm{background:#0c6654}
form{display:grid;grid-template-columns:1fr 43px;gap:7px;padding:8px 11px 11px;border-top:1px solid #18232d;background:#030a12}input{min-width:0;border:1px solid #31546a;background:#07131f;color:white;border-radius:22px;padding:0 14px;outline:0;font-size:12px;pointer-events:auto}input:focus{border-color:#39bce7;box-shadow:0 0 0 2px #39bce719}form button{border:0;border-radius:50%;background:#1179bd;color:white;font-size:17px;cursor:pointer}@media(max-width:430px){body{padding:0}.app{width:100vw;height:100dvh;border:0;border-radius:0}}
.sources{max-width:86%;margin:-4px 0 10px 4px;font-size:8px;color:#7895a7}
.sources a{color:#61cce9;text-decoration:none}.sources a:hover{text-decoration:underline}

/* v8.1 desktop app shell: fill only the popup viewport, never a larger white page */
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#020c14}
body{min-width:0!important;min-height:0!important}
.app,.shell,.container,.page,.wrap{max-width:100%!important}
@media (min-width: 500px){
  body{display:block!important}
}

/* v8.3 native desktop: exact client-area fit */
html,body{width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#030a12!important}
body{display:block!important}
.app{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}


/* v8.6 SINGLE-WINDOW HARD OVERRIDE
   The native window IS the app. No inset shell, no second layer, no spare canvas. */
html, body {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #030a12 !important;
}
body {
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}
.app {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* v8.7 compact responsive UI */
:root{--ts-max:440px}
.app{width:100%!important;height:100%!important;max-width:var(--ts-max)!important;margin:0 auto!important}
@media(max-width:600px){.app{max-width:none!important}.bot-area{height:32vh!important;min-height:220px!important}.robot{transform:scale(.78);transform-origin:center}.chat{font-size:14px!important}}
@media(max-width:400px){.bot-area{height:29vh!important;min-height:195px!important}.robot{transform:scale(.68)}.composer{padding:7px!important}}
body.ts-listening .robot,body.ts-speaking .robot{filter:drop-shadow(0 0 15px rgba(55,215,255,.8))}

/* v9.2 explicit state animation */
.face{transition:filter .18s ease}
.face .headOutline,.face .visor,.face .ear,.face .antenna,.face .antennaDot,.face .eye,.face .lip{transition:all .18s ease}
.face.listening .headOutline,.face.speaking .headOutline{
 fill:#83b8d7;stroke:#65e9ff;filter:drop-shadow(0 0 9px #2edcff)
}
.face.listening .eye,.face.speaking .eye{
 fill:#55e6ff;filter:drop-shadow(0 0 8px #28d9ff)
}
.face.listening .lip,.face.speaking .lip{
 stroke:#69ebff;filter:drop-shadow(0 0 7px #28d9ff)
}
.face.speaking .lip{
 animation:tsMouth .13s infinite alternate cubic-bezier(.2,.7,.3,1);
}
@keyframes tsMouth{
 0%{transform:scaleX(.82) scaleY(.42) translateY(-1px)}
 45%{transform:scaleX(1.08) scaleY(1.18) translateY(0)}
 100%{transform:scaleX(.92) scaleY(1.85) translateY(1px)}
}
body:not(.ts-speaking):not(.ts-listening) .face{
 filter:none!important;
}

.stop-speak{
 position:absolute;right:74px;bottom:18px;z-index:50;
 width:38px;height:38px;border-radius:50%;
 border:1px solid #27485b;background:#0b1b26;color:#65dcff;
 font-size:15px;line-height:36px;cursor:pointer;
 box-shadow:0 0 0 1px rgba(101,220,255,.06);
}
.stop-speak:hover{background:#102b3c;box-shadow:0 0 12px rgba(101,220,255,.28)}

/* v9.9 semantic animation states */
body.mode-listening .bot-shell,body.mode-listening .robot,body.mode-listening .head{
 filter:drop-shadow(0 0 14px rgba(42,190,255,.85));
}
body.mode-listening .bot-shell *,body.mode-listening .robot *,body.mode-listening .head *{
 --state-color:#35c9ff;
}
body.mode-thinking .bot-shell,body.mode-thinking .robot,body.mode-thinking .head{
 filter:drop-shadow(0 0 11px rgba(255,205,55,.55));
}
body.mode-thinking .bot-shell *,body.mode-thinking .robot *,body.mode-thinking .head *{
 --state-color:#ffd447;
}
body.mode-speaking .bot-shell,body.mode-speaking .robot,body.mode-speaking .head{
 filter:drop-shadow(0 0 18px rgba(50,230,145,.95));
}
body.mode-speaking .bot-shell *,body.mode-speaking .robot *,body.mode-speaking .head *{
 --state-color:#38e596;
}
/* Broad selectors support current SVG/CSS robot markup without replacing it. */
body.mode-listening :is(.eye,.mouth,.lip,.face-outline,.antenna),
body.mode-listening :is(.eye,.mouth,.lip,.face-outline,.antenna) *{
 stroke:#35c9ff!important;fill:#35c9ff;
}
body.mode-thinking :is(.eye,.mouth,.lip,.face-outline,.antenna),
body.mode-thinking :is(.eye,.mouth,.lip,.face-outline,.antenna) *{
 stroke:#ffd447!important;fill:#ffd447;
}
body.mode-speaking :is(.eye,.mouth,.lip,.face-outline,.antenna),
body.mode-speaking :is(.eye,.mouth,.lip,.face-outline,.antenna) *{
 stroke:#38e596!important;fill:#38e596;
}
body.mode-speaking :is(.eye,.mouth,.lip,.face-outline){
 filter:drop-shadow(0 0 8px #38e596);
}
/* Thinking: packets visually travel down both antennas. */
body.mode-thinking .antenna{position:relative;overflow:visible}
body.mode-thinking .antenna::after{
 content:"";position:absolute;left:50%;top:-10px;width:7px;height:7px;border-radius:50%;
 background:#fff2a3;box-shadow:0 0 9px #ffd447;
 animation:tsDataFlow .62s linear infinite;
}
@keyframes tsDataFlow{
 0%{transform:translate(-50%,-12px);opacity:.1}
 25%{opacity:1}
 100%{transform:translate(-50%,45px);opacity:.15}
}

/* v10 semantic state colors */
body.mode-listening :is(.face-outline,.eye,.eyes,.mouth,.lip,.lips,.antenna){stroke:#27c9ff!important;color:#27c9ff!important;filter:drop-shadow(0 0 8px #27c9ff)}
body.mode-thinking :is(.face-outline,.eye,.eyes,.mouth,.lip,.lips,.antenna){stroke:#ffd84a!important;color:#ffd84a!important;filter:drop-shadow(0 0 7px #ffd84a)}
body.mode-speaking :is(.face-outline,.eye,.eyes,.mouth,.lip,.lips){stroke:#36e58f!important;color:#36e58f!important;fill:#36e58f!important;filter:drop-shadow(0 0 7px #36e58f) drop-shadow(0 0 14px #36e58f)!important}
body.mode-thinking .antenna{animation:tsAntennaPulse .55s linear infinite}@keyframes tsAntennaPulse{0%{filter:drop-shadow(0 -10px 2px #ffd84a)}50%{filter:drop-shadow(0 8px 8px #ffd84a)}100%{filter:drop-shadow(0 18px 2px #ffd84a)}}

/* v10.1 authoritative visual state machine — exact SVG classes */
.face.thinking .headOutline{fill:#9aa2a8;stroke:#ffd84a;stroke-width:2.4;filter:drop-shadow(0 0 9px #ffd84a)}
.face.thinking .visor{stroke:#ffd84a}
.face.thinking .ear{fill:#81752f;stroke:#ffe47a}
.face.thinking .eye{fill:#ffd84a;filter:drop-shadow(0 0 8px #ffd84a)}
.face.thinking .lip{stroke:#ffd84a;filter:drop-shadow(0 0 7px #ffd84a)}
.face.thinking .antenna{stroke:#ffd84a;stroke-dasharray:7 7;animation:tsDataDown .55s linear infinite;filter:drop-shadow(0 0 5px #ffd84a)}
.face.thinking .antennaDot{fill:#ffd84a;filter:drop-shadow(0 0 7px #ffd84a)}
@keyframes tsDataDown{to{stroke-dashoffset:-28}}

/* Listening is BLUE. */
.face.listening .headOutline{fill:#83b8d7!important;stroke:#43d9ff!important;stroke-width:2.2;filter:drop-shadow(0 0 10px #27cfff)!important}
.face.listening .eye{fill:#49dcff!important;filter:drop-shadow(0 0 8px #27cfff)!important}
.face.listening .lip{stroke:#55e4ff!important;filter:drop-shadow(0 0 7px #27cfff)!important}
.face.listening .antenna,.face.listening .antennaDot{stroke:#49dcff!important;fill:#49dcff;filter:drop-shadow(0 0 6px #27cfff)}

/* Speaking is GREEN — face radius, eyes and lips glow green. */
.face.speaking .headOutline{fill:#93aaa0!important;stroke:#35e58e!important;stroke-width:2.8!important;filter:drop-shadow(0 0 7px #35e58e) drop-shadow(0 0 15px #35e58e)!important}
.face.speaking .visor{stroke:#35e58e!important}
.face.speaking .eye{fill:#43ee99!important;filter:drop-shadow(0 0 7px #35e58e) drop-shadow(0 0 13px #35e58e)!important}
.face.speaking .lip{stroke:#43ee99!important;filter:drop-shadow(0 0 7px #35e58e) drop-shadow(0 0 13px #35e58e)!important;animation:tsMouth .13s infinite alternate cubic-bezier(.2,.7,.3,1)!important}
.face.speaking .antenna{stroke:#35e58e!important}.face.speaking .antennaDot{fill:#35e58e!important}


/* v10.2 Cute Professional Face + behavioral animation */
.face{cursor:pointer;user-select:none}.bolt{fill:#7d878e;transition:.18s}.cheek{fill:#c97aa0;opacity:.78}.talkMouth,.happyEye{display:none}
.eye{transform-box:fill-box;transform-origin:center;animation:tsNaturalBlink 4.1s infinite}
.eyeR{animation-delay:.035s}@keyframes tsNaturalBlink{0%,43%,47%,91%,95%,100%{transform:scaleY(1)}44.2%,45.4%,92.2%,93.4%{transform:scaleY(.08)}}
.face.clicked .eye{display:none}.face.clicked .happyEye{display:block;fill:none;stroke:#7d878e;stroke-width:5;stroke-linecap:round}.face.clicked .smileMouth{stroke-width:4.5}
.face.listening .headOutline{fill:#9aa2a8!important;stroke:#43d9ff!important;filter:drop-shadow(0 0 8px #27cfff)!important}.face.listening .eye{fill:#49dcff!important}.face.listening .lip{stroke:#55e4ff!important}.face.listening .bolt{fill:#49dcff!important;filter:drop-shadow(0 0 5px #27cfff)}
.face.thinking .headOutline{fill:#9aa2a8!important;stroke:#ffd84a!important;filter:drop-shadow(0 0 8px #ffd84a)!important}.face.thinking .eye{fill:#ffd84a!important}.face.thinking .lip{stroke:#ffd84a!important}.face.thinking .bolt{fill:#ffd84a!important;animation:boltThink .55s infinite alternate;filter:drop-shadow(0 0 7px #ffd84a)}@keyframes boltThink{to{transform:translateY(3px);opacity:.45}}
.face.speaking .headOutline{fill:#9aa2a8!important;stroke:#35e58e!important;filter:drop-shadow(0 0 7px #35e58e) drop-shadow(0 0 15px #35e58e)!important}.face.speaking .eye{fill:#43ee99!important;filter:drop-shadow(0 0 8px #35e58e)!important}.face.speaking .smileMouth{display:none}.face.speaking .talkMouth{display:block;fill:#43ee99!important;filter:drop-shadow(0 0 8px #35e58e);transform-box:fill-box;transform-origin:center;animation:tsTalkCute .14s infinite alternate ease-in-out}.face.speaking .bolt{fill:#43ee99!important;filter:drop-shadow(0 0 7px #35e58e)}
@keyframes tsTalkCute{0%{transform:scale(.72,.45)}35%{transform:scale(1.08,1.45)}70%{transform:scale(.9,.8)}100%{transform:scale(1.18,1.8)}}
.face.speaking .cheek{opacity:1;filter:drop-shadow(0 0 4px #c97aa0)}
\n\n/* v10.4 UI polish: professional slate-navy surface + calmer speech animation */\nhtml,body{background:#182633!important}\n.app{background:#101c27!important;border-color:#405362!important;box-shadow:0 18px 55px rgba(4,12,20,.42)!important}\nheader,.statusbar,form{background:#101c27!important;border-color:#2a3b49!important}\n.hero{background:linear-gradient(180deg,#142433 0%,#101c27 100%)!important}\n.chat{background:#13212d!important}\n.msg.bot{background:#182a37!important;border-color:#38505f!important}\n.msg.user{background:#1c3a4e!important;border-color:#39708e!important}\ninput{background:#172735!important;border-color:#4b6b7f!important}\n/* Slower, softer mouth movement. One cycle is ~0.64 s instead of ~0.28 s. */\n.face.speaking .talkMouth{animation:tsTalkSoothing .32s infinite alternate ease-in-out!important}\n.face.speaking .lip{animation:tsMouthSoothing .32s infinite alternate ease-in-out!important}\n@keyframes tsTalkSoothing{0%{transform:scale(.86,.62)}45%{transform:scale(1.02,1.18)}100%{transform:scale(.94,.82)}}\n@keyframes tsMouthSoothing{from{transform:scaleY(.72) scaleX(.94)}to{transform:scaleY(1.25) scaleX(1.02)}}\n
/* v10.5 Speaking polish: ears join the green speaking state + slower soothing mouth */
.face.speaking .ear{
  fill:#258b69!important;
  stroke:#43ee99!important;
  stroke-width:2!important;
  filter:drop-shadow(0 0 7px #35e58e) drop-shadow(0 0 13px rgba(53,229,142,.75))!important;
}
.face.speaking .talkMouth{
  animation:tsTalkSoothingV105 .56s infinite alternate cubic-bezier(.45,.05,.55,.95)!important;
}
.face.speaking .lip{
  animation:tsMouthSoothingV105 .56s infinite alternate cubic-bezier(.45,.05,.55,.95)!important;
}
@keyframes tsTalkSoothingV105{
  0%{transform:scale(.94,.72)}
  50%{transform:scale(1.00,1.02)}
  100%{transform:scale(.97,.84)}
}
@keyframes tsMouthSoothingV105{
  0%{transform:scaleY(.82) scaleX(.97)}
  50%{transform:scaleY(1.12) scaleX(1.01)}
  100%{transform:scaleY(.90) scaleX(.99)}
}

/* TollSpark N10 Lively Edition - CSS-only scenic highway; no external network assets */
html,body{background:#04172b!important}
.app{position:relative!important;isolation:isolate;display:grid!important;grid-template-rows:74px minmax(190px,31vh) 62px minmax(120px,1fr) auto 68px 44px!important;background:linear-gradient(160deg,#04152b 0%,#06305a 42%,#031326 100%)!important;color:#f1f9ff!important}
header{z-index:2!important;background:linear-gradient(90deg,#07182e,#083a69)!important;border-bottom:1px solid #2072a3!important;padding:14px 22px!important}
.brand{font-size:clamp(22px,4.5vw,30px)!important;letter-spacing:1.1px!important}.brand span{color:#3cdbff!important}.brand small{font-size:9px!important;letter-spacing:2px!important;color:#bdddf4!important}.online{font-size:12px!important}.online i{width:10px;height:10px}
.hero{position:relative!important;overflow:hidden!important;background:radial-gradient(ellipse at 55% 45%,#159ad277,transparent 57%),linear-gradient(180deg,#13669b 0%,#1d6389 46%,#083052 70%,#041a32 100%)!important}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 37%,#ffffff19 38%,transparent 42%),radial-gradient(ellipse at 22% 55%,#fbd48b77,transparent 23%);pointer-events:none}
.road-scene{position:absolute;bottom:-26px;left:-10%;width:120%;height:42%;background:linear-gradient(180deg,#244c6b,#0a2138);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);opacity:.75;pointer-events:none}.road-lane{position:absolute;left:38%;top:12%;height:100%;width:3px;background:repeating-linear-gradient(180deg,#c3e8f4 0 14px,transparent 14px 26px);transform:rotate(13deg)}.road-lane.lane2{left:61%;transform:rotate(-13deg)}.toll-gate{position:absolute;right:18%;top:3px;font-size:9px;font-weight:800;color:#c7f9ff;letter-spacing:1px;border:1px solid #5bdbf3;padding:4px 9px;background:#0a425d}
.face{position:relative;z-index:1;width:min(330px,75vw)!important;height:min(250px,28vh)!important;filter:drop-shadow(0 9px 25px #003e64)!important}.bot-svg{height:100%!important}
.statusbar{z-index:2;justify-content:space-around!important;gap:8px!important;background:#041c35eb!important;border:1px solid #2274a0!important;border-radius:40px!important;margin:4px 16px!important;box-shadow:0 5px 22px #001e36!important}
.statusbar button{height:43px!important;width:43px!important;font-size:20px!important;border-color:#25b7ec!important;background:#052c4d!important;color:#48e3ff!important}.statusbar #stopSpeak{background:#bd233b!important;border-color:#ff7181!important;color:white!important;font-size:19px!important}.statusbar span{font-size:14px!important;color:#eef9ff!important}
.chat{z-index:1;background:linear-gradient(180deg,#031b33d9,#041528e8)!important;padding:16px!important;border:1px solid #17618c!important;border-radius:16px!important;margin:8px 12px!important;scrollbar-color:#3999ca transparent}
.msg{font-size:clamp(12px,2.7vw,15px)!important;line-height:1.55!important;padding:13px 15px!important;border-radius:18px!important;max-width:88%!important;margin-bottom:12px!important;box-shadow:0 4px 13px #00132360}.msg.bot{background:#0b3459!important;border-color:#286d9e!important}.msg.user{background:#135b9a!important;border-color:#3a9edc!important}
form{z-index:2;background:#031a33!important;border-top:0!important;padding:10px 16px!important;grid-template-columns:minmax(0,1fr) 52px!important;gap:9px!important}input{font-size:14px!important;background:#082a4b!important;border:1px solid #2ebbe7!important;color:#fff!important;min-height:46px!important}form button{background:linear-gradient(135deg,#18b2ee,#0873c7)!important;font-size:24px!important}
.bottom-nav{display:flex;align-items:center;justify-content:space-around;gap:8px;background:#03172d;border-top:1px solid #1b6a96;color:#a5d5f3;font-size:12px}.bottom-nav span{white-space:nowrap}
@media(max-height:720px){.app{grid-template-rows:58px 175px 53px minmax(100px,1fr) auto 57px 34px!important}.hero .face{height:174px!important}.bottom-nav{font-size:10px}}
@media(max-width:440px){.app{grid-template-rows:64px 195px 57px minmax(100px,1fr) auto 60px 35px!important}.brand{font-size:22px!important}.brand small{font-size:7px!important}.face{height:190px!important}.chat{margin:6px 8px!important}}

/* N11: high-fidelity reference artwork and functional chat/control overlays */
html,body{background:#00142a!important}
.app{width:100%!important;height:100dvh!important;max-width:none!important;grid-template-rows:76px minmax(220px,33vh) 64px minmax(100px,1fr) auto 68px 72px!important;background:#021b35!important;border:none!important;border-radius:0!important;overflow:hidden!important}
header{z-index:3!important;padding:12px 20px!important;background:linear-gradient(105deg,#021529,#053c76 67%,#05233f)!important;border:0!important}
.brand{font-size:clamp(22px,5vw,35px)!important;letter-spacing:1px!important;text-shadow:0 2px 8px #001c3b}.brand span{color:#1bd4ff!important}.brand small{font-size:clamp(7px,1.7vw,10px)!important;letter-spacing:3px!important;color:#e3f4ff!important}
.online{font-size:12px!important;background:#031b35!important;border:1px solid #1389cc!important;border-radius:30px!important;padding:10px 14px!important;color:#f5fbff!important}.online i{height:10px!important;width:10px!important}
.hero{position:relative!important;overflow:hidden!important;background:#084a83 url('/static/assets/tollspark_hero.jpg') center center/100% 100% no-repeat!important}
.hero:before,.hero:after,.road-scene{display:none!important}
.face{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;cursor:pointer!important;filter:none!important;background:transparent!important}
.face .bot-svg{opacity:0!important;pointer-events:none!important}
.face.listening{box-shadow:inset 0 -6px 30px #0bc8ff24!important}.face.thinking{box-shadow:inset 0 -6px 35px #ffe65d33!important}.face.speaking{box-shadow:inset 0 -6px 45px #2cff8b48!important}
.statusbar{position:relative!important;z-index:3!important;margin:-7px auto 4px!important;width:min(82%,460px)!important;height:64px!important;padding:7px 13px!important;border:1px solid #46caff!important;border-radius:50px!important;background:linear-gradient(100deg,#031c3c,#063f74 45%,#02162f)!important;box-shadow:0 0 18px #04adff77!important;justify-content:space-between!important}
.statusbar button{width:48px!important;height:48px!important;min-width:48px!important;border-radius:50%!important;font-size:21px!important;background:#033966!important;border:2px solid #13b9ff!important}.statusbar #stopSpeak{background:#f13248!important;border-color:#ff6773!important;color:white!important;box-shadow:0 0 12px #ff3c5880!important}.statusbar span{min-width:0!important;flex:1!important;font-size:17px!important;font-weight:600!important;color:#f5faff!important}
.chat{min-height:0!important;margin:9px 12px!important;padding:18px 13px!important;border-radius:19px!important;border:1px solid #207bb1!important;background:linear-gradient(160deg,#041b36,#00152a 75%)!important;box-shadow:inset 0 0 20px #001122!important;overflow:auto!important}
.msg{position:relative!important;max-width:83%!important;padding:14px 16px!important;font-size:clamp(12px,2.8vw,15px)!important;line-height:1.48!important;margin-bottom:14px!important;border-radius:18px!important;box-shadow:0 3px 15px #0005!important}
.msg.bot{margin-left:29px!important;background:linear-gradient(135deg,#133a64,#0a2848)!important;border:1px solid #2a5c88!important}
.msg.bot:before{content:'';position:absolute;left:-35px;top:3px;width:26px;height:26px;border-radius:50%;background:#092c4b url('/static/assets/tollspark_avatar.jpg') center/cover;border:1px solid #1c9dce;box-shadow:0 0 9px #16b6ff88}
.msg.user{margin-right:26px!important;background:linear-gradient(130deg,#1366ad,#164986)!important;border:1px solid #318be2!important}
.msg.user:after{content:'●';position:absolute;right:-29px;top:5px;width:22px;height:22px;border-radius:50%;background:#113e79;color:#c7eaff;text-align:center;line-height:20px;border:1px solid #7ea8ef}
form{margin:0 11px 4px!important;padding:6px!important;border:1px solid #22a8ed!important;border-radius:45px!important;background:#021d3b!important;grid-template-columns:1fr 51px!important;gap:6px!important;height:58px!important}
form input{font-size:14px!important;background:#07305b!important;border:1px solid #17649a!important;border-radius:36px!important}form button{font-size:26px!important;background:linear-gradient(140deg,#18b3f5,#0871ca)!important}
.bottom-nav{height:72px!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:space-around!important;padding:4px 9px!important;background:linear-gradient(#022445bf,#02192eaa),url('/static/assets/tollspark_footer.jpg') center bottom/100% 100% no-repeat!important;border-top:1px solid #39c4ff!important;box-shadow:0 -5px 18px #009fff55!important}
.bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0;color:#edf7ff;font-size:11px;text-shadow:0 1px 5px #000}.bottom-nav .nav-item+ .nav-item{border-left:1px solid #3885bd}.bottom-nav .nav-item b{font-size:23px;font-weight:500;color:#d5eaff}
@media(max-height:740px){.app{grid-template-rows:60px minmax(150px,29vh) 55px minmax(90px,1fr) auto 58px 54px!important}.statusbar{height:54px!important}.statusbar button{width:40px!important;height:40px!important;min-width:40px!important}.bottom-nav{height:54px!important}.bottom-nav .nav-item b{font-size:17px}.chat{margin:4px 8px!important;padding:10px!important}.msg{padding:9px 12px!important;margin-bottom:9px!important}form{height:52px!important}}

/* N10 reference art: functioning responsive layout, animated face layers */
.app{grid-template-rows:clamp(55px,9vh,76px) minmax(175px,34vh) clamp(53px,9vh,64px) minmax(100px,1fr) auto clamp(67px,10vh,80px)!important;min-width:0!important}
.bottom-nav{display:none!important}
.hero{min-height:0!important}
.art-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.art-motion .face-glow{fill:none;stroke:#28d5ff;stroke-width:3;opacity:0;filter:drop-shadow(0 0 12px #00bfff)}
.art-motion .blink-l,.art-motion .blink-r{fill:#031521;opacity:0;transform-box:fill-box;transform-origin:center;animation:artBlink 5.1s infinite}
.art-motion .blink-r{animation-delay:.045s}
@keyframes artBlink{0%,43%,46%,83%,86%,100%{ry:0;opacity:0}44%,45%,84%,85%{ry:32px;opacity:1}}
.art-motion .talk-cover{fill:#07101b;opacity:0}
.art-motion .talk-open{fill:#f357a2;stroke:#ffa2ce;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.art-motion .spark-motion{fill:#28dfff;opacity:.2;filter:drop-shadow(0 0 10px #00ccff);animation:artSpark 2.5s ease-in-out infinite}
@keyframes artSpark{0%,100%{opacity:.18;transform:translateY(0)}50%{opacity:.75;transform:translateY(-5px)}}
.face.listening .face-glow{opacity:.38;stroke:#2bd9ff;animation:artHalo 2.2s ease-in-out infinite}
.face.thinking .face-glow{opacity:.6;stroke:#ffcf42;animation:artHalo .85s ease-in-out infinite}
.face.speaking .face-glow{opacity:.72;stroke:#29ed94;animation:artHalo 1.3s ease-in-out infinite}
.face.thinking .spark-motion{fill:#ffe45d;opacity:1;animation:artSpark .5s ease-in-out infinite}
.face.speaking .spark-motion{fill:#45efa0;opacity:.9}
.face.speaking .talk-cover,.face.speaking .talk-open{opacity:1}
.face.speaking .talk-open{animation:artTalk .42s ease-in-out infinite alternate}
@keyframes artTalk{from{transform:scale(.82,.57)}to{transform:scale(1.04,1.35)}}
@keyframes artHalo{0%,100%{opacity:.25}50%{opacity:.78}}
.face.clicked .talk-open{opacity:1;animation:artTalk .32s alternate 3}
.statusbar{box-sizing:border-box!important;max-width:calc(100% - 22px)!important}
.chat{min-height:0!important;overflow-y:auto!important}
form{box-sizing:border-box!important;display:grid!important;align-items:center!important;grid-template-columns:minmax(0,1fr) 52px!important;width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important;margin:4px 10px 9px!important;height:58px!important;padding:5px!important;gap:6px!important}
form input{min-width:0!important;height:45px!important;padding:0 15px!important}
form button{height:45px!important;width:45px!important;justify-self:center!important;align-self:center!important}
@media(max-height:690px){.app{grid-template-rows:55px minmax(145px,31vh) 54px minmax(80px,1fr) auto 68px!important}.statusbar{height:53px!important}}
@media(prefers-reduced-motion:reduce){.art-motion *{animation:none!important}}

/* Approved TollSpark logo identity and scene */
.hero{background:#074478 url('/static/assets/tollspark_logo_hero.jpg') center center/100% 100% no-repeat!important;isolation:isolate}
.hero .face{display:flex!important;align-items:center!important;justify-content:center!important;inset:0!important}
.logo-stage{position:relative;width:min(46%,280px);aspect-ratio:1;display:grid;place-items:center;filter:drop-shadow(0 0 16px #04d5ff);transform:translateY(2%)}
.logo-stage .main-logo{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:3;animation:logoFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 0 13px #1ad4ff)}
.logo-orbit{position:absolute;inset:14% -12%;border:2px solid #34d9ff9c;border-radius:50%;transform:rotate(-24deg) scaleY(.42);box-shadow:0 0 16px #15ccff;animation:orbitSpin 7s linear infinite}
.orbit-b{border-color:#d43dff9c;transform:rotate(24deg) scaleY(.38);animation-duration:10s;animation-direction:reverse}
.logo-shimmer{position:absolute;inset:5%;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 39%,#ffffff28 49%,transparent 58%);animation:logoSweep 5s ease-in-out infinite;mix-blend-mode:screen}
.logo-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#a6faff;box-shadow:0 0 9px 4px #16c9ff;animation:particle 2.5s infinite alternate}.p1{left:-12%;top:42%}.p2{right:-8%;top:24%;animation-delay:.7s}.p3{bottom:3%;left:48%;animation-delay:1.4s}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.035)}}
@keyframes orbitSpin{0%{rotate:0deg}100%{rotate:360deg}}
@keyframes logoSweep{0%,30%{transform:translateX(-110%);opacity:0}45%{opacity:1}70%,100%{transform:translateX(110%);opacity:0}}
@keyframes particle{from{opacity:.2;transform:translateY(5px) scale(.6)}to{opacity:1;transform:translateY(-8px) scale(1.3)}}
.face.listening .logo-stage{filter:drop-shadow(0 0 19px #09d9ff)}
.face.thinking .logo-stage{filter:drop-shadow(0 0 22px #ffd34b)}
.face.thinking .main-logo{animation-duration:1.1s}
.face.speaking .logo-stage{filter:drop-shadow(0 0 26px #3bf4a1)}
.face.speaking .main-logo{animation:logoSpeak .58s ease-in-out infinite alternate}
@keyframes logoSpeak{from{transform:translateY(0) scale(.97)}to{transform:translateY(-7px) scale(1.075)}}
.msg.bot:before{background:#062c4b url('/static/assets/tollspark_logo_avatar.png') center/contain no-repeat!important}
@media(max-width:500px){.logo-stage{width:43%}}
@media(prefers-reduced-motion:reduce){.logo-stage *{animation:none!important}}

/* N10 production candidate: approved artwork, stationary independently pulsing shapes */
.app{grid-template-rows:clamp(57px,8vh,76px) minmax(190px,37vh) clamp(53px,8vh,64px) minmax(105px,1fr) auto clamp(65px,9vh,77px)!important}
.hero{background-image:url('/static/assets/tollspark_logo_hero.jpg')!important;background-position:center center!important;background-size:100% 100%!important}
.hero .face{position:absolute!important;inset:0!important;display:block!important;transform:none!important;overflow:hidden!important;box-shadow:none!important}
.logo-light{position:absolute;inset:0;pointer-events:none;background:url('/static/assets/tollspark_logo_hero.jpg') center center/100% 100% no-repeat;opacity:0;transform:none!important;will-change:opacity,filter;mix-blend-mode:screen}
.logo-magenta{clip-path:polygon(33% 22%,48% 18%,50% 43%,33% 65%);animation:magentaBreathe 3.1s ease-in-out infinite}
.logo-blue{clip-path:polygon(50% 8%,66% 10%,70% 57%,46% 49%);animation:blueBreathe 3.6s ease-in-out infinite .35s}
.logo-gold{clip-path:polygon(39% 48%,58% 44%,69% 78%,48% 88%);animation:goldBreathe 3.3s ease-in-out infinite .8s}
@keyframes magentaBreathe{0%,100%{opacity:.03;filter:brightness(1.05) saturate(1.12)}50%{opacity:.38;filter:brightness(1.75) saturate(1.65) drop-shadow(0 0 9px #ff38d5)}}
@keyframes blueBreathe{0%,100%{opacity:.04;filter:brightness(1.06) saturate(1.12)}50%{opacity:.42;filter:brightness(1.8) saturate(1.6) drop-shadow(0 0 9px #00d9ff)}}
@keyframes goldBreathe{0%,100%{opacity:.04;filter:brightness(1.06) saturate(1.12)}50%{opacity:.4;filter:brightness(1.7) saturate(1.6) drop-shadow(0 0 9px #ffc247)}}
.face.thinking .logo-light{animation-duration:1.25s!important}
.face.speaking .logo-light{animation-duration:.9s!important}
.face.listening .logo-light{animation-duration:2.7s!important}
.face .logo-stage,.face .main-logo{display:none!important}
.statusbar{box-sizing:border-box!important;max-width:calc(100% - 30px)!important;min-width:0!important}
.chat{min-height:0!important}
.msg.bot:before{background:#092c4b url('/static/assets/tollspark_logo_avatar.png') center/contain no-repeat!important}
form{box-sizing:border-box!important;width:calc(100% - 22px)!important;max-width:calc(100% - 22px)!important;margin:5px 11px 10px!important;padding:5px!important;grid-template-columns:minmax(0,1fr) 50px!important;align-items:center!important}
form input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
form button{width:46px!important;height:46px!important;justify-self:center!important}
@media(max-height:680px){.app{grid-template-rows:57px minmax(155px,31vh) 53px minmax(90px,1fr) auto 62px!important}.statusbar{height:52px!important}.statusbar button{height:39px!important;width:39px!important;min-width:39px!important}}
@media(prefers-reduced-motion:reduce){.logo-light{animation:none!important;opacity:0!important}}

/* N10 v115: ONE hero photograph only. Pure light overlays, no duplicated images. */
.logo-light{display:none!important}
.hero{background-image:url('/static/assets/tollspark_logo_hero.jpg')!important}
.hero .face{pointer-events:none!important}
.shape-glow{position:absolute;inset:0;pointer-events:none!important;z-index:2;opacity:0;transform:none!important;will-change:opacity;mix-blend-mode:screen;background-repeat:no-repeat;background-size:100% 100%;}
/* Polygons sit on top of the three colored shapes in the original 1024x480 hero. */
.magenta-glow{background-image:radial-gradient(ellipse at 41% 47%,rgba(255,45,208,.55),transparent 27%);clip-path:polygon(31% 30%,48% 23%,53% 60%,34% 78%);animation:tsMagentaLight 3.4s ease-in-out infinite}
.blue-glow{background-image:radial-gradient(ellipse at 58% 34%,rgba(16,225,255,.58),transparent 28%);clip-path:polygon(49% 5%,64% 7%,72% 53%,49% 57%);animation:tsBlueLight 3.9s ease-in-out infinite .5s}
.gold-glow{background-image:radial-gradient(ellipse at 55% 70%,rgba(255,192,39,.6),transparent 26%);clip-path:polygon(42% 55%,58% 44%,71% 84%,47% 92%);animation:tsGoldLight 3.6s ease-in-out infinite 1s}
@keyframes tsMagentaLight{0%,100%{opacity:.04}50%{opacity:.92}}
@keyframes tsBlueLight{0%,100%{opacity:.04}50%{opacity:.85}}
@keyframes tsGoldLight{0%,100%{opacity:.04}50%{opacity:.95}}
.face.thinking .shape-glow{animation-duration:1.9s!important}
.face.speaking .shape-glow{animation-duration:1.35s!important}
.face.listening .shape-glow{animation-duration:3.2s!important}
@media(prefers-reduced-motion:reduce){.shape-glow{animation:none!important;opacity:.25!important}}

/* v116: Remove every secondary shape rendering; the artwork already contains the logo. */
.logo-light,.shape-glow,.logo-stage,.main-logo,.logo-orbit,.logo-shimmer,.logo-particle{display:none!important;animation:none!important}
.hero .face{background:transparent!important;filter:none!important;box-shadow:none!important}
/* More compact cinematic scene: shrink the hero section while retaining natural aspect ratio. */
.hero{background-position:center center!important;background-size:cover!important;min-height:180px!important;max-height:255px!important}
@media(max-height:760px){.hero{max-height:215px!important;min-height:165px!important}}

/* v117 compact scene: dedicated clipped banner, no control/art overlap */
.app{grid-template-rows:clamp(58px,9vh,78px) clamp(120px,22vh,175px) clamp(55px,8vh,66px) minmax(100px,1fr) auto clamp(65px,9vh,77px)!important}
.hero{position:relative!important;overflow:hidden!important;min-height:0!important;max-height:none!important;background:#062244 url('/static/assets/tollspark_compact_scene.jpg') center 57% / cover no-repeat!important;isolation:isolate!important;box-shadow:none!important;border:0!important}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:17px;background:linear-gradient(transparent,#042448);pointer-events:none;z-index:5}
.hero .face,.hero .road-scene,.hero .shape-glow,.hero .logo-light,.hero .logo-stage{display:none!important}
.statusbar{position:relative!important;z-index:6!important;margin:0!important;width:100%!important;max-width:100%!important;min-height:0!important;box-shadow:none!important;background:#032141!important;border-top:1px solid #1386c6!important;overflow:hidden!important}
.statusbar::before,.statusbar::after{display:none!important}
.statusbar button{position:relative!important;z-index:7!important;flex-shrink:0!important}
@media(max-height:700px){.app{grid-template-rows:56px clamp(105px,20vh,150px) 54px minmax(75px,1fr) auto 65px!important}}

/* v118: reveal the holographic ring fully before the listening controls.
   Hero and status are separate grid rows: no negative margins or overlays. */
.app{grid-template-rows:clamp(58px,9vh,78px) clamp(180px,29vh,248px) clamp(55px,8vh,66px) minmax(100px,1fr) auto clamp(65px,9vh,77px)!important}
.hero{background-position:center center!important;background-size:100% 100%!important;overflow:hidden!important}
.hero::after{height:7px!important;background:linear-gradient(transparent,rgba(4,36,72,.3))!important}
.statusbar{margin:0!important;transform:none!important;top:auto!important;bottom:auto!important;align-self:stretch!important}
@media(max-height:700px){.app{grid-template-rows:56px clamp(170px,27vh,210px) 54px minmax(75px,1fr) auto 65px!important}}


/* v119: Single-photo hologram illumination. NO duplicated images or logo movement. */
.hero{--fx:#16cfff;--fx-soft:rgba(16,204,255,.45);position:relative!important;isolation:isolate!important}
.hero::before{content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;opacity:.55!important;transform:none!important;background:
 radial-gradient(ellipse 12% 23% at 47% 64%,rgba(255,30,188,.44),transparent 95%),
 radial-gradient(ellipse 12% 24% at 55% 61%,rgba(0,198,255,.45),transparent 95%),
 radial-gradient(ellipse 13% 15% at 53% 81%,rgba(255,174,32,.38),transparent 95%)!important;
 animation:tsColorBreathe 4.6s ease-in-out infinite!important;mix-blend-mode:screen!important}
/* Only light is animated. Original logo and road image remain a single fixed background. */
.hero::after{content:""!important;position:absolute!important;left:29%!important;right:29%!important;bottom:0!important;height:21%!important;z-index:3!important;pointer-events:none!important;border-radius:50%!important;background:radial-gradient(ellipse at center,rgba(33,224,255,.26) 0%,rgba(11,167,255,.10) 45%,transparent 72%)!important;box-shadow:inset 0 0 14px var(--fx-soft),0 0 14px var(--fx-soft)!important;opacity:.55!important;transform:none!important;animation:tsRingBreath 3.8s ease-in-out infinite!important}
@keyframes tsColorBreathe{0%,100%{opacity:.22;filter:brightness(.85)}35%{opacity:.64;filter:brightness(1.22)}65%{opacity:.37;filter:brightness(1.04)}}
@keyframes tsRingBreath{0%,100%{opacity:.28;box-shadow:inset 0 0 8px var(--fx-soft),0 0 8px var(--fx-soft)}50%{opacity:.83;box-shadow:inset 0 0 22px var(--fx-soft),0 0 20px var(--fx-soft)}}
/* Listening: cool-blue, slow radar-like breathing */
.app:has(#botFace.listening) .hero{--fx:#00d9ff;--fx-soft:rgba(0,211,255,.5)}
.app:has(#botFace.listening) .hero::before{animation-duration:4.1s!important}
.app:has(#botFace.listening) .hero::after{animation-duration:3.1s!important}
/* Thinking: amber signal, quicker but steady cadence */
.app:has(#botFace.thinking) .hero{--fx:#ffd04d;--fx-soft:rgba(255,203,51,.48)}
.app:has(#botFace.thinking) .hero::before{animation-duration:1.9s!important;filter:hue-rotate(-22deg)!important}
.app:has(#botFace.thinking) .hero::after{animation-duration:1.65s!important}
/* Speaking: green responsive illumination */
.app:has(#botFace.speaking) .hero{--fx:#35f6a2;--fx-soft:rgba(45,238,151,.56)}
.app:has(#botFace.speaking) .hero::before{animation-duration:1.05s!important}
.app:has(#botFace.speaking) .hero::after{animation-duration:.95s!important}
/* Muted: near-still low-energy scene, overrides all other states */
.app:has(#mic.off) .hero::before{animation:none!important;opacity:.10!important;filter:grayscale(.65)!important}
.app:has(#mic.off) .hero::after{animation:none!important;opacity:.12!important;box-shadow:none!important}
.app:has(#mic.off) .hero{--fx-soft:rgba(105,129,153,.22)}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none!important;opacity:.2!important}}

/* v120: Genuine three separately extracted RGBA shape components.
   Base scene has the original solid shapes removed. No second photo or ghost. */
.hero{background-image:url('/static/assets/tollspark_scene_no_shapes.png')!important;background-size:100% 100%!important}
.hero::before,.hero::after{display:none!important;animation:none!important}
.ts-logo-pieces{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ts-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:none!important;opacity:1;pointer-events:none;will-change:filter;backface-visibility:hidden}
.ts-piece-magenta{animation:tsPieceMagenta 4.2s ease-in-out infinite}
.ts-piece-blue{animation:tsPieceBlue 4.8s ease-in-out infinite .65s}
.ts-piece-gold{animation:tsPieceGold 4.5s ease-in-out infinite 1.15s}
@keyframes tsPieceMagenta{0%,100%{filter:brightness(.93) drop-shadow(0 0 2px rgba(255,40,205,.30))}50%{filter:brightness(1.24) drop-shadow(0 0 12px rgba(255,30,190,.85))}}
@keyframes tsPieceBlue{0%,100%{filter:brightness(.94) drop-shadow(0 0 2px rgba(0,205,255,.30))}50%{filter:brightness(1.25) drop-shadow(0 0 12px rgba(15,206,255,.85))}}
@keyframes tsPieceGold{0%,100%{filter:brightness(.94) drop-shadow(0 0 2px rgba(255,180,35,.30))}50%{filter:brightness(1.25) drop-shadow(0 0 12px rgba(255,180,35,.85))}}
/* One single cyan holographic ring light, confined below the three pieces. */
.ts-logo-pieces::after{content:'';position:absolute;left:37%;width:26%;bottom:5%;height:8%;border-radius:50%;box-shadow:0 0 12px rgba(10,200,255,.28),0 0 20px rgba(10,200,255,.18);animation:tsOrbitPulse 3.8s ease-in-out infinite;pointer-events:none}
@keyframes tsOrbitPulse{0%,100%{opacity:.3}50%{opacity:1}}
.app:has(#botFace.thinking) .ts-piece{animation-duration:1.9s!important}
.app:has(#botFace.speaking) .ts-piece{animation-duration:1.35s!important}
.app:has(#botFace.speaking) .ts-logo-pieces::after{animation-duration:1.3s!important;box-shadow:0 0 17px rgba(53,246,162,.4)}
.app:has(#botFace.thinking) .ts-logo-pieces::after{animation-duration:1.7s!important;box-shadow:0 0 17px rgba(255,208,77,.4)}
.app:has(#mic.off) .ts-piece,.app:has(#mic.off) .ts-logo-pieces::after{animation:none!important;filter:brightness(.7) saturate(.7)!important;opacity:.8!important}
@media(prefers-reduced-motion:reduce){.ts-piece,.ts-logo-pieces::after{animation:none!important}}

/* v121: Mode-driven, independent geometry animation; no duplicated bitmap. */
.ts-logo-pieces::after{display:none!important}
.ts-logo-pieces{overflow:visible!important;isolation:isolate}
.ts-piece{transform:none;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;}
/* Stretch from each shape's own centroid, not from the window center. */
.ts-piece-magenta{transform-origin:43% 60%;animation:tsQuietPink 4.2s ease-in-out infinite!important}
.ts-piece-blue{transform-origin:52% 47%;animation:tsQuietBlue 4.8s ease-in-out infinite!important}
.ts-piece-gold{transform-origin:51% 73%;animation:tsQuietGold 4.5s ease-in-out infinite!important}
@keyframes tsQuietPink{0%,100%{filter:brightness(.96) drop-shadow(0 0 2px #e936bd)}50%{filter:brightness(1.15) drop-shadow(0 0 8px #ed30b7)}}
@keyframes tsQuietBlue{0%,100%{filter:brightness(.96) drop-shadow(0 0 2px #00d5ff)}50%{filter:brightness(1.16) drop-shadow(0 0 9px #18d9ff)}}
@keyframes tsQuietGold{0%,100%{filter:brightness(.96) drop-shadow(0 0 2px #f6ac26)}50%{filter:brightness(1.14) drop-shadow(0 0 8px #ffc04b)}}
/* A single stretch pulse per spoken syllable-like beat. Offsets avoid robotic unison. */
@keyframes tsTalkPink{0%,100%{transform:scale(1);filter:brightness(1.02) drop-shadow(0 0 4px #ff3bd3)}38%{transform:scale(1.075,1.025);filter:brightness(1.32) drop-shadow(0 0 12px #ff3bd3)}70%{transform:scale(.99,1.005)}}
@keyframes tsTalkBlue{0%,100%{transform:scale(1);filter:brightness(1.02) drop-shadow(0 0 4px #17ddff)}45%{transform:scale(1.055,1.065);filter:brightness(1.35) drop-shadow(0 0 13px #17ddff)}75%{transform:scale(1.005,.99)}}
@keyframes tsTalkGold{0%,100%{transform:scale(1);filter:brightness(1.03) drop-shadow(0 0 4px #ffc348)}42%{transform:scale(1.065,1.04);filter:brightness(1.32) drop-shadow(0 0 12px #ffc348)}72%{transform:scale(.995,1)}}
.app:has(#botFace.speaking) .ts-piece-magenta{animation:tsTalkPink .88s ease-in-out infinite!important}
.app:has(#botFace.speaking) .ts-piece-blue{animation:tsTalkBlue .76s ease-in-out infinite -.18s!important}
.app:has(#botFace.speaking) .ts-piece-gold{animation:tsTalkGold 1.02s ease-in-out infinite -.31s!important}
/* Rings sit in the bottom part of the hero and do not cover the controls. */
.ts-hologram{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.ts-ring{position:absolute;left:50%;height:7%;border:1.4px solid rgba(49,216,255,.85);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 6px #0ce1ff,inset 0 0 6px #0ce1ff;opacity:.25;will-change:opacity,filter}
.ts-ring-back{width:19%;bottom:12%}
.ts-ring-middle{width:26%;bottom:8%}
.ts-ring-front{width:35%;bottom:4%}
@keyframes tsRingSequence{0%,15%,100%{opacity:.17;filter:brightness(.7)}35%,53%{opacity:1;filter:brightness(1.75)}75%{opacity:.38;filter:brightness(1)}}
/* Speaking: rear ring lights first, then middle, then foreground. */
.app:has(#botFace.speaking) .ts-ring{animation:tsRingSequence 1.65s linear infinite!important;border-color:#59ffcb;box-shadow:0 0 9px #26f8b2,inset 0 0 6px #26f8b2}
.app:has(#botFace.speaking) .ts-ring-back{animation-delay:0s!important}
.app:has(#botFace.speaking) .ts-ring-middle{animation-delay:.32s!important}
.app:has(#botFace.speaking) .ts-ring-front{animation-delay:.64s!important}
/* Listening: foreground lights first, traveling inward to the logo. */
.app:has(#botFace.listening) .ts-ring{animation:tsRingSequence 2.7s linear infinite!important}
.app:has(#botFace.listening) .ts-ring-front{animation-delay:0s!important}
.app:has(#botFace.listening) .ts-ring-middle{animation-delay:.5s!important}
.app:has(#botFace.listening) .ts-ring-back{animation-delay:1s!important}
/* Thinking: a revolving dashed light arc centered around the emblem. */
.ts-thinking-orbit{display:none;position:absolute;left:50%;top:53%;width:26%;height:48%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid transparent;border-top-color:#3be7ff;border-right-color:rgba(60,225,255,.5);box-shadow:0 0 10px rgba(23,211,255,.35);pointer-events:none}
@keyframes tsThinkingRevolve{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.app:has(#botFace.thinking) .ts-thinking-orbit{display:block;animation:tsThinkingRevolve 1.8s linear infinite}
.app:has(#botFace.thinking) .ts-ring{opacity:.26;border-color:#ffd45d;box-shadow:0 0 5px #f5bb44}
.app:has(#botFace.thinking) .ts-piece{animation-duration:2.4s!important}
/* Muted: still, subdued visual; speaking takes precedence for output animation. */
.app:has(#mic.off):not(:has(#botFace.speaking)) .ts-piece{animation:none!important;transform:none!important;filter:brightness(.72) saturate(.65)!important}
.app:has(#mic.off):not(:has(#botFace.speaking)) .ts-ring{animation:none!important;opacity:.12!important;box-shadow:none!important}
.app:has(#mic.off):not(:has(#botFace.speaking)) .ts-thinking-orbit{display:none!important}
@media(prefers-reduced-motion:reduce){.ts-piece,.ts-ring,.ts-thinking-orbit{animation:none!important;transform:none!important}.ts-thinking-orbit{display:none!important}}

/* v122: keep the sequential ring illumination BELOW the colored emblem.
   All ring elements are confined to a shallow bottom band; no ring may
   rise into the three transparent logo pieces. */
.ts-hologram{position:absolute!important;inset:0!important;overflow:hidden!important;z-index:5!important;pointer-events:none!important}
.ts-ring{height:2.8%!important;max-height:7px!important;box-sizing:border-box!important;border-width:1px!important;filter:none;transform:translateX(-50%)!important}
.ts-ring-back{width:18%!important;bottom:6.2%!important}
.ts-ring-middle{width:25%!important;bottom:3.6%!important}
.ts-ring-front{width:33%!important;bottom:1%!important}
/* The three ring centers now lie in the lower 9% of the scene.
   Preserve their original staggered animation direction by state. */
@media(max-height:700px){.ts-ring{height:2.3%!important}}

/* v123: Replace the tall phantom Thinking oval. The baked-in scene remains
   stationary. A slim traveling highlight hugs the emblem's existing aura. */
.ts-thinking-orbit{display:none!important;box-shadow:none!important;border:0!important;}
.app:has(#botFace.thinking) .ts-thinking-orbit{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:73%!important;
  width:14%!important;
  height:32%!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:50%!important;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,rgba(45,220,255,.12) 295deg,#d2fbff 326deg,rgba(45,220,255,.25) 346deg,transparent 360deg)!important;
  -webkit-mask:radial-gradient(ellipse closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 101%)!important;
  mask:radial-gradient(ellipse closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 100%,transparent 101%)!important;
  filter:drop-shadow(0 0 3px rgba(40,221,255,.7))!important;
  animation:tsThinkingRevolve 2.8s linear infinite!important;
  pointer-events:none!important;
  z-index:5!important;
}
.app:has(#mic.off):not(:has(#botFace.speaking)) .ts-thinking-orbit{display:none!important}
@media(prefers-reduced-motion:reduce){.app:has(#botFace.thinking) .ts-thinking-orbit{animation:none!important;opacity:.3!important}}

/* Compact review table: no horizontal scrolling, three responsive columns. */
.ts-review-table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:hidden;margin:10px 0;box-sizing:border-box}
.ts-review-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:0;font-size:clamp(10px,1.65vw,14px);text-align:left}
.ts-review-table th,.ts-review-table td{padding:6px 7px;border:1px solid rgba(150,205,255,.32);white-space:normal;overflow-wrap:anywhere;word-break:normal;vertical-align:middle;line-height:1.3}
.ts-review-table th:nth-child(1),.ts-review-table td:nth-child(1){width:42%}
.ts-review-table th:nth-child(2),.ts-review-table td:nth-child(2){width:36%}
.ts-review-table th:nth-child(3),.ts-review-table td:nth-child(3){width:22%;text-align:right}
.ts-review-table th{background:rgba(25,120,200,.3);font-weight:650}
.ts-review-table tr:nth-child(even){background:rgba(255,255,255,.04)}
@media(max-width:500px){.ts-review-table{font-size:11px}.ts-review-table th,.ts-review-table td{padding:5px 4px}}


/* ---------- live dispute & refund progress ---------- */
.msg.ts-run{white-space:normal!important;max-width:94%!important;width:94%}
.ts-run-log{max-height:150px;margin-top:6px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding-right:2px;scroll-behavior:smooth}
.ts-run-line{position:relative;padding:2px 0 2px 20px;color:#cfe4f7;font-size:.92em;line-height:1.35;animation:tsRunIn .28s ease-out}
.ts-run-line::before{content:'';position:absolute;left:3px;top:.55em;width:9px;height:9px;border-radius:50%;background:#5fb3ff;opacity:.55}
.ts-run-line.active::before{background:transparent;border:2px solid #5fb3ff;border-top-color:transparent;width:7px;height:7px;opacity:1;animation:tsRunSpin .8s linear infinite}
.ts-run-line.ok::before{background:#3ccf8e;opacity:1}
.ts-run-line.warn::before{background:#f5b53a;opacity:1}
.ts-run-line.fail::before{background:#ff6b6b;opacity:1}
.ts-run-line.item{padding-left:0;margin-top:6px;font-weight:650;color:#fff}
.ts-run-line.item::before,.ts-run-line.phase::before{display:none}
.ts-run-line.phase{padding-left:0;margin-top:4px;color:#9fd0ff;font-weight:600}
.ts-run.ts-run-done .ts-run-log{max-height:120px;opacity:.78}
.ts-review-table td.ts-cell-new{animation:tsCellNew 1.2s ease-out}
@keyframes tsRunIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes tsRunSpin{to{transform:rotate(360deg)}}
@keyframes tsCellNew{0%{background:rgba(95,179,255,.38)}100%{background:transparent}}
/* five-column dispute table: Transaction | Invoice | Dispute type | Dispute ID | Refund */
.ts-review-table.ts-cols-5 th,.ts-review-table.ts-cols-5 td{width:auto!important;text-align:left!important}
.ts-review-table.ts-cols-5 th:nth-child(1),.ts-review-table.ts-cols-5 td:nth-child(1){width:31%!important}
.ts-review-table.ts-cols-5 th:nth-child(2),.ts-review-table.ts-cols-5 td:nth-child(2){width:17%!important}
.ts-review-table.ts-cols-5 th:nth-child(3),.ts-review-table.ts-cols-5 td:nth-child(3){width:17%!important}
.ts-review-table.ts-cols-5 th:nth-child(4),.ts-review-table.ts-cols-5 td:nth-child(4){width:16%!important}
.ts-review-table.ts-cols-5 th:nth-child(5),.ts-review-table.ts-cols-5 td:nth-child(5){width:19%!important}
@media(max-width:500px){.ts-review-table.ts-cols-5{font-size:10px}.ts-review-table.ts-cols-5 th,.ts-review-table.ts-cols-5 td{padding:4px 3px}}
@media (prefers-reduced-motion:reduce){.ts-run-line,.ts-review-table td.ts-cell-new{animation:none}.ts-run-line.active::before{animation:none}}
/* phones: each transaction becomes a compact card (label · value) instead of 5 narrow columns */
@media(max-width:600px){
 .ts-review-table.ts-cols-5,.ts-review-table.ts-cols-5 tbody{display:block;border:0}
 .ts-review-table.ts-cols-5 tr:first-child{display:none}
 .ts-review-table.ts-cols-5 tr{display:block;margin:0 0 8px;border:1px solid rgba(150,205,255,.32);border-radius:10px;padding:6px 9px;background:rgba(255,255,255,.035)!important}
 .ts-review-table.ts-cols-5 td:nth-child(n){display:flex!important;justify-content:space-between;gap:12px;width:100%!important;box-sizing:border-box;border:0!important;padding:2px 0!important;font-size:12px;overflow-wrap:normal;word-break:normal}
 .ts-review-table.ts-cols-5 td::before{content:attr(data-label);color:#9fc6e8;flex:0 0 auto;font-weight:500}
 .ts-review-table.ts-cols-5 td:not(:first-child){text-align:right!important}
 .ts-review-table.ts-cols-5 td:first-child{display:block!important;font-weight:650;color:#fff;padding-bottom:4px!important;margin-bottom:2px;border-bottom:1px solid rgba(150,205,255,.18)!important}
 .ts-review-table.ts-cols-5 td:first-child::before{display:none}
}

/* Thinking-mode filler: a soft, temporary line while TollSpark prepares the answer */
.msg.bot.ts-filler{opacity:.88;font-style:italic;display:flex;align-items:center;gap:10px;animation:tsFillerIn .28s ease-out}
.msg.bot.ts-filler .ts-dots{display:inline-flex;gap:4px;font-style:normal}
.msg.bot.ts-filler .ts-dots b{width:6px;height:6px;border-radius:50%;background:#8fd8ff;opacity:.35;animation:tsDot 1.1s infinite ease-in-out}
.msg.bot.ts-filler .ts-dots b:nth-child(2){animation-delay:.18s}
.msg.bot.ts-filler .ts-dots b:nth-child(3){animation-delay:.36s}
@keyframes tsDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes tsFillerIn{from{opacity:0;transform:translateY(4px)}to{opacity:.88;transform:none}}
@media (prefers-reduced-motion:reduce){.msg.bot.ts-filler,.msg.bot.ts-filler .ts-dots b{animation:none}}