/**
 * Facebook Messenger-Inspired Chat Dropdown Menu
 * Polished design with rounded icon backgrounds, elegant spacing, and smooth interactions
 * Comic-book style speech bubble tail for extra flair
 * Using our custom color scheme
 */

/* ==================== DROPDOWN CONTAINER ==================== */

.chat-dropdown-menu {
    position: fixed; /* Fixed to viewport, not header */
    top: auto; /* Will be set by JS */
    left: auto; /* Will be calculated */
    right: auto;
    z-index: 9995; /* Below image timestamps but above most content */
    min-width: 280px;
    max-width: 360px;
    background: var(--bg-color-3);
    border-radius: 18px;
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 2px rgba(0, 0, 0, 0.1); /* Extra border for depth */
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(0.96); /* Slide in from right */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible; /* Allow tail to show outside */
}

.chat-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* Enhanced backdrop blur */
@supports (backdrop-filter: blur(12px)) {
    .chat-dropdown-menu {
        backdrop-filter: blur(12px) saturate(180%);
        background: rgba(var(--bg-color-3-rgb, 36, 39, 43), 0.94);
    }
}

/* ==================== COMIC-BOOK SPEECH BUBBLE TAIL ==================== */

/* Main tail triangle pointing RIGHT (towards chat window avatar at top) */
.chat-dropdown-menu::before {
    content: '';
    position: absolute;
    top: 28px; /* Point at avatar/back button in header (center of 56px header) */
    right: -10px; /* Point towards the chat */
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid var(--bg-color-3);
    filter: drop-shadow(2px 0 4px rgba(0, 0, 0, 0.15));
    z-index: 2;
}

@supports (backdrop-filter: blur(12px)) {
    .chat-dropdown-menu::before {
        border-left-color: rgba(var(--bg-color-3-rgb, 36, 39, 43), 0.94);
    }
}

/* Outer border/shadow for tail (creates outlined effect) */
.chat-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 27px; /* Align with main tail */
    right: -12px; /* Align with main tail */
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
}

/* ==================== DESKTOP POSITIONING (To left of chat) ==================== */

@media (min-width: 768px) {
    .chat-dropdown-menu {
        /* Position to the left of the chat window on desktop */
        /* Chat is at right: 5rem (80px), width: 450px */
        /* Overlap the chat slightly (like Facebook) */
        right: calc(5rem + 450px - 30px); /* Overlaps chat by 30px to reach avatar */
        left: auto;
        top: 3.5rem; /* Align with top of chat (margin-top only, no extra space) */
    }
    
    .chat-dropdown-menu.active {
        transform: translateX(0) scale(1);
    }
}

/* ==================== MENU LIST ==================== */

.chat-dropdown-menu ul {
    margin: 0;
    padding: 12px;
    list-style: none;
}

.chat-dropdown-menu li {
    margin: 0;
    padding: 0;
}

/* ==================== MENU ITEMS (FACEBOOK STYLE) ==================== */

.chat-menu-item-enhanced {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin: 3px 0;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-text-1);
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    
    /* Button resets */
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

/* Subtle hover effect like Facebook */
.chat-menu-item-enhanced:hover {
    background: rgba(var(--accent-2-rgb, 75, 142, 242), 0.12);
    color: var(--color-text-1);
    transform: translateX(3px);
}

.chat-menu-item-enhanced:active {
    transform: translateX(3px) scale(0.98);
    background: rgba(var(--accent-2-rgb, 75, 142, 242), 0.18);
}

/* Focus state for keyboard navigation */
.chat-menu-item-enhanced:focus {
    outline: none;
    background: rgba(var(--accent-2-rgb, 75, 142, 242), 0.15);
    box-shadow: 0 0 0 2px rgba(var(--accent-2-rgb, 75, 142, 242), 0.4);
}

/* ==================== ROUNDED ICON BACKGROUNDS (FACEBOOK STYLE) ==================== */

.chat-menu-item-enhanced i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.18s ease;
    position: relative;
}

