.my-ai-chat-wrap{
    max-width:460px;
    margin:40px auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:26px;
    box-shadow:0 14px 35px rgba(15,23,42,.08);
    overflow:hidden;
    font-family:Arial,sans-serif;
}
.my-ai-chat-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:22px 22px 16px;
    border-bottom:1px solid #edf2f7;
}
.my-ai-chat-header h3{
    margin:0;
    font-size:20px;
    color:#111827;
}
.my-ai-chat-header p{
    margin:7px 0 0;
    font-size:14px;
    color:#64748b;
}
.chat-reset{
    border:0;
    background:#f3f4f6;
    color:#111827;
    border-radius:12px;
    padding:10px 12px;
    font-weight:700;
    cursor:pointer;
}
.chat-box{
    height:470px;
    overflow-y:auto;
    background:#f8fafc;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.chat-message{
    max-width:84%;
    padding:14px 16px;
    border-radius:18px;
    line-height:1.5;
    font-size:15px;
    word-break:break-word;
}
.chat-message.assistant{
    align-self:flex-start;
    background:#fff;
    color:#111827;
    border:1px solid #e5e7eb;
    border-bottom-left-radius:7px;
}
.chat-message.user{
    align-self:flex-end;
    background:#0f172a;
    color:#fff;
    border-bottom-right-radius:7px;
}
.chat-typing{
    display:flex;
    align-items:center;
    gap:5px;
    padding:12px 18px;
    border-top:1px solid #edf2f7;
    color:#64748b;
    background:#fff;
    font-size:14px;
}
.chat-typing span{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#cbd5e1;
    animation:bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes bounce{
    0%,80%,100%{transform:scale(.7);opacity:.5;}
    40%{transform:scale(1);opacity:1;}
}
.chat-preview-list{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:0 16px 12px;
    background:#fff;
}
.chat-preview-item{
    position:relative;
    min-width:86px;
    width:86px;
}
.chat-preview-item img{
    width:86px;
    height:86px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid #e5e7eb;
}
.chat-preview-item button{
    position:absolute;
    top:4px;
    right:4px;
    width:24px;
    height:24px;
    border:0;
    border-radius:999px;
    background:rgba(15,23,42,.85);
    color:#fff;
    cursor:pointer;
}
.chat-preview-item span{
    display:block;
    margin-top:6px;
    font-size:11px;
    color:#475569;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.chat-upload-note{
    align-self:flex-end;
    font-size:12px;
    color:#475569;
    margin-top:-4px;
}
.my-ai-chat-footer{
    padding:16px;
    border-top:1px solid #edf2f7;
    background:#fff;
}
.chat-input{
    width:100%;
    min-height:56px;
    max-height:140px;
    resize:none;
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:14px 16px;
    font-size:15px;
    line-height:1.45;
    box-sizing:border-box;
    outline:none;
}
.chat-input:focus{
    border-color:#0f172a;
    box-shadow:0 0 0 3px rgba(15,23,42,.08);
}
.my-ai-chat-actions{
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}
.chat-image-input{
    display:none;
}
.chat-upload,.chat-send{
    border:0;
    border-radius:14px;
    height:46px;
    font-weight:700;
    padding:0 18px;
    cursor:pointer;
    font-size:15px;
}
.chat-upload{
    background:#f1f5f9;
    color:#0f172a;
    display:inline-flex;
    align-items:center;
}
.chat-send{
    background:#0f172a;
    color:#fff;
    min-width:118px;
    justify-content:center;
}
.chat-send:disabled{
    opacity:.6;
    cursor:not-allowed;
}
@media (max-width:480px){
    .my-ai-chat-wrap{margin:18px 10px;border-radius:20px;}
    .chat-box{height:420px;}
}