: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_mode_switch{position:absolute;position:fixed;top:0;left:50%;border-radius:24px;border:1px solid var(--line-color7);z-index:6;margin:71px 0 0;transform:translateX(-50%);transform-origin:center top;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:ease-in-out;}
.chat_mode_switch_in{position:relative;border-radius:24px;background-color:var(--sub-bg-color3);}
.chat_mode_switch.zIdx98{z-index:98;pointer-events:none;}
.chat_mode_switch.slide-up{transform:translate3d(-50%, -50%, 0);opacity:0.3;visibility:hidden;pointer-events:none;}
.chat_mode_switch_bg{position:absolute;top:0;left:0;width:50%;height:100%;border-radius:22px;background-color:var(--theme-color);pointer-events:none;transition:transform 0.2s;}
.chat_mode_switch_btn{position:relative;padding:0.4em 1.1em;font-size:12px;color:#878787;line-height:1.2;flex:1;z-index:2;transition:color 0.2s;}
.chat_mode_switch_btn.on{color:#FFF;}
.chat_mode_switch_btn.mode1.on ~ .chat_mode_switch_bg{transform:translate3d(100%, 0, 0);/* transform:translate3d(calc(100% - 1px), 0, 0); */}

/* 대화모드 고정 버튼 */
.chat_mode_pin{position:absolute;top:-1px;bottom:-1px;left:0;width:100%;border:1px solid var(--line-color7);border-radius:24px 0 0 24px;background-color:var(--line-color7);}
.chat_mode_pin_btn{position:absolute;top:-1px;bottom:-1px;left:100%;padding:0 6px;background-color:var(--line-color7);border:1px solid var(--line-color7);border-left-width:0;border-radius:0 24px 24px 0;color:#878787;margin-left:-1px;}
.chat_mode_pin_btn svg{fill:currentColor;}
.chat_mode_pin_btn.on{color:var(--theme-color);}

/* 대화모드 선택 토글 버튼 */
.chat_mode_toggle{position:absolute;position:fixed;top:0;right:50%;z-index:6;margin-top:71px;margin-right:-290px;}
.chat_mode_toggle_btn{width:26px;height:26px;border-radius:26px;border:1px solid var(--line-btn-color);background-color:var(--sub-bg-color3);color:var(--sub-color6);}
.chat_mode_toggle_btn svg{width:14px;height:100%;fill:currentColor;margin:auto;}

/* 채팅 내용 부분 */
.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_mode_switch:not(.inactive) ~ .chat_contents{padding-top:42px;}
.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;}

.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;}
.freeMdNoti_btn_text{/* position:relative;color:#606060;text-decoration-color:#808080; */text-decoration:underline;}

.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;}

/* ai 모델 선택 - 핫타임 관련 */
.ly_ai_md_sel_strike::after{content:"";display:block;position:absolute;top:50%;left:-2px;right:-2px;height:1px;background-color:var(--sub-color2);transform:translateY(-50%);opacity:0.9;}
.ly_ai_md_sel_strike .text_sp{opacity:0.6;}
.ly_ai_md_sel_strike .text_sp1{color:var(--sub-color2);}
.ly_ai_md_sel_dsplb{background:linear-gradient(90deg, #62ccde, #bb62de, var(--theme-color), #62bade, #bb62de);text-shadow:0 0 2px rgba(0, 0, 0, 0.28);background-size:600% 100%;animation:bgPosFlow 4s 1.2s alternate ease infinite;padding:4px 7px 3px;border-radius:5px;font-size:0.688rem;color:#FFF;text-align:center;margin-top:-2px;box-shadow:1px 1px 2px rgba(0, 0, 0, 0.26);}

/* 채팅 - 에피소드 하단 */
.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{padding:4px 6px;border-radius:5px;border:2px solid var(--theme-color);background-color:var(--sub-bg-color3);opacity:0;transition:opacity 0.45s;}
.bori_chat_notepop.ansGenNotePop{bottom:100%;right:0;margin-right:60px;margin-left:15px;margin-bottom:-15px;}
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;}
.bori_chat_notepop .arrow.top{top:auto;bottom:100%;transform:rotate(225deg);margin-top:0;margin-bottom:-5px;}
.bori_chat_notepop .arrow.center{right:0;left:0;margin-left:auto;margin-right:auto;}

.chat_block_bg{position:absolute;top:0;left:0;right:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:97;}

/* 영상 받기 버튼 */
.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_text{transition:color 0.15s;}
	.freeMdNoti_btn_text:hover{color:var(--theme-color);text-decoration-color:currentColor;}
	.freeMdNoti_btn:hover{transform:translate3d(1px, 1px, 0);}
}


@media screen and (max-width:599px){
	/* 대화모드 선택 토글 버튼 */
	.chat_mode_toggle{right:0;margin-right:10px;}

	/* ai 모델 선택 - 핫타임 관련 */
	.ly_ai_md_sel_dsplb{font-size:0.625rem;}
}