/**
 * PitaraAI - Global Stylesheet
 * =======================================
 * Layout, components, and animations for home and collection pages.
 * Uses CSS variables for design tokens; supports light/dark card states.
 * 
 * Structure:
 * - Global base styles and CSS variables
 * - Home page components (collections grid, hero input)
 * - Collection page: header, stats, cards grid, and expanded modals
 * - Card styles: collapsed state (icon + label) and expanded overlays
 * - Code editor modal and media viewer modal
 * - Hover animations and transitions
 */

html, body { width: 100%; height: 100%; overflow-x: hidden; scrollbar-gutter: stable; }
body { background: #313131 !important; color: #f0f0f0; }

/* ===== Design Tokens (CSS Variables) ===== */
:root {
	/* Typography */
	--font-family: 'Arimo', Arial, sans-serif;

	/* Colors */
	--color-bg: #f8f9fa;
	--color-surface: #ffffff;
	--color-muted-surface: #f1f3f5;
	--color-primary: #0d6efd;
	--plus-btn-bg: #dbdcdd;
	--plus-btn-hover: #b6b8b9;

	/* Shadows */
	--card-shadow: 0 8px 12px rgba(15,15,15,0.06);
	--input-shadow: 0 8px 22px rgba(15,15,15,0.06);

	/* Sizes */
	--home-square-width: 220px;
	--home-square-height: 140px;
	--top-rect-width: 32%;
	--top-rect-min-height: 160px;
	--media-thumb-width: 140px;
	--media-thumb-height: 88px;

	/* Responsive Breakpoints
	 * These match BREAKPOINTS in design-tokens.js
	 * Note: CSS variables cannot be used in @media queries (CSS limitation),
	 * but they serve as documentation and can be read by JavaScript.
	 * See documents/BREAKPOINTS_LOCATION.md for usage guide.
	 */
	--breakpoint-sm: 640px;   /* Small devices (tablets) */
	--breakpoint-md: 768px;   /* Medium devices (small desktops) */
	--breakpoint-lg: 1024px;  /* Large devices (desktops) */
	--breakpoint-xl: 1280px;  /* Extra large devices (large desktops) */
	--breakpoint-2xl: 1536px; /* 2X Extra large devices */
}

/* ===== Reusable Button Components ===== */

/* Base icon button - dark theme with blue glow border */
.btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d4d;
  border: 1px solid rgba(190, 219, 255, 0.5);
  box-shadow: 0px 0px 0px 1px rgba(190, 219, 255, 0.5), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.5;
  flex-shrink: 0;
}

