/* =====================================================================
   THE SUNNY BUBBLE  ·  royal-sunny.css
   The one gold ball that every Royal page carries.

   Bryan, 7/28/2026, verbatim:
     "if there's not a rover that is following around, there needs to be
      a sunny or a solid gold bubble that gives you the option to touch
      to always be able to talk to Royal Ai ... if there isn't a rover
      search icon on the page anywhere that follows the person then we
      at least need to have one of those sunny balls, the gold ones."

   So: EVERY page carries either a following ROVER or this bubble. Never
   neither. Sunny becomes ROVER later - no class name and no line of copy
   hardcodes the name, so that swap is one label.

   -------------------------------------------------------------------
   WHY THIS FILE IS SELF-CONTAINED, AND WHY EVERY CLASS IS PREFIXED rsn-
   -------------------------------------------------------------------
   The eight Royal surfaces do not share one coin implementation. They
   ship five:
       royalmtg.com / rm-dot-com / royalbuilder.ai / royalmortgage-ai /
       royalai.app-v2 ....... .coin  +  .coin-inner   (royal-system.css)
       royalheloc.ai ........ .sunny .coin  +  .inner (css/royal.css)
       royalagent.ai ........ .sunny .coin  +  .inner, absolutely seated
       royalreverse.ai ...... .sunny .coin  +  .inner
       royalai.ai ........... .coin  +  .inner        (css/royal.css)
   AND on royalheloc.ai, royalagent.ai and royalreverse.ai the class name
   ".sunny" ALREADY MEANS SOMETHING ELSE - it is the inline decorative
   gold coin that sits in the page copy. Reusing it for a fixed bubble
   would restyle every one of those and break three live sites.

   So this component brings its own geometry, prefixed rsn-, and touches
   nothing a host page owns. That is what makes one bubble render
   identically on all eight surfaces.

   -------------------------------------------------------------------
   THE TWO LAWS COPIED IN HERE - VERBATIM, NOT RE-DERIVED
   -------------------------------------------------------------------
   1. THE CANON COIN. The gradient below, its stops, and its shadow
      ratios are lifted character-for-character out of section 7 of
      _royal-system/royal-system.css. The coin's gold is the coin's own
      material. Do not re-mix it here or anywhere.

   2. THE SEATING LAW. Medallion 68% of the coin, mark capped at 59% of
      the medallion. 0.68 x 0.59 = 40.1% of the coin diameter - the ratio
      Bryan ordered on 7/28 after "the R looks too big for the circle".

   THESE NUMBERS NOW LIVE IN TWO PLACES: royal-system.css and this file,
   both under _royal-system/. Change one, change the other, and re-measure
   before publish.
   ===================================================================== */

/* ---------------------------------------------------------------------
   THE BUTTON
   Fixed bottom right, above everything, out of the way of the content
   and out of the print output.
   --------------------------------------------------------------------- */
.rsn-btn{
  position:fixed;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  z-index:2147483000;
  width:64px;height:64px;min-height:0;min-width:0;
  margin:0;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;
  border-radius:50%;
  -webkit-appearance:none;appearance:none;
  font:inherit;color:inherit;line-height:0;
  filter:drop-shadow(0 12px 26px rgba(21,27,60,.30))}
.rsn-btn:focus-visible{outline:3px solid #CBA260;outline-offset:4px}

/* --- THE CANON COIN, verbatim from royal-system.css section 7 --- */
.rsn-coin{width:64px;height:64px;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:
    0 10px 24px rgba(21,27,60,.22),
    inset 0 2px 6px rgba(255,255,255,.65),
    inset 0 -6px 12px rgba(90,66,30,.45);
  transition:transform .18s ease, box-shadow .18s ease}
.rsn-coin::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%);
  pointer-events:none}

