/* ============================================================
   Footlab Copilot — shared styles (launcher · panel · chat ·
   charts · skeleton · paywall · demo simulator)
   Identity: amber/mint Footlab, mint-forward "intelligence"
   accent + spark mark + mono lab cues. Sober, data-honest.
   ============================================================ */

/* ---- spark mark (Copilot identity) ---- */
.cop-spark { display: inline-block; flex: none; }
.cop-spark svg { display: block; width: 100%; height: 100%; }

/* ===== LAUNCHER (floating, dashboard) ===== */
.cop-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 18px 0 14px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 92%, #fff), var(--primary));
  color: #07121b; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--gold) 55%, transparent), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.cop-launcher:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px -10px color-mix(in oklab, var(--gold) 60%, transparent); }
.cop-launcher .cop-spark { width: 22px; height: 22px; }
.cop-launcher .cl-ping { width: 7px; height: 7px; border-radius: 999px; background: #07121b; opacity: .55; margin-left: 2px; animation: copPing 1.8s ease-in-out infinite; }
@keyframes copPing { 50% { opacity: .15; } }
@media (max-width: 560px) { .cop-launcher { right: 14px; bottom: 14px; height: 46px; padding: 0 14px 0 12px; font-size: 13px; } }

/* ===== PANEL (slide from right) ===== */
.cop-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(4,8,14,.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cop-scrim.open { opacity: 1; visibility: visible; }
.cop-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: 420px; max-width: 100vw;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.55);
}
.cop-panel.open { transform: none; }
@media (max-width: 480px) { .cop-panel { width: 100vw; border-left: none; } }
@media (prefers-reduced-motion: reduce) { .cop-panel, .cop-scrim { transition: none; } }

/* panel header */
.cop-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--gold) 8%, transparent), transparent); }
.cop-head .cop-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in oklab, var(--gold) 14%, transparent); }
.cop-head .cop-mark .cop-spark { width: 20px; height: 20px; }
.cop-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cop-title .ct-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.cop-badge { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary);
  padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); }
.cop-title .ct-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.cop-title .ct-sub .live-dot { background: var(--gold); }
.cop-head .cop-x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; flex: none; }
.cop-head .cop-x:hover { background: var(--muted); color: var(--foreground); }

/* conversation */
.cop-convo { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .cop-convo { scroll-behavior: auto; } }
.cop-convo::-webkit-scrollbar { width: 8px; }
.cop-convo::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* empty state */
.cop-empty { display: flex; flex-direction: column; gap: 16px; padding: 8px 2px; }
.cop-empty .ce-mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 12%, transparent); }
.cop-empty .ce-mark .cop-spark { width: 28px; height: 28px; }
.cop-empty h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.cop-empty p { font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
.cop-suggest { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cop-chip { text-align: left; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 60%, transparent); color: var(--foreground);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.cop-chip:hover { border-color: color-mix(in oklab, var(--gold) 40%, transparent); transform: translateX(2px); background: color-mix(in oklab, var(--gold) 6%, transparent); }
.cop-chip .cc-ico { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--muted) 50%, transparent); color: var(--primary); }
.cop-chip .cc-ico[data-kind="donut"] { color: var(--gold); }

/* messages */
.cop-msg { display: flex; flex-direction: column; gap: 6px; animation: copIn .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes copIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cop-msg { animation: none; } }
.cop-msg.user { align-items: flex-end; }
.cop-msg.user .cm-bubble { background: var(--primary); color: var(--primary-foreground); border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 500; max-width: 85%; }
.cop-msg.bot .cm-row { display: flex; gap: 10px; align-items: flex-start; }
.cop-msg.bot .cm-av { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 12%, transparent); margin-top: 2px; }
.cop-msg.bot .cm-av .cop-spark { width: 16px; height: 16px; }
.cm-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-text { font-size: 13.5px; line-height: 1.62; color: var(--foreground); }
.cm-text b { color: var(--foreground); font-weight: 700; }
.cm-text .amber { color: var(--primary); font-weight: 700; }
.cm-text .mint { color: var(--gold); font-weight: 700; }
.cm-text .bad { color: var(--destructive); font-weight: 700; }
.cm-text .tw-caret::after { content: "▍"; color: var(--gold); animation: copBlink 1s steps(1) infinite; }
@keyframes copBlink { 50% { opacity: 0; } }

/* tool-call cue (lab feel) */
.cm-tool { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted-foreground); display: flex; align-items: center; gap: 7px; }
.cm-tool .tk { color: var(--gold); }

/* chart block */
.cm-chart { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: color-mix(in oklab, var(--card) 55%, transparent); }
.cm-chart .cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cm-chart .cc-title { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.cm-chart .cc-kpi { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.cm-chart svg { display: block; width: 100%; }
.cm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11px; color: var(--muted-foreground); }
.cm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cm-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cm-axis { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted-foreground); margin-top: 8px; }

