/* ===== Luna Chat Page ===== */

body.page-luna {
  padding-top: var(--header-height, 56px);
  padding-bottom: 0;
}

body.page-luna .bg-cosmos {
  background-image: url('../assets/bg_main.webp');
  background-size: cover;
  background-position: center;
}

.luna-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height, 56px));
  position: relative;
  z-index: 1;
}

/* --- Chat Container --- */
.luna-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: var(--content-wide, 720px);
  margin: 0 auto;
  width: 100%;
}

/* --- Widget mode (index.html) --- */
.luna-chat-widget {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
}
.luna-chat-widget .luna-chat-messages {
  min-height: 200px;
  max-height: 400px;
}
.luna-chat-widget .luna-chat-input {
  padding-bottom: 12px;
  background: rgba(255, 255, 255, 0.3);
}

/* --- Chat Header --- */
.luna-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.3);
}
.luna-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--color-primary-dim, rgba(91,168,168,0.1));
}
.luna-chat-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.luna-chat-status {
  font-size: 0.6875rem;
  color: var(--color-primary, #5BA8A8);
}
.luna-chat-turn {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

/* --- Messages Area --- */
.luna-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
  animation: msgAppear 0.3s ease both;
}
.msg-luna {
  align-self: flex-start;
}
.msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 4px;
}
.msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  word-break: break-word;
}
.msg-luna .msg-bubble {
  background: var(--bg-surface-1, #fff);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-glass);
}
.msg-user .msg-bubble {
  background: #2D3748;
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow-sm);
}
@keyframes msgAppear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.msg-typing .msg-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 14px 20px;
}
.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* --- Quick Chips --- */
.luna-chat-chips {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.luna-chat-chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-glass);
  background: var(--bg-surface-1, #fff);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.chip:hover {
  border-color: var(--color-primary, #5BA8A8);
  color: var(--color-primary, #5BA8A8);
  background: var(--color-primary-dim, rgba(91,168,168,0.1));
}

/* --- Input Area --- */
.luna-chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--tabbar-height, 64px) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-glass-solid, rgba(255,255,255,0.92));
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
}
.luna-chat-input input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full, 999px);
  background: var(--bg-surface-2, #EDF5F2);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 150ms ease;
}
.luna-chat-input input:focus {
  border-color: var(--color-primary, #5BA8A8);
}
.luna-chat-input input::placeholder {
  color: var(--text-muted);
}
.luna-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-cta, linear-gradient(135deg, #5BA8A8, #9E8DC0));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.luna-send-btn:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.luna-send-btn:active {
  transform: scale(0.95);
}

/* Turn limit with charge button */
.msg-turn-limit {
  text-align: center;
  padding: 16px;
  margin: 8px auto;
  max-width: 85%;
  background: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  align-self: center;
}
.msg-turn-limit p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.turn-limit-btn {
  padding: 8px 20px;
  border-radius: var(--radius-full, 999px);
  border: none;
  background: var(--gradient-cta, linear-gradient(135deg, #5BA8A8, #9E8DC0));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.turn-limit-btn:hover {
  opacity: 0.9;
}

/* System notice (not Luna's message) */
.msg-system-notice {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 8px 16px;
  background: var(--bg-surface-2, #EDF5F2);
  border-radius: var(--radius-full, 999px);
  align-self: center;
  max-width: 80%;
  margin: 4px auto;
}

/* Luna illustration lightbox */
.luna-illust-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
  cursor: pointer;
}
.luna-illust-overlay.closing {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.luna-illust-box {
  max-width: 360px;
  width: 85%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  animation: scaleIn 0.3s ease;
}
.luna-illust-box img {
  width: 100%;
  display: block;
}
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Make avatars clickable */
.msg-avatar, .luna-chat-avatar {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.msg-avatar:hover, .luna-chat-avatar:hover {
  transform: scale(1.15);
}

/* Hide tabbar and footer on luna page */
body.page-luna .tabbar,
body.page-luna #biz-footer {
  display: none;
}