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

@media (width > 760px) {
  .topbar.panel-resize-topbar .brand { width: var(--panel-nav-width); }

  .workspace.panel-resize-workspace {
    --panel-nav-default: 198px;
    --panel-rail-default: 286px;
    grid-template-columns: var(--panel-nav-width, var(--panel-nav-default)) minmax(0, 1fr) var(--panel-rail-width, var(--panel-rail-default));
  }

  .workspace.panel-resize-workspace.wide-workspace {
    grid-template-columns: var(--panel-nav-width, var(--panel-nav-default)) minmax(0, 1fr);
  }

  .workspace.panel-resize-workspace > .sidebar,
  .sp-chat.panel-resize-chat-layout > .sp-chat-side { grid-area: 1 / 1; }
  .workspace.panel-resize-workspace > .main,
  .sp-chat.panel-resize-chat-layout > .sp-chat-main { grid-area: 1 / 2; }
  .workspace.panel-resize-workspace > .rightbar { grid-area: 1 / 3; }

  .sp-chat.panel-resize-chat-layout {
    position: relative;
    grid-template-columns: var(--panel-chat-width, minmax(165px, .42fr)) minmax(0, 1fr);
  }

  .panel-resize-handle:not([hidden]) {
    display: block;
    z-index: 3;
    width: 14px;
    cursor: col-resize;
    touch-action: none;
    color: var(--quiet, #817b90);
  }

  .panel-resize-handle::before {
    content: '';
    position: absolute;
    inset: 0 6px;
    border-radius: 2px;
  }

  .panel-resize-handle::after {
    content: '';
    position: absolute;
    top: min(96px, 20%);
    left: 5px;
    width: 4px;
    height: 24px;
    border-radius: 3px;
    background: radial-gradient(circle, currentColor 1.15px, transparent 1.3px) center / 4px 6px;
  }

  .panel-resize-handle:hover, .panel-resize-handle:focus-visible, .panel-resize-handle.is-dragging { color: var(--accent, #ac8aff); }
  .panel-resize-handle:hover::before, .panel-resize-handle:focus-visible::before, .panel-resize-handle.is-dragging::before { background: color-mix(in srgb, currentColor 67%, transparent); }
  .panel-resize-handle:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }

  .panel-resize-nav, .panel-resize-rail {
    position: sticky;
    top: var(--header);
    height: calc(100dvh - var(--header));
    align-self: start;
    grid-row: 1;
  }

  .panel-resize-nav {
    grid-column: 1;
    justify-self: end;
    transform: translateX(calc(50% - 1px));
  }

  .panel-resize-rail {
    grid-column: 3;
    justify-self: start;
    transform: translateX(-75%);
  }

  .panel-resize-chat-layout > .panel-resize-handle {
    position: absolute;
    grid-area: 1 / 1 / 2 / 2;
    inset: 0 0 0 auto;
    transform: translateX(50%);
  }
}

@media (width >= 1450px) {
  .workspace.panel-resize-workspace {
    --panel-nav-default: 215px;
    --panel-rail-default: 300px;
  }
}

@media (760px < width <= 1120px) {
  .workspace.panel-resize-workspace {
    --panel-nav-default: 170px;
    --panel-rail-default: 231px;
  }
}

@media (760px < width <= 940px) {
  .workspace.panel-resize-workspace {
    grid-template-columns: var(--panel-nav-width, var(--panel-nav-default)) minmax(0, 1fr);
  }
  .workspace.panel-resize-workspace > .panel-resize-rail { display: none; }
}

.panel-resize-active, .panel-resize-active * { cursor: col-resize !important; user-select: none !important; }