/* donut layout */
.cm-donut-wrap { display: flex; align-items: center; gap: 18px; }
.cm-donut { width: 104px; height: 104px; border-radius: 50%; position: relative; flex: none; }
.cm-donut::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--card); display: grid; }
.cm-donut .cd-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; }
.cm-donut .cd-center b { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; line-height: .9; }
.cm-donut .cd-center span { font-size: 8px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.cm-donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cm-donut-legend .dl { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.cm-donut-legend .dl i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cm-donut-legend .dl b { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; }

/* source citation */
.cm-source { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--gold) 6%, transparent); transition: border-color .2s; }
.cm-source:hover { border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.cm-source .cs-ico { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 16%, transparent); color: var(--gold); }
.cm-source .cs-txt { flex: 1; min-width: 0; }
.cm-source .cs-lab { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.cm-source .cs-title { font-size: 13px; font-weight: 600; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-source .cs-go { color: var(--gold); flex: none; }

/* disclaimer line under a bot answer */
.cm-legal { font-size: 10.5px; color: var(--muted-foreground); line-height: 1.45; display: flex; gap: 6px; }
.cm-legal svg { flex: none; color: var(--primary); margin-top: 1px; }

/* skeleton loading */
.cop-skel { display: flex; flex-direction: column; gap: 10px; }
.cop-skel .sk { border-radius: 8px; background: linear-gradient(90deg, color-mix(in oklab, var(--muted) 50%, transparent) 25%, color-mix(in oklab, var(--muted) 80%, transparent) 50%, color-mix(in oklab, var(--muted) 50%, transparent) 75%); background-size: 200% 100%; animation: copShimmer 1.3s linear infinite; }
@keyframes copShimmer { to { background-position: -200% 0; } }
.cop-skel .sk-l1 { height: 11px; width: 92%; }
.cop-skel .sk-l2 { height: 11px; width: 78%; }
.cop-skel .sk-l3 { height: 11px; width: 64%; }
.cop-skel .sk-chart { height: 120px; width: 100%; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cop-skel .sk { animation: none; } }

/* error out-of-scope */
.cm-error { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--muted-foreground) 35%, transparent); background: color-mix(in oklab, var(--muted) 25%, transparent); }
.cm-error svg { flex: none; color: var(--muted-foreground); margin-top: 1px; }
.cm-error .ce-txt { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; }

/* input */
.cop-input { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: var(--background); }
.cop-input .ci-row { display: flex; align-items: flex-end; gap: 9px; border: 1px solid var(--border); border-radius: 14px; padding: 8px 8px 8px 14px; background: color-mix(in oklab, var(--card) 55%, transparent); transition: border-color .2s; }
.cop-input .ci-row:focus-within { border-color: color-mix(in oklab, var(--gold) 45%, transparent); }
.cop-input textarea { flex: 1; resize: none; border: none; background: transparent; color: var(--foreground); font-family: inherit; font-size: 13.5px; line-height: 1.5; max-height: 96px; padding: 6px 0; outline: none; }
.cop-input textarea::placeholder { color: var(--muted-foreground); }
.cop-send { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground); transition: box-shadow .25s, opacity .2s; }
.cop-send:hover { box-shadow: 0 0 22px -6px var(--primary); }
.cop-send:disabled { opacity: .4; cursor: default; box-shadow: none; }
.cop-meta { display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted-foreground); }
.cop-meta .cm-tokens b { color: var(--foreground); }
.cop-meta .cm-disc { display: inline-flex; align-items: center; gap: 5px; }

/* ===== PAYWALL (Surface 4) ===== */
.cop-pay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; }
.cop-pay-blur { position: absolute; inset: 0; overflow: hidden; filter: blur(7px) saturate(.85); opacity: .5; pointer-events: none; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cop-pay-grad { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--background) 35%, transparent), var(--background) 78%); z-index: 1; }
.cop-pay-card { position: relative; z-index: 2; margin-top: auto; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.cop-pay-card .pc-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 14%, transparent); }
.cop-pay-card .pc-mark .cop-spark { width: 26px; height: 26px; }
.cop-pay-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.18rem; font-weight: 700; line-height: 1.25; }
.cop-pay-card p { font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }
.cop-pay-demo { border: 1px solid var(--border); border-radius: 13px; padding: 13px; background: color-mix(in oklab, var(--card) 60%, transparent); display: flex; flex-direction: column; gap: 9px; }
.cop-pay-demo .pd-q { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); border-radius: 12px 12px 4px 12px; padding: 8px 12px; font-size: 12.5px; font-weight: 500; max-width: 88%; }
.cop-pay-demo .pd-a { display: flex; gap: 8px; align-items: flex-start; }
.cop-pay-demo .pd-a .pd-av { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 12%, transparent); }
.cop-pay-demo .pd-a .pd-av .cop-spark { width: 14px; height: 14px; }
.cop-pay-demo .pd-a p { font-size: 12.5px; color: var(--foreground); line-height: 1.5; }
.cop-pay-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 11px;
  background: var(--primary); color: var(--primary-foreground); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: box-shadow .3s; }
.cop-pay-cta:hover { box-shadow: 0 0 32px -8px var(--primary); }
.cop-pay-cta .pc-price { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px; opacity: .85; }
.cop-pay-sec { text-align: center; font-size: 12px; color: var(--muted-foreground); text-decoration: none; }
.cop-pay-sec:hover { color: var(--foreground); }

