/* ============ BASE ============ */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-scrollbar); border-radius: 4px; } html, body { background: var(--c-bg-app) !important; } /* Modal-style overlays should NOT cover the 32px window header (so user can drag the window even when a modal is open). */ .app-modal-overlay { position: absolute; top: calc(32px + var(--incoming-strip-h, 0px)); left: 0; right: 0; bottom: 0; } html[data-chrome="none"] .app-modal-overlay { top: var(--incoming-strip-h, 0px); } [data-theme="dark"] #app-container { background: var(--c-bg-app); } .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } /* ============ LIQUID GLASS THEME (Apple Tahoe-inspired) ============ */ /* Base canvas: deep aubergine/navy на которое ложатся aurora-blob'ы */ [data-theme="glass"] #app-container { /* Background задаётся ниже через preset-aware градиент. */ position: relative; isolation: isolate; } /* Aurora blobs — рисуются ПОД всем UI через z-index:-1. UI-сиблинги не требуют явного z-index: они и так попадают «над» aurora. */ [data-theme="glass"] #aurora-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; /* GPU layer + contain: paint — изолирует subtree от внешнего paint-цикла, browser не пересчитывает aurora при изменениях UI (chat scroll, modal open, hover etc). Большая экономия. */ transform: translate3d(0, 0, 0); contain: layout paint style; } /* NB: noise/grain overlay был удалён — feTurbulence на baseFrequency ≈ pixel-grid экрана сам создавал диагональный moiré (особенно в больших однотонных зонах). Cleaner подход: смягчить blob'ы и использовать большие плавные градиенты — тогда banding почти не виден без надобности маскировать его шумом. */ [data-theme="glass"] #aurora-bg .blob { position: absolute; border-radius: 50%; /* 48px blur вместо 64 — на 25% меньше работы compositor'у на каждый кадр анимации. Opacity 0.95 компенсирует визуально. */ filter: blur(48px); opacity: 0.95; /* GPU layer через translate3d — auto-promote modern браузерами. will-change убран: он держал layer ВСЕГДА в памяти даже при отсутствии анимации (>5MB на blob). translate3d даёт промоцию только при реальном transform — экономит видеопамять. */ transform: translate3d(0, 0, 0); contain: layout paint; } /* Per-preset hue overrides — задаются классом на , default = Tahoe */ [data-theme="glass"] { --c-aurora-h1: 265; --c-aurora-h2: 195; --c-aurora-h3: 320; --c-aurora-s1: 90%; --c-aurora-s2: 95%; --c-aurora-s3: 85%; --c-aurora-l1: 55%; --c-aurora-l2: 55%; --c-aurora-l3: 55%; --c-aurora-a1: 0.85; --c-aurora-a2: 0.65; --c-aurora-a3: 0.55; --c-aurora-base-1: #1a0a2e; --c-aurora-base-2: #0a0e2e; --c-aurora-base-3: #0e0a2e; } [data-theme="glass"][data-glass-preset="tahoe"] { --c-aurora-h1: 265; --c-aurora-h2: 195; --c-aurora-h3: 320; --c-aurora-base-1: #1a0a2e; --c-aurora-base-2: #0a0e2e; --c-aurora-base-3: #0e0a2e; } [data-theme="glass"][data-glass-preset="aurora"] { /* Northern lights: emerald + cyan + violet */ --c-aurora-h1: 155; --c-aurora-h2: 195; --c-aurora-h3: 270; --c-aurora-s1: 80%; --c-aurora-s2: 85%; --c-aurora-s3: 70%; --c-aurora-base-1: #061824; --c-aurora-base-2: #051424; --c-aurora-base-3: #0a1228; } [data-theme="glass"][data-glass-preset="sunset"] { /* Warm: orange + pink + violet */ --c-aurora-h1: 25; --c-aurora-h2: 340; --c-aurora-h3: 280; --c-aurora-s1: 90%; --c-aurora-s2: 80%; --c-aurora-s3: 70%; --c-aurora-l1: 55%; --c-aurora-l2: 55%; --c-aurora-l3: 50%; --c-aurora-base-1: #2a1018; --c-aurora-base-2: #200818; --c-aurora-base-3: #1a0820; } [data-theme="glass"][data-glass-preset="cyber"] { /* Neon: green + cyan + electric blue */ --c-aurora-h1: 130; --c-aurora-h2: 180; --c-aurora-h3: 220; --c-aurora-s1: 100%; --c-aurora-s2: 100%; --c-aurora-s3: 100%; --c-aurora-l1: 50%; --c-aurora-l2: 50%; --c-aurora-l3: 55%; --c-aurora-a1: 0.75; --c-aurora-a2: 0.65; --c-aurora-a3: 0.55; --c-aurora-base-1: #060f10; --c-aurora-base-2: #04141e; --c-aurora-base-3: #06101a; } [data-theme="glass"][data-glass-preset="plasma"] { /* Mono violet variations — calmer */ --c-aurora-h1: 270; --c-aurora-h2: 285; --c-aurora-h3: 255; --c-aurora-s1: 75%; --c-aurora-s2: 70%; --c-aurora-s3: 80%; --c-aurora-a1: 0.70; --c-aurora-a2: 0.55; --c-aurora-a3: 0.45; --c-aurora-base-1: #160a30; --c-aurora-base-2: #100828; --c-aurora-base-3: #1a0c30; } [data-theme="glass"] #app-container { background: linear-gradient(135deg, var(--c-aurora-base-1) 0%, var(--c-aurora-base-2) 50%, var(--c-aurora-base-3) 100%); } [data-theme="glass"] #aurora-bg .blob-violet { width: 60vw; height: 60vw; top: -20%; left: -10%; background: radial-gradient(circle, hsla(var(--c-aurora-h1), var(--c-aurora-s1), var(--c-aurora-l1), var(--c-aurora-a1)) 0%, transparent 70%); animation: aurora-1 60s ease-in-out infinite; } [data-theme="glass"] #aurora-bg .blob-cyan { width: 55vw; height: 55vw; top: 10%; right: -15%; background: radial-gradient(circle, hsla(var(--c-aurora-h2), var(--c-aurora-s2), var(--c-aurora-l2), var(--c-aurora-a2)) 0%, transparent 70%); animation: aurora-2 75s ease-in-out infinite; } [data-theme="glass"] #aurora-bg .blob-magenta { width: 50vw; height: 50vw; bottom: -20%; left: 20%; background: radial-gradient(circle, hsla(var(--c-aurora-h3), var(--c-aurora-s3), var(--c-aurora-l3), var(--c-aurora-a3)) 0%, transparent 70%); animation: aurora-3 90s ease-in-out infinite; } /* translate3d сохраняет blob на GPU layer во время анимации — без этого каждый кадр пересчитывается на CPU, что добавляет subpixel jitter (часть «плывучего» муара). */ @keyframes aurora-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(20vw, 15vh, 0) scale(1.15); } 66% { transform: translate3d(-10vw, 25vh, 0) scale(0.95); } } @keyframes aurora-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 40% { transform: translate3d(-25vw, 20vh, 0) scale(1.10); } 80% { transform: translate3d(-5vw, -10vh, 0) scale(0.90); } } @keyframes aurora-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(15vw, -30vh, 0) scale(1.20); } } /* Kill-switch для слабого GPU */ [data-theme="glass"].aurora-static #aurora-bg .blob { animation: none !important; } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { [data-theme="glass"] #aurora-bg .blob { animation: none !important; } } /* Liquid Glass primitive — heavy blur + saturate + specular edges + depth */ [data-theme="glass"] .glass-blur { backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-saturate)); -webkit-backdrop-filter: blur(var(--c-glass-blur)) saturate(var(--c-glass-saturate)); } /* Liquid surface decoration — добавляет specular edges + depth shadow. Применяется к крупным surfaces: app-container внутрь, panels, modals. */ [data-theme="glass"] .liquid-surface, [data-theme="glass"] #app-container { box-shadow: inset 0 1px 0 var(--c-glass-edge-top), inset 0 -1px 0 var(--c-glass-edge-bot); } [data-theme="glass"] .app-modal-overlay, [data-theme="glass"] .add-contact-sheet, [data-theme="glass"] #emoji-picker, [data-theme="glass"] .app-dialog__card { box-shadow: inset 0 1px 0 var(--c-glass-edge-top), inset 0 -1px 0 var(--c-glass-edge-bot), var(--c-glass-shadow); } input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--c-accent); } /* Floating surfaces are solid in light and dark and frosted in glass (the --*-float tokens). */ .mp-popover { background: var(--c-bg-float); -webkit-backdrop-filter: var(--backdrop-float); backdrop-filter: var(--backdrop-float); color: var(--c-text-popup); border: 1px solid var(--c-border-float); } :where(:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ============ ANIMATIONS ============ */ .toast-enter { animation: toast-in 0.24s ease-out; } .toast-exit { animation: toast-out 0.2s ease-in forwards; } @keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes toast-out { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(12px); } } @media (prefers-reduced-motion: reduce) { .toast-enter, .toast-exit { animation-duration: 1ms; } } /* toast-action-btn: small inline button inside toast for action prompts */ .toast-action-btn { background: none; border: 1px solid var(--c-accent); color: var(--c-accent); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; flex-shrink: 0; white-space: nowrap; transition: background 0.15s; } .toast-action-btn:hover { background: var(--c-accent-soft); } .pulse-ring { animation: pulse-ring 1.5s infinite; } @keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)} 70%{box-shadow:0 0 0 12px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} } .pulse-reconnect { animation: pulse-reconnect 2s infinite; } @keyframes pulse-reconnect { 0%,100%{opacity:1} 50%{opacity:.5} } /* ============ VIEW TRANSITIONS (narrow only — wide/medium used flex) ============ */ /* narrow: absolute panes that slide in/out */ html[data-layout="narrow"] #chat-list-column, html[data-layout="narrow"] #chat-view { position: absolute; inset: 0; width: 100%; /* Glass-theme fix: in narrow mode bg-chat is ~transparent, so an off-screen pane parked at translateX(-25%) used to bleed through the active pane. Pair the transform with a visibility flip whose transition is delayed by the animation duration — pane stays visible during the slide, then hides cleanly when parked. */ transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.25s; will-change: transform; } /* Visible (parked at 0) state — kill the visibility delay */ html[data-layout="narrow"] #chat-list-column, html[data-layout="narrow"] #chat-view.slide-in { transform: translateX(0); visibility: visible; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s; } /* Off-screen / parked-out states */ html[data-layout="narrow"] #chat-list-column.slide-out { transform: translateX(-25%); visibility: hidden; } html[data-layout="narrow"] #chat-view { transform: translateX(100%); visibility: hidden; } /* ============ BREAKPOINT LAYOUT ============ */ /* wide (≥1100): все колонки видны */ html[data-layout="wide"] #chat-list-column, html[data-layout="wide"] #chat-view { display: flex; } /* medium (760–1099): chat-list + chat-view */ html[data-layout="medium"] #chat-list-column, html[data-layout="medium"] #chat-view { display: flex; } /* back button — hidden on wide/medium */ html[data-layout="wide"] #chat-back-button, html[data-layout="medium"] #chat-back-button { display: none; } /* Settings in a narrow window: the section list, or one section full width under a back bar */ .settings-narrow-bar { display: none; } html[data-layout="narrow"] #settings-nav { width: 100%; border-right: none; } html[data-layout="narrow"] #settings-content { padding: 0 16px 16px; } html[data-layout="narrow"] #settings-overlay[data-settings-pane="nav"] #settings-content, html[data-layout="narrow"] #settings-overlay[data-settings-pane="section"] #settings-nav { display: none; } html[data-layout="narrow"] .settings-narrow-bar { display: flex; align-items: center; position: sticky; top: 0; z-index: 1; margin: 0 -16px 16px; padding: 8px 12px; background: var(--c-bg-header); color: var(--c-text-header); border-bottom: 1px solid var(--c-border); backdrop-filter: blur(16px); } .settings-narrow-back { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 700; color: inherit; } .settings-narrow-back:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .settings-saved-anchor { position: sticky; top: 0; z-index: 2; height: 0; display: flex; justify-content: flex-end; pointer-events: none; } html[data-layout="narrow"] .settings-saved-anchor { top: 18px; } /* Settings dual-pane nav button active state */ .settings-nav-btn.active { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; } .settings-nav-btn.active i { color: var(--c-accent); } /* Danger nav button keeps red colour even when active */ [data-settings-section="danger"].settings-nav-btn.active { background: rgba(239, 68, 68, 0.12); color: rgb(239, 68, 68); } /* ============ CHAT LIST COLUMN ============ */ .list-chips { overflow-x: auto; scrollbar-width: none; } .list-chips::-webkit-scrollbar { display: none; } .list-chips.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .list-chips.fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); } .list-chips.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); } .list-chip { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: var(--chip-h); padding: 0 var(--chip-pad-x); border-radius: 9999px; font-size: var(--chip-font); font-weight: 500; color: var(--c-text-secondary); background: var(--c-bg-input); transition: background 0.12s, color 0.12s; } .list-chip:hover { color: var(--c-text-primary); } .list-chip.is-active { background: var(--c-accent-soft); color: var(--c-accent); } .list-chip.hidden { display: none; } .list-chip-count { font-size: 11px; font-weight: 600; } .list-chip-count.hidden { display: none; } .pending-sent-row:hover { background: var(--c-contact-hover); } .pending-sent-state { color: var(--c-text-secondary); } .pending-sent-row[data-sent-state="lost"] .pending-sent-state { color: var(--c-status-warn-text); } .pending-sent-row[data-sent-state="expired"] .pending-sent-state { color: var(--c-status-error-text); } .pending-sent-row[data-sent-state="declined"] .pending-sent-state { color: var(--c-status-error-text); } .banner-title-cap::first-letter { text-transform: uppercase; } .contact-row.is-search-focus, #search-add-row.is-search-focus { background: var(--c-contact-hover); box-shadow: inset 3px 0 0 var(--c-accent); } .contact-row-mark { background: var(--c-accent-soft); color: var(--c-accent); border-radius: 3px; padding: 0 1px; } .pending-sent-row.active { background: var(--c-contact-active); } #chat-list-column { width: 320px; flex-shrink: 0; flex-direction: column; background: var(--c-bg-contacts); border-right: 1px solid var(--c-border); position: relative; } /* ============ CONTACT INFO (slide-over) ============ */ #right-info-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 36; display: flex; flex-direction: column; background: var(--c-bg-float-strong); -webkit-backdrop-filter: var(--backdrop-float); backdrop-filter: var(--backdrop-float); color: var(--c-text-popup); border-left: 1px solid var(--c-border-float); box-shadow: var(--shadow-2xl); } #right-info-panel.hidden { display: none; } html:not([data-tech-details="on"]) #contact-topology-section { display: none; } .info-avatar { width: 104px; height: 104px; } .info-action { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-primary); } .info-action-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-accent-soft); color: var(--c-accent); transition: filter 0.12s; } .info-action:hover .info-action-icon { filter: brightness(0.95); } .info-danger { border: 1px solid var(--c-status-error-border); background: var(--c-status-error-bg); border-radius: 16px; overflow: hidden; } .info-danger-item { width: 100%; height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; text-align: left; color: var(--c-status-error-text); } .info-danger-item + .info-danger-item { border-top: 1px solid var(--c-status-error-border); } .info-danger-item:hover { background: var(--c-status-error-soft); } /* ============ CHAT VIEW EMPTY STATE ============ Visible only when #chat-view carries the .chat-view--empty class (set on app launch and restored on contact deletion via JS). When a chat is opened, showChatView removes the class and the rule below hides the overlay regardless of how the inner DOM was rebuilt by clearChat. */ #chat-view:not(.chat-view--empty) #chat-empty-state { display: none; } html:not([data-layout="narrow"]) #chat-view.chat-view--empty #chat-header, html:not([data-layout="narrow"]) #chat-view.chat-view--empty #chat-composer { display: none; } #chat-view.chat-view--empty #chat-window > :not(#chat-empty-state) { display: none; } /* ============ CHAT VIEW PREVIEW MODE ============ Set on #chat-view when activeChatPeerId.friendState === 'pending-incoming'. The composer is hidden and replaced with an italic placeholder strip; the greeting + Accept/Reject/Block buttons live in the incoming-invite-greeting banner registered with BannerManager. */ #chat-view.chat-view--preview #chat-form { display: none; } #chat-view.chat-view--preview #chat-preview-composer-placeholder { display: block; } #chat-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--c-text-secondary); } /* ============ ONLINE DOT (placeholder) ============ */ .online-dot { width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; border: 2px solid var(--c-bg-contacts); position: absolute; bottom: 0; right: 0; } /* ============ MSG STATUS TICK ============ */ .msg-tick { display: inline-flex; align-items: center; margin-left: 2px; } .msg-tick.status-pending { opacity: 0.45; } /* outline clock, dim */ .msg-tick.status-queued { opacity: 0.85; color: var(--c-status-warn-solid); } /* amber clock — in local queue */ .msg-tick.status-sent { opacity: 0.75; } /* single check — in mailbox */ .msg-tick.status-delivered { opacity: 1; } /* double-check, default text colour */ .msg-tick.status-read { opacity: 1; color: var(--c-status-video); } /* recipient opened (sky) */ .msg-tick.status-failed { opacity: 1; color: var(--c-status-error-solid); } /* red triangle */ /* ============ ADAPTIVE BUBBLE WIDTH ============ Telegram-style: tighter on narrow windows (less wasted gutter), more breathing room on wide ones (no "stretched paragraph" feel). Hard pixel cap protects ultra-wide screens. Container queries would be the right tool but the renderer is a single-pane chat — the chat-view scales with the window, so viewport breakpoints are accurate enough. */ .bubble-col { display: flex; flex-direction: column; max-width: min(78%, 640px); } @media (max-width: 760px) { .bubble-col { max-width: 88%; } } @media (min-width: 1400px) { .bubble-col { max-width: min(60%, 720px); } } @media (min-width: 1900px) { .bubble-col { max-width: min(50%, 800px); } } /* ============ CONTACT ROW ============ */ .contact-row { border-left: 3px solid transparent; transition: background 0.12s, border-color 0.12s; } .contact-row:hover { background: var(--c-contact-hover); } .contact-row.active { background: var(--c-contact-active); border-left-color: var(--c-contact-border); } /* Inbox-strip invite cards mirror sidebar hover / active behaviour so they feel like first-class chat entries (clicking opens preview chat, the row stays highlighted while that peer's chat is active). Active state uses --c-accent-soft (purple) instead of the sidebar's --c-contact-active (greenish) because the inbox-strip wrapper itself uses bg-th-panel which collides visually with --c-contact-active in glass / dark themes. accent-soft contrasts with the panel tint so the user can tell at a glance which invite card they're viewing. */ .pending-invite-row { border-left: 3px solid transparent; transition: background 0.12s, border-color 0.12s; } .pending-invite-row:hover { background: var(--c-contact-hover); } .pending-invite-row.active { background: var(--c-accent-soft); border-left-color: var(--c-accent); } /* ============ MESSAGE BUBBLE TAILS ============ */ .bubble-me { border-radius: 18px 18px 4px 18px; } .bubble-other { border-radius: 18px 18px 18px 4px; } /* ============ INCOMING CALL STRIP ============ */ .incoming-strip { /* The call window's answer colours: dark enough for white text at 4.5:1 or better. */ --incoming-accept: #15803d; --incoming-danger: #c0262d; display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 8px 12px 8px 20px; background: var(--c-bg-header); color: var(--c-text-primary); border-bottom: 1px solid var(--c-bg-header-border); position: relative; z-index: 9100; } .incoming-strip.hidden { display: none; } html[data-chrome="none"] .incoming-strip { padding-top: calc(8px + env(safe-area-inset-top, 0px)); } .incoming-strip-who { position: relative; display: flex; flex-shrink: 0; } .incoming-strip-ring { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-status-online) 55%, transparent); animation: incomingRing 1.4s ease-out infinite; } .incoming-strip-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--c-status-online); } .incoming-strip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .incoming-strip-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .incoming-strip-status { font-size: 12px; color: var(--c-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .incoming-strip-actions { display: flex; gap: 8px; flex-shrink: 0; } .incoming-strip-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; } .incoming-strip-btn.hidden { display: none; } .incoming-strip-btn.is-accept { background: var(--incoming-accept); } .incoming-strip-btn.is-danger { background: var(--incoming-danger); } .incoming-strip-btn:hover { filter: brightness(1.12); } .incoming-strip-btn:focus-visible, .incoming-strip-hide:focus-visible, .incoming-pill:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .incoming-strip-hint { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.3; color: var(--c-text-secondary); white-space: nowrap; flex-shrink: 0; } .incoming-strip-hide { width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--c-text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .incoming-strip-hide:hover { background: var(--c-chrome-hover); color: var(--c-text-primary); } @media (max-width: 900px) { .incoming-strip-hint { display: none; } } @media (max-width: 640px) { .incoming-strip { flex-wrap: wrap; row-gap: 8px; padding-left: 16px; padding-right: 8px; } .incoming-strip-actions { order: 3; width: 100%; } .incoming-strip-actions .incoming-strip-btn { flex: 1; padding: 0 6px; } } @keyframes incomingRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } .incoming-pill { margin-left: 6px; height: 22px; max-width: 220px; padding: 0 10px 0 8px; border-radius: 11px; font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--c-status-ok-text); background: color-mix(in srgb, var(--c-status-online) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c-status-online) 45%, transparent); } .incoming-pill.hidden { display: none; } .incoming-pill-avatar { width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .incoming-pill-avatar svg { display: block; width: 100%; height: 100%; } .incoming-pill:hover { filter: brightness(1.1); } .incoming-pill.is-in-list { align-self: flex-start; margin: 8px 12px; flex-shrink: 0; } .quiet-mark { margin-left: 2px; width: 22px; height: 22px; border: 0; border-radius: 11px; padding: 0; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--c-accent); background: transparent; } .quiet-mark.hidden { display: none; } .quiet-mark:hover { background: var(--c-chrome-hover); } .quiet-mark:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; } .own-quiet-mark { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; pointer-events: none; color: var(--c-text-on-accent); background: var(--c-accent); box-shadow: 0 0 0 2px var(--c-bg-contacts); } .own-quiet-mark.hidden { display: none; } .quiet-menu-head { padding: 6px 12px 2px; font-size: 12px; line-height: 1.4; color: var(--c-text-secondary); } .contact-row-ringing { display: none; color: var(--c-status-ok-text); } .contact-row.is-ringing .contact-row-preview { display: none; } .contact-row.is-ringing .contact-row-ringing { display: block; } #chat-contact-status.is-ringing { color: var(--c-status-ok-text); font-weight: 600; } #btn-call.is-ringing { color: var(--c-status-ok-text); animation: incomingCallButton 1.4s ease-out infinite; } @keyframes incomingCallButton { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-status-online) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { .incoming-strip-ring, #btn-call.is-ringing { animation: none; } } /* ============ CALL BAR ============ */ .call-bar { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 4px; color: #fff; background: var(--c-status-video); -webkit-app-region: no-drag; transition: background 0.2s ease; } .call-bar.hidden { display: none; } .call-bar.is-muted { background: var(--c-status-offline); } .call-bar.is-group { background: var(--c-status-ok-solid); } .call-bar.is-group.is-muted { background: var(--c-status-video); } .call-bar-icon { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .call-bar-icon:hover { background: rgba(255,255,255,0.15); } .call-bar-timer { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.9; } .call-bar.is-group .call-bar-timer, .call-bar.is-group .call-bar-signal { display: none; } .call-bar-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .call-bar-signal i { width: 3px; border-radius: 1px; background: #fff; opacity: 0.35; } .call-bar-signal i:nth-child(1) { height: 4px; } .call-bar-signal i:nth-child(2) { height: 6px; } .call-bar-signal i:nth-child(3) { height: 9px; } .call-bar-signal i:nth-child(4) { height: 12px; } .call-bar-signal[data-bars="1"] i:nth-child(-n+1), .call-bar-signal[data-bars="2"] i:nth-child(-n+2), .call-bar-signal[data-bars="3"] i:nth-child(-n+3), .call-bar-signal[data-bars="4"] i { opacity: 1; } .call-bar-avatars { display: inline-flex; } .call-bar-avatars:empty { display: none; } .call-bar-avatar { width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.35); } .call-bar-avatar svg { display: block; width: 100%; height: 100%; } .call-bar-avatar:first-child { margin-left: 0; } .call-bar-title { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .call-bar-hangup { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: none; border-radius: 15px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; } .call-bar-hangup:hover { background: rgba(255,255,255,0.15); } .call-bar.is-group .call-bar-hangup-label { display: none; } .group-call-bar { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: none; background: var(--c-accent-soft); color: var(--c-text-primary); cursor: pointer; text-align: left; } .group-call-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .group-call-bar-title { font-size: 13px; font-weight: 600; } .group-call-bar-subtitle { font-size: 12px; color: var(--c-text-secondary); } .group-call-bar-join { padding: 5px 14px; border-radius: 9999px; background: var(--c-accent); color: var(--c-text-on-accent); font-size: 12px; font-weight: 600; } /* ============ DENSITY ============ */ /* Every size density changes is a variable; compact never shrinks a control under a finger, so the sizes of things that are tapped stay comfortable on touch. */ :root { --row-h: 72px; --row-pad-y: 12px; --row-gap: 12px; --row-avatar: 48px; --row-name-font: 15px; --row-name-line: 22px; --row-preview-font: 14px; --row-preview-line: 20px; --row-lines-gap: 2px; --row-badge: 20px; --msg-font: 15px; --msg-line: 22px; --msg-pad-y: 8px; --msg-pad-x: 14px; --msg-gap-same: 6px; --msg-gap-group: 14px; --chat-head-h: 56px; --chat-head-pad-y: 10px; --composer-h: 56px; --composer-pad-y: 8px; --composer-field-pad-y: 6px; --composer-input-pad-y: 6px; --list-head-h: 56px; --list-head-btn: 36px; --list-head-avatar: 32px; --list-search-h: 36px; --chip-h: 32px; --chip-pad-x: 12px; --chip-font: 13px; --set-row-h: 56px; --set-pad: 16px; --set-hint-font: 13px; } html[data-density="compact"] { --row-h: 52px; --row-pad-y: 6px; --row-gap: 10px; --row-avatar: 36px; --row-name-font: 14px; --row-name-line: 19px; --row-preview-font: 13px; --row-preview-line: 17px; --row-lines-gap: 1px; --row-badge: 18px; --msg-font: 14px; --msg-line: 18px; --msg-pad-y: 5px; --msg-pad-x: 10px; --msg-gap-same: 2px; --msg-gap-group: 8px; --chat-head-h: 46px; --chat-head-pad-y: 5px; --composer-h: 46px; --composer-pad-y: 4px; --composer-field-pad-y: 3px; --composer-input-pad-y: 4px; --set-row-h: 44px; --set-pad: 12px; --set-hint-font: 12px; } html[data-density="compact"]:not([data-input="touch"]) { --list-head-h: 46px; --list-head-btn: 30px; --list-head-avatar: 28px; --list-search-h: 30px; --chip-h: 26px; --chip-pad-x: 10px; --chip-font: 12px; } .list-head-row { min-height: calc(var(--list-head-h) - 16px); } .list-head-btn { width: var(--list-head-btn); height: var(--list-head-btn); } #own-avatar { width: var(--list-head-avatar); height: var(--list-head-avatar); } html .list-search { height: var(--list-search-h); padding-top: 0; padding-bottom: 0; } html .contact-row { min-height: var(--row-h); padding-top: var(--row-pad-y); padding-bottom: var(--row-pad-y); gap: var(--row-gap); } .contact-row-avatar { width: var(--row-avatar); height: var(--row-avatar); } .contact-row-avatar > svg { width: 100%; height: 100%; } html .contact-row-name { font-size: var(--row-name-font); line-height: var(--row-name-line); } html .contact-row-preview, html .contact-row-ringing { font-size: var(--row-preview-font); line-height: var(--row-preview-line); } .contact-row-lines { margin-top: var(--row-lines-gap); } html .contact-row-badge { min-width: var(--row-badge); height: var(--row-badge); border-radius: calc(var(--row-badge) / 2); } html .bubble-me, html .bubble-other { padding: var(--msg-pad-y) var(--msg-pad-x); font-size: var(--msg-font); line-height: var(--msg-line); } .msg-row { margin-top: var(--msg-gap-group); } .msg-row--follow { margin-top: var(--msg-gap-same); } html #chat-header { min-height: var(--chat-head-h); padding-top: var(--chat-head-pad-y); padding-bottom: var(--chat-head-pad-y); } html #chat-composer { min-height: var(--composer-h); padding-top: var(--composer-pad-y); padding-bottom: var(--composer-pad-y); } html .composer-field { padding-top: var(--composer-field-pad-y); padding-bottom: var(--composer-field-pad-y); } html .composer-input { padding-top: var(--composer-input-pad-y); padding-bottom: var(--composer-input-pad-y); } /* tech-details: скрывать элементы .tech-detail когда отключено */ html[data-tech-details="off"] .tech-detail { display: none !important; } /* ============ PHASE 3: GROUP CHAT ============ */ /* Reaction chip — выбранная пользователем реакция */ .reaction-mine { background: var(--c-accent-soft) !important; color: var(--c-accent) !important; border: 1px solid var(--c-accent) !important; font-weight: 600; } .reaction-chip { transition: transform 80ms ease, background 120ms; user-select: none; } .reaction-chip:hover { transform: translateY(-1px); } /* emoji-picker — Telegram-style icon tabs + larger cells + smooth open */ /* Composer-mode positioning lives here (NOT inline) so closeEmojiPicker can reset element.style.maxHeight to empty and let the CSS default re-take effect. Reaction-mode overrides via element.style.X — when closed and JS resets, this CSS regains control automatically. */ #emoji-picker { position: absolute; bottom: 64px; right: 12px; width: min(420px, calc(100% - 24px)); max-height: min(360px, 50vh); transform-origin: bottom right; transition: opacity 140ms ease, transform 140ms ease; } #emoji-picker.emoji-picker--lifted { z-index: 45; } #emoji-picker.hidden { opacity: 0; transform: scale(0.96); pointer-events: none; } #emoji-picker:not(.hidden) { opacity: 1; transform: scale(1); } /* Tabs scroll horizontally when picker is too narrow for all 7 icons */ #emoji-picker .emoji-tabs { overflow-x: auto; scrollbar-width: thin; } #emoji-picker .emoji-tabs::-webkit-scrollbar { height: 3px; } #emoji-picker .emoji-tabs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; } #emoji-picker .emoji-cat-btn { flex: 1 1 36px; min-width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--c-text-secondary); font-size: 16px; cursor: pointer; transition: background 120ms, color 120ms; display: inline-flex; align-items: center; justify-content: center; } #emoji-picker .emoji-cat-btn:hover { background: var(--c-accent-soft); color: var(--c-accent); } #emoji-picker .emoji-cat-btn.active { background: var(--c-accent-soft); color: var(--c-accent); } #emoji-picker #emoji-grid > button { width: 100%; aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform 80ms ease, background 120ms; } #emoji-picker #emoji-grid > button:hover { transform: scale(1.18); background: var(--c-accent-soft); } /* floating "react" smiley action-button — appears on bubble hover. All colours come from theme tokens so dark / light / glass presets just work. */ #react-action-btn { position: fixed; z-index: 55; display: none; width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--c-border); background: var(--c-bg-panel); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); align-items: center; justify-content: center; cursor: pointer; font-size: 14px; line-height: 1; transition: transform 100ms ease, color 120ms; color: var(--c-text-secondary); } #react-action-btn.visible { display: inline-flex; } #react-action-btn:hover { transform: scale(1.15); color: var(--c-accent); } /* floating reaction-bar (Telegram-style) — sized & clamped to chat-window */ #reaction-bar { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 9999px; background: var(--c-bg-float); -webkit-backdrop-filter: var(--backdrop-float); backdrop-filter: var(--backdrop-float); border: 1px solid var(--c-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); color: var(--c-text-primary); font-size: 18px; opacity: 0; transform: scale(0.92) translateY(4px); transition: opacity 140ms ease, transform 140ms ease; pointer-events: none; visibility: hidden; /* Adaptive: never wider than chat-window. JS sets max-width at show-time; this fallback covers initial layout. */ max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: thin; } /* Hide horizontal scrollbar by default — only shows when content overflows */ #reaction-bar::-webkit-scrollbar { height: 4px; } #reaction-bar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; } #reaction-bar.visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; visibility: visible; } #reaction-bar button { border: none; background: transparent; cursor: pointer; width: 28px; height: 28px; line-height: 1; border-radius: 9999px; font-size: 18px; color: inherit; display: inline-flex; align-items: center; justify-content: center; transition: transform 80ms ease, background 120ms; } #reaction-bar button:hover { transform: scale(1.2); background: var(--c-accent-soft); } /* standalone quick-react pill (sits above the items menu) */ #bubble-quick-react { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 9999px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); opacity: 0; transform: scale(0.96); transform-origin: top center; transition: opacity 140ms ease, transform 140ms ease; pointer-events: none; visibility: hidden; /* Adaptive: never wider than chat-window. Excess emojis scroll horizontally inside the pill. */ max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: thin; } #bubble-quick-react::-webkit-scrollbar { height: 4px; } #bubble-quick-react::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; } #bubble-quick-react.visible { opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; } #bubble-quick-react .qr-emoji { width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: transform 80ms ease, background 120ms; color: inherit; } #bubble-quick-react .qr-emoji:hover { transform: scale(1.2); background: var(--c-accent-soft); } #bubble-quick-react .qr-more { font-size: 14px; color: var(--c-text-secondary); } /* bubble right-click context menu (Telegram-style) */ #bubble-context-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); font-size: 13px; opacity: 0; transform: scale(0.96); transform-origin: top left; transition: opacity 120ms ease, transform 120ms ease; pointer-events: none; visibility: hidden; overflow-y: auto; scrollbar-width: thin; } #bubble-context-menu.visible { opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; } #bubble-context-menu::-webkit-scrollbar { width: 4px; } #bubble-context-menu::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; } /* Inline quick-react bar (top of menu) */ #bubble-context-menu .ctx-quick-bar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 6px; } #bubble-context-menu .ctx-quick-emoji { width: 32px; height: 32px; border-radius: 9999px; border: none; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform 80ms ease, background 120ms; color: var(--c-text-secondary); } #bubble-context-menu .ctx-quick-emoji:hover { transform: scale(1.18); background: var(--c-accent-soft); } #bubble-context-menu .ctx-quick-more { font-size: 14px; color: var(--c-text-secondary); } /* Separator between quick-bar and items */ #bubble-context-menu .ctx-menu-sep { height: 1px; margin: 2px 4px; background: var(--c-border); opacity: 0.6; } /* Action items */ #bubble-context-menu .ctx-menu-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--c-text-primary); font-size: 13px; transition: background 120ms; } #bubble-context-menu .ctx-menu-item:hover { background: var(--c-accent-soft); } #bubble-context-menu .ctx-menu-icon { width: 16px; text-align: center; color: var(--c-text-secondary); } #bubble-context-menu .ctx-menu-item-danger { color: #ef4444; } #bubble-context-menu .ctx-menu-item-danger .ctx-menu-icon { color: #ef4444; } /* Reply quote block внутри bubble */ .reply-quote { cursor: pointer; border-radius: 4px; background: rgba(0,0,0,0.06); } .bubble-me .reply-quote { background: rgba(255,255,255,0.1); } /* ============== Pet settings — redesign per design v2 ============== Hero card + grouped cards with section labels, character chips, palette circles, iOS-style toggle. Использует accent-tokens проекта (не Telegram blue), работает на light/dark/glass. */ .pet-section { padding: 4px 2px; } .pet-section h2 { font-size: 18px; font-weight: 700; color: var(--c-text-primary); margin: 0 0 4px; letter-spacing: -0.005em; } .pet-section .pet-subtitle { font-size: 13px; color: var(--c-text-secondary); margin: 0 0 16px; line-height: 1.5; } /* Hero card — gradient, large pet preview, name + status */ .pet-hero { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-h, var(--c-accent-hover)) 100%); color: #fff; border-radius: 16px; padding: 20px 20px 18px; display: flex; align-items: center; gap: 16px; box-shadow: 0 6px 16px var(--c-accent-soft); } .pet-hero .pet-hero-disc { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .pet-hero .pet-hero-disc svg { width: 76px; height: 76px; display: block; } .pet-hero .pet-hero-disc.empty { color: rgba(255,255,255,0.65); font-size: 32px; } .pet-hero-meta { flex: 1; min-width: 0; } .pet-hero-meta .nm { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pet-hero-meta .id { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 2px; } .pet-hero-meta .badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; background: rgba(255,255,255,0.22); border-radius: 999px; font-size: 11px; font-weight: 500; } .pet-hero-meta .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.25); } .pet-hero-meta .badge.off { background: rgba(255,255,255,0.12); } .pet-hero-meta .badge.off .dot { background: #fbbf24; box-shadow: none; } /* Card group — section label + white-card */ .pet-card-group { margin-top: 18px; } .pet-card-label { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px 4px; } .pet-card { background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; } .pet-card-footer { font-size: 12px; color: var(--c-text-secondary); padding: 8px 4px 0; line-height: 1.4; } /* Card row — icon + main + control */ .pet-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; position: relative; } .pet-row + .pet-row::before, .pet-action-row + .pet-action-row::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--c-border); } .pet-row .ricon, .pet-action-row .ricon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-secondary); font-size: 16px; flex-shrink: 0; } .pet-row .ricon.accent, .pet-action-row .ricon.accent { color: var(--c-accent); } .pet-row .rmain, .pet-action-row .rmain { flex: 1; min-width: 0; } .pet-row .rmain .nm, .pet-action-row .rmain .nm { font-size: 14px; color: var(--c-text-primary); line-height: 1.3; } .pet-row .rmain .desc, .pet-action-row .rmain .desc { font-size: 12px; color: var(--c-text-secondary); margin-top: 2px; } /* iOS-style toggle (51×31) */ .pet-toggle { width: 46px; height: 26px; background: var(--c-border); border-radius: 999px; position: relative; cursor: pointer; transition: background 200ms ease; flex-shrink: 0; border: 0; padding: 0; } .pet-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.05); transition: left 200ms ease; } .pet-toggle[aria-checked="true"] { background: var(--c-accent); } .pet-toggle[aria-checked="true"]::after { left: 22px; } /* Character chips */ .pet-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; } .pet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--c-bg-input); color: var(--c-text-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms, color 120ms, box-shadow 120ms; border: 1px solid transparent; } .pet-chip:hover { background: var(--c-accent-light); } .pet-chip[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent); border-color: var(--c-accent); } .pet-chip .em { font-size: 14px; } /* Palette circle picker */ .pet-palette-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 14px 4px; justify-content: center; } .pet-palette { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; position: relative; transition: transform 150ms ease; border: 3px solid transparent; background-clip: content-box; padding: 2px; } .pet-palette:hover { transform: scale(1.08); } .pet-palette[aria-pressed="true"] { border-color: var(--c-accent); } .pet-palette .swatch { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( var(--c1) 0 25%, var(--c2) 25% 50%, var(--c3) 50% 75%, var(--c4) 75% 100% ); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); } .pet-palette[aria-pressed="true"]::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); } .pet-palette-label { text-align: center; font-size: 12px; color: var(--c-text-secondary); padding: 2px 14px 12px; } .pet-palette-label b { color: var(--c-text-primary); font-weight: 600; } /* Inline name input row (no row separator above) */ .pet-name-row { display: flex; gap: 8px; align-items: center; padding: 12px 14px; } .pet-name-row input { flex: 1; background: var(--c-bg-input); color: var(--c-text-primary); font-size: 14px; border: 1px solid var(--c-border); border-radius: 8px; padding: 8px 12px; outline: none; transition: border-color 0.15s; } .pet-name-row input:focus { border-color: var(--c-accent); } .pet-name-row .pet-icon-btn { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-input); color: var(--c-text-secondary); border: 1px solid var(--c-border); cursor: pointer; transition: background 120ms, color 120ms; } .pet-name-row .pet-icon-btn:hover { background: var(--c-accent-soft); color: var(--c-accent); } /* Generic action row — clickable row with chevron */ .pet-action-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; transition: background 120ms; position: relative; background: transparent; border: 0; text-align: left; width: 100%; color: inherit; font: inherit; } .pet-action-row:hover { background: var(--c-accent-light); } .pet-action-row + .pet-action-row::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--c-border); } .pet-action-row .chev { color: var(--c-text-muted); font-size: 13px; } /* Pet picker — horizontal scroller */ .pet-picker { display: flex; gap: 12px; padding: 14px 14px 16px; overflow-x: auto; scrollbar-width: thin; } .pet-picker::-webkit-scrollbar { height: 6px; } .pet-picker::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 6px; } .pet-picker-card { flex-shrink: 0; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; } .pet-picker-card .disc { width: 70px; height: 70px; border-radius: 50%; background: var(--c-bg-input); display: flex; align-items: center; justify-content: center; transition: all 180ms ease; border: 2.5px solid transparent; position: relative; } .pet-picker-card .disc svg { width: 64px; height: 64px; display: block; } .pet-picker-card[aria-pressed="true"] .disc { border-color: var(--c-accent); background: var(--c-accent-soft); } .pet-picker-card[aria-pressed="true"]::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: -2px; right: 4px; width: 22px; height: 22px; background: var(--c-accent); color: var(--c-text-on-accent); border-radius: 50%; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; border: 2.5px solid var(--c-bg-panel); } .pet-picker-card.locked { opacity: 0.55; cursor: default; } .pet-picker-card.locked .disc { color: var(--c-text-muted); font-size: 22px; } .pet-picker-card .pn { font-size: 12px; color: var(--c-text-primary); text-align: center; line-height: 1.2; } .pet-picker-card.locked .pn { color: var(--c-text-secondary); } .pet-picker-card .pn-soon { font-size: 10px; color: var(--c-text-muted); text-align: center; } .pet-picker-card .lock-badge { position: absolute; top: 50px; right: 6px; width: 20px; height: 20px; background: var(--c-bg-panel); border: 2px solid var(--c-border); border-radius: 50%; color: var(--c-text-secondary); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; } /* ============== Custom select (pet settings) ============== Native