/* eslint-disable @typescript-eslint/no-explicit-any */
import { globalStyle, keyframes, style } from '@vanilla-extract/css';

const glitch1 = keyframes({
  '0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
  '92%': { clipPath: 'inset(15% 0 72% 0)', transform: 'skewX(-4deg)' },
  '94%': { clipPath: 'inset(54% 0 22% 0)', transform: 'skewX(3deg)' },
  '96%': { clipPath: 'inset(30% 0 48% 0)', transform: 'skewX(-2deg)' },
});

const glitch2 = keyframes({
  '0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
  '92%': { clipPath: 'inset(60% 0 8%  0)', transform: 'skewX(3deg)' },
  '94%': { clipPath: 'inset(8%  0 68% 0)', transform: 'skewX(-3deg)' },
  '96%': { clipPath: 'inset(42% 0 38% 0)', transform: 'skewX(1deg)' },
});

export const lotusTerminalBodyClass = style({
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  letterSpacing: '0.02em',
  // Dot-grid background — TDS exact (on body since we're scoped to body class)
  backgroundColor: '#030508',
  backgroundImage: 'radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px)',
  backgroundSize: '28px 28px',
  vars: {
    // Backgrounds
    '--lt-bg-primary': '#030508',
    '--lt-bg-secondary': '#060c14',
    '--lt-bg-tertiary': '#0d1520',
    '--lt-bg-card': '#07101a',
    '--lt-bg-terminal': '#010304',
    // Accent — Orange
    '--lt-accent-orange': '#FF6B00',
    '--lt-accent-orange-bright': '#FF8C2B',
    '--lt-accent-orange-dim': 'rgba(255,107,0,0.12)',
    '--lt-accent-orange-border': 'rgba(255,107,0,0.35)',
    // Accent — Amber
    '--lt-accent-amber': '#FFB300',
    '--lt-accent-amber-dim': 'rgba(255,179,0,0.10)',
    // Accent — Cyan
    '--lt-accent-cyan': '#00D4FF',
    '--lt-accent-cyan-bright': '#33DFFF',
    '--lt-accent-cyan-dim': 'rgba(0,212,255,0.10)',
    '--lt-accent-cyan-border': 'rgba(0,212,255,0.22)',
    // Accent — Green
    '--lt-accent-green': '#00FF88',
    '--lt-accent-green-bright': '#33FFAA',
    '--lt-accent-green-dim': 'rgba(0,255,136,0.10)',
    '--lt-accent-green-border': 'rgba(0,255,136,0.22)',
    // Accent — Red
    '--lt-accent-red': '#FF2D55',
    '--lt-accent-red-dim': 'rgba(255,45,85,0.12)',
    // Accent — Gold
    '--lt-accent-gold': '#FFD700',
    '--lt-accent-gold-dim': 'rgba(255,215,0,0.10)',
    // Accent — Purple
    '--lt-accent-purple': '#BF5FFF',
    '--lt-accent-purple-dim': 'rgba(191,95,255,0.10)',
    // Text
    '--lt-text-primary': '#c4d9ee',
    '--lt-text-secondary': '#7fa3bf',
    '--lt-text-muted': '#3e607a',
    '--lt-text-dim': '#1e3347',
    // Borders
    '--lt-border-color': 'rgba(0,212,255,0.16)',
    '--lt-border-color-hi': '#00D4FF',
    '--lt-border-color-dim': 'rgba(0,212,255,0.07)',
    // Glows — text
    '--lt-glow-orange': '0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55)',
    '--lt-glow-orange-intense': '0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45)',
    '--lt-glow-cyan': '0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45)',
    '--lt-glow-cyan-intense': '0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35)',
    '--lt-glow-green': '0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45)',
    '--lt-glow-green-intense': '0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35)',
    '--lt-glow-amber': '0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40)',
    '--lt-glow-amber-intense': '0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45)',
    '--lt-glow-red': '0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45)',
    // Glows — box
    '--lt-box-glow-orange': '0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08)',
    '--lt-box-glow-cyan': '0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06)',
    '--lt-box-glow-green': '0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06)',
    '--lt-box-glow-red': '0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08)',
    '--lt-box-glow-amber': '0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06)',
    // Fonts
    '--lt-font-mono': "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
    '--lt-font-display': "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
    '--lt-font-crt': "'VT323', 'Courier New', monospace",
    // Semantic surface aliases (poll, location, upload card, gif picker)
    '--bg-surface': '#07101a',
    '--bg-surface-low': '#060c14',
    '--bg-surface-active': 'rgba(0,212,255,0.12)',
    '--bg-surface-border': 'rgba(0,212,255,0.20)',
    '--text-primary': '#c4d9ee',
  } as any,
});