.btn-icon:hover {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0px 0px 0px 2px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.btn-icon.active,
.btn-icon:focus {
  opacity: 1;
}

.btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Small variant */
.btn-icon.btn-sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* Medium variant (default is 48px) */
.btn-icon.btn-md {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

/* Large variant */
.btn-icon.btn-lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

/* Ghost button - transparent with subtle border */
.btn-ghost {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary button - solid blue */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  background: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary button - gray/neutral */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #E5E7EB;
  color: #374151;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
  background: #D1D5DB;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Dark theme secondary button */
body.dark-theme .btn-secondary {
  background: #3d3d3d;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .btn-secondary:hover {
  background: #4d4d4d;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Danger/Delete button */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-danger:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* Unified close button - used everywhere for consistency */
.close-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
  flex-shrink: 0;
}
.close-btn:hover {
  color: #fff;
}
.close-btn::before {
  content: '\00D7';
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}
/* Close button on light background */
.close-btn.close-btn-light {
  color: rgba(0, 0, 0, 0.5);
}
.close-btn.close-btn-light:hover {
  color: #374151;
}

/* Circle button (for menu dots, non-close use) */
.btn-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-circle:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

/* Light theme circle button */
.btn-circle.btn-circle-light {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

.btn-circle.btn-circle-light:hover {
  background: rgba(0, 0, 0, 0.1);
}

.container-center { min-height: 80vh; display:flex; align-items:center; justify-content:center; }

.card pre { background:#212121; color:#e6e6e6; padding:8px; overflow:auto }

/* ===== Home Page Styles ===== */
.container-center { min-height: 80vh; display:flex; align-items:center; justify-content:center; }

.card pre { background:#212121; color:#e6e6e6; padding:8px; overflow:auto }

/* Home page title */
.home-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Collections grid on home page */
.empty-collections-grid { display:flex; gap:16px; }
.home-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  padding: 20px;
}

/* Home page collection card - preview style */
.home-collection-card {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  background: #f3f4f6;
}

.home-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Gradient background for collection card */
.home-collection-card-gradient {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
  width: 100%;
  height: 100%;
  position: relative;
}

/* Collection name label on gradient card */
.home-collection-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Collection preview grid (2x2 items) */
.collection-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  height: 100%;
  background: #fff;
}

.collection-preview-item {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.collection-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-preview-item.text-preview {
  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
  padding: 8px;
  font-size: 10px;
  line-height: 1.4;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-preview-item.code-preview {
  background: #1e1e1e;
  padding: 6px;
  font-family: monospace;
  font-size: 8px;
  color: #d4d4d4;
  overflow: hidden;
}

.collection-preview-item.mesh-preview {
  background: #0f1116;
  color: #4ade80;
  font-size: 24px;
}

.collection-preview-item.empty-preview {
  background: #f9fafb;
  color: #9ca3af;
  font-size: 12px;
}

/* Collection card overlay with name and count - positioned at bottom */
.collection-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  padding: 16px;
  color: white;
  z-index: 2;
}

.collection-card-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

.collection-card-count {
  font-size: 12px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.collection-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.collection-card-date {
  font-size: 12px;
  opacity: 0.8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Collection card menu button (three dots) */
.collection-card-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 10;
}

.collection-card-menu:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dropdown menu for collection card */
.collection-menu-dropdown {
  position: absolute;
  top: 48px;
  right: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 120px;
  z-index: 1000;
  overflow: hidden;
}

.collection-menu-item {
  padding: 10px 16px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background 0.15s ease;
}

.collection-menu-item:hover {
  background: #f3f4f6;
}

.collection-menu-item.delete {
  color: #ef4444;
}

.collection-menu-item.delete:hover {
  background: #fee2e2;
}

/* Add collection card - gray style */
.home-add-card {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.home-add-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: #D1D5DB;
}

/* Plus sign in add card */
.home-add-plus {
  font-size: 64px;
  font-weight: 300;
  color: #1F2937;
  line-height: 1;
  user-select: none;
}

/* Legacy styles for backward compatibility */
.plus-square { background:#e9ecef; border-radius:12px; width:120px; height:120px; display:flex; align-items:center; justify-content:center; position:relative; box-shadow: var(--card-shadow) }
.plus-btn { width:44px; height:44px; border-radius:50%; background:var(--plus-btn-bg); border:2px dashed #adb5bd; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer }
.plus-square .plus-btn:hover { background:var(--plus-btn-hover) }

/* Empty collection placeholders and cards */
.coder-pad { background:#e9ecef; border-radius:12px; padding:18px; min-height:120px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--card-shadow) }
.coder-pad.expanded { min-height:200px }
.example-cards { display:flex; gap:12px; margin-top:12px }
.example-card { background:#e9ecef; border-radius:12px; width:240px; height:140px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow: var(--card-shadow) }
.example-card img, .example-card iframe { width:100%; height:100%; object-fit:cover; border-radius:12px }
.example-card .card-overlay { position:absolute; right:8px; bottom:8px }

/* ===== Layout & Containers ===== */
.container { max-width:1200px }
.form-control-lg { padding:0.75rem 1rem; font-size:1rem }
#whatInput { max-width: 640px; width:100%; box-shadow: var(--input-shadow); }
#hero label { font-size:1.25rem; font-weight:600 }

/* Collection cards grid layout (inspired by shopping/inspiration cards) */
.collection-cards-grid { display:flex; gap:16px; width:100%; flex-wrap:wrap; }

/* Organize mode styles */
.collection-card.organize-mode-active {
  cursor: grab;
  user-select: none;
}

.collection-card.organize-mode-active:active {
  cursor: grabbing;
}

/* Disable hover effects during organize mode */
.collection-card.organize-mode-active:hover {
  transform: none;
}

/* Drag placeholder - shown where card will be dropped */
.drag-placeholder {
  background: rgba(59, 130, 246, 0.15);
  border: 2px dashed rgba(59, 130, 246, 0.5);
  border-radius: 16px;
  pointer-events: none;
}

/* Drag clone - follows the mouse */
.drag-clone {
  border-radius: 16px;
  overflow: hidden;
}

.drag-clone .card-background {
  border-radius: 16px;
}

/* Legacy drag-over style (for backwards compatibility) */
.collection-card.drag-over {
  opacity: 0.5;
  transform: scale(1.05);
  border: 2px solid rgba(59, 130, 246, 0.8);
}

/* ===== Large card variant (centred gallery look) ===== */
/* Use when the template wants a visually larger card (see collection view) */
.collection-card.large,
.collection-card.large-card {
  flex: 0 0 320px;
  min-width: 320px;
  max-width: 360px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,15,15,0.08);
}
.collection-card.large .card-background,
.collection-card.large-card .card-background {
  border-radius: 18px;
}
.collection-card.large .card-inner, .collection-card.large-card .card-inner { border-radius: 18px; }

/* Card title - now interactive for editing */
.card-background .card-label-title { 
  cursor: text;
  user-select: none;
  pointer-events: auto !important;
  position: relative;
  z-index: 11;
}
.card-background .card-label-title:hover {
  opacity: 0.8;
}

/* Slightly larger icon for large cards */
.collection-card.large .card-icon, .collection-card.large-card .card-icon { width:20px; height:20px; }

/* Add-dropdown styles (small menu under the + toggle) */
.add-dropdown {
  background:#fff;
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:120px;
  z-index:1500;
}
.add-dropdown .add-option {
  background:transparent;
  border:none;
  padding:8px 12px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
  border-radius:8px;
}
.add-dropdown .add-option:hover { background:rgba(0,0,0,0.04); }

/* Card hover animation (match Example MediaCard behavior) */
.collection-card {
  transition: transform 260ms ease, box-shadow 260ms ease;
  min-width:160px;
  flex: 1 1 180px;
}
.collection-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 14px 32px rgba(15,15,15,0.10);
}

/* Image zoom on hover */
.collection-card .card-inner img {
  transition: transform 300ms ease;
  transform-origin: center center;
}
/* Notebook card: same width as other collection cards */
.collection-card[data-type="text"].collection-page-card {
  width: 280px;
  flex: 0 0 280px;
}
/* Notebook screenshot: fit width, crop height (no squish on collection page) */
.collection-card[data-type="text"] .card-inner img {
  object-fit: cover;
  object-position: top;
  height: 250px;
}
.collection-card:hover .card-inner img {
  transform: scale(1.06);
}

/* Gradient overlay that fades in on hover */
/* Hover gradient overlay disabled - using permanent gradient via ::before */
.card-background::after {
  display: none;
}

/* ===== Card Menu Button (Collection Page Cards) ===== */
/* Three-dot menu that appears on hover in top-right corner */
.card-menu-container {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.collection-card:hover .card-menu-container {
  opacity: 1;
  transform: translateY(0);
}

.card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}

.card-menu-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
}

/* Hide More options button when card is expanded */
.collection-card.expanded .card-menu-container {
  display: none !important;
}

.card-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 190px;
  background: rgba(30, 30, 35, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 100;
}

.card-menu-option {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #e0e0e0;
  transition: background 0.15s ease;
  text-align: left;
}

.card-menu-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.card-menu-option svg,
.card-menu-option img.card-menu-option-icon {
  flex-shrink: 0;
}

.card-menu-option-danger {
  color: #ef4444;
}

.card-menu-option-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Card menu: same toggle + label order as user dropdown (toggle left, label right) */
.card-menu-allow-download-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
}

.card-menu-allow-download-row:hover {
  background: transparent;
}

.card-menu-allow-download-label {
  font-size: 13px;
  color: #e0e0e0;
  user-select: none;
  flex: 1;
  text-align: left;
  cursor: pointer;
}

/* ===== Hover & Action Buttons ===== */
/* Top-right action that appears on hover (if markup adds .card-action) */
.card-action { position:absolute; top:12px; right:12px; z-index:12; opacity:0; transform: translateY(-6px); transition: opacity 240ms ease, transform 240ms ease; }
.collection-card:hover .card-action { opacity:1; transform: translateY(0); }

/* Add Media button in card */
.card-add-media {
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(37,99,235,0.9);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  transition: background-color 200ms, transform 200ms;
  box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}
.card-add-media:hover { background:rgba(30,64,175,0.95); transform: scale(1.08); }

/* Header buttons and CTA styles (inspired by Example project) */
.icon-btn {
  padding:8px;
  border-radius:8px;
  background:#fff;
  border:1px solid #e6e6e6;
  cursor:pointer;
  transition: background-color .18s ease, transform .12s ease;
}
.icon-btn:hover { background:#f5f7f9; transform:translateY(-1px); }

/* Add button styling */
.collection-add-btn:hover {
  background:#D1D5DB !important;
  transform: scale(1.05);
}


/* Dropdown menu styling */
.add-dropdown-menu {
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.add-dropdown-option:hover {
  background:#F3F4F6 !important;
}

/* Media Add Panel Modal */
.media-add-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}
.media-add-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.media-add-panel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.media-add-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}
.media-add-panel-body {
  padding: 24px;
}
.media-add-panel-close:hover {
  background: #E5E7EB !important;
}

/* Drop zone styling */
.drop-zone {
  position: relative;
}
.drop-zone:hover {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
}
.drop-zone.drag-over {
  border-color: #2563EB !important;
  background: #DBEAFE !important;
  transform: scale(1.02);
}

.primary-btn {
  display:inline-flex;
  gap:8px;
  padding:10px 16px;
  background:#2563eb;
  color:#fff;
  border-radius:12px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
  border: none;
  font-weight:600;
}
.primary-btn:hover { background:#1e40af; transform:translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,0.14); }

/* Stats cards */
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.stat-card { background:#fff; border-radius:12px; padding:12px; box-shadow: 0 6px 18px rgba(15,15,15,0.03); border:1px solid #f1f3f5; }
.stat-label { color:#6b7280; font-size:13px; margin-bottom:6px }
.stat-value { font-size:18px; font-weight:700; color:#111827 }

/* Add new collection CTA (dashed) - map to .add-collection-cta if present */
.add-collection-cta { width:100%; display:block; min-width:300px; padding:24px; border-radius:20px; border:2px dashed #d1d5db; background:#fff; transition: border-color .25s, background-color .25s; }
.add-collection-cta:hover { border-color:#60a5fa; background: rgba(59,130,246,0.04); }

/* group-hover helpers (for nested icon color changes) */
.group-hover-icon { transition: background-color .18s, color .18s; }
.group:hover .group-hover-icon { background:#bfdbfe; color:#2563eb; }

/* Individual card styling */
.collection-card { flex:1; min-width:200px; cursor:pointer; position:relative; }
.collection-page-card {
  /* Dimensions set by masonry-grid.js based on aspect ratio */
  width: 280px;
  height: auto;
  flex: 0 0 280px;
  overflow: hidden;
}

/* Landscape and portrait card dimensions are set dynamically via inline styles 
   in JavaScript based on detected aspect ratio (16:9, 4:3, etc.) */

/* Square cards (approximately 1:1) */
.collection-page-card.card-square {
  width: 288px;
  height: 288px;
  flex: 0 0 288px;
}
.card-background {
  position:relative;
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background:var(--color-muted-surface);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Bottom gradient overlay for card (from example/card design) */
.card-background::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
  z-index: 5;
  pointer-events: none;
}

/* Hover gradient border effect - direction controlled by mouse position via JS */
.collection-card {
  --gradient-angle: 135deg;
}

.collection-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(var(--gradient-angle), #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.collection-card:hover::before {
  opacity: 1;
}

.collection-card .card-background {
  position: relative;
  z-index: 1;
}

/* Card icon base styles - positioning handled by .card-bottom-bar */
.card-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

.card-icon img,
.card-icon .card-icon-url-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Card inner content (fills background) */
.card-inner { 
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Text card preview (notebook content snippet) - default light text for light cards */
.card-text-preview {
  color: #1f2937;
}

.mesh-card-icon {
  width:60%;
  height:60%;
  border-radius:18px;
  background:linear-gradient(145deg, #1f1f2b 0%, #36364a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 12px rgba(255,255,255,0.08);
}
.mesh-card-icon svg {
  width:60%;
  height:60%;
  fill:none;
  stroke:#e5e7ff;
  stroke-width:1.8px;
}

/* Card bottom bar - container for title and icon */
.card-bottom-bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* Enable pointer events on title within bottom bar */
.card-bottom-bar .card-label-title {
  pointer-events: auto !important;
}

/* Full opacity on card hover */
.collection-card:hover .card-bottom-bar {
  opacity: 1;
}

/* Card title in bottom bar */
.card-bottom-bar .card-label-title {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  line-height: 24px;
  font-family: var(--font-family);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Card title input for editing */
.card-bottom-bar .card-label-title-input {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  line-height: 24px;
  font-family: var(--font-family);
  text-align: left;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  opacity: 1;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  pointer-events: auto !important;
}

/* Show title on card hover */
.collection-card:hover .card-bottom-bar .card-label-title {
  opacity: 1;
}

/* Card icon in bottom bar */
.card-bottom-bar .card-icon {
  position: static;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.card-bottom-bar .card-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

/* When card is expanded (overlay/modal) */
.collection-card.expanded {
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:9999 !important;
  background:rgba(0,0,0,0.7);
  flex:none;
  min-width:100%;
  cursor:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Prevent hover transform when expanded */
.collection-card.expanded:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Disable gradient border effect when expanded */
.collection-card.expanded::before {
  display: none;
}

/* ===== Expanded Modals ===== */
/* Expanded card background (modal container) */.collection-card.expanded .card-background {
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 64px);
  max-height: calc(100vh - 64px);
  min-width: 320px;
  min-height: 240px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* Remove dark gradient overlay when card is expanded */
.collection-card.expanded .card-background::before {
  display: none;
}

/* Expanded card inner should fill the modal */
.collection-card.expanded .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  top: auto;
  left: auto;
}

/* Hide any thumbnail images when card is expanded (editor is shown) */
.collection-card.expanded .card-inner img,
.collection-card.expanded .card-background img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Expanded media modal layout */
.expanded-media-container {
  display:flex;
  width:100%;
  height:100%;
  gap:0;
  align-items:stretch;
}

.expanded-resize-handle {
  position:absolute;
  right:16px;
  bottom:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#f5f5f5;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  cursor:nwse-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#555;
  transition:background 0.2s;
}
.expanded-resize-handle:hover {
  background:#e2e2e2;
}

/* ===== Media Modal - Left Side (Image Thumbnail) ===== */
.expanded-media-left {
  /* left(media) side: occupy majority of the panel but leave room for notes */
  flex: 0 0 60%;
  max-width: 65%;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
}

.mesh-viewer-canvas {
  width:100%;
  height:100%;
  position:relative;
  background:#0f1116;
}
.mesh-viewer-canvas canvas {
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Image fills the left panel with natural aspect ratio preservation */
.expanded-media-left img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Media Modal - Right Side (Notes Textarea) ===== */
.expanded-media-right {
  /* notes side takes remaining space and shows a light paper background */
  flex:1 1 auto;
  padding:30px;
  display:flex;
  flex-direction:column;
  position:relative;
  background: #efefef;
  min-width:260px;
  border-top-right-radius:20px;
  border-bottom-right-radius:20px;
}

/* Title in media modal right panel */
.expanded-media-title {
  font-size:24px;
  font-weight:700;
  color:#333;
  margin-bottom:30px;
}

/* Label for notes textarea */
.expanded-media-notes-label {
  font-size:14px;
  font-weight:600;
  color:#666;
  margin-bottom:12px;
}

/* Textarea with paper-line background (visual note-taking aesthetic) */
.expanded-media-notes {
  /* make textarea occupy remaining vertical space reliably */
  display:block;
  width:100%;
  box-sizing:border-box;
  border:0;
  padding:12px 8px 12px 8px;
  font-size:14px;
  color:#222;
  resize:none;
  outline:none;
  line-height:1.8;
  background-color: transparent;
  flex: 1 1 auto;
  min-height:0; /* allow flex child to shrink properly */
  overflow:auto;
  /* subtle paper lines */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), rgba(0,0,0,0.04) calc(1.6em - 1px), rgba(0,0,0,0.04) 1.6em);
  background-size: 100% 1.6em;
  background-position: left top;
  background-repeat: repeat-y;
}

/* Placeholder text color for notes */
.expanded-media-notes::placeholder {
  color:#bbb;
}

/* Close button in media modal (top-right corner) */
.expanded-media-close {
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  background:#f0f0f0;
  border:none;
  border-radius:50%;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  transition:background 0.2s;
}

.expanded-media-close:hover {
  background:#e0e0e0;
}

/* Expanded code editor modal layout (matches provided mock) */
.expanded-code-container {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  align-items:stretch;
}

/* ===== Code Editor Modal - Dark Editor Area ===== */
.expanded-code-editor {
  /* dark editor area */
  flex:1 1 auto;
  background:#1e1e2e;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  overflow:hidden;
  display:flex;
}

/* ===== Code Editor Modal - Light Footer Bar ===== */
.expanded-code-footer {
  /* light footer bar with title and close */
  flex:0 0 64px;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.06);
}

/* Title in code editor footer */
.expanded-code-title {
  font-size:18px;
  font-weight:600;
  color:#222;
}

/* Close button in code editor footer (bottom-right) */
.expanded-code-close {
  width:40px;
  height:40px;
  border-radius:50%;
  background:#efefef;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  font-size:18px;
  cursor:pointer;
  color:#444;
}

.expanded-code-close:hover { background:#e0e0e0 }

/* Ensure CodeMirror fills its container and applies dark theme */
.expanded-code-editor .CodeMirror { height:100% !important; width:100% !important; }

/* Hide the small top-left card icon when the code card is expanded */
#card-code.expanded .card-icon { display:none !important; }

/* Dark background for collapsed code card */
#box-code:not(.expanded) { background:#1e1e2e; }
#box-code:not(.expanded) .box-label { color:#fff; }

/* Code card inner should not have gradient background - rely on card component */
.collection-card[data-type="code"] .card-inner {
  background: transparent !important;
}

/* Drag and drop states */
.dragging { opacity:0.5; }
.drag-over { background-color:#e8f4f8 !important; border:2px solid #0d6efd; }

/* ===== Component Utilities ===== */
/* Collection box label and inner content */
.collection-box .box-label { font-weight:600; margin-bottom:8px }
.collection-box .box-inner { flex:1; background:transparent; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.collection-box .CodeMirror { height:100%; }

/* Image/video add button (large plus in center) */
.content-add-button { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.add-image-btn { width:64px; height:64px; border-radius:50%; background:var(--plus-btn-bg); border:none; font-size:28px; font-weight:700; cursor:pointer; display:grid; place-items:center; padding:0; }
.add-image-btn:hover { background:var(--plus-btn-hover); }

/* ===== Media Preview & Overlay ===== */
/* Image preview in card */
.image-preview { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }

/* Media thumbnail and fullscreen overlay */
.media-thumb { width: var(--media-thumb-width); height: var(--media-thumb-height); object-fit:cover; border-radius:8px; cursor:pointer; display:block; }
.media-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:2000; }
.media-overlay img { max-width:90%; max-height:90%; border-radius:6px; }

/* Play overlay for video thumbnails inside cards */
.video-play-overlay {
  position: absolute;
  width:72px;
  height:72px;
  border-radius:50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index:11;
  pointer-events:none;
}

.video-thumb { display:block; }

/* ===== URL Input Form (Add Media) ===== */
/* Container for URL input modal form */
.image-url-form { display:flex; flex-direction:column; gap:12px; padding:12px; width:100%; }
/* Input field for media URL */
.image-url-form input { padding:8px 12px; border:1px solid #ccc; border-radius:8px; font-size:14px; }
/* Button group layout */
.image-url-form .btn-group { display:flex; gap:8px; }
/* Base button styling */
.image-url-form button { padding:8px 16px; border:none; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; }
/* Add/submit button (blue primary) */
.image-url-form .btn-add { background:#0d6efd; color:white; }
.image-url-form .btn-add:hover { background:#0b5ed7; }
/* Cancel button (light gray) */
.image-url-form .btn-cancel { background:#e9ecef; color:#333; }
.image-url-form .btn-cancel:hover { background:#dee2e6; }

/* ===============================================
   MODERN HOME PAGE DESIGN (MediaCard Style)
   =============================================== */

/* Background decoration with animated blobs */
.bg-decoration {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(60px);
  opacity: 0.3;
  animation: blob 7s infinite;
}

.blob-1 {
  top: -160px;
  right: -160px;
  background: #c084fc;
  animation-delay: 0s;
}

.blob-2 {
  bottom: -160px;
  left: -160px;
  background: #93c5fd;
  animation-delay: 2s;
}

.blob-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f9a8d4;
  animation-delay: 4s;
}

@keyframes blob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* Main container */
body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #ffffff, #f1f5f9);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.main-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
  z-index: 1;
}

/* Header Section */
.header-section {
  margin-bottom: 40px;
}

.header-content {
  margin-bottom: 24px;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.header-icon {
  padding: 8px;
  background: linear-gradient(to bottom right, #8b5cf6, #7c3aed);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-icon svg {
  color: white;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  margin-left: 56px;
}

/* Search Section */
.search-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-bar {
  flex: 1;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.search-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.filter-button,
.layout-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-button:hover,
.layout-button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.layout-button {
  padding: 14px;
}

/* Add Collection Button (Centered Circular) */
.add-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.add-collection-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #7c3aed, #6d28d9);
  color: white;
  border: none;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.add-collection-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.add-collection-btn:active {
  transform: scale(1.05);
}

/* Collections Grid (Responsive) */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .collections-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Media Card Styles */
.media-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.media-card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #111827;
}

.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.media-card:hover .media-card-img {
  transform: scale(1.1) rotate(1deg);
}

/* Placeholder gradient for collections without images */
.media-card-placeholder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Dark gradient overlay */
.media-card-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.4), transparent, rgba(0,0,0,0.4));
  opacity: 0.6;
}

/* Media type badges (top-left) */
.media-card-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

.media-type-badge {
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.media-card:hover .media-type-badge {
  background: rgba(0, 0, 0, 0.7);
}

/* Bottom info with gradient background */
.media-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  z-index: 2;
}

.media-card-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0 0 4px 0;
}

.media-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* Three-dot menu button (positioned absolutely) */
.media-card-menu {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}

.media-card-menu:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Stats Dashboard */
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .stats-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-dashboard {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-card-label {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-purple {
  background: linear-gradient(to bottom right, #ede9fe, #ddd6fe);
  color: #7c3aed;
}

.icon-blue {
  background: linear-gradient(to bottom right, #dbeafe, #bfdbfe);
  color: #2563eb;
}

.icon-pink {
  background: linear-gradient(to bottom right, #fce7f3, #fbcfe8);
  color: #db2777;
}

.icon-orange {
  background: linear-gradient(to bottom right, #fed7aa, #fdba74);
  color: #ea580c;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.stat-card-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.bar-purple {
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
}

.bar-blue {
  background: linear-gradient(to right, #3b82f6, #2563eb);
}

.bar-pink {
  background: linear-gradient(to right, #ec4899, #db2777);
}

.bar-orange {
  background: linear-gradient(to right, #f97316, #ea580c);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .main-container {
    padding: 24px 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .page-subtitle {
    margin-left: 0;
    margin-top: 4px;
  }

  .header-title-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-section {
    flex-direction: column;
  }

  .filter-button,
  .layout-button {
    width: 100%;
    justify-content: center;
  }

  .collections-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================================
   DARK MONOCHROMATIC THEME (Home Page)
   =============================================== */

body.dark-theme {
  background: #212121 !important;
  min-height: 100vh;
  margin: 0;
  display: flex;
  /* Avoid stretching the main column to viewport height when content is taller — that caused
     double vertical scrollbars (inner + document) until layout heights caught up. */
  align-items: flex-start;
}

body.dark-theme .bg-decoration {
  display: none;
}

/* Left Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 100vh;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 16px;
  z-index: 100;
}

/* Sidebar Logo (legacy) */
.sidebar-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}

/* Sidebar Avatar Dropdown */
.sidebar-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d4d;
  border: 1px solid rgba(190, 219, 255, 0.5);
  box-shadow: 0px 0px 0px 1px rgba(190, 219, 255, 0.5), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  overflow: visible;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-avatar-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

.sidebar-avatar-wrap:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 0px 2px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.sidebar-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.sidebar-avatar-img.has-picture {
  object-fit: cover;
}

.sidebar-avatar-wrap:hover .sidebar-avatar-img {
  opacity: 0.95;
}

.sidebar-avatar-chevron {
  position: absolute;
  left: 21px;
  bottom: -2px;
  right: -2px;
  width: 23px;
  height: 23px;
  color: rgba(247, 247, 247, 1);
  pointer-events: none;
  transition: transform 0.2s ease;
  text-align: center;
  flex-shrink: 0;
  z-index: 2;
}

.sidebar-avatar-wrap.open .sidebar-avatar-chevron {
  transform: rotate(180deg);
}

.sidebar-avatar-dropdown {
  display: none;
  position: absolute;
  left: 62px;
  top: 0;
  min-width: 190px;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 6px 0;
  z-index: 1000;
  overflow: hidden;
}

.sidebar-avatar-dropdown.show {
  display: block;
}

.sidebar-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #d1d5db;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.sidebar-avatar-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-avatar-dropdown-item svg {
  flex-shrink: 0;
}

.sidebar-avatar-dropdown-toggle-row {
  cursor: pointer;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
}

.sidebar-avatar-dropdown-toggle-row:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Sidebar icon extends btn-icon base class */
.sidebar-icon {
  /* Inherits from .btn-icon - apply both classes in HTML: class="btn-icon sidebar-icon" */
  /* Or use standalone with these overrides: */
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d4d;
  border: 1px solid rgba(190, 219, 255, 0.5);
  box-shadow: 0px 0px 0px 1px rgba(190, 219, 255, 0.5), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.5;
}

.sidebar-icon:hover {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0px 0px 0px 2px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.sidebar-icon.active {
  opacity: 1;
}

.sidebar-icon.active:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 0px 2px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}

/* Main Content Wrapper */
.main-wrapper {
  flex: 1;
  margin-left: 72px;
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  min-height: fit-content; /* Size to fit all content */
  height: auto;
  /* Document scrolls (body.dark-theme uses align-items: flex-start); avoid a second scrollbar here */
  overflow-x: hidden;
  overflow-y: visible;
}

/* Dark Theme Header */
body.dark-theme .header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-to-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s;
}

.back-to-home-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.back-to-home-btn svg {
  width: 20px;
  height: 20px;
}

body.dark-theme .user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .user-name {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logout button extends btn-ghost base class */
.logout-btn {
  /* Inherits from .btn-ghost - can apply class="btn-ghost logout-btn" in HTML */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Pitara Logo in Header */
.pitara-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.pitara-header-logo {
  height: 32px;
  width: auto;
}

/* Dark Theme Search */
body.dark-theme .search-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

body.dark-theme .search-bar {
  flex: 1;
  position: relative;
}

body.dark-theme .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}

body.dark-theme .search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 15px;
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
}

body.dark-theme .search-input::placeholder {
  color: #6b7280;
}

body.dark-theme .search-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  background: #333333;
}

body.dark-theme .filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-theme .filter-button span {
  display: none;
}

body.dark-theme .filter-button:hover {
  background: #333333;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Dark Theme Collections Grid */
body.dark-theme .collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
  flex: 1;
  margin-bottom: 24px;
  min-height: 0;
}

/* Dark Theme Collection Card */
body.dark-theme .home-collection-card {
  --gradient-angle: 135deg;
  aspect-ratio: 4/3;
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #2d2d2d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Rainbow gradient border effect for home collection cards */
body.dark-theme .home-collection-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(var(--gradient-angle), #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body.dark-theme .home-collection-card:hover::before {
  opacity: 1;
}

/* Ensure card content is above the gradient border */
body.dark-theme .home-collection-card > * {
  position: relative;
  z-index: 1;
}

/* Inner container to clip content and maintain rounded corners */
body.dark-theme .home-collection-card .card-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #2d2d2d;
  z-index: 1;
}

body.dark-theme .home-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

body.dark-theme .collection-preview-grid {
  background: #2d2d2d;
}

body.dark-theme .collection-preview-item {
  background: #3d3d3d;
}

body.dark-theme .collection-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.65) 60%, transparent 100%);
  padding: 20px;
  z-index: 2;
}

body.dark-theme .collection-card-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

body.dark-theme .collection-card-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

body.dark-theme .collection-card-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Dark Theme Add Collection Card */
body.dark-theme .home-add-card {
  aspect-ratio: 4/3;
  border-radius: 16px;
  background: #3d3d3d;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-theme .home-add-card:hover {
  background: #4d4d4d;
}

body.dark-theme .home-add-plus {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #5d5d5d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 24px;
  font-weight: 300;
}

body.dark-theme .home-add-label {
  font-size: 14px;
  color: #9ca3af;
}

/* Dark Theme Collection Card Menu */
body.dark-theme .collection-card-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

body.dark-theme .collection-card-menu:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

body.dark-theme .collection-menu-dropdown {
  background: #3d3d3d;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-theme .collection-menu-item {
  color: #e5e7eb;
}

body.dark-theme .collection-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .collection-menu-item.delete {
  color: #f87171;
}

body.dark-theme .collection-menu-item.delete:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Dark Theme Stats Bar */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 32px; /* Match filter tabs spacing */
  flex-shrink: 0; /* Prevent stats bar from shrinking */
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 43px;
  padding: 0 20px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #9ca3af;
  font-size: 14px;
}

.stat-pill-label {
  color: #6b7280;
}

.stat-pill-value {
  color: #ffffff;
  font-weight: 600;
}

.stat-pill.share-with-you-btn {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.invitation-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: badgePulse 0.3s ease-out;
}

.invitation-badge.hidden {
  display: none;
}

@keyframes badgePulse {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.stat-pill.share-with-you-btn:hover {
  background: #3d3d3d;
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.stat-pill.share-with-you-btn.active {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.5);
  color: #60a5fa;
}

.stat-pill.share-with-you-btn.active .stat-pill-label,
.stat-pill.share-with-you-btn.active span {
  color: #60a5fa;
}

.stat-pill.share-with-you-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Back to collections button in shared view */
.stat-pill.back-to-collections-btn {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-pill.back-to-collections-btn:hover {
  background: #3d3d3d;
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.stat-pill.back-to-collections-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Shared collections label pill */
.stat-pill.shared-label-pill {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
}

.stat-pill.shared-label-pill .stat-pill-label {
  color: #60a5fa;
}

.stat-pill.shared-label-pill svg {
  color: #60a5fa;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Responsive for dark theme */
@media (max-width: 768px) {
  .sidebar {
    width: 56px;
    padding: 16px 0;
  }

  .sidebar-icon {
    width: 40px;
    height: 40px;
  }

  .sidebar-logo {
    width: 24px;
    max-width: 24px;
    max-height: 24px;
  }

  .sidebar-avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .sidebar-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .main-wrapper {
    margin-left: 56px;
    width: calc(100% - 56px);
    padding: 16px 20px;
    box-sizing: border-box;
  }

  body.dark-theme .collections-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stat-pill {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ===== Collection Page Dark Theme ===== */

/* Collection Page Main Content */
.collection-main-wrapper {
  margin-left: 72px;
  flex: 1;
  min-width: 0;
  width: calc(100% - 72px);
  padding: 24px 32px 48px 32px;
  min-height: 100vh;
  background: #2a2929;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Dark theme card styling for collection page */
.collection-main-wrapper .collection-card.collection-page-card .card-background {
  background: linear-gradient(180deg, rgba(61, 61, 61, 1) 0%, rgba(33, 33, 33, 1) 100%);
  box-shadow: none;
}

.collection-main-wrapper .collection-card.collection-page-card .card-background::before {
  background: linear-gradient(rgba(0, 0, 0, 0) 31.3%, rgba(0, 0, 0, 0.2) 53.4%, rgba(0, 0, 0, 0.8) 100%);
}

.collection-main-wrapper .collection-card.collection-page-card .card-label-title {
  color: #ffffff;
  font-size: 18px;
  font-family: "Arimo", sans-serif;
  line-height: 27px;
  text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}

.collection-main-wrapper .collection-card.collection-page-card .card-icon {
  color: #ffffff;
  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.15));
}

.collection-main-wrapper .collection-card.collection-page-card .card-icon svg {
  stroke: #ffffff;
}

.collection-main-wrapper .collection-card.collection-page-card .card-icon img,
.collection-main-wrapper .collection-card.collection-page-card .card-icon .card-icon-url-img {
  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.15));
}

.collection-main-wrapper .collection-card.collection-page-card .card-text-preview {
  color: #e5e7eb;
}

/* Collection Header */
.collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-bottom: 24px;
}

.collection-header-left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  min-width: 0;
}

/* Search bar inside header - next to title */
.collection-header-search {
  flex: 1;
  max-width: 850px;
  min-width: 120px;
  margin-right: 24px;
}

.collection-header-search .collection-search-input {
  height: 48px;
}

.collection-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d3d;
  text-decoration: none;
  color: #d1d5dc;
  transition: all 0.2s ease;
}

.collection-back-btn:hover {
  background: #4d4d4d;
  color: #ffffff;
}

.collection-back-btn svg {
  width: 20px;
  height: 20px;
}

.collection-title-dark {
  margin: 0;
  font-size: 24px;
  font-family: "Arimo", sans-serif;
  font-weight: 400;
  color: #ffffff;
  height: 48px;
  line-height: 48px;
  line-height: 36px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.collection-title-dark:hover {
  background: rgba(255, 255, 255, 0.08);
}

.collection-title-input-dark {
  font-size: 24px;
  font-family: "Arimo", sans-serif;
  font-weight: 400;
  color: #ffffff;
  background: #3d3d3d;
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 4px 12px;
  outline: none;
}

.collection-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.collection-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d3d;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.collection-share-btn:hover {
  background: #4d4d4d;
}

.collection-share-btn svg {
  width: 20px;
  height: 20px;
}

.collection-user-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0 10px;
  height: 48px;
  border-radius: 14px;
  background: #3d3d3d;
  transition: background 0.2s;
}

.collection-user-menu:hover {
  background: #4d4d4d;
}

.collection-signup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  background: #3d3d3d;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: "Arimo", sans-serif;
  transition: background 0.2s;
  white-space: nowrap;
}

.collection-signup-btn:hover {
  background: #4d4d4d;
}

.collection-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(rgba(74, 85, 101, 1) 0%, rgba(54, 65, 83, 1) 100%);
}

.collection-settings-icon {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(rgba(74, 85, 101, 1) 0%, rgba(54, 65, 83, 1) 100%);
}

.collection-settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  flex-shrink: 0;
}

.collection-settings-icon svg {
  flex-shrink: 0;
}

/* Default avatar placeholder when no image */
.collection-user-menu .avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(rgba(74, 85, 101, 1) 0%, rgba(54, 65, 83, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: 14px;
  font-weight: 600;
}

.dropdown-chevron {
  width: 16px;
  height: 16px;
  color: rgba(153, 161, 175, 1);
  transition: transform 0.2s ease;
}

.collection-user-menu.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* User Dropdown */
.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #d1d5db;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.user-dropdown-item svg {
  flex-shrink: 0;
}

/* User dropdown: Dashboard toggle row (toggle left, label right) */
.user-dropdown-toggle-row {
  cursor: default;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 14px;
  padding-right: 14px;
}
.user-dropdown-toggle-row:hover {
  background: transparent;
  color: #d1d5db;
}
.user-dropdown-toggle-switch {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.user-dropdown-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.user-dropdown-toggle-slider {
  position: absolute;
  inset: 0;
  background: #4b5563;
  border-radius: 16px;
  transition: background 0.2s;
}
.user-dropdown-toggle-slider::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.user-dropdown-toggle-switch input:checked + .user-dropdown-toggle-slider {
  background: #2563eb;
}
.user-dropdown-toggle-switch input:checked + .user-dropdown-toggle-slider::before {
  transform: translateX(4px);
}

/* AI Usage modal (collection and home) */
.usage-modal-content {
  max-width: 380px;
}
.usage-loading,
.usage-error {
  margin: 0;
  color: rgba(209, 213, 220, 0.8);
  font-size: 14px;
}
.usage-error {
  color: #f87171;
}

/* User Settings modal (BAA and other settings) */
.settings-modal-content {
  max-width: 380px;
}
.settings-modal-content-inner {
  margin: 0;
}
.settings-modal-section {
  margin-bottom: 16px;
}
/* Temporary: hide BAA compliance in User settings. Remove this rule and
   `settings-modal-section--baa-compliance` from templates to restore. */
.settings-modal-section--baa-compliance {
  display: none !important;
}
.settings-baa-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  margin: 0;
}
.settings-baa-row:has(input:disabled) {
  opacity: 0.7;
  cursor: default;
}
.settings-baa-note {
  margin: 0 0 0 0;
  padding: 8px 0 0 0;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.7);
  line-height: 1.4;
}

.usage-period {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.7);
}
.usage-bar-wrap {
  margin-bottom: 12px;
}
.usage-bar-track {
  height: 10px;
  background: rgba(61, 61, 61, 1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}
.usage-bar-wrap .usage-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.2s;
}
.usage-bar-wrap .usage-bar-fill.low {
  background: #22c55e;
}
.usage-bar-wrap .usage-bar-fill.medium {
  background: #eab308;
}
.usage-bar-wrap .usage-bar-fill.high {
  background: #ef4444;
}
.usage-numbers {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #d1d5dc;
}
.usage-tokens {
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.85);
}
.usage-categories {
  margin: 0 0 10px;
}
.usage-categories-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(209, 213, 220, 0.8);
}
.usage-categories-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(209, 213, 220, 0.88);
}
.usage-categories-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(61, 61, 61, 0.85);
}
.usage-categories-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.usage-cat-label {
  flex: 1;
  min-width: 0;
  color: rgba(209, 213, 220, 0.9);
}
.usage-cat-detail {
  flex-shrink: 0;
  max-width: 58%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(209, 213, 220, 0.78);
}
.usage-plan {
  margin: 0 0 4px;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.7);
}
.usage-remaining {
  margin: 0;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.8);
}
.usage-breakdown-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(61, 61, 61, 1);
}
.usage-breakdown-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(209, 213, 220, 0.8);
}
.usage-breakdown-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: rgba(209, 213, 220, 0.85);
  line-height: 1.5;
}
.usage-breakdown-list li {
  margin-bottom: 4px;
}
.usage-breakdown-label {
  display: inline-block;
  min-width: 120px;
}
.usage-breakdown-tokens {
  color: rgba(209, 213, 220, 0.75);
}
.usage-breakdown-cost {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.usage-pricing-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(209, 213, 220, 0.55);
}
.usage-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(209, 213, 220, 0.7);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/* Add Item Row (search moved to header) + Collapsible Dashboard */
.collection-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  position: relative;
  z-index: 5;
}

/* Dashboard toggle button (collapsed state) - matches collapse button / filter-tab style */
.collection-dashboard-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 43px;
  padding: 0 16px;
  min-width: 40px;
  background: #212121;
  border: 1px solid rgba(61, 61, 61, 1);
  border-radius: 14px;
  color: rgba(153, 161, 175, 1);
  font-size: 14px;
  font-family: "Arimo", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.collection-dashboard-toggle:hover {
  background: #2a2a2a;
  border-color: rgba(190, 219, 255, 0.5);
  color: #d1d5db;
  box-shadow: 0px 0px 2px 1px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}
.collection-dashboard-toggle .dashboard-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.collection-dashboard-toggle[aria-expanded="true"] .dashboard-chevron {
  transform: rotate(180deg);
}

/* Collapsible dashboard panel - toggle inside panel; collapsed = bar only, expanded = full content */
.collection-dashboard-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  background: #252525;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}
/* Collapsed: panel height comes from content (tab row only when tabpanels max-height 0) */
/* Dashboard disabled by user setting (toggle in user dropdown) */
.collection-dashboard-panel.dashboard-disabled {
  display: none !important;
}

.collection-dashboard-panel.collapsed {
  width: 100%;
  flex-basis: 100%;
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.collection-dashboard-panel:not(.collapsed) {
  width: 100%;
  flex-basis: 100%;
}
.collection-dashboard-panel {
  transition: none;
}

/* Old header (Dashboard button) hidden – tab row is the single header in both states */
.collection-dashboard-header {
  display: none !important;
}
/* Content (tab row + tabpanels) always visible – header = tab row in both states */
.collection-dashboard-content {
  width: 100%;
  display: block;
}
/* Tabpanels: animate expand/collapse with max-height and opacity; height transition for tab switch */
.collection-dashboard-tabpanels {
  max-height: 500px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.35s ease, height 0.35s ease;
}
/* When Ask tab is active, fix height so messages area can scroll and AI panel stays in view; no padding so ask container fits edge-to-edge */
.collection-dashboard-tabpanels:has(#dashboardPanelAsk.active) {
  height: 420px;
  padding: 0;
}
/* When Strategy tab is active, set definite height so flex children can fill it */
.collection-dashboard-tabpanels:has(#dashboardPanelStrategy.active) {
  height: 80vh;
  max-height: none;
}
/* When collapsed: tabpanels shrink to invisible (no height, no visibility) */
.collection-dashboard-panel.collapsed .collection-dashboard-tabpanels {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  margin: 0;
  min-height: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}

/* Expanded: tab row = tabs (left) + collapse button (right) */
.collection-dashboard-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  min-height: 30px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.collection-dashboard-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.collection-dashboard-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(209, 213, 220, 0.8);
  font-size: 14px;
  font-family: "Arimo", sans-serif;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}
.collection-dashboard-tab .dashboard-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.collection-dashboard-tab .dashboard-tab-icon svg {
  width: 16px;
  height: 16px;
  color: inherit;
}
.collection-dashboard-tab:hover {
  color: #d1d5dc;
}
.collection-dashboard-tab.active {
  color: #ffffff;
  border-bottom-color: #2563eb;
}
/* When collapsed: no blue bar under active tab */
.collection-dashboard-panel.collapsed .collection-dashboard-tab.active {
  border-bottom-color: transparent;
}
/* Tab row right actions: settings + expand */
.collection-dashboard-tab-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.collection-dashboard-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(153, 161, 175, 1);
  cursor: pointer;
  font-size: 13px;
  transition: color 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.collection-dashboard-export-btn:hover:not(:disabled) {
  color: rgba(190, 219, 255, 1);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.8));
}
.collection-dashboard-export-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: 2px;
}
.collection-dashboard-export-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dashboard-settings-dropdown-wrapper {
  position: relative;
}
.collection-dashboard-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(153, 161, 175, 1);
  cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.collection-dashboard-settings-btn:hover {
  color: rgba(190, 219, 255, 1);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}
.collection-dashboard-settings-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: 2px;
}
.collection-dashboard-settings-btn[aria-expanded="true"] {
  color: rgba(190, 219, 255, 1);
}
.dashboard-settings-menu {
  position: fixed;
  min-width: 180px;
  padding: 8px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: fadeIn 0.15s ease;
  /* left/top set by JS so menu is not clipped when panel is collapsed */
}
.dashboard-settings-menu-header {
  font-size: 11px;
  font-weight: 600;
  color: rgba(209, 213, 220, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Dashboard settings: same toggle as user dropdown (toggle left, label right) */
.dashboard-settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(209, 213, 220, 0.9);
  cursor: default;
  border-radius: 8px;
  transition: background 0.15s;
}
.dashboard-settings-toggle-row:hover {
  background: rgba(255, 255, 255, 0.08);
}
.dashboard-settings-toggle-row.dashboard-settings-toggle-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dashboard-settings-toggle-row.dashboard-settings-toggle-disabled .user-dropdown-toggle-switch {
  cursor: not-allowed;
}
.dashboard-settings-toggle-row.dashboard-settings-toggle-disabled span[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.dashboard-settings-toggle-row .user-dropdown-toggle-switch {
  flex-shrink: 0;
}

/* Collapse/expand button – icon only; visible in both states; chevron flips by state */
.collection-dashboard-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(153, 161, 175, 1);
  cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.collection-dashboard-collapse-btn:hover {
  color: rgba(190, 219, 255, 1);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}
.collection-dashboard-collapse-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: 2px;
}
.collection-dashboard-collapse-btn svg,
.collection-dashboard-collapse-btn .dashboard-collapse-chevron {
  width: 20px;
  height: 20px;
  color: inherit;
  transition: transform 0.2s ease;
}
/* Expanded: chevron up (collapse); collapsed: chevron down (expand) */
.collection-dashboard-collapse-btn[aria-expanded="true"] .dashboard-collapse-chevron {
  transform: rotate(0deg);
}
.collection-dashboard-collapse-btn[aria-expanded="false"] .dashboard-collapse-chevron {
  transform: rotate(180deg);
}
.collection-dashboard-tabpanels {
  padding: 20px;
  min-height: 180px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.collection-dashboard-tabpanel {
  display: none;
  min-height: 140px;
  min-width: 0;
  box-sizing: border-box;
}
.collection-dashboard-tabpanel.active {
  display: block;
}
/* Ask tab: constrain height so messages scroll and AI panel stays in view */
#dashboardPanelAsk.collection-dashboard-tabpanel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
/* Strategy tab: flex layout like Ask tab so content scrolls */
#dashboardPanelStrategy.collection-dashboard-tabpanel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
/* Strategy sub-tabs row */
.dashboard-strategy-subtabs {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.dashboard-strategy-subtab {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dashboard-strategy-subtab:hover {
  color: #d1d5dc;
  border-color: rgba(255, 255, 255, 0.15);
}
.dashboard-strategy-subtab.active {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.5);
}
.dashboard-strategy-subtab.dashboard-export-btn {
  margin-left: auto;
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.10);
  gap: 2px;
}
.dashboard-strategy-subtab.dashboard-export-btn:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
}
.dashboard-strategy-subtab.dashboard-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dashboard exporting animation — scrolling gradient on the panel background */
@keyframes dashboard-export-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.collection-dashboard-panel.dashboard-exporting {
  background:
    linear-gradient(
      90deg,
      #252525 0%,
      #252525 35%,
      rgba(59, 130, 246, 0.08) 45%,
      rgba(99, 102, 241, 0.12) 50%,
      rgba(59, 130, 246, 0.08) 55%,
      #252525 65%,
      #252525 100%
    );
  background-size: 200% 100%;
  animation: dashboard-export-shimmer 2.4s ease-in-out infinite;
}

/* Strategy content area */
.dashboard-strategy-content {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.dashboard-strategy-content::-webkit-scrollbar { width: 6px; }
.dashboard-strategy-content::-webkit-scrollbar-track { background: transparent; }
.dashboard-strategy-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Dashboard cards & overlay: transparent scrollbar track */
.dashboard-strategy-cards *,
.dashboard-derived-overlay {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.dashboard-strategy-cards *::-webkit-scrollbar,
.dashboard-derived-overlay::-webkit-scrollbar { width: 6px; }
.dashboard-strategy-cards *::-webkit-scrollbar-track,
.dashboard-derived-overlay::-webkit-scrollbar-track { background: transparent; }
.dashboard-strategy-cards *::-webkit-scrollbar-thumb,
.dashboard-derived-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Strategy avatar row (transcript toggles) */
.dashboard-strategy-avatar-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.dashboard-strategy-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--avatar-color, #6b7280);
  background: var(--avatar-color, #6b7280);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.dashboard-strategy-avatar:hover {
  transform: scale(1.1);
}
.dashboard-strategy-avatar.disabled {
  background: transparent;
  color: #6b7280;
  border-color: rgba(255, 255, 255, 0.12);
  opacity: 0.5;
}
/* Strategy transcript group */
.dashboard-strategy-transcript-group {
  margin-bottom: 16px;
}
/* Strategy waveform group (at bottom of strategy content). Header overlays waveform to save space. */
.dashboard-strategy-waveform-group {
  margin-top: 12px;
  position: relative;
}
.dashboard-strategy-transcript-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}
.dashboard-strategy-transcript-header svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6b7280;
}
/* Strategy waveform container */
.dashboard-strategy-waveform {
  display: flex;
  flex-direction: column;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}
.dashboard-strategy-waveform canvas {
  width: 100%;
  height: 48px;
  display: block;
  cursor: pointer;
}
.dashboard-strategy-waveform audio {
  height: 24px;
  max-width: 100%;
  margin-top: 4px;
}
/* Strategy grid-size control (slider in subtabs row) */
.dashboard-strategy-grid-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #6b7280;
}
.dashboard-strategy-grid-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.dashboard-strategy-grid-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca3af;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.dashboard-strategy-grid-control input[type="range"]::-webkit-slider-thumb:hover {
  background: #d1d5dc;
}
.dashboard-strategy-grid-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca3af;
  border: none;
  cursor: pointer;
}
/* Strategy cards — grid layout driven by --strategy-cols custom property */
.dashboard-strategy-cards {
  display: grid;
  grid-template-columns: repeat(var(--strategy-cols, 2), 1fr);
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}
.dashboard-strategy-cards > * {
  min-width: 0;
}
@media (max-width: 640px) {
  .dashboard-strategy-cards {
    grid-template-columns: 1fr;
  }
  .dashboard-strategy-grid-control { display: none; }
}

.collection-dashboard-placeholder {
  margin: 0;
  color: rgba(209, 213, 220, 0.6);
  font-size: 14px;
}
.collection-dashboard-placeholder.streamed-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Error message shown when streaming fails mid-response */
.stream-error {
  margin-top: 0.75em;
  padding: 0.5em;
  color: var(--color-error, #ef4444);
  font-size: 0.9em;
  border-left: 3px solid var(--color-error, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}
.collection-dashboard-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(209, 213, 220, 0.7);
  font-size: 14px;
}
.collection-dashboard-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(209, 213, 220, 0.3);
  border-radius: 50%;
  border-top-color: rgba(209, 213, 220, 0.9);
  animation: collection-dashboard-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes collection-dashboard-spin {
  to { transform: rotate(360deg); }
}
.collection-dashboard-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: rgba(209, 213, 220, 0.95);
  font-size: 14px;
  line-height: 1.5;
}
.collection-dashboard-list li {
  margin-bottom: 6px;
}
/* Action-item checkbox styling */
.dashboard-action-item-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.dashboard-action-item-label.checked .dashboard-action-text {
  text-decoration: line-through;
  opacity: 0.5;
}
.dashboard-action-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.dashboard-action-checkmark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(209, 213, 220, 0.4);
  border-radius: 4px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dashboard-action-checkbox:checked + .dashboard-action-checkmark {
  background: #3b82f6;
  border-color: #3b82f6;
}
.dashboard-action-checkbox:checked + .dashboard-action-checkmark::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}
.dashboard-action-item-label:hover .dashboard-action-checkmark {
  border-color: rgba(209, 213, 220, 0.7);
}
.dashboard-action-text {
  flex: 1;
  min-width: 0;
}
/* What's next list: restore disc bullets */
.dashboard-whats-next-list {
  list-style: disc;
  padding-left: 20px;
}

/* Refresh info - cache/digest/token breakdown */
.collection-dashboard-sources-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 12px;
  padding: 8px 0;
}
.collection-dashboard-sources-label {
  font-size: 12px;
  color: rgba(209, 213, 220, 0.7);
}
.dashboard-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(209, 213, 220, 0.85);
  cursor: pointer;
  user-select: none;
}
.dashboard-source-toggle input {
  cursor: pointer;
}

.collection-dashboard-info {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(209, 213, 220, 0.55);
}

.collection-dashboard-refresh-info {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: rgba(209, 213, 220, 0.75);
  font-size: 12px;
  line-height: 1.4;
}

/* Ask tab - AI assistant component wrapper */
.collection-dashboard-ask-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.collection-dashboard-ask-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
  overflow-x: hidden;
}

/* Legacy Ask tab (replaced by AI-assistant component) */
.collection-dashboard-ask {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.collection-dashboard-ask-input {
  flex: 1;
  min-height: 80px;
  padding: 12px 16px;
  background: #212121;
  border: 1px solid rgba(61, 61, 61, 1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-family: "Arimo", sans-serif;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.collection-dashboard-ask-input::placeholder {
  color: rgba(106, 114, 130, 1);
}
.collection-dashboard-ask-input:focus {
  border-color: rgba(99, 102, 241, 0.6);
}
.collection-dashboard-ask-send {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  background: #6366f1;
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  font-family: "Arimo", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.collection-dashboard-ask-send:hover {
  background: #5558e3;
}
.collection-dashboard-ask-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.collection-dashboard-ask-result {
  margin-top: 12px;
  padding: 12px 16px;
  background: #212121;
  border: 1px solid rgba(61, 61, 61, 1);
  border-radius: 12px;
  color: rgba(209, 213, 220, 0.95);
  font-size: 14px;
  line-height: 1.5;
}
.collection-dashboard-answer {
  white-space: pre-wrap;
  word-break: break-word;
}
/* Perplexity-style citation links */
.collection-dashboard-answer .dashboard-citation,
.collection-dashboard-answer .dashboard-citation-trigger {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  vertical-align: super;
  font-size: 0.85em;
}
.collection-dashboard-answer .dashboard-citation:hover,
.collection-dashboard-answer .dashboard-citation-trigger:hover {
  text-decoration: underline;
  color: #818cf8;
}
.collection-dashboard-answer .dashboard-citation-group {
  position: relative;
  display: inline;
}
.collection-dashboard-answer .dashboard-citation-overlay {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
  min-width: 180px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
}
.collection-dashboard-answer .dashboard-citation-overlay a {
  color: #6366f1;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}
.collection-dashboard-answer .dashboard-citation-overlay a:hover {
  text-decoration: underline;
  color: #818cf8;
}
.collection-dashboard-answer .dashboard-citation-group:hover .dashboard-citation-overlay {
  display: block;
}
.collection-dashboard-error {
  margin: 0;
  color: #f87171;
  font-size: 14px;
}

.collection-search-bar {
  width: 672px;
  max-width: 100%;
  min-width: 50px;
  position: relative;
  flex-shrink: 1;
  flex: 1; /* Allow it to grow in flex containers like search-section */
}

.collection-search-bar .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(106, 114, 130, 1);
  pointer-events: none;
  width: 20px;
  height: 20px;
}

.collection-search-input {
  width: 100%;
  height: 49px;
  padding: 12px 16px 12px 48px;
  background: #212121;
  border: 1px solid rgba(61, 61, 61, 1);
  border-radius: 14px;
  font-size: 16px;
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.collection-search-input::placeholder {
  color: rgba(106, 114, 130, 1);
}

.collection-search-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  background: #2a2a2a;
}

/* Add Item Button Wrapper */
.collection-add-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* Add Item Button - New Design */
.collection-add-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 2px 20px 2px 22px;
  background: rgb(54, 65, 83);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  z-index: 10;
}

.collection-add-item-btn:hover {
  background: rgb(64, 75, 93);
  border-color: rgba(74, 85, 101, 0.5);
}

.collection-add-item-btn.drag-over {
  background: rgb(74, 85, 103);
  border-color: rgb(99, 179, 237);
  box-shadow: 0 0 12px rgba(99, 179, 237, 0.4);
}

.collection-add-item-btn .add-item-plus-icon {
  flex-shrink: 0;
}

.collection-add-item-btn .add-item-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.collection-add-item-btn .add-item-main-text {
  font-size: 14px;
  font-family: "Arimo", sans-serif;
  color: rgb(209, 213, 220);
  line-height: 20px;
  text-align: left;
}

.collection-add-item-btn .add-item-sub-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: "Arimo", sans-serif;
  color: rgb(106, 114, 130);
  line-height: 16px;
}

.collection-add-item-btn .add-item-sub-text svg {
  flex-shrink: 0;
}

/* Animated stroke overlay for empty collections */
.add-item-stroke-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.add-item-stroke-animation path {
  transition: opacity 0.1s ease-out;
}

/* Table cell borders - zero by default; canvas table cells use .canvas-table-cell + inline borders */
td:not(.canvas-table-cell) {
  border: 0 !important;
}

/* Pasted notebook tables (desktop-app parity): the block editor stores tables
   as a .notebook-table-wrapper with inline cell borders/padding. The higher-
   specificity selectors here override the global `border:0 !important` reset
   above so a table authored on desktop renders as the same grid on web. Values
   mirror the desktop _styleTableHTML / buildMarkdownTableHtml cell style. */
.notebook-table-wrapper { overflow-x: auto; margin: 4px 0; }
.notebook-table-wrapper table { border-collapse: collapse; width: 100%; }
.notebook-table-wrapper table td,
.notebook-table-wrapper table th {
  border: 1px solid rgba(128, 128, 128, 0.4) !important;
  padding: 6px 10px !important;
  vertical-align: top;
}
.notebook-table-wrapper table th { font-weight: 600; text-align: left; }

.canvas-node-table .canvas-table-dom td.canvas-table-cell {
  box-sizing: border-box !important;
}

/* Add Dropdown */
.collection-add-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}

.collection-add-dropdown.show {
  display: block;
}

.collection-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #d1d5db;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.collection-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.collection-dropdown-item + .collection-dropdown-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Filter Tabs (Add Item button is first child, then filter tabs) */
.collection-filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  overflow: visible; /* Allow glow effects to show */
}

