/**
 * CSS cho giao diện Chatbox của Trợ lý Từ Bi
 * @version 1.3.1 - Final Resizing Fix
 */

/* -------------------------------------------------------------------------- */
/* # Biến màu và các giá trị chung                                             */
/* -------------------------------------------------------------------------- */
.tu-bi-chat-container{--tu-bi-bg-color:#fff;--tu-bi-history-bg:#f7f7f7;--tu-bi-border-color:#e5e5e5;--tu-bi-text-color:#333;--tu-bi-ai-message-bg:#e9e9eb;--tu-bi-user-message-bg:#007aff;--tu-bi-user-message-text:#fff;--tu-bi-button-bg:#007aff;--tu-bi-button-icon-color:#fff;--tu-bi-input-border-focus:#007aff;--tu-bi-border-radius:18px;--tu-bi-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* -------------------------------------------------------------------------- */
/* # Cấu trúc chung                                                           */
/* -------------------------------------------------------------------------- */
.tu-bi-chat-container *{box-sizing:border-box}

.tu-bi-chatbox{
    font-family:var(--tu-bi-font-family);
    background-color:var(--tu-bi-bg-color);
    border:1px solid var(--tu-bi-border-color);
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    display:flex;
    flex-direction:column;
    width:100%;
    overflow:hidden;
    color:var(--tu-bi-text-color);
    position:relative;
    max-height: 200px; /* Chiều cao ban đầu */
    transition: max-height 0.4s ease-in-out;
}

/* Trạng thái khi đã kích hoạt (sau khi gửi tin nhắn đầu tiên) */
.tu-bi-chatbox.is-active {
    max-height: 500px;
}

/* -------------------------------------------------------------------------- */
/* # Khu vực lịch sử chat                                                     */
/* -------------------------------------------------------------------------- */
.tu-bi-chatbox__history{
    flex-grow:1;
    overflow-y:auto;
    padding:20px;
    background-color:var(--tu-bi-history-bg);
    display:flex;
    flex-direction:column;
    gap:15px;
}

.tu-bi-chatbox__history::-webkit-scrollbar{width:6px}
.tu-bi-chatbox__history::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}
.tu-bi-chatbox__history::-webkit-scrollbar-track{background:0 0}

/* -------------------------------------------------------------------------- */
/* # Định dạng tin nhắn                                                       */
/* -------------------------------------------------------------------------- */
.tu-bi-message{display:flex;max-width:85%;opacity:0;transform:translateY(10px);transition:opacity .3s ease-out,transform .3s ease-out}.tu-bi-message.is-visible{opacity:1;transform:translateY(0)}.tu-bi-message__content{padding:10px 15px;border-radius:var(--tu-bi-border-radius);line-height:1.5;font-size:14px}.tu-bi-message__content p{margin:0}.tu-bi-message__content ul{margin:10px 0 0;padding-left:20px}.tu-bi-menu-items li{font-size:14px}.tu-bi-message--ai{align-self:flex-start}.tu-bi-message--ai .tu-bi-message__content{background-color:var(--tu-bi-ai-message-bg);border-bottom-left-radius:4px}.tu-bi-message--user{align-self:flex-end}.tu-bi-message--user .tu-bi-message__content{background-color:var(--tu-bi-user-message-bg);color:var(--tu-bi-user-message-text);border-bottom-right-radius:4px}

/* -------------------------------------------------------------------------- */
/* # Form nhập liệu                                                           */
/* -------------------------------------------------------------------------- */
.tu-bi-chatbox__form-container{padding:15px 20px;border-top:1px solid var(--tu-bi-border-color);background-color:var(--tu-bi-bg-color)}.tu-bi-input-form{position:relative;display:flex;align-items:center}.tu-bi-input-form__input{width:100%;height:44px;border:1px solid #ccc;border-radius:22px;padding:0 50px 0 20px;font-size:15px;transition:border-color .2s ease-in-out}.tu-bi-input-form__input:focus,.tu-bi-input-form__input:focus-visible{outline:0;border-color:var(--tu-bi-input-border-focus);box-shadow:0 0 0 2px rgba(0,122,255,.2)}.tu-bi-input-form__submit{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;background-color:var(--tu-bi-button-bg);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease-in-out;padding:0}.tu-bi-input-form__submit svg{fill:var(--tu-bi-button-icon-color);width:20px;height:20px;display:block}.tu-bi-input-form__submit:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,122,255,.5)}.tu-bi-input-form__submit:hover{background-color:#0056b3}.tu-bi-input-form__submit:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7}@keyframes tu-bi-spinner-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.tu-bi-input-form__submit.is-loading .tu-bi-submit-icon{display:none}.tu-bi-input-form__submit.is-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:tu-bi-spinner-spin .8s linear infinite}

/* -------------------------------------------------------------------------- */
/* # Dãy nút chức năng                                                        */
/* -------------------------------------------------------------------------- */
.tu-bi-action-buttons{margin-top:15px;padding-top:10px;border-top:1px dashed #ddd;text-align:right;font-size:13px}.tu-bi-action-btn{background:transparent!important;border:none!important;box-shadow:none!important;color:#555;cursor:pointer;padding:2px 8px;margin-left:5px;font-family:var(--tu-bi-font-family);font-size:13px;transition:color .2s;line-height:1}.tu-bi-action-btn:hover{color:var(--tu-bi-user-message-bg);background:transparent!important}

/* -------------------------------------------------------------------------- */
/* # Lớp tiện ích và In ấn                                                    */
/* -------------------------------------------------------------------------- */
.tu-bi-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@media print{body.tu-bi-printing-mode > *:not(.tu-bi-printable-area){display:none!important;visibility:hidden!important}.tu-bi-printable-area{position:absolute!important;left:0!important;top:0!important;width:100%!important;border:none!important;box-shadow:none!important;margin:0!important;padding:0!important}.tu-bi-printable-area .tu-bi-action-buttons{display:none!important}}

/* -------------------------------------------------------------------------- */
/* # Tối ưu cho Di động (Mobile Optimization)                                */
/* -------------------------------------------------------------------------- */
@media (max-width:767px){.tu-bi-message__content{font-size:16px}.tu-bi-input-form__input{font-size:16px}.tu-bi-menu-items li{font-size:15px}.tu-bi-action-btn{font-size:14px}}