// Font on all descendants
globalStyle(`body.${lotusTerminalBodyClass}`, {
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
});

// Scanlines — EXACT from TDS body::before
globalStyle(`body.${lotusTerminalBodyClass}::before`, {
  content: "''",
  position: 'fixed',
  inset: 0,
  background:
    'repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 3px)',
  pointerEvents: 'none',
  zIndex: 9999,
});

// Vignette — EXACT from TDS body::after
globalStyle(`body.${lotusTerminalBodyClass}::after`, {
  content: "''",
  position: 'fixed',
  inset: 0,
  background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.60) 100%)',
  pointerEvents: 'none',
  zIndex: 9998,
});

// Orange caret
globalStyle(`body.${lotusTerminalBodyClass} input, body.${lotusTerminalBodyClass} textarea`, {
  caretColor: '#FF6B00',
});

// Glitch class support
globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch`, { position: 'relative' });

globalStyle(
  `body.${lotusTerminalBodyClass} .lt-glitch::before, body.${lotusTerminalBodyClass} .lt-glitch::after`,
  {
    content: 'attr(data-text)' as any,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    overflow: 'hidden',
  },
);

globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::before`, {
  color: '#00D4FF',
  opacity: 0.65,
  animationName: glitch1,
  animationDuration: '4s',
  animationIterationCount: 'infinite',
});

globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::after`, {
  color: '#FF6B00',
  animationName: glitch2,
  animationDuration: '4s',
  animationIterationCount: 'infinite',
});

// Scrollbar styling — matching TDS
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar`, { width: '6px', height: '6px' });
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, { background: '#030508' });
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
  background: 'rgba(0,212,255,0.25)',
  borderRadius: '3px',
});
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`, {
  background: 'rgba(0,212,255,0.50)',
});

// ── Text selection — orange highlight (TDS aesthetic) ─────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ::selection`, {
  background: 'rgba(255,107,0,0.28)',
  color: '#ffffff',
});

// ── Links — cyan primary, orange on hover with glow ────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} a`, {
  color: '#00D4FF',
  textDecoration: 'none',
  transition: 'color 0.12s ease, text-shadow 0.12s ease',
});
globalStyle(`body.${lotusTerminalBodyClass} a:hover`, {
  color: '#FF6B00',
  textShadow: '0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55)',
});
globalStyle(`body.${lotusTerminalBodyClass} a:focus-visible`, {
  outline: '2px solid #00D4FF',
  outlineOffset: '2px',
});

// ── Code blocks — TDS exact: green text, dark bg, left border ──────────────
globalStyle(`body.${lotusTerminalBodyClass} code`, {
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  fontSize: '0.8em',
  background: '#010304',
  border: '1px solid rgba(0,212,255,0.16)',
  color: '#00FF88',
  padding: '0.1em 0.4em',
  borderRadius: '2px',
});
globalStyle(`body.${lotusTerminalBodyClass} pre`, {
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  fontSize: '0.8rem',
  background: '#010304',
  border: '1px solid rgba(0,212,255,0.16)',
  borderLeft: '2px solid #00FF88',
  color: '#00FF88',
  textShadow: '0 0 6px rgba(0,255,136,0.35)',
  padding: '1rem',
  overflowX: 'auto',
  whiteSpace: 'pre-wrap',
  lineHeight: 1.6,
});
globalStyle(`body.${lotusTerminalBodyClass} pre code`, {
  background: 'transparent',
  border: 'none',
  padding: 0,
  fontSize: 'inherit',
  color: 'inherit',
  textShadow: 'inherit',
});

