/**
 * Ported from the Tailwind classes in chat-widget/ui/*.tsx. Brand tokens match
 * tailwind.config.ts: brand #0B2545, brand-gold #C9A227, brand-paper #F6F3EC. The `widget`
 * breakpoint (480px) matches tailwind.config.ts's custom screen -- below it the panel is
 * fullscreen (mobile), at or above it it's a fixed-size floating panel.
 */

.gh-chat-root,
.gh-chat-root * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Bubble launcher */

.gh-chat-bubble-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  border: none;
  background: #0b2545;
  color: #fff;
  padding: 12px 20px 12px 14px;
  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.gh-chat-bubble-launcher:hover {
  transform: scale(1.05);
}

.gh-chat-bubble-launcher:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 2px;
}

.gh-chat-bubble-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  background: rgba(201, 162, 39, 0.2);
}

.gh-chat-bubble-label {
  font-size: 14px;
  font-weight: 600;
}

/* Panel shell */

.gh-chat-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 2px solid #c9a227;
  background: #f6f3ec;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 480px) {
  .gh-chat-panel {
    inset: auto;
    bottom: 24px;
    right: 24px;
    height: min(640px, 88vh);
    width: 380px;
    border-radius: 12px;
  }
}

/* Header */

.gh-chat-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background: #0b2545;
  color: #fff;
  padding: 12px 16px;
}

