/* =============================================================================
 * social-whatsapp-status-list.css
 * -----------------------------------------------------------------------------
 * Fake WhatsApp Status List generator - iPhone (iOS) only.
 *
 * Two things live in this file:
 *   1. the small helpers the Settings panel needs on top of the shared
 *      social-whatsapp.min.css design system (grids, upload rows, item lists);
 *   2. the whole iOS Status List preview, scoped under .wa-status.
 *
 * Every preview selector is nested under .wa-status and every settings helper is
 * prefixed .sl-, so nothing here can leak into another generator.
 *
 * Preview metrics come from the iOS reference screenshots (390pt wide, captured
 * at 471px) scaled to the 360px inner width this product uses for every phone
 * preview: factor 360 / 471 = 0.764.
 * ============================================================================= */

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

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

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

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

.sl-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;
}

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

/* Toggle pills read their state from .active, exactly like the Chat
 * Generator's "Hide Header" / "Hide Footer" boxes, so the raw control is
 * hidden the same way .radio-pill hides its radio. */
.sl-toggle-box .radio-pill input[type="checkbox"] {
    display: none;
}

/* --- Display Settings ----------------------------------------------------
 * The Display Settings tab reuses the Chat Generator's own components -
 * label-tab groups, device-box pills, all-common-dropdown, Battery-percent-wrap,
 * clock-part and chat-color-input - so its look comes from social-whatsapp.css.
 * These rules cover only what that stylesheet leaves to the Chat Generator's
 * page script, plus the Status List's text fields. */
.sl-panel[data-panel="display"] .device-setting .device-box {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

/* groups here differ in height (pills, fields, dropdowns), so pin them to
 * the top of each row to keep every label-tab on one line */
.sl-panel[data-panel="display"] .top-setting,
.sl-panel[data-panel="display"] .header-setting,
.sl-panel[data-panel="display"] .footer-setting,
.sl-panel[data-panel="display"] .background-setting {
    align-items: flex-start;
}

/* the Chat Generator makes this flex only under its .chat-color-code wrapper */
.sl-panel[data-panel="display"] .chat-color-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* same compact clock field as the Chat Generator's time input */
.sl-panel[data-panel="display"] .clock-part .time-box {
    width: 95px;
}

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

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

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

/* opens downward, like the Chat Generator's Network and Sim dropdowns */
.sl-dd .select-option-content {
    bottom: unset;
}

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

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

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

.sl-field-full {
    flex-basis: 100%;
}

.sl-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sl-color-input {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid #d3d3d3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

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

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

.sl-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;
}

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

.sl-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;
}

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

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

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

.sl-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;
}

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

/* --- managed entry lists (Recent / Viewed / Hidden / Channels) ----------- */
.sl-item-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.sl-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;
}

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

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

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

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

.sl-item-card .sl-item-thumb.sl-ring-green {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #25d366;
}

.sl-item-card .sl-item-thumb.sl-ring-grey {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9aa0a6;
}

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

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

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

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

.sl-item-card .sl-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;
}

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

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

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

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

.sl-add-to-section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: var(--primery-color, #1877f2);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.sl-add-to-section:hover {
    filter: brightness(.94);
}

.sl-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;
}

.sl-device-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sl-device-disabled small {
    font-size: 10px;
    margin-left: 3px;
}

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

/* =============================================================================
 * 2. iOS STATUS LIST PREVIEW
 * ========================================================================== */

/* --- palette ------------------------------------------------------------ */
.wa-status {
    --sl-bg: #000000;
    --sl-elev-1: #1c1c1e;
    --sl-elev-2: #2c2c2e;
    --sl-text: #ffffff;
    --sl-text-2: #8e8e93;
    --sl-separator: rgba(255, 255, 255, .10);
    --sl-ring: #25d366;
    --sl-ring-seen: #5b5b5f;
    --sl-blue: #3797f0;
    --sl-tabbar: rgba(28, 28, 30, .94);
    --sl-tabbar-active: #3a3a3c;
    --sl-tab-inactive: #ffffff;
    --sl-tab-label: rgba(255, 255, 255, .92);
    --sl-follow-bg: #08361c;
    --sl-follow-text: #e7ffec;
    --sl-search-icon: #c9c9ce;
    /* Font Size setting: every text size on the phone screen is expressed as
     * calc(<px> * var(--sl-fs)), so one variable scales the whole screen
     * without any of them compounding through nesting. */
    --sl-fs: 1;
    --sl-hover-veil: rgba(0, 0, 0, .45);
    --pencil-bg: #fff;
    --footer-channel: #23c063;
    --channel-border: #34393e;
    --updates-bg: #d8fdd2;
}

