/* ==========================================================================
   ThreadMood — dashboard custom CSS (beyond Tailwind utilities)
   Animations, chip styling, scrollbars, chart-canvas sizing.
   ========================================================================== */

[x-cloak] { display: none !important; }

/* Tabular numerals for stats/scores */
.tnum { font-variant-numeric: tabular-nums; }
.font-display { font-optical-sizing: auto; letter-spacing: -0.02em; }

/* --- streaming entrance for chips / rows / cards --------------------- */
@keyframes tmFloatIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-float-in { animation: tmFloatIn .4s cubic-bezier(.22,1,.36,1) both; }

/* Soft pulse used on the "live" status dot and skeletons */
@keyframes tmPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
.tm-pulse { animation: tmPulse 1.4s ease-in-out infinite; }

/* Indeterminate progress shimmer while connecting/fetching */
@keyframes tmShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.tm-indeterminate { position: relative; overflow: hidden; }
.tm-indeterminate::after {
  content: "";
  position: absolute; inset: 0;
  width: 25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: tmShimmer 1.1s ease-in-out infinite;
}

/* --- keyword chips --------------------------------------------------- */
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 9999px;
  padding: .3rem .75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tm-chip:hover { transform: translateY(-1px); }
.tm-chip .tm-chip-count {
  font-variant-numeric: tabular-nums;
  opacity: .65;
  font-weight: 500;
}

/* --- chart canvas wrappers ------------------------------------------- */
.tm-chart { position: relative; width: 100%; }
.tm-chart canvas { max-width: 100%; }

/* --- comment explorer scroll area ------------------------------------ */
.tm-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.4) transparent;
}
.tm-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tm-scroll::-webkit-scrollbar-track { background: transparent; }
.tm-scroll::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.tm-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); background-clip: content-box; }

/* Sticky table header inside the scroll area */
.tm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
}

/* --- net-score gauge fill -------------------------------------------- */
.tm-gauge {
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 30%, #9ca3af 50%, #86efac 70%, #22c55e 100%);
}
.tm-gauge-knob {
  transition: left .5s cubic-bezier(.22,1,.36,1);
}

/* Focus visibility floor (mirrors landing page) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Ambient aurora blobs behind the header (matches landing) */
.aurora { filter: blur(80px); opacity: .5; }
.dark .aurora { opacity: .34; }

/* Full-bleed aurora layer: fade out gently toward the page instead of a hard cut. */
.tm-aurora {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
}
/* w-screen (100vw) can exceed the content width when a vertical scrollbar is present;
   clip horizontal overflow so the full-bleed layer never introduces a sideways scroll. */
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}