:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Dynamic Backgrounds */
  --nav-bg: rgba(10, 10, 15, 0.8);
  --dropdown-bg: #111116;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-bg: #0d0d15;
  
  /* Hover states */
  --hover-primary: rgba(59, 130, 246, 0.15);
  --hover-secondary: rgba(255, 255, 255, 0.05);
  --hover-tertiary: rgba(255, 255, 255, 0.1);
  --active-bg: rgba(255, 255, 255, 0.02);
  
  /* Badges & Accents */
  --badge-success-bg: rgba(16, 185, 129, 0.2);
  --badge-success-text: #34d399;
  --badge-info-bg: rgba(59, 130, 246, 0.2);
  --badge-info-text: #60a5fa;
  --badge-error-bg: rgba(239, 68, 68, 0.15);
  --badge-error-text: #ef4444;
  --badge-warning-bg: rgba(245, 158, 11, 0.15);
  --badge-warning-text: #f59e0b;
  
  --platform-wa-border: #25D366;
  --platform-wa-bg: rgba(37, 211, 102, 0.1);
  --platform-tg-border: #0088cc;
  --platform-tg-bg: rgba(0, 136, 204, 0.1);
  --platform-dc-border: #5865F2;
  --platform-dc-bg: rgba(88, 101, 242, 0.1);
  --platform-web-border: #3b82f6;
  --platform-web-bg: rgba(59, 130, 246, 0.1);
  --platform-ig-border: #e1306c;
  --platform-ig-bg: rgba(225, 48, 108, 0.1);
  --platform-li-border: #0a66c2;
  --platform-li-bg: rgba(10, 102, 194, 0.1);

  --bg-main: #0a0a0f;
  --bg-surface: rgba(255, 255, 255, 0.03);
  --bg-surface-hover: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.08);
  --text-main: #ffffff;
  --text-muted: #a0a0ab;
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-purple: #8b5cf6;
  
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
  /* Scrollbars and form controls follow the theme (a light scrollbar on a Night page glares) */
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-main: #f3f4f6;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f9fafb;
  --border-color: #e5e7eb;
  --text-main: #111827;
  --text-muted: #6b7280;
  
  --nav-bg: rgba(255, 255, 255, 0.8);
  --dropdown-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --modal-bg: #ffffff;
  
  --hover-primary: rgba(59, 130, 246, 0.1);
  --hover-secondary: rgba(0, 0, 0, 0.05);
  --hover-tertiary: rgba(0, 0, 0, 0.08);
  --active-bg: rgba(0, 0, 0, 0.02);
  
  --shadow-glow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  
  --badge-success-bg: rgba(16, 185, 129, 0.1);
  --badge-success-text: #059669;
  --badge-info-bg: rgba(59, 130, 246, 0.1);
  --badge-info-text: #2563eb;
  --badge-error-bg: rgba(239, 68, 68, 0.1);
  --badge-error-text: #dc2626;
  --badge-warning-bg: rgba(245, 158, 11, 0.1);
  --badge-warning-text: #d97706;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Layout ── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 28px;
  height: 28px;
  color: var(--accent-blue);
}

.logo h1 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, var(--text-main), var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── The sidebar (index.html, js/components/sidebarDrawer.js) ──
   Collapsed: a narrow rail of centered icons. Expanded (the drawer button at its foot, kept in
   localStorage['starman-sidebar']): icons with their names, and the page moves over to make room.
   <html data-sidebar> says which; the head of index.html sets it before anything is drawn. */
:root { --sidebar-w: 64px; }
html[data-sidebar="expanded"] { --sidebar-w: 232px; }

.sidebar-slot {
  width: var(--sidebar-w); flex-shrink: 0; position: relative; z-index: 200;
  transition: width 200ms var(--ease-out);
}
.sidebar {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 12px 0;
  background: var(--bg-surface);
  /* the edge is drawn inside, so the icons center on the rail's full width */
  box-shadow: inset -1px 0 0 var(--border-color);
  overflow: hidden; white-space: nowrap;
}
.sidebar-items, .sidebar-footer { display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }
/* The pages, then (past a faint line) settings, sit in the middle of the rail's
   height; the drawer button alone at its foot */
.sidebar-items { margin: auto 0; }
.sidebar-divider { height: 1px; margin: 6px 10px; background: var(--border-color); flex-shrink: 0; }
html[data-sidebar="expanded"] .sidebar-divider { margin: 6px 4px; }

/* Collapsed: icons alone, centered in the rail (each item's title names it on hover) */
html:not([data-sidebar="expanded"]) .sidebar .nav-item { justify-content: center; gap: 0; padding: 10px 0; }
html:not([data-sidebar="expanded"]) .sidebar .nav-text { display: none; }

