/* ─────────────────────────────────────────────────────────────────────────────
   plan-switcher — turns any client template into a playable A/B/C demo.

   Drops onto a finished template without touching its markup. It reads the
   site's own accent colour, pins a demo bar to the top of the viewport, and
   switches what is actually LIVE on the page:

     A  the site + the guided enquiry form (no AI, no running cost)
     B  + the real assistant, answering in the business's own words
     C  + the phone: missed call → text back, and the scheduled follow-ups

   Everything here is namespaced .ps- so it can never collide with a template.
   ───────────────────────────────────────────────────────────────────────── */

.ps-bar {
  --a: var(--nl-accent, var(--accent, #c4643c));
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  background: #17130f; color: #fff;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  display: flex; align-items: center; gap: 18px;
  padding: 9px 18px; box-shadow: 0 2px 18px rgba(0,0,0,.3);
}
body.ps-on { padding-top: 54px !important; }
.ps-bar .ps-brand {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5); white-space: nowrap;
}
.ps-bar .ps-brand b { color: #fff; font-weight: 700; }

.ps-seg { display: flex; background: rgba(255,255,255,.09); border-radius: 999px; padding: 3px; gap: 2px; }
.ps-seg button {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  border: 0; background: none; color: rgba(255,255,255,.62); cursor: pointer;
  padding: 7px 15px; border-radius: 999px; white-space: nowrap; transition: .15s;
}
.ps-seg button:hover { color: #fff; }
.ps-seg button[aria-pressed="true"] { background: var(--a); color: #fff; }

.ps-says { flex: 1; font-size: 13.5px; color: rgba(255,255,255,.72); min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-says b { color: #fff; font-weight: 600; }
.ps-price { font-size: 13px; font-weight: 700; color: var(--a); white-space: nowrap; }

@media (max-width: 820px) {
  .ps-bar { flex-wrap: wrap; gap: 9px 14px; padding: 9px 13px; }
  body.ps-on { padding-top: 92px !important; }
  .ps-says { flex-basis: 100%; white-space: normal; font-size: 12.5px; }
}

/* ── the phone that only exists on plan C ───────────────────────────────── */
.ps-phone {
  position: fixed; right: 20px; bottom: 20px; z-index: 880; width: 330px;
  max-width: calc(100vw - 40px); max-height: min(620px, calc(100vh - 130px));
  background: #fff; border-radius: 20px; overflow: hidden; display: none;
  flex-direction: column; box-shadow: 0 26px 60px -22px rgba(0,0,0,.42);
  border: 1px solid rgba(0,0,0,.1);
  font-family: Inter, -apple-system, system-ui, sans-serif;
  animation: ps-rise .34s cubic-bezier(.2,.8,.3,1);
}
.ps-phone.on { display: flex; }
@keyframes ps-rise { from { opacity: 0; transform: translateY(16px); } }

.ps-phone .ps-head {
  padding: 11px 15px; background: #17130f; color: #fff; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-shrink: 0;
}
.ps-phone .ps-head b { font-size: 13.5px; font-weight: 700; }
.ps-phone .ps-head small { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); }
.ps-phone .ps-x { background: none; border: 0; color: rgba(255,255,255,.6); font-size: 21px;
                  cursor: pointer; line-height: 1; padding: 0 3px; }
.ps-phone .ps-x:hover { color: #fff; }

.ps-thread { flex: 1; overflow-y: auto; padding: 15px 14px; display: flex; flex-direction: column; gap: 8px;
             background: #f7f5f2; }
.ps-msg { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
          white-space: pre-wrap; animation: ps-pop .24s cubic-bezier(.2,.8,.3,1); }
@keyframes ps-pop { from { opacity: 0; transform: translateY(7px); } }
.ps-them { align-self: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.07); border-bottom-left-radius: 4px; }
.ps-me { align-self: flex-end; background: #2f9e4f; color: #fff; border-bottom-right-radius: 4px; }
.ps-sys { align-self: center; font-size: 11px; color: rgba(0,0,0,.36); padding: 3px 0; text-align: center; }
.ps-msg img { display: block; max-width: 160px; border-radius: 9px; margin: 2px 0; }
.ps-typing { align-self: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.07);
             border-radius: 16px; border-bottom-left-radius: 4px; padding: 11px 14px; display: flex; gap: 4px; }
.ps-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.3); animation: ps-bob 1.3s infinite; }
.ps-typing i:nth-child(2) { animation-delay: .18s; } .ps-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ps-bob { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.ps-compose { display: flex; gap: 7px; padding: 10px 11px; border-top: 1px solid rgba(0,0,0,.07);
              background: #fff; flex-shrink: 0; align-items: center; }
.ps-compose input { flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,.13); border-radius: 999px;
                    padding: 9px 13px; font: inherit; font-size: 13.5px; outline: none; }
.ps-compose input:focus { border-color: rgba(0,0,0,.32); }
.ps-compose button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
                     flex-shrink: 0; font-size: 14px; background: rgba(0,0,0,.06); color: rgba(0,0,0,.55); }
.ps-compose button.ps-send { background: var(--a, #c4643c); color: #fff; font-weight: 700; }
.ps-compose button:disabled { opacity: .4; cursor: not-allowed; }

.ps-ring { position: absolute; inset: 0; background: rgba(255,255,255,.97); display: grid; place-items: center;
           text-align: center; padding: 26px; z-index: 4; }
.ps-ring .ps-av { width: 72px; height: 72px; border-radius: 50%; background: var(--a, #c4643c); color: #fff;
                  display: grid; place-items: center; font-size: 25px; font-weight: 700; margin: 0 auto 15px; }
.ps-ring.going .ps-av { animation: ps-shake 1s infinite; }
@keyframes ps-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.ps-ring h4 { font-size: 17px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.02em; }
.ps-ring p { font-size: 13px; color: rgba(0,0,0,.45); margin-bottom: 20px; }
.ps-ring button { background: #2f9e4f; color: #fff; border: 0; border-radius: 999px; padding: 11px 22px;
                  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

/* ── the follow-up loop, plan C only ────────────────────────────────────── */
.ps-loop { position: fixed; left: 20px; bottom: 20px; z-index: 880; width: 320px;
           max-width: calc(100vw - 40px); display: none; flex-direction: column; gap: 8px; }
.ps-loop.on { display: flex; }
.ps-loop .ps-lt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                  color: rgba(0,0,0,.4); padding-left: 3px; }
.ps-step { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 13px; padding: 11px 13px;
           box-shadow: 0 8px 22px -14px rgba(0,0,0,.34); opacity: 0; transform: translateX(-10px);
           transition: .4s cubic-bezier(.2,.8,.3,1); }
.ps-step.in { opacity: 1; transform: none; }
.ps-step .w { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a, #c4643c); }
.ps-step .t { font-size: 13px; line-height: 1.45; color: rgba(0,0,0,.72); margin-top: 5px; }

@media (max-width: 900px) { .ps-loop { display: none !important; } }

/* ── the mic, when a conversation is being held out loud ─────────────────── */
.ps-compose .ps-mic { transition: .18s; }
.ps-compose .ps-mic.ps-hot {
  background: #e0342f; color: #fff;
  animation: ps-hot 1.15s ease-in-out infinite;
}
@keyframes ps-hot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,52,47,.5); }
  60%      { box-shadow: 0 0 0 8px rgba(224,52,47,0); }
}

/* ── plan D: the real, expensive, interruptible voice ─────────────────────── */
/* The "Ring them" overlay covers the panel at z-index 4 — the live-call bar is a
   separate action and must stay reachable, so it sits above it. */
.ps-livebar { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
              border-top: 1px solid rgba(0,0,0,.07); background: #fffaf5; flex-shrink: 0;
              position: relative; z-index: 5; }
.ps-live { flex: 1; border: 0; border-radius: 999px; padding: 9px 12px; cursor: pointer;
           font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.01em;
           background: var(--a, #c4643c); color: #fff; transition: .16s; }
.ps-live:hover { filter: brightness(1.08); }
.ps-live.ps-dialling { background: rgba(0,0,0,.28); }
.ps-live.ps-oncall { background: #d0342c; animation: ps-pulse 1.4s ease-in-out infinite; }
@keyframes ps-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(208,52,44,.45); } 60% { box-shadow: 0 0 0 9px rgba(208,52,44,0); } }
.ps-meter { font-size: 12px; font-weight: 700; color: #d0342c; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the booking that everything else fires from ──────────────────────────── */
.ps-book { background: #17130f; color: #fff; border-radius: 13px; padding: 13px 15px;
           box-shadow: 0 10px 26px -14px rgba(0,0,0,.5); }
.ps-book .ps-bt { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
                  color: var(--a, #c4643c); margin-bottom: 7px; }
.ps-book b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.ps-book span { display: block; font-size: 13px; color: rgba(255,255,255,.75); margin-top: 3px; }
.ps-book em { display: block; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.42); margin-top: 6px; }