/**
 * ============================================================
 * NATHANTWIN VISUAL DESIGN SYSTEM — v1.0
 * ============================================================
 *
 * Single source of truth for all visual design decisions.
 * Every new feature, page, or redesign MUST follow these tokens.
 *
 * THEME: Light only. No dark mode. Period.
 * PALETTE: Lavender-to-white gradients, white cards, purple-blue accents.
 * AUDIENCE: MedTech/healthcare founders — premium, professional, modern.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1.  Color Palette
 * 2.  Semantic Colors (status, feedback)
 * 3.  Gradient Definitions
 * 4.  Shadow / Elevation System
 * 5.  Typography
 * 6.  Spacing & Layout
 * 7.  Border Radius
 * 8.  Motion & Animation
 * 9.  Component: Buttons
 * 10. Component: Inputs & Forms
 * 11. Component: Cards
 * 12. Component: Avatars
 * 13. Component: Badges & Tags
 * 14. Component: Navbar
 * 15. Component: Chat UI
 * 16. Component: Modals
 * 17. Component: Toasts / Notifications
 * 18. VIP Theming Layer
 * 19. Icon System
 * 20. Accessibility & Focus States
 * 21. Responsive Breakpoints
 * ============================================================
 */

/* ============================================================
   1. COLOR PALETTE
   All colors work on white/light backgrounds.
   All text/bg combos meet WCAG AA (4.5:1 body, 3:1 large text).
   ============================================================ */
:root {
  /* ---- Page & Surface Backgrounds ---- */
  --nt-bg-page:         #FAFBFF;     /* Page body — off-white with subtle blue tint */
  --nt-bg-page-warm:    #F7F5FC;     /* Warm off-white — alt sections */
  --nt-bg-lavender:     #EDE5F7;     /* Lavender wash — hero/section backgrounds */
  --nt-bg-card:         #FFFFFF;     /* Card surface — pure white */
  --nt-bg-subtle:       #F4F1FC;     /* Subtle tinted background — hover zones, code blocks */
  --nt-bg-muted:        #F0EEF8;     /* Muted background — disabled states, placeholders */

  /* ---- Text Colors ---- */
  --nt-text-heading:    #1A1A2E;     /* Primary headings — near-black, slight blue */
  --nt-text-body:       #374151;     /* Body copy — dark gray, warm */
  --nt-text-secondary:  #6B7280;     /* Secondary text — gray-500 range */
  --nt-text-muted:      #9CA3AF;     /* Muted / caption text — gray-400 range */
  --nt-text-disabled:   #C4C4D4;     /* Disabled state text */
  --nt-text-inverse:    #FFFFFF;     /* Text on dark/accent backgrounds */
  --nt-text-link:       #6C47FF;     /* Link color — primary accent */
  --nt-text-link-hover: #5232E0;     /* Link hover — deeper purple */

  /* ---- Border Colors ---- */
  --nt-border:          #E5E7EB;     /* Default border — gray-200 range */
  --nt-border-subtle:   #F0EDF9;     /* Subtle border — barely visible, lavender tint */
  --nt-border-focus:    #6C47FF;     /* Focus ring color — primary accent */
  --nt-border-active:   #5232E0;     /* Active/pressed border */
  --nt-border-error:    #DC2626;     /* Error state border */

  /* ---- Primary Accent — Purple ---- */
  /* Used for: primary CTAs, links, highlights, brand marks */
  --nt-accent:          #6C47FF;     /* Primary purple — all main actions */
  --nt-accent-hover:    #5232E0;     /* Hover state — 15% darker */
  --nt-accent-active:   #3D20C0;     /* Active/pressed — 25% darker */
  --nt-accent-light:    #F0EDFF;     /* Light tint — button bg, tag bg */
  --nt-accent-mid:      #C4B5FF;     /* Mid tint — borders, dividers */
  --nt-accent-glow:     rgba(108, 71, 255, 0.15); /* Glow / spread layer */

  /* ---- Secondary Accent — Blue ---- */
  /* Used for: secondary actions, data viz, LinkedIn context */
  --nt-blue:            #5B7FF5;     /* Blue accent */
  --nt-blue-hover:      #4366DC;     /* Blue hover */
  --nt-blue-light:      #EBF0FE;     /* Blue tint background */

  /* ---- Purple Spectrum (for gradients & illustrations) ---- */
  --nt-purple-deep:     #5B2D8E;     /* Deep anchor — gradient start, heavy accents */
  --nt-purple-mid:      #7C4BB8;     /* Mid purple — gradient midpoints */
  --nt-purple-light:    #9B6DD6;     /* Light purple — decorative elements */
  --nt-purple-pale:     #C8A9F0;     /* Pale purple — subtle fills, stripes */
  --nt-magenta:         #C653D8;     /* Magenta pop — use sparingly, max 1 per view */
}

/* ============================================================
   2. SEMANTIC COLORS (status, feedback)
   ============================================================ */
