/* Make Money with Votel, Part 4 (voice AI): page-specific visuals.
   Builds on make-money-guide.css (.mm-*) and the sop-* guide classes. */

/* ---------- Hero scene: lock screen ---------- */
.mmv-lock-screen { padding: 1.1rem .75rem 1.2rem; background: radial-gradient(circle at 30% 0%, #1d4a72, transparent 60%), linear-gradient(180deg, #0c2236, #071727); color: #fff; }
.mmv-lock-time { text-align: center; }
.mmv-lock-time small { display: block; font: 600 .6rem/1 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mmv-lock-time b { display: block; margin: .25rem 0 .2rem; font-family: "Geist", sans-serif; font-size: 2.6rem; font-weight: 600; line-height: 1; }
.mmv-notif { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; padding: .55rem .6rem; border-radius: 14px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.mmv-lock-time + .mmv-notif { margin-top: 1rem; }
.mmv-notif b { display: block; font-size: .72rem; color: #fff; }
.mmv-notif small { display: block; font-size: .6rem; color: rgba(255,255,255,.65); }
.mmv-notif.is-missed { background: rgba(220,38,38,.22); border: 1px solid rgba(220,38,38,.55); }
.mmv-notif.is-missed b { color: #ffb4b4; }
.mmv-notif-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--rose); color: #fff; font-size: .75rem; }
.mmv-notif-icon.is-soft { background: rgba(255,255,255,.2); }
.mmv-thought { max-width: 230px; margin: .85rem auto 0; background: #fff; border: 1px solid var(--line); }
.mmv-thought small { display: block; margin-top: .25rem; font-size: .64rem; color: var(--ink-faint); }

/* ---------- Hero scene: voice agent ---------- */
.mmv-agent { padding: 1.1rem; }
.mmv-agent-head { display: flex; align-items: center; gap: .6rem; }
.mmv-agent-head b { display: block; font-size: .88rem; color: var(--ink); }
.mmv-agent-head small { display: block; font-size: .68rem; color: var(--ink-faint); }
.mmv-live { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 999px; background: var(--mint-soft); color: var(--mint-deep); font: 700 .58rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.mmv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-deep); }
.mmv-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; margin-top: .8rem; padding: 0 .6rem; border-radius: 14px; background: var(--ink); }
.mmv-wave i { display: block; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--mint), var(--cyan)); height: 30%; }
.mmv-wave i:nth-child(3n) { height: 70%; }
.mmv-wave i:nth-child(4n+1) { height: 50%; }
.mmv-wave i:nth-child(5n+2) { height: 85%; }
.mmv-wave i:nth-child(7n) { height: 40%; }
.mmv-transcript { display: grid; gap: .45rem; margin-top: .8rem; }
.mmv-transcript p { margin: 0; padding: .5rem .65rem; border-radius: 12px; font-size: .72rem; line-height: 1.45; color: var(--ink-soft); }
.mmv-transcript b { display: block; margin-bottom: .1rem; font: 700 .56rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.mmv-transcript .is-agent { margin-right: 1.2rem; background: var(--brand-soft); border-radius: 12px 12px 12px 4px; }
.mmv-transcript .is-agent b { color: var(--brand-deep); }
.mmv-transcript .is-caller { margin-left: 1.2rem; background: var(--frost); border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; }
.mmv-transcript .is-caller b { color: var(--ink-faint); }

/* ---------- Hero scene: morning screen ---------- */
.mmv-wake { padding: .8rem .75rem 1rem; }
.mmv-wake-head { font: 700 .62rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.mmv-booked { margin-top: .6rem; padding: .7rem; border-left: 4px solid var(--mint-deep); border-radius: 10px; background: linear-gradient(135deg, var(--mint-soft), #eef9ff); }
.mmv-booked small { display: block; font: 700 .56rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--mint-deep); }
.mmv-booked b { display: block; margin-top: .25rem; font-family: "Geist", sans-serif; font-size: 1.15rem; color: var(--ink); }
.mmv-booked span { display: block; margin-top: .15rem; font-size: .64rem; color: var(--ink-soft); }
.mmv-summary { margin-top: .6rem; padding: .6rem .65rem; border: 1px solid var(--line); border-radius: 10px; }
.mmv-summary small { display: block; font: 700 .56rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.mmv-summary p { margin: .3rem 0 0; font-size: .64rem; line-height: 1.45; color: var(--ink-soft); }
.mmv-float-247 { left: -2rem; bottom: 2.6rem; }

/* ---------- Before / after call logs ---------- */
.mmv-logs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.5rem 0 1rem; }
.mmv-log { padding: 1.1rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.mmv-log.is-after { border-color: rgba(11,222,177,.6); background: linear-gradient(145deg, #f2fffb, #e9f7ff); }
.mmv-log.is-after .mmv-log-head span { background: var(--mint-soft); color: var(--mint-deep); }
.mmv-log ul { display: grid; gap: .4rem; margin: .9rem 0 0 !important; padding: 0 !important; list-style: none !important; }
.mmv-log li { display: flex !important; align-items: center; gap: .6rem; margin: 0 !important; padding: .5rem .6rem !important; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.8); }
.mmv-log li i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--ink); font-style: normal; font-size: .72rem; font-weight: 800; }
.mmv-log li i.is-miss { background: #fde8e8; color: var(--rose); }
.mmv-log li b { display: block; font: 700 .68rem/1.2 "Geist Mono", monospace; color: var(--ink); }
.mmv-log li small { display: block; font-size: .76rem; line-height: 1.35; color: var(--ink-soft); }
.mmv-log > p { margin-top: .8rem !important; font-size: .82rem !important; line-height: 1.5 !important; color: var(--ink-soft); }

/* ---------- Packages: three cards ---------- */
@media (min-width: 641px) and (max-width: 1099px) {
  .sop-step .mmv-packages .mm-package:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .sop-step .mmv-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
}

/* ---------- Market prices ---------- */
.mmv-market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.mmv-market > div { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.mmv-market small { font: 700 .62rem/1.3 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.mmv-market b { font-family: "Geist", sans-serif; font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.mmv-market span { margin-top: auto; font-size: .74rem; color: var(--brand-deep); }
.mmv-market .is-claim { border-style: dashed; background: var(--frost); }

/* ---------- Previous / next pair ---------- */
.mmv-next-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mmv-next-pair .mm-next b { font-size: 1.05rem; }

/* ---------- Watch-outs: five cards ---------- */
.mmv-watch > :last-child { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .mmv-float-247 { left: -1rem; }
}
@media (max-width: 640px) {
  .mmv-logs, .mmv-market, .mmv-next-pair { grid-template-columns: 1fr; }
  .mmv-float-247 { left: -.4rem; bottom: 1.6rem; }
  .mmv-transcript .is-agent { margin-right: .4rem; }
  .mmv-transcript .is-caller { margin-left: .4rem; }
}