:root{--ink:#24232b;--muted:#8c8a95;--line:#eeedf1;--violet:#7166d8;--rail:#24242d;--bubble:#f0f0f5;--page:#fbfbfc}*{box-sizing:border-box}body{margin:0;background:#e7e7eb;color:var(--ink);font-family:"DM Sans",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.desktop-app{display:grid;grid-template-columns:74px 302px minmax(510px,1fr) 278px;width:min(1540px,100vw);min-height:100vh;margin:auto;overflow:hidden;background:#fff;box-shadow:0 0 50px #25242c12}.rail{display:flex;flex-direction:column;align-items:center;padding:22px 0 18px;color:#b8b6c2;background:var(--rail)}.logo{display:grid;place-items:center;width:37px;height:37px;margin-bottom:42px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#9589f2,#5d52be);font:700 italic 25px "Playfair Display",serif;text-decoration:none}.rail-nav{display:grid;gap:12px}.rail-button{display:grid;place-items:center;width:43px;height:43px;border:0;border-radius:13px;color:#b5b3c0;background:transparent}.rail-button:hover,.rail-button.active{color:#fff;background:#3a3944}.rail-button svg{width:20px;height:20px}.rail-bottom{display:grid;gap:14px;margin-top:auto}.rail-profile{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:13px;color:#fff;background:#dd9978;font-size:13px;font-weight:700}.rail-profile span{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border:2px solid var(--rail);border-radius:50%;background:#6ec88e}
.inbox{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:#fff}.inbox-head{display:flex;justify-content:space-between;align-items:center;padding:25px 22px 20px}.inbox h1{margin:0;font-size:20px;letter-spacing:-.6px}.compose-button{display:grid;place-items:center;width:31px;height:31px;border:0;border-radius:11px;color:#fff;background:var(--violet);font-size:21px;font-weight:300}.search{display:flex;align-items:center;gap:7px;margin:0 18px;padding:0 11px;border-radius:10px;color:#9896a0;background:#f5f5f7}.search svg{width:15px;height:15px}.search input{width:100%;padding:10px 0;border:0;outline:0;background:transparent;color:var(--ink);font-size:11px}.inbox-tabs{display:flex;gap:16px;margin:18px 22px 10px;border-bottom:1px solid var(--line)}.inbox-tabs button{position:relative;padding:0 0 10px;border:0;color:#97949e;background:transparent;font-size:10px}.inbox-tabs button.selected{color:var(--ink);font-weight:700}.inbox-tabs button.selected::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;border-radius:2px;background:var(--violet);content:""}.inbox-tabs b{display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:3px;border-radius:7px;color:#fff;background:var(--violet);font-size:8px}.chat-list{display:flex;flex-direction:column;gap:2px;padding:0 9px;overflow:auto}.chat-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px;border:0;border-radius:11px;color:var(--ink);background:transparent;text-align:left}.chat-row:hover,.chat-row.active{background:#f3f2f8}.person-avatar,.group-avatar{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:15px;color:#fff;font-size:14px;font-weight:700}.nora{background:linear-gradient(145deg,#d4a17e,#bb735e)}.dima{background:linear-gradient(145deg,#84b6c8,#538aaf)}.lera{background:linear-gradient(145deg,#e2a1ba,#be759b)}.group-avatar{border-radius:14px}.warm{background:linear-gradient(135deg,#e4a151,#c9754b)}.green{background:linear-gradient(135deg,#84c6a5,#4f9c86)}.blue{background:linear-gradient(135deg,#86a9dc,#6275bf)}.chat-summary{display:grid;min-width:0;gap:4px}.chat-summary>span{display:flex;align-items:center;justify-content:space-between;gap:5px}.chat-summary strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.chat-summary time,.chat-summary small{overflow:hidden;color:#96939d;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.chat-summary small b{color:#6c6974}.unread{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:#fff;background:var(--violet);font-size:8px;font-style:normal}
.dialog{position:relative;display:flex;flex-direction:column;min-width:0;min-height:100vh;background:var(--page)}.dialog-head{display:flex;align-items:center;min-height:77px;padding:0 26px;border-bottom:1px solid var(--line);background:#fff}.back-button{display:none}.contact-button{display:flex;align-items:center;gap:10px;padding:0;border:0;color:var(--ink);background:transparent;text-align:left}.contact-button .person-avatar{width:36px;height:36px;border-radius:13px;font-size:12px}.contact-button span:last-child{display:grid;gap:2px}.contact-button strong{font-size:12px}.contact-button small{color:#92909a;font-size:9px}.contact-button small i{display:inline-block;width:5px;height:5px;margin:0 3px 1px 0;border-radius:50%;background:#6cc291}.dialog-actions{display:flex;gap:5px;margin-left:auto}.dialog-actions button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;color:#6f6c77;background:transparent}.dialog-actions button:hover{color:var(--violet);background:#f3f2f7}.dialog-actions svg{width:18px;height:18px}.message-area{flex:1;overflow:auto;padding:27px 9% 25px;background:radial-gradient(circle at 20% 0,#fbfaff 0,transparent 28%),var(--page)}.day-label{display:flex;justify-content:center;margin:0 0 25px}.day-label span{padding:5px 10px;border:1px solid #ebeaf0;border-radius:10px;color:#aaa7b0;background:#fff;font-size:9px}.bubble{position:relative;max-width:430px;margin:0 0 13px;padding:10px 12px 20px;border-radius:5px 14px 14px 14px;background:var(--bubble)}.bubble p{margin:0;font-size:12px;line-height:1.5}.bubble time,.photo-message time{position:absolute;right:10px;bottom:6px;color:#aaa8b1;font-size:8px}.bubble time b{color:#a39be3;font-size:9px;letter-spacing:-2px}.bubble.outgoing{margin-left:auto;border-radius:14px 5px 14px 14px;color:#fff;background:var(--violet)}.bubble.outgoing time{color:#d9d5ff}.bubble.outgoing time b{color:#fff}.photo-message{position:relative;width:220px;margin:16px 0 15px;padding:5px 5px 24px;border-radius:13px;background:#fff;box-shadow:0 2px 8px #34303b12}.photo-art{position:relative;height:145px;overflow:hidden;border-radius:9px;background:linear-gradient(145deg,#f4c2a3,#f9e0c8 48%,#cb8a9b)}.photo-art .sun{position:absolute;top:27px;right:34px;width:39px;height:39px;border-radius:50%;background:#ffeaba}.shape{position:absolute;border-radius:50% 50% 0 0;background:#bd6e78}.shape.one{right:55px;bottom:-10px;width:86px;height:84px}.shape.two{right:-21px;bottom:-16px;width:93px;height:70px;background:#93658e}.shape.three{left:-5px;bottom:-8px;width:96px;height:51px;background:#e8a172}.photo-art small{position:absolute;left:15px;top:17px;color:#765768;font:700 15px/1 "Playfair Display",serif}.photo-message>span{display:block;padding:6px 5px 0;color:#77737d;font-size:8px}.photo-message>span b{margin-left:3px;color:#aaa6af;font-weight:400}.typing{display:none;align-items:center;gap:3px;width:38px;margin-top:11px;padding:10px;border-radius:13px;background:var(--bubble)}.typing.show{display:flex}.typing span{width:4px;height:4px;border-radius:50%;background:#a9a5b1;animation:blink 1s infinite alternate}.typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}@keyframes blink{to{opacity:.25;transform:translateY(-2px)}}.message-compose{display:flex;align-items:center;gap:7px;margin:0 26px 20px;padding:7px 8px 7px 10px;border:1px solid #e8e7ec;border-radius:13px;background:#fff;box-shadow:0 5px 18px #2523300b}.message-compose input{flex:1;min-width:50px;padding:5px 0;border:0;outline:0;color:var(--ink);font-size:12px}.message-compose input::placeholder{color:#a9a6af}.attach-button,.emoji-button{display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:8px;color:#898691;background:transparent;font-size:18px}.attach-button:hover,.emoji-button:hover{background:#f1f0f4}.emoji-button{font-size:17px}.send-button{display:grid;place-items:center;width:29px;height:29px;border:0;border-radius:9px;color:#fff;background:var(--violet)}.send-button svg{width:15px;height:15px}
.details{padding:19px 17px;border-left:1px solid var(--line);background:#fff}.profile-card{padding:19px 0 22px;border-bottom:1px solid var(--line);text-align:center}.profile-avatar{display:grid;place-items:center;width:68px;height:68px;margin:auto;border-radius:24px;color:#fff;font-size:22px;font-weight:700}.profile-card h2{margin:11px 0 3px;font-size:14px}.profile-card p{margin:0;color:#6cb98b;font-size:9px}.profile-actions{display:flex;justify-content:center;gap:9px;margin-top:18px}.profile-actions button{display:grid;place-items:center;gap:4px;width:55px;height:42px;border:0;border-radius:11px;color:var(--violet);background:#f3f2fb;font-size:15px}.profile-actions small{color:#77737e;font-size:8px}.details-section{padding:18px 0;border-bottom:1px solid var(--line)}.details-section h3{display:flex;justify-content:space-between;margin:0 0 12px;font-size:10px}.details-section h3 button{border:0;color:#a19da7;background:transparent;font-size:19px;line-height:8px}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mini-art{height:65px;border-radius:7px}.mini-art.a{background:linear-gradient(135deg,#e4ae9b,#f5e3cf 50%,#a66e91)}.mini-art.b{background:linear-gradient(135deg,#799bbd,#d9e4d0 55%,#e7b975)}.mini-art.c{background:linear-gradient(135deg,#d8b1d1,#9f9bd0 60%,#718dad)}.settings{display:grid;gap:4px;border-bottom:0}.settings button{display:flex;justify-content:space-between;padding:8px 4px;border:0;color:#56525d;background:transparent;text-align:left;font-size:10px}.settings button span{color:#aaa6af}.settings .danger{margin-top:8px;color:#d17075}.toast{position:fixed;left:50%;bottom:24px;z-index:4;transform:translate(-50%,20px);padding:10px 14px;border-radius:10px;color:#fff;background:#302f37;box-shadow:0 7px 23px #0003;opacity:0;pointer-events:none;font-size:11px;transition:.23s}.toast.show{transform:translate(-50%,0);opacity:1}
body.night{--ink:#e9e7ef;--line:#302f38;--bubble:#34333e;--page:#202027;background:#111116}.night .inbox,.night .dialog-head,.night .details,.night .message-compose{background:#25242d}.night .chat-row:hover,.night .chat-row.active,.night .dialog-actions button:hover{background:#35333f}.night .search{background:#33313d}.night .photo-message,.night .day-label span{border-color:#3b3944;background:#2c2b35}.night .message-area{background:radial-gradient(circle at 20% 0,#29263b 0,transparent 28%),var(--page)}.night .message-compose input{background:transparent;color:var(--ink)}.night .attach-button,.night .emoji-button{color:#b9b5c3}.night .profile-actions button{background:#353248}.night .settings button{color:#d8d4df}@media(max-width:1250px){.desktop-app{grid-template-columns:64px 284px minmax(510px,1fr)}.details{display:none}.dialog{border-right:1px solid var(--line)}}@media(max-width:780px){.desktop-app{display:block}.rail,.inbox{display:none}.dialog{min-height:100dvh}.dialog-head{min-height:65px;padding:0 15px}.back-button{display:block;margin-right:9px;border:0;color:#77737d;background:transparent;font-size:28px}.message-area{padding:20px 15px}.message-compose{margin:0 12px 14px}}
.auth-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#f2efff,#f8efec 52%,#f0f3fb)}.auth-screen.hidden{display:none}.verify-screen{z-index:20}.auth-card{width:min(100%,380px);padding:34px;border:1px solid #ffffff99;border-radius:23px;background:#fffffff2;box-shadow:0 24px 70px #5a537526;text-align:center}.auth-logo{display:grid;place-items:center;width:43px;height:43px;margin:0 auto 18px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#9589f2,#5d52be);font:700 italic 28px "Playfair Display",serif;text-decoration:none}.auth-kicker{margin:0;color:#898492;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}.auth-card h2{margin:7px 0 24px;font:700 23px/1.2 "Playfair Display",serif}.auth-card label{display:grid;gap:6px;margin:12px 0;color:#716d78;font-size:10px;font-weight:700;text-align:left}.auth-card label span{padding-left:2px}.auth-card input{width:100%;padding:11px 12px;border:1px solid #e5e2e9;border-radius:10px;outline:0;color:#312e36;background:#fff;font-size:12px}.auth-card input:focus{border-color:#938be1;box-shadow:0 0 0 3px #7166d818}.auth-error{min-height:15px;margin:6px 0;color:#c55f68;font-size:10px}.auth-submit{width:100%;padding:12px;border:0;border-radius:10px;color:#fff;background:var(--violet);font-size:12px;font-weight:700}.auth-submit:disabled{cursor:wait;opacity:.72}.auth-switch{margin-top:15px;border:0;color:#7166d8;background:transparent;font-size:10px}.auth-screen.login .name-field{display:none}.auth-screen.login #auth-password{font-size:12px}