#ai-chat-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: 1000; font-family: sans-serif; }
#ai-chat-btn { width: 60px; height: 60px; border-radius: 50%; background: #007bff; border: none; color: white; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

#ai-chat-window { 
    display: none; width: 380px; /* Немного расширил для удобства кода */
    height: 500px; background: white; border-radius: 12px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.2); flex-direction: column; 
    overflow: hidden; border: 1px solid #ddd; 
}

#ai-chat-header { background: #007bff; color: white; padding: 15px; font-weight: bold; display: flex; justify-content: space-between; }
#ai-chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #f9f9f9; scroll-behavior: smooth; }

/* Общие стили сообщений */
.msg { 
    max-width: 85%; 
    padding: 10px 14px; 
    border-radius: 15px; 
    font-size: 14px; 
    line-height: 1.5; 
    word-wrap: break-word; /* Фикс вылета текста */
}

.msg.user { align-self: flex-end; background: #007bff; color: white; border-bottom-right-radius: 2px; }

/* Стили для ответов БОТА (Markdown) */
.msg.bot { 
    align-self: flex-start; 
    background: #e9e9eb; 
    color: #333; 
    border-bottom-left-radius: 2px;
    /* УБРАЛИ white-space: pre-wrap, так как Markdown сам управляет переносами */
}

/* Оформление блоков кода внутри ответов */
.msg.bot pre {
    background: #282c34; /* Темный фон для кода */
    color: #abb2bf;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto; /* Горизонтальный скролл если код длинный */
    margin: 10px 0;
    max-width: 100%;
}

.msg.bot code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

/* Списки и абзацы внутри Markdown */
.msg.bot p { margin: 5px 0; }
.msg.bot ul, .msg.bot ol { padding-left: 20px; margin: 5px 0; }

#ai-chat-input-area { padding: 10px; display: flex; border-top: 1px solid #ddd; background: white; }
#ai-chat-input { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 8px 15px; outline: none; }
#ai-chat-send { background: none; border: none; color: #007bff; font-weight: bold; cursor: pointer; padding-left: 10px; }
#ai-chat-send:disabled { color: #ccc; }

.loading { font-style: italic; color: #888; font-size: 12px; margin-bottom: 10px; }
/* Выравниваем шрифт у бота, чтобы он был как у юзера */
.msg.bot {
    color: #000000; /* Делаем текст четким черным */
}

/* Убираем внешние отступы у абзацев внутри сообщения, 
   чтобы пузырек не раздувался, и выравниваем размер шрифта */
.msg.bot p {
    margin: 0; 
    font-size: 14px; /* Тот же размер, что и в .msg */
    line-height: 1.4;
    color: #000000;
}

/* Если абзацев несколько, добавляем небольшой отступ между ними */
.msg.bot p + p {
    margin-top: 8px;
}

@media (max-width: 450px) {
    #ai-chat-window {
        width: calc(100vw - 40px); /* Ширина экрана минус отступы по бокам */
        height: 70vh;              /* Высота 70% от экрана, чтобы клавиатура не перекрыла всё */
        right: 0;                  /* Прижимаем к правому краю через родителя */
    }

    #ai-chat-wrapper {
        right: 10px;               /* Чуть меньше отступ от края экрана */
        bottom: 10px;
    }
}