/**
 * chat.css — Cirova Consulting
 * ─────────────────────────────────────────────────────────────
 * Scope    : Floating AI intake chat widget — launcher button,
 *            slide-up panel, message bubbles, input row.
 * Requires : main.css (design tokens must be loaded first)
 * Authors  : Cirova Consulting (generated)
 * Updated  : 2026
 *
 * Component tree:
 *   .chat-launcher          — Fixed FAB button (bottom-right)
 *     .chat-dot             — Red notification dot
 *     .icon-open            — Chat bubble SVG (shown when closed)
 *     .icon-close           — × SVG (shown when open)
 *   .chat-panel             — Slide-up dialog panel
 *     .chat-header          — Avatar, name, status, close button
 *     .chat-messages        — Scrollable message log
 *       .chat-msg           — Single message row
 *         .msg-avatar       — Circular avatar
 *         .chat-bubble      — Message content bubble
 *     .chat-input-row       — Textarea + send button
 *     .chat-footer-note     — Privacy notice
 * ─────────────────────────────────────────────────────────────
 */


/* ─────────────────────────────────────────────────────────────
   1. LAUNCHER BUTTON (FAB)
   Fixed to bottom-right corner. Pulsing ring draws attention
   on first page load. Icon swaps when panel is open.
   ───────────────────────────────────────────────────────────── */
.chat-launcher {
  /* Fixed positioning — stays visible on all scroll positions */
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;

  /* Circle dimensions */
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* Accent fill */
  background-color: var(--color-accent);
  border: none;
  cursor: pointer;

  /* Centre both SVG icons */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Shadow gives the button depth */
  box-shadow: 0 4px 24px rgba(91, 156, 246, 0.4);

  transition:
    transform   var(--duration-fast) var(--ease-out),
    box-shadow  var(--duration-fast);
}

.chat-launcher:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(91, 156, 246, 0.55);
}

/**
 * Pulsing ring — CSS-only attention mechanism.
 * Grows and fades on a 2.8 s loop.
 * The ::before pseudo-element sits behind the button via negative inset.
 */
.chat-launcher::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: launcherPulse 2.8s ease-out infinite;
}

@keyframes launcherPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.55); }
}


/* ─────────────────────────────────────────────────────────────
   1a. NOTIFICATION DOT
   Red dot visible until the user opens the widget for the
   first time (JS adds `.hidden` on first open).
   ───────────────────────────────────────────────────────────── */
.chat-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #ff5f5f;
  /* White border creates separation from the blue launcher */
  border: 2px solid var(--color-bg);
  /* Bounce in with a delay to draw eye after page loads */
  animation: dotBounce 0.5s var(--ease-out) 1.4s both;
}

.chat-dot.hidden { display: none; }

@keyframes dotBounce {
  0%   { transform: scale(0); }
  75%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}


/* ─────────────────────────────────────────────────────────────
   1b. ICON SWAP ANIMATION
   Both SVGs are absolutely positioned in the button centre.
   The open/close state is toggled by JS adding `.open` to
   `.chat-launcher`, which cross-fades and rotates the icons.
   ───────────────────────────────────────────────────────────── */
.icon-open,
.icon-close {
  position: absolute;
  color: var(--color-bg);
  transition:
    opacity   var(--duration-normal),
    transform var(--duration-normal) var(--ease-out);
}

/* Default state: chat icon visible, × hidden and rotated */
.icon-open  { opacity: 1; transform: rotate(0deg); }
.icon-close { opacity: 0; transform: rotate(-80deg); }

/* Open state: swap */
.chat-launcher.open .icon-open  { opacity: 0; transform: rotate(80deg); }
.chat-launcher.open .icon-close { opacity: 1; transform: rotate(0deg); }


/* ─────────────────────────────────────────────────────────────
   2. CHAT PANEL
   Slides up and scales in from the launcher position.
   Hidden by default (pointer-events: none prevents click-through).
   JS adds `.open` to reveal it.
   ───────────────────────────────────────────────────────────── */
