/* ============================================================================
 * Activity Timeline — Cortex "Activity Cards" look & feel (token-driven)
 * ----------------------------------------------------------------------------
 * Re-skin the whole timeline from the TOKENS block below. The palette + type
 * scale + elevation are lifted from the Cortex activity-cards reference so the
 * in-app timeline matches it 1:1 in light mode, with a dark remap layered on.
 *
 * Class names are kept stable (sp-tl-*, sp-activity-*) so the Razor partials
 * and activity-timeline.js keep working unchanged.
 *
 * Loaded after app.css so these rules win over the compiled baseline.
 * ========================================================================== */

/* Handwriting face for sticky notes — Caveat from DesignSystemFonts.HandStylesheet.
   Cortex UI/mono faces are already loaded by _Layout via DesignSystemFonts. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

@property --tl-ai-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ─────────────────────────────── Tokens ───────────────────────────────── */
:root {
  /* brand accents */
  --tl-coral: #E04F35;  --tl-coral-soft: #FCEDE9;  --tl-coral-line: #F4CFC6;
  --tl-amber: #E0922F;  --tl-amber-soft: #FBF1E1;  --tl-amber-line: #F0DEBE;
  --tl-teal:  #0D9488;  --tl-teal-soft:  #E5F4F2;  --tl-teal-line:  #CDE9E4;
  --tl-green: #16A34A;  --tl-green-soft: #E7F6EC;  --tl-green-line: #CBEBD4;
  --tl-iris:  #6366F1;

  /* ink + lines + surfaces */
  --tl-text:   #171A21;
  --tl-text-2: #454C5A;
  --tl-text-3: #6C7585;
  --tl-muted:  #9AA2B1;
  --tl-border:        #E8EAEE;
  --tl-border-2:      #F0F2F5;
  --tl-border-strong: #DDE0E7;
  --tl-surface: #FFFFFF;
  --tl-canvas:  #F5F6F9;
  --tl-spine:   #E3E6EC;

  /* fonts — aliases of DesignSystemFonts / platform-design tokens */
  --tl-font: var(--font-ui, 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --tl-hand: var(--font-hand, 'Caveat', 'Segoe Print', cursive);
  --tl-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace);

  /* geometry */
  --tl-radius-card: 14px;
  --tl-radius-node: 9px;
  --tl-node-size:   30px;
  --tl-rail-x:      17px;   /* spine x-offset from the event's left edge */
  --tl-pad-left:    50px;   /* content indent past the spine */
  --tl-event-gap:   22px;

  /* elevation */
  --tl-s1: 0 1px 2px rgba(20,28,46,.05);
  --tl-s2: 0 4px 14px -4px rgba(20,28,46,.12), 0 1px 3px rgba(20,28,46,.06);
  --tl-s3: 0 18px 44px -14px rgba(20,28,46,.24);

  /* per-type accents (point at brand accents) */
  --tl-accent-email:   var(--tl-teal);
  --tl-accent-call:    var(--tl-teal);
  --tl-accent-meeting: var(--tl-teal);
  --tl-accent-stage:   var(--tl-teal);
  --tl-accent-task:        var(--tl-green);
  --tl-accent-task-high:   var(--tl-amber);
  --tl-accent-task-urgent: var(--tl-coral);

  /* AI rainbow */
  --tl-ai-gradient: conic-gradient(from var(--tl-ai-angle),
                      #4285F4, #9B72CB, #F84F8E, #FF9F45, #34A853, #4285F4);
  --tl-ai-title:    linear-gradient(92deg, #1a1c4b, #6e3aa6 55%, #b83a7a);
  --tl-ai-kind:     linear-gradient(90deg, #4285F4, #9B72CB, #F84F8E);
  --tl-ai-chip-ink: #5b40b5;
  --tl-ai-spin-dur: 7s;

  /* sticky-note paper */
  --tl-note-yellow-1: #FFF6B8;  --tl-note-yellow-2: #FFEF99;  --tl-note-ink-yellow: #4a3d08;
  --tl-note-blue-1:   #D9EEFB;  --tl-note-blue-2:   #C3E4F7;  --tl-note-ink-blue:   #173a52;

  /* avatars */
  --tl-av-teal:  linear-gradient(135deg, #0D9488, #42C2B4);
  --tl-av-iris:  linear-gradient(135deg, #6366F1, #8B7CF6);
  --tl-av-coral: linear-gradient(135deg, #E0734F, #E0A04F);

  --tl-ease: cubic-bezier(.2,.7,.2,1);
}

/* dark remap — keep accents vivid, darken structure */
[data-color-mode="dark"] {
  --tl-text:   #E6E9F0;
  --tl-text-2: #B6BDCB;
  --tl-text-3: #8A93A4;
  --tl-muted:  #6B7384;
  --tl-border:        #2A2F3A;
  --tl-border-2:      #232833;
  --tl-border-strong: #353B48;
  --tl-surface: #161A22;
  --tl-canvas:  #11141B;
  --tl-spine:   #2A2F3A;

  --tl-coral-soft: #3a201b; --tl-coral-line: #5a2f26;
  --tl-amber-soft: #3a2e16; --tl-amber-line: #564222;
  --tl-teal-soft:  #11302d; --tl-teal-line:  #1c4a44;
  --tl-green-soft: #14321f; --tl-green-line: #1f4a30;

  --tl-note-yellow-1: #4a4322; --tl-note-yellow-2: #3c3617; --tl-note-ink-yellow: #f5e9b8;
  --tl-note-blue-1:   #1f3a4d; --tl-note-blue-2:   #16303f; --tl-note-ink-blue:   #cce6f5;

  --tl-s1: 0 1px 2px rgba(0,0,0,.4);
  --tl-s2: 0 4px 14px -4px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --tl-s3: 0 18px 44px -14px rgba(0,0,0,.7);
}

@keyframes tl-spin { to { --tl-ai-angle: 360deg; } }
@keyframes tl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tl-blink { 50% { opacity: 0; } }
@keyframes tl-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }

/* ───────────────────────────── Pane shell ─────────────────────────────── */
.sp-activity-pane {
  font-family: var(--tl-font);
  color: var(--tl-text);
  background: var(--tl-canvas);
  -webkit-font-smoothing: antialiased;
}
.sp-activity-pane__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--tl-border-2);
  background: var(--tl-surface); flex: 0 0 auto; flex-wrap: wrap;
}
.sp-activity-pane__icon {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--tl-radius-node);
  display: grid; place-items: center;
  color: var(--tl-teal);
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  box-shadow: none;
}
.sp-activity-pane__icon i { font-size: 0.9rem; }
.sp-activity-pane__title { font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--tl-text); }
.sp-activity-pane__scroll {
  background:
    radial-gradient(900px 480px at 90% -10%, rgba(155,114,203,.06), transparent 55%),
    radial-gradient(600px 420px at -5% 110%, rgba(66,133,244,.05), transparent 50%),
    var(--tl-canvas);
}

/* compose toolbar */
.sp-activity-tools { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.sp-activity-tool {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .6rem; border-radius: 9px; font-size: .8rem; font-weight: 600;
  font-family: var(--tl-font);
  background: transparent; color: var(--tl-text-2);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s var(--tl-ease), color .15s var(--tl-ease), border-color .15s var(--tl-ease);
}
.sp-activity-tool:hover:not(:disabled) { background: var(--tl-border-2); color: var(--tl-text); border-color: var(--tl-border-strong); }
.sp-activity-tool i { font-size: .9rem; }
.sp-activity-tool--muted, .sp-activity-tool:disabled { opacity: .5; cursor: not-allowed; }

/* "Summarise" trigger — neutral bordered button; rainbow on sparkle SVG only. */
.sp-ai-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--tl-font);
  color: var(--tl-text-2);
  background: var(--tl-surface);
  border: 1px solid var(--tl-border-strong);
  cursor: pointer;
  transition: background .15s var(--tl-ease), color .15s var(--tl-ease), border-color .15s var(--tl-ease);
}
.sp-ai-trigger:hover { background: var(--tl-border-2); color: var(--tl-text); }
.sp-ai-trigger:focus-visible { outline: 2px solid var(--tl-iris); outline-offset: 2px; }
.sp-ai-trigger[aria-busy="true"] { pointer-events: none; opacity: .85; }
.sp-ai-trigger .sp-ai-icon { flex-shrink: 0; display: block; }

