@tailwind base;
@tailwind components;
@tailwind utilities;

@import './components/index.css';
@import './jsmind.css';
/* Analytics Rich Tooltip Styles */
.analytics-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(4px);
}

.analytics-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.analytics-tooltip-content {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  min-width: 220px;
  max-width: 280px;
}

[data-theme="dark"] .analytics-tooltip-content,
[data-theme="night"] .analytics-tooltip-content,
[data-theme="business"] .analytics-tooltip-content {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.analytics-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.analytics-tooltip-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-date,
[data-theme="night"] .analytics-tooltip-date,
[data-theme="business"] .analytics-tooltip-date {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .analytics-tooltip-info-icon,
[data-theme="night"] .analytics-tooltip-info-icon,
[data-theme="business"] .analytics-tooltip-info-icon {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
}

.analytics-tooltip-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.analytics-tooltip-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

[data-theme="dark"] .analytics-tooltip-value,
[data-theme="night"] .analytics-tooltip-value,
[data-theme="business"] .analytics-tooltip-value {
  color: #ffffff;
}

.analytics-tooltip-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-label,
[data-theme="night"] .analytics-tooltip-label,
[data-theme="business"] .analytics-tooltip-label {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.analytics-tooltip-trend.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.analytics-tooltip-trend.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.analytics-tooltip-breakdown {
  margin-bottom: 12px;
}

.analytics-tooltip-breakdown-bar {
  height: 6px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .analytics-tooltip-breakdown-bar,
[data-theme="night"] .analytics-tooltip-breakdown-bar,
[data-theme="business"] .analytics-tooltip-breakdown-bar {
  background: rgba(255, 255, 255, 0.1);
}

.analytics-tooltip-breakdown-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.analytics-tooltip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.analytics-tooltip-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analytics-tooltip-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.analytics-tooltip-legend-value {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

[data-theme="dark"] .analytics-tooltip-legend-value,
[data-theme="night"] .analytics-tooltip-legend-value,
[data-theme="business"] .analytics-tooltip-legend-value {
  color: #ffffff;
}

.analytics-tooltip-comparison {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .analytics-tooltip-comparison,
[data-theme="night"] .analytics-tooltip-comparison,
[data-theme="business"] .analytics-tooltip-comparison {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.analytics-tooltip-comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 4px;
}

.analytics-tooltip-comparison-row:last-child {
  margin-bottom: 0;
}

.analytics-tooltip-comparison-label {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-comparison-label,
[data-theme="night"] .analytics-tooltip-comparison-label,
[data-theme="business"] .analytics-tooltip-comparison-label {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-comparison-value {
  font-weight: 600;
  color: #1f2937;
}

[data-theme="dark"] .analytics-tooltip-comparison-value,
[data-theme="night"] .analytics-tooltip-comparison-value,
[data-theme="business"] .analytics-tooltip-comparison-value {
  color: #ffffff;
}
/* Button overrides for Landing & Launchpad */
.btn {
  /* Smooth color/brightness transitions */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0); /* Reset on active press */
}

/* Ghost buttons are transparent; tweak background on hover */
.btn-ghost:hover {
  filter: none !important;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important;
}

/* Outline variant glow for dark theme */
[data-theme="dark"] .btn-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

/* Ensure circular buttons (avatars) center their content */
.btn-circle {
  display: flex; /* override DaisyUI inline-flex */
  align-items: center;
  justify-content: center;
  gap: 0; /* no internal gap needed for single letter */
}

/* Override avatar child rule from DaisyUI that forces display:block */
.avatar > .btn-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
} 
/* Card style overrides for Landing & Launchpad */
.card-clickable {
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.card-clickable:hover {
  filter: brightness(1.03);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

/* Stronger shadow in dark mode */
[data-theme="dark"] .card-clickable:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

/* Interactive content items (e.g., images inside cards) */
.interactive-content:hover {
  transform: translateY(-3px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(16, 16, 21, 0.2);
}

[data-theme="light"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.12);
}

/* Stat card subtle glow */
[data-theme="dark"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(45, 85, 93, 0.3);
}

[data-theme="light"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(173, 173, 164, 0.3);
} 
@import './buttons.css';
@import './cards.css';
@import './links.css';
@import './utilities.css';
@import './mindmap.css';
@import './analytics-tooltip.css';
@import './video-workspace.css';
/* ===================================================================
 * LINK THEME CONFIGURATION
 * ===================================================================
 * 
 * Comprehensive link styling system built on DaisyUI theme colors.
 * Based on privacy/legal links as the standard baseline pattern.
 * 
 * USAGE:
 *   <%= link_to "Text", path, class: "link-footer" %>
 *   <%= link_to "Text", path, class: "link-nav" %>
 *   <%= link_to "Text", path, class: "link-accent" %>
 * 
 * AVAILABLE LINK VARIANTS:
 * - link-footer    : Standard footer links (privacy/legal baseline)
 * - link-nav       : Navigation links with background hover
 * - link-nav-title : Large navigation title links
 * - link-accent    : Accent colored links (DaisyUI accent)
 * - link-primary   : Primary colored links (DaisyUI primary)
 * - link-secondary : Secondary colored links (DaisyUI secondary)
 * - link-success   : Success colored links (DaisyUI success)
 * - link-warning   : Warning colored links (DaisyUI warning)
 * - link-error     : Error colored links (DaisyUI error)
 * - link-subtle    : Subtle underlined links
 * - link-breadcrumb: Breadcrumb navigation links
 * - link-external  : External links with indicator
 * - link-button    : Button-styled links
 * 
 * BUTTON LINK VARIANTS:
 * - btn-link-primary   : Primary button link
 * - btn-link-secondary : Secondary button link
 * - btn-link-accent    : Accent button link
 * - btn-link-ghost     : Ghost button link
 * - btn-link-outline   : Outline button link
 * 
 * SIZE MODIFIERS (append to any variant):
 * - -xs, -sm, -lg, -xl
 * 
 * STATE MODIFIERS:
 * - -disabled : Disabled state
 * - -active   : Active state
 * 
 * =================================================================== */

/* ===================================================================
 * BASE LINK CONFIGURATION
 * =================================================================== */

/* Reset default link styling to build upon */
.link-component {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Focus states for accessibility */
.link-component:focus {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ===================================================================
 * STANDARD LINK VARIANTS
 * =================================================================== */

/* Footer Links - Privacy/Legal Baseline Standard */
.link-footer {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-footer:hover,
.link-footer:focus {
  color: hsl(var(--base-content));
}

/* Navigation Links - Background hover effect */
.link-nav {
  @apply link-component;
  color: hsl(var(--base-content));
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav:hover,
.link-nav:focus {
  background-color: hsl(var(--base-200));
  color: hsl(var(--base-content));
}

/* Navigation Title Links - Large titles */
.link-nav-title {
  @apply link-component;
  color: hsl(var(--base-content));
  font-size: 1.125rem;
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav-title:hover,
.link-nav-title:focus {
  color: hsl(var(--accent));
}

@media (min-width: 768px) {
  .link-nav-title {
    font-size: 1.25rem;
  }
}

/* DaisyUI Theme Color Links */
.link-accent {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-accent:hover,
.link-accent:focus {
  color: hsl(var(--accent) / 0.8);
}

.link-primary {
  @apply link-component;
  color: hsl(var(--primary));
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-primary:hover,
.link-primary:focus {
  color: hsl(var(--primary) / 0.8);
}

.link-secondary {
  @apply link-component;
  color: hsl(var(--secondary));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-secondary:hover,
.link-secondary:focus {
  color: hsl(var(--secondary) / 0.8);
}

.link-success {
  @apply link-component;
  color: hsl(var(--success));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-success:hover,
.link-success:focus {
  color: hsl(var(--success) / 0.8);
}

.link-warning {
  @apply link-component;
  color: hsl(var(--warning));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-warning:hover,
.link-warning:focus {
  color: hsl(var(--warning) / 0.8);
}

.link-error {
  @apply link-component;
  color: hsl(var(--error));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-error:hover,
.link-error:focus {
  color: hsl(var(--error) / 0.8);
}

/* ===================================================================
 * SPECIALIZED LINK VARIANTS
 * =================================================================== */

/* Subtle Links - With underline decoration */
.link-subtle {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  text-decoration: underline;
  text-decoration-color: hsl(var(--base-content) / 0.3);
  text-underline-offset: 0.25rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-subtle:hover,
.link-subtle:focus {
  color: hsl(var(--base-content));
  text-decoration-color: hsl(var(--base-content) / 0.6);
}

/* Breadcrumb Links - For navigation paths */
.link-breadcrumb {
  @apply link-component;
  color: hsl(var(--accent));
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-breadcrumb:hover,
.link-breadcrumb:focus {
  color: hsl(var(--accent) / 0.8);
  text-decoration-color: hsl(var(--accent) / 0.6);
}

/* External Links - With indicator icon */
.link-external {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-external:hover,
.link-external:focus {
  color: hsl(var(--accent) / 0.8);
  transform: translateY(-1px);
}

.link-external::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* Button-styled Links */
.link-button {
  @apply link-component;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-content));
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button:hover,
.link-button:focus {
  background-color: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

/* ===================================================================
 * BUTTON LINK VARIANTS (Enhanced DaisyUI buttons)
 * =================================================================== */

.btn-link-primary {
  @apply btn btn-primary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-primary:hover {
  transform: translateY(-1px);
}

.btn-link-secondary {
  @apply btn btn-secondary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-secondary:hover {
  transform: translateY(-1px);
}

.btn-link-accent {
  @apply btn btn-accent;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-accent:hover {
  transform: translateY(-1px);
}

.btn-link-ghost {
  @apply btn btn-ghost;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-ghost:hover {
  transform: translateY(-1px);
  background-color: hsl(var(--base-content) / 0.1);
}

.btn-link-outline {
  @apply btn btn-outline;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-outline:hover {
  transform: translateY(-1px);
}

/* ===================================================================
 * SIZE MODIFIERS
 * =================================================================== */

/* Extra Small */
.link-xs {
  font-size: 0.75rem;
  gap: 0.125rem;
}

.link-xs.link-nav {
  padding: 0.25rem 0.5rem;
}

.link-xs.link-button {
  padding: 0.25rem 0.5rem;
}

/* Small */
.link-sm {
  font-size: 0.875rem;
  gap: 0.1875rem;
}

.link-sm.link-nav {
  padding: 0.375rem 0.625rem;
}

.link-sm.link-button {
  padding: 0.375rem 0.75rem;
}

/* Large */
.link-lg {
  font-size: 1.125rem;
  gap: 0.375rem;
  font-weight: 500;
}

.link-lg.link-nav {
  padding: 0.75rem 1rem;
}

.link-lg.link-button {
  padding: 0.75rem 1.5rem;
}

/* Extra Large */
.link-xl {
  font-size: 1.25rem;
  gap: 0.5rem;
  font-weight: 600;
}

.link-xl.link-nav {
  padding: 1rem 1.25rem;
}

.link-xl.link-button {
  padding: 1rem 2rem;
}

/* ===================================================================
 * STATE MODIFIERS
 * =================================================================== */

/* Disabled State */
.link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active State */
.link-active {
  font-weight: 600;
}

.link-nav.link-active {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.link-accent.link-active {
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ===================================================================
 * DARK MODE ENHANCEMENTS
 * =================================================================== */

[data-theme="dark"] .btn-link-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

[data-theme="dark"] .link-external:hover {
  text-shadow: 0 0 8px hsl(var(--accent) / 0.3);
}

/* ===================================================================
 * INTERACTIVE EFFECTS
 * =================================================================== */

/* Hover Scale Effect (for special cases) */
.link-scale {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-scale:hover {
  transform: scale(1.05);
}

/* Glow Effect (for dark theme highlights) */
[data-theme="dark"] .link-glow:hover {
  text-shadow: 0 0 8px currentColor;
}

/* ===================================================================
 * ICON INTEGRATION
 * =================================================================== */

.link-component svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.link-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.link-sm svg {
  width: 0.875em;
  height: 0.875em;
}

.link-lg svg {
  width: 1.125em;
  height: 1.125em;
}

.link-xl svg {
  width: 1.25em;
  height: 1.25em;
}

/* Icon positioning */
.link-component .icon-left {
  order: -1;
}

.link-component .icon-right {
  order: 1;
} 
/* Custom mindmap styling extracted from inline <style> tag */
#learning-vectors-mindmap .jmnode {
  background-color: #374151 !important;
  border-color: #374151 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.root {
  background-color: #111827 !important;
  border-color: #111827 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.selected {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

#learning-vectors-mindmap .jmnode:hover {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

/* Info icon styling for microlesson view */
.info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.info-icon {
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}

.info-icon:hover {
  transform: scale(1.1);
  color: hsl(var(--p)) !important;
}

/* Tooltip popup styling */
.tooltip-popup {
  animation: fadeIn 0.2s ease-in-out;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 
/* Tag Component Styles */
/* 
 * This component enhances DaisyUI badge classes for a more sleek, modern appearance.
 * Base styling comes from DaisyUI badges, with custom enhancements for visual polish.
 * See: https://daisyui.com/components/badge/
 * 
 * Available variants: badge-primary, badge-secondary, badge-accent, badge-neutral,
 *                    badge-info, badge-success, badge-warning, badge-error
 * 
 * Available sizes: badge-xs, badge-sm, (default), badge-lg
 */

/* Enhanced base badge styling for all tag components */
.tag-component.badge {
  /* Modern rounded pill appearance */
  border-radius: 9999px !important;
  
  /* Enhanced typography */
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  
  /* Improved spacing */
  padding: 0.25rem 0.75rem !important;
  min-height: 1.5rem !important;
  
  /* Minimal visual enhancements */
  border: 1px solid transparent !important;
  box-shadow: none !important;
  
  /* Smooth transitions */
  transition: all 0.15s ease-in-out !important;
  
  /* Better text alignment */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}

/* Size variants with enhanced styling */
.tag-component.badge-xs {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  min-height: 1.25rem;
}

.tag-component.badge-sm {
  font-size: 0.6875rem;
  padding: 0.1875rem 0.625rem;
  min-height: 1.375rem;
}

.tag-component.badge-lg {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
  min-height: 2rem;
  font-weight: 600;
}

/* Enhanced hover effects for clickable tags */
.tag-component.badge.tag-clickable {
  cursor: pointer;
}

.tag-component.badge.tag-clickable:hover {
  transform: translateY(-1px) !important;
  opacity: 0.8 !important;
}

.tag-component.badge.tag-clickable:active {
  transform: translateY(0) !important;
  opacity: 0.6 !important;
}

/* Minimal color variants with subtle backgrounds and colored text */
.tag-component.badge-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: rgb(21, 128, 61) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: rgb(180, 83, 9) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: rgb(37, 99, 235) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-error {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: rgb(220, 38, 38) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-primary {
  background-color: rgba(168, 85, 247, 0.1) !important;
  color: rgb(147, 51, 234) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-secondary {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-neutral {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

/* Icon styling within tags */
.tag-component.badge svg {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}

.tag-component.badge-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.tag-component.badge-lg svg {
  width: 1em;
  height: 1em;
}

/* Focus states for accessibility */
.tag-component.badge.tag-clickable:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .tag-component.badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.625rem;
  }
  
  .tag-component.badge-lg {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
} 
/* ===== Migrated from globals.css - project-wide utility overrides ===== */

/* Variable Fonts */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "MPLUS1";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/MPLUS1-VariableFont_wght-f690acd6c4283c34769a24b3d3989b121db7c449c9fc30957698edb8ec41dd9c.woff2) format("woff2");
    font-named-instance: "Regular";
  }
}

@layer utilities {
  .font-thin { font-variation-settings: 'wght' 100; }
  .font-extralight { font-variation-settings: 'wght' 200; }
  .font-light { font-variation-settings: 'wght' 300; }
  .font-normal { font-variation-settings: 'wght' 400; }
  .font-medium { font-variation-settings: 'wght' 500; }
  .font-semibold { font-variation-settings: 'wght' 600; }
  .font-bold { font-variation-settings: 'wght' 700; }
  .font-extrabold { font-variation-settings: 'wght' 800; }
  .font-black { font-variation-settings: 'wght' 900; }

  /* Shared transition helpers to replace bulky utility chains */
  .transition-base {
    @apply transition duration-300 ease-in-out;
  }

  .transition-fast {
    @apply transition duration-200 ease-in-out;
  }
}

/* Additional utilities & component tweaks (kept here if not already moved) */

/* Custom shadow-primary for light theme */
[data-theme="light"] .shadow-primary {
  --tw-shadow: 0px 0px 1px 1px rgba(173, 173, 164, 0.5);
  box-shadow: var(--tw-shadow);
}

/* Dark-theme shadow refinements */
[data-theme="dark"] .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-shadow: var(--tw-shadow);
}

/* AI-Usage dashboard card animation */
.ai-usage-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.ai-usage-card:hover { transform: scale(1.02) translateY(-2px); }
[data-theme="dark"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Progress component enhancements (matches DaisyUI `.progress`) */
.progress {
  appearance: none;
  border-radius: 9999px;
  overflow: hidden;
}
[data-theme="dark"] .progress::-webkit-progress-bar { background-color: hsl(var(--b3)); border-radius: 9999px; }
[data-theme="dark"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}
[data-theme="light"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* Alerts, collapse, tables, scrollbar & misc animations */
[data-theme="dark"] .alert { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
[data-theme="dark"] .alert-warning { background: linear-gradient(135deg, rgba(236, 148, 85, .2) 0%, rgba(236,148,85,.1) 100%); border-color: rgba(236,148,85,.3); }
[data-theme="dark"] .alert-error   { background: linear-gradient(135deg, rgba(234, 67, 53, .2) 0%, rgba(234,67,53,.1) 100%); border-color: rgba(234,67,53,.3); }
[data-theme="dark"] .alert-info    { background: linear-gradient(135deg, rgba(45, 85, 93, .2) 0%, rgba(45,85,93,.1) 100%); border-color: rgba(45,85,93,.3); }

[data-theme="dark"] .collapse { backdrop-filter: blur(10px); }
.collapse-title:hover { background: linear-gradient(135deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%); }

/* Card-like table styling - applying card properties to table rows */
.table {
  border-collapse: separate;
  border-spacing: 0.5rem;
  width: 100%;
}

.table thead {
  background-color: transparent;
}

.table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: hsl(var(--bc));
  border-bottom: 1px solid hsl(var(--b3));
  background-color: transparent;
}

.table tbody tr {
  background-color: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.5rem;
}

.table tbody tr:hover {
  background-color: hsl(var(--b2) / 0.8) !important;
  border-color: hsl(var(--accent) / 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

.table tbody td {
  padding: 1rem;
  color: hsl(var(--bc));
  border-radius: 0.5rem;
}

/* Clickable table rows with card-like hover effects */
.table tbody tr.cursor-pointer {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.table tbody tr.cursor-pointer:hover {
  background-color: hsl(var(--b2) / 0.9) !important;
  border-color: hsl(var(--accent) / 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

[data-theme="dark"] .table tbody tr.cursor-pointer:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: hsl(var(--b3)); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: hsl(var(--bc) / 0.3); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: hsl(var(--bc) / 0.5); }

@keyframes float { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-5px);} }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 5px rgba(45,85,93,.5);} 50% { box-shadow: 0 0 20px rgba(45,85,93,.8);} }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.float-animation { animation: float 3s ease-in-out infinite; }
[data-theme="dark"] .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Tab design */
.tab {
  transition: all 0.3s ease;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
}
.tab-active {
  background: linear-gradient(135deg, hsl(var(--b1)) 0%, hsl(var(--b2)) 100%);
  border-bottom: 2px solid hsl(var(--p));
  color: hsl(var(--p));
}

/* Mindmap colours for dialogs / controller-driven maps */
[data-controller="mindmap"] jmnode,
.mindmap-presentation jmnode {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
[data-controller="mindmap"] jmnode.selected,
jmnode.selected {
  background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
  box-shadow: 0 0 10px rgba(45,85,93,.5);
} 
/* Video Workspace - Timeline, clip regions, creator controls, clip cards */

:root {
  --vw-sidebar-width: 344px;
  --vw-sidebar-gap: 16px;
  --vw-player-radius: 8px;
}

/* ── Fullscreen Video Page ──────────────────────────────── */

body.video-fullscreen-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.video-fullscreen-page main {
  padding: 0;
  max-width: none;
}

.video-fullscreen-container {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Floating back button */
.video-back-btn {
  position: fixed;
  top: 92px;
  left: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.video-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

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

/* Floating title */
.video-title {
  position: fixed;
  top: 92px;
  left: 80px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  max-width: calc(100% - 120px);
}

.video-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Adjust workspace when in fullscreen mode */
.video-fullscreen-container .video-workspace {
  padding: 80px 20px 16px 20px;
  --vw-sidebar-width: 420px;
}

.video-fullscreen-container .video-workspace__player-group {
  width: calc(100% - var(--vw-sidebar-width) - var(--vw-sidebar-gap));
}

/* Limit player height so clips are visible */
.video-fullscreen-container .video-workspace__main {
  max-height: calc(100vh - 380px);
}

.video-fullscreen-container .video-workspace__player-group mux-player {
  max-height: calc(100vh - 380px);
  aspect-ratio: 16/9;
}

/* ── Workspace Container ─────────────────────────────────── */

.video-workspace {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px 20px;
}

.video-workspace__top {
  position: relative;
}

.video-workspace__player-group {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--vw-sidebar-width) - var(--vw-sidebar-gap));
}

/* ── Sidebar (right of player) ───────────────────────────── */

.video-workspace__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--vw-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid oklch(var(--b3));
  border-radius: 10px;
  background: oklch(var(--b1));
  box-shadow: 0 1px 3px oklch(var(--bc) / 0.04);
}

.video-workspace__player-group mux-player {
  border-radius: var(--vw-player-radius) var(--vw-player-radius) 0 0;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}

/* ── Clips Panel (below player) ──────────────────────────── */

.clips-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid oklch(var(--b3));
  margin-bottom: 12px;
}

.clips-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: oklch(var(--bc));
}

.clips-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.6);
}

.clips-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clips-panel__actions .btn {
  font-weight: 500;
}

.clips-panel__loading {
  text-align: center;
  padding: 32px 0;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

.clips-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  height: 140px;
  color: oklch(var(--bc) / 0.35);
  font-size: 13px;
  line-height: 1.6;
}

.clips-panel__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

/* ── Clips Panel Tabs ─────────────────────────────────────── */

.clips-panel__tabs {
  display: flex;
  gap: 4px;
}

.clips-panel__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.5);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.clips-panel__tab:hover {
  color: oklch(var(--bc) / 0.75);
  background: oklch(var(--bc) / 0.03);
}

.clips-panel__tab:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
}

.clips-panel__tab--active {
  color: oklch(var(--bc));
  border-bottom-color: oklch(var(--p));
}

.clips-panel__tab--active svg {
  color: oklch(var(--p));
}

.clips-panel__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.5);
}

.clips-panel__tab--active .clips-panel__tab-count {
  background: oklch(var(--p) / 0.12);
  color: oklch(var(--p));
}

.clips-panel__tab-count--ai {
  background: oklch(var(--p) / 0.1);
  color: oklch(var(--p));
}

.clips-panel__content {
  padding-top: 12px;
}

.clips-panel__content--active {
  display: block;
}

/* ── Transcript Sidebar Header ────────────────────────────── */

.transcript-sidebar__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
}

.transcript-sidebar__icon {
  color: oklch(var(--bc) / 0.4);
  flex-shrink: 0;
}

.transcript-sidebar__title {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc) / 0.8);
}

.transcript-panel__unavailable {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

/* ── Timeline ─────────────────────────────────────────────── */

.video-timeline-container {
  position: relative;
  margin-top: 8px;
}

.video-timeline {
  position: relative;
  height: 72px;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04);
}

@media (max-width: 600px) {
  .video-timeline { height: 56px; }
}

.video-timeline__track {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* ── Waveform ─────────────────────────────────── */

.video-timeline__waveform {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 1px;
  z-index: 1;
  overflow: hidden;
}

.video-timeline__bar {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 1px;
}

@media (max-width: 600px) {
  .video-timeline__waveform { padding: 8px 4px; }
}

/* ── Time Scale ───────────────────────────────── */

.video-timeline__scale {
  position: relative;
  height: 24px;
  margin-top: 4px;
  pointer-events: none;
}

.video-timeline__tick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.video-timeline__tick::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(var(--bc) / 0.15);
}

.video-timeline__tick--major::before {
  width: 5px;
  height: 5px;
  background: oklch(var(--bc) / 0.25);
}

.video-timeline__tick-label {
  margin-top: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
  color: oklch(var(--bc) / 0.35);
  white-space: nowrap;
}

/* ── Playhead / Needle ────────────────────────── */

.video-timeline__playhead {
  position: absolute;
  top: -2px;
  bottom: -8px;
  width: 2px;
  margin-left: -1px;
  background: #182038;
  z-index: 20;
  cursor: ew-resize;
}

/* Larger hit area for easier dragging */
.video-timeline__playhead::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
}

.video-timeline__playhead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2.5px solid #182038;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Hover Time Tooltip ───────────────────────── */

.video-timeline__hover-time {
  position: absolute;
  top: -34px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: #222;
  color: #fff;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 30;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.video-timeline__hover-time::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #222;
}

.video-timeline:hover .video-timeline__hover-time {
  opacity: 1;
}

/* ── Clip Outline on Timeline ─────────────────── */

.video-timeline__clip {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 8px;
  border: 2.5px solid var(--clip-color, #3B82F6);
  background: rgba(255,255,255,0.5);
  min-width: 8px;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.15s, background 0.15s;
}

.video-timeline__clip:hover {
  background: rgba(255,255,255,0.65);
}

.video-timeline__clip--selected {
  background: rgba(255,255,255,0.5);
}

.video-timeline__clip--playing {
  animation: clip-pulse 1.5s ease-in-out infinite;
}

@keyframes clip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ── I/O Selection Region ─────────────────────── */

.video-timeline__selection {
  --selection-color: #4b4edc;
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 8px;
  border: 2.5px solid var(--selection-color);
  background: rgba(255,255,255,0.5);
  z-index: 5;
  pointer-events: none;
}

.video-timeline__selection--marker-only {
  border: none;
  background: none;
}

.video-timeline__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 6;
  pointer-events: auto;
}

.video-timeline__clip .video-timeline__handle {
  background: var(--clip-color, #3B82F6);
}

.video-timeline__selection .video-timeline__handle {
  background: var(--selection-color, #4b4edc);
}

.video-timeline__handle--left {
  left: -2px;
  border-radius: 6px 2px 2px 6px;
}

.video-timeline__handle--right {
  right: -2px;
  border-radius: 2px 6px 6px 2px;
}

.video-timeline__handle-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.video-timeline__handle-dots span {
  display: flex;
  gap: 3px;
}

.video-timeline__handle-dots span::before,
.video-timeline__handle-dots span::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

@media (max-width: 600px) {
  .video-timeline__handle { width: 12px; }
}

/* ── Time Display ─────────────────────────────── */

.video-timeline__time-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 0;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: oklch(var(--bc) / 0.5);
}

.video-timeline__time-current {
  font-weight: 600;
  color: oklch(var(--bc) / 0.75);
}

.video-timeline__time-sep {
  color: oklch(var(--bc) / 0.25);
}

/* ── Creator Controls ─────────────────────────────────────── */

.clip-creator {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid oklch(var(--b3));
}

.clip-creator__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clip-creator__mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.8);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 1px 2px oklch(var(--bc) / 0.04);
}

.clip-creator__mark-btn:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--bc) / 0.15);
}

.clip-creator__mark-btn:active {
  transform: scale(0.97);
}

.clip-creator__mark-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-creator__mark-btn--in.clip-creator__mark-btn--active {
  border-color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
  color: oklch(var(--su, 0.75 0.18 155));
  box-shadow: 0 0 0 1px oklch(var(--su, 0.75 0.18 155) / 0.1);
}

.clip-creator__mark-btn--out.clip-creator__mark-btn--active {
  border-color: oklch(var(--er, 0.65 0.25 25));
  background: oklch(var(--er, 0.65 0.25 25) / 0.1);
  color: oklch(var(--er, 0.65 0.25 25));
  box-shadow: 0 0 0 1px oklch(var(--er, 0.65 0.25 25) / 0.1);
}

.clip-creator__mark-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.clip-creator__transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.clip-creator__transport-btn:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.clip-creator__transport-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-creator__transport-btn--playing {
  border-color: oklch(var(--su, 0.75 0.18 155));
  color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
}

.clip-creator__transport-btn--stop:hover {
  border-color: oklch(var(--wa, 0.75 0.15 75));
  color: oklch(var(--wa, 0.75 0.15 75));
  background: oklch(var(--wa, 0.75 0.15 75) / 0.1);
}

.clip-creator__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid oklch(var(--bc) / 0.12);
  background: oklch(var(--bc) / 0.04);
  color: oklch(var(--bc) / 0.45);
}

.clip-creator__separator {
  width: 1px;
  height: 28px;
  background: oklch(var(--b3));
  margin: 0 4px;
}

.clip-creator__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.clip-creator__clear-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.7);
}

.clip-creator__clear-btn svg {
  opacity: 0.7;
}

.clip-creator__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: oklch(var(--b2) / 0.5);
  border: 1px solid oklch(var(--b3));
  border-radius: 10px;
  margin-top: 4px;
}

.clip-creator__form-row {
  display: flex;
  gap: 10px;
}

.clip-creator__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc));
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.clip-creator__input::placeholder {
  color: oklch(var(--bc) / 0.4);
}

.clip-creator__input--title {
  font-weight: 500;
}

.clip-creator__input:focus {
  outline: none;
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.clip-creator__input--error {
  border-color: oklch(var(--er, 0.65 0.25 25));
}

.clip-creator__error {
  font-size: 12px;
  color: oklch(var(--er, 0.65 0.25 25));
}

.clip-creator__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.clip-creator__save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.clip-creator__save-btn:hover {
  opacity: 0.9;
}

.clip-creator__save-btn:active {
  transform: scale(0.97);
}

.clip-creator__save-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

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

.clip-creator__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.clip-creator__cancel-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.8);
}

/* ── Clips List ───────────────────────────────────────────── */

.clips-list__generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid oklch(var(--bc) / 0.15);
  background: oklch(var(--bc));
  color: oklch(var(--b1));
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.clips-list__generate-btn:hover {
  opacity: 0.85;
}

.clips-list__generate-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

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

/* ── Clip Card ────────────────────────────────────────────── */

.clip-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  height: 100px;
  background: oklch(var(--b1));
  border-radius: 10px;
  border: 1px solid oklch(var(--b3));
  transition: border-color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
  box-shadow: 0 1px 3px oklch(var(--bc) / 0.04);
}

.clip-card:hover {
  background: oklch(var(--b2) / 0.7);
  border-color: oklch(var(--bc) / 0.15);
  box-shadow: 0 2px 8px oklch(var(--bc) / 0.06);
}

.clip-card--selected {
  border-color: oklch(var(--p));
  background: oklch(var(--p) / 0.04);
  box-shadow: 0 0 0 1px oklch(var(--p) / 0.1);
}

.clip-card--playing {
  border-color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.06);
  box-shadow: 0 0 0 2px oklch(var(--su, 0.75 0.18 155) / 0.12);
}

.clip-card--flash {
  animation: clip-card-flash 1s ease-out;
}

@keyframes clip-card-flash {
  0% { box-shadow: 0 0 0 4px oklch(var(--su, 0.75 0.18 155) / 0.4); }
  100% { box-shadow: 0 0 0 0px oklch(var(--su, 0.75 0.18 155) / 0); }
}

/* Thumbnail wrapper with play overlay */
.clip-card__thumbnail-wrap {
  position: relative;
  width: 120px;
  flex-shrink: 0;
  align-self: stretch;
}

.clip-card__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: oklch(var(--b3));
  display: block;
}

.clip-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  color: #fff;
}

.clip-card:hover .clip-card__overlay,
.clip-card--playing .clip-card__overlay--transport {
  opacity: 1;
}

/* Focus-visible states for keyboard accessibility */
.clip-card:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-card__overlay--play {
  cursor: pointer;
}

.clip-card__overlay--play:hover {
  background: rgba(0, 0, 0, 0.5);
}

.clip-card__overlay--transport {
  background: rgba(0, 0, 0, 0.5);
}

.clip-card__overlay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}

.clip-card__overlay-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.clip-card__overlay-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.clip-card__overlay-btn--stop:hover {
  background: rgba(239, 68, 68, 0.5);
}

.clip-card__color-bar {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.clip-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Header always at top */
.clip-card__header {
  flex-shrink: 0;
}

.clip-card__title {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--bc));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.clip-card__time {
  font-size: 12px;
  color: oklch(var(--bc) / 0.45);
  font-family: ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Content area takes remaining space */
.clip-card__content {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clip-card__description,
.clip-card__transcript {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  cursor: default;
}

.clip-card__description {
  color: oklch(var(--bc) / 0.55);
}

.clip-card__transcript {
  color: oklch(var(--bc) / 0.4);
}

.clip-card__content-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 18px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px;
  border-radius: 4px;
  background: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc) / 0.6);
  white-space: nowrap;
}

.clip-card__content-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-card__transcript .clip-card__content-text {
  font-style: italic;
}

/* Tooltip for full text */
.clip-card__tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 400px;
  padding: 10px 12px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: oklch(var(--bc));
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 4px 20px oklch(var(--bc) / 0.15);
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.clip-card__tooltip--visible {
  opacity: 1;
  visibility: visible;
}

.clip-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s;
}

:is(.clip-card:hover, .clip-card--selected, .clip-card--playing) .clip-card__actions {
  opacity: 1;
}

.clip-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: oklch(var(--bc) / 0.05);
  color: oklch(var(--bc) / 0.45);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.clip-card__action-btn:hover {
  background: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc) / 0.8);
}

