*{
    box-sizing:border-box;
}


body{

    margin:0;

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;

    background:#f5f8ff;

}


/* 主布局 */

.container{

    display:flex;

    height:100vh;

}



/* 左侧 */

.sidebar{

    width:260px;

    background:#ffffff;

    color:#333;

    padding:20px;

    border-right:1px solid #e5e7eb;

    overflow-y:auto;

}



.sidebar h2{

    font-size:18px;

    color:#1e3a8a;

}



/* 按钮 */

.sidebar button{

    width:100%;

    padding:12px;

    margin:8px 0;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    cursor:pointer;

}


.sidebar button:hover{

    background:#1d4ed8;

}



/* 聊天区域 */

.chatbox{

    flex:1;

    display:flex;

    flex-direction:column;

    background:white;

}



.chatbox h1{

    text-align:center;

    padding:18px;

    margin:0;

    border-bottom:1px solid #e5e7eb;

    color:#1e3a8a;

}



/* 消息区域 */

#chat{

    flex:1;

    overflow-y:auto;

    padding:30px;

}



/* 气泡 */

.user,
.ai{

    max-width:75%;

    padding:14px 18px;

    margin:15px 0;

    border-radius:16px;

    line-height:1.7;

    font-size:15px;

}



/* 用户 */

.user{

    margin-left:auto;

    background:#dbeafe;

    color:#1e40af;

    border-bottom-right-radius:5px;

}



/* AI */

.ai{

    margin-right:auto;

    background:white;

    border:1px solid #dbeafe;

    color:#333;

    border-bottom-left-radius:5px;

}



/* 输入框 */

#input{

    margin:15px 20px;

    padding:15px;

    border-radius:15px;

    border:1px solid #cbd5e1;

    font-size:16px;

}



#input:focus{

    outline:none;

    border-color:#2563eb;

}



/* 发送按钮 */

.chatbox > button{

    margin:0 20px 20px;

    padding:12px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-size:16px;

    cursor:pointer;

}


.chatbox > button:hover{

    background:#1d4ed8;

}



/* Markdown代码 */

.ai pre{

    background:#0f172a;

    color:white;

    padding:15px;

    border-radius:10px;

    overflow-x:auto;

}



/* 思考动画 */

.thinking{

    display:flex;

    gap:6px;

    width:70px;

}



.thinking span{

    width:8px;

    height:8px;

    background:#2563eb;

    border-radius:50%;

    animation:thinking 1.4s infinite;

}



.thinking span:nth-child(2){

    animation-delay:.2s;

}


.thinking span:nth-child(3){

    animation-delay:.4s;

}



@keyframes thinking{

    0%,80%,100%{

        opacity:.3;

        transform:translateY(0);

    }


    40%{

        opacity:1;

        transform:translateY(-6px);

    }

}



/* 滚动条 */

::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-thumb{

    background:#93c5fd;

    border-radius:10px;

}



/* =========================
   手机端适配
========================= */


@media(max-width:768px){


    body{

        overflow:hidden;

    }



    .container{

        flex-direction:column;

        height:100vh;

    }





/* 手机端侧边栏 */

.sidebar{

    width:100%;

    height:260px;

    padding:12px;

    background:white;

    color:#333;

    border-bottom:1px solid #e5e7eb;

    overflow-y:auto;

}




    .sidebar h2{

        display:none;

    }




    .sidebar button{


        width:auto;

        margin:0;

        padding:8px 15px;

        font-size:14px;


    }





    #chatList{


        display:block;


    }
    .chat-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f1f5f9;

    padding:8px 10px;

    margin:5px 0;

    border-radius:10px;

    font-size:14px;

}





    /* 聊天区域 */


    .chatbox{


        flex:1;

        height:calc(100vh - 260px);


    }





    .chatbox h1{


        font-size:18px;

        padding:12px;


    }





    /* 消息区域 */


    #chat{


        padding:15px;

        overflow-y:auto;


    }





    .user,
    .ai{


        max-width:90%;


        font-size:14px;


        padding:10px 14px;


        border-radius:14px;


    }





    /* 输入区域 */


    #input{


        margin:10px;


        height:45px;


        font-size:15px;


    }





    .chatbox > button{


        margin:0 10px 10px;


        height:42px;


    }





    /* AI头像 */


    .avatar{


        width:32px;

        height:32px;

        font-size:16px;


    }



}
/* =====================
音乐卡片
===================== */


.music-card{


    background:#ffffff;


    border:1px solid #dbeafe;


    border-radius:15px;


    padding:18px;


    margin:10px 0;


    max-width:400px;


    box-shadow:0 4px 12px rgba(0,0,0,.08);


}



.music-title{


    font-size:18px;


    font-weight:bold;


    color:#1d4ed8;


}



.music-singer{


    margin-top:8px;


    color:#64748b;


}



.music-reason{


    margin-top:15px;


    line-height:1.6;


}



.play-btn{


    margin-top:15px;


    background:#2563eb;


    color:white;


    border:none;


    padding:8px 20px;


    border-radius:20px;


    cursor:pointer;


}


.play-btn:hover{


    background:#1d4ed8;


}
.music-card{

    background:white;

    border:1px solid #dbeafe;

    border-radius:15px;

    padding:20px;

    margin:15px 0;

}



.music-title{

    font-size:20px;

    font-weight:bold;

    color:#2563eb;

}



.music-singer{

    margin-top:10px;

    color:#555;

}



.music-reason{

    margin-top:15px;

    line-height:1.8;

}



.play-btn{


    display:inline-block;

    margin-top:15px;

    padding:10px 18px;

    background:#e11d48;

    color:white;

    border-radius:20px;

    text-decoration:none;

    font-size:14px;


}



.play-btn:hover{

    background:#be123c;

}