/* ===========================================================================
   ویجتِ پشتیبانیِ مشتری — فاز ۴۰؛ بازسازی در docs/44.

   رنگ، گردیِ گوشه و قلم از **نشانه‌های طراحیِ قالبِ فعال** می‌آیند
   (`_shared/design_tokens.html` → `--theme-*`)، با پشتوانه برای قالبی که
   نشانه‌ای ندارد. پس ویجت در هر چهار قالب رنگِ همان فروشگاه را می‌گیرد،
   بی‌آنکه به کلاس یا کتابخانهٔ هیچ‌کدام تکیه کند.

   همهٔ نام‌ها با `sw-` شروع می‌شوند تا با CSSِ قالب تصادم نکنند؛ و همهٔ
   ویژگی‌هایی که قالب ممکن است روی `button`، `input` یا `ol` بگذارد، اینجا
   صریح بازنشانی می‌شوند.
   =========================================================================== */

.sw-root {
    --sw-accent: var(--theme-accent, #0e7490);
    --sw-accent-strong: var(--theme-accent-strong, #155e75);
    --sw-accent-soft: var(--theme-accent-soft, rgba(14, 116, 144, .12));
    --sw-on-accent: #ffffff;
    --sw-surface: var(--theme-surface, #ffffff);
    --sw-ink: var(--theme-ink, #1f2937);
    --sw-muted: var(--theme-ink-muted, #5b6474);
    --sw-line: var(--theme-line, #e3e7ee);
    --sw-tint: var(--theme-tint, #f5f7fa);
    --sw-radius: var(--theme-radius, 10px);
    --sw-danger: #b42318;
    --sw-danger-soft: #fdecea;
    --sw-ok: #18794e;
    --sw-ring: 0 0 0 3px color-mix(in srgb, var(--sw-accent) 35%, transparent);
    --sw-shadow: 0 18px 48px -12px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .08);

    position: fixed;
    inset-inline-end: 20px;
    inset-block-end: 20px;
    z-index: 9998;
    /* `support-widget.js` (`avoidBars`) حباب را بالای نوارهای ثابتِ پایینِ صفحه می‌برد. */
    transition: inset-block-end .2s ease;
    direction: rtl;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sw-ink);
}

.sw-root *, .sw-root *::before, .sw-root *::after { box-sizing: border-box; }
/* `:where` تا این بازنشانی هیچ وزنی نداشته باشد و هر قاعدهٔ `sw-` پس از آن ببرد. */
.sw-root :where(h2, h3, p, ol, ul, dl, fieldset) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    float: none;
    text-align: start;
}
.sw-root [hidden] { display: none !important; }

/* `:where` اینجا هم: `.sw-root button { color: inherit }` (وزنِ ۰٫۱٫۱) از هر قاعدهٔ
   تک‌کلاسیِ ویجت (`.sw-btn-primary`، `.sw-chip` با وزنِ ۰٫۱٫۰) سنگین‌تر بود و رنگِ متنِ
   همهٔ دکمه‌ها را به رنگِ تیرهٔ متنِ صفحه برمی‌گرداند — متنِ تیره روی دکمهٔ رنگی.
   با `:where` وزنِ بازنشانی با یک کلاس برابر است و قاعده‌های پایین‌ترِ همین پرونده می‌برند،
   ولی هنوز از `button {…}`ِ قالب (۰٫۰٫۱) سنگین‌تر است. */
.sw-root :where(button, input, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.sw-root :where(button) { cursor: pointer; touch-action: manipulation; }
.sw-root button:disabled { cursor: not-allowed; opacity: .55; }

.sw-root :focus-visible { outline: none; box-shadow: var(--sw-ring); }

.sw-icon {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sw-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sw-pre { white-space: pre-line; overflow-wrap: anywhere; }

/* --- حباب ------------------------------------------------------------------- */

/* `.sw-root .sw-bubble` و نه `.sw-bubble`: باید از قاعده‌های دکمهٔ قالب‌ها سنگین‌تر باشد. */
.sw-root .sw-bubble {
    position: relative;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, #ffffff 22%, var(--sw-accent)) 0%, transparent 60%),
        linear-gradient(145deg, var(--sw-accent), var(--sw-accent-strong));
    color: var(--sw-on-accent);
    box-shadow:
        0 12px 28px -10px color-mix(in srgb, var(--sw-accent-strong) 75%, transparent),
        0 2px 6px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sw-root .sw-bubble:hover { transform: translateY(-2px) scale(1.03); }
.sw-root .sw-bubble:active { transform: scale(.96); }

.sw-bubble-art { position: relative; width: 28px; height: 28px; display: block; }

.sw-bubble-art svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .18s ease, transform .22s ease;
}

.sw-art-chat path { fill: currentColor; }
.sw-art-dot { fill: var(--sw-accent-strong); }
.sw-art-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.sw-art-close path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.sw-root.is-open .sw-art-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.sw-root.is-open .sw-art-close { opacity: 1; transform: none; }

/* نقطهٔ «کسی آنلاین است» — گوشهٔ مقابلِ نشانِ پیامِ تازه، تا روی هم نیفتند. */
.sw-bubble-presence {
    position: absolute;
    inset-block-end: 3px;
    inset-inline-start: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid var(--sw-surface);
}

.sw-bubble-label {
    position: absolute;
    inset-block-end: 13px;
    inset-inline-end: 72px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--sw-surface);
    color: var(--sw-ink);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sw-shadow);
    border: 1px solid var(--sw-line);
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

@media (hover: hover) and (min-width: 768px) {
    .sw-root:not(.is-open):has(.sw-bubble:hover) .sw-bubble-label,
    .sw-root:not(.is-open):has(.sw-bubble:focus-visible) .sw-bubble-label {
        opacity: 1;
        transform: none;
    }
}

.sw-bubble-badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--sw-danger);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid var(--sw-surface);
}

/* --- پنجره ------------------------------------------------------------------ */

.sw-panel {
    position: absolute;
    inset-block-end: 74px;
    inset-inline-end: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: calc(var(--sw-radius) * 1.6);
    box-shadow: var(--sw-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sw-in .18s ease-out;
}

@keyframes sw-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.sw-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 12px 8px;
    /* سایهٔ تیرهٔ رنگِ قالب: متنِ سفید روی رنگِ اصلیِ روشن (فیروزه‌ای، زرد)
       کنتراستِ کافی ندارد. */
    background: var(--sw-accent-strong);
    color: var(--sw-on-accent);
}

.sw-titles { flex: 1 1 auto; min-width: 0; }

.sw-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-status {
    margin: 0;
    font-size: 12.5px;
    opacity: .92;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sw-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

.sw-dot.is-on { background: #4ade80; opacity: 1; }

.sw-icon-btn {
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sw-header .sw-icon-btn:hover { background: rgba(255, 255, 255, .16); }

.sw-banner {
    padding: 8px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-tint);
    color: var(--sw-muted);
}

.sw-banner.is-error { background: var(--sw-danger-soft); color: var(--sw-danger); }

/* --- نماها ------------------------------------------------------------------ */

.sw-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sw-home, .sw-desks {
    overflow-y: auto;
    padding: 16px;
    gap: 10px;
}

.sw-greeting { margin: 0; font-size: 18px; font-weight: 700; color: var(--sw-ink); }
.sw-lead { margin: 0; color: var(--sw-muted); font-size: 14px; }
.sw-section { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--sw-ink); }
.sw-muted { margin: 0; color: var(--sw-muted); font-size: 13px; }
.sw-error { margin: 0; color: var(--sw-danger); font-size: 13px; }
.sw-error:empty { display: none; }
.sw-ok { margin: 0; color: var(--sw-ok); font-size: 13px; font-weight: 600; }

.sw-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--sw-radius);
    background: var(--sw-accent-soft);
    font-size: 13.5px;
}

.sw-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    color: var(--sw-muted);
}

.sw-search:focus-within { border-color: var(--sw-accent); box-shadow: var(--sw-ring); }

.sw-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--sw-ink);
    outline: none;
    box-shadow: none !important;
}

