#chat_widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    font-family: inherit;
}

#btn_chat_widget_toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #dba514;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    position: relative;
}

.chat-widget-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    padding: 0 4px;
}

#panel_chat_widget {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 340px;
    max-width: calc(100vw - 40px);
    height: 460px;
    max-height: calc(100vh - 120px);
    background: #fff;
    /* Portal dùng theme tối (body { color: var(--text) } gần trắng, xem wwwroot/css/portal/site.css) — panel này
       nền trắng nên PHẢI tự đặt màu chữ mặc định, nếu không mọi text con không tự set color riêng (lời chào, label,
       input gõ tin nhắn...) sẽ kế thừa màu gần trắng của body và gần như vô hình trên nền trắng. */
    color: #1a1a2e;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-widget-header {
    background: #1a1a2e;
    color: #fff;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.chat-widget-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-widget-header button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* min-height:0 bắt buộc — đây là flex-item (flex:1 1 auto) trong #panel_chat_widget (flex-direction:column, chiều
   cao cố định 460px + overflow:hidden), nếu không có dòng này trình duyệt không cho nó co lại nên overflow-y:auto
   không bao giờ kích hoạt được, khung chat không scroll được. */
.chat-widget-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.chat-widget-greeting {
    background: #f5f5f7;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

.chat-widget-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.chat-widget-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #1a1a2e;
    background: #fff;
}

.chat-widget-question-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.chat-widget-question-item {
    text-align: left;
    background: #fff;
    border: 1px solid #dba514;
    color: #1a1a2e;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
}

.chat-widget-question-item:hover {
    background: #dba514;
    color: #fff;
}

.chat-widget-btn-start {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #dba514;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.chat-widget-btn-secondary {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.chat-widget-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-widget-message {
    max-width: 80%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-widget-message-visitor {
    align-self: flex-end;
    background: #dba514;
    color: #fff;
}

.chat-widget-message-admin {
    align-self: flex-start;
    background: #f0f0f2;
    color: #1a1a2e;
}

.chat-widget-message-system {
    align-self: center;
    background: transparent;
    color: #888;
    font-style: italic;
}

.chat-widget-footer {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #eee;
}

.chat-widget-footer input {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #1a1a2e;
    background: #fff;
}

.chat-widget-footer button {
    border: none;
    background: #dba514;
    color: #fff;
    border-radius: 8px;
    width: 40px;
    cursor: pointer;
}

@media (max-width: 420px) {
    #panel_chat_widget {
        right: -10px;
        width: calc(100vw - 20px);
    }
}