/* Сброс базовых стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Базовые стили с переменными Telegram */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #000);
}

/* Переопределяем Tailwind классы для работы с Telegram переменными */
.bg-tg-bg { background-color: var(--tg-theme-bg-color, #fff); }
.bg-tg-secondary-bg { background-color: var(--tg-theme-secondary-bg-color, #f5f5f5); }

.text-tg-text { color: var(--tg-theme-text-color, #000); }


/* Градиент для состояния ожидания подключения (фиолетовый) */
.gradient-waiting {
    background: linear-gradient(169deg, rgba(0, 0, 0, 0.00) -12.77%, rgba(111, 122, 214, 0.20) 50.19%, rgba(98, 128, 215, 0.20) 97.04%), radial-gradient(294.91% 124.35% at 15% 107.32%, #667ED7 0%, #906AD5 100%);
    min-height: 100vh;
    transition: background 0.5s ease;
}

/* Градиент для активного соединения (зелено-голубой) */
.gradient-connected {
    background: linear-gradient(16deg, rgba(0, 191, 255, 0.30) 0%, rgba(0, 0, 0, 0.00) 106.65%), linear-gradient(344deg, rgba(0, 0, 0, 0.00) -7.09%, rgba(88, 157, 124, 0.30) 98.09%), linear-gradient(15deg, rgba(0, 0, 0, 0.00) 1.14%, rgba(113, 172, 141, 0.40) 49.02%, rgba(142, 203, 75, 0.40) 84.63%), radial-gradient(284.99% 136.9% at 15% 107.32%, rgba(81, 164, 193, 0.80) 0%, rgba(150, 181, 110, 0.80) 100%);
    min-height: 100vh;
    transition: background 0.5s ease;
}

/* Базовая позиция для кнопки */
#mute-btn { 
  position: relative; 
}

/* Микрофон ВЫКЛ - прозрачный фон */
#mute-btn:not(.mic-unmuted) {
  background-color: transparent !important;
}

/* Hover для выключенного микрофона */
#mute-btn:not(.mic-unmuted):hover #mic-off-icon circle {
  opacity: 0.85;
}

/* ===== АВАТАРКА ЗАГЛУШКА ===== */
.avatar-placeholder {
    background: linear-gradient(193deg, #B5DBED 9.32%, #6CA4CC 85.63%);
    transition: background 0.5s ease-in-out;
}

/* ===== РЕЖИМЫ АВАТАРКИ ===== */

/* Режим Practice - фиолетовый градиент */
.avatar-practice {
    background: linear-gradient(193deg, #B5DBED 9.32%, #6CA4CC 85.63%);
}

/* Режим Roles - желтоватый градиент */  
.avatar-roles {
    background: linear-gradient(193deg, #B5DBED 9.32%, #6CA4CC 85.63%);
}

/* Режим Assistance - голубой градиент (текущий дефолт) */
.avatar-assistance {
    background: linear-gradient(193deg, #B5DBED 9.32%, #6CA4CC 85.63%);
}

/* ===== КАПЛИ ===== */
.blob {
    /* Полупрозрачный белый фон */
    background: rgba(255, 255, 255, 0.1);
    /* Легкое размытие краев */
    filter: blur(0.5px);
    /* Мягкая тень для глубины */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

/* Первая клякса (форма) */
.blob-1 {
    border-radius: 42% 58% 55% 45% / 46% 54% 46% 54%;
}

/* Вторая клякса (форма) */
.blob-2 {
    border-radius: 41% 59% 56% 44% / 54% 46% 54% 46%;
    animation-delay: 0.3s;  /* задержка анимации для органичности */
}

/* ===== АНИМАЦИЯ ПЕРВОЙ КАПЛИ ===== */
.blob-1.pulsing {
    animation: morph-blob-1 3s ease-in-out infinite;
}

@keyframes morph-blob-1 {
    0%, 100% {
        border-radius: 42% 58% 55% 45% / 46% 54% 46% 54%;
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        border-radius: 56% 44% 43% 57% / 58% 42% 58% 42%;
        transform: scale(1.06) rotate(180deg);
        opacity: 0.7;
    }
}

/* ===== АНИМАЦИЯ ВТОРОЙ КАПЛИ ===== */
.blob-2.pulsing {
    animation: morph-blob-2 2s ease-in-out infinite;
}

@keyframes morph-blob-2 {
    0%, 100% {
        border-radius: 41% 59% 56% 44% / 54% 46% 54% 46%;
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        border-radius: 57% 43% 45% 55% / 43% 57% 43% 57%;
        transform: scale(1.03) rotate(120deg);
        opacity: 0.7;
    }
}

/* ===== КОНТЕЙНЕР ТРАНСКРИПЦИЙ ===== */
#transcript-container {
    position: absolute;
    bottom: 212px; /* Над кнопками управления */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    height: 90px; /* Фиксированная высота */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    pointer-events: auto; /* Не блокирует клики на элементах позади */
    z-index: 10;
    
    /* Для плавного скролла на мобильных */
    -webkit-overflow-scrolling: touch;

    /* Скрываем скроллбар */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#transcript-container::-webkit-scrollbar {
    display: none;
}

/* ===== АНИМАЦИЯ ТОЧЕК ПРИ ВЫЗОВЕ ===== */

/* Контейнер для точек */
.typing-dots {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px;  /* Тонкая настройка выравнивания */
}

/* Стиль для каждой точки */
.dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 1px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: typing-pulse 1.4s ease-in-out infinite;
    vertical-align: middle;
}

/* Задержки для создания волнового эффекта */
.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Анимация пульсации точки */
@keyframes typing-pulse {
    0%, 60%, 100% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.5);
    }
}