.sw-results { display: flex; flex-direction: column; gap: 8px; }

.sw-article {
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    overflow: hidden;
}

.sw-article-q {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: start;
    font-weight: 600;
    color: var(--sw-ink);
}

.sw-article-q[aria-expanded="true"] { color: var(--sw-accent-strong); }

.sw-article-a {
    padding: 0 12px 12px;
    font-size: 14px;
    color: var(--sw-ink);
}

.sw-article-a p { margin: 0 0 10px; }

.sw-helpful {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sw-muted);
}

.sw-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: var(--sw-radius);
    background: var(--sw-tint);
    font-size: 14px;
}

.sw-empty p { margin: 0; }

.sw-topics { display: grid; gap: 8px; }

.sw-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    text-align: start;
    color: var(--sw-ink);
    transition: border-color .15s ease, background-color .15s ease;
}

.sw-topic:hover { border-color: var(--sw-accent); background: var(--sw-accent-soft); }
.sw-topic[aria-busy="true"] { opacity: .6; }
.sw-topic > .sw-icon { color: var(--sw-accent); }

.sw-topic-text { display: flex; flex-direction: column; min-width: 0; }
.sw-topic-title { display: block; font-weight: 600; line-height: 1.5; }
.sw-topic small { display: block; color: var(--sw-muted); font-size: 12.5px; line-height: 1.5; }