/* Expanded: the names come in just after the rail has widened */
html[data-sidebar="expanded"] .sidebar .nav-text { animation: sidebar-names 160ms var(--ease-out) 60ms both; }
@keyframes sidebar-names { from { opacity: 0; } }
.sidebar-drawer-btn .drawer-open-icon, .sidebar-drawer-btn .drawer-close-icon { display: flex; }
html[data-sidebar="expanded"] .sidebar-drawer-btn .drawer-open-icon,
html:not([data-sidebar="expanded"]) .sidebar-drawer-btn .drawer-close-icon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-slot { transition: none; }
  html[data-sidebar="expanded"] .sidebar .nav-text { animation: none; }
}

/* Phones: the sidebar is a drawer over the page, so the page keeps the whole width. The menu button
   in the top left corner opens it (as the panel's button does in the top right); a link, the scrim,
   Escape or the button closes it (js/components/sidebarDrawer.js, <html data-nav-open>). In the drawer
   the names always show; the rail's collapse button has nothing to do there. */
.nav-menu-btn, .nav-scrim { display: none; }
@media (max-width: 640px) {
  :root, html[data-sidebar="expanded"] { --sidebar-w: 248px; }
  /* The pages use the phone's width: a 16px edge, not the desktop's 48px */
  main.content { padding-left: 16px; padding-right: 16px; } /* main: this block sits above .content's own rule */
  .sidebar-slot {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200; width: var(--sidebar-w);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 240ms;
  }
  html[data-nav-open] .sidebar-slot {
    transform: none; visibility: visible; box-shadow: 16px 0 40px -12px rgba(15, 23, 42, 0.35);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sidebar { background: var(--dropdown-bg); }
  html[data-sidebar] .sidebar .nav-item { justify-content: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; }
  html[data-sidebar] .sidebar .nav-text { display: inline; animation: none; }
  html[data-sidebar] .sidebar-divider { margin: 6px 4px; }
  .sidebar-footer { display: none; }

  .nav-menu-btn {
    position: fixed; top: 16px; left: 16px; z-index: 1000; width: 36px; height: 36px; padding: 0;
    display: grid; place-items: center; border: 1px solid #e8ebf0; border-radius: 10px;
    background: rgba(255, 255, 255, 0.92); color: #64748b; cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
  }
  .nav-menu-btn svg { width: 18px; height: 18px; }
  .nav-menu-btn:active { transform: scale(0.96); }
  .nav-menu-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  :root:not([data-theme="light"]) .nav-menu-btn { background: rgba(17, 20, 29, 0.92); border-color: rgba(255, 255, 255, 0.08); color: #94a3b8; }
  html[data-session="none"] .nav-menu-btn { display: none; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(15, 23, 42, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 200ms ease;
  }
  html[data-nav-open] .nav-scrim { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sidebar-slot, html[data-nav-open] .sidebar-slot, .nav-scrim { transition: none; }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: transform 280ms var(--ease-out), opacity 160ms ease, color 200ms ease;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
  }
}

.nav-item.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent-blue);
}

.nav-item.active svg {
  opacity: 1;
}

/* A sidebar item that opens something instead of going to a page (the library) */
.nav-item-button {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-item-button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -2px;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 3rem;
}

/* ── Cards Grid (Sources) ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-blue), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    background: var(--bg-surface-hover);
    box-shadow: var(--shadow-glow);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover::before {
    opacity: 1;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.platform-icon {
  font-size: 1.5rem;
}

.card-stats {
  display: flex;
  gap: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--hover-tertiary);
}
.badge.synced { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.initializing { background: var(--badge-info-bg); color: var(--badge-info-text); }

/* ── Context Detail View ── */
.detail-header {
  margin-bottom: 2rem;
}

.tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.tab {
  padding: 0.75rem 0;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--text-main); }
}
.tab.active {
  color: var(--text-main);
  border-bottom-color: var(--accent-blue);
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.entry-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
}

.entry-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.entry-text {
  line-height: 1.6;
  font-size: 0.95rem;
}

.category-header {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  color: var(--accent-blue);
  text-transform: capitalize;
}

/* ── Tables ── */
.table-container {
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  background: var(--active-bg);
}

td {
  font-size: 0.9rem;
}

.hash-cell {
  font-family: monospace;
  color: var(--text-muted);
}

/* ── Search ── */

/* ── Filters ── */
/* Sources' header: the title, then Connect Account and Add Web Source (views/sources.js) */
.sources-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sources-head-actions { display: flex; gap: 0.75rem; }

.filters-bar {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .filter-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
  }
}

.filter-btn.active {
  background: var(--hover-primary);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--text-main);
}

/* ── Colorful Brand Icons ── */
.filter-btn[data-filter="whatsapp"] svg,
.card[data-platform="whatsapp"] .platform-icon svg {
  color: #25D366;
  stroke-width: 2.5;
}

.filter-btn[data-filter="telegram"] svg,
.card[data-platform="telegram"] .platform-icon svg {
  color: #0088cc;
  stroke-width: 2.5;
}

