.a3-bubble-crest { display: none; }
.a3-bubble-sheet { display: none; }

@media (max-width: 640px) {
  /* The front desk carries the bar's three doors, so the home bar stays hidden. */
  .s1-mobile-phone { display: none !important; }

  /* the launcher becomes one round bubble in the corner; it no longer clears a bar.
     --a3-bubble remains for earlier scripts; the current launcher opens the chat panel. */
  .fd-launch.a3-bubble-launch {
    --a3-bubble: on;
    right: 16px;
    bottom: 16px;
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--black, #000);
  }
  /* the crest, whole, inside the circle: 38 x 42 in a 60 px round (its corners sit 28 px from the centre) */
  .a3-bubble-launch .a3-bubble-crest {
    display: block;
    width: auto;
    height: 42px;
    max-width: none;
  }
  /* the word stays the button's name; it is out of sight, never display:none */
  .a3-bubble-launch .a3-bubble-word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  
  .fd-launch.a3-bubble-launch:focus-visible { outline: 2px solid #5AA9FF; outline-offset: 3px; }

  /* Retained sheet rules for earlier scripts: six lines, fixed above the bubble. The lines are named through the sheet's id on
     purpose: the site's own rule for tel:, sms: and mailto: links (home.css line 5112) outweighs two
     classes, and would leave Call and Text a different height from the other four lines. */
  .a3-bubble-sheet[data-open="true"] {
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 57;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 220px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 0;
    color: var(--paper, #f1f0eb);
    background: var(--black, #000);
    border: 1px solid var(--paper, #f1f0eb);
    border-radius: var(--radius, 2px);
    font-family: var(--sans, Arial, Helvetica, sans-serif);
  }
  #a3-bubble-sheet .a3-bubble-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 44px;
    min-height: 48px;
    margin: 0;
    padding: 10px 18px;
    color: var(--paper, #f1f0eb);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--soft-line, rgba(255, 255, 255, 0.16));
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    appearance: none;
    transition: background 0.16s ease;
  }
  #a3-bubble-sheet .a3-bubble-line:first-child { border-top: 0; }
  #a3-bubble-sheet .a3-bubble-line:hover { background: #1c1c1c; }
  #a3-bubble-sheet .a3-bubble-line:focus-visible { outline: 2px solid var(--paper, #f1f0eb); outline-offset: -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .a3-bubble-launch,
  .a3-bubble-sheet,
  #a3-bubble-sheet .a3-bubble-line {
    transition: none;
    animation: none;
  }
}


@media (max-width: 640px) {
  /* home.css 5100: body { padding-bottom: 49px } padded the page for the bar; measured 48.78 px of empty ground under
     the last box. Stronger by one class than the bare body rule. */
  body.a3-phone-page { padding-bottom: 0; }
  /* home.css 5102: .to-top { bottom: 61px } cleared the bar; now the button sits level with the bubble, 16 px up,
     on its own side of the screen. Stronger by one class than the bare .to-top rule. */
  .a3-phone-page .to-top { bottom: 16px; }
  /* frontdesk.css 299-306: .fd-panel { bottom: 61px } cleared the bar too; the open panel hides the launcher and
     floated 61 px up over empty ground. Now it sits 16 px up like the bubble it opens from. Stronger by one class than
     frontdesk.css's bare .fd-panel, which is linked later in the page. */
  .a3-phone-page .fd-panel { bottom: 16px; }
}

/* Retained sheet placement for earlier scripts; the current chat uses the panel rules. */
@media (max-width: 640px) {
  html .a3-bubble-sheet[data-open="true"][data-fd-spot][role="dialog"] {
    left: auto;
    right: 12px;
    top: var(--fd-sheet-top);
    bottom: auto;
    max-height: var(--fd-sheet-room);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html .a3-bubble-sheet[data-open="true"][data-fd-spot="left"][role="dialog"] { left: 12px; right: auto; }
  #a3-bubble-sheet[data-fd-spot] .a3-bubble-line { flex: 0 0 auto; }
}