/* ============================================================
   REBUILT — ai-chat.css
   1) "Coming soon" screen — what the REBUILT AI route shows today.
      Static markup, no network, no key.
   2) Chat log styles — dormant. The chat page (pages/ai.js) is kept
      unrouted for when the assistant ships; its styles live here so
      re-enabling it needs no CSS work.
   ============================================================ */

/* ---------- Coming soon ---------- */

.ai-soon {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-12) var(--s-10);
  overflow: hidden;
}
.ai-soon__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; }

.ai-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(253, 102, 43, 0.35);
  color: #ff8a5e;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
}
.ai-soon__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); box-shadow: 0 0 0 3px rgba(253, 102, 43, 0.22); }
.ai-soon__heading { font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: var(--fw-black); line-height: 1.35; }
.ai-soon__text { max-width: 34em; color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.95; }
.ai-soon__cta { margin-top: var(--s-2); }

.ai-soon__visual {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  padding: var(--s-4);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(253, 102, 43, 0.16), transparent 58%),
    var(--surface-2);
}
.ai-soon__svg { display: block; width: 100%; height: 100%; }
.ai-soon__ring-track { fill: none; stroke: var(--ring-track); stroke-width: 10; }
.ai-soon__ring-arc { fill: none; stroke: var(--brand-amber); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 420 553; }
.ai-soon__ring-halo { fill: rgba(255, 229, 4, 0.18); }
.ai-soon__ring-node { fill: var(--brand-yellow); }
.ai-soon__disc { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.ai-soon__spark { transform-box: fill-box; transform-origin: center; animation: ai-soon-breathe 4.8s ease-in-out infinite alternate; }
.ai-soon__spark-main { fill: var(--brand-orange); filter: drop-shadow(0 0 10px rgba(253, 102, 43, 0.5)); }
.ai-soon__spark-small { fill: var(--brand-yellow); opacity: 0.85; }
@keyframes ai-soon-breathe { from { transform: scale(1); } to { transform: scale(1.08); } }

@media (max-width: 1079px) {
  .ai-soon { padding: var(--s-10) var(--s-8); gap: var(--s-8); }
}
@media (max-width: 719px) {
  .ai-soon { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) var(--s-5); }
  .ai-soon__visual { order: -1; max-width: 200px; }
  .ai-soon__content { align-items: center; text-align: center; }
  .ai-soon__text { font-size: var(--fs-md); }
  .ai-soon__cta { align-self: stretch; }
}

/* ---------- Chat log (dormant) ---------- */

.ai-notice { border-color: rgba(255, 229, 4, 0.25); background: linear-gradient(160deg, var(--primary-soft), var(--surface)); }
.ai-chat__log { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin-bottom: var(--s-4); padding-inline-end: 4px; }
.ai-bubble { max-width: 82%; padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.8; }
.ai-bubble--user { align-self: flex-end; background: var(--primary); color: var(--ink-on-brand); font-weight: var(--fw-bold); }
.ai-bubble--assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-soft); }
.ai-bubble--typing { display: flex; align-items: center; gap: 4px; padding: 14px; }
.ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); opacity: 0.5; animation: ai-typing-bounce 1.1s infinite ease-in-out; }
.ai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.ai-chat__form { display: flex; gap: var(--s-2); }
.ai-chat__form .field__input { flex: 1; }
.ai-context { display: flex; flex-direction: column; gap: var(--s-2); }
.ai-context li { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-soft); }
.ai-context .icon { color: var(--brand-amber); }