.collection-filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 43px;
  padding: 0 16px;
  background: #212121;
  border: 1px solid rgba(61, 61, 61, 1);
  border-radius: 14px;
  color: rgba(153, 161, 175, 1);
  font-size: 14px;
  font-family: "Arimo", sans-serif;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.collection-filter-tab:hover {
  background: #2a2a2a;
  border-color: rgba(190, 219, 255, 0.5);
  color: #d1d5db;
  box-shadow: 0px 0px 2px 1px rgba(190, 219, 255, 0.7), 0px 10px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -4px rgba(0, 0, 0, 0.15);
}

.collection-filter-tab.active {
  background: #3d3d3d;
  border-color: rgba(74, 85, 101, 1);
  color: rgba(243, 244, 246, 1);
}

.collection-filter-tab.active:hover {
  background: #3d3d3d;
  border-color: rgba(74, 85, 101, 1);
  color: rgba(243, 244, 246, 1);
  box-shadow: none;
}

.collection-filter-tab .filter-tab-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collection-filter-tab svg,
.collection-filter-tab .filter-tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* SVG inherits color from parent text via currentColor */
  color: inherit;
}

/* Icon-only mode: smaller buttons when text is hidden */
.collection-filter-tab.icon-only {
  padding: 0 12px;
  min-width: 40px;
  justify-content: center;
}

.collection-filter-tab.icon-only .filter-tab-icon-wrapper {
  margin: 0;
}

/* Transcript editor panel: tab pills + body type — aligned with desktop EventNotebookEditor (11px tab labels, 14px relaxed body / notes).
   Pill group matches desktop's `inline-flex rounded-full bg-overlay-6 p-0.5` exactly: no inter-pill gap, px-4 py-1 text-only pills. */
.transcript-tab-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  max-width: 100%;
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab {
  height: auto;
  min-height: 24px;
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  font-family: var(--font-family);
  background: transparent;
  border: none;
  color: #8b8ba0;
  box-shadow: none;
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab:hover:not(:disabled) {
  background: transparent;
  border: none;
  color: #d0d0e0; /* desktop --dt-text-heading */
  box-shadow: none;
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab.active {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab.active:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.transcript-tab-pill-group .collection-filter-tab.transcript-tab:not(:disabled) {
  cursor: pointer;
}

/* ── Note settings ("...") — port of the desktop kebab panel that sits at the
   right edge of EventNotebookEditor's tab bar. Text size, Memory, Export Doc
   and Delete note. Geometry follows desktop's `absolute right-0 top-9 z-50
   w-72 rounded-2xl` panel. */
.note-settings-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.transcript-tab-pill-group .note-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  width: 28px;
  padding: 4px 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #8b8ba0;
  cursor: pointer;
}

.transcript-tab-pill-group .note-settings-btn:hover {
  color: #d0d0e0;
}

.transcript-tab-pill-group .note-settings-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.note-settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: flex;
  width: 288px;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #2d2d3d;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  /* Desktop disables backdrop blur here and isolates the stacking context so
     the panel never picks up the tab bar's blur. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  text-align: left;
  cursor: default;
}

/* Rules separate the settings from the one-shot actions; Export and Delete
   read as a single group, so there is no rule between them. */
.note-settings-panel .note-settings-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.note-settings-font-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.note-settings-font-a {
  color: #7a7a92;
  user-select: none;
  flex-shrink: 0;
}

.note-settings-font-a.small { font-size: 10px; }
.note-settings-font-a.big { font-size: 16px; }

.note-settings-font-slider {
  flex: 1;
  min-width: 0;
  accent-color: #818cf8;
  cursor: pointer;
}

.note-settings-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #8b8ba0;
  cursor: pointer;
}

