/* ── live-chat-x.css ─ X-style chat for live pages ───────── Self-contained subset of the global chat styles. Mirrors the class names used by app.js renderChatMessages() so live.js can render the exact same UI inside any container. Bubbles/panel render in LIGHT theme to match the global chat look exactly (white panel, gray bubbles for others, blue bubbles for own messages) even when the surrounding live page is dark. ────────────────────────────────────────────────────────── */ /* Theme tokens scoped to the chat panel so we don't bleed into the rest of the live page. */ /* Default tokens = LIGHT (live pages render light by default; the rest of the live UI uses the same default). Dark theme is opt-in via [data-theme="dark"] on /. */ .live-chat-x { --chat-bg: #f7f9f9; --chat-bg-subtle: #eff3f4; --chat-text: #0f1419; --chat-muted: #536471; --chat-border: #e1e8ed; --chat-border-strong: #cfd9de; --chat-bubble: #ffffff; --chat-bubble-text: #0f1419; --chat-accent: #1d9bf0; } /* Dark mode override — matches the global chat's dark theme (#2f3336 bubbles on a near-black panel). */ [data-theme="dark"] .live-chat-x, .live-chat-x[data-theme="dark"] { --chat-bg: #12151a; --chat-bg-subtle: #1e2126; --chat-text: #e7e9ea; --chat-muted: #8b98a5; --chat-border: #2f3336; --chat-border-strong: #3d4046; --chat-bubble: #2f3336; --chat-bubble-text: #ffffff; --chat-accent: #1d9bf0; } /* Per-bubble time color: dark theme uses rgba(255,255,255,*) so we need to flip back to light text only when dark theme is on. */ [data-theme="dark"] .live-chat-x .chat-message:not(.is-me) .chat-message-time, .live-chat-x[data-theme="dark"] .chat-message:not(.is-me) .chat-message-time { color: rgba(255, 255, 255, 0.55); } .live-chat-x .chat-message:not(.is-me) .chat-message-time { color: rgba(0, 0, 0, 0.45); } /* ── Chat container shell (replaces .live-chat innards) ─── */ .live-chat-x { display: flex; flex-direction: column; height: 100%; background: var(--chat-bg); border: none; border-radius: 0 var(--radius, 16px) var(--radius, 16px) 0; overflow: hidden; min-height: 0; color: var(--chat-text); } .live-chat-x .chat-panel-title { padding: 10px 14px; border-bottom: 1px solid var(--chat-border); font-size: 11px; font-weight: 700; color: var(--chat-muted); text-transform: uppercase; letter-spacing: 0.1em; background: var(--chat-bg); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .live-chat-x .chat-logout-btn { appearance: none; background: transparent; border: 1px solid var(--chat-border-strong); color: var(--chat-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .live-chat-x .chat-logout-btn:hover { background: var(--chat-bg-subtle); color: var(--chat-text); border-color: var(--chat-text); } .live-chat-x .chat-logout-btn:disabled { opacity: 0.5; cursor: not-allowed; } .live-chat-x .chat-logout-btn[hidden] { display: none; } /* ── Host action bar (below chat title) ───────────────── */ .live-chat-x .chat-host-actions { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--chat-border); background: var(--chat-bg); } .live-chat-x .chat-host-actions[style*="display:none"], .live-chat-x .chat-host-actions[style*="display: none"] { display: none !important; } .live-chat-x .chat-host-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--chat-border-strong, #333); background: transparent; color: var(--chat-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: all 160ms ease; white-space: nowrap; } .live-chat-x .chat-host-action-btn:hover { background: rgba(255,255,255,0.06); color: var(--chat-text); border-color: var(--chat-text, #ccc); } .live-chat-x .chat-host-action-btn.active { background: #1d9bf0; color: #fff; border-color: #1d9bf0; } .live-chat-x .chat-host-action-btn.active:hover { background: #1a8cd8; border-color: #1a8cd8; } /* ── Pinned coin banner ────────────────────────────────── */ .live-chat-x .chat-pinned-coin { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 8px 12px 0; border-radius: 10px; border: 1px solid var(--chat-border); background: var(--chat-bg-subtle); color: var(--chat-text); } .live-chat-x .chat-pinned-coin[hidden] { display: none !important; } .live-chat-x .chat-pinned-coin-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--chat-bg); display: flex; align-items: center; justify-content: center; } .live-chat-x .chat-pinned-coin-icon img { width: 100%; height: 100%; object-fit: cover; } .live-chat-x .chat-pinned-coin-meta { flex: 1 1 auto; min-width: 0; } .live-chat-x .chat-pinned-coin-name { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--chat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* $SYMBOL renders as a softer "lighter black on light / lighter white on dark" tone so the primary name stays dominant — matches the reference list-item styling (bold title + muted secondary). */ .live-chat-x .chat-pinned-coin-name span { color: var(--chat-muted); font-weight: 700; margin-left: 4px; } .live-chat-x .chat-pinned-coin-ca { font-size: 11px; color: var(--chat-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .live-chat-x .chat-pinned-coin-ca-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .live-chat-x .chat-pinned-coin-ca-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: 0; padding: 0; background: rgba(127,127,127,0.12); color: var(--chat-muted); cursor: pointer; text-decoration: none; transition: background 140ms ease, color 140ms ease; } .live-chat-x .chat-pinned-coin-ca-btn:hover { background: rgba(127,127,127,0.22); color: var(--chat-text); } .live-chat-x .chat-pinned-coin-ca-btn.is-copied { background: rgba(29,155,240,0.18); color: #1d9bf0; } .live-chat-x .chat-pinned-coin-close { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.08); color: var(--chat-text); font-size: 16px; line-height: 18px; cursor: pointer; } .live-chat-x .chat-pinned-coin-close:hover { background: rgba(255,255,255,0.16); } .live-chat-x .chat-pinned-coin-open { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(127,127,127,0.12); color: var(--chat-muted); text-decoration: none; transition: background 140ms ease, color 140ms ease; } .live-chat-x .chat-pinned-coin-open:hover { background: rgba(127,127,127,0.22); color: var(--chat-text); } /* ── Typing indicator ──────────────────────────────────── */ .live-chat-x .chat-typing-indicator { flex: 0 0 auto; padding: 4px 14px 6px; font-size: 12px; color: var(--chat-muted); display: flex; align-items: center; gap: 6px; background: var(--chat-bg); } .live-chat-x .chat-typing-indicator[hidden] { display: none; } .live-chat-x .chat-typing-text { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-chat-x .chat-typing-dots { display: inline-flex; gap: 3px; align-items: center; } .live-chat-x .chat-typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: chat-typing-bounce 1.2s infinite ease-in-out; } .live-chat-x .chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; } .live-chat-x .chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } } /* ── Messages list ──────────────────────────────────────── */ .live-chat-x .chat-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 16px; background: var(--chat-bg); scrollbar-width: none; /* Smoother scrolling on mobile: momentum, prevent rubber-band into page, hint compositor to promote the scroller, and avoid touch-action jank. */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; will-change: scroll-position; transform: translateZ(0); } .live-chat-x .chat-messages::-webkit-scrollbar { width: 0; height: 0; display: none; } .live-chat-x .chat-input { scrollbar-width: none; } .live-chat-x .chat-input::-webkit-scrollbar { width: 0; height: 0; display: none; } .live-chat-x .chat-empty { color: var(--chat-muted); font-size: 13px; padding: 8px 2px; text-align: center; } /* ── Message rows ───────────────────────────────────────── */ .chat-message-row { width: 100%; display: flex; align-items: flex-start; gap: 8px; } .chat-message-row.is-group-continue { margin-top: -10px; } .chat-message-avatar-spacer { flex: 0 0 36px; width: 36px; height: 1px; } .live-chat-x .chat-message-sender { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--chat-text); margin-bottom: 2px; padding-left: 2px; line-height: 1.2; } .live-chat-x .chat-message-sender-name { color: var(--chat-text); } .live-chat-x .chat-message-sender-handle { color: var(--chat-muted); font-weight: 400; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-chat-x .chat-message-verified-badge { flex-shrink: 0; color: #1d9bf0; fill: currentColor; display: inline-block; vertical-align: middle; } /* Flat-text layout: own messages are left-aligned like everyone else */ .chat-message-row.is-me { flex-direction: row; } .chat-message-shell { flex: 1 1 auto; max-width: calc(100% - 46px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative; } .chat-message-row.is-me .chat-message-shell { align-items: flex-start; } .live-chat-x .chat-message-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px solid var(--chat-border); object-fit: cover; background: var(--chat-bg-subtle); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .live-chat-x .chat-message-avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: var(--chat-muted); font-size: 12px; font-weight: 700; } .chat-message-avatar-link { display: inline-flex; flex: 0 0 auto; line-height: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(29, 155, 240, 0.2); } .chat-message-avatar-link img, .chat-message-avatar-link .chat-message-avatar { pointer-events: none; } .chat-message-avatar-link:hover { opacity: 0.9; } /* ── Bubbles ────────────────────────────────────────────── */ .chat-message-bubble-wrap { position: relative; display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; } .chat-message-row.is-me .chat-message-bubble-wrap { align-self: flex-start; } .live-chat-x .chat-message { position: relative; display: inline-block; max-width: 100%; border: none; border-radius: 0; background: transparent; color: var(--chat-text); padding: 0; } .live-chat-x .chat-message.is-me { background: transparent; border: none; color: var(--chat-text); } .chat-message.is-pending { opacity: 0.6; } .chat-message.is-failed { opacity: 0.9; } .chat-message-failed { flex: 0 0 auto; align-self: flex-end; width: 18px; height: 18px; border-radius: 50%; background: #f4212e; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; margin-left: 6px; margin-bottom: 4px; cursor: default; user-select: none; } .chat-message-text { display: inline; font-size: 15px; line-height: 1.4; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .chat-message-text a { overflow-wrap: anywhere; word-break: break-word; } .chat-message-link { color: #1d9bf0; text-decoration: none; word-break: break-all; } .chat-message-link:hover { text-decoration: underline; } .chat-message.is-me .chat-message-link { color: var(--chat-accent); text-decoration: underline; } .live-chat-x .chat-message-time { display: none; margin-left: 8px; font-size: 11px; color: rgba(0, 0, 0, 0.45); white-space: nowrap; vertical-align: baseline; } .live-chat-x .chat-message.is-me .chat-message-time { color: rgba(255, 255, 255, 0.45); } /* ── Reply chip on bubble ───────────────────────────────── */ .live-chat-x .chat-reply-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--chat-muted); margin: 0 4px 2px; } .live-chat-x .chat-message-row.is-me .chat-reply-meta { justify-content: flex-end; } .live-chat-x .chat-reply-meta-arrow { font-size: 12px; line-height: 1; color: var(--chat-muted); } .live-chat-x .chat-reply-quote { align-self: flex-start; max-width: 90%; border: 1px solid var(--chat-border-strong); border-radius: 999px; background: transparent; color: var(--chat-muted); font-size: 13px; padding: 5px 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-chat-x .chat-message-row.is-me .chat-reply-quote { align-self: flex-end; border-color: var(--chat-accent); color: var(--chat-accent); } /* ── Quick actions (react / more) ───────────────────────── */ .chat-msg-quick-actions { position: absolute; top: 50%; left: calc(100% + 6px); right: auto; transform: translateY(-50%) translateX(-4px); display: inline-flex; align-items: center; gap: 4px; background: var(--bg-card, #111); border: 1px solid var(--border); border-radius: 999px; padding: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; flex: 0 0 auto; white-space: nowrap; z-index: 2; } .chat-message-row.is-me .chat-msg-quick-actions { left: auto; right: calc(100% + 6px); transform: translateY(-50%) translateX(4px); } @media (hover: hover) { .chat-message-row:hover .chat-msg-quick-actions { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } .chat-message-row.is-me:hover .chat-msg-quick-actions { transform: translateY(-50%) translateX(0); } } .chat-message-row.is-touched .chat-msg-quick-actions, .chat-message-row.is-me.is-touched .chat-msg-quick-actions { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } .chat-quick-action { width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; position: relative; transition: background .12s ease, color .12s ease; } .chat-quick-action:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); } .chat-quick-action-plus { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-weight: 800; line-height: 1; color: var(--text); background: var(--bg-card, #111); border-radius: 999px; padding: 0 2px; } /* ── Reaction summary chips ─────────────────────────────── */ .chat-reaction-summary { position: absolute; right: 6px; bottom: -16px; display: inline-flex; align-items: center; gap: 3px; flex-wrap: nowrap; z-index: 1; pointer-events: auto; } .chat-message-row.is-me .chat-reaction-summary { right: auto; left: 6px; } /* Reserve space below bubbles that carry a reaction chip so the next message doesn't visually overlap the floating pill. */ .live-chat-x .chat-message-bubble-wrap:has(.chat-reaction-summary) { margin-bottom: 24px; } .live-chat-x .chat-reaction-summary-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 3px 9px 3px 7px; border: 1px solid var(--chat-border-strong); border-radius: 999px; background: var(--chat-bg-subtle); color: var(--chat-text); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; font-family: inherit; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .live-chat-x .chat-reaction-summary-chip:hover { border-color: color-mix(in srgb, var(--chat-accent) 28%, var(--chat-border-strong)); } .live-chat-x .chat-reaction-summary-chip.is-active { background: color-mix(in srgb, var(--chat-accent) 18%, var(--chat-bg)); border-color: color-mix(in srgb, var(--chat-accent) 40%, var(--chat-border-strong)); } /* ── Floating emoji picker / action menu ────────────────── */ .chat-emoji-picker-wrap { position: fixed; z-index: 1300; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); border: 1px solid var(--border); } .chat-emoji-picker-wrap[hidden] { display: none !important; } .chat-emoji-picker { --background: var(--bg-card, #111); --border-color: var(--border); --indicator-color: var(--accent); --input-border-color: var(--border); --input-font-color: var(--text); --input-placeholder-color: var(--muted); --button-active-background: color-mix(in srgb, var(--accent) 15%, transparent); --button-hover-background: color-mix(in srgb, var(--accent) 8%, transparent); --category-emoji-padding: 4px; --num-columns: 8; width: min(320px, calc(100vw - 40px)); height: 360px; } .chat-action-menu { position: fixed; z-index: 1300; min-width: 160px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card, #111); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); padding: 4px; display: flex; flex-direction: column; } .chat-action-menu[hidden] { display: none !important; } .chat-action-menu-item { border: 0; background: transparent; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-family: inherit; } .chat-action-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .chat-action-menu-item[hidden] { display: none !important; } .chat-action-menu-item--danger { color: #f4212e; } .chat-action-menu-item--danger:hover { background: color-mix(in srgb, #f4212e 12%, transparent); } /* ── Reply preview + composer ───────────────────────────── */ .chat-reply-preview { margin: 0; border: 0; border-top: 1px solid var(--border); background: var(--bg-card, #111); padding: 8px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; align-self: stretch; flex: 0 0 auto; } .chat-reply-preview[hidden] { display: none !important; } .chat-reply-preview-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; } .chat-reply-preview-name { font-size: 12px; color: var(--muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-reply-preview-body { font-size: 14px; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .chat-reply-clear { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .live-chat-x .chat-composer { border-top: 1px solid var(--chat-border-strong); display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--chat-bg); min-height: 56px; flex: 0 0 auto; box-sizing: border-box; } .live-chat-x .chat-composer[hidden] { display: none !important; } .live-chat-x .chat-composer-inner { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--chat-bg-subtle); border: 1px solid var(--chat-border-strong); border-radius: 22px; padding: 8px 14px 8px 12px; box-sizing: border-box; transition: border-color 0.18s ease; } .live-chat-x .chat-composer:focus-within .chat-composer-inner { border-color: var(--chat-accent); } .live-chat-x .chat-composer-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .live-chat-x .chat-composer-emoji-btn { border: 0; background: transparent; color: var(--chat-muted); cursor: pointer; padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.15s ease; } .live-chat-x .chat-composer-emoji-btn:hover { color: var(--chat-accent); } .live-chat-x .chat-composer-emoji-btn svg { display: block; } .live-chat-x .chat-input { resize: none; flex: 1 1 auto; width: 100%; min-width: 0; height: 24px; min-height: 24px; max-height: 100px; border: none; background: transparent; color: var(--chat-text); padding: 3px 0; font-family: inherit; font-size: 14px; line-height: 1.35; outline: none; overflow-y: auto; box-sizing: border-box; } .live-chat-x .chat-input::placeholder { color: var(--chat-muted); opacity: 0.85; } .live-chat-x .chat-send-btn { border: 0; background: transparent; color: var(--chat-accent); border-radius: 50%; padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s ease, color 0.15s ease; } .live-chat-x .chat-send-btn svg { display: block; } .live-chat-x .chat-composer:not(.has-text) .chat-send-btn { opacity: 0.35; cursor: default; pointer-events: none; } .live-chat-x .chat-composer.has-text .chat-send-btn { opacity: 1; } /* ── Auth gate (when user isn't connected to chat) ─────── */ .chat-auth-gate { border-top: 1px solid var(--border); background: var(--bg-card, #111); padding: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .chat-auth-gate[hidden] { display: none !important; } .chat-auth-gate .live-auth-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9999px; background: #1d9bf0; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; border: 0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .chat-auth-gate .live-auth-btn:hover { background: #1a8cd8; transform: translateY(-1px); } /* ── Mobile chat polish ─────────────────────────────────── */ @media (max-width: 768px) { /* iOS Safari/Chrome zoom into any input whose font-size is < 16px. Bump the composer textarea so the page doesn't yank around when the keyboard opens. */ .live-chat-x .chat-input { font-size: 16px; } /* Slightly larger touch targets for chat-side actions. */ .live-chat-x .chat-send-btn { width: 28px; height: 28px; min-width: 28px; } .live-chat-x .chat-composer-emoji-btn { width: 26px; height: 26px; } /* Composer hugs the bottom safe-area on iOS so the send button isn't hidden behind the home-bar. */ .live-chat-x .chat-composer { padding-bottom: max(8px, env(safe-area-inset-bottom)); } /* Keep "Connect X to chat" fully inside the viewport in phone layouts, including devices with bottom safe-area insets. In portrait we pin the gate to the bottom of the viewport so the CTA always sits above the home-bar regardless of where the rest of the page scrolled to. */ .chat-auth-gate { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; min-height: 48px; flex: 0 0 auto; } @media (orientation: portrait) { .live-chat-x[data-chat-state="auth"] .chat-auth-gate, .live-chat-x[data-chat-state="closed"] .chat-auth-gate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; border-top: 1px solid var(--border); background: var(--bg-card, #111); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18); } /* When signed in, pin the composer to the bottom of the viewport too so the input is never clipped below the fold on Android/iOS. The messages list above it scrolls inside whatever space is available. */ .live-chat-x[data-chat-state="ready"] .chat-composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--chat-bg); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18); } /* Chat panel background extends down to the composer (no body gap). */ .live-grid #chatAside:has(.live-chat-x[data-chat-state="ready"]), .live-grid #chatWrap:has(.live-chat-x[data-chat-state="ready"]), .live-chat-x[data-chat-state="ready"] { background: var(--chat-bg); } .live-chat-x[data-chat-state="ready"] .chat-messages { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* Reserve space at the bottom of the page so the fixed gate doesn't overlap the controls/summary above it. Composer-state uses inner padding on the chat panel instead (see live.css) so the chat background extends all the way down to the composer. */ body:has(.live-chat-x[data-chat-state="auth"]), body:has(.live-chat-x[data-chat-state="closed"]) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } .chat-auth-gate .live-auth-btn { width: 100%; max-width: min(320px, calc(100vw - 44px)); min-height: 36px; padding: 8px 14px; justify-content: center; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Logout pill compacts a touch */ .live-chat-x .chat-logout-btn { padding: 2px 7px; font-size: 9px; } } /* ── System messages (e.g. "Guests are now allowed") ───── */ .chat-system-message { text-align: center; font-size: 12px; color: var(--chat-muted, #536471); padding: 8px 16px; margin: 4px 0; font-style: italic; letter-spacing: 0.2px; position: relative; } .chat-system-message::before, .chat-system-message::after { content: ''; position: absolute; top: 50%; width: 20%; height: 1px; background: var(--chat-border, #e1e8ed); } .chat-system-message::before { left: 8px; } .chat-system-message::after { right: 8px; } /* ── Live Coin Overlay — vertical Buy/Sell column ──────── Positioned on the LEFT edge of the video frame, with its bottom aligned to the top of the broadcast-chrome small strip. Trades stack newest-at-the-bottom and grow upward into the video. No background: text is rendered with a strong shadow so it reads on any video content (broadcast/lower-third style). */ .live-coin-overlay { position: absolute; left: 16px; /* The overlay is mounted INSIDE .studio-inner which is already inset above the bottom strips, so a normal small offset is enough — no need to add the strip heights here. */ bottom: 16px; z-index: 11; /* above strips */ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; max-width: 35%; } .live-coin-overlay[hidden] { display: none; } .live-coin-overlay-trades { display: flex; flex-direction: column-reverse; /* newest (trades[0]) at the bottom */ align-items: flex-start; gap: 8px; min-height: 0; } .live-coin-trade { display: inline-flex; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; padding: 0; border-radius: 0; background: transparent !important; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 1px rgba(0, 0, 0, 1); white-space: nowrap; animation: liveCoinTradeIn 360ms cubic-bezier(0.21, 1.02, 0.36, 1) both; transform-origin: 0 100%; will-change: transform, opacity; } .live-coin-trade.is-buy { color: #22c55e; } .live-coin-trade.is-sell { color: #ef4444; } .live-coin-trade.is-leaving { animation: liveCoinTradeOut 260ms ease-in forwards; } @keyframes liveCoinTradeIn { 0% { opacity: 0; transform: translateY(18px) scale(0.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes liveCoinTradeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.96); } } /* The legacy floating ticker pill is no longer rendered — its data moved into the broadcast-chrome small strip. Keep the styles neutralised so any stray markup stays hidden. */ .live-coin-overlay-ticker, .live-coin-overlay-icon, .live-coin-overlay-symbol, .live-coin-overlay-mcap { display: none !important; } /* Compact the overlay on phones. */ @media (max-width: 640px) { .live-coin-overlay { left: 8px; bottom: 8px; gap: 5px; max-width: 50%; } .live-coin-trade { font-size: 14px; } } @media (max-width: 380px) { .live-coin-overlay { left: 6px; gap: 4px; } .live-coin-trade { font-size: 12px; } }