/* ─────────────────────────── Timeline + spine ─────────────────────────── */
.sp-tl { position: relative; }
.sp-tl-group { position: relative; }

.sp-tl-divider {
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 0 .9rem var(--tl-pad-left);
}
.sp-tl-divider:first-child { margin-top: .25rem; }
.sp-tl-divider span {
  padding: 0;   /* reset stale bundle padding */
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tl-muted);
}
/* the stale bundle adds a left-hand divider line via ::before — drop it so the
   month label sits left-aligned (reference style) with a single trailing rule. */
.sp-tl-divider::before { content: none; }
.sp-tl-divider::after { content: ""; flex: 1; height: 1px; background: var(--tl-border); }

/* event = absolute node on a spine + flowing card */
.sp-tl-event {
  position: relative; padding-left: var(--tl-pad-left); padding-bottom: var(--tl-event-gap);
  animation: tl-rise .55s var(--tl-ease) both;
}
.sp-tl-event::before {
  content: ""; position: absolute;
  left: var(--tl-rail-x); top: 34px; bottom: -2px; width: 2px;
  background: linear-gradient(var(--tl-spine), var(--tl-spine) 75%, transparent);
}
.sp-tl-event:last-child::before,
.sp-tl-event.is-last::before { display: none; }

/* subtle entrance stagger */
.sp-tl-event:nth-child(2) { animation-delay: .04s; }
.sp-tl-event:nth-child(3) { animation-delay: .09s; }
.sp-tl-event:nth-child(4) { animation-delay: .14s; }
.sp-tl-event:nth-child(5) { animation-delay: .19s; }
.sp-tl-event:nth-child(6) { animation-delay: .24s; }
.sp-tl-event:nth-child(n+7) { animation-delay: .28s; }

