/* ================= SIDEBAR (expanded) ================= */
aside#sidebar.sidebar {
    --sw: 300px;                /* ширина плашки — единый источник для слоя и футера (на планшете переопределяется на 250px) */
    width: var(--sw);
    height: 100vh;
    background: #FFFFFF;
    padding: 0;                 /* padding перенесён в .sidebar-body (фикс-слой) */
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    z-index: 6;
    /* transition добавляется JS после загрузки (.ready) чтобы не мерцать */
    overflow: hidden;           /* клип фикс-слоя (300px) при сужении — контент не «вылезает» */
    box-shadow: 2px 4px 6px rgba(69, 22, 200, 0.1);  /* правый край панели (собственная тень не режется своим overflow) */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

aside#sidebar.sidebar.ready {
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

aside#sidebar.sidebar.ready ~ .main-content .input-container-wrapper.chat-mode {
    transition: left 0.3s ease, right 0.3s ease, padding 0.3s ease;
}

/* Sidebar top */
.sidebar-top {
    position: relative;
    width: 100%;
    margin-bottom: 58px;
}

/* Logo */
.logo-row {
    position: absolute;
    left: 0;
    right: 0;
    width: 160px;
    height: 34px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.logo-row:hover {
    opacity: 0.7;
}

.logo-icon {
    position: absolute;
    left: 0;
    top: 3px;
    width: 25px;
    height: 25.58px;
    object-fit: contain;
    pointer-events: none;
}

.logo-text {
    position: absolute;
    left: 36px;
    top: 0;
    font-family: "CenturyGothicBold";
    font-size: 28px;
    font-weight: 700;
    color: #3F3FE6;
    line-height: 34px;
    pointer-events: none;
}

/* Toggle button */
.toggle-sidebar-btn {
    position: absolute;
    left: 224px;
    top: 9px;
    width:25.33px;
    height:19px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
}

/* === Create chat === */
.create-chat-wrap {
    position: relative;
    width: 100%;
    z-index: 3;
}

.create-chat-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    position: relative;
    transition: opacity 0.2s ease;
}

.create-chat-btn:hover {
    opacity: 1;
}

.create-chat-btn img {
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: filter 0.2s ease;
}

.create-chat-btn:hover img {
    filter: brightness(0.65) saturate(1.8);
}

.create-text {
    font-family: "Manrope";
    font-weight: 700;
    font-size: 20px;
    color: #000000;
    margin-left: 43px;
}

/* History title */
.history-title{
    margin-top: 28px;
    margin-bottom: 24px;
    font-family: "CenturyGothicBold";
    font-weight: 700;
    font-size: 24px;
    color: #000000;
    letter-spacing: -0.3px;
}

/* Chat history */
.chat-history {
    position: relative;
    width: 268px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    margin-left: -9px;
    flex: 1;
    min-height: 0;          /* флекс-элемент может стать ниже контента → включается скролл */
    margin-bottom: 0;
    padding-bottom: 92px;
    mask-image: none;
    -webkit-mask-image: none;
}

.chat-history.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 30px, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30px, black 100%);
}

/* Кастомный скроллбар для chat-history */
.chat-history::-webkit-scrollbar {
    width: 6px;
}

.chat-history::-webkit-scrollbar-track {
    background: transparent;
}

.chat-history::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

/* Chat item - общие стили (не для main-chat) */
.chat-item:not(.main-chat) {
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.chat-item:not(.main-chat) .chat-title {
    flex: 1;
    min-width: 0;
}

.chat-item:not(.main-chat):hover {
    background: #F2F4FF;
    transform: translateX(2px);
}

.chat-item:not(.main-chat).active {
    background: #F2F4FF;
}

.chat-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    line-height: 1.4;
    min-width: 0; /* Позволяет тексту сжиматься */
}

/* Контейнер для кнопок действий чата */
.chat-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chat-item:hover .chat-actions {
    opacity: 1;
}

/* Для обычных чатов (не main-chat) */
.chat-item:not(.main-chat) .chat-actions {
    position: static;
}

