/* contact-chat.css — footer "Contact" chat popup (app/ui/contact-chat.js). * * A floating chat card pinned bottom-right on desktop, a bottom sheet on * mobile. Glass + a muted orange accent (kept low-glow on purpose). Mounted * on so it escapes the lobby header's transformed-ancestor fixed trap. */ .cchat { position: fixed; inset: 0; z-index: 1200; /* above panels (lobby-panels) + toasts */ display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 18px 84px; /* clear the bottom bar */ pointer-events: none; /* backdrop is click-through except the card */ /* Muted orange accent — deliberately low intensity (no neon glow). */ --cc-accent: #f59e0b; --cc-accent-line: rgba(245, 158, 11, 0.45); --cc-accent-soft: rgba(245, 158, 11, 0.10); } .cchat__card { pointer-events: auto; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; background: rgba(10, 10, 14, 0.92); border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); /* plain drop shadow — no neon halo */ backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); overflow: hidden; animation: cchat-in 160ms ease-out; } @keyframes cchat-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } /* Header */ .cchat__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-chip); text-transform: uppercase; color: var(--ink-2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent); } .cchat__title b { color: var(--cc-accent); font-weight: 700; } /* orange — the one accent */ .cchat__close { background: transparent; border: 0; padding: 0 4px; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; transition: color var(--dur-sm); } .cchat__close:hover { color: var(--ink-0); } /* Thread — generous min-height so a fresh popup shows clear empty space below the greeting, signalling "your message goes here". Messages stack from the top; the blank space fills the rest. */ .cchat__thread { flex: 1; min-height: 320px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .cchat__msg { max-width: 84%; padding: 9px 12px; border-radius: 12px; font-size: var(--fs-small); line-height: 1.42; white-space: pre-wrap; word-break: break-word; } .cchat__msg--bot { align-self: flex-start; background: var(--surf-2); color: var(--ink-1); border: 1px solid var(--rule); border-bottom-left-radius: 4px; } .cchat__msg--user { align-self: flex-end; background: var(--acc-gradient); color: #04121a; font-weight: 500; border-bottom-right-radius: 4px; } .cchat__msg--muted { opacity: 0.55; font-style: italic; } /* Composer */ .cchat__composer { border-top: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--surf-1); } .cchat__input { width: 100%; background: var(--surf-2); border: 1px solid var(--rule); border-radius: 9px; color: var(--ink-0); font-family: var(--font-display); font-size: var(--fs-small); padding: 9px 11px; outline: none; transition: border-color var(--dur-sm); } .cchat__input:focus { border-color: var(--rule-strong); } /* neutral, low-key */ .cchat__input::placeholder { color: var(--ink-4); } .cchat__row { display: flex; align-items: flex-end; gap: 8px; } .cchat__input { flex: 1; resize: none; max-height: 120px; line-height: 1.4; } .cchat__send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--rule-strong); background: var(--surf-2); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; transition: background var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm); } /* Orange only on hover. */ .cchat__send:hover:not(:disabled) { background: var(--cc-accent-soft); border-color: var(--cc-accent-line); color: var(--cc-accent); } .cchat__send:disabled { opacity: 0.45; cursor: default; } /* Mobile — bottom sheet, full width */ @media (max-width: 640px) { .cchat { padding: 0; align-items: stretch; justify-content: stretch; } .cchat__card { width: 100vw; max-height: 82vh; margin-top: auto; border-radius: 16px 16px 0 0; border-bottom: 0; } }