@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Telegram iOS dark neutrals; BabaChat cyan is the only colour, same as the logo */
  --bg: #000;
  --bg2: #0a0a0a;
  --panel: #1c1c1e;
  --card: rgba(118, 118, 128, .12);
  --card-hi: rgba(118, 118, 128, .2);
  --line: rgba(84, 84, 88, .5);
  --line-hi: rgba(70, 219, 233, .4);
  --text: #fff;
  --text2: #aeaeb2;
  --muted: #8e8e93;
  --accent: #46dbe9;
  --accent2: #20a9bb;
  --accent-ink: #032026;
  --btn: #1a94a4;
  --btn-hover: #17889a;
  --btn-active: #137a8a;
  --glow: rgba(70, 219, 233, .45);
  --danger: #ff6b7d;
  --ok: #3ddc84;
  --mine1: #0d5560;
  --mine2: #0f6d7a;
  --theirs: #262628;
  --r: 18px;
  --gutter: 16px; /* one left/right edge for every block on every page */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  /* Poppins for Latin text; anything it doesn't cover (Chinese, emoji) falls through to the device's own font */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  /* Apple-style glass: translucent fill, blur + saturation, a light top edge and a soft drop shadow */
  --glass: rgba(42, 46, 52, .52);
  --glass-strong: rgba(30, 33, 38, .78);
  --glass-blur: blur(28px) saturate(185%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, .38);
  /* one geometric family to match the logo; brand lines just add wide tracking */
  --font-display: var(--font);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
