/* ===========================================
채팅 chat.php
=========================================== */
#wrap:has(.chatWrap){overflow: hidden;}
.chatWrap{display:flex; flex-direction:column; height:calc(100vh - var(--gnbH)); overflow:hidden; padding-bottom: 0;}

/* ======= CHAT HEADER ======= */
.chatHeader{justify-content:space-between; flex-shrink:0;}
.chatHeaderLeft{display:flex; align-items:center;}
.profileWrap{display: flex; align-items: center; gap:7px; cursor: pointer;}
.chatCharName{font-size:.95em; font-weight:700; color:var(--fg);}
.chatHeaderRight {display:flex; align-items:center; gap:.25em;}
.chatHeaderBtn {width:2em; height:2em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition:background var(--transition), color var(--transition);}
.chatHeaderBtn:hover{background:var(--surface2); color:var(--fg);}
.chatHeader .coinWrap{display: none; margin-right: 2px;}
@media (max-width:900px){
  .chatHeader .coinWrap{display: flex;}
  .chatHeader .profileImg{display: none;}
}
/* ======= CHAT MESSAGES ======= */
.chatMessages{flex:1; overflow-y:auto; padding:1.5em 1em; background:var(--chatBg); display: block; padding-bottom: 3em;}
.chatMsgInner{display:flex; flex-direction:column; gap:1.5em;}
@media (max-width:600px){
  .chatMessages{padding: 1.5em 0;}
}

/* 초기 설명 */
.introInfo{display:flex; align-items:center; justify-content:center;}
.introInfo span {background:var(--msgDateBg); color:var(--fgDim); font-size:.8em; padding:.3em 1em; border-radius:2em; text-align: center;}

/* 메시지 */
.msgWrap{display:flex; gap:.75em; width: 100%;}
.msgName{font-size:.8em; font-weight:700; margin-bottom:.35em;}

.msgBubble{background: var(--aiMsg); border-radius:var(--radiusLg); padding:.85em 1em; font-size:.85em; color:var(--fg); line-height:1.7; display: flex; flex-direction: column; gap: 10px; width: 100%;}
.msgUser .msgBubble{background: var(--userMsg);}
.msgTxt{display: flex; flex-direction: column; gap: 10px;}
.msgImg{max-width:30em; border-radius:var(--radiusMd); margin-top:.75em; overflow: hidden;}
.action{font-style:italic; color:var(--fgMuted);}
.talk{display: flex; align-items: flex-start; color: var(--tagText);}
.talk .tName{font-weight: 600; color: var(--fg);}
.talk .tName::after{content:''; width: 1px; height: 10px; background: var(--fg); display: inline-block; margin: 0 8px;}
.talk .tTxt{flex: 1;}
/* 유저 메시지 */
.msgUser{display:flex; width: 100%;}


/* ======= 채팅 입력창 ======= */
.chatInputBar{position: relative; flex-shrink: 0; background:var(--bg); padding-bottom: 1em; transition:background var(--transition), border-color var(--transition), left var(--transition); width: 100%; margin: 0 auto; z-index:50;}
.chatInputRow {display:flex; align-items:flex-end; gap:.5em; background:var(--inputBg); border:1px solid var(--border); border-radius:var(--radiusLg); padding:.5em .75em; transition:border-color var(--transition);}
.chatInputRow:focus-within {border-color:var(--primary);}
.chatTxt{flex:1;overflow-y:auto; display: flex; align-items: center;}
.chatTextarea{ background:transparent; border:none; outline:none; resize:none; font-size:.9em; color:var(--fg); font-family:var(--fontSans); max-height:8em; min-height:1.6em;  width: 100%;}

