/* ══ AI PANEL — mobile + desktop polish (loads after styles.css) ══ */

/* 16px stops iOS Safari zooming the page when the input is focused */
.ai-input { font-size: 16px !important; }

.ai-panel { overscroll-behavior: contain; }
.ai-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.ai-user-bubble, .ai-assistant-bubble { overflow-wrap: anywhere; line-height: 1.5; }
.ai-user-bubble      { animation: aiPop .22s ease both; }
.ai-assistant-bubble { animation: aiPop .28s ease both; }
@keyframes aiPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* comfortable touch targets */
.ai-send-btn, .ai-clear-btn, .ai-sug-chip, .ai-retry-btn {
  min-height: 40px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ai-send-btn { min-width: 40px; }

/* result cards: smooth swipe on touch, hidden scrollbar */
.ai-results {
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.ai-results::-webkit-scrollbar { display: none; }
.ai-result-card { scroll-snap-align: start; }

/* "Try again" button shown after an error */
.ai-retry-btn {
  display: block; margin-top: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(190,140,255,.4); background: rgba(150,90,255,.14);
  color: #e0c4ff; font: inherit; font-size: 13px; cursor: pointer;
}
.ai-retry-btn:hover { background: rgba(150,90,255,.26); }

.ai-input:focus-visible, .ai-send-btn:focus-visible, .ai-clear-btn:focus-visible,
.ai-sug-chip:focus-visible, .ai-retry-btn:focus-visible { outline: 2px solid #b98cff; outline-offset: 2px; }

/* phones: pin the panel to the screen edges.
   Explicit left/right + transform reset so it can never be pushed off-screen,
   whatever positioning the base stylesheet uses. Open/close still animates. */
@media (max-width: 640px) {
  .ai-panel {
    position: fixed !important;
    left: 10px !important; right: 10px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 8px 0 0 !important;
    box-sizing: border-box !important;
    transform: translateY(-10px) scale(.98) !important;   /* closed: no horizontal offset */
    transform-origin: top center;
    opacity: 0; pointer-events: none;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)) !important;
  }
  .ai-panel.open { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .ai-body { max-height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px)); }
  .ai-input-row { min-width: 0; gap: 8px; }
  .ai-input { min-width: 0 !important; flex: 1 1 auto !important; }   /* lets the field shrink so Clear + Send stay on screen */
  .ai-clear-btn { padding-inline: 10px; flex: 0 0 auto; }
  .ai-send-btn  { flex: 0 0 auto; }
}

/* desktop: slim scrollbar */
@media (min-width: 641px) { .ai-body { scrollbar-width: thin; } }

@media (prefers-reduced-motion: reduce) {
  .ai-user-bubble, .ai-assistant-bubble { animation: none; }
  .ai-body { scroll-behavior: auto; }
}