:root {
    color-scheme: light;
    --ink: #192b2d;
    --muted: #829092;
    --line: #edf0ec;
    --paper: #fff;
    --canvas: #f4f5f0;
    --teal: #285d57;
    --teal-dark: #173b43;
    --mint: #d8ede2;
    --coral: #e99072;
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

.notification-count {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #f7f8fa;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.app-nav-item.active .notification-count {
    border-color: #e4e6e8;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--canvas); }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #285d571f; outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow, .section-label { margin: 0; color: #829092; font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.auth-shell { display: grid; grid-template-columns: minmax(380px, 48%) 1fr; min-height: 100vh; background: #fff; }
.auth-card { display: flex; flex-direction: column; justify-content: center; width: min(100% - 64px, 420px); margin: 0 auto; padding: 44px 0; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 700 19px 'Segoe UI', sans-serif; letter-spacing: -.035em; text-decoration: none; }
.brand-auth { margin-bottom: 70px; }
.brand-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #00a884; color: #fff; }
.brand-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.brand-name { white-space: nowrap; }
.brand-name > span { color: #00a884; font-weight: 800; }
.auth-card .eyebrow { margin-bottom: 13px; color: var(--teal); }
.auth-card h1 { max-width: 390px; margin: 0; font: 700 clamp(32px, 4vw, 44px)/1.12 'Segoe UI', sans-serif; letter-spacing: -.055em; }
.auth-intro { margin: 16px 0 30px; color: #758486; font-size: 14px; line-height: 1.7; }
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form label { margin-top: 8px; font-size: 12px; font-weight: 700; }
.auth-form input { height: 48px; padding: 0 14px; border: 1px solid #e4e9e5; border-radius: 9px; outline: 0; background: #fff; transition: border .2s, box-shadow .2s; }
.auth-form input:focus, .search-box:focus-within, .composer #message-input:focus { border-color: #7aa69a; box-shadow: 0 0 0 3px #285d5714; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; cursor: pointer; font-weight: 700; }
.button-primary { background: var(--teal); color: white; }
.button-primary:hover { background: #204f49; }
.auth-submit { height: 49px; margin-top: 17px; }
.field-hint { margin: 0; color: var(--muted); font-size: 11px; }
.auth-switch { margin-top: 22px; color: #758486; font-size: 12px; }
.auth-switch a { margin-left: 5px; color: var(--teal); font-weight: 700; text-decoration: none; }
.form-error { margin: 0 0 15px; padding: 11px 13px; border-radius: 8px; background: #fff0eb; color: #a5432f; font-size: 12px; line-height: 1.5; }
.auth-art { position: relative; display: grid; overflow: hidden; place-items: center; background: #e8efdf; }
.auth-art::before { position: absolute; width: min(48vw, 610px); aspect-ratio: 1; border: 1px solid #285d5718; border-radius: 50%; content: ''; }
.auth-art::after { position: absolute; width: min(35vw, 440px); aspect-ratio: 1; border: 1px solid #285d5718; border-radius: 50%; content: ''; }
.art-orbit { position: absolute; width: min(25vw, 310px); aspect-ratio: 1; border-radius: 50%; background: #d5e5d4; }
.orbit-one { transform: translate(-100px, 80px); }
.orbit-two { width: min(16vw, 200px); transform: translate(115px, -115px); background: #f1dfc5; }
.art-note { position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 13px 17px 13px 12px; border: 1px solid #ffffffa8; border-radius: 13px; background: #ffffffde; box-shadow: 0 18px 55px #183e3014; font-size: 13px; }
.note-one { transform: translate(-66px, -20px); }
.note-two { transform: translate(35px, 57px); background: #d9eade; }
.avatar { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 13px 13px 13px 4px; background: #d8ede2; color: #30594e; font: 700 13px 'Segoe UI', sans-serif; }
.avatar-coral { background: #f7ded2; color: #995941; }
.avatar-lilac { background: #e7dff1; color: #6d5c83; }
.art-caption { position: absolute; bottom: 47px; display: flex; align-items: center; gap: 9px; color: #63756d; font-size: 12px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #73a786; box-shadow: 0 0 0 3px #73a78622; }

.messenger { display: grid; grid-template-columns: 350px minmax(0, 1fr); width: min(1200px, calc(100% - 48px)); height: min(790px, calc(100dvh - 64px)); min-height: 520px; margin: 32px auto; overflow: hidden; border: 1px solid #e8ebe5; border-radius: 18px; background: var(--paper); box-shadow: 0 24px 80px #243d3010; }
.sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.sidebar-header { display: flex; height: 76px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 23px; border-bottom: 1px solid var(--line); }
.profile-actions { display: flex; align-items: center; gap: 9px; }
.profile-name { max-width: 100px; overflow: hidden; color: #68787a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-actions form { margin: 0; }
.pwa-install-button { font-size: 18px; font-weight: 700; }
.pwa-status-bar { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 18px; border-bottom: 1px solid var(--line); color: #71817c; font-size: 10px; }
.pwa-status-bar .small-action { padding: 4px 8px; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #768587; cursor: pointer; }
.icon-button:hover { background: #f2f5f0; color: var(--ink); }
.icon-button svg, .search-box svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.profile-button { color: #91a29e; }
.profile-button svg { width: 17px; height: 17px; }
.profile-editor { display: grid; gap: 7px; }
.profile-avatar-editor { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-bottom: 4px; }
.profile-avatar-editor .field-hint { grid-column: 1 / -1; margin: 0; }
.profile-editor-avatar { width: 76px; height: 76px; font-size: 26px; }
.profile-editor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-form .dialog-submit { margin-top: 15px; }
.sidebar-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 28px 23px 19px; }
.sidebar-heading .eyebrow { margin-bottom: 7px; font-size: 9px; }
.sidebar-heading h1 { margin: 0; font: 700 25px 'Segoe UI', sans-serif; letter-spacing: -.05em; }
.contact-count { display: grid; min-width: 27px; height: 25px; place-items: center; margin-bottom: 2px; padding: 0 7px; border-radius: 9px; background: #eff4ef; color: #59756a; font-size: 11px; font-weight: 700; }
.search-box { display: flex; height: 41px; align-items: center; gap: 9px; margin: 0 20px 23px; padding: 0 11px; border: 1px solid #edf0ec; border-radius: 8px; color: #8b9998; transition: border .2s, box-shadow .2s; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.search-box input::placeholder { color: #9ba6a3; }
.search-box kbd { padding: 2px 5px; border: 1px solid #e7ebe6; border-radius: 4px; color: #9ba6a3; font: 10px 'Segoe UI', sans-serif; }
.section-label { margin: 0 23px 9px; font-size: 9px; }
.contact-list { flex: 1; overflow-y: auto; padding: 0 11px; }
.sidebar .status-section-heading { margin: 15px 16px 5px; color: #667781; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.sidebar .status-section-heading:not(:first-child) { padding-top: 13px; border-top: 1px solid #e9edef; }
.contact-item { display: flex; width: 100%; min-width: 0; align-items: center; gap: 11px; padding: 11px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background .15s; }
.contact-item:hover, .contact-item.selected { background: #f2f6f1; }
.status-list-item { min-height: 76px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 0; }
.status-list-item + .status-list-item { border-top: 1px solid #f0f2f0; }
.status-list-item:hover, .status-list-item.selected { background: #f5f7f6; }
.status-list-item > .status-avatar-ring { width: 54px; height: 54px; }
.status-list-item > .contact-detail { gap: 5px; }
.status-list-item .contact-name { color: #111b21; font-size: 14px; font-weight: 500; }
.status-list-item .contact-status { color: #667781; font-size: 12px; }
.status-list-item-unseen .contact-name { font-weight: 600; }
.status-preview { position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden; place-items: center; margin-left: auto; border: 1px solid #e8ece8; border-radius: 7px; background: #e9efea; color: #788982; }
.status-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.status-preview-unavailable { font-size: 10px; text-align: center; }
.status-preview-video { background: linear-gradient(135deg, #315b4b, #8aa797); color: #fff; }
.status-preview-video span { display: grid; width: 23px; height: 23px; place-items: center; padding-left: 2px; border-radius: 50%; background: #10231a99; font-size: 10px; }
.contact-avatar { width: 41px; height: 41px; overflow: hidden; border-radius: 50%; background: #e4eee4; color: #416358; }
.contact-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.status-avatar-ring { position: relative; display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--status-segments, conic-gradient(#25d366 0deg 360deg)); }
.status-contact-avatar { position: relative; width: 44px; height: 44px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #e4eee4; color: #416358; }
.status-contact-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.status-contact-avatar-viewed { color: #71817b; }
.status-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; }
.status-avatar-ring-own::after { position: absolute; right: -1px; bottom: -1px; display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #25d366; color: #fff; content: "+"; font-size: 15px; line-height: 1; }
.contact-item .status-video-avatar { background: linear-gradient(135deg, #15b86b, #39d98a); color: #fff; font-size: 15px; }
.contact-item[style*="--contact-index: 1"] .contact-avatar { background: #f7e3d7; color: #93634f; }
.contact-item[style*="--contact-index: 2"] .contact-avatar { background: #e9e1f1; color: #6a597f; }
.contact-item[style*="--contact-index: 3"] .contact-avatar { background: #e4eaf5; color: #4f6488; }
.contact-detail { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.contact-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.contact-status { overflow: hidden; color: #929e9b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.contact-badge { flex: 0 0 auto; padding: 4px 6px; border-radius: 6px; background: #eef4ef; color: #668173; font-size: 9px; font-weight: 700; }
.contact-arrow { color: #91a19a; font-size: 15px; opacity: 0; transition: opacity .15s; }
.contact-item:hover .contact-arrow { opacity: 1; }
.loading-state { padding: 10px 12px; color: #8b9998; font-size: 12px; line-height: 1.6; }
.space-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 0 16px 16px; padding: 4px; border-radius: 9px; background: #f3f5f1; }
.space-tab { min-width: 0; padding: 8px 3px; border: 0; border-radius: 7px; background: transparent; color: #7b8985; cursor: pointer; font-size: 10px; font-weight: 600; }
.space-tab:hover { color: var(--ink); }
.space-tab.active { background: #fff; color: var(--teal); box-shadow: 0 1px 4px #173b4312; }
.sidebar-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 22px 9px; }
.sidebar-tools .section-label { min-width: 0; margin: 0; font-size: 9px; }
.sidebar-history-toggle { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid #e5ece6; border-radius: 9px; background: #fff; color: #667781; cursor: pointer; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-align: left; }
.sidebar-history-toggle:hover, .sidebar-history-toggle[aria-expanded="true"] { border-color: #cbded2; background: #f5faf6; color: var(--teal); }
.sidebar-history-chevron { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.sidebar-history-toggle[aria-expanded="true"] .sidebar-history-chevron { transform: rotate(180deg); }
.notification-history-options { display: grid; gap: 8px; margin: 0 16px 12px; padding: 11px; border: 1px solid #e6ece7; border-radius: 10px; background: #f8faf8; }
.notification-history-options > .small-action { width: 100%; min-height: 38px; white-space: normal; }
.sidebar-notification-settings { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid #e6ece7; }
.sidebar-notification-settings .push-content-option { max-width: none; color: #586963; font-size: 11px; }
.sidebar-notification-settings .small-action { width: 100%; min-height: 38px; white-space: normal; }
.small-action { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #e5ece6; border-radius: 7px; background: #fff; color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 700; }
.small-action:hover { background: #f1f6f1; }
.chat-header > .small-action { margin-left: auto; }
#notification-preference-button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notification-preference-button[data-mode="muted"] { border-color: #e9d49c; background: #fff9e9; color: #8a6413; }
#notification-preference-button[data-mode="blocked"] { border-color: #efc0c0; background: #fff1f1; color: #a33838; }
.sidebar-footer { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 16px 22px; border-top: 1px solid var(--line); color: #829092; font-size: 10px; }

.chat-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fafbf8; }
.empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; text-align: center; }
.empty-illustration { position: relative; width: 170px; height: 135px; margin-bottom: 28px; }
.empty-sun { position: absolute; top: 18px; left: 44px; width: 82px; height: 82px; border-radius: 50%; background: #e9e7cb; }
.empty-sun::after { position: absolute; inset: 13px; border: 1px solid #8a9a7955; border-radius: 50%; content: ''; }
.empty-bubble { position: absolute; display: grid; width: 53px; height: 42px; place-items: center; border-radius: 15px 15px 15px 4px; background: var(--teal); color: #fff; font-size: 20px; }
.bubble-a { top: 4px; right: 8px; }
.bubble-b { bottom: 7px; left: 4px; background: #e9c2a7; color: #75543f; transform: rotate(-14deg); }
.empty-state .eyebrow { margin-bottom: 10px; color: #74897d; }
.empty-state h2 { margin: 0; font: 700 30px/1.16 'Segoe UI', sans-serif; letter-spacing: -.05em; }
.empty-state > p:last-child { margin: 13px 0 0; color: #899693; font-size: 12px; }
.active-chat { display: flex; height: 100%; flex-direction: column; }
.chat-header { display: flex; height: 76px; flex: 0 0 auto; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #fff; }
.back-button { display: none; }
.chat-avatar { width: 41px; height: 41px; }
.chat-title h2 { margin: 0 0 5px; font: 700 13px 'Segoe UI', sans-serif; }
.chat-title p { display: flex; align-items: center; gap: 7px; margin: 0; color: #879390; font-size: 10px; }
.chat-title .live-dot { width: 6px; height: 6px; }
.message-area { flex: 1; overflow-y: auto; padding: 27px clamp(17px, 5vw, 62px); }
.message-list { display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; gap: 12px; }
.message-row { display: flex; justify-content: flex-start; }
.message-row.own-message { justify-content: flex-end; }
.moderation-room-notice-row { justify-content: center; }
.moderation-room-notice { width: min(92%, 560px); padding: 11px 14px; border: 1px solid #f0d89d; border-radius: 12px; background: #fff8e8; color: #56471e; text-align: center; }
.moderation-room-notice strong { display: block; margin-bottom: 4px; color: #624c11; font-size: 12px; }
.moderation-room-notice p { margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.moderation-rules-link { margin-top: 7px; padding: 3px 6px; border: 0; background: transparent; color: #087a61; cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.moderation-review-request { display: block; max-width: 100%; margin: 9px auto 3px; padding: 8px 12px; border: 1px solid #b6d9cc; border-radius: 9px; background: #eaf6f0; color: #087a61; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; }
.moderation-review-request:disabled { border-color: #d5e2dc; background: #f1f5f2; color: #5c7067; cursor: default; }
.status-moderation-notice { width: min(88vw, 560px); padding: clamp(20px, 5vw, 34px); border: 1px solid #f0d89d; border-radius: 20px; background: #fff8e8; color: #56471e; text-align: center; }
.status-moderation-notice h2 { margin: 0 0 10px; color: #624c11; font-size: clamp(20px, 4vw, 28px); }
.status-moderation-notice p { margin: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.status-moderation-notice .moderation-rules-link { margin-top: 14px; font-size: 14px; }
.community-rules-dialog { width: min(620px, calc(100% - 28px)); }
.community-rules-dialog .dialog-card { gap: 14px; }
.community-rules-dialog h2 { margin: 0; color: #183d35; }
.community-rules-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: #41525a; font-size: 14px; line-height: 1.55; }
.community-rules-list li::marker { color: #008f72; font-weight: 800; }
.message-bubble { position: relative; max-width: min(76%, 470px); padding: 11px 14px 8px; border: 1px solid #edf0e9; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 3px 12px #21382c08; }
.own-message .message-bubble { border-color: #d8e9dd; border-radius: 14px 14px 4px 14px; background: #e2efe4; }
.message-row.message-actions-open .message-bubble { box-shadow: 0 5px 20px #152a2530; }
.message-bubble.has-reaction { padding-bottom: 14px; }
.message-reply-quote { display: flex; flex-direction: column; gap: 3px; margin: 0 0 7px; padding: 6px 8px; border-left: 3px solid #00a884; border-radius: 4px; background: #eef4f1; color: #54656f; font-size: 11px; }
.own-message .message-reply-quote { background: #c8eac7; }
.message-reply-quote strong { color: #008f72; font-size: 10px; }
.message-reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-bubble p { margin: 0; color: #304042; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-bubble p a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.message-bubble p a:hover { color: #204f49; }
.message-meta { display: block; margin-top: 5px; color: #8a9893; font-size: 9px; text-align: right; }
.message-actions { position: absolute; z-index: 6; bottom: calc(100% + 7px); left: 0; display: flex; width: max-content; max-width: min(310px, 86vw); flex-wrap: wrap; gap: 2px; padding: 5px; border: 1px solid #e7edef; border-radius: 12px; background: #fff; box-shadow: 0 5px 22px #0b141a2b; }
.own-message .message-actions { right: 0; left: auto; }
.message-actions[hidden] { display: none; }
.message-action-button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: #3b4b51; cursor: pointer; font-size: 11px; white-space: nowrap; }
.message-action-button:hover:not(:disabled), .message-action-button:focus-visible { background: #f0f2f5; color: #008f72; }
.message-action-button[data-message-operation^="delete"] { color: #c44545; }
.message-action-button:disabled { cursor: wait; opacity: .6; }
.message-like-count { position: absolute; right: 5px; bottom: -12px; padding: 2px 6px; border: 1px solid #e7edef; border-radius: 12px; background: #fff; color: #e14b61; font-size: 11px; line-height: 1.3; box-shadow: 0 1px 2px #0b141a18; }
.message-receipt { display: inline-block; margin-left: 5px; color: #87928d; font-size: 11px; font-weight: 800; letter-spacing: -3px; }
.message-receipt.is-read { color: #1687c9; }
.attachment-preview { display: flex; min-width: 0; flex-direction: column; gap: 7px; margin-top: 8px; }
.attachment-preview img { display: block; max-width: min(100%, 300px); max-height: 270px; border-radius: 9px; object-fit: contain; }
.attachment-preview video { display: block; width: min(100%, 320px); max-height: 260px; border-radius: 9px; background: #182825; }
.attachment-preview audio { display: block; width: min(100%, 300px); height: 40px; }
.attachment-album { width: min(100%, 420px); }
.attachment-preview .album-title { color: #6e817a; font-size: 10px; font-weight: 700; }
.attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.attachment-item { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; overflow: hidden; }
.attachment-grid .attachment-item { min-width: 0; padding: 6px; border: 1px solid #dce7df; border-radius: 9px; background: #ffffff9c; }
.attachment-grid .attachment-item img { width: 100%; height: 150px; }
.attachment-grid .attachment-item video { width: 100%; max-height: 180px; }
.attachment-grid .attachment-item audio { width: 100%; }
.attachment-document-mark { display: grid; width: 100%; min-height: 60px; place-items: center; border-radius: 7px; background: #edf2ed; color: var(--teal); font-size: 12px; font-weight: 800; }
.attachment-download { max-width: 320px; overflow: hidden; color: var(--teal); font-size: 10px; font-weight: 700; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.attachment-download:hover { text-decoration: underline; }
.chat-notice { min-height: 0; margin: 0; padding: 0 24px; color: #a5432f; font-size: 11px; }
.chat-notice:not(:empty) { padding-top: 8px; }
.chat-notice.is-progress, .dialog-error.is-progress { display: flex; flex-direction: column; gap: 6px; color: #54656f; }
.inline-progress-bar { position: relative; display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: #e3e9e6; }
.inline-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: #00a884; transition: width .2s ease; }
.inline-progress-bar.is-indeterminate > span { width: 40%; animation: inline-progress-slide 1.15s ease-in-out infinite; }
@keyframes inline-progress-slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.moderation-notifications { position: fixed; z-index: 1200; top: 18px; right: 18px; width: min(430px, calc(100vw - 36px)); pointer-events: none; }
.moderation-toast { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: start; gap: 12px; padding: 17px 15px; border: 1px solid #f1d29b; border-left: 4px solid #d98b1d; border-radius: 14px; background: #fffefa; color: #263238; box-shadow: 0 14px 40px #18252b2e; pointer-events: auto; animation: moderation-toast-in .24s ease-out both; }
.moderation-toast-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff0d2; color: #9a5b00; font-size: 21px; font-weight: 800; }
.moderation-toast-icon img, .notification-card-icon img, .notification-list-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.moderation-toast-copy { min-width: 0; }
.moderation-toast-copy h2 { margin: 1px 0 6px; color: #202c33; font-size: 14px; font-weight: 700; }
.moderation-toast-copy p { margin: 0 0 6px; color: #52616a; font-size: 12px; line-height: 1.5; }
.moderation-toast-copy p:last-of-type { margin-bottom: 0; }
.moderation-toast-enable { margin-top: 10px; padding: 6px 9px; border: 0; border-radius: 7px; background: #e7f5ec; color: #087c59; cursor: pointer; font-size: 11px; font-weight: 700; }
.moderation-toast-enable:hover { background: #d6eddf; }
.moderation-toast-dismiss { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #68767c; cursor: pointer; font-size: 22px; line-height: 1; }
.moderation-toast-dismiss:hover { background: #f1f3f4; color: #202c33; }
@keyframes moderation-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 720px) {
    .moderation-notifications { top: 10px; right: 10px; width: calc(100vw - 20px); }
    .moderation-toast { grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 9px; padding: 14px 12px; border-radius: 12px; }
    .moderation-toast-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .moderation-toast { animation: none; }
}
.composer { display: flex; height: 67px; flex: 0 0 auto; align-items: center; gap: 12px; margin: 0 24px 20px; padding: 0 9px 0 16px; border: 1px solid #e7ebe5; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px #203a2c08; }
.composer.has-reply { height: auto; min-height: 67px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.reply-composer-preview { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-left: 3px solid #00a884; border-radius: 5px; background: #f0f5f2; color: #54656f; font-size: 11px; }
.reply-composer-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-composer-cancel { flex: 0 0 auto; width: 25px; height: 25px; border: 0; border-radius: 50%; background: transparent; color: #667781; cursor: pointer; font-size: 18px; }
.composer #message-input { min-width: 0; flex: 1; height: 42px; padding: 0 5px; border: 1px solid transparent; border-radius: 7px; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.composer #message-input::placeholder { color: #9ba6a3; }
.composer-hint { color: #a1aaa6; font-size: 9px; white-space: nowrap; }
.attachment-button { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #72837d; cursor: pointer; }
.attachment-button:hover { background: #f1f5f0; color: var(--teal); }
.attachment-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.attachment-filename { max-width: 150px; overflow: hidden; color: #59756a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.clear-attachment { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 6px; background: #f2f5f0; color: #72837d; cursor: pointer; font-size: 15px; line-height: 1; }
.clear-attachment:hover { background: #fff0eb; color: #a5432f; }
.send-button { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 10px; background: var(--teal); color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.send-button:hover { background: #204f49; transform: translateY(-1px); }
.send-button:disabled { opacity: .65; cursor: wait; }
.send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.status-view { position: absolute; z-index: 5; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: #08110feF; }
.status-story { position: relative; width: min(100%, 480px); height: min(100%, 860px); min-height: 320px; overflow: hidden; border-radius: 12px; background: #101b19; box-shadow: 0 20px 70px #0008; }
.status-progress { position: absolute; z-index: 3; top: 10px; right: 12px; left: 12px; display: flex; height: 3px; gap: 3px; }
.status-progress-segment { min-width: 0; height: 100%; flex: 1; overflow: hidden; border-radius: 4px; background: #ffffff6b; }
.status-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.status-story-header { position: absolute; z-index: 3; top: 25px; right: 12px; left: 14px; display: flex; min-width: 0; align-items: center; gap: 10px; color: #fff; }
.status-story-avatar { width: 37px; height: 37px; border: 1px solid #ffffff80; border-radius: 50%; background: #ffffff30; color: #fff; }
.status-story-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.status-story-author { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.status-owner { width: auto; margin: 0; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.status-expiry { width: auto; margin: 0; color: #ffffffb3; font-size: 10px; }
.status-close { position: static; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #ffffff24; color: #fff; font-size: 22px; }
.status-close:hover { background: #ffffff40; }
.status-view-count { flex: 0 0 auto; margin: 0; padding: 6px 8px; border: 0; border-radius: 14px; background: #ffffff24; color: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; }
.status-view-count:hover, .status-view-count:focus-visible { outline: none; background: #ffffff40; }
.status-view-count:disabled { cursor: wait; opacity: .7; }
.status-notification-preference { max-width: 125px; overflow: hidden; text-overflow: ellipsis; }
.status-notification-preference[data-mode="muted"] { border-color: #e9d49c; color: #ffe4a3; }
.status-notification-preference[data-mode="blocked"] { border-color: #ef9a9a; color: #ffc1c1; }
.status-media { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #101b19; }
.status-media img, .status-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.status-media .status-admin-announcement { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 36px; color: #fff; background: linear-gradient(145deg, #075e54, #128c7e); font-size: clamp(22px, 4vw, 34px); font-weight: 650; line-height: 1.45; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.status-caption { position: absolute; z-index: 2; right: 0; bottom: 58px; left: 0; width: auto; margin: 0; padding: 50px 22px 14px; background: linear-gradient(transparent, #0009); color: #fff; font-size: 14px; line-height: 1.55; text-align: center; overflow-wrap: anywhere; }
.status-caption a, .status-admin-announcement a { position: relative; z-index: 3; color: #b9ffe0; text-decoration: underline; text-underline-offset: 2px; }
.status-view.admin-text-status .status-nav { pointer-events: none; }
.status-nav { position: absolute; z-index: 2; top: 72px; bottom: 72px; width: 35%; border: 0; background: transparent; cursor: pointer; }
.status-nav-previous { left: 0; }
.status-nav-next { right: 0; }
.status-action-bar { position: absolute; z-index: 4; right: 12px; bottom: 10px; left: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.status-action { min-height: 34px; padding: 7px 10px; border: 1px solid #ffffff60; border-radius: 20px; background: #101b19b8; color: #fff; cursor: pointer; font: inherit; font-size: 11px; text-decoration: none; white-space: nowrap; }
.status-action:hover { background: #ffffff35; }
.status-action-danger { border-color: #ff8a8a; background: #8c2525d9; }
.status-action-danger:hover { background: #a52d2d; }
.status-action[hidden] { display: none; }
.status-action:disabled { cursor: wait; opacity: .6; }
.status-comments-dialog,
.status-reply-dialog { width: min(520px, calc(100% - 28px)); }
.status-comments-dialog .dialog-card,
.status-reply-dialog .dialog-card { gap: 10px; }
.status-comments-list { display: flex; max-height: min(380px, 45dvh); flex-direction: column; gap: 8px; overflow-y: auto; }
.status-comment { padding: 9px 11px; border-radius: 9px; background: #f2f5f3; }
.status-comment-reply { margin-left: 24px; }
.status-comment > p { margin: 4px 0; color: #263238; font-size: 13px; overflow-wrap: anywhere; }
.status-comment-meta { display: flex; justify-content: space-between; color: #71817b; font-size: 10px; }
.status-comment-reply-button { padding: 0; border: 0; background: none; color: #008f72; cursor: pointer; font: inherit; font-weight: 700; }
.status-comment-form { display: flex; flex-direction: column; gap: 8px; }
.status-comment-form textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid #dfe6e2; border-radius: 8px; font: inherit; }
.status-reply-dialog textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid #dfe6e2; border-radius: 8px; font: inherit; }
.status-comment-form .dialog-submit { align-self: flex-end; margin-top: 0; }
.status-settings-picker { display: grid; gap: 7px; margin: 0; padding: 10px 12px; border: 1px solid #e7ebe5; border-radius: 9px; }
.status-settings-picker legend { padding: 0 4px; color: #54656f; font-size: 12px; font-weight: 700; }
.status-settings-picker label { display: flex; align-items: center; gap: 8px; color: #41525a; font-size: 12px; }
.status-settings-picker input { accent-color: #00a884; }
.channel-view-count { display: inline-block; margin-left: 7px; color: #71847c; font-size: 9px; white-space: nowrap; }
.channel-post-interactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #edf1ed; }
.channel-post-action { padding: 6px 9px; border: 1px solid #e5ebe6; border-radius: 999px; background: #fff; color: #596d66; cursor: pointer; font: 600 10px 'Segoe UI', sans-serif; }
.channel-post-action:hover, .channel-post-action.is-active { border-color: #b9d4c5; background: #edf7f0; color: #285d57; }
.channel-post-action:disabled { cursor: wait; opacity: .6; }
.channel-native-ad { display: grid; gap: 8px; width: min(100% - 32px, 520px); margin: 8px auto 14px; padding: 12px; border: 1px solid #e3eae4; border-radius: 12px; background: #fbfcfb; color: #53665d; }
.channel-native-ad-label { color: #718178; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.channel-native-ad > div { min-height: 1px; }
.channel-native-ad-attribution { justify-self: end; color: #718178; font-size: 9px; text-decoration: none; }
.channel-native-ad-attribution:hover, .channel-ad-revenue-attribution:hover { color: #087b58; text-decoration: underline; }
.channel-monetization-info { margin: -3px 0 4px; color: #718178; font-size: 11px; line-height: 1.5; }
.channel-payout-section { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid #dcebe2; border-radius: 14px; background: linear-gradient(140deg, #f5fbf7, #fff); }
.channel-payout-section h4 { margin: 0; color: #245445; font-size: 14px; }
.channel-payout-hint { margin: 0; color: #6d7d74; font-size: 11px; line-height: 1.55; }
.channel-payout-token { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; color: #53685d; font-size: 11px; }
.channel-payout-token code { padding: 5px 7px; border-radius: 6px; background: #e9f2ec; color: #254e3d; font-size: 11px; overflow-wrap: anywhere; }
.channel-payout-copy { padding: 5px 9px; border: 1px solid #cfdfd4; border-radius: 7px; background: #fff; color: #176b4f; cursor: pointer; font: 600 10px 'Segoe UI', sans-serif; }
.channel-payout-status { margin: 0; padding: 9px 11px; border-radius: 9px; background: #eff3f0; color: #586a60; font-size: 11px; line-height: 1.5; }
.channel-payout-status.pending { background: #fff5de; color: #825907; }
.channel-payout-status.approved { background: #e8f6ee; color: #14664e; }
.channel-payout-status.rejected { background: #fff0ef; color: #a23730; }
.channel-payout-form { display: grid; gap: 9px; }
.channel-payout-form label { display: grid; gap: 5px; color: #53685d; font-size: 11px; font-weight: 700; }
.channel-payout-form input:not([type=file]), .channel-payout-form select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #dce6df; border-radius: 8px; background: #fff; color: #20372d; font: 12px 'Segoe UI', sans-serif; }
.channel-payout-form input[type=file] { width: 100%; padding: 8px; border: 1px dashed #cbdacf; border-radius: 8px; background: #fff; color: #64776d; font-size: 10px; }
.channel-payout-form input:focus, .channel-payout-form select:focus { outline: 2px solid #16815e38; border-color: #7fb69b; }
.channel-payout-form .button { min-height: 42px; }
.channel-comments-card { gap: 10px; }
.channel-comments-list { display: flex; max-height: min(390px, 48dvh); flex-direction: column; gap: 8px; overflow-y: auto; }
.channel-comment { padding: 10px 12px; border-radius: 9px; background: #f3f6f3; }
.channel-comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #71817b; font-size: 10px; }
.channel-comment-meta strong { color: #344640; font-size: 11px; }
.channel-comment > p { margin: 6px 0 0; color: #263238; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.channel-comments-card form { display: grid; gap: 8px; }
.channel-comments-card form label { font-size: 11px; font-weight: 700; }
.channel-comments-card form .button { min-height: 40px; padding: 0 14px; }
.channel-comments-card .dialog-error { min-height: 0; margin: 0; color: #a5432f; font-size: 11px; }
.status-viewers-dialog { width: min(420px, calc(100% - 28px)); }
.status-viewers-dialog .dialog-card { gap: 10px; }
.status-viewers-dialog .dialog-card h2 { margin-bottom: 0; }
.status-viewers-dialog .field-hint { margin: 0; }
.status-viewers-list { display: flex; max-height: min(420px, 55dvh); flex-direction: column; overflow-y: auto; margin: 0 -12px; }
.status-viewer-item { display: flex; min-height: 64px; align-items: center; gap: 13px; padding: 8px 12px; border-bottom: 1px solid #eef0f2; }
.status-viewer-item .contact-avatar { width: 44px; height: 44px; flex: 0 0 auto; }
.feature-dialog { width: min(460px, calc(100% - 28px)); max-height: min(720px, calc(100% - 30px)); padding: 0; overflow: auto; border: 1px solid #e7ebe5; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 22px 80px #173b4330; }
.feature-dialog::backdrop { background: #12292370; backdrop-filter: blur(3px); }
.dialog-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 30px; }
.dialog-close { position: absolute; top: 12px; right: 15px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f2f5f0; color: #758486; cursor: pointer; font-size: 22px; line-height: 1; }
.dialog-card .eyebrow { margin-bottom: 2px; color: var(--teal); }
.dialog-card h2 { margin: 0 0 8px; font: 700 24px/1.2 'Segoe UI', sans-serif; letter-spacing: -.04em; }
.dialog-card > label, .member-picker legend { margin-top: 5px; font-size: 11px; font-weight: 700; }
.dialog-card > input:not([type=file]), .dialog-card textarea { width: 100%; padding: 11px 12px; border: 1px solid #e4e9e5; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; resize: vertical; }
.dialog-card > input:focus, .dialog-card textarea:focus { border-color: #7aa69a; box-shadow: 0 0 0 3px #285d5714; }
.dialog-card input[type=file] { width: 100%; padding: 10px; border: 1px dashed #cfdbd2; border-radius: 8px; color: #63736d; font-size: 11px; }
.dialog-card .field-hint { font-size: 10px; line-height: 1.5; }
.member-picker { min-width: 0; max-height: 195px; margin: 6px 0 0; padding: 9px; overflow: auto; border: 1px solid #e7ebe5; border-radius: 9px; }
.member-picker legend { padding: 0 5px; }
.member-option { display: flex; align-items: center; gap: 9px; padding: 8px 4px; color: #4f6260; cursor: pointer; font-size: 12px; }
.member-option + .member-option { border-top: 1px solid #f0f2ee; }
.member-option input { accent-color: var(--teal); }
.group-info-card { gap: 12px; }
.group-info-meta { margin: 0 0 3px; color: #7c8b87; font-size: 11px; }
.group-info-card form { display: grid; gap: 7px; }
.group-info-card form label { margin-top: 3px; font-size: 11px; font-weight: 700; }
.group-info-card form input { width: 100%; padding: 10px 11px; border: 1px solid #e4e9e5; border-radius: 8px; outline: 0; font-size: 12px; }
.group-avatar-editor { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #edf0ec; border-radius: 12px; background: #f8faf8; }
.group-avatar-editor > div { display: grid; justify-items: start; gap: 5px; }
.group-avatar-editor strong { color: #344640; font-size: 12px; }
.group-avatar-editor .field-hint { margin: 0; }
.group-avatar-preview { width: 66px; height: 66px; overflow: hidden; border-radius: 50%; font-size: 21px; }
.group-avatar-preview img, .chat-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.group-avatar-pick { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 10px; font-size: 10px; }
.group-permissions-form { padding: 12px; border: 1px solid #edf0ec; border-radius: 12px; background: #f8faf8; }
.group-permissions-form h3 { margin: 0 0 3px; font-size: 12px; }
.group-info-card .group-permissions-form label { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #53645e; font-size: 11px; font-weight: 500; line-height: 1.4; }
.group-permissions-form input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; accent-color: var(--teal); }
.group-permissions-form .field-hint { margin: 4px 0 0; }
.group-members-section, .group-invite-section { padding-top: 13px; border-top: 1px solid var(--line); }
.group-bans-section { padding-top: 13px; border-top: 1px solid var(--line); }
.group-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.group-members-heading h3, .group-invite-section h3 { margin: 0; font-size: 12px; }
.group-members-heading span { color: #879390; font-size: 10px; }
.group-members-list { display: flex; max-height: 230px; flex-direction: column; gap: 7px; margin-top: 10px; overflow-y: auto; }
.group-member-row { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #edf0ec; border-radius: 9px; }
.group-member-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 11px; }
.group-member-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.group-member-identity { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.group-member-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.group-member-identity span { color: #8b9996; font-size: 9px; }
.group-member-controls { display: flex; align-items: center; gap: 6px; }
.group-role-select { max-width: 105px; padding: 6px; border: 1px solid #e2e8e3; border-radius: 6px; background: #fff; color: #596b66; font-size: 9px; }
.group-remove-button, .group-ban-button, .group-unban-button { padding: 6px 7px; border: 0; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 700; }
.group-remove-button { background: #fff0eb; color: #a5432f; }
.group-ban-button { background: #ffe1e1; color: #9c2e2e; }
.group-unban-button { background: #e7f3eb; color: #287149; }
.group-invite-section > p { margin: 5px 0 9px; color: #879390; font-size: 10px; }
.group-invite-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.group-invite-actions input { min-width: 0; padding: 9px 10px; border: 1px solid #e4e9e5; border-radius: 7px; outline: 0; color: #5e706b; font-size: 9px; }
.dialog-error { min-height: 0; margin: 0; color: #a5432f; font-size: 11px; }
.dialog-error:not(:empty) { padding: 8px; border-radius: 7px; background: #fff0eb; }
.dialog-submit { min-height: 43px; margin-top: 5px; }
.dialog-submit:disabled { opacity: .6; cursor: wait; }

@media (max-width: 960px) {
    .messenger { grid-template-columns: 310px minmax(0, 1fr); width: calc(100% - 28px); height: calc(100dvh - 28px); margin: 14px auto; }
    .sidebar-header, .chat-header { height: 68px; }
    .sidebar-heading { padding-top: 21px; }
    .message-area { padding-right: 24px; padding-left: 24px; }
    .composer { margin-right: 18px; margin-left: 18px; }
    .message-bubble { max-width: 82%; }
}

.notification-center {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #f0f2f5;
}

.notification-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px clamp(20px, 5vw, 64px);
    border-bottom: 1px solid #e1e5e8;
    background: #fff;
}

.notification-center-header h2 {
    margin: 4px 0 6px;
    color: #111b21;
    font-size: clamp(22px, 3vw, 30px);
}

.notification-center-header p:last-child {
    margin: 0;
    color: #667781;
    font-size: 14px;
}

.notification-center-actions {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.notification-action-message {
    margin: 0;
    color: #a5432f;
    font-size: 12px;
}

.notification-feed {
    display: grid;
    width: min(850px, 100%);
    align-content: start;
    gap: 10px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 48px) 40px;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid #e3e7e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px #15232b0c;
}

.notification-card.is-unread {
    border-color: #b9ded6;
    background: #f2fbf8;
}
.notification-card.is-admin-notification { border-color: #b7dfc9; background: #f0faf4; }

.notification-card-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.notification-card-content {
    min-width: 0;
    flex: 1;
}

.notification-card-content h3 {
    margin: 0 0 5px;
    color: #111b21;
    font-size: 15px;
}

.notification-card-content p {
    margin: 0 0 9px;
    color: #41525a;
    font-size: 14px;
    line-height: 1.5;
}
.notification-card-content a { color: #087e62; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.notification-card-content time {
    color: #667781;
    font-size: 12px;
}

.notification-read-button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: #e5f3ef;
    color: #008f72;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.notification-read-button,
.notification-delete-button {
    min-height: 38px;
}

.notification-delete-button {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: #fff0eb;
    color: #a5432f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.notification-empty {
    margin: 0;
    padding: 36px 20px;
    border: 1px dashed #cbd3d7;
    border-radius: 14px;
    color: #667781;
    text-align: center;
}

.notification-list-message:empty {
    display: none;
}

.notification-list-message:not(:empty) {
    margin: 6px 0;
    color: #a5432f;
    font-size: 12px;
    line-height: 1.45;
}

.notification-list-item {
    display: grid;
    gap: 8px;
    padding: 13px 15px;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
}

.notification-list-item.is-unread {
    background: #f2fbf8;
}

.notification-list-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.notification-list-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.notification-card-icon, .notification-list-icon { overflow: hidden; }

.notification-list-heading h2 {
    min-width: 0;
    margin: 0;
    color: #111b21;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notification-list-item > p {
    margin: 0;
    color: #41525a;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.notification-list-item > p a {
    color: #087e62;
    overflow-wrap: anywhere;
}

.notification-list-item time {
    color: #667781;
    font-size: 11px;
}

.notification-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.notification-list-actions button {
    min-height: 38px;
    flex: 1 1 auto;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: #e5f3ef;
    color: #008f72;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.notification-list-actions button:last-child {
    background: #fff0eb;
    color: #a5432f;
}

.notification-list-actions button:disabled {
    cursor: wait;
    opacity: .6;
}

@media (max-width: 720px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-card { width: min(100% - 42px, 420px); padding: 30px 0; }
    .brand-auth { margin-bottom: 48px; }
    .auth-art { display: none; }
    .messenger { position: relative; display: block; width: 100%; height: 100dvh; min-height: 480px; margin: 0; border: 0; border-radius: 0; }
    .sidebar { position: absolute; z-index: 2; inset: 0; border: 0; }
    .sidebar.mobile-hidden { display: none; }
    .chat-panel { position: absolute; inset: 0; }
    .back-button { display: grid; flex: 0 0 auto; margin-left: -10px; }
    .chat-header { height: 68px; padding: 0 16px; }
    .chat-avatar { width: 38px; height: 38px; }
    .chat-title { min-width: 0; }
    .chat-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .message-area { padding: 20px 16px; }
    .message-list { gap: 10px; }
    .message-bubble { max-width: 88%; padding: 10px 12px 7px; }
    .composer { min-height: 67px; margin: 0 12px 12px; padding-left: 12px; }
    .composer-hint { display: none; }
    .attachment-filename { max-width: 74px; }
    .sidebar-header { padding: 0 19px; }
    .sidebar-heading { padding: 22px 19px 15px; }
    .space-tabs { margin-right: 12px; margin-left: 12px; }
    .space-tab { font-size: 9px; }
    .sidebar-tools { margin-right: 17px; margin-left: 19px; }
    .dialog-card { padding: 27px 21px 21px; }
    .status-view { padding: 0; }
    .status-story { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
    .status-media { height: 100%; }
    .status-nav { width: 24%; }
    .status-nav:focus-visible { outline-width: 2px; }
}

@media (max-width: 420px) {
    .auth-card { width: min(100% - 32px, 420px); }
    .auth-card h1 { font-size: 33px; }
    .chat-header { gap: 8px; padding-right: 10px; padding-left: 10px; }
    .chat-header .small-action { padding: 7px; }
    #notification-preference-button { max-width: 92px; font-size: 9px; }
    .message-area { padding-right: 10px; padding-left: 10px; }
    .message-bubble { max-width: 92%; }
    .composer { gap: 7px; margin-right: 8px; margin-left: 8px; }
    .attachment-filename { max-width: 48px; }
    .attachment-grid { grid-template-columns: 1fr; }
    .attachment-grid .attachment-item img { height: 190px; }
    .dialog-card { gap: 7px; }
    .feature-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
}

@media (max-height: 640px) and (max-width: 720px) {
    .sidebar-header { height: 62px; }
    .sidebar-heading { padding-top: 15px; padding-bottom: 11px; }
    .search-box { margin-bottom: 13px; }
    .sidebar-footer { padding-top: 10px; padding-bottom: 10px; }
    .chat-header { height: 60px; }
    .composer { min-height: 58px; margin-bottom: 8px; }
    .message-area { padding-top: 12px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.sidebar {
    border-right-color: #dfe3e5;
}

.sidebar-header {
    height: 68px;
    padding: 0 18px;
    border-bottom: 0;
    background: #f0f2f5;
}

.sidebar .brand {
    color: #41525a;
}

.sidebar .brand-mark {
    border-radius: 50%;
    background: #00a884;
}

.sidebar .brand {
    gap: 7px;
    font-size: 16px;
}

.sidebar .brand-mark {
    width: 28px;
    height: 28px;
}

.sidebar .brand-mark svg {
    width: 19px;
    height: 19px;
}

.profile-actions {
    gap: 6px;
}

.profile-name {
    max-width: 115px;
    color: #54656f;
    font-size: 12px;
}

.icon-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #54656f;
}

.icon-button:hover {
    background: #e4e6e8;
    color: #374248;
}

.sidebar-heading {
    padding: 20px 20px 14px;
}

.sidebar-heading .eyebrow {
    display: none;
}

.sidebar-heading h1 {
    color: #111b21;
    font: 700 24px 'Segoe UI', sans-serif;
    letter-spacing: -.04em;
}

.contact-count {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d9fdd3;
    color: #008f72;
}

.space-tabs {
    display: flex;
    gap: 8px;
    margin: 0 16px 14px;
    padding: 0;
    overflow-x: auto;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
}

.space-tabs::-webkit-scrollbar {
    display: none;
}

.space-tab {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #e9edef;
    border-radius: 16px;
    background: #fff;
    color: #54656f;
    font-size: 11px;
    font-weight: 500;
}

.space-tab:hover {
    background: #f5f6f6;
    color: #111b21;
}

.space-tab.active {
    border-color: transparent;
    background: #d9fdd3;
    color: #008f72;
    box-shadow: none;
}

.search-box {
    height: 36px;
    margin: 0 12px 13px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #f0f2f5;
}

.search-box:focus-within {
    border: 0;
    box-shadow: inset 0 0 0 1px #00a884;
}

.search-box input {
    font-size: 12px;
}

.search-box kbd {
    display: none;
}

.sidebar-tools {
    margin: 0 18px 7px;
}

.sidebar-tools .section-label,
.section-label {
    color: #667781;
    font-size: 9px;
    letter-spacing: .1em;
}

.sidebar .small-action {
    padding: 7px 10px;
    border: 0;
    border-radius: 18px;
    background: #d9fdd3;
    color: #008f72;
}

.sidebar .small-action:hover {
    background: #c9f5c1;
}

.contact-list {
    padding: 0;
}

.contact-item {
    min-height: 72px;
    gap: 13px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 0;
}

.contact-item:hover,
.contact-item.selected {
    background: #f5f6f6;
}

.contact-item.selected {
    background: #f0f2f5;
}

.contact-avatar {
    width: 49px;
    height: 49px;
    background: #dfe5e7;
    color: #54656f;
}

.status-contact-avatar {
    width: 49px;
    height: 49px;
}

.contact-detail {
    gap: 5px;
}

.contact-name {
    color: #111b21;
    font-size: 14px;
    font-weight: 500;
}

.contact-status {
    color: #667781;
    font-size: 12px;
}

.contact-badge {
    border-radius: 12px;
    background: #d9fdd3;
    color: #008f72;
    font-size: 10px;
}

.contact-arrow {
    color: #667781;
}

.loading-state {
    padding: 12px 16px;
    color: #667781;
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 0;
    background: #f7f8fa;
    color: #667781;
}

@media (max-width: 720px) {
    .sidebar-header {
        padding: 0 19px;
    }

    .sidebar-heading {
        padding: 18px 19px 14px;
    }

    .space-tabs {
        margin-right: 12px;
        margin-left: 12px;
    }

    .space-tab {
        font-size: 10px;
    }

    .sidebar-tools {
        margin-right: 17px;
        margin-left: 19px;
    }

    .contact-item {
        padding-right: 16px;
        padding-left: 16px;
    }
}

body:has(.messenger) {
    background: #fff;
}

.messenger {
    grid-template-columns: 68px clamp(320px, 30vw, 400px) minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-nav {
    z-index: 3;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 7px;
    border-right: 1px solid #e9edef;
    background: #f7f8fa;
}

.app-nav-item {
    position: relative;
    display: flex;
    width: 52px;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667781;
    cursor: pointer;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
}

.app-nav-item svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-nav-item:hover {
    background: #e9edef;
    color: #111b21;
}

.app-nav-item.active {
    background: #e4e6e8;
    color: #008f72;
    font-weight: 700;
}

.sidebar {
    grid-column: 2;
    grid-row: 1;
    border-right-color: #dfe3e5;
}

.chat-panel {
    grid-column: 3;
    grid-row: 1;
}

.sidebar-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#status-settings-button {
    width: 34px;
    height: 34px;
    margin-bottom: 1px;
    background: #f0f2f5;
}

#status-settings-button:hover {
    background: #e4e6e8;
}

#status-settings-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.new-chat-button {
    width: 36px;
    height: 36px;
    color: #54656f;
}

.new-chat-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.call-action {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-left: auto;
    color: #54656f;
}

.call-action + .call-action {
    margin-left: 0;
}

.call-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.call-action:hover {
    background: #e4e6e8;
    color: #008f72;
}

.chat-header > .small-action {
    margin-left: 0;
}

.chat-options-menu {
    position: relative;
    flex: 0 0 auto;
}

.chat-options-trigger {
    width: 38px;
    height: 38px;
    cursor: pointer;
    list-style: none;
}

.chat-options-trigger::-webkit-details-marker {
    display: none;
}

.chat-options-trigger:hover,
.chat-options-menu[open] > .chat-options-trigger {
    background: #e4e6e8;
    color: #008f72;
}

.chat-options-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    width: min(260px, calc(100vw - 24px));
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid #e9edef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 28px #0b141a24;
    transform-origin: top right;
    animation: chat-options-drop-in 160ms ease-out both;
}

@keyframes chat-options-drop-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scaleY(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-options-list {
        animation: none;
    }
}

.chat-options-list .small-action {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    color: #3b4b51;
    font-size: 13px;
    text-align: left;
}

.chat-options-list .small-action:hover {
    background: #f0f2f5;
    color: #008f72;
}

.chat-options-list #notification-preference-button {
    max-width: none;
}

.channel-requests-button {
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 0;
    border-radius: 18px;
    background: #e8f3ff;
    color: #168acd;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, color .15s;
}

.channel-requests-button:hover {
    background: #d9ebfb;
}

.channel-requests-button.has-pending {
    background: #168acd;
    color: #fff;
}

.channel-requests-button.has-pending:hover {
    background: #087bbd;
}

.channel-requests-count {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 5px;
    border-radius: 10px;
    background: #d7eaff;
    color: #147bb4;
    font-size: 11px;
    font-weight: 700;
}

.channel-requests-button.has-pending .channel-requests-count {
    background: #fff;
    color: #087bbd;
}

@media (max-width: 420px) {
    .channel-requests-button > span:first-child {
        display: none;
    }

    .channel-requests-button {
        width: 36px;
        min-width: 36px;
        justify-content: center;
        padding: 6px;
    }
}

.chat-title {
    min-width: 0;
    flex: 1 1 auto;
}

.call-dialog {
    width: min(480px, calc(100% - 28px));
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #f0f2f5;
}

.call-dialog::backdrop {
    background: #101b2180;
    backdrop-filter: blur(4px);
}

.call-card {
    display: flex;
    min-height: 440px;
    flex-direction: column;
    padding: 22px;
}

.call-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.call-dialog-header .eyebrow {
    margin: 0 0 6px;
    color: #008f72;
}

.call-dialog-header h2 {
    margin: 0;
    color: #111b21;
    font-size: 20px;
    font-weight: 600;
}

.call-state {
    min-height: 18px;
    margin: 6px 0 0;
    color: #667781;
    font-size: 12px;
}

.call-video-stage {
    position: relative;
    display: grid;
    min-height: 260px;
    flex: 1;
    place-items: center;
    margin: 18px 0;
    overflow: hidden;
    border-radius: 14px;
    background: #dfe5e7;
}

.remote-video {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.local-video {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 100px;
    height: 140px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #263238;
    object-fit: cover;
}

.call-avatar {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border-radius: 50%;
    background: #00a884;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
}

.remote-call-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.call-controls,
.incoming-call-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-control {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #dfe5e7;
    color: #263238;
    cursor: pointer;
}

.call-control svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.call-control.is-muted {
    background: #fff;
    color: #d93025;
}

.hangup-control {
    background: #e53935;
    color: #fff;
    transform: rotate(135deg);
}

.hangup-control:hover {
    background: #c62828;
}

.incoming-call-actions .button {
    min-width: 120px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 24px;
}

.decline-call-button {
    border: 0;
    background: #e53935;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.decline-call-button:hover {
    background: #c62828;
}

@media (max-width: 720px) {
    .messenger {
        display: block;
    }

    .app-nav {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 68px;
        flex-direction: row;
        justify-content: space-around;
        gap: 0;
        padding: 5px 6px max(5px, env(safe-area-inset-bottom));
        border-top: 1px solid #e9edef;
        border-right: 0;
        background: #f7f8fa;
    }

    .app-nav-item {
        width: min(14.285%, 82px);
        min-height: 52px;
        border-radius: 14px;
        font-size: 9px;
    }

    .sidebar {
        inset: 0 0 68px;
        border-right: 0;
    }

    .chat-panel {
        inset: 0;
    }

    .notification-center-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 18px 16px;
    }

    .notification-center-header > div:first-child {
        min-width: 0;
    }

    .notification-center-header p:last-child {
        font-size: 13px;
        line-height: 1.45;
    }

    .notification-center-actions {
        width: 100%;
        justify-items: stretch;
    }

    .notification-center-actions .small-action {
        min-height: 42px;
    }

    .notification-card {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 14px;
    }

    .notification-card-content h3,
    .notification-card-content p {
        overflow-wrap: anywhere;
    }

    .notification-feed {
        width: 100%;
        gap: 9px;
        padding: 14px 12px 20px;
    }

    .notification-read-button {
        margin-left: 52px;
        min-height: 40px;
    }

    .notification-center {
        bottom: 68px;
    }

    .messenger:has(.sidebar.mobile-hidden) .app-nav {
        display: none;
    }

    .call-card {
        min-height: min(440px, calc(100dvh - 80px));
        padding: 18px;
    }

    .call-video-stage {
        min-height: 220px;
    }

    .remote-video {
        min-height: 220px;
    }
}

.messenger.game-space {
    grid-template-columns: 68px minmax(0, 1fr);
}

.messenger.game-space .sidebar {
    display: none;
}

.messenger.game-space .chat-panel {
    grid-column: 2;
}

.sidebar-header > .pwa-install-button {
    display: inline-flex;
    width: auto;
    min-width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #cfe4db;
    border-radius: 10px;
    background: #e8f5ee;
    color: #087a61;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    transition: background .18s ease, transform .18s ease;
}

.sidebar-header > .pwa-install-button:hover {
    transform: translateY(-1px);
    background: #d9eee3;
}

.sidebar-header > .pwa-install-button svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.sidebar-header > .brand {
    min-width: 0;
}

.sidebar-header > .brand .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wheel-reward-banner {
    position: relative;
    display: flex;
    width: min(100%, 560px);
    min-height: 92px;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 7vw, 48px);
    overflow: hidden;
    padding: 13px 20px;
    border: 1px solid #e6ce80;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 0%, #fff8d8, transparent 74%),
        linear-gradient(115deg, #fffdf1, #f8f1d7 48%, #fffdf1);
    box-shadow: 0 12px 30px #9d79231c, inset 0 1px 0 #fff;
    text-align: center;
}

.wheel-reward-banner::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, #ffffff90 48%, transparent 67%);
    content: "";
    pointer-events: none;
    animation: wheel-reward-shine 5s ease-in-out infinite;
}

.wheel-reward-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
}

.wheel-reward-caption {
    color: #806323;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
}

.wheel-reward-copy strong {
    color: #174d3d;
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.05;
    text-shadow: 0 2px 0 #fff;
    animation: wheel-reward-pop 2.8s ease-in-out infinite;
}

.wheel-reward-coin {
    position: relative;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 2px solid #d0a93e;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff5b9, #e9bc49 65%, #c68d20);
    box-shadow: 0 4px 10px #6a501c38, inset 0 0 0 2px #fff4c6a8;
    color: #866014;
    font-size: 21px;
    font-weight: 900;
    animation: wheel-reward-coin-float 2.6s ease-in-out infinite;
}

.wheel-reward-coin-right {
    animation-delay: -.9s;
}

@keyframes wheel-reward-shine {
    0%, 66%, 100% { transform: translateX(-115%); }
    84% { transform: translateX(115%); }
}

@keyframes wheel-reward-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

@keyframes wheel-reward-coin-float {
    0%, 100% { transform: translateY(2px) rotate(-8deg); }
    50% { transform: translateY(-4px) rotate(8deg); }
}

@media (max-width: 960px) {
    .sidebar-header {
        gap: 6px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .sidebar-header > .pwa-install-button {
        width: 36px;
        padding: 0;
    }

    .sidebar-header > .pwa-install-button span {
        display: none;
    }

    .sidebar-header > .brand {
        gap: 6px;
        font-size: 14px;
    }

    .profile-actions {
        min-width: 0;
        gap: 4px;
    }

    .profile-name {
        max-width: 58px;
    }

    .profile-actions .icon-button {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 420px) {
    .wheel-reward-banner {
        min-height: 82px;
        gap: 16px;
        padding: 10px 12px;
    }

    .wheel-reward-coin {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 18px;
    }

    .wheel-reward-caption {
        font-size: 9px;
    }

    .wheel-reward-copy strong {
        font-size: clamp(23px, 7vw, 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-header > .pwa-install-button,
    .wheel-reward-banner::after,
    .wheel-reward-copy strong,
    .wheel-reward-coin {
        animation: none;
        transition: none;
    }
}

.wheel-game {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow-y: auto;
    padding: clamp(18px, 3vh, 34px) 18px 28px;
    background:
        radial-gradient(ellipse at 50% 34%, #fff7df 0, transparent 32%),
        radial-gradient(ellipse at 90% 0%, #d4f4e8 0, transparent 38%),
        linear-gradient(145deg, #f5faf7, #e8f1ec);
}

.wheel-game-content {
    display: grid;
    width: min(100%, 900px);
    justify-items: center;
    gap: 14px;
    margin: 0 auto;
}

.wheel-game-header {
    text-align: center;
}

.wheel-game-header .eyebrow {
    margin: 0 0 5px;
    color: #008f72;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.wheel-game-header h1 {
    margin: 0;
    color: #173b35;
    font-size: clamp(25px, 4vw, 36px);
    letter-spacing: -.04em;
}

.wheel-game-header > p:last-child {
    max-width: 620px;
    margin: 6px auto 0;
    color: #667781;
    font-size: 14px;
}

.wheel-rules-button {
    margin-top: 10px;
    padding: 5px 9px;
    border: 0;
    background: transparent;
    color: #087a61;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wheel-rules-dialog {
    width: min(620px, calc(100% - 28px));
}

.wheel-rules-card {
    gap: 12px;
}

.wheel-rules-card ol {
    display: grid;
    gap: 11px;
    margin: 0;
    padding-left: 23px;
    color: #41525a;
    font-size: 14px;
    line-height: 1.55;
}

.wheel-rules-card li::marker {
    color: #008f72;
    font-weight: 800;
}

.wheel-game-status {
    display: flex;
    width: min(100%, 560px);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    border: 1px solid #d7e8dd;
    border-radius: 14px;
    background: #ffffffd9;
    color: #31554a;
    font-size: 14px;
    font-weight: 750;
}

.wheel-stage {
    position: relative;
    width: min(78vw, 540px, 52dvh);
    aspect-ratio: 1;
    padding: 7px;
    border: 5px solid #d6b35f;
    border-radius: 50%;
    background: #102f35;
    box-shadow: 0 17px 48px #173b3530, inset 0 0 0 3px #fff4ce;
}

.wheel-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 50%;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 4.5s cubic-bezier(.12, .76, .12, 1);
    filter: drop-shadow(0 4px 8px #071c2080);
}

.wheel-number-label.is-winner {
    fill: #ffe66d !important;
    stroke: #332100 !important;
    stroke-width: 6 !important;
    animation: wheel-number-sparkle .8s ease-in-out 6;
}

@keyframes wheel-number-sparkle {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 7px #fff2a8);
    }
    45% {
        opacity: .38;
        filter: drop-shadow(0 0 1px #fff2a8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-svg {
        transition-duration: .01ms;
    }

    .wheel-number-label.is-winner {
        animation: none;
        filter: drop-shadow(0 0 7px #fff2a8);
    }
}

.wheel-pointer {
    position: absolute;
    z-index: 1;
    top: -9px;
    left: 50%;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-top: 0;
    border-bottom: 54px solid #f1c45d;
    filter: drop-shadow(0 4px 2px #102f3566);
    transform: translateX(-50%);
}

.wheel-pointer::after {
    position: absolute;
    top: 5px;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff8e8;
    content: '';
}

.wheel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wheel-controls label {
    color: #41525a;
    font-size: 14px;
    font-weight: 700;
}

.wheel-controls select {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #c7d9ce;
    border-radius: 11px;
    background: #fff;
    color: #173b35;
    font: inherit;
}

.wheel-spin-button {
    min-height: 44px;
    padding: 9px 19px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #008f72, #126b4c);
    box-shadow: 0 7px 18px #126b4c30;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.wheel-spin-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.wheel-game-message {
    min-height: 24px;
    margin: 0;
    color: #31554a;
    font-size: 14px;
    font-weight: 650;
    text-align: center;
}

.wheel-history {
    width: min(100%, 560px);
    padding: 14px 17px;
    border: 1px solid #e1e9e4;
    border-radius: 15px;
    background: #ffffffd9;
}

.wheel-history h2 {
    margin: 0 0 7px;
    color: #41525a;
    font-size: 15px;
}

.wheel-history ol {
    display: grid;
    gap: 5px;
    max-height: 115px;
    margin: 0;
    padding-left: 22px;
    overflow-y: auto;
    color: #667781;
    font-size: 13px;
}

.wheel-history li.won {
    color: #008f72;
    font-weight: 750;
}

@media (max-width: 720px) {
    .messenger.game-space {
        display: block;
    }

    .messenger.game-space .chat-panel {
        inset: 0;
    }

    .wheel-game {
        bottom: 68px;
        padding: 13px 12px 18px;
    }

    .wheel-game-content {
        gap: 10px;
    }

    .wheel-game-header > p:last-child {
        font-size: 12px;
    }

    .wheel-game-status {
        padding: 8px 10px;
        font-size: 12px;
    }

    .wheel-stage {
        width: min(78vw, 420px, 42dvh);
    }

    .wheel-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .wheel-controls label {
        flex-basis: 100%;
        text-align: center;
    }

    .wheel-spin-button {
        flex: 1 1 170px;
    }

    .wheel-game-message {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .call-action {
        width: 34px;
        height: 34px;
    }

    .call-card {
        padding: 14px;
    }

    .call-video-stage {
        margin: 12px 0;
    }
}

@media (min-width: 721px) {
    .messenger {
        grid-template-columns: 68px clamp(320px, 30vw, 400px) minmax(0, 1fr);
    }
}

.channel-settings-dialog {
    width: min(1040px, calc(100% - 36px));
    max-width: 1040px;
    max-height: min(92dvh, 980px);
    border: 1px solid #dfe9e2;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 8% 0%, #e9f5ed 0, transparent 34%),
        #f5f8f5;
    box-shadow: 0 32px 100px #102a2252;
}

.channel-settings-dialog::backdrop {
    background: #10231dcc;
    backdrop-filter: blur(7px);
}

.channel-settings-card {
    gap: 16px;
    padding: clamp(22px, 4vw, 38px);
}

.channel-settings-card > .eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #18866c;
}

.channel-settings-card > .eyebrow::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1ca77f;
    box-shadow: 0 0 0 5px #1ca77f1c;
    content: '';
}

.channel-settings-card > h2 {
    margin: -7px 45px 2px 0;
    color: #182d28;
    font-size: clamp(25px, 4vw, 34px);
    letter-spacing: -.055em;
}

.channel-settings-card #channel-settings-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.channel-settings-section {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e6eee8;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 24px #224b3510;
}

.channel-settings-section:first-child {
    grid-column: 1 / -1;
}

.channel-settings-section h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    color: #203a32;
    font: 700 16px/1.3 'Segoe UI', sans-serif;
    letter-spacing: -.025em;
}

.channel-settings-section h3::before {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: #eaf5ee;
    color: #208264;
    content: '✦';
    font-size: 14px;
}

.channel-settings-hint {
    margin: 0 0 15px;
    color: #74847d;
    font-size: 11px;
    line-height: 1.55;
}

.channel-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 17px 0 20px;
}

.channel-metric-card {
    position: relative;
    display: flex;
    min-height: 98px;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #e6eee8;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdfb, #f1f7f2);
}

.channel-metric-card::after {
    position: absolute;
    top: -20px;
    right: -18px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #44aa7a12;
    content: '';
}

.channel-metric-card strong {
    color: #173f34;
    font: 750 29px/1 'Segoe UI', sans-serif;
    letter-spacing: -.05em;
}

.channel-metric-card span {
    color: #73837c;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
}

.channel-metric-4 {
    border-color: #d8eee4;
    background: linear-gradient(145deg, #f2fbf6, #e5f5eb);
}

.channel-metric-4 strong {
    color: #0c936b;
}

.channel-ad-revenue {
    margin: 18px 0 20px;
    padding: clamp(15px, 2.4vw, 24px);
    overflow: hidden;
    border: 1px solid #d5eadd;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 100% 0, #c9f1db70, transparent 38%),
        linear-gradient(145deg, #f7fcf8, #eff8f1);
    box-shadow: 0 14px 36px #1b76520d, inset 0 1px #ffffffd9;
}

.channel-ad-revenue > h4:first-child {
    margin-top: 0;
    color: #174d3d;
    font-size: 15px;
}

.channel-ad-revenue-hint {
    max-width: 780px;
    margin: 0;
    color: #60786c;
    font-size: 11px;
    line-height: 1.6;
}

.channel-ad-revenue-attribution { display: inline-block; margin-top: 6px; color: #28775a; font-size: 10px; text-decoration: none; }

.channel-revenue-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 15px 0 18px;
}

.channel-revenue-metric-1 {
    border-color: #c5e5d3;
    background: linear-gradient(145deg, #effcf4, #dcf4e5);
}

.channel-revenue-metric-1 strong {
    color: #087b58;
    font-size: clamp(21px, 3vw, 29px);
}

.channel-revenue-metric-2 strong,
.channel-revenue-metric-3 strong {
    font-size: clamp(22px, 3vw, 28px);
}

.channel-ad-country-list,
.channel-ad-daily-list {
    overflow: hidden;
    border: 1px solid #e1eee5;
    border-radius: 13px;
    background: #ffffffd9;
}

.channel-ad-country-list h4 {
    margin: 0;
    padding: 13px 15px;
    border-bottom: 1px solid #edf3ee;
    color: #345748;
}

.channel-ad-country-list > p {
    margin: 0;
    padding: 14px 15px;
    color: #75867c;
    font-size: 11px;
}

.channel-ad-country-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.1fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(100px, .7fr);
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 8px 15px;
    border-bottom: 1px solid #eff4f0;
    color: #6b7c72;
    font-size: 11px;
}

.channel-ad-country-row:last-child {
    border-bottom: 0;
}

.channel-ad-country-row strong {
    color: #294b3d;
}

.channel-ad-country-row strong:last-child {
    color: #0b805c;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.channel-ad-daily-list {
    display: grid;
    max-height: 190px;
    overflow: auto;
}

.channel-ad-daily-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 13px;
    border-bottom: 1px solid #eff4f0;
    color: #708077;
    font-size: 11px;
}

.channel-ad-daily-row time {
    color: #344e41;
    font-weight: 700;
    text-transform: capitalize;
}

.channel-ad-daily-row strong {
    color: #0b805c;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.channel-settings-section h4 {
    margin: 20px 0 10px;
    color: #304940;
    font: 700 12px/1.4 'Segoe UI', sans-serif;
}

.channel-country-list {
    padding: 14px 15px;
    border: 1px solid #eaf0eb;
    border-radius: 13px;
    background: #fbfcfb;
}

.channel-country-list h4 {
    margin: 0 0 12px;
}

.channel-country-list > p {
    margin: 0;
    color: #89958f;
    font-size: 11px;
}

.channel-country-row {
    display: grid;
    grid-template-columns: minmax(95px, 1fr) minmax(60px, 2fr) 28px;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    color: #52645c;
    font-size: 10px;
}

.channel-country-row strong {
    color: #294b3f;
    text-align: right;
}

.channel-country-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9efea;
}

.channel-country-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #49b88a, #16785d);
}

.channel-chart-heading {
    margin-top: 20px !important;
}

.channel-engagement-chart {
    display: block;
    width: 100%;
    height: auto;
    min-height: 160px;
    overflow: visible;
    padding: 13px 12px 8px;
    border: 1px solid #eaf0eb;
    border-radius: 14px;
    background:
        linear-gradient(to bottom, transparent 24%, #edf2ed 25%, transparent 25.5%, transparent 49%, #edf2ed 50%, transparent 50.5%, transparent 74%, #edf2ed 75%, transparent 75.5%),
        linear-gradient(145deg, #fbfdfb, #f7faf7);
}

.channel-chart-axis {
    fill: none;
    stroke: #d9e4dc;
    stroke-width: 1;
}

.channel-chart-line {
    fill: none;
    stroke: #13a477;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 3px 4px #13a47730);
}

.channel-chart-point {
    fill: #fff;
    stroke: #13a477;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.channel-chart-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 0;
    color: #6d7e75;
    font-size: 10px;
}

.channel-chart-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.channel-chart-key::before {
    width: 17px;
    height: 3px;
    border-radius: 3px;
    background: #13a477;
    content: '';
}

.channel-daily-table {
    display: grid;
    max-height: 190px;
    gap: 5px;
    margin-top: 12px;
    overflow: auto;
    scrollbar-color: #cbd8cf transparent;
    scrollbar-width: thin;
}

.channel-daily-row {
    display: grid;
    grid-template-columns: 62px minmax(135px, .8fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #edf1ed;
    border-radius: 9px;
    background: #fff;
}

.channel-daily-row time {
    color: #354d42;
    font-size: 10px;
    font-weight: 750;
    text-transform: capitalize;
}

.channel-daily-summary {
    color: #1a8968;
    font-size: 10px;
    font-weight: 700;
}

.channel-daily-stats {
    color: #7a8881;
    font-size: 9px;
    text-align: right;
}

.channel-settings-form,
.channel-link-form,
.channel-admin-form {
    display: grid;
    gap: 10px;
}

.channel-settings-form > label:not(.channel-setting-toggle),
.channel-link-form > label {
    display: grid;
    gap: 6px;
    color: #53665c;
    font-size: 10px;
    font-weight: 700;
}

.channel-settings-form input:not([type=file]),
.channel-settings-form textarea,
.channel-link-form input,
.channel-admin-form select,
.channel-management-row select {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #e3eae4;
    border-radius: 9px;
    outline: 0;
    background: #fbfcfb;
    color: #233b31;
    font: 12px 'Segoe UI', sans-serif;
}

.channel-settings-form input:focus,
.channel-settings-form textarea:focus,
.channel-link-form input:focus,
.channel-admin-form select:focus {
    border-color: #7fb69b;
    box-shadow: 0 0 0 3px #24815e12;
}

.channel-settings-form > label:first-child input[type=file] {
    min-height: 42px;
    padding: 9px;
    border: 1px dashed #c8d9cd;
    border-radius: 9px;
    background: #f8fbf8;
    color: #718178;
    font-size: 10px;
}

.channel-setting-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #edf1ed;
    border-radius: 9px;
    background: #fbfcfb;
    color: #4f6258;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
}

.channel-setting-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #138566;
}

.channel-monetization-control {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid #d9eee1;
    border-radius: 11px;
    background: linear-gradient(120deg, #f1faf4, #fbfdfb);
}

.channel-monetization-status {
    margin: 0;
    color: #4f6258;
    font-size: 12px;
    line-height: 1.5;
}

.channel-monetization-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #187759;
    border-radius: 9px;
    background: #fff;
    color: #14664e;
    cursor: pointer;
    font: 700 12px 'Segoe UI', sans-serif;
    transition: background .18s ease, color .18s ease, opacity .18s ease;
}

.channel-monetization-button.is-enabled {
    background: #187759;
    color: #fff;
}

.channel-monetization-button:hover:not(:disabled) {
    background: #11634f;
    color: #fff;
}

.channel-monetization-button:disabled {
    cursor: wait;
    opacity: .65;
}

.channel-settings-form .button,
.channel-link-form > .button,
.channel-admin-form > .button {
    min-height: 42px;
    margin-top: 2px;
    padding: 0 16px;
    background: linear-gradient(120deg, #187759, #11634f);
    box-shadow: 0 6px 14px #126c521c;
    font-size: 11px;
}

.channel-management-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #edf1ed;
    border-radius: 11px;
    background: #fbfcfb;
}

.channel-management-row > span,
.channel-management-row > strong,
.channel-management-row > a {
    min-width: 0;
    flex: 1 1 150px;
    color: #53665c;
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.channel-management-row > a {
    color: #16765c;
}

.channel-management-row button,
.channel-admin-form button,
.channel-link-form button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid #dce8df;
    border-radius: 8px;
    background: #f0f7f2;
    color: #286248;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: background .18s, transform .18s;
}

.channel-management-row button:hover,
.channel-admin-form button:hover,
.channel-link-form button:hover {
    transform: translateY(-1px);
    background: #e2f1e7;
}

.channel-admin-form {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e9efe9;
    border-radius: 12px;
    background: #f9fbf9;
}

.channel-settings-section > p:not(.channel-settings-hint):not(.dialog-error) {
    color: #7c8982;
    font-size: 11px;
}

@media (max-width: 720px) {
    .channel-settings-dialog {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    .channel-settings-card {
        gap: 12px;
        padding: 24px 15px 16px;
    }

    .channel-settings-card #channel-settings-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .channel-settings-section:first-child {
        grid-column: auto;
    }

    .channel-settings-section {
        padding: 15px;
        border-radius: 14px;
    }

    .channel-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 13px 0 16px;
    }

    .channel-metric-card {
        min-height: 82px;
        padding: 12px;
    }

    .channel-metric-card strong {
        font-size: 25px;
    }

    .channel-revenue-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .channel-ad-country-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        padding: 9px 11px;
    }

    .channel-ad-country-row > :nth-child(2) {
        text-align: right;
    }

    .channel-ad-country-row > :nth-child(3) {
        grid-column: 1;
    }

    .channel-ad-country-row > :nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .channel-ad-daily-row {
        grid-template-columns: 1fr auto;
        gap: 4px 8px;
        padding: 8px 10px;
    }

    .channel-ad-daily-row strong {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .channel-daily-row {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px 9px;
    }

    .channel-daily-stats {
        grid-column: 2;
        text-align: left;
        line-height: 1.4;
    }
}

.media-editor-dialog {
    width: min(1120px, calc(100% - 32px));
    max-width: none;
    max-height: min(96dvh, 1100px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #2a3942;
    border-radius: 16px;
    background: #0b141a;
    color: #e9edef;
    box-shadow: 0 24px 90px #0008;
}

.media-editor-dialog::backdrop,
.once-viewer-dialog::backdrop {
    background: #071015d9;
    backdrop-filter: blur(5px);
}

.media-editor-card {
    max-height: min(96dvh, 1100px);
    padding: 18px 24px 20px;
    overflow-y: auto;
    background: #0b141a;
    color: #e9edef;
}

.media-editor-card h2 {
    color: #e9edef;
    font-size: 18px;
    font-weight: 500;
}

.media-editor-preview {
    min-height: 260px;
    max-height: 64dvh;
    border: 1px solid #26353d;
    border-radius: 12px;
    background: #050a0d;
}

.media-editor-preview canvas,
.media-editor-preview video {
    max-height: 64dvh;
}

.media-editor-toolbar,
.media-editor-text-tools,
.media-editor-emojis,
.media-editor-video-tools {
    margin-top: 12px;
}

.media-editor-toolbar button,
.media-editor-actions button {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #34444c;
    border-radius: 8px;
    background: #1b2a31;
    color: #e9edef;
    cursor: pointer;
}

.media-editor-toolbar button:hover,
.media-editor-actions button:hover {
    border-color: #00a884;
    background: #203a38;
}

.media-editor-toolbar button.active,
.media-editor-actions button[type="submit"] {
    border-color: #00a884;
    background: #00a884;
    color: #fff;
}

.media-editor-text-tools input {
    border-color: #34444c;
    background: #111b21;
    color: #e9edef;
}

.media-editor-color-label,
.media-editor-video-tools {
    color: #c8d1d5;
}

.media-editor-emojis button {
    border-color: #34444c;
    background: #1b2a31;
}

.once-viewer-dialog {
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 56px 20px 28px;
    border: 0;
    background: #0b141a;
    color: #e9edef;
}

.once-viewer-dialog[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 14px;
}

.once-viewer-close {
    position: absolute;
    top: 14px;
    left: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #1f2c34;
    color: #e9edef;
    cursor: pointer;
    font-size: 28px;
}

.once-viewer-content {
    display: grid;
    width: min(100%, 1200px);
    height: 100%;
    min-height: 0;
    place-items: center;
}

.once-viewer-content img,
.once-viewer-content video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.once-viewer-caption {
    margin: 0;
    color: #aebac1;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 720px) {
    .media-editor-dialog {
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .media-editor-card {
        max-height: 100dvh;
        padding: 14px 14px 18px;
    }

    .media-editor-preview {
        min-height: 180px;
        max-height: 56dvh;
    }

    .media-editor-preview canvas,
    .media-editor-preview video {
        max-height: 56dvh;
    }

    .once-viewer-dialog {
        padding: 56px 10px 22px;
    }
}

.composer.has-attachments {
    height: auto;
    min-height: 67px;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
}

.attachment-picker {
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 7px;
}

.attachment-card {
    position: relative;
    display: flex;
    width: 126px;
    min-width: 126px;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border: 1px solid #e0e7e5;
    border-radius: 10px;
    background: #f7f9f8;
}

.attachment-card-preview {
    display: grid;
    height: 82px;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: #e8efec;
    color: #54656f;
    font-size: 20px;
}

.attachment-card-preview img,
.attachment-card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-card-name {
    overflow: hidden;
    color: #34484b;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-card-size {
    color: #7b8a8c;
    font-size: 9px;
}

.attachment-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 2px;
}

.attachment-card-actions button {
    min-width: 25px;
    min-height: 26px;
    padding: 3px 5px;
    border: 0;
    border-radius: 5px;
    background: #e9efec;
    color: #405452;
    cursor: pointer;
    font-size: 10px;
}

.attachment-card-actions button:hover:not(:disabled) {
    background: #d9e7e0;
}

.attachment-card-actions button:disabled {
    cursor: default;
    opacity: .4;
}

.view-once-toggle.is-checked {
    color: #fff;
}

.view-once-toggle.is-checked span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #008f72;
}

.view-once-toggle.is-disabled {
    cursor: not-allowed;
    opacity: .5;
}

.view-once-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.media-editor-dialog {
    width: min(680px, calc(100% - 24px));
    max-height: min(92dvh, 900px);
}

.media-editor-card {
    max-height: min(92dvh, 900px);
    overflow-y: auto;
}

.media-editor-preview {
    display: grid;
    min-height: 180px;
    max-height: 58dvh;
    place-items: center;
    overflow: auto;
    border-radius: 10px;
    background: #17201f;
}

.media-editor-preview canvas,
.media-editor-preview video {
    display: block;
    max-width: 100%;
    max-height: 58dvh;
    object-fit: contain;
    touch-action: none;
}

.media-editor-preview [data-tool="crop"],
.media-editor-preview [data-tool="draw"] {
    cursor: crosshair;
}

.media-editor-toolbar,
.media-editor-text-tools,
.media-editor-emojis,
.media-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.media-editor-color-label {
    color: #54656f;
    font-size: 10px;
}

.media-editor-toolbar input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid #e7edef;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.media-editor-toolbar input[type="range"] {
    width: 74px;
    accent-color: #00a884;
}

.media-editor-text-tools input {
    min-width: 120px;
    min-height: 38px;
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #e4e9e5;
    border-radius: 8px;
}

.media-editor-emojis button {
    width: 38px;
    height: 38px;
    border: 1px solid #e7edef;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 19px;
}

.media-editor-video-tools {
    display: grid;
    gap: 7px;
    color: #435755;
    font-size: 11px;
}

.media-editor-video-tools input[type="range"] {
    width: 100%;
    accent-color: #00a884;
}

.media-editor-actions {
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 720px) {
    .composer.has-attachments {
        margin-bottom: 12px;
    }

    .attachment-card {
        width: 112px;
        min-width: 112px;
    }

    .media-editor-card {
        padding: 26px 15px 15px;
    }
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 0;
}

.message-action-button {
    min-height: 34px;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3b4b51;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
}

.message-action-button:hover:not(:disabled) {
    background: #f0f2f5;
    color: #008f72;
}

.message-action-button:disabled {
    cursor: wait;
    opacity: .6;
}

.view-once-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    color: #54656f;
    cursor: pointer;
    font-size: 11px;
}

.view-once-toggle input {
    accent-color: #00a884;
}

.record-audio-button {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #f0f2f5;
    color: #54656f;
    cursor: pointer;
}

.record-audio-button:hover {
    background: #d9fdd3;
    color: #008f72;
}

.viewed-once-label {
    color: #667781 !important;
    font-style: italic;
}

.once-open-button {
    padding: 10px 14px;
    border-radius: 18px;
    background: #eaf7ec;
    color: #008f72;
    font-weight: 700;
}

.call-list-heading {
    margin: 17px 19px 5px;
    color: #667781;
    font-size: 10px;
    letter-spacing: .08em;
}

.call-contact-item {
    cursor: default;
}

.call-list-action {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #54656f;
    cursor: pointer;
}

.call-list-action:hover,
.call-list-action:focus-visible {
    outline: none;
    background: #d9fdd3;
    color: #008f72;
}

.call-list-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.call-dialog {
    width: min(720px, calc(100% - 28px));
    max-height: calc(100dvh - 32px);
}

.call-card {
    min-height: min(620px, calc(100dvh - 48px));
}

.call-video-stage {
    min-height: 300px;
    background: #111b21;
}

.remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.local-video {
    z-index: 1;
    width: clamp(96px, 19vw, 160px);
    height: clamp(128px, 28vw, 220px);
}

.call-avatar {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .call-card {
        min-height: min(560px, calc(100dvh - 32px));
        padding: 16px;
    }

    .call-video-stage {
        min-height: 240px;
    }
}

@media (min-width: 721px) {
    .messenger {
        grid-template-columns: 68px clamp(320px, 30vw, 400px) minmax(0, 1fr);
        width: 100%;
        height: 100dvh;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.sidebar {
    border-right-color: #dfe3e5;
}

.sidebar-header {
    height: 64px;
    background: #f0f2f5;
}

.sidebar .brand {
    gap: 9px;
    font-size: 16px;
}

.sidebar .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #00a884;
}

.sidebar .brand-mark svg {
    width: 19px;
    height: 19px;
}

.sidebar-heading {
    min-height: 76px;
    align-items: center;
    padding: 12px 20px 10px;
}

.sidebar-heading .eyebrow {
    display: none;
}

.sidebar-heading h1 {
    color: #111b21;
    font-size: 24px;
    letter-spacing: -.04em;
}

.contact-count {
    border-radius: 50%;
    background: #d9fdd3;
    color: #008f72;
}

.space-tabs {
    display: flex;
    gap: 8px;
    margin: 0 16px 14px;
    padding: 0;
    overflow-x: auto;
    background: transparent;
    scrollbar-width: none;
}

.space-tabs::-webkit-scrollbar {
    display: none;
}

.space-tab {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #e9edef;
    border-radius: 18px;
    background: #fff;
    color: #54656f;
    font-size: 11px;
    font-weight: 500;
}

.space-tab.active {
    border-color: transparent;
    background: #d9fdd3;
    color: #008f72;
    box-shadow: none;
}

.search-box {
    height: 36px;
    margin: 0 12px 12px;
    border: 0;
    border-radius: 8px;
    background: #f0f2f5;
}

.search-box:focus-within {
    border: 0;
    box-shadow: inset 0 0 0 1px #00a884;
}

.search-box input {
    font-size: 12px;
}

.search-box kbd {
    display: none;
}

.sidebar-tools {
    margin: 0 18px 7px;
}

.sidebar-tools .section-label {
    color: #667781;
    font-size: 9px;
    letter-spacing: .1em;
}

.sidebar .small-action {
    border: 0;
    border-radius: 18px;
    background: #d9fdd3;
    color: #008f72;
}

.sidebar .small-action:hover {
    background: #c9f5c1;
}

.contact-list {
    padding: 0;
}

.contact-item {
    min-height: 72px;
    gap: 13px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 0;
}

.contact-item:hover,
.contact-item.selected {
    background: #f5f6f6;
}

.contact-item.selected {
    background: #f0f2f5;
}

.contact-avatar {
    width: 49px;
    height: 49px;
    background: #dfe5e7;
    color: #54656f;
}

.status-contact-avatar {
    width: 49px;
    height: 49px;
}

.contact-name {
    color: #111b21;
    font-size: 14px;
    font-weight: 500;
}

.contact-status {
    color: #667781;
    font-size: 12px;
}

.contact-badge {
    border-radius: 12px;
    background: #d9fdd3;
    color: #008f72;
    font-size: 10px;
}

.sidebar-footer {
    padding: 11px 16px;
    border-top: 0;
    background: #f7f8fa;
    color: #667781;
}

.chat-panel {
    background-color: #efeae2;
    background-image:
        radial-gradient(ellipse at 18% 22%, #d7d0c733 0 2px, transparent 3px),
        radial-gradient(ellipse at 76% 68%, #d7d0c722 0 2px, transparent 3px),
        repeating-linear-gradient(135deg, transparent 0 42px, #ffffff20 43px 44px, transparent 45px 86px);
    background-size: 64px 64px, 78px 78px, 110px 110px;
}

.empty-state {
    z-index: 1;
}

.empty-state .eyebrow {
    color: #008f72;
}

.empty-state h2 {
    color: #41525a;
}

.empty-state > p:last-child {
    color: #667781;
}

.active-chat {
    position: relative;
    z-index: 1;
}

.chat-header {
    height: 64px;
    padding: 0 20px;
    border-bottom-color: #e9edef;
    background: #f0f2f5;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dfe5e7;
    color: #54656f;
}

.chat-title h2 {
    margin-bottom: 3px;
    color: #111b21;
    font-size: 15px;
    font-weight: 500;
}

.chat-title p {
    color: #667781;
    font-size: 12px;
}

.chat-title .live-dot {
    background: #00a884;
    box-shadow: 0 0 0 3px #00a88420;
}

.message-area {
    position: relative;
    z-index: 1;
    padding: 24px clamp(20px, 6vw, 86px);
}

.message-list {
    gap: 8px;
}

.message-bubble {
    max-width: min(76%, 560px);
    padding: 8px 10px 6px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 1px #0b141a1a;
}

.own-message .message-bubble {
    border: 0;
    border-radius: 8px;
    background: #d9fdd3;
    box-shadow: 0 1px 1px #0b141a1a;
}

.message-bubble p {
    color: #111b21;
    font-size: 14px;
    line-height: 1.45;
}

.message-bubble p a {
    color: #027eb5;
}

.message-meta {
    margin-top: 3px;
    color: #667781;
    font-size: 10px;
}

.message-receipt.is-read {
    color: #53bdeb;
}

.composer {
    position: relative;
    z-index: 1;
    height: 54px;
    min-height: 54px;
    margin: 0 22px 18px;
    padding: 0 10px;
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 1px 2px #0b141a1a;
}

.composer #message-input {
    height: 44px;
    font-size: 14px;
}

.composer #message-input::placeholder {
    color: #667781;
}

.composer-hint {
    display: none;
}

.attachment-button {
    color: #54656f;
}

.attachment-button:hover {
    background: #f0f2f5;
    color: #00a884;
}

.send-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #00a884;
}

.send-button:hover {
    background: #008f72;
}

@media (max-width: 720px) {
    .sidebar-header {
        height: 64px;
    }

    .sidebar-heading {
        min-height: 72px;
        padding: 12px 19px 10px;
    }

    .space-tabs {
        margin-right: 12px;
        margin-left: 12px;
    }

    .space-tab {
        font-size: 10px;
    }

    .sidebar-tools {
        margin-right: 17px;
        margin-left: 19px;
    }

    .contact-item {
        padding-right: 16px;
        padding-left: 16px;
    }

    .chat-header {
        height: 64px;
    }

    .message-area {
        padding: 18px 16px;
    }

    .message-bubble {
        max-width: 88%;
        padding: 8px 10px 6px;
    }

    .composer {
        height: 52px;
        min-height: 52px;
        margin: 0 8px 10px;
        padding-left: 9px;
    }
}

@media (max-height: 640px) and (max-width: 720px) {
    .sidebar-header {
        height: 62px;
    }

    .sidebar-heading {
        min-height: 62px;
    }
}

.sidebar.status-space .sidebar-tools {
    min-height: 24px;
    justify-content: flex-end;
    margin-bottom: 0;
}

.sidebar.status-space #section-label {
    display: none;
}

.sidebar.status-space .status-section-heading {
    display: block;
    box-sizing: border-box;
    width: auto;
    margin: 16px 16px 7px;
    padding: 0;
    color: #667781;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 18px;
    text-align: left;
}

.sidebar.status-space .status-group-section {
    display: flow-root;
    width: 100%;
}

.sidebar.status-space .status-group-section + .status-group-section {
    margin-top: 0;
    border-top: 1px solid #e9edef;
}

.sidebar.status-space > .status-section-heading {
    padding-top: 16px;
    border-top: 1px solid #e9edef;
}

.sidebar.status-space .status-group-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 8px;
    scrollbar-width: thin;
}

.sidebar.status-space .status-list-item {
    box-sizing: border-box;
    width: 120px;
    min-width: 120px;
    min-height: 0;
    flex: 0 0 120px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid #e9edef;
    border-radius: 10px;
    background: #fff;
}

.sidebar.status-space .status-list-item:hover,
.sidebar.status-space .status-list-item.selected {
    background: #f5f6f6;
}

.sidebar.status-space .status-avatar-stack {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.sidebar.status-space .status-avatar-stack > .status-avatar-ring {
    align-self: center;
    width: 56px;
    height: 56px;
}

.sidebar.status-space .status-list-item .status-contact-avatar {
    width: 48px;
    height: 48px;
}

.sidebar.status-space .status-list-item > .contact-detail {
    width: 100%;
    gap: 5px;
    text-align: center;
}

.sidebar.status-space .status-list-item .contact-name,
.sidebar.status-space .status-list-item .contact-status {
    width: 100%;
}

.sidebar.status-space .status-list-item .contact-name {
    color: #111b21;
    font-size: 15px;
    font-weight: 500;
}

.sidebar.status-space .status-list-item-unseen .contact-name {
    font-weight: 600;
}

.sidebar.status-space .status-list-item .contact-status {
    color: #667781;
    font-size: 13px;
}

.sidebar.status-space .status-preview {
    width: 100%;
    height: 112px;
    flex: 0 0 112px;
    margin-left: 0;
    border-radius: 0 0 7px 7px;
}

@media (max-height: 640px) and (max-width: 720px) {
    .sidebar-header {
        height: 62px;
    }

    .sidebar-heading {
        padding-top: 15px;
        padding-bottom: 11px;
    }

    .search-box {
        margin-bottom: 13px;
    }
}

@media (min-width: 721px) {
    .messenger {
        grid-template-columns: 68px clamp(320px, 30vw, 400px) minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    body :is(p, a, label, button, input, textarea, select, li) {
        font-size: 14px;
    }

    .contact-name,
    .chat-title h2 {
        font-size: 16px;
    }

    .contact-status,
    .chat-title p,
    .search-box input {
        font-size: 14px;
    }

    .message-bubble p,
    .composer #message-input {
        font-size: 16px;
    }

    .message-meta {
        font-size: 12px;
    }

    .message-reply-quote {
        font-size: 14px;
    }

    .message-reply-quote strong {
        font-size: 13px;
    }
}

.pwa-message-status {
    display: block;
    margin: 5px 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a6116;
    cursor: pointer;
    font-size: 10px;
    text-align: right;
}

.message-row.is-pending .message-bubble {
    border-style: dashed;
}

.pwa-status-bar {
    position: relative;
    z-index: 1;
}
.pwa-install-offer {
    position: fixed;
    z-index: 10000;
    right: 18px;
    bottom: 18px;
    display: flex;
    width: min(440px, calc(100vw - 36px));
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d9e4dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 40px #102f2530;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease;
}

.pwa-install-offer.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pwa-install-offer strong { display: block; color: #183d35; font-size: 15px; }
.pwa-install-offer p { margin: 5px 0 0; color: #667773; font-size: 12px; line-height: 1.45; }
.pwa-install-offer .pwa-install-help { max-width: 290px; margin: 0; color: #465b54; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.pwa-install-offer-actions { display: flex; align-items: center; gap: 6px; }
.pwa-install-offer-actions .button { min-height: 38px; padding: 0 13px; }
.pwa-install-offer-dismiss { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #687773; font-size: 22px; cursor: pointer; }
.pwa-install-offer-dismiss:hover { background: #eef3ef; }
.push-content-option { display: flex; max-width: 280px; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.push-content-option input { flex: 0 0 auto; margin: 2px 0 0; }
.offline-media-unavailable { opacity: .35; }
.offline-media-notice { max-width: 420px; padding: 16px; border-radius: 10px; background: #243b38; color: #fff; text-align: center; }

@media (max-width: 560px) {
    .pwa-install-offer { right: 10px; bottom: 10px; width: calc(100vw - 20px); gap: 8px; padding: 12px; }
    .pwa-install-offer-actions { flex-direction: column-reverse; }
}