.wa-status.sl-light {
    --sl-bg: #ffffff;
    --sl-elev-1: #efeff0;
    --sl-elev-2: #e4e4e6;
    --sl-text: #000000;
    --sl-text-2: #8a8a8e;
    --sl-separator: rgba(0, 0, 0, .12);
    --sl-ring-seen: #c7c7cc;
    --sl-tabbar: rgba(247, 247, 249, .94);
    --sl-tabbar-active: #dcdce0;
    --sl-tab-inactive: #000000;
    --sl-tab-label: rgba(0, 0, 0, .88);
    --sl-follow-bg: #d9fdd3;
    --sl-follow-text: #0a5c2e;
    --sl-search-icon: #6c6c70;
    --sl-hover-veil: rgba(255, 255, 255, .5);
    --pencil-bg: #5c6267;
    --footer-channel: #1b875a;
    --channel-border:#bbbfc5;
    --updates-bg: #15603F;
}

/* --- preview stage --------------------------------------------------------
 * The Fake WhatsApp Chat Generator's preview is the reference for every
 * generator in this project, so this uses its box model and breakpoints,
 * measured off the live page:
 *
 *   Chat Generator                             Status List
 *   .frame            360 wide, auto margins   .sl-stage
 *   .frame .whatsapp  380 x 724, 10px bezel    .sl-phone, 10px empty inset
 *   screen            360 x 704                #download
 *   <=420px  .frame width auto - fills the column (see RESPONSIVE)
 *   <=380px  .frame margin 0
 *
 * The bezel is kept as empty space rather than drawn, so the screen sits on
 * exactly the pixels the Chat Generator's screen does while the Preview and
 * every export stay frameless. Screen height comes from the Screen Size
 * setting, which defaults to the Chat Generator's 704. */
.sl-stage {
    position: relative;
    width: 360px;
    max-width: 1000px;
    margin: 0 auto;
}

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

/* The shared `.right-part #download { width: 360px }` would pin the screen;
 * the Chat Generator overrides it through `.frame .whatsapp`, and this is the
 * same override for the frameless box, so the screen fills the phone. */
.right-part .sl-phone #download {
    width: 100%;
}

.wa-status.modal {
    width: 100%;
    height: 704px;
    box-sizing: border-box;
    display: block;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

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

.wa-status .modal-content.sl-device {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--sl-bg);
    color: var(--sl-text);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Full Screen Download: let the device grow to the whole list height.
 * !important because the screen height is applied inline from the Screen
 * Size setting, and an inline height would otherwise clip the export. */
.wa-status.modal.downloading {
    height: auto !important;
    min-height: 694px;
}

.wa-status.modal.downloading .sl-body {
    overflow: visible;
}

/* --- status bar --------------------------------------------------------- */
.wa-status .sl-statusbar {
    flex: 0 0 auto;
    height: 50px;
    /* time in the left corner, icons in the right corner, at the insets the
     * Chat Generator's iPhone status bar uses: first ink 29.25px from the
     * left edge, last ink 23.25px from the right (the battery nub sits 2.6px
     * outside its pill, hence 26px of padding) */
    padding: 7px 26px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(15px * var(--sl-fs));
    font-weight: 600;
    letter-spacing: .1px;
    color: var(--sl-text);
    position: relative;
    z-index: 6;
}

.wa-status .sl-sb-time {
    flex: 0 0 auto;
}

.wa-status .sl-sb-right {
    display: flex;
    /* iOS bottom-aligns the cellular, wifi and battery glyphs */
    /* align-items: flex-end; */
    align-items: center;
    gap: 7px;
}

.wa-status .sl-sb-right svg {
    display: block;
}

.wa-status .sl-battery-pill {
    position: relative;
    width: 22.9px;
    height: 13px;
    border-radius: 4.2px;
    background: var(--sl-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-status .sl-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: var(--sl-text);
    opacity: .45;
}

/* digits fill ~70% of the pill's height, as on iOS and in the Chat
 * Generator's iPhone battery; 12.5px is the largest size at which "100"
 * still clears the pill's rounded ends */
.wa-status .sl-battery-pill span {
    font-size: calc(12.5px * var(--sl-fs));
    font-weight: 700;
    line-height: 1;
    color: var(--sl-bg);
    letter-spacing: -.2px;
}

.wa-status .sl-battery-pill.sl-charging {
    background: #34c759;
}

.wa-status .sl-battery-outline {
    position: relative;
    width: 22.9px;
    height: 13px;
    border-radius: 4.2px;
    border: 1.2px solid var(--sl-text);
    opacity: .9;
    padding: 1.4px;
    box-sizing: border-box;
}

.wa-status .sl-battery-outline i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--sl-text);
}