.clip-card__action-btn:active {
  transform: scale(0.92);
}

.clip-card__action-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-card__action-btn--delete:hover {
  background: oklch(var(--er, 0.65 0.25 25) / 0.12);
  color: oklch(var(--er, 0.65 0.25 25));
}

.clip-card__action-btn--attach:hover {
  background: oklch(var(--p) / 0.12);
  color: oklch(var(--p));
}

/* ── Clip Card Inline Edit ────────────────────────────────── */

.clip-card--editing {
  background: oklch(var(--b1));
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 2px oklch(var(--p) / 0.12);
  padding: 14px;
}

.clip-card__edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.clip-card__edit-input {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
  color: oklch(var(--bc));
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.clip-card__edit-input::placeholder {
  color: oklch(var(--bc) / 0.4);
}

.clip-card__edit-input:first-child {
  font-weight: 500;
}

.clip-card__edit-input:focus {
  outline: none;
  border-color: oklch(var(--p));
  background: oklch(var(--b1));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.clip-card__edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.clip-card__edit-actions .btn {
  padding: 8px 16px;
  font-weight: 600;
}

.clip-card__edit-actions .btn-primary {
  gap: 6px;
}

.clip-card__edit-actions .btn-ghost {
  color: oklch(var(--bc) / 0.6);
}

.clip-card__edit-actions .btn-ghost:hover {
  color: oklch(var(--bc) / 0.8);
}

/* ── AI Generation Status ─────────────────────────────────── */

.clips-ai-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 auto;
  background: oklch(var(--b2));
  border-radius: 12px;
  border: 1px solid oklch(var(--b3));
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
  min-width: 220px;
  max-width: 280px;
}

.clips-ai-status.is-visible {
  display: flex;
}

.clips-ai-status__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid oklch(var(--p) / 0.2);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: clip-spin 0.6s linear infinite;
}

