/* Draggable Divider Styles voor Aviseo */

/* Hidden state - MOET bovenaan staan voor specificiteit */
.divider-container.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.divider-container {
    position: relative;
    width: 0.5rem; /* w-2 */
    height: calc(100% - 10px); /* h-full minus top margin */
    margin-top: 10px; /* Keep divider 30px from top */
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms;
}

/* Visual divider line */
.divider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: transparent; /* Invisible by default */
    transition: all 200ms;
    pointer-events: none;
    z-index: 1; /* Behind the handle */
}

/* Drag handle */
.divider-handle {
    position: relative;
    height: 3rem; /* h-12 */
    width: 1.25rem; /* w-5 */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid var(--color-base-content, #333); /* DaisyUI v5 base content */
    background-color: var(--color-base-100, #fff); /* DaisyUI v5 base-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: all 200ms;
    opacity: 0;
    transform: scale(0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Above the line */
}

/* Hover state */
.divider-container:hover .divider-line {
    background-color: var(--color-primary); /* Primary color on hover */
    width: 2px;
}

.divider-container:hover .divider-handle {
    opacity: 1;
    transform: scale(1.1);
    border-color: var(--color-primary); /* Primary color */
    background-color: var(--color-base-100); /* Base-100 to match theme */
}

/* Show handle on hover or focus */
.divider-container:hover .divider-handle,
.divider-container:focus .divider-handle {
    opacity: 1;
    transform: scale(1);
}

/* Active dragging state */
.divider-container.dragging {
    cursor: col-resize;
}

.divider-container.dragging .divider-line {
    background-color: var(--color-primary); /* Primary color */
    width: 4px;
}

.divider-container.dragging .divider-handle {
    opacity: 1;
    transform: scale(1.25);
    background-color: var(--color-primary); /* Primary color */
    border-color: var(--color-primary); /* Primary color */
    color: var(--color-primary-content); /* Primary content (white on blue) */
}

/* Active zone voor makkelijker grijpen */
.divider-active-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.5rem;
    right: -0.5rem;
    cursor: col-resize;
}

/* Prevent text selection tijdens draggen */
body.resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: col-resize;
}

body.resizing * {
    cursor: col-resize !important;
}

/* Performance optimizations */
#ai-chat-wrapper {
    will-change: width;
}

/* Focus styles voor keyboard navigation */
.divider-container:focus {
    outline: none;
}

.divider-container:focus .divider-handle {
    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary); /* Focus ring with theme colors */
}

/* Mobile responsive - verberg divider op kleine schermen */
@media (max-width: 768px) {
    .divider-container {
        display: none !important;
    }
    
    #ai-chat-wrapper {
        width: 100% !important;
    }
}

/* Theme-aware grip dots styling 
   De grip dots gebruiken currentColor dus passen automatisch aan */

/* Grip dots styling */
.divider-grip {
    color: var(--color-base-content); /* Base content */
    opacity: 0.4;
    transition: all 200ms;
}

.divider-container:hover .divider-grip {
    color: var(--color-primary); /* Primary color on hover */
    opacity: 0.6;
}

.divider-container.dragging .divider-grip {
    color: var(--color-primary-content); /* Primary content when dragging */
    opacity: 1;
}