body{min-height:100vh;display:grid;place-items:center;padding:18px;overflow:hidden;background:linear-gradient(135deg,#eef5ff 0%,#f8fbff 48%,#eaf2fb 100%)}
.member-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.6}.orb-a{width:460px;height:460px;right:-120px;top:-180px;background:radial-gradient(circle,#79c8ff55,transparent 70%)}.orb-b{width:500px;height:500px;left:-200px;bottom:-250px;background:radial-gradient(circle,#517bff33,transparent 72%)}
.chat-shell{position:relative;width:min(490px,100%);height:min(790px,calc(100vh - 36px));background:rgba(255,255,255,.96);border:1px solid rgba(196,213,235,.9);border-radius:28px;box-shadow:0 34px 90px rgba(27,57,102,.2),0 8px 24px rgba(27,57,102,.08);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto auto;backdrop-filter:blur(14px)}
.chat-head{padding:18px 20px 16px;background:linear-gradient(135deg,#0b1f45 0%,#10336d 58%,#0f65b9 100%);color:#fff;display:flex;align-items:center;gap:13px;position:relative;overflow:hidden}.chat-head:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-100px;top:-130px;background:radial-gradient(circle,#47c3ff44,transparent 68%)}
.brand-avatar{position:relative;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#2f83ff,#08b7ef);display:grid;place-items:center;font-weight:900;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 24px rgba(0,146,255,.25);flex:none}.brand-avatar i{position:absolute;width:12px;height:12px;border-radius:50%;background:#2de69a;right:-2px;bottom:-1px;border:3px solid #10336d}.head-copy{min-width:0;z-index:1}.head-title{font-size:16px;font-weight:900;letter-spacing:.01em}.head-sub{display:flex;align-items:center;gap:7px;font-size:11px;color:#d7ebff;margin-top:4px}.head-sub .dot{width:6px;height:6px;box-shadow:none}.sep{opacity:.45}.secure-pill{margin-left:auto;z-index:1;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);padding:7px 9px;border-radius:999px;font-size:10px;color:#e9f5ff;backdrop-filter:blur(6px)}
.service-strip{height:38px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:700;color:#55708f;background:#f6faff;border-bottom:1px solid #e6eef8;letter-spacing:.02em}.service-strip span:first-child{color:#276ed4}
.messages{padding:20px;overflow:auto;background:linear-gradient(180deg,#fbfdff 0%,#f5f8fd 100%);scrollbar-width:thin}.day-note{text-align:center;margin:2px 0 16px}.day-note span{font-size:10px;color:#8292a8;background:#edf3fa;border:1px solid #e3ebf5;border-radius:999px;padding:5px 9px}.welcome-card{display:flex;gap:11px;align-items:flex-start;padding:14px;border-radius:18px;background:linear-gradient(135deg,#fff,#f7fbff);border:1px solid #e2ebf6;box-shadow:0 8px 22px rgba(41,74,119,.06);font-size:13px;line-height:1.5;max-width:88%;margin-bottom:16px}.welcome-card p{margin:4px 0 0;color:#71829a}.welcome-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eaf3ff;flex:none}
.msg-row{display:flex;align-items:flex-end;gap:6px;margin:9px 0}.msg-row.me{justify-content:flex-end}.bubble{position:relative;max-width:82%;padding:10px 12px 8px;border-radius:17px 17px 17px 6px;background:#fff;border:1px solid #e3ebf5;box-shadow:0 5px 16px rgba(40,69,110,.055);line-height:1.45;font-size:13px;white-space:pre-wrap;word-break:break-word}.msg-row.me .bubble{background:linear-gradient(145deg,#2f78f6,#167ed8);border-color:transparent;color:#fff;border-radius:17px 17px 6px 17px;box-shadow:0 8px 20px rgba(44,120,255,.2)}.bubble-text:empty{display:none}.time{font-size:9px;opacity:.68;margin-top:5px;display:flex;align-items:center;gap:5px}.edited{font-style:italic}.edit-mini{width:26px;height:26px;border:0;border-radius:9px;background:rgba(15,35,75,.08);color:#6f819a;display:grid;place-items:center;font-size:12px;opacity:0;transition:.18s}.msg-row:hover .edit-mini,.msg-row:focus-within .edit-mini{opacity:1}.msg-row.me .edit-mini{order:-1}.chat-image{display:block;max-width:100%;width:min(260px,64vw);max-height:320px;object-fit:cover;border-radius:12px;margin-bottom:7px;background:#dbe7f4}.msg-row.me .chat-image{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.file-card{display:flex;align-items:center;gap:10px;min-width:220px;max-width:280px;text-decoration:none;color:inherit;padding:9px;border-radius:12px;background:#f5f8fc;border:1px solid #e2eaf4;margin-bottom:7px}.msg-row.me .file-card{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18)}.file-card-icon{width:36px;height:36px;border-radius:10px;background:#e4edfa;display:grid;place-items:center;flex:none}.msg-row.me .file-card-icon{background:rgba(255,255,255,.16)}.file-card-copy{min-width:0}.file-card-name{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-card-size{font-size:9px;opacity:.67;margin-top:2px}
.typing{height:26px;padding:0 20px;color:#75869d;font-size:11px;display:flex;align-items:center;background:#fff}.closedbar{padding:11px 14px;text-align:center;background:#fff8ed;color:#9a5917;border-top:1px solid #fee2b9;font-size:11px}.composer{border-top:1px solid #e5edf7;background:#fff;padding:10px 12px 11px}.compose-box{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:8px;border:1px solid #dde7f2;border-radius:17px;background:#fbfdff;padding:6px;box-shadow:0 4px 16px rgba(34,67,113,.04)}.compose-box:focus-within{border-color:#87b4ff;box-shadow:0 0 0 3px rgba(44,120,255,.08)}.composer textarea{resize:none;max-height:110px;min-height:38px;border:0;padding:9px 6px;outline:none;line-height:1.4;background:transparent;color:#17233a}.tool-btn{width:38px;height:38px;border-radius:12px;background:#edf4ff;color:#2d70d5;display:grid;place-items:center;font-size:21px;font-weight:300;cursor:pointer}.send{width:40px;height:40px;border:0;border-radius:13px;background:linear-gradient(135deg,#2d78fb,#02a9e9);color:#fff;font-size:15px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(44,120,255,.22)}.send:disabled{opacity:.6}.composer-note{text-align:center;font-size:9px;color:#9aa7b8;margin-top:7px}.file-preview{height:38px;margin-bottom:8px;padding:0 9px 0 11px;border-radius:12px;background:#eef5ff;border:1px solid #dbe9fb;color:#3d587a;display:flex;align-items:center;justify-content:space-between;font-size:11px}.file-preview>div{display:flex;align-items:center;gap:7px;min-width:0}.file-preview #fileName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.file-preview button{border:0;background:transparent;color:#6f8196;font-size:18px}
.modal{position:fixed;inset:0;background:rgba(8,20,43,.48);display:grid;place-items:center;padding:18px;z-index:50;backdrop-filter:blur(4px)}.modal-card{width:min(430px,100%);background:#fff;border-radius:20px;box-shadow:0 26px 70px rgba(12,35,75,.28);padding:16px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal-head button{border:0;background:#eff4fa;width:30px;height:30px;border-radius:10px;font-size:18px;color:#6d7d93}.modal-card textarea{width:100%;min-height:120px;resize:vertical;border:1px solid #dce6f2;border-radius:13px;padding:12px;outline:none}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.btn-ghost,.btn-primary{border:0;border-radius:11px;padding:9px 13px;font-weight:800;font-size:12px}.btn-ghost{background:#edf2f8;color:#53647a}.btn-primary{background:#2c78ff;color:#fff}
@media(max-width:560px){body{padding:0;background:#fff;overflow:auto}.member-bg{display:none}.chat-shell{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}.chat-head{padding-top:max(15px,env(safe-area-inset-top));padding-left:15px;padding-right:15px}.secure-pill span{display:none}.messages{padding:16px 13px}.bubble{max-width:86%}.edit-mini{opacity:.75}.composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}.service-strip{font-size:9px}}
/* v0.3 username gate */
.username-gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(5,18,43,.44);backdrop-filter:blur(9px)}
.username-gate.hidden{display:none!important}.username-card{width:min(410px,100%);position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border:1px solid rgba(213,227,245,.95);border-radius:26px;padding:30px 28px 26px;box-shadow:0 32px 90px rgba(7,31,70,.3),0 8px 24px rgba(7,31,70,.08);text-align:left}.username-card:before{content:"";position:absolute;right:-80px;top:-100px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#2faeff2f,transparent 68%)}.username-badge{position:relative;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:25px;background:linear-gradient(145deg,#e9f4ff,#f7fbff);border:1px solid #dceafb;box-shadow:0 10px 28px rgba(25,107,218,.12);margin-bottom:18px}.username-kicker{font-size:9px;font-weight:900;letter-spacing:.17em;color:#2d78e8;margin-bottom:7px}.username-card h2{font-size:24px;line-height:1.15;margin:0;color:#11213c;letter-spacing:-.025em}.username-card p{font-size:12px;line-height:1.65;color:#6e7f96;margin:10px 0 20px}.username-card label{display:block;font-size:10px;font-weight:900;color:#40556f;margin:0 0 7px}.username-input-wrap{height:50px;display:flex;align-items:center;gap:8px;border:1px solid #d9e5f2;border-radius:15px;background:#fff;padding:0 14px;box-shadow:0 4px 13px rgba(24,56,98,.04)}.username-input-wrap:focus-within{border-color:#6ca8ff;box-shadow:0 0 0 4px rgba(44,120,255,.09)}.username-input-wrap span{color:#8ca0b7;font-size:14px;font-weight:800}.username-input-wrap input{width:100%;border:0;outline:0;background:transparent;color:#172842;font-size:14px;font-weight:750;letter-spacing:.01em}.username-input-wrap input::placeholder{color:#a6b3c3;font-weight:500}.username-error{min-height:19px;padding-top:6px;font-size:10px;color:#d34040;font-weight:700}.username-continue{width:100%;height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,#2d76f4,#06a5e8);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 12px 24px rgba(35,118,237,.22);transition:.18s}.username-continue:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(35,118,237,.27)}.username-continue:disabled{opacity:.65;transform:none;cursor:wait}.username-card small{display:block;text-align:center;color:#9aa8b9;font-size:9px;margin-top:12px}.service-strip #memberIdentity{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.username-gate{padding:15px}.username-card{border-radius:24px;padding:27px 22px 23px}.username-card h2{font-size:22px}.service-strip #memberIdentity{max-width:230px}}

/* v0.3.1 visual polish + stale-cache recovery */
.username-gate{isolation:isolate}
.username-card{transform:translateZ(0)}
.username-card .username-input-wrap{transition:border-color .18s,box-shadow .18s,background .18s}
.username-card .username-input-wrap:focus-within{background:#fff}
@media(min-width:561px){
  .chat-shell{min-height:620px}
  .composer{padding:11px 13px 12px}
  .compose-box{min-height:54px}
  .composer-note{margin-top:6px;line-height:1.35}
}

/* v0.3.3 upload UX */
.compose-box.dragging{border-color:#2c78ff;background:#eef6ff;box-shadow:0 0 0 4px rgba(44,120,255,.10)}


/* v0.3.4 read receipts */
.time .receipt{margin-left:auto;font-style:normal;font-weight:700;letter-spacing:.01em;opacity:.82;white-space:nowrap}
.msg-row.me .time .receipt{color:rgba(255,255,255,.82)}
.msg-row.me .time .receipt.read{color:#d7fff0;opacity:1}
.receipt-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:120;padding:10px 14px;border-radius:999px;background:#0f2d55;color:#fff;box-shadow:0 12px 34px rgba(15,45,85,.24);font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.2s ease;white-space:nowrap}
.receipt-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){.receipt-toast{bottom:84px;max-width:calc(100vw - 28px);white-space:normal;text-align:center}}