/* AIStar — living robot: the emerald stars burn like flames.
   Positions are percentages of the robot image (1024×1536); .robot-wrap keeps
   its 2:3 ratio, so every light stays on its star at every screen size. */
.robot-wrap{aspect-ratio:2/3;height:auto;max-height:100%;animation:robot-float 9s ease-in-out infinite}
.robot{animation:robot-aura 6s ease-in-out infinite}

/* --- the two stars: crown and chest --------------------------------------- */
.robot-wrap .spark{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,#2dffb44d 0,#00f59a26 38%,transparent 66%);box-shadow:none;filter:none;border-radius:50%;opacity:1;mix-blend-mode:screen;animation:flame-bloom var(--flicker,2.7s) ease-in-out infinite;animation-delay:var(--delay,0s);pointer-events:none}
.robot-wrap .spark.crown{--x:62.5%;--y:12.5%;--w:18%}
.robot-wrap .spark.chest{--x:64.6%;--y:59.6%;--w:33%}
/* white-hot core and emerald halo, flickering irregularly like a flame */
.robot-wrap .spark:before{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 52%,#fff 0,#d4fff0 8%,#5cffc2e6 19%,#14ffa98c 36%,#00f59a33 52%,transparent 70%);
  animation:flame-flicker var(--flicker,2.7s) linear infinite;animation-delay:var(--delay,0s);will-change:opacity,transform}
/* the tongue of fire rising from the star */
.robot-wrap .spark:after{content:'';position:absolute;left:30%;right:30%;bottom:46%;height:62%;
  background:radial-gradient(ellipse 50% 70% at 50% 100%,#e9fff5f0 0,#6dffc8c0 30%,#12f5a060 58%,transparent 76%);
  border-radius:50% 50% 45% 45%/72% 72% 28% 28%;clip-path:none;inset:auto 30% 46% 30%;filter:blur(1.5px);
  transform-origin:50% 100%;animation:flame-tongue var(--tongue,1.9s) ease-in-out infinite;animation-delay:var(--delay,0s)}
/* four-point light rays across the star */
.robot-wrap .spark b{position:absolute;inset:-35%;display:block;
  background:linear-gradient(90deg,transparent 8%,#c8ffe8aa 50%,transparent 92%) center/100% 2px no-repeat,
             linear-gradient(0deg,transparent 8%,#c8ffe8aa 50%,transparent 92%) center/2px 100% no-repeat;
  animation:flare 4.6s ease-in-out infinite;animation-delay:var(--delay,0s)}
.robot-wrap .spark.chest{--flicker:3.1s;--tongue:2.3s;--delay:-1.3s}
.robot-wrap .spark.chest b{inset:-25%}

/* --- eyes and the shoulder crystals: smaller, quicker glints -------------- */
.glint{position:absolute;left:var(--x);top:var(--y);width:var(--w,3.2%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,#effff8 0,#59ffc4b0 30%,transparent 70%);mix-blend-mode:screen;pointer-events:none;
  opacity:.25;animation:glint var(--t,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
.glint.eye-l{--x:53.9%;--y:21.6%;--w:2.6%;--t:6s;--d:-.4s}
.glint.eye-r{--x:66.3%;--y:22.4%;--w:2.6%;--t:6s;--d:-.4s}
.glint.g1{--x:4.7%;--y:55.2%;--w:5%;--t:4.4s;--d:-1s}
.glint.g2{--x:23.4%;--y:44.3%;--w:4%;--t:5.6s;--d:-3.2s}
.glint.g3{--x:40.6%;--y:45.3%;--w:3.6%;--t:4.9s;--d:-2.1s}
.glint.g4{--x:83.6%;--y:54.2%;--w:4%;--t:5.2s;--d:-4s}
.glint.g5{--x:94.5%;--y:59.4%;--w:4.4%;--t:6.3s;--d:-.2s}

/* --- embers drifting up from both stars ----------------------------------- */
.ember{position:absolute;left:var(--x);top:var(--y);width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:#d9fff0;box-shadow:0 0 6px 2px #19ffae99;opacity:0;pointer-events:none;
  animation:ember-rise var(--t,3.4s) ease-out infinite;animation-delay:var(--d,0s)}
.ember.e1{--x:61%;--y:10%;--t:3.2s;--d:-.3s;--dx:-10px}
.ember.e2{--x:64%;--y:11%;--t:3.8s;--d:-1.6s;--dx:12px;--s:3px}
.ember.e3{--x:62.5%;--y:9%;--t:2.9s;--d:-2.4s;--dx:4px}
.ember.e4{--x:60%;--y:12%;--t:4.2s;--d:-3.1s;--dx:-16px;--s:3px}
.ember.e5{--x:63%;--y:57%;--t:3.6s;--d:-.8s;--dx:-14px;--s:5px}
.ember.e6{--x:66%;--y:58%;--t:4.1s;--d:-2s;--dx:16px}
.ember.e7{--x:64.5%;--y:55%;--t:3.1s;--d:-2.9s;--dx:6px;--s:3px}
.ember.e8{--x:62%;--y:59%;--t:4.6s;--d:-3.8s;--dx:-20px}
.ember.e9{--x:67%;--y:56%;--t:3.9s;--d:-1.2s;--dx:22px;--s:3px}
.ember.e10{--x:64%;--y:60%;--t:5s;--d:-4.4s;--dx:-4px;--s:5px}

@keyframes flame-flicker{
  0%{opacity:.45;transform:scale(.86)}6%{opacity:1;transform:scale(1.18)}11%{opacity:.6;transform:scale(.95)}
  17%{opacity:1;transform:scale(1.3)}25%{opacity:.42;transform:scale(.88)}33%{opacity:.9;transform:scale(1.12)}
  39%{opacity:.55;transform:scale(.94)}48%{opacity:1;transform:scale(1.34)}56%{opacity:.48;transform:scale(.9)}
  64%{opacity:.95;transform:scale(1.22)}72%{opacity:.6;transform:scale(.98)}81%{opacity:1;transform:scale(1.27)}
  90%{opacity:.5;transform:scale(.9)}100%{opacity:.45;transform:scale(.86)}}
@keyframes flame-bloom{0%,100%{opacity:.55}20%{opacity:1}35%{opacity:.6}50%{opacity:1}62%{opacity:.7}82%{opacity:1}}
@keyframes flame-tongue{
  0%,100%{transform:skewX(-6deg) scaleY(.85) scaleX(1);opacity:.75}
  25%{transform:skewX(7deg) scaleY(1.18) scaleX(.9);opacity:1}
  50%{transform:skewX(-3deg) scaleY(.98) scaleX(1.05);opacity:.82}
  75%{transform:skewX(9deg) scaleY(1.28) scaleX(.86);opacity:.95}}
@keyframes flare{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}45%{opacity:.95;transform:scale(1.08) rotate(4deg)}60%{opacity:.6;transform:scale(.95) rotate(2deg)}}
@keyframes glint{0%,100%{opacity:.18;transform:scale(.7)}45%{opacity:.5;transform:scale(1)}52%{opacity:.95;transform:scale(1.35)}60%{opacity:.45;transform:scale(1)}}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:.95}70%{opacity:.5}100%{opacity:0;transform:translate(var(--dx,0),-70px) scale(.3)}}
@keyframes robot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes robot-aura{0%,100%{filter:drop-shadow(0 0 10px #0fea9c22) brightness(1)}50%{filter:drop-shadow(0 0 26px #0fea9c4d) brightness(1.06)}}

/* Typing: the scene calms down; the flames dim but keep a quiet glow. */
.composing .robot-wrap,.composing .robot,.composing .robot-wrap .spark,.composing .spark:before,.composing .spark:after,.composing .spark b,.composing .glint{animation-play-state:paused!important}
.composing .robot-wrap .spark{opacity:.35}
.composing .ember,.composing .glint{opacity:0;transition:opacity .4s}
/* Light theme: screen blending would vanish on the light hero, keep it vivid. */
.light .robot-wrap .spark,.light .glint{mix-blend-mode:normal}

/* Tablet and phone: keep the whole robot, and both burning stars, on screen. */
@media(max-width:800px){.arrival{right:1%;top:14px;width:min(56%,400px);height:560px;opacity:.72}
  .robot-wrap{width:100%}.ember{--s:3px}.robot-wrap .spark b{display:none}}
@media(max-width:480px){.arrival{right:-3%;top:40px;width:54%;opacity:.66}.intro p{max-width:52%;text-shadow:0 1px 3px #000,0 2px 15px #000}.intro h1{text-shadow:0 2px 4px #000,0 3px 15px #000}}
/* Reduced motion: a steady, bright glow instead of moving flames. */
@media(prefers-reduced-motion:reduce){
  .robot-wrap .spark:before{opacity:.9}.robot-wrap .spark:after{opacity:.7}.robot-wrap .spark b{opacity:.5}
  .glint{opacity:.35}.ember{display:none}}
@media(max-width:360px){.intro h1{font-size:36px}.intro p{max-width:60%}}

/* ===== Polished controls: real SVG icons instead of font glyphs ===== */
.ico{width:18px;height:18px;flex-shrink:0;display:block}
/* top bar */
.top button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;min-height:42px;padding:0 14px;border-radius:12px;
  background:#04140ecc;border:1px solid #2a5444;color:#e9fbf3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);line-height:1}
.top button:hover{background:#0b2a20;border-color:#3be6b0}
.top .theme-toggle{width:42px;padding:0}.top .theme-toggle .ico{width:19px;height:19px;color:#7dffd4}
.lang-control>button{padding:0 11px 0 10px}
.lang-control .flag{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px #ffffff3d;display:block}
.lang-code{font-size:13px;font-weight:600;letter-spacing:.6px}
.caret{width:14px;height:14px;opacity:.75;transition:transform .2s}
.lang-control>button[aria-expanded=true] .caret{transform:rotate(180deg)}
.lang-menu .flag{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px #ffffff2e}
.top button.login{background:linear-gradient(135deg,#2cf5b8,#10cf91);color:#00261b;border:0;font-weight:700;padding:0 20px;box-shadow:0 0 0 1px #5dffcf55,0 4px 22px #12f0a838}
.top button.login:hover{background:linear-gradient(135deg,#5cffcb,#1be0a0);box-shadow:0 0 0 1px #8dffdd88,0 6px 28px #12f0a855}
.light .top button{background:#ffffffe6;color:#173f2e;border-color:#c6dccf}
.light .top .theme-toggle .ico{color:#0f7a52}
.light .top button.login{background:linear-gradient(135deg,#16a06c,#0f7f55);color:#fff;box-shadow:0 4px 16px #0f7f5533}
.light .lang-control .flag{box-shadow:0 0 0 1px #0000002e}
.menu .ico{width:20px;height:20px}
/* sidebar */
nav button svg{color:#63efbe;width:19px;height:19px}
.light nav button svg{color:#13764e}
.sidebar-bottom button{display:flex;align-items:center;gap:11px;width:100%}
.sidebar-bottom button .lbl{float:none}
.sidebar-bottom .ico{width:17px;height:17px;color:#63efbe}.light .sidebar-bottom .ico{color:#13764e}
.sidebar-bottom .chev{margin-left:auto;opacity:.6;color:inherit!important}
.sidebar-bottom a{display:inline-flex;align-items:center;gap:6px}.sidebar-bottom .ext{width:12px;height:12px}
/* hero quick actions, send, cards */
.quick b{display:flex}.quick b .ico{width:16px;height:16px}
#send{display:grid;place-items:center}#send .ico{width:26px;height:26px;stroke-width:2.2}.chatting #send .ico{width:21px;height:21px}
.work-title>button{display:inline-flex;align-items:center;gap:8px}
.tool-icon svg{width:20px;height:20px}
.top .lang-menu{padding:6px;border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top .lang-menu button{justify-content:flex-start;gap:12px;width:100%;height:42px;padding:0 12px;border:0;border-radius:9px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px}
.top .lang-menu button:hover{background:#12392b}
.top .lang-menu button[aria-pressed=true]{background:#174a37;color:#fff}
.light .top .lang-menu button{background:none;color:#173f2e}
.light .top .lang-menu button:hover{background:#eaf4ee}
.light .top .lang-menu button[aria-pressed=true]{background:#d7eadf;color:#0f4f35}
.top .menu{display:none}
@media(max-width:800px){.top .menu{display:inline-flex;width:42px;padding:0}}
/* Quick actions: compact and calm */
.quick{gap:12px;margin-top:16px}
.quick button{min-height:52px;padding:9px 14px;gap:11px;font-size:14px;font-weight:500;border-radius:12px}
.quick button>span{width:30px;height:30px;border-radius:8px;flex-shrink:0}
.quick button>span svg,.quick button>span .ico{width:17px;height:17px}
.quick b .ico,.quick b svg{width:14px;height:14px;opacity:.7}
@media(max-width:800px){.quick{gap:8px}.quick button{min-height:46px;padding:8px 10px;gap:8px;font-size:13px}.quick button>span{width:26px;height:26px}.quick button>span svg{width:15px;height:15px}}