/* SunRay split-shell kit: advisor left behind a drag border, page right,
   one top menu, sticky Talk / Call / WhatsApp / Get my quote bar on phones.
   Every rule is scoped under html.srk-on so the file is inert until the
   kit mounts. */

html.srk-on {
  --srk-w: 380px;
  --srk-top-h: 52px;
  --srk-bar-h: 60px;
  --srk-ink: #1d2733;
  --srk-muted: #56606b;
  --srk-sun: #f59e0b;
  --srk-sun-ink: #3b2400;
  --srk-sea: #0b5d7a;
  --srk-paper: #ffffff;
  --srk-sand: #fbf7ef;
  --srk-line: #e5ded0;
}

html.srk-on body { margin: 0; }
html.srk-on .srk-hidden-by-kit { display: none !important; }

/* ------------------------------------------------------------ top menu */
.srk-on .srk-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--srk-top-h); box-sizing: border-box; padding: 0 16px;
  background: var(--srk-paper); border-bottom: 1px solid var(--srk-line);
  font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.srk-on .srk-brand { color: var(--srk-sea); text-decoration: none; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.srk-on .srk-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.srk-on .srk-nav::-webkit-scrollbar { display: none; }
.srk-on .srk-nav a { color: var(--srk-ink); text-decoration: none; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.srk-on .srk-nav a:hover, .srk-on .srk-nav a:focus-visible { background: var(--srk-sand); }
.srk-on .srk-nav a.srk-cta { margin-left: auto; background: var(--srk-sun); color: var(--srk-sun-ink); }

/* ----------------------------------------------------------- the shell */
.srk-on .srk-shell {
  display: grid;
  grid-template-columns: var(--srk-w) 10px minmax(0, 1fr);
  align-items: start;
}
.srk-on .srk-advisor {
  position: sticky; top: var(--srk-top-h);
  height: calc(100vh - var(--srk-top-h)); box-sizing: border-box;
  background: var(--srk-sand); overflow: auto;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--srk-ink);
}
.srk-on .srk-split {
  position: sticky; top: var(--srk-top-h);
  height: calc(100vh - var(--srk-top-h));
  background: var(--srk-line); cursor: col-resize; touch-action: none;
}
.srk-on .srk-split::after {
  content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 44px;
  margin-top: -22px; border-radius: 2px; background: #c9bea9;
}
.srk-on .srk-split:focus-visible { outline: 3px solid var(--srk-sea); outline-offset: -3px; }
.srk-on.srk-dragging, .srk-on.srk-dragging * { cursor: col-resize !important; user-select: none; }
.srk-on .srk-site { min-width: 0; }

/* ------------------------------------------------------ the advisor card */
.srk-on .srk-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  transition: transform .25s ease, opacity .25s ease;
}
.srk-on .srk-face {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 1; align-self: center;
  border-radius: 20px; overflow: hidden; background: #e9dfcf;
}
.srk-on .srk-face-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.srk-on .srk-mouth {
  position: absolute; width: 11%; height: 4%; border-radius: 50%;
  background: rgba(120, 40, 34, .55); transform: translate(-50%, -50%) scaleY(.15);
  opacity: 0; pointer-events: none;
}
.srk-on.srk-animated .srk-mouth { opacity: 1; }
.srk-on .srk-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.srk-on .srk-name { margin: 0; font-weight: 800; font-size: 18px; color: var(--srk-sea); }
.srk-on .srk-origin { margin: 0; font-size: 13px; color: var(--srk-muted); }
.srk-on .srk-invite { margin: 0; font-size: 16px; }
.srk-on .srk-status { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--srk-muted); }
.srk-on .srk-backup { margin: 0; font-size: 13px; color: var(--srk-sun-ink); background: #fff3d6; padding: 4px 8px; border-radius: 6px; }
.srk-on .srk-live { font-size: 15px; max-height: 12em; overflow: auto; }
.srk-on .srk-live:empty { display: none; }
.srk-on .srk-line { margin: 0 0 6px; }
.srk-on .srk-you { color: var(--srk-muted); }
.srk-on .srk-caption-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.srk-on .srk-caption-actions[hidden] { display: none; }
.srk-on .srk-caption-actions a {
  padding: 8px 12px; border-radius: 999px; background: var(--srk-paper); border: 1px solid var(--srk-line);
  color: var(--srk-sea); font-weight: 600; text-decoration: none;
}
.srk-on .srk-talk {
  font: 800 17px/1 system-ui, sans-serif; padding: 14px 20px; border: 0; border-radius: 999px;
  background: var(--srk-sun); color: var(--srk-sun-ink); cursor: pointer;
}
.srk-on .srk-talk:focus-visible, .srk-on .srk-menu button:focus-visible, .srk-on .srk-bar a:focus-visible, .srk-on .srk-bar button:focus-visible {
  outline: 3px solid var(--srk-sea); outline-offset: 2px;
}
.srk-on.srk-in-call .srk-talk { background: var(--srk-sea); color: #fff; }
.srk-on .srk-menu { display: flex; gap: 6px; flex-wrap: wrap; }
.srk-on .srk-menu button {
  font: 600 13px/1 system-ui, sans-serif; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--srk-line); background: var(--srk-paper); color: var(--srk-ink); cursor: pointer;
}
.srk-on .srk-type { display: flex; gap: 6px; }
.srk-on .srk-type[hidden] { display: none; }
.srk-on .srk-type input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; border: 1px solid var(--srk-line); border-radius: 8px; }
.srk-on .srk-type button { font: 700 14px/1 system-ui, sans-serif; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--srk-sea); color: #fff; }

