/* ============================================================================
   DIALR — PRIMITIVES
   Buttons, avatars, chips, fields, sheets, toasts, states.
   ========================================================================== */

/* ---------------------------------------------------------------- button  */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-4);
  min-height: var(--touch-min);
  padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-size: calc(var(--t-label) * var(--fs));
  transition: transform var(--d-fast) var(--e-standard),
              background var(--d-fast) var(--e-standard),
              opacity var(--d-fast) var(--e-standard);
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .4; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0 var(--sp-5); }
.btn--lg { min-height: 58px; padding: 0 var(--sp-8); font-size: calc(var(--t-caption) * var(--fs)); }

.btn--primary   { background: var(--accent); color: var(--accent-ink); }
.btn--secondary { background: var(--surface-3); color: var(--fg); }
.btn--ghost     { background: transparent; color: var(--fg-secondary); box-shadow: inset 0 0 0 1px var(--line); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--positive  { background: var(--positive); color: #06210f; }

.btn__icon { display: grid; place-items: center; width: 20px; height: 20px; }
.btn__icon svg { width: 20px; height: 20px; }
.btn__text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn__sub {
  font-size: calc(var(--t-micro) * var(--fs));
  letter-spacing: var(--tr-wider);
  opacity: .72; font-weight: var(--w-medium); text-transform: none;
}
.btn__sub.is-hidden { display: none; }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------ icon button */
.iconbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-width: var(--touch-min); min-height: var(--touch-min);
  border-radius: var(--r-circle);
  color: var(--fg);
  transition: background var(--d-fast) var(--e-standard), transform var(--d-fast) var(--e-standard);
}
.iconbtn:active { transform: scale(.93); }
.iconbtn__glyph { display: grid; place-items: center; width: 24px; height: 24px; }
.iconbtn__glyph svg { width: 24px; height: 24px; }
.iconbtn__caption { display: none; color: var(--fg-tertiary); }

.iconbtn--surface { background: var(--surface-2); }
.iconbtn--ghost   { background: transparent; }
.iconbtn--surface:active, .iconbtn--ghost:active { background: var(--surface-3); }

/* In-call controls: bigger, squarer, labelled. */
.iconbtn--call {
  flex-direction: column;
  width: 100%; aspect-ratio: 1 / .82;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  gap: var(--sp-3);
}
.iconbtn--call .iconbtn__caption { display: block; }
.iconbtn--call.is-on { background: var(--fg); color: var(--bg); }
.iconbtn--call.is-on .iconbtn__caption { color: var(--bg); opacity: .7; }
.iconbtn:disabled { opacity: .34; pointer-events: none; }

.actcall--labels .iconbtn__caption { display: block; }

/* ------------------------------------------------------- call action btn  */
.callbtn {
  display: grid; place-items: center;
  width: 78px; height: 78px;
  border-radius: var(--r-circle);
  color: #fff;
  box-shadow: var(--sh-3);
  transition: transform var(--d-fast) var(--e-spring), filter var(--d-fast) var(--e-standard);
}
.callbtn__glyph { width: 34px; height: 34px; }
.callbtn__glyph svg { width: 100%; height: 100%; }
.callbtn:active { transform: scale(.92); }
.callbtn--answer  { background: var(--positive); }
.callbtn--decline { background: var(--negative); }
.callbtn--large   { width: 92px; height: 92px; }
.incall--large-actions .callbtn { width: 96px; height: 96px; }
.incall--large-actions .callbtn__glyph { width: 42px; height: 42px; }

/* Answer pulses gently so the eye finds it without motion sickness. */
.callbtn--answer::after {
  content: ""; position: absolute; inset: -10px;
  border-radius: var(--r-circle);
  border: 2px solid var(--positive);
  opacity: 0;
  animation: dialr-ring 2.2s var(--e-standard) infinite;
}
.callbtn { position: relative; }
@keyframes dialr-ring {
  0%   { transform: scale(.9);  opacity: .5; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
[data-motion="reduced"] .callbtn--answer::after { animation: none; }

/* ---------------------------------------------------------------- avatar  */
.avatar {
  position: relative; display: inline-grid; place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-circle);
  overflow: hidden;
  background: var(--surface-3);
  width: var(--avatar-md); height: var(--avatar-md);
}
.avatar--xs { width: var(--avatar-xs); height: var(--avatar-xs); }
.avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); }
.avatar--md { width: var(--avatar-md); height: var(--avatar-md); }
.avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); }
.avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); }

