:root {
  --font-sans: "Inter", "Be Vietnam Pro", sans-serif;
  --font-display: "Be Vietnam Pro", sans-serif;
  --font-dots: "Raleway Dots", sans-serif;
  --color-brand-primary: #6366f1;
  --color-brand-secondary: #a855f7;
  --color-brand-dark: #12131e;
}

body {
  font-family: var(--font-sans);
  background-color: #12131e;
  color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  /* NOTE: Do NOT set overflow:hidden here — it clips position:fixed modals on mobile browsers */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(18, 19, 30, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(138, 180, 248, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 180, 248, 0.5);
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: rgba(22, 24, 38, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(28, 30, 48, 0.5) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  break-inside: avoid;
  margin-bottom: 16px;
}

.glass-card:hover {
  background: rgba(36, 39, 62, 0.65) !important;
  border-color: rgba(138, 180, 248, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.glass-input {
  background: #141522;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
  transition: all 0.2s ease-in-out;
}

.glass-input:focus {
  border-color: rgba(138, 180, 248, 0.4);
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
  outline: none;
}

/* Ambient Glow Spotlights */
.glow-spot {
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.07) 0%, rgba(168, 85, 247, 0.02) 60%, rgba(0, 0, 0, 0) 100%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Bottom Nav Bar Tab states */
#bottom-nav-bar button.tab-active {
  color: #8ab4f8;
}
#bottom-nav-bar button:not(.tab-active) {
  color: #64748b;
}

/* Card color stripes matching Screenshot 3 */
.card-stripe-blue { border-top: 3px solid #6366f1 !important; }
.card-stripe-green { border-top: 3px solid #10b981 !important; }
.card-stripe-purple { border-top: 3px solid #a855f7 !important; }
.card-stripe-orange { border-top: 3px solid #f97316 !important; }
.card-stripe-cyan { border-top: 3px solid #06b6d4 !important; }
.card-stripe-pink { border-top: 3px solid #ec4899 !important; }

/* File Editor Tabs Bar classes */
.file-tab {
  background: #1d2035;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.file-tab.active {
  background: #8ab4f8;
  color: #041e49;
  font-weight: 600;
  border-color: transparent;
}

.file-tab .close-tab-btn {
  font-size: 9px;
  color: currentColor;
  opacity: 0.7;
  padding: 1px 3px;
  border-radius: 50%;
}
.file-tab .close-tab-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* Chat bubble styling for Beeta AI */
.chat-bubble-user {
  background: #22253b;
  color: #f8fafc;
  border-radius: 16px 16px 0px 16px;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 80%;
  align-self: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.chat-bubble-ai {
  background: #191c2b;
  color: #f8fafc;
  border-radius: 16px 16px 16px 0px;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 80%;
  align-self: flex-start;
  border: 1px solid rgba(138, 180, 248, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.chat-bubble-ai pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 10px;
  margin-top: 5px;
}

/* Quill rich text editor override styles */
.ql-toolbar.ql-snow {
  background: #181a29 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 6px 10px !important;
}

.ql-container.ql-snow {
  background: #12131e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  min-height: 250px;
  font-size: 13px;
}

.ql-editor {
  min-height: 250px;
  color: #cbd5e1 !important;
}

.ql-snow .ql-stroke {
  stroke: #94a3b8 !important;
}
.ql-snow .ql-fill {
  fill: #94a3b8 !important;
}
.ql-snow .ql-picker {
  color: #94a3b8 !important;
}
.ql-snow .ql-picker-options {
  background-color: #181a29 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Plain text / code editor area styling */
#code-editor-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #0d0f1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8ab4f8;
  line-height: 1.5;
  tab-size: 4;
}

/* Video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.video-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d0f19;
  aspect-ratio: 4/3;
}
.video-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.peer-name-tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(18, 19, 30, 0.8);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom fonts support inside rich editor canvas */
.ql-font-oswald { font-family: "Oswald", sans-serif !important; }
.ql-font-yuyu-short { font-family: "Yuyu Short", sans-serif !important; }
.ql-font-archivo-black { font-family: "Archivo Black", sans-serif !important; }
.ql-font-playwrite-be-vlg { font-family: "Playwrite BE VLG", cursive !important; }
.ql-font-orbitron { font-family: "Orbitron", sans-serif !important; }
.ql-font-fugaz-one { font-family: "Fugaz One", sans-serif !important; }

/* Show fonts in the toolbar font picker dropdown */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="oswald"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="oswald"]::before {
  content: 'Oswald' !important;
  font-family: 'Oswald', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="yuyu-short"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="yuyu-short"]::before {
  content: 'Yuyu Short' !important;
  font-family: 'Yuyu Short', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="archivo-black"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="archivo-black"]::before {
  content: 'Archivo Black' !important;
  font-family: 'Archivo Black', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="playwrite-be-vlg"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="playwrite-be-vlg"]::before {
  content: 'Playwrite BE VLG' !important;
  font-family: 'Playwrite BE VLG', cursive;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="orbitron"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="orbitron"]::before {
  content: 'Orbitron' !important;
  font-family: 'Orbitron', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="fugaz-one"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="fugaz-one"]::before {
  content: 'Fugaz One' !important;
  font-family: 'Fugaz One', sans-serif;
}

/* Mobile-specific Editor Overrides removed to maintain consistent dark mode */

/* Collaborative Real-time Presence Cursors */
.ql-peer-cursor {
  position: absolute;
  width: 2px;
  height: 1.25em;
  background-color: #a855f7;
  pointer-events: none;
  z-index: 10;
}
.ql-peer-cursor-flag {
  position: absolute;
  top: -1.35em;
  left: -2px;
  background: #a855f7;
  color: white;
  font-size: 8px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Suggesting Tracked Edits Mode Highlighting */
.tracked-insertion {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #10b981 !important;
  text-decoration: underline !important;
}
.tracked-deletion {
  background-color: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
  text-decoration: line-through !important;
}

/* Smart Canvas Tagging / Mention Dropdown Overlay */
#smart-canvas-mention-list {
  position: absolute;
  z-index: 999;
  max-height: 180px;
  width: 190px;
  overflow-y: auto;
  background: #181a29;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
.mention-item {
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  font-size: 10px;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mention-item:hover, .mention-item.active {
  background: rgba(99, 102, 241, 0.15);
  color: white;
}

/* ── TODO Modal slide-up animation ────────────────────────── */
#todo-modal > div {
  animation: slideUpSheet 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes slideUpSheet {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* TODO checklist items */
#todo-items-list li {
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.15s;
}
#todo-items-list li:hover {
  background: rgba(255, 255, 255, 0.05);
}
.todo-check-btn {
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.todo-check-btn:active {
  transform: scale(0.88);
}

/* ── Editor header pill buttons ─────────────────────────── */
#editor-ai-btn, #toolbar-ai-refine-btn, #editor-todo-btn {
  white-space: nowrap;
}

/* Pulse glow on the AI pill when active */
#editor-ai-btn:hover {
  box-shadow: 0 0 12px 2px rgba(99, 102, 241, 0.35);
}
#editor-todo-btn:hover {
  box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.25);
}

/* TODO spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 0.7s linear infinite;
}

/* Mobile: force pill labels to show on small screens removed */

/* ═══════════════════════════════════════════════════════════
   BULLETPROOF MODAL OVERRIDES
   These rules guarantee modals are always visible on top of
   every element regardless of overflow/transform on parents.
   The `!important` is intentional and required.
   ═══════════════════════════════════════════════════════════ */

/* Base overlay — covers the entire viewport */
#ai-refine-modal,
#todo-modal,
#account-modal,
#plot-render-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  isolation: isolate;
}

/* When hidden class is NOT present, show the modals */
#ai-refine-modal:not(.hidden),
#todo-modal:not(.hidden),
#account-modal:not(.hidden) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* TODO modal aligns to bottom */
#todo-modal:not(.hidden) {
  align-items: flex-end !important;
}

/* Modal inner panels — prevent them being clipped */
#ai-refine-modal > div,
#todo-modal > div,
#account-modal > div {
  position: relative;
  z-index: 10000 !important;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Backdrop blur for the overlay */
#ai-refine-modal:not(.hidden),
#todo-modal:not(.hidden),
#account-modal:not(.hidden) {
  background: rgba(3, 5, 20, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hidden utility override — ensure hidden truly hides */
.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM MOBILE UI/UX OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Prevent iOS auto-zoom on input focus by using 16px font-size */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select,
  .ql-editor {
    font-size: 16px !important;
  }

  /* Prevent bottom floating bars from blocking text input area */
  .ql-container, 
  #rich-editor-canvas, 
  #code-editor-area {
    padding-bottom: 92px !important;
    min-height: 50vh;
  }

  /* Horizontal swipeable Quill toolbar (no more messy wrapped lines) */
  #quill-custom-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 12px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #141521 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  #quill-custom-toolbar::-webkit-scrollbar {
    display: none; /* Hide scrollbar for native app feel */
  }
  #quill-custom-toolbar .ql-formats {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-right: 2px !important;
    gap: 4px;
    align-items: center;
  }

  /* Improve bottom nav layout on small screens */
  #bottom-nav-bar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(64px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE FIT & VIEWPORT OVERFLOW FIXES
   ═══════════════════════════════════════════════════════════ */

/* Dynamic viewport height matching for iOS/Android address bars */
html, body {
  height: 100dvh !important;
  height: -webkit-fill-available !important;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

#page-dashboard, #page-login {
  height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Prevent horizontal overflow of the workspace views */
#sub-view-editor, 
#sub-view-dashboard, 
#view-tab-editor, 
#view-tab-ai, 
#view-tab-todo, 
#view-tab-collab {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  /* Hide the Loaded/Synced text chip on mobile to save horizontal space (already shown in sub-header) */
  #save-status {
    display: none !important;
  }

  /* Compress paddings slightly on mobile headers */
  header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Make top editor header icons wrapper horizontally scrollable on mobile */
  header > div:first-child {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: calc(100% - 75px) !important; /* Space for Share button */
    min-width: 0 !important;
    flex-shrink: 1 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  /* If collab save copy button is visible, shrink the first child container further to avoid layout stretch */
  header:has(#collab-save-copy-btn:not(.hidden)) > div:first-child {
    max-width: calc(100% - 135px) !important;
  }

  header > div:first-child::-webkit-scrollbar {
    display: none;
  }

  /* Hide redundant formatting icons in the header on mobile (already present in the bottom floating bar) */
  #editor-math-btn, 
  #editor-plotter-btn, 
  #editor-image-btn, 
  #mic-dictate-btn {
    display: none !important;
  }

  /* Compress paddings and margins on mobile header elements to reduce clutter and maximize writing area */
  #mobile-status-container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }
  #mobile-status-container > div {
    padding: 2px 8px !important;
    font-size: 9px !important;
  }
  #editor-tabs-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    gap: 4px !important;
  }
  #editor-tabs-bar .file-tab {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }
  
  /* Force editor wrappers to stay strictly bounded by the viewport width, but allow vertical overflow for pickers */
  #quill-editor-wrapper {
    max-width: 100% !important;
    overflow: visible !important;
  }
  .ql-container {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .ql-editor {
    max-width: 100% !important;
    padding: 16px 12px !important; /* Slightly smaller editor padding on mobile */
  }
  
  /* Wrap custom toolbar formats cleanly on mobile so they don't clip dropdowns */
  #quill-custom-toolbar {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    padding: 4px 8px !important; /* Compressed toolbar padding */
    background: #141521 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: visible !important; /* CRITICAL: Allows dropdown popups to extend below the toolbar */
  }

  /* Make selectors compact and side-by-side without overlapping on mobile */
  .ql-toolbar.ql-snow .ql-picker.ql-font {
    width: 90px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-size {
    width: 75px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  
  .ql-toolbar.ql-snow .ql-formats {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin-right: 0 !important;
  }

  /* Ensure dropdown options appear on top of canvas and have readable dark mode colors */
  .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 10005 !important;
    position: absolute !important;
    background-color: #171822 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
  }
  .ql-snow .ql-picker-options .ql-picker-item {
    padding: 5px 10px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    border-radius: 4px;
  }
  .ql-snow .ql-picker-options .ql-picker-item:hover,
  .ql-snow .ql-picker-options .ql-picker-item.ql-selected {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM TOAST COMPONENT ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
#toast-container {
  z-index: 100000 !important;
  perspective: 1000px;
}

#toast-container > div {
  animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-slide-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Ambient Rain Animations ────────────────────────────────────────────── */
.ambient-rain-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 1s ease;
}
.raindrop {
  position: absolute;
  background: linear-gradient(transparent, rgba(138, 180, 248, 0.35));
  width: 1.5px;
  height: 50px;
  pointer-events: none;
  animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  0% {
    transform: translateY(-60px) rotate(15deg);
  }
  100% {
    transform: translateY(100vh) rotate(15deg);
  }
}

