/* ==========================================================================
   StoneSmartAI – Chat Bubble Effects (WOW-Layer)
   Phase 7B: angepasst an Actions-Layout "unter Bubble" (kein Overlay)
   Wird NACH style.css geladen.
   ========================================================================== */

/* weiches Einblenden jeder neuen Nachricht */
.msg{
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  animation: ssai-msg-in 0.22s ease-out forwards;
}

/* minimale Verzögerung für „organisches“ Feeling */
.msg.assistant{ animation-delay: 0.01s; }
.msg.user{ animation-delay: 0.03s; }

@keyframes ssai-msg-in{
  from{
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    filter: blur(2px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Grund-Setup für schicke Hover-Interaktion */
.msg .bubble{
  position: relative;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.22s ease-out,
    background 0.22s ease-out,
    border-color 0.22s ease-out;
}

/* dezenter „Lift“ beim Hover – leicht versetzt je nach Seite */
.msg.user .bubble:hover{
  transform: translateY(-1px) translateX(1px);
}
.msg.assistant .bubble:hover{
  transform: translateY(-1px) translateX(-1px);
}

/* starker Glas-/Stein-Glow beim Hover */
.msg.user .bubble:hover,
.msg.assistant .bubble:hover{
  box-shadow: 0 18px 50px rgba(15,23,42,0.32);
}
html[data-theme="dark"] .msg.user .bubble:hover,
html[data-theme="dark"] .msg.assistant .bubble:hover{
  box-shadow: 0 18px 52px rgba(0,0,0,0.84);
}

/* feiner, bläulicher „Kanten-Glow“ */
.msg.user .bubble::after,
.msg.assistant .bubble::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 0 0, rgba(96,165,250,0.45), transparent 55%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.22s ease-out;
}
.msg.user .bubble:hover::after,
.msg.assistant .bubble:hover::after{
  opacity: 1;
}

/* ganz leichtes „Glitzern“ für Assistant-Bubbles */
.msg.assistant .bubble{
  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      transparent 48%,
      transparent 52%,
      rgba(148,163,184,0.14)
    );
  background-blend-mode: soft-light;
}

/* User-Bubble etwas knackiger */
.msg.user .bubble{
  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.14),
      transparent 55%
    );
}

/* Fokus */
.msg:focus-within .bubble{
  outline: 2px solid rgba(96,165,250,0.7);
  outline-offset: 2px;
}

/* System-Notes */
.sys-note{
  align-self: center;
  max-width: min(900px, 92vw);
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  color: var(--muted);
  font-size: 12px;
}
html[data-theme="dark"] .sys-note{
  background: rgba(255,255,255,0.05);
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--footerH) + 18px);
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 999;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* kleine Anpassung für sehr kleine Bildschirme */
@media (max-width: 640px){
  .msg{
    animation-duration: 0.18s;
    transform: translateY(4px) scale(0.99);
  }
}