/* ============ Interactive + AI Patterns (.i-) ============ */

/* ---- shared layout helpers ---- */
.i-stack { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.i-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   1. Button
   ========================================================= */
.i-btn {
  height: 32px; border-radius: 24px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.i-btn-primary { background: var(--fg-brand); color: #fff; font-weight: var(--fw-semibold); }
.i-btn-primary:hover { background: #e91d74; transform: translateY(-1px); }
.i-btn-secondary {
  background: transparent; color: var(--fg-brand);
  border: 0.5px solid var(--fg-brand-60); font-weight: var(--fw-regular);
}
.i-btn-secondary:hover { background: var(--brand-10); transform: translateY(-1px); }
.i-btn-ghost { background: transparent; color: var(--fg-subtle); }
.i-btn-ghost:hover { color: var(--fg-base); background: var(--bg-subtle); }
.i-btn-disabled, .i-btn-disabled:hover {
  background: var(--bg-subtle); color: var(--fg-disabled);
  cursor: not-allowed; transform: none;
}
.i-btn-block {
  height: 46px; border-radius: var(--radius-8); border: none; cursor: pointer;
  padding: 13px 24px; min-width: 240px;
  background: var(--fg-brand); color: #fff;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold);
  box-shadow: 0 0 0 3.7px rgba(190, 202, 234, .03);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.i-btn-block:hover { background: #e91d74; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 40, 130, .25); }

/* =========================================================
   2. Upgrade CTA
   ========================================================= */
.i-upgrade {
  position: relative; overflow: hidden;
  height: 40px; padding: 0 20px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 8px;
  background: radial-gradient(circle, #ff6ba9 0%, #ff0f73 100%);
  border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 -24px 32px rgba(255, 255, 255, .25), 0 8px 20px rgba(255, 15, 115, .3);
  color: #fff; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.i-upgrade::before {
  content: ""; position: absolute; top: -14px; left: 18%;
  width: 60%; height: 22px; border-radius: 50%;
  background: #ffdeec; filter: blur(12px); opacity: .8; pointer-events: none;
}
.i-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 -24px 32px rgba(255, 255, 255, .32), 0 12px 26px rgba(255, 15, 115, .38);
}

/* =========================================================
   3. Input
   ========================================================= */
.i-stack-fields { max-width: 280px; gap: 14px; }
.i-input, .i-search {
  width: 100%; height: 40px; border-radius: var(--radius-8);
  background: var(--bg-subtle); border: 1px solid transparent;
}
.i-input {
  padding: 0 12px; color: var(--fg-base);
  font-family: var(--font-sans); font-size: 14px;
  outline: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.i-input::placeholder, .i-search input::placeholder { color: var(--fg-muted); }
.i-input:focus { border-color: var(--fg-brand-30); box-shadow: 0 0 0 3px var(--brand-10); }
.i-search {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px;
  color: var(--fg-muted); cursor: text;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.i-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  color: var(--fg-base); font-family: var(--font-sans); font-size: 14px;
}
.i-search:focus-within { border-color: var(--fg-brand-30); box-shadow: 0 0 0 3px var(--brand-10); }
.i-search kbd {
  font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold);
  color: var(--fg-subtle); background: var(--bg-base-opaque);
  border: 1px solid var(--border-strong); border-radius: var(--radius-4);
  padding: 2px 5px; box-shadow: 0 1px 0 var(--border-strong);
}

/* =========================================================
   4. Checkbox & Toggle
   ========================================================= */
.i-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--fg-base); user-select: none;
}
.i-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-check-box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--fg-muted); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: background .15s ease, border-color .15s ease;
}
.i-check-box svg { opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; }
.i-check input:checked + .i-check-box { background: var(--fg-brand); border-color: var(--fg-brand); }
.i-check input:checked + .i-check-box svg { opacity: 1; transform: scale(1); }

.i-switch { cursor: pointer; display: inline-flex; }
.i-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-switch-track {
  width: 40px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-subtle-hover); display: inline-flex; align-items: center; padding: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
  transition: background .2s ease;
}
.i-switch-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg-base-opaque);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.i-switch input:checked + .i-switch-track { background: var(--fg-brand); }
.i-switch input:checked + .i-switch-track .i-switch-thumb { transform: translateX(16px); }

