/*
 * travel-buddy.css — Gruttje travel-buddy UI-pattern (sectie 10a `scope/brand.md`)
 *
 * Register 4.13 · 5 regels T1-T5:
 *   T1 — speech-bubble max 3 woorden
 *   T2 — geen typing-indicator
 *   T3 — geen input-veld binnen bubble
 *   T4 — geen "Stuur bericht"-knop
 *   T5 — tappable, niet "pratend" (het is een icon-affordance, geen conversation)
 *
 * Alternatief voor chatbot-UX. Gruttje reageert op context, user praat niet terug.
 * De speech-bubble is een context-cue, niet een gesprek.
 */

/* ─────────── Container ─────────── */

.tg-travel-buddy {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-2);
  position: relative;
}

/* Gruttje icon-well (ronde avatar met pose daarbinnen) */
.tg-travel-buddy__gruttje {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-out);
}
.tg-travel-buddy__gruttje:hover {
  transform: scale(1.08) rotate(-6deg);     /* visual-refresh FAB-pattern */
  background: var(--accent-soft);
}
.tg-travel-buddy__gruttje svg {
  width: 36px;
  height: 36px;
  pointer-events: none;
}

/* Pose-only variant (small — in nav / badge) */
.tg-travel-buddy__gruttje.sm {
  width: 32px;
  height: 32px;
}
.tg-travel-buddy__gruttje.sm svg {
  width: 24px;
  height: 24px;
}

/* Pose-only variant (large — hero / splash) */
.tg-travel-buddy__gruttje.lg {
  width: 72px;
  height: 72px;
  border-width: 2px;
}
.tg-travel-buddy__gruttje.lg svg {
  width: 56px;
  height: 56px;
}

/* XL (illustrator-fully-sized) */
.tg-travel-buddy__gruttje.xl {
  width: 100px;
  height: 100px;
  border-width: 2.5px;
}
.tg-travel-buddy__gruttje.xl svg {
  width: 80px;
  height: 80px;
}

/* ─────────── Speech-bubble (T1-T4) ─────────── */

/*
 * Outlined bubble (niet solid-fill). Zo blijft het "icon-adjacent context"
 * ipv een chat-partner. Max 3 woorden hard-enforced via line-clamp.
 */
.tg-travel-buddy__bubble {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font: var(--fw-medium) var(--f-sm)/var(--lh-tight) var(--font-sans);
  max-width: 180px;             /* ~3 woorden safeguard — T1 */

  /* 3-woord hard cap: 2 regels max (bij korte woorden) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bubble-tail — kleine driehoek naar Gruttje */
.tg-travel-buddy__bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  background: var(--card);
  border-left: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
  transform: rotate(45deg);
  border-bottom-left-radius: 2px;
}

/* ─────────── Tap-affordance (T5) ─────────── */

/*
 * Bubble is óók tappable (zelfde actie als Gruttje). Hover-feedback
 * maakt duidelijk: dit opent iets (bijv. Weather-sheet, dag-plan-hint).
 */
.tg-travel-buddy[role="button"],
.tg-travel-buddy.tappable {
  cursor: pointer;
}
.tg-travel-buddy[role="button"]:hover .tg-travel-buddy__bubble,
.tg-travel-buddy.tappable:hover .tg-travel-buddy__bubble {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ─────────── Vertical variant (above-icon) ─────────── */

.tg-travel-buddy.stacked {
  flex-direction: column;
  align-items: center;
}
.tg-travel-buddy.stacked .tg-travel-buddy__bubble::before {
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(-45deg);
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  border-left: none;
  border-bottom: none;
}

/* ─────────── Dark theme adjustments ─────────── */

.theme-dark .tg-travel-buddy__gruttje {
  background: var(--card-elevated);
}
.theme-dark .tg-travel-buddy__bubble {
  background: var(--card);
  border-color: var(--line-strong);
}
.theme-dark .tg-travel-buddy__bubble::before {
  background: var(--card);
}

/* ─────────── Accessibility (WCAG 2.1) ─────────── */

.tg-travel-buddy[role="button"]:focus-visible .tg-travel-buddy__gruttje {
  outline: none;
  box-shadow: var(--focus-ring);
}