/* dock.css — styling for the cross-platform dock engine. Flat, hairline-ring depth (TakeProfit-ish), magenta drop cue. */
.dk-root {
  --dk-bg0: #0b0e14; --dk-bg1: #11151e; --dk-bg2: #161b26; --dk-line: #232c3a; --dk-line2: #2c374a;
  --dk-txt: #c9d3e0; --dk-dim: #7e8aa0; --dk-accent: #e5267e; --dk-accent-soft: rgba(229,38,126,.16);
  --dk-up: #30d158; --dk-down: #ff453a; --dk-gutter: 6px; --dk-tabh: 30px;
  position: relative; width: 100%; height: 100%; background: var(--dk-bg0);
  color: var(--dk-txt); font: 13px/1.4 -apple-system, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; overflow: hidden;
}
@media (pointer: coarse) { .dk-root { --dk-gutter: 12px; --dk-tabh: 40px; } }

.dk-host { position: absolute; inset: 0; }
.dk-split { display: flex; width: 100%; height: 100%; }
.dk-split.dk-row { flex-direction: row; }
.dk-split.dk-col { flex-direction: column; }
.dk-cell { position: relative; min-width: 32px; min-height: 32px; overflow: hidden; display: flex; }
.dk-cell > * { flex: 1 1 0; min-width: 0; min-height: 0; }

/* resize gutters */
.dk-gutter { flex: 0 0 var(--dk-gutter); background: var(--dk-bg0); position: relative; z-index: 3; touch-action: none; }
.dk-gutter::after { content: ""; position: absolute; inset: 0; background: var(--dk-line); transition: background .12s; }
.dk-gutter-row { cursor: col-resize; } .dk-gutter-row::after { left: 50%; transform: translateX(-50%); width: 1px; }
.dk-gutter-col { cursor: row-resize; } .dk-gutter-col::after { top: 50%; transform: translateY(-50%); height: 1px; }
.dk-gutter:hover::after, .dk-gutter.drag::after { background: var(--dk-accent); }
.dk-gutter-row:hover::after, .dk-gutter-row.drag::after { width: 2px; }
.dk-gutter-col:hover::after, .dk-gutter-col.drag::after { height: 2px; }

/* panes */
.dk-pane { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--dk-bg1); border: 1px solid var(--dk-line); border-radius: 8px; overflow: hidden; }
.dk-tabbar { display: flex; align-items: stretch; height: var(--dk-tabh); min-height: var(--dk-tabh); background: var(--dk-bg2); border-bottom: 1px solid var(--dk-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.dk-tabbar::-webkit-scrollbar { display: none; }
.dk-tab { display: flex; align-items: center; gap: 6px; padding: 0 10px; max-width: 200px; border-right: 1px solid var(--dk-line); color: var(--dk-dim);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; white-space: nowrap; font-size: 12px; transition: background .12s, color .12s; }
.dk-tab .dk-ico { font-size: 12px; opacity: .9; }
.dk-tab .dk-ttl { overflow: hidden; text-overflow: ellipsis; }
.dk-tab .dk-x { opacity: 0; font-size: 11px; padding: 2px; border-radius: 4px; color: var(--dk-dim); }
.dk-tab:hover { background: var(--dk-bg1); color: var(--dk-txt); }
.dk-tab:hover .dk-x { opacity: .7; } .dk-tab .dk-x:hover { background: var(--dk-down); color: #fff; opacity: 1; }
.dk-tab.active { background: var(--dk-bg1); color: var(--dk-txt); box-shadow: inset 0 -2px 0 var(--dk-accent); }
.dk-tab.active .dk-x { opacity: .5; }
.dk-tab.dragging { opacity: .35; }
@media (pointer: coarse) { .dk-tab { font-size: 13px; padding: 0 14px; } .dk-tab .dk-x { opacity: .5; } }

.dk-body { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--dk-bg1); }
.dk-content { position: absolute; inset: 0; overflow: hidden; }
.dk-empty, .dk-err { display: grid; place-items: center; height: 100%; color: var(--dk-dim); font-size: 12px; }
.dk-err { color: var(--dk-down); }

/* mobile collapse: one full-bleed pane, the tab bar becomes a bottom strip */
.dk-host.dk-mobile .dk-pane { border-radius: 0; border: none; }
.dk-host.dk-mobile .dk-tabbar { order: 2; border-top: 1px solid var(--dk-line); border-bottom: none; height: 52px; min-height: 52px; }
.dk-host.dk-mobile .dk-tab { flex-direction: column; gap: 2px; justify-content: center; font-size: 10px; min-width: 64px; box-shadow: none; }
.dk-host.dk-mobile .dk-tab.active { box-shadow: inset 0 2px 0 var(--dk-accent); }
.dk-host.dk-mobile .dk-tab .dk-ico { font-size: 17px; }
.dk-host.dk-mobile .dk-body { order: 1; }

/* drag ghost (follows the pointer) */
.dk-ghost { position: fixed; z-index: 9999; transform: translate(-50%, -50%); pointer-events: none; padding: 6px 12px; border-radius: 8px;
  background: var(--dk-accent); color: #fff; font: 600 12px/1 -apple-system, system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; }

/* drop overlay — magenta zone preview (TakeProfit cue) */
.dk-overlay { position: absolute; z-index: 50; pointer-events: none; border-radius: 8px; background: var(--dk-accent-soft);
  border: 2px solid var(--dk-accent); box-shadow: inset 0 0 0 1px rgba(229,38,126,.4), 0 0 24px rgba(229,38,126,.25); transition: left .08s, top .08s, width .08s, height .08s; }
.dk-overlay[data-kind^="root-"] { border-style: dashed; }