.chatSendBtn {width:2em; height:2em; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--grad); color:#fff; transition:opacity var(--transition);}
.chatSendBtn svg{width: 50%; height: auto; transform: translateX(-1px);}
.chatSendBtn:hover {opacity:.85;}
.chatInputMeta {display:flex; align-items:center; gap:.5em; margin-top:.5em;}
.chatSubBtn{display:flex; align-items:center; gap:.3em; font-size:.78em; color:var(--fgMuted); padding:.25em .6em; border-radius:2em; border:1px solid var(--border); transition:color var(--transition), border-color var(--transition);}
.chatSubBtn:hover {color:var(--fg); border-color:var(--border2);}
.chatSubBtn span{display: flex; align-items: center; justify-content: center; line-height: 1;}
.chatProBadge {margin-left:auto; display:flex; align-items:center; gap:.3em; font-size:.78em; font-weight:700; color:var(--primary); background:var(--gradSoft); border:1px solid var(--border2); padding:.25em .75em; border-radius:2em;}

@media (max-width:600px){
  .chatInputBar{padding-bottom: 1.5em;}
  .chatSubBtn{border-radius: 50%; width: 2.5em; height: 2.5em; padding: 0; justify-content: center;}
  .chatSubBtn span{width: 100%; height: 100%;}
   .chatSubBtn[data-mode="dialogue"] svg{width: 65%; height: 65%;}
  .chatSubBtn svg{width: 50%; height: 50%;}
  .chatSubBtn i{display: none;}
}

