html,body{height:100%;}
body{background:linear-gradient(#353C64,#353C64);background-position:center;background-repeat:no-repeat;background-size:cover}
.page-mask{position:fixed;left:0;top:0;z-index:100;width:100%;height:100%;background-color:#1F2452;transition:all 3s}
.page-mask-out{transform:translateY(-1000px);opacity:0}
.page-mask .avatar{width:100px;height:100px;border-radius:100%;object-fit:cover}
.page-mask .hello{padding-left:50px;padding-right:50px;max-width:400px;color:#e8e8e8}

.btn-conn,.btn-disconn{border-radius:100%;width:80px;height:80px;background:#009DE6;line-height:1;color:#fff;transition:all 1s;line-height:1;display:none}
.btn-conn:hover,.btn-disconn:hover{background:#7273FF;color:#fff}

.visual-box-outter{position:absolute;z-index:61;width:30%;max-width:150px;display:flex;flex-direction:column;right:10px;top:90px}
.visual-box{display:none;width:100%;padding:5px;background:#2f303a;border-radius:8px;box-shadow:2px 2px 6px rgba(114,115,255,0.4)}
.visual-view{width:100%;position:relative}
.visual-box canvas{position:absolute;left:0;top:0;opacity:0.1;width:1px;height:1px;z-index:1}
.visual-box video{background:#000;width:100%;aspect-ratio:1/1;height:auto;display:block;object-fit:cover;border-radius:6px}
.visual-mask{position:absolute;z-index:5;width:100%;height:100%;left:0;top:0}
.btn-closevisual{color:#fff;padding-top:3px;font-size:20px}
.btn-closevisual:hover{color:#e8e8e8}
.open-visual{width:40px;height:40px;border-radius:100%;background:rgba(0,0,0,0.5);display:none}
.open-visual img{width:20px;height:20px;display:block}
.btn-switchcam{display:none;color:#fff;width:40px;height:40px;border-radius:100%;background:rgba(0,0,0,0.5);}

.main-body{width:100%;max-width:650px;height:100%;background-color:rgba(255,255,255,0.7);margin:auto;position:relative}
.auto-speek-box{position:absolute;z-index:60;top:20px;right:20px;display:flex;flex-direction:column;align-items:end}
.bot-menus{position:absolute;z-index:60;top:10px;left:10px}
.bot-menus-btn{border-radius:100%;width:50px;height:50px;background:rgba(135,135,250,0.5);color:#fff;box-shadow:0 0 8px rgba(0,0,255,0.2)}
.bot-menus .menu{background:rgba(0,0,0,0.5);border:0;overflow:hidden}
.bot-menus .menu li a{color:#fff}
.bot-menus .menu li{color:#fff;border-color:#8a8a8a}
.bot-menus .menu>li:hover>a{background:rgba(0,0,0,0.8)}
.bot-menus:not(.btn).open{background:transparent}

.pb-2{padding-bottom:2px}
.chat-box{position:absolute;left:0;top:0;z-index:50;width:100%;height:100%;display:flex;flex-direction:column}
.chat-msg-box{flex-shrink:1;flex-grow:1}
.flex-end{justify-content:flex-end}
.op-outer{user-select:none;padding-top:15px}
.chat-op-box,.audi-box{padding:10px 10px 20px 10px}
.chat-op{width:98%;max-width:800px;margin:auto;display:flex;border-radius:20px;padding-top:4px;padding-bottom:4px;background:#fff;border:1px solid #ddd;box-shadow:0 0 6px rgba(0,0,0,0.1);transition:all 0.3s}
.chat-op:hover{border:1px solid #272e7d;box-shadow: 0 0 6px rgba(53,67,208,0.5)}
.chat-op .left{flex-shrink:1;flex-grow:1;padding-left:10px}
.chat-op .right{flex-shrink:0;flex-grow:0;padding-right:10px}
.chat-op .btn-send,.chat-op .btn-clear-msg,.chat-op .btn-stop,.chat-op .btn-clear{border-radius:50%;color:#8a8a8a;font-size:20px;height:30px;transition:all 0.3s;cursor:pointer}
.chat-op .btn-clear{margin-left:10px}
.chat-op .btn-send{font-size:26px}
.chat-op .btn-send:hover,.chat-op .btn-clear-msg:hover,.chat-op .btn-stop:hover{}
.chat-op .btn-send .rf{color:#7273FF}
.chat-op .btn-clear .rf{color:#ddd}

.max800-box{width:98%;max-width:800px;margin:auto;}
.switch-mode{padding:3px 5px;border-radius:6px;color:#fff;background:rgba(0,0,0,0.5);border:1px solid #8a8a8a;margin-left:20px;display:inline-block;font-size:12px}
.switch-mode:hover{color:#ddd}

.chat-msg img,.audi-text img{max-width:100%}
.chat-msg p{margin-top:0.3em;margin-top:0.3em}

.show-audi{display:none}
.show-audi .rf{font-size:26px}
.audi-box{display:none}
.audi-op{width:98%;max-width:800px;margin:auto;transition:all 0.3s}
.audi-op-panel{height:60px;background:#ddd;border-radius:20px}

.chat-input-box{width:100%;position:relative;min-height:40px}
.chat-input-box .bulge,.chat-input-box textarea{min-height:40px;padding:8px;padding-left:5px;font-size:15px;line-height:1.6;word-break:break-all;max-height:100px}
.chat-input-box .bulge{visibility:hidden}
.chat-input-box textarea{position:absolute;left:0;top:0;width:100%;height:100%;border:0;background:transparent;outline:0;color:#000}

.chat-msg-item.ai{background:transparent}
.chat-msg-wrap{width:98%;max-width:970px;margin:auto}
.chat-avatar{width:44px;flex-shrink:0;flex-grow:0}
.uname{color:#8a8a8a}
.chat-avatar img{width:34px;height:34px;border-radius:100%;display:block;object-fit:cover}
.chat-msg{word-break:break-word;border-radius:10px;overflow:hidden;max-width:85%;padding:6px 10px 6px 10px;min-width:50px}
.audi-text-content{max-width:85%;background:#f8f8ff}
.audi-text-content p{margin-top:0.3em;margin-top:0.3em}
.chat-msg .message{font-size:15px}
.chat-msg .r_message{background:#e8e8e8;margin-bottom:8px;border-radius:6px;overflow:hidden;padding:8px;border:1px solid #c9c5c5;margin-top:5px}

.chat-msg-item.mine .chat-msg{background:#95EC69}
.chat-msg-item.ai .chat-msg{background:#F2F3F8}
.chat-msg .rf-copy{font-size:15px;color:#6f86f6}
.chat-msg .rf-copy.mine{color:#6772a7}

.uname{}

.scroll-y{overflow-y:auto}
.scroll-x{overflow-x:auto}
.scroll-xy{overflow:auto}
.scrollbar::-webkit-scrollbar{width:5px}
.scrollbar::-webkit-scrollbar-thumb{border-radius:10px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:#E1E1E1}
.scrollbar::-webkit-scrollbar-track{border-radius:10px;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);background:#FAFAFA;}

.chat-msg-item.mine{display:flex;justify-content:flex-end}
.mine .chat-avatar{display:flex;justify-content:flex-end}
.chat-msg-item.mine .chat-msg{display:flex;justify-content:flex-end}

.btn-rec{color:#000;background:#fff;flex:1;margin-left:10px;border-radius:6px;height:40px;margin-right:10px}

.chat-msg-item,.chat-audi-item{transition:all 0.5s;margin-top:10px}
.chat-audi{border-radius:10px;overflow:hidden;max-width:80%;width:70px;padding:8px 10px 8px 10px;}
.chat-audi-item.mine .chat-audi{background:#95EC69}
.chat-audi-item.ai .chat-audi{background:#F2F3F8}

.audi-ico{width:18px;height:18px;background-image:url(/static/images/audio.png);background-repeat:no-repeat;background-size:auto 100%;background-position:center}

.chat-audi.playing .audi-ico{
    animation:playing ease 1s;animation-iteration-count:infinite
}
.chat-audi{transition:all 0.5s}
.chat-audi.playing{background:#B4A1FF !important}
.chat-audi.speek-txt{background:#f8f8ff;padding:6px;width:50px;display:none}
.chat-audi.speek-txt .audi-ico{width:14px;height:14px}

.chat-msg,.chat-audi{box-shadow:0 0 8px rgba(0,0,0,0.2)}
.msg-time{text-align:center;padding:20px 0 0 0;color:#8a8a8a;font-size:14px}

.show-audi-text{color:#8a8a8a}
.show-audi-text .rf{color:#7273FF}
.audi-text-outer{display:none}
@keyframes playing{
    0%{width:0px;opacity:0.1}
    20%{width:6px;opacity:0.1}
    100%{width:30px;opacity:1}
}

.cancel-rec-outer{position:fixed;width:100%;height:150px;bottom:80px;display:none;z-index:55}
.cancel-rec-inner{background:linear-gradient(0deg,transparent,rgba(0,0,0,0.4));border-radius:100px 100px 0 0;width:95%;max-width:800px;height:100%;margin:auto}
.cancel-rec-box{margin:auto;max-width:850px;height:100%;}
.btn-cancel-rec{border-radius:100%;background:#fff;width:80px;height:80px;color:#8a8a8a;animation:ani-bright linear 0.5s;animation-iteration-count:infinite;animation-direction:alternate-reverse}
.btn-cancel-rec:hover,.bright{font-size:22px !important;transition:all 0.5s;background:#ff0000;color:#fff}
@keyframes ani-bright{
    0%{box-shadow:0 0 30px rgba(252,255,255,1);}
    100%{box-shadow:0 0 70px rgba(122,121,255,1);}
}

.bot-box{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;}
.bot-box #cvs{background:transparent;width:100%;position:absolute;left:0;top:0;height:100%;display:block;object-fit:cover;z-index:2}
.bot-box video{object-fit:cover;display:block;width:1px;height:1px}
.bot-box .mute-v,.speeking-v{position:absolute;left:0;top:0;z-index:3;width:100%;height:100%}
.bot-box .mask{position:absolute;width:100%;height:100%;left:0;top:0;z-index:5}

table{width:100%;empty-cells:show;background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:14px}
table th{text-align:left; font-weight:bold}

table th{font-weight:bold;background:#fff}
table th,table td{padding:8px;line-height:20px;word-break:break-all}
table td{text-align:left}
table tbody tr.success > td{background-color:#dff0d8}
table tbody tr.error > td{background-color:#f2dede}
table tbody tr.warning > td{background-color:#fcf8e3}
table tbody tr.info > td{background-color:#d9edf7}
table tbody + tbody{border-top:2px solid #ddd}
table table{background-color:#fff}
table.fix-header thead,table.fixed-header thead{position:sticky;top:0;z-index:2}
table.fix-firstcol td:first-child,table.fixed-firstcol td:first-child{position:sticky;left:0;z-index:1;border-right:1px solid #ddd}
table.fix-lastcol td:last-child,table.fixed-lastcol td:last-child{position:sticky;right:0;z-index:1}

table{border-top:1px solid rgb(102, 65, 65)}
table th, td{border-bottom:1px solid #ddd}

table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0;border-radius:4px}
table th,table td{border-left:1px solid #ddd}
table{border-bottom:0}

/*奇数行背景设为浅灰色*/
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
table tbody > tr:nth-child(even) > td,
table tbody > tr:nth-child(even) > th{background-color:#fff}

table thead th:first-child {
	border-top-left-radius: 4px;
}
table thead th:last-child {
	border-top-right-radius: 4px;
}
table tr:last-child td:first-child {
	border-bottom-left-radius: 4px;
}

table tr:last-child td:last-child {
	border-bottom-right-radius: 4px;
}

.prettyprint {
    padding: 10px 5px;
    border-radius: 5px;
    background: #f8f8f8
}
pre{white-space:normal}

.show-audi-text-2{display:none}
@media (min-width:992px) {
	.main-body.wide{max-width:100% !important}
	.main-body.wide .chat-msg-list{max-width:600px}
    .main-body.wide .uname{display:none}
	.main-body.wide .chat-msg-item.mine .chat-avatar,.main-body.wide .chat-audi-item.mine .chat-avatar{display:none}
    .main-body.wide .chat-msg-item.mine .chat-msg-outer{justify-content:flex-start !important;}
    .main-body.wide .chat-msg-item.mine .chat-msg{justify-content:flex-start;margin-left:44px}

    .main-body.wide .chat-msg-item,.main-body.wide .chat-audi-item{margin-top:20px}
    .main-body.wide .chat-audi-item.mine .chat-audi-outer{justify-content:flex-start !important;margin-left:44px}

    .main-body.wide .show-audi-text-1{display:none}
    .main-body.wide .show-audi-text-2{display:inline}
    .main-body.wide .chat-audi-item.mine .audi-text-outer>div{justify-content:flex-start !important}
    .main-body.wide .chat-audi-item.mine .audi-text-content{margin-left:44px}
}
@media (max-width:767px) {
	.main-body{max-width:100% !important}
}
.mine .uname,.mine .chat-avatar{display:none !important}

.audi-text-content a,.chat-msg a{color:#7273FF}

.audio-wave{
  transform:translateX(-50%);display:none;
  position:fixed;left:50%;bottom:100px;z-index:20;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 60px;
  height: 40px;
}
.audio-wave .wave {
    height: 40px;
    display: block;
    width: 10px;
    height: 6px;
    border-radius: 8px;
    background: orange;
    animation: audio-wave 1s ease-in-out infinite;
  }

.audio-wave .wave:nth-child(1) {animation-delay: 0.1s;}
.audio-wave .wave:nth-child(2) {animation-delay: 0.2s;}
.audio-wave .wave:nth-child(3) {animation-delay: 0.3s;}
.audio-wave .wave:nth-child(4) {animation-delay: 0.4s;}
.audio-wave .wave:nth-child(5) {animation-delay: 0.5s;}

@keyframes audio-wave {
  0% {
    height: 6px;
    transform: translateY(0px);
    background: #ff8e3a;
  }
  25% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }
  50% {
    height: 15px;
    transform: translateY(-5px) scaleY(1.5);
    background: #ed509e;
  }
  75% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }
  100% {
    height: 6px;
    transform: translateY(0px);
    background: #0fccce;
  }
}
lh1{line-height:1}
.chat-msg-item.ai .message ol{list-style-type:auto;padding-left:1em}