/* node disc */
.sp-tl-node {
  position: absolute; left: 4px; top: 2px; z-index: 2;
  width: var(--tl-node-size); height: var(--tl-node-size);
  border-radius: var(--tl-radius-node);
  display: grid; place-items: center;
  background: var(--tl-surface); color: var(--tl-text-3);
  border: 1px solid var(--tl-border); box-shadow: var(--tl-s1);
  transition: transform .18s var(--tl-ease);
}
.sp-tl-event:hover .sp-tl-node { transform: scale(1.07); }
.sp-tl-node i { font-size: .85rem; }
.sp-tl-node--teal  { background: var(--tl-teal-soft);  color: var(--tl-teal);  border-color: var(--tl-teal-line); }
.sp-tl-node--green { background: var(--tl-green-soft); color: var(--tl-green); border-color: var(--tl-green-line); }
.sp-tl-node--coral { background: var(--tl-coral-soft); color: var(--tl-coral); border-color: var(--tl-coral-line); }
.sp-tl-node--amber { background: var(--tl-amber-soft); color: var(--tl-amber); border-color: var(--tl-amber-line); }
.sp-tl-node--info  { background: var(--tl-surface);    color: var(--tl-text-3); border-color: var(--tl-border); }
.sp-tl-node--rainbow {
  border: none; color: #fff; background: var(--tl-ai-gradient);
  animation: tl-spin 6s linear infinite; box-shadow: 0 6px 16px -6px rgba(155,114,203,.55);
}

