/* ============================================================================
   Debt Mate Command Centre — softphone console theme (premium v2).
   Dark gunmetal + electric-blue command-console styling for the in-browser
   webphone widget (assets/js/lib/webphone.js). Loaded via <link> in
   index.html. All visual styling lives here; the renderer emits class-based
   markup (element IDs are preserved so the call logic keeps working).

   Palette — sampled from the official Debt Mate Command Centre logo
   (assets/img/debtmate-command-centre-full.jpg):
     bg deep       #040710      panel        #07132D
     glass         rgba(7,19,45,.72)         border  rgba(2,113,246,.30)
     primary blue  #0271F6      deep glow    #004EFF     light   #2F8BFF
     chrome text   #F4F7FB      steel text   #8DA2C0
     success       #22C55E      warning      #F59E0B     danger  #EF4444
   ============================================================================ */

.wpc {
  width: 328px;
  max-width: calc(100vw - 16px);
  /* Pinned header + scrollable lower half: cap the widget to the viewport and
     let .wpc-scrollzone scroll under the sticky session bar. */
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
  border-radius: 20px;
  overflow: hidden;
  color: #d7e2f4;
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(2,113,246,.30), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(0,78,255,.12), transparent 55%),
    linear-gradient(180deg, #0a1a3d 0%, #07132d 48%, #040710 100%);
  border: 1px solid rgba(2,113,246,.30);
  box-shadow:
    0 0 0 1px rgba(1,4,12,.7),
    0 24px 60px rgba(1,4,12,.7),
    0 0 42px rgba(0,78,255,.18),
    inset 0 1px 0 rgba(150,190,255,.14);
  font: 500 13px/1.4 "Inter", "Helvetica Neue", Arial, sans-serif;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Header banner (logo) + drag handle ─────────────────────────────────── */
.wpc-head {
  position: relative;
  height: 74px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background:
    linear-gradient(180deg, rgba(4,7,16,.0) 45%, rgba(3,6,13,.88) 100%),
    url('../img/debtmate-command-centre.png') center 6px/86% auto no-repeat,
    linear-gradient(180deg, #0a1c42 0%, #050b1c 100%);
  border-bottom: 1px solid rgba(2,113,246,.35);
}
.wpc-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,139,255,.9), transparent);
}
.wpc-dot {
  position: absolute; top: 9px; left: 11px;
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(1,4,12,.8), 0 0 12px 2px currentColor;
}
.wpc-min {
  position: absolute; top: 6px; right: 7px;
  border: 1px solid rgba(2,113,246,.28);
  background: rgba(4,10,24,.66); color: #a9c2ea;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wpc-min:hover { background: rgba(2,113,246,.55); color: #fff; }
.wpc-id {
  position: absolute; bottom: 13px; left: 0; right: 0; text-align: center;
  font: 700 9.5px/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #e8eef8; text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.wpc-brandline {
  position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
  font: 600 7.5px/1 "Inter", sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: #5f7bb0; text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
.wpc-role {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  font: 700 8px/1 "Inter", sans-serif; letter-spacing: .12em;
  color: #6db1ff; background: rgba(2,113,246,.14);
  border: 1px solid rgba(2,113,246,.45);
  vertical-align: middle;
}
/* Drag affordance — make it obvious the phone moves by its header. */
.wpc-grip {
  position: absolute; top: 8px; left: 26px;
  font: 700 8px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #7f9bce; pointer-events: none; opacity: .8;
}
/* Recording indicator — calls are auto-recorded for QA; pulses while on a call. */
.wpc-rec {
  position: absolute; top: 8px; right: 40px;
  font: 700 8px/1 "Inter", sans-serif; letter-spacing: .1em;
  color: #8a97ad; background: rgba(4,10,24,.55);
  padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(120,130,150,.3);
  pointer-events: none;
}
.wpc-rec.live {
  color: #fff; background: rgba(239,68,68,.9); border-color: rgba(255,120,110,.7);
  animation: wpc-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes wpc-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Scroll zone — the lower half slides UNDER the pinned top ───────────── */
.wpc-head { flex: none; }
.wpc-scrollzone {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(2,113,246,.45) transparent;
}
.wpc-scrollzone::-webkit-scrollbar { width: 6px; }
.wpc-scrollzone::-webkit-scrollbar-track { background: transparent; }
.wpc-scrollzone::-webkit-scrollbar-thumb {
  background: rgba(2,113,246,.45); border-radius: 999px;
}
.wpc-scrollzone::-webkit-scrollbar-thumb:hover { background: rgba(47,139,255,.65); }

/* ── Agent session bar (Offline / Ready / Paused) ───────────────────────── */
/* Sticky glass: pinned at the top of the scroll zone with a blurred,
   translucent background — the dial pad scrolls visibly underneath it. */
.wpc-session {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 11px 14px 12px;
  background: linear-gradient(180deg, rgba(7,19,45,.92), rgba(7,19,45,.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(2,113,246,.32);
  box-shadow: 0 12px 26px rgba(1,4,12,.5);
}
.wpc-session-row { display: flex; align-items: center; gap: 9px; }
.wpc-spill {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: 800 10.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; border: 1px solid;
}
.wpc-spill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px 1px currentColor;
}
.wpc-spill.ready {
  color: #4ade80; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.1);
  animation: wpcPulseGreen 2.2s ease-in-out infinite;
}
.wpc-spill.paused {
  color: #fbbf24; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.1);
  animation: wpcPulseAmber 2.2s ease-in-out infinite;
}
.wpc-spill.offline {
  color: #f87171; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1);
  animation: wpcPulseRed 2.6s ease-in-out infinite;
}
@keyframes wpcPulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.32); }
  50%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
@keyframes wpcPulseAmber {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.32); }
  50%     { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}
@keyframes wpcPulseRed {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); }
  50%     { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.wpc-smsg { font: 700 12.5px/1.2 inherit; color: #f4f7fb; }
.wpc-ssub { margin-top: 3px; font: 500 11px/1.35 inherit; color: #8da2c0; }
.wpc-session .wpc-row { margin-top: 10px; }
.wpc-session-btns { display: flex; gap: 8px; margin-top: 10px; }

/* Pause-reason chips */
.wpc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wpc-reason {
  border: 1px solid rgba(245,158,11,.4); border-radius: 999px; cursor: pointer;
  padding: 6px 11px; font: 600 11px/1 inherit; color: #fcd34d;
  background: rgba(245,158,11,.08); transition: background .12s, transform .06s;
}
.wpc-reason:hover { background: rgba(245,158,11,.2); }
.wpc-reason:active { transform: translateY(1px); }

/* Dimmed dial area when the agent is not READY */
.wpc-dialwrap { transition: opacity .25s; }
.wpc-dialwrap.wpc-dim { opacity: .38; pointer-events: none; filter: saturate(.6); }

/* ── Client intelligence card ───────────────────────────────────────────── */
.wpc-client {
  display: flex; gap: 9px; align-items: center; justify-content: center;
  padding: 8px 12px; font: 600 11px/1.2 inherit;
  background: rgba(4,10,24,.55);
  border-bottom: 1px solid rgba(2,113,246,.22);
}
.wpc-client b { color: #f4f7fb; }
.wpc-client .sep { color: #3a5382; }
.wpc-client .risk { color: #fbbf24; }
.wpc-intel {
  margin: 0 14px 4px; padding: 10px 12px; border-radius: 12px;
  background: rgba(7,19,45,.72);
  border: 1px solid rgba(47,139,255,.34);
  box-shadow: inset 0 1px 0 rgba(150,190,255,.1);
  text-align: left;
}
.wpc-intel-lbl {
  font: 800 8.5px/1 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #2f8bff; margin-bottom: 7px;
}
.wpc-intel-row {
  display: flex; justify-content: space-between; gap: 10px;
  font: 500 11.5px/1.5 inherit; color: #8da2c0;
}
.wpc-intel-row b { color: #f4f7fb; font-weight: 600; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wpc-body { padding: 14px 14px 15px; }
.wpc-section-lbl {
  font: 800 10.5px/1 inherit; letter-spacing: .09em; text-transform: uppercase;
  color: #5f8fdd; margin-bottom: 9px;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.wpc-input {
  width: 100%; box-sizing: border-box; margin-bottom: 12px;
  border: 1px solid rgba(2,113,246,.32); border-radius: 12px;
  padding: 12px 13px; font: 600 15px/1 inherit;
  background: rgba(1,4,12,.75); color: #f4f7fb;
  transition: border-color .15s, box-shadow .15s;
}
.wpc-input::placeholder { color: #55719c; }
.wpc-input:focus { outline: none; border-color: rgba(47,139,255,.8); box-shadow: 0 0 0 3px rgba(2,113,246,.2); }
.wpc-input:disabled { opacity: .5; }
textarea.wpc-input, select.wpc-input { font-size: 14px; }

/* ── Keypad ─────────────────────────────────────────────────────────────── */
.wpc-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.wpc-key {
  border: 1px solid rgba(2,113,246,.32); border-radius: 13px; cursor: pointer;
  padding: 14px 0; font: 600 18px/1 inherit; color: #f4f7fb;
  min-height: 46px;
  background: linear-gradient(180deg, rgba(18,42,92,.9) 0%, rgba(6,14,32,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(160,200,255,.22), 0 2px 8px rgba(1,4,12,.6);
  transition: transform .05s, box-shadow .12s, background .12s;
}
.wpc-key:hover { background: linear-gradient(180deg, rgba(24,58,128,.95) 0%, rgba(8,20,46,1) 100%); }
.wpc-key:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(1,4,12,.7); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.wpc-btn {
  border: 1px solid rgba(2,113,246,.34); cursor: pointer; border-radius: 12px;
  padding: 12px 15px; font: 700 13px/1 inherit; color: #eef4fd;
  min-height: 42px;
  background: linear-gradient(180deg, rgba(18,42,92,.9), rgba(6,14,32,.95));
  box-shadow: inset 0 1px 0 rgba(160,200,255,.2), 0 2px 8px rgba(1,4,12,.55);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .06s, filter .12s;
}
.wpc-btn:hover { filter: brightness(1.14); }
.wpc-btn:active { transform: translateY(1px); }
.wpc-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.wpc-btn.flex1 { flex: 1; }
.wpc-row { display: flex; gap: 9px; }
.wpc-row.mt { margin-top: 10px; }

.wpc-call  { background: linear-gradient(180deg, #26bd6c, #158048); border-color: rgba(74,222,128,.5); color:#fff;
             box-shadow: inset 0 1px 0 rgba(170,255,210,.32), 0 4px 16px rgba(34,197,94,.35); }
.wpc-end   { background: linear-gradient(180deg, #ef4444, #a51e16); border-color: rgba(255,120,110,.5); color:#fff;
             box-shadow: inset 0 1px 0 rgba(255,180,170,.3), 0 4px 14px rgba(239,68,68,.35); }
.wpc-amber { background: linear-gradient(180deg, #f59e0b, #a86a08); border-color: rgba(255,200,90,.5); color:#fff;
             box-shadow: inset 0 1px 0 rgba(255,225,160,.3), 0 4px 14px rgba(245,158,11,.3); }
.wpc-on    { background: linear-gradient(180deg, #0271f6, #0340b8); border-color: rgba(77,154,255,.6); color:#fff;
             box-shadow: inset 0 1px 0 rgba(160,200,255,.32), 0 4px 14px rgba(0,78,255,.4); }
.wpc-ghost { background: rgba(7,19,45,.65); color: #a9c2ea; }

/* ── Command Features grid ──────────────────────────────────────────────── */
.wpc-feat-wrap { margin-top: 12px; border-top: 1px solid rgba(2,113,246,.22); padding-top: 11px; }
.wpc-feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.wpc-feat-toggle { border: 1px solid rgba(2,113,246,.34); background: rgba(7,19,45,.6);
  color: #8da2c0; cursor: pointer; border-radius: 8px; padding: 4px 11px;
  font: 600 10px/1 "Inter", sans-serif; letter-spacing: .04em; }
.wpc-feat-toggle:hover { color: #f4f7fb; border-color: rgba(47,139,255,.55); }
.wpc-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpc-feat-btn {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  border: 1px solid rgba(2,113,246,.28); border-radius: 12px; cursor: pointer;
  padding: 10px; font: 700 11px/1.2 inherit; color: #d7e2f4;
  background: linear-gradient(180deg, rgba(18,42,92,.55), rgba(6,14,32,.65));
  box-shadow: inset 0 1px 0 rgba(150,190,255,.12);
  transition: transform .06s, border-color .12s, filter .12s;
}
.wpc-feat-btn:hover { border-color: rgba(47,139,255,.55); filter: brightness(1.14); }
.wpc-feat-btn:active { transform: translateY(1px); }
.wpc-feat-btn .ico { font-size: 15px; flex: none; margin-top: 1px; filter: drop-shadow(0 0 5px rgba(47,139,255,.6)); }
.wpc-feat-btn .sub { display: block; margin-top: 3px; font: 500 9px/1.25 inherit; color: #7189ad; letter-spacing: .01em; }
.wpc-feat-btn .soon {
  display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 999px;
  font: 700 7.5px/1 "Inter", sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: #8da2c0; background: rgba(141,162,192,.12); border: 1px solid rgba(141,162,192,.3);
}
.wpc-sel { border-color: rgba(47,139,255,.9) !important; color: #f4f7fb;
  background: linear-gradient(180deg, #123a80, #081b42) !important;
  box-shadow: 0 0 0 1px rgba(2,113,246,.45), inset 0 1px 0 rgba(160,200,255,.25); }

/* ── Analytics mini view ────────────────────────────────────────────────── */
.wpc-ana { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpc-ana-tile {
  border: 1px solid rgba(2,113,246,.26); border-radius: 12px; padding: 10px 11px;
  background: rgba(7,19,45,.68);
  box-shadow: inset 0 1px 0 rgba(150,190,255,.1);
}
.wpc-ana-num { font: 800 19px/1.1 "Inter", sans-serif; color: #f4f7fb; }
.wpc-ana-num.blue  { color: #4d9aff; }
.wpc-ana-num.green { color: #4ade80; }
.wpc-ana-num.amber { color: #fbbf24; }
.wpc-ana-num.red   { color: #f87171; }
.wpc-ana-lbl { margin-top: 3px; font: 600 9px/1.2 "Inter", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #7189ad; }
.wpc-ana-note { margin-top: 9px; font: 500 10.5px/1.4 inherit; color: #7189ad; text-align: center; }

/* ── Status / pills ─────────────────────────────────────────────────────── */
.wpc-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px; padding: 8px 11px; border-radius: 10px;
  background: rgba(4,10,24,.6); border: 1px solid rgba(2,113,246,.24);
}
.wpc-statuschip { font: 700 10px/1 inherit; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.wpc-link {
  margin-top: 10px; width: 100%; border: 1px solid rgba(2,113,246,.24);
  background: rgba(7,19,45,.55); color: #93b8ec; border-radius: 10px;
  padding: 10px; cursor: pointer; font: 700 11px/1 inherit; letter-spacing: .04em;
  transition: border-color .12s, color .12s;
}
.wpc-link:hover { border-color: rgba(47,139,255,.55); color: #f4f7fb; }
.wpc-big { font: 700 18px/1.2 inherit; color: #f4f7fb; text-align: center; margin: 6px 0; }
.wpc-sub { font: 700 10.5px/1 inherit; letter-spacing: .09em; text-transform: uppercase; color: #5f8fdd; text-align: center; }
.wpc-timer {
  font: 800 22px/1 "Inter", sans-serif; color: #4d9aff; text-align: center; margin: 10px 0 15px;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(0,78,255,.55);
}
.wpc-center { text-align: center; padding: 16px; }

/* Incoming-call avatar ring */
.wpc-ring {
  width: 58px; height: 58px; margin: 4px auto 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #4ade80;
  background: rgba(34,197,94,.1); border: 2px solid rgba(34,197,94,.55);
  animation: wpcRing 1.3s ease-out infinite;
}
@keyframes wpcRing {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  70%  { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* Outgoing "Calling…" shimmer */
.wpc-calling { animation: wpcBreathe 1.6s ease-in-out infinite; }
@keyframes wpcBreathe { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Collapsed pill ─────────────────────────────────────────────────────── */
.wpc-pill {
  display: flex; align-items: center; gap: 9px; border: 1px solid rgba(2,113,246,.45);
  cursor: pointer; border-radius: 999px; padding: 11px 17px; color: #f4f7fb;
  background: linear-gradient(180deg, #0f2a5e, #050b1c);
  box-shadow: 0 8px 24px rgba(1,4,12,.6), 0 0 20px rgba(0,78,255,.2), inset 0 1px 0 rgba(150,190,255,.2);
  font: 700 12px/1 "Inter", sans-serif; letter-spacing: .04em;
}
.wpc-pill .wpc-dot { position: static; box-shadow: 0 0 8px 1px currentColor; }

/* ── Recent calls list ──────────────────────────────────────────────────── */
.wpc-hist { display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:7px;
  border:1px solid rgba(2,113,246,.24); border-radius:11px; padding:10px 12px;
  background: rgba(7,19,45,.55); color:#d7e2f4; box-sizing:border-box;
  transition: border-color .12s, background .12s; }
.wpc-hist:hover { border-color:rgba(47,139,255,.55); background:rgba(12,30,66,.75); }
.wpc-hist:last-child { margin-bottom:0; }
.wpc-hist-top { display:flex; align-items:center; gap:6px; }
.wpc-hist .tag-out { color:#4d9aff; font-weight:700; font-size:10px; flex:none; }
.wpc-hist .tag-in  { color:#b48bff; font-weight:700; font-size:10px; flex:none; }
.wpc-hist-name { flex:1 1 auto; min-width:0; font-weight:600; color:#f4f7fb;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpc-hist-time { flex:none; color:#6a86ac; font-size:11px; }
.wpc-hist-sub { display:block; margin-top:3px; color:#84a1c6; font-size:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpc-scroll { max-height: 236px; overflow: auto; }

/* Features Command reference panels (Debt Script / Strategy) */
.wpc-fp { color:#cbdaf1; font-size:12px; line-height:1.5; padding-right:4px; }
.wpc-fp-list { margin:0; padding-left:18px; }
.wpc-fp-list > li { margin-bottom:11px; }
.wpc-fp-list > li:last-child { margin-bottom:2px; }
.wpc-fp b { color:#f4f7fb; }
.wpc-fp i { color:#6db1ff; font-style:normal; }
.wpc-fp-note { display:block; margin-top:3px; color:#84a1c6; font-size:11px; }

/* ── Mobile (one-hand, bottom-anchored) ─────────────────────────────────── */
@media (max-width: 480px) {
  .wpc { width: min(94vw, 372px); }
  .wpc-key { padding: 15px 0; min-height: 50px; }
  .wpc-btn { min-height: 46px; }
}