@charset "utf-8";
/* CSS Document */
/* web-kit scrollbar custom */
::-webkit-scrollbar { width: 8px; height:8px;} /* 스크롤 바 */
::-webkit-scrollbar-track { background-color:#e7e7e7; } /* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-thumb { background: #7e7e7e; border-radius:4px;} /* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */
::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */
* {box-sizing:border-box;}
:root{
    --textarea-h:100px;
    /*--head-height:60px;*/
    --head-height:0px;
}
html {height:100vh;margin: 0;padding: 0;}
body {height:100vh;margin: 0;padding: 0;font-size: 14px;font-family: "Noto Sans KR", sans-serif;}

#bot {margin: 0px 0;height:100vh;background: white;display: flex;align-items: center;justify-content: center;box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);border-radius: 10px;max-width:600px;margin:0 auto;}
#container {height:100%;border-radius: 6px;width: 99%;background: #F3F4F6;padding-bottom:10px;display: flex;flex-direction: column;}
#header {width: 100%;height: 60px;border-radius: 6px 6px 0 0;background: #434a54;color: white;text-align: center;font-size: 1.25em;padding-top: 0;box-sizing: border-box;line-height: 60px;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);letter-spacing:-0.05em;text-transform:capitalize;font-weight:900;}

#body {width: 100%;height: calc(100% - (var(--head-height) + 10vh) );background-color: #F3F4F6;overflow-y: auto;/* box-shadow: inset 0px 0px 60px #00000020;*/box-sizing:border-box;padding-bottom:20px;}
#body.sizeup {height: calc(100% - (60px + var(--textarea-h) + 8px + 10vh) );}

.button{
	border:1px solid #ddd;
	background-color:#f8f8f8;
}

.userSection {width: 100%;clear:both;}
.userSection::after, .botSection::after{content:'';clear:both;display:table;}
.messages {opacity:0;transition:all 0.5s;clear:both;}
.messages.act {opacity:1;transition:all 0.5s;}
.messages.act {margin: .5em;font-size: 1em;padding: .5em;border-radius: 7px;}
.user-message {margin-top: 1em;text-align: right;background: #E5E7EB;color: #444;float: right;width:98%;}
.user-message .text-area{background-color:transparent;border:0;width:100%;resize:none;outline:0;}
.bot-reply {text-align: left;color:#ffffff;background: #313e4d;margin-top: 1em;display:flex;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);width:98%;}

.userSection::before, .botSection::before{clear:both;padding:10px;background-color:#ffffff;border-radius:50%;display:block;width:50px;height:50px;box-sizing:border-box;flex-wrap: nowrap;justify-content: center;align-items: center;flex-direction: row;display:flex;margin:0.5em 0.5em 0 0.5em;font-family:'Material Icons Two Tone';font-size:45px;}
.userSection::before{content:'\ef49';float:right;text-align:right;}
.botSection::before {content:'\ea4a';float:left; text-align:left; background-color:#ffffff;}

.seperator {width: 100%;height: 50px;}

#inputArea {display: flex;align-items: flex-start;justify-content: center;padding: 0 1em;background: transparent;box-sizing: border-box;flex-wrap: wrap;}
.modelSelector {flex:0 0 15%;height: 5vh;background-color: white;border-radius: 6px 0 0 6px;padding: 0.65em;font-size: 1em;border: none;outline: none;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);margin-right:10px;box-sizing:border-box;}
#userInput {height: 5vh;flex:1;background-color: white;border-radius: 6px 0 0 6px;padding: 1em;font-size: 1em;border: none;outline: none;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);overflow-y:auto;font-family:'Noto Sans KR';box-sizing: border-box;}
#send {height: 5vh;padding: .5em;font-size: 1em;text-align: center;flex:0 0 15%;color: white;background: #3B82F6;cursor: pointer;border: none;border-radius: 0 6px 6px 0;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);}

#userInput:focus{box-shadow: 1px 1px 8px rgba(0, 102, 255, 0.3);}
.loading{
    
}
textarea{
    font-family:'Noto Sans KR';
}
.output_viewbox{
    border:0px;
    display:block;
    overflow:hidden;
    overflow-y:auto;
    background-color:transparent;
    width:100%;
    min-height:50px;
    word-break:keep-all;
    color:#ffffff;
    outline:0;
    resize: none;
    padding:0 1em;
    /*white-space: pre;*/
}
.output_viewbox img{
    max-width:100%;
    display:inline-block;
    height:auto !important;
}
#installContainer{
    position:fixed;
    top:0;
    right:0;
    z-index:50;
}
.hidden{
    display:none;
}
.flex-full{
    height:var(--textarea-h);
    background-color:#ffffff;
    width:100%;
    flex:0 0 100%;
    margin-bottom:8px;
}
.flex-full textarea{
    border:0;
    font-size:0.75rem;
}
#inputbox{
    display:none;
}

.image_flex{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 15px 0;
}
.image_flex  img{
    display:flex;
    width:31%;
    height: auto;
}
.image_flex > a {
    display:flex;
    width:31%;
    height: auto;
}
.image_flex > a > img{
    display:block;
    width:100%;
    height: auto;
}

.loading-answ {
  width: 100%;
  text-align: left;
  font-size: 10px;
  position: relative;
  margin: auto;
}

.loading-answ > span {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loading-answ .dot1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loading-answ .dot2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}


@media (max-width:460px){
    .modelSelector {
        flex: 0 0 20%;
        font-size:0.85em;
    }
}