* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

html {
    background: #f5f7fa;
    overscroll-behavior: none;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    background: #f5f7fa;
    color: #18202a;
    font-family: system-ui, -apple-system, -apple-system-font, "Segoe UI", "Roboto", sans-serif;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    text-size-adjust: 100%;
    width: 100%;
}

.skip-link { background: #18202a; color: #fff; left: max(12px, env(safe-area-inset-left, 0px)); padding: 10px 14px; position: fixed; top: -80px; z-index: 10001; }
.skip-link:focus { top: max(12px, env(safe-area-inset-top, 0px)); }
.connectivity-banner { align-items: center; background: #7a2e0e; color: #fff; display: flex; font-size: 13px; font-weight: 700; gap: 12px; justify-content: center; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); position: sticky; text-align: center; top: 0; z-index: 1000; }
.connectivity-banner[hidden] { display: none; }
.connectivity-banner button { background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 8px; color: #5d210b; flex: 0 0 auto; font-size: 12px; min-height: 34px; padding: 6px 11px; }
.connectivity-banner button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) { .connectivity-banner { align-items: stretch; flex-direction: column; gap: 6px; } .connectivity-banner button { align-self: center; } }

.shell {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    max-width: 560px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 20px;
}

body.workspace-open .shell { max-width: 1480px; }

.brand {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.brand-mark {
    align-items: center;
    background: #18202a;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    font-size: 28px;
    font-weight: 700;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.eyebrow {
    color: #5b6776;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

h1 {
    font-size: 34px;
    line-height: 1.05;
    margin: 0;
}

.panel {
    background: #ffffff;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    padding: 18px;
}

.auth-graphic {
    align-items: center;
    background: #eaf1fb;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 220px;
    overflow: hidden;
    padding: 24px;
}

.phone-frame {
    background: #18202a;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
    height: 180px;
    position: relative;
    width: 132px;
}

.phone-frame::before {
    background: #f8fafc;
    border-radius: 18px;
    content: "";
    inset: 12px;
    position: absolute;
}

.chat-bubble,
.lock-mark {
    position: absolute;
    z-index: 1;
}

.chat-bubble {
    border-radius: 14px;
    height: 28px;
}

.chat-bubble.primary {
    background: #2166d1;
    left: 30px;
    top: 44px;
    width: 72px;
}

.chat-bubble.secondary {
    background: #14a38b;
    left: 46px;
    top: 84px;
    width: 58px;
}

.chat-bubble.tertiary {
    background: #d0e2ff;
    left: 28px;
    top: 124px;
    width: 76px;
}

.lock-mark {
    border: 4px solid #18202a;
    border-radius: 5px;
    bottom: 30px;
    height: 24px;
    left: 52px;
    width: 28px;
}

.lock-mark::before {
    border: 4px solid #18202a;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: -18px;
    width: 16px;
}

.label {
    color: #5b6776;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.login-form {
    display: grid;
    gap: 18px;
}

.mode-tabs {
    background: #eef2f7;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
}

label {
    display: grid;
    gap: 8px;
}

label span {
    color: #4a5564;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #18202a;
    font: inherit;
    min-height: 46px;
    padding: 10px 12px;
}

input:focus {
    border-color: #2166d1;
    outline: 3px solid rgba(33, 102, 209, 0.18);
}

.password-control { display: block; position: relative; }
.password-control input { padding-right: 48px; width: 100%; }
.password-toggle {
    align-items: center;
    background: transparent;
    color: #596579;
    display: flex;
    height: 38px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 38px;
}
.eye-icon { border: 2px solid currentColor; border-radius: 70% 15%; display: block; height: 14px; position: relative; transform: rotate(45deg); width: 14px; }
.eye-icon::after { background: currentColor; border-radius: 50%; content: ""; display: block; height: 4px; margin: 3px; width: 4px; }
.password-toggle[aria-pressed="true"] .eye-icon::before { background: currentColor; content: ""; height: 2px; left: -4px; position: absolute; top: 6px; transform: rotate(-45deg); width: 20px; }
.password-toggle:focus-visible { outline: 3px solid rgba(33,102,209,.25); }

textarea {
    resize: vertical;
}

.checkbox-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.checkbox-row input {
    height: 18px;
    width: 18px;
}

.form-error {
    color: #b42318;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    min-height: 20px;
}

button {
    background: #18202a;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    min-height: 48px;
    padding: 12px 16px;
}

button:disabled {
    opacity: 0.65;
}

body.register-mode #submit-button { background: #b94732; }
body.register-mode .mode-tab.active { color: #ba4e3c; }
body.register-mode #login-panel { border-color: rgba(207,96,77,.45); }

.mode-tab {
    background: transparent;
    color: #4a5564;
    min-height: 42px;
    padding: 9px 8px;
}

.mode-tab.active {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
    color: #18202a;
}

.secondary-button {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #18202a;
}

.secondary-button.active {
    border-color: #2166d1;
    color: #2166d1;
}

.app-panel {
    display: grid;
    gap: 16px;
}

body.messenger-view .app-panel {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(620px, calc(100vh - 230px));
    overflow: hidden;
}

body.messenger-view .app-header,
body.messenger-view .app-tabs,
body.messenger-view #app-status { grid-column: 1 / -1; }

.conversation-pane,
.message-pane {
    min-height: 0;
    overflow: hidden;
}

body.messenger-view .conversation-pane {
    border-right: 1px solid #d8dee7;
    grid-column: 1;
    grid-row: 4;
    padding-right: 14px;
}

body.messenger-view .message-pane {
    grid-column: 2;
    grid-row: 4;
    position: relative;
}

.pane-heading,
.conversation-heading {
    align-items: center;
    display: flex;
    gap: 12px;
}

.pane-heading { justify-content: space-between; }
.pane-heading h2 { font-size: 28px; }

.icon-button {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #d9ddff;
    border-radius: 50%;
    color: #4432a8;
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    min-height: 42px;
    padding: 0;
    width: 42px;
}

.conversation-avatar {
    align-items: center;
    background: linear-gradient(145deg, #6d5ce7, #4333a6);
    border-radius: 50%;
    color: white;
    display: flex;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.conversation-heading-copy { flex: 1; min-width: 0; }
.conversation-heading-copy h2 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-heading-copy p { color: #087363; font-size: 12px; margin: 4px 0 0; }

.conversation-details {
    background: #ffffff;
    border-left: 1px solid #d8dee7;
    box-shadow: -18px 0 44px rgba(24, 32, 42, .12);
    display: grid;
    gap: 12px;
    inset: 0 0 0 auto;
    overflow-y: auto;
    padding: 24px;
    position: absolute;
    width: min(360px, 92%);
    z-index: 30;
}

.conversation-details[hidden] { display: none; }
.conversation-details > p { color: #596579; font-size: 13px; line-height: 1.5; margin: 0; }
.details-heading { align-items: center; display: flex; justify-content: space-between; }
.details-heading h3 { margin: 0; }
.danger-button { background: #b42318; color: #fff; }
.danger-button.secondary-button { background: #fff7f6; border-color: #f3b7b1; color: #a51d13; }

.settings-nav {
    background: #eef2f7;
    border-radius: 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 5px;
}

.settings-nav-button {
    background: transparent;
    color: #596579;
    min-height: 40px;
    padding: 8px 14px;
    white-space: nowrap;
}

.settings-nav-button.active { background: #ffffff; box-shadow: 0 2px 8px rgba(24, 32, 42, .09); color: #403097; }
.settings-section { display: grid; gap: 16px; }
.settings-section[hidden] { display: none; }
.pane-heading-actions { display: flex; gap: 8px; }
.search-panel { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(21, 27, 43, .24); display: grid; gap: 12px; inset: 18px; max-height: calc(100% - 36px); overflow: auto; padding: 20px; position: absolute; z-index: 12; }
.search-panel[hidden] { display: none; }
.search-box { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.search-results, .search-result-section { display: grid; gap: 8px; }
.search-result-section h4 { margin: 8px 0 2px; }
.search-result { align-items: start; background: #f5f6fa; color: #202633; display: grid; gap: 3px; justify-items: start; text-align: left; }
.search-result span { color: #687386; font-size: 12px; }
.contact-manager { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(21,27,43,.24); display: grid; gap: 12px; inset: 18px; max-height: calc(100% - 36px); overflow: auto; padding: 20px; position: absolute; z-index: 12; }
.contact-manager[hidden], .contact-record-form[hidden] { display: none; }
.group-details-panel { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(21,27,43,.24); display: grid; gap: 14px; inset: 18px; max-height: calc(100% - 36px); overflow: auto; padding: 20px; position: absolute; z-index: 12; }
.group-details-panel[hidden] { display: none; }
.group-details-panel h4 { margin: 8px 0 0; }
.contact-manager .contact-record-form #contact-ref-id,
.contact-manager .contact-record-form #contact-type { display: none; }

#groups-list .item-card,
#communities-list .item-card { border-radius: 14px; padding: 16px; }
#groups-tab { position: relative; }
.content-create-panel { margin: 12px 0 24px; border: 1px solid var(--border, #d8dee7); border-radius: 14px; background: var(--surface, #ffffff); padding: 0 16px 16px; }
.content-create-panel > summary { cursor: pointer; font-weight: 700; padding: 16px 0; }
.content-create-panel > summary:focus-visible { outline: 3px solid var(--focus, rgba(33,102,209,.4)); outline-offset: 4px; border-radius: 4px; }
.content-directory-heading { margin: 24px 0 10px; font-size: 1rem; }
.content-action-status { min-height: 1.4em; color: var(--text-secondary, #5b6776); }
.contact-action-output { color: var(--text-secondary, #5b6776); display: block; margin: 12px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-copy-fallback { color: var(--text-secondary, #5b6776); display: block; margin: 8px 4px; max-height: 8rem; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-copy-fallback:empty { display: none; }
#group-output,
#contact-output {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#conversations-tab > .toolbar-row { grid-template-columns: minmax(0, 1fr) minmax(150px, auto); }
#conversations-tab { position: relative; }

#conversation-search {
    background: #f3f5f9;
    border: 0;
    border-radius: 12px;
    width: 100%;
}

#conversations-list {
    align-content: start;
    overflow-y: auto;
    padding-right: 4px;
}

#conversations-list .item-card {
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    padding: 14px;
}

.conversation-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
}

.conversation-row > h3 { align-self: end; grid-column: 2; grid-row: 1; }
.conversation-row > p { grid-column: 2; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row-avatar {
    align-items: center;
    align-self: center;
    background: linear-gradient(145deg, #e5e1ff, #c8c0ff);
    border-radius: 50%;
    color: #403097;
    display: flex;
    font-weight: 800;
    grid-column: 1;
    grid-row: 1 / 3;
    height: 44px;
    justify-content: center;
    width: 44px;
}
.conversation-row-summary { color: #788395; font-size: 11px; grid-column: 3; grid-row: 1; }
.unread-badge { align-items: center; background: #6754df; border-radius: 999px; color: #fff; display: flex; font-size: 11px; grid-column: 3; grid-row: 2; height: 22px; justify-content: center; min-width: 22px; padding: 0 6px; }
.conversation-row > .trust-line { display: none; }

#conversations-list .item-card:hover,
#conversations-list .item-card.selected { background: #eef2ff; outline: 0; }
#conversations-list .item-card { position: relative; }

.conversation-tools { border-top: 1px solid var(--border, #d9dce7); padding-top: 8px; }
.conversation-tools summary { cursor: pointer; font-weight: 700; padding: 7px 0; }
.conversation-tools .form-grid { margin-top: 8px; }

#messages-list {
    align-content: end;
    background: linear-gradient(180deg, #f7f8fc, #f1f3f8);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
}
.load-older-messages { align-self: center; justify-self: center; margin-bottom: 8px; }
.message-date-separator { align-self: center; background: #e7eaf1; border-radius: 999px; color: #5b6678; font-size: 12px; margin: 14px 0 8px; padding: 5px 10px; }
#messages-list .message-grouped { margin-top: -2px; }
#messages-list .message-sender { color: #6754df; font-size: 12px; font-weight: 800; margin-bottom: 3px; }
#messages-list .message-reply-preview { border-left: 3px solid #9b8ff1; color: #596579; font-size: 12px; margin: 0 0 6px; max-width: 100%; overflow: hidden; padding: 5px 8px; text-overflow: ellipsis; white-space: nowrap; }
#messages-list .message-status { font-size: 11px; opacity: .76; text-align: right; }
#messages-list .message-failed .message-status { color: #b42318; font-weight: 700; }
#messages-list .message-outgoing .message-reply-preview { border-color: #d9d3ff; color: #f0edff; }

#messages-list .message-bubble {
    align-self: flex-start;
    background: #ffffff;
    border: 0;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 10px rgba(29, 35, 55, .07);
    margin: 5px 0;
    max-width: min(72%, 660px);
    padding: 10px 48px 10px 13px;
    position: relative;
}

#messages-list .message-bubble.search-target-message {
    outline: 3px solid var(--focus, rgba(33, 102, 209, .55));
    outline-offset: 3px;
}

#messages-list .message-outgoing {
    align-self: flex-end;
    background: #6754df;
    border-radius: 16px 16px 4px 16px;
    color: #ffffff;
}

#messages-list .message-outgoing p { color: #f5f3ff; }
#messages-list .message-moderated,
#messages-list .message-moderated.message-outgoing { align-self: center; background: var(--surface-muted, #f2f4f7); border: 1px dashed var(--border, #cbd2dc); border-radius: 12px; box-shadow: none; color: var(--text-secondary, #596579); font-style: italic; max-width: min(88%, 720px); }
#messages-list .message-moderated p { color: inherit; }
#messages-list .message-bubble > h3 { display: none; }
#messages-list .overflow-actions { right: 8px; top: 8px; }

.consumer-composer {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8dee7;
    border-radius: 16px;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    padding: 8px;
}

.composer-action {
    background: transparent;
    border: 0;
    color: #6754df;
    font-size: 22px;
    min-height: 40px;
    padding: 4px;
    width: 36px;
}

.consumer-composer #message-type { width: 100%; }
.consumer-composer #message-content { border: 0; max-height: 10rem; min-height: 46px; overflow-y: auto; resize: vertical; }
.consumer-composer #send-message-button { border-radius: 12px; min-height: 44px; }
.consumer-composer > :not(.composer-action):not(#message-type):not(#message-content):not(#send-message-button):not(#emoji-palette):not(#sticker-palette):not(#gif-palette):not(#voice-note-controls):not(#message-file):not(#message-location):not(#use-current-location-button):not(#poll-options):not(.composer-more-options):not(.attachment-upload-progress) { display: none; }
.attachment-upload-progress { display: grid; font-size: 12px; gap: 5px; grid-column: 1 / -1; }
.attachment-upload-progress progress { width: 100%; }
.composer-more-options { grid-column: 1 / -1; }
.composer-more-options > summary { color: var(--text-secondary, #5b6776); cursor: pointer; font-size: 12px; padding: 4px; }
.composer-more-options > .form-grid { margin-top: 8px; }
.composer-action svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 22px; }

#contacts-tab > .toolbar-row { grid-template-columns: minmax(0, 1fr) auto auto; }
#contacts-tab { position: relative; }
#contacts-tab > .form-grid,
#contacts-tab > textarea,
#contacts-tab > .secondary-button { display: none; }
#contacts-list .contact-row { border: 0; border-radius: 12px; padding: 14px; }
#contacts-list .contact-row:hover { background: #f3f5fb; }
#contacts-list .contact-row > .trust-line { font-size: 12px; }

.mobile-only { display: none; }

.app-panel[hidden] {
    display: none;
}

.app-header,
.toolbar-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.app-tabs {
    background: #eef2f7;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 4px;
}

.app-tab {
    background: transparent;
    color: #4a5564;
    min-height: 40px;
    padding: 8px;
}

.app-tab.active {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
    color: #18202a;
}

.tab-panel {
    display: grid;
    gap: 14px;
}

.form-grid,
.action-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.emoji-palette,
.rich-palette {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(8, minmax(38px, 1fr));
}

.emoji-palette[hidden],
.rich-palette[hidden] {
    display: none;
}

.emoji-palette button {
    font-size: 20px;
    min-height: 42px;
    padding: 6px;
}

.rich-palette {
    grid-template-columns: repeat(4, minmax(96px, 1fr));
}

.rich-palette button {
    min-height: 42px;
    padding: 8px 10px;
}

.item-list {
    display: grid;
    gap: 8px;
}

.empty-state {
    align-items: center;
    align-self: center;
    color: #596579;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
    padding: 28px;
    text-align: center;
}
.empty-state h3 { color: #253040; margin: 0 0 8px; }
.empty-state p { line-height: 1.5; margin: 0 0 16px; max-width: 440px; }

.item-list.message-wallpaper {
    border: 1px solid #d8dee7;
    border-radius: 6px;
    min-height: 220px;
    padding: 10px;
}

.item-card {
    border: 1px solid #d8dee7;
    border-radius: 6px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.item-card.selected {
    border-color: #2166d1;
    outline: 3px solid rgba(33, 102, 209, 0.12);
}

.item-card.message-failed {
    background: #fff8f6;
    border-color: #b42318;
}

.item-card.message-scheduled {
    background: #f6f9ff;
    border-color: #2166d1;
}

.item-card h3,
.item-card p {
    margin: 0;
}

.item-card h3 {
    font-size: 15px;
}

.item-card p {
    color: #4a5564;
    font-size: 13px;
    line-height: 1.4;
}

.rich-preview {
    background: #f8fafc;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    display: grid;
    gap: 8px;
    padding: 8px;
}

.rich-preview a,
.rich-preview p {
    color: #344054;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.rich-preview audio,
.rich-preview video,
.rich-preview img {
    border-radius: 6px;
    max-width: 100%;
}

.rich-preview-action {
    justify-self: start;
    min-height: 34px;
    padding: 7px 10px;
}

.rich-preview img {
    max-height: 220px;
    object-fit: contain;
}

.trust-line {
    border-left: 3px solid #94a3b8;
    padding-left: 8px;
}

.trust-verified {
    border-left-color: #14a38b;
    color: #087363;
}

.trust-changed {
    border-left-color: #b42318;
    color: #b42318;
    font-weight: 700;
}

.trust-unverified {
    border-left-color: #d97706;
    color: #92400e;
}

.trust-unavailable {
    border-left-color: #94a3b8;
}

.mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mini-actions button {
    min-height: 34px;
    padding: 7px 9px;
}

.reauth-brand { align-items: center; display: flex; gap: 11px; }
.reauth-brand img { height: 42px; width: 42px; }
.reauth-brand span { display: grid; }
.reauth-brand strong { font-size: 20px; }
.reauth-brand small { color: var(--text-secondary, #667085); }
.group-directory-card { cursor: pointer; padding-right: 52px; position: relative; }
.overflow-actions { position: absolute; right: 10px; top: 10px; z-index: 8; }
.overflow-trigger { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: inherit; display: flex; font-size: 24px; height: 36px; justify-content: center; min-width: 36px; padding: 0; }
.overflow-trigger:hover, .overflow-trigger:focus-visible { background: var(--surface-muted, #f2f3f8); border-color: var(--border, #d9dce7); }
.overflow-menu { background: var(--surface-elevated, #fff); border: 1px solid var(--border, #d9dce7); border-radius: 12px; box-shadow: 0 14px 38px rgba(20,24,42,.2); color: var(--text-primary, #1f2937); min-width: 170px; overflow-x: hidden; overflow-y: auto; position: fixed; z-index: 70; }
.overflow-menu button { background: transparent; border: 0; border-radius: 0; color: inherit; display: block; padding: 10px 13px; text-align: left; width: 100%; }
.overflow-menu button:hover, .overflow-menu button:focus-visible { background: var(--surface-muted, #f2f3f8); }

.security-action-output:not(:empty) {
    background: var(--surface-muted, #f8fafc);
    border: 1px solid var(--border, #d8dee7);
    border-radius: 10px;
    color: var(--text-primary, #344054);
    display: grid;
    gap: 8px;
    padding: 12px;
}
.security-action-output p { margin: 0; }
.security-action-output > code { overflow-wrap: anywhere; user-select: all; }
.recovery-code-list { columns: 2; margin: 0; padding-left: 28px; }
.recovery-code-list code { user-select: all; }
@media (max-width: 480px) { .recovery-code-list { columns: 1; } }
.signature-receipt-list:not(:empty) { margin-top: 8px; }
.signature-receipt-card { display: grid; gap: 8px; }
.signature-receipt-value { margin: 0; }
.signature-receipt-value code { overflow-wrap: anywhere; user-select: all; }
.signature-receipt-card button { justify-self: start; }
.ai-result:not(:empty) {
    background: var(--surface-muted, #f8fafc);
    border: 1px solid var(--border, #d8dee7);
    border-radius: 10px;
    color: var(--text-primary, #344054);
    display: grid;
    gap: 8px;
    padding: 12px;
}
.ai-result p, .ai-result ul { margin: 0; }
.ai-result li { margin: 4px 0; overflow-wrap: anywhere; }
.tool-result-list:not(:empty) { margin-top: 8px; }
.tool-result-card { display: grid; gap: 6px; }
.tool-result-card p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.business-action-output:not(:empty) {
    background: var(--surface-muted, #f8fafc);
    border: 1px solid var(--border, #d8dee7);
    border-radius: 10px;
    color: var(--text-primary, #344054);
    padding: 12px;
}
.admin-result-list:not(:empty) { display: grid; gap: 10px; margin-top: 8px; }
.admin-credential-panel {
    background: var(--surface-muted, #f8fafc);
    border: 1px solid var(--border, #d8dee7);
    border-radius: 10px;
    display: grid;
    gap: 8px;
    padding: 12px;
}
.admin-credential-panel p { margin: 0; }
.admin-credential-panel code { overflow-wrap: anywhere; user-select: all; }
.admin-summary-list { display: grid; grid-template-columns: minmax(120px, auto) 1fr; margin: 0; }
.admin-summary-list dt, .admin-summary-list dd { border-bottom: 1px solid var(--border, #d8dee7); margin: 0; padding: 7px; }
.admin-summary-list dt { font-weight: 700; text-transform: capitalize; }

.code-output {
    background: #f8fafc;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    color: #344054;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    min-height: 40px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    white-space: pre-wrap;
}

.call-panel { background: rgba(9, 16, 29, .97); border-radius: 18px; color: #fff; inset: 12px; margin: 0; overflow-y: auto; padding: 18px; position: absolute; z-index: 40; }
.call-panel[hidden] { display: none; }
.call-videos { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(100px, .3fr); }
.call-videos video { background: #000; border-radius: 12px; max-height: 360px; object-fit: cover; width: 100%; }
#remote-call-videos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }

.qr-panel {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    min-height: 220px;
    padding: 14px;
}

.qr-panel canvas {
    background: #ffffff;
    border: 8px solid #ffffff;
    height: 192px;
    image-rendering: pixelated;
    width: 192px;
}

h2 {
    font-size: 24px;
    line-height: 1.1;
    margin: 0;
}

html[data-effective-theme="dark"] { color-scheme: dark; }

html[data-effective-theme="dark"] .conversation-details,
html[data-effective-theme="dark"] .consumer-composer { background: #171d24; border-color: #2b3542; }
html[data-effective-theme="dark"] .message-date-separator { background: #28313d; color: #c6cfda; }
html[data-effective-theme="dark"] .search-panel { background: #171d24; }
html[data-effective-theme="dark"] .contact-manager { background: #171d24; }
html[data-effective-theme="dark"] .group-details-panel { background: #171d24; }
html[data-effective-theme="dark"] .overflow-menu { background: #222a35; border-color: #414b5c; color: #f4f6fa; }
html[data-effective-theme="dark"] .search-result { background: #222a35; color: #f4f6fa; }
html[data-effective-theme="dark"] .search-result span { color: #aab4c3; }
html[data-effective-theme="dark"] .empty-state h3 { color: #edf2f7; }

    html[data-effective-theme="dark"],
    html[data-effective-theme="dark"] body {
        background: #101418;
        color: #edf2f7;
    }

    html[data-effective-theme="dark"] .brand-mark {
        background: #edf2f7;
        color: #101418;
    }

    html[data-effective-theme="dark"] .panel {
        background: #171d24;
        border-color: #2b3542;
    }

    html[data-effective-theme="dark"] .auth-graphic {
        background: #151c25;
        border-color: #2b3542;
    }

    html[data-effective-theme="dark"] .eyebrow,
    html[data-effective-theme="dark"] .label,
    html[data-effective-theme="dark"] label span {
        color: #a8b3c2;
    }

    html[data-effective-theme="dark"] input[type="text"],
    html[data-effective-theme="dark"] input[type="email"],
    html[data-effective-theme="dark"] input[type="tel"],
    html[data-effective-theme="dark"] input[type="password"],
    html[data-effective-theme="dark"] input[type="url"],
    html[data-effective-theme="dark"] input[type="number"],
    html[data-effective-theme="dark"] input[type="datetime-local"],
    html[data-effective-theme="dark"] select,
    html[data-effective-theme="dark"] textarea {
        background: #101418;
        border-color: #2b3542;
        color: #edf2f7;
    }

    html[data-effective-theme="dark"] .mode-tabs {
        background: #101418;
        border-color: #2b3542;
    }

    html[data-effective-theme="dark"] .app-tabs {
        background: #101418;
        border-color: #2b3542;
    }

    html[data-effective-theme="dark"] .mode-tab,
    html[data-effective-theme="dark"] .app-tab {
        color: #a8b3c2;
    }

    html[data-effective-theme="dark"] .mode-tab.active,
    html[data-effective-theme="dark"] .app-tab.active {
        background: #252f3a;
        color: #edf2f7;
    }

    html[data-effective-theme="dark"] .item-card,
    html[data-effective-theme="dark"] .code-output,
    html[data-effective-theme="dark"] .qr-panel {
        border-color: #2b3542;
    }

    html[data-effective-theme="dark"] .item-card.message-failed {
        background: #2b1513;
        border-color: #f97066;
    }

    html[data-effective-theme="dark"] .item-card.message-scheduled {
        background: #111f33;
        border-color: #84adff;
    }

    html[data-effective-theme="dark"] .code-output,
    html[data-effective-theme="dark"] .qr-panel {
        background: #101418;
        color: #edf2f7;
    }

    html[data-effective-theme="dark"] .secondary-button {
        background: #101418;
        border-color: #2b3542;
        color: #edf2f7;
    }

@media screen and (max-width: 900px) {
    .app-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.messenger-view .app-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); }
    body.messenger-view .conversation-pane,
    body.messenger-view .message-pane { border: 0; grid-column: 1; grid-row: 4; padding: 0; }
    body.messenger-view .message-pane { display: none; }
    body.messenger-view.mobile-chat-open .conversation-pane { display: none; }
    body.messenger-view.mobile-chat-open .message-pane { display: grid; }
    .mobile-only { display: inline-flex; }
    .conversation-details { position: fixed; top: env(safe-area-inset-top, 0); }
    .settings-nav { margin-inline: -4px; }
}

@media screen and (max-width: 560px) {
    .form-grid,
    .action-grid,
    .toolbar-row,
    .app-header {
        grid-template-columns: 1fr;
    }

    .app-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emoji-palette {
        grid-template-columns: repeat(4, minmax(38px, 1fr));
    }

    .rich-palette {
        grid-template-columns: repeat(2, minmax(96px, 1fr));
    }
    .consumer-composer { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
    #contacts-tab > .toolbar-row { grid-template-columns: minmax(0, 1fr) auto; }
    #contacts-tab > .toolbar-row .compact-filter { grid-column: 1 / -1; grid-row: 2; }
}

.native-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #07111df2;
}

#native-lock-overlay[hidden] {
    display: none;
}

.native-lock-card {
    width: min(420px, 100%);
    padding: 32px;
    border: 1px solid #33465c;
    border-radius: 20px;
    background: #101c2a;
    color: #f4f8fc;
    text-align: center;
    box-shadow: 0 24px 80px #0009;
}

/* Hero-aligned consumer messenger shell. */
body.messenger-view {
    background: #070a18;
    color: #f7f7ff;
}

body.messenger-view .shell {
    gap: 0;
    margin: 0;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
}

body.messenger-view > .shell > .brand { display: none; }

body.messenger-view .app-panel {
    background: #0a0e20;
    border: 0;
    border-radius: 0;
    gap: 0;
    grid-template-columns: 76px minmax(290px, 350px) minmax(0, 1fr);
    grid-template-rows: 68px minmax(0, 1fr);
    height: 100dvh;
    padding: 0;
}

body.messenger-view .app-header {
    align-content: space-between;
    background: #0b0f22;
    border-bottom: 1px solid #202641;
    display: flex;
    flex-direction: row;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding: 10px 18px;
    z-index: 110;
}

.signed-in-account { align-items: center; display: flex; gap: 11px; }
.messenger-brand-mark {
    align-items: center;
    background: linear-gradient(145deg, #8168ff, #6145e8);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(113, 83, 244, .34);
    color: #fff;
    display: flex;
    font-size: 25px;
    font-weight: 850;
    height: 46px;
    justify-content: center;
    line-height: 1;
    width: 46px;
}
.messenger-brand-mark > span { align-items: center; display: flex; height: 100%; justify-content: center; line-height: 1; transform: translateY(-1px); width: 100%; }
.messenger-brand-mark img { display: block; height: 100%; width: 100%; }
.messenger-wordmark { display: grid; line-height: 1; }
.messenger-wordmark span { color: #9ba4c2; font-size: 10px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.messenger-wordmark strong { color: #fff; font-size: 20px; letter-spacing: -.03em; margin-top: 3px; }

.account-menu-wrap { margin-left: auto; position: relative; }
.account-menu-button { align-content: center; background: #151a31; border: 1px solid #2a3150; border-radius: 13px; display: grid; gap: 4px; height: 46px; justify-content: center; padding: 0; width: 46px; }
.account-menu-button span { background: #d8dcf1; border-radius: 2px; display: block; height: 2px; width: 20px; }
.account-menu-button[aria-expanded="true"] { background: #28204e; border-color: #725ae3; }
.account-menu { background: #12172d; border: 1px solid #2c3352; border-radius: 15px; box-shadow: 0 20px 55px rgba(0,0,0,.48); display: grid; gap: 4px; min-width: 230px; padding: 8px; position: absolute; right: 0; top: 53px; z-index: 200; }
.account-menu[hidden] { display: none; }
.account-menu-name { border-bottom: 1px solid #292f4b; display: grid; margin: 0 4px 5px; overflow: hidden; padding: 8px 7px 12px; }
.account-menu-name span { color: #818aa8; font-size: 11px; }
.account-menu-name strong { color: #f6f7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-item { background: transparent; border: 0; border-radius: 9px; color: #d9dced; font-size: 14px; justify-content: flex-start; min-height: 40px; padding: 9px 11px; text-align: left; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: #201b42; color: #fff; }
.account-menu-signout { color: #ff9d9d; }

body.messenger-view .app-tabs {
    align-content: center;
    background: transparent;
    border: 0;
    display: grid;
    gap: 12px;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    margin: auto 12px;
    padding: 0;
    z-index: 4;
}

body.messenger-view .app-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: #737c9c;
    display: flex;
    font-size: 10px;
    gap: 3px;
    justify-content: center;
    min-height: 50px;
    padding: 5px 2px;
    flex-direction: column;
}
body.messenger-view .app-tab::before { font-size: 20px; line-height: 1; }
body.messenger-view .app-tab[data-tab="conversations"]::before { content: "◴"; }
body.messenger-view .app-tab[data-tab="contacts"]::before { content: "♧"; }
body.messenger-view .app-tab[data-tab="groups"]::before { content: "◉"; }
body.messenger-view .app-tab[data-tab="settings"]::before { content: "⚙"; }
body.messenger-view .app-tab.active {
    background: #1b1740;
    box-shadow: none;
    color: #9a83ff;
}

body.messenger-view #app-status {
    background: #27203f;
    border-radius: 10px;
    color: #f3efff;
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 12px;
    padding: 10px 14px;
    position: absolute;
    right: 0;
    z-index: 20;
}
body.messenger-view #app-status:empty { display: none; }

body.messenger-view .conversation-pane {
    background: #0e1328;
    border-right: 1px solid #202641;
    grid-column: 2;
    grid-row: 2;
    padding: 22px 16px;
}

body.messenger-view .message-pane {
    background: #090d1d;
    grid-column: 3;
    grid-row: 2;
    padding: 20px 24px;
}

body.messenger-view #contacts-tab,
body.messenger-view #groups-tab,
body.messenger-view #inbox-tab,
body.messenger-view #tools-tab,
body.messenger-view #settings-tab {
    background: #0e1328;
    color: #f7f7ff;
    grid-column: 2 / -1;
    grid-row: 2;
    overflow: auto;
    padding: 28px;
}

body.messenger-view .pane-heading h2,
body.messenger-view .conversation-heading-copy h2 { color: #f7f7ff; }
body.messenger-view .label { color: #7e88a8; }
body.messenger-view .conversation-heading-copy p { color: #65d8bf; }
body.messenger-view .icon-button {
    background: #171d37;
    border-color: #29304f;
    color: #c5bcff;
}
body.messenger-view input,
body.messenger-view select,
body.messenger-view textarea {
    background: #12172d;
    border-color: #292f4d;
    color: #f4f5ff;
}
body.messenger-view input::placeholder,
body.messenger-view textarea::placeholder { color: #717a99; }
body.messenger-view .conversation-row,
body.messenger-view .item-card { border-color: transparent; color: #eef0ff; }
body.messenger-view .conversation-row:hover { background: #151a34; }
body.messenger-view .conversation-row.active {
    background: linear-gradient(135deg, #211b49, #181838);
    border-color: #4e3b9c;
}
body.messenger-view #messages-list {
    background: radial-gradient(circle at 70% 8%, rgba(104, 78, 224, .12), transparent 32%), #090d1d;
}
body.messenger-view #messages-list .message-bubble {
    background: #181d34;
    border-color: #252c49;
    color: #eef0ff;
}
body.messenger-view #messages-list .message-outgoing {
    background: linear-gradient(140deg, #7658ee, #6045d6);
    border-color: #856df0;
}
body.messenger-view .consumer-composer {
    background: #11162b;
    border: 1px solid #252c49;
    border-radius: 18px;
    padding: 10px;
}
body.messenger-view .consumer-composer input { border: 0; }
body.messenger-view .conversation-details {
    background: #10152a;
    border-color: #2a3150;
    color: #f7f7ff;
}
body.messenger-view #community-details-panel { background: #10152a; color: #f7f7ff; }
body.messenger-view #community-groups-list .item-card,
body.messenger-view #community-members-list .item-card { background: #151a31; border-color: #272e4b; }
.list-loading { display: grid; gap: 12px; padding: 8px 0; }
.skeleton-row { background: linear-gradient(100deg,#151a31 20%,#222946 45%,#151a31 70%); background-size: 220% 100%; border-radius: 14px; display: block; height: 68px; animation: skeleton-shimmer 1.35s ease-in-out infinite; }
@keyframes skeleton-shimmer { to { background-position-x: -220%; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .skeleton-row { animation: none; }
}

@media screen and (max-width: 900px) {
    body.messenger-view .app-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 64px minmax(0, 1fr) 70px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.messenger-view .app-header { display: flex; grid-column: 1; grid-row: 1; padding: 9px 13px; }
    body.messenger-view .app-tabs {
        align-content: stretch;
        background: #0c1023;
        border-radius: 0;
        border-top: 1px solid #242a46;
        bottom: 0;
        display: grid;
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: repeat(3, 1fr);
        left: 0;
        margin: 0;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        position: fixed;
        right: 0;
        z-index: 100;
    }
    body.messenger-view .app-tab { min-height: 54px; }
    body.messenger-view .conversation-pane,
    body.messenger-view .message-pane,
    body.messenger-view #contacts-tab,
    body.messenger-view #groups-tab,
    body.messenger-view #inbox-tab,
    body.messenger-view #tools-tab,
    body.messenger-view #settings-tab {
        grid-column: 1;
        grid-row: 2;
        padding: 18px 14px 88px;
    }
    body.messenger-view .message-pane { padding-inline: 12px; }
}

.profile-avatar-editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 96px minmax(180px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.profile-avatar {
    width: 88px;
    height: 88px;
    border: 2px solid #354a60;
    border-radius: 50%;
    object-fit: cover;
    background: #0d1824;
}

.contact-avatar {
    float: inline-start;
    width: 52px;
    height: 52px;
    margin: 0 12px 8px 0;
    border: 1px solid #354a60;
    border-radius: 50%;
    object-fit: cover;
    background: #0d1824;
}

@media screen and (max-width: 700px) {
    .profile-avatar-editor { grid-template-columns: 88px 1fr; }
}
.voice-note-controls { display: grid; gap: .55rem; }
.voice-note-controls audio { width: 100%; }
.rich-palette button { display: inline-grid; justify-items: center; gap: .25rem; }
.rich-palette button img { width: 4rem; height: 4rem; object-fit: contain; }
.rich-catalogue-asset { display: block; width: min(15rem, 70vw); height: auto; object-fit: contain; }

/* Mobile-first messaging home. */
.legacy-group-create { display: none !important; }
.app-header-actions { align-items: center; display: flex; gap: 7px; margin-left: auto; }
.header-action-button { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #5542bd; display: inline-flex; font-size: 22px; height: 42px; justify-content: center; min-height: 42px; padding: 0; width: 42px; }
.header-action-button:hover, .header-action-button:focus-visible { background: #eeeaff; }
.header-action-button svg, .nav-icon, .category-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.header-action-button svg { height: 27px; width: 27px; }
.nav-icon { height: 22px; width: 22px; }
.nav-icon-chats { fill: currentColor; stroke-width: 1.5; }
.nav-icon-chats path:last-child { fill: none; stroke: #fff; }
.recent-chats { border-bottom: 1px solid #e5e7ee; min-height: 0; padding-bottom: 12px; }
.recent-contacts { border-bottom: 1px solid #e5e7ee; margin: 12px 0; padding-bottom: 14px; }
.active-groups { min-height: 0; }
.group-role-badge { background: #eeeaff; border-radius: 999px; color: #5b16b9; display: inline-block; font-size: 10px; font-weight: 750; margin-left: 4px; padding: 2px 6px; text-transform: capitalize; vertical-align: 1px; }
.recent-chats-heading { align-items: end; display: flex; justify-content: space-between; padding: 4px 4px 10px; }
.recent-chats-heading > div { display: grid; gap: 2px; }
.recent-chats-heading .label { margin: 0; }
.recent-chats-heading h3 { color: #202432; font-size: 18px; margin: 0; }
.recent-chats-heading span { color: #737b8d; font-size: 12px; }
.recent-contact-add { background: transparent; border: 0; color: #5b16b9; cursor: pointer; font-size: 13px; font-weight: 750; min-height: 36px; padding: 4px 8px; }
.recent-contact-list { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 4px 8px; scrollbar-width: thin; }
.recent-contact-card { align-items: center; background: #f7f5ff; border: 1px solid #e2dcf6; border-radius: 15px; color: #202432; cursor: pointer; display: grid; flex: 0 0 116px; gap: 4px; justify-items: center; min-height: 138px; padding: 12px 8px; position: relative; text-align: center; }
.recent-contact-card:hover, .recent-contact-card:focus-visible { background: #eeeaff; border-color: #cfc2f2; }
.recent-contact-card strong, .recent-contact-time { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-contact-card strong { font-size: 13px; }
.recent-contact-time { color: #6c7484; font-size: 11px; }
.recent-contact-card .unread-badge { grid-column: auto; grid-row: auto; position: absolute; right: 7px; top: 7px; }
.recent-contact-avatar { grid-column: auto; grid-row: auto; height: 54px; width: 54px; }
.recent-contact-photo { border-radius: 50%; height: 54px; object-fit: cover; width: 54px; }
.recent-contacts-empty { align-items: center; background: #f7f5ff; border: 1px dashed #d9d2ef; border-radius: 13px; color: #676f80; display: flex; justify-content: space-between; min-width: 100%; padding: 10px 12px; }
.conversation-categories { display: grid; gap: 2px; min-height: 0; overflow-y: auto; }
.conversation-category { border-bottom: 1px solid #e5e7ee; }
.category-toggle { align-items: center; background: transparent; border: 0; border-radius: 0; color: #222638; display: grid; gap: 9px; grid-template-columns: 22px minmax(0,1fr) auto 20px; min-height: 48px; padding: 10px 5px; text-align: left; width: 100%; }
.category-toggle:hover, .category-toggle:focus-visible { background: #f5f3ff; }
.category-icon { color: #6d20c9; height: 24px; text-align: center; width: 24px; }
.category-count { background: #6d55dd; border-radius: 999px; color: #fff; font-size: 11px; min-width: 21px; padding: 3px 6px; text-align: center; }
.category-chevron { color: #7d8496; transition: transform .15s ease; }
.category-toggle[aria-expanded="false"] .category-chevron { transform: rotate(180deg); }
.category-panel { padding: 0 0 5px; }
.category-panel[hidden] { display: none; }
.compact-conversation-list { display: grid; gap: 0; }
.compact-conversation-list .item-card { border: 0; border-bottom: 1px solid #eceef3; border-radius: 0 !important; margin: 0; min-height: 68px; padding: 10px 5px !important; }
.compact-conversation-list .item-card:last-child { border-bottom: 0; }
.verified-indicator { color: #6d55dd; font-size: 12px; }
.conversation-flags { color: #7a8194; font-size: 11px; font-weight: 500; margin-left: 5px; }
.conversation-avatar-image { border: 0; float: none; grid-column: 1; grid-row: 1 / 3; height: 54px; margin: 0; width: 54px; }
.compact-conversation-list .empty-state { min-height: 0; padding: 12px 6px 16px; }
.compact-conversation-list .empty-state h3 { font-size: 15px; }
.compact-conversation-list .empty-state p { font-size: 13px; }
.inline-empty-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.inline-empty-actions button { font-size: 12px; min-height: 38px; padding: 7px 10px; }
.action-sheet, .flow-dialog { background: #fff; border: 1px solid #e0e2ea; border-radius: 18px; box-shadow: 0 24px 70px rgba(24,21,48,.25); color: #1d2130; display: grid; gap: 14px; left: 50%; max-height: min(720px,calc(100dvh - 28px)); overflow-y: auto; padding: 18px; position: fixed; top: 50%; transform: translate(-50%,-50%); width: min(440px,calc(100vw - 24px)); z-index: 1200; }
.action-sheet[hidden], .flow-dialog[hidden] { display: none; }
.action-sheet-list { display: grid; }
.action-sheet-list > button { align-items: center; background: transparent; border: 0; border-bottom: 1px solid #ececf2; border-radius: 0; color: #232737; display: grid; gap: 12px; grid-template-columns: 30px 1fr; justify-items: start; min-height: 58px; padding: 8px 4px; text-align: left; }
.action-sheet-list > button > span:first-child { color: #6d55dd; font-size: 19px; text-align: center; }
.action-sheet-list strong, .action-sheet-list small { display: block; }
.action-sheet-list small { color: #6f7688; font-size: 12px; margin-top: 2px; }
.flow-dialog label { color: #3d4354; display: grid; font-size: 13px; font-weight: 700; gap: 6px; }
.flow-dialog fieldset { border: 1px solid #e0e2ea; border-radius: 12px; }
.optional-label { color: #777e91; font-weight: 400; }
.dialog-actions { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.member-picker { display: grid; gap: 5px; max-height: 180px; overflow-y: auto; }
.member-choice { align-items: center !important; display: flex !important; gap: 8px !important; }

body.messenger-view { background: #f6f7fa; color: #202432; }
body.messenger-view .app-panel { background: #f6f7fa; }
body.messenger-view .app-header { background: #fff; border-color: #e1e4eb; }
body.messenger-view .conversation-pane { background: #fff; border-color: #e1e4eb; }
body.messenger-view .message-pane { background: #f6f7fa; }
body.messenger-view .messenger-wordmark strong, body.messenger-view .pane-heading h2 { color: #202432; }
body.messenger-view .messenger-wordmark span { color: #6d55dd; }
body.messenger-view #messages-list { background: #f1f2f7; }
body.messenger-view .conversation-row, body.messenger-view .item-card { color: #202432; }
body.messenger-view .conversation-row:hover { background: #f7f5ff; }
body.messenger-view .conversation-row.active { background: #eeeaff; border-color: #d8d0ff; }
body.messenger-view input, body.messenger-view select, body.messenger-view textarea { background: #f4f5f8; border-color: #dfe2e9; color: #202432; }

html[data-effective-theme="dark"] body.messenger-view { background: #090d1d; color: #f7f7ff; }
html[data-effective-theme="dark"] body.messenger-view .app-panel { background: #0a0e20; }
html[data-effective-theme="dark"] body.messenger-view .app-header { background: #0b0f22; border-color: #202641; }
html[data-effective-theme="dark"] body.messenger-view .conversation-pane { background: #0e1328; border-color: #202641; }
html[data-effective-theme="dark"] body.messenger-view .message-pane { background: #090d1d; }
html[data-effective-theme="dark"] body.messenger-view .messenger-wordmark strong, html[data-effective-theme="dark"] body.messenger-view .pane-heading h2 { color: #f7f7ff; }
html[data-effective-theme="dark"] .category-toggle { color: #eef0ff; }
html[data-effective-theme="dark"] .recent-contacts { border-color: #242a44; }
html[data-effective-theme="dark"] .recent-chats-heading h3 { color: #f7f7ff; }
html[data-effective-theme="dark"] .recent-contact-card, html[data-effective-theme="dark"] .recent-contacts-empty { background: #151a34; border-color: #2c3352; color: #f7f7ff; }
html[data-effective-theme="dark"] .group-role-badge { background: #28204e; color: #c8baff; }
html[data-effective-theme="dark"] .conversation-category, html[data-effective-theme="dark"] .compact-conversation-list .item-card { border-color: #242a44; }
html[data-effective-theme="dark"] .category-toggle:hover, html[data-effective-theme="dark"] .category-toggle:focus-visible { background: #171630; }
html[data-effective-theme="dark"] .action-sheet, html[data-effective-theme="dark"] .flow-dialog { background: #11162b; border-color: #2b3150; color: #f6f7ff; }
html[data-effective-theme="dark"] .action-sheet-list > button { border-color: #292f49; color: #eef0ff; }

@media screen and (max-width: 900px) {
    body.messenger-view .app-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); height: calc(64px + env(safe-area-inset-bottom,0px)); min-height: 64px; overflow: hidden; }
    body.messenger-view .app-tab { font-size: clamp(9px,3vw,11px); min-width: 0; white-space: nowrap; }
    body.messenger-view .conversation-pane { overflow-y: auto; }
    body.messenger-view .conversation-pane > .pane-heading { display: none; }
    body.messenger-view .conversation-pane > .toolbar-row { padding: 0 1px; }
    body.messenger-view .conversation-pane > .toolbar-row input { min-height: 42px; }
    body.messenger-view .app-panel { grid-template-rows: 78px minmax(0,1fr) 70px; }
    body.messenger-view .app-header { min-height: 78px; padding: 10px 16px; }
    .messenger-brand-mark { background: transparent; border-radius: 14px; box-shadow: 0 10px 25px rgba(99,43,198,.18); height: 54px; width: 54px; }
    .messenger-wordmark strong { color: #5a17ba !important; font-size: 27px; letter-spacing: -.04em; }
    .messenger-wordmark span { color: #596171 !important; font-size: 11px; letter-spacing: .04em; margin-top: 4px; text-transform: none; }
    .app-header-actions { gap: 2px; }
    .header-action-button, .account-menu-button { height: 42px; min-height: 42px; width: 42px; }
    .account-menu-button { border-radius: 50%; }
    .account-menu-button > span { align-items: center; background: #6d55dd; border-radius: 50%; color: #fff; display: flex; font-size: 14px; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
    .account-menu-button > img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
    .category-toggle { font-size: 18px; font-weight: 750; min-height: 62px; padding: 12px 14px; }
    .category-icon { font-size: 20px; }
    .category-chevron { color: #5c16b9; font-size: 20px; }
    .compact-conversation-list .item-card { min-height: 86px; padding: 13px 16px !important; }
    .conversation-row { grid-template-columns: 62px minmax(0,1fr) auto; }
    .conversation-row-avatar { height: 54px; width: 54px; }
    .conversation-row > h3 { font-size: 18px; }
    .conversation-row > p { color: #596171; font-size: 15px; }
    .conversation-row-summary { font-size: 13px; }
    body.messenger-view .app-tabs { background: #fff; border-color: #e1e4eb; }
    body.messenger-view .app-tab { border-radius: 0; color: #5d6473; position: relative; }
    body.messenger-view .app-tab::before { display: none; }
    body.messenger-view .app-tab.active { background: transparent; color: #5b16b9; }
    body.messenger-view .app-tab.active::after { background: #6d20cf; content: ""; height: 3px; left: 0; position: absolute; right: 0; top: -6px; }
    body.messenger-view .conversation-pane > .toolbar-row { display: none; }
}

@media screen and (max-width: 360px) {
    body.messenger-view .app-header { padding-inline: 8px; }
    .signed-in-account { gap: 7px; }
    .messenger-brand-mark { height: 38px; width: 38px; }
    .header-action-button, .account-menu-button { height: 38px; min-height: 38px; width: 38px; }
}

/* Front-page product image alignment: one shared responsive app hierarchy. */
body.messenger-view {
    --hero-accent: #7458ed;
    --hero-accent-strong: #6042de;
    --hero-page: #e9ebf2;
    --hero-rail: #f8f9fc;
    --hero-directory: #ffffff;
    --hero-main: #f3f4f8;
    --hero-surface: #ffffff;
    --hero-surface-active: #eeeaff;
    --hero-border: #dfe2ea;
    --hero-text: #202432;
    --hero-muted: #6d7485;
    --hero-status: #087363;
    --hero-action-bg: #ffffff;
    --hero-action-text: #5943c5;
    background: radial-gradient(circle at 80% 0%, rgba(116, 88, 237, .13), transparent 34%), var(--hero-page);
}

html[data-effective-theme="dark"] body.messenger-view {
    --hero-page: #070a18;
    --hero-rail: #0a0e20;
    --hero-directory: #0e1328;
    --hero-main: #090d1d;
    --hero-surface: #171c34;
    --hero-surface-active: #211b49;
    --hero-border: #252c49;
    --hero-text: #f7f7ff;
    --hero-muted: #949db9;
    --hero-status: #65d8bf;
    --hero-action-bg: #171d37;
    --hero-action-text: #c5bcff;
    background: radial-gradient(circle at 82% 0%, rgba(116, 88, 237, .16), transparent 35%), var(--hero-page);
}

body.messenger-view .shell {
    align-items: center;
    justify-items: center;
}

body.messenger-view .app-panel {
    background: var(--hero-main);
    border: 1px solid var(--hero-border);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(8, 10, 28, .24);
    grid-template-columns: 74px minmax(300px, 356px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(900px, calc(100dvh - 32px));
    margin: 16px;
    max-width: 1440px;
    overflow: hidden;
    width: calc(100% - 32px);
}

body.messenger-view .app-header {
    align-items: center;
    background: var(--hero-rail);
    border: 0;
    border-right: 1px solid var(--hero-border);
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    padding: 14px 10px;
    z-index: 110;
}

body.messenger-view .signed-in-account { justify-content: center; }
body.messenger-view .messenger-wordmark { display: none; }
body.messenger-view .messenger-brand-mark { border-radius: 13px; height: 44px; width: 44px; }
body.messenger-view .app-header-actions { flex-direction: column; gap: 8px; height: 100%; margin: 14px 0 0; width: 100%; }
body.messenger-view .header-action-button,
body.messenger-view .account-menu-button { color: var(--hero-muted); height: 44px; min-height: 44px; width: 44px; }
body.messenger-view .header-action-button:hover,
body.messenger-view .header-action-button:focus-visible { background: var(--hero-surface-active); color: var(--hero-accent); }
body.messenger-view .account-menu-wrap { margin: auto 0 0; }
body.messenger-view .account-menu { bottom: 0; left: 54px; right: auto; top: auto; }

body.messenger-view .app-tabs {
    align-content: center;
    grid-column: 1;
    grid-row: 1;
    margin: auto 9px;
    pointer-events: none;
    width: 56px;
    z-index: 112;
}

body.messenger-view .app-tab {
    border-radius: 12px;
    color: var(--hero-muted);
    min-height: 52px;
    pointer-events: auto;
}
body.messenger-view .app-tab.active { background: var(--hero-surface-active); color: var(--hero-accent); }

body.messenger-view .conversation-pane {
    background: var(--hero-directory);
    border-right: 1px solid var(--hero-border);
    color: var(--hero-text);
    grid-column: 2;
    grid-row: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 16px 18px;
    scrollbar-gutter: stable;
}

body.messenger-view .conversation-directory-controls { display: grid; gap: 10px; margin: 18px 0 12px; }
body.messenger-view .conversation-search-wrap { position: relative; }
body.messenger-view .conversation-search-icon { border: 2px solid var(--hero-muted); border-radius: 50%; box-sizing: border-box; height: 13px; left: 14px; pointer-events: none; position: absolute; top: calc(50% - 2px); transform: translateY(-50%); width: 13px; z-index: 1; }
body.messenger-view .conversation-search-icon::after { background: var(--hero-muted); border-radius: 2px; content: ""; height: 2px; left: 9px; position: absolute; top: 9px; transform: rotate(45deg); transform-origin: left center; width: 7px; }
body.messenger-view #conversation-search { background: var(--hero-surface); border: 1px solid var(--hero-border); color: var(--hero-text); min-height: 42px; padding: 9px 12px 9px 40px; }
body.messenger-view #conversation-search::placeholder { color: var(--hero-muted); opacity: 1; }
body.messenger-view .conversation-filter-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
body.messenger-view .conversation-quick-filters { background: var(--hero-main); border: 1px solid var(--hero-border); border-radius: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; padding: 2px; }
body.messenger-view .conversation-quick-filter { background: transparent; border: 0; border-radius: 8px; color: var(--hero-muted); font-size: 12px; min-height: 34px; padding: 6px 9px; }
body.messenger-view .conversation-quick-filter.active { background: linear-gradient(135deg, var(--hero-accent), var(--hero-accent-strong)); color: #fff; }
body.messenger-view #conversation-filter { background: var(--hero-surface); border: 1px solid var(--hero-border); color: var(--hero-text); font-size: 12px; min-height: 40px; max-width: 92px; padding: 7px 26px 7px 9px; }

body.messenger-view .message-pane {
    background: var(--hero-main);
    color: var(--hero-text);
    display: grid;
    gap: 12px;
    grid-column: 3;
    grid-row: 1;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    padding: 18px 22px;
}
body.messenger-view .message-pane > .conversation-heading { grid-row: 1; }
body.messenger-view .message-pane > #messages-list { grid-row: 2; }
body.messenger-view .message-pane > .consumer-composer { grid-row: 3; }
body.messenger-view .message-pane > .conversation-heading,
body.messenger-view .message-pane > #messages-list,
body.messenger-view .message-pane > .consumer-composer { min-width: 0; width: 100%; }
body.messenger-view .message-pane > #web-shortcut-help { grid-row: 4; margin: 0; }
body.messenger-view .message-pane > #message-output { grid-row: 5; margin: 0; }
body.messenger-view .message-pane > .load-older-messages { left: 50%; position: absolute; top: 76px; transform: translateX(-50%); z-index: 3; }

body.messenger-view #contacts-tab,
body.messenger-view #groups-tab,
body.messenger-view #inbox-tab,
body.messenger-view #tools-tab,
body.messenger-view #settings-tab {
    background: var(--hero-directory);
    color: var(--hero-text);
    grid-column: 2 / -1;
    grid-row: 1;
}

body.messenger-view .pane-heading h2,
body.messenger-view .conversation-heading-copy h2,
body.messenger-view .recent-chats-heading h3,
body.messenger-view .category-toggle { color: var(--hero-text); }
body.messenger-view .conversation-heading-copy p { color: var(--hero-status); }
body.messenger-view .conversation-heading .conversation-avatar { overflow: hidden; position: relative; }
body.messenger-view .active-conversation-avatar-image { border-radius: inherit; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
body.messenger-view .conversation-heading .icon-button { background: var(--hero-action-bg); border-color: var(--hero-border); color: var(--hero-action-text); }
body.messenger-view .conversation-heading .icon-button svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 21px; }
body.messenger-view .conversation-heading #conversation-info-button circle { fill: currentColor; stroke: none; }
body.messenger-view .label,
body.messenger-view .conversation-row-summary,
body.messenger-view .recent-chats-heading span,
body.messenger-view .conversation-row > p { color: var(--hero-muted); }
body.messenger-view .conversation-row > h3,
body.messenger-view .recent-contact-card strong { color: var(--hero-text); }
body.messenger-view .recent-chats,
body.messenger-view .recent-contacts,
body.messenger-view .conversation-category,
body.messenger-view .compact-conversation-list .item-card { border-color: var(--hero-border); }
body.messenger-view .conversation-row:hover { background: color-mix(in srgb, var(--hero-accent) 8%, transparent); }
body.messenger-view .conversation-row.active,
body.messenger-view #conversations-list .conversation-row.selected,
body.messenger-view #active-groups-list .conversation-row.selected { background: var(--hero-surface-active); border-color: color-mix(in srgb, var(--hero-accent) 42%, var(--hero-border)); }
body.messenger-view #messages-list { background: radial-gradient(circle at 72% 10%, rgba(116, 88, 237, .10), transparent 34%), var(--hero-main); }
body.messenger-view #messages-list .message-bubble { background: var(--hero-surface); border: 1px solid var(--hero-border); color: var(--hero-text); }
body.messenger-view #messages-list .message-outgoing { background: linear-gradient(140deg, var(--hero-accent), var(--hero-accent-strong)); border-color: #866ff1; color: #fff; }
body.messenger-view .consumer-composer { background: var(--hero-surface); border-color: var(--hero-border); }
body.messenger-view .consumer-composer { gap: 6px; grid-template-columns: 38px 38px minmax(0, 1fr) 38px auto; padding: 7px 8px; }
body.messenger-view .consumer-composer #message-content { background: transparent; color: var(--hero-text); min-height: 42px; min-width: 0; padding: 9px 10px; resize: none; scrollbar-width: none; }
body.messenger-view .consumer-composer #message-content::-webkit-scrollbar { display: none; }
body.messenger-view .consumer-composer #send-message-button { min-height: 40px; padding: 8px 16px; }
body.messenger-view .consumer-composer .composer-action { align-items: center; display: inline-flex; justify-content: center; min-height: 38px; width: 38px; }
body.messenger-view .consumer-composer > .composer-more-options,
body.messenger-view .consumer-composer > .emoji-palette,
body.messenger-view .consumer-composer > .rich-palette,
body.messenger-view .consumer-composer > .voice-note-controls,
body.messenger-view .consumer-composer > .attachment-upload-progress { grid-column: 1 / -1; }
body.messenger-view .conversation-details { background: var(--hero-directory); border-color: var(--hero-border); color: var(--hero-text); }
body.messenger-view #app-status { grid-column: 2 / -1; grid-row: 1; }

/* Keep a live call visible beside the conversation on wide desktops, matching the
   product hierarchy in the front-page reference without inventing call content. */
@media screen and (min-width: 1280px) {
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) {
        gap: 12px 18px;
        grid-template-columns: minmax(360px, 1fr) minmax(260px, 320px);
    }
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) > :not(#call-panel) {
        grid-column: 1;
    }
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) > .conversation-heading,
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) > #messages-list,
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) > .consumer-composer,
    body.messenger-view .message-pane:has(> #call-panel:not([hidden])) > #message-output {
        grid-column: 1;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) {
        background: var(--hero-directory);
        border: 1px solid var(--hero-border);
        border-radius: 16px;
        box-shadow: none;
        display: grid;
        gap: 14px;
        grid-column: 2;
        grid-row: 1 / 6;
        grid-template-rows: auto minmax(0, 1fr) auto;
        inset: auto;
        min-height: 0;
        padding: 14px;
        position: relative;
        z-index: 2;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) .call-videos {
        grid-template-columns: 1fr;
        min-height: 0;
        overflow-y: auto;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) .call-videos video {
        max-height: none;
        min-height: 150px;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) #local-call-video {
        max-height: 150px;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) > .toolbar-row {
        align-content: start;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) > .toolbar-row > * {
        min-width: 0;
    }
    body.messenger-view .message-pane > #call-panel:not([hidden]) #end-call-button,
    body.messenger-view .message-pane > #call-panel:not([hidden]) #transfer-call-user-id {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 900px) {
    body.messenger-view .app-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: 1fr;
        grid-template-rows: 62px minmax(0, 1fr) calc(64px + env(safe-area-inset-bottom, 0px));
        height: 100dvh;
        margin: 0;
        width: 100%;
    }
    body.messenger-view .app-header {
        background: var(--hero-directory);
        border-bottom: 1px solid var(--hero-border);
        border-right: 0;
        display: flex;
        flex-direction: row;
        grid-column: 1;
        grid-row: 1;
        min-height: 62px;
        padding: max(8px, env(safe-area-inset-top, 0px)) 14px 8px;
    }
    body.messenger-view .app-header::before {
        color: var(--hero-text);
        content: "Chats";
        font-size: 22px;
        font-weight: 780;
        letter-spacing: -.025em;
    }
    body.messenger-view[data-current-tab="content"] .app-header::before { content: "Content"; }
    body.messenger-view[data-current-tab="inbox"] .app-header::before { content: "Messenger"; }
    body.messenger-view[data-current-tab="settings"] .app-header::before { content: "Settings"; }
    body.messenger-view .signed-in-account { display: none; }
    body.messenger-view .app-header-actions { flex-direction: row; gap: 3px; height: auto; margin: 0 0 0 auto; width: auto; }
    body.messenger-view .account-menu-wrap { margin: 0; }
    body.messenger-view .account-menu { bottom: auto; left: auto; right: 0; top: 50px; }
    body.messenger-view .app-tabs {
        background: var(--hero-directory);
        border-top: 1px solid var(--hero-border);
        bottom: 0;
        display: grid;
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        left: 0;
        margin: 0;
        padding: 5px max(8px, env(safe-area-inset-right, 0px)) max(5px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        position: fixed;
        right: 0;
        width: auto;
    }
    body.messenger-view .app-tab { border-radius: 0; min-height: 52px; }
    body.messenger-view .app-tab.active { background: transparent; }
    body.messenger-view .app-tab.active::after { background: var(--hero-accent); top: -5px; }
    body.messenger-view .conversation-pane,
    body.messenger-view .message-pane,
    body.messenger-view #contacts-tab,
    body.messenger-view #groups-tab,
    body.messenger-view #inbox-tab,
    body.messenger-view #tools-tab,
    body.messenger-view #settings-tab {
        grid-column: 1;
        grid-row: 2;
        padding: 12px 14px calc(74px + env(safe-area-inset-bottom, 0px));
    }
    body.messenger-view .conversation-pane { display: block; }
    body.messenger-view .message-pane { display: none; }
    body.messenger-view.mobile-chat-open .conversation-pane { display: none; }
    body.messenger-view.mobile-chat-open .app-header { display: none; }
    body.messenger-view.mobile-chat-open .message-pane { box-sizing: border-box; display: grid; grid-row: 1 / 3; max-width: 100%; min-width: 0; padding-top: max(8px, env(safe-area-inset-top, 0px)); width: 100%; }
    body.messenger-view .conversation-heading { gap: 6px; min-width: 0; }
    body.messenger-view .conversation-heading-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.messenger-view .conversation-heading .conversation-avatar,
    body.messenger-view .conversation-heading .icon-button { height: 38px; min-height: 38px; width: 38px; }
    body.messenger-view .message-pane > #web-shortcut-help { display: none; }
    body.messenger-view .compact-conversation-list .item-card { min-height: 68px; padding: 8px 4px !important; }
    body.messenger-view .conversation-row { grid-template-columns: 50px minmax(0, 1fr) auto; }
    body.messenger-view .conversation-row-avatar,
    body.messenger-view .conversation-avatar-image { height: 44px; width: 44px; }
    body.messenger-view .conversation-row > h3 { font-size: 14px; }
    body.messenger-view .conversation-row > p { font-size: 12px; }
    body.messenger-view .conversation-row-summary { font-size: 11px; }
    body.messenger-view .recent-chats-heading h3 { font-size: 17px; }
    body.messenger-view .recent-chats-heading { align-items: center; }
}

@media screen and (min-width: 901px) and (max-width: 1120px) {
    body.messenger-view .app-panel { grid-template-columns: 68px minmax(270px, 320px) minmax(0, 1fr); }
    body.messenger-view .app-header { padding-inline: 7px; }
    body.messenger-view .app-tabs { margin-inline: 6px; }
    body.messenger-view .message-pane { padding-inline: 16px; }
}

/* Mobile product frame: mirror the public hero's branded, calm directory layout. */
@media screen and (max-width: 900px) {
    body.messenger-view .app-panel {
        grid-template-rows: calc(88px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(70px + env(safe-area-inset-bottom, 0px));
    }

    body.messenger-view .app-header {
        min-height: calc(88px + env(safe-area-inset-top, 0px));
        padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
    }

    body.messenger-view .app-header::before { content: none; }
    body.messenger-view .signed-in-account { display: flex; gap: 10px; min-width: 0; }
    body.messenger-view .messenger-brand-mark { flex: 0 0 50px; height: 50px; width: 50px; }
    body.messenger-view .messenger-wordmark { display: grid; min-width: 0; }
    body.messenger-view .messenger-wordmark strong { font-size: clamp(22px, 6.5vw, 28px); }
    body.messenger-view .messenger-wordmark span { font-size: clamp(9px, 2.7vw, 12px); white-space: nowrap; }
    body.messenger-view .app-header-actions { flex: 0 0 auto; }
    body.messenger-view .header-action-button,
    body.messenger-view .account-menu-button { height: 42px; min-height: 42px; width: 42px; }

    body.messenger-view .conversation-pane {
        display: block;
        padding: 10px max(0px, env(safe-area-inset-right, 0px)) calc(76px + env(safe-area-inset-bottom, 0px)) max(0px, env(safe-area-inset-left, 0px));
    }
    body.messenger-view #conversations-list { overflow-y: visible; }
    body.messenger-view .conversation-directory-controls { margin: 8px 14px 12px; }
    body.messenger-view .category-toggle {
        border-radius: 0;
        min-height: 62px;
        padding-inline: 18px;
    }
    body.messenger-view .compact-conversation-list .item-card {
        min-height: 84px;
        padding: 12px 18px !important;
    }
    body.messenger-view .conversation-row { grid-template-columns: 62px minmax(0, 1fr) auto; }
    body.messenger-view .conversation-row-avatar,
    body.messenger-view .conversation-avatar-image { height: 54px; width: 54px; }
    body.messenger-view .conversation-row > h3 { font-size: 18px; letter-spacing: -.02em; }
    body.messenger-view .conversation-row > p { font-size: 15px; }
    body.messenger-view .conversation-row-summary { font-size: 13px; }

    body.messenger-view .app-tabs {
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        min-height: 70px;
        padding-top: 6px;
    }
    body.messenger-view .app-tab { font-size: clamp(9px, 3vw, 11px); gap: 3px; min-height: 56px; }
    body.messenger-view .app-tab .nav-icon { height: 25px; width: 25px; }
}

@media screen and (max-width: 390px) {
    body.messenger-view .messenger-brand-mark { flex-basis: 44px; height: 44px; width: 44px; }
    body.messenger-view .signed-in-account { gap: 7px; }
    body.messenger-view .header-action-button,
    body.messenger-view .account-menu-button { height: 38px; min-height: 38px; width: 38px; }

    body.messenger-view.mobile-chat-open .conversation-heading { gap: 4px; }
    body.messenger-view.mobile-chat-open .conversation-heading .icon-button {
        flex: 0 0 36px;
        min-height: 36px;
        width: 36px;
    }
    body.messenger-view.mobile-chat-open .conversation-heading .conversation-avatar {
        flex: 0 0 38px;
        height: 38px;
        width: 38px;
    }
    body.messenger-view.mobile-chat-open .conversation-heading-copy p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.messenger-view.mobile-chat-open .consumer-composer {
        gap: 2px;
        grid-template-columns: 34px 34px minmax(0, 1fr) 34px auto;
        padding: 6px;
    }
    body.messenger-view.mobile-chat-open .consumer-composer .composer-action {
        min-height: 34px;
        width: 34px;
    }
    body.messenger-view.mobile-chat-open .consumer-composer #message-content { min-width: 0; padding-inline: 6px; }
    body.messenger-view.mobile-chat-open .consumer-composer #send-message-button { padding-inline: 10px; }
}

html[data-effective-theme="dark"] body.messenger-view .messenger-wordmark strong {
    color: #d8d2ff !important;
}

html[data-effective-theme="dark"] body.messenger-view .messenger-wordmark span {
    color: #b6bfd8 !important;
}

/* The current rail uses explicit accessible SVGs; suppress legacy generated
   glyphs so every destination has exactly one visual icon. */
body.messenger-view .app-tab::before { display: none; }

body.messenger-view .account-menu-button > #header-avatar-fallback {
    align-items: center;
    background: linear-gradient(145deg, var(--hero-accent), var(--hero-accent-strong));
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}

body.messenger-view .account-menu-button > #header-avatar {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

body.messenger-view .app-tab.active { color: var(--hero-accent-strong); }

body.messenger-view .app-tab:focus-visible,
body.messenger-view .recent-contact-add:focus-visible {
    outline: 3px solid var(--hero-accent-strong);
    outline-offset: 2px;
}

html[data-effective-theme="dark"] body.messenger-view .app-tab.active,
html[data-effective-theme="dark"] body.messenger-view .recent-contact-add {
    color: var(--hero-action-text);
}

html[data-effective-theme="dark"] body.messenger-view .app-tab:focus-visible,
html[data-effective-theme="dark"] body.messenger-view .recent-contact-add:focus-visible {
    outline-color: var(--hero-action-text);
}

/* Keep the primary authentication action visible when a mobile keyboard reduces
   the visual viewport. Recovery and SSO remain available by scrolling. */
#form-error:empty { display: none; }

@media screen and (max-width: 900px) and (max-height: 600px) {
    body:not(.messenger-view) .shell {
        align-content: start;
        padding: max(8px, env(safe-area-inset-top, 0px)) 12px max(8px, env(safe-area-inset-bottom, 0px));
    }

    body:not(.messenger-view) #login-panel { padding: 12px; }
    body:not(.messenger-view) #login-form { gap: 10px; }
    body:not(.messenger-view) #login-form label { gap: 5px; }
    body:not(.messenger-view) #login-form .label { margin-bottom: 3px; }
    body:not(.messenger-view) #login-form .reauth-brand img { height: 38px; width: 38px; }
    body:not(.messenger-view) #login-form .mode-tab { min-height: 40px; padding-block: 7px; }
}

/* Match the shipped product artwork on phones: retain the shield in the desktop
   rail, but use a compact contextual title and denser conversation directory on
   mobile so recent chats remain visible without excessive scrolling. */
@media screen and (max-width: 900px) {
    body.messenger-view .app-panel {
        grid-template-rows: calc(72px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(68px + env(safe-area-inset-bottom, 0px));
    }

    body.messenger-view .app-header {
        min-height: calc(72px + env(safe-area-inset-top, 0px));
        padding: calc(8px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
    }

    body.messenger-view .app-header::before {
        color: var(--hero-text);
        content: "Chats";
        display: block;
        font-size: 22px;
        font-weight: 780;
        letter-spacing: -.025em;
    }
    body.messenger-view[data-current-tab="content"] .app-header::before { content: "Content"; }
    body.messenger-view[data-current-tab="inbox"] .app-header::before { content: "Messenger"; }
    body.messenger-view[data-current-tab="settings"] .app-header::before { content: "Settings"; }
    body.messenger-view .signed-in-account { display: none; }

    body.messenger-view .compact-conversation-list .item-card {
        min-height: 72px;
        padding: 9px 14px !important;
    }
    body.messenger-view .conversation-row { grid-template-columns: 54px minmax(0, 1fr) auto; }
    body.messenger-view .conversation-row-avatar,
    body.messenger-view .conversation-avatar-image { height: 48px; width: 48px; }
    body.messenger-view .conversation-row > h3 { font-size: 16px; }
    body.messenger-view .conversation-row > p { font-size: 13px; }
    body.messenger-view .conversation-row-summary { font-size: 11px; }

    body.messenger-view .app-tabs {
        height: calc(68px + env(safe-area-inset-bottom, 0px));
        min-height: 68px;
    }
}

/* Final product-art alignment. The front-page render is the visual contract:
   a compact icon rail, a quiet directory, and one focused conversation canvas. */
@media screen and (min-width: 901px) {
    body.messenger-view .app-tab > span {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    body.messenger-view .app-tab .nav-icon { height: 24px; width: 24px; }
    body.messenger-view .conversation-pane > .pane-heading .label { display: none; }
    body.messenger-view .conversation-pane > .pane-heading h2 {
        font-size: 24px;
        letter-spacing: -.025em;
        margin: 0;
    }
    body.messenger-view .conversation-heading {
        border-bottom: 1px solid var(--hero-border);
        min-height: 58px;
        padding-bottom: 12px;
    }
    body.messenger-view .compact-conversation-list .item-card { padding-inline: 10px !important; }
}

html[data-effective-theme="dark"] body.messenger-view #messages-list .message-date-separator {
    background: var(--hero-surface);
    color: var(--hero-muted);
}

html[data-effective-theme="dark"] body.messenger-view .consumer-composer #message-content::placeholder {
    color: var(--hero-muted);
    opacity: 1;
}

/* Keep scrollable directories and timelines legible without a bright native
   scrollbar cutting through the dark product canvas. */
body.messenger-view .conversation-pane,
body.messenger-view #messages-list,
body.messenger-view .conversation-details,
body.messenger-view .tab-panel {
    scrollbar-color: #59617d #0a0f20;
    scrollbar-width: thin;
}

body.messenger-view #messages-list {
    scrollbar-width: none;
}

body.messenger-view #messages-list::-webkit-scrollbar {
    display: none;
}

body.messenger-view .conversation-pane::-webkit-scrollbar,
body.messenger-view #messages-list::-webkit-scrollbar,
body.messenger-view .conversation-details::-webkit-scrollbar,
body.messenger-view .tab-panel::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

body.messenger-view .conversation-pane::-webkit-scrollbar-thumb,
body.messenger-view #messages-list::-webkit-scrollbar-thumb,
body.messenger-view .conversation-details::-webkit-scrollbar-thumb,
body.messenger-view .tab-panel::-webkit-scrollbar-thumb {
    background: #59617d;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

body.messenger-view .conversation-pane::-webkit-scrollbar-track,
body.messenger-view #messages-list::-webkit-scrollbar-track,
body.messenger-view .conversation-details::-webkit-scrollbar-track,
body.messenger-view .tab-panel::-webkit-scrollbar-track {
    background: #0a0f20;
}

@media screen and (max-width: 900px) {
    body.messenger-view .conversation-pane { scrollbar-width: none; }
    body.messenger-view .conversation-pane::-webkit-scrollbar { display: none; }
}

@media screen and (max-width: 360px) {
    body.messenger-view .consumer-composer { gap: 3px; grid-template-columns: 36px 36px minmax(0, 1fr) 36px auto; padding: 6px; }
    body.messenger-view .consumer-composer .composer-action { min-height: 40px; width: 36px; }
    body.messenger-view .consumer-composer #message-content { padding-inline: 6px; }
    body.messenger-view .consumer-composer #send-message-button { padding-inline: 10px; }
}

/* Preserve every chat and navigation action when browser zoom reduces a phone
   to an approximately 200 CSS-pixel reflow viewport. */
@media screen and (max-width: 240px) {
    body.messenger-view .app-tab { font-size: 7px; }
    body.messenger-view .app-header { padding-inline: 6px; }
    body.messenger-view .app-header::before { font-size: 20px; }
    body.messenger-view .header-action-button,
    body.messenger-view .account-menu-button { height: 32px; min-height: 32px; width: 32px; }
    body.messenger-view .account-menu-button > #header-avatar-fallback { height: 28px; width: 28px; }
    body.messenger-view .recent-chats-heading { align-items: start; display: grid; gap: 4px; justify-items: start; }
    body.messenger-view .recent-chats-heading h2,
    body.messenger-view .recent-chats-heading h3 { font-size: 16px; }
    body.messenger-view .recent-chats-heading span { text-align: left; }
    body.messenger-view .recent-contact-add { justify-self: start; padding-inline: 0; text-align: left; white-space: normal; }
    body.messenger-view.mobile-chat-open .message-pane { padding-inline: 6px; }
    body.messenger-view.mobile-chat-open .conversation-heading { gap: 2px; }
    body.messenger-view.mobile-chat-open .conversation-heading .conversation-avatar { display: none; }
    body.messenger-view.mobile-chat-open .conversation-heading .icon-button { flex-basis: 32px; height: 32px; min-height: 32px; width: 32px; }
    body.messenger-view.mobile-chat-open .conversation-heading-copy h2 { font-size: 16px; }
    body.messenger-view.mobile-chat-open .conversation-heading-copy p { display: none; }
    body.messenger-view.mobile-chat-open .consumer-composer { gap: 1px; grid-template-columns: 24px 24px minmax(0, 1fr) 24px auto; padding: 4px; }
    body.messenger-view.mobile-chat-open .consumer-composer .composer-action { min-height: 32px; padding-inline: 1px; width: 24px; }
    body.messenger-view.mobile-chat-open .consumer-composer #message-content { font-size: 14px; padding-inline: 2px; width: 100%; }
    body.messenger-view.mobile-chat-open .consumer-composer #send-message-button { font-size: 14px; padding-inline: 6px; }
}