/* ── Paul: the Pilot Door AI co-pilot avatar ─────────────────────
   Big hero Paul on the welcome screen (with typed speech bubble) and
   a floating dock Paul that reacts during a chat.
   States driven by paul.js via .paul--idle/greeting/thinking/searching/
   talking/happy on the .paul-avatar wrapper. */

/* ── Hero (welcome screen) ───────────────────────────────────── */
.paul-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 18px auto 10px;
  max-width: 640px;
  text-align: left;
}

.paul-avatar {
  user-select: none;
  position: relative;
}

/* ── Paul is the realistic mp4 portrait ───────────────────────────
   A looping clip at /static/paul-realistic.(webm|mp4). Two stacked copies fade
   the loop point (paul.js) so there's no seam. During the brief load a neutral
   placeholder circle shows (paul--novideo); the video then fades in over it.
   The clip can't change pose, so reactive states drive an overlay ring + dots. */
.paul-media { position: relative; width: 100%; aspect-ratio: 1 / 1; line-height: 0; }
.paul-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(198, 161, 91, .55);
  opacity: 0;
  transition: opacity .55s linear;   /* reveal + loop crossfade */
}
/* Neutral placeholder circle — matches the portrait's light-grey studio backdrop
   so the video fades in seamlessly. Bottom layer; the opaque video covers it. */
.paul-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #eef0f2, #d9dcdf);
  box-shadow: inset 0 0 0 2px rgba(198, 161, 91, .55);
  animation: paul-ph-pulse 1.6s ease-in-out infinite;
}
@keyframes paul-ph-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.paul-avatar:not(.paul--novideo) .paul-placeholder { animation: none; }  /* covered once video is in */
/* Keep the video hidden until it's revealed */
.paul-avatar.paul--novideo .paul-video { display: none; }
/* State cues hidden during the placeholder (loading) moment */
.paul-avatar.paul--novideo .paul-ring,
.paul-avatar.paul--novideo .paul-dots { display: none; }

/* Overlays sit above the (z-indexed) crossfading video layers */
.paul-ring, .paul-dots { z-index: 3; }

/* State ring: glows/pulses around the portrait while Paul works */
.paul-ring {
  position: absolute; inset: -3px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(198, 161, 91, .75), 0 0 14px rgba(198, 161, 91, .45);
  transition: opacity .25s ease;
}
.paul--thinking .paul-ring,
.paul--searching .paul-ring { opacity: 1; animation: paul-ring-pulse 1.3s ease-in-out infinite; }
.paul--happy .paul-ring,
.paul--greeting .paul-ring { opacity: 1; }
@keyframes paul-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.06); opacity: 1; }
}
/* Thinking dots (video mode) */
.paul-dots {
  position: absolute; top: -5px; right: -5px;
  display: none; gap: 3px; align-items: center;
  padding: 3px 5px; border-radius: 10px; background: rgba(14, 22, 38, .92);
}
.paul-dots i { width: 4px; height: 4px; border-radius: 50%; background: #C6A15B; animation: paul-dot-blink 1.4s infinite; }
.paul-dots i:nth-child(2) { animation-delay: .2s; }
.paul-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes paul-dot-blink { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.paul-avatar:not(.paul--novideo).paul--thinking .paul-dots { display: flex; }
/* Talking: gentle pulse of the frame */
.paul-avatar:not(.paul--novideo).paul--talking .paul-video { animation: paul-talk-pulse .9s ease-in-out infinite; }
@keyframes paul-talk-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(198, 161, 91, .55); }
  50%      { box-shadow: inset 0 0 0 3px rgba(198, 161, 91, .95); }
}

.paul-avatar--hero {
  width: 230px;
  flex-shrink: 0;
  cursor: pointer;
  filter: drop-shadow(0 10px 22px rgba(31, 44, 68, .25));
  transition: transform .15s ease;
}
.paul-avatar--hero:hover { transform: scale(1.03); }

/* Speech bubble with a tail pointing at Paul */
.paul-speech {
  position: relative;
  background: var(--surface, #fff);
  border: 1.5px solid #C6A15B;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 6px 22px rgba(31, 44, 68, .10);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text, #1c2430);
  min-height: 74px;
  min-width: 260px;
  flex: 1;
}
.paul-speech::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 54px;
  width: 16px;
  height: 16px;
  background: var(--surface, #fff);
  border-left: 1.5px solid #C6A15B;
  border-bottom: 1.5px solid #C6A15B;
  transform: rotate(45deg);
}
.paul-speech-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #C6A15B;
  margin-bottom: 6px;
}
.paul-caret {
  display: none;
  width: 2px;
  height: 1em;
  background: #C6A15B;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: paul-caret-blink .8s steps(1) infinite;
}
.paul-caret.on { display: inline-block; }
@keyframes paul-caret-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

