/* Cosmos Design System — components
   ════════════════════════════════════════════════════════════════════
   Consolidates the component vocabulary that ships across /me,
   /connectors and the cosmos-mcp landing today, plus the .filament-bar
   composer recipe from /cosmos. Loads AFTER colors_and_type.css.

   Everything below uses tokens. No raw color values, no raw spacing.
   When a v2 page hand-rolled an inline style that didn't reach for a
   token, the token's been added — never the inverse.
   ════════════════════════════════════════════════════════════════════ */

/* ── PAGE SHELL ────────────────────────────────────────────────────── */
.bg-shell {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.7) 100%),
    var(--bg-ground);
}
/* Scanline drift — slow, ambient. Used on /me to telegraph "live data".
   Pure visual texture; aria-hidden on the container. */
.bg-shell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%, transparent 47%,
    rgba(255,255,255,0.035) 50%,
    transparent 53%, transparent 100%);
  background-size: 100% 240%;
  animation: scan-drift 22s linear infinite;
}
@keyframes scan-drift {
  0%   { background-position: 0% -120%; }
  100% { background-position: 0% 120%; }
}
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: overlay; opacity: 0.55;
}

/* ── NAV ───────────────────────────────────────────────────────────── */
nav.cosmos-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55), rgba(0,0,0,0.18) 70%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
nav.cosmos-nav .word {
  font-family: var(--font-self);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-1);
}
nav.cosmos-nav .right {
  display: flex; gap: 24px; align-items: center;
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}
nav.cosmos-nav .right a {
  color: var(--ink-3); border-bottom: 0;
  transition: color 200ms var(--ease-soft);
}
nav.cosmos-nav .right a:hover,
nav.cosmos-nav .right a.current { color: var(--ink-1); }

@media (max-width: 600px) {
  nav.cosmos-nav { padding: 14px 16px; }
  nav.cosmos-nav .right { gap: 14px; font-size: 9px; letter-spacing: 0.14em; }
}

/* ── PAGE TITLE & META ─────────────────────────────────────────────── */
.page-title {
  font-family: var(--font-self);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: var(--ls-heading);
  color: var(--ink-1);
  line-height: 1;
  margin: 0 0 10px;
}
.page-meta {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: var(--ls-micro);
  text-transform: lowercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 48px;
}
.page-meta::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px;
  background: var(--ink-line);
}

/* ── SECTION LABEL ────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: lowercase;
  color: var(--ink-3);
  margin: 40px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::after {
  content: ""; flex: 1;
  height: 1px; background: var(--ink-line);
}

/* The /me variant — `// label` prefix style. Used inside .ds-section.
   The rule wipes left-to-right on first reveal; the section enters
   on a 6px translateY + opacity rise. */
.ds-marker {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: lowercase;
  color: var(--ink-3);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 14px;
}
.ds-marker::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px;
  background: var(--ink-2);
  transform-origin: left;
}
.ds-marker-strong { color: var(--ink-1); }
.ds-marker-strong::before { background: var(--ink-1); }

.ds-section { margin: 0 0 36px; opacity: 0;
  animation: ds-rise 700ms var(--ease-soft) forwards; }
