/* Agent persona: a robot in the app's t-shirt. One pose and one motion per mood, driven by
   [data-mood] (see assets/js/persona.js). Poses change with a small spring; each pose stays
   distinct when motion is reduced. */

.persona { display: block; flex: none; overflow: visible; }
.bot .b-float, .bot .b-head, .bot .b-arm, .bot .b-shadow, .bot .b-chin, .bot .b-palms, .bot .b-antenna { transform-box: view-box; }
.bot .b-float { transform-origin: 100px 221px; }
.bot .b-head { transform-origin: 100px 114px; transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.6, 1); }
.bot .b-antenna { transform-origin: 100px 24px; }
.bot .b-arm { transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.55, 1); }
.bot .b-arm-l { transform-origin: 68px 141px; transform: rotate(6deg); }
.bot .b-arm-r { transform-origin: 132px 141px; transform: rotate(-6deg); }
.bot .b-shadow { transform-origin: 100px 240px; }
.bot .b-palms { transform-origin: 100px 66px; transform: translateY(46px) scale(0.9); transition: opacity 0.2s, transform 0.5s cubic-bezier(0.34, 1.3, 0.6, 1); }
.bot .b-eyes, .bot .b-eye, .bot .b-mouth, .bot .b-eq rect, .bot .b-tip, .bot .b-dots circle, .bot .b-sparks path, .bot .b-halo, .bot .b-cheeks { transform-box: fill-box; transform-origin: 50% 50%; }
.bot .b-eyes { filter: drop-shadow(0 0 3px var(--eye)); transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.6, 1), opacity 0.2s; }
.bot .b-eye { transition: transform 0.25s var(--ease-out); }
.bot .b-mouth { transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.6, 1), opacity 0.2s; }
.bot .b-happy, .bot .b-eq, .bot .b-scan, .bot .b-dots, .bot .b-chin, .bot .b-palms, .bot .b-cheeks, .bot .b-sparks, .bot .b-halo { opacity: 0; transition: opacity 0.25s; }
.bot .b-chin { transition: opacity 0.2s 0.18s; }
.bot .b-led { opacity: 0.7; transition: opacity 0.3s; }
.bot .b-tip { transition: fill 0.3s; }
.persona.still, .persona.still * { animation: none !important; }
.bot.head .b-chin { display: none; }

/* Idle: floats; head and antenna follow a beat late; blinks, sometimes twice. */
.bot[data-mood="idle"] .b-float { animation: b-float 3.6s ease-in-out infinite; }
.bot[data-mood="idle"] .b-shadow { animation: b-shadow 3.6s ease-in-out infinite; }
.bot[data-mood="idle"] .b-head { animation: b-head-idle 3.6s ease-in-out infinite; }
.bot[data-mood="idle"] .b-antenna { animation: b-antenna 3.6s ease-in-out infinite; }
.bot[data-mood="idle"] .b-eye { animation: b-blink 6s infinite; }
.bot[data-mood="idle"] .b-arm-l { animation: b-swing-l 3.6s ease-in-out infinite; }
.bot[data-mood="idle"] .b-arm-r { animation: b-swing-r 3.6s ease-in-out infinite; }

/* Listening: head tilted toward the speaker, a hand behind the ear, ear lights awake. */
.bot[data-mood="listening"] .b-head { transform: rotate(7deg); animation: b-nod 1.2s ease-in-out infinite alternate; }
.bot[data-mood="listening"] .b-arm-r { transform: rotate(-150deg); }
.bot[data-mood="listening"] .b-eyes { transform: translate(4px, -2px); }
.bot[data-mood="listening"] .b-eye { transform: scale(1.12); }
.bot[data-mood="listening"] .b-mouth { transform: scale(0.55, 1.5); }
.bot[data-mood="listening"] .b-led { opacity: 1; animation: b-led 1.2s ease-in-out infinite alternate; }
.bot[data-mood="listening"] .b-halo { opacity: 0.22; }
.bot[data-mood="listening"] .b-float { animation: b-float 2.4s ease-in-out infinite; }
.bot[data-mood="listening"] .b-shadow { animation: b-shadow 2.4s ease-in-out infinite; }

