/* Merged custom styles and user-selected scroll fixes */
:root {
  --color-primary: #e63a46;
  --color-primary-text: #fff;
  --primary-font-color: #fff;
  --color-text-main: #222;
  --color-text-sub: #f3f3f3;
  --text-color: #222; /* 기본 텍스트 색상 추가 */
  --bg-color: #fff; /* 기본 배경 색상 추가 */
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 전체 페이지 스크롤 방지 */
  background-size: cover;
  background-attachment: fixed; /* 배경 이미지 고정 */
  background-color: #000; /* 배경 이미지가 로드되지 않을 경우 대비 */
}

/* HTML body 클래스의 min-h-screen과 overflow-visible 충돌 방지 */
body.min-h-screen.overflow-visible {
  min-height: 100vh; /* min-h-screen 유지를 위해 */
  overflow: hidden; /* 명시적으로 hidden으로 오버라이드 */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002; /* UI 상단에 위치 */
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 61px; /* HTML에서 확인된 헤더 높이 */
}
#similarPanel, #memoryPanel {
  z-index: 1003; /* 가장 높은 z-index로 다른 UI 위에 오도록 */
  top: 0;
  height: 100vh;
}

.resizing {
  user-select: none;
  cursor: col-resize !important;
}

.resizing iframe {
  pointer-events: none;
}

#resizer {
  position: relative;
  z-index: 10;
}

#resizer::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.main-wrapper {
  transition: justify-content 0.3s ease;
}

.main-wrapper.split {
  justify-content: flex-start !important;
}

/* 메인 콘텐츠 영역 (헤더와 바텀챗을 제외한 스크롤 가능한 영역을 포괄) */
#mainWrapper {
  display: flex;
  flex-direction: column;
  height: 100%; /* body의 100%를 차지 */
  overflow: hidden; /* mainWrapper 자체는 스크롤되지 않음 */
  position: relative;
}

#scrollWrapper {
  flex: 1; /* 남은 공간 모두 차지 */
  display: flex;
  justify-content: center;
  overflow: hidden; /* scrollWrapper 자체는 스크롤되지 않음 */
}

main {
  flex: 1; /* main 태그가 가능한 모든 높이를 차지하도록 */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%; /* 부모 높이 상속 */
  overflow: hidden; /* main 태그 자체는 스크롤되지 않음 */
  position: relative;
}

#czdvPanel {
  display: flex;
  flex-direction: column;
  height: 100%; /* main의 100%를 차지 */
  overflow: hidden; /* czdvPanel 자체는 스크롤되지 않음 */
  width:100%;
}

/* 채팅 전체 스크롤 영역 */
#chatWrapper {
  position: absolute;
  top: 61px; /* header 높이 */
  bottom: 115px; /* bottomChat 높이 */
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background: transparent;
  z-index: 1;
}

/* 내부 요소는 일반 흐름대로 */
#firstMentBlock, #chat, #reportBlock {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 0.5rem auto;
  box-sizing: border-box;
  flex-shrink: 0;
  background: transparent;
  position: static;
}

/* #chat은 별도 스크롤/패딩 없음 */
#chat {
  padding: 0;
  min-height: 200px;
}

@media (max-width: 700px) {
  #chatWrapper {
    top: 56px;
    bottom: 90px;
    max-width: 100vw;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  #firstMentBlock, #chat, #reportBlock {
    max-width: 100vw;
  }
}

/* warning 메시지 위치 조정 */
#trainWarning {
  position: fixed;
  top: 61px; /* Header 높이 바로 아래 */
  left: 0;
  right: 0;
  z-index: 1001; /* Header 아래, chatWrapper의 스크롤 내용 위 */
  margin-top: 0 !important;
}

/* firstMentBlock, chat, reportBlock은 chatWrapper 안에서 일반 흐름대로 */
#firstMentBlock, #reportBlock {
  width: 100%;
  margin: 0 auto 0.5rem auto; /* 상단 여백 제거, 하단 여백 약간 */
  box-sizing: border-box;
  padding: 1rem 0 0.5rem 0; /* 내부 패딩은 유지 */
  position: static; /* 일반적인 문서 흐름에 따르도록 */
  z-index: auto; /* z-index 제거 */
  flex-shrink: 0; /* 스크롤 시 줄어들지 않도록 명시 (firstMentBlock이 너무 작아지는 것 방지) */
}
/* firstMentBlock이 고정 모드일 때만 특정 flex 속성을 갖도록 js에서 제어 */


/* #chat 자체에는 padding-top/bottom을 제거하여 chatWrapper의 패딩만 적용되도록 */
#chat {
  flex: 1 1 0%; /* chatWrapper 내에서 남은 공간을 유연하게 차지 */
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0; /* chatWrapper에 패딩이 있으므로 여기는 0 */
  box-sizing: border-box;
  min-height: 200px; /* 최소 높이 유지 */
  overflow: visible; /* chatWrapper가 스크롤 담당하므로 visible */
}

