/**
 * Peeka · Pastel Soft Theme
 * 粉彩柔和风 · 低饱和、无霓虹
 */

/* ── Tokens (scoped to phone) ── */
.phone-screen {
  --bg-base: #fffaf0;
  --bg-warm: #f0ead6;
  --bg-screen: #fffaf0;
  --surface: #ffffff;
  --primary: #ffc1cc;
  --primary-hover: #f4b0bc;
  --aux-pink: #f4c2c2;
  --aux-cyan: #e7feff;
  --aux-cream: #f0ead6;
  --primary-gradient: #ffc1cc;
  --primary-glow: 0 4px 16px rgba(255, 193, 204, 0.35);
  --accent-soft: rgba(255, 193, 204, 0.35);
  --secondary-soft: rgba(231, 254, 255, 0.6);
  --border: rgba(255, 193, 204, 0.35);
  --border-strong: rgba(255, 193, 204, 0.5);
  --card-white: #ffffff;
  --text-dark: #5c5346;
  --text-muted: #9a9088;
  --text-on-primary: #5c5346;
  --text-light: #c4bbb2;
  --btn-disabled: #ece8e4;
  --radius-card: 24px;
  --radius-button: 999px;
  --radius-input: 999px;
  --radius-option: 24px;
  --shadow-card: 0 8px 28px rgba(255, 193, 204, 0.12);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* legacy aliases */
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --secondary: var(--aux-cyan);
  --pink-primary: var(--primary);
  --pink-soft: var(--accent-soft);
  --bg-pink-light: var(--bg-base);
  --bg-pink-mid: var(--bg-warm);
}

/* ── Global screen bg + noise ── */
.phone-screen .screen {
  background: var(--bg-screen);
  animation: slideInSpring 0.4s var(--spring);
}

@keyframes slideInSpring {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.phone-screen .screen--noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Card System ── */
.phone-screen .invite-card,
.phone-screen .home-card-btn,
.phone-screen .pending-item,
.phone-screen .record-item,
.phone-screen .dialog-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}

.phone-screen .invite-card {
  padding: 20px;
}

.phone-screen .surprise-card {
  padding: 20px;
  overflow: hidden;
}

/* ── Primary Button ── */
.phone-screen .btn-primary {
  min-height: 52px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-button);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: var(--primary-glow);
  transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.phone-screen .btn-primary:not(:disabled):not(.disabled):hover {
  background: var(--primary-hover);
  transform: scale(1.01);
}

.phone-screen .btn-primary:not(:disabled):not(.disabled):active {
  transform: scale(0.98);
}

.phone-screen .btn-primary.disabled,
.phone-screen .btn-primary:disabled {
  background: var(--btn-disabled);
  color: var(--text-muted);
  box-shadow: none;
}

/* ── Secondary / Aux Buttons ── */
.phone-screen .btn-secondary {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(244, 194, 194, 0.6);
  border-radius: var(--radius-button);
  background: var(--aux-pink);
  color: var(--text-on-primary);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.phone-screen .btn-secondary:hover {
  background: #eec0c0;
}

/* ── Links & text actions ── */
.phone-screen .btn-text,
.phone-screen .link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 193, 204, 0.7);
  text-underline-offset: 3px;
  border-bottom: none;
}

.phone-screen .btn-text:hover,
.phone-screen .link:hover {
  color: var(--primary-hover);
}

/* ── Input (pill) ── */
.phone-screen .field-input,
.phone-screen .clue-answer-input,
.phone-screen .msg-compose-input,
.phone-screen .chat-input {
  height: auto;
  min-height: 48px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text-dark);
  font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.phone-screen .field-input:focus,
.phone-screen .clue-answer-input:focus,
.phone-screen .msg-compose-input:focus,
.phone-screen .chat-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.phone-screen .field-label,
.phone-screen .section-label,
.phone-screen .text-caption,
.phone-screen .text-body,
.phone-screen .hint-preview,
.phone-screen .wx-emoji-label {
  color: var(--text-muted);
}

.phone-screen .h1-question,
.phone-screen .h2-card,
.phone-screen .h2,
.phone-screen .nav-title,
.phone-screen .home__logo,
.phone-screen .editable-text,
.phone-screen .editable-text.title {
  color: var(--text-dark);
}

.phone-screen .text-pink,
.phone-screen .text-accent,
.phone-screen .text-accent-line {
  color: var(--primary);
}

/* ── Tags & Chips ── */
.phone-screen .hint-tag,
.phone-screen .clue-chip,
.phone-screen .type-chip,
.phone-screen .clue {
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--text-dark);
  transition: all 0.3s ease;
}

.phone-screen .hint-tag.selected,
.phone-screen .clue-chip.selected,
.phone-screen .type-chip.selected,
.phone-screen .clue--on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
  box-shadow: none;
}

.phone-screen .template-tab.active,
.phone-screen .record-tab.active,
.phone-screen .tab--on {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-on-primary);
}

.phone-screen .template-tab,
.phone-screen .record-tab,
.phone-screen .tab {
  border-radius: 24px;
  transition: all 0.3s ease;
}

/* ── Wx emoji picker ── */
.phone-screen .wx-emoji-item {
  border-radius: 24px;
  border: 1px solid var(--primary);
  transition: all 0.3s ease;
}

.phone-screen .wx-emoji-item.selected {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--primary-glow);
}