.clips-ai-status__error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: oklch(var(--er, 0.65 0.25 25));
}

.clips-ai-status__error svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.clips-ai-status__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 200px;
}

.clips-ai-status__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clips-ai-status__message {
  flex: 1;
  font-size: 12px;
  color: oklch(var(--bc) / 0.7);
}

.clips-ai-status__percentage {
  font-size: 11px;
  font-weight: 600;
  color: oklch(var(--p));
  min-width: 32px;
  text-align: right;
}

.clips-ai-status__progress-bar {
  width: 100%;
  height: 4px;
  background: oklch(var(--b3));
  border-radius: 2px;
  overflow: hidden;
}

.clips-ai-status__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(var(--p)), oklch(var(--p) / 0.8));
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

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

/* ── Workspace Tabs ──────────────────────────────────────── */

.workspace-tabs__nav {
  display: flex;
  flex-shrink: 0;
  background: oklch(var(--b2) / 0.5);
  border-bottom: 1px solid oklch(var(--b3));
  padding: 0;
}

.workspace-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.workspace-tabs__icon {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.workspace-tabs__label {
  font-weight: 600;
}

.workspace-tabs__tab:hover {
  color: oklch(var(--bc) / 0.75);
  background: oklch(var(--bc) / 0.03);
}

.workspace-tabs__tab:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
}

