/* Перебиваем стили Bootstrap для темной темы */
body { overflow: hidden; font-family: 'Segoe UI', sans-serif; }
.auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; }
.auth-box { width: 300px; border: 1px solid #444; }

/* Чат бокс */
.chat-messages { overflow-y: auto; background-color: #121212; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #444; }

/* Сообщения */
.message-row { display: flex; flex-direction: column; margin-bottom: 10px; animation: fadeIn 0.2s; }
.message-bubble { 
    max-width: 85%; 
    padding: 8px 12px; 
    border-radius: 12px; 
    position: relative; 
    font-size: 0.95rem; 
    word-wrap: break-word;
}
.message-row.them .message-bubble { background: #2c2c2c; align-self: flex-start; border-bottom-left-radius: 0; }
.message-row.me .message-bubble { background: #005c4b; align-self: flex-end; border-bottom-right-radius: 0; color: #fff; }

.meta-info { font-size: 0.7rem; color: #aaa; margin-bottom: 2px; display: flex; justify-content: space-between; gap: 10px; }
.nickname { color: #00bcd4; font-weight: 600; cursor: pointer; }

/* Медиа в чате */
.chat-img { max-width: 100%; border-radius: 8px; margin-top: 5px; cursor: pointer; }
.chat-sticker { width: 120px; height: auto; display: block; }
.chat-voice { width: 200px; margin-top: 5px; }

/* Панель стикеров */
#sticker-panel { height: 150px; overflow-y: auto; border-top: 1px solid #333; }
.sticker-preview { width: 60px; height: 60px; object-fit: contain; cursor: pointer; transition: transform 0.1s; }
.sticker-preview:active { transform: scale(0.9); }

/* Анимация микрофона */
.recording-pulse { color: red !important; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.cursor-pointer { cursor: pointer; }

.status-indicator.online {
    width: 10px;
    height: 10px;
    background-color: #00e676;
    border-radius: 50%;
    box-shadow: 0 0 5px #00e676;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

#online-panel {
    backdrop-filter: blur(10px); /* Эффект стекла */
    background: rgba(30, 30, 30, 0.95) !important;
}


/* В панели выбора */
.smile-preview { width: 32px; height: 32px; cursor: pointer; transition: transform 0.1s; }
.sticker-preview { width: 70px; height: 70px; cursor: pointer; transition: transform 0.1s; object-fit: contain; }
.smile-preview:hover, .sticker-preview:hover { transform: scale(1.1); }

/* В чате */
.chat-smile { width: 24px; height: 24px; vertical-align: middle; display: inline-block; margin: 0 2px; }
.chat-sticker { width: 140px; height: auto; display: block; margin-top: 5px; border-radius: 8px; }
/* Дата и время сообщения */
.meta-info span:last-child {
    font-size: 0.75rem; /* Чуть меньше никнейма */
    color: #888;        /* Серый цвет */
    margin-left: 8px;   /* Отступ от ника */
}




/* Размер смайлов в ПАНЕЛИ ВЫБОРА */
.smile-preview { 
    width: 32px; 
    height: 32px; 
    object-fit: contain; /* Чтобы не сплющило */
    cursor: pointer; 
    margin: 5px;
    transition: transform 0.2s;
}
.smile-preview:hover { transform: scale(1.2); }

/* Размер стикеров в ПАНЕЛИ ВЫБОРА */
.sticker-preview { 
    width: 80px; 
    height: 80px; 
    object-fit: contain; 
    cursor: pointer; 
    margin: 5px;
}

.smile-preview {
    width: 32px;
    height: 32px;
    object-fit: contain;
    cursor: pointer;
    margin: 4px;
    transition: transform 0.2s;
}
.smile-preview:hover { transform: scale(1.2); }

.sticker-preview {
    width: 80px;
    height: 80px;
    object-fit: contain;
    cursor: pointer;
    margin: 4px;
}

/* Сообщения БОТА */
.message-row.is-bot .message-bubble {
    background: linear-gradient(45deg, #FF512F, #DD2476); /* Градиент */
    color: white;
    border: 1px solid #ff99cc;
    box-shadow: 0 0 10px rgba(221, 36, 118, 0.5);
}
.message-row.is-bot .nickname {
    color: #ffeb3b !important; /* Желтый ник */
    text-transform: uppercase;
    font-size: 0.8rem;
}