/* Raphael's chat (js/assistant.js): his eye and name up top, a welcome with things to ask, his replies beside his eye, the plan
   as proposed changes. Tokens only; calm motion that stops for reduced motion. */
.dialog--raphael .dialog__header { padding-block: var(--space-4); }
.assistant__who { display: inline-flex; align-items: center; gap: var(--space-3); }
.assistant__name { display: grid; line-height: 1.15; }
.assistant__name > span:first-child { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.assistant__status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-muted); }
.assistant__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #3fb950);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success, #3fb950) 22%, transparent); }
.assistant__status.is-off i { background: var(--text-subtle); box-shadow: none; }

.raphael-eye--lg { width: 36px; height: 36px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--hero) 16%, transparent),
  0 6px 22px color-mix(in oklab, var(--hero) 30%, transparent); }
.raphael-eye--lg i { width: 13px; height: 13px; }
.raphael-eye--xl { width: 72px; height: 72px; }
.raphael-eye--xl i { width: 26px; height: 26px; animation: raphael-look 7s var(--ease) infinite; }
.assistant__row > .raphael-eye { width: 26px; height: 26px; margin-top: 2px; }
.assistant__row > .raphael-eye i { width: 10px; height: 10px; }
.is-thinking > .raphael-eye { animation: raphael-think 1.6s ease-in-out infinite; }

.assistant__welcome { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-2) var(--space-4); }
.assistant__halo { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--hero) 26%, transparent) 0%, transparent 68%);
  animation: raphael-breathe 5s ease-in-out infinite; }
.assistant__hello { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -.01em; }
.assistant__intro { margin: 0; max-width: 34ch; color: var(--text-muted); line-height: 1.5; }
.assistant__ideas { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.assistant__idea { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  border-radius: 14px; border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font: inherit;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.assistant__idea svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.assistant__idea:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--surface-2); transform: translateY(-1px); }

.assistant__row { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; max-width: 100%; }
.assistant__row .assistant__msg--assistant { background: transparent; padding: 3px 0 0; box-shadow: none; border-radius: 0; color: var(--text); }
.assistant__msg--user { background: color-mix(in oklab, var(--accent) 20%, var(--surface-2)); color: var(--text); }

.assistant__plan { border-radius: 16px; border: var(--border-width) solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: var(--space-3) var(--space-4); }
.assistant__plan-head { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.assistant__plan-head svg { width: 16px; height: 16px; color: var(--accent); }

/* one ring: the box you type in glows; the text area inside it doesn't draw a second one */
.composer__input:focus, .composer__input:focus-visible { outline: none; }
.composer:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }

@keyframes raphael-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes raphael-look { 0%, 40%, 100% { transform: translate(0, 0); } 48%, 60% { transform: translate(5px, -2px); } 68%, 80% { transform: translate(-5px, 1px); } }
@keyframes raphael-think { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .assistant__halo, .raphael-eye--xl i, .is-thinking > .raphael-eye { animation: none; } }

/* 🧭 His page (js/pages/raphael.js): his eye, whether an AI answers behind him, and the one flame action to talk to him */
.raphael-hero__body { display: grid; gap: var(--space-4); }
.raphael-hero__who { display: flex; align-items: center; gap: var(--space-4); }
.raphael-hero__who > .raphael-eye { flex: 0 0 auto; }
.raphael-hero__line { font-weight: var(--weight-semibold); }
@media (min-width: 900px) { .raphael-hero__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }