/* Chat widget — copied verbatim from the live https://oplyai.com/ <style> block
   (#chat-bubble "her" + #chat panel, lines 327–402 and the #chat rule in the 900px query).
   Sample-only additions are at the bottom and marked. */

/* Live tokens the copied rules rely on (scoped so the rest of the sample keeps its own). */
#chat-bubble, #chat {
  --cyan: #5cebff;
  --line: #1c3a42;
  --card2: #0e1c22;
  --rec: #0c3a40;
  --text: #eaf6f8;
}

/* ---- verbatim from live ---- */
    #chat-bubble {
      position: fixed; right: 14px; bottom: 16px; z-index: 50;
      width: auto; height: auto; padding: 0;
      background: transparent; border: 0; appearance: none;
      display: flex; flex-direction: column; align-items: center;
      cursor: pointer;
      opacity: 0; pointer-events: none; transform: translateY(18px);
      transition: opacity .35s ease, transform .35s ease;
    }
    #chat-bubble.show {
      opacity: 1; pointer-events: auto; transform: translateY(0);
      animation: float-chat 3s ease-in-out infinite;
    }
    #chat-bubble .chat-tag {
      background: var(--cyan); color: #041014;
      font-size: .68rem; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 10px; border-radius: 999px; margin-bottom: 6px;
      box-shadow: 0 4px 16px rgba(92,235,255,.35);
    }
    #chat-bubble .chat-tag::after {
      content: ""; display: block; margin: 3px auto -9px;
      width: 0; height: 0;
      border-left: 5px solid transparent; border-right: 5px solid transparent;
      border-top: 6px solid var(--cyan);
    }
    #chat-bubble .glow {
      position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
      width: 88px; height: 88px; border-radius: 50%;
      background: radial-gradient(circle, rgba(92,235,255,.5) 0%, rgba(92,235,255,.12) 45%, transparent 70%);
      filter: blur(10px);
      animation: cyan-pulse 2.8s ease-out infinite;
      pointer-events: none; z-index: 0;
    }
    #chat-bubble img {
      position: relative; z-index: 1;
      width: 74px; height: 74px; object-fit: contain; pointer-events: none;
      background: transparent;
    }
    #chat-bubble:hover { animation-play-state: paused; transform: translateY(-6px) scale(1.06); }
    @keyframes cyan-pulse {
      0% { transform: translateX(-50%) scale(.85); opacity: .85; }
      70% { transform: translateX(-50%) scale(1.35); opacity: 0; }
      100% { transform: translateX(-50%) scale(.85); opacity: 0; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }
    @keyframes float-sm {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    @keyframes float-chat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .brand img, .mascot-wrap, #chat-bubble, #chat-bubble .glow { animation: none; }
    }
    #chat {
      position: fixed; right: 20px; bottom: 150px; z-index: 50; width: min(360px, calc(100vw - 24px));
      height: 480px; background: #071016; border: 1px solid var(--line); border-radius: 16px;
      display: none; flex-direction: column; overflow: hidden;
    }
    #chat.open { display: flex; }
    .chat-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .chat-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .bubble { max-width: 86%; padding: 8px 10px; border-radius: 12px; font-size: .88rem; white-space: pre-wrap; }
    .bot { background: var(--card2); align-self: flex-start; }
    .user { background: var(--rec); border: 1px solid #1a4a52; align-self: flex-end; }
    .chat-in { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
    .chat-in input {
      flex: 1; background: #0b151a; border: 1px solid var(--line); color: var(--text);
      border-radius: 10px; padding: 10px 12px; outline: none; min-width: 0;
    }

    @media (max-width: 900px) {
      #chat { right: 12px; bottom: 120px; height: min(480px, calc(100vh - 160px)); }
    }

    /* Live .btn / .btn-ghost, scoped to the panel so Send and Close look exactly like live. */
    #chat .btn {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--cyan); color: #041014; font-weight: 700; border-radius: 999px;
      padding: 10px 18px; font-size: .88rem; border: 0; cursor: pointer;
      min-height: 0; line-height: 1.6; letter-spacing: 0; box-shadow: none; font-family: inherit;
    }
    #chat .btn:hover { box-shadow: 0 0 24px rgba(92,235,255,.28); background: var(--cyan); }
    #chat .btn-ghost {
      background: transparent; color: var(--cyan);
      border: 1px solid rgba(92,235,255,.45);
    }
    #chat .btn-ghost:hover { background: transparent; }
/* ---- end verbatim ---- */

/* Launcher stays at opacity 0 until .show. chat-widget.js adds .show only after #desk-card has scrolled past, then leaves it on. */
/* Keyboard focus ring, and lift her above the mobile action bar. */
#chat-bubble:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 18px; }
@media (max-width: 860px) {
  .has-action-bar #chat-bubble { bottom: 88px; }
  .has-action-bar #chat { bottom: 200px; }
}