@import url('./animations/animations.css');

.dock-panel-hosts-root {
  position: absolute;
  top: var(--dock-panel-nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 500;
  --dock-panel-nav-height: 56px;
  --dock-panel-side-width: min(420px, 34vw);
  --dock-panel-center-height: 25vh;
  --dock-panel-horizontal-gap: 10px;
  --dock-panel-edge-offset: 12px;
}

.dock-panel-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Liquid glass chrome — shared by dock panels, login, boot overlay, etc. */
.dock-panel-glass {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  background: var(--dock-panel-bg, none);
}

.dock-panel-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--dock-panel-mobile-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  filter: url(#glass-distort);
  z-index: -1;
}

.dock-panel-glass::after {
  --edge-band: 40px;

  content: '';
  position: absolute;
  inset: -10px;
  border-radius: var(--dock-panel-mobile-radius);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(100px);
  filter: url(#glass-distort-edge);
  z-index: -1;

  --_v: to bottom, black 0, transparent var(--edge-band), transparent calc(100% - var(--edge-band)), black 100%;
  --_h: to right,  black 0, transparent var(--edge-band), transparent calc(100% - var(--edge-band)), black 100%;
  -webkit-mask-image: linear-gradient(var(--_v)), linear-gradient(var(--_h));
  mask-image:         linear-gradient(var(--_v)), linear-gradient(var(--_h));
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.dock-panel-host {
  position: absolute;
  top: auto;
  right: var(--dock-panel-edge-offset);
  bottom: var(--dock-panel-edge-offset);
  z-index: 500;
  width: min(420px, 34vw);
  max-width: 92vw;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  transition: top 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

.dock-panel-host.dock-panel-glass::after {
  border-radius: inherit;
}

.dock-panel-host.dock-panel-host-dragging {
  transition: none;
}

.dock-panel-host.widget-panel-slot-highlight {
  outline: 2px solid rgba(82, 191, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(82, 191, 255, 0.65), 0 0 26px rgba(82, 191, 255, 0.35);
}

.dock-panel-host.widget-panel-slot-highlight::after {
  content: attr(data-highlight-label);
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 114, 209, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 6;
}

/* --- Panel content structure --- */
.dock-panel-content {
  position: relative;
  padding: 0 10px 10px;
  overflow: hidden;
  min-height: 0;
  height: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: max-height 0.24s ease, opacity 0.2s ease;
}

.dock-panel-widget-content {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dock-panel-widget-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Expand toggle --- */
.dock-panel-expand-toggle {
  display: block;
  margin: 10px auto;
  width: min(380px, calc(100% - 28px));
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 23%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  flex-shrink: 0;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Edge resize handles --- */
.dock-panel-edge-resize-handle {
  position: absolute;
  border: none;
  background: transparent;
  padding: 0;
  z-index: 3;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
}

@media (hover: hover) {
  .dock-panel-host:hover .dock-panel-edge-resize-handle {
    opacity: 1;
  }
}
.dock-panel-host.dock-panel-host-dragging .dock-panel-edge-resize-handle {
  opacity: 1;
}

.dock-panel-edge-resize-handle::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.dock-panel-edge-resize-handle-left,
.dock-panel-edge-resize-handle-right {
  top: 26px;
  bottom: 8px;
  width: 10px;
  cursor: ew-resize;
}

.dock-panel-edge-resize-handle-left { left: 0; }
.dock-panel-edge-resize-handle-right { right: 0; }

.dock-panel-edge-resize-handle-left::after,
.dock-panel-edge-resize-handle-right::after {
  top: 6px;
  bottom: 6px;
  width: 2px;
  left: 4px;
}

.dock-panel-edge-resize-handle-bottom {
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 10px;
  cursor: ns-resize;
}

.dock-panel-edge-resize-handle-bottom::after {
  left: 8px;
  right: 8px;
  height: 2px;
  top: 4px;
}

/* ── Touch-tablet pointer support (e.g. iPad Pro) ──────────────────────
 * The narrow-mobile branch (max-width: 480px) already enlarges the top
 * expand-toggle hit area but DISABLES the side/bottom edge handles. iPad
 * Pro at ~1024px width misses that branch entirely, so the side/bottom
 * 10px rails stay invisible (opacity reveal is gated on hover) and tiny.
 * For coarse pointers we keep the edges visible and extend each handle's
 * hit area via an invisible ::before overlay - the visible ::after bar
 * is left untouched so the look doesn't change. */
@media (hover: none) and (pointer: coarse) {
  .dock-panel-edge-resize-handle {
    opacity: 1;
  }

  .dock-panel-edge-resize-handle-left,
  .dock-panel-edge-resize-handle-right {
    width: 14px;
  }
  .dock-panel-edge-resize-handle-left::before,
  .dock-panel-edge-resize-handle-right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    right: -10px;
  }

  .dock-panel-edge-resize-handle-bottom {
    height: 14px;
  }
  .dock-panel-edge-resize-handle-bottom::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    bottom: -12px;
  }

  /* Mirror the mobile branch's top-toggle hit-area extension so the top
     edge resize is just as easy to grab as the side/bottom handles. */
  .dock-panel-expand-toggle {
    position: relative;
  }
  .dock-panel-expand-toggle::before {
    content: '';
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: 0;
    right: 0;
  }
}

/* --- Level: Standard --- */
.dock-panel-host.dock-panel-host-level-standard {
  top: auto;
  width: min(420px, 34vw);
  max-width: 92vw;
  height: calc(100% - var(--dock-panel-edge-offset) * 2);
  max-height: calc(100% - var(--dock-panel-edge-offset) * 2);
}

.dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-standard {
  left: var(--dock-panel-edge-offset);
  right: auto;
}

.dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-standard {
  right: var(--dock-panel-edge-offset);
  left: auto;
}

.dock-panel-hosts-root[data-layout-preset='dual_horizontal'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-standard {
  top: auto;
  bottom: var(--dock-panel-edge-offset);
  left: var(--dock-panel-edge-offset);
  right: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  width: auto;
  max-width: none;
  height: var(--dock-panel-center-height);
  max-height: var(--dock-panel-center-height);
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-standard,
.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-standard {
  top: auto;
  bottom: var(--dock-panel-edge-offset);
  width: var(--dock-panel-side-width);
  max-width: var(--dock-panel-side-width);
  height: calc(100% - var(--dock-panel-edge-offset) * 2);
  max-height: calc(100% - var(--dock-panel-edge-offset) * 2);
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-standard {
  left: var(--dock-panel-edge-offset);
  right: auto;
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-standard {
  left: auto;
  right: var(--dock-panel-edge-offset);
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-standard {
  top: auto;
  bottom: var(--dock-panel-edge-offset);
  left: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  right: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  width: auto;
  max-width: none;
  height: var(--dock-panel-center-height);
  max-height: var(--dock-panel-center-height);
}

/* --- Placement: Bottom (single_bottom preset) --- */
.dock-panel-hosts-root[data-layout-preset='single_bottom'] .dock-panel-host.dock-panel-host-slot-bottom.dock-panel-host-level-standard {
  top: auto;
  bottom: var(--dock-panel-edge-offset);
  /* left: var(--dock-panel-edge-offset);
  right: var(--dock-panel-edge-offset);
  width: auto;
  max-width: none; */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2 * var(--dock-panel-edge-offset));
  height: auto;
  max-height: 30vh;
}

.dock-panel-hosts-root[data-layout-preset='single_bottom'] .dock-panel-host .dock-panel-expand-toggle {
  display: none;
}

.dock-panel-hosts-root[data-layout-preset='single_bottom'] .dock-panel-host .dock-panel-content {
  padding: 0;
}

/* --- Level: Expanded --- */
.dock-panel-host.dock-panel-host-level-expanded {
  top: auto;
  left: var(--dock-panel-edge-offset);
  right: var(--dock-panel-edge-offset);
  width: auto;
  max-width: none;
  height: calc(100% - var(--dock-panel-edge-offset) * 2);
  max-height: calc(100% - var(--dock-panel-edge-offset) * 2);
}

/* --- Level: Bar --- */
.dock-panel-host.dock-panel-host-level-bar {
  top: auto;
  width: min(420px, 34vw);
  max-width: 92vw;
  height: 30px;
  max-height: 42px;
  border-radius: 12px;
}

.dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-bar {
  left: var(--dock-panel-edge-offset);
  right: auto;
}

.dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-bar {
  right: var(--dock-panel-edge-offset);
  left: auto;
}

.dock-panel-hosts-root[data-layout-preset='dual_horizontal'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-bar {
  left: var(--dock-panel-edge-offset);
  right: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  width: auto;
  max-width: none;
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-bar {
  left: var(--dock-panel-edge-offset);
  right: auto;
  width: var(--dock-panel-side-width);
  max-width: var(--dock-panel-side-width);
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-bar {
  left: auto;
  right: var(--dock-panel-edge-offset);
  width: var(--dock-panel-side-width);
  max-width: var(--dock-panel-side-width);
}

.dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-bar {
  left: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  right: calc(var(--dock-panel-edge-offset) + var(--dock-panel-side-width) + var(--dock-panel-horizontal-gap));
  width: auto;
  max-width: none;
}

.dock-panel-host.dock-panel-host-level-bar .dock-panel-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding-bottom: 0;
}

/* --- Level: Mini --- */
.dock-panel-host.dock-panel-host-level-mini {
  top: auto;
  width: min(420px, 34vw);
  max-width: 92vw;
  height: auto;
  max-height: 180px;
}

.dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-mini {
  left: var(--dock-panel-edge-offset);
  right: auto;
}

.dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-mini {
  right: var(--dock-panel-edge-offset);
  left: auto;
}

/* --- Level: Custom --- */
.dock-panel-host.dock-panel-host-level-custom {
  top: auto;
  right: auto;
  left: var(--dock-panel-edge-offset);
  width: min(420px, 34vw);
  max-width: calc(100vw - 24px);
  height: calc(100% - var(--dock-panel-edge-offset) * 2);
  max-height: calc(100% - var(--dock-panel-edge-offset) * 2);
}

/* --- Mobile --- */
@media (max-width: 480px) {
  :root {
    --dock-panel-mobile-inset-x: 8px;
    --dock-panel-mobile-inset-bottom: 8px;
    --dock-panel-mobile-height: 46dvh;
    --dock-panel-mobile-max-height: 46dvh;
    --dock-panel-mobile-radius: 50px;
    --dock-panel-mobile-max-width: 99dvw;
  }

  .dock-panel-host.dock-panel-host {
    position: absolute;
    top: auto;
    left: var(--dock-panel-mobile-inset-x) !important;
    right: var(--dock-panel-mobile-inset-x) !important;
    bottom: var(--dock-panel-mobile-inset-bottom) !important;
    z-index: 500;
    width: auto;
    height: var(--dock-panel-mobile-height);
    max-height: var(--dock-panel-mobile-max-height);
    max-width: var(--dock-panel-mobile-max-width);
    border-radius: var(--dock-panel-mobile-radius);
    overflow: hidden;
    transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.28s ease;
  }

  .dock-panel-host.dock-panel-host.dock-panel-glass::before {
    border-radius: var(--dock-panel-mobile-radius);
  }

  .dock-panel-host.dock-panel-host.dock-panel-glass::after {
    border-radius: var(--dock-panel-mobile-radius);
    inset: 0;
  }

  .dock-panel-host.dock-panel-host.dock-panel-host-dragging {
    transition: none;
  }

  .dock-panel-host.dock-panel-host.dock-panel-host-level-expanded {
    top: auto;
    height: calc(100% - var(--dock-panel-edge-offset) * 2);
    max-height: calc(100% - var(--dock-panel-edge-offset) * 2);
    /* border-radius: 12px; */
  }

  .dock-panel-host.dock-panel-host.dock-panel-host-level-bar {
    height: 30px;
    max-height: 44px;
    width: 50dvw;
    left: 25dvw !important;
    border-radius: 999px;
    bottom: 30px !important;
  }

  .dock-panel-host.dock-panel-host.dock-panel-host-level-mini {
    height: auto;
    max-height: 180px;
  }

  .dock-panel-hosts-root[data-layout-preset='single_bottom'] .dock-panel-host.dock-panel-host-slot-bottom.dock-panel-host-level-standard {
    left: var(--dock-panel-mobile-inset-x) !important;
    right: var(--dock-panel-mobile-inset-x) !important;
    bottom: 12px !important;
    top: auto;
    width: auto;
    max-width: none;
    height: auto;
    max-height: 40vh;
    max-height: 40dvh;
    border-radius: 14px;
  }

  .dock-panel-hosts-root[data-layout-preset='dual_horizontal'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-standard,
  .dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-left.dock-panel-host-level-standard,
  .dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-right.dock-panel-host-level-standard,
  .dock-panel-hosts-root[data-layout-preset='triple_mixed'] .dock-panel-host.dock-panel-host-slot-center-horizontal.dock-panel-host-level-standard {
    left: var(--dock-panel-mobile-inset-x);
    right: var(--dock-panel-mobile-inset-x);
    top: auto;
    bottom: 12px;
    width: auto;
    max-width: none;
    height: var(--dock-panel-mobile-height);
    max-height: var(--dock-panel-mobile-max-height);
  }

  .dock-panel-edge-resize-handle {
    display: none;
  }

  .dock-panel-expand-toggle {
    position: relative;
    width: 75%;
  }

  .dock-panel-expand-toggle::before {
    content: '';
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: 0;
    right: 0;
  }

  /* --- Creation panel: narrow right-side column --- */
  .dock-panel-host.dock-panel-host:has([data-widget-root="creation_panel"]) {
    left: auto !important;
    right: 4px !important;
    top: 10px !important;
    bottom: 4px !important;
    width: 74px;
    max-width: 74px;
    height: auto !important;
    max-height: none !important;
    border-radius: 16px;
  }

  .dock-panel-host.dock-panel-host:has([data-widget-root="creation_panel"]) .dock-panel-expand-toggle {
    display: none;
  }

  .dock-panel-host.dock-panel-host:has([data-widget-root="creation_panel"]) .dock-panel-content {
    padding: 0;
  }

  .dock-panel-host.dock-panel-host.dock-panel-host-level-bar:has([data-widget-root="creation_panel"]) {
    width: 74px;
    max-width: 74px;
    left: auto !important;
    height: 30px;
    max-height: 44px;
    border-radius: 999px;
  }
}