#chat {
box-sizing: border-box;
width: 100%;               /* 100% ширины родителя */
max-width: 100%;
background: #fff;
margin: 16px 0;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
min-height: 320px;
height: clamp(380px, 30vh, 680px); /* адаптивная высота */
}


/* Область сообщений */
#chat-box {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
overscroll-behavior: contain; /* меньше скачков прокрутки на мобилках */
}


/* Ввод и кнопка */
#chat-input {
display: flex;
gap: 8px;
padding: 8px;
border-top: 1px solid #eee;
}
#chat-input input {
flex: 1;
min-height: 44px;          /* удобная зона тапа */
font-size: 16px;           /* чтобы iOS не зумил */
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
}
#chat-input input:focus {
border-color: #b7c8ef;
box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}
#chat-input button {
min-height: 44px;
padding: 0 14px;
border: none;
border-radius: 8px;
background: #1565c0;
color: #fff;
cursor: pointer;
}
#chat-input button:hover { filter: brightness(0.95); }
#chat-input button:active { transform: translateY(1px); }


/* Сообщения */
.msg { margin: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
.msg.user { text-align: right; color: #1565c0; }
.msg.assistant { text-align: left; color: #333; }


/* Отладка */
.debug {
font-size: 11px;
color: #777;
white-space: pre-wrap;
background: #f5f5f5;
padding: 6px 8px;
border-radius: 8px;
margin: 10px 0;
}


/* Markdown-оформление */
.msg.assistant p { margin: 0.5em 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { margin: 0.8em 0 0.4em; }
.msg.assistant ul, .msg.assistant ol { margin: 0.4em 0 0.4em 1.2em; }
.msg.assistant blockquote {
border-left: 3px solid #ddd;
margin: 0.6em 0;
padding: 0.2em 0.8em;
color: #555;
background: #fafafa;
}
.msg.assistant pre {
background: #f6f8fa;
padding: 10px;
border-radius: 8px;
overflow: auto; /* горизонтальный скролл для длинного кода */
}
.msg.assistant code {
background: #f6f8fa;
padding: 2px 4px;
border-radius: 4px;
}
pre code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
}

/* Базово: перенос длинных слов */
.msg { overflow-wrap: anywhere; word-break: break-word; }
/* Изображения (если разрешены) не вылезают за границы */
.msg.assistant img { max-width: 100%; height: auto; }
/* Убираем горизонтальный скролл и переносим строки в коде на мобилках */
#chat, #chat-box { max-width: 100%; overflow-x: hidden; }
.msg.assistant pre,
.msg.assistant code,
.msg.assistant pre code,
.msg.assistant code.hljs,
.msg.assistant .hljs {
white-space: pre-wrap !important;   /* переносим строки в pre/code */
word-break: break-word;
overflow-wrap: anywhere;
overflow-x: hidden;                 /* убираем горизонтальную прокрутку */
}

/* ——— Мобильные улучшения ——— */
@media (max-width: 640px) {
#chat {
margin: 0;               /* убрать внешние поля — пусть тянется от края до края родителя */
border-radius: 0;        /* опционально: ровные края во всю ширину */
height: clamp(360px, 35vh, 720px);
box-shadow: none;        /* меньше "тяжелых" теней на мобилках */
}
#chat-box { padding: 12px; }
}