.wa-status .sl-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: var(--sl-text);
    opacity: .45;
}

.wa-status .sl-battery-text {
    font-size: calc(13px * var(--sl-fs));
    font-weight: 600;
}

/* --- header (large title) ------------------------------------------------ */
.wa-status .sl-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    background: var(--sl-bg);
}

.wa-status .sl-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sl-elev-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
    flex: 0 0 auto;
}

.wa-status .sl-menu-btn i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sl-text);
    display: block;
}

.wa-status .sl-header-large .sl-header-top {
    padding: 4px 14px 0;
    display: flex;
    align-items: center;
}

.wa-status .sl-header-large .sl-title {
    font-size: calc(31px * var(--sl-fs));
    font-weight: 700;
    letter-spacing: .35px;
    line-height: 1.15;
    padding: 12px 14px 0;
    margin: 0;
    color: var(--sl-text);
}

/* --- header (compact / scrolled) ----------------------------------------- */
.wa-status .sl-header-compact {
    height: 49px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    position: relative;
}

.wa-status .sl-header-compact .sl-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: calc(16px * var(--sl-fs));
    font-weight: 600;
    margin: 0;
    color: var(--sl-text);
    pointer-events: none;
}

.wa-status .sl-header-compact .sl-menu-btn {
    position: relative;
    z-index: 2;
}

/* --- search -------------------------------------------------------------- */
.wa-status .sl-search {
    margin: 9px 14px 0;
    height: 40px;
    border-radius: 20px;
    background: var(--sl-elev-1);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    color: var(--sl-text-2);
}

.wa-status .sl-search svg {
    flex: 0 0 auto;
    color: var(--sl-search-icon);
}

.wa-status .sl-search span {
    font-size: calc(16px * var(--sl-fs));
    font-weight: 400;
    color: var(--sl-text-2);
}

/* --- scrolling body ------------------------------------------------------ */
.wa-status .sl-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 96px;
    scrollbar-width: none;
}

.wa-status .sl-body::-webkit-scrollbar {
    width: 0;
    display: none;
}

.wa-status .sl-body.sl-no-tabbar {
    padding-bottom: 14px;
}

/* --- "Status" heading ---------------------------------------------------- */
.wa-status .sl-status-heading {
    font-size: calc(21px * var(--sl-fs));
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--sl-text);
    padding: 30px 14px 6px;
    margin: 0;
}

/* --- add status row ------------------------------------------------------ */
.wa-status .sl-add-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    min-height: 72px;
    position: relative;
}

.wa-status .sl-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.wa-status .sl-avatar img,
.wa-status .sl-avatar .sl-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--sl-elev-2);
}

.wa-status .sl-avatar .sl-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-2);
}

/* ring: 2.5px stroke, 1.5px gap, 44px photo inside the 52px box */
.wa-status .sl-avatar.sl-has-ring img,
.wa-status .sl-avatar.sl-has-ring .sl-avatar-fallback {
    width: 44px;
    height: 44px;
    margin: 4px;
}

