/* ===================================================================
   Planner Companion helpbot — floating launcher bubble + chat panel.
   JPD-style: circular avatar bubble bottom-right with an accent ring
   (amber in dark mode, lavender in light mode). Uses shared.css tokens.
   =================================================================== */

.companion-root {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  /* Stack the panel above the bubble; bubble stays pinned bottom-right. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (min-width: 1024px) {
  .companion-root { right: 32px; bottom: 32px; }
}

/* ── Launcher bubble ─────────────────────────────────────────────── */

.companion-bubble {
  order: 2; /* always below the panel */
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Matte gap between the avatar and the ring (~56px image in 64px bubble). */
  padding: 4px;
  cursor: pointer;
  background: var(--bg-card, #fff);
  border: none;
  /* Theme-aware ring/glow/drop tokens so one pulse keyframe serves both modes.
     --accent-fill is already lavender in light mode, amber in dark. */
  --ring-color: var(--accent-fill, #9B8EC4);
  --ring-glow: rgba(155, 142, 196, 0.5);
  --bubble-drop: 0 4px 16px rgba(155, 142, 196, 0.25);
  box-shadow: 0 0 0 2px var(--ring-color), var(--bubble-drop);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  /* Gentle idle "heartbeat" — draws the eye without being anxious. */
  animation: companion-pulse 2.5s ease-in-out infinite;
}

.companion-bubble img {
  width: 100%;
  height: 100%;
  /* The character sits in the top ~80% of the source (empty space below), so
     `cover` with a slight upward bias seats the whole figure centered and
     crops the empty bottom — matches the About photo. Verified visually. */
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: 50%;
  display: block;
}

/* Idle ring pulse: animates box-shadow only (no layout/repaint thrash). */
@keyframes companion-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--ring-color), var(--bubble-drop);
  }
  50% {
    box-shadow: 0 0 0 4px var(--ring-color),
                0 0 12px 2px var(--ring-glow),
                var(--bubble-drop);
  }
}

/* Stop pulsing once the user acknowledges it: on hover, while the panel is
   open, or after they've opened it at least once this session (is-seen). */
.companion-bubble:hover,
.companion-bubble.is-seen,
.companion-root.is-open .companion-bubble {
  animation: none;
}

/* Fallback glyph shown if the avatar image fails to load (any size) */
.companion-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-subtle, #F5F7FA);
  line-height: 1;
}

.companion-bubble-avatar.companion-fallback { width: 100%; height: 100%; font-size: 30px; background: transparent; }

.companion-bubble:hover {
  transform: scale(1.05);
  /* Acknowledge the user: brighten + thicken the ring, lift the drop. */
  box-shadow: 0 0 0 3px var(--ring-color),
              0 0 14px 2px var(--ring-glow),
              0 6px 20px rgba(155, 142, 196, 0.35);
}