.filter-btn[data-filter="discord"] svg,
.card[data-platform="discord"] .platform-icon svg {
  color: #5865F2;
  stroke-width: 2.5;
}

.filter-btn[data-filter="web"] svg,
.card[data-platform="web"] .platform-icon svg {
  color: #3b82f6;
  stroke-width: 2.5;
}

/* Active states for filter buttons icons */
.filter-btn[data-filter="whatsapp"].active { border-color: var(--platform-wa-border); background: var(--platform-wa-bg); }
.filter-btn[data-filter="telegram"].active { border-color: var(--platform-tg-border); background: var(--platform-tg-bg); }
.filter-btn[data-filter="discord"].active { border-color: var(--platform-dc-border); background: var(--platform-dc-bg); }
.filter-btn[data-filter="web"].active { border-color: var(--platform-web-border); background: var(--platform-web-bg); }
.filter-btn[data-filter="instagram"].active { border-color: var(--platform-ig-border); background: var(--platform-ig-bg); }
.filter-btn[data-filter="linkedin"].active { border-color: var(--platform-li-border); background: var(--platform-li-bg); }
.filter-btn[data-filter="instagram"] svg,
.card[data-platform="instagram"] .platform-icon svg { color: #e1306c; }
.filter-btn[data-filter="linkedin"] svg,
.card[data-platform="linkedin"] .platform-icon svg { color: #0a66c2; }

.search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.search-input {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--accent-blue);
}

.btn {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 0 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #2563eb; }
}

.score-bar {
  height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
  margin-top: 1rem;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  background: var(--accent-green);
}

/* ── Crawl Inspector Overlay ── */
.crawl-inspector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--bg-main);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  animation: inspectorFadeIn 0.3s ease;
}

@keyframes inspectorFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--nav-bg);
}

.inspector-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inspector-header h3 .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.inspector-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.inspector-controls button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .inspector-controls button:hover {
    background: var(--bg-surface-hover);
  }
}

