/* Chat widget — self-contained tokens so it works with both home.css and style.css.
   Desktop: side sheet that slides in from the right and pushes the page left.
   Mobile (<=560px): full-screen sheet that slides up from the bottom. */

:root { --ebc-sheet-w: min(24rem, 40vw); }

.eb-chat {
  --ebc-bg: #ffffff;
  --ebc-panel: #fafcfd;
  --ebc-fg: #32404f;
  --ebc-muted: rgba(50, 64, 79, 0.58);
  --ebc-border: rgba(50, 64, 79, 0.12);
  --ebc-primary: #e65f2e;
  --ebc-user-bubble: rgba(230, 95, 46, 0.1);
  --ebc-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --ebc-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ebc-serif: "Lora", Georgia, serif;
  font-family: var(--ebc-sans);
  color: var(--ebc-fg);
}

[data-theme="dark"] .eb-chat {
  --ebc-bg: #201b27;
  --ebc-panel: #15121a;
  --ebc-fg: #f2f0f5;
  --ebc-muted: rgba(242, 240, 245, 0.6);
  --ebc-border: rgba(242, 240, 245, 0.14);
  --ebc-user-bubble: rgba(230, 95, 46, 0.18);
}

/* Page shifts left to make room for the sheet */
body {
  transition: padding-right 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
body.eb-chat-push {
  padding-right: var(--ebc-sheet-w);
  /* Shrink the nav's full-bleed width to match, so the bar is pushed
     alongside the page rather than running under the sheet. */
  --nv-avail: calc(100vw - var(--ebc-sheet-w));
}
/* Stops the page behind the full-screen mobile sheet from scrolling.
   overflow: hidden handles mouse wheel and keyboard scrolling; the
   remaining iOS/Android touch-momentum gap is closed by a touchmove
   listener in chat.js. */
body.eb-chat-locked { overflow: hidden; }

/* Side sheet */
.eb-chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: var(--ebc-sheet-w);
  height: 100dvh;
  display: none;
  flex-direction: column;
  background: var(--ebc-panel);
  border-left: 1px solid var(--ebc-border);
  overflow: hidden;
  transform: translateX(100%);
}

.eb-chat.open .eb-chat-panel {
  display: flex;
  animation: ebc-slide-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes ebc-slide-in {
  to { transform: translateX(0); }
}

.eb-chat-head {
  position: relative; /* anchors the info tooltip */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Matches the nav height so this divider lines up with the nav's across
     the sheet edge. */
  min-height: var(--nv-h, 4.125rem);
  padding: 0.5rem 0.85rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--ebc-border);
}
.eb-chat-title {
  font-family: var(--ebc-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
}
/* Info icon + tooltip */
.eb-chat-info { position: static; display: flex; flex-shrink: 0; }

.eb-chat-info-btn {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--ebc-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.eb-chat-info-btn:hover,
.eb-chat-info-btn:focus-visible { color: var(--ebc-fg); }
.eb-chat-info-btn svg { width: 100%; height: 100%; }

.eb-chat-info-tip {
  position: absolute;
  top: calc(100% - 0.35rem);
  left: 1rem;
  right: 1rem;
  z-index: 5;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--ebc-bg);
  border: 1px solid var(--ebc-border);
  box-shadow: 0 6px 20px rgba(50, 64, 79, 0.14);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ebc-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.eb-chat-info:hover .eb-chat-info-tip,
.eb-chat-info:focus-within .eb-chat-info-tip,
.eb-chat-info.open .eb-chat-info-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="dark"] .eb-chat-info-tip {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.eb-chat-refresh,
.eb-chat-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ebc-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.eb-chat-refresh { margin-left: auto; }
.eb-chat-refresh:hover,
.eb-chat-close:hover {
  background: var(--ebc-user-bubble);
  color: var(--ebc-fg);
}
.eb-chat-refresh svg { width: 0.9rem; height: 0.9rem; }
.eb-chat-close svg { width: 0.95rem; height: 0.95rem; }

.eb-chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
}

.eb-chat-msg {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.eb-chat-msg.user {
  align-self: flex-end;
  background: var(--ebc-user-bubble);
  border-bottom-right-radius: 0.25rem;
}
.eb-chat-msg.bot {
  align-self: flex-start;
  background: var(--ebc-bg);
  border: 1px solid var(--ebc-border);
  border-bottom-left-radius: 0.25rem;
}
.eb-chat-msg.error { color: var(--ebc-muted); font-style: italic; }

.eb-chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
}
.eb-chat-typing span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--ebc-muted);
  animation: ebc-bounce 1.2s infinite;
}
.eb-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.eb-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ebc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.eb-chat-starters {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0 1rem 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--ebc-border);
}
.eb-chat-starters:empty { display: none; margin: 0; padding: 0; border: none; }

.eb-chat-starters button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-family: var(--ebc-sans);
  font-size: 0.8rem;
  color: var(--ebc-muted);
  background: none;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem 0.35rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.eb-chat-starters button:hover {
  color: var(--ebc-primary);
  background: var(--ebc-user-bubble);
}
.eb-chat-starter-arrow {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--ebc-muted);
  transition: color 0.15s ease;
}
.eb-chat-starters button:hover .eb-chat-starter-arrow { color: var(--ebc-primary); }

/* Quote attached from a page selection, awaiting a question */
.eb-chat-quote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--ebc-bg);
  border: 1px solid var(--ebc-border);
}
.eb-chat-quote[hidden] { display: none; }

.eb-chat-quote-mark {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: var(--ebc-primary);
}