:root {
  /* ---- Success ---- */
  --nt-success:         #16A34A;     /* Green — positive outcomes */
  --nt-success-bg:      #F0FDF4;     /* Green background — success banners */
  --nt-success-border:  #BBF7D0;     /* Green border */

  /* ---- Warning ---- */
  --nt-warning:         #D97706;     /* Amber — caution states */
  --nt-warning-bg:      #FFFBEB;     /* Amber background */
  --nt-warning-border:  #FDE68A;     /* Amber border */

  /* ---- Error / Danger ---- */
  --nt-error:           #DC2626;     /* Red — destructive, critical */
  --nt-error-bg:        #FEF2F2;     /* Red background */
  --nt-error-border:    #FECACA;     /* Red border */

  /* ---- Info ---- */
  --nt-info:            #2563EB;     /* Blue — neutral information */
  --nt-info-bg:         #EFF6FF;     /* Blue background */
  --nt-info-border:     #BFDBFE;     /* Blue border */
}

/* ============================================================
   3. GRADIENT DEFINITIONS
   RULES:
   - Page BG: use --nt-grad-page (lavender → white diagonal)
   - Section BG: use --nt-grad-section (lavender wash, subtle)
   - Primary button fill: use --nt-grad-btn (purple diagonal)
   - Accent areas / hero overlays: use --nt-grad-hero
   - NEVER use gradients on body text or small labels
   - NEVER layer gradient-on-gradient (max 1 gradient per stacking context)
   - Flat color preferred for interactive components (easier hover states)
   ============================================================ */
:root {
  /* Page body gradient — the base canvas */
  --nt-grad-page:
    linear-gradient(160deg,
      var(--nt-bg-lavender) 0%,
      #F5EFFE 40%,
      var(--nt-bg-page) 100%
    );

  /* Section alternating background */
  --nt-grad-section:
    linear-gradient(180deg,
      rgba(237, 229, 247, 0.50) 0%,
      rgba(250, 251, 255, 0.80) 100%
    );

  /* Primary button gradient */
  --nt-grad-btn:
    linear-gradient(135deg,
      #7C4BB8 0%,
      var(--nt-accent) 50%,
      #5B7FF5 100%
    );

  /* Hero/banner accent gradient */
  --nt-grad-hero:
    linear-gradient(135deg,
      var(--nt-purple-deep) 0%,
      var(--nt-accent) 60%,
      var(--nt-blue) 100%
    );

  /* Card highlight edge (use as border-image or accent stripe) */
  --nt-grad-card-edge:
    linear-gradient(180deg,
      var(--nt-purple-pale) 0%,
      transparent 100%
    );

  /* Radial glow — place behind focal elements */
  --nt-grad-radial-glow:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      rgba(108, 71, 255, 0.12) 0%,
      transparent 70%
    );

  /* Glassmorphism card surface */
  --nt-glass-bg:        rgba(255, 255, 255, 0.72);
  --nt-glass-border:    rgba(180, 140, 240, 0.28);
}

/* ============================================================
   4. SHADOW / ELEVATION SYSTEM
   Soft, diffused shadows with purple undertone.
   ELEVATION MAP:
     shadow-xs  → inline chips, small badges
     shadow-sm  → default cards, nav
     shadow-md  → elevated cards, dropdowns, sticky headers
     shadow-lg  → modals, popovers, drawers
     shadow-xl  → floating panels, full-screen overlays
   ============================================================ */
:root {
  --nt-shadow-xs:
    0 1px 2px rgba(100, 60, 180, 0.06);

  --nt-shadow-sm:
    0 1px 3px rgba(100, 60, 180, 0.06),
    0 4px 12px rgba(100, 60, 180, 0.04);

  --nt-shadow-md:
    0 4px 16px rgba(100, 60, 180, 0.08),
    0 1px 4px rgba(100, 60, 180, 0.05);

  --nt-shadow-lg:
    0 8px 32px rgba(100, 60, 180, 0.12),
    0 2px 8px rgba(100, 60, 180, 0.06);

  --nt-shadow-xl:
    0 16px 48px rgba(100, 60, 180, 0.16),
    0 4px 16px rgba(100, 60, 180, 0.08);

  /* Special: button hover lift */
  --nt-shadow-btn-hover:
    0 6px 20px rgba(108, 71, 255, 0.28),
    0 2px 6px rgba(108, 71, 255, 0.16);

  /* Special: input focus ring */
  --nt-shadow-focus:
    0 0 0 3px rgba(108, 71, 255, 0.16);
}

/* ============================================================
   5. TYPOGRAPHY
   Primary font: Inter (Latin)
   Chinese font stack for /beta2 and any ZH content
   Scale is based on 1rem = 16px
   ============================================================ */