.note-settings-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.note-settings-memory-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
}

.note-settings-row-icon {
  margin-top: 2px;
  flex-shrink: 0;
  line-height: 0;
  color: #7a7a92;
}

.note-settings-row-body {
  min-width: 0;
  flex: 1;
}

.note-settings-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #d0d0e0;
}

.note-settings-sync {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}

.note-settings-memory-status {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #7a7a92;
}

.note-settings-memory-list {
  display: flex;
  max-height: 176px;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  overflow-y: auto;
}

.note-settings-memory-list:empty {
  margin-top: 0;
}

.note-settings-memory-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-settings-memory-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #d0d0e0;
}

.note-settings-memory-badge {
  margin-left: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 500;
  color: #9ca3af;
}

.note-settings-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-family: var(--font-family);
  color: #d0d0e0;
  cursor: pointer;
  transition: background 0.12s;
}

.note-settings-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.note-settings-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.note-settings-action.danger {
  color: #fb7185;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Delete-note confirm — same shape as the desktop dialog. */
.note-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.note-delete-box {
  width: calc(100% - 40px);
  max-width: 400px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #2d2d3d;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.note-delete-box h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.note-delete-box p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #9ca3af;
}

.note-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.note-delete-actions button {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-family);
  cursor: pointer;
}

.note-delete-cancel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #d0d0e0;
}

.note-delete-confirm {
  border: none;
  background: #e11d48;
  color: #ffffff;
}

.note-delete-actions button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Desktop Toggle.tsx (Figma 136-505) — keyboard focus ring */
button.pitara-toggle-switch:focus-visible {
  box-shadow: 0 0 0 2px #818cf8;
}

/* Transcript panel: single surface fill (inner sections are transparent in JS); body copy matches desktop Notes tab */
.transcript-panel {
  background: #2a2929;
  /* Desktop EventNotebookEditor notes + transcript body: Source Serif 4 (not UI sans / Arimo) */
  --tp-note-font: 'Source Serif 4', Georgia, serif;
  --tp-note-size: 14px;
  --tp-note-leading: 1.625;
  --tp-note-color: #d0d0e0; /* --dt-text-heading */
  --tp-note-muted: #6a6a80; /* --dt-text-muted */
}

.transcript-panel .transcript-panel-content,
.transcript-panel .transcript-tab-content,
.transcript-panel .transcript-panel-notes-editor,
.transcript-panel .transcript-summary-content,
.transcript-panel .transcript-script-body,
.transcript-panel .transcript-line-text,
.transcript-panel .live-transcript-text {
  font-family: var(--tp-note-font);
  font-size: var(--tp-note-size);
  line-height: var(--tp-note-leading);
  color: var(--tp-note-color);
}

/* Rich HTML in editors: keep Arimo rhythm (inline pasted faces won’t override) */
.transcript-panel .transcript-summary-content :where(p, li, ul, ol, div, span, strong, em, b, i, u, s, blockquote, a, code, pre, br),
.transcript-panel .transcript-tab-content :where(p, li, ul, ol, div, span, strong, em, b, i, u, s, blockquote, a, code, pre, br),
.transcript-panel .transcript-panel-notes-editor :where(p, li, ul, ol, div, span, strong, em, b, i, u, s, blockquote, a, br) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.transcript-panel .transcript-summary-content :where(pre, code),
.transcript-panel .transcript-tab-content :where(pre, code),
.transcript-panel .transcript-panel-notes-editor :where(pre, code) {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.875rem;
}

/*
 * Generated-summary typography, matching the desktop's `.summary-prose`
 * (apps/desktop-electron/.../globals.css) and the phone's prose.ts. One idea in
 * three places: only the title is much larger than the body, `###` is a small
 * caps LABEL rather than a third headline, and the space between sections is
 * what makes a long summary scannable. Classes are written by
 * formatSummaryMarkdownToHtml (transcript-editor.js).
 *
 * Prefixed with `.transcript-panel` so these outrank the `:where(...) {
 * font-size: inherit }` normalizer above, which is the same specificity.
 */
.transcript-panel .transcript-summary-content .tsum-h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 10px;
}
.transcript-panel .transcript-summary-content .tsum-h2 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #ffffff;
  margin: 24px 0 6px;
}
/* A label, not a headline: at body size in semibold it was indistinguishable
   from a bolded opening phrase in a bullet, which is what the model writes. */
.transcript-panel .transcript-summary-content .tsum-h3 {
  font-family: 'Arimo', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d0d0e0;
  margin: 18px 0 5px;
}
.transcript-panel .transcript-summary-content > :first-child { margin-top: 0; }
.transcript-panel .transcript-summary-content .tsum-p {
  color: #e3e3ef;
  font-weight: 300;
  margin: 0 0 8px;
}
.transcript-panel .transcript-summary-content .tsum-list {
  margin: 0 0 8px;
  padding-left: 20px;
}
.transcript-panel .transcript-summary-content .tsum-li {
  color: #e3e3ef;
  font-weight: 300;
  margin: 4px 0;
}
/* Bullets are punctuation; at body colour a column of them reads as a second
   column of text. The glyph ladder matches the phone's • ◦ –. */
.transcript-panel .transcript-summary-content .tsum-li::marker { color: #5a5a70; }
.transcript-panel .transcript-summary-content .tsum-li-1 { margin-left: 18px; list-style-type: circle; }
.transcript-panel .transcript-summary-content .tsum-li-2 { margin-left: 36px; list-style-type: square; }
.transcript-panel .transcript-summary-content ol.tsum-list .tsum-li { list-style-type: decimal; }
.transcript-panel .transcript-summary-content .tsum-quote {
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 14px;
  margin: 0 0 8px;
  color: #b0b0c8;
  font-style: italic;
}
.transcript-panel .transcript-summary-content .tsum-mark {
  background: rgba(234, 179, 8, 0.28);
  color: #ffffff;
  border-radius: 2px;
  padding: 0 2px;
}
/* A section with nothing under it — heading dulled along with its line, or the
   whole page reads as content that failed to load. */
.transcript-panel .transcript-summary-content .tsum-empty {
  color: #6a6a80;
  font-style: italic;
}
.transcript-panel .transcript-summary-content .tsum-empty-heading { color: #6a6a80; }
/* The closing "Not covered" line is a footnote about the whole summary. */
.transcript-panel .transcript-summary-content .tsum-footnote {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #6a6a80;
  font-style: italic;
}

.transcript-summary-view {
  display: flex;
  min-height: 100%;
  width: 100%;
  flex-direction: column;
}

.transcript-summary-empty {
  display: flex;
  min-height: 100%;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px 160px;
  text-align: center;
}

.transcript-summary-empty-title {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}

.transcript-summary-empty-subtitle {
  margin: 0;
  font-size: 11px;
  color: #6b7280;
}

.transcript-summary-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  overflow: auto;
  padding: 20px 24px 160px;
}

.transcript-summary-status-card,
.transcript-summary-error-card,
.transcript-summary-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 16px;
}

.transcript-summary-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9ca3af;
  font-size: 12px;
}

.transcript-summary-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #818cf8;
  border-radius: 999px;
  animation: transcript-summary-spin 0.9s linear infinite;
}

.transcript-summary-error-title {
  margin: 0;
  color: #f87171;
  font-size: 12px;
}

.transcript-summary-error-copy {
  margin: 4px 0 0;
  color: #9ca3af;
  font-size: 11px;
}

.transcript-summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-family, 'Arimo', Arial, sans-serif);
}

.transcript-summary-card-kicker {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.transcript-summary-card-rule {
  margin-top: 2px;
  font-size: 10px;
  color: #9ca3af;
}

.transcript-summary-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.transcript-summary-card-action {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: transparent;
  color: #d1d5db;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.transcript-summary-card-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.transcript-summary-card-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.transcript-summary-card-action.danger {
  color: #fca5a5;
}

.transcript-summary-inline-error {
  margin-bottom: 8px;
  color: #f87171;
  font-size: 11px;
}

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

/* Transcript panel title — same treatment as desktop notebook title (serif, italic, text-2xl, placeholder = --dt-text-dimmed) */
.transcript-header-title-input::placeholder {
  color: #5a5a70;
  font-style: italic;
}

/* Collection Cards Grid (Dark Theme) - Masonry Layout */
.collection-cards-grid-dark {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  /* Fallback flex layout before masonry is initialized */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

/* Cards inside the masonry grid - initial state with flex layout fallback */
.collection-cards-grid-dark .collection-card.collection-page-card {
  width: 280px;
  box-sizing: border-box;
  transition: transform 0.26s ease, box-shadow 0.26s ease, opacity 0.3s ease;
  flex-shrink: 0;
}

/* Loading placeholders (collection grid) */
.collection-cards-grid-dark .collection-card.collection-page-card.collection-card-skeleton {
  height: 210px;
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
  animation: collection-card-skeleton-enter 0.55s ease-out both;
}

.collection-card.collection-page-card.collection-card-skeleton::before {
  display: none;
}

.collection-card-skeleton-inner {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.collection-card-skeleton-shimmer {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 60%,
    transparent 100%
  );
  animation: collection-card-skeleton-shimmer 1.35s ease-in-out infinite;
}

.collection-card-skeleton-bars {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.collection-card-skeleton-bar {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  animation: collection-card-skeleton-pulse 1.1s ease-in-out infinite;
}

.collection-card-skeleton-bar:last-child {
  width: 55%;
  animation-delay: 0.15s;
}

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

@keyframes collection-card-skeleton-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes collection-card-skeleton-enter {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 0.92;
    transform: translateY(0);
  }
}

/* Once masonry-grid.js adds the container class, switch to absolute positioning */
.collection-cards-grid-dark.masonry-grid-container {
  display: block;
  position: relative;
  margin-top: 32px;
  clear: both;
}

.collection-cards-grid-dark.masonry-grid-container .collection-card.collection-page-card {
  position: absolute;
  transition: transform 0.26s ease, box-shadow 0.26s ease, left 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.collection-cards-grid-dark .collection-card.collection-page-card.dragging {
  transition: none;
  transform: scale(1.02);
  z-index: 1000;
}

/* Collection Card (Dark Theme - Figma Style) */
.collection-card-dark {
  --gradient-angle: 135deg;
  position: relative;
  width: 288px;
  height: 216px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Rainbow gradient border effect */
.collection-card-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(var(--gradient-angle), #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.collection-card-dark:hover::before {
  opacity: 1;
}

.collection-card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Canvas "Import from collection" picker — same gradient stroke as collection page; no scale (avoids width jump) */
.canvas-import-picker-card {
  position: relative;
  width: 100%;
  --gradient-angle: 135deg;
  background: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.canvas-import-picker-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(var(--gradient-angle), #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.canvas-import-picker-card:hover::before {
  opacity: 1;
}
.canvas-import-picker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.canvas-import-picker-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #334155;
}

/* Card inner content */
.collection-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(rgba(61, 61, 61, 1) 0%, rgba(33, 33, 33, 1) 100%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Card with image */
.collection-card-dark.has-image .collection-card-inner {
  background: rgb(3, 7, 18);
}

.collection-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card type icon (for non-image cards like code) */
.collection-card-type-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(74, 85, 101, 1);
}

.collection-card-type-icon svg {
  width: 64px;
  height: 64px;
}

/* Card gradient overlay */
/* Collection card overlay - positioned at bottom */
.collection-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  padding: 16px;
  color: white;
  z-index: 2;
  pointer-events: none;
}

/* Card bottom content */
.collection-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.collection-card-title {
  font-size: 18px;
  font-family: "Arimo", sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 27px;
  text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  margin-right: 8px;
}

/* AI indicator icon */
.collection-card-ai-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 1);
  flex-shrink: 0;
  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.15));
}

/* ===== Reusable Modal Styles ===== */
/* Standard modal overlay - used by all modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

/* Standard modal container - base styles */
.modal-container {
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Note: fadeIn and slideUp animations are already defined earlier in this file */

/* Collection Modal Styles */
.collection-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.collection-modal-overlay.show {
  display: flex;
}

.collection-modal-content {
  background: #2d2d2d;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.collection-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.collection-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

/* Legacy: image-preview-modal-close, close-modal-btn - use .close-btn instead */

.collection-modal-body .form-group {
  margin-bottom: 16px;
}

.collection-modal-body .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #d1d5db;
}

.collection-modal-input {
  width: 100%;
  padding: 12px;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s;
}

.collection-modal-input:focus {
  border-color: #2563eb;
}

.collection-modal-input::placeholder {
  color: #6b7280;
}

/* Single column card layout - prevent overlapping */
@media (max-width: 600px) and (min-width: 320px) {
  .collection-search-row {
    margin-bottom: 48px;
  }

  .collection-cards-grid-dark {
    margin-top: 24px;
    gap: 20px;
  }

  .collection-cards-grid-dark .collection-card.collection-page-card {
    margin-bottom: 16px;
  }
}

/* Responsive for Collection Page */
@media (max-width: 768px) {
  .collection-sidebar {
    width: 56px;
    padding: 16px 0;
  }

  .collection-main-wrapper {
    margin-left: 56px;
    width: calc(100% - 56px);
    flex: 1;
    min-width: 0;
    padding: 16px 20px 32px 20px;
  }

  .collection-search-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .collection-search-bar {
    max-width: none;
    min-width: 50px;
    flex: 1 1 50px;
  }

  .collection-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
}

/* Home Squares Grid Layout */
#homeSquares {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  flex: 1 1 auto; /* Allow grid to grow and shrink within flex container */
  min-height: 0; /* Allow grid to shrink below content size if needed */
}

/* Ensure proper grid behavior on medium screens */
@media (max-width: 700px) {
  #homeSquares {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
  }
}

/* Ensure cards don't overlap */
#homeSquares .home-collection-card,
#homeSquares .home-add-card {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
}

/* Add Collection card should be visible above others */
#homeSquares .home-add-card {
  z-index: 10;
}

/* Home grid loading placeholders (match card footprint; not .home-collection-card so search/filter ignores them) */
#homeSquares .home-squares-skeleton {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
  cursor: default;
  animation: collection-card-skeleton-enter 0.55s ease-out both;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.dark-theme #homeSquares .home-squares-skeleton {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.home-squares-skeleton-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.dark-theme .home-squares-skeleton-inner {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-squares-skeleton-shimmer {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%,
    transparent 100%
  );
  animation: collection-card-skeleton-shimmer 1.35s ease-in-out infinite;
}

body.dark-theme .home-squares-skeleton-shimmer {
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 60%,
    transparent 100%
  );
}

.home-squares-skeleton-bars {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.home-squares-skeleton-bar {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.08);
  animation: collection-card-skeleton-pulse 1.1s ease-in-out infinite;
}

body.dark-theme .home-squares-skeleton-bar {
  background: rgba(255, 255, 255, 0.07);
}

.home-squares-skeleton-bar:last-child {
  width: 55%;
  animation-delay: 0.15s;
}

/* Responsive layout for narrow screens - single column */
@media (max-width: 600px) and (min-width: 320px) {
  #homeSquares {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 16px;
    margin-bottom: 24px; /* Add bottom margin to prevent overlap */
  }

  #homeSquares .home-collection-card,
  #homeSquares .home-add-card {
    margin-bottom: 16px;
  }
}

/* Very narrow screens - ensure single column */
@media (max-width: 360px) {
  #homeSquares {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 12px;
  }
}

/* Responsive adjustments for homeSquares */
@media (max-width: 768px) {
  #homeSquares {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 16px;
  }
}

/* Masonry grid on mobile uses single column - handled by JS */

/* ===============================================
   AI ASSISTANT SIDEBAR - RESPONSIVE DESIGN
   =============================================== */

/* Base styles for AI Assistant Sidebar (desktop default) */
.ai-assistant-sidebar {
  position: relative;
  transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease;
}

  /* Desktop styles are set inline in JavaScript */
  /* Mobile overrides are defined below in media queries */

