/* ── CSS 변수: 마주(MAJOU) 차분한 테마 ──────────────── */
:root {
  --bg-deep:       #c2e1ee; /* 상단: 부드러운 스카이 블루 */
  --bg-mid:        #d3ebf5; /* 하단: 맑고 밝은 하늘색 */
  --water-dark:    #cfe4fd;
  --water-light:   #c4dcf7;
  --accent:        #5a83a8; /* 클래식 블루 톤 */
  --accent-soft:   #3e5c7a;
  --glow:          #9ebcd6;
  --text-main:     #2C3E50; /* 짙은 네이비/차콜 (기존: 크림화이트) */
  --text-sub:      #546E7A; /* 중간 톤 텍스트 */
  --text-dim:      #78909C; /* 연한 텍스트 */
  --glass-bg:      rgba(255, 255, 255, 0.5); /* 밝은 반투명 */
  --glass-border:  rgba(255, 255, 255, 0.6);
  --bubble-user:   #f7f4e5; 
  --bubble-bot:    #a0aedd; 
  --font-main:     'Noto Sans KR', sans-serif;
  --font-title:    'Gowun Batang', serif;
  --radius:        16px;
  --radius-sm:     10px;
}

/* ── 리셋 & 기본 ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── 배경 레이어 (새벽 공기 & 부드러운 안개/빛) ────── */
.bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 100%); }
.stars    { position: absolute; inset: 0; }
.water-surface {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, transparent 0%, var(--water-dark) 40%, var(--water-light) 100%);
  opacity: 0.7;
}
/* 빛이 일렁이는 안개 느낌으로 변경 */
.water-reflection {
  position: absolute; bottom: 0; left: -20%; right: -20%; height: 50%;
  background: radial-gradient(ellipse at bottom, rgba(158, 188, 214, 0.05) 0%, transparent 60%);
  animation: fogRipple 10s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes fogRipple {
  0%   { transform: scaleX(1) translateY(0); opacity: 0.5; }
  100% { transform: scaleX(1.1) translateY(-20px); opacity: 0.8; }
}

/* ── 메인 컨테이너 ───────────────────────────────── */
.main-container {
  position: relative; z-index: 1; max-width: 720px; margin: 0 auto;
  min-height: 100vh; display: flex; flex-direction: column; padding: 0 20px 40px;
}

/* ── 앱 헤더 ─────────────────────────────────────── */
.app-header { text-align: center; padding: 48px 0 32px; }
.app-title {
  font-family: var(--font-title); font-size: 2.4rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text-main);
  text-shadow: 0 0 20px rgba(158,188,214,0.4), 0 0 40px rgba(158,188,214,0.2);
  animation: titleGlow 5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%,100% { text-shadow: 0 0 20px rgba(158,188,214,0.3), 0 0 40px rgba(158,188,214,0.1); }
  50%     { text-shadow: 0 0 30px rgba(158,188,214,0.6), 0 0 50px rgba(158,188,214,0.2); }
}
.app-subtitle { margin-top: 10px; font-size: 0.9rem; color: var(--text-sub); letter-spacing: 0.08em; }

/* ════════════════════════════════════════════
   마주(MAJOU) 배경 로고 워터마크
════════════════════════════════════════════ */

/* 1. 로고가 위치할 기준점(부모 컨테이너) 설정 */
#screen-chat, 
#future-chat-area {
  position: relative;
}

/* 2. 가상 요소(::before)를 이용해 배경에 로고 삽입 */
#screen-chat::before, 
#future-chat-area::before {
  content: "";
  position: absolute;
  top: 45%; /* 시각적 안정감을 위해 정중앙(50%)보다 살짝 위로 배치 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;  /* 로고의 가로 크기 (필요에 따라 조절) */
  height: 240px; /* 로고의 세로 크기 (가로와 동일하거나 auto로 설정) */
  
  background-image: url('/static/images/logo.png'); 
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 마주의 테마에 맞게 아주 은은하게 (3% ~ 10% 추천) */
  opacity: 0.6; 
  
  /* 필수: 로고 때문에 스크롤이나 클릭이 막히지 않도록 통과시킴 */
  pointer-events: none; 
  z-index: 0; 
}