:root {
  /* ---- Font Families ---- */
  --nt-font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --nt-font-mono:
    'JetBrains Mono', 'Fira Code', 'Cascadia Code',
    'Courier New', monospace;

  /* Chinese / ZH font stack */
  --nt-font-zh:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans SC', 'Source Han Sans CN',
    -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type Scale ---- */
  /* Display (hero headlines) */
  --nt-text-display:    clamp(32px, 5vw, 56px);   /* H0 — landing hero */
  --nt-text-h1:         clamp(24px, 4vw, 40px);   /* Page title */
  --nt-text-h2:         clamp(20px, 3vw, 28px);   /* Section heading */
  --nt-text-h3:         clamp(17px, 2.5vw, 22px); /* Sub-section heading */
  --nt-text-h4:         18px;                      /* Card heading */
  --nt-text-h5:         16px;                      /* Sub-card heading */
  --nt-text-body-lg:    17px;                      /* Large body / lead paragraph */
  --nt-text-body:       15px;                      /* Default body copy */
  --nt-text-body-sm:    14px;                      /* Secondary body */
  --nt-text-caption:    13px;                      /* Labels, meta */
  --nt-text-xs:         11px;                      /* Fine print, timestamps */

  /* ---- Font Weights ---- */
  --nt-fw-light:        300;
  --nt-fw-regular:      400;
  --nt-fw-medium:       500;
  --nt-fw-semibold:     600;
  --nt-fw-bold:         700;
  --nt-fw-extrabold:    800;

  /* ---- Line Heights ---- */
  --nt-lh-tight:        1.25;   /* Headlines */
  --nt-lh-snug:         1.4;    /* Subheadings */
  --nt-lh-normal:       1.6;    /* Body copy (Latin) */
  --nt-lh-zh:           1.8;    /* Body copy (Chinese) — minimum per CJK readability */
  --nt-lh-relaxed:      1.75;   /* Longer prose */

  /* ---- Letter Spacing ---- */
  --nt-ls-tight:        -0.03em;  /* Large headings */
  --nt-ls-normal:       -0.01em;  /* Body, tight */
  --nt-ls-loose:         0.04em;  /* Caps labels, badges */
  --nt-ls-wide:          0.08em;  /* Eyebrow / overlines */

  /* ---- Readability Cap ---- */
  --nt-prose-width:     68ch;   /* Max-width for paragraphs (65-75 chars) */

  /* CHINESE RULE:
     - Minimum font size: 16px for body copy
     - Line height: always var(--nt-lh-zh) = 1.8x
     - Font stack: var(--nt-font-zh)
     - Do NOT use letter-spacing on CJK characters */
}

/* ============================================================
   6. SPACING & LAYOUT
   Base unit: 8px grid
   ============================================================ */
:root {
  /* ---- Spacing Scale ---- */
  --nt-space-1:    4px;    /* xs — tight padding, icon margins */
  --nt-space-2:    8px;    /* sm — compact padding */
  --nt-space-3:    12px;   /* md-sm */
  --nt-space-4:    16px;   /* md — default element padding */
  --nt-space-5:    20px;   /* md-lg */
  --nt-space-6:    24px;   /* lg — card padding */
  --nt-space-8:    32px;   /* xl — section internal spacing */
  --nt-space-10:   40px;   /* 2xl */
  --nt-space-12:   48px;   /* 3xl — section top/bottom padding */
  --nt-space-16:   64px;   /* 4xl — large section gaps */
  --nt-space-24:   96px;   /* 5xl — hero padding */
  --nt-space-32:   128px;  /* 6xl — max hero spacer */

  /* ---- Layout ---- */
  --nt-max-content:      960px;    /* Max readable content width */
  --nt-max-wide:         1200px;   /* Max wide layout (admin, dashboard) */
  --nt-max-narrow:       680px;    /* Max narrow (chat, articles) */
  --nt-page-pad:         24px;     /* Default horizontal page padding */
  --nt-page-pad-mobile:  16px;     /* Mobile horizontal padding */

  /* ---- Card Padding ---- */
  --nt-card-pad:         var(--nt-space-6);   /* 24px default card internal padding */
  --nt-card-pad-sm:      var(--nt-space-4);   /* 16px compact card */
  --nt-card-pad-lg:      var(--nt-space-8);   /* 32px spacious card */

  /* ---- Tap Targets (Mobile) ---- */
  --nt-tap-min:          44px;     /* Minimum tap target — WCAG 2.5.5 */

  /* ---- Header ---- */
  --nt-header-h:         56px;     /* Sticky navbar height */
}

/* ============================================================
   7. BORDER RADIUS
   ============================================================ */
:root {
  --nt-radius-xs:    4px;     /* Tiny: progress bars, code tags */
  --nt-radius-sm:    6px;     /* Small: badges, chips, tooltips */
  --nt-radius-md:    10px;    /* Default: buttons, inputs, small cards */
  --nt-radius-lg:    14px;    /* Large: cards, modals, dialogs */
  --nt-radius-xl:    20px;    /* XL: feature cards, hero sections */
  --nt-radius-pill:  999px;   /* Full pill: navbar, tags, avatar rings */
  --nt-radius-circle: 50%;    /* Circle: avatars */
}

/* ============================================================
   8. MOTION & ANIMATION
   All animations MUST respect prefers-reduced-motion.
   Only animate: opacity, transform.
   Color/background changes are instant (no transition).
   ============================================================ */
