/*
 * Maps dockview's theme contract onto Cradle's own design tokens so the split
 * view reads as a native part of the app chrome instead of an embedded
 * third-party widget. Values automatically follow light/dark mode because
 * they reference the same runtime custom properties as the rest of the app
 * (see apps/web/src/styles.css).
 */
.dockview-theme-cradle {
  --dv-tabs-and-actions-container-font-size: 11px;
  --dv-tabs-and-actions-container-height: 32px;
  --dv-tab-font-size: 11px;
  --dv-border-radius: var(--radius-md);
  --dv-tab-border-radius: var(--radius-sm);
  --dv-sash-border-radius: 0px;
  --dv-dropdown-border-radius: var(--radius-md);
  --dv-tab-margin: 2px 0 2px 2px;
  --dv-spacing-padding: 0px;
  --dv-tab-close-icon-size: 12px;

  --dv-group-view-background-color: var(--background);
  --dv-tabs-and-actions-container-background-color: var(--sidebar);
  --dv-tab-divider-color: var(--sidebar);
  --dv-separator-border: var(--border);
  --dv-paneview-header-border-color: var(--border);

  --dv-activegroup-visiblepanel-tab-background-color: var(--background);
  --dv-activegroup-hiddenpanel-tab-background-color: transparent;
  --dv-inactivegroup-visiblepanel-tab-background-color: transparent;
  --dv-inactivegroup-hiddenpanel-tab-background-color: transparent;

  --dv-activegroup-visiblepanel-tab-color: var(--foreground);
  --dv-activegroup-hiddenpanel-tab-color: var(--muted-foreground);
  --dv-inactivegroup-visiblepanel-tab-color: var(--muted-foreground);
  --dv-inactivegroup-hiddenpanel-tab-color: var(--text-dim);

  --dv-icon-hover-background-color: var(--accent);
  /*
   * Match stock dockview / VS Code split feedback: a soft fill that slides
   * between quadrants. No loud primary outline — that reads as a custom
   * "selection box", not a native drop target.
   */
  --dv-drag-over-background-color: color-mix(in srgb, var(--foreground) 10%, transparent);
  --dv-drag-over-border-color: transparent;
  --dv-drag-over-border: none;
  --dv-transition-duration: 120ms;

  --dv-floating-box-shadow: var(--shadow-lg);
  --dv-floating-border: 1px solid var(--border);
  --dv-floating-titlebar-background-color: var(--sidebar);
  --dv-floating-titlebar-border-bottom: 1px solid var(--border);

  --dv-tabs-container-scrollbar-color: var(--border);
  --dv-active-sash-color: var(--primary);
}

.dockview-theme-cradle .dv-tabs-and-actions-container {
  display: none;
}

.dockview-theme-cradle .dv-groupview {
  /* border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden; */
}

.dockview-theme-cradle .dv-tab {
  transition: background-color var(--duration-quick) var(--ease-standard),
    color var(--duration-quick) var(--ease-standard);
}

/* External HTML5 drag overlay (dockview multi-pane) keeps dockview's own
   geometry transitions; just ensure opacity eases consistently. */
.dockview-theme-cradle .dv-drop-target-dropzone {
  transition: opacity var(--dv-transition-duration, 120ms) ease-out;
}

/*
 * Indicator for pointer-driven (tab) split drags — mirrors dockview's
 * `.dv-drop-target-selection` geometry animation so a tab drag and an HTML5
 * drag read as the same system.
 */
@keyframes split-drop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.split-drop-indicator {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: var(--dv-drag-over-border, none);
  background-color: var(
    --dv-drag-over-background-color,
    color-mix(in srgb, var(--foreground) 10%, transparent)
  );
  border-radius: var(--dv-border-radius, var(--radius-md));
  opacity: 1;
  will-change: top, left, width, height, opacity;
  /* Appear once; subsequent quadrant moves only use the geometry transition. */
  animation: split-drop-in var(--dv-transition-duration, 120ms) ease-out;
  transition:
    top var(--dv-transition-duration, 120ms) ease-out,
    left var(--dv-transition-duration, 120ms) ease-out,
    width var(--dv-transition-duration, 120ms) ease-out,
    height var(--dv-transition-duration, 120ms) ease-out,
    opacity var(--dv-transition-duration, 120ms) ease-out;
}

.split-drop-indicator-host {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