@media (max-width: 640px) {
  .paul-hero { flex-direction: column; gap: 8px; margin: 4px auto 4px; text-align: center; }
  /* Smaller than desktop so Paul + his speech bubble fit above the input
     bar on short mobile viewports without clipping or needing a scroll. */
  .paul-avatar--hero { width: 100px; }
  .paul-speech { min-width: 0; width: 100%; font-size: 14.5px; min-height: 0; }
  .paul-speech::before {
    left: 50%;
    top: -9px;
    margin-left: -8px;
    border: none;
    border-left: 1.5px solid #C6A15B;
    border-top: 1.5px solid #C6A15B;
    transform: rotate(45deg);
  }
}

/* ── Header Paul (permanent, non-draggable co-pilot in the chat header) ── */
.chat-main { position: relative; }
.paul-dock--header {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 210;
}
.paul-dock--header[hidden] { display: none !important; }
.paul-avatar--header {
  position: relative;
  width: 34px;
  cursor: pointer;
  transition: transform .15s ease;
}
.paul-avatar--header:hover { transform: scale(1.08); }
/* Desktop nav is a touch taller — give Paul a bit more presence there. */
@media (min-width: 769px) {
  .paul-avatar--header { width: 38px; }
}
/* Small gold "I have suggestions for you" dot on Paul's shoulder. */
.paul-dock--header.has-suggest .paul-avatar--header::after {
  content: "";
  position: absolute;
  top: 0; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #C6A15B;
  border: 2px solid var(--surface, #fff);
  animation: paul-dot-pulse 1.7s ease-in-out infinite;
}
@keyframes paul-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.25); opacity: .7; }
}

/* ── Desktop: float a BIG Paul in the lower-left gutter beside the chat ──
   (a 34px avatar in the header was wasted space). Mobile keeps the header one. */
.paul-dock--floating {
  position: fixed;
  left: 24px;
  top: 44vh;            /* pre-JS fallback; paul.js refines + persists the spot */
  z-index: 80;
  display: block;
  cursor: grab;
  touch-action: none;   /* let Paul be dragged without the page scrolling */
}
.paul-dock--floating.is-dragging { cursor: grabbing; }
.paul-dock--floating[hidden] { display: none !important; }
.paul-dock--floating .paul-avatar--header {
  width: 104px;
  filter: drop-shadow(0 12px 24px rgba(31, 44, 68, .30));
}
/* Bigger "has suggestions" dot to match the bigger avatar */
.paul-dock--floating.has-suggest .paul-avatar--header::after {
  width: 14px; height: 14px; top: 6px; right: 6px;
}
/* Suggestions open ABOVE the floating Paul (he sits near the bottom) */
.paul-dock--floating .paul-suggest {
  top: auto;
  bottom: calc(100% + 12px);
  left: 0;
}
.paul-dock--floating .paul-suggest.open { animation: paul-suggest-up .16s ease-out; }
@keyframes paul-suggest-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paul-dock--floating .paul-suggest::after {
  top: auto;
  bottom: -8px;
  border-left: none; border-top: none;
  border-right: 1.5px solid #C6A15B;
  border-bottom: 1.5px solid #C6A15B;
}

/* ── Suggestion popover (opens below the header avatar) ──────────── */
.paul-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 300px;
  background: var(--surface, #fff);
  border: 1.5px solid #C6A15B;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(31, 44, 68, .18);
  display: none;
  flex-direction: column;
  gap: 7px;
  z-index: 211;
}
.paul-suggest.open { display: flex; animation: paul-suggest-in .16s ease-out; }
@keyframes paul-suggest-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paul-suggest::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 16px;
  width: 14px;
  height: 14px;
  background: var(--surface, #fff);
  border-left: 1.5px solid #C6A15B;
  border-top: 1.5px solid #C6A15B;
  transform: rotate(45deg);
}
/* Mobile: Paul hangs to the left of the centered title, so anchoring the
   popover to him would push it off the left edge. Instead it anchors to the
   full-width header (see .mobile-hdr-center .paul-dock--header { position:
   static }) and centers on screen, opening just below the header. */
@media (max-width: 768px) {
  .paul-suggest {
    width: min(320px, calc(100vw - 28px));
    left: 50%;
    transform: translateX(-50%);
  }
  .paul-suggest.open { animation: paul-suggest-in-mobile .16s ease-out; }
  @keyframes paul-suggest-in-mobile {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  /* Centered on screen, not under Paul — an up-arrow would mispoint, so drop it. */
  .paul-suggest::after { display: none; }
}
.paul-suggest-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C6A15B;
}
.paul-suggest-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text, #1c2430);
  background: transparent;
  border: 1px solid rgba(198, 161, 91, .35);
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.paul-suggest-btn:hover {
  background: rgba(198, 161, 91, .10);
  border-color: #C6A15B;
}

/* ── Happy: celebrate bounce (results just landed) ───────────── */
.paul-avatar.paul--happy { animation: paul-bounce .55s ease-in-out 2; }
@keyframes paul-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-5px); }
  70%      { transform: translateY(1px); }
}

/* Respect reduced-motion users: freeze all Paul animation */
@media (prefers-reduced-motion: reduce) {
  .paul-avatar,
  .paul-avatar * { animation: none !important; }
}