/* =============================================================================
 * social-whatsapp-status-generator.css
 * -----------------------------------------------------------------------------
 * Fake WhatsApp Status Generator - one status as it plays in WhatsApp's status
 * viewer, drawn separately for iPhone and Android.
 *
 * Built on the Fake WhatsApp Status List's structure (Settings panel on the
 * left, live Preview on the right, the Chat Generator's preview box model), but
 * nothing here depends on that page's stylesheet: every settings helper is
 * prefixed .sg- and every preview rule is scoped under .wa-sg, so this file can
 * not reach another generator and no other generator's file reaches this page.
 *
 * Preview geometry is measured off 2026 screenshots of the real viewer:
 *   iPhone   WhatsApp for iOS 25.2x-26.3x (2x capture, 1pt = 2px) and the
 *            Liquid Glass builds; 1pt = 0.92px here (393pt -> 360px).
 *   Android  WhatsApp for Android 2.26.x, 412dp screens; 1dp = 1px here, the
 *            same scale the Status List's Android preview uses.
 * ============================================================================= */

/* =============================================================================
 * 1. SETTINGS PANEL HELPERS
 * ========================================================================== */
.sg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.sg-grid-2 .info-wrap {
    margin: 0;
    width: 100%;
}

.sg-grid-2 .info-wrap .custom-input,
.sg-grid-2 .info-wrap select.custom-input,
.sg-grid-2 .info-wrap textarea.custom-input {
    width: 100%;
}

.sg-grid-2 .sg-span-2 {
    grid-column: 1 / -1;
}

.sg-panel textarea.custom-input {
    min-height: 74px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.4;
    resize: vertical;
}

.sg-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin-bottom: 12px;
}

.sg-check-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    line-height: 1.3;
}

.sg-check-grid input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primery-color, #1877f2);
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0;
}

/* --- Display Settings ----------------------------------------------------
 * The Chat Generator's own components (label-tab groups, device-box pills,
 * all-common-dropdown, Battery-percent-wrap, chat-color-input) give this tab its
 * look; these rules only cover what social-whatsapp.css leaves to that page's
 * script, exactly as the Status List does. */
