/* Call Intelligence dialer — Practice OS chrome + CI accents */
button.linkish.ci-call-phone {
  border: 0;
  background: transparent;
  color: #1546c8;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.linkish.ci-call-phone:hover { color: #0a1a33; }

.ci-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #0a1a33;
  color: #fff;
  box-shadow: 0 12px 28px rgba(10, 26, 51, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ci-fab:hover { background: #142848; transform: translateY(-1px); }
.ci-fab.has-ring { box-shadow: 0 0 0 6px rgba(109, 74, 255, 0.25), 0 12px 28px rgba(10, 26, 51, 0.35); }

.ci-opener-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end;
  padding: 24px;
  pointer-events: none;
}
.ci-opener-wrap[hidden] { display: none !important; }
.ci-opener {
  pointer-events: auto;
  width: min(408px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}
.ci-opener-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(112deg, #0a1428 0%, #14213d 64%, #1c1940 100%);
}
.ci-opener-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #815eff, #5a38e9);
  flex: none;
}
.ci-opener-head strong { display: block; font-size: 15px; }
.ci-opener-head span { color: #aeb9cc; font-size: 12px; }
.ci-opener-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #98a6bd;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}
.ci-opener-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.ci-opener-body { padding: 16px; }
.ci-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ci-dir.out { background: #eeeaff; color: #5134df; }
.ci-dir.in { background: #e8f7f1; color: #148861; }

.ci-field { display: grid; gap: 6px; margin-top: 10px; }
.ci-field label { font-size: 12px; font-weight: 700; color: #64748b; }
.ci-field input, .ci-field select {
  padding: 10px 11px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
}
.ci-field input:focus { outline: 0; border-color: #a995ff; box-shadow: 0 0 0 3px rgba(109, 74, 255, .12); }

/* --- Contacts / Keypad switch ------------------------------------------- */
.ci-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #f1f4f9;
  border-radius: 12px;
}
.ci-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  color: #64748b;
  cursor: pointer;
}
.ci-tabs button:hover { color: #0a1a33; }
.ci-tabs button.active {
  background: #fff;
  color: #0a1a33;
  box-shadow: 0 1px 3px rgba(10, 26, 51, .12);
}

/* --- Contact search ----------------------------------------------------- */
.ci-search {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #dce3ec;
  border-radius: 11px;
  color: #8d95a3;
}
.ci-search:focus-within { border-color: #a995ff; box-shadow: 0 0 0 3px rgba(109, 74, 255, .12); }
.ci-search svg { flex: none; }
.ci-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 11px 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #0a1a33;
}

.ci-results {
  margin-top: 8px;
  max-height: 292px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.ci-results-pad { margin-top: 6px; max-height: 116px; }
.ci-res {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ci-res:hover { background: #f6f8fc; border-color: #e2e8f1; }
.ci-res-av {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eeeaff;
  color: #5134df;
  font-size: 12px;
  font-weight: 800;
}
.ci-res-av.anon { background: #f1f4f9; color: #8d95a3; }
.ci-res-main { flex: 1; min-width: 0; display: grid; }
.ci-res-main strong {
  font-size: 13.5px;
  color: #0a1a33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-res-main span {
  font-size: 12px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-res-badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f4f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ci-res.adhoc .ci-res-badge { background: #eeeaff; color: #5134df; }
.ci-res-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: 12.5px;
  color: #8d95a3;
}

/* --- Keypad ------------------------------------------------------------- */
.ci-pad-display { margin-top: 12px; }
.ci-pad-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #0a1a33;
}
.ci-pad-input:focus { outline: 0; border-color: #a995ff; box-shadow: 0 0 0 3px rgba(109, 74, 255, .12); }
.ci-pad-input::placeholder { color: #cdd4de; font-weight: 600; }
.ci-pad-meta {
  min-height: 17px;
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
}
.ci-pad-who { color: #148861; font-weight: 750; }
.ci-pad-e164 { color: #64748b; font-variant-numeric: tabular-nums; }
.ci-pad-hint { color: #aeb9cc; }

.ci-pad-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ci-pad-key {
  min-height: 46px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  font: inherit;
}
.ci-pad-key b { font-size: 18px; font-weight: 700; color: #0a1a33; }
.ci-pad-key span {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #aeb9cc;
}
.ci-pad-key:hover { background: #f6f8fc; border-color: #cdd4de; }
.ci-pad-key:active { background: #f2efff; border-color: #a995ff; }
.ci-pad-key.ci-pad-back { background: #f8f9fb; }
.ci-pad-key.ci-pad-back b { font-size: 15px; color: #64748b; }
.ci-pad-key.ci-pad-back:hover b { color: #0a1a33; }

/* --- Review-and-call --------------------------------------------------- */
.ci-who { display: flex; align-items: center; gap: 11px; }
.ci-who-av {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eeeaff;
  color: #5134df;
  font-size: 15px;
  font-weight: 800;
}
.ci-who-av.anon { background: #f1f4f9; color: #8d95a3; }
.ci-who-main { min-width: 0; display: grid; }
.ci-who-main strong {
  font-size: 18px;
  letter-spacing: -.02em;
  color: #0a1a33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-who-main span { font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; }

.ci-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ci-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2efff;
  color: #4e37bd;
  font-size: 11px;
  font-weight: 750;
}

.ci-row-toggle {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dce3ec;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ci-row-toggle:hover { border-color: #cdd4de; }
.ci-row-toggle > span { font-size: 12px; font-weight: 700; color: #64748b; }
.ci-row-toggle > em {
  flex: 1;
  min-width: 0;
  font-style: normal;
  font-size: 13px;
  font-weight: 750;
  color: #0a1a33;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-row-toggle > i {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5134df;
}

.ci-types {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ci-types button {
  min-height: 42px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #344054;
}
.ci-types button.active {
  border-color: #a995ff;
  background: #f2efff;
  color: #4e37bd;
}
.ci-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.ci-actions .ci-primary {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: #6d4aff;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.ci-actions .ci-primary:hover:not(:disabled) { background: #7d5cff; }
.ci-actions .ci-primary:disabled { opacity: .45; cursor: not-allowed; }
.ci-actions .ci-ghost {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dce3ec;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ci-back {
  margin-top: 10px;
  width: 100%;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ci-back:hover { color: #0a1a33; }
.ci-err {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff0f1;
  color: #d84f5f;
  font-size: 12px;
  font-weight: 650;
}

/* Outer call shell. Defaults to a small, corner-anchored, non-blocking
   widget (matching .ci-opener-wrap's pattern above) — the panel iframe
   itself starts in the same compact state and reports back over
   postMessage the moment the user actually wants the big dashboard, at
   which point .expanded is added and this grows into the full centered
   takeover. See ci:expand/ci:collapse handling in callintel.js. */
.ci-shell-wrap {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: transparent;
  display: grid;
  place-items: end;
  padding: 18px;
  pointer-events: none;
  transition: background .2s ease;
}
.ci-shell-wrap[hidden] { display: none !important; }
.ci-shell-wrap.expanded {
  background: rgba(11, 18, 34, 0.55);
  place-items: center;
  pointer-events: auto;
}
.ci-shell {
  pointer-events: auto;
  width: min(520px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  border: 0;
  border-radius: 20px;
  background: #0f172a;
  box-shadow: 0 30px 85px rgba(4, 10, 24, .48), 0 8px 24px rgba(4, 10, 24, .22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width .25s cubic-bezier(.2, .8, .2, 1), height .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.ci-shell-wrap.expanded .ci-shell {
  width: min(1760px, 97vw);
  height: min(1050px, calc(100vh - 36px));
  box-shadow: 0 36px 100px rgba(0,0,0,.46);
}
.ci-shell iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  display: block;
  background: #0f172a;
}
.ci-shell-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0a1428;
  color: #aeb9cc;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.ci-shell-bar button {
  border: 0;
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.ci-toast {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 85;
  width: min(340px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  font-family: Inter, system-ui, sans-serif;
}
.ci-toast[hidden] { display: none !important; }
.ci-toast-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e2555f;
  flex: none;
}
.ci-toast-body { flex: 1; display: grid; gap: 2px; }
.ci-toast-body strong { font-size: 13px; color: #0a1a33; }
.ci-toast-body span { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.ci-toast-view {
  border: 1px solid #dce3ec;
  background: #f2efff;
  color: #4e37bd;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex: none;
}
.ci-toast-close {
  border: 0;
  background: transparent;
  color: #98a6bd;
  cursor: pointer;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
}
.ci-toast-close:hover { background: #f1f4f9; color: #344054; }

/* Update-available nudge — this SPA never reloads on its own, so once a
   staff member's tab has been open a while it can be running JS from
   before the latest deploy with nothing to indicate it. Bottom-left so it
   never collides with the FAB / missed-call toast, which both live on the
   right. */
.ci-update-toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  background: #0a1a33;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.ci-update-toast[hidden] { display: none !important; }
.ci-update-toast button {
  border: 0;
  background: #6d4aff;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.ci-update-toast button:hover { background: #7d5cff; }