/* ================= MESSAGES ================= */
/* Message wrapper для позиционирования logo */
.message-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}

/* Bot logo слева от assistant message */
.bot-logo {
    width: 28px;
    height: 29px;
    margin-right: 29px;
    flex-shrink: 0;
}

/* Сообщение пользователя - адаптивная ширина, справа */
.message.user {
    width: fit-content;
    max-width: 70%;
    min-width: 50px;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 8px;
    align-self: flex-end;
}

/* Файл в сообщении пользователя — плитка выровнена справа.
   Внешний вид задаётся классом .file-tile (file-tile.css);
   здесь только позиционирование. */
.message.user .file-attachment-display {
    margin-left: auto;
    margin-right: 0;
}

.message.user .message-content {
    width: fit-content;
    max-width: 100%;
    display: inline-block;
}

/* Сообщение ассистента - адаптивная ширина, слева */
.message.assistant {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 8px;
}

.message-content {
    background: #FFFFFF;
    border: none;
    border-radius: 20px 20px 20px 6px;
    padding: 11px 25px;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    box-shadow: none;
    color: #000000;
}

.message.user .message-content {
    background: #F2F4FF;
    border: none;
    border-radius: 20px 20px 6px 20px;
    color: #000000;
}

.message.assistant .message-content {
    background: #FFFFFF;
    border: none;
    color: #000000;
    box-shadow: none;
}

/* --- Markdown стили в сообщениях ассистента --- */

/* Отключаем pre-wrap для markdown (marked генерирует свои <p> и <br>) */
.message.assistant .message-content {
    white-space: normal;
}

/* Все markdown-элементы: margin 0, наследуют line-height от .message-content */
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4,
.message.assistant .message-content p,
.message.assistant .message-content ul,
.message.assistant .message-content ol,
.message.assistant .message-content blockquote,
.message.assistant .message-content pre {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4 {
    font-family: 'Manrope', sans-serif;
    color: #1a1a2e;
}
.message.assistant .message-content h1 { font-size: 1.15em; font-weight: 700; }
.message.assistant .message-content h2 { font-size: 1.05em; font-weight: 700; }
.message.assistant .message-content h3 { font-size: 1em; font-weight: 600; }
.message.assistant .message-content h4 { font-size: 1em; font-weight: 600; }

.message.assistant .message-content ul,
.message.assistant .message-content ol {
    padding-left: 20px;
}
.message.assistant .message-content li::marker {
    color: #3F3FE6;
}

.message.assistant .message-content strong,
.message.assistant .message-content b {
    font-weight: 700;
    color: #1a1a2e;
}

.message.assistant .message-content em,
.message.assistant .message-content i {
    font-style: italic;
}

.message.assistant .message-content code {
    background: #F2F4FF;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #3F3FE6;
}

.message.assistant .message-content pre {
    background: #F5F5FD;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 4px 0;
    overflow-x: auto;
    white-space: pre-wrap;
}
.message.assistant .message-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.85em;
    color: #333;
}

.message.assistant .message-content blockquote {
    border-left: 3px solid #3F3FE6;
    padding-left: 10px;
    margin: 4px 0;
    color: #555;
    font-style: italic;
}

.message.assistant .message-content a {
    color: #3F3FE6;
    text-decoration: underline;
    font-weight: 500;
}
.message.assistant .message-content a:hover {
    color: #3333C0;
}

.message.assistant .message-content hr {
    border: none;
    border-top: 1px solid #E8E8F0;
    margin: 4px 0;
}

.message-time {
    font-size: 12px;
    color: #808080;
    margin-top: 6px;
    padding: 0 4px;
}

.message.user .message-time {
    text-align: right;
}

/* System messages */
.message.system {
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
    width: auto;
}

.message.system .message-content {
    background: #e3f2fd;
    color: #1976d2;
    font-style: italic;
    border: 1px solid #bbdefb;
    font-family: 'Manrope';   
    font-weight: 500;   
}

/* File message */
.message.file-message {
    width: fit-content;
    max-width: 196px;
    min-height: 50px;
    padding: 0;
    margin: 0 0 8px auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    align-self: flex-end;
}

.message.file-message .message-content {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    height: auto;
    box-shadow: none;
}

/* File attachment display
   Визуал плитки (размер, border, шрифты) вынесен в file-tile.css
   как переиспользуемый компонент .file-tile. Классы
   .file-attachment-display/_icon/_info/_name/_size сохранены на
   разметке ради обратной совместимости — стилей у них больше нет. */

/* ================= TYPING INDICATOR ================= */
.typing-indicator {
    display: none;
}

.typing-indicator.active {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Dot flashing loader */
.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #3F3FE6;
    color: #3F3FE6;
    animation: dot-flashing 0.8s infinite linear alternate;
    animation-delay: 0.5s;
    align-self: center;
}

.dot-flashing::before, .dot-flashing::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #3F3FE6;
    color: #3F3FE6;
    animation: dot-flashing 0.8s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #3F3FE6;
    color: #3F3FE6;
    animation: dot-flashing 0.8s infinite alternate;
    animation-delay: 0.8s;
}

@keyframes dot-flashing {
    0% {
        background-color: #3F3FE6;
    }
    50%, 100% {
        background-color: rgba(63, 63, 230, 0.2);
    }
}

/* Стили для dot-flashing внутри message-content */
.message.assistant .message-content .dot-flashing {
    margin-left: 0;
}

/* Markdown-рендер внутри сообщений ассистента */
.message-content p {
    margin: 0 0 0.5em;
}
.message-content p:last-child {
    margin-bottom: 0;
}
.message-content pre {
    overflow-x: auto;
    background: #f5f5f5;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0.5em 0;
    font-size: 14px;
    white-space: pre-wrap;
}
.message-content code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
}
.message-content pre code {
    background: none;
    padding: 0;
}
.message-content ul,
.message-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}
.message-content li {
    margin: 0.25em 0;
}
.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6 {
    margin: 0.75em 0 0.35em;
    font-weight: 600;
}
.message-content h1:first-child, .message-content h2:first-child,
.message-content h3:first-child { margin-top: 0; }
.message-content blockquote {
    margin: 0.5em 0;
    padding-left: 1em;
    border-left: 3px solid #ddd;
    color: #555;
}
.message-content a {
    color: #3f3fe6;
    text-decoration: none;
}
.message-content a:hover {
    text-decoration: underline;
}

/* Direct chat mode: hide bot logo for peer-to-peer messages */
.direct-chat-mode .message-wrapper .bot-logo {
    display: none;
}
.direct-chat-mode .message-wrapper .message.assistant {
    margin-left: 0;
}






/* Индикатор загрузки при переключении чата (вместо пустого экрана) */
.chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
}

.chat-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(63, 63, 230, 0.15);
    border-top-color: #3F3FE6;
    border-radius: 50%;
    animation: chat-loading-spin 0.7s linear infinite;
}

@keyframes chat-loading-spin {
    to { transform: rotate(360deg); }
}