/* KeskinSoft Chat 2026 — V3.5 Premium UX/UI layer */
:root{
  --ks-bg:#040914;--ks-bg-soft:#07111f;--ks-surface:#0a1626;--ks-surface-2:#0d1d31;
  --ks-surface-3:#102844;--ks-border:#203c61;--ks-border-hot:#3d6ec1;
  --ks-text:#f5f8ff;--ks-muted:#8398b7;--ks-blue:#2e72ff;--ks-violet:#7658ff;
  --ks-cyan:#29c6ff;--ks-green:#38dd8c;--ks-danger:#ff6078;
  --ks-radius:16px;--ks-shadow:0 24px 80px rgba(0,0,0,.48);
}
html{background:var(--ks-bg)}
body{
  background:
    radial-gradient(circle at 72% 8%,rgba(49,99,200,.20),transparent 28%),
    radial-gradient(circle at 18% 100%,rgba(97,64,204,.14),transparent 28%),
    linear-gradient(180deg,#06101e 0,#040912 100%);
  color:var(--ks-text);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;z-index:0;
  background-image:linear-gradient(rgba(111,148,205,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(111,148,205,.06) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,black,transparent 85%);
}
#app,.modal,.toast{position:relative;z-index:1}
button,input,select,textarea{transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease}
button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #5a89ff;outline-offset:2px;
}
.login-shell{max-width:1480px;margin:0 auto;padding:clamp(28px,6vh,78px) clamp(24px,6vw,92px);gap:clamp(32px,6vw,90px)}
.login-hero{position:relative}.login-hero:after{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(80px);background:rgba(43,112,255,.12);left:-80px;top:80px;z-index:-1
}
.login-hero h1{letter-spacing:-.055em;text-shadow:0 8px 30px rgba(34,94,210,.28)}
.login-hero h1 span{background:linear-gradient(90deg,#5e7fff,#8c63ff 58%,#3fc8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.feature-grid div{background:linear-gradient(145deg,rgba(13,29,49,.92),rgba(7,19,34,.82));border-color:rgba(65,105,161,.38);backdrop-filter:blur(16px)}
.auth-card{border-color:rgba(75,119,186,.52);background:linear-gradient(165deg,rgba(10,24,44,.95),rgba(5,14,27,.94));box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.025)}
.brandmark{background:linear-gradient(145deg,#2469ff,#7850ff 68%,#2ec8ff);box-shadow:0 0 42px rgba(48,103,255,.42),0 12px 35px rgba(0,0,0,.35)}
.chat-shell{background:transparent;grid-template-columns:76px 290px minmax(0,1fr) 310px}
.servers,.channels,.members{background:rgba(6,17,31,.94);backdrop-filter:blur(24px);border-color:rgba(31,61,96,.9)}
.servers{padding:7px 8px;gap:10px}.server{border-radius:15px;background:linear-gradient(145deg,#0b1b2e,#091522);border-color:#213f65;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.server:hover{background:#112c49;border-color:#3d6ba9;box-shadow:0 8px 24px rgba(20,75,145,.2)}
.server.active,.server.soft.active2{background:linear-gradient(145deg,#2d6dff,#6b53f5);outline:none;border-color:#678dff;box-shadow:0 0 25px rgba(54,103,255,.35)}
.channels{padding:0 12px}.workspace{height:70px;margin-bottom:4px}.workspace strong{font-size:15px;letter-spacing:.01em}.workspace span{color:#6f89aa}
.channels h4,.members h4{font-weight:750;color:#657f9f;margin-top:20px}
.channel,.voice-room,.dm-item{border:1px solid transparent;padding:10px 12px;border-radius:11px}
.channel:hover,.voice-room:hover,.dm-item:hover{background:#0d2138;border-color:#1e4068}
.channel.active,.dm-item.active{background:linear-gradient(90deg,rgba(39,94,172,.30),rgba(76,62,171,.20));border-color:#2f5d96;color:white;box-shadow:inset 3px 0 #4c7fff}
.voice-panel{margin:12px 0 10px;padding:12px;border:1px solid #1c3a5d;border-radius:14px;background:linear-gradient(145deg,#081a2c,#071423)}
.voice-actions button{min-height:38px}.voice-actions button:hover{background:#17395f}
.chat-main{background:linear-gradient(180deg,rgba(6,17,31,.83),rgba(3,9,18,.92));position:relative}
.chat-main:before{content:"";position:absolute;inset:66px 0 78px;pointer-events:none;background:radial-gradient(circle at 72% 22%,rgba(36,98,190,.085),transparent 32%)}
.chat-main header{height:70px;background:rgba(7,19,34,.88);backdrop-filter:blur(20px);border-color:#193657;padding:0 20px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.head-title b{font-size:16px}.head-actions button{background:#0b1e34;border-color:#244a77}
.messages{padding:20px 24px 24px;scrollbar-width:thin;scrollbar-color:#24496f transparent}
.message{grid-template-columns:44px minmax(0,1fr);gap:11px;padding:10px 11px;margin:1px 0;border:1px solid transparent;border-radius:12px}
.message:hover{background:linear-gradient(90deg,rgba(10,28,48,.78),rgba(9,23,39,.48));border-color:rgba(38,71,109,.45)}
.message .avatar{width:40px;height:40px;box-shadow:0 6px 15px rgba(0,0,0,.22)}
.message-body>b{font-size:14px}.message .meta{color:#667f9f}.message p{line-height:1.5;color:#d8e4f2}
.message-actions{opacity:0;transition:opacity .15s}.message:hover .message-actions{opacity:1}
.composer{margin:0 18px 18px;padding:8px;background:linear-gradient(145deg,#0b2138,#0a192a);border:1px solid #28507e;border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.23);position:relative;z-index:2}
.composer input{border:0!important;background:transparent!important;box-shadow:none!important;padding:12px 5px!important}.composer button{border-radius:11px!important}
.members{padding:12px}.profilebox{border:1px solid #1d3b5e;background:linear-gradient(145deg,#0a1b2e,#071522);border-radius:14px;padding:10px;margin-bottom:9px}
.presence-edit{background:#081827;border:1px solid #1a3656;border-radius:13px;padding:9px}
.member{border-radius:11px;padding:8px;border:1px solid transparent}.member:hover{background:#0b2036;border-color:#1f416a}
.member .dot{box-shadow:0 0 0 2px #071422}.mini-member-avatar{box-shadow:0 5px 14px rgba(0,0,0,.22)}
.modal{background:rgba(0,5,13,.72);backdrop-filter:blur(10px);padding:18px}
.modal-card{border:1px solid rgba(61,102,157,.64);background:linear-gradient(160deg,rgba(10,25,44,.985),rgba(5,14,26,.985));box-shadow:var(--ks-shadow);border-radius:20px}
.modal-head{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(10,25,44,.98),rgba(10,25,44,.90));backdrop-filter:blur(14px);margin:-1px -1px 8px;padding:14px 1px 10px}
.social-hub-tabs{position:sticky;top:54px;z-index:4;background:rgba(7,19,33,.91);backdrop-filter:blur(12px);padding:7px;border-radius:12px}
.social-person-card,.activity-row,.profile-photo,.social-photo-card,.profile-comment{transition:transform .16s,border-color .16s,background .16s}
.social-person-card:hover,.social-photo-card:hover{transform:translateY(-2px);border-color:#3a6499}
.public-profile-card{width:min(840px,95vw)!important}.public-profile-hero{padding:4px 4px 20px}.profile-avatar-xl{box-shadow:0 18px 45px rgba(0,0,0,.44),0 0 0 6px rgba(51,104,200,.10)}
.profile-main-actions button{min-height:40px}.profile-social-counts button:hover{background:#102a48;border-color:#3f70b2}
.public-gallery img,.profile-photo>img{filter:saturate(1.04) contrast(1.02)}
.toast{right:24px;bottom:24px!important;top:auto!important;border:1px solid #2f5d91!important;background:rgba(8,25,44,.96)!important;backdrop-filter:blur(18px);box-shadow:0 18px 48px rgba(0,0,0,.42)}
.ks-mobile-dock{display:none}
@media(max-width:1100px){
  .chat-shell{grid-template-columns:68px 255px minmax(0,1fr)}.members{display:none}
}
@media(max-width:720px){
  body{overflow:hidden}.chat-shell{display:block;height:100dvh}.servers{display:none!important}.members{display:none!important}
  .channels{position:fixed;z-index:50;left:0;top:0;bottom:64px;width:min(84vw,330px);transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 60px rgba(0,0,0,.45)}
  .channels.open{display:flex!important;transform:translateX(0)}.workspace button{display:block!important}
  .chat-main{height:calc(100dvh - 64px)}.chat-main header{height:60px;padding:0 12px}.mobile-only{display:inline-flex!important}
  .head-actions #installBtn{display:none!important}.head-actions button{padding:7px 9px}.messages{padding:12px 10px 18px}
  .message{padding:9px 7px;grid-template-columns:39px minmax(0,1fr)}.message .avatar{width:36px;height:36px}.message-actions{opacity:1}
  .composer{margin:0 9px 9px;border-radius:15px}.modal{padding:8px;align-items:flex-end}.modal-card{width:100%!important;max-height:94dvh;border-radius:22px 22px 12px 12px}
  .ks-mobile-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:80;left:0;right:0;bottom:0;height:64px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:rgba(5,15,28,.96);border-top:1px solid #1e4168;backdrop-filter:blur(22px)}
  .ks-mobile-dock button{border:0;background:transparent;color:#7f98b9;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:18px}
  .ks-mobile-dock button span{font-size:9px}.ks-mobile-dock button.active{color:white;background:#102b49}
  .public-profile-hero{align-items:center}.profile-avatar-xl{width:82px;height:82px;min-width:82px}.social-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}