.companion-bubble:focus-visible {
  outline: 3px solid var(--accent-fill, #9B8EC4);
  outline-offset: 3px;
}

[data-theme="dark"] .companion-bubble {
  background: var(--bg-card, #1A1A1A);
  --ring-glow: rgba(212, 134, 42, 0.5);
  --bubble-drop: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .companion-bubble:hover {
  box-shadow: 0 0 0 3px #E89B45,
              0 0 14px 2px var(--ring-glow),
              0 6px 22px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .companion-bubble:focus-visible {
  outline-color: var(--accent-fill, #D4862A);
}

/* Hide the bubble while the panel is open on small screens so they don't
   overlap (panel goes near-fullscreen on mobile). */
.companion-root.is-open .companion-bubble {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 600px) {
  .companion-root.is-open .companion-bubble {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Chat panel ──────────────────────────────────────────────────── */

.companion-panel {
  order: 1;
  width: 380px;
  max-width: calc(100vw - 48px);
  max-height: 560px;
  height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  /* Slide-up + fade-in entrance */
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.companion-panel[hidden] { display: none; }

.companion-root.is-open .companion-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Panel header */
.companion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  flex-shrink: 0;
}

/* Small avatars (header 32px, message 24px) are an inline aperture SVG in a
   ringed circle — razor-sharp at any size, no PNG scaling. The bubble + About
   page keep the full character PNG. */
.companion-header-avatar,
.companion-msg-avatar {
  background: transparent;
  border-radius: 50%;
  border: 1.5px solid var(--accent-fill, #9B8EC4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.companion-header-avatar {
  width: 32px;
  height: 32px;
  padding: 4px;
}

.companion-msg-avatar {
  width: 24px;
  height: 24px;
  padding: 3px;
}

/* The SVG itself: fills the padded circle and follows the theme accent
   (lavender light / amber dark) via currentColor. */
.companion-icon {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--accent-fill, #9B8EC4);
}

/* Keep the bubble PNG sharper when scaled below its native size. */
.companion-bubble img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.companion-header-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-heading, #111827);
  flex: 1;
  line-height: 1.2;
}

.companion-header-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #6B7280);
}

.companion-close {
  background: none;
  border: none;
  color: var(--text-muted, #6B7280);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.companion-close:hover {
  background: var(--bg-subtle, #F5F7FA);
  color: var(--text-primary, #2D3748);
}

.companion-close:focus-visible {
  outline: 2px solid var(--accent-fill, #9B8EC4);
  outline-offset: 1px;
}

/* Panel body — conversation */
.companion-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card, #fff);
  /* Theme-aware scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Theme-aware scrollbar (WebKit/Chromium) */
.companion-messages::-webkit-scrollbar {
  width: 8px;
}

.companion-messages::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.companion-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.companion-messages::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.companion-msg {
  max-width: 85%;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 14px;
  padding: 10px 13px;
  word-wrap: break-word;
}

.companion-msg.assistant {
  align-self: flex-start;
  background: var(--bg-subtle, #F5F7FA);
  color: var(--text-primary, #2D3748);
  border-bottom-left-radius: 4px;
}

.companion-msg.user {
  align-self: flex-end;
  margin-left: auto;
  background: var(--accent-fill-strong, #6F6299);
  color: var(--accent-on, #fff);
  border-bottom-right-radius: 4px;
}

[data-theme="dark"] .companion-msg.user {
  background: var(--accent-fill, #D4862A);
  color: #1A1A1A;
}

/* Bot message row with small avatar to the left */
.companion-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

.companion-msg-row .companion-msg-avatar {
  margin-top: 2px;
}

.companion-msg-row .companion-msg.assistant {
  max-width: calc(100% - 32px);
}

/* Markdown inside assistant messages — compact spacing */
.companion-msg.assistant p { margin: 0 0 6px; }
.companion-msg.assistant > :last-child { margin-bottom: 0; }
.companion-msg.assistant ul { margin: 4px 0; padding-left: 18px; }
.companion-msg.assistant li { margin-bottom: 3px; }
.companion-msg.assistant strong { font-weight: 600; }
.companion-msg.assistant h3,
.companion-msg.assistant h4 { margin: 8px 0 4px; font-size: 13.5px; font-weight: 600; }

/* Typing indicator */
.companion-msg.typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: var(--bg-subtle, #F5F7FA);
}

.companion-msg.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #6B7280);
  animation: companion-bounce 1.2s infinite ease-in-out;
}

.companion-msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.companion-msg.typing span:nth-child(3) { animation-delay: 0.3s; }

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

/* Suggested question chips */
.companion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.companion-chip {
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--accent-fill-strong, #6F6299);
  background: var(--bg-card, #fff);
  border: 1px solid var(--accent-fill, #9B8EC4);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.companion-chip:hover {
  background: var(--accent-fill-strong, #6F6299);
  color: var(--accent-on, #fff);
  border-color: var(--accent-fill-strong, #6F6299);
}

[data-theme="dark"] .companion-chip {
  color: var(--accent-fill, #D4862A);
  border-color: var(--accent-fill, #D4862A);
  background: transparent;
}

[data-theme="dark"] .companion-chip:hover {
  background: var(--accent-fill, #D4862A);
  color: #1A1A1A;
}

.companion-chip:focus-visible {
  outline: 2px solid var(--accent-fill, #9B8EC4);
  outline-offset: 1px;
}

/* Panel footer — compose row */
.companion-compose {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border, #E2E8F0);
  flex-shrink: 0;
  background: var(--bg-card, #fff);
}

/* The HTML `hidden` attribute (toggled per auth state in companion.js) must win
   over `display: flex` above — author rules outrank the UA [hidden] rule. */
.companion-compose[hidden],
.companion-demo-footer[hidden] { display: none; }

.companion-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-primary, #2D3748);
  background: var(--bg-subtle, #F5F7FA);
  border: 1px solid var(--border-input, #B0B8C4);
  border-radius: 12px;
  padding: 10px 12px;
  resize: none;
}

.companion-input:focus {
  outline: none;
  border-color: var(--accent-fill, #9B8EC4);
}

.companion-input::placeholder { color: var(--text-muted, #6B7280); }

.companion-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--accent-fill-strong, #6F6299);
  color: var(--accent-on, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.companion-send svg { width: 18px; height: 18px; display: block; }

.companion-send:hover:not(:disabled) { background: var(--accent-fill, #9B8EC4); }

.companion-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

[data-theme="dark"] .companion-send {
  background: var(--accent-fill, #D4862A);
  color: #1A1A1A;
}

.companion-send:focus-visible {
  outline: 2px solid var(--accent-fill, #9B8EC4);
  outline-offset: 2px;
}

/* Demo (anonymous) footer — one prominent signup CTA, no text input. */
.companion-demo-footer {
  padding: 16px;
  text-align: center;
  border-top: 1px solid var(--border, #E2E8F0);
  background: var(--bg-card, #fff);
  flex-shrink: 0;
}

.companion-signup-cta {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-on, #fff);
  background: var(--accent-fill-strong, #6F6299);
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.companion-signup-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow, rgba(155, 142, 196, 0.45));
}

[data-theme="dark"] .companion-signup-cta {
  background: var(--accent-fill, #D4862A);
}

.companion-signup-cta:focus-visible {
  outline: 2px solid var(--accent-fill, #9B8EC4);
  outline-offset: 2px;
}

.companion-demo-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted, #6B7280);
  opacity: 0.8;
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .companion-root {
    right: 20px;
    bottom: 20px;
    left: 20px;
    align-items: flex-end;
  }

  .companion-panel {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 120px);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .companion-bubble,
  .companion-panel { transition: opacity 0.15s ease; transform: none; }
  .companion-root.is-open .companion-panel { transform: none; }
  .companion-bubble { animation: none; }
  .companion-msg.typing span { animation: none; }
}