.workspace-tabs__tab:hover .workspace-tabs__icon {
  opacity: 0.75;
}

.workspace-tabs__tab--active {
  color: oklch(var(--bc));
  border-bottom-color: oklch(var(--p));
  background: oklch(var(--b1));
}

.workspace-tabs__tab--active .workspace-tabs__icon {
  opacity: 1;
  color: oklch(var(--p));
}

.workspace-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 11px;
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
  box-shadow: 0 1px 3px oklch(var(--p) / 0.3);
}

.workspace-tabs__panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.15) transparent;
}

.workspace-tabs__panel::-webkit-scrollbar {
  width: 6px;
}

.workspace-tabs__panel::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-tabs__panel::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.12);
  border-radius: 3px;
}

.workspace-tabs__panel::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.25);
}

/* ── Attach Modal ────────────────────────────────────────── */

.attach-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.attach-modal.is-open {
  display: flex;
}

.attach-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.4);
}

.attach-modal__content {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  background: oklch(var(--b1));
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.25);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s;
}

.attach-modal.is-open .attach-modal__content {
  transform: scale(1) translateY(0);
}

.attach-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid oklch(var(--b3));
}

.attach-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: oklch(var(--bc));
  margin: 0;
}

.attach-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.attach-modal__close:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.attach-modal__body {
  padding: 20px;
}

