/* Keep the reply affordance visible even after the first trip prompt is gone. */
#chat-overlay .composer{align-items:center}
#chat-overlay .composer textarea{flex:1 1 0;min-width:0;min-height:44px;height:44px;max-height:120px;padding:10px 12px;border:1px solid #b59a6066;border-radius:5px;background:#ffffff05;color:#fff;caret-color:#d4b278;line-height:22px}
#chat-overlay .composer textarea::placeholder{color:#b0b1b3;opacity:1}
#chat-overlay .composer textarea:focus{border-color:#d4b278}
#chat-overlay .messages{min-height:0;overscroll-behavior:contain}
@media(max-width:760px){
 #chat-overlay{top:var(--chat-viewport-top,0px);height:var(--chat-viewport-height,100dvh);bottom:auto}
 #chat-overlay .chat-panel{height:100%;min-height:0;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
 #chat-overlay .composer textarea{font-size:16px}
}
.chat-thinking{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 2px;vertical-align:middle}
.chat-thinking i{display:block;width:6px;height:6px;border-radius:50%;background:var(--gold);animation:chat-thinking-pulse 1.2s ease-in-out infinite}
.chat-thinking i:nth-child(2){animation-delay:.16s}.chat-thinking i:nth-child(3){animation-delay:.32s}
@keyframes chat-thinking-pulse{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.chat-thinking i{animation:none;opacity:.8}}
/* Larger conversation text without changing the typeface or palette. */
#chat-overlay .bubble{font-size:14px;line-height:1.65}
#chat-overlay .composer textarea{font-size:14px}
#chat-overlay .chat-head strong{font-size:16px}
#chat-overlay .quick button{font-size:12px}
#chat-overlay .lead-toggle{font-size:13px}
@media(max-width:760px){
 #chat-overlay .bubble{font-size:16px;line-height:1.65}
 #chat-overlay .composer textarea,#chat-overlay .contact>input{font-size:16px}
 #chat-overlay .quick button,#chat-overlay .lead-toggle,#chat-overlay .contact>label{font-size:14px}
 #chat-overlay .note{font-size:11px;line-height:1.5}
}
/* Give the conversation more room on phones, especially above the keyboard. */
#chat-overlay .composer textarea:focus{outline:none;box-shadow:0 0 0 1px #d4b278}
@media(max-width:760px){
 #chat-overlay .chat-head{padding:10px 16px;gap:10px;min-height:60px}
 #chat-overlay .chat-head .avatar{width:30px;height:30px;flex-shrink:0}
 #chat-overlay .chat-head .close{min-width:44px;min-height:44px;padding:0}
 #chat-overlay .voice-toolbar{padding:6px 16px}
 #chat-overlay .messages{padding:14px 16px;gap:12px}
 #chat-overlay .composer{padding:8px 16px}
 #chat-overlay .lead-toggle{margin:0 16px;padding:8px 0;min-height:44px;flex-shrink:0}
 #chat-overlay.chat-tight .voice-toolbar,#chat-overlay.chat-tight .quick{display:none}
 #chat-overlay.chat-tight .chat-head{padding:4px 16px;min-height:52px}
}

/* Keep the mobile homepage invitation compact until the visitor engages. */
@media(max-width:760px){
 #trip-start:not(.trip-expanded) #trip-description{height:50px;min-height:50px;max-height:50px;resize:none;overflow:hidden;white-space:nowrap}
 #trip-start:not(.trip-expanded) .trip-contact-row,
 #trip-start:not(.trip-expanded) .voice-help,
 #trip-start:not(.trip-expanded) #trip-email-error,
 #trip-start:not(.trip-expanded) + #email-note{display:none!important}
}

/* Reserve the opening video section before scripts or fonts load.
   Small viewport units stay stable when the mobile browser bars change. */
@media(max-width:760px){
 .hero{min-height:612px;min-height:max(612px,calc(100vh - 124px));min-height:max(612px,calc(100svh - 124px))}
}

/* Mobile uses the complete hero canvas, with a light readability overlay. */
@media(max-width:760px){
 .hero:before,.hero .hero-video{inset:0;width:100%;height:100%;mask-image:none;-webkit-mask-image:none}
 .hero:after{background:linear-gradient(90deg,#080909c9 0%,#08090980 32%,#08090924 70%,#08090908 100%),linear-gradient(0deg,#08090940,#08090910 50%,#08090945)}
}

/* Keep the sun just beyond the right edge across mobile screen sizes. */
@media(max-width:760px){
 .hero{overflow:hidden}
 .hero:before,.hero .hero-video{top:auto;bottom:0;height:115%;min-height:calc(172vw + 78px)}
 .hero:before{background-position:calc(32.8% + 67.2vw + 45px) center}
 .hero .hero-video{object-position:calc(32.8% + 67.2vw + 45px) center}
}



/* Balance the mobile copy and quote form within the video section. */
@media(max-width:760px){
 .hero>.eyebrow,.hero>h1,.hero>#trip-start{position:relative;top:25px}
}