/* Mobile Design: Convert sidebar to full-screen overlay */
@media (max-width: 767px) {
  /* When sidebar is visible, make it full-screen overlay */
  .ai-assistant-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    z-index: 10000 !important; /* Above everything else */
    border-left: none !important;
    transform: translateX(0);
    background: #1e1e1e; /* Dark background for mobile */
  }

  /* Slide in animation when opening */
  .ai-assistant-sidebar:not([data-collapsed="true"]) {
    animation: slideInFromRight 0.3s ease-out;
  }

  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* When collapsed on mobile, hide completely */
  .ai-assistant-sidebar[data-collapsed="true"] {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }

  /* Content area adjustments for mobile */
  .ai-sidebar-content {
    padding: 16px !important; /* Reduced padding on mobile */
    gap: 16px !important;
    /* Ensure content is scrollable */
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile-specific collapsed indicator button */
  .ai-sidebar-collapsed-indicator {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    width: 56px !important; /* Larger touch target */
    height: 56px !important;
    border-radius: 50% !important; /* Circular on mobile */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999 !important; /* Below sidebar when open, above when closed */
    opacity: 1 !important; /* Always visible on mobile when collapsed */
    background: #2563eb !important; /* More prominent color */
    border: none !important;
  }

  /* Floating action button style for mobile */
  .ai-sidebar-collapsed-indicator:hover,
  .ai-sidebar-collapsed-indicator:active {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5) !important;
    background: #1d4ed8 !important;
  }

  /* Ensure header is properly sized on mobile */
  .ai-assistant-sidebar .ai-assistant-header {
    padding: 16px !important;
    min-height: 56px !important; /* Standard mobile header height */
  }

  /* Adjust AI panel footer for mobile */
  .ai-assistant-sidebar .ai-assistant-panel {
    padding: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Mobile input adjustments */
  .ai-assistant-sidebar .ai-assistant-input-row {
    gap: 8px !important;
  }

  .ai-assistant-sidebar textarea,
  .ai-assistant-sidebar input {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px !important;
    min-height: 44px !important; /* Touch target size */
  }

  /* Model selector adjustments for mobile */
  .ai-assistant-sidebar select {
    font-size: 14px !important;
    padding: 10px 12px !important;
    min-height: 44px !important; /* Touch target */
  }

  /* Buttons should be touch-friendly */
  .ai-assistant-sidebar button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
  }

  /* Backdrop/overlay when sidebar is open on mobile (optional) */
  .ai-assistant-sidebar::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .ai-assistant-sidebar:not([data-collapsed="true"])::before {
    opacity: 1;
  }

  /* Disable resize handle on mobile */
  .ai-assistant-sidebar .resize-handle {
    display: none !important;
  }

  /* Message bubbles adjustments for mobile */
  .ai-assistant-sidebar .ai-message {
    padding: 12px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Code blocks in messages */
  .ai-assistant-sidebar pre,
  .ai-assistant-sidebar code {
    font-size: 12px !important;
    padding: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Image in messages */
  .ai-assistant-sidebar img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }
}

/* Tablet adjustments (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .ai-assistant-sidebar {
    /* Can use slide-in panel instead of full-screen on tablet */
    width: 480px !important;
    max-width: 480px !important;
    left: auto !important;
    right: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .ai-assistant-sidebar[data-collapsed="true"] {
    transform: translateX(100%);
  }

  .ai-sidebar-collapsed-indicator {
    right: 24px !important;
    bottom: 24px !important;
  }
}

/* Small mobile devices (320px - 480px) */
@media (max-width: 480px) {
  .ai-sidebar-content {
    padding: 12px !important;
    gap: 12px !important;
  }

  .ai-assistant-sidebar .ai-assistant-header {
    padding: 12px 16px !important;
  }

  .ai-assistant-sidebar .ai-assistant-panel {
    padding: 12px !important;
  }

  /* Smaller collapsed indicator on very small screens */
  .ai-sidebar-collapsed-indicator {
    width: 48px !important;
    height: 48px !important;
    bottom: 16px !important;
    right: 16px !important;
  }

  .ai-sidebar-collapsed-indicator svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Landscape mobile orientation */
@media (max-width: 767px) and (orientation: landscape) {
  .ai-assistant-sidebar {
    /* Full width but shorter height in landscape */
    height: 100vh !important;
  }

  .ai-assistant-sidebar .ai-assistant-header {
    min-height: 48px !important;
    padding: 12px 16px !important;
  }

  .ai-sidebar-content {
    padding: 12px !important;
  }

  .ai-assistant-sidebar .ai-assistant-panel {
    padding: 12px !important;
  }
}

/* ===== Reusable Section Label Styles ===== */

/**
 * Section Label - Light weight display label
 * Used for section headers and labels that need a lightweight, prominent appearance
 * Example: "Organize board", section titles, etc.
 */
.section-label {
  font-family: "Arimo", sans-serif;
  font-size: 24px;
  font-weight: 200;
  color: #ffffff;
}

/* Dark theme variant if needed */
.section-label-dark {
  font-family: "Arimo", sans-serif;
  font-size: 24px;
  font-weight: 200;
  color: #d1d5dc;
}

/* ===== Block Editor Link Tooltip ===== */

.block-editor-link-tooltip {
  animation: linkTooltipFadeIn 0.15s ease;
}

@keyframes linkTooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes undoBlink {
  0%   { background-color: transparent; }
  15%  { background-color: rgba(59, 130, 246, 0.12); }
  100% { background-color: transparent; }
}
.undo-blink {
  animation: undoBlink 0.6s ease-out;
  border-radius: 3px;
}

.link-tooltip-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
  max-width: 220px;
}

.link-tooltip-title svg {
  color: #9ca3af;
  flex-shrink: 0;
}

.link-tooltip-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.link-tooltip-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.link-tooltip-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.link-tooltip-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.link-tooltip-open:hover {
  color: #60a5fa;
}

.link-tooltip-copy:hover {
  color: #4ade80;
}

.link-tooltip-remove:hover {
  color: #f87171;
}

/* Audio modal: center waveform in the panel */
.audio-waveform-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.audio-waveform-strip {
  /* Centered via parent's justify-content: center */
  box-sizing: border-box !important;
}
/* Allow bars wrapper to shrink to strip width so bar width is constrained by container */
.audio-waveform-bars-wrapper {
  min-width: 0 !important;
  overflow: hidden;
}

/* Comment tooltip – shared component (comment-tooltip) */
.comment-tooltip {
  background: #2E2E2E;
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 280px;
  color: #fff;
  font-size: 12px;
  font-family: var(--font-sans, "Arimo", sans-serif);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Wider variant for transcript block comment popover – overlay (portaled to body) or inline */
.transcript-comment-tooltip-overlay .comment-tooltip--wide,
.transcript-comment-icon-expanded .comment-tooltip--wide,
.comment-tooltip.comment-tooltip--wide {
  min-width: 280px;
  max-width: 420px;
  width: max-content;
  max-height: 320px;
  overflow-y: auto;
}
.comment-tooltip__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.comment-tooltip__avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FF46E3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.comment-tooltip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-tooltip__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.comment-tooltip__name {
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-tooltip__time {
  color: #AAAAAA;
  font-weight: 400;
  font-size: 12px;
  flex-shrink: 0;
}
.comment-tooltip__body {
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  padding-left: 0;
}
.comment-tooltip-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comment-tooltip-card + .comment-tooltip-card {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Transcript panel – Topics tab masonry-style grid */
/* Topics in audio order: left to right, then wrap */
.transcript-topics-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.transcript-topics-content .transcript-topic-section {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 900px) {
  .transcript-topics-content .transcript-topic-section {
    flex: 1 1 260px;
  }
}
@media (max-width: 600px) {
  .transcript-topics-content .transcript-topic-section {
    flex: 1 1 100%;
  }
}

/* Topic block transcript portion: scrollbar track has no background */
.transcript-topic-portion {
  scrollbar-color: rgba(130, 130, 130, 0.4) transparent;
  scrollbar-gutter: stable;
}
.transcript-topic-portion::-webkit-scrollbar {
  width: 8px;
}
.transcript-topic-portion::-webkit-scrollbar-track {
  background: transparent;
}
.transcript-topic-portion::-webkit-scrollbar-thumb {
  background: rgba(130, 130, 130, 0.4);
  border-radius: 4px;
}
.transcript-topic-portion::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.6);
}

/* Topic block lines container: scrollbar track has no background */
.transcript-topic-lines {
  scrollbar-color: rgba(130, 130, 130, 0.4) transparent;
}
.transcript-topic-lines::-webkit-scrollbar {
  width: 8px;
}
.transcript-topic-lines::-webkit-scrollbar-track {
  background: transparent;
}
.transcript-topic-lines::-webkit-scrollbar-thumb {
  background: rgba(130, 130, 130, 0.4);
  border-radius: 4px;
}
.transcript-topic-lines::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.6);
}

/* Transcript panel – Observation tab grid (order preserved when expanding Derived-from) */
.transcript-observations-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  grid-auto-flow: row;
}
.transcript-observations-content .transcript-observation-section {
  margin-bottom: 0;
  min-height: 0;
}
.transcript-observation-section.transcript-observation-dragging {
  opacity: 0.6;
  cursor: grabbing;
}
.transcript-observation-section.transcript-observation-dragging * {
  cursor: grabbing;
}
.transcript-observation-section.transcript-observation-drop-target {
  outline: 2px dashed var(--color-primary, #6366f1);
  outline-offset: 2px;
}
.transcript-observation-drag-handle:hover {
  color: var(--color-text, #374151);
}

/* Quote card right-click overlay – must appear above sidebar and modals */
.quote-context-menu {
  z-index: 100001 !important;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .transcript-observations-content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .transcript-observations-content {
    grid-template-columns: 1fr;
  }
}

/* Transcript panel: hidden <audio> + desktop-style playbar (see transcript-editor.js) */
.transcript-audio-playbar-btn:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

/* ===== Canvas Editor (intelligent canvas) ===== */
.canvas-editor-overlay .canvas-surface {
  cursor: grab;
}
.canvas-editor-overlay .canvas-surface:active {
  cursor: grabbing;
}

/* Allow resize/connector handles to extend outside node bounds without being clipped */
.canvas-content-wrap {
  overflow: visible;
}
.canvas-nodes {
  overflow: visible;
}

/* Canvas nodes: scrollbars use a transparent track (Firefox + WebKit) */
.canvas-editor-overlay .canvas-node,
.canvas-editor-overlay .canvas-node-content-clip {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
}
.canvas-editor-overlay .canvas-node::-webkit-scrollbar,
.canvas-editor-overlay .canvas-node-content-clip::-webkit-scrollbar,
.canvas-editor-overlay .canvas-node *::-webkit-scrollbar,
.canvas-editor-overlay .canvas-node-content-clip *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.canvas-editor-overlay .canvas-node::-webkit-scrollbar-track,
.canvas-editor-overlay .canvas-node-content-clip::-webkit-scrollbar-track,
.canvas-editor-overlay .canvas-node *::-webkit-scrollbar-track,
.canvas-editor-overlay .canvas-node-content-clip *::-webkit-scrollbar-track {
  background: transparent;
}
.canvas-editor-overlay .canvas-node::-webkit-scrollbar-thumb,
.canvas-editor-overlay .canvas-node-content-clip::-webkit-scrollbar-thumb,
.canvas-editor-overlay .canvas-node *::-webkit-scrollbar-thumb,
.canvas-editor-overlay .canvas-node-content-clip *::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}
.canvas-editor-overlay .canvas-node::-webkit-scrollbar-thumb:hover,
.canvas-editor-overlay .canvas-node-content-clip::-webkit-scrollbar-thumb:hover,
.canvas-editor-overlay .canvas-node *::-webkit-scrollbar-thumb:hover,
.canvas-editor-overlay .canvas-node-content-clip *::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

.canvas-node {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: grab;
  user-select: none;
  overflow: visible !important; /* prevent resize/connection handles from being clipped */
  box-sizing: border-box; /* inline width/height include border (matches import + sticky cards) */
}
/* When node is inside a section, only the content is clipped; selection stroke and handles stay on the node and are not clipped */
.canvas-node-content-clip {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: auto;
}
.canvas-node-content-clip.canvas-node-content-clip--import {
  display: flex;
  flex-direction: column;
}
/* Compositor layer transform handles sit just outside the stack preview; avoid clipping them. */
.canvas-node.canvas-node-compositor > .canvas-node-content-clip.canvas-node-content-clip--compositor {
  overflow: visible;
}
/* Rounded clip so img/video respect bottom corners (parent .canvas-node-import uses overflow:visible for handles) */
.canvas-import-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  align-self: stretch;
  isolation: isolate; /* stacking context so overflow + radius clip predictably */
}

/* Canvas-only image import (e.g. AI output drag): export + delete-from-canvas */
.canvas-import-image-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.canvas-node-import .canvas-import-export-img-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.canvas-node-import .canvas-import-export-img-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.95);
  border-color: #64748b;
}
.canvas-node-import .canvas-import-export-img-btn--done {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.22);
  color: #4ade80;
  cursor: default;
}
.canvas-node-import .canvas-import-export-img-btn .canvas-export-arrow-icon {
  display: block;
  width: 14px;
  height: 14px;
}
.canvas-node-import .canvas-import-delete-export-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  cursor: pointer;
  white-space: nowrap;
}
.canvas-node-import .canvas-import-delete-export-btn:hover {
  background: rgba(153, 27, 27, 0.5);
  border-color: rgba(248, 113, 113, 0.65);
}

.canvas-node.canvas-node-sticky {
  border-radius: 0;
  overflow: visible !important;
}
.canvas-node:active {
  cursor: grabbing;
}
.canvas-node.canvas-node-dragging {
  cursor: grabbing;
}
.canvas-node.canvas-node-dragging .canvas-ai-drag-bar {
  cursor: grabbing;
}
.canvas-node.selected {
  outline: 2px solid #60a5fa;
  outline-offset: 2px; /* keep selection stroke outside content so it is not clipped by inner content or border-radius */
}
.canvas-node.canvas-node-locked {
  outline: 2px dashed rgba(148, 163, 184, 0.85);
  outline-offset: 2px;
}
.canvas-node.canvas-node-locked.selected {
  outline-color: #94a3b8;
}
.canvas-node.selected .canvas-resize-handle {
  display: block;
}

/* Table: outer stroke on .canvas-table-frame-ring (above cell paint); no double outline on node */
.canvas-node-table.selected,
.canvas-node-table.canvas-node-locked {
  outline: none !important;
}
.canvas-node-table .canvas-table-grid-wrap {
  border: none !important;
}
.canvas-node-table.selected:not(.canvas-node-locked) .canvas-table-frame-ring {
  border: 2px solid #60a5fa !important;
}
.canvas-node-table.canvas-node-locked:not(.selected) .canvas-table-frame-ring {
  border: 2px dashed rgba(148, 163, 184, 0.85) !important;
}
.canvas-node-table.canvas-node-locked.selected .canvas-table-frame-ring {
  border: 2px dashed #94a3b8 !important;
}
/* Corner/edge resize sits above the frame ring */
.canvas-table-grid-wrap > .canvas-resize-handle {
  z-index: 14;
}

/* Row/column insert handles: small dots (larger circle + on hover); JS only sets left/top % */
.canvas-table-sep-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.canvas-table-sep-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  pointer-events: auto;
  background: rgba(14, 165, 233, 0.5);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.55);
  border-radius: 50%;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    min-width 0.2s ease,
    min-height 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.canvas-table-sep-handle:focus {
  outline: none;
}
.canvas-table-sep-handle:focus-visible {
  box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #0ea5e9;
}
.canvas-table-sep-col {
  top: 0;
  transform: translate(-50%, calc(-100% - 14px));
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}
.canvas-table-sep-row {
  left: 0;
  transform: translate(calc(-100% - 14px), -50%);
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}
.canvas-table-sep-handle:hover,
.canvas-table-sep-handle:focus-visible {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: #0ea5e9;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.55);
}
.canvas-table-sep-col:hover,
.canvas-table-sep-col:focus-visible {
  transform: translate(-50%, calc(-100% - 14px));
}
.canvas-table-sep-row:hover,
.canvas-table-sep-row:focus-visible {
  transform: translate(calc(-100% - 14px), -50%);
}
/* Flex-centered (parent has transform for position — absolute % centering is off) */
.canvas-table-sep-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 300;
  color: #fff;
  line-height: 0;
  pointer-events: none;
  transform: scale(0.2);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.canvas-table-sep-handle:hover .canvas-table-sep-plus,
.canvas-table-sep-handle:focus-visible .canvas-table-sep-plus {
  opacity: 1;
  transform: scale(1);
}

