/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* User dropdown chevron rotation */
.dropdown[open] .chevron-icon {
  transform: rotate(180deg);
}

/* Ask-input halt: while a question panel is docked above the composer, drop the
   reserved streaming-room min-height on the last message turn (the chat views set
   it via [&>*:last-child]:min-h-[…]). That room only helps while a reply is
   streaming in; a docked #halt_panel means we're waiting on the USER, so without
   this the last turn sits below a tall empty gap and auto-scroll parks on it,
   hiding the question. Reacts live as the panel docks/clears (no JS needed). */
body:has(#halt_panel > *) #messages > *:last-child,
body:has([data-halt-card]) #messages > *:last-child {
  min-height: 0;
}

/* Smooth the reserved-room toggle. When a question docks the min-height drops to
   0, and when it's answered it springs back to the streaming-room height. Both
   ends are concrete lengths (0 ↔ 20/30vh), so transitioning min-height turns
   that snap into a glide — this only ever fires on the halt/answer toggle, never
   while a reply streams (min-height is constant then). */
#messages > *:last-child {
  transition: min-height 240ms ease;
}

/* Ask-input halt: the question panel docks ABOVE the composer, which stays
   present and usable (the user can pick an option, collapse the panel with the
   header chevron, dismiss it with the X, or just keep typing). This mirrors the
   assistant question panel, so the composer is intentionally NOT hidden while a
   question is pending. */

/* Inline ask card enter: fade + slight rise so the question doesn't pop in when
   the agent halts. The answer swaps in place (card → receipt, same message
   flow), so there's no teleport back up from a docked panel. */
@keyframes halt-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.animate-halt-card-in {
  animation: halt-card-in 160ms ease-out;
}

/* Answer swap-in: when a question is answered the server hard-replaces the turn
   with the muted "submitted" receipt + streaming shell. Without this it pops
   (and the card's white bg flips to the receipt's grey). A plain opacity fade —
   NO translate, so the receipt stays anchored where the collapsed card was —
   dissolves that swap. Only applied on the live answer broadcast, never to
   receipts rendered from history on page load. */
@keyframes halt-answer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-halt-answer-in {
  animation: halt-answer-in 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .animate-halt-card-in, .animate-halt-answer-in { animation: none; }
}

/* Compact tooltips: small, no arrow, light text */
.tooltip::before {
  font-weight: 300;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
}
.tooltip::after {
  display: none;
}

/* PDF.js text layer — invisible text overlay for selection and highlighting */
.pdf-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.3;
  line-height: 1;
}

.pdf-text-layer span {
  color: transparent;
  white-space: pre;
  cursor: text;
}

.pdf-text-layer .pdf-highlight {
  background-color: oklch(0.905 0.182 98.111 / 0.5); /* warning/50 */
  color: transparent;
  border-radius: 2px;
}

/* Version history diff highlighting */
.diff-content ins.diff-ins {
  background-color: oklch(0.9 0.1 145 / 0.5);
  color: oklch(0.35 0.1 145);
  text-decoration: none;
  border-radius: 2px;
  padding: 1px 2px;
}
.diff-content del.diff-del {
  background-color: oklch(0.9 0.1 25 / 0.45);
  color: oklch(0.45 0.1 25);
  text-decoration: line-through;
  border-radius: 2px;
  padding: 1px 2px;
}

/* QA Copilot: subtle background tint + gradient border around editor in edit mode */
.qa-copilot-answer [data-answer-editor-target="editView"]:not(.hidden) {
  position: relative;
  margin: -8px;
  padding: 8px;
  border-radius: 12px;
}
.qa-copilot-answer [data-answer-editor-target="editView"]:not(.hidden):has(.ProseMirror-focused)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1.5px;
  background: linear-gradient(135deg, oklch(0.585 0.233 277), oklch(0.585 0.233 330), oklch(0.646 0.222 41));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}