/* ============================================
   REN CHAT FAB + POPUP
   Floating chat widget — loads on all pages
   via base-app.html. Self-contained component.
   ============================================ */

/* ============================================
   FAB BUTTON
   ============================================ */
.ren-chat-fab {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  background: transparent;
  border-radius: 16px;
  border: none;
  outline: none;
  display: none;            /* hidden by default; shown only on opt-in pages */
  flex-direction: row-reverse;
  align-items: center;
  gap: 0;
  cursor: pointer;
  z-index: 1000;
  padding: 0;
  transition: none;
}
/* Pages that want the resting FAB visible (currently the home page)
   set body.show-chat-fab via the base template. Every other page
   keeps the FAB hidden and exposes the chat through the navbar
   help icon instead. */
body.show-chat-fab .ren-chat-fab { display: flex; }

.ren-fab-icon {
  position: relative;
  width: 134px;
  height: 134px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  z-index: 2;
}

.ren-bubbles {
  width: 100%;
  height: 100%;
}

/* Bubble icon painted in the brand pink token so the resting FAB
   reads as part of the same brand surface as the pill behind it.
   The three front-bubble dots (`.ren-bubble-front-dot` × 3) are the
   most visible "hover dots" — they sit on the white front bubble.
   Christine 2026-06-02: switched from the top-header purple to --pink. */
.ren-bubble-back-path {
  fill: var(--pink);
  transition: fill 0.3s ease;
}
.ren-bubble-back-dot {
  fill: #fff;
  transition: fill 0.3s ease;
}
.ren-bubble-front-path {
  fill: #fff;
  stroke: var(--pink);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.ren-bubble-front-dot {
  fill: var(--pink);
  transition: fill 0.3s ease;
}

.ren-chat-fab:hover .ren-bubble-back-path { fill: rgba(255,255,255,0.5); }
.ren-chat-fab:hover .ren-bubble-back-dot { fill: rgba(255,255,255,0.8); }
.ren-chat-fab:hover .ren-bubble-front-path { fill: #fff; stroke: #fff; }
.ren-chat-fab:hover .ren-bubble-front-dot { fill: var(--pink); }

.ren-fab-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 16px 14px 16px;
  background: transparent;
  border-radius: 16px 0 0 16px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.25s ease,
              padding 0.35s cubic-bezier(.4,0,.2,1);
  padding-left: 0;
  padding-right: 0;
}

.ren-chat-fab:hover .ren-fab-text {
  max-width: 120px;
  opacity: 1;
  padding: 14px 16px 14px 16px;
}

.ren-chat-fab::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 16px;
  /* Yellow → pink gradient on the resting "Ask Ren" pill. Direction kept
     horizontal (90deg). Christine 2026-06-02: switched from purple→cyan to
     --yellow → --pink so the widget reads as a warm brand accent. */
  background: var(--pink);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.ren-chat-fab:hover::before {
  opacity: 1;
}

.ren-chat-fab:hover {
  padding: 0;
}

.ren-chat-fab > * {
  position: relative;
  z-index: 1;
}

.ren-fab-title {
  /* Christine 2026-06-02: "Ask Ren" set to white per request. */
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-family);
  line-height: 1.1;
}

.ren-fab-sparkle {
  font-size: 11px;
  opacity: 0.7;
}

.ren-fab-subtitle {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-family);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ============================================
   CHAT POPUP
   ============================================ */
.ren-chat-popup {
  position: fixed;
  bottom: calc(var(--space-8) + 80px);
  right: var(--space-8);
  width: 380px;
  height: 520px;
  background: var(--white);
  /* Tier B treatment: square top corners, rounded bottom only, with
     a 3px gradient strip pinned to the top edge (see ::before below). */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  visibility: hidden;
}

/* Top border — solid navy. */
.ren-chat-popup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--navy);
  z-index: 1;
  pointer-events: none;
}

.ren-chat-popup.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* ============================================
   HEADER
   ============================================ */
.ren-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-light);
}

.ren-chat-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Avatar = the tri-color RenStars logo itself. No circle background;
   the logo replaces the pink chip we used to render. Sized to the
   former chip footprint so header alignment is unchanged. */
.ren-chat-avatar {
  width: var(--chat-avatar-size);
  height: var(--chat-avatar-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ren-chat-avatar svg {
  width: 100%;
  height: 100%;
}

/* Tri-color stars, largest → smallest: pink / coral / amber.
   Tokens come from tokens/colors.css (brand palette). */
.ren-chat-avatar .ren-star--cyan  { fill: var(--cyan); }
.ren-chat-avatar .ren-star--purple { fill: var(--purple); }
.ren-chat-avatar .ren-star--yellow { fill: var(--yellow); }

.ren-chat-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ren-chat-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ren-chat-header-name {
  font-size: 17px;
  font-weight: var(--font-semibold);
  color: var(--navy);
}

.ren-chat-status-dot {
  display: none;
}

.ren-chat-header-subtitle {
  font-size: 14px;
  color: var(--ink-2);
}

.ren-chat-close {
  width: var(--chat-close-size);
  height: var(--chat-close-size);
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.ren-chat-close:hover {
  background: var(--gray-background);
  color: var(--navy);
}

.ren-chat-close svg {
  width: var(--chat-close-icon);
  height: var(--chat-close-icon);
}

/* ============================================
   BODY + MESSAGES
   ============================================ */
.ren-chat-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--white) 60%, var(--gray-background) 100%);
}

.ren-chat-messages {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Quick-pick chips shown on first open in place of a greeting. Removed
   the moment the user clicks a chip or types their own message. */
.ren-chat-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-self: flex-start;
}