.i-billing {
  position: relative; display: inline-flex; height: 44px; border-radius: 40px;
  background: var(--bg-subtle); padding: 0; /* #f6f6f6-equivalent, dark-safe */
}
.i-billing input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-billing label {
  position: relative; z-index: 1;
  width: 104px; height: 44px; border-radius: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-muted);
  cursor: pointer; transition: color .2s ease;
}
.i-billing::after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 0;
  width: 104px; height: 44px; border-radius: 40px;
  background: var(--bg-base-opaque); border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-drop); box-sizing: border-box;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.i-billing input:nth-of-type(1):checked ~ label[for="i-bill-m"],
.i-billing input:nth-of-type(2):checked ~ label[for="i-bill-y"] { color: var(--fg-base); }
.i-billing:has(input:nth-of-type(2):checked)::after { transform: translateX(104px); }

/* =========================================================
   5. Segmented control (shared by mode selector + time range)
   ========================================================= */
.i-seg, .i-range, .i-chat-seg {
  display: inline-flex; align-items: center; gap: 2px;
  height: 24px; border-radius: var(--radius-8); padding: 2px;
  background: var(--bg-subtle);
}
.i-seg input, .i-range input, .i-chat-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-seg label, .i-range label, .i-chat-seg label {
  height: 20px; border-radius: 6px; padding: 2px 10px;
  display: inline-flex; align-items: center;
  font-size: 12px; line-height: 16px; color: var(--fg-muted);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.i-seg label:hover, .i-range label:hover, .i-chat-seg label:hover { color: var(--fg-subtle); }

.i-seg input:nth-of-type(1):checked ~ label[for="i-seg-ask"],
.i-seg input:nth-of-type(2):checked ~ label[for="i-seg-research"],
.i-seg input:nth-of-type(3):checked ~ label[for="i-seg-execute"],
.i-range input:nth-of-type(1):checked ~ label[for="i-range-24h"],
.i-range input:nth-of-type(2):checked ~ label[for="i-range-7d"],
.i-range input:nth-of-type(3):checked ~ label[for="i-range-30d"],
.i-chat-seg input:nth-of-type(1):checked ~ label[for="i-chat-ask"],
.i-chat-seg input:nth-of-type(2):checked ~ label[for="i-chat-research"] {
  background: var(--bg-base-opaque); color: var(--fg-base);
  box-shadow: var(--shadow-card);
}
/* Research active gets the pink treatment (Figma 52:10826) */
.i-seg input:nth-of-type(2):checked ~ label[for="i-seg-research"],
.i-chat-seg input:nth-of-type(2):checked ~ label[for="i-chat-research"] {
  color: var(--fg-brand); box-shadow: var(--shadow-card), 0 0 0 1px var(--fg-brand-30);
}

/* =========================================================
   6. Dialog
   ========================================================= */
.i-dialog {
  width: 356px; max-width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
}
.i-dialog-head {
  height: 52px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-b1); line-height: var(--lh-b1); font-weight: var(--fw-bold);
  color: var(--fg-base);
}
.i-dialog-head svg { color: var(--fg-subtle); cursor: pointer; }
.i-dialog-body {
  padding: 0 16px;
  font-size: var(--fs-b2); line-height: var(--lh-b2); color: var(--fg-subtle);
}
.i-dialog-actions {
  padding: 16px; display: flex; justify-content: flex-end; gap: 12px;
}

/* =========================================================
   7. Tooltip
   ========================================================= */
