/* Vesa – Avatar + Chat-Panel. Nutzt nur Design-Tokens aus app.css (:root). Eigene Klassen: vs-* */

/* ---------- Avatar (freie Figur, kein Kreis) ---------- */
.vs-avatar{
  position:relative; width:var(--vs-size,96px); height:var(--vs-size,96px); flex:0 0 auto;
  background:transparent; border-radius:0; box-shadow:none; contain:layout style;
}
.vs-avatar .vs-fig{
  position:absolute; inset:0;
  /* weiche Alpha-Ausblendung der unteren ~18 % – in Bildschirmkoordinaten, dreht nicht mit */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
}
.vs-avatar svg{ display:block; width:100%; height:100%; }
.vs-avatar .vs-glow{
  position:absolute; left:8%; top:2%; width:84%; height:84%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--mint) 70%, transparent) 0%, color-mix(in srgb, var(--mint) 30%, transparent) 40%, transparent 70%);
  filter:blur(calc(var(--vs-size,96px) * .07));
  opacity:0; transform-origin:50% 50%; will-change:opacity, transform;
}

/* ---------- Lasche ---------- */
.vs-root{ font-family:var(--font); color:var(--fg); }
.vs-tab{
  position:fixed; right:0; bottom:var(--fab-bottom,24px); z-index:2147483000;
  margin:0; padding:0 6px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none;
  cursor:pointer; display:flex; align-items:flex-end; line-height:0;
  transition:transform 200ms ease, opacity 200ms ease;
}
.vs-tab:hover{ transform:translateX(-3px) translateY(-2px); }
.vs-tab:focus-visible{ outline:2px solid var(--mint); outline-offset:4px; border-radius:var(--r-md); }
.vs-tab-av{ display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.vs-dot{
  position:absolute; right:16px; bottom:10px; width:14px; height:14px; border-radius:50%;
  background:var(--mint); border:2px solid var(--bg); box-shadow:0 0 10px color-mix(in srgb, var(--mint) 70%, transparent);
  transition:background 200ms ease;
}
.vs-root[data-state="thinking"] .vs-dot{ background:var(--amber); animation:vs-dot-pulse 1.2s ease-in-out infinite; }
.vs-root[data-state="speaking"] .vs-dot{ animation:vs-dot-pulse .7s ease-in-out infinite; }
@keyframes vs-dot-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }

/* ---------- Panel ---------- */
.vs-panel{
  position:fixed; right:24px; bottom:calc(var(--fab-bottom,24px) + 124px); z-index:2147483000;
  width:460px; height:680px; max-height:calc(100vh - var(--fab-bottom,24px) - 148px);
  display:flex; flex-direction:column; overflow:hidden;
  background:color-mix(in srgb, var(--bg-2) 94%, transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow), var(--glow);
  opacity:0; transform:translateY(14px) scale(.985); transform-origin:100% 100%;
  transition:opacity 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.vs-panel.is-in{ opacity:1; transform:none; }
.vs-panel[hidden]{ display:none; }

.vs-head-bar{
  display:flex; align-items:center; gap:12px; padding:14px 18px 12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 16%, transparent), transparent);
}
.vs-head-av{ display:block; }
.vs-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vs-title strong{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.vs-status{ font-size:13px; color:var(--muted); }
.vs-root[data-state="thinking"] .vs-status, .vs-root[data-state="speaking"] .vs-status, .vs-root[data-state="listening"] .vs-status{ color:var(--mint); }
.vs-ctx{
  margin-left:auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid color-mix(in srgb, var(--mint) 35%, transparent);
  background:color-mix(in srgb, var(--mint) 10%, transparent); color:var(--mint-2);
}
.vs-ctx[hidden]{ display:none; }
.vs-ctx:not([hidden]) + .vs-clear{ margin-left:0; }
.vs-clear, .vs-close{
  flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg-2); cursor:pointer;
  transition:background 180ms ease, color 180ms ease;
}
.vs-clear{ margin-left:auto; width:34px; height:34px; color:var(--muted); background:transparent; border-color:transparent; }
.vs-clear:hover, .vs-close:hover{ background:var(--card-2); color:var(--fg); }

