/* The page is also embedded in an iframe, so the viewport and page must not
   create a second scroll area around the conversation. --app-height is kept
   in sync with visualViewport by app.js and therefore follows the on-screen
   keyboard on iOS and Android. */
html, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

body {
  height: var(--app-height, 100dvh);
  transform: translateY(var(--app-offset-top, 0px));
  transform-origin: top left;
  background: transparent;
  color-scheme: dark;
  display: flex;
  justify-content: center;   /* center horizontally within whatever width the iframe is given */
  align-items: flex-start;   /* but never stretch vertically to fill a taller iframe */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* Everything else stays scoped under .orlov-widget — harmless here since
   it's our own document either way, and it means this same CSS still works
   unmodified if this ever gets embedded inline on a page instead. */

.orlov-widget {
  --card-bg: #250909;
  --card-border: rgba(231, 200, 160, 0.2);
  --bubble-bot: rgba(76, 20, 20, 0.82);
  --bubble-bot-border: rgba(231, 200, 160, 0.16);
  --accent: #d7192d;
  --accent-dark: #8f111c;
  --accent-bright: #f32336;
  --input-bg: rgba(12, 4, 4, 0.58);
  --text: #f2e4d8;
  --muted: #c8b4a7;
  --gold: #e7c8a0;
  --radius-lg: 18px;
  --radius-md: 11px;
  --radius-sm: 9px;

  width: 100%;
  max-width: 100%;
  height: min(
    580px,
    calc(
      var(--app-height, 100dvh)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    )
  );
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: transparent;
  /* Chrome/Samsung Internet on Android silently "boosts" font sizes when a
     page sits in a narrow embedded column on a wide layout — this locks
     our actual font sizes in instead of letting Android guess. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.orlov-widget,
.orlov-widget *,
.orlov-widget *::before,
.orlov-widget *::after {
  box-sizing: border-box;
}

/* ── from tablet width up, the widget sits in a fixed-ish column
   (e.g. next to a video block) instead of stretching full width ─────── */
@media (min-width: 641px) {
  .orlov-widget {
    max-width: 460px;
  }
}

#chat-card {
  height: 100%;
  min-height: 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0%, rgba(215, 25, 45, 0.12), transparent 38%),
    linear-gradient(155deg, #310b0b 0%, var(--card-bg) 56%, #1a0707 100%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42);
  animation: card-in 0.35s ease-out;
}

#chat-header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(20, 5, 5, 0.62);
  border-bottom: 1px solid var(--card-border);
}

#chat-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-dark));
}

.header-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(231, 200, 160, 0.35);
  box-shadow: 0 0 0 4px rgba(215, 25, 45, 0.08);
}

.header-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chat-eyebrow {
  color: #ff7881;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.55px;
}

.header-copy strong {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.1;
}

.chat-status {
  color: var(--muted);
  font-size: 11px;
}

.chat-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #5dcc77;
  box-shadow: 0 0 0 3px rgba(93, 204, 119, 0.12);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#chatbot-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

#chatbot-box::-webkit-scrollbar {
  width: 4px;
}

#chatbot-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

/* Keep a short conversation at the bottom without using justify-content:
   flex-end on the scrolling element (that combination can make old messages
   unreachable once content overflows). The auto margin collapses to zero as
   soon as the conversation is taller than the available space. */
#chatbot-box > :first-child {
  margin-top: auto;
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

.message-row.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-row.bot { align-self: flex-start; }

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--card-border);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.message {
  padding: 9px 13px 7px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
  word-break: break-word;
  min-width: 0; /* flex items default to min-width:auto, which can stop long
                   unbroken text (a long URL, say) from wrapping — this
                   forces it to always respect the row's actual width */
  animation: msg-fade-in 0.15s ease-out;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-text {
  white-space: pre-wrap;
  line-height: 1.45;
}

.message-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-text a:active { opacity: 0.75; }

.msg-time {
  align-self: flex-end;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
}

.message-row.user .msg-time { color: rgba(255, 255, 255, 0.65); }

@keyframes msg-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-row.user .message {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
}

.message-row.bot .message {
  background: var(--bubble-bot);
  border: 1px solid var(--bubble-bot-border);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
}

.message.typing {
  display: flex;
  flex-direction: row; /* .message itself is flex-direction:column (for the
                           text+timestamp stack) — without this override the
                           three dots stack vertically instead of in a row */
  align-items: center;
  gap: 4px;
  padding: 13px 16px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.5;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── quick-reply chips shown once, before the first message ────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 4px;
  align-self: flex-start;
  max-width: 100%;
}

.chip-btn {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(231, 200, 160, 0.2);
  border-left: 3px solid var(--accent-bright);
  color: var(--text);
  border-radius: 8px;
  min-height: 42px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 750;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-left-color 0.15s, transform 0.15s;
  white-space: nowrap;
}

.chip-btn:hover,
.chip-btn:active {
  background: rgba(215, 25, 45, 0.15);
  border-left-color: var(--accent-bright);
  transform: translateX(2px);
}

.chat-loc-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  max-width: 88%;
  align-self: flex-start;
}

.chat-loc-btn {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(231, 200, 160, 0.24);
  border-left: 3px solid var(--accent-bright);
  color: var(--text);
  border-radius: 9px;
  padding: 13px 16px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  width: 100%;
  font: inherit;
}

.chat-loc-btn:hover,
.chat-loc-btn:active {
  background: var(--accent);
  border-color: #ffffff;
}

.branch-action-row {
  width: 100%;
  max-width: 88%;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.branch-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid rgba(231, 200, 160, 0.25);
  border-radius: 9px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}

.branch-action-call {
  color: #ffffff;
  border-color: rgba(243, 35, 54, 0.55);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
}

.branch-action:hover,
.branch-action:active {
  filter: brightness(1.1);
}

#input-row {
  flex: 0 0 auto;
  background: rgba(18, 5, 5, 0.9);
  border-top: 1px solid var(--card-border);
  padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

#msg-input {
  flex: 1;
  resize: none;
  border: 1px solid rgba(231, 200, 160, 0.22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* iOS Safari auto-zooms on focus if an input is under 16px — this is the actual fix, not a workaround */
  background: var(--input-bg);
  color: var(--text);
  max-height: 110px;
  line-height: 1.4;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}

#msg-input::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, new Edge — kills the arrow-button track */
  width: 0;
  height: 0;
}

#msg-input::placeholder { color: #aa9185; }

#msg-input:focus {
  outline: none;
  border-color: rgba(243, 35, 54, 0.78);
  box-shadow: 0 0 0 3px rgba(243, 35, 54, 0.1);
}

#msg-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#send-btn {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  color: var(--text);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
  box-shadow: 0 8px 20px rgba(143, 17, 28, 0.28);
}

#send-btn:hover { filter: brightness(1.08); }
#send-btn:active { transform: scale(0.92); }
#send-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

button:focus-visible,
a:focus-visible,
#chatbot-box:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* narrow-viewport tweaks */
@media (max-width: 380px) {
  .message-row { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  #chat-card, .message, .typing-dot { animation: none; }
}