// ── Inline text semantics ──────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} strong, body.${lotusTerminalBodyClass} b`, {
  color: '#FF6B00',
  fontWeight: '700',
});
globalStyle(`body.${lotusTerminalBodyClass} em, body.${lotusTerminalBodyClass} i`, {
  color: '#00D4FF',
  fontStyle: 'italic',
});
globalStyle(`body.${lotusTerminalBodyClass} mark`, {
  background: 'rgba(255,179,0,0.25)',
  color: '#FFB300',
  padding: '0 0.25em',
});
globalStyle(`body.${lotusTerminalBodyClass} del, body.${lotusTerminalBodyClass} s`, {
  color: '#FF2D55',
  opacity: 0.7,
});

// ── Blockquote — TDS orange left border (matches reply quotes in chat) ──────
globalStyle(`body.${lotusTerminalBodyClass} blockquote`, {
  borderLeft: '2px solid #FF6B00',
  background: 'rgba(255,107,0,0.05)',
  color: '#7fa3bf',
  padding: '0.4rem 0.75rem',
  margin: '0.25rem 0',
  fontStyle: 'italic',
});

// ── Horizontal rule — cyan dim glow ────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} hr`, {
  border: 'none',
  borderTop: '1px solid rgba(0,212,255,0.22)',
  boxShadow: '0 0 6px rgba(0,212,255,0.15)',
  margin: '1rem 0',
});

// ── Input / textarea / contenteditable focus — orange glow ─────────────────
globalStyle(
  `body.${lotusTerminalBodyClass} input:focus, body.${lotusTerminalBodyClass} textarea:focus`,
  {
    outline: 'none',
    borderColor: '#FF6B00',
    boxShadow: '0 0 0 2px rgba(255,107,0,0.25), 0 0 12px rgba(255,107,0,0.12)',
  },
);
globalStyle(`body.${lotusTerminalBodyClass} [contenteditable="true"]:focus`, {
  outline: 'none',
  boxShadow: '0 0 0 1px rgba(255,107,0,0.45), 0 0 12px rgba(255,107,0,0.12)',
});

// ── Tables — TDS style ──────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} table`, {
  width: '100%',
  borderCollapse: 'collapse',
  fontSize: '0.8rem',
  border: '1px solid rgba(0,212,255,0.16)',
});
globalStyle(`body.${lotusTerminalBodyClass} th`, {
  color: '#FF6B00',
  fontWeight: '700',
  textTransform: 'uppercase',
  letterSpacing: '0.10em',
  padding: '0.5rem 0.75rem',
  borderBottom: '1px solid rgba(0,212,255,0.22)',
  background: 'rgba(255,107,0,0.06)',
  textAlign: 'left',
});
globalStyle(`body.${lotusTerminalBodyClass} td`, {
  padding: '0.5rem 0.75rem',
  borderBottom: '1px solid rgba(0,212,255,0.07)',
  color: '#c4d9ee',
});
globalStyle(`body.${lotusTerminalBodyClass} tr:hover td`, {
  background: 'rgba(255,107,0,0.035)',
});

// ── Lists — add TDS prefix character ───────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ul li::marker`, {
  color: '#00D4FF',
  content: '"▸ "',
});
globalStyle(`body.${lotusTerminalBodyClass} ol li::marker`, {
  color: '#FF6B00',
});

// ── Structural elements — scoped TDS layout chrome ────────────────────────

// Sidebar/nav: subtle cyan right border
globalStyle(`body.${lotusTerminalBodyClass} nav`, {
  borderRight: '1px solid rgba(0,212,255,0.10)',
});

// Page headers / toolbars: subtle bottom border glow
globalStyle(`body.${lotusTerminalBodyClass} header`, {
  borderBottom: '1px solid rgba(0,212,255,0.14)',
  boxShadow: '0 4px 24px rgba(0,0,0,0.55)',
});

// kbd — TDS terminal key style
globalStyle(`body.${lotusTerminalBodyClass} kbd`, {
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
  fontSize: '0.75em',
  background: '#0d1520',
  border: '1px solid rgba(0,212,255,0.35)',
  borderBottom: '2px solid rgba(0,212,255,0.50)',
  borderRadius: '3px',
  padding: '0.1em 0.45em',
  color: '#00D4FF',
  textShadow: '0 0 4px rgba(0,212,255,0.4)',
  boxShadow: '0 1px 3px rgba(0,0,0,0.6)',
});

// Tooltip / title popups: abbr only — avoid cursor:help on buttons/links
globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
  textDecoration: 'underline dotted rgba(0,212,255,0.35)',
  cursor: 'help',
});

