/* TOPCHIK / NEBULA 3.4 — own original interface inspired by the visual direction of contemporary messenger concepts. */
:root{--bg:#080712;--text:#faf7ff;--muted:#a3a0c1;--purple:#bd9dff;--purple2:#7863ef;--border:#ffffff18}
html,body{background:#080713}body:before{opacity:.12}
.ambient-one{background:#5031a555}.ambient-two{background:#c038ab38}
.app-shell{max-width:1830px;width:calc(100vw - 36px);height:calc(100dvh - 36px);margin:18px auto;border:1px solid #55477d65;border-radius:28px;background:#101020;box-shadow:0 45px 130px #000b,0 0 0 1px #ffffff04;overflow:hidden}
.app-shell:before{border-radius:inherit;box-shadow:inset 0 1px #ffffff1c}
.rail{width:74px;min-width:74px;padding:21px 9px 18px;gap:12px;background:#13111f;border-right:1px solid #ffffff12;box-shadow:5px 0 16px #0001}
.logo-icon{width:45px;height:45px;font-size:31px;border-radius:15px;margin:0 0 19px;transform:none;background:linear-gradient(150deg,#b899ff 0%,#7756e8 64%,#563cbb 100%);box-shadow:0 8px 26px #815de966}
.logo-icon span{transform:none}.logo-icon:hover{transform:scale(1.05)}.logo-icon i{right:8px;bottom:0;color:#ffb7e6}
.rail-divider{margin:2px 0 12px;background:#ffffff22;width:25px}
.rail-item{width:45px;height:45px;border:1px solid transparent;border-radius:14px;background:transparent;color:#89839e}
.rail-item.active{color:#c2a0ff;background:#7454da23;border:1px solid #9565ff52;box-shadow:inset 0 1px #ffffff0b,0 0 16px #6e49fa10}
.rail-item.active:before{display:none}
.rail-item:hover{border:1px solid #ffffff12;background:#ffffff0b;color:#fff;transform:none}
.rail-bottom-label{display:none}.rail-bottom .avatar{width:39px;height:39px;border-radius:50%;border:2px solid #a88dff}
.side{width:320px;min-width:278px;background:linear-gradient(180deg,#1b172b,#181526);border-right:1px solid #ffffff12;box-shadow:12px 0 40px #0b081a0e}
.side-header{padding:28px 21px 13px}.side-identity{height:30px;font:800 12px 'Space Grotesk',system-ui,sans-serif;letter-spacing:2.1px;color:#e9defd}
.side-version{font-size:9px;letter-spacing:1px;color:#9d81dd}
.side-top{margin:25px 0 20px}.side-kicker{color:#968caa;letter-spacing:1.7px;font-size:9px}
.side-heading{font-family:'Space Grotesk',system-ui,sans-serif;font-size:30px;letter-spacing:-1.3px;font-weight:800}
.round-btn{background:#282139;border:1px solid #62547f;color:#d8c4fd;box-shadow:none;width:39px;height:39px}.round-btn:hover{background:#49366c;transform:scale(1.06);box-shadow:none}
.search-box{height:42px;border:1px solid #ffffff14;background:#110f20;color:#a7a0bc;border-radius:11px}.search-box:hover,.search-box:focus-within{background:#211b32}
.search-box input{color:#f4edff}.search-box kbd{font-size:8px}
.side-section-head{margin:21px 24px 12px;color:#d4c1fa;font-size:10px;letter-spacing:1px}.count-pill{background:#9b71ef27;border:0;color:#b58ef7;border-radius:8px}
.chat-list{padding:0 9px 14px}.chat-row{min-height:72px;padding:11px 11px;border-radius:12px;gap:11px;animation:none}
.chat-row:hover{background:#332743;border-color:transparent;transform:none}
.chat-row.selected{background:linear-gradient(105deg,#513e77,#342640);border-color:#8a5dc93d;box-shadow:inset 0 1px #ffffff08}
.chat-row.selected:before{left:0;top:14px;bottom:14px;width:3px;background:#d5a7ff;box-shadow:0 0 14px #a073fd}
.avatar,.avatar.medium{border-radius:50%;box-shadow:0 1px 0 #ffffff19,inset 0 0 0 1px #ffffff33}
.avatar.medium{width:46px;height:46px}.avatar.large{width:104px;height:104px;border-radius:50%}
.chat-name{font-size:12.5px;color:#faf8ff}.chat-time{font-size:9px;color:#aa9cbb}.chat-snippet{font-size:10.5px;color:#9c91ad}
.side-bottom-panel{padding:13px 12px;margin:7px 14px 12px;border:1px solid #a47aff2b;background:linear-gradient(120deg,#3a2954,#251d35);border-radius:13px}
.side-bottom-copy strong{color:#ebddff}.side-bottom-copy small{color:#b2a1c9}.side-bottom-icon{background:#9865df38;color:#cba4f6;border-color:#b58ceb48}
.demo-strip{margin:0 15px 14px}
.main{min-width:0;flex:1;background:radial-gradient(ellipse 85% 57% at 70% 96%,#ac3ea6bb 0%,transparent 68%),radial-gradient(ellipse 84% 65% at 68% 28%,#5d29cce6 0%,transparent 78%),radial-gradient(ellipse 56% 66% at 7% 46%,#44227f 0%,transparent 85%),#282068;position:relative;isolation:isolate}
.main:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(#ffffff14 .8px,transparent .8px) 0 0/31px 31px,linear-gradient(160deg,#1e123a4d 0%,transparent 62%);opacity:.42;mask-image:linear-gradient(0deg,#0006,#0007)}
.main:after{content:"";position:absolute;width:360px;height:360px;right:-170px;bottom:-170px;border-radius:50%;border:1px solid #ffc6fb21;box-shadow:0 0 0 44px #ffffff03,0 0 0 89px #ffffff02;pointer-events:none;z-index:0}
.chat-head{min-height:82px;padding:16px clamp(18px,2.3vw,35px);background:#21164c73;border-bottom:1px solid #ffffff21;backdrop-filter:blur(19px);position:relative;z-index:1}
.chat-person .avatar{width:44px;height:44px;border-radius:50%}.person-name{font-size:14px}.person-shimmer{color:#ffe4fe}.person-sub{color:#c9b2ed;font-size:11px}.bullet-dot{color:#d9b9ff}
.chat-head-id{color:#dcc9ff;letter-spacing:1.4px;font-size:9px}.head-mini{background:#d4b4ff12;border:1px solid #ffffff27;border-radius:12px;color:#eedcfa}.head-mini:hover{background:#ffffff23;border-color:#ffffff77;color:#fff}
.messages-area{z-index:1;gap:12px;padding:26px clamp(18px,3.2vw,48px) 17px;scroll-behavior:smooth}
.date-divider{font-weight:700;font-size:10px;color:#e3cafa;letter-spacing:0;margin:10px 0 17px}.date-divider:before,.date-divider:after{background:#ffffff3b}
.msg-row{gap:9px;max-width:86%}.msg-bubble{background:linear-gradient(110deg,#7857d1e0,#9569d4ed);border:1px solid #ffffff20;box-shadow:0 10px 32px #210e5e2a;color:#fff;border-radius:15px 15px 15px 5px;font-size:12px;line-height:1.6;padding:12px 16px;backdrop-filter:blur(8px)}
.msg-row.mine .msg-bubble{background:linear-gradient(120deg,#f08cda,#ce6fd5 52%,#ab6de3);border:1px solid #ffd8fb5c;color:#2c1845;border-radius:15px 15px 5px 15px;box-shadow:0 10px 29px #18074d35}
.msg-clock,.msg-row.mine .msg-clock{color:#e2caed;font-size:10px}
.msg-row.mine .attachment-document,.msg-row.mine .attachment-document:hover{color:#34193f}
.composer-wrap{z-index:2;padding:9px clamp(18px,3.2vw,44px) 18px;background:linear-gradient(0deg,#22154dc9 4%,transparent);border:0}
.composer{min-height:61px;background:#17102fbe;border:1px solid #ffffff46;border-radius:15px;padding:8px 8px 8px 12px;box-shadow:0 14px 45px #210e5a38;backdrop-filter:blur(18px)}
.composer:focus-within{border-color:#ebb9ff92;box-shadow:0 0 0 3px #ffffff0a,0 14px 45px #210e5a38}
.composer textarea{font-size:12px;color:#fcf5ff}.composer textarea::placeholder{color:#a99dbb}
.attach-btn{background:#ffffff0f;color:#dbc8ff;border-color:#ffffff31;border-radius:11px}.attach-btn:hover{background:#ffffff24;color:#fff}
.send-btn{width:42px;height:42px;background:linear-gradient(130deg,#e38dea,#ad73ec);border:1px solid #ffcbfc6d;color:#271538;box-shadow:0 9px 22px #e18ff12e}.send-btn:hover{filter:brightness(1.09)}
.composer-hint{display:flex;justify-content:space-between;margin-top:10px;font-size:9px;color:#d1b7e3}.composer-hint>span{opacity:.85}.composer-hint-sep{opacity:.6}
.attachment-image{max-width:100%}.pending-chip{background:#251a49d9;border-color:#dfacff73}.pending-info small{color:#bda8dc}.pending-remove{background:#432a69;color:#fff}
.detail{display:flex;width:282px;min-width:255px;background:#1c182b;border-left:1px solid #ffffff14;padding:27px 20px 23px;align-items:stretch;gap:0}
.detail-top{width:100%;align-items:center;justify-content:space-between}.detail-title{font-size:10px;color:#ded0f5;letter-spacing:1.5px}.detail-stars{color:#b69bea}
.profile-banner{width:100%;height:115px;margin-top:22px;background:radial-gradient(circle at 42% 40%,#b184ebaa 0%,transparent 54%),linear-gradient(130deg,#53327c,#322554 62%,#211938);border-radius:17px;position:relative;overflow:hidden}
.profile-banner:after{width:170px;height:170px;top:-72px;left:55%;border-radius:50%;transform:none;border:1px solid #ffffff24}
.profile-banner .banner-label{color:#f1dbff;letter-spacing:1.8px;position:relative;z-index:2}.banner-lines{opacity:.35}.nebula-cover-moon{position:absolute;left:20px;bottom:-45px;width:130px;height:130px;border:1px solid #ffffff24;border-radius:50%;box-shadow:0 0 0 22px #ffffff06}
.detail-identity{align-items:center}.detail .avatar.large{width:104px;height:104px;border:5px solid #1c182b;margin-top:-54px;box-sizing:content-box;border-radius:50%;z-index:1}.detail-name{font-size:19px;margin-top:9px}.tag{font-size:11px;color:#ae9fca}
.status-pill{display:inline-flex;align-items:center;gap:5px;background:#62cda11a;color:#99e1c7;border:1px solid #89cdb141;font-size:10px;padding:6px 12px;margin-top:11px}
.detail-divider{margin:22px 0;border:0;background:#ffffff1b}.detail-label{font-size:9px;color:#b1a4ca;letter-spacing:1.7px}
.detail-bio{font-size:12px;line-height:1.65;color:#c6bcdb;margin:10px 0 19px;word-break:break-word}
.nebula-sec-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #ffffff14;padding:22px 1px 14px;font-size:9px;letter-spacing:1.4px;font-weight:800;color:#d8c3ed}
.nebula-sec-head>span:last-child{border-radius:6px;background:#ffffff10;padding:2px 8px;color:#e2bcff;font-size:10px;letter-spacing:0}
.nebula-shares{width:100%;display:grid;gap:8px}.nebula-share{width:100%;display:flex;align-items:center;gap:10px;background:#29213c;border:1px solid #ffffff10;border-radius:12px;padding:10px}.nebula-share-icon{height:38px;width:38px;flex:none;display:grid;place-items:center;background:#af79e033;border-radius:9px;font-size:17px;color:#caa9f0}.nebula-share>div{min-width:0}.nebula-share strong{display:block;font-size:10px;max-width:175px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#f2eaff}.nebula-share small{display:block;margin-top:3px;font-size:9px;color:#9f90b4}.nebula-no-files{font-size:11px;line-height:1.7;color:#9d8eae;margin:0;padding:11px 5px}
.nebula-safety{margin-top:auto;padding:18px 0 0;font-size:10px;line-height:1.7;color:#9488a8;display:flex;gap:9px;align-items:flex-start}.nebula-safety svg{margin-top:2px;color:#ac91e3}
.content{position:relative;z-index:1}.content .page-eyebrow{color:#f2b9f5}.content .page-title{color:#fff}.content .page-title span{color:#ffbae7!important}.content .page-sub{color:#e2cff2}.content .user-card,.content .setting-card{background:#251943b9;border:1px solid #ffffff2c;box-shadow:0 9px 27px #19082d22}.content .user-card p{color:#c2acd4}
.profile-hero{background:radial-gradient(circle at 85% 0%,#f196d288,transparent 48%),linear-gradient(125deg,#583793,#332359);border:1px solid #ffffff35;box-shadow:0 12px 36px #20105358}
.primary{background:linear-gradient(135deg,#b98bff,#8c5ae5);border-color:#ddbbff92;color:#fff}.ghost{background:#ffffff0f;color:#e4cdf6;border:1px solid #ffffff22}
@media(max-width:1440px){.detail{width:247px;min-width:247px;padding:24px 15px}.side{width:294px}.rail{width:64px;min-width:64px}.side-header{padding:23px 16px 12px}.chat-row{gap:10px}.nebula-share strong{max-width:143px}}
@media(max-width:1150px){.detail{display:none}.side{width:310px}.rail{width:69px;min-width:69px}}
@media(max-width:960px) and (min-width:781px){.side{width:280px;min-width:260px}}
@media(max-width:780px){
 .app-shell{margin:0;width:100vw;height:100dvh;border:0;border-radius:0;animation:none}
 .rail{width:64px;min-width:64px;padding:17px 7px;background:#141120}
 .logo-icon{width:42px;height:42px}.rail-item{width:45px;height:45px}
 .side{width:calc(100% - 64px);min-width:0;background:#1b172c}.side-header{padding:25px 17px 10px}
 .chat-row{min-height:72px}.chat-head{min-height:72px}.messages-area{padding:18px 16px 12px}
 .composer-wrap{padding:10px 13px 13px}.composer-hint{display:none}.composer{min-height:56px}
 .main{background:radial-gradient(ellipse 90% 60% at 82% 100%,#ae469acc,transparent 70%),radial-gradient(ellipse 98% 90% at 40% 5%,#542bb9,transparent 90%),#282068}
 .detail{display:none}
}
@media(max-width:440px){.rail{width:58px;min-width:58px}.side{width:calc(100% - 58px)}.side-header{padding:18px 12px 10px}.side-heading{font-size:26px}.side-version{display:none}.chat-row{padding:10px 8px}.chat-name{font-size:12px}.chat-time{font-size:9px}.msg-row{max-width:95%}.composer{padding:7px}.chat-head-id{display:none}}
@media(prefers-reduced-motion:reduce){.messages-area{scroll-behavior:auto}}
/* Keep conversation chrome anchored when large photos/audio are inserted. */
.app-shell .main{min-height:0;overflow:hidden}
.app-shell .chat-head{flex:0 0 auto}
.app-shell .messages-area{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.app-shell .composer-wrap{flex:0 0 auto;max-height:36%;overflow-y:auto}
.app-shell .msg-bubble:has(.attachment-inner){max-width:min(410px,100%)}
.app-shell .attachment-image{max-width:100%;height:auto}