/*
 * application.css
 * Only keeps dynamically-injected chat bubble styles (from rag-chat Stimulus controller).
 * All layout/nav/card styles are handled by Tailwind in tailwind/application.css.
 */

/* ─── Mobile viewport lock + keyboard-aware input stack ────────────────────
   Goal on mobile (chat page only — body.app-locked):
     • The page chrome (header + KB list + chat messages) must stay 100% still
       when the on-screen keyboard opens or closes — no layout shift, ever.
     • Only the textarea/file-preview block (.chat-input-stack) lifts up to
       sit anchored above the keyboard. Lift amount comes from --kbd-h which
       rag_chat_controller computes from window.visualViewport.
   Implementation:
     • Body & html locked to the SMALL viewport height (100svh) so the layout
       does not respond to keyboard / URL-bar visibility changes.
     • overflow: hidden + overscroll-behavior: none so nothing can be scrolled
       off the visible area (fixes the bug where the header used to overlap
       the chat after the keyboard closed).
   Cross-browser: 100svh + VisualViewport API are supported in iOS Safari
   ≥ 15.4, Android Chrome ≥ 108, Samsung Internet, Firefox Mobile, Edge Mobile.
*/
@media (max-width: 767px) {
  html:has(body.app-locked),
  body.app-locked {
    height: 100svh;
    min-height: 0;             /* override Tailwind's min-h-screen on body */
    overflow: hidden;
    overscroll-behavior: none; /* no rubber-band / pull-to-refresh */
  }

  body.app-locked .chat-input-stack {
    transform: translateY(calc(-1 * var(--kbd-h, 0px)));
    transition: transform 0.18s ease-out;
    will-change: transform;
    position: relative;
    z-index: 10;               /* always on top of messages while floating */
  }
}

/* ─── Chat message bubbles (injected by rag-chat_controller.js) ─── */

/* Row wrapper: avatar + bubble side by side */
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.chat-row-user    { flex-direction: row-reverse; }   /* bubble left of avatar, both on the right */
.chat-row-system  { justify-content: center; }

/* Avatar circle — same user / bot iconography on mobile and desktop (rag_chat_controller) */
.chat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;       /* h-7 */
  height: 1.75rem;      /* w-7 */
  border-radius: 9999px;
  flex-shrink: 0;
}
.chat-avatar-user { background-color: hsl(217, 91%, 50%); color: #ffffff; }
.chat-avatar-bot  { background-color: hsl(215, 20%, 92%); color: hsl(215, 20%, 42%); }

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.chat-message {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  max-width: 85%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* align-self removed — positioning handled by .chat-row-user / .chat-row-assistant flex direction */
.chat-message-user {
  background: hsl(217, 91%, 50%);
  color: #ffffff;
  border-bottom-right-radius: 0.25rem;
}

.chat-message-assistant {
  background: #ffffff;
  color: hsl(222, 47%, 10%);
  border: 1px solid hsl(215, 20%, 88%);
  border-bottom-left-radius: 0.25rem;
}

.chat-message-system {
  background: hsl(215, 20%, 95%);
  color: hsl(215, 20%, 42%);
  font-size: 0.8125rem;
  text-align: center;
  max-width: 90%;
  border: 1px solid hsl(215, 20%, 88%);
  border-radius: 0.75rem;
}

.chat-message-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  max-width: 90%;
}

.chat-message-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Answer prose inside assistant bubble */
.chat-message-assistant p.answer-p {
  margin: 0 0 0.6rem 0;
  line-height: 1.6;
}
.chat-message-assistant p.answer-p:last-child { margin-bottom: 0; }
.chat-message-assistant strong { font-weight: 600; color: hsl(222, 47%, 8%); }
.chat-message-assistant em { font-style: italic; }
.chat-message-assistant hr.answer-hr {
  border: none;
  border-top: 1px solid hsl(215, 20%, 90%);
  margin: 0.75rem 0;
}

/* Citations */
.chat-message-text .citation {
  color: hsl(217, 91%, 45%);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}
.chat-message-text .citation:hover { color: hsl(217, 91%, 35%); }

/* ─── References section ─── */
.chat-references {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(215, 20%, 90%);
}
.chat-references-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(222, 47%, 10%);
  margin: 0 0 0.75rem 0;
}
.chat-references-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chat-references-list li {
  font-size: 0.875rem;
  color: hsl(215, 20%, 35%);
  line-height: 1.5;
}
.chat-references-list .citation-number {
  font-weight: 600;
  color: hsl(217, 91%, 45%);
  margin-right: 0.5rem;
}

/* ─── Docs consulted block (shown before answer) ─── */
.docs-consulted {
  background: hsl(217, 91%, 97%);
  border: 1px solid hsl(217, 91%, 88%);
  border-left: 3px solid hsl(217, 91%, 50%);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.docs-consulted-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(217, 91%, 35%);
  margin: 0 0 0.5rem 0;
}
.docs-consulted-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.docs-consulted-list li {
  font-size: 0.875rem;
  color: hsl(222, 47%, 15%);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.docs-consulted-bullet {
  font-weight: 700;
  color: hsl(217, 91%, 50%);
  flex-shrink: 0;
}
.docs-consulted-name { font-weight: 600; word-break: break-word; }

/* ─── Typing indicator (injected by controller) ─── */
.chat-typing-indicator {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid hsl(215, 20%, 88%);
  border-radius: 1rem;
  border-bottom-left-radius: 0.25rem;
}
.chat-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(215, 20%, 65%);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ─── Vision fallback banner ─── */
.vision-fallback-banner {
  margin: 8px 0;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: hsl(217, 91%, 35%);
  background: hsl(217, 91%, 96%);
  border: 1px solid hsl(217, 91%, 85%);
  border-radius: 6px;
}

/* ─── Scrollbar: light theme ─── */
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: hsl(215, 20%, 82%);
  border-radius: 9999px;
}
.chat-messages::-webkit-scrollbar-track { background: transparent; }

/* ─── Flash: thin animated bar at nav bottom edge ─── */
@keyframes flash-bar {
  0%   { transform: scaleX(0); opacity: 0; }
  20%  { transform: scaleX(1); opacity: 1; }
  65%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.flash-bar-inner {
  transform-origin: left center;
  animation: flash-bar 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ─── Brand wordmark ─── */
.brand-wordmark {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.03em;
}
.brand-suffix {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ─── Mobile KB document selection cards ─── */
.mobile-doc-btn {
  -webkit-tap-highlight-color: transparent;
}
.mobile-doc-btn[data-selected="true"] {
  background-color: hsl(217, 91%, 97%);
  border-color: hsl(217, 91%, 50%);
}
.mobile-doc-btn[data-selected="true"] .mobile-doc-checkbox {
  background-color: hsl(217, 91%, 50%);
  color: #ffffff;
}

/* ─── Image Lightbox (injected by image_lightbox_controller.js) ─── */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-overlay.hidden { display: none; }

.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.image-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  touch-action: pinch-zoom;
}

.image-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  filter: blur(12px);
  transform: scale(1.02);
  transition: filter 220ms ease-out, transform 220ms ease-out;
}
.image-lightbox-stage img[data-loaded="true"] {
  filter: blur(0);
  transform: scale(1);
}

@media (min-width: 768px) {
  .image-lightbox-stage img {
    max-width: none;
    max-height: none;
  }
}

.image-lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.image-lightbox-close {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background 0.15s ease;
}
.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
  background: rgba(0,0,0,0.85);
  outline: 2px solid hsl(217, 91%, 60%);
  outline-offset: 2px;
}