/* ============================================================
   VEGA — Eilik-inspired OLED-face companion
   Uses the portfolio's own theme variables (--bg, --panel, --line,
   --text, --cyan, --amber…) so it always matches the live site.
   ============================================================ */

#vega-root{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text, #e7e4dc);
}
#vega-root *{ box-sizing: border-box; }
.vega-hidden{ display: none !important; }

/* ---------- Launcher (mini screen-face, always visible) ---------- */
#vega-launcher{
  width: 60px; height: 60px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(231,228,220,.09));
  background: #0b0d0f;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 0 0 2px #1c1f22;
  padding: 6px;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
#vega-launcher:hover{ transform: translateY(-2px) scale(1.03); }
#vega-launcher:active{ transform: scale(.95); }
#vega-launcher-icon{ width: 100%; height: 100%; }
#vega-launcher-badge{
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber, #e8a248); color: #14171a;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

/* ---------- Widget shell ---------- */
#vega-widget{
  position: absolute;
  right: 0; bottom: 74px;
  width: 320px; max-width: calc(100vw - 24px);
  height: 460px; max-height: calc(100vh - 140px);
  background: var(--panel, #1b1f24);
  border: 1px solid var(--line, rgba(231,228,220,.09));
  border-radius: var(--radius, 10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: vega-pop .2s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes vega-pop{ from{ opacity:0; transform: translateY(10px) scale(.96);} to{ opacity:1; transform: translateY(0) scale(1);} }

/* ---------- The OLED screen itself ---------- */
#vega-stage{
  position: relative;
  height: 190px;
  background: var(--panel, #1b1f24);
  border-bottom: 1px solid var(--line, rgba(231,228,220,.09));
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
  flex-shrink: 0;
  padding: 14px;
}
#vega-screen-frame{
  width: 100%; height: 100%;
  border-radius: 18px;
  background: #0b0d0f;
  box-shadow: inset 0 0 0 2px #1c1f22, inset 0 0 24px rgba(0,0,0,.6);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
#vega-svg{ position: absolute; inset: 0; width: 100%; height: 100%; display:block; }
#vega-eye-l, #vega-eye-r{ transition: none; }
#vega-eye-l-shine, #vega-eye-r-shine{ transition: transform .08s linear; will-change: transform; }

/* ---------- Whole-face physical reactions, layered on top of the SVG
   expression swap above. Applied via the state-<name> class the JS puts
   on #vega-root, inspired by how Eilik/Loona/EMO sell an emotion with
   body motion as much as with the eyes themselves. ---------- */
#vega-root.state-dance #vega-svg{ animation: vega-dance .5s ease-in-out infinite; }
#vega-root.state-victory #vega-svg{ animation: vega-bounce .45s cubic-bezier(.34,1.6,.6,1) infinite; }
#vega-root.state-wobble #vega-svg{ animation: vega-rock .6s ease-in-out infinite; }
#vega-root.state-angry #vega-svg{ animation: vega-shake .18s linear infinite; }
#vega-root.state-glitch #vega-svg{ animation: vega-glitch .35s steps(2) infinite; }
#vega-root.state-sneeze #vega-svg{ animation: vega-sneeze .5s ease-out 1; }
#vega-root.state-yawn #vega-svg{ animation: vega-yawn 1.6s ease-in-out 1; }
#vega-root.state-surprised #vega-svg{ animation: vega-pop-in .28s cubic-bezier(.2,.9,.3,1.4) 1; }
#vega-root.state-startled #vega-svg{ animation: vega-pop-in .22s cubic-bezier(.2,.9,.3,1.4) 1; }
#vega-root.state-wave #vega-svg{ animation: vega-rock .9s ease-in-out 2; }
#vega-root.state-no #vega-svg{ animation: vega-shake .22s ease-in-out 3; }
#vega-root.state-yes #vega-svg{ animation: vega-nod .3s ease-in-out 2; }
#vega-root.state-love #vega-svg{ animation: vega-heartbeat .7s ease-in-out infinite; }

@keyframes vega-dance{ 0%,100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-6px) rotate(3deg); } }
@keyframes vega-bounce{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-9px) scale(1.03); } }
@keyframes vega-rock{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }
@keyframes vega-shake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }
@keyframes vega-glitch{ 0%,100%{ transform: translate(0,0) skewX(0); opacity:1; } 33%{ transform: translate(-2px,1px) skewX(-2deg); opacity:.85; } 66%{ transform: translate(2px,-1px) skewX(2deg); opacity:.95; } }
@keyframes vega-sneeze{ 0%{ transform: translateY(0) scale(1); } 40%{ transform: translateY(3px) scale(0.94,1.05); } 60%{ transform: translateY(-6px) scale(1.05,0.9); } 100%{ transform: translateY(0) scale(1); } }
@keyframes vega-yawn{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05,0.92) translateY(2px); } }
@keyframes vega-pop-in{ 0%{ transform: scale(0.85); } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); } }
@keyframes vega-nod{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }
@keyframes vega-heartbeat{ 0%,100%{ transform: scale(1); } 25%{ transform: scale(1.05); } 40%{ transform: scale(0.99); } 60%{ transform: scale(1.04); } }
#vega-zone-hint{
  position:absolute; bottom:4px; left:0; right:0;
  text-align:center; font-size:8.5px; letter-spacing:.08em;
  color: rgba(231,228,220,.22); text-transform:uppercase;
  font-family:'JetBrains Mono', monospace;
  pointer-events:none;
}