.wa-status .sl-avatar .sl-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wa-status .sl-add-plus {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sl-ring);
    border: 2px solid var(--sl-bg);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.wa-status .sl-add-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wa-status .sl-add-title {
    font-size: calc(16px * var(--sl-fs));
    font-weight: 600;
    color: var(--sl-text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-status .sl-add-sub {
    font-size: calc(14px * var(--sl-fs));
    font-weight: 400;
    color: var(--sl-text-2);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-status .sl-add-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

.wa-status .sl-round-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sl-elev-1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text);
    flex: 0 0 auto;
}

/* --- section header ------------------------------------------------------ */
.wa-status .sl-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 21px 14px 8px;
    cursor: pointer;
}

.wa-status .sl-section-head span {
    font-size: calc(16px * var(--sl-fs));
    font-weight: 400;
    color: var(--sl-text-2);
    line-height: 1.2;
}

.wa-status .sl-section-head .sl-chevron {
    color: var(--sl-text-2);
    display: flex;
    transition: transform .18s ease;
}

.wa-status .sl-section-head.sl-fixed-head {
    cursor: default;
}

.wa-status .sl-section.sl-collapsed .sl-chevron {
    transform: rotate(180deg);
}

.wa-status .sl-section.sl-collapsed .sl-rows {
    display: none;
}

/* --- status rows --------------------------------------------------------- */
.wa-status .sl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 67px;
    padding: 0 14px;
    position: relative;
}

.wa-status .sl-row-body {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.wa-status .sl-row + .sl-row .sl-row-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sl-separator);
}