.ren-chat-chip {
  appearance: none;
  border: 1px solid var(--gray-light);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: var(--font-medium);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ren-chat-chip:hover {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--white);
}

.ren-chat-chip:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

.ren-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ren-chat-reset {
  width: var(--chat-close-size);
  height: var(--chat-close-size);
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.ren-chat-reset:hover {
  background: var(--gray-background);
  color: var(--navy);
}

.ren-chat-reset svg {
  width: var(--chat-close-icon);
  height: var(--chat-close-icon);
}

.ren-chat-message {
  max-width: 85%;
  font-size: 16px;
  line-height: 1.55;
}

.ren-chat-message p {
  margin: 0;
}

.ren-message {
  align-self: flex-start;
  background: transparent;
  color: var(--navy);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-xs);
}

.ren-link {
  color: var(--color-pink);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.ren-link:hover {
  text-decoration: underline;
}

.user-message {
  background: var(--gray-background);
  color: var(--navy);
  align-self: flex-end;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-xs);
}

/* ============================================
   INPUT AREA
   ============================================ */
.ren-chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-background);
}

.ren-chat-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 16px;
  line-height: 1.55;
  font-family: var(--font-family);
  outline: none;
  transition: border-color var(--transition-fast);
  background: var(--white);
  resize: none;
  overflow-y: auto;
  min-height: 42px;
  max-height: 140px;
}

.ren-chat-input::placeholder {
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--ink-2);
}

.ren-chat-input:focus {
  border-color: var(--gray-light);
}

.ren-chat-send {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--navy);
  color: white;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.ren-chat-send:hover {
  background: var(--pink);
}

.ren-chat-send svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   CONVERSATION STARTERS
   ============================================ */
.ren-starters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-3);
}

.ren-starter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  line-height: 1.4;
  font-family: var(--font-family);
}

.ren-starter-btn:hover {
  border-color: var(--pink);
  background: var(--gray-background);
}

.ren-starter-icon {
  width: var(--icon-size-starter);
  height: var(--icon-size-starter);
  border-radius: var(--radius-sm);
  background: var(--gray-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.ren-starter-btn:hover .ren-starter-icon {
  background: var(--cyan);
}

.ren-starter-icon svg {
  width: var(--icon-size-starter-svg);
  height: var(--icon-size-starter-svg);
  color: var(--ink-2);
  transition: color var(--transition-fast);
}

.ren-starter-btn:hover .ren-starter-icon svg {
  color: var(--white);
}

/* ============================================
   ANIMATIONS
   ============================================ */
.ren-chat-message.animate-in {
  animation: renMessageSlideIn var(--anim-duration-fast) ease-out forwards;
  opacity: 0;
}

@keyframes renMessageSlideIn {
  from { opacity: 0; transform: translateY(var(--anim-offset-md)); }
  to { opacity: 1; transform: translateY(0); }
}

.ren-starters.animate-in {
  animation: renStartersFadeIn var(--anim-duration-fast) ease-out var(--transition-slow) forwards;
  opacity: 0;
}

@keyframes renStartersFadeIn {
  from { opacity: 0; transform: translateY(var(--anim-offset-sm)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   TYPING INDICATOR
   ============================================ */
.ren-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.ren-typing span {
  width: 6px;
  height: 6px;
  background: var(--gray-mid);
  border-radius: var(--radius-full);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.ren-typing span:nth-child(2) { animation-delay: 0.2s; }
.ren-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .ren-chat-popup {
    width: calc(100% - 32px);
    right: 16px;
    bottom: 100px;
    height: 40vh;
  }

  .ren-chat-fab {
    bottom: 20px;
    right: 0;
  }
  .ren-fab-icon {
    width: 80px;
    height: 80px;
  }
}

/* Touch devices: hide the hover pill backdrop + label entirely.
   `:hover` gets stuck after a tap on touch screens, which would
   leave the pink pill parked on screen and obscure content. Gate
   on real touch (no hover, coarse pointer) instead of viewport
   width so resized desktop browsers keep the desktop behaviour. */
@media (hover: none) and (pointer: coarse) {
  .ren-chat-fab::before,
  .ren-chat-fab:hover::before { display: none !important; }
  .ren-fab-text { display: none !important; }
  .ren-chat-fab:hover .ren-bubble-back-path { fill: var(--pink); }
  .ren-chat-fab:hover .ren-bubble-back-dot { fill: #fff; }
  .ren-chat-fab:hover .ren-bubble-front-path { fill: #fff; stroke: var(--pink); }
  .ren-chat-fab:hover .ren-bubble-front-dot { fill: var(--pink); }
}

/* ============================================
   NAVBAR HELP ICON
   ============================================ */
/* Bare icon button that sits beside the language switcher in the
   navbar's right cluster. No border / background — it matches the
   globe's plain-icon styling so the cluster reads as a row of
   peer affordances rather than a mix of pill + icon. Clicking it
   toggles the Ren chat popup. */
.navbar-help-btn {
  /* Collapse the parent's 40px flex gap down to ~24px so the help
     icon hugs the language switcher the same way the language
     switcher hugs the user avatar (see .top-bar-right > .top-bar-user
     in base.css). */
  margin-right: calc(var(--space-6) - var(--space-10));
  border: none;
  background: transparent;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
}
.navbar-help-btn:hover { color: var(--cyan); }
.navbar-help-btn svg { width: 14px; height: 14px; stroke-width: 1.5; }
/* Hide the navbar help button on pages where the resting FAB is
   already on screen (currently the home page) — no need for two
   entry points to the same widget. */
body.show-chat-fab .navbar-help-btn { display: none; }