:root {
  /* ---- Durations ---- */
  --nt-dur-fast:      150ms;   /* Micro-interactions (hover, focus) */
  --nt-dur-normal:    200ms;   /* Standard transitions */
  --nt-dur-medium:    300ms;   /* Page element entrances */
  --nt-dur-slow:      400ms;   /* Page transitions, modals */
  --nt-dur-loader:    1200ms;  /* Thinking/loading loops */

  /* ---- Easing ---- */
  --nt-ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);   /* Decelerate: elements entering */
  --nt-ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1);   /* Accelerate: elements leaving */
  --nt-ease-inout:    cubic-bezier(0.4, 0.0, 0.2, 1);   /* Standard: repositioning */
  --nt-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring: bouncy entrances */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   9. COMPONENT: BUTTONS
   Variants: Primary, Secondary, Ghost, Destructive
   States: default, hover, active, disabled, loading
   ============================================================ */

/* Base button reset */
.nt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nt-space-2);
  font-family: var(--nt-font-sans);
  font-weight: var(--nt-fw-semibold);
  font-size: var(--nt-text-body);
  line-height: 1;
  padding: 10px 20px;
  min-height: var(--nt-tap-min);
  border-radius: var(--nt-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    opacity var(--nt-dur-fast) var(--nt-ease-out),
    transform var(--nt-dur-fast) var(--nt-ease-out),
    box-shadow var(--nt-dur-normal) var(--nt-ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* Primary — filled purple */
.nt-btn-primary {
  background: var(--nt-accent);
  color: var(--nt-text-inverse);
  border-color: var(--nt-accent);
}
.nt-btn-primary:hover {
  background: var(--nt-accent-hover);
  border-color: var(--nt-accent-hover);
  box-shadow: var(--nt-shadow-btn-hover);
  transform: translateY(-1px);
}
.nt-btn-primary:active {
  background: var(--nt-accent-active);
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary — outlined purple */
.nt-btn-secondary {
  background: transparent;
  color: var(--nt-accent);
  border-color: var(--nt-accent-mid);
}
.nt-btn-secondary:hover {
  background: var(--nt-accent-light);
  border-color: var(--nt-accent);
}
.nt-btn-secondary:active {
  background: var(--nt-accent-mid);
}

/* Ghost — text only */
.nt-btn-ghost {
  background: transparent;
  color: var(--nt-text-secondary);
  border-color: transparent;
}
.nt-btn-ghost:hover {
  background: var(--nt-bg-subtle);
  color: var(--nt-text-body);
}

/* Destructive — red */
.nt-btn-destructive {
  background: var(--nt-error);
  color: var(--nt-text-inverse);
  border-color: var(--nt-error);
}
.nt-btn-destructive:hover {
  background: #B91C1C;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}

/* Disabled — any variant */
.nt-btn:disabled,
.nt-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Loading state */
.nt-btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Size variants */
.nt-btn-sm {
  font-size: var(--nt-text-caption);
  padding: 7px 14px;
  min-height: 32px;
}
.nt-btn-lg {
  font-size: var(--nt-text-body-lg);
  padding: 13px 28px;
  border-radius: var(--nt-radius-lg);
}

/* ============================================================
   10. COMPONENT: INPUTS & FORMS
   ============================================================ */

.nt-input,
.nt-textarea,
.nt-select {
  width: 100%;
  font-family: var(--nt-font-sans);
  font-size: var(--nt-text-body);
  color: var(--nt-text-body);
  background: var(--nt-bg-card);
  border: 1.5px solid var(--nt-border);
  border-radius: var(--nt-radius-md);
  padding: 10px var(--nt-space-4);
  line-height: var(--nt-lh-normal);
  min-height: var(--nt-tap-min);
  outline: none;
  transition:
    border-color var(--nt-dur-fast) var(--nt-ease-out),
    box-shadow var(--nt-dur-fast) var(--nt-ease-out);
  -webkit-appearance: none;
}

.nt-input::placeholder,
.nt-textarea::placeholder {
  color: var(--nt-text-muted);
  font-style: normal; /* no italic placeholder */
}

/* Focus */
.nt-input:focus,
.nt-textarea:focus,
.nt-select:focus {
  border-color: var(--nt-border-focus);
  box-shadow: var(--nt-shadow-focus);
}

/* Error */
.nt-input-error,
.nt-textarea-error {
  border-color: var(--nt-border-error);
}
.nt-input-error:focus,
.nt-textarea-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Disabled */
.nt-input:disabled,
.nt-textarea:disabled,
.nt-select:disabled {
  background: var(--nt-bg-muted);
  color: var(--nt-text-disabled);
  cursor: not-allowed;
}

.nt-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--nt-lh-normal);
}

/* Label */
.nt-label {
  display: block;
  font-size: var(--nt-text-caption);
  font-weight: var(--nt-fw-semibold);
  color: var(--nt-text-body);
  margin-bottom: var(--nt-space-2);
  letter-spacing: var(--nt-ls-loose);
}

/* Helper / error text */
.nt-field-hint {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-muted);
  margin-top: var(--nt-space-1);
}
.nt-field-error {
  font-size: var(--nt-text-xs);
  color: var(--nt-error);
  margin-top: var(--nt-space-1);
}

/* ============================================================
   11. COMPONENT: CARDS
   ============================================================ */

/* Default card */
.nt-card {
  background: var(--nt-bg-card);
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius-lg);
  padding: var(--nt-card-pad);
  box-shadow: var(--nt-shadow-sm);
}

