/* ============================================================
   Main entrypoint — imports every CSS slice in cascade order.

   Cascade rules (last wins on equal specificity):
     1. design tokens     — CSS variables
     2. base / layout     — global resets, body, scrollbars, grid
     3. components        — feature-specific UI
     4. mobile media      — narrow-viewport overrides
     5. PC overrides      — desktop / fullscreen sit AFTER mobile
        so they win on equal specificity (per existing comments
        in pc.css and mobile-fullscreen.css).

   NB: every @import carries `?v=YYYYMMDDxN`. Telegram's WebView
   aggressively caches `/static/*` by full URL — bumping the version
   on the parent main.css alone won't refetch the children, so the
   version is propagated here too. Bump in lockstep with main.css
   in index.html when deploying CSS changes.
   ============================================================ */

@import url("./tokens.css?v=20260601ui72");
@import url("./base.css?v=20260601ui72");
@import url("./layout.css?v=20260601ui72");
@import url("./_main-area.css?v=20260601ui72");

/* Components — order doesn't strictly matter, but keep alphabetical
   for sanity. Calendar last because it's the heaviest (~480 lines). */
@import url("./components/agents.css?v=20260601ui72");
@import url("./components/chat.css?v=20260601ui72");
@import url("./components/cmdk.css?v=20260601ui72");
@import url("./components/dashboard.css?v=20260606pegasus14");
@import url("./components/decisions.css?v=20260606pages3");
@import url("./components/emotional.css?v=20260606em3");
@import url("./components/events.css?v=20260606pages1");
@import url("./components/find.css?v=20260601ui72");
@import url("./components/goals.css?v=20260606bottomsheet8");
@import url("./components/habits.css?v=20260607habitmodal1");
@import url("./components/german.css?v=20260604de6");
@import url("./components/health.css?v=20260606hx3");
@import url("./components/modal.css?v=20260607habitmodal1");
@import url("./components/tasks.css?v=20260606cards1");
@import url("./components/memory.css?v=20260606mx5");
@import url("./components/music.css?v=20260606music4");
@import url("./components/notes.css?v=20260606notes13");
@import url("./components/nutrition.css?v=20260607nutrispace2");
@import url("./components/pomodoro.css?v=20260606po8");
@import url("./components/settings.css?v=20260603feat6");
@import url("./components/workouts.css?v=20260606wo1");
@import url("./components/action-cards.css?v=20260601ui72");
@import url("./components/sidebar-collapse.css?v=20260601ui72");
@import url("./components/userbot.css?v=20260604ub3");
@import url("./components/skeleton.css?v=20260601ui72");
@import url("./components/toasts.css?v=20260601ui72");
@import url("./components/toggle.css?v=20260601ui72");

/* These three carry @media or .is-desktop / .is-fullscreen rules — must
   come AFTER components so equal-specificity selectors win. */
@import url("./mobile.css?v=20260607mobilenavhide1");
@import url("./pc.css?v=20260606pcnav1");
@import url("./mobile-fullscreen.css?v=20260601ui72");

/* Calendar last — its responsive overrides reference base layout vars
   defined in layout.css and need to win over generic component styles
   on shared selectors like .cal-cell, .cal-event-chip, etc. */
@import url("./components/calendar.css?v=20260606pages1");

/* Voice recorder button – recording state */
.btn.recording {
  color: var(--red) !important;
  animation: pulse-record 1s infinite;
}
@keyframes pulse-record {
  0%, 100% { opacity: 1; }
  50%   { opacity: 0.6; }
}

/* Voice input button (Web Speech API speech-to-text) */
.voice-btn.recording {
  color: var(--red) !important;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.7; }
}

/* Hotfix: notes editor topbar buttons must be clickable after mobile.css */
body.note-editor-mode #topbar-title {
  pointer-events: auto !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 1000 !important;
}
body.note-editor-mode #topbar-title .note-topbar-actions,
body.note-editor-mode #topbar-title .note-topbar-btn,
body.note-editor-mode #topbar-title .note-topbar-btn * {
  pointer-events: auto !important;
}
body.note-editor-mode #topbar-title .note-topbar-actions.no-status {
  gap: 22px !important;
}
@media (max-width: 760px) {
  body.note-editor-mode #topbar-title .note-topbar-actions.no-status {
    gap: 18px !important;
  }
}

/* Hotfix v2: notes editor buttons are fixed overlay, above mobile title layer */
#note-floating-topbar.note-floating-topbar {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
#note-floating-topbar .note-topbar-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
body.note-editor-mode #topbar-title {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  #note-floating-topbar.note-floating-topbar {
    top: 9px !important;
    gap: 20px !important;
  }
}

/* Hotfix v3: notes buttons live inside topbar, safe from iPhone island */
#topbar #note-floating-topbar.note-floating-topbar {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10000 !important;
  gap: 22px !important;
}
@media (max-width: 760px) {
  #topbar #note-floating-topbar.note-floating-topbar {
    top: 50% !important;
    gap: 20px !important;
  }
}