.i-tooltip-info {
  max-width: 254px; padding: 8px 10px;
  background: var(--bg-subtle-hover);
  border: 0.5px solid var(--border-base);
  border-radius: var(--radius-10);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .04);
  font-size: 12px; line-height: 16px; color: var(--fg-base);
}
.i-tooltip-chart {
  min-width: 170px; padding: 12px;
  background: var(--bg-menu);
  border: 1px solid var(--border-base);
  border-radius: 9.4px;
  box-shadow: var(--shadow-drop);
  display: flex; flex-direction: column; gap: 8px;
}
.i-tooltip-date { font-size: 12px; color: var(--fg-base); font-weight: var(--fw-semibold); }
.i-tooltip-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--fg-subtle);
  padding-top: 8px; border-top: 1px solid var(--border-base);
}
.i-tooltip-row b { margin-left: auto; color: var(--fg-base); font-weight: var(--fw-semibold); }
.i-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* =========================================================
   8. Pagination & Range
   ========================================================= */
.i-pager { display: inline-flex; align-items: center; gap: 10px; }
.i-pager-btn {
  width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--bg-subtle); color: var(--fg-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.i-pager-btn:hover { background: var(--bg-subtle-hover); color: var(--fg-base); }
.i-pager-count { font-size: 13px; font-weight: var(--fw-semibold); color: var(--fg-base); }
.i-pager-count em { font-style: normal; font-weight: var(--fw-regular); color: var(--fg-muted); }

/* =========================================================
   9. Pricing card
   ========================================================= */
.i-pricing {
  width: 260px; max-width: 100%;
  border: 1px solid var(--fg-brand);
  background: rgba(255, 40, 130, .06);
  border-radius: var(--radius-16);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.i-pricing-name {
  font-size: 24px; line-height: 32px; font-weight: var(--fw-bold);
  /* Pro silver text gradient (Figma 60:7901) — darker stops so it reads on light */
  background: linear-gradient(135deg, #7a96ac 0%, #6d7f8d 24%, #9fb9ce 54.8%, #6d7f8d 91.8%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.i-pricing-tagline {
  font-size: 13px; line-height: 18px;
  background: linear-gradient(135deg, #fd5d92 5.7%, #fea03c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.i-pricing-price {
  font-size: 48px; line-height: 1; font-weight: var(--fw-black); color: var(--fg-base);
  display: flex; align-items: baseline; gap: 2px; margin: 6px 0 4px;
}
.i-pricing-price sup { font-size: 32px; font-weight: var(--fw-bold); align-self: flex-start; margin-top: 4px; }
.i-pricing-price span { font-size: 13px; font-weight: var(--fw-regular); color: var(--fg-subtle); margin-left: 6px; }
.i-pricing-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.i-pricing-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 18px; color: var(--fg-base);
}
.i-pricing-features li svg { color: var(--fg-brand); flex: none; }
.i-pricing-cta {
  height: 40px; border-radius: var(--radius-full); border: none; cursor: pointer;
  background: var(--fg-brand); color: #fff;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold);
  transition: background .15s ease, transform .15s ease;
}
.i-pricing-cta:hover { background: #e91d74; transform: translateY(-1px); }

/* =========================================================
   10. Sidebar
   ========================================================= */
.i-sidebar {
  width: 264px; height: 240px; max-width: 100%;
  background: var(--bg-chat-nav);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-16);
  padding: 12px 8px 8px;
  display: flex; flex-direction: column;
}
.i-sb-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 8px 10px; color: var(--fg-base);
}
.i-sb-logo span { font-size: 16px; font-weight: var(--fw-black); letter-spacing: -.01em; }
.i-sb-collapse { margin-left: auto; color: var(--fg-muted); }
.i-sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.i-sb-row {
  height: 40px; border-radius: var(--radius-8); padding: 0 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: var(--fw-semibold); color: var(--fg-base);
  cursor: pointer; transition: background .15s ease;
}
.i-sb-row:hover { background: var(--bg-subtle); }
.i-sb-row.active { background: var(--bg-base-opaque); box-shadow: var(--shadow-card); }
.i-sb-row kbd {
  margin-left: auto; font-family: var(--font-sans);
  font-size: 12px; font-weight: var(--fw-regular); color: var(--fg-muted);
}
.i-sb-pulse {
  background: linear-gradient(90deg, #ed4264, #7d85d9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.i-sb-account {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 4px; border-top: 1px solid var(--border-base);
}
.i-sb-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: #6ba4b8; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--fw-semibold);
}
.i-sb-user { font-size: 13px; font-weight: var(--fw-semibold); color: var(--fg-base); }
.i-sb-pro {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 8px; border-radius: var(--radius-20);
  border: 1px solid #a3bccf;
  font-size: 10px; font-weight: var(--fw-semibold);
  background: linear-gradient(135deg, #7a96ac 0%, #6d7f8d 24%, #9fb9ce 54.8%, #6d7f8d 91.8%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.i-sb-pro svg { color: #8ea9bd; }
.i-sb-more { margin-left: auto; color: var(--fg-subtle); }

/* =========================================================
   11. Chat Input
   ========================================================= */
.i-chat {
  width: 100%; max-width: 700px; min-height: 120px;
  background: var(--bg-base-opaque);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .06), 0 0 0 1px var(--border-strong);
  padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.i-chat-placeholder {
  display: flex; align-items: center;
  font-size: var(--fs-b1); line-height: var(--lh-b1); color: var(--fg-muted);
}
.i-caret {
  width: 2px; height: 18px; margin-right: 6px; border-radius: 1px;
  background: var(--fg-brand);
  animation: i-blink 1.1s steps(1) infinite;
}
@keyframes i-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.i-chat-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.i-chat-left, .i-chat-right { display: flex; align-items: center; gap: 10px; }
.i-chat-model {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px; border-radius: var(--radius-8);
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  transition: background .15s ease, color .15s ease;
}
.i-chat-model:hover { background: var(--bg-subtle); color: var(--fg-base); }
.i-chat-mic {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.i-chat-mic:hover { background: var(--bg-subtle); color: var(--fg-subtle); }
.i-chat-send {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--fg-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 40, 130, .35);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.i-chat-send:hover { background: #e91d74; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 40, 130, .45); }

/* =========================================================
   12. Suggestion chips
   ========================================================= */
.i-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 300px; }
.i-chip {
  height: 28px; padding: 4px 12px; border-radius: var(--radius-20);
  background: transparent; border: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--fg-base);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.i-chip:hover { background: var(--bg-subtle); border-color: var(--fg-brand-30); transform: translateY(-1px); }
.i-chip-explore {
  height: 28px; padding: 4px 12px; border-radius: var(--radius-20);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-10); border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.i-chip-explore span {
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold);
  background: var(--gradient-new-function);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.i-chip-explore:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255, 40, 130, .18); }

/* =========================================================
   13. Thinking
   ========================================================= */
.i-thinking { display: flex; flex-direction: column; gap: 16px; min-width: 230px; }
.i-thinking-status {
  font-size: var(--fs-b1); line-height: var(--lh-b1); font-weight: var(--fw-semibold);
  background: linear-gradient(90deg, #ffb0c8 0%, #ff2868 40%, #ffb0c8 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: i-shimmer 2.4s linear infinite;
}
.i-thinking-status em { font-style: normal; font-weight: var(--fw-regular); }
@keyframes i-shimmer { from { background-position: 200% 0; } to { background-position: 0% 0; } }
.i-thinking-steps { display: flex; flex-direction: column; gap: 12px; }
.i-step {
  display: flex; align-items: center; gap: 9px; min-height: 16px;
  font-size: 12px; line-height: 16px; color: var(--fg-subtle);
}
.i-step > span { line-height: 0; }
.i-step-ico { display: inline-flex; align-items: center; color: var(--fg-muted); flex: none; align-self: center; }
.i-step-ico svg, .i-step-done svg { display: block; }
.i-step.done { color: var(--fg-subtle); }
.i-step.active { color: var(--fg-base); font-weight: 600; }
.i-step.active .i-step-ico { color: var(--fg-brand); }
.i-step-done {
  color: var(--data-green); display: inline-grid; place-items: center;
  width: 14px; height: 16px; margin-left: auto; flex: none; align-self: center;
}
.i-step-pulse {
  width: 14px; height: 16px; margin-left: auto; flex: none;
  display: inline-grid; place-items: center; align-self: center;
}
.i-step-pulse::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-brand); transform-origin: center;
  animation: i-pulse 1.2s ease-in-out infinite;
}
@keyframes i-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .i-thinking-status, .i-step-pulse::before, .i-caret { animation: none; }
}

/* =========================================================
   14. Answer card
   ========================================================= */
.i-answer {
  display: flex; gap: 20px; width: 100%; max-width: 660px; align-items: flex-start;
}
.i-answer-toc { display: flex; flex-direction: column; gap: 10px; width: 168px; flex: none; }
.i-toc-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 18px; color: var(--fg-base); cursor: pointer;
}
.i-toc-num {
  width: 26px; height: 26px; border-radius: var(--radius-8); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--fg-subtle);
  font-size: 13px; font-weight: var(--fw-semibold);
  transition: background .15s ease, color .15s ease;
}
.i-toc-item.active { color: var(--fg-brand); }
.i-toc-item.active .i-toc-num { background: var(--brand-10); color: var(--fg-brand); }
.i-answer-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.i-answer-body h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold);
  color: var(--fg-base); margin: 0;
}
.i-answer-body p {
  font-size: var(--fs-b2); line-height: var(--lh-b2); color: var(--fg-base); margin: 0;
}
.i-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-4);
  background: var(--tag-blue-bg); color: var(--tag-blue-fg);
  font-size: 10px; font-weight: var(--fw-bold); vertical-align: 2px;
  cursor: pointer;
}
.i-tldr {
  background: var(--bg-subtle); border-radius: var(--radius-8);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.i-tldr-title { font-size: 12px; font-weight: var(--fw-bold); color: var(--fg-base); letter-spacing: .02em; }
.i-tldr-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 18px; color: var(--fg-base);
}
.i-tldr-row span {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--fg-brand); transform: translateY(-2px);
}
.i-answer-actions { display: flex; gap: 6px; padding-top: 2px; }
.i-answer-actions button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border-radius: 6px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; color: var(--fg-subtle);
  transition: background .15s ease, color .15s ease;
}
.i-answer-actions button:hover { background: var(--bg-subtle); color: var(--fg-base); }

