/* =========================================================
   AI Support
   ========================================================= */

.ai-support-chat{
    width:100%;
    max-width:760px;
    margin:0 auto 40px;
    overflow:hidden;
    border:1px solid #333;
    border-radius:16px;
    background:#151515;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
}


/* =========================================================
   Header
   ========================================================= */

.ai-support-chat-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-bottom:1px solid #333;
    background:#0d0d0d;
}

.ai-support-chat-avatar,
.ai-support-message-avatar{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#d6a84f;
    color:#111;
    font-size:18px;
    font-weight:700;
}

.ai-support-chat-header-text{
    min-width:0;
}

.ai-support-chat-title{
    color:#f2f2f2;
    font-size:18px;
    font-weight:700;
    line-height:1.35;
}

.ai-support-chat-status{
    margin-top:2px;
    color:#999;
    font-size:13px;
}


/* =========================================================
   Chat Body
   ========================================================= */

.ai-support-chat-body{
    min-height:430px;
    padding:24px 20px 30px;
    background:#1b1b1b;
}

.ai-support-message{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.ai-support-message-content{
    width:100%;
    min-width:0;
    max-width:620px;
}

.ai-support-service-bubble{
    display:inline-block;
    max-width:85%;
    padding:12px 15px;
    border-radius:4px 16px 16px 16px;
    background:#2a2a2a;
    color:#eee;
    font-size:15px;
    line-height:1.7;
    word-break:break-word;
}


/* =========================================================
   User Choice
   ========================================================= */

.ai-support-user-choice{
    width:fit-content;
    max-width:85%;
    margin:0 0 18px auto;
    padding:12px 15px;
    border-radius:16px 4px 16px 16px;
    background:#d6a84f;
    color:#111;
    font-size:15px;
    font-weight:600;
    line-height:1.6;
    word-break:break-word;
}
/* =========================================================
   Guide
   ========================================================= */

.ai-support-guide{
    margin-top:12px;
}

.ai-support-guide-link{
    display:inline-block;
    padding:9px 14px;
    border:1px solid #d6a84f;
    border-radius:16px;
    background:#29251d;
    color:#e4bd70;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.ai-support-guide-link::before{
    content:"📖 查看";
    margin-right:5px;
}

.ai-support-guide-link::after{
    content:" ›";
    margin-left:2px;
}

.ai-support-guide-link:hover,
.ai-support-guide-link:focus{
    border-color:#e4bd70;
    background:#332c20;
    color:#f0ca7e;
    outline:none;
}
/* =========================================================
   Feedback
   ========================================================= */

.ai-support-feedback{
    margin-top:14px;
}

.ai-support-feedback-question{
    margin-bottom:9px;
    color:#aaa;
    font-size:13px;
    line-height:1.5;
}

.ai-support-feedback-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ai-support-feedback-button{
    padding:8px 13px;
    border:1px solid #555;
    border-radius:16px;
    background:#202020;
    color:#ddd;
    font-family:inherit;
    font-size:13px;
    line-height:1.4;
    cursor:pointer;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.ai-support-feedback-button:hover,
.ai-support-feedback-button:focus{
    border-color:#d6a84f;
    background:#29251d;
    color:#e4bd70;
    outline:none;
}

.ai-support-feedback-button:disabled{
    cursor:default;
    opacity:.55;
}

.ai-support-feedback-message{
    min-height:20px;
    margin-top:8px;
    color:#d6a84f;
    font-size:13px;
    line-height:1.5;
}
/* =========================================================
   Choices
   ========================================================= */

.ai-support-choice-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.ai-support-choice{
    display:block;
    padding:10px 15px;
    border:1px solid #555;
    border-radius:18px;
    background:#202020;
    color:#ddd;
    font-size:14px;
    line-height:1.45;
    text-decoration:none;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.ai-support-choice:hover,
.ai-support-choice:focus{
    border-color:#d6a84f;
    background:#29251d;
    color:#e4bd70;
    text-decoration:none;
}

.ai-support-choice-contact{
    width:100%;
    margin-top:4px;
    border-color:#6b5833;
    color:#d6a84f;
    text-align:center;
}


/* =========================================================
   Back
   ========================================================= */

.ai-support-back{
    margin-top:20px;
}

.ai-support-back a{
    color:#999;
    font-size:14px;
    text-decoration:none;
}

.ai-support-back a:hover,
.ai-support-back a:focus{
    color:#d6a84f;
    text-decoration:none;
}


/* =========================================================
   Footer
   ========================================================= */

.ai-support-chat-footer{
    padding:13px 20px;
    border-top:1px solid #333;
    background:#101010;
    color:#888;
    font-size:13px;
    text-align:center;
}

.ai-support-chat-footer a{
    margin-left:5px;
    color:#d6a84f;
    text-decoration:none;
}

.ai-support-chat-footer a:hover,
.ai-support-chat-footer a:focus{
    text-decoration:underline;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:767px){

    .ai-support-chat{
        margin-bottom:24px;
        border-radius:12px;
    }

    .ai-support-chat-header{
        padding:14px 15px;
    }

    .ai-support-chat-avatar,
    .ai-support-message-avatar{
        width:38px;
        height:38px;
        font-size:16px;
    }

    .ai-support-chat-body{
        min-height:420px;
        padding:18px 14px 24px;
    }

    .ai-support-message{
        gap:8px;
    }

    .ai-support-service-bubble,
    .ai-support-user-choice{
        max-width:92%;
        font-size:14px;
    }

    .ai-support-choice-list{
        display:block;
    }

    .ai-support-choice{
        margin-bottom:9px;
        padding:11px 14px;
        border-radius:16px;
    }

    .ai-support-choice-contact{
        margin-top:14px;
    }

    .ai-support-chat-footer{
        padding:12px 14px;
    }

}