/* Elevated card (float above page) */
.nt-card-elevated {
  background: var(--nt-bg-card);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-xl);
  padding: var(--nt-card-pad-lg);
  box-shadow: var(--nt-shadow-md);
}

/* Interactive card (hover state) */
.nt-card-interactive {
  background: var(--nt-bg-card);
  border: 1px solid var(--nt-border-subtle);
  border-radius: var(--nt-radius-lg);
  padding: var(--nt-card-pad);
  box-shadow: var(--nt-shadow-sm);
  cursor: pointer;
  transition:
    box-shadow var(--nt-dur-normal) var(--nt-ease-out),
    transform var(--nt-dur-normal) var(--nt-ease-out),
    border-color var(--nt-dur-fast) var(--nt-ease-out);
}
.nt-card-interactive:hover {
  box-shadow: var(--nt-shadow-lg);
  transform: translateY(-2px);
  border-color: var(--nt-accent-mid);
}
.nt-card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--nt-shadow-sm);
}

/* Glass card (for hero sections on gradient backgrounds) */
.nt-card-glass {
  background: var(--nt-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--nt-glass-border);
  border-radius: var(--nt-radius-xl);
  padding: var(--nt-card-pad-lg);
  box-shadow: var(--nt-shadow-lg);
}

/* ============================================================
   12. COMPONENT: AVATARS & PROFILE PHOTOS
   Always circular crop.
   Sizes: xs (24px), sm (32px), md (48px), lg (64px), xl (96px)
   ============================================================ */

.nt-avatar {
  border-radius: var(--nt-radius-circle);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Size variants */
.nt-avatar-xs { width: 24px;  height: 24px; }
.nt-avatar-sm { width: 32px;  height: 32px; }
.nt-avatar-md { width: 48px;  height: 48px; }
.nt-avatar-lg { width: 64px;  height: 64px; }
.nt-avatar-xl { width: 96px;  height: 96px; }

/* Subtle ring (for use on white backgrounds) */
.nt-avatar-ring {
  box-shadow: 0 0 0 2px var(--nt-bg-card), 0 0 0 3.5px var(--nt-accent-mid);
}

/* Placeholder — initials on gradient (when no photo) */
.nt-avatar-placeholder {
  border-radius: var(--nt-radius-circle);
  background: var(--nt-grad-hero);
  color: var(--nt-text-inverse);
  font-weight: var(--nt-fw-semibold);
  font-size: 0.42em; /* scales with width */
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  letter-spacing: 0.02em;
}

/* ============================================================
   13. COMPONENT: BADGES & TAGS
   Pill-shaped labels for expertise areas, statuses, categories.
   ============================================================ */

.nt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--nt-text-xs);
  font-weight: var(--nt-fw-semibold);
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--nt-radius-pill);
  white-space: nowrap;
  letter-spacing: var(--nt-ls-loose);
}

/* Default — lavender tint */
.nt-badge-default {
  background: var(--nt-accent-light);
  color: var(--nt-accent);
}

/* Accent — solid purple */
.nt-badge-accent {
  background: var(--nt-accent);
  color: var(--nt-text-inverse);
}

/* Muted — gray */
.nt-badge-muted {
  background: var(--nt-bg-subtle);
  color: var(--nt-text-secondary);
  border: 1px solid var(--nt-border);
}

/* Status variants */
.nt-badge-success {
  background: var(--nt-success-bg);
  color: var(--nt-success);
  border: 1px solid var(--nt-success-border);
}
.nt-badge-warning {
  background: var(--nt-warning-bg);
  color: var(--nt-warning);
  border: 1px solid var(--nt-warning-border);
}
.nt-badge-error {
  background: var(--nt-error-bg);
  color: var(--nt-error);
  border: 1px solid var(--nt-error-border);
}

/* ============================================================
   14. COMPONENT: NAVBAR
   Sticky, light, subtle bottom shadow.
   ============================================================ */

.nt-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nt-header-h);
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nt-border-subtle);
  box-shadow: var(--nt-shadow-xs);
  display: flex;
  align-items: center;
  padding: 0 var(--nt-page-pad);
}

.nt-navbar-inner {
  max-width: var(--nt-max-content);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--nt-space-4);
}

/* Nav links */
.nt-nav-link {
  font-size: var(--nt-text-body-sm);
  font-weight: var(--nt-fw-medium);
  color: var(--nt-text-secondary);
  text-decoration: none;
  padding: 6px var(--nt-space-3);
  border-radius: var(--nt-radius-sm);
  transition: color var(--nt-dur-fast), background var(--nt-dur-fast);
}
.nt-nav-link:hover {
  color: var(--nt-text-body);
  background: var(--nt-bg-subtle);
}
.nt-nav-link.active {
  color: var(--nt-accent);
  background: var(--nt-accent-light);
}

/* ============================================================
   15. COMPONENT: CHAT UI
   The core product. Design this section with care.
   ============================================================ */

/* Chat container */
.nt-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--nt-bg-page);
  overflow: hidden;
}

