:root {
    color-scheme: light;
    font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    color: #343a40;
    background: #f4f6f9;
    font-synthesis: none;
    --primary: #007bff;
    --primary-dark: #0069d9;
    --navy: #343a40;
    --light: #f4f6f9;
    --border: #dee2e6;
    --muted: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; background: var(--light); }
button, input, textarea { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }

.main-header {
    position: relative;
    z-index: 20;
    height: 57px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 18px;
    color: rgba(255,255,255,.88);
    background: var(--navy);
    border-bottom: 1px solid #4b545c;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.navbar-brand, .navbar-actions, .navbar-user { display: flex; align-items: center; }
.navbar-brand { gap: 10px; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; }
.brand-mark {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 5px;
    color: #fff;
    background: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.brand-mark.large { width: 46px; height: 46px; border-radius: 8px; font-size: 16px; }
.navbar-actions { gap: 8px; }
.navbar-user { gap: 8px; padding: 0 10px; color: rgba(255,255,255,.84); text-decoration: none; }
.navbar-user:hover { color: #fff; background: rgba(255,255,255,.06); }
.navbar-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #495057;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.navbar-button { height: 57px; padding: 0 13px; border: 0; color: rgba(255,255,255,.82); background: transparent; }
.navbar-button:hover { color: #fff; background: rgba(255,255,255,.06); }

.flash, .alert {
    position: relative;
    z-index: 30;
    width: min(920px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}
.flash { color: #155724; background: #d4edda; border: 1px solid #c3e6cb; }
.alert { color: #721c24; background: #f8d7da; border: 1px solid #f5c6cb; }
.alert ul { margin: 7px 0 0; padding-left: 20px; }

.content-wrapper { background: var(--light); }
.page-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 26px 0 40px; }
.narrow-page { max-width: 920px; }
.content-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.content-header h1 { margin: 0; color: #343a40; font-size: 25px; font-weight: 400; }
.content-header p { margin: 5px 0 0; color: var(--muted); }

.card {
    background: #fff;
    border: 0;
    border-top: 3px solid var(--primary);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
}
.card-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background: #fff;
}
.card-header h2 { margin: 0; font-size: 17px; font-weight: 500; }
.card-body { padding: 20px; }

.primary-button, .secondary-button, .danger-button, .send-button, .input-group-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 8px 14px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
}
.primary-button, .send-button { color: #fff; background: var(--primary); border-color: var(--primary); }
.primary-button:hover, .send-button:hover { background: var(--primary-dark); border-color: #0062cc; }
.secondary-button { color: #343a40; background: #fff; border-color: #ced4da; }
.secondary-button:hover { background: #e9ecef; }
.danger-button { color: #fff; background: var(--danger); border-color: var(--danger); }
.danger-button:hover { background: #c82333; border-color: #bd2130; }
.compact { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.full-button { width: 100%; }

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #e9ecef;
}
.auth-card {
    width: min(420px, 100%);
    padding: 28px;
    background: #fff;
    border-top: 3px solid var(--primary);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,.14);
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; font-size: 22px; }
.auth-heading { text-align: center; }
.auth-heading h1 { margin: 0 0 8px; font-size: 21px; font-weight: 400; }
.auth-heading p { margin: 0 0 22px; color: var(--muted); }
.auth-switch { margin: 22px 0 0; text-align: center; color: var(--muted); }
.auth-switch a { color: var(--primary); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.stack-form { display: grid; gap: 16px; }
.stack-form label { display: grid; gap: 6px; color: #495057; font-size: 14px; font-weight: 600; }
.stack-form input, .stack-form textarea, .input-group input, .direct-chat-input textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 9px 11px;
    color: #495057;
    background: #fff;
    outline: none;
}
.stack-form input:focus, .stack-form textarea:focus, .input-group input:focus, .direct-chat-input textarea:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.18);
}
.stack-form textarea { resize: vertical; }
.stack-form small, .contact-search small { color: var(--muted); font-weight: 400; }
.checkbox-row { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.checkbox-row input { width: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; justify-content: flex-end; }
.form-section-title { margin-top: 5px; padding-top: 18px; border-top: 1px solid var(--border); }
.form-section-title h3 { margin: 0; font-size: 17px; font-weight: 500; }
.form-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.profile-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 16px; background: #f8f9fa; border: 1px solid var(--border); border-radius: 3px; }
.profile-summary strong, .profile-summary code, .profile-summary p { display: block; }
.profile-summary code { margin: 4px 0; color: var(--primary); }
.profile-summary p { margin: 0; color: var(--muted); }

.avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: visible;
    border-radius: 50%;
    color: #fff;
    background: #6c757d;
    font-weight: 700;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-small { width: 42px; height: 42px; }
.avatar-large { width: 78px; height: 78px; font-size: 25px; }
.avatar-status { position: absolute; right: -1px; bottom: 0; border: 2px solid #fff; }
.online-dot, .status-indicator { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #adb5bd; }
.online-dot.online, .status-indicator.online { background: var(--success); }

.chat-page { height: calc(100vh - 57px); padding: 18px; overflow: hidden; }
.chat-layout { width: min(1480px, 100%); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; }
.contacts-card, .direct-chat-card { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.contacts-card { border-top-color: #6c757d; }
.contacts-header { background: #343a40; color: #fff; border-bottom: 0; }
.user-panel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-panel-copy { min-width: 0; }
.user-panel-copy strong, .user-panel-copy span { display: block; }
.user-panel-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel-copy span { margin-top: 2px; color: rgba(255,255,255,.7); font-size: 12px; }
.user-panel-copy .status-indicator { margin-right: 4px; }
.contact-search { padding: 14px; border-bottom: 1px solid var(--border); background: #f8f9fa; }
.contact-search label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.contact-search small { display: block; margin-top: 6px; font-size: 11px; }
.input-group { display: flex; }
.input-group input { min-width: 0; border-radius: 3px 0 0 3px; }
.input-group-button { flex: 0 0 auto; color: #fff; background: var(--primary); border-color: var(--primary); border-radius: 0 3px 3px 0; }
.input-group-button:hover { background: var(--primary-dark); }
.search-result { display: grid; gap: 10px; margin-top: 10px; padding: 11px; background: #fff; border: 1px solid var(--border); border-radius: 3px; }
.search-result.error { color: #721c24; background: #f8d7da; border-color: #f5c6cb; }
.search-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-user > div:last-child { min-width: 0; }
.search-user strong, .search-user code, .search-user small { display: block; }
.search-user code { margin-top: 2px; color: var(--primary); font-size: 11px; }
.search-user small { margin-top: 2px; color: var(--muted); }
.contacts-title { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.badge { min-width: 22px; padding: 3px 7px; border-radius: 10rem; color: #fff; background: var(--primary); text-align: center; font-size: 11px; }
.contacts-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }
.contact-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 14px; border-bottom: 1px solid #f0f0f0; text-decoration: none; }
.contact-item:hover { background: #f8f9fa; }
.contact-item.active { color: #fff; background: var(--primary); }
.contact-item.active .contact-copy p { color: rgba(255,255,255,.78); }
.contact-copy { min-width: 0; flex: 1; }
.contact-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contact-name-row strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

.contact-copy p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-chat-state.has-new-chat {
    color: #dc3545;
    font-weight: 800;
    letter-spacing: .25px;
}
.contact-item.active .contact-chat-state { color: rgba(255,255,255,.78); }
.contact-item.active .contact-chat-state.has-new-chat { color: #fff; }
.empty-contacts { padding: 36px 20px; color: var(--muted); text-align: center; }
.empty-contacts p { margin: 6px 0 0; line-height: 1.5; }

.direct-chat-header { justify-content: space-between; gap: 14px; }
.chat-person { min-width: 0; display: flex; align-items: center; gap: 11px; }
.chat-person > div:last-child { min-width: 0; }
.chat-person h1 { margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-person p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.header-separator { margin: 0 4px; }
#chat-app { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.direct-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background-color: #eef1f5;
    background-image: radial-gradient(#d9dee5 0.6px, transparent 0.6px);
    background-size: 18px 18px;
}
.loading-state, .empty-messages { height: 100%; display: grid; place-items: center; color: #7f8c8d; text-align: center; }
.message-row { display: flex; margin-bottom: 14px; }
.message-row.mine { justify-content: flex-end; }
.message-bubble {
    position: relative;
    max-width: min(74%, 680px);
    padding: 9px 11px 6px;
    color: #343a40;
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.message-row.mine .message-bubble { color: #fff; background: var(--primary); border-color: var(--primary); }
.message-bubble::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -7px;
    border-width: 6px 7px 6px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}
.message-row.mine .message-bubble::before { left: auto; right: -7px; border-width: 6px 0 6px 7px; border-color: transparent transparent transparent var(--primary); }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.message-bubble time { display: block; margin-top: 5px; color: #8a949d; font-size: 10px; text-align: right; }
.message-row.mine .message-bubble time { color: rgba(255,255,255,.72); }
.message-image { display: block; max-width: 100%; max-height: 360px; margin: 1px 0 7px; border-radius: 3px; object-fit: cover; }
.file-card { display: flex; align-items: center; gap: 9px; min-width: 210px; margin-top: 7px; padding: 8px; color: inherit; background: #f1f3f5; border-radius: 3px; text-decoration: none; }
.message-row.mine .file-card { background: rgba(255,255,255,.14); }
.file-card > span:first-child { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 3px; background: rgba(0,0,0,.08); font-size: 9px; font-weight: 700; }
.file-card > span:last-child { min-width: 0; }
.file-card strong, .file-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card small { margin-top: 2px; opacity: .72; }
.direct-chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: #fff; }
.attachment-button { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #ced4da; border-radius: 3px; color: #495057; background: #f8f9fa; font-size: 23px; cursor: pointer; }
.attachment-button:hover { background: #e9ecef; }
.attachment-button input { display: none; }
.composer-center { min-width: 0; flex: 1; }
.direct-chat-input textarea { min-height: 40px; max-height: 140px; resize: none; padding: 9px 10px; }
.selected-file { margin-top: 4px; color: var(--muted); font-size: 11px; }
.inline-error { margin-top: 4px; color: var(--danger); font-size: 12px; }
.send-button { min-height: 40px; }
.empty-chat { flex: 1; display: grid; align-content: center; justify-items: center; padding: 30px; color: var(--muted); text-align: center; }
.empty-chat-icon { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 20px; font-weight: 800; box-shadow: 0 5px 16px rgba(0,123,255,.24); }
.empty-chat h1 { margin: 0; color: #495057; font-size: 22px; font-weight: 400; }
.empty-chat p { margin: 8px 0 0; }

@media (max-width: 820px) {
    .main-header { padding: 0 10px; }
    .navbar-user > span:last-child { display: none; }
    .chat-page { height: auto; min-height: calc(100vh - 57px); padding: 10px; overflow: visible; }
    .chat-layout { height: auto; grid-template-columns: 1fr; }
    .contacts-card { height: 390px; }
    .direct-chat-card { height: calc(100vh - 90px); min-height: 540px; }
    .form-grid { grid-template-columns: 1fr; }
    .content-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .navbar-brand > span:last-child { display: none; }
    .chat-page { padding: 0; }
    .chat-layout { gap: 0; }
    .contacts-card, .direct-chat-card { border-radius: 0; }
    .direct-chat-header { align-items: flex-start; }
    .danger-button { font-size: 0; }
    .danger-button::after { content: "Hapus"; font-size: 12px; }
    .message-bubble { max-width: 88%; }
    .direct-chat-messages { padding: 14px; }
    .send-button { padding: 8px 11px; }
    .auth-shell { padding: 16px; }
    .auth-card { padding: 22px; }
}

/* Friendship, privacy, auto-delete, PWA, and theme additions */
.navbar-button.active { color: #7ee787; }
.sidebar-section { border-bottom: 1px solid var(--border); }
.compact-section { padding-bottom: 4px; }
.friend-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid rgba(0,0,0,.05); }
.friend-copy { min-width: 0; flex: 1; }
.friend-copy strong, .friend-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.friend-actions { display: flex; gap: 4px; }
.mini-button { min-height: 27px; padding: 4px 7px; border: 1px solid #ced4da; border-radius: 3px; color: #495057; background: #fff; font-size: 11px; }
.mini-button:hover { background: #e9ecef; }
.mini-button.primary { color: #fff; border-color: var(--primary); background: var(--primary); }
.mini-button.success { color: #fff; border-color: var(--success); background: var(--success); }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 13px; color: var(--muted); font-size: 12px; }
.link-button { padding: 0; border: 0; color: var(--primary); background: transparent; font: inherit; }
.link-button:hover { text-decoration: underline; }
.search-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge-warning { color: #212529; background: #ffc107 !important; }
.badge-success { color: #fff; background: var(--success) !important; }
.security-card { margin-top: 20px; }
.security-card .card-header { justify-content: space-between; }
.section-note { margin: 0 0 18px; color: var(--muted); }
.split-actions { justify-content: space-between; gap: 12px; }
.chat-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.auto-delete-control { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.auto-delete-control select { min-height: 32px; padding: 4px 7px; border: 1px solid #ced4da; border-radius: 3px; color: #495057; background: #fff; }
.message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 5px; font-size: 10px; opacity: .72; }
.message-meta time { position: static !important; }
.message-meta span { font-style: italic; }

.pin-lock-page { min-height: 100vh; background: #05070b; color: #fff; }
.pin-lock-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.pin-lock-card { width: min(360px, 100%); text-align: center; }
.pin-lock-icon { margin-bottom: 24px; color: #6b7280; font-size: 17px; letter-spacing: 8px; }
.pin-lock-card h1 { margin: 0; font-size: 26px; font-weight: 500; }
.pin-lock-card p { margin: 8px 0 22px; color: #9ca3af; }
.pin-form { display: grid; gap: 12px; }
.pin-form input { width: 100%; padding: 14px; border: 1px solid #374151; border-radius: 7px; color: #fff; background: #111827; font-size: 22px; letter-spacing: 10px; text-align: center; outline: none; }
.pin-form input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.pin-error { margin-bottom: 13px; padding: 9px; border-radius: 5px; color: #fecaca; background: rgba(127,29,29,.5); }
.muted-link { margin-top: 18px; color: #9ca3af; }

html[data-theme="dark"] {
    color-scheme: dark;
    color: #d1d5db;
    background: #111827;
    --light: #111827;
    --border: #374151;
    --muted: #9ca3af;
    --navy: #0b1220;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper { background: #111827; color: #d1d5db; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .direct-chat-input { background: #1f2937; color: #e5e7eb; }
html[data-theme="dark"] .card-header { border-bottom-color: #374151; }
html[data-theme="dark"] .content-header h1,
html[data-theme="dark"] .empty-chat h1,
html[data-theme="dark"] .stack-form label { color: #e5e7eb; }
html[data-theme="dark"] .contact-search,
html[data-theme="dark"] .profile-summary { background: #18212f; }
html[data-theme="dark"] .stack-form input,
html[data-theme="dark"] .stack-form textarea,
html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .direct-chat-input textarea,
html[data-theme="dark"] .auto-delete-control select,
html[data-theme="dark"] .mini-button,
html[data-theme="dark"] .secondary-button { color: #e5e7eb; border-color: #4b5563; background: #111827; }
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .mini-button:hover { background: #293548; }
html[data-theme="dark"] .contacts-list,
html[data-theme="dark"] .direct-chat-messages { background: #141c28; }
html[data-theme="dark"] .contact-item { border-bottom-color: rgba(255,255,255,.06); }
html[data-theme="dark"] .contact-item:hover { background: #253044; }
html[data-theme="dark"] .contact-item.active { background: #1d4f8c; }
html[data-theme="dark"] .friend-row { border-top-color: rgba(255,255,255,.06); }
html[data-theme="dark"] .message-row.theirs .message-bubble { color: #e5e7eb; background: #2c3749; }
html[data-theme="dark"] .attachment-button { color: #e5e7eb; border-color: #4b5563; background: #111827; }
html[data-theme="dark"] .attachment-button:hover { background: #293548; }
html[data-theme="dark"] .file-card { color: inherit; }
html[data-theme="dark"] .auth-shell { background: #111827; }
html[data-theme="dark"] .auth-card { color: #e5e7eb; background: #1f2937; }

@media (max-width: 1000px) {
    .direct-chat-header { align-items: flex-start; gap: 10px; }
    .chat-header-actions { align-items: flex-end; flex-direction: column; }
}

@media (max-width: 820px) {
    .navbar-actions { gap: 1px; }
    .navbar-button { padding: 0 8px; font-size: 12px; }
    .chat-header-actions { width: 100%; align-items: stretch; }
    .auto-delete-control { justify-content: space-between; }
    .direct-chat-header { flex-direction: column; }
    .split-actions { align-items: stretch; flex-direction: column; }
}
.danger-link { color: var(--danger); }
.friendship-required { padding: 14px; border-top: 1px solid var(--border); color: var(--muted); background: rgba(220,53,69,.07); text-align: center; font-size: 13px; }

/* WebRTC audio/video calls */
.call-launchers { display: flex; align-items: center; gap: 6px; }
.call-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #ced4da;
    border-radius: 50%;
    color: #495057;
    background: #fff;
    font-size: 16px;
}
.call-button:hover { color: #fff; border-color: var(--primary); background: var(--primary); }

.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 7, 18, .88);
    backdrop-filter: blur(8px);
}
.call-window {
    width: min(760px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: #fff;
    background: #0b1220;
    box-shadow: 0 24px 80px rgba(0,0,0,.48);
}
.call-stage {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at top, #26364f 0, #111827 48%, #05070b 100%);
}
.remote-video { width: 100%; height: 100%; min-height: 420px; object-fit: cover; background: #05070b; }
.remote-audio { display: none; }
.audio-call .remote-video { display: none; }
.call-audio-placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.video-call .call-audio-placeholder[hidden] { display: none !important; }
.call-avatar {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff;
    background: #374151;
    font-size: 48px;
    font-weight: 700;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.local-video {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 150px;
    height: 200px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 9px;
    background: #111827;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.audio-call .local-video { display: none; }
.call-copy { padding: 14px 18px 7px; text-align: center; }
.call-copy strong, .call-copy span { display: block; }
.call-copy strong { font-size: 20px; }
.call-copy span { margin-top: 4px; color: #9ca3af; font-size: 13px; }
.call-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px 20px; }
.call-control {
    min-width: 58px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #4b5563;
    border-radius: 22px;
    color: #fff;
    background: #253044;
}
.call-control:hover, .call-control.active { background: #374151; }
.call-control.success { border-color: #22c55e; background: #16a34a; }
.call-control.danger { border-color: #ef4444; background: #dc2626; }

.call-overlay.call-minimized {
    inset: auto 18px 18px auto;
    display: block;
    width: min(340px, calc(100vw - 24px));
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}
.call-minimized .call-window { width: 100%; border-radius: 10px; }
.call-minimized .call-stage { min-height: 180px; }
.call-minimized .remote-video { min-height: 180px; max-height: 210px; }
.call-minimized .call-avatar { width: 78px; height: 78px; font-size: 28px; }
.call-minimized .local-video { right: 8px; bottom: 8px; width: 68px; height: 92px; }
.call-minimized .call-copy { padding: 9px 10px 2px; }
.call-minimized .call-copy strong { font-size: 15px; }
.call-minimized .call-actions { gap: 5px; padding: 8px 8px 11px; flex-wrap: wrap; }
.call-minimized .call-control { min-width: 44px; min-height: 34px; padding: 5px 8px; font-size: 11px; }

html[data-theme="dark"] .call-button { color: #e5e7eb; border-color: #4b5563; background: #111827; }
html[data-theme="dark"] .call-button:hover { border-color: var(--primary); background: var(--primary); }

@media (max-width: 720px) {
    .call-overlay { padding: 0; }
    .call-window { width: 100%; height: 100%; border: 0; border-radius: 0; }
    .call-stage { min-height: calc(100vh - 150px); }
    .remote-video { min-height: calc(100vh - 150px); }
    .local-video { width: 105px; height: 145px; }
    .call-overlay.call-minimized { inset: auto 10px 10px auto; width: min(310px, calc(100vw - 20px)); }
    .call-minimized .call-window { height: auto; border-radius: 10px; }
    .call-minimized .call-stage, .call-minimized .remote-video { min-height: 170px; }
}

/* Mobile v2.3 — pola navigasi daftar chat → percakapan */
.brand-copy { display: inline-flex; align-items: baseline; gap: 7px; }
.brand-copy small { color: rgba(255,255,255,.55); font-size: 10px; font-weight: 500; }
.navbar-settings-link { display: inline-flex; align-items: center; text-decoration: none; }
.contacts-header { justify-content: space-between; }
.contacts-header-actions { display: flex; align-items: center; gap: 8px; }
.header-icon-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.1);
    text-decoration: none;
}
.header-icon-button:hover { background: rgba(255,255,255,.18); }
.connection-status {
    max-width: 126px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.09);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.connection-status[data-state="online"] { color: #bbf7d0; background: rgba(34,197,94,.18); }
.connection-status[data-state="offline"] { color: #fecaca; background: rgba(239,68,68,.18); }

.quick-settings-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.quick-setting-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    text-decoration: none;
}
.quick-setting-link + .quick-setting-link { border-left: 1px solid var(--border); }
.quick-setting-link:hover { background: #f8f9fa; }
.quick-setting-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: rgba(0,123,255,.1);
    font-size: 13px;
}
.quick-setting-link strong, .quick-setting-link small { display: block; }
.quick-setting-link strong { font-size: 12px; }
.quick-setting-link small {
    max-width: 150px;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quick-setting-button { cursor: pointer; }
.contacts-scroll-region { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.contacts-list { min-height: auto; overflow: visible; }
.sticky-title { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--border); }
.contact-chevron { color: #adb5bd; font-size: 24px; font-weight: 300; }
.contact-item.active .contact-chevron { color: rgba(255,255,255,.75); }

.mobile-back-button { display: none; }
.chat-person-copy { min-width: 0; }
.chat-header-actions { flex-direction: row; align-items: center; }
.chat-settings-strip {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    background: #f8f9fa;
}
.security-shortcut {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    color: #495057;
    background: #fff;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.security-shortcut:hover { background: #e9ecef; }
.app-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1500;
    max-width: min(380px, calc(100vw - 32px));
    padding: 11px 14px;
    border-radius: 7px;
    color: #fff;
    background: #343a40;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    font-size: 13px;
}
.app-toast[data-type="success"] { background: #198754; }
.app-toast[data-type="warning"] { color: #212529; background: #ffc107; }
.app-toast[data-type="error"] { background: #dc3545; }

html[data-theme="dark"] .quick-settings-bar,
html[data-theme="dark"] .sticky-title,
html[data-theme="dark"] .chat-settings-strip { color: #e5e7eb; background: #18212f; }
html[data-theme="dark"] .quick-setting-link:hover { background: #253044; }
html[data-theme="dark"] .security-shortcut { color: #e5e7eb; border-color: #4b5563; background: #111827; }
html[data-theme="dark"] .security-shortcut:hover { background: #293548; }

@media (max-width: 1000px) {
    .direct-chat-header { align-items: center; }
    .chat-header-actions { flex-direction: row; align-items: center; }
}

@media (max-width: 820px) {
    html { min-height: 100%; }
    body[data-page="chat"] { height: 100%; min-height: 100dvh; overflow: hidden; }
    body:not([data-page="chat"]) { min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
    body[data-page="chat"] .flash,
    body[data-page="chat"] .alert { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; z-index: 100; }
    body[data-page="chat"][data-chat-open="1"] .main-header { display: none; }
    body[data-page="chat"][data-chat-open="1"] .chat-page { height: 100dvh; min-height: 100dvh; }

    .main-header { height: 56px; padding: 0 8px; }
    .navbar-button { height: 56px; padding: 0 8px; font-size: 11px; }
    .navbar-user { padding: 0 4px; }
    .navbar-user-name, .navbar-settings-link, .brand-copy small { display: none; }

    .chat-page { height: calc(100dvh - 56px); min-height: 0; padding: 0; overflow: hidden; }
    .chat-layout { width: 100%; height: 100%; display: block; }
    .contacts-card, .direct-chat-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .chat-view-list .direct-chat-card { display: none; }
    .chat-view-active .contacts-card { display: none; }
    .chat-view-active .direct-chat-card { display: flex; }

    .contacts-header { min-height: 58px; padding: 8px 12px; }
    .quick-settings-bar { flex: 0 0 auto; }
    .contact-search { flex: 0 0 auto; padding: 11px 12px; }
    .contacts-scroll-region { flex: 1; }
    .contact-item { min-height: 68px; padding: 10px 13px; }
    .contact-name-row strong { font-size: 15px; }
    .contact-copy p { font-size: 12px; }

    .direct-chat-header {
        min-height: 60px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 8px;
        padding: 8px 10px;
        border-top: 0;
    }
    .mobile-back-button {
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: inherit;
        font-size: 25px;
        text-decoration: none;
    }
    .mobile-back-button:hover { background: rgba(0,0,0,.06); }
    .chat-person { min-width: 0; flex: 1; gap: 8px; }
    .chat-person .avatar { width: 38px; height: 38px; }
    .chat-person h1 { max-width: 42vw; font-size: 15px; }
    .desktop-only { display: none; }
    .call-launchers { flex: 0 0 auto; }
    .call-button { width: 36px; height: 36px; }

    .chat-settings-strip {
        min-height: 45px;
        flex: 0 0 auto;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 6px 9px;
        scrollbar-width: none;
    }
    .chat-settings-strip::-webkit-scrollbar { display: none; }
    .auto-delete-control { flex: 0 0 auto; }
    .auto-delete-control select { min-height: 32px; }
    .chat-settings-strip .danger-button { flex: 0 0 auto; font-size: 12px; }
    .chat-settings-strip .danger-button::after { content: none; }

    #chat-app { min-height: 0; flex: 1; }
    .direct-chat-messages { padding: 12px 10px; }
    .message-bubble { max-width: 86%; border-radius: 9px; }
    .direct-chat-input {
        flex: 0 0 auto;
        gap: 6px;
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    .attachment-button { width: 40px; height: 40px; border-radius: 50%; }
    .direct-chat-input textarea { border-radius: 20px; padding: 9px 14px; }
    .send-button { min-width: 54px; min-height: 40px; padding: 8px 10px; border-radius: 20px; }
    .app-toast { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-width: none; }
}

.push-setting-status { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
[data-push-toggle].active { border-color: var(--success); }
/* Tomcat v2.10.2 — status lonceng harus kentara di light/dark */
[data-push-toggle] { position: relative; transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
[data-push-toggle][data-push-state="active"],
[data-push-toggle].active {
    color: #fff !important;
    background: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .22), 0 5px 14px rgba(22, 163, 74, .22);
}
[data-push-toggle][data-push-state="active"]::after,
[data-push-toggle].active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: #dcfce7;
    box-sizing: border-box;
}
[data-push-toggle][data-push-state="active"]:active,
[data-push-toggle].active:active { transform: scale(.96); }
html[data-theme="dark"] [data-push-toggle][data-push-state="active"],
html[data-theme="dark"] [data-push-toggle].active {
    color: #fff !important;
    background: #15803d !important;
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, .28), 0 5px 16px rgba(0, 0, 0, .32);
}
html[data-theme="dark"] [data-push-toggle][data-push-state="active"]::after,
html[data-theme="dark"] [data-push-toggle].active::after { background: #bbf7d0; border-color: #fff; }


[data-push-toggle][data-push-state="warning"],
[data-push-toggle].warning {
    color: #111827 !important;
    background: #fbbf24 !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .22);
}
html[data-theme="dark"] [data-push-toggle][data-push-state="warning"],
html[data-theme="dark"] [data-push-toggle].warning {
    color: #111827 !important;
    background: #fbbf24 !important;
    border-color: #fcd34d !important;
    box-shadow: 0 0 0 2px rgba(252, 211, 77, .24);
}

[data-push-toggle][data-push-state="unsupported"] { opacity: .82; }

@media (max-width: 820px) {
    body[data-page="profile"] .main-header { position: sticky; top: 0; }
    body[data-page="profile"] .page-shell { width: 100%; padding: 14px 12px 40px; }
    body[data-page="profile"] .content-header { gap: 10px; }
    body[data-page="profile"] .card-body { padding: 16px; }
    body[data-page="profile"] .profile-summary { align-items: flex-start; }
    .main-header > .navbar-actions > [data-push-toggle] { display: none; }
}

@media (max-width: 420px) {
    .navbar-brand .brand-copy { display: none; }
    .navbar-button { padding: 0 6px; font-size: 10px; }
    .connection-status { max-width: 92px; }
    .quick-setting-link { gap: 6px; padding: 8px 6px; }
    .quick-setting-icon { width: 24px; height: 24px; }
    .quick-setting-link strong { font-size: 11px; }
    .quick-setting-link small { max-width: 82px; font-size: 9px; }
    .chat-person h1 { max-width: 34vw; }
    .auto-delete-control > span { display: none; }
    .security-shortcut { font-size: 11px; }
    .chat-settings-strip .danger-button { padding: 5px 8px; font-size: 11px; }
}

/* v2.3.3: avatar replacement + private chat-list preview */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 7px;
}
.avatar-upload-copy { min-width: 0; flex: 1; }
.avatar-upload-copy input[type="file"] { width: 100%; }
.avatar-preview { flex: 0 0 auto; overflow: hidden; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
    .avatar-upload-row { align-items: flex-start; }
    .avatar-upload-copy small { display: block; line-height: 1.45; }
}

/* v2.3.2: PWA install + emoji picker */
.quick-settings-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-install-app].active { border-color: var(--success); }
[data-install-app][data-install-state="unsupported"] { opacity: .82; }

.direct-chat-input { position: relative; }
.emoji-toggle { font-size: 19px; line-height: 1; }
.emoji-picker {
    position: absolute;
    z-index: 30;
    left: 58px;
    bottom: calc(100% + 8px);
    width: min(360px, calc(100vw - 32px));
    max-height: 310px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15,23,42,.22);
}
.emoji-picker-header {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
}
.emoji-picker-header strong { font-size: 13px; }
.emoji-picker-header button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}
.emoji-picker-header button:hover { background: #f1f3f5; }
.emoji-grid {
    max-height: 252px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    overflow-y: auto;
    padding: 8px;
}
.emoji-option {
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 23px;
    cursor: pointer;
}
.emoji-option:hover, .emoji-option:focus-visible { background: #eef4ff; outline: none; }

html[data-theme="dark"] .emoji-picker { background: #1f2937; }
html[data-theme="dark"] .emoji-picker-header button { color: #e5e7eb; }
html[data-theme="dark"] .emoji-picker-header button:hover,
html[data-theme="dark"] .emoji-option:hover,
html[data-theme="dark"] .emoji-option:focus-visible { background: #374151; }

@media (max-width: 560px) {
    .quick-settings-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-setting-link:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
    .quick-setting-link:nth-child(4) { border-top: 1px solid var(--border); }
    .emoji-picker { right: 8px; left: 8px; width: auto; bottom: calc(100% + 6px); }
    .emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .direct-chat-input { gap: 5px; }
    .attachment-button, .emoji-toggle { width: 38px; height: 38px; }
    .send-button { min-width: 50px; }
}

/* v2.4.0 — antarmuka sederhana bergaya WhatsApp */
:root {
    --primary: #00a884;
    --primary-dark: #008f72;
    --navy: #202c33;
    --wa-header: #f0f2f5;
    --wa-chat-bg: #efeae2;
    --wa-bubble-mine: #d9fdd3;
    --wa-bubble-theirs: #ffffff;
}

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

.navbar-icon-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 20px;
    text-decoration: none;
}
.brand-mark { background: #00a884; font-size: 17px; }
.brand-copy small { opacity: .65; font-weight: 400; }

.contacts-card, .direct-chat-card { position: relative; }
.whatsapp-list-header {
    min-height: 64px;
    justify-content: space-between;
    color: #111b21;
    background: var(--wa-header);
    border-bottom: 1px solid #d8dbde;
}
.current-user-button {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}
.current-user-button .user-panel-copy strong { font-size: 18px; }
.current-user-button .user-panel-copy span { color: #667781; }
.contacts-header-actions { display: flex; align-items: center; gap: 4px; }
.header-icon-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #54656f;
    background: transparent;
    font-size: 20px;
    text-decoration: none;
}
.header-icon-button:hover { background: rgba(11,20,26,.08); }
.connection-status {
    max-width: 102px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    color: #54656f;
    background: rgba(11,20,26,.06);
    font-size: 10px;
}
.connection-status[data-state="online"] { color: #087d64; background: #d9fdd3; }
.quick-settings-bar { display: none !important; }

.whatsapp-search { padding: 8px 12px 10px; background: #fff; }
.whatsapp-search form > small { margin: 7px 4px 0; color: #667781; }
.search-pill {
    overflow: hidden;
    align-items: center;
    border-radius: 9px;
    background: #f0f2f5;
}
.search-pill-icon { padding-left: 12px; color: #667781; font-size: 21px; }
.search-pill input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.search-pill .input-group-button {
    min-height: 38px;
    margin: 3px;
    border-radius: 7px;
    padding: 6px 12px;
}
.search-profile-link { color: inherit; font-weight: 700; text-decoration: none; }
.search-profile-link:hover { color: var(--primary); }

.contacts-scroll-region { background: #fff; }
.contacts-title { letter-spacing: .02em; text-transform: none; }
.friend-row, .contact-item { border-bottom-color: #eef0f1; }
.friend-profile-link, .friend-profile-copy { color: inherit; text-decoration: none; }
.friend-profile-copy { min-width: 0; flex: 1; }
.friend-profile-copy:hover strong { color: var(--primary); }
.contact-item { border-left: 0; }
.contact-item:hover { background: #f5f6f6; }
.contact-item.active { color: #111b21; background: #f0f2f5; }
.contact-item.active .contact-copy p, .contact-item.active .contact-chevron { color: #667781; }
.contact-chat-state.has-new-chat {
    color: #e11d48 !important;
    font-weight: 800;
    letter-spacing: .04em;
}

.whatsapp-chat-header {
    min-height: 64px;
    color: #111b21;
    background: var(--wa-header);
    border-bottom: 1px solid #d8dbde;
}
.chat-person-link { color: inherit; text-decoration: none; }
.chat-person-link:hover .chat-person-copy h1 { text-decoration: underline; text-decoration-thickness: 1px; }
.chat-person-copy p { color: #667781; }
.call-button {
    border: 0;
    color: #54656f;
    background: transparent;
    font-size: 20px;
}
.call-button:hover { background: rgba(11,20,26,.08); }

.direct-chat-messages {
    background-color: var(--wa-chat-bg);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.28) 0 1px, transparent 1.4px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.24) 0 1px, transparent 1.4px);
    background-size: 34px 34px, 46px 46px;
}
.message-row.mine .message-bubble { background: var(--wa-bubble-mine); }
.message-row.theirs .message-bubble { background: var(--wa-bubble-theirs); }
.message-bubble { border-radius: 8px; box-shadow: 0 1px 1px rgba(11,20,26,.08); }

.chat-options-panel {
    position: absolute;
    top: 68px;
    right: 12px;
    z-index: 80;
    width: min(360px, calc(100% - 24px));
    overflow: hidden;
    border: 1px solid #d8dbde;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11,20,26,.22);
}
.chat-options-heading {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f1;
}
.chat-options-heading button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 23px;
}
.chat-options-heading button:hover { background: #f0f2f5; }
.settings-list-row {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #eef0f1;
    color: #111b21;
    background: #fff;
    text-align: left;
    text-decoration: none;
}
.settings-list-row:hover { background: #f5f6f6; }
.settings-list-row > span:first-child { min-width: 0; display: grid; gap: 2px; }
.settings-list-row strong { font-size: 14px; }
.settings-list-row small { color: #667781; font-size: 12px; font-weight: 400; }
.settings-list-row select {
    max-width: 128px;
    min-height: 36px;
    border: 1px solid #cfd4d7;
    border-radius: 8px;
    padding: 5px 8px;
    background: #fff;
}
.danger-setting, .danger-setting strong { color: #d93025; }

.whatsapp-composer { background: #f0f2f5; }
.attachment-button {
    border: 0;
    color: #54656f;
    background: transparent;
}
.attachment-button:hover { background: rgba(11,20,26,.08); }
.whatsapp-composer textarea {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
}
.round-send-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 19px;
}
.attachment-menu {
    position: absolute;
    z-index: 45;
    left: 8px;
    bottom: calc(100% + 8px);
    width: min(290px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #d8dbde;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11,20,26,.22);
}
.attachment-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #eef0f1;
    background: #fff;
    text-align: left;
}
.attachment-menu button:hover { background: #f5f6f6; }
.attachment-menu button > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e7fce7; font-size: 21px; }
.attachment-menu button > span:last-child { display: grid; gap: 2px; }
.attachment-menu strong { font-size: 14px; }
.attachment-menu small { color: #667781; font-size: 11px; }
.selected-file {
    min-height: 45px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
    margin: 5px 4px 0;
    padding: 5px 7px;
    border-radius: 9px;
    background: #eef7f5;
}
.selected-file-preview {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background-color: #d9fdd3;
    background-position: center;
    background-size: cover;
}
.selected-file-name { overflow: hidden; color: #3b4a54; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.selected-file button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #667781; background: transparent; font-size: 20px; }
.selected-file button:hover { background: rgba(11,20,26,.08); }

/* Halaman pengaturan */
.settings-page { max-width: 760px; }
.mobile-page-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.mobile-page-header h1 { margin: 0; font-size: 24px; font-weight: 600; }
.mobile-page-header p { margin: 3px 0 0; color: #667781; }
.mobile-page-back {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: inherit;
    font-size: 25px;
    text-decoration: none;
}
.mobile-page-back:hover { background: rgba(11,20,26,.08); }
.profile-main-card { border-top-color: var(--primary); }
.whatsapp-profile-summary { border: 0; border-radius: 10px; background: #f0f2f5; }
.profile-summary-copy { min-width: 0; }
.profile-summary-copy strong { font-size: 19px; }
.profile-summary-copy small { display: block; margin-top: 5px; color: #667781; }
.simple-title { margin-top: 0; padding-top: 0; border-top: 0; }
.field-label { display: block; margin-bottom: 8px; color: #495057; font-size: 14px; font-weight: 600; }
.avatar-upload-field { display: block; }
.avatar-upload-copy { display: grid; justify-items: start; gap: 6px; }
.choose-avatar-button { border-radius: 20px; }
.chosen-avatar-name { max-width: 100%; overflow: hidden; color: #3b4a54; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.settings-details { overflow: hidden; border: 1px solid #d8dbde; border-radius: 9px; }
.settings-details summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
.settings-details-body { display: grid; gap: 14px; padding: 4px 14px 14px; }
.sticky-save-action { position: sticky; bottom: 8px; z-index: 4; }
.sticky-save-action .primary-button { width: 100%; border-radius: 22px; }
.settings-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    border-top: 0;
    border-radius: 10px;
}
.settings-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #e7fce7; font-size: 22px; }
.settings-card-copy h2 { margin: 0; font-size: 16px; }
.settings-card-copy p { margin: 4px 0 0; color: #667781; font-size: 13px; line-height: 1.4; }
.settings-action-button, .theme-logo-button {
    min-height: 38px;
    border: 0;
    border-radius: 20px;
    padding: 8px 13px;
    color: #fff;
    background: var(--primary);
}
.theme-logo-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 22px; }
.pin-settings-card { margin-top: 12px; border-radius: 10px; }
.settings-section-header { justify-content: space-between; gap: 14px; }
.settings-section-header > div p { margin: 4px 0 0; color: #667781; font-size: 12px; }
.friendly-warning { margin-bottom: 16px; padding: 11px 13px; border-radius: 8px; color: #6a4b00; background: #fff4ce; font-size: 13px; line-height: 1.45; }

/* Profil teman */
.friend-profile-page { min-height: calc(100vh - 57px); background: #f0f2f5; }
.friend-profile-header {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px max(16px, calc((100% - 720px) / 2));
    background: #fff;
    border-bottom: 1px solid #d8dbde;
}
.friend-profile-hero { display: grid; justify-items: center; padding: 32px 16px 25px; background: #fff; text-align: center; }
.friend-profile-avatar { width: 132px; height: 132px; font-size: 44px; }
.friend-profile-hero h1 { margin: 16px 0 3px; font-size: 25px; }
.friend-online-status { margin: 0; color: #667781; }
.profile-chat-button { display: grid; justify-items: center; gap: 4px; margin-top: 20px; border: 0; color: var(--primary); background: transparent; font-weight: 600; }
.profile-chat-button > span:first-child { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 21px; }
.friend-info-list { width: min(720px, 100%); margin: 12px auto 0; background: #fff; }
.friend-info-row { min-height: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #eef0f1; }
.friend-info-icon { color: #667781; font-size: 20px; text-align: center; }
.friend-info-row small { color: #667781; }
.friend-info-row p { margin: 3px 0 0; overflow-wrap: anywhere; }

html[data-theme="dark"] {
    --wa-header: #202c33;
    --wa-chat-bg: #0b141a;
    --wa-bubble-mine: #005c4b;
    --wa-bubble-theirs: #202c33;
}
html[data-theme="dark"] .whatsapp-list-header,
html[data-theme="dark"] .whatsapp-chat-header { color: #e9edef; background: #202c33; border-color: #2a3942; }
html[data-theme="dark"] .current-user-button .user-panel-copy span,
html[data-theme="dark"] .chat-person-copy p { color: #8696a0; }
html[data-theme="dark"] .header-icon-button,
html[data-theme="dark"] .call-button { color: #aebac1; }
html[data-theme="dark"] .whatsapp-search,
html[data-theme="dark"] .contacts-scroll-region { background: #111b21; }
html[data-theme="dark"] .search-pill { background: #202c33; }
html[data-theme="dark"] .search-pill input { color: #e9edef; }
html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item.active { color: #e9edef; background: #202c33; }
html[data-theme="dark"] .friend-row,
html[data-theme="dark"] .contact-item { border-color: #222d34; }
html[data-theme="dark"] .direct-chat-messages { background-color: #0b141a; }
html[data-theme="dark"] .message-row.mine .message-bubble { color: #e9edef; background: #005c4b; }
html[data-theme="dark"] .message-row.theirs .message-bubble { color: #e9edef; background: #202c33; }
html[data-theme="dark"] .whatsapp-composer { background: #202c33; }
html[data-theme="dark"] .whatsapp-composer textarea { color: #e9edef; background: #2a3942; }
html[data-theme="dark"] .chat-options-panel,
html[data-theme="dark"] .attachment-menu { border-color: #2a3942; background: #233138; }
html[data-theme="dark"] .settings-list-row,
html[data-theme="dark"] .attachment-menu button { color: #e9edef; border-color: #2a3942; background: #233138; }
html[data-theme="dark"] .settings-list-row:hover,
html[data-theme="dark"] .attachment-menu button:hover { background: #2a3942; }
html[data-theme="dark"] .settings-list-row select { color: #e9edef; border-color: #3b4a54; background: #111b21; }
html[data-theme="dark"] .selected-file { background: #233138; }
html[data-theme="dark"] .selected-file-name { color: #d1d7db; }
html[data-theme="dark"] .whatsapp-profile-summary,
html[data-theme="dark"] .settings-card-icon { background: #202c33; }
html[data-theme="dark"] .friend-profile-page { background: #0b141a; }
html[data-theme="dark"] .friend-profile-header,
html[data-theme="dark"] .friend-profile-hero,
html[data-theme="dark"] .friend-info-list { color: #e9edef; background: #111b21; border-color: #2a3942; }
html[data-theme="dark"] .friend-info-row { border-color: #2a3942; }

@media (max-width: 820px) {
    body[data-page="chat"] .main-header { display: none !important; }
    body[data-page="chat"] .chat-page { height: 100dvh; min-height: 100dvh; }
    .whatsapp-list-header { min-height: 62px; padding: 8px 10px 8px 13px; }
    .current-user-button .avatar { width: 40px; height: 40px; }
    .contacts-header-actions { gap: 1px; }
    .connection-status { max-width: 84px; padding: 3px 6px; }
    .header-icon-button { width: 36px; height: 36px; }
    .contact-search small { display: none; }
    .whatsapp-search { padding-bottom: 8px; }
    .contacts-title { padding-top: 12px; }
    .friend-row { min-height: 64px; }
    .friend-actions .mini-button:not(.primary):last-child { min-width: 32px; }
    .contact-item { min-height: 70px; }

    .chat-person-link { min-width: 0; flex: 1; }
    .chat-person-copy h1 { max-width: 38vw; }
    .chat-options-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 75dvh;
        overflow-y: auto;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-options-heading { min-height: 54px; }
    .settings-list-row { min-height: 64px; padding: 11px 17px; }
    .direct-chat-messages { padding-bottom: 16px; }
    .whatsapp-composer { padding-top: 7px; }
    .attachment-menu {
        position: fixed;
        right: 8px;
        bottom: max(68px, calc(62px + env(safe-area-inset-bottom)));
        left: 8px;
        width: auto;
    }
    .emoji-picker { bottom: max(68px, calc(62px + env(safe-area-inset-bottom))); }
    .composer-center { min-width: 0; }
    .round-send-button { width: 40px; min-width: 40px; height: 40px; }

    body[data-page="profile"] .main-header,
    body[data-page="friend-profile"] .main-header { display: none; }
    .settings-page { width: 100%; padding: 0 0 28px; }
    .mobile-page-header {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: 62px;
        margin: 0;
        padding: 8px 12px;
        background: var(--wa-header);
        box-shadow: 0 1px 2px rgba(11,20,26,.12);
    }
    .mobile-page-header h1 { font-size: 19px; }
    .mobile-page-header p { display: none; }
    .profile-card { border-radius: 0; box-shadow: none; }
    .profile-main-card { border-top: 0; }
    .profile-main-card .card-body { padding: 14px 16px 20px; }
    .whatsapp-profile-summary { margin-bottom: 18px; padding: 13px; }
    .avatar-upload-row { align-items: center; }
    .settings-card { margin-top: 8px; border-radius: 0; padding: 14px 16px; }
    .settings-card-copy p { font-size: 12px; }
    .settings-action-button { padding: 7px 11px; font-size: 12px; }
    .pin-settings-card { margin-top: 8px; border-radius: 0; }
    .sticky-save-action { bottom: 10px; }

    .friend-profile-page { min-height: 100dvh; }
    .friend-profile-header { position: sticky; top: 0; z-index: 20; padding: 8px 12px; }
    .friend-profile-avatar { width: 120px; height: 120px; }
}

@media (max-width: 420px) {
    .connection-status { display: none; }
    .chat-person-copy h1 { max-width: 31vw; }
    .call-button { width: 34px; height: 34px; }
    .whatsapp-composer { gap: 3px; padding-right: 6px; padding-left: 6px; }
    .attachment-button, .emoji-toggle { width: 35px; height: 35px; }
    .settings-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
    .settings-card-icon { width: 40px; height: 40px; font-size: 19px; }
    .settings-action-button { max-width: 76px; }
    .split-actions { flex-direction: column; }
    .split-actions > * { width: 100%; }
}

/* v2.5.0: reply, image preview/download, clearer light theme, tidy avatars, name search */
html:not([data-theme="dark"]) {
    --wa-header: #f0f2f5;
    --wa-chat-bg: #efeae2;
    --wa-bubble-mine: #d9fdd3;
    --wa-bubble-theirs: #ffffff;
}

html:not([data-theme="dark"]) .message-bubble {
    color: #111b21;
    border-color: rgba(11, 20, 26, .08);
}
html:not([data-theme="dark"]) .message-row.mine .message-bubble,
html:not([data-theme="dark"]) .message-row.theirs .message-bubble { color: #111b21; }
html:not([data-theme="dark"]) .message-row.mine .message-bubble::before {
    border-color: transparent transparent transparent var(--wa-bubble-mine);
}
html:not([data-theme="dark"]) .message-row.theirs .message-bubble::before {
    border-color: transparent var(--wa-bubble-theirs) transparent transparent;
}
html:not([data-theme="dark"]) .message-bubble time,
html:not([data-theme="dark"]) .message-row.mine .message-bubble time,
html:not([data-theme="dark"]) .message-meta { color: #667781; }
html:not([data-theme="dark"]) .whatsapp-composer { background: #f0f2f5; }
html:not([data-theme="dark"]) .whatsapp-composer textarea {
    color: #111b21;
    background: #fff;
    border-color: #fff;
}
html:not([data-theme="dark"]) .whatsapp-composer textarea::placeholder { color: #667781; opacity: 1; }
html:not([data-theme="dark"]) .file-card { color: #111b21; background: rgba(255,255,255,.64); }
html:not([data-theme="dark"]) .message-row.theirs .file-card { background: #f0f2f5; }

.avatar,
.navbar-avatar,
.friend-profile-avatar {
    position: relative;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
}
.avatar > img,
.navbar-avatar > img,
.friend-profile-avatar > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 50%;
    object-fit: cover !important;
    object-position: center !important;
}
.avatar-small { width: 46px; height: 46px; flex-basis: 46px; }
.avatar-large { width: 96px; height: 96px; min-width: 96px; min-height: 96px; flex-basis: 96px; }
.whatsapp-profile-summary { overflow: hidden; align-items: center; }
.whatsapp-profile-summary .avatar-large { width: 88px; height: 88px; min-width: 88px; min-height: 88px; flex-basis: 88px; }
.avatar-upload-row .avatar-large { width: 96px; height: 96px; flex-basis: 96px; }
.profile-summary-copy { min-width: 0; }
.profile-summary-copy p,
.profile-summary-copy small { overflow-wrap: anywhere; }

.search-result { display: grid; gap: 8px; max-height: min(52vh, 430px); overflow-y: auto; }
.search-result-heading { padding: 3px 3px 0; color: #667781; font-size: 12px; }
.search-user-card {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid #e6e9eb;
    border-radius: 11px;
    background: #fff;
}
.search-user-copy { min-width: 0; display: grid; gap: 2px; }
.search-user-copy code,
.search-user-copy small { overflow: hidden; color: #667781; text-overflow: ellipsis; white-space: nowrap; }
.search-user-card .search-actions { justify-content: flex-end; }
html[data-theme="dark"] .search-user-card { border-color: #2a3942; background: #202c33; }
html[data-theme="dark"] .search-result-heading,
html[data-theme="dark"] .search-user-copy code,
html[data-theme="dark"] .search-user-copy small { color: #8696a0; }

.message-row { align-items: center; gap: 5px; }
.message-row.theirs .message-bubble { order: 1; }
.message-row.theirs .message-reply-button { order: 2; }
.message-row.mine .message-reply-button { order: 1; }
.message-row.mine .message-bubble { order: 2; }
.message-reply-button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #54656f;
    background: rgba(255,255,255,.82);
    box-shadow: 0 1px 3px rgba(11,20,26,.12);
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.message-row:hover .message-reply-button,
.message-reply-button:focus-visible { opacity: 1; }
.message-reply-button:hover { transform: scale(1.06); }

.quoted-message {
    width: 100%;
    display: grid;
    gap: 2px;
    margin: 0 0 7px;
    padding: 7px 9px;
    overflow: hidden;
    border: 0;
    border-left: 4px solid #00a884;
    border-radius: 5px;
    color: #3b4a54;
    background: rgba(11,20,26,.06);
    text-align: left;
}
.quoted-message strong { overflow: hidden; color: #008069; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quoted-message span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .quoted-message { color: #d1d7db; background: rgba(0,0,0,.18); }
html[data-theme="dark"] .quoted-message strong { color: #06cf9c; }

.reply-preview {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 7px 7px 7px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}
.reply-preview-bar { align-self: stretch; border-radius: 4px; background: #00a884; }
.reply-preview-copy { min-width: 0; display: grid; gap: 2px; }
.reply-preview-copy strong { overflow: hidden; color: #008069; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview-copy small { overflow: hidden; color: #667781; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #667781; background: transparent; font-size: 20px; }
.reply-preview button:hover { background: #f0f2f5; }
html[data-theme="dark"] .reply-preview { background: #2a3942; }
html[data-theme="dark"] .reply-preview-copy strong { color: #06cf9c; }
html[data-theme="dark"] .reply-preview-copy small,
html[data-theme="dark"] .reply-preview button { color: #aebac1; }

.message-image-button {
    width: 100%;
    display: block;
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: #dfe3e5;
}
.message-image-button .message-image { width: 100%; max-width: 360px; max-height: 420px; margin: 0; object-fit: cover; }
.image-viewer-open { overflow: hidden; }
.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    color: #fff;
    background: rgba(0,0,0,.96);
}
.image-viewer-toolbar {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: max(7px, env(safe-area-inset-top)) 10px 7px;
    background: rgba(17,27,33,.92);
}
.image-viewer-toolbar button,
.image-viewer-toolbar a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    font-size: 24px;
    text-decoration: none;
}
.image-viewer-toolbar button:hover,
.image-viewer-toolbar a:hover { background: rgba(255,255,255,.12); }
.image-viewer-toolbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-stage { min-height: 0; display: grid; place-items: center; padding: 12px; overflow: auto; }
.image-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.message-highlight .message-bubble { animation: message-highlight 1.7s ease; }
@keyframes message-highlight {
    0%, 100% { box-shadow: 0 1px 1px rgba(11,20,26,.08); }
    25%, 65% { box-shadow: 0 0 0 4px rgba(0,168,132,.32); }
}

@media (max-width: 820px) {
    .message-reply-button { opacity: .62; }
    .message-bubble { max-width: calc(88% - 30px); }
    .image-viewer { grid-template-rows: calc(58px + env(safe-area-inset-top)) minmax(0, 1fr); }
    .image-viewer-toolbar { padding-top: env(safe-area-inset-top); }
    .whatsapp-profile-summary { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
    .avatar-upload-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .message-reply-button { width: 27px; height: 27px; flex-basis: 27px; font-size: 13px; }
    .message-bubble { max-width: calc(92% - 27px); }
    .avatar-upload-row { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
    .avatar-upload-row .avatar-large { width: 82px; height: 82px; min-width: 82px; min-height: 82px; flex-basis: 82px; }
}
html[data-theme="dark"] .message-row.mine .message-bubble::before {
    border-color: transparent transparent transparent #005c4b;
}
html[data-theme="dark"] .message-row.theirs .message-bubble::before {
    border-color: transparent #202c33 transparent transparent;
}
html[data-theme="dark"] .message-reply-button { color: #aebac1; background: #233138; }


/* v2.5.1: stabilize mobile composer against Android browser toolbar/keyboard */
@media (max-width: 820px) {
    html:has(body[data-page="chat"]) {
        height: var(--chat-viewport-height, 100svh);
        min-height: var(--chat-viewport-height, 100svh);
        max-height: var(--chat-viewport-height, 100svh);
        overflow: hidden;
    }

    body[data-page="chat"] {
        width: 100%;
        height: var(--chat-viewport-height, 100svh) !important;
        min-height: var(--chat-viewport-height, 100svh) !important;
        max-height: var(--chat-viewport-height, 100svh);
        overflow: hidden !important;
    }

    body[data-page="chat"] .chat-page {
        height: var(--chat-viewport-height, 100svh) !important;
        min-height: 0 !important;
        max-height: var(--chat-viewport-height, 100svh);
        overflow: hidden !important;
    }

    body[data-page="chat"] .chat-layout,
    body[data-page="chat"] .direct-chat-card {
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    body[data-page="chat"] .chat-view-active .direct-chat-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    body[data-page="chat"] .chat-view-active #chat-app {
        height: 0;
        min-height: 0;
        flex: 1 1 0;
        overflow: hidden;
    }

    body[data-page="chat"] .chat-view-active .direct-chat-messages {
        min-height: 0;
        flex: 1 1 auto;
        overscroll-behavior: contain;
    }

    body[data-page="chat"] .chat-view-active .whatsapp-composer {
        position: relative;
        z-index: 35;
        width: 100%;
        min-height: 58px;
        flex: 0 0 auto;
        display: flex !important;
        visibility: visible !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        transform: translateZ(0);
    }
}


/* v2.6.0: reliable calls, chat during calls, stable scrolling, direct camera */
#chat-app { position: relative; }
.new-message-indicator {
    position: absolute;
    right: 18px;
    bottom: 78px;
    z-index: 42;
    min-height: 34px;
    padding: 7px 13px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: #00a884;
    box-shadow: 0 3px 12px rgba(11, 20, 26, .25);
    font-size: 12px;
    font-weight: 700;
}
.new-message-indicator[hidden] { display: none !important; }
.direct-chat-messages { overflow-anchor: none; }
.whatsapp-composer { flex-shrink: 0; }
.camera-attachment-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camera-attachment-menu button { min-height: 76px; }

.call-overlay { pointer-events: auto; }
.call-window { pointer-events: auto; }
.call-control {
    min-width: 64px;
    display: grid;
    justify-items: center;
    gap: 3px;
    border-radius: 18px;
}
.call-control > span { font-size: 19px; line-height: 1; }
.call-control > small { font-size: 10px; line-height: 1.15; }
.local-video.camera-front-preview { transform: scaleX(-1); }
.call-overlay.call-chat-mode {
    inset: 74px 12px auto auto;
    width: min(300px, calc(100vw - 24px));
    height: auto;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-end;
    background: transparent;
    pointer-events: none;
}
.call-overlay.call-chat-mode .call-window {
    width: 100%;
    height: auto;
    max-height: min(430px, calc(100dvh - 150px));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0,0,0,.42);
    overflow: hidden;
    pointer-events: auto;
}
.call-overlay.call-chat-mode .call-stage,
.call-overlay.call-chat-mode .remote-video { min-height: 160px; max-height: 210px; }
.call-overlay.call-chat-mode .local-video { width: 64px; height: 88px; }
.call-overlay.call-chat-mode .call-copy { padding: 8px 10px 2px; }
.call-overlay.call-chat-mode .call-copy strong { font-size: 14px; }
.call-overlay.call-chat-mode .call-copy span { font-size: 11px; }
.call-overlay.call-chat-mode .call-actions { gap: 4px; padding: 7px 7px 9px; flex-wrap: wrap; }
.call-overlay.call-chat-mode .call-control { min-width: 45px; min-height: 39px; padding: 5px 6px; border-radius: 12px; }
.call-overlay.call-chat-mode .call-control > span { font-size: 15px; }
.call-overlay.call-chat-mode .call-control > small { font-size: 8px; }

@media (max-width: 820px) {
    body[data-page="chat"] .chat-view-active .whatsapp-composer {
        position: sticky;
        bottom: 0;
    }
    .new-message-indicator { right: 12px; bottom: max(72px, calc(64px + env(safe-area-inset-bottom))); }
    .call-actions { gap: 7px; padding: 10px 8px max(14px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
    .call-control { min-width: 58px; min-height: 50px; padding: 8px 7px; }
    .call-overlay.call-chat-mode {
        top: 70px;
        right: 8px;
        width: min(270px, calc(100vw - 16px));
    }
    .call-overlay.call-chat-mode .call-window { max-height: 360px; }
    .call-overlay.call-chat-mode .call-stage,
    .call-overlay.call-chat-mode .remote-video { min-height: 145px; max-height: 185px; }
}

@media (max-width: 420px) {
    .camera-attachment-menu { grid-template-columns: 1fr 1fr; }
    .camera-attachment-menu button { min-height: 68px; padding: 9px; }
    .call-overlay.call-chat-mode { width: 228px; }
    .call-overlay.call-chat-mode .call-control { min-width: 41px; }
}

/* Trusted-device PIN login */
.trusted-login-card { width: min(390px, 100%); }
.trusted-login-avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    background: #1f2937;
    font-size: 28px;
    font-weight: 700;
}
.trusted-login-name { margin: 7px 0 4px !important; color: #f9fafb !important; font-weight: 700; }
.trusted-login-link { display: inline-block; margin-top: 18px; color: #93c5fd; text-decoration: none; }
.trusted-login-link:hover { text-decoration: underline; }
.trusted-forget-form { margin-top: 8px; }
.pin-status { margin-bottom: 13px; padding: 10px; border-radius: 6px; color: #bbf7d0; background: rgba(22,101,52,.38); }
.trusted-device-summary {
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(34,197,94,.07);
}
.trusted-device-summary strong,
.trusted-device-summary small { display: block; }
.trusted-device-summary small { margin-top: 3px; color: var(--muted); }

/* v2.8.0: WhatsApp-style workspace, separated Chat/Friends tabs, cleaner desktop shell */
:root {
    --wa-accent: #00a884;
    --wa-accent-strong: #008069;
    --wa-sidebar-bg: #ffffff;
    --wa-panel-bg: #f7f9fa;
    --wa-line: #e9edef;
    --wa-text: #111b21;
    --wa-muted: #667781;
}

body[data-page="chat"] {
    overflow: hidden;
    background: #dfe3e5;
}
body[data-page="chat"] .main-header { display: none !important; }
body[data-page="chat"] .flash,
body[data-page="chat"] .alert {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 240;
    width: min(720px, calc(100% - 28px));
    margin: 0;
    transform: translateX(-50%);
    border-radius: 10px;
}
body[data-page="chat"] .chat-page {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: clamp(0px, 2.2vh, 20px) clamp(0px, 2vw, 28px);
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--wa-accent-strong) 0 112px, #dfe3e5 112px 100%);
}
body[data-page="chat"] .chat-layout {
    width: min(1600px, 100%);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(350px, 420px) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 5px;
    background: var(--wa-sidebar-bg);
    box-shadow: 0 8px 30px rgba(11, 20, 26, .18);
}
body[data-page="chat"] .contacts-card,
body[data-page="chat"] .direct-chat-card {
    min-width: 0;
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body[data-page="chat"] .contacts-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #d8dbde;
    background: var(--wa-sidebar-bg);
}
body[data-page="chat"] .direct-chat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--wa-panel-bg);
}

.chat-sidebar-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px 9px 14px;
    border-bottom: 0;
}
.chat-sidebar-header .avatar { width: 42px; height: 42px; }
.chat-sidebar-header .current-user-button { flex: 1; overflow: hidden; }
.chat-sidebar-header .user-panel-copy { display: grid; gap: 2px; }
.chat-sidebar-header .user-panel-copy > strong {
    color: var(--wa-text);
    font-size: 18px;
    font-weight: 650;
}
.chat-sidebar-header .user-panel-copy > span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wa-muted);
    font-size: 11px;
}
.realtime-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f59e0b;
}
.connection-status {
    max-width: 118px;
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: transparent !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
}
.connection-status[data-state="online"] { color: #078363; }
.connection-status[data-state="online"] + * { background: var(--wa-accent); }
.chat-sidebar-header:has(.connection-status[data-state="online"]) .realtime-dot { background: var(--wa-accent); }
.chat-sidebar-header:has(.connection-status[data-state="offline"]) .realtime-dot { background: #94a3b8; }
.chat-sidebar-header .contacts-header-actions { flex: 0 0 auto; }
.chat-sidebar-header .header-icon-button {
    width: 38px;
    height: 38px;
    color: #54656f;
    font-size: 19px;
}
.chat-sidebar-header .header-icon-button:first-child { font-size: 20px; font-weight: 700; }

.sidebar-tabs {
    min-height: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 12px;
    border-bottom: 1px solid var(--wa-line);
    background: var(--wa-sidebar-bg);
}
.sidebar-tab {
    position: relative;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    color: var(--wa-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 650;
}
.sidebar-tab::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
}
.sidebar-tab:hover { color: var(--wa-text); background: rgba(0, 168, 132, .055); }
.sidebar-tab.active { color: var(--wa-accent-strong); }
.sidebar-tab.active::after { background: var(--wa-accent); }
.sidebar-tab-count {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 10px;
    color: #54656f;
    background: #e9edef;
    font-size: 10px;
}
.sidebar-tab.active .sidebar-tab-count { color: #fff; background: var(--wa-accent); }
.sidebar-tab-count.attention { color: #fff; background: #e11d48; }

.sidebar-panel {
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--wa-sidebar-bg);
}
.sidebar-panel[hidden] { display: none !important; }
.sidebar-panel-scroll {
    min-height: 0;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--wa-sidebar-bg);
}
.sidebar-search {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--wa-line);
    background: var(--wa-sidebar-bg);
}
.sidebar-search .search-pill {
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: 9px;
    background: #f0f2f5;
}
.sidebar-search .search-pill input {
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 8px 12px 8px 8px;
    color: var(--wa-text);
    background: transparent;
    outline: 0;
    box-shadow: none;
}
.sidebar-search .search-pill input::placeholder { color: #667781; }
.chat-list-search .search-pill-icon { padding-left: 14px; }

.contacts-list { padding: 0; overflow: visible; }
.contact-item {
    position: relative;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 14px 9px 13px;
    border: 0;
    color: var(--wa-text);
    background: var(--wa-sidebar-bg);
}
.contact-item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 76px;
    height: 1px;
    background: var(--wa-line);
}
.contact-item:hover { background: #f5f6f6; }
.contact-item.active { color: var(--wa-text); background: #f0f2f5; }
.contact-item .avatar-small { width: 49px; height: 49px; font-size: 17px; }
.contact-item .avatar-status { right: 0; bottom: 1px; border-color: var(--wa-sidebar-bg); }
.contact-item:hover .avatar-status,
.contact-item.active .avatar-status { border-color: #f0f2f5; }
.contact-name-row strong { color: inherit; font-size: 15px; font-weight: 600; }
.contact-chat-state,
.contact-item.active .contact-chat-state {
    margin-top: 5px;
    color: var(--wa-muted) !important;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.contact-chat-state.has-new-chat { color: var(--wa-accent-strong) !important; font-weight: 650; }
.unread-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #25d366;
}

.empty-contacts { padding: 42px 26px; }
.empty-contacts .empty-state-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e7fce7;
    font-size: 24px;
}
.empty-contacts strong { display: block; color: #3b4a54; font-size: 14px; }
.empty-contacts p { color: var(--wa-muted); font-size: 12px; }
.empty-contacts .compact { margin-top: 15px; border-radius: 18px; }
.compact-empty { padding-top: 28px; padding-bottom: 28px; }

.friend-search-box { padding: 13px 12px 10px; }
.friend-tab-heading { margin: 0 2px 10px; }
.friend-tab-heading strong,
.friend-tab-heading small { display: block; }
.friend-tab-heading strong { color: var(--wa-text); font-size: 15px; }
.friend-tab-heading small { margin-top: 3px; color: var(--wa-muted); font-size: 11px; }
.friend-search-box form > small { display: none; }
.friend-search-box .search-result {
    max-height: min(310px, 42vh);
    overflow-y: auto;
    margin: 10px 0 0;
    border: 0;
    border-radius: 9px;
    background: #f7f9fa;
    box-shadow: inset 0 0 0 1px var(--wa-line);
}
.friend-section-highlight { background: #fffdf5; }
.contacts-title {
    min-height: 38px;
    padding: 11px 14px 8px;
    color: var(--wa-accent-strong);
    font-size: 11px;
    letter-spacing: .03em;
}
.friend-row {
    position: relative;
    min-height: 68px;
    padding: 9px 12px;
    border: 0;
    background: var(--wa-sidebar-bg);
}
.friend-row::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 66px;
    height: 1px;
    background: var(--wa-line);
}
.friend-row:hover { background: #f7f8f8; }
.friend-row .avatar-small { width: 44px; height: 44px; }
.friend-copy strong { color: var(--wa-text); font-size: 14px; }
.friend-copy small { color: var(--wa-muted); font-size: 10px; }
.friend-actions { position: relative; z-index: 2; }
.friend-chat-button,
.friend-remove-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}
.friend-chat-button { border-color: transparent !important; color: #fff !important; background: var(--wa-accent) !important; }
.friend-remove-button { color: var(--wa-muted); border-color: transparent; background: transparent; font-size: 20px; }
.friend-remove-button:hover { color: #c62828; background: #fee2e2; }
.pending-row { min-height: 44px; padding: 8px 14px; border-bottom: 1px solid var(--wa-line); }

.whatsapp-chat-header {
    min-height: 64px;
    padding: 9px 14px;
    border-bottom: 1px solid #d8dbde;
    background: #f0f2f5;
}
.whatsapp-chat-header .avatar { width: 42px; height: 42px; }
.whatsapp-chat-header .call-launchers { display: flex; align-items: center; gap: 2px; }
.whatsapp-chat-header .call-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 19px;
}
.whatsapp-chat-header .call-button:hover { background: rgba(11, 20, 26, .08); }

.whatsapp-empty-chat {
    position: relative;
    overflow: hidden;
    border-bottom: 6px solid #25d366;
    background: #f7f9fa;
}
.whatsapp-empty-chat::before,
.whatsapp-empty-chat::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 168, 132, .045);
}
.whatsapp-empty-chat::before { width: 420px; height: 420px; top: -250px; right: -120px; }
.whatsapp-empty-chat::after { width: 280px; height: 280px; bottom: -180px; left: -80px; }
.empty-chat-illustration {
    position: relative;
    width: 190px;
    height: 132px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
}
.empty-chat-illustration::before {
    content: "";
    position: absolute;
    inset: 5px 18px;
    border-radius: 52% 48% 48% 52%;
    background: linear-gradient(145deg, #d9fdd3, #b7eadf);
    transform: rotate(-6deg);
}
.empty-chat-phone {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 7px solid #54656f;
    border-radius: 13px;
    color: transparent;
    background: #fff;
    box-shadow: 0 12px 24px rgba(11, 20, 26, .14);
}
.empty-chat-phone::before {
    content: "";
    position: absolute;
    top: 8px;
    width: 22px;
    height: 4px;
    border-radius: 3px;
    background: #aebac1;
}
.empty-chat-bubble {
    position: absolute;
    z-index: 3;
    top: 29px;
    right: 23px;
    min-width: 54px;
    padding: 11px 12px;
    border-radius: 18px 18px 18px 4px;
    color: #fff;
    background: var(--wa-accent);
    font-weight: 800;
    letter-spacing: 3px;
    box-shadow: 0 7px 16px rgba(0, 128, 105, .24);
}
.whatsapp-empty-chat h1 { position: relative; z-index: 2; color: #41525d; font-size: 28px; font-weight: 350; }
.whatsapp-empty-chat p { position: relative; z-index: 2; max-width: 540px; color: var(--wa-muted); line-height: 1.6; }
.whatsapp-empty-chat small { position: relative; z-index: 2; margin-top: 24px; color: #8696a0; }
.empty-chat-action {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    background: var(--wa-accent-strong);
}
.empty-chat-action:hover { background: #006e5a; }

html[data-theme="dark"] {
    --wa-sidebar-bg: #111b21;
    --wa-panel-bg: #0b141a;
    --wa-line: #222d34;
    --wa-text: #e9edef;
    --wa-muted: #8696a0;
}
html[data-theme="dark"] body[data-page="chat"] { background: #0b141a; }
html[data-theme="dark"] body[data-page="chat"] .chat-page {
    background: linear-gradient(180deg, #063d34 0 112px, #0b141a 112px 100%);
}
html[data-theme="dark"] body[data-page="chat"] .chat-layout { box-shadow: 0 8px 36px rgba(0, 0, 0, .48); }
html[data-theme="dark"] .chat-sidebar-header,
html[data-theme="dark"] .whatsapp-chat-header { background: #202c33; border-color: #2a3942; }
html[data-theme="dark"] .chat-sidebar-header .user-panel-copy > strong,
html[data-theme="dark"] .friend-tab-heading strong,
html[data-theme="dark"] .empty-contacts strong { color: var(--wa-text); }
html[data-theme="dark"] .sidebar-tabs,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .sidebar-search,
html[data-theme="dark"] .sidebar-panel-scroll,
html[data-theme="dark"] .contact-item,
html[data-theme="dark"] .friend-row { background: var(--wa-sidebar-bg); }
html[data-theme="dark"] .sidebar-tab:hover,
html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .friend-row:hover { background: #172229; }
html[data-theme="dark"] .contact-item.active { background: #202c33; }
html[data-theme="dark"] .sidebar-search .search-pill { background: #202c33; }
html[data-theme="dark"] .sidebar-search .search-pill input { color: var(--wa-text); }
html[data-theme="dark"] .sidebar-tab-count { color: #aebac1; background: #2a3942; }
html[data-theme="dark"] .friend-section-highlight { background: #191c18; }
html[data-theme="dark"] .friend-search-box .search-result { background: #172229; box-shadow: inset 0 0 0 1px #2a3942; }
html[data-theme="dark"] .empty-contacts .empty-state-icon { background: #183d35; }
html[data-theme="dark"] .friend-remove-button:hover { color: #fca5a5; background: #4b1f24; }
html[data-theme="dark"] .whatsapp-empty-chat { background: #182229; border-bottom-color: #00a884; }
html[data-theme="dark"] .whatsapp-empty-chat h1 { color: #d1d7db; }
html[data-theme="dark"] .empty-chat-phone { border-color: #8696a0; background: #202c33; }

@media (max-width: 1000px) {
    body[data-page="chat"] .chat-layout { grid-template-columns: minmax(330px, 380px) minmax(0, 1fr); }
    .connection-status { max-width: 82px; }
}

@media (max-width: 820px) {
    body[data-page="chat"] .chat-page { padding: 0; background: var(--wa-sidebar-bg); }
    body[data-page="chat"] .chat-layout {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 0;
        box-shadow: none;
    }
    body[data-page="chat"] .contacts-card,
    body[data-page="chat"] .direct-chat-card { border: 0; }
    body[data-page="chat"] .chat-view-list .contacts-card { display: flex; }
    body[data-page="chat"] .chat-view-list .direct-chat-card { display: none; }
    body[data-page="chat"] .chat-view-active .contacts-card { display: none; }
    body[data-page="chat"] .chat-view-active .direct-chat-card { display: flex; }
    .chat-sidebar-header { min-height: 62px; }
    .sidebar-tabs { min-height: 46px; padding: 0 8px; }
    .sidebar-tab::after { right: 10px; left: 10px; }
    .sidebar-search { padding: 8px 10px; }
    .contact-item { min-height: 72px; padding-right: 12px; padding-left: 12px; }
    .contact-item::after { left: 74px; }
    .friend-search-box { padding-top: 11px; }
    .whatsapp-empty-chat { display: none; }
    body[data-page="chat"] .flash,
    body[data-page="chat"] .alert { top: max(8px, env(safe-area-inset-top)); }
}

@media (max-width: 430px) {
    .chat-sidebar-header .header-icon-button { width: 35px; height: 35px; }
    .chat-sidebar-header .contacts-header-actions { gap: 0; }
    .chat-sidebar-header .user-panel-copy > strong { font-size: 17px; }
    .connection-status { max-width: 72px; }
    .friend-actions { gap: 1px; }
    .friend-row { padding-right: 8px; }
}

/* Perbaikan viewport panggilan Chrome Android */
@media (max-width: 720px) {
    .call-overlay {
        inset: 0;
        width: 100%;
        height: var(--chat-viewport-height, 100dvh);
        max-height: var(--chat-viewport-height, 100dvh);
        min-height: 0;
        padding: 0;
        overflow: hidden;
        align-items: stretch;
    }

    .call-window {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        overflow: hidden;
        border: 0;
        border-radius: 0;
    }

    .call-stage {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden;
    }

    .remote-video {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        max-height: none;
        object-fit: cover;
    }

    .local-video {
        right: 12px;
        bottom: 12px;
        width: 96px;
        height: 132px;
    }

    .call-copy {
        flex-shrink: 0;
        padding: 10px 12px 6px;
    }

    #active-call-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        flex-shrink: 0;
        padding:
            8px
            10px
            max(18px, env(safe-area-inset-bottom));
        background: #0b1220;
    }

    #incoming-call-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 120px));
        justify-content: center;
        gap: 14px;
        flex-shrink: 0;
        padding:
            12px
            16px
            max(22px, env(safe-area-inset-bottom));
        background: #0b1220;
    }

    .call-actions[hidden] {
        display: none !important;
    }

    .call-control {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 7px 4px;
    }
}

@media (max-width: 380px) {
    #active-call-actions {
        gap: 5px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .call-control {
        min-height: 48px;
    }

    .call-control > span {
        font-size: 17px;
    }

    .call-control > small {
        font-size: 9px;
    }
}
/* v2.9.0 Tomcat: application branding */
.brand-mark.brand-logo,
.auth-brand-logo,
.pin-brand-logo {
    overflow: hidden;
    padding: 0;
    background: #0b0f18;
    box-shadow: 0 0 0 1px rgba(255, 106, 0, .45), 0 5px 16px rgba(0, 0, 0, .24);
}
.brand-mark.brand-logo img,
.auth-brand-logo img,
.pin-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.auth-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
}
.pin-brand-logo {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 24px;
}
.brand-copy strong,
.tomcat-wordmark {
    letter-spacing: .01em;
}
.tomcat-accent { color: #ff6a00; }

/* v2.9.0: Chrome Android call viewport and always-visible controls */
@media (max-width: 720px) {
    .call-overlay:not(.call-chat-mode) {
        position: fixed;
        top: var(--chat-viewport-top, 0px);
        right: auto;
        bottom: auto;
        left: 0;
        width: var(--chat-viewport-width, 100vw);
        height: var(--chat-viewport-height, 100dvh);
        max-width: 100vw;
        max-height: var(--chat-viewport-height, 100dvh);
        min-height: 0;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        overflow: hidden;
        background: #05070b;
        overscroll-behavior: none;
    }

    .call-overlay:not(.call-chat-mode) .call-window {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #0b1220;
    }

    .call-overlay:not(.call-chat-mode) .call-stage {
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0 !important;
        overflow: hidden;
    }

    .call-overlay:not(.call-chat-mode) .remote-video {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0 !important;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .call-overlay:not(.call-chat-mode) .call-copy {
        position: absolute;
        top: max(10px, env(safe-area-inset-top));
        left: 50%;
        z-index: 8;
        width: min(86%, 360px);
        padding: 8px 14px;
        transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 18px;
        background: rgba(5, 7, 11, .62);
        backdrop-filter: blur(9px);
        pointer-events: none;
    }

    .call-overlay:not(.call-chat-mode) .call-copy strong {
        overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .call-overlay:not(.call-chat-mode) .call-copy span {
        margin-top: 2px;
        font-size: 11px;
    }

    .call-overlay:not(.call-chat-mode) .local-video {
        right: 10px;
        bottom: 10px;
        width: clamp(78px, 24vw, 104px);
        height: clamp(108px, 32vw, 142px);
        border-radius: 12px;
    }

    .call-overlay:not(.call-chat-mode) #active-call-actions,
    .call-overlay:not(.call-chat-mode) #incoming-call-actions {
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-height: 42vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        flex-shrink: 0;
        margin: 0;
        background: linear-gradient(180deg, #111827 0%, #080d16 100%);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .36);
    }

    .call-overlay:not(.call-chat-mode) #active-call-actions::-webkit-scrollbar,
    .call-overlay:not(.call-chat-mode) #incoming-call-actions::-webkit-scrollbar {
        display: none;
    }

    .call-overlay:not(.call-chat-mode) #active-call-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 8px 8px max(10px, env(safe-area-inset-bottom));
    }

    .call-overlay:not(.call-chat-mode) #incoming-call-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 150px));
        justify-content: center;
        gap: 12px;
        padding: 12px 18px max(16px, env(safe-area-inset-bottom));
    }

    .call-overlay:not(.call-chat-mode) .call-actions[hidden] {
        display: none !important;
    }

    .call-overlay:not(.call-chat-mode) .call-control {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 7px 3px;
        border-radius: 15px;
        touch-action: manipulation;
    }

    .call-overlay:not(.call-chat-mode) .call-control > span {
        font-size: 18px;
    }

    .call-overlay:not(.call-chat-mode) .call-control > small {
        max-width: 100%;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 360px), (max-height: 620px) {
    .call-overlay:not(.call-chat-mode) #active-call-actions {
        gap: 4px;
        padding-top: 6px;
        padding-right: 5px;
        padding-left: 5px;
    }

    .call-overlay:not(.call-chat-mode) .call-control {
        min-height: 43px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .call-overlay:not(.call-chat-mode) .call-control > span {
        font-size: 16px;
    }

    .call-overlay:not(.call-chat-mode) .call-control > small {
        font-size: 8px;
    }
}
.sidebar-app-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sidebar-app-name img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 106, 0, .35);
}

/* Tomcat v2.9.2: logo hanya dipakai pada ikon dan layar pembuka aplikasi. */
.navbar-brand-text {
    min-width: 0;
    padding-inline: 4px;
    letter-spacing: -.02em;
}

.navbar-brand-text strong {
    font-size: 20px;
    font-weight: 700;
}

.current-user-brand-only {
    min-width: 0;
    padding-left: 4px;
}

.current-user-brand-only .user-panel-copy {
    min-width: 0;
}

.current-user-brand-only .sidebar-app-name {
    display: block;
    color: inherit;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.tomcat-launch-splash {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 16px;
    color: #f8fafc;
    background: #0b141a;
    opacity: 1;
    transition: opacity .24s ease;
}

.tomcat-launch-splash[hidden] {
    display: none !important;
}

.tomcat-launch-splash.is-leaving {
    opacity: 0;
}

.tomcat-launch-splash img {
    width: min(34vw, 144px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, .35));
}

.tomcat-launch-splash strong {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}

html.tomcat-splash-visible,
html.tomcat-splash-visible body {
    overflow: hidden !important;
}


/* Tomcat v2.9.4: passkey / biometrik dan penghapusan PIN yang terpisah. */
.passkey-unlock-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(245, 124, 0, .5);
    border-radius: 14px;
    background: rgba(245, 124, 0, .12);
    color: inherit;
    padding: 13px 16px;
    cursor: pointer;
}

.passkey-unlock-button > span:first-child {
    font-size: 28px;
    line-height: 1;
}

.passkey-unlock-button > span:last-child {
    display: grid;
    gap: 2px;
    text-align: left;
}

.passkey-unlock-button small,
.passkey-register-box small,
.passkey-item small {
    opacity: .72;
}

.passkey-unlock-button:disabled,
.passkey-register-box button:disabled {
    opacity: .62;
    cursor: wait;
}

.security-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--muted-text, #8796a1);
    font-size: 12px;
}

.security-divider::before,
.security-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: rgba(127, 127, 127, .25);
}

.passkey-inline-status {
    margin-top: 10px;
    border-radius: 10px;
    padding: 9px 11px;
    background: rgba(80, 150, 255, .12);
    font-size: 13px;
}

.passkey-inline-status[data-type="error"] {
    background: rgba(220, 53, 69, .14);
    color: #ff9aa5;
}

.passkey-inline-status[data-type="success"] {
    background: rgba(25, 135, 84, .16);
    color: #8ce0b4;
}

.passkey-register-box {
    display: grid;
    gap: 12px;
}

.passkey-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.passkey-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(127, 127, 127, .2);
    border-radius: 13px;
    padding: 12px;
}

.passkey-item > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.passkey-delete-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.passkey-delete-controls input {
    width: 92px;
    min-width: 0;
}

.danger-settings-details {
    margin-top: 18px;
    border-top: 1px solid rgba(220, 53, 69, .2);
    padding-top: 12px;
}

.danger-settings-details summary {
    color: #dc5a67;
    cursor: pointer;
    font-weight: 700;
}

.danger-settings-form {
    margin-top: 12px;
}

.field-error {
    color: #dc5a67;
    font-size: 13px;
}

@media (max-width: 620px) {
    .passkey-item {
        align-items: stretch;
        flex-direction: column;
    }

    .passkey-delete-controls {
        width: 100%;
    }

    .passkey-delete-controls input {
        flex: 1;
        width: auto;
    }
}

/* v2.9.4 — reset password + mobile long-press message actions */
.auth-form-helper {
    margin-top: -4px;
    text-align: right;
    font-size: 13px;
}
.auth-form-helper a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-form-helper a:hover { text-decoration: underline; }

.message-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 1400;
}
.message-action-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(11, 20, 26, .52);
}
.message-action-card {
    position: absolute;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 20px));
    overflow: hidden;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.message-action-handle {
    width: 42px;
    height: 4px;
    margin: 9px auto 7px;
    border-radius: 999px;
    background: #c7ced3;
}
.message-action-preview {
    max-height: 72px;
    overflow: hidden;
    margin: 0 14px 7px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    background: #f5f7f8;
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
}
.message-action-card > button:not(.message-action-backdrop) {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 17px;
    border: 0;
    border-top: 1px solid var(--border);
    color: #111b21;
    background: transparent;
    text-align: left;
}
.message-action-card > button:not(.message-action-backdrop):active { background: #f2f4f5; }
.message-action-card > button span { width: 24px; text-align: center; font-size: 18px; }
.message-action-card > button strong { font-size: 14px; }
.message-action-card > button.danger { color: #d93025; }
.message-actions-open { overflow: hidden; }

html[data-theme="dark"] .message-action-card {
    border-color: #34424b;
    background: #202c33;
}
html[data-theme="dark"] .message-action-preview {
    color: #aebac1;
    background: #111b21;
}
html[data-theme="dark"] .message-action-card > button:not(.message-action-backdrop) {
    border-top-color: #34424b;
    color: #e9edef;
}
html[data-theme="dark"] .message-action-card > button:not(.message-action-backdrop):active { background: #2a3942; }
html[data-theme="dark"] .message-action-card > button.danger { color: #ff6b6b; }

@media (min-width: 721px) {
    .message-action-card { bottom: 24px; }
}

/* v2.10.2 — Official Bot, Bot API, dan tutorial integrasi */
.official-bot-search-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #0b57d0;
    background: #e8f0fe;
    font-size: 11px;
    font-weight: 800;
}
.official-bot-activate { min-width: 116px; }
.bot-chat-person .bot-avatar,
.integration-bot-avatar,
.official-bot-logo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(145deg, #e7f1ff, #d8ebff);
}
.bot-chat-person .bot-avatar { width: 40px; height: 40px; font-size: 20px; }
.verified-bot-mark {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-left: 3px;
    border-radius: 50%;
    color: #fff;
    background: #1687ff;
    font-size: 11px;
    vertical-align: 1px;
}

.official-bot-console {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    background: #f6f8fb;
}
.official-bot-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px solid #d9e7f7;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #eef6ff);
    box-shadow: 0 10px 32px rgba(31, 78, 121, .08);
}
.official-bot-logo { width: 58px; height: 58px; font-size: 29px; }
.official-bot-welcome h2 { margin: 3px 0 5px; font-size: 22px; }
.official-bot-welcome p { margin: 0; max-width: 720px; color: var(--muted); line-height: 1.55; }
.official-bot-kicker { color: #0b57d0; font-size: 11px; font-weight: 900; letter-spacing: .08em; }

.official-bot-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.official-bot-menu-button {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #d8e0e8;
    border-radius: 12px;
    color: #344054;
    background: #fff;
    font-weight: 750;
}
.official-bot-menu-button span {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #eef2f6;
    font-size: 11px;
}
.official-bot-menu-button.active {
    color: #0757b5;
    border-color: #9ecaff;
    background: #eaf4ff;
}
.official-bot-content {
    border: 1px solid #dde4ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}
.official-bot-panel { padding: 20px; }
.bot-panel-heading { margin-bottom: 16px; }
.bot-panel-heading > div { display: grid; gap: 3px; }
.bot-panel-heading strong { font-size: 17px; }
.bot-panel-heading small { color: var(--muted); }

.bot-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.bot-create-form label,
.bot-platform-select {
    display: grid;
    gap: 6px;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
}
.bot-create-form label small { font-weight: 500; color: var(--muted); }
.bot-create-form input,
.bot-platform-select select {
    min-height: 44px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: #101828;
    background: #fff;
    outline: none;
}
.bot-create-form input:focus,
.bot-platform-select select:focus { border-color: #79b6ff; box-shadow: 0 0 0 3px rgba(22, 135, 255, .12); }

.bot-token-reveal {
    margin-top: 18px;
    padding: 15px;
    border: 1px solid #b8dbff;
    border-radius: 14px;
    background: #f1f8ff;
}
.bot-token-alert { margin-bottom: 10px; color: #344054; font-size: 13px; }
.bot-token-reveal > label { display: block; margin-bottom: 6px; color: #475467; font-size: 12px; font-weight: 800; }
.bot-token-box {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.bot-token-box code {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 11px 12px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    color: #0f172a;
    background: #fff;
    white-space: nowrap;
}
.bot-token-box button {
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--primary);
    font-weight: 800;
}
.bot-token-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.integration-bot-list { display: grid; gap: 12px; }
.integration-bot-card {
    padding: 15px;
    border: 1px solid #dde4ec;
    border-radius: 14px;
    background: #fff;
}
.integration-bot-main { display: flex; align-items: center; gap: 11px; }
.integration-bot-avatar { width: 42px; height: 42px; font-size: 21px; }
.integration-bot-main > div:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.integration-bot-main small { color: var(--muted); }
.bot-status-badge {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: #667085;
    background: #f2f4f7;
    font-size: 11px;
    font-weight: 800;
}
.bot-status-badge.active { color: #067647; background: #ecfdf3; }
.bot-metrics {
    display: grid;
    grid-template-columns: 1.5fr .7fr 1fr;
    gap: 10px;
    margin: 13px 0;
}
.bot-metrics div { min-width: 0; padding: 9px 10px; border-radius: 10px; background: #f8fafc; }
.bot-metrics dt { color: #667085; font-size: 11px; }
.bot-metrics dd { margin: 3px 0 0; overflow: hidden; color: #344054; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.integration-bot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.official-bot-empty { display: grid; justify-items: center; gap: 5px; padding: 28px 14px; color: var(--muted); text-align: center; }
.official-bot-empty > span { font-size: 32px; }
.official-bot-empty strong { color: #344054; }
.official-bot-empty p { margin: 0; }

.bot-tutorial-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.bot-tutorial-steps span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}
.bot-tutorial-steps b {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: #fff;
    background: #1687ff;
}
.bot-platform-select { max-width: 360px; }
.bot-tutorial-note {
    margin: 12px 0;
    padding: 10px 12px;
    border-left: 3px solid #f5b942;
    border-radius: 8px;
    color: #5f4b20;
    background: #fff8e7;
    font-size: 12px;
}
.bot-code-shell {
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: #0f172a;
}
.bot-code-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #cbd5e1;
    border-bottom: 1px solid #27364c;
    font-size: 12px;
}
.bot-code-toolbar button { border: 0; color: #93c5fd; background: transparent; font-weight: 800; }
.bot-code-shell pre { max-height: 420px; margin: 0; overflow: auto; padding: 14px; }
.bot-code-shell code { color: #e2e8f0; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.bot-api-endpoint { display: flex; align-items: center; gap: 9px; overflow: hidden; padding: 11px; border-radius: 10px; background: #f8fafc; }
.bot-api-endpoint span { padding: 4px 7px; border-radius: 6px; color: #067647; background: #dcfae6; font-size: 11px; font-weight: 900; }
.bot-api-endpoint code { min-width: 0; overflow: auto; white-space: nowrap; }
.bot-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.bot-doc-grid article { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid #eaecf0; border-radius: 10px; }
.bot-doc-grid strong { font-size: 12px; }
.bot-doc-grid code { overflow: hidden; color: #475467; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bot-doc-fields { padding: 12px; border-radius: 10px; background: #f8fafc; }
.bot-doc-fields p { margin: 7px 0 0; color: #475467; font-size: 12px; }

html[data-theme="dark"] .official-bot-console { background: #0f171c; }
html[data-theme="dark"] .official-bot-welcome,
html[data-theme="dark"] .official-bot-content,
html[data-theme="dark"] .official-bot-menu-button,
html[data-theme="dark"] .integration-bot-card { border-color: #2a3942; background: #172229; }
html[data-theme="dark"] .official-bot-welcome p,
html[data-theme="dark"] .bot-panel-heading small,
html[data-theme="dark"] .integration-bot-main small { color: #aebac1; }
html[data-theme="dark"] .official-bot-menu-button { color: #d7e1e7; }
html[data-theme="dark"] .official-bot-menu-button.active { color: #8fc8ff; border-color: #235d8e; background: #16334b; }
html[data-theme="dark"] .bot-create-form input,
html[data-theme="dark"] .bot-platform-select select,
html[data-theme="dark"] .bot-token-box code { color: #e9edef; border-color: #34424b; background: #111b21; }
html[data-theme="dark"] .bot-token-reveal { border-color: #275d86; background: #102a3b; }
html[data-theme="dark"] .bot-token-alert { color: #cbd5e1; }
html[data-theme="dark"] .bot-metrics div,
html[data-theme="dark"] .bot-tutorial-steps span,
html[data-theme="dark"] .bot-api-endpoint,
html[data-theme="dark"] .bot-doc-fields { background: #111b21; }
html[data-theme="dark"] .bot-metrics dd,
html[data-theme="dark"] .official-bot-empty strong,
html[data-theme="dark"] .bot-doc-fields p { color: #d7e1e7; }
html[data-theme="dark"] .bot-doc-grid article { border-color: #2a3942; }

@media (max-width: 900px) {
    .official-bot-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bot-create-form { grid-template-columns: 1fr 1fr; }
    .bot-create-form > button { grid-column: 1 / -1; }
    .bot-doc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .official-bot-console { padding: 12px; }
    .official-bot-welcome { align-items: flex-start; padding: 15px; border-radius: 14px; }
    .official-bot-logo { width: 46px; height: 46px; font-size: 23px; }
    .official-bot-welcome h2 { font-size: 18px; }
    .official-bot-menu { grid-template-columns: 1fr 1fr; gap: 7px; }
    .official-bot-menu-button { min-height: 44px; padding: 8px; font-size: 12px; }
    .official-bot-panel { padding: 14px; }
    .bot-create-form { grid-template-columns: 1fr; }
    .bot-create-form > button { grid-column: auto; }
    .bot-token-box { flex-direction: column; }
    .bot-token-box button { min-height: 40px; }
    .bot-metrics { grid-template-columns: 1fr 1fr; }
    .bot-metrics div:first-child { grid-column: 1 / -1; }
    .bot-tutorial-steps { grid-template-columns: 1fr; }
    .integration-bot-actions > * { flex: 1 1 auto; text-align: center; }
}

/* Tomcat v2.10.2 - Bot API web tutorial & push diagnostics */
.official-bot-full-guide { margin-top: 12px; text-decoration: none; }
.api-guide-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.api-guide-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 22px; align-items: end; padding: 28px; border: 1px solid #dbe4ea; border-radius: 20px; background: linear-gradient(135deg, #ffffff 0%, #f1f7fb 100%); box-shadow: 0 14px 36px rgba(31,41,55,.08); }
.api-guide-back { display: inline-flex; margin-bottom: 18px; color: #4b5563; font-size: 13px; font-weight: 700; text-decoration: none; }
.api-guide-kicker { display: block; margin-bottom: 8px; color: #0069d9; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.api-guide-hero h1 { margin: 0; color: #1f2937; font-size: clamp(28px, 5vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
.api-guide-hero p { max-width: 720px; margin: 14px 0 0; color: #5f6b76; font-size: 16px; line-height: 1.65; }
.api-guide-hero-card { min-width: 0; display: grid; gap: 8px; padding: 18px; border-radius: 15px; color: #dbeafe; background: #111827; }
.api-guide-hero-card span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.api-guide-hero-card code { overflow: auto; color: #fff; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.api-guide-hero-card small { color: #94a3b8; }
.api-guide-alert { margin-top: 18px; padding: 17px 19px; border: 1px solid #b6d4fe; border-radius: 14px; background: #e7f1ff; }
.api-guide-alert strong { color: #084298; }
.api-guide-alert p { margin: 6px 0 0; color: #425466; line-height: 1.6; }
.api-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.api-guide-status-grid { margin-top: 18px; }
.api-guide-card { min-width: 0; padding: 20px; border: 1px solid #dfe6eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.api-guide-card.compact-card { padding: 16px; }
.api-guide-card.compact-card p { margin: 6px 0 0; color: #667085; font-size: 13px; }
.api-guide-card-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.api-guide-card-title > span { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #343a40; font-weight: 900; }
.api-guide-card-title div { display: grid; gap: 3px; }
.api-guide-card-title strong { color: #27313a; font-size: 16px; }
.api-guide-card-title small { color: #7b8791; line-height: 1.45; }
.api-status-list { margin: 0; }
.api-status-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #edf0f2; }
.api-status-list > div:first-child { border-top: 0; }
.api-status-list dt { color: #67727c; font-size: 13px; }
.api-status-list dd { margin: 0; color: #27313a; font-size: 13px; font-weight: 800; text-align: right; }
.api-status-list dd.ok { color: #198754; }
.api-status-list dd.bad { color: #dc3545; }
.api-status-list dd.warn { color: #b86f00; }
.api-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.api-guide-test-card { margin-top: 16px; }
.api-guide-test-card > p { max-width: 820px; margin: -4px 0 0; color: #667085; line-height: 1.6; }
.api-test-result { margin-top: 14px; padding: 12px 14px; border-radius: 10px; color: #344054; background: #f2f4f7; font-size: 13px; line-height: 1.5; }
.api-test-result.success { color: #166534; background: #dcfce7; }
.api-test-result.error { color: #991b1b; background: #fee2e2; }
.api-guide-server-setup { margin-top: 16px; border-color: #f5c2c7; background: #fff7f7; }
.api-guide-section { margin-top: 26px; padding: 24px; border: 1px solid #dfe6eb; border-radius: 18px; background: #fff; }
.api-guide-section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.api-guide-section-heading > span { min-width: 42px; color: #9aa4ad; font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.api-guide-section-heading h2 { margin: 0; color: #26313a; font-size: 22px; }
.api-guide-section-heading p { margin: 6px 0 0; color: #6b7680; line-height: 1.55; }
.api-guide-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.api-guide-flow article { min-width: 0; padding: 16px; border-radius: 13px; background: #f7f9fb; }
.api-guide-flow b { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 50%; color: #fff; background: #007bff; }
.api-guide-flow strong { display: block; color: #27313a; }
.api-guide-flow p { margin: 7px 0 0; color: #69747d; font-size: 13px; line-height: 1.5; }
.api-guide-flow code, .api-guide-numbered code, .api-guide-checklist code { padding: 2px 5px; border-radius: 5px; background: #edf2f7; font-size: .92em; }
.api-guide-inline-link { display: inline-flex; margin-top: 14px; text-decoration: none; }
.api-guide-code-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.api-guide-code-controls label { display: grid; gap: 7px; color: #59636d; font-size: 12px; font-weight: 800; }
.api-guide-code-controls select, .api-guide-code-controls input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid #d8dee4; border-radius: 9px; color: #27313a; background: #fff; }
.api-guide-code-shell pre { max-height: 520px; }
.api-guide-numbered { margin: 0; padding-left: 23px; color: #53606b; }
.api-guide-numbered li { padding: 5px 0 5px 5px; line-height: 1.55; }
.api-guide-android-steps li { padding-top: 7px; padding-bottom: 7px; }
.api-guide-note { margin-top: 18px; padding: 16px; border-radius: 12px; background: #fff8e6; }
.api-guide-note strong { color: #7a4c00; }
.api-guide-note p { margin: 7px 0 0; color: #66552f; line-height: 1.6; }
.api-guide-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.api-guide-checklist label { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid #e3e8ec; border-radius: 10px; color: #4b5563; background: #fafbfc; font-size: 13px; line-height: 1.45; }
.api-guide-checklist input { margin-top: 2px; }

html[data-theme="dark"] .api-guide-hero,
html[data-theme="dark"] .api-guide-card,
html[data-theme="dark"] .api-guide-section { color: #d7e1e7; border-color: #2a3942; background: #172229; box-shadow: none; }
html[data-theme="dark"] .api-guide-hero { background: linear-gradient(135deg, #172229 0%, #111b21 100%); }
html[data-theme="dark"] .api-guide-hero h1,
html[data-theme="dark"] .api-guide-card-title strong,
html[data-theme="dark"] .api-guide-section-heading h2,
html[data-theme="dark"] .api-guide-flow strong { color: #e9edef; }
html[data-theme="dark"] .api-guide-hero p,
html[data-theme="dark"] .api-guide-back,
html[data-theme="dark"] .api-guide-card-title small,
html[data-theme="dark"] .api-guide-section-heading p,
html[data-theme="dark"] .api-guide-flow p,
html[data-theme="dark"] .api-guide-test-card > p { color: #aebac1; }
html[data-theme="dark"] .api-guide-alert { border-color: #235d8e; background: #102a3b; }
html[data-theme="dark"] .api-guide-alert strong { color: #9fd1ff; }
html[data-theme="dark"] .api-guide-alert p { color: #c1d4df; }
html[data-theme="dark"] .api-status-list > div { border-color: #2a3942; }
html[data-theme="dark"] .api-status-list dt { color: #aebac1; }
html[data-theme="dark"] .api-status-list dd { color: #e9edef; }
html[data-theme="dark"] .api-guide-flow article,
html[data-theme="dark"] .api-guide-checklist label { border-color: #2a3942; color: #cbd5df; background: #111b21; }
html[data-theme="dark"] .api-guide-code-controls select,
html[data-theme="dark"] .api-guide-code-controls input { color: #e9edef; border-color: #34424b; background: #111b21; }
html[data-theme="dark"] .api-guide-flow code,
html[data-theme="dark"] .api-guide-numbered code,
html[data-theme="dark"] .api-guide-checklist code { background: #26343d; }
html[data-theme="dark"] .api-guide-note { background: #30260f; }
html[data-theme="dark"] .api-guide-note strong { color: #ffd78a; }
html[data-theme="dark"] .api-guide-note p { color: #e2c98c; }
html[data-theme="dark"] .api-guide-server-setup { border-color: #6b3131; background: #2a1717; }

@media (max-width: 900px) {
    .api-guide-hero { grid-template-columns: 1fr; }
    .api-guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .api-guide-page { width: min(100% - 20px, 1180px); padding-top: 14px; }
    .api-guide-hero { padding: 20px; border-radius: 16px; }
    .api-guide-grid, .api-guide-code-controls, .api-guide-checklist { grid-template-columns: 1fr; }
    .api-guide-flow { grid-template-columns: 1fr; }
    .api-guide-section { padding: 18px; }
    .api-guide-card { padding: 17px; }
    .api-guide-section-heading { gap: 9px; }
    .api-guide-section-heading > span { min-width: 34px; }
    .api-guide-actions > * { flex: 1 1 100%; }
}

/* v2.11.0: multi-device + group chat */
.group-avatar {
    background: linear-gradient(145deg, rgba(31, 151, 255, .18), rgba(102, 91, 255, .18));
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.group-member-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-2, rgba(127,127,127,.12));
    font-size: .72rem;
}

.group-create-dialog {
    width: min(92vw, 480px);
    max-height: min(82vh, 720px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--card-bg, #fff);
    color: inherit;
    box-shadow: 0 24px 80px rgba(0,0,0,.3);
}

.group-create-dialog::backdrop {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
}

.group-create-form { display: grid; gap: 16px; padding: 18px; }
.group-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group-dialog-header > div { display: grid; gap: 3px; }
.group-dialog-header small { opacity: .7; }
.group-dialog-header > button { border: 0; background: transparent; color: inherit; font-size: 1.7rem; cursor: pointer; }
.group-name-field { display: grid; gap: 7px; }
.group-name-field input { width: 100%; }
.group-friend-picker { display: grid; gap: 7px; max-height: 42vh; overflow: auto; padding-right: 4px; }
.group-friend-option { display: grid; grid-template-columns: auto 42px 1fr; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; cursor: pointer; background: var(--surface-2, rgba(127,127,127,.08)); }
.group-friend-option > span:last-child { display: grid; min-width: 0; }
.group-friend-option small { opacity: .66; overflow: hidden; text-overflow: ellipsis; }
.group-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

.group-message-sender {
    display: block;
    margin-bottom: 5px;
    font-size: .78rem;
    letter-spacing: .01em;
    opacity: .75;
}

.group-member-details { display: block; }
.group-member-details > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.group-member-details > summary::-webkit-details-marker { display: none; }
.group-member-list { display: grid; gap: 8px; padding: 12px 0 2px; }
.group-member-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.group-member-list small { opacity: .65; }

.device-sessions-card .card-body { display: grid; gap: 14px; }
.device-session-summary { display: grid; gap: 3px; }
.device-session-summary small { opacity: .68; }
.device-session-list { display: grid; gap: 8px; }
.device-session-row { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--surface-2, rgba(127,127,127,.08)); }
.device-session-row.current { outline: 1px solid rgba(42, 169, 99, .45); }
.device-session-row > div:last-child { display: grid; gap: 3px; min-width: 0; }
.device-session-row small { opacity: .68; overflow: hidden; text-overflow: ellipsis; }
.device-session-icon { font-size: 1.35rem; text-align: center; }
html[data-theme="dark"] .group-create-dialog { background: #1f2937; color: #e5e7eb; }
html[data-theme="dark"] .group-name-field input { color: #e5e7eb; border-color: #4b5563; background: #111827; }
html[data-theme="dark"] .group-friend-option,
html[data-theme="dark"] .device-session-row { background: #18212f; }

/* Device management: keep session rows readable on mobile and separate them from
   the compact 3-column settings-card layout. */
.device-session-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
}
.device-session-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.device-session-copy strong {
    min-width: 0;
    line-height: 1.35;
}
.device-session-row form {
    margin: 0;
}
.device-session-action {
    white-space: nowrap;
    min-width: 0;
}
.device-session-help {
    margin: 2px 0 0;
    color: #667781;
    font-size: 12px;
    line-height: 1.45;
}
.native-devices-card {
    display: block;
}
html[data-theme="dark"] .device-session-help {
    color: #8696a0;
}

@media (max-width: 560px) {
    .device-session-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 10px;
    }
    .device-session-icon {
        font-size: 1.15rem;
    }
    .device-session-action {
        padding: 7px 9px;
        font-size: 11px;
    }
    .device-session-copy strong {
        font-size: 13px;
    }
    .device-session-copy small {
        font-size: 11px;
        line-height: 1.35;
    }
}

/* Notification settings: clearly separate browser/PWA controls from Android native. */
.notification-platform-card {
    border: 1px solid rgba(17, 27, 33, .08);
    box-shadow: 0 8px 24px rgba(17, 27, 33, .04);
}
.settings-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.settings-title-row .badge {
    min-width: 0;
    padding-inline: 8px;
}
.notification-platform-card .settings-action-button {
    min-width: 96px;
    max-width: none;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
}
.settings-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.android-notification-icon {
    background: #eef4ff;
}
.native-settings-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    color: #667781;
    font-size: 12px;
}
.native-settings-links a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.native-settings-links a:hover { text-decoration: underline; }
html[data-theme="dark"] .notification-platform-card {
    border-color: rgba(255, 255, 255, .07);
    box-shadow: none;
}
html[data-theme="dark"] .android-notification-icon { background: #202c33; }

@media (max-width: 560px) {
    .notification-platform-card {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
    }
    .notification-platform-card .settings-action-button {
        grid-column: 2;
        justify-self: start;
        min-width: 0;
        max-width: none;
        margin-top: 2px;
    }
}

/* v2.14.0 — compact, page-based settings */
.settings-page-v4 {
    width: min(100% - 24px, 760px);
    padding-bottom: 32px;
}
.settings-page-v4 .settings-page-header {
    margin-bottom: 14px;
}
.settings-page-v4 .settings-page-header h1 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.settings-page-v4 .settings-page-header p {
    margin: 3px 0 0;
    color: #667781;
    font-size: .86rem;
}
.settings-overview-profile,
.settings-section-card,
.settings-menu-list {
    border-radius: 18px;
    overflow: hidden;
}
.settings-overview-profile {
    margin-bottom: 14px;
}
.settings-profile-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}
.settings-profile-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.settings-profile-copy strong {
    font-size: 1rem;
}
.settings-profile-copy span,
.settings-profile-copy small {
    overflow: hidden;
    color: #667781;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-profile-copy small { font-size: .72rem; }
.settings-menu-list {
    display: grid;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(17, 27, 33, .07);
    box-shadow: 0 8px 28px rgba(17, 27, 33, .045);
}
.settings-menu-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 10px 15px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(17, 27, 33, .07);
    transition: background .16s ease, transform .16s ease;
}
.settings-menu-item:last-child { border-bottom: 0; }
.settings-menu-item:hover { background: rgba(18, 140, 126, .055); }
.settings-menu-item:active { transform: scale(.995); }
.settings-menu-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(18, 140, 126, .09);
    color: var(--primary, #128c7e);
    font-size: 1.15rem;
    font-weight: 700;
}
.settings-menu-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.settings-menu-copy strong { font-size: .94rem; }
.settings-menu-copy small {
    color: #667781;
    line-height: 1.35;
}
.settings-menu-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.settings-menu-chevron {
    color: #8696a0;
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
}
.settings-menu-count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(18, 140, 126, .1);
    color: var(--primary, #128c7e);
    font-size: .75rem;
    font-weight: 700;
}
.settings-mini-status {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .09);
    color: #667781;
    font-size: .7rem;
    font-weight: 700;
}
.settings-mini-status.active {
    background: rgba(34, 197, 94, .11);
    color: #198754;
}
.settings-section-card + .settings-section-card {
    margin-top: 14px;
}
.settings-info-note {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(18, 140, 126, .07);
    border: 1px solid rgba(18, 140, 126, .14);
}
.settings-info-note strong { display: block; margin-bottom: 4px; }
.settings-info-note p { margin: 0; color: #667781; line-height: 1.5; }
.settings-inline-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 12px;
    text-decoration: none;
}
.settings-install-choice .card-body { display: grid; gap: 6px; }
.settings-install-choice h3,
.settings-install-choice p { margin: 0; }
.settings-install-choice p { color: #667781; line-height: 1.5; }

html[data-theme="dark"] .settings-page-v4 .settings-page-header p,
html[data-theme="dark"] .settings-profile-copy span,
html[data-theme="dark"] .settings-profile-copy small,
html[data-theme="dark"] .settings-menu-copy small,
html[data-theme="dark"] .settings-info-note p,
html[data-theme="dark"] .settings-install-choice p {
    color: #8696a0;
}
html[data-theme="dark"] .settings-menu-list {
    background: #202c33;
    border-color: rgba(255,255,255,.06);
    box-shadow: none;
}
html[data-theme="dark"] .settings-menu-item {
    border-bottom-color: rgba(255,255,255,.06);
}
html[data-theme="dark"] .settings-menu-item:hover { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .settings-menu-icon { background: rgba(18, 140, 126, .16); }
html[data-theme="dark"] .settings-info-note {
    background: rgba(18, 140, 126, .1);
    border-color: rgba(18, 140, 126, .22);
}

@media (max-width: 560px) {
    .settings-page-v4 { width: calc(100% - 20px); padding-top: 8px; }
    .settings-profile-link { padding: 14px; }
    .settings-menu-item {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        min-height: 66px;
        padding: 9px 12px;
        gap: 10px;
    }
    .settings-menu-icon { width: 34px; height: 34px; border-radius: 10px; }
    .settings-menu-copy strong { font-size: .9rem; }
    .settings-menu-copy small { font-size: .75rem; }
    .settings-menu-chevron { font-size: 1.5rem; }
}

/* v2.16.1 — message notification content preferences; v4 push behavior retained. */
.message-notification-card .card-body { display: grid; gap: 16px; }
.message-notification-form { display: grid; gap: 16px; }
.message-notification-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.message-notification-option {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(17, 27, 33, .09);
    border-radius: 14px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.message-notification-option:hover { border-color: rgba(18, 140, 126, .34); }
.message-notification-option:active { transform: scale(.99); }
.message-notification-option.selected {
    border-color: rgba(18, 140, 126, .58);
    background: rgba(18, 140, 126, .055);
}
.message-notification-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.message-notification-option-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(18, 140, 126, .09);
    color: var(--primary, #128c7e);
    font-size: .78rem;
    font-weight: 800;
}
.message-notification-option-brand { font-size: 1rem; }
.message-notification-option-copy { display: grid; gap: 3px; min-width: 0; }
.message-notification-option-copy strong { font-size: .9rem; }
.message-notification-option-copy small { color: #667781; line-height: 1.35; }
.message-notification-option-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(127, 127, 127, .1);
    color: transparent;
    font-size: .72rem;
    font-weight: 800;
}
.message-notification-option.selected .message-notification-option-check {
    background: var(--primary, #128c7e);
    color: #fff;
}
.message-notification-custom {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(18, 140, 126, .045);
    border: 1px solid rgba(18, 140, 126, .12);
}
.message-notification-custom[hidden] { display: none !important; }
.message-notification-custom-heading { display: grid; gap: 2px; }
.message-notification-custom-heading small { color: #667781; }
.message-notification-preview {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(17, 27, 33, .055);
}
.message-notification-preview span { color: #667781; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.message-notification-preview strong { font-size: .9rem; }
.message-notification-preview p { margin: 0; color: #54656f; font-size: .82rem; }
html[data-theme="dark"] .message-notification-option { border-color: rgba(255,255,255,.07); background: #202c33; }
html[data-theme="dark"] .message-notification-option.selected { border-color: rgba(18, 140, 126, .62); background: rgba(18, 140, 126, .11); }
html[data-theme="dark"] .message-notification-option-copy small,
html[data-theme="dark"] .message-notification-custom-heading small,
html[data-theme="dark"] .message-notification-preview span,
html[data-theme="dark"] .message-notification-preview p { color: #8696a0; }
html[data-theme="dark"] .message-notification-custom { background: rgba(18, 140, 126, .08); border-color: rgba(18, 140, 126, .2); }
html[data-theme="dark"] .message-notification-preview { background: rgba(255,255,255,.045); }
@media (max-width: 700px) { .message-notification-options { grid-template-columns: 1fr; } }