/* Threads Notifier — global styles */

/* Base */
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); letter-spacing: var(--letter-spacing); }
.mono { font-family: var(--font-mono); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity 150ms; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Post card transition */
.post-card { transition: border-color 150ms, background 150ms; }
.post-card:hover { border-color: var(--border2) !important; }

/* Skeleton loading */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.skeleton-row {
  height: 120px;
  border-radius: 12px;
  background: var(--bg2);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  margin-bottom: 12px;
}

/* WS dot pulse */
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ws-dot { animation: dot-pulse 2s ease-in-out infinite; }

/* Mobile: add bottom clearance for the fixed nav bar */
@media (max-width: 768px) {
  #content { padding-bottom: 72px; }
}

/* DaisyUI overrides */
.input { border: 1px solid var(--border) !important; }
.input:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(100,74,64,0.14) !important; }
.btn { border-radius: 8px !important; font-size: 13px !important; }
.badge { border-radius: 4px !important; font-size: 11px !important; }

/* Global text size reduction ~1-2px */
.text-xs   { font-size: 12px !important; }
.text-sm   { font-size: 13px !important; }
.text-base { font-size: 14px !important; }
.text-lg   { font-size: 16px !important; }
.text-xl   { font-size: 18px !important; }
.text-2xl  { font-size: 22px !important; }
.text-3xl  { font-size: 28px !important; }
.text-4xl  { font-size: 34px !important; }
.text-5xl  { font-size: 46px !important; }