.sw-foot {
    position: sticky;
    inset-block-end: -16px;
    margin: auto -16px -16px;
    padding: 12px 16px;
    background: var(--sw-surface);
    border-top: 1px solid var(--sw-line);
}

.sw-flow .sw-foot, .sw-chat .sw-foot { position: static; margin: 0; }

.sw-foot-row { display: flex; gap: 8px; justify-content: space-between; }

/* --- دکمه‌ها ---------------------------------------------------------------- */

.sw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--sw-radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
}

.sw-btn-primary { background: var(--sw-accent-strong); color: var(--sw-on-accent); }
.sw-btn-primary:hover { background: color-mix(in srgb, var(--sw-accent-strong) 85%, #000); }
.sw-btn-secondary { background: var(--sw-surface); border-color: var(--sw-accent); color: var(--sw-accent-strong); }
.sw-btn-secondary:hover { background: var(--sw-accent-soft); }
.sw-btn-ghost { background: transparent; color: var(--sw-muted); }
.sw-btn-ghost:hover { color: var(--sw-ink); background: var(--sw-tint); }

.sw-human { width: 100%; }

.sw-chip {
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--sw-line);
    border-radius: 999px;
    background: var(--sw-surface);
    color: var(--sw-ink);
    font-size: 13px;
}

.sw-chip:hover { border-color: var(--sw-accent); color: var(--sw-accent-strong); }
.sw-chip-lg { min-height: 44px; font-size: 14px; text-align: start; padding: 8px 14px; }

.sw-link {
    border: 0;
    padding: 0;
    background: none;
    color: var(--sw-accent-strong);
    text-decoration: underline;
    font-size: inherit;
}

/* --- رشتهٔ پیام‌ها ----------------------------------------------------------- */

.sw-thread {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 14px;
    list-style: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--sw-tint);
}

.sw-msg { display: flex; flex-direction: column; max-width: 86%; margin: 0; padding: 0; }
.sw-msg.from-visitor { align-self: flex-start; align-items: flex-start; }
.sw-msg.from-operator, .sw-msg.from-bot { align-self: flex-end; align-items: flex-end; }
.sw-msg.from-system { align-self: center; max-width: 92%; }

.sw-bubble-msg {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    color: var(--sw-ink);
}

.sw-msg.from-visitor .sw-bubble-msg {
    background: var(--sw-accent-strong);
    border-color: var(--sw-accent-strong);
    color: var(--sw-on-accent);
    border-start-start-radius: 4px;
}

.sw-msg.from-operator .sw-bubble-msg,
.sw-msg.from-bot .sw-bubble-msg { border-start-end-radius: 4px; }

.sw-msg.from-system .sw-bubble-msg {
    background: transparent;
    border: 0;
    color: var(--sw-muted);
    font-size: 12.5px;
    text-align: center;
}

.sw-msg.is-pending .sw-bubble-msg { opacity: .7; }
.sw-msg.is-failed .sw-bubble-msg { box-shadow: 0 0 0 2px var(--sw-danger); }
.sw-msg.is-failed .sw-meta { color: var(--sw-danger); }

.sw-meta { margin: 3px 4px 0; font-size: 11.5px; color: var(--sw-muted); }

.sw-msg.from-visitor .sw-attachment { color: var(--sw-on-accent); }

.sw-attachment, .sw-link-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--sw-accent-strong);
    font-weight: 600;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.sw-order {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--sw-radius);
    background: var(--sw-tint);
    min-width: 220px;
}

.sw-order-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 6px 0;
    font-size: 13px;
}

.sw-order-meta dt { color: var(--sw-muted); }
.sw-order-meta dd { margin: 0; }

.sw-claim {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--sw-radius);
    background: var(--sw-tint);
    color: var(--sw-ink);
    text-decoration: none;
    font-size: 13px;
}

.sw-pill {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--sw-tint);
    color: var(--sw-muted);
    font-size: 12px;
}

.sw-pill.is-open { background: var(--sw-accent-soft); color: var(--sw-accent-strong); }

