/**
 * BrevityU Web Platform - Design System
 *
 * CSS custom properties for the web platform.
 * Dark mode (default) uses pure black (#000000) for a clean,
 * high-contrast look that mirrors the pure white light mode.
 *
 * Sections:
 *   1. Colors (dark mode default)
 *   2. Typography
 *   3. Spacing / Elevation / Radius / Animation / Icons / Layout / Breakpoints
 *   4. Light mode overrides
 *   5. Responsive / Transitions / Utilities
 */

/* =========================================================
   1. COLORS - Dark Mode (Default)
   Pure black background (#000000) for maximum contrast.
   Elevated surfaces use neutral grays (#111111, #1a1a1a).
   ========================================================= */
:root {
  /* Backgrounds - Pure black base with #1a1a1a elevated surfaces */
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #222222;
  --bg-hover: #222222;
  --bg-active: #2a2a2a;
  /* Pure black content area — mirrors pure white (#ffffff) in light mode */
  --bg-content: #000000;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --text-inverse: #000000;

  /* Borders */
  --border-default: #1a1a1a;
  --border-hover: #2a2a2a;
  --border-focus: #4fa3e0;
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* Scrollbar */
  --scrollbar-thumb: #3a3a3a;
  --scrollbar-thumb-hover: #555555;

  /* Accent Colors */
  --accent-primary: #4fa3e0;
  --accent-primary-hover: #3498db;
  --accent-primary-active: #2471a3;
  --accent-success: #2ecc71;
  --accent-success-hover: #27ae60;
  --accent-error: #e74c3c;
  --accent-error-hover: #c0392b;
  --accent-warning: #f39c12;
  --accent-warning-hover: #e67e22;
  --accent-info: #00b4d8;
  --accent-like: #ff4d6d;
  --accent-like-hover: #ff2d52;

  /* Brand Gradients */
  --gradient-brand: linear-gradient(135deg, #4fa3e0 0%, #8e44ad 100%);
  --gradient-brand-hover: linear-gradient(135deg, #3498db 0%, #7d3c98 100%);

  /* Feed & Video-specific
     Dark mode: pure black feed background so the video card
     sits on a true black canvas. Light mode override sets this to white. */
  --feed-bg: #000000;
  --video-card-shadow: 0 8px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --video-card-glow: 0 0 60px rgba(79, 163, 224, 0.12);
  --right-panel-bg: rgba(0, 0, 0, 0.92);
  --right-panel-btn-bg: rgba(255, 255, 255, 0.08);
  --right-panel-btn-hover: rgba(255, 255, 255, 0.14);

  /* Video Player */
  --player-progress: #3498db;
  --player-buffer: rgba(255, 255, 255, 0.4);
  --player-track: rgba(255, 255, 255, 0.2);
  --player-controls-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  --player-live: #e74c3c;

  /* =========================================================
     2. TYPOGRAPHY
     ========================================================= */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-display: 48px;
  --font-h1: 36px;
  --font-h2: 28px;
  --font-h3: 22px;
  --font-h4: 18px;
  --font-body: 16px;
  --font-body-medium: 16px;
  --font-small: 14px;
  --font-caption: 12px;
  --font-micro: 11px;

  --lh-display: 56px;
  --lh-h1: 44px;
  --lh-h2: 36px;
  --lh-h3: 28px;
  --lh-h4: 24px;
  --lh-body: 24px;
  --lh-small: 20px;
  --lh-caption: 16px;
  --lh-micro: 14px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.01em;
  --tracking-wider: 0.05em;

  /* =========================================================
     3. SPACING / ELEVATION / RADIUS / ANIMATION / ICONS / LAYOUT
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-emphasis: 400ms;

  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-xxl: 64px;

  --header-height: 64px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --right-panel-width: 320px;
  --bottom-tabs-height: 56px;
  --content-max-width: 1200px;

  --bp-mobile: 0px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --bp-ultrawide: 1920px;
}

/* =========================================================
   4. LIGHT MODE OVERRIDES
   ========================================================= */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fc;
  --bg-tertiary: #f0f2f8;
  --bg-hover: #e9ecf4;
  --bg-active: #dde1ed;
  /* Pure white content background matching --bg-primary for clean uniformity */
  --bg-content: #ffffff;

  --text-primary: #0d1128;
  --text-secondary: #3d4460;
  --text-muted: #7c85a8;
  --text-inverse: #ffffff;

  --border-default: #d8ddf0;
  --border-hover: #bcc4e0;
  --border-focus: #4fa3e0;
  --border-subtle: rgba(0, 0, 0, 0.06);

  --scrollbar-thumb: #c0c4d0;
  --scrollbar-thumb-hover: #a0a6b4;

  --accent-primary: #3498db;
  --accent-primary-hover: #2980b9;
  --feed-bg: #ffffff;
  --video-card-shadow: 0 8px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --video-card-glow: 0 0 60px rgba(52, 152, 219, 0.08);
  --right-panel-bg: rgba(255, 255, 255, 0.9);
  --right-panel-btn-bg: rgba(0, 0, 0, 0.05);
  --right-panel-btn-hover: rgba(0, 0, 0, 0.09);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.10);
}

/* =========================================================
   5. RESPONSIVE TYPOGRAPHY
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --font-display: 32px;
    --font-h1: 28px;
    --font-h2: 22px;
    --font-h3: 18px;
    --font-h4: 16px;
    --lh-display: 40px;
    --lh-h1: 36px;
    --lh-h2: 28px;
    --lh-h3: 24px;
    --lh-h4: 22px;
    --header-height: 56px;
  }
}

/* =========================================================
   THEME TRANSITIONS (scoped to web-layout)
   ========================================================= */
.web-layout,
.web-layout *,
.web-layout *::before,
.web-layout *::after {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-in-out);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .web-layout *,
  .web-layout *::before,
  .web-layout *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate="fade"] {
    transition-property: opacity;
    transition-duration: 150ms;
  }
}