/* Icon background colors by action type (Facebook-style colored circles) */
.chat-menu-item-enhanced.view-action i {
    background: rgba(74, 158, 255, 0.15);
    color: #4A9EFF;
}

.chat-menu-item-enhanced.ping-action i {
    background: rgba(243, 156, 18, 0.15);
    color: #F39C12;
}

.chat-menu-item-enhanced.complete-action i {
    background: rgba(39, 174, 96, 0.15);
    color: #27AE60;
}

/* Hover effect: brighten background, keep icon color */
.chat-menu-item-enhanced:hover.view-action i {
    background: rgba(74, 158, 255, 0.25);
    color: #5AADFF;
    transform: scale(1.08);
}

.chat-menu-item-enhanced:hover.ping-action i {
    background: rgba(243, 156, 18, 0.25);
    color: #F5A623;
    transform: scale(1.08);
}

.chat-menu-item-enhanced:hover.complete-action i {
    background: rgba(39, 174, 96, 0.25);
    color: #2ECC71;
    transform: scale(1.08);
}

/* Active/pressed state */
.chat-menu-item-enhanced:active i {
    transform: scale(1);
}

/* ==================== TEXT LABEL ==================== */

.chat-menu-item-enhanced span {
    flex: 1;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* ==================== SEPARATOR (FACEBOOK STYLE) ==================== */

.chat-dropdown-separator {
    margin: 8px 12px;
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent
    );
    opacity: 0.6;
}

/* ==================== STATES ==================== */

/* Loading State */
.chat-menu-item-enhanced.loading {
    opacity: 0.6;
    pointer-events: none;
}

.chat-menu-item-enhanced.loading i {
    animation: spin 1s linear infinite;
}

/* Disabled State */
.chat-menu-item-enhanced.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-menu-item-enhanced.disabled:hover {
    background: none;
    color: var(--color-text-1);
    transform: none;
}

/* ==================== LIGHT THEME (FACEBOOK STYLE) ==================== */

html[data-theme='light'] .chat-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 2px rgba(0, 0, 0, 0.03);
}

@supports (backdrop-filter: blur(12px)) {
    html[data-theme='light'] .chat-dropdown-menu {
        backdrop-filter: blur(12px) saturate(180%);
        background: rgba(255, 255, 255, 0.96);
    }
}

/* Light theme tail */
html[data-theme='light'] .chat-dropdown-menu::before {
    border-bottom-color: rgba(255, 255, 255, 0.98);
}

@supports (backdrop-filter: blur(12px)) {
    html[data-theme='light'] .chat-dropdown-menu::before {
        border-bottom-color: rgba(255, 255, 255, 0.96);
    }
}

html[data-theme='light'] .chat-dropdown-menu::after {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .chat-menu-item-enhanced {
    color: #1c1e21;
}

html[data-theme='light'] .chat-menu-item-enhanced:hover {
    background: rgba(74, 158, 255, 0.08);
    color: #1c1e21;
}

html[data-theme='light'] .chat-menu-item-enhanced:active {
    background: rgba(74, 158, 255, 0.12);
}

/* Light theme icon backgrounds */
html[data-theme='light'] .chat-menu-item-enhanced.view-action i {
    background: rgba(74, 158, 255, 0.12);
    color: #1877F2;
}

html[data-theme='light'] .chat-menu-item-enhanced.ping-action i {
    background: rgba(243, 156, 18, 0.12);
    color: #E67E22;
}

html[data-theme='light'] .chat-menu-item-enhanced.complete-action i {
    background: rgba(39, 174, 96, 0.12);
    color: #229954;
}

html[data-theme='light'] .chat-menu-item-enhanced:hover.view-action i {
    background: rgba(74, 158, 255, 0.2);
    color: #0C65E8;
}

html[data-theme='light'] .chat-menu-item-enhanced:hover.ping-action i {
    background: rgba(243, 156, 18, 0.2);
    color: #D35400;
}

html[data-theme='light'] .chat-menu-item-enhanced:hover.complete-action i {
    background: rgba(39, 174, 96, 0.2);
    color: #1E8449;
}

html[data-theme='light'] .chat-dropdown-separator {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.08) 20%,
        rgba(0, 0, 0, 0.08) 80%,
        transparent
    );
}