/* --- THE SEATING LAW: 68% medallion, mark capped at 59% of it --- */
.rsn-inner{width:68%;height:68%;border-radius:50%;
  position:absolute;left:16%;top:16%;
  background:rgba(255,255,255,.92);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(90,66,30,.35)}
.rsn-inner img{max-width:59%;max-height:59%;width:auto;height:auto;display:block}

/* THE ASLEEP LAW. Solid gold at rest is the whole point of a sunny ball:
   it carries nothing until you touch it, and then the chrome castle R
   rises up out of the gold. */
.rsn-inner{opacity:0;transform:scale(.55);
  transition:opacity .22s ease, transform .3s cubic-bezier(.34,1.42,.5,1)}
.rsn-btn:hover .rsn-inner,
.rsn-btn:focus-visible .rsn-inner,
.rsn-btn.rsn-open .rsn-inner,
.rsn-btn.rsn-awake .rsn-inner{opacity:1;transform:none}
.rsn-btn:hover .rsn-coin,
.rsn-btn.rsn-open .rsn-coin{transform:translateY(-3px) scale(1.06)}

@media (max-width:390px){
  .rsn-btn{width:56px;height:56px}
  .rsn-coin{width:56px;height:56px}
}

/* ---------------------------------------------------------------------
   THE PANEL
   --------------------------------------------------------------------- */
.rsn-panel{
  position:fixed;z-index:2147483001;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + 76px + env(safe-area-inset-bottom,0px));
  width:min(348px,calc(100vw - 28px));
  box-sizing:border-box;
  background:#FFFFFF;border:1px solid #E7E9F0;
  border-radius:18px;padding:15px 16px 14px;
  box-shadow:0 22px 54px rgba(21,27,60,.30);
  font-family:"Montserrat","Montserrat Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#253069;text-align:left;
  animation:rsn-rise .22s ease}
.rsn-panel[hidden]{display:none}
@keyframes rsn-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:390px){
  .rsn-panel{bottom:calc(clamp(14px,3vw,26px) + 66px + env(safe-area-inset-bottom,0px))}
}

.rsn-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}

/* THE ROYAL Ai LOGO TRAVELS WITH THE WORDS. Bryan's ruling 9: anywhere
   the words Royal Ai appear, the Royal Ai logo appears with them. */