.ds-section:nth-child(1) { animation-delay: 0ms; }
.ds-section:nth-child(2) { animation-delay: 80ms; }
.ds-section:nth-child(3) { animation-delay: 160ms; }
.ds-section:nth-child(4) { animation-delay: 240ms; }
.ds-section:nth-child(5) { animation-delay: 320ms; }
.ds-section:nth-child(6) { animation-delay: 400ms; }
.ds-section .ds-marker::before {
  transform: scaleX(0);
  animation: ds-wipe 700ms var(--ease-soft) forwards;
  animation-delay: inherit;
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── GLASS — the one surface ──────────────────────────────────────── */
.glass {
  background: var(--whisper-bg);
  border: 0;
  border-radius: var(--r-2);
  box-shadow:
    inset 0 0 0 1px var(--whisper-edge),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px -20px rgba(0,0,0,0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.glass-strong { background: rgba(8, 12, 22, 0.62); }

[data-ambience="day"] .glass {
  background: rgba(255, 252, 245, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(160, 130, 90, 0.30),
    0 1px 0 rgba(255,255,255,0.60) inset,
    0 8px 32px -8px rgba(80, 60, 30, 0.14);
}

/* Kind-tinted glass — re-cast the inset ring at the matching hue. */
.glass-tinted-self     { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-self)     35%, var(--whisper-edge)), 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.55); }
.glass-tinted-observed { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-observed) 30%, var(--whisper-edge)), 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.55); }
.glass-tinted-inferred { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-inferred) 30%, var(--whisper-edge)), 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.55); }
.glass-tinted-person   { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-person)   30%, var(--whisper-edge)), 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.55); }
.glass-tinted-cosmos   { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-cosmos)   25%, var(--whisper-edge)), 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.55); }

/* ── TILE — connectors / lab / imports ────────────────────────────── */
.tile {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  padding: 18px 20px;
  display: flex; flex-direction: column;
  min-height: 124px;
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}
.tile:hover { border-color: var(--ink-3); }
.tile.add { border-style: dashed; align-items: flex-start; cursor: pointer; background: transparent; }
.tile.add:hover { border-color: var(--signal); }
.tile-name {
  font-family: var(--font-self);
  font-size: 16px; font-weight: 400;
  color: var(--ink-1);
  margin-bottom: 8px;
}
.tile-meta {
  font-family: var(--font-meta);
  font-size: 11px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1.4;
}
.tile-meta-count { color: var(--ink-2); }
.tile-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 16px;
}
.tile-row-meta {
  font-family: var(--font-meta);
  font-size: 10px; color: var(--ink-4);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* ── STATUS DOT ───────────────────────────────────────────────────── */
.status-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 99px; background: var(--ink-4);
}
.status-dot.live {
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
  animation: dot-breath var(--dur-breath) ease-in-out infinite;
}
@keyframes dot-breath {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ── BUTTON ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  padding: 7px 13px;
  min-height: 32px;
  font-family: var(--font-meta);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    transform 200ms var(--ease-soft);
}
.btn:hover { border-color: var(--ink-3); color: var(--ink-1); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.primary {
  border-color: var(--signal);
  color: var(--signal);
}
.btn.primary:hover {
  background: var(--signal);
  color: var(--bg-ground);
}
.btn.danger:hover { border-color: var(--err); color: var(--err); }

/* Pill button — the /cosmos primary action surface. Kind-cosmos tint,
   pill radius, ambient backdrop. Mirrors v2 .btn-pill exactly. */
.btn-pill {
  font-family: var(--font-self);
  font-weight: 400;
  font-size: 13px;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kind-cosmos) 38%, transparent);
  background: color-mix(in oklab, var(--kind-cosmos) 14%, rgba(8,12,22,0.50));
  color: var(--ink-1);
  cursor: pointer;
  transition: background 240ms var(--ease-out-expo),
              box-shadow 240ms var(--ease-out-expo),
              transform 240ms var(--ease-out-expo);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.btn-pill:hover {
  background: color-mix(in oklab, var(--kind-cosmos) 22%, rgba(8,12,22,0.60));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--kind-cosmos) 60%, transparent),
    0 0 24px -4px color-mix(in oklab, var(--kind-cosmos) 60%, transparent);
  transform: translateY(-1px);
}

/* ── CHIP ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px 4px 7px;
  font-family: var(--font-self);
  font-weight: 300;
  font-size: 12px;
  background: rgba(8, 12, 22, 0.50);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ink-line);
  border-radius: var(--r-pill);
  color: var(--ink-1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  cursor: pointer;
  transition: box-shadow 240ms var(--ease-out-expo);
}
.chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.chip-live::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 99px; background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
  animation: dot-breath var(--dur-breath) ease-in-out infinite;
}

/* ── INPUT / TEXTAREA ─────────────────────────────────────────────── */
.input, .textarea {
  display: block; width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  padding: 8px 0 10px;
  font-family: var(--font-self);
  font-size: 15px;
  color: var(--ink-1);
  outline: none;
  transition: border-color 200ms var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); font-style: italic; font-family: var(--font-cosmos); }
