/* Bob chat affordance — floating chat panel with the oval avatar as launcher.
   Only used on the landing today (collapsible). */

.bob-chat {
  position: relative;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* Collapsible = a fixed floating widget, bottom-right. The oval defines the
   anchor; the panel floats above it (absolute, so it reserves no layout space
   when hidden). */
.bob-chat-collapsible {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1900;
  margin: 0;
  max-width: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ---- the oval avatar / launcher ---- */
.bob-oval {
  position: relative;
  width: 64px;
  height: 80px;
  border-radius: 50%;
  border: none;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #d4a574 0%, #b08560 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  display: block;
  transition: transform 0.15s ease;
}
.bob-oval:hover { transform: translateY(-2px); }
.bob-chat:not(.bob-chat-collapsible) .bob-oval { cursor: default; }

.bob-oval-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 250ms ease;
}
.bob-oval-img.bob-fading-out { opacity: 0; }

/* hover-to-smile: a smiling layer that crossfades in over the resting face.
   Crops are matched (same scale/position) so it reads as Bob smiling. */
.bob-oval-smile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.bob-oval:hover .bob-oval-smile { opacity: 1; }

/* ---- mascot launcher: full-body Bob + a cartoon "..." speech bubble ---- */
.bob-mascot { position: relative; }
.bob-mascot-img {
  height: 138px;
  width: auto;
  display: block;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
  transition: transform 0.15s ease;
}
.bob-mascot-img:hover { transform: translateY(-3px) scale(1.02); }

.bob-speech {
  position: absolute;
  top: -38px;                    /* lifted above his hat so it clears his face */
  right: calc(100% - 50px);      /* upper-left of Bob's head */
  background: #fff;
  border: 2px solid #14110f;
  border-radius: 16px;
  padding: 6px 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
  z-index: 2;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #14110f;
  white-space: nowrap;
  animation: bob-speech-pop 0.25s ease;
}
@keyframes bob-speech-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bob-speech::after {   /* tail — points DOWN-RIGHT, toward Bob */
  content: '';
  position: absolute;
  bottom: -9px; right: 16px;
  border-width: 10px 0 0 9px;
  border-style: solid;
  border-color: #14110f transparent transparent transparent;
}
.bob-speech::before {  /* white fill over the tail */
  content: '';
  position: absolute;
  bottom: -6px; right: 18px;
  border-width: 8px 0 0 7px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index: 1;
}
/* hide the greeting bubble while the chat panel is open */
.bob-chat-collapsible[data-collapsed="false"] .bob-speech { display: none; }

/* ---- the chat panel ---- */
.bob-panel {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 3rem);
  height: 440px;
  max-height: calc(100vh - 8rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.bob-chat-collapsible[data-collapsed="false"] .bob-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.bob-panel-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #14110f;
  color: #f6efe2;
  flex-shrink: 0;
}
.bob-panel-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.05rem; }
.bob-panel-sub { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(246, 239, 226, 0.55); }
.bob-panel-close {
  margin-left: auto;
  background: none; border: 0;
  color: rgba(246, 239, 226, 0.7);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.15rem;
}
.bob-panel-close:hover { color: #f6efe2; }

/* ---- message history ---- */
.bob-history {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #faf8f5;
}
.bob-msg {
  max-width: 84%;
  padding: 0.6rem 0.85rem;
  border-radius: 15px;
  font-size: 0.92rem;
  line-height: 1.42;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bob-msg-bob {
  align-self: flex-start;
  background: #efe9e0;
  color: #2a2420;
  border-bottom-left-radius: 4px;
}
.bob-msg-user {
  align-self: flex-end;
  background: #4c6ef5;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bob-msg-typing::after {
  content: '';
  display: inline-block;
  width: 0.9em;
  animation: bob-typing 1.1s steps(4, end) infinite;
}
@keyframes bob-typing {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

/* ---- input ---- */
.bob-bubble {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border-top: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}
.bob-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  outline: none;
}
.bob-input:focus { border-color: #b08560; }
.bob-send {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%; border: 0;
  background: #14110f; color: #fff;
  font-size: 1.05rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bob-send:hover { background: #2a2420; }

@media (max-width: 600px) {
  .bob-chat-collapsible { bottom: 1rem; right: 1rem; }

  /* Full-screen chat on phones. An open panel + the keyboard leaves no usable
     page behind it, so Bob takes the whole viewport like a native messaging app
     rather than the old awkward mid-size (62vh) that covered things but not
     cleanly. */
  .bob-panel {
    position: fixed;
    inset: 0;
    /* The app reserves a scrollbar gutter (scrollbar-gutter: stable, the
       layout-jump fix), which shrinks BOTH 100% and 100vw here — so JS sets
       --bob-vw = window.innerWidth for an exact full-bleed width. The 100vw is
       the no-JS fallback (fine on phones, which have no persistent gutter). */
    width: var(--bob-vw, 100vw);
    max-width: none;
    height: 100vh;                 /* fallback for old browsers */
    height: 100dvh;                /* real visible area, minus browser chrome */
    max-height: none;
    border-radius: 0;
    z-index: 2000;
    transform: translateY(12px);   /* plain slide-up; no scale at full screen */
    transform-origin: center;
  }
  /* When the keyboard is up, JS sets --bob-vh to visualViewport.height so the
     input rides above the keyboard instead of hiding behind it (the classic iOS
     fixed-bottom-input problem). Falls back to 100dvh when JS hasn't set it. */
  .bob-chat-collapsible[data-collapsed="false"] .bob-panel {
    transform: none;
    height: var(--bob-vh, 100dvh);
  }

  /* Hide the launcher while the panel is open — no point floating the oval over
     a full-screen chat; it would sit on top of Bob's own conversation. */
  .bob-chat-collapsible[data-collapsed="false"] .bob-oval,
  .bob-chat-collapsible[data-collapsed="false"] .bob-mascot { display: none; }

  /* Notch + home-indicator safe areas, and a comfortable close target (>=44px). */
  .bob-panel-head { padding-top: calc(0.85rem + env(safe-area-inset-top)); }
  .bob-bubble { padding-bottom: calc(0.65rem + env(safe-area-inset-bottom)); }
  .bob-panel-close { font-size: 1.9rem; padding: 0.2rem 0.55rem; line-height: 1; }
}

/* Lock the page behind the full-screen chat so it can't rubber-band/scroll.
   Set on <body> by the state machine only while a full-screen panel is open. */
body.bob-open { overflow: hidden; }