/*
 * "Call a human" — the edge tab, its phone sheet, and the hint bubble.
 *
 * All of this used to live in assets/ask.css. Deleting the AI helper
 * (Noah, 2026-10-03) took that file with it and left the tab as a 401x21
 * strip of text 8000px down the page, and the call sheet completely
 * unstyled — every `position: fixed`, size and colour it had was in there.
 * The markup is, and always was, in inc/contact-info.php; only the styling
 * was a lodger in the chat widget's stylesheet.
 *
 * Extracted from ask.css with the .cl-ask__tab halves of shared selectors
 * dropped. Nothing was rewritten.
 */

/* ============================================================
   CALL A HUMAN — always one tap away (2026-09-21)
   Sits on the left edge directly under Pepper's tab, same shape,
   so the two read as a pair: "ask Pepper" / "call a human".
   Pepper's tab: 50svh centre, 122px tall on phones, 132px up.
   ============================================================ */
.cl-calltab {
	position: fixed;
	left: 0;
	top: calc(50svh + 68px + 10px);   /* AI Chat tab: 135px tall at every width */
	z-index: 9989;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 36px;
	padding: 12px 0;
	border: 1px solid rgba(61, 214, 140, 0.55);
	border-left: 0;
	border-radius: 0 12px 12px 0;
	background: linear-gradient(145deg, #13241C, #0E1712);
	box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(61, 214, 140, 0.25);
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.cl-calltab__icon { color: #3DD68C; flex: 0 0 auto; }

.cl-calltab__text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	/* 12px to match the chat tab; 79px of label in a 129px tab, so it fits. */
	font: 700 12px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	letter-spacing: 0.06em;
	color: #fff;
	white-space: nowrap;
}

.cl-calltab__text b { font-weight: 700; }

.cl-calltab__num { display: none; }

.cl-calltab:hover { border-color: #3DD68C; }

.cl-calltab:focus-visible { outline: 3px solid rgba(61, 214, 140, 0.6); outline-offset: 2px; }

/* the invisible tap area is 44px wide even though the tab is 36 */
.cl-calltab::after { content: ""; position: absolute; inset: -4px -8px -4px 0; }

/* phones: the pair sits at 38svh (nudged up from 44 on 2026-09-21);
   the call tab sits 10px under it, clear of the checkout bar */
@media (max-width: 767px) {
.cl-calltab { top: calc(38svh + 68px + 10px); }
}

/* under full-screen layers it would float over their own contact lines */
body.cl-co-open .cl-calltab,
body.cl-drawer-open .cl-calltab,
body.cl-menu-open .cl-calltab { display: none; }

/* phones: the edge tabs fade to an outline when idle (timers in contact-info.php) */
@media (max-width: 767px) {
.cl-calltab { transition: transform .3s ease, opacity .6s ease, box-shadow .6s ease, background-color .6s ease; }
body.cl-tabs-quiet .cl-calltab {
		opacity: 0.35;
		box-shadow: none;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.cl-calltab { transition: none; }
}

@media (max-width: 767px) and (max-height: 700px) {
.cl-calltab__text { display: none; }
/* short phones: icon only, 44px tall */
	.cl-calltab { padding: 14px 0; }
}

/* "Call a human" breathes like the chat tab, in green */
.cl-calltab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 2px rgba(170, 245, 205, 0.85), 0 0 26px 7px rgba(61, 214, 140, 0.7);
	opacity: 0;
	pointer-events: none;
	animation: cl-pep-glowfade 2.4s ease-in-out infinite;
	animation-delay: 1.2s;   /* alternates with the chat tab instead of pulsing together */
	will-change: opacity;
}

body.cl-tabs-quiet .cl-calltab::before { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
.cl-calltab::before { animation: none; opacity: 0.4; }
}

/* larger screens: the pair nudged up a smidge too (was 50svh) */
@media (min-width: 768px) {
body .cl-calltab { top: calc(45svh + 68px + 10px); }
}

body .cl-calltab::after { inset: -5px -20px -5px 0; }

/* ============================================================
   CALL SHEET — "Call a human" opens this (2026-09-21)
   Phone: bottom sheet, 16px gutters, 56px buttons.
   ≥560px: 380px card, centred.  X: 44px, top-right, always.
   ============================================================ */
.cl-callsheet {
	position: fixed;
	inset: 0;
	z-index: 10070;              /* over checkout (9996) and the chat (10060) */
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.cl-callsheet[hidden] { display: none; }

.cl-callsheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 5, 9, 0.66);
	opacity: 0;
	transition: opacity .25s ease;
}

.cl-callsheet__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 28px 16px calc(20px + env(safe-area-inset-bottom));
	border: 1px solid rgba(61, 214, 140, 0.35);
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	background: linear-gradient(180deg, #16211B 0%, #0E1411 100%);
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
	text-align: center;
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.2, .9, .3, 1);
}

.cl-callsheet.is-open .cl-callsheet__scrim { opacity: 1; }

.cl-callsheet.is-open .cl-callsheet__card { transform: none; }

.cl-callsheet__x {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
}

.cl-callsheet__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font: 700 12px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #3DD68C;
}