/* Thinking: hand on chin, eyes up, thought bubbles, antenna glowing. */
.bot[data-mood="thinking"] .b-head { transform: rotate(-6deg); }
.bot[data-mood="thinking"] .b-arm-r { transform: rotate(141deg); }
.bot[data-mood="thinking"] .b-chin { opacity: 1; }
.bot[data-mood="thinking"] .b-eyes { transform: translate(6px, -6px); }
.bot[data-mood="thinking"] .b-eye { transform: scaleY(0.6); }
.bot[data-mood="thinking"] .b-mouth { transform: translateX(3px) scale(0.55, 0.2); }
.bot[data-mood="thinking"] .b-dots { opacity: 1; }
.bot[data-mood="thinking"] .b-dots circle { animation: b-bubble 1.5s ease-in-out infinite; }
.bot[data-mood="thinking"] .b-dots circle:nth-child(2) { animation-delay: 0.2s; }
.bot[data-mood="thinking"] .b-dots circle:nth-child(3) { animation-delay: 0.4s; }
.bot[data-mood="thinking"] .b-halo { opacity: 0.3; animation: b-halo 1.5s ease-in-out infinite; }

/* Scanning: the visor sweeps, eyes and head follow. */
.bot[data-mood="scanning"] .b-scan { opacity: 0.4; animation: b-scan 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.bot[data-mood="scanning"] .b-eyes { transform: translateX(-7px); animation: b-look 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.bot[data-mood="scanning"] .b-head { transform: rotate(-4deg); animation: b-turn 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.bot[data-mood="scanning"] .b-mouth { transform: scale(0.7, 0.3); }
.bot[data-mood="scanning"] .b-halo { opacity: 0.3; animation: b-halo 1.6s ease-in-out infinite; }

/* Answering: the mouth turns into an equalizer, one hand talks along. */
.bot[data-mood="speaking"] .b-mouth { opacity: 0; }
.bot[data-mood="speaking"] .b-eq { opacity: 1; }
.bot[data-mood="speaking"] .b-eq rect { transform: scaleY(0.55); animation: b-eq calc(0.3s + var(--j) * 0.06s) ease-in-out infinite alternate; animation-delay: calc(var(--j) * -0.11s); }
.bot[data-mood="speaking"] .b-arm-l { transform: rotate(30deg); animation: b-gesture 0.9s ease-in-out infinite alternate; }
.bot[data-mood="speaking"] .b-head { animation: b-talk 0.9s ease-in-out infinite alternate; }
.bot[data-mood="speaking"] .b-eye { animation: b-blink 4s infinite 0.8s; }

/* Running: both hands type, eyes on the work, antenna blinking. */
.bot[data-mood="running"] .b-arm-l { transform: rotate(-26deg); animation: b-type-l 0.26s ease-in-out infinite alternate; }
.bot[data-mood="running"] .b-arm-r { transform: rotate(26deg); animation: b-type-r 0.26s ease-in-out infinite alternate 0.13s; }
.bot[data-mood="running"] .b-eyes { transform: translateY(6px); }
.bot[data-mood="running"] .b-eye { transform: scaleY(0.55); }
.bot[data-mood="running"] .b-mouth { transform: scale(0.45, 0.25); }
.bot[data-mood="running"] .b-tip { animation: b-pulse 0.5s steps(2, jump-none) infinite; }
.bot[data-mood="running"] .b-halo { opacity: 0.35; animation: b-halo 0.8s ease-in-out infinite; }

/* Waiting: points at the action and keeps pointing. */
.bot[data-mood="waiting"] .b-arm-r { transform: rotate(-74deg); animation: b-point 1.2s ease-in-out infinite alternate; }
.bot[data-mood="waiting"] .b-head { transform: rotate(5deg); }
.bot[data-mood="waiting"] .b-eyes { transform: translate(7px, 5px); }
.bot[data-mood="waiting"] .b-float { animation: b-sway 2.8s ease-in-out infinite; }
.bot[data-mood="waiting"] .b-eye { animation: b-blink 6s infinite 2s; }

/* Done: crouches, jumps with both arms up, smiles and sparkles. */
.bot[data-mood="success"] .b-arm-l { transform: rotate(150deg); }
.bot[data-mood="success"] .b-arm-r { transform: rotate(-150deg); }
.bot[data-mood="success"] .b-float { animation: b-jump 1s cubic-bezier(0.3, 0.7, 0.4, 1) 1; }
.bot[data-mood="success"] .b-shadow { animation: b-shadow-jump 1s cubic-bezier(0.3, 0.7, 0.4, 1) 1; }
.bot[data-mood="success"] .b-eyes { opacity: 0; }
.bot[data-mood="success"] .b-happy, .bot[data-mood="success"] .b-sparks { opacity: 1; }
.bot[data-mood="success"] .b-cheeks { opacity: 0.55; }
.bot[data-mood="success"] .b-mouth { transform: scale(1.3, 1.6); }
.bot[data-mood="success"] .b-sparks path { animation: b-spark 1.1s cubic-bezier(0.34, 1.4, 0.6, 1) 1 both; }
.bot[data-mood="success"] .b-sparks path:nth-child(2) { animation-delay: 0.12s; }
.bot[data-mood="success"] .b-sparks path:nth-child(3) { animation-delay: 0.24s; }

/* Stopped: shakes, droops, the antenna light turns Brick red. */
.bot[data-mood="error"] .b-float { animation: b-shake 0.5s ease-in-out 1; }
.bot[data-mood="error"] .b-head { transform: translateY(5px) rotate(9deg); }
.bot[data-mood="error"] .b-arm-l { transform: rotate(-2deg); }
.bot[data-mood="error"] .b-arm-r { transform: rotate(2deg); }
.bot[data-mood="error"] .b-eye:first-child { transform: translateY(3px) rotate(-18deg) scaleY(0.7); }
.bot[data-mood="error"] .b-eye:last-child { transform: translateY(3px) rotate(18deg) scaleY(0.7); }
.bot[data-mood="error"] .b-mouth { transform: translateY(3px) scaleY(-1); }
.bot[data-mood="error"] .b-tip { fill: var(--brique); animation: b-pulse 0.6s steps(2, jump-none) 3; }
.bot[data-mood="error"] .b-led { opacity: 0.25; }

/* Not looking: both hands over the visor, a little blush. */
.bot[data-mood="privacy"] .b-arm-l { transform: rotate(-169deg); }
.bot[data-mood="privacy"] .b-arm-r { transform: rotate(169deg); }
.bot[data-mood="privacy"] .b-palms { opacity: 1; transform: none; }
.bot[data-mood="privacy"] .b-head { transform: translateY(3px) rotate(-3deg); }
.bot[data-mood="privacy"] .b-eye { transform: scaleY(0.12); }
.bot[data-mood="privacy"] .b-mouth { transform: scale(0.7, -0.6); }
.bot[data-mood="privacy"] .b-cheeks { opacity: 0.45; }

@keyframes b-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes b-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.72; } }
@keyframes b-head-idle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 70% { transform: rotate(1.4deg); } }
@keyframes b-antenna { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(5deg); } 75% { transform: rotate(-4deg); } }
@keyframes b-blink {
  0%, 27%, 33%, 82%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(0.1); }
  85%, 91% { transform: scaleY(0.1); }
  88% { transform: scaleY(1); }
}
@keyframes b-swing-l { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(10deg); } }
@keyframes b-swing-r { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-10deg); } }
@keyframes b-nod { from { transform: rotate(7deg); } to { transform: rotate(3deg) translateY(2px); } }
@keyframes b-led { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes b-bubble { 0%, 100% { transform: scale(0.75); opacity: 0.5; } 40% { transform: scale(1.05); opacity: 1; } }
@keyframes b-halo { 0%, 100% { transform: scale(0.85); opacity: 0.15; } 50% { transform: scale(1.15); opacity: 0.45; } }
@keyframes b-scan { from { transform: translateY(0); } to { transform: translateY(54px); } }
@keyframes b-look { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes b-turn { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes b-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes b-gesture { from { transform: rotate(30deg); } to { transform: rotate(12deg); } }
@keyframes b-talk { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes b-type-l { from { transform: rotate(-26deg); } to { transform: rotate(-17deg); } }
@keyframes b-type-r { from { transform: rotate(26deg); } to { transform: rotate(17deg); } }
@keyframes b-point { from { transform: rotate(-74deg); } to { transform: rotate(-66deg); } }
@keyframes b-pulse { 0% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes b-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes b-jump {
  0% { transform: none; }
  18% { transform: translateY(2px) scale(1.06, 0.92); }
  45% { transform: translateY(-20px) scale(0.96, 1.05); }
  70% { transform: translateY(0) scale(1.04, 0.95); }
  85% { transform: scale(0.99, 1.01); }
  100% { transform: none; }
}
@keyframes b-shadow-jump { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.06); } 45% { transform: scale(0.68); opacity: 0.45; } }
@keyframes b-spark { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 45% { transform: scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0.9; } }
@keyframes b-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* Placements */
.hero-persona { display: flex; justify-content: center; margin-bottom: 6px; }
.agent-status { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.composer-wrap { position: sticky; bottom: 14px; }
.msg-bot > div { max-width: 1120px; }
.msg-user { max-width: min(78%, 760px); }
.composer-wrap .composer { position: static; max-width: none; }
.composer-wrap .agent-status { display: inline-flex; padding: 4px 12px 4px 6px; border-radius: 99px; background: color-mix(in oklab, var(--surface) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(8px); }
.thinking-label { color: var(--ink-2); font-size: 13.5px; }
.row.convo .tile { overflow: hidden; }

/* Persona page */
.persona-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.stage {
  position: relative; display: grid; place-items: center; min-height: 340px; padding: 26px 20px 58px;
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 110%, #0B2C7A 0%, var(--encre) 62%);
}
.stage::before {
  content: ""; position: absolute; inset: auto -10% 16% -10%; height: 44%; z-index: -1; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1.5px solid rgba(91, 151, 255, 0.35); background: linear-gradient(180deg, rgba(10, 92, 255, 0.14), transparent 70%);
}
.stage-caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #DCE3F5; font-size: 13.5px; font-weight: 600; }
.stage-side { display: grid; gap: 14px; align-content: start; padding: 16px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.stage-now { display: grid; gap: 3px; }
.stage-now .muted, .in-context > .muted { font-size: 11.5px; font-weight: 600; }
.stage-now strong { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.stage-now p { color: var(--ink-2); font-size: 13px; min-height: 40px; }
.in-context { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ctx-row .msg-bot p { font-size: 13px; }
.ctx-row.agent-status { margin: 0; }
.mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; margin-top: 14px; }
.mood-card {
  display: grid; justify-items: center; align-content: start; gap: 5px; padding: 12px 10px 14px; text-align: center;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mood-card:hover { border-color: var(--line-strong); }
.mood-card[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.mood-art { display: grid; place-items: end center; height: 118px; width: 100%; padding-bottom: 4px; border-radius: var(--r-md); background: var(--sunken); margin-bottom: 4px; overflow: hidden; }
.mood-card strong { font-size: 12.5px; }
.mood-card > span:last-child { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }

@media (max-width: 960px) {
  .persona-stage { grid-template-columns: minmax(0, 1fr); }
}