@media (min-width: 480px) {
  .gh-chat-header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

.gh-chat-header--compact {
  padding: 8px 12px;
}

.gh-chat-header-identity {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gh-chat-header-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
}

.gh-chat-header--compact .gh-chat-header-badge {
  height: 28px;
  width: 28px;
  font-size: 12px;
}

.gh-chat-header-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.gh-chat-header-subtitle {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.gh-chat-header-close {
  position: relative;
  border: none;
  background: transparent;
  border-radius: 9999px;
  padding: 4px 8px;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gh-chat-header-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.gh-chat-greeting {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

/* The greeting when the panel opened itself on a rule: set as a bubble from the assistant, so it
   reads as somebody speaking first rather than as the panel's standing copy. */
.gh-chat-greeting--proactive {
  margin: 12px 16px 0;
  padding: 10px 16px;
  max-width: 80%;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gh-chat-footer {
  margin: 0;
  border-top: 1px solid rgba(11, 37, 69, 0.1);
  background: #f6f3ec;
  padding: 8px 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #9ca3af;
}

/* Messages */

.gh-chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  /* The list does its own pinning. The browser's scroll anchoring fights it: rebuilding the
     streaming bubble destroys the node the browser anchored to, and its compensating scrollTop
     adjustments land between our writes, reading as scrolls the visitor never made. */
  overflow-anchor: none;
  padding: 12px 16px;
}

.gh-chat-bubble {
  max-width: 80%;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.gh-chat-bubble p {
  margin: 0;
}

.gh-chat-bubble p + p {
  margin-top: 0.5em;
}

/* A host page styling bare elements (p { color: ... } is common, and the staging welcome page
   does exactly that) beats the colour a bubble sets on itself, because a direct element rule
   wins over inheritance. Everything the markdown renderer emits therefore claims its styling
   explicitly -- inherit, so each bubble variant's own colour is what lands, whatever page the
   legacy embed sits in. The frame never needs this; the rollback arm does. */
.gh-chat-bubble p,
.gh-chat-bubble li,
.gh-chat-bubble strong,
.gh-chat-bubble a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.gh-chat-bubble--user {
  margin-left: auto;
  border-radius: 16px 16px 6px 16px;
  background: #0b2545;
  color: #fff;
}

.gh-chat-bubble--assistant {
  margin-right: auto;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  color: #111827;
}

.gh-chat-list {
  margin: 0;
  padding-left: 20px;
}

.gh-chat-list li + li {
  margin-top: 2px;
}

.gh-chat-link {
  text-decoration: underline;
}

/* Typing indicator */

.gh-chat-typing {
  display: flex;
  width: fit-content;
  gap: 4px;
  border-radius: 16px;
  background: #f3f4f6;
  padding: 12px 16px;
}

.gh-chat-typing-dot {
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  background: #9ca3af;
  animation: gh-chat-bounce 1.4s infinite ease-in-out both;
}

.gh-chat-typing-dot--1 {
  animation-delay: -0.3s;
}

.gh-chat-typing-dot--2 {
  animation-delay: -0.15s;
}

@keyframes gh-chat-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
  }
  40% {
    transform: scale(1);
  }
}

/* Quick replies */

.gh-chat-quick-replies {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 12px;
}

.gh-chat-quick-replies-scroll {
  display: flex;
  flex: 1;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gh-chat-quick-replies-scroll::-webkit-scrollbar {
  display: none;
}

.gh-chat-chip {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid rgba(11, 37, 69, 0.25);
  background: transparent;
  padding: 6px 12px;
  font-size: 14px;
  color: #0b2545;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.gh-chat-chip:hover {
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.1);
}

.gh-chat-scroll-arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(11, 37, 69, 0.25);
  background: transparent;
  padding: 6px;
  color: #0b2545;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.gh-chat-scroll-arrow:hover {
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.1);
}

/* Input row */

.gh-chat-input-row {
  border-top: 1px solid rgba(11, 37, 69, 0.1);
  background: #f6f3ec;
  padding: 10px 12px;
}

.gh-chat-input-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gh-chat-input {
  flex: 1;
  border-radius: 9999px;
  border: 1px solid rgba(11, 37, 69, 0.15);
  background: #fff;
  padding: 8px 16px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gh-chat-input:focus {
  border-color: #c9a227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.gh-chat-send {
  border: none;
  border-radius: 9999px;
  background: #0b2545;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gh-chat-send:hover {
  opacity: 0.9;
}

.gh-chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Live chat: a message from a person at Guidance, and the line announcing they have joined.
   Deliberately unlike the assistant's bubbles -- being answered by a human is what the visitor
   asked for, and they should be able to see it happen. */
.gh-chat-bubble--agent { background: #0b2545; color: #fff; align-self: flex-start; }
.gh-chat-live-banner { margin: 0; padding: 8px 14px; background: #ecfdf5; color: #065f46; font-size: 12.5px; border-bottom: 1px solid #a7f3d0; }

/* The notice at the top of the panel. Amber rather than red: it is telling somebody where to
   write, not warning them off. The link is underlined and inherits the amber, so it reads as part
   of the sentence and still looks like the thing to tap. */
.gh-chat-notice { margin: 0; padding: 10px 14px; background: #fffbeb; color: #78350f; font-size: 12.5px; line-height: 1.5; border-bottom: 1px solid #fde68a; }
.gh-chat-notice-link { color: inherit; font-weight: 600; text-decoration: underline; word-break: break-word; }

/* Suspended: the notice stands in for the greeting, so it sits in the body rather than as a band
   across the top. Rounded and inset, at the greeting's size -- it is the panel's message now, not
   a strip above one. */
.gh-chat-notice--greeting { margin: 12px 16px 0; padding: 14px 16px; border: 1px solid #fde68a; border-radius: 10px; font-size: 14px; }

/* "Talk to a person": only drawn while somebody can actually come (see chat-widget.js). Outlined
   rather than filled, so it reads as an option next to the conversation, not as the thing to do. */
.gh-chat-person { padding: 6px 14px 0; }
.gh-chat-person-button {
  width: 100%; padding: 8px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
  background: #fff; color: #0b2545; border: 1px solid #0b2545;
}
.gh-chat-person-button:hover { background: #f2f5f9; }
.gh-chat-person-button:disabled { opacity: .5; cursor: default; }

/* Rating a conversation with a person, once they have left it. */
.gh-chat-rating { margin: 10px 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; text-align: center; }
.gh-chat-rating-title { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: #0b2545; }
.gh-chat-rating-stars { display: flex; justify-content: center; gap: 4px; }
.gh-chat-rating-star { padding: 2px 4px; border: 0; background: none; font-size: 26px; line-height: 1; color: #cbd5e1; cursor: pointer; }
.gh-chat-rating-star:hover, .gh-chat-rating-star--on { color: #f59e0b; }
.gh-chat-rating-star:focus-visible, .gh-chat-rating-send:focus-visible, .gh-chat-rating-skip:focus-visible { outline: 2px solid #0b2545; outline-offset: 2px; }
.gh-chat-rating-comment { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 13px; resize: none; }
.gh-chat-rating-send { margin-top: 8px; padding: 7px 16px; border: 0; border-radius: 999px; background: #0b2545; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.gh-chat-rating-send:disabled { opacity: 0.6; cursor: progress; }
.gh-chat-rating-skip { margin-top: 4px; padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 12px; color: #64748b; text-decoration: underline; cursor: pointer; }
.gh-chat-rating-thanks { margin: 0; font-size: 13px; color: #065f46; }

/* A line from the widget itself in the transcript: "Hana has left the chat." Quiet, centred,
   the muted grey of the footer -- it is information, not a message from anybody. */
.gh-chat-system-line { margin: 2px auto; padding: 2px 10px; font-size: 12px; color: #6b7280; text-align: center; }

/* "Hana is typing..." while a person from Guidance writes a reply. */
.gh-chat-agent-typing { display: flex; align-items: center; gap: 8px; margin: 4px 14px 8px; font-size: 12px; color: #475569; }
.gh-chat-agent-typing .gh-chat-typing { margin: 0; }