// abbr
globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
  textDecoration: 'underline dotted #00D4FF',
});

// time elements — amber muted
globalStyle(`body.${lotusTerminalBodyClass} time`, {
  color: '#7fa3bf',
  fontSize: '0.78em',
});

// Images: cyan border on hover
globalStyle(`body.${lotusTerminalBodyClass} img:hover`, {
  outline: '1px solid rgba(0,212,255,0.35)',
  boxShadow: '0 0 12px rgba(0,212,255,0.12)',
});

// Ensure body text color is correct regardless of vanilla-extract theme loading order
globalStyle(`body.${lotusTerminalBodyClass}`, {
  color: '#c4d9ee',
});

// ── Reaction chips (emoji reactions on messages) ────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
  backgroundColor: 'rgba(0,212,255,0.06)',
  border: '1px solid rgba(0,212,255,0.22)',
  borderRadius: '6px',
  color: 'rgba(0,212,255,0.85)',
  transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
});
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`, {
  backgroundColor: 'rgba(0,212,255,0.13)',
  borderColor: 'rgba(0,212,255,0.45)',
  boxShadow: '0 0 8px rgba(0,212,255,0.18)',
});
// Own reaction (aria-pressed = true) → orange accent
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`, {
  backgroundColor: 'rgba(255,107,0,0.12)',
  border: '1px solid rgba(255,107,0,0.38)',
  color: 'rgba(255,140,0,0.90)',
});
globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`, {
  backgroundColor: 'rgba(255,107,0,0.20)',
  borderColor: 'rgba(255,107,0,0.60)',
  boxShadow: '0 0 8px rgba(255,107,0,0.22)',
});

// ═══════════════════════════════════════════════════════════════════════════
// LIGHT MODE — TDS "daylight reading" variant
// html[data-theme="light"] + body.lotusTerminalBodyClass
// Mirrors base.css:3614–3684: desaturated accents, off-white bg, no CRT
// ═══════════════════════════════════════════════════════════════════════════

globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass}`, {
  backgroundColor: '#edf0f5',
  backgroundImage: 'radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px)',
  color: '#111827',
  vars: {
    '--lt-bg-primary': '#edf0f5',
    '--lt-bg-secondary': '#e2e7ef',
    '--lt-bg-tertiary': '#d4dae6',
    '--lt-bg-card': '#ffffff',
    '--lt-bg-terminal': '#f4f6fa',
    '--lt-accent-orange': '#c44e00',
    '--lt-accent-orange-bright': '#d45800',
    '--lt-accent-orange-dim': 'rgba(196,78,0,0.10)',
    '--lt-accent-orange-border': 'rgba(196,78,0,0.28)',
    '--lt-accent-amber': '#8a5a00',
    '--lt-accent-amber-dim': 'rgba(138,90,0,0.10)',
    '--lt-accent-cyan': '#0062b8',
    '--lt-accent-cyan-bright': '#0070cc',
    '--lt-accent-cyan-dim': 'rgba(0,98,184,0.10)',
    '--lt-accent-cyan-border': 'rgba(0,98,184,0.22)',
    '--lt-accent-green': '#006d35',
    '--lt-accent-green-bright': '#007d3e',
    '--lt-accent-green-dim': 'rgba(0,109,53,0.10)',
    '--lt-accent-green-border': 'rgba(0,109,53,0.22)',
    '--lt-accent-red': '#b5001f',
    '--lt-accent-red-dim': 'rgba(181,0,31,0.12)',
    '--lt-accent-gold': '#8a5a00',
    '--lt-accent-gold-dim': 'rgba(138,90,0,0.10)',
    '--lt-accent-purple': '#6b2fb8',
    '--lt-accent-purple-dim': 'rgba(107,47,184,0.10)',
    '--lt-text-primary': '#111827',
    '--lt-text-secondary': '#2d3d56',
    '--lt-text-muted': '#5a6e8c',
    '--lt-text-dim': '#8a9ab8',
    '--lt-border-color': 'rgba(50,80,130,0.18)',
    '--lt-border-color-hi': '#0062b8',
    '--lt-border-color-dim': 'rgba(50,80,130,0.09)',
    '--lt-glow-orange': '0 0 0 1px rgba(196,78,0,0.25),  0 1px 6px rgba(196,78,0,0.18)',
    '--lt-glow-orange-intense': '0 0 0 2px rgba(196,78,0,0.35),  0 2px 10px rgba(196,78,0,0.25)',
    '--lt-glow-cyan': '0 0 0 1px rgba(0,98,184,0.25),  0 1px 6px rgba(0,98,184,0.18)',
    '--lt-glow-cyan-intense': '0 0 0 2px rgba(0,98,184,0.35),  0 2px 10px rgba(0,98,184,0.25)',
    '--lt-glow-green': '0 0 0 1px rgba(0,109,53,0.25),  0 1px 6px rgba(0,109,53,0.18)',
    '--lt-glow-green-intense': '0 0 0 2px rgba(0,109,53,0.35),  0 2px 10px rgba(0,109,53,0.25)',
    '--lt-glow-amber': '0 0 0 1px rgba(138,90,0,0.25),  0 1px 6px rgba(138,90,0,0.18)',
    '--lt-glow-amber-intense': '0 0 0 2px rgba(138,90,0,0.35),  0 2px 10px rgba(138,90,0,0.25)',
    '--lt-glow-red': '0 0 0 1px rgba(181,0,31,0.25),  0 1px 6px rgba(181,0,31,0.18)',
    '--lt-box-glow-orange': '0 0 0 2px rgba(196,78,0,0.22),  0 2px 8px rgba(196,78,0,0.12)',
    '--lt-box-glow-cyan': '0 0 0 2px rgba(0,98,184,0.22),  0 2px 8px rgba(0,98,184,0.12)',
    '--lt-box-glow-green': '0 0 0 2px rgba(0,109,53,0.22),  0 2px 8px rgba(0,109,53,0.12)',
    '--lt-box-glow-red': '0 0 0 2px rgba(181,0,31,0.22),  0 2px 8px rgba(181,0,31,0.12)',
    '--lt-box-glow-amber': '0 0 0 2px rgba(138,90,0,0.22),  0 2px 8px rgba(138,90,0,0.12)',
    // Semantic surface aliases — light overrides
    '--bg-surface': '#ffffff',
    '--bg-surface-low': '#e2e7ef',
    '--bg-surface-active': 'rgba(0,98,184,0.10)',
    '--bg-surface-border': 'rgba(0,98,184,0.22)',
    '--text-primary': '#111827',
  } as any,
});

