/* Bootstrap-styled draggable container */
.draggable-container {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 400px;
    min-width: 300px;
    min-height: 200px;
    z-index: 1050;
    display: none;
    resize: none;
    border: 1px solid var(--suda-border);
    background-color: var(--suda-surface);
}

.draggable-container.show {
    display: block;
}

.draggable-header {
    cursor: move;
    border-bottom: 1px solid var(--suda-border);
    background-color: var(--suda-secondary);
    user-select: none; /* Prevent text selection while dragging */
}

.draggable-content {
    height: calc(100% - 58px);
    transition: all 0.2s ease;
    background-color: var(--suda-surface);
    /* REMOVED: pointer-events restrictions that were causing click issues */
}

.draggable-container.minimized {
    height: 58px !important;
}

.draggable-container.minimized .draggable-content {
    display: none !important;
}

/* Custom resize handles */
.resize-handle {
    position: absolute;
    background: transparent;
    z-index: 1051; /* Higher than container to ensure they're clickable */
}

.resize-handle:hover {
    background: rgba(74, 144, 226, 0.3); /* Visual feedback on hover */
}

.resize-handle.n {
    top: -3px;
    left: 3px;
    right: 3px;
    height: 6px;
    cursor: n-resize;
}

.resize-handle.s {
    bottom: -3px;
    left: 3px;
    right: 3px;
    height: 6px;
    cursor: s-resize;
}

.resize-handle.w {
    left: -3px;
    top: 3px;
    bottom: 3px;
    width: 6px;
    cursor: w-resize;
}

.resize-handle.e {
    right: -3px;
    top: 3px;
    bottom: 3px;
    width: 6px;
    cursor: e-resize;
}

.resize-handle.nw {
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    cursor: nw-resize;
}

.resize-handle.ne {
    top: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    cursor: ne-resize;
}

.resize-handle.sw {
    bottom: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    cursor: sw-resize;
}

.resize-handle.se {
    bottom: -3px;
    right: -3px;
    width: 6px;
    height: 6px;
    cursor: se-resize;
}

/* Dragging state */
.draggable-container.dragging {
    opacity: 0.8;
    user-select: none;
}

/* Window control buttons */
.draggable-controls .btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Form elements inside draggable container */
.draggable-container .form-control,
.draggable-container .btn,
.draggable-container .form-select,
.draggable-container textarea,
.draggable-container input,
.draggable-container button {
    pointer-events: auto; /* Ensure form elements are always clickable */
    position: relative;
    z-index: 1;
}

/* Rich text editor specific styles */
.draggable-container [contenteditable="true"] {
    pointer-events: auto;
    cursor: text;
    min-height: 200px;
    background-color: var(--suda-surface);
    color: var(--suda-text);
    border: 1px solid var(--suda-border);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.draggable-container [contenteditable="true"]:focus {
    outline: none;
    border-color: var(--suda-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

/* Toolbar buttons */
.draggable-container .btn-toolbar .btn {
    pointer-events: auto;
    background-color: var(--suda-surface);
    border-color: var(--suda-border);
    color: var(--suda-text);
}

.draggable-container .btn-toolbar .btn:hover {
    background-color: var(--suda-primary);
    border-color: var(--suda-primary);
    color: white;
}