:root{--bg: #0a0e14;--bar: #10151f;--line: #1b2331;--ink: #e8eef5;--muted: #7d8aa0;--blue: #2a7bff;--white-bubble: #23272e;--accent: #57d9a3;--danger: #ff6b6b;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--accent)}.app{display:flex;flex-direction:column;height:100dvh;max-width:900px;margin:0 auto;background:var(--bg)}.header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:env(safe-area-inset-top) 8px 0;height:calc(52px + env(safe-area-inset-top));background:var(--bar);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header .title{text-align:center;font-weight:600;font-size:1.05rem}.iconbtn{background:none;border:0;cursor:pointer;color:var(--ink);width:44px;height:44px;display:grid;place-items:center;border-radius:10px}.iconbtn:hover{background:#ffffff0f}.messages{flex:1;overflow-y:auto;padding:16px 12px 8px;display:flex;flex-direction:column;gap:6px}.row{display:flex}.row.me{justify-content:flex-end}.row.them{justify-content:flex-start}.bubble{max-width:100%;padding:9px 13px;border-radius:20px;line-height:1.35;font-size:1rem;white-space:pre-wrap;word-wrap:break-word}.me .bubble{background:var(--blue);color:#fff;border-bottom-right-radius:6px}.them .bubble{background:var(--white-bubble);color:var(--ink);border-bottom-left-radius:6px}.bubble em{color:var(--muted);font-style:italic}.me .bubble em{color:#ffffffbf}.typing{color:var(--muted);font-size:.85rem;padding:2px 8px}.composer-wrap{background:var(--bar);border-top:1px solid var(--line)}.staged{position:relative;display:inline-block;margin:10px 10px 0}.staged img{height:72px;width:auto;max-width:120px;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--line)}.staged-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:#000;color:#fff;border:1px solid var(--line);font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.composer{display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.composer textarea{flex:1;resize:none;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:10px 14px;max-height:140px;outline:none}.composer textarea:focus{border-color:#2f3b4f}.send{background:var(--blue);color:#fff;border:0;border-radius:50%;width:40px;height:40px;cursor:pointer;flex:0 0 40px;font-size:1.1rem;align-self:flex-end}.send:disabled{opacity:.4;cursor:default}.attach{background:transparent;color:var(--muted, #8b97a8);border:0;cursor:pointer;width:40px;height:40px;flex:0 0 40px;align-self:flex-end;display:flex;align-items:center;justify-content:center;border-radius:50%}.attach:hover{background:#ffffff0f;color:#fff}.attach:disabled{opacity:.4;cursor:default}.bubble.tappable{cursor:pointer}.msg-actions{display:inline-flex;gap:4px;margin-top:4px;background:var(--bar);border:1px solid var(--line);border-radius:10px;padding:3px}.msg-actions button{background:transparent;color:#e6edf3;border:0;border-radius:7px;padding:5px 10px;font-size:.82rem;cursor:pointer}.msg-actions button:hover{background:#ffffff14}.msg-actions .act-del{color:#ff6b6b}.delchk{display:flex;align-items:center;padding:0 8px}.delchk input{width:18px;height:18px;accent-color:var(--blue)}.editbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.82rem;color:var(--muted, #8b97a8);border-bottom:1px solid var(--line)}.editbar .link{background:0;border:0;color:var(--blue);cursor:pointer;font-size:.82rem}.delete-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--bar);border-top:1px solid var(--line)}.delcount{color:var(--muted, #8b97a8);font-size:.85rem}.photowrap{position:relative;display:inline-block}.photo.vid{max-width:100%;width:auto;border-radius:14px;display:block;background:#000}.animate-pill{position:absolute;bottom:8px;right:8px;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 11px;font-size:.78rem;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.animate-pill:hover{background:#000000d1}.animating{position:absolute;bottom:8px;right:8px;background:#0000009e;color:#fff;border-radius:999px;padding:5px 11px;font-size:.78rem;display:flex;align-items:center;gap:7px;pointer-events:none}.animating:before{content:"";width:9px;height:9px;border-radius:50%;background:#ff5a5a;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.animate-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:min(100%,460px);background:var(--bar);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));z-index:60}.animate-sheet h3{margin:0 0 14px;font-size:1.05rem}.chooser{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.chooser>span{color:var(--muted, #8b97a8);font-size:.9rem}.seg{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}.seg button{background:transparent;color:#e6edf3;border:0;border-radius:7px;padding:7px 16px;font-size:.88rem;cursor:pointer}.seg button.on{background:var(--blue);color:#fff}.sheet-actions{display:flex;gap:10px;margin-top:16px}.sheet-actions .btn{flex:1}.companion-bar{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;background:var(--bar);border-bottom:1px solid var(--line);scrollbar-width:none}.companion-bar::-webkit-scrollbar{display:none}.companion-bar form{flex:0 0 auto;margin:0}.comp-chip{background:var(--bg);color:var(--muted, #8b97a8);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;cursor:pointer;white-space:nowrap}.comp-chip.active{color:#fff;font-weight:700;border-color:var(--blue);background:#2563eb26}.add-companion{width:100%;margin-bottom:14px}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:40}.drawer{position:fixed;top:0;left:0;bottom:0;width:min(88vw,420px);background:var(--bar);border-right:1px solid var(--line);z-index:50;padding:calc(16px + env(safe-area-inset-top)) 18px 18px;overflow-y:auto}.drawer h2{margin:0 0 4px}.drawer .sub{color:var(--muted);font-size:.85rem;margin-bottom:18px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.field label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.field input,.field textarea,.field select{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}.field textarea{min-height:90px;resize:vertical}.btn{background:var(--accent);color:#06231a;border:0;border-radius:10px;padding:11px 16px;font-weight:600;cursor:pointer;width:100%}.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--line)}.stack{display:flex;flex-direction:column;gap:10px;margin-top:8px}.hint{color:var(--muted);font-size:.78rem;margin-top:-8px;margin-bottom:14px}.msgcol{display:flex;flex-direction:column;gap:4px;max-width:75%;align-items:flex-start}.me .msgcol{align-items:flex-end}.photo{padding:0;border:0;background:none;cursor:pointer;border-radius:18px;overflow:hidden;max-width:240px;line-height:0}.photo img{display:block;width:100%;border-radius:18px}.photo-pending{font-style:italic;color:var(--muted)}.gallery-panel{position:fixed;top:0;right:0;bottom:0;width:min(90vw,440px);background:var(--bar);border-left:1px solid var(--line);z-index:50;padding:calc(14px + env(safe-area-inset-top)) 16px 16px;overflow-y:auto}.gp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.gp-head h2{margin:0;font-size:1.1rem}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.thumb{padding:0;border:0;background:var(--bg);cursor:pointer;aspect-ratio:5/8;overflow:hidden;border-radius:8px}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.empty{color:var(--muted);text-align:center;margin-top:48px}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000eb;z-index:60;display:grid;place-items:center;padding:16px}.lightbox img{max-width:100%;max-height:calc(100% - 80px);border-radius:12px}.lb-actions{position:fixed;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;gap:12px;justify-content:center}.lb-actions .btn{width:auto;padding:10px 26px}.lb-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:61;background:#ffffff14;border:0;color:#fff;width:46px;height:68px;font-size:2rem;line-height:1;cursor:pointer;border-radius:10px}.lb-nav:hover{background:#ffffff2e}.lb-nav.prev{left:8px}.lb-nav.next{right:8px}.face-upload{display:block;width:100px;height:100px;border-radius:50%;margin:2px auto 18px;border:2px dashed #2f3b4f;background:var(--bg);cursor:pointer;overflow:hidden;color:var(--muted);font-size:.78rem;line-height:1.15;padding:0}.face-upload img{width:100%;height:100%;object-fit:cover}.face-upload span{display:grid;place-items:center;height:100%}.tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--bg);padding:4px;border-radius:12px}.tabs button{flex:1;padding:8px;border:0;background:none;color:var(--muted);border-radius:9px;cursor:pointer;font-weight:600}.tabs button.active{background:var(--bar);color:var(--ink)}.hidden{display:none}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;font-size:.9rem}.chip input{margin:0}input[type=range]{width:100%;accent-color:var(--accent)}.field b{color:var(--ink)}.login{min-height:100dvh;display:grid;place-items:center;padding:24px}.login .card{width:min(360px,100%);text-align:center}.login h1{font-size:2.4rem;margin:0 0 6px;letter-spacing:-.02em}.login p{color:var(--muted);margin:0 0 24px}.login input{width:100%;margin-bottom:12px;text-align:center}.err{color:var(--danger);font-size:.85rem;margin-top:8px}
