/* ========================================================================
   V10.1 — 관계 끊기 칩 + 확인 모달
   scope: .card-cutoff, .cutoff-modal
   ======================================================================== */

/* ========== 칩 (카드 우하단) ========== */
.character-card { position: relative; }

.card-cutoff {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(232, 223, 212, 0.78);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    color .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  /* photo overlay 위에 띄움 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.card-cutoff .cco-ic {
  width: 11px;
  height: 11px;
  opacity: 0.85;
  flex: 0 0 11px;
}

.card-cutoff:hover {
  color: #fff;
  border-color: rgba(155, 46, 63, 0.7);
  background: rgba(155, 46, 63, 0.32);
}

.card-cutoff:active {
  transform: scale(0.94);
  background: rgba(155, 46, 63, 0.5);
  color: #fff;
}

/* ========== 확인 모달 ========== */
.cutoff-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.cutoff-modal.in {
  opacity: 1;
  pointer-events: auto;
}

.cutoff-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 9, 7, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cutoff-sheet {
  position: relative;
  width: min(360px, calc(100vw - 36px));
  padding: 30px 26px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2A2018 0%, #1E1612 100%);
  border: 1px solid rgba(200, 155, 74, 0.28);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 155, 74, 0.08) inset;
  text-align: center;
  color: var(--color-text, #E8DFD4);
  font-family: 'Noto Sans KR', sans-serif;
  transform: translateY(12px) scale(0.96);
  transition: transform .25s cubic-bezier(0.34, 1.36, 0.64, 1);
}
.cutoff-modal.in .cutoff-sheet {
  transform: translateY(0) scale(1);
}

.cutoff-orn {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--color-accent, #C89B4A);
  margin-bottom: 14px;
  letter-spacing: 4px;
}

.cutoff-title {
  font-family: 'Noto Serif KR', 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.3px;
  margin: 0 0 16px;
  color: var(--color-text, #E8DFD4);
}
.cutoff-title b {
  font-weight: 700;
  color: var(--color-accent, #C89B4A);
}

.cutoff-body {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(232, 223, 212, 0.7);
  margin: 0 0 26px;
}
.cutoff-body .cutoff-warn {
  color: var(--color-sub, #9B2E3F);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.cutoff-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cutoff-btn {
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cutoff-btn.cancel {
  background: linear-gradient(135deg, var(--color-accent, #C89B4A), #A57A30);
  color: #1A1410;
  box-shadow: 0 6px 16px rgba(200, 155, 74, 0.32);
}
.cutoff-btn.cancel:active {
  transform: translateY(1px);
}
.cutoff-btn.confirm {
  background: transparent;
  color: rgba(232, 223, 212, 0.55);
  font-weight: 500;
  font-size: 13px;
}
.cutoff-btn.confirm:hover {
  color: var(--color-sub, #9B2E3F);
}
.cutoff-btn.confirm:active {
  color: #ff5566;
  transform: translateY(1px);
}

/* ========================================================================
   V10.1 — 채팅 헤더 Option A: avatar 골드 ring + chevron hint
   scope: #chatAvatarBtn (.chat-profile-tap)
   ======================================================================== */

/* 1) avatar 에 골드 outline ring */
.chat-header .chat-profile-tap .avatar {
  position: relative;
  outline: 1px solid rgba(200, 155, 74, 0.4);
  outline-offset: 2px;
  transition: outline-color .2s ease;
}

/* 2) 이름 옆 chevron ›  (CSS pseudo, JS 변경 0) */
.chat-header .chat-profile-tap .info .name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-header .chat-profile-tap .info .name::after {
  content: '›';
  font-family: 'Playfair Display', 'Noto Serif KR', serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: var(--color-text-muted, #B8A990);
  opacity: 0.65;
  margin-left: 2px;
  transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
.chat-header .chat-profile-tap:hover .info .name::after,
.chat-header .chat-profile-tap:active .info .name::after {
  opacity: 1;
  color: var(--color-accent, #C89B4A);
  transform: translateX(2px);
}

/* 3) tap 영역 명확화 */
.chat-header .chat-profile-tap {
  border-radius: 12px;
  padding: 2px 6px 2px 2px;
  margin-left: -2px;
  transition: background-color .15s ease;
  cursor: pointer;
}
.chat-header .chat-profile-tap:hover {
  background: rgba(255, 255, 255, 0.04);
}
.chat-header .chat-profile-tap:active {
  background: rgba(200, 155, 74, 0.08);
}

/* 4) 첫 진입 시 펄스 (localStorage 플래그) */
.chat-header .chat-profile-tap.first-time .avatar {
  animation: chatAvatarPulse 2.4s ease-in-out infinite;
}
.chat-header .chat-profile-tap.first-time .info .name::after {
  animation: chevronNudge 2.4s ease-in-out infinite;
}
@keyframes chatAvatarPulse {
  0%, 100% { outline-color: rgba(200, 155, 74, 0.4); }
  50%      { outline-color: rgba(200, 155, 74, 0.95); }
}
@keyframes chevronNudge {
  0%, 100% { opacity: 0.65; transform: translateX(0); color: var(--color-text-muted, #B8A990); }
  50%      { opacity: 1;    transform: translateX(3px); color: var(--color-accent, #C89B4A); }
}

/* ========================================================================
   V11.15 — 챗 헤더 ▶ 인트로 영상 다시 보기 버튼
   scope: .chat-replay-btn
   ======================================================================== */
.chat-header .chat-replay-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0; padding: 0;
  color: var(--color-text-muted, #B8A990);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 38px;
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
}
.chat-header .chat-replay-btn[hidden] { display: none; }
.chat-header .chat-replay-btn svg {
  width: 18px; height: 18px;
}
.chat-header .chat-replay-btn:hover {
  background: rgba(200, 155, 74, 0.1);
  color: var(--color-accent, #C89B4A);
}
.chat-header .chat-replay-btn:active {
  background: rgba(200, 155, 74, 0.18);
  transform: scale(0.94);
}

/* ========== Toast (성공 알림) ========== */
.ms-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  z-index: 21000;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(26, 20, 16, 0.95);
  border: 1px solid rgba(200, 155, 74, 0.32);
  color: var(--color-text, #E8DFD4);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .22s ease, transform .25s cubic-bezier(0.34, 1.36, 0.64, 1);
  pointer-events: none;
}
.ms-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}