if (typeof self === 'undefined') { var self = globalThis; }
/**
 * Dockview Midnight Theme
 * Premium glassmorphic styling matching MIDNIGHT design system
 * Based on dockview-theme-replit structure with correct .dv- class names
 */

/* ============================================================================
   Theme Variables & Base
   ============================================================================ */
.dockview-theme-midnight {
  /* Required base variables */
  --dv-paneview-active-outline-color: #8b5cf6;
  --dv-tabs-and-actions-container-font-size: 13px;
  --dv-tabs-and-actions-container-height: 68px;
  --dv-drag-over-background-color: rgba(139, 92, 246, 0.15);
  --dv-drag-over-border-color: rgba(139, 92, 246, 0.4);
  --dv-tabs-container-scrollbar-color: rgba(139, 92, 246, 0.3);
  --dv-icon-hover-background-color: rgba(255, 255, 255, 0.1);
  --dv-floating-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --dv-overlay-z-index: 999;
  --dv-tab-font-size: 13px;
  --dv-border-radius: 12px;
  --dv-tab-margin: 4px;
  --dv-sash-color: rgba(139, 92, 246, 0.2);
  --dv-active-sash-color: rgba(139, 92, 246, 0.5);
  --dv-active-sash-transition-duration: 0.15s;
  --dv-active-sash-transition-delay: 0s;

  /* Background colors */
  --dv-group-view-background-color: #0a0a0a;
  --dv-tabs-and-actions-container-background-color: rgba(15, 15, 17, 0.95);

  /* Tab colors - Active group */
  --dv-activegroup-visiblepanel-tab-background-color: #8b5cf6;
  --dv-activegroup-hiddenpanel-tab-background-color: rgba(20, 20, 22, 0.9);
  --dv-activegroup-visiblepanel-tab-color: #ffffff;
  --dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);

  /* Tab colors - Inactive group */
  --dv-inactivegroup-visiblepanel-tab-background-color: rgba(30, 30, 34, 0.95);
  --dv-inactivegroup-hiddenpanel-tab-background-color: rgba(20, 20, 22, 0.9);
  --dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.7);
  --dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.4);

  /* Dividers & borders */
  --dv-tab-divider-color: transparent;
  --dv-separator-border: rgba(139, 92, 246, 0.15);
  --dv-paneview-header-border-color: rgba(255, 255, 255, 0.06);

  /* Container styling */
  box-sizing: border-box;
  padding: 8px;
  background-color: #0a0a0a;
  border-radius: 16px;
  overflow: hidden;
}

/* Drop target animation fix */
.dockview-theme-midnight .dv-drop-target-container .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
  opacity: 0;
  transition: none;
}

/* ============================================================================
   Group Container (Panel wrapper with rounded corners)
   ============================================================================ */
.dockview-theme-midnight .dv-resize-container:has(> .dv-groupview) {
  border-radius: 16px;
}

.dockview-theme-midnight .dv-resize-container {
  border-radius: 16px !important;
  border: none;
}

.dockview-theme-midnight .dv-groupview {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(12, 12, 14, 0.9);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 200ms ease-out;
}

.dockview-theme-midnight .dv-groupview.dv-active-group {
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(139, 92, 246, 0.05);
}

.dockview-theme-midnight .dv-groupview.dv-inactive-group {
  border-color: rgba(255, 255, 255, 0.04);
}

/* ============================================================================
   Tab Container (Header bar)
   ============================================================================ */
.dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container {
  background: rgba(15, 15, 17, 0.95);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px 12px 0 0;
  padding: 14px 16px;
  min-height: 68px;
  overflow: visible;
}

/* ============================================================================
   Individual Tabs - Rounded Style
   ============================================================================ */
.dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab {
  margin: 0 5px;
  padding: 0 14px;
  height: 38px;
  min-width: 90px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(20, 20, 22, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Tab hover state */
.dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {
  background: rgba(35, 35, 40, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* Active tab in active group */
.dockview-theme-midnight .dv-groupview.dv-active-group .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
  background: #8b5cf6 !important;
  border-color: #8b5cf6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Active tab in inactive group */
.dockview-theme-midnight .dv-groupview.dv-inactive-group .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
  background: rgba(30, 30, 34, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Inactive tabs */
.dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab.dv-inactive-tab {
  background: rgba(20, 20, 22, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
}

/* Tab close button (X icon) */
.dockview-theme-midnight .dv-tab .dv-svg {
  height: 10px;
  width: 10px;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.dockview-theme-midnight .dv-tab:hover .dv-svg {
  opacity: 0.6;
}

.dockview-theme-midnight .dv-tab .dv-default-tab-action {
  border-radius: 50%;
  padding: 4px;
  margin-left: 4px;
  transition: all 150ms ease-out;
}

.dockview-theme-midnight .dv-tab .dv-default-tab-action:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dockview-theme-midnight .dv-tab .dv-default-tab-action:hover .dv-svg {
  opacity: 1;
}

/* ============================================================================
   Content Container
   ============================================================================ */
.dockview-theme-midnight .dv-groupview .dv-content-container {
  background-color: #0a0a0a;
  border-radius: 0 0 16px 16px;
}

/* ============================================================================
   Sash (Resize Handles) - Styled like Replit
   ============================================================================ */
.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash {
  background-color: transparent;
}

.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled)::after {
  content: "";
  height: 4px;
  width: 40px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--dv-sash-color);
  position: absolute;
  transition: background-color 150ms ease-out;
}

.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover,
.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active {
  background-color: transparent;
}

.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):hover::after,
.dockview-theme-midnight .dv-vertical > .dv-sash-container > .dv-sash:not(.disabled):active::after {
  background-color: var(--dv-active-sash-color);
}

.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash {
  background-color: transparent;
}

.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled)::after {
  content: "";
  height: 40px;
  width: 4px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--dv-sash-color);
  position: absolute;
  transition: background-color 150ms ease-out;
}

.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover,
.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active {
  background-color: transparent;
}

.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):hover::after,
.dockview-theme-midnight .dv-horizontal > .dv-sash-container > .dv-sash:not(.disabled):active::after {
  background-color: var(--dv-active-sash-color);
}

/* ============================================================================
   Floating Panels
   ============================================================================ */
.dockview-theme-midnight .dv-floating-group {
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   Drop Targets
   ============================================================================ */
.dockview-theme-midnight .dv-drop-target-container .dv-drop-target-selection {
  background: rgba(139, 92, 246, 0.12);
  border: 2px dashed rgba(139, 92, 246, 0.4);
  border-radius: 12px;
}

/* ============================================================================
   Watermark (Empty state)
   ============================================================================ */
.dockview-theme-midnight .dv-watermark {
  background: transparent;
}

/* ============================================================================
   Actions Container (header buttons)
   ============================================================================ */
.dockview-theme-midnight .dv-actions-container {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}

.dockview-theme-midnight .dv-action-container {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 150ms ease-out;
  cursor: pointer;
}

.dockview-theme-midnight .dv-action-container:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   Scrollbars
   ============================================================================ */
.dockview-theme-midnight .dv-tabs-container::-webkit-scrollbar {
  height: 4px;
}

.dockview-theme-midnight .dv-tabs-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2px;
}

.dockview-theme-midnight .dv-tabs-container::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 2px;
}

.dockview-theme-midnight .dv-tabs-container::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

/* ============================================================================
   Focus States & Pseudo-element Overrides
   ============================================================================
   IMPORTANT: These rules override dockview's base CSS which adds:
   - ::after overlay on focused tabs with outline
   - ::before dividers between tabs
   The base CSS uses !important so we need specific selectors here.
   ============================================================================ */

/* Remove focus outline on tabs */
.dockview-theme-midnight .dv-tab:focus-within,
.dockview-theme-midnight .dv-tab:focus {
  outline: none !important;
}

.dockview-theme-midnight .dv-groupview:focus {
  outline: none !important;
}

/* Override the focus ::after pseudo-element that creates outline border */
/* Must match specificity of: .dv-tab:focus-within::after, .dv-tab:focus::after */
.dockview-theme-midnight .dv-tab:focus-within::after,
.dockview-theme-midnight .dv-tab:focus::after,
.dockview-theme-midnight .dv-tab::after {
  display: none !important;
  content: none !important;
  outline: none !important;
}