/* Message list (scrollable) */
.nt-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--nt-space-6) var(--nt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-3);

  /* Thin custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--nt-accent-mid) transparent;
}
.nt-chat-messages::-webkit-scrollbar {
  width: 4px;
}
.nt-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.nt-chat-messages::-webkit-scrollbar-thumb {
  background: var(--nt-accent-mid);
  border-radius: var(--nt-radius-pill);
}

/* Message group spacing */
.nt-msg-group + .nt-msg-group {
  margin-top: var(--nt-space-2);
}

/* Consecutive messages from same sender */
.nt-msg-bubble + .nt-msg-bubble {
  margin-top: var(--nt-space-1);
}

/* ---- NathanTwin message bubble (AI — left aligned) ---- */
.nt-msg-ai {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-3);
  max-width: 78%;
  align-self: flex-start;
}

.nt-msg-bubble-ai {
  background: var(--nt-bg-card);
  color: var(--nt-text-body);
  border: 1px solid var(--nt-border-subtle);
  border-radius: 4px var(--nt-radius-lg) var(--nt-radius-lg) var(--nt-radius-lg);
  padding: var(--nt-space-4) var(--nt-space-5);
  box-shadow: var(--nt-shadow-sm);
  font-size: var(--nt-text-body);
  line-height: var(--nt-lh-normal);
  word-wrap: break-word;
}

/* ---- User message bubble (right aligned) ---- */
.nt-msg-user {
  display: flex;
  justify-content: flex-end;
  max-width: 78%;
  align-self: flex-end;
  margin-left: auto;
}

.nt-msg-bubble-user {
  background: var(--nt-accent);
  color: var(--nt-text-inverse);
  border-radius: var(--nt-radius-lg) var(--nt-radius-lg) 4px var(--nt-radius-lg);
  padding: var(--nt-space-4) var(--nt-space-5);
  font-size: var(--nt-text-body);
  line-height: var(--nt-lh-normal);
  word-wrap: break-word;
}

/* ---- NathanTwin avatar in chat ---- */
/* Show on first message in a group, hide on consecutive */
.nt-msg-avatar-chat {
  width: 32px;
  height: 32px;
  border-radius: var(--nt-radius-circle);
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px; /* optical alignment with first line */
}
.nt-msg-avatar-chat-hidden {
  width: 32px;
  flex-shrink: 0;
  visibility: hidden;
}

/* ---- Timestamp ---- */
/* Grouped: show once per group, below last bubble */
.nt-msg-timestamp {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-muted);
  margin-top: var(--nt-space-1);
  padding: 0 var(--nt-space-1);
}
.nt-msg-ai .nt-msg-timestamp { text-align: left; padding-left: calc(32px + var(--nt-space-3)); }
.nt-msg-user .nt-msg-timestamp { text-align: right; }

/* ---- Date divider ---- */
.nt-chat-date-divider {
  display: flex;
  align-items: center;
  gap: var(--nt-space-3);
  margin: var(--nt-space-5) 0;
}
.nt-chat-date-divider::before,
.nt-chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nt-border);
}
.nt-chat-date-divider span {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-muted);
  white-space: nowrap;
  font-weight: var(--nt-fw-medium);
  letter-spacing: var(--nt-ls-loose);
}

