/* ============================================================================
   ai-native.css — Kim's redesigned AI-native Assistant view.
   Ported faithfully from her Claude Design export (Assistant.dc.html).

   The core mechanic: every peripheral card is a `data-slot` with one of three
   states. At REST it is a near-invisible faint label. On a real signal it
   BLOOMS into a full card — sage (illuminated) or urgent (terracotta) — with a
   slow glow pulse. Chat lives at the calm center; cards illuminate around it.

   Everything is scoped under `.aiv2` so it never collides with the rest of the
   cockpit's global tokens/classes. Presentational values live inline in the JSX
   (matching the source design); this file owns the tokens, the @keyframes, and
   the attribute-selector state machine that can't be expressed inline.
   ========================================================================== */

/* Assistant mode is full-bleed: the cockpit Rail + Topbar are suppressed in the
   markup, so collapse the shell grid to a single column and let .main span it. */
.app[data-mode="assistant"] { grid-template-columns: 1fr !important; }
.app[data-mode="assistant"] .main { min-height: 100vh; }

.aiv2 {
  --bg:#F1EDE3; --bg2:#E9E4D6; --card:#FCFBF7; --card-rest:#F4F1E7;
  --ink:#26261E; --ink2:#615D52; --muted:#9C978A; --line:#E3DECF;
  --sage:#5F7E62; --sage-ink:#4C6B50; --urgent:#B0623A;
  --glow-sage:rgba(95,126,98,0.40); --glow-urgent:rgba(176,98,58,0.42);
  --badge-rest:#CFCABA;

  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 0 90px;
}

.aiv2[data-theme="dark"] {
  --bg:#19180F; --bg2:#13120B; --card:#23221A; --card-rest:#1E1D14;
  --ink:#ECE7D9; --ink2:#B3AE9E; --muted:#7C7768; --line:#33312A;
  --sage:#8FB093; --sage-ink:#A7C4AB; --urgent:#D28A5F;
  --glow-sage:rgba(143,176,147,0.32); --glow-urgent:rgba(210,138,95,0.34);
  --badge-rest:#46443A;
}

.aiv2 * { box-sizing:border-box; }
.aiv2 input, .aiv2 textarea, .aiv2 button { font-family:inherit; }

@keyframes aiv2-glowSage {
  0%,100%{ box-shadow:0 0 0 1px var(--sage), 0 10px 26px -16px var(--glow-sage); }
  50%{ box-shadow:0 0 0 1.5px var(--sage), 0 18px 44px -12px var(--glow-sage); }
}
@keyframes aiv2-glowUrgent {
  0%,100%{ box-shadow:0 0 0 1px var(--urgent), 0 10px 26px -15px var(--glow-urgent); }
  50%{ box-shadow:0 0 0 2px var(--urgent), 0 20px 48px -10px var(--glow-urgent); }
}
@keyframes aiv2-badgePulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
@keyframes aiv2-bloomIn { from{ opacity:0; transform:scale(.95) translateY(8px); } to{ opacity:1; transform:scale(1) translateY(0); } }

/* RESTING = a faint label only. ILLUMINATED/URGENT = the card blooms in. */
.aiv2 [data-restlabel]{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--muted); opacity:0.38; padding:9px 3px;
  user-select:none; cursor:default; display:inline-block; transition:opacity .4s ease;
}
.aiv2 [data-restlabel]:hover{ opacity:0.62; }
.aiv2 [data-bloom]{ display:none; }
.aiv2 [data-slot][data-state="sage"] [data-restlabel],
.aiv2 [data-slot][data-state="urgent"] [data-restlabel]{ display:none; }
.aiv2 [data-slot][data-state="sage"] [data-bloom]{
  display:flex; border-color:var(--sage);
  animation:aiv2-bloomIn .55s cubic-bezier(.2,.7,.2,1) both, aiv2-glowSage 4.2s ease-in-out .6s infinite;
}
.aiv2 [data-slot][data-state="urgent"] [data-bloom]{
  display:flex; border-color:var(--urgent);
  animation:aiv2-bloomIn .55s cubic-bezier(.2,.7,.2,1) both, aiv2-glowUrgent 2.9s ease-in-out .6s infinite;
}
.aiv2[data-motion="off"] [data-bloom]{ animation:none !important; }

.aiv2 [data-badge]{ display:none; }
.aiv2 [data-badge][data-state="sage"]{ display:grid; background:var(--sage); }
.aiv2 [data-badge][data-state="urgent"]{ display:grid; background:var(--urgent); animation:aiv2-badgePulse 2.4s ease-in-out infinite; }
.aiv2[data-motion="off"] [data-badge]{ animation:none !important; }

.aiv2 [data-seg][data-active="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.10); }
.aiv2 [data-seg][data-active="false"]{ background:transparent; color:var(--muted); }

/* Card hover lift (the source used a style-hover attribute; done here in CSS). */
.aiv2 [data-bloom][data-hover="lift"]:hover{ transform:translateY(-3px); }

/* Chat thread (conversation state) — calm, minimal. */
.aiv2 .aiv2-msg{ max-width:560px; }
.aiv2 .aiv2-msg-user{ margin-left:auto; text-align:right; }
.aiv2 .aiv2-typing span{
  display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%;
  background:var(--muted); animation:aiv2-badgePulse 1s ease-in-out infinite;
}
.aiv2 .aiv2-typing span:nth-child(2){ animation-delay:.15s; }
.aiv2 .aiv2-typing span:nth-child(3){ animation-delay:.3s; }

/* ---- STAGE: chat block centered in the viewport, cards ringed around it ---- */
.aiv2 .aiv2-stage{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  min-height:calc(100vh - 88px);   /* fill the space under the topbar */
  display:grid;
  place-items:center;              /* vertically + horizontally center the chat */
  padding:24px 40px 56px;
}
.aiv2 .aiv2-center{
  width:min(600px,92vw);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:26px;
}
/* Each card floats on an ellipse around the centered chat. Widest at the
   vertical middle (ml/mr flank the chat); tucked inward at top and bottom. */
.aiv2 .aiv2-ring{ position:absolute; width:272px; z-index:2; }
.aiv2 .aiv2-ring.pos-tl{ top:6%;  left:4%; }
.aiv2 .aiv2-ring.pos-tr{ top:6%;  right:4%; text-align:right; }
.aiv2 .aiv2-ring.pos-ml{ top:50%; left:0;  transform:translateY(-50%); }
.aiv2 .aiv2-ring.pos-mr{ top:50%; right:0; transform:translateY(-50%); text-align:right; }
.aiv2 .aiv2-ring.pos-bl{ bottom:7%; left:7%; }
.aiv2 .aiv2-ring.pos-br{ bottom:7%; right:7%; text-align:right; }

/* Narrower screens: drop the ring, stack cards under the chat in a single column. */
@media (max-width:1120px){
  .aiv2 .aiv2-stage{ display:flex; flex-direction:column; align-items:center; min-height:0; gap:16px; padding:32px 20px 56px; }
  .aiv2 .aiv2-center{ width:100%; order:-1; }
  .aiv2 .aiv2-ring{ position:static; width:100%; max-width:600px; transform:none; text-align:left; }
  .aiv2 .aiv2-ring.pos-tr, .aiv2 .aiv2-ring.pos-mr, .aiv2 .aiv2-ring.pos-br{ text-align:left; }
  .aiv2 [data-topbar]{ flex-wrap:wrap; }
}