.wa-status .sl-row-name {
    font-size: calc(16px * var(--sl-fs));
    font-weight: 600;
    color: var(--sl-text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.wa-status .sl-row-name b {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-status .sl-row-time {
    font-size: calc(14px * var(--sl-fs));
    font-weight: 400;
    color: var(--sl-text-2);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dim the row's content rather than the row: opacity on the row would also
 * fade its hover controls, and a child can never undo a parent's opacity. The
 * row draws nothing of its own, so the exported image is unchanged. */
.wa-status .sl-row.sl-dim > *:not(.sl-hover-actions) {
    opacity: .55;
}

.wa-status .sl-avatar.sl-blurred img,
.wa-status .sl-avatar.sl-blurred .sl-avatar-fallback {
    filter: blur(3px);
}

.wa-status .sl-muted-icon {
    color: var(--sl-text-2);
    display: inline-flex;
    flex: 0 0 auto;
}

/* --- channels ------------------------------------------------------------ */
.wa-status .sl-channels-title {
    font-size: calc(21px * var(--sl-fs));
    font-weight: 700;
    color: var(--sl-text);
    padding: 26px 14px 0;
    margin: 0;
}

.wa-status .sl-channels-desc {
    font-size: calc(14px * var(--sl-fs));
    line-height: 1.45;
    color: var(--sl-text-2);
    padding: 6px 14px 0;
    margin: 0;
}

.wa-status .sl-ch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 73px;
    padding: 8px 14px;
    position: relative;
}

.wa-status .sl-ch-body {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wa-status .sl-ch-row + .sl-ch-row .sl-ch-body::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sl-separator);
}

.wa-status .sl-ch-name {
    font-size: calc(16px * var(--sl-fs));
    font-weight: 600;
    color: var(--sl-text);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-status .sl-ch-name svg {
    vertical-align: -2px;
    margin-left: 3px;
}

.wa-status .sl-ch-followers {
    font-size: calc(14px * var(--sl-fs));
    color: var(--sl-text-2);
    line-height: 1.3;
    margin-top: 2px;
}

.wa-status .sl-follow-btn {
    flex: 0 0 auto;
    min-width: 63px;
    height: 27px;
    padding: 0 13px;
    border-radius: 14px;
    background: var(--sl-follow-bg);
    color: var(--sl-follow-text);
    font-size: calc(14px * var(--sl-fs));
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-status .sl-follow-btn.sl-following {
    background: var(--sl-elev-2);
    color: var(--sl-text);
}

.wa-status .sl-ch-close {
    flex: 0 0 auto;
    color: var(--sl-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.wa-status .sl-wide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 41px;
    margin: 12px 14px 0;
    border-radius: 21px;
    background: var(--sl-elev-1);
    color: var(--sl-text);
    font-size: calc(16px * var(--sl-fs));
    font-weight: 500;
}

/* --- tab bar ------------------------------------------------------------- */
.wa-status .sl-tabbar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 22px;
    height: 60px;
    border-radius: 30px;
    background: var(--sl-tabbar);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    display: flex;
    align-items: center;
    padding: 0 3px;
    z-index: 8;
    /* the tab bar is decoration: let hover reach the rows it floats over, so
     * every row's Edit / Delete stays clickable */
    pointer-events: none;
}

.wa-status .sl-tab {
    flex: 1 1 0;
    height: 54px;
    border-radius: 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--sl-tab-inactive);
    min-width: 0;
}

.wa-status .sl-tab.active {
    background: var(--sl-tabbar-active);
    color: var(--sl-text);
}

.wa-status .sl-tab svg {
    display: block;
}

.wa-status .sl-tab span {
    color: var(--sl-tab-label);
    font-size: calc(10px * var(--sl-fs));
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wa-status .sl-home-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7px;
    width: 124px;
    height: 5px;
    border-radius: 3px;
    background: var(--sl-text);
    opacity: .85;
    z-index: 9;
    pointer-events: none;
}

/* =============================================================================
 * 3. PREVIEW HOVER EDIT / DELETE
 * ========================================================================== */
/* A veil over the whole row with the buttons centred - the Chat List
 * Generator's .edit-delete pattern. A strip pinned to the right edge landed on
 * the Add status pencil and on Follow / close, half-hiding them. */
.wa-status .sl-hover-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--sl-hover-veil);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    z-index: 6;
}

.wa-status .sl-row:hover .sl-hover-actions,
.wa-status .sl-ch-row:hover .sl-hover-actions,
.wa-status .sl-add-row:hover .sl-hover-actions {
    opacity: 1;
    visibility: visible;
}

.wa-status .sl-hover-actions button {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: rgba(20, 20, 22, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: background .15s ease;
}

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

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

.wa-status .sl-hover-actions button.sl-hover-move {
    cursor: grab;
}

.wa-status .sl-row:hover,
.wa-status .sl-ch-row:hover,
.wa-status .sl-add-row:hover {
    background: rgba(255, 255, 255, .045);
}

.wa-status.sl-light .sl-row:hover,
.wa-status.sl-light .sl-ch-row:hover,
.wa-status.sl-light .sl-add-row:hover {
    background: rgba(0, 0, 0, .035);
}

.wa-status .sl-sortable-ghost {
    opacity: .4;
}

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

.wa-status.sl-exporting .sl-row:hover,
.wa-status.sl-exporting .sl-ch-row:hover,
.wa-status.sl-exporting .sl-add-row:hover {
    background: transparent;
}

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

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

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

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

/* the popup copy is inert - no hover chrome, no scrollbars */
#sl-preview-content .sl-hover-actions {
    display: none !important;
}

#sl-preview-content .sl-row:hover,
#sl-preview-content .sl-ch-row:hover,
#sl-preview-content .sl-add-row:hover {
    background: transparent;
}

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

/* =============================================================================
 * 4. RESPONSIVE
 * ========================================================================== */
/* Preview breakpoints are the Chat Generator's own (social-whatsapp.css):
 * the phone keeps 380 x 724 until the column is narrower than that, then
 * fills the column at a fixed height. */
@media only screen and (max-width: 420px) {
    .sl-stage {
        margin: auto;
        width: auto;
    }

    .sl-phone {
        width: 100%;
    }

    /* the screen only narrows from here, so the large title steps down here */
    .wa-status .sl-header-large .sl-title {
        font-size: calc(28px * var(--sl-fs));
    }
}

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

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

