/* ======================================================
   RFF CHAT — MOBILE + DESKTOP (iOS SAFE)
====================================================== */

/* Chat button */
#rff-chat-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
}

/* ===============================
   Ask Steelhead Sam — FINAL
=============================== */

#rff-chat-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;

  padding: 14px 20px;
  border-radius: 999px;

  background: #065f46;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  z-index: 2147483647; /* above EVERYTHING */

  pointer-events: auto;

  box-shadow:
    0 0 0 3px rgba(29,185,84,0.35),
    0 0 18px rgba(29,185,84,0.6),
    0 8px 24px rgba(0,0,0,0.45);

  animation: samGlow 4s ease-in-out infinite;
}

@keyframes samGlow {
  0%,100% {
    box-shadow:
      0 0 0 3px rgba(29,185,84,0.35),
      0 0 18px rgba(29,185,84,0.6),
      0 8px 24px rgba(0,0,0,0.45);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(29,185,84,0.55),
      0 0 30px rgba(29,185,84,0.9),
      0 10px 30px rgba(0,0,0,0.6);
  }
}


/* Chat container */
#rff-chat-box {
  position: fixed;
  bottom: 80px;
  right: 22px;
  width: 340px;
  max-height: 520px;
  background: rgba(0,0,0,0.9);
  border-radius: 16px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
}

#rff-chat-box.open {
  display: flex;
}

/* Messages */
#rff-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bot bubble */
#rff-chat-messages .bot {
  align-self: flex-start;
  max-width: 80%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.45;
}

/* User bubble */
#rff-chat-messages .user {
  align-self: flex-end;
  max-width: 80%;
  background: #1db954;
  color: #000;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.45;
}

/* Input row — THIS IS THE KEY */
#rff-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #0e141b;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Input */
#rff-chat-input {
  flex: 1;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 16px; /* REQUIRED for iOS */
}

#rff-chat-input:focus {
  outline: none;
}

/* Voice button */
#rff-voice-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #1db954;
}

/* Close button (mobile) */
#rff-chat-close {
  position: absolute;
  top: env(safe-area-inset-top);
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  z-index: 10;
}

/* ================= MOBILE ================= */

@media (max-width: 700px) {

  #rff-chat-box.open {
    inset: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  /* CRITICAL FIX — DO NOT FIX OR TRANSFORM */
  #rff-input-row {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

}


/* Prevent background scroll when fullscreen */
body.rff-chat-open {
    overflow: hidden !important;
}

/* -----------------------------------------------------
   TYPING INDICATOR
----------------------------------------------------- */
.typing-indicator {
    display: none;
    padding: 8px 14px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    width: fit-content;
    margin-left: 14px;
    margin-bottom: 10px;

    gap: 6px;
    align-items: center;
}

.typing-indicator .dot {
    width: 6px;
    height: 6px;
    background: white;
    opacity: 0.6;
    border-radius: 50%;
    animation: blink 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes blink {
    0%,100% { opacity: .2; }
    50%     { opacity: 1; }
}

/* -----------------------------------------------------
   TYPEWRITER LINES
----------------------------------------------------- */
.bot-line {
    text-align: left;
    white-space: pre-wrap;
    opacity: 1;
}

/* -----------------------------------------------------
   SUGGESTION BUTTON ROW
----------------------------------------------------- */
#rff-suggestions {
    padding: 8px 10px;
    display: flex;
    gap: 6px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.05);
}

#rff-suggestions button {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 0.78rem;
    border: none;
    border-radius: 40px;
    background: rgba(255,255,255,0.12);
    color: white;
    cursor: pointer;
}

#rff-suggestions button:hover {
    background: rgba(255,255,255,0.22);
}

/* -----------------------------------------------------
   INPUT + MIC BUTTON
----------------------------------------------------- */
/* INPUT ROW — DEFAULT: stays INSIDE chat box */
#rff-input-row {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.15);
    background: #111;
    padding: 0 8px;

    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100%;
    z-index: 1;
}

#rff-voice-btn {
    width: 40px;
    height: 40px;
    margin-left: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Listening pulse */
#rff-voice-btn.listening {
    background: #0a8f55;
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% { opacity: .7; }
    50% { opacity: 1; }
    100% { opacity: .7; }
}

/* -----------------------------------------------------
   CARD STYLE (flow cards)
----------------------------------------------------- */
.bot-card {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid rgba(255,255,255,0.15);
}

.card-title {
    font-weight: bold;
    margin-bottom: 6px;
}

.card-body .card-row {
    margin-bottom: 4px;
}


/* =========================================
   CHAT INTERACTION — CLEAN & iOS SAFE
========================================= */

/* Chat button always clickable */
#rff-chat-btn {
    pointer-events: auto;
    z-index: 2147483647;
}

/* Chat is fully interactive when open */

@media (max-width: 700px) {

  /* Chat is HIDDEN unless .open is present */
  #rff-chat-box {
      display: none;
  }

  /* Chat opens fullscreen ONLY when .open */
  #rff-chat-box.open {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: rgba(0,0,0,0.92);
      z-index: 2147483646;
  }

  /* Input bar ALWAYS visible */
  #rff-input-row {
      position: sticky;
      bottom: 0;
      height: 64px;
      padding: 10px 12px;
      background: #0e141b;
      border-top: 1px solid rgba(255,255,255,0.15);
      z-index: 10;
  }

  #rff-chat-input {
      font-size: 16px; /* REQUIRED for iOS keyboard */
  }
}


  /* ✅ CRITICAL: STICKY, NOT FIXED */
  #rff-input-row {
      position: sticky;
      bottom: 0;
      background: #0e141b;
      z-index: 10;
  }

/* =====================================
   MOBILE CHAT — iOS SAFE LAYOUT
===================================== */
@media (max-width: 700px) {

  #rff-chat-box.open {
    position: fixed;
    inset: 0;

    display: flex;
    flex-direction: column;

    background: rgba(0,0,0,0.92);

    z-index: 2147483646; /* just below button */
  }

  /* Messages scroll normally */
  #rff-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  /* INPUT BAR — STICKY (NOT FIXED) */
  #rff-input-row {
    position: sticky;
    bottom: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    height: 64px;
    padding: 10px 12px;

    background: #0e141b;
    border-top: 1px solid rgba(255,255,255,0.15);

    z-index: 1;
  }

  #rff-chat-input {
    flex: 1;
    height: 44px;

    font-size: 16px; /* REQUIRED: prevents iOS zoom */

    background: #000;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
  }

  #rff-chat-input:focus {
    outline: none;
  }
}
/* ===============================
   MOBILE INPUT BAR — ALWAYS VISIBLE
=============================== */
@media (max-width: 700px) {

  #rff-input-row {
      position: sticky;
      bottom: 0;

      background: #0e141b;
      border-top: 1px solid rgba(255,255,255,0.15);

      height: 64px;
      padding: 10px 12px;

      z-index: 20;
  }

  #rff-chat-input {
      height: 44px;
      font-size: 16px; /* prevents iOS zoom */
      background: #000;
      border-radius: 12px;
  }

  #rff-chat-messages {
      padding-bottom: 80px; /* room for input */
  }
}