// Scanlines + vignette: OFF in light mode (base.css:3676-3678)
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass}::before,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass}::after`,
  { display: 'none' },
);

// Caret
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} input,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} textarea`,
  { caretColor: '#c44e00' },
);

// Scrollbar
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, {
  background: '#e2e7ef',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
  background: 'rgba(0,98,184,0.25)',
  borderRadius: '3px',
});
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`,
  {
    background: 'rgba(0,98,184,0.50)',
  },
);

// Selection
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::selection`, {
  background: 'rgba(196,78,0,0.18)',
  color: '#030508',
});

// Links
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a`, { color: '#0062b8' });
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:hover`, {
  color: '#c44e00',
  textShadow: 'none',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:focus-visible`, {
  outline: '2px solid #0062b8',
  outlineOffset: '2px',
});

// Code
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} code`, {
  background: '#f0f4f8',
  border: '1px solid rgba(0,98,184,0.18)',
  color: '#006d35',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} pre`, {
  background: '#f0f4f8',
  border: '1px solid rgba(0,98,184,0.14)',
  borderLeft: '2px solid #006d35',
  color: '#006d35',
  textShadow: 'none',
});

// Inline semantics
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} strong,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} b`,
  { color: '#c44e00' },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} em,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} i`,
  { color: '#0062b8' },
);
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} mark`, {
  background: 'rgba(138,90,0,0.15)',
  color: '#8a5a00',
});
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} del,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} s`,
  { color: '#b5001f' },
);

// Blockquote
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} blockquote`, {
  borderLeft: '2px solid #c44e00',
  background: 'rgba(196,78,0,0.05)',
  color: '#5a6e8c',
});