/* 모델 드롭다운 */
.modelDrop {position:relative; margin-left:auto;}
.chatProBadge {cursor:pointer;}
.modelMenu {display:none; position:absolute; right:0; bottom:calc(100% + 6px); background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); overflow:hidden; min-width:13em; z-index:300; box-shadow:var(--shadow); padding:.4em 0;}
.modelMenu.open {display:block;}
.modelDrop .modelItem {display:flex; align-items:center; gap:.6em; padding:.6em 1em; font-size:.85em; color:var(--fgMuted); cursor:pointer; transition:background var(--transition), color var(--transition);}
.modelDrop .modelItem:hover {background:var(--surface2); color:var(--fg);}
.modelDrop .modelItem.active {color:var(--primary);}
.modelDrop .modelItem svg {flex-shrink:0; color:var(--fgDim);}
.modelDrop .modelItem.active svg {color:var(--primary);}
.modelDrop .modelItem.active .modelName::after{content:'Current'; display: inline-block; margin-left:.6em; font-size:.75em; font-weight:500; color:#fff; background:var(--primary); padding:.1em .5em; border-radius:2em;}

.modelOpus svg {color:#ff6b6b;}
.modelOpus {color:var(--fg);}
.modelSettings {color:var(--fgMuted);}

/* 말풍선 하단 액션 바 */
.msgActions {display:flex; align-items:center; gap:5px; padding:.4em .25em .1em;}
.msgActionBtn {width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgDim); transition:background var(--transition), color var(--transition);}
.msgActionBtn:hover {background:var(--surface2); color:var(--fgMuted);}
.msgActionsRight {display:flex; align-items:center; gap:5px; margin-left:auto;}

/* 도구 드롭업 */
.actionDrop {position:relative;}
.actionMenu {display:none; position:absolute; left:0; bottom:calc(100% + 6px); background:var(--surface); border:1px solid var(--border2); border-radius:var(--radiusLg); min-width:12em; padding:.85em 1em; box-shadow:var(--shadow); z-index:300;}
.actionMenu.open {display:block;}
.actionMenuTitle {font-size:.8em; font-weight:700; color:var(--fg); margin-bottom:.2em;}
.actionMenuDesc {font-size:.75em; color:var(--fgMuted); margin-bottom:.85em; line-height:1.5;}
.actionMenuBtn {width:100%; padding:.55em 0; border-radius:var(--radiusMd); background:var(--grad); color:#fff; font-size:.85em; font-weight:700; text-align:center; transition:opacity var(--transition);}
.actionMenuBtn:hover {opacity:.85;}

/* ===========================================
채팅 모달 modal/chat_modal.php
=========================================== */
/* ======= 토큰 정보 모달 ======= */
.tokenOverlay .modalBody{display: flex; flex-direction: column; gap: 8px;}
.tokenSection {background:var(--surface1); border-radius:var(--radiusMd); padding:.85em 1em;}
.tokenSectionLabel {font-size:.72em; font-weight:700; color:var(--fgMuted); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.5em;}
.tokenBigNum{font-size:1.2em; font-weight:700; color:var(--fg); margin-bottom:.1em;}
.tokenBigNum span {font-size:.62em; font-weight:400; color:var(--fgMuted);}
.tokenBigNum em{color:var(--primary); font-style:normal; font-size: .65em;}
.tokenSubVal{font-size:.78em; color:var(--fgMuted); }
.tokenBreakdown{margin-top:.6em; display:flex; flex-direction:column;}
.tokenRow{display:flex; justify-content:space-between; font-size:.77em; color:var(--fgMuted); line-height:1.9; border-bottom:1px solid var(--border1);}
.tokenRow:last-child{border-bottom:none;}
.tokenRowGroup{margin-top:.15em;}
.tokenRowSub{display:flex; justify-content:space-between; font-size:.73em; color:var(--fgDim); padding-left:.9em; line-height:1.8;}
.tokenSectionGroup{display:flex; gap:8px;}
.tokenSectionHalf{flex:1; min-width:0;}
.tokenCostSection{border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);}
.tokenCostBig{font-size:1.3em; font-weight:800; color:var(--primary); display:flex; align-items:baseline; gap:.25em; margin-top:.1em;}
.tokenCostBig .coinIcon{width: 18px; height: 18px; transform: translateY(1.5px);}
.tokenCostNum{letter-spacing:-.01em;}
.tokenCostUnit{font-size:.5em; font-weight:700; color:var(--fgMuted); letter-spacing:.04em;}
.tokenCostRows{display:flex; flex-direction:column; gap:.3em;}
.tokenCostRow{display:flex; align-items:center; gap:.5em; font-size:.78em; color:var(--fgDim);}
.tokenCostRowLabel{flex-shrink:0; color:var(--fgMuted); min-width:2.5em;}
.tokenCostRowVal{flex:1; color:var(--fgDim);}
.tokenCostRowCnd{flex-shrink:0; font-weight:600; color:var(--fg);}
.tokenCostTotal{border-top:1px solid var(--border2); margin-top:.2em; padding-top:.4em;}
.tokenCostTotal .tokenCostRowLabel{font-weight:700; color:var(--fg);}
.tokenCostTotal .tokenCostRowCnd{color:var(--primary); font-weight:700;}

/* ======= 채팅 설정 모달 ======= */
.setHead{display:flex; align-items:center; justify-content:space-between; padding:1.1em 1.25em; border-bottom:1px solid var(--border); flex-shrink:0; height: 60px;}
.setHead .title {font-size:1.05em; font-weight:600;}
.setHead .modalClose{position: static;}
.settingsCloseBtn {width:2em; height:2em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition:background var(--transition), color var(--transition);}
.settingsCloseBtn:hover {background:var(--surface2); color:var(--fg);}
.settingsBody {flex:1; overflow-y:auto; padding:1.25em 1em;}
.settingsSection {margin-bottom:1.75em;}
.settingsSectionTitle {font-size:.9em; font-weight:700; color:var(--fg); margin-bottom:.75em;}

.settingsTitle {font-size:1.05em; font-weight:700; color:var(--primary);}
.settingsPanel .formTextarea{padding: .5em .7em; font-size: .85em;}
.settingsPanel .formInput{padding: .5em .7em; font-size: .85em;}
.settingsPanel .bottomBtnArea{gap: .5em;}
.settingsPanel .mainBtn{padding: .5em; font-size: .85em;}
.settingsPanel .sectionLabel{position: relative;}
.settingsPanel .settingsPanel{font-size: .8em;}
.settingsPanel .noteItem{padding: .7em 1em;}
.settingsPanel .noteItemName{font-size: .85em;}
/* 탭 바 */
.spTabBar {display:flex; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; scrollbar-width:none;}
.spTabBar::-webkit-scrollbar {display:none;}
.spTab {display:flex; flex-direction:column; align-items:center; gap:.25em; padding:1em .6em .45em; font-size:.7em; font-weight:600; color:var(--fgMuted); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--transition),border-color var(--transition); flex:1;}
.spTab svg {width:1.3em; height:1.3em;}
.spTab.active {color:var(--primary); border-color:var(--primary);}
.spTab:hover:not(.active) {color:var(--fg);}

