@charset "utf-8";
/* CSS Document */
* {padding:0;margin:0;box-sizing:border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* for removing the highlight */
    /* outline:none; */
}
a{text-decoration:none;color:initial;}
label{cursor:pointer}
html{
    width: 100%;
    height: 100vh;
    height: 100%;
    min-height:650px;
    font-size: 18px;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color:#a3a3a3;
    background: #000108;
    margin-top:env(safe-area-inset-top);
    overflow: hidden;
}
body{
    width: 100%;
    height: 100%;
    user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: manipulation;
    background: linear-gradient(180deg, black, #11142a);
    background: linear-gradient(180deg, #141212, #171c27);
}
body.Windows
,body.Windows .history-panel .contents{
    ::-webkit-scrollbar {background:rgba(0,0,0,0.5)};
    ::-webkit-scrollbar-thumb {background:rgb(53 66 80)};
    ::-webkit-scrollbar-button {display:none};
    ::-webkit-scrollbar-corner {display:none};
}
body.iOS{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-touch-action: manipulation;
    touch-action: manipulation;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
textarea{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

i.material{
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  /* font-size: 24px; */
  /* line-height: 1; */
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


.container{
    width:100%;
    height: 100%;
    /* position:fixed; */
    /* background: #000108; */
}

.touch-screen-msg{
    position:absolute;
    width:100%;
    text-align:center;
    font-size: 17px;
    font-weight: 300;
    color:#FFF;
    text-shadow: 0 0 1px #000,0 0 5px #000,0 0 5px #000,0 0 10px #000,0 0 10px #000,0 0 15px #000,0 0 15px #000,0 0 15px #000;
    top: 420px;
    opacity:0;
    transition: opacity 500ms linear;
    background: rgba(0,0,0,0.3);
    padding: 8px;
    pointer-events:none;
    z-index: 1;
}
.show .touch-screen-msg:not(.hide){
    opacity:1;
}

button{
    font-size:18px;
    border: 1px solid #424242;
    padding: 8px 40px;
    margin-top:5px;
    border-radius: 30px;
    background: linear-gradient(#7b7b7b, #0b0b0b);
    color: #DDD;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);
    cursor: pointer;
    transition:transform 100ms;
}
button:hover{transform: scale(1.1);}
button:active{
    transform:translateY(1px);
    background:#9b00ff;
}
button.lock{
    opacity:0.8;
    background:#5e138e;
    pointer-events:none;
}
button>*,button::before,button::after{pointer-events:none;}
button::before{
    content:'';
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.logout-btn,
.login-btn{
    padding: 1px;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 9px;
    top: 9px;
    font-size: 24px;
}
.upload-btn{
    padding: 1px;
    width: 36px;
    height: 36px;
    position: absolute;
    left: 9px;
    top: 9px;
    font-size: 24px;
}

#btn-send{
    padding: 5px 45px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.8),-1px 1px 2px 0 rgba(255,255,255,0.2) inset,1px -1px 2px 0 rgba(0,0,0,0.2) inset;
    border: 0;
    position: relative;
}
#btn-send:active{box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);}
#btn-send::before{
    content:'';
    width:32px;
    height:32px;
    background:url('/img/icon_paw.svg') no-repeat;
    background-size:100%;
    display:inline-block;
    filter: drop-shadow(1px -1px 2px rgb(118 52 161 / 68%)) drop-shadow(-1px 1px 2px rgb(255 155 244 / 67%));
    -webkit-filter: drop-shadow(1px -1px 2px rgb(118 52 161 / 68%)) drop-shadow(-1px 1px 2px rgb(255 155 244 / 67%));
    position:relative;
    top:2px;
}
#btn-send:active::before{
    filter: drop-shadow(0 0 2px rgb(81 8 129));
    -webkit-filter: drop-shadow(0 0 2px rgb(81 8 129));
}
body:not(.iOS):not(.Android) #btn-send::after{
    content:'Ctrl+Enter';
    position:absolute;
    bottom:-15px;
    width:100%;
    left:0;
    font-size:12px;
    color:#a128d6;
}

.container:not(.show)>button{opacity:0;}

.title{
    font-family: "Fredericka the Great", serif;
    font-weight: 400;
    font-style: normal;
    /* position: absolute; */
    text-align: center;
    width: 100%;
    padding-top: 5px;
    color: #FFF;
    font-size: 50px;
    text-shadow: 1px 1px black, 0px 0px 5px rgba(0,0,0,0.5);
    /* z-index: 1; */
    pointer-events: none;
    text-transform: uppercase;
}
.title>span{display:inline-block}
.toast-msg {
    position: fixed;
    z-index: 115;
    top: 220px;
    left: 0;
    transform: translate3d(0, 30px, 0);
    opacity: 0;
    width: 100%;
    display: inline-block;
    text-align: center;
    pointer-events: none;
    transition: opacity 250ms, transform 250ms;
}
.toast-msg.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.toast-msg > span {
    min-width: 50px;
    max-width: 90vw;
    display: inline-block;
    text-align: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.9);
    padding: 10px 30px;
    color: #EEE;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: 0 0 5px 0px rgb(0 0 0);
}

.card-select-panel{
    display:none;
    position:fixed;
    width: 100vw;
    height: 100vh;
    height: 100%;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10;
    cursor: pointer;
}
.card-select-panel.ready{
    display:block;
    background: rgba(0,0,0,0);
    pointer-events: none;
}
.card-select-panel.show{display:block;}
.card-select-panel>.inner{
    position:absolute;
    min-width:300px;
    width:100%;
    height: 100%;
    text-align: center;
    pointer-events: none;
}

.card-description{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    pointer-events:none;
    opacity:0;
    transition:opacity 200ms linear;
}
.card-description.show{
    opacity:1;
    transition:opacity 300ms linear 300ms;
    pointer-events:auto;
    cursor: zoom-out;
}
.card-description.show.history{
    background:rgba(50,50,50,0.6);
    transition:opacity 250ms linear;
}
.card-description>.box{
    position:absolute;
    top:300px;
    left:50%;
    background: rgba(0,0,0,0.8);
    width: 350px;
    min-height:100px;
    transform:translateX(-50%);
    border-radius: 6px;
    text-align: center;
    padding: 16px;
    padding-bottom: 30px;
    color: #DDD;
    font-size:15px;
    pointer-events: none;
}
.card-description>.box>h3{font-size:16px}
.card-description>.box>p{
    line-height:40px;
    color:#3fb8ff;
}
.card-description>.box>.desc{text-align:left}
.card-description>.box>.desc p+p{margin-top:15px}

.btn-init{
    position: fixed;
    bottom: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom) / 3);
    left: 5px;
    padding: 4px 8px;
    font-size: 12px;
    background: #9e4545;
    cursor:pointer;
    border:0;
}
.btn-init::before{
    content:'';
    width: 15px;
    height: 15px;
    vertical-align: bottom;
    margin-right:3px;
    background-image:url('/img/svg/google_icon_recycling.svg');
}
.btn-init>.version{position:absolute;top:-18px;}
.btn-sound{
    width: 40px;
    height: 40px;
    line-height:20px;
    padding: 5px;
    left: 5px;
    position: absolute;
    color: #EEE;
    background: rgba(0,0,0,0.5);
    border: 0;
    top: 0px;
    z-index: 11;
    font-size: 32px;
    box-shadow: none;
    text-shadow: 1px 1px black,0px 0px 5px black;
}
.btn-sound::before{background-image:url('/img/svg/google_icon_volume_up.svg');width: 30px;height: 30px;}
.btn-sound.off::before{background-image:url('/img/svg/google_icon_volume_off.svg');}