.attach-modal__clip-info {
  padding: 12px 14px;
  background: oklch(var(--b2));
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  margin-bottom: 20px;
}

.attach-modal__clip-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.attach-modal__clip-info p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.4;
}

.attach-modal__clip-info p + p {
  margin-top: 2px;
}

.attach-modal__field {
  margin-bottom: 16px;
}

.attach-modal__field:last-of-type {
  margin-bottom: 0;
}

.attach-modal__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: oklch(var(--bc) / 0.5);
  margin-bottom: 6px;
}

.attach-modal__select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: oklch(var(--bc));
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

.attach-modal__select:hover {
  border-color: oklch(var(--bc) / 0.3);
}

.attach-modal__select:focus {
  outline: none;
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.attach-modal__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.attach-modal__select option:disabled {
  color: oklch(var(--bc) / 0.35);
}

.attach-modal__warning {
  padding: 10px 12px;
  font-size: 12px;
  color: oklch(var(--wa, 0.8 0.1 85));
  background: oklch(var(--wa, 0.8 0.1 85) / 0.1);
  border: 1px solid oklch(var(--wa, 0.8 0.1 85) / 0.2);
  border-radius: 6px;
  margin-top: 16px;
}

.attach-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
  border-radius: 0 0 12px 12px;
}

.attach-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.attach-modal__btn--cancel {
  background: transparent;
  color: oklch(var(--bc) / 0.6);
}

.attach-modal__btn--cancel:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.attach-modal__btn--primary {
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
}

.attach-modal__btn--primary:hover:not(:disabled) {
  opacity: 0.9;
}

.attach-modal__btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.attach-modal__btn .loading {
  width: 14px;
  height: 14px;
  border: 2px solid oklch(var(--pc, 1 0 0) / 0.3);
  border-top-color: oklch(var(--pc, 1 0 0));
  border-radius: 50%;
  animation: attach-spin 0.6s linear infinite;
}

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

/* Loading state */
.attach-modal__loading {
  text-align: center;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.attach-modal__loading p {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  margin: 0;
}

/* Success state */
.attach-modal__success {
  text-align: center;
  padding: 24px 20px;
}

.attach-modal__success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--su, 0.75 0.18 155));
}

.attach-modal__success h4 {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--su, 0.75 0.18 155));
  margin: 0 0 6px 0;
}

.attach-modal__success p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.5;
}

.attach-modal__view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.1);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.attach-modal__view-link:hover {
  background: oklch(var(--p) / 0.2);
  color: oklch(var(--p));
}

.attach-modal__view-link svg {
  flex-shrink: 0;
}

/* Progress state */
.attach-modal__progress {
  padding: 32px 20px;
  text-align: center;
}

.attach-modal__progress-bar {
  width: 100%;
  height: 6px;
  background: oklch(var(--b3));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.attach-modal__progress-fill {
  height: 100%;
  background: oklch(var(--p));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.attach-modal__progress-text {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  margin: 0;
}

/* Error state */
.attach-modal__error {
  text-align: center;
  padding: 24px 20px;
}

.attach-modal__error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: oklch(var(--er, 0.65 0.25 25) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--er, 0.65 0.25 25));
}

.attach-modal__error h4 {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--er, 0.65 0.25 25));
  margin: 0 0 6px 0;
}

.attach-modal__error p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.5;
}

/* ── Transcript Panel ────────────────────────────────────── */

.transcript-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.15) transparent;
}

.transcript-panel::-webkit-scrollbar {
  width: 6px;
}

.transcript-panel::-webkit-scrollbar-track {
  background: transparent;
}

.transcript-panel::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.12);
  border-radius: 3px;
}

.transcript-panel::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.25);
}

.transcript-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

.transcript-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.35);
  font-size: 13px;
}

.transcript-panel__body {
  margin: 0 -16px;
}

/* Segment rows */

.transcript-segment {
  display: flex;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s;
  align-items: baseline;
}

.transcript-segment:hover {
  background: oklch(var(--bc) / 0.04);
}

.transcript-segment--active {
  background: oklch(var(--p) / 0.06);
  border-left: 2px solid oklch(var(--p));
  padding-left: 14px;
}

.transcript-segment--active .transcript-segment__text {
  color: oklch(var(--bc));
  font-weight: 500;
}

.transcript-segment--active .transcript-segment__time {
  color: oklch(var(--p));
  font-weight: 600;
}

.transcript-segment__time {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: oklch(var(--bc) / 0.3);
  flex-shrink: 0;
  line-height: 1.6;
  min-width: 32px;
}

.transcript-segment__text {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  line-height: 1.6;
}

/* Follow playback button */

.transcript-follow-btn {
  position: sticky;
  bottom: 8px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: oklch(var(--pc, 1 0 0));
  background: oklch(var(--p));
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px oklch(var(--p) / 0.3);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
  margin: 8px auto 0;
}

.transcript-follow-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px oklch(var(--p) / 0.35);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1023px) {
  .video-workspace {
    --vw-sidebar-width: 100%;
    --vw-sidebar-gap: 0px;
  }

  .video-workspace__player-group {
    width: 100%;
  }

  .video-workspace__sidebar {
    position: static;
    width: 100%;
    height: 360px;
    margin-top: 12px;
  }

  .video-fullscreen-container .video-workspace__player-group {
    width: 100%;
  }
}

