/* Meet now: the dialog that is a result, not a form.
 *
 * Numbers from the handoff's build spec (MEET-NOW-AND-NAVIGATION 1.5). The
 * dialog has no entrance animation and the extras expand instantly - every
 * popover here appears without a fade, and a 200ms reveal on a row somebody
 * just asked for only delays the field they are reaching for.
 */

/* The shell is 560px with 28px of its own padding, which left this dialog at
   504 and padded twice. This one is 600 by the handoff, and brings its own
   padding. */
.modal:has(.meet-now) {
  width: 600px;
  padding: 0;
  row-gap: 0;
}

.meet-now {
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 22px;
  padding: 28px;
}

.meet-now-status {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.dot-open {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-green);
  flex: none;
}

.meet-now-status h2 {
  margin: 0;
  font: var(--t-h7-500);
  color: var(--c-white);
}

.meet-now-lede {
  margin: 0;
  font: var(--t-body-primary-300);
  color: var(--text-body);
}

.meet-now-link-row {
  display: flex;
  column-gap: 12px;
}

/* A value, not a field somebody should type in - so it sits a shade below the
   dialog rather than looking like an input. */
.meet-now-link {
  flex: 1;
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--c-neutral-3);
  border-radius: 8px;
  background: var(--c-bg-black);
  font: var(--t-code-400);
  color: var(--c-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meet-now-link-row .button {
  height: 46px;
  padding: 0 20px;
  flex: none;
}

/* Confirmation is the colour the pointer was already on. The width does not
   change, and only the fill transitions - the label swap is instant. */
.button-copied,
.button-copied:hover {
  background: var(--c-blue-lighter);
  border-color: var(--c-blue-lighter);
}

/* The label swaps instantly and only the fill transitions, so the button must
   not resize under the finger - a control that does is one you miss on the
   second press. Wide enough for the longer of the two words. */
.meet-now-link-row .button[data-copy] {
  min-width: 112px;
}

/* Blue here, not the product's teal. The boards for this dialog carry no teal
   at all beyond the status dot, and the handoff's animation table names
   --c-neutral-3 to --c-blue. The wizard's identical toggle is still teal on
   its own board, which is the design system disagreeing with itself rather
   than something to settle here - raised with the designer.
   Scoped to this dialog so nothing else moves while that is open. */
.meet-now .toggle[aria-pressed="true"] {
  background: var(--c-blue);
  border-color: var(--c-blue);
}

.meet-now-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--c-neutral-2);
  padding-top: 20px;
}

.meet-now-footer .button {
  height: 44px;
}

/* The way out, which cancels nothing - so it is the quietest thing here, with
   no border at all. */
.meet-now-later {
  background: transparent;
  border-color: transparent;
  color: var(--c-neutral-11);
  padding: 0 4px;
}

.meet-now-later:hover {
  color: var(--c-white);
}

.meet-now-footer .button-primary {
  padding: 0 24px;
}

/* The phone: a full-height sheet, and both primary actions full width. */
/* Desktop closes with Later, Esc or the backdrop; the title bar belongs to
   the phone sheet alone. */
.meet-now-bar {
  display: none;
}

@media (max-width: 640px) {
  /* A centred card with a 24px margin is not a sheet. At this width the
     dialog is the screen. */
  .modal-backdrop:has(.meet-now) {
    padding: 0;
  }

  .modal:has(.meet-now) {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .meet-now {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    padding: 20px;
  }

  .meet-now-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    margin: -20px -20px 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--c-neutral-2);
    flex: none;
  }

  .meet-now-bar p {
    font: var(--t-h7-500);
    color: var(--c-white);
    margin: 0;
  }

  .meet-now-close {
    appearance: none;
    background: none;
    border: 0;
    color: var(--c-neutral-11);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color var(--transition-default);
  }

  .meet-now-close:hover {
    color: var(--c-white);
  }

  .meet-now-link-row {
    flex-direction: column;
    row-gap: 12px;
  }

  .meet-now-link-row .button,
  .meet-now-footer .button-primary {
    height: 48px;
    width: 100%;
  }

  .meet-now-footer {
    margin-top: auto;
    flex-direction: column-reverse;
    row-gap: 12px;
    align-items: stretch;
  }
}