/* ─────────────────────────────── Cards ────────────────────────────────── */
.sp-tl-card {
  /* display:block + gap/margin resets defeat the stale .sp-tl-card{display:flex}
     still living in the compiled app.css bundle, which otherwise lays the card's
     head/subject/meta out as side-by-side columns. */
  display: block; gap: 0; margin-bottom: 0;
  position: relative; align-self: start; min-width: 0;
  background: var(--tl-surface); border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-card); padding: 14px 16px;
  box-shadow: var(--tl-s1);
  transition: transform .2s var(--tl-ease), box-shadow .2s var(--tl-ease), border-color .2s var(--tl-ease);
}
.sp-tl-event:hover > .sp-tl-card { transform: translateY(-2px); box-shadow: var(--tl-s2); border-color: var(--tl-border-strong); }
.sp-tl-card.is-completed { opacity: .85; }

.sp-tl-card__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.sp-tl-card__type { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-text-3); }
.sp-tl-card__time { margin-left: auto; font-size: .72rem; color: var(--tl-muted); font-weight: 500; white-space: nowrap; }
.sp-tl-card__subject { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; color: var(--tl-text); line-height: 1.35; }
.sp-tl-card__snippet { font-size: .82rem; color: var(--tl-text-2); line-height: 1.55; margin-top: .35rem; overflow-wrap: anywhere; }
.sp-tl-card__meta { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .76rem; color: var(--tl-text-2); }
.sp-tl-card__meta i.bi-person-circle { color: var(--tl-muted); }
.sp-tl-card__badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem;
  border-radius: 999px; font-size: .62rem; font-weight: 700;
  background: var(--tl-green-soft); color: var(--tl-green);
}

.sp-tl-card__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: .2rem; opacity: 0; transition: opacity .15s var(--tl-ease); }
.sp-tl-card:hover .sp-tl-card__actions, .sp-tl-card:focus-within .sp-tl-card__actions { opacity: 1; }
.sp-tl-card__action {
  /* width/height:auto override the stale bundle's fixed 1.6rem square, which would
     otherwise crush the text Reply/Forward buttons. */
  width: auto; height: auto;
  border: 0; background: transparent; color: var(--tl-text-3);
  border-radius: 7px; padding: .2rem .35rem; cursor: pointer; font-size: .82rem;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: background .15s var(--tl-ease), color .15s var(--tl-ease);
}
.sp-tl-card__action:hover { background: var(--tl-border-2); color: var(--tl-text); }
.sp-tl-card__action--danger:hover { background: var(--tl-coral-soft); color: var(--tl-coral); }
.sp-tl-card__icon { display: none; }

/* avatars */
.sp-tl-avatar {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .58rem; font-weight: 700; color: #fff;
  background: var(--tl-av-teal); letter-spacing: .02em;
}
.sp-tl-avatar--lg { width: 32px; height: 32px; font-size: .72rem; }
.sp-tl-avatar--iris  { background: var(--tl-av-iris); }
.sp-tl-avatar--coral { background: var(--tl-av-coral); }

/* ── Note (timeline card — clean, no tape/skew; warm paper is deck-only) ── */
.sp-tl-card--note {
  width: 100%;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-card);
  box-shadow: var(--tl-s1);
  transform: none;
  transition: box-shadow .25s var(--tl-ease);
  background: var(--tl-surface);
  color: var(--tl-text);
}
.sp-tl-card--note.sp-tl-paper-yellow,
.sp-tl-card--note.sp-tl-paper-blue {
  background: var(--tl-surface);
  color: var(--tl-text);
  transform: none;
  box-shadow: var(--tl-s1);
}
.sp-tl-event:hover > .sp-tl-card--note {
  transform: none;
  box-shadow: var(--tl-s2);
}
.sp-tl-card--note::before { content: none; display: none; }
.sp-tl-card--note::after { content: none; display: none; }
.sp-tl-card--note .sp-tl-card__type { color: var(--tl-text-3); opacity: 1; }
.sp-tl-card--note .sp-tl-card__time { color: var(--tl-text-3); opacity: 1; }
.sp-tl-card--note .sp-tl-card__subject,
.sp-tl-card--note .sp-tl-card__snippet {
  font-family: var(--tl-font); font-size: .92rem; line-height: 1.4; font-weight: 600; color: var(--tl-text); margin-top: .2rem;
}
.sp-tl-card--note .sp-tl-card__meta { color: var(--tl-text-3); opacity: 1; margin-top: .8rem; }

