/* מסך צ'אט — שפת HaHo: בועה דקה ולבנה למשתמש, טקסט חופשי בלי בועה למוח,
   שורת קלט פיל עם כפתור קורל. תלוי ב-tokens.css. */

.chat {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-height) - var(--space-3));
    max-width: 44rem;
    margin-inline: auto;
    width: 100%;
}

/* ---------- ראש השיחה ---------- */

.chat__head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
}

.chat__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
}

.chat__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

/* ---------- יומן ההודעות ---------- */

.chat__log {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* המוח: טקסט חופשי על הרקע, בלי בועה — עם אווטאר קטן */
.msg--brain {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.msg--brain .msg__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface);
    flex: none;
    margin-top: 2px;
}

.msg--brain p {
    margin: 0;
    max-width: 85%;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* המשתמש: בועה דקה, לבנה, בצד השני — הפרדה ברורה מהמוח */
.msg--user {
    display: flex;
    justify-content: flex-end;
}

.msg--user p {
    margin: 0;
    max-width: 75%;
    background: var(--surface);
    border-radius: 1.25rem;
    padding: 0.45em 1em;
    font-size: 0.98rem;
}

/* ---------- שורת הקלט ---------- */

.chat__bar {
    display: flex;
    gap: var(--space-1);
    padding-block: var(--space-1);
}

.chat__input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    padding: 0.75em 1.25em;
    font: inherit;
    color: var(--text);
}

.chat__input::placeholder {
    color: var(--text-muted);
}

.chat__input:focus {
    outline: 2px solid var(--accent-2);
    outline-offset: 0;
}

.chat__send {
    width: 48px;
    height: 48px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.chat__send:active {
    filter: brightness(0.92);
}

/* במובייל שורת הקלט יושבת מעל הניווט התחתון */
@media (max-width: 47.99rem) {
    .chat {
        height: calc(100dvh - var(--header-height) - 84px - env(safe-area-inset-bottom));
    }
}