/* Трехзонная структура интерфейса */
/* Основано на structura/styles.css */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================
   ВЕРХНЯЯ ЗОНА (Профиль пользователя)
   ============================================ */
.overhead-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: height 0.3s ease;
    height: calc(100% / 12); /* 8.33% - свернуто */
    overflow: hidden;
}

.overhead-container.expanded {
    height: calc(100% / 6); /* 16.67% - развернуто */
}

.overhead-content {
    height: 100%;
    overflow-y: hidden;
    padding: 10px 15px 40px 15px; /* Добавлен отступ снизу для кнопки */
    color: white;
    box-sizing: border-box;
}

.overhead-container.expanded .overhead-content {
    overflow-y: auto;
}

.overhead-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    background: transparent;
    z-index: 20; /* Поверх контента */
    pointer-events: none;
}

.overhead-btn button {
    pointer-events: all;
}

/* ============================================
   СРЕДНЯЯ ЗОНА (Запись аудио - ГЛАВНАЯ)
   ============================================ */
.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% / 16);
    left: 0;
    right: 0;
    overflow-y: auto;
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.main-container {
    flex-grow: 1;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================
   НИЖНЯЯ ЗОНА (Список записей)
   ============================================ */
.sub-container-bottom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    transition: height 0.3s ease;
    height: calc(100% / 12 * 2); /* 16.67% - свернуто */
    overflow: hidden;
}

.sub-container-bottom.expanded {
    height: calc(100% / 12 * 7); /* 58.33% - развернуто */
}

.sub-container-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    background: transparent;
    z-index: 20; /* Поверх контента */
    pointer-events: none;
}

.sub-container-btn button {
    pointer-events: all;
}

.sub-container-content {
    height: 100%;
    overflow-y: hidden;
    padding: 40px 15px 10px 15px; /* Добавлен отступ сверху для кнопки */
    color: white;
    box-sizing: border-box;
}

.sub-container-bottom.expanded .sub-container-content {
    overflow-y: auto;
}

/* ============================================
   КНОПКИ УПРАВЛЕНИЯ ЗОНАМИ
   ============================================ */
button {
    width: 55px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

button:active {
    background-color: rgba(0, 0, 0, 0.7);
}

.rotateSymbolOver {
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.overhead-container.expanded .rotateSymbolOver {
    transform: rotate(270deg);
}

#expandOverheadBtn {
    border-bottom-left-radius: 15%;
    border-bottom-right-radius: 15%;
}

.rotateSymbolBottom {
    display: inline-block;
    transform: rotate(270deg);
    transition: transform 0.3s ease;
}

.sub-container-bottom.expanded .rotateSymbolBottom {
    transform: rotate(90deg);
}

#expandSubContainerBtn {
    border-top-left-radius: 15%;
    border-top-right-radius: 15%;
}

.bufferend {
    margin-right: 3%;
}

/* ============================================
   АДАПТИВНЫЕ РАЗМЕРЫ ТЕКСТА
   ============================================ */
.overhead-container .overhead-content,
.sub-container-bottom .sub-container-content {
    font-size: 14px;
    transition: font-size 0.3s ease;
}

.overhead-container.expanded .overhead-content,
.sub-container-bottom.expanded .sub-container-content {
    font-size: 16px;
}