/* Polish: the small things that make the CRM feel finished.
   Saved marks in Settings, the lead peek on a desk, the pinned
   Call / Text / Get paid bar and pull to refresh on a phone, and
   Customers as two panes on a wide screen. */

/* ------------------------------------------------------ saved mark */

.settings-card .card-head { position: relative; }
.saved-mark {
  position: absolute; top: var(--s4); right: var(--s4);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: var(--t-12); font-weight: 600; color: var(--won);
  background: color-mix(in srgb, var(--won) 14%, transparent);
  animation: saved-in var(--base) var(--ease-out) both;
  transition: opacity var(--base) var(--ease);
}
.saved-mark.is-out { opacity: 0; }
@keyframes saved-in { from { opacity: 0; transform: translateY(-3px) scale(.96); } }

/* -------------------------------------------------------- lead peek */

.lead-peek {
  position: fixed; z-index: 70; left: 0; top: 0;
  width: 280px; padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--lift-4);
  transform: translate(var(--px, -999px), var(--py, -999px)) translateY(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lead-peek.is-in { opacity: 1; transform: translate(var(--px), var(--py)); }
.lead-peek-name { display: block; font-size: var(--t-14); }
.lead-peek-said {
  margin: 6px 0 0; font-size: var(--t-13); line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lead-peek-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3);
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-12);
}
.lead-peek-facts dt { color: var(--text-3); }
.lead-peek-facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* --------------------------------------------- lead panel dock (phone) */

.panel-dock { display: none; }
@media (max-width: 720px) {
  .panel-dock {
    display: flex; gap: var(--s2); flex: none;
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--surface-2);
  }
  .panel-dock-btn {
    flex: 1 1 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface);
    font: inherit; font-size: var(--t-14); font-weight: 600; color: var(--text); text-decoration: none;
  }
  .panel-dock-btn:active { transform: scale(.98); background: var(--surface-3); }
  .panel-dock-btn.is-pay { background: var(--accent); border-color: transparent; color: #fff; }
}

/* ------------------------------------------------ pull to refresh */

.pull-refresh {
  position: fixed; z-index: 65; left: 50%; top: calc(env(safe-area-inset-top) + 6px);
  width: 38px; height: 38px; margin-left: -19px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--lift-3, var(--lift-4));
  color: var(--text-2);
  transform: translateY(calc(var(--pull, 0px) - 52px));
  opacity: 0; pointer-events: none;
}
.pull-refresh.is-on { opacity: 1; }
.pull-refresh svg { transition: transform var(--fast) var(--ease); }
.pull-refresh.is-armed { color: var(--accent); }
.pull-refresh.is-armed svg { transform: rotate(180deg); }
.pull-refresh:not(.is-on) { transition: transform var(--base) var(--ease-out), opacity var(--base) var(--ease); }
.pull-refresh.is-busy svg { animation: pull-spin .8s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------- customers, two panes */

.contacts-split .contacts-layout.has-pane {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--s4); align-items: start;
}
.contacts-split .has-pane .col-split-hide { display: none; }
.contacts-table tr.is-picked td { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.contacts-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.customer-pane {
  position: sticky; top: var(--s4);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 140px);
  animation: pane-in var(--base) var(--ease-out) both;
}
.customer-pane .panel-body { overflow-y: auto; }
.customer-pane .panel-head { padding-top: var(--s4); }
@keyframes pane-in { from { opacity: 0; transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .saved-mark, .customer-pane { animation: none; }
  .lead-peek { transition: opacity 80ms; }
}