/* ---- NathanTwin thinking indicator ---- */
/* "NathanTwin is thinking…" with bouncing dots */
.nt-thinking {
  display: flex;
  align-items: center;
  gap: var(--nt-space-3);
  padding: var(--nt-space-3) var(--nt-space-4);
  color: var(--nt-text-secondary);
  font-size: var(--nt-text-body-sm);
  font-style: italic;
}
.nt-thinking-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nt-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--nt-radius-circle);
  background: var(--nt-accent);
  animation: nt-bounce 1.2s ease-in-out infinite;
}
.nt-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.nt-thinking-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes nt-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ---- Dynamic follow-up suggestion buttons ---- */
.nt-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  margin-top: var(--nt-space-3);
  padding-left: calc(32px + var(--nt-space-3)); /* align with AI bubble text */
}
.nt-suggestion-btn {
  font-size: var(--nt-text-caption);
  font-weight: var(--nt-fw-medium);
  color: var(--nt-accent);
  background: var(--nt-accent-light);
  border: 1px solid var(--nt-accent-mid);
  border-radius: var(--nt-radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition:
    background var(--nt-dur-fast) var(--nt-ease-out),
    transform var(--nt-dur-fast) var(--nt-ease-out);
}
.nt-suggestion-btn:hover {
  background: var(--nt-accent-mid);
  transform: translateY(-1px);
}

/* ---- Email capture card in chat ---- */
.nt-chat-email-card {
  background: var(--nt-bg-card);
  border: 1.5px solid var(--nt-accent-mid);
  border-radius: var(--nt-radius-lg);
  padding: var(--nt-space-5);
  box-shadow: var(--nt-shadow-sm);
  margin-top: var(--nt-space-3);
  max-width: 400px;
}

/* ---- Chat input area (bottom-anchored) ---- */
.nt-chat-input-area {
  padding: var(--nt-space-4) var(--nt-page-pad);
  background: var(--nt-bg-card);
  border-top: 1px solid var(--nt-border);
  /* iOS safe area for notch + keyboard */
  padding-bottom: max(var(--nt-space-4), env(safe-area-inset-bottom));
}
.nt-chat-input-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--nt-space-3);
  max-width: var(--nt-max-narrow);
  margin: 0 auto;
}
.nt-chat-input {
  flex: 1;
  font-family: var(--nt-font-sans);
  font-size: var(--nt-text-body);
  color: var(--nt-text-body);
  background: var(--nt-bg-subtle);
  border: 1.5px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 12px 16px;
  resize: none;
  min-height: var(--nt-tap-min);
  max-height: 160px;
  outline: none;
  line-height: var(--nt-lh-normal);
  transition:
    border-color var(--nt-dur-fast) var(--nt-ease-out),
    box-shadow var(--nt-dur-fast) var(--nt-ease-out);
}
.nt-chat-input:focus {
  border-color: var(--nt-border-focus);
  box-shadow: var(--nt-shadow-focus);
  background: var(--nt-bg-card);
}
.nt-chat-input::placeholder {
  color: var(--nt-text-muted);
}
.nt-chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--nt-radius-circle);
  background: var(--nt-accent);
  color: var(--nt-text-inverse);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--nt-dur-fast),
    transform var(--nt-dur-fast) var(--nt-ease-out),
    box-shadow var(--nt-dur-fast);
}
.nt-chat-send-btn:hover {
  background: var(--nt-accent-hover);
  transform: scale(1.05);
  box-shadow: var(--nt-shadow-btn-hover);
}
.nt-chat-send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* ---- Code & list inside AI responses ---- */
.nt-msg-bubble-ai code {
  font-family: var(--nt-font-mono);
  font-size: 0.88em;
  background: var(--nt-bg-subtle);
  color: var(--nt-purple-mid);
  padding: 2px 6px;
  border-radius: var(--nt-radius-xs);
  border: 1px solid var(--nt-border-subtle);
}
.nt-msg-bubble-ai pre {
  font-family: var(--nt-font-mono);
  font-size: 0.88em;
  background: var(--nt-bg-subtle);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-md);
  padding: var(--nt-space-4);
  overflow-x: auto;
  margin: var(--nt-space-3) 0;
}

/* ============================================================
   16. COMPONENT: MODALS & DIALOGS
   ============================================================ */

/* Overlay */
.nt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 26, 46, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nt-space-4);
  animation: nt-fade-in var(--nt-dur-medium) var(--nt-ease-out);
}

/* Dialog card */
.nt-modal {
  background: var(--nt-bg-card);
  border-radius: var(--nt-radius-xl);
  box-shadow: var(--nt-shadow-xl);
  padding: var(--nt-card-pad-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: nt-modal-enter var(--nt-dur-slow) var(--nt-ease-spring);
}

/* Animations */
@keyframes nt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nt-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================
   17. COMPONENT: TOASTS / NOTIFICATIONS
   Position: bottom-center on mobile, top-right on desktop.
   Auto-dismiss: 5000ms default.
   ============================================================ */

.nt-toast-container {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-3);
  /* Mobile: bottom-center */
  bottom: max(var(--nt-space-6), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--nt-space-8));
  max-width: 400px;
  pointer-events: none;
}
/* Desktop: top-right */
@media (min-width: 640px) {
  .nt-toast-container {
    top: calc(var(--nt-header-h) + var(--nt-space-4));
    bottom: auto;
    right: var(--nt-space-6);
    left: auto;
    transform: none;
  }
}

.nt-toast {
  background: var(--nt-bg-card);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-lg);
  padding: var(--nt-space-4) var(--nt-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-3);
  pointer-events: all;
  animation: nt-toast-in var(--nt-dur-medium) var(--nt-ease-spring);
  font-size: var(--nt-text-body-sm);
  line-height: var(--nt-lh-snug);
}

@keyframes nt-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nt-toast-success { border-left: 3px solid var(--nt-success); }
.nt-toast-error   { border-left: 3px solid var(--nt-error); }
.nt-toast-warning { border-left: 3px solid var(--nt-warning); }
.nt-toast-info    { border-left: 3px solid var(--nt-info); }

/* ============================================================
   18. VIP THEMING LAYER
   VIP users (LinkedIn OAuth) get subtle personalization.
   ============================================================ */

/* VIP badge — shown in navbar when logged in */
.nt-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--nt-text-xs);
  font-weight: var(--nt-fw-semibold);
  color: var(--nt-accent);
  background: var(--nt-accent-light);
  border: 1px solid var(--nt-accent-mid);
  border-radius: var(--nt-radius-pill);
  padding: 3px 10px;
  letter-spacing: var(--nt-ls-loose);
}

/* VIP personalized greeting area (top of chat) */
.nt-vip-greeting {
  display: flex;
  align-items: center;
  gap: var(--nt-space-4);
  background: var(--nt-grad-section);
  border-bottom: 1px solid var(--nt-border-subtle);
  padding: var(--nt-space-4) var(--nt-space-6);
}

/* User expertise tags in VIP profile header */
.nt-vip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-2);
  margin-top: var(--nt-space-2);
}

/* LinkedIn login page container */
.nt-vip-login {
  min-height: 100vh;
  background: var(--nt-grad-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nt-space-6);
}