/* =============================================================================
 * 5. ANDROID STATUS LIST PREVIEW
 * -----------------------------------------------------------------------------
 * Drawn from the Android reference screenshots (light and dark). Everything is
 * scoped to `.wa-status.sl-android`, so the iOS preview above is untouched: the
 * Android markup keeps the shared behaviour classes (.sl-body, .sl-section,
 * .sl-section-head, .sl-rows, .sl-row, .sl-add-row, .sl-ch-row, .sl-avatar,
 * .sl-hover-actions) and overrides them here, while every Android-only element
 * uses its own `sla-` class that no iOS rule can reach.
 *
 * Measured off the reference at 540px wide, which is 1.5x the 360px preview,
 * so one reference pixel is 2/3 of a preview pixel:
 *   row pitch 114 -> 76        ring 84 -> 56       photo 72 -> 48
 *   text left 120 -> 80        screen padding 24 -> 16
 * ========================================================================== */

/* Roboto covers both weights the reference uses (400 and 500). It is served
 * from this project so the Download and Screen Recording capture it too. */
@font-face {
    font-family: "SL Roboto";
    src: url("../../fonts/roboto/roboto-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.wa-status.sl-android {
    --sla-bg: #0b1014;
    --sla-text: #fafdfe;
    --sla-text-2: #959a9e;
    --sla-icon: #e4e7ea;
    --sla-accent: #25d366;
    --sla-ring-seen: #6e787d;
    --sla-initial-bg: #092743;
    --sla-initial-fg: #5ca5f4;
    --sla-fab-bg: #202c33;
    --sla-fab-icon: #cfd4d7;
    --sla-chip-bg: #202c33;
    --sla-nav-pill: rgba(37, 211, 102, .22);
    --sla-follow-bg: #103629;
    --sla-follow-text: #b9f5c9;
    --sla-plus-fg: #06281a;
    --sla-fab-fg: #05240f;
}

.wa-status.sl-android,
.wa-status.sl-android .modal-content.sl-device,
/* Icon elements are left out: Font Awesome draws each glyph from its own font
 * on the element carrying an icon class, so forcing Roboto onto them turned
 * every hover icon into a missing-glyph box on the Android screen. */
.wa-status.sl-android .modal-content.sl-device *:not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fas):not(.far):not(.fab) {
    font-family: "SL Roboto", Roboto, "Segoe UI", Arial, sans-serif !important;
}

.wa-status.sl-android.sl-light {
    --sla-bg: #ffffff;
    --sla-text: #111111;
    --sla-text-2: #676a6c;
    --sla-icon: #3b4043;
    --sla-accent: #1daa61;
    --sla-ring-seen: #d1d7db;
    --sla-initial-bg: #d0e8ff;
    --sla-initial-fg: #175892;
    --sla-fab-bg: #f6f5f3;
    --sla-fab-icon: #575e64;
    --sla-chip-bg: #f0f2f5;
    --sla-nav-pill: #d9fdd3;
    --sla-follow-bg: #d9fdd3;
    --sla-follow-text: #15603e;
    --sla-plus-fg: #ffffff;
    --sla-fab-fg: #ffffff;
}

.wa-status.sl-android .modal-content.sl-device {
    background: var(--sla-bg);
    color: var(--sla-text);
}

/* --- status bar ---------------------------------------------------------- */
.wa-status.sl-android .sla-statusbar {
    flex: 0 0 auto;
    height: 40px;
    box-sizing: border-box;
    /* the reference puts the first ink 53px from the left edge and the last
     * 28px from the right, and sits the row 4.5px below the middle */
    /* padding: 9px 28px 0  ; */
    padding: 9px 28px 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sla-icon);
    position: relative;
    z-index: 6;
}

.wa-status.sl-android .sla-sb-time {
    font-size: calc(14px * var(--sl-fs));
    font-weight: 500;
    color: var(--sla-text);
    line-height: 1;
    letter-spacing: .1px;
}

.wa-status.sl-android .sla-sb-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wa-status.sl-android .sla-sb-right svg {
    display: block;
}

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

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

/* --- toolbar ------------------------------------------------------------- */
.wa-status.sl-android .sla-toolbar {
    flex: 0 0 auto;
    height: 48px;
    box-sizing: border-box;
    padding: 0 10px 0 16px;
    display: flex;
    align-items: center;
    gap: 19px;
    position: relative;
    z-index: 5;
}

.wa-status.sl-android .sla-toolbar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(22.3px * var(--sl-fs));
    font-weight: 400;
    line-height: 1.1;
    color: var(--sla-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.wa-status.sl-android .sla-toolbar-btn {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sla-text);
}