.btn-history{
    width: 40px;
    height: 40px;
    line-height:20px;
    padding: 5px;
    right: 3px;
    position: absolute;
    color: #c7c7c7;
    background: transparent;
    border: 0;
    top: 0px;
    z-index: 10;
    font-size: 32px;
}
.btn-history::before{
    content:'';
    width:100%;
    height:100%;
    background-image:url('/img/svg/google_icon_history.svg');
    opacity:0.8;
}
.btn-history>.tooltip{
    position:absolute;
    font-size:13px;
    white-space:nowrap;
    right:30px;
    bottom: -10px;
    display:block;
    border-radius:10px;
    border-top-right-radius:0;
    border-bottom-right-radius: 20px;
    background:#333;
    background: rgb(31 41 51 / 90%);
    padding:5px 10px;
    color:#EEE;
    letter-spacing:-1px;
    box-shadow:-2px 2px 0 0 rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateX(50%);
    transition: opacity 100ms linear, transform 250ms cubic-bezier(0.42, 0, 0.69, 1.4);
}
.btn-history>.tooltip::before{
    content:'';
    position:absolute;
    top:0;
    right: -7px;
    border-top:15px solid #333;
    border-top: 20px solid rgb(31 41 51 / 90%);
    border-left:0;
    border-right:10px solid transparent;
    border-bottom:0;
}
.btn-history>.tooltip.show{
    opacity: 1;
    transform: translateX(0);
    transition: opacity 250ms linear, transform 200ms cubic-bezier(0.42, 0, 0.69, 1.4) 50ms;
}

.model{
    position: fixed;
    z-index:1;
    right: 0px;
    bottom: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom) / 3);
    background:rgba(0,0,0,0.8);
    padding:0 8px;
    border-radius:10px;
    box-shadow: -1px 1px 1px 1px rgba(0,0,0,0.5);
    background-image:url('/img/Google_Gemini_logo.svg');
    background-size:50px;
    background-position: center top;
    background-repeat:no-repeat;
    width: 68px;
    height: 22px;
}

.user-message{
    position:absolute;
    background: rgba(143, 243, 255, 75%);
    width:320px;
    min-height: 48px;
    top: 440px;
    left:50%;
    margin-left:-160px;
    border-radius: 12px;
    border-top-right-radius: 3px;
    padding: 15px;
    color: #222;
    font-size: 15px;
    transform: scale(0.5) translateY(200px);
    opacity: 0;
    transition: transform 200ms linear 300ms, opacity 300ms linear;
    z-index: 1;
    pointer-events: none;
}
.user-message.show{
    transform: scale(1.1) translateY(0);
    opacity: 1;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.73, 1.17), opacity 200ms linear;
}


