/* Ulric studio-assistant chat — standalone styles (loaded by the public theme AND the admin
 * dashboard, so every var() carries its brand fallback). Mobile = native
 * full-screen sheet; desktop = right slideout. */

#rchat-launch{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:110;display:flex;align-items:center;gap:8px;background:var(--ink,#191917);color:#fff;border:0;border-radius:99px;padding:12px 18px;font:600 13.5px 'Inter',sans-serif;cursor:pointer;box-shadow:0 12px 34px rgba(20,22,26,.35);transition:transform .2s,background .2s,opacity .2s}
#rchat-launch:hover{transform:translateY(-2px);background:#2B2F35}
#rchat-launch svg{width:19px;height:19px;color:var(--rose-soft,#ebdbbc)}
#rchat-launch.hide{opacity:0;pointer-events:none}

#rchat{position:fixed;top:0;right:0;bottom:0;z-index:130;width:min(400px,100vw);background:var(--paper,#faf9f5);border-left:1px solid var(--line,#E5DDD6);box-shadow:-24px 0 60px rgba(20,22,26,.25);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.6,.2,1)}
#rchat.open{transform:none}

.rchat-head{display:flex;align-items:center;gap:11px;padding:16px 18px;background:var(--ink,#191917);color:#fff;flex:none}
.rchat-head b{font-family:'Fraunces',serif;font-size:17px;display:block}
.rchat-head small{font-size:11px;color:#B9BEC6;display:block;margin-top:1px}
.rchat-dot{width:9px;height:9px;border-radius:50%;background:#7BC896;box-shadow:0 0 0 3px rgba(123,200,150,.25);flex:none}
.rchat-staff{margin-left:6px;flex:none;font:700 9px 'Inter',sans-serif;letter-spacing:.08em;background:var(--rose,#d97757);color:#fff;border-radius:5px;padding:3px 6px}
.rchat-x{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:14px;cursor:pointer;flex:none}
.rchat-x:hover{background:rgba(255,255,255,.12)}

.rchat-log{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.rchat-b{max-width:88%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.55;overflow-wrap:break-word;animation:rchatIn .26s ease both}
@keyframes rchatIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* blinking caret while the assistant is typing a reply */
.rchat-b.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-3px;border-radius:1px;background:var(--rose,#d97757);animation:rchatCaret .7s steps(1,end) infinite}
@keyframes rchatCaret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.rchat-b{animation-duration:.01ms}.rchat-b.typing::after{display:none}}
.rchat-b.bot{background:#fff;border:1px solid var(--line,#E5DDD6);border-bottom-left-radius:6px;align-self:flex-start;color:var(--ink,#191917)}
.rchat-b.me{background:var(--rose,#d97757);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.rchat-b.bot a{color:var(--rose-deep,#c15f3c);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.rchat-b .rchat-btn{display:inline-block;margin-top:9px;background:var(--rose,#d97757);color:#fff !important;border-radius:99px;padding:9px 15px;font:600 13px 'Inter',sans-serif;text-decoration:none !important;transition:background .15s}
.rchat-b .rchat-btn:hover{background:var(--rose-deep,#c15f3c)}

.rchat-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:94%}
.rchat-chip{border:1px solid var(--rose,#d97757);color:var(--rose-deep,#c15f3c);background:#fff;border-radius:99px;padding:8px 13px;font:600 12.5px 'Inter',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.rchat-chip:hover{background:var(--rose,#d97757);color:#fff}

.rchat-t{display:inline-flex;gap:4px;padding:3px 2px}
.rchat-t i{width:6px;height:6px;border-radius:50%;background:var(--rose-soft,#ebdbbc);animation:rchatT 1s infinite}
.rchat-t i:nth-child(2){animation-delay:.15s}.rchat-t i:nth-child(3){animation-delay:.3s}
@keyframes rchatT{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

.rchat-ctabar{flex:none;padding:9px 14px 0;background:#fff;border-top:1px solid var(--line,#E5DDD6)}
.rchat-ctabar a{display:block;text-align:center;background:var(--blush,#f0eee6);color:var(--rose-deep,#c15f3c);border:1px solid var(--rose-soft,#ebdbbc);border-radius:99px;padding:9px 14px;font:600 12.5px 'Inter',sans-serif;text-decoration:none;transition:background .15s,color .15s}
.rchat-ctabar a:hover{background:var(--rose,#d97757);color:#fff}

.rchat-bar{display:flex;gap:8px;padding:12px 14px;border-top:0;background:#fff;flex:none}
.rchat-ctabar + .rchat-bar{padding-top:10px}
.rchat-bar input{flex:1;border:1px solid var(--line,#E5DDD6);border-radius:99px;padding:11px 16px;font:15px 'Inter',sans-serif;background:var(--paper,#faf9f5);min-width:0}
.rchat-bar input:focus{outline:2px solid var(--rose,#d97757);outline-offset:-1px}
.rchat-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--rose,#d97757);color:#fff;font-size:15px;cursor:pointer;flex:none;transition:background .15s}
.rchat-send:hover{background:var(--rose-deep,#c15f3c)}
.rchat-fine{padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));font-size:10.5px;color:var(--clay,#8A7268);text-align:center;background:#fff;flex:none}

/* ---- dimmed backdrop behind the mobile sheet ---- */
#rchat-veil{position:fixed;inset:0;z-index:125;background:rgba(20,22,26,.44);opacity:0;pointer-events:none;transition:opacity .28s;-webkit-tap-highlight-color:transparent}
#rchat-veil.show{opacity:1;pointer-events:auto}
@media(min-width:641px){#rchat-veil{display:none}}

/* ---- mobile: native bottom sheet — space at top, grab handle, keyboard-glued (JS
       pins the sheet to the VISUAL viewport so the input never hides behind the keyboard) ---- */
@media(max-width:640px){
  #rchat-launch span{display:none}
  #rchat-launch{padding:13px}
  /* the sheet runs all the way to the LAYOUT-viewport bottom — i.e. UNDER the
     keyboard — and JS lifts its content with --rkb (keyboard overlap + cushion),
     so there is never a gap between the chat and the keyboard */
  #rchat:not(.page){top:auto;left:0;right:0;bottom:0;width:100%;height:calc(100dvh - 58px - env(safe-area-inset-top,0px));padding-bottom:var(--rkb,0px);border-left:0;border-radius:22px 22px 0 0;box-shadow:0 -18px 60px rgba(20,22,26,.35);transform:translateY(104%);transition:transform .32s cubic-bezier(.2,.7,.2,1);will-change:transform}
  #rchat:not(.page).open{transform:none}
  #rchat:not(.page) .rchat-head{position:relative;border-radius:22px 22px 0 0;padding-top:19px}
  #rchat:not(.page) .rchat-head::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:44px;height:4.5px;border-radius:3px;background:rgba(255,255,255,.34)}
  .rchat-x{width:44px;height:44px;font-size:16px}
  .rchat-b{font-size:15px}
  .rchat-bar input{font-size:16px}   /* 16px stops iOS zoom-on-focus */
  .rchat-fine{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
.rchat-log{overscroll-behavior:contain}
/* iOS-proof background lock: overflow:hidden alone still rubber-bands — fix the body
   (JS sets body.style.top to -scrollY so the page doesn't visibly jump) */
html.rchat-lock{overflow:hidden}
html.rchat-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}

/* ---- page mode: the /rosie page renders the chat inline, full-bleed ---- */
.phead-tight{padding-bottom:22px}
.rosie-page{padding:6px 0 64px}
#rchat.page{position:relative;inset:auto;width:100%;max-width:800px;margin:0 auto;height:74vh;min-height:460px;transform:none;transition:none;border:1px solid var(--line,#E5DDD6);border-radius:20px;box-shadow:var(--shadow-2,0 24px 56px rgba(34,37,42,.12));overflow:hidden}
#rchat.page .rchat-head{border-radius:19px 19px 0 0}
@media(max-width:640px){
  .rosie-page{padding-bottom:34px}
  #rchat.page{border-radius:16px;min-height:400px}
  #rchat.page .rchat-head{border-radius:15px 15px 0 0}
}