/* HonmeiDate — Custom Styles
   Supplements DaisyUI night theme with brand-specific overrides.
   All new CSS appended here. Never modify existing rules. */

/* ═══════════════════════════════════════════════
   Brand Color Tokens
   ═══════════════════════════════════════════════ */
:root {
  --hd-bg-deep: #0f1729;
  --hd-bg-card: #1d283a;
  --hd-bg-hover: #243044;
  --hd-border: #2a3548;
  --hd-border-light: #354460;
  --hd-text-heading: #d4dae3;
  --hd-text-body: #a6adbb;
  --hd-text-muted: #8a95a5;
  --hd-text-faint: #586a80;
  --hd-primary: #6d9eff;
  --hd-pink: #f471b5;
  --hd-purple: #a78bfa;
  --hd-green: #36d399;
  --hd-red: #e24b4a;
}

/* ═══════════════════════════════════════════════
   Self-Message Highlight (Chat)
   Blue-tinted background with left border accent
   ═══════════════════════════════════════════════ */
.hd-self-message {
  background: rgba(109, 158, 255, 0.08);
  border-left: 3px solid var(--hd-primary);
  margin-left: -1rem;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* ═══════════════════════════════════════════════
   Gender Ring Colors
   Applied via ring-{color} utilities, but these
   provide explicit fallback for custom contexts
   ═══════════════════════════════════════════════ */
.hd-ring-male { --tw-ring-color: #60a5fa; }
.hd-ring-female { --tw-ring-color: #f472b6; }
.hd-ring-nonbinary { --tw-ring-color: #a78bfa; }
.hd-ring-hidden { --tw-ring-color: #6b7280; }

/* ═══════════════════════════════════════════════
   Scrollbar Styling
   ═══════════════════════════════════════════════ */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Thin scrollbar for chat and lists */
.overflow-y-auto::-webkit-scrollbar {
  width: 4px;
}
.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
  background: var(--hd-border);
  border-radius: 2px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: var(--hd-border-light);
}

/* ═══════════════════════════════════════════════
   Mobile Bottom Dock Spacing
   Dock visible below 1024px (lg:hidden).
   Default dock-sm = 3.5rem, shrinks on short viewports.
   ═══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  body {
    padding-bottom: 3.75rem;
  }
}

/* Short viewport: shrink dock to xs (3rem / 48px)
   Covers landscape phones, small embedded views, etc. */
@media (max-height: 500px) {
  .hd-dock {
    height: 2.75rem !important;
    padding: 0.25rem 0;
  }
  .hd-dock .dock-label {
    display: none;
  }
  .hd-dock a {
    gap: 0;
  }
  body {
    padding-bottom: 3rem;
  }
}

/* Very short viewport (<400px height): hide dock labels,
   minimize to icon-only bar */
@media (max-height: 360px) {
  .hd-dock {
    height: 2.25rem !important;
    padding: 0.125rem 0;
  }
  body {
    padding-bottom: 2.5rem;
  }
}

/* ═══════════════════════════════════════════════
   Card Hover Enhancement
   ═══════════════════════════════════════════════ */
.card {
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: var(--hd-border-light);
}

/* ═══════════════════════════════════════════════
   Gradient Backgrounds for Profile Placeholders
   These pair with Tailwind's gradient utilities
   ═══════════════════════════════════════════════ */
.hd-gradient-1 { background: linear-gradient(135deg, #ef4444, #ec4899); }
.hd-gradient-2 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.hd-gradient-3 { background: linear-gradient(135deg, #22c55e, #3b82f6); }
.hd-gradient-4 { background: linear-gradient(135deg, #f97316, #ef4444); }
.hd-gradient-5 { background: linear-gradient(135deg, #a855f7, #6366f1); }
.hd-gradient-6 { background: linear-gradient(135deg, #14b8a6, #10b981); }

/* ═══════════════════════════════════════════════
   Animation
   ═══════════════════════════════════════════════ */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   Photo Thumbnail States
   TODO: Implement black default, gray hover, white active.
   Deferred — CSS layer specificity conflict with
   Tailwind/DaisyUI needs resolution.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   Pill-style Hidden Input
   Used on announcement form + anywhere a styled label
   wraps a native radio/checkbox. Tailwind's `sr-only`
   gets overridden by DaisyUI's form reset, so we use a
   standard visually-hidden pattern with !important to
   beat the override. Do NOT add pointer-events:none —
   it breaks label-to-input click propagation in some
   browsers and prevents the peer-checked state from
   updating when the user clicks the styled span.
   ═══════════════════════════════════════════════ */
.hd-pill-input {
  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;
}

/* ═══════════════════════════════════════════════
   Discover Distance Slider
   Overrides DaisyUI range component CSS variables
   for a thin track with a white thumb.
   ═══════════════════════════════════════════════ */
.discover-slider {
  --range-thumb: #ffffff !important;
  --range-thumb-size: 1rem !important;
  --range-p: 0.125rem !important;
  --range-fill: 0 !important;
  height: 1rem !important;
}