.nhai-shell,
.nhai-shell * { box-sizing: border-box; }

.nhai-shell {
    --nhai-bg: #0f172a;
    --nhai-bg-deep: #060d1d;
    --nhai-border: #23304a;
    --nhai-panel: #111a2e;
    --nhai-text: #e7edf8;
    --nhai-muted: #9ba8bd;
    --nhai-blue: #2f81f7;
    --nhai-chip: #101a2e;
    --nhai-input: #03091a;
    width: 100%;
    min-height: 650px;
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--nhai-border);
    border-radius: 16px;
    background: var(--nhai-bg);
    color: var(--nhai-text);
    font: inherit;
}

.nhai-sidebar {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-right: 1px solid var(--nhai-border);
    min-width: 0;
}

.nhai-brand h3 {
    margin: 0 0 14px;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--nhai-text);
}

.nhai-brand p {
    margin: 0;
    color: var(--nhai-muted);
    font-size: 13px;
    line-height: 1.55;
}

.nhai-feature-list { margin-top: 25px; }
.nhai-feature {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 20px;
    color: #d4deec;
    font-size: 12.5px;
    line-height: 1.35;
}
.nhai-feature-icon { color: var(--nhai-blue); }
.nhai-feature-icon svg { width: 18px; height: 18px; display:block; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nhai-reset {
    margin-top: auto;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--nhai-border);
    border-radius: 11px;
    background: #0c1528;
    color: #aab7ca;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: .2s ease;
}
.nhai-reset span {
    white-space: nowrap !important;
}
.nhai-reset:hover { border-color: #334568; color: #fff; }
.nhai-reset svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nhai-main {
    min-width: 0;
    min-height: 648px;
    display: grid;
    grid-template-rows: 49px minmax(0, 1fr) auto;
}

.nhai-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 24px;
    border-bottom: 1px solid var(--nhai-border);
    font-size: 12.5px;
    letter-spacing: .02em;
    color: #ced8e8;
}
.nhai-status-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--nhai-blue); box-shadow: 0 0 0 3px rgba(47,129,247,.08); }

.nhai-chat {
    min-height: 0;
    max-height: 724px;
    overflow: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: #263653 transparent;
}

.nhai-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    max-width: 100%;
}
.nhai-message--assistant { justify-content: flex-start; }
.nhai-message--user { justify-content: flex-end; }

.nhai-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #16519c;
    background: #102c55;
    color: #4da0ff;
    font-size: 12px;
}

.nhai-bubble {
    max-width: min(575px, calc(100% - 46px));
    padding: 14px 16px;
    border: 1px solid var(--nhai-border);
    border-radius: 16px;
    background: #10192b;
    color: #d7dfed;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.nhai-message--user .nhai-bubble {
    max-width: 75%;
    border-color: #245c9e;
    background: #12345c;
    color: #f2f7ff;
}


/* Trạng thái trợ lý đang nhập */
.nhai-typing {
    margin-top: 2px;
}
.nhai-typing .nhai-bubble {
    min-width: 88px;
    min-height: 40px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nhai-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 14px;
}
.nhai-typing-dots > span {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: var(--nhai-blue);
    opacity: .45;
    animation: nhai-typing-dot 1.15s ease-in-out infinite;
}
.nhai-typing-dots > span:nth-child(2) { animation-delay: .16s; }
.nhai-typing-dots > span:nth-child(3) { animation-delay: .32s; }

