:root {
  --v3-ease:cubic-bezier(.2,.84,.24,1);
  --v3-paper:#f5f0e7;
  --v3-ink:#0d3036;
  --v3-gold:#f0d49b;
}

.ai-badge { pointer-events:none; }

/* Opening: cinematic type, route line and an incoming-message hook. */
.start-screen {
  padding:88px 22px 26px;
  gap:0;
  justify-content:flex-end;
  overflow:hidden;
}
.start-screen::before {
  transform:scale(1.04);
  animation:v3BackgroundBreath 12s ease-in-out infinite alternate;
}
.start-screen::after {
  background:
    linear-gradient(180deg,rgba(4,20,24,.02),rgba(4,20,24,.17) 34%,rgba(4,20,24,.82) 72%,rgba(4,20,24,.97)),
    linear-gradient(100deg,rgba(255,255,255,.08),transparent 35%);
}
.start-atmosphere { position:absolute; z-index:0; inset:0; pointer-events:none; overflow:hidden; }
.start-atmosphere::before {
  content:""; position:absolute; inset:-30% -55%; opacity:.25;
  background:linear-gradient(110deg,transparent 43%,rgba(255,236,196,.28) 49%,transparent 55%);
  animation:v3LightSweep 7s ease-in-out infinite;
}
.start-atmosphere i {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#ffe8b4; box-shadow:0 0 14px rgba(255,227,169,.85);
  animation:v3Float 5s ease-in-out infinite;
}
.start-atmosphere i:nth-child(1){left:14%;top:19%;animation-delay:-.6s}
.start-atmosphere i:nth-child(2){left:78%;top:27%;width:3px;height:3px;animation-delay:-2.1s}
.start-atmosphere i:nth-child(3){left:61%;top:44%;animation-delay:-3.4s}
.start-atmosphere i:nth-child(4){left:25%;top:52%;width:2px;height:2px;animation-delay:-1.7s}
.start-atmosphere i:nth-child(5){left:87%;top:57%;width:2px;height:2px;animation-delay:-4.2s}
.start-route {
  position:absolute; z-index:2; top:108px; left:22px; right:108px;
  display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.72);
  font:700 10px/1 "Times New Roman","Microsoft YaHei",sans-serif; letter-spacing:.1em;
  animation:v3Rise .7s .05s var(--v3-ease) both;
}
.start-route i { flex:1; height:1px; position:relative; background:rgba(255,255,255,.38); overflow:visible; }
.start-route i::after {
  content:""; position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%;
  background:var(--v3-gold); box-shadow:0 0 0 5px rgba(240,212,155,.14);
  animation:v3Route 3.8s ease-in-out infinite;
}
.start-copy { position:relative; z-index:2; }
.start-screen .kicker {
  gap:8px; padding:0; color:rgba(255,255,255,.76); background:transparent; backdrop-filter:none;
  animation:v3Rise .75s .12s var(--v3-ease) both;
}
.start-screen .kicker span { width:7px; height:7px; border-radius:50%; background:#e4bc70; box-shadow:0 0 0 6px rgba(228,188,112,.12); animation:v3Pulse 1.8s ease-in-out infinite; }
.start-screen .title {
  margin:14px 0 13px; display:flex; flex-direction:column; align-items:flex-start;
  font-size:62px; line-height:.9; letter-spacing:-.075em;
}
.start-screen .title > span { animation:v3TitleReveal .85s .2s var(--v3-ease) both; }
.start-screen .title em {
  position:relative; margin-top:7px; padding:5px 12px 9px 8px; display:inline-flex; align-items:flex-end; gap:9px;
  color:#fff; background:linear-gradient(100deg,rgba(173,66,59,.9),rgba(101,39,37,.72));
  border:1px solid rgba(255,229,180,.32); border-radius:8px 22px 22px 8px;
  box-shadow:0 14px 32px rgba(34,9,8,.24); overflow:hidden;
  animation:v3TitleReveal .9s .32s var(--v3-ease) both;
}
.start-screen .title em::after {
  content:""; position:absolute; inset:-40% auto -40% -30%; width:26%; transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:v3TitleShine 4.2s 1.3s ease-in-out infinite;
}
.start-screen .title small { padding:5px 7px 4px; color:#572521; background:var(--v3-gold); border-radius:7px; font-size:15px; line-height:1; letter-spacing:.08em; }
.start-screen .subtitle { max-width:350px; font-size:16px; line-height:1.65; animation:v3Rise .8s .46s var(--v3-ease) both; }
.incoming-card {
  position:relative; z-index:3; margin:18px 0 14px; padding:11px 12px;
  display:grid; grid-template-columns:42px 1fr 8px; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.28); border-radius:17px;
  color:#fff; background:rgba(7,29,34,.64); box-shadow:0 15px 38px rgba(0,0,0,.22);
  backdrop-filter:blur(18px); animation:v3Notification .72s .72s var(--v3-ease) both;
}
.incoming-card img { width:42px; height:42px; border:2px solid rgba(255,255,255,.72); border-radius:13px; object-fit:cover; }
.incoming-card span { display:block; margin-bottom:4px; color:rgba(255,255,255,.62); font-size:11px; }
.incoming-card b { display:block; font-size:14px; line-height:1.45; }
.incoming-card > i { width:7px; height:7px; border-radius:50%; background:#e8bd70; box-shadow:0 0 0 5px rgba(232,189,112,.13); }
.start-actions { position:relative; z-index:3; margin-top:0; animation:v3Rise .8s .9s var(--v3-ease) both; }
.start-button { min-height:58px; padding:7px 8px 7px 19px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; }
.start-button::after { display:none; }
.start-button i { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; color:#fff; background:#15383d; font:700 20px/1 "Times New Roman",serif; transition:transform .2s ease; }
.start-button:active i { transform:rotate(45deg) scale(.92); }
.start-screen .microcopy { margin:10px 2px 0; font-size:10px; letter-spacing:.02em; }

/* Chat occupies the whole device. Messages reveal first; the decision sheet arrives last. */
.chat-screen {
  height:100%; min-height:100%; padding:43px 0 0; display:flex; flex-direction:column;
  overflow:hidden; background:#dcd9d0;
}
.chat-screen::before { transform:scale(1.04); animation:v3BackgroundBreath 14s ease-in-out infinite alternate; }
.chat-screen::after { background:linear-gradient(180deg,rgba(5,24,28,.16),rgba(5,24,28,.4) 35%,rgba(5,24,28,.72)); }
.chat-topbar {
  position:relative; z-index:8; flex:0 0 auto; min-height:82px; margin:5px 9px 0; padding:11px 96px 10px 12px;
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  border:1px solid rgba(255,255,255,.28); border-radius:21px 21px 12px 12px;
  color:#fff; background:rgba(7,31,36,.74); box-shadow:0 12px 30px rgba(0,0,0,.18); backdrop-filter:blur(18px);
}
.chat-contact { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-contact img { width:42px; height:42px; border:2px solid rgba(255,255,255,.85); border-radius:13px; object-fit:cover; }
.chat-contact b { display:block; font-size:16px; line-height:1.25; }
.chat-contact span { display:block; margin-top:2px; color:rgba(255,255,255,.62); font-size:11px; }
.chat-context { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.68); font-size:10px; white-space:nowrap; }
.chat-context span { padding:3px 6px; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-family:"Times New Roman",serif; }
.chat-context b { overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:700; letter-spacing:.05em; }
.chat-progress { z-index:9; flex:0 0 2px; height:2px; margin:0 22px; overflow:hidden; background:rgba(255,255,255,.18); }
.chat-progress span { display:block; height:100%; background:linear-gradient(90deg,#e0ba72,#fff0bf); box-shadow:0 0 10px rgba(255,232,177,.72); }
.chat-thread {
  position:relative; z-index:4; flex:1 1 auto; min-height:0; margin:7px 8px 0; padding:17px 11px 112px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain;
  border-radius:24px 24px 0 0; background:rgba(239,237,230,.95);
  box-shadow:0 -8px 42px rgba(0,0,0,.13); backdrop-filter:blur(20px);
  scrollbar-width:none;
}
.chat-thread::-webkit-scrollbar { display:none; }
.day-stamp { margin-bottom:16px; }
.bubble-row {
  position:relative; z-index:2; width:100%; margin:0 0 15px; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; gap:8px;
}
.bubble-row.me { grid-template-columns:minmax(0,1fr) 48px; }
.message-meta { grid-column:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.message-stack { grid-column:2; max-width:88%; justify-self:start; min-width:0; }
.bubble-row.me .message-meta { grid-column:2; grid-row:1; }
.bubble-row.me .message-stack { grid-column:1; grid-row:1; max-width:88%; justify-self:end; }
.message-name { order:0; margin:0; width:100%; color:#718083; font-size:10px; line-height:1.2; text-align:center; }
.message-avatar { order:1; width:42px; height:42px; border-radius:13px; }
.bubble-row.me .message-name { text-align:center; }
.bubble { position:relative; padding:12px 14px; font-size:16px; line-height:1.62; }
.bubble-row:not(.me) .bubble::before,
.bubble-row.me .bubble::after {
  content:""; position:absolute; top:14px; width:9px; height:13px; background:inherit;
}
.bubble-row:not(.me) .bubble::before { left:-6px; clip-path:polygon(100% 0,100% 100%,0 18%); }
.bubble-row.me .bubble::after { right:-6px; clip-path:polygon(0 0,100% 18%,0 100%); }
.chat-beat { opacity:0; transform:translateY(18px) scale(.97); pointer-events:none; }
.chat-beat.is-visible { opacity:1; transform:none; pointer-events:auto; transition:opacity .34s ease,transform .48s var(--v3-ease); }
.bubble mark {
  padding:2px 6px; color:#69322d; background:linear-gradient(180deg,#f8ddb0,#eec382);
  border:1px solid rgba(126,77,34,.2); border-radius:7px; box-shadow:0 3px 10px rgba(147,88,34,.14);
  font-weight:800; white-space:nowrap; animation:v3Keyword 2.6s ease-in-out infinite;
}
.form-card.chat-beat,.verification.chat-beat { margin:5px 2px 16px; }
.typing-row {
  height:48px; margin:2px 0 12px; display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease;
}
.typing-row.is-active { opacity:1; transform:none; }
.typing-row.is-done { opacity:0; transform:translateY(8px); }
.typing-row img { width:34px; height:34px; border:2px solid #fff; border-radius:11px; object-fit:cover; }
.typing-row > span { padding:10px 12px; display:flex; gap:4px; border-radius:7px 15px 15px 15px; background:#fff; box-shadow:0 6px 16px rgba(16,47,53,.08); }
.typing-row i { width:5px; height:5px; border-radius:50%; background:#819092; animation:v3Typing 1s ease-in-out infinite; }
.typing-row i:nth-child(2){animation-delay:.14s}.typing-row i:nth-child(3){animation-delay:.28s}
.chat-scrim {
  position:absolute; z-index:10; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 24%,rgba(4,20,24,.12) 50%,rgba(4,20,24,.62));
  transition:opacity .32s ease;
}
.chat-scrim.is-open { opacity:1; }
.chat-decision {
  position:absolute; z-index:12; left:0; right:0; bottom:0; max-height:min(68%,580px); margin:0;
  padding:8px 14px max(18px,env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(255,255,255,.55); border-radius:25px 25px 0 0;
  background:rgba(247,242,233,.98); box-shadow:0 -22px 55px rgba(4,20,24,.28); backdrop-filter:blur(22px);
  opacity:0; transform:translateY(104%); pointer-events:none;
  transition:opacity .25s ease,transform .56s var(--v3-ease);
}
.chat-decision.is-open { opacity:1; transform:none; pointer-events:auto; }
.decision-handle { width:42px; height:4px; margin:1px auto 5px; border-radius:99px; background:rgba(16,47,53,.19); }
.chat-decision .task-box { margin:5px 0 10px; padding:10px 12px; box-shadow:none; }
.chat-decision .task-icon { width:34px; height:34px; flex-basis:34px; }
.chat-decision .choice { min-height:58px; }
/* Reliable mobile scrolling and a clearly tappable agreement decision area. */
.scene-screen {
  display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain;
  padding-bottom:max(42px,env(safe-area-inset-bottom));
}
.scene-screen .scene-body { min-height:auto; }
.agreement-screen .scene-hero { min-height:285px; }
.agreement-screen .scene-body { position:relative; z-index:3; padding-bottom:34px; }
.agreement { position:relative; overflow:hidden; }
.agreement::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#315d63,#e0bc76,#a8443f); }
.agreement-seal {
  position:absolute; top:18px; right:17px; padding:6px 8px; transform:rotate(7deg);
  border:2px solid rgba(168,68,63,.5); border-radius:7px; color:#98423e; font-size:11px; font-weight:900; letter-spacing:.08em;
}
.agreement-decision {
  position:relative; z-index:6; margin-top:14px; padding:1px 0 4px; pointer-events:auto;
}
.agreement-decision .choice { position:relative; z-index:7; touch-action:manipulation; cursor:pointer; }

/* Richer emphasis and page motion beyond simple color changes. */
.scene-copy mark {
  position:relative; display:inline-block; margin:1px 2px; padding:1px 7px 2px;
  color:#fff1c7; background:rgba(154,54,50,.78); border:1px solid rgba(255,222,166,.3); border-radius:7px;
  box-shadow:0 5px 15px rgba(40,8,7,.2); transform:rotate(-1deg);
}
.scene-hero { animation:v3HeroIn .65s var(--v3-ease) both; }
.scene-hero::before {
  content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 45%,rgba(255,255,255,.1) 50%,transparent 55%);
  animation:v3HeroSweep 6.5s ease-in-out infinite;
}
.scene-body > * { animation:v3Rise .52s var(--v3-ease) both; }
.scene-body > *:nth-child(2){animation-delay:.08s}.scene-body > *:nth-child(3){animation-delay:.14s}.scene-body > *:nth-child(4){animation-delay:.2s}
.choice-arrow { transition:transform .2s var(--v3-ease),background .2s ease,color .2s ease; }
.choice:hover .choice-arrow,.choice:focus-visible .choice-arrow { transform:translateX(3px); }
.progress span,.chat-progress span { position:relative; overflow:hidden; }
.progress span::after,.chat-progress span::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); animation:v3Progress 3s ease-in-out infinite;
}

@keyframes v3BackgroundBreath { from{transform:scale(1.04) translate3d(0,0,0)} to{transform:scale(1.11) translate3d(-1.5%,-1%,0)} }
@keyframes v3LightSweep { 0%,20%{transform:translateX(-35%)} 68%,100%{transform:translateX(40%)} }
@keyframes v3Float { 0%,100%{transform:translateY(0);opacity:.35} 50%{transform:translateY(-14px);opacity:1} }
@keyframes v3Route { 0%{left:0} 70%,100%{left:calc(100% - 5px)} }
@keyframes v3Pulse { 0%,100%{transform:scale(.88);opacity:.65} 50%{transform:scale(1.1);opacity:1} }
@keyframes v3Rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes v3TitleReveal { from{opacity:0;transform:translateY(32px) skewY(4deg);filter:blur(6px)} to{opacity:1;transform:none;filter:none} }
@keyframes v3TitleShine { 0%,25%{left:-30%} 62%,100%{left:120%} }
@keyframes v3Notification { from{opacity:0;transform:translateX(45px) scale(.94)} to{opacity:1;transform:none} }
@keyframes v3Keyword { 0%,100%{box-shadow:0 3px 10px rgba(147,88,34,.12)} 50%{box-shadow:0 4px 16px rgba(147,88,34,.28)} }
@keyframes v3Typing { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-3px);opacity:1} }
@keyframes v3HeroIn { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} }
@keyframes v3HeroSweep { 0%,35%{transform:translateX(-38%)} 75%,100%{transform:translateX(38%)} }
@keyframes v3Progress { 0%,20%{transform:translateX(-100%)} 65%,100%{transform:translateX(100%)} }

@media (max-height:720px) {
  .start-screen { padding-top:78px; }
  .start-route { top:92px; }
  .start-screen .title { font-size:51px; margin-top:10px; }
  .incoming-card { margin:11px 0 9px; }
  .start-screen .subtitle { font-size:14px; line-height:1.55; }
  .chat-topbar { min-height:72px; padding-top:8px; padding-bottom:8px; }
  .chat-contact img { width:37px; height:37px; }
  .chat-decision { max-height:72%; }
}

@media (prefers-reduced-motion:reduce) {
  .start-screen::before,.start-atmosphere::before,.start-atmosphere i,.start-route i::after,
  .start-screen .kicker span,.start-screen .title em::after,.scene-hero::before,.bubble mark,
  .progress span::after,.chat-progress span::after { animation:none; }
  .start-route,.start-screen .kicker,.start-screen .title > span,.start-screen .title em,
  .start-screen .subtitle,.incoming-card,.start-actions,.scene-hero,.scene-body > * { animation-duration:.01ms; animation-delay:0s; }
  .chat-beat.is-visible,.chat-decision { transition:none; }
}