/* iOS 26 home-screen app (WebKit 301108): the viewport comes up short by the status bar and nothing is drawn below it, unless the page itself is as tall as the screen */
@media (display-mode: standalone) { html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); } }
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* app feel: no pinch / double-tap page zoom */
body {
  /* a deep layered tint instead of flat black, so the glass has something to show */
  background: radial-gradient(1000px 700px at 10% -15%, #0d2c33, transparent 62%), radial-gradient(900px 700px at 110% 115%, #0b1b2b, transparent 60%), #040608;
  color: var(--text);
  font: 13px/18px var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
/* keep iOS Safari from zooming into focused fields */
@media (pointer: coarse) { input, textarea, select { font-size: 15px !important; } }
b, strong { font-weight: 600; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); }
svg.i { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 16px; height: 16px; }
svg.i.xs { width: 14px; height: 14px; }

/* ---------- logo ---------- */
.logo { display: block; width: 172px; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.logo.xl { width: min(360px, 80vw); margin: 0 auto; }
.logo.lg { width: min(280px, 70vw); margin: 0 auto; }
.tagline { font-family: var(--font-display); font-weight: 400; font-size: 10px; line-height: 14px; letter-spacing: .34em; color: var(--text2); text-transform: uppercase; margin-top: 7px; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- layout ---------- */
.shell { position: fixed; inset: 0; display: flex; }
.side { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: transparent; }
.view { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding-top: var(--sat); padding-bottom: calc(86px + var(--sab)); -webkit-overflow-scrolling: touch; }
.chat { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .42s cubic-bezier(.2, .9, .3, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .6);
  /* Telegram-style wallpaper: our own doodle pattern over a deep teal gradient */
  background: url(/img/pattern.svg) 0 0 / 360px 360px, radial-gradient(120% 70% at 0% 0%, #0b2a31, transparent 70%), radial-gradient(110% 70% at 100% 100%, #0a1f2e, transparent 70%), #04090c; }
.side { transition: transform .42s cubic-bezier(.2, .9, .3, 1); }
.side::after { content: ""; position: absolute; inset: 0; z-index: 30; background: #000; pointer-events: none; opacity: calc(var(--push, 0) * .5); transition: opacity var(--dim-t, .42s); }
.shell.pushed { --push: 1; }
.shell.pushed .side { transform: translateX(-28%); }
.chat.open { transform: none; }
.chat .empty-pane { margin: auto; text-align: center; color: var(--muted); }
@media (min-width: 900px) {
  .side { width: 400px; flex: none; border-right: 1px solid var(--line); background: var(--bg); }
  .chat { position: relative; inset: auto; flex: 1; transform: none; transition: none; z-index: auto; box-shadow: none; }
  .shell.pushed .side { transform: none; } .side::after { display: none; }
  .chat-back { display: none !important; }
}

/* ---------- header ---------- */
/* Telegram iOS chats header: glass pill · avatar + title · glass circle + filled compose; stays on top while the list scrolls */
.top { position: sticky; top: calc(-1 * var(--sat)); z-index: 5; display: flex; align-items: center; gap: 12px; height: 64px; padding: var(--sat) var(--gutter) 0; margin-top: calc(-1 * var(--sat)); box-sizing: content-box;
  isolation: isolate; }
/* the list scrolls under a blurred, fading bar */
.top::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: rgba(4, 7, 9, .5); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.top .glass-btn.pill.on { color: var(--accent); }
.chats-title { position: absolute; left: 50%; bottom: 10.5px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 43px; max-width: 46%; }
.chats-title .av { width: 28px; height: 28px; font-size: 11px; box-shadow: none; }
.chats-title span { font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glass-btn.solid { background: var(--btn); border-color: transparent; color: #fff; box-shadow: none; }
.glass-btn.solid:active { background: var(--btn-active); }
.glass-btn svg.i { width: 24px; height: 24px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); }
.icon-btn:active { background: var(--card-hi); }
.icon-btn.plain { background: none; border: 0; }
.top-l, .top-r { display: flex; gap: 12px; }
.top-r { margin-left: auto; }
.top-title { position: absolute; left: 50%; bottom: 10.5px; transform: translateX(-50%); max-width: 50%; margin: 0; font-size: 15px; line-height: 43px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- search + tabs ---------- */
/* Telegram iOS search pill */
.search { margin: 2px var(--gutter) 10px; display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 43px; border-radius: 22px; background: rgba(118, 118, 128, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); color: #8e8e93; }
.search svg.i { width: 20px; height: 20px; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); }
.search input::placeholder { color: #8e8e93; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* empty + unfocused: icon and "Search" sit centred, like iOS */
.search.center { justify-content: center; }
.search.center:not(:focus-within):has(input:placeholder-shown) input { flex: 0 0 4.2em; }
/* Telegram-style folder tabs: text labels with a sliding underline */
.tabs { position: relative; display: flex; margin: 0 0 4px; padding: 0 calc(var(--gutter) - 10px); border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; height: 40px; color: var(--muted); font-size: 13px; font-weight: 500; transition: color .2s; }
.tabs button span { display: inline-block; }
.tabs button.on { color: var(--accent); }
.tabs .tab-ind { position: absolute; left: 0; bottom: -1px; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); box-shadow: 0 0 10px var(--glow); pointer-events: none;
  transition: transform .32s cubic-bezier(.25, 1, .5, 1), width .32s cubic-bezier(.25, 1, .5, 1); }
.list-ghost { position: absolute; left: 0; right: 0; pointer-events: none; }

/* ---------- avatar ---------- */
.av { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 17px; color: #fff;
  box-shadow: 0 0 0 1.5px rgba(70, 219, 233, .55), 0 0 14px rgba(70, 219, 233, .22); }
.av.sm { width: 40px; height: 40px; font-size: 14px; }
.av.xs { width: 33px; height: 33px; font-size: 12px; box-shadow: 0 0 0 1px rgba(70, 219, 233, .4); }
.av.lg { width: 88px; height: 88px; font-size: 29px; }
.av.xl { width: 96px; height: 96px; font-size: 36px; }
.av svg.i { width: 26px; height: 26px; }
.av .dot { position: absolute; right: 0; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); border: 2.5px solid var(--bg); }
.av.sm .dot { width: 11px; height: 11px; }
.c0 { background: linear-gradient(#5fe3ef, #1aa6b8); }
.c1 { background: linear-gradient(#72d5fd, #2a9ef1); }
.c2 { background: linear-gradient(#b694f9, #6c61df); }
.c3 { background: linear-gradient(#9ad164, #46ba43); }
.c4 { background: linear-gradient(#febb5b, #f68136); }
.c5 { background: linear-gradient(#ff8aac, #d95574); }
.c6 { background: linear-gradient(#ff845e, #d45246); }
.c7 { background: linear-gradient(#b8c2cc, #8a96a3); }

/* ---------- chat list ---------- */
.list { padding: 2px 0 12px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px var(--gutter); text-align: left; position: relative; transition: background-color .15s; }
.list .row + .row::before { content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 62px); right: 0; height: 1px; background: rgba(84, 84, 88, .45); }
.list .row:active + .row::before, .list .row.sel + .row::before { opacity: 0; }
.row:active, .row.sel { background: rgba(118, 118, 128, .16); }
.row .mid { flex: 1; min-width: 0; }
.row .t { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 15px; line-height: 21px; }
.row .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t svg { color: var(--text2); }
.row .p { color: #8e8e93; font-size: 14px; line-height: 20px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .p .typing { color: var(--accent); }
.row .right { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 2px 0 0; }
.row .time { font-size: 13px; line-height: 19px; color: #8e8e93; white-space: nowrap; }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.badge.muted { background: #5a5a5f; color: #fff; box-shadow: none; }
/* iOS section header: small grey caps */
.section-label { padding: 16px var(--gutter) 8px; font-size: 12px; line-height: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.empty { padding: 48px 28px; text-align: center; color: var(--muted); }
.empty .big { font-size: 14px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }

/* ---------- tab bar ---------- */
/* Telegram iOS floating glass capsule */
.tabbar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(10px + var(--sab)); z-index: 10; display: flex; height: 62px; padding: 4px; border-radius: 31px;
  background: rgba(30, 32, 36, .88); backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--glass-edge), 0 12px 34px rgba(0, 0, 0, .5); }
.tabbar button { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 27px;
  color: #a1a1a8; font-size: 10px; line-height: 12px; font-weight: 600; transition: color .2s, transform .2s cubic-bezier(.2, .9, .3, 1.4); }
.tabbar button:active { transform: scale(.92); }
.tabbar .ti { width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat; }
.tabbar button.on .ti { -webkit-mask-image: var(--ti-on); mask-image: var(--ti-on); }
.tabbar button.on { color: var(--accent); }
.tabbar .tb-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 27px; background: rgba(255, 255, 255, .1); pointer-events: none;
  transform: translateX(calc(100% * var(--i, 0))); transition: transform .38s cubic-bezier(.25, 1, .5, 1); }
@media (prefers-reduced-motion: reduce) { .tabbar .tb-ind { transition: none; } }
/* tapped tab icon bounces, like Telegram's tab bar */
@keyframes tab-pop { 0% { transform: scale(1); } 35% { transform: scale(.8); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tabbar button.pop > .ti { animation: tab-pop .42s cubic-bezier(.25, 1, .5, 1); }
.tabbar .tb-badge { position: absolute; top: 3px; left: calc(50% + 3px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; line-height: 20px; font-weight: 500; text-align: center; background: #e5463d; color: #fff; }

/* ---------- chat pane ---------- */
/* Telegram iOS chat header: glass back pill · centred glass capsule (name + status) · avatar; messages scroll underneath */
.chat-head { position: relative; z-index: 3; flex: none; display: flex; align-items: center; height: 56px; padding: calc(6px + var(--sat)) var(--gutter) 0; margin-bottom: calc(-62px - var(--sat)); pointer-events: none; }
.chat-head > * { pointer-events: auto; }
.chat-head::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.chat-head .glass-btn { height: 44px; min-width: 44px; }
.chat-back.pill { display: flex; gap: 2px; padding: 0 12px 0 6px; }
.bk-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 12px; line-height: 22px; font-weight: 600; text-align: center; color: #fff; background: rgba(255, 255, 255, .16); }
.chat-head .who { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 58%; height: 44px; padding: 0 18px; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
.chat-head .who:active { transform: translateX(-50%) scale(.97); }
.chat-head .who .n { max-width: 100%; display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 20px; font-weight: 600; }
.chat-head .who .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .who .s { max-width: 100%; font-size: 11px; line-height: 15px; color: #8e8e93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .who .s.live { color: var(--accent); }
.chat-av { margin-left: auto; border-radius: 50%; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
.chat-av .av { width: 44px; height: 44px; font-size: 15px; }
.msgs { flex: 1; overflow-y: auto; padding: calc(72px + var(--sat)) 10px 10px; display: flex; flex-direction: column; gap: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Telegram service pills: dark glass over the wallpaper; the date pill sticks to the top while scrolling */
.day { position: sticky; top: calc(68px + var(--sat)); z-index: 1; align-self: center; margin: 12px 0 8px; padding: 3px 10px; font-size: 12px; line-height: 18px; font-weight: 600; color: #fff; background: rgba(12, 22, 26, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border-radius: 999px; }
.sys { align-self: center; margin: 6px 0; padding: 3px 10px; font-size: 12px; line-height: 18px; font-weight: 500; color: #fff; text-align: center; max-width: 85%; border-radius: 12px; background: rgba(0, 0, 0, .42); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.e2e-note { align-self: center; margin: 8px 0 14px; max-width: 300px; padding: 12px 16px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, .85); text-align: center; border-radius: 18px; background: rgba(0, 0, 0, .42); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.e2e-note svg { vertical-align: -3px; color: var(--accent); }
.m { display: flex; gap: 8px; align-items: flex-end; max-width: min(84%, 517px); margin-top: 8px; }
.m.cont { margin-top: 2px; }
.m.mine { align-self: flex-end; flex-direction: row-reverse; }
.m .av.xs { visibility: hidden; }
.m.last .av.xs { visibility: visible; }
/* Telegram bubbles: no border, corners tighten between messages of one run, a tail on the last one */
.bubble { position: relative; padding: 6px 12px 7px; border-radius: 18px; background: #1d2226; word-wrap: break-word; overflow-wrap: anywhere; min-width: 64px; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.m.mine .bubble { background: linear-gradient(170deg, var(--mine2), var(--mine1)); }
.m:not(.mine).cont .bubble { border-top-left-radius: 6px; }
.m:not(.mine):not(.last) .bubble { border-bottom-left-radius: 6px; }
.m.mine.cont .bubble { border-top-right-radius: 6px; }
.m.mine:not(.last) .bubble { border-bottom-right-radius: 6px; }
.m.last .bubble::before { content: ""; position: absolute; bottom: 0; width: 11px; height: 17px; background: #1d2226;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c4.5-.6 8-3.2 9.7-7.3C10.6 7.4 11 4 11 0z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H0c4.5-.6 8-3.2 9.7-7.3C10.6 7.4 11 4 11 0z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.m.last:not(.mine) .bubble { border-bottom-left-radius: 4px; }
.m.last:not(.mine) .bubble::before { left: -6px; }
.m.last.mine .bubble { border-bottom-right-radius: 4px; }
.m.last.mine .bubble::before { right: -6px; transform: scaleX(-1); background: var(--mine1); }
.bubble .from { font-size: 13px; line-height: 19px; font-weight: 600; margin-bottom: 1px; }
.bubble .txt { white-space: pre-wrap; font-size: 15px; line-height: 21px; }
/* time sits on the last text line, Telegram-style: reserve room at the end of the text, pin the meta bottom-right */
.bubble .txt::after { content: ""; display: inline-block; width: 44px; }
.m.mine .bubble .txt::after { width: 60px; }
.bubble:has(.txt) .meta { position: absolute; right: 10px; bottom: 5px; margin: 0; }
.bubble .meta { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin-top: 2px; font-size: 11px; line-height: 16px; color: rgba(235, 245, 248, .5); }
.m.mine .bubble .meta { color: rgba(255, 255, 255, .62); }
.m.mine .bubble .meta .read { color: #fff; }
.bubble .meta .read { color: var(--accent); }
.bubble.locked { color: var(--muted); font-style: italic; font-size: 13px; }
.bubble.pending { opacity: .6; }
.bubble.failed { box-shadow: inset 0 0 0 1.5px var(--danger); }
.bubble img.photo { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; margin: 2px 0 4px; cursor: zoom-in; background: rgba(255, 255, 255, .04); min-width: 120px; min-height: 80px; object-fit: cover; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 2px 0 4px; border-radius: 12px; background: rgba(0, 0, 0, .22); text-align: left; width: 100%; }
.file-chip .fi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(70, 219, 233, .15); color: var(--accent); }
.file-chip .fn { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file-chip .fs { font-size: 12px; color: var(--muted); }
.load-more { align-self: center; font-size: 12px; font-weight: 500; color: var(--accent); padding: 6px 12px; }

/* ---------- composer: Telegram flat bar — 📎 · borderless field · 😊 · 🎤 (↔ send) ---------- */
/* Telegram iOS: glass circle · glass capsule (text + emoji) · glass mic/send, floating over the wallpaper */
.composer { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px calc(8px + var(--sab)); background: linear-gradient(rgba(2, 6, 8, 0), rgba(2, 6, 8, .7)); }
.composer > .c-btn { width: 48px; height: 48px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); color: #b7bec4; }
.composer > .c-btn.send { background: var(--btn); box-shadow: 0 4px 14px rgba(26, 148, 164, .35); color: #fff; }
.c-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; min-height: 48px; padding-left: 16px; border-radius: 24px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); transition: border-color .15s; }
.c-field:focus-within { border-color: rgba(70, 219, 233, .35); }
.c-field .c-btn { width: 44px; height: 46px; }
.c-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #8e8e93; transition: color .15s, background-color .2s, transform .2s cubic-bezier(.25, 1, .5, 1), box-shadow .2s; }
.c-btn:hover { color: var(--text); }
.c-btn svg.i { width: 25px; height: 25px; }
.c-btn.send { color: var(--accent); }
.c-btn.mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.composer textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 160px; padding: 11px 4px 11px 0; border: 0; border-radius: 0; background: transparent; resize: none; outline: 0; font-size: 14px; line-height: 20px; }
.composer textarea::placeholder { color: #8e8e93; }
/* recording */
.rec-ui { display: none; flex: 1; align-items: center; gap: 10px; height: 40px; padding-left: 10px; font-size: 14px; transform: translateX(var(--slide, 0px)); }
.composer.recording .rec-ui { display: flex; }
.composer.recording .c-field, .composer.recording .attach { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff453a; animation: recblink 1s infinite; }
.rec-hint { margin-left: auto; margin-right: 10px; color: #8e8e93; }
@keyframes recblink { 50% { opacity: .25; } }
.composer.recording .mic { background: var(--btn); color: #fff; transform: scale(1.3); box-shadow: 0 0 0 8px rgba(26, 148, 164, .25); }
/* reply / edit bar + emoji panel above the composer */
.reply-bar { display: flex; align-items: center; gap: 12px; margin: 0 10px; padding: 8px 8px 8px 14px; border-radius: 18px; background: rgba(36, 40, 44, .8); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); color: var(--accent); }
.reply-bar > svg.i { flex: none; width: 22px; height: 22px; }
.rb-tx { flex: 1; min-width: 0; padding-left: 10px; border-left: 2px solid var(--accent); }
.rb-tx b { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.rb-tx span { display: block; font-size: 13px; line-height: 18px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emoji-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 220px; overflow-y: auto; margin: 0 10px 6px; padding: 8px; border-radius: 22px; background: rgba(36, 40, 44, .86); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.emoji-panel button { height: 42px; border-radius: 10px; font-size: 22px; }
.emoji-panel button:hover { background: rgba(118, 118, 128, .24); }
.readonly-bar { margin: 6px 10px calc(8px + var(--sab)); padding: 12px 16px; text-align: center; color: var(--text2); font-size: 13px; border-radius: 22px; background: rgba(36, 40, 44, .72); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }

/* ---------- auth ---------- */
/* Telegram iOS sign-in: icon + title + one line, fields grouped in one card, capsule button pinned to the bottom */
/* planet horizon with a cyan rim behind the logo; the tall art on phones, the wide art on landscape screens */
.auth { background: url(/img/planet.webp) center top / 100% auto no-repeat, var(--bg); position: fixed; inset: 0; overflow-y: auto; display: flex; justify-content: center; padding: calc(16px + var(--sat)) var(--gutter) calc(14px + var(--sab)); }
.auth-card { width: 100%; max-width: 400px; min-height: 100%; display: flex; flex-direction: column; }
.auth-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: max(28px, 7vh); }
.auth-logo { width: min(280px, 74vw); height: auto; margin-top: max(30px, 8vw); filter: drop-shadow(0 0 28px rgba(70, 219, 233, .14)); user-select: none; -webkit-user-drag: none; }
.auth h1 { margin: 36px 0 8px; font-size: 23px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; }
.auth-top > p { margin: 0 0 32px; max-width: 300px; font-size: 14px; line-height: 21px; color: var(--muted); }
.auth form { width: 100%; text-align: left; }
.auth .callout { max-width: none; text-align: left; }
.af-list { display: flex; flex-direction: column; gap: 20px; }
.af > label { display: block; margin: 0 0 8px 4px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text2); }
.af-box { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 16px; border-radius: 16px; background: #1c1c1e; cursor: text; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.af-box:focus-within { background: #2a2a2e; }
.af-box > svg.i, .af-box .at { flex: none; width: 22px; color: var(--muted); transition: color .15s; }
.af-box .at { font-size: 16px; font-weight: 500; text-align: center; line-height: 1; }
.af-box:focus-within > svg.i, .af-box:focus-within .at { color: var(--accent); }
.af-box input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); caret-color: var(--accent); }
.af-box input::placeholder { color: #636366; }
.af-box input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 60px #1c1c1e; }
.af-box .eye { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; color: var(--muted); }
.af-box .eye:active { background: rgba(255, 255, 255, .08); }
.af small { display: block; margin: 8px 4px 0; font-size: 12px; line-height: 18px; color: var(--muted); }
.auth .err { padding: 14px 4px 0; font-size: 13px; line-height: 19px; min-height: 0; }
.auth .err:empty { display: none; }
.af.bad .af-box, .af.bad .af-box:focus-within { background: rgba(255, 69, 58, .12); box-shadow: inset 0 0 0 1.5px var(--danger); }
.af.bad > label { color: var(--danger); }
html[data-theme="light"] .auth .btn.ghost { color: var(--text); background: rgba(118, 118, 128, .2); }
.btn:not(:disabled):active { transform: scale(.98); }
.auth-bottom { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: stretch; }
.auth .btn.primary { height: 52px; border-radius: 26px; font-size: 15px; font-weight: 600; }
.auth .btn.primary:disabled { opacity: .6; }
.auth .switch { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.auth .switch button { color: var(--accent); font-weight: 500; padding: 6px 2px; }
.auth .foot { margin-top: 16px; padding-top: 0; font-size: 10.5px; letter-spacing: .04em; text-align: center; opacity: .75; }
.auth .foot svg { vertical-align: -2px; }
@media (min-aspect-ratio: 4/5) { .auth { background-image: url(/img/planet-wide.webp); background-size: max(100%, 900px) auto; } }
/* on a big screen keep it one compact centred column instead of pinning the button to the bottom */
@media (min-height: 600px) and (min-width: 700px) {
  .auth-card { min-height: 0; margin: auto 0; }
  .auth-bottom { margin-top: 0; }
}
.seg { display: flex; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); margin-bottom: 4px; }
.seg button { flex: 1; height: 38px; border-radius: 12px; color: var(--text2); }
.seg button.on { background: rgba(70, 219, 233, .14); color: var(--accent); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text2); padding-left: 4px; }
.input { height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); outline: 0; font-size: 14px; width: 100%; }
textarea.input { height: auto; min-height: 80px; padding: 12px 16px; resize: vertical; }
.input:focus { border-color: var(--line-hi); box-shadow: 0 0 0 3px rgba(70, 219, 233, .08); }
.btn { height: 48px; border-radius: 10px; font-weight: 500; font-size: 14px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .15s, opacity .15s; }
/* Telegram-style: flat solid fill, white label, darker on hover/press, no gradient or glow */
.btn.primary { background: var(--btn); color: #fff; }
.btn.primary:hover { background: var(--btn-hover); }
.btn.primary:active { background: var(--btn-active); }
.btn.primary:disabled { opacity: .5; background: var(--btn); }
.btn.ghost { background: rgba(255, 255, 255, .06); color: var(--text); }
.btn.ghost:hover { background: rgba(255, 255, 255, .09); }
.btn.ghost:active { background: rgba(255, 255, 255, .12); }
.btn.danger { background: rgba(255, 107, 125, .1); color: var(--danger); }
.btn.danger:hover { background: rgba(255, 107, 125, .16); }
.btn.sm { height: 36px; font-size: 13px; padding: 0 14px; border-radius: 8px; }
.err { color: var(--danger); font-size: 12px; min-height: 18px; padding-left: 4px; }
.hint { font-size: 12px; color: var(--muted); padding: 0 4px; line-height: 18px; }
.callout { width: 100%; max-width: 380px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; font-size: 12px; line-height: 18px; color: var(--text2); background: rgba(70, 219, 233, .06); border: 1px solid rgba(70, 219, 233, .2); }
.foot { margin-top: auto; padding-top: 28px; font-family: var(--font-display); font-weight: 400; font-size: 10px; letter-spacing: .34em; color: var(--muted); text-align: center; }

/* ---------- sheets ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-wrap.closing { pointer-events: none; }
.sheet-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet { position: relative; width: 100%; max-width: 520px; max-height: calc(100% - 40px - var(--sat)); overflow-y: auto; padding: 0 var(--gutter) calc(18px + var(--sab)); border-radius: 30px 30px 0 0; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 0; box-shadow: var(--glass-edge), 0 -10px 40px rgba(0, 0, 0, .45); overscroll-behavior: contain; }
/* grab handle */
.sheet:not(.full)::after { content: ""; position: absolute; top: 6px; left: 50%; z-index: 4; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
@media (min-width: 700px) { .sheet:not(.full)::after { display: none; } }
.sheet::before { display: none; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 24px; border-bottom: 1px solid var(--line); } .sheet::before { display: none; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheet h2 { margin: 0; }
/* Telegram iOS sheet header + grouped cards inside sheets */
.sh-head { position: sticky; top: 0; z-index: 3; flex: none; display: flex; align-items: center; height: 64px; margin: 0 calc(-1 * var(--gutter)) 6px; padding: 0 var(--gutter); background: linear-gradient(rgba(30, 33, 38, .96) 70%, rgba(30, 33, 38, 0)); }
.sheet .sh-head h2 { position: absolute; left: 50%; transform: translateX(-50%); max-width: 52%; font-family: var(--font); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-right { margin-left: auto; display: flex; gap: 8px; }
.glass-btn.primary { background: var(--btn); border-color: transparent; color: #fff; box-shadow: none; }
.glass-btn.primary:active { background: var(--btn-active); }
.glass-btn.primary:disabled { opacity: .45; }
.sheet .card { margin: 0 0 20px; background: #2c2c2e; border-radius: 22px; }
.sheet .card.form > * + * { background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 16px) 1px; background-position: 16px 0; background-repeat: no-repeat; }
.sheet .card.form .input { height: 51px; padding: 0 16px; border: 0; border-radius: 0; background-color: transparent; font-size: 15px; box-shadow: none; }
.sheet .card.form .toggle { border-radius: 0; background-color: transparent; }
.sheet .section-label { padding: 4px 16px 8px; }
.sheet .hint { padding: 0 16px; }
.sh-foot { margin: -12px 0 20px; font-size: 12px; line-height: 18px; color: var(--muted); }
.sheet:not(.full) .search { margin: 0 0 10px; }
.sheet .btn { height: 50px; border-radius: 25px; }
.sheet .btn.sm { height: 36px; border-radius: 18px; }
.ask-title { padding: 20px 16px 6px; font-size: 15px; line-height: 22px; font-weight: 600; text-align: center; }
.sheet .stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

/* Telegram iOS full-height sheet (New Message) */
.sheet.full { display: flex; flex-direction: column; height: calc(100% - 10px - var(--sat)); max-height: none; padding: 0; overflow: hidden; background: #1c1c1e; border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
.sheet.full::before { display: none; }
@media (min-width: 700px) { .sheet.full { height: min(760px, calc(100% - 48px)); border-radius: 18px; } }
.sheet.full .sh-head { margin: 0; }
.sheet.full > .search { flex: none; margin: 4px var(--gutter) 12px; }
.nm-body { position: relative; flex: 1; min-height: 0; display: flex; }
.nm-scroll { position: relative; flex: 1; overflow-y: auto; padding-bottom: calc(24px + var(--sab)); overscroll-behavior: contain; }
.nm-act { display: flex; align-items: center; width: 100%; height: 53px; padding-left: var(--gutter); color: var(--accent); font-size: 15px; line-height: 22px; text-align: left; }
.nm-act svg.i { width: 27px; height: 27px; margin-right: 23px; stroke-width: 1.6; }
.nm-act span { flex: 1; align-self: stretch; display: flex; align-items: center; }
.nm-act + .nm-act span { border-top: 1px solid var(--line); }
.nm-act:active, .nm-row:active { background: var(--card-hi); }
.nm-sec { padding: 16px var(--gutter) 6px; font-size: 14px; line-height: 19px; color: var(--muted); }
.nm-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding-left: var(--gutter); text-align: left; }
.nm-row .av { width: 40px; height: 40px; font-size: 14px; box-shadow: none; }
.nm-row .tx { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 30px; border-top: 1px solid var(--line); }
.nm-sec + .nm-row .tx { border-top: 0; }
.nm-row .n { font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-row .s { font-size: 14px; line-height: 19px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-row .s.on { color: var(--accent); }
/* ---------- Baba AI ---------- */
/* the AI page reserves the tab-bar space itself, so the pinned composer measures from the real bottom edge (no stacked padding) */
.view:has(.ai-page) { padding-bottom: 0; }
.ai-page { min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(82px + var(--sab)); }
.ai-title { position: absolute; left: 50%; bottom: 10.5px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 43px; }
.ai-title .ai-ring { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(70, 219, 233, .55)); }
.ai-title span { font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.ai-home { padding: 8px var(--gutter) 20px; }
.ai-sub { max-width: 300px; margin: 2px auto 18px; text-align: center; font-size: 14px; line-height: 21px; color: var(--text2); }
.ai-modes { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter); scrollbar-width: none; }
.ai-modes::-webkit-scrollbar { display: none; }
.ai-modes button { flex: none; height: 36px; padding: 0 16px; border-radius: 18px; background: rgba(118, 118, 128, .18); border: 1px solid transparent; color: var(--text2); font-size: 13px; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.ai-modes button.on { background: rgba(70, 219, 233, .14); border-color: rgba(70, 219, 233, .45); color: var(--accent); box-shadow: 0 0 14px rgba(70, 219, 233, .18); }
.ai-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 10px; padding: 14px 16px; border-radius: 22px; background: #1c1c1e; border: 0; text-align: left; transition: background-color .15s; }
.ai-card:active { background: #2c2c2e; }
.ai-ic { flex: none; width: 30px; display: grid; place-items: center; color: var(--accent); }
.ai-ic svg.i { width: 26px; height: 26px; stroke-width: 1.6; }
.ai-ic.violet { color: #b58cff; }
.ai-card .tx { flex: 1; min-width: 0; }
.ai-card b { display: block; font-size: 15px; line-height: 21px; font-weight: 600; }
.ai-card small { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--muted); }
.ai-card .chev { color: var(--accent); }
.ai-try-label { margin: 18px 0 10px; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ai-try { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-try button { padding: 8px 14px; border-radius: 18px; background: rgba(118, 118, 128, .18); border: 0; font-size: 13px; line-height: 19px; text-align: left; }
.ai-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px var(--gutter) 12px; }
.ai-thread .m { margin: 0; max-width: 85%; }
.m.ai { align-self: flex-start; }
.ai-thread .bubble .txt::after { display: none; }
.ai-typing { display: flex; gap: 4px; padding: 13px 14px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aidot 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-composer { position: sticky; bottom: calc(82px + var(--sab)); z-index: 4; display: flex; align-items: center; gap: 8px; height: 48px; margin: auto var(--gutter) 0; padding: 4px 4px 4px 16px; border-radius: 24px;
  background: rgba(44, 44, 46, .96); box-shadow: 0 -8px 26px 18px #000; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .08); }
/* black strip from the composer down to the tab bar, so scrolled content never shows below the composer */
.ai-composer::after { content: ""; position: absolute; z-index: -1; top: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); height: calc(86px + var(--sab)); background: #000; pointer-events: none; }
.ai-composer input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); }
.ai-composer input::placeholder { color: var(--muted); }
.ai-send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; }

/* Telegram iOS Invite Links */
.item .ic.round { border-radius: 50%; }
.ic.active { background: #34c759; } .ic.used { background: #636366; } .ic.expired { background: #ff453a; }
.iv-row .tx { overflow: hidden; text-overflow: ellipsis; }
.iv-acts { display: flex; gap: 8px; }
.mini-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(118, 118, 128, .24); color: var(--accent); }
.mini-btn.danger { color: #ff453a; }
.mini-btn:active { background: rgba(118, 118, 128, .4); }
.iv-new { padding: 12px; }
.iv-link { padding: 12px 14px; border-radius: 14px; background: rgba(118, 118, 128, .24); font-size: 14px; line-height: 20px; word-break: break-all; }
.iv-btns { display: flex; gap: 10px; margin-top: 12px; }
.iv-btns .btn { flex: 1; }
/* Telegram iOS Contacts + Calls pages */
.clist .nm-row .tx { padding-right: 0; margin-right: var(--gutter); }
.clist > .nm-row:first-child .tx { border-top: 0; }
.clist .nm-row .n b { font-weight: 600; }
/* page-level dividers stop at the right gutter, like Telegram */
.calls-new span { border-bottom: 1px solid var(--line); margin-right: var(--gutter); }
.clist .nm-act span { margin-right: var(--gutter); }
.seg-glass { position: absolute; left: 50%; bottom: 10.5px; transform: translateX(-50%); display: flex; height: 43px; padding: 3px; border-radius: 22px;
  background: rgba(44, 44, 46, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .08); }
.seg-glass button { min-width: 76px; padding: 0 18px; border-radius: 19px; font-size: 15px; font-weight: 500; color: #fff; transition: background-color .2s; }
.seg-glass button.on { background: rgba(255, 255, 255, .14); }
.calls-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 32px; text-align: center; color: var(--muted); font-size: 14px; line-height: 20px; }
.calls-empty > svg.i { width: 44px; height: 44px; stroke-width: 1.3; margin-bottom: 8px; }
.calls-empty b { color: var(--text); font-size: 18px; line-height: 25px; font-weight: 600; }
.az { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; padding: 4px 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.az b { display: block; width: 18px; font-size: 10.5px; line-height: 14.6px; font-weight: 600; text-align: center; color: var(--accent); cursor: pointer; }
.sheet .actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet .actions .btn { flex: 1; }
.pick { max-height: 46vh; overflow-y: auto; margin: 0 calc(-1 * var(--gutter)); }
.pick .row { min-height: 52px; gap: 10px; padding: 6px var(--gutter); }
.pick .row .av { width: 40px; height: 40px; font-size: 14px; box-shadow: none; }
.pick .row .t { font-size: 15px; line-height: 22px; font-weight: 400; }
.pick .row .p { margin-top: 0; font-size: 14px; line-height: 19px; }
.pick .row::after { left: 72px; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); display: grid; place-items: center; flex: none; }
.row.on .check { background: var(--btn); border-color: var(--btn); color: #fff; }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 51px; padding: 10px 16px; border-radius: 22px; background: #2c2c2e; border: 0; text-align: left; width: 100%; font-size: 15px; line-height: 22px; }
.toggle .tx { flex: 1; }
.toggle .tx small { display: block; color: var(--muted); font-size: 12px; line-height: 18px; }
/* iOS switch */
.sw { width: 51px; height: 31px; border-radius: 16px; background: rgba(120, 120, 128, .32); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transition: transform .25s cubic-bezier(.25, 1, .5, 1); }
.toggle.on .sw { background: var(--btn); }
.toggle.on .sw::after { transform: translateX(20px); }

/* ---------- settings lists ---------- */
/* Telegram iOS grouped cards */
.card { margin: 0 var(--gutter) 20px; border-radius: 24px; background: rgba(30, 33, 38, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 4px rgba(0, 0, 0, .25); overflow: hidden; }
.item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 51px; padding: 8px 16px 8px 15px; text-align: left; position: relative; font-size: 15px; line-height: 22px; transition: background-color .15s; }
.item + .item::before { content: ""; position: absolute; top: 0; left: 59px; right: 16px; height: 1px; background: #38383a; }
button.item:active { background: rgba(255, 255, 255, .08); }
.item > svg.i { color: var(--accent); }
.item .ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.item .ic svg.i { width: 19px; height: 19px; stroke-width: 2; }
.item .tx { flex: 1; min-width: 0; }
.item .tx small { display: block; color: #8e8e93; font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; }
.item .val { color: #8e8e93; }
.item .chev { color: #5a5a5f; }
.item.action { color: var(--accent); }
.item.action > svg.i { width: 26px; height: 26px; margin: 0 2px; }
.item.danger .tx { color: #ff453a; }

/* Telegram iOS settings header: glass buttons; the name shrinks into the bar on scroll */
.set-head { position: sticky; top: calc(-1 * var(--sat)); z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: var(--sat) 16px 0; margin-top: calc(-1 * var(--sat)); box-sizing: content-box; }
.set-head::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.set-head.scrolled::before { opacity: 1; }
.set-title { position: absolute; left: 50%; bottom: 20px; max-width: 50%; transform: translate(-50%, 6px); font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s, transform .2s; }
.set-head.scrolled .set-title { opacity: 1; transform: translate(-50%, 0); }
.glass-btn { height: 43px; min-width: 43px; display: grid; place-items: center; border-radius: 22px; color: #fff; font-size: 15px; font-weight: 500;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); transition: background-color .15s, transform .2s cubic-bezier(.2, .9, .3, 1.4); }
.glass-btn:active { transform: scale(.94); }
.glass-btn.pill { padding: 0 16px; }
.glass-btn:active { background: rgba(72, 72, 76, .85); }
.set-profile { display: flex; flex-direction: column; align-items: center; margin-top: -42px; padding: 0 var(--gutter) 34px; text-align: center; }
.set-profile .nm { margin-top: 14px; font-size: 23px; line-height: 32px; font-weight: 500; }
.set-profile .un { margin-top: 4px; font-size: 15px; line-height: 21px; color: #8e8e93; }
.profile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px 8px; text-align: center; }
.profile .nm { font-size: 16px; font-weight: 500; margin-top: 10px; }
.profile .un { color: var(--muted); }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .04em; color: var(--accent); }
.tag { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(70, 219, 233, .12); color: var(--accent); vertical-align: 1px; }
.tag.grey { background: rgba(255, 255, 255, .08); color: var(--text2); }
.tag.red { background: rgba(255, 107, 125, .12); color: var(--danger); }
.soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 70%; padding: 30px; text-align: center; color: var(--text2); }
.soon .orb { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: radial-gradient(circle at 50% 40%, #0f3440, #061118 70%); box-shadow: 0 0 0 1.5px rgba(70, 219, 233, .6), 0 0 40px rgba(70, 219, 233, .35); }
.soon .orb svg { width: 44px; height: 44px; }
.principles { padding: 6px 4px; }
.principles div { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text2); }
.principles div:last-child { border: 0; }
.principles b { color: var(--text); display: block; }

/* Telegram-style toast: solid dark card, centred by margins (not transform) so the animation can't shift it sideways */
.toast { position: fixed; left: 0; right: 0; bottom: calc(96px + var(--sab)); z-index: 80; width: max-content; max-width: min(360px, calc(100% - 32px)); margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: #fff; box-shadow: var(--glass-edge), var(--glass-shadow); font-size: 14px; line-height: 20px; animation: toast-in .25s cubic-bezier(.25, 1, .5, 1); transition: opacity .18s, transform .18s; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 20px; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; }


/* ---------- message extras: voice, reply quote, forwarded, reactions ---------- */
.voice { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 2px 0 4px; }
.v-play { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #032026; }
.m.mine .v-play { background: #fff; color: var(--mine1); }
.v-play svg.i { width: 20px; height: 20px; }
.v-body { flex: 1; min-width: 0; }
.v-wave { display: flex; align-items: center; gap: 2px; height: 26px; }
.v-wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.v-wave i.on { background: var(--accent); }
.m.mine .v-wave i.on { background: #fff; }
.v-dur { margin-top: 3px; font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .6); }
.bubble:has(.voice):not(:has(.txt)) .meta { position: absolute; right: 12px; bottom: 7px; margin: 0; }
.reply-q { display: block; width: 100%; margin: 2px 0 6px; padding: 4px 10px; border-left: 3px solid var(--qc); border-radius: 6px; background: color-mix(in srgb, var(--qc) 14%, transparent); text-align: left; }
.reply-q b { display: block; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--qc); }
.reply-q span { display: block; max-width: 280px; font-size: 13px; line-height: 18px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m.mine .reply-q { --qc: #fff !important; }
.fwd { margin-bottom: 2px; font-size: 12px; line-height: 17px; color: var(--accent); }
.m.mine .fwd { color: rgba(255, 255, 255, .85); }
.fwd b { font-weight: 600; }
.edited { margin-right: 4px; }
.reacts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-top: 6px; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 13px; background: rgba(70, 219, 233, .14); color: var(--accent); font-size: 13px; }
.react span { font-size: 12px; font-weight: 600; }
.react.on { background: var(--accent); color: #032026; }
.m.mine .react { background: rgba(255, 255, 255, .18); color: #fff; }
.m.mine .react.on { background: #fff; color: var(--mine1); }
.bubble .reacts .meta { position: static; margin: 0 0 0 auto; padding-left: 8px; }
.bubble:has(.reacts) .txt::after { display: none; }
.m.flash .bubble { animation: msgflash 1.4s ease-out; }
@keyframes msgflash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (pointer: coarse) { .bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }

/* ---------- pinned bar + select mode ---------- */
.pin-bar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; height: 46px; margin: 14px var(--gutter) -8px; padding-right: 4px; border-radius: 23px;
  background: rgba(44, 44, 46, .82); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, .08); }
.pb-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; padding-left: 14px; text-align: left; }
.pb-main i { flex: none; width: 3px; height: 28px; border-radius: 2px; background: var(--accent); }
.pb-main div { min-width: 0; }
.pb-main b { display: block; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--accent); }
.pb-main span { display: block; font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 12px; height: 64px; padding: var(--sat) var(--gutter) 0; box-sizing: content-box; background: var(--bg); }
.sel-bar b { font-size: 15px; font-weight: 600; }
.glass-btn.danger { color: #ff453a; }
.m.selectable { position: relative; padding-left: 34px; cursor: pointer; }
.m.selectable::before { content: ""; position: absolute; left: 0; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); }
.m.sel::before { border-color: var(--btn); background: var(--btn); box-shadow: inset 0 0 0 6px var(--btn), inset 0 0 0 11px #fff; }
.m.sel .bubble { filter: brightness(1.18); }

/* ---------- message menu (right-click / long-press) ---------- */
.mm-wrap { position: fixed; inset: 0; z-index: 70; }
.mm { position: absolute; width: 260px; transform-origin: top left; }
.mm-react { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; width: max-content; max-width: min(320px, calc(100vw - 16px)); margin-bottom: 8px; padding: 6px; border-radius: 26px;
  background: rgba(44, 44, 46, .94); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mm-react.all { flex-wrap: wrap; border-radius: 18px; }
.mm-react button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; transition: transform .12s; }
.mm-react button:hover { transform: scale(1.18); }
.mm-react button.on { background: rgba(70, 219, 233, .22); }
.mm-react .mm-more { color: var(--text2); background: rgba(118, 118, 128, .24); }
.mm-card { overflow: hidden; padding: 6px 0; border-radius: 16px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 16px 40px rgba(0, 0, 0, .5); }
.mm-card > button { display: flex; align-items: center; gap: 14px; width: 100%; height: 40px; padding: 0 16px; font-size: 14px; text-align: left; }
.mm-card > button svg.i { width: 21px; height: 21px; color: var(--text2); }
.mm-card > button:hover { background: rgba(255, 255, 255, .07); }
.mm-card > button.danger, .mm-card > button.danger svg.i { color: #ff453a; }
.mm-seen { max-height: 200px; overflow-y: auto; margin-top: 6px; padding: 8px 16px 4px; border-top: 6px solid rgba(0, 0, 0, .25); font-size: 13px; color: var(--text2); }
.mm-seen-l { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.mm-seen-l svg.i { color: var(--accent); }
.mm-seen-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mm-seen-row .av { width: 30px; height: 30px; font-size: 11px; box-shadow: none; visibility: visible; }
.mm-seen-row b { display: block; font-size: 13px; font-weight: 500; color: var(--text); }
.mm-seen-row small { display: block; font-size: 11px; color: var(--muted); }

/* typing: animated dots in header / chat list, and a typing bubble in the chat */
.ty-dots { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.ty-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; animation: tydot 1.2s infinite; }
.ty-dots i:nth-child(2) { animation-delay: .15s; } .ty-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tydot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
#ty-bubble { margin-top: 10px; }
#ty-bubble .av.xs { visibility: visible; }
.ty-bubble { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 12px 14px; color: var(--muted); }
.ty-bubble .ty-dots { margin: 0; gap: 4px; }
.ty-bubble .ty-dots i { width: 7px; height: 7px; }
.ty-bubble svg.i { color: var(--accent); }

/* ---------- alert (iOS-style, centred) ---------- */
.alert-wrap { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .45); }
.alert { width: min(290px, 100%); border-radius: 26px; overflow: hidden; text-align: center; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 20px 60px rgba(0, 0, 0, .55); }
.alert-body { padding: 20px 18px 18px; }
.alert-body b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.alert-body p { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: var(--text2); }
.alert-btns { display: flex; border-top: 1px solid rgba(255, 255, 255, .1); }
.alert-btns button { flex: 1; height: 48px; font-size: 15px; color: var(--accent); transition: background-color .15s; }
.alert-btns button + button { border-left: 1px solid rgba(255, 255, 255, .1); }
.alert-btns button:active { background: rgba(255, 255, 255, .08); }
.alert-btns .strong { font-weight: 600; }
.alert-btns .danger { color: #ff453a; font-weight: 600; }

/* ---------- photo viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(20px + var(--sat)) 0 calc(20px + var(--sab)); touch-action: none; }
.viewer-bd { position: absolute; inset: 0; background: #000; }
.viewer img { position: relative; max-width: 100%; max-height: 100%; will-change: transform; }

/* ---------- message menu: blurred chat, lifted bubble ---------- */
.mm-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mm-lift { position: absolute; margin: 0 !important; max-width: none !important; display: flex; overflow: hidden; pointer-events: none; will-change: transform; padding: 0 6px; box-sizing: content-box; translate: -6px 0; }
.mm-lift.mine { justify-content: flex-end; }
.mm-lift > .bubble { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.mm { will-change: transform; }
/* long-press belongs to the menu, not to iOS text selection / image callouts */
@media (pointer: coarse) { #msgs .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
#msgs img { -webkit-touch-callout: none; }

/* ---------- profile action tiles (Telegram iOS info page) ---------- */
.p-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 18px; }
.p-acts button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 62px; border-radius: 14px; background: #2c2c2e; color: var(--accent); font-size: 11px; font-weight: 500; transition: background-color .15s, transform .15s; }
.p-acts button:active { background: #3a3a3c; transform: scale(.96); }
.p-acts button span { color: var(--text); }
.p-acts button.on { background: rgba(26, 148, 164, .22); }
.p-acts svg.i { width: 24px; height: 24px; }

/* pinned bar sits under the header island; messages then start below it */
.chat .pin-bar { margin: calc(68px + var(--sat)) 8px 0; }
.pin-bar:not([hidden]) + .msgs { padding-top: 12px; }
.pin-bar:not([hidden]) + .msgs .day { top: 8px; }


.item svg.i.chev { color: #636366; }


/* ---------- Telegram iOS chat list ---------- */
.list .row { min-height: 78px; padding: 8px var(--gutter); gap: 12px; }
.list .row .av { width: 60px; height: 60px; font-size: 20px; font-weight: 600; }
.list .row + .row::before { left: calc(var(--gutter) + 72px); }
.list .row .t { font-size: 15px; line-height: 22px; font-weight: 600; }
.list .row .p { margin-top: 1px; font-size: 14px; line-height: 20px; color: #8e8e93; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.list .row .right { align-self: stretch; padding: 3px 0 6px; }
.list .row .time { font-size: 14px; line-height: 20px; color: #8e8e93; }
.list .row:active, .list .row.sel { background: rgba(255, 255, 255, .07); }
.av { box-shadow: none; }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 13px; font-weight: 600; color: #fff; background: var(--btn); box-shadow: none; }
.badge.muted { background: #5d5d62; }
/* Settings tab shows your own avatar, ringed when selected */
.ti-av { display: grid; place-items: center; width: 28px; height: 28px; }
.ti-av .av { width: 28px; height: 28px; font-size: 10.5px; }
.tabbar button.on .ti-av .av { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- light theme (Telegram iOS light: white lists, grey grouped pages, frosted white glass) ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fff; --bg2: #f2f2f7; --panel: #fff;
  --card: rgba(118, 118, 128, .08); --card-hi: rgba(118, 118, 128, .14);
  --line: rgba(60, 60, 67, .16); --line-hi: rgba(10, 150, 170, .4);
  --text: #000; --text2: #3c3c43; --muted: #8e8e93;
  --accent: #0a9fb2; --accent2: #0a9fb2; --glow: rgba(10, 159, 178, .25);
  --glass: rgba(255, 255, 255, .7); --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(0, 0, 0, .05);
  --glass-shadow: 0 6px 22px rgba(0, 0, 0, .1);
}
html[data-theme="light"] body { background: #fff; }
html[data-theme="light"] .side { background: #fff; }
/* sign-in keeps the planet look in every theme: put the night colours back inside .auth */
html[data-theme="light"] .auth {
  color-scheme: dark; color: var(--text);
  --bg: #000; --bg2: #0a0a0a; --card: rgba(118, 118, 128, .12); --card-hi: rgba(118, 118, 128, .2);
  --line: rgba(84, 84, 88, .5); --line-hi: rgba(70, 219, 233, .4);
  --text: #fff; --text2: #aeaeb2; --muted: #8e8e93; --accent: #46dbe9; --accent2: #20a9bb;
}
html[data-theme="light"] body:has(#auth:not([hidden])) { background: #000; }
html[data-theme="light"] .view:has(.set-head) { background: #f2f2f7; }
html[data-theme="light"] .top::before, html[data-theme="light"] .set-head::before { background: rgba(255, 255, 255, .78); }
html[data-theme="light"] .view:has(.set-head) .set-head::before { background: rgba(242, 242, 247, .82); }
html[data-theme="light"] .glass-btn { color: #000; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .08); }
html[data-theme="light"] .glass-btn.solid, html[data-theme="light"] .glass-btn.primary { color: #fff; background: var(--btn); }
html[data-theme="light"] .search { background: rgba(118, 118, 128, .12); box-shadow: none; }
html[data-theme="light"] .search input { color: #000; }
html[data-theme="light"] .tabs { border-bottom-color: rgba(60, 60, 67, .12); }
html[data-theme="light"] .tabs button { color: #8e8e93; }
html[data-theme="light"] .tabs button.on { color: var(--accent); }
html[data-theme="light"] .list .row + .row::before, html[data-theme="light"] .item + .item::before { background: rgba(60, 60, 67, .18); }
html[data-theme="light"] .row:active, html[data-theme="light"] .row.sel, html[data-theme="light"] .list .row:active, html[data-theme="light"] .list .row.sel { background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .row .t svg { color: #8e8e93; }
html[data-theme="light"] .badge.muted { background: #b8b8bd; }
/* frosted white floating tab bar; black glyphs, accent when selected */
html[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 30px rgba(0, 0, 0, .12); }
html[data-theme="light"] .tabbar button { color: #1c1c1e; }
html[data-theme="light"] .tabbar button.on { color: var(--accent); }
html[data-theme="light"] .tabbar .tb-ind { background: rgba(118, 118, 128, .14); }
/* grouped settings */
html[data-theme="light"] .card, html[data-theme="light"] .toggle, html[data-theme="light"] .p-acts button { background: #fff; box-shadow: none; }
html[data-theme="light"] .item .tx small, html[data-theme="light"] .item .val { color: #8e8e93; }
html[data-theme="light"] .item svg.i.chev { color: #c4c4c7; }
html[data-theme="light"] .set-profile .un, html[data-theme="light"] .section-label { color: #6d6d72; }
html[data-theme="light"] .foot { color: #8e8e93; }
/* chat: light wallpaper, white incoming bubbles, pale accent outgoing bubbles */
html[data-theme="light"] .chat { box-shadow: -12px 0 40px rgba(0, 0, 0, .15);
  background: url(/img/pattern.svg) 0 0 / 360px 360px, linear-gradient(160deg, #d6f0e6 0%, #c9e8ea 45%, #bfdcef 100%); }
html[data-theme="light"] .chat-head::before { background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
html[data-theme="light"] .chat-head .who .s { color: #6d6d72; }
html[data-theme="light"] .chat-av { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
html[data-theme="light"] .bk-n { background: #000; color: #fff; }
html[data-theme="light"] .bubble { background: #fff; color: #000; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
html[data-theme="light"] .m.last .bubble::before { background: #fff; }
html[data-theme="light"] .m.mine .bubble { background: #dcf8f2; }
html[data-theme="light"] .m.last.mine .bubble::before { background: #dcf8f2; }
html[data-theme="light"] .bubble .meta { color: rgba(0, 0, 0, .42); }
html[data-theme="light"] .m.mine .bubble .meta { color: #3b9d8a; }
html[data-theme="light"] .m.mine .bubble .meta .read { color: #1aa38c; }
html[data-theme="light"] .bubble.locked { color: #8e8e93; }
html[data-theme="light"] .day, html[data-theme="light"] .sys, html[data-theme="light"] .e2e-note { background: rgba(40, 80, 70, .28); color: #fff; box-shadow: none; }
html[data-theme="light"] .e2e-note svg { color: #fff; }
html[data-theme="light"] .file-chip { background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .composer { background: none; }
html[data-theme="light"] .composer > .c-btn, html[data-theme="light"] .c-field, html[data-theme="light"] .readonly-bar { color: #3c3c43; }
html[data-theme="light"] .composer > .c-btn.send { color: #fff; }
html[data-theme="light"] .composer textarea { color: #000; }
html[data-theme="light"] .reply-bar, html[data-theme="light"] .emoji-panel { background: rgba(255, 255, 255, .86); }
html[data-theme="light"] .pin-bar { background: rgba(255, 255, 255, .78); color: #000; box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .08); }
html[data-theme="light"] .sel-bar { background: #fff; }
/* menus, sheets, alerts, toasts */
html[data-theme="light"] .mm-card, html[data-theme="light"] .mm-react { background: rgba(255, 255, 255, .9); color: #000; }
html[data-theme="light"] .mm-card > button svg.i { color: #3c3c43; }
html[data-theme="light"] .mm-card > button:hover { background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .mm-bd { background: rgba(0, 0, 0, .12); }
html[data-theme="light"] .mm-seen { border-top-color: rgba(0, 0, 0, .06); }
html[data-theme="light"] .sheet { background: #f2f2f7; box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); }
html[data-theme="light"] .sheet.full { background: #f2f2f7; }
html[data-theme="light"] .sh-head { background: linear-gradient(rgba(242, 242, 247, .96) 70%, rgba(242, 242, 247, 0)); }
html[data-theme="light"] .sheet .card { background: #fff; }
html[data-theme="light"] .sheet:not(.full)::after { background: rgba(0, 0, 0, .18); }
html[data-theme="light"] .sheet-bd { background: rgba(0, 0, 0, .25); }
html[data-theme="light"] .alert { background: rgba(255, 255, 255, .9); }
html[data-theme="light"] .alert-btns, html[data-theme="light"] .alert-btns button + button { border-color: rgba(60, 60, 67, .2); }
html[data-theme="light"] .alert-wrap { background: rgba(0, 0, 0, .2); }
html[data-theme="light"] .toast { color: #000; }
html[data-theme="light"] .input { background: #fff; border-color: rgba(60, 60, 67, .18); color: #000; }
html[data-theme="light"] .sw { background: #e9e9eb; }
html[data-theme="light"] .btn.ghost { background: rgba(118, 118, 128, .12); color: #000; }
html[data-theme="light"] .empty .big { color: #3c3c43; }
/* Baba AI + Calls in light mode */
html[data-theme="light"] .ai-card { background: #f2f2f7; }
html[data-theme="light"] .ai-card:active { background: #e5e5ea; }
html[data-theme="light"] .ai-card b, html[data-theme="light"] .ai-card .t { color: #000; }
html[data-theme="light"] .ai-modes button { background: rgba(118, 118, 128, .12); }
html[data-theme="light"] .ai-modes button.on { background: rgba(10, 159, 178, .1); box-shadow: none; }
html[data-theme="light"] .ai-try button { background: rgba(118, 118, 128, .12); color: #000; }
html[data-theme="light"] .ai-composer { background: rgba(255, 255, 255, .86); border-color: rgba(0, 0, 0, .06); box-shadow: 0 -10px 24px 14px #fff; }
html[data-theme="light"] .ai-composer::after { background: #fff; }
html[data-theme="light"] .ai-composer input { color: #000; }
html[data-theme="light"] .seg-glass { background: rgba(255, 255, 255, .78); border-color: rgba(0, 0, 0, .06); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
html[data-theme="light"] .seg-glass button { color: #000; }
html[data-theme="light"] .seg-glass button.on { background: rgba(118, 118, 128, .14); }
html[data-theme="light"] .mini-btn, html[data-theme="light"] .iv-link { background: rgba(118, 118, 128, .12); }
/* light: white glass buttons need a crisper edge and a real drop shadow to read on white (Telegram iOS) */
html[data-theme="light"] .glass-btn { background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .1); }
html[data-theme="light"] .glass-btn:active { background: #f2f2f7; }
html[data-theme="light"] .glass-btn.solid, html[data-theme="light"] .glass-btn.primary { background: var(--btn); box-shadow: 0 4px 14px rgba(26, 148, 164, .35); }
html[data-theme="light"] .chat-head .who, html[data-theme="light"] .composer > .c-btn, html[data-theme="light"] .c-field { background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); }
html[data-theme="light"] .search { background: rgba(118, 118, 128, .14); }
/* the closed chat pane sits off-screen to the right; only cast its shadow while it's open or sliding */
.chat:not(.open), html[data-theme] .chat:not(.open) { box-shadow: none; }

/* sticker empty states (BabaChat's own mascot), gently bobbing like Telegram's animated stickers */
.calls-empty .sticker { width: 170px; height: 170px; margin-bottom: 2px; transform-origin: 50% 85%;
  animation: sticker-in .6s cubic-bezier(.34, 1.56, .64, 1) both, sticker-wiggle 3.6s ease-in-out .8s infinite; }
/* pops in like a Telegram sticker, then gives a little "ring ring" wiggle every few seconds */
@keyframes sticker-in { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
@keyframes sticker-wiggle { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(-7deg) scale(1.04); } 78% { transform: rotate(6deg) scale(1.04); } 82% { transform: rotate(-4deg) scale(1.02); } 86% { transform: rotate(2deg); } 90% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .calls-empty .sticker { animation: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-3deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-4px) rotate(3deg); } }
.calls-empty .btn { margin-top: 14px; border-radius: 22px; padding: 0 18px; }

/* ---------- profile photos ---------- */
.av.has-img { background: #ccc; }
.av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.av.has-img .dot { z-index: 1; }
.set-av { border-radius: 50%; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.set-av:active { transform: scale(.95); }
.ep-photo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: -8px 0 22px; }
.ep-photo > button:first-child { position: relative; border-radius: 50%; }
.ep-photo .av.xl { width: 112px; height: 112px; font-size: 40px; }
.ep-cam { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .28); opacity: 0; transition: opacity .15s; }
.ep-photo > button:first-child:hover .ep-cam, .ep-photo .av:not(.has-img) + .ep-cam { opacity: 1; background: rgba(0, 0, 0, .18); }
.ep-cam svg.i { width: 34px; height: 34px; }
.ep-link { font-size: 15px; color: var(--accent); padding: 4px 10px; }
.ep-link.danger { color: #ff453a; font-size: 14px; }
.at-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: #5e5ce6; font-size: 15px; }
.crop { position: fixed; inset: 0; z-index: 95; background: #000; touch-action: none; --r: 150px; }
.crop canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
/* everything outside the round window is dimmed, like Telegram's photo cropper */
.crop-ring { position: absolute; left: 50%; top: calc(50% - 30px); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62), inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.crop-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 16px 16px calc(18px + var(--sab)); }
.crop-bar input { flex: 1; accent-color: #fff; }
.crop-btn { height: 44px; padding: 0 18px; border-radius: 22px; color: #fff; font-size: 15px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.crop-btn.strong { font-weight: 600; background: var(--btn); }
.ep-photo button .av.xl:not(.has-img) { font-size: 0; }
/* performance: the list column, the chat pane and the message list are independent boxes, so a change in one
   never makes the browser re-lay-out the others (big win on phones) */
.side, .chat { contain: layout style; }
.msgs { contain: content; }
.list .row, .m { contain: layout style; }

/* ---------- Telegram iOS measurements (studied from Telegram's open-source iOS app; BabaChat keeps its cyan accent) ---------- */
/* chat list row: 60 avatar at 16 from the edge, text from 84, title 16 semibold, preview 15 (2 lines), date 14 */
.list .row { gap: 8px; padding: 6px 16px; min-height: 76px; }
.list .row .av { width: 60px; height: 60px; font-size: 23px; }
.list .row .t { font-size: 15px; line-height: 21px; font-weight: 600; }
.list .row .p { font-size: 14px; line-height: 20px; color: #8d8e93; }
.list .row .time { font-size: 13px; line-height: 18px; color: #8d8e93; }
.list .row .right { padding: 4px 0 8px; }
html[data-theme="light"] .list .row .p, html[data-theme="light"] .list .row .time { color: #8e8e93; }
/* hairline separator from the text edge to 16 before the right edge */
.list .row + .row::before { left: 86px; right: 16px; height: 1px; transform: scaleY(.5); transform-origin: top; background: rgba(84, 84, 88, .55); }
html[data-theme="light"] .list .row + .row::before { background: #c8c7cc; }
.list .row.pinned { background: #1c1c1d; }
html[data-theme="light"] .list .row.pinned { background: #f7f7f7; }
/* unread badge: 20 high pill, 12 semibold tabular digits */
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.badge.muted { background: #666; color: #000; }
html[data-theme="light"] .badge.muted { background: #b6b6bb; color: #fff; }
/* letter avatars: vertical two-tone gradients, rounded bold initials */
.av { font-family: ui-rounded, "SF Pro Rounded", var(--font); font-weight: 700; }
.c0 { background: linear-gradient(#00e0e8, #3cc4cd); }
.c1 { background: linear-gradient(#72d5fd, #2a9ef1); }
.c2 { background: linear-gradient(#82b1ff, #665fff); }
.c3 { background: linear-gradient(#a0de7e, #54cb68); }
.c4 { background: linear-gradient(#ffcd6a, #ffa85c); }
.c5 { background: linear-gradient(#ff885e, #ff516a); }
.c6 { background: linear-gradient(#e0a2f3, #d669ed); }
.c7 { background: linear-gradient(#b8c2cc, #8a96a3); }
/* search: 44 capsule, 16 side margins, 10% white (night) / 6% black (day) fill, 17 placeholder */
.search { height: 44px; margin: 2px 16px 8px; border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: none; }
html[data-theme="light"] .search { background: rgba(0, 0, 0, .06); }
.search input { font-size: 15px; }
/* floating glass tab bar: 64 high capsule, 20 side insets, max 500 wide, 10 semibold labels */
.tabbar { height: 64px; border-radius: 32px; left: 20px; right: 20px; max-width: 500px; margin: 0 auto; }
.tabbar .tb-ind { border-radius: 28px; }
.tabbar button { font-size: 10px; font-weight: 600; border-radius: 28px; }
html[data-theme="light"] .tabbar button { color: rgba(0, 0, 0, .8); }
html[data-theme="light"] .tabbar button:not(.on) .ti { background: #959595; }

/* chat bubbles: radius 16, 8 on the sender's side inside a run, tail only on the last; text 17 with 6/11 insets, time 11 */
.bubble { border-radius: 16px; padding: 6px 11px 6px; }
.m.cont .bubble, .m:not(.last) .bubble { border-radius: 16px; }
.m:not(.mine).cont .bubble { border-top-left-radius: 8px; }
.m:not(.mine):not(.last) .bubble { border-bottom-left-radius: 8px; }
.m.mine.cont .bubble { border-top-right-radius: 8px; }
.m.mine:not(.last) .bubble { border-bottom-right-radius: 8px; }
.bubble .txt { font-size: 15px; line-height: 22px; }
.bubble .meta { font-size: 10.5px; line-height: 14px; }
.bubble .txt::after { width: 40px; }
.m.mine .bubble .txt::after { width: 54px; }
.bubble:has(.txt) .meta { right: 9px; bottom: 5px; }
.m { max-width: calc(100% - 36px); margin-top: 6px; }
.m.cont { margin-top: 2px; }
@media (min-width: 600px) { .m { max-width: min(85%, 560px); } }
/* night: incoming #1D1D1D at 90% */
.bubble { background: rgba(29, 29, 29, .9); }
.m.last .bubble::before { background: rgba(29, 29, 29, .9); }
/* date + service pills: 13 medium, 22 tall, fully rounded, black 20% blurred */
.day { font-size: 12px; line-height: 22px; height: 22px; padding: 0 8px; border-radius: 11px; font-weight: 500; background: rgba(0, 0, 0, .2); }
.sys { font-size: 12px; font-weight: 500; background: rgba(0, 0, 0, .2); }
html[data-theme="light"] .day { background: rgba(0, 0, 0, .2); }
html[data-theme="light"] .sys, html[data-theme="light"] .e2e-note { background: rgba(147, 159, 171, .5); }
/* input bar: 40 glass circles either side of a 40 high pill field, 8 side insets */
.composer { gap: 6px; padding: 6px 8px calc(8px + var(--sab)); }
.composer > .c-btn { width: 40px; height: 40px; }
.c-field { min-height: 40px; border-radius: 20px; padding-left: 12px; }
.c-field .c-btn { width: 40px; height: 40px; }
.composer textarea { min-height: 40px; padding: 9px 2px 9px 0; font-size: 15px; line-height: 22px; }
/* chat header: title 17 semibold, subtitle 13, avatar 37 in a 44 target */
.chat-head .who .n { font-size: 15px; line-height: 21px; font-variant-numeric: tabular-nums; }
.chat-head .who .s { font-size: 12px; line-height: 16px; }
.chat-av { width: 44px; height: 44px; display: grid; place-items: center; }
.chat-av .av { width: 37px; height: 37px; font-size: 15px; }

/* ---------- Telegram iOS motion + overlays (studied from Telegram's open-source iOS app) ---------- */
/* push/pop: the default spring, previous screen moves back 30% and dims 10%, thin shadow on the incoming screen */
.chat { transition-duration: .38s; transition-timing-function: cubic-bezier(.38, .7, .125, 1); box-shadow: -3px 0 12px rgba(0, 0, 0, .12); }
.side { transition-duration: .38s; transition-timing-function: cubic-bezier(.38, .7, .125, 1); }
.shell.pushed .side { transform: translateX(-30%); }
.side::after { opacity: calc(var(--push, 0) * .1); transition-duration: var(--dim-t, .38s); }
/* buttons: Telegram dims on press (40% opacity) and fades back over 0.2s, no scaling */
.glass-btn, .c-btn, .ih-btn, .ep-link, .crop-btn, .p-acts button { transition: opacity .2s, background-color .15s; }
.glass-btn:active, .c-btn:active, .ih-btn:active, .ep-link:active, .crop-btn:active { opacity: .4; transform: none; transition: none; }
/* held message shrinks slightly before the menu opens */
#msgs .bubble { transition: transform .2s ease-out; }
#msgs .bubble.holding { transform: scale(.96); }
/* context menu: dim black 60% (night) / navy 20% (day) with a light blur; 240 wide glass panel, 44 rows, 17 text */
.mm-bd { background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-theme="light"] .mm-bd { background: rgba(0, 10, 38, .2); }
.mm { width: 240px; }
.mm-card { border-radius: 22px; padding: 6px 0; background: rgba(37, 37, 37, .78); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
html[data-theme="light"] .mm-card { background: rgba(249, 249, 249, .78); }
.mm-card > button { height: 44px; padding: 0 18px; gap: 12px; font-size: 15px; margin: 0; border-radius: 0; position: relative; }
.mm-card > button::before { content: ""; position: absolute; inset: 0 6px; border-radius: 14px; background: transparent; transition: background-color .2s; z-index: -1; }
.mm-card > button:hover, .mm-card > button:active { background: none; }
.mm-card > button:hover::before, .mm-card > button:active::before { background: rgba(255, 255, 255, .15); }
html[data-theme="light"] .mm-card > button:hover::before, html[data-theme="light"] .mm-card > button:active::before { background: rgba(60, 60, 67, .2); }
.mm-card > button { isolation: isolate; }
.mm-card > button svg.i { width: 22px; height: 22px; }
/* reactions row: 36 items, 8 gaps, 56 tall pill */
.mm-react { height: 56px; padding: 0 6px; gap: 8px; border-radius: 28px; background: rgba(37, 37, 37, .78); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); margin-bottom: 10px; }
html[data-theme="light"] .mm-react { background: rgba(249, 249, 249, .78); }
.mm-react button { width: 36px; height: 36px; font-size: 23px; transition: transform .2s cubic-bezier(.38, .7, .125, 1); }
.mm-react button:hover, .mm-react button:active { transform: scale(1.5); }
/* alerts: 270 wide, radius 14, 44 buttons, title 17 semibold, body 13, dim 50% */
.alert-wrap { background: rgba(0, 0, 0, .5); }
html[data-theme="light"] .alert-wrap { background: rgba(0, 0, 0, .5); }
.alert { width: min(270px, 100%); border-radius: 14px; }
.alert-body { padding: 18px 18px 16px; }
.alert-body b { font-size: 15px; }
.alert-body p { font-size: 12px; line-height: 17px; }
.alert-btns button { height: 44px; }
/* bottom sheets: floating glass card, 38 corners, 6 side inset on phones, dim 40% */
.sheet-bd { background: rgba(0, 0, 0, .4); }
html[data-theme="light"] .sheet-bd { background: rgba(0, 0, 0, .4); }
@media (max-width: 699px) {
  .sheet:not(.full) { width: calc(100% - 12px); margin: 0 6px calc(6px + var(--sab) * .2); border-radius: 38px; border: 0; padding-bottom: calc(18px + var(--sab) * .8); }
}
.mm-react.all { height: auto; padding: 8px; border-radius: 22px; }

/* ---------- closer to Telegram iOS (compared against real iPhone screenshots) ---------- */
/* folder tabs: glass capsule with a sliding lens instead of an underlined strip */
.tabs { margin: 0 16px 6px; padding: 3px; height: 40px; border: 0; border-radius: 20px; display: flex; background: rgba(118, 118, 128, .14); }
.tabs button { position: relative; z-index: 1; height: 34px; border-radius: 17px; font-size: 13px; font-weight: 600; color: var(--text); }
.tabs button.on { color: var(--text); }
.tabs .tab-ind { top: 3px; bottom: auto; left: 3px; height: 34px; border-radius: 17px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  width: calc((100% - 6px) / var(--n, 4)); transform: translateX(calc(100% * var(--t, 0))); background: rgba(255, 255, 255, .16); }
html[data-theme="light"] .tabs { background: rgba(0, 0, 0, .06); }
html[data-theme="light"] .tabs .tab-ind { background: #fff; }
html[data-theme="light"] .tabs button, html[data-theme="light"] .tabs button.on { color: #000; }
.tabs.no-anim .tab-ind { transition: none; }
/* tab bar: solid glyphs everywhere — black/white when idle, accent when selected */
.tabbar .ti, .tabbar button:not(.on) .ti { -webkit-mask-image: var(--ti-on); mask-image: var(--ti-on); background: currentColor; }
.tabbar button { color: #fff; }
html[data-theme="light"] .tabbar button { color: #000; }
html[data-theme="light"] .tabbar button:not(.on) .ti { background: currentColor; }
html[data-theme="light"] .tabbar button.on { color: var(--accent); }
/* encryption notice: a small service pill like Telegram's, not a big box */
.e2e-note { max-width: none; padding: 3px 10px; border-radius: 11px; font-size: 12px; line-height: 18px; font-weight: 500; }
.e2e-note svg { vertical-align: -2px; }
/* settings footer: plain small grey text */
.set-foot { padding: 4px 16px 28px; text-align: center; font-size: 12px; color: var(--muted); }

/* ---------- Telegram chat list details (from Telegram iOS ChatListItem) ---------- */
/* pin: grey filled pin in the badge slot (bottom right) when there is nothing unread */
.pin-ic { display: grid; place-items: center; width: 20px; height: 20px; color: #767677; }
html[data-theme="light"] .pin-ic { color: #b6b6bb; }
.pin-ic svg.i { width: 18px; height: 18px; }
/* mute: small speaker-off right after the title */
.mute-ic { display: inline-grid; color: #8d8e93; flex: none; }
html[data-theme="light"] .mute-ic { color: #a7a7ad; }
.mute-ic svg.i { width: 15px; height: 15px; stroke-width: 2; }
.list .row .t svg.i.xs { width: 14px; height: 14px; }
/* ✓ / ✓✓ before the time for your own last message (accent in day, white at night) */
.list .row .time { display: flex; align-items: center; gap: 3px; }
.tick { display: inline-grid; color: #fff; }
html[data-theme="light"] .tick { color: var(--accent); }
.tick svg.i { width: 17px; height: 17px; stroke-width: 2; }
/* groups: sender on its own line, then one line of message */
.list .row .p.has-au { -webkit-line-clamp: 2; }
.list .row .p .au { display: block; font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .list .row .p .au { color: #000; }
.list .row .p.has-au { display: block; -webkit-line-clamp: unset; }
.list .row .p .tx1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- matched to the Telegram iPhone reference screens ---------- */
/* long-press: reactions sit above the message; divider before "Select" */
.mm-wrap > .mm-react { z-index: 2; margin: 0; }
.mm-card { border-radius: 28px; padding: 8px 0; }
.mm-card > button[data-k="select"] { margin-top: 9px; }
.mm-card > button[data-k="select"]::after { content: ""; position: absolute; left: 18px; right: 18px; top: -5px; height: 1px; background: rgba(255, 255, 255, .15); }
html[data-theme="light"] .mm-card > button[data-k="select"]::after { background: rgba(60, 60, 67, .2); }
/* alerts: rounded card, text then two pill buttons (grey cancel, filled action) */
.alert { width: min(300px, 100%); border-radius: 34px; text-align: left; }
.alert-body { padding: 22px 22px 14px; }
.alert-body b { font-size: 15px; line-height: 22px; }
.alert-body p { font-size: 14px; line-height: 20px; color: var(--text2); }
.alert-btns { gap: 10px; padding: 4px 16px 16px; border: 0; }
.alert-btns button, .alert-btns button + button { height: 48px; border: 0; border-radius: 24px; font-size: 15px; font-weight: 500; }
.alert-btns [data-r="0"] { background: rgba(118, 118, 128, .24); color: var(--text); }
.alert-btns .strong { background: var(--btn); color: #fff; }
.alert-btns .danger { background: #ff3b30; color: #fff; }
.alert-btns button:active { opacity: .7; background: revert-layer; }
/* chat info tiles: icon over a small lowercase accent label */
.p-acts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.p-acts button { height: 64px; border-radius: 16px; background: #1c1c1e; gap: 3px; }
html[data-theme="light"] .p-acts button { background: #fff; }
.p-acts button span { color: var(--accent); font-size: 11px; font-weight: 500; text-transform: lowercase; }
/* settings accent action rows */
.item.action { color: var(--accent); }
.item.action > svg.i { width: 26px; height: 26px; color: var(--accent); margin: 0 2px; }

/* ---------- chat list: archive, swipe actions, edit mode ---------- */
/* each chat row sits in a .crow wrapper so actions can be revealed behind it */
.list .crow { position: relative; overflow: hidden; }
.list .crow > .row { z-index: 1; }
.list .crow + .crow > .row::before { content: ""; position: absolute; top: 0; left: 86px; right: 16px; height: 1px; transform: scaleY(.5); transform-origin: top; background: rgba(84, 84, 88, .55); }
html[data-theme="light"] .list .crow + .crow > .row::before { background: #c8c7cc; }
.list .crow:has(> .row:active) + .crow > .row::before, .list .crow:has(> .row.sel) + .crow > .row::before { opacity: 0; }
/* Telegram iOS 26: the dragged row becomes a capsule, round coloured buttons with labels appear beside it */
.list .crow.on > .row { background: #1c1c1e; }
.list .crow.dl > .row { border-radius: 0 40px 40px 0; }
.list .crow.dr > .row { border-radius: 40px 0 0 40px; }
html[data-theme="light"] .list .crow.on > .row { background: #ececf0; }
.list .crow.on > .row::before, .list .crow.on + .crow > .row::before { opacity: 0; }
.sw-acts { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; width: 0; overflow: hidden; }
.sw-acts.r { right: 0; padding-left: 4px; }
.sw-acts.l { left: 0; padding-right: 4px; }
.sw-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap;
  transition: flex-grow .35s cubic-bezier(.38, .7, .125, 1), opacity .2s, padding .35s cubic-bezier(.38, .7, .125, 1); }
.sw-b i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; transform: scale(calc(.35 + .65 * var(--p, 1))); }
.sw-b i svg.i { width: 23px; height: 23px; }
.sw-b span { opacity: var(--p, 1); }
.sw-b:active i { filter: brightness(.85); }
.sw-b.orange { --c: #ff9500; } .sw-b.red { --c: #ff3b30; } .sw-b.grey { --c: #8e8e93; } .sw-b.acc { --c: var(--btn); } .sw-b.green { --c: #34c759; }
html[data-theme="light"] .sw-b.grey { --c: #b4b4b9; }
/* full swipe: only the outermost action stays, hugging the row's edge */
.sw-acts.r.full .sw-b:not(:last-child), .sw-acts.l.full .sw-b:not(:first-child) { flex-grow: 0; opacity: 0; }
.sw-acts.r.full .sw-b:last-child { align-items: flex-start; padding-left: 8px; }
.sw-acts.l.full .sw-b:first-child { align-items: flex-end; padding-right: 8px; }
.crow.snap > .row { transition: transform .45s cubic-bezier(.38, .7, .125, 1), border-radius .3s; }
.crow.snap .sw-acts { transition: width .45s cubic-bezier(.38, .7, .125, 1); }
/* "Archived Chats" row + Mark as Unread dot */
.arch-av { background: linear-gradient(#b1b1b6, #8e8e93); color: #fff; }
.arch-av svg.i { width: 30px; height: 30px; }
html:not([data-theme="light"]) .arch-av { background: linear-gradient(#7c7c80, #5a5a5e); }
.arch-row .p b { font-weight: 400; color: var(--text); }
.badge.dot { min-width: 20px; width: 20px; padding: 0; }
/* edit mode: selection circles slide in on the left */
.ed-ck { flex: none; width: 0; height: 24px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(235, 235, 245, .3); opacity: 0; transform: scale(.4);
  transition: width .4s cubic-bezier(.38, .7, .125, 1), margin .4s cubic-bezier(.38, .7, .125, 1), opacity .2s, transform .4s cubic-bezier(.38, .7, .125, 1), background-color .15s; }
html[data-theme="light"] .ed-ck { box-shadow: inset 0 0 0 1.5px rgba(60, 60, 67, .3); }
.ed-ck svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.list.editing .ed-ck { width: 24px; margin-right: 4px; opacity: 1; transform: none; }
.list .crow.picked .ed-ck { background: var(--btn); box-shadow: none; color: #fff; }
.list .arch-row { transition: padding .4s cubic-bezier(.38, .7, .125, 1); }
.list.editing .arch-row { padding-left: 52px; }
.list.editing .crow + .crow > .row::before { left: 122px; }
/* archive view hides search + folder tabs */
#view:has(#list.arch) .search, #view:has(#list.arch) .tabs { display: none; }
/* edit bar replaces the tab bar */
.ce-bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(10px + var(--sab)); z-index: 11; display: flex; justify-content: space-between; gap: 10px; pointer-events: none;
  animation: ce-in .35s cubic-bezier(.38, .7, .125, 1); }
.ce-bar .glass-btn { pointer-events: auto; height: 48px; padding: 0 20px; font-size: 15px; }
.ce-bar .glass-btn:disabled { color: var(--muted); }
.ce-bar .glass-btn.danger:not(:disabled) { color: var(--danger); }
.side.ce-on .tabbar { opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .2s, transform .3s; }
.side .tabbar { transition: opacity .2s, transform .3s; }
@keyframes ce-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .ed-ck, .sw-b, .list .arch-row, .side .tabbar { transition: none; } .ce-bar { animation: none; } }

/* ---------- in-chat search (Telegram iOS: glass search field in the header, "N of M" glass bar with ↑ ↓) ---------- */
.bc-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .7; animation: bc-spin .8s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
.chat-search { display: none; }
@media (min-width: 900px) { .chat-head .chat-search { display: grid; margin-left: auto; } .chat-head .chat-search + .chat-av { margin-left: 8px; } }
.chat-head.cs-on { gap: 8px; }
.chat-head.cs-on::before { inset: 0 0 -30px; }
.cs-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 22px; color: var(--muted);
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); animation: cs-in .32s cubic-bezier(.2, .9, .3, 1.1); }
.cs-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; color: var(--text); font-size: 15px; }
.cs-field input::-webkit-search-cancel-button { display: none; }
.cs-field input::placeholder { color: var(--muted); }
.cs-clear { flex: none; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--muted); color: var(--bg2, #000); }
.cs-clear svg.i { width: 12px; height: 12px; stroke-width: 3; }
.chat-head .cs-cancel { flex: none; animation: cs-in .32s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes cs-in { from { opacity: 0; transform: scale(.9); } }
.chat.searching .composer, .chat.searching .reply-bar, .chat.searching .emoji-panel, .chat.searching .readonly-bar { display: none !important; }
.chat.searching .msgs { padding-bottom: calc(74px + var(--sab)); }
.cs-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px var(--gutter) calc(10px + var(--sab)); pointer-events: none; animation: cs-up .32s cubic-bezier(.2, .9, .3, 1); }
.cs-bar > * { pointer-events: auto; }
@keyframes cs-up { from { opacity: 0; transform: translateY(24px); } }
.cs-count { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
.cs-count:has(span:empty):not(:has(.bc-spin)) { visibility: hidden; }
.cs-nav { display: flex; gap: 8px; }
.cs-nav .glass-btn { width: 44px; height: 44px; color: var(--accent); }
.cs-nav .glass-btn:disabled { color: var(--muted); opacity: .55; }
.cs-nav svg.i.up { transform: rotate(180deg); }
mark.cs-hit { color: inherit; background: rgba(255, 204, 0, .4); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 204, 0, .4); }
.m.cs-cur mark.cs-hit { color: #000; background: #ffcc00; box-shadow: 0 0 0 1px #ffcc00; }
html[data-theme="light"] mark.cs-hit { background: rgba(255, 204, 0, .45); }
html[data-theme="light"] .m.cs-cur mark.cs-hit { background: #ffcc00; }
html[data-theme="light"] .cs-field, html[data-theme="light"] .cs-count { box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .08); }
html[data-theme="light"] .cs-clear { color: #fff; background: #b4b4bb; }
@media (prefers-reduced-motion: reduce) { .cs-field, .chat-head .cs-cancel, .cs-bar { animation: none; } .bc-spin { animation-duration: 2.4s; } }

/* ---------- chat info: Telegram profile header + Media · Files · Voice · Links tabs ---------- */
.ci-prof { padding-top: 8px; gap: 2px; }
.ci-prof .av.xl { width: 100px; height: 100px; font-size: 38px; }
.ci-prof .nm { margin-top: 12px; font-size: 22px; line-height: 30px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ci-prof .un { font-size: 14px; line-height: 20px; }
.ci-prof .un.live { color: var(--accent); }
[data-conv-info] .p-acts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 18px 0 16px; }
[data-conv-info] .p-acts button { height: 60px; border-radius: 16px; gap: 3px; }
[data-conv-info] .p-acts button span { color: var(--accent); font-size: 11px; }
.ci-media { margin: 6px calc(-1 * var(--gutter)) 0; }
.ci-tabs { display: flex; width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 6px auto 12px; padding: 4px; gap: 2px; overflow-x: auto; scrollbar-width: none; border-radius: 22px;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 6px 18px rgba(0, 0, 0, .25); }
.ci-tabs::-webkit-scrollbar { display: none; }
.ci-tabs button { flex: none; height: 36px; padding: 0 16px; border-radius: 18px; font-size: 14px; font-weight: 500; color: var(--text); transition: background-color .2s; }
.ci-tabs button.on { background: rgba(255, 255, 255, .12); }
.ci-pane { min-height: 180px; }
.ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.ci-ph { position: relative; aspect-ratio: 1; overflow: hidden; background: rgba(127, 127, 127, .15); border-radius: 0; }
.ci-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-ph img:not([src]) { visibility: hidden; }
.ci-ph:active img { opacity: .8; }
.ci-month { padding: 14px var(--gutter) 6px calc(var(--gutter) + 4px); font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ci-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px var(--gutter) 8px calc(var(--gutter) + 4px); text-align: left; color: var(--text); text-decoration: none; }
.ci-row + .ci-row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--gutter) + 60px); height: 1px; background: var(--line); }
button.ci-row:active, a.ci-row:active { background: rgba(127, 127, 127, .12); }
.ci-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ci-row .tx b { font-size: 15px; line-height: 21px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-row .tx small { font-size: 13px; line-height: 18px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ci-row .tx .u { font-size: 13px; line-height: 18px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ext { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--btn); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.ci-link .av { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; font-weight: 600; }
.ci-vrow .voice { display: contents; }
.ci-vrow .v-play { order: 0; }
.ci-vrow .tx { order: 1; }
.ci-vrow .v-body { order: 2; flex: none; }
.ci-vrow .v-wave { display: none; }
.ci-vrow .v-dur { margin: 0; font-size: 12px; color: var(--muted); }
.ci-vrow.playing .v-dur, .ci-vrow:has(.voice.playing) .v-dur { color: var(--accent); }
.ci-scan { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 16px; font-size: 13px; color: var(--muted); }
.ci-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 32px 26px; text-align: center; color: var(--muted); font-size: 13px; }
.ci-empty svg.i { width: 38px; height: 38px; margin-bottom: 8px; opacity: .6; }
.ci-empty b { color: var(--text); font-size: 15px; font-weight: 600; }
html[data-theme="light"] .ci-tabs { box-shadow: var(--glass-edge), 0 6px 18px rgba(0, 0, 0, .08); }
html[data-theme="light"] .ci-tabs button.on { background: rgba(118, 118, 128, .16); }

/* ---------- send options · scheduled messages · auto-delete timer ---------- */
/* send button long-press menu (Telegram iOS: small glass card above the send button) */
.composer > .c-btn.send { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.so-wrap { position: fixed; inset: 0; z-index: 70; }
.so-menu { position: absolute; width: max-content; min-width: 232px; transform-origin: bottom right; }
.so-menu > button svg.i { color: var(--text); }
/* timer badge on chat avatars */
.ttl-badge { position: absolute; right: -3px; bottom: -3px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--btn); color: #fff; border: 2px solid var(--bg); font-style: normal; }
.ttl-badge svg.i { position: absolute; inset: 1px; width: 16px; height: 16px; opacity: .35; }
.ttl-badge b { position: relative; font-size: 8.5px; line-height: 1; font-weight: 700; letter-spacing: -.2px; }
.av.sm .ttl-badge { width: 19px; height: 19px; right: -4px; bottom: -4px; }
.av.sm .ttl-badge svg.i { width: 13px; height: 13px; }
.av.sm .ttl-badge b { font-size: 7.5px; }
.chat-av .ttl-badge { border-color: transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.av.xs .ttl-badge { display: none; }
/* timer chip in the message field */
.c-field .c-btn.ttl-chip { position: relative; width: 36px; color: var(--accent); }
.ttl-chip svg.i { width: 23px; height: 23px; }
.ttl-chip b { position: absolute; right: 0; bottom: 7px; padding: 0 3px; border-radius: 6px; background: var(--btn); color: #fff; font-size: 9px; line-height: 12px; font-weight: 700; }
/* auto-delete row in chat info + wheel picker sheet */
.toggle.ttl-row { color: inherit; }
.toggle.ttl-row .tx { display: flex; align-items: center; gap: 8px; }
.toggle.ttl-row .ttl-val { color: var(--muted); }
.toggle.ttl-row > svg.i { width: 18px; height: 18px; color: var(--muted); margin-left: -6px; }
.ttl-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 12px 6px; text-align: center; }
.ttl-intro p { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.ttl-orb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--btn); color: #fff; }
.ttl-orb svg.i { width: 36px; height: 36px; }
.wheel { position: relative; height: 200px; margin: 8px 0 18px; }
.wheel-band { position: absolute; left: 0; right: 0; top: 80px; height: 40px; border-radius: 12px; background: rgba(118, 118, 128, .24); pointer-events: none; }
.wheel-in { position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; padding: 80px 0; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.wheel-in::-webkit-scrollbar { display: none; }
.wheel-in button { display: block; width: 100%; height: 40px; scroll-snap-align: start; font-size: 18px; color: var(--muted); transition: color .15s; }
.wheel-in button.on { color: var(--text); font-weight: 500; }
.ttl-done, .sp-go { width: 100%; font-size: 15px; font-weight: 600; }
/* schedule picker */
.sp-presets { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; scrollbar-width: none; }
.sp-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(118, 118, 128, .24); font-size: 13px; font-weight: 500; color: var(--accent); }
.sp-chip:active { background: rgba(118, 118, 128, .4); }
.sp-cal { margin: 0 0 14px; }
.sp-mhead { display: flex; align-items: center; gap: 4px; padding: 0 2px 6px 6px; }
.sp-mhead b { flex: 1; font-size: 15px; line-height: 22px; font-weight: 600; }
.sp-mhead .c-btn { color: var(--accent); }
.sp-mhead .c-btn:disabled { color: var(--muted); opacity: .5; }
.sp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.sp-wd { padding: 6px 0; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--muted); }
.sp-day { justify-self: center; width: 40px; height: 40px; border-radius: 50%; font-size: 16px; color: var(--text); transition: background-color .15s; }
.sp-day:disabled { color: var(--muted); opacity: .55; }
.sp-day.today { color: var(--accent); font-weight: 600; }
.sp-day.on { background: var(--btn); color: #fff; font-weight: 600; }
.sheet .card.sp-rows { margin-bottom: 16px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 0 8px 0 16px; font-size: 15px; }
.sp-row input { height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: rgba(118, 118, 128, .24); color: var(--text); font: inherit; font-size: 15px; color-scheme: dark; }
.sp-go.dim { opacity: .55; }
/* "Scheduled Messages" pill floating over the bottom of the chat */
.sched-bar { position: relative; z-index: 2; height: 0; display: flex; justify-content: center; }
.sched-bar button { position: absolute; bottom: 8px; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 12px; border-radius: 17px; font-size: 13px; font-weight: 500;
  color: var(--accent); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
.sched-bar button:active { transform: scale(.97); }
.sched-bar svg.i.xs { opacity: .7; }
/* scheduled list sheet */
.sch-day { position: static; margin: 4px auto 10px; width: max-content; }
.sch-item { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-bottom: 18px; }
.sch-item .m { margin: 0; max-width: 92%; }
.sch-item .meta svg.i { margin-left: 2px; }
.sch-acts { display: flex; gap: 8px; }
.sch-acts .btn.sm svg.i { width: 16px; height: 16px; }
.sch-foot { display: flex; gap: 6px; align-items: flex-start; margin: 0 4px 6px; }
.sch-foot svg.i { flex: none; margin-top: 2px; }
html[data-theme="light"] .so-menu > button svg.i { color: #000; }
html[data-theme="light"] .ttl-badge { border-color: #fff; }
html[data-theme="light"] .sched-bar button { background: rgba(255, 255, 255, .85); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .1); color: var(--btn); }
html[data-theme="light"] .sp-chip, html[data-theme="light"] .sp-mhead .c-btn, html[data-theme="light"] .ttl-chip { color: var(--btn); }
html[data-theme="light"] .sp-row input { color-scheme: light; background: rgba(118, 118, 128, .12); }
html[data-theme="light"] .sp-day.today:not(.on) { color: var(--btn); }
html[data-theme="light"] .wheel-band { background: rgba(118, 118, 128, .12); }
.sheet:has(.wheel, [data-sched], .sp-cal) .sh-head h2 { max-width: 68%; }

/* ---------- attach menu · polls · location · contact (Telegram iOS) ---------- */
.sheet:has(> .att) { padding: 0; overflow: hidden; }
.att { position: relative; display: flex; flex-direction: column; height: min(640px, calc(100dvh - 90px - var(--sat))); }
.att .sh-head { margin: 0; padding: 0 var(--gutter); }
.att-send { padding: 0 18px; font-size: 15px; font-weight: 600; }
.att-body.pick { max-height: none; margin: 0; }
.att-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--gutter) calc(110px + var(--sab)); overscroll-behavior: contain; }
.att-body:has(+ .att-foot:not(:empty)) { padding-bottom: calc(170px + var(--sab)); }
.att-tabs { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); z-index: 4; display: flex; height: 64px; padding: 4px; border-radius: 32px;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.att-tabs button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 28px; font-size: 10.5px; line-height: 13px; font-weight: 500; color: var(--text); transition: background-color .2s, color .2s; }
.att-tabs button svg.i { width: 26px; height: 26px; }
.att-tabs button.on { color: var(--accent); background: rgba(118, 118, 128, .24); }
.att-foot { position: absolute; left: 12px; right: 12px; bottom: calc(86px + var(--sab)); z-index: 4; }
.att-cap { display: flex; height: 46px; padding: 0 16px; border-radius: 23px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.att-cap input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); caret-color: var(--accent); }
.att-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 calc(-1 * var(--gutter) + 3px); }
.att-grid > * { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #2c2c2e; }
.att-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--accent); font-size: 12px; line-height: 16px; font-weight: 500; text-align: center; }
.att-add svg.i { width: 30px; height: 30px; }
.att-th img, .att-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-gen { height: 100%; display: grid; place-items: center; color: var(--muted); }
.att-vid { position: absolute; left: 6px; bottom: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.att-n { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--btn); box-shadow: 0 0 0 2px #fff; }
.att-x { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .5); }
.att-hint { margin-top: 14px; text-align: center; }
.att-list { overflow: hidden; }
.att-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 8px 16px; text-align: left; }
.att-item + .att-item > div { border-top: 1px solid var(--line); }
.att-item > div { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.att-item:active { background: var(--card-hi); }
.att-item b { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--accent); }
.att-item small { font-size: 13px; line-height: 18px; color: var(--muted); }
.att-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); }
.att-ppl { overflow: hidden; }
.att-ppl .nm-row:first-child .tx { border-top: 0; }
.sheet:not(.full) .att .search { margin: 0 0 12px; }
/* map card shared by the Location tab and the location bubble: drawn streets, never real tiles */
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ma-bg { fill: #23282e; } .ma-st { stroke: #323a42; stroke-width: 3; fill: none; } .ma-road { stroke: #4a545e; stroke-width: 8; fill: none; stroke-linecap: round; }
.ma-water { stroke: #1b4258; stroke-width: 14; fill: none; } .ma-park { fill: #1f3d2d; }
html[data-theme="light"] .ma-bg { fill: #f3f0ea; } html[data-theme="light"] .ma-st { stroke: #fff; } html[data-theme="light"] .ma-road { stroke: #fbd98c; }
html[data-theme="light"] .ma-water { stroke: #a9d5f2; } html[data-theme="light"] .ma-park { fill: #cfe8c3; }
.loc-hero { position: relative; height: 190px; margin: 0 calc(-1 * var(--gutter)) 16px; overflow: hidden; }
.loc-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -92%); line-height: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.loc-pin svg.i { width: 40px; height: 40px; fill: #ff3b30; stroke: #fff; stroke-width: 1.4; }
.loc-pin svg.i circle { fill: #fff; stroke: none; }
.loc-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 5px; margin: -2px 0 0 -6px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.loc-hero .loc-pin { animation: loc-drop .6s cubic-bezier(.38, .7, .125, 1) both; }
@keyframes loc-drop { from { transform: translate(-50%, -160%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loc-hero .loc-pin { animation: none; } }
/* location bubble */
.bubble:has(> .loc) { padding: 4px 4px 6px; }
.bubble:has(> .loc) .meta { padding-right: 8px; }
.loc { width: min(270px, 64vw); }
.loc-map { position: relative; display: block; height: 140px; border-radius: 14px; overflow: hidden; }
.loc-info { padding: 7px 8px 0; }
.loc-info b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.loc-info small { display: block; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m.mine .loc-info small { color: rgba(255, 255, 255, .62); }
.loc-open { display: block; margin: 8px 4px 0; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
html[data-theme="light"] .loc-open { border-top-color: rgba(0, 0, 0, .1); }
.m.mine .loc-open { color: #fff; }
html[data-theme="light"] .m.mine .loc-info small { color: #3b9d8a; }
html[data-theme="light"] .m.mine .loc-open { color: var(--accent); }
/* contact bubble */
.ct { width: min(250px, 62vw); padding-top: 4px; }
.ct-top { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.ct-top .av { box-shadow: none; }
.ct-tx { min-width: 0; }
.ct-tx b { display: block; font-size: 15px; line-height: 21px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tx small { display: block; font-size: 13px; line-height: 18px; color: var(--accent); }
.m.mine .ct-tx small { color: rgba(255, 255, 255, .7); }
.ct-btn { display: block; width: 100%; height: 38px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600; color: var(--accent); }
.m.mine .ct-btn { color: #fff; }
html[data-theme="light"] .ct-btn { border-top-color: rgba(0, 0, 0, .1); }
html[data-theme="light"] .m.mine .ct-tx small, html[data-theme="light"] .m.mine .ct-btn { color: var(--accent); }
/* poll bubble */
.poll { width: min(290px, 66vw); padding-top: 2px; --pl-c: var(--accent); --pl-sub: var(--muted); --pl-line: rgba(255, 255, 255, .1); }
.m.mine .poll { --pl-c: #fff; --pl-sub: rgba(255, 255, 255, .65); --pl-line: rgba(255, 255, 255, .16); }
html[data-theme="light"] .poll { --pl-line: rgba(0, 0, 0, .08); }
html[data-theme="light"] .m.mine .poll { --pl-c: var(--accent); --pl-sub: #3b9d8a; --pl-line: rgba(10, 120, 110, .14); }
.pl-q { font-size: 15px; line-height: 21px; font-weight: 600; }
.pl-kind { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 13px; line-height: 18px; color: var(--pl-sub); }
.pl-avs { display: inline-flex; }
.pl-avs .av.xs { visibility: visible; width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--pl-ring, #1d2226); }
.pl-avs .av.xs + .av.xs { margin-left: -5px; }
.m.mine .pl-avs { --pl-ring: var(--mine1); }
html[data-theme="light"] .pl-avs { --pl-ring: #fff; }
html[data-theme="light"] .m.mine .pl-avs { --pl-ring: #dcf8f2; }
.pl-opts { margin: 8px 0 2px; }
.pl-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 0; text-align: left; font-size: 15px; line-height: 21px; }
.pl-row:disabled { opacity: .6; }
.pl-row .pl-r { flex: 1; min-width: 0; padding: 9px 0; }
.pl-row:not(.res) + .pl-row:not(.res) .pl-r { border-top: 1px solid var(--pl-line); }
.pl-box { flex: none; width: 22px; height: 22px; margin: 9px 2px 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--pl-sub); transition: background-color .15s, border-color .15s; }
.pl-box.sq { border-radius: 6px; }
.pl-box.on { background: var(--pl-c); border-color: var(--pl-c); color: var(--pl-on, #032026); }
.m.mine .pl-box.on, .m.mine .pl-tick { --pl-on: var(--mine1); }
html[data-theme="light"] .pl-box.on, html[data-theme="light"] .pl-tick { --pl-on: #fff; }
.pl-row:not(.res):active .pl-r { opacity: .6; }
.pl-tx { display: flex; align-items: baseline; gap: 8px; }
.pl-tx span { flex: 1; min-width: 0; }
.pl-tx small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pl-sub); }
.pl-row.res { min-height: 46px; }
.pl-row.res .pl-r { padding: 6px 0 4px; }
.pl-l { flex: none; width: 46px; white-space: nowrap; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pl-l b { font-size: 12px; line-height: 21px; font-weight: 700; }
.pl-tick { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--pl-c); color: var(--pl-on, #032026); }
.pl-tick svg.i { width: 13px; height: 13px; stroke-width: 3; }
.pl-bar { height: 4px; margin-top: 6px; }
.pl-bar i { display: block; height: 100%; border-radius: 2px; background: var(--pl-c); }
.pl-row.res:not(.on) .pl-bar i { opacity: .55; }
.pl-foot { display: block; width: 100%; margin-top: 4px; padding: 9px 0 2px; border-top: 1px solid var(--pl-line); text-align: center; font-size: 14px; line-height: 20px; color: var(--pl-sub); }
.pl-foot.act { color: var(--pl-c); font-weight: 500; }
.bubble:has(> .poll) .meta { margin-top: 0; }
/* new poll form + results sheet */
.pl-erow { display: flex; align-items: center; padding-right: 12px; }
.pl-erow .input { flex: 1; }
.pl-del { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(142, 142, 147, .6); }
.pl-left { padding-left: 16px; }
.pl-sheet-q { padding: 0 16px 6px; font-size: 18px; line-height: 25px; font-weight: 600; text-align: center; }
.pl-sec { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px !important; }
.pl-sec span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .card .nm-row:first-child .tx { border-top: 0; }
.pl-none { padding: 14px 16px; font-size: 14px; color: var(--muted); }
html[data-theme="light"] .att-grid > * { background: #e5e5ea; }
html[data-theme="light"] .att-tabs button.on { background: rgba(118, 118, 128, .14); }
html[data-theme="light"] .att-cap input { color: #000; }

/* desktop: the list column never slides back when a chat opens beside it */
@media (min-width: 900px) { .shell.pushed .side { transform: none; } .side::after { display: none; } }

/* ---------- voice notes, recording bar, big emoji, stickers, emoji/sticker panel (Telegram iOS) ---------- */
/* voice note: bars fill with progress (partial bar via --part), accent dot while unplayed, speed pill while active */
.voice { --v-on: var(--accent); --v-off: rgba(255, 255, 255, .3); }
.m.mine .voice { --v-on: #fff; --v-off: rgba(255, 255, 255, .36); }
.m .voice .v-play { transition: box-shadow .2s, transform .15s; }
.m .voice .v-play:active { transform: scale(.92); }
.m .voice.playing .v-play { box-shadow: 0 0 0 4px color-mix(in srgb, var(--v-on) 28%, transparent); }
.m .voice .v-wave { cursor: pointer; touch-action: pan-y; padding: 2px 0; }
.m .voice .v-wave i { background: linear-gradient(90deg, var(--v-on) var(--part, 0%), var(--v-off) 0); }
.m .voice .v-wave i.on, .m .voice.unplayed .v-wave i { background: var(--v-on); }
.v-info { display: flex; align-items: center; gap: 6px; margin-top: 3px; height: 16px; }
.v-info .v-dur { margin: 0; font-variant-numeric: tabular-nums; }
.v-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--v-on); }
.voice.unplayed .v-dot { display: block; }
.v-speed { height: 16px; padding: 0 5px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--v-on); color: var(--v-on); font-size: 10.5px; line-height: 16px; font-weight: 700; }
html[data-theme="light"] .voice { --v-off: rgba(10, 159, 178, .28); }
html[data-theme="light"] .m.mine .voice { --v-on: #1a94a4; --v-off: rgba(26, 148, 164, .3); }
html[data-theme="light"] .v-play { color: #fff; }
html[data-theme="light"] .m.mine .v-play { background: #1a94a4; color: #fff; }
html[data-theme="light"] .v-dur { color: rgba(0, 0, 0, .45); }
html[data-theme="light"] .m.mine .v-dur { color: #3b9d8a; }
/* recording: glass pill with a pulsing red dot, 0:02,54 timer and "‹ Slide to cancel"; the mic swells into a big filled circle */
.composer.recording .rec-ui { height: 40px; padding: 0 34px 0 14px; gap: 8px; border-radius: 20px; transform: none; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
html[data-theme="light"] .composer.recording .rec-ui { background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); color: #000; }
#rec-time { min-width: 62px; font-variant-numeric: tabular-nums; }
.rec-ui .rec-hint { display: flex; align-items: center; gap: 2px; margin: 0 auto; transform: translateX(max(var(--slide, 0px), -50px)); opacity: calc(1 - var(--slide-p, 0)); }
.rec-hint svg.i { width: 18px; height: 18px; }
.composer.recording .mic { position: relative; z-index: 2; background: var(--btn); color: #fff; transform: scale(calc(2.1 + var(--lvl, 0) * .3)); box-shadow: 0 0 0 calc(3px + var(--lvl, 0) * 9px) rgba(26, 148, 164, .25), 0 6px 18px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .12s; }
html[data-theme="light"] .composer.recording .mic { background: var(--btn); color: #fff; }
.composer.recording .mic:active { opacity: 1; } /* it's being held the whole time */
.composer.recording .mic svg.i { transform: scale(.55); }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } .composer.recording .mic { transform: scale(2.1); transition: none; } }
/* big emoji + stickers: no bubble, time in a small pill underneath */
.m .bubble.bare { padding: 0; min-width: 0; background: none !important; box-shadow: none !important; }
.m .bubble.bare::before { display: none; }
.big-emo { font-size: 64px; line-height: 76px; }
.big-emo.n2 { font-size: 50px; line-height: 62px; }
.big-emo.n3 { font-size: 40px; line-height: 52px; }
.stk-img { display: block; width: 160px; height: 160px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stk-unk { display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 28px; border: 2px dashed rgba(142, 142, 147, .5); color: #8e8e93; font-size: 12px; }
.stk-unk svg.i { width: 40px; height: 40px; }
.m .bubble.bare .meta { position: static; width: max-content; height: 20px; margin: 2px 0 0 auto; padding: 0 7px; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="light"] .m .bubble.bare .meta, html[data-theme="light"] .m.mine .bubble.bare .meta, .m.mine .bubble.bare .meta, .m .bubble.bare .meta .read { color: #fff; }
html[data-theme="light"] .m .bubble.bare .meta { background: rgba(0, 0, 0, .24); }
.m .bubble.bare .reply-q, .m .bubble.bare .fwd { width: max-content; max-width: 220px; padding: 4px 10px; border-radius: 12px; background: var(--glass-strong); color: var(--accent); }
.m.mine .bubble.bare .reply-q { --qc: var(--accent) !important; }
.m .bubble.bare .reacts { justify-content: flex-end; }
.m .bubble.stk .meta { position: relative; margin-top: -16px; } /* the sticker art has its own white margin */
/* emoji / sticker panel: category strip on top, scrolling sections, floating "Emoji | Stickers" tabs at the bottom */
.emoji-panel { position: relative; display: flex; flex-direction: column; height: min(300px, 42vh); max-height: none; padding: 0; overflow: hidden; }
.ep-cats { flex: none; display: flex; gap: 2px; padding: 6px 8px 2px; overflow-x: auto; scrollbar-width: none; }
.ep-cats button { flex: none; width: 36px; height: 34px; border-radius: 10px; font-size: 18px; filter: grayscale(1); opacity: .65; color: var(--text2); }
.ep-cats button:hover { opacity: 1; filter: none; }
.ep-cats svg.i { width: 22px; height: 22px; }
.ep-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 56px; }
.ep-h { padding: 12px 0 4px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #8e8e93; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.emoji-panel .ep-grid button { height: 44px; border-radius: 10px; font-size: 27px; line-height: 44px; }
.emoji-panel .ep-grid.stk { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.emoji-panel .ep-grid.stk button { height: auto; aspect-ratio: 1; padding: 4px; border-radius: 16px; transition: transform .15s; }
.emoji-panel .ep-grid.stk button:active { transform: scale(.9); }
.ep-grid.stk img { display: block; width: 100%; height: 100%; }
.ep-tabs { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 20px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .25); }
.emoji-panel .ep-tabs button { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 14px; font-weight: 500; color: var(--text); }
.emoji-panel .ep-tabs button.on { background: rgba(118, 118, 128, .26); }
html[data-theme="light"] .ep-tabs { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); }

/* ---------- matched to Telegram iPhone references, round 2 ---------- */
/* send options: whole chat blurs, the outgoing message previews above the menu */
.so-bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="light"] .so-bd { background: rgba(0, 10, 38, .12); }
.so-prev { position: absolute; max-width: min(80%, 420px); margin: 0 !important; pointer-events: none; }
.so-prev .bubble { box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
.so-menu { z-index: 1; }
/* emoji / sticker panel sits under the message bar, where the keyboard would be */
.chat > .composer { order: 1; }
.chat > .reply-bar { order: 1; }
.chat > .emoji-panel { order: 2; margin: 0; border-radius: 0; height: min(300px, 40vh); padding-bottom: var(--sab); background: var(--glass-strong); }
html[data-theme="light"] .chat > .emoji-panel { background: #f2f2f7; }
.chat:has(> .emoji-panel:not([hidden])) > .composer { padding-bottom: 8px; }

/* ---------- Baba AI home, Telegram-style (grouped cards, capsule switch, floating input) ---------- */
.ai-home { padding: 4px 0 12px; }
.ai-home .card { margin: 0 var(--gutter) 22px; }
.ai-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 32px 22px; text-align: center; }
.ai-hero .ai-ring { width: 76px; height: 76px; margin-bottom: 8px; filter: drop-shadow(0 0 18px rgba(70, 219, 233, .45)); }
.ai-hero b { font-size: 22px; line-height: 30px; font-weight: 700; }
.ai-hero span { max-width: 300px; font-size: 14px; line-height: 20px; color: var(--muted); }
/* capsule switch with a raised pill on the chosen mode, like Telegram's folder bar */
.ai-seg { display: flex; margin: 0 var(--gutter) 20px; padding: 3px; height: 40px; border-radius: 20px; background: rgba(118, 118, 128, .2); }
.ai-seg button { flex: 1; height: 34px; border-radius: 17px; font-size: 13px; font-weight: 600; color: var(--text); transition: background-color .2s, box-shadow .2s; }
.ai-seg button.on { background: rgba(255, 255, 255, .16); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
html[data-theme="light"] .ai-seg { background: rgba(0, 0, 0, .06); }
html[data-theme="light"] .ai-seg button.on { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ai-home .item .tx small { margin-top: 1px; }
.ai-home .item.ai-q { color: var(--accent); min-height: 46px; }
.ai-home .item.ai-q > svg.i { width: 18px; height: 18px; margin: 0 6px 0 4px; color: var(--accent); }
.ai-home .item.ai-q .tx { font-size: 15px; }
.ai-home .section-label { padding-top: 0; }
/* input: the same glass capsule + round send as the chat composer, floating above the tab bar (no black band) */
.ai-composer, html[data-theme="light"] .ai-composer { height: auto; margin: auto var(--gutter) 0; padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: center; }
.ai-composer::after, html[data-theme="light"] .ai-composer::after { display: none; }
.ai-composer .c-field { flex: 1; min-height: 44px; padding: 0 16px; align-items: center; border-radius: 22px; }
.ai-composer input { font-size: 15px; }
.ai-send { width: 44px; height: 44px; box-shadow: 0 4px 14px rgba(26, 148, 164, .35); }
.ai-page { padding-bottom: calc(92px + var(--sab)); }
.ai-composer { bottom: calc(90px + var(--sab)); }
html[data-theme="light"] .view:has(.ai-home) { background: #f2f2f7; }
html[data-theme="light"] .view:has(.ai-home) .top::before { background: rgba(242, 242, 247, .82); }
/* content fades out under the floating input, like Telegram's bottom bars */
.ai-composer::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -26px; height: calc(170px + var(--sab));
  background: linear-gradient(rgba(4, 6, 8, 0), rgba(4, 6, 8, .92) 34%); pointer-events: none; }
html[data-theme="light"] .ai-composer::before { background: linear-gradient(rgba(255, 255, 255, 0), #fff 34%); }
html[data-theme="light"] .view:has(.ai-home) .ai-composer::before { background: linear-gradient(rgba(242, 242, 247, 0), #f2f2f7 34%); }
.ai-composer { position: sticky; isolation: isolate; }
.ai-home .item.ai-q { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.ai-home .item.ai-q .tx { font-size: 14px; line-height: 20px; }
.ai-home .item.ai-q > svg.i { margin-top: 1px; }
.ai-home { padding-bottom: 40px; }

/* ---------- QR code (Telegram iOS: full-screen card on a soft gradient, glass buttons) ---------- */
.qr-page, .qr-scan { position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(70px + var(--sat)) 24px calc(90px + var(--sab));
  background: radial-gradient(120% 80% at 50% 0%, #1a6f7a, #0b2830 55%, #050b0e); color: #fff; }
html[data-theme="light"] .qr-page { background: radial-gradient(120% 80% at 50% 0%, #bfeef2, #8fd3db 50%, #5fb9c4); }
.qr-top { position: absolute; top: calc(10px + var(--sat)); left: 16px; right: 16px; display: flex; justify-content: space-between; }
.qr-top .glass-btn.pill { display: flex; gap: 6px; align-items: center; }
.qr-card { position: relative; width: min(300px, 80vw); padding: 56px 26px 22px; border-radius: 34px; background: #fff; color: #10232b; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.qr-card > .av { position: absolute; top: -44px; left: 50%; transform: translateX(-50%); width: 88px; height: 88px; font-size: 29px; box-shadow: 0 0 0 5px #fff; }
.qr-code { display: block; width: 100%; height: auto; color: #10232b; }
.qr-card b { display: block; margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: .02em; word-break: break-all; color: #0f7f8d; }
.qr-hint { max-width: 280px; margin: 0; text-align: center; font-size: 13px; line-height: 19px; opacity: .8; }
.qr-bottom { position: absolute; bottom: calc(24px + var(--sab)); display: flex; gap: 16px; }
.qr-page .glass-btn, .qr-scan .glass-btn { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.qr-scan { background: #000; padding: 0; }
.qr-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-frame { position: relative; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 28px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); }
.qs-frame i { position: absolute; width: 44px; height: 44px; border: 4px solid #fff; }
.qs-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 28px; }
.qs-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 28px; }
.qs-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 28px; }
.qs-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 28px; }
.qs-hint { position: absolute; bottom: calc(60px + var(--sab)); margin: 0; padding: 8px 14px; border-radius: 18px; background: rgba(0, 0, 0, .45); font-size: 14px; }

/* ---------- chat info, Telegram iOS layout ---------- */
[data-conv-info] .card.ci-card, .sheet .card.ci-card { margin: 0 0 18px; }
.ci-field { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; }
.ci-field small { font-size: 13px; color: var(--text); opacity: .9; }
.ci-field span { font-size: 15px; line-height: 22px; color: var(--accent); word-break: break-word; }
.ci-field .ci-about { color: var(--text); }
.ci-card .item + .ci-field, .ci-field + .item { border-top: 0; }
.ci-mem { min-height: 56px; }
.ci-mem .av { width: 40px; height: 40px; font-size: 15px; margin-right: 2px; }
.ci-mem .tx { font-size: 15px; font-weight: 500; }
.ci-mem .tx small { font-weight: 400; }
.ci-mem .tx small.live { color: var(--accent); }
.ci-you { color: var(--muted); font-weight: 400; }
.ci-role { flex: none; padding: 2px 9px; border-radius: 11px; font-size: 12px; color: var(--accent); background: rgba(70, 219, 233, .12); }
html[data-theme="light"] .ci-role { background: rgba(10, 159, 178, .1); }
[data-conv-info] .item + .item::before { left: 72px; }
[data-conv-info] .item.action + .item::before { left: 72px; }
.item.action > svg.i { flex: none; }
.danger-row, .danger-row > svg.i { color: #ff453a !important; }
.sw-wrap { flex: none; }
.sw-wrap.on .sw { background: var(--btn); }
.sw-wrap.on .sw::after { transform: translateX(20px); }
.p-acts { grid-template-columns: repeat(4, 1fr); }
/* chat info "more" popup */
.dd.mm-card { min-width: 240px; padding: 6px 0; }
.dd.mm-card > button { height: 44px; padding: 0 18px; gap: 14px; border-radius: 0; font-size: 15px; font-weight: 400; }
.dd.mm-card > button svg.i { width: 22px; height: 22px; color: var(--text); }
.dd.mm-card > button.danger, .dd.mm-card > button.danger svg.i { color: #ff453a; }
.dd-sep { display: block; height: 1px; margin: 5px 18px; background: rgba(255, 255, 255, .15); }
html[data-theme="light"] .dd-sep { background: rgba(60, 60, 67, .2); }
.dd-wrap { position: fixed; inset: 0; z-index: 70; }
.dd { position: absolute; }

/* ---------- chat peek (press and hold a chat in the list) ---------- */
.peek-wrap { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(20px + var(--sat)) 14px calc(20px + var(--sab)); }
.peek-wrap > .mm-bd { position: absolute; inset: 0; }
.peek { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, 420px); height: min(56vh, 520px); padding: 0; border-radius: 28px; overflow: hidden; transform: none !important; inset: auto !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); text-align: left; contain: none; }
.peek-head { flex: none; align-self: center; margin: 12px 0 6px; padding: 6px 18px; border-radius: 22px; text-align: center; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.peek-head b { display: block; font-size: 15px; line-height: 20px; }
.peek-head span { display: block; font-size: 11px; line-height: 15px; color: var(--muted); }
.peek-msgs { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 8px 12px 14px; }
.peek-msgs .m { margin: 0; max-width: 82%; }
.peek-msgs .m.mine { align-self: flex-end; }
.peek-msgs .bubble .txt { font-size: 14px; line-height: 20px; }
.peek-menu { position: relative; z-index: 1; align-self: flex-end; width: 250px; margin-right: max(0px, calc((100% - 420px) / 2)); }
.peek-menu > button { display: flex; align-items: center; gap: 14px; width: 100%; height: 44px; padding: 0 18px; font-size: 15px; text-align: left; }
.peek-menu > button svg.i { width: 22px; height: 22px; color: var(--text); }
.peek-menu > button.danger, .peek-menu > button.danger svg.i { color: #ff453a; }
.peek-menu > button.danger { border-top: 1px solid rgba(255, 255, 255, .12); }
html[data-theme="light"] .peek-menu > button.danger { border-top-color: rgba(60, 60, 67, .18); }
/* row shrinks slightly while held, like Telegram */
#list .crow { transition: transform .2s ease-out; }
#list .crow.pressing { transform: scale(.97); }
@media (pointer: coarse) { #list .row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }

/* ---------- C: chat info · member · edit · devices as full-screen pushed pages (Telegram iOS) ---------- */
.sheet.page { display: block; overflow-y: auto; overflow-x: hidden; padding: 0 var(--gutter) calc(24px + var(--sab)); }
.sheet.page .sh-head { margin: 0 calc(-1 * var(--gutter)) 6px; background: none; }
.sheet.page .sh-head::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.sheet.page .sh-head.scrolled::before { opacity: 1; }
.sheet.page .sh-head h2 { transition: opacity .2s; }
.sheet.page:has(> .sh-head + .profile, > .sh-head + [data-conv-info]) .sh-head:not(.scrolled) h2 { opacity: 0; } /* profile pages: title appears once the big name scrolls away */
.sheet.page .sh-right { margin-left: auto; display: flex; gap: 8px; }
.sheet.page > .sh-head + .profile, .sheet.page [data-conv-info] > .profile { margin-top: -44px; padding-top: 0; }
.sheet.page .card { background: #1c1c1e; }
.sheet.page .section-label { padding: 6px 16px 8px; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; }
.sheet.page .hint.sh-foot { margin: -12px 0 22px; padding: 0 16px; font-size: 12px; line-height: 18px; color: var(--muted); }
.sheet.pg-ghost { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 699.98px) {
  .sheet-wrap.page { align-items: stretch; }
  .sheet.page { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; background: #000; box-shadow: none; }
  .sheet.page .sh-head { padding-top: var(--sat); box-sizing: content-box; }
  .sheet-wrap.page .sheet-bd { background: rgba(0, 0, 0, .35); }
}
html[data-theme="light"] .sheet.page .sh-head::before { background: rgba(242, 242, 247, .82); }
html[data-theme="light"] .sheet.page .card { background: #fff; }
@media (max-width: 699.98px) { html[data-theme="light"] .sheet.page { background: #f2f2f7; } }
/* group edit: ✕ left, accent ✓ right */
.sheet.page .glass-btn.primary { width: 43px; padding: 0; }
.sheet.page .ep-photo { margin-top: -54px; }
/* DM card: "username" + @name, QR icon on the right */
.ci-field.ci-un { flex-direction: row; align-items: center; gap: 8px; }
.ci-un .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-qr { flex: none; width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); }
.ci-qr svg.i { width: 26px; height: 26px; }
.ci-qr:active { background: rgba(127, 127, 127, .14); }
/* "more" menu open: the other tiles dim, like Telegram */
.p-acts.dimmed button:not(.ci-hot) { opacity: .4; }
/* channel: Subscribers / Administrators rows */
.ci-links .item .val { margin-left: auto; }
.ci-links .item .chev { margin-left: 6px; }
/* shared groups tab */
.ci-grp .av.sm { flex: none; }
/* Devices */
.dv-card .dv-row { align-items: center; min-height: 72px; }
.dv-row .tx b { display: block; font-weight: 600; font-size: 15px; line-height: 21px; }
.dv-row .tx small.live { color: var(--accent); }
.dv-ic { width: 42px !important; height: 42px !important; border-radius: 10px !important; }
.dv-ic svg.i { width: 24px !important; height: 24px !important; }
.dv-ic.lg { width: 84px !important; height: 84px !important; border-radius: 20px !important; }
.dv-ic.lg svg.i { width: 46px !important; height: 46px !important; }
.dv-prof { gap: 2px; }
.dv-prof .nm { font-size: 20px; font-weight: 600; }
.dv-kill { color: #ff453a; }
.dv-kill > svg.i { width: 26px; height: 26px; margin: 0 2px; color: #ff453a; }
.dv-kill .tx { color: #ff453a; }
.dv-code { display: block; font-size: 14px; line-height: 22px; word-spacing: .3em; }
/* Settings: big name + photo shrink away as the page scrolls (the bar title takes over) */
.set-profile > .set-av, .set-profile > .nm, .set-profile > .un { transform-origin: 50% 0; will-change: transform, opacity; }
.set-profile > .set-av { transform: scale(calc(1 - var(--shrink, 0) * .45)); opacity: calc(1 - var(--shrink, 0) * 1.2); }
.set-profile > .nm { transform: translateY(calc(var(--shrink, 0) * -36px)) scale(calc(1 - var(--shrink, 0) * .35)); opacity: calc(1 - var(--shrink, 0)); }
.set-profile > .un { transform: translateY(calc(var(--shrink, 0) * -40px)); opacity: calc(1 - var(--shrink, 0) * 1.4); }

/* ---------- B: message actions, overlays, viewer, voice bar ---------- */
/* pin / delete choices (in the long-press menu or hanging off a button): text-only rows, wrapping like Telegram */
.mm-card.mm-opts { min-width: 200px; max-width: min(290px, calc(100vw - 16px)); padding: 8px 0; }
.mm-card.mm-opts > button { height: auto; min-height: 44px; padding: 10px 22px; line-height: 22px; white-space: normal; }
.mm-card.mm-opts > button[data-k="select"] { margin-top: 0; }
.ox-wrap { position: fixed; inset: 0; z-index: 96; }
.ox-card { position: absolute; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
/* big reaction panel */
.mm-react.big { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; overflow: hidden; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.mm-react.big button { width: auto; height: auto; }
.rp-top { flex: none; display: flex; align-items: center; gap: 2px; height: 38px; margin: 0 8px 6px; padding: 0 6px 0 10px; border-radius: 19px; background: rgba(118, 118, 128, .24); overflow: hidden; }
.rp-search { flex: none; display: flex; align-items: center; gap: 6px; width: 96px; color: var(--muted); }
.rp-search input { min-width: 0; width: 100%; height: 30px; border: 0; padding: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.rp-search input::-webkit-search-cancel-button { display: none; }
.rp-search:focus-within { width: 150px; }
.rp-cats { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.rp-cats::-webkit-scrollbar { display: none; }
.mm-react.big .rp-cats button { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; filter: grayscale(1); opacity: .65; color: var(--text2); }
.mm-react.big .rp-cats button:hover { transform: none; opacity: 1; filter: none; }
.rp-grid { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 8px; overscroll-behavior: contain; scrollbar-width: none; }
.rp-grid::-webkit-scrollbar { display: none; }
.rp-sec, .rp-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.rp-sec + .rp-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(128, 128, 128, .18); }
.mm-react.big .rp-grid button { height: 44px; border-radius: 12px; font-size: 27px; line-height: 1; }
.mm-react.big .rp-grid button:hover { transform: scale(1.15); }
.mm-react.big .rp-grid button.on { background: rgba(70, 219, 233, .22); }
.rp-none { grid-column: 1 / -1; padding: 28px 0; text-align: center; font-size: 14px; color: var(--muted); }
/* reaction pills: emoji + up to 3 tiny reactor faces in small chats; your own reaction filled with the accent */
.react .r-e { font-style: normal; }
.react.faces { padding: 0 3px 0 7px; gap: 3px; }
.r-avs { display: inline-flex; }
.react .av.r-av { visibility: visible !important; width: 20px; height: 20px; font-size: 8.5px; font-weight: 600; box-shadow: 0 0 0 1.5px var(--r-ring, rgba(20, 24, 28, .9)); }
.react .av.r-av + .av.r-av { margin-left: -6px; }
.react .av.r-av .dot { display: none; }
.react.on, .m.mine .react.on { background: var(--btn); color: #fff; --r-ring: var(--btn); }
.m.mine .react { --r-ring: rgba(16, 76, 86, .9); }
html[data-theme="light"] .react.on, html[data-theme="light"] .m.mine .react.on { background: var(--btn); color: #fff; }
html[data-theme="light"] .react { --r-ring: #fff; }
/* select mode: glass pills on top, glass action bar instead of the composer, clear circles in both themes */
.sel-bar { display: flex; justify-content: space-between; background: none; padding-top: calc(6px + var(--sat)); height: 50px; pointer-events: none; }
.sel-pill { pointer-events: auto; display: grid; place-items: center; height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); }
.sel-bar b.sel-n { font-weight: 600; min-width: 130px; }
html[data-theme="light"] .sel-bar { background: none; }
html[data-theme="light"] .sel-pill { background: rgba(255, 255, 255, .82); color: #000; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .1); }
.chat.selecting > .composer, .chat.selecting > .reply-bar, .chat.selecting > .emoji-panel, .chat.selecting > #sched-bar { display: none; }
.sel-foot { order: 1; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px calc(10px + var(--sab)); }
.sel-foot .glass-btn { width: 48px; height: 48px; }
.sel-foot .glass-btn:disabled { opacity: .4; }
.sel-foot .sf-del { color: #ff453a; }
.m.selectable::before { border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .12); bottom: 10px; left: 4px; }
html[data-theme="light"] .m.selectable::before { border-color: rgba(60, 60, 67, .45); background: rgba(255, 255, 255, .6); }
.m.selectable.sel::before, html[data-theme="light"] .m.selectable.sel::before { border-color: var(--btn); background: var(--btn); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; }
.m.selectable { padding-left: 38px; }
/* forward sheet */
.fwd-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fwd-body .pick { flex: 1; max-height: none; margin: 0; padding-bottom: calc(70px + var(--sab)); }
.fwd-body .pick .row { position: relative; width: 100%; }
.fwd-body .pick .row::after { content: ""; position: absolute; left: 72px; right: 0; bottom: 0; height: .5px; background: var(--line); }
.fwd-body .pick .row:last-child::after { display: none; }
.fwd-seg { position: absolute; bottom: calc(12px + var(--sab)); z-index: 2; }
/* photo viewer: glass bars over the photo (always on black, so always the dark glass); tap the photo to hide them */
.vw-top, .vw-bot { position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; transition: opacity .2s; }
.vw-top { top: 0; padding-top: calc(8px + var(--sat)); }
.vw-bot { bottom: 0; padding-bottom: calc(12px + var(--sab)); }
.viewer.bars-off .vw-top, .viewer.bars-off .vw-bot { opacity: 0; pointer-events: none; }
.vw-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; color: #fff;
  background: rgba(60, 60, 64, .55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vw-btn[hidden] { display: grid; visibility: hidden; }
.vw-btn svg.i { width: 24px; height: 24px; }
.vw-del { color: #fff; }
.vw-title { min-width: 0; max-width: 62%; display: flex; flex-direction: column; align-items: center; padding: 5px 18px; border-radius: 22px; text-align: center; color: #fff;
  background: rgba(60, 60, 64, .55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.vw-title b { max-width: 100%; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-title span { font-size: 11.5px; line-height: 16px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.vw-n { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .8); }
/* voice playback bar under the chat header */
.vbar { position: absolute; z-index: 4; top: calc(62px + var(--sat)); left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px; border-radius: 21px; overflow: hidden;
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); animation: vbar-in .3s cubic-bezier(.38, .7, .125, 1); }
@keyframes vbar-in { from { opacity: 0; transform: translateY(-10px); } }
.vbar button { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 18px; color: var(--text); }
.vbar .vb-pp svg.i { width: 20px; height: 20px; }
.vbar .vb-x svg.i { width: 20px; height: 20px; color: var(--text2); }
.vb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vb-t b { max-width: 100%; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-t span { font-size: 10.5px; line-height: 14px; color: var(--muted); }
.vbar .vb-rate { width: auto; min-width: 40px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .2px; }
.vb-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.chat.has-vbar .pin-bar { margin-top: calc(116px + var(--sat)); }
.chat.has-vbar .pin-bar[hidden] + .msgs { padding-top: 48px; }
.voice .v-speed { display: none !important; }
html[data-theme="light"] .vbar { background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); }
html[data-theme="light"] .vbar .vb-rate { color: var(--btn); }
html[data-theme="light"] .vb-prog { background: var(--btn); }
/* send options: the send button stays sharp above the blur, next to the preview bubble */
.so-send { position: absolute; z-index: 2; margin: 0; display: grid; place-items: center; }
.so-prev { z-index: 1; }
.so-wrap .so-send { border-radius: 50%; border: 0; background: var(--btn); color: #fff; box-shadow: 0 4px 14px rgba(26, 148, 164, .35); }
.chat.selecting > .chat-head, .chat.selecting > .vbar { visibility: hidden; }
.sel-bar { padding-left: var(--gutter); padding-right: var(--gutter); gap: 8px; }
.sel-pill { white-space: nowrap; }

/* ---------- A: chat bubbles + composer (Telegram iPhone parity, round 2) ---------- */
/* 1. light theme: Send stays a filled accent circle with a white icon (the white glass rule above must not win) */
html[data-theme="light"] .composer > .c-btn.send { background: var(--btn); color: #fff; box-shadow: 0 4px 14px rgba(26, 148, 164, .35); }
/* 2. "edited" sits on the last text line: reserve room for it as well as the time */
.bubble:has(.meta .edited) .txt::after { width: 84px; }
.m.mine .bubble:has(.meta .edited) .txt::after { width: 100px; }
.bubble:has(.meta .pin-m) .txt::after { width: 62px; }
.m.mine .bubble:has(.meta .pin-m) .txt::after { width: 78px; }
.bubble:has(.meta .pin-m):has(.meta .edited) .txt::after { width: 102px; }
.m.mine .bubble:has(.meta .pin-m):has(.meta .edited) .txt::after { width: 118px; }
/* 3. reply quote inside your own bubble, light theme: accent name on the pale bubble */
html[data-theme="light"] .m.mine .reply-q { --qc: var(--accent) !important; }
html[data-theme="light"] .m.mine .reply-q span { color: #000; }
/* 4. formatted text: links without underline, `code` as a monospace pill */
.bubble .txt a { text-decoration: none; }
.bubble .txt a:hover { text-decoration: underline; }
.bubble .txt code.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
html[data-theme="light"] .bubble .txt code.mono { background: rgba(0, 0, 0, .07); }
.m.mine .bubble .txt a { color: #fff; font-weight: 500; }
html[data-theme="light"] .m.mine .bubble .txt a { color: var(--accent); font-weight: 400; }
/* 5. "Unread Messages" divider: full-width translucent band before the first unread */
.unread-div { flex: none; align-self: stretch; height: 26px; margin: 8px -10px 2px; display: grid; place-items: center; font-size: 12px; line-height: 16px; color: rgba(235, 245, 248, .7); background: rgba(30, 33, 38, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="light"] .unread-div { color: #6d6d72; background: rgba(255, 255, 255, .62); }
/* 6. photo bubbles: the photo fills the bubble edge to edge; no caption → the time is a dark pill over the photo */
.bubble.ph { padding: 0; }
.bubble.ph img.photo { margin: 0; width: 100%; min-width: 160px; border-radius: inherit; }
.bubble.ph > * + img.photo { border-top-left-radius: 0; border-top-right-radius: 0; }
.bubble.ph img.photo + img.photo { margin-top: 2px; }
.bubble.ph:has(.txt) img.photo, .bubble.ph:has(> .reacts) img.photo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bubble.ph > .from, .bubble.ph > .fwd { padding: 6px 12px 4px; margin: 0; }
.bubble.ph > .reply-q { width: auto; margin: 6px 8px; }
.bubble.ph > .txt { padding: 6px 12px 7px; }
.bubble.ph > .reacts { padding: 6px 10px 7px; }
.bubble.ph:has(.txt) > .meta { right: 10px; bottom: 5px; }
.bubble.ph:not(:has(.txt)) > .meta { position: absolute; right: 8px; bottom: 8px; height: 20px; margin: 0; padding: 0 7px; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bubble.ph:not(:has(.txt)) > .meta .read, .bubble.ph:not(:has(.txt)) > .meta span { color: #fff !important; }
/* 7. pinned message: a tiny pin before the time; the pinned bar title in the normal text colour */
.meta svg.pin-m { width: 12px; height: 12px; margin-right: 2px; fill: currentColor; stroke: none; }
.pb-main b { color: inherit; }
/* 8. reply / edit header + quote inside the text field's glass card, above the textarea */
.c-field { flex-wrap: wrap; }
.c-field > .reply-bar { flex: 0 0 100%; display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 2px 0 0; border-radius: 0; background: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--accent); }
.c-field > .reply-bar[hidden] { display: none; }
.c-field > .reply-bar .rb-tx { padding-left: 8px; }
.c-field > .reply-bar .rb-x { width: 30px; height: 30px; margin-top: 2px; color: var(--muted); }
.c-field > .reply-bar .rb-x svg.i { width: 18px; height: 18px; }
.c-field:has(> .reply-bar:not([hidden])) { border-radius: 22px; }
html[data-theme="light"] .c-field > .reply-bar .rb-tx span { color: #000; }
/* 9. emoji panel open: the smiley turns into a keyboard; the panel is frosted glass */
.c-btn.emo svg.emo-k { display: none; }
.chat:has(> .emoji-panel:not([hidden])) .c-btn.emo svg.emo-s { display: none; }
.chat:has(> .emoji-panel:not([hidden])) .c-btn.emo svg.emo-k { display: block; }
.chat > .emoji-panel, html[data-theme="light"] .chat > .emoji-panel { background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
/* 10. channels: every post on the left under the channel name; subscribers get a big Mute / Unmute button */
.bubble .from.ch-from { color: var(--accent); }
.ch-mute-bar { display: flex; justify-content: center; padding: 6px 10px calc(8px + var(--sab)); }
.ch-mute { min-width: 180px; height: 48px; padding: 0 32px; border-radius: 24px; font-size: 15px; font-weight: 600; color: var(--accent); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.25, 1, .5, 1); }
.ch-mute:active { transform: scale(.96); }
html[data-theme="light"] .ch-mute { background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); }
.bubble .from.ch-from { font-style: normal; }

/* ---------- D: chat-list search mode (Telegram iOS) ---------- */
.side.srch-on #view { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.side.srch-on #view > .top, .side.srch-on #view > #tabs, .side.srch-on #view > #list, .side.srch-on #view > .list-ghost { display: none; }
.side.srch-on #view > .search { flex: none; margin: 8px 72px 8px 16px; }
.side.srch-on .tabbar { opacity: 0; pointer-events: none; transform: translateY(24px); }
.srch-x { position: absolute; z-index: 7; top: calc(var(--sat) + 8px); right: 16px; width: 44px; height: 44px; }
.srch-x svg.i { width: 22px; height: 22px; }
.srch { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(96px + var(--sab)); }
.sr-sec { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter) 6px; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.sr-sec button { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.sr-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px var(--gutter); text-align: left; color: var(--text); }
.sr-row:active { background: var(--card-hi); }
.sr-row .av { width: 42px; height: 42px; font-size: 15px; box-shadow: none; flex: none; }
.sr-row .tx { flex: 1; min-width: 0; }
.sr-row + .sr-row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--gutter) + 54px); height: 1px; background: var(--line); }
.sr-row .n { display: flex; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 600; }
.sr-row .n span, .sr-row:not(.sr-msg) .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .n span { flex: 1; min-width: 0; }
.sr-row .n time { flex: none; font-size: 13px; font-weight: 400; color: var(--muted); }
.sr-row .s { font-size: 14px; line-height: 20px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .s .on { color: var(--accent); }
.sr-msg { min-height: 66px; align-items: flex-start; padding-top: 9px; }
.sr-msg .s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-msg .s i { font-style: normal; color: var(--text); }
.sr-msg .s b { font-weight: 600; color: var(--text); }
.sr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 70px 40px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 20px; }
.sr-empty svg.i { width: 44px; height: 44px; margin-bottom: 8px; opacity: .6; }
.sr-empty b { font-size: 15px; color: var(--text); font-weight: 600; }
.sr-pane .ci-grid { margin-top: 2px; }
.srch-filt { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); z-index: 11; transform: translateX(-50%); display: flex; padding: 4px; border-radius: 26px; width: min(360px, calc(100% - 32px));
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow, 0 8px 30px rgba(0, 0, 0, .3)); }
.srch-filt button { position: relative; z-index: 1; flex: 1; height: 42px; border-radius: 21px; font-size: 14px; font-weight: 600; color: var(--text); }
.srch-filt .sf-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 21px; background: rgba(118, 118, 128, .24); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .4s cubic-bezier(.38, .7, .125, 1); pointer-events: none; }
html[data-theme="light"] .srch-filt { background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 30px rgba(0, 0, 0, .12); }
html[data-theme="light"] .srch-filt .sf-ind { background: rgba(118, 118, 128, .14); }
@media (prefers-reduced-motion: reduce) { .srch-filt .sf-ind { transition: none; } }

/* ---------- D: chat list edit mode + swipe ---------- */
.list.editing .row.pinned .right > * { display: none; }
.list.editing .row.pinned .right { justify-content: center; }
.list.editing .row.pinned .right::after { content: ""; width: 22px; height: 14px; margin: auto 2px; opacity: .45; color: var(--muted);
  background: linear-gradient(currentColor 0 0) top / 100% 1.6px no-repeat, linear-gradient(currentColor 0 0) center / 100% 1.6px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 1.6px no-repeat; }

/* ---------- D: New Group / New Channel ---------- */
.sheet .sh-head h2:has(.ng-count) { display: flex; flex-direction: column; align-items: center; line-height: 20px; }
.ng-count { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.sheet .sh-head .ng-next { color: var(--accent); font-weight: 600; }
.sheet .sh-head .ng-next.dim { color: var(--muted); }
html[data-theme="light"] .sheet .sh-head .ng-next:not(.dim) { color: var(--btn); }
.ng-field { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; max-height: 128px; overflow-y: auto; margin: 4px var(--gutter) 8px; padding: 6px 14px; border-radius: 22px; background: rgba(118, 118, 128, .2); }
.ng-field input { flex: 1 0 120px; min-width: 0; height: 32px; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); }
.ng-field input::placeholder { color: #8e8e93; }
.ng-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ng-chips { display: contents; }
.ng-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 3px; border-radius: 15px; background: rgba(118, 118, 128, .24); font-size: 14px; color: var(--text); max-width: 100%; }
.ng-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-chip .av { width: 24px; height: 24px; font-size: 10px; box-shadow: none; }
.ng-chip:active { background: var(--btn); color: #fff; }
.ng-row { gap: 12px; padding-left: 14px; }
.ng-ck { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(235, 235, 245, .32); transition: background-color .18s, box-shadow .18s; }
.ng-ck svg.i { width: 15px; height: 15px; stroke-width: 2.8; }
.ng-row.on .ng-ck { background: var(--btn); box-shadow: none; color: #fff; }
.ng-row .tx { padding-right: 16px; }
.ng-body .nm-sec { padding-left: var(--gutter); }
html[data-theme="light"] .ng-field { background: rgba(118, 118, 128, .12); }
html[data-theme="light"] .ng-field input { color: #000; }
html[data-theme="light"] .ng-chip { background: rgba(118, 118, 128, .14); }
html[data-theme="light"] .ng-ck { box-shadow: inset 0 0 0 1.5px #c7c7cc; }
.sheet .card.ng-namecard { display: flex; align-items: center; gap: 14px; margin: 14px var(--gutter) 22px; padding: 14px 16px; }
.ng-cam { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ng-cam svg.i { width: 28px; height: 28px; }
.ng-namecard input, .ng-about input { flex: 1; min-width: 0; height: 44px; background: none; border: 0; outline: 0; font-size: 17px; color: var(--text); }
.sheet .card.ng-about { margin: 0 var(--gutter) 6px; padding: 0 16px; }
.ng-about input { font-size: 15px; }
.ng-hint { margin: 0 var(--gutter) 0 calc(var(--gutter) + 16px); }
.sheet .card.ng-members { margin: 0 var(--gutter); }
.ng-members .nm-row { padding-left: 16px; }
.ng-members .nm-row:first-child .tx { border-top: 0; }
html[data-theme="light"] .ng-cam { color: var(--btn); background: rgba(26, 148, 164, .1); }
html[data-theme="light"] .ng-namecard input, html[data-theme="light"] .ng-about input { color: #000; }
/* New Message / New Group pickers: rows sit on white in the light theme (Telegram iOS) */
html[data-theme="light"] .sheet.full:has(.nm-body) { background: #fff; }
html[data-theme="light"] .sheet.full:has(.nm-body) .sh-head { background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0)); }

/* ---------- D: New Poll form ---------- */
.pl-qcard .input + .input { font-size: 15px; }
.pl-add { display: flex; align-items: center; gap: 12px; width: 100%; height: 51px; padding: 0 16px; color: var(--accent); font-size: 15px; text-align: left; }
.pl-add svg.i { width: 20px; height: 20px; }
html[data-theme="light"] .pl-add { color: var(--btn); }
.pl-sets .toggle { gap: 14px; }
.pl-tile { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; }
.pl-tile svg.i { width: 19px; height: 19px; }
.pl-sets .toggle + .toggle { background-position: 60px 0; background-size: calc(100% - 60px) 1px; }
.pl-d { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--pl-sub, var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- D: schedule picker ---------- */
.sp-presets { flex-wrap: wrap; overflow: visible; }
.sp-chip { white-space: nowrap; }
.sp-mhead .c-btn { width: 36px; height: 36px; display: grid; place-items: center; }
.sp-mhead .c-btn svg.i { width: 22px; height: 22px; }
.sp-tpill { position: relative; display: inline-grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(118, 118, 128, .24); font-size: 15px; }
.sp-tpill b { font-weight: 400; }
.sp-tpill input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
html[data-theme="light"] .sp-tpill { background: rgba(118, 118, 128, .12); }

/* ---------- D: attach sheet — caption + send together, ✓N badge ---------- */
.att-cnt { display: inline-flex; align-items: center; gap: 2px; height: 43px; margin-left: 10px; padding: 0 14px 0 11px; border-radius: 22px; background: var(--btn); color: #fff; font-size: 15px; font-weight: 600; }
.att-cnt svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.att-cap { align-items: center; padding-right: 5px; }
.att-go { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; }
.att-go svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.att-go:active { opacity: .7; }

/* ---------- E: last seen · Privacy and Security · blocked users ---------- */
.sr-row .s .on { color: var(--accent); }
.ps-opt { gap: 12px; padding-left: 16px; }
.ps-opt .ps-ck { flex: none; width: 22px; display: grid; place-items: center; color: transparent; }
.ps-opt .ps-ck svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.ps-opt.on .ps-ck { color: var(--accent); }
.ps-opts .item + .item::before { left: 50px; }
.bk-row { gap: 12px; }
.bk-row .av { flex: none; }
.bk-list .item + .item::before { left: 66px; }
.bk-row .tx small.live { color: var(--accent); }
.bk-un { flex: none; height: 30px; padding: 0 14px; border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bk-un:active { opacity: .6; }
.bk-pick { padding: 0; overflow: hidden; }
.bk-pick .nm-row:first-child .tx { border-top: 0; }
.bk-pick .nm-row .s { color: var(--muted); font-size: 13px; }
.bk-pick .nm-row .s.on { color: var(--accent); }
.item.bk-off .tx { color: var(--accent); }
.ci-block .tx { font-size: 15px; }
.bk-bar .ch-mute { color: var(--accent); }

/* ---------- G: chat themes (wallpaper + outgoing bubble) · text size · Appearance page · Notifications banner ---------- */
html.wp-on .chat, html.wp-on[data-theme="light"] .chat { background: var(--wp-pat) 0 0 / 360px 360px, var(--wp-bg); }
html.wp-on[data-theme="light"] .m.mine .bubble { background: var(--out1); }
html.wp-on[data-theme="light"] .m.last.mine .bubble::before { background: var(--out1); }
html.wp-on[data-theme="light"] .m.mine .bubble .meta, html.wp-on[data-theme="light"] .m.mine .bubble .meta .read { color: var(--out-meta); }
html.wp-on .m .bubble.bare { background: none !important; }
#msgs .bubble .txt { font-size: var(--msg-fs, 17px); line-height: calc(var(--msg-fs, 17px) + 5px); }
/* live preview: two sample bubbles on the current wallpaper */
.sheet .card.ap-card { overflow: hidden; }
.ap-prev { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; background: var(--wp-pat) 0 0 / 360px 360px, var(--wp-bg); }
.ap-m { display: flex; }
.ap-m.out { justify-content: flex-end; }
.ap-bub { position: relative; max-width: 80%; padding: 6px 11px 6px; border-radius: 16px; background: #1d2226; color: #fff; text-align: left; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.ap-m.in .ap-bub { border-bottom-left-radius: 5px; }
.ap-m.out .ap-bub { border-bottom-right-radius: 5px; background: linear-gradient(170deg, var(--out2), var(--out1)); }
.ap-bub .txt { font-size: var(--msg-fs, 17px); line-height: calc(var(--msg-fs, 17px) + 5px); }
.ap-bub .txt::after { content: ""; display: inline-block; width: 48px; }
.ap-m.out .ap-bub .txt::after { width: 62px; }
.ap-t { position: absolute; right: 10px; bottom: 5px; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; line-height: 16px; color: rgba(235, 245, 248, .5); }
.ap-m.out .ap-t { color: var(--out-meta); }
.ap-q { margin: 2px 0 4px; padding: 3px 9px; border-left: 3px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ap-q b { display: block; font-size: 12px; line-height: 17px; color: var(--accent); }
.ap-q span { display: block; font-size: 13px; line-height: 18px; }
html[data-theme="light"] .ap-bub { background: #fff; color: #000; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
html[data-theme="light"] .ap-m.out .ap-bub { background: var(--out1); }
html[data-theme="light"] .ap-t { color: rgba(0, 0, 0, .42); }
html[data-theme="light"] .ap-m.out .ap-t { color: var(--out-meta); }
/* colour-theme tiles (row on Appearance, 3-column grid on Chat Themes) */
.ap-row { display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ap-row::-webkit-scrollbar { display: none; }
.ap-row + .item::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--line); }
.ap-tile { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; color: var(--muted); }
.ap-sw { position: relative; display: block; width: 100%; height: 104px; border-radius: 12px; overflow: hidden; transition: transform .2s; }
.ap-tile:active .ap-sw { transform: scale(.95); }
.ap-tile.on .ap-sw { outline: 2.5px solid var(--accent); outline-offset: 2.5px; }
.ap-pb { position: absolute; height: 17px; border-radius: 9px; }
.ap-pb.out { top: 14%; right: 8%; width: 58%; }
.ap-pb.in { top: 40%; left: 8%; width: 62%; background: #fff; }
.ap-tile.ap-dk .ap-pb.in { background: #1d2226; }
.ap-emo { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-size: 19px; line-height: 1; }
.ap-nm { font-size: 11px; line-height: 15px; font-weight: 500; }
.ap-tile.on .ap-nm { color: var(--accent); }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 14px; }
.ap-grid .ap-tile { width: auto; }
.ap-grid .ap-sw { height: auto; aspect-ratio: 3 / 3.7; }
.ap-grid .ap-pb { height: 22px; border-radius: 11px; }
.ap-grid .ap-emo { font-size: 27px; }
/* Text Size slider (iOS style) */
.item.ap-fs { gap: 14px; }
.ap-fs .a1, .ap-fs .a2 { flex: none; color: var(--text); }
.ap-fs .a1 { font-size: 12px; } .ap-fs .a2 { font-size: 19px; }
.ap-fs input[type=range] { flex: 1; min-width: 0; height: 4px; margin: 0; border-radius: 2px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(to right, var(--btn) var(--p, 50%), rgba(120, 120, 128, .32) var(--p, 50%)); }
.ap-fs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0, 0, 0, .12), 0 6px 13px rgba(0, 0, 0, .12); }
.ap-fs input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0, 0, 0, .12), 0 6px 13px rgba(0, 0, 0, .12); }
.ap-ck { flex: none; width: 22px; color: var(--accent); display: grid; place-items: center; }
.item.danger.nf-reset .tx { color: var(--danger); }
html[data-theme="light"] .item.danger.nf-reset .tx { color: #ff3b30; }
/* in-app notification banner: glass card at the top, tap = open the chat, swipe up = dismiss */
.nf-banner { position: fixed; top: calc(8px + var(--sat)); left: 8px; right: 8px; z-index: 95; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px;
  border-radius: 26px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow);
  color: var(--text); text-align: left; font: inherit; transition: opacity .25s, transform .25s; touch-action: pan-x; }
.nf-banner.out { opacity: 0; transform: translateY(-50%) scale(.97); }
.nf-banner .av { flex: none; }
.nf-tx { flex: 1; min-width: 0; }
.nf-tx b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 20px; color: var(--text2); }
.nf-tx i { font-style: normal; color: var(--text); }
.nf-banner { background: rgba(30, 33, 38, .93); }
html[data-theme="light"] .nf-banner { background: rgba(255, 255, 255, .95); }

/* ---------- F: link previews (composer strip + bubble card) ---------- */
.c-field > .lp-bar { flex: 0 0 100%; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 2px 0 0; color: var(--accent); }
.c-field > .lp-bar[hidden] { display: none; }
.lp-bar svg.lp-ic { flex: none; width: 22px; height: 22px; }
.lp-bar .rb-tx { padding-left: 8px; }
.lp-bar .rb-x { width: 30px; height: 30px; color: var(--muted); }
.lp-bar .rb-x svg.i { width: 18px; height: 18px; }
.c-field:has(> .lp-bar:not([hidden])) { border-radius: 22px; }
html[data-theme="light"] .lp-bar .rb-tx span { color: #000; }
.lp-card { --lc: var(--accent); position: relative; display: flow-root; margin: 5px 0 3px; padding: 5px 10px 7px 11px; border-radius: 6px 10px 10px 6px; background: color-mix(in srgb, var(--lc) 12%, transparent); color: inherit; text-decoration: none; overflow: hidden; font-size: 13px; line-height: 18px; }
.lp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lc); }
.lp-card:active { opacity: .7; }
.lp-card b, .lp-card span { display: block; }
.lp-site { color: var(--lc); font-weight: 600; }
.lp-title { font-weight: 600; }
.lp-desc { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.lp-thumb { float: right; width: 54px; height: 54px; margin: 2px 0 4px 10px; border-radius: 6px; object-fit: cover; }
.lp-img { display: block; width: 100%; max-height: 260px; margin-top: 7px; border-radius: 6px; object-fit: cover; background: rgba(0, 0, 0, .15); }
.bubble:has(> .lp-card) { max-width: min(85%, 340px); }
.bubble:has(> .lp-card) .txt::after { display: none; }
.bubble:has(> .lp-card) > .meta { position: static; margin: 1px -2px -1px 0; }
.m.mine .lp-card { --lc: #9ff1f8; }
.m.mine .lp-card .lp-desc, .m.mine .lp-card .lp-title { color: #fff; }
html[data-theme="light"] .m.mine .lp-card { --lc: var(--accent); }
html[data-theme="light"] .m.mine .lp-card .lp-desc, html[data-theme="light"] .m.mine .lp-card .lp-title { color: #000; }
html[data-theme="light"] .lp-card { --lc: #1197a6; }

/* ---------- F: voice recording lock ---------- */
/* glass lock pill above the mic while holding; slide up past it to lock */
.rec-lock { display: none; position: absolute; z-index: 3; right: 8px; bottom: calc(100% + 34px); width: 40px; padding: 8px 0 4px; flex-direction: column; align-items: center; border: 0; border-radius: 20px;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .3); color: #b7bec4;
  transform: translateY(calc(var(--lift, 0px) * .5)); animation: recLockIn .3s cubic-bezier(.34, 1.56, .64, 1); }
.composer.recording .rec-lock { display: flex; }
.rec-lock > span { display: flex; flex-direction: column; align-items: center; }
.rec-lock svg.i { width: 20px; height: 20px; }
.rec-lock .rl-lock svg.i + svg.i { width: 18px; height: 18px; margin-top: -2px; animation: recChev 1.4s ease-in-out infinite; }
.rec-lock .rl-pause, .rec-lock .rl-resume { display: none; }
@keyframes recLockIn { from { opacity: 0; transform: translateY(16px) scale(.8); } }
@keyframes recChev { 50% { transform: translateY(-3px); } }
html[data-theme="light"] .rec-lock { background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); color: #3c3c43; }
/* locked: the pill becomes a round pause / resume button, the big circle becomes Send, the bar shows the timer + "Cancel" */
.composer.rec-locked .rec-lock { height: 40px; padding: 0; justify-content: center; color: #ff453a; transform: none; transition: height .25s; }
.composer.rec-locked .rec-lock .rl-lock { display: none; }
.composer.rec-locked:not(.rec-paused) .rec-lock .rl-pause, .composer.rec-locked.rec-paused .rec-lock .rl-resume { display: flex; }
.composer.rec-locked.rec-paused .rec-lock { color: var(--accent); }
.composer.rec-locked.rec-paused .rec-dot { animation: none; opacity: .4; }
.rec-cancel { display: none; margin: 0 auto; padding: 8px 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; }
.composer.rec-locked .rec-ui .rec-hint { display: none; }
.composer.rec-locked .rec-cancel { display: block; }
.rec-send { display: none !important; }
.composer.rec-locked > .c-btn.mic { display: none; }
.composer.rec-locked > .c-btn.rec-send { display: grid !important; position: relative; z-index: 2; flex: none; background: var(--btn); color: #fff; transform: scale(calc(2.1 + var(--lvl, 0) * .3)); box-shadow: 0 0 0 calc(3px + var(--lvl, 0) * 9px) rgba(26, 148, 164, .25), 0 6px 18px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .12s; }
.composer.rec-locked > .c-btn.rec-send svg.i { transform: scale(.5); }
html[data-theme="light"] .composer.rec-locked > .c-btn.rec-send { background: var(--btn); color: #fff; }
@media (prefers-reduced-motion: reduce) { .rec-lock, .rec-lock .rl-lock svg.i + svg.i { animation: none; } .composer.rec-locked > .c-btn.rec-send { transform: scale(2.1); transition: none; } }

/* ---------- I: group & channel admin pages, more popup, media tabs, new group / channel, devices ---------- */
/* DM info: hairline between the username field and the rows under it */
.ci-card .ci-field + .item::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: #38383a; }
html[data-theme="light"] .ci-card .ci-field + .item::before { background: rgba(60, 60, 67, .18); }
/* "more" popup: Telegram's narrower menu with 17px rows; auto-delete submenu inside it */
.dd.mm-card.ci-dd { min-width: 210px; width: max-content; max-width: 250px; overflow: hidden; }
.dd.mm-card.ci-dd > button { font-size: 15px; padding: 0 16px; gap: 12px; white-space: nowrap; }
.dd.mm-card.ci-dd > button > span { overflow: hidden; text-overflow: ellipsis; }
.ci-dd > button[role="menuitemradio"] svg.i { opacity: 0; color: var(--accent); }
.ci-dd > button.i-cur svg.i, .ox-card > button.i-cur svg.i { opacity: 1; color: var(--accent); }
.ox-card > button.i-opt svg.i { opacity: 0; }
.ox-card > button.i-opt.i-cur svg.i { opacity: 1; color: var(--accent); }
/* Edit: Set Photo */
.i-ce-photo { margin: -20px 0 22px; }
.i-cam-av { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: rgba(70, 219, 233, .16); color: var(--accent); }
.i-cam-av svg.i { width: 42px; height: 42px; }
html[data-theme="light"] .i-cam-av { background: rgba(10, 159, 178, .12); }
.i-ce-photo .ep-link { font-size: 15px; }
.i-tiles .item + .item::before, .i-perm-card .item + .item::before { left: 60px; }
.i-perm-card .item + .item::before { left: 16px; }
.i-tiles .val, .i-perm .val { color: var(--muted); }
/* Chat Admins / Add Admin */
.i-adm-card .item.action + .item::before, .i-adm-card .item + .item::before { left: 72px; }
.i-adm-card .ci-role, html[data-theme="light"] .i-adm-card .ci-role { color: #af52de; background: rgba(175, 82, 222, .14); }
.i-pick { padding: 0; overflow: hidden; }
.i-pick .nm-sec { padding: 10px 16px 4px; font-size: 12px; line-height: 18px; font-weight: 600; }
.i-pick .nm-row .tx { padding-right: 16px; }
.i-pick > .nm-row:first-child .tx, .i-pick .nm-sec + .nm-row .tx { border-top: 0; }
.i-az { position: fixed; right: max(2px, calc((100vw - 520px) / 2 + 2px)); top: 55%; z-index: 4; }
.i-adm-who { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.i-adm-who .av.lg { width: 64px; height: 64px; font-size: 22px; }
.i-adm-who .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.i-adm-who b { font-size: 18px; line-height: 25px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i-adm-who small { font-size: 14px; color: var(--muted); }
.i-rights .item + .item::before { left: 16px; }
.i-ok { color: #34c759; display: grid; place-items: center; }
.i-ok svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.i-adm-foot { position: sticky; bottom: calc(12px + var(--sab)); margin-top: 28px; }
.i-adm-foot .btn, .i-intro-foot .btn, .i-bs-done { width: 100%; height: 50px; border-radius: 25px; font-size: 15px; font-weight: 600; }
/* media tabs: pin under the compact header (name + count) */
[data-conv-info] .ci-media:has(.ci-tabs) { min-height: calc(100dvh - 64px - var(--sat, 0px)); }
[data-conv-info] .ci-tabs { position: sticky; top: 70px; z-index: 2; }
.pg-head h2 .i-sub { display: none; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.pg-head h2 > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.pg-head.i-stuck h2 { opacity: 1 !important; line-height: 20px; text-align: center; }
.pg-head.i-stuck h2 .i-sub { display: block; }
.sheet.page .pg-head.i-stuck::before { opacity: 1; }
.sheet .card.i-vcard { margin: 0 var(--gutter) 14px; padding: 2px 0; overflow: hidden; }
.i-vcard .ci-row { padding-left: 12px; }
.i-vcard .ci-row + .ci-row::before { left: 68px; }
.i-vrow .tx small { display: block; white-space: nowrap; }
.i-vrow .v-body { display: none; }
.i-ptile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ff9500; color: #fff; }
.i-ptile svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
/* "You created a group" + Add Members bar */
.msgs.i-fresh .sys, .msgs.i-fresh .day { display: none; }
.i-made { align-self: center; margin: auto 0; max-width: 300px; padding: 14px 20px 16px; border-radius: 20px; color: #fff; background: rgba(0, 0, 0, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; line-height: 20px; }
.i-made b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; text-align: center; }
.i-made ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.i-made li { display: flex; align-items: center; gap: 8px; }
.i-made li svg.i { flex: none; width: 16px; height: 16px; stroke-width: 2.6; }
.i-amb { position: relative; z-index: 2; flex: none; display: flex; align-items: center; height: 40px; margin: calc(66px + var(--sat)) 8px -48px; border-radius: 20px;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .18); }
.i-amb-go { flex: 1; height: 100%; font-size: 15px; font-weight: 500; color: var(--text); }
.i-amb-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.i-amb-x svg.i { width: 22px; height: 22px; }
.i-amb + .sel-bar + .pin-bar:not([hidden]) { margin-top: 56px; }
.i-amb ~ .msgs { padding-top: calc(120px + var(--sat)); }
html[data-theme="light"] .i-amb { background: rgba(255, 255, 255, .78); }
/* New Group name step: clear ⓧ + Auto-Delete row; inset dividers; picker placeholder never half-cut */
.ng-namecard { position: relative; }
.i-clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -6px; color: #8e8e93; }
.i-clear svg.i { width: 20px; height: 20px; }
.i-clear[hidden] { display: none; }
.sheet .card.i-ng-ttlcard { margin: 0 var(--gutter) 6px; padding: 0; overflow: hidden; }
.i-ng-ttlcard .val { color: var(--muted); }
.i-ng-hint { margin: 0 var(--gutter) 20px calc(var(--gutter) + 16px); }
.ng-members .nm-row .tx { margin-right: 16px; padding-right: 0; }
.ng-body .nm-row .tx { margin-right: 16px; }
.ng-body .nm-row .tx, .sheet .card .nm-row .tx { border-top-color: var(--line); }
.ng-field input::placeholder { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ng-body { position: relative; }
.ng-body .az { right: 2px; }
.pick .nm-sec { padding: 12px 16px 4px; }
/* New Channel intro */
.i-intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px calc(var(--gutter) + 8px) 0; }
.i-intro-orb { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent), var(--btn)); margin-bottom: 18px; }
.i-intro-orb svg.i { width: 54px; height: 54px; }
.i-intro h3 { margin: 0 0 8px; font-size: 23px; line-height: 32px; font-weight: 700; }
.i-intro p { margin: 0 0 22px; font-size: 15px; line-height: 21px; color: var(--muted); max-width: 320px; }
.i-intro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; text-align: left; width: 100%; max-width: 340px; }
.i-intro li { display: flex; gap: 14px; align-items: flex-start; }
.i-intro li b { display: block; font-size: 15px; line-height: 21px; font-weight: 600; }
.i-intro li small { display: block; font-size: 13px; line-height: 19px; color: var(--muted); }
.i-intro-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); }
.i-intro-ic svg.i { width: 26px; height: 26px; }
.i-intro-foot { position: sticky; bottom: 0; margin-top: auto; padding: 28px var(--gutter) calc(10px + var(--sab)); }
/* bottom sheet over pages (auto-delete wheel, device details): ✕ top-left, Done at the bottom */
.i-bs { z-index: 60; }
.sheet.i-bs-card { margin: 0 8px calc(8px + var(--sab)); width: calc(100% - 16px); border-radius: 34px; padding: 64px 16px 16px; max-height: calc(100% - 60px - var(--sat)); }
.sheet.i-bs-card::after { display: none; }
.i-bs-x { position: absolute; top: 12px; left: 12px; }
.i-bs-title { position: absolute; top: 22px; left: 64px; right: 64px; text-align: center; font-size: 15px; font-weight: 600; }
.i-bs-done { margin-top: 18px; }
.i-bs .wheel { margin: 0 -8px; }
.i-dv-prof { margin-top: -40px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px; }
.i-dv-prof .dv-ic { display: grid; place-items: center; color: #fff; }
.i-bs .item + .item::before { left: 16px; }
.i-dv-prof .nm { font-size: 20px; line-height: 28px; font-weight: 600; }
.i-dv-prof .un { font-size: 14px; color: var(--muted); }
.i-dv-code .tx { display: flex; flex-direction: column; gap: 4px; }
.i-dv-code .code { font-size: 12px; color: var(--muted); }
.i-dv-kill { width: 100%; height: 50px; border-radius: 25px; font-size: 15px; font-weight: 600; color: #ff453a; background: rgba(255, 69, 58, .12); }
/* Devices: Edit shows a red minus on each other session */
.i-dv-minus { display: none; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff3b30; color: #fff; }
.i-dv-minus svg.i { width: 16px; height: 16px; stroke-width: 3; }
.dv-editing .i-dv-minus { display: grid; }
.dv-editing .dv-row .chev { display: none; }

/* ---------- J: settings search + photo · Saved Messages · chat list · search rows · forward · attach · schedule · poll ---------- */
/* Saved Messages bookmark avatar + the Archived Chats avatar: Telegram's blue gradient */
.sv-av, .arch-av, html:not([data-theme="light"]) .arch-av { background: linear-gradient(180deg, #72c7ff, #3a8ef0); color: #fff; }
.sv-av svg.i { width: 46%; height: 46%; }
.av.sm.sv-av svg.i, .av.xs.sv-av svg.i { width: 50%; height: 50%; }
.item .ic.sv-ic { background: linear-gradient(180deg, #72c7ff, #3a8ef0); }
.item .ic.sv-ic svg.i { width: 17px; height: 17px; }
/* settings header: 🔍 next to Edit */
.set-hr { display: flex; gap: 10px; }
.set-head.on-photo .glass-btn { background: rgba(0, 0, 0, .22); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
/* tap the profile photo → it opens full-width with the name over it */
.set-profile.big { position: relative; align-items: stretch; margin-top: calc(-64px - var(--sat)); padding: 0; margin-bottom: 26px; text-align: left; }
.set-profile.big .set-av { width: 100%; aspect-ratio: 1 / .94; border-radius: 0; overflow: hidden; transform-origin: top left; }
.set-profile.big .set-av .av { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.set-profile.big .set-av .av-img { border-radius: 0; }
.set-profile.big .set-av::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.set-profile.big .set-av { position: relative; }
.set-profile.big .nm, .set-profile.big .un { position: absolute; left: 16px; right: 16px; z-index: 1; color: #fff !important; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-profile.big .nm { bottom: 46px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.set-profile.big .un { bottom: 20px; margin: 0; font-size: 14px; line-height: 20px; opacity: .9; }
/* settings search page */
.ss-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) 16px 8px; margin: 0 calc(-1 * var(--gutter)); background: inherit; }
.ss-head .search { flex: 1; margin: 0; justify-content: flex-start; }
.ss-head .search input { flex: 1; }
.ss-head .glass-btn { flex: none; width: 44px; }
.ss-list { margin: 0 calc(-1 * var(--gutter)); padding-bottom: calc(24px + var(--sab)); }
.ss-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 8px 16px; text-align: left; color: var(--text); }
.ss-row:active { background: var(--card-hi); }
.ss-row .ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.ss-row .ic svg.i { width: 19px; height: 19px; stroke-width: 2; }
.ss-sp { flex: none; width: 30px; }
.ss-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-row .tx b { font-size: 15px; line-height: 22px; font-weight: 400; }
.ss-row .tx small { font-size: 13px; line-height: 18px; color: var(--muted); }
.ss-row + .ss-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: .5px; background: var(--line); }
/* single-choice pickers: ✓ on the left in the accent colour */
.ap-ck svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
/* chat list (dark): read ticks in the accent colour, like Telegram's green/blue ticks */
.list .row .tick, .list .row .tick.read { color: var(--accent); }
/* chat preview: pinned bar under the header + day chips */
.pk-pin { flex: none; display: flex; align-items: center; gap: 10px; margin: 2px 12px 4px; padding: 6px 16px 6px 12px; border-radius: 20px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.pk-pin > i { flex: none; width: 2px; align-self: stretch; border-radius: 1px; background: var(--accent); }
.pk-pin > div { min-width: 0; display: flex; flex-direction: column; }
.pk-pin b { font-size: 13px; line-height: 18px; color: var(--accent); }
.pk-pin span { font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .pk-pin { background: rgba(255, 255, 255, .8); }
.peek-msgs .pk-day { position: static; flex: none; align-self: center; margin: 6px 0 4px; }
/* global search: field stays left-aligned while searching; filter labels medium; 5 filters */
.side.srch-on #view > .search { justify-content: flex-start; }
.side.srch-on #view > .search input { flex: 1 1 auto !important; }
.srch-filt { width: min(400px, calc(100% - 24px)); }
.srch-filt button { font-weight: 500; font-size: 14px; }
.srch-filt .sf-ind { width: calc((100% - 8px) / 5); }
/* message hits = chat rows */
.sr-hits { padding: 0; }
.sr-hits .row .p:not(.has-au) { -webkit-line-clamp: 2; }
.sr-hits .row .p b:not(.au) { font-weight: 600; color: var(--text); }
.sr-thumb { flex: none; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: rgba(118, 118, 128, .24); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-thumb img:not([src]) { visibility: hidden; }
/* forward: the sheet stops ~50px under the top so the dimmed chat shows; Select → ticks + Send */
.sheet.full:has(.fwd-body) { height: calc(100% - 52px - var(--sat)); border-radius: 14px 14px 0 0; }
.fwd-body .fwd-ck { display: none; flex: none; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(142, 142, 147, .7); }
.fwd-body .fwd-ck svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.fwd-body.picking .fwd-ck { display: grid; }
.fwd-body.picking .row.on .fwd-ck { background: var(--btn); color: #fff; box-shadow: none; }
.fwd-body.picking .fwd-seg { bottom: calc(80px + var(--sab)); }
.fwd-send { position: absolute; left: 16px; right: 16px; bottom: calc(14px + var(--sab)); z-index: 3; }
.fwd-send .btn { width: 100%; height: 50px; border-radius: 25px; font-size: 15px; font-weight: 600; }
.fwd-send .btn:disabled { opacity: .45; }
.fwd-body.picking .pick { padding-bottom: calc(140px + var(--sab)); }
/* attach → File: accent rows with outline icons + RECENTLY SENT FILES */
.att-flist .att-acc { min-height: 50px; gap: 16px; }
.att-acc > svg.i { flex: none; width: 26px; height: 26px; color: var(--accent); stroke-width: 1.6; }
.att-acc b { font-weight: 400 !important; }
.att-acc + .att-acc > div { border-top: 1px solid var(--line); }
.att-flist .att-acc > div { align-self: stretch; }
html[data-theme="light"] .att-acc > svg.i, html[data-theme="light"] .att-acc b { color: var(--btn); }
.att-rth { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: rgba(118, 118, 128, .2); }
.att-rth img { width: 100%; height: 100%; object-fit: cover; }
.att-rext { background: linear-gradient(180deg, #6ab8ff, #2f87f0); color: #fff; font-size: 11px; font-weight: 700; text-transform: lowercase; }
.att-rf b { color: var(--text) !important; font-weight: 600 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-rf { min-height: 64px; }
/* attach → Contact: A–Z sections + side index */
.att-az-list .nm-sec { padding: 14px 4px 6px; }
.att-az-list .nm-row { padding-right: 18px; }
.att-az { position: absolute; right: 2px; top: 50%; z-index: 4; }
/* schedule: bell top-right, no preset chips, month title › opens a month / year wheel */
.sp-bell.on { color: var(--accent); }
.sp-mtitle { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: var(--text); }
.sp-mtitle svg.i { width: 16px; height: 16px; color: var(--accent); transition: transform .25s; stroke-width: 2.6; }
.sp-cal.picking .sp-mtitle { color: var(--accent); }
.sp-cal.picking .sp-mtitle svg.i { transform: rotate(90deg); }
.sp-cal.picking .sp-mhead .c-btn { visibility: hidden; }
.sp-wheels { display: flex; gap: 8px; padding: 4px 0 8px; }
.sp-wheels .wheel { flex: 1; }
.sp-wheels .wheel:last-child { flex: .6; }
html[data-theme="light"] .sp-mtitle svg.i { color: var(--btn); }
/* poll form: ≡ drag handles + Allow Revoting */
.pl-drag { flex: none; width: 34px; height: 34px; margin-right: -6px; display: grid; place-items: center; color: var(--muted); touch-action: none; cursor: grab; }
.pl-drag svg.i { width: 20px; height: 20px; }
.pl-erow { position: relative; transition: transform .2s; background: inherit; }
.pl-erow.pl-dragging { z-index: 3; transition: none; background: var(--card-hi, rgba(118, 118, 128, .2)); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); border-radius: 10px; }
.ss-row .tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet.page .glass-btn.pill.primary { width: auto; padding: 0 16px; }
.sp-wheels .wheel:last-child .wheel-in { scroll-snap-type: none; } /* two years only: snapping would pin it to the last one */
.pk-pin { align-self: stretch; }

/* ---------- H: inside a chat — ↓ button, floating date, select column, menu dots, emoji search, in-chat search, voice, albums, attach caption, viewer caption, channel posts ---------- */
/* ↓ scroll-to-bottom: round 44px glass button above the mic, unread count on top */
.down-btn { position: absolute; right: var(--gutter, 10px); z-index: 4; width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; color: var(--text2, #8e8e93); }
.down-btn[hidden] { display: none; }
.down-btn svg.i { width: 24px; height: 24px; }
.down-btn .dn-n { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: var(--btn); }
.down-btn .dn-n[hidden] { display: none; }
.chat.searching .down-btn, .chat.selecting .down-btn { display: none; }
html[data-theme="light"] .down-btn { color: #8e8e93; }
/* floating date: the pill stuck to the top shows only while scrolling, with a stronger frosted backing */
.msgs .day { transition: opacity .3s ease; }
.msgs:not(.scrolling) .day.stuck { opacity: 0; pointer-events: none; }
.msgs .day.stuck { background: rgba(20, 28, 32, .58); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
html[data-theme="light"] .msgs .day.stuck { background: rgba(48, 62, 66, .5); color: #fff; }
/* select mode: one fixed checkbox column ~16px in, vertically centred; incoming bubbles shift right */
.m.selectable { align-self: stretch; max-width: none; padding-left: 36px; }
.m.selectable > .bubble { max-width: min(84%, 517px); }
.m.selectable::before { left: 6px; top: 50%; bottom: auto; margin-top: -11px; }
/* long-press menu: "thought bubble" dots between the reaction bar and the message */
.mm-react { overflow: visible; }
.mm-dot { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(37, 37, 37, .9); }
.mm-dot.d1 { width: 12px; height: 12px; top: calc(100% - 5px); }
.mm-dot.d2 { width: 6px; height: 6px; top: calc(100% + 6px); }
html[data-theme="light"] .mm-dot { background: rgba(249, 249, 249, .95); }
.mm-react.big .mm-dot { display: none; }
/* light mode: Delete's icon is red like its label */
html[data-theme="light"] .mm-card > button.danger svg.i, html[data-theme="light"] .mm-card > button.danger { color: #ff3b30; }
/* emoji panel: search field under the category row, ⌫ right of the tab pill */
.emoji-panel .ep-cats { order: 0; }
.emoji-panel .ep-search { order: 1; }
.emoji-panel .ep-body { order: 2; }
.ep-search { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; margin: 4px 10px 2px; padding: 0 10px; border-radius: 10px; color: #8e8e93; background: rgba(118, 118, 128, .24); }
.ep-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 15px; color: var(--text); }
.ep-search input::-webkit-search-cancel-button { display: none; }
html[data-theme="light"] .ep-search { background: rgba(118, 118, 128, .12); }
.emoji-panel .ep-bksp { position: absolute; right: 12px; bottom: 8px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 0; color: var(--text);
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), 0 4px 14px rgba(0, 0, 0, .25); }
.emoji-panel .ep-bksp svg.i { width: 22px; height: 22px; }
html[data-theme="light"] .emoji-panel .ep-bksp { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); color: #000; }
.ep-res .ep-grid { padding-top: 6px; }
/* in-chat search: round glass ✕, calendar + count pill, ⌃ ⌄ stacked bottom-right, "Show as List" */
.chat-head .cs-xr { width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; }
.chat-head .cs-xr svg.i { width: 22px; height: 22px; }
.cs-cal { position: relative; padding: 0 16px 0 12px; cursor: pointer; }
.cs-cal svg.i { width: 24px; height: 24px; color: var(--text2, #8e8e93); }
.cs-cal input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.cs-cal:has(span:empty):not(:has(.bc-spin)) { visibility: visible; }
.cs-bar .cs-nav { position: absolute; right: var(--gutter, 10px); bottom: calc(100% + 4px); flex-direction: column; gap: 10px; }
.cs-bar .cs-nav[hidden] { display: none; }
.cs-lbtn { height: 44px; padding: 0 18px; font-size: 15px; }
.cs-lbtn[hidden] { display: none; }
html[data-theme="light"] .cs-lbtn { color: #000; }
.cs-list { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; overflow-y: auto; padding: calc(64px + var(--sat)) 0 calc(80px + var(--sab)); background: var(--bg, #000); }
html[data-theme="light"] .cs-list { background: #fff; }
.cs-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px var(--gutter, 12px); text-align: left; }
.cs-row .tx { flex: 1; min-width: 0; padding-bottom: 8px; border-bottom: .5px solid var(--line, rgba(128, 128, 128, .25)); }
.cs-row .n { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; line-height: 21px; }
.cs-row .n b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cs-row time { flex: none; font-size: 13px; color: #8e8e93; }
.cs-row .s { font-size: 14px; line-height: 20px; color: #8e8e93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-row .s b { color: var(--text); font-weight: 600; }
/* voice: bubble width follows the duration; 3px bars, 2px apart, up to 20px tall */
.m .voice { width: calc(var(--vw, 220px) - 24px); min-width: 0; }
.m .voice .v-wave { justify-content: flex-start; gap: 2px; height: 22px; }
.m .voice .v-wave i { flex: none; width: 3px; min-width: 3px; max-width: 3px; border-radius: 1.5px; }
/* photo albums: mosaic of rows, one time pill */
.bubble.alb { width: min(280px, 72vw); overflow: hidden; }
.album { display: flex; flex-direction: column; gap: 2px; }
.alb-row { display: flex; gap: 2px; width: 100%; }
.bubble.ph .album img.photo { display: block; min-width: 0; min-height: 0; width: auto; height: 100%; max-height: none; margin: 0; border-radius: 0; object-fit: cover; }
.bubble.ph .album img.photo + img.photo { margin-top: 0; }
.bubble.alb:not(:has(.txt)):not(:has(> .from)):not(:has(> .fwd)):not(:has(> .reply-q)) .album { border-radius: inherit; overflow: hidden; }
.bubble.alb:has(.txt) .album, .bubble.alb:has(> .reacts) .album { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* attach sheet with photos picked: no tab bar; caption field with emoji + round send outside it */
.att.att-sel .att-tabs { display: none; }
.att.att-sel .att-foot { bottom: calc(12px + var(--sab)); }
.att.att-sel .att-body:has(+ .att-foot:not(:empty)) { padding-bottom: calc(90px + var(--sab)); }
.att-foot .att-cap { height: auto; padding: 0; gap: 8px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: center; }
.att-capf { flex: 1; min-width: 0; display: flex; align-items: center; height: 46px; padding: 0 4px 0 16px; border-radius: 23px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.att-capf input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 15px; color: var(--text); caret-color: var(--accent); }
html[data-theme="light"] .att-capf { background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .1); }
html[data-theme="light"] .att-capf input { color: #000; }
.att-cemo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #8e8e93; }
.att-cemo svg.i { width: 24px; height: 24px; }
.att-foot .att-go { width: 44px; height: 44px; box-shadow: 0 4px 14px rgba(26, 148, 164, .35); }
.att-foot .att-go svg.i { width: 22px; height: 22px; }
.att-emo { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); max-height: 170px; overflow-y: auto; margin-bottom: 8px; padding: 6px; border-radius: 20px; background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.att-emo[hidden] { display: none; }
.att-emo button { height: 38px; font-size: 22px; border-radius: 10px; }
html[data-theme="light"] .att-emo { background: rgba(255, 255, 255, .95); }
/* photo viewer: caption over a bottom gradient, above the toolbar */
.vw-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-height: 40%; overflow-y: auto; padding: 48px 16px calc(70px + var(--sab)); font-size: 15px; line-height: 21px; color: #fff; white-space: pre-wrap; overflow-wrap: anywhere;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .7)); transition: opacity .2s; }
.vw-cap[hidden] { display: none; }
.vw-cap a { color: #8fd8ff; }
.viewer.bars-off .vw-cap { opacity: 0; pointer-events: none; }
/* inline `code`: monospace, no grey box (Telegram) */
.bubble .txt code.mono, html[data-theme="light"] .bubble .txt code.mono { padding: 0; border-radius: 0; background: none; }
/* channel posts: round share button beside each post; bell in the Broadcast field */
.m:has(> .ch-share) { align-items: flex-end; }
.ch-share { flex: none; align-self: flex-end; width: 32px; height: 32px; margin-bottom: 2px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ch-share svg.i { width: 18px; height: 18px; }
html[data-theme="light"] .ch-share { background: rgba(40, 80, 70, .3); }
.m.selectable > .ch-share { display: none; }
.c-field .ch-bell { width: 36px; }
.c-field .ch-bell svg.i { width: 22px; height: 22px; }
.c-field .ch-bell.off { color: var(--accent); }

/* ---------- Baba AI: sliding mode switch + per-mode content ---------- */
.ai-seg { position: relative; }
.ai-seg button, .ai-seg button.on, html[data-theme="light"] .ai-seg button.on { position: relative; z-index: 1; background: none; box-shadow: none; }
.ai-seg-ind { position: absolute; top: 3px; left: 3px; height: 34px; width: calc((100% - 6px) / var(--n, 4)); border-radius: 17px; transform: translateX(calc(100% * var(--i, 0)));
  background: rgba(255, 255, 255, .16); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: transform .38s cubic-bezier(.38, .7, .125, 1); pointer-events: none; }
html[data-theme="light"] .ai-seg-ind { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) { .ai-seg-ind { transition: none; } }
.ai-hero { padding-bottom: 16px; }
.ai-pane { will-change: transform; }
.ai-sub { margin: -6px 32px 18px; text-align: center; font-size: 13px; line-height: 19px; color: var(--muted); }
.ai-home { padding-bottom: 120px; }
.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 32px; text-align: center; color: var(--muted); font-size: 13px; }
.ai-empty svg.i { width: 40px; height: 40px; stroke-width: 1.4; margin-bottom: 4px; }
.ai-empty b { color: var(--text); font-size: 15px; font-weight: 600; }
.ai-hit .tx small, .ai-pick .tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hit mark { background: rgba(70, 219, 233, .25); color: inherit; border-radius: 3px; padding: 0 1px; }
.ai-when { float: right; font-size: 12px; color: var(--muted); font-weight: 400; }
.ai-composer .c-field > svg.i { flex: none; margin-right: 8px; color: var(--muted); }
.top .glass-btn.pill[data-act="ai-new"] { display: flex; align-items: center; gap: 4px; padding: 0 14px 0 10px; }

/* ---------- Baba AI conversation = a chat screen (Telegram bot chat) ---------- */
.ai-chat .chat-av.ai-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #0f3440, #061118 75%); }
.ai-chat .chat-av.ai-av .ai-ring { width: 28px; height: 28px; }
html[data-theme="light"] .ai-chat .chat-av.ai-av { background: radial-gradient(circle at 50% 40%, #e6fbfd, #c9f1f5 75%); }
.ai-chat .m.ai-m { align-self: flex-start; }
.ai-chat .m.mine .read { color: inherit; opacity: .9; }
.ai-chat .msgs { padding-bottom: 12px; }
.ai-chat .bubble.ai-typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px; min-width: 0; }
.ai-chat .bubble.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aidot 1.2s infinite; }
.ai-chat .bubble.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-chat .bubble.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* desktop: the AI conversation takes the right-hand pane instead of the normal chat */
@media (min-width: 900px) {
  .ai-chat:not(.open) { display: none; }
  .shell.ai-pushed > #chat { display: none; }
}
.ai-chat .msgs .day { position: static; opacity: 1 !important; margin: 4px auto 10px; }
.ai-chat .msgs { padding-top: calc(70px + var(--sat)); }
@media (min-width: 900px) { .ai-chat .chat-back { display: grid !important; } }

/* ---------- pickers: chips + selection rings animate (Telegram) ---------- */
.ng-field { position: relative; }
.ng-chip { transition: background-color .15s, color .15s; will-change: transform; }
.ng-chip.out { pointer-events: none; }
/* ring: fills with a spring, the tick pops */
.ng-ck, .check { transition: background-color .18s, border-color .18s, transform .32s cubic-bezier(.34, 1.56, .64, 1); }
.ng-ck svg.i, .check svg.i { transform: scale(0); opacity: 0; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .12s; }
.ng-row.on .ng-ck svg.i, .row.on .check svg.i { transform: none; opacity: 1; }
.ng-row:active .ng-ck, .row[data-pick]:active .check { transform: scale(.86); }
.ng-row, .row[data-pick] { transition: background-color .15s; }
@media (prefers-reduced-motion: reduce) { .ng-ck, .check, .ng-ck svg.i, .check svg.i { transition: none; } }
.ng-cam { overflow: hidden; padding: 0; cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .15s; }
.ng-cam:active { transform: scale(.92); }
.ng-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- tappable avatars + search bars ---------- */
.m-av { flex: none; align-self: flex-end; border-radius: 50%; line-height: 0; }
.m:not(.last) > .m-av { pointer-events: none; }
.m-av:active .av { opacity: .6; }
.profile .av.has-img, .set-profile .av.has-img { cursor: zoom-in; }
.search { cursor: text; }
.av-viewer img { object-fit: contain; }
.av-viewer .vw-top { position: absolute; top: calc(10px + var(--sat)); left: 12px; }

/* select mode: ring colour fades, soft fade behind the top pills so messages don't collide with them */
.m.selectable::before { transition: background-color .18s, border-color .18s; }
.m.selectable .bubble { transition: filter .18s; }
.chat.selecting > .sel-bar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(3, 7, 9, .75) 45%, rgba(3, 7, 9, 0)); }
html[data-theme="light"] .chat.selecting > .sel-bar::before { background: linear-gradient(rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0)); }
/* the floating date sticks just under the header: the list's own top padding already clears the header */
.msgs .day { top: 0; }
.pin-bar:not([hidden]) + .msgs .day { top: 0; }

/* ---------- sign-up steps (same fields, buttons and colours as sign-in; the planet stays on welcome and done) ---------- */
.auth.su { background: var(--bg); }
.su-head { display: flex; align-items: center; gap: 12px; height: 44px; margin-bottom: 18px; }
.su-back, .su-nb { flex: none; width: 36px; height: 36px; margin-left: -8px; border-radius: 18px; display: grid; place-items: center; color: var(--text); }
.su-back:active { background: rgba(255, 255, 255, .08); }
.su-bar { flex: 1; height: 4px; border-radius: 2px; background: #2c2c2e; overflow: hidden; }
.su-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .3s; }
.su-head > span { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.su-body { text-align: left; }
.auth .su-body h1 { margin: 6px 0 6px; font-size: 22px; line-height: 30px; }
.su-sub { margin: 0 0 24px; font-size: 13px; line-height: 20px; color: var(--muted); }
.su-tag { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--text2); }
.su-opts { display: flex; flex-direction: column; gap: 10px; }
.su-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border-radius: 16px; background: #1c1c1e; color: var(--text); text-align: left; font-size: 15px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s; }
.su-opt .tx { flex: 1; min-width: 0; }
.su-opt small { display: block; margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--muted); }
.su-opt.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.su-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #636366; color: transparent; }
.su-radio svg { width: 14px; height: 14px; stroke-width: 3; }
.su-opt.on .su-radio { background: var(--accent); box-shadow: none; color: #04090c; }
.su-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(70, 219, 233, .14); color: var(--accent); }
.su-scan { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 176px; height: 176px; margin: 0 auto 16px; color: var(--accent); font-size: 13px; }
.su-scan > svg { width: 56px; height: 56px; }
.su-scan > span { color: var(--text2); }
.su-scan > i { position: absolute; width: 28px; height: 28px; border: 3px solid var(--accent); }
.su-scan > i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.su-scan > i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.su-scan > i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.su-scan > i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.auth .su-album { display: flex; width: fit-content; height: 42px; margin: 0 auto; padding: 0 18px; border-radius: 21px; background: #1c1c1e; color: #fff; font-size: 13px; cursor: pointer; }
.su-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; font-size: 12px; color: var(--muted); }
.su-or::before, .su-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.su-card { padding: 16px; border-radius: 18px; background: #1c1c1e; }
.su-team { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.su-team small { display: block; font-size: 12px; color: var(--muted); }
.su-team b { font-size: 15px; font-weight: 500; }
.su-info { display: flex; align-items: center; gap: 10px; min-height: 46px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text2); }
.su-info > svg { color: var(--muted); }
.su-info > span { flex: 1; }
.su-info > b { font-weight: 500; color: var(--text); text-align: right; }
.su-info > b.ok { color: var(--accent); }
.su-valid { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px; border-radius: 12px; background: rgba(52, 199, 89, .12); color: #34c759; font-size: 13px; font-weight: 500; }
.su-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; height: 112px; margin: 0 auto 24px; border-radius: 50%; overflow: hidden; background: #1c1c1e; color: var(--accent); font-size: 12px; cursor: pointer; }
.su-photo > span { color: var(--text2); }
.su-photo img { width: 100%; height: 100%; object-fit: cover; }
.su-bio { display: block; width: 100%; min-height: 96px; padding: 14px 16px; border: 0; border-radius: 16px; outline: 0; resize: none; background: #1c1c1e; color: var(--text); font: inherit; font-size: 15px; line-height: 21px; caret-color: var(--accent); }
.su-bio:focus { background: #2a2a2e; }
.su-bio::placeholder { color: #636366; }
.af small.su-count { text-align: right; font-variant-numeric: tabular-nums; }
.su-done { flex: 1; justify-content: center; }
.su-tick { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 34px rgba(70, 219, 233, .22); }
.su-tick svg { width: 44px; height: 44px; }
.lock-screen { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(24px + var(--sat)) 32px calc(24px + var(--sab)); background: #000; color: #fff; text-align: center; }
.lock-screen .auth-logo { margin: 0 0 8px; }
.lock-screen p { margin: 0 0 12px; font-size: 14px; color: #aeaeb2; }
.lock-screen .btn { width: 100%; max-width: 300px; height: 52px; border-radius: 26px; font-size: 15px; font-weight: 600; }
.lock-screen .err:empty { display: none; }
.lock-alt { padding: 8px; font-size: 14px; color: var(--accent); }

/* ---------- smooth scrolling: anything that stays on screen while content moves under it gets a solid fill instead of a live blur (blur redraws every frame); short-lived overlays keep a lighter one ---------- */
:root { --glass: rgba(42, 46, 52, .94); --glass-strong: rgba(30, 33, 38, .97); --glass-blur: blur(12px); }
html[data-theme="light"] { --glass: rgba(255, 255, 255, .94); --glass-strong: rgba(255, 255, 255, .97); }
.tabbar, .glass-btn, .top::before, .set-head::before, .who, .pin-bar, .day, .msgs .day.stuck, .sys, .e2e-note, .unread-div, .composer > .c-btn, .c-field, .reply-bar, .readonly-bar, .m .bubble.bare .meta, .bubble.ph:not(:has(.txt)) > .meta, .ch-share, .ch-mute {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tabbar, .who, .pin-bar { background: rgb(30, 32, 36) !important; }
html[data-theme="light"] .tabbar, html[data-theme="light"] .who, html[data-theme="light"] .pin-bar { background: #fff !important; }
@media (max-width: 899px) { .side, .chat { will-change: transform; } } /* keep the two sliding screens on their own layers, ready before the swipe starts */