/* ─── Chat Widget — Shared Styles ─── */
/* Requires: krevio-tokens.css loaded first */

.chat-widget {
  position: fixed; bottom: var(--space-2xl); right: var(--space-2xl);
  z-index: var(--z-chat); font-family: var(--font-body);
}

.chat-panel {
  display: none; width: 360px;
  background: rgba(15, 15, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg), inset 0 1px 1px rgba(255,255,255,0.1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  overflow: hidden; flex-direction: column; max-height: 600px;
  margin-bottom: var(--space-lg); color: white;
}
.chat-panel.open { display: flex; animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUpFade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* ─── Header ─── */
.chat-header {
  background: rgba(255, 255, 255, 0.05);
  padding: var(--space-lg) var(--space-xl);
  display: flex; align-items: center; gap: var(--space-md);
  transition: background 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.chat-header.voice-active { background: rgba(147, 51, 234, 0.15); }
.chat-header-icon { font-size: 1.6rem; }
.chat-header-info { flex: 1; }
.chat-header-name { font-size: var(--text-md); font-weight: 600; color: white; margin-bottom: 2px; }
.chat-header-status { font-size: var(--text-xs); color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: var(--space-xs); }

/* ─── Equalizer bars (voice-active state) ─── */
.chat-eq-bars { display: none; height: 16px; gap: 3px; align-items: center; }
.chat-eq-bar {
  width: 4px; background: var(--accent, #a855f7); border-radius: 2px;
  animation: eq-bounce 0.8s infinite alternate ease-in-out;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.6);
}
.chat-eq-bar:nth-child(1) { background: var(--green); box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.chat-eq-bar:nth-child(2) { animation-delay: 0.2s; }
.chat-eq-bar:nth-child(3) { animation-delay: 0.4s; }
.chat-eq-bar:nth-child(4) { animation-delay: 0.1s; background: var(--blue); box-shadow: 0 0 6px rgba(59, 130, 246, 0.6); }
.chat-eq-bar:nth-child(5) { animation-delay: 0.3s; }
@keyframes eq-bounce { 0% { height: 4px; } 100% { height: 16px; } }
.chat-header.voice-active .chat-header-status-text { display: none; }
.chat-header.voice-active .chat-eq-bars { display: flex; }

/* ─── Voice Toggle ─── */
.chat-voice-toggle {
  background: none; border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-md); color: rgba(255,255,255,0.7);
  cursor: pointer; padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-md); min-width: 32px; min-height: 32px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.chat-voice-toggle:hover { border-color: white; color: white; background: rgba(255,255,255,0.1); }
.chat-voice-toggle.active { border-color: white; color: white; background: rgba(255,255,255,0.2); }
.chat-voice-toggle.playing {
  background: var(--red) !important; border-color: var(--red) !important;
  color: white !important; font-weight: 900; transform: scale(1.05);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* ─── Close Button ─── */
.chat-close-btn {
  background: rgba(255,255,255,0.08); border: none; border-radius: var(--radius-round);
  width: 28px; height: 28px; display: flex; justify-content: center; align-items: center;
  color: rgba(255,255,255,0.7); cursor: pointer; font-size: var(--text-md); transition: all 0.2s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.2); color: white; }

/* ─── Messages ─── */
.chat-messages {
  flex: 1; overflow-y: auto; padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-md); height: 300px;
}
.chat-voice-label {
  font-size: var(--text-xs); color: rgba(255,255,255,0.4);
  text-align: center; padding: 0 var(--space-md) 6px; display: none;
}

/* ─── Input Area ─── */
.chat-input-row {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: var(--space-md);
  align-items: stretch; background: rgba(0,0,0,0.2);
}
.chat-input-wrapper {
  display: flex; gap: var(--space-sm); align-items: center; width: 100%;
  border-radius: var(--radius-full); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1); padding: var(--space-xs);
  transition: border-color 0.2s;
}
.chat-input-wrapper:focus-within {
  border-color: rgba(168, 85, 247, 0.5); background: rgba(255,255,255,0.1);
}
.chat-input {
  flex: 1; padding: var(--space-sm) var(--space-md);
  background: transparent; border: none; color: white;
  font-size: var(--text-md); font-family: var(--font-body); width: 100%;
}
.chat-input::placeholder { color: rgba(255,255,255,0.3); }
.chat-input:focus { outline: none; }

/* ─── Mic Button ─── */
.chat-mic {
  background: var(--accent, #9333EA); border: none;
  border-radius: var(--radius-round); width: 44px; height: 44px;
  font-size: 18px; cursor: pointer; color: white;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
}
.chat-mic:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(147, 51, 234, 0.6); }
.chat-mic.recording {
  background: rgba(255,255,255,0.1); color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.5);
  animation: mic-pulse 1.5s infinite;
  box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.5);
}
@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4), inset 0 0 10px rgba(239, 68, 68, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0), inset 0 0 20px rgba(239, 68, 68, 0.8); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), inset 0 0 10px rgba(239, 68, 68, 0.5); }
}