.chat-panel {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 999;

  /* Responsive width — full-width minus margins on small screens */
  width: 380px;
  max-width: calc(100vw - 40px);

  /* Dark panel styling */
  background-color: var(--color-bg-3);
  border: 1px solid var(--color-border-hi);
  border-radius: var(--radius-xl);
  overflow: hidden;

  /* Depth shadow */
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04); /* Subtle inner highlight */

  /* Flex column for header → messages → input stack */
  display: flex;
  flex-direction: column;

  /* Hidden state — scale + fade from bottom-right origin */
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity   0.26s ease,
    transform 0.32s var(--ease-out);
}

/** Visible state toggled by JS */
.chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}


/* ─────────────────────────────────────────────────────────────
   3. PANEL HEADER
   Avatar, name, online status indicator, close button.
   ───────────────────────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 15px 18px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0; /* Prevent header from shrinking in flex column */
}

.chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.chat-header-info { flex: 1; min-width: 0; }

.chat-header-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/** Green dot before "Online now" text */
.chat-header-status span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4ade80;
  flex-shrink: 0;
}

.chat-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  transition:
    color       var(--duration-fast),
    background-color var(--duration-fast);
}
.chat-close-btn:hover {
  color: var(--color-text);
  background-color: var(--color-border);
}


/* ─────────────────────────────────────────────────────────────
   4. MESSAGES AREA
   Scrollable log of conversation bubbles.
   Grows to fill available panel height.
   ───────────────────────────────────────────────────────────── */
.chat-messages {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Fixed height — scrollable when content overflows */
  height: 320px;
  overflow-y: auto;
  /* Thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-hi) transparent;
}

/* WebKit scrollbar (Chrome, Safari) */
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--color-border-hi);
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────
   5. MESSAGE ROWS
   Each row is a flex container with avatar + bubble.
   User messages reverse the flex direction.
   ───────────────────────────────────────────────────────────── */
.chat-msg {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

/** User messages align right */
.chat-msg--user { flex-direction: row-reverse; }

/** Circular avatar beside each message */
.msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6rem;
  flex-shrink: 0;
  /* AI avatar — accent blue */
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.chat-msg--user .msg-avatar {
  /* User avatar — neutral surface */
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

/**
 * Message bubble.
 * AI bubble: round corners with flat bottom-left (tail pointing left).
 * User bubble: round corners with flat bottom-right (tail pointing right).
 */
.chat-bubble {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px 14px 14px 4px; /* AI: bottom-left flat */
  padding: 10px 13px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 84%;
}

.chat-msg--user .chat-bubble {
  background-color: var(--color-accent-dim);
  border-color: transparent;
  color: #ddeeff;
  border-radius: 14px 14px 4px 14px; /* User: bottom-right flat */
}


/* ─────────────────────────────────────────────────────────────
   6. TYPING INDICATOR
   Three animated dots shown while awaiting API response.
   Appended to .chat-messages by chat.js, removed on reply.
   ───────────────────────────────────────────────────────────── */
.chat-bubble.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  min-width: 52px;
}

.chat-bubble.typing span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-text-muted);
  animation: typingDot 1.2s ease-in-out infinite;
}

/** Staggered delay creates a wave effect */
.chat-bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-bubble.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1;   }
}


/* ─────────────────────────────────────────────────────────────
   7. INPUT ROW
   Textarea that auto-resizes (via JS) + send button.
   ───────────────────────────────────────────────────────────── */
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-hi);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  padding: 9px 12px;
  resize: none;
  max-height: 100px;
  transition: border-color var(--duration-fast);
}
.chat-input:focus { border-color: var(--color-accent-dim); }
.chat-input::placeholder { color: var(--color-text-dim); }
.chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/** Send button */
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  border: none;
  color: var(--color-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast),
    transform        var(--duration-fast);
}
.chat-send-btn:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  transform: scale(1.06);
}
.chat-send-btn:disabled {
  background-color: var(--color-surface);
  color: var(--color-text-dim);
  cursor: not-allowed;
  transform: none;
}


/* ─────────────────────────────────────────────────────────────
   8. FOOTER NOTE
   Privacy reassurance below input.
   ───────────────────────────────────────────────────────────── */
.chat-footer-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Shift panel and launcher inward on tablet */
  .chat-panel    { right: 12px; bottom: 88px; }
  .chat-launcher { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  /* Wider panel on mobile — nearly full width */
  .chat-panel {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
  }
}