/* Nachrichten */
.vs-msgs{ flex:1 1 auto; overflow-y:auto; padding:20px 18px 8px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain; }
.vs-msg{ display:flex; flex-direction:column; max-width:86%; gap:8px; }
.vs-msg.vs-user{ align-self:flex-end; align-items:flex-end; }
.vs-msg.vs-vesa{ align-self:flex-start; align-items:flex-start; }
.vs-bubble{
  padding:12px 16px; border-radius:var(--r-md); font-size:15px; line-height:1.55; overflow-wrap:anywhere;
  border:1px solid var(--line);
}
.vs-user .vs-bubble{
  background:color-mix(in srgb, var(--mint) 14%, var(--card-2)); border-color:color-mix(in srgb, var(--mint) 28%, transparent);
  color:var(--fg); border-bottom-right-radius:6px;
}
.vs-vesa .vs-bubble{ background:var(--card); border-bottom-left-radius:6px; color:var(--fg); }
.vs-kind-error .vs-bubble{ border-color:color-mix(in srgb, var(--amber) 40%, transparent); }
.vs-kind-notice .vs-bubble, .vs-kind-translate .vs-bubble{ color:var(--fg-2); }
.vs-bubble p{ margin:0; }
.vs-bubble p + p, .vs-bubble ul + p, .vs-bubble p + ul{ margin-top:8px; }
.vs-bubble ul{ margin:0; padding-left:20px; }
.vs-bubble li + li{ margin-top:3px; }
.vs-bubble .vs-h{ font-weight:600; color:var(--fg); }
.vs-bubble code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; padding:1px 5px; border-radius:6px; background:var(--card-2); }
.vs-link{ display:inline-block; margin-top:8px; color:var(--mint); font-weight:500; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--mint) 40%, transparent); cursor:pointer; }
.vs-link:hover{ color:var(--mint-2); }
.vs-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.vs-chip-act{
  font-size:12px; line-height:1.3; padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--mint) 12%, transparent); border:1px solid color-mix(in srgb, var(--mint) 30%, transparent); color:var(--mint-2);
}
.vs-chip-act.is-muted{ background:var(--card); border-color:var(--line); color:var(--muted); }
.vs-chip-act.is-warn{ background:color-mix(in srgb, var(--amber) 12%, transparent); border-color:color-mix(in srgb, var(--amber) 40%, transparent); color:var(--amber); }

.vs-typing .vs-bubble{ display:flex; gap:5px; align-items:center; padding:14px 16px; }
.vs-typing span{ width:7px; height:7px; border-radius:50%; background:var(--mint); opacity:.35; animation:vs-typing 1.1s ease-in-out infinite; }
.vs-typing span:nth-child(2){ animation-delay:.18s; } .vs-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes vs-typing{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* Schnellaktionen */
.vs-quick{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; padding:8px 18px 10px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vs-quick::-webkit-scrollbar{ display:none; }
.vs-quick-label{ font-size:12px; color:var(--muted); margin-right:2px; }
.vs-chip{
  flex:0 0 auto; white-space:nowrap; font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; cursor:pointer; color:var(--fg-2);
  background:var(--card); border:1px solid var(--line-2); transition:background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.vs-chip:hover{ background:var(--card-2); color:var(--fg); border-color:color-mix(in srgb, var(--mint) 40%, transparent); }
.vs-chip.is-lang{ min-width:46px; text-align:center; font-weight:600; letter-spacing:.02em; }
.vs-chip.is-ghost{ background:transparent; border-color:transparent; color:var(--muted); margin-left:auto; }
.vs-chip.is-ghost:hover{ color:var(--fg-2); background:var(--card); }

/* Eingabe */
.vs-input{ display:flex; gap:10px; align-items:flex-end; padding:10px 18px 18px; border-top:1px solid var(--line); }
.vs-ta{
  flex:1 1 auto; min-height:44px; max-height:140px; resize:none; padding:11px 14px; font:inherit; font-size:15px; line-height:1.4;
  color:var(--fg); background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); outline:none;
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
.vs-ta::placeholder{ color:var(--muted); }
.vs-ta:focus{ border-color:color-mix(in srgb, var(--mint) 50%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 14%, transparent); }
.vs-send{
  flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  border-radius:50%; border:0; cursor:pointer; color:var(--bg); background:var(--mint);
  box-shadow:0 6px 20px color-mix(in srgb, var(--mint) 30%, transparent); transition:transform 180ms ease, filter 180ms ease;
}
.vs-send:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.vs-send:active{ transform:translateY(0); }

/* ---------- Mobil ---------- */
@media (max-width: 700px){
  .vs-tab{ bottom:var(--fab-bottom-m,86px); padding:0 2px 0 0; }
  .vs-dot{ right:12px; bottom:8px; width:12px; height:12px; }
  .vs-root.is-open .vs-tab{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms ease, visibility 0s 200ms; }
  .vs-panel{
    left:6px; right:6px; width:auto; top:calc(env(safe-area-inset-top, 0px) + 6px); bottom:calc(var(--fab-bottom-m,86px) + 6px);
    height:auto; max-height:none; border-radius:var(--r-lg); transform-origin:50% 100%;
  }
  .vs-head-bar{ padding:10px 12px 10px 12px; }
  .vs-msgs{ padding:16px 14px 6px; }
  .vs-msg{ max-width:92%; }
  .vs-quick, .vs-input{ padding-left:14px; padding-right:14px; }
  .vs-ctx{ max-width:34%; }
}

@media (prefers-reduced-motion: reduce){
  .vs-panel, .vs-tab, .vs-chip, .vs-send{ transition:none; }
  .vs-typing span, .vs-dot{ animation:none !important; }
}