@media (max-width: 639px) {
  .video-workspace {
    padding: 10px 12px;
  }

  .video-workspace__sidebar {
    height: 300px;
  }

  .clip-card__thumbnail-wrap,
  .clip-card__thumbnail {
    width: 80px;
    height: 54px;
  }

  .clip-creator__kbd {
    display: none;
  }

  .video-back-btn {
    width: 40px;
    height: 40px;
  }

  .video-title {
    left: 70px;
    font-size: 13px;
    padding: 8px 12px;
  }

  .video-fullscreen-container .video-workspace {
    padding: 70px 12px 10px 12px;
  }
}
/**
 * @license BSD
 * @copyright 2014-2025 hizzgdev@163.com
 *
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 *
 * Custom styling based on Dialog app design
 */

/* ========================================
   Full-screen Mindmap Layout
   ======================================== */

/* Page body styles for full-screen mindmap */
body.mindmap-fullscreen-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.mindmap-fullscreen-page main {
  padding: 0;
  max-width: none;
}

/* Main container - fixed full screen (accounting for navbar ~72px) */
.mindmap-container {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.mindmap-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  box-sizing: border-box;
}

#mindmap_container {
  width: 100%;
  height: 100%;
}

/* The actual jsMind canvas container */
.mindmap-canvas {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  box-shadow: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Floating back button (positioned inside mindmap-container) */
.mindmap-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mindmap-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

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

/* Floating title (positioned inside mindmap-container) */
.mindmap-title {
  position: absolute;
  top: 20px;
  left: 80px;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  font-size: 14px;
}

/* ========================================
   jsMind Core Styles
   ======================================== */

.jsmind-inner {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
  outline: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.jsmind-inner::-webkit-scrollbar {
  display: none;
}

.jsmind-inner canvas {
  position: absolute;
}

svg.jsmind {
  position: absolute;
  z-index: 1;
}

canvas.jsmind {
  position: absolute;
  z-index: 1;
}

jmnodes {
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
}

jmnode {
  position: absolute;
  cursor: pointer;
  width: 220px;
  box-sizing: border-box;
  /* Smooth position transitions when expanding/collapsing */
  transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.2s ease-out;
}

jmexpander {
  position: absolute;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-align: center;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  background-color: #ffffff;
  color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Smooth transitions for position and visual changes */
  transition: left 0.25s ease-out, top 0.25s ease-out, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

jmexpander:hover {
  background-color: oklch(var(--p));
  border-color: oklch(var(--p));
  color: oklch(var(--pc));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: scale(1.15);
}

.jmnode-overflow-wrap jmnodes {
  min-width: 420px;
}

.jmnode-overflow-hidden jmnode {
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ========================================
   Node Styling - Clean White with Colored Left Border
   Each level has a distinct color border
   ======================================== */

jmnode {
  padding: 10px 14px 10px 16px !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  border-left: 4px solid #6b7280 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  /* Smooth transitions for position and visual properties */
  transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.2s ease-out,
              background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: normal !important;
  overflow: hidden !important;
  width: 220px !important;
  min-height: 40px !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis !important;
}

/* Line clamp only when visible - don't override jsMind's display:none */
jmnode:not([style*="display: none"]) {
  display: -webkit-box;
}

/* Depth-based left border colors - highly contrasting */
jmnode[data-depth="1"] {
  border-left-color: #2563eb !important; /* Blue */
}

jmnode[data-depth="2"] {
  border-left-color: #059669 !important; /* Green */
}

jmnode[data-depth="3"] {
  border-left-color: #d97706 !important; /* Orange */
}

jmnode[data-depth="4"] {
  border-left-color: #dc2626 !important; /* Red */
}

jmnode[data-depth="5"],
jmnode[data-depth="6"],
jmnode[data-depth="7"],
jmnode[data-depth="8"] {
  border-left-color: #7c3aed !important; /* Purple */
}

jmnode:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px);
}

jmnode.selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Root node - same base style but with emphasis to stand out as central node */
jmnode.root,
jmnode[data-depth="0"] {
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px 14px 20px !important;
  width: 260px !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1.5px solid #d1d5db !important;
  /* Thicker left border for emphasis */
  border-left: 6px solid #374151 !important;
  /* Elevated shadow effect - makes it "float" above other nodes */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

jmnode.root:hover,
jmnode[data-depth="0"]:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  border-left-color: #1f2937 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

jmnode.root.selected,
jmnode[data-depth="0"].selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  border-left: 6px solid #2563eb !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.25),
    0 4px 6px -1px rgba(59, 130, 246, 0.15),
    0 10px 15px -3px rgba(59, 130, 246, 0.1) !important;
}

/* Level badges - positioned near the branch connection */
.node-level-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  color: white;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.node-level-badge[data-level="1"] { background-color: #6b7280; }
.node-level-badge[data-level="2"] { background-color: #9ca3af; }
.node-level-badge[data-level="3"] { background-color: #d1d5db; color: #6b7280; }
.node-level-badge[data-level="4"] { background-color: #e5e7eb; color: #9ca3af; }
.node-level-badge[data-level="5"],
.node-level-badge[data-level="6"],
.node-level-badge[data-level="7"],
.node-level-badge[data-level="8"] { background-color: #f3f4f6; color: #9ca3af; }

/* ========================================
   Theme Overrides - Apply Clean White with Colored Borders
   ======================================== */

/* Override all themes to use clean white with colored left border */
jmnodes[class*="theme-"] jmnode {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-left: 4px solid #6b7280 !important;
  color: #374151 !important;
}

jmnodes[class*="theme-"] jmnode[data-depth="1"] { border-left-color: #6b7280 !important; }
jmnodes[class*="theme-"] jmnode[data-depth="2"] { border-left-color: #9ca3af !important; }
jmnodes[class*="theme-"] jmnode[data-depth="3"] { border-left-color: #d1d5db !important; }
jmnodes[class*="theme-"] jmnode[data-depth="4"] { border-left-color: #e5e7eb !important; }
jmnodes[class*="theme-"] jmnode[data-depth="5"],
jmnodes[class*="theme-"] jmnode[data-depth="6"],
jmnodes[class*="theme-"] jmnode[data-depth="7"],
jmnodes[class*="theme-"] jmnode[data-depth="8"] { border-left-color: #f3f4f6 !important; }

jmnodes[class*="theme-"] jmnode:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

jmnodes[class*="theme-"] jmnode.selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
}

jmnodes[class*="theme-"] jmnode.root,
jmnodes[class*="theme-"] jmnode[data-depth="0"] {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1.5px solid #d1d5db !important;
  border-left: 6px solid #374151 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

jmnodes[class*="theme-"] jmnode.root.selected,
jmnodes[class*="theme-"] jmnode[data-depth="0"].selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  border-left: 6px solid #2563eb !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.25),
    0 4px 6px -1px rgba(59, 130, 246, 0.15),
    0 10px 15px -3px rgba(59, 130, 246, 0.1) !important;
}

/* Node with microlesson generated (orange/warning border) */
jmnodes[class*="theme-"] jmnode.has-microlesson {
  border-left-color: #FBBD23 !important;
}

/* Node with content added to course (green/success border) */
jmnodes[class*="theme-"] jmnode.added-to-course {
  border-left-color: #22c55e !important;
}

/* ========================================
   Node Badges (iOS-style notification badges)
   ======================================== */

.node-badge {
  position: absolute;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 100;
  pointer-events: auto;
  cursor: default;
}

/* CSS tooltip for node badges — works on macOS, Windows, and Linux */
.node-badge[data-tooltip] {
  position: absolute;
}

.node-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

.node-badge[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

.node-badge[data-tooltip]:hover::after,
.node-badge[data-tooltip]:hover::before {
  opacity: 1;
}


.node-badge-warning {
  background: #FBBD23;
  color: #ffffff;
  border: 1px solid #f59e0b;
  box-shadow: 0 1px 3px rgba(251, 189, 35, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-processing {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.node-badge-neutral {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-loading {
  background: #ffffff;
  border: 1px solid oklch(var(--p) / 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid oklch(var(--p) / 0.2);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: node-badge-spin 0.8s linear infinite;
}

@keyframes node-badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Success badge for checkmark icon (used after generation) */
.node-badge-success:has(.node-badge-icon) {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2px;
  min-width: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: node-badge-pop 0.3s ease-out;
}

/* Success badge for number (used when all goals added to course) */
.node-badge-success:not(:has(.node-badge-icon)) {
  background: #22c55e;
  color: #ffffff;
  border: 1px solid #16a34a;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-success:has(.node-badge-icon) .node-badge-icon {
  width: 18px;
  height: 18px;
  color: oklch(var(--bc)) !important;
  stroke: oklch(var(--bc)) !important;
}

@keyframes node-badge-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================
   Mobile Responsive
   ======================================== */

@media screen and (max-device-width: 1024px) {
  jmnode {
    padding: 8px 12px;
    font-size: 13px;
    max-width: 200px;
  }

  jmnode.root {
    font-size: 15px;
    padding: 10px 14px;
    max-width: 250px;
  }

  .mindmap-back-btn {
    width: 40px;
    height: 40px;
  }

  .mindmap-title {
    left: 70px;
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ========================================
   Legacy Theme Definitions (for compatibility)
   ======================================== */

/* primary theme */
jmnodes.theme-primary jmnode {
  background-color: #428bca;
  color: #fff;
  border-color: #357ebd;
}
jmnodes.theme-primary jmnode:hover {
  background-color: #3276b1;
  border-color: #285e8e;
}
jmnodes.theme-primary jmnode.selected {
  background-color: #f1c40f;
  color: #fff;
}

/* warning theme */
jmnodes.theme-warning jmnode {
  background-color: #f0ad4e;
  border-color: #eea236;
  color: #fff;
}
jmnodes.theme-warning jmnode:hover {
  background-color: #ed9c28;
  border-color: #d58512;
}
jmnodes.theme-warning jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* danger theme */
jmnodes.theme-danger jmnode {
  background-color: #d9534f;
  border-color: #d43f3a;
  color: #fff;
}
jmnodes.theme-danger jmnode:hover {
  background-color: #d2322d;
  border-color: #ac2925;
}
jmnodes.theme-danger jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* success theme */
jmnodes.theme-success jmnode {
  background-color: #5cb85c;
  border-color: #4cae4c;
  color: #fff;
}
jmnodes.theme-success jmnode:hover {
  background-color: #47a447;
  border-color: #398439;
}
jmnodes.theme-success jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* info theme */
jmnodes.theme-info jmnode {
  background-color: #5dc0de;
  border-color: #46b8da;
  color: #fff;
}
jmnodes.theme-info jmnode:hover {
  background-color: #39b3d7;
  border-color: #269abc;
}
jmnodes.theme-info jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* greensea theme */
jmnodes.theme-greensea jmnode {
  background-color: #1abc9c;
  color: #fff;
}
jmnodes.theme-greensea jmnode:hover {
  background-color: #16a085;
}
jmnodes.theme-greensea jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* nephrite theme */
jmnodes.theme-nephrite jmnode {
  background-color: #2ecc71;
  color: #fff;
}
jmnodes.theme-nephrite jmnode:hover {
  background-color: #27ae60;
}
jmnodes.theme-nephrite jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* belizehole theme */
jmnodes.theme-belizehole jmnode {
  background-color: #3498db;
  color: #fff;
}
jmnodes.theme-belizehole jmnode:hover {
  background-color: #2980b9;
}
jmnodes.theme-belizehole jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* wisteria theme */
jmnodes.theme-wisteria jmnode {
  background-color: #9b59b6;
  color: #fff;
}
jmnodes.theme-wisteria jmnode:hover {
  background-color: #8e44ad;
}
jmnodes.theme-wisteria jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* asphalt theme */
jmnodes.theme-asphalt jmnode {
  background-color: #34495e;
  color: #fff;
}
jmnodes.theme-asphalt jmnode:hover {
  background-color: #2c3e50;
}
jmnodes.theme-asphalt jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* orange theme */
jmnodes.theme-orange jmnode {
  background-color: #f1c40f;
  color: #fff;
}
jmnodes.theme-orange jmnode:hover {
  background-color: #f39c12;
}
jmnodes.theme-orange jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* pumpkin theme */
jmnodes.theme-pumpkin jmnode {
  background-color: #e67e22;
  color: #fff;
}
jmnodes.theme-pumpkin jmnode:hover {
  background-color: #d35400;
}
jmnodes.theme-pumpkin jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* pomegranate theme */
jmnodes.theme-pomegranate jmnode {
  background-color: #e74c3c;
  color: #fff;
}
jmnodes.theme-pomegranate jmnode:hover {
  background-color: #c0392b;
}
jmnodes.theme-pomegranate jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* clouds theme */
jmnodes.theme-clouds jmnode {
  background-color: #ecf0f1;
  color: #333;
}
jmnodes.theme-clouds jmnode:hover {
  background-color: #bdc3c7;
}
jmnodes.theme-clouds jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* asbestos theme */
jmnodes.theme-asbestos jmnode {
  background-color: #95a5a6;
  color: #fff;
}
jmnodes.theme-asbestos jmnode:hover {
  background-color: #7f8c8d;
}
jmnodes.theme-asbestos jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* ========================================
   Drag and Drop Styles (for lesson plan)
   ======================================== */

.lesson-plan-item {
  transition: all 0.2s ease;
}

.lesson-plan-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lesson-plan-item.dragging {
  opacity: 0.5;
  background-color: var(--b3);
}

.lesson-plan-item.drag-over {
  border-top: 2px solid var(--primary);
}

/* ========================================
   Combined Node Panel (Left + Right)
   ======================================== */

.node-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 75vw;
  height: 75vh;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  border-radius: 12px;
  z-index: 1003;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.node-panel.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Backdrop with blur - separate element */
.node-panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 1002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.node-panel-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.node-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* Left Side - Node Info & Goals */
.node-panel-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Right Side - Microlesson */
.node-panel-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.node-panel-header {
  padding: 16px 20px;
}

.node-panel-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

.node-panel-description {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

.node-panel-section {
  flex-shrink: 0;
}

.node-panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.node-panel-chat {
  padding: 12px 20px;
}

.node-panel-goals-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.node-panel-goals {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
}

.node-panel-goals::-webkit-scrollbar {
  width: 6px;
}

.node-panel-goals::-webkit-scrollbar-track {
  background: transparent;
}

.node-panel-goals::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.node-panel-goal {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.node-panel-goal:hover {
  background: rgba(0, 0, 0, 0.03);
}

.node-panel-goal.is-selected {
  background: oklch(var(--p) / 0.1);
  border-left: 3px solid oklch(var(--p));
  padding-left: 13px;
}

.node-panel-goal-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.node-panel-goal-text {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  line-height: 1.4;
}

.node-panel-goal-description {
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
  line-height: 1.4;
}

.node-panel-goal-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
  align-self: flex-start;
}

.node-panel-goal-badge.badge-beginner {
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
}

.node-panel-goal-badge.badge-intermediate {
  background: oklch(var(--wa) / 0.15);
  color: oklch(var(--wa));
}

.node-panel-goal-badge.badge-advanced {
  background: oklch(var(--er) / 0.15);
  color: oklch(var(--er));
}

/* Tags container */
.node-panel-goal-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Generated Tag (orange/warning = microlesson generated but not added to course) */
.node-panel-goal-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--wa) / 0.15);
  color: oklch(var(--wa));
  flex-shrink: 0;
}

/* Added Tag (green/success = content added to course) */
.node-panel-goal-tag-added {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
  flex-shrink: 0;
}

/* Generating Tag (blue/primary = microlesson generation in progress) */
.node-panel-goal-tag-generating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--p) / 0.15);
  color: oklch(var(--p));
  flex-shrink: 0;
}

.node-panel-goal-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid oklch(var(--p) / 0.3);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: goal-spinner-spin 0.8s linear infinite;
}

@keyframes goal-spinner-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Goal with generation in progress */
.node-panel-goal.is-generating {
  border-left: 3px solid oklch(var(--p));
  padding-left: 13px;
}

.node-panel-goal.has-generated {
  border-left: 3px solid oklch(var(--wa));
  padding-left: 13px;
}

.node-panel-goal.added-to-course {
  border-left: 3px solid oklch(var(--su));
  padding-left: 13px;
}

/* Keep original border colors when selected */
.node-panel-goal.has-generated.is-selected {
  border-left-color: oklch(var(--wa));
}

.node-panel-goal.added-to-course.is-selected {
  border-left-color: oklch(var(--su));
}

.node-panel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.node-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.node-panel-loading.hidden {
  display: none !important;
}

/* Created Content View - Shows lessons and course items created from a goal */
.created-content-lesson {
  margin-bottom: 12px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  overflow: hidden;
}

.created-content-lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: oklch(var(--su) / 0.08);
  border-bottom: 1px solid oklch(var(--b3));
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.created-content-lesson-header:hover {
  background: oklch(var(--su) / 0.15);
}

.created-content-lesson-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.created-content-lesson-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--su));
  background: oklch(var(--su) / 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.created-content-lesson-name {
  font-weight: 600;
  font-size: 14px;
  color: oklch(var(--bc));
}

.created-content-lesson-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: oklch(var(--bc) / 0.5);
}

.created-content-lesson-count {
  font-size: 12px;
}

.created-content-items {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.created-content-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: oklch(var(--b2));
  transition: all 0.2s ease;
}

.created-content-item:hover {
  background: oklch(var(--b3));
}

.created-content-item-position {
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.4);
  flex-shrink: 0;
}

.created-content-item-text {
  flex: 1;
  font-size: 13px;
  color: oklch(var(--bc) / 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.created-content-item-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: oklch(var(--b3));
  color: oklch(var(--bc) / 0.6);
  flex-shrink: 0;
}

.node-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.node-panel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  background: oklch(var(--su) / 0.1);
  color: oklch(var(--su));
  border-bottom: 1px solid oklch(var(--b3));
}

.node-panel-status.hidden {
  display: none !important;
}

.node-panel-microlesson-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0; /* Important for flex scroll */
}

.node-panel-microlesson-empty,
.node-panel-microlesson-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.node-panel-microlesson-empty.hidden,
.node-panel-microlesson-loading.hidden {
  display: none !important;
}

.node-panel-microlesson-items {
  display: block;
}

.node-panel-microlesson-items.hidden {
  display: none !important;
}

/* Section Label */
.node-panel-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.6);
  border-bottom: 1px solid oklch(var(--b3));
  background: oklch(var(--b2));
}

.node-panel-section-label svg {
  color: oklch(var(--p));
}

/* Microlesson Vector Cards */
.microlesson-vector {
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.microlesson-vector-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: oklch(var(--b2));
  transition: background 0.15s ease;
}

.microlesson-vector-header:hover {
  background: oklch(var(--b3));
}

.microlesson-vector-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.microlesson-vector-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.microlesson-vector-chevron {
  width: 14px;
  height: 14px;
  color: oklch(var(--bc) / 0.5);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.microlesson-vector-chevron.is-expanded {
  transform: rotate(90deg);
}

.microlesson-vector-name {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
}

.microlesson-vector-count {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.microlesson-vector-content {
  padding: 0;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.microlesson-vector-content.is-collapsed {
  max-height: 0;
  padding: 0;
}

/* Microlesson Items */
.microlesson-item {
  padding: 10px 12px;
  border-top: 1px solid oklch(var(--b3));
}

.microlesson-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.microlesson-item-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.microlesson-item-icon {
  width: 14px;
  height: 14px;
  color: oklch(var(--p));
  flex-shrink: 0;
}

.microlesson-item-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: oklch(var(--bc) / 0.5);
}

.microlesson-item-content {
  font-size: 13px;
  line-height: 1.5;
  color: oklch(var(--bc) / 0.8);
}

.microlesson-item-content.is-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.microlesson-item-content.is-expanded {
  display: block;
}

.microlesson-item-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.microlesson-item-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  background: oklch(var(--b2) / 0.5);
  border: 1px solid oklch(var(--bc) / 0.08);
}

.microlesson-item-option.is-correct {
  background: oklch(var(--su) / 0.08);
  border-color: oklch(var(--su) / 0.2);
}

.microlesson-item-option-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.6);
  flex-shrink: 0;
}

.microlesson-item-option.is-correct .microlesson-item-option-label {
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
}

.microlesson-item-option-text {
  flex: 1;
  color: oklch(var(--bc) / 0.8);
}

.microlesson-item-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--p));
  cursor: pointer;
  transition: color 0.15s ease;
}

.microlesson-item-toggle:hover {
  color: oklch(var(--pf));
}

.microlesson-item-toggle svg {
  transition: transform 0.2s ease;
}

.microlesson-item-toggle.is-expanded svg {
  transform: rotate(180deg);
}

/* Chat Button - Block/Card Style */
.node-panel-chat-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: oklch(var(--p) / 0.08);
  border: 1px solid oklch(var(--p) / 0.2);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.node-panel-chat-btn:hover {
  background: oklch(var(--p) / 0.15);
  border-color: oklch(var(--p) / 0.3);
  transform: translateY(-1px);
}

.node-panel-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: oklch(var(--p));
  color: oklch(var(--pc));
  border-radius: 8px;
  flex-shrink: 0;
}

.node-panel-chat-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.node-panel-chat-title {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
}

.node-panel-chat-subtitle {
  font-size: 11px;
  color: oklch(var(--bc) / 0.6);
}

.node-panel-footer {
  padding: 12px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Selection Bar */
.node-panel-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: oklch(var(--b2));
  border-radius: 8px;
}

.node-panel-selection-bar.hidden {
  display: none;
}

.node-panel-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
}

.node-panel-selection-summary {
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
}

/* Add to Course Panel */
.node-panel-add-course {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: oklch(var(--b1));
  display: flex;
  flex-direction: column;
  z-index: 10;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.node-panel-add-course.is-open {
  transform: translateX(0);
}

.node-panel-add-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: oklch(var(--su) / 0.1);
  border-bottom: 1px solid oklch(var(--b3));
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
}

.node-panel-chapter-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.node-panel-chapter-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.node-panel-chapter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: oklch(var(--b1));
}