/* ===== DEMO SIMULATOR (Surface 2, on Offres) ===== */
.copdemo { margin: 44px 0 8px; }
.copdemo-head { max-width: 64ch; margin-bottom: 22px; }
.copdemo-head .eyebrow { margin-bottom: 12px; }
.copdemo-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 10px; }
.copdemo-head p { color: var(--muted-foreground); font-size: 14.5px; line-height: 1.6; }
.copdemo-stage { display: grid; gap: 20px; }
@media (min-width: 920px) { .copdemo-stage { grid-template-columns: 1fr 360px; align-items: start; } }

/* terminal window */
.copterm { border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
.copterm-bar { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent); font-family: 'JetBrains Mono', monospace; }
.copterm-bar .tb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.copterm-bar .tb-name { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-foreground); margin-left: 4px; }
.copterm-bar .tb-name .cop-spark { width: 15px; height: 15px; }
.copterm-bar .tb-tag { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.copterm-body { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }

/* demo prompt buttons */
.copdemo-prompts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (max-width: 520px) { .copdemo-prompts { grid-template-columns: 1fr; } }
.copdemo-prompt { text-align: left; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 55%, transparent); color: var(--foreground);
  font-family: inherit; font-size: 12.5px; font-weight: 600; transition: border-color .2s, transform .2s, background .2s; }
.copdemo-prompt:hover { border-color: color-mix(in oklab, var(--gold) 40%, transparent); transform: translateY(-1px); }
.copdemo-prompt.active { border-color: color-mix(in oklab, var(--gold) 55%, transparent); background: color-mix(in oklab, var(--gold) 8%, transparent); }
.copdemo-prompt .dp-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--muted) 45%, transparent); color: var(--primary); }
.copdemo-prompt .dp-ico[data-kind="donut"] { color: var(--gold); }

/* demo aside */
.copdemo-aside { border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 920px) { .copdemo-aside { position: sticky; top: 84px; } }
.copdemo-aside h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; }
.copdemo-aside .da-feats { display: flex; flex-direction: column; gap: 11px; }
.copdemo-aside .da-feat { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: color-mix(in oklab, var(--foreground) 88%, transparent); line-height: 1.45; }
.copdemo-aside .da-feat .df-chk { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 18%, transparent); color: var(--gold); font-size: 10px; font-weight: 800; margin-top: 1px; }
.copdemo-aside .da-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 11px;
  background: var(--primary); color: var(--primary-foreground); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: box-shadow .3s; }
.copdemo-aside .da-cta:hover { box-shadow: 0 0 32px -8px var(--primary); }
.copdemo-aside .da-note { font-size: 11px; color: var(--muted-foreground); text-align: center; line-height: 1.45; }
.copdemo-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); }

/* ===== HOME TEASER (Surface 3) ===== */
.cop-teaser { position: relative; border-radius: var(--r-2xl, 24px); overflow: hidden; padding: 0; }
.cop-teaser-grid { display: grid; gap: 0; }
@media (min-width: 880px) { .cop-teaser-grid { grid-template-columns: 1.05fr 1fr; } }
.cop-teaser-copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.cop-teaser-copy .ct-eye { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--primary); padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.cop-teaser-copy .ct-eye .cop-spark { width: 15px; height: 15px; }
.cop-teaser-copy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(2rem, 4.2vw, 3.1rem); }
.cop-teaser-copy h2 em { font-style: normal; background: linear-gradient(135deg, var(--primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cop-teaser-copy p { color: var(--muted-foreground); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.cop-teaser-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cop-teaser-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); display: inline-flex; align-items: center; gap: 7px; }

/* teaser preview window */
.cop-teaser-view { position: relative; padding: clamp(20px, 3vw, 36px); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(420px circle at 70% 25%, color-mix(in oklab, var(--gold) 12%, transparent), transparent 60%); }
.cop-teaser-window { width: 100%; max-width: 360px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  background: var(--card); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.cop-tw-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 55%, transparent); }
.cop-tw-bar .cop-spark { width: 16px; height: 16px; }
.cop-tw-bar .tw-name { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; }
.cop-tw-bar .tw-badge { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); }
.cop-tw-body { padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.cop-tw-q { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); border-radius: 12px 12px 4px 12px; padding: 8px 12px; font-size: 12px; font-weight: 500; max-width: 85%; }
.cop-tw-a { display: flex; gap: 8px; align-items: flex-start; }
.cop-tw-a .twa-av { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--gold) 12%, transparent); }
.cop-tw-a .twa-av .cop-spark { width: 14px; height: 14px; }
.cop-tw-a .twa-txt { font-size: 12px; color: var(--foreground); line-height: 1.5; }
.cop-tw-a .twa-txt .mint { color: var(--gold); font-weight: 700; }
.cop-tw-chart { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: color-mix(in oklab, var(--card) 50%, transparent); }
.cop-tw-chart svg { display: block; width: 100%; }
.cop-tw-fade { position: relative; }
.cop-tw-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(transparent, var(--card)); }