/* --- body ---------------------------------------------------------------- */
.wa-status.sl-android .sl-body {
    padding-bottom: 150px;
}

.wa-status.sl-android .sl-body.sla-body-gesture {
    padding-bottom: 164px;
}

.wa-status.sl-android .sl-body.sl-no-tabbar {
    padding-bottom: 96px;
}

/* --- "Status" heading ---------------------------------------------------- */
.wa-status.sl-android .sla-status-heading {
    font-size: calc(21px * var(--sl-fs));
    font-weight: 500;
    line-height: 24px;
    color: var(--sla-text);
    padding: 17.5px 16px 4.2px;
    margin: 0;
}

/* --- rows (add status, status rows) -------------------------------------- */
.wa-status.sl-android .sl-add-row,
.wa-status.sl-android .sl-row {
    display: flex;
    align-items: center;
    gap: 12.3px;
    height: 76px;
    min-height: 0;
    padding: 0 16px 0 11.7px;
    box-sizing: border-box;
    position: relative;
}

.wa-status.sl-android .sl-avatar {
    width: 56px;
    height: 56px;
}

/* the photo is always 48 inside the 56 box, so rows line up whether or not a
 * ring is drawn */
.wa-status.sl-android .sl-avatar img,
.wa-status.sl-android .sl-avatar .sl-avatar-fallback {
    width: 48px;
    height: 48px;
    margin: 4px;
    background: var(--sla-chip-bg);
    color: var(--sla-text-2);
}

.wa-status.sl-android .sl-avatar .sla-initial {
    background: var(--sla-initial-bg);
    color: var(--sla-initial-fg);
    font-size: calc(22px * var(--sl-fs));
    font-weight: 400;
    line-height: 1;
}

.wa-status.sl-android .sla-plus {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 22.7px;
    height: 22.7px;
    border-radius: 50%;
    background: var(--sla-accent);
    border: 1.6px solid var(--sla-bg);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sla-plus-fg);
}

.wa-status.sl-android .sla-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1.1px;
}

.wa-status.sl-android .sla-name {
    font-size: calc(16.5px * var(--sl-fs));
    font-weight: 500;
    line-height: 20px;
    color: var(--sla-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-status.sl-android .sla-sub {
    font-size: calc(15px * var(--sl-fs));
    font-weight: 400;
    line-height: 20px;
    color: var(--sla-text-2);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-status.sl-android .sla-row-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sla-text-2);
    opacity: .75;
}

/* --- section heads ------------------------------------------------------- */
.wa-status.sl-android .sl-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    height: 35.5px;
    box-sizing: border-box;
    padding: 9.2px 20px 0 16px;
    cursor: pointer;
}

.wa-status.sl-android .sl-section-head span {
    font-size: calc(14px * var(--sl-fs));
    font-weight: 500;
    line-height: 20px;
    color: var(--sla-text-2);
}

.wa-status.sl-android .sl-section-head .sl-chevron {
    color: var(--sla-text-2);
    align-items: center;
    height: 20px;
}

/* --- channels ------------------------------------------------------------ */
.wa-status.sl-android .sla-channels-title {
    font-size: calc(20px * var(--sl-fs));
    font-weight: 500;
    line-height: 24px;
    color: var(--sla-text);
    padding: 22px 16px 0;
    margin: 0;
}

.wa-status.sl-android .sla-channels-desc {
    font-size: calc(15px * var(--sl-fs));
    font-weight: 400;
    line-height: 21px;
    color: var(--sla-text-2);
    padding: 4px 22px 0 16px;
    margin: 0;
}

.wa-status.sl-android .sla-find-head {
    height: 52px;
    align-items: center;
    padding: 0 14px 0 16px;
}

.wa-status.sl-android .sla-find-head .sla-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sla-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sla-text-2);
    transition: transform .18s ease;
}

.wa-status.sl-android .sl-section.sl-collapsed .sla-chip {
    transform: rotate(180deg);
}

.wa-status.sl-android .sl-ch-row {
    display: flex;
    align-items: center;
    gap: 12.3px;
    min-height: 76px;
    padding: 8px 16px 8px 11.7px;
    box-sizing: border-box;
    position: relative;
}