/* ------------------------------------------------------------ SET ME FREE */
.srk-on.srk-free .srk-shell { display: block; }
.srk-on.srk-free .srk-split { display: none; }
.srk-on.srk-free .srk-advisor {
  position: fixed; inset: 0; top: 0; width: 100vw; height: 100vh; z-index: 2147482000;
  background: transparent; pointer-events: none; overflow: visible;
}
.srk-on.srk-free .srk-card {
  position: absolute; right: 16px; bottom: 16px; width: 280px; box-sizing: border-box;
  max-height: calc(100vh - 32px); overflow: auto;
  background: var(--srk-sand); border: 1px solid var(--srk-line); border-radius: 20px;
  box-shadow: 0 12px 36px rgba(20, 30, 40, .25); pointer-events: auto; padding: 14px;
}
.srk-on.srk-free .srk-card.srk-corner-left { right: auto; left: 16px; }
.srk-on.srk-free .srk-card.srk-aside { opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none; }
.srk-on.srk-free .srk-face { max-width: 150px; }

/* ------------------------------------------------------------ phone bar */
.srk-on .srk-bar { display: none; }

@media (max-width: 768px) {
  html.srk-on { --srk-top-h: 48px; }
  .srk-on .srk-top { padding: 0 10px; gap: 10px; }
  .srk-on .srk-nav a.srk-cta { margin-left: 0; }
  .srk-on .srk-shell { display: block; }
  .srk-on .srk-split { display: none; }
  .srk-on .srk-advisor { position: relative; top: auto; height: 40vh; overflow: hidden; }
  .srk-on .srk-card { flex-direction: row; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 14px; gap: 12px; }
  .srk-on .srk-face { width: 34%; max-width: 150px; flex: none; align-self: flex-start; }
  .srk-on .srk-body { flex: 1; height: 100%; overflow: auto; }
  .srk-on .srk-live { max-height: none; }
  .srk-on .srk-site { padding-bottom: var(--srk-bar-h); }
  .srk-on .srk-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482500;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    height: var(--srk-bar-h); box-sizing: border-box; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--srk-paper); border-top: 1px solid var(--srk-line);
    box-shadow: 0 -6px 18px rgba(20, 30, 40, .12);
    transition: transform .2s ease;
  }
  .srk-on .srk-bar a, .srk-on .srk-bar button {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    font: 700 14px/1 system-ui, sans-serif; border-radius: 10px; text-decoration: none;
    border: 1px solid var(--srk-line); background: var(--srk-sand); color: var(--srk-ink); cursor: pointer; padding: 0 4px;
  }
  .srk-on .srk-bar .srk-bar-talk { background: var(--srk-sea); color: #fff; border-color: var(--srk-sea); }
  .srk-on .srk-bar .srk-cta { background: var(--srk-sun); color: var(--srk-sun-ink); border-color: var(--srk-sun); }
  .srk-on .srk-bar.srk-aside { visibility: hidden; transform: translateY(110%); }
  .srk-on.srk-free .srk-card { right: 10px; bottom: calc(var(--srk-bar-h) + 10px); width: 220px; }
  .srk-on.srk-free .srk-card.srk-corner-left { left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .srk-on .srk-card, .srk-on .srk-bar, .srk-on .srk-mouth { transition: none !important; }
}