/* 패널 */
.spPanel {display:none; flex:1; padding-bottom: 1em;}
.spPanel.active {display:block;}
.spPanel::-webkit-scrollbar {width:3px;}
.spPanel::-webkit-scrollbar-thumb {background:var(--border2); border-radius:4px;}

/* 공통 컴포넌트 */
.spDivider {height:1px; background:var(--border); margin:1.1em 0;}
.spModelCostBox { margin: .2em 0 1em; }
.spDesc {font-size:.76em; color:var(--fgMuted); line-height:1.6; margin-top:.35em;}

/* 슬라이더 */
.settingsSection {margin-bottom:1.25em;}
.settingsSectionTitle {font-size:.88em; font-weight:600; color:var(--fg); margin-bottom:.6em;}
.settingsSliderRow {display:flex; align-items:center; justify-content:space-between; margin-bottom:.3em;}
.settingsSliderLabel {font-size:.8em; color:var(--fgMuted); font-weight:500; display:flex; align-items:center; gap:.3em;}
.settingsSliderVal {font-size:.8em; color:var(--primary); font-weight:700;}
.settingsSlider {width:100%; accent-color:var(--primary); margin:.3em 0;}
.settingsSliderTicks {display:flex; justify-content:space-between; font-size:.72em; color:var(--fgDim); margin-bottom:.35em;}
.settingsDesc {font-size:.76em; color:var(--fgMuted); line-height:1.6;}