.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar__initials {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: .38em; letter-spacing: var(--tr-tight);
  color: var(--fg-secondary);
}
.avatar.has-photo .avatar__initials { display: none; }
.avatar.no-photo .avatar__img { display: none; }
/* No photo reads differently on purpose — never a fake portrait. */
.avatar.no-photo { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }

.avatar--ring { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg); }
.avatar__badge { display: none; position: absolute; right: 0; bottom: 0; width: 30%; height: 30%;
                 border-radius: var(--r-circle); box-shadow: 0 0 0 2px var(--bg); }
.avatar[data-status="missed"] .avatar__badge { display: block; background: var(--warn); }
.avatar[data-status="spam"]   .avatar__badge { display: block; background: var(--negative); }
.avatar[data-status="live"]   .avatar__badge { display: block; background: var(--positive); }

/* ----------------------------------------------------------------- chips  */
.chiprow { display: flex; gap: var(--sp-2); align-items: center; }
.chiprow--wrap { flex-wrap: wrap; gap: var(--sp-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--fg-secondary);
  font-family: var(--font-display);
  font-size: calc(var(--t-micro) * var(--fs));
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  line-height: 1.5;
  max-width: 100%;
}
.chip__icon { display: grid; place-items: center; width: 12px; height: 12px; flex: 0 0 auto; }
.chip__icon svg { width: 12px; height: 12px; stroke-width: 2.1; }
.chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__count { margin-left: 3px; opacity: .65; }

.chip--accent   { background: var(--accent-soft); color: var(--accent); }
.chip--positive { background: rgba(22,198,90,.16); color: var(--positive); }
.chip--warn     { background: rgba(255,176,32,.16); color: var(--warn); }
.chip--negative { background: rgba(245,51,63,.16); color: var(--negative); }
.chip--note     { background: transparent; color: var(--note); text-transform: none;
                  letter-spacing: var(--tr-normal); font-family: var(--font-text);
                  font-weight: var(--w-medium); font-size: calc(var(--t-caption) * var(--fs));
                  box-shadow: inset 0 0 0 1px rgba(255,209,102,.28); }

button.chip { transition: background var(--d-fast) var(--e-standard); }
button.chip[data-selected="true"] { background: var(--fg); color: var(--bg); }
.chip.is-hidden, .chiprow.is-hidden { display: none; }

/* ---------------------------------------------------------------- fields  */
.field {
  display: flex; align-items: center; gap: var(--sp-5);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4) 0;
  text-align: left;
  border-bottom: 1px solid var(--line-hairline);
}
.field:last-child { border-bottom: 0; }
.field--stack { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
.field__text { flex: 1 1 auto; min-width: 0; }
.field__label { font-size: calc(var(--t-body) * var(--fs)); line-height: 1.35; }
.field__hint { margin-top: 3px; color: var(--fg-tertiary); }
.field__hint.is-hidden { display: none; }
.field__icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--fg-tertiary); }
.field__icon svg { width: 22px; height: 22px; }
.field__trailing { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.field__chev { display: grid; place-items: center; width: 18px; height: 18px; color: var(--fg-quaternary); }
.field__chev svg { width: 18px; height: 18px; }
.select__value { color: var(--fg-tertiary); font-size: calc(var(--t-body-sm) * var(--fs)); }
.field--danger .field__label { color: var(--danger); }
.field--info { background: var(--surface-1); border-radius: var(--r-md); padding: var(--sp-5); border-bottom: 0; }
.field--nav:active, .field--action:active { background: var(--surface-1); }

/* switch */
.switch {
  position: relative; flex: 0 0 auto;
  width: 50px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  transition: background var(--d-base) var(--e-standard);
}
.switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: var(--r-circle);
  background: var(--fg);
  transition: transform var(--d-base) var(--e-spring), background var(--d-base) var(--e-standard);
}
.switch.is-on { background: var(--accent); }
.switch.is-on .switch__knob { transform: translateX(20px); background: var(--accent-ink); }