/* =========================================================
   GLOBAL STYLES
   ========================================================= */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.web-layout :focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.web-layout :focus:not(:focus-visible) {
  outline: none;
}

.web-layout ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.web-layout ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.web-layout ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

.web-layout ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::selection {
  background-color: rgba(52, 152, 219, 0.3);
  color: var(--text-primary);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes toastEnter {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUpEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes progressIndeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes shimmer {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
  }
  @keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* =========================================================
   WEB FEED LAYOUT
   Three-column cinematic feed: [ambient space] [video] [right panel]
   ========================================================= */

/* Feed content area: deep ambient gradient behind the video player */
.web-feed-bg {
  background: var(--feed-bg);
  min-height: 100%;
}

/* Video card: premium shadow + subtle glow edge on web */
.web-video-card {
  box-shadow: var(--video-card-shadow);
  transition: box-shadow var(--duration-slow) var(--ease-out);
}

/* Right interaction panel: floats beside the video */
.web-feed-right-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 200;
  /* Vertically centered within the content area (below header) */
  top: calc(50vh + 32px);
  transform: translateY(-50%);
  pointer-events: auto;
}

/* Right panel interaction button — no bubble, clean icon + count */
.web-feed-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              opacity var(--duration-fast) var(--ease-out);
}

.web-feed-btn:hover {
  transform: scale(1.12);
  opacity: 0.8;
}

.web-feed-btn:active {
  transform: scale(0.94);
  opacity: 1;
}

/* Creator avatar in right panel */
.web-feed-creator-avatar {
  position: relative;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: visible;
  transition: transform var(--duration-fast) var(--ease-spring);
  cursor: pointer;
}

.web-feed-creator-avatar:hover {
  transform: scale(1.05);
}

/* Follow indicator on creator avatar */
.web-feed-follow-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-content);
  box-shadow: 0 2px 8px rgba(79, 163, 224, 0.5);
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}

.web-feed-follow-badge:hover {
  background: var(--accent-primary-hover);
  transform: translateX(-50%) scale(1.12);
}

/* Like button: liked state — icon color is set inline by the component */

/* Separator between creator and buttons */
.web-feed-divider {
  width: 40px;
  height: 1px;
  background: var(--border-default);
  margin: 6px 0;
}

/* =========================================================
   WEB COMMENT SIDE PANEL
   Slides in from the right beside the video. Replaces the
   buttons panel (TikTok pattern) while comments are open.
   Desktop only — hidden on mobile/tablet by the component.
   ========================================================= */
.web-comment-panel {
  position: fixed;
  /* top and height are set via inline style by WebCommentSidePanel.web.js
     so the panel is always pinned to the content area start (below the
     fixed header) rather than the raw viewport top. */
  display: flex;
  flex-direction: column;
  width: 480px;
  /* overflow: hidden on the root panel clips all child React Native Web
     components (ScrollView, FlatList, CommentInput) that can escape the
     overflow: hidden set on .web-comment-panel-body via stacking contexts. */
  overflow: hidden;
  z-index: 200;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-4);
  /* translateX value = width + 16px buffer so the panel slides fully off-screen */
  transform: translateX(496px);
  transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}

.web-comment-panel-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.web-comment-panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-default);
}

.web-comment-panel-title {
  font-family: var(--font-family);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
}

.web-comment-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}

.web-comment-panel-close:hover {
  background: var(--bg-hover);
  transform: scale(1.1);
}

.web-comment-panel-close:active {
  transform: scale(0.92);
}

.web-comment-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Dark, narrow scrollbars inside the web comment panel.
   Without this, large comment threads can show bright scrollbar tracks
   that look like panel misalignment when reply sections expand/collapse. */
.web-comment-panel,
.web-comment-panel * {
  scrollbar-color: var(--bg-tertiary) var(--bg-secondary);
}

.web-comment-panel ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.web-comment-panel ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.web-comment-panel ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 999px;
  border: 2px solid var(--bg-secondary);
}

.web-comment-panel ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Feed tabs in header */
.web-feed-tab-active {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.web-feed-tab-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
}

/* =========================================================
   ACCESSIBILITY UTILITIES
   ========================================================= */
.skip-link:focus {
  top: 8px !important;
  z-index: 2001;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}