/* wbm-sidebar-view.css v2 - 3 view modes */
.wbm-view-toggle-fab {
  position: fixed; bottom: 20px; right: 80px; z-index: 99998;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: #3b82f6; color: #fff; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: transform 0.15s, background 0.15s;
}
.wbm-view-toggle-fab:hover { transform: scale(1.1); background: #2563eb; }

/* COMPACT - denser grid */
body.wbm-view-compact .card-grid,
body.wbm-view-compact .cards-grid,
body.wbm-view-compact .grid,
body.wbm-view-compact section[class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 8px !important;
  padding: 8px clamp(12px, 4vw, 40px) !important;
}
body.wbm-view-compact .card {
  padding: 8px 10px !important;
  min-height: 0 !important;
}
body.wbm-view-compact .card .card-desc,
body.wbm-view-compact .card p { display: none !important; }
body.wbm-view-compact .card .tags,
body.wbm-view-compact .card .badges { font-size: 9px !important; }
body.wbm-view-compact .card h2,
body.wbm-view-compact .card h3,
body.wbm-view-compact .card .card-title { font-size: 12px !important; margin: 0 !important; }
body.wbm-view-compact .card code,
body.wbm-view-compact .card .route { font-size: 10px !important; }

/* LIST - single row per card */
body.wbm-view-list .card-grid,
body.wbm-view-list .cards-grid,
body.wbm-view-list .grid,
body.wbm-view-list section[class*="grid"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px clamp(12px, 4vw, 40px) !important;
}
body.wbm-view-list .card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 12px !important;
  min-height: 38px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-subtle, #2a2f3d) !important;
  background: var(--bg-card, #1a1d27) !important;
}
body.wbm-view-list .card:hover {
  background: var(--bg-hover, #222633) !important;
  border-color: var(--accent-primary, #3b82f6) !important;
}
body.wbm-view-list .card .card-icon,
body.wbm-view-list .card > svg,
body.wbm-view-list .card > i { flex-shrink: 0 !important; font-size: 16px !important; width: 22px !important; }
body.wbm-view-list .card h2,
body.wbm-view-list .card h3,
body.wbm-view-list .card .card-title {
  font-size: 13px !important; margin: 0 !important;
  flex: 0 0 30% !important; min-width: 180px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
body.wbm-view-list .card code,
body.wbm-view-list .card .route {
  font-size: 11px !important; color: var(--text-secondary, #9ca3af) !important;
  flex: 0 0 22% !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
body.wbm-view-list .card .card-desc,
body.wbm-view-list .card p {
  font-size: 11px !important; color: var(--text-secondary, #9ca3af) !important;
  flex: 1 !important; margin: 0 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
body.wbm-view-list .card .tags,
body.wbm-view-list .card .badges { flex-shrink: 0 !important; font-size: 9px !important; }
body.wbm-view-list .card .mtime,
body.wbm-view-list .card .date {
  flex-shrink: 0 !important; font-size: 11px !important;
  color: var(--text-muted, #6b7280) !important; font-family: monospace !important;
}