.sw-prompt {
    padding: 12px 14px;
    border-top: 1px solid var(--sw-line);
    background: var(--sw-surface);
    max-height: 48%;
    overflow-y: auto;
}

.sw-prompt:empty { display: none; }

.sw-choices { display: flex; flex-direction: column; gap: 8px; }
.sw-done { display: flex; justify-content: center; }

.sw-answer { display: flex; flex-direction: column; gap: 6px; }

/* پاسخِ متنیِ مسیر: یک خطِ جمع‌وجور با دکمهٔ فرستادن در خودش (`inputControl`). */
.sw-field {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px;
    padding-inline-start: 14px;
    border: 1px solid var(--sw-line);
    border-radius: 24px;
    background: var(--sw-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sw-field:focus-within { border-color: var(--sw-accent); box-shadow: var(--sw-ring); }

.sw-field input, .sw-field textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    max-height: 112px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--sw-ink);
    resize: none;
    line-height: 1.6;
    font-size: 16px; /* زیرِ ۱۶ پیکسل، iOS صفحه را بزرگ می‌کند */
}

.sw-field input:focus, .sw-field textarea:focus { outline: none; box-shadow: none; }
.sw-field input::placeholder, .sw-field textarea::placeholder { color: var(--sw-muted); opacity: 1; }

.sw-field .sw-send {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--sw-accent-strong);
    color: var(--sw-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sw-field .sw-send:hover { background: color-mix(in srgb, var(--sw-accent-strong) 85%, #000); }

.sw-answer .sw-error:empty { display: none; }

.sw-composer textarea, .sw-rating textarea {
    flex: 1 1 200px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    color: var(--sw-ink);
    resize: vertical;
    font-size: 16px; /* زیرِ ۱۶ پیکسل، iOS صفحه را بزرگ می‌کند */
}

.sw-composer textarea:focus, .sw-rating textarea:focus {
    outline: none;
    border-color: var(--sw-accent);
    box-shadow: var(--sw-ring);
}


/* --- گفتگوی زنده ------------------------------------------------------------ */

.sw-chat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sw-line);
    font-size: 13px;
}

.sw-chat-info:empty { display: none; }
.sw-chat-state { font-weight: 600; }
.sw-ref { color: var(--sw-muted); font-size: 12.5px; }

.sw-typing {
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    font-size: 12px;
    color: var(--sw-muted);
    background: var(--sw-tint);
}

.sw-typing:not(:empty) { padding-block: 2px 6px; }

.sw-composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--sw-line);
    background: var(--sw-surface);
}

.sw-composer textarea { max-height: 140px; resize: none; }
.sw-composer .sw-icon-btn { color: var(--sw-muted); width: 44px; height: 44px; }
.sw-composer .sw-icon-btn:hover { color: var(--sw-accent-strong); background: var(--sw-tint); }
.sw-composer .sw-send { background: var(--sw-accent-strong); color: var(--sw-on-accent); }
.sw-composer .sw-send:hover { background: color-mix(in srgb, var(--sw-accent-strong) 85%, #000); color: var(--sw-on-accent); }

.sw-closed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--sw-line);
    background: var(--sw-surface);
}

.sw-closed-title { margin: 0; font-weight: 700; }

.sw-rating { display: flex; flex-direction: column; gap: 8px; }
.sw-rating fieldset { margin: 0; padding: 0; border: 0; }
.sw-rating legend { padding: 0; font-size: 14px; color: var(--sw-muted); }

/* ستاره‌ها از راست به چپِ نشانی ۵ تا ۱ هستند؛ با `row-reverse` بصری ۱ تا ۵
   از راست می‌آیند و «~» همهٔ ستاره‌های پایین‌تر از انتخاب را پر می‌کند. */
.sw-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.sw-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-stars label {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--sw-line);
    cursor: pointer;
    border-radius: 50%;
}

.sw-stars label .sw-icon { fill: currentColor; stroke: none; }
.sw-stars input:checked ~ label,
.sw-stars label:hover, .sw-stars label:hover ~ label { color: #f5a524; }
.sw-stars input:focus-visible + label { box-shadow: var(--sw-ring); }

/* --- موبایل ----------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .sw-root { inset-inline-end: 14px; inset-block-end: 14px; }
    .sw-root.is-open { inset: 0; }
    .sw-root.is-open .sw-bubble { display: none; }
    .sw-root.is-open .sw-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: 0;
    }
    .sw-header { padding-top: max(12px, env(safe-area-inset-top)); }
    .sw-composer, .sw-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .sw-panel { animation: none; }
    .sw-bubble, .sw-topic { transition: none; }
}