/* ── Ambient Themes Overrides ───────────────────────────────────────────── */

/* Night Theme Override: Deep dark blue background & custom blue glows */
body.ambient-night {
  background-color: #070913 !important;
}
body.ambient-night .glow-spot {
  background: radial-gradient(circle, rgba(30, 64, 175, 0.22) 0%, rgba(59, 130, 246, 0.04) 60%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Morning Theme Override: Sunrise warm orange accents & golden glows */
body.ambient-morning .glow-spot {
  background: radial-gradient(circle, rgba(234, 88, 12, 0.16) 0%, rgba(249, 115, 22, 0.04) 60%, rgba(0, 0, 0, 0) 100%) !important;
}
body.ambient-morning .text-indigo-400 {
  color: #fb923c !important; /* orange-400 */
}
body.ambient-morning .text-indigo-300 {
  color: #fdba74 !important; /* orange-300 */
}
body.ambient-morning .text-indigo-500 {
  color: #f97316 !important; /* orange-500 */
}
body.ambient-morning .bg-indigo-600 {
  background-color: #ea580c !important; /* orange-600 */
}
body.ambient-morning .bg-indigo-600\/30 {
  background-color: rgba(234, 88, 12, 0.25) !important;
}
body.ambient-morning .border-indigo-500\/30 {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
body.ambient-morning .hover\:bg-indigo-500:hover {
  background-color: #ea580c !important;
}
body.ambient-morning .hover\:bg-indigo-600\/60:hover {
  background-color: rgba(234, 88, 12, 0.45) !important;
}
body.ambient-morning #smart-canvas-mention-list .mention-item:hover,
body.ambient-morning #smart-canvas-mention-list .mention-item.active {
  background: rgba(234, 88, 12, 0.15) !important;
}

/* ── Ambient Performance Optimization ───────────────────────────────────── */
body.ambient-battery-low .raindrop,
body.ambient-battery-low .snowflake,
body.ambient-battery-low .fog-cloud {
  display: none !important; /* Disables weather completely on low battery */
}
body.ambient-battery-low .glow-spot {
  animation: none !important;
}

/* ── Snow Animations ────────────────────────────────────────────────────── */
.ambient-snow-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.7;
  transition: opacity 1s ease;
}
.snowflake {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  animation: snow-fall linear infinite;
}
@keyframes snow-fall {
  0% {
    transform: translateY(-20px) translateX(0);
  }
  50% {
    transform: translateY(50vh) translateX(15px);
  }
  100% {
    transform: translateY(100vh) translateX(0);
  }
}

/* ── Fog / Cloudy Animations ────────────────────────────────────────────── */
.ambient-fog-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
  transition: opacity 1s ease;
}
.fog-cloud {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: fog-drift linear infinite;
}
@keyframes fog-drift {
  0% {
    transform: translate(-10%, -10%) scale(1);
  }
  50% {
    transform: translate(50%, 20%) scale(1.2);
  }
  100% {
    transform: translate(110%, -10%) scale(1);
  }
}

