<template>
  <div class="chat-view-wrapper">
    <div class="chat-view-container">
      <NavbarTop />
      <ChatProcess v-if="chatStatusStore.startChat" />
      <Welcome v-else />
      <div class="new-convo-button">
        <div class="agent-knowledge">
          <ChatModel />
          <!-- <ChatSetting />
          <span class="agent-knowledge-dividing-line"></span>
          <Knowledge /> -->
        </div>
        <d-popover
          :content="$t('newChat')"
          trigger="hover"
          :position="['top']"
          style="color: var(--devui-text)"
        >
          <div class="new-chat-setting" @click="onNewConvo">
            <i class="icon-add"></i>
          </div>
        </d-popover>
      </div>
      <Input />
    </div>
    <div class="left_conent">

      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>资源生成</span>
      </div>
      <div class="left_conent_row">
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(17)">
            <img src="./17.png" width="68" height="68">
            <div class="tooltip">教学视频AI生成智能体</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(18)">
            <img src="./18.png" width="68" height="68">
            <div class="tooltip">教学音乐AI生成助手</div>
          </div>         
        </div>  
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(22)">
            <img src="./22.png" width="68" height="68">
            <div class="tooltip">AI图片生成</div>
          </div>         
        </div>      
      </div>
      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>文史类图谱助手</span>
      </div>
      <div class="left_conent_row">
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(12)">
            <img src="./12.png" width="68" height="68">
            <div class="tooltip">少年读史记</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(13)">
            <img src="./13.png" width="68" height="68">
            <div class="tooltip">人物关系图谱</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(14)">
            <img src="./14.png" width="68" height="68">
            <div class="tooltip">苏轼专题</div>
          </div>         
        </div>
      </div>
      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>虚拟仿真实验室</span>
      </div>
      <div class="left_conent_row">
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(9)">
            <img src="./9.png" width="68" height="68">
            <div class="tooltip">虚拟仿真实验【光学】AI答疑</div>
          </div>         
        </div>        
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(10)">
            <img src="./10.png" width="68" height="68">
            <div class="tooltip">虚拟仿真实验【浮力】AI答疑</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(11)">
            <img src="./11.png" width="68" height="68">
            <div class="tooltip">化学氯化钠晶胞结构交互课件</div>
          </div>         
        </div>
      </div>
      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>数学课件制作工具</span>
      </div>
      <div class="left_conent_row">
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(3)">
            <img src="./3.png" width="68" height="68">
            <div class="tooltip">GeoGebra助手</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(21)">
            <img src="./21.png" width="68" height="68">
            <div class="tooltip">GeoGebra演示</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(4)">
            <img src="./4.png" width="68" height="68">
            <div class="tooltip">数学动画AI制作平台</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(5)">
            <img src="./5.png" width="68" height="68">
            <div class="tooltip">几何题图形交互3D</div>
          </div>         
        </div>
      </div>
      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>知识库训练</span>
      </div>
      <div class="left_conent_row">
         <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(20)">
            <img src="./20.png" width="68" height="68">
            <div class="tooltip">AI教育垂直领域大模型</div>
          </div>         
        </div>
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(6)">
            <img src="./6.png" width="68" height="68">
            <div class="tooltip">史校长著作【小学数学】</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(7)">
            <img src="./7.png" width="68" height="68">
            <div class="tooltip">史校长著作【初中数学】</div>
          </div>         
        </div>
       
        <!-- <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(8)">
            <img src="./temp.png" width="68" height="68">
            <div class="tooltip">专题知识学习情况梳理</div>
          </div>         
        </div> -->
      </div>
      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>作文批阅助手</span>
      </div>
      <div class="left_conent_row">
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(1)">
            <img src="./1.png" width="68" height="68">
            <div class="tooltip">中小学作文批阅助手</div>
          </div>         
        </div>
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(2)">
            <img src="./2.png" width="68" height="68">
            <div class="tooltip">中小学英语作文批阅助手</div>
          </div>         
        </div>
      </div>

      <div class="category-title">
        <svg t="1755739745317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="68972" width="16" height="16"><path d="M381.8496 477.4912H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776V206.2336c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.5456-48.2816 107.776-107.776 107.776zM381.8496 932.7104H206.3872c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c-0.0512 59.4944-48.2816 107.776-107.776 107.776zM835.0208 932.7104h-175.4624c-59.4944 0-107.776-48.2304-107.776-107.776v-163.4816c0-59.4944 48.2304-107.776 107.776-107.776h175.4624c59.4944 0 107.776 48.2304 107.776 107.776v163.4816c0 59.4944-48.2816 107.776-107.776 107.776z" fill="#8C7BFD" p-id="68973"></path><path d="M747.3152 288m-182.3744 0a182.3744 182.3744 0 1 0 364.7488 0 182.3744 182.3744 0 1 0-364.7488 0Z" fill="#FFE37B" p-id="68974"></path></svg>
        <span>其他</span>
      </div>
      <div class="left_conent_row">
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(19)">
            <img src="./19.png" width="68" height="68">
            <div class="tooltip">学伴小智</div>
          </div>         
        </div>
       <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(15)">
            <img src="./15.png" width="68" height="68">
            <div class="tooltip">长春教育资讯</div>
          </div>         
        </div>
        <div class="left_conent_row_col">
          <div class="image-container" @click="openPage(16)">
            <img src="./16.png" width="68" height="68">
            <div class="tooltip">例题训练</div>
          </div>         
        </div>        
      </div>





    </div>
    <!-- <div
      v-if="GlobalConfig.displayShape === DisplayShape.Immersive"
      :class="['toggle-wrapper', !commonStore.isExpand && 'not-expand']"
      @click="onToggle"
    >
      <ExpandIcon />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import {
  useChatHistoryStore,
  useChatMessageStore,
  useChatStatusStore,
  useCommonStore,
} from "@/store";
import { ChatModel } from "@view/chat-model";
import { ChatProcess } from "@view/chat-process";
import { ChatSetting } from "@view/chat-setting";
import { Input } from "@view/input";
import { Knowledge } from "@view/knowledge";
import { Welcome } from "@view/welcome";
import NavbarTop from "./navbar-top.vue";
import { ExpandIcon } from "@/components";
import GlobalConfig from "@/global-config";
import { DisplayShape } from "@/global-config-types";