/* ── Email ── */
.sp-tl-email__from { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.sp-tl-email__who { min-width: 0; }
.sp-tl-email__name { font-size: .84rem; font-weight: 700; color: var(--tl-text); display: flex; align-items: center; gap: .4rem; }
.sp-tl-email__tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tl-text-3); background: var(--tl-border-2); padding: .08rem .4rem; border-radius: 5px;
}
.sp-tl-email__tag.is-sent { color: var(--tl-teal); background: var(--tl-teal-soft); }
.sp-tl-email__dir { display: inline-flex; align-items: center; gap: .25rem; font-size: .6rem; font-weight: 700; text-transform: uppercase; color: var(--tl-text-3); margin-top: .12rem; }
.sp-tl-email__actions { display: flex; gap: .5rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--tl-border-2); }
.sp-tl-email__actions .sp-tl-card__action {
  border: 1px solid var(--tl-border); background: var(--tl-surface); color: var(--tl-text-2);
  font-size: .76rem; font-weight: 600; padding: .35rem .7rem; border-radius: 9px;
}
.sp-tl-email__actions .sp-tl-card__action:hover { background: var(--tl-border-2); border-color: var(--tl-border-strong); }
.sp-tl-email__actions .sp-tl-card__action--primary { color: #fff; background: var(--tl-teal); border-color: var(--tl-teal); box-shadow: 0 4px 12px -5px rgba(13,148,136,.6); }
.sp-tl-email__actions .sp-tl-card__action--primary:hover { background: #0B7E74; color: #fff; }

/* ── Task ── */
.sp-tl-card--task { padding-left: 19px; }
.sp-tl-card--task::before { /* priority rail */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-top-left-radius: var(--tl-radius-card); border-bottom-left-radius: var(--tl-radius-card);
  background: var(--tl-muted);
}
.sp-tl-card--task[data-priority="high"]::before   { background: var(--tl-accent-task-high); }
.sp-tl-card--task[data-priority="urgent"]::before { background: var(--tl-accent-task-urgent); }
.sp-tl-card--task.is-completed::before { background: var(--tl-accent-task); }
.sp-tl-task__row { display: flex; align-items: flex-start; gap: .65rem; }
.sp-tl-task__check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  border: 2px solid #C7CDD7; background: var(--tl-surface); cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: background .18s var(--tl-ease), border-color .18s var(--tl-ease);
}
.sp-tl-task__check:hover { border-color: var(--tl-green); }
.sp-tl-task__check i { font-size: .8rem; opacity: 0; transform: scale(.5); transition: opacity .14s, transform .18s var(--tl-ease); }
.sp-tl-task__check[aria-checked="true"] { background: var(--tl-green); border-color: var(--tl-green); }
.sp-tl-task__check[aria-checked="true"] i { opacity: 1; transform: none; }
.sp-tl-card--task.is-completed .sp-tl-card__subject { text-decoration: line-through; text-decoration-color: #C7CDD7; color: var(--tl-muted); }
.sp-tl-task__due { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: var(--tl-text-3); }
.sp-tl-task__due--overdue { color: var(--tl-coral); }
.sp-tl-task__pill {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .5rem; border-radius: 999px;
}
.sp-tl-task__pill--high   { background: var(--tl-amber-soft); color: var(--tl-amber); }
.sp-tl-task__pill--urgent { background: var(--tl-coral-soft); color: var(--tl-coral); }
.sp-tl-task__progress { height: 5px; border-radius: 999px; background: var(--tl-border); margin-top: .6rem; overflow: hidden; }
.sp-tl-task__progress > span { display: block; height: 100%; background: var(--tl-teal); border-radius: inherit; }

/* ── Call / Meeting ── */
.sp-tl-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--tl-text-3); font-weight: 600; }
.sp-tl-meeting__attendees { display: flex; gap: .25rem; margin-top: .55rem; }