// HR
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} hr`, {
  borderTop: '1px solid rgba(0,98,184,0.18)',
  boxShadow: 'none',
});

// Input focus
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} input:focus,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} textarea:focus`,
  {
    borderColor: '#c44e00',
    boxShadow: '0 0 0 2px rgba(196,78,0,0.22), 0 1px 6px rgba(196,78,0,0.12)',
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [contenteditable="true"]:focus`,
  {
    boxShadow: '0 0 0 1px rgba(196,78,0,0.40), 0 1px 6px rgba(196,78,0,0.10)',
  },
);

// Tables
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} table`, {
  border: '1px solid rgba(0,98,184,0.18)',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} th`, {
  color: '#c44e00',
  background: 'rgba(196,78,0,0.06)',
  borderBottom: '1px solid rgba(0,98,184,0.18)',
  textShadow: 'none',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} td`, {
  color: '#2d3d56',
  borderBottom: '1px solid rgba(0,98,184,0.08)',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} tr:hover td`, {
  background: 'rgba(196,78,0,0.03)',
});

// Lists
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ul li::marker`, {
  color: '#0062b8',
  content: '"▸ "',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ol li::marker`, {
  color: '#c44e00',
});

// Structural chrome
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} nav`, {
  borderRight: '1px solid rgba(0,98,184,0.12)',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} header`, {
  borderBottom: '1px solid rgba(0,98,184,0.14)',
  boxShadow: '0 1px 8px rgba(0,0,0,0.07)',
});

// kbd
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} kbd`, {
  background: '#e2e7ef',
  border: '1px solid rgba(0,98,184,0.28)',
  borderBottom: '2px solid rgba(0,98,184,0.42)',
  color: '#0062b8',
  textShadow: 'none',
  boxShadow: '0 1px 3px rgba(0,0,0,0.10)',
});

// abbr / time / img
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} abbr[title]`, {
  textDecoration: 'underline dotted #0062b8',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} time`, {
  color: '#5a6e8c',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} img:hover`, {
  outline: '1px solid rgba(0,98,184,0.28)',
  boxShadow: '0 1px 8px rgba(0,98,184,0.08)',
});

// Reaction chips — light TDS
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
  backgroundColor: 'rgba(0,98,184,0.06)',
  border: '1px solid rgba(0,98,184,0.22)',
  borderRadius: '6px',
  color: '#0062b8',
  transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
});
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`,
  {
    backgroundColor: 'rgba(0,98,184,0.12)',
    borderColor: 'rgba(0,98,184,0.42)',
    boxShadow: '0 0 7px rgba(0,98,184,0.16)',
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`,
  {
    backgroundColor: 'rgba(196,78,0,0.10)',
    border: '1px solid rgba(196,78,0,0.35)',
    color: '#c44e00',
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`,
  {
    backgroundColor: 'rgba(196,78,0,0.18)',
    borderColor: 'rgba(196,78,0,0.55)',
    boxShadow: '0 0 7px rgba(196,78,0,0.18)',
  },
);

// ── GIF picker (terminal mode) ───────────────────────────────────────────────
globalStyle(
  `body.${lotusTerminalBodyClass} [data-gif-terminal] input,` +
    `body.${lotusTerminalBodyClass} [data-gif-terminal] form`,
  {
    background: '#030c14 !important' as any,
    color: '#e8edf5 !important' as any,
    fontFamily: "'JetBrains Mono','Cascadia Code','Fira Code',monospace !important" as any,
    border: '1px solid rgba(255,107,0,0.35) !important' as any,
    borderRadius: '4px !important' as any,
    fontSize: '12px !important' as any,
    boxShadow: 'none !important' as any,
  },
);
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] input:focus`, {
  borderColor: 'rgba(255,107,0,0.70) !important' as any,
  boxShadow: '0 0 0 2px rgba(255,107,0,0.12) !important' as any,
  outline: 'none !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`, {
  color: 'rgba(255,107,0,0.40) !important' as any,
});
globalStyle(
  `body.${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
    `body.${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`,
  {
    display: 'none !important' as any,
  },
);
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar`, {
  width: '4px',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`, {
  background: '#030508',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`, {
  background: 'rgba(255,107,0,0.40)',
  borderRadius: '2px',
});

// ── URL preview cards (terminal mode) ───────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview]`, {
  backgroundColor: 'rgba(3,12,20,0.92)',
  border: '1px solid rgba(0,212,255,0.22)',
  borderLeft: '3px solid rgba(255,107,0,0.60)',
  borderRadius: '4px',
  color: '#e8edf5',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a`, {
  color: 'rgba(0,212,255,0.85) !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} [data-url-preview] a:hover`, {
  color: 'rgba(255,107,0,0.90) !important' as any,
  textShadow: '0 0 6px rgba(255,107,0,0.30)',
});
// light TDS
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview]`, {
  backgroundColor: 'rgba(240,244,252,0.97)',
  border: '1px solid rgba(0,98,184,0.22)',
  borderLeft: '3px solid rgba(196,78,0,0.55)',
  color: '#2d3d56',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-url-preview] a`, {
  color: '#0062b8 !important' as any,
});

