/* Keep the draggable choice list usable in Safari's flex layout as well as Chromium.
   The bundle's height:100% inside height:fit-content can collapse this window. */
.DraggableWindow:has(.SelectModal_draggable) {
    box-sizing: border-box;
    height: min(680px, calc(100vh - var(--headerHeight, 80px) - 40px));
    height: min(680px, calc(100dvh - var(--headerHeight, 80px) - 40px));
    min-height: min(280px, calc(100vh - var(--headerHeight, 80px) - 40px));
    max-height: calc(100vh - var(--headerHeight, 80px) - 40px);
    max-height: calc(100dvh - var(--headerHeight, 80px) - 40px);
    min-width: min(420px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    border-bottom-right-radius: 4px;
    resize: none;
}

.DraggableWindow > .lnc-window-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
}

.lnc-window-resize::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    background: repeating-linear-gradient(135deg, transparent 0 3px, #70808a 3px 5px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.lnc-window-resize:focus-visible {
    outline: 2px solid #42799d;
    outline-offset: -2px;
}

.DraggableWindow:has(.SelectModal_draggable) > .DraggableWindow__header {
    flex: 0 0 50px;
}

.DraggableWindow:has(.SelectModal_draggable) > .DraggableWindow__content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* Override the bundle's inline limit: the flex parent owns the viewport limit. */
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.DraggableWindow:has(.SelectModal_draggable) > .DraggableWindow__content > div:first-child {
    padding-right: 30px;
    overflow-wrap: anywhere;
}