@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/vazirmatn-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+06F0-06F9, U+060C, U+061B, U+061F; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/vazirmatn-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+06F0-06F9, U+060C, U+061B, U+061F; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/vazirmatn-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+06F0-06F9, U+060C, U+061B, U+061F; }
:root {
  /* All text/background pairs below were checked against WCAG 2.2 AA (4.5:1 text, 3:1 large/UI). */
  --bg: #ffffff; --bg2: #f4f4f5; --text: #000; --muted: #62666a; --line: #dfe1e5;
  --primary: #2a74c4; --primary-d: #1f6bbd; --link: #1d68b3; --on-primary: #fff;
  --out: #eeffde; --out-text: #000; --out-time: rgba(0,0,0,.62); --in: #ffffff; --chat-bg: #c6d8bf; --chat-bg2: #dce8c8;
  --hover: #f1f3f4; --active: #1f6bbd; --danger: #c62828; --warn: #fff3cd;
  --scrim: rgba(0,0,0,.58); --on-danger: #fff;
  --s0: #9c271d; --s1: #7a4a00; --s2: #3c46b8; --s3: #1a5e2e; --s4: #0a5f55; --s5: #115590; --s6: #8a2fa8;
  --tick-read: #1f8a3b; color-scheme: light dark;
  --radius: 12px; --shadow: 0 1px 2px rgba(16,35,47,.15);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
:root[data-theme="dark"] {
    --bg: #212121; --bg2: #181818; --text: #fff; --muted: #aaaaaa; --line: #0f0f0f;
    --primary: #6552c4; --primary-d: #5645b0; --link: #b3a6f5; --out: #5b4fb8; --out-text: #fff; --out-time: rgba(255,255,255,.8); --in: #212121;
    --chat-bg: #0f0f0f; --chat-bg2: #17181f; --hover: #2c2c2c; --active: #6552c4; --warn: #4a3b13; --danger: #ff6f6b;
    --on-danger: #1a1a1a; --s0: #ff8a80; --s1: #ffc266; --s2: #9aa4ff; --s3: #7be08f; --s4: #5eead4; --s5: #7cc4ff; --s6: #e0a2f3;
    --shadow: none;
    --tick-read: #4fc3f7;
    --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform=%22translate(28 30) rotate(15) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(92 22) rotate(-12) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(160 34) rotate(20) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(214 26) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(44 88) rotate(0) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(112 84) rotate(-8) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(182 92) rotate(10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(226 84) rotate(25) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3Cg transform=%22translate(20 150) rotate(0) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Ccircle r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(78 148) rotate(-10) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Cpath d=%22M-4 2Q0 6 4 2M-3-3h.01M3-3h.01%22/%3E%3C/g%3E%3Cg transform=%22translate(140 156) rotate(-25) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(200 146) rotate(14) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(34 208) rotate(-14) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(100 214) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(156 212) rotate(-10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(212 204) rotate(12) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(64 50) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(130 128) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(176 60) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(8 110) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(120 190) rotate(-20) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #212121; --bg2: #181818; --text: #fff; --muted: #aaaaaa; --line: #0f0f0f;
    --primary: #6552c4; --primary-d: #5645b0; --link: #b3a6f5; --out: #5b4fb8; --out-text: #fff; --out-time: rgba(255,255,255,.8); --in: #212121;
    --chat-bg: #0f0f0f; --chat-bg2: #17181f; --hover: #2c2c2c; --active: #6552c4; --warn: #4a3b13; --danger: #ff6f6b;
    --on-danger: #1a1a1a; --s0: #ff8a80; --s1: #ffc266; --s2: #9aa4ff; --s3: #7be08f; --s4: #5eead4; --s5: #7cc4ff; --s6: #e0a2f3;
    --shadow: none;
    --tick-read: #4fc3f7;
    --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform=%22translate(28 30) rotate(15) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(92 22) rotate(-12) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(160 34) rotate(20) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(214 26) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(44 88) rotate(0) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(112 84) rotate(-8) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(182 92) rotate(10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(226 84) rotate(25) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3Cg transform=%22translate(20 150) rotate(0) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Ccircle r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(78 148) rotate(-10) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Cpath d=%22M-4 2Q0 6 4 2M-3-3h.01M3-3h.01%22/%3E%3C/g%3E%3Cg transform=%22translate(140 156) rotate(-25) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(200 146) rotate(14) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(34 208) rotate(-14) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(100 214) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(156 212) rotate(-10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(212 204) rotate(12) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(64 50) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(130 128) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(176 60) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(8 110) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(120 190) rotate(-20) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; -webkit-font-smoothing: antialiased; }
#app { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .small { font-size: 12px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #b32121; color: #fff; padding: 10px 16px; z-index: 99; }
#blazor-error-ui a { color: #fff; text-decoration: underline; }

.boot { height: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); }
.boot-logo { width: 84px; height: 84px; border-radius: 22%; display: block; object-fit: contain; }

/* ---------- auth */
.auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
.auth-card .boot-logo { align-self: center; }
.auth-card h1 { margin: 4px 0 0; font-size: 30px; }
.auth-card p { margin: 0; }
.tabs { display: flex; background: var(--bg2); border-radius: 10px; padding: 3px; margin: 8px 0; }
.tabs button { flex: 1; padding: 8px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.tabs button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.field { display: block; text-align: start; position: relative; }
.field span { position: absolute; inset-inline-start: 12px; top: -8px; background: var(--bg); padding: 0 4px; font-size: 12px; color: var(--muted); }
.field input { width: 100%; text-align: start; padding: 14px 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; outline: none; }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field:focus-within span { color: var(--link); }
.hint { font-size: 12.5px; color: var(--muted); text-align: left; line-height: 1.4; }
.strength { height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden; }
.strength div { height: 100%; transition: width .2s; } .s0,.s1 { background: #e53935; } .s2 { background: #fb8c00; } .s3 { background: #7cb342; } .s4 { background: #2e7d32; }
.error { color: var(--danger); font-size: 14px; background: color-mix(in srgb, var(--danger) 10%, transparent); padding: 8px 10px; border-radius: 8px; }
.primary { background: var(--primary); color: var(--on-primary); padding: 13px; border-radius: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; font-size: 14px; }
.primary:hover:not(:disabled) { background: var(--primary-d); }

/* ---------- app shell */
.app { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; height: 100%; height: 100dvh; background: var(--bg); }
.sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.side-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; font-size: 18px; color: var(--muted); display: grid; place-items: center; flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--hover); }
.search { flex: 1; }
.search input { width: 100%; border-radius: 22px; border: 1px solid transparent; background: var(--bg2); padding: 10px 16px; outline: none; }
.search input:focus { border-color: var(--primary); background: var(--bg); }
.search-msg { padding: 4px 18px 8px; font-size: 13px; color: var(--danger); }
.conn-legacy { text-align: center; }
.chat-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.chat-row { display: flex; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius); text-align: left; align-items: center; }
.chat-row:hover { background: var(--hover); }
.chat-row.active { background: var(--active); color: #fff; }
.chat-row.active .chat-time, .chat-row.active .chat-preview { color: #fff; }
.chat-main { flex: 1; min-width: 0; }
.chat-top, .chat-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-time { font-size: 12px; color: var(--muted); flex: none; }
.chat-preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.badge { background: var(--primary); color: var(--on-primary); min-width: 22px; height: 22px; border-radius: 11px; font-size: 12.5px; display: grid; place-items: center; padding: 0 6px; flex: none; font-weight: 600; }
.chat-row.active .badge { background: #fff; color: var(--primary-d); }
.empty-list { text-align: center; color: var(--muted); padding: 40px 20px; line-height: 1.6; }

.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; flex: none; }
.avatar.c0 { background: linear-gradient(#e0483d, #c3253f); } .avatar.c1 { background: linear-gradient(#c9731f, #a85a12); } .avatar.c2 { background: linear-gradient(#6d73f0, #4a46d8); }
.avatar.c3 { background: linear-gradient(#2a9650, #1c7a40); } .avatar.c4 { background: linear-gradient(#139a8f, #0c7a73); } .avatar.c5 { background: linear-gradient(#2f8fe0, #1d6fc0); } .avatar.c6 { background: linear-gradient(#b05fe0, #8a3fc0); }

/* ---------- conversation */
.main { min-width: 0; min-height: 0; background: var(--chat-bg); background-image: radial-gradient(circle at 20% 20%, var(--chat-bg2), transparent 55%), radial-gradient(circle at 80% 80%, var(--chat-bg2), transparent 55%); }
.placeholder { height: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.placeholder span { background: var(--scrim); color: #fff; padding: 4px 14px; border-radius: 14px; font-size: 14px; }
.placeholder small { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.chat-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.head-text { flex: 1; min-width: 0; } .head-name { font-weight: 600; } .head-sub { font-size: 13px; color: var(--muted); }
.back { display: none; }
.banner { background: var(--bg); padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line); line-height: 1.4; }
.banner.warn { background: var(--warn); } .banner button { margin-left: 8px; background: var(--primary); color: #fff; padding: 4px 10px; border-radius: 8px; }
.safety { font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: 1px; margin-top: 6px; word-spacing: 6px; }
.messages { flex: 1; overflow-y: auto; padding: 12px max(12px, calc(50% - 360px)); display: flex; flex-direction: column; gap: 3px; }
.enc-note { align-self: center; background: var(--scrim); color: #fff; font-size: 12.5px; padding: 5px 12px; border-radius: 12px; margin-bottom: 8px; text-align: center; }
.day { align-self: center; margin: 8px 0; } .day span { background: var(--scrim); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 12px; }
.row { display: flex; } .row.mine { justify-content: flex-end; }
.bubble { max-width: min(78%, 520px); padding: 6px 10px 6px 11px; border-radius: 14px; background: var(--in); box-shadow: var(--shadow); overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.38; }
.mine .bubble { background: var(--out); color: var(--out-text); border-bottom-right-radius: 4px; }
.theirs .bubble { border-bottom-left-radius: 4px; }
.bubble.bad { font-style: italic; opacity: .75; }
.time { float: right; margin: 6px 0 -3px 10px; font-size: 11.5px; color: var(--muted); user-select: none; }
.mine .time { color: var(--out-time); }
.sticker { font-size: 84px; line-height: 1.1; position: relative; }
.sticker .time { position: absolute; right: 2px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; padding: 1px 6px; border-radius: 9px; margin: 0; float: none; }
.composer { display: flex; align-items: flex-end; gap: 4px; padding: 8px max(8px, calc(50% - 360px)); background: transparent; }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: var(--bg); border-radius: 22px; padding: 11px 16px; max-height: 140px; line-height: 1.35; box-shadow: var(--shadow); }
.composer .icon-btn { background: var(--bg); box-shadow: var(--shadow); }
.composer .send { background: var(--primary); color: #fff; }
.picker { margin: 0 max(8px, calc(50% - 360px)); background: var(--bg); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.25); overflow: hidden; }
.picker-tabs, .picker-groups { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.picker-tabs button, .picker-groups button { padding: 6px 12px; border-radius: 8px; color: var(--muted); }
.picker-tabs .active, .picker-groups .active { background: var(--hover); color: var(--text); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); max-height: 220px; overflow-y: auto; padding: 6px; }
.picker-grid button { font-size: 26px; padding: 4px; border-radius: 8px; } .picker-grid button:hover { background: var(--hover); }
.picker-grid.big { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .picker-grid.big button { font-size: 50px; }

/* ---------- modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--bg); width: 100%; max-width: 440px; max-height: 90dvh; overflow-y: auto; border-radius: 16px; padding: 14px 20px 20px; }
.modal .modal-head { display: flex; justify-content: space-between; align-items: center; } .modal h2 { margin: 0; font-size: 19px; } .modal h3 { margin: 20px 0 4px; font-size: 14px; color: var(--link); }
.profile { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.fp { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--bg2); padding: 8px; border-radius: 8px; word-break: break-all; }
.session { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tag { font-size: 11px; background: var(--primary); color: #fff; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.link { color: var(--link); } .link.danger { color: var(--danger); }
.danger-btn { margin-top: 22px; width: 100%; padding: 11px; border-radius: 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); font-weight: 600; }

/* ---------- mobile */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .app .main { display: none; }
  .app.chat-open .sidebar { display: none; }
  .app.chat-open .main { display: block; }
  .back { display: grid; }
}

/* ---------- phase 2: media */
.bubble.media-bubble { white-space: normal; padding: 3px; max-width: min(82%, 340px); position: relative; }
.bubble.media-bubble.wide { padding: 8px 10px 6px; min-width: 220px; }
.media-bubble .time { position: absolute; right: 8px; bottom: 7px; margin: 0; float: none; background: rgba(0,0,0,.65); color: #fff; padding: 1px 6px; border-radius: 9px; }
.media-bubble.wide .time { position: static; float: right; background: none; color: var(--muted); padding: 0; margin: 0; }
.media { min-width: 96px; position: relative; border-radius: 11px; overflow: hidden; max-width: 100%; background: rgba(0,0,0,.12); line-height: 0; }
.media img, .media video { width: 100%; height: auto; display: block; max-height: 420px; object-fit: cover; cursor: zoom-in; }
.media video { cursor: default; }
.media-ph { min-width: 180px; min-height: 120px; display: grid; place-items: center; line-height: 1.4; color: var(--muted); font-size: 13px; animation: pulse 1.2s infinite alternate; }
@keyframes pulse { from { opacity: .5 } to { opacity: 1 } }
.media-save { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.5); color: #ffd54f; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; }
.media:hover .media-save, .media-save:focus { opacity: 1; }
.media.sticker-media { background: none; overflow: visible; max-width: 200px; }
.media.sticker-media img { object-fit: contain; cursor: default; max-height: 200px; }
.sticker-wrap { position: relative; line-height: 0; }
.sticker-img { width: 150px; height: 150px; display: block; }
.time.over { position: absolute; right: 4px; bottom: 4px; margin: 0; float: none; background: rgba(0,0,0,.65); color: #fff; padding: 1px 6px; border-radius: 9px; line-height: 1.4; }

.file-card { display: flex; gap: 10px; align-items: center; text-align: left; padding: 2px; min-width: 200px; max-width: 280px; }
.file-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font-size: 20px; flex: none; }
.file-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 12.5px; color: var(--muted); }

.voice { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.voice-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 14px; display: grid; place-items: center; flex: none; }
.wave { display: flex; align-items: center; gap: 2px; height: 32px; width: 168px; cursor: pointer; }
.wave span { flex: 1; background: color-mix(in srgb, currentColor 30%, transparent); border-radius: 2px; min-height: 3px; transition: background .1s; }
.wave span.on { background: var(--primary); }
.mine .wave span.on { background: var(--out-text); }
.voice-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 32px; }

.composer.recording { align-items: center; }
.rec-bar { flex: 1; background: var(--bg); border-radius: 22px; padding: 12px 18px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e53935; margin-right: 8px; animation: pulse .8s infinite alternate; }
.toast-err { margin: 0 max(8px, calc(50% - 360px)) 6px; background: var(--danger); color: var(--on-danger); padding: 8px 14px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.picker-grid.gifs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; }
.img-tile img { width: 100%; height: 76px; object-fit: contain; display: block; }
.add-tile { border: 2px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 30px !important; min-height: 76px; }
.thumb { position: relative; } .thumb-main { width: 100%; height: 90px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg2); }
.thumb.big .thumb-main { height: 76px; background: none; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb:not(.big) img { object-fit: cover; }
.thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; opacity: 0; }
.thumb:hover .thumb-x { opacity: 1; }
.picker-note { font-size: 12px; color: var(--muted); padding: 4px 12px 10px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 60; display: grid; place-items: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 88dvh; object-fit: contain; border-radius: 6px; }
.lb-btn { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.18); color: #fff; padding: 9px 18px; border-radius: 20px; }
.lb-btn.close { top: 14px; right: 14px; left: auto; bottom: auto; transform: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* ---------- phase 3: groups, notifications */
.side-head .icon-btn { font-size: 17px; }
.head-hit { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; border-radius: 10px; padding: 2px 4px; }
.head-hit:hover { background: var(--hover); }
.sender-label { font-size: 13px; font-weight: 600; margin: 6px 0 -1px 12px; align-self: flex-start; }
.sender-label.c0 { color: var(--s0); } .sender-label.c1 { color: var(--s1); } .sender-label.c2 { color: var(--s2); } .sender-label.c3 { color: var(--s3); }
.sender-label.c4 { color: var(--s4); } .sender-label.c5 { color: var(--s5); } .sender-label.c6 { color: var(--s6); }
.field.tight { margin-top: 14px; }
.modal .field span { background: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border-radius: 16px; padding: 3px 4px 3px 4px; font-size: 14px; }
.chip button { color: var(--muted); font-size: 11px; padding: 0 6px; }
.primary.full { width: 100%; margin-top: 8px; }
.inline-input { width: 100%; border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 8px 10px; outline: none; }
.inline-input:focus { border-color: var(--primary); }
.add-row { display: flex; gap: 8px; align-items: center; }
.member { display: flex; gap: 10px; align-items: center; }
.tag.alt { background: var(--hover); color: var(--text); border: 1px solid var(--line); } .tag.warn { background: var(--danger); color: var(--on-danger); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0 10px; }
.danger-btn.slim { margin-top: 6px; padding: 8px; }
.modal .primary { margin-top: 4px; width: 100%; }

/* ---------- phase 4: message actions, replies, timers, search */
.msg-wrap { position: relative; display: flex; align-items: flex-start; gap: 4px; max-width: 100%; }
.mine .msg-wrap { flex-direction: row-reverse; }
.msg-menu-btn { opacity: 0; align-self: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.28); color: #fff; flex: none; transition: opacity .12s; line-height: 1; }
.row:hover .msg-menu-btn, .msg-menu-btn:focus { opacity: 1; }
@media (hover: none) { .msg-menu-btn { opacity: .55; } }
.menu-back { position: fixed; inset: 0; z-index: 20; }
.msg-menu { position: absolute; z-index: 21; top: 28px; left: 34px; min-width: 190px; background: var(--bg); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.35); padding: 4px; display: flex; flex-direction: column; }
.mine .msg-menu, .msg-menu.left { left: auto; right: 34px; }
.msg-menu button { text-align: left; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.msg-menu button:hover { background: var(--hover); }
.msg-menu .danger { color: var(--danger); }
.reply-quote { display: flex; flex-direction: column; text-align: left; width: 100%; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 4px 8px 8px 4px; padding: 3px 8px; margin-bottom: 4px; line-height: 1.25; font-size: 13px; }
.reply-quote b { color: var(--link); font-weight: 600; } .mine .reply-quote b { color: var(--out-text); }
.reply-quote span { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; display: block; }
.fwd { font-size: 12.5px; color: var(--link); margin-bottom: 2px; } .mine .fwd { color: var(--out-text); opacity: .85; }
.edited, .ttl-mark { font-size: 11px; }
.compose-bar { display: flex; align-items: center; gap: 8px; margin: 0 max(8px, calc(50% - 360px)); background: var(--bg); border-radius: 12px 12px 0 0; padding: 6px 6px 6px 14px; border-left: 3px solid var(--primary); }
.compose-bar.edit { border-left-color: #fb8c00; }
.bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.bar-body b { color: var(--link); } .compose-bar.edit .bar-body b { color: #fb8c00; }
.bar-body span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.flash .bubble, .row.flash .sticker-wrap, .row.flash .sticker { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: var(--shadow); } }
.day.sys span { background: var(--scrim); }
.ttl-select { background: var(--bg2); border: 0; border-radius: 16px; padding: 6px 8px; font-size: 13px; color: var(--muted); cursor: pointer; max-width: 118px; }
.ttl-select.on { color: var(--link); font-weight: 600; }
.ttl-select:disabled { opacity: .6; cursor: default; }
.load-more { align-self: center; background: var(--scrim); color: #fff; padding: 4px 14px; border-radius: 14px; font-size: 13px; margin-bottom: 6px; }
.modal.wide { max-width: 520px; }
.pick-list { display: flex; flex-direction: column; margin-top: 6px; max-height: 50dvh; overflow-y: auto; }
.chat-row.hit { padding: 8px; }
@media (max-width: 760px) { .ttl-select { max-width: 86px; } .chat-head .icon-btn { width: 34px; } }

/* ---------- phase 5: accessibility ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 8px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 0; }
/* Visible keyboard focus everywhere (never removed, only restyled); inputs keep their own border highlight plus the ring. */
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.chat-row:focus-visible { outline-offset: -3px; }
.chat-row.active:focus-visible, .primary:focus-visible, .skip-link:focus-visible, .voice-btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--primary-d); }
.composer textarea:focus-visible, .search input:focus-visible, .field input:focus-visible, .inline-input:focus-visible { outline-offset: 0; }
.messages:focus-visible, .main:focus-visible { outline-offset: -3px; }
.main:focus { outline: none; }
.row:focus-within .msg-menu-btn { opacity: 1; }
.wave:focus-visible { outline-offset: 3px; }
.toast-err { display: block; width: calc(100% - 2 * max(8px, calc(50% - 360px))); text-align: left; color: var(--on-danger); }
.pwa-banner { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); display: flex; gap: 12px; align-items: center; background: #1c1c1e; color: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.4); max-width: calc(100% - 24px); }
.pwa-banner button { background: #fff; color: #1c1c1e; font-weight: 600; border-radius: 10px; padding: 6px 12px; }
@media (forced-colors: active) {
  .bubble, .chat-row.active, .primary, .badge, .voice-btn { border: 1px solid CanvasText; forced-color-adjust: none; }
  .wave span.on { background: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- phase 5: mobile / responsive ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
button, select, [role="slider"], .thumb-main { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.messages, .chat-list, .modal, .picker-grid, .pick-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.head-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-text { min-width: 0; }
.head-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* notches / home indicator / landscape cut-outs */
.app { padding-left: var(--safe-l); padding-right: var(--safe-r); }
.side-head { padding-top: calc(8px + var(--safe-t)); }
.chat-head { padding-top: calc(7px + var(--safe-t)); }
.composer { padding-bottom: calc(8px + var(--safe-b)); }
.auth-wrap { padding-top: calc(24px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); }
.chat-list { padding-bottom: calc(8px + var(--safe-b)); }

@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .tabs button, .picker-tabs button, .picker-groups button, .link, .modal .check, .msg-menu button, .ttl-select, .chip button, .load-more { min-height: 44px; }
  .chip button { min-width: 36px; }
  .picker-grid button { min-height: 44px; min-width: 44px; }
  .thumb-x { width: 32px; height: 32px; font-size: 13px; opacity: .9; }
  .media-save { width: 40px; height: 40px; opacity: .9; }
  .msg-menu-btn { width: 34px; height: 34px; opacity: .6; }
  .voice-btn { width: 44px; height: 44px; }
  .check input { width: 22px; height: 22px; }
}

@media (max-width: 760px) {
  /* inputs at 16px+ stop iOS from zooming the page when focused */
  input, textarea, select { font-size: 16px; }
  .app { height: 100dvh; }
  .bubble { max-width: 86%; }
  .bubble.media-bubble { max-width: min(86%, 340px); }
  .reply-quote span { max-width: 52vw; }
  .messages { padding-left: 10px; padding-right: 10px; }
  .composer { padding-left: 8px; padding-right: 8px; }
  .compose-bar, .toast-err, .picker { margin-left: 8px; margin-right: 8px; }
  .toast-err { width: calc(100% - 16px); }
  .picker-grid { max-height: 34dvh; }
  .chat-head { gap: 4px; padding-left: 4px; padding-right: 6px; }
  .head-hit { gap: 8px; }
  /* dialogs become bottom sheets */
  .modal-back { align-items: end; padding: 0; }
  .modal { max-width: none; width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + var(--safe-b)); animation: sheet-up .22s ease-out; }
  .modal.wide { max-width: none; }
  .pick-list { max-height: 55dvh; }
  /* message actions become a bottom sheet too */
  .menu-back { background: var(--scrim); z-index: 30; }
  .msg-menu, .mine .msg-menu, .msg-menu.left { position: fixed; z-index: 31; top: auto; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); min-width: 0; border-radius: 16px; padding: 6px; animation: sheet-up .18s ease-out; }
  .msg-menu button { padding: 12px 16px; font-size: 16px; }
  .lb-btn { bottom: calc(18px + var(--safe-b)); }
  .lb-btn.close { top: calc(14px + var(--safe-t)); }
  .auth-card { gap: 14px; }
  /* chat list header: actions on the first row, full-width search below */
  .side-head { flex-wrap: wrap; }
  .side-head .search { order: 9; flex: 1 0 100%; margin-bottom: 2px; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Narrow phones: the timer collapses to an icon, but stays a real (invisible) select so it keeps working and stays accessible. */
@media (max-width: 480px) {
  .ttl-wrap { position: relative; width: 40px; height: 40px; flex: none; }
  .ttl-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; border-radius: 50%; pointer-events: none; color: var(--muted); }
  .ttl-wrap.on .ttl-glyph { color: var(--link); background: var(--bg2); }
  .ttl-wrap .ttl-select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; cursor: pointer; }
  .ttl-wrap:focus-within { outline: 3px solid var(--link); outline-offset: 1px; border-radius: 50%; }
}
@media (max-width: 380px) { .chat-head .icon-btn { width: 38px; } }
@media (max-height: 480px) and (orientation: landscape) { .enc-note { display: none; } .picker-grid { max-height: 30dvh; } }
@media (display-mode: standalone) { .skip-link { top: -80px; } .skip-link:focus { top: var(--safe-t); } }

h1, h2.head-name { margin: 0; } h2.head-name { font-size: inherit; line-height: inherit; }
.chat-name .sr-only + * { }

.ttl-glyph { display: none; }
@media (max-width: 480px) { .ttl-glyph { display: grid; } }

/* secondary text inside the sender's own (tinted) bubbles must use the bubble-aware tone, not the page-level muted grey */
.mine .file-size, .mine .voice-time, .mine .media-bubble.wide .time, .mine .edited, .mine .ttl-mark { color: var(--out-time); }
.auth-wrap { display: grid; }

/* ================= phase 6: Telegram-style design ================= */
:root { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%232b4a3a' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform=%22translate(28 30) rotate(15) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(92 22) rotate(-12) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(160 34) rotate(20) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(214 26) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(44 88) rotate(0) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(112 84) rotate(-8) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(182 92) rotate(10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(226 84) rotate(25) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3Cg transform=%22translate(20 150) rotate(0) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Ccircle r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(78 148) rotate(-10) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Cpath d=%22M-4 2Q0 6 4 2M-3-3h.01M3-3h.01%22/%3E%3C/g%3E%3Cg transform=%22translate(140 156) rotate(-25) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(200 146) rotate(14) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(34 208) rotate(-14) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(100 214) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(156 212) rotate(-10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(212 204) rotate(12) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(64 50) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(130 128) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(176 60) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(8 110) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(120 190) rotate(-20) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3C/svg%3E"); --tail-in: var(--in); --tail-out: var(--out); }

/* ---------- icons & avatars ---------- */
.icon { flex: none; display: block; }
.icon-btn { display: grid; place-items: center; }
.icon-btn.small { width: 34px; height: 34px; }
.icon-btn.small.danger { color: var(--danger); }
.avatar { overflow: hidden; position: relative; user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; border: 2px solid var(--bg); }
.name-ic { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--muted); }
.sub-ic { display: inline-block; vertical-align: -2px; }

/* ---------- sidebar (chat list) ---------- */
.sidebar { position: relative; background: var(--bg); }
.side-head { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--safe-t)) 12px 8px 8px; }
.side-head .icon-btn { color: var(--muted); }
.search { position: relative; flex: 1; }
.search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; padding: 11px 16px 11px 42px; border-radius: 24px; background: var(--bg2); border: 2px solid transparent; }
.search input:focus { background: var(--bg); border-color: var(--primary); }
.chat-list { padding: 4px 8px 84px; }
.chat-row { padding: 9px 10px; border-radius: 12px; gap: 12px; min-height: 72px; }
.chat-name { font-size: 16px; display: flex; align-items: center; min-width: 0; }
.chat-preview { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview .who { color: var(--text); opacity: .85; margin-right: 2px; } .chat-row.active .chat-preview .who { color: #fff; }
.chat-preview .kind { color: var(--link); } .chat-row.active .chat-preview .kind { color: #fff; }
.tick { color: var(--muted); flex: none; } .tick.read { color: var(--link); }
.chat-row.active .tick, .chat-row.active .tick.read { color: #fff; }
.chat-bot { gap: 6px; }
.empty-list { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; color: var(--muted); margin-bottom: 8px; }
.fab-wrap { position: absolute; right: 18px; bottom: calc(18px + var(--safe-b)); z-index: 5; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .12s; }
.fab:hover { transform: scale(1.06); } .fab:active { transform: scale(.96); }
.fab-menu { position: absolute; right: 0; bottom: 66px; top: auto; left: auto; min-width: 190px; z-index: 31; }
.fab-wrap .menu-back { z-index: 30; }
.msg-menu button { display: flex; align-items: center; gap: 12px; }
.msg-menu .icon { color: var(--muted); } .msg-menu .danger .icon { color: var(--danger); }

/* ---------- drawer ---------- */
.drawer-back { justify-content: start; align-items: stretch; padding: 0; place-items: stretch start; display: flex; }
.drawer { width: min(320px, 86vw); height: 100%; background: var(--bg); display: flex; flex-direction: column; box-shadow: 6px 0 30px rgba(0,0,0,.35); animation: drawer-in .22s ease-out; padding-bottom: var(--safe-b); }
@keyframes drawer-in { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { padding: calc(22px + var(--safe-t)) 20px 18px; background: linear-gradient(135deg, #2f6fb8, #5b4fb8); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.drawer-avatar { position: relative; width: 68px; height: 68px; border-radius: 50%; margin-bottom: 8px; }
.drawer-avatar .avatar-cam { border-color: #3a5db8; }
.drawer-name { font-size: 18px; font-weight: 700; }
.drawer-bio { font-size: 13.5px; opacity: .92; line-height: 1.35; max-height: 3.9em; overflow: hidden; }
.drawer-items { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.drawer-items button { display: flex; align-items: center; gap: 18px; padding: 13px 14px; border-radius: 10px; font-size: 15.5px; text-align: left; min-height: 48px; }
.drawer-items button:hover { background: var(--hover); }
.drawer-items .icon { color: var(--muted); }
.drawer-items .danger, .drawer-items .danger .icon { color: var(--danger); }
.drawer-items hr { border: 0; border-top: 1px solid var(--line); margin: 6px 8px; }
.drawer-foot { padding: 12px 20px; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--line); }

/* ---------- conversation: wallpaper, header, composer ---------- */
.main { background-color: var(--chat-bg); background-image: var(--doodle), radial-gradient(circle at 15% 10%, var(--chat-bg2), transparent 60%), radial-gradient(circle at 90% 90%, var(--chat-bg2), transparent 55%); background-size: 240px 240px, auto, auto; }
.chat-head { box-shadow: 0 1px 0 var(--line); gap: 8px; }
.chat-head .icon-btn { color: var(--muted); }
.head-name { font-size: 16px; font-weight: 600; }
.head-sub { display: flex; align-items: center; gap: 2px; }
.messages-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.messages { flex: 1; gap: 0; padding-top: 10px; scroll-behavior: auto; }
.to-bottom { position: absolute; right: 14px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); z-index: 4; }
.to-bottom .badge { position: absolute; top: -8px; right: -4px; }
.enc-note { display: flex; gap: 6px; align-items: center; justify-content: center; max-width: 440px; margin: 4px auto 10px; line-height: 1.35; }
.day { margin: 10px 0 6px; } .day span { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.day.sys { margin: 8px 0; } .day.sys span { max-width: 90%; text-align: center; }

/* bubbles: grouped runs, tails on the last bubble of a run */
.row { position: relative; align-items: flex-end; margin-top: 3px; touch-action: pan-y; }
.row.first { margin-top: 12px; }
.row.last { margin-bottom: 3px; }
.row.with-av { gap: 8px; }
.row-av { width: 32px; flex: none; align-self: flex-end; }
.bubble { position: relative; border-radius: 16px; padding: 7px 11px 6px; }
.theirs .bubble { border-top-left-radius: 16px; }
.mine:not(.first) .bubble { border-top-right-radius: 6px; } .theirs:not(.first) .bubble { border-top-left-radius: 6px; }
.mine:not(.last) .bubble { border-bottom-right-radius: 6px; } .theirs:not(.last) .bubble { border-bottom-left-radius: 6px; }
.mine .bubble.tail { border-bottom-right-radius: 4px; } .theirs .bubble.tail { border-bottom-left-radius: 4px; }
.bubble.tail::after { content: ""; position: absolute; bottom: 0; width: 11px; height: 14px; clip-path: path('M11 0 V14 H1 Q9 12 11 0 Z'); }
.theirs .bubble.tail::after { left: -10px; background: var(--in); }
.mine .bubble.tail::after { right: -10px; background: var(--out); transform: scaleX(-1); }
.bubble .text { display: inline; }
.sender-label { margin: 8px 0 1px 50px; }
.sender-name { font-weight: 600; font-size: 13.5px; }
.mention { color: var(--link); font-weight: 500; } .mine .mention { color: var(--out-text); text-decoration: underline; text-underline-offset: 2px; }
.mention.me { background: color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 4px; padding: 0 3px; }
.ticks { display: inline-flex; vertical-align: -3px; margin-left: 2px; color: var(--out-time); } .ticks.read { color: var(--tick-read); }
.dark-only { display: none; }
.time { display: inline-flex; align-items: center; gap: 3px; }
.mine .time .icon { vertical-align: -2px; }
.media-bubble.tail::after { display: block; }

/* swipe to reply (left) / forward (right) */
.row .msg-wrap { transform: translateX(var(--sx, 0px)); will-change: transform; }
.row.swipe-anim .msg-wrap { transition: transform .2s ease-out; }
.swipe-hint { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--scrim); color: #fff; display: none; place-items: center; opacity: var(--p, 0); transform: scale(calc(.55 + var(--p, 0) * .45)); pointer-events: none; }
.row.swipe-left .swipe-hint.rep { display: grid; right: 10px; }
.row.swipe-right .swipe-hint.fwd { display: grid; left: 10px; }
.row.swiping { user-select: none; }

/* composer */
.composer { align-items: flex-end; gap: 8px; padding: 6px max(8px, calc(50% - 360px)) calc(8px + var(--safe-b)); }
.composer-box { flex: 1; display: flex; align-items: flex-end; background: var(--bg); border-radius: 24px; box-shadow: var(--shadow); min-width: 0; }
.composer-box textarea { box-shadow: none; background: transparent; border-radius: 0; padding: 12px 4px; }
.composer-box .icon-btn { background: transparent; box-shadow: none; color: var(--muted); flex: none; }
.composer .icon-btn.send.round { background: var(--primary); color: var(--on-primary); width: 48px; height: 48px; flex: none; box-shadow: var(--shadow); }
.composer .icon-btn.send.round:hover:not(:disabled) { background: var(--primary-d); }
.composer.recording .icon-btn { background: var(--bg); }
.compose-bar { gap: 10px; } .bar-ic { color: var(--link); flex: none; }
.mention-pop { margin: 0 max(8px, calc(50% - 360px)) 6px; background: var(--bg); border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; }
.mention-pop button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; min-height: 44px; }
.mention-pop button:hover, .mention-pop button:focus-visible { background: var(--hover); }
.picker-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.picker-groups .pack-ic { width: 24px; height: 24px; display: block; }
.picker-groups button { display: grid; place-items: center; min-width: 40px; }

/* ---------- profile, group info, settings ---------- */
.profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 14px; }
.hero-name { margin: 6px 0 0; font-size: 22px; color: var(--text); display: flex; align-items: center; gap: 4px; }
.modal .hero-name { margin: 6px 0 0; }
.hero-bio { margin: 2px 0 0; max-width: 90%; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.hint.center { text-align: center; margin: 0; }
.info-list, .info-card { background: var(--bg2); border-radius: 14px; padding: 4px 14px; margin: 6px 0 4px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; }
.info-row + .info-row { border-top: 1px solid var(--line); }
.info-row .icon { color: var(--link); margin-top: 2px; }
.info-row b { display: block; font-size: 14.5px; } .info-row span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 1px; }
.modal h3.sec { margin: 18px 0 6px; }
.member-list { display: flex; flex-direction: column; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.member-main { flex: 1; min-width: 0; }
.member-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.member-bio { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag.owner { display: inline-flex; gap: 3px; align-items: center; }
.rename-row { display: flex; gap: 8px; width: 100%; align-items: center; }
.profile-edit { display: flex; gap: 16px; align-items: center; margin: 10px 0 12px; }
.avatar-pick { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none; }
.avatar-pick:hover .avatar { filter: brightness(.9); }
.pe-side { min-width: 0; } .pe-actions { display: flex; gap: 14px; margin-top: 6px; }
.bio-input { width: 100%; resize: vertical; min-height: 70px; border: 1px solid var(--line); background: transparent; border-radius: 10px; padding: 12px; outline: none; }
.bio-input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.bio-count { text-align: right; font-size: 12px; color: var(--muted); margin-top: 2px; }
.field.sel select { width: 100%; padding: 13px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.saved-note { display: flex; gap: 6px; align-items: center; color: var(--link); margin-top: 8px; font-size: 14px; }
.modal .primary + .error, .modal .error { margin-top: 8px; }
.safety { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: 1px; word-spacing: 8px; background: var(--bg2); padding: 12px; border-radius: 10px; line-height: 1.6; margin-top: 4px; }
.banner .icon { flex: none; margin-top: 2px; } .banner { display: flex; gap: 10px; align-items: flex-start; } .banner-body { flex: 1; }
.profile-modal .profile-hero { padding-top: 0; }

@media (max-width: 760px) {
  .composer { padding: 6px 8px calc(8px + var(--safe-b)); }
  .sender-label { margin-left: 46px; }
  .fab-wrap { right: 16px; bottom: calc(16px + var(--safe-b)); }
  .drawer { width: min(310px, 86vw); }
  .row.first { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .drawer, .fab { animation: none; transition: none; } }

/* auto-delete timer: always an icon (with the active value as a tiny badge); the real <select> sits invisibly on top */
.ttl-wrap { position: relative; width: 42px; height: 42px; flex: none; }
.ttl-glyph { display: grid !important; position: absolute; inset: 0; place-items: center; border-radius: 50%; pointer-events: none; color: var(--muted); }
.ttl-wrap.on .ttl-glyph { color: var(--link); background: var(--bg2); }
.ttl-short { position: absolute; right: -3px; bottom: -2px; font-size: 10px; font-weight: 700; background: var(--primary); color: var(--on-primary); border-radius: 8px; padding: 0 4px; line-height: 15px; }
.ttl-wrap .ttl-select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; cursor: pointer; }
.ttl-wrap:focus-within { outline: 3px solid var(--link); outline-offset: 1px; border-radius: 50%; }
.ttl-wrap:hover .ttl-glyph { background: var(--hover); }
.modal h3.hero-name { color: var(--text); margin: 6px 0 0; font-size: 22px; }
.hint .icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }

.day.sys { max-width: 92%; }
.day.sys span { max-width: none; white-space: normal; text-align: center; }
@media (max-width: 760px) { .side-head { flex-wrap: nowrap; } .side-head .search { order: 0; flex: 1 1 auto; margin: 0; } }

/* ================= phase 7: tab bar, pages, Telegram-style settings ================= */
.sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 0; border-inline-end: 1px solid var(--line); }
.side-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 16px; }
.page-head { display: flex; align-items: center; gap: 4px; padding: calc(8px + var(--safe-t)) 12px 6px 12px; min-height: 56px; position: relative; }
.page-head.big .page-title { font-size: 26px; }
.title-block { flex: 1; min-width: 0; }
.page-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-sub { font-size: 13px; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; position: relative; }
.back-btn { margin-inline-start: -8px; color: var(--link); }
.link.strong { font-weight: 700; padding: 8px; }
.page-head .icon-btn { color: var(--link); }

/* bottom tab bar */
.tabbar { display: flex; gap: 2px; flex: none; margin: 6px 12px calc(10px + var(--safe-b)); padding: 6px; border-radius: 28px; background: color-mix(in srgb, var(--bg2) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.04) inset; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px 5px; min-height: 54px; border-radius: 22px; color: var(--muted); position: relative; transition: color .2s, background-color .2s, transform .15s; }
.tab-ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 15px; transition: background-color .25s, transform .25s; }
.tab-label { font-size: 11px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:active { transform: scale(.94); }
.tab:hover .tab-ic { background: var(--hover); }
.tab.active { color: var(--link); }
.tab.active .tab-ic { background: color-mix(in srgb, var(--link) 18%, transparent); }
.tab.active .tab-label { font-weight: 700; }
.tab.active .icon { stroke-width: 2.3; }
.tab-badge { position: absolute; top: -4px; inset-inline-end: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: var(--on-danger); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--bg2); }

/* chats page */
.search-wrap { padding: 0 12px 8px; }
.search-pill { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--bg2); color: var(--muted); text-align: start; }
.search-pill:hover { background: var(--hover); }
.net-banner { margin: 0 12px 6px; display: flex; gap: 10px; align-items: flex-start; background: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.35; }
.net-banner b { display: block; } .net-banner .icon { margin-top: 2px; flex: none; }
.chat-list { padding: 0 8px 8px; }
.pin-ic { color: var(--muted); flex: none; transform: rotate(45deg); } .chat-row.active .pin-ic { color: #fff; }
.compose-menu { position: absolute; top: 46px; inset-inline-end: 0; min-width: 210px; z-index: 31; left: auto; right: auto; }
.page-actions .menu-back { z-index: 30; }
.row-menu { position: fixed; left: var(--mx); top: var(--my); min-width: 220px; z-index: 31; }
.attach-menu { position: fixed; left: 12px; bottom: calc(70px + var(--safe-b)); min-width: 230px; z-index: 31; }
.attach-menu button { display: flex; align-items: center; gap: 12px; }
.attach-menu small { margin-inline-start: auto; }

/* colored icon tiles (Telegram settings) */
.set-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.set-ic.round { border-radius: 50%; }
.c-blue { background: #2a74c4; } .c-orange { background: #c2610b; } .c-green { background: #238a4d; } .c-red { background: #c9382f; } .c-gray { background: #667085; } .c-purple { background: #6f4fd0; }
.set-card { background: var(--bg2); border-radius: 14px; margin: 10px 0; overflow: hidden; }
.set-row, .contact-row, .device-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; text-align: start; min-height: 52px; }
.set-row + .set-row, .contact-row + .contact-row, .device-row + .device-row { border-top: 1px solid var(--line); }
.set-row:hover, .contact-row:hover { background: var(--hover); }
.set-row.static:hover { background: none; }
.set-label { flex: 1; min-width: 0; font-size: 16px; } .set-label b { display: block; font-weight: 500; } .set-label small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.set-val { color: var(--muted); font-size: 15px; }
.chev { color: var(--muted); flex: none; } .chosen { color: var(--link); }
.set-row.danger { color: var(--danger); } .set-row.center { justify-content: center; gap: 8px; font-weight: 500; }
.letter { margin: 16px 6px 2px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.pad { padding: 0 8px; } .pad-card { padding: 4px 14px; }
.profile-card { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; padding: 14px; margin: 10px 0; border-radius: 14px; background: var(--bg2); }
.pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-name { font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-user { color: var(--link); font-size: 14px; } .pc-bio { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-name { font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-sub { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-time { color: var(--muted); font-size: 12px; font-weight: 400; flex: none; }
.link-text { color: var(--link); display: block; }
.contact-row.hit .contact-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.find-form { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }

/* forms inside settings */
.form-card { padding: 2px 0; }
.form-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 16px; }
.form-row + .form-row { border-top: 1px solid var(--line); }
.form-row > span { width: 110px; flex: none; color: var(--muted); font-size: 15px; }
.form-row.stack { flex-direction: column; align-items: stretch; gap: 6px; } .form-row.stack > span { width: auto; }
.form-row.static > span { width: auto; color: var(--text); }
.form-row input, .form-row select, .form-row textarea { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 4px 0; font-size: 16px; color: var(--text); }
.form-row select { width: 100%; background: var(--bg2); padding: 8px; border-radius: 8px; }
.form-row:focus-within { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.form-row .bio-input { border: 0; min-height: 70px; padding: 4px 0; box-shadow: none; }
.profile-edit.centered { flex-direction: column; margin: 8px 0 4px; }
.switch-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; justify-content: space-between; }
.switch-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.switch-row b { font-weight: 500; font-size: 16px; }
.switch-row input[type=checkbox] { appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; flex: none; cursor: pointer; border: 1px solid var(--muted); transition: background .15s; }
.switch-row input[type=checkbox]::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: inset-inline-start .15s; }
.switch-row input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
.switch-row input[type=checkbox]:checked::after { inset-inline-start: 22px; }
.primary.wide { width: 100%; margin-top: 8px; } .primary.pill { margin-top: 10px; border-radius: 22px; padding: 11px 22px; }
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 4px; } .about-hero h3 { margin: 6px 0 0; font-size: 22px; color: var(--text); }
.hero-user { color: var(--link); font-size: 15px; }
.member-user { color: var(--muted); font-size: 12.5px; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lang-switch { align-self: center; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }

/* search page */
.search-head { gap: 8px; }
.search-field { flex: 1; position: relative; display: flex; align-items: center; }
.search-field .search-ic { position: absolute; inset-inline-start: 12px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; padding: 11px 38px; border-radius: 12px; border: 2px solid transparent; background: var(--bg2); outline: none; }
.search-field input:focus { border-color: var(--primary); background: var(--bg); }
.search-field input::-webkit-search-cancel-button { display: none; }
.clear-btn { position: absolute; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; }
.cancel { flex: none; font-size: 16px; padding: 8px 4px; }
.chips { display: flex; gap: 6px; padding: 2px 12px 8px; overflow-x: auto; flex: none; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-tab { padding: 7px 14px; border-radius: 18px; background: var(--bg2); color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; min-height: 36px; }
.chip-tab.active { background: var(--primary); color: var(--on-primary); }
.index-note { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; padding: 4px 6px 8px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 6px 0; }
.media-tile { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--bg2); display: grid; place-items: center; padding: 0; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { color: var(--muted); display: grid; place-items: center; width: 100%; height: 100%; }
.avatar.saved { background: linear-gradient(135deg, #3a8ee6, #2a5fc4); }

/* Saved Messages / small bits */
.profile-modal .hero-user { margin-top: -2px; }
.chat-view .composer .composer-box textarea { unicode-bidi: plaintext; }
.ticks .icon { vertical-align: -2px; }

@media (max-width: 760px) {
  .compose-menu { top: 46px; }
  .row-menu { left: 8px; right: 8px; top: auto; bottom: calc(76px + var(--safe-b)); }
  .attach-menu { left: 8px; right: 8px; bottom: calc(76px + var(--safe-b)); }
}

/* ================= right-to-left (Persian) ================= */
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea { font-family: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
[dir="rtl"] .bubble { text-align: start; }
[dir="rtl"] .bubble.tail::after { clip-path: path('M11 0 V14 H1 Q9 12 11 0 Z'); }
[dir="rtl"] .theirs .bubble.tail { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
[dir="rtl"] .mine .bubble.tail { border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; }
[dir="rtl"] .theirs .bubble.tail::after { left: auto; right: -10px; transform: scaleX(-1); }
[dir="rtl"] .mine .bubble.tail::after { right: auto; left: -10px; transform: none; }
[dir="rtl"] .mine:not(.first) .bubble { border-top-right-radius: 16px; border-top-left-radius: 6px; }
[dir="rtl"] .theirs:not(.first) .bubble { border-top-left-radius: 16px; border-top-right-radius: 6px; }
[dir="rtl"] .mine:not(.last) .bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 6px; }
[dir="rtl"] .theirs:not(.last) .bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; }
[dir="rtl"] .time { float: left; margin: 6px 10px -3px 0; }
[dir="rtl"] .media-bubble .time { left: 8px; right: auto; }
[dir="rtl"] .time.over { left: 4px; right: auto; }
[dir="rtl"] .sender-label { margin: 8px 50px 1px 0; }
[dir="rtl"] .reply-quote { border-left: 0; border-right: 3px solid var(--primary); border-radius: 8px 4px 4px 8px; text-align: right; }
[dir="rtl"] .compose-bar { border-left: 0; border-right: 3px solid var(--primary); border-radius: 12px 12px 0 0; padding: 6px 14px 6px 6px; }
[dir="rtl"] .to-bottom { right: auto; left: 14px; }
[dir="rtl"] .search-ic { left: auto; right: 14px; }
[dir="rtl"] .row.swipe-left .swipe-hint.rep, [dir="rtl"] .row.swipe-right .swipe-hint.fwd { display: none; }
[dir="rtl"] .row.swipe-right .swipe-hint.rep { display: grid; left: 10px; right: auto; }
[dir="rtl"] .row.swipe-left .swipe-hint.fwd { display: grid; right: 10px; left: auto; }
[dir="rtl"] .msg-menu { left: auto; right: 34px; } [dir="rtl"] .mine .msg-menu, [dir="rtl"] .msg-menu.left { right: auto; left: 34px; }
[dir="rtl"] .avatar-cam { right: auto; left: -2px; }
[dir="rtl"] .thumb-x { right: auto; left: 2px; } [dir="rtl"] .media-save { right: auto; left: 6px; }
[dir="rtl"] .chat-top, [dir="rtl"] .chat-bot { direction: rtl; }
[dir="rtl"] .ttl-short { right: auto; left: -3px; }
[dir="rtl"] .ticks { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .modal { text-align: start; }
[dir="rtl"] .hint, [dir="rtl"] .info-row span { text-align: start; }
[dir="rtl"] code, [dir="rtl"] .safety, [dir="rtl"] .fp { direction: ltr; text-align: left; }
@media (max-width: 760px) { [dir="rtl"] .row-menu, [dir="rtl"] .attach-menu { left: 8px; right: 8px; } [dir="rtl"] .msg-menu, [dir="rtl"] .mine .msg-menu, [dir="rtl"] .msg-menu.left { left: 8px; right: 8px; } }
@media (prefers-reduced-motion: reduce) { .tab, .tab-ic, .switch-row input[type=checkbox], .switch-row input[type=checkbox]::after { transition: none; } }
[dir="rtl"] body, [dir="rtl"] .bubble { line-height: 1.6; }

/* ---- phase 8: modern chat header, popup message menu, filter chips ---- */
.chat-head { position: relative; z-index: 12; gap: 4px; padding: calc(8px + var(--safe-t)) 8px 8px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(0,0,0,.08); }
.chat-head .icon-btn { width: 40px; height: 40px; border-radius: 50%; color: var(--link); }
.chat-head .icon-btn:hover { background: var(--hover); }
.chat-head .back { margin-inline-end: -2px; }
.head-hit { padding: 2px 6px; border-radius: 14px; text-align: start; }
.head-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.1px; }
.head-sub { font-size: 12.5px; }
.head-ttl { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 8px; color: var(--link); font-weight: 600; }
.head-menu { position: absolute; top: calc(52px + var(--safe-t)); inset-inline-end: 8px; left: auto; right: auto; min-width: 220px; z-index: 31; }
[dir="rtl"] .head-menu { right: auto; left: 8px; inset-inline-end: auto; }
.msg-menu { border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.msg-menu button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; width: 100%; text-align: start; }
.msg-menu button small { margin-inline-start: auto; color: var(--muted); }
.msg-menu button[disabled] { opacity: .45; }
.msg-menu .tick-end { margin-inline-start: auto; color: var(--link); }
.menu-back.dim { background: rgba(0,0,0,.25); }
.row { outline: none; }
.row:focus-visible .bubble, .row:focus-visible .sticker-wrap { outline: 2px solid var(--link); outline-offset: 2px; }
.messages .row-menu { position: fixed; left: min(var(--mx), calc(100vw - 236px)); top: min(var(--my), calc(100vh - 300px)); min-width: 220px; }
.chat-view > .row-menu { position: fixed; left: min(var(--mx), calc(100vw - 236px)); top: min(var(--my), calc(100vh - 300px)); right: auto; }
@media (max-width: 760px) {
  .chat-view > .row-menu { left: 12px; right: 12px; top: auto; bottom: calc(12px + var(--safe-b)); border-radius: 20px; }
  .chat-view > .menu-back.dim { background: rgba(0,0,0,.45); }
}
.chip-n { margin-inline-start: 6px; font-size: 12px; opacity: .75; }
.filter-chips { flex-wrap: nowrap; overflow-x: auto; margin: 10px -12px; padding: 2px 12px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chat-head .head-menu { top: calc(54px + var(--safe-t)); bottom: auto; height: auto; left: auto; right: 8px; width: min(240px, calc(100vw - 16px)); }
[dir="rtl"] .chat-head .head-menu { right: auto; left: 8px; }

/* ---- phase 8b: pill header, single-line composer, compose menu fix ---- */
.page-actions .compose-menu { position: fixed; top: calc(58px + var(--safe-t)); bottom: auto; height: auto; left: auto; right: 12px; width: min(250px, calc(100vw - 24px)); z-index: 31; }
[dir="rtl"] .page-actions .compose-menu { right: auto; left: 12px; }
.page-head { overflow: visible; }
html, body { overflow-x: hidden; }

.chat-head { margin: calc(8px + var(--safe-t)) 10px 2px; padding: 6px 8px 6px 6px; border-radius: 30px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 78%, transparent); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 8px 26px rgba(0,0,0,.18); gap: 6px; }
[dir="rtl"] .chat-head { padding: 6px 6px 6px 8px; }
.chat-head .icon-btn { width: 42px; height: 42px; background: color-mix(in srgb, var(--link) 13%, transparent); color: var(--link); }
.chat-head .icon-btn:hover { background: color-mix(in srgb, var(--link) 22%, transparent); }
.chat-head .icon-btn.back { background: transparent; width: 36px; }
.head-hit { padding: 0 4px; }
.head-name { font-size: 16px; }
.chat-head .head-menu { top: calc(60px + var(--safe-t)); right: 10px; }
[dir="rtl"] .chat-head .head-menu { right: auto; left: 10px; }

.composer { padding: 6px 10px calc(10px + var(--safe-b)); align-items: center; gap: 8px; }
.composer-box { align-items: center; min-height: 50px; padding: 0 4px; border-radius: 26px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 80%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 6px 22px rgba(0,0,0,.16); }
.composer-box textarea { height: 24px; min-height: 24px; line-height: 24px; padding: 0 4px; margin: 13px 0; font-size: 16px; display: block; }
.composer-box .icon-btn { width: 42px; height: 42px; align-self: flex-end; margin-bottom: 4px; }
.composer .icon-btn.send.round { width: 50px; height: 50px; align-self: flex-end; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent); }
.sidebar, .side-body, .page, .page-scroll, .chat-main, .chat-row, .main, .chat-view { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } .chat-row { overflow: hidden; } }

/* ---- phase 8c: main screen: connection status, folders, unified search field ---- */
.search-wrap { padding: 2px 12px 10px; }
.search-pill, .search-field input { height: 46px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); font-size: 15.5px; box-shadow: none; }
.search-pill { padding: 0 14px; gap: 10px; align-items: center; }
.search-field { display: flex; align-items: center; width: 100%; position: relative; }
.search-field input { padding: 0 40px; color: var(--text); }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-pill:hover { background: color-mix(in srgb, var(--bg2) 80%, var(--link) 8%); }
.search-field input:focus { background: var(--bg); border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 20%, transparent); }
.search-head .search-field { flex: 1; }
.search-wrap .search-field .search-ic { inset-inline-start: 14px; }

.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); min-height: 18px; animation: conn-in .3s var(--ease-out, ease-out); }
.conn.busy { color: var(--link); } .conn.off { color: var(--danger); } .conn.ok { color: #2e9e5b; }
.conn.off .icon { animation: conn-pulse 1.4s ease-in-out infinite; }
.conn.busy .conn-t::after, .conn.off .conn-t::after { content: ""; display: inline-block; width: 1.2em; text-align: start; animation: conn-dots 1.4s steps(4, end) infinite; }
.conn-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--link) 25%, transparent); border-top-color: var(--link); animation: conn-rot .8s linear infinite; flex: none; }
.conn-dots { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
.conn-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--link); animation: conn-bounce 1s ease-in-out infinite; }
.conn-dots i:nth-child(2) { animation-delay: .15s; } .conn-dots i:nth-child(3) { animation-delay: .3s; }
.conn-check { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: conn-draw .45s .05s ease-out forwards; }
.conn.ok { animation: conn-pop .4s var(--spring, cubic-bezier(.2,1.4,.4,1)); }
@keyframes conn-rot { to { transform: rotate(360deg); } }
@keyframes conn-pulse { 50% { opacity: .35; } }
@keyframes conn-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@keyframes conn-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes conn-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes conn-draw { to { stroke-dashoffset: 0; } }
@keyframes conn-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes conn-bob { 50% { transform: translateY(2px); } }

/* thin line across the top of the app */
.conn-bar { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; pointer-events: none; animation: conn-bar-in .25s ease-out; }
.conn-bar i { position: absolute; inset: 0; background: var(--link); }
.conn-bar.busy i, .conn-bar.sync i { width: 40%; background: linear-gradient(90deg, transparent, var(--link), transparent); animation: conn-slide 1.3s ease-in-out infinite; }
.conn-bar.sync i { animation-duration: 1.8s; opacity: .7; }
.conn-bar.off i { background: var(--danger); animation: conn-pulse 1.4s ease-in-out infinite; }
.conn-bar.ok i { background: #2e9e5b; animation: conn-fade 1.8s ease-out forwards; }
[dir="rtl"] .conn-bar.busy i, [dir="rtl"] .conn-bar.sync i { animation-name: conn-slide-rtl; }
@keyframes conn-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes conn-slide-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }
@keyframes conn-fade { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes conn-bar-in { from { opacity: 0; } to { opacity: 1; } }
.page-head.big:has(.conn.busy)::after, .page-head.big:has(.conn.off)::after { content: ""; position: absolute; inset-inline: 12px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--link), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: conn-bar 1.3s ease-in-out infinite; }
.page-head.big:has(.conn.off)::after { --link: var(--danger); }
@keyframes conn-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
[dir="rtl"] .conn-bar, [dir="rtl"] .page-head.big::after { animation-direction: reverse; }

.folders { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.folders::-webkit-scrollbar { display: none; }
.folder { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 36px; border-radius: 18px; background: var(--bg2); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s, transform .15s; }
.folder:active { transform: scale(.95); }
.folder.active { background: color-mix(in srgb, var(--link) 18%, transparent); color: var(--link); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 40%, transparent); }
.folder-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .conn, .conn *, .page-head::after { animation: none !important; } }

/* ---- phase 9: emoji-only messages, reactions, invite links ---- */
.msg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.mine .msg-col { align-items: flex-end; }
.emoji-only { position: relative; line-height: 1.15; padding: 2px 4px 18px; }
.emoji-big { display: block; font-size: min(190px, 52vw); line-height: 1; letter-spacing: 4px; white-space: nowrap; }
.emoji-only.e2 .emoji-big { font-size: min(120px, 30vw); } .emoji-only.e3 .emoji-big { font-size: min(78px, 20vw); }
.emoji-only .time.over { right: 2px; bottom: 0; }
[dir="rtl"] .emoji-only .time.over { left: 2px; right: auto; }
.emoji-only .reply-quote, .emoji-only .fwd-from { font-size: 13px; }

.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; max-width: 100%; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 13px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line); font-size: 14px; backdrop-filter: blur(8px); transition: transform .12s, background-color .15s; }
.react:active { transform: scale(.92); }
.react-n { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.react.mine { background: color-mix(in srgb, var(--link) 22%, var(--bg)); border-color: color-mix(in srgb, var(--link) 55%, transparent); }
.react.mine .react-n { color: var(--link); }
@media (min-width: 761px) { .react:hover { background: var(--hover); } }

.react-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 4px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.msg-menu .react-strip button.react-pick { display: grid; place-items: center; width: auto; min-height: 0; height: 40px; padding: 0; font-size: 23px; border-radius: 12px; text-align: center; }
.msg-menu .react-strip button.react-pick.on { background: color-mix(in srgb, var(--link) 24%, transparent); }
.msg-menu .react-strip button.react-pick:hover { transform: scale(1.18); background: var(--hover); }
@media (max-width: 760px) { .msg-menu .react-strip button.react-pick { height: 44px; font-size: 25px; } }

.invite-card { background: var(--bg2); border-radius: 14px; padding: 12px; margin: 6px 0; }
.invite-link { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; word-break: break-all; background: var(--bg); border-radius: 10px; padding: 10px; line-height: 1.5; }
.invite-code { display: flex; align-items: center; gap: 10px; margin: 8px 2px; font-size: 13px; color: var(--muted); }
.invite-code code { font-size: 13.5px; color: var(--text); word-break: break-all; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.invite-actions .link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; }
.invite-actions .danger { color: var(--danger); }

/* clickable links inside messages */
.msg-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; word-break: break-all; unicode-bidi: isolate; }
.msg-link:hover { text-decoration-thickness: 2px; }
.mine .msg-link { color: var(--on-primary, #fff); text-decoration-color: color-mix(in srgb, currentColor 70%, transparent); font-weight: 500; }
.msg-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

/* ---- big profile photo (Telegram-style hero) and collapsed key details ---- */
.photo-hero { position: relative; margin: -16px -16px 8px; aspect-ratio: 1 / 1; max-height: 62vh; width: calc(100% + 32px); overflow: hidden; background: var(--bg2); border-radius: 0 0 22px 22px; }
.photo-open { position: absolute; inset: 0; padding: 0; width: 100%; height: 100%; cursor: zoom-in; }
.photo-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.72)); pointer-events: none; }
.photo-meta { position: absolute; inset-inline: 18px; bottom: 14px; z-index: 2; color: #fff; text-align: start; pointer-events: none; }
.photo-name { margin: 0; font-size: 24px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-sub { font-size: 14.5px; opacity: .9; }
.photo-close { position: absolute; top: calc(12px + var(--safe-t)); inset-inline-end: 12px; z-index: 3; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.photo-close:hover { background: rgba(0,0,0,.6); }
.photo-full { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92); display: grid; place-items: center; cursor: zoom-out; }
.photo-full img { max-width: 100%; max-height: 100%; object-fit: contain; }
.profile-modal:has(.photo-hero) { padding-top: 0; overflow: hidden auto; }

details.verify { background: var(--bg2); border-radius: 14px; padding: 0 14px; margin: 10px 0; }
details.verify.flat { background: transparent; padding: 0; margin: 0; }
details.verify > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; font-weight: 600; }
details.verify > summary::-webkit-details-marker { display: none; }
details.verify.flat > summary { padding: 8px 14px; }
details.verify .verify-chev { margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
details.verify[open] .verify-chev { transform: rotate(180deg); }
details.verify[open] { padding-bottom: 12px; }
details.verify.flat[open] { padding-bottom: 12px; } details.verify.flat > :not(summary) { margin-inline: 14px; }
.fp-short { font-family: ui-monospace, Menlo, monospace; letter-spacing: .5px; }
details.verify .safety { font-size: 13.5px; padding: 10px; }
details.verify .fp { font-size: 11.5px; }

/* ---- phase 10: Telegram-style profile ---- */
.modal.profile-modal { padding: 0 0 calc(20px + var(--safe-b)); overflow-x: hidden; max-width: 460px; }
.p-hero { position: relative; aspect-ratio: 1 / 1; max-height: 56vh; width: 100%; overflow: hidden; background: var(--bg2); }
.p-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(transparent, rgba(0,0,0,.66)); pointer-events: none; }
.p-hero.plain { aspect-ratio: auto; height: 250px; display: grid; place-items: center; padding-bottom: 36px; }
.p-hero.plain.g0 { background: linear-gradient(160deg, #e0483d, #a81d38); } .p-hero.plain.g1 { background: linear-gradient(160deg, #d98a2b, #9a5410); }
.p-hero.plain.g2 { background: linear-gradient(160deg, #7a80f4, #3f3bc2); } .p-hero.plain.g3 { background: linear-gradient(160deg, #35ad60, #17703a); }
.p-hero.plain.g4 { background: linear-gradient(160deg, #1fb0a4, #0a6b65); } .p-hero.plain.g5 { background: linear-gradient(160deg, #43a0ee, #1a63b4); }
.p-hero.plain.g6 { background: linear-gradient(160deg, #c26ff0, #7e34b8); }
.p-hero-avatar { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font-size: 52px; font-weight: 700; color: #fff; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.p-hero .photo-meta { position: absolute; inset-inline: 18px; bottom: 14px; z-index: 2; color: #fff; text-align: start; }
.p-hero .photo-sub { display: flex; align-items: center; gap: 5px; font-size: 14px; opacity: .92; }
.p-hero .photo-name { font-size: 26px; }
.p-body { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 12px; }

.p-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.p-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 6px; border-radius: 16px; background: var(--bg2); color: var(--link); font-size: 12.5px; font-weight: 600; transition: transform .12s, background-color .15s; }
.p-tile:active { transform: scale(.95); }
.p-tile:hover { background: var(--hover); }
.p-tile.on { background: color-mix(in srgb, var(--link) 18%, transparent); }
.p-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttl-card .set-row { min-height: 48px; }
.ttl-card .tick-end { margin-inline-start: auto; color: var(--link); }

.p-card { background: var(--bg2); border-radius: 16px; overflow: hidden; }
.p-row { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 16px; text-align: start; }
.p-row + .p-row { border-top: 1px solid var(--line); }
button.p-row:hover { background: var(--hover); }
.p-val { font-size: 16px; line-height: 1.4; word-break: break-word; }
.p-lab { font-size: 12.5px; color: var(--muted); }
.p-row.static .p-val { color: var(--text); }
button.p-row .p-val { color: var(--link); }

.p-danger { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border-radius: 16px; background: var(--bg2); color: var(--danger); font-weight: 600; font-size: 15.5px; }
.p-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg2)); }
@media (max-width: 760px) { .modal.profile-modal { max-height: 96dvh; border-radius: 22px 22px 0 0; } .p-hero { max-height: 50vh; } }
[dir="rtl"] .modal.profile-modal .p-body { text-align: start; }

/* sounds + mute */
.sound-preview { display: flex; gap: 8px; padding: 6px 14px 14px; flex-wrap: wrap; }
.sound-preview .chip-tab { display: inline-flex; align-items: center; gap: 6px; }
.mute-ic { vertical-align: -2px; margin-inline-end: 4px; opacity: .7; }
.badge.muted { background: var(--muted); }

/* own profile header (Settings) */
.me-card { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 14px; text-align: center; border-radius: 18px; background: var(--bg2); margin: 10px 0; }
.me-card .me-name { font-size: 22px; font-weight: 700; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card .me-user { color: var(--link); font-size: 15px; }
.me-card .me-bio { color: var(--muted); font-size: 14px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card .me-edit { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 18px; background: color-mix(in srgb, var(--link) 15%, transparent); color: var(--link); font-weight: 600; font-size: 14px; }

/* ---------- MP4 GIFs and sticker packs */
.media video[loop] { cursor: zoom-in; }
.lightbox video { max-width: 100%; max-height: 88dvh; border-radius: 6px; }
.thumb video, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.thumb.big video { object-fit: contain; }
.picker-groups { overflow-x: auto; }
.pack-maker .pack-grid { max-height: 180px; }
.pack-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; }
.pack-actions .link, .pack-import { display: inline-flex; align-items: center; gap: 6px; }
.pack-import { margin-top: 4px; }

/* ---------- pack builder v2 */
.sticker-suggest { display: flex; gap: 6px; overflow-x: auto; margin: 0 max(8px, calc(50% - 360px)); padding: 6px; background: var(--bg); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.sticker-suggest .thumb { flex: 0 0 76px; }
.drop-zone { display: grid; place-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; width: 100%; margin: 8px 0; }
.drop-zone b { color: var(--link); }
.pack-maker.dragging .drop-zone, .drop-zone:hover:not(:disabled) { border-color: var(--primary); background: var(--hover); }
.pack-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 4px; }
.pack-tile { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--bg2); display: grid; place-items: center; padding: 4px; }
.pack-tile img { width: 100%; height: 100%; object-fit: contain; }
.pack-tile[aria-pressed="true"] { outline: 3px solid var(--primary); outline-offset: -1px; }
.pack-tile .em { position: absolute; right: 2px; bottom: 2px; font-size: 15px; line-height: 1; background: var(--bg); border-radius: 8px; padding: 1px 3px; box-shadow: 0 0 0 1px var(--line); }
.sticker-editor { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 8px 0; display: grid; gap: 8px; }
.sticker-editor .ed-top { display: flex; gap: 12px; align-items: center; }
.sticker-editor .ed-prev { width: 72px; height: 72px; object-fit: contain; background: var(--bg2); border-radius: 10px; flex: none; }
.sticker-editor .ed-chosen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 36px; }
.sticker-editor .ed-chosen button { font-size: 24px; padding: 2px 8px; border-radius: 10px; background: var(--hover); }
.sticker-editor .picker-grid { max-height: 130px; padding: 2px; }
.sticker-editor .picker-grid button { font-size: 22px; min-height: 36px; }
.sticker-editor .picker-groups { padding: 2px 0; border: 0; }
.sticker-editor .ed-actions { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- picker v3: panel docked under the composer, tabs at the bottom, bigger stickers and GIFs */
.picker { margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); display: flex; flex-direction: column; height: clamp(300px, 44dvh, 460px); padding-bottom: var(--safe-b); animation: picker-up .16s ease-out; }
@keyframes picker-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .picker { animation: none; } }
.picker-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.picker .picker-groups { flex: none; border-bottom: 0; padding: 6px 8px 2px; gap: 4px; }
.picker .picker-groups button { border-radius: 12px; }
.picker .picker-grid { flex: 1; max-height: none; min-height: 0; align-content: start; padding: 8px; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.picker .picker-grid button { font-size: 30px; }
.picker .picker-grid.big { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.picker .picker-grid.big button { font-size: 68px; }
.picker .picker-grid.gifs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.picker .thumb-main { height: 140px; border-radius: 12px; }
.picker .thumb.big .thumb-main { height: 112px; }
.picker .img-tile img { height: 112px; }
.picker .add-tile { min-height: 112px; }
.picker .picker-note { flex: none; padding: 2px 12px 8px; }
.picker .picker-tabs { flex: none; border-top: 1px solid var(--line); border-bottom: 0; padding: 6px 10px; gap: 6px; background: var(--bg); }
.picker .picker-tabs button { flex: 1; justify-content: center; border-radius: 999px; padding: 9px 10px; font-weight: 500; transition: background .12s, color .12s; }
.picker .picker-tabs button.active { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--link); }
.picker .picker-tabs button:not(.active):hover { background: var(--hover); }
@media (max-width: 380px) { .picker .picker-tabs button { padding: 9px 4px; gap: 4px; } }
.sticker-img { width: 200px; height: 200px; }
.media.sticker-media { max-width: 240px; } .media.sticker-media img { max-height: 240px; }
.bubble.media-bubble { max-width: min(82%, 440px); }
.sticker-suggest .thumb { flex-basis: 100px; }
.sticker-suggest .thumb.big .thumb-main { height: 100px; }
@media (max-width: 480px) { .sticker-img { width: 170px; height: 170px; } .picker .picker-grid.big { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ---------- picker v4: compact add/edit buttons, 3 per row */
.picker .picker-groups .mini-tool { position: sticky; inset-inline-end: 0; margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 10px; font-size: 13px; font-weight: 600; border-radius: 999px; color: var(--link); background: color-mix(in srgb, var(--primary) 14%, var(--bg)); }
.picker .picker-groups .mini-tool:hover { background: color-mix(in srgb, var(--primary) 24%, var(--bg)); }
.picker .picker-grid.big, .picker .picker-grid.gifs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.picker .thumb.big .thumb-main { height: auto; aspect-ratio: 1; }
.picker .thumb:not(.big) .thumb-main { height: auto; aspect-ratio: 1; }
.picker .img-tile img { height: auto; aspect-ratio: 1; }
@media (pointer: coarse) { .picker .picker-groups .mini-tool { min-height: 36px; } }

/* ---------- sticker pack links */
.link-box { margin: 10px 0 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.link-box .field input { font-size: 13px; padding: 10px 12px; }
.pack-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 46dvh; overflow-y: auto; padding: 4px; margin: 8px 0; }
.pack-link .ok { display: flex; gap: 6px; align-items: center; color: var(--ok, #2e7d32); font-weight: 600; margin: 6px 0; }

/* ---------- group profile (same look as user profile) + icon button fixes */
.icon-btn { line-height: 0; } .icon-btn svg { display: block; flex: none; }
.chat-head .icon-btn.back { width: 40px; height: 40px; }
.round-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; line-height: 0; background: color-mix(in srgb, var(--link) 13%, transparent); color: var(--link); transition: background .12s, transform .08s; }
.round-btn svg { display: block; }
.round-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--link) 24%, transparent); }
.round-btn:active:not(:disabled) { transform: scale(.92); }
.round-btn:disabled { opacity: .45; }
.round-btn.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.round-btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.p-split { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.p-split > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-edit { display: flex; align-items: center; gap: 8px; }
.p-edit .inline-input { flex: 1; min-width: 0; }
.p-tile:disabled { opacity: .55; cursor: default; }
.p-tiles.two { grid-template-columns: repeat(2, 1fr); }
.p-tile.bad { color: var(--danger); }
.p-sec { margin: 6px 4px 0; font-size: 14px; font-weight: 600; color: var(--link); }
.p-member { padding: 10px 14px; } .p-member + .p-member { border-top: 1px solid var(--line); }
.p-card .p-row .p-val { overflow-wrap: anywhere; }

/* ---------- Telegram-style action rows, clickable members */
.tg-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; text-align: start; font-size: 15.5px; font-weight: 500; color: var(--link); min-height: 54px; }
.tg-row + .tg-row, .tg-row + .p-row, .p-row + .tg-row, .p-member + .tg-row, .tg-row + .p-member, .invite-box { border-top: 1px solid var(--line); }
.tg-row:hover { background: var(--hover); }
.tg-row small { margin-inline-start: auto; font-size: 12px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.tg-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--primary); color: var(--on-primary, #fff); line-height: 0; }
.tg-ic svg { display: block; }
.tg-ic.green { background: #2f9e5f; color: #fff; } .tg-ic.red { background: var(--danger); color: #fff; }
.tg-ic.orange { background: #d9822b; color: #fff; }
.tg-ic.sm { width: 28px; height: 28px; background: color-mix(in srgb, var(--link) 15%, transparent); color: var(--link); }
.tg-ic.sm.red { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.tg-row.slim { min-height: 44px; padding-inline-start: 26px; font-size: 14.5px; }
.tg-row.bad, .tg-row.leave { color: var(--danger); }
.tg-row.leave { font-weight: 600; }
.invite-box { background: color-mix(in srgb, var(--link) 5%, transparent); }
.invite-box .hint { padding: 6px 18px 12px; margin: 0; }
.member-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: start; border-radius: 12px; padding: 2px; }
.member-hit:not(:disabled):hover { background: var(--hover); }
.member-hit:disabled { cursor: default; opacity: 1; }
.member-sub { display: block; font-size: 13px; color: var(--muted); }
.p-btns { display: flex; gap: 8px; }
.p-member { gap: 8px; }
.p-split > .p-btns { flex-direction: row; gap: 8px; }
.profile-modal .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .profile-modal .filter-chips::-webkit-scrollbar { display: none; }
.profile-modal .filter-chips .chip-tab { flex: none; }

/* ---------- empty states */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 28px 24px 32px; color: var(--muted); }
.empty-state .empty-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--link) 10%, var(--bg2)); color: var(--link); margin-bottom: 8px; line-height: 0; }
.empty-state .empty-ic svg { display: block; }
.empty-state b { color: var(--text); font-size: 15.5px; font-weight: 600; }
.empty-state .empty-hint { font-size: 13.5px; line-height: 1.45; max-width: 280px; }
.empty-state .empty-ic.busy { animation: pulse 1.2s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .empty-state .empty-ic.busy { animation: none; } }

/* group permissions: locked composer and the admin panel */
.composer.locked { justify-content: center; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 14px 16px; }
.perm-sec { margin: 14px 4px 6px; font-size: 13px; font-weight: 600; color: var(--link); }
.perm-member { width: 100%; text-align: start; }
.perm-member:hover { background: var(--hover); }
.perm-editor { border-top: 1px solid var(--line); }
.perm-editor .p-btns { padding: 10px 14px; justify-content: flex-end; }
.sticker-open { display: block; padding: 0; line-height: 0; background: none; border: 0; cursor: pointer; }

/* online status */
.pres-on { color: var(--accent, #3390ec); font-weight: 500; }
.p-hero .pres-on { color: inherit; }

/* group sender name: first bubble of a run, clickable; avatar opens the profile */
button.sender-label { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; font: inherit; font-weight: 600; font-size: 13.5px; }
button.sender-label:hover .sender-name { text-decoration: underline; }
.bubble .sender-label { display: block; margin: 0 0 2px; }
.bubble.media-bubble .sender-label { margin: 3px 8px 4px; }
.row-av-btn { background: none; border: 0; padding: 0; cursor: pointer; display: block; border-radius: 50%; }

.role-tag { margin-inline-start: 6px; font-size: 11px; font-weight: 500; color: var(--muted); }
.emoji-only.e4 .emoji-big { font-size: 34px; letter-spacing: 2px; white-space: normal; }
button.sender-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bubble .sender-label .role-tag { font-weight: 400; }

.msg-menu .info-row { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.msg-menu .info-row span:first-of-type { flex: 1; }
.info-avs { display: inline-flex; }
.info-avs .avatar { border: 2px solid var(--bg); margin-inline-start: -8px; }
.info-avs .avatar:first-child { margin-inline-start: 0; }

/* ---- Telegram-style message popup: a floating reaction pill above a frosted menu card ---- */
.msg-menu.tg-pop { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 8px; min-width: 240px; width: 252px; backdrop-filter: none; }
.tg-pop .react-pill, .tg-pop .menu-card {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.08);
}
.tg-pop .react-pill { border-radius: 28px; padding: 6px 8px; width: max-content; max-width: calc(100vw - 16px); }
.tg-pop .react-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 336px; }
.tg-pop .react-line button.react-pick { display: grid; place-items: center; width: 42px; min-height: 0; height: 42px; padding: 0; font-size: 27px; border-radius: 50%; line-height: 1; }
.tg-pop .react-line button.react-pick:hover { transform: scale(1.15); background: transparent; }
.tg-pop .react-line button.react-pick.on { background: color-mix(in srgb, var(--link) 24%, transparent); }
.tg-pop .react-line button.react-more { display: grid; place-items: center; width: 36px; min-height: 0; height: 36px; padding: 0; margin-inline-start: 4px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 28%, transparent); color: var(--muted); }
.tg-pop .menu-card { width: 252px; border-radius: 18px; padding: 6px; display: flex; flex-direction: column; }
.tg-pop .menu-card button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text); text-align: start; }
.tg-pop .menu-card button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.tg-pop .menu-card .icon { color: var(--text); }
.tg-pop .menu-card .danger, .tg-pop .menu-card .danger .icon { color: var(--danger); }
.tg-pop .menu-card .tick-end { margin-inline-start: auto; color: var(--muted); }
.tg-pop .menu-card .info-row { border: 0; margin: 0; border-radius: 10px; }
.tg-pop .menu-card .info-row > span:first-of-type { flex: 0 1 auto; }
.tg-pop .menu-card .info-avs { margin-inline-start: auto; }
.tg-pop .menu-card .info-avs + .tick-end { margin-inline-start: 4px; }
.menu-sep { border: 0; height: 1px; background: var(--line); margin: 5px 8px; }
.messages .row-menu.tg-pop, .chat-view > .row-menu.tg-pop { left: min(var(--mx), calc(100vw - 268px)); top: max(8px, min(var(--my), calc(100vh - 470px))); }
/* absolute at the tap point on every screen size (phones included), kept inside the viewport */
.chat-view > .row-menu.tg-pop, .messages .row-menu.tg-pop, [dir="rtl"] .chat-view > .row-menu.tg-pop {
  position: fixed; right: auto; bottom: auto; width: max-content; max-width: calc(100vw - 16px); min-width: 0; padding: 0; border-radius: 0; animation: pop-in .16s cubic-bezier(.2,.9,.3,1); transform-origin: top left; pointer-events: none;
  left: max(8px, min(var(--mx), calc(100vw - 352px))); top: max(8px, min(var(--my), calc(100dvh - 460px - var(--safe-b, 0px))));
}
@media (max-width: 760px) { .tg-pop .menu-card button { padding: 11px 12px; } .tg-pop .react-line { max-width: calc(100vw - 32px); } }

.tg-pop > * { pointer-events: auto; } /* the wrapper is wider than the card: only the visible panels count as "inside", a click anywhere else closes */

/* ---- motion: messages and overlays (all disabled under prefers-reduced-motion) ---- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.94); } }
@keyframes sheet-down { to { transform: translateY(24px); opacity: 0; } }
@keyframes msg-in-mine { from { opacity: 0; transform: translate(10px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes msg-in-theirs { from { opacity: 0; transform: translate(-10px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
.row.msg-new.mine { animation: msg-in-mine .22s cubic-bezier(.2,.9,.3,1); transform-origin: bottom right; }
.row.msg-new.theirs { animation: msg-in-theirs .22s cubic-bezier(.2,.9,.3,1); transform-origin: bottom left; }
.modal-back, .menu-back.dim { animation: fade-in .16s ease-out; }
.modal { animation: pop-in .18s cubic-bezier(.2,.9,.3,1); }
.leaving { pointer-events: none !important; }
.leaving.modal-back, .leaving.menu-back { animation: fade-out .15s ease-in forwards; }
.leaving.modal-back .modal { animation: pop-out .15s ease-in forwards; }
.leaving.row-menu.tg-pop { animation: pop-out .12s ease-in forwards; left: max(8px, min(var(--mx), calc(100vw - 352px))); top: max(8px, min(var(--my), calc(100dvh - 460px))); position: fixed; z-index: 31; width: max-content; }
.leaving.row-menu .menu-card { width: 252px; }
@media (max-width: 760px) { .modal { animation: sheet-up .22s ease-out; } .leaving.modal-back .modal { animation: sheet-down .15s ease-in forwards; } }
@media (prefers-reduced-motion: reduce) {
  .row.msg-new, .modal-back, .menu-back.dim, .modal, .tg-pop, .leaving { animation: none !important; }
}

/* seen / reactions list replaces the menu card inside the same popup */
.tg-pop .menu-card.sub { padding: 4px 6px 6px; }
.tg-pop .menu-card .sub-back { gap: 8px; padding: 10px 8px; }
.sub-list { max-height: min(46dvh, 320px); overflow-y: auto; }
.sub-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; }
.sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sub-main b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-main small { color: var(--muted); font-size: 13px; }
.sub-emoji { font-size: 22px; }
.sub-hint { margin: 6px 8px 2px; }

/* reaction chips: up to three reactors show their profile photos */
.react-avs { display: inline-flex; margin-inline-start: 2px; }
.react-avs .avatar { border: 1.5px solid var(--bg); margin-inline-start: -6px; }
.react-avs .avatar:first-child { margin-inline-start: 0; }
.react { height: 28px; }

/* menu fixes: avatars in a single row, readable labels, loader while "seen" loads */
.tg-pop .menu-card .info-row { color: var(--text); }
.tg-pop .menu-card .info-row > span:first-of-type { color: var(--text); flex: 0 1 auto; }
.info-avs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: none; margin-inline-start: auto; }
.info-avs > .avatar { flex: none; display: grid; margin-top: 0; margin-bottom: 0; }
.menu-sep { flex: none; padding: 0; }
@keyframes spin-r { to { transform: rotate(360deg); } }
@keyframes shimmer { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent); border-top-color: var(--link); animation: spin-r .7s linear infinite; flex: none; margin-inline-start: auto; }
.tg-pop .menu-card .info-row.skeleton { display: flex; align-items: center; gap: 14px; padding: 10px 12px; min-height: 44px; }
.skel-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--hover); animation: shimmer 1.1s ease-in-out infinite; }
.skel-bar { width: 84px; height: 12px; border-radius: 6px; background: var(--hover); animation: shimmer 1.1s ease-in-out infinite; }
.sub-loading { display: flex; align-items: center; gap: 10px; padding: 14px 10px; color: var(--muted); }
.sub-loading .spin { margin: 0; }
@media (prefers-reduced-motion: reduce) { .spin, .skel-ic, .skel-bar { animation-duration: 2s; } }

/* ---- placeholders and unread divider ---- */
.chat-skel { display: flex; flex-direction: column; }
.skel-chat { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.skel-av { width: 54px; height: 54px; border-radius: 50%; background: var(--hover); flex: none; animation: shimmer 1.2s ease-in-out infinite; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.skel-lines span { height: 12px; border-radius: 6px; background: var(--hover); animation: shimmer 1.2s ease-in-out infinite; }
.skel-lines span:last-child { height: 10px; opacity: .7; }
.msg-skel { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.skel-row { display: flex; } .skel-row.mine { justify-content: flex-end; }
.skel-bubble { height: 38px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: var(--shadow); animation: shimmer 1.2s ease-in-out infinite; }
.lazy-sentinel { display: grid; place-items: center; padding: 14px; }
.lazy-sentinel .spin { margin: 0; }
.unread-div { display: flex; justify-content: center; margin: 10px 0 6px; scroll-margin-top: 8px; }
.unread-div span { padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--link); background: color-mix(in srgb, var(--bg) 82%, transparent); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .skel-av, .skel-lines span, .skel-bubble { animation: none; } }

/* older messages load automatically when you scroll to the top; the spinner floats so nothing shifts */
.messages { overflow-anchor: none; }
.older-loading { position: sticky; top: 6px; height: 0; display: grid; place-items: start center; z-index: 2; overflow: visible; }
.older-loading .spin { margin: 0; width: 22px; height: 22px; background: var(--bg); box-shadow: var(--shadow); }

/* reactions inside the bubble (Telegram style): chips bottom-left, time bottom-right on the same line */
.in-reacts { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 5px; clear: both; }
.in-reacts .reacts { margin: 0; flex: 1; min-width: 0; gap: 4px; }
.in-reacts .time { float: none; margin: 0; flex: none; }
.in-reacts.media { padding: 4px 7px 4px; margin-top: 0; }
.bubble .react { height: 24px; padding: 0 7px; font-size: 13px; backdrop-filter: none; background: color-mix(in srgb, var(--link) 16%, transparent); border-color: transparent; }
.bubble .react.mine { background: color-mix(in srgb, var(--link) 34%, transparent); border-color: transparent; }
.mine .bubble .react { background: rgba(255,255,255,.28); color: var(--out-text); }
.mine .bubble .react.mine { background: rgba(255,255,255,.5); }
.mine .bubble .react .react-n { color: var(--out-text); }
.bubble .react-avs .avatar { border-color: transparent; }

.m-key { display: contents; } /* keyed wrapper per message: stable DOM when older messages are prepended */
.older-loading { height: auto; top: 8px; justify-items: center; place-items: center; pointer-events: none; }
.older-loading .pill-load { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: var(--shadow); font-size: 13px; color: var(--muted); }
.older-loading .pill-load .spin { width: 16px; height: 16px; box-shadow: none; background: none; }

/* ---- modern shimmer placeholders: a soft highlight sweeps across every skeleton ---- */
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-av, .skel-lines span, .skel-bubble, .skel-ic, .skel-bar {
  background-color: transparent;
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--text) 7%, transparent) 30%, color-mix(in srgb, var(--text) 15%, transparent) 50%, color-mix(in srgb, var(--text) 7%, transparent) 70%);
  background-size: 200% 100%;
  animation: sweep 1.4s linear infinite;
}
.skel-bubble { box-shadow: none; border-radius: 18px; height: 40px; background-color: color-mix(in srgb, var(--bg) 55%, transparent); }
.skel-row.mine .skel-bubble { border-bottom-right-radius: 5px; } .skel-row.theirs .skel-bubble { border-bottom-left-radius: 5px; }
.msg-skel { gap: 6px; }
.msg-skel.older { padding: 4px 0 10px; }
.skel-row:nth-child(even) .skel-bubble { height: 52px; }
@media (prefers-reduced-motion: reduce) { .skel-av, .skel-lines span, .skel-bubble, .skel-ic, .skel-bar { animation: none; } }

/* fixes: the reaction row must size the bubble (flex:1 had a zero basis, so chips and time collided), and the sender name must too */
.in-reacts { flex-wrap: wrap; justify-content: flex-start; }
.in-reacts .reacts { flex: 0 1 auto; min-width: 0; }
.in-reacts .time { margin-inline-start: auto; padding-inline-start: 6px; }
button.sender-label { overflow: visible; text-overflow: clip; max-width: none; }

/* ---- iMessage palette: blue outgoing bubbles, light-grey incoming, Telegram wallpaper kept ---- */
:root {
  --bg: #ffffff; --bg2: #f2f2f7; --text: #000; --muted: #6c6c70; --line: #d8d8dc; --hover: #f2f2f7;
  --primary: #007aff; --primary-d: #0062cc; --active: #0062cc; --link: #007aff; --on-primary: #fff;
  --out: #007aff; --out-text: #fff; --out-time: rgba(255,255,255,.78); --in: #ffffff;
  --chat-bg: #e8f1fc; --chat-bg2: #f6faff; --shadow: 0 1px 2px rgba(16,35,47,.15); --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%231d5fb4' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform=%22translate(28 30) rotate(15) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(92 22) rotate(-12) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(160 34) rotate(20) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(214 26) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(44 88) rotate(0) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(112 84) rotate(-8) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(182 92) rotate(10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(226 84) rotate(25) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3Cg transform=%22translate(20 150) rotate(0) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Ccircle r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(78 148) rotate(-10) scale(1)%22%3E%3Ccircle r=%228%22/%3E%3Cpath d=%22M-4 2Q0 6 4 2M-3-3h.01M3-3h.01%22/%3E%3C/g%3E%3Cg transform=%22translate(140 156) rotate(-25) scale(1)%22%3E%3Cpath d=%22M0-9 2.6-3 9-2.2 4.3 2.2 5.6 8.6 0 5.4-5.6 8.6-4.3 2.2-9-2.2-2.6-3z%22/%3E%3C/g%3E%3Cg transform=%22translate(200 146) rotate(14) scale(1)%22%3E%3Cpath d=%22M0 8C-12-1-8-10 0-5 8-10 12-1 0 8z%22/%3E%3C/g%3E%3Cg transform=%22translate(34 208) rotate(-14) scale(1)%22%3E%3Cpath d=%22M-10 0 10-8 4 9 0 2z M0 2 10-8%22/%3E%3C/g%3E%3Cg transform=%22translate(100 214) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(156 212) rotate(-10) scale(1)%22%3E%3Cpath d=%22M3-10-6 1H0L-3 10 6-1H0z%22/%3E%3C/g%3E%3Cg transform=%22translate(212 204) rotate(12) scale(1)%22%3E%3Cpath d=%22M-9-6H9V4H1L-4 9V4H-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(64 50) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(130 128) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(176 60) rotate(0) scale(1)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(8 110) rotate(45) scale(1)%22%3E%3Cpath d=%22M0-7V7M-7 0H7%22/%3E%3C/g%3E%3Cg transform=%22translate(120 190) rotate(-20) scale(1)%22%3E%3Cpath d=%22M5-8A9 9 0 1 0 8 4 7 7 0 0 1 5-8z%22/%3E%3C/g%3E%3C/svg%3E");
  --danger: #ff3b30; --tick-read: #fff;
}
:root[data-theme="dark"] {
  --bg: #1c1c1e; --bg2: #000000; --text: #fff; --muted: #98989f; --line: #38383a; --hover: #2c2c2e;
  --primary: #0a84ff; --primary-d: #0a6fd8; --active: #0a6fd8; --link: #0a84ff; --on-primary: #fff;
  --out: #0a84ff; --out-text: #fff; --out-time: rgba(255,255,255,.78); --in: #1f2b3a;
  --chat-bg: #0b1119; --chat-bg2: #14202e; --shadow: none;
  --danger: #ff453a; --tick-read: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #1c1c1e; --bg2: #000000; --text: #fff; --muted: #98989f; --line: #38383a; --hover: #2c2c2e;
  --primary: #0a84ff; --primary-d: #0a6fd8; --active: #0a6fd8; --link: #0a84ff; --on-primary: #fff;
  --out: #0a84ff; --out-text: #fff; --out-time: rgba(255,255,255,.78); --in: #1f2b3a;
  --chat-bg: #0b1119; --chat-bg2: #14202e; --shadow: none;
  --danger: #ff453a; --tick-read: #fff;
  }
}
.bubble.tail::after { filter: none; }

/* owner / admin badge: a small pill beside the bubble, not inside it */
.role-out { align-self: flex-start; margin: 4px 6px 0; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--link); background: color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: var(--shadow); white-space: nowrap; flex: none; }
.role-tag { display: none; }

/* Telegram: name on one side, owner/admin pill on the far side of the same row, inside the bubble */
button.sender-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bubble button.sender-label { width: 100%; }
.sender-label .role-pill { flex: none; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 22px; color: inherit; background: color-mix(in srgb, currentColor 16%, transparent); }
.role-out { display: none; }

/* unread reactions: a heart badge in the chat list and a jump button above "scroll to latest" */
.badge.react-badge { background: #ff3b30; color: #fff; min-width: 22px; padding: 0; font-size: 12px; margin-inline-start: 4px; }
.chat-row.active .badge.react-badge { background: #fff; color: #ff3b30; }
.to-bottom.to-react { bottom: 68px; color: #ff3b30; }
.to-react-ic { font-size: 20px; line-height: 1; }
.to-bottom.to-react .badge { background: #ff3b30; color: #fff; }

/* name row: a real flex <div> sizes the bubble correctly (a flex <button> did not), pill pushed to the far side */
.sender-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 2px; }
.sender-row.c0 { color: var(--s0); } .sender-row.c1 { color: var(--s1); } .sender-row.c2 { color: var(--s2); } .sender-row.c3 { color: var(--s3); }
.sender-row.c4 { color: var(--s4); } .sender-row.c5 { color: var(--s5); } .sender-row.c6 { color: var(--s6); }
.sender-row .sender-label { color: inherit; width: auto; margin: 0; display: inline-block; }
.bubble.media-bubble .sender-row { margin: 3px 8px 4px; }
.m-key > .sender-row { margin: 6px 0 0 50px; align-self: flex-start; }
.bubble .sender-row button.sender-label { width: auto; }
.sender-row .role-pill { flex: none; white-space: nowrap; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 22px; color: inherit; background: color-mix(in srgb, currentColor 16%, transparent); }
.sender-row .sender-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

/* root-cause fix: .bubble{max-width:78%} was a percentage of its own shrink-to-fit parent, so every bubble was squeezed to ~78% of
   its natural width (time wrapped under short texts, name and pill collided). The limit now lives on the wrapper, whose width is definite. */
.msg-wrap { max-width: min(78%, 560px); }
.bubble, .bubble.media-bubble { max-width: 100%; }
.bubble.media-bubble { width: fit-content; max-width: 340px; }
@media (max-width: 760px) { .msg-wrap { max-width: 88%; } .bubble, .bubble.media-bubble { max-width: 100%; } .bubble.media-bubble { max-width: min(100%, 340px); } }

/* photos, GIFs and videos fill the bubble edge to edge: no padded frame around them */
.bubble.media-bubble:not(.wide) { padding: 0; }
.bubble.media-bubble:not(.wide) .media { border-radius: inherit; background: transparent; min-width: 140px; }
.bubble.media-bubble:not(.wide) .media:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.bubble.media-bubble:not(.wide) > .reply-quote, .bubble.media-bubble:not(.wide) > .fwd, .bubble.media-bubble:not(.wide) > .fwd-from { margin: 6px 10px 4px; }
.bubble.media-bubble:not(.wide) .media-ph { background: color-mix(in srgb, var(--text) 8%, transparent); }

/* mentions are buttons that open the person's profile */
button.mention { display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 500; line-height: inherit; color: var(--link); cursor: pointer; text-align: inherit; white-space: inherit; }
button.mention:hover { text-decoration: underline; }
.mine button.mention { color: var(--out-text); text-decoration: underline; text-underline-offset: 2px; }
button.mention.me { background: color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 4px; padding: 0 3px; }
.mine button.mention.me { background: rgba(255,255,255,.25); }

/* floating jump buttons stack in one column: scroll-down at the bottom, then reactions, then mentions */
.fab-col { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; z-index: 4; pointer-events: none; }
[dir="rtl"] .fab-col { right: auto; left: 14px; }
.fab-col > .to-bottom { position: static; pointer-events: auto; }
.badge.mention-badge { background: var(--primary); color: #fff; min-width: 22px; padding: 0; font-size: 13px; margin-inline-start: 4px; }
.chat-row.active .badge.mention-badge { background: #fff; color: var(--primary-d); }
.to-bottom.to-mention { color: var(--primary); }
.to-mention-ic { font-size: 19px; font-weight: 700; line-height: 1; }
.to-bottom.to-mention .badge { background: var(--primary); color: #fff; }

/* reply quotes: inside my blue bubbles the bar and tint must be light, otherwise blue-on-blue makes them vanish */
.reply-quote { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.mine .reply-quote { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.18); }
.mine .reply-quote b, .mine .reply-quote span { color: var(--out-text); }
.mine .reply-quote span { opacity: .9; }
.mine .fwd, .mine .fwd b { color: var(--out-text); }

.chat-badges { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: none; }
.chat-badges .badge { margin: 0; }

/* ---- Telegram "glass" chat header: three floating pills over the wallpaper (back · title · search/more) ---- */
.chat-view { position: relative; }
.chat-view > .chat-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: calc(8px + var(--safe-t)) 10px 4px; gap: 8px; align-items: center; pointer-events: none;
}
.chat-view > .chat-head > *, .chat-view > .chat-head .head-actions > * { pointer-events: auto; }
.chat-view > .chat-head .icon-btn.back, .chat-view > .chat-head .head-hit, .chat-view > .chat-head .head-actions, .chat-view > .chat-search {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent);
}
.chat-view > .chat-head .icon-btn.back { width: 46px; height: 46px; border-radius: 50%; margin: 0; color: var(--text); flex: none; }
.chat-view > .chat-head .head-hit { flex: 1; min-width: 0; height: 52px; padding: 5px 16px 5px 6px; border-radius: 28px; gap: 10px; }
[dir="rtl"] .chat-view > .chat-head .head-hit { padding: 5px 6px 5px 16px; }
.chat-view > .chat-head .head-hit:hover { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.chat-view > .chat-head .head-name { font-size: 16px; font-weight: 600; }
.chat-view > .chat-head .head-sub { font-size: 13px; }
.chat-view > .chat-head .head-actions { display: flex; align-items: center; height: 52px; padding: 0 6px; border-radius: 28px; flex: none; }
.chat-view > .chat-head .head-actions .icon-btn { width: 42px; height: 42px; background: transparent; color: var(--text); }
.chat-view > .chat-head .head-actions .icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.chat-view > .chat-head .head-menu { top: calc(64px + var(--safe-t)); }
/* messages scroll underneath the glass, so they start below it */
.chat-view .messages { padding-top: calc(74px + var(--safe-t)); }
.chat-view.searching .messages { padding-top: calc(132px + var(--safe-t)); }
.chat-view.has-banner > .banner { margin-top: calc(70px + var(--safe-t)); }
.chat-view.has-banner .messages { padding-top: 12px; }

/* in-chat search: a pill under the header with a clear button, result counter, up/down arrows and close */
.chat-search { position: absolute; z-index: 11; top: calc(68px + var(--safe-t)); left: 10px; right: 10px; height: 50px; padding: 0 8px 0 16px; border-radius: 26px; display: flex; align-items: center; gap: 4px; animation: pop-in .16s cubic-bezier(.2,.9,.3,1); transform-origin: top center; }
.chat-search .cs-ic { color: var(--muted); flex: none; margin-inline-end: 6px; }
.chat-search .cs-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 17px; color: var(--text); padding: 0; height: 100%; }
.chat-search .cs-clear { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 60%, transparent); color: var(--bg); display: grid; place-items: center; flex: none; }
.chat-search .cs-count { font-size: 13px; color: var(--muted); white-space: nowrap; padding: 0 6px; font-variant-numeric: tabular-nums; }
.chat-search .cs-nav, .chat-search .cs-close { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text); flex: none; }
.chat-search .cs-nav:disabled { opacity: .35; }
.chat-search .cs-nav:hover:not(:disabled), .chat-search .cs-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.chat-search .cs-spin { margin: 0 6px; width: 16px; height: 16px; }
@media (max-width: 760px) { .chat-search .cs-count { display: none; } }

/* ---- liquid-glass composer, same recipe as the header pills ---- */
.chat-view .composer-box {
  border: 0; background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent);
}
.chat-view .composer .icon-btn.send.round.mic {
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent);
}
.chat-view .composer .icon-btn.send.round.mic:hover:not(:disabled) { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.chat-view .composer-box .icon-btn { color: var(--muted); }

/* ---- header "…" menu: the glass pill's backdrop-filter made it the containing block of the fixed backdrop and menu (weird background).
   The glass now lives on a pseudo-element, so nothing fixed is trapped inside a filtered box. ---- */
.chat-view > .chat-head .head-actions { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; position: relative; isolation: isolate; }
.chat-view > .chat-head .head-actions::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent);
}
.chat-view > .chat-head .menu-back { position: fixed; inset: 0; z-index: 30; background: transparent; pointer-events: auto; }
.chat-view > .chat-head .head-menu { position: fixed; z-index: 31; top: calc(66px + var(--safe-t)); right: 10px; left: auto; width: min(260px, calc(100vw - 20px)); height: auto; pointer-events: auto; }
[dir="rtl"] .chat-view > .chat-head .head-menu { right: auto; left: 10px; }

