@charset "UTF-8";
@font-face {
  font-family: "king";
  src: url(../font/king.ttf);
}
/*声明 WebFont*/
body {
  padding: 0;
  margin: 0;
  font: normal 12px/180% "微软雅黑";
  color: #333;
  background: #fff;
  font-family: "微软雅黑";
}

h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td {
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  text-align: left;
  font: normal 12px/180% "微软雅黑";
  font-family: "微软雅黑";
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #3b84cc;
  text-decoration: none;
}

img {
  border: none;
}

ol, ul, li {
  list-style: none;
}

i {
  font-style: normal;
}

input, img {
  vertical-align: middle;
}

input[type=button], input[type=submit] {
  vertical-align: middle;
  cursor: pointer;
}

/*html5*/
article, aside, dialog, footer, header, section, footer, nav, figure, menu {
  display: block;
  margin: 0 auto;
}

/*clear*/
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
  overflow: hidden;
}

.clearfix {
  zoom: 1;
}

.clear {
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.w1200 {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

body {
  background: #135bf4;
  overflow: hidden;
  height: 100vh;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.left {
  position: absolute;
  left: 0px;
  width: 400px;
  padding: 0 20px;
  height: 100vh;
}
.left .face {
  border-radius: 50%;
  overflow: hidden;
  height: 250px;
  width: 250px;
  margin: 110px auto 50px auto;
}
.left .talkList ul li {
  font-size: 18px;
  color: #fff;
  padding: 20px 20px 20px 35px;
  cursor: pointer;
  background: #418bfb;
  margin-bottom: 8px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  line-height: 130%;
}
.left .talkList ul li::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 100%;
  background: #ffb81e;
  border-radius: 0;
}
.left .hotTitle {
  font-size: 18px;
  padding: 20px 0;
  color: #fff;
  font-weight: bold;
}
.left .hotTitle span {
  background: url(../images/icon.png) no-repeat left center;
  background-size: contain;
  padding-left: 40px;
}

.right {
  position: absolute;
  left: 440px;
  width: calc(100% - 440px);
  height: 100vh;
}
.right .content {
  background: url(../images/c_bg.png);
  background-size: cover;
  height: 95vh;
  width: 98%;
  margin: 2.5vh 0;
  border-radius: 1vw;
  position: relative;
  /* 自定义滚动条轨道 */
  /* 滚动条轨道背景 */
  /* 滚动条滑块 */
  /* 滚动条滑块悬停效果 */
}
.right .content #talkContainer {
  width: 90%;
  margin: 0 auto;
  overflow: auto;
  height: 65vh;
}
.right .content #talkContainer .userOutput {
  max-width: 80%;
  background: #408bfb;
  color: #fff;
  height: auto;
  border-radius: 10px;
  padding: 20px 25px;
  position: relative;
}
.right .content #talkContainer .userOutput p {
  font-size: 24px;
  text-align: justify;
  line-height: 180%;
}
.right .content #talkContainer .userOutput::after {
  content: "";
  position: absolute;
  top: 33px;
  right: -10px;
  border-width: 7px 0 7px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #408bfb;
}
.right .content #talkContainer .aiOutput {
  max-width: 80%;
  background: #fff;
  color: #333;
  height: auto;
  border-radius: 10px;
  padding: 20px 25px;
  border: 1px solid #87b7ff;
  position: relative;
}
.right .content #talkContainer .aiOutput p {
  font-size: 24px;
  text-align: justify;
  line-height: 180%;
}
.right .content #talkContainer .aiOutput::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-style: solid;
  border-color: transparent #87b7ff transparent transparent;
}
.right .content #talkContainer .aiOutput::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -14px;
  border-width: 10px 15px 10px 0;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
}
.right .content #talkContainer .fa-user {
  display: inline-block;
  width: 85px;
  height: 85px;
  margin-left: 10px;
  background: url(../images/userface.png) no-repeat;
  background-size: contain;
}
.right .content #talkContainer .fa-robot {
  display: inline-block;
  width: 89px;
  height: 85px;
  margin-right: 10px;
  background: url(../images/ai.png) no-repeat;
  background-size: contain;
}
.right .content #talkContainer::-webkit-scrollbar {
  width: 15px;
}
.right .content #talkContainer::-webkit-scrollbar-track {
  background: #d2d5eb;
  border-radius: 10px;
}
.right .content #talkContainer::-webkit-scrollbar-thumb {
  background: #eef3ff;
  border-radius: 10px;
  border: 3px solid #d2d5eb;
  transition: background 0.3s;
}
.right .content #talkContainer::-webkit-scrollbar-thumb:hover {
  background: #eef3ff;
}
.right .content .talkContent {
  height: 70vh;
}
.right .content .talkInput {
  text-align: center;
  height: 80px;
  position: relative;
}
.right .content .talkInput p {
  width: 74%;
  padding: 10px 0;
  margin: 0 auto;
}
.right .content .talkInput p span {
  float: left;
  font-size: 16px;
  color: #666666;
}
.right .content .talkInput p b {
  float: right;
  font-size: 16px;
  color: #679dff;
  font-weight: normal;
}
.right .content .talkInput .fa-stop {
  display: inline-block;
  width: 84px;
  height: 82px;
  background: url(../images/mai1.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.right .content .talkInput .fa-microphone {
  display: inline-block;
  width: 84px;
  height: 82px;
  background: url(../images/mai.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.right .content .talkInput .talkInputText {
  height: 80px;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #135bf4;
  border-radius: 10px;
  margin-left: 10px;
  width: 65%;
  font-size: 18px;
  padding-left: 10px;
  outline: none;
}
.right .content .talkInput .talkMai {
  display: inline-block;
  border: none;
  width: 84px;
  height: 82px;
  vertical-align: middle;
  outline: none;
}
.right .content .talkInput .talkMai .talkMaiIcon {
  display: inline-block;
  width: 84px;
  height: 82px;
  background: url(../images/mai.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.right .content .talkInput .talkButton {
  width: 81px;
  height: 82px;
  background: url(../images/button.png) no-repeat;
  background-size: contain;
  border: none;
  outline: none;
  cursor: pointer;
  position: absolute;
  z-index: 100;
  right: 14%;
  top: 7px;
}
.right .content .maskBg {
  width: 688px;
  height: 440px;
  background: url(../images/c_bg1.png) no-repeat;
  background-size: contain;
  margin: 0 auto;
}
.right .content .talkMask {
  text-align: center;
  padding-top: 10vh;
}
.right .content .talkMask h2 {
  font-size: 34px;
  padding-bottom: 30px;
  font-weight: bold;
}
.right .content .talkMask h3 {
  font-size: 24px;
  padding-bottom: 10px;
}

.stop-audio-btn {
  margin-top: 8px;
  width: 29px;
  height: 25px;
  background: url(../images/audio_open.png) no-repeat;
  background-size: contain;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
}

.stop-audio-btn_actvie {
  margin-top: 8px;
  width: 29px;
  height: 25px;
  background: url(../images/audio_close.png) no-repeat;
  background-size: contain;
  color: white;
  border: none;
  cursor: pointer;
}

/* 热门提问列表滚动条样式 */
.talkList {
  /* 设置固定高度，超出部分可滚动 */
  max-height: 450px;
  overflow-y: auto;
  /* 添加内边距使内容与滚动条有间距 */
  padding-right: 8px;
}

/* 自定义滚动条轨道 */
.talkList::-webkit-scrollbar {
  width: 15px;
}

/* 滚动条轨道背景 */
.talkList::-webkit-scrollbar-track {
  background: #0045d9;
  border-radius: 10px;
}

/* 滚动条滑块 */
.talkList::-webkit-scrollbar-thumb {
  background: #135bf4;
  border-radius: 10px;
  border: 3px solid #0045d9;
  transition: background 0.3s;
}

/* 滚动条滑块悬停效果 */
.talkList::-webkit-scrollbar-thumb:hover {
  background: #135bf4;
}

/* 优化热门提问列表项样式 */
.talkList ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.talkList li {
  padding: 12px 15px;
  margin-bottom: 8px;
  background-color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.talkList li:hover {
  background-color: #f0f0f0;
  transform: translateX(3px);
}

@media (min-device-width: 320px) and (max-width: 689px), (max-device-width: 480px) {
  body {
    background: #135bf4;
    overflow: auto;
    height: 100vh;
    width: 100vw;
  }
  .wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-y: hidden;
  }
  /* 左侧区域改为顶部展示，占满宽度 */
  .left {
    position: relative;
    width: 100%;
    height: auto;
    padding: 15px;
    height: 20vh;
    max-height: 45vh;
    overflow-y: auto;
  }
  .left .face {
    width: 35vw;
    height: 35vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .left .hotTitle {
    font-size: 3vw;
    padding: 1vw 0;
    position: absolute;
    left: 25vw;
    top: 2vw;
    display: none;
  }
  .left .hotTitle span {
    background-size: 20px;
    padding-left: 30px;
  }
  .left .talkList {
    height: 30vw;
    max-height: 30vw;
    position: absolute;
    top: 4.2vh;
    left: 25vw;
    width: 70vw;
    display: none;
  }
  .left .talkList ul li {
    font-size: 2vw;
    padding: 1vw 15px 1vw 25px;
    margin-bottom: 6px;
  }
  /* 右侧区域调整为占满剩余空间 */
  .right {
    position: relative;
    left: 0;
    width: 100%;
    height: 80vh;
  }
  .right .content #talkContainer .fa-robot {
    width: 10vw;
    height: 10vw;
  }
  .right .content {
    width: 100%;
    margin: 0;
    height: 85vh;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .right .content .fa-user, .right .content .fa-robot {
    width: 10vw;
    height: 10vw;
  }
  #talkContainer {
    width: 95%;
    height: calc(100% - 140px);
  }
  .userOutput, .aiOutput {
    max-width: 85%;
    padding: 12px 15px;
  }
  .userOutput p, .aiOutput p {
    font-size: 16px;
    line-height: 150%;
  }
  .userOutput::after {
    top: 15px;
  }
  .aiOutput::before, .aiOutput::after {
    top: 15px;
  }
  /* 输入区域优化 */
  .talkInput {
    height: auto;
    padding: 10px 5px;
    display: flex;
    align-items: center;
  }
  .talkInputText {
    height: 50px;
    font-size: 15px;
    width: calc(100% - 140px);
    margin-left: 5px;
  }
  .talkInput p {
    width: 100%;
    padding: 5px 0;
    margin-top: 5px;
    order: 4;
    display: flex;
    justify-content: space-between;
  }
  .talkInput p span, .talkInput p b {
    font-size: 12px;
  }
  /* 欢迎界面调整 */
  .talkMask {
    padding-top: 5vh;
  }
  .right .content .talkContent {
    height: 55vh;
  }
  .right .content #talkContainer {
    height: 55vh;
  }
  .right .content #talkContainer .aiOutput {
    padding: 5px 10px;
  }
  .right .content #talkContainer .aiOutput p {
    font-size: 4vw;
  }
  .right .content #talkContainer .aiOutput::before {
    top: 15px;
  }
  .right .content #talkContainer .aiOutput::after {
    top: 15px;
  }
  .right .content #talkContainer .userOutput {
    padding: 5px 10px;
  }
  .right .content #talkContainer .userOutput p {
    font-size: 4vw;
  }
  .right .content #talkContainer .userOutput::after {
    top: 15px;
  }
  .right .content #talkContainer .fa-user {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkMask h2 {
    font-size: 5vw;
    padding-bottom: 4vw;
  }
  .right .content .talkMask h3 {
    font-size: 4vw;
  }
  .right .content .talkInput {
    height: 47vw;
    position: relative;
  }
  .right .content .talkInput p {
    width: 100%;
    clear: both;
    position: absolute;
    bottom: 0px;
    display: block;
  }
  .right .content .talkInput p span {
    float: none;
    display: block;
    width: 100%;
    font-size: 2vw;
  }
  .right .content .talkInput p b {
    float: none;
    font-size: 2vw;
  }
  .right .content .talkInput .talkMai, .right .content .talkInput .talkButton {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkInput .talkMai .talkMaiIcon, .right .content .talkInput .talkButton .talkMaiIcon {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkInput .fa-microphone, .right .content .talkInput .fa-stop {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkInput .talkButton {
    right: 10px;
    top: 19vw;
  }
  .right .content .talkInput .talkInputText {
    width: 90vw;
    height: 10vw;
  }
  .right .content .maskBg {
    width: 90%;
    height: 50vh;
  }
  /* 滚动条适配 */
  #talkContainer::-webkit-scrollbar {
    width: 8px;
  }
  .talkList::-webkit-scrollbar {
    width: 8px;
  }
  /* 音频按钮调整 */
  .stop-audio-btn, .stop-audio-btn_actvie {
    width: 24px;
    height: 20px;
    margin-top: 5px;
  }
  /* 对话消息容器调整 */
  .flex.items-start.space-x-3.animate-fade-in.p-5,
  .flex.items-start.space-x-3.animate-fade-in.p-5.justify-end {
    padding: 8px 5px;
  }
}
@media (min-device-width: 750px) and (max-width: 1080px), (max-device-width: 1080px) {
  body {
    background: #135bf4;
    overflow: auto;
    height: 100vh;
    width: 100vw;
  }
  .wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-y: hidden;
  }
  /* 左侧区域改为顶部展示，占满宽度 */
  .left {
    position: relative;
    width: 100%;
    height: auto;
    padding: 15px;
    height: 20vh;
    max-height: 45vh;
    overflow-y: auto;
  }
  .left .face {
    width: 35vw;
    height: 35vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .left .hotTitle {
    font-size: 3vw;
    padding: 1vw 0;
    position: absolute;
    left: 25vw;
    top: 2vw;
    display: none;
  }
  .left .hotTitle span {
    background-size: 20px;
    padding-left: 30px;
  }
  .left .talkList {
    height: 30vw;
    max-height: 30vw;
    position: absolute;
    top: 4.2vh;
    left: 25vw;
    width: 70vw;
    display: none;
  }
  .left .talkList ul li {
    font-size: 2vw;
    padding: 1vw 15px 1vw 25px;
    margin-bottom: 6px;
  }
  /* 右侧区域调整为占满剩余空间 */
  .right {
    position: relative;
    left: 0;
    width: 100%;
    height: 80vh;
  }
  .right .content #talkContainer .fa-robot {
    width: 10vw;
    height: 10vw;
  }
  .right .content {
    width: 100%;
    margin: 0;
    height: 85vh;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .right .content .fa-user, .right .content .fa-robot {
    width: 10vw;
    height: 10vw;
  }
  #talkContainer {
    width: 95%;
    height: calc(100% - 140px);
  }
  .userOutput, .aiOutput {
    max-width: 85%;
    padding: 12px 15px;
  }
  .userOutput p, .aiOutput p {
    font-size: 16px;
    line-height: 150%;
  }
  .userOutput::after {
    top: 15px;
  }
  .aiOutput::before, .aiOutput::after {
    top: 15px;
  }
  /* 输入区域优化 */
  .talkInput {
    height: auto;
    padding: 10px 5px;
    display: flex;
    align-items: flex-start;
  }
  .talkInputText {
    height: 50px;
    font-size: 15px;
    width: calc(100% - 140px);
    margin-left: 5px;
  }
  .talkInput p {
    width: 100%;
    padding: 5px 0;
    margin-top: 5px;
    order: 4;
    display: flex;
    justify-content: space-between;
  }
  .talkInput p span, .talkInput p b {
    font-size: 12px;
  }
  /* 欢迎界面调整 */
  .talkMask {
    padding-top: 5vh;
  }
  .right .content .talkContent {
    height: 55vh;
  }
  .right .content #talkContainer {
    height: 55vh;
  }
  .right .content #talkContainer .aiOutput {
    padding: 5px 10px;
  }
  .right .content #talkContainer .aiOutput p {
    font-size: 4vw;
  }
  .right .content #talkContainer .aiOutput::before {
    top: 15px;
  }
  .right .content #talkContainer .aiOutput::after {
    top: 15px;
  }
  .right .content #talkContainer .userOutput {
    padding: 5px 10px;
  }
  .right .content #talkContainer .userOutput p {
    font-size: 4vw;
  }
  .right .content #talkContainer .userOutput::after {
    top: 15px;
  }
  .right .content #talkContainer .fa-user {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkMask h2 {
    font-size: 5vw;
    padding-bottom: 4vw;
  }
  .right .content .talkMask h3 {
    font-size: 4vw;
  }
  .right .content .talkInput {
    height: 37vw;
    position: relative;
  }
  .right .content .talkInput p {
    width: 100%;
    clear: both;
    position: absolute;
    bottom: 0px;
    display: block;
  }
  .right .content .talkInput p span {
    float: none;
    display: block;
    width: 100%;
    font-size: 2vw;
  }
  .right .content .talkInput p b {
    float: none;
    font-size: 2vw;
  }
  .right .content .talkInput .talkMai, .right .content .talkInput .talkButton {
    width: 10vw;
    height: 10vw;
    vertical-align: middle;
  }
  .right .content .talkInput .talkMai .talkMaiIcon, .right .content .talkInput .talkButton .talkMaiIcon {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkInput .fa-microphone, .right .content .talkInput .fa-stop {
    width: 10vw;
    height: 10vw;
  }
  .right .content .talkInput .talkButton {
    right: 10px;
    top: 4vw;
  }
  .right .content .talkInput .talkInputText {
    width: 90vw;
    height: 10vw;
    vertical-align: middle;
  }
  .right .content .maskBg {
    width: 90%;
    height: 50vh;
  }
  /* 滚动条适配 */
  #talkContainer::-webkit-scrollbar {
    width: 8px;
  }
  .talkList::-webkit-scrollbar {
    width: 8px;
  }
  /* 音频按钮调整 */
  .stop-audio-btn, .stop-audio-btn_actvie {
    width: 24px;
    height: 20px;
    margin-top: 5px;
  }
  /* 对话消息容器调整 */
  .flex.items-start.space-x-3.animate-fade-in.p-5,
  .flex.items-start.space-x-3.animate-fade-in.p-5.justify-end {
    padding: 8px 5px;
  }
}
/*# sourceMappingURL=default.css.map */