@charset "UTF-8";
html {
    font-size: 62.5%;
    height: 100%;
    overflow: hidden;
}
body{
    font-size: 1.4rem;
    list-style:none;
    font-family:"Microsoft YaHei";
    height:100%;
    margin:0;
    padding:8px;
    box-sizing:border-box;
    overflow:hidden;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,dt+dd{
    margin:0;
    padding:0;
    list-style:none;
    font-weight:400;
    color:#3a3a3a
}
img{
    vertical-align:middle;
    border:none;
}
.left{float:left;}
.right{float:right;}
.clear:after{
    content:'';
    clear:both;
    display:block;
}
.clear{clear:both;}
.clearfloat:after{
    display:block;
    content:'';
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfloat{zoom:1;}
a{
    color:#333;
    text-decoration:none;
}
i,em{
    font-style:normal;
}
input,button{
    border:0;
    outline:none;
    margin:0;
    padding:0;
}
* { box-sizing: border-box; }
/*****AI考点精讲 start*****/
body { background:#f3f5f8; }
button, textarea { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid rgba(255, 180, 91, .72); outline-offset:2px; }

.chat-page {
    display:flex;
    flex-direction:column;
    width:min(100%, 760px);
    height:100%;
    margin:0 auto;
    overflow:hidden;
    background:#f3f5f8;
}
.app-bar {
    position:relative;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:48px;
    background:#336af4;
    color:#fff;
}
.app-bar-title { color:#fff; font-size:15px; font-weight:500; }
.back-btn {
    position:absolute;
    inset:0 auto 0 0;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
}
.back-icon {
    width:24px;
    height:24px;
    background:url(../images/icon_return.png) no-repeat center / contain;
}

main { flex:1 1 auto; min-height:0; }
.page-content { display:flex; flex-direction:column; height:100%; min-height:0; }
.chat-container {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:14px 12px 18px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.chat-message {
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    margin-bottom:14px;
}
.chat-message.user { flex-direction:row-reverse; }
.ai-touxiang,
.user-touxiang {
    flex:0 0 40px;
    width:40px;
    height:40px;
    border:1px solid #fff;
    border-radius:50%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
.ai-touxiang { background-color:#dbe5ff; background-image:url(../images/ai_touxiang.png); }
.user-touxiang { background-color:#336af4; background-image:url(../images/user_touxiang.png); }
.chat-message .message-content {
    position:relative;
    max-width:calc(100% - 100px);
    padding:7px 11px;
    border-radius:8px;
    font-size:14px;
    line-height:1.5;
    text-align:left;
}
.chat-message.ai .message-content { border:1px solid #ddd; background:#fff; }
.chat-message.user .message-content { min-width:30px; padding:8px; border:1px solid #fff; background:#336af4; text-align:center; }
.chat-message.ai .message-content::before,
.chat-message.user .message-content::before {
    content:"";
    position:absolute;
    top:11px;
    width:8px;
    height:8px;
    transform:rotate(45deg);
}
.chat-message.ai .message-content::before { left:-5px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; background:#fff; }
.chat-message.user .message-content::before { right:-5px; border-top:1px solid #336af4; border-right:1px solid #336af4; background:#336af4; }
.message-content p { margin:0; color:#111; line-height:1.5; overflow-wrap:anywhere; }
.chat-message.user p { color:#fff; }

.question-input {
    flex:0 0 auto;
    width:calc(100% - 28px);
    margin:0 auto max(14px, env(safe-area-inset-bottom));
}
.ai-seek {
    display:flex;
    flex-direction:column;
    height:136px;
    overflow:hidden;
    border:1px solid #336af4;
    border-radius:11px;
    background:#fff;
}
.ai-textarea {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:11px 10px 4px;
    border:0;
    outline:0;
    resize:none;
    background:transparent;
    color:#333;
    font-size:13px;
    line-height:1.5;
}
.ai-textarea::placeholder { color:#9ca3af; opacity:1; }
.ai-footer {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 10px 10px;
}
.ai-label {
    height:35px;
    padding:0 14px;
    border:1px solid #d2d2d2;
    border-radius:18px;
    background:#fff;
    color:#111;
    font-size:13px;
}
.ai-label.sel { border-color:#336af4; background:#f2f6ff; color:#336af4; }
.send-btn {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:5px;
    background:#336af4;
    color:#fff;
}
.send-btn:hover { background:#234bb1; }
.send-btn:disabled { background:#d3dfff; cursor:not-allowed; }
.send-icon {
    width:0;
    height:0;
    border-right:6px solid transparent;
    border-bottom:8px solid currentColor;
    border-left:6px solid transparent;
    transform:translateY(-1px);
}
.send-btn.is-running .send-icon { width:12px; height:12px; border:2px solid currentColor; border-radius:2px; transform:none; }
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
/*****AI考点精讲 end*****/