@keyframes ani-shake{
	0%{transform: translateX(-5px)}
    20%{transform: translateX(5px)}
    40%{transform: translateX(-5px)}
    60%{transform: translateX(5px)}
    80%{transform: translateX(-5px)}
    100%{transform: translateX(0)}
}



.splash-panel{
    text-align:center;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    padding-top: 100px;
    opacity: 1;
    transition: opacity 500ms linear;
    z-index: 99;
    overflow-y: auto;
}
.start .splash-panel{
    opacity:0;
    pointer-events: none;
}
.splash-panel h1{
    font-size: 80px;
    color: #FFF;
    opacity: 0.5;
    height: 80px;
}
.splash-panel h1>span{
    display:inline-block;
    width:80px;
    height:80px;
    background-image:url('/img/icon_headphones.svg');
    background-size:100%;
    background-repeat:no-repeat;
    position:relative;
}
.splash-panel h1 i{
    width:50px;
    height:50px;
    display:inline-block;
    background-image:url('/img/svg/google_icon_wifi.svg');
    background-repeat:no-repeat;
    background-size: contain;
    position: relative;
}
.splash-panel h1 i.rotate-r{
    transform:rotateZ(90deg);
    font-size: 50px;
    position:relative;
    top: -10px;
    left: -10px;
}
.splash-panel h1 i.rotate-l{
    transform:rotateZ(-90deg);
    font-size: 50px;
    position:relative;
    top: -10px;
    left: 10px;
}

.splash-panel .desc{
    line-height:28px;
    font-size: 18px;
    color:#DDD;
    margin-top: 30px;
    margin-bottom: 0;
}
.splash-panel button{
    position:relative;
    width: 280px;
    background: rgba(0,0,0,0.3);
    margin-top: 30px;
    border-color: #AAA;
    padding: 15px 0;
    padding-left: 30px;
    font-size: 17px;
    min-height: 54px;
}
.splash-panel button::before{
    content:'';
    position:absolute;
    left: 20px;
    top: 5px;
    opacity: 0.4;
    background-image:url('/img/svg/google_icon_volume_up.svg');
    background-repeat:no-repeat;
    background-size: contain;
    width:40px;
    height:40px;
}
.splash-panel button#btn-start-mute::before{background-image:url('/img/svg/google_icon_nosound.svg');}
.splash-panel button:hover::before{opacity: 1;}

.splash-panel .language{
    padding-top: 35px;
    font-size: 30px;
    padding-bottom: 25px;
}
.splash-panel .language::before{
    content:'';
    width:30px;
    height:30px;
    display:inline-block;
    background-image:url('/img/svg/google_icon_lang.svg');
    background-repeat:no-repeat;
    background-size: contain;
    position:relative;
    top:2px;
    opacity: 0.8;
}
.splash-panel .language select{
    vertical-align:top;
    height: 35px;
    background:rgba(0,0,0,0.5);
    color:#DDD;
    min-width:120px;
    border-radius: 10px;
    border:1px solid #AAA;
    padding:0 10px;
    font-size: 17px;
    cursor: pointer;
}
.splash-panel .email{
    position: fixed;
    color: #EEE;
    font-size: 26px;
    top: calc(10px + env(safe-area-inset-top));
    left:10px;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.splash-panel .email::before{
    content:'';
    width: 28px;
    height: 28px;
    display:inline-block;
    background-image:url('/img/svg/google_icon_email.svg');
    background-repeat:no-repeat;
    background-size: cover;
    opacity:0.7;
}
.splash-panel .email>span{
    position:absolute;
    top:4px;
    left:35px;
    font-size:14px;
    display:inline-block;
    transform:scale(0,1);
    transform-origin: left;
    transition:transform 200ms ease-in-out,opacity 200ms linear;
    opacity:0;
    pointer-events: none;
}
.splash-panel .email:hover::before{
    background-image:url('/img/svg/google_icon_mailto.svg');
}
.splash-panel .email:hover>span{
    transform:scale(1,1);
    opacity:1;
}
.splash-panel .ads-area{
    margin-top:30px;
    margin-bottom:20px;
}
.splash-panel .total-area{
    line-height:34px;
    font-size:26px;
    letter-spacing: 1px;
    pointer-events:none;
    /* position:absolute; */
    width:100%;
    top:20px;
    height: 90px;
}
.splash-panel .total-area h3{
    font-weight:400;
    font-size:24px;
    display:none;
}
.splash-panel .total-area p:not(:empty)::before{
    content:'';
    width: 26px;
    height: 26px;
    display:inline-block;
    background-image:url('/img/svg/google_icon_users.svg');
    background-repeat:no-repeat;
    background-size: cover;
    position:relative;
    top:5px;
    margin-right:10px;
}
.splash-panel .total-area p#total-message::before{
    background-image:url('/img/svg/google_icon_message.svg');
}
.splash-panel .buymeacoffee{
    display:block;
    width:200px;
    height:56px;
    margin: 0 auto;
    margin-bottom: 5px;
}
.splash-panel .buymeacoffee>img{
    width:200px;
    height:56px;
    border-radius:100px;
}