.input:focus, .textarea:focus { border-bottom-color: var(--signal); }
.textarea { font-family: var(--font-meta); font-size: 12px; line-height: 18px; resize: vertical; min-height: 120px; }

@media (max-width: 600px) {
  .input, .textarea { font-size: 16px; }  /* prevent iOS zoom */
}

/* ── TOGGLE ───────────────────────────────────────────────────────── */
.toggle {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: 10px; color: var(--ink-3);
}
.toggle input {
  appearance: none;
  width: 26px; height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ink-line);
  border-radius: 99px;
  cursor: pointer; position: relative;
  margin: 0;
  transition: background 200ms var(--ease-soft);
}
.toggle input::after {
  content: ""; position: absolute;
  top: 1px; left: 1px;
  width: 10px; height: 10px;
  background: var(--ink-3);
  border-radius: 99px;
  transition: transform 200ms var(--ease-soft), background 200ms var(--ease-soft);
}
.toggle input:checked {
  background: rgba(127, 237, 199, 0.15);
  border-color: var(--signal);
}
.toggle input:checked::after {
  transform: translateX(12px);
  background: var(--signal);
}

/* ── MODAL ────────────────────────────────────────────────────────── */
.modal-veil {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal-veil.open { display: flex; }
.modal {
  background: #0a0a0a;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2);
  max-width: 480px; width: 100%;
  padding: 28px 28px 24px;
  position: relative;
}
.modal h3 {
  font-family: var(--font-cosmos);
  font-variation-settings: var(--font-cosmos-opsz-display);
  font-size: 20px; font-weight: 500;
  color: var(--ink-1); margin: 0 0 6px;
}
.modal .meta-line {
  font-family: var(--font-meta);
  font-size: 10px; letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}
.modal .body-line {
  font-family: var(--font-cosmos);
  font-variation-settings: var(--font-cosmos-opsz-body);
  font-size: 14px; font-weight: 300;
  line-height: 1.55; color: var(--ink-2);
  margin: 0 0 18px;
}
.modal label {
  display: block;
  font-family: var(--font-meta);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 8px;
}
.modal-row { display: flex; gap: 10px; margin-top: 8px; }

/* ── FILAMENT (composer) ──────────────────────────────────────────── */
.filament-bar {
  position: relative; width: 100%;
  display: flex; align-items: flex-end;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  background: var(--whisper-bg);
  border: 0;
  border-radius: var(--r-4);
  box-shadow: inset 0 0 0 1px var(--whisper-edge);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: box-shadow 240ms var(--ease-out-expo),
              background 240ms var(--ease-out-expo);
}
.filament-bar.focused { box-shadow: inset 0 0 0 1px var(--signal); }
.filament-bar::before {
  content: ""; position: absolute;
  left: 10%; right: 10%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(127, 237, 199, 0.10) 20%,
    rgba(127, 237, 199, 0.55) 50%,
    rgba(127, 237, 199, 0.10) 80%,
    transparent 100%);
  filter: blur(0.5px);
  pointer-events: none;
}
.filament-bar textarea,
.filament-bar input {
  flex: 1;
  background: transparent; border: 0; outline: 0;
  color: var(--ink-1);
  font-family: var(--font-self);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  resize: none;
  padding: 8px 0;
  field-sizing: content;
  min-height: 28px;
  max-height: calc(1.45em * 6 + 16px);
  overflow-y: auto;
  text-wrap: pretty;
}
.filament-bar textarea::placeholder {
  color: var(--ink-4);
  font-style: normal;
  font-family: var(--font-self);
  font-weight: 300;
}
.filament-send {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: rgba(127, 237, 199, 0.10);
  box-shadow: inset 0 0 0 1px rgba(127, 237, 199, 0.28);
  border-radius: 50%;
  color: var(--signal);
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: 14px;
  transition:
    background 240ms var(--ease-out-expo),
    box-shadow 240ms var(--ease-out-expo),
    transform 240ms var(--ease-out-expo),
    opacity 240ms var(--ease-out-expo);
}
.filament-send:hover:not(:disabled) {
  background: rgba(127, 237, 199, 0.18);
  box-shadow: inset 0 0 0 1px var(--signal);
  transform: translateY(-1px);
}
.filament-send:disabled { opacity: 0.35; cursor: default; }