#vega-panel{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
#vega-panel-head{
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, rgba(231,228,220,.09));
}
#vega-name{ font-weight:600; font-size:13.5px; }
#vega-state-label{
  font-size: 10.5px;
  color: var(--cyan, #63d2c9);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
}
#vega-minimize{
  margin-left:auto;
  width:24px; height:24px;
  border-radius:6px;
  border:1px solid var(--line, rgba(231,228,220,.09));
  background:var(--panel-2, #21262c);
  color:var(--text-dim, #9aa0a6);
  cursor:pointer;
  font-size:16px; line-height:1;
}

#vega-log{
  flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding: 10px 12px;
  display:flex; flex-direction:column; gap:8px;
  font-size: 13px;
  line-height: 1.5;
}
.vega-msg{ max-width: 88%; min-width:0; padding: 7px 10px; border-radius: 10px; white-space: pre-wrap; overflow-wrap:anywhere; word-break:break-word; flex:0 0 auto; }
.vega-msg.vega-them{ align-self:flex-start; background:var(--panel-2, #21262c); border-top-left-radius:2px; }
.vega-msg.vega-me{ align-self:flex-end; background: color-mix(in srgb, var(--cyan, #63d2c9) 20%, var(--panel-2, #21262c)); border-top-right-radius:2px; }
.vega-msg a{ color: var(--cyan, #63d2c9); }
.vega-typing span{
  display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%;
  background: var(--text-dim, #9aa0a6);
  animation: vega-blink-dot 1.1s infinite ease-in-out;
}
.vega-typing span:nth-child(2){ animation-delay:.15s; }
.vega-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes vega-blink-dot{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

#vega-quickrow{ display:flex; gap:6px; padding: 0 12px 8px; flex:0 0 auto; min-height:0; max-height:72px; overflow-y:auto; flex-wrap:wrap; overscroll-behavior:contain; }
.vega-quick{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(231,228,220,.09));
  background: var(--panel-2, #21262c);
  color: var(--text-dim, #9aa0a6);
  cursor: pointer;
}
.vega-quick:hover{ color: var(--text, #e7e4dc); border-color: var(--cyan, #63d2c9); }

#vega-form{ display:flex; gap:8px; padding: 10px 12px; border-top: 1px solid var(--line, rgba(231,228,220,.09)); flex:0 0 auto; min-width:0; }
#vega-input{
  flex:1;
  background: var(--bg, #14171a);
  border: 1px solid var(--line, rgba(231,228,220,.09));
  border-radius: 8px;
  color: var(--text, #e7e4dc);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
#vega-input:focus{ outline:2px solid var(--cyan, #63d2c9); outline-offset:1px; }
#vega-send{ width: 36px; border-radius: 8px; border:none; background: var(--cyan, #63d2c9); color:#0c0e10; font-size:15px; cursor:pointer; }

@media (max-width: 520px){
  #vega-root{ right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  #vega-widget{
    right: -10px;
    width: min(360px, calc(100vw - 20px));
    height: min(76dvh, 560px);
    max-height: calc(100dvh - 84px);
    bottom: 74px;
  }
  #vega-stage{ height: 150px; padding: 10px; }
  #vega-panel-head{ flex:0 0 42px; }
  #vega-log{ padding: 8px 10px; font-size: 13px; gap:6px; }
  #vega-quickrow{ max-height:64px; padding:0 10px 6px; }
  #vega-form{ padding:8px 10px max(8px, env(safe-area-inset-bottom)); }
  #vega-input{ min-width:0; font-size:14px; }
  #vega-send{ flex:0 0 40px; width:40px; min-width:40px; }
}
@media (prefers-reduced-motion: reduce){
  #vega-widget, .vega-typing span, #vega-svg{ animation: none !important; }
  #vega-eye-l, #vega-eye-r{ transition: none !important; }
}