.inspector-controls .stop-btn {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

@media (hover: hover) and (pointer: fine) {
  .inspector-controls .stop-btn:hover {
    background: rgba(239, 68, 68, 0.25);
  }
}

.inspector-progress {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-bar-container {
  flex: 1;
  height: 6px;
  background: var(--hover-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.inspector-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.inspector-iframe-panel {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
}

.iframe-url-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--modal-overlay);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.iframe-url-bar .url-icon {
  color: var(--accent-green);
  flex-shrink: 0;
}

.iframe-url-bar .url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iframe-url-bar .depth-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}

.iframe-container {
  flex: 1;
  position: relative;
  background: var(--modal-bg);
  overflow: hidden;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.iframe-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top left;
  border: none;
  transition: opacity 0.3s ease;
  background: var(--modal-bg);
}

.iframe-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.iframe-loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.inspector-feed-panel {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feed-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.feed-stat {
  text-align: center;
}

.feed-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.feed-stat .stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feed-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timeline-event {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: var(--active-bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  animation: eventSlideIn 0.3s ease;
}

@keyframes eventSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.timeline-event .event-icon {
  margin-right: 0.4rem;
}

.timeline-event .event-url {
  color: var(--text-muted);
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  display: block;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-event .event-detail {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.timeline-event.status-new {
  border-left: 3px solid #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.timeline-event.status-changed {
  border-left: 3px solid var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}

.timeline-event.status-unchanged {
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.timeline-event.status-error {
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.timeline-event.status-fetching {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.inspector-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--nav-bg);
}


/* ── Starman Redesign ── */
@media (hover: hover) and (pointer: fine) {
  .hover-bg-light:hover {
    background: var(--bg-surface-hover) !important;
  }
}

.action-chip {
  background: var(--hover-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 30px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (hover: hover) and (pointer: fine) {
  .action-chip:hover {
    background: var(--hover-primary);
    transform: translateY(-1px);
  }
}

#starman-chat-history::-webkit-scrollbar {
  width: 8px;
}

#starman-chat-history::-webkit-scrollbar-track {
  background: transparent;
}

#starman-chat-history::-webkit-scrollbar-thumb {
  background: var(--hover-tertiary);
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  #starman-chat-history::-webkit-scrollbar-thumb:hover {
    background: var(--hover-primary);
  }
}

/* ── Social Detail Layout ── */
.social-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .social-detail-layout {
    grid-template-columns: 1fr;
  }
}

.social-header-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.social-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.social-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.social-header-icon.whatsapp { background: transparent; }
.social-header-icon.instagram { background: transparent; }
.social-header-icon.linkedin { background: transparent; }

.social-header-text h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-header-text p {
  margin: 0.25rem 0 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 1rem;
}

.pulse-dot-small {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}

.social-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.social-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  background: var(--bg-surface);
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.social-tabs {
  display: flex;
  gap: 0.5rem;
}

.social-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
  .social-tab-btn:hover {
    color: var(--text-main);
  }
}

.social-tab-btn.active {
  color: var(--accent-blue);
  border-bottom: 3px solid var(--accent-blue);
}

.social-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-search-input {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.6rem 1rem 0.6rem 2.2rem;
  border-radius: 8px;
  outline: none;
  width: 250px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a0a0ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  transition: border-color 0.2s;
}
.social-search-input:focus {
  border-color: var(--accent-blue);
}

.social-action-btn {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .social-action-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
  }
}
.social-action-btn.danger {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}

.social-message-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.social-message-preview {
  width: 260px;
  flex-shrink: 0;
  display: flex;
}
.social-message-preview.text-preview {
  background: var(--bg-surface-hover);
  border-left: 4px solid var(--accent-blue);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.social-message-preview.whatsapp-preview {
  border-left-color: #25D366;
}
.social-message-preview.instagram-preview {
  border-left-color: #e1306c;
}
.social-message-preview.linkedin-preview {
  border-left-color: #0a66c2;
}

.social-media-container {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.social-media-container img, .social-media-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-media-overlay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.social-media-overlay-icon {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-media-overlay-icon.whatsapp { background: transparent; }
.social-media-overlay-icon.instagram { background: transparent; }
.social-media-overlay-icon.linkedin { background: transparent; }

.social-media-overlay-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.social-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.social-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.social-message-sender {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.social-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  overflow: hidden;
}
.social-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-sender-info h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.social-sender-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.social-message-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.social-message-body {
  flex: 1;
}
.social-message-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.social-message-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.social-message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
.social-message-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.social-badge {
  background: var(--hover-tertiary);
  color: var(--text-main);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.social-badge.whatsapp { color: #25D366; background: rgba(37,211,102,0.1); }
.social-badge.instagram { color: #e1306c; background: rgba(225,48,108,0.1); }
.social-badge.linkedin { color: #0a66c2; background: rgba(10,102,194,0.1); }
.social-badge.unprocessed { color: #f59e0b; background: rgba(245,158,11,0.1); }
.social-badge.video { color: #3b82f6; background: rgba(59,130,246,0.1); }
.social-badge.text { color: #a855f7; background: rgba(168,85,247,0.1); }
.social-badge.image { color: #ec4899; background: rgba(236,72,153,0.1); }

.social-view-details {
  color: var(--accent-blue);
  background: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Stats Widgets */
.social-stats-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.social-stat-hero {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 12px;
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}
.social-stat-hero .stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.social-stat-hero .stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}
.social-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.social-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
}
.social-stat-icon.orange { color: #f59e0b; }
.social-stat-icon.blue { color: #3b82f6; }
.social-stat-icon.purple { color: #a855f7; }
.social-stat-content {
  display: flex;
  flex-direction: column;
}
.social-stat-content .stat-value {
  font-size: 1.25rem;
  font-weight: 600;
}
.social-stat-content .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.social-quote-card {
  background: var(--badge-info-bg);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px;
  padding: 1.25rem;
  color: var(--text-main);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hover label for icon buttons: <button class="has-tip" data-tip="…">.
   The first label waits briefly so a passing mouse doesn't flash it; once one has shown,
   neighbours open instantly (js/components/hoverTips.js sets data-tip-instant). */
.has-tip {
  position: relative;
  transition: transform 160ms var(--ease-out);
}
.has-tip:active {
  transform: scale(0.97);
}
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background: var(--text-main);
  color: var(--bg-main);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transform-origin: bottom right;
  transition: opacity 100ms var(--ease-out), transform 100ms var(--ease-out);
  z-index: 50;
}
@media (hover: hover) and (pointer: fine) {
  .has-tip:hover::after {
    opacity: 1;
    transform: none;
    transition-duration: 125ms;
    transition-delay: 250ms;
  }
  .has-tip[data-tip-instant]:hover::after {
    transition: none;
  }
}
.has-tip:focus-visible::after {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-tip:active,
  .has-tip::after {
    transform: none;
  }
}


/* ── Settings: the sidebar's gear and its menu (js/components/settingsMenu.js) ── */
.sidebar-settings-btn[aria-expanded="true"] { background: var(--bg-surface-hover); color: var(--text-main); }

.settings-menu {
  --sm-ink: var(--text-main, #0f172a); --sm-muted: var(--text-muted, #64748b); --sm-line: var(--border-color, #e5e7eb);
  --sm-hover: var(--bg-surface-hover, #f3f4f6); --sm-bg: var(--dropdown-bg, #ffffff);
  position: fixed; z-index: 2000; width: 300px; max-height: min(560px, calc(100vh - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sm-bg); color: var(--sm-ink); border: 1px solid var(--sm-line); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transform-origin: left bottom; opacity: 0; transform: scale(0.97);
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.settings-menu.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .settings-menu { transition: none; } }

.settings-account { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--sm-line); }
.settings-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--sm-hover); }
.settings-avatar.is-empty { display: grid; place-items: center; color: var(--sm-muted); }
.settings-avatar.is-empty svg { width: 18px; height: 18px; }
.settings-avatar.is-initials { display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; color: var(--sm-ink); }
.settings-who { min-width: 0; }
.settings-name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-detail { font-size: 0.78rem; color: var(--sm-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.settings-section { display: flex; flex-direction: column; min-height: 0; padding: 12px 8px 8px; }
.settings-label { padding: 0 8px 8px; font-size: 0.75rem; font-weight: 600; color: var(--sm-muted); }
.settings-search-box {
  display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 4px 6px; padding: 0 10px;
  background: var(--sm-hover); border: 1px solid transparent; border-radius: 8px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.settings-search-box:focus-within { background: var(--sm-bg); border-color: var(--accent-blue, #2563eb); }
.settings-search-box svg { width: 14px; height: 14px; color: var(--sm-muted); flex-shrink: 0; }
.settings-search { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 0.82rem; color: var(--sm-ink); }
.settings-universes { overflow-y: auto; max-height: 280px; display: flex; flex-direction: column; gap: 1px; }
.settings-universe {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; text-align: left;
  background: none; border: none; border-radius: 8px; cursor: pointer; color: var(--sm-ink); font: inherit;
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .settings-universe:hover { background: var(--sm-hover); }
}
.settings-universe:focus-visible { outline: 2px solid var(--accent-blue, #2563eb); outline-offset: -2px; }
.settings-logo { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--sm-hover) center / cover no-repeat; border: 1px solid var(--sm-line); }
.settings-universe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-universe-name { font-size: 0.84rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-universe-place { font-size: 0.74rem; color: var(--sm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-universe[aria-checked="true"] .settings-universe-name { font-weight: 600; }
.settings-check { width: 16px; height: 16px; color: var(--accent-blue, #2563eb); flex-shrink: 0; }
.settings-none { padding: 16px 8px; font-size: 0.82rem; color: var(--sm-muted); text-align: center; }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--sm-line); }
.settings-row .settings-label { padding: 0; }
.settings-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--sm-hover); }
.settings-seg-btn {
  height: 26px; padding: 0 10px; border: none; border-radius: 6px; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 500; color: var(--sm-muted);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .settings-seg-btn:hover { color: var(--sm-ink); }
}
.settings-theme .settings-seg-btn { display: inline-flex; align-items: center; gap: 5px; }
.settings-theme svg { width: 13px; height: 13px; }
.settings-seg-btn[aria-checked="true"] { background: var(--sm-bg); color: var(--sm-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.settings-seg-btn:focus-visible { outline: 2px solid var(--accent-blue, #2563eb); outline-offset: 1px; }
.settings-footer { border-top: 1px solid var(--sm-line); padding: 6px 8px 8px; }
.settings-action {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 8px;
  background: none; border: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--sm-ink);
  transition: background-color 120ms ease, color 120ms ease;
}
.settings-action svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .settings-action:hover { background: var(--sm-hover); }
}
@media (hover: hover) and (pointer: fine) {
  .settings-action.is-danger:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
}
.settings-action:focus-visible, .settings-btn:focus-visible { outline: 2px solid var(--accent-blue, #2563eb); outline-offset: -2px; }
.settings-confirm { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 2px; font-size: 0.82rem; color: var(--sm-ink); }
.settings-confirm-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.settings-btn {
  height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--sm-line); background: var(--sm-bg);
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--sm-ink); cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .settings-btn:hover { background: var(--sm-hover); }
}
.settings-btn:active { transform: scale(0.97); }
.settings-btn.is-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .settings-btn.is-danger:hover { background: #b91c1c; }
}

/* ── University websites (views/webSource.js, views/crawler.js) ── */
.badge.warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.error { background: var(--badge-error-bg); color: var(--badge-error-text); }
.badge.paused { background: var(--hover-tertiary); color: var(--text-muted); }
.timeline-event.status-skipped { border-left: 3px solid rgba(160, 160, 171, 0.35); }

.ws-muted { color: var(--text-muted); font-size: 0.85rem; }
.ws-card-detail { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.ws-card:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem; border-radius: 8px; font: inherit; font-size: 0.875rem; font-weight: 600;
  background: var(--hover-secondary); color: var(--text-main); border: 1px solid var(--border-color);
  cursor: pointer; list-style: none;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, opacity 150ms ease;
}
.ws-btn::-webkit-details-marker { display: none; }
.ws-btn:active { transform: scale(0.97); }
.ws-btn:disabled { opacity: 0.6; cursor: default; }
.ws-btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .ws-btn:hover { background: var(--hover-tertiary); }
  .ws-btn-primary:hover { background: #2563eb; }
}

/* Add a website */
.ws-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--modal-overlay);
  transition: opacity 200ms var(--ease-out);
  @starting-style { opacity: 0; }
}
.ws-dialog {
  width: 480px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--modal-bg); border: 1px solid var(--border-color); border-radius: 14px;
  padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 1rem;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: scale(0.97); }
}
.ws-dialog h3 { margin: 0; }
.ws-dialog p { margin: 0; line-height: 1.5; }

.ws-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ws-label { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.ws-hint { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.ws-field input, .ws-field select, .ws-search {
  width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; font: inherit; font-size: 0.9rem;
  background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-color);
  transition: border-color 150ms ease;
}
.ws-field input:focus, .ws-field select:focus, .ws-search:focus { outline: none; border-color: var(--accent-blue); }
.ws-check { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.ws-check input { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--accent-blue); flex: none; }
.ws-more summary { cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
.ws-more-body { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.9rem; }
.ws-error {
  padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.85rem;
  background: var(--badge-error-bg); color: var(--badge-error-text);
}
.ws-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; }
.ws-actions .ws-muted { margin-right: auto; }

/* The website's page */
.ws-view { display: flex; flex-direction: column; gap: 1.25rem; max-width: 980px; }
.ws-back { align-self: flex-start; background: none; border: none; padding: 0; color: var(--accent-blue); cursor: pointer; font: inherit; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ws-title { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.ws-sub { color: var(--text-muted); font-size: 0.875rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ws-sub a, .ws-link { color: var(--accent-blue); text-decoration: none; overflow-wrap: anywhere; }
.ws-head-actions { display: flex; gap: 0.5rem; align-items: center; }
.ws-menu { position: relative; }
.ws-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px;
  display: flex; flex-direction: column; padding: 0.35rem;
  background: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transform-origin: top right;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
  @starting-style { opacity: 0; transform: scale(0.97); }
}
.ws-menu-list button {
  text-align: left; padding: 0.55rem 0.7rem; border-radius: 6px; border: none; background: none;
  color: var(--text-main); font: inherit; font-size: 0.875rem; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .ws-menu-list button:hover { background: var(--hover-secondary); } }
.ws-menu-list .ws-danger { color: var(--badge-error-text); }

.ws-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem;
}
.ws-summary > div {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px;
}
.ws-num { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-notice {
  padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.875rem; line-height: 1.5;
  background: var(--badge-warning-bg); color: var(--badge-warning-text);
}
.ws-tabs { margin-bottom: 0; }
.ws-tabs .tab { background: none; border: none; border-bottom: 2px solid transparent; font: inherit; }
.ws-tabs .tab.active { border-bottom-color: var(--accent-blue); }

.ws-search { margin-bottom: 0.75rem; max-width: 360px; }
.ws-pages { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.ws-page + .ws-page { border-top: 1px solid var(--border-color); }
.ws-page summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.75rem 1rem; cursor: pointer; list-style: none;
}
.ws-page summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .ws-page summary:hover { background: var(--hover-secondary); } }
.ws-page-title { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ws-page-meta { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-tag {
  display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.35rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; background: var(--badge-error-bg); color: var(--badge-error-text);
}
.ws-page-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
.ws-page-body p { margin: 0; }
.ws-hints { margin: 0; padding-left: 1.1rem; color: var(--text-muted); }
.ws-empty { padding: 1.5rem 1rem; color: var(--text-muted); text-align: center; }
.ws-settings { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }

/* Crawl inspector: a page read without a browser shows its text instead of a screenshot */
.ws-preview { position: absolute; inset: 0; overflow-y: auto; padding: 1.25rem; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }
.ws-preview-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.75rem; }
.ws-preview p { margin: 0 0 0.6rem; }

@media (max-width: 640px) {
  .ws-head-actions { width: 100%; }
  .ws-page summary { flex-direction: column; gap: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-dialog, .ws-menu-list { transition: opacity 150ms ease; @starting-style { opacity: 0; transform: none; } }
  .ws-btn:active { transform: none; }
}


/* ── Sign in (js/auth.js) and who sees what ──
   <html data-session> is set before anything is drawn (the script in index.html's <head>, then
   auth.js): 'none' shows only the sign-in screen, 'admin' adds the Macbease admin's tools (elements
   marked data-admin: Sources, the Library), 'user' is everyone else. */
html:not([data-session="admin"]) [data-admin],
html[data-admin-tools="hidden"] [data-admin] { display: none !important; }
/* An admin can hide their tools in Settings (localStorage['starman-admin-tools'], <html data-admin-tools>) */
html[data-session="none"] #app { display: none; }

.signin { display: none; }
html[data-session="none"] .signin {
  display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; box-sizing: border-box;
  background: var(--bg-main);
}
.signin-card {
  width: 100%; max-width: 380px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 24px;
  background: var(--dropdown-bg); color: var(--text-main);
  border: 1px solid var(--border-color); border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: signin-enter 240ms var(--ease-out) both;
}
@keyframes signin-enter { from { opacity: 0; transform: translateY(6px) scale(0.99); } }

.signin-brand { display: flex; align-items: center; gap: 10px; }
.signin-brand starman-avatar { display: block; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-main); }
.signin-brand-text { display: flex; flex-direction: column; }
.signin-brand-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.signin-brand-by { margin-top: 2px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.signin-title { margin: 6px 0 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

/* User | Admin: which kind of account signs in (a radio group, arrow keys move between them) */
.signin-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-main); }
.signin-mode {
  height: 32px; border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--text-muted);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.signin-mode[aria-checked="true"] { background: var(--dropdown-bg); color: var(--text-main); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--border-color); }
.signin-mode:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .signin-mode:hover { color: var(--text-main); } }
.signin-hint { margin: -6px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }

.signin-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.signin-field input {
  height: 40px; padding: 0 12px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-main); color: var(--text-main);
  font: inherit; font-size: 0.9rem; font-weight: 400; outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.signin-field input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.signin-error { margin: -4px 0 0; font-size: 0.82rem; line-height: 1.4; color: #ef4444; }
.signin-error[hidden] { display: none; }

.signin-submit {
  height: 42px; margin-top: 4px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent-blue); color: #ffffff; font: inherit; font-size: 0.9rem; font-weight: 600;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, opacity 150ms ease;
}
.signin-submit:active { transform: scale(0.97); }
.signin-submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
.signin-submit:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .signin-submit:hover:not(:disabled) { background: #2563eb; } }

@media (prefers-reduced-motion: reduce) {
  .signin-card { animation-name: signin-fade; }
  .signin-submit:active { transform: none; }
}
@keyframes signin-fade { from { opacity: 0; } }

/* Settings: an admin's account says so beside the name; a student's university is shown, not chosen */
.settings-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.settings-role {
  flex-shrink: 0; padding: 1px 6px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; background: var(--badge-info-bg); color: var(--badge-info-text);
}
.settings-universe.is-fixed { cursor: default; }
@media (hover: hover) and (pointer: fine) { .settings-universe.is-fixed:hover { background: none; } }
.signin-cancel {
  height: 34px; margin-top: -8px; border: none; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--text-muted);
  transition: color 150ms ease;
}
.signin-cancel[hidden] { display: none; }
.signin-cancel:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .signin-cancel:hover { color: var(--text-main); } }

/* Settings: an admin's university, with Change (opens the picker below) */
.settings-change-label { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 0.78rem; font-weight: 500; color: var(--sm-muted); }
.settings-change-label svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .settings-change:hover .settings-change-label { color: var(--sm-ink); } }

/* ── Choose a university (js/components/universityPicker.js): its own dialog, centered ── */
.uni-picker-backdrop {
  position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 23, 42, 0.32);
  animation: uni-picker-fade 160ms ease-out both;
}
.uni-picker {
  --sm-ink: var(--text-main, #0f172a); --sm-muted: var(--text-muted, #64748b); --sm-line: var(--border-color, #e5e7eb);
  --sm-hover: var(--bg-surface-hover, #f3f4f6); --sm-bg: var(--dropdown-bg, #ffffff);
  width: 100%; max-width: 440px; max-height: min(600px, calc(100vh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sm-bg); color: var(--sm-ink); border: 1px solid var(--sm-line); border-radius: 16px;
  box-shadow: 0 24px 56px -16px rgba(15, 23, 42, 0.38), 0 2px 6px rgba(15, 23, 42, 0.08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: uni-picker-in 180ms var(--ease-out) both;
}
@keyframes uni-picker-fade { from { opacity: 0; } }
@keyframes uni-picker-in { from { opacity: 0; transform: scale(0.97); } }
.uni-picker-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.uni-picker-title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.uni-picker-close {
  display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: none; color: var(--sm-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
.uni-picker-close svg { width: 18px; height: 18px; }
.uni-picker-close:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .uni-picker-close:hover { background: var(--sm-hover); color: var(--sm-ink); } }
.uni-picker-search {
  display: flex; align-items: center; gap: 8px; height: 44px; flex-shrink: 0; box-sizing: border-box;
  margin: 4px 16px 10px; padding: 0 14px;
  background: var(--sm-hover); border: 1px solid transparent; border-radius: 10px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.uni-picker-search:focus-within { background: var(--sm-bg); border-color: var(--accent-blue); }
.uni-picker-search svg { width: 16px; height: 16px; color: var(--sm-muted); flex-shrink: 0; }
.uni-picker-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 0.92rem; color: var(--sm-ink); }
.uni-picker-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 0 8px 10px; }
.uni-picker-option.is-active { background: var(--sm-hover); }
.uni-picker-option[aria-selected="true"] .settings-universe-name { font-weight: 600; }
.uni-picker-none { padding: 28px 12px; font-size: 0.85rem; color: var(--sm-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .uni-picker { animation-name: uni-picker-fade; }
}

/* ── Sidebar icons on hover: a small, quick gesture each (pointer devices only; transitions, so a
   pointer passing over and away just eases back) ──
   Chat tilts as if speaking, Ideas rises and lights up, Library tips open, Sources' bars grow,
   Usage's needle swings up the dial, Settings turns its gear (and stays turned while its menu is
   open), the drawer's lines widen and Close's cross turns. */
@media (hover: hover) and (pointer: fine) {
  .sidebar .nav-item:hover svg { opacity: 1; transform: translateY(-1px) scale(1.08); }
  .sidebar .nav-item[data-path="/search"]:hover svg { transform: translateY(-1px) rotate(-10deg) scale(1.08); }
  .sidebar .nav-item[data-path="/ideas"]:hover svg { transform: translateY(-2px) scale(1.1); color: #f59e0b; }
  .sidebar #sidebar-library-btn:hover svg { transform: translateY(-1px) rotate(-8deg) scale(1.06); }
  .sidebar .nav-item[data-path="/"] svg { transform-origin: 50% 85%; }
  .sidebar .nav-item[data-path="/"]:hover svg { transform: scaleY(1.16); }
  /* lucide's gauge: the needle is its first path, pinned at (12, 14) */
  .sidebar .nav-item[data-path="/usage"] svg path:first-child { transform-origin: 12px 14px; transition: transform 320ms var(--ease-out); }
  .sidebar .nav-item[data-path="/usage"]:hover svg path:first-child { transform: rotate(32deg); }
  .sidebar .sidebar-settings-btn:hover svg { transform: rotate(60deg); transition-duration: 420ms, 160ms, 200ms; }
  .sidebar .sidebar-drawer-btn:hover .drawer-open-icon svg { transform: scaleX(1.2); }
  .sidebar .sidebar-drawer-btn:hover .drawer-close-icon svg { transform: rotate(90deg); }
}
.sidebar .sidebar-settings-btn[aria-expanded="true"] svg { opacity: 1; transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item svg, .sidebar .nav-item svg path { transform: none !important; transition: opacity 160ms ease, color 200ms ease; }
}

/* Ideas: rays around the bulb that light up on hover, each drawn outward from the bulb (top first,
   then the diagonals, then the sides), and gone quickly when the pointer leaves */
.nav-bulb { position: relative; display: grid; flex-shrink: 0; width: 20px; height: 20px; }
.nav-bulb > svg { grid-area: 1 / 1; }
.idea-rays { overflow: visible; pointer-events: none; }
.idea-rays path {
  stroke-dasharray: 3; stroke-dashoffset: 3; opacity: 0;
  transition: stroke-dashoffset 120ms var(--ease-out), opacity 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar .nav-item[data-path="/ideas"]:hover .idea-rays path {
    stroke-dashoffset: 0; opacity: 1;
    transition: stroke-dashoffset 260ms var(--ease-out), opacity 160ms ease;
  }
  .sidebar .nav-item[data-path="/ideas"]:hover .idea-rays path:nth-child(2),
  .sidebar .nav-item[data-path="/ideas"]:hover .idea-rays path:nth-child(3) { transition-delay: 50ms; }
  .sidebar .nav-item[data-path="/ideas"]:hover .idea-rays path:nth-child(4),
  .sidebar .nav-item[data-path="/ideas"]:hover .idea-rays path:nth-child(5) { transition-delay: 100ms; }
}
@media (prefers-reduced-motion: reduce) {
  .idea-rays path { stroke-dashoffset: 0; transition: opacity 160ms ease; }
}

/* Sources on a phone: the title over its two buttons (side by side, sharing the width), the platform
   chips a row that scrolls under the finger to the screen's edges, without a scrollbar */
@media (max-width: 640px) {
  .sources-head { flex-direction: column; align-items: stretch; }
  .sources-head h2 { font-size: 1.6rem; }
  .sources-head-actions { width: 100%; }
  .sources-head-actions .sources-head-btn {
    flex: 1; min-width: 0; justify-content: center; gap: 6px !important; padding: 0.65rem 0.5rem !important;
    font-size: 0.85rem; white-space: nowrap;
  }
  .sources-head-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .filters-bar {
    margin: 1rem -16px 1rem; padding: 0 16px 2px; gap: 0.5rem;
    scrollbar-width: none; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
  }
  .filters-bar::-webkit-scrollbar { display: none; }
  .filter-btn { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
  .cards-grid { gap: 1rem; margin-top: 1rem; }
  .cards-grid .card { padding: 1.1rem; }
  .cards-grid .card-header { margin-bottom: 1rem; }
}