.canvas-resize-handle {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  box-sizing: border-box;
}
.canvas-resize-handle.corner {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #60a5fa;
  border-radius: 2px;
}
/* Mid-edge: same cap style as corners (no circular dots), sits outside the node */
.canvas-resize-handle.edge {
  background: #fff;
  border: 2px solid #60a5fa;
  border-radius: 2px;
  box-sizing: border-box;
}
.canvas-resize-handle.edge[data-handle="n"],
.canvas-resize-handle.edge[data-handle="s"] {
  width: 20px;
  height: 10px;
}
.canvas-resize-handle.edge[data-handle="e"],
.canvas-resize-handle.edge[data-handle="w"] {
  width: 10px;
  height: 20px;
}
/* 12px gap from node edge to nearest handle edge (10–15px target) */
.canvas-resize-handle[data-handle="se"] { right: -22px; bottom: -22px; cursor: nwse-resize; }
.canvas-resize-handle[data-handle="sw"] { left: -22px; bottom: -22px; cursor: nesw-resize; }
.canvas-resize-handle[data-handle="ne"] { right: -22px; top: -22px; cursor: nesw-resize; }
.canvas-resize-handle[data-handle="nw"] { left: -22px; top: -22px; cursor: nwse-resize; }
.canvas-resize-handle[data-handle="n"] { left: 50%; top: -22px; margin-left: -10px; cursor: ns-resize; }
.canvas-resize-handle[data-handle="s"] { left: 50%; bottom: -22px; margin-left: -10px; cursor: ns-resize; }
.canvas-resize-handle[data-handle="e"] { right: -22px; top: 50%; margin-top: -10px; cursor: ew-resize; }
.canvas-resize-handle[data-handle="w"] { left: -22px; top: 50%; margin-top: -10px; cursor: ew-resize; }

/* Compositor / AI preview UI uses elevated z-index; keep node resize handles on top for dragging */
.canvas-node-compositor.selected > .canvas-resize-handle,
.canvas-node-ai-prompt.selected > .canvas-resize-handle {
  z-index: 30;
}

/*
 * AI + Compositor: same outset as default handles; mid-edge grips stay centered.
 * Connector dots on w/e are nudged so they do not sit under edge resize caps.
 */
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="nw"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="nw"] {
  left: -22px;
  top: -22px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="ne"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="ne"] {
  right: -22px;
  top: -22px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="sw"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="sw"] {
  left: -22px;
  bottom: -22px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="se"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="se"] {
  right: -22px;
  bottom: -22px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="n"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="n"] {
  top: -22px;
  margin-left: -10px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="s"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="s"] {
  bottom: -22px;
  margin-left: -10px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="w"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="w"] {
  left: -22px;
  margin-top: -10px;
}
.canvas-node-ai-prompt.selected > .canvas-resize-handle[data-handle="e"],
.canvas-node-compositor.selected > .canvas-resize-handle[data-handle="e"] {
  right: -22px;
  margin-top: -10px;
}

/* e/w at top:50% matches getSidePositionInCanvas (cy). When selected, stack above resize handles (replaces old top:36% misalignment). */
.canvas-node-ai-prompt.selected > .canvas-connector-dot,
.canvas-node-compositor.selected > .canvas-connector-dot {
  z-index: 35;
}

/* Compositor: stacked west input ports + east output — dots above inner UI */
.canvas-node-compositor > .canvas-connector-dot {
  z-index: 22;
  pointer-events: auto;
}
/* Compositor filled inputs: ↑↓ reorder arrows (same drag behavior as wire “to” end) */
.canvas-compositor-port-reorder-arrow {
  opacity: 0;
  color: rgba(45, 212, 191, 0.5);
  transition: opacity 0.15s ease, color 0.12s ease;
}
.canvas-compositor-port-reorder-arrow path {
  stroke: currentColor;
}
.canvas-compositor-port-reorder-arrow:hover {
  color: rgba(45, 212, 191, 1);
}
.canvas-compositor-input-wrap--filled.canvas-compositor-port-grips-open .canvas-compositor-port-reorder-arrow,
.canvas-connecting .canvas-compositor-input-wrap--filled .canvas-compositor-port-reorder-arrow {
  opacity: 1;
}
/* Connector anchor dots: always visible; hover/selection/active states still emphasize */
.canvas-connector-dot {
  display: block;
  position: absolute;
  z-index: 6;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #2dd4bf;
  pointer-events: auto;
  cursor: crosshair;
  box-sizing: border-box;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.canvas-connector-dot[data-side="n"] { left: 50%; top: -6px; margin-left: -6px; }
.canvas-connector-dot[data-side="s"] { left: 50%; bottom: -6px; margin-left: -6px; }
.canvas-connector-dot[data-side="e"] { right: -6px; top: 50%; margin-top: -6px; }
.canvas-connector-dot[data-side="w"] { left: -6px; top: 50%; margin-top: -6px; }

.canvas-connector-dot:hover {
  background: #14b8a6;
  border-color: #5eead4;
  transform: scale(1.3);
  opacity: 1;
}
.canvas-connector-dot-active {
  background: #0d9488 !important;
  border-color: #5eead4 !important;
  transform: scale(1.4) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.35);
}
.canvas-connector-dot-snap {
  background: #10b981 !important;
  border-color: #34d399 !important;
  transform: scale(1.5) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
}

/* Import/transcript cards: keep dots above card chrome */
.canvas-node-import .canvas-connector-dot {
  z-index: 10;
}

/* Connector selection toolbar */
.canvas-connector-toolbar {
  position: absolute;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 3px 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.canvas-conn-tb-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  line-height: 1;
}
.canvas-conn-tb-btn:hover {
  background: #334155;
  color: #e2e8f0;
}
.canvas-conn-tb-btn.active {
  background: #0d9488;
  color: #fff;
}
.canvas-conn-tb-del {
  color: #f87171;
}
.canvas-conn-tb-del:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.canvas-conn-tb-sep {
  width: 1px;
  height: 18px;
  background: #334155;
  margin: 0 3px;
  flex-shrink: 0;
}

/* Connector path handles — shared base */
.cv-conn-handle {
  pointer-events: auto;
  stroke: #2dd4bf;
  stroke-width: 1.5;
  fill: #fff;
  transition: fill 0.12s, stroke 0.12s, transform 0.1s;
}

/* Terminal: START — open ring */
.cv-conn-term-start {
  cursor: pointer;
  fill: #fff;
  stroke: #2dd4bf;
  stroke-width: 2.5;
}
.cv-conn-term-start:hover {
  fill: #ccfbf1;
  stroke: #0d9488;
}

/* Terminal: END — filled dot */
.cv-conn-term-end {
  cursor: pointer;
  fill: #2dd4bf;
  stroke: #fff;
  stroke-width: 2;
}
.cv-conn-term-end:hover {
  fill: #5eead4;
}

/* Elbow bar handles — connector teal */
.cv-conn-bar {
  fill: #14b8a6;
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0.92;
}
.cv-conn-bar:hover {
  fill: #0d9488;
  opacity: 1;
}

/* Elbow corner indicator dots */
.cv-conn-corner {
  fill: #2dd4bf;
  stroke: #fff;
  stroke-width: 1.5;
  pointer-events: none;
  opacity: 0.6;
}

/* Resize cursors for bar handles */
.cv-handle-ew {
  cursor: ew-resize;
}
.cv-handle-ns {
  cursor: ns-resize;
}

/* Curved bezier control point handles */
.cv-conn-cp {
  cursor: grab;
  fill: #fff;
  stroke: #2dd4bf;
  stroke-width: 2;
}
.cv-conn-cp:hover {
  fill: #ccfbf1;
  stroke: #0d9488;
}
.cv-conn-cp:active {
  cursor: grabbing;
}

/* Tangent lines connecting terminal to CP */
.cv-conn-tangent {
  stroke: #2dd4bf;
  stroke-width: 1;
  stroke-dasharray: 3 2;
  opacity: 0.45;
  pointer-events: none;
}

.canvas-node-sticky {
  padding: 0;
  min-height: 40px;
  overflow: visible;
  box-sizing: border-box;
  border: 1px solid #334155; /* same edge width as .canvas-node-import */
  border-radius: 0;
}
.canvas-sticky-text {
  width: 100%;
  height: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 8px;
  line-height: 1.35;
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  color: #1e293b;
}
.canvas-node-sticky:has(.canvas-sticky-author) .canvas-sticky-text {
  padding-bottom: 20px;
}
.canvas-sticky-text:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}
.canvas-sticky-text ul {
  margin: 4px 0;
  padding-left: 1.25em;
  list-style-type: disc;
}
.canvas-sticky-text ul ul { list-style-type: circle; }
.canvas-sticky-text ul ul ul { list-style-type: square; }
.canvas-sticky-text ul ul ul ul { list-style-type: disc; }
.canvas-sticky-text li {
  margin: 2px 0;
}
/* Media cards on canvas – match Figma (node 739:135): rounded card, full media (no crop), dark footer */
.canvas-node-import {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: visible !important; /* allow resize/connector handles to extend outside card */
  border-radius: 16px;
  border: 1px solid #334155;
  background: #1e293b;
  box-sizing: border-box;
}
.canvas-import-thumb {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  font-size: 11px;
  color: #94a3b8;
  isolation: isolate;
  /* Replaced elements (img/video) can ignore ancestor overflow; clip-path forces top corner radius */
  clip-path: inset(0 round 16px 16px 0 0);
  -webkit-clip-path: inset(0 round 16px 16px 0 0);
}
.canvas-import-thumb > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px 16px 0 0;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.canvas-import-media-player {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  pointer-events: auto;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.canvas-import-media-player .canvas-import-video,
.canvas-import-media-player img {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: block;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  pointer-events: auto;
  cursor: pointer;
}
.canvas-import-youtube-player,
.canvas-import-vimeo-player {
  min-height: 120px;
}
.canvas-import-youtube-host,
.canvas-import-vimeo-iframe {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
}
.canvas-import-media-controls {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  pointer-events: auto;
}
.canvas-import-gif-controls {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.canvas-import-gif-hint {
  font-size: 10px;
  color: rgba(241, 245, 249, 0.75);
  letter-spacing: 0.04em;
}
.canvas-import-gif-replay {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.95);
  color: #e2e8f0;
  cursor: pointer;
}
.canvas-import-gif-replay:hover {
  background: rgba(51, 65, 85, 0.95);
}
.canvas-import-media-scrubber {
  width: 100%;
  height: 6px;
  margin: 0;
  cursor: pointer;
  accent-color: #38bdf8;
}
.canvas-import-media-time {
  font-size: 9px;
  color: rgba(226, 232, 240, 0.85);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.canvas-import-thumb canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
/* 3D mesh preview: canvas must receive events for OrbitControls (default above keeps img thumbs drag-through). */
.canvas-import-mesh-thumb canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.canvas-import-mesh-thumb canvas:active {
  cursor: grabbing;
}
.canvas-import-title {
  flex-shrink: 0;
  min-height: 28px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.3;
  color: #f1f5f9;
  background: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  border-radius: 0 0 16px 16px;
  box-sizing: border-box;
}
.canvas-import-transcript-preview {
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.5;
  color: #a0a0b0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px 16px 0 0;
}

.canvas-node-import:has(.canvas-transcript-toggle-bar) .canvas-import-title {
  border-radius: 0;
}

/* Transcript card on canvas: toggle bar (observation / insights) */
.canvas-transcript-toggle-bar {
  flex-shrink: 0;
  pointer-events: auto;
}
.canvas-transcript-toggle {
  flex-shrink: 0;
}
.canvas-transcript-toggle:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* AI prompt node on canvas */
.canvas-node-ai-prompt {
  border-radius: 12px;
  border: 1px solid #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: visible; /* connector dots must not be clipped */
}
/* Inner clip fills node height so prompt/output scroll inside the box instead of painting outside */
.canvas-node-ai-prompt > .canvas-node-content-clip {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 11px;
}
/* Inner content sits below connector dots so dots stay clickable */
.canvas-node-ai-prompt .canvas-ai-prompt-inner {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.canvas-node-ai-prompt .canvas-ai-prompt-result-loading {
  opacity: 0.85;
}
/* AI-node output text is selectable */
.canvas-node-ai-prompt .canvas-ai-prompt-result {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  min-height: 0; /* allow flex shrink so overflow:auto scrolls inside the node */
  /* Size container so generated images can cap to the visible result viewport (no clipping as “crop”) */
  container-type: size;
  container-name: ai-prompt-result;
}
.canvas-node-ai-prompt .canvas-ai-prompt-result img,
.canvas-node-ai-prompt .canvas-ai-prompt-result .canvas-ai-result-img {
  box-sizing: border-box;
  max-width: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  /* Fit entire image inside the scrollable result viewport (avoid ancestor clip feeling like a crop) */
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  margin: 6px auto;
  display: block;
}
@supports (height: 1cqh) {
  .canvas-node-ai-prompt .canvas-ai-prompt-result img,
  .canvas-node-ai-prompt .canvas-ai-prompt-result .canvas-ai-result-img {
    max-width: min(100%, 98cqw);
    max-height: min(100%, 98cqh);
  }
}

/* AI-node result images: crop control */
.canvas-node-ai-prompt .canvas-ai-result-img-wrap {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 6px auto;
}
.canvas-node-ai-prompt .canvas-ai-result-img-wrap .canvas-ai-result-img {
  margin: 0 auto;
  display: block;
}
.canvas-node-ai-prompt .canvas-ai-result-img-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: calc(100% - 16px);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.canvas-node-ai-prompt .canvas-ai-result-img-wrap:hover .canvas-ai-result-img-actions {
  opacity: 1;
  pointer-events: auto;
}
.canvas-node-ai-prompt .canvas-ai-crop-img-btn {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.canvas-node-ai-prompt .canvas-ai-crop-img-btn:hover {
  background: rgba(51, 65, 85, 0.95);
  border-color: #64748b;
}

.canvas-node-ai-prompt .canvas-ai-delete-export-img-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.canvas-node-ai-prompt .canvas-ai-delete-export-img-btn:hover {
  background: rgba(153, 27, 27, 0.5);
  border-color: rgba(248, 113, 113, 0.65);
}

.canvas-node-compositor .canvas-compositor-delete-export-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.canvas-node-compositor .canvas-compositor-delete-export-btn:hover {
  background: rgba(153, 27, 27, 0.5);
  border-color: rgba(248, 113, 113, 0.65);
}

.canvas-node-ai-prompt .canvas-ai-export-img-btn {
  font-size: 11px;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.canvas-node-ai-prompt .canvas-ai-export-img-btn .canvas-export-arrow-icon,
.canvas-node-compositor .canvas-compositor-export-btn .canvas-export-arrow-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.canvas-node-ai-prompt .canvas-ai-export-img-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.95);
  border-color: #64748b;
}
.canvas-node-ai-prompt .canvas-ai-export-img-btn--done {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.22);
  color: #4ade80;
  cursor: default;
}
.canvas-node-ai-prompt .canvas-ai-export-img-btn--done:disabled {
  opacity: 1;
}

.canvas-node-compositor .canvas-compositor-export-btn {
  font-size: 11px;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
}
.canvas-node-compositor .canvas-compositor-export-btn:hover:not(:disabled):not(.canvas-compositor-export-btn--done) {
  background: rgba(51, 65, 85, 0.95);
  border-color: #64748b;
}
.canvas-node-compositor .canvas-compositor-export-btn--done {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.22);
  color: #4ade80;
  cursor: default;
  padding: 6px;
}
.canvas-node-compositor .canvas-compositor-export-btn--disabled,
.canvas-node-compositor .canvas-compositor-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* AI-node image crop modal */
.canvas-ai-crop-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
}
.canvas-ai-crop-modal-panel {
  max-width: min(1040px, 100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.canvas-ai-crop-modal-header {
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  border-bottom: 1px solid #334155;
}
.canvas-ai-crop-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
}
.canvas-ai-crop-modal-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}
.canvas-ai-crop-modal-error {
  margin-top: 8px;
  font-size: 12px;
  color: #fca5a5;
  line-height: 1.45;
}
.canvas-ai-crop-stage-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.canvas-ai-crop-stage {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #334155;
  background: #020617;
}
.canvas-ai-crop-stage-img {
  display: block;
  vertical-align: top;
  user-select: none;
  -webkit-user-drag: none;
}
.canvas-ai-crop-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 2px solid #6366f1;
  background: rgba(99, 102, 241, 0.15);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
