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:
    0 4px 12px rgba(139, 92, 246, 0.4),
    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 (Accessibility)
   ============================================================================ */
.dockview-theme-midnight .dv-tab:focus-within,
.dockview-theme-midnight .dv-tab:focus {
  outline: 2px solid rgba(139, 92, 246, 0.5);
  outline-offset: 2px;
}

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

/* ============================================================================
   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 */
.dockview-workspace[data-chat-visible="true"] .dockview-theme-midnight .dv-content-container {
  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;
}