:root { --ink:#142b48; --muted:#67809b; --sky:#18bce5; --sky-deep:#087ea7; --panel:#fff; --line:#cfe0e8; --mine:#d8f4fb; --danger:#d44848; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#f5fafc; color:var(--ink); font:15px Inter,system-ui,-apple-system,Segoe UI,sans-serif; }
button,input,textarea { font:inherit; }
.pairing-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#f9fdff,#e7f3f7); }
.brand { margin-bottom:22px; color:#102d4f; font-size:40px; font-weight:900; }.brand span,.chat-brand span { color:var(--sky); }
.pair-card { width:min(92vw,620px); padding:38px; border:1px solid var(--line); border-radius:8px; background:var(--panel); text-align:center; box-shadow:0 18px 50px rgba(29,91,122,.12); }
h1 { margin:0 0 12px; font-size:28px; }.pair-card p { color:var(--muted); line-height:1.6; }.muted { font-size:13px; }
.qr { position:relative; width:220px; height:220px; margin:25px auto; padding:10px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(26,105,141,.1); }.qr img { display:block; width:100%; height:100%; object-fit:contain; }.qr-badge { position:absolute; display:grid; place-items:center; width:48px; height:48px; border:3px solid #fff; border-radius:8px; background:#fff; color:var(--sky-deep); font-size:13px; font-weight:900; box-shadow:0 2px 8px #b8d6e1; }
#chat-shell { width:100vw; height:100vh; display:grid; grid-template-columns:minmax(280px,30vw) 1fr; background:#f5fafc; }.chat-sidebar { min-width:0; display:flex; flex-direction:column; padding:20px 12px; border-right:1px solid var(--line); background:#e8f3f7; }.chat-brand { padding:0 10px 18px; color:#102d4f; font-size:28px; font-weight:900; }.chat-brand small { margin-left:6px; color:var(--muted); font-size:9px; letter-spacing:2px; }.me { margin:0 7px 14px; padding:12px; border-radius:8px; background:#fff; color:#34526a; font-size:13px; }.chat-list { overflow:auto; padding-bottom:12px; }
.chat-row { width:100%; display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:12px; border:0; border-radius:8px; background:transparent; color:var(--ink); text-align:left; }.chat-row:hover,.chat-row.active { background:#fff; }.avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:#cceaf2; color:var(--sky-deep); font-weight:800; }.chat-name { font-size:14px; font-weight:850; }.chat-preview { display:block; overflow:hidden; margin-top:3px; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.unread { padding:3px 6px; border-radius:12px; background:var(--sky); color:#07344a; font-size:11px; }
.chat-main { min-width:0; display:grid; grid-template-rows:auto 1fr auto; }.chat-header { display:flex; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); background:#fff; }.chat-header > :first-child { margin-right:auto; }.chat-header strong { font-size:18px; }.chat-header small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.chat-header button,.composer button,.message-menu button { border:0; border-radius:8px; padding:10px 13px; font-weight:850; cursor:pointer; }.chat-header button { background:#e4f3f7; color:var(--sky-deep); }.selection-toolbar { display:flex; align-items:center; gap:8px; }.selection-toolbar .icon-button { width:38px; height:38px; padding:0; font-size:21px; }.selection-toolbar strong { min-width:22px; text-align:center; }
.messages { overflow:auto; padding:24px max(5vw,28px); background:linear-gradient(145deg,#f9fdff,#eff8fa); }.message { max-width:min(72%,650px); margin:8px 0; padding:10px 12px; border:1px solid var(--line); border-radius:16px 16px 16px 4px; background:#fff; color:#203b55; box-shadow:0 3px 9px rgba(31,90,110,.05); white-space:pre-wrap; word-break:break-word; }.message.mine { margin-left:auto; border-color:#a9e2ef; border-radius:16px 16px 4px 16px; background:var(--mine); }.message.selected { border-color:#93a9b5!important; background:#d9e2e7!important; }.message.mine.selected { background:#cae3e9!important; }.message.deleted { opacity:.75; font-style:italic; }.message a { color:#0573b5; font-weight:800; }.message time { display:block; margin-top:5px; color:#668195; font-size:10px; text-align:right; }.message-tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }.reaction { padding:2px 6px; border:0; border-radius:12px; background:rgba(255,255,255,.65); cursor:pointer; }.attachment { display:block; margin:4px 0 8px; color:var(--sky-deep); font-weight:850; text-decoration:none; }.attachment img { display:block; max-width:min(100%,360px); border:1px solid var(--line); border-radius:8px; }.attachment video,.attachment audio { display:block; max-width:100%; margin-top:6px; }.empty { margin-top:16vh; color:var(--muted); text-align:center; }
.composer { display:flex; gap:10px; align-items:end; padding:14px 22px; border-top:1px solid var(--line); background:#fff; }.composer textarea { flex:1; min-height:45px; max-height:130px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8fcfd; color:var(--ink); resize:none; }.composer textarea:focus { outline:2px solid rgba(24,188,229,.23); border-color:var(--sky); }.composer button { height:45px; background:var(--sky); color:#063047; }.composer .icon-button { width:45px; border-radius:50%; font-size:24px; line-height:1; }.composer button:disabled,.composer textarea:disabled { opacity:.55; }
.message-menu { position:fixed; z-index:10; min-width:180px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 18px 50px rgba(30,60,90,.18); }.message-menu button { width:100%; background:transparent; color:var(--ink); text-align:left; }.message-menu button:hover { background:#eef7fb; }.message-menu .danger { color:var(--danger); }
.forward-dialog { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(10,30,48,.34); }.forward-card { width:min(92vw,460px); max-height:min(78vh,640px); display:grid; grid-template-rows:auto auto minmax(100px,1fr) auto; gap:12px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 18px 50px rgba(24,48,68,.22); }.forward-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.forward-heading strong { font-size:18px; }.forward-heading span { color:var(--muted); font-weight:800; }.forward-card input { width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; color:var(--ink); }.forward-list { overflow:auto; display:grid; gap:5px; }.forward-row { width:100%; display:flex; gap:10px; align-items:center; padding:11px; border:1px solid transparent; border-radius:8px; background:#f6fafb; color:var(--ink); text-align:left; cursor:pointer; }.forward-row.selected { border-color:var(--sky); background:#e5f7fb; }.forward-actions { display:flex; justify-content:flex-end; gap:9px; }.forward-actions button { padding:10px 14px; border:0; border-radius:8px; font-weight:850; cursor:pointer; }.forward-actions button:first-child { background:#e8f2f5; color:#35536a; }.forward-actions button:last-child { background:var(--sky); color:#063047; }.toast { position:fixed; bottom:26px; left:50%; z-index:40; transform:translateX(-50%); padding:10px 14px; border-radius:8px; background:#132b43; color:#fff; font-weight:800; box-shadow:0 8px 24px rgba(15,37,57,.28); }
@media(max-width:760px) { #chat-shell { grid-template-columns:1fr; }.chat-sidebar { display:none; }.messages { padding:18px; }.message { max-width:86%; }.chat-header,.composer { padding:13px; } }
.forward-dialog[hidden] { display:none; }