/* ================= RESPONSIVE ================= */

/* Tablet: 768-1200px */
@media (max-width: 1200px) {
    aside#sidebar.sidebar {
        --sw: 250px;            /* плашка, слой и гостевой футер сузятся синхронно через переменную */
    }

    aside#sidebar.sidebar .sidebar-footer {
        width: 250px;
    }
}

/* Tablet only (768-1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
    aside#sidebar.sidebar.collapsed .sidebar-footer {
        width: 60px !important;
    }

    /* Панели — привязаны к ширине sidebar 250px */
    .vacancy-panel,
    .resume-panel,
    .calendar-panel,
    .hr-vacancies-panel,
    .vd-panel {
        left: 250px;
    }

    .chat-history {
        width: 218px;
    }

    .chat-item.main-chat {
        width: 218px;
    }

    .toggle-sidebar-btn {
        left: 174px;
    }

    .input-container-wrapper.chat-mode {
        padding: 0 20px;
    }

    .messages-area {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Tablet (дополнение к правилам выше): quick-commands и файловая
   плитка — чуть меньше gap внутри input-row, чтобы всё помещалось. */
@media (max-width: 1200px) {
    .input-row {
        gap: 14px;
        padding: 9px 10px 9px 18px;
    }

    /* Quick-commands могут переноситься на 2 ряда — нормально. */
    .quick-commands-container {
        padding: 10px 15px;
    }
}

/* Mobile buttons — hidden on desktop */
.mobile-menu-btn,
.mobile-tools-btn,
.mobile-sidebar-close {
    display: none;
}

/* Mobile: <768px */
@media (max-width: 768px) {
    /* Mobile hamburger button (left) */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 98;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        cursor: pointer;
        color: #333;
    }

    /* Mobile tools button (right) */
    .mobile-tools-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 98;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        cursor: pointer;
        color: #333;
    }

    /* Мобильная шапка плашки: логотип слева, крестик справа, по центру по вертикали */
    aside#sidebar .sidebar-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 6px 0 2px;
    }

    /* Логотип — возвращаем в поток flex (на десктопе он absolute), чтобы встал слева в строку */
    aside#sidebar .logo-row {
        position: relative;
        left: auto;
        right: auto;
    }

    /* Крестик закрытия — в потоке справа (order:2), фирменный стиль: индиго на светлом фоне */
    .mobile-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        order: 2;
        flex: none;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 12px;
        background: #F2F4FF;
        color: #3F3FE6;
        cursor: pointer;
        transition: background 0.15s ease;
        z-index: 5;
    }
    .mobile-sidebar-close svg { width: 20px; height: 20px; }
    .mobile-sidebar-close:hover {
        background: #E6E9FF;
    }

    /* Sidebar скрыт по умолчанию — ВСЕГДА за экраном на мобильном */
    aside#sidebar.sidebar,
    aside#sidebar.sidebar.collapsed {
        position: fixed !important;
        left: -100vw !important;
        top: 0;
        z-index: 100;
        width: 85vw !important;
        max-width: 320px;
        height: 100vh;
        transition: left 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Collapsed иконки — скрыты на мобильном */
    aside#sidebar.sidebar.collapsed .collapsed-icons {
        display: none !important;
    }

    /* При открытии */
    aside#sidebar.sidebar.mobile-open,
    aside#sidebar.sidebar.collapsed.mobile-open {
        left: 0 !important;
    }

    /* Принудительно показываем содержимое collapsed sidebar при mobile-open.
       .sidebar-top НЕ форсим — он должен оставаться flex-шапкой (логотип + крестик в строку). */
    aside#sidebar.sidebar.collapsed.mobile-open .history-title,
    aside#sidebar.sidebar.collapsed.mobile-open .chat-history,
    aside#sidebar.sidebar.collapsed.mobile-open .create-chat-wrap {
        display: block !important;
    }

    /* Шапка в mobile-open — flex-строка (перебиваем возможные block-правила спецификацией) */
    aside#sidebar.sidebar.mobile-open .sidebar-top,
    aside#sidebar.sidebar.collapsed.mobile-open .sidebar-top {
        display: flex !important;
    }

    aside#sidebar.sidebar.collapsed.mobile-open .collapsed-icons {
        display: none !important;
    }

    /* Внутренние элементы sidebar — ограничиваем ширину */
    aside#sidebar.sidebar .chat-history {
        width: auto !important;
        max-width: 100%;
    }

    aside#sidebar.sidebar .chat-item,
    aside#sidebar.sidebar .chat-item.main-chat {
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Toggle кнопка — скрыта на мобильном (используем гамбургер) */
    aside#sidebar.sidebar .toggle-sidebar-btn {
        display: none !important;
    }

    /* Overlay при открытом sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Right panel — drawer справа на мобильном */
    .right-panel {
        position: fixed !important;
        top: 0 !important;
        right: -260px !important;
        left: auto !important;
        bottom: 0 !important;
        width: 60px !important;
        max-width: 60px !important;
        height: 100vh !important;
        z-index: 100;
        transition: right 0.3s ease;
        background: #F2F4FF !important;
        box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    }

    .right-panel.mobile-open {
        right: 0 !important;
    }

    /* Vertical separator — скрыт */
    .vertical-sep {
        display: none !important;
    }

    /* Sidebar footer — скрыт по умолчанию на мобильном (высокая специфичность чтобы перебить collapsed) */
    aside#sidebar.sidebar .sidebar-footer,
    aside#sidebar.sidebar.collapsed .sidebar-footer {
        display: none !important;
    }

    /* Показываем footer только когда sidebar открыт — как на десктопе */
    aside#sidebar.sidebar.mobile-open .sidebar-footer,
    aside#sidebar.sidebar.collapsed.mobile-open .sidebar-footer {
        display: flex !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 80px !important;
        background: #F2F4FF !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        z-index: 101;
    }

    /* Показываем имя и email в footer на мобильном */
    aside#sidebar.sidebar.mobile-open .sidebar-footer .user-texts,
    aside#sidebar.sidebar.collapsed.mobile-open .sidebar-footer .user-texts {
        display: block !important;
    }

    aside#sidebar.sidebar.mobile-open .sidebar-footer .profile-row,
    aside#sidebar.sidebar.collapsed.mobile-open .sidebar-footer .profile-row {
        padding: 0 32px 0 25px !important;
        gap: 12px !important;
    }

    aside#sidebar.sidebar.mobile-open .sidebar-footer .avatar,
    aside#sidebar.sidebar.collapsed.mobile-open .sidebar-footer .avatar {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    /* Sidebar внутренние отступы на мобильном */
    aside#sidebar.sidebar.mobile-open,
    aside#sidebar.sidebar.collapsed.mobile-open {
        padding: 12px 16px 80px !important;
    }

    /* Main content занимает всю ширину */
    .main-content {
        width: 100%;
    }

    /* Vertical separator не нужен */
    .vertical-sep {
        display: none !important;
    }

    /* Messages area - полная ширина */
    .messages-area {
        right: 0 !important;
        top: 56px;
        bottom: 90px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Кнопки ввода — компактнее на мобильном */
    .send-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .send-button img {
        width: 32px;
        height: 32px;
    }

    .attach-button {
        width: 16px;
        height: 18px;
    }

    /* Input - полная ширина */
    .input-container-wrapper.chat-mode {
        right: 0;
        padding: 0 16px;
        bottom: 16px;
    }

    .input-container-wrapper.welcome-mode {
        width: calc(100% - 32px);
        padding: 0 16px;
    }

    /* iOS Safari зумит при фокусе на input с font-size < 16px.
       В desktop textarea 17px — всё ок, но в мобильной вёрстке
       во избежание зума явно поднимаем до 16px. */
    .text-input {
        font-size: 16px;
    }

    /* Input-row уплотняется, кнопки остаются 36×36 (Figma) —
       отступы меньше. */
    .input-row {
        padding: 8px 10px 8px 14px;
        gap: 12px;
    }

    /* Quick-commands на мобильном — горизонтальный скролл вместо
       переноса, чтобы не занимать лишнее место под input. */
    .quick-commands-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 14px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .quick-commands-container::-webkit-scrollbar {
        display: none;
    }

    /* File-preview контейнер — один ряд, плитка остаётся 196px
       (как в Figma), если их несколько — горизонтальный скролл. */
    .files-container-in-input {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 12px 14px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .files-container-in-input::-webkit-scrollbar {
        display: none;
    }

    /* User messages - меньше отступ справа */
    .message.user {
        margin-right: 0 !important;
        max-width: 85% !important;
    }

    /* Assistant messages */
    .message.assistant {
        max-width: 90% !important;
    }

    /* Bot logo меньше */
    .bot-logo {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    /* Welcome */
    .welcome-container {
        width: calc(100% - 32px);
        padding: 0 16px;
    }

    .title {
        font-size: 36px !important;
    }

    .subtitle {
        font-size: 14px !important;
    }
}

/* Small mobile: <480px */
@media (max-width: 480px) {
    .mobile-menu-btn {
        top: 8px;
        left: 8px;
        width: 40px;
        height: 40px;
    }

    .message.user {
        max-width: 90% !important;
    }

    .input-container-wrapper.chat-mode {
        bottom: 8px;
        padding: 0 8px;
    }

    .send-button {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .send-button img {
        width: 30px;
        height: 30px;
    }

    .attach-button {
        width: 16px;
        height: 18px;
    }

    .input-row {
        min-height: 44px;
    }

    .input-row {
        padding: 8px 8px 8px 12px;
        gap: 10px;
    }

    /* File-preview занимает всю доступную ширину на маленьком
       экране (вместо фиксированных 196px). */
    .file-tile.file-tile--preview {
        width: 100%;
        max-width: 100%;
    }

    .messages-area {
        bottom: 80px;
    }

    .title {
        font-size: 28px !important;
    }
}