.wa-status.sl-android .sla-ch-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wa-status.sl-android .sla-ch-name {
    font-size: calc(16.5px * var(--sl-fs));
    font-weight: 500;
    line-height: 21px;
    color: var(--sla-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wa-status.sl-android .sla-ch-name svg {
    flex: 0 0 auto;
    color: var(--sla-accent);
}

.wa-status.sl-android .sla-ch-followers {
    font-size: calc(15px * var(--sl-fs));
    font-weight: 400;
    line-height: 20px;
    color: var(--sla-text-2);
    margin-top: 1px;
}

.wa-status.sl-android .sla-follow {
    flex: 0 0 auto;
    height: 33px;
    padding: 0 21.6px;
    border-radius: 17px;
    background: var(--sla-follow-bg);
    color: var(--sla-follow-text);
    font-size: calc(15px * var(--sl-fs));
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-status.sl-android .sla-ch-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sla-text-2);
}

.wa-status.sl-android .sla-wide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    margin: 12px 16px 0;
    border-radius: 20px;
    border: 1px solid var(--channel-border);
    color: var(--footer-channel);
    font-size: calc(15px * var(--sl-fs));
    font-weight: 500;
}

/* --- floating buttons ---------------------------------------------------- */
.wa-status.sl-android .sla-fabs {
    position: absolute;
    right: 16px;
    bottom: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 7;
    pointer-events: none;
}

.wa-status.sl-android .sla-fabs.sla-fabs-gesture {
    bottom: 92px;
}

.wa-status.sl-android .sla-fabs.sla-fabs-low {
    bottom: 22px;
}

.wa-status.sl-android .sla-fabs.sla-fabs-low.sla-fabs-gesture {
    bottom: 36px;
}

.wa-status.sl-android .sla-fab-small {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--sla-fab-bg);
    color: var(--sla-fab-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

.wa-status.sl-android .sla-fab-main {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: var(--sla-accent);
    color: var(--sla-fab-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

/* --- bottom navigation --------------------------------------------------- */
.wa-status.sl-android .sla-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: var(--sla-bg);
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: content-box;
    z-index: 8;
    /* decoration only: hover has to reach the rows underneath, so every row
     * keeps its Edit / Delete */
    pointer-events: none;
}

.wa-status.sl-android .sla-nav.sla-nav-gesture {
    padding-bottom: 14px;
}

.wa-status.sl-android .sla-nav-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--sla-text);
}

.wa-status.sl-android .sla-nav-pill {
    width: 56px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-status.sl-android .sla-nav-tab.active .sla-nav-pill {
    background: var(--sla-nav-pill);
}

.wa-status.sl-android .sla-nav-label {
    font-size: calc(12px * var(--sl-fs));
    font-weight: 400;
    line-height: 1.2;
    color: var(--sla-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wa-status.sl-android .sla-nav-tab.active .sla-nav-label {
    font-weight: 500;
}

.wa-status.sl-android .sla-gesture-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7px;
    width: 108px;
    height: 4px;
    border-radius: 2px;
    background: var(--sla-text);
    opacity: .55;
    z-index: 9;
    pointer-events: none;
}

/* --- hover chrome -------------------------------------------------------- */
.wa-status.sl-android .sl-row:hover,
.wa-status.sl-android .sl-ch-row:hover,
.wa-status.sl-android .sl-add-row:hover {
    background: rgba(255, 255, 255, .05);
}

.wa-status.sl-android.sl-light .sl-row:hover,
.wa-status.sl-android.sl-light .sl-ch-row:hover,
.wa-status.sl-android.sl-light .sl-add-row:hover {
    background: rgba(0, 0, 0, .035);
}

.btn.reset-call {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn.reset-call:hover {
    border-color: #ff6363;
    background-color: #ff6363;
}

.btn.btn-primary,
.btn.btn-primary:hover {
    color: #fff !important;
    background-color: #1d7013 !important;
    border-color: #1d7013 !important;
}

/* .btn.btn-primary:hover {
    border-color: #ffdb87;
    background-color: #ffdb87;
} */