/* 토글 */
.settingsToggleRow {display:flex; align-items:center; justify-content:space-between; margin-bottom:.4em;}
.settingsToggleLabel {font-size:.85em; font-weight:500; color:var(--fg); display:flex; align-items:center; gap:.3em; line-height: 1;}
.settingsToggle {position:relative; width:2.5em; height:1.4em; flex-shrink:0;}
.settingsToggle input {opacity:0; width:0; height:0; position:absolute;}
.settingsToggleTrack {position:absolute; inset:0; background:var(--border2); border-radius:1em; transition:background var(--transition); cursor:pointer;}
.settingsToggle input:checked + .settingsToggleTrack {background:var(--primary);}
.settingsToggleTrack::after {content:''; position:absolute; width:1.05em; height:1.05em; background:#fff; border-radius:50%; top:.175em; left:.175em; transition:transform var(--transition); box-shadow:0 1px 3px rgba(0,0,0,.3);}
.settingsToggle input:checked + .settingsToggleTrack::after {transform:translateX(1.1em);}
.settingsDivider {height:1px; background:var(--border); margin:1.1em 0;}

/* 셀렉트 로우 */
.spSelectRow {display:flex; align-items:center; justify-content:space-between; background:var(--surface1); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:.7em .9em; margin-bottom:1em; cursor:pointer; transition:border-color var(--transition);}
.spSelectRow:hover {border-color:var(--primary);}
.spSelectRowLeft {display:flex; align-items:center; gap:.6em;}
.spSelectRowTitle {font-size:.8em; font-weight:600; color:var(--fg);}
.spSelectRowSub {font-size:.76em; color:var(--fgMuted); margin-top:.1em;}
.spSelectRowArrow {color:var(--fgDim); flex-shrink:0;}
.spBadgeMax {font-size:.65em; font-weight:800; background:#e53e3e; color:#fff; padding:.1em .4em; border-radius:3px; letter-spacing:.02em;}

/* Billing 세그먼트 */
.spBillingRow {display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface1); border:1px solid var(--border2); border-radius:var(--radiusMd); overflow:hidden; margin-bottom:1em;}
.spBillingBtn {padding:.5em; font-size:.82em; font-weight:600; color:var(--fgMuted); text-align:center; cursor:pointer; transition:background var(--transition),color var(--transition);}
.spBillingBtn.active {background:var(--primary); color:#fff;}

/* Memory 프리셋 */
.spPresetRow {display: flex; gap: .5em; margin-bottom:.85em;}
.spPresetBtn {flex: 1; padding:.5em; font-size:.75em; font-weight:500; border: 1px solid var(--border); color:var(--fgMuted); text-align:center; cursor:pointer; transition:background var(--transition),color var(--transition); border-radius: 5em; background: var(--surface1);}
.spPresetBtn.active {background:var(--primary); color:#fff;}

/* Memory 모드 */
.spModeRow{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface1); border:1px solid var(--border2); border-radius:var(--radiusMd); overflow:hidden; margin-bottom:1em;}
.spModeBtn {padding:.5em; font-size:.82em; font-weight:500; color:var(--fgMuted); text-align:center; cursor:pointer; transition:background var(--transition),color var(--transition);}
.spModeBtn.active {background:var(--primary); color:#fff;}

/* Summary Length */
.spSumLenRow {display:grid; grid-template-columns:repeat(3,1fr); gap:.4em; margin-bottom:.85em;}
.spSumLenBtn {padding:.5em .3em; font-size:.76em; font-weight:500; color:var(--fgMuted); background:var(--surface1); border:1px solid var(--border2); border-radius:var(--radiusMd); text-align:center; cursor:pointer; transition:background var(--transition),color var(--transition),border-color var(--transition); line-height:1.4;}
.spSumLenBtn.active {background:var(--gradSoft); border-color:var(--primary); color:var(--primary);}

/* Memory 요약 텍스트 */
.turnList{display: flex; flex-direction: column; gap: .8em;}
.spMemoryTurn {font-size:.65em; font-weight:700; color:var(--primary); background:rgba(168, 113, 255, .2); border-radius:5em; padding:.15em .5em; display:inline-block; margin-bottom:.5em;}
.spMemorySummary {font-size:.83em; color:var(--fgMuted); line-height:1.7; white-space:pre-wrap;}

/* Notes */
.spNoteTextarea {width:100%; background:var(--inputBg); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:.75em .9em; font-size:.85em; color:var(--fg); font-family:var(--fontSans); resize:none; min-height:6em; outline:none; line-height:1.6; transition:border-color var(--transition);}
.spNoteTextarea:focus {border-color:var(--primary);}
.spNoteMeta {display:flex; align-items:center; justify-content:flex-end; gap:.5em; padding:.3em .1em 0;}
.spNotePaug {font-size:.72em; font-weight:700; background:var(--primary); color:#fff; padding:.1em .5em; border-radius:4px;}
.spNoteCount {font-size:.72em; color:var(--fgDim);}
.spNoteEditSaveRow {display:flex; align-items:center; justify-content:center; gap:0; border:1px solid var(--border2); border-radius:var(--radiusMd); overflow:hidden; margin-top:.5em;}
.spNoteEditBtn {flex:1; padding:.55em; font-size:.82em; font-weight:600; color:var(--fgMuted); border-right:1px solid var(--border2); cursor:pointer; text-align:center; transition:background var(--transition),color var(--transition);}
.spNoteEditBtn:hover {background:var(--surface2); color:var(--fg);}
.spNoteSaveBtn {flex:1; padding:.55em; font-size:.82em; font-weight:600; color:var(--fgMuted); cursor:pointer; text-align:center; transition:background var(--transition),color var(--transition);}
.spNoteSaveBtn:hover {background:var(--surface2); color:var(--fg);}
.spNoteAccordion {background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radiusMd); overflow:hidden; margin-bottom:.5em;}
.spNoteAccHead {display:flex; align-items:center; gap:.5em; padding:.65em .9em; cursor:pointer;}
.spNoteAccStar {color:#f59e0b;}
.spNoteAccName {font-size:.88em; font-weight:700; color:var(--fg); flex:1;}
.spNoteAccDesc {font-size:.78em; color:var(--fgMuted);}
.spNoteAccArrow {color:var(--fgDim);}
.spAddNoteBtn {width:100%; display:flex; align-items:center; justify-content:center; gap:.4em; border:1.5px dashed var(--border2); border-radius:var(--radiusMd); padding:.7em; font-size:.85em; color:var(--fgMuted); cursor:pointer; margin-top:.5em; transition:border-color var(--transition),color var(--transition);}
.spAddNoteBtn:hover {border-color:var(--primary); color:var(--primary);}
.spNoteTotal {font-size:.75em; color:var(--fgDim); text-align:right; margin-top:.25em;}

/* Memory — Performance 모드 전용 */
.spPerfView {display:none;}
.spPerfView.active {display:block;}
.spEffView {display:block;}
.spEffView.hidden {display:none;}


/* Memory Turn 편집 */
.spTurnBlock {margin-bottom:1em;}
.spTurnBlockHead{display:flex; align-items:center; gap:.5em; margin-bottom:.4em; justify-content: space-between;}
.spTurnEditBtn{color: var(--fgMuted); cursor:pointer;}
.spTurnEditArea {display:none; margin-top:.5em;}
.spTurnEditArea.open {display:block;}
.spTurnTextarea {min-height:10em;}
.spTurnCounter {font-size:.72em; color:var(--fgDim); margin:.2em 0 .4em; text-align:left;}
.spTurnBtnRow {display:flex; align-items:center; justify-content:flex-end; gap:.4em;}
.spTurnCancelBtn {padding:.4em 1em; border-radius:2em; border:1px solid var(--border2); font-size:.8em; font-weight:600; color:var(--fgMuted); cursor:pointer; background:transparent; transition:background var(--transition);}
.spTurnCancelBtn:hover {background:var(--surface2);}
.spTurnSaveBtn {padding:.4em 1em; border-radius:2em; background:var(--primary); color:#fff; font-size:.8em; font-weight:700; cursor:pointer; transition:opacity var(--transition);}
.spTurnSaveBtn:hover {opacity:.88;}

/* 페르소나 */
.settingsPanel .personaSelectWrap{margin-bottom: 1em;}
.settingsPanel .clCheckbox{font-size: .75em;}

/* ======= Prompt / Model 슬라이드 패널 (settingsPanel 내부) ======= */
.spSlidePanel {display:none; position:fixed; inset:0; background:var(--surface1); z-index:1502; flex-direction:column; overflow:hidden; width: min(22em, 92vw); top:0; right: 0;}
.spSlidePanel.open {display:flex;}
.spSlidePanelHead {display:flex; align-items:center; gap:0.6em; padding:0.75em 0.9em; border-bottom:1px solid var(--border); flex-shrink:0; height: 60px;}
.spSlidePanelBack {width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; color:var(--fgMuted); cursor:pointer; transition:color var(--transition);}
.spSlidePanelBack:hover {color:var(--fg);}
.spSlidePanelTitle {font-size:0.92em; font-weight:700; color:var(--fg); flex:1;}
.spSlidePanelBody {flex:1; overflow-y:auto; padding:1.5em 1em;}
.spSlidePanel .modelToggleBanner{border: 1px solid var(--border);}

/* prompt list */
.settingsPanel .promptItemTitle{font-size: .8em;}

/* i 버튼 툴팁 */
.spInfoBtn {cursor:pointer; color:var(--fgDim); flex-shrink:0; display:inline-flex; align-items:center; vertical-align:middle; margin-left: 3px;}
.spInfoBtn:hover {color:var(--primary);}
.spInfoTip {display:none; position:absolute; left:0; right:0; top:15px; background:var(--surface3); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:0.65em 0.9em; font-size:11px; color:var(--fgMuted); line-height:1.6; z-index:20; box-shadow:var(--shadow); margin-top:0.35em; letter-spacing: normal; font-weight: 500; text-transform:none;}
.spInfoTip.open {display:block;}
.settingsSliderRow {position:relative;}
.settingsToggleRow {position:relative;}
.settingsToggleRow .coinWrap{cursor: inherit; color: var(--fgMuted);}

/* Chat Room Name (Settings 탭 상단) */
.spRoomNameBox {background:var(--surface2); border:1px solid var(--border2); border-radius:var(--radiusMd); padding:0.65em 0.9em; margin-bottom:1.25em; display:flex; align-items:center; gap:0.5em;}
.spRoomNameInput {flex:1; background:transparent; border:none; outline:none; font-size:0.88em; color:var(--fg); font-family:var(--fontSans);}
.spRoomNameInput:focus + .spRoomNameSave {opacity:1; pointer-events:auto;}
.spRoomNameSave {font-size:0.75em; font-weight:700; color:var(--primary); opacity:0; pointer-events:none; transition:opacity var(--transition); white-space:nowrap;}
.spRoomNameBox:focus-within {border-color:var(--primary);}
.spRoomNameBox:focus-within .spRoomNameSave {opacity:1; pointer-events:auto;}


/* ======= 채팅 검색 모달 ======= */
.chatSearchHead {display:flex; align-items:center; gap:.6em; padding:.85em 1.1em; border-bottom:1px solid var(--border); flex-shrink:0;}
.chatSearchBackBtn {width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--fgMuted); transition:background var(--transition), color var(--transition); flex-shrink:0;}
.chatSearchBackBtn:hover {background:var(--surface2); color:var(--fg);}
.chatSearchHeadTitle {font-size:.95em; font-weight:700; color:var(--fg); flex:1;}
.chatSearchCount {font-size:.78em; color:var(--fgMuted); white-space:nowrap;}
.chatSearchInputWrap {display:flex; align-items:center; gap:.5em; margin:.85em 1.1em; background:var(--surface2); border:1px solid var(--border); border-radius:2em; padding:.5em .9em; transition:border-color var(--transition);}
.chatSearchInputWrap:focus-within {border-color:var(--primary);}
.chatSearchInputWrap svg {color:var(--fgDim); flex-shrink:0;}
.chatSearchInput {flex:1; background:transparent; border:none; outline:none; font-size:.88em; color:var(--fg); font-family:var(--fontSans);}
.chatSearchClearBtn {display:none; width:1.4em; height:1.4em; align-items:center; justify-content:center; border-radius:50%; color:var(--fgDim); transition:color var(--transition);}
.chatSearchClearBtn:hover {color:var(--fgMuted);}
.chatSearchResults {flex:1; overflow-y:auto; padding:0 .75em 1em;}
.chatSearchItem {gap:.5em; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radiusMd); padding:.75em 1em; margin-bottom:.5em; cursor:pointer; transition:border-color var(--transition), background var(--transition); font-size: .8em; color: var(--fgMuted);}
.chatSearchItem:hover {border-color:var(--border2); background:var(--surface3);}
.chatSearchItemBody {flex:1; min-width:0;}
.chatSearchItemTurn {font-size:.75em; font-weight:600; color:var(--fgMuted); margin-bottom:.3em;}
.chatSearchItemText {font-size:.82em; color:var(--fgMuted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.chatSearchItemText em {color:var(--primary); font-style:normal; font-weight:600;}
.chatSearchItemArrow {color:var(--fgDim); flex-shrink:0;}
.searchHighlight{color: var(--primary); font-weight: 500; background: transparent;}

/* ======= 채팅 편집 ======= */
.editModalOverlay .modalBox{max-width: 600px;}
.editModalOverlay .formTextarea{min-height: 20em;}

/* ======= 채팅 재생성 ======= */
.regenerateOverlay .modalBox{max-width: 600px;}


/* ======= 스냅샷 룸 모달 ======= */
.confirmModal { z-index: 2001 !important; }
.snapRoomOverlay { z-index: 2001; }
.snapRoomInput { margin-bottom: .3em; }
.snapRoomInput.input-error { border-color: #e05c5c !important; animation: snapRoomShake .35s ease; }
.snapRoomCounter { font-size: .75em; color: var(--fgDim); text-align: right; margin-bottom: .1em; }
.snapCommentInput { min-height: 5em; margin-bottom: .3em; }

@keyframes snapRoomShake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}