/* ---- search bar: perfectly centred glyphs, person filter */
.chat-search button svg, .chat-search .cs-ic { display: block; flex: none; }
.chat-search .cs-clear, .chat-search .cs-nav, .chat-search .cs-close { line-height: 0; padding: 0; }
.chat-search .cs-clear svg { width: 12px; height: 12px; }
.chat-search .cs-user.on { background: color-mix(in srgb, var(--link) 18%, transparent); }
.chat-search .cs-users { position: absolute; top: 56px; right: 8px; width: min(280px, calc(100vw - 36px)); max-height: 46dvh; overflow-y: auto; padding: 6px; border-radius: 20px; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: 0 10px 34px rgba(0,0,0,.2), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent); animation: pop-in .14s cubic-bezier(.2,.9,.3,1); transform-origin: top right; }
.chat-search .cs-users button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; font-size: 15px; text-align: start; border-radius: 12px; height: auto; }
.chat-search .cs-users button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.chat-search .cs-users button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-search .cs-users .tick-end { margin-inline-start: auto; color: var(--link); }

/* ---- Telegram-style attach sheet: a glass bottom sheet with big tabs (the system picker opens from Gallery) ---- */
.attach-sheet {
  position: fixed; z-index: 32; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); width: min(520px, calc(100vw - 20px));
  padding: 8px 14px 14px; border-radius: 30px;
  background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 .5px color-mix(in srgb, var(--text) 12%, transparent);
  animation: attach-up .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes attach-up { from { opacity: 0; transform: translate(-50%, 28px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sheet-grip { display: block; width: 38px; height: 5px; border-radius: 3px; margin: 0 auto 6px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.sheet-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; margin-bottom: 8px; }
.sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.sheet-head .sheet-x { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; color: var(--text);
  background: color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: 0 4px 14px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent); }
[dir="rtl"] .sheet-head .sheet-x { left: auto; right: 0; }
.attach-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.attach-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px 12px; border-radius: 22px; text-align: center; color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, transparent); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent); transition: transform .12s, background-color .15s; }
.attach-tab:active { transform: scale(.95); }
.attach-tab:hover { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.attach-tab b { font-size: 15px; font-weight: 600; margin-top: 4px; }
.attach-tab small { font-size: 12px; color: var(--muted); line-height: 1.25; }
.at-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.at-ic.blue { background: linear-gradient(#3b9bff, #0a6fe0); } .at-ic.green { background: linear-gradient(#3fd16a, #1fa14a); } .at-ic.orange { background: linear-gradient(#ffb23f, #f0801a); }
.sheet-hint { margin: 12px 4px 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .attach-sheet { animation: none; } }

@keyframes attach-down { to { opacity: 0; transform: translate(-50%, 24px); } }
.leaving.attach-sheet { animation: attach-down .16s ease-in forwards; }

/* ---- emoji / sticker / GIF panel: a floating liquid-glass sheet above the composer; any click outside closes it ---- */
.picker-back { position: fixed; inset: 0 0 calc(76px + var(--safe-b)) 0; z-index: 29; background: transparent; }
.chat-view .picker, .picker {
  position: fixed; z-index: 30; left: 50%; bottom: calc(76px + var(--safe-b)); transform: translateX(-50%);
  width: min(520px, calc(100vw - 20px)); height: clamp(300px, 46dvh, 460px); margin: 0; padding: 6px 4px 6px; border: 0; border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 18px 50px rgba(0,0,0,.26), 0 0 0 .5px color-mix(in srgb, var(--text) 12%, transparent);
  animation: attach-up .22s cubic-bezier(.2,.9,.3,1); overflow: hidden;
}
.picker .picker-groups { padding: 8px 10px 4px; }
.picker .picker-groups button { color: var(--text); }
.picker .picker-groups button.active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.picker .picker-grid { padding: 8px 10px; }
.picker .picker-grid button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.picker .picker-tabs { margin: 4px 8px 4px; padding: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--bg) 60%, transparent); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent); }
.picker .picker-tabs button { color: var(--muted); }
.picker .picker-tabs button.active { background: color-mix(in srgb, var(--link) 18%, var(--bg)); color: var(--link); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.picker .picker-note { color: var(--muted); }
.leaving.picker { animation: attach-down .15s ease-in forwards; }
.leaving.picker-back { display: none; }
@media (prefers-reduced-motion: reduce) { .picker { animation: none; } }

/* the panel sits BELOW the chat box (like a keyboard): in flow, glass, with the composer staying on top of the click-away layer */
.picker-back { inset: 0; z-index: 29; }
.chat-view .picker, .picker {
  position: relative; left: auto; bottom: auto; transform: none; width: auto; z-index: 31;
  margin: 0 10px calc(10px + var(--safe-b)); height: clamp(280px, 40dvh, 420px);
  animation: picker-rise .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes picker-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.chat-view:has(.picker) .composer { position: relative; z-index: 31; padding-bottom: 6px; }
.leaving.picker { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; animation: pop-out .15s ease-in forwards; }

/* ---- round video messages ---- */
.bubble.vnote-bubble { background: transparent; box-shadow: none; padding: 0; }
.bubble.vnote-bubble { position: relative; width: fit-content; }
.bubble.vnote-bubble .time { position: absolute; right: 8px; bottom: 8px; margin: 0; float: none; background: rgba(0,0,0,.55); color: #fff; padding: 1px 7px; border-radius: 10px; }
[dir="rtl"] .bubble.vnote-bubble .time { left: 8px; right: auto; }
.bubble.vnote-bubble .in-reacts { margin-top: 4px; }
.vnote { position: relative; width: min(240px, 62vw); transition: width .25s ease; aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer; background: rgba(0,0,0,.18); display: grid; place-items: center; color: #fff; --p: 0; }
.vnote video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnote-ring, .vrec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.vnote-ring circle, .vrec-ring circle { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 2px rgba(0,0,0,.5)); }
.vnote-dur { position: absolute; top: 8px; inset-inline-start: 10px; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: rgba(0,0,0,.45); color: #fff; line-height: 1.4; font-variant-numeric: tabular-nums; }
.vnote:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.vrec-back { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.vrec { position: relative; width: min(320px, 80vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.vrec video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vrec-ring circle { stroke: #e53935; stroke-width: 3; opacity: 1; stroke-dashoffset: calc(1 - var(--p)); transition: stroke-dashoffset .25s linear; }
.vrec-bar { flex: none; }
.vrec-actions { display: flex; gap: 28px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .vrec-ring circle { transition: none; } }
.media-ph.dl, .vnote-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 120px; color: #fff; background: rgba(0,0,0,.35); line-height: 1.2; cursor: pointer; }
.vnote-ph { border-radius: 50%; min-height: 0; }
.vnote-ph:disabled { cursor: default; }
.dl-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.5); }
.dl-size { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lb-vnote { position: relative; width: min(86vw, 62dvh, 520px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer; background: #000; --p: 0; outline: none; }
.lb-vnote video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-vnote .vnote-ring circle { stroke-dashoffset: calc(1 - var(--p)); opacity: 1; }
.lb-vnote:focus-visible { box-shadow: 0 0 0 3px var(--primary); }
/* not-yet-downloaded media: a compact tile, not a full-size empty box */
.vnote-ph { width: min(240px, 62vw); aspect-ratio: 1; padding: 0; }
.media[style*="height:"] > .media-ph { min-width: 0; min-height: 0; width: 100%; height: 100%; }
.media[style*="height:"] { min-width: 0; max-width: 100%; }
.media-ph.dl { min-height: 150px; border: 0; }
.vnote-ph .dl-size, .media-ph.dl .dl-size { background: rgba(0,0,0,.5); padding: 1px 8px; border-radius: 10px; }
.vnote.playing { width: min(340px, calc(100vw - 72px)); }
.vnote.playing .vnote-ring circle { stroke-dashoffset: calc(1 - var(--p)); opacity: 1; }
.vnote.playing .vnote-dur { display: none; }
@media (prefers-reduced-motion: reduce) { .vnote { transition: none; } }
.media-ph.dl, .media-ph.has-thumb { position: relative; overflow: hidden; }
.ph-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(1.1); transform: scale(1.25); image-rendering: auto; pointer-events: none; }
.media-ph.dl .dl-ic, .media-ph.dl .dl-size, .vnote-ph .dl-ic, .vnote-ph .dl-size { position: relative; }
.media-ph.has-thumb { animation: none; }
.thumb-ph { position: relative; overflow: hidden; color: #fff; }
.thumb-ph .ph-thumb { transform: scale(1.1); filter: blur(6px); }
.thumb-ph .icon { position: relative; }
.vnote-ph { position: relative; overflow: hidden; }
.vnote-ph.vnote-ph { background: rgba(0,0,0,.25); }
.media[style*="height:"] img, .media[style*="height:"] video { height: 100%; max-height: none; object-fit: cover; }
.bubble.media-bubble:not(.wide) .media[style*="height:"] { min-width: 0; }
.lightbox.tall { place-items: start center; overflow: auto; }
.lightbox.tall img { max-height: none; width: min(100%, 720px); }

/* ---- send preview dialog ---- */
.send-dlg { max-width: 460px; }
.send-list { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.send-list.multi { grid-template-columns: 1fr 1fr; }
.send-item { position: relative; background: rgba(0,0,0,.08); line-height: 0; }
.send-item img, .send-item video { width: 100%; max-height: 52dvh; object-fit: contain; display: block; background: color-mix(in srgb, var(--text) 6%, transparent); }
.send-list.multi .send-item img, .send-list.multi .send-item video { aspect-ratio: 1; max-height: none; object-fit: cover; }
.send-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; padding: 3px 6px; border-radius: 8px; display: grid; place-items: center; }
.send-file { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 10px; }
.send-info { color: var(--muted); font-size: 12.5px; margin: 8px 2px 0; }
.send-cap { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.send-cap textarea { flex: 1; resize: none; border: 0; outline: 0; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 20px; padding: 11px 16px; font: inherit; color: var(--text); max-height: 120px; field-sizing: content; }
.send-cap textarea:focus-visible { box-shadow: 0 0 0 2px var(--primary); }

/* ---- media bubbles, Telegram style: media fills the bubble, caption below, time over the media or at the end of the caption ---- */
.bubble.media-bubble:not(.wide) { overflow: hidden; }
.bubble.media-bubble .caption { padding: 6px 10px 6px; white-space: pre-wrap; word-break: break-word; line-height: 1.35; }
.bubble.media-bubble .caption .time { position: static; float: right; background: none; color: var(--muted); padding: 0; margin: 6px 0 -3px 10px; }
.mine .bubble.media-bubble .caption .time { color: var(--out-time); }
[dir="rtl"] .bubble.media-bubble .caption .time { float: left; margin: 6px 10px -3px 0; }
.bubble.media-bubble.has-cap { min-width: 0; }
.bubble.media-bubble:not(.wide) .media { max-width: 100%; }
.bubble.media-bubble:not(.wide) .media img, .bubble.media-bubble:not(.wide) .media video { max-height: 360px; }
.bubble.media-bubble:not(.wide) .media[style*="height:"] img, .bubble.media-bubble:not(.wide) .media[style*="height:"] video { max-height: none; }
.bubble.media-bubble .media-ph.dl { border-radius: 0; }
.bubble.media-bubble[style*="width"] { max-width: 100%; box-sizing: border-box; }

/* ---- media viewer (Telegram style): sender + date on top, actions, prev/next, caption at the bottom ---- */
.lightbox.tg { display: flex; flex-direction: column; padding: 0; background: rgba(8,10,14,.94); outline: none; overflow: hidden; animation: lb-in .16s ease-out; }
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }
.lb-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t, 0px)) 14px 10px; color: #fff; background: linear-gradient(rgba(0,0,0,.55), transparent); position: relative; z-index: 2; flex: none; }
.lb-top .grow { flex: 1; }
.lb-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lb-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who span, .lb-count { font-size: 13px; opacity: .72; font-variant-numeric: tabular-nums; }
.lb-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: transparent; transition: background .15s; }
.lb-ic:hover, .lb-ic:focus-visible { background: rgba(255,255,255,.16); }
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 64px 8px; overflow: hidden; }
.lightbox.tg img, .lightbox.tg video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; transition: transform .22s ease; cursor: zoom-in; user-select: none; }
.lightbox.tg.zoomed img { transform: scale(2.2); cursor: zoom-out; }
.lightbox.tg.zoomed .lb-stage { overflow: auto; }
.lightbox.tg video { cursor: default; }
.lightbox.tg.tall .lb-stage { place-items: start center; overflow: auto; }
.lightbox.tg.tall img { max-height: none; width: min(100%, 720px); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); z-index: 3; transition: background .15s; }
.lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-nav.prev { inset-inline-start: 12px; } .lb-nav.next { inset-inline-end: 12px; }
.lb-cap { flex: none; padding: 12px 20px calc(16px + var(--safe-b, 0px)); color: #fff; text-align: center; font-size: 15.5px; line-height: 1.4; background: linear-gradient(transparent, rgba(0,0,0,.6)); max-height: 28dvh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 760px) { .lb-stage { padding: 0 0 8px; } .lb-nav { display: none; } .lb-count { display: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox.tg, .lightbox.tg img { animation: none; transition: none; } }
/* viewer polish: opaque blurred backdrop (the chat header no longer shows through), small images scale up to fill the stage */
.lightbox.tg { background: rgba(6,8,12,.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.lightbox.tg:not(.tall) .lb-stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox.tg:not(.tall) .lb-stage video { width: 100%; height: 100%; }
.lightbox.tg .lb-stage { position: relative; }
.lb-cap { position: relative; z-index: 2; }
/* the old .lightbox centred its children (place-items): in the flex column that shrank the header, stage and caption to their content */
.lightbox.tg { place-items: stretch; align-items: stretch; }
.lb-top, .lb-cap, .lb-stage { width: 100%; box-sizing: border-box; }

/* ---- iOS ---- */
/* Safari zooms the page when a focused field has a font smaller than 16px; keep every field at 16px on iOS (pinch zoom stays available). */
@supports (-webkit-touch-callout: none) {
  input, textarea, select, .cs-input, .search-field input, .link-box .field input, .ttl-select { font-size: 16px !important; }
  input, textarea, select { touch-action: manipulation; }
}

/* ---- phone: sticker packs (built-in tiles were overflowing their buttons and overlapping) ---- */
/* square tiles with a row height that does not depend on aspect-ratio sizing (the grid was giving rows ~38px and the stickers overlapped):
   the picker is a size container, and four per row; each row is a quarter of its width minus padding and gaps */
.picker { container-type: inline-size; }
.picker .picker-grid.big { grid-template-columns: repeat(4, 1fr); gap: 8px; grid-auto-rows: calc((100cqw - 20px - 24px) / 4); }
.picker .picker-grid.big .img-tile { position: relative; height: 100%; min-height: 0; padding: 0; overflow: hidden; display: block; }
.picker .picker-grid.big .img-tile img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }

/* ---- touch: selecting text outside a message bubble (wallpaper, day labels, names, time) was triggering odd selection/menus; only message text is selectable ---- */
@media (pointer: coarse) {
  .messages { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .messages .row { -webkit-tap-highlight-color: transparent; }
}

/* ---- install help (sign-in screen), permissions, first-run banner ---- */
.install-help { position: relative; width: 100%; max-width: 380px; margin: 0 auto 14px; padding: 14px 16px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); text-align: start; }
.install-help .ih-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.ih-head { display: flex; gap: 12px; align-items: flex-start; padding-inline-end: 24px; }
.ih-head b { display: block; font-weight: 600; } .ih-head small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.ih-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.install-help ol { margin: 10px 0 2px; padding-inline-start: 22px; font-size: 14px; line-height: 1.5; }
.ih-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--hover); font-size: 13px; }
.ih-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--danger, #c0392b); margin: 8px 0 0; }
.ih-warn.pad { margin: 8px 16px; }
.ih-btn { margin-top: 10px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; width: 100%; }
.perm-row { display: flex; align-items: center; gap: 10px; }
.perm-row .set-label { flex: 1; min-width: 0; } .perm-row .set-label small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.perm-chip { flex: none; font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.perm-chip.ok { background: color-mix(in srgb, #2e9e5b 18%, transparent); color: #2e9e5b; }
.perm-chip.bad { background: color-mix(in srgb, #d64545 18%, transparent); color: #d64545; }
.perm-chip.warn { background: color-mix(in srgb, #e19a1d 20%, transparent); color: #b87a0c; }
.perm-chip.mute { background: var(--hover); color: var(--muted); }
.perm-btn { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; font-size: 13.5px; }
.setup-banner { display: flex; align-items: center; gap: 10px; margin: 6px 12px 2px; padding: 10px 10px 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--primary) 12%, var(--bg2)); border: 1px solid var(--line); }
.setup-banner > div { flex: 1; min-width: 0; } .setup-banner b { display: block; font-size: 14.5px; } .setup-banner small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }

/* ---- iOS installed app ---- */
/* Nothing may scroll under the status bar (iOS blurs/fades whatever is there, which smeared media across the top of the screen):
   the body itself starts below the status bar, and the screens inside no longer add their own top inset. */
html.standalone { --safe-t: 0px; }
html.standalone body { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; background: var(--bg); }
html.standalone .app { height: calc(100dvh - env(safe-area-inset-top, 0px)); }
/* full-screen overlays do cover the status bar, so they keep their own top inset */
html.standalone .lb-top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
html.standalone .modal-back { padding-top: env(safe-area-inset-top, 0px); }
/* keyboard open: no home-indicator padding, and the tab bar gets out of the way */
html.kb { --safe-b: 0px; }
html.kb .tabbar { display: none; }
html.kb .composer { padding-bottom: 8px; }
/* search filters: one scrollable row instead of wrapping onto a lonely second line */
.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips .chip-tab { flex: none; white-space: nowrap; }

/* ---- phones: solid chat header. The frosted pills over scrolling messages smeared bubbles and media into a blur at the top of the screen. ---- */
@media (pointer: coarse), (max-width: 760px) {
  .chat-view > .chat-head { background: transparent; box-shadow: none; pointer-events: none; padding-bottom: 8px; } /* no full-width band: only the solid pills */
  .chat-view > .chat-head .icon-btn.back, .chat-view > .chat-head .head-hit, .chat-view > .chat-head .head-actions, .chat-view > .chat-search {
    background: var(--bg2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .chat-view > .chat-head .head-hit:hover { background: var(--bg2); }
  .chat-view .messages { padding-top: calc(76px + var(--safe-t)); }
}

#blazor-error-ui .err-detail { margin-top: 6px; font-size: 12px; line-height: 1.35; opacity: .9; word-break: break-word; user-select: text; -webkit-user-select: text; max-height: 30dvh; overflow: auto; }

/* keyboard open (see blop.js): fit the app to what is actually visible and follow the panned viewport, so the header stays on screen and
   the composer sits right on the keyboard */
html.kb, html.kb body { overflow: hidden; overscroll-behavior: none; }
html.kb .app { height: var(--vvh, 100dvh); transform: var(--vvx, none); }
html.kb.standalone .app { height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px)); }
html.kb .chat-view .messages { scroll-padding-bottom: 8px; }

/* keyboard open/close: glide instead of snapping, so the header no longer appears to drop in when iOS pans the page */

/* ---- iOS 26 "edge blur" in the installed app ----
   iOS 26 draws a Liquid-Glass blur over the top ~40pt of a home-screen web app, smearing whatever is under the status bar and header.
   There is no CSS switch for it. WebKit leaves it off only when, 4px below the top edge, the topmost box is a REAL element (not a pseudo-element)
   that is position:fixed or sticky, at least 90% of the viewport wide, taller than 10px, with a plain background-color and no backdrop-filter.
   #edge-top is exactly that: a solid strip in the page colour covering the status-bar area (the app itself starts below it).
   It must stay hit-testable, so no pointer-events:none. */
#edge-top { display: none; }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    #edge-top { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: max(env(safe-area-inset-top, 0px), 12px); background-color: var(--edge-bg, var(--bg)); z-index: 2; }
  }
  html.standalone #edge-top { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: max(env(safe-area-inset-top, 0px), 12px); background-color: var(--edge-bg, var(--bg)); z-index: 2; }
}
/* chat: the strip takes the header's colour; with the keyboard open the whole app is shifted, so keep the strip at the very top */

/* emoji / sticker / GIF panel: pinned in the shared bottom sheet (same height as the keyboard), so swapping it with the keyboard moves nothing above it */
html.pk .picker { position: fixed; left: 0; right: 0; bottom: 0; height: var(--sheetH, 40dvh); margin: 0; border-radius: 0; z-index: 4; animation: none; box-sizing: border-box; }
html.pk .picker-back { display: none; }

/* =====================================================================================================================
   Smoothness and native feel. Everything below animates only transform/opacity (compositor-only, no layout) and is
   switched off by prefers-reduced-motion.
   ===================================================================================================================== */
:root { --ease-out: cubic-bezier(.22,.8,.26,1); --ease-io: cubic-bezier(.4,0,.2,1); }

/* ---- loading screen: the app's own colours (light / dark follow the theme) ---- */
.boot { gap: 0; padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)); background: var(--bg); color: var(--muted); }
.boot-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.boot-mark::before { content: ""; position: absolute; inset: 4px; border-radius: 28%; background: var(--primary); opacity: .18; animation: boot-ring 2.2s var(--ease-out) infinite; }
.boot .boot-logo { position: relative; width: 96px; height: 96px; animation: boot-breathe 2.2s ease-in-out infinite; box-shadow: var(--shadow); }
.boot-title { margin-top: 18px; font-size: 24px; font-weight: 700; letter-spacing: .3px; color: var(--text); }
.boot-sub { margin-top: 2px; min-height: 20px; font-size: 14px; color: var(--muted); text-align: center; }
.boot-card { margin-top: 28px; width: min(320px, 100%); padding: 14px 16px; border-radius: var(--radius); background: var(--bg2); text-align: start; }
.boot-bar { height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); contain: paint; }
.boot-bar i { display: block; height: 100%; width: 3%; border-radius: 2px; background: var(--primary); transition: width .3s var(--ease-out); }
.boot-stat { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.boot-msg { font-size: 14.5px; font-weight: 600; color: var(--text); }
.boot-pct { font-size: 15px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.boot-bytes { margin-top: 2px; min-height: 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.boot-steps { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.boot-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); transition: color .25s; }
.boot-steps li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; opacity: .55; box-sizing: border-box; transition: all .25s; }
.boot-steps li.on { color: var(--text); }
.boot-steps li.on::before { opacity: 1; border-color: var(--primary); border-top-color: transparent; animation: boot-spin .8s linear infinite; }
.boot-steps li.done { color: var(--text); }
.boot-steps li.done::before { opacity: 1; border: 0; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.boot-hint { margin-top: 18px; min-height: 36px; max-width: 320px; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; animation: fade-in .5s ease-out; }
.boot-hint:empty { animation: none; }
.boot-retry { margin-top: 10px; padding: 10px 24px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-weight: 600; }
.boot-retry[hidden] { display: none; }
.boot.fail .boot-bar i { background: var(--danger); } .boot.fail .boot-msg { color: var(--danger); }
.boot.settle .boot-bar i { width: 100%; } .boot.settle .boot-bytes { visibility: hidden; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-breathe { 50% { transform: scale(.95); } }
@keyframes boot-ring { 0% { transform: scale(.9); opacity: .25; } 100% { transform: scale(1.4); opacity: 0; } }
/* what replaces the loading screen fades in instead of popping */
#app > main.app, #app > .auth-wrap { animation: app-in .32s var(--ease-out); }
@keyframes app-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- phones: chat list and conversation are two panes that slide (they used to swap with display:none) ---- */
@media (max-width: 760px) {
  .app { position: relative; overflow: hidden; }
  .app > .sidebar, .app > .main { grid-area: 1 / 1; }
  .app .main { display: block; visibility: hidden; transform: translate3d(100%, 0, 0); box-shadow: -10px 0 30px rgba(0,0,0,.14); transition: transform .32s var(--ease-out), visibility 0s linear .32s; }
  [dir="rtl"] .app .main { transform: translate3d(-100%, 0, 0); box-shadow: 10px 0 30px rgba(0,0,0,.14); }
  .app .sidebar { display: flex; transition: transform .32s var(--ease-out), visibility 0s linear 0s; }
  .app.chat-open .main, [dir="rtl"] .app.chat-open .main { visibility: visible; transform: none; transition: transform .32s var(--ease-out), visibility 0s linear 0s; }
  .app.chat-open .sidebar { display: flex; visibility: hidden; transform: translate3d(-22%, 0, 0); transition: transform .32s var(--ease-out), visibility 0s linear .32s; }
  [dir="rtl"] .app.chat-open .sidebar { transform: translate3d(22%, 0, 0); }
}

/* ---- tabs and settings sub-pages ease in ---- */
.side-body > .page, .side-body > .page-scroll, .side-body > div { animation: page-in .26s var(--ease-out); }
@keyframes page-in { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } }
[dir="rtl"] .side-body > .page, [dir="rtl"] .side-body > div { animation-name: page-in-rtl; }
@keyframes page-in-rtl { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } }

/* ---- touch feedback: instant, tiny, GPU-only ---- */
.icon-btn, .round-btn, .chat-row, .set-row, .contact-row, .folder, button.primary, .perm-btn, .p-tile { transition: background-color .15s var(--ease-io), transform .14s var(--ease-out), opacity .15s; }
@media (hover: none) {
  .chat-row:active, .set-row:active, .contact-row:active { background: var(--hover); }
  .icon-btn:active, .round-btn:active { transform: scale(.9); }
  button.primary:active, .perm-btn:active, .p-tile:active, .folder:active, .fab:active { transform: scale(.96); }
  .chat-row:hover, .set-row:hover, .contact-row:hover, .icon-btn:hover:not(:disabled) { background-color: transparent; }
}

/* ---- it should feel like an app, not a page: no text selection / callouts / image dragging on the UI chrome, no zoom-on-double-tap, no rubber-banding ---- */
html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
body { -webkit-touch-callout: none; }
button, .tabbar, .chat-head, .page-head, .side-head, .chat-row, .set-row, .contact-row, .folder, .search-pill, .composer { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable], .selectable, .modal, .err-detail { -webkit-user-select: text; user-select: text; }
.modal button { -webkit-user-select: none; user-select: none; }
img, svg, button { -webkit-user-drag: none; }
img { -webkit-touch-callout: none; }
.side-body, .page-scroll, .messages, .chat-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }

/* ---- performance: backdrop-filter re-blurs everything behind it on every scrolled frame. Keep it for short-lived menus (and lighter), drop it from
   surfaces that are always on screen. ---- */
@media (pointer: coarse), (max-width: 760px) {
  .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
  .composer-box, .chat-view .composer-box { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  .react, .photo-close { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lightbox.tg { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tg-pop .react-pill, .tg-pop .menu-card, .attach-sheet, .chat-view .picker, .picker, .chat-search .cs-users { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .vrec-back { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* ---- skeletons: shimmer by opacity (compositor) instead of moving a gradient (repaints every frame) ---- */
.skel-av, .skel-lines span, .skel-bubble, .skel-ic, .skel-bar { background-image: none; background-color: color-mix(in srgb, var(--text) 11%, transparent); animation: shimmer 1.3s ease-in-out infinite; will-change: opacity; }
.skel-bubble { background-color: color-mix(in srgb, var(--bg) 60%, transparent); }

/* the connection bar and rotating spinners get their own layer so they never repaint the header */
.conn-spin, .spin { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .app .main, .app .sidebar { transition: none !important; }
  .boot-mark::before, .boot .boot-logo, .boot-steps li.on::before, .boot-hint, #app > main.app, #app > .auth-wrap, .side-body > * { animation: none !important; }
  .boot-bar i { transition: none; }
}

/* ---- emoji / sticker panel and chat pane: open at once, fill in a frame later ---- */
.picker-load { flex: 1; display: grid; place-items: center; }
.picker-load .spin { margin: 0; }
.picker-grid { contain: layout paint; }
.picker-grid button { content-visibility: auto; contain-intrinsic-size: 46px 46px; }
.picker-grid.big button, .picker-grid .img-tile { contain-intrinsic-size: 76px 76px; }
html.pk .picker { animation: pk-in .18s var(--ease-out); }
@keyframes pk-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.pk .picker { animation: none; } }

/* ---- emoji / sticker sheet: glides up from the bottom edge and back down (it used to pop in and vanish) ---- */
html.pk .picker { animation: pk-up .3s var(--ease-out); }
@keyframes pk-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes pk-down { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
.leaving.picker, html .leaving.picker { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheetH, 40dvh); margin: 0; border-radius: 0; z-index: 4; box-sizing: border-box; transform: none; animation: pk-down .26s cubic-bezier(.4,0,.6,1) forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.pk .picker, .leaving.picker { animation: none; } }

/* ---- multi-line composer: the box grows with the text (up to 6 lines), buttons stay on the bottom line ---- */
.composer { align-items: flex-end; }
.composer-box { align-items: flex-end; padding-block: 5px; min-height: 50px; }
.composer-box textarea { margin: 8px 0; max-height: 144px; overflow-y: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- files on their way out: a bubble with the local preview, a spinner and the current stage ---- */
.bubble.upload { max-width: min(82%, 300px); min-width: 200px; }
.upload .up-media { position: relative; width: min(280px, 64vw); max-height: 360px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.15); }
.upload .up-media img, .upload .up-media video { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.8); }
.upload.failed .up-media img, .upload.failed .up-media video { filter: brightness(.55) grayscale(.4); }
.up-overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.up-ring { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin-r .8s linear infinite; background: rgba(0,0,0,.28); }
.up-ring.small { width: 26px; height: 26px; border-width: 2.5px; border-color: color-mix(in srgb, var(--link) 30%, transparent); border-top-color: var(--link); background: none; margin-inline-start: auto; flex: none; }
.up-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.up-btn.small { width: 32px; height: 32px; margin-inline-start: auto; background: var(--link); flex: none; }
.up-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; }
.up-x.inline { position: static; flex: none; background: var(--hover); color: var(--muted); margin-inline-start: 6px; }
.up-status { padding: 5px 6px 2px; font-size: 12.5px; color: var(--out-time); }
.upload.failed .up-status { color: var(--danger); }
.upload .caption { padding: 2px 6px 4px; }
.upload .send-file { display: flex; align-items: center; gap: 10px; }

/* ---- global audio player bar (voice messages and music) ---- */
.player-bar { position: relative; display: flex; align-items: center; gap: 4px; flex: none; min-height: 52px; padding: 4px 6px 6px; background: var(--bg2); box-shadow: 0 1px 0 var(--line); overflow: hidden; animation: pl-in .28s var(--ease-out); z-index: 5; }
@keyframes pl-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }
.pl-btn, .pl-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--link); }
.pl-x { color: var(--muted); }
.pl-btn:active, .pl-x:active, .pl-rate:active { background: var(--hover); }
.pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: start; padding: 2px 4px; }
.pl-title { max-width: 100%; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { max-width: 100%; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pl-rate { flex: none; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 14px; background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); font-size: 13px; font-weight: 700; }
.pl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; cursor: pointer; touch-action: none; }
.pl-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.pl-progress i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--link); transform-origin: left center; will-change: transform; }
[dir="rtl"] .pl-progress i { transform-origin: right center; }
/* in a chat the bar floats right under the header; on desktop the sidebar's bar is the one shown */
.player-bar.floating { position: absolute; top: calc(var(--head-b, 72px) + 6px); left: 10px; right: 10px; border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
@media (min-width: 761px) { .player-bar.floating { display: none; } .sidebar .player-bar { border-bottom: 1px solid var(--line); } }
@media (max-width: 760px) { .chat-view.has-player .messages-wrap { margin-top: 56px; } }

/* ---- music files ---- */
.music { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 100%; }
.music-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.music-meta .file-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-meta .file-size { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.music-bar { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; margin-top: 3px; }
.music-bar i { display: block; height: 100%; background: var(--primary); transform-origin: left center; }
[dir="rtl"] .music-bar i { transform-origin: right center; }
.mine .music-bar i { background: var(--out-text); }
.music-dl { flex: none; width: 36px; height: 36px; }
@media (prefers-reduced-motion: reduce) { .player-bar { animation: none; } }
.up-bar { height: 3px; margin: 3px 6px 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, currentColor 14%, transparent); }
.up-bar i { display: block; height: 100%; background: var(--primary); transform-origin: left center; transition: transform .25s linear; }
.mine .up-bar i { background: var(--out-text); }
[dir="rtl"] .up-bar i { transform-origin: right center; }

/* ---- music bubble, Telegram style: round cover with play/pause and a progress ring, title in the link colour, artist below ---- */
.music.tg { display: flex; align-items: center; gap: 12px; min-width: 240px; padding: 4px 4px 4px 2px; }
.mus-cover { position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .14s var(--ease-out); }
.mus-cover:active { transform: scale(.94); }
.mus-cover .icon { filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
.mus-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .2s; }
.mus-cover.active .mus-ring { opacity: 1; }
.mus-ring circle { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset .3s linear; }
.mus-cover.active { box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--bg) 60%, transparent), inset 0 0 0 1px rgba(255,255,255,.08); }
.mus-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mus-title { font-size: 17px; font-weight: 500; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-sub { font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mine .mus-title { color: var(--out-text); }
.mus-dl { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.mus-dl:active { background: var(--hover); }
@media (prefers-reduced-motion: reduce) { .mus-ring circle, .mus-cover { transition: none; } }

/* ---- music player sheet ---- */
.mus-meta { text-align: start; cursor: pointer; }
.modal.fullplayer { padding: 6px 18px calc(16px + var(--safe-b)); max-width: 460px; display: flex; flex-direction: column; align-items: stretch; min-height: min(92dvh, 760px); overflow: hidden; }
.fp-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.fp-label { font-weight: 600; color: var(--muted); font-size: 15px; }
.fp-spacer { width: 40px; }
.fp-cover { align-self: center; width: min(68vw, 270px); aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; margin: 8px 0 18px; box-shadow: 0 14px 38px rgba(0,0,0,.28); transition: transform .35s var(--ease-out), box-shadow .35s; transform: scale(.9); flex: none; }
.fp-cover.playing { transform: none; }
.fp-note { font-size: 96px; line-height: 1; color: rgba(255,255,255,.88); text-shadow: 0 4px 18px rgba(0,0,0,.3); }
.fp-titles { text-align: center; padding: 0 8px; }
.fp-title { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-artist { font-size: 15.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-seekwrap { margin: 18px 4px 4px; }
.fp-seek { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.fp-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.fp-seek i { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--link); transform-origin: left center; will-change: transform; }
[dir="rtl"] .fp-seek i { transform-origin: right center; }
.fp-times { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fp-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; direction: ltr; }
.fp-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: transform .12s, background-color .15s; }
.fp-btn.small { width: 40px; height: 40px; color: var(--muted); }
.fp-btn.on { color: var(--link); }
.fp-btn:active { transform: scale(.9); background: var(--hover); }
.fp-btn .flip { transform: scaleX(-1); }
.fp-play { width: 66px; height: 66px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 45%, transparent); transition: transform .12s; }
.fp-play:active { transform: scale(.93); }
.fp-list-head { padding: 8px 4px 6px; font-size: 13px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); }
.fp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 4px; }
.fp-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; text-align: start; }
.fp-row:active { background: var(--hover); }
.fp-row.current { background: color-mix(in srgb, var(--link) 12%, transparent); }
.fp-mini { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.fp-rowmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-rowtitle { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-row.current .fp-rowtitle { color: var(--link); }
.fp-rowsub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spin.light { width: 20px; height: 20px; margin: 0; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq i { width: 3px; background: #fff; border-radius: 1px; height: 100%; transform-origin: bottom; animation: eq-bar .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .fp-cover { transition: none; } .eq i { animation: none; transform: scaleY(.7); } }
.upd-actions { display: flex; gap: 8px; margin-top: 8px; }
.perm-btn.ghost { background: var(--hover); color: var(--text); }
.mus-cover::before, .fp-mini.img::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.26); pointer-events: none; }
.fp-mini { position: relative; } .fp-mini > * { position: relative; }
.mus-cover .mus-ic { position: relative; }

/* music bubble in the chat: compact */
.music.tg { gap: 10px; min-width: 200px; padding: 2px 2px 2px 0; }
.mus-cover { width: 44px; height: 44px; }
.mus-cover .mus-ic { width: 20px; height: 20px; }
.mus-title { font-size: 15px; font-weight: 600; }
.mus-sub { font-size: 13px; }
.mus-dl { width: 28px; height: 28px; }

/* player bar: compact, cover on the play button, name on top, artist below, time on the side */
.player-bar { min-height: 46px; padding: 3px 6px 6px; }
.pl-btn, .pl-x { width: 36px; height: 36px; }
.pl-btn.cover { position: relative; color: #fff; border-radius: 50%; }
.pl-btn.cover::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.28); }
.pl-btn.cover > * { position: relative; }
.pl-title { font-size: 14px; }
.pl-sub { font-size: 12px; }
.pl-clock { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.player-bar.floating { border-radius: 14px; }
@media (max-width: 760px) { .chat-view.has-player .messages-wrap { margin-top: 50px; } }
.bubble.media-bubble.wide:has(.music) { padding: 6px 10px 4px 6px; min-width: 0; }
.bubble.media-bubble.wide:has(.music) .time { margin-top: -2px; }
.music.tg { min-width: 190px; }

/* ---- music player sheet, modern: the cover runs edge to edge at the top and fades into the sheet; controls float below ---- */
.modal.fullplayer { padding: 0 0 calc(14px + var(--safe-b)); max-width: 480px; min-height: min(94dvh, 800px); border-radius: 26px 26px 0 0; overflow: hidden; background: var(--bg); }
@media (min-width: 761px) { .modal.fullplayer { border-radius: 26px; min-height: min(86dvh, 780px); } }
.fp-hero { position: relative; flex: none; width: 100%; aspect-ratio: 1 / .92; max-height: 46dvh; display: grid; place-items: center; overflow: hidden; transform-origin: top center; transition: transform .5s var(--ease-out); }
.fp-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 70%, transparent) 55%, var(--bg)); pointer-events: none; }
.fp-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(to bottom, rgba(0,0,0,.38), transparent); pointer-events: none; z-index: 1; }
.fp-hero:not(.playing) { transform: scale(.985); }
.fp-hero .fp-note { font-size: 110px; }
.fp-close { position: absolute; z-index: 2; top: calc(12px + var(--safe-t)); inset-inline-start: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fp-count { position: absolute; z-index: 2; top: calc(19px + var(--safe-t)); inset-inline-end: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.fp-titles { position: relative; z-index: 1; margin-top: -58px; padding: 0 22px; text-align: start; }
.fp-title { font-size: 25px; font-weight: 800; line-height: 1.2; letter-spacing: -.2px; }
.fp-artist { font-size: 16px; color: var(--muted); margin-top: 4px; }
.fp-seekwrap { margin: 18px 22px 2px; }
.fp-seek { height: 26px; }
.fp-seek::before, .fp-seek i { top: 11px; height: 4px; border-radius: 2px; }
.fp-seek i { background: var(--text); }
.fp-controls { gap: 8px; justify-content: space-between; margin: 4px 14px 12px; }
.fp-play { width: 70px; height: 70px; background: var(--text); color: var(--bg); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.fp-btn { color: var(--text); }
.fp-list-head { margin: 0 22px; padding: 12px 0 6px; border-top: 0; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.fp-list { margin: 0; padding: 0 12px 4px; }
.fp-mini { border-radius: 12px; width: 46px; height: 46px; }
.fp-mini::before { border-radius: 12px; }
.fp-row { padding: 6px 10px; }
.fp-row.current { background: color-mix(in srgb, var(--text) 8%, transparent); }
.fp-row.current .fp-rowtitle { color: var(--text); font-weight: 700; }
html.standalone .modal-back:has(.fullplayer) { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .fp-hero { transition: none; } }

/* ---- progress ring (uploads and downloads) ---- */
.pring { position: relative; display: inline-grid; place-items: center; color: #fff; flex: none; }
.pring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pring circle { fill: none; stroke-width: 3.2; }
.pr-track { stroke: rgba(255,255,255,.28); }
.pr-val { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset .3s linear; }
.pring.indet svg { animation: spin-r .9s linear infinite; }
.pr-pct { position: relative; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pr-pct small { font-size: 8px; margin-inline-start: 1px; opacity: .85; }
.up-overlay .pring { background: rgba(0,0,0,.42); border-radius: 50%; padding: 0; }
.media-ph .pring { background: rgba(0,0,0,.38); border-radius: 50%; }
.file-ic .pring, .send-file .pring { color: var(--link); }
.file-ic .pr-track, .send-file .pr-track { stroke: color-mix(in srgb, var(--link) 25%, transparent); }
.mus-load { position: relative; display: grid; place-items: center; }
.mus-cover .pring { color: #fff; }
@media (prefers-reduced-motion: reduce) { .pring.indet svg { animation-duration: 2s; } .pr-val { transition: none; } }

/* =====================================================================================================================
   Liquid glass: only menus and buttons. Everything else keeps the app's own look.
   ===================================================================================================================== */
:root {
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --glass-edge: rgba(255,255,255,.55);
  --glass-spec: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-edge: rgba(255,255,255,.2); --glass-spec: inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3); } }
:root[data-theme="dark"] { --glass-edge: rgba(255,255,255,.2); --glass-spec: inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3); }
@supports (transition-timing-function: linear(0, 1)) { :root { --spring: linear(0, .18 6%, .52 14%, .86 24%, 1.07 36%, 1.08 44%, 1.03 56%, .995 70%, 1); } }

/* ---- menus: frosted glass with a bright rim, springing open ---- */
.msg-menu, .compose-menu, .tg-pop .menu-card, .tg-pop .react-pill, .chat-search .cs-users {
  background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-spec), 0 18px 50px rgba(0,0,0,.32);
}
.msg-menu, .compose-menu, .tg-pop .menu-card { border-radius: 20px; }
.msg-menu button, .tg-pop .menu-card button { border-radius: 14px; transition: background-color .2s, transform .35s var(--spring); }
.msg-menu button:active, .tg-pop .menu-card button:active { background: var(--hover); transform: scale(.97); }
@keyframes pop-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.msg-menu, .tg-pop, .compose-menu { animation-duration: .4s; animation-timing-function: var(--spring); }

/* ---- buttons: glossy glass with a lit top edge, springy press ---- */
.primary, .perm-btn:not(.ghost), .icon-btn.send.round:not(.mic), .fab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 76%, #fff 24%), var(--primary) 60%);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, #fff 45%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.14), 0 8px 20px color-mix(in srgb, var(--primary) 36%, transparent);
  color: var(--on-primary); transition: transform .4s var(--spring), box-shadow .25s, filter .2s;
}
.icon-btn.send.round:not(.mic), .fab { color: #fff; }
.primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 68%, #fff 32%), var(--primary-d) 62%); filter: brightness(1.04); }
.primary:active:not(:disabled), .perm-btn:active, .fab:active, .icon-btn.send.round:not(.mic):active { transform: scale(.94); }
.perm-btn.ghost, .mus-dl, .icon-btn.back { background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: var(--glass-spec); }
.icon-btn { transition: background-color .2s, transform .4s var(--spring); }
.icon-btn:active:not(:disabled) { transform: scale(.86); }
.round-btn, .p-tile, .folder, .up-btn, .pl-btn, .pl-x, .fp-btn { transition: background-color .2s, transform .4s var(--spring); }
.folder:active, .p-tile:active, .round-btn:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .msg-menu, .tg-pop, .compose-menu, .primary, .icon-btn { animation: none !important; transition: none !important; } }

/* ---- bottom bar: a floating liquid-glass capsule; the lists scroll under it, and one lit pill glides between the tabs ---- */
.sidebar { position: relative; }
.tabbar {
  position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); margin: 0; padding: 6px; border-radius: 32px; isolation: isolate;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-spec), 0 14px 38px rgba(0,0,0,.34);
}
.sidebar .page-scroll, .sidebar .chat-list { padding-bottom: calc(104px + var(--safe-b)); }
.tabbar::before {
  content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; inset-inline-start: 6px; width: calc((100% - 18px) / 4); border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--link) 30%, transparent), color-mix(in srgb, var(--link) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--link) 38%, transparent);
  box-shadow: var(--glass-spec), 0 4px 16px color-mix(in srgb, var(--link) 26%, transparent);
  transform: translate3d(calc(var(--i, 0) * (100% + 2px)), 0, 0); transition: transform .6s var(--spring);
}
[dir="rtl"] .tabbar::before { transform: translate3d(calc(var(--i, 0) * (100% + 2px) * -1), 0, 0); }
.tabbar:has(.tab:nth-child(2).active) { --i: 1; } .tabbar:has(.tab:nth-child(3).active) { --i: 2; } .tabbar:has(.tab:nth-child(4).active) { --i: 3; }
.tab.active .tab-ic, .tab:hover .tab-ic { background: transparent; }
.tab { transition: color .25s, transform .4s var(--spring); }
.tab:active { transform: scale(.9); }
.tab .icon { transition: transform .45s var(--spring), stroke-width .2s; }
.tab.active .icon { transform: translateY(-1px) scale(1.08); }
.tab.active .icon { animation: tab-pop .55s var(--spring); }
@keyframes tab-pop { 0% { transform: scale(.78); } 100% { transform: translateY(-1px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .tabbar::before, .tab, .tab .icon { transition: none; animation: none; } }
.tabbar { overflow: hidden; }
.tabbar::before { transition: transform .55s cubic-bezier(.3, 1.18, .5, 1); }
@supports (transition-timing-function: linear(0, 1)) { .tabbar::before { transition-timing-function: linear(0, .3 8%, .72 20%, 1.03 34%, 1.02 48%, .998 66%, 1); } }

/* ---- calmer buttons: the app's own colour, a soft sheen on top, no outline and no coloured glow ---- */
.primary, .perm-btn:not(.ghost), .icon-btn.send.round:not(.mic), .fab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, #fff 10%), var(--primary));
  border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.22);
}
.fab { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.28); }
.primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 84%, #fff 16%), var(--primary-d)); filter: none; }
.perm-btn.ghost, .mus-dl, .icon-btn.back { background: color-mix(in srgb, var(--text) 8%, transparent); border: 0; box-shadow: none; }
.tabbar::before { border: 0; background: color-mix(in srgb, var(--link) 20%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.tabbar { box-shadow: var(--glass-spec), 0 8px 24px rgba(0,0,0,.28); }

/* ---- profile tab and the profile-style settings page ---- */
.tab-me { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; transition: transform .45s var(--spring), box-shadow .25s; }
.tab-me .avatar { box-shadow: none; }
.tab.active .tab-me { transform: scale(1.1); box-shadow: 0 0 0 2px var(--link); }
.page-scroll.flush { padding: 0 0 calc(110px + var(--safe-b)); }
.settings-hero { aspect-ratio: 1 / .7; max-height: 40vh; }
.settings-hero.plain { aspect-ratio: auto; height: 236px; }
.settings-hero .photo-close { top: calc(12px + var(--safe-t)); }
.settings-body .set-card { margin: 0; border-radius: 16px; }
.settings-body > * + * { margin-top: 0; }
.settings-body .hint.pad { margin: 4px 0 8px; }
.settings-body .p-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.settings-body .p-tile { min-height: 68px; font-size: 11.5px; }
.settings-body .p-tile span { white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }

.safety-emoji { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg2); padding: 10px; border-radius: 10px; margin-top: 4px; text-align: center; }
.safety-emoji span { font-size: 34px; line-height: 1.25; }

.emj { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em; object-fit: contain; }
.picker-grid button .emj, .picker-groups button .emj { width: 30px; height: 30px; vertical-align: middle; }
.picker-groups button .emj { width: 24px; height: 24px; }
.emoji-big .emj { width: .85em; height: .85em; vertical-align: middle; }
.react .emj { width: 1.1em; height: 1.1em; }

/* ---- "new version ready" capsule above the floating bottom bar ---- */
.sidebar { --tabbar-h: 68px; }
.upd-chip {
  position: absolute; z-index: 19; inset-inline: 12px; bottom: calc(10px + var(--safe-b) + var(--tabbar-h) + 8px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 26px; text-align: start; color: var(--text);
  background: color-mix(in srgb, var(--bg) 62%, transparent); isolation: isolate;
  -webkit-backdrop-filter: blur(24px) saturate(1.9); backdrop-filter: blur(24px) saturate(1.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-spec), 0 10px 30px rgba(0,0,0,.28);
  animation: upd-in .5s var(--spring, cubic-bezier(.2,1.2,.4,1)) both;
}
.upd-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, color-mix(in srgb, var(--link) 22%, transparent), color-mix(in srgb, var(--link) 6%, transparent)); }
.upd-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--link); box-shadow: 0 4px 12px color-mix(in srgb, var(--link) 45%, transparent); }
.upd-ic .icon { animation: conn-bob 1.6s ease-in-out infinite; }
.upd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.upd-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upd-text small { font-size: 12px; color: var(--muted); }
.upd-go { flex: none; padding: 8px 14px; border-radius: 18px; background: var(--link); color: #fff; font-size: 13.5px; font-weight: 600; transition: transform .15s; }
.upd-chip:active .upd-go { transform: scale(.94); }
html.kb .upd-chip { display: none; }
@keyframes upd-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (pointer: coarse), (max-width: 760px) { .upd-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); } }

