@charset "UTF-8";

:root{
  --primary : var(--bs-primary, var(--falcon-primary, #2563eb));
  --shadow : 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-sm : 0 2px 6px rgba(0, 0, 0, 0.10);
  --btn-shadow-inset : inset 2px 2px 6px rgba(255,255,255,0.25), inset -2px -2px 6px rgba(0,0,0,0.08);
  --hover-btn-shadow-inset : inset 1px 1px 4px rgba(255,255,255,0.20), inset -1px -1px 4px rgba(0,0,0,0.06);
}

#chat_pop_wrap a:hover,
#chat_pop_wrap a:focus{text-decoration: none}
#chat_pop_wrap ul{list-style: none; margin: 0; padding: 0}
#chat_pop_wrap button{border:0; cursor:pointer;}
#chat_pop_wrap h1,
#chat_pop_wrap h2,
#chat_pop_wrap h3,
#chat_pop_wrap h4,
#chat_pop_wrap h5,
#chat_pop_wrap h6{margin: 0;}
#chat_pop_wrap section{paddin: 0}
#chat_pop_wrap pre{margin:0; padding:0; font:inherit; white-space:pre-wrap; word-break:break-word;}
#chat_pop_wrap textarea{min-width: 0}



/* common */
.button{display: block; font-size: 12px; height: 36px; border-radius: 18px; background: var(--primary); color: #fff; padding: 0 1rem; box-shadow: var(--btn-shadow-inset); transition: all .3s; display: flex; align-items: center; justify-content: center}
.button:hover{color: #fff; background: var(--primary); box-shadow: var(--btn-shadow-inset); }
.button.white{background: #fff; color : #333; }
.button.white.border{border: 1px solid var(--primary) !important;}
.button.primary{background: var(--primary);}
.button.dark{background: #333; color: #fff; }
.button.border-dark{border: 1px solid #999 !important; background: #fff; color : #333; font-weight: bold}
.button.danger{background: #e72222; color: #fff; }
.button.success{background: #06A3DA; color: #212529; }

#chat_pop_wrap{padding: 0}

#chat_warp{opacity: 0; transform: scaleY(0) scaleX(0.5); pointer-events: none; transition: all .3s; transform-origin: bottom right; height: 100dvh; z-index: 9999; position: fixed; bottom: 0; right: 0; box-shadow: var(--shadow); z-index:10000; min-width: 300px; background: linear-gradient(135deg, #ffffff 0%, #f2f6ff 100%); overflow: hidden; height: 100%; display: flex; flex-direction: column; width: 100%;  }
#chat_warp.show{opacity: 1; transform: scale(1); pointer-events: auto;}


/* chat_warp_header */
#chat_warp_header{background: #f9f9f9; display: flex; align-items: center; padding: 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; justify-content: space-between}
#chat_warp_header h5{font-size: 16px; margin-bottom: 4px; color: #222; }
#chat_warp_header h5 .able_chk{display: inline-block; transform: translateY(-2px); margin-left: 8px}
#chat_warp_header h5 .able_chk .dot{width: 8px; height: 8px; border-radius: 50%; background: red; display: inline-block; margin-right: 0}
#chat_warp_header h5 .able_chk .dot.able{background: green;}
#chat_warp_header h5 .able_chk .dot+span{font-size: 11px; font-weight: normal}
#chat_warp_header .able_time{color: #999; font-weight: normal !important; font-size: 11px; }

.chat_close_btn{position:relative; width:24px; height:24px; display:inline-block; cursor:pointer;}
.chat_close_btn::before,
.chat_close_btn::after{content:""; position:absolute; top:50%; left:50%; width:20px; height:1px; background:#999; transform-origin:center;}
.chat_close_btn::before{transform:translate(-50%,-50%) rotate(45deg);}
.chat_close_btn::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* chat_warp_body */
#chat_warp_body{fleX: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; scroll-behavior:smooth}

/*
#chat_cate_select{display: flex; align-items: center; justify-content: center; flex-direction: column; gap : 8px; padding: 16px; }
#chat_cate_select h5{font-size: 16px; margin-bottom: 8px; }
#chat_cate_select a{display: block; font-size: 12px; height: 36px; line-height: 36px; border-radius: 18px; background: var(--primary); color: #fff; padding: 0 1rem; box-shadow: var(--btn-shadow-inset); transition: all .3s; }
#chat_cate_select a:hover{color: #fff; background:#058FC0; box-shadow: var(--btn-shadow-inset); }
*/


#file_add_icon_box{position: relative; flex-shrink: 0; align-self: center; }
#file_add_icon{display: flex; align-items: center; justify-content: center; width: 32px;; height: 32px; color:  inherit}
#file_add_icon.on svg{color: var(--primary)}
#file_add_pop{position: absolute; bottom: 0; right: 0; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 8px; border: 1px solid #eee; z-index: 2; border-radius: 8px; width: fit-content; }
#file_add_pop li a{display: block; padding: 8px 16px; white-space: nowrap; }
#file_add_pop li a h6{font-size: 13px}
#file_add_pop li.file_del_box a h6{color: red; }

#send_btn{background: var(--primary); display: block; padding: .5rem 1rem; color : #fff; box-shadow:inset 0 -3px 6px rgba(0,0,0,0.18); transition:0.2s;}


.rotate-y{animation: rotateY 3s ease-in-out infinite; transform-style: preserve-3d;}

@keyframes rotateY {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

#chat_pop_wrap .chat_list{padding : 16px;  flex:1; overflow: auto}
#chat_pop_wrap .chat_list::-webkit-scrollbar{display: none}
.chat_item{display : flex; margin-top : 16px; position :  relative; }
.chat_item:first-child{margin-top: 0}
.chat_item .bubble img{max-width: 200px}

.chat_item.me{justify-content : flex-end; }
.chat_item.me+.chat_item.me{margin-top :  4px; }
.chat_item.you{justify-content : flex-start; }
.chat_item.you+.chat_item.you{margin-top :  4px; }
.chat_item .bubble{max-width : 70%; padding : 10px 14px; border-radius : 16px; line-height : 1.4;  position : relative; font-size: 13px; }
.chat_item.me .bubble{background : #2563eb; color : #fff; border-bottom-right-radius : 4px; }
.chat_item.you .bubble{background : #f1f3f5; color : #111; border-bottom-left-radius : 4px; }

.chat_item .time{color : #999; position : absolute; bottom : 0; font-size : 11px; opacity : 1; transition : all .3s .5s; white-space: nowrap}
.chat_item.me .time{left : 0; transform : translateX(-100%); margin-left: -8px}
.chat_item.you .time{left : 100%; margin-left: 8px}
.chat_item:hover .time{opacity: 1; transition: all .3s; }
.chat_item .bubble .re_select{color: var(--primary); margin-top: 8px; display: block; font-size: 12px}

.chat_item.end{justify-content: center; background: #fff; font-size: 12px; position: relative}
.chat_item.end::after{content: ""; display: block; width: 100%; height: 1px; background: #999; position: absolute; top: 50%;
  left: 0; transform: translateY(-50%); z-index: 1}
.chat_item.end span{position: relative; background: #fff; display: inline-block; padding: 0 8px; z-index: 2}
.after_cate_select{display: flex; gap: 4px; flex-wrap: wrap; margin-top: 16px}
.after_cate_select .button{height: 32px; border-radius: 16px; }

#chat_input_box{display: flex; background: #fff; padding: 8px; border-top: 1px solid #eee; align-items: center}
#chat_input_box.hide{display: none}
#chat_comment{flex: 1; padding: 0; padding-left: 16px; overflow: auto; border: none; border-radius: 8px; font-size: 14px; resize: none; align-self: flex-start; height: 28px; background: #fff; color: #222; }
#chat_comment:focus{outline: none }
#chat_comment::-webkit-scrollbar{display: none; }
#file_add_icon_box{position: relative; flex-shrink: 0}
#file_add_icon_box a .icon{color: inherit; }
#file_add_pop{position: absolute; bottom: 100%; left: 0; background: #fff; box-shadow: var(--shadow-sm); border-radius: 8px; margin-bottom: 8px; z-index: 2}
#file_add_pop li a{display: block; padding: 12px 16px; white-space: nowrap; }
#file_add_pop li.file_del_box a h6{color: red; }
#chat_send_btn{padding: 0px 12px; font-size: 12px; border-radius: 18px; color : #fff; display: flex; align-items: center; justify-content: center; height: 32px; background: #999; pointer-events: auto; }
#chat_send_btn.able{background: var(--primary); pointer-events:}

/*
#chat_off_modal{position: absolute; top: 0; left: 0; width: 100%; padding: 1rem;}
#chat_off_modal .modal_content{ background: rgba(255,255,255,1); box-shadow: var(--shadow); border-radius: 16px; position: relative}
#chat_off_modal .modal_header{padding: 1rem; border-bottom: 1px solid #eee; }
#chat_off_modal .modal_header h5{font-size: 14px; color: red; }
#chat_off_modal .modal_header span{font-size: 12px; color: #999; line-height: 1}
#chat_off_modal .modal_body{padding: 1rem;}
#chat_off_modal .modal_body pre{font-size: 13px; }
#chat_off_modal .chat_close_btn{position: absolute; top: 0; right: 0; margin: 8px; }
*/

#new_chat_alert{position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 0); animation: floatUpDown 2.5s ease-in-out infinite; opacity: 0; z-index: -1; display: block; }
#new_chat_alert.on{margin-bottom: 60px; z-index: 1; opacity: 1}
.admin #new_chat_alert.on{margin-bottom: 120px; }
#new_chat_alert>*{background: #fff; padding: 0 1rem; border-radius: 20px; height: 40px; line-height: 40px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); color: #222; }

#help_btn{background:#fff; padding:8px 10px; border-radius:50rem; display:flex; align-items:center; gap:0.5rem; box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.075); width:fit-content; text-decoration:none; margin: 16px; margin-left:auto; position: fixed; bottom: 0; right: 0; z-index: 1}
#help_btn.on{animation: yellowPulse 1.2s ease-out infinite;}
#help_btn .icon{display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 20px; height: 20px; background: linear-gradient(135deg, rgb(230, 55, 87), rgb(255, 180, 170));}
#help_btn .icon span{font-size: 12px; color: #fff; }
#help_btn h6{font-size: 12px; color: #222; }


@keyframes floatUpDown {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -4px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}



/* 최고관리자 */
#chat_pop_wrap.admin{background: #fff; height: 100dvh; overflow: auto; position: fixed;bottom: auto; right: auto; top: 0; left: 0; width: 100vw; display: flex; flex-direction: column; max-width: none}

#chat_pop_wrap.admin #chat_mem{position: sticky; top: 0; left: 0; background: #fff; padding: 1rem; width: 100%; border-bottom: 1px solid #eee; z-index: 1}
#chat_pop_wrap.admin #chat_comment_box{position: sticky; bottom: 0; left: 0; width: 100%; background: #fff; padding: 1rem; border-top : 1px solid #eee; }
#chat_pop_wrap.admin #chat_comment_group{display: flex; align-items: center; }
#chat_pop_wrap.admin #chat_comment{box-sizing: border-box; resize: none; outline: none; font: inherit; line-height: inherit; width: 100%;flex: 1; padding: .75rem 1rem; padding-right: 0; margin-right: 4px; min-width: 0; height: 75px;}
#chat_pop_wrap.admin #chat_comment::-webkit-scrollbar{display: none}


@media (width >= 768px) {
  #chat_warp{height: 500px; order-radius: 16px; margin: 1rem; max-width: 375px; border-radius: 16px}
}

@keyframes yellowPulse {
  0%   {box-shadow:0 0 0 0 rgba(255,193,7,.7); }
  70%  {box-shadow:0 0 0 10px rgba(255,193,7,0); }
  100% {box-shadow:0 0 0 0 rgba(255,193,7,0); }
}