/**
 * Scolta — Base search UI styles.
 *
 * All class names prefixed with "scolta-" to avoid conflicts with
 * host page styles. Colors are neutral (no site-specific branding).
 *
 * Platform adapters can override any of these in their own stylesheets.
 * CSS custom properties are provided for easy theming.
 */

:root {
  --scolta-primary: #1a3a5c;
  --scolta-primary-hover: #0f2a44;
  --scolta-accent: #4a7fb5;
  --scolta-bg: #f5f5f5;
  --scolta-card-bg: #fff;
  --scolta-text: #333;
  --scolta-text-muted: #666;
  --scolta-text-light: #888;
  --scolta-border: #ddd;
  --scolta-highlight: #fff3cd;
  --scolta-summary-bg-start: #f0f7ff;
  --scolta-summary-bg-mid: #e8f4fe;
  --scolta-summary-border: #c4d9f2;
  --scolta-badge-bg: #e8f0fe;

  /* Search as you type (see docs/SAYT.md). Restyle the dropdown by overriding
     these; nothing below needs a selector more specific than one class. */
  --scolta-sayt-bg: var(--scolta-card-bg);
  --scolta-sayt-border: var(--scolta-border);
  --scolta-sayt-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  --scolta-sayt-radius: 8px;
  --scolta-sayt-max-height: 22rem;
  --scolta-sayt-active-bg: var(--scolta-badge-bg);
  --scolta-sayt-z-index: 50;

  /* AI summary layout reservation (see docs/AI_SUMMARY_LAYOUT.md).
     The slot holds this height from the frame the results paint in, and keeps
     it through loading, resolution and error, so an arriving
     summary never pushes the result list down.

     Tune it with the line count. --scolta-summary-chrome is the allowance for
     the label, the follow-up row and the panel's own padding; the text region
     takes whatever is left, so the visible line count tracks the budget
     closely rather than exactly.

     Opt out with .scolta-ai-summary { --scolta-summary-collapsed-height: auto }
     — the slot then sizes to its content as it did before, which reintroduces
     layout shift. */
  --scolta-summary-collapsed-lines: 6;
  --scolta-summary-line-height: 1.7;
  --scolta-summary-chrome: 6.5rem;
  --scolta-summary-font-size: 0.95rem;
}

