/* Premier Roofing Manchester Limited AI receptionist call screen — isolated wcr-call namespace. */
body.wcr-call-open{overflow:hidden!important}
.wcr-call-modal{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,8,13,.74);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overscroll-behavior:contain;
}
.wcr-call-modal.open{display:flex}
.wcr-call-device{
  position:relative;
  width:min(430px,calc(100vw - 34px));
  height:min(740px,calc(100dvh - 38px));
  min-height:610px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:40px;
  background:
    radial-gradient(circle at 50% 14%,rgba(249,115,22,.22),transparent 27%),
    radial-gradient(circle at 0 92%,rgba(37,99,235,.13),transparent 34%),
    linear-gradient(155deg,#07111c 0%,#0d1c28 46%,#071018 100%);
  box-shadow:0 42px 130px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.16);
  isolation:isolate;
}
.wcr-call-device:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.wcr-call-top{
  min-height:92px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:20px 64px 8px;
  text-align:center;
}
.wcr-call-top span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#ffbd7f;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.wcr-call-top span:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 0 0 5px rgba(249,115,22,.14);
}
.wcr-call-top strong{
  color:rgba(255,255,255,.92);
  font-size:15px;
  font-weight:720;
  letter-spacing:.01em;
}
.wcr-call-back{
  position:absolute;
  top:23px;
  left:18px;
  z-index:5;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:36px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,transform .18s ease;
}
.wcr-call-back:hover,.wcr-call-back:focus-visible{background:rgba(255,255,255,.16);outline:none;transform:scale(1.03)}
.wcr-call-main{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:7px 28px 10px;
}
.wcr-call-avatar{
  position:relative;
  width:clamp(150px,40vh,235px);
  height:clamp(150px,40vh,235px);
  max-width:58vw;
  max-height:58vw;
  flex:0 0 auto;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 9px rgba(249,115,22,.15),inset 0 0 0 1px rgba(17,19,24,.08);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.wcr-call-avatar:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.24),transparent 45%);
  pointer-events:none;
}
.wcr-call-avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
.wcr-call-device.is-ringing .wcr-call-avatar{animation:wcrCallRingPulse 1.05s ease-in-out infinite}
.wcr-call-device.is-live .wcr-call-avatar,.wcr-call-device.is-listening .wcr-call-avatar{border-color:#34d399;box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 9px rgba(52,211,153,.14)}
.wcr-call-device.is-speaking .wcr-call-avatar{border-color:#fb923c;box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 10px rgba(251,146,60,.18);animation:wcrCallSpeakingPulse .72s ease-in-out infinite}
.wcr-call-device.is-ended .wcr-call-avatar,.wcr-call-device.is-error .wcr-call-avatar{filter:saturate(.75);border-color:#f87171;box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 9px rgba(248,113,113,.13)}
@keyframes wcrCallRingPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes wcrCallSpeakingPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.wcr-call-main h2{
  margin:19px 0 2px;
  color:#fff;
  font-size:clamp(27px,6vw,34px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:900;
}
.wcr-call-number{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:15px;
  font-weight:700;
}
.wcr-call-status{
  min-height:25px;
  margin:10px 0 2px;
  color:#f8fafc;
  font-size:15px;
  line-height:1.35;
  font-weight:760;
}
.wcr-call-waves{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:2px 0;
}
.wcr-call-waves i{
  width:4px;
  height:7px;
  display:block;
  border-radius:999px;
  background:linear-gradient(180deg,#ffb36b,#f97316);
  opacity:.42;
  transform-origin:center;
}
.wcr-call-device.is-ringing .wcr-call-waves i,.wcr-call-device.is-speaking .wcr-call-waves i,.wcr-call-device.is-listening .wcr-call-waves i{
  animation:wcrCallWave .85s ease-in-out infinite;
  opacity:1;
}
.wcr-call-waves i:nth-child(2){animation-delay:.08s}.wcr-call-waves i:nth-child(3){animation-delay:.16s}.wcr-call-waves i:nth-child(4){animation-delay:.24s}.wcr-call-waves i:nth-child(5){animation-delay:.32s}.wcr-call-waves i:nth-child(6){animation-delay:.40s}.wcr-call-waves i:nth-child(7){animation-delay:.48s}
@keyframes wcrCallWave{0%,100%{height:7px;transform:scaleY(1)}50%{height:29px;transform:scaleY(1.04)}}
.wcr-call-timer{
  min-height:23px;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.035em;
}
.wcr-call-caption{
  width:100%;
  min-height:56px;
  max-height:76px;
  display:grid;
  align-content:center;
  gap:2px;
  margin-top:auto;
  padding:9px 13px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.83);
  text-align:left;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.wcr-call-caption b{color:#ffbd7f;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.11em}
.wcr-call-caption span{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wcr-call-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:13px;
  padding:11px 26px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
}
.wcr-call-action{
  min-width:0;
  display:grid;
  place-items:center;
  gap:7px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
}
.wcr-call-action>span{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.27);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 28px rgba(0,0,0,.14);
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.wcr-call-action:hover>span,.wcr-call-action:focus-visible>span{background:rgba(255,255,255,.17);transform:translateY(-1px)}
.wcr-call-action:focus-visible{outline:none}
.wcr-call-action svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wcr-call-action small{color:rgba(255,255,255,.88);font-size:12px;line-height:1;font-weight:650}
.wcr-call-action.active>span{background:#f59e0b;border-color:#fbbf24}
.wcr-call-action.phone>span{background:rgba(34,197,94,.16);border-color:rgba(74,222,128,.42)}
.wcr-call-action.end>span{background:linear-gradient(145deg,#ef4444,#dc2626);border-color:rgba(255,255,255,.10);box-shadow:0 12px 28px rgba(220,38,38,.28)}
.wcr-call-delivery{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 24px 14px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  line-height:1.35;
  font-weight:650;
  text-align:center;
}
.wcr-call-remote-audio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:700px){
  .wcr-call-modal{padding:0;align-items:stretch;justify-content:stretch;background:#07111c}
  .wcr-call-device{
    width:100vw;
    height:100svh;
    min-height:100svh;
    max-height:100svh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  @supports(height:100dvh){.wcr-call-device{height:100dvh;min-height:100dvh;max-height:100dvh}}
  .wcr-call-top{min-height:82px;padding:16px 58px 4px}
  .wcr-call-back{top:15px;left:12px;width:42px;height:42px;font-size:33px}
  .wcr-call-main{padding:4px 18px 5px}
  .wcr-call-avatar{width:clamp(132px,39svh,255px);height:clamp(132px,39svh,255px);max-width:70vw;max-height:70vw}
  @supports(height:100dvh){.wcr-call-avatar{width:clamp(132px,39dvh,255px);height:clamp(132px,39dvh,255px)}}
  .wcr-call-main h2{margin-top:13px;font-size:clamp(25px,7.5vw,32px)}
  .wcr-call-number{font-size:14px}
  .wcr-call-status{margin-top:7px;font-size:14px}
  .wcr-call-waves{height:29px}
  .wcr-call-caption{min-height:50px;max-height:66px;margin-top:4px}
  .wcr-call-actions{gap:8px;padding:8px 18px 7px}
  .wcr-call-action>span{width:clamp(50px,16vw,60px);height:clamp(50px,16vw,60px)}
  .wcr-call-action small{font-size:11px}
  .wcr-call-delivery{min-height:37px;padding:2px 18px calc(9px + env(safe-area-inset-bottom));font-size:9px}
}

@media(max-width:700px) and (max-height:720px){
  .wcr-call-top{min-height:65px;padding-top:9px}
  .wcr-call-top span{font-size:9px}.wcr-call-top strong{font-size:13px}
  .wcr-call-back{top:8px}
  .wcr-call-avatar{width:clamp(112px,32svh,205px);height:clamp(112px,32svh,205px)}
  @supports(height:100dvh){.wcr-call-avatar{width:clamp(112px,32dvh,205px);height:clamp(112px,32dvh,205px)}}
  .wcr-call-main h2{margin-top:9px;font-size:24px}
  .wcr-call-status{min-height:21px;margin-top:4px;font-size:13px}
  .wcr-call-waves{height:23px;margin:0}
  .wcr-call-device.is-ringing .wcr-call-waves i,.wcr-call-device.is-speaking .wcr-call-waves i,.wcr-call-device.is-listening .wcr-call-waves i{animation-name:wcrCallWaveShort}
  @keyframes wcrCallWaveShort{0%,100%{height:6px}50%{height:20px}}
  .wcr-call-caption{min-height:42px;max-height:52px;padding:7px 11px}.wcr-call-caption span{font-size:11px}
  .wcr-call-action>span{width:48px;height:48px}.wcr-call-action svg{width:21px;height:21px}
  .wcr-call-actions{padding-top:5px}.wcr-call-delivery{min-height:31px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}

@media(max-width:380px){
  .wcr-call-main{padding-left:12px;padding-right:12px}
  .wcr-call-actions{padding-left:10px;padding-right:10px}
  .wcr-call-action>span{width:48px;height:48px}
  .wcr-call-action small{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .wcr-call-device *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}