.cl-callsheet__live {
	width: 8px; height: 8px; border-radius: 50%;
	background: #3DD68C;
	box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.6);
	animation: cl-live 1.8s ease-out infinite;
}

.cl-callsheet__title {
	margin: 0 0 6px;
	font: 800 22px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	color: #fff;
}

.cl-callsheet__num {
	margin: 0 0 20px;
	font: 700 28px/1.2 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	color: #fff;
	user-select: all;
}

.cl-callsheet__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	margin: 0 0 12px;
	border-radius: 14px;
	font: 700 17px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	text-decoration: none;
}

.cl-callsheet__btn:last-child { margin-bottom: 0; }

.cl-callsheet__btn--call {
	border: 1px solid #6FF0B0;
	background: linear-gradient(180deg, #2FC37C 0%, #1F9A5F 100%);
	color: #fff;
	animation: cl-callglow 2.4s ease-in-out infinite;
}

.cl-callsheet__btn--text {
	border: 1px solid rgba(61, 214, 140, 0.55);
	background: rgba(61, 214, 140, 0.1);
	color: #fff;
}

@media (min-width: 560px) {
.cl-callsheet { align-items: center; padding: 16px; }
.cl-callsheet__card {
		max-width: 380px;
		padding: 32px 24px 24px;
		border-bottom: 1px solid rgba(61, 214, 140, 0.35);
		border-radius: 20px;
		transform: translateY(12px) scale(.98);
		opacity: 0;
		transition: transform .22s ease, opacity .22s ease;
	}
.cl-callsheet.is-open .cl-callsheet__card { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
.cl-callsheet__card,
.cl-callsheet__scrim { transition: none; }
.cl-callsheet__btn--call,
.cl-callsheet__live { animation: none; }
}

body.cl-callsheet-open .cl-calltab { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
body .cl-calltab {
		width: 26px;
		min-height: 0;
		height: 46px;
		padding: 0;
		gap: 3px;
		justify-content: center;
		border-radius: 0 10px 10px 0;
	}
body .cl-calltab { top: calc(38svh + 23px + 6px); }
/* chat is centred: half of 46, then 6 */
	body .cl-calltab__text,
body .cl-calltab__num { display: none !important; }
body .cl-calltab__icon { width: 15px; height: 15px; }
/* 44px wide, 52px tall tap target; the 6px gap is split 3/3 */
	body .cl-calltab::after { inset: -3px -18px -3px 0; }
.cl-calltab::before { box-shadow: 0 0 0 1.5px rgba(170, 245, 205, 0.75), 0 0 14px 3px rgba(61, 214, 140, 0.55); }
body .cl-calltab { box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.45); }
}

/* phones: tucked tabs (while scrolling) become a thin 16px strip — inside
   the page's 16px gutter, so they never cover text — with tiny VERTICAL
   words, "AI helper" / "Talk to someone". Awake, they are unchanged
   (icon + "AI" / "Call"). */
.cl-tabquiet { display: none; }

@media (max-width: 767px) {
body.cl-tabs-quiet .cl-calltab {
    width: 16px !important;
    padding: 0 !important;
    border-radius: 0 7px 7px 0 !important;
    opacity: 0.95 !important;
    /* Opacity only. This used to read
     *   transition: width .3s, height .3s, top .3s, opacity .3s
     * and it is why Noah reported the tab "glitching" on his phone.
     *
     * Three things were happening at once, all during a scroll:
     *   1. width, height and top are LAYOUT properties, so every frame of the
     *      300ms tuck forced a reflow — the craft floor calls casual
     *      layout-property animation out by name.
     *   2. the quiet state moved the tab to a DIFFERENT top, so it jumped
     *      vertically mid-scroll rather than just narrowing.
     *   3. the top is expressed in svh, and on iOS svh changes as the URL bar
     *      collapses — which is exactly when cl-tabs-quiet is toggled. So the
     *      animation's target moved while the animation was running.
     *
     * The tuck now changes size instantly and only the fade is animated. The
     * tab also keeps its resting top, so it narrows in place instead of
     * sliding. Do not reintroduce top/width/height here. */
    transition: opacity .3s ease;
  }
/* height only — the top is deliberately NOT changed, see above */
body.cl-tabs-quiet .cl-calltab { height: 116px !important; }
/* half the 52px chat strip, then 5 */
  body.cl-tabs-quiet .cl-calltab > :not(.cl-tabquiet) { display: none !important; }
body.cl-tabs-quiet .cl-tabquiet {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);          /* reads bottom-to-top, like a book spine */
    /* 12px, not the 8px this was: nothing on this site renders below 12px,
       and the suite had been failing on this one string on every page. The
       tab grew 92px -> 116px to fit "Talk to someone" at the larger size. */
    font: 700 12px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
  }
body.cl-tabs-quiet .cl-tabquiet br { display: none; }
body.cl-tabs-quiet .cl-calltab::before { animation: none; opacity: 0; }
body.cl-tabs-quiet .cl-calltab::after { inset: -3px -28px -3px 0 !important; }
}