/* ── Sunny Animations ───────────────────────────────────────────────────── */
.ambient-sun-container {
  position: fixed;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.2) 0%, rgba(234, 88, 12, 0.05) 50%, transparent 100%);
  filter: blur(30px);
  animation: sun-pulse 6s ease-in-out infinite alternate;
}
@keyframes sun-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.15;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.35;
  }
}

/* ── Temperature-Based Thermal Themes Overrides ─────────────────────────── */

/* Hot Weather Theme (Temp >= 30°C) - Amber/Crimson Accent */
body.ambient-temp-hot {
  background-color: #0b0704 !important;
}
body.ambient-temp-hot .glow-spot {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, rgba(249, 115, 22, 0.05) 60%, rgba(0, 0, 0, 0) 100%) !important;
}
body.ambient-temp-hot .text-indigo-400 {
  color: #fb923c !important; /* warm orange accent */
}
body.ambient-temp-hot .text-indigo-300 {
  color: #fdba74 !important;
}
body.ambient-temp-hot .text-indigo-500 {
  color: #f97316 !important;
}
body.ambient-temp-hot .bg-indigo-600 {
  background-color: #ea580c !important;
}
body.ambient-temp-hot .bg-indigo-600\/30 {
  background-color: rgba(234, 88, 12, 0.25) !important;
}
body.ambient-temp-hot .border-indigo-500\/30 {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
body.ambient-temp-hot .hover\:bg-indigo-500:hover {
  background-color: #ea580c !important;
}

/* Cold Weather Theme (Temp <= 10°C) - Frost/Cyan Accent */
body.ambient-temp-cold {
  background-color: #04090f !important;
}
body.ambient-temp-cold .glow-spot {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, rgba(138, 180, 248, 0.05) 60%, rgba(0, 0, 0, 0) 100%) !important;
}
body.ambient-temp-cold .glass-panel {
  background: rgba(22, 28, 45, 0.5) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-color: rgba(6, 182, 212, 0.12) !important;
}
body.ambient-temp-cold .text-indigo-400 {
  color: #22d3ee !important; /* cyan accent */
}
body.ambient-temp-cold .text-indigo-300 {
  color: #67e8f9 !important;
}
body.ambient-temp-cold .text-indigo-500 {
  color: #06b6d4 !important;
}
body.ambient-temp-cold .bg-indigo-600 {
  background-color: #0891b2 !important;
}
body.ambient-temp-cold .bg-indigo-600\/30 {
  background-color: rgba(6, 182, 212, 0.25) !important;
}
body.ambient-temp-cold .border-indigo-500\/30 {
  border-color: rgba(6, 182, 212, 0.3) !important;
}
body.ambient-temp-cold .hover\:bg-indigo-500:hover {
  background-color: #0891b2 !important;
}

