/* AI PAGE
   Shared layout, colours and fonts come from style.css.
   This file only adds what is unique to this page. */

/* MODEL CARD */
.ai-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai-facts li { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-inner); padding: 12px 15px; font-size: 13px; font-weight: 700; }
.ai-fact-label { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
.ai-specs .spec-list > div { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }

/* STATUS PILL (Online / Offline) */
.ai-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 12px; white-space: nowrap; }
.ai-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.ai-status[data-state="online"] .ai-status-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.ai-status[data-state="offline"] .ai-status-dot { background: var(--bad); }
.ai-status[data-state="checking"] .ai-status-dot { animation: ai-pulse 1s ease-in-out infinite; }

/* CHATBOT */
.ai-chat-log {
  height: clamp(300px, 46vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--radius-inner); background: var(--background); border: 1px solid var(--border);
  scroll-behavior: smooth;
}
.ai-msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.ai-msg-who { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.ai-msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-msg--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.ai-msg--user { align-self: flex-end; background: var(--accent-wash); border: 1px solid var(--accent-line); border-bottom-right-radius: 5px; }
.ai-msg--error { border-color: var(--bad); }
.ai-msg--error .ai-msg-text { color: var(--muted); }
.ai-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }

.ai-chat-form, .ai-comment-form { margin-top: 14px; display: grid; gap: 10px; }
.ai-page textarea, .ai-page input[type="text"] {
  width: 100%; resize: vertical; font-size: 14px;
  color: var(--text); background: var(--background); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 13px; transition: border-color .2s;
}
.ai-page textarea:focus, .ai-page input[type="text"]:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-wash); }
.ai-page textarea:disabled, .ai-page input:disabled { opacity: .55; cursor: not-allowed; }
.ai-chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ai-counter { margin-right: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* COMMENTS */
.ai-form-note { margin: 0; font-size: 12px; color: var(--muted); }
.ai-subhead { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.ai-comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.ai-comment { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-inner); padding: 12px 15px; }
.ai-comment-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 4px; }
.ai-comment-name { font-weight: 800; overflow-wrap: anywhere; }
.ai-comment-time { color: var(--muted); white-space: nowrap; }
.ai-comment-text { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }

@keyframes ai-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-status-dot, .ai-typing span { animation: none !important; }
  .ai-chat-log { scroll-behavior: auto; }
}

/* MOBILE */
@media (max-width: 600px) {
  .ai-chat-log { height: 380px; padding: 12px; }
  .ai-msg { max-width: 92%; }
}