/* segment */
.segment {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface-2); border-radius: var(--r-md); padding: 3px;
}
.segment__indicator {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--seg-count, 2));
  transform: translateX(calc(100% * var(--seg-index, 0)));
  background: var(--fg); border-radius: calc(var(--r-md) - 3px);
  transition: transform var(--d-base) var(--e-spring);
}
.segment__opt {
  position: relative; z-index: 1;
  min-height: 40px; padding: 0 var(--sp-3);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: calc(var(--t-micro) * var(--fs));
  text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--fg-tertiary);
  transition: color var(--d-base) var(--e-standard);
}
.segment__opt[aria-pressed="true"] { color: var(--bg); }

/* slider */
.slider { padding: var(--sp-2) 0; }
.slider__input {
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
.slider__input::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--slider-pct, 50%), var(--surface-4) var(--slider-pct, 50%));
}
.slider__input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-4); }
.slider__input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: var(--r-circle); background: var(--fg);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.slider__input::-moz-range-thumb {
  width: 22px; height: 22px; border: 0;
  border-radius: var(--r-circle); background: var(--fg);
}
.slider__value { color: var(--fg-tertiary); font-size: calc(var(--t-body-sm) * var(--fs)); }

/* text field */
.textfield, .timefield {
  background: var(--surface-2); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.textfield__input, .timefield__input {
  width: 100%; font-size: calc(var(--t-body) * var(--fs)); color: var(--fg);
  resize: none;
}
.textfield__count.is-full { color: var(--warn); }

/* ---------------------------------------------------------------- sheets  */
.sheet__layer { position: absolute; inset: 0; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--scrim), .5);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-standard);
}
.sheet__layer.is-open .sheet__backdrop { opacity: 1; }

.sheet {
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  /* Stops exactly at the dock: the dock is never covered. */
  bottom: calc(var(--bottom-nodock, calc(var(--dock-inset-b) + var(--dock-h) + var(--safe-b))) + var(--sp-3));
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-4);
  outline: 1px solid var(--line-hairline);
  transform: translate3d(0, 110%, 0);
  transition: transform var(--d-slow) var(--e-spring);
  overflow: hidden;
  max-height: calc(100% - var(--safe-t) - var(--bottom-zone-nosearch) - var(--sp-6));
}
.sheet__layer.is-open .sheet { transform: none; }
.sheet--peek { height: auto; }
.sheet--half { height: 52%; }
.sheet--tall { height: 78%; }
.sheet--full { height: calc(100% - var(--safe-t) - var(--bottom-zone-nosearch) - var(--sp-6)); }

.sheet__grabber {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line-strong);
  margin: var(--sp-4) auto var(--sp-2);
  flex: 0 0 auto;
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6) var(--sp-4);
  flex: 0 0 auto;
}
.sheet__title { letter-spacing: var(--tr-wider); }
.sheet__close {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-circle);
  background: var(--surface-3); color: var(--fg-secondary);
}
.sheet__close svg { width: 18px; height: 18px; }
.sheet__body { flex: 1 1 auto; min-height: 0; padding: 0 var(--sp-6) var(--sp-7); }

/* ---------------------------------------------------------------- modal   */
.modal__layer { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-7); }
.modal__backdrop { position: absolute; inset: 0; background: rgba(var(--scrim), .72);
                   backdrop-filter: blur(var(--blur-sm)); opacity: 0;
                   transition: opacity var(--d-base) var(--e-standard); }