.node-panel-chapter-item:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--p) / 0.3);
}

.node-panel-chapter-item.is-selected {
  background: oklch(var(--p) / 0.1);
  border-color: oklch(var(--p));
}

.node-panel-chapter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: oklch(var(--b2));
  border-radius: 6px;
  flex-shrink: 0;
}

.node-panel-chapter-item.is-selected .node-panel-chapter-icon {
  background: oklch(var(--p));
  color: oklch(var(--pc));
}

.node-panel-chapter-info {
  flex: 1;
  min-width: 0;
}

.node-panel-chapter-name {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-panel-chapter-meta {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.node-panel-chapter-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid oklch(var(--b3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.node-panel-chapter-item.is-selected .node-panel-chapter-check {
  background: oklch(var(--p));
  border-color: oklch(var(--p));
  color: oklch(var(--pc));
}

.node-panel-new-chapter {
  padding: 8px 16px;
  border-top: 1px solid oklch(var(--b3));
}

.node-panel-new-chapter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 2px dashed oklch(var(--b3));
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.7);
  transition: all 0.15s ease;
}

.node-panel-new-chapter-btn:hover {
  border-color: oklch(var(--p));
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.05);
}

/* Create Form */
.node-panel-create-form {
  margin-top: 10px;
  padding: 12px;
  background: oklch(var(--b2));
  border-radius: 8px;
}

.node-panel-create-form.hidden {
  display: none;
}

/* Add to Course - Lesson Items */
.add-to-course-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: oklch(var(--b1));
  text-align: left;
}

