/**
 * RichTextEditor Styles
 * Styles for contenteditable-based rich text editor with mention badges
 */

/* Mention Color Utilities - Global mention styling helpers */
.mention-brand-colors {
    background-color: var(--dark-700);
    color: white;
}

.mention-brand-colors:hover {
    background-color: var(--dark-800);
}

.mention-user-colors {
    background-color: var(--blue-600);
    color: white;
}

.mention-user-colors:hover {
    background-color: var(--blue-700);
}

/* Mention link styling for display contexts */
.mention-brand-link {
    color: var(--dark-700);
    font-weight: 500;
    text-decoration: none;
}

.mention-brand-link:hover {
    color: var(--dark-800);
    text-decoration: underline;
}

.mention-user-link {
    color: var(--blue-600);
    font-weight: 500;
    text-decoration: none;
}

.mention-user-link:hover {
    color: var(--blue-700);
    text-decoration: underline;
}

/* Rich Text Editor Wrapper */
.rich-text-wrapper {
    position: relative;
}

.rich-text-wrapper.focused {
    /* Add focus styles if needed */
}

/* Rich Text Editor */
.rich-text-editor {
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    width: 100%;
    min-width: 0;
}

/* Specific styles for comment input fields */
.comment-input-field.rich-text-editor {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Placeholder styles */
.rich-text-editor.empty::before {
    content: attr(data-placeholder);
    color: #9CA3AF; /* text-gray-400 */
    pointer-events: none;
    position: absolute;
    left: 0.5rem;  /* 8px padding */
    top: 0.5rem;   /* 8px padding */
    right: 0.5rem; /* 8px padding */
}

.rich-text-editor:focus.empty::before {
    display: none;
}

/* Mention Badge Styles */
.mention-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease;
    user-select: none;
    vertical-align: baseline;
}

/* Brand mention badges */
.mention-badge.mention-brand {
    background-color: var(--dark-700);
    color: white;
}

.mention-badge.mention-brand:hover {
    background-color: var(--dark-800);
}

/* User mention badges */
.mention-badge.mention-user {
    background-color: var(--blue-600);
    color: white;
}

.mention-badge.mention-user:hover {
    background-color: var(--blue-700);
}

/* Badge icons */
.mention-badge svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
}

/* Selected/focused badge */
.mention-badge:focus {
    outline: 2px solid #3B82F6; /* blue-500 */
    outline-offset: 1px;
}

/* Badge deletion indicator */
.mention-badge.deleting {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Rich text editor states */
.rich-text-editor:focus {
    /* Focus styles are handled by parent form input styles */
}

/* Ensure badges don't break word wrapping */
.rich-text-editor {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent badge content from being editable */
.mention-badge * {
    pointer-events: none;
}

/* Loading state for badges */
.mention-badge.loading {
    opacity: 0.7;
}

.mention-badge.loading::after {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 0.25rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error state for badges */
.mention-badge.error {
    background-color: #DC2626; /* bg-red-600 */
    color: white;
}

/* Compact badge variant for dense layouts */
.mention-badge.compact {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.mention-badge.compact svg {
    width: 0.625rem;
    height: 0.625rem;
}

/* Badge animations */
.mention-badge {
    animation: badge-enter 0.2s ease-out;
}

@keyframes badge-enter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .mention-badge {
        font-size: 0.75rem;
        padding: 0.125rem 0.375rem;
    }

    .mention-badge svg {
        width: 0.625rem;
        height: 0.625rem;
    }
}

/* Item comments slide animation */
.item-comments {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
}

.item-comments.hidden {
    max-height: 0 !important;
    opacity: 0;
}

.item-comments:not(.hidden) {
    max-height: 1000px;
    opacity: 1;
}

.item-comments.item-comments-embedded:not(.hidden) {
    max-height: 250px;
}

.item-comments.item-comments-embedded .comments-scroll-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}