/* ===== Trợ lý học tập AI — Giáo dục vì trẻ em ===== */

.tutor-shell {
    max-width: 920px;
    margin: 0 auto;
}

.tutor-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    min-height: min(70vh, 640px);
}

.tutor-chat-log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px;
    max-height: 56vh;
}

.tutor-msg {
    display: flex;
    width: 100%;
}

.tutor-msg.is-user {
    justify-content: flex-end;
}

.tutor-bubble {
    max-width: min(640px, 92%);
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.96rem;
    line-height: 1.62;
    word-break: break-word;
}

.is-assistant .tutor-bubble {
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-bottom-left-radius: 6px;
}

.is-user .tutor-bubble {
    background: #0f766e;
    color: #fff;
    border-bottom-right-radius: 6px;
}

.tutor-bubble p {
    margin: 0 0 8px;
}

.tutor-bubble p:last-child {
    margin-bottom: 0;
}

.tutor-hint {
    color: #5f7588;
    font-size: 0.88rem;
}

/* Khối bước giải */
.tutor-steps {
    margin: 8px 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.tutor-steps li {
    position: relative;
    padding-left: 22px;
}

.tutor-steps li::before {
    content: '▸';
    position: absolute;
    left: 4px;
    color: #0f766e;
    font-weight: 800;
}

/* Hình vẽ JSXGraph trong câu trả lời */
.tutor-figure-box {
    margin: 10px 0;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: #fff;
    min-height: 120px;
}

.tutor-figure-box .jxgbox {
    width: 100%;
    height: 300px;
}

/* KaTeX */
.tutor-bubble .katex-display {
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Ô nhập */
.tutor-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.tutor-input {
    flex: 1;
    resize: vertical;
    min-height: 54px;
}

.tutor-send {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 46px;
    min-width: 46px;
    padding: 0 16px;
}

.tutor-disclaimer {
    margin: 0;
    font-size: 0.82rem;
    color: #6a7d8b;
}

@media (max-width: 720px) {
    .tutor-main {
        padding: 14px;
        min-height: 60vh;
    }

    .tutor-chat-log {
        max-height: 52vh;
    }

    .is-assistant .tutor-bubble,
    .is-user .tutor-bubble {
        max-width: 100%;
    }
}