:root{
	--chat-co-op-color1:rgba(255, 255, 255, 0.4);
}

:root[color-theme="light"]{
	--chat-co-op-color1:rgba(0, 0, 0, 0.5);
}

html, body{height:100dvh;height:100vh;}

/* 채팅 페이지 전체 컨테이너 (바디) */
.borichat_chat{max-width:600px;height:100vh;background-color:var(--sub-bg-color2);margin:0 auto;}

/* 배경 이미지 */
.borichat_chat_bgbox{position:absolute;position:fixed;top:0;left:0;right:0;max-width:600px;width:100%;height:100%;/* height:100dvh; */margin:0 auto;}
.borichat_chat_bg{width:100%;height:100%;object-fit:cover;opacity:0.5;user-select:none;-webkit-user-drag:none;pointer-events:none;}

/* 채팅 컨테이너 */
.chat_container{height:100%;}

/* 채팅 헤더 */
.chat_header{position:sticky;top:0;padding:10px var(--pd-side);height:68px;background-color:var(--main-bg-color-op7);z-index:6;}

/* 채팅 내용 부분 */
.chat_contents{position:fixed;top:68px;left:0;right:0;max-width:600px;width:100%;height:calc(100% - 68px);padding:12px 10px 70px;/* flex:1 1 100%; */line-height:1.5;overflow:hidden auto;overflow-y:scroll;-webkit-overflow-scrolling:touch;/* overscroll-behavior:contain; */margin:0 auto;}
.chat_contents.pdb-spacing{padding-bottom:120px;}
.chat_contents.in-app{position:relative;top:auto;left:auto;right:auto;height:auto;}
[data-mode="chatSelect"] .chat_contents{padding-bottom:110px;}
.chat_date_disp{margin:10px 0;}
.chat_date_disp:before, .chat_date_disp:after{content:"";display:block;height:1px;background-color:#FFF;align-self:center;flex:1 1 auto;}
.chat_date_disp_in{max-width:80%;padding:0 0.75rem;}
/* 채팅 내용 - 지문 */
.bubble_narrative{width:100%;padding:0.625rem 0.938rem 0.563rem;border-radius:5px;background-color:rgba(242, 242, 242, 0.6);background-color:rgba(54, 54, 54, 0.8);color:#FFF;text-align:center;}
.bubble_narrative.bg_op5{background-color:rgba(54, 54, 54, 0.3);}
/* 채팅 내용 - 대화 */
.chatbubble_thumb{width:36px;height:36px;border-radius:50%;margin-right:4px;}
.chatbubble_thumb.wdt36{width:36px;height:36px;}
.chatbubble_thumb_img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center top;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.chatbubble_cons:has(.chatbubble_line.user){max-width:calc(100% - 40px);}
.chatbubble_line{padding:0.438rem 0.75rem;border-width:1px;border-style:solid;word-break:break-word;}
.chatbubble_line.character{border-radius:0 10px 10px 10px;background-color:var(--ai-chatbubble-bg, rgba(255, 255, 255, 0.7));border-color:rgba(204, 204, 204, 0.7);color:#000;}
.chatbubble_line.user{border-radius:10px 0 10px 10px;background-color:var(--theme-color);border-color:var(--theme-color);color:#FFF;margin-left:auto;}
.chatbubble_line.notice{width:100%;padding:0;border-radius:10px;background-color:var(--ai-chatbubble-bg, rgba(255, 255, 255, 0.7));border-color:var(--line-btn-color);}
.chatbubble_line em{font-style:italic;color:#DADADA;}
.chatbubble_line.character em{color:inherit;opacity:0.55;}

.chatbubble_line .invalid_chat{color:#FF3E3E;}
.invalid_chat_ico{position:relative;border-radius:1em;width:1em;height:1em;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;flex-shrink:0;vertical-align:-1px;}

.chatbubble_date{min-width:32px;color:var(--chat-co-op-color1, rgba(0, 0, 0, 0.4));}

.chat_top_thumb_wrap{position:relative;border-radius:5px;overflow:hidden;align-self:flex-start;margin-bottom:0.438rem;}
.chat_top_thumb_wrap:has(.chat_top_thumbnail.before-load:not(.no-max-hgt)){max-width:300px;height:350px;overflow:hidden;}
.chat_top_thumb_wrap:has(.chat_top_thumbnail.before-load) :where(.chat_top_thumbnail, .chat_thumb_logo *){opacity:0;}
.situationImgCont:has(.imgHide){display:none !important;}
.chat_top_thumb_wrap:has(.chat_thumb_logo):before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(23, 24, 24, 0.2);border-radius:4px;backdrop-filter:blur(8px);}
.chat_top_thumbnail{max-width:100%;height:auto;max-height:350px;border-radius:5px;object-fit:contain;object-position:0 0;}
.chat_top_thumbnail.before_pcs{width:250px;min-height:300px;object-fit:cover;}
.chat_top_thumbnail.no-max-hgt{max-height:none;}
.chat_top_thumbnail.mgb{margin-bottom:0.438rem;}
.chat_thumb_logo{position:absolute;top:0;bottom:0;left:0;right:0;width:calc(100% - 24px);margin:auto;}
.chat_thumb_logo .logo_img{max-width:170px;margin:0 auto;}
.chat_thumb_img_unlock_btnct{position:absolute;bottom:0;left:0;}
.chat_thumb_img_unlock_btn{max-width:160px;width:100%;border-radius:25px;transition-property:transform, box-shadow;transition-duration:0.25s;}

.chat_img_pcs_layer{top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.15);border-radius:4px;backdrop-filter:blur(5px);}
.chat_img_pcs_layer .center_cc{border-radius:50%;width:80px;height:80px;background-color:var(--sub-bg-color4);font-size:36px;padding-left:2px;box-shadow:0 0 5px rgba(0, 0, 0, 0.12);}
.chat_img_pcs_layer .center_cc:not(.no_tranform){transform:translate3d(0, -42%, 0);}
.chat_img_pcs_layer .center_cc svg{filter:drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.12));}
.chat_img_pcs_bt{bottom:0;left:0;right:0;width:calc(100% - 26px);max-width:200px;margin:0 auto 40px;}

.chatbubble_ctrs{flex-wrap:wrap;}
.chatbubble_ctr_btn{width:24px;height:24px;border-radius:24px;background-color:var(--sub-bg-color3);flex-shrink:0;color:var(--sub-color7);}
.chatbubble_ctr_btn.co_red{color:var(--red-color);}
.chatbubble_ctr_btn:not([disabled]).active{color:var(--sub-color6);}
.chatbubble_ctr_box{width:auto;height:24px;border-radius:24px;background-color:var(--sub-bg-color3);flex-shrink:0;color:var(--sub-color7);}
.chatbubble_ctr_btn:where([disabled], .disabled){cursor:default;cursor:not-allowed;}
.chatbubble_ctr_icon{width:12px;height:12px;fill:currentColor;margin:auto;}

.chat_loader{margin:0.5em 0;}
.chat_loader_it{width:0.5em;height:0.5em;border-radius:50%;flex-shrink:0;background-color:currentColor;opacity:0.5;animation:chat-pulse 0.8s infinite;}
.chat_loader_it:nth-child(odd){animation-delay:-0.35s;}

@keyframes chat-pulse{
	50% {
			-webkit-transform: translate3d(0, -32%, 0);
			transform: translate3d(0, -32%, 0);
			animation-timing-function:cubic-bezier(0.5, 0, 0.8, 1);
	}
}

/* 유료모드 안내 대화 */
.conv_free_notice{padding:0.429em 1.071em;background-color:var(--sub-bg-color14);border-radius:54px;}
.conv_free_notice:where(.freeMdNoti){padding:0.7em 1.7em;border-radius:10px;gap:0.357em;background-color:var(--sub-bg-color16, #EEE);box-shadow:rgba(0, 0, 0, 0.12) 0px 3px 1px -2px, rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 1px 5px;}
.conv_free_notice svg{height:0.873em;aspect-ratio:8.4 / 12.22;fill:currentColor;opacity:0.55;}
.freeMdNoti_btn{padding:0.429em 1.071em;background-color:#141414;border-radius:140px;color:#FFF;transition:transform 0.2s;}

.chat_pannel{position:fixed;bottom:0;left:0;right:0;max-width:600px;width:100%;z-index:6;margin:0 auto;}
.chat_controls{padding:10px;}
.chatctr_40_btn{width:40px;height:40px;background-color:var(--sub-bg-color8);border-radius:50%;color:var(--sub-color6);}
.chatctr_40_btn svg{width:16px;height:16px;fill:currentColor;margin:auto;}
.chatctr_40_btn svg.icon_airplane{transform:translateX(1px);}
.chatctr_40_btn svg.ico_lightning{width:100%;height:100%;fill:none;}
.chatctr_40_btn.bg_theme{background-color:var(--theme-color);color:#FFF;}
.chatctr_40_btn.bg_theme_org{background-color:var(--theme-orange);color:#FFF;}
.chatctr_40_btn[disabled]{background-color:#B1B1B1;color:#F4F4F4;cursor:default;cursor:not-allowed;}
.chatctr_textarea_cont{padding:9px 15px;padding-right:10px;border:1px solid var(--line-color4);border-radius:20px;background-color:var(--sub-bg-color9);}
.chatctr_textarea{display:block;padding:0;padding-right:68px;background-color:transparent;min-height:100%;font-size:0.875rem;line-height:1.429;}

/* ai 모델 선택 버튼 - 무료챗 아이콘 */
.ai_model_elem{width:100%;height:100%;}
.ai_model_elem .lightning{width:14px;height:20px;}

/* ai 모델 선택 버튼 - 무료챗 버튼 애니메이션 */
@keyFrames chatFreeBtn{
	0%{box-shadow:0 0 6px rgba(255, 230, 0, 0);}
	70%, 100%{box-shadow:0 0 6px #FFE600;}
}

@keyFrames chatFreeIcon{
	0%, 100%{fill:currentColor;opacity:1;}
	25%, 75%{opacity:0.2;}
	50%{fill:var(--theme-color);opacity:1;}
}

/* ai 모델 선택 버튼 - 무료챗 버튼 애니메이션 적용 */
.aiChangeLy:has(.ico_lightning.inactive).free-anim{animation:chatFreeBtn 1.5s linear alternate infinite;}
.aiChangeLy:has(.ico_lightning.inactive).free-anim svg.lightning{animation:chatFreeIcon 3s ease infinite;}
.aiChangeLy:has(.ico_lightning.inactive).free-anim.iteration3{animation-iteration-count:6;}
.aiChangeLy:has(.ico_lightning.inactive).free-anim.iteration3 svg.lightning{animation-iteration-count:3;}

.chatctr_opt_box{position:absolute;bottom:0;right:7px;height:100%;max-height:40px;}
.chatctr_opt_btn{padding:5px;height:100%;color:var(--sub-color6);}
.chatctr_opt_btn:has(.micro_phone_sym){aspect-ratio:1 / 1;}
.chatctr_opt_btn .icon{width:14px;height:14px;fill:currentColor;margin:auto;}
.micro_phone_sym{width:100%;height:100%;border-radius:50%;background-color:var(--theme-color);color:#FFF;}
.microPhoneFunc:not(.recording) .micro_phone_sym{background-color:var(--sub-bg-color11);}
.micro_phone_sym:has(use[href$="#stop"]){box-shadow:0 0 3px var(--theme-color);}
.chatctr_opt_btn .micro_phone_sym .icon:has(use[href$="#stop"]){width:8px;height:8px;}

/* 채팅 - 에피소드 하단 */
.sad_deer_pannel{position:relative;padding:11px 20px;background:linear-gradient(0deg, var(--main-bg-color) 5%, var(--main-bg-color-op7), transparent);}
.sad_deer{gap:12px;}
.sad_deer_btn{gap:6px;font-size:0.875rem;color:var(--main-color);}
.sad_deer_btn.on{font-weight:500;color:var(--theme-color);}

/* 채팅 - 스크롤바 커스텀 */
.chat_scroll_st::-webkit-scrollbar{width:6px;}
.chat_scroll_st::-webkit-scrollbar-track{background-color:rgba(212, 212, 212, 0.14);}
.chat_scroll_st::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:5px;background-color:rgba(212, 212, 212, 0.4);}
[color-theme="light"] .chat_scroll_st::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.15);}


/* 채팅 슬라이드 메뉴 */
.chat_side_menu_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:20;}
.chat_side_menu_bg{position:absolute;top:0;left:0;width:100%;height:100%;}
.chat_side_menu_bg .bg_inner{width:100%;max-width:600px;height:100%;background-color:rgba(0, 0, 0, 0.5);margin:0 auto;}
.chat_side_menu_container{position:absolute;top:0;right:0;width:calc(100% - 40px);max-width:268px;height:100%;transform:translate3d(100%, 0, 0);transform:translate3d(calc(100% + 50px), 0, 0);transition-property:transform;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.29, 0.69, 0.12, 1.01);}
.chat_side_menu_container.slide-in{transform:translate3d(0, 0, 0);}
.chat_side_menu{position:relative;width:100%;height:100%;padding:20px;background-color:var(--main-bg-color);border-left:1px solid var(--line-color1);box-shadow:0 0 #0000, 0 0 #0000, var(--tw-shadow-color);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;gap:30px;}
.chat_sdmn_sctitle{padding-bottom:10px;border-bottom:1px solid var(--line-color1);color:var(--sub-color2, #878787);margin-bottom:16px;}
.chat_sdmn_lists{display:grid;grid-template-columns:repeat(2, minmax(0, 50%));gap:18px;}
.chat_sdmn_list{align-items:center;padding:5px 0;font-size:0.875rem;color:var(--sub-color1);gap:5px;}
.chat_sdmn_list .icon{width:12px;height:12px;fill:var(--sub-color2);}

/* 사용자 설정 - 자간 */
.chat_contents[data-font-size="22"]{font-size:1.375rem;}
.chat_contents[data-font-size="20"]{font-size:1.25rem;}
.chat_contents[data-font-size="18"]{font-size:1.125rem;}
.chat_contents[data-font-size="16"]{font-size:1rem;}
.chat_contents[data-font-size="14"]{font-size:0.875rem;}
.chat_contents[data-font-size="12"]{font-size:0.75rem;}
.chat_contents[data-font-size="10"]{font-size:0.625rem;}

.chat_contents[data-line-height="6"] .chatbubble_line{line-height:2;}
.chat_contents[data-line-height="5"] .chatbubble_line{line-height:1.8;}
.chat_contents[data-line-height="4"] .chatbubble_line{line-height:1.65;}
.chat_contents[data-line-height="2"] .chatbubble_line{line-height:1.35;}
.chat_contents[data-line-height="1"] .chatbubble_line{line-height:1.2;}

.chat_contents[data-lett-spacing="6"] .chatbubble_line{letter-spacing:2.5px;}
.chat_contents[data-lett-spacing="5"] .chatbubble_line{letter-spacing:2px;}
.chat_contents[data-lett-spacing="4"] .chatbubble_line{letter-spacing:1.5px;}
.chat_contents[data-lett-spacing="2"] .chatbubble_line{letter-spacing:-0.5px;}
.chat_contents[data-lett-spacing="1"] .chatbubble_line{letter-spacing:-1px;}

/* 채팅 안내 팝업 */
.bori_chat_notepop{position:absolute;bottom:100%;right:0;padding:4px 6px;border-radius:5px;border:2px solid var(--theme-color);background-color:var(--sub-bg-color3);margin-right:60px;margin-left:15px;margin-bottom:-15px;opacity:0;transition:opacity 0.45s;}
html:not([color-theme="light"]) .bori_chat_notepop .co_theme_dk{color:var(--theme-color-hash);}
.bori_chat_notepop.active{opacity:1;}
.bori_chat_notepop_x{position:absolute;top:0;right:0;width:18px;height:18px;border-radius:50px;border:2px solid var(--theme-color);background-color:var(--sub-bg-color3);margin-top:-9px;margin-right:-9px;}
.bori_chat_notepop_x svg{width:8px;height:8px;fill:currentColor;margin:auto;}
.bori_chat_notepop .arrow{position:absolute;top:100%;right:0;width:12px;height:12px;background-color:var(--sub-bg-color3);transform:rotate(45deg);border-style:solid;border-color:var(--theme-color);border-bottom-width:2px;border-right-width:2px;margin-top:-5px;margin-right:56px;}

/* 영상 받기 버튼 */
.chat_send_me_video{padding:7px 16px;border-radius:30px;background-color:var(--main-bg-color-op3);line-height:1.2;pointer-events:auto;}
.chat_send_me_video.bg1{background:linear-gradient(90deg, #62ccde, #bb62de, var(--theme-color), #62bade, #bb62de);}
.chat_send_me_video.bg2{background:linear-gradient(90deg, #f13a3a, #df7e44, var(--theme-orange), #f13a3a, #d98841);}
.chat_send_me_video:is(.bg1, .bg2){border-width:0;text-shadow:0 0 3px rgba(0, 0, 0, 0.28);background-size:600% 100%;color:#FFF;animation:bgPosFlow 4.5s alternate ease infinite;}

.send-vd-flex-truncated{max-width:50%;}
.send-vd-flex-parent:has(.chatSendRecommMsg.inactive) :where(.send-vd-flex-truncated), .send-vd-flex-truncated:where(:only-child, .maxWidth100){max-width:100%;}

[data-mode="chatSelect"] .chat_select_hide{display:none !important;}

/* 메신저 모드 (카카오톡 색상) */
[data-theme-mode="messenger"]{
	--mssg-theme-color:#ABC0D1;
	--mssg-user-msg-bg:#FFEB34;
	--mssg-textbox-bg:#F0F0F0;
	color:#000;
}
[data-theme-mode="messenger"] .chat_header, [data-theme-mode="messenger"] .borichat_chat{background-color:var(--mssg-theme-color, #ABC0D1);}
[data-theme-mode="messenger"] .chatbubble_line.user{border-color:var(--mssg-user-msg-bg, #FFEB34);background-color:var(--mssg-user-msg-bg, #FFEB34);color:inherit;}
[data-theme-mode="messenger"] .chatbubble_line.user em{color:#707070;}
[data-theme-mode="messenger"] .chat_controls{background-color:#FFF;}
[data-theme-mode="messenger"] .chatctr_40_btn:not(.chatSendBtn, .bg_theme_org), [data-theme-mode="messenger"] .chatctr_textarea_cont{background-color:var(--mssg-textbox-bg, #F0F0F0);}
[data-theme-mode="messenger"] .chatctr_40_btn:not(.chatSendBtn, .bg_theme_org), [data-theme-mode="messenger"] .chatctr_opt_btn{color:#898989;}
[data-theme-mode="messenger"] .chatctr_40_btn.chatSendBtn:not([disabled]){border-color:var(--mssg-user-msg-bg, #FFEB34);background-color:var(--mssg-user-msg-bg, #FFEB34);color:#000;}
[data-theme-mode="messenger"] .chatctr_textarea_cont{border-color:#E1E1E1;}

@media (hover:hover) and (pointer:fine){
	[data-theme-mode="messenger"] .chatctr_40_btn.chatSendBtn:not([disabled]):hover{border-color:#F5DF10 !important;background-color:#F5DF10 !important;color:#000 !important;}

	.chatbubble_ctr_btn:not([disabled], .disabled){transition-property:border-color, background-color;transition-duration:0.25s;}
	.chatbubble_ctr_btn:not([disabled], .disabled):hover{background-color:var(--sub-color7);color:var(--sub-bg-color3);}

	.chat_thumb_img_unlock_btn:hover{transform:scale(1.05);box-shadow:1px 2px 6px rgba(0, 0, 0, 0.28);}

	.freeMdNoti_btn:hover{transform:translate3d(1px, 1px, 0);}
}