.splash-panel .buymeacoffee.kakao{
    background:#ffdd04;
    width:200px;
    height: 52px;
    line-height: 32px;
    border-radius:100px;
    position:relative;
    padding-left: 30px;
    font-size: 16px;
    padding-bottom: 30px;
}
.splash-panel .buymeacoffee.kakao>*{
    pointer-events:none;
}

.splash-panel .buymeacoffee.kakao::before{
    content:'';
    background-image:url('/img/svg/coffee.svg');
    background-repeat:no-repeat;
    width: 26px;
    height: 40px;
    background-size: contain;
    display:block;
    position:absolute;
    top: 10px;
    left: 18px;
}
.splash-panel .buymeacoffee.kakao p::after{
    content:'';
    background-image:url('/img/svg/pay.svg');
    background-repeat:no-repeat;
    width: 60px;
    height: 29px;
    background-size: contain;
    display:block;
    position:absolute;
    bottom: 0px;
    left: 80px;
}
.splash-panel .coffee-msg{
    color:#ffdd04;
    font-size:12px;
    pointer-events:none;
    line-height: 16px;
    width: 100%;
}
body:not([lang=ko]) #btn-coffee1{display:none;}
body[lang=ko] #btn-coffee2{display:none;}


.history-panel{
    position:fixed;
    width:100%;
    background:rgba(0,0,0,0.6);
    height:100vh;
    left:0;
    z-index: 10;
    pointer-events:none;
    opacity:0;
    transition: opacity 200ms linear 200ms;
    top:0;
    touch-action:none;
}
.history-panel>.inner{
    position:fixed;
    width:100%;
    max-width: 410px;
    background:rgb(27 34 41 / 90%);
    height:100%;
    right:0;
    text-align:center;
    box-shadow:-2px 0 5px 0 rgba(0,0,0,0.5);
    transform:translate3D(100%,0,0);
    transition:transform 250ms ease-out;
    padding-top:env(safe-area-inset-top);
}

.history-panel.show{
    pointer-events:auto;
    opacity:1;
    transition:opacity 250ms linear;
}
.history-panel.show>.inner{
    transform:translate3D(0,0,0);
    transition:transform 250ms ease-in-out 100ms;
}

.history-panel .btn-close{
    position:absolute;
    top: 4px;
    top: calc(4px + env(safe-area-inset-top));
    left: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #4d4d4d;
    border: 0;
}
.history-panel .btn-close::before{
    width:34px;
    height:34px;
    left: 2px;
    position: relative;
    background-image:url('/img/svg/google_icon_right.svg');
}
.history-panel h3{
    font-size:26px;
    line-height: 55px;
    font-family: "Fredericka the Great", serif;
    letter-spacing:1px;
    text-transform:uppercase;
    padding-top: 5px;
}
.history-panel h3:after{
    content:'';
    background:url('/img/icon-feather.svg') no-repeat 100%;
    display:inline-block;
    width:25px;
    height:25px;
    position:relative;
    top:-1px;
}
.history-panel h3>i{
    font-size:20px;
    position:relative;
    top:-10px;
    left:4px;
}
.history-panel .contents{
    font-size: 14px;
    color:#CCC;
    overflow-y:auto;
    max-height: calc(100% - 83px);
    height: calc(100% - 83px - env(safe-area-inset-bottom) / 2);
    padding-bottom: 100px;
    background: rgb(27 34 41 / 50%);
}
.history-panel .contents .date{
    font-size: 15px;
    line-height: 25px;
    color:#AAA;
    pointer-events: none;
    letter-spacing: -1px;
}
.history-panel .contents .date::before,
.history-panel .contents .date::after{
    content:"";
    display:inline-block;
    width: 75px;
    height:1px;
    background: #7a7a7a;
    position:relative;
    top:-5px;
}
.history-panel .contents .date>span::before,
.history-panel .contents .date>span::after{
    content:'';
    position:relative;
    top: 1.5px;
    opacity:0.7;
    font-size: 12px;
    z-index:1;
    display: inline-block;
    width: 11px;
    height: 14px;
    background-image:url('/img/svg/google_icon_nearby.svg');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}
