/**
 * LiveChat Display Modes CSS
 * Styles cho các chế độ hiển thị (không có hiệu ứng)
 * Cập nhật: 10/10/2025 - Đã loại bỏ các hiệu ứng animation
 */

/* Hiển thị khi cập nhật chế độ hiển thị - không có animation */
.livechat-updated {
    position: relative;
}

/* Kiểu dáng cho thông báo chế độ - không có animation */
.livechat-mode-notification {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
}

@keyframes livechat-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Kiểu dáng cho từng chế độ hiển thị */
.livechat-container.mode-livechat,
.livechat-online-icon.mode-livechat {
    border: 1px solid rgba(76, 175, 80, 0.5);
    transition: border-color 0.3s;
}

.livechat-container.mode-countdown,
.livechat-online-icon.mode-countdown {
    border: 1px solid rgba(255, 152, 0, 0.5);
    transition: border-color 0.3s;
}

.livechat-container.mode-text,
.livechat-online-icon.mode-text {
    border: 1px solid rgba(96, 125, 139, 0.5);
    transition: border-color 0.3s;
}

/* Hiệu ứng hiển thị/ẩn các phần tử */
iframe,
.livechat-element,
.countdown-element,
.countdown-display,
.livechat-replacement-text,
#livechat-countdown {
    transition: opacity 0.5s ease-in-out;
}

/* Quy tắc hiển thị cho các chế độ */

/* Mode LiveChat */
.mode-livechat iframe,
.mode-livechat .livechat-element {
    display: block !important;
    opacity: 1;
}

.mode-livechat .livechat-replacement-text,
.mode-livechat #livechat-countdown,
.mode-livechat .countdown-display,
.mode-livechat .countdown-element {
    display: none !important;
    opacity: 0;
}

/* Mode Đếm ngược */
.mode-countdown #livechat-countdown,
.mode-countdown .countdown-display,
.mode-countdown .countdown-element {
    display: block !important;
    opacity: 1;
}

.mode-countdown iframe,
.mode-countdown .livechat-element,
.mode-countdown .livechat-replacement-text {
    display: none !important;
    opacity: 0;
}

/* Mode văn bản thay thế */
.mode-text .livechat-replacement-text {
    display: block !important;
    opacity: 1;
}

.mode-text iframe,
.mode-text .livechat-element,
.mode-text #livechat-countdown,
.mode-text .countdown-display,
.mode-text .countdown-element {
    display: none !important;
    opacity: 0;
}

/* Debug hiển thị */
.livechat-debug-border iframe {
    border: 2px solid green;
}

.livechat-debug-border #livechat-countdown,
.livechat-debug-border .countdown-display {
    border: 2px solid orange;
}

.livechat-debug-border .livechat-replacement-text {
    border: 2px solid purple;
}