.eb-chat-quote-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ebc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-chat-quote-clear {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ebc-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.eb-chat-quote-clear:hover { color: var(--ebc-fg); }
.eb-chat-quote-clear svg { width: 0.7rem; height: 0.7rem; }

/* The quote as it appears inside the sent message */
.eb-chat-msg-quote {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--ebc-primary);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ebc-muted);
}

.eb-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1rem 1.4rem;
  border-top: 1px solid var(--ebc-border);
}
.eb-chat-input {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ebc-fg);
  font-family: var(--ebc-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  max-height: 6rem;
}
.eb-chat-input::placeholder { color: var(--ebc-muted); }
.eb-chat-send {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--ebc-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.eb-chat-send:disabled { opacity: 0.35; cursor: default; }
.eb-chat-send:not(:disabled):hover { transform: scale(1.08); }
.eb-chat-send svg { width: 0.95rem; height: 0.95rem; }

/* ---- Select-to-ask ---- */

/* Brand-tinted selection hints that selected text is actionable */
::selection {
  background: rgba(230, 95, 46, 0.22);
}

.eb-ask-pill,
.eb-ask-hint {
  --ebc-primary: #e65f2e;
  position: fixed;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background: var(--ebc-primary);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 2px 6px rgba(50, 64, 79, 0.18), 0 8px 20px rgba(50, 64, 79, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.eb-ask-pill svg,
.eb-ask-hint svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }

.eb-ask-pill.visible,
.eb-ask-hint.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.eb-ask-pill:hover { filter: brightness(1.06); }

/* First-visit discovery hint.
   Anchored to a real phrase on the page rather than floating at the bottom, so
   it teaches *where* the interaction lives. Three parts: a fake selection
   highlight that sweeps across the phrase, a demo copy of the Ask Ev pill above
   it, and a tooltip card below explaining the move. */

.eb-coach-layer {
  position: fixed;
  inset: 0;
  z-index: 69;
  pointer-events: none;
}

/* The sweep. One box per client rect of the target range, clipped from the
   right so it wipes in like a real drag-select. */
.eb-coach-sweep {
  position: fixed;
  border-radius: 3px;
  background: rgba(230, 95, 46, 0.22);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.eb-coach-sweep.swept { clip-path: inset(0 0 0 0); }

/* Demo pill: looks exactly like the real selection pill, but inert. */
.eb-coach-pill {
  position: fixed;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background: #e65f2e;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 2px 6px rgba(50, 64, 79, 0.18), 0 8px 20px rgba(50, 64, 79, 0.18);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eb-coach-pill svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
.eb-coach-pill.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Tooltip card */
.eb-coach {
  position: fixed;
  z-index: 70;
  width: 17rem;
  max-width: calc(100vw - 2rem);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  background: var(--card, #fff);
  color: var(--text, #1d2033);
  border: 1px solid var(--border, rgba(29, 32, 51, 0.12));
  border-radius: 0.75rem;
  padding: 0.85rem 0.95rem;
  box-shadow: 0 2px 6px rgba(50, 64, 79, 0.1), 0 16px 40px rgba(50, 64, 79, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: auto;
}

.eb-coach.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Caret pointing back up at the highlighted phrase. Positioned by JS so it
   tracks the phrase even when the card is clamped to the viewport edge. */
.eb-coach-caret {
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  background: var(--card, #fff);
  border-left: 1px solid var(--border, rgba(29, 32, 51, 0.12));
  border-top: 1px solid var(--border, rgba(29, 32, 51, 0.12));
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

.eb-coach--above .eb-coach-caret {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.eb-coach-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e65f2e;
}

.eb-coach-head svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

.eb-coach-body {
  margin-top: 0.3rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--muted, #5d6070);
}

.eb-coach-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--muted, #5d6070);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.eb-coach-close:hover { opacity: 1; background: rgba(125, 125, 140, 0.12); }

/* Persistent affordance: the nav button explains both ways in on hover, so the
   interaction is still discoverable long after the coach mark is gone. */
.nav-ask { position: relative; }

.nav-ask::after {
  content: "Ask me anything, or select any text on the page";
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: 13rem;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  color: var(--text, #1d2033);
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(29, 32, 51, 0.12));
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  box-shadow: 0 2px 6px rgba(50, 64, 79, 0.1), 0 10px 26px rgba(50, 64, 79, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
  z-index: 60;
}

.nav-ask:hover::after,
.nav-ask:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Touch devices have no hover, and the coach mark carries the lesson there. */
@media (hover: none) {
  .nav-ask::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-ask-pill { transition: opacity 0.16s ease, visibility 0.16s; transform: none; }
  .eb-ask-pill.visible { transform: none; }
  .eb-coach-sweep { transition: none; }
  .eb-coach, .eb-coach-pill { transition: opacity 0.16s ease, visibility 0.16s; transform: none; }
  .eb-coach.visible, .eb-coach-pill.visible { transform: none; }
}

/* Mobile: full-screen sheet that slides up from the bottom */
@media (max-width: 560px) {
  .eb-chat-panel {
    inset: 0;
    width: auto;
    height: auto;
    border: none;
    box-shadow: none;
    transform: translateY(100%);
  }

  .eb-chat.open .eb-chat-panel {
    animation: ebc-sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  /* Respect notches / home indicator */
  .eb-chat-head { padding-top: max(0.85rem, env(safe-area-inset-top)); }
  .eb-chat-form { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }

  .eb-chat-title { font-size: 1.15rem; }
  .eb-chat-msg { max-width: 92%; font-size: 0.95rem; }
  .eb-chat-input { font-size: 1rem; } /* 16px stops iOS zooming on focus */
}

@keyframes ebc-sheet-up {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .eb-chat.open .eb-chat-panel { animation: none; transform: none; }
}