const chatHistoryStore = useChatHistoryStore();
const chatMessageStore = useChatMessageStore();
const chatStatusStore = useChatStatusStore();
const commonStore = useCommonStore();

const onNewConvo = () => {
  chatHistoryStore.setActiveHistoryId("");
  chatStatusStore.startChat = false;
  chatMessageStore.messages = [];
};

const onToggle = () => {
  commonStore.isExpand = !commonStore.isExpand;
};

const openPage = (id) => {
  if(id === 1) {
    window.open('http://www.hzkjai.com:27002/essaycn', '_blank');
  } else if(id === 2) {
    window.open('http://www.hzkjai.com:27002/essayen', '_blank');
  } else if(id === 3) {
    window.open('http://www.hzkjai.com:27002/math', '_blank');
  } else if(id === 4) {
    window.open('http://www.hzkjai.com:27002/manim', '_blank');
  }else if(id === 5) {
    window.open('http://www.hzkjai.com:27002/ggb3d', '_blank');
  } else if(id === 6) {
    window.open('http://www.hzkjai.com:27002/static/Math.html', '_blank');
  } else if(id === 7) {
    window.open('http://www.hzkjai.com:27002/static/Math2.html', '_blank');
  } else if(id === 8) {
    window.open('http://www.hzkjai.com:27002/static/mind_map.html', '_blank');
  } else if(id === 9) {
    window.open('http://www.hzkjai.com:27002/static/optics_chat.html', '_blank');
  }else if(id === 10) {
    window.open('http://www.hzkjai.com:27002/static/deepseek_fulishiyanshi_iframe.html', '_blank');
  } else if(id === 11) {
    window.open('http://www.hzkjai.com:27002/static/deepseek_huaxue_iframe.html', '_blank');
  } else if(id === 12) {
    window.open('http://www.hzkjai.com:27002/static/ShiJi.html', '_blank');
  } else if(id === 13) {
    window.open('http://www.hzkjai.com:27002/static/temp/relation_28969a75f3de4ea8abbda9c99b77e216.html', '_blank');
  } else if(id === 14) {
    window.open('http://www.hzkjai.com:27002/static/SuShi.html', '_blank');
  } else if(id === 15) {
    window.open('http://www.hzkjai.com:27002/static/ChangChun.html', '_blank');
  } else if(id === 10) {
    window.open('http://www.hzkjai.com:27002/static/deepseek_fulishiyanshi_iframe.html', '_blank');
  } else if(id === 11) {
    window.open('http://www.hzkjai.com:27002/static/deepseek_huaxue_iframe.html', '_blank');
  } else if(id === 12) {
    window.open('http://www.hzkjai.com:27002/static/ShiJi.html', '_blank');
  } else if(id === 13) {
    window.open('http://www.hzkjai.com:27002/static/temp/relation_28969a75f3de4ea8abbda9c99b77e216.html', '_blank');
  } else if(id === 14) {
    window.open('http://www.hzkjai.com:27002/static/SuShi.html', '_blank');
  } else if(id === 15) {
    window.open('http://www.hzkjai.com:27002/static/ChangChun.html', '_blank');
  } else if(id === 16) {
    window.open('http://www.hzkjai.com:27002/static/training/index.html', '_blank');
  } else if(id === 17) {
    window.open('http://www.hzkjai.com:27002/static/JiMeng/index.html', '_blank');
  } else if(id === 18) {
    window.open('http://www.hzkjai.com:27002/static/Suno/index.html', '_blank');
  } else if(id === 19) {
    window.open('http://www.hzkjai.com:27002/static/XueBan.html', '_blank');
  } else if(id === 20) {
    window.open('http://www.hzkjai.com:27008/', '_blank');
  } else if(id === 21) {
    window.open('http://www.hzkjai.com:27002/static/ggb_draw.html', '_blank');
  } else if(id === 22) {
    window.open('http://www.hzkjai.com:27002/static/Midjourney/mj.html', '_blank');
  } 
  
  
}
</script>