/* Search box */
.scolta-search-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.scolta-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.scolta-search-box input[type="text"] {
  width: 100%;
  font-size: 1.1rem;
  padding: 0.75rem 2.2rem 0.75rem 1rem;
  border: 2px solid var(--scolta-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.scolta-search-box input[type="text"]:focus {
  border-color: var(--scolta-primary);
}
.scolta-search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #999;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.scolta-search-clear:hover { color: var(--scolta-text); background: #eee; }
.scolta-search-btn {
  padding: 0.75rem 1.5rem;
  background: var(--scolta-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.scolta-search-btn:hover { background: var(--scolta-primary-hover); }

/* Search-as-you-type dropdown.
   Absolutely positioned inside .scolta-search-input-wrap (which is already
   position:relative), so opening, updating and closing it shift no layout. */
.scolta-sayt {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  z-index: var(--scolta-sayt-z-index);
  background: var(--scolta-sayt-bg);
  border: 1px solid var(--scolta-sayt-border);
  border-radius: var(--scolta-sayt-radius);
  box-shadow: var(--scolta-sayt-shadow);
  max-height: var(--scolta-sayt-max-height);
  overflow-y: auto;
  text-align: left;
}
.scolta-sayt-option {
  display: block;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--scolta-text);
  text-decoration: none;
  border-bottom: 1px solid var(--scolta-sayt-border);
}
.scolta-sayt-option:last-child { border-bottom: none; }
.scolta-sayt-option-active { background: var(--scolta-sayt-active-bg); }
/* A recent search reads as history, not as a document. */
.scolta-sayt-option-recent .scolta-sayt-title { color: var(--scolta-text-muted); }
.scolta-sayt-kind {
  display: inline-block;
  width: 1.1rem;
  color: var(--scolta-text-light);
}
.scolta-sayt-title { font-weight: 500; }
.scolta-sayt-excerpt {
  display: block;
  margin-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--scolta-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Layout */
.scolta-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.scolta-layout.has-filters {
  grid-template-columns: 220px minmax(0, 1fr);
}
@media (max-width: 700px) {
  .scolta-layout.has-filters { grid-template-columns: 1fr; }
}

/* Filters sidebar */
.scolta-filters { font-size: 0.9rem; }
.scolta-filters:empty { display: none; }
.scolta-filters h3 { margin-bottom: 0.75rem; color: var(--scolta-primary); font-size: 1rem; }
.scolta-filter-group { margin-bottom: 1rem; }
.scolta-filter-group:last-child { margin-bottom: 0; }
.scolta-filter-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  cursor: pointer;
  font-size: 0.85rem;
}
.scolta-filter-item input { cursor: pointer; }
.scolta-filter-item.active { font-weight: 600; color: var(--scolta-primary); }
.scolta-filter-count { color: #999; font-size: 0.8rem; }

/* Results */
.scolta-results-header {
  color: var(--scolta-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.scolta-results-header span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.scolta-result-card {
  background: var(--scolta-card-bg);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.scolta-result-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.scolta-result-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--scolta-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scolta-result-title:hover { text-decoration: underline; }
.scolta-result-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.scolta-site-badge {
  display: inline-block;
  background: var(--scolta-badge-bg);
  color: var(--scolta-primary);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.scolta-result-date {
  font-size: 0.8rem;
  color: var(--scolta-text-light);
}
.scolta-result-url {
  font-size: 0.8rem;
  color: #0066cc;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
.scolta-result-url:hover { text-decoration: underline; }
.scolta-result-excerpt {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scolta-result-excerpt mark {
  background: var(--scolta-highlight);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.scolta-load-more {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background: var(--scolta-card-bg);
  border: 2px solid var(--scolta-border);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--scolta-primary);
}
.scolta-load-more:hover { border-color: var(--scolta-primary); }
.scolta-searching { opacity: 0.6; }
.scolta-no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--scolta-text-muted);
}

/* AI Summary panel */
.scolta-ai-summary {
  background: linear-gradient(135deg, var(--scolta-summary-bg-start) 0%, var(--scolta-summary-bg-mid) 50%, var(--scolta-summary-bg-start) 100%);
  border: 1px solid var(--scolta-summary-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1rem;
  margin-bottom: 1.25rem;
  font-size: var(--scolta-summary-font-size);
  line-height: var(--scolta-summary-line-height);
  color: var(--scolta-primary);
  position: relative;
  box-shadow: 0 1px 4px rgba(26, 58, 92, 0.06);
  /* Column flex, in every state, so the reserved slot can hand the text
     region whatever height the label, control, follow-up row and disclaimer
     leave over. The panel is shown by clearing its inline display, never by
     setting one: an inline display:block would outrank this and silently
     un-reserve the slot. */
  display: flex;
  flex-direction: column;
  /* Derived HERE, on the panel, not on :root. A custom property resolves its
     var() references against the element it is declared on, so deriving this
     at :root would bake in :root's line count and a theme overriding
     --scolta-summary-collapsed-lines further down the tree would change
     nothing. Declared here, it picks up an override from any ancestor.
     The font size comes from the property rather than from 1em on purpose:
     the error state restyles the panel to a smaller font, and an em-based
     reservation would therefore reserve a DIFFERENT height for an error than
     for a summary — which is a shift, and measured as one (0.006). */
  --scolta-summary-collapsed-height: calc(
      var(--scolta-summary-collapsed-lines)
      * var(--scolta-summary-line-height)
      * var(--scolta-summary-font-size)
      + var(--scolta-summary-chrome));
}
.scolta-ai-summary-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--scolta-accent);
  margin-bottom: 0.6rem;
}
.scolta-ai-summary-label svg { flex-shrink: 0; }
.scolta-ai-summary-text {
  color: var(--scolta-text);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.scolta-ai-summary-text p { margin: 0 0 0.4rem 0; }
.scolta-ai-summary-text p:last-child { margin-bottom: 0; }
.scolta-ai-summary-text strong { color: var(--scolta-primary); font-weight: 600; }
.scolta-ai-summary-text a {
  color: var(--scolta-primary);
  text-decoration: underline;
  text-decoration-color: var(--scolta-summary-border);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}
.scolta-ai-summary-text a:hover { text-decoration-color: var(--scolta-primary); }
.scolta-ai-summary-text ul {
  margin: 0.3rem 0 0.4rem 0;
  padding-left: 1.25rem;
  list-style: none;
}
.scolta-ai-summary-text li {
  position: relative;
  padding-left: 0.2rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.scolta-ai-summary-text li::before {
  content: "\203A";
  position: absolute;
  left: -1rem;
  color: var(--scolta-accent);
  font-weight: 700;
}
.scolta-ai-summary-text li:last-child { margin-bottom: 0; }
.scolta-ai-summary-disclaimer {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(196, 217, 242, 0.5);
  font-size: 0.7rem;
  color: #8aa8c8;
  line-height: 1.4;
}

/* Follow-up conversation */
.scolta-ai-followup-thread {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(196, 217, 242, 0.5);
}
.scolta-ai-followup-turn { margin-bottom: 0.6rem; }
.scolta-ai-followup-turn:last-child { margin-bottom: 0; }
.scolta-ai-followup-question {
  font-size: 0.85rem;
  color: var(--scolta-accent);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.scolta-ai-followup-answer {
  font-size: 0.9rem;
  color: var(--scolta-text);
  line-height: 1.6;
}
.scolta-ai-followup-answer p { margin: 0 0 0.3rem 0; }
.scolta-ai-followup-answer p:last-child { margin-bottom: 0; }
.scolta-ai-followup-answer strong { color: var(--scolta-primary); font-weight: 600; }
.scolta-ai-followup-answer a { color: var(--scolta-primary); text-decoration: underline; text-decoration-color: var(--scolta-summary-border); text-underline-offset: 2px; }
.scolta-ai-followup-answer a:hover { text-decoration-color: var(--scolta-primary); }
.scolta-ai-followup-answer ul { margin: 0.2rem 0 0.3rem 0; padding-left: 1.25rem; list-style: none; }
.scolta-ai-followup-answer li { position: relative; padding-left: 0.2rem; margin-bottom: 0.2rem; font-size: 0.85rem; }
.scolta-ai-followup-answer li::before { content: "\203A"; position: absolute; left: -1rem; color: var(--scolta-accent); font-weight: 700; }
.scolta-ai-followup-input {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(196, 217, 242, 0.5);
}
.scolta-ai-followup-input input {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--scolta-summary-border);
  border-radius: 6px;
  outline: none;
  background: white;
  color: var(--scolta-text);
}
.scolta-ai-followup-input input:focus { border-color: var(--scolta-accent); }
.scolta-ai-followup-input input::placeholder { color: #a0b8d0; }
.scolta-ai-followup-input button {
  padding: 0.5rem 1rem;
  background: var(--scolta-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.scolta-ai-followup-input button:hover { background: var(--scolta-primary-hover); }
.scolta-ai-followup-input button:disabled { background: #a0b8d0; cursor: default; }
.scolta-ai-followup-counter {
  font-size: 0.7rem;
  color: #8aa8c8;
  white-space: nowrap;
  align-self: center;
}
.scolta-ai-summary.loading .scolta-ai-summary-text { color: var(--scolta-text-light); }

/* Reserved slot.
   The height is fixed and the panel is a column, so the text region absorbs
   whatever the chrome around it does or does not occupy: the loading skeleton
   has no follow-up row, the error affordance has neither that nor a
   disclaimer, and the panel is still exactly the same height in all of them.
   That is what makes the shift zero by construction rather than by arithmetic
   that has to be kept in sync with the markup. */
.scolta-ai-summary--reserved {
  height: var(--scolta-summary-collapsed-height);
  overflow: hidden;
}
.scolta-ai-summary--reserved > * { flex: 0 0 auto; }
.scolta-ai-summary--reserved .scolta-ai-summary-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Only a summary that actually overflows gets the fade and the control. */
.scolta-ai-summary--clamped .scolta-ai-summary-text {
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.scolta-ai-summary-toggle {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--scolta-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.scolta-ai-summary-toggle:hover { color: var(--scolta-primary); }
.scolta-ai-summary-toggle[hidden] { display: none; }

/* One shimmer bar per text line, so a skeleton clipped by the reserved height
   lands on a line boundary instead of halfway through a bar. */
.scolta-ai-summary--reserved .scolta-ai-shimmer {
  margin-bottom: calc(var(--scolta-summary-line-height) * 1em - 0.9em);
}

/* Shimmer animation for loading state */
@keyframes scolta-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.scolta-ai-shimmer {
  display: inline-block;
  height: 0.9em;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #dce8f5 25%, #eaf1fa 50%, #dce8f5 75%);
  background-size: 200% 100%;
  animation: scolta-shimmer 1.5s infinite;
  margin-bottom: 0.4rem;
}
.scolta-ai-summary.error {
  background: #fff8f0;
  border-color: #f0d0a0;
  color: #886633;
  font-size: 0.85rem;
}

/* Spinner dot animation */
@keyframes scolta-pulse-dot {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}
.scolta-ai-dots span {
  animation: scolta-pulse-dot 1.4s infinite;
  font-size: 1.2em;
  letter-spacing: 0.15em;
}
.scolta-ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.scolta-ai-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Expanded terms */
.scolta-expanded-terms {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.scolta-expanded-term {
  background: var(--scolta-badge-bg);
  color: var(--scolta-primary);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--scolta-summary-border);
  transition: background 0.15s;
}
.scolta-expanded-term:hover { background: #d0e2f7; }

/* Sort indicator */
#scolta-sort-indicator { margin-bottom: 0.5rem; }
.scolta-sort-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--scolta-badge-bg);
  color: var(--scolta-primary);
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  border: 1px solid var(--scolta-summary-border);
}
.scolta-sort-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.1rem;
}
.scolta-sort-dismiss:hover { color: var(--scolta-primary); opacity: 0.7; }

/* Filter indicator (LLM-applied filter badges) */
#scolta-filter-indicator { margin-bottom: 0.5rem; }
.scolta-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--scolta-badge-bg);
  color: var(--scolta-primary);
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  border: 1px solid var(--scolta-summary-border);
  margin-right: 0.25rem;
}
.scolta-filter-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.1rem;
}
.scolta-filter-dismiss:hover { color: var(--scolta-primary); opacity: 0.7; }

/* Offered (not auto-applied) filter hint chips — the recall guard declined
   to apply them; clicking opts in. Dashed border distinguishes "suggestion"
   from the solid applied-filter badge. */
.scolta-filter-offer {
  background: none;
  border-style: dashed;
}
.scolta-filter-apply {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0;
}
.scolta-filter-apply:hover { color: var(--scolta-primary); opacity: 0.7; }