/* ============================================================================
   AI-ресепшен — адаптивный интерфейс: одинаково удобно на телефоне и ноутбуке.
   Mobile-first: базовые правила для узкого экрана, @media расширяют под десктоп.
   Ключевые инварианты против «уезжающего» layout:
     - box-sizing: border-box везде;
     - body без горизонтального скролла;
     - у flex-детей min-width: 0, у текста overflow-wrap — иначе длинное имя/URL
       распирает строку шире экрана.
   ============================================================================ */

:root {
    --bg: #eef1f4;
    --surface: #ffffff;
    --surface-2: #f6f8fa;
    --ink: #14202b;
    --muted: #667180;
    --line: #e2e7ec;
    --accent: #0d6e6e;
    --accent-ink: #ffffff;
    --accent-soft: #e3f1f1;
    --alert: #b3261e;
    --alert-soft: #fdecea;
    --human: #8a5300;
    --human-soft: #fbeecd;
    --radius: 14px;
    --radius-sm: 10px;
    --tap: 46px;
    --maxw: 760px;
    --header-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1720;
        --surface: #17212c;
        --surface-2: #1e2a37;
        --ink: #e8edf2;
        --muted: #93a0ad;
        --line: #26333f;
        --accent: #2bb3a3;
        --accent-ink: #06231f;
        --accent-soft: #143530;
        --alert: #ff6b5e;
        --alert-soft: #3a1d1b;
        --human: #e0a83a;
        --human-soft: #382a12;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;               /* защита от случайного горизонтального скролла */
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Верхняя панель: липкая, не уезжает; на узком экране нав переносится --- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-height: var(--header-h);
}

.topbar > strong {
    font-size: 17px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.topbar .back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-right: 4px;
    font-weight: 600;
}

.topbar nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 100%;
}

.topbar nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* --- Контейнер контента: телефон — на всю ширину, десктоп — колонка по центру --- */
.panel, .auth {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px 14px calc(24px + var(--safe-b));
}

.muted { color: var(--muted); }

.alert {
    background: var(--alert-soft);
    color: var(--alert);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}

.card h2, .card h3 { margin: 0 0 10px; }

/* --- Список диалогов: карточки без переполнения, крупная тач-цель --- */
.dialog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.dialog-list a {
    display: block;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: inherit;
    min-height: 64px;
}
.dialog-list a:hover { text-decoration: none; border-color: var(--accent); }

.dialog-list .row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dialog-list .name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialog-list .time { color: var(--muted); font-size: 13px; white-space: nowrap; flex: none; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.badge {
    display: inline-block;
    font-size: 12px;
    line-height: 1.6;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
}
.badge.alert { background: var(--alert-soft); color: var(--alert); font-weight: 700; }
.badge.human { background: var(--human-soft); color: var(--human); font-weight: 700; }

/* --- Тред: сообщения + прилипшая снизу форма ответа --- */
.thread { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-h)); }

.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--human-soft);
    color: var(--human);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}
.notice form { display: flex; gap: 8px; flex-wrap: wrap; }

.messages { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; flex: 1; }

.msg {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow-wrap: anywhere;
}
.msg.in { align-self: flex-start; border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: var(--accent-soft); border-color: transparent; border-bottom-right-radius: 5px; }
.msg .text { white-space: pre-wrap; }
.msg .meta { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* --- Формы --- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 15px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input:not([type]), textarea, select {
    font: inherit;
    width: 100%;
    max-width: 100%;
    padding: 12px 13px;
    min-height: var(--tap);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { resize: vertical; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 0 18px;
    font: inherit;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }

/* Форма ответа гостю — прилипает к низу экрана, с учётом «чёлки» телефона.
   Ряд «поле|кнопка»: textarea забирает всё место (flex:1, min-width:0),
   кнопка компактная и не сжимается — длинный текст её больше не распирает. */
.reply-form {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 calc(10px + var(--safe-b));
    background: linear-gradient(to top, var(--bg) 82%, transparent);
}
.reply-hint { margin: 0; font-size: 12px; color: var(--muted); }
.reply-row { display: flex; gap: 8px; align-items: flex-end; }
.reply-row textarea { flex: 1 1 auto; min-width: 0; min-height: var(--tap); max-height: 32vh; }
.reply-row .btn { flex: 0 0 auto; }

/* --- Вход --- */
.auth { max-width: 400px; padding-top: 10vh; }
.auth h1 { text-align: center; font-size: 22px; margin-bottom: 20px; }

/* --- База знаний / раскрываемые карточки --- */
details.card > summary {
    cursor: pointer;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸"; color: var(--muted); }
details.card[open] > summary::before { content: "▾"; }
details.card > form, details.card > .form { margin-top: 12px; }

/* ============================================================================
   Десктоп/планшет: комфортная колонка, инлайновая навигация, широкие сообщения.
   ============================================================================ */
@media (min-width: 720px) {
    .topbar { padding-left: 24px; padding-right: 24px; }
    .panel, .auth { padding-left: 24px; padding-right: 24px; }
    .msg { max-width: 72%; }
    .reply-form { padding-bottom: 14px; }
}

@media (min-width: 1024px) {
    :root { --maxw: 820px; }   /* инбокс: комфортная колонка по центру, не растянутая на весь монитор */
}