@font-face { font-family: Inter; src: url(assets/fonts/inter-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/inter-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/inter-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/inter-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
:root { --text: #efefef; --muted: #9a9a9a; --line: rgba(255,255,255,.12); --glow: 0 0 18px rgba(255,255,255,.35); }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { background: #070707; color: var(--text); font-family: Inter, system-ui, sans-serif; font-weight: 500; line-height: 1.55; }
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 30%, #242424 0%, #121212 55%, #060606 100%); }
.bg::before { content: ''; position: absolute; inset: -40px; background-image: radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.6px); background-size: 40px 40px; animation: gridpan 50s linear infinite; }
@keyframes gridpan { to { transform: translate(40px, 40px); } }
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 66px; backdrop-filter: blur(14px); background: rgba(7,7,7,.82); border-bottom: 1px solid var(--line); }
.bar-in { height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .14em; font-size: 13px; color: var(--text); text-decoration: none; }
.logo svg { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); }
.ghost { min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: none; color: var(--text); font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.ghost:hover { background: rgba(255,255,255,.07); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: #f2f2f2; color: #000; font: 800 14px Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 24px rgba(255,255,255,.2); text-decoration: none; transition: transform .2s; }
.btn:hover { transform: translateY(-2px); }
@media (max-width: 640px) { .hide-m { display: none; } }

/* conversation */
.chatpage { position: relative; z-index: 1; max-width: 820px; height: 100vh; margin: 0 auto; padding: 86px 16px 16px; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(14,14,14,.9); }
.av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e9e9e9; color: #000; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: var(--glow); }
.chat-head b { display: block; font-size: 16px; }
.chat-head span { font-size: 12px; color: var(--muted); }
.thread { flex: 1; overflow-y: auto; padding: 22px 18px; border: 1px solid var(--line); background: rgba(9,9,9,.85); display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 78%; display: flex; flex-direction: column; animation: pop .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.msg .bub { padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
.msg .t { font-size: 11px; color: #777; margin-top: 4px; padding: 0 6px; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me .bub { background: #efefef; color: #000; border-bottom-right-radius: 6px; box-shadow: 0 0 18px rgba(255,255,255,.15); }
.msg.them { align-self: flex-start; }
.msg.them .bub { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-bottom-left-radius: 6px; }
.vide { margin: auto; max-width: 420px; text-align: center; color: var(--muted); font-size: 15px; }
.vide .ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-size: 26px; color: #fff; box-shadow: var(--glow); }
.vide b { display: block; color: #fff; font-size: 18px; margin-bottom: 6px; }
.composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 20px 20px; background: rgba(14,14,14,.9); }
.composer textarea { flex: 1; resize: none; max-height: 160px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(5,5,5,.8); color: var(--text); font: 500 15px Inter, system-ui, sans-serif; line-height: 1.45; outline: none; }
.composer textarea:focus { border-color: rgba(255,255,255,.7); }
.tick { font-weight: 800; letter-spacing: -2px; color: #777; margin-left: 4px; }
.tick.lu { color: #fff; text-shadow: 0 0 8px rgba(120,200,255,.9); }
.av .dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #4ade80; border: 2px solid #0e0e0e; box-shadow: 0 0 8px #4ade80; }