/* Toast Notification Styles - scoped to team-chat-wrapper */
.team-chat-wrapper #toast-container.toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.team-chat-wrapper #toast-container .toast {
    background-color: white;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    max-width: 300px;
    border-left: 4px solid #2563eb;
    animation: tcSlideInRight 0.3s ease, tcFadeOut 0.3s ease 4.7s forwards;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

.team-chat-wrapper #toast-container .toast.success { border-left-color: #10b981; }
.team-chat-wrapper #toast-container .toast.warning { border-left-color: #f59e0b; }
.team-chat-wrapper #toast-container .toast.error { border-left-color: #ef4444; }
.team-chat-wrapper #toast-container .toast.info { border-left-color: #06b6d4; }
.team-chat-wrapper #toast-container .toast.message { border-left-color: #2563eb; }

.team-chat-wrapper #toast-container .toast-icon { margin-right: 12px; font-size: 18px; }
.team-chat-wrapper #toast-container .toast-content { flex: 1; }
.team-chat-wrapper #toast-container .toast-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.team-chat-wrapper #toast-container .toast-message { font-size: 13px; color: #64748b; }
.team-chat-wrapper #toast-container .toast-close { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 14px; margin-left: 10px; pointer-events: auto; }
.team-chat-wrapper #toast-container .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: rgba(0, 0, 0, 0.05); }
.team-chat-wrapper #toast-container .toast-progress-bar { height: 100%; background-color: #2563eb; width: 100%; animation: tcProgressShrink 5s linear forwards; }

@keyframes tcSlideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes tcFadeOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(10%); opacity: 0; }
}

@keyframes tcProgressShrink {
    from { width: 100%; }
    to { width: 0; }
}

/* Dark theme support */
[data-theme="dark"] .team-chat-wrapper #toast-container .toast {
    background-color: #2c3338;
    color: #ffffff;
}