@media (max-width: 760px) {
  .i-answer { flex-direction: column; }
  .i-answer-toc { flex-direction: row; width: auto; flex-wrap: wrap; }
}

/* =========================================================
   15. Source cards
   ========================================================= */
.i-sources { display: flex; gap: 12px; width: 100%; justify-content: center; }
.i-source {
  flex: 1; max-width: 150px; padding: 10px 12px;
  border: 1px solid var(--border-base); border-radius: var(--radius-12);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.i-source:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-drop);
  border-color: var(--border-strong);
}
.i-source-domain {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 16px; color: var(--fg-muted); margin-bottom: 6px;
}
.i-favicon { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.i-source-headline {
  font-size: 12px; line-height: 16px; color: var(--fg-base);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

/* =========================================================
   16. Tabs
   ========================================================= */
.i-tabs { width: 100%; max-width: 250px; }
.i-tabs > input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-tabs-bar {
  display: flex; gap: 18px;
  border-bottom: 1px solid var(--border-strong);
}
.i-tabs-bar label {
  padding: 6px 2px 8px; margin-bottom: -1px;
  font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold);
  color: var(--fg-subtle); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.i-tabs-bar label:hover { color: var(--fg-base); }
.i-tabs:has(input:nth-of-type(1):checked) label[for="i-tab-overview"],
.i-tabs:has(input:nth-of-type(2):checked) label[for="i-tab-signals"],
.i-tabs:has(input:nth-of-type(3):checked) label[for="i-tab-holders"] {
  color: var(--fg-base); border-bottom-color: var(--fg-brand);
}
.i-tab-pane { display: none; padding-top: 12px; font-size: 12px; line-height: 16px; color: var(--fg-subtle); }
/* pane div:nth-of-type is offset by 1 — .i-tabs-bar is the first div sibling */
.i-tabs:has(input:nth-of-type(1):checked) .i-tab-pane:nth-of-type(2),
.i-tabs:has(input:nth-of-type(2):checked) .i-tab-pane:nth-of-type(3),
.i-tabs:has(input:nth-of-type(3):checked) .i-tab-pane:nth-of-type(4) { display: block; }

/* =========================================================
   17. Select
   ========================================================= */
.i-select { position: relative; margin-bottom: 104px; }
.i-select-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: var(--radius-8);
  border: none; background: var(--bg-subtle); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--fg-base);
  transition: background .15s ease;
}
.i-select-trigger:hover { background: var(--bg-subtle-hover); }
.i-select-trigger svg { color: var(--fg-subtle); transition: transform .15s ease; }
.i-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 2;
  min-width: 176px; padding: 4px;
  background: var(--bg-menu);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-drop);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.i-select:hover .i-select-menu, .i-select:focus-within .i-select-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.i-select:hover .i-select-trigger svg, .i-select:focus-within .i-select-trigger svg { transform: rotate(180deg); }
