*{
    padding:0;
    margin:0;
    box-sizing:border-box
  }
  body{
    color:var(--text-color);
    background-color:var(--bg-color);
    font-family:sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
   :root{
     font-size: 16px;
     --bg-color: #fff;
     --icon-color: #333;
     --icon-hover-bg: rgb(0 0 0 /.1);
     --side-panel-bg: #f2f2f2;
     --send-icon: #e6e6e6;
     --send-icon-bg: #333;
     --text-color: #000;
     --text-color-pale: #808080;
  }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg-color: #333;
       --icon-color: #bdbdbd;
       --icon-hover-bg: rgb(0 0 0 /.2);
       --side-panel-bg: #262626;
       --send-icon: #333;
       --send-icon-bg: #e6e6e6;
       --text-color: #fff;
       --text-color-pale: #808080;
    }
     #side_panel_icon {
       filter: invert(100%);
    }
     #blur-circle {
       mix-blend-mode: lighten;
    }
  }
   #side_panel {
     display: flex;
     justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 0;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-gutter: stable;
     background-color: var(--side-panel-bg);
     border-radius: 0 2rem 2rem 0;
     transition-duration: 0.2s;
     transition-timing-function: ease-out;
     z-index: 1000;
     box-shadow: 0rem 0px 1rem var(--icon-hover-bg);
  }
   #side_panel.toggled {
     height: 100%;
     width: 20rem;
  }
   #overlay {
     visibility: hidden;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--icon-hover-bg);
     backdrop-filter: blur(2px);
     transition-duration: 0.2s;
     opacity: 0;
     z-index: 500;
  }
   #overlay.show {
     visibility: visible;
     opacity: 1;
  }
   #menu_btn {
     position: absolute;
     z-index: 100;
     height: 3rem;
     top: 1rem;
     left: 1rem;
     border-radius: 2rem;
     padding: 0.2rem;
     transition-duration: 0.2s;
     stroke: var(--icon-color);
     cursor: pointer;
  }
   #menu_btn:hover {
     background-color: var(--icon-hover-bg);
  }
   #side_panel_icon {
     position: absolute;
     top: 1.4rem;
     left: 1.6rem;
     height: 2rem;
     transition-duration: 0.2s;
  }
   #side_panel_close {
     height: 3rem;
     padding: 0.6rem;
     fill: var(--icon-color);
     stroke: var(--icon-color);
  }
   #close_bg:hover {
     background-color: var(--icon-hover-bg);
  }
   #close_bg {
     position: absolute;
     height: 3rem;
     width: 3rem;
     top: 1rem;
     right: 1rem;
     border-radius: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition-duration: 0.2s;
     cursor: pointer;
  }
   #app {
     display: none;
     align-items: center;
     justify-content: flex-end;
  }
   #chat {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100vw;
     height: 100svh;
     transition-duration: 0.2s;
  }
   #new_chat_mobile {
     height: 3rem;
     padding: 0.6rem;
     fill: var(--icon-color);
  }
   #new_mobile_bg {
     position: absolute;
     z-index: 100;
     top: 1rem;
     right: 1rem;
     height: 3rem;
     border-radius: 3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition-duration: 0.2s;
     cursor: pointer;
  }
   #new_mobile_bg:hover {
     background-color: var(--icon-hover-bg);
  }
   #input_container {
     display: flex;
     position: absolute;
     bottom: 1rem;
     width: calc(100% - 2rem);
     min-height: 4.5rem;
     max-height: 14rem;
     border-radius: 2.5rem;
     border: 0.2rem solid var(--icon-hover-bg);
     box-shadow: 0px 0.5rem 1rem var(--icon-hover-bg);
     background-color: var(--bg-color);
     z-index: 100;
  }
   textarea {
     left: 1rem;
     resize: none;
     field-sizing: content;
     width: calc(100% - 5.2rem);
     border: none;
     outline: none;
     background: none;
     font-size: 1.2rem;
     margin: 1rem 0 1rem 1rem;
     line-height: 2rem;
     color: var(--text-color);
     font-family: sans-serif;
  }
   #send_icon {
     position: absolute;
     bottom: 0.6rem;
     right: 0.6rem;
     height: 3rem;
     border-radius: 3rem;
     padding: 0.6rem;
     fill: var(--send-icon);
     background-color: var(--send-icon-bg);
     transition-duration: 0.2s;
     opacity: 0.5;
  }
  #stop_icon {
    display: none;
    position: absolute;
    cursor: pointer;
    bottom: 0.6rem;
    right: 0.6rem;
    height: 3rem;
    border-radius: 3rem;
    padding: 0.6rem;
    fill: var(--send-icon);
    background-color: var(--send-icon-bg);
    transition-duration: 0.2s;
 }
   #greeting {
     position: absolute;
     top: 40%;
     font-size: 2rem;
     font-weight: bold;
  }
   #blur-bg {
     position: absolute;
     bottom: 0;
     width: 20rem;
     height: 20rem;
     filter: blur(10rem);
     background-image: linear-gradient(0deg, #8080ff, transparent);
     animation: blur-fade-in 2s;
     z-index: 0;
  }
   @keyframes blur-fade-in {
     from {
       width: 0;
       height: 0;
       opacity: 0;
    }
     to {
       width: 20rem;
       height: 20rem;
       opacity: 1;
    }
  }
   .user_message {
     font-size: 1.2rem;
     line-height: 2rem;
     width: fit-content;
     height: fit-content;
     max-width: 80%;
     border-radius: 2rem 0.5rem 2rem 2rem;
     padding: 0.6rem 1.2rem 0.6rem 1.2rem;
     background-color: var(--side-panel-bg);
     animation: fade-in 0.5s;
     white-space: pre-wrap;
     overflow-wrap: break-word;
     margin-top: 2rem;
     transform-origin: right top;
     align-self: flex-end;
  }
   #dialog {
     display: flex;
     position: relative;
     z-index: 0;
     flex-direction: column;
     width: 100vw;
     height: 100%;
     overflow-y: auto;
     scrollbar-gutter: stable;
     margin-bottom: 12rem;
     padding: 10rem 1.5rem 6rem 1.5rem;
  }
   #bottom-grade {
     display: none;
     position: fixed;
     z-index: 100;
     bottom: 5.8rem;
     width: 100vw;
     height: 2rem;
     background-image: linear-gradient(0deg, var(--bg-color), transparent);
  }
   #top-grade {
     position: fixed;
     z-index: 50;
     top: 0;
     width: 100%;
     height: 5rem;
     background-color: var(--bg-color);
  }
   #new_chat {
     display: flex;
     align-items: center;
     overflow-x: hidden;
     width: 18rem;
     height: 3rem;
     border-radius: 2rem;
     background-color: none;
     margin: 5rem 1rem 2rem 1rem;
     transition-duration: 0.2s;
     cursor: pointer;
  }
   #new_chat:hover {
     background-color: var(--icon-hover-bg);
  }
   #new_chat_icon {
     height: 2rem;
     margin: 0 0.5rem 0 0.5rem;
     fill: var(--icon-color);
  }
   #new_chat::before {
     position: absolute;
     white-space: nowrap;
     content: "新しいチャット";
     font-size: 1.2rem;
     left: 5rem;
  }
   .ai_icon {
     height: 4rem;
     width: 4rem;
     fill: var(--send-icon-bg);
     align-self: flex-start;
     animation: rotate 6s ease-in-out infinite;
  }
  .ai_icon_old {
    height: 4rem;
     width: 4rem;
     fill: var(--send-icon-bg);
     align-self: flex-start;
  }
   .ai_icon_bg {
     display: flex;
     align-items: center;
     width: 100%;
     height: 4rem;
     margin-top: 1rem;
     animation: fade-in 0.5s;
  }
  .ai_icon_bg_old {
    display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    margin-top: 1rem;
 }
   .ai_icon_bg::after {
     content: attr(data-text);
     font-size: 1.2rem;
     color: var(--text-color-pale);
  }
  .ai_icon_bg_old::after {
    content: attr(data-text);
    font-size: 1.2rem;
    color: var(--text-color-pale);
 }
   @keyframes fade-in {
     from {
      opacity: 0;
    }
     to {
      opacity: 1;
    }
  }
   @keyframes rotate {
     0%, 20% {
       transform: rotate(0deg);
    }
     25%, 45% {
       transform: rotate(90deg);
    }
     50%, 70% {
       transform: rotate(180deg);
    }
     75%, 95% {
       transform: rotate(270deg);
    }
     100% {
       transform: rotate(360deg);
    }
  }
   @media screen and (min-width: 768px) {
    #overlay {
        display: none;
    }
    #chat {
        width: calc(100vw - 18rem);
        transition-duration: 0.2s;
     }
    #chat.spread {
      width: calc(100vw - 5rem);
    }
    #side_panel {
        height: 100%;
        width: 18rem;
        box-shadow: none;
     }
      #side_panel.toggled {
        width: 5rem;
     }
     #input_container {
        width: 50rem;
     }
     #menu_btn {
        display: none;
     }
     #new_chat_mobile {
        display: none;
     }
     #dialog {
      padding: 10rem 3rem 6rem 3rem;
    }
  }