.canvas-ai-crop-modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid #334155;
  background: rgba(15, 23, 42, 0.98);
}
.canvas-ai-crop-modal-btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.canvas-ai-crop-modal-btn-secondary {
  background: transparent;
  border-color: #475569;
  color: #cbd5e1;
}
.canvas-ai-crop-modal-btn-secondary:hover {
  background: rgba(51, 65, 85, 0.5);
}
.canvas-ai-crop-modal-btn-primary {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.canvas-ai-crop-modal-btn-primary:hover:not(:disabled) {
  background: #4f46e5;
}
.canvas-ai-crop-modal-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.canvas-node-ai-prompt .canvas-ai-prompt-result-wrap {
  min-height: 0;
}

/* Hover preview: compositor stack image when hovering “N inputs connected” on AI node */
.canvas-ai-compositor-hover-preview {
  position: fixed;
  z-index: 100050;
  padding: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  max-width: min(320px, calc(100vw - 16px));
  box-sizing: border-box;
}
.canvas-ai-compositor-hover-preview img {
  display: block;
  max-width: 300px;
  max-height: min(260px, 70vh);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
.canvas-ai-compositor-hover-preview-loading {
  font-size: 11px;
  color: #94a3b8;
  padding: 16px 20px;
  text-align: center;
  white-space: nowrap;
}

/* AI node: only left (input) and right (output) dots — no top/bottom. Dots on top so they receive clicks. */
.canvas-node-ai-prompt .canvas-connector-dot {
  z-index: 20;
  pointer-events: auto;
}
.canvas-node-ai-prompt .canvas-connector-dot[data-side="w"] {
  left: -6px;
  top: 50%;
  margin-top: -6px;
}
.canvas-node-ai-prompt .canvas-connector-dot[data-side="e"] {
  right: -6px;
  top: 50%;
  margin-top: -6px;
}

/* Cutout (background-removal) node */
.canvas-node-cutout .canvas-connector-dot {
  z-index: 20;
  pointer-events: auto;
}
.canvas-node-cutout .canvas-connector-dot[data-side="w"] {
  left: -6px;
  top: 50%;
  margin-top: -6px;
}
.canvas-node-cutout .canvas-connector-dot[data-side="e"] {
  right: -6px;
  top: 50%;
  margin-top: -6px;
}

/* AI-node citation chips */
.ai-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: super;
  margin: 0 1px;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.ai-cite:hover {
  background: rgba(99, 102, 241, 0.35);
  border-color: rgba(99, 102, 241, 0.6);
}

/* Citation hover tooltip */
.ai-cite-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-size: 11px;
  color: #e2e8f0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.ai-cite-tooltip.visible {
  opacity: 1;
}
.ai-cite-tooltip-title {
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.3;
}
.ai-cite-tooltip-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 4px;
}
.ai-cite-tooltip-badge.internal {
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
}
.ai-cite-tooltip-badge.external {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}
.ai-cite-tooltip-action {
  color: #94a3b8;
  font-size: 10px;
  margin-top: 2px;
}

/* Source footer inside AI-node result */
.ai-source-footer {
  border-top: 1px solid #334155;
  padding: 6px 0 2px;
  margin-top: 8px;
}
.ai-source-footer-title {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ai-source-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ai-source-list::-webkit-scrollbar {
  height: 3px;
}
.ai-source-list::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
.ai-source-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(51, 65, 85, 0.5);
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  transition: background 0.15s;
}
.ai-source-card:hover {
  background: rgba(51, 65, 85, 0.8);
}
.ai-source-card-num {
  font-weight: 700;
  color: #a5b4fc;
  font-size: 10px;
  flex-shrink: 0;
}
.ai-source-card-favicon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ai-source-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-remote-cursor {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 2px solid #6366f1;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 0;
  margin-top: -12px;
  pointer-events: none;
}
.canvas-remote-cursor span {
  position: absolute;
  left: 8px;
  top: -8px;
}

/* Placement mode */
.canvas-placement-mode .canvas-surface {
  cursor: crosshair !important;
}
.canvas-placement-mode .canvas-surface:active {
  cursor: crosshair !important;
}
.canvas-ghost-sticky {
  position: absolute;
  border-radius: 0;
  opacity: 0.5;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: opacity 0.15s ease;
}
.canvas-placement-mode {
  cursor: crosshair;
}

/* Canvas tool mode: Select vs Hand (floating pill toolbar) */
.canvas-tool-active {
  background: #7c3aed !important;
  color: #fff !important;
}
button[data-canvas-tool]:not(.canvas-tool-active) {
  background: transparent;
  color: #64748b;
}
button[data-canvas-tool]:not(.canvas-tool-active):hover {
  background: #f1f5f9;
  color: #334155;
}
.cv-tb-btn .cv-tb-icon-mask {
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.cv-tb-btn:disabled {
  opacity: 0.35;
  cursor: default !important;
}
.cv-tb-btn:disabled:hover {
  background: transparent !important;
}

/* Canvas toolbar drag handle */
.canvas-toolbar-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  margin: 0 2px 0 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.canvas-toolbar-drag-handle:hover {
  color: #64748b;
  background: rgba(0, 0, 0, 0.05);
}
.canvas-toolbar-drag-handle:active {
  cursor: grabbing;
}

.canvas-tool-select,
.canvas-tool-select .canvas-surface {
  cursor:default;
}
.canvas-tool-select .canvas-surface:active {
  cursor: crosshair;
}
.canvas-tool-select .canvas-node {
  cursor: pointer;
}
.canvas-tool-hand,
.canvas-tool-hand *,
.canvas-tool-hand .canvas-resize-handle,
.canvas-tool-hand .canvas-connector-dot,
.canvas-tool-hand .canvas-node,
.canvas-tool-hand .canvas-sticky-text,
.canvas-tool-hand .canvas-section,
.canvas-tool-hand .canvas-section-title,
.canvas-tool-hand .canvas-section-resize-handle {
  cursor: grab !important;
}
.canvas-tool-hand.canvas-panning,
.canvas-tool-hand.canvas-panning *,
.canvas-tool-hand.canvas-panning .canvas-resize-handle,
.canvas-tool-hand.canvas-panning .canvas-connector-dot {
  cursor: grabbing !important;
}

/* Text tool mode */
.canvas-tool-text {
  cursor: text;
}
.canvas-tool-text .canvas-node {
  cursor: default;
}
.canvas-tool-text .canvas-node-text {
  cursor: pointer;
}

/* Canvas text node (static, rendered) */
.canvas-node-text {
  background: transparent !important;
  border: none;
  box-shadow: none;
}
.canvas-node-text .canvas-connector-dot {
  z-index: 10;
}
.canvas-node-text.selected {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 2px;
}
.canvas-text-label {
  pointer-events: auto;
}

/* Floating text input (contenteditable) */
.canvas-text-input {
  outline: none;
  border: none;
  background: transparent;
  caret-color: #ffffff;
  z-index: 200;
}
.canvas-text-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  font-style: italic;
}
.canvas-text-input:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(124, 58, 237, 0.5);
  border-radius: 2px;
}

/* Middle-mouse panning (any mode) */
.canvas-panning,
.canvas-panning * {
  cursor: grabbing !important;
}

/* Marquee selection rectangle */
.canvas-marquee {
  position: absolute;
  border: 1.5px dashed #6366f1;
  background: rgba(99, 102, 241, 0.08);
  pointer-events: none;
  z-index: 9999;
  display: none;
  border-radius: 2px;
}

/* Sections */
.canvas-section {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.canvas-section.selected {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.canvas-section.section-drop-highlight {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.canvas-section-title {
  pointer-events: auto;
}
.canvas-section-resize-handle {
  pointer-events: auto;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.canvas-section-resize-handle:hover {
  opacity: 1;
}

/* When section is selected, connector dots and edge resize handles both show; offset dots so they don't overlap */
.canvas-section.selected .canvas-connector-dot[data-side="n"] {
  left: calc(50% - 32px);
}
.canvas-section.selected .canvas-connector-dot[data-side="s"] {
  left: calc(50% - 32px);
}
.canvas-section.selected .canvas-connector-dot[data-side="e"] {
  top: calc(50% - 32px);
}
.canvas-section.selected .canvas-connector-dot[data-side="w"] {
  top: calc(50% - 32px);
}

/* Sticky author */
.canvas-sticky-author {
  position: absolute;
  bottom: 6px;
  left: 10px;
  right: 10px;
  font-size: 6px;
  line-height: 1.2;
  color: rgba(30, 41, 59, 0.65);
  pointer-events: none;
}

/* Sticky fonts */
.canvas-font-simple { font-family: system-ui, sans-serif; }
.canvas-font-scribbled { font-family: 'Comic Sans MS', 'Chalkboard', cursive; }
.canvas-font-technical { font-family: 'SF Mono', 'Consolas', monospace; }
.canvas-font-bookish { font-family: Georgia, 'Times New Roman', serif; }

/* Canvas text tool — Google Fonts toolbar (fixed to viewport, not world transform) */
.canvas-text-format-bar {
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
}
.canvas-text-format-bar .canvas-text-fmt-trigger {
  color-scheme: dark;
}
.canvas-text-fmt-popup {
  color-scheme: dark;
}
.canvas-text-fmt-item.canvas-text-fmt-item--active {
  background: #334155 !important;
  outline: 1px solid #6366f1;
  outline-offset: -1px;
}
.canvas-text-format-bar .canvas-text-fmt-bold.canvas-text-fmt-bold--active {
  background: #4338ca;
  border-color: #6366f1;
  color: #fff;
}
.canvas-text-format-bar .canvas-text-fmt-bold:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.canvas-text-format-bar .canvas-text-fmt-italic.canvas-text-fmt-italic--active {
  background: #4338ca;
  border-color: #6366f1;
  color: #fff;
}
.canvas-text-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* ─── Sticky formatting toolbar ─── */
.canvas-sticky-format-bar {
  position: absolute;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: #1e293b;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: auto;
  user-select: none;
}
.csfb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.csfb-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #f1f5f9;
}
.csfb-action-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 14px;
}
.csfb-color-btn {
  padding: 5px 6px;
}
.csfb-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  vertical-align: middle;
}
.csfb-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  margin: 0 3px;
  flex-shrink: 0;
}
.csfb-dropdown-wrap,
.csfb-color-wrap {
  position: relative;
}
.csfb-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 4px;
  min-width: 100px;
  z-index: 30;
}
.csfb-popup.open {
  display: flex;
  flex-direction: column;
}
.csfb-color-popup.open {
  flex-direction: row;
  gap: 4px;
  min-width: auto;
  padding: 6px 8px;
}
.csfb-color-option {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color .12s, transform .12s;
}
.csfb-color-option:hover {
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.12);
}
.csfb-popup-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.csfb-popup-item:hover {
  background: rgba(255,255,255,0.08);
  color: #f1f5f9;
}
.csfb-popup-item.active {
  background: #7c3aed;
  color: #fff;
}
.csfb-btn.csfb-active {
  background: rgba(124, 58, 237, 0.25);
  color: #a78bfa;
}

/* ─── Canvas comment pins ─── */
.canvas-comment-pin {
  position: absolute;
  pointer-events: auto;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-6px, -32px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.12s;
  z-index: 5;
}
.canvas-comment-pin:hover {
  transform: translate(-6px, -34px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.canvas-comment-pin.resolved {
  background: #34d399;
  opacity: 0.7;
}
.canvas-comment-pin-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-comment-pin-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ─── Canvas stamp pins ─── */
.canvas-stamp-pin {
  position: relative;
  transform: translate(-50%, -50%);
  transition: transform 0.1s;
  line-height: 1;
  overflow: visible;
}
.canvas-stamp-pin:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.canvas-stamp-pin.selected {
  filter: drop-shadow(0 0 4px #7c3aed) drop-shadow(0 0 8px rgba(124,58,237,0.4));
}
.canvas-stamp-pin.selected:hover {
  transform: translate(-50%, -50%) scale(1.15);
}

/* ─── Stamp tooltip ─── */
.canvas-stamp-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 200;
}
.canvas-stamp-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
}
.canvas-stamp-pin:hover .canvas-stamp-tooltip {
  display: block;
}

/* ─── Stamp resize handle ─── */
.canvas-stamp-resize-handle {
  position: absolute;
  /* 12px gap outside node + 14px grip (aligned with canvas-resize-handle outset) */
  right: -26px;
  bottom: -26px;
  width: 14px;
  height: 14px;
  background: #7c3aed;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  pointer-events: auto;
  z-index: 10;
}
.canvas-stamp-resize-handle:hover {
  background: #6d28d9;
  transform: scale(1.2);
}

/* ─── Canvas comment popup ─── */
.canvas-comment-popup {
  position: absolute;
  z-index: 110;
  width: 280px;
  background: #1e293b;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  font-size: 13px;
  color: #e2e8f0;
}
.ccpopup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ccpopup-author {
  font-weight: 600;
  color: #a5b4fc;
  font-size: 13px;
}
.ccpopup-time {
  font-size: 11px;
  color: #64748b;
  flex: 1;
}
.ccpopup-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.ccpopup-action-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, color .12s;
}
.ccpopup-action-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #f1f5f9;
}
.ccpopup-resolved-badge {
  font-size: 10px;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.ccpopup-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
  line-height: 1.4;
}
.ccpopup-textarea:focus {
  border-color: #6366f1;
}
.ccpopup-textarea::placeholder {
  color: #64748b;
}
.ccpopup-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
  padding-top: 6px;
  border-top: 1px solid #334155;
}
.ccpopup-reply {
  padding-left: 8px;
  border-left: 2px solid #4b5563;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ccpopup-reply-author {
  font-weight: 600;
  color: #a5b4fc;
  font-size: 11px;
}
.ccpopup-reply-text {
  color: #e2e8f0;
  font-size: 12px;
}
.ccpopup-reply-time {
  font-size: 10px;
  color: #64748b;
}
.ccpopup-reply-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid #334155;
}
.ccpopup-reply-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.ccpopup-reply-input:focus {
  border-color: #6366f1;
}
.ccpopup-reply-input::placeholder {
  color: #64748b;
}
.ccpopup-reply-send {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.ccpopup-reply-send:hover {
  background: rgba(99, 102, 241, 0.75);
}

/* ─── Drawing system (freehand marker / highlighter / eraser) ─── */

.canvas-tool-draw .canvas-node,
.canvas-tool-draw .canvas-section,
.canvas-tool-draw .canvas-sticky-text,
.canvas-tool-draw .canvas-section-title,
.canvas-tool-draw .canvas-connector-dot,
.canvas-tool-draw .canvas-resize-handle,
.canvas-tool-draw .canvas-section-resize-handle {
  pointer-events: none !important;
}

/* Ensure cursor is visible over the entire canvas in draw mode */
.canvas-tool-draw {
  cursor: crosshair;
}

.drawing-static-canvas,
.drawing-active-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* In draw mode: drawing canvas must receive events and show a visible cursor */
.canvas-tool-draw .drawing-active-canvas {
  pointer-events: auto !important;
  cursor: crosshair;
}

/* Space or Hand tool while draw mode is on: let pan hit the canvas below (FigJam-style). */
.canvas-tool-draw.canvas-tool-hand {
  cursor: grab;
}

.canvas-tool-draw.canvas-tool-hand .drawing-active-canvas {
  pointer-events: none !important;
  cursor: grab;
}

.drawing-toolbar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  user-select: none;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
}

.drawing-toolbar button:hover {
  opacity: 0.85;
}

/* Connectors */
.canvas-connectors-svg {
  pointer-events: none;
}

/* Notebook: multi-column — no chrome on group/stack; only gutter shows a line on hover (8px hit box) */
.column-group-container,
.column-group {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.column-group-escape-zone {
  width: 100%;
  height: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  transition: height 0.1s ease;
  pointer-events: none;
}
/* Expand escape zones only while a drag is in progress */
.block-editor.is-dragging .column-group-escape-zone,
.text-editor-content.is-dragging .column-group-escape-zone {
  height: 8px;
  pointer-events: auto;
}
.column-group-root,
.column-group-root.column-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.column-stack-wrapper,
.column-stack-wrapper.column-stack {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.column-group-gutter.column-separator,
.column-separator {
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}
.column-separator::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  opacity: 0;
  transition: opacity 0.12s ease, background-color 0.12s ease;
  pointer-events: none;
}
.column-separator:hover::before {
  background: #2563EB;
  opacity: 1;
}

/* Notebook editor: type badge matches collection card icons */
.notebook-media-type-badge svg {
  width: 18px;
  height: 18px;
  display: block;
}