.history-panel .contents .date>span::before{left:-4px;}
.history-panel .contents .date>span::after{right:-4px;}
.history-panel .contents .message{
    padding-bottom: 15px;
    padding-top: 5px;
}
.history-panel .contents .message>div{
    width:100%;
    position:relative;
}
.history-panel .contents .message>div.cat{
    text-align:left;
    padding-left: 55px;
}
.history-panel .contents .message>div.cat::before{
    content:'MasterCat';
    display:block;
}
.history-panel .contents .message>div.cat::after{
    content:'';
    width:40px;
    height:40px;
    background:#AAA;
    background-image:url('/img/cat160.png');
    background-size:cover;
    display:inline-block;
    position:absolute;
    left:8px;
    top:-5px;
    border-radius:40%;
    border:1px solid #AAA;
}
.history-panel .contents .message>div.user{
    text-align:right;
    padding-right:10px;
    padding-top: 5px;
}
.history-panel .contents .message>div>div{
    background:#DDD;
    color:#333;
    display:inline-block;
    margin: 2px 0;
    padding: 8px;
    border-radius: 10px;
    min-width: 40px;
    min-height: 33px;
}
.history-panel .contents .message>div.cat>div{max-width: calc(100% - 50px);}
.history-panel .contents .message>div.cat>div:hover{
    cursor: copy;
    cursor: pointer;
    transform: scale(1.02) translateZ(0);
    transition:transform 200ms cubic-bezier(0.42, 0, 0.9, 1.75);
}
.history-panel .contents .message>div.cat>div:hover::after{
    content: '';
    position:absolute;
    bottom:2px;
    right:2px;
    opacity:0.7;
    width:20px;
    height:24px;
    background-image:url('/img/svg/google_icon_file_copy.svg');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;

}
.history-panel .contents .message>div.cat>div:active{
    transform: scale(0.99) translateZ(0);
    transition:transform 150ms cubic-bezier(0.41, 0.23, 0.9, 1.75);
    background:#AAA;
}
.history-panel .contents .message>div.cat>div:first-of-type{border-top-left-radius: 2px;}
.history-panel .contents .message>div.user>div{
    background:#8cc4d2;
    max-width: calc(100% - 100px);
    text-align: left;
}
.history-panel .contents .message>div.user>div:first-child{border-top-right-radius: 2px;}
.history-panel .contents .message>div>div b{color:#9a33c5;}
/* .history-panel .contents .message>div>div c{color:#e719c5;font-weight:900;} */
.history-panel .contents .message>div.button-group{
    line-height:30px;
    margin-top: 5px;
    text-align: right;
    padding-right: 10px;
}
.history-panel .contents .message>div.button-group>button{
    padding: 5px 10px;
    font-size: 13px;
    border: 0;
    background: #4d4d4d;
    margin-left:5px;
}
.history-panel .contents .message>div.button-group>button::before{
    vertical-align: bottom;
    width: 18px;
    height: 18px;
}
.history-panel button.btn-share::before{background-image: url('/img/svg/icon_send.svg');background-size: 14px;}
.history-panel button.btn-delete::before{background-image: url('/img/svg/google_icon_delete.svg');}
.history-panel .contents .message .card{
    display:inline-block;
    transform: scale(1.0);
    width: 60px;
    height: 90px;
}
.history-panel .contents .message .card:hover{
    transform: scale(1.1) translateY(-5px);
    transition: transform 200ms cubic-bezier(0.42, 0, 0.62, 2.06);
    cursor: zoom-in;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.6);
}
.history-panel .contents .message .card+.card{margin-left: 5px;}
.history-panel .contents .message .card>.inner{border-radius: 5px;}
.history-panel .contents .nothing{padding-top: 60px;}
.history-panel .contents .inner:empty{
    cursor:progress;
    height: 100%;
}
.history-panel .contents .inner:empty::before{
    content:'';
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:100px;
    left:calc(50% - 20px);
    background:url('/img/svg/google_icon_progress.svg');
    background-repeat:no-repeat;
    background-size:100%;
    opacity:0.5;
    animation:ani-spin 1000ms linear;
    animation-iteration-count:infinite;
}