/* ─── Send Button ─── */
.chat-send-btn {
  width: 32px; height: 32px; border-radius: var(--radius-round);
  background: white; color: black; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); cursor: pointer; transition: opacity 0.15s; margin-right: 2px;
}
.chat-send-btn:hover { opacity: 0.85; }

/* ─── Voice Active Panel ─── */
.voice-active-panel { display: none; flex-direction: column; align-items: center; padding: 10px 0; gap: var(--space-lg); }
.voice-active-panel.active { display: flex; animation: slideUpFade 0.2s ease; }
.chat-input-wrapper.hidden { display: none; }

.stop-btn {
  background: var(--redS); border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--red); font-weight: 700; font-size: var(--text-sm);
  padding: 10px var(--space-2xl); border-radius: var(--radius-full);
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: var(--space-sm); letter-spacing: 0.05em;
}
.stop-btn:hover { background: rgba(239, 68, 68, 0.2); box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.stop-btn::before {
  content: ''; width: 10px; height: 10px;
  background: var(--red); border-radius: 2px; display: inline-block;
}

/* ─── Chat Bubble Trigger ─── */
.chat-bubble-btn {
  width: 60px; height: 60px; border-radius: var(--radius-round);
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: white; font-size: 24px; border: none;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5), inset 0 2px 4px rgba(255,255,255,0.3);
  cursor: pointer; transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  display: flex; align-items: center; justify-content: center;
}
.chat-bubble-btn:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.6), inset 0 2px 4px rgba(255,255,255,0.3);
}

/* ─── Message Bubbles ─── */
.msg-bubble {
  max-width: 85%; padding: var(--space-md) var(--space-lg);
  font-size: var(--text-md); line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.msg-bot {
  align-self: flex-start; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.05); color: white;
  border-radius: var(--radius-sm) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
}
.msg-user {
  align-self: flex-end; background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color: white; border-radius: var(--radius-2xl) var(--radius-sm) var(--radius-2xl) var(--radius-2xl);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Compat classes used by demo pages */
.chat-msg { max-width: 85%; }
.chat-msg-bot { align-self: flex-start; }
.chat-msg-user { align-self: flex-end; display: flex; justify-content: flex-end; width: 100%; }
.chat-bubble-msg {
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-2xl);
  font-size: var(--text-md); line-height: 1.5; max-width: 85%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.chat-msg-bot .chat-bubble-msg {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.05);
  color: white; border-radius: var(--radius-sm) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
}
.chat-msg-user .chat-bubble-msg {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%); color: white;
  border-radius: var(--radius-2xl) var(--radius-sm) var(--radius-2xl) var(--radius-2xl);
  align-self: flex-end; border: 1px solid rgba(255,255,255,0.1);
}

/* ─── Thinking Animation ─── */
.msg-thinking {
  font-size: var(--text-md); color: rgba(255,255,255,0.6);
  padding: var(--space-sm) var(--space-md); align-self: flex-start;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
}
.msg-thinking span {
  display: inline-block; width: 6px; height: 6px;
  background-color: rgba(255,255,255,0.6); border-radius: var(--radius-round);
  margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both;
}
.msg-thinking span:nth-child(1) { animation-delay: -0.32s; }
.msg-thinking span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }

/* ─── Quick Replies ─── */
.chat-quick-replies {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: 0 var(--space-xl) var(--space-md);
}
.chat-qr-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: 10px var(--space-md);
  font-size: var(--text-base); font-weight: 500; color: white; text-align: left;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: var(--space-sm);
}
.chat-qr-btn:hover {
  border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: translateY(-1px);
}

/* ─── Fair Housing Badge (RE only) ─── */
.chat-fair-housing {
  font-size: 10px; color: rgba(255,255,255,0.4); text-align: center;
  padding: var(--space-sm) var(--space-md); background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ─── Mobile (≤ 600px) ───
   Mobile is the primary surface — most demo visitors arrive on phones.
   Make the chat panel fill the viewport so the AI conversation (which is
   the actual product demo) gets real estate. Constrains to 75svh so the
   bubble + safe-area still has room. svh handles iOS Safari's collapsing
   address bar — vh would jump when the bar hides/shows.
*/
@media (max-width: 600px) {
  .chat-widget { right: 12px; bottom: 12px; left: 12px; }
  .chat-widget .chat-bubble-btn { margin-left: auto; }
  .chat-panel {
    width: auto;
    max-height: min(75svh, 600px);
    margin-bottom: var(--space-md);
  }
  .chat-messages {
    /* Remove fixed height — let flex grow to fill panel.
       Min-height ensures greeting + 2-3 messages are always visible
       even if quick-replies push the input row up. */
    height: auto;
    min-height: 200px;
    padding: var(--space-lg);
  }
  .chat-header { padding: var(--space-md) var(--space-lg); }
  .chat-input-row { padding: var(--space-sm) var(--space-md) var(--space-md); }
  /* iOS Safari auto-zooms any input under 16px on focus. Bump to 16
     so the chat panel doesn't lurch sideways when the keyboard opens. */
  .chat-input { font-size: 16px; min-width: 0; }
}