.edit-chat-btn,
.delete-chat-btn {
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.edit-chat-btn img {
    width: 14px;
    height: 14px;
    opacity: 1;
    transition: opacity 0.2s ease;
    display: block;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

.edit-chat-btn:hover {
    background: #e3f2fd;
    opacity: 1 !important;
}

.edit-chat-btn:hover img {
    opacity: 1;
}

.delete-chat-btn:hover {
    background: #ffebee;
    color: #dc3545;
    opacity: 1 !important;
}

/* Empty state */
.sidebar-empty-state {
    display: none;
}

/* Пустое состояние (нет чатов) — иллюстрация по центру тела сайдбара.
   Показывается, когда JS/сервер НЕ повесили класс .hidden (т.е. чатов нет).
   Ранее .sidebar-empty-state было жёстко display:none → иллюстрация не появлялась никогда. */
.sidebar-empty-state:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    bottom: 88px;
    padding: 16px;
    pointer-events: none;
}

.empty-illustration {
    height:129px;
    max-height:176px;
    object-fit:contain;
    opacity:0.95;
}

/* Sidebar footer */
.sidebar-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 80px;
    background:#F2F4FF;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    display:flex;
    align-items:center;
    justify-content: flex-start;
    padding:0;
    box-sizing:border-box;
    z-index: 7;
    overflow: hidden;
}

aside#sidebar.sidebar.ready .sidebar-footer {
    transition: width 0.3s ease, padding 0.3s ease;
}

.profile-row { 
    display:flex; 
    align-items:center; 
    gap:12px; 
    width:100%; 
    height:100%;
    cursor: pointer;
    padding: 0 32px 0 25px;
    border-radius: 0;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.profile-row:hover {
    background-color: rgba(63, 63, 230, 0.08);
    transform: translateX(2px);
}

.profile-row::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%233F3FE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

.profile-row:hover::after {
    opacity: 1;
    right: 10px;
}

.user-texts {
    flex: 1;
    min-width: 0;
    display:flex; 
    flex-direction:column; 
}

.avatar {
    width:45px;
    height:45px;
    border-radius:50%;
    background:#D7DDFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    color:#3F3FE6;
    transition: width 0.3s ease, height 0.3s ease;
    flex-shrink: 0;
}

.avatar.avatar-image {
    background: none;
    object-fit: cover;
    border: 2px solid #D7DDFF;
}

.avatar.avatar-placeholder {
    background:#D7DDFF;
    font-family: "CenturyGothicBold", sans-serif;
}

.user-name { 
    font-family:"CenturyGothicBold";
    font-weight:700; 
    font-size:17px; 
    color:#000; 
}

.user-email {
    font-family:"Manrope";
    font-weight:300;
    font-size:14px;
    color:#000000;
}

/* ================= Collapsed SIDEBAR ================= */
aside#sidebar.collapsed {
    width: 60px !important;
    padding: 0 !important;
}

/* Слой развёрнутого контента: фикс-ширина 300px → внутри ничего не переливается при сужении.
   Панель обрезает его краем (overflow:hidden на aside), а сам слой кроссфейдится с рельсом. */
.sidebar-body {
    width: var(--sw);         /* совпадает с шириной плашки → контент центрируется ровно, ничего не уезжает */
    align-self: flex-start;   /* не растягивается по узкой панели */
    flex: 1 1 0;              /* заполняет И сжимается до высоты сайдбара (было 1 0 auto → не сжимался, список обрезался) */
    box-sizing: border-box;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    transition: opacity 0.18s ease;
}

/* Сворачивание: слой гаснет (кроссфейд), край панели едет — контент не пересобирается */
aside#sidebar.collapsed .sidebar-body {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Мобилка: панель — выезжающий drawer, фикс-слой/клип не нужны — делаем слой сквозным */
@media (max-width: 768px) {
    aside#sidebar.sidebar {
        overflow: visible;
    }
    .sidebar-body {
        width: 100%;
        align-self: stretch;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Рельс иконок всегда в DOM и поверх (absolute) — кроссфейд по opacity, без display-рывка */
.collapsed-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    padding: 20px 0;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Сворачивание: рельс проявляется ПОСЛЕ сужения панели */
aside#sidebar.collapsed .collapsed-icons {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.16s ease 0.32s;
}

/* Стили кнопок в collapsed режиме */
.collapsed-icon-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.collapsed-icon-btn:hover {
    background: rgba(63, 63, 230, 0.1);
}

/* Логотип в рельсе — выравниваем по вертикали с развёрнутым логотипом (чтобы при сворачивании не прыгал) */
.collapsed-icon-btn[data-name="logo"] {
    margin-top: 6px;
}