.bubble-panel{
    /* display:none; */
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    opacity:0;
    pointer-events:none;
}
.bubble-panel.show{
    /* display:block; */
    opacity:1;
    pointer-events:auto;
}
.bubble{
    position:absolute;
    left: 50%;
    top: 300px;
    color: #FFF;
    cursor: pointer;
    opacity:0;
}
.bubble-panel.show .bubble{
    opacity:1;
}
.bubble>div{
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: radial-gradient(ellipse at center,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 70%);
    box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.3), inset 10px 10px 10px rgba(255, 255, 255, 0.2), 1px 1px 5px 1px rgba(0, 0, 0, 0.9), 0 0px 5px rgba(255, 255, 255, 0.25), 0 0px 20px rgb(249 170 255 / 50%), 0 0px 40px rgb(255 255 255 / 20%),  0 0px 70px rgb(255 255 255 / 10%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    animation-name:ani-bubble;
    animation-duration:5000ms;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    transform: translateZ(0);
}
@keyframes ani-bubble{
    0%{
        transform:translate3d(0,0,0) scale(1);
    }
    25%{
        transform:translate3d(0,5px,0) scale(1.02);
    }
    50%{
        transform:translate3d(0,0,0) scale(1);
    }
    75%{
        transform:translate3d(0,-5px,0) scale(0.98);
    }
    100%{
        transform:translate3d(0,0,0) scale(1);
    }
}
.bubble>div::before{
    content:"";
    width: 60px;
    height: 60px;
    display:inline-block;
    background: radial-gradient(black, transparent);
    background-image:url('/img/google-gemini-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    border-radius: 50%;
    animation-name:ani-spin;
    animation-duration:50000ms;
    animation-fill-mode:both;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    position: absolute;
    z-index: 1;
    vertical-align: middle;
    left: calc(50% - 30px);
}
.bubble>div::after{
    content:"";
    width: 100%;
    height: 100%;
    display:inline-block;
    background: radial-gradient(#ffffff78, transparent 36%);
    border-radius: 50%;
    position:absolute;
    z-index: 0;
    left: 0;
}
.bubble span{
    position: absolute;
    z-index:2;
    pointer-events: none;
    transform: translateX(-50%);
    left: 50%;
    top: 40px;
    text-shadow: 0 0 5px black;
    font-size: 13px;
    width: 140px;
    text-align: center;
    line-height: 18px;
}

.bubble-panel>.bubble{
    transition-property: transform, opacity;
    transition-duration: 1500ms, 1000ms;
    transition-timing-function: ease-in-out, linear;
}

.bubble-panel>.bubble:nth-child(1){
    transform: translate3d(50px, 100px, 0);
    transition-delay:0ms;
}
.bubble-panel>.bubble:nth-child(2){
    transform: translate3d(-100px, -70px, 0);
    transition-delay:100ms;
}
.bubble-panel>.bubble:nth-child(3){
    transform: translate3d(-210px, 0px, 0);
    transition-delay:200ms;
}
.bubble-panel>.bubble:nth-child(4){
    transform: translate3d(120px, -30px, 0);
    transition-delay:300ms;
}
.bubble-panel>.bubble:nth-child(5){
    transform: translate3d(200px, 50px, 0);
    transition-delay:400ms;
}
.bubble-panel>.bubble:nth-child(6){
    transform: translate3d(-150px, 100px, 0);
    transition-delay:500ms;
}
.bubble-panel>.bubble:nth-child(7){
    transform: translate3d(-300px, 50px, 0);
    transition-delay:600ms;
}
.bubble-panel>.bubble:nth-child(8){
    transform: translate3d(-300px, -50px, 0);
    transition-delay:700ms;
}
.bubble-panel>.bubble:nth-child(9){
    transform: translate3d(300px, -100px, 0);
    transition-delay:800ms;
}
.bubble-panel>.bubble:nth-child(10){
    transform: translate3d(200px, 150px, 0);
    transition-delay:900ms;
}
.bubble-panel>.bubble:hover>div{
    transform:scale(1.1);
    transition:transform 200ms cubic-bezier(0.42, 0, 0.6, 1.84);
    animation-name: none;
}
.bubble-panel>.bubble.selected>div{
    transform:scale(0);
    transition: transform 200ms cubic-bezier(1, -0.84, 0.58, 1);
}

.bubble-panel>.bubble:nth-child(1)>div{
    animation-delay:0ms;
}
.bubble-panel>.bubble:nth-child(2)>div{
    animation-delay:200ms;
}
.bubble-panel>.bubble:nth-child(3)>div{
    animation-delay:400ms;
}
.bubble-panel>.bubble:nth-child(4)>div{
    animation-delay:600ms;
}
.bubble-panel>.bubble:nth-child(5)>div{
    animation-delay:800ms;
}
.bubble-panel>.bubble:nth-child(6)>div{
    animation-delay:1000ms;
}
.bubble-panel>.bubble:nth-child(7)>div{
    animation-delay:1200ms;
}
.bubble-panel>.bubble:nth-child(8)>div{
    animation-delay:1400ms;
}
.bubble-panel>.bubble:nth-child(9)>div{
    animation-delay:1600ms;
}
.bubble-panel>.bubble:nth-child(10)>div{
    animation-delay:1800ms;
}

.bubble-panel>.bubble:nth-child(2)>div::before{
    animation-delay:500ms;
    animation-duration:30000ms;
    animation-direction:reverse;
}
.bubble-panel>.bubble:nth-child(3)>div::before{
    animation-delay:800ms;
    animation-duration:40000ms;
}
.bubble-panel>.bubble:nth-child(4)>div::before{
    animation-delay:1200ms;
    animation-duration:34000ms;
    animation-direction:reverse;
}
.bubble-panel>.bubble:nth-child(5)>div::before{
    animation-direction:reverse;
}
.bubble-panel>.bubble:nth-child(8)>div::before{
    animation-direction:reverse;
}




.copyright{
    position: fixed;
    bottom: 0px;
    bottom: calc(0px + env(safe-area-inset-bottom) / 2);
    padding-bottom: 3px;
    width:100%;
    pointer-events: none;
    text-align: center;
    z-index: 100;
    letter-spacing: -1px;
    font-size: 12px;
    color: #CCC;
    text-shadow: 0px 1px 1px black,
        0px 0px 3px black, 0px 0px 5px black,
        0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black;
}
.copyright::before{content:'ⓒ2024 TAROTMASTERCAT. All Rights Reserved.';}
.version{font-size:10px;color:#FFF;}


.star{
    position:absolute;
    z-index:999;
    width: 100%;
    height:30px;
    top:160px;
    pointer-events:none;
    opacity:0;
    transition:opacity 300ms linear;
}
.star>div{
    position:absolute;
    width:30px;
    height: 30px;
    right:50%;
    margin-right:-15px;
}
.star>div::before{
    content:'';
    position:absolute;
    transform:translate3d(-50%,-50%,0);
    left:50%;
    top:50%;
    width:200%;
    height:200%;
    background:radial-gradient(rgba(255,255,255,0.5) 5% ,rgb(255 0 0 / 0%) 60% );
    display:block;
    animation-name:ani-blink;
    animation-timing-function:linear;
    animation-duration:2000ms;
    animation-iteration-count:infinite;
}
.star>div::after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    display:block;
    background-image:url('/img/gemini_star_w.svg');
    background-repeat:no-repeat;
    animation-name:ani-spin;
    animation-timing-function:linear;
    animation-duration:3000ms;
    animation-iteration-count:infinite;
}
.star.history{
    animation-name:ani-star-down;
    animation-duration: 1200ms;
    animation-iteration-count:1;
    top: 11px;
}
.star.history>div{
    animation-name:ani-star-right;
    animation-duration: 1200ms;
    animation-iteration-count:1;
    right: 25px;
}
.star.bubble-star{
    width: 30px;
    margin-top: calc(15px - env(safe-area-inset-top));
    margin-left: 15px;
    top: calc(550px + env(safe-area-inset-top));
    left: calc(50% - 30px);
    transform:scale(0);
    transition: top 300ms linear, left 300ms linear,
        opacity 200ms linear 300ms, transform 200ms linear 300ms;
}
.star.bubble-star.show{
    opacity: 1;
    transform:scale(1);
    transition: opacity 200ms linear, transform 200ms cubic-bezier(0.42, 0, 0.66, 2.25);
}

@keyframes ani-spin {
    0% {transform:rotateZ(0deg)}
    100% {transform:rotateZ(360deg)}
}
@keyframes ani-star-down{
    0%{
        top:160px;
        opacity:1;
    }
	20%{
    	top:300px;
    	animation-timing-function: ease-out;
        opacity:1;
    }
    90%{
        top:11px;
    	animation-timing-function: ease-in;
        opacity:1;
    }
    100%{
        top:11px;
        opacity:0;
    }
}
@keyframes ani-star-right{
    0%{
        right:50%;
    }
    90%{
        right:25px;
    	animation-timing-function: ease-out;
        transform:scale(1);
    }
    100%{
        right:25px;
        transform:scale(2);
    }
}

/* .cat-message{
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-user-select: text;
} */
.loading+.cat-message{cursor:progress;}

@media screen and (max-height: 710px){
    .input-area.show{
        top: initial;
        position: fixed;
        bottom: 25px;
    }
    .splash-panel{padding-top: 20px;padding-bottom: 60px;}
    .star.bubble-star{top: calc(100% - 150px);}
    .splash-panel .language{padding-top: 30px;padding-bottom: 20px;}
}
@media screen and (max-width: 534px){
    .title{top:20px;}
    .bubble>span{letter-spacing:-1px}
    .history-panel .btn-close{
        left:unset;
        right: 6px;
    }
    .bubble-panel>.bubble:nth-child(n+8){display:none;}
}
@media screen and (max-width: 430px){
    .splash-panel .desc{font-size:16px;}
    .history-panel>.inner{max-width:100%;}
}
@media screen and (max-width: 344px){
    .title{font-size: 40px;}
    .background{
        transform: scale(0.85);
        width: 120%;
        height: 120%;
        margin-left: -10%;
        margin-top: -10%;
    }
    .cat-message{
        width: 300px;
        margin-left: -150px;
        font-size: 15px;
    }
    .splash-panel .desc{
        font-size:15px;
        letter-spacing:-1px
    }
    .copyright{font-size:11px;}

    .history-panel .contents .message>div.user>div{max-width: calc(100% - 70px);}
    .history-panel .contents .message>div.cat{padding-left: 45px;}
    .history-panel .contents .message>div.cat::after{
        width: 36px;
        height: 36px;
        left: 3px;
    }
    .history-panel .contents .message>div.cat>div{max-width: calc(100% - 30px);}
    .bubble-panel>.bubble:nth-child(n+5){display:none;}
    .card-description>.box{width: 95%;}
}
@media screen and (min-height: 900px) and (min-width: 600px){
    .background{
        transform: scale(1.2);
        margin-top: 100px;
        height: 1000px;
    }
    .input-area{top: 650px;}
    .star.bubble-star{top: calc(650px + env(safe-area-inset-top));}
    .card-description>.box{top: 400px;}
    .user-message{top: 540px;}

    .bubble-panel>.bubble:nth-child(1){transform: translate3d(80px, 180px, 0);}
    .bubble-panel>.bubble:nth-child(2){transform: translate3d(-130px, -70px, 0);}
    .bubble-panel>.bubble:nth-child(3){transform: translate3d(-210px, 40px, 0);}
    .bubble-panel>.bubble:nth-child(4){}
    .bubble-panel>.bubble:nth-child(5){transform: translate3d(250px, 90px, 0);}
    .bubble-panel>.bubble:nth-child(6){transform: translate3d(-200px, 200px, 0);}
    .bubble-panel>.bubble:nth-child(7){transform: translate3d(-300px, 120px, 0);}
    .bubble-panel>.bubble:nth-child(8){transform: translate3d(-380px, 0px, 0);}
    .bubble-panel>.bubble:nth-child(9){transform: translate3d(300px, 0px, 0);}
    .bubble-panel>.bubble:nth-child(10){transform: translate3d(250px, 250px, 0);}
}



.test-text{
    position:absolute;
    z-index:9999;
    top:140px;
    width:100%;
    pointer-events:none;
    text-align:center;
    color:#FFF;
    font-size:20px;
    text-shadow:1px 1px 5px black;
    font-weight:900;
}


body[lang="ja"] .cat-message{
    letter-spacing:-1px;
    font-size: 16px;
}
body[lang="ja"] .input-area textarea{
    font-size: 14px;
    letter-spacing: -1px;
}
body[lang="vi"] #btn-start-mute{
    letter-spacing: -1px;
    font-size: 16px;
    padding-left: 50px;
}


.rotate-panel{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:999;
    background:#000108;
    background-image:url('/img/logo_gray.png');
    background-position-y: 20px;
    background-position-x:center;
    background-size: 200px;
    background-repeat:no-repeat;
    display:none;
}
.rotate-panel::before{
    content:'';
    display:block;
    width: 50px;
    height: 80px;
    background-image:url('/img/svg/google_icon_phone.svg');
    background-repeat:no-repeat;
    background-position-y: -10px;
    background-position-x: -15px;
    background-size: 80px 100px;
    position: absolute;
    opacity:0.6;
    top: 200px;
    left: 50%;
    animation-name:ani-phone-rotate;
    animation-fill-mode:both;
    animation-duration:2000ms;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
}
@keyframes ani-phone-rotate{
    0%{
        transform-origin: left bottom;
        transform:rotate(-90deg);
    }
    30%{
        transform-origin: left bottom;
        transform:rotate(-90deg);
    }
    60%{
        transform-origin: left bottom;
        transform:rotate(0deg);
    }
    100%{
        transform-origin: left bottom;
        transform:rotate(0deg);
    }
}
@media screen and (max-height: 430px) and (min-width: 600px){
    .rotate-panel{
        display:block;
    }
}

.description-site{/* opacity:0; */pointer-events:none;text-align: center;line-height: 24px;}
.click-cursor{
    position:fixed;
    top:50%;
    left:50%;
    height:40px;
    width:40px;
    margin-left:-20px;
    margin-top: -30px;
    background:url('/img/icon_paw_w.svg') no-repeat;
    opacity:0;
    filter: drop-shadow(1px -1px 2px rgb(118 52 161 / 68%)) drop-shadow(-1px 1px 2px rgb(255 155 244 / 67%));
    -webkit-filter: drop-shadow(1px -1px 2px rgb(118 52 161 / 68%)) drop-shadow(-1px 1px 2px rgb(255 155 244 / 67%));
    animation-name:ani-cursor;
    animation-duration:1200ms;
}
body.iOS .click-cursor,body.Android .click-cursor{margin-top: -40px;}
@keyframes ani-cursor{
    0%{
        opacity:0.6;
        transform:translateZ(0) scale(1.0);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 2.27);
    }
    5%{
        opacity:0.3;
        transform:translateZ(0) scale(0.8);
    }
    100%{
        opacity:0;
        transform:translateZ(0) scale(1.3);
        animation-timing-function: linear;
    }
}
#click-cursor-area{
    position:fixed;
    z-index:111;
    pointer-events:none;
}

