/*
 * The phone in the browser (shared/_softphone): a status in the status bar
 * and, above the bar, a card for a call. Narrow screens get a full-width
 * card; wider ones a card at the end of the bar, clear of the conversation
 * panel at its start.
 */
@layer components {
  .softphone {
    display: contents;

    --softphone-on: light-dark(oklch(0.627 0.194 149.214), oklch(0.723 0.219 149.579));
  }

  .softphone__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--muted-foreground);
  }

  .softphone__trigger .button__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  .softphone__elapsed:has(:empty) {
    display: none;
  }

  .softphone:is([data-state="ready"], [data-state="ringing"], [data-state="calling"], [data-state="connecting"], [data-state="live"]) .softphone__dot {
    background: var(--softphone-on);
  }

  .softphone[data-state="offline"] .softphone__dot {
    background: var(--destructive);
  }

  .softphone:is([data-state="ringing"], [data-state="live"], [data-state="reconnecting"]) .softphone__trigger {
    color: var(--foreground);
    font-weight: var(--font-weight-medium);
  }

  @media (prefers-reduced-motion: no-preference) {
    .softphone[data-state="ringing"] .softphone__dot {
      animation: softphone-ring 1s ease-out infinite;
    }
  }

  @keyframes softphone-ring {
    from {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--softphone-on) 60%, transparent);
    }

    to {
      box-shadow: 0 0 0 0.375rem transparent;
    }
  }

  .softphone .softphone__card {
    --softphone-gap: 0.5rem;

    position: fixed;
    inset-inline: var(--softphone-gap);
    inset-block-end: calc(1.75rem + var(--ruby-native-safe-area-bottom) + var(--softphone-gap));
    /* A ringing call matters more than the conversation panel. */
    z-index: 60;
    /* The trigger sits below the card's start edge, at the bar's start. */
    transform-origin: bottom left;
    /* The card sits in the status bar's markup, which keeps its text on one line. */
    white-space: normal;

    @media (width >= 40rem) {
      inset-inline: auto 0.75rem;
      inline-size: 22rem;
    }
  }

  .softphone__text {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;

    p {
      margin: 0;
      overflow-wrap: anywhere;
    }

    [hidden] {
      display: none;
    }
  }

  .softphone__call {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
  }

  .softphone .softphone__who-placeholder {
    block-size: var(--text-lg--line-height);
    max-inline-size: 12rem;
  }

  .softphone .softphone__meta-placeholder {
    max-inline-size: 8rem;
  }

  .softphone__header {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .softphone :is(.softphone__copy, .softphone__outcome, .softphone__reconnecting, .softphone__sound-dropped, .softphone__signaling-dropped) {
    display: none;
  }

  .softphone[data-state="starting"] [data-phone-state="starting"],
  .softphone[data-state="ready"] [data-phone-state="ready"],
  .softphone[data-state="offline"] [data-phone-state="offline"],
  .softphone[data-state="ringing"] [data-phone-state="ringing"],
  .softphone[data-state="calling"] [data-phone-state="calling"],
  .softphone[data-state="connecting"] [data-phone-state="connecting"],
  .softphone[data-state="live"] [data-phone-state="live"],
  .softphone[data-state="reconnecting"] [data-phone-state="reconnecting"],
  .softphone[data-state="ended"][data-outcome="ended"] [data-phone-outcome="ended"],
  .softphone[data-state="ended"][data-outcome="declined"] [data-phone-outcome="declined"],
  .softphone[data-state="ended"][data-outcome="stopped"] [data-phone-outcome="stopped"],
  .softphone[data-state="ended"][data-outcome="unanswered"] [data-phone-outcome="unanswered"],
  .softphone[data-state="ended"][data-outcome="unplaced"] [data-phone-outcome="unplaced"],
  .softphone[data-state="ended"][data-outcome="failed"] [data-phone-outcome="failed"],
  .softphone[data-state="ended"][data-outcome="hang_up_failed"] [data-phone-outcome="hang_up_failed"],
  .softphone[data-state="reconnecting"] .softphone__reconnecting,
  .softphone[data-state="reconnecting"][data-sound-dropped="true"] .softphone__sound-dropped,
  .softphone[data-state="reconnecting"][data-sound-dropped="false"] .softphone__signaling-dropped {
    display: inline;
  }

  /* The card shows a call only while there is one, or one just ended. */
  .softphone:is([data-state="starting"], [data-state="ready"], [data-state="offline"]) .softphone__call,
  .softphone:not([data-state="live"]) .softphone__duration,
  .softphone:not(:is([data-state="ringing"], [data-state="connecting"], [data-state="calling"], [data-state="live"])) .softphone__notice {
    display: none;
  }

  .softphone__who {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-lg--line-height);
    text-wrap: balance;
  }

  .softphone__meta {
    color: var(--muted-foreground);
  }

  .softphone__duration {
    font-variant-numeric: tabular-nums;
  }

  .softphone__notice {
    margin-block-start: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--muted);
  }

  .softphone__error {
    color: var(--destructive);
  }

  .softphone__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    .button {
      flex: 1 1 auto;
    }
  }

  /* Each state shows only what can be done in it. Scoped to the phone, so
     it outranks the button's own display. */
  .softphone .softphone__action {
    display: none;
  }

  .softphone[data-state="ringing"] .softphone__action--ringing,
  .softphone:is([data-state="live"], [data-state="reconnecting"]) .softphone__action--live,
  .softphone:is([data-state="calling"], [data-state="connecting"], [data-state="live"], [data-state="reconnecting"]) .softphone__action--on-call,
  .softphone:is([data-state="ringing"], [data-state="live"], [data-state="reconnecting"], [data-state="ended"]) .softphone__action--open,
  .softphone:is([data-state="offline"], [data-state="starting"]) .softphone__action--offline,
  .softphone:is([data-state="starting"], [data-state="ready"], [data-state="offline"], [data-state="ended"]) .softphone__action--idle {
    display: inline-flex;
  }

  .softphone .softphone__action--open {
    margin-block-start: 0.25rem;
    margin-inline-start: -0.75rem;
  }

  /* Muted is plain to see, as staff may be told to mute while a call
     reconnects. */
  .softphone .softphone__action--live[aria-pressed="true"] {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);

    &:hover {
      background: color-mix(in oklch, var(--foreground) 88%, var(--background));
    }
  }
}