.collapsed-icon-btn[data-name="toggle"] {
    margin-top: 0;
}

.collapsed-icon-btn[data-name="create"] {
    margin-top: 0;
}

.collapsed-icon-btn[data-name="history"] {
    margin-top: 0;
}

/* Свернутый футер: та же высота (80px) и скругление верхних углов (20px), что и в развёрнутом — не прямоугольный и не «меньше» */
aside#sidebar.collapsed .sidebar-footer {
    display: flex !important;
    width: 60px !important;
    height: 80px;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #F2F4FF;
}

/* Profile row в collapsed - центрируем */
aside#sidebar.collapsed .sidebar-footer .profile-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

aside#sidebar.collapsed .sidebar-footer .profile-row::after {
    display: none;
}

/* Аватарка в collapsed footer — тот же размер, что и в развёрнутом (45px), чтобы не менялась при сворачивании */
aside#sidebar.collapsed .sidebar-footer .avatar {
    margin: 0 !important;
    flex-shrink: 0;
}

/* Скрываем текстовые элементы в свёрнутом footer */
aside#sidebar.collapsed .sidebar-footer .user-texts {
    display: none !important;
}

/* Main chat items */
.chat-item.main-chat {
    width: 268px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat-item.main-chat:hover {
    background: #F2F4FF;
}

.chat-item.main-chat.active {
    background: #F2F4FF;
}

/* Контейнер для иконок */
.chat-icon-container {
    position: absolute;
    left: 6px;
    top: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Заголовок чата в main-chat - должен быть справа от иконки */
.chat-item.main-chat .chat-title {
    position: absolute !important;
    left: 38px !important; /* 6px (left иконки) + 24px (ширина иконки) + 8px (отступ) = 38px */
    right: 60px !important; /* Оставляем место для кнопок действий (24px + 4px gap + 24px + 8px margin) */
    height: 23px !important;
    font-family: "Manrope" !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: #000000 !important;
    line-height: 23px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: none !important; /* Отменяем flex: 1 из общих стилей */
    min-width: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Кнопки действий в main-chat */
.chat-item.main-chat .chat-actions {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chat-item.main-chat:hover .chat-actions {
    opacity: 1;
}

.chat-item.main-chat .edit-chat-btn,
.chat-item.main-chat .delete-chat-btn {
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-item.main-chat .edit-chat-btn img {
    width: 16px;
    height: 16px;
    opacity: 1;
    transition: opacity 0.2s ease;
    display: block;
}

.chat-item.main-chat .edit-chat-btn:hover {
    background: #e3f2fd;
    opacity: 1 !important;
}

.chat-item.main-chat .edit-chat-btn:hover img {
    opacity: 1;
}

.chat-item.main-chat .delete-chat-btn:hover {
    background: #ffebee;
    color: #dc3545;
    opacity: 1 !important;
}

/* Иконка по умолчанию */
.chat-icon-default {
    width: 24px;
    height: 24px;
    display: block;
    transition: opacity 0.2s ease;
}

/* Иконка при раскрытии */
.chat-icon-hover {
    position: absolute;
    left: 5px;
    top: 9px;
    width: 14px;
    height: 6px;
    display: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* При наведении на main-chat (но НЕ expanded) - показываем open.svg */
.chat-item.main-chat.has-subchats:hover:not(.expanded) .chat-icon-default {
    display: none;
}

.chat-item.main-chat.has-subchats:hover:not(.expanded) .chat-icon-hover {
    display: block;
    transform: rotate(0deg);
}

/* Когда субчаты раскрыты - показываем open.svg и переворачиваем */
.chat-item.main-chat.expanded .chat-icon-default {
    display: none;
}

.chat-item.main-chat.expanded .chat-icon-hover {
    display: block;
    transform: rotate(180deg);
}

/* Subchats container */
.subchats-container {
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.subchats-container.expanded {
    max-height: 1000px;
    opacity: 1;
}

.subchat-item {
    padding-left: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.subchat-item .chat-title {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
    font-size: 14px;
    font-weight: 500;
}

.subchat-item .delete-chat-btn {
    opacity: 0;
    transition: all 0.2s ease;
}

.subchat-item:hover .delete-chat-btn {
    opacity: 1;
}