/* ==================== RESPONSIVE - TABLET ==================== */

@media (max-width: 1024px) and (min-width: 768px) {
    .chat-dropdown-menu {
        min-width: 220px;
        max-width: 280px;
    }
    
    .chat-menu-item-enhanced {
        padding: 9px 11px;
        font-size: 13.5px;
        gap: 12px;
    }
    
    .chat-menu-item-enhanced i {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
}

/* ==================== RESPONSIVE - MOBILE ==================== */

@media (max-width: 767px) {
    .chat-dropdown-menu {
        /* Centered modal on mobile instead of bottom sheet */
        position: fixed;
        top: 50% !important;
        left: 50%;
        right: auto;
        bottom: auto;
        width: calc(100% - 32px);
        max-width: 360px;
        border-radius: 18px; /* Rounded on all sides */
        transform: translate(-50%, -50%) scale(0.9);
        padding-bottom: 12px;
        z-index: 10000;
        max-height: 70vh; /* Don't take up full screen */
        overflow-y: auto; /* Scroll if needed */
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.4),
            0 8px 16px rgba(0, 0, 0, 0.3);
    }
    
    /* Hide tail on mobile (centered modal doesn't need it) */
    .chat-dropdown-menu::before,
    .chat-dropdown-menu::after {
        display: none;
    }
    
    .chat-dropdown-menu.active {
        transform: translate(-50%, -50%) scale(1);
    }
    
    .chat-dropdown-menu ul {
        padding: 14px;
        padding-top: 14px; /* No drag handle needed */
        padding-bottom: 8px;
    }
    
    .chat-menu-item-enhanced {
        padding: 16px 18px; /* Good touch targets */
        font-size: 15.5px;
        border-radius: 14px;
        gap: 16px;
        margin-bottom: 6px;
    }
    
    .chat-menu-item-enhanced:last-child {
        margin-bottom: 0;
    }
    
    .chat-menu-item-enhanced i {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    
    /* Remove drag indicator (not needed for centered modal) */
    .chat-dropdown-menu ul::before {
        display: none;
    }
    
    /* No backdrop on mobile - keep it clean */
    body::before {
        display: none !important;
    }
}

/* ==================== ANIMATIONS (ENHANCED) ==================== */

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

/* Facebook-style staggered fade-in with slight slide */
.chat-dropdown-menu.active .chat-menu-item-enhanced {
    animation: fbFadeInSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.chat-menu-item-enhanced:nth-child(1) { animation-delay: 0.04s; }
.chat-menu-item-enhanced:nth-child(2) { animation-delay: 0.08s; }
.chat-menu-item-enhanced:nth-child(3) { animation-delay: 0.12s; }
.chat-menu-item-enhanced:nth-child(4) { animation-delay: 0.16s; }
.chat-menu-item-enhanced:nth-child(5) { animation-delay: 0.20s; }

@keyframes fbFadeInSlide {
    from {
        opacity: 0;
        transform: translateX(-6px) translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Ripple effect on click (Facebook-inspired) */
.chat-menu-item-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
    opacity: 0;
}

.chat-menu-item-enhanced:active::before {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0.3s ease;
}

/* ==================== ACCESSIBILITY ==================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .chat-dropdown-menu {
        border: 2px solid var(--accent-2);
    }
    
    .chat-menu-item-enhanced {
        border: 1px solid transparent;
    }
    
    .chat-menu-item-enhanced:hover,
    .chat-menu-item-enhanced:focus {
        border-color: var(--accent-2);
        outline: 2px solid var(--accent-2);
        outline-offset: -2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chat-dropdown-menu,
    .chat-menu-item-enhanced {
        transition: none;
        animation: none;
    }
}