.sg-panel[data-panel="display"] .device-setting .device-box {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.sg-panel[data-panel="display"] .top-setting,
.sg-panel[data-panel="display"] .header-setting,
.sg-panel[data-panel="display"] .footer-setting,
.sg-panel[data-panel="display"] .background-setting {
    align-items: flex-start;
}

.sg-panel .chat-color-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sg-panel[data-panel="display"] .clock-part .time-box {
    width: 95px;
}

.sg-toggle-box {
    margin: 0;
    cursor: pointer;
}

.sg-toggle-box input[type="checkbox"] {
    display: none;
}

.sg-dd .selected-text-box {
    cursor: pointer;
    padding-right: 28px;
    white-space: nowrap;
}

.sg-dd .select-option-content {
    bottom: unset;
}

.sg-dd .select-option-content .common-dropdown-link {
    cursor: pointer;
    white-space: nowrap;
}

.sg-dd-wide {
    min-width: 230px;
}

.sg-field {
    flex: 1 1 200px;
    min-width: 0;
}

/* --- segmented choice (Photo / Text, Contact / My status) ---------------- */
.sg-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.sg-segment .device-box {
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
}

.sg-segment .device-box input {
    display: none;
}

/* --- text status colour swatches ------------------------------------------ */
.sg-bg-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sg-bg-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d5d9de;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.sg-bg-swatch.active {
    box-shadow: 0 0 0 2px var(--primery-color, #1877f2);
}

/* custom colour: the same round swatch, with the native picker invisible on top */
.sg-bg-swatches .sg-swatch {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d5d9de;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
    flex: 0 0 auto;
    box-sizing: border-box;
}

.sg-bg-swatches .sg-swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

/* --- upload control ----------------------------------------------------- */
.sg-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sg-upload-preview {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e2e2;
    background: #f3f4f6;
    flex: 0 0 auto;
}

.sg-upload-preview.sg-upload-media {
    width: 64px;
    border-radius: 8px;
}

.sg-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primery-color, #1877f2);
    background: #fff;
    border: 1px dashed var(--primery-color, #1877f2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

.sg-upload-btn:hover {
    background: rgba(24, 119, 242, .06);
}

.sg-upload-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    background: #fff;
    border: 1px solid #f0d2d2;
    border-radius: 8px;
    cursor: pointer;
}

.sg-upload-clear:hover {
    background: #fef2f2;
}

/* --- form actions ------------------------------------------------------- */
.sg-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 10px;
}

.sg-form-actions .btn {
    margin: 0;
}

.sg-hint {
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    background: #f7f8fa;
    border-left: 3px solid var(--primery-color, #1877f2);
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
    margin: 0 0 10px;
}

.sg-empty {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    padding: 14px 8px;
    border: 1px dashed #dcdfe4;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* a field the Preview's Edit button jumped to */
.sg-focus-flash {
    animation: sg-focus-flash 1.2s ease;
}

@keyframes sg-focus-flash {
    0%, 60% { box-shadow: 0 0 0 3px rgba(0, 161, 176, .45); }
    100% { box-shadow: 0 0 0 0 rgba(0, 161, 176, 0); }
}

/* --- viewer list (My status) -------------------------------------------- */
.sg-item-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.sg-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sg-item-card:hover {
    border-color: var(--primery-color, #1877f2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.sg-item-card.editing {
    border-color: var(--primery-color, #1877f2);
    background: rgba(24, 119, 242, .05);
}

.sg-item-card .sg-item-handle {
    color: #9ca3af;
    cursor: grab;
    font-size: 13px;
    flex: 0 0 auto;
}

.sg-item-card .sg-item-thumb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    flex: 0 0 auto;
}

.sg-item-card .sg-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-item-card .sg-item-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-item-card .sg-item-meta {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-item-card .sg-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.sg-item-card .sg-item-actions button {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 7px;
    color: #4b5563;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    transition: all .15s ease;
}

.sg-item-card .sg-item-actions button:hover {
    background: var(--primery-color, #1877f2);
    border-color: var(--primery-color, #1877f2);
    color: #fff;
}

.sg-item-card .sg-item-actions button.sg-item-delete:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.sg-section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sg-section-head-row .label-tab {
    margin: 0;
}

.sg-count-pill {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background: #9ca3af;
    border-radius: 9px;
}

/* an option the selected layout does not draw - still editable */
.sg-device-disabled {
    opacity: .55;
}

.sg-saved-box .drop-down-option .list p {
    margin: 0;
    padding: 10px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

.sg-sub-title {
    display: block;
    margin: 6px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

/* =============================================================================
 * 2. PREVIEW STAGE - the Chat Generator's box model, as on the Status List
 *
 *   Chat Generator                             Status Generator
 *   .frame            360 wide, auto margins   .sg-stage
 *   .frame .whatsapp  380 x 724, 10px bezel    .sg-phone, 10px empty inset
 *   screen            360 x 704                #download
 *   <=420px  the phone fills the column, height stays (see RESPONSIVE)
 *   <=380px  stage margin 0
 *
 * The stage deliberately has no #frame id: mail.js adds the shared `.frame`
 * class to `.mobile_view #frame` after every download, and `.frame .whatsapp`
 * would then draw a 10px black bezel round this frameless preview.
 * ========================================================================== */
.sg-stage {
    position: relative;
    width: 360px;
    max-width: 1000px;
    margin: 0 auto;
}

.sg-phone {
    width: 380px;
    padding: 10px;
    box-sizing: border-box;
}

.right-part .sg-phone #download {
    width: 100%;
}

.wa-sg {
    /* the viewer is always dark, so the free-plan watermark uses the light ink */
    --watermark-color: rgba(254, 254, 254, .11);
    --sg-fs: 1;
    --sg-green: #25d366;
    --sg-bg: #000000;
    --sg-backdrop-top: #000000;
    --sg-backdrop-bottom: #000000;
    --sg-hover-veil: rgba(0, 0, 0, .32);
}

.wa-sg.modal {
    width: 100%;
    height: 704px;
    box-sizing: border-box;
    display: block;
    position: relative;
    overflow: hidden;
}

.wa-sg .modal-dialog {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    pointer-events: auto;
}

.wa-sg .modal-content.sg-device {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--sg-bg);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wa-sg,
.wa-sg .modal-content.sg-device,
.wa-sg .modal-content.sg-device *:not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab) {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Full Screen Download is not offered - a status is one screen - but a
 * `downloading` class from mail.js must never change the screen's size. */
.wa-sg.modal.downloading {
    height: var(--sg-screen-h, 704px) !important;
}

/* --- media ---------------------------------------------------------------- */
.wa-sg .sg-media {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.wa-sg .sg-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.wa-sg .sg-media.sg-fill img {
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.wa-sg .sg-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .55);
    font-size: calc(14px * var(--sg-fs));
    text-align: center;
    padding: 0 40px;
}

.wa-sg .sg-media-empty svg {
    opacity: .7;
}

/* --- text status ----------------------------------------------------------- */
.wa-sg .sg-text-status {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    z-index: 1;
}

.wa-sg .sg-text-status p {
    margin: 0;
    width: 100%;
    color: #ffffff;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* --- caption ----------------------------------------------------------------- */
.wa-sg .sg-caption {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 0 20px;
    text-align: center;
    color: #ffffff;
    font-size: calc(15px * var(--sg-fs));
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- progress ------------------------------------------------------------- */
.wa-sg .sg-progress {
    position: absolute;
    display: flex;
    z-index: 6;
}

.wa-sg .sg-progress span {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .5);
}

.wa-sg .sg-progress i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #ffffff;
}

/* --- avatar ------------------------------------------------------------------ */
.wa-sg .sg-avatar {
    position: absolute;
    border-radius: 50%;
    z-index: 6;
}

.wa-sg .sg-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7e8a91;
    color: #cfd4d7;
}

.wa-sg .sg-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wa-sg .sg-avatar-img svg {
    width: 62%;
    height: 62%;
    margin-top: 16%;
}

/* green "+" of My status: a green disc in a ring of the screen colour */
.wa-sg .sg-badge {
    position: absolute;
    border-radius: 50%;
    background: var(--sg-green);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
}

/* --- icon holders -------------------------------------------------------- */
.wa-sg .sg-icon {
    position: absolute;
    display: block;
    color: #ffffff;
    z-index: 6;
}

.wa-sg .sg-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- identity text -------------------------------------------------------- */
.wa-sg .sg-ident {
    position: absolute;
    z-index: 6;
    min-width: 0;
    color: #ffffff;
}

.wa-sg .sg-name,
.wa-sg .sg-meta {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-sg .sg-meta {
    display: flex;
    align-items: center;
}

.wa-sg .sg-meta > span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the time stays whole; a long label is what WhatsApp shortens */
.wa-sg .sg-meta .sg-meta-time,
.wa-sg .sg-meta .sg-meta-sep,
.wa-sg .sg-meta .sg-meta-ico,
.wa-sg .sg-meta .sg-meta-chev {
    flex: 0 0 auto;
}

.wa-sg .sg-meta .sg-meta-ico svg,
.wa-sg .sg-meta .sg-meta-chev svg {
    display: block;
}

/* --- bottom controls ----------------------------------------------------- */
.wa-sg .sg-reply {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

.wa-sg .sg-reply-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-sg .sg-reactions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.wa-sg .sg-reactions span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.wa-sg .sg-round-btn {
    position: absolute;
    z-index: 5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.wa-sg .sg-round-btn svg {
    display: block;
}

.wa-sg .sg-round-btn.sg-liked {
    color: var(--sg-green);
}

.wa-sg .sg-home-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    pointer-events: none;
}

/* =============================================================================
 * 3. iPHONE VIEWER
 *
 *   status bar   the Status List's iPhone status bar, 50px
 *   progress     54.5px from the top, 2.75px thick, 7.4px insets, 3.7px gaps
 *   header row   centred 27px under the progress bar: chevron 12px from the
 *                left, 31px photo at 38.6px, name 13.8px/600 and time 12px,
 *                ellipsis.circle centred 17.5px from the right
 *   media        centred on the whole screen over an ambient gradient taken
 *                from the photo's own top and bottom colours
 *   bottom       Liquid Glass: 35.4px glass pill and circles, white 16%,
 *                40.5px above the bottom edge, 9.2px insets, 7.4px gaps
 *                Classic: 39.6px Reply pill and 40.5px circles on a black band
 * ========================================================================== */
.wa-sg.sg-ios .modal-content.sg-device {
    background: linear-gradient(to bottom, var(--sg-backdrop-top), var(--sg-backdrop-bottom));
}

.wa-sg.sg-ios .sg-device.sg-is-text {
    background: var(--sg-text-bg, #5697ff);
}

/* status bar - same metrics as the Status List's iPhone status bar */
.wa-sg.sg-ios .sgi-statusbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    box-sizing: border-box;
    padding: 7px 26px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(15px * var(--sg-fs));
    font-weight: 600;
    letter-spacing: .1px;
    color: #ffffff;
    z-index: 7;
}

.wa-sg.sg-ios .sgi-sb-time {
    flex: 0 0 auto;
}

.wa-sg.sg-ios .sgi-sb-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wa-sg.sg-ios .sgi-sb-right svg {
    display: block;
}

.wa-sg.sg-ios .sgi-battery-pill {
    position: relative;
    width: 22.9px;
    height: 13px;
    border-radius: 4.2px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-sg.sg-ios .sgi-battery-pill::after {
    content: "";
    position: absolute;
    right: -2.6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6px;
    height: 4.3px;
    border-radius: 0 2px 2px 0;
    background: #ffffff;
    opacity: .45;
}

.wa-sg.sg-ios .sgi-battery-pill span {
    font-size: calc(12.5px * var(--sg-fs));
    font-weight: 700;
    line-height: 1;
    color: #000000;
    letter-spacing: -.2px;
}

.wa-sg.sg-ios .sgi-battery-pill.sgi-charging {
    background: #34c759;
}

.wa-sg.sg-ios .sgi-battery-outline {
    position: relative;
    width: 22.9px;
    height: 13px;
    border-radius: 4.2px;
    border: 1.2px solid #ffffff;
    opacity: .9;
    padding: 1.4px;
    box-sizing: border-box;
}

.wa-sg.sg-ios .sgi-battery-outline i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #ffffff;
}

.wa-sg.sg-ios .sgi-battery-outline::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6px;
    height: 4.3px;
    border-radius: 0 2px 2px 0;
    background: #ffffff;
    opacity: .45;
}

.wa-sg.sg-ios .sgi-network {
    font-size: calc(13px * var(--sg-fs));
    font-weight: 600;
}

/* progress */
.wa-sg.sg-ios .sg-progress {
    top: 54.5px;
    left: 7.4px;
    right: 7.4px;
    height: 2.75px;
    gap: 3px;
}

.wa-sg.sg-ios .sg-progress span {
    border-radius: 1.4px;
}

/* header row, centred at 82.6px */
.wa-sg.sg-ios .sgi-back {
    left: 9.95px;
    top: 71.55px;
    width: 14.26px;
    height: 22.08px;
}

.wa-sg.sg-ios .sg-avatar {
    left: 35.1px;
    top: 67.2px;
    width: 30.8px;
    height: 30.8px;
}

.wa-sg.sg-ios .sg-badge {
    width: 12.5px;
    height: 12.5px;
    right: -3.9px;
    bottom: -3.9px;
    border: 1.6px solid var(--sg-badge-ring, #0c0c0c);
    color: #000000;
}

.wa-sg.sg-ios .sg-ident {
    left: 78.5px;
    right: 44px;
    top: 66.1px;
}

.wa-sg.sg-ios .sg-ident.sg-has-chip {
    right: 96px;
}

.wa-sg.sg-ios .sg-name {
    font-size: calc(13.8px * var(--sg-fs));
    line-height: 18px;
    font-weight: 600;
    letter-spacing: -.1px;
}

.wa-sg.sg-ios .sg-meta {
    margin-top: -2.2px;
    font-size: calc(12px * var(--sg-fs));
    line-height: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    gap: 3px;
}

.wa-sg.sg-ios .sgi-more {
    right: 4.65px;
    top: 69.75px;
    width: 25.7px;
    height: 25.7px;
}

/* audience chip (My status) - left of the menu */
.wa-sg .sg-chip {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1b2226;
    border-radius: 999px;
    box-sizing: border-box;
}

.wa-sg .sg-chip .sg-chip-emoji {
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.wa-sg .sg-chip svg {
    display: block;
    flex: 0 0 auto;
}

.wa-sg.sg-ios .sg-chip {
    right: 34px;
    top: 69.1px;
    height: 27px;
    width: 46px;
    padding: 0 7px 0 8px;
    gap: 4px;
}

.wa-sg.sg-ios .sg-chip .sg-chip-emoji {
    font-size: calc(15px * var(--sg-fs));
}

/* text status */
.wa-sg.sg-ios .sg-text-status p {
    font-size: var(--sg-text-size, 30px);
    font-weight: 500;
}

/* caption sits above the bottom controls */
.wa-sg.sg-ios .sg-caption {
    bottom: 92px;
}

.wa-sg.sg-ios.sgi-classic .sg-caption {
    bottom: 100px;
}

.wa-sg.sg-ios .sg-caption.sg-caption-low {
    bottom: 40px;
}

/* Liquid Glass controls */
.wa-sg.sg-ios .sg-reply {
    left: 9.2px;
    bottom: 40.5px;
    height: 35.4px;
    border-radius: 17.7px;
    padding: 0 12px 0 14.8px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .92);
    font-size: calc(15.6px * var(--sg-fs));
    font-weight: 400;
}

.wa-sg.sg-ios .sg-round-btn {
    bottom: 40.5px;
    width: 35.4px;
    height: 35.4px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .16);
}

.wa-sg.sg-ios .sg-reactions {
    gap: 10px;
    margin-left: 8px;
}

.wa-sg.sg-ios .sg-reactions span {
    font-size: calc(19px * var(--sg-fs));
}

/* Classic controls */
.wa-sg.sg-ios .sgi-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 87.6px;
    background: #000000;
    z-index: 3;
}

.wa-sg.sg-ios.sgi-classic .sg-reply {
    bottom: 36px;
    left: 7.4px;
    height: 39.6px;
    border-radius: 19.8px;
    padding: 0 14px 0 14.8px;
    background: #414344;
    box-shadow: none;
    color: #ffffff;
    font-size: calc(15.6px * var(--sg-fs));
}

.wa-sg.sg-ios.sgi-classic .sg-round-btn {
    bottom: 35.55px;
    width: 40.5px;
    height: 40.5px;
    background: #424445;
    box-shadow: none;
}

.wa-sg.sg-ios .sg-home-indicator {
    bottom: 7px;
    width: 124px;
    height: 5px;
    border-radius: 3px;
    background: #ffffff;
    opacity: .85;
}

/* =============================================================================
 * 4. ANDROID VIEWER
 *
 *   status bar   hidden by default - the viewer runs full screen; when shown
 *                it is the Status List's Android status bar and pushes the
 *                header down by its 40px
 *   progress     4px from the top, 2px thick, 16px insets
 *   header       arrow ink 16px from the left, 40px photo at 51px, text at
 *                105px (name 16.5px/500, meta 13px), overflow dots 22.5px
 *                from the right, all centred 36px down
 *   media        letterboxed on black, centred on the whole screen
 *   bottom       48px Reply pill (#1F272A) 32px up, 9px from the left; 50px
 *                heart circle 8px from the right; 22px #0F1112 strip
 * ========================================================================== */
@font-face {
    font-family: "SG Roboto";
    src: url("../../fonts/roboto/roboto-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.wa-sg.sg-android,
.wa-sg.sg-android .modal-content.sg-device,
.wa-sg.sg-android .modal-content.sg-device *:not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab):not(.sg-emoji) {
    font-family: "SG Roboto", Roboto, "Segoe UI", Arial, sans-serif !important;
}

.wa-sg.sg-android .modal-content.sg-device {
    background: #000000;
}

.wa-sg.sg-android .sg-device.sg-is-text {
    background: var(--sg-text-bg, #5697ff);
}

.wa-sg.sg-android .sga-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 72px;
    z-index: 6;
}

.wa-sg.sg-android .sga-top.sga-with-sb {
    top: 40px;
}

/* status bar - same metrics as the Status List's Android status bar */
.wa-sg.sg-android .sga-statusbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    box-sizing: border-box;
    padding: 9px 28px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #e4e7ea;
    z-index: 7;
}

.wa-sg.sg-android .sga-sb-time {
    font-size: calc(14px * var(--sg-fs));
    font-weight: 500;
    color: #fafdfe;
    line-height: 1;
    letter-spacing: .1px;
}

.wa-sg.sg-android .sga-sb-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wa-sg.sg-android .sga-sb-right svg {
    display: block;
}

.wa-sg.sg-android .sga-sb-battery-text {
    font-size: calc(13.5px * var(--sg-fs));
    font-weight: 400;
    color: #fafdfe;
    line-height: 1;
    margin-left: -1px;
}

.wa-sg.sg-android .sga-sb-network {
    font-size: calc(12px * var(--sg-fs));
    font-weight: 500;
    line-height: 1;
}

.wa-sg.sg-android .sg-progress {
    top: 3px;
    left: 16px;
    right: 16px;
    height: 2px;
    gap: 4px;
}

.wa-sg.sg-android .sg-progress span {
    border-radius: 1px;
    background: rgba(255, 255, 255, .4);
}

.wa-sg.sg-android .sga-back {
    left: 14.1px;
    top: 25.2px;
    width: 22.49px;
    height: 22.11px;
}

.wa-sg.sg-android .sg-avatar {
    left: 51px;
    top: 16px;
    width: 40px;
    height: 40px;
}

.wa-sg.sg-android .sg-badge {
    width: 14.5px;
    height: 14.5px;
    right: -2.3px;
    bottom: -3.3px;
    border: 2.1px solid var(--sg-badge-ring, #000000);
    color: #ffffff;
}

.wa-sg.sg-android .sg-ident {
    left: 105px;
    right: 44px;
    top: 17.5px;
}

.wa-sg.sg-android .sg-ident.sg-has-chip {
    right: 100px;
}

.wa-sg.sg-android .sg-name {
    font-size: calc(16.5px * var(--sg-fs));
    line-height: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, .93);
}

.wa-sg.sg-android .sg-meta {
    margin-top: .5px;
    font-size: calc(13px * var(--sg-fs));
    line-height: 17px;
    font-weight: 400;
    color: rgba(255, 255, 255, .88);
    gap: 4px;
}

/* measured: 8px either side of the bullet, the loop icon 1px lower */
.wa-sg.sg-android .sg-meta .sg-meta-sep {
    margin: 0 1px 0 3px;
}

.wa-sg.sg-android .sg-meta .sg-meta-ico {
    position: relative;
    top: 1px;
}

.wa-sg.sg-android .sga-more {
    right: 19.4px;
    top: 25.9px;
    width: 7.24px;
    height: 19.82px;
}

.wa-sg.sg-android .sg-chip {
    right: 44px;
    top: 20.5px;
    height: 31px;
    width: 50px;
    padding: 0 8px 0 7px;
    gap: 3px;
}

.wa-sg.sg-android .sg-chip .sg-chip-emoji {
    font-size: calc(17px * var(--sg-fs));
}


.wa-sg.sg-android .sg-text-status p {
    font-size: var(--sg-text-size, 30px);
    font-weight: 400;
}

.wa-sg.sg-android .sg-caption {
    bottom: 96px;
}

.wa-sg.sg-android .sg-caption.sg-caption-low {
    bottom: 40px;
}

.wa-sg.sg-android .sga-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: #0f1112;
    z-index: 5;
}

.wa-sg.sg-android .sg-reply {
    left: 9px;
    bottom: 32px;
    height: 48px;
    border-radius: 24px;
    padding: 0 0 0 16px;
    background: #1f272a;
    color: #e9edef;
    font-size: calc(17px * var(--sg-fs));
    font-weight: 400;
}

/* the reference sets the word 2.5px under the pill's centre */
.wa-sg.sg-android .sg-reply-text {
    padding-top: 2.5px;
}

.wa-sg.sg-android .sg-round-btn {
    right: 8px;
    bottom: 31px;
    width: 50px;
    height: 50px;
    background: #1f272a;
}

.wa-sg.sg-android .sg-reactions span {
    width: 50px;
    font-size: calc(20px * var(--sg-fs));
}

.wa-sg.sg-android .sg-reactions {
    padding-right: 3.6px;
}

.wa-sg.sg-android .sg-home-indicator {
    bottom: 7px;
    width: 114px;
    height: 4px;
    border-radius: 2px;
    background: #ffffff;
    opacity: .9;
}

/* =============================================================================
 * 5. MY STATUS - viewers sheet
 *
 *   iPhone   WhatsApp for iOS 25.35 / 26.3: 6px top corners, 22.8 x 3px
 *            grabber, "3 views" 13.8px at 7.7px, Facebook and Instagram
 *            buttons on the right, a separator at 47.8px and between rows,
 *            rows on a 45.3px pitch (first centred at 68.5px): 31px photo at
 *            6.9px, name 14.7px at 46.2px, grey day and black time on the right
 *   Android  WhatsApp for Android 2.25.36: a card inset 10px from the screen
 *            edges with 6px top corners, a 59px #F6F5F4 header "Viewed by 3"
 *            19px, a "3 views" 16px section, rows on a 72px pitch (first
 *            centred at 138.9px): 40px photo at 17px, name 18px at 76.3px,
 *            time 15.5px, message shortcut 30.9px from the right
 * Row positions are set inline from these numbers by the page script.
 * ========================================================================== */
.wa-sg .sg-sheet {
    position: absolute;
    bottom: 0;
    z-index: 8;
    overflow: hidden;
}

.wa-sg .sg-sheet > span,
.wa-sg .sg-sheet-head,
.wa-sg .sg-viewer {
    position: absolute;
}

.wa-sg .sg-viewer {
    left: 0;
    right: 0;
    box-sizing: border-box;
}

.wa-sg .sg-viewer > span {
    position: absolute;
}

.wa-sg .sg-viewer-photo {
    top: 50%;
    border-radius: 50%;
    overflow: hidden;
    background: #7e8a91;
    color: #cfd4d7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-sg .sg-viewer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wa-sg .sg-viewer-photo svg {
    width: 62%;
    height: 62%;
    margin-top: 16%;
}

.wa-sg .sg-viewer-heart {
    display: flex;
    color: var(--sg-green);
    line-height: 0;
}

.wa-sg .sg-viewer-name,
.wa-sg .sg-viewer-time,
.wa-sg .sg-viewer-when span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-sg .sg-viewer-chat {
    display: flex;
    line-height: 0;
}

/* --- iPhone ------------------------------------------------------------- */
.wa-sg.sg-ios .sg-sheet {
    left: 0;
    right: 0;
    border-radius: 6px 6px 0 0;
    background: #ffffff;
    color: #000000;
}

.wa-sg.sg-ios.sg-dark-sheet .sg-sheet {
    background: #1c1c1e;
    color: #ffffff;
}

.wa-sg.sg-ios .sg-sheet-grabber {
    top: 5.6px;
    left: 50%;
    width: 22.8px;
    height: 3px;
    margin-left: -11.4px;
    border-radius: 1.5px;
    background: #c7c7cc;
}

.wa-sg.sg-ios.sg-dark-sheet .sg-sheet-grabber {
    background: #5a5a5f;
}

.wa-sg.sg-ios .sg-sheet-title {
    left: 7.7px;
    top: 17.4px;
    right: 90px;
    font-size: calc(13.8px * var(--sg-fs));
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-sg.sg-ios .sg-sheet-share {
    top: 15.1px;
    display: flex;
    line-height: 0;
}

.wa-sg.sg-ios .sg-share-fb {
    right: 43px;
}

.wa-sg.sg-ios .sg-share-ig {
    right: 6px;
}

.wa-sg.sg-ios .sg-sheet-separator {
    left: 7px;
    right: 7px;
    height: 1px;
    background: #e5e5ea;
}

.wa-sg.sg-ios.sg-dark-sheet .sg-sheet-separator {
    background: #38383a;
}

.wa-sg.sg-ios .sg-viewer {
    height: 45.3px;
}

.wa-sg.sg-ios .sg-viewer-photo {
    left: 6.9px;
    width: 31px;
    height: 31px;
    margin-top: -15.5px;
}

.wa-sg.sg-ios .sg-viewer-heart {
    left: 30px;
    top: 50%;
    margin-top: 5px;
}

.wa-sg.sg-ios .sg-viewer-name {
    left: 46.2px;
    right: 118px;
    top: 50%;
    margin-top: -10px;
    font-size: calc(14.7px * var(--sg-fs));
    line-height: 20px;
    font-weight: 400;
}

.wa-sg.sg-ios .sg-viewer-when {
    right: 7.7px;
    top: 50%;
    margin-top: -9px;
    display: flex;
    gap: 12.9px;
    font-size: calc(11.6px * var(--sg-fs));
    line-height: 18px;
}

.wa-sg.sg-ios .sg-viewer-day {
    color: #8a8a8e;
}

.wa-sg.sg-ios.sg-dark-sheet .sg-viewer-day {
    color: #8d8d93;
}

.wa-sg.sg-ios .sg-home-indicator.sg-on-light {
    background: #000000;
    opacity: .9;
}

/* --- Android ------------------------------------------------------------ */
.wa-sg.sg-android .sg-sheet {
    left: 10px;
    right: 10px;
    bottom: 22px;
    border-radius: 6px 6px 0 0;
    background: #ffffff;
    color: #0b1014;
}

.wa-sg.sg-android.sg-dark-sheet .sg-sheet {
    background: #121b22;
    color: #e9edef;
}

.wa-sg.sg-android .sg-sheet-head {
    left: 0;
    right: 0;
    top: 0;
    height: 59px;
    background: #f6f5f4;
}

.wa-sg.sg-android.sg-dark-sheet .sg-sheet-head {
    background: #1f272a;
}

.wa-sg.sg-android .sg-sheet-head > span {
    position: absolute;
}

.wa-sg.sg-android .sg-sheet-title {
    left: 18.7px;
    right: 60px;
    top: 21.6px;
    font-size: calc(19px * var(--sg-fs));
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-sg.sg-android .sg-sheet-menu {
    right: 34.7px;
    top: 25.4px;
    display: flex;
    line-height: 0;
}

.wa-sg.sg-android .sg-sheet-section {
    left: 18.7px;
    top: 72.4px;
    font-size: calc(16px * var(--sg-fs));
    line-height: 21px;
    font-weight: 500;
}

.wa-sg.sg-android .sg-viewer {
    height: 72px;
}

.wa-sg.sg-android .sg-viewer-photo {
    left: 17px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
}

.wa-sg.sg-android .sg-viewer-heart {
    left: 41px;
    top: 50%;
    margin-top: 3px;
}

.wa-sg.sg-android .sg-viewer-name {
    left: 76.3px;
    right: 70px;
    top: 50%;
    margin-top: -23px;
    font-size: calc(18px * var(--sg-fs));
    line-height: 24px;
    font-weight: 400;
}

.wa-sg.sg-android .sg-viewer-time {
    left: 76.3px;
    right: 70px;
    top: 50%;
    margin-top: 2px;
    font-size: calc(15.5px * var(--sg-fs));
    line-height: 21px;
    color: #667781;
}

.wa-sg.sg-android.sg-dark-sheet .sg-viewer-time {
    color: #8696a0;
}

.wa-sg.sg-android .sg-viewer-chat {
    right: 30.9px;
    top: 50%;
    margin-top: -12.2px;
    color: #0a1a33;
}

.wa-sg.sg-android.sg-dark-sheet .sg-viewer-chat {
    color: #d1d7db;
}

/* =============================================================================
 * 6. PREVIEW EDIT CHROME - hover to edit, as on the Status List
 * ========================================================================== */
.wa-sg .sg-zone {
    position: absolute;
    z-index: 20;
    border-radius: 6px;
}

.wa-sg .sg-zone .sg-hover-actions,
.wa-sg .sg-viewer .sg-hover-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--sg-hover-veil);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.wa-sg .sg-zone:hover .sg-hover-actions,
.wa-sg .sg-viewer:hover .sg-hover-actions {
    opacity: 1;
    visibility: visible;
}

.wa-sg .sg-hover-actions button {
    height: 27px;
    min-width: 27px;
    border-radius: 7px;
    border: 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(20, 20, 22, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: background .15s ease;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.wa-sg .sg-hover-actions button span {
    font-family: "Segoe UI", Arial, sans-serif !important;
}

.wa-sg .sg-hover-actions button.sg-hover-edit:hover {
    background: var(--primery-color, #1877f2);
}

.wa-sg .sg-hover-actions button.sg-hover-delete:hover {
    background: #dc2626;
}

.wa-sg .sg-sortable-ghost {
    opacity: .4;
}

/* hover chrome must never reach an exported image */
.wa-sg.sg-exporting .sg-zone,
.wa-sg.downloading .sg-zone,
.wa-sg.sg-exporting .sg-hover-actions,
.wa-sg.downloading .sg-hover-actions {
    display: none !important;
}

/* --- Preview button and popup ------------------------------------------- */
.buttons-grp .sg-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0d6efd;
    border: 1px solid #0d6efd;
    color: #fff;
}

.buttons-grp .sg-preview-btn:hover {
    filter: brightness(.93);
    color: #fff;
}

#sg-preview-modal .popup-content {
    max-width: 420px;
}

#sg-preview-modal .pop-content {
    display: flex;
    justify-content: center;
}

#sg-preview-content {
    width: 360px;
    max-width: 100%;
}

#sg-preview-content .sg-zone,
#sg-preview-content .sg-hover-actions {
    display: none !important;
}

#sg-preview-modal .preview-download-btn {
    width: 100%;
    margin-top: 10px;
}

/* =============================================================================
 * 7. RESPONSIVE - the Chat Generator's own preview breakpoints
 * ========================================================================== */
@media only screen and (max-width: 420px) {
    .sg-stage {
        margin: auto;
        width: auto;
    }

    .sg-phone {
        width: 100%;
    }
}

@media only screen and (max-width: 380px) {
    .sg-stage {
        margin: 0;
    }
}

@media (max-width: 575px) {
    .sg-grid-2,
    .sg-check-grid {
        grid-template-columns: 1fr;
    }
}