<style>
.category-title {
  font-size: 12px;
  font-weight: 500;
  color: #2c3e50;  
  padding-bottom: 5px;
  margin-bottom: 10px;  
  text-align: left;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e8eaed;
  display: flex;
  align-items: center;  
}

.category-title span {
  margin-left: 5px;
}

.left_conent {
  width: 350px;
  margin: 10px 0 10px 0;
  border-left: 1px solid #d2cafe;
  padding: 10px 10px 0 30px;
  overflow-y: auto; /* 纵向滚动条 */
  overflow-x: hidden; /* 隐藏横向滚动条 */
  z-index: 9999;
  position: relative;
  
  /* 滚动条样式 - 默认隐藏 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox */
}

/* Webkit浏览器滚动条样式 */
.left_conent::-webkit-scrollbar {
  width: 6px;
}

.left_conent::-webkit-scrollbar-track {
  background: transparent;
}

.left_conent::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

/* 鼠标悬停时显示滚动条 */
.left_conent:hover::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

.left_conent:hover::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox滚动条显示 */
.left_conent:hover {
  scrollbar-color: #c1c1c1 transparent; /* Firefox */
}

.left_conent_row {
  display: flex;
  /* justify-content: space-around; */
  margin-bottom: 10px;
  flex-wrap: wrap
}
.left_conent_row_col {
  width: 80px;
  height: 80px;  
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.image-container {
  position: relative;
  display: inline-block;
  cursor: pointer;  
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 99999;
  margin-bottom: 8px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.image-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
</style>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.chat-view-wrapper {
  position: relative;
  display: flex;
  flex: 1;
  width: 0;
  height: 100%;
}

.chat-view-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .new-convo-button {
    padding: 0 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 39px;
    gap: 4px;
  }

  .agent-knowledge {
    flex: 1;
    display: flex;
    align-items: center;

    .agent-knowledge-dividing-line {
      width: 1px;
      height: 14px;
      margin: 0 12px;
      background-color: $devui-line;
    }
  }

  .new-chat-setting {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: $devui-border-radius-full;
    background-color: $devui-base-bg;
    box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
    cursor: pointer;

    &:hover {
      color: $devui-brand;
    }
  }
}

.toggle-wrapper {
  position: absolute;
  z-index: 10;
  top: calc(50% - 20px);
  left: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 40px;
  border-radius: 6px;
  box-shadow: 2px 0px 4px 0px var(--mc-float-block-shadow);
  background: $devui-base-bg;
  transition: all 0.3s ease-in-out;
  cursor: pointer;

  svg {
    transition: transform 0.3s ease-in-out;
  }

  &.not-expand {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    svg {
      transform: rotate(180deg);
    }
  }
}

body[ui-theme-type="light"] {
  .chat-view-wrapper {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95),
      rgba(248, 250, 255, 0.95) 99%
    );
  }
}

body[ui-theme-type="dark"] {
  .chat-view-wrapper {
    background-color: $devui-global-bg;
  }
}

@media screen and (max-width: 940px) {
  .navbar-container {
    display: none;
  }
}

@media screen and (max-width: 860px) {
  .toggle-wrapper {
    display: none;
  }
}
</style>