/* ── Dashboard Masonry & Note Content Previews ───────────────────────────── */
.dashboard-masonry-list {
  column-count: 1;
  column-gap: 16px;
  width: 100%;
}
@media (min-width: 640px) {
  .dashboard-masonry-list {
    column-count: 2;
  }
}
@media (min-width: 1024px) {
  .dashboard-masonry-list {
    column-count: 3;
  }
}

.glass-card-content {
  font-size: 11px;
  line-height: 1.5;
  color: #94a3b8; /* slate-400 */
}
.glass-card-content p {
  margin-bottom: 6px;
}
.glass-card-content ul {
  padding-left: 14px;
  margin-bottom: 6px;
}
.glass-card-content ol {
  padding-left: 14px;
  margin-bottom: 6px;
}
.glass-card-content li {
  position: relative;
  margin-bottom: 2px;
}
.glass-card-content ul li {
  list-style-type: disc;
}
.glass-card-content ol li {
  list-style-type: decimal;
}

/* Bullet list override */
.glass-card-content ul[data-list="bullet"] li {
  list-style-type: disc;
}

/* Checklists parsing details */
.glass-card-content li[data-list="checked"],
.glass-card-content li[data-list="unchecked"] {
  list-style-type: none;
  padding-left: 20px;
}
.glass-card-content li[data-list="checked"]::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981; /* emerald-500 */
  font-weight: bold;
}
.glass-card-content li[data-list="unchecked"]::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: 0;
  color: #94a3b8; /* slate-400 */
}
.glass-card-content li[data-list="checked"] {
  text-decoration: line-through;
  opacity: 0.55;
}