/* Override the ::before divider pseudo-element */
/* Must match specificity of: .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before */
.dockview-theme-midnight .dv-tabs-container.dv-horizontal .dv-tab:not(:first-child)::before,
.dockview-theme-midnight .dv-tabs-container .dv-tab::before,
.dockview-theme-midnight .dv-tab::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Nuclear option: ensure no outlines on tabs from any source */
.dockview-theme-midnight .dv-tab,
.dockview-theme-midnight .dv-tab * {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ============================================================================
   Tab Dragging State
   ============================================================================ */
.dockview-theme-midnight .dv-tab.dv-tab-dragging {
  opacity: 0.7;
  transform: scale(1.02);
}

/* ============================================================================
   Overflow Menu
   ============================================================================ */
.dockview-theme-midnight .dv-tabs-overflow-container,
.dockview-theme-midnight .dv-tabs-overflow-dropdown-default {
  background: rgba(15, 15, 17, 0.98);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   Pane Header (for paneview mode)
   ============================================================================ */
.dockview-theme-midnight .dv-pane-container .dv-view .dv-default-header {
  background: rgba(15, 15, 17, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   Animation for new tabs
   ============================================================================ */
@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.dockview-theme-midnight .dv-tab {
  animation: tabSlideIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Chat Panel Transparency
   ============================================================================
   When the chat panel is visible, make Dockview containers transparent so the
   ChatKit component (rendered at container level) shows through.
   This allows the tab header to remain visible while ChatKit handles the content area.

   NOTE: We use [data-chat-visible="true"] on the parent wrapper instead of
   CSS :has() selector for better browser compatibility (Firefox support).
   ============================================================================ */

/* Make content containers transparent when chat is visible */
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight,
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-groupview,
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-content-container,
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-resize-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Also handle the placeholder's own container */
.dockview-theme-midnight .dv-content-container:has(.chat-panel-placeholder),
.dockview-theme-midnight .dv-content-container:has(.chat-panel-placeholder) > * {
  background: transparent !important;
  background-color: transparent !important;
}

/* Content area - no pointer events so clicks pass through to ChatKit */
/* Only target the content container containing the chat placeholder, not all panels */
/* This allows other panels (Notepad, Canvas, Desmos) to remain interactive in split-screen */
.dockview-theme-midnight .dv-content-container:has(.chat-panel-placeholder) {
  pointer-events: none !important;
}

/* Keep tab header clickable and styled */
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-tabs-and-actions-container {
  pointer-events: auto !important;
  background: rgba(15, 15, 17, 0.95) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Keep tabs clickable */
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-tabs-and-actions-container * {
  pointer-events: auto !important;
}

/* Restore backgrounds when chat is NOT visible (other tabs active) */
.dockview-workspace[data-chat-visible="false"] .dockview-theme-midnight .dv-groupview {
  background: rgba(12, 12, 14, 0.9);
}

.dockview-workspace[data-chat-visible="false"] .dockview-theme-midnight .dv-content-container {
  background-color: #0a0a0a;
  pointer-events: auto;
}

/* ============================================================================
   Editable Tab Styles
   ============================================================================ */

/* Show close button on tab hover */
.dockview-theme-midnight .dv-tab:hover .dv-default-tab-action {
  opacity: 0.6;
}

.dockview-theme-midnight .dv-tab .dv-default-tab-action:hover {
  opacity: 1 !important;
}

/* Double-click cursor hint on tab title */
.dockview-theme-midnight .dv-tab span {
  cursor: text;
}

/* ============================================================================
   Mobile Optimizations
   ============================================================================
   Improve touch targets, scrolling, and overall mobile experience
   ============================================================================ */

@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .dockview-theme-midnight {
    padding: 4px;
  }

  /* Tab container - horizontal scroll with momentum */
  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container {
    padding: 8px 8px;
    min-height: 56px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabs container - smooth horizontal scroll */
  .dockview-theme-midnight .dv-tabs-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 4px;
    gap: 6px;
  }

  .dockview-theme-midnight .dv-tabs-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  /* Individual tabs - larger touch targets */
  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab {
    margin: 0 3px;
    padding: 0 16px;
    height: 40px;
    min-width: auto;
    min-height: 40px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: all 150ms ease-out;
  }

  /* Remove hover effects on mobile - use active instead */
  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab:hover {
    transform: none;
  }

  /* Active/pressed state for mobile */
  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  /* Active tab styling - more prominent on mobile */
  .dockview-theme-midnight .dv-groupview.dv-active-group .dv-tabs-and-actions-container .dv-tab.dv-active-tab {
    background: #8b5cf6 !important;
    border-color: #8b5cf6;
    box-shadow:
      0 2px 8px rgba(139, 92, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  /* Always show close button on mobile (no hover) */
  .dockview-theme-midnight .dv-tab .dv-svg {
    opacity: 0.5;
  }

  .dockview-theme-midnight .dv-tab .dv-default-tab-action {
    padding: 6px;
    margin-left: 6px;
    min-width: 28px;
    min-height: 28px;
  }

  /* Actions container (+ and back buttons) - larger touch targets */
  .dockview-theme-midnight .dv-actions-container {
    gap: 6px;
    padding-right: 2px;
  }

  .dockview-theme-midnight .dv-action-container {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  /* Group view - less border radius on mobile for more content space */
  .dockview-theme-midnight .dv-groupview {
    border-radius: 12px;
  }

  .dockview-theme-midnight .dv-resize-container {
    border-radius: 12px !important;
  }

  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container {
    border-radius: 10px 10px 0 0;
  }

  .dockview-theme-midnight .dv-groupview .dv-content-container {
    border-radius: 0 0 12px 12px;
  }

  /* Overflow dropdown - larger items for touch */
  .dockview-theme-midnight .dv-tabs-overflow-container,
  .dockview-theme-midnight .dv-tabs-overflow-dropdown-default {
    border-radius: 14px;
    padding: 6px;
  }

  .dockview-theme-midnight .dv-tabs-overflow-dropdown-default > div {
    padding: 12px 16px;
    min-height: 44px;
    border-radius: 10px;
    margin: 2px 0;
    font-size: 15px;
  }

  /* Remove animation on mobile to reduce janky feeling */
  .dockview-theme-midnight .dv-tab {
    animation: none;
  }
}

/* ============================================================================
   Small Mobile (< 480px) - Extra compact mode
   ============================================================================ */

@media (max-width: 480px) {
  .dockview-theme-midnight {
    padding: 2px;
  }

  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container {
    padding: 6px 6px;
    min-height: 52px;
  }

  .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container .dv-tab {
    padding: 0 12px;
    height: 38px;
    min-height: 38px;
    font-size: 13px;
  }

  .dockview-theme-midnight .dv-action-container {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================================
   Mobile Workspace Mode - Hide Dockview Tabs
   ============================================================================
   When inside .mobile-workspace-dockview, completely hide Dockview's tab bar
   since we're using our own custom mobile-friendly tab switcher.
   ============================================================================ */

.mobile-workspace-dockview .dockview-theme-midnight {
  padding: 0;
}

.mobile-workspace-dockview .dockview-theme-midnight .dv-groupview {
  border-radius: 0;
  border: none;
}

.mobile-workspace-dockview .dockview-theme-midnight .dv-resize-container {
  border-radius: 0 !important;
}

/* Hide the entire tab header on mobile */
.mobile-workspace-dockview .dockview-theme-midnight .dv-tabs-and-actions-container {
  display: none !important;
}

/* Content area takes full height */
.mobile-workspace-dockview .dockview-theme-midnight .dv-content-container {
  border-radius: 0;
}

/* ============================================================================
   Fullscreen Mode
   ============================================================================
   Styles applied when workspace is in browser fullscreen mode.
   Uses [data-fullscreen="true"] set on TutorWorkspaceContainer root div.
   ============================================================================ */

[data-fullscreen="true"] {
  background: #0a0a0a;
}

[data-fullscreen="true"] .dockview-theme-midnight {
  padding: 4px;
}

[data-fullscreen="true"] .dockview-theme-midnight .dv-groupview {
  border-radius: 10px;
}

[data-fullscreen="true"] .dockview-theme-midnight .dv-resize-container {
  border-radius: 10px;
}

[data-fullscreen="true"] .dockview-theme-midnight .dv-groupview .dv-tabs-and-actions-container {
  border-radius: 10px 10px 0 0;
}

[data-fullscreen="true"] .dockview-theme-midnight .dv-groupview .dv-content-container {
  border-radius: 0 0 10px 10px;
}