/* ---- drop-down (DropSelect) ---- */
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--text); font-size: 16px; text-align: start; border: 1px solid var(--line); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.dd-btn:hover { border-color: color-mix(in srgb, var(--link) 45%, var(--line)); }
.dd-btn:focus-visible, .dd.open .dd-btn { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.dd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chev { flex: none; color: var(--muted); transition: transform .25s var(--spring, ease); }
.dd.open .dd-chev { transform: rotate(180deg); color: var(--link); }
.dd-list { position: absolute; z-index: 45; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-edge, var(--line)); border-radius: 16px; box-shadow: 0 14px 38px rgba(0,0,0,.3); transform-origin: top center; animation: dd-in .18s ease-out; }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 15.5px; min-height: 44px; }
.dd-list li.hi { background: var(--hover); }
.dd-list li.sel { color: var(--link); font-weight: 600; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (pointer: coarse), (max-width: 760px) { .dd-list { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); } }
.set-card:has(.dd), .form-card:has(.dd) { overflow: visible; }

/* ---- "typing…" / "choosing a sticker…" status ---- */
.typing { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 500; min-width: 0; max-width: 100%; animation: conn-in .25s ease-out; }
.typing-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing-dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 12px; flex: none; }
.typing-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; animation: typing-wave 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-row.active .typing { color: #fff; }

/* ---- animated emoji (single emoji messages): still artwork underneath, a canvas drawn over it while/after it plays ---- */
.emj-lottie { position: relative; display: inline-block; width: .85em; height: .85em; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; border-radius: 12%; }
.emj-lottie:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.emj-lottie .emj-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.emj-lottie.emj-ready { background-image: none !important; }

.draft-tag { color: var(--danger); font-weight: 500; }
.chat-row.active .draft-tag { color: #fff; }

/* ---- pinned message bar under the chat header ---- */
.pin-bar { display: flex; align-items: center; gap: 4px; margin: 6px 10px 0; padding: 4px 6px 4px 4px; border-radius: 14px; background: color-mix(in srgb, var(--bg2) 88%, transparent); border: 1px solid var(--line); animation: conn-in .25s ease-out; }
.pin-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-align: start; border-radius: 10px; }
.pin-main:hover { background: var(--hover); }
.pin-segs { display: flex; flex-direction: column; gap: 2px; height: 32px; justify-content: center; flex: none; }
.pin-segs i { width: 3px; flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--link) 30%, transparent); }
.pin-segs i.on { background: var(--link); }
.pin-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pin-text b { font-size: 13px; color: var(--link); font-weight: 600; }
.pin-text span { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pin-x { flex: none; color: var(--muted); }

/* ---- emoji picker: search box, empty state, long-press options ---- */
.emoji-search { display: flex; align-items: center; gap: 8px; margin: 6px 8px 0; padding: 0 10px; height: 36px; border-radius: 12px; background: var(--bg2); color: var(--muted); }
.emoji-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-size: 15px; }
.picker-empty { grid-column: 1 / -1; padding: 22px 8px; text-align: center; color: var(--muted); font-size: 14px; }
.emoji-pop { position: fixed; z-index: 60; transform: translate(-50%, calc(-100% - 8px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--glass-edge, var(--line)); box-shadow: 0 14px 38px rgba(0,0,0,.34); animation: dd-in .16s ease-out; max-width: calc(100vw - 16px); }
.emoji-pop-anim .emj-lottie { width: 96px; height: 96px; }
.emoji-pop-tones { display: flex; gap: 2px; }
.emoji-pop-tones button { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.emoji-pop-tones button:hover { background: var(--hover); }
.emoji-pop-tones .emj { width: 30px; height: 30px; }
.emoji-pop-use { padding: 8px 16px; border-radius: 14px; background: var(--link); color: #fff; font-weight: 600; font-size: 14px; }
.picker-grid [data-e] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* the header floats over the messages, so the pin bar floats right under it and the list gets extra top padding */
.chat-view > .pin-bar { position: absolute; z-index: 11; margin: 0; top: calc(76px + var(--safe-t)); inset-inline: 10px; background: color-mix(in srgb, var(--bg2) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.chat-view.has-pin .messages { padding-top: calc(76px + 56px + var(--safe-t)); }
@media (pointer: coarse), (max-width: 760px) { .chat-view > .pin-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg2); } }

/* ---- iOS-style message menu: hold a message and the rest of the screen blurs away; the message stays sharp and lifts a little, with a small
   reaction pill and a compact action card right under it ---- */
.chat-view.has-menu > .menu-back.dim { background: rgba(10, 12, 18, .30); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); animation: fade-in .22s ease-out; }
.chat-view.has-menu .row-menu { z-index: 45; }

.tg-pop .react-pill { border-radius: 999px; padding: 4px 6px; }
.tg-pop .react-line { flex-wrap: nowrap; max-width: none; gap: 0; }
.tg-pop .react-line.more { flex-wrap: wrap; width: 262px; justify-content: center; border-radius: 22px; }
.tg-pop .react-line button.react-pick { width: 34px; height: 34px; font-size: 0; }
.tg-pop .react-line button.react-pick .emj { width: 24px; height: 24px; }
.tg-pop .react-line button.react-more { width: 28px; height: 28px; margin-inline-start: 2px; }
.tg-pop .react-line button.react-more .icon { width: 16px; height: 16px; }
.tg-pop .menu-card { width: 214px; border-radius: 14px; padding: 4px; }
.tg-pop .menu-card button { gap: 11px; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; }
.tg-pop .menu-card .icon { width: 18px; height: 18px; }
.menu-sep { margin: 3px 6px; }
@media (max-width: 760px) { .tg-pop .menu-card button { padding: 9px 10px; } .tg-pop .react-line { max-width: calc(100vw - 24px); } }
.chat-view > .row-menu.tg-pop { transform-origin: var(--ox, top left); animation: ios-pop .3s var(--spring, cubic-bezier(.2,1.2,.4,1)); }
@keyframes ios-pop { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .row.selected .bubble, .row.selected .emoji-only, .row.selected .sticker-wrap, .row.selected .media-bubble { transform: none; transition: none; } }
.chat-view > .row-menu.tg-pop, .messages .row-menu.tg-pop, [dir="rtl"] .chat-view > .row-menu.tg-pop { left: max(10px, min(var(--mx), calc(100vw - 296px))); }

.row-menu.tg-pop { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.row-menu.tg-pop.side-end { align-items: flex-end; }

/* ---- anchored layout (phones): reaction pill above the message, action card below it, like iOS ---- */
.row.lp-hold .bubble, .row.lp-hold .emoji-only, .row.lp-hold .sticker-wrap, .row.lp-hold .media-bubble { transform: scale(.965); transition: transform .45s ease-out; }
.chat-view > .row-menu.tg-pop.anch { position: fixed; inset: 0; left: 0; top: 0; right: 0; bottom: 0; width: auto; max-width: none; display: block; animation: ios-fade .18s ease-out; }
@keyframes ios-fade { from { opacity: 0; } to { opacity: 1; } }
.row-menu.anch > .react-pill, .row-menu.anch > .menu-card { position: absolute; margin: 0; }
.row-menu.anch > .react-pill { top: calc(var(--mt) - 54px); transform-origin: bottom center; animation: ios-pop .3s var(--spring, cubic-bezier(.2,1.2,.4,1)); }
.row-menu.anch > .menu-card { top: calc(var(--mb) + 10px); transform-origin: top center; animation: ios-pop .3s var(--spring, cubic-bezier(.2,1.2,.4,1)); max-height: calc(100dvh - var(--mb) - 22px); overflow-y: auto; }
.row-menu.anch.side-end > .react-pill, .row-menu.anch.side-end > .menu-card { right: max(10px, calc(100vw - var(--mr))); left: auto; }
.row-menu.anch:not(.side-end) > .react-pill, .row-menu.anch:not(.side-end) > .menu-card { left: clamp(10px, var(--ml), calc(100vw - 296px)); right: auto; }
/* the two little bubbles that tie the pill to its message */
.row-menu.anch > .react-pill::before, .row-menu.anch > .react-pill::after { content: ""; position: absolute; border-radius: 50%; background: inherit; box-shadow: inherit; }
.row-menu.anch > .react-pill::after { width: 9px; height: 9px; bottom: -8px; inset-inline-end: 22px; }
.row-menu.anch > .react-pill::before { width: 5px; height: 5px; bottom: -15px; inset-inline-end: 14px; }
.row-menu.anch:not(.side-end) > .react-pill::after { inset-inline-end: auto; inset-inline-start: 22px; }
.row-menu.anch:not(.side-end) > .react-pill::before { inset-inline-end: auto; inset-inline-start: 14px; }
.tg-pop .menu-card { border-radius: 20px; }

/* ---- touch devices (iOS especially): nothing in the app is selectable except the text boxes, and rapid taps never zoom ---- */
@media (pointer: coarse) {
  html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  input, textarea, [contenteditable="true"], .selectable, .err-detail { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  * { touch-action: manipulation; }
  img, svg, canvas { -webkit-user-drag: none; -webkit-touch-callout: none; }
}
.lift-clone { will-change: transform; }

.chat-view > .lift-host.messages { position: fixed; inset: 0; z-index: 44; display: block; padding: 0; margin: 0; overflow: visible; background: none; pointer-events: none; flex: none; gap: 0; }

/* ---- opening a chat: the list is positioned while hidden, the placeholder covers it, then it fades in already in place ---- */
.chat-view.positioning .messages > :not(.msg-skel) { visibility: hidden; }
.chat-view:not(.positioning) .messages { animation: msgs-reveal .22s ease-out; }
@keyframes msgs-reveal { from { opacity: 0; } to { opacity: 1; } }
.messages-wrap > .msg-skel.hold { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 8px max(12px, calc(50% - 360px)) 14px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .chat-view:not(.positioning) .messages { animation: none; } }

/* ---- chat loading placeholder: clearly visible message-shaped bubbles with two text lines, mine tinted, theirs neutral ---- */
.msg-skel { gap: 8px; }
.msg-skel .skel-row { display: flex; padding: 0 2px; }
.msg-skel .skel-row.mine { justify-content: flex-end; }
.msg-skel .skel-bubble {
  position: relative; display: block; height: 48px; min-width: 120px; border-radius: 20px; overflow: hidden; box-shadow: none; animation: skel-pulse 1.5s ease-in-out infinite; will-change: opacity;
  background-image: none; background-color: color-mix(in srgb, var(--text) 13%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.msg-skel .skel-row.theirs .skel-bubble { border-bottom-left-radius: 6px; }
.msg-skel .skel-row.mine .skel-bubble { border-bottom-right-radius: 6px; background-color: color-mix(in srgb, var(--link) 46%, var(--bg2)); border-color: color-mix(in srgb, var(--link) 40%, transparent); }
.msg-skel .skel-row:nth-child(even) .skel-bubble { height: 48px; }
.msg-skel .skel-bubble::before, .msg-skel .skel-bubble::after { content: ""; position: absolute; left: 14px; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 24%, transparent); }
.msg-skel .skel-bubble::before { top: 13px; width: calc(100% - 28px); max-width: 220px; }
.msg-skel .skel-bubble::after { top: 28px; width: 46%; }
.msg-skel .skel-row.mine .skel-bubble::before, .msg-skel .skel-row.mine .skel-bubble::after { background: color-mix(in srgb, #fff 34%, transparent); }
@keyframes skel-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.messages-wrap > .msg-skel.hold { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .msg-skel .skel-bubble { animation: none; opacity: .85; } }

/* ---- full-screen install page (app colours, follows the theme) ---- */
.inst { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow-y: auto; color: var(--text); background: var(--bg); padding: calc(14px + var(--safe-t)) 20px calc(14px + var(--safe-b)); animation: app-in .32s var(--ease-out); }
.inst-skip { align-self: flex-end; padding: 8px 6px; color: var(--link); font-size: 15px; font-weight: 500; }
.inst-body { width: 100%; max-width: 420px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 4px 0 14px; }
.inst-hero { text-align: center; }
.inst-logo { width: 96px; height: 96px; border-radius: 22%; box-shadow: var(--shadow); }
.inst-hero h1 { margin: 16px 0 6px; font-size: 24px; line-height: 1.3; }
.inst-hero p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.inst-perks { list-style: none; margin: 0; padding: 4px 0; display: grid; border-radius: var(--radius); background: var(--bg2); }
.inst-perks li, .inst-done { display: flex; gap: 14px; align-items: center; padding: 11px 14px; }
.inst-perks b, .inst-done b { display: block; font-weight: 600; font-size: 15px; }
.inst-perks small, .inst-done small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.inst-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.inst-ic.ok { color: #fff; background: var(--tick-read); }
.inst-done { border-radius: var(--radius); background: color-mix(in srgb, var(--tick-read) 14%, transparent); }
.inst-steps { list-style: none; margin: 0; padding: 4px 0; display: grid; border-radius: var(--radius); background: var(--bg2); }
.inst-steps li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.inst-steps .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--primary); color: var(--on-primary); }
.inst-btn { width: 100%; display: inline-flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; border-radius: 10px; font-size: 15px; }
.inst-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--on-primary) 40%, transparent); border-top-color: var(--on-primary); animation: boot-spin .8s linear infinite; }
.inst-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--warn); }
.inst-later { align-self: center; padding: 10px 18px; color: var(--link); font-size: 15px; font-weight: 500; }
@media (max-height: 640px) { .inst-hero p { display: none; } .inst-logo { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { .inst, .inst-spin { animation: none !important; } }

/* ---- page headers: the same floating glass pills as the chat header (back · title · actions); the page scrolls underneath ---- */
.page { position: relative; }
.page > .page-head:not(.big) {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12; min-height: 0; gap: 8px; padding: calc(8px + var(--safe-t)) 10px 4px; pointer-events: none;
}
.page > .page-head:not(.big) > * { pointer-events: auto; }
.page > .page-head:not(.big) :is(.back-btn, .title-block, .page-actions:not(:empty)) {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 0 0 .5px color-mix(in srgb, var(--text) 10%, transparent);
}
.page > .page-head:not(.big) .back-btn { flex: none; width: 46px; height: 46px; margin: 0; border-radius: 50%; color: var(--text); display: grid; place-items: center; }
.page > .page-head:not(.big) .title-block { min-height: 46px; padding: 4px 18px; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; }
.page > .page-head:not(.big) .page-title { font-size: 17px; font-weight: 600; }
.page > .page-head:not(.big) .page-actions:not(:empty) { flex: none; height: 46px; padding: 0 6px; border-radius: 28px; margin: 0; }
.page > .page-head:not(.big) .page-actions .link { padding: 8px 12px; }
.page > .page-head:not(.big) ~ .page-scroll { padding-top: calc(62px + var(--safe-t)); }
.page > .page-head:not(.big) ~ .page-scroll > .letter:first-child, .page > .page-head:not(.big) ~ .page-scroll > h3.letter:first-child { margin-top: 4px; }
/* "Appearance" no longer breaks in the middle of the word on narrow phones */
.settings-body .p-tile { padding-inline: 3px; font-size: clamp(10px, 3vw, 11.5px); }
.settings-body .p-tile span { overflow-wrap: break-word; hyphens: none; }
button.link.pad { display: inline-flex; align-items: center; gap: 6px; }
/* the update capsule: the title wraps instead of being cut ("A new version is r…"); the button already says what a tap does */
.upd-text b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.upd-text small { display: none; }
/* sub-page header: the title is centred inside its pill */
.page > .page-head:not(.big) .title-block { align-items: center; text-align: center; }
.page > .page-head:not(.big) .page-title, .page > .page-head:not(.big) .page-sub { width: 100%; text-align: center; }
/* phones: same solid pills as the chat header (frosted ones smear whatever scrolls underneath) */
@media (pointer: coarse), (max-width: 760px) {
  .page > .page-head:not(.big) :is(.back-btn, .title-block, .page-actions:not(:empty)) { background: var(--bg2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}


/* ---- headers: the same liquid glass as the menus (frosted, bright rim), on every header pill, phones included ---- */
.chat-view > .chat-head .icon-btn.back, .chat-view > .chat-head .head-hit, .chat-view > .chat-head .head-actions::before,
.page > .page-head:not(.big) :is(.back-btn, .title-block, .page-actions:not(:empty)) {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-spec), 0 8px 24px rgba(0,0,0,.22);
}
.chat-view > .chat-head .head-actions { background: transparent; box-shadow: none; }
.chat-view > .chat-head .head-actions::before { border-radius: 28px; }
.chat-view > .chat-head .head-hit:hover { background: color-mix(in srgb, var(--bg) 58%, transparent); }

/* in a chat the status-bar strip is painted with the same wallpaper as the chat (same layers, sized like the screen), so it blends in instead of being a flat band */
html.in-chat #edge-top {
  background-image: var(--doodle, none), radial-gradient(circle at 15% 10%, var(--chat-bg2), transparent 60%), radial-gradient(circle at 90% 90%, var(--chat-bg2), transparent 55%);
  background-size: 240px 240px, 100vw 100vh, 100vw 100vh; background-position: 0 0; background-repeat: repeat, no-repeat, no-repeat;
}