.popup{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.5);
    display:none;
}
.popup.show{
    display:block;
}
.popup>.inner{
    width:300px;
    min-height: 300px;
    background:#121216;
    border-radius:10px;
    position:absolute;
    left:calc(50% - 150px);
    top: 20%;
    border:1px solid #333;
    box-shadow:-5px 5px 5px 0px rgba(0,0,0,1);
    text-align:center;
    /* padding-top: 10px; */
    padding-bottom: 20px;
    line-height: 45px;
    font-size:14px;
    overflow: hidden;
}
.popup>.inner a{
    text-decoration:underline;
    color:#AAA;
}
.popup>.inner h2{
    /* border-bottom: 1px solid #292929; */
    /* padding-bottom:5px; */
    margin-bottom:10px;
    font-weight: 300;
    background: #1b1b1b;
}
.popup>.inner .drag-area{
    width:90%;
    margin:5px auto;
    height:100px;
    border:2px dashed #444;
    background:#222;
    line-height:90px;
    color:#666;
}
.popup>.inner .drag-area.over{
    border-color: #999;
    color: #999;
    background: #333;
}
.popup>.inner .drag-area::before{
    content:'Drag here';
}
.popup>.inner .drag-area.droped{
    border:1px solid #777777;
    color: #989898;
    background: #000000;
    font-size:20px;
    font-weight:100;
}
.popup>.inner .drag-area.droped::before{
    content:'Droped';
}
input{
    border:1px solid #999;
    vertical-align: middle;
}
input::placeholder{color:#333;}
input[type=text],input[type=password],input[type=submit],
input[type=button],input[type=email]{
    background:#777;
    height:28px;
    width:160px;
    border-radius:3px;
    padding:5px;
}
input[type=submit],input[type=button]{
    background:#222;
    border-color:#333;
    color:#999;
    height:36px;
    cursor: pointer;
}
input[type=submit]:hover,input[type=button]:hover{background: #444;}
input[type=submit]:active,input[type=button]:active{
    background:#111;
    transform:translateY(1px);
}
input[type=text]:focus,input[type=password]:focus{background:#DDD;}