/* "Ask Rocky" chat. Everything is scoped under .rk and uses the site's own colors and fonts
   (see :root in styles.css). Ember is the one action color; the panel is dark like the site. */
.rk { --rk-r: 18px; font-family: var(--font-body, system-ui, sans-serif); font-size: 1rem; line-height: 1.5; color: var(--text, #d4e0ec); }
.rk *, .rk *::before, .rk *::after { box-sizing: border-box; }
.rk p { margin: 0; max-width: none; }
:where(.rk) button { font: inherit; color: inherit; cursor: pointer; }   /* :where keeps this reset from outranking the real button styles below */
.rk [hidden] { display: none !important; }

/* ---------- floating button ---------- */
.rk-fab { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; align-items: center; gap: 10px; padding: 7px 20px 7px 8px; border: 0; border-radius: 999px; background: var(--ember, #f5a352); color: var(--night, #050912); font-weight: 700; font-size: 1rem; line-height: 1; box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: background .35s var(--ease, ease), box-shadow .35s var(--ease, ease), transform .35s var(--ease, ease); }
.rk-fab:hover { background: var(--ember-hover, #ffb86e); box-shadow: 0 0 0 6px rgba(245, 163, 82, .16), 0 12px 44px rgba(245, 163, 82, .3); transform: translateY(-2px); }
.rk-fab:focus-visible, .rk-nudge:focus-visible, .rk-x:focus-visible { outline: 2px solid var(--head, #f6f9fc); outline-offset: 3px; }
.rk-fab-label { white-space: nowrap; }
.rk.open .rk-fab { display: none; }

/* Rocky's head, cropped from the mascot file and sitting in a round frame */
.rk-av { flex: none; display: block; border-radius: 50%; overflow: hidden; background: var(--night, #050912); box-shadow: 0 0 0 2px rgba(245, 163, 82, .55); }
.rk-av img { display: block; width: 100%; height: 100%; max-width: none; }
.rk-av-fab { width: 46px; height: 46px; }
.rk-av-lg { width: 44px; height: 44px; }
.rk-av-sm { width: 28px; height: 28px; margin-top: 2px; box-shadow: 0 0 0 1.5px rgba(245, 163, 82, .45); }

/* one-time hello above the button */
.rk-nudge { position: fixed; right: 26px; bottom: 86px; z-index: 95; border: 1px solid var(--line, rgba(160,190,220,.16)); border-radius: 14px 14px 4px 14px; background: var(--ridge-2, #101c2b); color: var(--head, #f6f9fc); padding: 10px 14px; font-weight: 600; font-size: .94rem; box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }

/* ---------- panel ---------- */
.rk-panel { position: fixed; right: 22px; bottom: 22px; z-index: 96; width: 380px; max-width: calc(100vw - 24px); height: 590px; max-height: calc(100vh - 44px); display: flex; flex-direction: column; background: var(--ridge-2, #101c2b); border: 1px solid rgba(160, 190, 220, .24); border-radius: var(--rk-r); box-shadow: 0 28px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(245, 163, 82, .06); overflow: hidden; outline: none; }
.rk-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(180deg, rgba(27, 53, 82, .95), rgba(16, 28, 43, .95)); border-bottom: 1px solid var(--line, rgba(160,190,220,.16)); }
.rk-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rk-title strong { font-family: var(--font-head, inherit); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: var(--head, #f6f9fc); }
.rk-title small { font-size: .82rem; color: var(--muted, #93a8bc); }
.rk-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #93a8bc); font-size: 1.7rem; line-height: 1; transition: background .25s, color .25s; }
.rk-x:hover { background: rgba(160, 190, 220, .14); color: var(--head, #f6f9fc); }

.rk-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.rk-row { display: flex; gap: 8px; align-items: flex-start; }
.rk-me { justify-content: flex-end; }
.rk-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(143, 176, 207, .12); border: 1px solid var(--line, rgba(160,190,220,.16)); color: var(--text, #d4e0ec); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.rk-me .rk-bubble { border-radius: 16px 16px 4px 16px; background: var(--ember, #f5a352); border-color: transparent; color: var(--night, #050912); font-weight: 600; }
.rk-link { display: block; margin-top: 8px; color: var(--ember, #f5a352); font-weight: 700; font-size: .92rem; text-decoration: none; }
.rk-link:hover { color: var(--ember-hover, #ffb86e); text-decoration: underline; text-underline-offset: 3px; }
.rk-act { margin-top: 10px; padding: 8px 16px; border: 1.5px solid var(--ember, #f5a352); border-radius: 999px; background: transparent; color: var(--ember, #f5a352); font-weight: 700; font-size: .9rem; transition: background .3s, color .3s; }
.rk-act:hover { background: var(--ember, #f5a352); color: var(--night, #050912); }

.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; }
.rk-chips button { padding: 7px 13px; border: 1px solid rgba(245, 163, 82, .55); border-radius: 999px; background: rgba(245, 163, 82, .06); color: var(--head, #f6f9fc); font-size: .88rem; line-height: 1.25; text-align: left; transition: background .25s, border-color .25s; }
.rk-chips button:hover { background: rgba(245, 163, 82, .18); border-color: var(--ember, #f5a352); }

.rk-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.rk-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #93a8bc); opacity: .6; }

/* ---------- hand-off form ---------- */
.rk-formwrap { width: 100%; max-width: 86%; }
.rk-form { display: grid; gap: 10px; }
.rk-field { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--muted, #93a8bc); }
.rk-field input, .rk-field textarea, .rk-input input { width: 100%; min-width: 0; font: inherit; font-size: 16px; font-weight: 400; color: var(--head, #f6f9fc); background: rgba(5, 9, 18, .65); border: 1.5px solid rgba(160, 190, 220, .28); border-radius: 10px; padding: 9px 12px; transition: border-color .25s, box-shadow .25s; }
.rk-field textarea { resize: vertical; min-height: 56px; }
.rk-field input:focus, .rk-field textarea:focus, .rk-input input:focus { outline: none; border-color: var(--ember, #f5a352); box-shadow: 0 0 0 3px rgba(245, 163, 82, .25); }
.rk-note { font-size: .78rem; color: var(--muted, #93a8bc); }
.rk-err { min-height: 0; font-size: .86rem; font-weight: 700; color: #ff9d8f; }
.rk-err:empty { display: none; }
.rk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rk-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rk-btn { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--ember, #f5a352); color: var(--night, #050912); font-weight: 700; font-size: .95rem; transition: background .3s, box-shadow .3s; }
.rk-btn:hover:not(:disabled) { background: var(--ember-hover, #ffb86e); box-shadow: 0 0 0 5px rgba(245, 163, 82, .16); }
.rk-btn:disabled { opacity: .65; cursor: default; }
.rk-ghost { padding: 8px 6px; border: 0; background: none; color: var(--muted, #93a8bc); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.rk-ghost:hover { color: var(--head, #f6f9fc); }

/* ---------- input row + person strip ---------- */
.rk-input { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line, rgba(160,190,220,.16)); background: rgba(5, 9, 18, .35); }
.rk-send { flex: none; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ember, #f5a352); color: var(--night, #050912); font-weight: 700; transition: background .3s; }
.rk-send:hover:not(:disabled) { background: var(--ember-hover, #ffb86e); }
.rk-send:disabled, .rk-input input:disabled { opacity: .55; }
.rk-strip { flex: none; padding: 9px 14px 12px; text-align: center; font-size: .84rem; color: var(--muted, #93a8bc); background: rgba(5, 9, 18, .35); }
.rk-strip a, .rk-strip button { color: var(--ember, #f5a352); font-weight: 700; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.rk-strip a:hover, .rk-strip button:hover { color: var(--ember-hover, #ffb86e); }

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rk-panel { animation: rk-in .38s var(--ease, ease-out) both; transform-origin: bottom right; }
  .rk-row { animation: rk-pop .32s var(--ease, ease-out) both; }
  .rk-nudge { animation: rk-pop .5s var(--ease, ease-out) both; }
  .rk-fab { animation: rk-glow 2.6s ease-out 1.2s 3; }
  .rk-typing i { animation: rk-dot 1s infinite; }
  .rk-typing i:nth-child(2) { animation-delay: .15s; }
  .rk-typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes rk-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rk-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rk-glow { 0% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(245,163,82,.5); } 70% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 16px rgba(245,163,82,0); } 100% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 0 rgba(245,163,82,0); } }
@keyframes rk-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- phones: sit above the site's fixed call bar; the panel becomes a bottom sheet ---------- */
@media (max-width: 760px) {
  .rk-fab { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 6px 18px 6px 6px; }
  .rk-av-fab { width: 42px; height: 42px; }
  .rk-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: min(86vh, 640px); max-height: 100vh; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .rk-strip { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .rk-bubble, .rk-formwrap { max-width: 92%; }
}
@supports (height: 1dvh) {
  @media (max-width: 760px) { .rk-panel { height: min(86dvh, 640px); max-height: 100dvh; } }
}
@media print { .rk { display: none !important; } }