/* ============================================================
   RonanRx demo overlay — scale.ronanrx.com
   The home page is the REAL ronanrx.com (its own CSS, hotlinked).
   This file styles ONLY the full-screen iMessage takeover overlay.
   ============================================================ */

/* Alex Brush for the secure-card signature (Geist/Newsreader come from
   ronanrx.com's style.css; redeclared here as a resilient fallback). */
@font-face{font-family:"Alex Brush";font-style:normal;font-weight:400;font-display:swap;
  src:url("/hub/assets/fonts/AlexBrush-Latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122;}
@font-face{font-family:"Alex Brush";font-style:normal;font-weight:400;font-display:swap;
  src:url("/hub/assets/fonts/AlexBrush-LatinExt.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/hub/assets/fonts/geist.woff2") format("woff2-variations"),url("/hub/assets/fonts/geist.woff2") format("woff2");}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/hub/assets/fonts/geist-mono.woff2") format("woff2-variations"),url("/hub/assets/fonts/geist-mono.woff2") format("woff2");}

#chat{
  --cream:#f5f1e7; --cream-2:#efe9da; --paper:#fffdf7;
  --ink:#0c2f10; --brand:#0f3e17; --brand-2:#15491f;
  --line:#e5e0d1; --sage:#a4c9aa; --mint:#ebf3e9;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --script:"Alex Brush","Snell Roundhand",cursive;
  --ios-bar:rgba(248,248,248,.86);
  --ios-hair:#c6c6c8;
  --ios-blue:#007aff;
  --ios-gray-bubble:#e9e9eb;
  --me:#0a7cff;
  --ios-meta:#8e8e93;
  --rec:#ff3b30;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* lock the background page while the takeover is up */
body.chat-open{overflow:hidden}

/* ---- overlay positioner / backdrop ---- */
#chat{position:fixed;inset:0;z-index:1000;font-family:var(--font-sans);pointer-events:none}
#chat.open{pointer-events:auto}
#chat *{box-sizing:border-box}
/* kill the inherited brand-green focus box on tap */
#chat button{outline:none !important;-webkit-tap-highlight-color:transparent;background:none;border:0}
#chat button:focus,#chat button:focus-visible{outline:none !important;box-shadow:none !important}

/* ---- the phone screen (full-bleed on a real phone) ---- */
.ios-screen{
  position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;overflow:hidden;
  transform:translateY(100%);
  transition:transform .52s cubic-bezier(.32,.72,0,1);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
#chat.open .ios-screen{transform:translateY(0)}

/* neutralize any inherited marketing header/footer layout (these are divs now, belt-and-suspenders) */
.ios-nav,.ios-input{width:100%;max-width:none;margin:0}

/* ---- nav bar ---- */
.ios-nav{
  position:relative;flex:none;display:flex;align-items:flex-end;
  height:calc(var(--safe-top) + 52px);padding:0 6px 7px;
  background:var(--ios-bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--ios-hair);
}
.ios-back{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;color:var(--ios-blue);padding:6px 8px;
}
.ios-back .ios-badge{font-size:17px;font-weight:500}
.ios-ft{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  color:var(--ios-blue);padding:6px 8px;display:inline-flex;align-items:center;
}
.ios-contact{
  position:absolute;left:0;right:0;bottom:5px;
  display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;
}
.ios-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--cream);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700;
}
.ios-name{font-size:11px;font-weight:500;color:#1c1c1e;display:flex;align-items:center;gap:2px}
.ios-name .chev{color:var(--ios-meta);font-size:13px}

/* ---- thread ---- */
.ios-thread{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;padding:6px 12px 12px;background:#fff;
}
.ios-daystamp{text-align:center;color:var(--ios-meta);font-size:11px;margin:10px 0 12px}
.ios-daystamp b{color:#3c3c43;font-weight:600}

.row{display:flex;margin-top:2px}
.row.rx-turn{margin-top:9px}
.row.me{justify-content:flex-end}
.row.rx{justify-content:flex-start}

.bubble{
  max-width:76%;padding:7px 13px 8px;border-radius:19px;
  font-size:16.5px;line-height:1.32;letter-spacing:-.012em;
  word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;position:relative;
  animation:pop .26s cubic-bezier(.2,.9,.3,1.2) both;
}
.row.rx .bubble{background:var(--ios-gray-bubble);color:#000;transform-origin:bottom left}
.row.me .bubble{background:var(--me);color:#fff;transform-origin:bottom right}
.row.rx .bubble.tail{border-bottom-left-radius:6px}
.row.me .bubble.tail{border-bottom-right-radius:6px}

.bubble.typing{padding:13px 15px}
.bubble.typing i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#93939b;margin:0 2px;animation:typedot 1.25s infinite both}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}

.delivered{align-self:flex-end;color:var(--ios-meta);font-size:11px;margin:2px 3px}

/* ---- image bubble ---- */
.bubble.img{padding:0;background:transparent !important;max-width:64%;border-radius:17px;overflow:visible}
.imgwrap{position:relative;display:block;line-height:0;border-radius:17px;overflow:hidden}
.imgwrap img{display:block;width:100%;height:auto;border-radius:17px;pointer-events:none;-webkit-touch-callout:none}

/* iMessage tapback (reaction on a sent bubble) */
.tapback{position:absolute;top:-15px;left:-13px;z-index:2;
  min-width:30px;height:30px;padding:0 5px;border-radius:16px;
  background:var(--ios-gray-bubble);display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 2px #fff;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2) both}

/* ---- secure-link card ---- */
.row.card-row{justify-content:flex-start}
.seccard{width:84%;max-width:300px;border-radius:16px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 16px 34px -22px rgba(12,47,16,.5);
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2) both;cursor:pointer}
.seccard-doc{position:relative;padding:14px 15px 13px;
  background:radial-gradient(140% 120% at 50% -10%, #fbf9f2, var(--cream) 60%, var(--cream-2))}
.seccard-doc::before{content:"";position:absolute;left:15px;right:15px;top:0;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),#1d5a2a 55%,var(--sage))}
.seccard-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.seccard-head .wm{height:17px;width:auto;display:block}
.seccard-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;
  background:#fff;padding:3px 8px;font-family:var(--font-mono);font-size:7.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--brand);white-space:nowrap}
.seccard-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2.5px var(--mint)}
.seccard-bars{display:flex;flex-direction:column;gap:6px;margin:4px 2px 2px}
.seccard-bars i{height:6px;border-radius:4px;background:linear-gradient(90deg,#e5dfce,#ece7d8)}
.seccard-bars i:nth-child(1){width:100%}.seccard-bars i:nth-child(2){width:92%}.seccard-bars i:nth-child(3){width:58%}
.seccard-sig{position:relative;height:48px;margin:6px 2px 0}
.seccard-sig .x{position:absolute;left:0;bottom:5px;color:var(--sage);font-size:24px;line-height:.7}
.seccard-sig .name{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--script);font-size:40px;color:var(--brand);line-height:1}
.seccard-sig .rule{position:absolute;left:0;right:0;bottom:0;border-bottom:1.4px solid var(--brand)}
.seccard-cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;
  background:linear-gradient(180deg,var(--brand-2),var(--ink));color:#f3efe4;
  font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.seccard-cta svg{width:16px;height:16px;flex:none}
.seccard-url{background:#f1efe7;color:var(--ios-meta);font-size:11px;padding:7px 13px;border-top:1px solid var(--line)}

/* ---- input bar ---- */
.ios-input{
  flex:none;display:flex;align-items:flex-end;gap:9px;
  padding:7px 9px calc(7px + var(--safe-bottom));
  background:var(--ios-bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--ios-hair);
}
.ios-cam{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  color:var(--ios-meta);padding:5px;flex:none;display:inline-flex;align-items:center;height:38px;
  transition:color .2s,transform .2s;
}
.ios-field{
  flex:1;position:relative;min-height:38px;display:flex;align-items:center;
  border:1px solid var(--ios-hair);border-radius:19px;background:#fff;
  padding:7px 14px;overflow:hidden;
}
.ios-placeholder{color:var(--ios-meta);font-size:16.5px;letter-spacing:-.01em}
.ios-text{display:none;color:#000;font-size:16.5px;letter-spacing:-.012em;line-height:1.25}
.ios-record{display:none;align-items:center;gap:8px;width:100%}
.ios-rec-dot{width:9px;height:9px;border-radius:50%;background:var(--rec);flex:none;animation:blink 1s infinite}
.ios-record .ios-wave{flex:1;display:flex;align-items:center;gap:3px;height:20px;overflow:hidden}
.ios-record .ios-wave i{flex:1;min-width:2px;max-width:4px;border-radius:2px;background:var(--rec);height:30%;animation:wave 1s infinite ease-in-out}
.ios-record .ios-wave i:nth-child(odd){animation-duration:.8s}
.ios-record .ios-wave i:nth-child(3n){animation-duration:1.2s}
.ios-record .ios-wave i:nth-child(2){animation-delay:.1s}.ios-record .ios-wave i:nth-child(3){animation-delay:.25s}
.ios-record .ios-wave i:nth-child(4){animation-delay:.4s}.ios-record .ios-wave i:nth-child(5){animation-delay:.15s}
.ios-record .ios-wave i:nth-child(6){animation-delay:.3s}.ios-record .ios-wave i:nth-child(7){animation-delay:.45s}
.ios-record .ios-wave i:nth-child(8){animation-delay:.2s}.ios-record .ios-wave i:nth-child(9){animation-delay:.35s}
.ios-record .ios-wave i:nth-child(10){animation-delay:.5s}.ios-record .ios-wave i:nth-child(11){animation-delay:.12s}
.ios-record .ios-timer{font-family:var(--font-mono);font-size:13px;color:#1c1c1e;flex:none;min-width:34px;text-align:right}

/* field content swaps with state */
body.composed  .ios-field .ios-placeholder{display:none}
body.composed  .ios-field .ios-text{display:block}
body.recording .ios-field .ios-placeholder{display:none}
body.recording .ios-field .ios-record{display:flex}

.ios-audio{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ios-meta);padding:0;width:38px;height:38px;transition:color .2s;
}
.ios-audio .g-audio,.ios-audio .g-rec,.ios-audio .g-send{display:none;align-items:center;justify-content:center}
.ios-audio .g-audio{display:inline-flex}
body.recording .ios-audio .g-audio{display:none}
body.recording .ios-audio .g-rec{display:inline-flex;color:var(--rec)}
body.composed .ios-audio .g-audio{display:none}
body.composed .ios-audio .g-send{display:inline-flex;color:var(--me)}

/* cues (pulse the affordance the presenter should tap next) */
body.cue-cam   .ios-cam  {color:var(--ios-blue);animation:cue 1.3s infinite}
body.cue-audio .ios-audio{color:var(--ios-blue);animation:cue 1.3s infinite}
body.cue-send  .ios-audio{animation:cue 1.3s infinite}
body.recording .ios-audio{animation:cue 1s infinite}

/* ---- keyframes ---- */
@keyframes pop{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
@keyframes typedot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes wave{0%,100%{height:25%}50%{height:90%}}
@keyframes cue{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

@media (prefers-reduced-motion:reduce){
  #chat *,body.recording .ios-audio{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  #chat{transition-duration:.2s !important}
}

/* Note: the takeover's speaker-change class is intentionally named `rx-turn`,
   NOT `turn`. ronanrx.com's hotlinked style.css defines a bare `.turn` rule (a
   "turning-vial" video frame: aspect-ratio 1724/2140, overflow:hidden,
   flex-direction:column, dark background) that would otherwise leak in and
   deform every speaker-change bubble into a clipped/compressed dark box. The
   `rx-` prefix keeps the chat immune to that stylesheet. See demo.js newRow(). */

/* ---- mobile hero ----
   ronanrx.com's hotlinked style.css hides the copy column and shows only its
   inline .rx-demo phone preview on mobile, but that preview stays empty on this
   page (demo-landing.js injects nothing here), leaving a blank hero with no way
   to launch the takeover. Restore the copy + CTA and drop the empty preview, so
   tapping "Start your plan" opens the full-screen #chat demo (already mobile-ready).
   Keyed off touch hardware as well as width so a phone using "Request Desktop
   Website" (which fakes a ~980px width) still gets the mobile hero, not the
   desktop two-column layout with the empty phone box. */
@media (max-width:768px), (hover:none) and (pointer:coarse){
  .home-demo-hero .home-demo-copy{display:flex !important}
  .home-demo-hero .home-demo-device{display:none !important}
  /* keep the trust rows inside the viewport on narrow phones */
  .home-demo-trust-sub{overflow-wrap:anywhere}
}