.add-to-course-lesson:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--p) / 0.3);
}

.add-to-course-lesson.is-selected {
  background: oklch(var(--p) / 0.1);
  border-color: oklch(var(--p));
}

.add-to-course-lesson-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-to-course-lesson-name {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-to-course-lesson-count {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.add-to-course-lesson-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid oklch(var(--b3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
  color: transparent;
}

.add-to-course-lesson.is-selected .add-to-course-lesson-check {
  background: oklch(var(--su));
  border-color: oklch(var(--su));
  color: oklch(var(--suc, var(--b1)));
}

.add-to-course-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.add-to-course-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

/* Responsive */
@media screen and (max-width: 640px) {
  .node-panel {
    width: calc(100vw - 20px);
    height: 85vh;
  }

  .node-panel-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .node-panel-left {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 40vh;
  }
}

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

/* ========================================
   Mindmap Expand/Collapse Controls
   ======================================== */

.mindmap-expand-controls {
  position: absolute;
  bottom: 48px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  pointer-events: auto;
}

/* ========================================
   Mindmap Zoom Controls
   ======================================== */

.mindmap-zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mindmap-control-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.4);
  padding-right: 2px;
  user-select: none;
}

.mindmap-level-display {
  font-size: 10px;
  font-weight: 700;
  color: oklch(var(--bc) / 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  background: oklch(var(--bc) / 0.08);
  user-select: none;
  min-width: 22px;
  text-align: center;
}

.mindmap-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: oklch(var(--bc) / 0.7);
  transition: all 0.15s ease;
}

.mindmap-control-btn:hover {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
}

.mindmap-control-btn:active {
  background: oklch(var(--b3));
}

/* Level buttons container */
.mindmap-level-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}

/* Individual level button */
.mindmap-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: oklch(var(--bc) / 0.5);
  transition: all 0.15s ease;
  user-select: none;
}

.mindmap-level-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.8);
}

.mindmap-level-btn.active {
  background: oklch(var(--p));
  color: oklch(var(--pc));
  border-color: oklch(var(--p));
}

.mindmap-level-btn.active:hover {
  background: oklch(var(--p) / 0.9);
}

.mindmap-zoom-level {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.7);
  user-select: none;
}

.mindmap-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 6px 10px;
  background: oklch(var(--b1) / 0.9);
  border: 1px solid oklch(var(--b3));
  border-radius: 6px;
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
  z-index: 10;
}

/* Minimap */
.mindmap-minimap {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f8fafc;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  overflow: visible;
  cursor: pointer;
}

.mindmap-minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.mindmap-minimap-viewport {
  position: absolute;
  box-sizing: border-box;
  background: rgba(59, 130, 246, 0.1);
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
  border-radius: 1.5px;
  pointer-events: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* AI Deck Tab System */
[data-controller="ai-deck"] .tab-content {
  display: none;
  height: 100%;
  width: 100%;
  min-height: 0;
  flex: 1;
}

[data-controller="ai-deck"] .tab-content:not(.hidden) {
  display: block !important;
}

[data-controller="ai-deck"] .tab-content.hidden {
  display: none !important;
}

/* Ensure proper height inheritance for tab containers */
[data-controller="ai-deck"] .flex-1 {
  min-height: 0;
}