/* ============================================================
   Callsy — live chat widget (from the RIP NATION support kit).

   Everything is namespaced .csc- and every value is written out
   rather than read from a variable: the widget loads on pages that
   may not define the site's custom properties, and a chat bubble
   that inherits nothing should still look like the site.

   Bottom-right bubble on desktop, full-width bottom sheet on a
   phone, where a floating panel would fight the keyboard.
   ============================================================ */

.csc-btn,
.csc-panel { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ── bubble ─────────────────────────────────────────────── */
.csc-btn{
  position:fixed; right:20px; bottom:20px; z-index:2147483000;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:linear-gradient(150deg,#2a8bff,#1672f5); color:#fff;
  box-shadow:0 8px 30px -6px rgba(22,119,255,.45), 0 2px 10px rgba(11,22,40,.2);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
}
.csc-btn:hover{ transform:translateY(-2px) scale(1.04) }
.csc-btn:active{ transform:scale(.96) }
.csc-btn svg{ width:25px; height:25px; display:block }
.csc-btn .csc-x{ display:none }
.csc-btn.open .csc-x{ display:block }
.csc-btn.open .csc-i{ display:none }

.csc-badge{
  position:absolute; top:-2px; right:-2px; min-width:21px; height:21px; padding:0 6px;
  border-radius:11px; background:#f0555f; color:#fff; border:2px solid #fff;
  font:800 11px/17px 'Inter',system-ui,sans-serif; display:none; place-items:center;
}
.csc-badge.on{ display:grid }

/* A single ping when a reply lands, not a loop — an animation that never
   stops reads as broken rather than urgent. */
@keyframes csc-ping{ 0%,100%{transform:scale(1)} 30%{transform:scale(1.16)} 60%{transform:scale(.97)} }
.csc-btn.ping{ animation:csc-ping .5s ease }

/* ── panel ──────────────────────────────────────────────── */
.csc-panel{
  position:fixed; right:20px; bottom:88px; z-index:2147483000;
  width:370px; max-width:calc(100vw - 32px); height:min(560px, calc(100vh - 130px));
  background:#ffffff; border:1px solid rgba(11,22,40,.1); border-radius:16px;
  display:none; flex-direction:column; overflow:hidden; color:#0b1628;
  box-shadow:0 28px 70px -18px rgba(11,22,40,.28);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
  right:max(20px, env(safe-area-inset-right));
}
.csc-panel.mounted{ display:flex }
.csc-panel.on{ opacity:1; transform:none }

.csc-head{
  display:flex; align-items:center; gap:11px; padding:14px 15px; flex:none;
  background:linear-gradient(160deg,rgba(22,119,255,.08),transparent 70%);
  border-bottom:1px solid rgba(11,22,40,.08);
}
.csc-av{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#2a8bff,#1672f5); color:#fff;
  font:900 13px/1 'Archivo','Inter',sans-serif;
}
.csc-head b{ display:block; font:900 14px/1.2 'Archivo','Inter',sans-serif; letter-spacing:.01em }
.csc-st{ display:flex; align-items:center; gap:6px; font-size:11px; color:#8f979f; margin-top:3px }
.csc-st i{ width:6px; height:6px; border-radius:50%; background:#5d656d; flex:none }
.csc-st.live i{ background:#43d68d; box-shadow:0 0 0 3px rgba(67,214,141,.18) }
.csc-close{
  margin-left:auto; background:none; border:0; color:#8f979f; cursor:pointer;
  font-size:22px; line-height:1; padding:2px 6px; border-radius:8px;
}
.csc-close:hover{ background:rgba(11,22,40,.07); color:#0b1628 }

.csc-body{ flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:11px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch }

/* ── pre-chat form ──────────────────────────────────────── */
.csc-intro{ font-size:12.5px; line-height:1.6; color:#9aa3ab; margin-bottom:4px }
.csc-f{ display:flex; flex-direction:column; gap:9px }
.csc-f label{ font:800 8.5px/1 'Inter',sans-serif; letter-spacing:.14em; color:#6d757d; display:block; margin-bottom:6px }
.csc-f input, .csc-f textarea{
  width:100%; padding:11px 12px; border-radius:10px; font:inherit; font-size:13px;
  color:#0b1628; background:rgba(11,22,40,.045); border:1px solid rgba(11,22,40,.14);
  outline:none; transition:border-color .16s;
}
.csc-f textarea{ resize:vertical; min-height:74px; line-height:1.5 }
.csc-f input:focus, .csc-f textarea:focus{ border-color:#1677ff }
.csc-go{
  width:100%; padding:12px; border:0; border-radius:10px; cursor:pointer;
  background:#1677ff; color:#fff; font:800 10.5px/1 'Inter',sans-serif; letter-spacing:.11em;
}
.csc-go:hover{ background:#0d62de }
.csc-go:disabled{ opacity:.5; cursor:default }
.csc-err{ color:#f0555f; font-size:11.5px; line-height:1.5; min-height:16px }

/* ── messages ───────────────────────────────────────────── */
.csc-m{ display:flex; gap:8px; align-items:flex-end; max-width:100% }
.csc-m .csc-mav{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#2a8bff,#1672f5); color:#fff;
  font:900 10px/1 'Archivo','Inter',sans-serif;
}
.csc-bub{
  padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; max-width:78%;
}
/* Theirs left with an avatar, mine right without — the asymmetry is what
   makes a thread readable at a glance. */
.csc-m.them .csc-bub{ background:rgba(11,22,40,.06); border-bottom-left-radius:5px }
.csc-m.me{ flex-direction:row-reverse }
.csc-m.me .csc-bub{ background:#1677ff; color:#fff; border-bottom-right-radius:5px; font-weight:500 }
.csc-t{ font-size:9.5px; color:#5d656d; margin-top:4px; display:block }
.csc-m.me .csc-t{ text-align:right }
.csc-seen{ font-size:9.5px; color:#6d757d; text-align:right; margin-top:-6px }

.csc-day{ text-align:center; font:800 8.5px/1 'Inter',sans-serif; letter-spacing:.14em;
  color:#5d656d; padding:4px 0 }

.csc-typing{ display:flex; gap:8px; align-items:flex-end }
.csc-dots{ background:rgba(11,22,40,.06); border-radius:14px; border-bottom-left-radius:5px;
  padding:12px 14px; display:flex; gap:4px }
.csc-dots i{ width:6px; height:6px; border-radius:50%; background:#8f979f; animation:csc-b 1.3s infinite }
.csc-dots i:nth-child(2){ animation-delay:.16s } .csc-dots i:nth-child(3){ animation-delay:.32s }
@keyframes csc-b{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

.csc-note{ font-size:11.5px; line-height:1.6; color:#9aa3ab; background:rgba(240,169,43,.07);
  border:1px solid rgba(240,169,43,.22); border-radius:11px; padding:10px 12px }

/* ── composer ───────────────────────────────────────────── */
.csc-foot{ flex:none; padding:11px 12px; border-top:1px solid rgba(11,22,40,.08);
  display:flex; gap:8px; align-items:flex-end; background:#f7f9fc }
.csc-foot textarea{
  flex:1; min-height:40px; max-height:110px; padding:10px 12px; border-radius:11px; resize:none;
  font:inherit; font-size:13px; line-height:1.45; color:#0b1628;
  background:rgba(11,22,40,.05); border:1px solid rgba(11,22,40,.14); outline:none;
}
.csc-foot textarea:focus{ border-color:#1677ff }
.csc-send{
  width:40px; height:40px; flex:none; border:0; border-radius:11px; cursor:pointer;
  background:#1677ff; color:#fff; display:grid; place-items:center;
}
.csc-send:disabled{ opacity:.4; cursor:default }
.csc-send svg{ width:17px; height:17px }
.csc-cap{ font-size:9.5px; color:#5d656d; text-align:right; padding:0 13px 8px; background:#f7f9fc }

/* ── phone: a bottom sheet, so the keyboard has somewhere to go ── */
@media (max-width:640px){
  .csc-panel{
    right:0; left:0; bottom:0; width:auto; max-width:none;
    height:min(88vh, calc(100vh - 40px));
    border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
    transform:translateY(14px);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .csc-panel.on{ transform:none }
  .csc-btn{ width:52px; height:52px; right:max(16px, env(safe-area-inset-right)) }
  .csc-bub{ max-width:82% }
}

@media (prefers-reduced-motion:reduce){
  .csc-btn, .csc-panel{ transition:none }
  .csc-btn.ping{ animation:none }
  .csc-dots i{ animation:none; opacity:.6 }
}

/* ── attachments ────────────────────────────────────────── */
.csc-clip{
  width:36px; height:36px; flex:none; border:0; border-radius:10px; cursor:pointer;
  background:rgba(11,22,40,.05); color:#8f979f; display:grid; place-items:center;
}
.csc-clip:hover{ background:rgba(11,22,40,.09); color:#1677ff }
.csc-clip:disabled{ opacity:.45; cursor:default }
.csc-clip svg{ width:17px; height:17px }
.csc-clip.busy{ animation:csc-pulse .9s ease-in-out infinite }
@keyframes csc-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* An image preview is worth the space; anything else is a row you can
   read the name and size of before deciding to open it. */
.csc-img{ display:block; margin-top:7px; border-radius:9px; overflow:hidden; max-width:210px }
.csc-img img{ display:block; width:100%; height:auto; max-height:210px; object-fit:cover }
.csc-file{
  display:flex; align-items:center; gap:9px; margin-top:7px; padding:8px 10px;
  border-radius:9px; background:#f2f4f7; border:1px solid rgba(11,22,40,.12);
  text-decoration:none; color:inherit;
}
.csc-m.me .csc-file{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3) }
.csc-file:hover{ border-color:#1677ff }
.csc-file svg{ width:17px; height:17px; flex:none; opacity:.75 }
.csc-file span{ font-size:11.5px; line-height:1.35; word-break:break-all }
.csc-file em{ display:block; font-style:normal; font-size:10px; opacity:.6; margin-top:2px }

/* ── automatic answers ──────────────────────────────────── */
/* Tinted amber and labelled, so nobody mistakes it for a person. */
.csc-m.auto .csc-bub{ background:rgba(240,169,43,.1); border:1px solid rgba(240,169,43,.26) }
.csc-m.auto .csc-mav{ background:linear-gradient(150deg,#f59e0b,#fbbf24) }
.csc-auto{
  display:block; font:800 8px/1 'Inter',sans-serif; letter-spacing:.14em;
  color:#b45309; margin-bottom:6px;
}
.csc-esc{
  display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:11px;
  background:rgba(11,22,40,.035); border:1px dashed rgba(11,22,40,.16);
}
.csc-esc span{ font-size:11.5px; line-height:1.5; color:#9aa3ab }
.csc-esc button{
  align-self:flex-start; padding:8px 13px; border:0; border-radius:8px; cursor:pointer;
  background:#1677ff; color:#fff; font:800 9.5px/1 'Inter',sans-serif; letter-spacing:.1em;
}
.csc-esc button:hover{ background:#0d62de }

/* ── away gate + idle countdown ─────────────────────────── */
.csc-lock{
  padding:14px 15px; border-top:1px solid rgba(11,22,40,.08); background:#f7f9fc;
  display:flex; flex-direction:column; gap:6px;
}
.csc-lock b{ font:800 10px/1 'Inter',sans-serif; letter-spacing:.13em; color:#b45309 }
.csc-lock span{ font-size:11.5px; line-height:1.55; color:#9aa3ab }
.csc-idle{
  display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:11px;
  background:rgba(240,169,43,.08); border:1px solid rgba(240,169,43,.3);
}
.csc-idle span{ font-size:11.5px; line-height:1.5; color:#7c5a14 }
.csc-idle b{ font-variant-numeric:tabular-nums; color:#b45309 }
.csc-idle button{
  align-self:flex-start; padding:8px 13px; border:0; border-radius:8px; cursor:pointer;
  background:#1677ff; color:#fff; font:800 9.5px/1 'Inter',sans-serif; letter-spacing:.1em;
}

/* ── ending a chat ─────────────────────────────────────────
   The visitor could never close their own conversation, so a
   finished chat stayed open until staff or the idle sweep dealt
   with it. Quiet styling on purpose: ending the chat is a normal
   thing to want, not a warning. */
.csc-end{margin-left:auto;padding:5px 9px;border-radius:7px;border:1px solid rgba(11,22,40,.22);
  background:none;color:rgba(11,22,40,.72);font:800 8.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.11em;cursor:pointer;transition:.15s;white-space:nowrap}
.csc-end:hover{border-color:#0b1628;color:#0b1628}
.csc-end[hidden]{display:none}
/* The header used margin-left:auto on the close button to push it
   right; with a second button there, the pair travels together. */
.csc-head .csc-close{margin-left:8px}

.csc-ended{margin:0 0 12px;padding:10px 12px;border-radius:10px;
  background:rgba(11,22,40,.06);border:1px solid rgba(11,22,40,.1);
  font-size:12px;line-height:1.6;color:rgba(11,22,40,.8)}
.csc-ended b{display:block;color:#0b1628;margin-bottom:3px;font-size:12.5px}

.csc-endbar{display:flex;flex-direction:column;gap:9px;padding:12px 13px;
  border-top:1px solid rgba(11,22,40,.09)}
.csc-endbar span{font-size:11.5px;line-height:1.55;color:rgba(11,22,40,.62)}
.csc-again{width:100%}

/* The idle box now carries two choices, so it wraps rather than
   squeezing them onto one line on a phone. */
.csc-idle{flex-wrap:wrap}
.csc-idle button.alt{background:none;border:1px solid rgba(11,22,40,.28);color:rgba(11,22,40,.82)}
.csc-idle button.alt:hover{border-color:#1677ff;color:#1677ff}

/* ── the choice while waiting ──────────────────────────────
   The offer carries two buttons now, so it wraps and the ticket
   option is styled quieter than the instant answer — not hidden,
   just second, because most people would rather have the answer. */
.csc-esc{flex-wrap:wrap}
.csc-esc button.alt{background:none;border:1px solid rgba(11,22,40,.28);color:rgba(11,22,40,.82)}
.csc-esc button.alt:hover{border-color:#1677ff;color:#1677ff}

.csc-topics{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;
  background:rgba(11,22,40,.04);border:1px solid rgba(11,22,40,.1)}
.csc-tg{display:flex;flex-wrap:wrap;gap:6px}
.csc-tg i{flex:0 0 100%;font-style:normal;font:800 8px/1.4 'Inter',system-ui,sans-serif;
  letter-spacing:.15em;color:#6d757d}
.csc-tg button{padding:7px 11px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(11,22,40,.18);background:rgba(11,22,40,.03);color:#d6dce2;
  font:600 11.5px/1.3 'Inter',system-ui,sans-serif;text-align:left;transition:.14s}
.csc-tg button:hover{border-color:#1677ff;color:#1677ff}
.csc-tg button:disabled{opacity:.45;cursor:default}

/* The second choice on the pre-chat form. Quieter than the primary,
   because most people do want the chat — but present, because when
   the desk is away the ticket IS the action and it should say so. */
.csc-go.alt{margin-top:8px;background:none;border:1px solid rgba(11,22,40,.24);color:rgba(11,22,40,.8)}
.csc-go.alt:hover{border-color:#1677ff;color:#1677ff;background:none}

/* Callsy: the topic picker on the start form */
.csc-f select{width:100%;padding:11px 12px;border-radius:10px;font:inherit;font-size:13px;color:#0b1628;background:rgba(11,22,40,.045);border:1px solid rgba(11,22,40,.14);outline:none}
.csc-f select:focus{border-color:#1677ff}
.csc-m.me .csc-t{color:#5d656d}
.csc-btn{color:#fff}