.modal__layer.is-open .modal__backdrop { opacity: 1; }
.modal {
  position: relative; width: 100%; max-width: 340px;
  background: var(--surface-2); border-radius: var(--r-xl);
  padding: var(--sp-7); box-shadow: var(--sh-4);
  transform: scale(.94); opacity: 0;
  transition: transform var(--d-base) var(--e-spring), opacity var(--d-base) var(--e-standard);
}
.modal__layer.is-open .modal { transform: none; opacity: 1; }
.modal__msg { margin-top: var(--sp-4); }
.modal__actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-7); }
.modal__btn {
  flex: 1; min-height: 46px; border-radius: var(--r-pill);
  background: var(--surface-4); color: var(--fg);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: calc(var(--t-label) * var(--fs)); text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.modal__btn--confirm { background: var(--accent); color: var(--accent-ink); }
.modal__btn--confirm.is-danger { background: var(--danger); color: #fff; }

/* ---------------------------------------------------------------- toast   */
.toast {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-4);
  color: var(--fg);
  box-shadow: var(--sh-3);
  transform: translate3d(0, 16px, 0) scale(.97);
  opacity: 0;
  transition: transform var(--d-base) var(--e-spring), opacity var(--d-base) var(--e-standard);
}
.toast.is-in { transform: none; opacity: 1; }
.toast.is-out { transform: translate3d(0, 10px, 0); opacity: 0; }
.toast__icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.toast__icon svg { width: 18px; height: 18px; }
.toast__text { flex: 1 1 auto; }
.toast__action { color: var(--accent); flex: 0 0 auto; }
.toast--negative { background: var(--negative); color: #fff; }
.toast--negative .toast__action { color: #fff; text-decoration: underline; }
.toast--warn { background: var(--warn); color: #241800; }
.toast--warn .toast__action { color: #241800; text-decoration: underline; }

/* ---------------------------------------------------------------- states  */
.state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-11) var(--sp-6);
}
.state__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: var(--r-circle);
  background: var(--surface-2); color: var(--fg-tertiary);
  margin-bottom: var(--sp-2);
}
.state__icon svg { width: 26px; height: 26px; }
.state__body { max-width: 30ch; }
.state__action { margin-top: var(--sp-4); }
.state__code { display: block; margin-top: var(--sp-2); }
.state--error .state__icon { color: var(--danger); background: rgba(255,90,95,.12); }
.state--permission .state__icon { color: var(--accent); background: var(--accent-soft); }

/* skeleton */
.skeleton-group { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) 0; }
.skeleton {
  border-radius: var(--card-radius);
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%);
  background-size: 400% 100%;
  animation: dialr-shimmer 1.4s ease infinite;
}
.skeleton--card { height: 104px; }
.skeleton--row  { height: 58px; border-radius: var(--r-md); }
@keyframes dialr-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
[data-motion="reduced"] .skeleton { animation: none; }

/* banner */
.banner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-secondary);
  margin-bottom: var(--sp-5);
}
.banner__icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.banner__icon svg { width: 18px; height: 18px; }
.banner__text { flex: 1 1 auto; }
.banner__action { color: var(--accent); flex: 0 0 auto; }
.banner__close { display: grid; place-items: center; width: 24px; height: 24px; color: var(--fg-quaternary); }
.banner__close svg { width: 16px; height: 16px; }
.banner--warn { background: rgba(255,176,32,.12); color: var(--warn); }

/* -------------------------------------------------------------- optlist   */
.optlist { display: flex; flex-direction: column; }
.optlist__item {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-4) 0; text-align: left;
  border-bottom: 1px solid var(--line-hairline);
}
.optlist__item:last-child { border-bottom: 0; }
.optlist__item[data-selected="true"] .t-body { color: var(--accent); }
.optlist__item[data-selected="true"]::after {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--accent);
}

.is-hidden { display: none !important; }