/* Giao diện cho Chatbot Thanh Nguyen Group v7.2 */
:root {
    --tn-primary-color: #00a86b;
    --tn-primary-darker: #008a58;
    --tn-user-message-bg: #007bff;
    --tn-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* --- Các phần không thay đổi (Container, Bubble, Window, Header) --- */
.tn-chat-container{position:fixed;bottom:25px;right:25px;z-index:99999 !important;}
.tn-chat-bubble{width:60px;height:60px;background:linear-gradient(135deg, var(--tn-primary-darker), var(--tn-primary-color));border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;}
.tn-chat-bubble:hover{transform:scale(1.1);box-shadow:0 10px 25px rgba(0,0,0,.25);}
.tn-chat-bubble svg{width:30px;height:30px;color:#fff;transition:transform .3s ease,opacity .3s ease;position:absolute;}
.tn-chat-bubble .icon-close{transform:scale(0) rotate(-45deg);opacity:0;}
.tn-chat-window{position:absolute;bottom:80px;right:0;width:min(90vw, 420px);height:min(75vh, 700px);background-color:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;font-family:var(--tn-font-family);transform-origin:bottom right;opacity:0;transform:scale(.9) translateY(10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.tn-chat-container.open .tn-chat-window{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.tn-chat-container.open .tn-chat-bubble .icon-message{transform:scale(0) rotate(45deg);opacity:0;}
.tn-chat-container.open .tn-chat-bubble .icon-close{transform:scale(1) rotate(0);opacity:1;}
.tn-chat-header{background:linear-gradient(135deg, var(--tn-primary-darker), var(--tn-primary-color));color:#fff;padding:16px 20px;display:flex;align-items:center;flex-shrink:0;position:relative;}
.tn-chat-header .avatar{width:45px;height:45px;border-radius:50%;background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-right:15px;border:2px solid rgba(255,255,255,.5);}
.tn-chat-header .avatar svg{width:26px;height:26px;color:#fff;}
.tn-chat-header .agent-info h4{font-size:1.1rem;font-weight:600;margin:0;line-height:1.2;}
.tn-chat-header .agent-info p{font-size:.85rem;opacity:.9;margin:0;}

/* --- Khung tin nhắn và định dạng tin nhắn --- */
.tn-chat-messages{flex-grow:1;padding:10px 20px;overflow-y:auto;background-color:#f5f5f7;display:flex;flex-direction:column;}
.tn-message{display:flex;margin-bottom:18px;max-width:90%;opacity:0;transform:translateY(15px);animation:message-fade-in .4s ease forwards;}
@keyframes message-fade-in{to{opacity:1;transform:translateY(0)}}
.tn-message-content{padding:12px 18px;border-radius:20px;font-size:15px;line-height:1.55;word-wrap:break-word;}
.tn-message.user{align-self:flex-end;}
.tn-message.bot{align-self:flex-start;}
.tn-message.user .tn-message-content{background:linear-gradient(135deg, #007bff, #0056b3);color:#fff;border-bottom-right-radius:5px;}
.tn-message.bot .tn-message-content{background-color:#e9e9eb;color:#2c2c2e;border-bottom-left-radius:5px;display:flex;flex-direction:column;}
.tn-message-text{white-space:pre-wrap;}
.tn-message-text strong{font-weight:600;color:var(--tn-primary-darker);}

/* UPGRADE: Thêm style cho list trong câu trả lời của AI */
.tn-message-text ul, .tn-message-text ol {
    padding-left: 22px; /* Căn lề cho đẹp */
    margin: 8px 0;
    white-space: normal; /* Cho phép list xuống dòng */
}
.tn-message-text li {
    margin-bottom: 5px;
    line-height: 1.6;
}

/* --- Nút audio trong tin nhắn --- */
.tn-audio-button{background-color:transparent;border:1px solid rgba(0,0,0,0.15);border-radius:50%;width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease;margin-top:12px;align-self:flex-end;}
.tn-audio-button:hover{background-color:rgba(0,0,0,0.08);}
.tn-audio-button svg{width:14px;height:14px;color:#555;position:absolute;transition:transform .2s ease,opacity .2s ease;}
.tn-audio-button .icon-stop{opacity:0;transform:scale(0);}
.tn-audio-button.speaking .icon-speak{opacity:0;transform:scale(0);}
.tn-audio-button.speaking .icon-stop{opacity:1;transform:scale(1);}

/* --- Hiệu ứng đang gõ chữ --- */
.tn-message.typing-indicator{align-self:flex-start;}
.tn-message.typing-indicator .tn-message-content{padding:15px 18px;background-color:#e9e9eb;border-bottom-left-radius:5px;}
.typing-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#b0b0b5;margin:0 2px;animation:typing-animation 1.4s infinite ease-in-out both;}
.typing-dot:nth-child(2){animation-delay:.2s;}
.typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes typing-animation{0%,80%,100%{transform:scale(0)}40%{transform:scale(1.0)}}

/* ======================================================== */
/* --- KHUNG NHẬP LIỆU ĐƯỢC TỐI ƯU HÓA (MỚI) --- */
/* ======================================================== */

.tn-chat-input-area{border-top:1px solid #e8e8e8;padding:12px 16px;background-color:#fff;flex-shrink:0;}
.tn-chat-input-area form{display:flex;align-items:center;gap:8px;} /* Giảm khoảng cách */

/* UPGRADE: Thu nhỏ nút Micro */
#tn-mic-button{background:transparent;border:none;padding:0;margin:0;cursor:pointer;flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#5f6368;border-radius:50%;transition:background-color .2s,color .2s;}
#tn-mic-button:hover{background-color:#f1f3f4;}
#tn-mic-button.listening{color:var(--tn-primary-color);background-color:#e6f7f2;animation:mic-pulse 1.5s infinite ease-in-out;}
@keyframes mic-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* --- Wrapper và ô nhập liệu --- */
.tn-input-wrapper{flex-grow:1;display:flex;align-items:center;border:1px solid #dfe1e5;border-radius:24px;transition:border-color .2s,box-shadow .2s;}
.tn-input-wrapper:focus-within{border-color:var(--tn-primary-color);box-shadow:0 0 0 3px rgba(0,168,107,.15);}
#tn-chat-input{flex-grow:1;border:none;outline:none;background:transparent;padding:10px 18px;font-size:15px;font-family:var(--tn-font-family);color:#202124;width:100%;}

/* --- Nút gửi --- */
.tn-chat-input-area button[type="submit"]{border:none;background-color:var(--tn-primary-color);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .2s;flex-shrink:0;padding:0;}
.tn-chat-input-area button[type="submit"]:hover{background-color:var(--tn-primary-darker);transform:scale(1.05);}