[data-theme="dark"] .team-chat-wrapper #toast-container .toast-message {
    color: #94a3b8;
}

    /* Support Chat Styles - all scoped to .team-chat-wrapper */
    .team-chat-wrapper .support-status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }
    .team-chat-wrapper .support-status-dot.online {
        background-color: #22c55e;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    }
    .team-chat-wrapper .support-status-dot.offline {
        background-color: #f59e0b;
    }
    .team-chat-wrapper .support-agents-list {
        max-height: 300px;
        overflow-y: auto;
    }
    .team-chat-wrapper .support-agent-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 8px;
        background: #f8fafc;
        transition: all 0.2s;
    }
    .team-chat-wrapper .support-agent-item:hover {
        background: #f1f5f9;
    }
    .team-chat-wrapper .support-agent-item.offline {
        opacity: 0.6;
    }
    .team-chat-wrapper .support-agent-item .agent-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        position: relative;
        margin-right: 12px;
    }
    .team-chat-wrapper .support-agent-item .agent-avatar .status-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
    }
    .team-chat-wrapper .support-agent-item .agent-avatar .status-dot.online {
        background-color: #22c55e;
    }
    .team-chat-wrapper .support-agent-item .agent-avatar .status-dot.offline {
        background-color: #94a3b8;
    }
    .team-chat-wrapper .support-agent-item .agent-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .team-chat-wrapper .support-agent-item .agent-name {
        font-weight: 500;
        color: #1e293b;
    }
    .team-chat-wrapper .support-agent-item .agent-status {
        font-size: 12px;
        color: #64748b;
    }
    .team-chat-wrapper .support-agent-item .chat-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Emoji button styles */
    .team-chat-wrapper .emoji-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: none;
        border: none;
        color: var(--text-secondary, #666);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-right: 8px;
        font-size: 18px;
    }

    .team-chat-wrapper .emoji-btn:hover {
        background-color: var(--surface-hover, #f1f5f9);
        transform: scale(1.1);
    }

    /* CRITICAL: Force emoji picker hidden on page load */
    .team-chat-wrapper .emoji-picker {
        position: absolute !important;
        bottom: 70px !important;
        right: 10px !important;
        left: auto !important;
        width: 380px !important;
        height: 420px !important;
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
        z-index: 20000 !important;
        overflow: hidden !important;
        display: none !important;
        flex-direction: column !important;
    }

    .team-chat-wrapper .emoji-picker.show {
        display: flex !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-picker {
        background: #2c3338 !important;
        border-color: #3f454c !important;
    }

    .team-chat-wrapper .emoji-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: #f8fafc !important;
        flex-shrink: 0 !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-header {
        background: #1e2328 !important;
        border-color: #3f454c !important;
        color: white !important;
    }

    .team-chat-wrapper .emoji-search-container {
        flex: 1 !important;
        position: relative !important;
    }

    .team-chat-wrapper .emoji-search-container input {
        width: 100% !important;
        padding: 8px 12px 8px 32px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        background: white !important;
        font-size: 13px !important;
        outline: none !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-search-container input {
        background: #1e2328 !important;
        border-color: #3f454c !important;
        color: white !important;
    }

    .team-chat-wrapper .emoji-search-icon {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 14px !important;
        opacity: 0.6 !important;
    }

    .team-chat-wrapper .emoji-categories {
        display: flex !important;
        padding: 8px 12px !important;
        gap: 4px !important;
        background: rgba(248, 250, 252, 0.8) !important;
        border-bottom: 1px solid #e2e8f0 !important;
        overflow-x: auto !important;
        flex-shrink: 0 !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-categories {
        background: rgba(30, 35, 40, 0.8) !important;
        border-bottom-color: #3f454c !important;
    }

    .team-chat-wrapper .emoji-category-btn {
        min-width: 36px !important;
        height: 36px !important;
        border: none !important;
        border-radius: 8px !important;
        background: transparent !important;
        font-size: 16px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .team-chat-wrapper .emoji-category-btn:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

    .team-chat-wrapper .emoji-category-btn.active {
        background-color: #3b82f6 !important;
        color: white !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-category-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .team-chat-wrapper .emoji-grid-container {
        flex: 1 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .team-chat-wrapper .emoji-close {
        background: none !important;
        border: none !important;
        font-size: 18px !important;
        cursor: pointer !important;
        color: #64748b !important;
        padding: 4px !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
    }

    .team-chat-wrapper .emoji-close:hover {
        color: #ef4444 !important;
        background-color: rgba(239, 68, 68, 0.1) !important;
    }

    .team-chat-wrapper .emoji-grid {
        padding: 12px !important;
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 6px !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .team-chat-wrapper .emoji-grid::-webkit-scrollbar {
        width: 6px !important;
    }

    .team-chat-wrapper .emoji-grid::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .team-chat-wrapper .emoji-grid::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 3px !important;
    }

    .team-chat-wrapper .emoji-grid::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    .team-chat-wrapper .emoji-item {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        font-size: 20px !important;
        transition: all 0.2s ease !important;
        background: none !important;
        border: none !important;
    }

    .team-chat-wrapper .emoji-item:hover {
        background-color: #e2e8f0 !important;
        transform: scale(1.2) !important;
        z-index: 10 !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-item:hover {
        background-color: #3f454c !important;
    }

    .team-chat-wrapper .emoji-footer {
        padding: 8px 16px !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 11px !important;
        color: rgba(0, 0, 0, 0.6) !important;
        flex-shrink: 0 !important;
    }

    [data-theme="dark"] .team-chat-wrapper .emoji-footer {
        background: #1e2328 !important;
        border-top-color: #3f454c !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .team-chat-wrapper .emoji-loading {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100px !important;
        color: rgba(0, 0, 0, 0.6) !important;
        font-size: 14px !important;
    }

    .team-chat-wrapper .emoji-no-results {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 150px !important;
        color: rgba(0, 0, 0, 0.6) !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .team-chat-wrapper .no-results-icon {
        font-size: 32px !important;
        margin-bottom: 8px !important;
        opacity: 0.7 !important;
    }