/* LinkedIn OAuth button */
.nt-btn-linkedin {
  background: #0A66C2;
  color: #FFFFFF;
  border-color: #0A66C2;
  gap: var(--nt-space-3);
}
.nt-btn-linkedin:hover {
  background: #004182;
  border-color: #004182;
  box-shadow: 0 4px 16px rgba(10, 102, 194, 0.28);
  transform: translateY(-1px);
}

/* ============================================================
   19. ICON SYSTEM
   Style: OUTLINED (Lucide icons recommended)
   Sizes: sm (16px), md (20px), lg (24px), xl (32px)
   Colors: use token classes below on SVG elements
   ============================================================ */

/* Icon size tokens (apply to width/height on <svg> or <img>) */
.nt-icon-sm { width: 16px; height: 16px; }
.nt-icon-md { width: 20px; height: 20px; }
.nt-icon-lg { width: 24px; height: 24px; }
.nt-icon-xl { width: 32px; height: 32px; }

/* Icon color utilities (apply currentColor on SVG strokes) */
.nt-icon-primary   { color: var(--nt-accent); }
.nt-icon-muted     { color: var(--nt-text-muted); }
.nt-icon-secondary { color: var(--nt-text-secondary); }
.nt-icon-inverse   { color: var(--nt-text-inverse); }
.nt-icon-success   { color: var(--nt-success); }
.nt-icon-error     { color: var(--nt-error); }

/* ============================================================
   20. ACCESSIBILITY & FOCUS STATES
   Visible focus rings — WCAG 2.4.7 (AA)
   ============================================================ */

/* Default focus ring for all interactive elements */
:focus-visible {
  outline: 2.5px solid var(--nt-accent);
  outline-offset: 3px;
  border-radius: var(--nt-radius-sm);
}

/* Remove outline for mouse users (only show on keyboard nav) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Text selection color */
::selection {
  background: var(--nt-accent-light);
  color: var(--nt-accent-active);
}

/* ============================================================
   21. RESPONSIVE BREAKPOINTS
   Mobile-first approach. Minimum tap target: 44x44px.
   ============================================================ */

/*
  Breakpoints:
  Mobile:  < 640px   — single column, full-width cards
  Tablet:  640-1024px — 2-col grids, condensed nav
  Desktop: > 1024px  — full layout, max-width containers

  Thumb-zone: Bottom 60% of screen on mobile.
  → Primary actions (chat send, CTA) anchored to bottom.
  → Secondary actions in top nav.
  → Bottom-anchored input area in chat = correct pattern.
*/

/* Mobile overrides */
@media (max-width: 639px) {
  :root {
    --nt-page-pad:     var(--nt-page-pad-mobile);
    --nt-card-pad:     var(--nt-space-4);
    --nt-card-pad-lg:  var(--nt-space-5);
  }

  .nt-msg-ai,
  .nt-msg-user {
    max-width: 90%;
  }

  .nt-modal {
    max-width: 100%;
    border-radius: var(--nt-radius-lg) var(--nt-radius-lg) 0 0;
    margin-top: auto;
  }
}

/* ============================================================
   UTILITY CLASSES
   Minimal set — don't expand this section. Use tokens instead.
   ============================================================ */

/* Entrance animation — fade in + slide up */
.nt-animate-in {
  animation: nt-enter var(--nt-dur-medium) var(--nt-ease-out) both;
}
@keyframes nt-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover scale — use on interactive cards and images */
.nt-hover-lift {
  transition:
    transform var(--nt-dur-normal) var(--nt-ease-out),
    box-shadow var(--nt-dur-normal) var(--nt-ease-out);
}
.nt-hover-lift:hover {
  transform: translateY(-2px) scale(1.01);
}

/* Truncate text */
.nt-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visually hidden (accessible) */
.nt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Prose container */
.nt-prose {
  max-width: var(--nt-prose-width);
  line-height: var(--nt-lh-normal);
  color: var(--nt-text-body);
}
.nt-prose h1, .nt-prose h2, .nt-prose h3 {
  color: var(--nt-text-heading);
  line-height: var(--nt-lh-tight);
}

/* Chinese prose override */
.nt-prose-zh {
  font-family: var(--nt-font-zh);
  font-size: 16px; /* minimum for CJK */
  line-height: var(--nt-lh-zh);
  letter-spacing: 0; /* NEVER use letter-spacing on CJK */
}

/* ===== SOURCE CITATION PILLS (#831269) ===== */
/* Color-coded link pills for search result citations */
.src-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  line-height: 1.5;
  vertical-align: baseline;
  transition: filter 0.12s;
  white-space: nowrap;
}
.src-pill:hover { filter: brightness(0.88); text-decoration: none; }
.src-pill:active { filter: brightness(0.82); }
.pill-gov  { background: rgba(59,130,246,0.14); color: #1d4ed8; }
.pill-edu  { background: rgba(139,92,246,0.14); color: #6d28d9; }
.pill-news { background: rgba(16,185,129,0.14); color: #047857; }
.pill-other{ background: rgba(249,115,22,0.14); color: #c2410c; }