/* ============================================================ Connect โ€” stylesheet Base direction is LTR; [dir="rtl"] only overrides what must mirror. ============================================================ */ :root { --bg: #ffffff; --bg-side: #ffffff; --bg-panel: #eef1f5; --bg-hover: #f2f4f7; --bg-active: #3390ec; --bg-active-soft: #eaf3fd; --text: #16181c; --text-muted: #869099; --border: #e8ebee; --bubble-in: #ffffff; --bubble-out: #e3f4d6; --bubble-out-text: #16181c; --header-bg: #ffffff; --accent: #3390ec; --accent-strong: #2481dc; --danger: #e0564f; --success: #4bb34b; --radius: 14px; --shadow-sm: 0 1px 2px rgba(16, 35, 47, .08); --shadow: 0 4px 20px rgba(16, 35, 47, .12); --shadow-lg: 0 12px 40px rgba(16, 35, 47, .18); --badge: #3390ec; --scroll-thumb: rgba(0, 0, 0, .18); } [data-theme="dark"] { --bg: #17212b; --bg-side: #17212b; --bg-panel: #0e1621; --bg-hover: #202b36; --bg-active: #2b5278; --bg-active-soft: #243447; --text: #f1f3f5; --text-muted: #7d8b99; --border: #232e3a; --bubble-in: #182533; --bubble-out: #2b5278; --bubble-out-text: #ffffff; --header-bg: #17212b; --accent: #64a9e9; --accent-strong: #7fbaf0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 20px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55); --badge: #64a9e9; --scroll-thumb: rgba(255, 255, 255, .16); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "Inter", "Segoe UI", system-ui, Vazirmatn, Tahoma, sans-serif; background: var(--bg-panel); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [lang="fa"] body { font-family: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif; } .hidden { display: none !important; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ::selection { background: rgba(51, 144, 236, .25); } /* Thin, unobtrusive scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } /* Inline SVG icons: stroke follows the text colour */ .ic { width: 22px; height: 22px; flex-shrink: 0; display: block; } [dir="rtl"] .flip-rtl .ic, [dir="rtl"] .flip-rtl > svg { transform: scaleX(-1); } /* ============================ Splash (session restore) ============================ */ /* Hidden by default. The inline script adds .resuming to when a token exists, so the login screen never paints on a reload. */ .splash { display: none; position: fixed; inset: 0; z-index: 500; background: var(--bg-panel); flex-direction: column; align-items: center; justify-content: center; gap: 22px; } html.resuming .splash { display: flex; } html.resuming #auth { display: none !important; } .splash .spinner { width: 24px; height: 24px; border-width: 3px; } /* ============================ Auth ============================ */ .auth-screen { height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 0%, #4ba3f0 0%, #3390ec 45%, #2170c4 100%); padding: 20px; } .auth-card { position: relative; width: 380px; max-width: 100%; background: var(--bg); border-radius: 20px; padding: 40px 30px 32px; text-align: center; box-shadow: var(--shadow-lg); animation: rise .35s cubic-bezier(.2, .8, .3, 1); } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .auth-lang { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; } .lang-select { border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-muted); font-size: 13px; padding: 5px 8px; cursor: pointer; outline: none; } .lang-select:focus { border-color: var(--accent); } .auth-logo { width: 78px; height: 78px; margin: 0 auto 4px; border-radius: 50%; background: linear-gradient(140deg, var(--accent), #6cb6f5); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(51, 144, 236, .35); } .auth-logo svg { width: 40px; height: 40px; } .auth-title { font-size: 27px; margin: 12px 0 20px; font-weight: 700; letter-spacing: -.3px; } .auth-sub { color: var(--text-muted); margin-bottom: 14px; font-size: 14.5px; } .auth-step { display: flex; flex-direction: column; gap: 11px; } .auth-hint, .auth-error { font-size: 13px; margin-top: 8px; } .auth-hint { color: var(--text-muted); line-height: 1.6; } .auth-error { color: var(--danger); min-height: 18px; font-weight: 500; } .auth-error-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-word; white-space: pre-wrap; opacity: .85; background: var(--bg-hover); border-radius: 8px; padding: 8px 10px; text-align: start; } .auth-error-detail:empty { display: none; } /* ============================ Form controls ============================ */ .field { width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; } .field::placeholder { color: var(--text-muted); } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(51, 144, 236, .12); } .code-field { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 700; padding-inline: 10px; } .field-status { font-size: 12.5px; min-height: 16px; margin-top: -4px; text-align: start; } .field-status.ok { color: var(--success); } .field-status.bad { color: var(--danger); } .field-status.checking { color: var(--text-muted); } .btn { border: none; border-radius: 11px; padding: 12px 16px; font-size: 15px; font-weight: 600; transition: background .15s, filter .15s, transform .06s; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(51, 144, 236, .28); } .btn-primary:hover { background: var(--accent-strong); } .btn-primary:disabled { opacity: .6; cursor: default; } .btn-ghost { background: transparent; color: var(--accent); } .btn-ghost:hover { background: var(--bg-hover); } .danger { color: var(--danger) !important; } /* ============================ App layout ============================ */ .app { height: 100%; display: flex; position: relative; } .sidebar { width: 380px; min-width: 300px; background: var(--bg-side); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--header-bg); } .icon-btn { border: none; background: transparent; color: var(--text-muted); width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .icon-btn.danger:hover { background: rgba(224, 86, 79, .12); } .search-wrap { flex: 1; position: relative; display: flex; align-items: center; } .search-ic { position: absolute; inset-inline-start: 12px; width: 17px; height: 17px; color: var(--text-muted); pointer-events: none; } .search-input { width: 100%; padding: 10px 14px; padding-inline-start: 36px; border-radius: 20px; border: 1.5px solid transparent; background: var(--bg-hover); color: var(--text); font-size: 14px; outline: none; transition: border-color .15s, background .15s; } .search-input::placeholder { color: var(--text-muted); } .search-input:focus { border-color: var(--accent); background: var(--bg); } .dialog-list, .search-results { flex: 1; overflow-y: auto; padding: 4px 6px 10px; } /* Dialog / list rows */ .dialog { display: flex; align-items: center; gap: 11px; padding: 9px 10px; cursor: pointer; position: relative; border-radius: 12px; transition: background .12s; } .dialog:hover { background: var(--bg-hover); } .dialog.active { background: var(--bg-active); } .dialog.active .dialog-title, .dialog.active .dialog-preview, .dialog.active .dialog-time, .dialog.active .badge-icon, .dialog.active .dialog-tick, .dialog.active .pin-icon { color: #fff; } .dialog.active .dialog-unread { background: #fff; color: var(--accent); } .avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 17px; user-select: none; background: var(--accent); } .avatar-lg { width: 82px; height: 82px; font-size: 30px; } .dialog-main { flex: 1; min-width: 0; } .dialog-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .dialog-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; min-width: 0; } .badge-icon, .mute-icon, .pin-icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; } .badge-icon .ic, .mute-icon .ic, .pin-icon .ic { width: 14px; height: 14px; } .dialog-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; } .dialog-preview { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; } .dialog-unread { background: var(--badge); color: #fff; font-size: 12px; font-weight: 600; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dialog-unread.muted { background: var(--text-muted); } .dialog-preview.typing { color: var(--accent); font-style: italic; } .dialog.active .dialog-preview.typing { color: #dceeff; } .section-label { padding: 12px 14px 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; line-height: 1.6; } /* ============================ Drawer ============================ */ .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 40; } .drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: 300px; background: var(--bg-side); z-index: 50; transform: translateX(-105%); transition: transform .26s cubic-bezier(.2, .8, .3, 1); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } [dir="rtl"] .drawer { transform: translateX(105%); } .drawer.open { transform: translateX(0) !important; } .drawer-head { position: relative; padding: 20px 16px 14px; background: linear-gradient(140deg, #3390ec, #2b6fb3); color: #fff; } .drawer-theme-btn { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); color: #fff; border: none; cursor: pointer; transition: background .15s; } .drawer-theme-btn:hover { background: rgba(255, 255, 255, .28); } .drawer-theme-btn .ic { width: 20px; height: 20px; } .drawer-profile { cursor: pointer; border-radius: 12px; } .drawer-profile .avatar { margin-bottom: 10px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); width: 60px; height: 60px; font-size: 22px; } .drawer-profile-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .drawer-name { font-size: 17px; font-weight: 600; } .drawer-phone { font-size: 13px; opacity: .85; margin-top: 3px; } .drawer-caret { width: 22px; height: 22px; flex: none; opacity: .9; transition: transform .24s; margin-bottom: 2px; } .drawer.accounts-open .drawer-caret { transform: rotate(180deg); } .drawer-scroll { flex: 1; overflow-y: auto; min-height: 0; } .drawer-menu { list-style: none; padding: 8px; } /* Account switcher sits above the menu (both stay visible, Telegram-style) */ .drawer.accounts-open .drawer-accounts { border-bottom: 1px solid var(--border); } .drawer-menu li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; font-size: 15px; cursor: pointer; border-radius: 10px; color: var(--text); transition: background .12s; } .drawer-menu li:hover { background: var(--bg-hover); } .drawer-menu li .ic { width: 21px; height: 21px; color: var(--text-muted); } .drawer-menu li.danger .ic { color: var(--danger); } /* Inline multi-account switcher (Telegram-style header expand) */ .drawer-accounts { padding: 8px; } .acc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; background: none; border: none; color: var(--text); text-align: start; font-size: 15px; transition: background .12s; } .acc-row:hover { background: var(--bg-hover); } .acc-row .avatar { width: 40px; height: 40px; font-size: 15px; flex: none; } .acc-row-body { flex: 1; min-width: 0; } .acc-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc-row-phone { font-size: 12.5px; color: var(--text-muted); direction: ltr; text-align: start; } .acc-row-check { width: 20px; height: 20px; color: var(--accent); flex: none; } .acc-row.add .acc-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--accent); } .acc-row.add .acc-ic .ic { width: 22px; height: 22px; } .drawer-foot { padding: 14px 20px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); } /* ============================ Chat panel ============================ */ .chat-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-panel); position: relative; overflow-x: hidden; } .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 16px; padding: 20px; text-align: center; } .chat-empty-badge { width: 96px; height: 96px; border-radius: 50%; background: rgba(0, 0, 0, .05); display: flex; align-items: center; justify-content: center; } .chat-empty-badge svg { width: 44px; height: 44px; } [data-theme="dark"] .chat-empty-badge { background: rgba(255, 255, 255, .05); } .chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .chat-header { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--header-bg); border-bottom: 1px solid var(--border); min-height: 60px; z-index: 6; } /* Telegram-style top bar: back+badge (leading), centred name/status, avatar (trailing). */ .chat-header-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .chat-header-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-inline-start: auto; } /* Call / video / search / secret / โ‹ฎ all live in the profile page now โ€” keep the top bar minimal, exactly like Telegram: just the avatar sits on the trailing edge. */ .chat-header-right > button { display: none; } .chat-header-avatar { width: 40px; height: 40px; font-size: 15px; cursor: pointer; margin-inline-start: 6px; } /* Absolutely centred so the left/right cluster widths never shift the title off-centre. */ .chat-header-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; max-width: 48%; min-width: 0; pointer-events: none; /* let empty gaps fall through to the buttons beneath */ } .chat-header-center > * { pointer-events: auto; } .chat-title { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-status { font-size: 13px; color: var(--text-muted); margin-top: 1px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-status.online { color: var(--accent); } /* Total-unread pill next to the back chevron, like Telegram's "โ€น 11". */ .chat-back-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .chat-back-badge.hidden { display: none; } .messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 7%; display: flex; flex-direction: column; gap: 2px; } /* Spinner shown at the top while an older page is being fetched */ .messages.loading-older::before { content: ''; align-self: center; flex-shrink: 0; margin: 6px 0 10px; width: 22px; height: 22px; border: 2.5px solid var(--bg-hover); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } .msg-row { display: flex; min-width: 0; max-width: 100%; } .msg-row.out { justify-content: flex-end; } .msg-row.in { justify-content: flex-start; } .bubble { max-width: 68%; min-width: 0; padding: 7px 11px 6px; border-radius: 16px; background: var(--bubble-in); box-shadow: var(--shadow-sm); position: relative; word-wrap: break-word; overflow-wrap: break-word; } .msg-row.out .bubble { background: var(--bubble-out); color: var(--bubble-out-text); } /* Telegram-style message grouping. `.grp-cont` (set in JS) marks a row that continues the previous sender's run: shared corners tighten, only the run's last bubble grows a tail, and a new run gets breathing room above. */ .msg-row:not(.grp-cont) { margin-top: 6px; } .msg-row.in.grp-cont .bubble { border-start-start-radius: 6px; } .msg-row.out.grp-cont .bubble { border-start-end-radius: 6px; } .msg-row.in:has(+ .msg-row.in.grp-cont) .bubble { border-end-start-radius: 6px; } .msg-row.out:has(+ .msg-row.out.grp-cont) .bubble { border-end-end-radius: 6px; } /* Tail on the last bubble of a run (any row NOT followed by a continuation). */ .msg-row.in:not(:has(+ .msg-row.in.grp-cont)) .bubble:not(.is-sticker):not(.is-jumbo) { border-end-start-radius: 4px; } .msg-row.in:not(:has(+ .msg-row.in.grp-cont)) .bubble:not(.is-sticker):not(.is-jumbo)::after { content: ''; position: absolute; bottom: 0; inset-inline-start: -7px; width: 7px; height: 13px; pointer-events: none; background: radial-gradient(circle at 0 0, transparent 6.5px, var(--bubble-in) 7px); } .msg-row.out:not(:has(+ .msg-row.out.grp-cont)) .bubble:not(.is-sticker):not(.is-jumbo) { border-end-end-radius: 4px; } .msg-row.out:not(:has(+ .msg-row.out.grp-cont)) .bubble:not(.is-sticker):not(.is-jumbo)::after { content: ''; position: absolute; bottom: 0; inset-inline-end: -7px; width: 7px; height: 13px; pointer-events: none; background: radial-gradient(circle at 7px 0, transparent 6.5px, var(--bubble-out) 7px); } .bubble-sender { font-size: 13px; font-weight: 600; margin-bottom: 2px; cursor: pointer; } .bubble-text { font-size: 14.7px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; } .bubble-meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 2px; } .bubble-time { font-size: 11px; color: var(--text-muted); } .msg-row.out .bubble-time { color: rgba(0, 0, 0, .42); } [data-theme="dark"] .msg-row.out .bubble-time { color: rgba(255, 255, 255, .55); } .service-msg { align-self: center; background: rgba(0, 0, 0, .14); color: #fff; font-size: 12.5px; padding: 4px 13px; border-radius: 13px; margin: 6px 0; } [data-theme="dark"] .service-msg { background: rgba(0, 0, 0, .4); } /* Composer */ .composer { padding: 10px 7% 16px; background: var(--bg-panel); } /* Attach button | rounded text field (with emoji) | mic-or-send button */ .composer-box { display: flex; align-items: center; gap: 8px; } .composer-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: var(--bg-side); border-radius: 24px; padding: 4px 6px; padding-inline-start: 16px; box-shadow: var(--shadow); } .msg-input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 15px; padding: 10px 0; outline: none; min-width: 0; } .msg-input::placeholder { color: var(--text-muted); } .composer-icon { border: none; background: transparent; color: var(--text-muted); width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .composer-icon:hover { background: var(--bg-hover); color: var(--text); } .composer-icon.active { background: var(--bg-active-soft); color: var(--accent); } /* Standalone round buttons that sit outside the text field */ .composer-icon.round { width: 46px; height: 46px; background: var(--bg-side); box-shadow: var(--shadow); } .composer-icon.round:hover { color: var(--accent); } .send-btn { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(51, 144, 236, .35); transition: background .15s, transform .1s; animation: pop .16s cubic-bezier(.2, 1.4, .5, 1); } @keyframes pop { from { transform: scale(.6); opacity: 0; } } .send-btn:hover { background: var(--accent-strong); } .send-btn:active { transform: scale(.92); } .send-btn .ic { width: 20px; height: 20px; } [dir="rtl"] .send-btn .ic { transform: scaleX(-1); } /* Mic while the field is empty, send button once there's something to send. */ #composer-box:not(.has-text) #send-btn { display: none; } #composer-box.has-text #mic-btn { display: none; } .composer-locked { text-align: center; color: var(--text-muted); padding: 16px; font-size: 14px; } /* Full-width "Join" bar shown to non-members of a public channel (Telegram-style). */ .chat-join, .chat-mute { display: block; width: 100%; border: none; cursor: pointer; padding: 15px; font-size: 15px; font-weight: 600; background: transparent; color: var(--accent); letter-spacing: .3px; text-transform: uppercase; transition: background .12s; } .chat-join:hover, .chat-mute:hover { background: var(--bg-hover); } /* ============================ Modals ============================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .modal { width: 450px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); animation: rise .22s cubic-bezier(.2, .8, .3, 1); } .modal-title { font-size: 19px; font-weight: 700; } .modal-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .modal-error { color: var(--danger); font-size: 13px; min-height: 16px; } .picker-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; } .picker-list:empty { display: none; } .picker-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; cursor: pointer; transition: background .12s; } .picker-item:hover { background: var(--bg-hover); } .picker-item .avatar { width: 40px; height: 40px; font-size: 15px; } .picker-item.selected { background: var(--bg-active-soft); } .picker-name { font-weight: 600; font-size: 14.5px; } .picker-sub { font-size: 12.5px; color: var(--text-muted); } .picker-check { margin-inline-start: auto; color: var(--accent); font-size: 18px; } .picker-role { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--bg-active-soft); color: var(--accent); border-radius: 14px; padding: 5px 11px; font-size: 13px; display: flex; align-items: center; gap: 6px; } .chip .x { cursor: pointer; font-weight: 700; opacity: .7; } .chip .x:hover { opacity: 1; } .info-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .info-sub { color: var(--text-muted); font-size: 14px; } .info-about { font-size: 14px; margin-top: 4px; } /* ============================ Toast ============================ */ .toast { position: fixed; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); background: #2b2f36; color: #fff; padding: 11px 20px; border-radius: 12px; z-index: 550; font-size: 14px; box-shadow: var(--shadow-lg); max-width: 90vw; text-align: center; animation: rise .2s ease; } /* ============================ Avatars ============================ */ .avatar.has-img { background-size: cover !important; background-position: center; color: transparent; } .avatar-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; } .avatar-editable { cursor: pointer; } .avatar-editable::after { content: '๐Ÿ“ท'; position: absolute; inset-block-end: 0; inset-inline-end: 0; background: var(--accent); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2.5px solid var(--bg); } /* Online dot */ .avatar.online::after { content: ''; position: absolute; inset-block-end: 1px; inset-inline-end: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--success); border: 2.5px solid var(--bg-side); } .chat-header .avatar.online::after { border-color: var(--header-bg); } .modal .avatar.online::after, #user-avatar.online::after { border-color: var(--bg); } /* ============================ Emoji / sticker panel ============================ */ .emoji-panel { background: var(--bg-side); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; } .emoji-tabs { display: flex; gap: 6px; padding: 2px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .emoji-tab { border: none; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 16px; transition: background .15s, color .15s; } .emoji-tab.active { background: var(--bg-active-soft); color: var(--accent); } .emoji-grid { max-height: 214px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; } .emoji-cat { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); padding: 8px 4px 2px; font-weight: 600; } .emoji-item { border: none; background: transparent; font-size: 23px; height: 40px; border-radius: 9px; transition: background .1s, transform .1s; } .emoji-item:hover { background: var(--bg-hover); transform: scale(1.15); } .sticker-grid { max-height: 214px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; } .sticker-item { border: none; background: transparent; font-size: 42px; height: 60px; border-radius: 12px; transition: background .1s, transform .1s; } .sticker-item:hover { background: var(--bg-hover); transform: scale(1.1); } /* ============================ Voice recording bar ============================ */ .rec-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-side); border-radius: 24px; padding: 6px 10px; box-shadow: var(--shadow); } .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; flex-shrink: 0; } .rec-time { font-variant-numeric: tabular-nums; font-weight: 600; } .rec-hint { color: var(--text-muted); font-size: 13px; flex: 1; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* ============================ Media in bubbles ============================ */ .bubble.has-media { padding: 4px 4px 6px; } .bubble.has-media .bubble-text { padding: 3px 7px 0; } .bubble.has-media .bubble-sender { padding: 3px 7px 0; } .bubble.has-media .bubble-meta { padding-inline: 7px; } .media-img { display: block; max-width: min(320px, 68vw); max-height: 380px; width: auto; height: auto; border-radius: 11px; cursor: pointer; object-fit: cover; } .media-video { display: block; max-width: min(340px, 72vw); border-radius: 11px; } /* Voice player */ .voice { display: flex; align-items: center; gap: 10px; padding: 4px 7px; min-width: min(190px, 100%); max-width: 100%; } .voice-play { width: 38px; height: 38px; border-radius: 50%; border: none; flex-shrink: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .voice-play .ic { width: 16px; height: 16px; } .voice-body { flex: 1; min-width: 0; } .voice-bar { height: 4px; background: rgba(127, 127, 127, .35); border-radius: 2px; overflow: hidden; cursor: pointer; } .voice-prog { height: 100%; width: 0; background: var(--accent); } .voice-dur { font-size: 12px; color: var(--text-muted); } .msg-row.out .voice-dur { color: rgba(0, 0, 0, .45); } [data-theme="dark"] .msg-row.out .voice-dur { color: rgba(255, 255, 255, .6); } .voice-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .voice-speed { border: none; background: rgba(127, 127, 127, .18); color: var(--text-muted); font-size: 11px; font-weight: 600; border-radius: 9px; padding: 2px 7px; } .msg-row.out .voice-speed { background: rgba(0, 0, 0, .12); } .waveform { position: relative; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; } .wf-bar { flex: 1; min-width: 2px; background: currentColor; opacity: .95; border-radius: 2px; } .voice.has-wave { color: var(--accent); } .msg-row.out .voice.has-wave { color: var(--bubble-out-text); } /* Overlay dims the still-unplayed portion of the waveform (shrinks as it plays). */ .wf-mask { position: absolute; inset-block: -2px; inset-inline-end: 0; width: 100%; background: var(--bubble-in); opacity: .6; pointer-events: none; } .msg-row.out .wf-mask { background: var(--bubble-out); } .voice.has-wave .voice-dur { color: var(--text-muted); } /* Audio (music) + file cards */ .file-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-decoration: none; color: inherit; min-width: min(190px, 100%); max-width: min(260px, 100%); } .file-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .file-info { min-width: 0; display: flex; flex-direction: column; } .file-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-size { font-size: 12px; color: var(--text-muted); } .audio-el { width: min(240px, 100%); margin-top: 4px; } /* Sticker messages (no bubble chrome) */ .bubble.is-sticker { background: transparent !important; box-shadow: none !important; padding: 0 !important; } .bubble.is-sticker .bubble-meta { padding-inline: 4px; } /* Emoji-only messages render large on a transparent bubble. */ .bubble.is-jumbo { background: transparent !important; box-shadow: none !important; padding: 0 !important; } .bubble.is-jumbo .bubble-meta { padding-inline: 4px; } .bubble-text.jumbo { line-height: 1.1; } .bubble-text.jumbo-1 { font-size: 52px; } .bubble-text.jumbo-2 { font-size: 44px; } .bubble-text.jumbo-3 { font-size: 38px; } .sticker-emoji { font-size: 92px; line-height: 1.05; user-select: none; } .sticker-img { max-width: 160px; max-height: 160px; } /* Photo/video album grid */ .album { display: grid; gap: 3px; border-radius: 11px; overflow: hidden; max-width: min(360px, 74vw); } .album-1 { grid-template-columns: 1fr; } .album-2, .album-3, .album-4 { grid-template-columns: 1fr 1fr; } .album-3 .album-cell:first-child { grid-column: 1 / -1; } .album-cell { position: relative; aspect-ratio: 1 / 1; cursor: pointer; overflow: hidden; background: rgba(127, 127, 127, .12); } .album-media { width: 100%; height: 100%; object-fit: cover; display: block; } .album-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); color: #fff; border-radius: 50%; pointer-events: none; } .album-more { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; } /* ============================ Read ticks ============================ */ .ticks { display: inline-flex; color: var(--text-muted); flex-shrink: 0; } .ticks svg { width: 16px; height: 12px; } .ticks.read { color: #34b7f1; } .msg-row.out .ticks:not(.read) { color: rgba(0, 0, 0, .42); } [data-theme="dark"] .msg-row.out .ticks:not(.read) { color: rgba(255, 255, 255, .55); } .dialog-tick { display: inline-flex; vertical-align: middle; margin-inline-end: 3px; color: var(--text-muted); } .dialog-tick.read { color: #34b7f1; } .dialog-tick svg { width: 15px; height: 11px; } /* ============================ Lightbox ============================ */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox-img { max-width: 94vw; max-height: 90vh; border-radius: 10px; } .lightbox-close { position: absolute; inset-block-start: 18px; inset-inline-end: 22px; background: rgba(255, 255, 255, .14); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255, 255, 255, .26); } .lightbox-download { inset-inline-end: 74px; } .lightbox-img { transition: transform .05s linear; touch-action: none; } .lightbox-nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .14); color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox-nav:hover { background: rgba(255, 255, 255, .26); } .lightbox-prev { inset-inline-start: 18px; } .lightbox-next { inset-inline-end: 18px; } .lightbox-count { position: absolute; inset-block-start: 22px; inset-inline-start: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .35); padding: 4px 12px; border-radius: 14px; } /* ============================ Upload toast ============================ */ .upload-toast { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 200; background: var(--bg-side); color: var(--text); padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; font-size: 14px; } .upload-pct { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 38px; text-align: end; } .spinner { width: 18px; height: 18px; border: 2.5px solid var(--bg-hover); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================ Messaging UX ============================ */ .messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; } .messages-wrap .messages { flex: 1; } /* When a textured wallpaper is set it's painted on the whole .chat-panel column; make the header/topic/pinned bars and the composer translucent so that one continuous wallpaper shows through the entire chat (Telegram-style frosting), instead of only the middle message strip getting a background. */ .chat-panel.has-wallpaper .chat-header, .chat-panel.has-wallpaper .topic-bar, .chat-panel.has-wallpaper .pinned-bar { background: color-mix(in srgb, var(--header-bg) 68%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .chat-panel.has-wallpaper .composer { background: color-mix(in srgb, var(--bg-panel) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .date-sep { align-self: center; margin: 10px 0 6px; } .date-sep span { background: rgba(0, 0, 0, .13); color: #fff; font-size: 12.5px; padding: 3px 13px; border-radius: 13px; } [data-theme="dark"] .date-sep span { background: rgba(0, 0, 0, .4); } .unread-divider { align-self: stretch; text-align: center; font-size: 12.5px; color: var(--accent); border-top: 1px solid var(--accent); margin: 8px 0; opacity: .85; padding-top: 2px; } /* reply block inside a bubble */ .reply-block { border-inline-start: 3px solid var(--accent); padding: 3px 8px; margin-bottom: 4px; background: rgba(51, 144, 236, .09); border-radius: 6px; cursor: pointer; max-width: 100%; } .reply-block.deleted { color: var(--text-muted); font-style: italic; cursor: default; } .reply-name { font-size: 12.5px; font-weight: 600; color: var(--accent); } .reply-text { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(260px, 100%); } .fwd-from { font-size: 12.5px; color: var(--accent); margin-bottom: 3px; } /* text formatting */ .bubble-text .inline-code { background: rgba(0, 0, 0, .08); padding: 1px 5px; border-radius: 5px; font-family: ui-monospace, monospace; font-size: .92em; } [data-theme="dark"] .bubble-text .inline-code { background: rgba(255, 255, 255, .12); } .bubble-text .code-block { background: rgba(0, 0, 0, .08); padding: 9px 11px; border-radius: 9px; font-family: ui-monospace, monospace; font-size: .9em; white-space: pre-wrap; overflow-x: auto; margin: 4px 0; direction: ltr; text-align: left; } [data-theme="dark"] .bubble-text .code-block { background: rgba(0, 0, 0, .35); } .bubble-text .code-block { position: relative; } .bubble-text .code-block .code-lang { display: block; font-size: .78em; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; font-family: inherit; } .bubble-text .code-block code { font-family: inherit; background: none; padding: 0; } /* Spoiler: blurred, speckled cover until clicked. */ .bubble-text .spoiler { border-radius: 4px; cursor: pointer; transition: filter .15s, color .15s; color: transparent; filter: blur(5px); background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px); background-size: 6px 6px; -webkit-user-select: none; user-select: none; } [data-theme="dark"] .bubble-text .spoiler { background-color: rgba(255,255,255,.08); } .bubble-text .spoiler:not(.revealed) { color: rgba(0,0,0,.35); } [data-theme="dark"] .bubble-text .spoiler:not(.revealed) { color: rgba(255,255,255,.35); } .bubble-text .spoiler.revealed { color: inherit; filter: none; background: none; cursor: text; } /* Blockquote inside a message bubble. */ .bubble-text .msg-quote { border-inline-start: 3px solid var(--accent); padding: 2px 0 2px 9px; margin: 3px 0; opacity: .92; font-size: .96em; white-space: pre-wrap; } /* Media spoiler cover over a photo/video. */ .msg-media { position: relative; } .media-spoiler { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; display: flex; align-items: center; justify-content: center; overflow: hidden; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(20,20,25,.28); } .media-spoiler::after { content: '๐Ÿ‘'; font-size: 22px; opacity: .9; } .msg-link { color: var(--accent); text-decoration: none; } .msg-link:hover { text-decoration: underline; } .mention { color: var(--accent); cursor: pointer; font-weight: 500; } .edited { font-size: 11px; color: var(--text-muted); } .msg-row.out .edited { color: rgba(0, 0, 0, .42); } [data-theme="dark"] .msg-row.out .edited { color: rgba(255, 255, 255, .55); } /* reactions */ .reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .reaction { border: none; background: rgba(0, 0, 0, .06); border-radius: 12px; padding: 2px 9px; font-size: 13px; display: flex; align-items: center; gap: 4px; transition: transform .1s; } .reaction:hover { transform: scale(1.06); } .reaction span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .reaction.mine { background: var(--accent); color: #fff; } .reaction.mine span { color: #fff; } [data-theme="dark"] .reaction { background: rgba(255, 255, 255, .1); } /* message highlight (jump target) */ .msg-row.highlight .bubble { animation: hl 1.6s ease; } @keyframes hl { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow-sm); } } /* floating context menu */ .ctx-menu { position: fixed; z-index: 500; background: var(--bg-side); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; min-width: 190px; border: 1px solid var(--border); animation: rise .12s ease; } .ctx-reacts { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .ctx-react { border: none; background: transparent; font-size: 20px; border-radius: 8px; padding: 3px 4px; transition: transform .1s, background .1s; } .ctx-react:hover { background: var(--bg-hover); transform: scale(1.25); } .ctx-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; color: var(--text); font-size: 14.5px; padding: 9px 12px; border-radius: 9px; text-align: start; transition: background .12s; } .ctx-item:hover { background: var(--bg-hover); } .ctx-item.danger { color: var(--danger); } .ctx-ic { display: inline-flex; color: var(--text-muted); } .ctx-item.danger .ctx-ic { color: var(--danger); } /* reply / edit composer bar */ .reply-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-side); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; box-shadow: var(--shadow); border-inline-start: 3px solid var(--accent); } .reply-bar.editing { border-inline-start-color: #eda86c; } .reply-bar-icon { color: var(--accent); width: 20px; height: 20px; } .reply-bar-body { flex: 1; min-width: 0; } .reply-bar-name { font-size: 13px; font-weight: 600; color: var(--accent); } .reply-bar-text { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* pinned message bar */ .pinned-bar { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--header-bg); border-bottom: 1px solid var(--border); cursor: pointer; } .pin-ic { width: 17px; height: 17px; color: var(--accent); } .pinned-body { flex: 1; min-width: 0; border-inline-start: 2px solid var(--accent); padding-inline-start: 9px; } .pinned-title { font-size: 12.5px; font-weight: 600; color: var(--accent); } .pinned-text { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* scroll-to-bottom button */ .scroll-btn { position: absolute; inset-block-end: 14px; inset-inline-end: 16px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--bg-side); box-shadow: var(--shadow); color: var(--text-muted); display: flex; align-items: center; justify-content: center; } .scroll-btn:hover { color: var(--text); } .scroll-badge { position: absolute; inset-block-start: -4px; inset-inline-end: -2px; background: var(--badge); color: #fff; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; display: flex; align-items: center; justify-content: center; } /* ============================ In-chat search ============================ */ .chat-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--header-bg); border-bottom: 1px solid var(--border); } .chat-search .search-input { flex: 1; padding-inline-start: 14px; } .chat-search-results { position: absolute; inset-inline: 0; top: 100%; z-index: 20; background: var(--bg-side); box-shadow: var(--shadow); max-height: 340px; overflow-y: auto; border-bottom: 1px solid var(--border); } .chat-search-item { padding: 9px 16px; cursor: pointer; border-bottom: 1px solid var(--border); } .chat-search-item:hover { background: var(--bg-hover); } .cs-name { font-size: 13px; font-weight: 600; color: var(--accent); display: flex; justify-content: space-between; gap: 8px; } .cs-time { font-size: 11.5px; color: var(--text-muted); font-weight: 400; } .cs-text { font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-text mark { background: rgba(51, 144, 236, .25); color: inherit; border-radius: 3px; padding: 0 1px; } /* ============================ Chat info / admin ============================ */ .info-admin { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; } .info-admin-btns { display: flex; gap: 8px; } .info-admin-btns .btn { flex: 1; } .info-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 5px 2px; cursor: pointer; } .info-toggle input { width: 42px; height: 24px; appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--bg-hover); border-radius: 12px; position: relative; transition: background .2s; flex-shrink: 0; border: 1px solid var(--border); } .info-toggle input::after { content: ''; position: absolute; inset-block: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .info-toggle input:checked { background: var(--accent); border-color: var(--accent); } [dir="ltr"] .info-toggle input:checked::after { transform: translateX(18px); } [dir="rtl"] .info-toggle input:checked::after { transform: translateX(-18px); } .invite-link { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .invite-link .field { font-size: 13px; } .invite-link-btns { display: flex; gap: 8px; } .invite-link-btns .btn { flex: 1; } .info-requests { border-bottom: 1px solid var(--border); padding-bottom: 8px; } .req-actions { margin-inline-start: auto; display: flex; gap: 6px; } .req-btn { width: 32px; height: 32px; border-radius: 50%; border: none; font-size: 15px; } .req-btn.ok { background: var(--success); color: #fff; } .req-btn.no { background: var(--bg-hover); color: var(--danger); } .req-btn:hover { filter: brightness(1.06); } .member-menu-btn { margin-inline-start: auto; border: none; background: transparent; color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; flex-shrink: 0; } .member-menu-btn:hover { background: var(--bg-hover); color: var(--text); } .picker-item .picker-role + .member-menu-btn { margin-inline-start: 6px; } /* ============================ @mention autocomplete ============================ */ .mention-box { background: var(--bg-side); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 8px; max-height: 240px; overflow-y: auto; overflow-x: hidden; } .mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; } .mention-item:hover { background: var(--bg-hover); } .mention-item .avatar { width: 36px; height: 36px; font-size: 14px; } .mention-name { font-size: 14px; font-weight: 600; } .mention-user { font-size: 12.5px; color: var(--text-muted); } /* ============================ Attach menu + drag/drop ============================ */ .attach-menu { background: var(--bg-side); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; margin-bottom: 8px; width: max-content; border: 1px solid var(--border); } .attach-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; color: var(--text); font-size: 14.5px; padding: 9px 18px 9px 12px; border-radius: 9px; text-align: start; } .attach-item:hover { background: var(--bg-hover); } .attach-item .ic { width: 20px; height: 20px; color: var(--text-muted); } .drop-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(51, 144, 236, .12); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .drop-inner { border: 2.5px dashed var(--accent); border-radius: 18px; padding: 40px 60px; text-align: center; color: var(--accent); font-size: 16px; font-weight: 600; background: var(--bg-side); } .drop-icon { width: 46px; height: 46px; margin: 0 auto 10px; } /* ============================ Link preview ============================ */ .link-preview { display: flex; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: rgba(51, 144, 236, .08); border-inline-start: 3px solid var(--accent); text-decoration: none; color: inherit; max-width: min(320px, 100%); } .link-preview:hover { background: rgba(51, 144, 236, .14); } .lp-img { width: 56px; height: 56px; border-radius: 7px; background-size: cover; background-position: center; flex-shrink: 0; } .lp-body { min-width: 0; } .lp-site { font-size: 11.5px; color: var(--accent); font-weight: 600; } .lp-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-desc { font-size: 12.5px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================ Polls ============================ */ .poll { min-width: min(240px, 100%); max-width: min(320px, 100%); } .poll-q { font-size: 15px; font-weight: 600; margin-bottom: 2px; } .poll-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } .poll-opts { display: flex; flex-direction: column; gap: 9px; } .poll-opt { border: none; background: transparent; text-align: start; padding: 2px 0; width: 100%; color: inherit; } .poll-opt-top { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 4px; } .poll-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .poll-opt.mine .poll-check { background: var(--accent); color: #fff; } .poll-opt-text { flex: 1; } .poll-pct { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .poll-bar { display: block; height: 5px; background: rgba(127, 127, 127, .2); border-radius: 3px; overflow: hidden; } .poll-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; } .poll-total { font-size: 12px; color: var(--text-muted); margin-top: 10px; } .poll-options { display: flex; flex-direction: column; gap: 8px; } .poll-opt-row { display: flex; align-items: center; gap: 8px; } .poll-opt-row .field { flex: 1; } .poll-opt-del { border: none; background: transparent; color: var(--text-muted); font-size: 15px; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; } .poll-opt-del:hover { background: var(--bg-hover); color: var(--danger); } /* ============================ Profile / privacy / sessions ============================ */ .user-fields { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .user-field { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .uf-label { color: var(--text-muted); font-size: 13.5px; } .uf-val { font-size: 14.5px; font-weight: 500; text-align: end; word-break: break-word; } /* Account ids: monospaced and click-to-copy */ .copyable { font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; letter-spacing: .3px; } .copyable:hover { color: var(--accent); } .priv-section { padding: 10px 0; border-bottom: 1px solid var(--border); } .priv-section:last-of-type { border-bottom: none; } .priv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .priv-head .btn { padding: 4px 10px; font-size: 13px; } .priv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 2px; } .priv-select { border: 1.5px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 14px; padding: 7px 10px; cursor: pointer; outline: none; transition: border-color .15s; } .priv-select:focus { border-color: var(--accent); } .sessions-list { display: flex; flex-direction: column; gap: 2px; } .session-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--border); } .session-row:last-child { border-bottom: none; } .session-info { flex: 1; min-width: 0; } .session-dev { font-size: 14px; font-weight: 500; } .session-current { color: var(--success); font-size: 12px; font-weight: 600; } .session-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ============================ Wallpaper picker ============================ */ .wallpaper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .wp-cell { height: 92px; border-radius: 12px; border: 2px solid transparent; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background-size: cover; } .wp-cell.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .wp-label { width: 100%; text-align: center; font-size: 12px; color: #333; background: rgba(255, 255, 255, .78); padding: 4px 0; backdrop-filter: blur(2px); } /* ============================ Phase 8: archive, drafts, search hits ============================ */ .archive-row .archive-icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--text-muted); } .archive-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; font-weight: 600; font-size: 15px; cursor: pointer; } .archive-head .icon-btn { width: 34px; height: 34px; } .draft-label { color: var(--danger); margin-inline-end: 4px; font-weight: 500; } .dialog.active .draft-label { color: #ffd7d5; } .search-hit .dialog-preview mark { background: rgba(51, 144, 236, .25); color: inherit; border-radius: 3px; padding: 0 1px; } /* Channel post view counter */ .views { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); } .views .ic { width: 13px; height: 13px; } .msg-row.out .views { color: rgba(0, 0, 0, .42); } [data-theme="dark"] .msg-row.out .views { color: rgba(255, 255, 255, .55); } /* ---- Shared media / files / links ---- */ .shared-wrap { border-top: 1px solid var(--border); padding-top: 10px; } .shared-tabs { display: flex; gap: 6px; margin-bottom: 10px; } .shared-tab { flex: 1; border: none; background: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 600; padding: 7px 8px; border-radius: 9px; transition: background .15s, color .15s; } .shared-tab:hover { background: var(--bg-hover); } .shared-tab.active { background: var(--bg-active-soft); color: var(--accent); } .shared-body { max-height: 260px; overflow-y: auto; } .shared-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 3px; } .shared-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; cursor: pointer; background: var(--bg-hover); } .shared-cell img, .shared-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .shared-cell:hover img { filter: brightness(.85); } .shared-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%; pointer-events: none; } .shared-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; cursor: pointer; border-radius: 8px; } .shared-row:hover { background: var(--bg-hover); } .shared-row .file-icon { width: 38px; height: 38px; } /* ---- Multi-select ---- */ .select-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 60px; background: var(--header-bg); border-bottom: 1px solid var(--border); } .select-count { flex: 1; font-weight: 600; font-size: 15px; } .app.selecting .chat-header { display: none; } /* Suppress the normal affordances while picking messages */ .app.selecting .bubble { cursor: pointer; } .app.selecting .msg-row { border-radius: 10px; transition: background .12s; } .app.selecting .msg-row:hover { background: rgba(51, 144, 236, .07); } .msg-row.selected { background: rgba(51, 144, 236, .16); } .app.selecting .composer { display: none; } /* ============================ Responsive ============================ */ .mobile-only { display: none; } @media (max-width: 900px) { .messages { padding-inline: 4%; } .composer { padding-inline: 4%; } } @media (max-width: 720px) { .sidebar { width: 100%; } .app.chat-open .sidebar { display: none; } .app:not(.chat-open) .chat-panel { display: none; } .app:not(.chat-open) .drawer { transform: translateX(-105%); } [dir="rtl"] .app:not(.chat-open) .drawer { transform: translateX(105%); } .drawer { width: 84%; max-width: 320px; } .mobile-only { display: flex; } .messages { padding: 12px 10px; } .composer { padding: 8px 10px 12px; } .bubble { max-width: 86%; } .media-img { max-width: 78vw; } .modal { padding: 20px 18px; border-radius: 14px; } /* Keep the composer clear of the iOS home indicator / notch. */ .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .sidebar-top, .chat-header { padding-top: max(8px, env(safe-area-inset-top)); } } /* Narrow phones (iPhone X/SE class, โ‰ค400px): shrink the composer controls so the input keeps a usable width, and let media fill the bubble. */ @media (max-width: 400px) { .messages { padding: 10px 8px; } .composer { padding-inline: 8px; } .composer-box { gap: 5px; } .composer-field { padding-inline-start: 12px; } .composer-icon { width: 36px; height: 36px; } .composer-icon .ic { width: 20px; height: 20px; } .composer-icon.round, .send-btn { width: 42px; height: 42px; } .bubble { max-width: 88%; } .media-img, .media-video, .album { max-width: 100%; } .sticker-emoji { font-size: 76px; } .chat-header { gap: 6px; padding-inline: 10px; } .chat-header-avatar { width: 36px; height: 36px; font-size: 14px; margin-inline-start: 4px; } .chat-header-center { max-width: 44%; } } /* ============================ Phase 9/10 โ€” sticker packs, GIF, PWA ============================ */ /* Image sticker packs inside the sticker tab */ .sticker-pack { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; } .sticker-pack-title { font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 10px 4px 4px; } .sticker-item-img { display: flex; align-items: center; justify-content: center; height: 66px; cursor: pointer; } .sticker-item-img img { width: 58px; height: 58px; object-fit: contain; pointer-events: none; } .sticker-img { width: 130px; height: 130px; object-fit: contain; } /* GIF picker */ .gif-panel { display: flex; flex-direction: column; gap: 8px; } .gif-search { width: 100%; } .gif-grid { max-height: 210px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; } .gif-item { border: none; background: var(--bg-hover); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; padding: 0; } .gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .gif-item:hover { outline: 2px solid var(--accent); } .gif-loading { grid-column: 1 / -1; display: flex; justify-content: center; padding: 20px; } .gif-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 22px 8px; } .media-gif { max-width: 260px; } /* Pending (offline) tick โ€” a clock icon */ .ticks.pending { color: var(--text-muted); } .ticks.pending .ic { width: 13px; height: 13px; } /* Swipe-to-reply hint */ .bubble { will-change: transform; } .bubble.swipe-reply { box-shadow: inset 3px 0 0 var(--accent); } [dir="rtl"] .bubble.swipe-reply { box-shadow: inset -3px 0 0 var(--accent); } /* Offline banner (top of the app) */ body.is-offline::before { content: attr(data-offline-label); position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 400; background: #b23; color: #fff; text-align: center; font-size: 12.5px; padding: 3px; } /* PWA install banner */ .install-banner { position: fixed; inset-block-end: 16px; inset-inline: 16px; z-index: 350; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--bg-side); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 14px; padding: 10px 12px; } .install-icon { color: var(--accent); display: flex; } .install-text { flex: 1; font-size: 13.5px; } .install-btn { border: none; background: var(--accent); color: #fff; font-weight: 600; padding: 7px 16px; border-radius: 10px; cursor: pointer; } .install-btn:hover { background: var(--accent-strong); } .install-dismiss { border: none; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px 6px; } /* ============================ Phase 11/12 โ€” admin, calls, secret, accounts ============================ */ /* Admin-only drawer items (specificity must beat `.drawer-menu li`) */ .drawer-menu li.admin-only { display: none; } body.is-site-admin .drawer-menu li.admin-only { display: flex; } /* Settings links */ .settings-link { display: block; width: 100%; text-align: start; border: none; background: transparent; color: var(--text); font-size: 14.5px; padding: 10px 4px; cursor: pointer; border-radius: 8px; } .settings-link:hover { background: var(--bg-hover); } .settings-link.danger { color: var(--danger); } /* ---- Telegram-style Settings sheet ---- */ .avatar-xl { width: 96px; height: 96px; font-size: 34px; } .modal-sheet { padding-top: 8px; } .sheet-head { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; } .sheet-head .modal-title { flex: 1; } .sheet-head #settings-edit-btn, .sheet-head #settings-edit-back, .sheet-head #appearance-back { flex: none; } .settings-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 0 16px; } .settings-pname { font-size: 20px; font-weight: 700; } .settings-psub { font-size: 13.5px; color: var(--text-muted); } /* Grouped card list */ .tg-list { background: var(--bg-hover); border-radius: 12px; overflow: hidden; margin-bottom: 14px; } [data-theme="dark"] .tg-list { background: rgba(255, 255, 255, .04); } .tg-list > * + * { border-top: 1px solid var(--border); } /* Info row: value on top, gray label below (Telegram profile style) */ .tg-info { padding: 10px 14px; cursor: default; } .tg-info.copyable { cursor: pointer; } .tg-info.copyable:hover { background: var(--bg-active-soft); } .tg-info-val { font-size: 15px; color: var(--text); word-break: break-word; min-height: 18px; } .tg-info-key { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } /* Action row: colored round icon + label + chevron */ .tg-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border: none; background: none; cursor: pointer; color: var(--text); font-size: 15px; text-align: start; transition: background .12s; } .tg-row:hover { background: var(--bg-active-soft); } .tg-row-label { flex: 1; min-width: 0; } .tg-chev { width: 18px; height: 18px; color: var(--text-muted); flex: none; opacity: .7; } .tg-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; } .tg-ic svg { width: 19px; height: 19px; } .tg-ic-priv { background: #e0564f; } .tg-ic-appear { background: #f0a742; } .tg-ic-bots { background: #4bb34b; } .tg-ic-export { background: #3390ec; } .tg-ic-del { background: #b0392f; } .tg-ic-status { background: #eab30a; font-size: 17px; } .tg-row.danger .tg-row-label { color: var(--danger); } .tg-row-value { font-size: 19px; flex: none; } /* Emoji status shown next to a name (header, drawer, profile). */ .emoji-status { font-size: .92em; margin-inline-start: 5px; vertical-align: middle; } .emoji-status:empty { margin: 0; } /* Emoji-status picker popup. */ .emoji-status-pop { position: fixed; z-index: 560; background: var(--bg-elevated, var(--card, #fff)); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.24); width: 288px; max-width: calc(100vw - 16px); } [data-theme="dark"] .emoji-status-pop { background: var(--bg-elevated, #232e3c); } .emoji-status-pop.hidden { display: none; } .emoji-status-pop .esp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 190px; overflow-y: auto; } .emoji-status-pop .esp-item { border: none; background: none; cursor: pointer; font-size: 22px; padding: 4px 0; border-radius: 8px; line-height: 1.2; } .emoji-status-pop .esp-item:hover { background: var(--bg-active-soft); } .emoji-status-pop .esp-clear { width: 100%; margin-top: 8px; padding: 8px; border: none; cursor: pointer; background: var(--bg-active-soft); color: var(--danger); border-radius: 9px; font-size: 13.5px; } /* Composer text-format menu (select text โ†’ floating menu / right-click). */ .format-menu { position: fixed; z-index: 560; display: flex; gap: 2px; padding: 4px; background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 8px 26px rgba(0,0,0,.22); } [data-theme="dark"] .format-menu { background: #232e3c; } .format-menu.hidden { display: none; } .fm-btn { border: none; background: none; cursor: pointer; color: var(--text); min-width: 34px; height: 32px; border-radius: 8px; font-size: 16px; padding: 0 7px; display: flex; align-items: center; justify-content: center; } .fm-btn:hover { background: var(--bg-active-soft); } .fm-btn .fm-mono { font-family: ui-monospace, monospace; font-size: 12.5px; } .fm-btn .fm-spoiler { letter-spacing: -1px; opacity: .6; } /* ---- Full-screen profile page (Telegram-style) ---- */ .profile-page { position: absolute; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; transform: translateX(12%); opacity: 0; pointer-events: none; transition: transform .24s cubic-bezier(.2,.8,.3,1), opacity .2s; } .profile-page.open { transform: none; opacity: 1; pointer-events: auto; } .profile-topbar { display: flex; align-items: center; gap: 6px; padding: 10px 8px; min-height: 56px; border-bottom: 1px solid var(--border); background: var(--header-bg); } .profile-topbar-title { flex: 1; font-size: 17px; font-weight: 600; } .profile-scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; } .profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px 18px; } .profile-avatar { width: 110px; height: 110px; font-size: 40px; } .profile-name { font-size: 23px; font-weight: 700; margin-top: 6px; } .profile-status { font-size: 14px; color: var(--text-muted); } .profile-status.online { color: var(--accent); } /* Action button row: call ยท video ยท mute ยท search ยท more */ .profile-actions { display: flex; gap: 8px; padding: 4px 12px 14px; max-width: 560px; margin: 0 auto; width: 100%; } .pa-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: none; cursor: pointer; border-radius: 12px; background: var(--bg-hover); color: var(--accent); font-size: 12px; font-weight: 500; transition: background .12s; } [data-theme="dark"] .pa-btn { background: rgba(255,255,255,.06); } .pa-btn:hover { background: var(--bg-active-soft); } .pa-btn .ic { width: 24px; height: 24px; } .pa-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pa-btn.hidden { display: none; } .profile-info, .profile-page .tg-list { max-width: 560px; margin: 0 auto 14px; width: calc(100% - 24px); } /* Channel/group info page: red Leave button + centred link/description list. */ .pa-btn.pa-danger { color: var(--danger); } /* flex-shrink:0 โ€” the modal is a scrolling flex column and .tg-list's overflow:hidden otherwise lets the flex algorithm collapse this row to height 0 (invisible). */ #info-list.info-list { max-width: 560px; margin: 0 auto 14px; width: calc(100% - 24px); flex-shrink: 0; } /* ---- Discover page: stacked horizontal rows (stories, new channels, new groups) ---- */ .discover-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; } .discover-sec { margin-top: 6px; } .discover-sec-title { font-size: 14px; font-weight: 600; color: var(--text-muted); padding: 14px 16px 6px; } .discover-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 14px 10px; scrollbar-width: none; } .discover-row::-webkit-scrollbar { display: none; } .discover-card { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 8px 4px; border-radius: 12px; transition: background .12s; } .discover-card:hover { background: var(--bg-hover); } .discover-card-avatar { width: 62px; height: 62px; font-size: 24px; } .discover-card-name { font-size: 13px; font-weight: 500; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .discover-card-sub { font-size: 11.5px; color: var(--text-muted); } .discover-empty { color: var(--text-muted); font-size: 13px; padding: 4px 16px 12px; } /* ---- Group/channel info shown as a full-screen page (not a centred dialog) ---- */ .modal-overlay.as-page { padding: 0; background: var(--bg); backdrop-filter: none; align-items: stretch; justify-content: center; } .modal-overlay.as-page > .modal { width: 100%; max-width: 620px; height: 100%; max-height: 100%; border-radius: 0; padding: 0 0 24px; gap: 12px; animation: slidePage .24s cubic-bezier(.2, .8, .3, 1); } @keyframes slidePage { from { transform: translateX(6%); opacity: .5; } to { transform: none; opacity: 1; } } /* Inset every section except the full-bleed top bar. */ .modal-overlay.as-page > .modal > :not(.info-topbar) { margin-inline: 20px; } .info-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 10px 8px; min-height: 56px; border-bottom: 1px solid var(--border); background: var(--header-bg); } .info-topbar-title { font-size: 17px; font-weight: 600; } #info-edit { margin-inline-start: auto; } /* Public @username field on the edit-chat page */ .chatedit-uname { display: flex; align-items: center; gap: 8px; } .chatedit-uname .chatedit-at { color: var(--text-muted); font-size: 16px; } .chatedit-uname .field { flex: 1; } .chatedit-hint { font-size: 12.5px; color: var(--text-muted); margin: -2px 0 4px; line-height: 1.5; } /* On a page the back arrow closes it, so the redundant bottom "Close" button hides. */ .modal-overlay.as-page #info-close { display: none; } .modal-overlay.as-page .info-head { padding-top: 18px; } /* Slow-mode / TTL selects reuse the toggle row; ban list */ .info-banned { margin-top: 8px; } .perms-list .priv-row { padding: 8px 2px; } /* Self-destruct + encrypted markers */ .self-destruct { display: inline-flex; opacity: .6; margin-inline-end: 4px; vertical-align: middle; } .self-destruct .ic { width: 12px; height: 12px; } .enc-text { font-style: italic; opacity: .85; } #chat-secret-btn.active { color: var(--accent); background: var(--bg-active-soft); } /* Report */ #report-reason { resize: vertical; min-height: 68px; } /* Bots */ .bot-row { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .bot-name { font-weight: 600; } .bot-field { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; } .bot-head { display: flex; align-items: center; gap: 10px; } .bot-head .bot-name-input { flex: 1; font-weight: 600; } .bot-avatar { width: 48px; height: 48px; flex: none; font-size: 18px; } .bot-avatar.avatar-editable::after { width: 20px; height: 20px; font-size: 10px; border-width: 2px; } .bot-del { flex: none; color: var(--danger); } .bot-hint { font-size: 11.5px; color: var(--text-muted); margin-top: -2px; } .create-row { display: flex; gap: 8px; } .create-row .field { flex: 1; } /* Admin panel */ .admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .admin-stat { background: var(--bg-hover); border-radius: 12px; padding: 12px 6px; text-align: center; } .admin-stat-n { font-size: 22px; font-weight: 700; color: var(--accent); } .admin-stat-l { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .report-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); } .report-meta { flex: 1; display: flex; flex-direction: column; font-size: 13px; } .report-meta span { color: var(--text-muted); font-size: 12px; } /* WebRTC call overlay */ .call-overlay { position: fixed; inset: 0; z-index: 500; background: #0b141a; display: flex; flex-direction: column; align-items: center; justify-content: center; } .call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b141a; } .call-local { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 110px; height: 150px; object-fit: cover; border-radius: 12px; background: #1c2b36; box-shadow: 0 2px 12px rgba(0,0,0,.5); z-index: 2; } .call-top { position: relative; z-index: 2; text-align: center; color: #fff; margin-top: -60px; } .call-top .avatar { margin: 0 auto 12px; width: 92px; height: 92px; font-size: 34px; } .call-name { font-size: 22px; font-weight: 600; } .call-state { font-size: 14px; opacity: .8; margin-top: 4px; } /* Once a video call connects, the peer's video fills the screen: hide the avatar and status and pin just the name to the top-center (Telegram-style). */ .call-overlay.call-video.connected .call-top { position: absolute; inset-block-start: 22px; inset-inline: 0; margin: 0; padding: 0 130px; text-shadow: 0 1px 6px rgba(0,0,0,.7); } .call-overlay.call-video.connected .call-avatar, .call-overlay.call-video.connected .call-state { display: none; } .call-overlay.call-video.connected .call-name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .call-controls { position: absolute; inset-block-end: 42px; z-index: 3; display: flex; gap: 20px; } .call-btn { width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; } .call-btn:hover { background: rgba(255,255,255,.28); } .call-btn.off { background: #fff; color: #0b141a; } .call-btn .ic { width: 26px; height: 26px; } .call-accept { background: #4caf50; } .call-accept:hover { background: #43a047; } .call-hangup { background: #f0453a; } .call-hangup:hover { background: #e03b30; } /* Accounts switcher active mark reuses picker-check */ @media (max-width: 400px) { .call-local { width: 88px; height: 120px; } .admin-stats { grid-template-columns: repeat(2, 1fr); } } /* ============================ Phase 13 โ€” Stories ============================ */ /* Story bar above the chat list */ .story-bar { display: flex; gap: 4px; padding: 10px 8px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--border); scrollbar-width: none; flex: none; } .story-bar::-webkit-scrollbar { display: none; } .story-cell { position: relative; flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 2px 0; } .story-ring { width: 62px; height: 62px; border-radius: 50%; padding: 3px; display: flex; align-items: center; justify-content: center; } .story-ring.unseen { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .story-ring.seen { background: var(--border); } .story-ring.none { background: transparent; box-shadow: inset 0 0 0 2px var(--border); } .story-avatar { width: 100%; height: 100%; font-size: 20px; box-shadow: 0 0 0 2px var(--bg-side); } .story-add { position: absolute; top: 42px; inset-inline-start: 42px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg-side); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .story-add .ic { width: 12px; height: 12px; } .story-label { font-size: 12px; color: var(--text); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /* Compose preview */ .story-preview { width: 100%; aspect-ratio: 9 / 14; max-height: 46vh; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .story-preview-media { width: 100%; height: 100%; object-fit: contain; } /* Full-screen viewer */ .story-viewer { position: fixed; inset: 0; z-index: 400; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sv-progress { position: absolute; top: 0; inset-inline: 0; display: flex; gap: 4px; padding: 8px 10px 0; z-index: 3; } .sv-seg { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; } .sv-seg-fill { height: 100%; width: 0; background: #fff; } .sv-top { position: absolute; top: 14px; inset-inline: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 4px 12px; } .sv-author { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; } .sv-author .avatar { width: 36px; height: 36px; font-size: 14px; } .sv-name { color: #fff; font-weight: 600; font-size: 14px; } .sv-time { color: rgba(255,255,255,.75); font-size: 12px; } .sv-icon { width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .sv-icon:hover { background: rgba(255,255,255,.15); } .sv-stage { width: 100%; max-width: 460px; height: 100%; max-height: 100vh; display: flex; align-items: center; justify-content: center; } .sv-media { max-width: 100%; max-height: 100%; object-fit: contain; } .sv-caption { position: absolute; bottom: 92px; inset-inline: 0; z-index: 3; padding: 0 18px; text-align: center; color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .sv-caption.hidden { display: none; } .sv-nav { position: absolute; top: 60px; bottom: 90px; width: 34%; z-index: 2; cursor: pointer; } .sv-prev { inset-inline-start: 0; } .sv-next { inset-inline-end: 0; } .sv-foot { position: absolute; bottom: 0; inset-inline: 0; z-index: 3; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; background: linear-gradient(transparent, rgba(0,0,0,.5)); } .sv-reacts { display: flex; justify-content: center; gap: 6px; } .sv-react { border: none; background: rgba(255,255,255,.12); border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; transition: transform .1s; } .sv-react:hover { transform: scale(1.15); background: rgba(255,255,255,.2); } .sv-react.picked { background: rgba(255,255,255,.32); } .sv-reply { display: flex; align-items: center; gap: 8px; } .sv-reply-input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; border-radius: 22px; padding: 10px 16px; font-size: 14px; outline: none; } .sv-reply-input::placeholder { color: rgba(255,255,255,.6); } .sv-viewers { position: absolute; bottom: 16px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; border: none; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; padding: 8px 16px; border-radius: 22px; font-size: 14px; } [dir="rtl"] .sv-viewers { transform: translateX(50%); } .sv-viewers .ic { width: 18px; height: 18px; } body.sv-open { overflow: hidden; } /* Viewers list sheet โ€” must sit above the story viewer (z 400), not behind it */ #story-viewers-overlay { z-index: 460; align-items: flex-end; } .modal.as-sheet { max-width: 460px; width: 100%; max-height: 70vh; display: flex; flex-direction: column; } .modal.as-sheet .picker-list { flex: 1; overflow-y: auto; border: none; } .svl-react { margin-inline-start: auto; font-size: 18px; } .empty-hint { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; } /* ============================ Phase 16 โ€” Bots & Mini Apps ============================ */ /* Inline keyboard attached under a bot message */ .inline-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .ikb-row { display: flex; gap: 4px; } .ikb-btn { flex: 1; min-width: 0; padding: 9px 10px; border: none; cursor: pointer; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-row.in .ikb-btn { background: var(--bg-hover); color: var(--accent); } [data-theme="dark"] .msg-row.in .ikb-btn { background: rgba(255,255,255,.07); } .ikb-btn:hover { filter: brightness(1.08); } .ikb-btn.loading { opacity: .5; pointer-events: none; } /* Bot command autocomplete rows */ .cmd-name { color: var(--accent); font-weight: 600; } .cmd-desc { color: var(--text-muted); font-size: 13px; margin-inline-start: 6px; } /* Inline-bot results panel (flows above the composer, like the mention box) */ .inline-box { margin-bottom: 8px; background: var(--bg-side); border: 1px solid var(--border); border-radius: 12px; max-height: 40vh; overflow-y: auto; box-shadow: var(--shadow); } .inline-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; } .inline-item:hover { background: var(--bg-hover); } .inline-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; } .inline-title { font-weight: 600; font-size: 14px; } .inline-desc { font-size: 12.5px; color: var(--text-muted); } /* Bot custom reply keyboard */ .reply-kb { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; background: var(--bg-hover); } .reply-kb-row { display: flex; gap: 5px; } .reply-kb-btn { flex: 1; padding: 11px 8px; border: none; cursor: pointer; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; } .reply-kb-btn:hover { background: var(--bg-active-soft); } /* Mini App runner */ .miniapp-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; } .miniapp-sheet { width: 100%; max-width: 480px; height: 92vh; background: var(--bg); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: rise .24s cubic-bezier(.2,.8,.3,1); } .miniapp-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--header-bg); } .miniapp-title { flex: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .miniapp-frame { flex: 1; width: 100%; border: none; background: #fff; } .miniapp-main { border: none; cursor: pointer; padding: 15px; font-size: 15px; font-weight: 600; background: var(--accent); color: #fff; } .miniapp-main.hidden { display: none; } /* ============================ Phase 15 โ€” Forum topics, boost, giveaway ============================ */ /* Topic strip under the chat header (forum groups) */ .topic-bar { display: flex; gap: 6px; padding: 7px 10px; overflow-x: auto; overflow-y: hidden; background: var(--header-bg); border-bottom: 1px solid var(--border); scrollbar-width: none; } .topic-bar::-webkit-scrollbar { display: none; } .topic-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 16px; border: none; cursor: pointer; background: var(--bg-hover); color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; } [data-theme="dark"] .topic-chip { background: rgba(255,255,255,.06); } .topic-chip.active { background: var(--accent); color: #fff; } .topic-chip .topic-n { font-size: 11px; opacity: .7; } .topic-chip.active .topic-n { opacity: .9; } .topic-add { padding: 6px 10px; } .topic-add .ic { width: 15px; height: 15px; } /* Author signature + anonymous tag on posts */ .bubble-sig { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-inline-end: 4px; } .anon-tag { font-size: 10px; font-weight: 500; opacity: .65; } /* Giveaway card */ .giveaway-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 18px; border-radius: 14px; margin: 2px 0 6px; background: linear-gradient(160deg, rgba(51,144,236,.14), rgba(224,86,79,.12)); border: 1px solid var(--border); min-width: min(260px, 70vw); } .gv-emoji { font-size: 40px; line-height: 1; } .gv-title { font-weight: 700; font-size: 16px; } .gv-prize { font-size: 14px; } .gv-meta, .gv-entries { font-size: 12.5px; color: var(--text-muted); } .gv-winners { font-size: 13px; font-weight: 600; color: var(--accent); } .gv-join { margin-top: 8px; min-width: 140px; } .gv-join.joined { opacity: .75; } /* Chat-info Phase 15 controls */ .info-p15 { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .info-p15 .boost-btn { justify-content: center; } /* Once boosted it's permanent โ€” show it as an active/done state, not greyed out. */ .boost-btn.boosted { color: var(--accent); opacity: 1; cursor: default; } .boost-btn.boosted:disabled { opacity: 1; } .similar-wrap { display: flex; flex-direction: column; gap: 2px; } /* ============================================================ Phase 17 โ€” Stars wallet, Premium, gifts, invoices ============================================================ */ /* Premium star badge next to a name. */ .premium-badge { display: inline-block; margin-inline-start: 4px; font-size: .9em; vertical-align: middle; color: #f0b429; text-shadow: 0 0 6px rgba(240,180,41,.4); background: linear-gradient(135deg, #ffcf5c, #f39c12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .premium-badge:empty { margin: 0; } .tg-ic-stars { background: #eab30a; font-size: 17px; } /* Gift card in a message bubble. */ .bubble.is-gift { background: transparent !important; box-shadow: none !important; padding: 0 !important; } .pay-card { border-radius: 14px; overflow: hidden; min-width: 200px; max-width: 280px; } .gift-card { text-align: center; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, #7b5cff, #a35cff 55%, #ff6ba8); } .gift-emoji { font-size: 44px; line-height: 1; } .gift-stars { font-size: 22px; font-weight: 800; margin-top: 4px; } .gift-label { font-size: 13px; opacity: .95; margin-top: 2px; } .gift-note { font-size: 13px; margin-top: 8px; background: rgba(255,255,255,.16); padding: 6px 10px; border-radius: 9px; } /* Invoice card in a message bubble. */ .invoice-card { border: 1px solid var(--border); background: var(--bg-active-soft); padding: 12px 14px; } .invoice-card.paid { opacity: .9; } .inv-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; } .inv-badge { font-size: 17px; } .inv-desc { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 2px; } .inv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .inv-price { font-weight: 700; font-size: 15px; } .inv-pay { padding: 6px 16px; } .inv-paid { color: #4bb34b; font-weight: 700; font-size: 14px; } .inv-await { color: var(--text-muted); font-size: 13px; } /* Wallet modal. */ .wallet-hero { text-align: center; padding: 12px 0 18px; } .wallet-balance { font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; } .wallet-balance .star-big { filter: drop-shadow(0 2px 6px rgba(240,180,41,.5)); } .wallet-premium-status { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; } .wallet-section-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin: 14px 2px 8px; } .wallet-chips { display: flex; flex-wrap: wrap; gap: 8px; } .wchip { border: 1px solid var(--border); background: var(--bg-active-soft); color: var(--text); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 600; } .wchip:hover { background: var(--bg-hover); border-color: var(--accent); } .wallet-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; } .wallet-history { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .wtx { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14px; } .wtx:last-child { border-bottom: none; } .wtx-delta.pos { color: #4bb34b; font-weight: 700; } .wtx-delta.neg { color: var(--danger); font-weight: 700; } .wtx-empty { color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 14px; } .gift-to { font-size: 14.5px; margin-bottom: 10px; color: var(--text-muted); } /* ============================================================ Visual polish pass โ€” patterned default wallpaper, depth & motion ============================================================ */ /* Default chat background: a theme-aware Telegram-style doodle wallpaper instead of a flat panel fill. (User-picked wallpapers still override it via the inline style applyWallpaper() sets.) */ .chat-panel.wp-default { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232e6da4' stroke-opacity='0.10' stroke-width='2'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Cpath d='M52 18l4 8-8 0z'/%3E%3Cpath d='M86 30c4-6 12-2 8 4-2 3-8 4-8 4s-6-1-8-4c-4-6 4-10 8-4z'/%3E%3Crect x='96' y='66' width='12' height='12' rx='3'/%3E%3Ccircle cx='64' cy='60' r='5'/%3E%3Cpath d='M24 84h12M30 78v12'/%3E%3Cpath d='M100 20l3 6-6 0z'/%3E%3Ccircle cx='16' cy='104' r='6'/%3E%3Cpath d='M60 100c3-5 10-2 7 3-2 2-7 3-7 3s-5-1-7-3c-3-5 4-8 7-3z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(160deg, #e6eef7, #d3e1f0); background-size: 120px 120px, cover; } [data-theme="dark"] .chat-panel.wp-default { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Cpath d='M52 18l4 8-8 0z'/%3E%3Cpath d='M86 30c4-6 12-2 8 4-2 3-8 4-8 4s-6-1-8-4c-4-6 4-10 8-4z'/%3E%3Crect x='96' y='66' width='12' height='12' rx='3'/%3E%3Ccircle cx='64' cy='60' r='5'/%3E%3Cpath d='M24 84h12M30 78v12'/%3E%3Cpath d='M100 20l3 6-6 0z'/%3E%3Ccircle cx='16' cy='104' r='6'/%3E%3Cpath d='M60 100c3-5 10-2 7 3-2 2-7 3-7 3s-5-1-7-3c-3-5 4-8 7-3z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(160deg, #131e2b, #0b131c); } /* Preview tile for the default wallpaper in the picker grid. */ .wp-cell.wp-default-preview { background-image: linear-gradient(160deg, #e6eef7, #d3e1f0); } [data-theme="dark"] .wp-cell.wp-default-preview { background-image: linear-gradient(160deg, #131e2b, #0b131c); } /* The login screen gets the same doodle texture over its gradient. */ .auth-screen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='2'%3E%3Ccircle cx='20' cy='24' r='7'/%3E%3Cpath d='M52 18l4 8-8 0z'/%3E%3Cpath d='M86 30c4-6 12-2 8 4-2 3-8 4-8 4s-6-1-8-4c-4-6 4-10 8-4z'/%3E%3Crect x='96' y='66' width='12' height='12' rx='3'/%3E%3Ccircle cx='64' cy='60' r='5'/%3E%3Cpath d='M24 84h12M30 78v12'/%3E%3Cpath d='M100 20l3 6-6 0z'/%3E%3Ccircle cx='16' cy='104' r='6'/%3E%3Cpath d='M60 100c3-5 10-2 7 3-2 2-7 3-7 3s-5-1-7-3c-3-5 4-8 7-3z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 120% at 50% 0%, #4ba3f0 0%, #3390ec 45%, #2170c4 100%); background-size: 130px 130px, cover; } /* Colored avatars get a soft top-light / bottom-shade so they read as spheres, photo avatars a hairline rim. (Inset shadows paint under the initials.) */ .avatar:not(.has-img) { box-shadow: inset 0 10px 14px -8px rgba(255, 255, 255, .35), inset 0 -10px 14px -8px rgba(0, 0, 0, .22); } .avatar.has-img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } /* Frosted pills for service messages and date chips (float over the wallpaper). */ .service-msg, .date-sep span { background: rgba(0, 0, 0, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } [data-theme="dark"] .service-msg, [data-theme="dark"] .date-sep span { background: rgba(0, 0, 0, .38); } .chat-empty-badge { background: color-mix(in srgb, var(--header-bg) 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Header floats over the chat with a soft shadow instead of a hard edge. */ .chat-header { box-shadow: 0 1px 3px rgba(16, 35, 47, .07); } [data-theme="dark"] .chat-header { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } /* Active dialog: a subtle gradient so the selection feels lit, not flat. */ .dialog.active { background: linear-gradient(135deg, var(--bg-active), color-mix(in srgb, var(--bg-active) 80%, #7cc0ff)); } .dialog-unread { box-shadow: 0 1px 4px color-mix(in srgb, var(--badge) 45%, transparent); } /* Composer: glow when focused; primary buttons get a soft gloss. */ .composer-field { transition: box-shadow .18s; } .composer-field:focus-within { box-shadow: var(--shadow), 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); } .btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); } /* Scroll-to-bottom button perks up on hover. */ .scroll-btn { transition: transform .15s, color .15s, box-shadow .15s; } .scroll-btn:hover { color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Softer, deeper modals + gentler dimming. */ .modal { border-radius: 18px; } .modal-overlay { background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); } /* Toast as a frosted pill. */ .toast { border-radius: 999px; background: rgba(30, 34, 40, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Emoji panel pops in like the rest of the floating chrome. */ .emoji-panel { animation: rise .18s cubic-bezier(.2, .8, .3, 1); } /* Opening a chat fades the view in briefly. */ .chat-view { animation: fadeIn .16s ease; } @keyframes fadeIn { from { opacity: 0; } } /* ============================================================ Chat page polish โ€” depth, rhythm, and Telegram-grade details ============================================================ */ /* Outgoing bubbles get a soft top-light gradient; the bottom edge stays exactly --bubble-out so the tail (drawn in that colour) matches seamlessly. */ .msg-row.out .bubble:not(.is-sticker):not(.is-jumbo) { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bubble-out) 84%, #ffffff), var(--bubble-out) 78%); } /* On big monitors the conversation stays a readable centred column, and a single bubble never stretches into an unreadable ribbon. */ .messages { padding-inline: max(7%, calc((100% - 940px) / 2)); } .composer { padding-inline: max(7%, calc((100% - 940px) / 2)); } .bubble { max-width: min(480px, 72%); } /* The date chip floats: it sticks to the top while its day scrolls by. */ .date-sep { position: sticky; inset-block-start: 6px; z-index: 5; } /* Group chats: sender avatar beside the bubble โ€” present on every row so the bubbles align, visible only on the last bubble of each sender run. */ .msg-row.with-av { align-items: flex-end; } .msg-avatar { width: 33px; height: 33px; font-size: 12.5px; flex: none; margin-inline-end: 8px; cursor: pointer; visibility: hidden; } .msg-row.in:not(:has(+ .msg-row.in.grp-cont)) .msg-avatar { visibility: visible; } /* Live-arriving messages slide up into place (initial history renders instantly). */ .msg-row.msg-new { animation: msgIn .24s cubic-bezier(.2, .9, .3, 1.05); } @keyframes msgIn { from { opacity: 0; transform: translateY(12px) scale(.97); } } /* Reactions read as round chips and press down when tapped. */ .reaction { border-radius: 999px; padding: 3px 10px; transition: transform .12s, filter .12s; } .reaction:active { transform: scale(.9); } /* Reply preview inside a bubble: rounder, and it lights up as a click target. */ .reply-block { border-radius: 8px; transition: background .12s; } .reply-block:not(.deleted):hover { background: rgba(51, 144, 236, .17); } /* "Unread messages" becomes a soft frosted band instead of a bare line. */ .unread-divider { border-top: none; border-radius: 10px; padding: 5px 0; font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* "โ€ฆis typing" gently pulses in the header. */ .chat-status.typing { animation: typingPulse 1.2s ease-in-out infinite; } @keyframes typingPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Composer icons warm to the accent on hover; send button gets the same gloss as primary buttons. */ .composer-icon:hover { color: var(--accent); } .send-btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); } /* Empty conversation: a friendly frosted card instead of a blank void. */ .chat-nomsg { align-self: center; margin: auto; text-align: center; background: color-mix(in srgb, var(--header-bg) 60%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 16px; padding: 22px 30px; color: var(--text-muted); font-size: 14.5px; box-shadow: var(--shadow-sm); animation: rise .25s cubic-bezier(.2, .8, .3, 1); } .chat-nomsg .nomsg-emoji { font-size: 40px; margin-bottom: 8px; } /* ============================================================ Emoji & sticker picker polish ============================================================ */ /* Category jump bar under the tabs. */ .emoji-cats { display: flex; gap: 2px; padding: 0 2px 6px; overflow-x: auto; scrollbar-width: none; } .emoji-cats::-webkit-scrollbar { display: none; } .emoji-cat-btn { border: none; background: transparent; font-size: 16px; line-height: 1; padding: 5px 8px; border-radius: 9px; opacity: .45; flex: none; transition: opacity .12s, background .12s, transform .12s; } .emoji-cat-btn:hover { opacity: 1; background: var(--bg-hover); } .emoji-cat-btn.active { opacity: 1; background: var(--bg-active-soft); } /* Taller grids; section headers stay pinned while their block scrolls by. */ .emoji-grid, .sticker-grid { max-height: 268px; } .emoji-cat { position: sticky; top: 0; z-index: 2; border-radius: 6px; background: color-mix(in srgb, var(--bg-side) 90%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Springy cells. */ .emoji-item { font-size: 24px; height: 42px; transition: background .12s, transform .16s cubic-bezier(.3, 1.6, .4, 1); } .emoji-item:hover { background: var(--bg-active-soft); transform: scale(1.22); } .emoji-item:active { transform: scale(.95); } .sticker-item { font-size: 44px; height: 64px; transition: background .12s, transform .18s cubic-bezier(.3, 1.6, .4, 1); } .sticker-item:hover { background: var(--bg-active-soft); transform: scale(1.12) rotate(-3deg); } .sticker-item:active { transform: scale(.92); } .sticker-item-img img { transition: transform .18s cubic-bezier(.3, 1.6, .4, 1); } .sticker-item-img:hover img { transform: scale(1.12) rotate(-3deg); } /* A live-arriving sticker bounces into the chat. */ .msg-new .sticker-emoji, .msg-new .sticker-img { animation: stickerPop .38s cubic-bezier(.3, 1.5, .4, 1); } @keyframes stickerPop { from { transform: scale(.3) rotate(-10deg); opacity: 0; } } /* ============================================================ Profile & settings polish ============================================================ */ /* Profile hero: a soft halo tinted with the user's own colour (set from JS as --hero-c), a ringed photo, and a gently staggered entrance. */ .profile-hero { position: relative; padding: 30px 16px 20px; gap: 7px; background: radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--hero-c, var(--accent)) 30%, transparent), transparent 72%); } .profile-avatar { width: 118px; height: 118px; font-size: 42px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-c, var(--accent)) 40%, var(--bg)), var(--shadow); } .profile-name { font-size: 24px; } .avatar-viewable { cursor: pointer; } .profile-page.open .profile-hero > * { animation: rise .3s cubic-bezier(.2, .8, .3, 1) backwards; } .profile-page.open .profile-hero > :nth-child(2) { animation-delay: .05s; } .profile-page.open .profile-hero > :nth-child(3) { animation-delay: .09s; } /* Action buttons (call / video / mute / search / more) lift on hover. */ .pa-btn { box-shadow: var(--shadow-sm); transition: background .12s, transform .14s, box-shadow .14s; } .pa-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--bg-active-soft); } .pa-btn:active { transform: translateY(0) scale(.96); } /* Grouped lists read as raised cards; rows give press feedback. */ .profile-page .tg-list, .modal .tg-list { border-radius: 14px; box-shadow: var(--shadow-sm); } .tg-row { transition: background .12s, transform .08s; } .tg-row:active { transform: scale(.995); } .tg-ic { border-radius: 9px; box-shadow: inset 0 -6px 8px -6px rgba(0, 0, 0, .28), inset 0 6px 8px -6px rgba(255, 255, 255, .35); } /* Copyable rows reveal a copy glyph on hover. */ .tg-info.copyable { position: relative; } .tg-info.copyable::after { content: ''; position: absolute; inset-inline-end: 12px; inset-block-start: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: var(--text-muted); opacity: 0; transition: opacity .12s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat; } .tg-info.copyable:hover::after { opacity: .85; } /* Settings overview: the profile header becomes a tinted hero card. */ .settings-profile { border-radius: 14px; margin-bottom: 14px; padding: 18px 12px 16px; background: radial-gradient(130% 150% at 50% -30%, color-mix(in srgb, var(--hero-c, var(--accent)) 28%, transparent), transparent 76%); } .settings-profile .avatar-xl { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-c, var(--accent)) 38%, var(--bg)), var(--shadow-sm); } .settings-pname { font-size: 21px; }