.i-select-opt {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px; border-radius: var(--radius-8);
  font-size: 13px; color: var(--fg-base); cursor: pointer;
  transition: background .15s ease;
}
.i-select-opt:hover { background: var(--bg-subtle); }
.i-select-opt.active { background: var(--bg-subtle); font-weight: var(--fw-semibold); }
.i-select-opt.active svg { margin-left: auto; color: var(--fg-brand); flex: none; }

/* =========================================================
   18. Filter chips
   ========================================================= */
.i-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 250px; }
.i-filter { display: inline-flex; }
.i-filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.i-filter span {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  font-size: 12px; line-height: 16px; color: var(--fg-subtle);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.i-filter span:hover { color: var(--fg-base); border-color: var(--fg-brand-30); }
.i-filter input:checked + span {
  background: color-mix(in srgb, var(--fg-brand) 8%, transparent);
  border-color: rgba(255, 40, 130, .5);
  color: var(--fg-brand); font-weight: var(--fw-semibold);
}

/* =========================================================
   19. Accordion
   ========================================================= */
.i-acc { width: 100%; max-width: 280px; }
.i-acc-item { border-bottom: 1px solid var(--border-base); }
.i-acc-item:first-of-type { border-top: 1px solid var(--border-base); }
.i-acc-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 2px; list-style: none;
  font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold);
  color: var(--fg-base); cursor: pointer;
}
.i-acc-item summary::-webkit-details-marker { display: none; }
.i-acc-item summary svg { color: var(--fg-muted); flex: none; transition: transform .2s ease; }
.i-acc-item[open] summary svg { transform: rotate(180deg); }
.i-acc-body { padding: 0 2px 12px; font-size: 12px; line-height: 16px; color: var(--fg-subtle); }

