/* The modal a home card opens to show a magoo's picture, QR and link. */
.target-modal-btn { background: transparent; border: none; padding: 0; }
#target-modal .modal-dialog { max-width: 360px; margin-left: auto; margin-right: auto; padding: 0 12px; }
.target-modal-content { border: none; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px 0px; padding: 18px 20px 22px; gap: 16px; }
.target-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.target-modal-name { margin: 0; font-family: "roboto-bold"; font-size: 20px; color: #000; overflow-wrap: anywhere; }
.target-modal-head .btn-close { flex: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; opacity: 1; box-sizing: border-box; }
.target-modal-picture { display: block; width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; background: #F2F2F4; }
.target-modal-open { display: flex; align-items: center; gap: 14px; }
.target-modal-qr { flex: none; width: 112px; height: 112px; padding: 6px; box-sizing: border-box; border: 1px solid #E4E4E4; border-radius: 12px; background: #fff; }
.target-modal-qr[hidden] { display: none; }
.target-modal-actions { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.target-modal-discover { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 6px 12px; border-radius: 25px; background: #CC0000; color: #fff; font-family: "roboto-bold"; font-size: 15px; text-align: center; text-decoration: none; }
.target-modal-discover:hover, .target-modal-discover:focus { color: #fff; background: #A80000; }
.target-modal-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 0 2px 0 14px; border-radius: 12px; background: #F2F2F4; }
.target-modal-link span { min-width: 0; padding: 6px 0; font-size: 13px; line-height: 1.25; color: #0F133A; overflow-wrap: anywhere; }
.target-modal-copy { flex: none; width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: #CC0000; display: flex; align-items: center; justify-content: center; }
.target-modal-copy .target-modal-copy-done { display: none; }
.target-modal-copy.is-done .target-modal-copy-idle { display: none; }
.target-modal-copy.is-done .target-modal-copy-done { display: block; }
.target-modal-discover[hidden] { display: none; }
/* In the viewer it opens over the recording preview, which sits above
   everything else on the page and above the usual backdrop. */
#target-modal.is-in-viewer { z-index: 10060; background: #00000081; }
.target-modal-picture[hidden], .target-modal-copy[hidden] { display: none; }
/* Other messages the viewer shows while a recording's preview is open
   (signing in, something going wrong) must sit above the preview too. */
body.media-preview-open .modal { z-index: 10060; }
body.media-preview-open .modal-backdrop { z-index: 10050; }
.media-preview-action-btn[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
/* How far a reveal's upload has got: in the middle of the screen, above the
   recording's preview, where the viewer's other messages show. */
#reveal-progress { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: center; justify-content: center; padding: 24px; background: #00000081; }
.reveal-progress-card { width: 100%; max-width: 340px; box-sizing: border-box; padding: 28px 24px; border-radius: 15px; background: #FFFFFF; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); text-align: center; }
.reveal-progress-text { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: #0F133A; font-variant-numeric: tabular-nums; }
.reveal-progress-track { height: 8px; border-radius: 4px; background: #E4E4E4; overflow: hidden; }
.reveal-progress-bar { width: 0; height: 100%; border-radius: 4px; background: #CC0000; transition: width 0.2s linear; }
.reveal-progress-share { display: block; width: 100%; min-height: 50px; padding: 0 20px; border: none; border-radius: 25px; background: #CC0000; color: #FFFFFF; font-size: 16px; font-weight: 700; cursor: pointer; }