/* ── Stage change ── */
.sp-tl-stage { display: flex; align-items: center; gap: .45rem; font-size: .84rem; }
.sp-tl-stage__from { color: var(--tl-text-3); }
.sp-tl-stage__to { color: var(--tl-accent-stage); font-weight: 700; }

/* ── AI recap card (rainbow border + aurora glow) ── */
.sp-tl-card--ai { position: relative; border: 0; background: var(--tl-surface); overflow: hidden; padding: 15px 16px; }
.sp-tl-card--ai::before { /* spinning gradient border */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: var(--tl-ai-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tl-spin var(--tl-ai-spin-dur) linear infinite; pointer-events: none; z-index: 1;
}
.sp-tl-card--ai::after { /* aurora glow */
  content: ""; position: absolute; inset: -40%; z-index: 0; opacity: .16; filter: blur(34px);
  background: conic-gradient(from var(--tl-ai-angle), #4285F4, #F84F8E, #FF9F45, #34A853, #4285F4);
  animation: tl-spin 9s linear infinite reverse; pointer-events: none;
}
.sp-tl-card--ai > * { position: relative; z-index: 2; }
.sp-tl-card--ai .sp-tl-card__type { font-weight: 800; background: var(--tl-ai-kind); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-ai-recap__summary { font-size: .84rem; color: var(--tl-text-2); line-height: 1.6; white-space: pre-wrap; }
.sp-ai-recap__caret { display: inline-block; width: 7px; height: 1em; vertical-align: -2px; background: var(--tl-iris); margin-left: 2px; animation: tl-blink 1s steps(2) infinite; }
.sp-ai-recap__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.sp-ai-chip {
  font-size: .74rem; font-weight: 600; color: var(--tl-ai-chip-ink); cursor: pointer;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(92deg, #4285F4, #9B72CB, #F84F8E) border-box;
  border: 1.4px solid transparent; border-radius: 999px; padding: .3rem .75rem;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .16s var(--tl-ease), color .16s var(--tl-ease), background .16s var(--tl-ease);
}
.sp-ai-chip:hover {
  color: #fff; transform: translateY(-1px);
  background: linear-gradient(92deg, #4285F4, #9B72CB, #F84F8E) padding-box, linear-gradient(92deg, #4285F4, #9B72CB, #F84F8E) border-box;
}

/* ───────────────────────────── States ─────────────────────────────────── */
.sp-tl-skeleton { padding: .5rem 0; }
.sp-tl-skeleton__row { position: relative; padding-left: var(--tl-pad-left); margin-bottom: var(--tl-event-gap); }
.sp-tl-skeleton__node { position: absolute; left: 4px; top: 2px; width: var(--tl-node-size); height: var(--tl-node-size); border-radius: var(--tl-radius-node); }
.sp-tl-skeleton__card { height: 66px; border-radius: var(--tl-radius-card); }
.sp-tl-shimmer {
  background: linear-gradient(90deg, var(--tl-border-2) 25%, var(--tl-border) 37%, var(--tl-border-2) 63%);
  background-size: 600px 100%; animation: tl-shimmer 1.4s linear infinite;
}
.sp-activity-empty, .sp-activity-error { text-align: center; padding: 2.5rem 1rem; color: var(--tl-text-2); }
.sp-activity-error { color: var(--tl-coral); }

/* ─────────────────────── Reduced-motion guards ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-tl-event { animation: none; }
  .sp-tl-node--rainbow,
  .sp-ai-trigger::before,
  .sp-tl-card--ai::before,
  .sp-tl-card--ai::after { animation: none; }
  .sp-tl-shimmer { animation: none; }
  .sp-tl-event:hover > .sp-tl-card--note { transform: none; }
  .sp-ai-recap__caret { animation: none; }
}