/* 3. 채팅 메시지들이 로고 '위로' 자연스럽게 스크롤 되도록 설정 */
.chat-window {
  position: relative;
  z-index: 1; 
}

/* ── 화면 전환 ───────────────────────────────────── */
.screen { display: none; animation: fadeIn 0.8s ease; }
.screen.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 유리 카드 ───────────────────────────────────── */
.glass-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); padding: 36px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(253,252,240,0.03);
}

/* ── 초기 폼 ─────────────────────────────────────── */
#screen-form { display: none; align-items: center; justify-content: center; }
#screen-form.active { display: flex; }
.form-card { width: 100%; max-width: 440px; margin: 0 auto; }
.form-desc { text-align: center; color: var(--text-sub); font-size: 0.95rem; margin-bottom: 28px; line-height: 1.8; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.85rem; color: var(--text-sub); letter-spacing: 0.08em; margin-bottom: 8px; }
.form-group input {
  width: 100%; background: rgba(253,252,240,0.03); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 12px 16px; color: var(--text-main);
  font-family: var(--font-main); font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s; outline: none;
}
.form-group input::placeholder { color: var(--text-main); }
.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 16px rgba(90,131,168,0.2); }

/* ── 기본 버튼 ───────────────────────────────────── */
.btn-primary {
  width: 100%; margin-top: 10px; padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border: 1px solid rgba(158,188,214,0.3); border-radius: var(--radius-sm);
  color: var(--text-main); font-family: var(--font-main); font-size: 1rem;
  font-weight: 500; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; transition: all 0.3s;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--accent), #6899c4); box-shadow: 0 0 20px rgba(90,131,168,0.3); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* ── 진행률 바 ───────────────────────────────────── */
.progress-bar-wrap { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.progress-label { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; letter-spacing: 0.05em; }
.progress-track { flex: 1; height: 3px; background: rgba(253,252,240,0.06); border-radius: 2px; overflow: hidden; }
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--glow));
  border-radius: 2px; transition: width 0.6s ease; box-shadow: 0 0 8px rgba(158,188,214,0.4);
}

/* ── 채팅 윈도우 ─────────────────────────────────── */
.chat-window {
  height: 520px; overflow-y: auto; padding: 16px 4px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: var(--text-dim) transparent;
}
.chat-window::-webkit-scrollbar { width: 4px; }
.chat-window::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 2px; }

.msg-wrap { display: flex; flex-direction: column; max-width: 78%; animation: msgAppear 0.4s ease; }
@keyframes msgAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-wrap.user { align-self: flex-end; align-items: flex-end; }
.msg-wrap.bot  { align-self: flex-start; align-items: flex-start; }

.msg-bubble {
  padding: 12px 18px; border-radius: 16px; line-height: 1.6;
  font-size: 0.95rem; white-space: pre-wrap; word-break: break-word;
}
.msg-wrap.user .msg-bubble { background: var(--bubble-user); border: 1px solid rgba(158,188,214,0.15); border-bottom-right-radius: 4px; color: var(--text-main); }
/* 유저(나) 말풍선 - 기존 유지 (크림색 배경 + 짙은 글씨) */
.msg-wrap.bot  .msg-bubble { 
  background: var(--bubble-bot); 
  border: 1px solid var(--glass-border); 
  border-bottom-left-radius: 4px; 
  color: #ffffff; /* 글씨색을 흰색으로 변경 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 흰 글씨 가독성을 위한 미세한 그림자 */
}
.msg-wrap.bot.future .msg-bubble { background: rgba(35, 48, 64, 0.95); border: 1px solid rgba(158,188,214,0.3); box-shadow: 0 4px 20px rgba(90,131,168,0.1); }