@keyframes nhai-typing-dot {
    0%, 60%, 100% {
        transform: translateY(0) scale(.92);
        opacity: .4;
    }
    30% {
        transform: translateY(-4px) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhai-typing-dots > span {
        animation: none;
        opacity: .75;
    }
}

.nhai-bottom {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--nhai-border);
}
.nhai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.nhai-suggestion {
    min-height: 30px;
    margin: 0 !important;
    padding: 5px 12px;
    border: 1px solid var(--nhai-border);
    border-radius: 8px;
    background: var(--nhai-chip);
    color: #cfd8e7;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal;
    cursor: pointer;
    transition: .2s ease;
}
.nhai-suggestion:hover { color: #fff; border-color: #38527d; background: #14213a; }

.nhai-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) 56px;
    gap: 8px;
    align-items: center;
}
.nhai-input {
    width: 100%;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 1px solid var(--nhai-border) !important;
    border-radius: 13px !important;
    outline: 0;
    background: var(--nhai-input) !important;
    color: #e7edf8 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 14px !important;
}
.nhai-input::placeholder { color: #6f7b8e; }
.nhai-input:focus { border-color: #315b96 !important; box-shadow: 0 0 0 2px rgba(47,129,247,.1) !important; }

.nhai-send {
    width: 100%;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    background: #202c42;
    color: #60708a;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    transition: .2s ease;
}
.nhai-send:hover { background: #273650; color: #8ea5c8; }
.nhai-send:disabled, .nhai-input:disabled { opacity: .55; cursor: wait; }
.nhai-send svg { display: block; width: 19px; height: 19px; margin: 0 !important; padding: 0 !important; flex: 0 0 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nhai-shell.is-loading .nhai-send svg { animation: nhai-pulse .8s ease-in-out infinite alternate; }
@keyframes nhai-pulse { to { transform: translateY(-2px); opacity: .45; } }

@media (max-width: 800px) {
    .nhai-shell { grid-template-columns: 1fr; min-height: 620px; }
    .nhai-sidebar { display: none; }
    .nhai-main { min-height: 620px; }
    .nhai-header { padding: 0 16px; }
    .nhai-chat { padding: 16px; }
    .nhai-bottom { padding: 12px; }
    .nhai-bubble { max-width: calc(100% - 46px); }
    .nhai-message--user .nhai-bubble { max-width: 88%; }
    .nhai-form { grid-template-columns: minmax(0,1fr) 48px; }
    .nhai-suggestion { font-size: 11.5px; }
}

@media (max-width: 480px) {
    .nhai-shell { border-radius: 12px; min-height: 600px; }
    .nhai-main { min-height: 600px; }
    .nhai-suggestions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
    .nhai-suggestion { flex: 0 0 auto; white-space: nowrap; }
    .nhai-chat { padding: 14px 12px; }
    .nhai-avatar { width: 30px; height: 30px; flex-basis: 30px; }
    .nhai-bubble { font-size: 13px; }
}

/* Responsive hardening: keep the chat inside narrow/mobile containers. */
.nhai-shell,
.nhai-main,
.nhai-header,
.nhai-chat,
.nhai-bottom,
.nhai-form {
    min-width: 0;
    max-width: 100%;
}

.nhai-shell {
    max-width: 100%;
}

.nhai-header strong,
.nhai-bubble,
.nhai-suggestion {
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.nhai-form,
.nhai-input,
.nhai-send {
    min-width: 0 !important;
}

.nhai-input {
    max-width: 100% !important;
}

@media (max-width: 800px) {
    .nhai-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
    }

    .nhai-main,
    .nhai-header,
    .nhai-chat,
    .nhai-bottom {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .nhai-header {
        min-height: 49px;
        height: auto;
        padding: 10px 14px;
        line-height: 1.35;
    }

    .nhai-header strong {
        display: block;
        flex: 1 1 auto;
    }

    .nhai-message {
        width: 100%;
        min-width: 0;
        gap: 10px;
    }

    .nhai-message--assistant .nhai-bubble {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 42px);
    }

    .nhai-message--user .nhai-bubble {
        max-width: 88%;
    }

    .nhai-suggestions {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        overflow: visible;
    }

    .nhai-suggestion {
        max-width: 100%;
    }

    .nhai-form {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) 48px;
    }
}

@media (max-width: 480px) {
    .nhai-shell {
        min-height: 560px;
        border-radius: 12px;
    }

    .nhai-main {
        min-height: 560px;
    }

    .nhai-header {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
    }

    .nhai-status-dot {
        flex: 0 0 11px;
        width: 11px;
        height: 11px;
    }

    .nhai-chat {
        padding: 14px 10px;
    }

    .nhai-message {
        gap: 8px;
    }

    .nhai-avatar {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
    }

    .nhai-message--assistant .nhai-bubble {
        max-width: calc(100% - 38px);
        padding: 12px 13px;
    }

    .nhai-message--user .nhai-bubble {
        max-width: 92%;
        padding: 12px 13px;
    }

    .nhai-bottom {
        padding: 10px;
    }

    .nhai-suggestions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        margin-bottom: 10px;
        padding-bottom: 0;
    }

    .nhai-suggestion {
        width: 100%;
        min-height: 34px;
        padding: 7px 10px;
        text-align: left;
        white-space: normal !important;
    }

    .nhai-form {
        gap: 7px;
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .nhai-input {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 13px !important;
    }

    .nhai-send {
        width: 46px;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}

@media (max-width: 360px) {
    .nhai-header {
        font-size: 11.5px;
    }

    .nhai-chat {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nhai-bottom {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nhai-bubble {
        font-size: 12.5px;
    }
}