/* ═══════════════════════════════════════
   shared/note-chat.css — 노트 필담 채팅 스타일
   가로줄 위에 텍스트를 쓰는 노트 메타포
   ═══════════════════════════════════════ */

:root {
  --note-bg: #fffefd;
  --note-line-color: rgba(160, 146, 124, 0.35);
  --note-line-h: 32px;
  --note-ai-icon-size: 22px;
  --note-ai-indent: 30px;
}

/* ═══ 노트 필담 페이지 (page-right 에 적용) ═══ */
.note-chat-page {
  padding: 44px 36px 60px 36px !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    transparent calc(var(--note-line-h) - 1px),
    var(--note-line-color) calc(var(--note-line-h) - 1px),
    var(--note-line-color) var(--note-line-h)
  ) !important;
  background-size: 100% var(--note-line-h) !important;
  background-attachment: local !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  display: flex !important;
  flex-direction: column !important;
}

.note-chat-page::-webkit-scrollbar {
  display: none;
}

/* ═══ 노트 한 줄 ═══ */
.note-line {
  min-height: var(--note-line-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 2px;
  opacity: 0;
}

.note-line.instant {
  opacity: 1;
  transition: none;
}

.note-line-blank {
  opacity: 1;
}

/* ── AI 메시지 ── */
.note-line-ai {
  font-family: 'Gowun Batang', serif;
  font-size: 15px;
  line-height: var(--note-line-h);
  color: var(--ink);
}

.note-line-ai.note-line-indent {
  padding-left: var(--note-ai-indent);
}

.note-ai-icon {
  width: var(--note-ai-icon-size);
  height: var(--note-ai-icon-size);
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ── 사용자 메시지 ── */
.note-line-user {
  font-family: 'Gowun Batang', serif;
  font-size: 15px;
  line-height: var(--note-line-h);
  color: var(--ink);
}

.note-line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 필기 애니메이션 ── */
.note-line.writing {
  animation: noteLineWrite 0.3s ease forwards;
}

@keyframes noteLineWrite {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ═══ 인라인 입력 (contenteditable) ═══ */
.note-inline-input-wrap {
  position: relative;
  min-height: var(--note-line-h);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.note-inline-input {
  width: 100%;
  min-height: var(--note-line-h);
  line-height: var(--note-line-h);
  padding-right: 54px;
  font-family: 'Gowun Batang', serif;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: var(--accent, #7a5c1e);
}

.note-inline-input:empty::before {
  content: attr(data-placeholder);
  color: #c0b8a8;
  font-style: italic;
}

/* 전송 버튼 */
.note-inline-send {
  position: absolute;
  right: -4px;
  bottom: 4px;
  padding: 4px 14px;
  border: none;
  border-radius: 12px;
  background: var(--accent, #7a5c1e);
  color: #fff;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  white-space: nowrap;
  z-index: 10;
}

.note-inline-send.show {
  opacity: 1;
  pointer-events: auto;
}

.note-inline-send:hover {
  background: var(--cover, #2c2218);
}

/* ═══ 타이핑 인디케이터 ═══ */
.note-typing-indicator {
  min-height: var(--note-line-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: var(--note-ai-indent);
}

.note-typing-indicator .typing-dots {
  display: flex;
  gap: 3px;
}

.note-typing-indicator .typing-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--ink-faint, #a0927c);
  border-radius: 50%;
  animation: note-dot-bounce 1.2s infinite;
}

.note-typing-indicator .typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.note-typing-indicator .typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes note-dot-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ═══ 노트 챗 액션 버튼 ═══ */
.note-chat-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 50;
  pointer-events: auto;
}

.note-chat-action-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 16px;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.note-chat-action-btn.primary {
  background: var(--accent, #7a5c1e);
  color: #fff;
  box-shadow: 0 2px 6px rgba(122, 92, 30, 0.2);
}

.note-chat-action-btn.primary:hover {
  background: var(--cover, #2c2218);
  transform: translateY(-1px);
}

.note-chat-action-btn.secondary {
  background: #fff;
  color: var(--ink-light, #6b5d4a);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.note-chat-action-btn.secondary:hover {
  background: var(--paper, #f8f3e8);
}

/* ═══ 빈 노트 페이지 (내용 없을 때) ═══ */
.note-chat-page-empty {
  position: relative;
}

.note-chat-page-empty::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ═══ .hidden 우선순위 보장 (page 숨김 버그 수정) ═══ */
.note-chat-page.hidden {
  display: none !important;
}

/* ═══ 반응형 (모바일/태블릿) ═══ */
@media (max-width: 1200px) {
  :root {
    --note-line-h: clamp(34px, 5vw, 44px);
  }

  .note-chat-page {
    padding: 32px 24px 60px 24px !important;
  }

  .note-line-ai {
    font-size: clamp(15px, 3.2vw, 22px);
    line-height: var(--note-line-h);
  }

  .note-line-user {
    font-size: clamp(15px, 3.2vw, 22px);
    line-height: var(--note-line-h);
  }

  .note-inline-input {
    font-size: clamp(15px, 3.2vw, 22px);
    line-height: var(--note-line-h);
  }

  .note-chat-action-btn {
    font-size: clamp(13px, 2.8vw, 18px);
    padding: 10px 22px;
  }
}

/* ── 전역 고정 하단 래퍼 (스크롤 무관) ── */
.note-chat-fixed-wrap {
  position: absolute;
  bottom: 15px;
  right: 0;
  width: 50%;
  pointer-events: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
@media (max-width: 1200px) {
  .note-chat-fixed-wrap {
    width: 100%;
  }
}

/* ── 턴 표시 인디케이터 ── */
.note-turn-indicator-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.note-turn-indicator {
  display: flex;
  gap: 8px;
  background: var(--paper, rgba(255, 254, 253, 0.9));
  padding: 8px 14px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.note-turn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint, #a0927c);
  opacity: 0.3;
  transition: all 0.3s ease;
}

.note-turn-dot.filled {
  opacity: 1;
  background: var(--accent, #7a5c1e);
}