:root { color-scheme: dark; }

    body {
      background:
        radial-gradient(circle at top left, rgba(79, 70, 229, 0.32), transparent 28%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.16), transparent 26%),
        linear-gradient(135deg, #020617 0%, #0f172a 45%, #111827 100%);
    }

    .glass {
      background: rgba(15, 23, 42, 0.62);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .soft-ring:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
    }

    textarea::-webkit-scrollbar { width: 10px; }
    textarea::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.35);
      border-radius: 999px;
    }
    textarea::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.25);
    }

    @keyframes pulseGlow {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 30px rgba(99, 102, 241, 0.22);
      }
      50% {
        transform: scale(1.03);
        box-shadow: 0 18px 42px rgba(99, 102, 241, 0.38);
      }
    }

    .speaking {
      animation: pulseGlow 1s ease-in-out infinite;
    }