/* ============================================================
   Agent detail — shared styles, used by Kira/Vera/Pulse pages
   Ribbon design system · light Sora display · hairline cards
   ============================================================ */

.agent-wrap{padding:28px 32px 72px;max-width:1480px;width:100%}

/* ===== Agent header ===== */
.agent-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px;
  align-items:end;
  padding-bottom:26px; border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.agent-head .lt{min-width:0}
.agent-head .team-crumb{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px; display:flex; align-items:center; gap:10px;
}
.agent-head .team-stripe{width:10px; height:10px; border-radius:3px}
.agent-head h1{
  font-family:var(--display); font-weight:300;
  font-size:64px; line-height:.98; letter-spacing:-.025em;
  margin:0 0 10px;
}
.agent-head h1 em{font-style:normal; color:var(--accent); font-weight:300}
.agent-head .role{font-size:17px; color:var(--muted); max-width:56ch; line-height:1.55}
.agent-head .role b{color:var(--ink); font-weight:500}

.agent-head .rt{
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  font-family:var(--mono); font-size:11px; color:var(--muted);
}
.agent-head .rt .status-big{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 14px; border:1px solid var(--line-2); border-radius:5px; background:var(--white);
  font-size:12px;
}
.agent-head .rt .ld{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(31,141,90,.5); animation:pulse-dot 2s infinite}
.agent-head .rt .btns{display:flex;gap:8px;margin-top:4px}

/* ===== Vitals strip ===== */
.vitals{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-bottom:28px;
}
.vital{
  background:var(--white); border:1px solid var(--line);
  border-radius:8px; padding:14px 16px;
  box-shadow:0 1px 2px rgba(18,18,18,.04), 0 8px 20px -16px rgba(18,18,18,.12);
  position:relative; overflow:hidden;
}
.vital .k{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
}
.vital .v{
  font-family:var(--display); font-weight:300; font-size:26px;
  letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.vital .v em{font-style:normal; color:var(--accent)}
.vital .sub{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:6px}
.vital .sub b{color:var(--ok)}
.vital .sub b.warn{color:var(--warn)}
.vital .sub b.err{color:var(--err)}
.vital .v-spark{
  position:absolute; right:0; bottom:0; width:100%; height:28px;
  pointer-events:none; opacity:.5;
}

/* ---- Fixture data treatment ----
   .vital.fixture  — value softened, sub-line gets a "· demo data" tag
   .card.fixture   — card gets a right-aligned "demo data" chip in the header
   Data is still visible and interactions still work.
   Remove the class when the field is wired to a real API.           */
.vital.fixture .v{
  opacity:.6;
}
.vital.fixture .sub::after{
  content:"· demo data";
  font-family:var(--mono); font-size:9.5px;
  color:var(--muted); opacity:.55;
  margin-left:6px; font-style:italic;
}
.card.fixture > h3::after{
  content:"demo data";
  font-family:var(--mono); font-size:9.5px; font-style:italic;
  color:var(--muted); opacity:.55; margin-left:auto; font-weight:400;
  letter-spacing:.06em;
}

/* ===== Grid body ===== */
.agent-body{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:28px;
}

/* cards — white, hairline, soft layered lift off the gray canvas */
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:22px 24px;
  box-shadow:0 1px 2px rgba(18,18,18,.04), 0 8px 20px -16px rgba(18,18,18,.12);
}
.card h3{
  font-family:var(--display); font-weight:500; font-size:17px;
  letter-spacing:-.01em; margin:0 0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card h3 em{font-style:normal; color:var(--accent); font-weight:500}
.card h3 .tail{
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.card h3 .tail .ld{width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(31,141,90,.5); animation:pulse-dot 2s infinite}

/* Quiet list rows (calm for data) */
.q-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  padding:10px 0; border-top:1px solid var(--line);
  font-size:13.5px; align-items:center;
}
.q-row:first-of-type{border-top:0}
.q-row .q-dot{width:6px;height:6px;border-radius:2px;background:var(--accent)}
.q-row .q-body b{font-weight:500}
.q-row .q-body .mini{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:2px; display:block}
.q-row .q-tail{font-family:var(--mono); font-size:10.5px; color:var(--muted); white-space:nowrap}

/* Sparkline / chart placeholder */
.chart{
  height:120px; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; position:relative;
}
.chart svg{width:100%;height:100%}

/* kv list */
.kv-list{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-family:var(--mono); font-size:12px}
.kv-list dt{color:var(--muted)}
.kv-list dd{margin:0; color:var(--ink-2)}
.kv-list dd b{color:var(--ink)}

/* chips row */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}

/* Conversation mock (for Kira) */
.conv{display:flex;flex-direction:column;gap:10px}
.msg{
  padding:10px 14px; border-radius:10px;
  font-size:13.5px; line-height:1.5;
  max-width:92%;
  border:1px solid var(--line);
  background:var(--paper);
}
.msg.user{background:var(--white); align-self:flex-start}
.msg.ai{background:var(--dark); color:#fff; border-color:var(--dark); align-self:flex-end}
.msg.ai b{color:var(--chartreuse)}
.msg .from{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.msg.ai .from{color:#a89fd9}