@media (max-width: 700px) {
  #chat {
    padding-bottom: 0 !important; /* chatWrapper에서 패딩 담당 */
  }
}

#bottomChat {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999; /* header보다는 낮지만 채팅 내용보다는 높게 */
  background: rgba(255,255,255,0.20);
  border-top: 1px solid #eee;
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
  box-shadow: 0 -4px 24px 0 rgba(0,0,0,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height: 115px; /* 대략적인 입력창 높이 (자동 완성 포함) */
}

@media (prefers-color-scheme: dark) {
  #bottomChat {
    background: rgba(23,23,23,0.20);
    border-top: 1px solid #222;
  }
}

#bottomChat .flex {
  gap: 1rem;
}

#bottomChat textarea {
  background: rgba(255,255,255,0.6);
  border: none;
  color: #222;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 0;
}

@media (max-width: 700px) {
  #bottomChat {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 10px);
  }
  #chatWrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

#firstMentContent input {}

/* firstMentBlock, firstMentInner, chat, reportBlock의 불필요한 !important 제거 및 속성 정리 */
/* 이 부분은 이제 JS의 setupFirstMent()에서 동적으로 제어되므로 CSS에서는 일반적인 흐름 유지 */
#firstMentBlock,
#firstMentInner,
#chat,
#reportBlock {
  display: block; /* Flex item으로서 블록 요소 유지 */
  width: 100%;
  margin: 0 auto; /* 중앙 정렬 유지 */
  box-sizing: border-box;
  /* overflow: visible; chatWrapper에서 스크롤을 담당하므로 */
  /* position: static !important; 등 불필요한 !important 제거 */
  /* z-index: auto !important; 등 불필요한 !important 제거 */
}

/* Override Tailwind Typography colors to follow current text color (primary text) */
.prose,
.prose * { color: inherit; }
.prose strong,
.prose a,
.prose code,
.prose blockquote,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 { color: inherit; }
.prose ol>li::before,
.prose ul>li::before { color: inherit; }

#firstMentBlock {
  /* JS에서 isFixed에 따라 flex 속성 제어 */
  display: flex; /* 내부 요소 정렬을 위해 flex 사용 */
  justify-content: center; /* 중앙 정렬 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#firstMentInner {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  height: auto;
  min-height: 1px;
  max-height: none;
  overflow: visible; /* isFixed일 때만 auto로 변경됨 */
}

/* overlayClose와 memoryOverlayClose는 z-index를 다른 UI 오버레이보다 낮게 설정하여 클릭 가능하게 */
#overlayClose, #memoryOverlayClose {
  z-index: 1000;
}

/* ai-bubble 아래 마진은 최소화 (버튼 컨테이너가 마진 보유) */
.ai-bubble {
  margin-bottom: 4px !important;
}

/* user-bubble 아래 마진은 최소화 (버튼 컨테이너가 마진 보유) */
.user-bubble {
  margin-bottom: 4px !important;
}

/* 버튼 컨테이너: 투명 배경, 위로는 약간 간격, 아래로는 20px 간격 */
.ai-message-buttons,
.user-message-buttons {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  margin-top: 4px;
  margin-bottom: 20px;
}

/* 기본은 숨김, 클릭 시 부모에 클래스 부여해서 표시 */
.user-message-buttons { display: none; }
.show-user-buttons .user-message-buttons { display: flex; }

/* 아이콘만 표시하는 버튼 */
.btn-mini {
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 16px; /* 아이콘 크기 */
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-mini:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-mini:active { transform: translateY(0); }

/* 아이콘 색상은 메인 컬러 */
.btn-mini i { color: var(--color-primary); }

/* 정렬 유지를 위한 기본 값 */
.ai-message-buttons { margin-left: 0; }

/* 편집 입력 필드 스타일 */
.edit-input {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-text-main) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
  min-height: 80px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  font-family: inherit !important;
}

.edit-input:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(230, 58, 70, 0.1) !important;
}

.edit-buttons {
  justify-content: flex-end;
  margin-top: 8px;
  gap: 8px;
}

/* 미니 알림 스타일 */
.miniAlert {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideInDown 0.3s ease-out;
  max-width: 90vw;
  word-wrap: break-word;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.miniAlert.success {
  background: rgba(34, 197, 94, 0.95);
  color: white;
  border-color: rgba(34, 197, 94, 0.3);
}

.miniAlert.error {
  background: rgba(239, 68, 68, 0.95);
  color: white;
  border-color: rgba(239, 68, 68, 0.3);
}

.miniAlert.info {
  background: rgba(59, 130, 246, 0.95);
  color: white;
  border-color: rgba(59, 130, 246, 0.3);
}

.miniAlert .closeBtn {
  margin-left: 16px;
  cursor: pointer;
  font-weight: bold;
  opacity: 0.8;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.miniAlert .closeBtn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* 로딩 애니메이션 */
.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: loading-dots 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}