.msg-time { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; padding: 0 4px; }

.typing-indicator .msg-bubble { display: flex; align-items: center; gap: 6px; padding: 14px 20px; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: typingDot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
  40%         { transform: scale(1.0); opacity: 1; }
}

/* ── 메시지 입력 영역 ────────────────────────────── */
.input-area {
  display: flex; align-items: flex-end; gap: 8px; margin-top: 6px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 10px 14px; backdrop-filter: blur(12px);
}
.msg-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-main); font-family: var(--font-main); font-size: 0.95rem;
  line-height: 1.5; resize: none; max-height: 120px; overflow-y: auto; padding: 6px 0;
}
.msg-input::placeholder { color: var(--text-dim); }

/* 전송 버튼 */
.btn-send {
  /* 배경을 기존보다 살짝 더 맑고 밝은 톤으로 조정 */
  background: linear-gradient(135deg, #7499bb, var(--accent));
  border: 1px solid rgba(158,188,214,0.5); 
  border-radius: 12px;
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; 
  color: #ffffff; /* 아이콘 색상을 흰색으로 변경 */
  transition: all 0.3s;
}
.btn-send:hover { 
  background: linear-gradient(135deg, var(--accent), #6899c4); 
  box-shadow: 0 0 16px rgba(90,131,168,0.4); 
}

/* ════════════════════════════════════════════
   치토 감정 팝업 에셋 (유지)
════════════════════════════════════════════ */
#chito-emotion-popup {
  position: relative; align-self: flex-start; max-width: 160px;
  margin-left: 10px; margin-bottom: -10px; z-index: 10;
  opacity: 0; transform: translateY(10px) scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none;
}
#chito-emotion-popup.show { opacity: 1; transform: translateY(0) scale(1); }
#chito-emotion-popup.hide { opacity: 0; transform: translateY(-10px) scale(0.9); }

/* ════════════════════════════════════════════
   모래시계(시간) 애니메이션 연출 (리뉴얼)
════════════════════════════════════════════ */
.future-intro {
  position: relative; text-align: center; padding: 120px 0;
  overflow: hidden; border-radius: var(--radius); transition: background-color 1s ease;
}

.rocket-container {
  position: relative; width: 60px; height: 60px; margin: 0 auto 30px; z-index: 2;
  animation: enterFromBottom 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes enterFromBottom {
  0%   { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 모래시계 아이콘 기본 설정 */
.rocket {
  display: inline-block; font-size: 3.5rem;
  transform-origin: center center;
  /* 1초 대기, 회전, 1초 대기, 회전... 2초 주기로 세팅 */
  animation: hoverHourglass 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; 
}

/* 모래시계 대기: 제자리에서 1초 멈추고 180도 회전 반복 */
@keyframes hoverHourglass {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(0deg); } /* 0.8초 동안 대기 */
  50%  { transform: rotate(180deg); } /* 0.2초 동안 180도 휙 회전 */
  90%  { transform: rotate(180deg); } /* 0.8초 동안 거꾸로 대기 */
  100% { transform: rotate(360deg); } /* 다시 180도 휙 회전 */
}

/* 라이트 모드 (성공) - 빛 속으로 부드럽게 스며들듯 사라짐 */
.rocket.launch {
  animation: hourglassLaunch 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes hourglassLaunch {
  0%   { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
  50%  { transform: translateY(-30px) scale(1.2); opacity: 0.8; filter: blur(2px); } 
  100% { transform: translateY(-60px) scale(1.5); opacity: 0; filter: blur(10px); }
}

/* 다크 모드 (실패) - 불안정하게 떨리다 곤두박질침 */
.rocket.crash {
  animation: hourglassCrash 2s ease-in forwards;
}
@keyframes hourglassCrash {
  0%   { transform: translateY(0) rotate(0deg); }
  10%  { transform: translateX(-10px) rotate(-15deg); } 
  20%  { transform: translateX(10px) rotate(15deg); }  
  30%  { transform: translateX(-5px) rotate(-5deg); }
  100% { transform: translateY(300px) rotate(180deg) scale(0.5); opacity: 0; }
}

/* 다크모드 화면 붉은 점멸 (사이렌 효과 유지) */
.future-intro.dark-siren {
  animation: sirenFlash 1s infinite alternate;
}
@keyframes sirenFlash {
  0%   { background-color: rgba(20, 5, 5, 0); box-shadow: inset 0 0 0 rgba(255, 0, 0, 0); }
  100% { background-color: rgba(30, 0, 0, 0.5); box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3); }
}

.future-warning-text {
  font-family: var(--font-title); font-size: 1.1rem; color: #ff5c5c;
  letter-spacing: 0.05em; margin-top: 10px; animation: pulse 1s infinite;
}

/* ════════════════════════════════════════════
   다크모드(파멸한 미래) 배경 - 페이드인 & 상단 사이렌 연출
════════════════════════════════════════════ */

/* 1. 다크모드 진입 시 무채색 배경이 '서서히' 덮이도록 수정 (페이드인) */
.screen-future-dark::before {
  content: ""; 
  position: fixed; 
  inset: 0; 
  z-index: -1;
  background: #1c1c1e; /* 아주 짙은 삭막한 회색 */
  
  /* 기존 transition 대신 animation 사용 */
  opacity: 0; 
  animation: darkBgFadeIn 3.0s ease forwards;
}

@keyframes darkBgFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 2. 다크모드 상단에서 붉은 빛이 천천히 점멸하는 사이렌 효과 추가 */
.screen-future-dark::after {
  content: ""; 
  position: fixed; 
  top: 0; left: 0; right: 0; 
  height: 35vh; /* 화면 상단 35%까지만 그라데이션 */
  z-index: 0;
  background: linear-gradient(to bottom, rgba(220, 20, 20, 0.35) 0%, transparent 100%);
  pointer-events: none; /* 유저 클릭을 방해하지 않음 */
  
  opacity: 0;
  /* 배경이 어느 정도 어두워진 뒤(1초 후)부터 점멸 시작 */
  animation: topSirenPulse 1s ease-in-out infinite alternate;
  animation-delay: 0.5s; 
}

@keyframes topSirenPulse {
  0% { opacity: 0.1; }
  100% { opacity: 0.85; }
}


/* 봇(파멸한 미래의 나) 말풍선 - 회색 */
.screen-future-dark .msg-wrap.bot.future .msg-bubble {
  background: #3a3a3c; opacity: 0.8;  border: 1px solid #4a4a4c; color: #d1d1d6; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
/* 유저(나) 말풍선 - 옅은 회색 */
.screen-future-dark .msg-wrap.user .msg-bubble {
  background: #5c5c60; opacity: 0.8; border: 1px solid #6c6c70; color: #f2f2f7;
}
/* 입력창 및 기타 UI 무채색화 */
.screen-future-dark .input-area {
  background: rgba(40, 40, 44, 0.85); border-color: #4a4a4c;
}
.screen-future-dark .msg-input { color: #d1d1d6; }
.screen-future-dark .btn-send {
  background: #4a4a4c; border-color: #5c5c60; color: #aeaeb2;
}
.screen-future-dark .btn-send:hover { background: #5c5c60; box-shadow: none; }
.screen-future-dark .glass-tag {
  border-color: #5c5c60; color: #aeaeb2; background: rgba(40,40,44, 0.8);
}
.screen-future-dark .btn-record {
  background: rgba(60, 60, 64, 0.5); border-color: #4a4a4c; color: #8e8e93;
}
/* 시간 및 텍스트 딤 처리 */
.screen-future-dark .msg-time { color: #8e8e93; }

/* ════════════════════════════════════════════
   음성 녹음 버튼
════════════════════════════════════════════ */
/* 음성 녹음 버튼 */
.btn-record {
  background: rgba(255, 255, 255, 0.6); /* 어두운 색 제거, 밝고 투명한 유리 질감 */
  border: 1px solid var(--glass-border);
  border-radius: 12px; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; 
  color: var(--accent); /* 아이콘 색상을 포인트 블루 컬러로 변경 */
  transition: all 0.3s;
}
.btn-record:hover:not(:disabled) {
  background: #ffffff; /* 마우스 오버 시 완전한 흰색으로 밝아짐 */
  border-color: var(--accent); 
  color: var(--accent-soft); 
  box-shadow: 0 0 10px rgba(158,188,214,0.25);
}
.btn-record:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-record.recording {
  background: rgba(255, 107, 107, 0.15); border-color: rgba(255, 107, 107, 0.55);
  color: #ff6b6b; animation: recordPulse 1.2s ease-in-out infinite;
}
.btn-record.processing { opacity: 0.55; cursor: not-allowed; animation: none; }
@keyframes recordPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220, 60, 60, 0.35); }
  50%     { box-shadow: 0 0 0 8px rgba(220, 60, 60, 0); }
}

/* ════════════════════════════════════════════
   음성 분석 감정 배지 
════════════════════════════════════════════ */
.emotion-badge {
  display: none; font-size: 0.8rem; color: var(--text-main);
  padding: 6px 16px; background: rgba(90, 131, 168, 0.15);
  border: 1px solid rgba(158, 188, 214, 0.2); border-radius: 20px;
  margin-top: 8px; margin-bottom: 4px; animation: fadeIn 0.4s ease;
}
.emotion-badge--warn {
  background: rgba(255, 140, 50, 0.1); border-color: rgba(255, 140, 50, 0.3); color: rgba(255, 200, 140, 0.9);
}

/* ── "미래의 나와 대화하기" 버튼 영역 ───────────── */
.future-btn-wrap { margin-top: 24px; text-align: center; animation: fadeIn 1s ease; }
.future-btn-hint { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 16px; letter-spacing: 0.04em; }
.btn-future {
  position: relative; background: transparent;
  border: 1px solid rgba(158,188,214,0.4); border-radius: 50px;
  padding: 16px 40px; cursor: pointer; overflow: hidden; transition: all 0.4s;
}
.btn-future-text { position: relative; z-index: 2; font-family: var(--font-title); font-size: 1.05rem; color: var(--text-main); letter-spacing: 0.12em; }
.btn-future-glow {
  position: absolute; inset: -2px;
  background: radial-gradient(ellipse at center, rgba(158,188,214,0.25) 0%, transparent 70%);
  animation: futureGlow 3s ease-in-out infinite;
}
@keyframes futureGlow {
  0%,100% { opacity: 0.4; transform: scale(0.95); }
  50%     { opacity: 1;   transform: scale(1.05); }
}
.btn-future:hover { border-color: rgba(158,188,214,0.7); box-shadow: 0 0 30px rgba(90,131,168,0.4), 0 0 60px rgba(90,131,168,0.15); transform: translateY(-2px); }

/* ── 미래 채팅 화면 ──────────────────────────────── */
#screen-future { display: none; }
#screen-future.active { display: block; }
.future-loading-text { font-family: var(--font-title); font-size: 1rem; color: var(--text-sub); letter-spacing: 0.08em; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.glass-tag { display: inline-block; background: rgba(229, 240, 255, 0.7); border: 1px solid #e4f0fa40; border-radius: 30px; padding: 6px 18px; font-size: 0.85rem; color: var(--text-main); letter-spacing: 0.12em; margin-bottom: 16px; }

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width: 480px) {
  .app-title { font-size: 2rem; }
  .glass-card { padding: 24px 20px; }
  .chat-window { height: 360px; }
  .msg-wrap { max-width: 90%; }
}