/* Clear controls float above a calm, opaque reading layer. */
:root {
 --glass-ink:#344562;
 --glass-fill:linear-gradient(120deg,#ffffff2e,#ffffff0a 46%,#edf3ff1f 78%,#ffffff26);
 --glass-shadow:0 0 0 1px #596f9214,0 2px 3px #3448660b,0 9px 24px -9px #34486640,inset 0 1px 1px #ffffffed,inset 0 -1px 1px #6177973d;
 --glass-rim:conic-gradient(from 145deg,#ffffffed,#7996bc70 12%,#b5cced33 23%,#ffffff00 34%,#ffffffed 48%,#ffffff 59%,#c0d8fe85 67%,#ffffff19 77%,#647d9a50 87%,#ffe4d399 94%,#ffffffed);
 background:#edf1f8;
}
.shell {
 background:radial-gradient(ellipse at 0% 7%,#b9d4f8,transparent 48%),radial-gradient(ellipse at 100% 90%,#f2cdb4,transparent 49%),radial-gradient(ellipse at 88% 19%,#d4c8ed,transparent 48%),#edf1f8;
}
.workspace{background:#f2f5fb24}
.list-panel{background:#ffffff08;border-right:1px solid #61738d12}
.list-head,.list-foot,.feed{background:transparent}
.list-foot{border-top:0;color:#61738c}

/* A transparent centre, curved rim and contact shadow. The masked ring
   catches light at the edge without washing out the content beneath it. */
.rail,.header-actions,.search,.filter-row,.composer,.list-actions .icon-btn,.back,.liquid-lens {
 position:relative;background:var(--glass-fill);border:1px solid #ffffff66;
 box-shadow:var(--glass-shadow);color:var(--glass-ink);
}
.rail::before,.header-actions::before,.search::before,.filter-row::before,.composer::before,.list-actions .icon-btn::before,.back::before,.liquid-lens::before {
 content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
 padding:1.5px;background:var(--glass-rim);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.rail::after,.header-actions::after,.search::after,.filter-row::after,.composer::after,.liquid-lens::after {
 content:'';position:absolute;inset:1px;pointer-events:none;border-radius:inherit;padding:5px;
 background:linear-gradient(155deg,#ffffff80,#ffffff00 32% 62%,#a5b8d129 78%,#ffffff70);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.rail,.filter-row{isolation:isolate}
.rail>*:not(.liquid-lens),.filter-row>*:not(.liquid-lens){position:relative;z-index:1}
.rail::before,.rail::after,.filter-row::before,.filter-row::after{z-index:2}
.header-actions{border-radius:999px;padding:3px;gap:1px;flex-shrink:0}
.header-actions .icon-btn,.header-actions .secondary{background:transparent;border:0;box-shadow:none;border-radius:999px;color:#3e526f}
.header-actions .icon-btn:hover{background:#ffffff30}
.list-actions .icon-btn,.back{border-radius:50%;color:#3e526f}
.search{border-radius:999px;color:#60728e}
.search input{color:#2f435f}.search input::placeholder{color:#65758b}
.filter-row{border-radius:999px;padding:4px;gap:2px;align-items:center;width:fit-content;max-width:100%}
.filter{border-radius:999px;min-height:44px;background:transparent;color:#53637b;border:1px solid transparent;box-shadow:none}
.rail-item{color:#4e617e;border-radius:999px;border:1px solid transparent}
.rail-item:hover{color:#2b4f9b;background:#ffffff24}
.filter.active,.rail-item.active{color:#2b4f9b;background:#ffffff3d;border-color:#ffffff99;box-shadow:0 1px 3px #39527818,inset 0 1px 1px white}
.rail-item.active svg{background:transparent;box-shadow:none}
.liquid-lens {
 position:absolute;z-index:0;pointer-events:none;border-radius:999px;transform-origin:0 0;
 background:radial-gradient(ellipse at 24% 0%,#ffffff59,transparent 62%),linear-gradient(125deg,#ffffff24,#a8c8ff24 64%,#f7d9cd21);
 box-shadow:0 0 0 1px #4e658a1c,0 2px 3px #30456b17,0 5px 12px -4px #334b7a30,inset 0 2px 2px #ffffffd9,inset 0 -2px 2px #56739738;
}
.liquid-lens::before{padding:1.5px}.liquid-lens::after{padding:4px}
.rail:has(.liquid-lens) .rail-item.active,.filter-row:has(.liquid-lens) .filter.active{background:transparent;border-color:transparent;box-shadow:none}

/* The reading layer keeps the same colour and contrast without glass effects. */
.conversation{background:transparent;box-shadow:none;border:1px solid transparent}
.conversation.active{background:#ffffff38;border-color:#ffffff66;box-shadow:none}
.conversation.active::before{display:none}.conversation:hover{background:#ffffff40}
.convo-title{color:#2f405b}.snippet{color:#5f7088}
.post,.screen-card{background:#fbfcfe;border:1px solid #e1e6ef;box-shadow:0 2px 8px #34486604}
.post h3,.screen-card h3{color:#33435f}.post p,.screen-card p{color:#53647e}
.message:not(.mine){background:#fff;border:1px solid #e3e9f2;box-shadow:none;color:#354762}
.message.mine{background:#e2eaff;border:1px solid #d3def5;box-shadow:none;color:#33486c}
.message small{color:#657893}.post-toolbar .content-more{background:#eef2f8;border:0;box-shadow:none;color:#62738d}
.channel-header{background:#ffffff19;border-bottom:1px solid #60738d12;box-shadow:none}
.composer{border-radius:30px;margin:8px 12px 10px;padding:10px 12px;flex-shrink:0;overflow:visible}
.composer textarea{background:#ffffff14;border:1px solid #768cac29;box-shadow:inset 0 1px 2px #48628c0b;border-radius:22px;color:#2f435f}
.composer textarea::placeholder{color:#6a7891}
.composer .attach-button{background:transparent;border:0;box-shadow:none;border-radius:50%;color:#4d6283}
.composer-context{background:transparent}.composer-footer{background:transparent;border-top:0;box-shadow:none}
.primary{background:#6076d0;border:1px solid #ffffff40;box-shadow:0 2px 5px #3f559015;color:#fff}
.primary.done{background:#e4f1eb;color:#456c58}
.composer .primary{border-radius:50%;background:linear-gradient(155deg,#819de9d9,#5571cbd9);border:1px solid #ffffffa6;box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -1px 2px #28417c52,0 3px 8px #43599426}
.search:focus-within,.composer:focus-within{box-shadow:var(--glass-shadow),0 0 0 2px #738fd933}
.composer textarea:focus{outline:2px solid #729ae280;outline-offset:1px}
.live-dialog{background:#f7f9fce6;border:1px solid #ffffffc9;border-radius:28px;box-shadow:0 0 0 1px #3f54771a,inset 0 1px 1px #fff,0 24px 80px #24395738}
.live-dialog::backdrop{background:#33456330}
.live-dialog .field input,.live-dialog .field textarea,.live-dialog .field select{background:#fafcff;border-color:#dce4f1}
.live-dialog[data-closing]{pointer-events:none}.icon-btn,.back{color:#4d6283}

/* Keep blur on small controls; filters never animate. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .rail,.header-actions,.search,.filter-row,.list-actions .icon-btn,.back{backdrop-filter:blur(8px) saturate(1.35);-webkit-backdrop-filter:blur(8px) saturate(1.35)}
 .composer{backdrop-filter:blur(10px) saturate(1.25);-webkit-backdrop-filter:blur(10px) saturate(1.25)}
 .liquid-lens{backdrop-filter:blur(2px) saturate(1.25) brightness(1.035);-webkit-backdrop-filter:blur(2px) saturate(1.25) brightness(1.035)}
 .live-dialog{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .rail,.header-actions,.search,.filter-row,.composer,.list-actions .icon-btn,.back{background:#eef3fbd9}
}
/* Extra refraction is limited to stationary bars in verified Chromium engines. */
html[data-glass-optics] .rail{backdrop-filter:url('/glass-optics.svg#rail') blur(4px) saturate(1.25)}
html[data-glass-optics] .search{backdrop-filter:url('/glass-optics.svg#search') blur(3px) saturate(1.25)}
@media(min-width:761px){
 .rail{border-radius:30px;margin:10px 4px 10px 8px;padding-left:3px;padding-right:3px}
 .rail-item{max-width:100%;font-size:.66rem}.rail .logo{flex-shrink:0}
}
@media(max-width:760px){
 .shell.mobile-detail{background:radial-gradient(ellipse at 0% 15%,#c3d8f7,transparent 55%),radial-gradient(ellipse at 100% 92%,#f1d5c2,transparent 55%),#edf1f8}
 .rail{position:fixed;border-radius:999px}
 html[data-glass-optics] .rail{backdrop-filter:url('/glass-optics.svg#bar') blur(4px) saturate(1.25)}
 .rail-item{border-radius:999px;font-size:.68rem}.rail-item.active svg{padding:0;margin:0}
 .header-actions{padding:2px;gap:0}.header-actions .icon-btn{min-width:44px}.header-actions .secondary{max-width:86px}
 .composer{margin:6px 8px 8px;padding:8px 6px;gap:4px;border-radius:30px}
 .filter-row{gap:0}.filter{padding-left:12px;padding-right:12px}.post,.screen-card{background:#fbfcfe}
 /* Settings and schedules scroll behind the floating navigation; final controls
    still have enough space to scroll fully above it. */
 .shell.shell-screen{padding-bottom:0}
 .shell-screen .screen{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* Retain the accepted spring motion and direct press feedback. */
.icon-btn,.primary,.secondary,.back,.filter,.rail-item,.reaction{transition:transform 170ms cubic-bezier(.2,.75,.25,1),background-color 140ms ease,box-shadow 140ms ease;-webkit-tap-highlight-color:transparent}
.icon-btn:active,.primary:active,.secondary:active,.back:active,.reaction:active{transform:scale(.94)}
.header-actions .icon-btn:active,.list-actions .icon-btn:active,.composer .primary:active{transform:scale(.93);background-image:radial-gradient(ellipse at var(--touch-x,50%) var(--touch-y,50%),#ffffff66,transparent 72%)}
.rail-item:active,.filter:active{background-image:radial-gradient(ellipse at var(--touch-x,50%) var(--touch-y,50%),#ffffff59,transparent 78%);transform:scale(.97)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .rail,.header-actions,.search,.filter-row,.composer,.live-dialog,.list-actions .icon-btn,.back{background:#f3f6fd;border-color:#8396b6;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .rail::before,.rail::after,.header-actions::before,.header-actions::after,.search::before,.search::after,.filter-row::before,.filter-row::after,.composer::before,.composer::after,.list-actions .icon-btn::before,.back::before,.liquid-lens::before,.liquid-lens::after{display:none}
 .liquid-lens{background:#dce6fa;border-color:#7a91b8;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .rail-item,.icon-btn,.filter,.snippet{color:#344866}.channel-header{background:#f3f6fd}.composer textarea{background:#fff}
}
@media(prefers-reduced-motion:reduce){.icon-btn,.primary,.secondary,.back,.filter,.rail-item,.reaction{transition:none;transform:none!important}}

/* Keep the opening screen unchanged, with no artificial loading delay. */
.launch-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;background:radial-gradient(ellipse at 25% 30%,#dce6ff,transparent 60%),radial-gradient(ellipse at 85% 80%,#ffe9db,transparent 55%),#f4f7fc;color:#405578}
.launch-mark{width:94px;height:94px;display:grid;place-items:center;border-radius:29px;background:linear-gradient(135deg,#ffffffde,#ffffff70);border:1px solid white;box-shadow:inset 0 2px 2px #fff,0 12px 40px #7185b21b;margin-bottom:25px}
.launch-mark .logo{margin:0;width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#8295ea,#576bd0);box-shadow:inset 0 1px 1px #ffffff80}
.launch-screen h1{font-size:2rem;letter-spacing:-.04em;color:#3e5280}.launch-subtitle{margin:10px 0 28px;color:#7b89a3;font-size:.92rem}

/* Retain the phone keyboard protections and stable messaging scroll viewport. */
.feed{overflow-anchor:none;min-height:0;overscroll-behavior:contain}
@media(max-width:760px){
 body:has(.shell){height:100%;overflow:hidden;overscroll-behavior:none}
 .shell{position:fixed;top:var(--phone-top,0px);left:0;right:0;width:100%;height:var(--phone-height,100dvh);min-height:0;max-height:none;margin:0}
 .workspace{min-height:0}.feed{flex:1;min-height:0;scroll-behavior:auto}
 .composer textarea{font-size:16px;touch-action:manipulation}
 .keyboard-open .composer{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f3f6fcf5;margin-bottom:4px}
 .keyboard-open .shell.mobile-detail{padding-bottom:0}
}