body { background-color: #020617; }
html.light body { background-color: #f8fafc; }

.bg-grid {
  background-image:
    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.glass {
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.light .glass {
  background-color: rgba(255, 255, 255, 0.7);
}
.glow-blob { filter: blur(90px); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(148,163,184,0.08) 25%, rgba(148,163,184,0.18) 37%, rgba(148,163,184,0.08) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.4); }

.thread-row.unread .subject { font-weight: 600; color: rgb(241 245 249); }
.thread-row .subject { font-weight: 400; }

[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: rgb(100 116 139);
  pointer-events: none;
}

.reader-frame { width: 100%; border: 0; background: transparent; }

/* --- 3-column app shell: mobile shows one pane at a time via data-view,
   desktop (md+) always shows all three. Handled with plain CSS rather than
   toggling Tailwind's hidden/flex utilities via JS, to avoid fighting
   Tailwind's own responsive-variant cascade order. --- */
#app-root { display: flex; height: 100vh; overflow: hidden; }
#app-root .sidebar { display: none; }
#app-root .list-pane { width: 100%; }
#app-root .reader-pane { display: none; width: 100%; }

#app-root[data-view="list"] .list-pane { display: flex; }
#app-root[data-view="list"] .reader-pane { display: none; }
#app-root[data-view="reader"] .list-pane { display: none; }
#app-root[data-view="reader"] .reader-pane { display: flex; }
#app-root[data-view="sidebar"] .sidebar {
  display: flex; position: fixed; inset: 0; z-index: 50; width: 100%;
}

@media (min-width: 768px) {
  #app-root .sidebar { display: flex !important; position: static; width: 15rem; flex-shrink: 0; }
  #app-root .list-pane { display: flex !important; width: 22rem; flex-shrink: 0; }
  #app-root .reader-pane { display: flex !important; flex: 1; width: auto; }
}


@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast { animation: toast-in 0.18s ease-out; }