/* =========================================================
   20. Search command
   ========================================================= */
.i-cmd {
  width: 520px; max-width: 100%;
  background: var(--bg-menu);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .10);
  overflow: hidden;
}
.i-cmd-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; color: var(--fg-muted);
  border-bottom: 1px solid var(--border-base);
}
.i-cmd-ph { flex: 1; font-size: 14px; line-height: 20px; color: var(--fg-muted); }
.i-cmd-input kbd, .i-cmd-enter {
  font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold);
  color: var(--fg-subtle); background: var(--bg-base-opaque);
  border: 1px solid var(--border-strong); border-radius: var(--radius-4);
  padding: 2px 5px; box-shadow: 0 1px 0 var(--border-strong);
}
.i-cmd-list { padding: 0 6px 6px; }
.i-cmd-label {
  padding: 10px 10px 6px;
  font-size: 10px; line-height: 14px; font-weight: var(--fw-semibold);
  letter-spacing: .08em; color: var(--fg-muted);
}
.i-cmd-row {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 10px; border-radius: var(--radius-8);
  cursor: pointer;
  transition: background .15s ease;
}
.i-cmd-row:hover, .i-cmd-row.selected { background: var(--bg-subtle); }
.i-cmd-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: var(--fw-bold);
}
.i-cmd-name {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold); color: var(--fg-base);
}
.i-cmd-name em { font-style: normal; font-size: 11px; font-weight: var(--fw-regular); color: var(--fg-subtle); }
.i-cmd-quote {
  margin-left: auto; display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold); color: var(--fg-base);
}
.i-cmd-quote em { font-style: normal; font-weight: var(--fw-regular); }
.i-cmd-quote em.up { color: var(--data-green); }
.i-cmd-enter { flex: none; }

