/* ===== insert-dividers.css ===== */
/* Styles for "insert content here" dividers between message blocks. */
/* Part of the InsertManager module. */

/* --- Divider container --- */
.insert-divider {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--space-md);
    height: 24px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Visible when hovering inside the content area */
.page-content-wrapper:hover .insert-divider {
    opacity: 0.45;
}

/* Fully visible on direct hover or when active */
.insert-divider:hover,
.insert-divider.active {
    opacity: 1 !important;
}

/* --- Lines either side of the button --- */
.insert-divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    transition: background var(--transition-fast);
}

.insert-divider:hover .insert-divider-line {
    background: var(--color-text-tertiary);
}

.insert-divider.active .insert-divider-line {
    background: var(--color-accent);
}

/* --- The "+" button --- */
.insert-divider-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    margin: 0 2px;
    transition: all var(--transition-fast);
}

.insert-divider-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg-secondary);
    border-color: var(--color-accent);
    transform: scale(1.15);
}

.insert-divider-btn:active {
    transform: scale(1.0);
}

.insert-divider.active .insert-divider-btn {
    background: var(--color-accent);
    color: var(--color-bg-secondary);
    border-color: var(--color-accent);
}

/* --- SVG inside button --- */
.insert-divider-btn svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

/* --- Reduce visual clutter for first/last dividers --- */
.insert-divider:first-child {
    margin-top: var(--space-xs);
}

.insert-divider:last-child {
    margin-bottom: var(--space-xs);
}

/* --- Dark theme refinements --- */
[data-theme="dark"] .insert-divider-btn {
    border-color: var(--color-border);
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .insert-divider-btn:hover,
[data-theme="dark"] .insert-divider.active .insert-divider-btn {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-primary);
}