/* Стандартная кнопка аудио */
.c_audio_btn_std {
    width: 48px;
    height: 48px;
    
    /* Мягкий квадрат */
    border-radius: 14px;
    
    /* Цвет фона — чуть светлее фона страницы */
    background: var(--c-bg-card);
    
    /* Рамка для объема (как у твоих ответов) */
    border: 2px solid #3e3e3e;
    border-bottom-width: 4px; /* Эффект нажатия (тактильность) */
    
    /* Цвет иконки */
    color: var(--c-accent-green); /* Или просто white, если хочешь строже */
    
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    flex-shrink: 0;
}

.c_audio_btn_std_big {
    width: 50px;
    height: 50px;
    border-radius: 20px;
}

.c_audio_btn_std:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.c_audio_btn_std:active {
    transform: scale(0.95);
}

.c_audio_btn_std .g_icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Эффект нажатия */
.c_audio_btn_std:active {
    border-bottom-width: 2px;
    transform: translateY(2px);
    background: #222;
}

/* Чуть увеличим саму иконку внутри */
.c_audio_btn_std .g_icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


/*********************************/
.c_audio_btn_std {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    
    background-color: #2a2a2a; /* Чуть светлее фона, но темнее карточек */
    border: 2px solid #3a3a3a;
    
    /* Мягкая тень под кнопкой */
    box-shadow: 0 4px 0 #1a1a1a;
    
    color: var(--c-accent-green); /* Иконка ярко-зеленая */
    
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s cubic-bezier(0.3, 0, 0.5, 1);
    flex-shrink: 0;
}

.c_audio_btn_std:hover {
    background-color: #323232;
    border-color: var(--c-accent-green);
    color: #40ff8d; /* Чуть ярче при наведении */
}

.c_audio_btn_std:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #1a1a1a;
}

.c_audio_btn_std .g_icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Спец-класс для большой кнопки в центре */
.c_audio_btn_std_big {
    width: 64px;
    height: 64px;
    border-radius: 20px;
}
.c_audio_btn_std_big .g_icon {
    width: 32px;
    height: 32px;
}/*********************************/


/* --- Компактная кнопка в строке --- */
.c_story_audio_btn {
    /* inline-flex позволяет кнопке сидеть в строке как букве */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* Выравнивание по центру текста */
    
    /* Компактный размер */
    width: 26px;
    height: 26px;
    
    /* Делаем круглую */
    border-radius: 50%;
    
    background: #2a2a2a; /* Темный фон */
    border: 1px solid #444; /* Тонкая рамка */
    color: var(--c-accent-green); /* Зеленая иконка */
    
    /* Отступы от слов */
    margin-right: 6px;
    margin-left: 2px;
    
    cursor: pointer;
    padding: 0;
    
    /* Компенсация визуального смещения (чуть вверх) */
    position: relative;
    top: -1px;
    
    transition: transform 0.1s, background 0.1s;
}

/* Иконка внутри кнопки */
.c_story_audio_btn .g_icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    /* Чуть сдвигаем иконку визуально, если кажется не по центру */
    transform: translateX(0.5px); 
}

/* Ховер эффект (на ПК) */
.c_story_audio_btn:hover {
    background: #333;
    transform: scale(1.1);
}

/* Эффект нажатия */
.c_story_audio_btn:active {
    background: #222;
    transform: scale(0.95);
}