/* =========================================================
   21. Follow-ups
   ========================================================= */
.i-followups { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; }
.i-followups-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
  font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold); color: var(--fg-subtle);
}
.i-followups-label svg { color: var(--fg-brand); flex: none; }
.i-followup {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: var(--radius-12);
  border: 1px solid var(--border-strong); background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--fg-base);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.i-followup svg { color: var(--fg-muted); flex: none; }
.i-followup:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

/* =========================================================
   22. Animated number
   ========================================================= */
.i-ticker {
  display: grid; grid-template-rows: 20px 42px 20px; place-items: center;
  row-gap: 6px; min-width: 118px;
}
.i-ticker-label { font-size: 14px; line-height: 20px; font-weight: var(--fw-semibold); color: var(--fg-subtle); }
.i-ticker-value {
  width: 3.45em; height: 42px;
  font-size: 34px; line-height: 42px; font-weight: var(--fw-black); color: var(--fg-base);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; font-kerning: none;
  white-space: nowrap;
}
.i-flow-digit,
.i-flow-symbol {
  display: inline-block; position: relative; height: 1em; line-height: 1em;
  flex: 0 0 auto; vertical-align: top;
}
.i-flow-digit { width: .62em; text-align: center; }
.i-flow-symbol { min-width: .28em; text-align: center; }
.i-flow-digit.is-changing {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.i-flow-glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  will-change: transform, opacity, filter;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}
.i-flow-digit.is-up .i-flow-outgoing { animation-name: i-flow-out-up; }
.i-flow-digit.is-up .i-flow-incoming { animation-name: i-flow-in-up; }
.i-flow-digit.is-down .i-flow-outgoing { animation-name: i-flow-out-down; }
.i-flow-digit.is-down .i-flow-incoming { animation-name: i-flow-in-down; }
@keyframes i-flow-out-up {
  from { transform: translateY(0); opacity: 1; filter: blur(0); }
  to { transform: translateY(-92%); opacity: 0; filter: blur(2px); }
}
@keyframes i-flow-in-up {
  from { transform: translateY(92%); opacity: 0; filter: blur(2px); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes i-flow-out-down {
  from { transform: translateY(0); opacity: 1; filter: blur(0); }
  to { transform: translateY(92%); opacity: 0; filter: blur(2px); }
}
@keyframes i-flow-in-down {
  from { transform: translateY(-92%); opacity: 0; filter: blur(2px); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .i-flow-glyph { animation: none; }
}
.i-ticker-delta { font-size: 14px; line-height: 20px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.i-ticker-delta.d-up { color: var(--data-green); }
.i-ticker-delta.d-down { color: var(--data-red); }