.filament-hint {
  display: flex; gap: 16px; justify-content: center; align-items: center;
  margin-top: 8px;
  font-family: var(--font-meta);
  font-size: 9px; letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity 240ms var(--ease-out-expo);
  pointer-events: none;
}
.filament-hint.visible { opacity: 1; }
.filament-hint kbd {
  font: inherit; color: var(--ink-3);
  padding: 1px 4px;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ink-line);
  border-radius: 3px;
}

/* ── STREAMING CURSOR — assistant's trailing edge ─────────────────── */
.streaming-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0.85;
  animation: stream-blink 1.05s steps(2) infinite;
}
@keyframes stream-blink {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .streaming-cursor { animation: none; opacity: 0.6; }
}

/* ── COSMOS BREATHING DOT ─────────────────────────────────────────── */
.cosmos-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kind-cosmos);
  box-shadow: 0 0 8px var(--kind-cosmos);
  display: inline-block;
  animation: cosmos-breath var(--dur-breath) ease-in-out infinite;
}
@keyframes cosmos-breath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* ── /ME ROW PATTERNS ─────────────────────────────────────────────── */
.ds-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; padding: 12px 0;
  align-items: baseline;
  border-top: 1px solid var(--ink-line);
}
.ds-row:first-of-type { border-top: 0; padding-top: 2px; }
.ds-row-title {
  font-family: var(--font-self);
  font-size: 13px; color: var(--ink-1);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.35;
}
.ds-row-sub {
  font-family: var(--font-cosmos);
  font-variation-settings: var(--font-cosmos-opsz-body);
  font-size: 12px; color: var(--ink-2); line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.ds-row-meta {
  font-family: var(--font-meta);
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
  display: flex; gap: 10px; align-items: baseline;
}

/* ── COUNTS STRIP ─────────────────────────────────────────────────── */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.count { padding: 22px 18px; border-right: 1px solid var(--ink-line); }
.count:last-child { border-right: none; }
.count-n {
  font-family: var(--font-self);
  font-weight: 300;
  font-size: 36px; line-height: 1;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.count-label {
  font-family: var(--font-meta);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin-top: 8px;
}

/* ── VIEW TOGGLE (text segments) ──────────────────────────────────── */
.view-toggle {
  display: inline-flex; gap: 0;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, 0.02);
}
.view-toggle button {
  background: transparent; border: 0;
  padding: 8px 16px; cursor: pointer;
  font-family: var(--font-meta);
  font-size: 10px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--ink-3);
  transition: color 200ms var(--ease-soft), background 200ms var(--ease-soft);
}
.view-toggle button:hover { color: var(--ink-2); }
.view-toggle button.active {
  color: var(--ink-1);
  background: rgba(127, 237, 199, 0.06);
}

/* ── EMPTY STATE ──────────────────────────────────────────────────── */
.empty {
  padding: 24px 0;
  font-family: var(--font-cosmos);
  font-variation-settings: var(--font-cosmos-opsz-body);
  font-size: 14px; color: var(--ink-3);
  font-style: italic;
}

/* ── SCROLL ───────────────────────────────────────────────────────── */
.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.scroll::-webkit-scrollbar { width: 4px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
}