// ── GIF picker light TDS (dark-mode rules already exist via [data-gif-terminal]) ──
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] form`,
  {
    background: '#f4f6fa !important' as any,
    color: '#111827 !important' as any,
    border: '1px solid rgba(196,78,0,0.28) !important' as any,
    fontFamily: "'JetBrains Mono','Cascadia Code','Fira Code',monospace !important" as any,
    fontSize: '12px !important' as any,
    boxShadow: 'none !important' as any,
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input:focus`,
  {
    borderColor: 'rgba(196,78,0,0.60) !important' as any,
    boxShadow: '0 0 0 2px rgba(196,78,0,0.12) !important' as any,
    outline: 'none !important' as any,
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] input::placeholder`,
  {
    color: 'rgba(196,78,0,0.45) !important' as any,
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] svg,` +
    `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] button[type="reset"]`,
  {
    display: 'none !important' as any,
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-track`,
  {
    background: '#e2e7ef',
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-gif-terminal] ::-webkit-scrollbar-thumb`,
  {
    background: 'rgba(196,78,0,0.35)',
    borderRadius: '2px',
  },
);

// ── Tooltip TDS ──────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
  background: '#060c14 !important' as any,
  border: '1px solid rgba(0,212,255,0.30) !important' as any,
  color: '#b0cbe8 !important' as any,
  fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important" as any,
  fontSize: '11px !important' as any,
  borderRadius: '4px !important' as any,
  boxShadow: '0 4px 12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.08) !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._6plmi2g > div`, {
  background: '#f0f4fc !important' as any,
  border: '1px solid rgba(0,98,184,0.30) !important' as any,
  color: '#2d3d56 !important' as any,
});

// ── Switch toggle TDS ─────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"]`, {
  background: 'rgba(0,212,255,0.12) !important' as any,
  border: '1px solid rgba(0,212,255,0.30) !important' as any,
  borderRadius: '99px !important' as any,
  transition: 'background 0.2s, border-color 0.2s',
});
globalStyle(`body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`, {
  background: 'rgba(255,107,0,0.22) !important' as any,
  borderColor: 'rgba(255,107,0,0.60) !important' as any,
  boxShadow: '0 0 8px rgba(255,107,0,0.20) !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"]`, {
  background: 'rgba(0,98,184,0.10) !important' as any,
  borderColor: 'rgba(0,98,184,0.35) !important' as any,
});
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [role="switch"][aria-checked="true"]`,
  {
    background: 'rgba(196,78,0,0.18) !important' as any,
    borderColor: 'rgba(196,78,0,0.55) !important' as any,
  },
);

// ── Spinner TDS ───────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._31czpko`, {
  stroke: 'rgba(0,212,255,0.20) !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} ._31czpkp`, {
  stroke: 'rgba(255,107,0,0.85) !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpko`, {
  stroke: 'rgba(0,98,184,0.20) !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._31czpkp`, {
  stroke: 'rgba(196,78,0,0.85) !important' as any,
});

// ── EmojiBoard TDS ────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board]`, {
  background: '#060c14 !important' as any,
  border: '1px solid rgba(0,212,255,0.20) !important' as any,
  borderRadius: '4px !important' as any,
  boxShadow: '0 8px 32px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,212,255,0.08) !important' as any,
  color: '#b0cbe8 !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input`, {
  background: 'rgba(0,212,255,0.06) !important' as any,
  border: '1px solid rgba(0,212,255,0.22) !important' as any,
  color: '#b0cbe8 !important' as any,
  fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important" as any,
  borderRadius: '4px !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} [data-emoji-board] input:focus`, {
  borderColor: 'rgba(255,107,0,0.60) !important' as any,
  boxShadow: '0 0 0 2px rgba(255,107,0,0.12) !important' as any,
  outline: 'none !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-emoji-board]`, {
  background: '#f0f4fc !important' as any,
  border: '1px solid rgba(0,98,184,0.22) !important' as any,
  color: '#2d3d56 !important' as any,
});