.rsn-brand{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  font-weight:800;letter-spacing:.01em;color:#253069;line-height:1}
.rsn-brand img{height:1.05em;width:1.686em;flex:none;display:block}
.rsn-brand em{font-style:italic;color:#CBA260;font-weight:800}

.rsn-close{width:32px;height:32px;min-height:0;flex:none;padding:0;margin:0;
  border:1px solid #E7E9F0;background:#FFFFFF;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;-webkit-appearance:none;appearance:none}
.rsn-close:hover{border-color:#CBA260}
.rsn-close svg{width:15px;height:15px;fill:none;stroke:#253069;
  stroke-width:2.2;stroke-linecap:round}

.rsn-say{margin:0 0 14px;font-size:13.5px;color:#5B6480;line-height:1.55}
.rsn-say b{color:#253069;font-weight:800}

.rsn-doors{display:flex;flex-direction:column;gap:9px}
.rsn-doors a{display:block;width:100%;box-sizing:border-box;text-align:center;
  padding:11px 20px;border-radius:999px;font-size:14px;font-weight:800;
  letter-spacing:.01em;text-decoration:none;line-height:1.2;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.rsn-doors .rsn-gold{
  background:linear-gradient(180deg,#DFBE7E 0%,#CBA260 55%,#B08C4E 100%);
  color:#253069;border:1px solid #B08C4E;
  box-shadow:0 6px 16px rgba(203,162,96,.35)}
.rsn-doors .rsn-gold:hover{transform:translateY(-1px);
  box-shadow:0 9px 20px rgba(203,162,96,.45)}
.rsn-doors .rsn-ghost{background:#FFFFFF;color:#253069;border:1px solid #D8DCE8}
.rsn-doors .rsn-ghost:hover{border-color:#CBA260}

.rsn-foot{margin:12px 0 0;font-size:11.5px;color:#5B6480;line-height:1.55}
.rsn-foot a{color:#253069;font-weight:700}

/* --- the panel's own ask surface, used only when an engine is wired --- */
.rsn-out{width:100%;box-sizing:border-box;margin:0 0 12px;padding:13px 15px;
  border-radius:14px;background:#F7F8FC;border:1px solid #E7E9F0;
  font-size:13.5px;line-height:1.55;color:#253069;display:none}
.rsn-out.rsn-show{display:block}
.rsn-out .rsn-q{margin:0 0 6px;font-size:12px;color:#5B6480;font-weight:700}
.rsn-out .rsn-a{margin:0;white-space:pre-wrap}
.rsn-out .rsn-hook{margin:8px 0 0;font-size:11.5px;color:#5B6480}
.rsn-out.rsn-think .rsn-a::after{content:"\2026";opacity:.6}

.rsn-row{position:relative;display:block}
.rsn-row input{width:100%;box-sizing:border-box;
  border:1.5px solid #D8DCE8;border-radius:999px;background:#FFFFFF;
  padding:13px 52px 13px 18px;font-size:16px;font-family:inherit;color:#253069}
.rsn-row input:focus{outline:none;border-color:#CBA260;
  box-shadow:0 10px 26px rgba(203,162,96,.24)}
.rsn-send{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;min-height:0;padding:0;border:none;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;-webkit-appearance:none;appearance:none;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #6a5330 100%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(90,66,30,.45)}
.rsn-send svg{width:16px;height:16px;fill:#253069;stroke:none}

/* ---------------------------------------------------------------------
   THE FOOTER CLEARANCE
   Measured at 390px on all seven sites: unreserved, the bubble sits square
   on the last line of the footer - the NMLS number and the Equal Housing
   Lender line. This strip is the reserve. It is the last in-flow child of
   <body>; the bubble and the panel are fixed and are not in flow at all.
   flex:none matters - every one of these bodies except one is a flex
   column, and without it the strip would be squashed to nothing.
   Above 900px it is zero, because a centred footer never reaches the
   bubble there and no desktop layout should move for this.
   --------------------------------------------------------------------- */
.rsn-pad{flex:none;width:100%;height:0;pointer-events:none}
@media (max-width:900px){
  .rsn-pad{height:calc(64px + clamp(14px,3vw,26px) + 16px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:390px){
  .rsn-pad{height:calc(56px + 14px + 16px + env(safe-area-inset-bottom,0px))}
}

/* ---------------------------------------------------------------------
   THE TOAST CLEARANCE
   Every Royal surface pins its .toast to bottom:34px, centred. On a phone
   that strip is wide enough to reach the bubble's corner - caught on
   royalai.ai/precision-pricing.html at 390px. Lift the toast clear, which
   is exactly what royalmtg.com already does for the same reason. Scoped to
   the phone, because above 768px the centred toast never reaches the
   bubble and no desktop layout should move for this.
   This rule loads last, so it wins over a page's own inline .toast.

   SCOPED TO .royal-sunny-on, which the script stamps on <html> only when it
   has actually built a bubble. The six front doors link this stylesheet but
   run data-off - they carry a one-screen ask bar instead - and their toast
   must not move for a bubble that is not there.
   --------------------------------------------------------------------- */
@media (max-width:767px){
  .royal-sunny-on .toast{bottom:calc(34px + 60px)}
}

/* ---------------------------------------------------------------------
   HOUSEKEEPING
   --------------------------------------------------------------------- */
@media print{.rsn-btn,.rsn-panel,.rsn-pad{display:none !important}}
@media (prefers-reduced-motion:reduce){
  .rsn-coin,.rsn-inner,.rsn-panel,.rsn-doors a{transition:none;animation:none}
}