.phone-screen .wx-emoji-item.selected .wx-name {
  color: var(--text-on-primary);
}

/* ── P06 Hero emoji ── */
.phone-screen .wx-invite-hero {
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone-screen .ins-photo-area,
.phone-screen .hero-cyan {
  background: #e7feff;
}

.phone-screen .hero-primary {
  background: var(--primary);
}

.phone-screen .hero-primary .bi-cn,
.phone-screen .hero-primary .bi-en {
  color: var(--text-on-primary);
}

.phone-screen .hero-white {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.phone-screen .wx-emoji-large {
  font-size: clamp(88px, 20vh, 140px);
  line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(255, 193, 204, 0.25));
}

.phone-screen .wx-emoji-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  text-shadow: none;
  margin-top: 8px;
}

.phone-screen .h1-question {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-dark);
  line-height: 1.15;
}

/* ── P08 Option grid ── */
.phone-screen .option-item {
  border-radius: 24px;
  border: 1px solid var(--primary);
  background: var(--surface);
  transition: transform 0.35s var(--spring), background 0.3s ease, box-shadow 0.3s ease;
}

.phone-screen .option-item:hover {
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(255, 193, 204, 0.15);
}

.phone-screen .option-item.selected {
  background: radial-gradient(circle at center, rgba(255, 193, 204, 0.55) 0%, rgba(255, 193, 204, 0.15) 50%, #fff 100%);
  border: 2px solid var(--primary);
  transform: scale(1.06);
  box-shadow: var(--primary-glow);
}

/* ── Step dots & status ── */
.phone-screen .step-dot.done {
  background: var(--primary);
  box-shadow: none;
}

.phone-screen .pending-item .status,
.phone-screen .record-item__tag {
  color: var(--primary-hover);
}

/* ── Success decor ── */
.phone-screen .success-stage {
  position: relative;
  text-align: center;
  padding-top: 24px;
}

.phone-screen .success-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.phone-screen .success-blob--pink {
  width: 220px;
  height: 220px;
  background: rgba(255, 193, 204, 0.25);
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.phone-screen .success-blob--cyan {
  width: 120px;
  height: 120px;
  background: rgba(231, 254, 255, 0.5);
  top: 80px;
  right: 24px;
}

.phone-screen .success-blob--purple {
  width: 200px;
  height: 200px;
  background: rgba(244, 194, 194, 0.3);
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.phone-screen .success-stage--comfort .comfort-msg {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.phone-screen .success-stage > *:not(.success-blob) {
  position: relative;
  z-index: 1;
}

.phone-screen .success-stage .h2-card {
  color: var(--text-dark);
}

.phone-screen .success-stage .text-body,
.phone-screen .success-stage .text-caption {
  color: var(--text-muted);
}

.phone-screen .success-stage .text-accent-line {
  color: var(--primary-hover);
  font-weight: 600;
}

/* ── Aux: Chat FAB (cyan) ── */
.phone-screen .chat-fab {
  border: 1px solid rgba(231, 254, 255, 0.8);
  background: var(--aux-cyan);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-card);
}

.phone-screen .chat-fab:hover {
  background: #d4f8fc;
  box-shadow: 0 6px 20px rgba(231, 254, 255, 0.5);
}

/* ── Aux: Ghost / No button (cream) ── */
.phone-screen .btn-ghost-sm,
.phone-screen .btn-no {
  background: var(--aux-cream);
  border-color: rgba(240, 234, 214, 0.8);
  color: var(--text-dark);
}

.phone-screen .btn-ghost-sm:hover,
.phone-screen .btn-no:hover {
  background: #e8e2d4;
}

/* ── Home card btn ── */
.phone-screen .home-card-btn {
  border-color: var(--primary);
}

.phone-screen .home-card-btn:hover {
  background: var(--accent-soft);
}

.phone-screen .chat-bubble--me {
  background: var(--primary);
  color: var(--text-on-primary);
  box-shadow: none;
}

.phone-screen .chat-send {
  background: var(--primary);
  color: var(--text-on-primary);
}

/* ── Ripple (subtle) ── */
.phone-screen .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleExpand 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

.phone-screen .ripple--primary {
  background: rgba(255, 193, 204, 0.5);
}

.phone-screen .ripple--secondary {
  background: rgba(231, 254, 255, 0.6);
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Nav back stays muted ── */
.phone-screen .nav-back {
  color: var(--text-muted);
  border-color: var(--border);
}

/* ── Cat stickers ── */
.phone-screen .cat-sticker {
  opacity: 0.05;
}

/* ── Disabled CTA ── */
.phone-screen .btn-primary.disabled {
  background: var(--btn-disabled) !important;
  color: var(--text-muted) !important;
}

/* ── Friend list ── */
.phone-screen .friend-item {
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: all 0.3s ease;
}

.phone-screen .friend-item.selected {
  background: var(--accent-soft);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-card);
}

/* ── Inactive tabs ── */
.phone-screen .template-tab:not(.active),
.phone-screen .record-tab:not(.active) {
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--text-dark);
}

/* ── Dialog ── */
.phone-screen .dialog-box {
  border: 1px solid var(--border);
}

/* ── Chat bubbles ── */
.phone-screen .chat-bubble {
  border-radius: 24px;
}

.phone-screen .chat-anon-tip {
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--aux-cream);
}