/* ================= MAIN CONTENT ================= */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:#FFFFFF;
    min-height:100vh;
    margin-left: 0;
    position: relative;
    color: #000000;
}

/* ================= WELCOME MODE (начальное состояние) ================= */
.welcome-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 80px));
    text-align: center;
    width: calc(100% - 160px); /* Отступы по 80px с каждой стороны */
    max-width: 650px;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 0;
}

/* Когда sidebar свернут */
aside#sidebar.collapsed ~ .main-content .welcome-container {
    /* Остаётся по центру main-content */
}

.welcome-container.hidden {
    display: none;
}

.title {
    font-family: "CenturyGothicBold";
    font-weight:700;
    font-size: clamp(32px, 5vw, 64px);
    color:#3F3FE6;
    margin:0 0 14px 0;
}

.subtitle {
    font-family:"Manrope";
    font-size: clamp(13px, 1.2vw, 18px);
    font-weight:500;
    color:#000;
    margin:0;
    line-height:1.5;
}

/* ================= CHAT MODE (после первого сообщения) ================= */
.messages-area {
    display: none;
    position: absolute;
    left: 0;
    right: 60px; /* right-panel */
    top: 40px;
    bottom: 140px;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px;
}

/* Все дочерние элементы messages-area ограничены 800px */
.messages-area > * {
    width: 100%;
    max-width: 800px;
}

.messages-area.active {
    display: flex;
}

/* ================= VERTICAL SEPARATOR ================= */
.vertical-sep {
    display: none; /* Заменён тенью sidebar */
}

/* Когда sidebar свернут - сепаратор на 60px */
aside#sidebar.collapsed ~ .vertical-sep {
    left: 60px;
}

/* ================= RIGHT PANEL ================= */
/* В потоке документа (flex-ребёнок .chat-app), не position:fixed — рисуется в одном кадре с sidebar и main, без задержки */
.right-panel {
    width: 60px;
    flex-shrink: 0;
    background: #F2F4FF;
    position: relative;
    z-index: 101; /* Выше чем панели (z-index: 100) */
}

/* Кнопки на правой панели */
.right-panel .right-btn {
    position: absolute;
    left: 15px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.right-panel .right-btn img {
    display: block;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.right-panel .right-btn:hover img,
.right-panel .right-btn.active img {
    /* #8788F0 → #3F3FE6: уменьшаем яркость и увеличиваем насыщенность */
    filter: brightness(0.65) saturate(1.8);
    transform: scale(1.1);
}

.right-panel .right-btn.active img {
    filter: brightness(0.65) saturate(1.8);
    transform: scale(1);
}

/* Позиционирование по ТЗ */
/* Уведомления — всегда первая */
#rp-btn-1 { top: 34px; width:30px; height:30px; }
/* Календарь — всегда вторая, сразу под уведомлениями */
#rp-btn-calendar { top: 92px; width:30px; height:30px; }
/* HR вакансии — третья (после уведомлений и календаря), только в HR-контексте */
#rp-btn-hr-vacancies { top: 152px; width: 30px; height: 30px; }
/* Scenario-кнопки кандидата — ниже постоянных */
#rp-btn-2 { top: 152px; width:30px; height:30px; }
#rp-btn-3 { top: 212px; width:30px; height:24px; }
/* HR scenario-кнопки — сдвинуты вниз под кнопку вакансий */
#rp-btn-6 { top: 212px; width: 30px; height: 30px; }
#rp-btn-7 { top: 272px; width: 30px; height: 30px; }
#rp-btn-4 {
    bottom: 20px; left: 7px; width: 45px; height: 45px;
    background: #FFFFFF;
    border-radius: 60px;
    box-shadow: 0 0 3px rgba(183, 190, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}