@keyframes cl-pep-glowfade {
	0%, 100% { opacity: 0; }
	50%      { opacity: 1; }
}

@keyframes cl-live { 0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(61, 214, 140, 0); } }

@keyframes cl-callglow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(111, 240, 176, .4), 0 0 14px 2px rgba(61, 214, 140, .45); }
	50%      { box-shadow: 0 0 0 2px rgba(170, 245, 205, .8), 0 0 28px 7px rgba(61, 214, 140, .75); }
}

/* ------------------------------------------------------------------
 * ALONE NOW
 *
 * Every `top` above is written as an OFFSET from the AI chat tab that
 * used to sit directly on top of this one — the repeated "+ 68px + 10px"
 * terms. With that tab gone the offsets only push the single remaining
 * tab below centre, so centre it on itself instead. One rule covers the
 * phone, desktop and short-screen cases rather than re-deriving four
 * different offsets.
 * ------------------------------------------------------------------ */
body .cl-calltab,
body.cl-tabs-quiet .cl-calltab {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ------------------------------------------------------------------
 * THE MINI LABEL
 *
 * On phones the tall tab shrinks to 26x46 and the vertical "Call a human"
 * is swapped for this 9px word. It is hidden everywhere else — and that
 * `display: none` was the ONLY thing hiding it, so when ask.css went the
 * word "Call" appeared on desktop, floating under the tab with no box
 * around it. Missed on the first extraction because the selector names
 * neither the tab nor the sheet.
 * ------------------------------------------------------------------ */
.cl-tabmini { display: none; }

@media (max-width: 767px) {
  .cl-tabmini {
    display: block;
    font: 700 9px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
    letter-spacing: 0.02em;
    color: #fff;
  }
}


/* ------------------------------------------------------------------
 * "Call a human" INSIDE THE CHECKOUT MODAL
 *
 * inc/checkout-modal.php still renders this link; only its styling was in
 * ask.css, next to the AI helper's twin link (.cl-co__pepper, which went
 * with the helper). Extracted here with the pepper halves of every shared
 * selector dropped.
 * ------------------------------------------------------------------ */
/* Checkout header: Call, beside Ask Pepper */
.cl-co__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(61, 214, 140, 0.6);
	border-radius: 999px;
	background: rgba(61, 214, 140, 0.12);
	color: #fff;
	font: 700 14px/1 var(--font-body, "Plus Jakarta Sans"), sans-serif;
	text-decoration: none;
}

.cl-co__call svg { color: #3DD68C; }

/* phones: "Call a human" reads in full; Pepper's pill drops "Ask" and the
   "Checkout" title steps aside (the page below says where you are).
   375: 16 | call 132 | 8 | pepper 96 | 8 | X 44 | 16 = 320, fits in 343 */
@media (max-width: 480px) {
.cl-co__call { margin-right: auto; font-size: 14px; }
}

@media (max-width: 340px) {
.cl-co__callText { font-size: 13px; }
}

/* Checkout header: a glare sweeps across "Call a human" and "Pepper"
   (the same shine as "Secure" on the payment options), staggered */
.cl-co__call { position: relative; overflow: hidden; isolation: isolate; }

.cl-co__call::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	/* green on Call a human (its own colour) */
	background: linear-gradient(100deg, rgba(120, 240, 180, 0) 0%, rgba(120, 240, 180, 0.6) 50%, rgba(120, 240, 180, 0) 100%);
	transform: translateX(-40px) skewX(-18deg);
	animation: cl-head-glare 6.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
.cl-co__call::after { animation: none; display: none; }
}

/* checkout header pills stay on one line at 375 ("Call a human" wrapped) */
@media (max-width: 767px) {
.cl-co__call { white-space: nowrap !important; font-size: 13px !important; padding-inline: 10px !important; gap: 6px !important; }
.cl-co__call svg { width: 15px !important; height: 15px !important; flex: 0 0 15px; }
}


/* keyframes the rules above reference, carried over from ask.css */
@keyframes cl-head-glare {
	0%, 45% { transform: translateX(-40px) skewX(-18deg); }
	85%     { transform: translateX(160px) skewX(-18deg); }
	100%    { transform: translateX(160px) skewX(-18deg); }
}