// ── PopOut / Menu / floating panels TDS ──────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} ._1v6ozra1`, {
  background: '#060c14 !important' as any,
  border: '1px solid rgba(0,212,255,0.22) !important' as any,
  borderRadius: '6px !important' as any,
  boxShadow: '0 8px 32px rgba(0,0,0,0.80), 0 0 0 1px rgba(0,212,255,0.06) !important' as any,
  color: '#b0cbe8 !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} ._1fptcza0`, {
  background: 'transparent !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6`, {
  color: '#b0cbe8 !important' as any,
  borderRadius: '3px !important' as any,
});
globalStyle(`body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
  background: 'rgba(0,212,255,0.08) !important' as any,
  color: '#00d4ff !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._1v6ozra1`, {
  background: '#f0f4fc !important' as any,
  border: '1px solid rgba(0,98,184,0.22) !important' as any,
  boxShadow: '0 8px 32px rgba(0,0,0,0.15) !important' as any,
  color: '#2d3d56 !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6`, {
  color: '#2d3d56 !important' as any,
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ._13tt0gb6:hover`, {
  background: 'rgba(0,98,184,0.08) !important' as any,
  color: '#0062b8 !important' as any,
});

// ── Poll card TDS ─────────────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]`, {
  background: 'rgba(0,212,255,0.04) !important' as any,
  border: '1px solid rgba(0,212,255,0.22) !important' as any,
  color: '#c4d9ee !important' as any,
  transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]:hover`, {
  background: 'rgba(0,212,255,0.08) !important' as any,
  borderColor: 'rgba(0,212,255,0.40) !important' as any,
  boxShadow: '0 0 8px rgba(0,212,255,0.08)',
});
globalStyle(
  `body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-selected="true"]`,
  {
    background: 'rgba(255,107,0,0.10) !important' as any,
    border: '1px solid rgba(255,107,0,0.55) !important' as any,
    boxShadow: '0 0 10px rgba(255,107,0,0.10)',
  },
);
globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
  color: 'rgba(0,212,255,0.60) !important' as any,
  opacity: '1 !important' as any,
  textShadow: '0 0 8px rgba(0,212,255,0.25)',
});
// light TDS
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer]`,
  {
    background: 'rgba(0,98,184,0.04) !important' as any,
    border: '1px solid rgba(0,98,184,0.22) !important' as any,
    color: '#111827 !important' as any,
  },
);
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-selected="true"]`,
  {
    background: 'rgba(196,78,0,0.08) !important' as any,
    border: '1px solid rgba(196,78,0,0.50) !important' as any,
  },
);

// ── Voice recorder TDS ───────────────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`, {
  background: 'rgba(0,212,255,0.05) !important' as any,
  border: '1px solid rgba(0,212,255,0.22) !important' as any,
  borderRadius: '6px',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
  background: '#00FF88 !important' as any,
  boxShadow: '0 0 6px rgba(0,255,136,0.55)',
});
globalStyle(`body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
  background: '#00D4FF !important' as any,
});
// light TDS
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`,
  {
    background: 'rgba(0,98,184,0.05) !important' as any,
    border: '1px solid rgba(0,98,184,0.22) !important' as any,
  },
);
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
  background: '#006d35 !important' as any,
  boxShadow: 'none',
});
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
  background: '#0062b8 !important' as any,
});

// ── Caption input TDS focus ring ──────────────────────────────────────────────
globalStyle(`body.${lotusTerminalBodyClass} [data-caption-input]:focus-visible`, {
  borderColor: 'rgba(255,107,0,0.65) !important' as any,
  boxShadow: '0 0 0 2px rgba(255,107,0,0.14), 0 0 6px rgba(255,107,0,0.10) !important' as any,
});
globalStyle(
  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-caption-input]:focus-visible`,
  {
    borderColor: 'rgba(196,78,0,0.60) !important' as any,
    boxShadow: '0 0 0 2px rgba(196,78,0,0.12) !important' as any,
  },
);