/* Telegram Android — dark + light */
html[data-theme="dark"] {
  --bg: #0e1621;
  --bg-elev: #17212b;
  --bg-soft: #242f3d;
  --header: #17212b;
  --header-fg: #fff;
  --line: rgba(255,255,255,.08);
  --text: #f5f5f5;
  --muted: #8b9bab;
  --accent: #5288c1;
  --accent-2: #6ab3f3;
  --danger: #e75c5c;
  --ok: #4fae4e;
  --warn: #f5c451;
  --bubble-in: #182533;
  --bubble-out: #2b5278;
  --bubble-in-fg: #f5f5f5;
  --bubble-out-fg: #f5f5f5;
  --time: rgba(255,255,255,.55);
  --chat-wall:
    radial-gradient(circle at 18% 20%, rgba(82,136,193,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(106,179,243,.06) 0 1px, transparent 2px),
    #0e1621;
  --list-hover: rgba(255,255,255,.04);
  --list-active: #2b3947;
  --input: #242f3d;
  --badge: #3ca3f3;
  --tick-read: #72d5fd;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #c8d9e4;
  --bg-elev: #ffffff;
  --bg-soft: #f1f3f5;
  --header: #5288c1;
  --header-fg: #fff;
  --line: rgba(0,0,0,.08);
  --text: #222;
  --muted: #707579;
  --accent: #5288c1;
  --accent-2: #40a7e3;
  --danger: #e53935;
  --ok: #4dcd5e;
  --warn: #e6a817;
  --bubble-in: #ffffff;
  --bubble-out: #eeffde;
  --bubble-in-fg: #222;
  --bubble-out-fg: #222;
  --time: #8d8d8d;
  --chat-wall:
    radial-gradient(circle at 12% 18%, rgba(82,136,193,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 72%, rgba(46,125,50,.08) 0 2px, transparent 3px),
    #c8d9e4;
  --list-hover: #f2f2f2;
  --list-active: #e9f0f7;
  --input: #fff;
  --badge: #4dcd5e;
  --tick-read: #4fc3f7;
  --shadow: 0 12px 30px rgba(0,0,0,.18);
  color-scheme: light;
}

html[data-theme] body.tg-app {
  font-family: "Roboto", system-ui, sans-serif;
  background: var(--bg-elev);
  color: var(--text);
}

.tg-app .app {
  grid-template-columns: 72px 340px 1fr;
}
.tg-app .rail {
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
}
.tg-app .rail-btn {
  color: var(--muted);
  background: transparent;
  width: 46px; height: 46px; border-radius: 12px;
}
.tg-app .rail-btn.active, .tg-app .rail-btn:hover {
  color: var(--accent-2);
  background: var(--bg-soft);
}
.tg-app .sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
}
.tg-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 6px;
  min-height: 56px;
}
.tg-list-head h2 {
  flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.2px;
}
.tg-app .search {
  margin: 0 12px 8px;
  background: var(--bg-soft);
  border: 0;
  border-radius: 22px;
  padding: 8px 12px;
}
html[data-theme="light"] .tg-app .search { background: #f4f4f5; }
.stories-row {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 8px 14px 10px;
  scrollbar-width: none;
}
.stories-row::-webkit-scrollbar { display: none; }
.story-add, .story-item {
  flex: 0 0 auto; width: 64px; text-align: center;
  font-size: 11px; color: var(--muted); cursor: pointer;
}
.story-add .avatar, .story-item .avatar {
  width: 52px; height: 52px; margin: 0 auto 4px;
  border: 2px solid var(--bg-elev);
  box-shadow: 0 0 0 2px #40a7e3;
}
.story-add .avatar { box-shadow: 0 0 0 2px #8b9bab; font-size: 22px; }
.story-item.unseen .avatar { box-shadow: 0 0 0 2px #40a7e3; }
.story-item.seen .avatar { box-shadow: 0 0 0 2px #5d6c7b; }
.story-item span, .story-add span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tg-app .chat-item {
  padding: 10px 14px; gap: 12px;
  border-bottom: 0;
}
.tg-app .chat-item:hover { background: var(--list-hover); }
.tg-app .chat-item.active { background: var(--list-active); }
.tg-app .chat-item .avatar { width: 52px; height: 52px; font-size: 18px; flex-shrink: 0; }
.tg-app .chat-item .name {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 500;
}
.tg-app .chat-item .name .when { color: var(--muted); font-size: 12px; font-weight: 400; }
.tg-app .chat-item .preview {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 14px; margin-top: 2px;
}
.tg-app .badge {
  background: var(--badge); color: #fff; min-width: 20px; height: 20px;
  font-size: 12px; font-weight: 600;
}
.avatar {
  background: linear-gradient(135deg, #65a6e0, #2b6cb0);
  color: #fff; overflow: hidden; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.ring { box-shadow: 0 0 0 2px #40a7e3; }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.avatar.xl { width: 108px; height: 108px; font-size: 36px; margin: 0 auto 8px; }

.tg-app .stage { background: var(--chat-wall); }
@media (min-width: 901px) {
  .tg-app .stage { position: relative; }
}
.tg-app .topbar {
  height: 56px;
  background: var(--header);
  color: var(--header-fg);
  border-bottom: 0;
  padding: 0 6px 0 2px;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 12;
  flex-shrink: 0;
}
.tg-app .topbar .icon-btn.ghost,
.tg-app .back-btn {
  background: transparent;
  color: var(--header-fg);
  width: 40px; height: 40px;
}
.tg-app .peer { gap: 10px; min-width: 0; cursor: pointer; }
.tg-app .peer .avatar { width: 42px; height: 42px; }
.peer-text { min-width: 0; flex: 1; overflow: hidden; }
.peer-text strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peer-text small {
  display: block;
  white-space: normal;
  line-height: 1.25;
  font-size: 12px;
  overflow: visible;
}
.tg-app .peer strong { font-size: 16px; font-weight: 500; color: var(--header-fg); }
.tg-app .peer small { color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.2; }
.tg-app .actions { gap: 0; flex-shrink: 0; }
.tg-app .actions .icon-btn { width: 36px; height: 36px; }
.more-menu {
  position: absolute; right: 8px; top: 52px; z-index: 20;
  background: var(--bg-elev); color: var(--text);
  border-radius: 10px; min-width: 210px;
  box-shadow: var(--shadow); padding: 6px 0;
  border: 1px solid var(--line);
}
.more-menu[hidden] { display: none !important; }
.more-menu button {
  display: block; width: 100%; text-align: left;
  padding: 12px 16px; font-size: 15px;
}
.more-menu button:hover { background: var(--list-hover); }

.tg-app .messages {
  background: var(--chat-wall);
  padding: 10px 8px 16px;
}
.tg-empty { height: 100%; display: grid; place-items: center; }
.tg-empty-card {
  background: rgba(0,0,0,.35); color: #fff;
  padding: 8px 14px; border-radius: 16px; font-size: 14px;
}
html[data-theme="light"] .tg-empty-card { background: rgba(0,0,0,.45); }

.tg-app .bubble-row { margin-bottom: 4px; padding: 0 4px; }
.tg-app .bubble {
  max-width: min(78%, 420px);
  padding: 6px 8px 4px 9px;
  border: 0;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--bubble-in-fg);
  background: var(--bubble-in);
  border-radius: 12px 12px 12px 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.tg-app .bubble.me {
  color: var(--bubble-out-fg);
  background: var(--bubble-out);
  border-radius: 12px 12px 4px 12px;
}
.tg-app .bubble .time {
  color: var(--time);
  font-size: 11px;
  margin-top: 2px;
  gap: 4px;
}
.tg-app .ticks {
  font-size: 15px;
  letter-spacing: -1px;
  font-weight: 800;
  margin-left: 4px;
  line-height: 1;
}
.tg-app .ticks.pending { color: #8696a0; font-size: 11px; letter-spacing: 0; }
.tg-app .ticks.sent { color: #667781; }
.tg-app .ticks.delivered { color: #667781; }
.tg-app .ticks.read { color: #53bdeb !important; }
html[data-theme="dark"]:not([data-chat="green"]) .tg-app .ticks.sent,
html[data-theme="dark"]:not([data-chat="green"]) .tg-app .ticks.delivered {
  color: rgba(255,255,255,.75);
}
html[data-chat="green"] .tg-app .ticks.read { color: #53bdeb !important; }
.peer-text small.is-online { color: #4ade80 !important; font-weight: 600; }
.tg-app .bubble.media { padding: 3px; }
.tg-app .bubble.media img { max-width: min(240px, 72vw); border-radius: 10px; }
.date-sep span {
  background: rgba(0,0,0,.3); color: #fff;
  font-size: 13px; padding: 4px 10px;
}
html[data-theme="light"] .date-sep span { background: rgba(0,0,0,.25); }

.tg-app .composer-wrap { background: var(--header); border: 0; }
html[data-theme="light"] .tg-app .composer-wrap { background: #fff; }
.tg-app .composer {
  padding: 6px 6px 8px;
  align-items: flex-end; gap: 4px;
}
.composer-field {
  flex: 1; display: flex; align-items: flex-end;
  background: var(--input);
  border-radius: 22px;
  min-height: 42px;
  padding: 0 4px 0 12px;
}
.tg-app .composer textarea {
  min-height: 42px; max-height: 120px;
  background: transparent; border: 0; border-radius: 0;
  padding: 11px 6px 11px 0;
  color: var(--text); caret-color: var(--accent);
  font-size: 16px;
}
.tg-app .composer .icon-btn.ghost {
  background: transparent; color: var(--muted);
  width: 40px; height: 40px;
}
.tg-app .send {
  width: 46px; height: 46px; border-radius: 50%;
  background: #5288c1; color: #fff;
  box-shadow: 0 2px 8px rgba(82,136,193,.35);
}
.tg-app .send svg { display: block; }

.dock {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.dock a.on, .dock button.on, .dock a:hover, .dock button:hover {
  color: var(--accent-2);
  background: transparent;
}

.settings-drawer {
  background: var(--bg-elev);
  color: var(--text);
}
.tg-me-card {
  display: flex; gap: 14px; align-items: center;
  width: 100%; text-align: left;
  padding: 8px 0 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.tg-me-card strong { display: block; font-size: 18px; }
.tg-me-card small { color: var(--muted); }
.theme-switch { display: flex; background: var(--bg-soft); border-radius: 10px; padding: 3px; }
.theme-switch button {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--muted);
}
.theme-switch button.on { background: var(--accent); color: #fff; }
.danger-row { color: var(--danger) !important; }

.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55);
  display: grid; place-items: end center;
}
.sheet[hidden] { display: none !important; }
.sheet-card {
  width: min(480px, 100%);
  background: var(--bg-elev); color: var(--text);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow: auto;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.center { text-align: center; margin-bottom: 12px; }
.peer-card { text-align: center; position: relative; }
.sheet-x { position: absolute; right: 8px; top: 8px; }
.peer-card h2 { margin: 4px 0 0; font-size: 22px; }
.peer-bio { color: var(--muted); margin: 10px 0; }
.peer-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.peer-actions button {
  flex: 1; padding: 12px 8px; border-radius: 12px;
  background: var(--bg-soft); font-weight: 600;
}

.status-page {
  position: fixed; inset: 0; z-index: 25;
  background: var(--bg-elev); color: var(--text);
  padding: calc(10px + env(safe-area-inset-top)) 0 calc(72px + env(safe-area-inset-bottom));
  overflow: auto;
}
.status-page[hidden] { display: none !important; }
.tg-page-head { padding: 8px 16px 12px; }
.status-label { color: var(--muted); font-size: 13px; padding: 16px 16px 8px; font-weight: 600; }
.status-mine, .status-list { padding: 0 8px; }
.status-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 8px; cursor: pointer;
}
.st-colors { display: flex; gap: 8px; margin: 12px 0; }
.st-colors button {
  width: 28px; height: 28px; border-radius: 50%;
  outline: 2px solid transparent;
}
.st-colors button.on { outline-color: var(--text); }
.st-colors button:nth-child(1){background:#2b5278}
.st-colors button:nth-child(2){background:#11998e}
.st-colors button:nth-child(3){background:#c31432}
.st-colors button:nth-child(4){background:#8e2de2}
.st-colors button:nth-child(5){background:#f7971e}
.st-colors button:nth-child(6){background:#1d2b64}
#stText {
  width: 100%; min-height: 120px; border-radius: 12px; border: 0;
  background: #2b5278; color: #fff; padding: 14px; resize: vertical;
}

.status-viewer {
  position: fixed; inset: 0; z-index: 110; background: #000;
  color: #fff; display: flex; flex-direction: column;
}
.status-viewer[hidden] { display: none !important; }
.sv-bar { height: 3px; background: rgba(255,255,255,.25); margin: 10px 12px 0; border-radius: 3px; }
.sv-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.sv-close { position: absolute; right: 8px; top: 18px; font-size: 20px; color: #fff; width: 40px; height: 40px; }
.sv-user { display: flex; gap: 10px; align-items: center; padding: 12px 16px; }
.sv-body { flex: 1; display: grid; place-items: center; padding: 20px; font-size: 28px; font-weight: 500; text-align: center; }
.sv-body img { max-width: 100%; max-height: 70dvh; object-fit: contain; }
.sv-foot {
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.sv-views { text-align: center; color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 8px; cursor: pointer; }
.sv-reacts { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sv-reacts button {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14);
  font-size: 20px;
}
.sv-reacts button.on { background: #fff; }
.sv-view-list {
  margin-top: 8px; max-height: 28vh; overflow: auto;
  background: rgba(0,0,0,.45); border-radius: 12px; padding: 8px;
  text-align: left; color: #fff; font-size: 13px;
}
.sv-view-list div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; }

html[data-theme="light"] .tg-app .topbar .icon-btn.ghost { color: #fff; }
html[data-theme="light"] .flash.ok { color: #065f46; background: #d1fae5; }
html[data-theme="light"] .flash.err { color: #9f1239; background: #ffe4e6; }
html[data-theme="light"] .login-wrap { background: #eef4f8; }
html[data-theme="light"] .login-card { background: #fff; color: #222; }

@media (max-width: 900px) {
  .tg-app .app { grid-template-columns: 1fr; }
  .tg-app .rail { display: none; }
  .tg-app .back-btn { display: grid; }
  .tg-app .stage {
    position: fixed;
    inset: 0;
    z-index: 30;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  .tg-app.chat-open .stage {
    transform: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.chat-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .tg-app .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
    flex-shrink: 0;
    position: relative;
    z-index: 12;
  }
  .tg-app .composer-wrap { flex-shrink: 0; }
  .tg-list-head { padding-top: calc(8px + env(safe-area-inset-top)); }
  .tg-app .composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  body.chat-open .dock { display: none; }
  .tg-app .bubble { max-width: 82%; }
  .actions #btnPing, .exit-orb { display: none; }
}

.ttl-chip { position: absolute; left: -9999px; }
.ghost-x {
  color: #ff6b6b !important;
  font-size: 18px;
  font-weight: 700;
}
.ghost-fab {
  position: absolute;
  right: 10px;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 16;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  color: #fff;
  font-size: 18px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transform: scale(.92);
  transition: opacity .22s ease, transform .22s ease;
}
.ghost-fab.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
html[data-theme="light"] .ghost-fab {
  background: rgba(255,255,255,.55);
  color: #333;
  border-color: rgba(0,0,0,.12);
}
html[data-ghost="off"] .ghost-fab { display: none !important; }
.more-menu button.danger { color: #e75c5c; }

/* Telegram call UI */
.call-overlay {
  background: #000;
}
.call-box {
  background: #212d3b;
}
.call-stage {
  flex: 1; position: relative; min-height: 0;
  background: radial-gradient(1200px 700px at 50% 0%, #2b5278 0%, #212d3b 55%, #17212b 100%);
}
#remoteAudio {
  position: fixed;
  right: 6px;
  bottom: 6px;
  width: 36px;
  height: 36px;
  opacity: 0.2;
  z-index: 200;
  pointer-events: none;
}
#remoteVideo, #filterCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: transparent;
  opacity: 0;
}
.call-overlay.voice-mode #remoteVideo {
  opacity: 0.25;
  width: 36px;
  height: 36px;
  inset: auto;
  right: 6px;
  bottom: 48px;
  pointer-events: none;
}
.call-overlay.connected.video-mode #remoteVideo { opacity: 1; inset: 0; width: 100%; height: 100%; }
.tg-call-bg {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 0 24px 80px;
  pointer-events: none;
}
.call-overlay.connected.video-mode.has-remote .tg-call-bg { display: none; }
.tg-call-av {
  width: 120px; height: 120px; font-size: 44px; font-weight: 600;
  margin-bottom: 22px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.35);
  animation: tgPulse 2.2s ease-in-out infinite;
}
.call-overlay.connected .tg-call-av { animation: none; }
@keyframes tgPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(82,136,193,.35), 0 16px 40px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 14px rgba(82,136,193,.12), 0 16px 40px rgba(0,0,0,.35); }
}
.tg-call-name { font-size: 28px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 8px; }
.tg-call-status { color: rgba(255,255,255,.7); font-size: 15px; margin: 0; }
.call-top {
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
  padding: calc(16px + env(safe-area-inset-top)) 18px 20px;
}
.call-overlay.incoming .call-top { opacity: 0; pointer-events: none; }
.call-overlay.outgoing .call-top { opacity: 1; pointer-events: auto; }
.call-mini {
  position: fixed; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top));
  z-index: 95; display: flex; align-items: center; gap: 8px;
  background: #1a7f3c; color: #fff; border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.call-mini[hidden] { display: none !important; }
.call-mini #callMiniOpen {
  flex: 1; text-align: left; color: #fff; background: none; display: flex;
  justify-content: space-between; align-items: center; gap: 8px; font-weight: 700;
}
.hang-mini { background: #e53935; color: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 700; }
body.in-call .dock { bottom: calc(64px + env(safe-area-inset-bottom)); }
.call-overlay.connected .call-top {
  opacity: 1;
  z-index: 6;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,.5), transparent);
}
#callTimer {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tg-call-status {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.self-cam {
  width: 88px; height: 118px; border-radius: 12px;
  border: 0; right: 12px; bottom: calc(118px + env(safe-area-inset-bottom));
  top: auto; background: #111;
  opacity: 0; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.call-overlay.connected.video-mode .self-cam,
.call-overlay.connected.video-mode #filterCanvas.self-cam {
  opacity: 1; pointer-events: auto;
}
#filterCanvas.self-cam { z-index: 5; }
.perm-banner {
  position: absolute; left: 10px; right: 10px;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: #fff; color: #111; border-radius: 16px; padding: 14px 16px;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  pointer-events: auto;
}
.perm-banner[hidden] { display: none !important; }
.perm-banner button {
  background: #31b545; color: #fff; border-radius: 12px; padding: 14px 16px;
  font-weight: 800; font-size: 16px; min-height: 48px; pointer-events: auto;
  touch-action: manipulation;
}
.tg-in-actions {
  display: none; justify-content: center; gap: 56px;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
  z-index: 7;
}
.call-overlay.incoming .tg-in-actions { display: flex; }
.tg-fab {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff; font-size: 13px;
}
.tg-fab svg {
  width: 64px; height: 64px; padding: 18px; border-radius: 50%;
}
.tg-fab.decline svg { background: #e53935; }
.tg-fab.accept svg { background: #31b545; }
.tg-fab em { font-style: normal; font-weight: 500; }
.tg-call-bar {
  display: none; justify-content: space-evenly; align-items: flex-end;
  gap: 6px; padding: 8px 10px 4px;
  background: transparent;
  z-index: 8;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.call-overlay.show:not(.incoming) .tg-call-bar,
.call-overlay.outgoing .tg-call-bar,
.call-overlay.connected .tg-call-bar { display: flex; }
.call-overlay.incoming .tg-call-bar { display: none !important; }
.call-overlay.voice-mode #btnFlip,
.call-overlay.voice-mode #btnFilters { display: none !important; }
.tg-ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.85); font-size: 11px; min-width: 48px;
  flex: 0 0 auto;
}
.tg-ctrl span {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  backdrop-filter: blur(12px);
}
.tg-ctrl.on span { background: #fff; color: #212d3b; }
.call-hang-row {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 6px 16px calc(22px + env(safe-area-inset-bottom));
  z-index: 90;
  flex-shrink: 0;
  position: relative;
  pointer-events: auto;
}
.call-overlay.show:not(.incoming) .call-hang-row { display: flex; }
.call-overlay.incoming .call-hang-row { display: none !important; }
.call-cut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.call-cut span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #e53935;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(229, 57, 53, .5);
}
.call-cut:active span { transform: scale(.94); background: #c62828; }
.call-overlay.outgoing #btnCam,
.call-overlay.outgoing #btnFlip { opacity: .45; pointer-events: none; }
.call-overlay.connected #btnFlip { display: flex; }
.call-overlay.connected #btnFilters { display: flex; }
.filter-row {
  display: none;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 12px 6px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  z-index: 8;
  scrollbar-width: none;
}
.filter-row.show { display: flex; }
.filter-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 56px; background: transparent; color: #fff; font-size: 10px;
}
.filter-chip span {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
  font-size: 24px; border: 2px solid transparent;
}
.filter-chip.on span { border-color: #fff; background: #3390ec; }

html { --tg-text: 16px; --name-c: #4caf50; }
.tg-app .bubble { font-size: var(--tg-text); }
.tg-app .messages {
  background: #1c1c1c;
  background-image: none;
}
html[data-wall="gray"] .tg-app .messages { background: #1c1c1c; }
html[data-wall="black"] .tg-app .messages { background: #000; }
html[data-wall="blue"] .tg-app .messages { background: #1b2838; }
html[data-wall="default"] .tg-app .messages { background: #1c1c1c; }
html[data-wall="doodle"] .tg-app .messages {
  background: #0b0d12 url("../img/walls/doodle.jpg") center / cover no-repeat;
}
html[data-wall="hearts"] .tg-app .messages {
  background: #140d16 url("../img/walls/hearts.jpg") center / cover no-repeat;
}
html[data-wall="night"] .tg-app .messages {
  background: #0b1020 url("../img/walls/night.jpg") center / cover no-repeat;
}
html[data-wall="mountains"] .tg-app .messages {
  background: #0e1621 url("../img/walls/mountains.jpg") center / cover no-repeat;
}
html[data-wall="waves"] .tg-app .messages {
  background: #07131c url("../img/walls/waves.jpg") center / cover no-repeat;
}
html[data-wall="games"] .tg-app .messages {
  background: #0e1016 url("../img/walls/games.jpg") center / cover no-repeat;
}
.wall-tile.doodle { background: url("../img/walls/doodle.jpg") center / cover; }
.wall-tile.hearts { background: url("../img/walls/hearts.jpg") center / cover; }
.wall-tile.night { background: url("../img/walls/night.jpg") center / cover; }
.wall-tile.mountains { background: url("../img/walls/mountains.jpg") center / cover; }
.wall-tile.waves { background: url("../img/walls/waves.jpg") center / cover; }
.wall-tile.games { background: url("../img/walls/games.jpg") center / cover; }
.guide-ver { color: #a78bfa; font-size: 12px; padding: 0 16px 8px; }
.guide-card { padding: 14px 16px 18px; }
.guide-card h3 { font-size: 15px; margin: 14px 0 6px; color: #c4b5fd; }
.guide-card h3:first-child { margin-top: 0; }
.guide-card p { font-size: 14px; line-height: 1.5; color: #d1d5db; margin: 0; }

html[data-chat="green"] {
  --bubble-out: #e1ffc7;
  --bubble-out-fg: #111;
  --bubble-in: #ffffff;
  --bubble-in-fg: #111;
  --time: #6b7280;
}
html[data-chat="telegram"] {
  --bubble-out: #2b5278;
  --bubble-out-fg: #f5f5f5;
  --bubble-in: #182533;
  --bubble-in-fg: #f5f5f5;
}
html[data-chat="purple"] {
  --bubble-out: #c084fc;
  --bubble-out-fg: #1a1024;
  --bubble-in: #2a2435;
  --bubble-in-fg: #f5f5f5;
}
html[data-chat="pink"] {
  --bubble-out: #f9a8d4;
  --bubble-out-fg: #3f1024;
  --bubble-in: #2a1d24;
  --bubble-in-fg: #f5f5f5;
}
html[data-chat="green"] .tg-app .ticks.read { color: #53bdeb !important; }
html[data-name="green"] { --name-c: #4caf50; }
html[data-name="pink"] { --name-c: #ff8ad4; }
html[data-name="blue"] { --name-c: #60a5fa; }
html[data-name="orange"] { --name-c: #fb923c; }
html[data-name] .peer strong { color: #fff; }
html[data-name] .chat-item .name span:first-child { color: var(--name-c); }
.theme-preview .nm { color: var(--name-c); display: block; font-size: 12px; }

.tg-e {
  width: 1.45em; height: 1.45em; display: inline-block;
  vertical-align: -0.28em; object-fit: contain;
}
.tg-e.jumbo { width: 88px; height: 88px; vertical-align: middle; }
.msg-vid {
  display: block; max-width: min(240px, 72vw); max-height: 280px;
  border-radius: 10px; background: #000;
}
.msg-link { color: #6ab3f3; text-decoration: underline; word-break: break-all; }
html[data-chat="green"] .bubble.me .msg-link { color: #1565c0; }
.bubble.jumbo { background: transparent !important; box-shadow: none; border: 0; padding: 4px; }
.bubble.jumbo .time { justify-content: flex-start; }

.toast {
  background: #f4f4f5 !important;
  color: #111 !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
html[data-theme="light"] .toast { background: #111 !important; color: #fff !important; }

.theme-preview {
  margin: 8px 12px 14px; padding: 16px 12px;
  border-radius: 14px; min-height: 120px;
  background: #1c1c1c;
}
.theme-preview .bubble { max-width: 78%; margin-bottom: 8px; }
.theme-preview .bubble.me { margin-left: auto; }
.wall-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 8px 12px 12px;
}
.wall-tile {
  aspect-ratio: 3/4; border-radius: 12px; border: 2px solid transparent;
}
.wall-tile.on { border-color: #a78bfa; }
.wall-tile.gray { background: #1c1c1c; }
.wall-tile.black { background: #000; }
.wall-tile.blue { background: linear-gradient(#1d4ed8, #0b1020); }
.wall-tile.doodle { background: #12151c; }
.wall-tile.hearts { background: radial-gradient(circle at 40% 40%, #ec4899 0 8px, #140d16 9px); }
.wall-tile.night { background: linear-gradient(#312e81, #0b1020); }
.wall-tile.games { background: repeating-linear-gradient(45deg, #111 0 8px, #1f2937 8px 16px); }
.name-dots { display: flex; gap: 8px; }
.name-dots button { width: 22px; height: 22px; border-radius: 50%; }
.name-dots button.on { outline: 2px solid #fff; outline-offset: 2px; }
.dot-g { background: #4caf50; }
.dot-p { background: #ff8ad4; }
.dot-b { background: #60a5fa; }
.dot-o { background: #fb923c; }
.chat-themes { display: flex; gap: 8px; padding: 8px 12px 12px; }
.chat-themes button {
  flex: 1; padding: 10px 8px; border-radius: 12px; background: #2c2c2e;
  font-size: 12px; font-weight: 600; color: #fff;
}
.chat-themes button.on { background: #7c5cfc; }
.size-num { text-align: right; color: #c4b5fd; }
.follow-box { display: flex; gap: 8px; padding: 8px 16px 12px; align-items: center; }
.follow-box input {
  flex: 1; background: #2c2c2e; border: 0; border-radius: 12px;
  padding: 12px 14px; color: #fff; outline: none; font-size: 15px;
}
html[data-noanim="1"] * { transition: none !important; animation: none !important; }

.bubble.media img.no-save,
#mediaImg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}
.media-view {
  position: fixed; inset: 0; z-index: 125; background: #000;
  display: grid; place-items: center;
}
.media-view[hidden] { display: none !important; }
.media-view img { max-width: 100%; max-height: 100%; object-fit: contain; }

.msg-sheet {
  position: fixed; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 100; background: var(--bg-elev); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
}
.msg-sheet[hidden] { display: none !important; }
.msg-sheet button {
  display: block; width: 100%; text-align: left; padding: 16px 18px;
  font-size: 16px; border-bottom: 1px solid var(--line);
}
.msg-sheet button.danger { color: var(--danger); }
.msg-sheet button:last-child { border: 0; text-align: center; color: var(--muted); }

.set-page {
  background: #000 !important;
  color: #fff;
  z-index: 26;
}
html[data-theme="light"] .set-page { background: #f2f2f7 !important; color: #111; }
.set-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 10px;
  min-height: 52px;
}
.set-bar h2 { flex: 1; font-size: 28px; font-weight: 700; letter-spacing: -.4px; }
.set-hero { text-align: center; padding: 8px 16px 18px; position: relative; }
.hero-av, #setHeroAv {
  width: 108px; height: 108px; margin: 0 auto; font-size: 36px;
  box-shadow: 0 0 0 4px #111;
}
.cam-badge {
  position: absolute; left: 50%; margin-left: 28px; top: 78px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #7c5cfc; display: grid; place-items: center;
  border: 3px solid #000;
}
.set-hero h1 { font-size: 26px; margin: 14px 0 4px; font-weight: 700; }
.set-sub { color: #8e8e93; font-size: 15px; }
.set-card {
  margin: 0 12px 14px; background: #1c1c1e;
  border-radius: 16px; overflow: hidden;
}
html[data-theme="light"] .set-card { background: #fff; }
.set-card-label {
  padding: 12px 16px 4px; color: #a78bfa; font-size: 13px; font-weight: 600;
}
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 12px 14px; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .set-row { border-bottom-color: rgba(0,0,0,.06); }
.set-row:last-child { border-bottom: 0; }
.set-row b { display: block; font-weight: 500; font-size: 16px; }
.set-row small { color: #8e8e93; font-size: 13px; }
.set-row em { margin-left: auto; color: #636366; font-style: normal; font-size: 20px; }
.set-row.static { cursor: default; }
.set-row.col { flex-direction: column; align-items: stretch; gap: 8px; }
.set-row span { flex: 1; min-width: 0; }
.si {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}
.si.blue { background: #3b82f6; }
.si.orange { background: #f59e0b; }
.si.green { background: #22c55e; }
.si.red { background: #ef4444; }
.si.cyan { background: #06b6d4; }
.si.teal { background: #14b8a6; }
.si.purple { background: #8b5cf6; }
.acc-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  width: 100%; text-align: left; color: inherit;
}
.acc-row .badge { background: #7c5cfc; margin-left: auto; }
.acc-row em { color: #636366; font-style: normal; }
.set-field { padding: 10px 14px; }
.set-field label { display: block; font-size: 12px; color: #8e8e93; margin-bottom: 4px; }
.set-field input {
  width: 100%; background: #2c2c2e; border: 0; border-radius: 10px;
  padding: 12px; color: #fff; outline: none;
}
html[data-theme="light"] .set-field input { background: #f2f2f7; color: #111; }
.set-note { padding: 4px 16px 14px; color: #8e8e93; font-size: 13px; line-height: 1.45; }
.set-screen { display: none; }
.set-screen:not([hidden]) { display: block; }
#textSize { width: 100%; accent-color: #7c5cfc; }
.wall-picks { display: flex; gap: 8px; }
.wall-picks button {
  flex: 1; padding: 10px 8px; border-radius: 10px; background: #2c2c2e;
  font-size: 12px; font-weight: 600; color: #fff;
}
.wall-picks button.on { background: #5288c1; }
.tg-toggle { position: relative; width: 46px; height: 28px; flex-shrink: 0; }
.tg-toggle input { display: none; }
.tg-toggle i {
  display: block; width: 46px; height: 28px; border-radius: 99px; background: #39393d;
  position: relative;
}
.tg-toggle i:after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: .2s;
}
.tg-toggle input:checked + i { background: #34c759; }
.tg-toggle input:checked + i:after { left: 21px; }
.tg-toggle input:disabled + i { opacity: .45; }

.tg-dock {
  left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto; border-radius: 22px; border: 0;
  background: #2a2a2e; padding: 6px 8px;
  grid-template-columns: repeat(4, 1fr);
}
html[data-theme="light"] .tg-dock { background: #e8e8ed; }
.tg-dock button.on {
  background: #5b4b8a; color: #fff; border-radius: 16px;
}
.dock-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: block; overflow: hidden;
}
.dock-av img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  body.tab-settings .app, body.tab-profile .app, body.tab-contacts .app { display: none; }
  body.tab-settings .dock, body.tab-profile .dock, body.tab-contacts .dock { display: grid; }
}