:root {
  color-scheme: light;
  --bg: #e8f1fb;
  --panel: rgba(255, 255, 255, 0.88);
  --card: #ffffff;
  --text: #17212b;
  --muted: #6d7d8d;
  --line: rgba(81, 107, 132, 0.2);
  --primary: #2aabee;
  --primary-dark: #168acd;
  --primary-rgb: 42, 171, 238;
  --accent: #7edb91;
  --danger: #e15555;
  --own-bubble: #dff9f9;
  --other-bubble: #ffffff;
  --dialog-panel-color: #f4f8fc;
  --dialog-panel-background: var(--dialog-panel-color);
  --dialog-panel-text: #17212b;
  --dialog-panel-muted: #627487;
  --dialog-panel-line: rgba(81, 107, 132, .2);
  --dialog-panel-card: rgba(255, 255, 255, .82);
  --message-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text-scale: 1;
  --shadow: 0 24px 80px rgba(31, 66, 99, 0.16);
  --night-outline: #65ddf8;
  --night-outline-rgb: 101, 221, 248;
  --night-glow-rgb: 33, 213, 240;
  --night-glow-low: .052;
  --night-glow-medium: .106;
  --night-glow-strong: .159;
  --night-glow-composer: .056;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.theme-dark {
  color-scheme: dark;
  --bg: #111827;
  --panel: rgba(24, 35, 50, 0.92);
  --card: #1f2937;
  --text: #f3f6fb;
  --muted: #a6b3c2;
  --line: rgba(217, 226, 239, 0.15);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  font-size: calc(16px * var(--text-scale));
  background:
    radial-gradient(circle at 12% 10%, rgba(42, 171, 238, 0.28), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(126, 219, 145, 0.24), transparent 34%),
    var(--bg);
  color: var(--text);
}
.page-loader { position: fixed; z-index: 1000; inset: 0; display: grid; gap: 14px; place-content: center; background: color-mix(in srgb, var(--bg) 82%, #fff); color: var(--text); font-weight: 800; letter-spacing: .01em; text-align: center; opacity: 1; transition: opacity .22s ease, visibility .22s ease; }
.page-loader--hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.page-loader__spinner { width: 42px; height: 42px; margin: auto; border: 4px solid rgba(var(--primary-rgb), .2); border-top-color: var(--primary); border-radius: 50%; animation: page-loader-spin .72s linear infinite; }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }
body[class*="site-background-"] { background-size: cover; background-position: center; background-attachment: fixed; }
body.site-background-default { background: radial-gradient(circle at 12% 10%, rgba(var(--primary-rgb), 0.28), transparent 30%), radial-gradient(circle at 88% 18%, rgba(126, 219, 145, 0.24), transparent 34%), var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.auth-shell, .admin-login {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}
.auth-card, .admin-login__card {
  width: min(460px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.logo, .avatar {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-weight: 900;
}
.brand-logo { display: block; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 18px rgba(2, 4, 8, .28); }
.brand-logo--uploaded { border-radius: 0; object-fit: contain; box-shadow: none; }
.avatar-tone-0 { background: linear-gradient(135deg, #ef6c75, #f6aa4d) !important; }
.avatar-tone-1 { background: linear-gradient(135deg, #e45435, #f29b38) !important; }
.avatar-tone-2 { background: linear-gradient(135deg, #138a9c, #45c59b) !important; }
.avatar-tone-3 { background: linear-gradient(135deg, #3478d6, #49b8ee) !important; }
.avatar-tone-4 { background: linear-gradient(135deg, #c45f32, #e99b4a) !important; }
.avatar-tone-5 { background: linear-gradient(135deg, #b74378, #e374a8) !important; }
.avatar-tone-6 { background: linear-gradient(135deg, #147d57, #77c95a) !important; }
.avatar-tone-7 { background: linear-gradient(135deg, #576579, #8595a8) !important; }
img.avatar { object-fit: cover; }
.avatar.large {
  width: 86px;
  height: 86px;
  font-size: 28px;
}
h1, h2, h3 { margin: 0; }
.brand p, .muted { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tab, .chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--text);
  font-weight: 800;
}
.tab.active, .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 800; }
.auth-link { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--primary-dark); font: inherit; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.auth-verification { width: min(460px, 100%); }
.wallpaper-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.wallpaper-picker legend { margin-bottom: 6px; color: var(--text); font-size: 15px; font-weight: 900; }
.wallpaper-picker .muted { margin: 0 0 10px; font-size: 12px; font-weight: 500; }
.wallpaper-chat-preview { min-height: 244px; overflow: hidden; margin: 0 0 12px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 18px; background-size: cover; background-position: center; box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 9px 24px rgba(31, 66, 99, .12); }
.wallpaper-chat-preview header { display: flex; gap: 9px; align-items: center; padding: 11px 13px; border-bottom: 1px solid rgba(31, 51, 72, .12); background: var(--preview-dialog-panel, var(--dialog-panel-background, #f4f8fc)); color: #17212b; }
.wallpaper-preview-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #4eb5ef, #7edb91); color: #fff; font-size: 13px; font-weight: 900; }
.wallpaper-chat-preview header b, .wallpaper-chat-preview header small { display: block; }
.wallpaper-chat-preview header b { font-size: 13px; }
.wallpaper-chat-preview header small { margin-top: 1px; color: #5d7181; font-size: 11px; font-weight: 600; }
.wallpaper-preview-messages { display: flex; flex-direction: column; gap: 8px; padding: 13px; }
.wallpaper-preview-message { width: fit-content; max-width: 80%; margin: 0; padding: 8px 10px; border-radius: 13px 13px 13px 4px; background: var(--preview-other-bubble, #ffffff); color: var(--preview-other-text, #17212b); box-shadow: 0 3px 9px rgba(22, 38, 53, .12); font-size: calc(12px * var(--preview-text-scale, 1)); font-weight: 400; line-height: 1.3; }
.wallpaper-preview-message.own { align-self: flex-end; border-radius: 13px 13px 4px; background: var(--preview-own-bubble, #ffffff); color: var(--preview-own-text, #17212b); }
.bubble-style-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.bubble-style-picker legend { margin-bottom: 6px; color: var(--text); font-size: 15px; font-weight: 900; }
.bubble-style-picker .muted { margin: 0 0 10px; font-size: 12px; font-weight: 500; }
.bubble-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bubble-style-option { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 66px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(114, 136, 158, .08); color: var(--text); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.bubble-style-option:hover { border-color: rgba(var(--primary-rgb), .4); }
.bubble-style-option.selected { border-color: var(--primary); box-shadow: none; }
.bubble-style-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bubble-style-option__preview { display: grid; min-height: 49px; place-items: center; border: 1px solid rgba(53, 97, 77, .12); border-radius: 11px; background: var(--bubble-preview); color: #17212b; box-shadow: inset 0 1px rgba(255, 255, 255, .55); font-size: 10px; font-weight: 800; }
.bubble-style-option b, .bubble-style-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-style-option b { font-size: 12px; }
.bubble-style-option small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
.dialog-color-control input[type="color"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dialog-color-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dialog-color-control__button { display: inline-flex; width: fit-content; gap: 8px; align-items: center; padding: 5px 9px 5px 5px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 999px; background: rgba(var(--primary-rgb), .07); color: var(--text); font-size: 12px; font-weight: 800; }
.dialog-color-control__button:hover, .dialog-color-control__button:focus-visible { border-color: rgba(var(--primary-rgb), .48); background: rgba(var(--primary-rgb), .13); }
.dialog-color-control__dot { display: block; width: 27px; height: 27px; border: 2px solid rgba(255, 255, 255, .88); border-radius: 50%; background: var(--dialog-color, #ffffff); box-shadow: 0 2px 7px rgba(23, 33, 43, .18); }
.dialog-color-control small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
.night-appearance-picker { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.night-appearance-picker legend { margin-bottom: 6px; color: var(--text); font-size: 15px; font-weight: 900; }
.night-appearance-picker .muted { margin: 0; font-size: 12px; font-weight: 500; }
.night-appearance-toggle { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 13px; font-weight: 750; }
.night-appearance-toggle input { width: auto; accent-color: var(--primary); }
.night-glow-intensity { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; color: var(--text); font-weight: 750; }
.night-glow-intensity output { color: var(--primary-dark); font-size: 13px; font-weight: 900; }
.night-glow-intensity input[type="range"] { grid-column: 1 / -1; padding: 0; accent-color: var(--primary); }
.night-appearance-picker.uses-admin-defaults .dialog-color-control__button { opacity: .58; cursor: not-allowed; }
.appearance-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-appearance-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-appearance-form h3 { margin: 0; font-size: 16px; }
.dialog-panel-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.dialog-panel-picker legend { margin-bottom: 6px; color: var(--text); font-size: 15px; font-weight: 900; }
.dialog-panel-picker .muted { margin: 0 0 10px; font-size: 12px; font-weight: 500; }
.dialog-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dialog-panel-option { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 68px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(114, 136, 158, .08); color: var(--text); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.dialog-panel-option:hover { border-color: rgba(var(--primary-rgb), .4); }
.dialog-panel-option.selected { border-color: var(--primary); box-shadow: 0 5px 14px rgba(var(--primary-rgb), .12); }
.dialog-panel-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dialog-panel-option__preview { display: block; height: 54px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 9px; background: var(--dialog-panel-background); box-shadow: inset 0 1px rgba(255, 255, 255, .22); }
.dialog-panel-option__preview.dialog-panel-style-custom { background: var(--dialog-panel-color); }
.dialog-panel-option b, .dialog-panel-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-panel-option b { font-size: 12px; }
.dialog-panel-option small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
.site-color-preview { display: flex; width: 100%; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(var(--primary-rgb), .22); border-radius: 14px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .16), rgba(255,255,255,.3)); color: var(--text); text-align: left; }
.site-color-preview:hover, .site-color-preview:focus-visible { border-color: rgba(var(--primary-rgb), .55); box-shadow: 0 7px 16px rgba(var(--primary-rgb), .14); transform: translateY(-1px); }
.site-color-preview__dot { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: var(--preview-site-color, var(--primary)); box-shadow: 0 8px 16px rgba(var(--primary-rgb), .28); }
.site-color-preview b, .site-color-preview small { display: block; }
.site-color-preview small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.site-background-preview { min-height: 166px; overflow: hidden; margin: 0 0 12px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 18px; background-size: cover; background-position: center; box-shadow: inset 0 1px rgba(255, 255, 255, .26), 0 9px 24px rgba(31, 66, 99, .14); }
.site-background-preview__glass { display: flex; gap: 8px; align-items: center; padding: 11px; background: rgba(255, 255, 255, .72); color: #17212b; backdrop-filter: blur(12px); }
.site-background-preview__avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 900; }
.site-background-preview__glass b, .site-background-preview__glass small { display: block; }
.site-background-preview__glass small { color: #5d7181; font-size: 10px; font-weight: 600; }
.site-background-preview__glass button { margin-left: auto; padding: 7px 9px; border: 0; border-radius: 9px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; }
.site-background-preview__columns { display: grid; grid-template-columns: .85fr 1.4fr .85fr; gap: 7px; padding: 11px; }
.site-background-preview__columns span { display: grid; min-height: 86px; place-items: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px; background: rgba(255, 255, 255, .64); color: #314354; font-size: 11px; font-weight: 800; backdrop-filter: blur(10px); }
.site-background-preview.site-background-custom { background-image: var(--preview-site-background-image); }
.wallpaper-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wallpaper-option { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 68px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(114, 136, 158, 0.08); color: var(--text); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.wallpaper-option:hover { border-color: rgba(var(--primary-rgb), .4); }
.wallpaper-option.selected { border-color: var(--primary); box-shadow: none; }
.wallpaper-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wallpaper-preview { display: block; height: 54px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.wallpaper-option b, .wallpaper-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallpaper-option b { font-size: 12px; }
.wallpaper-option small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 13px;
  outline: none;
  background: var(--card);
  color: var(--text);
}
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.password-field input { min-width: 0; }
textarea { min-height: 76px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(42, 171, 238, 0.14); }
.button {
  border: 0;
  border-radius: 14px;
  padding: 11px 15px;
  background: rgba(114, 136, 158, 0.14);
  color: var(--text);
  font-weight: 900;
}
.button.primary { background: var(--primary); color: #fff; box-shadow: 0 10px 20px rgba(42, 171, 238, 0.22); }
.button.danger { background: var(--danger); color: #fff; }
.button.small { padding: 7px 10px; border-radius: 999px; font-size: 12px; }
button { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
button:active { transform: scale(.96); }

.app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 330px;
  width: min(1440px, calc(100vw - 24px));
  height: min(920px, calc(100vh - 24px));
  margin: 12px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow);
}
.app-shell.without-rightbar { grid-template-columns: var(--sidebar-width, 330px) minmax(0, 1fr); }
.app-shell > .sidebar, .app-shell > .chat-panel, .app-shell > .rightbar { position: relative; z-index: 1; }
.sidebar-resize-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--sidebar-width, 330px) - 4px); width: 9px; cursor: col-resize; touch-action: none; }
.sidebar-resize-handle::after { position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; content: ""; background: transparent; transition: background-color .16s ease, box-shadow .16s ease; }
.sidebar-resize-handle:hover::after, .is-resizing-sidebar .sidebar-resize-handle::after { background: var(--primary); box-shadow: 0 0 7px rgba(var(--primary-rgb), .45); }
body.is-resizing-sidebar { cursor: col-resize; user-select: none; }
body:not(.site-background-default) .app-shell { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .46); backdrop-filter: blur(12px); }
body:not(.site-background-default) .sidebar, body:not(.site-background-default) .rightbar, body:not(.site-background-default) .chat-panel:not(.chat-panel--channel-themed) { background: var(--dialog-panel-background); backdrop-filter: blur(20px) saturate(1.12); }
body.theme-dark:not(.site-background-default) .sidebar, body.theme-dark:not(.site-background-default) .rightbar, body.theme-dark:not(.site-background-default) .chat-panel:not(.chat-panel--channel-themed) { background: var(--dialog-panel-background); }
body:not(.site-background-default) .row, body:not(.site-background-default) .card { background: rgba(255, 255, 255, .76); backdrop-filter: blur(14px); }
body.theme-dark:not(.site-background-default) .row, body.theme-dark:not(.site-background-default) .card { background: rgba(31, 41, 55, .76); }
.sidebar, .rightbar, .chat-panel { min-width: 0; overflow: hidden; background: var(--panel); }
.sidebar, .rightbar { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--line); }
.rightbar { border-left: 1px solid var(--line); }
.profile { padding: 8px; border-bottom: 1px solid var(--line); }
.profile-trigger { display: flex; width: 100%; gap: 10px; align-items: center; padding: 6px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; }
.profile-trigger:hover { background: rgba(var(--primary-rgb), 0.1); }
.profile__body { min-width: 0; flex: 1; }
.profile strong, .profile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-arrow { color: var(--muted); font-size: 20px; font-weight: 900; }
.stars { color: #d99b00; font-weight: 900; }
.nav { display: none; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 12px; border-bottom: 1px solid var(--line); }
.nav.open { display: grid; }
.nav button { border: 0; border-radius: 14px; padding: 10px; background: transparent; color: var(--text); font-weight: 900; }
.nav-button { display: flex; gap: 8px; align-items: center; justify-content: flex-start; min-width: 0; text-align: left; transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.nav-button__icon { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 15px; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.nav-button__icon svg { display: block; width: 18px; height: 18px; }
.nav-button__label { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; white-space: normal; }
.nav-button[data-section="settings"] .nav-button__icon { width: 30px; height: 30px; font-size: 19px; }
.nav-button:hover, .nav-button:focus-visible { background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--primary-rgb), .12); }
.nav-button:hover .nav-button__icon, .nav-button:focus-visible .nav-button__icon { background: var(--primary); color: #fff; transform: rotate(-5deg) scale(1.08); }
.nav-button.active { background: rgba(var(--primary-rgb), .16); color: var(--primary-dark); }
.nav-button.active .nav-button__icon { background: var(--primary); color: #fff; }
.nav-button:active { transform: translateY(0) scale(.97); }
.list, .right-content { overflow: auto; padding: 12px; }
.row, .card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: var(--card);
  margin-bottom: 10px;
}
.row { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; color: var(--text); }
button.row { border: 1px solid var(--line); }
button.row:hover, button.row.active { border-color: rgba(var(--primary-rgb), 0.55); background: rgba(var(--primary-rgb), 0.09); }
.chat-row { position: relative; margin-bottom: 10px; }
.chat-row .row { margin-bottom: 0; padding-right: 44px; }
.chat-row__aside { display: grid; min-width: 46px; justify-items: end; gap: 4px; align-self: stretch; padding-top: 1px; }
.chat-row__time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.chat-row__aside .unread-badge { margin: 0; }
.unread-badge { display: grid; min-width: 21px; height: 21px; place-items: center; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e55757; color: #fff; box-shadow: 0 3px 8px rgba(192, 42, 42, .28); font-size: 11px; font-weight: 900; line-height: 1; }
.chat-row.has-unread .row__title, .chat-row.has-unread .row__sub { font-weight: 850; }
.chat-menu-button { position: absolute; top: 50%; right: 7px; width: 32px; height: 32px; padding: 0 0 2px; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }
.chat-menu-button:hover, .chat-menu-button:focus-visible { background: rgba(42, 171, 238, 0.14); color: var(--primary-dark); }
.recommended-channels { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.recommended-channels__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 3px 10px; }
.recommended-channels__title b { font-size: 15px; }
.recommended-channels__title span { color: var(--muted); font-size: 11px; font-weight: 700; }
.recommended-channel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 10px; border: 1px solid rgba(var(--primary-rgb), .2); border-radius: 16px; background: rgba(var(--primary-rgb), .055); }
.recommended-channel__info { display: flex; min-width: 0; flex: 1 1 auto; gap: 9px; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.recommended-channel__info > span { min-width: 0; }
.recommended-channel__info:hover b, .recommended-channel__info:focus-visible b { color: var(--primary-dark); }
.recommended-channel__info:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 10px; }
.recommended-channel b, .recommended-channel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommended-channel small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.recommended-channel .button { flex: 0 0 auto; }
.activity-rewards-promo { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; padding: 13px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .11), rgba(126, 219, 145, .1)); }
.activity-rewards-promo b { color: var(--primary-dark); font-size: 13px; line-height: 1.35; }
.activity-rewards-promo .button { flex: 0 0 auto; }
.chat-menu-overlay { position: fixed; z-index: 85; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 20, 34, .58); }
.chat-menu { width: min(360px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.chat-menu header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.chat-menu header div { min-width: 0; display: grid; gap: 3px; }
.chat-menu header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-menu header small { color: var(--muted); }
.chat-menu header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 23px; line-height: 1; }
.chat-menu__actions { display: grid; padding: 8px; }
.chat-menu__actions button { padding: 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; font: inherit; }
.chat-menu__actions button:hover, .chat-menu__actions button:focus-visible { background: rgba(var(--primary-rgb), .1); }
.chat-menu__actions button.danger { color: var(--danger); }
.chat-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chat-filters .chip {
  position: relative;
  overflow: hidden;
  min-height: 34px;
  padding: 7px 12px;
  border-color: rgba(var(--primary-rgb), .16);
  background: rgba(var(--primary-rgb), .055);
  color: #17212b;
  font-size: 12px;
  font-weight: 850;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.chat-filters .chip::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, rgba(255,255,255,.44), transparent 55%);
  pointer-events: none;
}
.chat-filters .chip:hover, .chat-filters .chip:focus-visible {
  border-color: rgba(var(--primary-rgb), .4);
  background: rgba(var(--primary-rgb), .12);
  color: #0d4d73;
  box-shadow: 0 6px 14px rgba(var(--primary-rgb), .13);
  transform: translateY(-1px);
}
.chat-filters .chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 7px 16px rgba(var(--primary-rgb), .26), inset 0 1px rgba(255,255,255,.28);
}
body.theme-dark .chat-filters .chip { color: #f7fbff; }
body.theme-dark .chat-filters .chip:hover, body.theme-dark .chat-filters .chip:focus-visible { color: #ffffff; }
.row__body { min-width: 0; flex: 1; }
.row__title { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-account { position: relative; }
.saved-account + .saved-account { margin-top: 8px; }
.saved-account__login { width: 100%; margin: 0; padding-right: 48px; }
.saved-account__remove { position: absolute; top: 50%; right: 10px; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid rgba(197, 70, 89, .18); border-radius: 9px; background: rgba(197, 70, 89, .08); color: #b53b53; font-size: 21px; line-height: 1; opacity: .72; transform: translateY(-50%); transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
.saved-account:hover .saved-account__remove, .saved-account__remove:focus-visible { opacity: 1; }
.saved-account__remove:hover, .saved-account__remove:focus-visible { border-color: rgba(197, 70, 89, .42); background: rgba(197, 70, 89, .15); color: #922941; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; background: rgba(42, 171, 238, 0.13); color: var(--primary-dark); font-size: 12px; font-weight: 900; }
.status-icon { border: 0; background: transparent; font-size: 18px; }
.profile-card { display: flex; align-items: center; gap: 14px; }
.small-profile { margin: 10px 0; }
.stories-row { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 2px; }
.story {
  flex: 0 0 112px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(42, 171, 238, 0.08);
  padding: 0;
  color: var(--text);
  text-align: left;
}
.story img { display: block; width: 100%; height: 130px; object-fit: cover; }
.story b, .story span { display: block; padding: 7px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story span { padding-top: 2px; padding-bottom: 8px; color: var(--muted); font-size: 12px; }
.post {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.45);
}
.post__body { min-width: 0; flex: 1 1 auto; }
.post__author { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--text); font-size: 14px; font-weight: 800; }
.post__menu { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 18px; line-height: 1; }
.post__menu:hover, .post__menu:focus-visible { background: rgba(var(--primary-rgb), .2); }
.post p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-photo { display: block; width: 100%; max-height: min(520px, 65vh); margin-top: 8px; border-radius: 16px; background: #101923; object-fit: contain; }
.post-actions, .group-post-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.post-actions button, .group-post-actions button { border: 0; border-radius: 999px; padding: 5px 9px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font: inherit; font-size: 11px; font-weight: 800; }
.post-actions button:hover, .group-post-actions button:hover { background: rgba(var(--primary-rgb), .18); }
.post-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.post-reactions span, .profile-post-viewer__reactions span { padding: 4px 8px; border-radius: 999px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.group-post-actions { margin-top: 7px; }
.owner-notifications { display: grid; gap: 8px; margin-top: 12px; border-color: rgba(var(--primary-rgb), .25); }
.owner-notifications > b { color: var(--primary-dark); }
.owner-notifications p { margin: 0; padding: 9px 10px; border-left: 3px solid var(--primary); border-radius: 8px; background: rgba(var(--primary-rgb), .08); font-size: 13px; line-height: 1.4; }
.media-button, .profile-avatar-button { padding: 0; border: 0; background: transparent; }
.media-button { display: block; width: 100%; overflow: hidden; border-radius: 16px; }
.media-button:hover .post-photo, .profile-avatar-button:hover .profile-avatar { filter: brightness(.92); transform: scale(1.01); }
.post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.gallery-photo { aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var(--line); }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.gallery-photo:hover img { transform: scale(1.06); }
.profile-post-overlay { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5, 12, 20, .7); }
.profile-post-viewer { display: grid; width: min(760px, 100%); max-height: min(900px, 94vh); overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.profile-post-viewer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.profile-post-viewer header b, .profile-post-viewer header span { display: block; }
.profile-post-viewer header span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.profile-post-viewer header button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 22px; }
.profile-post-viewer__media { display: block; width: 100%; max-height: 68vh; padding: 0; border: 0; background: #0c1520; }
.profile-post-viewer__media img { display: block; width: 100%; max-height: 68vh; object-fit: contain; }
.profile-post-viewer > p { margin: 0; padding: 14px 16px 4px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.profile-post-viewer footer { display: grid; gap: 10px; padding: 14px 16px 16px; }
.profile-post-viewer__reactions, .profile-post-viewer__emoji-actions, .profile-post-viewer__actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.profile-post-viewer__actions { justify-content: space-between; }
.profile-post-viewer__emoji-actions button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); font-size: 18px; }
.profile-post-viewer__emoji-actions button:hover, .profile-post-viewer__emoji-actions button:focus-visible { background: rgba(var(--primary-rgb), .2); transform: scale(1.08); }
.profile-post-viewer__emoji-actions button.active { background: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .22); transform: scale(1.06); }
.profile-post-viewer__send-reaction { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 17px; line-height: 1; }
.profile-post-viewer__send-reaction:disabled { cursor: default; opacity: .42; }
.profile-post-viewer__send-reaction:not(:disabled):hover, .profile-post-viewer__send-reaction:not(:disabled):focus-visible { background: var(--primary-dark); transform: scale(1.06); }

.chat-panel { position: relative; display: flex; min-height: 0; flex-direction: column; }
.chat-body { position: relative; display: flex; min-height: 0; flex: 1 1 auto; }
.chat-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.35); }
.chat-identity { display: flex; min-width: 0; flex: 1; gap: 12px; align-items: center; }
.chat-profile-avatar, .chat-profile-name { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.chat-profile-avatar { display: grid; border-radius: 50%; }
.chat-profile-name { min-width: 0; }
.chat-profile-avatar .avatar, .chat-profile-name strong { transition: transform .18s ease, filter .18s ease, color .18s ease; }
.chat-profile-avatar:is(:hover, :focus-visible) .avatar { filter: brightness(.96); transform: scale(1.06); }
.chat-profile-name:is(:hover, :focus-visible) strong { color: var(--primary-dark); }
.chat-profile-avatar:active .avatar { filter: brightness(.96); transform: scale(1.06); }
.chat-profile-name:active strong { color: var(--primary-dark); }
.chat-profile-avatar:focus-visible, .chat-profile-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.chat-head__body { min-width: 0; flex: 1; }
.chat-head__body span { display: block; color: var(--muted); font-size: 13px; }
.call-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 4px 12px rgba(36, 85, 131, 0.1);
  color: #1687e8;
}
.call-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-button:hover { background: #eaf5ff; transform: translateY(-2px); box-shadow: 0 7px 16px rgba(36, 85, 131, .16); }
.messages { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 10px; overflow: auto; padding: 18px 8px 12px; background: transparent; background-size: cover; background-position: center; }
.pinned-messages { position: relative; z-index: 4; display: flex; width: calc(100% - 28px); min-width: 0; max-width: calc(100% - 28px); min-height: 58px; gap: 8px; align-items: center; margin: 7px 14px; padding: 8px 11px; overflow: hidden; border: 1px solid rgba(42, 171, 238, 0.22); border-radius: 15px; background: rgba(255, 255, 255, 0.68); color: var(--text); transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.pinned-messages button { border: 0; background: transparent; color: inherit; }
.pinned-messages__content { display: grid; min-width: 0; max-width: 100%; flex: 1 1 0; align-content: center; gap: 2px; padding: 6px 9px; overflow: hidden; border-radius: 11px !important; text-align: left; transition: background-color .18s ease, color .18s ease; }
.pinned-messages__label { display: flex; min-width: 0; gap: 6px; align-items: center; color: var(--primary-dark); font-size: 11px; font-weight: 800; }
.pinned-messages__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-messages__pin-icon, .chat-row__pin-icon, .message__pin-icon { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -3px; }
.pinned-messages__text { display: block; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pinned-messages__next, .pinned-messages__menu { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; padding: 0; border-radius: 50% !important; color: var(--muted) !important; font-size: 18px; line-height: 1; }
.pinned-messages__next { font-size: 16px; transform: rotate(-90deg); }
.pinned-messages__actions { position: relative; display: grid; flex: 0 0 auto; }
.pinned-messages__menu svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.pinned-messages:hover, .pinned-messages:focus-within { border-color: rgba(var(--primary-rgb), .45); background: rgba(255, 255, 255, .84); box-shadow: 0 8px 18px rgba(30, 81, 122, .13); }
.pinned-messages:active { box-shadow: 0 4px 10px rgba(30, 81, 122, .11); }
.pinned-messages__content:hover, .pinned-messages__content:focus-visible { background: rgba(var(--primary-rgb), .09); }
.pinned-messages__content:hover .pinned-messages__text, .pinned-messages__content:focus-visible .pinned-messages__text { color: var(--primary-dark); }
.pinned-messages__next:hover, .pinned-messages__next:focus-visible, .pinned-messages__menu:hover, .pinned-messages__menu:focus-visible { background: rgba(var(--primary-rgb), .12) !important; color: var(--primary-dark) !important; }
.chat-background-default { background: var(--panel); }
.chat-background-whatsapp, .site-background-whatsapp {
  background-color: #e5ddd5;
  background-image:
    radial-gradient(circle at 7px 7px, rgba(94, 129, 111, .18) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 23px 17px, rgba(94, 129, 111, .13) 0 1px, transparent 1.3px),
    linear-gradient(135deg, transparent 46%, rgba(94, 129, 111, .11) 47% 52%, transparent 53%),
    linear-gradient(45deg, transparent 46%, rgba(94, 129, 111, .08) 47% 52%, transparent 53%);
  background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px;
}
.chat-background-mint, .site-background-mint { background: radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae 0%, #a4fb8f 49%, #8cf79a 100%); }
.chat-background-aurora, .site-background-aurora { background: radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd 0%, #007cd6 47%, #0c1f89 100%); }
.chat-background-noir, .site-background-noir { background: radial-gradient(ellipse 70% 110% at 8% 47%, rgba(29, 36, 111, .62), transparent 56%), radial-gradient(ellipse 60% 100% at 100% 68%, rgba(10, 71, 78, .62), transparent 61%), linear-gradient(120deg, #092032 0%, #0a032d 46%, #03031c 100%); }
.chat-background-cyan, .site-background-cyan { background: radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); }
.chat-background-mist, .site-background-mist { background: radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); }
.chat-background-sunset, .site-background-sunset { background: radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); }
.chat-background-ocean, .site-background-ocean { background: radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); }
.chat-background-lavender, .site-background-lavender { background: radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); }
.chat-background-forest, .site-background-forest { background: radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); }
.chat-background-midnight, .site-background-midnight { background: radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); }
.chat-background-ember, .site-background-ember { background: radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); }
.chat-background-iris, .site-background-iris { background: radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); }
.chat-background-custom { background-size: cover; background-position: center; }
.site-background-custom { background-image: var(--site-background-image); }
.chat-panel--channel-themed { color: var(--channel-panel-text, var(--text)); }
.chat-panel--channel-themed.chat-background-custom { background-image: var(--channel-background-image); }
.chat-panel--channel-themed .chat-head,
.chat-panel--channel-themed > .composer { border-color: color-mix(in srgb, var(--channel-panel-color, var(--dialog-panel-color)) 78%, var(--channel-panel-text, var(--text))); background: color-mix(in srgb, var(--channel-panel-color, var(--dialog-panel-color)) 90%, transparent); color: var(--channel-panel-text, var(--text)); }
.chat-panel--channel-themed .chat-head__body span { color: color-mix(in srgb, var(--channel-panel-text, var(--text)) 68%, transparent); }
.chat-panel--channel-themed .messages { background-color: transparent; }
.chat-panel--channel-themed .messages::before { background: rgba(255, 255, 255, .1); }
.chat-panel--channel-themed .pinned-messages,
.chat-panel--channel-themed .empty-chat-notice { background: color-mix(in srgb, var(--channel-panel-color, #ffffff) 84%, transparent); color: var(--channel-panel-text, var(--text)); }
.chat-panel--channel-themed .pinned-messages__text,
.chat-panel--channel-themed .empty-chat-notice p { color: color-mix(in srgb, var(--channel-panel-text, var(--text)) 72%, transparent); }
.empty { display: grid; height: 100%; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.empty__card { display: flex; width: min(470px, 100%); gap: 18px; align-items: center; padding: 28px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 28px; background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(227, 246, 255, .68)); box-shadow: 0 18px 42px rgba(34, 94, 132, .12), inset 0 1px rgba(255, 255, 255, .78); backdrop-filter: blur(16px); text-align: left; }
.empty__icon { display: grid; width: 64px; height: 64px; flex: 0 0 auto; place-items: center; border-radius: 22px; background: linear-gradient(145deg, #42c7ed, #348ce5); color: #fff; box-shadow: 0 10px 22px rgba(42, 171, 238, .3); }
.empty__icon svg { width: 31px; height: 31px; }
.empty__content { min-width: 0; }
.empty__eyebrow { color: var(--primary-dark); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.empty__card h2 { margin: 4px 0 7px; color: var(--text); font-size: clamp(24px, 3vw, 32px); letter-spacing: -.04em; }
.empty__card p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; }
.empty__tips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.empty__tips span { padding: 5px 9px; border-radius: 999px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 11px; font-weight: 800; }
body.theme-dark .empty__card { border-color: rgba(111, 209, 244, .2); background: linear-gradient(135deg, rgba(25, 53, 77, .88), rgba(24, 71, 84, .76)); }
.message { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); align-self: stretch; width: 100%; color: var(--other-bubble-text, #17212b); font-family: var(--message-font); }
.message.message--with-author { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
.message.message--with-author .message__content { grid-column: 2; grid-row: 1; }
.message.own { justify-items: end; color: var(--own-bubble-text, #17212b); }
.message__content { display: flex; width: fit-content; min-width: 0; max-width: min(650px, 100%); flex-direction: column; align-items: flex-start; }
.message.own .message__content { align-items: flex-end; }
.message.selected .message__bubble { outline: 3px solid rgba(var(--primary-rgb), .62); outline-offset: 2px; }
.message__selected-marker { position: absolute; z-index: 1; top: -9px; right: -9px; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 3px 9px rgba(26, 75, 112, .28); pointer-events: none; }
.message__selected-marker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; }
body.theme-dark .message__selected-marker { border-color: #17243a; }
.message__bubble { width: fit-content; max-width: 100%; padding: 7px 12px; border-radius: 18px; background: var(--other-bubble); box-shadow: 0 4px 16px rgba(26, 42, 58, 0.08); }
.message.own .message__content { max-width: min(440px, 100%); }
.message.own .message__bubble { border-radius: 20px 20px 6px 20px; background: var(--own-bubble-background, var(--own-bubble)); }
.message__meta { display: inline-flex; float: right; gap: 4px; align-items: center; margin: 4px 0 -2px 10px; color: color-mix(in srgb, currentColor 62%, transparent); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; }
.message__delivery-icon { display: inline-grid; width: 14px; height: 14px; place-items: center; }
.message__delivery-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.message__delivery--sending .message__delivery-icon { animation: message-delivery-spin .8s linear infinite; }
.message__delivery--failed { color: var(--danger); }
.message__delivery--read { color: var(--primary-dark); }
.message__pending-delete { display: inline-grid; width: 22px; height: 22px; place-items: center; margin: 2px 0 -3px 7px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); vertical-align: middle; }
.message__pending-delete svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.message__pending-delete:hover, .message__pending-delete:focus-visible { background: color-mix(in srgb, var(--danger) 22%, transparent); transform: scale(1.08); }
@keyframes message-delivery-spin { to { transform: rotate(360deg); } }
.message.pinned .message__bubble { outline: 2px solid rgba(42, 171, 238, 0.38); }
.message__forwarded { display: flex; gap: 4px; align-items: center; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.2; }
.message__forwarded svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.message.own .message__forwarded { color: color-mix(in srgb, var(--own-bubble-text, #17212b) 68%, transparent); }
.shared-profile-card { display: flex; width: min(310px, 100%); gap: 10px; align-items: center; margin: 2px 0; padding: 9px; border: 1px solid rgba(var(--primary-rgb), .22); border-radius: 14px; background: rgba(var(--primary-rgb), .08); color: inherit; font: inherit; text-align: left; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.shared-profile-card:hover, .shared-profile-card:focus-visible { border-color: rgba(var(--primary-rgb), .5); background: rgba(var(--primary-rgb), .14); transform: translateY(-1px); }
.shared-profile-card__avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; object-fit: cover; }
.shared-profile-card > span { display: grid; min-width: 0; flex: 1; gap: 2px; }
.shared-profile-card b, .shared-profile-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-profile-card b { font-size: 13px; }
.shared-profile-card small { color: color-mix(in srgb, currentColor 64%, transparent); font-size: 12px; }
.shared-profile-card em { flex: 0 0 auto; color: var(--primary-dark); font-size: 11px; font-style: normal; font-weight: 800; }
.shared-profile-card--missing { cursor: default; opacity: .72; }
.message__text { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--message-font); font-weight: 400; line-height: 1.4; }
.message__text { font-size: 15px; font-weight: 450; }
.message.own .message__text { font-weight: 450; }
.message__rss-text { display: grid; gap: 7px; margin-top: 8px; }
.message__rss-title { font-weight: 800; line-height: 1.35; }
.message__rss-description { min-width: 0; }
.message__rss-description.is-collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.message__rss-toggle { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--primary-dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.message__rss-toggle:hover, .message__rss-toggle:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.message__rss-link { max-width: 100%; overflow: hidden; color: var(--primary-dark); font-size: 12px; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.message__rss-link:hover, .message__rss-link:focus-visible { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.message__author { display: grid; width: 32px; height: 32px; grid-column: 1; grid-row: 1; place-items: center; margin: 0 8px 0 0; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: transparent; color: var(--text); }
.message__author-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; object-fit: cover; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; text-align: center; }
.message__author:is(:hover, :focus-visible) .message__author-avatar { filter: brightness(.96); transform: scale(1.06); }
.message--system { align-self: center; max-width: min(560px, 95%); margin: 3px 0; padding: 6px 11px; border: 1px solid rgba(var(--primary-rgb), .17); border-radius: 999px; background: rgba(255, 255, 255, .58); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: 0 4px 12px rgba(31, 65, 90, .06); backdrop-filter: blur(8px); }
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--system { background: rgba(15, 29, 49, .64); }
.message.own .reacts { align-self: flex-end; max-width: min(440px, 100%); }
.message-photo-button { display: block; max-width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: transparent; cursor: zoom-in; }
.message-photo { display: block; max-width: 100%; max-height: 360px; border-radius: 16px; object-fit: cover; transition: transform .18s ease, filter .18s ease; }
.message-photo-button:hover .message-photo, .message-photo-button:focus-visible .message-photo { filter: brightness(.94); transform: scale(1.015); }
.message-video { position: relative; width: min(520px, 100%); overflow: hidden; border-radius: 16px; background: #080f18; }
.message-video video { display: block; width: 100%; max-height: 360px; background: #080f18; }
.message-video > button { position: absolute; top: 10px; right: 10px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(5, 12, 20, .72); color: #fff; font-size: 19px; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.message-video > button svg, .circle-expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.message-video:hover > button, .message-video:focus-within > button { opacity: 1; }
.message-video > button:hover, .message-video > button:focus-visible { transform: scale(1.08); }
.message-audio { width: min(300px, 100%); }
.message--audio .message__bubble { width: max-content; max-width: min(300px, 100%); padding: 0; border: 0; background: transparent; box-shadow: none; }
.circle-message { position: relative; width: 210px; }
.circle-message__video { position: relative; width: 210px; height: 210px; }
.message-circle { display: block; width: 210px; height: 210px; border-radius: 50%; object-fit: cover; background: transparent; cursor: pointer; }
.circle-expand { position: absolute; top: 177px; right: 9px; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(5, 12, 20, .72); color: white; font-size: 16px; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.circle-message:hover .circle-expand, .circle-message:focus-within .circle-expand, .circle-message.is-touched .circle-expand { opacity: 1; }
.circle-expand:hover { transform: scale(1.08); }
.circle-player { display: flex; max-height: 0; gap: 7px; align-items: center; margin-top: 0; padding: 0 5px; overflow: hidden; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .12); box-shadow: none; backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transform: translateY(-5px); transition: max-height .2s ease, margin-top .2s ease, padding .2s ease, opacity .16s ease, transform .2s ease, background-color .18s ease; }
.circle-message:hover .circle-player, .circle-message:focus-within .circle-player, .circle-message.is-touched .circle-player { max-height: 30px; margin-top: 4px; padding: 3px 5px; background: rgba(255, 255, 255, .25); opacity: .72; pointer-events: auto; transform: translateY(0); }
.circle-player button { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .55); color: #fff; font-size: 10px; font-weight: 900; }
.circle-player input { min-width: 0; padding: 0; accent-color: var(--primary); }
.chat-row__pin-icon { margin-right: 4px; color: var(--primary-dark); }
.message-selection-toolbar { position: relative; z-index: 5; display: grid; flex: 0 0 auto; gap: 8px; padding: 8px 14px; background: rgba(236, 248, 255, .98); color: var(--text); box-shadow: 0 6px 14px rgba(26, 75, 112, .12); }
.message-selection-toolbar__count { min-width: 0; }
.message-selection-toolbar__actions { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.message-selection-toolbar__actions button { display: inline-flex; min-width: 0; min-height: 36px; gap: 7px; align-items: center; justify-content: center; padding: 7px 10px; border: 0; border-radius: 11px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; }
.message-selection-toolbar__actions button:hover { background: rgba(var(--primary-rgb), .2); }
.message-selection-toolbar__actions button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; }
body.theme-dark .message-selection-toolbar { background: rgba(22, 36, 58, .96); }
.composer { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px 12px; border-top: 0; background: transparent; box-shadow: none; }
.chat-search-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-search-panel input { min-width: 0; border-radius: 999px; }
.chat-search-panel span { color: var(--muted); font-size: 12px; font-weight: 800; }
.chat-search-panel button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-weight: 900; }
.chat-search-empty { align-self: center; justify-self: center; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.72); }
.jump-to-latest { position: absolute; z-index: 5; right: 18px; bottom: 76px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: var(--primary); color: white; box-shadow: 0 8px 18px rgba(42, 171, 238, .34), inset 0 1px rgba(255,255,255,.32); font-size: 19px; font-weight: 900; }
.jump-to-latest:hover { background: var(--primary-dark); transform: translateY(-2px); }
.unread-divider { display: flex; justify-content: center; margin: 10px 0 4px; color: #6552bd; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.unread-divider::before, .unread-divider::after { display: none; content: none; }
.unread-divider span { padding: 4px 10px; border: 1px solid rgba(101, 82, 189, .2); border-radius: 999px; background: rgba(119, 102, 204, .12); white-space: nowrap; }
.composer-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.composer-context { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 11px; border-left: 3px solid var(--primary); border-radius: 14px; background: rgba(var(--primary-rgb), .1); color: var(--text); }
.composer-context button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .14); color: var(--primary-dark); font-weight: 900; }
.composer-context b { font-size: 12px; }
.composer-context span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment { display: flex; grid-column: 1 / -1; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid rgba(var(--primary-rgb), .22); border-radius: 14px; background: rgba(var(--primary-rgb), .08); }
.composer-attachment b { min-width: 0; flex: 1; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .14); color: var(--primary-dark); font-size: 17px; }
.composer-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #52616d;
}
.composer-icon:hover { background: rgba(42, 171, 238, 0.13); color: var(--primary-dark); }
.composer-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.attach-button { cursor: pointer; }
.composer textarea { min-height: 52px; max-height: 120px; border: 0; border-radius: 25px; padding: 14px 17px; box-shadow: 0 2px 8px rgba(45, 77, 110, .08); }
.emoji-panel, .reaction-picker { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.emoji-panel { grid-column: 2 / -1; }
.emoji-panel, .reaction-picker { max-height: 240px; overflow-y: auto; }
.emoji-panel button, .reaction-picker button { border: 0; border-radius: 10px; padding: 6px 8px; background: rgba(42, 171, 238, 0.1); font-size: 18px; }
.emoji-panel__tabs { display: flex; width: 100%; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.emoji-panel .emoji-panel__tab { padding: 5px 9px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; }
.emoji-panel .emoji-panel__tab.active { background: var(--primary); color: #fff; }
.emoji-panel__content { display: flex; flex-wrap: wrap; width: 100%; gap: 5px; }
.emoji-panel__empty { width: 100%; margin: 5px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.reaction-picker { margin-top: 7px; }
.reaction-picker__head { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0 2px 3px; color: var(--text); font-size: 12px; }
.reaction-picker__close { width: 26px; height: 26px; padding: 0 !important; border-radius: 50% !important; color: var(--muted); font-size: 20px !important; line-height: 1; }
.reaction-picker__emojis { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.reacts {
  display: flex;
  width: fit-content;
  max-width: min(650px, 100%);
  flex-flow: row wrap;
  align-self: flex-start;
  gap: 5px;
  margin-top: 6px;
}
.reacts button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 4px 8px; background: rgba(42, 171, 238, 0.12); white-space: nowrap; }
.message-reaction-burst { position: fixed; z-index: 110; font-size: 42px; filter: drop-shadow(0 8px 14px rgba(18, 65, 98, .28)); pointer-events: none; animation: message-reaction-pop .72s cubic-bezier(.2, .8, .3, 1) forwards; }
.message__reply { display: grid; width: 100%; gap: 2px; margin-bottom: 6px; padding: 6px 8px; border: 0; border-left: 3px solid var(--primary); border-radius: 10px; background: rgba(var(--primary-rgb), .1); color: var(--text); text-align: left; }
.message__reply b, .message__reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message__reply b { font-size: 12px; }
.message__reply span { color: var(--muted); font-size: 12px; }
.message__edited { display: inline-block; margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.message-menu-overlay { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 20, 34, .58); }
.message-menu { width: min(390px, 100%); max-height: min(680px, 90vh); overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.message-menu header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 18px 12px; border-bottom: 1px solid var(--line); }
.message-menu header b, .message-menu header small { display: block; }
.message-menu header small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.message-menu header button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 21px; }
.message-menu__preview { display: -webkit-box; margin: 12px 18px 4px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.message-menu__actions { display: grid; padding: 8px; }
.message-menu__actions > button { display: flex; gap: 10px; align-items: center; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 750; text-align: left; }
.message-menu__actions > button:hover, .message-menu__actions > button:focus-visible { background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); }
.message-menu__actions > button.danger { color: var(--danger); }
.message-menu__icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; }
.message-menu__nested { display: grid; gap: 2px; margin: 0 4px 4px; padding: 5px; border-radius: 12px; background: rgba(var(--primary-rgb), .08); }
.message-menu__nested button { padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 750; text-align: left; }
.message-menu__nested button:hover, .message-menu__nested button:focus-visible { background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); }
.message-menu__nested button.danger { color: var(--danger); }
.message-menu__reactions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.message-menu__reactions button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(var(--primary-rgb), .1); font-size: 20px; }
.message-menu__reactions button:hover, .message-menu__reactions button:focus-visible { background: rgba(var(--primary-rgb), .2); transform: scale(1.07); }
.member-manager-overlay { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 20, 34, .58); }
.story-share-overlay { z-index: 110; }
.member-manager { width: min(480px, 100%); max-height: min(620px, 90vh); display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.member-manager header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.member-manager header b, .member-manager header small { display: block; }
.member-manager header small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.member-manager__close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 22px; line-height: 1; }
.member-manager__list { display: grid; gap: 8px; min-height: 90px; overflow: auto; }
.member-manager__list > .muted { margin: auto; }
.member-manager__user { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--text); text-align: left; }
.secret-chat-creator { overflow-y: auto; }
.secret-chat-creator .form { display: grid; gap: 12px; }
.secret-chat-members { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; }
.secret-chat-members legend { padding: 0 5px; font-weight: 800; }
.secret-chat-members > div { display: grid; gap: 7px; max-height: 210px; overflow: auto; }
.secret-chat-member { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 10px; align-items: center; min-height: 56px; padding: 8px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; }
.secret-chat-member:hover { background: rgba(var(--primary-rgb), .06); }
.secret-chat-member:has(input:checked) { border-color: rgba(var(--primary-rgb), .4); background: rgba(var(--primary-rgb), .1); }
.secret-chat-member input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.secret-chat-member .avatar { width: 38px; height: 38px; font-size: 13px; }
.secret-chat-member span { display: grid; min-width: 0; }
.secret-chat-member b, .secret-chat-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secret-chat-member i { display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--line); border-radius: 50%; transition: .18s ease; }
.secret-chat-member input:checked + .avatar + span + i { border-color: var(--primary); background: var(--primary); }
.secret-chat-member input:checked + .avatar + span + i::after { width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; content: ""; transform: rotate(-45deg) translateY(-1px); }
.secret-chat-members small { color: var(--muted); }
.search-secret-results { display: grid; gap: 8px; margin-top: 10px; }
.secret-chat-search-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.secret-chat-search-form .button { min-height: 42px; }
.secret-chat-search-results { min-height: 0; }
.secret-chat-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.secret-chat-divider::before, .secret-chat-divider::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.member-manager__user:hover { border-color: rgba(var(--primary-rgb), .38); background: rgba(var(--primary-rgb), .05); }
.member-manager__user .avatar { width: 38px; height: 38px; font-size: 13px; }
.member-manager__user span { min-width: 0; flex: 1; }
.member-manager__user b, .member-manager__user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-manager__user small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.member-manager__user em { color: var(--primary-dark); font-size: 12px; font-style: normal; font-weight: 800; }
.group-card-overlay { position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 20, 34, .58); }
.group-card { width: min(660px, 100%); max-height: min(800px, 92vh); overflow: auto; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
.group-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); }
.group-card__identity { display: flex; min-width: 0; gap: 13px; align-items: center; }
.group-card__avatar { display: grid; width: 60px; height: 60px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; font-weight: 800; object-fit: cover; }
.group-card__identity b, .group-card__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-card__identity b { font-size: 18px; }
.group-card__identity small, .group-card__section-head small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.group-card__header > button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font-size: 22px; }
.group-card__form, .group-card__section { display: grid; gap: 11px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.group-card__form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.group-card__form textarea { min-height: 74px; resize: vertical; }
.group-card__form-actions, .group-card__section-head { display: flex; gap: 9px; align-items: center; justify-content: space-between; }
.group-card__header > button:hover, .group-card__header > button:focus-visible { background: rgba(var(--primary-rgb), .18); transform: rotate(90deg); }
.group-card .button.small { min-height: 34px; padding: 7px 11px; border: 1px solid rgba(var(--primary-rgb), .24); border-radius: 11px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .13), rgba(126, 219, 145, .14)); color: var(--primary-dark); font-size: 12px; font-weight: 800; box-shadow: inset 0 1px rgba(255,255,255,.45); }
.group-card .button.small:hover, .group-card .button.small:focus-visible { border-color: rgba(var(--primary-rgb), .46); background: linear-gradient(135deg, rgba(var(--primary-rgb), .22), rgba(126, 219, 145, .22)); transform: translateY(-1px); }
.group-card .button.danger { border-color: rgba(222, 77, 88, .3); background: linear-gradient(135deg, #ef6370, #dd4858); color: #fff; box-shadow: 0 8px 18px rgba(209, 57, 76, .2); }
.group-card__section-head > div { min-width: 0; }
.group-card__section-head b, .group-card__section-head small { display: block; }
.group-card__members { display: grid; gap: 7px; }
.group-card__member { display: flex; min-width: 0; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 16px; }
.group-card__member-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; text-align: center; object-fit: cover; }
.group-card__member-info { display: grid; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; }
.group-card__member-info b, .group-card__member-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-card__member-info small { color: var(--muted); font-size: 12px; }
.group-card__member-info:hover b { color: var(--primary-dark); text-decoration: underline; }
.group-card__role { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; }
.group-card__role--owner { color: #c57600; }
.group-card__role--admin { color: var(--primary-dark); }
.group-card__role--author { color: var(--primary-dark); }
.group-card__member-action { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 9px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); font: inherit; font-size: 11px; font-weight: 800; }
.group-card__section--tools { background: linear-gradient(125deg, rgba(var(--primary-rgb), .075), rgba(126, 219, 145, .07)); }
.group-card__section--media { background: rgba(var(--primary-rgb), .035); }
.group-card__section--subscriber-count { padding-block: 20px; background: linear-gradient(125deg, rgba(var(--primary-rgb), .08), rgba(126, 219, 145, .08)); }
.group-card__section--subscriber-count strong { display: grid; min-width: 58px; min-height: 44px; place-items: center; padding: 4px 10px; border: 1px solid rgba(var(--primary-rgb), .2); border-radius: 14px; background: var(--card); color: var(--primary-dark); font-size: 20px; line-height: 1; }
.channel-settings { display: grid; gap: 8px; }
.channel-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 62px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--primary-rgb), .045); color: var(--text); }
.channel-setting span { min-width: 0; }
.channel-setting b, .channel-setting small { display: block; }
.channel-setting b { font-size: 13px; }
.channel-setting small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.35; }
.channel-setting input { width: 19px; height: 19px; margin: 0; accent-color: var(--primary); }
.channel-settings__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 3px; }
.telegram-link-status { margin: 0; padding: 9px 11px; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: 12px; background: rgba(var(--primary-rgb), .06); color: var(--muted); font-size: 12px; line-height: 1.4; }
.rss-sources { display: grid; gap: 9px; margin: 4px 0 0; }
.rss-sources .panel-title { margin: 0; }
.rss-source-list { display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.rss-source { display: flex; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(var(--primary-rgb), .045); }
.rss-source > div { min-width: 0; flex: 1; }
.rss-source b, .rss-source small, .rss-source em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rss-source b { font-size: 13px; }
.rss-source small, .rss-source em { margin-top: 3px; color: var(--muted); font-size: 11px; font-style: normal; }
.rss-source__error { color: var(--danger) !important; }
.rss-source .button { flex: 0 0 auto; }
.channel-appearance-dialog { width: min(760px, 100%); }
.channel-appearance-dialog .wallpaper-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.channel-appearance-dialog .wallpaper-picker legend { margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: 800; }
.channel-appearance-dialog .wallpaper-grid { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.channel-appearance-dialog .wallpaper-preview.chat-background-custom { background-image: var(--channel-custom-preview, none); }
.invite-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--primary-rgb), .05); }
.invite-link code { min-width: 0; overflow: hidden; color: var(--primary-dark); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.document-link, .message-document { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid rgba(var(--primary-rgb), .2); border-radius: 13px; background: rgba(var(--primary-rgb), .07); color: var(--text); text-decoration: none; }
.document-link { font-size: 13px; font-weight: 750; }
.message-document { max-width: 320px; }
.message-document span { font-size: 22px; }
.message-document b { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.message-document small { margin-left: auto; color: var(--primary-dark); font-size: 11px; font-weight: 800; }
.channel-comments { display: flex; justify-content: flex-end; margin-top: 7px; }
.channel-comments button { display: grid; width: 58px; height: 58px; place-items: center; padding: 0; border: 2px solid rgba(55, 182, 255, .54); border-radius: 50%; background: rgba(9, 40, 93, .22); color: #42beff; box-shadow: 0 0 18px rgba(44, 170, 245, .2), inset 0 0 14px rgba(44, 170, 245, .1); font: inherit; font-size: 14px; font-weight: 850; line-height: 1; }
.channel-comments button:hover, .channel-comments button:focus-visible { border-color: #65caff; background: rgba(24, 122, 192, .38); color: #fff; box-shadow: 0 0 23px rgba(44, 170, 245, .45), inset 0 0 14px rgba(44, 170, 245, .18); }
.channel-comments button svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.channel-comments button span { font-size: 11px; line-height: 1; }
.admin-select-search { width: 100%; margin: 0 0 7px; }
.channel-comment-list { display: grid; gap: 9px; max-height: 260px; overflow: auto; }
.channel-comment-list article { padding: 10px 12px; border-radius: 13px; background: rgba(var(--primary-rgb), .07); }
.channel-comment-list article b, .channel-comment-list article small { font-size: 12px; }
.channel-comment-list article small { color: var(--muted); }
.channel-comment-list article p { margin: 4px 0; white-space: pre-wrap; }
.channel-comment__author { display: flex; min-width: 0; gap: 7px; align-items: center; }
.channel-comment__avatar { width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; font-size: 10px; }
.channel-comment__automated { padding: 2px 6px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: 10px; font-weight: 800; }
.channel-comment-photo { display: block; width: min(100%, 260px); margin-top: 7px; padding: 0; overflow: hidden; border: 0; border-radius: 11px; background: transparent; }
.channel-comment-photo img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.channel-comment-join { padding: 8px 0 0; }
.channel-comment-join .button { margin-top: 4px; }
.admin-automated-commenters { display: grid; gap: 7px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.admin-automated-commenters legend { padding: 0 4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.admin-automated-commenters label { display: flex; gap: 7px; align-items: center; color: var(--text); font-size: 13px; }
.admin-automated-commenters input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.group-card__member-action.danger { background: rgba(222, 77, 88, .1); color: var(--danger); }
.group-card__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.group-card__photos button, .group-card__circles button { position: relative; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #1b2a40; }
.group-card__photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.group-card__media-list, .group-card__circles { display: grid; gap: 8px; }
.group-card__media-list > b, .group-card__circles > b { font-size: 13px; }
.group-card__media-list audio { width: 100%; }
.group-card__circles > div { display: flex; gap: 8px; overflow: auto; }
.group-card__circles button { width: 92px; height: 92px; flex: 0 0 auto; border-radius: 50%; }
.group-card__circles video { display: block; width: 100%; height: 100%; object-fit: cover; }
.group-card__circles span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 23px; text-shadow: 0 2px 8px #000; }
.group-card__footer { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 16px 20px; background: rgba(var(--primary-rgb), .025); }
.group-card__footer--channel { justify-content: space-between; border-top: 1px solid var(--line); background: rgba(var(--primary-rgb), .055); }
.group-card__buy-stars { display: inline-flex; align-items: center; gap: 7px; }
.group-card__buy-stars svg { width: 17px; height: 17px; fill: #fff0a6; stroke: rgba(99, 70, 0, .28); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(99, 70, 0, .28)); }
.channel-purchase-note { display: grid; gap: 4px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid rgba(var(--primary-rgb), .19); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 211, 86, .18), rgba(var(--primary-rgb), .08)); color: var(--text); }
.channel-purchase-note b { font-size: 13px; }
.channel-purchase-note span { color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.4; }
.channel-purchase-list { display: grid; gap: 7px; margin-top: 10px; }
.channel-purchase-list article { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 12px; background: rgba(var(--primary-rgb), .06); }
.channel-purchase-list span, .channel-purchase-list strong { display: grid; gap: 2px; min-width: 0; }
.channel-purchase-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.channel-purchase-list small { color: var(--muted); font-size: 11px; font-weight: 650; }
.channel-purchase-list strong { flex: 0 0 auto; color: var(--primary-dark); font-size: 13px; text-align: right; }
.chat-head--group { cursor: pointer; }
.chat-head--group:hover { background: rgba(var(--primary-rgb), .035); }
.recording-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 20, 34, .58); }
.recording-card { width: min(420px, 100%); padding: 22px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.recording-circle-card video { display: block; width: min(250px, 80vw); height: min(250px, 80vw); margin: 0 auto 16px; border-radius: 50%; background: #142036; object-fit: cover; }
.recording-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; }
.recording-status b { min-width: 42px; }
.recording-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4f5f; box-shadow: 0 0 0 3px rgba(239, 79, 95, .16); }
.voice-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 62px; margin: 18px 0 8px; }
.voice-wave i { display: block; width: 4px; height: 6px; border-radius: 999px; background: var(--primary); transition: height .08s linear; }
.recording-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel-title > div { min-width: 0; }
.panel-title small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 10px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-score { font-size: 28px; font-weight: 900; }
.positive { color: #20a45a; }
.negative { color: var(--danger); }
.review-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 12px 0; }
.review-suggestions-title { margin: 16px 0 -4px; color: var(--muted); font-size: 12px; font-weight: 800; }
.review-source-list, .review-feed { display: grid; gap: 10px; margin-top: 14px; }
.review-source { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); color: var(--text); text-align: left; }
.review-source:hover { border-color: rgba(var(--primary-rgb), .45); transform: translateY(-1px); }
.review-source b, .review-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-source small { margin-top: 4px; color: var(--muted); }
.review-source__counts { display: flex; flex: 0 0 auto; gap: 8px; font-weight: 900; }
.review-page__url { overflow-wrap: anywhere; font-weight: 800; }
.review-source-type { display: inline-block; margin-left: 7px; padding: 3px 6px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: 10px; font-weight: 800; vertical-align: middle; }
.review-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.review-summary > div { display: grid; gap: 3px; padding: 10px; border-radius: 14px; background: rgba(var(--primary-rgb), .08); text-align: center; }
.review-summary b { font-size: 22px; }
.review-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.review-related { display: grid; gap: 8px; margin-top: 16px; }
.review-related > div, .review-item__links { display: flex; flex-wrap: wrap; gap: 6px; }
.review-related button, .review-item__links button { max-width: 100%; padding: 6px 9px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font: inherit; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.review-empty { margin-top: 14px; text-align: center; }
.review-form { margin-top: 14px; }
.review-form__hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.review-item { display: grid; gap: 10px; margin: 0; }
.review-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-item__head small { color: var(--muted); font-size: 11px; }
.review-item__rating { padding: 5px 8px; border-radius: 999px; background: rgba(var(--primary-rgb), .08); font-size: 11px; font-weight: 800; }
.review-item__source { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.review-item__city { color: var(--muted); font-size: 12px; }
.review-media { width: fit-content; max-width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #142036; }
.review-media img, .review-video { display: block; max-width: min(360px, 100%); max-height: 360px; border-radius: 14px; object-fit: contain; background: #142036; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 200; max-width: 420px; padding: 13px 16px; border-radius: 16px; background: #17212b; color: white; box-shadow: var(--shadow); }
.toast.error { background: var(--danger); }
.toast--action { display: flex; gap: 12px; align-items: center; }
.toast__text { min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.toast__action { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.58); border-radius: 10px; background: rgba(255,255,255,.16); color: inherit; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }
.toast__action:hover, .toast__action:focus-visible { background: rgba(255,255,255,.28); }
.incoming-call, .call-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(10, 20, 31, 0.52); }
.incoming-call > div, .call-window { width: min(460px, 100%); padding: 24px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.incoming-call p { color: var(--muted); }
.call-window { width: min(760px, 100%); }
.incoming-call__actions, .call-window__head, .call-window__view-actions, .call-control { display: flex; align-items: center; gap: 8px; }
.incoming-call__actions { justify-content: center; margin-top: 18px; }
.call-window__head { justify-content: space-between; gap: 16px; text-align: left; }
.call-window__head h2, .call-window__head p { margin: 0; }
.call-window__head p { margin-top: 4px; color: var(--muted); }
.call-window__view-actions { flex-wrap: wrap; justify-content: flex-end; }
.call-control { justify-content: center; }
.call-control__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.call-action--accept { border-color: #22b967; background: #27c56d; color: #fff; box-shadow: 0 8px 18px rgba(26, 177, 91, .3); }
.call-action--accept:hover, .call-action--accept:focus-visible { background: #18ae59; box-shadow: 0 10px 22px rgba(26, 177, 91, .4); }
.call-videos { position: relative; display: grid; min-height: 340px; margin: 18px 0; overflow: hidden; border-radius: 26px; background: radial-gradient(circle at 20% 18%, rgba(91, 195, 238, .2), transparent 34%), #08131f; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(5, 18, 31, .2); }
.call-videos video { width: 100%; height: 100%; min-height: 130px; border: 2px solid rgba(255,255,255,.12); border-radius: 22px; background: #07111d; object-fit: contain; transform: scaleX(-1); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.call-videos__remote { min-height: 340px; padding: 8px; }
.call-videos__local { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: min(32%, 190px) !important; height: min(34%, 150px) !important; min-height: 104px !important; padding: 5px; border-radius: 20px !important; background: rgba(6, 17, 29, .92) !important; box-shadow: 0 14px 32px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.14); }
.call-videos__remote.is-speaking-remote, .call-videos__local.is-speaking-local { border-color: rgba(111, 211, 232, .46); box-shadow: 0 0 0 1px rgba(92, 225, 255, .08), 0 0 10px rgba(72, 206, 255, .1); }
.call-videos.audio-only video { display: none; }
.call-videos.audio-only::after { content: "☎"; display: grid; min-height: 240px; place-items: center; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; font-size: 84px; }
.call-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.call-overlay.is-fullscreen { z-index: 120; padding: 0; background-color: #06111d; }
.call-overlay.is-fullscreen .call-window { display: flex; width: 100vw; height: 100vh; max-width: none; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: rgba(5, 15, 26, .72); color: #fff; }
.call-overlay.is-fullscreen .call-window__head p { color: rgba(255,255,255,.72); }
.call-overlay.is-fullscreen .call-videos { min-height: 0; flex: 1; margin: 16px 0; border-radius: 28px; }
.call-overlay.is-fullscreen .call-videos__remote { min-height: 0; border-radius: 28px; object-fit: cover; }
.call-overlay.is-fullscreen .call-videos__local { right: 22px; bottom: 22px; width: min(28vw, 320px) !important; height: min(25vh, 220px) !important; }
.call-overlay.is-fullscreen .call-videos.audio-only::after { min-height: 0; }
.call-overlay.is-minimized { z-index: 19; place-items: end; padding: 14px; background: transparent; pointer-events: none; }
.call-overlay.is-minimized .call-window { width: min(360px, calc(100vw - 28px)); padding: 12px; border-radius: 18px; box-shadow: 0 12px 28px rgba(17, 38, 58, .28); pointer-events: auto; }
.call-overlay.is-minimized .call-window__head { align-items: center; }
.call-overlay.is-minimized .call-window__head h2 { max-width: 165px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.call-overlay.is-minimized .call-window__head p { font-size: 12px; }
.call-overlay.is-minimized .call-videos, .call-overlay.is-minimized [data-toggle-call-fullscreen], .call-overlay.is-minimized .call-actions > :not([data-end-call]) { display: none; }
.call-overlay.is-minimized .call-actions { position: absolute; right: 12px; bottom: 12px; }
.call-overlay.is-minimized .call-actions [data-end-call] { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.call-overlay.is-minimized .call-actions [data-end-call] span { display: none; }

/* The minimized call is a small widget; the rest of the application remains usable. */
.call-overlay.is-minimized .call-window { cursor: pointer; }
.call-overlay.is-minimized .call-window__view-actions { margin-left: auto; }
.profile-screen { min-height: 100vh; background: var(--bg); }
.profile-screen__head { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 12px max(16px, calc((100vw - 1000px) / 2)); border-bottom: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(16px); text-align: center; }
.back-button, .media-overlay__close { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(42, 171, 238, .12); color: var(--primary-dark); font-size: 26px; line-height: 1; }
.profile-screen__content { width: min(860px, calc(100% - 28px)); margin: 28px auto 60px; }
.profile-hero { display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 28px; background: linear-gradient(135deg, rgba(42, 171, 238, .18), rgba(126, 219, 145, .16)); }
.profile-hero h1 { font-size: clamp(24px, 4vw, 38px); }
.profile-avatar { width: 118px !important; height: 118px !important; font-size: 36px !important; border: 4px solid var(--card); box-shadow: 0 10px 28px rgba(31, 66, 99, .16); }
.profile-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.profile-publications { display: grid; gap: 14px; margin-top: 14px; }
.profile-publications .card { margin: 0; }
.level-card h2 { margin-top: 8px; }
.level-card ul, .card ul { padding-left: 20px; line-height: 1.7; }
.level-current-limits .muted { margin: 8px 0 12px; }
.level-next-reward { display: grid; gap: 3px; margin: 12px 0; padding: 10px 12px; border-radius: 13px; background: rgba(var(--primary-rgb), .09); color: var(--primary-dark); font-size: 13px; }
.level-next-reward span { font-weight: 800; }
.level-limits__toggle { margin-top: 10px; }
.level-limits { margin-top: 9px; padding: 8px 11px; border: 1px solid rgba(var(--primary-rgb), .14); border-radius: 13px; background: rgba(var(--primary-rgb), .045); }
.level-limits[hidden] { display: none; }
.level-limits__list { margin: 0; }
.media-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(5, 12, 20, .92); }
.media-overlay img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.media-overlay__close { position: fixed; top: 18px; right: 18px; background: rgba(255,255,255,.16); color: white; }
.media-overlay__nav { position: fixed; z-index: 1; top: 50%; width: 48px; height: 64px; padding: 0; border: 0; border-radius: 14px; background: rgba(255,255,255,.16); color: white; font-size: 52px; line-height: .8; transform: translateY(-50%); }
.media-overlay__nav--previous { left: 18px; }
.media-overlay__nav--next { right: 18px; }
.media-overlay__counter { position: fixed; bottom: 20px; left: 50%; padding: 7px 11px; border-radius: 999px; background: rgba(0,0,0,.42); color: white; font-size: 13px; font-weight: 700; transform: translateX(-50%); }
.circle-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 12, 20, .94); }
.circle-viewer { width: min(760px, 100%); }
.circle-viewer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: white; font-weight: 800; }
.circle-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: white; font-weight: 800; }
.circle-back:hover, .circle-back:focus-visible { background: rgba(255,255,255,.26); }
.circle-viewer video { display: block; width: min(78vmin, 620px); height: min(78vmin, 620px); margin: 0 auto; border-radius: 50%; background: #050c14; object-fit: cover; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.circle-viewer__player { display: flex; width: min(78vmin, 620px); box-sizing: border-box; gap: 7px; align-items: center; margin: 8px auto 0; padding: 4px 8px; border: 1px solid rgba(181, 229, 248, .16); border-radius: 999px; background: rgba(12, 45, 67, .58); backdrop-filter: blur(8px); }
.circle-viewer.is-playing .circle-viewer__player { margin-top: 5px; padding-block: 3px; }
.circle-viewer__player button { display: grid; width: 28px; height: 22px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(77, 190, 222, .7); color: #fff; font-size: 10px; font-weight: 900; }
.circle-viewer__player input { width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; height: 3px; border: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(101, 220, 244, .72) 0 var(--circle-progress, 0%), rgba(207, 243, 252, .34) var(--circle-progress, 0%) 100%); cursor: pointer; }
.circle-viewer__player input::-webkit-slider-thumb { width: 4px; height: 4px; border: 0; border-radius: 50%; -webkit-appearance: none; appearance: none; background: #b5f4ff; }
.circle-viewer__player input::-moz-range-progress { height: 3px; border-radius: 999px; background: rgba(101, 220, 244, .72); }
.circle-viewer__player input::-moz-range-track { height: 3px; border: 0; border-radius: 999px; background: rgba(207, 243, 252, .34); }
.circle-viewer__player input::-moz-range-thumb { width: 4px; height: 4px; border: 0; border-radius: 50%; background: #b5f4ff; }
.story-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 12, 20, .92); }
.story-viewer { position: relative; width: min(430px, 100%); max-height: 94vh; overflow: auto; border-radius: 22px; background: var(--card); color: var(--text); }
.story-viewer > img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #111; }
.story-viewer > p { margin: 0; padding: 12px 16px; }
.story-viewer .media-overlay__close { position: absolute; z-index: 1; top: 10px; right: 10px; }
.story-viewer__nav { position: absolute; z-index: 1; top: min(31vh, 50%); width: 36px; height: 52px; padding: 0; border: 0; border-radius: 12px; background: rgba(0,0,0,.42); color: white; font-size: 40px; line-height: .8; }
.story-viewer__nav--previous { left: 10px; }
.story-viewer__nav--next { right: 10px; }
.story-viewer__counter { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.42); color: white; font-size: 12px; font-weight: 700; }
.story-reaction-panel { padding: 12px; border-top: 1px solid var(--line); background: linear-gradient(135deg, rgba(42, 171, 238, .08), rgba(126, 219, 145, .07)); }
.story-reactions { display: flex; justify-content: space-between; gap: 6px; padding: 0; }
.story-reactions button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: rgba(255,255,255,.56); box-shadow: 0 4px 12px rgba(28, 71, 103, .08); font-size: 21px; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.story-reactions button:hover, .story-reactions button.active { border-color: rgba(var(--primary-rgb), .28); background: rgba(255,255,255,.9); transform: translateY(-3px) scale(1.08); }
.story-send-reaction { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin-top: 10px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--primary); color: white; font-weight: 800; transition: opacity .18s ease, transform .18s ease; }
.story-send-reaction svg { width: 17px; height: 17px; }
.story-send-reaction:not(:disabled):hover { transform: translateY(-1px); }
.story-send-reaction:disabled { opacity: .46; cursor: default; }
.story-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 12px 12px; }
.story-reply input { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--bg); color: var(--text); }
.story-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.story-reaction-burst { position: fixed; z-index: 120; font-size: 64px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.3)); pointer-events: none; animation: story-reaction-pop .82s ease-out forwards; }
.story-hide-author { display: grid; width: 34px; height: 34px; place-items: center; margin: 0 12px 12px auto; padding: 0; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 50%; background: rgba(var(--primary-rgb), .08); color: var(--primary-dark); font-size: 15px; }
.story-insights { padding: 14px; border-top: 1px solid var(--line); }
.story-insights .row { margin: 8px 0 0; }
.story-insights small { display: block; color: var(--muted); }
.story-viewer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.story-privacy-card { display: grid; gap: 12px; }
.story-privacy-results, .story-privacy-lists { display: grid; gap: 10px; }
.story-privacy-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-privacy-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(var(--primary-rgb), .05); }
.story-privacy-result small, .story-privacy-lists small { display: block; color: var(--muted); }
.story-editor-overlay { position: fixed; z-index: 105; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5, 12, 20, .78); backdrop-filter: blur(8px); }
.story-editor { width: min(900px, 100%); max-height: 94vh; overflow: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: var(--card); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.story-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.story-editor > header div { display: grid; gap: 3px; }
.story-editor > header small { color: var(--muted); font-size: 12px; }
.story-editor__canvas { position: relative; width: min(100%, 510px); aspect-ratio: 1 / 1.25; margin: 16px auto; overflow: hidden; border-radius: 18px; background: #17212b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(17, 42, 64, .18); touch-action: none; }
.story-editor__canvas > img[data-story-primary] { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-editor__sticker { position: absolute; z-index: 2; width: 34%; max-height: 70%; object-fit: contain; transform: translate(-50%, -50%); border: 4px solid white; box-shadow: 0 8px 20px rgba(0,0,0,.34); cursor: grab; touch-action: none; user-select: none; }
.story-editor__sticker:active { cursor: grabbing; }
.story-editor__text { position: absolute; z-index: 3; width: min(86%, 440px); color: #fff; font-size: 36px; font-weight: 800; line-height: 1.12; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.64); overflow-wrap: anywhere; transform: translate(-50%, -50%); cursor: grab; touch-action: none; user-select: none; }
.story-editor__text[data-font="serif"] { font-family: Georgia, serif; }
.story-editor__text[data-font="mono"] { font-family: Menlo, Monaco, monospace; }
.story-editor__text[data-font="script"] { font-family: cursive; font-size: clamp(26px, 7vw, 42px); }
.story-editor__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.story-editor__controls label:last-of-type { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.story-editor__controls input[type="color"] { width: 48px; height: 42px; padding: 4px; }
.story-editor__controls button { grid-column: 1 / -1; }

@keyframes story-reaction-pop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.55) rotate(-10deg); }
  45% { opacity: 1; transform: translate(-50%, -8px) scale(1.18) rotate(5deg); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(.86) rotate(0); }
}

@keyframes message-reaction-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.45) rotate(-12deg); }
  42% { opacity: 1; transform: translate(-50%, -18px) scale(1.35) rotate(8deg); }
  100% { opacity: 0; transform: translate(-50%, -66px) scale(.82) rotate(0); }
}

.admin-shell { width: min(1280px, calc(100vw - 24px)); margin: 12px auto; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.admin-sections { display: flex; gap: 8px; margin-bottom: 12px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.admin-sections__button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 750; }
.admin-sections__button:hover, .admin-sections__button:focus-visible { background: rgba(var(--primary-rgb), .09); color: var(--primary-dark); }
.admin-sections__button.active { border-color: rgba(var(--primary-rgb), .28); background: rgba(var(--primary-rgb), .14); color: var(--primary-dark); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-card { border: 1px solid var(--line); border-radius: 22px; padding: 16px; background: var(--panel); }
.admin-card--levels { grid-column: 1 / -1; }
.admin-card--legal { grid-column: 1 / -1; }
.admin-legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.star-package-editor { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(var(--primary-rgb), .035); }
.star-package-editor__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.star-package-editor__head h3 { margin: 0; }
.star-package-editor__head .muted { max-width: 760px; margin: 5px 0 0; font-size: 12px; }
.star-package-editor__head .button { flex: 0 0 auto; }
.star-package-editor__list { display: grid; gap: 8px; }
.star-package-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.star-package-row label { gap: 5px; font-size: 12px; font-weight: 750; }
.star-package-discount { margin: 8px 0; color: var(--primary-dark); font-weight: 800; }
.star-packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.star-package {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 68px !important;
  align-content: center;
  gap: 4px;
  padding: 10px 12px !important;
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  touch-action: manipulation;
}
.star-package__stars { display: block; font-size: 15px; line-height: 1.15; }
.star-package__price { display: flex; min-width: 0; gap: 5px; align-items: baseline; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.star-package__price strong { color: inherit; font-size: 14px; }
.star-packages s { color: var(--muted); font-weight: 600; }
.consent { display: flex; gap: 9px; align-items: flex-start; color: var(--text); font-size: 13px; line-height: 1.4; }
.consent input { width: auto; margin-top: 3px; }
.consent a, .legal-page a { color: var(--primary-dark); font-weight: 750; }
.admin-levels__header, .admin-level-card__head, .admin-level-card__actions { display: flex; gap: 10px; }
.admin-levels__header, .admin-level-card__head { align-items: flex-start; justify-content: space-between; }
.admin-levels__header h2, .admin-level-card__head b, .admin-level-card__section h3 { margin: 0; }
.admin-levels__header .button { flex: 0 0 auto; }
.admin-levels__list { display: grid; gap: 12px; }
.admin-level-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(var(--primary-rgb), .035); }
.admin-level-card__head b { display: block; margin-top: 7px; }
.admin-level-card__actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-level-card__fields, .admin-level-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-level-card__section { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-level-card__section h3 { font-size: 14px; }
.admin-level-card__section .muted { margin: -3px 0 0; font-size: 12px; }
.admin-level-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.admin-list { max-height: 300px; overflow: auto; }
.activity-reward { display: grid; gap: 12px; }
.activity-reward--available { border-color: rgba(42, 171, 238, .45) !important; box-shadow: 0 12px 28px rgba(42, 171, 238, .14) !important; }
.activity-reward--claimed { opacity: .78; }
.activity-rewards-completed-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 4px 11px; padding-top: 17px; border-top: 1px solid var(--line); }
.activity-rewards-completed-title span { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: 11px; font-weight: 800; text-align: center; }
.activity-reward__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.activity-reward__head h3 { margin: 0; }
.activity-reward__head p { margin: 5px 0 0; }
.activity-reward__head .badge { flex: 0 0 auto; }
.activity-reward__label { font-size: 13px; }
.activity-reward__criteria { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.activity-reward__criteria li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 11px; background: rgba(var(--primary-rgb), .08); font-size: 12px; }
.activity-reward__criteria b { flex: 0 0 auto; color: var(--primary-dark); }
.activity-reward .button { justify-self: start; }
.activity-reward-form__criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activity-reward-form__criteria label { gap: 4px; font-size: 12px; }
.admin-activity-reward { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-activity-reward:last-child { border-bottom: 0; }
.admin-activity-reward p { margin: 4px 0; }
.admin-report { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.admin-report:last-child { border-bottom: 0; }
.admin-report small { display: block; margin-top: 3px; color: var(--muted); }
.admin-report p { margin: 7px 0 0; }
pre { white-space: pre-wrap; overflow: auto; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.08); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 310px minmax(0, 1fr); height: auto; min-height: 100vh; margin: 0; width: 100vw; border-radius: 0; }
  .rightbar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .admin-shell { width: min(100%, calc(100vw - 16px)); margin: 8px auto; }
  .admin-head { align-items: flex-start; padding: 14px; border-radius: 18px; }
  .admin-head h1 { font-size: 21px; }
  .admin-head .muted { margin-bottom: 0; font-size: 12px; }
  .admin-head .button { flex: 0 0 auto; }
  .admin-card { padding: 14px; border-radius: 18px; }
  .admin-sections { margin-inline: -1px; border-radius: 14px; scrollbar-width: thin; }
  .admin-sections__button { min-height: 42px; padding: 9px 11px; }
  .admin-activity-reward, .admin-report { flex-direction: column; }
  .admin-activity-reward .button, .admin-report .button { width: 100%; }
  .app-shell,
  .app-shell.without-rightbar {
    --sidebar-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar-resize-handle { display: none; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell .sidebar .chat-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .sidebar .chat-filters .chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html:has(.app-shell.chat-is-open), body:has(.app-shell.chat-is-open) { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app-shell.chat-is-open { position: fixed; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  .app-shell.chat-is-open .sidebar { display: none; }
  .app-shell.chat-is-open .chat-panel { height: 100%; min-height: 0; }
  .chat-back-button { display: grid; place-items: center; }
  .chat-mobile-menu-button { display: grid; place-items: center; }
  .app-shell.chat-is-open .chat-head > [data-close-chat] { display: none; }
  .chat-head { gap: 8px; padding: 10px 12px; }
  .chat-head .chat-identity { gap: 8px; }
  .chat-head .chat-profile-avatar .avatar, .chat-head > .avatar { width: 36px; height: 36px; font-size: 12px; }
  .chat-head__body strong { max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head__body span { display: none; }
  .chat-head .call-button:nth-last-of-type(n + 3) { display: none; }
  .two { grid-template-columns: 1fr; }
  .call-button { width: 40px; height: 40px; }
  .profile-editor { grid-template-columns: 1fr; }
  .profile-screen__content { margin-top: 16px; }
  .profile-hero { gap: 14px; padding: 16px; }
  .profile-avatar { width: 86px !important; height: 86px !important; font-size: 28px !important; }
  .jump-to-latest { right: 12px; bottom: 12px; }
  .message-selection-toolbar__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-reward-form__criteria { grid-template-columns: 1fr; }
  .admin-level-card__fields, .admin-level-card__grid, .admin-legal-grid, .star-package-row { grid-template-columns: 1fr; }
  .admin-levels__header, .admin-level-card__head, .star-package-editor__head { flex-direction: column; }
  .admin-level-card__actions { justify-content: flex-start; }
}
@media (hover: none) {
  .circle-expand { opacity: 1; }
}

/* Premium visual layer: keeps the existing component structure and user themes intact. */
:root {
  --panel: rgba(255, 255, 255, 0.78);
  --card: rgba(255, 255, 255, 0.86);
  --line: rgba(77, 103, 132, 0.18);
  --shadow: 0 28px 84px rgba(27, 56, 88, 0.18), 0 6px 20px rgba(27, 56, 88, 0.06);
  --shadow-soft: 0 12px 30px rgba(27, 56, 88, 0.1);
}

body.theme-dark {
  --panel: rgba(18, 29, 46, 0.82);
  --card: rgba(29, 42, 62, 0.88);
  --line: rgba(213, 226, 244, 0.14);
  --shadow: 0 30px 84px rgba(0, 0, 0, 0.34), 0 6px 20px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.22);
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(var(--primary-rgb), 0.31), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(126, 219, 145, 0.2), transparent 31%),
    radial-gradient(circle at 55% 110%, rgba(var(--primary-rgb), 0.12), transparent 42%),
    var(--bg);
  letter-spacing: 0.003em;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), 0.36);
  outline-offset: 2px;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(var(--primary-rgb), 0.7);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.13), 0 8px 18px rgba(var(--primary-rgb), 0.08);
}

.auth-card, .admin-login__card {
  border-color: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.16);
}

.logo, .avatar {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.24);
}

.logo::after, .avatar:not(img)::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 46%);
  pointer-events: none;
}

.button {
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  box-shadow: 0 5px 14px rgba(27, 56, 88, 0.06);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(27, 56, 88, 0.12);
}

.button.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.28), inset 0 1px rgba(255, 255, 255, 0.24);
}

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(1500px, calc(100vw - 32px));
  height: min(940px, calc(100vh - 32px));
  margin: 16px auto;
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 32px;
  background: rgba(248, 252, 255, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.08);
}

.app-shell::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 28%, rgba(var(--primary-rgb),.06));
  pointer-events: none;
}

body:not(.site-background-default) .app-shell {
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(248, 252, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.08);
}

body.theme-dark .app-shell, body.theme-dark:not(.site-background-default) .app-shell {
  background: rgba(17, 27, 43, 0.94);
  border-color: rgba(220, 233, 255, 0.2);
}

.sidebar, .rightbar, .chat-panel {
  --text: var(--dialog-panel-text);
  --muted: var(--dialog-panel-muted);
  --line: var(--dialog-panel-line);
  --card: var(--dialog-panel-card);
  --panel-divider: rgba(var(--primary-rgb), .46);
  --panel-divider-glow: rgba(var(--primary-rgb), .2);
  background: var(--dialog-panel-background);
}

.sidebar { position: relative; }

.sidebar, .rightbar { background: var(--dialog-panel-background); }

.sidebar, .rightbar {
  border-color: var(--panel-divider);
  box-shadow: 0 0 9px var(--panel-divider-glow), 0 0 24px rgba(var(--primary-rgb), .1);
}

.sidebar { border-right-width: 1px; }
.rightbar { border-left-width: 1px; }

.profile {
  padding: 12px;
  border-bottom-color: var(--panel-divider);
  box-shadow: 0 2px 9px -5px var(--panel-divider-glow);
}

.profile-trigger {
  padding: 9px;
  border-radius: 19px;
}

.profile-trigger:hover {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .13), rgba(126, 219, 145, .09));
}

.profile-menu-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(var(--primary-rgb), .22);
  border-radius: 10px;
  background: rgba(var(--primary-rgb), .09);
  color: var(--primary-dark);
  font-size: 15px;
  line-height: 1;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.profile-trigger[aria-expanded="true"] .profile-menu-arrow { transform: rotate(180deg); }

.nav {
  position: absolute;
  z-index: 30;
  top: 76px;
  right: 10px;
  left: 10px;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--panel-divider);
  border-radius: 18px;
  background: rgba(248, 252, 255, .985);
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 12px 28px rgba(27, 56, 88, .24), 0 0 18px var(--panel-divider-glow);
  backdrop-filter: none;
}

body.theme-dark .nav { background: #16243a; }

.nav button {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #17212b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px rgba(255,255,255,.45);
}

body.theme-dark .nav button {
  color: #f8fbff;
  text-shadow: 0 1px rgba(0,0,0,.28);
}

.nav-button__icon {
  width: 27px;
  height: 27px;
  border-radius: 9px;
}

.nav-button:hover, .nav-button:focus-visible {
  border-color: rgba(var(--primary-rgb), .16);
  background: rgba(var(--primary-rgb), .11);
  color: #0d4d73;
  box-shadow: 0 8px 17px rgba(var(--primary-rgb), .1);
}

body.theme-dark .nav-button:hover, body.theme-dark .nav-button:focus-visible { color: #ffffff; }

.nav-button.active {
  border-color: rgba(var(--primary-rgb), .24);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .18), rgba(var(--primary-rgb), .08));
  color: #063c5b;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(var(--primary-rgb), .1);
}

body.theme-dark .nav-button.active { color: #ffffff; }

.list, .right-content {
  padding: 14px;
  scrollbar-color: rgba(var(--primary-rgb), .35) transparent;
}

.list::-webkit-scrollbar, .right-content::-webkit-scrollbar, .messages::-webkit-scrollbar { width: 8px; }
.list::-webkit-scrollbar-thumb, .right-content::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(var(--primary-rgb), .3); background-clip: padding-box; }

.row, .card {
  border-color: rgba(var(--primary-rgb), .11);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 5px 16px rgba(27, 56, 88, .045), inset 0 1px rgba(255,255,255,.26);
}

.card {
  padding: 14px;
}

button.row {
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

button.row:hover, button.row.active {
  border-color: rgba(var(--primary-rgb), .42);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .05));
  box-shadow: 0 11px 22px rgba(var(--primary-rgb), .1);
  transform: translateY(-2px);
}

.chat-row.active .row {
  border-color: rgba(79, 145, 211, .58);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(225, 243, 255, .94));
  box-shadow: 0 9px 20px rgba(67, 132, 195, .14), inset 3px 0 #5caae0;
}

.badge {
  background: rgba(var(--primary-rgb), .13);
}

.chat-head {
  position: relative;
  z-index: 1;
  padding: 15px 18px;
  border-bottom-color: var(--panel-divider);
  background: var(--dialog-panel-background);
  box-shadow: 0 5px 18px rgba(27, 56, 88, .045), 0 4px 12px -9px var(--panel-divider-glow);
  backdrop-filter: blur(18px) saturate(1.1);
}

.chat-head::before { display: none; content: none; }

.chat-back-button {
  display: none;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0 0 2px;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  color: var(--primary-dark);
  box-shadow: 0 6px 14px rgba(var(--primary-rgb), .1);
  font-size: 17px;
  line-height: 1;
}

.chat-back-button:hover, .chat-back-button:focus-visible { background: var(--primary); color: #fff; }

.chat-mobile-menu-button { display: none; }
.chat-head-action, .chat-head .call-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(64, 148, 180, .42);
  background: linear-gradient(135deg, #e4f9ff 0%, #cef4f5 50%, #d7f5dd 100%);
  background-size: 180% 180%;
  color: #13577b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 6px 14px rgba(31, 117, 146, .16);
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-position .35s ease, color .2s ease;
}
.chat-head-action::after, .chat-head .call-button::after {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -55%;
  width: 34%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: rotate(18deg) translateX(-240%);
  transition: transform .42s ease;
  pointer-events: none;
}
.chat-head-action:hover, .chat-head-action:focus-visible, .chat-head .call-button:hover, .chat-head .call-button:focus-visible {
  border-color: rgba(35, 128, 161, .66);
  background-position: 100% 100%;
  color: #0c476b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 10px 21px rgba(29, 112, 142, .24);
  transform: translateY(-2px) scale(1.035);
}
.chat-head-action:hover::after, .chat-head-action:focus-visible::after, .chat-head .call-button:hover::after, .chat-head .call-button:focus-visible::after { transform: rotate(18deg) translateX(620%); }
.chat-head-action:active, .chat-head .call-button:active { transform: translateY(0) scale(.94); box-shadow: inset 0 2px 5px rgba(23, 92, 116, .16); }
.chat-mobile-menu-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.mobile-chat-menu-overlay { display: none; }
.mobile-chat-menu-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8, 27, 42, .44); backdrop-filter: blur(4px); animation: mobile-chat-menu-fade .2s ease-out; }
.mobile-chat-menu { width: min(520px, 100%); max-height: min(82dvh, 720px); overflow: auto; border: 1px solid rgba(77, 162, 190, .4); border-radius: 24px; background: linear-gradient(145deg, #f7fdff, #e8f8f2); box-shadow: 0 16px 42px rgba(5, 35, 55, .28); animation: mobile-chat-menu-rise .25s cubic-bezier(.2, .8, .2, 1); }
body.theme-dark .mobile-chat-menu { background: linear-gradient(145deg, #102a3c, #143638); }
.mobile-chat-menu header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 12px; border-bottom: 1px solid rgba(58, 139, 165, .2); }
.mobile-chat-menu header b, .mobile-chat-menu header small { display: block; }
.mobile-chat-menu header b { color: #104d70; font-size: 18px; }
.mobile-chat-menu header small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.mobile-chat-menu header button { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(64, 148, 180, .35); border-radius: 12px; background: #e1f5f7; color: #13577b; font-size: 23px; line-height: 1; }
.mobile-chat-menu__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.mobile-chat-menu__actions button { display: flex; min-height: 48px; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid rgba(64, 148, 180, .25); border-radius: 15px; background: #ffffff; color: #14526f; font-size: 12px; font-weight: 850; text-align: left; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.mobile-chat-menu__actions button:hover, .mobile-chat-menu__actions button:focus-visible { background: linear-gradient(135deg, #e4f9ff, #d9f6df); box-shadow: 0 7px 14px rgba(26, 111, 137, .14); transform: translateY(-1px); }
.mobile-chat-menu__actions svg, .mobile-chat-menu__actions .nav-button__icon { width: 22px; height: 22px; flex: 0 0 auto; }
.mobile-chat-menu__chats { grid-column: 1 / -1; background: linear-gradient(135deg, #e1f8ff, #d8f6e1) !important; }
body.theme-dark .mobile-chat-menu header { border-color: rgba(163, 222, 237, .2); }
body.theme-dark .mobile-chat-menu header b { color: #e7f8ff; }
body.theme-dark .mobile-chat-menu header small { color: #b8d6df; }
body.theme-dark .mobile-chat-menu header button { border-color: rgba(163, 222, 237, .28); background: #1c4658; color: #e7f8ff; }
body.theme-dark .mobile-chat-menu__actions button { border-color: rgba(163, 222, 237, .2); background: #163c4d; color: #e7f8ff; }
body.theme-dark .mobile-chat-menu__chats { background: linear-gradient(135deg, #1d5264, #1a4c46) !important; }
@keyframes mobile-chat-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobile-chat-menu-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) {
  .chat-mobile-menu-button { display: grid; place-items: center; }
  .mobile-chat-menu-overlay { padding: 16px 12px; }
  .mobile-chat-menu { max-height: min(78dvh, 620px); }
}

.call-button {
  border-color: rgba(var(--primary-rgb), .16);
  background: rgba(255,255,255,.68);
  color: var(--primary-dark);
  box-shadow: 0 7px 16px rgba(var(--primary-rgb), .1);
}

.call-button:hover {
  background: var(--primary);
  color: white;
  box-shadow: 0 10px 20px rgba(var(--primary-rgb), .28);
}

.messages {
  position: relative;
  isolation: isolate;
  gap: 12px;
  padding: 22px 8px calc(var(--composer-height, 78px) + 16px);
  scrollbar-color: rgba(var(--primary-rgb), .35) transparent;
}

.messages::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.messages > * { position: relative; z-index: 1; }

.composer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: rgba(244, 249, 253, .18);
  backdrop-filter: blur(3px) saturate(.96);
  pointer-events: none;
}
body.theme-dark .composer::before { background: rgba(8, 16, 28, .2); }

.pinned-messages {
  border-color: rgba(var(--primary-rgb), .3);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.pinned-messages__content, .pinned-messages__label, .pinned-messages__label > span, .pinned-messages__text { max-width: 100%; }

.message__bubble {
  position: relative;
  border: 1px solid rgba(77, 103, 132, .1);
  border-radius: 20px;
  box-shadow: 0 9px 20px rgba(26, 42, 58, .1);
}

.message.own .message__bubble {
  border-color: rgba(var(--primary-rgb), .22);
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(var(--primary-rgb), .12);
}

.message.pinned .message__bubble { outline-color: rgba(var(--primary-rgb), .38); }
.message.pinned-message-focus .message__bubble { animation: pinned-message-focus 1.2s ease-out; }
@keyframes pinned-message-focus { 0%, 45% { outline: 4px solid rgba(var(--primary-rgb), .8); box-shadow: 0 0 0 8px rgba(var(--primary-rgb), .14), 0 9px 20px rgba(26, 42, 58, .1); } 100% { outline: 2px solid rgba(var(--primary-rgb), .38); box-shadow: 0 9px 20px rgba(26, 42, 58, .1); } }
.message__text { line-height: 1.45; }
.empty-chat-notice { display: flex; width: min(430px, 100%); gap: 14px; align-items: flex-start; align-self: center; margin: auto; padding: 18px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 20px; background: rgba(255, 255, 255, .76); color: #17212b; box-shadow: 0 14px 30px rgba(27, 56, 88, .14), inset 0 1px rgba(255, 255, 255, .7); backdrop-filter: blur(14px); }
.empty-chat-notice__icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 7px 15px rgba(var(--primary-rgb), .25); font-size: 20px; }
.empty-chat-notice b { display: block; font-size: 15px; }
.empty-chat-notice p { margin: 5px 0 0; color: #52616d; font-size: 13px; font-weight: 600; line-height: 1.45; }
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .empty-chat-notice { border-color: rgba(255, 255, 255, .14); background: rgba(15, 27, 44, .76); color: #f5f8fc; }
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .empty-chat-notice p { color: #c4d0dc; }

.message--circle .message__bubble {
  display: inline-block;
  width: max-content;
  max-width: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stars-balance {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(109, 87, 225, .17), rgba(34, 193, 180, .16) 56%, rgba(255, 189, 88, .18)), var(--card);
}
.stars-balance__copy { position: relative; z-index: 1; }
.stars-balance__copy > span, .stars-balance__copy > strong { display: block; }
.stars-balance__copy > span { color: var(--muted); font-size: 13px; font-weight: 800; }
.stars-balance__copy > strong { display: flex; gap: 9px; align-items: center; margin-top: 5px; color: #5d3fc2; font-size: 32px; letter-spacing: -.035em; }
.stars-balance__copy > strong i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #7a5ce0, #3a95db); color: #fff; font-size: 20px; font-style: normal; box-shadow: 0 7px 16px rgba(88, 75, 194, .26); transform: rotate(-9deg); }
.stars-balance p { max-width: 390px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.stars-balance__spark { position: absolute; z-index: 0; display: block; font-style: normal; line-height: 1; pointer-events: none; }
.stars-balance__spark--left { right: 98px; bottom: -4px; color: rgba(41, 183, 171, .24); font-size: 67px; transform: rotate(14deg); }
.stars-balance__spark--right { top: 12px; right: 18px; color: rgba(116, 83, 218, .28); font-size: 54px; transform: rotate(15deg); }
.star-transactions { display: grid; margin-top: 10px; }
.star-transaction { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(var(--primary-rgb), .1); }
.star-transaction:last-child { border-bottom: 0; }
.star-transaction > div { min-width: 0; }
.star-transaction b, .star-transaction span { display: block; }
.star-transaction b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.star-transaction span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.star-transaction strong { display: grid; min-width: 0; justify-items: end; font-size: 13px; line-height: 1.15; text-align: right; }
.star-transaction strong span { margin: 0; color: inherit; font: inherit; white-space: nowrap; }
.star-transaction.income strong { color: #178a54; }
.star-transaction.expense strong { color: #bd4c4c; }
body.theme-dark .stars-balance__copy > strong { color: #c7b9ff; }
body.theme-dark .stars-balance__copy > strong i { background: linear-gradient(135deg, #9275ec, #35a6ba); }
body.theme-dark .star-transaction.income strong { color: #73dda4; }
body.theme-dark .star-transaction.expense strong { color: #ff9b9b; }
@media (max-width: 460px) {
  .star-transaction { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .star-transaction strong { justify-items: start; text-align: left; }
}

.composer {
  z-index: 6;
  gap: 10px;
  padding: 9px 16px;
  backdrop-filter: none;
}

body.theme-dark .composer { background: transparent; }

.dialog-panel-style-pearl { --dialog-panel-background: linear-gradient(135deg, #f9fcff 0%, #e5f2ff 52%, #d7e9fb 100%); }
.dialog-panel-style-sky { --dialog-panel-background: linear-gradient(135deg, #edf9ff 0%, #caeaff 50%, #b2d8f4 100%); }
.dialog-panel-style-mint { --dialog-panel-background: linear-gradient(135deg, #f2fff7 0%, #d4f4e3 52%, #b9e6d1 100%); }
.dialog-panel-style-sunset { --dialog-panel-background: linear-gradient(135deg, #fff8f3 0%, #ffe1d5 52%, #ead5f2 100%); }
.dialog-panel-style-lavender { --dialog-panel-background: linear-gradient(135deg, #fbf8ff 0%, #e8dcff 52%, #cfc7f0 100%); }
.dialog-panel-style-midnight { --dialog-panel-background: linear-gradient(135deg, #14253f 0%, #263e68 52%, #425a86 100%); --dialog-panel-text: #f4f8ff; --dialog-panel-muted: #c0cce0; --dialog-panel-line: rgba(232, 241, 255, .2); --dialog-panel-card: rgba(23, 42, 70, .62); }
.dialog-panel-style-noir { --dialog-panel-background: radial-gradient(circle at 90% 8%, rgba(54, 104, 143, .55), transparent 38%), linear-gradient(135deg, #101b2d 0%, #17233f 52%, #09111e 100%); --dialog-panel-text: #f4f8ff; --dialog-panel-muted: #bdc9da; --dialog-panel-line: rgba(232, 241, 255, .18); --dialog-panel-card: rgba(19, 32, 52, .68); }
.dialog-panel-style-aurora { --dialog-panel-background: radial-gradient(circle at 15% 100%, rgba(149, 79, 255, .58), transparent 54%), radial-gradient(circle at 100% 0%, rgba(32, 195, 255, .46), transparent 48%), linear-gradient(135deg, #1c2358 0%, #29356d 52%, #14224d 100%); --dialog-panel-text: #f8faff; --dialog-panel-muted: #d0d8ee; --dialog-panel-line: rgba(240, 245, 255, .2); --dialog-panel-card: rgba(29, 38, 91, .6); }
.dialog-panel-style-live { --dialog-panel-background: radial-gradient(circle at 15% 20%, rgba(255, 116, 209, .8), transparent 38%), radial-gradient(circle at 82% 78%, rgba(42, 232, 255, .78), transparent 42%), radial-gradient(circle at 72% 12%, rgba(155, 104, 255, .68), transparent 38%), linear-gradient(135deg, #25286d, #0d7cbd 46%, #167c9d 100%); --dialog-panel-text: #f8faff; --dialog-panel-muted: #d3ddf0; --dialog-panel-line: rgba(240, 245, 255, .22); --dialog-panel-card: rgba(25, 45, 108, .58); }
.dialog-panel-style-live .sidebar, .dialog-panel-style-live .rightbar, .dialog-panel-style-live .chat-head, .dialog-panel-style-live .composer { background-size: cover; }
.dialog-panel-option__preview.dialog-panel-style-live { background-size: cover; }
.dialog-panel-style-interactive { --dialog-panel-background: #15233d; --dialog-panel-text: #fbfcff; --dialog-panel-muted: #d3d8f1; --dialog-panel-line: rgba(244, 247, 255, .24); --dialog-panel-card: rgba(17, 28, 52, .72); }
.dialog-panel-style-interactive-light { --dialog-panel-background: #f3f7fb; --dialog-panel-text: #17212b; --dialog-panel-muted: #637488; --dialog-panel-line: rgba(81, 107, 132, .2); --dialog-panel-card: rgba(255, 255, 255, .84); }
.dialog-panel-style-interactive .sidebar, .dialog-panel-style-interactive .rightbar, .dialog-panel-style-interactive .chat-head, .dialog-panel-style-interactive .composer, .dialog-panel-style-interactive-light .sidebar, .dialog-panel-style-interactive-light .rightbar, .dialog-panel-style-interactive-light .chat-head, .dialog-panel-style-interactive-light .composer { position: relative; isolation: isolate; }
.dialog-panel-style-interactive .sidebar > .profile, .dialog-panel-style-interactive .sidebar > .list, .dialog-panel-style-interactive .rightbar > .right-content, .dialog-panel-style-interactive .chat-head > *, .dialog-panel-style-interactive .composer > *, .dialog-panel-style-interactive-light .sidebar > .profile, .dialog-panel-style-interactive-light .sidebar > .list, .dialog-panel-style-interactive-light .rightbar > .right-content, .dialog-panel-style-interactive-light .chat-head > *, .dialog-panel-style-interactive-light .composer > * { position: relative; z-index: 1; }
.dialog-panel-option__preview.dialog-panel-style-interactive { background: radial-gradient(circle at 16% 22%, rgba(255, 81, 191, .8), transparent 38%), radial-gradient(circle at 84% 80%, rgba(44, 229, 210, .72), transparent 42%), linear-gradient(135deg, #172544, #27206a 52%, #14486b); }
.dialog-panel-option__preview.dialog-panel-style-interactive-light { background: radial-gradient(circle at 16% 22%, rgba(255, 162, 216, .72), transparent 38%), radial-gradient(circle at 84% 80%, rgba(109, 234, 205, .66), transparent 42%), linear-gradient(135deg, #f9fcff, #e6e8ff 52%, #d7f4ff); }
.dialog-panel-style-midnight .nav-button:hover, .dialog-panel-style-midnight .nav-button:focus-visible, .dialog-panel-style-noir .nav-button:hover, .dialog-panel-style-noir .nav-button:focus-visible, .dialog-panel-style-aurora .nav-button:hover, .dialog-panel-style-aurora .nav-button:focus-visible, .dialog-panel-style-live .nav-button:hover, .dialog-panel-style-live .nav-button:focus-visible, .dialog-panel-style-interactive .nav-button:hover, .dialog-panel-style-interactive .nav-button:focus-visible, .dialog-panel-style-ember .nav-button:hover, .dialog-panel-style-ember .nav-button:focus-visible { color: #fff; }
.dialog-panel-style-midnight .nav, .dialog-panel-style-noir .nav, .dialog-panel-style-aurora .nav, .dialog-panel-style-live .nav, .dialog-panel-style-interactive .nav, .dialog-panel-style-ember .nav { background: #15233d; }
.dialog-panel-style-midnight .nav button, .dialog-panel-style-noir .nav button, .dialog-panel-style-aurora .nav button, .dialog-panel-style-live .nav button, .dialog-panel-style-interactive .nav button, .dialog-panel-style-ember .nav button, .dialog-panel-style-midnight .chat-filters .chip, .dialog-panel-style-noir .chat-filters .chip, .dialog-panel-style-aurora .chat-filters .chip, .dialog-panel-style-live .chat-filters .chip, .dialog-panel-style-interactive .chat-filters .chip, .dialog-panel-style-ember .chat-filters .chip { color: #f8fbff; text-shadow: 0 1px rgba(0, 0, 0, .28); }
.dialog-panel-style-midnight .chat-filters .chip:hover, .dialog-panel-style-midnight .chat-filters .chip:focus-visible, .dialog-panel-style-noir .chat-filters .chip:hover, .dialog-panel-style-noir .chat-filters .chip:focus-visible, .dialog-panel-style-aurora .chat-filters .chip:hover, .dialog-panel-style-aurora .chat-filters .chip:focus-visible, .dialog-panel-style-live .chat-filters .chip:hover, .dialog-panel-style-live .chat-filters .chip:focus-visible, .dialog-panel-style-interactive .chat-filters .chip:hover, .dialog-panel-style-interactive .chat-filters .chip:focus-visible, .dialog-panel-style-ember .chat-filters .chip:hover, .dialog-panel-style-ember .chat-filters .chip:focus-visible { color: #ffffff; }
.dialog-panel-style-midnight .composer textarea, .dialog-panel-style-noir .composer textarea, .dialog-panel-style-aurora .composer textarea, .dialog-panel-style-live .composer textarea, .dialog-panel-style-interactive .composer textarea, .dialog-panel-style-ember .composer textarea { background: rgba(8, 14, 38, .42); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 4px 12px rgba(0, 0, 0, .14); }
.dialog-panel-style-midnight .composer textarea::placeholder, .dialog-panel-style-noir .composer textarea::placeholder, .dialog-panel-style-aurora .composer textarea::placeholder, .dialog-panel-style-live .composer textarea::placeholder, .dialog-panel-style-interactive .composer textarea::placeholder, .dialog-panel-style-ember .composer textarea::placeholder { color: rgba(255, 255, 255, .7); }
.dialog-panel-style-ember { --dialog-panel-background: radial-gradient(circle at 100% 0%, rgba(255, 156, 98, .4), transparent 42%), linear-gradient(135deg, #412141 0%, #6b3849 52%, #9a5a4f 100%); --dialog-panel-text: #fff8f5; --dialog-panel-muted: #f1d2ca; --dialog-panel-line: rgba(255, 241, 235, .2); --dialog-panel-card: rgba(78, 39, 59, .6); }

.chat-filters {
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(var(--primary-rgb), .16);
  border-radius: 16px;
  background: rgba(var(--primary-rgb), .055);
  box-shadow: inset 0 1px rgba(255,255,255,.38);
}

.chat-filters .chip {
  min-height: 32px;
  flex: 1 1 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}

.chat-filters .chip::before { display: none; }

.chat-filters .chip:hover, .chat-filters .chip:focus-visible {
  border-color: rgba(var(--primary-rgb), .2);
  background: rgba(var(--primary-rgb), .1);
  box-shadow: none;
  transform: none;
}

.chat-filters .chip.active {
  border-color: rgba(var(--primary-rgb), .22);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 5px 12px rgba(var(--primary-rgb), .26), inset 0 1px rgba(255,255,255,.3);
}

.dialog-panel-style-midnight .chat-filters, .dialog-panel-style-noir .chat-filters, .dialog-panel-style-aurora .chat-filters, .dialog-panel-style-live .chat-filters, .dialog-panel-style-interactive .chat-filters, .dialog-panel-style-ember .chat-filters {
  border-color: rgba(255,255,255,.14);
  background: rgba(5, 13, 29, .2);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.composer textarea {
  min-height: 38px;
  max-height: 88px;
  padding: 8px 15px;
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 4px 12px rgba(27, 56, 88, .04);
}

body.theme-dark .composer textarea { background: rgba(255,255,255,.07); }

.composer-icon {
  border: 1px solid rgba(var(--primary-rgb), .16);
  background: rgba(255,255,255,.5);
  color: var(--muted);
  box-shadow: 0 4px 10px rgba(27, 56, 88, .08), inset 0 1px rgba(255,255,255,.34);
  backdrop-filter: blur(8px);
}

.composer-icon:hover {
  background: rgba(var(--primary-rgb), .14);
  color: var(--primary-dark);
}

.composer-icon[data-emoji-toggle] {
  border: 1px solid rgba(var(--primary-rgb), .16);
  background: rgba(255,255,255,.32);
  color: var(--primary-dark);
}

.composer-icon[data-emoji-toggle] svg { width: 25px; height: 25px; stroke-width: 1.85; }
.composer-icon[data-emoji-toggle]:hover { background: rgba(var(--primary-rgb), .16); transform: rotate(-8deg) scale(1.04); }
.composer-send { background: var(--primary); color: #fff; }
.composer-send:hover, .composer-send:focus-visible { background: var(--primary-dark); color: #fff; }
body.theme-dark .composer-icon { background: rgba(12, 24, 40, .48); box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08); }
body.theme-dark .composer-icon[data-emoji-toggle] { background: rgba(255,255,255,.08); }

.jump-to-latest {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 24px rgba(var(--primary-rgb), .34), inset 0 1px rgba(255,255,255,.3);
}

.profile-screen {
  background:
    radial-gradient(circle at 12% 2%, rgba(var(--primary-rgb), .23), transparent 28%),
    var(--bg);
}

.profile-hero {
  border: 1px solid rgba(255,255,255,.42);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .25), rgba(126, 219, 145, .16));
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.36);
}

.post {
  border-color: rgba(var(--primary-rgb), .11);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 7px 18px rgba(27, 56, 88, .06);
}

.toast {
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

@keyframes shell-enter {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes message-enter {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes start-gradient-sweep {
  from { background-position: 220% 0; }
  to { background-position: 0 0; }
}

@keyframes start-soft-glow {
  0% { border-color: rgba(42, 171, 238, .12); box-shadow: 0 10px 26px rgba(42, 171, 238, .08); }
  55% { border-color: rgba(42, 171, 238, .42); box-shadow: 0 18px 42px rgba(42, 171, 238, .18); }
  100% { border-color: rgba(42, 171, 238, .18); box-shadow: 0 12px 28px rgba(31, 94, 132, .09); }
}

.app-shell .sidebar,
.app-shell .chat-panel,
.app-shell .rightbar,
.app-shell .profile,
.app-shell .nav-button,
.app-shell .card,
.app-shell .row,
.app-shell .empty__card {
  animation: start-soft-glow 2.8s ease-out both;
}

/* Refined panel layer: depth and hierarchy without excess glow. */
.sidebar, .rightbar, .chat-panel:not(.chat-panel--channel-themed) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.2), transparent 28%),
    var(--dialog-panel-background);
}

.sidebar, .rightbar {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(180deg, rgba(var(--primary-rgb), .055), transparent 28%),
    var(--dialog-panel-background);
}

.profile__body strong, .chat-head__body strong {
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.012em;
}

.profile__body span, .chat-head__body span {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .012em;
}

.nav button {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
}

.nav-button__icon { box-shadow: inset 0 1px rgba(255,255,255,.26); }
.nav-button.active {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .22), rgba(var(--primary-rgb), .07));
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 8px 18px rgba(var(--primary-rgb), .13);
}

.panel-title {
  min-height: 25px;
  margin-bottom: 8px;
  padding: 0 2px 4px;
  border-bottom: 1px solid rgba(var(--primary-rgb), .16);
}

.panel-title b { font-size: 16px; font-weight: 850; letter-spacing: -.02em; }
.panel-title .muted {
  min-width: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--primary-rgb), .16);
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.row, .card {
  border-color: rgba(var(--primary-rgb), .14);
  box-shadow: 0 7px 18px rgba(27, 56, 88, .055), inset 0 1px rgba(255,255,255,.34);
}

.chat-filters .chip.active {
  border-color: rgba(94, 158, 187, .34);
  background: linear-gradient(135deg, rgba(111, 188, 221, .42), rgba(146, 204, 224, .24));
  color: #155d7c;
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 3px 8px rgba(80, 139, 166, .12);
}

.dialog-panel-style-midnight .chat-filters .chip.active, .dialog-panel-style-noir .chat-filters .chip.active, .dialog-panel-style-aurora .chat-filters .chip.active, .dialog-panel-style-live .chat-filters .chip.active, .dialog-panel-style-interactive .chat-filters .chip.active, .dialog-panel-style-ember .chat-filters .chip.active {
  border-color: rgba(174, 215, 232, .28);
  background: rgba(129, 189, 214, .24);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.14);
}

/* Softer, rounded separators for the three panel layout. */
.sidebar, .rightbar, .chat-panel {
  --panel-divider: rgba(105, 139, 161, .34);
  --panel-divider-glow: rgba(126, 165, 188, .13);
}

.sidebar, .rightbar { border-inline: 0; position: relative; }

.sidebar::before, .rightbar::before {
  position: absolute;
  z-index: 4;
  top: 20px;
  bottom: 20px;
  width: 3px;
  content: "";
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(137, 177, 198, .52), rgba(105, 139, 161, .2) 44%, rgba(137, 177, 198, .45));
  box-shadow: 0 0 8px var(--panel-divider-glow);
  pointer-events: none;
}

.sidebar::before { right: -2px; }
.rightbar::before { left: -2px; }

.chat-head::before {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(137, 177, 198, .5), transparent);
  box-shadow: 0 0 6px var(--panel-divider-glow);
}

/* Full-width panel separators and a restrained per-style replay effect. */
body {
  --panel-flash-background: radial-gradient(circle at 10% 12%, rgba(133, 205, 237, .46), transparent 35%), radial-gradient(circle at 88% 82%, rgba(160, 190, 255, .35), transparent 39%), linear-gradient(135deg, rgba(244, 252, 255, .9), rgba(218, 240, 255, .64));
  --panel-flash-duration: 5.2s;
  --panel-hover-background: rgba(92, 174, 211, .14);
  --panel-hover-color: #176582;
  --panel-hover-shadow: rgba(76, 155, 191, .18);
  --panel-text-highlight: #176582;
}

.dialog-panel-style-custom { --panel-flash-background: radial-gradient(circle at 12% 14%, rgba(var(--primary-rgb), .48), transparent 36%), radial-gradient(circle at 88% 80%, rgba(126, 219, 145, .32), transparent 39%), linear-gradient(135deg, rgba(255,255,255,.86), rgba(var(--primary-rgb), .26)); --panel-hover-background: rgba(var(--primary-rgb), .14); --panel-hover-color: var(--primary-dark); --panel-hover-shadow: rgba(var(--primary-rgb), .2); --panel-text-highlight: var(--primary-dark); }
.dialog-panel-style-pearl { --panel-flash-background: radial-gradient(circle at 12% 14%, rgba(135, 204, 247, .52), transparent 36%), radial-gradient(circle at 88% 80%, rgba(163, 219, 255, .4), transparent 39%), linear-gradient(135deg, #fbfeff, #d9f1ff); --panel-hover-background: rgba(97, 180, 225, .16); --panel-hover-color: #22799e; --panel-hover-shadow: rgba(75, 158, 204, .2); --panel-text-highlight: #22799e; }
.dialog-panel-style-sky { --panel-flash-background: radial-gradient(circle at 10% 16%, rgba(92, 193, 255, .54), transparent 36%), radial-gradient(circle at 86% 80%, rgba(129, 174, 255, .38), transparent 39%), linear-gradient(135deg, #f6fdff, #cbeeff); --panel-hover-background: rgba(72, 166, 222, .17); --panel-hover-color: #166c99; --panel-hover-shadow: rgba(49, 142, 199, .21); --panel-text-highlight: #166c99; }
.dialog-panel-style-mint { --panel-flash-background: radial-gradient(circle at 12% 14%, rgba(90, 221, 175, .48), transparent 36%), radial-gradient(circle at 88% 82%, rgba(147, 231, 199, .4), transparent 39%), linear-gradient(135deg, #f8fffb, #cef6e1); --panel-hover-background: rgba(65, 178, 133, .16); --panel-hover-color: #197659; --panel-hover-shadow: rgba(49, 153, 113, .2); --panel-text-highlight: #197659; }
.dialog-panel-style-sunset { --panel-flash-background: radial-gradient(circle at 10% 14%, rgba(255, 166, 130, .48), transparent 36%), radial-gradient(circle at 88% 80%, rgba(203, 144, 241, .38), transparent 39%), linear-gradient(135deg, #fffaf7, #ffe0d9); --panel-hover-background: rgba(218, 126, 105, .16); --panel-hover-color: #a24f5d; --panel-hover-shadow: rgba(188, 103, 120, .2); --panel-text-highlight: #a24f5d; }
.dialog-panel-style-lavender { --panel-flash-background: radial-gradient(circle at 10% 14%, rgba(187, 142, 255, .48), transparent 36%), radial-gradient(circle at 88% 80%, rgba(218, 185, 255, .42), transparent 39%), linear-gradient(135deg, #fffaff, #e6d8ff); --panel-hover-background: rgba(139, 101, 204, .15); --panel-hover-color: #69489d; --panel-hover-shadow: rgba(118, 81, 181, .2); --panel-text-highlight: #69489d; }
.dialog-panel-style-midnight { --panel-flash-background: radial-gradient(circle at 10% 15%, rgba(89, 186, 255, .54), transparent 36%), radial-gradient(circle at 88% 80%, rgba(149, 126, 255, .4), transparent 39%), linear-gradient(135deg, #1b3d6b, #29486e); --panel-hover-background: rgba(102, 202, 255, .18); --panel-hover-color: #d9f5ff; --panel-hover-shadow: rgba(76, 186, 247, .24); --panel-text-highlight: #d9f5ff; }
.dialog-panel-style-noir { --panel-flash-background: radial-gradient(circle at 12% 12%, rgba(66, 185, 227, .42), transparent 36%), radial-gradient(circle at 88% 82%, rgba(107, 126, 240, .34), transparent 39%), linear-gradient(135deg, #162c47, #15243a); --panel-hover-background: rgba(88, 190, 225, .17); --panel-hover-color: #d5f6ff; --panel-hover-shadow: rgba(55, 160, 202, .23); --panel-text-highlight: #d5f6ff; }
.dialog-panel-style-aurora { --panel-flash-background: radial-gradient(circle at 10% 14%, rgba(90, 225, 255, .5), transparent 36%), radial-gradient(circle at 88% 80%, rgba(194, 119, 255, .46), transparent 39%), linear-gradient(135deg, #243775, #2d286b); --panel-hover-background: rgba(109, 214, 255, .18); --panel-hover-color: #e2faff; --panel-hover-shadow: rgba(95, 184, 255, .25); --panel-text-highlight: #e2faff; }
.dialog-panel-style-live { --panel-flash-background: radial-gradient(circle at 10% 14%, rgba(255, 126, 214, .48), transparent 36%), radial-gradient(circle at 88% 80%, rgba(66, 232, 255, .48), transparent 39%), linear-gradient(135deg, #353579, #08779c); --panel-flash-duration: 7.2s; --panel-hover-background: rgba(112, 221, 255, .18); --panel-hover-color: #f3fbff; --panel-hover-shadow: rgba(86, 201, 255, .25); --panel-text-highlight: #f3fbff; }
.dialog-panel-style-interactive { --panel-flash-background: radial-gradient(circle at 12% 18%, rgba(255, 81, 191, .82), transparent 36%), radial-gradient(circle at 85% 16%, rgba(80, 118, 255, .84), transparent 39%), radial-gradient(circle at 74% 78%, rgba(44, 229, 210, .78), transparent 38%), radial-gradient(circle at 20% 82%, rgba(255, 172, 81, .64), transparent 34%), radial-gradient(circle at 52% 46%, rgba(172, 110, 255, .62), transparent 40%), linear-gradient(135deg, #172544, #27206a 52%, #14486b); --panel-flash-duration: 16s; --panel-hover-background: rgba(125, 175, 255, .2); --panel-hover-color: #e8f8ff; --panel-hover-shadow: rgba(100, 183, 255, .28); --panel-text-highlight: #e8f8ff; }
.dialog-panel-style-interactive-light { --panel-flash-background: radial-gradient(circle at 12% 18%, rgba(255, 162, 216, .74), transparent 36%), radial-gradient(circle at 85% 16%, rgba(136, 201, 255, .78), transparent 39%), radial-gradient(circle at 74% 78%, rgba(109, 234, 205, .68), transparent 38%), radial-gradient(circle at 20% 82%, rgba(255, 213, 135, .72), transparent 34%), radial-gradient(circle at 52% 46%, rgba(202, 157, 255, .62), transparent 40%), linear-gradient(135deg, #f9fcff, #e6e8ff 52%, #d7f4ff); --panel-flash-duration: 16s; --panel-hover-background: rgba(120, 184, 226, .17); --panel-hover-color: #236a91; --panel-hover-shadow: rgba(92, 161, 207, .21); --panel-text-highlight: #236a91; }
.dialog-panel-style-ember { --panel-flash-background: radial-gradient(circle at 12% 14%, rgba(255, 185, 106, .5), transparent 36%), radial-gradient(circle at 88% 82%, rgba(255, 122, 142, .42), transparent 39%), linear-gradient(135deg, #69334d, #9e5b50); --panel-hover-background: rgba(255, 175, 119, .18); --panel-hover-color: #fff4dc; --panel-hover-shadow: rgba(255, 143, 89, .25); --panel-text-highlight: #fff4dc; }

.sidebar, .rightbar, .chat-head { position: relative; isolation: isolate; }
.chat-panel > .composer { position: relative; flex: 0 0 auto; isolation: isolate; }
.sidebar > .profile, .sidebar > .list, .rightbar > .right-content, .chat-head > *, .composer > * { position: relative; z-index: 1; }

.profile-trigger:hover, .profile-trigger:focus-visible, .nav-button:hover, .nav-button:focus-visible, .chat-profile-name:hover strong, .chat-profile-name:focus-visible strong, .call-button:hover, .call-button:focus-visible, .composer-icon:hover, .composer-icon:focus-visible {
  color: var(--panel-hover-color);
  box-shadow: 0 8px 18px var(--panel-hover-shadow);
}
.profile-trigger:hover, .profile-trigger:focus-visible, .nav-button:hover, .nav-button:focus-visible { background: var(--panel-hover-background); }
.call-button:hover, .call-button:focus-visible, .composer-icon:hover, .composer-icon:focus-visible { background: var(--panel-hover-background); }
.nav-button:hover .nav-button__icon, .nav-button:focus-visible .nav-button__icon, .composer-icon:hover, .composer-icon:focus-visible { color: var(--panel-hover-color); }
.composer-icon[data-emoji-toggle]:hover, .composer-icon[data-emoji-toggle]:focus-visible { background: var(--panel-hover-background); }

.chat-head::before {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  border-radius: 0;
  background: linear-gradient(90deg, rgba(105, 139, 161, .26), rgba(137, 177, 198, .56) 16%, rgba(137, 177, 198, .56) 84%, rgba(105, 139, 161, .26));
  box-shadow: 0 0 6px var(--panel-divider-glow);
  pointer-events: none;
}
.chat-head::before { bottom: -1px; }

/* Edge-to-edge luminous dividers and stronger panel motion. */
.sidebar::before, .rightbar::before {
  top: 0;
  bottom: 0;
  width: 2px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(211, 239, 255, .84), rgba(112, 184, 226, .58) 22%, rgba(93, 154, 202, .46) 52%, rgba(174, 224, 255, .76));
  box-shadow: 0 0 5px rgba(154, 217, 255, .86), 0 0 16px rgba(74, 167, 226, .48), 0 0 30px rgba(74, 167, 226, .22);
}
.sidebar::before { right: 0; }
.rightbar::before { left: 0; }

body { --panel-flash-duration: 9s; }
.dialog-panel-style-live { --panel-flash-duration: 12s; }
.chat-filters .chip {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  transition: color .2s ease, letter-spacing .24s ease, text-shadow .24s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chat-filters .chip:hover, .chat-filters .chip:focus-visible {
  color: var(--panel-hover-color);
  letter-spacing: .01em;
  text-shadow: 0 0 10px var(--panel-hover-shadow);
  transform: translateY(-1px) scale(1.015);
}
.chat-filters .chip.active:hover, .chat-filters .chip.active:focus-visible {
  color: var(--panel-hover-color);
  background: var(--panel-hover-background);
  box-shadow: 0 5px 14px var(--panel-hover-shadow), inset 0 1px rgba(255,255,255,.38);
}

.app-shell > .sidebar, .app-shell > .chat-panel, .app-shell > .rightbar { z-index: auto; }
.sidebar > *, .chat-panel > *, .rightbar > * { position: relative; z-index: 2; }

/* The dialogs column keeps a restrained reflection without becoming see-through. */
.sidebar {
  background: linear-gradient(118deg, #f2f9ff, #dceeff 52%, #eaf6ff) !important;
  border-right-color: rgba(255, 255, 255, .78);
  box-shadow: inset -1px 0 rgba(89, 169, 213, .2), 0 0 24px rgba(81, 168, 215, .12);
  backdrop-filter: blur(18px) saturate(1.12);
}
.sidebar::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 132px;
  content: "";
  display: none;
  pointer-events: none;
}
.sidebar .row {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 5px 14px rgba(39, 106, 143, .035);
}
.sidebar .row:hover, .sidebar .row.active {
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 8px 18px rgba(var(--primary-rgb), .1);
}
body.theme-dark .sidebar {
  background: linear-gradient(118deg, rgba(23, 43, 65, .72), rgba(14, 31, 52, .46) 46%, rgba(31, 57, 78, .64)) !important;
  border-right-color: rgba(164, 212, 241, .18);
  box-shadow: inset -1px 0 rgba(128, 203, 242, .18), 0 0 24px rgba(0, 0, 0, .16);
}
body.theme-dark .sidebar::after { background: linear-gradient(112deg, rgba(180, 225, 255, .12), rgba(180, 225, 255, .035) 42%, transparent 68%); }
body.theme-dark .sidebar .row { border-color: rgba(211, 235, 255, .13); background: rgba(17, 38, 60, .42); box-shadow: inset 0 1px rgba(255, 255, 255, .06); }
body.theme-dark .sidebar .row:hover, body.theme-dark .sidebar .row.active { background: rgba(42, 78, 108, .6); }

/* Carry the selected chat wallpaper's colour into the dialogs column. */
.sidebar.chat-background-custom { background-image: linear-gradient(118deg, rgba(255, 255, 255, .91), rgba(238, 249, 255, .75)), var(--sidebar-chat-wallpaper) !important; background-size: cover; background-position: center; }
.sidebar.chat-background-whatsapp { background-image: linear-gradient(118deg, rgba(255, 255, 255, .91), rgba(230, 244, 236, .74)), radial-gradient(circle at 7px 7px, rgba(94, 129, 111, .14) 0 1.5px, transparent 1.8px), radial-gradient(circle at 23px 17px, rgba(94, 129, 111, .1) 0 1px, transparent 1.3px), linear-gradient(135deg, transparent 46%, rgba(94, 129, 111, .08) 47% 52%, transparent 53%), linear-gradient(45deg, transparent 46%, rgba(94, 129, 111, .06) 47% 52%, transparent 53%) !important; background-size: cover, 30px 30px, 30px 30px, 30px 30px, 30px 30px; }
.sidebar.chat-background-mint, .sidebar.chat-background-aurora, .sidebar.chat-background-noir, .sidebar.chat-background-cyan, .sidebar.chat-background-mist, .sidebar.chat-background-sunset, .sidebar.chat-background-ocean, .sidebar.chat-background-lavender, .sidebar.chat-background-forest, .sidebar.chat-background-midnight, .sidebar.chat-background-ember, .sidebar.chat-background-iris { background-image: linear-gradient(118deg, rgba(255, 255, 255, .86), rgba(238, 248, 255, .68)), var(--dialog-wallpaper) !important; background-size: cover; background-position: center; }
.sidebar.chat-background-mint { --dialog-wallpaper: radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae, #a4fb8f 49%, #8cf79a); }
.sidebar.chat-background-aurora { --dialog-wallpaper: radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd, #007cd6 47%, #0c1f89); }
.sidebar.chat-background-noir { --dialog-wallpaper: radial-gradient(ellipse 70% 110% at 8% 47%, rgba(29, 36, 111, .62), transparent 56%), radial-gradient(ellipse 60% 100% at 100% 68%, rgba(10, 71, 78, .62), transparent 61%), linear-gradient(120deg, #092032, #0a032d 46%, #03031c); }
.sidebar.chat-background-cyan { --dialog-wallpaper: radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed, #0952f5 50%, #05c8df); }
.sidebar.chat-background-mist { --dialog-wallpaper: radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa, #527797 51%, #a0a58d); }
.sidebar.chat-background-sunset { --dialog-wallpaper: radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); }
.sidebar.chat-background-ocean { --dialog-wallpaper: radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); }
.sidebar.chat-background-lavender { --dialog-wallpaper: radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); }
.sidebar.chat-background-forest { --dialog-wallpaper: radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); }
.sidebar.chat-background-midnight { --dialog-wallpaper: radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); }
.sidebar.chat-background-ember { --dialog-wallpaper: radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); }
.sidebar.chat-background-iris { --dialog-wallpaper: radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); }

/* Compact single row: all chat categories remain visible together. */
.sidebar:not(.sidebar-has-custom-background) { background-image: none !important; }
.chat-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; padding: 0; overflow: visible; }
.chat-filters .chip { min-width: 0; overflow: visible; min-height: 38px; padding: 7px 4px; border-color: rgba(70, 144, 202, .34); background: rgba(255,255,255,.7); color: #25485f; font-size: 10px; font-weight: 900; letter-spacing: .025em; white-space: nowrap; }
.chat-filters .chip.active { border-color: #4d9ed1; background: linear-gradient(135deg, #69bced, #4a9fd5); color: #fff; box-shadow: 0 7px 14px rgba(53, 140, 198, .25), inset 0 1px rgba(255,255,255,.35); }
.chat-filters .chip:hover, .chat-filters .chip:focus-visible { border-color: rgba(var(--primary-rgb), .42); letter-spacing: .02em; transform: translateY(-1px); }
.sidebar .nav-button { border: 1px solid transparent; }
.sidebar .nav-button:hover, .sidebar .nav-button:focus-visible, .sidebar .nav-button.active { border-color: rgba(var(--primary-rgb), .24); }
.sidebar .profile { border-bottom-color: rgba(88, 143, 177, .28); background: rgba(255, 255, 255, .8); box-shadow: inset 0 -1px rgba(255,255,255,.55); }
.sidebar .profile-trigger { color: #1f3445; }
.sidebar .profile-trigger .avatar { box-shadow: 0 3px 9px rgba(24, 78, 112, .2); }
body.theme-dark .sidebar .profile { background: rgba(15, 35, 55, .82); }
body.theme-dark .sidebar .profile-trigger { color: #f2f8ff; }

/* Search text remains legible against all light dialog backgrounds. */
body:not(.theme-dark) .sidebar label { color: #455d70; }
body:not(.theme-dark) .sidebar #userSearch { border-color: rgba(63, 99, 126, .3); background: rgba(255, 255, 255, .78); color: #17212b; }
body:not(.theme-dark) .sidebar #userSearch::placeholder { color: #435d72; opacity: 1; }
.chat-search { position: relative; display: block; margin: 0 0 14px; color: #3a87b6; }
.chat-search svg { position: absolute; z-index: 1; top: 50%; left: 14px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.chat-search #userSearch { padding-left: 43px; }
.message:not(.own) .message__bubble, .message:not(.own) .message__text { font-family: var(--message-font); }

/* Calls inherit the current chat wallpaper; the surface is glass, not a white card. */
.call-overlay { background-color: rgba(8, 23, 38, .42); background-position: center; background-size: cover; }
.call-overlay.chat-background-custom { background-image: linear-gradient(rgba(11, 29, 45, .42), rgba(11, 29, 45, .42)), var(--call-chat-wallpaper); }
.call-overlay.chat-background-whatsapp { background-image: linear-gradient(rgba(18, 43, 41, .4), rgba(18, 43, 41, .4)), radial-gradient(circle at 7px 7px, rgba(94, 129, 111, .14) 0 1.5px, transparent 1.8px), radial-gradient(circle at 23px 17px, rgba(94, 129, 111, .1) 0 1px, transparent 1.3px), linear-gradient(135deg, transparent 46%, rgba(94, 129, 111, .08) 47% 52%, transparent 53%), linear-gradient(45deg, transparent 46%, rgba(94, 129, 111, .06) 47% 52%, transparent 53%); background-size: cover, 30px 30px, 30px 30px, 30px 30px, 30px 30px; }
.call-overlay.chat-background-mint { background-image: linear-gradient(rgba(9, 42, 30, .38), rgba(9, 42, 30, .38)), radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae, #a4fb8f 49%, #8cf79a); }
.call-overlay.chat-background-aurora { background-image: linear-gradient(rgba(11, 18, 57, .4), rgba(11, 18, 57, .4)), radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd, #007cd6 47%, #0c1f89); }
.call-overlay.chat-background-noir { background-image: linear-gradient(rgba(3, 8, 18, .38), rgba(3, 8, 18, .38)), radial-gradient(ellipse 70% 110% at 8% 47%, rgba(29, 36, 111, .62), transparent 56%), radial-gradient(ellipse 60% 100% at 100% 68%, rgba(10, 71, 78, .62), transparent 61%), linear-gradient(120deg, #092032, #0a032d 46%, #03031c); }
.call-overlay.chat-background-cyan { background-image: linear-gradient(rgba(4, 33, 71, .38), rgba(4, 33, 71, .38)), radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed, #0952f5 50%, #05c8df); }
.call-overlay.chat-background-mist { background-image: linear-gradient(rgba(20, 35, 68, .4), rgba(20, 35, 68, .4)), radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa, #527797 51%, #a0a58d); }
.call-overlay.chat-background-sunset { background-image: linear-gradient(rgba(83, 47, 76, .36), rgba(83, 47, 76, .36)), radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); }
.call-overlay.chat-background-ocean { background-image: linear-gradient(rgba(20, 49, 88, .34), rgba(20, 49, 88, .34)), radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); }
.call-overlay.chat-background-lavender { background-image: linear-gradient(rgba(61, 49, 102, .34), rgba(61, 49, 102, .34)), radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); }
.call-overlay.chat-background-forest { background-image: linear-gradient(rgba(27, 63, 56, .35), rgba(27, 63, 56, .35)), radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); }
.call-overlay.chat-background-midnight { background-image: linear-gradient(rgba(9, 19, 42, .38), rgba(9, 19, 42, .38)), radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); }
.call-overlay.chat-background-ember { background-image: linear-gradient(rgba(61, 20, 38, .38), rgba(61, 20, 38, .38)), radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); }
.call-overlay.chat-background-iris { background-image: linear-gradient(rgba(37, 24, 82, .38), rgba(37, 24, 82, .38)), radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); }
.call-window, .incoming-call > div { border: 1px solid rgba(255, 255, 255, .7); background: rgba(246, 251, 255, .78); box-shadow: 0 20px 54px rgba(8, 24, 43, .28), inset 0 1px rgba(255, 255, 255, .6); backdrop-filter: blur(16px) saturate(1.08); }
.call-window .call-control, .incoming-call__actions .button { border: 1px solid rgba(108, 204, 238, .36); background: rgba(19, 62, 92, .88); color: #f4fbff; box-shadow: 0 7px 17px rgba(9, 39, 63, .24), inset 0 1px rgba(255, 255, 255, .14); }
.call-window .call-control:hover, .incoming-call__actions .button:hover { border-color: rgba(119, 221, 247, .72); background: #1c779e; box-shadow: 0 10px 22px rgba(8, 52, 81, .3); }
.call-window .button.danger, .incoming-call__actions .button.danger { border-color: rgba(255, 212, 222, .74); background: #c84661; color: #fff; }
.call-window .call-action--accept, .incoming-call__actions .call-action--accept { border-color: rgba(195, 251, 235, .72); background: #118b7b; color: #fff; }
body.theme-dark .call-window, body.theme-dark .incoming-call > div { border-color: rgba(190, 222, 245, .26); background: rgba(14, 30, 50, .62); }

/* Quiet, wide separator beneath the chat search. */
.list > hr {
  width: calc(100% + 8px);
  height: 1px;
  margin: 18px -4px 14px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(121, 169, 197, .22) 8%, rgba(121, 169, 197, .38) 50%, rgba(121, 169, 197, .22) 92%, transparent);
  box-shadow: 0 0 5px rgba(126, 190, 221, .09);
}

/* Pinned content floats over the scroll area without blurring the messages below. */
.chat-body { overflow: hidden; }
.pinned-messages { position: absolute; z-index: 4; top: 8px; right: 14px; left: 14px; width: auto; max-width: none; margin: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .88), rgba(255, 255, 255, .68)); box-shadow: 0 8px 18px rgba(30, 81, 122, .1); }
.pinned-messages__next, .pinned-messages__menu { border: 1px solid rgba(var(--primary-rgb), .14) !important; background: rgba(255, 255, 255, .5) !important; box-shadow: 0 3px 8px rgba(27, 56, 88, .08); }
body.theme-dark .pinned-messages { background: linear-gradient(to bottom, rgba(12, 24, 40, .88), rgba(12, 24, 40, .68)); }
body.theme-dark .pinned-messages__next, body.theme-dark .pinned-messages__menu { background: rgba(255, 255, 255, .08) !important; }

/* Settings use illustrated entry points; dialog appearance contains all visual choices. */
.settings-cards { display: grid; gap: 10px; margin: 10px 0; }
.settings-card { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 18px; background: rgba(255, 255, 255, .72); color: var(--text); text-align: left; box-shadow: 0 7px 18px rgba(37, 93, 130, .06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.settings-card:hover, .settings-card:focus-visible { border-color: rgba(var(--primary-rgb), .46); box-shadow: 0 11px 24px rgba(37, 93, 130, .13); transform: translateY(-2px); }
.settings-card > span:not(.settings-card__art) { display: grid; gap: 3px; min-width: 0; }
.settings-card b { font-size: 13px; }
.settings-card small { color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.35; }
.settings-card em { color: var(--primary-dark); font-size: 27px; font-style: normal; font-weight: 300; }
.settings-card__art { position: relative; display: block; height: 52px; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, #5dcbec, #7667da 62%, #f199c2); box-shadow: inset 0 1px rgba(255,255,255,.46); }
.settings-card--dialogs .settings-card__art i { position: absolute; display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.88); box-shadow: 0 2px 6px rgba(34, 59, 138, .16); }
.settings-card--dialogs .settings-card__art i:nth-child(1) { top: 11px; left: 10px; width: 29px; }
.settings-card--dialogs .settings-card__art i:nth-child(2) { top: 26px; right: 9px; width: 35px; background: rgba(231, 255, 240, .9); }
.settings-card--dialogs .settings-card__art i:nth-child(3) { bottom: 7px; left: 17px; width: 24px; background: rgba(255,255,255,.6); }
.settings-card--archive .settings-card__art { background: linear-gradient(145deg, #5375cb, #6375bd 52%, #9b74bb); }
.settings-card--archive .settings-card__art::before { position: absolute; right: 12px; bottom: 9px; left: 12px; height: 25px; border: 2px solid rgba(255,255,255,.84); border-radius: 6px 6px 10px 10px; content: ""; box-shadow: inset 0 7px rgba(255,255,255,.12); }
.settings-card--archive .settings-card__art i { position: absolute; z-index: 1; display: block; background: rgba(255,255,255,.9); box-shadow: 0 2px 5px rgba(42, 50, 119, .18); }
.settings-card--archive .settings-card__art i:nth-child(1) { top: 8px; left: 33px; width: 4px; height: 18px; border-radius: 99px; }
.settings-card--archive .settings-card__art i:nth-child(2) { top: 19px; left: 27px; width: 16px; height: 16px; clip-path: polygon(50% 100%, 0 42%, 30% 42%, 30% 0, 70% 0, 70% 42%, 100% 42%); }
.settings-card--privacy .settings-card__art, .settings-card--reactions .settings-card__art { display: grid; place-items: center; color: rgba(255,255,255,.92); font-size: 30px; font-weight: 800; }
.settings-card--privacy .settings-card__art { background: linear-gradient(145deg, #4ea7d2, #536ab2); }
.settings-card--reactions .settings-card__art { background: linear-gradient(145deg, #eb7798, #9d63c5); }
.privacy-settings-form { gap: 16px; }
.privacy-settings-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.privacy-settings-form legend { margin-bottom: 3px; font-size: 14px; font-weight: 850; }
.privacy-option { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: 13px; cursor: pointer; }
.privacy-option:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .1); }
.privacy-option input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }
.privacy-option span { display: grid; gap: 2px; }
.privacy-option small, .reaction-history__item small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.reaction-history { display: grid; gap: 8px; }
.reaction-history__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid rgba(var(--primary-rgb), .13); border-radius: 13px; background: rgba(var(--primary-rgb), .035); }
.reaction-history__emoji { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(var(--primary-rgb), .1); font-size: 20px; }
.reaction-history__item > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.reaction-history__item b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reaction-history__item time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.dialog-theme-picker, .sidebar-background-picker { margin: 0; padding: 0; border: 0; }
.dialog-theme-picker legend, .sidebar-background-picker legend { margin-bottom: 8px; font-size: 13px; font-weight: 850; }
.theme-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.theme-mode-options > label { margin: 0; }
.theme-mode-options input { position: absolute; opacity: 0; pointer-events: none; }
.theme-mode-option { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; min-height: 64px; padding: 9px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 14px; cursor: pointer; }
.theme-mode-option i { display: grid; grid-row: span 2; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #fff6c8; color: #d39120; font-size: 18px; font-style: normal; }
.theme-mode-option--dark { background: linear-gradient(135deg, #263a61, #1a2441); color: #f7fbff; }
.theme-mode-option--dark i { background: #405984; color: #d6edff; }
.theme-mode-option b { font-size: 12px; }
.theme-mode-option small { font-size: 10px; font-weight: 650; opacity: .72; }
.theme-mode-options input:checked + .theme-mode-option { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .18); }
.sidebar-background-picker .muted { margin: 0 0 8px; font-size: 12px; }
.sidebar-background-preview { display: grid; gap: 5px; min-height: 92px; margin-bottom: 9px; padding: 12px; border-radius: 15px; background: linear-gradient(125deg, #f6fbff, #dceefa); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.sidebar-background-preview.has-image { background-image: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)), var(--sidebar-preview-image); background-size: cover; background-position: center; }
.sidebar-background-preview span { color: #1f4c68; font-size: 12px; font-weight: 850; }
.sidebar-background-preview i { display: block; width: 72%; height: 9px; border-radius: 99px; background: rgba(255,255,255,.82); }
.sidebar-background-preview i:nth-child(3) { width: 55%; }
.sidebar-background-remove { color: var(--muted); font-size: 12px; }

/* The profile control is visible without competing with the profile itself. */
.sidebar .profile-menu-arrow { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(40, 91, 121, .16); border-radius: 10px; background: rgba(255,255,255,.72); color: #34566c; box-shadow: none; font-size: 21px; line-height: 1; transition: transform .22s ease, background .22s ease; }
.profile-trigger[aria-expanded="true"] .profile-menu-arrow { transform: rotate(180deg); background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); }
.sidebar .nav { gap: 8px; padding: 4px 10px 10px; background: #f8fcff; box-shadow: inset 0 1px rgba(255,255,255,.7), 0 10px 22px rgba(32, 87, 123, .14); }
body.theme-dark .sidebar .nav { background: rgba(10, 27, 46, .94); }

/* The profile stays fully opaque and crisp above a custom sidebar background. */
.sidebar .profile { position: relative; z-index: 6; padding: 8px 12px 10px; overflow: visible; background: #f7fcff; backdrop-filter: none; box-shadow: inset 0 -1px rgba(255,255,255,.9), 0 3px 10px rgba(44, 101, 139, .08); }
.sidebar .profile-trigger { position: relative; z-index: 1; padding: 7px 9px; overflow: visible; color: #102a3d; text-shadow: none; }
.sidebar .profile__body strong { color: #0c263a; font-size: 15px; font-weight: 900; }
.sidebar .profile__body span { color: #24485f; font-size: 12px; font-weight: 800; }
.sidebar .profile-trigger .avatar { position: relative; z-index: 1; box-shadow: 0 3px 9px rgba(24, 78, 112, .28); }
.sidebar .profile-trigger img.avatar { filter: contrast(1.14) saturate(1.1) brightness(1.02); opacity: 1; }
.sidebar .profile-trigger .avatar:not(img)::after { display: none; }
body.theme-dark .sidebar .profile { background: rgba(11, 30, 48, .84); box-shadow: inset 0 -1px rgba(214,239,255,.12); }
body.theme-dark .sidebar .profile-trigger { color: #f8fcff; text-shadow: 0 1px rgba(0,0,0,.28); }
body.theme-dark .sidebar .profile__body strong { color: #fff; }
body.theme-dark .sidebar .profile__body span { color: #cde5f6; }

/* Keep the account surface solid in night mode and the drawer wholly inside the panel. */
body.theme-dark .sidebar .profile { background: #0c2135; border-bottom-color: rgba(163, 214, 244, .2); box-shadow: inset 0 -1px rgba(214,239,255,.1), 0 3px 10px rgba(0,0,0,.2); }
body.theme-dark .sidebar .profile-menu-arrow { border-color: rgba(173, 224, 248, .2); background: rgba(116, 191, 228, .12); color: #d8efff; }
.sidebar .nav { box-sizing: border-box; overflow: hidden; border-color: rgba(80, 153, 193, .26); border-radius: 16px; }
body.theme-dark .sidebar .nav { background: #102d42; }
.sidebar .chat-filters { gap: 5px; padding: 5px; border: 1px solid rgba(81, 154, 194, .19); border-radius: 15px; background: rgba(255,255,255,.48); box-shadow: inset 0 1px rgba(255,255,255,.56); }
.sidebar .chat-filters .chip { min-height: 31px; padding: 0 8px; border-radius: 10px; color: #31566e; letter-spacing: .015em; }
.sidebar .chat-filters .chip.active { background: #1678a8; color: #fff; box-shadow: 0 4px 10px rgba(16, 101, 145, .22); }
body.theme-dark .sidebar .chat-filters { border-color: rgba(151, 211, 241, .17); background: rgba(5, 24, 40, .35); box-shadow: inset 0 1px rgba(255,255,255,.04); }
body.theme-dark .sidebar .chat-filters .chip { color: #cce7f8; }
body.theme-dark .sidebar .chat-filters .chip.active { background: #1989b8; color: #fff; }

/* A custom sidebar picture takes precedence over derived dialog wallpaper colours. */
.sidebar.sidebar-has-custom-background { background-image: linear-gradient(118deg, rgba(242,249,255,.48), rgba(220,238,255,.36)), var(--sidebar-custom-wallpaper) !important; background-size: cover; background-position: center; }
body.theme-dark .sidebar.sidebar-has-custom-background { background-image: linear-gradient(118deg, rgba(10,29,47,.7), rgba(18,48,67,.52)), var(--sidebar-custom-wallpaper) !important; }
.sidebar.sidebar-has-custom-background .row { background: rgba(255,255,255,.79); }
body.theme-dark .sidebar.sidebar-has-custom-background .row { background: rgba(11, 31, 51, .64); }

/* The empty-state headline and welcome card play one gradient on site entry, then stop. */
.empty__card { width: min(560px, 100%); gap: 24px; padding: 36px; border-radius: 36px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(231,248,255,.84) 45%, rgba(255,255,255,.9)); }
.empty__icon { width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.58); border-radius: 32px; background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.42), transparent 28%), linear-gradient(145deg, #5ed9f1 0%, #2aa6e7 58%, #2278df 100%); background-size: 240% 100%; animation: start-gradient-sweep 4.8s ease-out both; box-shadow: 0 18px 34px rgba(42, 171, 238, .24), inset 0 1px rgba(255,255,255,.5); }
.empty__icon svg { width: 42px; height: 42px; }
.empty__icon--welcome svg { width: 58px; height: 58px; filter: drop-shadow(0 4px 5px rgba(4, 76, 130, .18)); }
.empty__eyebrow { display: inline-block; background: linear-gradient(90deg, #0f9cde, #1f65d6, #10a9b5, #0f9cde); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; font-size: 13px; letter-spacing: .18em; animation: start-gradient-sweep 4.8s ease-out both; }
.empty__title-gradient { max-width: 390px; background: linear-gradient(100deg, #123b5a 0%, #0f91d3 22%, #2a62d5 46%, #14a6b5 70%, #123b5a 100%); background-position: 0% 0; background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; font-size: clamp(32px, 4vw, 46px) !important; line-height: .98; animation: start-gradient-sweep 5.2s ease-out both; }
.empty__card p { max-width: 440px; font-size: 17px; }
.empty__tips span { background: linear-gradient(135deg, rgba(42,171,238,.13), rgba(126,219,145,.12)); color: #118bc4; font-size: 13px; }
.empty__motivation { margin-bottom: -8px; color: #148a84; font-size: clamp(18px, 2vw, 23px) !important; font-weight: 850; line-height: 1.3; }
.empty__campaign { max-width: 465px !important; margin-top: 4px; color: var(--muted); font-size: 13px !important; line-height: 1.5; }
.empty__activity-button { margin-top: 14px; }
.settings-back { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: 9px; background: rgba(var(--primary-rgb), .08); color: var(--primary-dark); font-size: 24px; line-height: 1; }
.settings-back:hover, .settings-back:focus-visible { background: rgba(var(--primary-rgb), .16); }

@media (max-width: 1100px) {
  .app-shell {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .rightbar::before { display: none; }
}

@media (max-width: 760px) {
  .sidebar-resize-handle { display: none; }
  .profile { padding: 9px; }
  .nav { grid-template-columns: 1fr; }
  .list, .right-content { padding: 10px; }
  .chat-head { gap: 8px; padding: 12px; }
  .messages { padding: 16px 8px 12px; }
  .pinned-messages { right: 12px; left: 12px; max-width: none; margin: 0; }
  .composer { padding: 10px; }
  .composer-tools { gap: 1px; }
  .story-editor-overlay { padding: 0; place-items: end center; }
  .story-editor { max-height: 96vh; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
  .story-editor__canvas { width: min(100% - 28px, 440px); margin: 12px auto; }
  .story-editor__controls { grid-template-columns: 1fr; padding: 0 14px 16px; }
  .call-overlay { align-items: end; padding: 0; }
  .call-window { width: 100%; max-width: none; box-sizing: border-box; padding: 14px 12px max(12px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .call-videos { min-height: min(52dvh, 380px); margin: 12px 0; }
  .call-videos video { min-height: 100px; }
  .call-window__head { align-items: flex-start; flex-direction: column; }
  .call-window__view-actions { justify-content: flex-start; }
  .call-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .call-actions .call-control { width: 100%; min-width: 0; height: 44px; padding: 0; border-radius: 50%; }
  .call-actions .call-control span { display: none; }
  .call-actions .call-control__icon { width: 21px; height: 21px; }
  .call-overlay.is-minimized { align-items: end; padding: 10px; }
  .call-overlay.is-minimized .call-window { width: min(236px, calc(100vw - 20px)); padding: 9px 10px; border-radius: 16px; }
  .call-overlay.is-minimized .call-window__head { flex-direction: row; align-items: center; }
  .activity-rewards-promo { display: flex; align-items: flex-start; flex-direction: column; }
  .group-card-overlay { padding: 0; place-items: end center; }
  .group-card { max-height: 94vh; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
  .group-card-overlay--channel { padding: 18px; place-items: center; }
  .group-card--channel { max-height: min(800px, 92vh); border-radius: 26px; }
  .group-card__form, .group-card__section { padding-inline: 14px; }
  .group-card__member { flex-wrap: wrap; }
  .group-card__member-info { min-width: calc(100% - 52px); }
  .group-card__role { margin-left: 47px; }
  .group-card__member-action { margin-left: auto; }
}

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

/* Final sidebar polish: night mode must recolour the whole upper-left area clearly. */
body.theme-dark .app-shell .sidebar {
  background: linear-gradient(145deg, #071827 0%, #0b2238 52%, #102d43 100%) !important;
  border-right-color: rgba(146, 209, 240, .18);
  box-shadow: inset -1px 0 rgba(130, 207, 244, .14), 0 0 26px rgba(0, 0, 0, .22);
}

body.theme-dark .app-shell .sidebar .profile {
  background: linear-gradient(135deg, #081a2b, #0e2a43) !important;
  border-bottom-color: rgba(149, 215, 246, .2);
  box-shadow: inset 0 -1px rgba(221, 244, 255, .09), 0 4px 12px rgba(0, 0, 0, .24);
}

body.theme-dark .app-shell .sidebar .profile-trigger {
  color: #f7fbff;
}

body.theme-dark .app-shell .sidebar .profile__body strong { color: #ffffff; }
body.theme-dark .app-shell .sidebar .profile__body span { color: #bfdced; }

.app-shell .sidebar .profile .nav {
  z-index: 100;
  top: calc(100% + 4px);
  right: 10px;
  left: 10px;
  max-height: calc(100dvh - 110px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  border-radius: 24px;
  background: #f8fdff;
  opacity: 1;
  pointer-events: auto;
  isolation: isolate;
  backdrop-filter: none;
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 16px 34px rgba(31, 83, 118, .12);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.theme-dark .app-shell .sidebar .profile .nav { background: #0b2238; }

/* The drawer overlaps the chat list, so the list cannot cover or intercept its buttons. */
.app-shell .sidebar > .profile { z-index: 4; }
.app-shell .sidebar > .list { z-index: 2; }

.app-shell .sidebar .nav-button {
  min-height: 54px;
  padding: 6px 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #162230;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: left;
}

.app-shell .sidebar .nav-button__icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(233, 249, 255, .72);
  color: #169bd3;
  box-shadow: inset 0 1px rgba(255,255,255,.78);
}

.app-shell .sidebar .nav-button__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  flex: none;
  margin: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

/* The paper-plane outline carries more visual weight on the right. */
.app-shell .sidebar .nav-button[data-section="channels"] .nav-button__icon svg {
  transform: translate(-50%, -44%) rotate(25deg);
}

.app-shell .sidebar .nav-button__label {
  line-height: 1.08;
}

.app-shell .sidebar .nav-button.active {
  background: rgba(42, 171, 238, .08);
  box-shadow: inset 3px 0 #26a9e8;
}

.app-shell .sidebar .nav-button.active .nav-button__icon {
  background: rgba(42, 171, 238, .14);
  color: #0d9dd8;
  box-shadow: inset 0 1px rgba(255,255,255,.82);
}

.app-shell .sidebar .list[data-section="chats"] { padding-top: 14px; }

.sidebar .chat-filters { margin-bottom: 6px; }
.sidebar .stories-strip { padding: 0 2px 6px; }
.sidebar .stories-strip__items { padding: 4px 0; }

/* Reviews page: cleaner cards and labels that do not collide on narrow panels. */
.app-shell .review-search {
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
  gap: 10px;
  margin: 16px 0 18px;
}

.app-shell .review-search input {
  min-width: 0;
  height: 52px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  font-size: 16px;
  font-weight: 750;
}

.app-shell .review-search .button {
  min-width: 104px;
  height: 52px;
  padding: 0 18px;
  border-radius: 22px;
  font-size: 15px;
  white-space: nowrap;
}

.app-shell .review-page.card,
.app-shell .review-item.card,
.app-shell .review-form.card {
  border-color: rgba(88, 170, 215, .16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,252,255,.86));
  box-shadow: 0 14px 32px rgba(45, 107, 150, .08), inset 0 1px rgba(255,255,255,.78);
}

.app-shell .review-page__url,
.app-shell .review-item__source {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: #15293a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.app-shell .review-source-type {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  margin-left: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf7ff;
  color: #1687bd;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}

.app-shell .review-summary {
  gap: 10px;
  margin-top: 18px;
}

.app-shell .review-summary > div {
  min-width: 0;
  min-height: 86px;
  align-content: center;
  padding: 12px 8px;
  border-radius: 20px;
  background: #eef9ff;
}

.app-shell .review-summary b {
  font-size: 28px;
  line-height: 1;
}

.app-shell .review-summary span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #617487;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

.app-shell .review-related b,
.app-shell .review-feed h3,
.app-shell .review-form h3 {
  color: #11263a;
  font-size: 22px;
  line-height: 1.12;
}

.app-shell .review-related > div,
.app-shell .review-item__links {
  gap: 8px;
}

.app-shell .review-related button,
.app-shell .review-item__links button {
  max-width: 100%;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 14px;
  background: #eaf7ff;
  color: #1185c0;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-shell .review-item__rating {
  padding: 7px 12px;
  border-radius: 14px;
  background: #eaf7ff;
  font-size: 13px;
}

.app-shell .review-item p {
  color: #142234;
  font-size: 17px;
  line-height: 1.45;
}

body.theme-dark .app-shell .review-page.card,
body.theme-dark .app-shell .review-item.card,
body.theme-dark .app-shell .review-form.card,
body.theme-dark .app-shell .review-summary > div {
  border-color: rgba(151, 214, 243, .16);
  background: rgba(10, 31, 50, .82);
}

body.theme-dark .app-shell .review-page__url,
body.theme-dark .app-shell .review-item__source,
body.theme-dark .app-shell .review-related b,
body.theme-dark .app-shell .review-feed h3,
body.theme-dark .app-shell .review-form h3,
body.theme-dark .app-shell .review-item p {
  color: #eef8ff;
}

body.theme-dark .app-shell .review-source-type,
body.theme-dark .app-shell .review-related button,
body.theme-dark .app-shell .review-item__links button,
body.theme-dark .app-shell .review-item__rating {
  background: rgba(119, 197, 235, .12);
  color: #9fe6ff;
}

@media (max-width: 760px) {
  .app-shell .review-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell .review-search { grid-template-columns: minmax(0, 1fr) 96px; }
  .app-shell .review-search .button { min-width: 96px; padding: 0 14px; }
}

body.theme-dark .app-shell .sidebar .nav {
  background: #0b2238;
  border-color: rgba(147, 213, 244, .18);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 22px rgba(0, 0, 0, .22);
}

/* Modern menu pages only. The chats list keeps its current separate design. */
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) { padding: 12px 10px 18px; }

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .panel-title {
  margin: 6px 0 16px;
  padding: 16px;
  border: 1px solid rgba(82, 166, 215, .16);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(235,249,255,.76));
  box-shadow: 0 14px 30px rgba(41, 96, 135, .08), inset 0 1px rgba(255,255,255,.8);
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .panel-title b {
  color: #10283b;
  font-size: 22px;
  line-height: 1.08;
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .panel-title span,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .panel-title small {
  color: #587284;
  font-weight: 750;
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .card,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .row,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .stars-balance {
  border: 1px solid rgba(81, 164, 211, .16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(244,251,255,.82));
  box-shadow: 0 12px 26px rgba(38, 96, 135, .075), inset 0 1px rgba(255,255,255,.78);
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .row { gap: 12px; margin-bottom: 10px; padding: 13px; }
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .avatar { box-shadow: 0 7px 18px rgba(30, 92, 135, .12); }

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) button:not(.nav-button):not(.profile-trigger):not(.chat-menu-button):not(.chip),
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) input::file-selector-button {
  min-height: 40px;
  border-radius: 16px;
  border-color: rgba(42, 171, 238, .22);
  background: linear-gradient(135deg, rgba(42,171,238,.16), rgba(126,219,145,.14));
  color: #146083;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(31, 105, 150, .08), inset 0 1px rgba(255,255,255,.72);
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:hover,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) button:not(.nav-button):not(.profile-trigger):not(.chat-menu-button):not(.chip):hover,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) button:not(.nav-button):not(.profile-trigger):not(.chat-menu-button):not(.chip):focus-visible {
  border-color: rgba(42, 171, 238, .46);
  background: linear-gradient(135deg, rgba(42,171,238,.24), rgba(126,219,145,.2));
  box-shadow: 0 10px 22px rgba(31, 105, 150, .14), inset 0 1px rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .danger,
.app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button.danger {
  border-color: rgba(238, 89, 117, .24);
  background: linear-gradient(135deg, #ffeef2, #ffe7ec);
  color: #b53049;
}

.autoposting-panel, .autoposting-channel-list { display: grid; gap: 12px; }
.autoposting-panel__notice { display: grid; gap: 8px; }
.autoposting-panel__notice p { margin: 0; line-height: 1.45; }
.autoposting-channel { display: grid; gap: 12px; padding: 14px; }
.autoposting-channel__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.autoposting-channel__head b, .autoposting-channel__head small { display: block; }
.autoposting-channel__head small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.autoposting-channel__sources { display: flex; flex-wrap: wrap; gap: 7px; }
.autoposting-channel__sources button { min-height: 34px !important; padding: 6px 10px; font-size: 12px !important; }

.app-shell .sidebar .list[data-section="stars"] .stars-balance {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background: radial-gradient(circle at 8% 8%, rgba(124, 101, 228, .26), transparent 34%), linear-gradient(145deg, #f9f7ff, #e9fbf7 68%, #fff8e9);
}

body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .panel-title,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .card,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .row,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .stars-balance {
  border-color: rgba(151, 214, 243, .16);
  background: linear-gradient(145deg, rgba(12, 36, 58, .92), rgba(8, 26, 44, .84));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.18);
}

body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) button:not(.nav-button):not(.profile-trigger):not(.chat-menu-button):not(.chip) {
  border-color: rgba(129, 217, 255, .18);
  background: linear-gradient(135deg, rgba(42,171,238,.18), rgba(126,219,145,.1));
  color: #d9f4ff;
}

.app-shell .sidebar .chat-filters {
  gap: 4px;
  margin-bottom: 11px;
  padding: 3px;
  border-color: rgba(80, 150, 190, .12);
  border-radius: 13px;
  background: rgba(255,255,255,.34);
  box-shadow: none;
}

.app-shell .sidebar .chat-filters .chip {
  min-height: 26px;
  padding: 0 5px;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(45, 78, 99, .68);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
  text-shadow: none;
}

.app-shell .sidebar .chat-filters .chip:hover,
.app-shell .sidebar .chat-filters .chip:focus-visible {
  background: rgba(255,255,255,.46);
  color: #24566f;
  transform: none;
  text-shadow: none;
}

.app-shell .sidebar .chat-filters .chip.active {
  border-color: rgba(41, 126, 171, .14);
  background: rgba(255,255,255,.68);
  color: #1f5c7a;
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 3px 8px rgba(21, 88, 128, .08);
}

body.theme-dark .app-shell .sidebar .chat-filters {
  border-color: rgba(150, 214, 243, .1);
  background: rgba(3, 18, 31, .28);
}

body.theme-dark .app-shell .sidebar .chat-filters .chip {
  color: rgba(205, 231, 246, .62);
}

body.theme-dark .app-shell .sidebar .chat-filters .chip:hover,
body.theme-dark .app-shell .sidebar .chat-filters .chip:focus-visible {
  background: rgba(124, 198, 233, .08);
  color: #d9f0ff;
}

body.theme-dark .app-shell .sidebar .chat-filters .chip.active {
  border-color: rgba(148, 219, 250, .14);
  background: rgba(119, 197, 235, .14);
  color: #ecf9ff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

/* Final dark readability pass for chat header, dialog rows, messages and empty states. */
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed),
body.theme-dark .app-shell .rightbar {
  background: #071827 !important;
  color: #eef8ff;
}

body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head {
  background: linear-gradient(135deg, #081a2b, #0d2740) !important;
  border-bottom-color: rgba(149, 215, 246, .2);
  color: #f5fbff;
  box-shadow: inset 0 -1px rgba(221, 244, 255, .08), 0 4px 12px rgba(0, 0, 0, .22);
}

body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head__body strong,
body.theme-dark .app-shell .chat-profile-name strong {
  color: #ffffff !important;
  text-shadow: none;
}

body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head__body span,
body.theme-dark .app-shell .chat-profile-name span {
  color: #c4deee !important;
}

body.theme-dark .app-shell .sidebar .row,
body.theme-dark .app-shell .rightbar .row,
body.theme-dark .app-shell .card {
  border-color: rgba(151, 214, 243, .18) !important;
  background: rgba(10, 31, 50, .82) !important;
  color: #edf8ff !important;
}

body.theme-dark .app-shell .sidebar .row:hover,
body.theme-dark .app-shell .sidebar .row.active {
  border-color: rgba(147, 219, 250, .32) !important;
  background: rgba(17, 49, 75, .94) !important;
}

body.theme-dark .app-shell .row__title,
body.theme-dark .app-shell .panel-title b,
body.theme-dark .app-shell .card b {
  color: #f8fcff !important;
}

body.theme-dark .app-shell .row__sub,
body.theme-dark .app-shell .muted,
body.theme-dark .app-shell .card small {
  color: #aac6d8 !important;
}

body.theme-dark .app-shell .chat-menu-button {
  color: #9fbed1;
}

body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message:not(.own) {
  color: var(--other-bubble-text, #f2f8ff) !important;
}

body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message:not(.own) .message__bubble {
  border: 1px solid rgba(158, 219, 246, .14);
  background: var(--other-bubble) !important;
  color: var(--other-bubble-text, #f2f8ff) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
}

body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message:not(.own) .message__text,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message:not(.own) .message__forwarded,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message:not(.own) .message__meta {
  color: inherit !important;
}

body.theme-dark .empty,
body.theme-dark .empty__card,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .empty-chat-notice {
  color: #eef8ff !important;
}

body.theme-dark .empty__card {
  border-color: rgba(151, 214, 243, .2) !important;
  background: linear-gradient(135deg, rgba(9, 29, 47, .94), rgba(12, 42, 62, .88)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.06);
}

body.theme-dark .empty__card h2,
body.theme-dark .empty__title-gradient {
  background: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff !important;
  animation: none !important;
}

body.theme-dark .empty__eyebrow,
body.theme-dark .empty__tips span {
  color: #8ddfff !important;
}

body.theme-dark .empty__card p,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .empty-chat-notice p {
  color: #bfd6e6 !important;
}

.has-story { outline: 3px solid #2bb8f0; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(43, 184, 240, .13); }
.message__author-avatar.has-story { outline: 0; box-shadow: none; }
.stories-strip { display: grid; gap: 8px; padding: 8px 2px 10px; }
.stories-strip__toggle { display: grid; width: 28px; height: 20px; justify-self: center; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); cursor: pointer; }
.stories-strip__toggle:hover, .stories-strip__toggle:focus-visible { background: rgba(var(--primary-rgb), .2); }
.stories-strip__toggle svg { width: 16px; height: 16px; transition: transform .18s ease; }
.stories-strip__items { display: flex; gap: 8px; overflow-x: auto; padding: 6px 3px 2px; }
.stories-strip.is-collapsed { padding-bottom: 4px; }
.stories-strip.is-collapsed .stories-strip__toggle svg { transform: rotate(180deg); }
.stories-strip.is-collapsed .stories-strip__items { display: none; }
.welcome-stories { width: min(560px, 100%); margin: 0 auto 12px; }
.welcome-stories .stories-strip__items { justify-content: center; }
.app-shell .sidebar .chat-filters { margin-bottom: 8px; }
.sidebar .stories-strip { gap: 8px; padding: 0 2px 8px; }
.sidebar .stories-strip__items { padding: 0 4px 2px; }
.story-avatar { display: grid; box-sizing: border-box; width: 58px; min-width: 58px; grid-template-rows: 52px 16px; gap: 5px; align-items: start; justify-items: center; padding: 3px 1px 0; border: 0; background: transparent; color: var(--text); font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; }
.story-avatar.has-story { outline: 0; box-shadow: none; }
.story-avatar .avatar { width: 44px; height: 44px; margin-top: 3px; }
.story-avatar .avatar.has-story { outline: 3px solid #2bb8f0; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(43, 184, 240, .13); }
.story-avatar span { display: block; width: 100%; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-more, .review-more { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(var(--primary-rgb), .14); border-radius: 50%; background: rgba(255,255,255,.58); color: var(--primary-dark); font-size: 20px; font-weight: 900; }
.review-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.simple-actions-overlay { position: fixed; z-index: 80; inset: 0; pointer-events: none; }
.simple-actions { position: fixed; display: grid; width: 220px; gap: 6px; padding: 8px; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(19, 61, 92, .18); backdrop-filter: blur(14px); pointer-events: auto; }
.simple-actions button { min-height: 38px; border: 0; border-radius: 12px; background: rgba(var(--primary-rgb), .08); color: #12638b; font-weight: 800; text-align: left; }
.scroll-date-bubble { position: absolute; z-index: 7; top: 12px; left: 50%; padding: 4px 9px; border-radius: 999px; background: rgba(18, 53, 78, .72); color: #fff; font-size: 10px; font-weight: 850; transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(10px); }
.profile-editor--modern { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.profile-edit-card { position: relative; overflow: hidden; border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(235,249,255,.82)); }
.profile-edit-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #2aabee, #7edb91); content: ""; }
.chat-media-card .group-card__section { display: grid; gap: 16px; }
body.theme-dark .simple-actions { border-color: rgba(151, 214, 243, .18); background: rgba(10, 31, 50, .94); }
body.theme-dark .simple-actions button { background: rgba(119, 197, 235, .12); color: #d9f4ff; }

/* Night menu: preserve the original readable cyan palette by default. */
body.theme-dark .app-shell .sidebar .profile .nav {
  border: 1px solid rgba(104, 220, 255, .14);
  background: linear-gradient(145deg, rgba(6, 25, 45, .98), rgba(10, 39, 63, .96));
  box-shadow: inset 0 1px rgba(171, 238, 255, .08), 0 16px 34px rgba(0, 0, 0, .36), 0 0 20px rgba(25, 209, 238, .08);
}
body.theme-dark .app-shell .sidebar .nav-button {
  color: #e8f8ff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
body.theme-dark .app-shell .sidebar .nav-button__label { color: inherit; }
body.theme-dark .app-shell .sidebar .nav-button__icon {
  border: 1px solid rgba(114, 225, 255, .12);
  background: rgba(36, 125, 161, .2);
  color: #69ddff;
  box-shadow: inset 0 1px rgba(211, 250, 255, .12);
}
body.theme-dark .app-shell .sidebar .nav-button:hover,
body.theme-dark .app-shell .sidebar .nav-button:focus-visible {
  background: linear-gradient(90deg, rgba(18, 184, 225, .14), rgba(27, 102, 147, .08));
  color: #ffffff;
  box-shadow: inset 2px 0 #37d8f5, 0 0 14px rgba(43, 215, 242, .16);
}
body.theme-dark .app-shell .sidebar .nav-button:hover .nav-button__icon,
body.theme-dark .app-shell .sidebar .nav-button:focus-visible .nav-button__icon {
  border-color: rgba(77, 230, 255, .42);
  background: rgba(25, 196, 230, .16);
  color: #a7f2ff;
  box-shadow: 0 0 10px rgba(42, 221, 246, .28), inset 0 1px rgba(224, 255, 255, .22);
}
body.theme-dark .app-shell .sidebar .nav-button.active {
  border-color: rgba(74, 222, 247, .34);
  background: linear-gradient(90deg, rgba(14, 201, 229, .24), rgba(22, 112, 158, .14));
  color: #ffffff;
  box-shadow: inset 3px 0 #4ae0f7, 0 0 10px rgba(32, 220, 246, .3), 0 0 24px rgba(24, 172, 220, .16);
}
body.theme-dark .app-shell .sidebar .nav-button.active .nav-button__icon {
  border-color: rgba(108, 239, 255, .58);
  background: linear-gradient(135deg, rgba(22, 215, 235, .38), rgba(33, 127, 180, .34));
  color: #d9faff;
  box-shadow: 0 0 12px rgba(34, 224, 247, .45), inset 0 1px rgba(231, 255, 255, .36);
}

/* Night composer: restore the original quiet navy glass surface by default. */
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer {
  border: 1px solid rgba(80, 224, 245, .28);
  border-radius: 24px 24px 0 0;
  background: linear-gradient(135deg, rgba(5, 22, 39, .94), rgba(9, 38, 58, .9));
  box-shadow: inset 0 1px rgba(196, 249, 255, .1), 0 -1px 0 rgba(80, 224, 245, .12), 0 -10px 30px rgba(3, 17, 31, .32), 0 0 22px rgba(29, 209, 238, .1);
  backdrop-filter: blur(16px) saturate(1.08);
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(19, 202, 233, .08), transparent 38%, rgba(52, 224, 243, .06));
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer textarea {
  border: 1px solid rgba(114, 226, 244, .15);
  background: rgba(3, 18, 33, .58);
  color: #effcff;
  box-shadow: inset 0 1px rgba(214, 253, 255, .08), 0 4px 14px rgba(0, 8, 18, .22);
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer textarea::placeholder { color: rgba(207, 238, 246, .58); }
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer textarea:focus {
  border-color: rgba(91, 228, 247, .32);
  box-shadow: inset 0 1px rgba(222, 255, 255, .1), 0 0 11px rgba(33, 213, 240, .24), 0 0 26px rgba(25, 195, 228, .12);
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon {
  border-color: rgba(104, 224, 244, .2);
  background: rgba(13, 54, 75, .58);
  color: #a9eefa;
  box-shadow: inset 0 1px rgba(220, 255, 255, .1), 0 4px 12px rgba(0, 10, 20, .24);
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:hover,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:focus-visible {
  border-color: rgba(95, 231, 250, .54);
  background: rgba(22, 126, 151, .48);
  color: #e6fdff;
  box-shadow: inset 0 1px rgba(234, 255, 255, .2), 0 0 14px rgba(36, 216, 242, .25);
}

/* The dark message bubble must not show through around a clipped video circle. */
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--circle .message__bubble {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Night action controls: restore the original dark glass and readable labels. */
body.theme-dark .button,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button {
  border: 1px solid rgba(162, 231, 248, .28);
  background: linear-gradient(135deg, rgba(20, 72, 96, .92), rgba(10, 43, 64, .94));
  color: #e8f8ff;
  box-shadow: inset 0 1px rgba(229, 255, 255, .1), 0 7px 16px rgba(0, 12, 24, .24);
  text-shadow: 0 1px rgba(0, 0, 0, .2);
}
body.theme-dark .button:hover,
body.theme-dark .button:focus-visible,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:hover,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:focus-visible {
  border-color: rgba(121, 235, 251, .72);
  background: linear-gradient(135deg, rgba(25, 118, 143, .96), rgba(12, 66, 88, .98));
  box-shadow: inset 0 1px rgba(239, 255, 255, .14), 0 0 12px rgba(42, 220, 244, .28), 0 0 26px rgba(21, 178, 216, .14);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}
body.theme-dark .button:active,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:active {
  border-color: rgba(112, 238, 251, .84);
  background: linear-gradient(135deg, rgba(21, 139, 160, .96), rgba(10, 78, 99, .98));
  box-shadow: inset 0 2px 8px rgba(0, 29, 44, .44), 0 0 16px rgba(35, 216, 241, .34);
  transform: translateY(0) scale(.98);
}
body.theme-dark .button.danger,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button.danger {
  border-color: rgba(255, 180, 194, .4);
  background: linear-gradient(135deg, rgba(121, 44, 62, .94), rgba(74, 26, 43, .96));
  color: #fff2f5;
  box-shadow: inset 0 1px rgba(255, 233, 239, .16), 0 7px 16px rgba(36, 0, 12, .28);
}
body.theme-dark .button.danger:hover,
body.theme-dark .button.danger:focus-visible,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button.danger:hover,
body.theme-dark .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button.danger:focus-visible {
  border-color: rgba(255, 201, 212, .74);
  background: linear-gradient(135deg, rgba(159, 55, 78, .96), rgba(98, 30, 49, .98));
  box-shadow: inset 0 1px rgba(255, 239, 243, .22), 0 0 14px rgba(247, 89, 119, .28), 0 0 28px rgba(212, 59, 93, .13);
}

/* Replace the browser focus ring with the same luminous edge on editable fields. */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.theme-dark textarea,
body.theme-dark select {
  border-color: rgba(159, 223, 242, .2);
  background-color: rgba(5, 25, 42, .7);
  color: #edfaff;
  box-shadow: inset 0 1px rgba(221, 253, 255, .07), 0 4px 12px rgba(0, 10, 20, .16);
}
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus,
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
body.theme-dark textarea:focus-visible,
body.theme-dark select:focus-visible {
  border-color: rgba(103, 233, 250, .7);
  box-shadow: inset 0 1px rgba(232, 255, 255, .14), 0 0 10px rgba(35, 216, 243, .32), 0 0 25px rgba(25, 190, 226, .16);
  outline: none;
}

/* Apply the selectable palette only when administrator or user chose a non-default variant. */
body.theme-dark.night-appearance-customized .app-shell .sidebar .profile .nav {
  border-color: rgb(var(--night-outline-rgb) / .14);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .08), 0 16px 34px rgba(0, 0, 0, .36), 0 0 20px rgb(var(--night-glow-rgb) / var(--night-glow-low));
}
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button__icon {
  border-color: rgb(var(--night-outline-rgb) / .12);
  color: var(--night-outline);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .12);
}
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button:hover,
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button:focus-visible {
  background: linear-gradient(90deg, rgb(var(--night-glow-rgb) / .14), rgba(27, 102, 147, .08));
  box-shadow: inset 2px 0 var(--night-outline), 0 0 14px rgb(var(--night-glow-rgb) / var(--night-glow-medium));
}
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button:hover .nav-button__icon,
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button:focus-visible .nav-button__icon {
  border-color: rgb(var(--night-outline-rgb) / .42);
  background: rgb(var(--night-glow-rgb) / .16);
  color: var(--night-outline);
  box-shadow: 0 0 10px rgb(var(--night-glow-rgb) / var(--night-glow-medium)), inset 0 1px rgb(var(--night-outline-rgb) / .22);
}
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button.active {
  border-color: rgb(var(--night-outline-rgb) / .34);
  background: linear-gradient(90deg, rgb(var(--night-glow-rgb) / .24), rgba(22, 112, 158, .14));
  box-shadow: inset 3px 0 var(--night-outline), 0 0 10px rgb(var(--night-glow-rgb) / var(--night-glow-strong)), 0 0 24px rgb(var(--night-glow-rgb) / var(--night-glow-low));
}
body.theme-dark.night-appearance-customized .app-shell .sidebar .nav-button.active .nav-button__icon {
  border-color: rgb(var(--night-outline-rgb) / .58);
  background: linear-gradient(135deg, rgb(var(--night-glow-rgb) / .38), rgba(33, 127, 180, .34));
  box-shadow: 0 0 12px rgb(var(--night-glow-rgb) / var(--night-glow-strong)), inset 0 1px rgb(var(--night-outline-rgb) / .36);
}
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer {
  border-color: rgb(var(--night-outline-rgb) / .28);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .1), 0 -1px 0 rgb(var(--night-outline-rgb) / .12), 0 -10px 30px rgba(3, 17, 31, .32), 0 0 22px rgb(var(--night-glow-rgb) / var(--night-glow-low));
}
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  background: linear-gradient(90deg, rgb(var(--night-glow-rgb) / .08), transparent 38%, rgb(var(--night-glow-rgb) / .06));
}
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer textarea { border-color: rgb(var(--night-outline-rgb) / .15); }
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer textarea:focus {
  border-color: rgb(var(--night-outline-rgb) / .46);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .1), 0 0 9px rgb(var(--night-glow-rgb) / var(--night-glow-composer));
}
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon { border-color: rgb(var(--night-outline-rgb) / .2); }
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:hover,
body.theme-dark.night-appearance-customized .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:focus-visible {
  border-color: rgb(var(--night-outline-rgb) / .54);
  background: rgb(var(--night-glow-rgb) / .2);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .2), 0 0 14px rgb(var(--night-glow-rgb) / var(--night-glow-medium));
}
body.theme-dark.night-appearance-customized .button,
body.theme-dark.night-appearance-customized .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button {
  border-color: rgb(var(--night-outline-rgb) / .28);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .1), 0 7px 16px rgba(0, 12, 24, .24);
}
body.theme-dark.night-appearance-customized .button:hover,
body.theme-dark.night-appearance-customized .button:focus-visible,
body.theme-dark.night-appearance-customized .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:hover,
body.theme-dark.night-appearance-customized .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:focus-visible {
  border-color: rgb(var(--night-outline-rgb) / .72);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .14), 0 0 12px rgb(var(--night-glow-rgb) / var(--night-glow-medium)), 0 0 26px rgb(var(--night-glow-rgb) / var(--night-glow-low));
}
body.theme-dark.night-appearance-customized .button:active,
body.theme-dark.night-appearance-customized .app-shell .sidebar .list[data-section]:not([data-section="chats"]) .button:active {
  border-color: rgb(var(--night-outline-rgb) / .84);
  box-shadow: inset 0 2px 8px rgba(0, 29, 44, .44), 0 0 16px rgb(var(--night-glow-rgb) / var(--night-glow-strong));
}
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.theme-dark.night-appearance-customized textarea,
body.theme-dark.night-appearance-customized select {
  border-color: rgb(var(--night-outline-rgb) / .2);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .07), 0 4px 12px rgba(0, 10, 20, .16);
}
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
body.theme-dark.night-appearance-customized textarea:focus,
body.theme-dark.night-appearance-customized select:focus,
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
body.theme-dark.night-appearance-customized textarea:focus-visible,
body.theme-dark.night-appearance-customized select:focus-visible {
  border-color: rgb(var(--night-outline-rgb) / .7);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .14), 0 0 10px rgb(var(--night-glow-rgb) / var(--night-glow-medium)), 0 0 25px rgb(var(--night-glow-rgb) / var(--night-glow-low));
}

/* Keep text readable over the dark pinned card and below story avatars. */
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .pinned-messages {
  color: #f0fbff;
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .pinned-messages__label,
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .pinned-messages__label > span {
  color: #65ddf8;
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .pinned-messages__text {
  color: #e8f8ff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .42);
}
body.theme-dark .app-shell .sidebar .story-avatar,
body.theme-dark .app-shell .sidebar .story-avatar span {
  color: #dff6ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .62);
}

/* Start screen: a calm cold-color sweep stays behind the glass. */
.auth-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.auth-shell::before {
  position: absolute;
  z-index: -1;
  inset: -30%;
  content: "";
  background: linear-gradient(118deg, transparent 26%, rgba(var(--primary-rgb), .34) 43%, rgba(86, 206, 220, .28) 51%, rgba(92, 159, 232, .24) 59%, transparent 74%);
  background-size: 260% 100%;
  filter: blur(28px);
  opacity: 0;
  animation: auth-background-sweep 4.8s ease-out both;
  pointer-events: none;
}
.auth-card {
  position: relative;
  z-index: 1;
  padding: 30px;
  border-color: rgba(255, 255, 255, .72);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(242, 250, 255, .82));
  box-shadow: 0 22px 56px rgba(45, 108, 150, .14), inset 0 1px rgba(255, 255, 255, .82);
}
.auth-card .brand { margin-bottom: 25px; }
.auth-card .brand h1 { font-size: clamp(28px, 5vw, 36px); letter-spacing: -.035em; }
.auth-card .brand p { margin: 4px 0 0; font-weight: 500; line-height: 1.35; }
.auth-card .tabs { gap: 10px; margin: 18px 0; }
.auth-card label {
  gap: 7px;
  color: #647788;
  font-size: 13px;
  font-weight: 700;
}
.auth-card input {
  min-height: 52px;
  border-color: rgba(92, 140, 173, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px rgba(255, 255, 255, .68);
}
.auth-card input:focus {
  border-color: rgba(var(--primary-rgb), .52);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .1), inset 0 1px rgba(255, 255, 255, .72);
}
.auth-card .tab,
.auth-card .button,
.auth-card .saved-account__login {
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--primary-rgb), .18);
  box-shadow: 0 7px 16px rgba(27, 56, 88, .08), inset 0 1px rgba(255, 255, 255, .56);
  font-weight: 700;
  letter-spacing: .005em;
}
.auth-card .tab,
.auth-card .button:not(.primary),
.auth-card .saved-account__login {
  background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(235, 248, 255, .72));
  color: var(--text);
}
.auth-card .tab { padding: 10px 16px; }
.auth-card .button.small { min-height: 44px; padding-inline: 14px; border-radius: 17px; font-size: 12px; }
.auth-card .button.primary { min-height: 54px; font-size: 16px; }
.auth-card .tab.active,
.auth-card .button.primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--primary) 0%, #37b4e9 40%, #4fcac5 58%, var(--primary-dark) 100%);
  background-size: 240% 100%;
  color: #fff;
  box-shadow: 0 11px 22px rgba(var(--primary-rgb), .23), inset 0 1px rgba(255, 255, 255, .28);
  animation: auth-control-sweep 3.6s ease-out both;
}
.auth-card .tab::after,
.auth-card .button::after,
.auth-card .saved-account__login::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(108deg, transparent 35%, rgba(255, 255, 255, .52) 49%, transparent 63%);
  background-size: 250% 100%;
  opacity: 0;
  animation: auth-control-shine 3.4s ease-out both;
  pointer-events: none;
}
.auth-card > .card {
  margin-top: 20px;
  margin-bottom: 0;
  padding: 18px;
  border-color: rgba(var(--primary-rgb), .13);
  border-radius: 23px;
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 10px 24px rgba(49, 106, 144, .06);
}
.auth-card > .card > b { font-size: 17px; font-weight: 750; }
.auth-card .saved-account__login {
  margin-bottom: 0;
  border-radius: 18px;
  padding: 13px 48px 13px 13px;
}
.auth-card .saved-account__login .row__title { font-weight: 750; }
.auth-card .saved-account__login .row__sub { color: #718394; font-weight: 550; }
.auth-card .saved-account__remove {
  width: 30px;
  height: 30px;
  border-color: rgba(99, 142, 171, .16);
  border-radius: 50%;
  background: rgba(105, 154, 184, .08);
  color: #6e899d;
  font-size: 19px;
  font-weight: 500;
  opacity: .86;
}
.auth-card .saved-account__remove {
  z-index: 1;
}
.auth-card .saved-account__remove:hover,
.auth-card .saved-account__remove:focus-visible {
  border-color: rgba(188, 86, 105, .28);
  background: rgba(202, 99, 119, .1);
  color: #b35b6c;
}
.auth-card .tab:hover,
.auth-card .tab:focus-visible,
.auth-card .button:hover,
.auth-card .button:focus-visible,
.auth-card .saved-account__login:hover,
.auth-card .saved-account__login:focus-visible {
  border-color: rgba(var(--primary-rgb), .48);
  transform: translateY(-1px);
}
@keyframes auth-background-sweep {
  0% { background-position: 180% 0; opacity: 0; }
  26% { opacity: .72; }
  100% { background-position: -55% 0; opacity: 0; }
}
@keyframes auth-control-sweep {
  from { background-position: 180% 0; }
  to { background-position: 0 0; }
}
@keyframes auth-control-shine {
  0%, 18% { background-position: 180% 0; opacity: 0; }
  38% { opacity: .8; }
  100% { background-position: -55% 0; opacity: 0; }
}

/* Dialog surfaces inherit a quiet tint from the selected wallpaper. */
body {
  --dialog-panel-background: linear-gradient(135deg, #f8fcff, #eaf4fc);
  --dialog-panel-text: #17212b;
  --dialog-panel-muted: #5f7283;
  --dialog-panel-line: rgba(81, 107, 132, .2);
  --dialog-panel-card: rgba(255, 255, 255, .78);
  --panel-divider: rgba(var(--primary-rgb), .34);
  --panel-divider-glow: rgba(var(--primary-rgb), .16);
  --panel-hover-background: rgba(var(--primary-rgb), .13);
  --panel-hover-color: var(--primary-dark);
  --panel-hover-shadow: rgba(var(--primary-rgb), .19);
}

body.chat-theme-whatsapp { --dialog-panel-background: linear-gradient(135deg, #f8fbf6, #e8f3e9); --dialog-panel-card: rgba(255,255,255,.8); --panel-hover-background: rgba(73, 143, 101, .13); --panel-hover-color: #337653; }
body.chat-theme-mint { --dialog-panel-background: linear-gradient(135deg, #f7fff2, #e0f8d9 55%, #d5f2da); --dialog-panel-card: rgba(255,255,255,.74); --panel-hover-background: rgba(60, 159, 101, .14); --panel-hover-color: #25794e; }
body.chat-theme-sunset { --dialog-panel-background: linear-gradient(135deg, #fff9f5, #ffe9df 55%, #f3e4f5); --dialog-panel-card: rgba(255,255,255,.76); --panel-hover-background: rgba(203, 111, 121, .13); --panel-hover-color: #a84e62; }
body.chat-theme-ocean { --dialog-panel-background: linear-gradient(135deg, #f2fcff, #dceff7 55%, #dbe4f7); --dialog-panel-card: rgba(255,255,255,.74); --panel-hover-background: rgba(54, 132, 190, .13); --panel-hover-color: #276d9e; }
body.chat-theme-lavender { --dialog-panel-background: linear-gradient(135deg, #fffaff, #eee7fb 55%, #e0e3f7); --dialog-panel-card: rgba(255,255,255,.76); --panel-hover-background: rgba(123, 92, 180, .13); --panel-hover-color: #694899; }
body.chat-theme-forest { --dialog-panel-background: linear-gradient(135deg, #f7fcf6, #e1f0df 55%, #d8ebe2); --dialog-panel-card: rgba(255,255,255,.76); --panel-hover-background: rgba(55, 132, 101, .14); --panel-hover-color: #2b7158; }

body.chat-theme-aurora,
body.chat-theme-noir,
body.chat-theme-cyan,
body.chat-theme-mist,
body.chat-theme-midnight,
body.chat-theme-ember,
body.chat-theme-iris,
body.chat-theme-prism {
  --dialog-panel-text: #f8fbff;
  --dialog-panel-muted: #d2ddec;
  --dialog-panel-line: rgba(237, 246, 255, .2);
  --dialog-panel-card: rgba(12, 29, 56, .48);
  --panel-divider: rgba(188, 229, 255, .28);
  --panel-divider-glow: rgba(102, 207, 255, .2);
  --panel-hover-background: rgba(196, 239, 255, .13);
  --panel-hover-color: #ffffff;
  --panel-hover-shadow: rgba(104, 209, 255, .25);
}
body.chat-theme-aurora { --dialog-panel-background: radial-gradient(circle at 12% 92%, rgba(213, 81, 255, .3), transparent 48%), linear-gradient(135deg, #202a67, #27417d 52%, #17285b); }
body.chat-theme-noir { --dialog-panel-background: radial-gradient(circle at 92% 5%, rgba(43, 122, 157, .26), transparent 42%), linear-gradient(135deg, #10243a, #13243f 52%, #091524); }
body.chat-theme-cyan { --dialog-panel-background: radial-gradient(circle at 100% 20%, rgba(14, 231, 219, .24), transparent 43%), linear-gradient(135deg, #093d75, #0e4e83 52%, #093d70); }
body.chat-theme-mist { --dialog-panel-background: radial-gradient(circle at 10% 100%, rgba(224, 180, 235, .22), transparent 45%), linear-gradient(135deg, #274b86, #3f5f84 52%, #596c78); }
body.chat-theme-midnight { --dialog-panel-background: radial-gradient(circle at 88% 8%, rgba(104, 157, 237, .22), transparent 38%), linear-gradient(135deg, #172743, #2b426c 55%, #334c77); }
body.chat-theme-ember { --dialog-panel-background: radial-gradient(circle at 92% 2%, rgba(255, 153, 100, .27), transparent 40%), linear-gradient(135deg, #48203f, #703849 52%, #814b49); }
body.chat-theme-iris { --dialog-panel-background: radial-gradient(circle at 8% 10%, rgba(152, 111, 255, .3), transparent 48%), linear-gradient(135deg, #30276f, #5c43a0 52%, #754b91); }

.chat-background-prism, .site-background-prism {
  background: radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80));
  background-size: 145% 145%;
  animation: prism-colors 120s linear infinite;
}
body.chat-theme-prism { --dialog-panel-background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--prism-a, #ff91d1) 24%, transparent), transparent 40%), radial-gradient(circle at 83% 76%, color-mix(in srgb, var(--prism-b, #61e7df) 19%, transparent), transparent 44%), linear-gradient(130deg, color-mix(in srgb, var(--prism-c, #382a83) 88%, #17243f), color-mix(in srgb, var(--prism-d, #245fae) 62%, #17243f) 52%, color-mix(in srgb, var(--prism-e, #116b80) 72%, #17243f)); animation: prism-colors 120s linear infinite; }
body.chat-theme-prism .sidebar,
body.chat-theme-prism .rightbar,
body.chat-theme-prism .chat-head,
body.chat-theme-prism .chat-panel > .composer { animation: none; }
body.chat-theme-prism .chat-head__body strong,
body.chat-theme-prism .profile__body strong,
body.chat-theme-prism .nav-button.active .nav-button__label,
body.chat-theme-prism .chat-filters .chip.active {
  background: linear-gradient(90deg, #ffcfed, #a8f6ff, #e4c5ff, #ffdbad, #ffcfed);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: prism-text 120s ease-in-out infinite;
}

/* The previous sidebar polish used fixed colours; theme variables now take precedence. */
.app-shell .sidebar,
body.theme-dark .app-shell .sidebar {
  background: var(--dialog-panel-background) !important;
  border-right-color: var(--panel-divider);
  box-shadow: inset -1px 0 var(--panel-divider), 0 0 24px var(--panel-divider-glow);
}
.app-shell .sidebar .profile,
body.theme-dark .app-shell .sidebar .profile,
.app-shell .sidebar .profile .nav,
body.theme-dark .app-shell .sidebar .profile .nav {
  background: var(--dialog-panel-card) !important;
  color: var(--dialog-panel-text);
  border-color: var(--dialog-panel-line);
}
.app-shell .sidebar .profile-trigger,
.app-shell .sidebar .profile__body strong,
.app-shell .sidebar .nav-button,
.app-shell .sidebar .profile__body span { color: var(--dialog-panel-text); }
.app-shell .sidebar .profile__body span { color: var(--dialog-panel-muted); }
body.chat-theme-aurora .composer textarea,
body.chat-theme-noir .composer textarea,
body.chat-theme-cyan .composer textarea,
body.chat-theme-mist .composer textarea,
body.chat-theme-midnight .composer textarea,
body.chat-theme-ember .composer textarea,
body.chat-theme-iris .composer textarea,
body.chat-theme-prism .composer textarea {
  background: rgba(5, 15, 35, .42);
  color: #fff;
  border-color: rgba(234, 245, 255, .19);
}
body.chat-theme-aurora .composer textarea::placeholder,
body.chat-theme-noir .composer textarea::placeholder,
body.chat-theme-cyan .composer textarea::placeholder,
body.chat-theme-mist .composer textarea::placeholder,
body.chat-theme-midnight .composer textarea::placeholder,
body.chat-theme-ember .composer textarea::placeholder,
body.chat-theme-iris .composer textarea::placeholder,
body.chat-theme-prism .composer textarea::placeholder { color: rgba(255,255,255,.74); }

.wallpaper-chat-preview.chat-background-aurora header,
.wallpaper-chat-preview.chat-background-noir header,
.wallpaper-chat-preview.chat-background-cyan header,
.wallpaper-chat-preview.chat-background-mist header,
.wallpaper-chat-preview.chat-background-midnight header,
.wallpaper-chat-preview.chat-background-ember header,
.wallpaper-chat-preview.chat-background-iris header,
.wallpaper-chat-preview.chat-background-prism header { background: rgba(12, 28, 55, .78); color: #fff; }
.wallpaper-chat-preview.chat-background-aurora header small,
.wallpaper-chat-preview.chat-background-noir header small,
.wallpaper-chat-preview.chat-background-cyan header small,
.wallpaper-chat-preview.chat-background-mist header small,
.wallpaper-chat-preview.chat-background-midnight header small,
.wallpaper-chat-preview.chat-background-ember header small,
.wallpaper-chat-preview.chat-background-iris header small,
.wallpaper-chat-preview.chat-background-prism header small { color: rgba(255,255,255,.74); }

.wallpaper-option { min-height: 76px; padding: 7px; border-color: color-mix(in srgb, var(--line) 78%, transparent); background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(var(--primary-rgb),.035)); box-shadow: inset 0 1px rgba(255,255,255,.2); }
.wallpaper-option:hover { border-color: rgba(var(--primary-rgb), .54); box-shadow: 0 9px 18px rgba(var(--primary-rgb), .1), inset 0 1px rgba(255,255,255,.28); transform: translateY(-2px); }
.wallpaper-option.selected { border-color: var(--primary); background: linear-gradient(135deg, rgba(var(--primary-rgb),.16), rgba(255,255,255,.13)); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.13), 0 9px 20px rgba(var(--primary-rgb), .13); }
.wallpaper-preview { height: 60px; border: 1px solid rgba(255,255,255,.36); border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.36), 0 5px 12px rgba(25,52,75,.13); }
.wallpaper-option b { font-size: 12px; letter-spacing: -.01em; }
.wallpaper-option small { line-height: 1.25; white-space: normal; }

/* Wallpaper choices stay in one horizontal strip, so the settings page keeps its position. */
.wallpaper-picker .wallpaper-grid {
  display: flex;
  gap: 10px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), .45) transparent;
}
.wallpaper-picker .wallpaper-option {
  width: 164px;
  min-width: 164px;
  grid-template-columns: 1fr;
  gap: 6px;
  scroll-snap-align: start;
}
.wallpaper-picker .wallpaper-preview { height: 68px; }

@property --prism-a { syntax: "<color>"; inherits: true; initial-value: #ff91d1; }
@property --prism-b { syntax: "<color>"; inherits: true; initial-value: #61e7df; }
@property --prism-c { syntax: "<color>"; inherits: true; initial-value: #382a83; }
@property --prism-d { syntax: "<color>"; inherits: true; initial-value: #245fae; }
@property --prism-e { syntax: "<color>"; inherits: true; initial-value: #116b80; }
@keyframes prism-colors {
  0%, 100% { --prism-a: #ff91d1; --prism-b: #61e7df; --prism-c: #382a83; --prism-d: #245fae; --prism-e: #116b80; }
  2.5%, 12.5% { --prism-a: #ffd277; --prism-b: #ff8d9d; --prism-c: #7a315d; --prism-d: #b8525f; --prism-e: #d17b4b; }
  15%, 25% { --prism-a: #8bffcf; --prism-b: #71bdff; --prism-c: #164e65; --prism-d: #277d86; --prism-e: #3570a7; }
  27.5%, 37.5% { --prism-a: #e5b1ff; --prism-b: #9ba5ff; --prism-c: #48296e; --prism-d: #6b4ca8; --prism-e: #4768ab; }
  40%, 50% { --prism-a: #ffae86; --prism-b: #ffe073; --prism-c: #773644; --prism-d: #ad5d45; --prism-e: #c98a39; }
  52.5%, 62.5% { --prism-a: #7be5ff; --prism-b: #7d8dff; --prism-c: #193d79; --prism-d: #285ba5; --prism-e: #436ab2; }
  65%, 75% { --prism-a: #f5a9df; --prism-b: #c5a2ff; --prism-c: #672b69; --prism-d: #9a4389; --prism-e: #734da0; }
  77.5%, 87.5% { --prism-a: #8ff3bf; --prism-b: #a7f4e2; --prism-c: #21595a; --prism-d: #34836f; --prism-e: #4c9c81; }
}
@keyframes prism-text { 0%, 100% { background-position: 0% 50%; } 2.5%, 12.5% { background-position: 14% 50%; } 15%, 25% { background-position: 28% 50%; } 27.5%, 37.5% { background-position: 42% 50%; } 40%, 50% { background-position: 56% 50%; } 52.5%, 62.5% { background-position: 70% 50%; } 65%, 75% { background-position: 84% 50%; } 77.5%, 87.5% { background-position: 100% 50%; } }

/* Wallpaper colour remains a subtle tint, while panels keep a calm light or dark base. */
body:not(.theme-dark) .app-shell .sidebar,
body:not(.theme-dark) .app-shell .rightbar,
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  background: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)), var(--dialog-panel-background) !important;
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .82)), var(--dialog-panel-background) !important;
}
body.theme-dark .app-shell .sidebar,
body.theme-dark .app-shell .rightbar,
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  background: linear-gradient(rgba(4, 14, 26, .72), rgba(4, 14, 26, .72)), var(--dialog-panel-background) !important;
}
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(4, 14, 26, .78), rgba(4, 14, 26, .78)), var(--dialog-panel-background) !important;
}

/* The profile drawer must fully cover the chat list below it. */
.app-shell .sidebar .profile .nav {
  z-index: 40;
  background: #f7fcff !important;
  color: #123249;
  box-shadow: 0 0 0 1px rgba(255,255,255,.94), 0 14px 30px rgba(27, 56, 88, .26) !important;
}
.app-shell .sidebar .profile .nav .nav-button {
  background: #ffffff;
  color: #123249;
  box-shadow: inset 0 0 0 1px rgba(58, 133, 170, .18);
}
.app-shell .sidebar .profile .nav .nav-button__label { color: inherit; }
.app-shell .sidebar .profile .nav .nav-button:hover,
.app-shell .sidebar .profile .nav .nav-button:focus-visible,
.app-shell .sidebar .profile .nav .nav-button.active {
  background: #e5f6fb;
  color: #0b587a;
}
body.theme-dark .app-shell .sidebar .profile .nav {
  background: #0b2135 !important;
  color: #f2fbff;
  border-color: rgba(158, 219, 246, .28);
  box-shadow: 0 0 0 1px rgba(158, 219, 246, .14), 0 14px 30px rgba(0, 0, 0, .42) !important;
}
body.theme-dark .app-shell .sidebar .profile .nav .nav-button {
  background: #102b42;
  color: #f2fbff;
  box-shadow: inset 0 0 0 1px rgba(158, 219, 246, .16);
}
body.theme-dark .app-shell .sidebar .profile .nav .nav-button:hover,
body.theme-dark .app-shell .sidebar .profile .nav .nav-button:focus-visible,
body.theme-dark .app-shell .sidebar .profile .nav .nav-button.active {
  background: #16435b;
  color: #ffffff;
}

/* Only a narrow round frame follows the outline of a video circle. */
.message--circle .message__bubble {
  width: max-content;
  max-width: min(214px, 100%);
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.message--circle .message__content,
.message--circle .circle-message {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.message--circle .circle-message { width: 214px; }
.message--circle .circle-message__mask {
  position: relative;
  display: block;
  width: 214px;
  height: 214px;
  box-sizing: border-box;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .96);
  border-radius: 50%;
  background: transparent;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle, #000 99%, transparent 100%);
  box-shadow: 0 0 0 1px rgba(77, 103, 132, .16), 0 0 16px rgba(var(--primary-rgb), .24), 0 3px 10px rgba(26, 42, 58, .08);
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--circle .circle-message__mask {
  border-color: rgba(188, 231, 247, .62);
  box-shadow: 0 0 0 1px rgba(158, 219, 246, .18), 0 0 18px rgba(79, 211, 240, .25), 0 3px 10px rgba(0, 0, 0, .16);
}

/* The area outside the circular mask is intentionally fully transparent. */
.message--circle,
.message--circle .message__content,
.message--circle .message__bubble,
.message--circle .circle-message,
.message--circle .circle-message__mask {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
}
.message--circle .message__bubble,
.message--circle .circle-message { border-color: transparent !important; box-shadow: none !important; }
.message--circle .message__bubble::before,
.message--circle .message__bubble::after {
  display: none !important;
  content: none !important;
}

.message--circle .message-circle {
  display: block;
  width: 206px;
  height: 206px;
  background: transparent !important;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle, #000 99%, transparent 100%);
}

/* The controls sit below the untouched round video rather than clipping its lower edge. */
.circle-player {
  min-width: 210px;
  max-width: 210px;
  gap: 7px;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(12, 32, 51, .26);
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(1.04);
}
.circle-message:hover .circle-player,
.circle-message:focus-within .circle-player,
.circle-message.is-touched .circle-player {
  max-height: 23px;
  margin-top: 5px;
  padding: 2px 7px;
  border-color: rgba(181, 229, 248, .12);
  background: rgba(12, 45, 67, .44);
  box-shadow: inset 0 1px rgba(235,255,255,.07);
  opacity: .72;
}
.circle-player button {
  width: 25px;
  height: 16px;
  border-radius: 999px;
  background: rgba(77, 190, 222, .62);
  box-shadow: none;
  font-size: 8px;
}
.circle-player button:hover, .circle-player button:focus-visible { background: rgba(98, 207, 239, .78); transform: scale(1.04); }
.circle-player input { height: 3px; accent-color: #65dcf4; cursor: pointer; }
.circle-player input::-webkit-slider-thumb { width: 7px; height: 10px; border-radius: 999px; }
.circle-player input::-moz-range-thumb { width: 7px; height: 10px; border: 0; border-radius: 999px; }

/* A media card is reserved for circles received in a regular dark chat. */
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--circle:not(.own) .message__bubble {
  width: min(238px, 100%);
  max-width: 100%;
  padding: 10px 10px 8px !important;
  overflow: hidden;
  border: 1px solid rgba(163, 222, 242, .22) !important;
  border-radius: 28px !important;
  background: rgba(5, 20, 35, .94) !important;
  box-shadow: inset 0 1px rgba(224, 252, 255, .06), 0 10px 24px rgba(0, 5, 13, .32) !important;
}

/* Compact profile actions: one clear button opens the corresponding familiar form. */
.profile-actions { display: grid; gap: 12px; margin-top: 14px; }
.profile-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-action-button { display: flex; min-width: 0; gap: 9px; align-items: center; padding: 10px; border: 1px solid rgba(var(--primary-rgb), .17); border-radius: 17px; background: rgba(255,255,255,.62); color: var(--text); box-shadow: inset 0 1px rgba(255,255,255,.66), 0 5px 14px rgba(31,66,99,.06); text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.profile-action-button:hover, .profile-action-button:focus-visible, .profile-action-button.active { border-color: rgba(var(--primary-rgb), .55); background: linear-gradient(135deg, rgba(var(--primary-rgb),.16), rgba(126,219,145,.12)); box-shadow: 0 8px 18px rgba(var(--primary-rgb),.13), inset 0 1px rgba(255,255,255,.7); transform: translateY(-1px); }
.profile-action-button__icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--primary), #65d2c0); color: #fff; box-shadow: 0 6px 12px rgba(var(--primary-rgb), .23); font-size: 18px; font-weight: 900; }
.profile-action-button span:last-child { min-width: 0; }
.profile-action-button b, .profile-action-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-action-button b { font-size: 13px; }
.profile-action-button small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 700; }
.profile-edit-card[hidden] { display: none; }
.profile-edit-card__head { display: flex; gap: 10px; align-items: flex-start; }
.profile-edit-card__head b { display: block; }
.profile-edit-card__head p { margin: 3px 0 0; font-size: 12px; }
.profile-upload-preview { display: block; width: min(100%, 360px); max-height: 280px; margin: 0 auto; border: 1px solid rgba(var(--primary-rgb),.2); border-radius: 16px; background: rgba(var(--primary-rgb), .06); box-shadow: 0 9px 20px rgba(31,66,99,.1); object-fit: cover; }
.profile-upload-preview--avatar { width: 118px; height: 118px; border-radius: 50%; }
.profile-upload-preview--story { aspect-ratio: 9 / 14; max-height: 420px; }
body.theme-dark .profile-action-button { border-color: rgba(168, 226, 246, .18); background: rgba(10, 33, 53, .78); color: #f3fbff; box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 14px rgba(0,0,0,.18); }
body.theme-dark .profile-action-button small { color: #b7d4e5; }
body.theme-dark .profile-action-button:hover, body.theme-dark .profile-action-button:focus-visible, body.theme-dark .profile-action-button.active { border-color: rgba(115, 226, 248, .56); background: linear-gradient(135deg, rgba(19,105,134,.82), rgba(18,75,104,.9)); }
@media (max-width: 620px) { .profile-action-grid { grid-template-columns: 1fr; } }

/* Dialog surfaces deliberately inherit the selected wallpaper's palette. */
body:not(.theme-dark) {
  --dialog-panel-text: #142432;
  --dialog-panel-muted: #4e6575;
  --dialog-panel-line: rgba(49, 83, 108, .24);
  --dialog-panel-card: rgba(255, 255, 255, .7);
}
body:not(.theme-dark).chat-theme-aurora { --dialog-panel-background: radial-gradient(circle at 14% 88%, rgba(232, 154, 255, .48), transparent 47%), radial-gradient(circle at 90% 11%, rgba(121, 213, 255, .42), transparent 42%), linear-gradient(135deg, #faf7ff, #e9efff 54%, #e0edff); }
body:not(.theme-dark).chat-theme-noir { --dialog-panel-background: radial-gradient(circle at 91% 8%, rgba(102, 185, 215, .25), transparent 40%), linear-gradient(135deg, #f8fbff, #e8f2f7 54%, #dbe9f2); }
body:not(.theme-dark).chat-theme-cyan { --dialog-panel-background: radial-gradient(circle at 92% 10%, rgba(88, 237, 226, .35), transparent 42%), linear-gradient(135deg, #f2fdff, #d9f4fa 54%, #d9eaff); }
body:not(.theme-dark).chat-theme-mist { --dialog-panel-background: radial-gradient(circle at 11% 90%, rgba(230, 184, 238, .36), transparent 44%), linear-gradient(135deg, #faf8ff, #ebeaff 54%, #e4f1f6); }
body:not(.theme-dark).chat-theme-midnight { --dialog-panel-background: radial-gradient(circle at 89% 9%, rgba(132, 180, 255, .32), transparent 40%), linear-gradient(135deg, #f5f9ff, #e0edff 54%, #d7e5fa); }
body:not(.theme-dark).chat-theme-ember { --dialog-panel-background: radial-gradient(circle at 90% 8%, rgba(255, 173, 126, .38), transparent 42%), linear-gradient(135deg, #fff9f7, #ffede5 54%, #f5e1e8); }
body:not(.theme-dark).chat-theme-iris { --dialog-panel-background: radial-gradient(circle at 11% 10%, rgba(184, 145, 255, .36), transparent 45%), linear-gradient(135deg, #fcf9ff, #eee5ff 54%, #e8e1f7); }
body:not(.theme-dark).chat-theme-prism { --dialog-panel-background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--prism-a) 28%, transparent), transparent 41%), radial-gradient(circle at 83% 76%, color-mix(in srgb, var(--prism-b) 25%, transparent), transparent 44%), linear-gradient(130deg, #fff9fd, color-mix(in srgb, var(--prism-d) 18%, #f4fbff) 52%, color-mix(in srgb, var(--prism-e) 16%, #f8fbff)); }

body:not(.theme-dark) .app-shell .sidebar,
body:not(.theme-dark) .app-shell .rightbar,
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), var(--dialog-panel-background) !important;
  color: var(--dialog-panel-text);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(255, 255, 255, .64), rgba(255, 255, 255, .64)), var(--dialog-panel-background) !important;
  color: var(--dialog-panel-text);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head__body strong,
body:not(.theme-dark) .app-shell .chat-profile-name strong { color: #142432 !important; }
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head__body span,
body:not(.theme-dark) .app-shell .chat-profile-name span { color: #4e6575 !important; }
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer textarea {
  background: rgba(255, 255, 255, .76);
  color: #142432;
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer textarea::placeholder { color: #5a7080; }

body:not(.theme-dark).chat-theme-custom .app-shell .sidebar,
body:not(.theme-dark).chat-theme-custom .app-shell .rightbar,
body:not(.theme-dark).chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  background: linear-gradient(rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)), var(--dialog-panel-wallpaper) !important;
  background-position: center;
  background-size: cover;
}
body:not(.theme-dark).chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body:not(.theme-dark).chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(255, 255, 255, .76), rgba(255, 255, 255, .76)), var(--dialog-panel-wallpaper) !important;
  background-position: center;
  background-size: cover;
}

body.theme-dark .app-shell .sidebar,
body.theme-dark .app-shell .rightbar,
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  --dialog-panel-text: #f2fbff;
  --dialog-panel-muted: #c2dbe9;
  --dialog-panel-card: rgba(9, 25, 43, .66);
  background: linear-gradient(rgba(4, 14, 26, .5), rgba(4, 14, 26, .5)), var(--dialog-panel-background) !important;
}
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(4, 14, 26, .6), rgba(4, 14, 26, .6)), var(--dialog-panel-background) !important;
}
body.theme-dark.chat-theme-custom .app-shell .sidebar,
body.theme-dark.chat-theme-custom .app-shell .rightbar,
body.theme-dark.chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) {
  background: linear-gradient(rgba(4, 14, 26, .62), rgba(4, 14, 26, .62)), var(--dialog-panel-wallpaper) !important;
  background-position: center;
  background-size: cover;
}
body.theme-dark.chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) .chat-head,
body.theme-dark.chat-theme-custom .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  background: linear-gradient(rgba(4, 14, 26, .72), rgba(4, 14, 26, .72)), var(--dialog-panel-wallpaper) !important;
  background-position: center;
  background-size: cover;
}

/* The brand letters join the existing entrance sweep on the account screen. */
.auth-card .auth-brand-title { color: #123a56; }
.auth-card .auth-brand-title span {
  display: inline-block;
  animation: auth-brand-letter .72s cubic-bezier(.2, .8, .25, 1) var(--letter-delay) both;
  will-change: transform, opacity;
}
@keyframes auth-brand-letter {
  0% { opacity: 0; transform: translateY(12px) scale(.72) rotate(-8deg); }
  58% { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Dialog panels use wallpaper colours; the blue account-entry screen remains independent. */
body { --composer-control-hover: linear-gradient(135deg, #287da8, #2ab39d); }
body.chat-theme-whatsapp { --composer-control-hover: linear-gradient(135deg, #3b8e62, #62b26d); }
body.chat-theme-mint { --composer-control-hover: linear-gradient(135deg, #29966d, #67bd76); }
body.chat-theme-sunset, body.chat-theme-ember { --composer-control-hover: linear-gradient(135deg, #c76368, #dc8a65); }
body.chat-theme-ocean, body.chat-theme-cyan { --composer-control-hover: linear-gradient(135deg, #277ba6, #36b6b7); }
body.chat-theme-lavender, body.chat-theme-iris { --composer-control-hover: linear-gradient(135deg, #7155a9, #ad76bc); }
body.chat-theme-forest { --composer-control-hover: linear-gradient(135deg, #397d5a, #75a860); }
body.chat-theme-aurora { --composer-control-hover: linear-gradient(135deg, #5273cf, #a466c5); }
body.chat-theme-noir, body.chat-theme-midnight { --composer-control-hover: linear-gradient(135deg, #166f98, #365aa0); }
body.chat-theme-prism { --composer-control-hover: linear-gradient(135deg, var(--prism-d, #657ee8), var(--prism-b, #6adfd8)); }
body.theme-dark { --composer-control-hover: linear-gradient(135deg, #0e8fa5, #147088); }

body:not(.theme-dark) .app-shell .sidebar { background: linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38)), var(--dialog-panel-background) !important; }
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) { background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .58)), var(--dialog-panel-background) !important; }
body:not(.theme-dark) .app-shell .rightbar { background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .4)), var(--dialog-panel-background) !important; }
body.theme-dark .app-shell .sidebar { background: linear-gradient(145deg, rgba(4, 14, 26, .43), rgba(4, 14, 26, .57)), var(--dialog-panel-background) !important; }
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) { background: linear-gradient(145deg, rgba(4, 14, 26, .38), rgba(4, 14, 26, .54)), var(--dialog-panel-background) !important; }
body.theme-dark .app-shell .rightbar { background: linear-gradient(145deg, rgba(4, 14, 26, .5), rgba(4, 14, 26, .37)), var(--dialog-panel-background) !important; }

/* Keep the day composer translucent so the conversation remains visible beneath it. */
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  border: 1px solid rgba(255, 255, 255, .5);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(248, 252, 255, .42) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 -8px 24px rgba(39, 77, 107, .07) !important;
  backdrop-filter: blur(12px) saturate(1.04);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  display: block !important;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .24), transparent 46%, rgba(215, 239, 249, .2)) !important;
}

/* Restore the restrained cyan accents of the night composer, not the video circle. */
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  border: 1px solid rgba(80, 224, 245, .28);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(135deg, rgba(5, 22, 39, .84), rgba(9, 38, 58, .78)) !important;
  box-shadow: inset 0 1px rgba(196, 249, 255, .1), 0 -1px 0 rgba(80, 224, 245, .12), 0 -10px 30px rgba(3, 17, 31, .32), 0 0 22px rgba(29, 209, 238, .1) !important;
  backdrop-filter: blur(16px) saturate(1.08);
}
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  display: block !important;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(19, 202, 233, .08), transparent 38%, rgba(52, 224, 243, .06)) !important;
}
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:hover,
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:focus-visible {
  border-color: rgba(95, 231, 250, .54) !important;
  background: rgba(22, 126, 151, .48) !important;
  color: #e6fdff !important;
  box-shadow: inset 0 1px rgba(234, 255, 255, .2), 0 0 14px rgba(36, 216, 242, .25) !important;
}
body.theme-dark.night-appearance-customized .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  border-color: rgb(var(--night-outline-rgb) / .28);
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .1), 0 -1px 0 rgb(var(--night-outline-rgb) / .12), 0 -10px 30px rgba(3, 17, 31, .32), 0 0 22px rgb(var(--night-glow-rgb) / var(--night-glow-low)) !important;
}
body.theme-dark.night-appearance-customized .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  background: linear-gradient(90deg, rgb(var(--night-glow-rgb) / .08), transparent 38%, rgb(var(--night-glow-rgb) / .06)) !important;
}
body.theme-dark.night-appearance-customized .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:hover,
body.theme-dark.night-appearance-customized .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer .composer-icon:focus-visible {
  border-color: rgb(var(--night-outline-rgb) / .54) !important;
  background: rgb(var(--night-glow-rgb) / .2) !important;
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .2), 0 0 14px rgb(var(--night-glow-rgb) / var(--night-glow-medium)) !important;
}
.app-shell .composer .composer-icon:hover,
.app-shell .composer .composer-icon:focus-visible {
  border-color: transparent !important;
  background: var(--composer-control-hover) !important;
  color: #fff !important;
  box-shadow: 0 8px 17px rgba(20, 69, 94, .22) !important;
}

/* Video circles have no ring or glow in either theme. */
.message--circle .circle-message__mask {
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--circle .circle-message__mask {
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* A custom track prevents the browser's oversized native video-progress thumb. */
.circle-player input {
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.circle-player input::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(101, 220, 244, .72) 0 var(--circle-progress, 0%), rgba(207, 243, 252, .34) var(--circle-progress, 0%) 100%);
}
.circle-player input::-webkit-slider-thumb {
  width: 4px;
  height: 4px;
  margin-top: -.5px;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: #b5f4ff;
  box-shadow: none;
}
.circle-player input::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(207, 243, 252, .34);
}
.circle-player input::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(101, 220, 244, .72);
}
.circle-player input::-moz-range-thumb {
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 50%;
  background: #b5f4ff;
  box-shadow: none;
}

/* Wallpaper previews animate independently so navigation does not shift the whole app. */
body.chat-theme-prism,
.chat-background-prism,
.site-background-prism { animation: prism-colors 180s ease-in-out infinite; }
body.chat-theme-prism .chat-head__body strong,
body.chat-theme-prism .profile__body strong,
body.chat-theme-prism .nav-button.active .nav-button__label,
body.chat-theme-prism .chat-filters .chip.active { animation-duration: 180s; }
.wallpaper-chat-preview.is-wallpaper-preview-animating { animation: wallpaper-preview-enter .46s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes wallpaper-preview-enter {
  0% { opacity: .42; transform: scale(.975); filter: saturate(.7); }
  62% { opacity: 1; transform: scale(1.012); filter: saturate(1.12); }
  100% { opacity: 1; transform: scale(1); filter: saturate(1); }
}
.welcome-brand-letters > span { display: inline-block; animation: auth-brand-letter .72s cubic-bezier(.2, .8, .25, 1) var(--letter-delay) both; }

/* Final live-wallpaper and composer overrides. */
body.chat-theme-live {
  --dialog-panel-text: #f8fbff;
  --dialog-panel-muted: #d2ddec;
  --dialog-panel-line: rgba(237, 246, 255, .2);
  --dialog-panel-card: rgba(12, 29, 56, .48);
  --panel-divider: rgba(188, 229, 255, .28);
  --panel-divider-glow: rgba(102, 207, 255, .2);
  --panel-hover-background: rgba(196, 239, 255, .13);
  --panel-hover-color: #ffffff;
  --panel-hover-shadow: rgba(104, 209, 255, .25);
  --dialog-panel-background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--prism-a, #ff91d1) 24%, transparent), transparent 40%), radial-gradient(circle at 83% 76%, color-mix(in srgb, var(--prism-b, #61e7df) 19%, transparent), transparent 44%), linear-gradient(130deg, color-mix(in srgb, var(--prism-c, #382a83) 88%, #17243f), color-mix(in srgb, var(--prism-d, #245fae) 62%, #17243f) 52%, color-mix(in srgb, var(--prism-e, #116b80) 72%, #17243f));
  --composer-control-hover: linear-gradient(135deg, var(--prism-d, #657ee8), var(--prism-b, #6adfd8));
  animation: prism-colors 180s ease-in-out infinite;
}
body:not(.theme-dark).chat-theme-live {
  --dialog-panel-background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--prism-a) 28%, transparent), transparent 41%), radial-gradient(circle at 83% 76%, color-mix(in srgb, var(--prism-b) 25%, transparent), transparent 44%), linear-gradient(130deg, #fff9fd, color-mix(in srgb, var(--prism-d) 18%, #f4fbff) 52%, color-mix(in srgb, var(--prism-e) 16%, #f8fbff));
}
.chat-background-live,
.site-background-live {
  background: radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80));
  background-size: 145% 145%;
  animation: prism-colors 180s ease-in-out infinite;
}
body.chat-theme-live .composer textarea {
  border-color: rgba(234, 245, 255, .19);
  background: rgba(5, 15, 35, .42);
  color: #fff;
}
body.chat-theme-live .composer textarea::placeholder { color: rgba(255,255,255,.74); }
.wallpaper-chat-preview.chat-background-live header { background: rgba(12, 28, 55, .78); color: #fff; }
.wallpaper-chat-preview.chat-background-live header small { color: rgba(255,255,255,.74); }

/* Telegram-like day composer: glass overlay with floating field and controls. */
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  flex: none;
  border: 0;
  border-radius: 0;
  background: rgba(245, 250, 254, .24) !important;
  box-shadow: 0 -5px 18px rgba(65, 102, 128, .05) !important;
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer::before {
  background: transparent !important;
  backdrop-filter: none;
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .messages {
  padding-bottom: calc(var(--composer-height, 78px) + 16px);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer textarea {
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 3px 12px rgba(44, 79, 103, .08), inset 0 1px rgba(255, 255, 255, .62);
  backdrop-filter: blur(10px);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer-icon {
  width: 46px;
  height: 46px;
  border-color: rgba(219, 233, 242, .9);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 3px 12px rgba(44, 79, 103, .08), inset 0 1px rgba(255, 255, 255, .62);
  backdrop-filter: blur(10px);
}
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer-tools {
  gap: 6px;
}

/* The unpinned header uses exactly the same glass recipe as the composer overlay. */
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) > .composer,
body:not(.theme-dark) .app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) {
  background-color: rgba(245, 250, 254, .24) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
}
body:not(.theme-dark) .app-shell .chat-panel .chat-head {
  z-index: 7;
  box-shadow: 0 5px 18px rgba(65, 102, 128, .05);
}
body.theme-dark .app-shell .chat-panel .chat-head {
  z-index: 7;
  background: rgba(5, 18, 32, .48) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}
/* Without a pin, the header overlays the conversation so its contents scroll beneath the glass. */
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) {
  position: absolute !important;
  top: 0;
  right: 0;
  left: 0;
  flex: none;
}
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) ~ .chat-body .messages {
  padding-top: calc(var(--chat-head-height, 76px) + 16px);
}
body:not(.theme-dark) .app-shell .chat-panel .chat-head.chat-head--with-pinned {
  background: rgba(248, 252, 255, .96) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-dark .app-shell .chat-panel .chat-head.chat-head--with-pinned {
  background: rgba(7, 20, 35, .96) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) + .message-selection-toolbar {
  padding-top: calc(var(--chat-head-height, 76px) + 8px);
}
/* Channel headers expose the conversation completely; only their controls remain. */
.app-shell .chat-panel .chat-head.chat-head--channel {
  position: absolute !important;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.app-shell .chat-panel .chat-head.chat-head--channel ~ .chat-body .messages {
  padding-top: calc(var(--chat-head-height, 76px) + 16px);
}

/* The jump button must remain above the glass composer at every breakpoint. */
.chat-panel .jump-to-latest {
  bottom: calc(var(--composer-height, 60px) + 16px);
}
.chat-body--channel-viewer .jump-to-latest {
  bottom: 12px;
}

/* Compact chat controls preserve more vertical space for the conversation. */
.app-shell .chat-panel .chat-head { gap: 9px; padding: 8px 12px; }
.app-shell .chat-panel .chat-identity { gap: 9px; }
.app-shell .chat-panel .chat-profile-avatar .avatar,
.app-shell .chat-panel > .chat-head > .avatar { width: 36px; height: 36px; }
.app-shell .chat-panel .chat-head__body span { font-size: 12px; }
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) ~ .chat-body .messages,
.app-shell .chat-panel .chat-head.chat-head--channel ~ .chat-body .messages { padding-top: calc(var(--chat-head-height, 60px) + 12px); }
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) + .message-selection-toolbar { padding-top: calc(var(--chat-head-height, 60px) + 8px); }
.app-shell .chat-panel > .composer { gap: 6px; padding: 8px 12px; }
.app-shell .chat-panel > .composer textarea { min-height: 42px; padding: 9px 15px; border-radius: 22px; }
.app-shell .chat-panel > .composer .composer-icon { width: 40px; height: 40px; }
.app-shell .chat-panel > .composer .composer-send { border-color: rgba(var(--primary-rgb), .16); background: rgba(255,255,255,.5); color: var(--primary-dark); box-shadow: 0 4px 10px rgba(27, 56, 88, .08), inset 0 1px rgba(255,255,255,.34); }
body.theme-dark .app-shell .chat-panel > .composer .composer-send { background: rgba(12, 24, 40, .48); color: var(--primary-dark); box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08); }
.app-shell .chat-panel > .composer .composer-send:hover,
.app-shell .chat-panel > .composer .composer-send:focus-visible { background: rgba(42, 171, 238, .13); color: var(--primary-dark); box-shadow: 0 5px 12px rgba(var(--primary-rgb), .15), inset 0 1px rgba(255,255,255,.42); }
.app-shell .chat-panel > .composer .composer-send svg { width: 21px; height: 21px; filter: none; stroke-width: 2.25; transform: rotate(45deg); }
.media-overlay video { width: min(1100px, 100%); max-width: 100%; max-height: 100%; border-radius: 12px; background: #000; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }

/* Keep both chat bars equally dense and make their icon controls consistent. */
.app-shell .chat-panel .chat-head .chat-head-action,
.app-shell .chat-panel .chat-head .call-button,
.app-shell .chat-panel > .composer .composer-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.app-shell .chat-panel .chat-head .chat-head-action {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
.app-shell .chat-panel > .composer { gap: 5px; padding: 8px 12px; }
.app-shell .chat-panel > .composer textarea { min-height: 38px; padding: 8px 14px; border-radius: 20px; }

/* The pinned bar is an overlay, so it can stay informative without consuming chat space. */
.app-shell .chat-panel .pinned-messages {
  min-height: 46px;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 13px;
}
.app-shell .chat-panel .pinned-messages__content { gap: 1px; padding: 3px 6px; }
.app-shell .chat-panel .pinned-messages__label { font-size: 10px; }
.app-shell .chat-panel .pinned-messages__text { font-size: 12px; line-height: 1.25; }
.app-shell .chat-panel .pinned-messages__next,
.app-shell .chat-panel .pinned-messages__menu { width: 24px; height: 24px; font-size: 16px; }
.app-shell .chat-panel .pinned-messages__menu svg { width: 18px; height: 18px; }

/* RSS photos use the same fullscreen viewer as ordinary chat photos. */
.message-photo-button--rss { position: relative; }
.message-photo-button--rss::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 12, 20, .64);
  color: #fff;
  content: "⤢";
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}

/* A dedicated metadata row keeps timestamps visible without widening short messages. */
.message__bubble--with-meta { padding-bottom: 19px; }
.message__meta {
  position: absolute;
  right: 9px;
  bottom: 6px;
  gap: 2px;
  margin: 0;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.message__delivery-icon,
.message__delivery-icon svg { width: 11px; height: 11px; }

/* Smaller controls keep the chat header and composer light at every viewport width. */
.app-shell .chat-panel .chat-head { gap: 7px; padding: 6px 10px; }
.app-shell .chat-panel .chat-identity { gap: 7px; }
.app-shell .chat-panel .chat-profile-avatar .avatar,
.app-shell .chat-panel > .chat-head > .avatar { width: 32px; height: 32px; }
.app-shell .chat-panel .chat-head .chat-head-action,
.app-shell .chat-panel .chat-head .call-button {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  flex-basis: 32px;
  aspect-ratio: 1;
  border-radius: 50% !important;
}
.app-shell .chat-panel .chat-head .call-button svg,
.app-shell .chat-panel .chat-head .chat-head-action svg { width: 17px; height: 17px; }

/* Header actions use a quieter solid accent instead of the bright gradient. */
.app-shell .chat-panel .chat-head .chat-head-action,
.app-shell .chat-panel .chat-head .call-button {
  border-color: rgba(var(--primary-rgb), .2);
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary-dark);
  box-shadow: none;
}
.app-shell .chat-panel .chat-head .chat-head-action::after,
.app-shell .chat-panel .chat-head .call-button::after { display: none; }
.app-shell .chat-panel .chat-head .chat-head-action:hover,
.app-shell .chat-panel .chat-head .chat-head-action:focus-visible,
.app-shell .chat-panel .chat-head .call-button:hover,
.app-shell .chat-panel .chat-head .call-button:focus-visible {
  border-color: rgba(var(--primary-rgb), .45);
  background: rgba(var(--primary-rgb), .2);
  color: var(--primary-dark);
  box-shadow: none;
  transform: none;
}

/* Tap either picture during a call to bring it to the foreground. */
.call-videos__local, .call-videos__remote { cursor: pointer; }
.call-videos.primary-local .call-videos__local { position: static; width: 100% !important; height: 100% !important; min-height: 340px !important; padding: 8px; border-radius: 22px !important; background: #07111d !important; box-shadow: none; }
.call-videos.primary-local .call-videos__remote { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: min(32%, 190px) !important; height: min(34%, 150px) !important; min-height: 104px !important; padding: 5px; border-radius: 20px !important; background: rgba(6, 17, 29, .92) !important; box-shadow: 0 14px 32px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.14); }
@media (max-width: 760px) {
  .call-videos.primary-local .call-videos__local { min-height: min(52dvh, 380px) !important; }
  .call-videos.primary-local .call-videos__remote { width: min(32%, 150px) !important; height: min(34%, 124px) !important; }
}

.app-shell .chat-panel > .composer {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 10px;
}
.app-shell .chat-panel > .composer .composer-input { position: relative; min-width: 0; }
.app-shell .chat-panel > .composer textarea {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 54px 7px 13px;
  border-radius: 18px;
}
.app-shell .chat-panel > .composer .composer-icon {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  flex: 0 0 38px;
  aspect-ratio: 1;
  border-radius: 50% !important;
}
.app-shell .chat-panel > .composer .composer-icon svg { width: 19px; height: 19px; }
.app-shell .chat-panel > .composer .composer-icon--emoji {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 1;
  transform: translateY(-50%);
}
.app-shell .chat-panel > .composer .composer-icon--emoji:hover,
.app-shell .chat-panel > .composer .composer-icon--emoji:focus-visible { transform: translateY(-50%) rotate(-8deg) scale(1.04); }
.app-shell .chat-panel > .composer .composer-tools {
  position: relative;
  width: 86px;
  height: 38px;
  flex: 0 0 86px;
  flex-wrap: nowrap;
  gap: 0;
  transition: width .2s ease, flex-basis .2s ease;
}
.app-shell .chat-panel > .composer .composer-tools .composer-icon {
  position: absolute;
  top: 0;
  transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s;
}
.app-shell .chat-panel > .composer .composer-tools [data-record="circle"] { left: 0; }
.app-shell .chat-panel > .composer .composer-tools [data-record="voice"],
.app-shell .chat-panel > .composer .composer-tools .composer-send { right: 0; }
.app-shell .chat-panel > .composer .composer-tools .composer-send {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.72);
}
.app-shell .chat-panel > .composer .composer-tools--with-text {
  width: 38px;
  flex-basis: 38px;
}
.app-shell .chat-panel > .composer .composer-tools--with-text [data-record] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.72);
}
.app-shell .chat-panel > .composer .composer-tools--with-text .composer-send {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: .05s, 0s, 0s;
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .chat-panel > .composer .composer-tools,
  .app-shell .chat-panel > .composer .composer-tools .composer-icon { transition: none; }
}
.app-shell .chat-panel > .composer .emoji-panel { grid-column: 1 / -1; }

/* Profile hero starts on a single visual baseline instead of pushing the avatar down. */
.profile-screen__content { margin-top: 14px; }
.profile-hero { align-items: flex-start; padding: 16px; }
.profile-avatar-button { flex: 0 0 auto; align-self: flex-start; }
.profile-hero h1 { margin-top: 2px; }

/* The pending item stays visible long enough to confirm that it is being sent. */
.message--pending { animation: message-enter .28s ease-out both; }
.message--pending:not(.message--failed) .message__bubble { animation: message-pending-pulse 1.15s ease-in-out infinite; }
@keyframes message-pending-pulse {
  50% { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(var(--primary-rgb), .2); }
}

/* Repost attribution is a real control when the original author is available. */
.message__forwarded--link { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.message__forwarded--link:hover, .message__forwarded--link:focus-visible { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.share-comment { display: grid; gap: 6px; margin: 0 0 12px; color: var(--text); font-size: 13px; font-weight: 750; }
.share-comment textarea { min-height: 56px; resize: vertical; }

/* A dedicated card prevents native audio controls from blending into the chat surface. */
.message--audio .message__bubble { width: min(320px, 100%); max-width: min(320px, 100%); padding: 0; }
.message-voice { display: flex; min-width: 230px; gap: 8px; align-items: center; padding: 8px 10px 24px; border-radius: 18px; background: var(--own-bubble-background, var(--other-bubble)); box-shadow: 0 4px 16px rgba(26, 42, 58, .08); }
.message:not(.own) .message-voice { background: var(--other-bubble); }
.message-voice__icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(var(--primary-rgb), .16); color: var(--primary-dark); font-size: 16px; }
.message-audio { min-width: 0; flex: 1; width: 100%; height: 32px; }
.message--audio .message__meta { color: color-mix(in srgb, currentColor 62%, transparent); }

/* The text field can be shorter while the surrounding controls remain easy to tap. */
.app-shell .chat-panel > .composer textarea { min-height: 30px; padding: 5px 38px 5px 11px; border-radius: 16px; }
.app-shell .chat-panel > .composer .composer-icon--emoji { width: 30px; min-width: 30px; max-width: 30px; height: 30px; min-height: 30px; max-height: 30px; right: 2px; }

/* Short one-line messages retain their time inside the bubble, on the right. */
.message__bubble--inline-meta { padding-bottom: 7px; }
.message__bubble--inline-meta .message__meta {
  position: static;
  display: inline-flex;
  float: none;
  margin: 0 0 0 7px;
  vertical-align: baseline;
}
.message__bubble--inline-meta .message__text { display: inline; }
.message__bubble--inline-meta .message__meta time { vertical-align: baseline; }

/* The final composer rule wins over themed defaults and keeps the field comfortable. */
.app-shell .chat-panel > .composer textarea,
body:not(.theme-dark) .app-shell .chat-panel:not(.chat-panel--channel-themed) .composer textarea {
  min-height: 40px !important;
  height: 40px;
  max-height: 72px;
  padding: 8px 54px 8px 12px;
  border-radius: 18px;
}

/* Voice messages use a custom, touch-seekable player instead of platform controls. */
.message--audio .message__bubble { width: min(350px, 100%); max-width: min(350px, 100%); }
.message-voice { display: grid; min-width: 260px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 9px 18px; border-radius: 16px; background: var(--own-bubble-background, var(--other-bubble)); box-shadow: 0 4px 16px rgba(26, 42, 58, .08); }
.message:not(.own) .message-voice { background: var(--other-bubble); }
.message-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.message-voice__play { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 4px 11px rgba(var(--primary-rgb), .3); line-height: 1; }
.message-voice__play::before { display: none; }
.message-voice__play svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.message-voice__play.is-playing svg { fill: currentColor; stroke: none; }
.message-voice__play:hover, .message-voice__play:focus-visible { background: var(--primary-dark); transform: scale(1.05); }
.message-voice__wave { display: flex; height: 28px; gap: 2px; align-items: center; overflow: hidden; cursor: pointer; touch-action: none; }
.message-voice__wave:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.message-voice__wave i { width: 3px; min-height: 4px; height: var(--voice-level); flex: 1 1 0; border-radius: 999px; background: color-mix(in srgb, currentColor 28%, transparent); opacity: .9; }
.message-voice__wave i.is-played { background: var(--primary-dark); }
.message-voice__duration { color: color-mix(in srgb, currentColor 62%, transparent); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 10px; font-weight: 750; white-space: nowrap; }
.channel-viewer-bar { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(88px, .7fr) minmax(0, 1.8fr); gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 0; background: rgba(245, 250, 254, .24); box-shadow: 0 -5px 18px rgba(65, 102, 128, .05); backdrop-filter: blur(12px) saturate(1.06); -webkit-backdrop-filter: blur(12px) saturate(1.06); }
.channel-viewer-bar button { display: inline-flex; width: 100%; min-height: 40px; gap: 8px; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid rgba(var(--primary-rgb), .14); border-radius: 12px; background: rgba(255, 255, 255, .68); color: var(--primary-dark); box-shadow: inset 0 1px rgba(255, 255, 255, .56); font: inherit; font-size: 13px; font-weight: 750; }
.channel-viewer-bar button:hover, .channel-viewer-bar button:focus-visible { background: rgba(var(--primary-rgb), .2); }
.channel-viewer-bar svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.channel-viewer-bar [data-buy-stars-channel] svg { fill: currentColor; stroke: color-mix(in srgb, currentColor 45%, transparent); }
body.theme-dark .channel-viewer-bar { background: rgba(5, 18, 32, .48); box-shadow: 0 -5px 18px rgba(0, 0, 0, .16); }
body.theme-dark .channel-viewer-bar button { border-color: rgba(196, 231, 248, .16); background: rgba(12, 45, 67, .54); color: var(--dialog-panel-text); box-shadow: inset 0 1px rgba(196, 249, 255, .08); }
body:not(.theme-dark) .app-shell .chat-panel .chat-body--channel-viewer .messages,
body.theme-dark .app-shell .chat-panel .chat-body--channel-viewer .messages { padding-bottom: calc(var(--channel-viewer-height, 76px) + 16px); }

/* The scroll date must start below an unpinned glass header, not behind it. */
.app-shell .chat-panel .chat-head:not(.chat-head--with-pinned) ~ .chat-body .scroll-date-bubble,
.app-shell .chat-panel .chat-head.chat-head--channel ~ .chat-body .scroll-date-bubble {
  top: calc(var(--chat-head-height, 60px) + 10px);
}

/* Slightly taller bars improve tap targets without hiding the conversation. */
.app-shell .chat-panel .chat-head { gap: 9px; padding: 10px 12px; }
.app-shell .chat-panel .chat-identity { gap: 9px; }
.app-shell .chat-panel .chat-profile-avatar .avatar,
.app-shell .chat-panel > .chat-head > .avatar { width: 36px; height: 36px; }
.app-shell .chat-panel .chat-head .chat-head-action,
.app-shell .chat-panel .chat-head .call-button { width: 32px; min-width: 32px; max-width: 32px; height: 32px; min-height: 32px; max-height: 32px; flex-basis: 32px; }
.app-shell .chat-panel .chat-head .call-button svg,
.app-shell .chat-panel .chat-head .chat-head-action svg { width: 17px; height: 17px; }
.app-shell .chat-panel > .composer { padding: 10px 12px; }
.app-shell .chat-panel > .composer .composer-icon { width: 38px; min-width: 38px; max-width: 38px; height: 38px; min-height: 38px; max-height: 38px; flex-basis: 38px; }

/* The attachment control aligns with the input field's outer padding. */
.app-shell .chat-panel > .composer { grid-template-columns: 38px minmax(0, 1fr) auto; padding-left: 8px; }

/* A video element otherwise keeps an opaque black first frame until playback starts. */
.message--circle .message-circle { background: transparent !important; }
.circle-message:not(.is-ready) .message-circle { opacity: 0; }
.circle-message .message-circle { transition: opacity .16s ease; }

/* A circle remains visually round without a dark message card while its first frame loads. */
body.theme-dark .chat-panel:not(.chat-panel--channel-themed) .message--circle:not(.own) .message__bubble {
  width: auto;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: none) {
  .circle-expand { width: 22px; height: 22px; top: 178px; right: 8px; background: rgba(5, 12, 20, .28); opacity: .28; }
  .circle-expand svg { width: 14px; height: 14px; }
  .circle-message.is-touched .circle-expand, .circle-message:focus-within .circle-expand, .circle-expand:active { opacity: .65; }
}

/* Public requisites page. */
.legal-page { width: min(960px, calc(100vw - 32px)); margin: 0 auto; padding: 30px 0 56px; }
.legal-page__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.legal-page__head .brand { margin: 0; color: inherit; text-decoration: none; }
.legal-page__head .brand b, .legal-page__head .brand span { display: block; }
.legal-page__head .brand span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.legal-page__hero { margin-bottom: 18px; padding: clamp(24px, 5vw, 48px); border: 1px solid rgba(255,255,255,.54); border-radius: 28px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .17), rgba(126, 219, 145, .15)), var(--panel); box-shadow: var(--shadow); }
.legal-page__hero p { margin: 0 0 8px; color: var(--primary-dark); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.legal-page__hero h1 { margin: 0; font-size: clamp(28px, 5vw, 46px); letter-spacing: -.04em; }
.legal-page__hero span { display: block; max-width: 600px; margin-top: 12px; color: var(--muted); line-height: 1.5; }
.legal-page__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.legal-page__card { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow-soft); }
.legal-page__card--wide { grid-column: 1 / -1; }
.legal-page__card h2 { margin: 0 0 14px; font-size: 18px; }
.legal-page__card p { margin: 0; line-height: 1.6; }
.legal-page__card dl { display: grid; gap: 12px; margin: 0; }
.legal-page__card dl div { display: grid; gap: 3px; }
.legal-page__card dt { color: var(--muted); font-size: 12px; font-weight: 750; }
.legal-page__card dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.legal-page__text { white-space: pre-wrap; }
.legal-package-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.legal-package-list div { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--primary-rgb), .09); }
.legal-package-list span { color: var(--primary-dark); font-weight: 850; }
@media (max-width: 640px) { .legal-page { width: min(100% - 24px, 960px); padding-top: 12px; } .legal-page__head { margin-bottom: 18px; } .legal-page__grid { grid-template-columns: 1fr; } .legal-page__card--wide { grid-column: auto; } }

/* Personal night colours must win over the default cyan hover styles. */
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.theme-dark.night-appearance-customized textarea,
body.theme-dark.night-appearance-customized select {
  border-color: rgb(var(--night-outline-rgb) / .38) !important;
  background-color: rgb(var(--night-glow-rgb) / .07) !important;
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .12), 0 4px 12px rgb(var(--night-glow-rgb) / var(--night-glow-low)) !important;
}
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
body.theme-dark.night-appearance-customized textarea:hover,
body.theme-dark.night-appearance-customized select:hover,
body.theme-dark.night-appearance-customized input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
body.theme-dark.night-appearance-customized textarea:focus,
body.theme-dark.night-appearance-customized select:focus {
  border-color: rgb(var(--night-outline-rgb) / .82) !important;
  background-color: rgb(var(--night-glow-rgb) / .16) !important;
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .2), 0 0 12px rgb(var(--night-glow-rgb) / var(--night-glow-medium)), 0 0 25px rgb(var(--night-glow-rgb) / var(--night-glow-low)) !important;
}
body.theme-dark.night-appearance-customized .button,
body.theme-dark.night-appearance-customized .composer-icon,
body.theme-dark.night-appearance-customized .call-button,
body.theme-dark.night-appearance-customized .chat-head-action {
  border-color: rgb(var(--night-outline-rgb) / .34) !important;
  background: rgb(var(--night-glow-rgb) / .1) !important;
  color: var(--night-outline) !important;
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .14), 0 4px 12px rgb(var(--night-glow-rgb) / var(--night-glow-low)) !important;
}
body.theme-dark.night-appearance-customized .button:hover,
body.theme-dark.night-appearance-customized .button:focus-visible,
body.theme-dark.night-appearance-customized .composer-icon:hover,
body.theme-dark.night-appearance-customized .composer-icon:focus-visible,
body.theme-dark.night-appearance-customized .call-button:hover,
body.theme-dark.night-appearance-customized .call-button:focus-visible,
body.theme-dark.night-appearance-customized .chat-head-action:hover,
body.theme-dark.night-appearance-customized .chat-head-action:focus-visible {
  border-color: rgb(var(--night-outline-rgb) / .88) !important;
  background: rgb(var(--night-glow-rgb) / .3) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgb(var(--night-outline-rgb) / .28), 0 0 15px rgb(var(--night-glow-rgb) / var(--night-glow-strong)), 0 0 28px rgb(var(--night-glow-rgb) / var(--night-glow-low)) !important;
}

/* The dark composer participates in the flex layout, so the scroll area must not reserve its height twice. */
body.theme-dark .app-shell .chat-panel:not(.chat-panel--channel-themed) .messages {
  padding-bottom: 16px;
}
body.theme-dark .app-shell .chat-panel .chat-body--channel-viewer .messages {
  padding-bottom: calc(var(--channel-viewer-height, 76px) + 16px);
}
body.theme-dark .chat-panel .jump-to-latest {
  bottom: 12px;
  border-color: rgba(136, 205, 231, .26);
  background: rgba(15, 73, 101, .78);
  color: #d9f3ff;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .24), inset 0 1px rgba(220, 250, 255, .14);
}
body.theme-dark .chat-body--channel-viewer .jump-to-latest { bottom: 12px; }
body.theme-dark .chat-panel .jump-to-latest:hover,
body.theme-dark .chat-panel .jump-to-latest:focus-visible {
  background: rgba(19, 94, 126, .9);
  box-shadow: 0 7px 15px rgba(0, 0, 0, .3), inset 0 1px rgba(220, 250, 255, .18);
}

/* Live activity replaces the direct-chat username without moving the header. */
.chat-head__body .chat-activity {
  min-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head__body .chat-activity.is-active {
  color: var(--primary-dark) !important;
  font-weight: 750;
  animation: chat-activity-breathe 1.25s ease-in-out infinite;
}
.chat-head__body .chat-activity.is-active::after {
  display: inline-block;
  width: 1.1em;
  content: "...";
  animation: chat-activity-dots 1.15s steps(4, end) infinite;
}
@keyframes chat-activity-breathe {
  50% { opacity: .58; transform: translateY(-.5px); }
}
@keyframes chat-activity-dots {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@media (max-width: 760px) {
  .chat-head__body .chat-activity.is-active { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-head__body .chat-activity.is-active,
  .chat-head__body .chat-activity.is-active::after { animation: none; }
}

/* Each built-in chat wallpaper has a quiet, original line-art pattern. */
.chat-background-mint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%233d9073' stroke-opacity='.24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m29 20-18 35h12L8 83h16L5 119h49L35 83h16L36 55h12L29 20Zm0 99v15M112 16 94 52h12L91 80h16L88 116h49l-19-36h16l-15-28h12l-9-36Zm0 100v15M217 127l-18 35h12l-15 28h16l-19 36h49l-19-36h16l-15-28h12l-19-35Zm0 99v15'/%3E%3Cpath d='M63 166c11-8 24-7 32 3l11-2 8 8-10 3c-4 10-16 16-28 12l-7 9-1-13c-7-4-10-12-5-20Zm4 11 7 1m2-18-3-9m8 8 6-8M152 59c12-11 28-10 38 2l14 2-11 7c-4 12-19 20-33 14l-10 9 1-14c-7-6-7-14 1-20Zm4 16 7 1m4-23-2-10m9 9 7-8M163 210c5-14 19-19 31-13 8 4 11 13 8 21-5 12-19 16-29 9l-10 1 6-9c-5-3-7-5-6-9Zm17 4 2 1m4-11 2-6m-13 6-4-6'/%3E%3Cpath d='M27 206c4-12 16-18 27-13 8 4 11 13 8 21-4 11-16 15-26 9l-8 7 1-11c-5-3-5-8-2-13Zm16 7 2 1m4-11 2-7m-13 7-4-6M221 38l4 8 9 2-7 6 1 9-7-5-8 5 2-9-7-6 9-2 4-8Zm-99 157 3 6 7 2-5 5 1 7-6-4-6 4 1-7-5-5 7-2 3-6Z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae 0%, #a4fb8f 49%, #8cf79a 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-aurora { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d9f8ff' stroke-opacity='.28' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='48' r='15'/%3E%3Cpath d='M33 48h30M48 33v30M118 26c13-10 29-8 38 4-10 12-26 14-38 4 7-3 7-5 0-8ZM206 48l5 11 12 5-12 5-5 12-5-12-12-5 12-5 5-11ZM42 150l4 8 9 3-7 6 1 10-7-5-8 5 2-10-8-6 9-3 5-8ZM175 152a20 20 0 1 0 18 29 24 24 0 1 1-18-29ZM111 203c21-19 42-19 63 0s42 19 63 0M17 102c16-14 32-14 48 0s32 14 48 0M84 88l17 9 16-12 15 17 20-8M207 105l15 8 16-11'/%3E%3Ccircle cx='84' cy='88' r='2.5'/%3E%3Ccircle cx='101' cy='97' r='2.5'/%3E%3Ccircle cx='117' cy='85' r='2.5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd 0%, #007cd6 47%, #0c1f89 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-noir { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23a4c7dc' stroke-opacity='.2' stroke-width='1.5'%3E%3Cpath d='M47 42a20 20 0 1 0 18 29A24 24 0 1 1 47 42ZM168 153a17 17 0 1 0 15 25 21 21 0 1 1-15-25Z'/%3E%3Cpath d='m109 32 4 9 9 4-9 4-4 9-4-9-9-4 9-4zM41 174l3 7 7 3-7 3-3 7-3-7-7-3 7-3zM197 55l3 7 7 3-7 3-3 7-3-7-7-3 7-3z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 70% 110% at 8% 47%, rgba(29, 36, 111, .62), transparent 56%), radial-gradient(ellipse 60% 100% at 100% 68%, rgba(10, 71, 78, .62), transparent 61%), linear-gradient(120deg, #092032 0%, #0a032d 46%, #03031c 100%); background-size: 250px 250px, auto, auto, auto; }
.chat-background-cyan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23d9ffff' stroke-opacity='.28' stroke-width='2'%3E%3Cpath d='M16 61c13-15 26-15 39 0s26 15 39 0M126 178c13-15 26-15 39 0s26 15 39 0M150 44c8-9 17-9 25 0s17 9 25 0'/%3E%3Cpath d='M72 130c15-13 31-12 45 1-15 13-31 14-45-1Z'/%3E%3Ccircle cx='88' cy='130' r='2' fill='%23d9ffff'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); background-size: 240px 240px, auto, auto, auto; }
.chat-background-mist { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23eff7ff' stroke-opacity='.25' stroke-width='2'%3E%3Cpath d='M20 62c11-24 40-18 43 2 23-16 46 10 28 28H20c-19-9-13-27 0-30ZM146 171c10-22 36-16 40 2 20-14 42 9 26 26h-66c-18-9-13-25 0-28Z'/%3E%3Cpath d='M38 128h70M118 128h31M33 221h60'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-sunset { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23964f78' stroke-opacity='.2' stroke-width='2'%3E%3Ccircle cx='58' cy='55' r='19'/%3E%3Cpath d='M58 18v12m0 50v12M21 55h12m50 0h12M32 29l9 9m34 34 9 9m0-52-9 9M41 72l-9 9M20 163c24-20 47-20 70 0s47 20 70 0 47-20 70 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); background-size: 240px 240px, auto, auto; }
.chat-background-ocean { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%233e769e' stroke-opacity='.24' stroke-width='2'%3E%3Cpath d='M18 55c17-18 35-18 52 0s35 18 52 0M122 166c17-18 35-18 52 0s35 18 52 0M32 211c17-18 35-18 52 0s35 18 52 0'/%3E%3Cpath d='M163 49c15-12 30-12 43 1-14 13-29 13-43-1Z'/%3E%3Ccircle cx='179' cy='49' r='2' fill='%233e769e'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); background-size: 250px 250px, auto, auto; }
.chat-background-lavender { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%237765aa' stroke-opacity='.23' stroke-width='2'%3E%3Cpath d='M53 38c17 13 17 37 0 50-17-13-17-37 0-50ZM53 63c-14-15-35-10-39 7 15 13 34 8 39-7ZM53 63c14-15 35-10 39 7-15 13-34 8-39-7ZM164 148c17 13 17 37 0 50-17-13-17-37 0-50ZM164 173c-14-15-35-10-39 7 15 13 34 8 39-7ZM164 173c14-15 35-10 39 7-15 13-34 8-39-7Z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); background-size: 240px 240px, auto, auto; }
.chat-background-forest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%233e7965' stroke-opacity='.24' stroke-width='2'%3E%3Cpath d='M45 32c27 12 30 45 8 61-25-11-29-42-8-61ZM53 93l-19 23m19-23 22 16M166 136c27 12 30 45 8 61-25-11-29-42-8-61ZM174 197l-19 23m19-23 22 16'/%3E%3Cpath d='M116 50c13 7 17 21 9 34-15-4-22-19-9-34Z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); background-size: 250px 250px, auto, auto; }
.chat-background-midnight { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d6e7ff' stroke-opacity='.25' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 42 30 16 29-21 24 34 35-14M142 33l28 12 24-17 27 30M25 176l22-18 31 13 27-25 30 15M177 167l18 12 20-14 23 22M33 105c18-17 38-17 56 0M157 104l28-18 23 20M204 216l20-16 21 18'/%3E%3Ccircle cx='20' cy='42' r='3'/%3E%3Ccircle cx='50' cy='58' r='3'/%3E%3Ccircle cx='79' cy='37' r='3'/%3E%3Ccircle cx='103' cy='71' r='3'/%3E%3Ccircle cx='142' cy='33' r='3'/%3E%3Ccircle cx='170' cy='45' r='3'/%3E%3Ccircle cx='194' cy='28' r='3'/%3E%3Cpath d='m113 107 4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9ZM222 70l3 7 8 3-8 3-3 8-3-8-8-3 8-3 3-7ZM129 215c9-11 21-11 30 0-9 11-21 11-30 0Z'/%3E%3Ccircle cx='144' cy='215' r='5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: 260px 260px, auto, auto; }
.chat-background-ember { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23ffe0a5' stroke-opacity='.26' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37 29c-12 17-18 32-7 45-9-2-16 6-11 16 8 15 31 10 27-8 12-14 5-32-9-53ZM159 36c-12 17-18 32-7 45-9-2-16 6-11 16 8 15 31 10 27-8 12-14 5-32-9-53ZM79 149c-12 17-18 32-7 45-9-2-16 6-11 16 8 15 31 10 27-8 12-14 5-32-9-53ZM205 176c-10 14-14 27-5 38-8-2-13 5-9 13 7 12 26 8 23-7 10-12 4-27-9-44ZM113 31l4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9ZM199 113l3 7 8 3-8 3-3 8-3-8-8-3 8-3 3-7ZM36 198c17-14 34-14 51 0s34 14 51 0M127 117c12-11 25-11 37 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); background-size: 250px 250px, auto, auto, auto; }
.chat-background-iris { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23f5dfff' stroke-opacity='.26' stroke-width='2'%3E%3Cpath d='M43 62c18-22 48-22 66 0-18 22-48 22-66 0Z'/%3E%3Ccircle cx='76' cy='62' r='13'/%3E%3Ccircle cx='76' cy='62' r='4' fill='%23f5dfff'/%3E%3Cpath d='M147 165c18-22 48-22 66 0-18 22-48 22-66 0Z'/%3E%3Ccircle cx='180' cy='165' r='13'/%3E%3Ccircle cx='180' cy='165' r='4' fill='%23f5dfff'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); background-size: 250px 250px, auto, auto, auto; }
.chat-background-prism { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23fff5fd' stroke-opacity='.25' stroke-width='1.8'%3E%3Cpath d='m55 29 25 24-9 35-33 11-24-25 9-35zM175 132l30 21-4 37-34 16-30-22 4-37zM51 183l17 13-2 22-20 9-17-13 2-22z'/%3E%3Cpath d='m80 53-42 46m129 54-30 31m-69 12-39 22'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 260px 260px, 145% 145%, 145% 145%, 145% 145%; }
.chat-background-live { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23f5fbff' stroke-opacity='.25' stroke-width='1.8'%3E%3Cpath d='M25 42h55c10 0 18 8 18 18v16c0 10-8 18-18 18H52l-17 14 4-14h-14c-10 0-18-8-18-18V60c0-10 8-18 18-18ZM151 143h61c10 0 18 8 18 18v16c0 10-8 18-18 18h-21l-16 14 3-14h-27c-10 0-18-8-18-18v-16c0-10 8-18 18-18Z'/%3E%3Cpath d='M30 65h45M157 166h48M115 38l4 9 9 4-9 4-4 9-4-9-9-4 9-4z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 250px 250px, 145% 145%, 145% 145%, 145% 145%; }

/* Detailed illustrations remain deliberately translucent so messages stay legible. */
.chat-background-whatsapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='none' stroke='%235e816f' stroke-opacity='.2' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26h27a9 9 0 0 1 9 9v11a9 9 0 0 1-9 9H34l-8 7 2-7h-8a9 9 0 0 1-9-9V35a9 9 0 0 1 9-9ZM101 19c7-7 18-7 25 0l-6 7 5 5-7 7-5-5-7 6c-7-7-7-18 0-25ZM104 100c13-10 28-10 41 0-13 10-28 10-41 0Z'/%3E%3Ccircle cx='124' cy='100' r='5'/%3E%3Cpath d='m42 107 4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9M80 142c13-14 27-14 40 0M21 141c8-10 17-10 25 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 7px 7px, rgba(94, 129, 111, .18) 0 1.5px, transparent 1.8px), radial-gradient(circle at 23px 17px, rgba(94, 129, 111, .13) 0 1px, transparent 1.3px), linear-gradient(135deg, transparent 46%, rgba(94, 129, 111, .11) 47% 52%, transparent 53%), linear-gradient(45deg, transparent 46%, rgba(94, 129, 111, .08) 47% 52%, transparent 53%); background-size: 170px 170px, 30px 30px, 30px 30px, 30px 30px, 30px 30px; }
.chat-background-mint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%233d9073' stroke-opacity='.26' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 18 8 76h14L4 119h48L34 76h14L28 18Zm0 101v19M119 13 96 73h15L90 122h58l-21-49h15l-23-60Zm0 109v17M213 125l-18 51h13l-18 42h48l-18-42h13l-20-51Zm0 93v18'/%3E%3Cpath d='M59 167c10-9 26-8 36 3l12-2 8 8-11 4c-4 11-17 16-29 11l-8 9 1-13c-8-5-12-13-9-20Zm8 11 7 1m5-19-3-9m9 8 6-8M154 55c13-11 29-10 40 3l14 2-12 8c-4 13-20 20-34 14l-11 9 2-15c-7-6-7-14 1-21Zm8 18 8 1m4-23-2-10m10 9 7-8M165 205c7-14 23-18 34-10 9 6 10 18 3 27-8 10-23 10-31 1l-10 1 6-10c-4-3-5-6-2-9Zm17 8 3 1m4-11 2-7m-13 7-5-6M23 210c5-13 20-18 32-10 9 6 10 18 3 26-8 10-22 10-31 2l-9 6 3-11c-4-4-3-9 2-13ZM221 37c6 6 6 16 0 22-6-6-6-16 0-22Zm0 22v10m-7-3 7 3 7-3M114 170c5-7 12-7 17 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae 0%, #a4fb8f 49%, #8cf79a 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-cyan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23d9ffff' stroke-opacity='.28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 52c14-15 28-15 42 0s28 15 42 0M121 177c14-15 28-15 42 0s28 15 42 0M143 40c16-12 34-11 49 3-16 14-33 15-49-3Z'/%3E%3Ccircle cx='158' cy='40' r='3'/%3E%3Cpath d='M66 125c18-14 37-13 53 2-18 15-36 15-53-2Zm5 0 10-8m-1 16 10-8M184 120c9-15 23-20 39-15-2 17-13 29-30 31M31 193c10-17 26-23 44-17-2 19-15 31-34 33M102 24c2 7 2 13 0 19m-7-13 7 13 7-13'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); background-size: 240px 240px, auto, auto, auto; }
.chat-background-mist { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23eff7ff' stroke-opacity='.27' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 58c11-21 37-18 43 1 19-13 42 7 31 27H21C2 79 4 64 19 58Zm130 107c10-20 35-16 41 1 19-12 40 8 28 26h-69c-18-8-15-22 0-27ZM31 125c22-13 47-13 69 0M142 70c19-12 41-12 60 0M52 224c18-10 38-10 55 0'/%3E%3Cpath d='M92 39c8-11 17-11 25 0M215 40c6-8 13-8 19 0M118 217c6-8 14-8 20 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-sunset { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23964f78' stroke-opacity='.23' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='52' cy='51' r='18'/%3E%3Cpath d='M52 16v11m0 48v11M17 51h11m48 0h11M27 26l8 8m34 34 8 8m0-50-8 8M35 69l-8 8M18 165c22-18 44-18 66 0s44 18 66 0 44-18 66 0M132 41c8-10 16-10 24 0l-12 13-12-13Zm52 76c6-8 13-8 19 0l-9 12-10-12ZM73 210c12-13 25-13 37 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); background-size: 240px 240px, auto, auto; }
.chat-background-ocean { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%233e769e' stroke-opacity='.26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 51c17-17 34-17 51 0s34 17 51 0M121 158c17-17 34-17 51 0s34 17 51 0M24 213c17-17 34-17 51 0s34 17 51 0M153 48c17-13 35-12 50 3-17 15-34 15-50-3Z'/%3E%3Ccircle cx='169' cy='48' r='3'/%3E%3Cpath d='M60 128c17-12 34-11 47 3-17 14-34 14-47-3Zm5 0 9-7m1 15 9-7M199 107c9-14 22-19 37-14-2 16-12 27-28 29M33 86c7-10 16-13 27-10-2 12-10 20-22 21'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); background-size: 250px 250px, auto, auto; }
.chat-background-lavender { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%237765aa' stroke-opacity='.26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M51 30c13 9 17 27 5 40-12-9-16-27-5-40Zm0 40c-12-11-29-7-33 8 13 9 28 5 33-8Zm0 0c12-11 29-7 33 8-13 9-28 5-33-8ZM165 130c13 9 17 27 5 40-12-9-16-27-5-40Zm0 40c-12-11-29-7-33 8 13 9 28 5 33-8Zm0 0c12-11 29-7 33 8-13 9-28 5-33-8ZM113 39c7-10 15-10 22 0l-11 13-11-13ZM73 188c7-10 15-10 22 0l-11 13-11-13'/%3E%3Cpath d='M51 70v23m114 100v22m-35-120c-5 11-4 20 3 28m-65-7c5 10 12 17 22 20'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); background-size: 240px 240px, auto, auto; }
.chat-background-forest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%233e7965' stroke-opacity='.26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M43 29c21 11 28 37 15 55-21-10-28-37-15-55Zm15 55-17 24m17-24 24 14M158 132c21 11 28 37 15 55-21-10-28-37-15-55Zm15 55-17 24m17-24 24 14M112 44c12 6 17 19 11 31-13-5-19-19-11-31ZM78 160c14-9 29-7 39 5-11 13-27 14-39 5Z'/%3E%3Cpath d='M85 170h2m7-9 4-6m-2 18 7 3M206 44c7 10 7 20 0 30-7-10-7-20 0-30Zm0 30v13m-7-7 7 7 7-7'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); background-size: 250px 250px, auto, auto; }
.chat-background-iris { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23f5dfff' stroke-opacity='.27' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37 59c21-24 51-24 72 0-21 24-51 24-72 0Z'/%3E%3Ccircle cx='73' cy='59' r='14'/%3E%3Ccircle cx='73' cy='59' r='5'/%3E%3Cpath d='m73 38 3 8m9-3-6 7m10 8-9 1m5 11-7-5m-5 9-1-9m-10 5 6-7m-10-6 9-1m-5-11 7 5M143 161c21-24 51-24 72 0-21 24-51 24-72 0Z'/%3E%3Ccircle cx='179' cy='161' r='14'/%3E%3Ccircle cx='179' cy='161' r='5'/%3E%3Cpath d='m179 140 3 8m9-3-6 7m10 8-9 1m5 11-7-5m-5 9-1-9m-10 5 6-7m-10-6 9-1m-5-11 7 5M121 36c6-8 13-8 19 0l-9 12-10-12M39 192c7-9 15-9 22 0l-11 13-11-13'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); background-size: 250px 250px, auto, auto, auto; }
.chat-background-prism { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23fff5fd' stroke-opacity='.27' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m49 23 29 26-9 38-36 12-27-28 10-37 33-11Zm0 0 20 64m9-38-45 22M174 127l33 24-5 41-38 17-33-25 5-40 38-17Zm0 0-10 65m43-41-71 33M49 177l19 14-3 25-23 10-20-15 3-25 24-9Z'/%3E%3Ccircle cx='116' cy='37' r='5'/%3E%3Ccircle cx='227' cy='79' r='4'/%3E%3Cpath d='m121 113 4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 260px 260px, 145% 145%, 145% 145%, 145% 145%; }
.chat-background-live { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23f5fbff' stroke-opacity='.27' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 39h58c11 0 20 9 20 20v17c0 11-9 20-20 20H50L34 109l4-13H18c-11 0-20-9-20-20V59c0-11 9-20 20-20ZM147 139h64c11 0 20 9 20 20v17c0 11-9 20-20 20h-25l-16 13 4-13h-27c-11 0-20-9-20-20v-17c0-11 9-20 20-20Z'/%3E%3Cpath d='M31 62h48m-48 12h30M159 162h50m-50 12h35M118 34l4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9M107 216c13-12 27-12 40 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 250px 250px, 145% 145%, 145% 145%, 145% 145%; }
.chat-background-aurora { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d9f8ff' stroke-opacity='.29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='47' cy='47' r='15'/%3E%3Cpath d='M32 47h30M47 32v30M111 23c15-11 32-8 42 6-12 14-29 16-42 6 8-4 8-8 0-12ZM202 45l7 14 15 7-15 7-7 15-7-15-15-7 15-7 7-14ZM34 151l5 11 12 5-10 8 2 13-11-7-11 7 2-13-10-8 12-5 5-11ZM170 147a20 20 0 1 0 18 29 24 24 0 1 1-18-29ZM105 203c20-18 41-18 61 0s41 18 61 0M14 104c16-14 32-14 48 0s32 14 48 0M80 87l16 9 17-12 16 17 19-8M204 107l15 8 16-11M128 128c6-8 13-8 19 0l-9 12-10-12'/%3E%3Ccircle cx='80' cy='87' r='2.5'/%3E%3Ccircle cx='96' cy='96' r='2.5'/%3E%3Ccircle cx='113' cy='84' r='2.5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd 0%, #007cd6 47%, #0c1f89 100%); background-size: 260px 260px, auto, auto, auto; }
.chat-background-midnight { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d6e7ff' stroke-opacity='.27' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 40 31 17 30-22 25 35 35-14M140 31l29 14 25-18 28 31M23 175l23-19 31 14 28-26 31 16M175 166l19 13 21-15 24 23M32 105c18-17 38-17 56 0M155 104l29-18 24 21M202 216l20-16 22 18'/%3E%3Ccircle cx='18' cy='40' r='3'/%3E%3Ccircle cx='49' cy='57' r='3'/%3E%3Ccircle cx='79' cy='35' r='3'/%3E%3Ccircle cx='104' cy='70' r='3'/%3E%3Ccircle cx='140' cy='31' r='3'/%3E%3Ccircle cx='169' cy='45' r='3'/%3E%3Ccircle cx='194' cy='27' r='3'/%3E%3Cpath d='m112 107 4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9ZM221 69l3 7 8 3-8 3-3 8-3-8-8-3 8-3 3-7ZM127 214c10-12 22-12 32 0-10 12-22 12-32 0Z'/%3E%3Ccircle cx='143' cy='214' r='5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: 260px 260px, auto, auto; }
.chat-background-ember { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cg fill='none' stroke='%23ffe0a5' stroke-opacity='.28' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37 27c-13 17-19 34-8 48-10-2-17 7-11 18 8 16 32 10 28-9 13-15 5-35-9-57ZM157 34c-13 17-19 34-8 48-10-2-17 7-11 18 8 16 32 10 28-9 13-15 5-35-9-57ZM78 147c-13 17-19 34-8 48-10-2-17 7-11 18 8 16 32 10 28-9 13-15 5-35-9-57ZM203 174c-10 15-15 29-5 40-8-2-14 5-9 14 7 13 27 9 24-8 10-12 4-29-10-46ZM112 30l4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9ZM198 112l3 7 8 3-8 3-3 8-3-8-8-3 8-3 3-7ZM33 199c18-15 36-15 54 0s36 15 54 0M125 117c13-11 26-11 39 0M202 51c7-9 15-9 22 0'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); background-size: 250px 250px, auto, auto, auto; }

/* A simple, varied wallpaper set: geometry, sky, emoji and Chat-Pro lettering. */
.chat-background-whatsapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%235e816f' stroke-opacity='.2' stroke-width='1.6'%3E%3Ccircle cx='30' cy='34' r='13'/%3E%3Crect x='92' y='18' width='39' height='24' rx='3'/%3E%3Crect x='25' y='111' width='28' height='38' rx='3'/%3E%3Ccircle cx='123' cy='125' r='22'/%3E%3Cpath d='M65 74h36v25H65zM11 82h19m116 0h22M75 164h42'/%3E%3C/g%3E%3C/svg%3E"), #e5ddd5; background-size: 180px 180px, auto; }
.chat-background-mint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%233d9073' stroke-opacity='.22' stroke-width='1.7'%3E%3Ccircle cx='31' cy='35' r='18'/%3E%3Crect x='102' y='20' width='48' height='28' rx='4'/%3E%3Crect x='23' y='118' width='35' height='43' rx='4'/%3E%3Ccircle cx='133' cy='132' r='24'/%3E%3Cpath d='M75 77h39v29H75zM9 90h26m116 0h31M79 174h48'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae 0%, #a4fb8f 49%, #8cf79a 100%); background-size: 190px 190px, auto, auto, auto; }
.chat-background-cyan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='185' height='185' viewBox='0 0 185 185'%3E%3Cg fill='none' stroke='%23d9ffff' stroke-opacity='.23' stroke-width='1.7'%3E%3Crect x='22' y='24' width='34' height='34' rx='4'/%3E%3Ccircle cx='126' cy='37' r='20'/%3E%3Crect x='95' y='106' width='48' height='31' rx='4'/%3E%3Ccircle cx='37' cy='138' r='16'/%3E%3Cpath d='M72 75h38v27H72zM11 90h24m117 0h23M68 168h51'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); background-size: 185px 185px, auto, auto, auto; }
.chat-background-mist { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23eff7ff' stroke-opacity='.24' stroke-width='1.5'%3E%3Cpath d='M18 35h76M126 35h96M39 80h142M12 127h62M102 127h118M29 174h104M161 174h63M83 219h128'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); background-size: 240px 240px, auto, auto, auto; }
.chat-background-aurora, .chat-background-ocean, .chat-background-lavender, .chat-background-midnight { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%23f4f7ff' stroke-opacity='.25' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 23a21 21 0 1 0 19 30A25 25 0 1 1 42 23ZM156 119a17 17 0 1 0 15 24 21 21 0 1 1-15-24ZM22 167l18 9 17-13 17 20 22-9M100 43l16 9 17-12 15 18 20-8'/%3E%3Ccircle cx='22' cy='167' r='2.5'/%3E%3Ccircle cx='40' cy='176' r='2.5'/%3E%3Ccircle cx='57' cy='163' r='2.5'/%3E%3Ccircle cx='74' cy='183' r='2.5'/%3E%3Ccircle cx='100' cy='43' r='2.5'/%3E%3Ccircle cx='116' cy='52' r='2.5'/%3E%3Ccircle cx='133' cy='40' r='2.5'/%3E%3Cpath d='m188 34 4 9 10 4-10 4-4 10-4-10-10-4 10-4 4-9ZM102 113l3 7 8 3-8 3-3 8-3-8-8-3 8-3 3-7Z'/%3E%3C/g%3E%3C/svg%3E"), var(--wallpaper-base, transparent); }
.chat-background-aurora { --wallpaper-base: radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd 0%, #007cd6 47%, #0c1f89 100%); background-size: 230px 230px, auto, auto, auto; }
.chat-background-ocean { --wallpaper-base: radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); background-size: 230px 230px, auto, auto; }
.chat-background-lavender { --wallpaper-base: radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); background-size: 230px 230px, auto, auto; }
.chat-background-midnight { --wallpaper-base: radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: 230px 230px, auto, auto; }
.chat-background-sunset, .chat-background-forest, .chat-background-ember, .chat-background-iris { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='%23fff' fill-opacity='.28' font-family='Arial, sans-serif'%3E%3Ctext x='18' y='45' font-size='27'%3E%26%23x1F60A;%3C/text%3E%3Ctext x='123' y='38' font-size='22'%3E%26%23x1F680;%3C/text%3E%3Ctext x='71' y='103' font-size='31'%3E%26%23x1F31F;%3C/text%3E%3Ctext x='157' y='125' font-size='26'%3E%26%23x1F389;%3C/text%3E%3Ctext x='24' y='181' font-size='24'%3E%26%23x1F60E;%3C/text%3E%3Ctext x='105' y='181' font-size='30'%3E%26%23x1F525;%3C/text%3E%3C/g%3E%3C/svg%3E"), var(--wallpaper-base, transparent); }
.chat-background-sunset { --wallpaper-base: radial-gradient(circle at 15% 20%, rgba(255, 219, 159, .92), transparent 36%), linear-gradient(135deg, #ffdad0, #f0b4c8 52%, #b79ad8); background-size: 210px 210px, auto, auto; }
.chat-background-forest { --wallpaper-base: radial-gradient(circle at 80% 17%, rgba(221, 247, 179, .78), transparent 32%), linear-gradient(135deg, #cfe7cf, #9ccab5 52%, #79a997); background-size: 210px 210px, auto, auto; }
.chat-background-ember { --wallpaper-base: radial-gradient(ellipse 70% 80% at 8% 90%, rgba(255, 166, 81, .9), transparent 55%), radial-gradient(ellipse 70% 85% at 94% 0%, rgba(255, 92, 112, .7), transparent 54%), linear-gradient(135deg, #4b193f, #a63d4c 52%, #f08b5d); background-size: 210px 210px, auto, auto, auto; }
.chat-background-iris { --wallpaper-base: radial-gradient(ellipse 75% 100% at 9% 12%, rgba(153, 109, 255, .9), transparent 57%), radial-gradient(ellipse 70% 90% at 95% 86%, rgba(255, 156, 218, .76), transparent 58%), linear-gradient(135deg, #30226f, #7045b4 51%, #b46cbe); background-size: 210px 210px, auto, auto, auto; }
.chat-background-prism, .chat-background-live { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='230' viewBox='0 0 280 230'%3E%3Cg fill='%23fff' fill-opacity='.25' font-family='Arial, sans-serif' font-weight='700'%3E%3Ctext x='12' y='34' font-size='15'%3EChat-Pro%3C/text%3E%3Ctext x='124' y='57' font-size='28'%3EChat-Pro%3C/text%3E%3Ctext x='20' y='112' font-size='22'%3EChat-Pro%3C/text%3E%3Ctext x='164' y='129' font-size='13'%3EChat-Pro%3C/text%3E%3Ctext x='73' y='179' font-size='33'%3EChat-Pro%3C/text%3E%3Ctext x='198' y='210' font-size='18'%3EChat-Pro%3C/text%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 280px 230px, 145% 145%, 145% 145%, 145% 145%; }

/* Requested refinements for the simple wallpaper set. */
.chat-background-mist { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23eff7ff' stroke-opacity='.24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 35h76M126 35h96M39 80h142M12 127h62M102 127h118M29 174h104M161 174h63M83 219h128M18 57c8-15 28-13 32 1 15-10 32 6 23 20H18C4 73 7 62 18 57ZM144 143c7-14 25-11 29 1 14-9 30 6 21 19h-50c-13-6-11-15 0-20Z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); background-size: 240px 240px, auto, auto, auto; }
.chat-background-cyan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23d9ffff' stroke-opacity='.28' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='45' cy='45' r='19'/%3E%3Cpath d='M30 41c10-8 20-8 30 0M38 55c8 5 16 5 24 0M143 36c19-12 40-10 57 4-18 15-38 16-57 4Zm9 0 39 9m-20-20-8 29M225 24l7 14 15 7-15 7-7 15-7-15-15-7 15-7 7-14ZM24 137l11-27 10 13 19-3-13 15 6 20-19-9-18 10 6-19-13-15 20 3 11-15ZM116 116c12-15 28-20 45-15l-9 13 11 9-15 16-10-9-11 13c-13-10-16-19-11-27ZM192 132c12-11 28-11 39 1l-9 10 8 9-12 11-8-9-10 9c-11-11-11-22-8-31ZM50 221c18-16 37-16 55 0M142 222l17 8 16-12 15 17 20-8M83 174l15 8 16-11 14 17 19-8'/%3E%3Ccircle cx='142' cy='222' r='2.5'/%3E%3Ccircle cx='159' cy='230' r='2.5'/%3E%3Ccircle cx='175' cy='218' r='2.5'/%3E%3Ccircle cx='83' cy='174' r='2.5'/%3E%3Ccircle cx='98' cy='182' r='2.5'/%3E%3Ccircle cx='114' cy='171' r='2.5'/%3E%3Cpath d='M223 196c4-11 14-17 26-15-1 13-10 23-22 25M42 251c4-10 13-15 24-13-1 12-9 20-20 22'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); background-size: 280px 280px, auto, auto, auto; }
.chat-background-ocean { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%233e769e' stroke-opacity='.27' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='43' cy='42' r='17'/%3E%3Cpath d='M43 15v10m0 34v10M16 42h10m34 0h10M25 24l7 7m22 22 7 7m0-36-7 7M32 54l-7 7M15 138c17-16 34-16 51 0s34 16 51 0 34-16 51 0 34 16 51 0M19 189c15-14 30-14 45 0s30 14 45 0 30-14 45 0 30 14 45 0M151 35l5 11 12 2-9 8 2 12-10-6-11 6 3-12-9-8 12-2 5-11ZM198 92l4 9 10 2-7 7 1 10-8-5-9 5 2-10-8-7 10-2 5-9ZM93 92l4 9 10 2-7 7 1 10-8-5-9 5 2-10-8-7 10-2 5-9Z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); background-size: 230px 230px, auto, auto; }
.chat-background-sunset, .chat-background-forest, .chat-background-ember, .chat-background-iris { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23fff' fill-opacity='.3' font-family='Arial, sans-serif'%3E%3Ctext x='12' y='31' font-size='20'%3E%26%23x1F60A;%3C/text%3E%3Ctext x='65' y='28' font-size='17'%3E%26%23x1F680;%3C/text%3E%3Ctext x='117' y='34' font-size='21'%3E%26%23x1F31F;%3C/text%3E%3Ctext x='171' y='29' font-size='18'%3E%26%23x1F389;%3C/text%3E%3Ctext x='29' y='76' font-size='18'%3E%26%23x1F60E;%3C/text%3E%3Ctext x='81' y='82' font-size='22'%3E%26%23x1F525;%3C/text%3E%3Ctext x='142' y='78' font-size='18'%3E%26%23x1F49C;%3C/text%3E%3Ctext x='194' y='82' font-size='20'%3E%26%23x1F44B;%3C/text%3E%3Ctext x='13' y='129' font-size='18'%3E%26%23x1F60D;%3C/text%3E%3Ctext x='65' y='132' font-size='21'%3E%26%23x1F3B6;%3C/text%3E%3Ctext x='118' y='127' font-size='18'%3E%26%23x1F680;%3C/text%3E%3Ctext x='166' y='134' font-size='22'%3E%26%23x1F31F;%3C/text%3E%3Ctext x='32' y='183' font-size='22'%3E%26%23x1F389;%3C/text%3E%3Ctext x='89' y='180' font-size='18'%3E%26%23x1F60A;%3C/text%3E%3Ctext x='139' y='186' font-size='20'%3E%26%23x1F525;%3C/text%3E%3Ctext x='194' y='181' font-size='17'%3E%26%23x1F60E;%3C/text%3E%3Ctext x='15' y='226' font-size='19'%3E%26%23x1F44B;%3C/text%3E%3Ctext x='69' y='229' font-size='22'%3E%26%23x1F49C;%3C/text%3E%3Ctext x='127' y='224' font-size='18'%3E%26%23x1F3B6;%3C/text%3E%3Ctext x='182' y='229' font-size='21'%3E%26%23x1F60D;%3C/text%3E%3C/g%3E%3C/svg%3E"), var(--wallpaper-base, transparent); }
.chat-background-prism, .chat-background-live { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='210' viewBox='0 0 250 210'%3E%3Cg fill='%23fff' fill-opacity='.25' font-family='Arial, sans-serif' font-weight='700'%3E%3Ctext x='10' y='25' font-size='10'%3EChat-Pro%3C/text%3E%3Ctext x='78' y='42' font-size='15'%3EChat-Pro%3C/text%3E%3Ctext x='169' y='30' font-size='11'%3EChat-Pro%3C/text%3E%3Ctext x='20' y='81' font-size='13'%3EChat-Pro%3C/text%3E%3Ctext x='121' y='92' font-size='9'%3EChat-Pro%3C/text%3E%3Ctext x='175' y='111' font-size='16'%3EChat-Pro%3C/text%3E%3Ctext x='43' y='140' font-size='11'%3EChat-Pro%3C/text%3E%3Ctext x='102' y='157' font-size='14'%3EChat-Pro%3C/text%3E%3Ctext x='189' y='169' font-size='10'%3EChat-Pro%3C/text%3E%3Ctext x='14' y='197' font-size='15'%3EChat-Pro%3C/text%3E%3Ctext x='139' y='202' font-size='11'%3EChat-Pro%3C/text%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 250px 210px, 145% 145%, 145% 145%, 145% 145%; }

/* Keep only the emoji, Night Velvet, and Chat-Pro lettering patterns. */
.chat-background-whatsapp { background-color: #e5ddd5; background-image: none; background-size: auto; }
.chat-background-mint { background-image: radial-gradient(ellipse 72% 100% at -12% 26%, rgba(227, 255, 150, .92), transparent 62%), radial-gradient(ellipse 90% 75% at 86% 5%, rgba(132, 255, 161, .74), transparent 60%), linear-gradient(120deg, #caffae 0%, #a4fb8f 49%, #8cf79a 100%); background-size: auto; }
.chat-background-aurora { background-image: radial-gradient(ellipse 74% 100% at -7% 63%, rgba(255, 55, 184, .84), transparent 51%), radial-gradient(ellipse 64% 82% at 52% 25%, rgba(0, 189, 255, .76), transparent 52%), linear-gradient(125deg, #a82cbd 0%, #007cd6 47%, #0c1f89 100%); background-size: auto; }
.chat-background-cyan { background-image: radial-gradient(ellipse 64% 120% at 100% 50%, rgba(0, 255, 220, .77), transparent 50%), radial-gradient(ellipse 54% 105% at 18% 54%, rgba(20, 205, 250, .72), transparent 59%), linear-gradient(105deg, #0b9bed 0%, #0952f5 50%, #05c8df 100%); background-size: auto; }
.chat-background-mist { background-image: radial-gradient(ellipse 100% 95% at 0% 100%, rgba(236, 181, 230, .68), transparent 58%), radial-gradient(ellipse 80% 94% at 73% 6%, rgba(118, 60, 255, .66), transparent 60%), linear-gradient(160deg, #2856aa 0%, #527797 51%, #a0a58d 100%); background-size: auto; }
.chat-background-ocean { background-image: radial-gradient(circle at 88% 12%, rgba(177, 243, 255, .8), transparent 30%), linear-gradient(135deg, #b5e9f3, #8bc8e8 48%, #7295d8); background-size: auto; }
.chat-background-lavender { background-image: radial-gradient(circle at 18% 85%, rgba(255, 232, 255, .8), transparent 34%), linear-gradient(135deg, #efe0ff, #cbb9eb 50%, #a6aadf); background-size: auto; }
.chat-background-midnight { background-image: radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: auto; }
.chat-background-prism, .chat-background-live { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='190' viewBox='0 0 220 190'%3E%3Cg fill='%23fff' fill-opacity='.24' font-family='Arial, sans-serif' font-weight='700'%3E%3Ctext x='9' y='18' font-size='5'%3EChat-Pro%3C/text%3E%3Ctext x='57' y='31' font-size='7'%3EChat-Pro%3C/text%3E%3Ctext x='143' y='19' font-size='6'%3EChat-Pro%3C/text%3E%3Ctext x='18' y='66' font-size='7'%3EChat-Pro%3C/text%3E%3Ctext x='103' y='76' font-size='5'%3EChat-Pro%3C/text%3E%3Ctext x='157' y='91' font-size='8'%3EChat-Pro%3C/text%3E%3Ctext x='37' y='121' font-size='6'%3EChat-Pro%3C/text%3E%3Ctext x='91' y='139' font-size='7'%3EChat-Pro%3C/text%3E%3Ctext x='173' y='151' font-size='5'%3EChat-Pro%3C/text%3E%3Ctext x='12' y='177' font-size='8'%3EChat-Pro%3C/text%3E%3Ctext x='126' y='183' font-size='6'%3EChat-Pro%3C/text%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 18% 22%, var(--prism-a, #ff91d1) 0 8%, transparent 36%), radial-gradient(circle at 83% 76%, var(--prism-b, #61e7df) 0 8%, transparent 40%), linear-gradient(130deg, var(--prism-c, #382a83), var(--prism-d, #245fae) 52%, var(--prism-e, #116b80)); background-size: 220px 190px, 145% 145%, 145% 145%, 145% 145%; }

/* Smaller emoji with deliberately mixed sizes. */
.chat-background-sunset, .chat-background-forest, .chat-background-ember, .chat-background-iris { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23fff' fill-opacity='.3' font-family='Arial, sans-serif'%3E%3Ctext x='12' y='31' font-size='10'%3E%26%23x1F60A;%3C/text%3E%3Ctext x='65' y='28' font-size='14'%3E%26%23x1F680;%3C/text%3E%3Ctext x='117' y='34' font-size='11'%3E%26%23x1F31F;%3C/text%3E%3Ctext x='171' y='29' font-size='15'%3E%26%23x1F389;%3C/text%3E%3Ctext x='29' y='76' font-size='12'%3E%26%23x1F60E;%3C/text%3E%3Ctext x='81' y='82' font-size='9'%3E%26%23x1F525;%3C/text%3E%3Ctext x='142' y='78' font-size='14'%3E%26%23x1F49C;%3C/text%3E%3Ctext x='194' y='82' font-size='10'%3E%26%23x1F44B;%3C/text%3E%3Ctext x='13' y='129' font-size='15'%3E%26%23x1F60D;%3C/text%3E%3Ctext x='65' y='132' font-size='11'%3E%26%23x1F3B6;%3C/text%3E%3Ctext x='118' y='127' font-size='13'%3E%26%23x1F680;%3C/text%3E%3Ctext x='166' y='134' font-size='9'%3E%26%23x1F31F;%3C/text%3E%3Ctext x='32' y='183' font-size='14'%3E%26%23x1F389;%3C/text%3E%3Ctext x='89' y='180' font-size='10'%3E%26%23x1F60A;%3C/text%3E%3Ctext x='139' y='186' font-size='15'%3E%26%23x1F525;%3C/text%3E%3Ctext x='194' y='181' font-size='11'%3E%26%23x1F60E;%3C/text%3E%3Ctext x='15' y='226' font-size='9'%3E%26%23x1F44B;%3C/text%3E%3Ctext x='69' y='229' font-size='13'%3E%26%23x1F49C;%3C/text%3E%3Ctext x='127' y='224' font-size='10'%3E%26%23x1F3B6;%3C/text%3E%3Ctext x='182' y='229' font-size='14'%3E%26%23x1F60D;%3C/text%3E%3C/g%3E%3C/svg%3E"), var(--wallpaper-base, transparent); }

/* Motivation phrases and the blue-to-lilac Aurora caption requested for the wallpaper picker. */
.chat-background-midnight { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNjAnIGhlaWdodD0nMjEwJyB2aWV3Qm94PScwIDAgMjYwIDIxMCc+PGcgZmlsbD0nI2Q2ZTdmZicgZmlsbC1vcGFjaXR5PScuMjQnIGZvbnQtZmFtaWx5PSdBcmlhbCwgc2Fucy1zZXJpZicgZm9udC13ZWlnaHQ9JzcwMCc+PHRleHQgeD0nMTQnIHk9JzI5JyBmb250LXNpemU9JzknPtCjINGC0LXQsdGPINCy0YHRkSDQv9C+0LvRg9GH0LjRgtGB0Y88L3RleHQ+PHRleHQgeD0nODMnIHk9JzcyJyBmb250LXNpemU9JzcnPtCi0LXRgNC/0LXQvdC40LUg0Lgg0YLRgNGD0LQg0LLRgdGRRINC/0LXRgNC10YLRgNGD0YI8L3RleHQ+PHRleHQgeD0nMjAnIHk9JzExOScgZm9udC1zaXplPSc4Jz7QnNCw0LvQtdC90YzQutC40Lkg0YjQsNCzINGC0L7QttC1INC00LLQuNC20LXQvdC40LU8L3RleHQ+PHRleHQgeD0nMTA4JyB5PScxNjMnIGZvbnQtc2l6ZT0nNyc+0JLQtdGA0Ywg0LIg0YHQtdCx0Y88L3RleHQ+PHRleHQgeD0nMjYnIHk9JzE5NicgZm9udC1zaXplPSc5Jz7QodC10LPQvtC00L3RjyAtINGC0LLQvtC5INC00LXQvdGMPC90ZXh0PjwvZz48L3N2Zz4="), radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: 260px 210px, auto, auto; }
.wallpaper-option:has(.chat-background-aurora) > span:last-child > b { background: linear-gradient(90deg, #26bdf0, #d6a0f7); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Verified UTF-8 source for the Russian motivation phrases. */
.chat-background-midnight { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNjAnIGhlaWdodD0nMjEwJyB2aWV3Qm94PScwIDAgMjYwIDIxMCc+PGcgZmlsbD0nI2Q2ZTdmZicgZmlsbC1vcGFjaXR5PScuMjQnIGZvbnQtZmFtaWx5PSdBcmlhbCwgc2Fucy1zZXJpZicgZm9udC13ZWlnaHQ9JzcwMCc+PHRleHQgeD0nMTQnIHk9JzI5JyBmb250LXNpemU9JzknPtCjINGC0LXQsdGPINCy0YHRkSDQv9C+0LvRg9GH0LjRgtGB0Y88L3RleHQ+PHRleHQgeD0nODMnIHk9JzcyJyBmb250LXNpemU9JzcnPtCi0LXRgNC/0LXQvdC40LUg0Lgg0YLRgNGD0LQg0LLRgdGRINC/0LXRgNC10YLRgNGD0YI8L3RleHQ+PHRleHQgeD0nMjAnIHk9JzExOScgZm9udC1zaXplPSc4Jz7QnNCw0LvQtdC90YzQutC40Lkg0YjQsNCzINGC0L7QttC1INC00LLQuNC20LXQvdC40LU8L3RleHQ+PHRleHQgeD0nMTA4JyB5PScxNjMnIGZvbnQtc2l6ZT0nNyc+0JLQtdGA0Ywg0LIg0YHQtdCx0Y88L3RleHQ+PHRleHQgeD0nMjYnIHk9JzE5NicgZm9udC1zaXplPSc5Jz7QodC10LPQvtC00L3RjyAtINGC0LLQvtC5INC00LXQvdGMPC90ZXh0PjwvZz48L3N2Zz4="), radial-gradient(circle at 78% 15%, rgba(111, 154, 221, .42), transparent 30%), linear-gradient(135deg, #1c2944, #2e426b 55%, #425887); background-size: 260px 210px, auto, auto; }

/* Expanded bubble palette controls. */
.bubble-palette-picker { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bubble-palette-picker legend { font-size: 13px; font-weight: 850; }
.bubble-palette-picker .muted { margin: -3px 0 0; font-size: 11px; }
.bubble-palette-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.bubble-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; min-height: 32px; padding: 3px; border: 1px solid rgba(var(--primary-rgb), .16); border-radius: 10px; background: rgba(255, 255, 255, .54); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.bubble-palette i { display: block; min-width: 0; border-radius: 6px; background: var(--palette-color); }
.bubble-palette:hover, .bubble-palette:focus-visible { border-color: rgba(var(--primary-rgb), .6); transform: translateY(-1px); }
.bubble-palette.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .18), inset 0 1px rgba(255,255,255,.7); }
.bubble-hex-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bubble-hex-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.bubble-hex-controls input { min-width: 0; padding: 7px 8px; border: 1px solid rgba(var(--primary-rgb), .2); border-radius: 9px; background: rgba(255,255,255,.72); color: var(--text); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
body.theme-dark .bubble-palette { background: rgba(255,255,255,.07); }
body.theme-dark .bubble-hex-controls input { background: rgba(8, 25, 43, .54); }
@media (max-width: 380px) { .bubble-palette-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }