/* ============================================================
   LOAD PREVIOUS — Trigger element at the top of the chat for
   fetching older conversation history.

   USAGE (button variant):
   <div class="load-previous">
     <button class="load-previous__trigger">
       <svg class="load-previous__icon" viewBox="0 0 24 24">
         <use href="zen-pacific-orlando-sprite.svg#icon-chevron-up"/>
       </svg>
       <span class="load-previous__text">Load earlier messages</span>
     </button>
   </div>

   USAGE (loading state):
   <div class="load-previous">
     <div class="load-previous__trigger load-previous__trigger--loading">
       <div class="load-previous__spinner"></div>
       <span class="load-previous__text">Loading...</span>
     </div>
   </div>

   BEHAVIOR (handled by app logic):
   - Shown at the top of the chat when older messages exist.
   - Tap triggers fetch; swap to loading state during request.
   - Hide entirely when no more history is available.

   RULES:
   - Centered, compact, unobtrusive.
   - Uses body font, secondary text — should recede, not compete.
   - Touch target minimum 44px.
   - Icon from sprite, never inline SVG paths.
   ============================================================ */

/* ── Container: centered at top of chat ── */
.load-previous {
  display: flex;
  justify-content: center;
  padding: 16px 0 24px;
}

/* ── Trigger button ── */
.load-previous__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                                /* Touch target */
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s;
}

.load-previous__trigger:hover {
  background: var(--color-surface-warm);
  border-color: var(--color-accent);
}

.load-previous__trigger:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Loading state ── */
.load-previous__trigger--loading {
  cursor: default;
  border-color: var(--color-border-subtle);
  pointer-events: none;
}

/* ── Icon ── */
.load-previous__icon {
  width: 14px;
  height: 14px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Text label ── */
.load-previous__text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Loading spinner ── */
.load-previous__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: load-previous-spin 0.8s linear infinite;
}

@keyframes load-previous-spin {
  to { transform: rotate(360deg); }
}