/* =====================================================================
PELATRA — chat.css (friends + encrypted messages)
Telegram-style dark theme (blue accent, calm slate surfaces); reuses the .ac-act / .ac-input / .ac-field pieces of the account panel.
===================================================================== */
/* ---------- floating button (left of the account button, positioned by chat.js) ---------- */
.ch-btn{
position:fixed;
top:calc(14px + env(safe-area-inset-top,0px));
right:calc(14px + env(safe-area-inset-right,0px) + 150px);
z-index:60;
width:42px; height:42px; padding:0; box-sizing:border-box;
display:inline-flex; align-items:center; justify-content:center;
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.24);
border-radius:50%;
-webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
box-shadow:0 4px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
cursor:pointer; pointer-events:auto;
-webkit-appearance:none; appearance:none;
-webkit-tap-highlight-color:transparent; touch-action:manipulation;
opacity:0; transform:translateY(-10px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease;
}
.ch-btn.is-ready{ opacity:1; transform:none; }
.ch-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.ch-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ch-badge{
position:absolute; top:-4px; right:-4px; display:none;
min-width:18px; height:18px; padding:0 5px; box-sizing:content-box;
border-radius:11px; background:#f4212e; color:#fff;
font:700 11px/18px 'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; text-align:center;
border:2px solid #000;
}
.ch-badge.is-num{ display:block; }
.ch-badge.is-dot{ display:block; min-width:0; width:8px; height:8px; padding:0; background:var(--x-btn,#8f2f46); }
html.ch-lock{ overflow:hidden; }
/* ---------- modal ---------- */
.ch-modal{
--x-bg:#141416; --x-surf:#1a1a1d; --x-line:#2a2a2f; --x-fg:#ececee; --x-mute:#8e8e96; --x-hover:rgba(255,255,255,.05);
--x-btn:#8f2f46; --x-btn-h:var(--x-btn); --x-rgb:143,47,70; --x-btn-fg:#fff; --x-red:#f4212e; --x-blue:#cf7188; --x-acc:#cf7188; --x-out:#6e2437; --x-in:#18181b; --x-field:#121215; --ch-fs:15px;
position:fixed; inset:0; z-index:112;
display:flex; align-items:center; justify-content:center;
padding:12px; box-sizing:border-box;
font-family:'TwitterChirp',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
-webkit-user-select:none; user-select:none;
visibility:hidden; pointer-events:none;
transition:visibility 0s linear .3s;
}
.ch-modal.is-show{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.ch-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.9); opacity:0; transition:opacity .25s ease; }
.ch-modal.is-show .ch-backdrop{ opacity:1; }
.ch-panel{
position:relative; box-sizing:border-box; display:flex; flex-direction:column;
width:min(96vw,940px); height:min(90vh,700px);
overflow:hidden; outline:none; color:var(--x-fg);
background:var(--x-bg); border:1px solid var(--x-line); border-radius:16px;
box-shadow:0 12px 56px rgba(0,0,0,.7);
opacity:0; transform:translateY(10px) scale(.985);
transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.ch-modal.is-show .ch-panel{ opacity:1; transform:none; }
.ch-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; min-height:53px; padding:0 12px 0 18px; box-sizing:border-box; border-bottom:1px solid var(--x-line); }
.ch-title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; color:var(--x-fg); }
.ch-title{ font-size:20px; font-weight:800; letter-spacing:0; }
.ch-x{ flex:none; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.ch-x:hover{ background:rgba(231,233,234,.1); }
.ch-x:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ch-layout{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr); }
.ch-side{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--x-line); }
.ch-main{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
/* ---------- sidebar ---------- */
.ch-tabs{ display:flex; flex:none; border-bottom:1px solid var(--x-line); }
.ch-tab{
position:relative; flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:6px;
height:46px; padding:0 6px; font:inherit; font-size:14px; font-weight:500; color:var(--x-mute);
background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease, color .15s ease;
}
.ch-tab:hover{ background:var(--x-hover); }
.ch-tab[aria-selected="true"]{ color:var(--x-fg); font-weight:700; }
.ch-tab[aria-selected="true"]::after{ content:""; position:absolute; left:50%; bottom:0; width:40px; height:4px; margin-left:-20px; border-radius:9999px; background:var(--x-btn); }
.ch-tab:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }
.ch-count{ font-style:normal; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:var(--x-btn); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.ch-side-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#2a2a2f transparent; }
.ch-side-foot{ flex:none; display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--x-line); font-size:12px; color:var(--x-mute); }
.ch-keystate{ display:flex; align-items:center; gap:6px; margin-right:auto; }
.ch-link{ padding:2px 0; font:inherit; font-size:13px; font-weight:600; color:var(--x-blue); background:transparent; border:0; cursor:pointer; }
.ch-link:hover{ text-decoration:underline; }
.ch-link.block{ display:block; margin:0 auto; text-align:center; }
.ch-link.danger{ color:var(--x-red); }
.ch-keybar{
display:flex; align-items:center; gap:8px; width:calc(100% - 20px); margin:10px; padding:11px 12px; box-sizing:border-box;
font:inherit; font-size:14px; font-weight:600; color:var(--x-fg); text-align:left;
background:rgba(var(--x-rgb),.12); border:1px solid rgba(var(--x-rgb),.5); border-radius:10px; cursor:pointer;
}
.ch-keybar:hover{ background:rgba(var(--x-rgb),.2); }
.ch-list{ display:flex; flex-direction:column; }
.ch-item{
display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; box-sizing:border-box;
font:inherit; color:var(--x-fg); text-align:left; background:transparent; border:0; border-bottom:0;
cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease;
}
.ch-item:hover{ background:var(--x-hover); }
.ch-item.is-on{ background:rgba(231,233,234,.08); }
.ch-item.static{ cursor:default; flex-wrap:wrap; }
.ch-item.static:hover{ background:transparent; }
.ch-item:focus-visible{ outline:2px solid var(--x-fg); outline-offset:-2px; }
.ch-ava{ width:42px; height:42px; font-size:17px; }
.ch-item-mid{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 0; }
.ch-name{ display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:700; color:var(--x-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-vbadge{ flex:none; color:var(--x-blue); }
.ch-sub{ font-size:13px; color:var(--x-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-item-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.ch-ago{ font-size:12px; color:var(--x-mute); }
.ch-unread{ min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:10px; background:var(--x-btn); color:#fff; font-size:12px; font-weight:700; line-height:20px; text-align:center; }
.ch-item-acts{ display:flex; flex-wrap:wrap; gap:8px; width:100%; padding-left:54px; }
.ch-sec{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 6px; font-size:13px; font-weight:700; color:var(--x-mute); }
.ch-sec em{ font-style:normal; font-weight:500; }
.ch-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:36px 22px; text-align:center; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-empty p{ margin:0; }
.ch-add{ padding:14px; display:grid; gap:12px; }
.ch-myid{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--x-line); border-radius:10px; }
.ch-myid-l{ font-size:13px; color:var(--x-mute); }
.ch-myid-v{ font:600 15px ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:.06em; color:var(--x-fg); background:transparent; border:0; cursor:copy; padding:2px 4px; -webkit-user-select:text; user-select:text; }
.ch-add .ac-act{ margin-top:0; }
.ch-add .ac-note{ margin:0; }
/* ---------- key cards (setup / unlock / change / reset) ---------- */
.ch-card{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 28px 28px; box-sizing:border-box; max-width:460px; width:100%; margin:0 auto; scrollbar-width:thin; scrollbar-color:#2a2a2f transparent; }
.ch-card-top{ min-height:0; }
.ch-card-ic{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:14px auto 12px; color:var(--x-acc); border:1px solid rgba(var(--x-rgb),.4); border-radius:50%; background:rgba(var(--x-rgb),.1); }
.ch-card-t{ margin:0 0 8px; text-align:center; font-size:22px; font-weight:800; color:var(--x-fg); }
.ch-card-p{ margin:0 0 6px; text-align:center; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-card .ac-form{ margin-top:18px; }
.ch-card .ac-act{ margin-top:0; }
.ch-meter{ display:flex; align-items:center; gap:10px; margin-top:-6px; font-size:12px; color:var(--x-mute); }
.ch-meter i{ flex:none; width:60px; height:4px; border-radius:2px; background:#2a2a2f; position:relative; overflow:hidden; }
.ch-meter i::after{ content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--x-red); transition:width .2s ease, background .2s ease; }
.ch-meter[data-s="0"] i::after{ width:33%; background:var(--x-red); }
.ch-meter[data-s="1"] i::after{ width:66%; background:#ffc61a; }
.ch-meter[data-s="2"] i::after{ width:100%; background:var(--x-blue); }
.ch-remember{ display:grid; gap:4px; }
.ch-check{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--x-fg); cursor:pointer; }
.ch-check input{ width:18px; height:18px; accent-color:var(--x-btn); }
.ch-placeholder{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; text-align:center; color:var(--x-mute); }
.ch-placeholder h2{ margin:10px 0 0; font-size:22px; font-weight:800; color:var(--x-fg); }
.ch-placeholder p{ margin:0; max-width:320px; font-size:14px; line-height:1.5; }
/* ---------- conversation ---------- */
.ch-conv{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; position:relative; }
.ch-conv-top{ display:flex; align-items:center; gap:12px; flex:none; padding:8px 12px; border-bottom:1px solid var(--x-line); }
.ch-conv-who{ display:flex; flex-direction:column; min-width:0; flex:1 1 0; }
.ch-conv-tools{ display:flex; gap:2px; flex:none; }
.ch-ibtn{ width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-ibtn:hover{ background:rgba(231,233,234,.1); }
.ch-ibtn.is-verified{ color:var(--x-acc); }
.ch-ibtn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:1px; }
.ch-back{ display:none; flex:none; width:36px; height:36px; padding:0; align-items:center; justify-content:center; color:var(--x-fg); background:transparent; border:0; border-radius:50%; cursor:pointer; }
.ch-back:hover{ background:rgba(231,233,234,.1); }
.ch-menu{ position:absolute; top:52px; right:10px; z-index:8; display:flex; flex-direction:column; min-width:200px; padding:6px 0; background:var(--x-surf); border:1px solid var(--x-line); border-radius:12px; box-shadow:0 0 18px rgba(255,255,255,.12); }
.ch-menu-i{ padding:11px 16px; font:inherit; font-size:15px; font-weight:600; text-align:left; color:var(--x-fg); background:transparent; border:0; cursor:pointer; }
.ch-menu-i:hover{ background:var(--x-hover); }
.ch-menu-i.danger{ color:var(--x-red); }
.ch-conv-body{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.ch-msgs{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px 16px; display:flex; flex-direction:column; gap:4px; scrollbar-width:thin; scrollbar-color:#2a2a2f transparent; }
.ch-day{ align-self:center; margin:12px 0 6px; padding:3px 12px; font-size:12px; font-weight:600; color:var(--x-mute); background:rgba(231,233,234,.06); border-radius:999px; }
.ch-empty-chat{ margin:auto; padding:20px; max-width:300px; text-align:center; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-row{ display:flex; max-width:100%; }
.ch-row.me{ justify-content:flex-end; }
.ch-bubble{ max-width:min(78%,520px); padding:8px 12px 6px; box-sizing:border-box; color:var(--x-fg); background:var(--x-in); border:0; border-radius:18px 18px 18px 4px; }
.ch-row.me .ch-bubble{ color:#fff; background:var(--x-btn); border:0; border-radius:18px 18px 4px 18px; }
.ch-bubble.is-bad{ font-style:italic; color:var(--x-mute); background:transparent; border-style:dashed; }
.ch-text{ font-size:15px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-user-select:text; user-select:text; }
.ch-meta{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:2px; font-size:11px; color:var(--x-mute); }
.ch-row.me .ch-meta{ color:rgba(255,255,255,.72); }
.ch-tick{ display:inline-flex; align-items:center; color:rgba(255,255,255,.6); }
.ch-tick svg + svg{ margin-left:-8px; }
.ch-tick svg:last-child{ display:none; }
.ch-row.is-seen .ch-tick{ color:#fff; }
.ch-row.is-seen .ch-tick svg:last-child{ display:inline; }
.ch-pill{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%) translateY(10px); padding:7px 14px; font:inherit; font-size:13px; font-weight:700; color:var(--x-btn-fg); background:var(--x-btn); border:0; border-radius:999px; box-shadow:0 4px 18px rgba(0,0,0,.5); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.ch-pill.show{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
.ch-comp{ display:flex; align-items:flex-end; gap:8px; flex:none; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--x-line); }
.ch-ta{ flex:1 1 auto; min-width:0; max-height:140px; padding:11px 14px; box-sizing:border-box; resize:none; font:inherit; font-size:16px; line-height:1.35; color:var(--x-fg); background:var(--x-field); border:1px solid var(--x-line); border-radius:20px; outline:none; -webkit-user-select:text; user-select:text; }
.ch-ta:focus{ border-color:var(--x-btn); box-shadow:0 0 0 1px var(--x-btn); }
.ch-ta:disabled{ opacity:.5; }
.ch-ta::placeholder{ color:#536471; }
.ch-send{ flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-btn-fg); background:var(--x-btn); border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .15s ease, background .15s ease; }
.ch-send:hover{ background:var(--x-btn-h); }
.ch-send:disabled{ opacity:.4; cursor:default; }
.ch-send:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ch-warn{ margin:20px; padding:16px; display:grid; gap:8px; justify-items:start; color:var(--x-fg); background:rgba(255,198,26,.08); border:1px solid rgba(255,198,26,.5); border-radius:12px; }
.ch-warn svg{ color:#ffc61a; }
.ch-warn p{ margin:0; font-size:14px; line-height:1.5; color:var(--x-mute); }
/* ---------- toast + in-panel dialog ---------- */
.ch-toast{ position:absolute; left:50%; bottom:20px; z-index:30; max-width:calc(100% - 32px); padding:10px 16px; box-sizing:border-box; font-size:14px; font-weight:600; color:#fff; background:#b3141f; border-radius:999px; box-shadow:0 4px 20px rgba(0,0,0,.6); transform:translateX(-50%) translateY(14px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .25s ease; }
.ch-toast.show{ opacity:1; transform:translateX(-50%); }
.ch-toast.bad{ color:#fff; background:#b3141f; }
.ch-dlg{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.9); }
.ch-dlg[hidden]{ display:none; }
.ch-dlg-card{ width:min(100%,380px); padding:22px; box-sizing:border-box; background:var(--x-surf); border:1px solid var(--x-line); border-radius:16px; box-shadow:0 0 30px rgba(255,255,255,.08); }
.ch-dlg-t{ font-size:19px; font-weight:800; color:var(--x-fg); }
.ch-dlg-p{ margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-dlg-row{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:18px; }
.ch-dlg-row .ac-act{ width:auto; margin-top:0; }
.ch-warn .ch-dlg-row{ justify-content:flex-start; margin-top:6px; }
.ch-safety{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 8px; margin:16px 0 4px; padding:14px 10px; text-align:center; border:1px dashed #536471; border-radius:12px; font:600 19px ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:.08em; color:var(--x-fg); -webkit-user-select:text; user-select:text; }
/* ---------- phones: one pane at a time, full screen ---------- */
@media (max-width:720px){
.ch-modal{ padding:0; }
.ch-panel{ width:100vw; height:100vh; height:100dvh; max-width:none; border:0; border-radius:0; }
.ch-layout{ grid-template-columns:minmax(0,1fr); }
.ch-side{ border-right:0; }
.ch-layout[data-view="list"] .ch-main{ display:none; }
.ch-layout[data-view="chat"] .ch-side{ display:none; }
.ch-back{ display:flex; }
.ch-card{ padding:8px 18px 24px; }
.ch-card-top{ min-height:36px; margin:0 -6px; }
.ch-bubble{ max-width:86%; }
.ch-menu{ right:8px; }
.ch-toast{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:420px){
.ch-btn{ width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce){
.ch-btn,.ch-panel,.ch-backdrop,.ch-toast,.ch-pill{ transition:opacity .15s ease; transform:none; }
}
/* ---------- Telegram look: surfaces, bubbles, composer ---------- */
.ch-head,.ch-side,.ch-conv-top,.ch-comp,.ch-menu,.ch-dlg-card{ background:var(--x-surf); }
.ch-ava{ width:50px; height:50px; font-size:20px; border:0; background:linear-gradient(160deg,var(--x-btn),var(--x-out)); }
.ch-conv-top .ch-ava{ width:40px; height:40px; font-size:16px; }
.ch-item{ border-bottom:0; padding:9px 14px; }
.ch-item:hover{ background:rgba(255,255,255,.05); }
.ch-item.is-on{ background:var(--x-out); }
.ch-item.is-on .ch-sub,.ch-item.is-on .ch-ago{ color:var(--x-mute); }
.ch-item.is-on .ch-unread{ background:var(--x-btn); color:#fff; }
.ch-tab[aria-selected="true"]{ color:var(--x-acc); }
.ch-tab[aria-selected="true"]::after{ background:var(--x-blue); height:3px; }
.ch-msgs{ padding:14px 18px; gap:3px; }
.ch-day{ color:#9fb0c1; background:rgba(11,17,23,.95); }
.ch-bubble{ padding:7px 11px 5px; color:var(--x-fg); background:var(--x-in); border:0; border-radius:14px 14px 14px 4px; box-shadow:0 1px 1px rgba(0,0,0,.18); }
.ch-row.me .ch-bubble{ color:#fff; background:var(--x-out); border-radius:14px 14px 4px 14px; }
.ch-bubble.is-bad{ color:var(--x-mute); background:transparent; border:1px dashed #202d3b; box-shadow:none; }
.ch-text{ font-size:15px; line-height:1.38; }
.ch-meta{ color:#7f91a4; }
.ch-row.me .ch-meta{ color:rgba(255,255,255,.72); }
.ch-tick{ color:rgba(255,255,255,.7); }
.ch-row.is-seen .ch-tick{ color:#fff; }
.ch-comp{ align-items:center; }
.ch-ta{ background:var(--x-field); border:1px solid var(--x-line); border-radius:22px; }
.ch-ta:focus{ border-color:var(--x-blue); box-shadow:none; }
.ch-ta::placeholder{ color:#5d7186; }
.ch-send{ color:#fff; background:var(--x-blue); }
.ch-send:hover{ background:var(--x-btn-h); }
.ch-pill{ box-shadow:0 4px 16px rgba(0,0,0,.45); }
.ch-menu{ box-shadow:0 8px 28px rgba(0,0,0,.5); }
.ch-dlg{ background:rgba(0,0,0,.9); }
.ch-dlg-card{ box-shadow:0 12px 40px rgba(0,0,0,.55); }
.ch-modal .ac-act.primary{ color:#fff; background:var(--x-btn); border-color:var(--x-btn); }
.ch-modal .ac-act.primary:hover{ background:var(--x-btn-h); border-color:var(--x-btn-h); }
.ch-modal .ac-act:not(.primary):not(.danger){ border-color:#202d3b; }
.ch-modal .ac-act:not(.primary):hover{ background:rgba(255,255,255,.06); }
.ch-modal .ac-input{ border-color:#202d3b; border-radius:10px; }
.ch-link{ color:var(--x-acc); }
.ch-link.danger{ color:var(--x-red); }
.ch-safety{ border-color:#202d3b; }
/* ---------- shield button (header) + the "how it is protected" dialog ---------- */
.ch-shield svg{ display:block; }
.ch-shield{ flex:none; width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.ch-shield:hover{ background:rgba(var(--x-rgb),.16); }
.ch-shield:focus-visible{ outline:2px solid var(--x-acc); outline-offset:2px; }
.ch-link.ch-crypto-link{ display:flex; align-items:center; justify-content:center; gap:7px; margin:16px auto 0; line-height:20px; }
.ch-crypto-link svg{ display:block; flex:none; }
.ch-crypto-link span{ display:block; }
.ch-dlg-wide{ width:min(100%,480px); max-height:100%; display:flex; flex-direction:column; }
.ch-cr-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:6px -8px 0 0; padding-right:8px; scrollbar-width:thin; scrollbar-color:#202d3b transparent; }
.ch-cr-sec{ margin:16px 0 4px; font-size:13px; font-weight:700; color:var(--x-acc); }
.ch-dlg-wide .ch-dlg-row{ flex:none; }
/* ---------- online / last seen ---------- */
.ch-presence{ font-size:13px; color:var(--x-mute); }
.ch-presence.is-online{ color:var(--x-acc); }
/* ---------- messenger as its own page (/messenger) ---------- */
html.ch-lock, html.ch-lock body{ height:100%; overflow:hidden; overscroll-behavior:none; background:#0e0e10; }
body.ch-page-body{ margin:0; background:#0e0e10; position:fixed; inset:0; width:100%; }
body.ch-page-body #acctBtn{ display:none; }
#messengerRoot{ position:fixed; inset:0; background:#0e0e10; }
.ch-modal.ch-page{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:1; padding:0; visibility:visible; pointer-events:auto; transition:none; }
.ch-page .ch-panel{ width:100%; height:100%; max-width:none; border:0; border-radius:0; box-shadow:none; opacity:1; transform:none; transition:none; }
.ch-page .ch-head{ padding-top:env(safe-area-inset-top,0px); min-height:calc(53px + env(safe-area-inset-top,0px)); padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(12px + env(safe-area-inset-right,0px)); justify-content:flex-start; }
.ch-page .ch-title-wrap{ margin-right:auto; }
.ch-page .ch-layout{ grid-template-columns:340px minmax(0,1fr); }
.ch-page .ch-comp{ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
.ch-page .ch-side-foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
.ch-page .ch-toast{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
.ch-page textarea, .ch-page input{ font-size:16px; }
@media (max-width:720px){
.ch-page .ch-layout{ grid-template-columns:minmax(0,1fr); }
.ch-page .ch-layout[data-view="list"] .ch-main{ display:none; }
.ch-page .ch-layout[data-view="chat"] .ch-side{ display:none; }
}
.ch-gate{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; color:#f1f4f8; background:#0e0e10; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.ch-gate-t{ font-size:26px; font-weight:800; }
.ch-gate-p{ margin:0; color:#8e8e96; font-size:15px; }
.ch-gate-btn{ min-width:200px; padding:13px 24px; font:inherit; font-size:15px; font-weight:700; color:#fff; background:#8f2f46; border:0; border-radius:999px; cursor:pointer; }
.ch-gate-btn:hover, .ch-gate-btn:focus-visible{ background:#a23b53; outline:0; }
.ch-gate-link{ color:#cf7188; font-size:14px; text-decoration:none; }
/* a message that is on its way (shown at once, confirmed when the server has it) */
.ch-row.is-pending .ch-bubble{ opacity:.62; }
.ch-row.is-pending .ch-tick{ visibility:hidden; }
/* ---------- v53: LITE / SECURE chats, New chat, Security DNA, outbox ---------- */
.ch-newchat{ display:flex; align-items:center; gap:8px; width:calc(100% - 24px); margin:10px 12px 4px; padding:10px 12px; box-sizing:border-box; font:inherit; font-size:14px; font-weight:700; color:var(--x-fg); background:rgba(255,255,255,.05); border:1px solid var(--x-line); border-radius:12px; cursor:pointer; }
.ch-newchat:hover{ background:rgba(255,255,255,.09); }
.ch-modeline{ font-size:12px; color:var(--x-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-new-body{ display:grid; gap:8px; margin-top:12px; overflow-y:auto; }
.ch-new-l{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--x-mute); margin-top:6px; }
.ch-pick{ display:grid; gap:6px; max-height:170px; overflow-y:auto; }
.ch-pick-i{ display:flex; align-items:center; gap:10px; padding:7px 10px; font:inherit; font-size:15px; color:var(--x-fg); background:transparent; border:1px solid var(--x-line); border-radius:12px; cursor:pointer; text-align:left; }
.ch-pick-i .ch-ava{ width:30px; height:30px; font-size:13px; }
.ch-pick-i.is-on{ border-color:var(--x-blue); background:rgba(var(--x-rgb),.1); }
.ch-modes{ display:grid; gap:8px; }
.ch-mode-card{ display:flex; align-items:flex-start; gap:12px; padding:12px; font:inherit; color:var(--x-fg); text-align:left; background:transparent; border:1px solid var(--x-line); border-radius:12px; cursor:pointer; }
.ch-mode-card .ch-dot{ flex:none; width:12px; height:12px; margin-top:4px; border-radius:50%; }
.ch-mode-t{ display:grid; gap:2px; }
.ch-mode-t strong{ font-size:16px; }
.ch-mode-t span{ font-size:14px; }
.ch-mode-t em{ font-style:normal; font-size:13px; color:var(--x-mute); }
.ch-dna-head{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--x-mute); }
.ch-dna-list{ display:grid; margin-top:12px; overflow-y:auto; }
.ch-dna-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--x-line); font-size:14px; }
.ch-dna-n{ color:var(--x-fg); font-weight:600; }
.ch-dna-v{ color:var(--x-mute); text-align:right; }
.ch-dna-row.is-ok .ch-dna-v{ color:#43d17a; }
.ch-row.is-failed .ch-bubble{ border:1px dashed var(--x-red); }
.ch-retry{ padding:0 8px 0 0; font:inherit; font-size:12px; font-weight:700; color:#ffb4b9; background:transparent; border:0; cursor:pointer; }
/* ---------- v54: x.com colors, Telegram-style layout ---------- */
.ch-backdrop{ background:rgba(0,0,0,.9); }
.ch-panel{ box-shadow:0 0 0 1px #2a2a2f, 0 12px 56px rgba(0,0,0,.6); }
.ch-item{ padding:10px 16px; gap:14px; }
.ch-ava{ width:48px; height:48px; font-size:19px; }
.ch-item.is-on{ background:rgba(var(--x-rgb),.14); }
.ch-sub{ font-size:14px; }
.ch-newchat{ border-radius:999px; border:0; background:var(--x-btn); color:#fff; justify-content:center; margin:10px 12px 6px; }
.ch-newchat:hover{ background:var(--x-btn-h); }
.ch-msgs{ gap:2px; padding:14px 18px; }
.ch-bubble{ padding:7px 12px 5px; }
.ch-row.me + .ch-row:not(.me), .ch-row:not(.me) + .ch-row.me{ margin-top:8px; }
.ch-row.me:has(+ .ch-row.me) .ch-bubble{ border-bottom-right-radius:6px; }
.ch-row.me + .ch-row.me .ch-bubble{ border-top-right-radius:6px; }
.ch-row:not(.me):has(+ .ch-row:not(.me)) .ch-bubble{ border-bottom-left-radius:6px; }
.ch-row:not(.me) + .ch-row:not(.me) .ch-bubble{ border-top-left-radius:6px; }
.ch-day{ background:rgba(231,233,234,.1); color:#e7e9ea; }
.ch-comp{ align-items:center; }
.ch-ta{ border-radius:22px; background:var(--x-field); border-color:#2a2a2f; }
.ch-ta:focus{ border-color:var(--x-btn); box-shadow:none; }
/* ---------- v55: dark grey + light burgundy; quiet SECURE marker (a small lock) ---------- */
.ch-secure-ic{ display:inline-flex; vertical-align:-2px; margin-right:5px; color:var(--x-acc); }
.ch-modeline{ display:flex; align-items:center; font-size:12px; color:var(--x-mute); }
.ch-mode-card .ch-dot{ display:none; }
.ch-mode-card.is-on{ border-color:var(--x-btn); background:rgba(var(--x-rgb),.12); }
.ch-mode-card.is-secure .ch-mode-t strong::before{ content:'\1F512\00a0'; filter:grayscale(1) brightness(1.6); font-size:13px; }
.ch-newchat{ background:var(--x-btn); }
.ch-conv-top{ background:var(--x-surf); }
/* ---------- Protected / Vault messages, Context Privacy ---------- */
.ch-compwrap{ position:relative; flex:none; }
.ch-pbtn{ flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-mute); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .15s ease, background .15s ease; }
.ch-pbtn:hover{ color:var(--x-fg); background:var(--x-hover); }
.ch-pbtn.is-on{ color:#fff; background:var(--x-btn); }
.ch-pbtn:disabled{ opacity:.4; cursor:default; }
.ch-pbtn:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
/* send menu: hold the send button (or right-click it) */
.ch-send{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.ch-smenu{ position:absolute; right:12px; bottom:100%; z-index:9; width:min(330px,calc(100% - 24px)); max-height:min(72vh,540px); overflow:auto; padding:8px; box-sizing:border-box; background:var(--x-surf); border:1px solid var(--x-line); border-radius:14px; box-shadow:0 0 22px rgba(255,255,255,.1); animation:ch-sm-in .12s ease-out; transform-origin:100% 100%; }
@keyframes ch-sm-in{ from{ opacity:0; transform:translateY(6px) scale(.97); } to{ opacity:1; transform:none; } }
.ch-sm{ display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:9px 10px; box-sizing:border-box; font:inherit; text-align:left; color:var(--x-fg); background:transparent; border:0; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-sm:hover, .ch-sm:focus-visible, .ch-sm.is-open{ background:var(--x-hover); outline:0; }
.ch-sm-i{ flex:none; width:22px; display:flex; justify-content:center; color:var(--x-acc); }
.ch-sm-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ch-sm-t b{ font-size:14px; font-weight:700; }
.ch-sm-t span{ font-size:12px; line-height:1.35; color:var(--x-mute); }
.ch-sm-c{ flex:none; color:var(--x-mute); transition:transform .15s ease; }
.ch-sm.is-open .ch-sm-c{ transform:rotate(90deg); }
.ch-sm-h{ margin:8px 10px 2px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--x-mute); }
.ch-sm-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 10px 8px 44px; }
.ch-sm-own{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--x-mute); }
.ch-sm-own input{ width:64px; padding:5px 8px; box-sizing:border-box; font:inherit; font-size:13px; color:var(--x-fg); background:var(--x-field); border:1px solid var(--x-line); border-radius:8px; }
.ch-sm-go{ padding:5px 11px; font:inherit; font-size:13px; font-weight:700; color:var(--x-btn-fg); background:var(--x-btn); border:0; border-radius:9999px; cursor:pointer; }
.ch-smenu .ch-psw{ margin:2px 0 0; border:0; }
.ch-sm-n{ margin:8px 10px 4px; font-size:11.5px; line-height:1.4; color:var(--x-mute); }
@media (prefers-reduced-motion:reduce){ .ch-smenu{ animation:none; } }
.ch-psw{ display:flex; align-items:center; gap:10px; width:100%; margin:0 0 6px; padding:10px 12px; box-sizing:border-box; font:inherit; text-align:left; color:var(--x-fg); background:transparent; border:1px solid var(--x-line); border-radius:10px; cursor:pointer; }
.ch-psw:hover{ background:var(--x-hover); }
.ch-po-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ch-po-t b{ font-size:14px; }
.ch-po-t span{ font-size:12px; line-height:1.35; color:var(--x-mute); }
.ch-psw-k{ flex:none; width:36px; height:20px; padding:2px; box-sizing:border-box; border-radius:9999px; background:#3a3a40; transition:background .15s ease; }
.ch-psw-k i{ display:block; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s ease; }
.ch-psw.is-on .ch-psw-k{ background:var(--x-btn); }
.ch-psw.is-on .ch-psw-k i{ transform:translateX(16px); }
.ch-pc{ padding:5px 11px; font:inherit; font-size:13px; font-weight:700; color:var(--x-fg); background:transparent; border:1px solid var(--x-line); border-radius:9999px; cursor:pointer; }
.ch-pc.is-on{ color:var(--x-btn-fg); background:var(--x-btn); border-color:var(--x-btn); }
/* the tile in the chat */
.ch-pm-b{ min-width:200px; }
.ch-pm-b.st-new{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-pm-b.st-new:hover{ filter:brightness(1.1); }
.ch-pm-b:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ch-pm-head{ display:flex; align-items:center; gap:10px; }
.ch-pm-head > svg{ flex:none; opacity:.9; }
.ch-pm-t{ font-size:15px; font-weight:700; }
.ch-pm-sub{ font-size:12.5px; opacity:.78; }
.ch-pm-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ch-pm-chip{ padding:2px 8px; font-size:11.5px; font-weight:700; border:1px solid rgba(255,255,255,.28); border-radius:9999px; opacity:.88; }
.ch-pm-b.st-gone, .ch-pm-b.st-none{ opacity:.7; }
.ch-pm-b.st-gone .ch-pm-chips, .ch-pm-b.st-sent .ch-pm-chips{ opacity:.8; }
.ch-pm-alt{ display:block; margin-top:8px; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:inherit; text-decoration:underline; background:transparent; border:0; cursor:pointer; opacity:.85; }
/* the viewer */
.ch-pv{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; background:rgba(0,0,0,.86); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.ch-pv-card{ position:relative; width:min(100%,460px); max-height:100%; display:flex; flex-direction:column; gap:12px; padding:18px; box-sizing:border-box; overflow:auto; background:var(--x-surf); border:1px solid var(--x-line); border-radius:16px; }
.ch-pv-head{ display:flex; align-items:center; gap:10px; color:var(--x-fg); }
.ch-pv-t{ flex:1 1 auto; font-size:15px; font-weight:800; }
.ch-pv-x{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:transparent; border:0; border-radius:50%; cursor:pointer; }
.ch-pv-x:hover{ background:var(--x-hover); }
.ch-pv-text{ font-size:17px; line-height:1.5; color:var(--x-fg); white-space:pre-wrap; overflow-wrap:anywhere; -webkit-user-select:none; user-select:none; }
.ch-pv-track{ height:4px; overflow:hidden; background:#2f2f35; border-radius:9999px; }
.ch-pv-track i{ display:block; height:100%; width:100%; background:var(--x-btn); }
.ch-pv-note{ font-size:12px; line-height:1.45; color:var(--x-mute); }
.ch-pv-veil{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; font-size:14px; font-weight:600; color:var(--x-mute); background:var(--x-surf); border-radius:16px; }
.ch-pv.is-veiled .ch-pv-veil{ display:flex; }
.ch-pv.is-veiled .ch-pv-text, .ch-pv.is-veiled .ch-pv-track{ visibility:hidden; }
@media print{ .ch-pv, .ch-pv *{ display:none !important; } }
/* ======================= darker themes, accents, text size, backgrounds ======================= */
.ch-modal[data-theme="dark"]{ --x-bg:#141416; --x-surf:#1a1a1d; --x-line:#2a2a2f; --x-in:#26262b; --x-field:#1b1b1f; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="dark"]{ --x-bg:#141416; --x-surf:#1a1a1d; --x-line:#2a2a2f; --x-in:#26262b; --x-field:#1b1b1f; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="darker"]{ --x-bg:#0a0a0c; --x-surf:#0f0f11; --x-line:#1c1c20; --x-in:#18181b; --x-field:#121215; --x-hover:rgba(255,255,255,.045); }
.ac-modal[data-theme="darker"]{ --x-bg:#0a0a0c; --x-surf:#0f0f11; --x-line:#1c1c20; --x-in:#18181b; --x-field:#121215; --x-hover:rgba(255,255,255,.045); }
.ch-modal[data-theme="amoled"]{ --x-bg:#000; --x-surf:#040405; --x-line:#151518; --x-in:#101012; --x-field:#08080a; --x-hover:rgba(255,255,255,.04); }
.ac-modal[data-theme="amoled"]{ --x-bg:#000; --x-surf:#040405; --x-line:#151518; --x-in:#101012; --x-field:#08080a; --x-hover:rgba(255,255,255,.04); }
.ch-modal[data-accent="burgundy"], .ch-btn[data-accent="burgundy"]{ --x-btn:#8f2f46; --x-btn-h:#a23b53; --x-rgb:143,47,70; --x-out:#6e2437; --x-acc:#cf7188; --x-blue:#cf7188; }
.ac-modal[data-accent="burgundy"]{ --x-btn:#8f2f46; --x-btn-h:#a23b53; --x-rgb:143,47,70; --x-out:#6e2437; --x-acc:#cf7188; --x-blue:#cf7188; }
.ch-modal[data-accent="blue"], .ch-btn[data-accent="blue"]{ --x-btn:#2f6fc7; --x-btn-h:#3b80dd; --x-rgb:47,111,199; --x-out:#285da6; --x-acc:#6aa8f2; --x-blue:#6aa8f2; }
.ac-modal[data-accent="blue"]{ --x-btn:#2f6fc7; --x-btn-h:#3b80dd; --x-rgb:47,111,199; --x-out:#285da6; --x-acc:#6aa8f2; --x-blue:#6aa8f2; }
.ch-modal[data-accent="graphite"], .ch-btn[data-accent="graphite"]{ --x-btn:#55555e; --x-btn-h:#686872; --x-rgb:85,85,94; --x-out:#3d3d44; --x-acc:#b8b8c2; --x-blue:#b8b8c2; }
.ac-modal[data-accent="graphite"]{ --x-btn:#55555e; --x-btn-h:#686872; --x-rgb:85,85,94; --x-out:#3d3d44; --x-acc:#b8b8c2; --x-blue:#b8b8c2; }
.ch-modal[data-accent="violet"], .ch-btn[data-accent="violet"]{ --x-btn:#6a4cc4; --x-btn-h:#7d60d9; --x-rgb:106,76,196; --x-out:#553aa0; --x-acc:#ab94f0; --x-blue:#ab94f0; }
.ac-modal[data-accent="violet"]{ --x-btn:#6a4cc4; --x-btn-h:#7d60d9; --x-rgb:106,76,196; --x-out:#553aa0; --x-acc:#ab94f0; --x-blue:#ab94f0; }
.ch-modal[data-accent="emerald"], .ch-btn[data-accent="emerald"]{ --x-btn:#1f8a62; --x-btn-h:#27a074; --x-rgb:31,138,98; --x-out:#176b4c; --x-acc:#5fd4a0; --x-blue:#5fd4a0; }
.ac-modal[data-accent="emerald"]{ --x-btn:#1f8a62; --x-btn-h:#27a074; --x-rgb:31,138,98; --x-out:#176b4c; --x-acc:#5fd4a0; --x-blue:#5fd4a0; }
.ch-modal[data-accent="amber"], .ch-btn[data-accent="amber"]{ --x-btn:#b9791f; --x-btn-h:#d08d2b; --x-rgb:185,121,31; --x-out:#8f5c15; --x-acc:#f0b857; --x-blue:#f0b857; }
.ac-modal[data-accent="amber"]{ --x-btn:#b9791f; --x-btn-h:#d08d2b; --x-rgb:185,121,31; --x-out:#8f5c15; --x-acc:#f0b857; --x-blue:#f0b857; }
/* text size: ONE variable drives every piece of chat text (messages, captions, previews, names, composer) */
.ch-modal[data-fs="small"]{ --ch-fs:13px; }
.ch-modal[data-fs="normal"]{ --ch-fs:15px; }
.ch-modal[data-fs="large"]{ --ch-fs:17.5px; }
.ch-modal[data-fs="xlarge"]{ --ch-fs:20px; }
.ch-modal .ch-text, .ch-modal .ch-md-cap, .ch-modal .ch-bubble{ font-size:var(--ch-fs); }
.ch-modal .ch-pm-t{ font-size:var(--ch-fs); }
.ch-modal .ch-name{ font-size:calc(var(--ch-fs) + 1px); }
.ch-modal .ch-sub{ font-size:calc(var(--ch-fs) - 1px); }
.ch-modal .ch-ago, .ch-modal .ch-meta, .ch-modal .ch-day{ font-size:calc(var(--ch-fs) - 3px); }
.ch-modal .ch-ta{ font-size:max(16px, var(--ch-fs)); }
.ch-modal .ch-panel, .ch-modal .ch-layout, .ch-modal .ch-main, .ch-modal .ch-conv{ background:var(--x-bg); }
.ch-modal .ch-side, .ch-modal .ch-head, .ch-modal .ch-conv-top{ background:var(--x-surf); }
.ch-modal .ch-ta{ background:var(--x-field); border-color:var(--x-line); }
.ch-modal .ch-ta:focus{ border-color:var(--x-btn); box-shadow:none; }
.ch-modal .ch-send{ background:var(--x-btn); color:#fff; }
.ch-modal .ch-send:hover{ background:var(--x-btn); filter:brightness(1.18); }
.ch-modal .ch-tab[aria-selected="true"]::after{ background:var(--x-acc); }
.ch-modal .ch-tab[aria-selected="true"]{ color:var(--x-acc); }
.ch-modal[data-wall="dots"] .ch-msgs{ background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:22px 22px; }
.ch-modal[data-wall="glow"] .ch-msgs{ background-image:radial-gradient(120% 60% at 50% 0%, rgba(var(--x-rgb),.18), transparent 70%); background-image:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--x-btn) 22%, transparent), transparent 70%); }
.ch-compwrap [hidden], .ch-comp [hidden]{ display:none !important; }
.ch-gear{ margin-left:2px; }
/* ======================= search, pins, small pop-up menu ======================= */
.ch-search{ display:flex; align-items:center; gap:8px; margin:6px 12px 8px; padding:0 12px; height:38px; box-sizing:border-box; color:var(--x-mute); background:var(--x-field); border:1px solid var(--x-line); border-radius:9999px; }
.ch-search:focus-within{ border-color:var(--x-btn); color:var(--x-fg); }
.ch-search input{ flex:1 1 auto; min-width:0; height:100%; padding:0; font:inherit; font-size:15px; color:var(--x-fg); background:transparent; border:0; outline:0; }
.ch-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ch-nores{ padding:24px 16px; text-align:center; color:var(--x-mute); }
.ch-item-right svg{ color:var(--x-mute); }
.ch-pop{ position:fixed; z-index:300; min-width:170px; padding:6px; background:var(--x-surf); border:1px solid var(--x-line); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.55); }
.ch-pop-i{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; font:inherit; font-size:14px; font-weight:600; text-align:left; color:var(--x-fg); background:transparent; border:0; border-radius:8px; cursor:pointer; }
.ch-pop-i:hover, .ch-pop-i:focus-visible{ background:var(--x-hover); outline:0; }
/* ======================= composer: attach, emoji, microphone, recording ======================= */
.ch-abtn, .ch-ebtn{ width:40px; height:40px; }
.ch-mic{ color:#fff; }
.ch-rec{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; padding:0 4px; }
.ch-rec-x{ flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-red); background:transparent; border:0; border-radius:50%; cursor:pointer; }
.ch-rec-x:hover{ background:var(--x-hover); }
.ch-rec-dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--x-red); animation:chRecPulse 1.2s ease-in-out infinite; }
.ch-rec.is-done .ch-rec-dot{ animation:none; opacity:.5; }
.ch-rec-t{ flex:none; min-width:40px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--x-fg); }
.ch-rec-wf{ flex:1 1 auto; min-width:0; height:30px; display:flex; align-items:center; gap:2px; }
.ch-rec-wf i{ flex:1 1 0; min-width:2px; max-width:5px; height:8%; border-radius:2px; background:var(--x-acc); transition:height .08s linear; }
.ch-rec-hint{ flex:none; font-size:13px; font-weight:600; color:var(--x-mute); white-space:nowrap; }
.ch-rec-hint.is-cancel{ color:var(--x-red); }
.ch-rec-send{ flex:none; }
.ch-comp.is-rec > *:not(.ch-rec):not(.ch-mic):not(.ch-rec-lock){ display:none !important; }
.ch-comp.is-lock .ch-mic{ display:none !important; }
.ch-comp.is-rec:not(.is-lock) .ch-mic{ transform:scale(1.3); box-shadow:0 0 0 8px rgba(255,255,255,.07); transition:transform .12s ease; }
.ch-mic{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.ch-rec-lock{ position:absolute; right:10px; bottom:calc(100% + 10px); display:flex; align-items:center; gap:6px; padding:7px 12px; font-size:13px; font-weight:600; color:var(--x-fg); background:var(--x-surf); border:1px solid var(--x-line); border-radius:9999px; box-shadow:0 6px 20px rgba(0,0,0,.5); pointer-events:none; transition:opacity .1s linear, transform .1s linear; }
.ch-rec-lock[hidden]{ display:none; }
@keyframes chRecPulse{ 50%{ opacity:.25; } }
.ch-emo{ position:absolute; left:12px; right:12px; bottom:100%; z-index:9; max-width:380px; max-height:240px; overflow:auto; padding:8px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; box-sizing:border-box; background:var(--x-surf); border:1px solid var(--x-line); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.ch-emo-b{ aspect-ratio:1; padding:0; font-size:22px; line-height:1; background:transparent; border:0; border-radius:8px; cursor:pointer; }
.ch-emo-b:hover, .ch-emo-b:focus-visible{ background:var(--x-hover); outline:0; }
/* ======================= photos ======================= */
.ch-md-b{ position:relative; }
.ch-md-b.is-img{ padding:3px; }
.ch-md-b.is-img .ch-md-cap, .ch-md-b.is-img .ch-meta{ padding-left:8px; padding-right:8px; }
.ch-md-cap{ margin-top:6px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.ch-md-b.is-img.no-cap .ch-meta{ position:absolute; right:10px; bottom:10px; margin:0; padding:2px 8px; color:#fff; background:rgba(0,0,0,.55); border-radius:10px; }
.ch-md-b.is-img.no-cap .ch-tick{ color:#fff; }
.ch-img{ position:relative; max-width:100%; min-height:90px; overflow:hidden; background:var(--x-field) center/cover no-repeat; border-radius:14px; cursor:pointer; }
.ch-img.has-th{ filter:none; }
.ch-img img{ display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s ease; }
.ch-img.is-loaded img{ opacity:1; }
.ch-img.has-th:not(.is-loaded){ background-size:cover; }
.ch-img-st{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; font-size:13px; font-weight:600; background:rgba(0,0,0,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ch-img-st[hidden]{ display:none; }
.ch-spin{ width:26px; height:26px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:chSpin .8s linear infinite; }
@keyframes chSpin{ to{ transform:rotate(360deg); } }
.ch-photo{ width:min(100%,420px); }
.ch-photo-img{ display:block; width:100%; max-height:46vh; margin:10px 0; object-fit:contain; background:var(--x-field); border-radius:12px; }
.ch-photo-cap{ width:100%; padding:11px 14px; box-sizing:border-box; font:inherit; font-size:15px; color:var(--x-fg); background:var(--x-field); border:1px solid var(--x-line); border-radius:12px; }
.ch-photo-cap:focus{ outline:0; border-color:var(--x-btn); }
.ch-lb{ position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.94); }
.ch-lb img{ max-width:96vw; max-height:92vh; object-fit:contain; border-radius:6px; }
.ch-lb-x{ position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.12); border:0; border-radius:50%; cursor:pointer; }
/* ======================= voice messages ======================= */
.ch-md-b.is-voice{ min-width:230px; padding:8px 12px 5px 8px; }
.ch-vo{ display:flex; align-items:center; gap:10px; }
.ch-vo-btn{ flex:none; width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-btn); background:#fff; border:0; border-radius:50%; cursor:pointer; }
.ch-row:not(.me) .ch-vo-btn{ color:#fff; background:var(--x-btn); }
.ch-vo.is-busy .ch-vo-btn{ opacity:.6; }
.ch-vo-mid{ flex:1 1 auto; min-width:0; }
.ch-vo-wf{ display:flex; align-items:center; gap:2px; height:26px; cursor:pointer; }
.ch-vo-wf i{ flex:1 1 0; min-width:2px; border-radius:2px; background:currentColor; opacity:.38; }
.ch-vo-wf i.on{ opacity:1; }
.ch-vo-info{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; font-size:12px; opacity:.85; }
.ch-vo-t{ font-variant-numeric:tabular-nums; }
.ch-vo-sp{ padding:1px 7px; font:inherit; font-size:11px; font-weight:700; color:inherit; background:rgba(255,255,255,.14); border:0; border-radius:9999px; cursor:pointer; }
/* ======================= settings ======================= */
.ch-set-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ch-set .ch-cr-body{ flex:1 1 auto; min-height:0; overflow:auto; }
.ch-set-r{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; padding:8px 2px; }
.ch-set-l{ font-size:14px; font-weight:700; color:var(--x-fg); }
.ch-seg{ display:inline-flex; padding:3px; gap:2px; background:var(--x-field); border:1px solid var(--x-line); border-radius:9999px; }
.ch-seg-b{ padding:6px 13px; font:inherit; font-size:13px; font-weight:700; color:var(--x-mute); background:transparent; border:0; border-radius:9999px; cursor:pointer; }
.ch-seg-b.is-on{ color:#fff; background:var(--x-btn); }
.ch-sw{ display:inline-flex; gap:10px; }
.ch-sw-b{ width:28px; height:28px; padding:0; border:2px solid transparent; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 2px var(--x-surf); }
.ch-sw-b.is-on{ border-color:var(--x-fg); }
.ch-set-act::after{ content:"\203A"; flex:none; font-size:22px; line-height:1; color:var(--x-mute); }
.ch-set-about{ padding:4px 2px 10px; font-size:13px; line-height:1.5; color:var(--x-mute); }
@media (prefers-reduced-motion: reduce){ .ch-rec-dot, .ch-spin{ animation:none; } .ch-img img{ transition:none; } }
/* ======================= v56: PELATRA Messenger header (strict, with a quiet shimmer) ======================= */
.ch-head{ position:relative; overflow:hidden; isolation:isolate; }
.ch-head::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(55% 160% at 0% 0%, rgba(var(--x-rgb),.26), transparent 62%),
radial-gradient(38% 140% at 100% 0%, rgba(255,255,255,.055), transparent 70%),
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 100% 18px,
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 18px 100%;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.35) 100%); mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.35) 100%);
}
.ch-head::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),rgba(var(--x-rgb),1),transparent) no-repeat -60% 0 / 38% 100%;
animation:chHairline 8s ease-in-out infinite;
}
@keyframes chHairline{ 0%,12%{ background-position:-60% 0 } 62%,100%{ background-position:160% 0 } }
.ch-title{ display:inline-flex; align-items:baseline; gap:.55em; font-size:16px; font-weight:400; line-height:1.1; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.ch-title-a{
font-weight:700; letter-spacing:.34em; color:transparent;
/* flat grey at both ends of the gradient: the loop restarts on an identical picture, so nothing jumps */
background:linear-gradient(100deg,#8d8d97 0,#8d8d97 33%,#d9d9df 42%,#fff 50%,#d9d9df 58%,#8d8d97 67%,#8d8d97 100%) 100% 0 / 300% 100% no-repeat;
-webkit-background-clip:text; background-clip:text;
filter:drop-shadow(0 0 10px rgba(var(--x-rgb),.4));
animation:chSheen 7s ease-in-out infinite;
}
@keyframes chSheen{ 0%,8%{ background-position:100% 0 } 56%,100%{ background-position:0 0 } }
.ch-title-b{ font-size:.8em; font-weight:300; letter-spacing:.26em; color:var(--x-mute); }
@media (max-width:480px){
.ch-title{ font-size:13px; letter-spacing:.14em; gap:.45em; }
.ch-title-a{ letter-spacing:.22em; }
.ch-title-b{ letter-spacing:.16em; }
}
.ch-gate-t{ letter-spacing:.12em; }
/* ======================= v56: mute, delete menu, grey badge ======================= */
.ch-item-bd{ display:flex; align-items:center; gap:6px; }
.ch-unread.is-muted{ background:#4a4a52; color:#ddd; }
.ch-muted-ic{ color:var(--x-mute); }
.ch-pop-sep{ height:1px; margin:5px 4px; background:var(--x-line); }
.ch-pop-i svg{ flex:none; color:var(--x-mute); }
.ch-pop-i.danger, .ch-pop-i.danger svg{ color:var(--x-red); }
.ch-pop{ min-width:210px; }
/* ======================= v56: the round chat button hides behind windows and tabs of the site ======================= */
.ch-btn.is-covered{
opacity:0 !important; visibility:hidden; pointer-events:none !important; transform:translateY(-8px) !important;
transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s !important;
}
/* ======================= v56: settings by category (Telegram style) ======================= */
.ch-set{ width:min(100%,480px); height:min(86vh,680px); max-height:100%; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.ch-set-head{ flex:none; display:flex; align-items:center; gap:6px; min-height:54px; padding:0 10px 0 8px; box-sizing:border-box; border-bottom:1px solid var(--x-line); }
.ch-set-head .ch-dlg-t{ flex:1 1 auto; min-width:0; padding-left:8px; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-set-back[hidden]{ display:none; }
.ch-set-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:6px 14px 18px; scrollbar-width:thin; scrollbar-color:var(--x-line) transparent; }
.ch-set-body .ch-cr-sec{ margin:18px 2px 6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.ch-cat{ display:flex; align-items:center; gap:14px; width:100%; margin:0; padding:11px 8px; box-sizing:border-box; font:inherit; text-align:left; color:var(--x-fg); background:transparent; border:0; border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.ch-cat:hover, .ch-cat:focus-visible{ background:var(--x-hover); outline:0; }
.ch-cat-i{ flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--x-fg); border:1px solid var(--x-line); border-radius:9px; background:var(--x-field); }
.ch-cat .ch-po-t b{ font-size:15px; }
.ch-cat-c{ flex:none; color:var(--x-mute); display:flex; }
.ch-set-note{ margin:6px 4px; font-size:13px; line-height:1.5; color:var(--x-mute); }
.ch-set-body .ch-set-r{ padding:10px 2px; }
.ch-set-body .ch-psw{ margin-bottom:4px; }
.ch-set-about{ padding:10px 4px; }
.ch-prev{ display:flex; flex-direction:column; gap:4px; margin:10px 0 4px; padding:14px; border:1px solid var(--x-line); border-radius:14px; background-color:var(--x-bg); }
.ch-modal[data-wall="dots"] .ch-prev{ background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size:22px 22px; }
.ch-modal[data-wall="glow"] .ch-prev{ background-image:radial-gradient(120% 70% at 50% 0%, rgba(var(--x-rgb),.24), transparent 70%); }
@media (max-width:720px){
.ch-dlg:has(.ch-set){ padding:0; }
.ch-set{ width:100%; height:100%; border:0; border-radius:0; }
}
@media (prefers-reduced-motion:reduce){
.ch-head::after, .ch-title-a{ animation:none; }
.ch-title-a{ background-position:0 0; }
.ch-pcat, .ch-pcat g, .ch-star, .ch-comet, .ch-snow{ animation:none; }
.ch-pcat{ left:14px; }
.ch-pcat .f2{ opacity:0; }
.ch-star{ opacity:.5; }
.ch-comet, .ch-snow{ display:none; }
}
/* ======================= v57: serious settings list + top bar decorations ======================= */
.ch-set-body .ch-cat{ width:calc(100% + 28px); margin:0 -14px; padding:14px 20px; gap:16px; border-radius:0; border-bottom:1px solid var(--x-line); }
.ch-set-body .ch-cat:last-of-type{ border-bottom:0; }
.ch-cat .ch-po-t b{ font-size:15px; font-weight:600; }
.ch-cat .ch-po-t span{ font-size:12.5px; }
.ch-cat-i svg{ opacity:.9; }
.ch-deco{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.ch-pcat{ position:absolute; bottom:3px; left:-30px; width:26px; height:16px; animation:chCatWalk 26s linear infinite; }
.ch-pcat svg{ display:block; width:26px; height:16px; overflow:visible; shape-rendering:crispEdges; }
.ch-pcat rect{ fill:#b4b4be; }
.ch-pcat rect.e{ fill:var(--x-acc); }
.ch-pcat .f1{ animation:chStepA .5s steps(1,end) infinite; }
.ch-pcat .f2{ opacity:0; animation:chStepB .5s steps(1,end) infinite; }
@keyframes chCatWalk{ 0%{ left:-30px; } 82%,100%{ left:100%; } }
@keyframes chStepA{ 0%{ opacity:1; } 50%{ opacity:0; } }
@keyframes chStepB{ 0%{ opacity:0; } 50%{ opacity:1; } }
.ch-star{ position:absolute; width:2px; height:2px; color:#fff; background:currentColor; opacity:.12; animation:chTwinkle 3.4s ease-in-out infinite; }
.ch-star.big{ box-shadow:2px 0 currentColor,-2px 0 currentColor,0 2px currentColor,0 -2px currentColor; }
.ch-star.a{ color:var(--x-acc); }
@keyframes chTwinkle{ 0%,100%{ opacity:.12; transform:scale(.8); } 50%{ opacity:.85; transform:scale(1); } }
.ch-comet{ position:absolute; left:105%; width:44px; height:2px; border-radius:2px; opacity:0; transform-origin:0 50%; background:linear-gradient(90deg,#fff,rgba(255,255,255,.4) 35%,transparent); animation:chComet 8s linear infinite; }
@keyframes chComet{
0%,64%{ left:105%; opacity:0; transform:translateY(0) rotate(-9deg); }
66%{ opacity:1; }
100%{ left:-12%; opacity:0; transform:translateY(60px) rotate(-9deg); }
}
.ch-snow{ position:absolute; top:-6px; width:2px; height:2px; background:#fff; opacity:0; animation:chSnow 5s linear infinite; }
.ch-snow.big{ width:3px; height:3px; }
@keyframes chSnow{ 0%{ transform:translate(0,0); opacity:0; } 12%{ opacity:.85; } 100%{ transform:translate(8px,66px); opacity:0; } }
.ch-deco-prev{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; height:46px; margin:4px 0 10px; overflow:hidden; border:1px solid var(--x-line); border-radius:10px; background:var(--x-field); }
.ch-deco-prev-t{ font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--x-mute); }
.ch-deco-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:8px; }
.ch-deco-b{ padding:10px 4px; font:inherit; font-size:13px; font-weight:600; color:var(--x-mute); background:transparent; border:1px solid var(--x-line); border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-deco-b:hover{ background:var(--x-hover); }
.ch-deco-b.is-on{ color:var(--x-fg); border-color:rgba(var(--x-rgb),.9); background:rgba(var(--x-rgb),.16); }
/* ======================= v58: light strip (off / often / normal / rare), Halloween, About, footer ======================= */
.ch-deco-prev::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),rgba(var(--x-rgb),1),transparent) no-repeat -60% 0 / 38% 100%;
animation:chHairline 8s ease-in-out infinite;
}
.ch-head[data-line="off"]::after, .ch-deco-prev[data-line="off"]::after{ display:none; }
.ch-head[data-line="often"]::after, .ch-deco-prev[data-line="often"]::after{ animation-name:chHairlineOften; animation-duration:5s; }
.ch-head[data-line="rare"]::after, .ch-deco-prev[data-line="rare"]::after{ animation-name:chHairlineRare; animation-duration:22s; }
@keyframes chHairlineOften{ 0%{ background-position:-60% 0 } 80%,100%{ background-position:160% 0 } }
@keyframes chHairlineRare{ 0%,2%{ background-position:-60% 0 } 20%,100%{ background-position:160% 0 } }
.ch-deco-g{ grid-template-columns:repeat(3,1fr); }
.ch-deco-halloween{ background:radial-gradient(60% 140% at 100% 100%, rgba(255,120,0,.16), transparent 70%), radial-gradient(40% 120% at 0% 0%, rgba(120,60,200,.13), transparent 70%); }
.ch-deco svg{ display:block; overflow:visible; shape-rendering:crispEdges; }
.ch-hpump{ position:absolute; bottom:3px; left:45%; width:22px; height:16px; filter:drop-shadow(0 0 4px rgba(255,150,0,.45)); }
.ch-hpump .p-o{ fill:#e8731a; }
.ch-hpump .p-g{ fill:#4f9d3a; }
.ch-hpump .p-y{ fill:#ffd23f; animation:chFlick 2.6s steps(1,end) infinite; }
@keyframes chFlick{ 0%,100%{ fill:#ffd23f; } 40%{ fill:#ffb020; } 70%{ fill:#ffe680; } }
.ch-hghost{ position:absolute; top:10px; left:-24px; width:18px; height:18px; opacity:.55; animation:chGhost 32s linear infinite; }
.ch-hghost-i{ animation:chBob 2.4s ease-in-out infinite; }
.ch-hghost .p-x{ fill:#e6e6f0; }
@keyframes chGhost{ 0%{ left:-24px; } 100%{ left:100%; } }
@keyframes chBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.ch-set-foot{ flex:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:12px; letter-spacing:.03em; color:var(--x-mute); border-top:1px solid var(--x-line); }
.ch-about-t{ margin:8px 2px 4px; font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--x-mute); }
.ch-about-h{ margin:6px 2px 14px; font-size:19px; font-weight:700; line-height:1.3; color:var(--x-fg); }
.ch-about-p{ margin:0 2px 12px; font-size:14px; line-height:1.6; color:var(--x-mute); }
.ch-about-s{ margin:18px 2px 6px; padding-top:14px; border-top:1px solid var(--x-line); font-size:13px; font-weight:600; line-height:1.5; color:var(--x-fg); }
@media (prefers-reduced-motion:reduce){
.ch-head[data-line]::after, .ch-deco-prev[data-line]::after{ animation:none; }
.ch-hghost, .ch-hghost-i, .ch-hpump .p-y{ animation:none; }
.ch-hghost{ left:16px; }
}
/* ======================= v59: burgundy by default in every window ======================= */
.ac-modal{ --x-btn:#8f2f46; --x-btn-fg:#fff; }
.ac-act.primary:hover{ background:#a23b53; border-color:#a23b53; }
/* ======================= v60: Terms of Service window ======================= */
.ch-tos-body{ -webkit-user-select:text; user-select:text; }
.ch-tos-h1{ margin:8px 2px 4px; font-size:19px; font-weight:700; line-height:1.3; color:var(--x-fg); }
.ch-tos-meta{ margin:0 2px 8px; font-size:12px; letter-spacing:.06em; color:var(--x-mute); }
.ch-tos-h{ margin:24px 2px 8px; padding-top:16px; border-top:1px solid var(--x-line); font-size:15px; font-weight:700; line-height:1.35; color:var(--x-fg); }
.ch-tos-sub{ margin:12px 2px 4px; font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--x-fg); }
.ch-tos-p{ margin:0 2px 10px; font-size:14px; line-height:1.6; color:var(--x-mute); }
.ch-tos-ul{ margin:0 2px 12px; padding-left:20px; font-size:14px; line-height:1.6; color:var(--x-mute); }
.ch-tos-ul li{ margin:3px 0; }
.ch-tos-a{ color:var(--x-acc); text-decoration:none; }
.ch-tos-a:hover, .ch-tos-a:focus-visible{ text-decoration:underline; outline:0; }
/* =====================================================================
"How your messages are protected" — PAR first (ch-pr-*)
===================================================================== */
.ch-dlg-card.ch-pr{ width:min(100%,600px); max-height:100%; padding:0; display:flex; flex-direction:column; overflow:hidden; border-radius:22px; border-color:rgba(var(--x-rgb),.4); background:var(--x-bg); box-shadow:0 20px 70px rgba(0,0,0,.7); }
.ch-pr-head{ flex:none; display:flex; align-items:center; gap:12px; padding:16px 16px 14px 20px; border-bottom:1px solid var(--x-line); background:linear-gradient(180deg,rgba(var(--x-rgb),.14),transparent); }
.ch-pr-hico{ flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:rgba(var(--x-rgb),.2); border:1px solid rgba(var(--x-rgb),.45); border-radius:50%; }
.ch-pr-ht{ flex:1 1 auto; min-width:0; }
.ch-pr-title{ font-size:18px; line-height:22px; font-weight:800; color:var(--x-fg); }
.ch-pr-sub{ margin-top:2px; font-size:13px; line-height:18px; color:var(--x-mute); }
.ch-pr-x{ flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--x-mute); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease,color .15s ease; }
.ch-pr-x:hover{ color:var(--x-fg); background:rgba(255,255,255,.08); }
.ch-pr-x:focus-visible, .ch-pr-sum:focus-visible{ outline:2px solid var(--x-acc); outline-offset:2px; }
.ch-pr-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 18px; scrollbar-width:thin; scrollbar-color:#3a3a40 transparent; }
.ch-pr-intro{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-pr-foot{ flex:none; display:flex; justify-content:flex-end; padding:12px 20px 16px; border-top:1px solid var(--x-line); }
.ch-pr-foot .ac-act{ width:auto; margin:0; min-width:110px; }
/* hero */
.ch-pr-hero{ position:relative; overflow:hidden; margin:16px 0 0; padding:20px 18px 18px; border-radius:20px; border:1px solid rgba(var(--x-rgb),.65);
background:radial-gradient(120% 80% at 100% 0%,rgba(207,113,136,.26),transparent 58%),radial-gradient(90% 70% at 0% 100%,rgba(var(--x-rgb),.34),transparent 62%),linear-gradient(165deg,#2b1219,#1a1013 72%);
box-shadow:0 0 44px rgba(var(--x-rgb),.24),inset 0 1px 0 rgba(255,255,255,.07); }
.ch-pr-tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 9px; font-size:11px; line-height:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--x-btn); border:1px solid rgba(207,113,136,.6); border-radius:999px; }
.ch-pr-par{ margin:14px 0 0; font-size:60px; line-height:1; font-weight:800; letter-spacing:.2em; color:#fff; background:linear-gradient(180deg,#fff 20%,#e9a1b3 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 0 22px rgba(207,113,136,.45)); text-align:left; }
.ch-pr-parname{ margin-top:8px; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--x-acc); }
.ch-pr-lead{ margin:12px 0 0; font-size:14.5px; line-height:1.55; color:#e3d3d8; }
/* how one message key is made */
.ch-pr-flow{ display:flex; align-items:stretch; margin:18px 0 0; padding:14px; border-radius:16px; background:rgba(10,6,8,.45); border:1px solid rgba(var(--x-rgb),.35); }
.ch-pr-flow-in{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.ch-pr-fn{ min-width:0; display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:12px; background:var(--x-surf); border:1px solid var(--x-line); }
.ch-pr-fn b{ font-size:13.5px; line-height:18px; font-weight:800; color:var(--x-fg); }
.ch-pr-fn span{ font-size:11.5px; line-height:15px; color:var(--x-mute); }
.ch-pr-fn.is-par{ background:rgba(var(--x-rgb),.28); border-color:rgba(207,113,136,.7); box-shadow:0 0 18px rgba(var(--x-rgb),.35); }
.ch-pr-fn.is-par b{ color:#fff; letter-spacing:.14em; }
.ch-pr-join{ flex:none; position:relative; width:34px; margin:0 2px; }
.ch-pr-join::before{ content:""; position:absolute; left:2px; right:14px; top:24%; bottom:24%; border:2px solid rgba(207,113,136,.7); border-left:0; border-radius:0 12px 12px 0; }
.ch-pr-join::after{ content:""; position:absolute; right:1px; top:50%; width:24px; height:10px; margin-top:-5px; background:#cf7188; clip-path:polygon(0 4px,16px 4px,16px 0,24px 5px,16px 10px,16px 6px,0 6px); }
.ch-pr-join span{ display:none; }
.ch-pr-fn.is-final{ flex:1 1 0; justify-content:center; align-items:flex-start; gap:3px; background:linear-gradient(160deg,rgba(var(--x-rgb),.55),rgba(var(--x-rgb),.2)); border-color:rgba(207,113,136,.75); box-shadow:0 0 22px rgba(var(--x-rgb),.4); }
.ch-pr-fn.is-final b{ color:#fff; }
.ch-pr-fn.is-final > span:not(.ch-pr-fn-ico){ color:#e8c9d1; }
.ch-pr-fn-ico{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-bottom:4px; color:#fff; background:var(--x-btn); border-radius:50%; }
.ch-pr-note{ margin:14px 0 0; font-size:13px; line-height:1.55; color:#cdbcc2; }
/* epochs */
.ch-pr-epochs{ margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(var(--x-rgb),.35); }
.ch-pr-eplabel{ font-size:12px; line-height:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--x-acc); }
.ch-pr-eprow{ display:flex; align-items:center; margin:12px 0 0; }
.ch-pr-ep{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--x-fg); background:var(--x-surf); border:1px solid rgba(var(--x-rgb),.6); border-radius:50%; animation:chPrEp 4.4s ease-in-out infinite; animation-delay:calc(var(--i,4) * .8s); }
.ch-pr-ep.is-more{ --i:4; width:auto; min-width:24px; border:0; background:none; color:var(--x-acc); font-size:18px; animation:none; }
.ch-pr-epl{ flex:1 1 0; min-width:8px; height:2px; background:linear-gradient(90deg,rgba(var(--x-rgb),.9),rgba(207,113,136,.9)); }
@keyframes chPrEp{ 0%,24%,100%{ background:var(--x-surf); box-shadow:none; } 6%,16%{ background:var(--x-btn); box-shadow:0 0 16px rgba(207,113,136,.85); } }
.ch-pr-epnote{ margin:12px 0 0; font-size:13px; line-height:1.55; color:#cdbcc2; }
/* four properties */
.ch-pr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 0; }
.ch-pr-gi{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:rgba(10,6,8,.4); border:1px solid rgba(var(--x-rgb),.35); }
.ch-pr-gico{ flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:rgba(var(--x-rgb),.25); border-radius:50%; }
.ch-pr-gt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.ch-pr-gt b{ font-size:13.5px; line-height:18px; font-weight:800; color:var(--x-fg); }
.ch-pr-gt span{ font-size:12.5px; line-height:1.45; color:var(--x-mute); }
/* modes */
.ch-pr-h{ margin:24px 0 0; font-size:12px; line-height:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--x-acc); }
.ch-pr-hp{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--x-mute); }
.ch-pr-modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 0; }
.ch-pr-mode{ padding:14px; border-radius:16px; background:var(--x-surf); border:1px solid var(--x-line); }
.ch-pr-mode.is-secure{ background:linear-gradient(165deg,rgba(var(--x-rgb),.26),var(--x-surf) 70%); border-color:rgba(var(--x-rgb),.7); box-shadow:0 0 24px rgba(var(--x-rgb),.16); }
.ch-pr-mode-tag{ display:inline-block; padding:3px 10px; font-size:11px; line-height:14px; font-weight:800; letter-spacing:.12em; color:var(--x-fg); background:rgba(255,255,255,.08); border-radius:999px; }
.ch-pr-mode.is-secure .ch-pr-mode-tag{ color:#fff; background:var(--x-btn); }
.ch-pr-mode-name{ margin-top:10px; font-size:15px; line-height:20px; font-weight:800; color:var(--x-fg); }
.ch-pr-mode-ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.ch-pr-mode-ul li{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--x-mute); }
.ch-pr-mode-ul svg{ flex:none; margin-top:2px; color:var(--x-acc); }
.ch-pr-fine{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--x-mute); }
/* details (collapsed) */
.ch-pr-acc{ margin:10px 0 0; background:var(--x-surf); border:1px solid var(--x-line); border-radius:16px; overflow:hidden; }
.ch-pr-h + .ch-pr-acc{ margin-top:10px; }
.ch-pr-acc[open]{ border-color:rgba(var(--x-rgb),.55); }
.ch-pr-sum{ display:flex; align-items:center; gap:12px; padding:13px 14px; list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.ch-pr-sum::-webkit-details-marker{ display:none; }
.ch-pr-sum:hover{ background:var(--x-hover); }
.ch-pr-sico{ flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:rgba(var(--x-rgb),.2); border-radius:50%; }
.ch-pr-stt{ flex:1 1 auto; min-width:0; font-size:14.5px; line-height:20px; font-weight:700; color:var(--x-fg); }
.ch-pr-chev{ flex:none; display:flex; color:var(--x-mute); transform:rotate(90deg); transition:transform .2s ease,color .2s ease; }
.ch-pr-acc[open] .ch-pr-chev{ transform:rotate(-90deg); color:var(--x-acc); }
.ch-pr-accb{ padding:0 14px 6px 58px; }
.ch-pr-row{ padding:11px 0; border-top:1px solid var(--x-line); }
.ch-pr-row:first-child{ border-top:0; padding-top:2px; }
.ch-pr-rn{ font-size:14px; line-height:19px; font-weight:700; color:var(--x-fg); }
.ch-pr-rt{ margin-top:3px; font-size:13px; line-height:1.5; color:var(--x-mute); }
@media (max-width:560px){
.ch-pr-head{ padding:14px 10px 12px 16px; }
.ch-pr-body{ padding:2px 14px 16px; }
.ch-pr-foot{ padding:10px 14px 14px; }
.ch-pr-foot .ac-act{ width:100%; }
.ch-pr-hero{ padding:18px 14px 16px; border-radius:18px; }
.ch-pr-par{ font-size:50px; }
.ch-pr-flow{ padding:12px 10px; }
.ch-pr-fn{ padding:8px 10px; }
.ch-pr-grid, .ch-pr-modes{ grid-template-columns:1fr; }
.ch-pr-accb{ padding-left:14px; }
}
@media (prefers-reduced-motion:reduce){ .ch-pr-ep{ animation:none; } .ch-pr-chev{ transition:none; } }
/* protected photo / voice: the three dots in the photo window, the viewer */
.ch-photo{ position:relative; }
.ch-photo-dots, .ch-rec-dots{ flex:none; }
.ch-photo-dots{ position:absolute; top:12px; right:12px; width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-mute); background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-photo-dots:hover{ color:var(--x-fg); background:var(--x-hover); }
.ch-photo-dots:disabled{ opacity:.4; cursor:default; }
.ch-photo-dots:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
.ch-smenu.is-down{ top:54px; right:10px; bottom:auto; width:min(320px,calc(100% - 20px)); max-height:min(62vh,430px); transform-origin:100% 0; }
.ch-pv-text.ch-pv-media{ white-space:normal; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:60px; }
.ch-pv-img{ display:block; max-width:100%; max-height:58vh; object-fit:contain; border-radius:12px; pointer-events:none; -webkit-user-drag:none; }
.ch-pv-cap{ align-self:stretch; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.ch-pv-st{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 8px; font-size:14px; text-align:center; color:var(--x-mute); }
.ch-pv-voice{ align-self:stretch; display:flex; align-items:center; gap:12px; }
.ch-pv-play{ flex:none; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-btn-fg); background:var(--x-btn); border:0; border-radius:50%; cursor:pointer; }
.ch-pv-atrack{ flex:1 1 auto; height:6px; overflow:hidden; background:#2f2f35; border-radius:9999px; }
.ch-pv-atrack i{ display:block; height:100%; width:0; background:var(--x-acc); }
.ch-pv-atime{ flex:none; min-width:38px; font-size:13px; font-variant-numeric:tabular-nums; color:var(--x-mute); }
/* ---------- avatar / name that open the person's profile: quiet hover, no underline ---------- */
.ch-prof-link{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-prof-link:focus{ outline:none; }
.ch-prof-link:focus-visible{ outline:2px solid var(--x-acc, #eff3f4); outline-offset:2px; border-radius:8px; }
.ch-ava.ch-prof-link:focus-visible{ border-radius:50%; }
/* the top arrow (back to the site) exists only on the messenger home screen: inside a chat only the arrow next to the profile remains, so the two can never be mixed up */
.ch-panel.is-chatview .ch-head > .ch-x{ display:none; }
.ch-page .ch-panel.is-chatview .ch-head{ padding-left:calc(16px + env(safe-area-inset-left,0px)); }
/* ===== Telegram-like touch feedback and light motion ===== */
.ch-item{ transition:background .15s ease, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.ch-item:active{ background:rgba(255,255,255,.07); }
.ch-item.is-press{ transform:scale(.965); background:rgba(255,255,255,.07); transition:transform .52s cubic-bezier(.3,0,.5,1), background .52s ease; } /* sinks while the finger is held */
.ch-item.is-held{ transform:scale(.985); background:rgba(255,255,255,.09); box-shadow:inset 3px 0 0 var(--x-acc, var(--x-btn)); animation:chHeld .28s cubic-bezier(.2,.9,.3,1.4); }
@keyframes chHeld{ 0%{ transform:scale(.965); } 55%{ transform:scale(1.012); } 100%{ transform:scale(.985); } }
.ch-pop{ transform-origin:top left; animation:chPopIn .2s cubic-bezier(.2,.9,.3,1.15); }
.ch-pop.is-out{ animation:chPopOut .13s ease forwards; pointer-events:none; }
.ch-pop .ch-pop-i{ animation:chPopItem .22s ease both; }
.ch-pop .ch-pop-i:nth-of-type(2){ animation-delay:.025s; } .ch-pop .ch-pop-i:nth-of-type(3){ animation-delay:.05s; }
.ch-pop .ch-pop-i:nth-of-type(4){ animation-delay:.075s; } .ch-pop .ch-pop-i:nth-of-type(5){ animation-delay:.1s; }
.ch-pop-i{ transition:background .12s ease, transform .1s ease; }
.ch-pop-i:active{ transform:scale(.97); background:var(--x-hover); }
@keyframes chPopIn{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }
@keyframes chPopOut{ to{ opacity:0; transform:scale(.9); } }
@keyframes chPopItem{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.ch-menu, .ch-smenu{ transform-origin:top right; }
.ch-menu{ animation:chPopIn .18s cubic-bezier(.2,.9,.3,1.1); }
.ch-smenu{ transform-origin:bottom right; }
.ch-dlg:not([hidden]){ animation:chFade .18s ease; }
.ch-dlg:not([hidden]) .ch-dlg-card{ animation:chDlgIn .26s cubic-bezier(.2,.9,.3,1.1); }
@keyframes chFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes chDlgIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
.ch-row.is-in{ animation:chMsgIn .22s cubic-bezier(.2,.8,.2,1); transform-origin:0 100%; }
.ch-row.me.is-in{ transform-origin:100% 100%; }
@keyframes chMsgIn{ from{ opacity:0; transform:translateY(10px) scale(.94); } to{ opacity:1; transform:none; } }
.ch-send, .ch-mic, .ch-back, .ch-x, .ch-shield, .ch-pc, .ch-sm-go{ transition:transform .12s ease, background .15s ease, filter .15s ease; -webkit-tap-highlight-color:transparent; }
.ch-send:active:not(:disabled), .ch-back:active, .ch-x:active, .ch-shield:active, .ch-pc:active, .ch-sm-go:active{ transform:scale(.88); }
.ch-bubble{ transition:filter .15s ease, transform .15s ease; }
.ch-row:active > .ch-bubble{ filter:brightness(1.12); }
@media (prefers-reduced-motion:reduce){
.ch-item, .ch-item.is-press, .ch-item.is-held, .ch-pop, .ch-pop .ch-pop-i, .ch-menu, .ch-dlg:not([hidden]), .ch-dlg:not([hidden]) .ch-dlg-card, .ch-row.is-in{ animation:none !important; transition:none !important; }
.ch-item.is-press{ transform:none; }
}
/* ===== message menu (hold / right-click), swipe-to-reply, reply bar, quotes ===== */
.ch-msgs .ch-row{ position:relative; touch-action:pan-y; }
.ch-msgs .ch-bubble{ -webkit-touch-callout:none; transition:transform .16s cubic-bezier(.2,.8,.2,1), filter .15s ease, box-shadow .2s ease, opacity .2s ease; }
@media (pointer:coarse){ .ch-msgs .ch-text{ -webkit-user-select:none; user-select:none; } }
.ch-msgs .ch-bubble.is-press{ transform:scale(.97); filter:brightness(1.1); transition:transform .42s cubic-bezier(.3,0,.5,1), filter .42s ease; }
.ch-msgs.is-ctx .ch-row:not(.is-ctx-on){ opacity:.42; transition:opacity .2s ease; }
.ch-row.is-ctx-on > .ch-bubble{ transform:scale(1.035); box-shadow:0 10px 30px rgba(0,0,0,.55); animation:chLift .22s cubic-bezier(.2,.9,.3,1.3); z-index:2; }
@keyframes chLift{ from{ transform:scale(.97); } to{ transform:scale(1.035); } }
.ch-row.is-del{ animation:chDel .22s ease forwards; pointer-events:none; }
@keyframes chDel{ to{ opacity:0; transform:scale(.82); } }
.ch-pop-i.is-armed{ color:#fff; background:var(--x-red); }
.ch-pop-i.is-armed:hover{ background:var(--x-red); }
.ch-swipe-i{ position:absolute; top:50%; width:32px; height:32px; margin-top:0; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:rgba(255,255,255,.08); border-radius:50%; opacity:0; transform:translateY(-50%) scale(.6); transition:background .15s ease, color .15s ease; pointer-events:none; }
.ch-swipe-i.at-right{ right:4px; } .ch-swipe-i.at-left{ left:4px; }
.ch-swipe-i.is-on{ color:#fff; background:var(--x-btn); }
.ch-quote{ display:flex; flex-direction:column; gap:1px; margin:0 0 5px; padding:3px 8px; border-left:3px solid var(--x-acc); border-radius:4px; background:rgba(255,255,255,.06); min-width:0; }
.ch-quote b{ font-size:12.5px; font-weight:700; color:var(--x-acc); }
.ch-quote span{ font-size:13px; line-height:1.3; color:var(--x-mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ch-row.me .ch-quote{ border-left-color:rgba(255,255,255,.75); background:rgba(0,0,0,.18); }
.ch-row.me .ch-quote b{ color:#fff; } .ch-row.me .ch-quote span{ color:rgba(255,255,255,.78); }
.ch-replybar{ overflow:hidden; display:flex; align-items:center; gap:10px; padding:7px 8px 7px 14px; border-top:1px solid var(--x-line); background:var(--x-surf); animation:chBarIn .2s cubic-bezier(.2,.8,.2,1); }
.ch-replybar.is-out{ animation:chBarOut .16s ease forwards; }
.ch-replybar-i{ flex:none; display:flex; color:var(--x-acc); }
.ch-replybar-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding-left:9px; border-left:3px solid var(--x-acc); }
.ch-replybar-t b{ font-size:13px; font-weight:700; color:var(--x-acc); }
.ch-replybar-t span{ font-size:13px; color:var(--x-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-replybar-x{ flex:none; width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-mute); background:transparent; border:0; border-radius:50%; cursor:pointer; transition:transform .12s ease, background .15s ease; }
.ch-replybar-x:hover{ background:var(--x-hover); color:var(--x-fg); } .ch-replybar-x:active{ transform:scale(.86); }
@keyframes chBarIn{ from{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; } to{ opacity:1; max-height:64px; } }
@keyframes chBarOut{ from{ max-height:64px; } to{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; } }
@media (prefers-reduced-motion:reduce){
.ch-row.is-ctx-on > .ch-bubble, .ch-row.is-del, .ch-replybar, .ch-replybar.is-out{ animation:none !important; }
.ch-msgs .ch-bubble, .ch-msgs .ch-bubble.is-press{ transition:none !important; }
}
/* ===== smoothness: screens slide instead of snapping, nothing is re-laid out by the touch effects ===== */
.ch-msgs{ scroll-behavior:auto; overflow-anchor:none; }
.ch-comp, .ch-compwrap{ transition:none; }
.ch-ta{ transition:none; }
@media (max-width:720px){
.ch-layout[data-view="chat"] > .ch-main{ animation:chSlideIn .26s cubic-bezier(.2,.8,.2,1); }
.ch-layout[data-view="list"] > .ch-side{ animation:chSlideBack .24s cubic-bezier(.2,.8,.2,1); }
}
@keyframes chSlideIn{ from{ opacity:0; transform:translate3d(28px,0,0); } to{ opacity:1; transform:none; } }
@keyframes chSlideBack{ from{ opacity:0; transform:translate3d(-20px,0,0); } to{ opacity:1; transform:none; } }
.ch-msgs .ch-row, .ch-item, .ch-msgs .ch-bubble{ backface-visibility:hidden; }
@media (prefers-reduced-motion:reduce){
.ch-layout[data-view="chat"] > .ch-main, .ch-layout[data-view="list"] > .ch-side{ animation:none !important; }
}
/* ===== one soft look for every menu: header menu, message menu, send options ===== */
.ch-menu, .ch-pop, .ch-smenu{
--m-tint:rgba(var(--x-rgb),.14);
background:rgba(26,26,30,.88);
background-image:linear-gradient(180deg, rgba(var(--x-rgb),.10), rgba(var(--x-rgb),0) 52%);
-webkit-backdrop-filter:blur(22px) saturate(1.25); backdrop-filter:blur(22px) saturate(1.25);
border:1px solid rgba(255,255,255,.075); border-radius:20px;
box-shadow:0 22px 56px rgba(0,0,0,.55), 0 3px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.ch-menu{ min-width:236px; padding:7px; gap:2px; }
.ch-pop{ min-width:224px; padding:7px; }
.ch-smenu{ padding:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.ch-menu-i, .ch-pop-i, .ch-sm{ border-radius:14px; transition:background .15s ease, transform .12s ease, color .15s ease; }
.ch-menu-i{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; font-size:14.5px; font-weight:600; letter-spacing:.005em; }
.ch-pop-i{ gap:12px; padding:10px 12px; font-size:14.5px; letter-spacing:.005em; }
.ch-menu-i:hover, .ch-menu-i:focus-visible, .ch-pop-i:hover, .ch-pop-i:focus-visible, .ch-sm:hover, .ch-sm:focus-visible, .ch-sm.is-open{ background:var(--m-tint); outline:0; }
.ch-menu-i:active, .ch-pop-i:active, .ch-sm:active{ transform:scale(.975); }
/* icons sit in soft round tiles */
.ch-menu-ic, .ch-sm-i{ flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--x-acc); background:rgba(var(--x-rgb),.16); border-radius:50%; }
.ch-menu-tx{ flex:1 1 auto; min-width:0; }
.ch-pop-i svg{ flex:none; box-sizing:content-box; width:16px; height:16px; padding:8px; color:var(--x-acc); background:rgba(var(--x-rgb),.16); border-radius:50%; }
.ch-sm-i{ width:34px; height:34px; }
/* destructive actions: calm red, not a block of alarm */
.ch-menu-i.danger, .ch-pop-i.danger{ color:#ff7a85; }
.ch-menu-i.danger .ch-menu-ic, .ch-pop-i.danger svg{ color:#ff7a85; background:rgba(244,33,46,.14); }
.ch-menu-i.danger:hover, .ch-menu-i.danger:focus-visible, .ch-pop-i.danger:hover, .ch-pop-i.danger:focus-visible{ background:rgba(244,33,46,.12); }
.ch-pop-i.is-armed, .ch-pop-i.is-armed:hover{ color:#fff; background:rgba(244,33,46,.78); }
.ch-pop-i.is-armed svg{ color:#fff; background:rgba(255,255,255,.2); }
.ch-menu-sep, .ch-pop-sep{ height:1px; margin:6px 10px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); }
/* send options */
.ch-sm{ padding:9px 10px; gap:13px; }
.ch-sm-t b{ font-size:14.5px; font-weight:700; }
.ch-sm-t span{ font-size:12.5px; }
.ch-sm-h{ margin:12px 12px 4px; font-size:10.5px; letter-spacing:.09em; color:rgba(255,255,255,.4); }
.ch-sm-n{ margin:10px 12px 4px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); font-size:11.5px; color:rgba(255,255,255,.4); }
.ch-sm-c{ color:rgba(255,255,255,.35); }
.ch-sm-chips{ margin:2px 12px 10px 59px; gap:7px; }
.ch-pc{ padding:6px 13px; border:0; background:rgba(255,255,255,.07); color:var(--x-fg); transition:background .15s ease, transform .12s ease; }
.ch-pc:hover{ background:rgba(var(--x-rgb),.28); } .ch-pc:active{ transform:scale(.94); }
.ch-pc.is-on{ background:var(--x-btn); }
.ch-sm-own input{ border:0; background:rgba(255,255,255,.07); border-radius:10px; padding:6px 9px; }
.ch-sm-go{ padding:6px 14px; }
.ch-psw{ margin:4px 0 0; padding:11px 12px; gap:12px; border:0; border-radius:16px; background:rgba(255,255,255,.04); transition:background .15s ease; }
.ch-psw:hover{ background:rgba(255,255,255,.07); }
.ch-po-t span{ font-size:12.5px; }
.ch-psw-k{ width:40px; height:24px; padding:3px; background:rgba(255,255,255,.16); transition:background .2s ease; }
.ch-psw-k i{ width:18px; height:18px; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .22s cubic-bezier(.3,.9,.3,1.2); }
.ch-psw.is-on .ch-psw-k i{ transform:translateX(16px); }
@media (prefers-reduced-transparency:reduce){ .ch-menu, .ch-pop, .ch-smenu{ background:#1c1c20; -webkit-backdrop-filter:none; backdrop-filter:none; } }
/* =====================================================================
v28 — menus that stay on screen, no scrollbar in the message field,
several photos (albums), photo viewer, big windows as their own tab
===================================================================== */
/* ---- menus: placed by chat.js inside the visible part of the screen, scroll inside (no scrollbar) when there is little room ---- */
.ch-menu.is-fx, .ch-smenu.is-fx, .ch-pop{ position:fixed; z-index:300; margin:0; max-width:calc(100vw - 16px); box-sizing:border-box; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
.ch-menu.is-fx{ display:flex; flex-direction:column; top:0; left:0; right:auto; }
.ch-smenu.is-fx{ top:0; left:0; right:auto; bottom:auto; width:min(330px,calc(100vw - 16px)); max-height:none; }
.ch-menu.is-fx::-webkit-scrollbar, .ch-smenu.is-fx::-webkit-scrollbar, .ch-pop::-webkit-scrollbar, .ch-emo::-webkit-scrollbar{ display:none; width:0; height:0; }
.ch-pop{ overflow-y:auto; }
.ch-emo{ scrollbar-width:none; overscroll-behavior:contain; }
/* ---- message field: it grows with the text, and never shows a scrollbar ---- */
.ch-ta, .ch-modal .ch-ta, .ch-photo-cap{ scrollbar-width:none; -ms-overflow-style:none; overflow-y:hidden; }
.ch-ta::-webkit-scrollbar, .ch-photo-cap::-webkit-scrollbar{ display:none; width:0; height:0; }
/* ---- several photos in the send window ---- */
.ch-photo{ width:min(100%,460px); max-height:100%; display:flex; flex-direction:column; }
.ch-ps{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 0; max-height:min(52vh,420px); overflow-y:auto; scrollbar-width:none; border-radius:12px; }
.ch-ps::-webkit-scrollbar{ display:none; }
.ch-ps.ps-1{ grid-template-columns:1fr; }
.ch-ps-i{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--x-field); border-radius:10px; }
.ch-ps.ps-1 .ch-ps-i{ aspect-ratio:auto; max-height:46vh; background:transparent; }
.ch-ps.is-odd:not(.ps-1) .ch-ps-i:first-child{ grid-column:1/-1; aspect-ratio:16/10; }
.ch-ps-i img{ display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.ch-ps.ps-1 .ch-ps-i img{ height:auto; max-height:46vh; object-fit:contain; background:var(--x-field); border-radius:12px; }
.ch-ps-x{ position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.6); border:0; border-radius:50%; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ch-ps-x:hover{ background:rgba(0,0,0,.8); }
.ch-ps-add{ aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:inherit; font-size:13px; font-weight:600; color:var(--x-mute); background:transparent; border:1.5px dashed var(--x-line); border-radius:10px; cursor:pointer; }
.ch-ps-add:hover{ color:var(--x-fg); background:var(--x-hover); }
.ch-ps.ps-1 .ch-ps-add{ aspect-ratio:auto; min-height:56px; flex-direction:row; justify-content:center; margin-top:4px; }
.ch-photo .ch-photo-cap{ flex:none; }
/* ---- photos sent together: one collage bubble ---- */
.ch-alb{ position:relative; flex:none; align-self:flex-start; width:min(78%,340px); padding:1.5px; box-sizing:border-box; color:var(--x-fg); background:var(--x-in); border-radius:18px 18px 18px 4px; overflow:hidden; }
.ch-alb.me{ align-self:flex-end; background:var(--x-btn); border-radius:18px 18px 4px 18px; }
.ch-alb-g{ position:relative; width:100%; }
.ch-alb-g > .ch-row{ position:absolute; display:block; box-sizing:border-box; padding:1.5px; min-width:0; }
.ch-alb-g > .ch-row > .ch-bubble{ width:100%; height:100%; max-width:none; padding:0; background:transparent; border-radius:0; box-shadow:none; }
.ch-alb .ch-md-b.is-img .ch-img{ width:100% !important; height:100% !important; max-width:none; aspect-ratio:auto !important; min-height:0; border-radius:var(--a-tl,4px) var(--a-tr,4px) var(--a-br,4px) var(--a-bl,4px); }
/* v35: the corners of the photos that touch the edge of the bubble are concentric with it (bubble radius 18px minus the 3px frame = 15px), so nothing is cut by the bubble's rounding; the tail corner is nearly square, like the bubble */
.ch-alb .ch-md-cap{ display:none; }
.ch-alb .ch-md-b .ch-meta{ display:none; }
.ch-alb-g > .ch-row:last-child .ch-md-b .ch-meta{ display:flex; position:absolute; right:8px; bottom:8px; margin:0; padding:2px 8px; color:#fff; background:rgba(0,0,0,.55); border-radius:10px; }
.ch-alb-g > .ch-row:last-child .ch-md-b .ch-tick{ color:#fff; }
.ch-alb > .ch-alb-cap{ padding:6px 9px 6px; font-size:var(--ch-fs,15px); line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.ch-alb-g > .ch-row.is-ctx-on > .ch-bubble{ transform:none; box-shadow:none; }
.ch-alb-g > .ch-row.is-ctx-on .ch-img{ outline:2px solid var(--x-acc); outline-offset:-2px; }
.ch-alb-g > .ch-row.is-in{ animation:none; }
@media (max-width:420px){ .ch-alb{ width:min(88%,340px); } }
/* ---- photo viewer ---- */
.ch-vw{ position:absolute; inset:0; z-index:210; display:flex; flex-direction:column; background:#000; color:#fff; outline:0; -webkit-user-select:none; user-select:none; animation:chFade .16s ease; }
.ch-vw-top{ position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:10px; padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px 14px; background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0)); }
.ch-vw-who{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
.ch-vw-av{ flex:none; display:flex; }
.ch-vw-av .ch-ava{ width:38px; height:38px; font-size:15px; }
.ch-vw-wt{ min-width:0; }
.ch-vw-n{ font-size:15px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-vw-t{ font-size:12.5px; line-height:1.25; color:rgba(255,255,255,.65); white-space:nowrap; }
.ch-vw-c{ flex:none; padding:0 6px; font-size:13px; font-weight:600; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; }
.ch-vw-a{ flex:none; display:flex; gap:2px; }
.ch-vw-b{ width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:transparent; border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .12s ease; }
.ch-vw-b:hover{ background:rgba(255,255,255,.14); }
.ch-vw-b:active{ transform:scale(.9); }
.ch-vw-b:focus-visible, .ch-vw-nav:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
.ch-vw-stage{ position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:default; }
.ch-vw-img{ display:block; max-width:100%; max-height:100%; object-fit:contain; opacity:0; -webkit-user-drag:none; will-change:transform; }
.ch-vw-sp{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ch-vw-sp[hidden]{ display:none; }
.ch-vw-err{ padding:10px 16px; font-size:14px; font-weight:600; color:rgba(255,255,255,.8); background:rgba(255,255,255,.1); border-radius:999px; }
.ch-vw-cap{ position:relative; z-index:3; flex:none; max-height:28%; overflow-y:auto; scrollbar-width:none; padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px)); font-size:15px; line-height:1.45; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0)); -webkit-user-select:text; user-select:text; }
.ch-vw-cap[hidden]{ display:none; }
.ch-vw-nav{ position:absolute; top:50%; z-index:3; width:46px; height:46px; margin-top:-23px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.45); border:0; border-radius:50%; cursor:pointer; opacity:0; transition:opacity .15s ease, background .15s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ch-vw-nav[hidden]{ display:none; }
.ch-vw-nav.is-prev{ left:14px; }
.ch-vw-nav.is-next{ right:14px; transform:scaleX(-1); }
.ch-vw:hover .ch-vw-nav{ opacity:1; }
.ch-vw-nav:hover{ background:rgba(0,0,0,.7); }
@media (pointer:coarse){ .ch-vw-nav{ display:none !important; } }
/* forward: pick a chat */
.ch-fw{ position:absolute; inset:0; z-index:6; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.6); animation:chFade .16s ease; }
.ch-fw-card{ width:min(100%,460px); max-height:min(70%,520px); display:flex; flex-direction:column; background:var(--x-surf); border:1px solid var(--x-line); border-radius:20px 20px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.5); animation:chFwIn .24s cubic-bezier(.2,.8,.2,1); }
@keyframes chFwIn{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.ch-fw-h{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px 8px 18px; border-bottom:1px solid var(--x-line); }
.ch-fw-t{ font-size:16px; font-weight:800; color:var(--x-fg); }
.ch-fw-l{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px)); }
.ch-fw-l::-webkit-scrollbar{ display:none; }
.ch-fw-r{ width:100%; display:flex; align-items:center; gap:12px; padding:9px 12px; font:inherit; text-align:left; color:var(--x-fg); background:transparent; border:0; border-radius:14px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
.ch-fw-r:hover{ background:var(--x-hover); }
.ch-fw-r:disabled{ opacity:.75; cursor:default; }
.ch-fw-r .ch-ava{ flex:none; width:40px; height:40px; font-size:16px; }
.ch-fw-n{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; }
.ch-fw-s{ flex:none; font-size:12.5px; color:var(--x-mute); }
.ch-fw-r.is-ok .ch-fw-s{ color:var(--x-acc); font-weight:700; }
.ch-fw-e{ padding:22px 12px; text-align:center; font-size:14px; color:var(--x-mute); }
@media (prefers-reduced-motion:reduce){ .ch-vw, .ch-fw, .ch-fw-card{ animation:none; } .ch-vw-img{ transition:none !important; } }
/* ---- big windows as their own browser tab (/messenger?w=...): the window fills the page, the chat is not drawn ---- */
html.ch-win .ch-head, html.ch-win .ch-layout{ display:none; }
html.ch-win .ch-panel{ background:var(--x-bg); }
html.ch-win .ch-dlg{ padding:0; align-items:stretch; justify-content:center; background:var(--x-bg); animation:none; }
html.ch-win .ch-dlg .ch-dlg-card{ width:min(100%,760px); max-width:760px; height:100%; max-height:none; border-radius:0; border-top:0; border-bottom:0; box-shadow:none; animation:none; }
html.ch-win .ch-dlg .ch-set{ height:100%; }
html.ch-win .ch-dlg .ch-set-head, html.ch-win .ch-dlg .ch-pr-head{ padding-top:env(safe-area-inset-top,0px); min-height:calc(54px + env(safe-area-inset-top,0px)); }
html.ch-win .ch-dlg .ch-pr{ border-radius:0; }
html.ch-win .ch-dlg .ch-pr-body{ padding-left:22px; padding-right:22px; }
@media (max-width:720px){ html.ch-win .ch-dlg .ch-dlg-card{ border-left:0; border-right:0; } }
/* the account / profile window of a tab */
html.ch-win .ac-modal{ padding:0; align-items:stretch; justify-content:center; }
html.ch-win .ac-backdrop{ opacity:1; background:#0e0e10; }
html.ch-win .ac-panel, html.ch-win .ac-panel.is-profile{ width:min(100%,680px); height:100%; max-height:none; border-radius:0; border-top:0; border-bottom:0; box-shadow:none; }
html.ch-win .ac-modal.is-peer{ align-items:stretch; padding:0; }
@media (max-width:720px){ html.ch-win .ac-panel, html.ch-win .ac-panel.is-profile{ border-left:0; border-right:0; } }
/* ---- emoji picker: category tabs + grid ---- */
.ch-emo{ display:flex; flex-direction:column; grid-template-columns:none; padding:0; max-width:400px; overflow:hidden; }
.ch-emo-tabs{ flex:none; display:flex; gap:2px; padding:6px 6px 4px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--x-line); }
.ch-emo-tabs::-webkit-scrollbar{ display:none; }
.ch-emo-t{ flex:none; width:36px; height:34px; padding:0; font-size:19px; line-height:1; background:transparent; border:0; border-radius:10px; cursor:pointer; opacity:.55; transition:opacity .15s ease, background .15s ease; -webkit-tap-highlight-color:transparent; }
.ch-emo-t:hover{ opacity:.9; }
.ch-emo-t.is-on{ opacity:1; background:rgba(var(--x-rgb),.22); }
.ch-emo-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:6px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; content-visibility:auto; }
.ch-emo-grid::-webkit-scrollbar{ display:none; }
.ch-emo-b{ font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
/* ---- complete emoji picker: search, tones, flags ---- */
@font-face{ font-family:'PelFlags'; src:url('/fonts/flags.woff') format('woff'); unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0020-E007F; font-display:swap; }
html.ch-flagfont .ch-emo-b, html.ch-flagfont .ch-emo-t, html.ch-flagfont .ch-text, html.ch-flagfont .ch-md-cap, html.ch-flagfont .ch-ta, html.ch-flagfont .ch-alb-cap{ font-family:'PelFlags',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Segoe UI Emoji',sans-serif; }
.ch-emo{ position:absolute; max-width:400px; }
.ch-emo-q{ flex:none; margin:8px 8px 2px; padding:8px 12px; box-sizing:border-box; font:inherit; font-size:15px; color:var(--x-fg); background:var(--x-field); border:1px solid var(--x-line); border-radius:12px; outline:0; -webkit-appearance:none; appearance:none; }
.ch-emo-q:focus{ border-color:var(--x-btn); }
.ch-emo-q::-webkit-search-cancel-button{ display:none; }
.ch-emo-grid{ position:relative; contain:content; }
.ch-emo-b{ contain:layout paint; }
.ch-emo-msg{ grid-column:1/-1; padding:26px 10px; text-align:center; font-size:14px; color:var(--x-mute); }
.ch-emo-tone{ position:absolute; z-index:3; display:flex; gap:2px; padding:5px; background:var(--x-surf); border:1px solid var(--x-line); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.55); animation:chPopIn .14s ease-out; }
.ch-emo-tone .ch-emo-b{ width:38px; flex:none; }
/* ===== v34: silk — one calm motion language (Telegram Web feel): same easing everywhere, only transform/opacity, no overshoot ===== */
.ch-modal{ --ease:cubic-bezier(.22,.8,.24,1); --ease-io:cubic-bezier(.4,0,.2,1); --t-fast:.14s; --t-med:.24s; --t-slow:.34s; }
/* the window follows the on-screen keyboard with a glide (class is-kb is set only while the keyboard opens / closes) */
/* v35: the gap under the message field (home indicator) is driven by --kb-safe (1 = no keyboard, 0 = keyboard up), set by chat.js in the same frame as the window height. A CSS transition here made the field slide down 300ms after the window was cut = the jump. */
.ch-page .ch-comp, .ch-page .ch-side-foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px) * var(--kb-safe,1)); transition:none; }
.ch-page .ch-panel, .ch-page .ch-layout, .ch-page .ch-main{ min-height:0; }
/* panel, dialogs, menus: soft entrance without a bounce */
.ch-panel{ transition:opacity var(--t-med) var(--ease-io), transform var(--t-slow) var(--ease); will-change:transform, opacity; }
.ch-backdrop{ transition:opacity var(--t-med) var(--ease-io); }
.ch-dlg:not([hidden]){ animation:chFade .2s var(--ease-io) both; }
.ch-dlg:not([hidden]) .ch-dlg-card{ animation:chDlgIn .3s var(--ease) both; will-change:transform, opacity; }
@keyframes chDlgIn{ from{ opacity:0; transform:translate3d(0,10px,0) scale(.965); } to{ opacity:1; transform:none; } }
.ch-menu, .ch-smenu, .ch-pop, .ch-emo{ animation:chPopIn .2s var(--ease) both; will-change:transform, opacity; }
.ch-pop .ch-pop-i{ animation:chPopItem .24s var(--ease) both; }
.ch-emo{ transform-origin:bottom left; }
@keyframes chPopIn{ from{ opacity:0; transform:translate3d(0,6px,0) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes chPopOut{ to{ opacity:0; transform:scale(.96); } }
@keyframes chPopItem{ from{ opacity:0; transform:translate3d(0,3px,0); } to{ opacity:1; transform:none; } }
.ch-pop.is-out{ animation:chPopOut .14s var(--ease-io) forwards; }
/* messages and screens */
.ch-row.is-in{ animation:chMsgIn .3s var(--ease) both; will-change:transform, opacity; }
@keyframes chMsgIn{ from{ opacity:0; transform:translate3d(0,12px,0) scale(.96); } to{ opacity:1; transform:none; } }
.ch-row.is-del{ animation:chDel .24s var(--ease-io) forwards; }
@media (max-width:720px){
.ch-layout[data-view="chat"] > .ch-main{ animation:chSlideIn .32s var(--ease) both; }
.ch-layout[data-view="list"] > .ch-side{ animation:chSlideBack .3s var(--ease) both; }
}
@keyframes chSlideIn{ from{ opacity:.4; transform:translate3d(32px,0,0); } to{ opacity:1; transform:none; } }
@keyframes chSlideBack{ from{ opacity:.4; transform:translate3d(-24px,0,0); } to{ opacity:1; transform:none; } }
.ch-replybar{ animation:chBarIn .26s var(--ease) both; }
.ch-replybar.is-out{ animation:chBarOut .2s var(--ease-io) forwards; }
/* touch feedback: the same short curve for every press, released smoothly */
.ch-item{ transition:background var(--t-fast) var(--ease-io), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease-io); }
.ch-send, .ch-mic, .ch-back, .ch-x, .ch-shield, .ch-pc, .ch-sm-go, .ch-pbtn, .ch-menu-i, .ch-sm, .ch-emo-b, .ch-emo-t, .ch-ps-x{ transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease-io), color var(--t-fast) var(--ease-io), opacity var(--t-fast) var(--ease-io), filter var(--t-fast) var(--ease-io); -webkit-tap-highlight-color:transparent; }
.ch-emo-b:active{ transform:scale(.86); }
.ch-msgs .ch-bubble{ transition:transform var(--t-med) var(--ease), filter var(--t-fast) var(--ease-io), box-shadow var(--t-med) var(--ease-io), opacity var(--t-med) var(--ease-io); }
.ch-msgs.is-ctx .ch-row:not(.is-ctx-on){ transition:opacity var(--t-med) var(--ease-io); }
.ch-ta{ transition:border-color var(--t-fast) var(--ease-io); }
.ch-ps-i{ animation:chFade .24s var(--ease-io) both; }
/* long lists and the picture area scroll on their own layer */
.ch-msgs, .ch-side-body, .ch-emo-grid{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
@media (prefers-reduced-motion:reduce){
.ch-page .ch-comp{ transition:none !important; }
.ch-menu, .ch-smenu, .ch-pop, .ch-emo, .ch-dlg:not([hidden]), .ch-dlg:not([hidden]) .ch-dlg-card, .ch-row.is-in, .ch-ps-i, .ch-replybar{ animation:none !important; }
}
.ch-page .ch-panel{ will-change:auto; }
/* v34: the messages are a flex column: nothing in it may shrink (an album has overflow:hidden and was squashed to fit the window, so the photos were cut and the list could not scroll) */
.ch-msgs > *{ flex-shrink:0; }
/* ---------- the messenger is the home page: sign-in gate + official PELATRA Star Hunt channel ---------- */
.ch-page .ch-head{ padding-left:calc(16px + env(safe-area-inset-left,0px)); }
.ch-gate-logo{ width:72px; height:72px; object-fit:contain; margin-bottom:4px; }
.ch-chan-ava{ background:linear-gradient(160deg,#ffe08a,#e39a22) !important; color:#fff !important; border:1px solid rgba(255,198,26,.8) !important; display:flex; align-items:center; justify-content:center; }
.ch-chan-ava svg{ width:55%; height:55%; filter:drop-shadow(0 1px 2px rgba(120,60,0,.4)); }
.ch-chan .ch-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-chan-view{ background:transparent; }
.ch-chan-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 14px; display:flex; flex-direction:column; justify-content:flex-start; }
.ch-chan-post{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:4px; }
.ch-chan-bub{ background:var(--x-in); color:var(--x-fg); border-radius:6px 18px 18px 18px; padding:6px 6px 12px; overflow:hidden; }
.ch-chan-bub p{ margin:8px 10px 0; font-size:var(--ch-fs,15px); line-height:1.5; overflow-wrap:anywhere; }
.ch-chan-hero{ display:flex; align-items:center; justify-content:center; height:132px; border-radius:14px 14px 8px 8px; color:#ffd76a; background:radial-gradient(circle at 50% 55%,rgba(255,200,80,.28),transparent 62%),linear-gradient(160deg,#1d1426,#0c0a12); }
.ch-chan-hero svg{ filter:drop-shadow(0 0 16px rgba(255,200,80,.6)); animation:chStarPulse 3.6s ease-in-out infinite; }
@keyframes chStarPulse{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.08) rotate(6deg); } }
@media (prefers-reduced-motion:reduce){ .ch-chan-hero svg{ animation:none; } }
.ch-chan-h{ margin:12px 10px 0; font-size:17px; font-weight:800; letter-spacing:.02em; }
.ch-chan-kb{ display:flex; }
.ch-chan-btn{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 14px; font:inherit; font-size:14.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.1); border:0; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .12s ease; }
.ch-chan-btn:hover, .ch-chan-btn:focus-visible{ background:rgba(255,255,255,.17); outline:0; }
.ch-chan-btn:active{ transform:scale(.98); }
.ch-chan-foot{ flex:none; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:13px; color:var(--x-mute); border-top:1px solid var(--x-line); background:var(--x-surf); }
/* ---------- Saved messages (chat with yourself) + the profile button in the header ---------- */
.ch-saved-ava{ background:linear-gradient(160deg,#5aa9ff,#2f6fd6) !important; color:#fff !important; border:1px solid rgba(120,180,255,.6) !important; display:flex; align-items:center; justify-content:center; }
.ch-saved-ava svg{ width:52%; height:52%; filter:drop-shadow(0 1px 2px rgba(0,30,90,.4)); }
.ch-saved-row .ch-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-saved-view{ background:transparent; }
.ch-sv-row .ch-bubble{ -webkit-touch-callout:none; cursor:default; }
.ch-sv-row .ch-bubble:focus-visible{ outline:2px solid var(--x-acc); outline-offset:2px; }
.ch-sv-row .ch-text{ white-space:pre-wrap; overflow-wrap:anywhere; }
.ch-prof-btn{ margin-left:2px; }
/* chats moved with the mouse */
.ch-list.is-dragging{ -webkit-user-select:none; user-select:none; cursor:grabbing; }
.ch-item.is-drag{ position:relative; z-index:5; transition:none !important; cursor:grabbing; box-shadow:0 8px 24px rgba(0,0,0,.45); background:var(--x-surf); border-radius:12px; opacity:.96; }
/* ---------- v53: more themes, accent colours and chat backgrounds ---------- */
.ch-modal[data-theme="midnight"]{ --x-bg:#080c18; --x-surf:#0c1122; --x-line:#1a2238; --x-in:#172036; --x-field:#0f1528; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="midnight"]{ --x-bg:#080c18; --x-surf:#0c1122; --x-line:#1a2238; --x-in:#172036; --x-field:#0f1528; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="ocean"]{ --x-bg:#07131a; --x-surf:#0a1a22; --x-line:#14303c; --x-in:#123140; --x-field:#0b1f29; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="ocean"]{ --x-bg:#07131a; --x-surf:#0a1a22; --x-line:#14303c; --x-in:#123140; --x-field:#0b1f29; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="forest"]{ --x-bg:#08120d; --x-surf:#0b1711; --x-line:#163024; --x-in:#14291d; --x-field:#0d1d15; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="forest"]{ --x-bg:#08120d; --x-surf:#0b1711; --x-line:#163024; --x-in:#14291d; --x-field:#0d1d15; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="plum"]{ --x-bg:#120a16; --x-surf:#170d1c; --x-line:#2e1a36; --x-in:#2a1a33; --x-field:#1d1024; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="plum"]{ --x-bg:#120a16; --x-surf:#170d1c; --x-line:#2e1a36; --x-in:#2a1a33; --x-field:#1d1024; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="mocha"]{ --x-bg:#130e0a; --x-surf:#19120d; --x-line:#33261c; --x-in:#2c2118; --x-field:#1f1710; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="mocha"]{ --x-bg:#130e0a; --x-surf:#19120d; --x-line:#33261c; --x-in:#2c2118; --x-field:#1f1710; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="slate"]{ --x-bg:#0f1216; --x-surf:#14181d; --x-line:#242a32; --x-in:#20262e; --x-field:#181d23; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="slate"]{ --x-bg:#0f1216; --x-surf:#14181d; --x-line:#242a32; --x-in:#20262e; --x-field:#181d23; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-theme="crimson"]{ --x-bg:#130809; --x-surf:#190b0d; --x-line:#351a1d; --x-in:#2d1a1c; --x-field:#200f11; --x-hover:rgba(255,255,255,.05); }
.ac-modal[data-theme="crimson"]{ --x-bg:#130809; --x-surf:#190b0d; --x-line:#351a1d; --x-in:#2d1a1c; --x-field:#200f11; --x-hover:rgba(255,255,255,.05); }
.ch-modal[data-accent="rose"], .ch-btn[data-accent="rose"]{ --x-btn:#d6457a; --x-btn-h:#dc5e8c; --x-rgb:214,69,122; --x-out:#cb2d66; --x-acc:#e382a5; --x-blue:#e382a5; }
.ac-modal[data-accent="rose"]{ --x-btn:#d6457a; --x-btn-h:#dc5e8c; --x-rgb:214,69,122; --x-out:#cb2d66; --x-acc:#e382a5; --x-blue:#e382a5; }
.ch-modal[data-accent="red"], .ch-btn[data-accent="red"]{ --x-btn:#c93a3a; --x-btn-h:#d05252; --x-rgb:201,58,58; --x-out:#af3030; --x-acc:#de8787; --x-blue:#de8787; }
.ac-modal[data-accent="red"]{ --x-btn:#c93a3a; --x-btn-h:#d05252; --x-rgb:201,58,58; --x-out:#af3030; --x-acc:#de8787; --x-blue:#de8787; }
.ch-modal[data-accent="orange"], .ch-btn[data-accent="orange"]{ --x-btn:#d4691f; --x-btn-h:#e17931; --x-rgb:212,105,31; --x-out:#b55a1a; --x-acc:#eba87a; --x-blue:#eba87a; }
.ac-modal[data-accent="orange"]{ --x-btn:#d4691f; --x-btn-h:#e17931; --x-rgb:212,105,31; --x-out:#b55a1a; --x-acc:#eba87a; --x-blue:#eba87a; }
.ch-modal[data-accent="teal"], .ch-btn[data-accent="teal"]{ --x-btn:#17958f; --x-btn-h:#1bb0a8; --x-rgb:23,149,143; --x-out:#127671; --x-acc:#7aebe5; --x-blue:#7aebe5; }
.ac-modal[data-accent="teal"]{ --x-btn:#17958f; --x-btn-h:#1bb0a8; --x-rgb:23,149,143; --x-out:#127671; --x-acc:#7aebe5; --x-blue:#7aebe5; }
.ch-modal[data-accent="cyan"], .ch-btn[data-accent="cyan"]{ --x-btn:#1f9bc9; --x-btn-h:#29adde; --x-rgb:31,155,201; --x-out:#1a83aa; --x-acc:#7acceb; --x-blue:#7acceb; }
.ac-modal[data-accent="cyan"]{ --x-btn:#1f9bc9; --x-btn-h:#29adde; --x-rgb:31,155,201; --x-out:#1a83aa; --x-acc:#7acceb; --x-blue:#7acceb; }
.ch-modal[data-accent="lime"], .ch-btn[data-accent="lime"]{ --x-btn:#6fa81f; --x-btn-h:#80c224; --x-rgb:111,168,31; --x-out:#5b8a19; --x-acc:#bbe77e; --x-blue:#bbe77e; }
.ac-modal[data-accent="lime"]{ --x-btn:#6fa81f; --x-btn-h:#80c224; --x-rgb:111,168,31; --x-out:#5b8a19; --x-acc:#bbe77e; --x-blue:#bbe77e; }
.ch-modal[data-accent="pink"], .ch-btn[data-accent="pink"]{ --x-btn:#c24fb5; --x-btn-h:#ca66bf; --x-rgb:194,79,181; --x-out:#b03da3; --x-acc:#d88dcf; --x-blue:#d88dcf; }
.ac-modal[data-accent="pink"]{ --x-btn:#c24fb5; --x-btn-h:#ca66bf; --x-rgb:194,79,181; --x-out:#b03da3; --x-acc:#d88dcf; --x-blue:#d88dcf; }
.ch-modal[data-accent="indigo"], .ch-btn[data-accent="indigo"]{ --x-btn:#4a57cf; --x-btn-h:#626dd5; --x-rgb:74,87,207; --x-out:#3341c2; --x-acc:#868fdf; --x-blue:#868fdf; }
.ac-modal[data-accent="indigo"]{ --x-btn:#4a57cf; --x-btn-h:#626dd5; --x-rgb:74,87,207; --x-out:#3341c2; --x-acc:#868fdf; --x-blue:#868fdf; }
.ch-modal[data-wall="grid"] .ch-msgs, .ch-modal[data-wall="grid"] .ch-prev, .ch-wtile[data-w="grid"]{ background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:26px 26px; }
.ch-modal[data-wall="lines"] .ch-msgs, .ch-modal[data-wall="lines"] .ch-prev, .ch-wtile[data-w="lines"]{ background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px); background-size:auto; }
.ch-modal[data-wall="stars"] .ch-msgs, .ch-modal[data-wall="stars"] .ch-prev, .ch-wtile[data-w="stars"]{ background-image:radial-gradient(1.4px 1.4px at 20px 30px, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 90px 70px, rgba(255,255,255,.28), transparent), radial-gradient(1.6px 1.6px at 140px 20px, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,.25), transparent), radial-gradient(1.2px 1.2px at 150px 140px, rgba(255,255,255,.3), transparent); background-size:170px 170px; }
.ch-modal[data-wall="aurora"] .ch-msgs, .ch-modal[data-wall="aurora"] .ch-prev, .ch-wtile[data-w="aurora"]{ background-image:radial-gradient(70% 55% at 12% 0%, rgba(var(--x-rgb),.30), transparent 70%), radial-gradient(70% 55% at 95% 100%, rgba(var(--x-rgb),.20), transparent 70%); background-size:auto; }
.ch-modal[data-wall="ripples"] .ch-msgs, .ch-modal[data-wall="ripples"] .ch-prev, .ch-wtile[data-w="ripples"]{ background-image:repeating-radial-gradient(circle at 50% 0%, rgba(var(--x-rgb),.10) 0 2px, transparent 2px 30px); background-size:auto; }
.ch-modal[data-wall="checks"] .ch-msgs, .ch-modal[data-wall="checks"] .ch-prev, .ch-wtile[data-w="checks"]{ background-image:conic-gradient(rgba(255,255,255,.035) 25%, transparent 0 50%, rgba(255,255,255,.035) 0 75%, transparent 0); background-size:36px 36px; }
.ch-modal[data-wall="vignette"] .ch-msgs, .ch-modal[data-wall="vignette"] .ch-prev, .ch-wtile[data-w="vignette"]{ background-image:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%); background-size:auto; }
.ch-wtile[data-w="dots"]{ background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px); background-size:12px 12px; }
.ch-wtile[data-w="glow"]{ background-image:radial-gradient(120% 90% at 50% 0%, rgba(var(--x-rgb),.35), transparent 70%); }
.ch-wtile[data-w="grid"], .ch-wtile[data-w="checks"]{ background-size:14px 14px; }
.ch-wtile[data-w="stars"]{ background-size:90px 90px; }
.ch-set-r{ flex-wrap:wrap; }
.ch-sw{ flex-wrap:wrap; justify-content:flex-end; max-width:100%; }
.ch-tsw-b{ position:relative; width:30px; height:30px; padding:0; border:2px solid transparent; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 2px var(--x-line); }
.ch-tsw-b.is-on{ border-color:var(--x-fg); }
.ch-wtile{ width:46px; height:32px; padding:0; border:2px solid var(--x-line); border-radius:9px; cursor:pointer; background-color:var(--x-bg); background-repeat:repeat; }
.ch-wtile.is-on{ border-color:var(--x-fg); }
.ch-wtile:focus-visible, .ch-tsw-b:focus-visible, .ch-sw-b:focus-visible{ outline:2px solid var(--x-acc); outline-offset:2px; }
/* Appearance: collapsible, evenly aligned pickers */
.ch-grp{ margin:8px 0; background:var(--x-field); border:1px solid var(--x-line); border-radius:14px; overflow:hidden; }
.ch-grp-h{ width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; font:inherit; color:var(--x-fg); background:transparent; border:0; cursor:pointer; text-align:left; }
.ch-grp-t{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; }
.ch-grp-v{ flex:none; font-size:13px; color:var(--x-mute); }
.ch-grp-d{ flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--x-line); background-color:var(--x-bg); }
.ch-grp-d.ch-wtile{ width:26px; height:18px; border-radius:5px; border:1px solid var(--x-line); cursor:default; }
.ch-grp-c{ flex:none; display:flex; color:var(--x-mute); transform:rotate(90deg); transition:transform .18s ease; }
.ch-grp.is-open .ch-grp-c{ transform:rotate(-90deg); }
.ch-grp-p{ display:none; padding:4px 14px 16px; }
.ch-grp.is-open .ch-grp-p{ display:block; }
.ch-grid{ display:grid; gap:12px 8px; justify-items:center; align-items:center; }
.ch-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
.ch-grid.cols-6{ grid-template-columns:repeat(6,1fr); }
.ch-grid.cols-7{ grid-template-columns:repeat(7,1fr); }
.ch-grid .ch-tsw-b, .ch-grid .ch-sw-b{ width:32px; height:32px; box-sizing:border-box; }
.ch-grid .ch-wtile{ width:100%; max-width:56px; height:auto; aspect-ratio:7/5; box-sizing:border-box; }
.ch-grid .ch-tsw-b.is-on, .ch-grid .ch-sw-b.is-on{ border-color:var(--x-fg); }
@media (max-width:380px){ .ch-grid{ gap:10px 4px; } .ch-grid .ch-tsw-b, .ch-grid .ch-sw-b{ width:28px; height:28px; } }
/* Halloween: moon, dead trees with hanging skeletons, graves rising from the ground */
.ch-deco-halloween{ background:radial-gradient(45% 160% at 62% 0%, rgba(255,244,190,.10), transparent 70%), linear-gradient(180deg, rgba(20,16,40,.55), rgba(8,6,16,0) 80%); }
.ch-hmoon{ position:absolute; top:5px; left:56%; width:22px; height:22px; filter:drop-shadow(0 0 7px rgba(255,246,200,.55)); animation:chMoon 6s ease-in-out infinite; }
.ch-hmoon .p-m{ fill:#f4efd0; } .ch-hmoon .p-c{ fill:#d8d19e; }
@keyframes chMoon{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(255,246,200,.4)); } 50%{ filter:drop-shadow(0 0 10px rgba(255,246,200,.75)); } }
.ch-htree{ position:absolute; bottom:0; right:7%; width:42px; height:45px; }
.ch-htree .p-t{ fill:#4a3a2e; }
.ch-hskel{ position:absolute; left:26px; top:6px; width:15px; height:36px; transform-origin:50% 0; animation:chSwing 3.2s ease-in-out infinite; }
.ch-hskel .p-r{ fill:#8a7a66; } .ch-hskel .p-s{ fill:#e8e6dc; } .ch-hskel .p-k{ fill:#15121a; }
@keyframes chSwing{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(9deg); } }
.ch-hgrave{ position:absolute; bottom:1px; transform:translateY(120%); animation:chRise 14s ease-in-out infinite; filter:drop-shadow(0 0 3px rgba(150,170,255,.25)); }
.ch-hgrave .p-g{ fill:#8b8f9c; } .ch-hgrave .p-d{ fill:#4d505c; }
@keyframes chRise{ 0%,6%{ transform:translateY(120%); } 20%,62%{ transform:translateY(0); } 78%,100%{ transform:translateY(120%); } }
/* Light strip animations (style = data-lfx, how often = data-line) */
.ch-head[data-line="often"], .ch-deco-prev[data-line="often"]{ --lt:6s; }
.ch-head[data-line="normal"], .ch-deco-prev[data-line="normal"]{ --lt:11s; }
.ch-head[data-line="rare"], .ch-deco-prev[data-line="rare"]{ --lt:24s; }
.ch-head[data-lfx]:not([data-lfx="glide"])::after, .ch-deco-prev[data-lfx]:not([data-lfx="glide"])::after{ animation-name:var(--lfx); animation-duration:var(--lt,11s); animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.ch-head[data-lfx="bounce"], .ch-deco-prev[data-lfx="bounce"]{ --lfx:chLfxBounce; }
.ch-head[data-lfx="twin"], .ch-deco-prev[data-lfx="twin"]{ --lfx:chLfxTwin; }
.ch-head[data-lfx="pulse"], .ch-deco-prev[data-lfx="pulse"]{ --lfx:chLfxPulse; }
.ch-head[data-lfx="aurora"], .ch-deco-prev[data-lfx="aurora"]{ --lfx:chLfxAurora; }
.ch-head[data-lfx="dashes"], .ch-deco-prev[data-lfx="dashes"]{ --lfx:chLfxDashes; }
.ch-head[data-lfx="twin"]::after, .ch-deco-prev[data-lfx="twin"]::after{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),rgba(var(--x-rgb),1),transparent) no-repeat -60% 0 / 30% 100%, linear-gradient(90deg,transparent,rgba(var(--x-rgb),1),rgba(255,255,255,.75),transparent) no-repeat 160% 0 / 30% 100%;
}
.ch-head[data-lfx="pulse"]::after, .ch-deco-prev[data-lfx="pulse"]::after{
height:2px; opacity:0; background:linear-gradient(90deg,transparent,rgba(var(--x-rgb),1) 25%,rgba(255,255,255,.85) 50%,rgba(var(--x-rgb),1) 75%,transparent); box-shadow:0 0 8px rgba(var(--x-rgb),.8);
}
.ch-head[data-lfx="aurora"]::after, .ch-deco-prev[data-lfx="aurora"]::after{
height:2px; opacity:0; background:linear-gradient(90deg,#7a58d6,#3b7ddd,#1f9bc9,#27a074,#d6457a,#7a58d6) 0 0 / 300% 100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.ch-head[data-lfx="dashes"]::after, .ch-deco-prev[data-lfx="dashes"]::after{
height:2px; opacity:0; background:repeating-linear-gradient(90deg,rgba(var(--x-rgb),1) 0 7px,transparent 7px 15px) 0 0 / auto 100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
@keyframes chLfxBounce{ 0%{ background-position:-60% 0 } 17%{ background-position:160% 0 } 34%,100%{ background-position:-60% 0 } }
@keyframes chLfxTwin{ 0%{ opacity:1; background-position:-60% 0, 160% 0 } 22%{ opacity:1; background-position:50% 0, 50% 0 } 30%{ opacity:0; background-position:50% 0, 50% 0 } 100%{ opacity:0; background-position:-60% 0, 160% 0 } }
@keyframes chLfxPulse{ 0%{ opacity:0 } 14%{ opacity:1 } 30%,100%{ opacity:0 } }
@keyframes chLfxAurora{ 0%{ opacity:0; background-position:0 0 } 8%{ opacity:1 } 30%{ opacity:1; background-position:100% 0 } 36%,100%{ opacity:0; background-position:100% 0 } }
@keyframes chLfxDashes{ 0%{ opacity:0; background-position:0 0 } 8%{ opacity:1 } 30%{ opacity:1; background-position:150px 0 } 36%,100%{ opacity:0; background-position:150px 0 } }
.ch-set-sub{ margin:12px 2px 8px; }
@media (prefers-reduced-motion:reduce){
.ch-head[data-lfx]::after, .ch-deco-prev[data-lfx]::after{ animation:none; opacity:1; }
.ch-hmoon, .ch-hskel{ animation:none; } .ch-hgrave{ animation:none; transform:none; }
}
/* ===== Light themes: Light and Paper ===== */
.ch-modal[data-theme="light"]{ --x-bg:#f3f3f6; --x-surf:#ffffff; --x-line:#dcdce4; --x-in:#e7e7ee; --x-field:#eceef3; --x-hover:rgba(0,0,0,.05); }
.ac-modal[data-theme="light"]{ --x-bg:#f3f3f6; --x-surf:#ffffff; --x-line:#dcdce4; --x-in:#e7e7ee; --x-field:#eceef3; --x-hover:rgba(0,0,0,.05); }
.ch-modal[data-theme="paper"]{ --x-bg:#f6f1e7; --x-surf:#fffaf0; --x-line:#e0d6c2; --x-in:#ebe3d0; --x-field:#efe8d8; --x-hover:rgba(0,0,0,.05); }
.ac-modal[data-theme="paper"]{ --x-bg:#f6f1e7; --x-surf:#fffaf0; --x-line:#e0d6c2; --x-in:#ebe3d0; --x-field:#efe8d8; --x-hover:rgba(0,0,0,.05); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]){ --x-fg:#1a1a1f; --x-mute:#6b6b76; --x-acc:var(--x-btn); --x-blue:var(--x-btn); color-scheme:light; }
.ac-modal:is([data-theme="light"],[data-theme="paper"]){ --x-fg:#1a1a1f; --x-mute:#6b6b76; --x-acc:var(--x-btn); --x-blue:var(--x-btn); color-scheme:light; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-backdrop{ background:rgba(24,24,32,.5); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-panel{ box-shadow:0 12px 48px rgba(20,20,40,.22); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-head::before{ background:radial-gradient(55% 160% at 0% 0%, rgba(var(--x-rgb),.14), transparent 62%), linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px) 0 0 / 18px 100%; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-title-a{ background:linear-gradient(100deg,#55555f 0,#55555f 33%,#8a8a95 42%,#1a1a1f 50%,#8a8a95 58%,#55555f 67%,#55555f 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip:text; background-clip:text; filter:none; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-star{ color:#6b6b8a; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) :is(.ch-menu,.ch-smenu,.ch-pop){ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.08); box-shadow:0 18px 44px rgba(20,20,40,.2), 0 2px 8px rgba(20,20,40,.1); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-dlg-card{ box-shadow:0 0 30px rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item:hover{ background:rgba(0,0,0,.05); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ac-act:not(.primary):hover{ background:rgba(0,0,0,.06); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pm-chip{ border:1px solid rgba(0,0,0,.28); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vo-sp{ background:rgba(0,0,0,.14); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-x:hover{ background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-mode-tag{ background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item:active{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-press{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-swipe-i{ background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-quote{ background:rgba(0,0,0,.06); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-smenu{ scrollbar-color:rgba(0,0,0,.14) transparent; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-menu-sep, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pop-sep{ background:linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-sm-h{ color:rgba(0,0,0,.4); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-sm-n{ border-top:1px solid rgba(0,0,0,.07); color:rgba(0,0,0,.4); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-sm-c{ color:rgba(0,0,0,.35); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pc{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-sm-own input{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-psw{ background:rgba(0,0,0,.04); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-psw:hover{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-psw-k{ background:rgba(0,0,0,.16); }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="vignette"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="vignette"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="vignette"]{ background-image:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.14) 100%); background-size:auto; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="dots"]{ background-image:radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.5px); background-size:12px 12px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="stars"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="stars"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="stars"]{ background-image:radial-gradient(1.4px 1.4px at 20px 30px, rgba(0,0,0,.35), transparent), radial-gradient(1px 1px at 90px 70px, rgba(0,0,0,.28), transparent), radial-gradient(1.6px 1.6px at 140px 20px, rgba(0,0,0,.3), transparent), radial-gradient(1px 1px at 60px 120px, rgba(0,0,0,.25), transparent), radial-gradient(1.2px 1.2px at 150px 140px, rgba(0,0,0,.3), transparent); background-size:170px 170px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="checks"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="checks"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="checks"]{ background-image:conic-gradient(rgba(0,0,0,.035) 25%, transparent 0 50%, rgba(0,0,0,.035) 0 75%, transparent 0); background-size:36px 36px; }
/* light: wall patterns in dark ink */
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="dots"] .ch-msgs{ background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px); background-size:22px 22px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="dots"] .ch-prev{ background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px); background-size:22px 22px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="grid"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="grid"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="grid"]{ background-image:linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px); background-size:26px 26px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="lines"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="lines"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="lines"]{ background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 14px); background-size:auto; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="stars"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="stars"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="stars"]{ background-image:radial-gradient(1.4px 1.4px at 20px 30px, rgba(0,0,0,.35), transparent), radial-gradient(1px 1px at 90px 70px, rgba(0,0,0,.28), transparent), radial-gradient(1.6px 1.6px at 140px 20px, rgba(0,0,0,.3), transparent), radial-gradient(1px 1px at 60px 120px, rgba(0,0,0,.25), transparent), radial-gradient(1.2px 1.2px at 150px 140px, rgba(0,0,0,.3), transparent); background-size:170px 170px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="checks"] .ch-msgs, .ch-modal:is([data-theme="light"],[data-theme="paper"])[data-wall="checks"] .ch-prev, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="checks"]{ background-image:conic-gradient(rgba(0,0,0,.035) 25%, transparent 0 50%, rgba(0,0,0,.035) 0 75%, transparent 0); background-size:36px 36px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-wtile[data-w="dots"]{ background-image:radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.5px); background-size:12px 12px; }
/* light: Halloween top bar in softer colours */
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-deco-halloween{ background:linear-gradient(180deg, rgba(110,100,170,.16), rgba(110,100,170,0) 80%); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hskel .p-s{ fill:#8f897b; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hskel .p-k{ fill:#2a2630; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hmoon{ filter:drop-shadow(0 0 5px rgba(200,170,60,.45)); animation:none; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hmoon .p-m{ fill:#ecd98a; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hmoon .p-c{ fill:#cfba62; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-hghost .p-x{ fill:#b4b7c8; }
/* theme swatches: flat two-tone circles, no border (the border made the gradient tile and look skewed) */
.ch-grid .ch-tsw-b{ border:0; background-repeat:no-repeat; background-origin:border-box; background-clip:border-box; box-shadow:0 0 0 1px rgba(128,128,128,.5); }
.ch-grid .ch-tsw-b.is-on{ box-shadow:0 0 0 2px var(--x-surf), 0 0 0 4px var(--x-fg); }
.ch-grp-d.is-theme{ border:0; background-origin:border-box; box-shadow:0 0 0 1px rgba(128,128,128,.5); }
/* v43: moving a chat with a finger; no leftover focus frame on a clicked chat */
.ch-list.is-dragging{ touch-action:none; -webkit-user-select:none; user-select:none; }
.ch-item.is-drag{ -webkit-touch-callout:none; }
.ch-item:focus:not(:focus-visible){ outline:none; }
/* v44: every pinned chat (also Saved messages and the Star Hunt channel) has the same light background; the open chat keeps its own stronger highlight */
.ch-item.is-pinned:not(.is-on){ background:rgba(255,255,255,.045); }
.ch-item.is-pinned:not(.is-on):hover{ background:rgba(255,255,255,.075); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-pinned:not(.is-on){ background:rgba(0,0,0,.04); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-pinned:not(.is-on):hover{ background:rgba(0,0,0,.07); }
/* v45: Get Verified (settings page, the Verification Team chat) and a calmer settings heading */
.ch-set-body > .ch-cr-sec:first-child{ margin-top:10px; }
.ch-vf-ava{ background:linear-gradient(135deg,var(--x-btn),var(--x-acc)); color:#fff; }
.ch-vf-wrap{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:10px; }
.ch-vf-post{ gap:10px; }
.ch-vf-sech{ margin:6px 2px 0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--x-mute); }
.ch-vf-mh{ margin:8px 10px 0; font-size:14px; font-weight:700; color:var(--x-acc); }
.ch-vf-time{ margin:8px 10px 0; font-size:12px; color:var(--x-mute); }
.ch-vf-card{ padding-bottom:12px; }
.ch-vf-ch{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 6px; border-bottom:1px solid var(--x-line); margin-bottom:4px; }
.ch-vf-ch b{ font-size:15px; }
.ch-vf-ch span{ font-size:12.5px; color:var(--x-mute); }
.ch-vf-r{ display:flex; flex-direction:column; gap:2px; padding:6px 10px; }
.ch-vf-k{ font-size:12px; color:var(--x-mute); }
.ch-vf-v{ font-size:14.5px; line-height:1.45; color:var(--x-fg); overflow-wrap:anywhere; white-space:pre-wrap; }
a.ch-vf-a{ color:var(--x-acc); text-decoration:underline; }
.ch-vf-res{ margin:8px 10px 0; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.ch-vf-res.is-ok{ color:#4fc28a; }
.ch-vf-res.is-no{ color:#f4606f; }
.ch-vf-acts{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 10px 0; }
.ch-vf-acts[hidden], .ch-vf-rej[hidden]{ display:none; }
.ch-vf-btn{ flex:1 1 120px; min-height:40px; padding:0 14px; border:0; border-radius:12px; font:inherit; font-size:14px; font-weight:700; color:#fff; background:var(--x-btn); cursor:pointer; }
.ch-vf-btn.is-no{ background:rgba(255,255,255,.1); }
.ch-vf-btn.is-danger{ background:#a52a3a; }
.ch-vf-btn:disabled{ opacity:.5; cursor:default; }
.ch-vf-rej{ display:flex; flex-direction:column; gap:8px; padding:10px 10px 0; }
.ch-vf-search{ display:flex; flex-direction:column; gap:6px; }
.ch-vf-srow{ display:flex; gap:8px; align-items:stretch; }
.ch-vf-srow .ch-vf-sin{ flex:1 1 auto; min-width:0; min-height:42px; resize:none; }
.ch-vf-srow .ch-vf-btn{ flex:0 0 auto; }
.ch-vf-srow .ch-vf-btn[hidden]{ display:none; }
.ch-vf-shint{ padding:0 2px; font-size:12px; line-height:1.4; color:var(--x-mute); }
.ch-vf-lists[hidden], .ch-vf-sres[hidden]{ display:none; }
.ch-vf-chip{ text-align:left; font:inherit; font-size:13px; line-height:1.4; padding:8px 10px; border-radius:10px; border:1px solid var(--x-line); background:transparent; color:var(--x-fg); cursor:pointer; }
.ch-vf-chip:hover{ background:var(--x-hover); }
.ch-vf-ta, .ch-vf-in{ width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; line-height:1.45; color:var(--x-fg); background:var(--x-field); border:1px solid var(--x-line); border-radius:12px; padding:10px 12px; resize:vertical; }
.ch-vf-ta:focus, .ch-vf-in:focus{ outline:2px solid var(--x-acc); outline-offset:-1px; }
.ch-vf-cd{ padding:2px 0 0; }
.ch-vf-cdl{ margin:6px 10px 0; font-size:13px; line-height:1.4; color:var(--x-mute); }
.ch-vf-pick{ display:flex; flex-direction:column; gap:8px; }
.ch-vf-pick .ch-vf-in{ min-height:42px; }
.ch-vf-q{ margin:16px 2px 0; }
.ch-vf-t{ font-size:15px; font-weight:700; color:var(--x-fg); }
.ch-vf-l{ margin:2px 0 8px; font-size:13px; color:var(--x-mute); }
.ch-vf-q .ch-vf-t + .ch-vf-in, .ch-vf-q .ch-vf-t + .ch-vf-ta, .ch-vf-q .ch-vf-t + .ch-vf-opts{ margin-top:8px; }
.ch-vf-h{ margin:6px 2px 0; font-size:12.5px; line-height:1.4; color:var(--x-mute); }
.ch-vf-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ch-vf-opt{ min-height:42px; padding:0 10px; font:inherit; font-size:14px; font-weight:600; color:var(--x-fg); background:transparent; border:1px solid var(--x-line); border-radius:12px; cursor:pointer; }
.ch-vf-opt:hover{ background:var(--x-hover); }
.ch-vf-opt.is-on{ border-color:var(--x-acc); background:rgba(var(--x-rgb),.16); }
.ch-vf-chk{ display:flex; gap:10px; align-items:flex-start; margin:18px 2px 8px; font-size:14px; line-height:1.4; color:var(--x-fg); cursor:pointer; }
.ch-vf-chk input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--x-btn); }
.ch-vf-err{ min-height:18px; margin:4px 2px 8px; font-size:13px; color:#f4606f; }
.ch-vf-go{ width:100%; min-height:44px; margin-bottom:8px; }
.ch-vf-trk{ display:flex; flex-direction:column; margin:10px 4px 6px; }
.ch-vf-st{ position:relative; display:flex; flex-direction:column; gap:2px; padding:0 0 20px 32px; }
.ch-vf-st b{ font-size:14.5px; }
.ch-vf-st span{ font-size:13px; line-height:1.4; color:var(--x-mute); overflow-wrap:anywhere; }
.ch-vf-st::before{ content:""; position:absolute; left:0; top:1px; width:18px; height:18px; box-sizing:border-box; border-radius:50%; border:2px solid var(--x-line); background:transparent; }
.ch-vf-st::after{ content:""; position:absolute; left:8px; top:22px; bottom:2px; width:2px; background:var(--x-line); }
.ch-vf-st:last-child{ padding-bottom:4px; }
.ch-vf-st:last-child::after{ display:none; }
.ch-vf-st.is-done::before{ background:var(--x-btn); border-color:var(--x-btn); }
.ch-vf-st.is-now::before{ border-color:var(--x-acc); box-shadow:0 0 0 4px rgba(var(--x-rgb),.25); }
.ch-vf-st.is-bad::before{ background:#a52a3a; border-color:#a52a3a; }
.ch-vf-done{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:36px 10px; text-align:center; color:var(--x-acc); }
.ch-vf-done b{ font-size:17px; color:var(--x-fg); }
.ch-vf-done span{ font-size:13.5px; color:var(--x-mute); }
/* v46: one smooth verification seal everywhere (same shape as the account window), in the accent colour */
.ch-cat-i.is-seal{ color:var(--x-acc); }
.ch-cat-i.is-seal svg{ opacity:1; }
.ch-vf-ava svg{ width:24px; height:24px; }
.ch-vbadge{ vertical-align:-2px; margin-left:3px; }
/* v57: the verified tick never gets cut off. The NAME shrinks and gets an ellipsis, the tick keeps its place (long names such as "PELATRA Verification Team" in a narrow list) */
.ch-name{ min-width:0; max-width:100%; }
.ch-name-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-name .ch-vbadge{ flex:none; margin-left:0; }
.ch-vf-row .ch-name{ font-size:14.5px; }
/* v57: country picker in the Get Verified form */
.ch-vf-sel{ appearance:none; -webkit-appearance:none; width:100%; cursor:pointer; color:var(--x-fg); padding-right:38px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; }
.ch-vf-sel option{ background:#18181b; color:#e7e9ea; }
/* no zoom on the messenger page (see the NO ZOOM block in js/chat.*.js): pan-x pan-y = scrolling only, no pinch / double-tap zoom.
Elements that set their own touch-action (the photo viewer, the voice button, rows being dragged) keep it: the effective value is the intersection. */
html.ch-nozoom, html.ch-nozoom body{ touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.ch-page select{ font-size:16px; }
/* round "scroll to the latest message" arrow (like Telegram) */
.ch-down{ position:absolute; right:14px; bottom:14px; z-index:5; width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; color:var(--x-fg); background:var(--x-surf, #17181d); border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,.5); cursor:pointer; -webkit-tap-highlight-color:transparent; opacity:0; pointer-events:none; transform:translateY(10px) scale(.9); transition:opacity .18s ease, transform .18s ease; }
.ch-down.show{ opacity:1; pointer-events:auto; transform:none; }
.ch-down:hover{ filter:brightness(1.15); }
.ch-down:focus-visible{ outline:2px solid var(--x-fg); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .ch-down{ transition:opacity .15s ease; transform:none; } }
/* a window swapped for another (Settings > About > Terms, Back, ...) takes its place at once: no pop-in animation, no blink */
.ch-dlg-card.is-still{ animation:none !important; }
/* swipe right in a chat (phones): the chat slides away with the finger, the list waits underneath and moves in a little (parallax), like Telegram */
@media (max-width:720px){
.ch-layout.is-swiping{ position:relative; overflow:hidden; -webkit-user-select:none; user-select:none; cursor:grabbing; }
.ch-layout[data-view="chat"] > .ch-main{ touch-action:pan-y; }
.ch-layout.is-swiping > .ch-side, .ch-layout.is-swiping > .ch-main{ grid-area:1 / 1; }
.ch-layout.is-swiping > .ch-side{ display:flex !important; animation:none !important; transform:translate3d(calc((1 - var(--sw, 0)) * -28%), 0, 0); }
.ch-layout.is-swiping > .ch-side::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:#000; opacity:calc((1 - var(--sw, 0)) * .45); }
.ch-layout.is-swiping > .ch-main, .ch-layout.is-settle > .ch-main{ animation:none !important; } /* the entrance animation keeps transform:none (fill-mode both) and would pin the chat in place while the finger moves */
.ch-layout.is-swiping > .ch-main{ display:flex !important; z-index:3; background:var(--x-bg); box-shadow:-10px 0 30px rgba(0,0,0,.45); will-change:transform; }
.ch-layout.is-settle > .ch-main{ transition:transform .23s cubic-bezier(.2,.8,.2,1); }
.ch-layout.is-settle > .ch-side{ transition:transform .23s cubic-bezier(.2,.8,.2,1); }
.ch-layout.is-settle > .ch-side::after{ transition:opacity .23s ease; }
.ch-layout.is-swiped > .ch-side{ animation:none !important; }
}
/* Auto-lock page: one row per choice, a burgundy ring on the chosen one */
.ch-opt{ gap:12px; }
.ch-opt-d{ flex:none; position:relative; width:20px; height:20px; box-sizing:border-box; border:2px solid rgba(255,255,255,.28); border-radius:50%; transition:border-color .15s ease, background .15s ease; }
.ch-opt.is-on .ch-opt-d{ border-color:var(--x-btn); background:var(--x-btn); }
.ch-opt.is-on .ch-opt-d::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-opt-d{ border-color:rgba(0,0,0,.3); }
.ch-psw.is-danger .ch-po-t b{ color:#f4212e; }
.ch-psw.is-danger.ch-set-act::after{ color:rgba(244,33,46,.7); }
/* An information card (opens an explanation, changes no setting): outlined, with an icon, no chevron */
.ch-psw.is-info{ background:transparent; border:1px solid var(--x-line); }
.ch-psw.is-info:hover{ background:rgba(255,255,255,.03); }
.ch-psw.is-info.ch-set-act::after{ content:none; }
.ch-info-ic{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--x-mute); }
/* the back arrow in front of the article's title */
.ch-pr-bk{ margin:0 -4px 0 -10px; }
/* people in a settings page (Blocked users) */
.ch-set-body .ch-item.static{ margin:4px 0 0; padding:10px 12px; background:rgba(255,255,255,.04); border-radius:16px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-set-body .ch-item.static{ background:rgba(0,0,0,.04); }
/* v87: closing the open chat on a PC. The arrow stays for phones (shown by the rules above); on a wide screen the same button is an X at the right end of the chat header (Esc does the same) */
.ch-back .ch-bk-a, .ch-back .ch-bk-x{ display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ch-back .ch-bk-x{ display:none; }
@media (min-width:721px){
.ch-conv-top > .ch-back{ display:flex; order:9; width:34px; height:34px; }
.ch-conv-top > .ch-back .ch-bk-a{ display:none; }
.ch-conv-top > .ch-back .ch-bk-x{ display:flex; }
}
/* ======================= v88: iPhone, site added to the Home Screen (status bar over the page, home indicator under it) ======================= */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* windows over the messenger (crypto info, confirmations, profiles): they used to start under the clock; now they keep clear of the status bar and the home indicator */
.ch-page .ch-dlg{ box-sizing:border-box; padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); }
/* Settings fills the screen on a phone: its title bar grows by the height of the status bar (the bottom line already has the home-indicator gap) */
@media (max-width:720px){
.ch-page .ch-dlg:has(.ch-set){ padding:0; }
.ch-page .ch-dlg .ch-set-head{ padding-top:env(safe-area-inset-top,0px); min-height:calc(54px + env(safe-area-inset-top,0px)); padding-left:calc(8px + env(safe-area-inset-left,0px)); padding-right:calc(10px + env(safe-area-inset-right,0px)); }
}
/* the app is one fixed layer: no rubber-band, no selection flash or callout on the chrome, the page behind never scrolls */
html.ch-lock, html.ch-lock body{ overscroll-behavior:none; }
.ch-page{ -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
/* while the app is hidden for a blink by chat.js (hsHeal) nothing may catch a tap */
#messengerRoot[style*="opacity: 0"]{ pointer-events:none; }
/* ======================= v91: top bar background (Appearance > Top bar background) and the always-on light strip ======================= */
.ch-modal{ --hb-ln:rgba(255,255,255,.028); --hb-glow:rgba(var(--x-rgb),.26); --hb-hi:rgba(255,255,255,.055); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]){ --hb-ln:rgba(0,0,0,.03); --hb-glow:rgba(var(--x-rgb),.14); --hb-hi:rgba(255,255,255,0); }
.ch-deco-prev::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(55% 160% at 0% 0%, var(--hb-glow), transparent 62%),
radial-gradient(38% 140% at 100% 0%, var(--hb-hi), transparent 70%),
linear-gradient(var(--hb-ln) 1px, transparent 1px) 0 0 / 100% 18px,
linear-gradient(90deg, var(--hb-ln) 1px, transparent 1px) 0 0 / 18px 100%;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.35) 100%); mask-image:linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.35) 100%);
}
/* the default ("grid") is exactly the old look; the others replace the picture, "none" removes it */
.ch-modal .ch-head[data-hbg="glow"]::before, .ch-modal .ch-deco-prev[data-hbg="glow"]::before{
background:radial-gradient(70% 190% at 0% 0%, rgba(var(--x-rgb),.34), transparent 66%), radial-gradient(45% 150% at 100% 0%, var(--hb-hi), transparent 70%);
}
.ch-modal .ch-head[data-hbg="lines"]::before, .ch-modal .ch-deco-prev[data-hbg="lines"]::before{
background:repeating-linear-gradient(45deg, var(--hb-ln) 0 1px, transparent 1px 10px), radial-gradient(55% 160% at 0% 0%, var(--hb-glow), transparent 62%);
}
.ch-modal .ch-head[data-hbg="aurora"]::before, .ch-modal .ch-deco-prev[data-hbg="aurora"]::before{
background:radial-gradient(60% 170% at 8% 0%, rgba(var(--x-rgb),.36), transparent 70%), radial-gradient(60% 170% at 92% 100%, rgba(var(--x-rgb),.24), transparent 70%), radial-gradient(40% 140% at 50% 120%, rgba(122,88,214,.18), transparent 70%);
-webkit-mask-image:none; mask-image:none; background-size:140% 100%; animation:chHbAurora 14s ease-in-out infinite alternate;
}
@keyframes chHbAurora{ 0%{ background-position:0 0 } 100%{ background-position:100% 0 } }
.ch-modal .ch-head[data-hbg="none"]::before, .ch-modal .ch-deco-prev[data-hbg="none"]::before{ display:none; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]){ --hb-dot:rgba(0,0,0,.14); }
/* Light strip, "Always": never switches off. aurora = a rainbow that flows all the time; the others keep a faint base line plus a moving highlight. */
.ch-modal .ch-head[data-line="always"]::after, .ch-modal .ch-deco-prev[data-line="always"]::after{ display:block; opacity:1; -webkit-mask-image:none; mask-image:none; box-shadow:none; }
/* glide / bounce / twin: base line + highlight(s) that never stop */
.ch-modal .ch-head[data-line="always"][data-lfx="glide"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="glide"]::after,
.ch-modal .ch-head[data-line="always"][data-lfx="bounce"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="bounce"]::after{
height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),rgba(var(--x-rgb),1),transparent) no-repeat -60% 0 / 38% 100%, linear-gradient(90deg,rgba(var(--x-rgb),0),rgba(var(--x-rgb),.45) 20%,rgba(var(--x-rgb),.45) 80%,rgba(var(--x-rgb),0)) no-repeat 0 0 / 100% 100%;
animation:chAlGlide 5.5s ease-in-out infinite;
}
.ch-modal .ch-head[data-line="always"][data-lfx="bounce"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="bounce"]::after{ animation-name:chAlBounce; animation-duration:6s; }
.ch-modal .ch-head[data-line="always"][data-lfx="twin"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="twin"]::after{
height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),rgba(var(--x-rgb),1),transparent) no-repeat -60% 0 / 30% 100%, linear-gradient(90deg,transparent,rgba(var(--x-rgb),1),rgba(255,255,255,.8),transparent) no-repeat 160% 0 / 30% 100%, linear-gradient(90deg,rgba(var(--x-rgb),0),rgba(var(--x-rgb),.45) 20%,rgba(var(--x-rgb),.45) 80%,rgba(var(--x-rgb),0)) no-repeat 0 0 / 100% 100%;
animation:chAlTwin 6s ease-in-out infinite;
}
@keyframes chAlGlide{ 0%{ background-position:-60% 0, 0 0 } 100%{ background-position:160% 0, 0 0 } }
@keyframes chAlBounce{ 0%,100%{ background-position:-60% 0, 0 0 } 50%{ background-position:160% 0, 0 0 } }
@keyframes chAlTwin{ 0%{ background-position:-60% 0, 160% 0, 0 0 } 100%{ background-position:160% 0, -60% 0, 0 0 } }
/* pulse: the line breathes */
.ch-modal .ch-head[data-line="always"][data-lfx="pulse"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="pulse"]::after{
height:2px; background:linear-gradient(90deg,transparent,rgba(var(--x-rgb),1) 25%,rgba(255,255,255,.85) 50%,rgba(var(--x-rgb),1) 75%,transparent); box-shadow:0 0 8px rgba(var(--x-rgb),.8);
animation:chAlPulse 3.6s ease-in-out infinite;
}
@keyframes chAlPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
/* dashes: they march along for ever */
.ch-modal .ch-head[data-line="always"][data-lfx="dashes"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="dashes"]::after{
height:2px; background:repeating-linear-gradient(90deg,rgba(var(--x-rgb),1) 0 7px,transparent 7px 15px) 0 0 / auto 100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
animation:chAlDash 1.2s linear infinite;
}
@keyframes chAlDash{ 0%{ background-position:0 0 } 100%{ background-position:15px 0 } }
/* aurora: twice as wide as the bar, a seamless rainbow slides by exactly one bar width per loop, and it softly glows */
.ch-modal .ch-head[data-line="always"][data-lfx="aurora"]::after, .ch-modal .ch-deco-prev[data-line="always"][data-lfx="aurora"]::after{
left:0; right:auto; width:200%; height:2px;
background:linear-gradient(90deg,#7a58d6,#3b7ddd,#1f9bc9,#27a074,#d6457a,#7a58d6,#3b7ddd,#1f9bc9,#27a074,#d6457a,#7a58d6);
box-shadow:0 0 10px rgba(122,88,214,.55);
animation:chAlFlow 9s linear infinite, chAlShine 4s ease-in-out infinite;
}
@keyframes chAlFlow{ 0%{ transform:translate3d(0,0,0) } 100%{ transform:translate3d(-50%,0,0) } }
@keyframes chAlShine{ 0%,100%{ opacity:.7; filter:saturate(1) } 50%{ opacity:1; filter:saturate(1.35) brightness(1.15) } }
@media (prefers-reduced-motion:reduce){
.ch-modal .ch-head[data-line="always"]::after, .ch-modal .ch-deco-prev[data-line="always"]::after{ animation:none; opacity:1; }
.ch-modal .ch-head[data-hbg="aurora"]::before, .ch-modal .ch-deco-prev[data-hbg="aurora"]::before{ animation:none; }
}
@media (max-width:420px){ .ch-seg-b{ padding:6px 9px; font-size:12px; } }
/* v92: the page under a window that is being swiped away */
.ch-dlg .ch-ghost{ box-sizing:border-box; overflow:hidden; }
.ch-ghost-shade{ position:absolute; inset:0; z-index:50; background:rgba(0,0,0,.4); pointer-events:none; border-radius:inherit; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-ghost-shade{ background:rgba(20,20,32,.28); }
/* ---------- v95: volume slider (Settings > Notifications and sounds) ---------- */
.ch-set-r.ch-rng-r{ display:block; }
.ch-rng-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ch-rng-v{ font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; color:var(--x-acc,#c4506e); min-width:3.2em; text-align:right; }
.ch-rng{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:28px; margin:0; padding:0; background:transparent; cursor:pointer; touch-action:pan-y; -webkit-tap-highlight-color:transparent; --p:50%; }
.ch-rng:focus{ outline:none; }
.ch-rng::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--x-acc,#c4506e) 0,var(--x-acc,#c4506e) var(--p),rgba(255,255,255,.16) var(--p),rgba(255,255,255,.16) 100%); }
.ch-rng::-moz-range-track{ height:6px; border-radius:3px; background:rgba(255,255,255,.16); }
.ch-rng::-moz-range-progress{ height:6px; border-radius:3px; background:var(--x-acc,#c4506e); }
.ch-rng::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 5px rgba(0,0,0,.55); }
.ch-rng::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 5px rgba(0,0,0,.55); }
.ch-rng:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--x-acc,#c4506e); outline-offset:2px; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-rng::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--x-acc,#c4506e) 0,var(--x-acc,#c4506e) var(--p),rgba(0,0,0,.16) var(--p),rgba(0,0,0,.16) 100%); }
/* v98: the same top offset for EVERY window. The arrow of the passphrase window is drawn on a PC too. */
.ch-back.is-always{ display:flex; }
/* "How your messages are protected" is a full-screen page on a phone, exactly like Settings (it used to float as a card at another height) */
@media (max-width:720px){
.ch-page .ch-dlg:has(.ch-pr){ padding:0; }
.ch-page .ch-dlg .ch-pr{ width:100%; height:100%; max-height:none; border:0; border-radius:0; }
.ch-page .ch-dlg .ch-pr-head{ padding-top:env(safe-area-inset-top,0px); min-height:calc(54px + env(safe-area-inset-top,0px)); padding-left:calc(14px + env(safe-area-inset-left,0px)); padding-right:calc(12px + env(safe-area-inset-right,0px)); }
.ch-page .ch-dlg .ch-pr-foot{ padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}
/* iPhone, Home Screen app. iOS fades / blurs everything under the clock, so EVERY screen starts a little lower: one shared offset (--pt = the clock area + 18 px)
for the top bar, all windows (settings, crypto info, profiles), the photo viewer and the Star Hunt buttons, so that all tabs sit at the same height. */
@media (display-mode: standalone) { @supports (-webkit-touch-callout: none) {
:root{ --pt:calc(env(safe-area-inset-top,0px) + 18px); --pb:max(10px,env(safe-area-inset-bottom,0px)); }
.ch-page .ch-head{ padding-top:var(--pt); min-height:calc(53px + var(--pt)); }
.ch-page .ch-dlg .ch-set-head, .ch-page .ch-dlg .ch-pr-head, html.ch-win .ch-dlg .ch-set-head, html.ch-win .ch-dlg .ch-pr-head{ padding-top:var(--pt); min-height:calc(54px + var(--pt)); }
.ch-vw-top{ padding-top:calc(8px + var(--pt)); }
.ch-lb-x{ top:calc(12px + var(--pt)); }
.hh{ top:calc(14px + var(--pt)); }
.ch-btn, .ac-btn, body .ac-btn, body .ac-btn.is-in{ top:calc(14px + var(--pt)); }
/* profile / account windows: they start under the same line and never run off the screen */
.ac-modal, .ac-modal.is-peer{ padding-top:var(--pt); padding-bottom:var(--pb); align-items:flex-start; }
.ac-panel, .ac-panel.is-profile{ max-height:calc(100vh - var(--pt) - var(--pb)); max-height:calc(100dvh - var(--pt) - var(--pb)); }
.ac-modal .ac-panel{ margin:0 auto; }
} }
/* v100: the back arrow of EVERY key window (turn on / add device / all devices / unlock / change passphrase / new keys)
sits in the top-left corner of the window, on a PC and on a phone alike (it used to hang inside the narrow centre column). */
.ch-card-top{ position:absolute; top:8px; left:calc(8px + env(safe-area-inset-left,0px)); z-index:3; min-height:0; margin:0; }
.ch-card{ padding-top:54px; }
@media (max-width:720px){
.ch-card{ padding-top:44px; }
.ch-card-top{ min-height:0; margin:0; }
}
@media (display-mode: standalone) { @supports (-webkit-touch-callout: none) {
.ch-card-top{ top:calc(8px + var(--pt)); }
.ch-card{ padding-top:calc(44px + var(--pt)); }
}}
/* v101: the hold menu (chat in the list, message): opens fast, smooth, without a bounce.
- no overshoot animations (chHeld / chLift made the row and the bubble jump when the menu appeared)
- the menu itself appears at once: no staggered items, a short soft fade-in, no heavy blur under it on a phone */
.ch-item.is-press{ transform:scale(.975); background:rgba(255,255,255,.07); transition:transform .2s var(--ease,cubic-bezier(.22,.8,.24,1)), background .2s ease; }
.ch-item.is-held{ transform:scale(.975); background:rgba(255,255,255,.09); box-shadow:inset 3px 0 0 var(--x-acc, var(--x-btn)); animation:none; transition:transform .15s var(--ease,cubic-bezier(.22,.8,.24,1)), background .15s ease, box-shadow .15s ease; }
.ch-msgs .ch-bubble.is-press{ transform:scale(.975); filter:none; transition:transform .2s var(--ease,cubic-bezier(.22,.8,.24,1)); }
.ch-row.is-ctx-on > .ch-bubble{ transform:scale(1.02); animation:none; box-shadow:0 8px 24px rgba(0,0,0,.5); transition:transform .18s var(--ease,cubic-bezier(.22,.8,.24,1)), box-shadow .18s ease; }
.ch-pop{ animation:chPopIn2 .15s var(--ease,cubic-bezier(.22,.8,.24,1)) both; }
.ch-pop .ch-pop-i{ animation:none; }
@keyframes chPopIn2{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
@media (pointer:coarse){
.ch-pop{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(28,28,32,.985); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pop{ background-color:rgba(255,255,255,.985); }
}
/* selecting several messages */
.ch-conv.is-sel > .ch-conv-top{ display:none; }
.ch-selbar{ display:flex; align-items:center; gap:10px; flex:none; padding:8px 12px; background:var(--x-surf); border-bottom:1px solid var(--x-line); }
.ch-selbar-n{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:800; color:var(--x-fg); }
.ch-selbar .ch-conv-tools{ display:flex; gap:6px; }
.ch-selbar-b{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; font:inherit; font-size:14px; font-weight:700; color:var(--x-fg); background:var(--x-hover); border:0; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-selbar-b.is-danger, .ch-selbar-b.is-danger svg{ color:var(--x-red); }
.ch-selbar-b:disabled{ opacity:.4; cursor:default; }
@media (max-width:480px){ .ch-selbar-b span{ display:none; } .ch-selbar-b{ padding:9px 11px; } }
.ch-msgs.is-selmode{ user-select:none; -webkit-user-select:none; }
.ch-msgs.is-selmode > .ch-row{ cursor:pointer; padding-left:34px; border-radius:10px; transition:background .15s ease; }
.ch-msgs.is-selmode > .ch-row.is-sel{ background:rgba(var(--x-rgb),.28); }
.ch-msgs.is-selmode .ch-row:not(.ch-pm):not(.is-pending):not(.is-failed)::before{
content:""; position:absolute; left:6px; top:50%; width:20px; height:20px; margin-top:-10px; box-sizing:border-box; z-index:3;
border:2px solid var(--x-mute); border-radius:50%; background:rgba(0,0,0,.25); transition:background .12s ease, border-color .12s ease;
}
.ch-msgs.is-selmode .ch-row.is-sel:not(.ch-pm):not(.is-pending):not(.is-failed)::before{
border-color:#fff; background:var(--x-btn) 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='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/80% no-repeat;
}
.ch-msgs.is-selmode .ch-alb-g > .ch-row{ padding-left:1.5px; }
.ch-msgs.is-selmode .ch-alb-g > .ch-row::before{ left:8px; top:8px; margin-top:0; }
.ch-msgs.is-selmode .ch-alb-g > .ch-row.is-sel::after{ content:""; position:absolute; inset:1.5px; background:rgba(var(--x-rgb),.28); pointer-events:none; z-index:2; }
.ch-msgs.is-selmode .ch-row .ch-bubble{ pointer-events:none; }
/* forwarded message header ("Forwarded from ") */
.ch-fwd{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:0 0 4px; font-size:13px; line-height:1.3; color:var(--x-acc); }
.ch-fwd-l{ font-weight:500; opacity:.85; }
.ch-fwd-n{ display:inline-flex; align-items:center; gap:5px; min-width:0; }
.ch-fwd-n b{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.ch-fwd .ch-ava{ flex:none; width:20px; height:20px; font-size:11px; border:0; }
.ch-fwd .ch-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ch-row.me .ch-fwd{ color:#fff; }
.ch-md-b .ch-fwd{ padding:6px 10px 0; margin:0; }
.ch-alb-g .ch-fwd{ display:none; }
/* pinned messages */
.ch-pinbar{ display:flex; align-items:center; flex:none; gap:4px; padding:0 6px 0 0; background:var(--x-surf); border-bottom:1px solid var(--x-line); }
.ch-pinbar-m{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; padding:7px 8px 7px 14px; font:inherit; text-align:left; color:var(--x-fg); background:transparent; border:0; border-left:3px solid var(--x-acc); margin:6px 0 6px 10px; border-radius:2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ch-pinbar-m:hover{ background:var(--x-hover); }
.ch-pinbar-i{ flex:none; display:flex; color:var(--x-acc); }
.ch-pinbar-t{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.ch-pinbar-t b{ font-size:13px; font-weight:800; color:var(--x-acc); }
.ch-pinbar-t span{ font-size:13.5px; color:var(--x-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-pinbar-m.has-thumb{ gap:10px; padding:4px 8px 4px 10px; }
.ch-pinbar-th{ flex:none; width:34px; height:34px; border-radius:5px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--x-mute); background:var(--x-field) center/cover no-repeat; }
.ch-pinbar-x{ color:var(--x-mute); }
.ch-pinbar-x:hover{ color:var(--x-fg); background:var(--x-hover); }
.ch-pinned-i{ display:inline-flex; margin-right:4px; opacity:.8; }
.ch-row.is-flash{ animation:chPinFlash 1.5s ease; }
@keyframes chPinFlash{ 0%,60%{ background:rgba(var(--x-rgb),.35); } 100%{ background:transparent; } }
.ch-conv.is-sel > .ch-pinbar{ display:none; }
/* v102: "How your messages are protected" now leads with PELATRA CryptCore; PAR is the smaller, additional ratchet below it */
.ch-pr-par.ch-pr-cc{ font-size:40px; letter-spacing:.1em; word-break:keep-all; }
.ch-pr-fn.is-hl{ background:rgba(var(--x-rgb),.28); border-color:rgba(207,113,136,.7); box-shadow:0 0 18px rgba(var(--x-rgb),.35); }
.ch-pr-fn.is-hl b{ color:#fff; }
.ch-pr-flow-in{ gap:8px; }
.ch-pr-hyb{ display:flex; align-items:stretch; gap:8px; margin:12px 0 0; }
.ch-pr-hyb-i{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:12px; background:var(--x-surf); border:1px solid var(--x-line); }
.ch-pr-hyb-i b{ font-size:13.5px; line-height:18px; font-weight:800; color:var(--x-fg); }
.ch-pr-hyb-i span{ font-size:11.5px; line-height:15px; color:var(--x-mute); }
.ch-pr-hyb-i.is-hl{ background:rgba(var(--x-rgb),.28); border-color:rgba(207,113,136,.7); box-shadow:0 0 18px rgba(var(--x-rgb),.35); }
.ch-pr-hyb-i.is-hl b{ color:#fff; }
.ch-pr-hyb-plus{ flex:none; align-self:center; font-style:normal; font-size:20px; line-height:1; font-weight:800; color:var(--x-acc); }
.ch-pr-par2{ margin:12px 0 0; padding:13px 14px; border-radius:16px; background:var(--x-surf); border:1px solid var(--x-line); }
.ch-pr-par2-top{ display:flex; align-items:center; gap:10px; }
.ch-pr-par2-tag{ flex:none; padding:3px 10px; font-size:11px; line-height:14px; font-weight:800; letter-spacing:.14em; color:#fff; background:var(--x-btn); border-radius:999px; }
.ch-pr-par2-name{ min-width:0; font-size:14px; line-height:19px; font-weight:700; color:var(--x-fg); }
.ch-pr-par2-p{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--x-mute); }
@media (max-width:560px){ .ch-pr-par.ch-pr-cc{ font-size:32px; letter-spacing:.07em; } .ch-pr-hyb-i{ padding:8px 10px; } }
@media (max-width:360px){ .ch-pr-par.ch-pr-cc{ font-size:27px; } }
/* v106: the static article with a serious wordmark "PELATRA CryptCore" (the lower part of the letters is no longer cut off) */
.ch-pr-wm{ margin:16px 0 0; padding:0 .06em .16em 0; font-size:clamp(20px,calc((100vw - 70px) / 11.8),38px); line-height:1.2; font-weight:800; letter-spacing:.01em; color:#fff; white-space:nowrap; overflow:visible;
background:linear-gradient(180deg,#fff 30%,#dcb0bc 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ch-pr-wm-a{ font-weight:300; letter-spacing:.1em; }
.ch-pr-wm-b{ font-weight:800; }
.ch-pr-lead{ margin-top:6px; }
.ch-pr-tag{ background:transparent; color:var(--x-acc); border:1px solid rgba(207,113,136,.5); letter-spacing:.16em; }
/* =====================================================================
v90 — light themes everywhere: no window stays dark, ticks readable
The account / profile / security windows live outside the messenger (.ac-modal), so they take the theme from now.
===================================================================== */
/* page and sign-in gate behind the messenger */
html[data-ch-theme="light"].ch-lock, html[data-ch-theme="light"].ch-lock body, html[data-ch-theme="light"] body.ch-page-body, html[data-ch-theme="light"] #messengerRoot, html[data-ch-theme="light"] .ch-gate{ background:#f3f3f6; }
html[data-ch-theme="paper"].ch-lock, html[data-ch-theme="paper"].ch-lock body, html[data-ch-theme="paper"] body.ch-page-body, html[data-ch-theme="paper"] #messengerRoot, html[data-ch-theme="paper"] .ch-gate{ background:#f6f1e7; }
html:is([data-ch-theme="light"],[data-ch-theme="paper"]) .ch-gate{ color:#1a1a1f; }
html:is([data-ch-theme="light"],[data-ch-theme="paper"]) .ch-gate-p{ color:#6b6b76; }
html:is([data-ch-theme="light"],[data-ch-theme="paper"]) .ch-gate-link{ color:#8f2f46; }
/* the dimming under dialogs: a soft veil instead of a black one */
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-dlg{ background:rgba(24,24,32,.5); }
html.ch-win .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-dlg{ background:var(--x-bg); }
@media (prefers-reduced-transparency:reduce){ .ch-modal:is([data-theme="light"],[data-theme="paper"]) :is(.ch-menu,.ch-smenu,.ch-pop){ background:#fff; } }
/* message ticks: always white on the own bubble, whatever the theme */
.ch-modal .ch-row.me .ch-tick{ color:rgba(255,255,255,.78); }
.ch-modal .ch-row.me.is-seen .ch-tick{ color:#fff; }
.ch-modal .ch-tick svg{ stroke:currentColor; opacity:1; }
.ch-modal .ch-md-b.is-img.no-cap .ch-tick, .ch-modal .ch-alb-g > .ch-row:last-child .ch-md-b .ch-tick{ color:#fff; }
/* verified seal: a lighter tint of the accent on light surfaces (the dark accent made it look black) */
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vbadge, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-cat-i.is-seal, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-ibtn.is-verified{ color:color-mix(in srgb, var(--x-btn) 62%, #ffffff); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vbadge{ filter:none; }
/* everyday bits that were drawn for a dark background */
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-day{ color:var(--x-mute); background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-newchat{ background:rgba(0,0,0,.04); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-newchat:hover{ background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-held{ background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-pinned:not(.is-on){ background:rgba(0,0,0,.035); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-item.is-pinned:not(.is-on):hover{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pop-i.is-armed svg{ background:rgba(0,0,0,.14); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vf-btn.is-no{ color:var(--x-fg); background:rgba(0,0,0,.08); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vf-sel option{ background:#fff; color:#1a1a1f; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-down{ border-color:rgba(0,0,0,.16); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-opt-d{ border-color:rgba(0,0,0,.3); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-psw.is-info:hover{ background:rgba(0,0,0,.03); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-info-ic{ background:rgba(0,0,0,.06); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-set-body .ch-item.static{ background:rgba(0,0,0,.04); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-chan-btn{ background:rgba(0,0,0,.07); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-chan-btn:hover, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-chan-btn:focus-visible{ background:rgba(0,0,0,.12); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-rng::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--x-acc,#c4506e) 0,var(--x-acc,#c4506e) var(--p),rgba(0,0,0,.16) var(--p)); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-rng::-moz-range-track{ background:rgba(0,0,0,.16); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-spin{ border-color:rgba(0,0,0,.18); border-top-color:var(--x-btn); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-unread.is-muted{ background:#b9b9c2; color:#fff; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) :is(.ch-menu-i.danger,.ch-pop-i.danger,.ch-menu-i.danger .ch-menu-ic,.ch-pop-i.danger svg){ color:#c4283a; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-retry{ color:#c4283a; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-dna-row.is-ok .ch-dna-v, .ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-vf-res.is-ok{ color:#1f8a4c; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-chan-hero{ color:#c98a0a; background:radial-gradient(circle at 50% 55%,rgba(255,200,80,.3),transparent 62%),linear-gradient(160deg,#f1ecfa,#e2e4f2); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-chan-hero svg{ filter:drop-shadow(0 0 12px rgba(201,138,10,.45)); }
/* "How your messages are protected": the dark burgundy hero becomes a soft rose card */
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-dlg-card.ch-pr{ box-shadow:0 20px 60px rgba(20,20,40,.25); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-body{ scrollbar-color:rgba(0,0,0,.2) transparent; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-hero{ border-color:rgba(var(--x-rgb),.45); background:radial-gradient(120% 80% at 100% 0%,rgba(var(--x-rgb),.16),transparent 58%),radial-gradient(90% 70% at 0% 100%,rgba(var(--x-rgb),.12),transparent 62%),linear-gradient(165deg,#fdf1f4,#f7e4e9 72%); box-shadow:0 6px 28px rgba(var(--x-rgb),.14),inset 0 1px 0 rgba(255,255,255,.8); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-par{ background:linear-gradient(180deg,var(--x-btn) 10%,color-mix(in srgb,var(--x-btn) 55%,#ffffff) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:none; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-lead{ color:#4a3a40; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) :is(.ch-pr-note,.ch-pr-epnote){ color:#6b5a60; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) :is(.ch-pr-flow,.ch-pr-gi){ background:rgba(255,255,255,.65); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-fn.is-par{ background:rgba(var(--x-rgb),.12); box-shadow:none; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-fn.is-par b{ color:var(--x-btn); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-fn.is-final{ background:var(--x-btn); box-shadow:0 4px 16px rgba(var(--x-rgb),.3); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-fn.is-final > span:not(.ch-pr-fn-ico){ color:rgba(255,255,255,.88); }
@keyframes chPrEpL{ 0%,24%,100%{ background:var(--x-surf); box-shadow:none; } 6%,16%{ background:var(--x-btn); color:#fff; box-shadow:0 0 12px rgba(var(--x-rgb),.55); } }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-ep{ animation-name:chPrEpL; }
.ch-modal:is([data-theme="light"],[data-theme="paper"]) .ch-pr-mode.is-secure{ box-shadow:0 4px 18px rgba(var(--x-rgb),.12); }
/* account / profile / security windows */
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-backdrop{ background:rgba(24,24,32,.5); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel{ background:radial-gradient(120% 55% at 50% 0%,rgba(var(--x-rgb),.10),transparent 70%),var(--x-bg); border-color:var(--x-line); box-shadow:0 12px 48px rgba(20,20,40,.22); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-profile{ background:var(--x-bg); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec{ background:var(--x-surf); box-shadow:0 12px 40px rgba(20,20,40,.2); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-body{ scrollbar-color:rgba(0,0,0,.2) transparent; }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-act:not(.primary){ border-color:var(--x-line); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-act:not(.primary):hover{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.2); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-x:hover{ background:rgba(0,0,0,.08); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-reveal:hover{ background:rgba(0,0,0,.06); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-input{ border-color:var(--x-line); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-meter i{ background:var(--x-line); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-load i{ border-color:var(--x-line); border-top-color:var(--x-acc); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-dev-ic{ background:var(--x-field); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-vf-tip, .ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-vf-tip::before{ background:var(--x-surf); box-shadow:0 8px 28px rgba(20,20,40,.18); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-vf-tip::before{ box-shadow:none; }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-crop{ background:rgba(24,24,32,.5); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-crop-card{ background:var(--x-surf); box-shadow:0 12px 40px rgba(20,20,40,.2); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-ava.xl{ box-shadow:0 0 0 1px rgba(var(--x-rgb),.4),0 8px 24px rgba(20,20,40,.18); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]).is-instant .ac-act:not(.primary):not(.danger), .ac-modal:is([data-theme="light"],[data-theme="paper"]).is-instant .ac-input{ border-color:var(--x-line); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess .ac-dev-ic, .ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess .ac-dev-ic.is-acc{ background:rgba(0,0,0,.06); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess button.ac-dev:hover{ background:rgba(0,0,0,.08); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-sec .ac-sess-item button.ac-dev:hover{ background:rgba(0,0,0,.04); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-badge{ filter:none; }
html.ch-win .ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-backdrop, html.ch-win .ac-modal:is([data-theme="light"],[data-theme="paper"]).is-instant .ac-backdrop, .ac-modal:is([data-theme="light"],[data-theme="paper"]).is-boot .ac-backdrop{ background:var(--x-bg); }
/* v90: iPhone browsers other than Safari (DuckDuckGo, Chrome...) on iOS 26: the form bar floats over the page right above the keys, so the message bar gets room above it */
html.kb-float .ch-modal.ch-page.is-kbd .ch-comp{ padding-bottom:calc(10px + var(--kb-float,84px)); }
/* v90: the close cross over the profile banner is a dark glass button with a light cross in every theme (it turned dark-on-dark in the light themes) */
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-profile .ac-x{ color:#fff; background:rgba(20,20,22,.62); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-profile .ac-x:hover{ color:#fff; background:rgba(20,20,22,.85); }
.ac-modal:is([data-theme="light"],[data-theme="paper"]) .ac-panel.is-profile .ac-x:focus-visible{ outline-color:#fff; }
/* v100: "Title shine" switch (Settings > Appearance). Off = the PELATRA title and the top-bar hairline stay still, no glow */
.ch-modal[data-shine="off"] .ch-title-a{ animation:none; background-position:0 0; filter:none; }
.ch-modal[data-shine="off"] .ch-head::after{ animation:none; }
.ch-modal[data-shine="off"] .ch-head[data-line="off"]::after{ display:none; }
/* v100: ONE verified seal colour everywhere (chat list, chat header, profiles, account window, settings).
Before: light/paper themes lightened the seal in chats but the profile kept the dark accent, so profiles looked darker.
Now every seal reads --seal, and --seal is the same in both windows. No glow, no filter. */
.ch-modal, .ac-modal{ --seal:var(--x-acc); }
.ch-modal:is([data-theme="light"],[data-theme="paper"]), .ac-modal:is([data-theme="light"],[data-theme="paper"]){ --seal:color-mix(in srgb, var(--x-btn) 62%, #ffffff); }
.ch-modal .ch-vbadge, .ch-modal .ch-cat-i.is-seal, .ch-modal .ch-ibtn.is-verified,
.ac-modal .ac-badge, .ac-modal .ac-panel .ac-badge{ color:var(--seal) !important; filter:none !important; opacity:1; }
.ac-btn .ac-badge{ color:#cf7188; filter:none; }
@media (max-width:640px), (max-height:520px){
.ac-btn .ac-badge{ filter:drop-shadow(0 0 0 #000) drop-shadow(0 0 3px rgba(0,0,0,.9)); }
}
/* v96: the screen was opened by the browser's own Back / Forward swipe: the browser has already drawn its slide, the page must not draw a second one on top of it */
.ch-layout.is-pop > .ch-main, .ch-layout.is-pop > .ch-side{ animation:none !important; }