:root{--navy:#172847;--ink:#17233b;--muted:#7d8798;--line:#e5e8ee;--blue:#3976ea}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;color:var(--ink);background:#e9edf3}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:76px 350px 1fr;width:min(1480px,100%);height:100%;margin:auto;background:#fff;box-shadow:0 25px 80px #13213a22}.rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0;background:var(--navy)}.rail button{width:44px;height:44px;border:0;border-radius:13px;background:transparent;color:#9fabbe;font-size:20px}.rail button.active{margin-top:46px;background:#ffffff14;color:#fff}.brand{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:#fff;font-size:22px;font-weight:bold}.rail .settings{margin-top:auto}.mini-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#415676;color:#fff;font-size:11px}.chat-list{display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fbfbfc}.chat-list>header{padding:30px 24px 15px}.chat-list>header>span{color:#98a1b0;font-size:9px;font-weight:bold;letter-spacing:.22em}.chat-list>header div{display:flex;align-items:center;justify-content:space-between}.chat-list h1{margin:4px 0;font-family:Georgia,serif;font-size:28px}.chat-list header button{width:38px;height:38px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:22px}.search{display:flex;gap:10px;margin:0 20px 14px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;color:#99a2b1;background:#fff}.search input{width:100%;border:0;outline:0}.filters{display:flex;gap:18px;padding:0 23px 12px;border-bottom:1px solid var(--line)}.filters button{border:0;background:none;color:#929cac;font-size:11px}.filters .active{color:var(--ink);font-weight:bold}.chats{padding:9px}.chat{display:grid;grid-template-columns:48px 1fr auto;gap:11px;align-items:center;width:100%;padding:11px;border:0;border-radius:14px;background:none;text-align:left}.chat.active{background:#edf1f7}.chat>span{display:grid;gap:6px;min-width:0}.chat strong{font-size:13px}.chat small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.chat time{align-self:start;color:#9aa3b2;font-size:9px}.avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;font-size:12px;font-style:normal;font-weight:bold}.coral{background:linear-gradient(145deg,#f49a7f,#d9666b)}.violet{background:linear-gradient(145deg,#aa91e8,#7357ba)}.blue{background:linear-gradient(145deg,#6ca8dd,#3d6fa5)}.secure{display:flex;gap:10px;margin:auto 18px 18px;padding:12px;border:1px solid var(--line);border-radius:13px;color:#71809a}.secure span{display:grid;gap:3px}.secure strong{font-size:10px}.secure small{font-size:8px}.conversation{display:grid;grid-template-rows:78px 1fr auto;min-width:0;background:#f8f9fa}.conversation-header{display:flex;align-items:center;justify-content:space-between;padding:0 27px;border-bottom:1px solid var(--line);background:#fff}.conversation-header>div{display:flex;align-items:center;gap:12px}.conversation-header span{display:grid;gap:5px}.conversation-header strong{font-size:14px}.conversation-header small{color:#42a677;font-size:10px}.conversation-header nav{display:flex;gap:8px}.conversation-header button{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:#fff}.messages{overflow:auto;padding:25px clamp(24px,5vw,72px);background-image:radial-gradient(#b9c1cf26 .7px,transparent .7px);background-size:15px 15px}.date,.encrypted{width:max-content;margin:0 auto 17px;padding:6px 11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#8994a5;font-size:9px}.encrypted{margin-bottom:28px}.message-line{display:flex;margin:9px 0}.message-line.mine{justify-content:flex-end}.bubble{max-width:490px;padding:11px 13px 8px;border:1px solid #e2e5eb;border-radius:7px 17px 17px;background:#fff}.mine .bubble{border-color:#27446e;border-radius:17px 7px 17px 17px;background:var(--navy);color:#fff}.bubble p{margin:0 0 5px;font-size:12px;line-height:1.5}.bubble time{display:block;color:#9da6b4;text-align:right;font-size:8px}.composer{position:relative;display:grid;grid-template-columns:34px 1fr 34px 38px;gap:6px;margin:12px clamp(18px,4vw,50px) 17px;padding:5px;border:1px solid #dfe3ea;border-radius:16px;background:#fff}.composer>button{border:0;background:none;font-size:19px}.composer input{border:0;outline:0}.composer .send{border-radius:11px;background:var(--navy);color:#fff}.emoji-panel{position:absolute;right:40px;bottom:55px;display:grid;grid-template-columns:repeat(3,40px);padding:8px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 15px 40px #18294330}.emoji-panel button{height:38px;border:0;background:#f7f8fa;font-size:19px}.hidden{display:none!important}.call-overlay{position:fixed;inset:0;display:grid;place-items:center;background:#0b1324dd;backdrop-filter:blur(12px)}.call-overlay section{display:flex;flex-direction:column;align-items:center;width:380px;padding:38px;border:1px solid #ffffff20;border-radius:28px;background:linear-gradient(145deg,#233656,#111d33);color:#fff}.call-overlay section>.avatar{width:88px;height:88px;margin-top:42px;border-radius:28px;font-size:20px}.call-overlay h2{margin:20px 0 6px;font-family:Georgia,serif}.call-overlay p{margin:0;color:#a7b2c4}.call-overlay section>div{display:flex;gap:24px;margin-top:55px}.call-overlay section>div button{width:58px;height:58px;border:0;border-radius:19px;background:#ffffff18;color:#fff;font-size:20px}.call-overlay .hangup{background:#df5d63}@media(max-width:800px){.app-shell{grid-template-columns:66px 290px 1fr}.chat-list{width:290px}.conversation{min-width:430px}}@media(max-width:620px){.chat-list{display:none}.app-shell{grid-template-columns:60px 1fr}.messages{padding:18px 14px}.bubble{max-width:86%}}