:root {
  --navy: #07182f;
  --navy-soft: #102b4d;
  --blue: #168fe6;
  --blue-dark: #0877c8;
  --text: #17243a;
  --muted: #7e8ca0;
  --surface: #ffffff;
  --background: #eef4f9;
  --border: #e2eaf2;
  --shadow: 0 32px 85px rgba(7, 24, 47, .26);
}

/* IChat Premium */
.premium-name-emoji{display:inline-block;margin-left:.28em;transform-origin:50% 70%;animation:premiumEmojiFloat 1.8s ease-in-out infinite;filter:drop-shadow(0 3px 5px rgba(0,146,255,.25));font-style:normal}
@keyframes premiumEmojiFloat{0%,100%{transform:translateY(0) rotate(-5deg) scale(1)}50%{transform:translateY(-3px) rotate(7deg) scale(1.12)}}
.account-premium-link{background:linear-gradient(135deg,rgba(235,248,255,.98),rgba(239,232,255,.96));border:1px solid #d9e9ff!important;margin:5px 7px;border-radius:17px!important}.account-premium-icon{display:grid!important;place-items:center;width:35px!important;height:35px;border-radius:12px;background:linear-gradient(135deg,#178fe8,#755af0);color:#fff!important;font-size:19px;box-shadow:0 8px 18px rgba(48,113,222,.25)}
.premium-screen{height:100%;min-height:0;background:#f3f7fc;color:#08254b;padding-bottom:34px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}.premium-screen::-webkit-scrollbar{display:none}.premium-header{height:64px;padding:7px 24px 0;display:flex;align-items:center;gap:16px;color:#fff;background:#071c39}.premium-header .back-button{position:static;flex:0 0 auto}.premium-header>span{font-size:11px;font-weight:900;letter-spacing:.16em;flex:1}.premium-header>i{font-style:normal;color:#8ed8ff;font-size:21px;animation:premiumEmojiFloat 1.8s ease-in-out infinite}.premium-hero-card{position:relative;overflow:hidden;padding:42px 29px 31px;color:#fff;background:radial-gradient(circle at 88% 10%,rgba(86,199,255,.34),transparent 31%),linear-gradient(145deg,#061a36 3%,#0a3d71 60%,#0a72bb);border-radius:0 0 36px 36px;box-shadow:0 20px 45px rgba(7,39,77,.22)}.premium-hero-card:after{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-55px;bottom:-90px}.premium-hero-glow{position:absolute;width:90px;height:90px;border-radius:50%;background:#53bcff;filter:blur(55px);right:35px;top:40px}.premium-crown{width:56px;height:56px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(145deg,#fff,#c6ecff);color:#0874c5;font-size:25px;box-shadow:0 12px 30px rgba(40,178,255,.3);margin-bottom:24px;transform:rotate(-6deg)}.premium-hero-card>small{font-size:10px;font-weight:900;letter-spacing:.22em;color:#8ed8ff}.premium-hero-card h1{font-size:34px;line-height:1.04;margin:9px 0 13px;max-width:330px;letter-spacing:-.035em}.premium-hero-card>p{font-size:14px;line-height:1.65;color:#d5e8fb;max-width:370px;margin:0}.premium-user-chip{display:flex;align-items:center;gap:11px;margin-top:24px;padding:11px 13px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px)}.premium-user-chip>span{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,#76d3ff,#fff);color:#0872bd;font-weight:900}.premium-user-chip div{display:flex;flex-direction:column;gap:3px}.premium-user-chip b{font-size:14px}.premium-user-chip small{color:#bcd7ef;font-size:11px}.premium-content{padding:22px}.premium-benefits{display:grid;gap:11px}.premium-benefits article{display:flex;gap:14px;padding:16px;background:#fff;border:1px solid #e3ebf5;border-radius:20px;box-shadow:0 9px 25px rgba(20,58,100,.06)}.premium-benefits article>span{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;background:#edf7ff;font-size:23px}.premium-benefits article div{flex:1}.premium-benefits b{display:block;font-size:15px;margin:2px 0 5px}.premium-benefits p{margin:0;color:#6d7f96;font-size:12px;line-height:1.5}.premium-plan-card{margin-top:16px}.premium-content>.premium-plan-card,.premium-content>section.premium-plan-card{}.premium-plan-card,.premium-content section:last-child{margin-top:16px}.premium-content section:last-child{padding:20px;background:linear-gradient(145deg,#fff,#f4f8ff);border:1px solid #dae7f5;border-radius:24px;box-shadow:0 14px 34px rgba(11,50,90,.08)}.premium-content section:last-child>small{color:#178fe8;font-size:10px;font-weight:900;letter-spacing:.14em}.premium-content section:last-child>h2{font-size:23px;margin:6px 0}.premium-request-state{display:flex;gap:12px;align-items:center;padding:13px;margin:14px 0;border-radius:16px;background:#edf8ff;color:#0b65a4}.premium-request-state>i{font-style:normal;font-size:22px}.premium-request-state span{display:flex;flex-direction:column}.premium-request-state small{margin-top:3px;opacity:.75}.premium-request-state.pending{background:#fff7dc;color:#85630b}.premium-request-state.rejected{background:#fff0f1;color:#b73549}.premium-cta{width:100%;border:0;border-radius:16px;background:linear-gradient(135deg,#0b8fe9,#6357e7);color:#fff;padding:15px 18px;font-weight:900;display:flex;justify-content:space-between;box-shadow:0 13px 25px rgba(37,104,221,.23)}.premium-plan-note{font-size:10px!important;color:#8b9aab!important;line-height:1.5!important;margin:13px 2px 0!important}.premium-emoji-picker{border:1px solid #dce8f5;border-radius:20px;padding:16px;margin:2px 0 15px;background:linear-gradient(145deg,#f7fbff,#f1efff)}.premium-emoji-picker legend{display:grid;grid-template-columns:28px 1fr;column-gap:8px;padding:0 7px}.premium-emoji-picker legend>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#0f91e8;color:#fff}.premium-emoji-picker legend small{color:#7e8fa4;font-weight:400;font-size:10px}.premium-emoji-picker>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.premium-emoji-option input{position:absolute;opacity:0}.premium-emoji-option>span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border:1px solid #d9e5f1;border-radius:13px;background:#fff;font-size:20px;cursor:pointer}.premium-emoji-option:first-child>span{font-size:10px}.premium-emoji-option input:checked+span{border-color:#188fe3;box-shadow:0 0 0 3px rgba(24,143,227,.13);background:#edf8ff}.premium-profile-promo{display:flex;align-items:center;gap:12px;padding:14px;margin:2px 0 16px;border-radius:19px;background:linear-gradient(135deg,#071d3a,#0a5592);color:#fff;text-decoration:none}.premium-profile-promo>span{font-size:23px;color:#8ed8ff}.premium-profile-promo div{flex:1;display:flex;flex-direction:column}.premium-profile-promo small{color:#bcd7ef;margin-top:3px}.premium-profile-promo i{font-style:normal;font-size:20px}
.premium-effect-panel{position:absolute;z-index:18;left:14px;right:14px;bottom:78px;padding:15px;border-radius:24px;background:rgba(4,25,52,.96);color:#fff;box-shadow:0 20px 50px rgba(1,17,36,.35);backdrop-filter:blur(18px)}.premium-effect-panel header{display:flex;align-items:center;justify-content:space-between;padding:0 3px 12px}.premium-effect-panel header div{display:flex;flex-direction:column}.premium-effect-panel header small{font-size:9px;letter-spacing:.16em;color:#78cfff;font-weight:900}.premium-effect-panel header b{font-size:16px;margin-top:2px}.premium-effect-panel header>span{color:#9fdcff;font-size:23px}.premium-effect-panel>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.premium-effect-panel button{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.07);color:#fff;min-height:84px;padding:10px;text-align:left;display:grid;grid-template-columns:35px 1fr;column-gap:8px}.premium-effect-panel button>span{grid-row:1/3;font-size:27px}.premium-effect-panel button>b{font-size:11px;align-self:end}.premium-effect-panel button>small{font-size:8px;color:#aec5dc;line-height:1.25}.composer-premium-button{flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6fcaff,#6b56e9);color:#fff;text-decoration:none;font-size:18px;box-shadow:0 7px 16px rgba(59,106,222,.2);animation:premiumButtonGlow 2.2s ease-in-out infinite}.composer-premium-button.locked{filter:grayscale(.6);opacity:.68}@keyframes premiumButtonGlow{0%,100%{box-shadow:0 5px 13px rgba(59,106,222,.2)}50%{box-shadow:0 5px 22px rgba(75,175,255,.55)}}.premium-effect-message{min-width:178px;max-width:240px;border-radius:18px;padding:15px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#072a55,#0b77bd);color:#fff;overflow:hidden;position:relative}.premium-effect-message:after{content:"✦";position:absolute;right:12px;top:7px;color:#9bddff;animation:premiumEmojiFloat 1.5s infinite}.premium-effect-message>span{font-size:39px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}.premium-effect-message>div{display:flex;flex-direction:column}.premium-effect-message b{font-size:13px}.premium-effect-message small{font-size:9px;color:#bfe8ff;margin-top:3px}.premium-effect-stage{position:fixed;z-index:1000;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle,rgba(34,160,255,.13),transparent 58%)}.premium-effect-stage i{position:absolute;font-style:normal;left:calc((var(--i) * 17%) - 10%);top:-12%;font-size:calc(24px + (var(--i) % 3) * 8px);animation:premiumRain 3.2s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms)}.premium-effect-stage.effect-whale i:first-child{font-size:110px;top:45%;left:-30%;animation:premiumWhale 3.2s ease-in-out forwards;filter:drop-shadow(0 22px 24px rgba(0,67,126,.3))}.premium-effect-stage strong{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);padding:9px 18px;border-radius:999px;background:rgba(5,31,61,.84);color:#fff;font-size:12px;letter-spacing:.05em;animation:premiumTitle 3s both}@keyframes premiumRain{0%{transform:translateY(-10vh) rotate(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(118vh) rotate(430deg) scale(1.1);opacity:0}}@keyframes premiumWhale{0%{transform:translate(-10vw,20vh) rotate(-12deg);opacity:0}15%{opacity:1}55%{transform:translate(62vw,-8vh) rotate(6deg)}100%{transform:translate(145vw,-26vh) rotate(-7deg);opacity:0}}@keyframes premiumTitle{0%,100%{opacity:0;transform:translate(-50%,15px) scale(.9)}18%,75%{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:390px){.message-composer{gap:5px}.composer-premium-button,.composer-sticker-button,.composer-emoji-button{width:34px;height:34px;flex-basis:34px}.premium-effect-panel{left:8px;right:8px}.premium-hero-card h1{font-size:30px}}
.premium-effect-stage i{font-size:30px}
.frozen-account-banner{display:flex;align-items:flex-start;gap:12px;margin:0 22px 16px;padding:14px 15px;border:1px solid #c7e1f5;border-radius:18px;background:linear-gradient(135deg,#eef8ff,#f4f0ff);color:#124f7c;box-shadow:0 9px 22px rgba(28,95,145,.08)}.frozen-account-banner>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;background:#fff;color:#198bd1;font-size:20px}.frozen-account-banner div{display:flex;flex-direction:column;gap:3px}.frozen-account-banner b{font-size:13px}.frozen-account-banner small{font-size:10px;line-height:1.45;color:#66839a}
.premium-plan-card{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center}.premium-plan-card>div:first-child small{font-size:9px;font-weight:900;letter-spacing:.15em;color:#168fe6}.premium-plan-card>div:first-child h2{margin:5px 0 4px;font-size:22px}.premium-plan-card>div:first-child p{margin:0;color:#73849a;font-size:11px}.premium-plan-card>strong{font-size:32px;color:#0a70bc;display:flex;align-items:flex-end;gap:3px}.premium-plan-card>strong small{font-size:10px;margin-bottom:5px}.premium-plan-card>.premium-request-state,.premium-plan-card>form,.premium-plan-card>.premium-plan-note{grid-column:1/-1}.premium-request-state.active{background:#e8fbf3;color:#08794d}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  align-items: center;
  background: linear-gradient(145deg, #d9e9f5 0%, #f5f8fb 48%, #c7dcec 100%);
  color: var(--text);
  display: flex;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 24px;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.ambient { border-radius: 50%; filter: blur(2px); pointer-events: none; position: fixed; }
.ambient-one { background: rgba(22,143,230,.16); height: 420px; left: -140px; top: -130px; width: 420px; }
.ambient-two { background: rgba(39,77,126,.14); bottom: -180px; height: 500px; right: -150px; width: 500px; }

.phone-shell {
  background: var(--background);
  border: 9px solid #0a1421;
  border-radius: 48px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.15);
  height: min(900px, calc(100vh - 48px));
  max-width: 430px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 2;
}
.phone-notch { background: #0a1421; border-radius: 0 0 18px 18px; height: 25px; left: 50%; position: absolute; top: -1px; transform: translateX(-50%); width: 135px; z-index: 30; }
.status-bar { color: #fff; display: flex; font-size: 11px; font-weight: 800; height: 36px; justify-content: space-between; left: 0; letter-spacing: .2px; padding: 10px 23px 0; position: absolute; right: 0; top: 0; z-index: 20; }
.status-icons { font-size: 8px; letter-spacing: 2px; }
.dark-status { color: #24334a; }
.app-page .status-bar { color: #24334a; }

.auth-screen { background: var(--background); height: 100%; overflow-y: auto; scrollbar-width: none; }
.auth-screen::-webkit-scrollbar { display: none; }
.auth-hero { background: var(--navy); height: 335px; overflow: hidden; padding-top: 55px; position: relative; text-align: center; }
.hero-orbit { border-radius: 50%; position: absolute; }
.orbit-one { background: #123a64; height: 280px; opacity: .55; right: -130px; top: -95px; width: 280px; }
.orbit-two { background: #1591e6; bottom: -75px; height: 160px; opacity: .15; right: 30px; width: 160px; }
.brand-mark { align-items: center; background: linear-gradient(145deg,#fff,#e9f4ff); border-radius: 28px; box-shadow: 0 16px 32px rgba(0,0,0,.25); display: flex; height: 92px; justify-content: center; margin: 0 auto; position: relative; width: 92px; }
.brand-bubble { align-items: center; background: linear-gradient(145deg,#1aa2f2,#087ace); border-radius: 27px 27px 27px 10px; box-shadow: inset 0 2px 2px rgba(255,255,255,.35); color: #fff; display: flex; font-size: 35px; height: 62px; justify-content: center; transform: rotate(-5deg); width: 62px; }
.brand-bubble b { transform: rotate(5deg); }
.auth-hero h1 { color: #fff; font-size: 28px; letter-spacing: -.8px; margin: 11px 0 0; }
.trust-line { align-items: center; color: #bacadb; display: flex; font-size: 10px; font-weight: 700; justify-content: center; margin-top: 18px; }
.trust-line i { background: #42dda2; border-radius: 50%; box-shadow: 0 0 10px #42dda2; height: 7px; margin-right: 7px; width: 7px; }
.trust-line b { background: #3c536c; border-radius: 50%; height: 3px; margin: 0 10px; width: 3px; }

.auth-card { background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 30px rgba(23,54,84,.13); margin-top: -45px; min-height: calc(100% - 290px); padding: 18px 20px 28px; position: relative; }
.auth-tabs { background: #edf3f8; border-radius: 14px; display: flex; padding: 4px; }
.auth-tab { background: transparent; border: 0; border-radius: 11px; color: #8391a3; cursor: pointer; flex: 1; font-size: 12px; font-weight: 800; padding: 10px; }
.auth-tab.active { background: #fff; box-shadow: 0 3px 9px rgba(46,78,107,.12); color: var(--text); }
.auth-form { display: none; }
.auth-form.active { animation: formIn .26s ease; display: block; }
@keyframes formIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.form-intro { margin: 20px 2px 4px; }
.form-intro > span { color: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.form-intro h2 { font-size: 23px; letter-spacing: -.6px; margin: 5px 0 3px; }
.form-intro p { color: var(--muted); font-size: 11px; margin: 0; }
.field { display: block; margin-top: 14px; }
.field > span { color: #3a4960; display: block; font-size: 10px; font-weight: 800; margin: 0 0 7px 2px; }
.field-control { align-items: center; background: #f8fafc; border: 1px solid var(--border); border-radius: 14px; display: flex; height: 51px; padding: 8px; transition: .2s ease; }
.field-control:focus-within { background: #fff; border-color: #7fc5f3; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.field-control > i { align-items: center; background: #e7f3fc; border-radius: 9px; color: var(--blue); display: flex; font-size: 13px; font-style: normal; font-weight: 900; height: 33px; justify-content: center; margin-right: 9px; width: 33px; }
.field-control input { background: transparent; border: 0; color: var(--text); flex: 1; font-size: 12px; min-width: 0; outline: 0; }
.field-control input::placeholder { color: #9aa7b7; }
.password-toggle { background: none; border: 0; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 900; padding: 8px 5px; }
.primary-button { align-items: center; background: linear-gradient(135deg,#1c9aec,#0b7ed1); border: 0; border-radius: 15px; box-shadow: 0 9px 18px rgba(8,119,200,.28); color: #fff; cursor: pointer; display: flex; font-size: 12px; font-weight: 900; height: 53px; justify-content: center; margin-top: 18px; width: 100%; }
.primary-button:active { transform: scale(.985); }
.primary-button b { font-size: 19px; font-weight: 400; margin-left: 9px; }
.auth-footer { color: #9aa6b3; font-size: 8px; margin: 20px 0 0; text-align: center; }
.auth-or { align-items:center;color:#a2adba;display:flex;font-size:8px;font-weight:800;gap:10px;margin:14px 0 10px;text-transform:uppercase; }
.auth-or::before,.auth-or::after { background:#e4ebf1;content:'';height:1px;flex:1; }
.qr-login-open { align-items:center;background:#f5faff;border:1px solid #dcecf8;border-radius:15px;color:#17304b;display:flex;gap:10px;padding:9px 10px;text-align:left;width:100%; }
.qr-login-open-icon { align-items:center;background:linear-gradient(145deg,#dff3ff,#fff);border-radius:12px;color:#0b86d8;display:flex;flex:0 0 38px;height:38px;justify-content:center;width:38px; }
.qr-login-open-icon svg { fill:currentColor;height:21px;width:21px; }
.qr-login-open > span:nth-child(2) { display:flex;flex:1;flex-direction:column;min-width:0; }
.qr-login-open b { font-size:10px; }.qr-login-open small { color:#8293a5;font-size:7px;margin-top:3px; }.qr-login-open > i { color:#2f94d5;font-size:18px;font-style:normal; }
.qr-login-layer { background:#f2f7fb;inset:0;position:absolute;z-index:80; }
.qr-login-dialog { background:#f2f7fb;height:100%;overflow-y:auto; }
.qr-login-dialog > header { align-items:center;background:linear-gradient(135deg,#07182f,#0b3e70);color:#fff;display:grid;grid-template-columns:46px 1fr 40px;min-height:88px;padding:32px 15px 10px;position:sticky;top:0;z-index:2; }
.qr-login-dialog > header button { align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:13px;color:#fff;display:flex;height:38px;justify-content:center;width:38px; }
.qr-login-dialog > header button svg { fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:20px; }
.qr-login-dialog > header small { color:#7fd0ff;display:block;font-size:7px;font-weight:900;letter-spacing:1.35px;margin-bottom:3px; }.qr-login-dialog > header h2 { font-size:17px;margin:0; }
.qr-login-dialog > header > span { align-items:center;background:rgba(103,202,255,.14);border-radius:12px;display:flex;height:38px;justify-content:center;width:38px; }
.qr-login-dialog > header > span svg { fill:none;height:21px;stroke:#8ed7ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:21px; }
.qr-login-body { padding:21px 22px 30px;text-align:center; }
.qr-login-brand { align-items:center;display:flex;gap:9px;margin:0 auto 14px;max-width:260px;text-align:left; }.qr-login-brand img { background:#fff;border-radius:12px;box-shadow:0 5px 13px rgba(15,60,96,.1);height:38px;object-fit:contain;padding:4px;width:38px; }
.qr-login-brand div { display:flex;flex-direction:column; }.qr-login-brand small { color:#168fe6;font-size:7px;font-weight:900;letter-spacing:1.2px; }.qr-login-brand b { font-size:11px;margin-top:2px; }
.qr-login-code-wrap { background:#fff;border:1px solid #dce8f2;border-radius:25px;box-shadow:0 16px 40px rgba(9,52,88,.13);height:238px;margin:auto;padding:18px;position:relative;width:238px; }
.qr-login-code { align-items:center;background:#fff;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%; }.qr-login-code svg { display:block;height:100%;width:100%; }.qr-login-code.expired svg { filter:blur(2px);opacity:.12; }
.qr-login-code-wrap > i { border-color:#1599eb;border-style:solid;height:26px;position:absolute;width:26px; }
.qr-login-code-wrap > i:nth-of-type(1){border-width:3px 0 0 3px;border-radius:11px 0 0;left:9px;top:9px}.qr-login-code-wrap > i:nth-of-type(2){border-width:3px 3px 0 0;border-radius:0 11px 0 0;right:9px;top:9px}.qr-login-code-wrap > i:nth-of-type(3){border-width:0 0 3px 3px;border-radius:0 0 0 11px;bottom:9px;left:9px}.qr-login-code-wrap > i:nth-of-type(4){border-width:0 3px 3px 0;border-radius:0 0 11px;bottom:9px;right:9px}
.qr-login-spinner { animation:qrSpinner .8s linear infinite;border:3px solid #d9e8f3;border-right-color:#168fe6;border-radius:50%;height:34px;width:34px; }.qr-login-error { align-items:center;background:#fff0f2;border-radius:50%;color:#d94358;display:flex;font-size:22px;font-weight:900;height:48px;justify-content:center;width:48px; }
@keyframes qrSpinner { to { transform:rotate(360deg); } }
.qr-login-state { display:flex;flex-direction:column;margin:14px 0 16px; }.qr-login-state b { color:#18344f;font-size:12px; }.qr-login-state small { color:#8293a5;font-size:8px;margin-top:4px; }
.qr-login-body ol { background:#fff;border:1px solid #e0e9f0;border-radius:18px;list-style:none;margin:0;padding:10px 14px;text-align:left; }.qr-login-body li { align-items:center;display:flex;gap:9px;padding:7px 0; }.qr-login-body li + li { border-top:1px solid #edf1f5; }
.qr-login-body li > span { align-items:center;background:#e9f6ff;border-radius:50%;color:#0b83d3;display:flex;flex:0 0 24px;font-size:8px;font-weight:900;height:24px;justify-content:center;width:24px; }.qr-login-body li p { color:#66798d;font-size:8px;line-height:1.4;margin:0; }.qr-login-body li b { color:#243c54; }
.qr-login-refresh { align-items:center;background:#168fe6;border:0;border-radius:14px;color:#fff;display:flex;font-size:10px;font-weight:900;height:45px;justify-content:center;margin-top:12px;width:100%; }.qr-login-refresh b { font-size:18px;margin-left:8px; }
.qr-login-password { background:none;border:0;color:#0c81ce;font-size:8px;font-weight:800;margin-top:13px; }.qr-login-note { color:#8b99a9;font-size:7px;margin:14px 0 0; }.qr-login-note span { color:#168fe6;font-size:12px;margin-right:5px; }.qr-login-layer.authenticated .qr-login-code-wrap { box-shadow:0 0 0 4px rgba(46,204,145,.16),0 16px 40px rgba(9,52,88,.13); }
.flash { border: 1px solid; border-radius: 11px; font-size: 10px; line-height: 1.5; margin-top: 13px; padding: 10px 12px; }
.flash-error { background: #fff1f2; border-color: #ffd5da; color: #b52e3e; }
.flash-success { background: #edfbf5; border-color: #c9efdc; color: #1d8054; }

.home-screen { background: #f6f9fc; height: 100%; overflow: hidden; padding: 47px 0 70px; position: relative; }
.home-header { align-items: center; display: flex; justify-content: space-between; padding: 6px 20px 0; }
.home-header small { color: #738398; font-size: 11px; }
.home-header h1 { font-size: 29px; letter-spacing: -.9px; margin: 0; }
.home-header form { margin: 0; }
.profile-avatar { align-items: center; background: #dcefff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(25,92,139,.15); color: #1686d8; cursor: pointer; display: flex; font-size: 16px; font-weight: 900; height: 45px; justify-content: center; width: 45px; }
.home-flash { margin: 10px 20px 0; }
.search-box { align-items: center; background: #fff; border: 1px solid #e8eef5; border-radius: 16px; display: flex; height: 50px; margin: 17px 20px 0; padding: 0 13px; }
.search-box span { color: #748399; font-size: 24px; margin: -3px 8px 0 0; }
.search-box input { background: transparent; border: 0; color: var(--text); flex: 1; font-size: 13px; outline: 0; }
.quick-row { display: flex; gap: 16px; overflow: hidden; padding: 18px 20px 13px; }
.quick-item { align-items: center; background: none; border: 0; color: #728196; display: flex; flex: 0 0 52px; flex-direction: column; font-size: 9px; gap: 6px; padding: 0; text-decoration: none; }
.quick-user-form { flex: 0 0 52px; margin: 0; }
.quick-user-form .quick-item { cursor: pointer; width: 52px; }
.quick-avatar { align-items: center; background: #edf3f8; border: 1px dashed #a9b8c7; border-radius: 50%; color: #5e7185; display: flex; font-size: 18px; font-weight: 800; height: 47px; justify-content: center; position: relative; width: 47px; }
.quick-avatar.aqua { background: #ccf4ee; border: 0; color: #177e72; font-size: 12px; }
.quick-avatar.purple { background: #e8dcfb; border: 0; color: #6b45a2; font-size: 12px; }
.quick-avatar.amber { background: #ffebc8; border: 0; color: #a06713; font-size: 12px; }
.quick-avatar i, .chat-avatar i { background: #38d493; border: 2px solid #fff; border-radius: 50%; bottom: 0; height: 11px; position: absolute; right: 0; width: 11px; }
.chat-avatar i.offline,.quick-avatar i.offline { background: #a8b4bf; }
.chat-avatar i.online,.quick-avatar i.online { background: #38d493; box-shadow: 0 0 0 2px rgba(56,212,147,.13); }
.section-heading { align-items: center; display: flex; justify-content: space-between; padding: 8px 20px 7px; }
.section-heading h2 { font-size: 16px; margin: 0; }
.section-heading span { color: #9aa6b6; font-size: 10px; }
.chat-list { height: calc(100% - 245px); overflow-y: auto; padding: 0 12px 95px; scrollbar-width: none; }
.chat-list::-webkit-scrollbar { display: none; }
.chat-item { align-items: center; border-radius: 17px; color: inherit; display: flex; padding: 10px 8px; text-decoration: none; transition: .15s ease; }
.chat-item:hover { background: #edf4fa; }
.chat-avatar { align-items: center; border-radius: 50%; display: flex; flex: 0 0 54px; font-size: 13px; font-weight: 900; height: 54px; justify-content: center; position: relative; width: 54px; }
.chat-avatar.blue { background: linear-gradient(145deg,#d9edff,#a8d5f7); color: #197ab8; }
.chat-avatar.small { flex-basis: 42px; height: 42px; width: 42px; }
.chat-copy { border-bottom: 1px solid #edf1f5; flex: 1; margin-left: 12px; min-width: 0; padding: 3px 0 13px; }
.chat-line { align-items: center; display: flex; justify-content: space-between; min-width: 0; }
.chat-line h3 { font-size: 14px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-line time { color: #99a5b4; font-size: 9px; }
.chat-line p { color: #7c899a; font-size: 11px; margin: 6px 8px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-check { color: #2e9de9; font-size: 10px; margin-top: 5px; }
.unread-badge { align-items: center; background: #168fe6; border-radius: 11px; box-shadow: 0 4px 9px rgba(22,143,230,.23); color: #fff; display: flex; font-size: 7px; font-weight: 900; height: 20px; justify-content: center; min-width: 20px; padding: 0 6px; }
.unread-badge.hidden { display: none; }
.empty-chat { color: #8997a8; padding: 50px 30px; text-align: center; }
.empty-chat div { font-size: 34px; }
.empty-chat h3 { color: #46556a; font-size: 14px; margin: 11px 0 4px; }
.empty-chat p { font-size: 11px; margin: 0; }
.hidden { display: none !important; }
.compose-button { align-items: center; background: var(--blue); border: 0; border-radius: 50%; bottom: 78px; box-shadow: 0 8px 18px rgba(8,119,200,.3); color: #fff; cursor: pointer; display: flex; font-size: 23px; height: 54px; justify-content: center; position: absolute; right: 20px; text-decoration: none; width: 54px; z-index: 5; }
.bottom-nav { align-items: center; background: rgba(255,255,255,.97); border-top: 1px solid #e7edf3; bottom: 0; display: flex; height: 68px; justify-content: space-around; left: 0; position: absolute; right: 0; z-index: 4; }
.bottom-nav a { align-items: center; color: #98a4b3; display: flex; flex-direction: column; font-size: 9px; gap: 3px; min-width: 70px; text-decoration: none; }
.bottom-nav a b { font-size: 17px; }
.bottom-nav a.active { color: var(--blue); font-weight: 800; }

.conversation-screen { background: #eef5fa; display: flex; flex-direction: column; height: 100%; padding-top: 38px; }
.conversation-header { align-items: center; background: rgba(255,255,255,.94); border-bottom: 1px solid #e4ebf1; display: flex; min-height: 70px; padding: 9px 14px; }
.back-button { color: #26374e; font-size: 34px; line-height: 1; margin-right: 5px; text-decoration: none; }
.conversation-person { flex: 1; margin-left: 10px; }
.conversation-person h1 { font-size: 14px; margin: 0; }
.conversation-person span { color: #28ae7d; font-size: 9px; }
.conversation-header > button { background: none; border: 0; color: #66778a; font-size: 23px; }
.messages { background-image: radial-gradient(rgba(65,114,151,.07) .8px, transparent .8px); background-size: 16px 16px; flex: 1; overflow-y: auto; padding: 18px 14px 20px; scrollbar-width: none; }
.messages::-webkit-scrollbar { display: none; }
.day-label { background: rgba(255,255,255,.82); border-radius: 10px; color: #8795a5; font-size: 9px; margin: 0 auto 16px; padding: 5px 10px; width: max-content; }
.message-row { display: flex; margin: 7px 0; }
.message-row.mine { justify-content: flex-end; }
.message-bubble { background: #fff; border-radius: 5px 16px 16px 16px; box-shadow: 0 4px 11px rgba(44,76,101,.08); max-width: 79%; padding: 9px 11px 7px; }
.mine .message-bubble { background: linear-gradient(135deg,#1c9bea,#1387da); border-radius: 16px 5px 16px 16px; color: #fff; }
.message-bubble p { font-size: 12px; line-height: 1.5; margin: 0; }
.message-bubble span { color: #94a0ae; display: block; font-size: 8px; margin-top: 4px; text-align: right; }
.mine .message-bubble span { color: rgba(255,255,255,.75); }
.message-composer { align-items: center; background: #fff; border-top: 1px solid #e0e8ef; display: flex; gap: 8px; min-height: 72px; padding: 9px 12px 13px; }
.message-composer > button { background: #edf4f9; border: 0; border-radius: 50%; color: #6d7d91; flex: 0 0 40px; font-size: 21px; height: 40px; width: 40px; }
.message-composer input { background: #f4f7fa; border: 1px solid #e6edf3; border-radius: 21px; flex: 1; font-size: 12px; height: 42px; min-width: 0; outline: 0; padding: 0 15px; }
.message-composer .send-button { background: var(--blue); color: #fff; font-size: 16px; }

.contacts-screen { background: #f6f9fc; height: 100%; overflow: hidden; padding: 43px 0 68px; position: relative; }
.page-header { align-items: center; display: flex; min-height: 69px; padding: 7px 20px 5px 14px; }
.page-header .back-button { margin-right: 10px; }
.page-header > div:nth-child(2) { flex: 1; }
.page-header small { color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: 1.3px; }
.page-header h1 { font-size: 25px; letter-spacing: -.7px; margin: 1px 0 0; }
.profile-avatar.compact { cursor: default; height: 40px; width: 40px; }
.contacts-search { margin-top: 9px; }
.contacts-search a { color: #8090a2; font-size: 20px; text-decoration: none; }
.contacts-heading { align-items: center; display: flex; justify-content: space-between; padding: 20px 21px 10px; }
.contacts-heading h2 { font-size: 15px; margin: 0; }
.contacts-heading p { color: #8996a6; font-size: 9px; margin: 4px 0 0; }
.contacts-heading > span { align-items: center; background: #e4f2fc; border-radius: 11px; color: var(--blue); display: flex; font-size: 9px; font-weight: 900; height: 22px; justify-content: center; min-width: 22px; }
.contacts-list { height: calc(100% - 164px); overflow-y: auto; padding: 0 13px 90px; scrollbar-width: none; }
.contacts-list::-webkit-scrollbar { display: none; }
.contact-card { align-items: center; background: #fff; border: 1px solid #ebf0f5; border-radius: 17px; display: flex; margin: 8px 0; padding: 11px; }
.chat-avatar.mint { background: #d7f5eb; color: #21826c; }
.chat-avatar.violet { background: #e9dffb; color: #7047a8; }
.chat-avatar.gold { background: #ffedcd; color: #9e6717; }
.contact-copy { flex: 1; margin-left: 11px; min-width: 0; }
.contact-copy h3 { font-size: 13px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-copy p { color: #8c99a8; font-size: 9px; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-card form { margin: 0 0 0 8px; }
.contact-card button { background: #e8f4fd; border: 0; border-radius: 11px; color: #147fca; cursor: pointer; font-size: 9px; font-weight: 900; padding: 9px 12px; }
.empty-contacts { color: #8a98a9; padding: 72px 34px; text-align: center; }
.empty-contacts-icon { align-items: center; background: #e6f2fa; border-radius: 50%; color: var(--blue); display: flex; font-size: 32px; height: 70px; justify-content: center; margin: 0 auto; width: 70px; }
.empty-contacts h3 { color: #415168; font-size: 15px; margin: 15px 0 5px; }
.empty-contacts p { font-size: 10px; line-height: 1.6; margin: 0; }

@media (max-width: 600px) {
  body { background: var(--background); display: block; padding: 0; }
  .ambient { display: none; }
  .phone-shell { border: 0; border-radius: 0; box-shadow: none; height: 100dvh; max-width: none; width: 100%; }
  .phone-notch { display: none; }
  .status-bar { padding-top: max(10px, env(safe-area-inset-top)); }
}

@media (max-height: 720px) and (min-width: 601px) {
  .phone-shell { border-radius: 34px; height: calc(100vh - 24px); }
  body { padding: 12px; }
}

/* Premium application surfaces */
.app-page .status-bar { color: rgba(255,255,255,.94); }
.app-page .phone-shell { background: #f4f7fb; }
.home-screen,
.contacts-screen,
.conversation-screen { isolation: isolate; }
.premium-orb { border-radius: 50%; pointer-events: none; position: absolute; }
.premium-orb-one { background: radial-gradient(circle at 35% 35%, rgba(62,181,255,.5), rgba(28,116,208,.06) 66%); height: 260px; right: -110px; top: -105px; width: 260px; }
.premium-orb-two { background: rgba(61,150,232,.12); bottom: -80px; height: 180px; left: -80px; width: 180px; }

.home-screen { background: linear-gradient(180deg,#eaf2f9 0,#f7f9fc 48%); display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0 0 78px; }
.home-hero { background: linear-gradient(145deg,#06172e 0%,#0a2d55 63%,#0d477b 100%); border-radius: 0 0 30px 30px; box-shadow: 0 17px 38px rgba(4,30,58,.22); flex: 0 0 auto; min-height: 315px; overflow: hidden; padding: 44px 20px 17px; position: relative; }
.home-header { align-items: center; display: flex; justify-content: space-between; padding: 5px 1px 0; position: relative; z-index: 60; }
.home-brand { align-items: center; display: flex; gap: 11px; }
.mini-logo { align-items: center; background: linear-gradient(145deg,#2eb3ff,#0b82d8); border: 1px solid rgba(255,255,255,.38); border-radius: 13px 13px 13px 5px; box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.35); color: #fff; display: flex; font-size: 21px; font-weight: 900; height: 42px; justify-content: center; transform: rotate(-4deg); width: 42px; }
.home-brand > div:last-child { transform: translateY(1px); }
.home-header small { color: #7ecbff; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.45px; margin-bottom: 2px; }
.home-header h1 { color: #fff; font-size: 27px; letter-spacing: -.8px; line-height: 1; margin: 0; }
.premium-profile { background: linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.12)); border: 1px solid rgba(255,255,255,.38); box-shadow: 0 10px 22px rgba(0,0,0,.2); color: #fff; height: 48px; padding: 4px; width: 48px; }
.premium-profile span,
.profile-avatar.compact span { align-items: center; background: linear-gradient(145deg,#39b8ff,#1386da); border-radius: 50%; display: flex; height: 100%; justify-content: center; width: 100%; }
.home-flash { backdrop-filter: blur(12px); margin: 10px 0 0; position: relative; z-index: 3; }
.home-hero .home-flash { background: rgba(255,255,255,.94); }

.search-box.premium-search,
.contacts-search { background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.68); border-radius: 17px; box-shadow: 0 14px 28px rgba(0,22,45,.2); height: 54px; margin: 22px 0 0; padding: 0 14px; position: relative; z-index: 2; }
.search-box svg { fill: none; flex: 0 0 20px; height: 20px; margin-right: 10px; stroke: #6d8095; stroke-linecap: round; stroke-width: 1.8; width: 20px; }
.search-box input { font-size: 12px; }
.premium-search kbd { background: #edf3f8; border: 1px solid #dfe8f0; border-radius: 7px; color: #8c9aa9; font-family: inherit; font-size: 8px; padding: 4px 6px; }
.home-hero .quick-row { gap: 14px; margin: 0 -3px; overflow-x: auto; padding: 17px 3px 0; position: relative; scrollbar-width: none; z-index: 2; }
.home-hero .quick-row::-webkit-scrollbar { display: none; }
.home-hero .quick-item { color: #c5d7e8; flex-basis: 55px; font-size: 8px; font-weight: 700; gap: 7px; }
.home-hero .quick-user-form { flex-basis: 55px; }
.home-hero .quick-avatar { border: 2px solid rgba(255,255,255,.35); box-shadow: 0 8px 16px rgba(0,0,0,.18); height: 49px; width: 49px; }
.home-hero .new-chat-avatar { background: rgba(255,255,255,.12); border: 1px dashed rgba(255,255,255,.6); color: #fff; }
.new-chat-avatar span { font-size: 22px; font-weight: 300; margin-top: -2px; }

.section-heading { align-items: flex-end; display: flex; flex: 0 0 auto; padding: 24px 21px 12px; }
.section-heading > div small { color: var(--blue); display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; margin-bottom: 3px; }
.section-heading h2 { color: #14233a; font-size: 19px; letter-spacing: -.45px; }
.section-heading > span { background: #e5f2fb; border-radius: 12px; color: #4482aa; font-size: 8px; font-weight: 800; padding: 6px 9px; }
.home-screen .chat-list { flex: 1 1 auto; height: auto; overflow-x: hidden; overflow-y: auto; padding: 0 14px 100px; }
.home-screen .chat-item { background: rgba(255,255,255,.9); border: 1px solid #e8eef4; border-radius: 20px; box-shadow: 0 8px 20px rgba(32,65,94,.07); margin-bottom: 9px; padding: 12px; }
.home-screen .chat-item:hover { background: #fff; border-color: #d9e9f5; transform: translateY(-1px); }
.home-screen .chat-copy { border: 0; margin-left: 13px; padding: 0; }
.home-screen .chat-line h3 { color: #17263d; font-size: 14px; letter-spacing: -.15px; }
.home-screen .chat-line time { color: #9aa8b8; }
.home-screen .chat-line p { color: #7d8b9d; font-size: 10px; margin-top: 7px; }
.chat-avatar { border: 1px solid rgba(255,255,255,.8); box-shadow: 0 7px 15px rgba(29,91,132,.13); overflow: visible; }
.chat-avatar > span { position: relative; z-index: 1; }
.chat-avatar.blue { background: linear-gradient(145deg,#e6f4ff 0,#a8d8fa 100%); }
.read-check { font-weight: 800; }
.empty-chat { padding-top: 48px; }
.empty-chat-icon { align-items: center; background: linear-gradient(145deg,#eaf6ff,#d7ecfa); border-radius: 50%; display: flex; height: 72px; justify-content: center; margin: 0 auto; width: 72px; }
.empty-chat-icon span { border: 2px solid var(--blue); border-radius: 11px 11px 11px 4px; height: 27px; position: relative; width: 34px; }
.empty-chat-icon span::after { background: var(--blue); border-radius: 2px; box-shadow: 7px 0 var(--blue),14px 0 var(--blue); content: ''; height: 3px; left: 6px; position: absolute; top: 10px; width: 3px; }
.compose-button { bottom: 92px; box-shadow: 0 14px 28px rgba(8,119,200,.38); height: 56px; right: 21px; width: 56px; }
.compose-button svg { fill: none; height: 23px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 23px; }

.bottom-nav { backdrop-filter: blur(18px); background: rgba(255,255,255,.94); border: 1px solid rgba(219,229,238,.9); border-radius: 21px; bottom: 10px; box-shadow: 0 12px 28px rgba(15,42,68,.14); height: 62px; left: 14px; padding: 4px 5px; right: 14px; }
.bottom-nav a { border-radius: 16px; flex: 1; font-size: 8px; font-weight: 700; gap: 2px; height: 52px; justify-content: center; min-width: 0; }
.bottom-nav a.active { background: linear-gradient(180deg,#edf7ff,#e4f2fc); color: #0d86da; }
.nav-icon { align-items: center; display: flex; height: 24px; justify-content: center; width: 25px; }
.nav-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 20px; }

/* Premium contacts */
.contacts-screen { background: #f5f8fb; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0 0 78px; }
.contacts-hero { background: linear-gradient(145deg,#06172e 0%,#0b315b 66%,#0d477b 100%); border-radius: 0 0 30px 30px; box-shadow: 0 16px 38px rgba(4,30,58,.22); flex: 0 0 auto; min-height: 237px; overflow: visible; padding: 45px 20px 0; position: relative; z-index: 2; }
.page-header { align-items: center; color: #fff; display: flex; min-height: 80px; padding: 4px 0 0; position: relative; z-index: 2; }
.page-header .back-button,
.conversation-header .back-button { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); border-radius: 12px; color: #fff; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; margin: 0 13px 0 0; width: 38px; }
.back-button svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 21px; }
.premium-header .back-button {
  align-items: center;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 7px 16px rgba(0,9,27,.2);
  color: #fff;
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  margin: 0;
  transition: background .18s ease, transform .18s ease;
  width: 40px;
}
.premium-header .back-button:active { background: rgba(255,255,255,.22); transform: scale(.96); }
.premium-header .back-button svg { height: 20px; stroke-width: 2.4; width: 20px; }
.page-title { flex: 1; min-width: 0; }
.page-header .page-title small { color: #76c9ff; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.page-header .page-title h1 { color: #fff; font-size: 23px; letter-spacing: -.55px; line-height: 1.05; margin: 4px 0 0; }
.page-title p { color: #9fb8d0; font-size: 9px; margin: 5px 0 0; }
.profile-avatar.compact { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 8px 18px rgba(0,0,0,.18); color: #fff; flex: 0 0 43px; height: 43px; padding: 3px; width: 43px; }
.contacts-search { bottom: -25px; left: 20px; margin: 0; position: absolute; right: 20px; width: auto; }
.contacts-search a { color: #8292a4; }
.contacts-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding-top: 33px; }
.contacts-heading { align-items: center; flex: 0 0 auto; padding: 20px 21px 12px; }
.contacts-heading small { color: var(--blue); display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.35px; margin-bottom: 3px; }
.contacts-heading h2 { color: #17263c; font-size: 18px; letter-spacing: -.35px; }
.contacts-heading p { color: #8997a8; font-size: 9px; margin-top: 5px; }
.contacts-heading > span { background: linear-gradient(145deg,#e7f4fd,#d9edfb); box-shadow: inset 0 0 0 1px #d0e6f6; height: 28px; min-width: 28px; }
.contacts-list { flex: 1 1 auto; height: auto; min-height: 0; padding: 0 14px 88px; }
.contact-card { border: 1px solid #e8eef4; border-radius: 20px; box-shadow: 0 8px 20px rgba(32,65,94,.07); margin: 0 0 9px; padding: 12px; }
.contact-copy h3 { color: #18273d; font-size: 13px; }
.contact-copy p { font-size: 8px; }
.contact-card button { align-items: center; background: linear-gradient(145deg,#eaf6ff,#dceffc); border: 1px solid #d5e9f8; border-radius: 12px; display: flex; gap: 3px; padding: 9px 9px 9px 11px; }
.contact-card button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.empty-contacts { display: flex; flex-direction: column; padding: 55px 34px 30px; }
.empty-contacts-icon { background: linear-gradient(145deg,#ebf7ff,#d9edf9); box-shadow: 0 14px 28px rgba(39,105,150,.12); height: 86px; position: relative; width: 86px; }
.empty-contacts-icon .person-one,
.empty-contacts-icon .person-two { border: 2px solid #168fe6; border-radius: 50%; height: 16px; position: absolute; top: 22px; width: 16px; }
.empty-contacts-icon .person-one { left: 24px; }
.empty-contacts-icon .person-two { opacity: .6; right: 22px; top: 26px; }
.empty-contacts-icon .person-one::after,
.empty-contacts-icon .person-two::after { border: 2px solid #168fe6; border-bottom: 0; border-radius: 14px 14px 0 0; content: ''; height: 12px; left: -7px; position: absolute; top: 19px; width: 26px; }
.empty-contacts-icon b { align-items: center; background: var(--blue); border: 3px solid #e2f1fb; border-radius: 50%; bottom: -3px; color: #fff; display: flex; font-size: 16px; font-weight: 400; height: 28px; justify-content: center; position: absolute; right: -3px; width: 28px; }
.empty-kicker { color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: 1.4px; margin-top: 20px; }
.empty-contacts h3 { font-size: 16px; letter-spacing: -.25px; margin-top: 7px; }
.empty-contacts p { color: #8997a8; max-width: 270px; }

/* Premium conversation */
.conversation-screen { background: #07182f; padding-top: 37px; }
.conversation-header { background: linear-gradient(135deg,#07182f,#0b3765); border: 0; box-shadow: 0 10px 25px rgba(8,35,63,.2); color: #fff; min-height: 78px; padding: 10px 15px; position: relative; z-index: 2; }
.conversation-header .back-button { margin-right: 9px; }
.conversation-header .chat-avatar { box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.conversation-person h1 { color: #fff; font-size: 14px; }
.conversation-person span { color: #62dda9; }
.conversation-header > button { align-items: center; background: rgba(255,255,255,.1); border-radius: 11px; color: #fff; display: flex; height: 36px; justify-content: center; width: 36px; }
.conversation-header > button svg { fill: currentColor; height: 20px; width: 20px; }
.messages { background-color: #eef4f9; background-image: radial-gradient(rgba(29,94,139,.07) .75px, transparent .75px); padding: 21px 15px 24px; }
.day-label { backdrop-filter: blur(8px); border: 1px solid rgba(211,223,233,.8); box-shadow: 0 4px 12px rgba(48,78,103,.05); }
.message-bubble { border: 1px solid #e5ebf0; box-shadow: 0 7px 18px rgba(38,69,94,.08); padding: 10px 12px 8px; }
.mine .message-bubble { border: 0; box-shadow: 0 9px 20px rgba(16,127,206,.2); }
.message-bubble p { white-space: pre-wrap; }
.message-composer { background: rgba(255,255,255,.96); box-shadow: 0 -8px 22px rgba(42,70,94,.06); gap: 9px; padding: 10px 13px 14px; }
.message-composer > button { align-items: center; display: flex; justify-content: center; }
.message-composer > button svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.message-composer input { background: #f1f5f8; border-color: #e2e9ef; height: 44px; }
.message-composer .send-button { box-shadow: 0 7px 16px rgba(8,119,200,.26); flex-basis: 42px; height: 42px; width: 42px; }
.send-button svg { fill: none; transform: translateX(1px); }

@media (max-width: 600px) {
  .home-hero { border-radius: 0 0 27px 27px; padding-top: max(44px, calc(env(safe-area-inset-top) + 34px)); }
  .contacts-hero { border-radius: 0 0 27px 27px; padding-top: max(45px, calc(env(safe-area-inset-top) + 35px)); }
  .bottom-nav { bottom: max(8px, env(safe-area-inset-bottom)); }
  .premium-search kbd { display: none; }
  .compose-button { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* IChat official brand asset */
.brand-mark { overflow: hidden; }
.brand-mark img { display: block; height: 82px; object-fit: contain; width: 82px; }
.mini-logo { background: rgba(255,255,255,.96); overflow: hidden; padding: 3px; }
.mini-logo img { display: block; height: 100%; object-fit: contain; transform: rotate(4deg); width: 100%; }

/* Account card opened from the header avatar */
.account-menu { position: relative; z-index: 40; }
.account-menu .premium-profile { border: 0; position: relative; z-index: 2; }
.account-menu .premium-profile::after { background: #4ed59b; border: 2px solid #123f69; border-radius: 50%; bottom: 1px; content: ''; height: 8px; position: absolute; right: 1px; width: 8px; }
.account-popover { animation: account-popover-in .18s ease-out; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.9); border-radius: 20px; box-shadow: 0 24px 55px rgba(1,20,41,.34); color: #17263d; max-height:calc(100dvh - 92px);overflow-x:hidden;overflow-y:auto;position: absolute; right: 0; scrollbar-width:thin;top: 54px; width: min(270px, calc(100vw - 45px)); z-index: 50; }
.account-popover::before { background: rgba(255,255,255,.98); content: ''; height: 13px; position: absolute; right: 18px; top: -6px; transform: rotate(45deg); width: 13px; }
.account-popover-head { align-items: center; background: linear-gradient(145deg,#edf8ff,#f8fbfe); border-bottom: 1px solid #e3edf5; display: flex; gap: 10px; padding: 11px 13px; position: relative; }
.account-logo { align-items: center; background: #fff; border: 1px solid #dfeaf3; border-radius: 13px; box-shadow: 0 7px 15px rgba(32,96,141,.12); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; overflow: hidden; width: 40px; }
.account-logo img { display: block; height: 36px; object-fit: contain; width: 36px; }
.account-popover-head > div:last-child { min-width: 0; }
.account-popover-head small { color: #168ddf; font-size: 7px; font-weight: 900; letter-spacing: 1.25px; margin: 0 0 3px; }
.account-popover-head strong { color: #13233a; display: block; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover-head span { color: #7f90a2; display: block; font-size: 8px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-links { padding: 5px 7px; }
.account-links a { align-items: center; border-radius: 12px; color: #22334b; display: flex; gap: 10px; padding: 6px 8px; text-decoration: none; transition: background .15s ease; }
.account-links a:hover { background: #edf6fd; }
.account-links .account-saved-link { background: linear-gradient(135deg,rgba(226,244,255,.92),rgba(242,248,255,.78)); border: 1px solid #d9edfb; margin: 2px 0; }
.account-links .account-saved-link:hover { background: linear-gradient(135deg,#dff2ff,#edf6ff); }
.account-links .account-saved-link svg { stroke: #087fd1; }
.account-links .account-device-link { background:linear-gradient(135deg,#edf8ff,#f7fbff);border:1px solid #e0eef8;margin:2px 0; }
.account-links .account-device-link svg { stroke:#087fd1; }
.account-links svg { fill: none; flex: 0 0 19px; height: 19px; stroke: #168edf; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 19px; }
.account-links span { flex: 1; min-width: 0; }
.account-links b { display: block; font-size: 10px; }
.account-links small { color: #8a99a9; display: block; font-size: 7px; letter-spacing: 0; margin: 2px 0 0; }
.account-links i { color: #a4b1bd; font-size: 17px; font-style: normal; }
.account-logout { border-top: 1px solid #e8eef4; margin: 0; padding: 6px 8px; }
.account-logout button { align-items: center; background: #fff3f3; border: 0; border-radius: 12px; color: #d84c4c; cursor: pointer; display: flex; font-family: inherit; font-size: 10px; font-weight: 800; gap: 9px; padding: 8px 10px; text-align: left; width: 100%; }
.account-logout button:hover { background: #ffe9e9; }
.account-logout svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
@keyframes account-popover-in { from { opacity: 0; transform: translateY(-7px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* WhatsApp-style message deletion */
.message-bubble[role="button"] { cursor: pointer; outline: none; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.message-bubble[role="button"]:focus-visible { box-shadow: 0 0 0 3px rgba(22,143,230,.22), 0 7px 18px rgba(38,69,94,.08); }
.message-row.selected-for-delete .message-bubble { box-shadow: 0 0 0 3px rgba(65,177,245,.3), 0 8px 22px rgba(17,101,159,.18); transform: scale(.985); }
.message-row.removing { opacity: 0; transform: translateX(18px); transition: opacity .18s ease, transform .18s ease; }
.message-row.message-deleted .message-bubble,
.message-row.message-deleted.mine .message-bubble { background: rgba(255,255,255,.78); border: 1px solid #dfe7ed; box-shadow: 0 5px 14px rgba(38,69,94,.06); color: #7c8998; }
.message-row.message-deleted .message-bubble span,
.message-row.message-deleted.mine .message-bubble span { color: #9ca7b2; }
.deleted-message-copy { font-style: italic; letter-spacing: -.1px; }

/* Private Saved Messages space */
.saved-messages-avatar {
  background: linear-gradient(145deg,#22a8f4,#0878d5) !important;
  box-shadow: 0 8px 20px rgba(0,126,213,.3);
}
.saved-messages-avatar svg {
  fill: rgba(255,255,255,.16);
  height: 24px;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  width: 24px;
}
.saved-messages-empty {
  align-items: center;
  align-self: center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(177,211,235,.72);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(26,74,108,.12);
  color: #173251;
  display: flex;
  flex-direction: column;
  margin: auto 20px;
  max-width: 330px;
  padding: 26px 24px;
  text-align: center;
}
.saved-messages-empty > span {
  align-items: center;
  background: linear-gradient(145deg,#24aff9,#0879d7);
  border-radius: 22px;
  box-shadow: 0 14px 28px rgba(5,130,218,.27);
  display: flex;
  height: 68px;
  justify-content: center;
  margin-bottom: 16px;
  transform: rotate(-3deg);
  width: 68px;
}
.saved-messages-empty svg {
  fill: rgba(255,255,255,.15);
  height: 34px;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 34px;
}
.saved-messages-empty h2 { font-size: 20px; margin: 0 0 8px; }
.saved-messages-empty p { color: #758aa0; font-size: 12px; line-height: 1.55; margin: 0; }

.delete-sheet-layer { align-items: flex-end; display: flex; inset: 0; justify-content: center; position: absolute; z-index: 100; }
.delete-sheet-backdrop { backdrop-filter: blur(2px); background: rgba(3,18,36,.48); border: 0; cursor: default; inset: 0; padding: 0; position: absolute; width: 100%; }
.delete-sheet { animation: delete-sheet-in .2s ease-out; background: #fff; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; box-shadow: 0 28px 60px rgba(3,18,36,.32); margin: 0 10px 12px; padding: 8px 12px 12px; position: relative; width: calc(100% - 20px); z-index: 1; }
.delete-sheet-handle { background: #d8e0e8; border-radius: 3px; height: 4px; margin: 0 auto 10px; width: 38px; }
.delete-sheet-title { align-items: center; display: flex; gap: 11px; padding: 1px 5px 9px; }
.delete-sheet-icon { align-items: center; background: #fff0f0; border-radius: 13px; color: #e05353; display: flex; flex: 0 0 41px; height: 41px; justify-content: center; width: 41px; }
.delete-sheet-icon svg,
.delete-choice-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
.delete-sheet-title small { color: #e05353; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.35px; }
.delete-sheet-title h2 { color: #18283e; font-size: 18px; letter-spacing: -.35px; margin: 3px 0 0; }
.delete-preview { background: #f5f8fb; border: 1px solid #e7edf3; border-radius: 12px; color: #748397; font-size: 9px; line-height: 1.45; margin: 0 3px 9px; max-height: 43px; overflow: hidden; padding: 8px 10px; }
.delete-choice { align-items: center; background: transparent; border: 0; border-radius: 15px; color: #25364c; cursor: pointer; display: flex; gap: 11px; padding: 9px 8px; text-align: left; width: 100%; }
.delete-choice:hover { background: #f6f9fc; }
.delete-choice:disabled { cursor: wait; opacity: .55; }
.delete-choice-icon { align-items: center; background: #fff0f0; border-radius: 11px; color: #e05353; display: flex; flex: 0 0 36px; height: 36px; justify-content: center; width: 36px; }
.delete-choice-icon.soft { background: #eaf5fd; color: #168fe6; }
.delete-choice > span:last-child { min-width: 0; }
.delete-choice b { display: block; font-size: 11px; }
.delete-choice small { color: #8997a7; display: block; font-size: 8px; line-height: 1.4; margin-top: 2px; }
.delete-cancel { background: #edf3f8; border: 0; border-radius: 13px; color: #53657a; cursor: pointer; font-size: 10px; font-weight: 900; margin-top: 4px; padding: 11px; width: 100%; }
.chat-toast { animation: toast-in .18s ease-out; background: rgba(9,29,50,.94); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; bottom: 84px; box-shadow: 0 12px 30px rgba(3,18,36,.26); color: #fff; font-size: 9px; font-weight: 700; left: 50%; max-width: calc(100% - 36px); padding: 9px 13px; position: absolute; text-align: center; transform: translateX(-50%); z-index: 110; }
.chat-toast.error { background: rgba(161,43,53,.96); }
@keyframes delete-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } to { opacity: 1; transform: translate(-50%,0); } }

/* Reply, forward, copy, and per-account End Chat */
.conversation-menu { flex: 0 0 38px; position: relative; z-index: 30; }
.conversation-menu > button { align-items: center; background: rgba(255,255,255,.1); border: 0; border-radius: 11px; color: #fff; cursor: pointer; display: flex; height: 36px; justify-content: center; padding: 0; width: 36px; }
.conversation-menu > button svg { fill: currentColor; height: 20px; width: 20px; }
.conversation-menu-popover { animation: account-popover-in .16s ease-out; background: #fff; border: 1px solid #e8edf2; border-radius: 15px; box-shadow: 0 18px 42px rgba(3,20,39,.27); overflow: hidden; padding: 6px; position: absolute; right: 0; top: 44px; width: 205px; }
.conversation-menu-popover button { align-items: center; background: #fff3f3; border: 0; border-radius: 11px; color: #d84c4c; cursor: pointer; display: flex; gap: 9px; padding: 9px; text-align: left; width: 100%; }
.conversation-menu-popover svg { fill: none; flex: 0 0 19px; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.conversation-menu-popover span { min-width: 0; }
.conversation-menu-popover b { display: block; font-size: 10px; }
.conversation-menu-popover small { color: #a27272; display: block; font-size: 7px; margin-top: 2px; }

.forwarded-label { align-items: center; color: #7d8b99; display: flex; font-size: 8px; font-style: italic; gap: 3px; margin: 0 0 5px; }
.mine .forwarded-label { color: rgba(255,255,255,.72); }
.message-reply-quote { background: rgba(22,143,230,.08); border-left: 3px solid #168fe6; border-radius: 7px; margin: 0 0 7px; max-width: 250px; padding: 6px 8px; }
.mine .message-reply-quote { background: rgba(255,255,255,.14); border-left-color: rgba(255,255,255,.8); }
.message-reply-quote b { color: #1286d7; display: block; font-size: 8px; margin-bottom: 2px; }
.mine .message-reply-quote b { color: #fff; }
.message-reply-quote p { color: #69798c; font-size: 9px; line-height: 1.3; margin: 0; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine .message-reply-quote p { color: rgba(255,255,255,.8); }
.message-reply-quote.unavailable { opacity: .72; }

.composer-reply { align-items: center; background: #f8fbfd; border-top: 1px solid #e0e8ef; display: flex; gap: 9px; min-height: 52px; padding: 7px 12px 4px; }
.composer-reply-line { align-self: stretch; background: #168fe6; border-radius: 3px; flex: 0 0 3px; }
.composer-reply > div:nth-child(2) { flex: 1; min-width: 0; }
.composer-reply b { color: #168fe6; display: block; font-size: 9px; }
.composer-reply p { color: #718195; font-size: 8px; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-reply button { background: #e9f0f6; border: 0; border-radius: 50%; color: #6c7e91; cursor: pointer; flex: 0 0 27px; font-size: 17px; height: 27px; line-height: 1; padding: 0; width: 27px; }

.delete-sheet-icon.action { background: #eaf5fd; color: #168fe6; }
.message-action-grid { display: grid; gap: 7px; grid-template-columns: repeat(3,1fr); margin: 2px 3px 10px; }
.message-action-grid button { align-items: center; background: #f5f9fc; border: 1px solid #e5edf3; border-radius: 14px; color: #31445b; cursor: pointer; display: flex; flex-direction: column; gap: 5px; justify-content: center; min-height: 67px; padding: 7px; }
.message-action-grid button:hover { background: #eaf5fd; border-color: #d5e9f7; color: #168fe6; }
.message-action-grid span { align-items: center; background: #e6f3fc; border-radius: 50%; color: #168fe6; display: flex; height: 30px; justify-content: center; width: 30px; }
.message-action-grid svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.message-action-grid b { font-size: 9px; }
.message-action-separator { align-items: center; color: #a1adba; display: flex; font-size: 7px; font-weight: 900; gap: 8px; letter-spacing: 1.15px; margin: 2px 6px 2px; }
.message-action-separator::after { background: #e8edf2; content: ''; flex: 1; height: 1px; }

.forward-sheet { max-height: calc(100% - 28px); }
.forward-targets { max-height: 310px; overflow-y: auto; padding: 0 1px 5px; scrollbar-width: none; }
.forward-targets::-webkit-scrollbar { display: none; }
.forward-targets > button { align-items: center; background: #fff; border: 0; border-radius: 14px; color: #25364b; cursor: pointer; display: flex; gap: 10px; padding: 8px 7px; text-align: left; width: 100%; }
.forward-targets > button:hover { background: #f2f8fc; }
.forward-targets > button:disabled { cursor: wait; opacity: .55; }
.forward-avatar { align-items: center; background: linear-gradient(145deg,#def1ff,#a9d9f9); border-radius: 50%; color: #167dbd; display: flex; flex: 0 0 38px; font-size: 10px; font-weight: 900; height: 38px; justify-content: center; width: 38px; }
.forward-targets button > span:nth-child(2) { flex: 1; min-width: 0; }
.forward-targets b { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forward-targets small { color: #8b99a8; display: block; font-size: 7px; margin-top: 2px; }
.forward-targets i { color: #9faebb; font-size: 18px; font-style: normal; }
.forward-empty { color: #8190a1; padding: 18px 20px 22px; text-align: center; }
.forward-empty b { color: #35475d; font-size: 11px; }
.forward-empty p { font-size: 8px; line-height: 1.5; margin: 5px 0 12px; }
.forward-empty a { background: #e8f4fd; border-radius: 11px; color: #168fe6; display: inline-block; font-size: 9px; font-weight: 800; padding: 8px 12px; text-decoration: none; }

.end-chat-sheet { padding: 10px 17px 14px; text-align: center; }
.end-chat-illustration { align-items: center; background: #fff0f0; border-radius: 18px; color: #df5555; display: flex; height: 58px; justify-content: center; margin: 4px auto 10px; width: 58px; }
.end-chat-illustration svg { fill: none; height: 29px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 29px; }
.end-chat-sheet > small { color: #df5555; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.end-chat-sheet h2 { color: #1b2b41; font-size: 18px; margin: 4px 0 6px; }
.end-chat-sheet > p { color: #7d8b9b; font-size: 9px; line-height: 1.55; margin: 0 auto 13px; max-width: 310px; }
.end-chat-confirm { background: #df5555; border: 0; border-radius: 13px; box-shadow: 0 8px 18px rgba(196,57,68,.22); color: #fff; cursor: pointer; font-size: 10px; font-weight: 900; padding: 11px; width: 100%; }
.end-chat-confirm:disabled { cursor: wait; opacity: .6; }

/* Live read receipts */
.message-meta { align-items: center; display: flex !important; gap: 2px; justify-content: flex-end; }
.message-receipt { display: inline-block; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: -2px; line-height: 1; padding-right: 2px; transition: color .2s ease, text-shadow .2s ease; }
.message-receipt.sent { color: rgba(255,255,255,.58); letter-spacing: 0; }
.message-receipt.read { color: #9cf2ff; text-shadow: 0 0 7px rgba(117,231,255,.45); }
.message-row.message-deleted .message-receipt.sent { color: #a3adb7; }
.message-row.message-deleted .message-receipt.read { color: #168fe6; text-shadow: none; }
.read-check.sent { color: #9aa8b6; letter-spacing: 0; }
.read-check.read { color: #168fe6; font-weight: 900; letter-spacing: -2px; padding-right: 2px; }
.message-composer .send-button:disabled { cursor: wait; opacity: .58; transform: scale(.94); }

/* Long-press and swipe conversation actions */
.home-screen .chat-item { position:relative; touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-drag:none; -webkit-user-select:none; user-select:none; }
.home-screen .chat-item * { -webkit-touch-callout:none; -webkit-user-drag:none; -webkit-user-select:none; user-select:none; }
.home-screen .chat-item::after { align-items:center; background:linear-gradient(145deg,#22a8f3,#087fcf); border-radius:16px; box-shadow:0 8px 18px rgba(8,127,207,.24); color:#fff; content:'Pilihan  ›'; display:flex; font-size:9px; font-weight:900; height:calc(100% - 8px); justify-content:center; letter-spacing:.15px; opacity:0; pointer-events:none; position:absolute; right:-92px; top:4px; transform:scale(.88); transition:opacity .12s ease,transform .12s ease; width:82px; }
.home-screen .chat-item.swipe-tracking { cursor:grabbing; transition:none !important; transform:translate3d(var(--conversation-swipe-x,0px),0,0) !important; z-index:8; }
.home-screen .chat-item.swipe-tracking::after { opacity:.92; transform:scale(1); }
.home-screen .chat-item.swipe-threshold::after { background:linear-gradient(145deg,#1599e9,#056fb9); box-shadow:0 9px 22px rgba(8,127,207,.34); content:'Buka  ›'; opacity:1; }
.home-screen .chat-item.swipe-returning { transition:transform .2s cubic-bezier(.22,.78,.24,1) !important; transform:translate3d(0,0,0) !important; }
.home-screen .chat-item.long-press-active,
.home-screen .chat-item.selected-for-action { background: #edf8ff; border-color: #9fd5f7; box-shadow: 0 0 0 3px rgba(30,151,225,.14), 0 10px 24px rgba(20,91,139,.13); transform: scale(.985); }
.chat-title-line h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-state-icon { align-items: center; color: #8797a9; display: flex; flex: 0 0 15px; height: 15px; justify-content: center; margin-left: 4px; width: 15px; }
.conversation-state-icon.pin { color: #178fdd; }
.conversation-state-icon svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 13px; }
.pin-drag-handle { align-items:center; background:#eaf5fd; border:1px solid #d6eafa; border-radius:8px; color:#5996bd; cursor:grab; display:flex; flex:0 0 22px; height:25px; justify-content:center; margin-left:3px; touch-action:none; width:22px; }
.pin-drag-handle:active { cursor:grabbing; }
.pin-drag-handle:focus-visible { box-shadow:0 0 0 3px rgba(30,151,225,.2); outline:0; }
.pin-drag-handle svg { fill:currentColor; height:16px; width:16px; }
.chat-list.pin-reordering { overflow-y:hidden; touch-action:none; }
.chat-list.pin-reordering .chat-item { transition:none; }
.home-screen .chat-item.pin-dragging { background:#e8f6ff; border-color:#75c3f2; box-shadow:0 16px 32px rgba(20,91,139,.2),0 0 0 3px rgba(30,151,225,.14); opacity:.96; position:relative; transform:scale(1.018); z-index:7; }
.chat-list.pin-order-saving .pin-drag-handle { opacity:.55; pointer-events:none; }
.archived-toggle { align-items: center; background: rgba(255,255,255,.84); border: 1px solid #e4edf4; border-radius: 17px; color: #26394f; cursor: pointer; display: flex; gap: 10px; margin: 0 0 10px; padding: 10px 11px; text-align: left; width: 100%; }
.archived-toggle:hover { background: #fff; border-color: #d7e8f4; }
.archived-toggle-icon { align-items: center; background: #e8f5fe; border-radius: 12px; color: #168fe6; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; width: 38px; }
.archived-toggle-icon svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 19px; }
.archived-toggle > span:nth-child(2) { flex: 1; min-width: 0; }
.archived-toggle b { display: block; font-size: 11px; }
.archived-toggle small { color: #8a99aa; display: block; font-size: 7px; margin-top: 2px; }
.archived-toggle i { align-items: center; background: #e5f2fb; border-radius: 10px; color: #4381a9; display: flex; font-size: 8px; font-style: normal; font-weight: 900; height: 23px; justify-content: center; min-width: 23px; padding: 0 6px; }
.archived-chevron { fill: none; height: 17px; stroke: #9aa9b8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .18s ease; width: 17px; }
.archived-toggle[aria-expanded="true"] .archived-chevron { transform: rotate(90deg); }
.archived-list { animation: archive-list-in .18s ease-out; margin-bottom: 4px; }
.archived-chat-item { background: rgba(247,251,254,.92) !important; }
@keyframes archive-list-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }

.conversation-action-sheet { max-height: calc(100% - 24px); overflow-y: auto; padding: 8px 12px 12px; scrollbar-width: none; }
.conversation-action-sheet::-webkit-scrollbar { display: none; }
.conversation-action-head { align-items: center; display: flex; gap: 11px; padding: 1px 5px 10px; }
.conversation-action-avatar { align-items: center; background: linear-gradient(145deg,#dff2ff,#9fd6f8); border: 1px solid #d0e8f7; border-radius: 14px; color: #127cbd; display: flex; flex: 0 0 45px; font-size: 12px; font-weight: 900; height: 45px; justify-content: center; width: 45px; }
.conversation-action-head > div:last-child { min-width: 0; }
.conversation-action-head small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.25px; }
.conversation-action-head h2 { color: #17283e; font-size: 17px; line-height: 1.2; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-action-head p { color: #8a99aa; font-size: 7px; margin: 3px 0 0; }
.conversation-action-grid { border-bottom: 1px solid #edf1f5; border-top: 1px solid #edf1f5; padding: 5px 0; }
.conversation-action-grid > button { align-items: center; background: transparent; border: 0; border-radius: 14px; color: #27394f; cursor: pointer; display: flex; gap: 10px; padding: 7px 6px; text-align: left; width: 100%; }
.conversation-action-grid > button:hover { background: #f4f9fc; }
.conversation-action-grid > button:disabled { cursor: wait; opacity: .55; }
.conversation-action-grid > button.danger { color: #d94f55; }
.conversation-action-icon { align-items: center; background: #eaf6fe; border-radius: 11px; color: #168fe6; display: flex; flex: 0 0 37px; height: 37px; justify-content: center; width: 37px; }
.conversation-action-icon.mute { background: #f2efff; color: #765dc7; }
.conversation-action-icon.pin { background: #fff5dc; color: #c28a19; }
.conversation-action-icon.block,
.conversation-action-icon.delete { background: #fff0f0; color: #df555b; }
.conversation-action-icon svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 19px; }
.conversation-action-grid > button > span:nth-child(2) { flex: 1; min-width: 0; }
.conversation-action-grid b { display: block; font-size: 10px; }
.conversation-action-grid small { color: #8b99a8; display: block; font-size: 7px; line-height: 1.35; margin-top: 2px; }
.conversation-action-grid > button > i { color: #a5b2be; font-size: 18px; font-style: normal; }
.conversation-action-grid > button.danger > i { color: #e49a9d; }

.conversation-person span.blocked-status { color: #f3b2b4; }
.blocked-conversation-notice { align-items: center; background: #fff7f7; border-top: 1px solid #f2dfe0; color: #ce4b52; display: flex; flex: 0 0 auto; gap: 9px; padding: 8px 14px; }
.blocked-conversation-notice svg { fill: none; flex: 0 0 22px; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 22px; }
.blocked-conversation-notice span { min-width: 0; }
.blocked-conversation-notice b { display: block; font-size: 9px; }
.blocked-conversation-notice small { color: #a87679; display: block; font-size: 7px; line-height: 1.35; margin-top: 2px; }
.message-composer input:disabled { color: #97a4b1; cursor: not-allowed; }
.message-composer button:disabled { cursor: not-allowed; opacity: .45; }

/* Profile photos and tidy conversation state badges */
.profile-avatar img,
.quick-avatar img,
.chat-avatar img { border-radius: inherit; display: block; height: 100%; object-fit: cover; width: 100%; }
.premium-profile img { border: 2px solid rgba(255,255,255,.34); }
.account-logo > span { align-items: center; background: linear-gradient(145deg,#39b8ff,#1386da); color: #fff; display: flex; font-size: 11px; font-weight: 900; height: 100%; justify-content: center; width: 100%; }
.account-logo img { height: 100%; object-fit: cover; width: 100%; }
.account-popover-head em { color: #168ddf; display: block; font-size: 7px; font-style: normal; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar.compact { cursor: pointer; overflow: hidden; text-decoration: none; }
.contact-copy small { color: #a0acb8; display: block; font-size: 7px; margin-top: 2px; max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-person { min-width: 0; }
.conversation-person span { display: block; max-width: 255px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title-line { gap: 8px; }
.chat-title-line h3 { flex: 1; }
.chat-title-line time { flex: 0 0 auto; }
.chat-preview-line { gap: 8px; }
.chat-preview-line p { flex: 1; min-width: 0; }
.chat-state-group { align-items: center; display: flex; flex: 0 0 auto; gap: 5px; margin-top: 5px; min-height: 22px; }
.conversation-state-icon { align-items: center; background: #e9f5fd; border: 1px solid #d4eaf8; border-radius: 7px; color: #637f95; display: flex; flex: 0 0 22px; height: 22px; justify-content: center; margin: 0; width: 22px; }
.conversation-state-icon.pin { background: #fff5dc; border-color: #f4e2ad; color: #b77c0e; }
.conversation-state-icon.mute { background: #f0edff; border-color: #dfd8fa; color: #735cc3; }
.conversation-state-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 15px; }
.chat-state-group .read-check { align-items: center; display: flex; height: 22px; justify-content: center; min-width: 18px; }

/* Premium profile editor */
.visually-hidden { height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.profile-screen { background: #f4f8fb; height: 100%; overflow-x: hidden; overflow-y: auto; padding-bottom: 28px; scrollbar-width: none; }
.profile-screen::-webkit-scrollbar { display: none; }
.profile-hero { background: linear-gradient(145deg,#06172e 0%,#0b315b 62%,#0d4a80 100%); border-radius: 0 0 32px 32px; box-shadow: 0 18px 38px rgba(4,30,58,.24); min-height: 285px; overflow: hidden; padding: 45px 20px 24px; position: relative; }
.profile-header { align-items: center; color: #fff; display: flex; position: relative; z-index: 2; }
.profile-header .back-button { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); border-radius: 12px; color: #fff; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; margin-right: 11px; width: 38px; }
.profile-header > div { flex: 1; min-width: 0; }
.profile-header small { color: #75caff; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.profile-header h1 { color: #fff; font-size: 20px; margin: 3px 0 0; }
.profile-header > img { background: #fff; border-radius: 10px; height: 34px; object-fit: contain; padding: 2px; width: 34px; }
.profile-identity { align-items: center; display: flex; flex-direction: column; padding-top: 18px; position: relative; text-align: center; z-index: 2; }
.profile-photo-shell { background: linear-gradient(145deg,#dff3ff,#a9dafa); border: 4px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 16px 32px rgba(0,13,28,.28); color: #147dbe; height: 94px; position: relative; width: 94px; }
.profile-photo-shell > img { border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; }
.profile-photo-shell > span { align-items: center; display: flex; font-size: 25px; font-weight: 900; height: 100%; justify-content: center; width: 100%; }
.profile-photo-shell > label { align-items: center; background: #1596e9; border: 3px solid #0c3158; border-radius: 50%; bottom: -2px; color: #fff; cursor: pointer; display: flex; height: 31px; justify-content: center; position: absolute; right: -3px; width: 31px; }
.profile-photo-shell > label svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.profile-identity h2 { color: #fff; font-size: 19px; margin: 11px 0 0; }
.profile-identity p { color: #a9c6df; font-size: 9px; line-height: 1.4; margin: 5px 0 0; max-width: 290px; }
.profile-content { margin-top: -12px; padding: 28px 17px 0; position: relative; z-index: 3; }
.profile-content > .flash { margin: 0 0 10px; }
.profile-form { background: rgba(255,255,255,.98); border: 1px solid #e3ebf2; border-radius: 23px; box-shadow: 0 18px 42px rgba(25,58,87,.11); padding: 17px; }
.profile-form-intro { margin-bottom: 14px; }
.profile-form-intro small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.35px; }
.profile-form-intro h2 { color: #17283e; font-size: 18px; margin: 4px 0 0; }
.profile-form-intro p { color: #8493a4; font-size: 8px; line-height: 1.5; margin: 4px 0 0; }
.profile-field { display: block; margin-bottom: 12px; }
.profile-field > span { color: #52657a; display: block; font-size: 8px; font-weight: 800; margin: 0 0 5px 2px; }
.profile-field > div { align-items: center; background: #f5f8fb; border: 1px solid #e1e9f0; border-radius: 13px; display: flex; min-height: 45px; padding: 0 11px; }
.profile-field > div:focus-within { background: #fff; border-color: #7ac4f2; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.profile-field svg { fill: none; flex: 0 0 18px; height: 18px; margin-right: 9px; stroke: #168fe6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.profile-field input,
.profile-field textarea { background: transparent; border: 0; color: #21344b; flex: 1; font-family: inherit; font-size: 10px; min-width: 0; outline: none; padding: 0; }
.profile-field textarea { line-height: 1.45; min-height: 64px; padding: 11px 0; resize: none; }
.profile-field .status-control { align-items: flex-start; }
.profile-field .status-control svg { margin-top: 12px; }
.profile-field.readonly > div { background: #f0f4f7; }
.profile-field.readonly input { color: #8290a0; }
.profile-field > small { color: #98a5b2; display: block; font-size: 7px; line-height: 1.35; margin: 4px 2px 0; text-align: right; }
.profile-field > small b { color: #168fe6; }
.avatar-hint { align-items: center; background: #edf7fe; border: 1px solid #dceefb; border-radius: 13px; display: flex; gap: 9px; margin: 3px 0 13px; padding: 9px 10px; }
.avatar-hint > svg { fill: none; flex: 0 0 20px; height: 20px; stroke: #168fe6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 20px; }
.avatar-hint span { min-width: 0; }
.avatar-hint b { color: #294157; display: block; font-size: 8px; }
.avatar-hint small { color: #7d91a2; display: block; font-size: 7px; line-height: 1.4; margin-top: 2px; }
.profile-save { align-items: center; background: linear-gradient(145deg,#1597e9,#0877c7); border: 0; border-radius: 14px; box-shadow: 0 10px 22px rgba(11,126,203,.25); color: #fff; cursor: pointer; display: flex; font-size: 10px; font-weight: 900; justify-content: center; min-height: 45px; width: 100%; }
.profile-save svg { fill: none; height: 18px; margin-left: 8px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }

@media (max-width: 600px) {
  .profile-hero { padding-top: max(45px, calc(env(safe-area-inset-top) + 35px)); }
  .profile-screen { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* Saved contacts and 24-hour Status */
.contact-actions { display: flex; flex: 0 0 75px; flex-direction: column; gap: 5px; margin-left: 6px; }
.contact-actions form { margin: 0; }
.contact-card .contact-actions button { align-items: center; border: 1px solid #d9e9f5; border-radius: 9px; box-shadow: none; display: flex; font-size: 7px; font-weight: 800; gap: 3px; height: 28px; justify-content: center; padding: 0 6px; width: 100%; }
.contact-card .contact-actions button svg { height: 12px; width: 12px; }
.contact-card .save-contact { background: #f4f8fb; color: #718397; }
.contact-card .save-contact.saved { background: #e7f6ff; border-color: #cbe9fa; color: #1286d7; }
.contact-card .save-contact.saved svg { fill: currentColor; }
.contact-card .contact-chat-button { background: linear-gradient(145deg,#eaf6ff,#dceffc); color: #168fe6; }

.status-screen { -webkit-overflow-scrolling: touch; background: #f3f7fb; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 78px; scroll-padding-bottom: 112px; scrollbar-width: none; }
.status-screen::-webkit-scrollbar { display: none; }
.status-hero { background: linear-gradient(145deg,#06172e 0%,#0b315b 62%,#0d4a80 100%); border-radius: 0 0 30px 30px; box-shadow: 0 16px 36px rgba(4,30,58,.22); min-height: 164px; overflow: hidden; padding: 50px 20px 22px; position: relative; }
.status-page-header { align-items: center; color: #fff; display: flex; position: relative; z-index: 2; }
.status-page-header > div { flex: 1; min-width: 0; }
.status-page-header small { color: #76caff; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.45px; }
.status-page-header h1 { color: #fff; font-size: 26px; letter-spacing: -.6px; margin: 4px 0 0; }
.status-page-header p { color: #a9c4dd; font-size: 9px; margin: 5px 0 0; }
.status-content { min-height: 0; overflow: visible; padding: 17px 15px 28px; }
.status-content > .flash { margin: 0 0 10px; }
.status-composer { background: #fff; border: 1px solid #e3ebf2; border-radius: 21px; box-shadow: 0 13px 30px rgba(27,60,88,.1); padding: 14px; }
.status-composer-head { align-items: center; display: flex; gap: 10px; }
.status-author-avatar { align-items: center; background: linear-gradient(145deg,#e2f3ff,#a9d9f8); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 5px 13px rgba(31,93,137,.13); color: #167dbd; display: flex; flex: 0 0 42px; font-size: 10px; font-weight: 900; height: 42px; justify-content: center; overflow: hidden; width: 42px; }
.status-author-avatar.mine { box-shadow: 0 0 0 2px #59bdf4,0 5px 13px rgba(31,93,137,.13); }
.status-author-avatar img { display: block; height: 100%; object-fit: cover; width: 100%; }
.status-composer-head > div:last-child { min-width: 0; }
.status-composer-head small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.25px; }
.status-composer-head h2 { color: #1b2d43; font-size: 15px; margin: 3px 0 0; }
.status-composer-head p { color: #8b99a8; font-size: 7px; margin: 3px 0 0; }
.status-text-control { background: #f5f8fb; border: 1px solid #e4ebf1; border-radius: 14px; display: block; margin-top: 12px; padding: 10px 11px 6px; }
.status-text-control:focus-within { background: #fff; border-color: #7bc4f2; box-shadow: 0 0 0 3px rgba(22,143,230,.09); }
.status-text-control textarea { background: transparent; border: 0; color: #263a51; font-family: inherit; font-size: 10px; line-height: 1.5; min-height: 58px; outline: none; padding: 0; resize: none; width: 100%; }
.status-text-control > span { color: #9aa7b3; display: block; font-size: 7px; text-align: right; }
.status-text-control > span b { color: #168fe6; }
.status-image-preview { border-radius: 14px; margin-top: 10px; max-height: 245px; overflow: hidden; position: relative; }
.status-image-preview img { display: block; height: 100%; max-height: 245px; object-fit: cover; width: 100%; }
.status-image-preview button { align-items: center; background: rgba(8,25,43,.75); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 18px; height: 29px; justify-content: center; line-height: 1; padding: 0 0 2px; position: absolute; right: 8px; top: 8px; width: 29px; }
.status-composer-actions { display: flex; gap: 8px; margin-top: 10px; }
.status-image-button,
.status-publish { align-items: center; border-radius: 12px; cursor: pointer; display: flex; font-size: 8px; font-weight: 900; gap: 6px; height: 39px; justify-content: center; }
.status-image-button { background: #edf6fd; border: 1px solid #d8eaf7; color: #168fe6; flex: 1; }
.status-publish { background: linear-gradient(145deg,#1597e9,#0877c7); border: 0; box-shadow: 0 7px 16px rgba(11,126,203,.2); color: #fff; flex: 0 0 111px; }
.status-image-button svg,
.status-publish svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.status-publish:disabled { cursor: wait; opacity: .58; }
.status-privacy { align-items: center; color: #8595a5; display: flex; font-size: 7px; gap: 5px; line-height: 1.35; margin: 9px 2px 0; }
.status-privacy svg { fill: none; flex: 0 0 14px; height: 14px; stroke: #5f93b5; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 14px; }
.status-section-heading { align-items: flex-end; display: flex; justify-content: space-between; padding: 20px 4px 9px; }
.status-section-heading small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.25px; }
.status-section-heading h2 { color: #192a40; font-size: 17px; margin: 3px 0 0; }
.status-section-heading > span { align-items: center; background: #e3f2fb; border-radius: 10px; color: #3980ad; display: flex; font-size: 8px; font-weight: 900; height: 24px; justify-content: center; min-width: 24px; padding: 0 7px; }
.status-feed { display: grid; gap: 10px; }
.status-post { background: #fff; border: 1px solid #e2eaf1; border-radius: 20px; box-shadow: 0 10px 25px rgba(29,62,91,.09); overflow: hidden; }
.status-post > header { align-items: center; display: flex; gap: 9px; padding: 11px 12px 9px; }
.status-post > header > div:nth-child(2) { flex: 1; min-width: 0; }
.status-post > header h3 { color: #1a2c42; font-size: 11px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-post > header time { color: #8d9baa; display: block; font-size: 7px; margin-top: 2px; }
.status-expiry { background: #edf6fc; border-radius: 9px; color: #4c88ae; font-size: 6px; font-weight: 900; letter-spacing: .7px; padding: 5px 7px; }
.status-media { background: #e8eef3; max-height: 410px; overflow: hidden; }
.status-media img { display: block; max-height: 410px; object-fit: cover; width: 100%; }
.status-post > p { color: #30445a; font-size: 11px; line-height: 1.55; margin: 0; padding: 12px 14px 13px; white-space: pre-wrap; }
.status-post > footer { align-items: center; border-top: 1px solid rgba(224,233,240,.75); color: #91a0ae; display: flex; font-size: 7px; gap: 5px; padding: 8px 12px; }
.status-post > footer svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 13px; }
.status-post.text-only { border: 0; color: #fff; min-height: 215px; }
.status-post.gradient-1 { background: linear-gradient(145deg,#0877c7,#12a8e9); }
.status-post.gradient-2 { background: linear-gradient(145deg,#6947bd,#a75de0); }
.status-post.gradient-3 { background: linear-gradient(145deg,#0b896f,#25b783); }
.status-post.gradient-4 { background: linear-gradient(145deg,#bd5f21,#e49a2b); }
.status-post.text-only > header h3,
.status-post.text-only > header time,
.status-post.text-only > p,
.status-post.text-only > footer { color: #fff; }
.status-post.text-only .status-author-avatar { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.65); color: #fff; }
.status-post.text-only .status-expiry { background: rgba(255,255,255,.18); color: #fff; }
.status-post.text-only > p { align-items: center; display: flex; font-size: 18px; font-weight: 800; justify-content: center; line-height: 1.45; min-height: 116px; padding: 16px 24px 21px; text-align: center; }
.status-post.text-only > footer { border-top-color: rgba(255,255,255,.18); }
.empty-status { align-items: center; background: #fff; border: 1px dashed #d7e4ed; border-radius: 20px; display: flex; flex-direction: column; padding: 27px 24px; text-align: center; }
.empty-status > div { align-items: center; background: #eaf5fd; border-radius: 50%; color: #168fe6; display: flex; height: 56px; justify-content: center; width: 56px; }
.empty-status svg { fill: none; height: 27px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 27px; }
.empty-status h3 { color: #23364c; font-size: 13px; margin: 12px 0 0; }
.empty-status p { color: #8493a3; font-size: 8px; line-height: 1.5; margin: 5px 0 0; max-width: 290px; }
.empty-status a { background: #e8f4fd; border-radius: 10px; color: #168fe6; font-size: 8px; font-weight: 900; margin-top: 11px; padding: 8px 12px; text-decoration: none; }

@media (max-width: 600px) {
  .status-hero { padding-top: max(50px, calc(env(safe-area-inset-top) + 40px)); }
  .status-screen { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* WhatsApp-style group creation and group conversations */
.group-chat-avatar { background: rgba(255,255,255,.15) !important; border-style: solid !important; color: #fff !important; }
.group-chat-avatar svg { fill: none; height: 25px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 25px; }
.group-sender-name { color: #157eba; font-size: 8px; font-weight: 900; margin: 0 0 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine .group-sender-name { color: rgba(255,255,255,.8); }
.message-row.group-message { padding-left: 37px; position: relative; }
.group-message-avatar { align-items: center; background: linear-gradient(145deg,#dff2ff,#a7d8f8); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 11px rgba(27,78,113,.14); color: #157eba; display: flex; font-size: 7px; font-weight: 900; height: 29px; justify-content: center; left: 0; overflow: hidden; position: absolute; top: 2px; width: 29px; }
.group-message-avatar img { height: 100%; object-fit: cover; width: 100%; }
.group-screen { background: #f4f8fb; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0 15px 30px; scrollbar-width: none; }
.group-screen::-webkit-scrollbar { display: none; }
.group-header { align-items: center; background: linear-gradient(145deg,#06172e 0%,#0b315b 68%,#0d4a80 100%); border-radius: 0 0 28px 28px; box-shadow: 0 15px 35px rgba(4,30,58,.22); color: #fff; display: flex; margin: 0 -15px; min-height: 155px; padding: 48px 20px 24px; position: relative; }
.group-header .back-button { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; margin-right: 11px; width: 38px; }
.group-header > div { flex: 1; min-width: 0; }
.group-header small { color: #76caff; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.35px; }
.group-header h1 { color: #fff; font-size: 21px; margin: 3px 0 0; }
.group-header p { color: #a9c3db; font-size: 8px; line-height: 1.4; margin: 4px 0 0; }
.group-header > img { background: #fff; border-radius: 11px; height: 38px; object-fit: contain; padding: 3px; width: 38px; }
.group-screen > .flash { margin: 13px 0 -3px; }
.group-form { background: #fff; border: 1px solid #e2eaf1; border-radius: 22px; box-shadow: 0 16px 38px rgba(24,57,87,.1); margin-top: 17px; overflow: hidden; }
.group-step { padding: 17px; }
.group-progress { align-items: center; display: flex; justify-content: center; margin-bottom: 15px; }
.group-progress span { align-items: center; background: #e9f0f5; border-radius: 50%; color: #8191a1; display: flex; font-size: 8px; font-weight: 900; height: 25px; justify-content: center; width: 25px; }
.group-progress span.active,
.group-progress span.done { background: #168fe6; color: #fff; }
.group-progress i { background: #dfe7ed; height: 2px; width: 52px; }
.group-progress i.active { background: #168fe6; }
.group-step-title small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.3px; }
.group-step-title h2 { color: #192b41; font-size: 19px; margin: 4px 0 0; }
.group-step-title p { color: #8493a4; font-size: 8px; line-height: 1.5; margin: 4px 0 0; }
.group-selected-bar { align-items: center; background: #edf7fe; border: 1px solid #d9ecfa; border-radius: 12px; color: #36536b; display: flex; justify-content: space-between; margin-top: 12px; padding: 8px 10px; }
.group-selected-bar span { font-size: 8px; }
.group-selected-bar b { color: #168fe6; font-size: 11px; }
.group-selected-bar small { color: #8396a7; font-size: 7px; }
.group-contact-list { display: grid; gap: 7px; margin-top: 10px; max-height: 405px; overflow-y: auto; padding: 1px; scrollbar-width: none; }
.group-contact-list::-webkit-scrollbar { display: none; }
.group-contact-card { align-items: center; background: #f8fafc; border: 1px solid #e7edf2; border-radius: 16px; cursor: pointer; display: flex; gap: 9px; min-height: 65px; padding: 7px 9px; position: relative; }
.group-contact-card:has(input:checked) { background: #edf8ff; border-color: #9ed5f7; box-shadow: 0 0 0 2px rgba(22,143,230,.08); }
.group-contact-card > input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.group-check { align-items: center; background: #fff; border: 1.5px solid #b8c6d2; border-radius: 50%; color: transparent; display: flex; flex: 0 0 21px; height: 21px; justify-content: center; width: 21px; }
.group-check svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 13px; }
.group-contact-card input:checked + .group-check { background: #168fe6; border-color: #168fe6; color: #fff; }
.group-contact-card .chat-avatar { flex-basis: 45px; height: 45px; width: 45px; }
.group-contact-copy { flex: 1; min-width: 0; }
.group-contact-copy b { color: #20334a; display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-contact-copy small { color: #8494a5; display: block; font-size: 7px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-next { align-items: center; background: linear-gradient(145deg,#1597e9,#0877c7); border: 0; border-radius: 13px; box-shadow: 0 9px 20px rgba(11,126,203,.22); color: #fff; cursor: pointer; display: flex; font-size: 9px; font-weight: 900; gap: 7px; height: 43px; justify-content: center; margin-top: 13px; width: 100%; }
.group-next:disabled { background: #d9e2e9; box-shadow: none; color: #93a1ae; cursor: not-allowed; }
.group-next svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }
.group-empty-contacts { align-items: center; display: flex; flex-direction: column; padding: 30px 18px 24px; text-align: center; }
.group-empty-contacts > div { align-items: center; background: #eaf5fd; border-radius: 50%; color: #168fe6; display: flex; height: 58px; justify-content: center; width: 58px; }
.group-empty-contacts svg { fill: none; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 28px; }
.group-empty-contacts h3 { color: #26394f; font-size: 12px; margin: 12px 0 0; }
.group-empty-contacts p { color: #8493a3; font-size: 8px; line-height: 1.5; margin: 5px 0 0; }
.group-empty-contacts a { background: #e8f4fd; border-radius: 10px; color: #168fe6; font-size: 8px; font-weight: 900; margin-top: 11px; padding: 8px 12px; text-decoration: none; }
.group-avatar-editor { background: linear-gradient(145deg,#e5f4ff,#b6dcf5); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 12px 26px rgba(30,89,131,.2); color: #167dbd; height: 92px; margin: 19px auto 17px; position: relative; width: 92px; }
.group-avatar-editor > span { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }
.group-avatar-editor > span > svg { fill: none; height: 42px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 42px; }
.group-avatar-editor > img { border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; }
.group-avatar-editor > label { align-items: center; background: #168fe6; border: 3px solid #fff; border-radius: 50%; bottom: -3px; color: #fff; cursor: pointer; display: flex; height: 31px; justify-content: center; position: absolute; right: -3px; width: 31px; }
.group-avatar-editor > label svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.group-name-field { display: block; }
.group-name-field > span { color: #53667a; display: block; font-size: 8px; font-weight: 800; margin: 0 0 5px 2px; }
.group-name-field > div { align-items: center; background: #f5f8fb; border: 1px solid #e1e9f0; border-radius: 13px; display: flex; min-height: 47px; padding: 0 11px; }
.group-name-field > div:focus-within { background: #fff; border-color: #7ac4f2; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.group-name-field svg { fill: none; flex: 0 0 18px; height: 18px; margin-right: 9px; stroke: #168fe6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 18px; }
.group-name-field input { background: transparent; border: 0; color: #21344b; flex: 1; font-family: inherit; font-size: 10px; min-width: 0; outline: none; }
.group-name-field > small { color: #98a5b2; display: block; font-size: 7px; margin: 4px 2px 0; text-align: right; }
.group-member-summary { border-top: 1px solid #e8eef3; margin-top: 13px; padding-top: 11px; }
.group-member-summary > small { color: #7790a4; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.group-member-summary > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.group-member-summary > div span { background: #eaf5fd; border-radius: 10px; color: #2d78a8; font-size: 7px; font-weight: 800; max-width: 130px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap; }
.group-final-actions { display: flex; gap: 8px; margin-top: 15px; }
.group-final-actions button { border: 0; border-radius: 12px; cursor: pointer; font-size: 8px; font-weight: 900; height: 42px; }
.group-back-step { background: #edf2f6; color: #64768a; flex: 1; }
.group-create { align-items: center; background: linear-gradient(145deg,#1597e9,#0877c7); box-shadow: 0 8px 18px rgba(11,126,203,.21); color: #fff; display: flex; flex: 1.25; gap: 6px; justify-content: center; }
.group-create svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px; }

/* Username privacy and WhatsApp-style group tools */
.profile-at { color: #168fe6; flex: 0 0 18px; font-size: 15px; margin-right: 8px; text-align: center; }
.contact-chat-button.disabled { background: #edf2f5 !important; color: #91a0ad !important; cursor: not-allowed; font-size: 7px; min-width: 78px; }
.group-header-profile { align-items: center; color: inherit; display: flex; flex: 1; min-width: 0; text-decoration: none; }
.group-header-profile .conversation-person { min-width: 0; }
.group-header-profile .conversation-person h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-menu-popover { max-height: min(72vh, 520px); overflow-y: auto; padding: 7px; width: 245px; scrollbar-width: none; }
.conversation-menu-popover::-webkit-scrollbar { display: none; }
.conversation-menu-popover button,
.conversation-menu-popover a { align-items: center; background: transparent; border: 0; border-radius: 11px; color: #23384e; cursor: pointer; display: flex; gap: 10px; min-height: 45px; padding: 8px 9px; text-align: left; text-decoration: none; width: 100%; }
.conversation-menu-popover button:hover,
.conversation-menu-popover a:hover { background: #eef6fc; color: #087fcf; }
.conversation-menu-popover button.danger { background: #fff4f4; color: #d84c4c; }
.conversation-menu-popover small { color: #8998a7; }
.conversation-menu-popover button.danger small { color: #b77979; }
.message-search-bar { align-items: center; background: #fff; border-bottom: 1px solid #e3eaf0; box-shadow: 0 6px 18px rgba(17,51,81,.1); display: flex; gap: 9px; min-height: 52px; padding: 8px 14px; position: relative; z-index: 3; }
.message-search-bar svg { fill: none; height: 19px; stroke: #168fe6; stroke-linecap: round; stroke-width: 1.8; width: 19px; }
.message-search-bar input { background: #f2f6f9; border: 1px solid #e0e8ee; border-radius: 12px; color: #22374d; flex: 1; font: inherit; font-size: 10px; height: 36px; outline: 0; padding: 0 11px; }
.message-search-bar input:focus { background: #fff; border-color: #76c2ef; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.message-search-bar button { background: transparent; border: 0; color: #66798d; cursor: pointer; font-size: 22px; }
.message-row.search-hidden { display: none; }
.message-selection-bar { align-items: center; background: linear-gradient(135deg,#07182f,#0b3765); color: #fff; display: flex; gap: 12px; min-height: 52px; padding: 8px 14px; position: relative; z-index: 4; }
.message-selection-bar strong { flex: 1; font-size: 11px; }
.message-selection-bar button { background: rgba(255,255,255,.12); border: 0; border-radius: 9px; color: #fff; cursor: pointer; font-size: 10px; font-weight: 800; min-height: 32px; padding: 0 11px; }
.message-selection-bar button:first-child { font-size: 20px; padding: 0; width: 32px; }
.message-selection-bar button:disabled { opacity: .45; }
.messages.selection-mode .message-bubble { cursor: pointer; }
.message-row.selected-message { position: relative; }
.message-row.selected-message::before { align-items: center; background: #168fe6; border: 3px solid #eef4f9; border-radius: 50%; color: #fff; content: '✓'; display: flex; font-size: 10px; font-weight: 900; height: 22px; justify-content: center; left: 2px; position: absolute; top: 50%; transform: translateY(-50%); width: 22px; z-index: 2; }
.message-row.selected-message.mine::before { left: auto; right: 2px; }
.message-row.selected-message .message-bubble { box-shadow: 0 0 0 3px rgba(22,143,230,.27), 0 8px 22px rgba(17,101,159,.18); transform: scale(.98); }
.theme-options { display: grid; gap: 7px; margin: 8px 0 12px; }
.theme-options button { align-items: center; background: #f6f9fb; border: 1px solid #e5ebf0; border-radius: 13px; color: #263a50; cursor: pointer; display: flex; gap: 10px; min-height: 50px; padding: 7px 10px; text-align: left; }
.theme-options i { border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(18,51,78,.18); height: 32px; width: 32px; }
.theme-options i.default { background: linear-gradient(145deg,#eef4f9,#168fe6); }
.theme-options i.ocean { background: linear-gradient(145deg,#07243e,#0d7fb5); }
.theme-options i.mint { background: linear-gradient(145deg,#e4fbf4,#32b98b); }
.theme-options i.sunset { background: linear-gradient(145deg,#6b4cb8,#f28a67); }
.theme-options span { display: block; }
.theme-options b { display: block; font-size: 10px; }
.theme-options small { color: #8593a1; display: block; font-size: 7px; margin-top: 2px; }
.end-chat-illustration.danger { background: #ffe8e8; color: #cf3d3d; }
.end-chat-confirm.danger { background: linear-gradient(145deg,#ef6262,#d83d3d); }
.chat-theme-ocean .messages { background-color: #dfeef5; background-image: radial-gradient(rgba(4,75,110,.11) .8px, transparent .8px); }
.chat-theme-ocean .mine .message-bubble { background: linear-gradient(135deg,#0d789f,#075675); }
.chat-theme-mint .messages { background-color: #e8f7f1; background-image: radial-gradient(rgba(40,145,108,.09) .8px, transparent .8px); }
.chat-theme-mint .mine .message-bubble { background: linear-gradient(135deg,#35b98c,#178b69); }
.chat-theme-sunset .messages { background-color: #f5ecf5; background-image: radial-gradient(rgba(119,73,139,.09) .8px, transparent .8px); }
.chat-theme-sunset .mine .message-bubble { background: linear-gradient(135deg,#8054b7,#dd735f); }

.group-info-screen { background: #f3f7fa; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.group-info-topbar { align-items: center; background: linear-gradient(145deg,#06172e,#0b3765); color: #fff; display: flex; flex: 0 0 auto; gap: 10px; min-height: 92px; padding: 43px 16px 12px; }
.group-info-topbar .back-button { align-items: center; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.17); border-radius: 11px; color: #fff; display: flex; height: 37px; justify-content: center; width: 37px; }
.group-info-topbar > div { flex: 1; }
.group-info-topbar small { color: #75c9fc; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.2px; }
.group-info-topbar h1 { font-size: 18px; margin: 3px 0 0; }
.group-role-badge { background: rgba(78,194,255,.16); border: 1px solid rgba(112,207,255,.25); border-radius: 9px; color: #9cddff; font-size: 7px; font-weight: 900; padding: 6px 8px; }
.group-info-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 32px; scrollbar-width: none; }
.group-info-scroll::-webkit-scrollbar { display: none; }
.group-info-scroll > .flash { margin: 0 0 10px; }
.group-identity-card { background: linear-gradient(145deg,#fff,#f7fbfe); border: 1px solid #e2eaf0; border-radius: 23px; box-shadow: 0 14px 32px rgba(27,61,91,.1); padding: 21px 16px 17px; text-align: center; }
.group-info-avatar { align-items: center; background: linear-gradient(145deg,#dff3ff,#9ed5f5); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 10px 23px rgba(30,91,133,.2); color: #127fc6; display: flex; font-size: 22px; font-weight: 900; height: 90px; justify-content: center; margin: 0 auto 11px; overflow: hidden; width: 90px; }
.group-info-avatar img { height: 100%; object-fit: cover; width: 100%; }
.group-identity-card h2 { color: #172b42; font-size: 20px; margin: 0; }
.group-identity-card > p { color: #7590a4; font-size: 9px; margin: 4px 0 0; }
.group-description { background: #edf6fc; border-radius: 12px; color: #526a7d; font-size: 9px; line-height: 1.55; margin: 12px 0 9px; padding: 9px; text-align: left; }
.group-identity-card > small { color: #9aa8b4; display: block; font-size: 7px; margin-top: 10px; }
.group-info-card { background: #fff; border: 1px solid #e2e9ef; border-radius: 20px; box-shadow: 0 10px 25px rgba(31,66,96,.07); margin-top: 11px; padding: 14px; }
.group-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }
.group-section-heading small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.2px; }
.group-section-heading h2 { color: #22374d; font-size: 14px; margin: 3px 0 0; }
.group-section-heading > span { background: #e9f5fd; border-radius: 9px; color: #1685cf; font-size: 7px; font-weight: 900; padding: 6px 8px; }
.group-edit-form > label { display: block; margin-top: 9px; }
.group-edit-form > label > span { color: #53687b; display: block; font-size: 8px; font-weight: 800; margin: 0 0 5px 2px; }
.group-edit-form input,
.group-edit-form textarea,
.group-edit-form select { background: #f5f8fa; border: 1px solid #e0e8ee; border-radius: 11px; color: #253a50; font: inherit; font-size: 9px; outline: 0; padding: 10px; width: 100%; }
.group-edit-form textarea { line-height: 1.5; resize: vertical; }
.group-edit-form label small { color: #91a0ad; display: block; font-size: 7px; line-height: 1.4; margin: 4px 2px 0; }
.group-edit-form > button,
.group-add-form > button,
.group-permission-card > button { background: linear-gradient(145deg,#1698e8,#0878c9); border: 0; border-radius: 12px; box-shadow: 0 8px 18px rgba(13,124,200,.2); color: #fff; cursor: pointer; font-size: 8px; font-weight: 900; height: 41px; margin-top: 12px; width: 100%; }
.group-permission-intro,.group-permission-summary p { color: #718496; font-size: 8px; line-height: 1.5; margin: -2px 0 9px; }
.group-permission-row { align-items: center; border-top: 1px solid #edf1f4; cursor: pointer; display: flex; gap: 9px; min-height: 58px; padding: 7px 0; }
.group-permission-row > i { align-items: center; background: #edf6fc; border-radius: 11px; color: #1689d5; display: flex; flex: 0 0 34px; font-size: 16px; font-style: normal; height: 34px; justify-content: center; }
.group-permission-row > span { flex: 1; min-width: 0; }
.group-permission-row b { color: #2a4055; display: block; font-size: 9px; }
.group-permission-row small { color: #8495a4; display: block; font-size: 7px; line-height: 1.45; margin-top: 3px; }
.group-permission-row input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.group-permission-row > em { background: #b5c0ca; border-radius: 14px; display: block; flex: 0 0 38px; height: 22px; position: relative; transition: .2s ease; }
.group-permission-row > em::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.2); content: ''; height: 18px; left: 2px; position: absolute; top: 2px; transition: .2s ease; width: 18px; }
.group-permission-row input:checked + em { background: #20c879; }
.group-permission-row input:checked + em::after { transform: translateX(16px); }
.group-permission-row input:focus-visible + em { outline: 3px solid rgba(22,143,230,.2); }
.group-setting-row { align-items: center; display: flex; justify-content: space-between; }
.group-setting-row span b { color: #263b50; display: block; font-size: 10px; }
.group-setting-row span small { color: #8d9aa7; display: block; font-size: 7px; margin-top: 3px; }
.group-setting-row strong { color: #168fe6; font-size: 9px; }
.group-add-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; scrollbar-width: none; }
.group-add-list label { align-items: center; background: #f6f9fb; border: 1px solid #e7edf2; border-radius: 13px; cursor: pointer; display: flex; gap: 9px; min-height: 52px; padding: 6px 8px; }
.group-add-list input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.group-add-list label:has(input:checked) { background: #eaf7ff; border-color: #94d1f5; }
.mini-member-avatar { align-items: center; background: #dff1fc; border-radius: 50%; color: #1184cf; display: flex; flex: 0 0 37px; font-size: 10px; font-weight: 900; height: 37px; justify-content: center; overflow: hidden; width: 37px; }
.mini-member-avatar img { height: 100%; object-fit: cover; width: 100%; }
.group-add-list label > span:nth-of-type(2) { flex: 1; min-width: 0; }
.group-add-list b { color: #283d52; display: block; font-size: 9px; }
.group-add-list small { color: #8697a5; display: block; font-size: 7px; margin-top: 2px; }
.group-add-list i { align-items: center; background: #fff; border: 1px solid #bcc9d3; border-radius: 50%; color: transparent; display: flex; font-size: 9px; height: 20px; justify-content: center; width: 20px; }
.group-add-list input:checked ~ i { background: #168fe6; border-color: #168fe6; color: #fff; }
.group-info-empty { color: #8495a5; font-size: 8px; line-height: 1.5; margin: 8px 0 2px; text-align: center; }
.group-member-list { display: grid; gap: 3px; }
.group-member-row { align-items: center; border-top: 1px solid #edf1f4; display: flex; gap: 8px; min-height: 57px; padding: 7px 0; }
.group-member-detail-trigger { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; flex: 1; gap: 8px; min-width: 0; padding: 0; text-align: left; }
.group-member-detail-trigger:hover .member-copy b { color: #168fe6; }
.group-member-row:first-child { border-top: 0; }
.member-copy { flex: 1; min-width: 0; }
.member-copy b { color: #293d51; display: block; font-size: 9px; }
.member-copy small { color: #8796a5; display: block; font-size: 7px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-copy small.member-presence { color: #9aa6b1; }
.member-copy small.member-presence.online { color: #20ae78; font-weight: 800; }
.group-member-row > em { background: #e8f5fd; border-radius: 7px; color: #1688d3; font-size: 6px; font-style: normal; font-weight: 900; padding: 4px 6px; }
.group-member-row form select,
.group-member-row form button { background: #eff5f8; border: 0; border-radius: 8px; color: #5b7184; font-size: 7px; font-weight: 800; max-width: 83px; padding: 6px; }
.group-member-popup-layer { align-items: flex-end; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 450; }
.group-member-popup-layer.hidden { display: none; }
.group-member-popup-backdrop { background: rgba(3,15,29,.72); border: 0; inset: 0; position: absolute; }
.group-member-popup { background: linear-gradient(180deg,#fff,#f5f9fc); border-radius: 26px 26px 0 0; max-width: 500px; padding: 24px 20px max(22px,env(safe-area-inset-bottom)); position: relative; text-align: center; width: 100%; z-index: 1; }
.group-member-popup-close { background: #edf2f6; border: 0; border-radius: 50%; color: #607286; cursor: pointer; font-size: 21px; height: 36px; position: absolute; right: 15px; top: 14px; width: 36px; }
.group-member-popup-avatar { align-items: center; background: linear-gradient(145deg,#dff3ff,#9ed5f5); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 10px 24px rgba(30,91,133,.2); color: #127fc6; display: flex; font-size: 22px; font-weight: 900; height: 88px; justify-content: center; margin: 2px auto 10px; overflow: hidden; width: 88px; }
.group-member-popup-avatar img { height: 100%; object-fit: cover; width: 100%; }
.group-member-popup h2 { color: #1d3349; font-size: 20px; margin: 0; }
.group-member-popup > p { color: #1687d2; font-size: 9px; margin: 4px 0 0; }
.group-member-popup > span { color: #20ae78; display: block; font-size: 8px; font-weight: 800; margin-top: 5px; }
.group-member-popup-status { background: #edf4f8; border-radius: 12px; color: #5b7083; font-size: 8px; line-height: 1.5; margin-top: 12px; padding: 10px; }
.group-member-popup-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 13px; }
.group-member-popup-actions.hidden { display: none; }
.group-member-popup-actions form { margin: 0; }
.group-member-popup-actions button,.group-member-popup-actions a { align-items: center; background: #e8f5fd; border: 1px solid #d5ebf8; border-radius: 13px; color: #1685ce; display: flex; font-size: 14px; font-weight: 800; gap: 6px; height: 46px; justify-content: center; text-decoration: none; width: 100%; }
.group-member-popup-actions span { font-size: 8px; }

/* Contact details and private address-book names */
.contact-detail-link { align-items: center; color: inherit; display: flex; flex: 1; min-width: 0; text-decoration: none; }
.contact-detail-link .chat-avatar { flex: 0 0 52px; }
.contact-info-screen { background: #f3f7fa; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.contact-info-topbar { align-items: center; background: linear-gradient(145deg,#06172e,#0b3765); color: #fff; display: flex; flex: 0 0 auto; gap: 10px; min-height: 92px; padding: 43px 16px 12px; }
.contact-info-topbar .back-button { align-items: center; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.17); border-radius: 11px; color: #fff; display: flex; height: 37px; justify-content: center; width: 37px; }
.contact-info-topbar > div { flex: 1; }
.contact-info-topbar small { color: #75c9fc; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.2px; }
.contact-info-topbar h1 { font-size: 18px; margin: 3px 0 0; }
.contact-edit-shortcut { align-items: center; background: rgba(255,255,255,.1); border-radius: 11px; color: #fff; display: flex; height: 36px; justify-content: center; width: 36px; }
.contact-edit-shortcut svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.contact-info-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 35px; scrollbar-width: none; }
.contact-info-scroll::-webkit-scrollbar { display: none; }
.contact-info-scroll > .flash { margin: 0 0 10px; }
.contact-profile-card { background: linear-gradient(145deg,#fff,#f7fbfe); border: 1px solid #e2eaf0; border-radius: 24px; box-shadow: 0 14px 32px rgba(27,61,91,.1); padding: 21px 16px 17px; text-align: center; }
.contact-info-avatar { align-items: center; background: linear-gradient(145deg,#dff3ff,#9ed5f5); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 10px 23px rgba(30,91,133,.2); color: #127fc6; display: flex; font-size: 25px; font-weight: 900; height: 98px; justify-content: center; margin: 0 auto 11px; overflow: hidden; width: 98px; }
.contact-info-avatar img { height: 100%; object-fit: cover; width: 100%; }
.contact-profile-card h2 { color: #172b42; font-size: 21px; margin: 0; }
.contact-profile-card > p { color: #7790a3; font-size: 9px; margin: 4px 0 0; }
.contact-profile-card > p.registered-name { color: #60788b; font-size: 8px; font-weight: 700; }
.contact-profile-card > p.contact-presence { color: #8999a8; font-size: 8px; font-weight: 800; }
.contact-profile-card > p.contact-presence.online { color: #20ae78; }
.contact-quick-actions { display: flex; gap: 9px; justify-content: center; margin-top: 15px; }
.contact-quick-actions a,
.contact-quick-actions button { align-items: center; background: #eaf5fc; border: 1px solid #d7eaf7; border-radius: 14px; color: #1387d4; display: flex; flex-direction: column; gap: 4px; height: 54px; justify-content: center; min-width: 64px; padding: 0; text-decoration: none; }
.contact-quick-actions button:disabled { color: #9aa7b2; opacity: .75; }
.contact-quick-actions svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.contact-quick-actions span { font-size: 7px; font-weight: 900; }
.contact-info-card { background: #fff; border: 1px solid #e2e9ef; border-radius: 20px; box-shadow: 0 10px 25px rgba(31,66,96,.07); margin-top: 11px; padding: 14px; }
.contact-section-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.contact-section-title small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.contact-section-title h2 { color: #22374d; font-size: 14px; margin: 3px 0 0; }
.contact-section-title > svg { fill: none; height: 20px; stroke: #168fe6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 20px; }
.contact-name-form input { background: #f5f8fa; border: 1px solid #e0e8ee; border-radius: 12px; color: #263c52; font: inherit; font-size: 10px; height: 43px; outline: 0; padding: 0 11px; width: 100%; }
.contact-name-form input:focus { background: #fff; border-color: #72c2f0; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.contact-name-form > p { color: #8797a6; font-size: 7px; line-height: 1.5; margin: 6px 2px 0; }
.contact-name-form > button,
.save-contact-detail button,
.direct-settings-card > button { background: linear-gradient(145deg,#1698e8,#0878c9); border: 0; border-radius: 12px; box-shadow: 0 8px 18px rgba(13,124,200,.2); color: #fff; cursor: pointer; font-size: 8px; font-weight: 900; height: 41px; margin-top: 11px; width: 100%; }
.save-contact-detail { padding: 10px 14px 14px; }
.contact-about-card { padding: 3px 14px; }
.contact-about-card > div { border-top: 1px solid #edf1f4; padding: 11px 0; }
.contact-about-card > div:first-child { border-top: 0; }
.contact-about-card small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: .9px; }
.contact-about-card p { color: #344b61; font-size: 9px; line-height: 1.45; margin: 4px 0 0; }
.direct-settings-card .setting-toggle,
.direct-settings-card .setting-select { align-items: center; border-top: 1px solid #edf1f4; display: flex; justify-content: space-between; min-height: 54px; }
.direct-settings-card .setting-toggle:first-of-type { border-top: 0; }
.direct-settings-card label span { flex: 1; }
.direct-settings-card label b { color: #2a4055; display: block; font-size: 9px; }
.direct-settings-card label small { color: #8998a6; display: block; font-size: 7px; margin-top: 3px; }
.direct-settings-card input[type="checkbox"] { accent-color: #168fe6; height: 20px; width: 20px; }
.direct-settings-card select { background: #eef5f9; border: 0; border-radius: 9px; color: #4b6579; font-size: 8px; font-weight: 800; padding: 7px; }
.mutual-groups-card > a { align-items: center; border-top: 1px solid #edf1f4; color: inherit; display: flex; gap: 9px; min-height: 58px; padding: 7px 0; text-decoration: none; }
.mutual-groups-card > a:nth-of-type(1) { border-top: 0; }
.mutual-group-avatar { align-items: center; background: #e0f1fb; border-radius: 50%; color: #1387d4; display: flex; flex: 0 0 40px; font-size: 9px; font-weight: 900; height: 40px; justify-content: center; overflow: hidden; width: 40px; }
.mutual-group-avatar img { height: 100%; object-fit: cover; width: 100%; }
.mutual-groups-card a > span:nth-child(2) { flex: 1; min-width: 0; }
.mutual-groups-card b { color: #283e53; display: block; font-size: 9px; }
.mutual-groups-card small { color: #8797a5; display: block; font-size: 7px; margin-top: 3px; }
.mutual-groups-card a > i { color: #8fa0ad; font-size: 16px; font-style: normal; }
.no-common-groups { color: #8b99a6; font-size: 8px; margin: 4px 0; text-align: center; }
.encryption-card { align-items: center; display: flex; gap: 10px; }
.encryption-card > svg { fill: none; height: 23px; stroke: #168fe6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 23px; }
.encryption-card span { flex: 1; }
.encryption-card b { color: #2a4055; display: block; font-size: 9px; }
.encryption-card small { color: #8998a6; display: block; font-size: 7px; line-height: 1.45; margin-top: 3px; }

@media (max-width: 600px) {
  .group-header { padding-top: max(48px, calc(env(safe-area-inset-top) + 38px)); }
  .group-screen { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
}

/* Profile photo viewer, social status, chat reactions and attachments */
.contact-info-avatar.viewable,
.group-info-avatar.viewable { border: 4px solid #fff; cursor: zoom-in; padding: 0; }
.image-viewer { align-items: center; display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 500; }
.image-viewer.hidden { display: none; }
.image-viewer-backdrop { background: rgba(2,10,21,.91); border: 0; inset: 0; position: absolute; }
.image-viewer-dialog { max-width: 540px; position: relative; width: min(100%, 540px); z-index: 1; }
.image-viewer-dialog header { align-items: center; color: #fff; display: flex; justify-content: space-between; margin-bottom: 12px; }
.image-viewer-dialog header strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-dialog header button { align-items: center; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 23px; height: 38px; justify-content: center; width: 38px; }
.image-viewer-dialog > img { background: #0d1e31; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.45); display: block; max-height: 78vh; object-fit: contain; width: 100%; }
body.image-viewer-open { overflow: hidden; }
.profile-photo-shell > img[data-image-view] { cursor: zoom-in; }
.contact-delete-form { margin: 13px 3px 4px; }
.contact-delete-form button { align-items: center; background: #fff0f3; border: 1px solid #ffd6df; border-radius: 14px; color: #e23d5d; cursor: pointer; display: flex; font-size: 8px; font-weight: 900; gap: 7px; height: 43px; justify-content: center; width: 100%; }
.contact-delete-form svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.contact-block-form { margin: 13px 3px 0; }
.contact-block-form button { align-items: center; background: #fff0f3; border: 1px solid #ffd6df; border-radius: 14px; color: #e23d5d; cursor: pointer; display: flex; font-size: 8px; font-weight: 900; gap: 7px; height: 43px; justify-content: center; width: 100%; }
.contact-block-form.unblock button { background: #eaf7ff; border-color: #cdeafa; color: #1688d3; }
.contact-block-form svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }
.save-contact-layer { align-items: flex-end; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 420; }
.save-contact-layer.hidden { display: none; }
.save-contact-backdrop { background: rgba(4,17,32,.64); border: 0; inset: 0; position: absolute; }
.save-contact-dialog { background: #fff; border-radius: 25px 25px 0 0; box-shadow: 0 -16px 48px rgba(4,27,48,.25); max-width: 500px; padding: 22px 20px max(20px,env(safe-area-inset-bottom)); position: relative; text-align: center; width: 100%; z-index: 1; }
.save-contact-icon { align-items: center; background: linear-gradient(145deg,#1698e8,#0878c9); border-radius: 18px; box-shadow: 0 9px 22px rgba(12,125,203,.25); color: #fff; display: flex; font-size: 25px; height: 55px; justify-content: center; margin: 0 auto 12px; width: 55px; }
.save-contact-dialog > small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.2px; }
.save-contact-dialog h2 { color: #1d3248; font-size: 19px; margin: 4px 0 0; }
.save-contact-dialog > p { color: #7e8f9f; font-size: 8px; line-height: 1.5; margin: 5px auto 15px; max-width: 310px; }
.save-contact-dialog label { display: block; text-align: left; }
.save-contact-dialog label span { color: #52677a; display: block; font-size: 8px; font-weight: 800; margin: 0 0 5px 2px; }
.save-contact-dialog input[type="text"] { background: #f3f7fa; border: 1px solid #dfe8ef; border-radius: 13px; color: #263d53; font: inherit; font-size: 11px; height: 47px; outline: 0; padding: 0 13px; width: 100%; }
.save-contact-dialog input[type="text"]:focus { background: #fff; border-color: #73c3f1; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.save-contact-confirm,.save-contact-cancel { border: 0; border-radius: 13px; cursor: pointer; font-size: 9px; font-weight: 900; height: 44px; width: 100%; }
.save-contact-confirm { background: linear-gradient(145deg,#1698e8,#0878c9); box-shadow: 0 8px 19px rgba(13,124,200,.21); color: #fff; margin-top: 12px; }
.save-contact-cancel { background: #eef3f6; color: #64778a; margin-top: 7px; }

.status-social-actions { align-items: center; border-top: 1px solid rgba(224,233,240,.7); display: flex; gap: 6px; padding: 9px 12px 7px; }
.status-social-actions form { margin: 0; }
.status-social-actions button { align-items: center; background: #f0f5f8; border: 1px solid #e1e9ef; border-radius: 10px; color: #718395; cursor: pointer; display: flex; gap: 4px; height: 29px; padding: 0 9px; }
.status-social-actions button span { font-size: 13px; }
.status-social-actions button b { font-size: 8px; }
.status-social-actions button.active { background: #e6f5ff; border-color: #a5d8f6; color: #087dcc; }
.status-social-actions button.active.dislike { background: #fff0f2; border-color: #ffcbd4; color: #d43b55; }
.status-comment-count { color: #738698; font-size: 8px; font-weight: 800; margin-left: auto; }
.status-comments { border-top: 1px solid rgba(224,233,240,.7); display: grid; gap: 10px; max-height: 340px; overflow-y: auto; padding: 11px 12px; scrollbar-width: none; }
.status-comment { align-items: flex-start; display: flex; gap: 7px; }
.status-comment-avatar { align-items: center; background: #dff1fc; border-radius: 50%; color: #1687ce; display: flex; flex: 0 0 27px; font-size: 7px; font-weight: 900; height: 27px; justify-content: center; overflow: hidden; width: 27px; }
.status-comment-avatar img { height: 100%; object-fit: cover; width: 100%; }
.status-comment-copy { flex: 1; min-width: 0; }
.status-comment-name { color: #263b50; display: inline-block; font-size: 8px; font-weight: 900; max-width: 100%; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.status-comment p { color: #52687b; font-size: 8px; line-height: 1.45; margin: 2px 0 0; overflow-wrap: anywhere; }
.status-comment-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.status-comment-meta > small { color: #9aa7b3; font-size: 6px; }
.status-comment-meta > button,.status-comment-reaction-form button { background: transparent; border: 0; color: #738698; cursor: pointer; font: inherit; font-size: 6px; font-weight: 800; padding: 2px 1px; }
.status-comment-reaction-form { display: inline-flex; margin: 0; }
.status-comment-reaction-form button.active { color: #087dcc; }
.status-comment-reaction-form button.active.dislike { color: #dc4760; }
.status-comment-reaction-form b { font-size: inherit; }
.status-comment-replies { border-left: 2px solid #e4edf3; display: grid; gap: 8px; margin-top: 8px; padding-left: 8px; }
.status-comment-replies .status-comment-avatar { flex-basis: 23px; height: 23px; width: 23px; }
.status-comment-form { border-top: 1px solid rgba(224,233,240,.7); display: block; padding: 8px 12px; }
.status-comment-composer { align-items: center; display: flex; gap: 7px; }
.status-comment-form input { background: #f2f6f9; border: 1px solid #e2e9ef; border-radius: 14px; color: #2a4055; flex: 1; font: inherit; font-size: 8px; height: 34px; min-width: 0; outline: 0; padding: 0 11px; }
.status-comment-form input:focus { background: #fff; border-color: #83c9f1; }
.status-comment-composer > button { align-items: center; background: #168fe6; border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; flex: 0 0 32px; height: 32px; justify-content: center; width: 32px; }
.status-comment-composer > button:disabled { cursor: wait; opacity: .55; }
.status-reply-context { align-items: center; background: #edf7fd; border-radius: 9px; color: #4f7189; display: flex; font-size: 7px; justify-content: space-between; margin-bottom: 6px; padding: 6px 8px; }
.status-reply-context b { color: #1688d2; }
.status-reply-context button { background: transparent; border: 0; color: #668096; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.status-view-reactions { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #1684cc !important; font-size: 6px !important; font-weight: 900; height: auto !important; padding: 3px !important; }
.status-post.text-only .status-social-actions,
.status-post.text-only .status-comments,
.status-post.text-only .status-comment-form { border-top-color: rgba(255,255,255,.18); }
.status-post.text-only .status-social-actions button { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.25); color: #fff; }
.status-post.text-only .status-comment-count,
.status-post.text-only .status-comment-name,
.status-post.text-only .status-comment p,
.status-post.text-only .status-comment small { color: #fff; }
.status-post.text-only .status-comment-meta > button,.status-post.text-only .status-comment-reaction-form button,.status-post.text-only .status-view-reactions { color: #fff !important; }
.status-post.text-only .status-comment-replies { border-left-color: rgba(255,255,255,.25); }
.status-post.text-only .status-comment-form input { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: #fff; }
.status-post.text-only .status-comment-form input::placeholder { color: rgba(255,255,255,.75); }

.status-reaction-layer { align-items: flex-end; display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 620; }
.status-reaction-layer.hidden { display: none; }
.status-reaction-backdrop { background: rgba(4,17,31,.62); border: 0; inset: 0; position: absolute; }
.status-reaction-sheet { background: #fff; border-radius: 22px; box-shadow: 0 24px 65px rgba(0,0,0,.3); max-height: min(72vh,560px); max-width: 470px; overflow: hidden; position: relative; width: 100%; z-index: 1; }
.status-reaction-sheet > header { align-items: center; border-bottom: 1px solid #e7edf2; display: flex; justify-content: space-between; padding: 14px 16px 11px; }
.status-reaction-sheet > header small { color: #168fe6; display: block; font-size: 6px; font-weight: 900; letter-spacing: 1.1px; }
.status-reaction-sheet > header h2 { color: #22384d; font-size: 15px; margin: 3px 0 0; }
.status-reaction-sheet > header button { background: #edf3f7; border: 0; border-radius: 50%; color: #62778a; cursor: pointer; font-size: 20px; height: 34px; width: 34px; }
.status-reaction-people { display: grid; gap: 12px; max-height: calc(72vh - 72px); overflow-y: auto; padding: 12px 14px 18px; }
.status-reaction-people section { display: grid; gap: 5px; }
.status-reaction-people h3 { color: #536a7e; font-size: 8px; margin: 0 0 2px; }
.status-reaction-people p { color: #8b99a6; font-size: 8px; margin: 8px; text-align: center; }
.status-reaction-person { align-items: center; background: #f5f8fa; border: 1px solid #e7edf2; border-radius: 13px; color: #263c51; display: flex; gap: 9px; padding: 7px 9px; text-decoration: none; }
.status-reaction-person > span { align-items: center; background: #dff1fc; border-radius: 50%; color: #1686cf; display: flex; flex: 0 0 34px; font-size: 8px; font-weight: 900; height: 34px; justify-content: center; overflow: hidden; width: 34px; }
.status-reaction-person img { height: 100%; object-fit: cover; width: 100%; }
.status-reaction-person b { font-size: 8px; }
.status-action-toast { background: #092947; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; bottom: max(86px,calc(env(safe-area-inset-bottom) + 76px)); box-shadow: 0 13px 34px rgba(0,0,0,.26); color: #fff; font-size: 8px; font-weight: 800; left: 50%; max-width: min(330px,calc(100vw - 40px)); opacity: 0; padding: 10px 14px; pointer-events: none; position: fixed; text-align: center; transform: translate(-50%,12px); transition: .2s ease; z-index: 720; }
.status-action-toast.error { background: #7d2032; }
.status-action-toast.show { opacity: 1; transform: translate(-50%,0); }

.message-row { align-items: flex-start; flex-direction: column; }
.message-row.mine { align-items: flex-end; justify-content: flex-start; }
.message-bubble { min-width: 0; overflow: hidden; }
.message-bubble p[data-message-copy],.message-reply-quote p { hyphens: auto; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.message-image-attachment { background: transparent; border: 0; border-radius: 12px; cursor: zoom-in; display: block; margin: -4px -5px 7px; max-width: calc(100% + 10px); overflow: hidden; padding: 0; }
.message-image-attachment img { display: block; max-height: 255px; object-fit: cover; width: 100%; }
.message-bubble p.attachment-only-copy { display: none; }
.message-video-attachment { background: #07182f; border-radius: 12px; display: block; margin: -4px -5px 7px; max-height: 260px; max-width: calc(100% + 10px); width: calc(100% + 10px); }
.message-audio-attachment { display: block; height: 36px; margin: 1px 0 7px; max-width: 245px; width: 245px; }
.message-file-attachment { align-items: center; background: rgba(235,243,248,.92); border: 1px solid rgba(210,224,234,.9); border-radius: 12px; color: #29455c; display: flex; gap: 8px; margin: -3px -4px 7px; max-width: 250px; min-width: 205px; padding: 9px; text-decoration: none; }
.mine .message-file-attachment { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); color: #fff; }
.message-file-attachment > span:first-child { font-size: 22px; }
.message-file-attachment > span:nth-child(2) { flex: 1; margin: 0; min-width: 0; text-align: left; }
.message-file-attachment b { display: block; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-file-attachment small { display: block; font-size: 6px; margin-top: 2px; opacity: .72; }
.message-file-attachment i { font-size: 16px; font-style: normal; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 6px 1px; position: relative; z-index: 2; }
.message-reactions.hidden { display: none; }
.message-reactions button { align-items: center; background: #fff; border: 1px solid #dce7ee; border-radius: 12px; box-shadow: 0 3px 9px rgba(31,66,96,.1); color: #5f7487; cursor: pointer; display: flex; gap: 3px; height: 24px; padding: 0 7px; }
.message-reactions button.mine { background: #e7f5ff; border-color: #91d0f5; color: #0a80ca; }
.message-reactions span { font-size: 12px; }
.message-reactions b { font-size: 7px; }
.message-reaction-picker { background: #f4f8fb; border: 1px solid #e2eaf0; border-radius: 16px; display: grid; gap: 2px; grid-template-columns: repeat(6,1fr); margin: 0 0 11px; padding: 5px; }
.message-reaction-picker.hidden { display: none; }
.message-reaction-picker button { background: transparent; border: 0; border-radius: 10px; cursor: pointer; font-size: 19px; height: 38px; padding: 0; }
.message-reaction-picker button:hover { background: #e5f2fa; transform: translateY(-1px); }
.readers-sheet { max-height: min(78vh,600px); }
.message-reader-list { display: grid; gap: 4px; max-height: 360px; min-height: 70px; overflow-y: auto; padding: 3px 0 10px; scrollbar-width: none; }
.message-reader-list > p { color: #8494a3; font-size: 8px; padding: 18px; text-align: center; }
.message-reader { align-items: center; background: #f5f8fa; border: 1px solid #e7edf2; border-radius: 14px; display: flex; gap: 9px; min-height: 58px; padding: 7px 9px; }
.message-reader-avatar { align-items: center; background: #dff1fc; border-radius: 50%; color: #1486cf; display: flex; flex: 0 0 39px; font-size: 9px; font-weight: 900; height: 39px; justify-content: center; overflow: hidden; width: 39px; }
.message-reader-avatar img { height: 100%; object-fit: cover; width: 100%; }
.message-reader > span:nth-child(2) { flex: 1; min-width: 0; }
.message-reader b { color: #2a4055; display: block; font-size: 9px; }
.message-reader small { color: #8a99a7; display: block; font-size: 7px; margin-top: 3px; }
.message-reader > i { color: #9ba8b3; font-size: 11px; font-style: normal; }
.message-reader.read > i,.message-reader.read small { color: #168fe6; }
.composer-attach-button { align-items: center; background: #edf4f9; border: 0; border-radius: 50%; color: #6d7d91; cursor: pointer; display: flex; flex: 0 0 40px; height: 40px; justify-content: center; width: 40px; }
.composer-attach-button svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.message-composer .composer-emoji-button { background: #edf4f9; color: #5f7284; flex: 0 0 36px; font-size: 18px; height: 36px; width: 36px; }
.message-composer .composer-sticker-button { background: #edf4f9; color: #1687d2; flex: 0 0 36px; font-size: 7px; font-weight: 900; height: 36px; letter-spacing: -.2px; width: 36px; }
.composer-emoji-panel { background: #fff; border-top: 1px solid #e1e9ef; display: grid; gap: 3px; grid-template-columns: repeat(8,1fr); max-height: 132px; overflow-y: auto; padding: 8px 13px; scrollbar-width: none; }
.composer-emoji-panel.hidden { display: none; }
.composer-emoji-panel button { background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 18px; height: 32px; padding: 0; }
.composer-emoji-panel button:hover { background: #edf6fc; }
.composer-sticker-panel { background: linear-gradient(180deg,#fff,#f5f9fc); border-top: 1px solid #dfe9ef; box-shadow: 0 -12px 28px rgba(23,59,89,.08); max-height: 245px; overflow: hidden; padding: 9px 12px 11px; }
.composer-sticker-panel.hidden { display: none; }
.composer-sticker-panel header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.composer-sticker-panel header div small { color: #168fe6; display: block; font-size: 6px; font-weight: 900; letter-spacing: 1px; }
.composer-sticker-panel header div b { color: #294055; display: block; font-size: 10px; margin-top: 2px; }
.composer-sticker-panel header > span { color: #8393a1; font-size: 6px; max-width: 145px; text-align: right; }
.composer-sticker-panel header label { background: #e7f4fc; border: 1px solid #d4eaf8; border-radius: 10px; color: #1688d2; cursor: pointer; font-size: 7px; font-weight: 900; padding: 7px 9px; }
.sticker-grid { display: grid; gap: 5px; grid-template-columns: repeat(5,1fr); max-height: 180px; overflow-y: auto; scrollbar-width: none; }
.sticker-grid > button { align-items: center; aspect-ratio: 1; background: #edf4f8; border: 1px solid #e2ebf0; border-radius: 13px; cursor: pointer; display: flex; justify-content: center; min-width: 0; overflow: hidden; padding: 4px; }
.sticker-grid > button:hover { background: #e2f2fc; border-color: #b9ddf3; transform: translateY(-1px); }
.sticker-grid > button:disabled { opacity: .45; }
.sticker-grid img { height: 100%; object-fit: contain; width: 100%; }
.sticker-empty { color: #8494a2; font-size: 8px; grid-column: 1/-1; line-height: 1.55; margin: 12px 18px; text-align: center; }
.message-row.sticker-message .message-bubble { background: transparent; box-shadow: none; padding: 2px 2px 0; }
.message-sticker-attachment { background: transparent; border: 0; cursor: zoom-in; display: block; max-width: 175px; padding: 0; }
.message-sticker-attachment img { display: block; height: auto; max-height: 185px; object-fit: contain; width: 100%; }
.sticker-message .message-meta { background: rgba(7,24,47,.62); border-radius: 9px; color: #fff; padding: 3px 6px; }
.composer-attachment-preview { align-items: center; background: #fff; border-top: 1px solid #e1e9ef; display: flex; gap: 8px; padding: 8px 13px; }
.composer-attachment-preview.hidden { display: none; }
.composer-attachment-preview > span { align-items: center; background: #e6f4fd; border-radius: 10px; display: flex; flex: 0 0 34px; height: 34px; justify-content: center; }
.composer-attachment-preview > div { flex: 1; min-width: 0; }
.composer-attachment-preview b { color: #2c4054; display: block; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment-preview small { color: #8c9aa7; display: block; font-size: 6px; margin-top: 2px; }
.composer-attachment-preview button { background: transparent; border: 0; color: #8393a1; cursor: pointer; font-size: 20px; }
.attachment-preview-layer { align-items: center; background: rgba(4,15,29,.92); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 480; }
.attachment-preview-layer.hidden { display: none; }
.attachment-preview-dialog { background: #f7fafc; border-radius: 22px; box-shadow: 0 28px 75px rgba(0,0,0,.42); max-height: 92vh; max-width: 470px; overflow-y: auto; padding: 14px; width: 100%; }
.attachment-preview-dialog header { align-items: center; display: flex; gap: 10px; }
.attachment-preview-dialog header > button { background: #e9f0f5; border: 0; border-radius: 50%; color: #607487; cursor: pointer; font-size: 21px; height: 36px; width: 36px; }
.attachment-preview-dialog header small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.attachment-preview-dialog header h2 { color: #20364c; font-size: 16px; margin: 2px 0 0; }
.attachment-preview-media { align-items: center; background: #07182f; border-radius: 17px; display: flex; justify-content: center; margin-top: 12px; min-height: 210px; overflow: hidden; }
.attachment-preview-media img,.attachment-preview-media video { display: block; max-height: 52vh; object-fit: contain; width: 100%; }
.attachment-preview-media audio { margin: 45px 12px; max-width: calc(100% - 24px); width: 340px; }
.attachment-generic-icon { color: #fff; font-size: 60px; }
.attachment-preview-file { align-items: center; background: #eaf4fa; border-radius: 13px; display: flex; gap: 8px; margin-top: 9px; padding: 8px 10px; }
.attachment-preview-file > span { font-size: 21px; }
.attachment-preview-file b { color: #2a4055; display: block; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-file small { color: #8293a3; display: block; font-size: 7px; margin-top: 2px; }
.attachment-preview-dialog > label { display: block; margin-top: 10px; }
.attachment-preview-dialog > label span { color: #52677a; display: block; font-size: 8px; font-weight: 800; margin: 0 0 5px 2px; }
.attachment-preview-dialog > label input { background: #fff; border: 1px solid #dce7ee; border-radius: 13px; color: #273e54; font: inherit; font-size: 10px; height: 45px; outline: 0; padding: 0 12px; width: 100%; }
.attachment-preview-dialog > label input:focus { border-color: #75c2f0; box-shadow: 0 0 0 3px rgba(22,143,230,.1); }
.attachment-preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.attachment-preview-actions button { border: 0; border-radius: 12px; cursor: pointer; font-size: 8px; font-weight: 900; height: 42px; }
.attachment-preview-actions button:first-child { background: #e9eff4; color: #617487; flex: 1; }
.attachment-preview-actions button:last-child { background: linear-gradient(145deg,#1698e8,#0878c9); box-shadow: 0 8px 18px rgba(13,124,200,.2); color: #fff; flex: 1.35; }

/* Mentions, copyable usernames, group invites, and join review */
.copy-username { background: #e8f5fd; border: 1px solid #d3eaf8; border-radius: 10px; color: #1686cf; cursor: pointer; display: inline-flex; font: inherit; font-size: 8px; font-weight: 800; gap: 5px; margin: 5px auto 0; padding: 6px 9px; }
.copy-username i { font-size: 9px; font-style: normal; }
.copy-username.inline { margin: 3px 0 0; }
.copy-username.compact { background: transparent; border: 0; display: inline; font-size: inherit; margin: 0; padding: 0; }
.copy-username:hover { background: #dff1fc; }
.global-copy-toast { background: #082442; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; bottom: max(22px,env(safe-area-inset-bottom)); box-shadow: 0 12px 30px rgba(0,0,0,.28); color: #fff; font-size: 9px; font-weight: 800; left: 50%; opacity: 0; padding: 10px 15px; pointer-events: none; position: fixed; transform: translate(-50%,12px); transition: .2s ease; z-index: 700; }
.global-copy-toast.show { opacity: 1; transform: translate(-50%,0); }
.composer-mention-panel { background: #fff; border-top: 1px solid #dfe8ee; box-shadow: 0 -10px 25px rgba(28,62,91,.08); display: grid; gap: 3px; max-height: 220px; overflow-y: auto; padding: 7px 11px; scrollbar-width: none; }
.composer-mention-panel.hidden { display: none; }
.composer-mention-panel > button { align-items: center; background: transparent; border: 0; border-radius: 12px; cursor: pointer; display: flex; gap: 9px; min-height: 48px; padding: 5px 7px; text-align: left; }
.composer-mention-panel > button.hidden { display: none; }
.composer-mention-panel > button:hover { background: #edf7fd; }
.mention-avatar { align-items: center; background: #dff1fc; border-radius: 50%; color: #1685ce; display: flex; flex: 0 0 35px; font-size: 9px; font-weight: 900; height: 35px; justify-content: center; overflow: hidden; width: 35px; }
.mention-avatar.all { background: linear-gradient(145deg,#168fe6,#086db9); color: #fff; font-size: 15px; }
.mention-avatar img { height: 100%; object-fit: cover; width: 100%; }
.composer-mention-panel > button > span:last-child { flex: 1; min-width: 0; }
.composer-mention-panel b { color: #21394f; display: block; font-size: 9px; }
.composer-mention-panel small { color: #8494a2; display: block; font-size: 7px; margin-top: 2px; }
.message-row.mentioned-me .message-bubble { outline: 2px solid rgba(22,143,230,.35); }
.mention-badge { color: #168fe6; font-size: 7px; font-weight: 900; margin: 0 0 5px; }
.mine .mention-badge { color: #c9edff; }
.group-invite-link-card > p { color: #718497; font-size: 8px; line-height: 1.5; }
.group-invite-copy { align-items: center; background: #edf7fd; border: 1px solid #d6eaf7; border-radius: 13px; color: #1684cc; cursor: pointer; display: flex; gap: 8px; margin-top: 10px; padding: 10px; text-align: left; width: 100%; }
.group-invite-copy > span { font-size: 18px; }
.group-invite-copy > b { flex: 1; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-invite-copy > i { font-size: 7px; font-style: normal; font-weight: 900; }
.group-invite-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.group-invite-actions form { margin: 0; }
.group-invite-actions button,.group-invite-create { background: #e8f4fb; border: 0; border-radius: 11px; color: #147fc5; cursor: pointer; font-size: 8px; font-weight: 900; height: 38px; width: 100%; }
.group-invite-actions button.danger { background: #fff0f2; color: #df5068; }
.group-request-list { display: grid; gap: 6px; }
.group-request-list article { align-items: center; background: #f6f9fb; border: 1px solid #e6edf2; border-radius: 13px; display: flex; gap: 8px; padding: 7px; }
.group-request-list article > span:nth-child(2) { flex: 1; min-width: 0; }
.group-request-list b { color: #293f54; display: block; font-size: 8px; }
.group-request-list small { color: #8797a5; display: block; font-size: 6px; margin-top: 2px; }
.group-request-list form { display: flex; gap: 4px; }
.group-request-list form button { background: #edf2f5; border: 0; border-radius: 8px; color: #718292; cursor: pointer; font-size: 6px; font-weight: 900; padding: 7px; }
.group-request-list form button:last-child { background: #168fe6; color: #fff; }
.group-invite-screen { background: linear-gradient(160deg,#07182f,#0b3e70); display: flex; flex-direction: column; height: 100%; }
.group-invite-screen > header { align-items: center; color: #fff; display: flex; gap: 10px; padding: 44px 17px 14px; }
.group-invite-screen > header .back-button { align-items: center; background: rgba(255,255,255,.11); border-radius: 12px; color: #fff; display: flex; height: 38px; justify-content: center; width: 38px; }
.group-invite-screen > header small { color: #75c9fc; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.group-invite-screen > header h1 { font-size: 18px; margin: 3px 0 0; }
.group-invite-content { align-items: center; display: flex; flex: 1; justify-content: center; overflow-y: auto; padding: 18px; }
.group-invite-content > .flash { left: 16px; position: absolute; right: 16px; top: 102px; }
.group-invite-card { background: #fff; border-radius: 25px; box-shadow: 0 24px 65px rgba(0,0,0,.3); padding: 25px 18px 20px; text-align: center; width: 100%; }
.group-invite-card > small { color: #168fe6; display: block; font-size: 7px; font-weight: 900; letter-spacing: 1.1px; }
.group-invite-card h2 { color: #1e344a; font-size: 21px; margin: 5px 0 0; }
.group-invite-card > p { color: #8293a1; font-size: 8px; margin: 4px 0 0; }
.group-invite-card > div:not(.group-info-avatar) { background: #f1f6f9; border-radius: 12px; color: #627689; font-size: 8px; line-height: 1.55; margin-top: 12px; padding: 10px; }
.group-invite-card form { margin: 0; }
.invite-primary { align-items: center; background: linear-gradient(145deg,#1698e8,#0878c9); border: 0; border-radius: 13px; box-shadow: 0 9px 20px rgba(13,124,200,.25); color: #fff; cursor: pointer; display: flex; font-size: 9px; font-weight: 900; height: 44px; justify-content: center; margin-top: 15px; text-decoration: none; width: 100%; }
.invite-primary.pending { background: #e6eef3; box-shadow: none; color: #6e8191; }
.invite-note { color: #8797a5 !important; font-size: 7px !important; font-weight: 600 !important; letter-spacing: 0 !important; margin-top: 7px; }

/* Immersive Premium 3D gift effects */
.premium-effect-message {
  border: 1px solid rgba(164,224,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 14px 30px rgba(3,42,82,.24);
  cursor: pointer;
  perspective: 500px;
}
.premium-effect-message::before {
  background: linear-gradient(110deg,transparent 18%,rgba(255,255,255,.2) 46%,transparent 70%);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-120%);
  animation: premiumCardShine 2.8s ease-in-out infinite;
}
.premium-effect-message > span {
  animation: premiumCardIcon3d 2.4s ease-in-out infinite;
  filter: drop-shadow(0 9px 9px rgba(0,19,49,.42));
  position: relative;
  transform-style: preserve-3d;
}
.premium-effect-message > .premium-effect-card-art {
  align-items: center;
  display: flex;
  flex: 0 0 54px;
  height: 54px;
  justify-content: center;
  width: 54px;
}
.premium-effect-message.effect-whale {
  background:
    radial-gradient(circle at 18% 22%,rgba(112,226,255,.3),transparent 28%),
    linear-gradient(135deg,#061f49,#096aa8 62%,#0a8fc5);
  gap: 8px;
  min-height: 86px;
  min-width: 220px;
  padding: 10px 13px 10px 8px;
}
.premium-effect-message.effect-whale > .premium-effect-card-art {
  animation: premiumWhaleCardStage 2.8s ease-in-out infinite;
  flex-basis: 78px;
  height: 66px;
  isolation: isolate;
  overflow: visible;
  position: relative;
  width: 78px;
}
.premium-effect-message.effect-whale > .premium-effect-card-art::before,
.premium-effect-message.effect-whale > .premium-effect-card-art::after {
  border: 1px solid rgba(189,246,255,.82);
  border-radius: 50%;
  content: "";
  height: 7px;
  position: absolute;
  right: 5px;
  top: 11px;
  width: 7px;
  animation: premiumWhaleBubble 2.1s ease-in-out infinite;
}
.premium-effect-message.effect-whale > .premium-effect-card-art::after {
  animation-delay: .45s;
  height: 4px;
  right: 16px;
  top: 19px;
  width: 4px;
}
.premium-effect-message.effect-whale > .premium-effect-card-art img {
  animation: premiumWhaleCardSwim 2.2s cubic-bezier(.45,.05,.5,.95) infinite;
  display: block;
  filter: drop-shadow(0 8px 8px rgba(0,17,52,.35));
  height: auto;
  transform-origin: 52% 58%;
  width: 82px;
  will-change: transform;
}
.premium-effect-message > div,
.premium-effect-message > i { position: relative; z-index: 1; }

.premium-effect-stage {
  --fx: #63d8ff;
  --fx-bright: #d8f7ff;
  --fx-soft: rgba(77,196,255,.3);
  background:
    radial-gradient(circle at 50% 43%,var(--fx-soft),transparent 30%),
    radial-gradient(circle at 25% 5%,rgba(73,129,255,.24),transparent 42%),
    linear-gradient(180deg,rgba(1,8,24,.82),rgba(3,20,48,.91));
  contain: layout paint;
  isolation: isolate;
  perspective: 1100px;
  -webkit-perspective: 1100px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.premium-effect-stage.effect-hearts { --fx:#ff62bb; --fx-bright:#ffe3f5; --fx-soft:rgba(255,52,158,.31); }
.premium-effect-stage.effect-fireworks { --fx:#a989ff; --fx-bright:#fff0a9; --fx-soft:rgba(125,82,255,.34); }
.premium-effect-stage.effect-confetti { --fx:#ffd45d; --fx-bright:#fff7c7; --fx-soft:rgba(255,171,43,.32); }
.premium-effect-scene {
  height: 100%;
  overflow: hidden;
  perspective: 1100px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  width: 100%;
  animation: premiumSceneFade 5.65s ease both;
  will-change: opacity,transform;
}
.premium-effect-atmosphere {
  background:
    radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.19),transparent 9%),
    conic-gradient(from 210deg at 50% 45%,transparent,var(--fx-soft),transparent 24%,rgba(255,255,255,.1),transparent 48%,var(--fx-soft),transparent 72%);
  filter: blur(24px) saturate(1.35);
  inset: -15%;
  opacity: .82;
  position: absolute;
  transform: translateZ(-260px) scale(1.3);
  animation: premiumAtmosphere 5.5s ease-in-out both;
}
.premium-effect-floor {
  background: radial-gradient(ellipse,var(--fx-soft),rgba(16,55,97,.12) 34%,transparent 68%);
  bottom: -10%;
  filter: blur(8px);
  height: 43%;
  left: 2%;
  position: absolute;
  transform: rotateX(72deg) translateZ(-95px);
  transform-origin: 50% 100%;
  width: 96%;
  animation: premiumFloorGlow 5.4s ease both;
}
.premium-effect-camera {
  inset: 0;
  perspective: 900px;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: premiumCameraMove 5.45s cubic-bezier(.22,.72,.25,1) both;
  will-change: transform;
}
.premium-effect-beam {
  background: linear-gradient(180deg,transparent,rgba(255,255,255,.08) 25%,var(--fx-soft) 68%,transparent);
  filter: blur(14px);
  height: 110%;
  left: 42%;
  opacity: 0;
  position: absolute;
  top: -35%;
  transform: rotate(var(--beam-rotate)) translateZ(-100px);
  transform-origin: 50% 100%;
  width: 16%;
  animation: premiumBeamSweep 4.8s ease-in-out var(--beam-delay) both;
}
.premium-effect-ring {
  border: 2px solid var(--fx);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--fx-soft), inset 0 0 24px var(--fx-soft);
  height: 210px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 44%;
  transform: translate(-50%,-50%) rotateX(var(--ring-tilt)) translateZ(-20px) scale(.32);
  width: 210px;
  animation: premiumRingPulse 3.4s cubic-bezier(.15,.65,.2,1) var(--ring-delay) both;
}
.premium-effect-object {
  height: min(55vw,250px);
  left: 50%;
  position: absolute;
  top: 43%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity,transform;
  width: min(55vw,250px);
  z-index: 6;
}
.premium-effect-object > span { pointer-events: none; position: absolute; }
.premium-effect-object-depth,
.premium-effect-object-core {
  align-items: center;
  display: flex;
  font-size: clamp(112px,31vw,190px);
  height: 100%;
  justify-content: center;
  inset: 0;
  line-height: 1;
  width: 100%;
}
.premium-effect-object-depth {
  filter: blur(3px) brightness(.18) saturate(2);
  opacity: .72;
  transform: translate3d(-16px,24px,-70px) scale(1.08);
}
.premium-effect-object-core {
  filter: drop-shadow(0 30px 18px rgba(0,10,31,.52)) drop-shadow(0 0 26px var(--fx-soft));
  transform: translateZ(70px);
  transform-style: preserve-3d;
  animation: premiumObjectFloat 1.7s ease-in-out infinite;
}
.premium-effect-object.object-whale .premium-effect-object-core {
  filter: none;
  inset: -15%;
  height: 130%;
  width: 130%;
}
.premium-whale-art { display: block; height: 100%; overflow: visible; width: 100%; }
.premium-effect-object.object-whale .premium-effect-object-gloss { opacity: .42; }
.premium-effect-object-gloss {
  background: radial-gradient(ellipse at 38% 26%,rgba(255,255,255,.72),rgba(255,255,255,.12) 18%,transparent 46%);
  border-radius: 50%;
  filter: blur(4px);
  height: 70%;
  left: 15%;
  mix-blend-mode: screen;
  opacity: .7;
  top: 8%;
  transform: translateZ(105px) rotate(-16deg);
  width: 68%;
  animation: premiumGlossMove 2s ease-in-out infinite;
}
.premium-effect-object.object-whale { animation: premiumWhale3d 5.5s cubic-bezier(.17,.72,.2,1) both; }
.premium-effect-object.object-hearts { animation: premiumHeart3d 5.45s cubic-bezier(.17,.72,.22,1) both; }
.premium-effect-object.object-fireworks { animation: premiumFirework3d 5.45s cubic-bezier(.12,.67,.18,1) both; }
.premium-effect-object.object-confetti { animation: premiumConfetti3d 5.45s cubic-bezier(.18,.75,.24,1) both; }

.premium-effect-stage .premium-effect-particle {
  animation: premiumParticle3d var(--duration) cubic-bezier(.17,.74,.28,1) var(--delay) both;
  color: var(--particle-color);
  filter: drop-shadow(0 0 9px currentColor);
  font-size: var(--size);
  font-style: normal;
  left: var(--x);
  line-height: 1;
  opacity: 0;
  position: absolute;
  text-shadow: 0 0 13px currentColor;
  top: var(--y);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: opacity,transform;
  z-index: 7;
}
.premium-effect-stage .particle-confetti {
  background: linear-gradient(135deg,#fff,var(--particle-color) 42%,rgba(0,0,0,.22));
  border-radius: 2px;
  box-shadow: 0 0 10px color-mix(in srgb,var(--particle-color),transparent 35%);
  height: 18px;
  width: 8px;
}
.premium-effect-title {
  align-items: center;
  bottom: max(9%,env(safe-area-inset-bottom));
  color: #fff;
  display: flex;
  flex-direction: column;
  left: 50%;
  min-width: 240px;
  opacity: 0;
  position: absolute;
  text-align: center;
  transform: translate3d(-50%,24px,90px) scale(.92);
  z-index: 12;
  animation: premiumTitle3d 5.35s ease both;
}
.premium-effect-title::before {
  background: linear-gradient(90deg,transparent,var(--fx),transparent);
  content: "";
  height: 1px;
  margin-bottom: 10px;
  width: 150px;
}
.premium-effect-title > span {
  color: var(--fx-bright);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .22em;
}
.premium-effect-stage .premium-effect-title > strong {
  animation: none;
  background: linear-gradient(180deg,#fff,var(--fx-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.35));
  font-size: clamp(25px,7vw,38px);
  letter-spacing: -.04em;
  margin-top: 5px;
  padding: 0;
  position: static;
  transform: none;
}
.premium-effect-title > small { color: rgba(224,240,255,.75); font-size: 10px; margin-top: 4px; }

@keyframes premiumCardShine { 0%,55%{transform:translateX(-120%)} 82%,100%{transform:translateX(120%)} }
@keyframes premiumCardIcon3d { 0%,100%{transform:rotateY(-12deg) rotateZ(-3deg) translateZ(12px)} 50%{transform:rotateY(17deg) rotateZ(4deg) translateY(-4px) translateZ(28px)} }
@keyframes premiumWhaleCardStage { 0%,100%{transform:translateY(2px)} 50%{transform:translateY(-3px)} }
@keyframes premiumWhaleCardSwim { 0%,100%{transform:translate3d(-2px,2px,0) rotate(-5deg) scale(.96)} 50%{transform:translate3d(4px,-3px,0) rotate(5deg) scale(1.04)} }
@keyframes premiumWhaleBubble { 0%{opacity:0;transform:translate3d(0,8px,0) scale(.45)} 35%{opacity:.9} 100%{opacity:0;transform:translate3d(5px,-15px,0) scale(1.15)} }
@keyframes premiumSceneFade { 0%{opacity:0} 8%,88%{opacity:1} 100%{opacity:0} }
@keyframes premiumAtmosphere { 0%{opacity:0;transform:translateZ(-360px) scale(.7) rotate(-12deg)} 34%{opacity:.9;transform:translateZ(-220px) scale(1.25) rotate(6deg)} 100%{opacity:0;transform:translateZ(-280px) scale(1.5) rotate(15deg)} }
@keyframes premiumFloorGlow { 0%,100%{opacity:0;transform:rotateX(72deg) translateZ(-120px) scale(.45)} 35%,72%{opacity:1;transform:rotateX(72deg) translateZ(-80px) scale(1.1)} }
@keyframes premiumCameraMove { 0%{transform:translateZ(-300px) rotateX(5deg)} 32%{transform:translateZ(55px) rotateX(-2deg)} 64%{transform:translateZ(0) rotateX(1deg)} 100%{transform:translateZ(-190px) rotateX(-4deg)} }
@keyframes premiumBeamSweep { 0%,100%{opacity:0} 22%{opacity:.42} 52%{opacity:.82} 80%{opacity:.16} }
@keyframes premiumRingPulse { 0%{opacity:0;transform:translate(-50%,-50%) rotateX(var(--ring-tilt)) translateZ(-20px) scale(.15)} 35%{opacity:.72} 100%{opacity:0;transform:translate(-50%,-50%) rotateX(var(--ring-tilt)) translateZ(140px) scale(var(--ring-scale))} }
@keyframes premiumObjectFloat { 0%,100%{transform:translateZ(70px) translateY(0) rotateY(-5deg)} 50%{transform:translateZ(92px) translateY(-9px) rotateY(8deg)} }
@keyframes premiumGlossMove { 0%,100%{opacity:.42;transform:translateZ(105px) translate(-7px,8px) rotate(-16deg)} 50%{opacity:.92;transform:translateZ(125px) translate(13px,-10px) rotate(-6deg)} }
@keyframes premiumWhale3d {
  0%{opacity:0;transform:translate3d(calc(-50% - 72vw),-5%,-520px) rotateY(62deg) rotateZ(-18deg) scale(.42)}
  18%{opacity:1;transform:translate3d(calc(-50% - 34vw),-55%,30px) rotateY(35deg) rotateZ(-8deg) scale(.8)}
  43%{opacity:1;transform:translate3d(-50%,-50%,110px) rotateY(-12deg) rotateZ(4deg) scale(1.08)}
  68%{opacity:1;transform:translate3d(calc(-50% + 22vw),-67%,40px) rotateY(-28deg) rotateZ(-4deg) scale(.96)}
  100%{opacity:0;transform:translate3d(calc(-50% + 74vw),-125%,-360px) rotateY(-70deg) rotateZ(13deg) scale(.48)}
}
@keyframes premiumHeart3d {
  0%{opacity:0;transform:translate3d(-50%,-40%,-550px) rotateY(210deg) scale(.15)}
  25%{opacity:1;transform:translate3d(-50%,-50%,90px) rotateY(-18deg) scale(1.18)}
  45%{transform:translate3d(-50%,-50%,145px) rotateY(14deg) scale(.94)}
  64%{transform:translate3d(-50%,-58%,115px) rotateY(-8deg) scale(1.2)}
  100%{opacity:0;transform:translate3d(-50%,-150%,-180px) rotateY(38deg) scale(.35)}
}
@keyframes premiumFirework3d {
  0%{opacity:0;transform:translate3d(-50%,45%,-520px) rotateX(55deg) scale(.12)}
  28%{opacity:1;transform:translate3d(-50%,-45%,60px) rotateX(-8deg) scale(.82)}
  49%{transform:translate3d(-50%,-52%,155px) rotateY(18deg) scale(1.2)}
  70%{opacity:1;transform:translate3d(-50%,-55%,70px) rotateY(-20deg) scale(.94)}
  100%{opacity:0;transform:translate3d(-50%,-80%,-250px) rotateZ(24deg) scale(1.55)}
}
@keyframes premiumConfetti3d {
  0%{opacity:0;transform:translate3d(-50%,20%,-480px) rotateY(-150deg) rotateX(35deg) scale(.18)}
  26%{opacity:1;transform:translate3d(-50%,-48%,100px) rotateY(18deg) rotateX(-4deg) scale(1.1)}
  48%{transform:translate3d(-50%,-55%,150px) rotateY(-15deg) rotateZ(7deg) scale(.98)}
  72%{opacity:1;transform:translate3d(-50%,-48%,70px) rotateY(22deg) rotateZ(-7deg) scale(1.12)}
  100%{opacity:0;transform:translate3d(-50%,-85%,-240px) rotateY(110deg) scale(.42)}
}
@keyframes premiumParticle3d {
  0%{opacity:0;transform:translate3d(0,55px,var(--z)) rotateX(0) rotateY(0) scale(.25)}
  24%{opacity:1}
  58%{opacity:.96;transform:translate3d(var(--drift),-22px,calc(var(--z) + 150px)) rotateX(190deg) rotateY(120deg) scale(1.16)}
  100%{opacity:0;transform:translate3d(var(--drift-back),-145px,var(--z)) rotateX(420deg) rotateY(310deg) scale(.42)}
}
@keyframes premiumTitle3d { 0%,14%,100%{opacity:0;transform:translate3d(-50%,28px,50px) scale(.9)} 32%,78%{opacity:1;transform:translate3d(-50%,0,110px) scale(1)} 90%{opacity:0;transform:translate3d(-50%,-12px,40px) scale(.95)} }

@media (min-width:601px) {
  .premium-effect-stage {
    border-radius: 40px;
    bottom: auto;
    height: min(900px,calc(100vh - 48px));
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(430px,calc(100vw - 48px));
  }
}
@media (max-width:600px) {
  .premium-effect-stage { height: 100dvh; }
  .premium-effect-object { height: 58vw; width: 58vw; }
  .premium-effect-stage.premium-effect-compact .premium-effect-atmosphere { filter: blur(12px) saturate(1.15); }
  .premium-effect-stage.premium-effect-compact .premium-effect-floor { filter: blur(5px); }
  .premium-effect-stage.premium-effect-compact .premium-effect-beam { filter: blur(7px); }
  .premium-effect-stage.premium-effect-compact .premium-effect-object-core { filter: drop-shadow(0 18px 14px rgba(0,10,31,.48)) drop-shadow(0 0 14px var(--fx-soft)); }
  .premium-effect-stage.premium-effect-compact .premium-effect-object.object-whale .premium-effect-object-core { filter: none; }
  .premium-effect-stage.premium-effect-compact .premium-effect-object-gloss { filter: blur(2px); mix-blend-mode: normal; }
  .premium-effect-stage.premium-effect-compact .premium-effect-particle { filter: drop-shadow(0 0 4px currentColor); text-shadow: 0 0 6px currentColor; }
}

/* Facebook-inspired personal profile and own-post timeline */
body.profile-post-dialog-open { overflow:hidden; }
.profile-social-page .phone-shell { background:#edf2f7; }
.social-profile-screen { display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding-top:42px; }
.social-profile-statusbar { background:#07182f;color:#fff; }
.social-profile-topbar { align-items:center;background:#fff;border-bottom:1px solid #dce3ea;display:grid;flex:0 0 52px;grid-template-columns:48px 1fr 48px;padding:0 8px;position:relative;z-index:8; }
.social-profile-topbar a { align-items:center;border-radius:50%;color:#142338;display:flex;font-size:28px;height:38px;justify-content:center;text-decoration:none;width:38px; }
.social-profile-topbar a:last-child { font-size:17px;justify-self:end; }
.social-profile-topbar h1 { font-size:17px;margin:0;text-align:center; }
.social-profile-scroll { flex:1;min-height:0;overflow-y:auto;padding-bottom:94px;scrollbar-width:none; }
.social-profile-scroll::-webkit-scrollbar { display:none; }
.social-profile-flash { margin:9px 11px; }
.social-profile-hero { background:#fff;border-bottom:1px solid #dce3ea;padding:0 15px 14px;position:relative; }
.social-profile-cover { background:linear-gradient(140deg,#061a37,#0c5591 53%,#18a5de);border-radius:0 0 22px 22px;height:166px;margin:0 -15px;overflow:hidden;position:relative; }
.social-profile-cover::before { background:radial-gradient(circle,rgba(255,255,255,.2) 0 2px,transparent 3px);background-size:22px 22px;content:"";inset:0;opacity:.55;position:absolute; }
.social-profile-cover span { background:rgba(255,255,255,.09);border-radius:50%;height:210px;position:absolute;right:-56px;top:-76px;width:210px; }
.social-profile-cover i { background:rgba(1,21,50,.24);border-radius:50%;bottom:-72px;height:150px;left:-46px;position:absolute;width:150px; }
.social-profile-cover-view { background:transparent;border:0;cursor:zoom-in;height:100%;inset:0;padding:0;position:absolute;width:100%;z-index:1; }
.social-profile-cover-view > img { display:block;height:100%;object-fit:cover;width:100%; }
.social-profile-cover-view:focus-visible { box-shadow:inset 0 0 0 3px #7fd5ff;outline:0; }
.social-profile-cover.has-image::after { background:linear-gradient(180deg,transparent 50%,rgba(3,17,34,.42));content:"";inset:0;pointer-events:none;position:absolute; }
.profile-cover-form { bottom:10px;margin:0;position:absolute;right:12px;z-index:3; }
.profile-cover-form label { align-items:center;background:rgba(5,19,36,.78);border:1px solid rgba(255,255,255,.35);border-radius:9px;color:#fff;cursor:pointer;display:flex;font-size:12px;gap:6px;padding:7px 10px; }
.profile-cover-form b { font-size:9px; }
.social-profile-avatar { align-items:center;background:linear-gradient(145deg,#dff5ff,#8fd5ff);border:5px solid #fff;border-radius:50%;box-shadow:0 5px 18px rgba(10,35,65,.2);color:#087fc5;display:flex;font-size:29px;font-weight:900;height:106px;justify-content:center;margin-top:-55px;overflow:visible;position:relative;width:106px;z-index:2; }
.social-profile-avatar > img { border-radius:50%;height:100%;object-fit:cover;overflow:hidden;width:100%; }
.social-profile-avatar > span { align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;overflow:hidden;width:100%; }
.social-profile-avatar label { align-items:center;background:#168fe6;border:3px solid #fff;border-radius:50%;bottom:1px;color:#fff;display:flex;font-size:14px;height:31px;justify-content:center;position:absolute;right:-1px;width:31px; }
.social-profile-identity { padding-top:9px; }
.social-profile-identity h2 { align-items:center;color:#10233d;display:flex;font-size:23px;gap:5px;line-height:1.15;margin:0; }
.social-profile-identity .copy-username { background:transparent;border:0;color:#1683c8;font:inherit;font-size:10px;font-weight:800;margin-top:5px;padding:0; }
.social-profile-identity .copy-username i { font-style:normal; }
.social-profile-identity p { color:#64758a;font-size:10px;line-height:1.45;margin:7px 0 0; }
.social-profile-actions { display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:12px; }
.social-profile-actions a,.social-profile-actions label { align-items:center;background:#e8eef4;border-radius:10px;color:#24364a;cursor:pointer;display:flex;font-size:10px;font-weight:900;height:38px;justify-content:center;text-decoration:none; }
.social-profile-actions a.primary,.social-profile-actions label.primary { background:#168fe6;color:#fff; }
.social-profile-stats { border-top:1px solid #e3e8ed;display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;padding-top:12px; }
.social-profile-stats div { border-right:1px solid #e3e8ed;text-align:center; }.social-profile-stats div:last-child { border-right:0; }
.social-profile-stats b,.social-profile-stats span { display:block; }.social-profile-stats b { color:#10233d;font-size:15px; }.social-profile-stats span { color:#8090a1;font-size:8px;margin-top:2px; }
.profile-inline-composer { align-items:center;background:#fff;border-bottom:1px solid #dce3ea;border-top:1px solid #dce3ea;display:flex;gap:8px;margin-top:9px;padding:11px 14px; }
.profile-inline-composer > span { align-items:center;background:linear-gradient(145deg,#dff5ff,#8fd5ff);border-radius:50%;color:#087fc5;display:flex;flex:0 0 40px;font-size:12px;font-weight:900;height:40px;justify-content:center;overflow:hidden; }
.profile-inline-composer > span img { height:100%;object-fit:cover;width:100%; }
.profile-inline-composer > button { background:#f5f7f9;border:1px solid #d4dce4;border-radius:999px;color:#5d6b7a;font:inherit;font-size:11px;height:40px;text-align:left; }
.profile-inline-composer > button:not(.profile-inline-photo) { flex:1;padding:0 14px; }
.profile-inline-composer > button.profile-inline-photo { align-items:center;color:#168fe6;display:flex;flex:0 0 40px;font-size:19px;justify-content:center;text-align:center;width:40px; }
.social-profile-about,.social-profile-editor,.social-profile-feed { background:#fff;border-bottom:1px solid #dce3ea;border-top:1px solid #dce3ea;margin-top:9px; }
.social-profile-about { padding:14px; }
.social-profile-about > header,.social-profile-feed > header { align-items:center;display:flex;justify-content:space-between; }
.social-profile-about header small,.social-profile-feed header small { color:#168fe6;font-size:7px;font-weight:900;letter-spacing:1.1px; }
.social-profile-about header h2,.social-profile-feed header h2 { color:#10233d;font-size:16px;margin:2px 0 0; }
.social-profile-about header a,.social-profile-feed header a,.social-profile-feed header button { background:#e7f4fd;border:0;border-radius:9px;color:#087fc6;font-size:9px;font-weight:900;padding:7px 10px;text-decoration:none; }
.social-profile-about ul { display:grid;gap:9px;list-style:none;margin:13px 0 0;padding:0; }
.social-profile-about li { align-items:center;display:flex;gap:10px;min-width:0; }
.social-profile-about li > span { align-items:center;background:#eaf5fd;border-radius:50%;color:#168fe6;display:flex;flex:0 0 35px;font-size:14px;height:35px;justify-content:center; }
.social-profile-about li div { min-width:0; }.social-profile-about li small,.social-profile-about li b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.social-profile-about li small { color:#8996a4;font-size:7px; }.social-profile-about li b { color:#283a4e;font-size:9px;margin-top:2px; }
.social-profile-editor { padding:0 14px; }
.social-profile-editor > summary { align-items:center;cursor:pointer;display:flex;gap:10px;list-style:none;min-height:62px; }
.social-profile-editor > summary::-webkit-details-marker { display:none; }
.social-profile-editor > summary > span { align-items:center;background:#eaf5fd;border-radius:50%;color:#168fe6;display:flex;flex:0 0 38px;height:38px;justify-content:center; }
.social-profile-editor > summary div { flex:1;min-width:0; }.social-profile-editor > summary b,.social-profile-editor > summary small { display:block; }.social-profile-editor > summary b { font-size:10px; }.social-profile-editor > summary small { color:#8391a0;font-size:7px;margin-top:3px; }.social-profile-editor > summary i { font-style:normal;transition:transform .2s; }
.social-profile-editor[open] > summary i { transform:rotate(180deg); }
.social-profile-editor .profile-form { border-top:1px solid #e3e8ed;padding:14px 0 18px; }
.social-profile-feed { padding:14px 0 6px; }
.social-profile-feed > header { padding:0 14px 13px; }
.profile-feed-card { background:#fff;border-bottom:1px solid #dfe5ea;border-top:1px solid #dfe5ea;margin-bottom:9px;overflow:visible;position:relative; }
.profile-feed-card > header { align-items:center;display:flex;gap:9px;padding:12px 14px 8px;position:relative; }
.profile-feed-avatar { align-items:center;background:#dff2ff;border-radius:50%;color:#087fc5;display:flex;flex:0 0 40px;font-size:11px;font-weight:900;height:40px;justify-content:center;overflow:hidden;width:40px; }
.profile-feed-avatar img { height:100%;object-fit:cover;width:100%; }
.profile-feed-card > header > div:nth-child(2) { flex:1;min-width:0; }.profile-feed-card h3 { align-items:center;color:#13263e;display:flex;font-size:11px;gap:4px;margin:0; }.profile-feed-card header small { color:#7f8e9d;display:block;font-size:7px;margin-top:3px; }
.profile-post-menu-wrap { position:relative; }.profile-post-menu-wrap > button { background:#edf2f6;border:0;border-radius:50%;color:#415267;font-size:17px;height:34px;width:34px; }
.profile-post-menu { background:#fff;border:1px solid #dce3e9;border-radius:14px;box-shadow:0 14px 38px rgba(8,27,49,.2);min-width:230px;overflow:hidden;position:absolute;right:0;top:39px;z-index:22; }
.profile-post-menu.hidden { display:none; }.profile-post-menu > button,.profile-post-menu form > button { align-items:center;background:#fff;border:0;border-bottom:1px solid #edf0f3;color:#1c2e42;display:flex;gap:10px;padding:10px 12px;text-align:left;width:100%; }
.profile-post-menu > button > span,.profile-post-menu form > button > span { align-items:center;background:#eaf4fc;border-radius:50%;color:#168fe6;display:flex;flex:0 0 34px;font-size:14px;height:34px;justify-content:center; }
.profile-post-menu b,.profile-post-menu small { display:block; }.profile-post-menu b { font-size:9px; }.profile-post-menu small { color:#8391a0;font-size:7px;margin-top:2px; }.profile-post-menu .danger button { color:#d7465a; }.profile-post-menu .danger button > span { background:#fff0f2;color:#d7465a; }
.profile-pinned-label { color:#1681c5;font-size:8px;font-weight:900;padding:0 14px 7px; }
.profile-post-context { display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 8px; }.profile-post-context span { background:#edf6fd;border-radius:999px;color:#347399;font-size:7px;font-weight:800;padding:5px 8px; }
.profile-feed-card > p { color:#28394d;font-size:11px;line-height:1.5;margin:0;padding:7px 14px 12px;overflow-wrap:anywhere; }
.profile-post-media { background:#eaf0f5;max-height:470px;overflow:hidden; }.profile-post-media img,.profile-post-media video { display:block;max-height:470px;object-fit:contain;width:100%; }
.profile-post-audio { align-items:center;background:linear-gradient(135deg,#102e56,#196e9e);border-radius:13px;color:#fff;display:flex;gap:8px;margin:8px 12px;padding:9px; }.profile-post-audio > span { font-size:18px; }.profile-post-audio > div { flex:1;min-width:0; }.profile-post-audio b,.profile-post-audio small { display:block;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.profile-post-audio audio { height:28px;max-width:125px; }
.profile-feed-card > footer { align-items:center;color:#708094;display:flex;font-size:8px;justify-content:space-between;padding:10px 14px; }.profile-feed-card > footer a { color:#52728c;text-decoration:none; }
.social-profile-empty { color:#75879a;padding:36px 20px 44px;text-align:center; }.social-profile-empty > span { align-items:center;background:#e7f4fd;border-radius:50%;color:#168fe6;display:flex;font-size:22px;height:58px;justify-content:center;margin:auto;width:58px; }.social-profile-empty h3 { color:#24374c;font-size:14px;margin:12px 0 5px; }.social-profile-empty p { font-size:9px; }.social-profile-empty a,.social-profile-empty button { background:#168fe6;border:0;border-radius:9px;color:#fff;display:inline-block;font-size:9px;font-weight:900;margin-top:8px;padding:9px 13px;text-decoration:none; }
.status-post > header h3 a { color:inherit;text-decoration:none; }
.status-author-avatar { text-decoration:none; }
.profile-post-dialog-layer { align-items:flex-end;background:rgba(4,12,22,.54);display:flex;inset:0;justify-content:center;position:fixed;z-index:1500; }.profile-post-dialog-layer.hidden { display:none; }.profile-post-dialog-backdrop { background:transparent;border:0;inset:0;position:absolute;width:100%; }
.profile-post-dialog { background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -14px 42px rgba(4,17,32,.25);max-width:430px;padding-bottom:max(18px,env(safe-area-inset-bottom));position:relative;width:100%;z-index:2; }
.profile-post-dialog > header { align-items:center;border-bottom:1px solid #e2e7ec;display:grid;grid-template-columns:48px 1fr 60px;min-height:55px;padding:0 8px; }.profile-post-dialog header h2 { font-size:15px;margin:0;text-align:center; }.profile-post-dialog header button { background:transparent;border:0;font:inherit;font-size:10px;font-weight:900; }.profile-post-dialog header button:first-child { font-size:24px; }.profile-post-dialog header button:last-child { color:#168fe6; }
.profile-post-dialog [data-profile-edit-panel] { padding:15px; }.profile-post-dialog [data-profile-edit-panel] label { color:#536476;font-size:8px;font-weight:900; }.profile-post-dialog textarea { border:1px solid #d7e0e7;border-radius:14px;box-sizing:border-box;display:block;font:inherit;font-size:16px;line-height:1.45;margin-top:7px;outline:0;padding:12px;resize:none;width:100%; }.profile-post-dialog textarea:focus { border-color:#168fe6;box-shadow:0 0 0 3px rgba(22,143,230,.12); }.profile-post-dialog [data-profile-edit-panel] > small { color:#8492a0;display:block;font-size:8px;margin-top:6px;text-align:right; }
.profile-post-dialog [data-profile-privacy-panel] { padding:12px 15px; }.profile-post-dialog [data-profile-privacy-panel] > p { color:#526375;font-size:9px;font-weight:800;margin:0 0 8px; }.profile-post-dialog [data-profile-privacy-panel] label { align-items:center;border-bottom:1px solid #e7ebef;display:flex;gap:10px;min-height:62px; }.profile-post-dialog [data-profile-privacy-panel] input { accent-color:#168fe6;order:3; }.profile-post-dialog [data-profile-privacy-panel] label > span { align-items:center;background:#e8f4fd;border-radius:50%;color:#168fe6;display:flex;flex:0 0 38px;height:38px;justify-content:center; }.profile-post-dialog [data-profile-privacy-panel] label > div { flex:1; }.profile-post-dialog [data-profile-privacy-panel] b,.profile-post-dialog [data-profile-privacy-panel] small { display:block; }.profile-post-dialog [data-profile-privacy-panel] b { font-size:10px; }.profile-post-dialog [data-profile-privacy-panel] small { color:#7c8c9b;font-size:7px;margin-top:3px; }
@media (max-width:600px) { .social-profile-screen { padding-top:max(42px,calc(env(safe-area-inset-top) + 32px)); }.profile-post-dialog { max-height:calc(100dvh - env(safe-area-inset-top));overflow-y:auto; }body.keyboard-visible .profile-post-dialog-layer { align-items:flex-start;height:var(--keyboard-viewport-height,100dvh);top:var(--keyboard-viewport-top,0); }.profile-post-menu { min-width:220px;right:-3px; } }

/* Compact home hero, Instagram-style stories, and complete account card */
.home-hero {
  min-height: 270px;
  padding-bottom: 12px;
}
.home-hero .search-box.premium-search {
  height: 48px;
  margin-top: 14px;
}
.home-stories {
  align-items: flex-start;
  display: flex;
  gap: 13px;
  margin: 0 -2px;
  min-height: 75px;
  overflow-x: auto;
  padding: 12px 2px 2px;
  position: relative;
  scrollbar-width: none;
  z-index: 3;
}
.home-stories::-webkit-scrollbar { display: none; }
.home-story {
  align-items: center;
  color: #c8dced;
  display: flex;
  flex: 0 0 58px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  text-decoration: none;
}
.home-story-ring {
  align-items: center;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 50%;
  display: flex;
  height: 51px;
  justify-content: center;
  padding: 3px;
  position: relative;
  width: 51px;
}
.home-story.has-story .home-story-ring {
  background: linear-gradient(135deg,#ffcb4d 2%,#ff3c8e 40%,#8458ff 70%,#2bc4ff);
  border: 0;
  box-shadow: 0 7px 18px rgba(2,16,34,.27);
}
.home-story-avatar {
  align-items: center;
  background: linear-gradient(145deg,#dff5ff,#73cdf7);
  border: 2px solid #0a315a;
  border-radius: 50%;
  color: #0873b9;
  display: flex;
  font-size: 10px;
  font-weight: 900;
  height: 45px;
  justify-content: center;
  overflow: hidden;
  width: 45px;
}
.home-story-avatar img { display: block; height: 100%; object-fit: cover; width: 100%; }
.home-story-ring > i {
  align-items: center;
  background: #1598ed;
  border: 2px solid #0a315a;
  border-radius: 50%;
  bottom: -2px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  height: 19px;
  justify-content: center;
  position: absolute;
  right: -2px;
  width: 19px;
}
.home-story-ring > i.story-count { background: #fff; color: #7650e9; font-size: 7px; }
.home-story > b {
  font-size: 7px;
  font-weight: 800;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-story-empty {
  align-items: center;
  align-self: center;
  color: rgba(213,231,245,.72);
  display: flex;
  font-size: 8px;
  line-height: 1.35;
  max-width: 130px;
  min-height: 51px;
  padding-left: 4px;
}
.home-screen > .section-heading { padding-top: 17px; }

.account-popover {
  max-height: min(640px,calc(100dvh - 120px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed;
  right: max(18px,calc((100vw - 430px) / 2 + 20px));
  scrollbar-width: none;
  top: max(82px,calc((100vh - 900px) / 2 + 88px));
  width: min(320px,calc(100vw - 36px));
  z-index: 950;
  -webkit-overflow-scrolling: touch;
}
.account-popover::-webkit-scrollbar { display: none; }
.home-header { z-index: 900; }

.premium-name-emoji {
  display: inline-block !important;
  line-height: 1 !important;
  margin-left: .28em !important;
  margin-top: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  vertical-align: -.08em;
  white-space: nowrap !important;
}
.conversation-person h1,
.account-popover-head strong,
.contact-profile-card h2,
.profile-identity-card h2 { white-space: nowrap; }

@media (max-width:600px) {
  .home-hero { min-height: 270px; padding-bottom: 12px; }
  .account-popover {
    right: 18px;
    top: max(74px,calc(env(safe-area-inset-top) + 66px));
  }
}

/* Readable mobile typography */
.app-page small { font-size: 10px; line-height: 1.4; }

/* Login and registration */
.form-intro > span { font-size: 9px; }
.form-intro p { font-size: 12px; line-height: 1.5; }
.field > span { font-size: 11px; }
.field-control input { font-size: 13px; }
.password-toggle { font-size: 10px; }
.auth-footer { font-size: 10px; line-height: 1.45; }
.flash { font-size: 11px; }

/* Home, stories and account menu */
.home-header small,
.section-heading > div small,
.contacts-heading small,
.page-header .page-title small { font-size: 9px; }
.search-box input { font-size: 13px; }
.home-story > b { font-size: 9px; }
.home-story-empty { font-size: 10px; }
.section-heading h2 { font-size: 20px; }
.section-heading > span { font-size: 9px; }
.home-screen .chat-line h3 { font-size: 15px; }
.home-screen .chat-line time { font-size: 10px; }
.home-screen .chat-line p { font-size: 12px; line-height: 1.4; }
.unread-badge { font-size: 9px; }
.bottom-nav a { font-size: 9px; }
.account-popover-head strong { font-size: 14px; }
.account-popover-head em { font-size: 10px; }
.account-popover a,
.account-popover button { font-size: 11px; }
.account-popover a small,
.account-popover button small { font-size: 9px; }

/* Contacts */
.page-title p,
.contacts-heading p { font-size: 11px; line-height: 1.45; }
.contacts-heading h2 { font-size: 19px; }
.contacts-heading > span { font-size: 10px; }
.contact-copy h3 { font-size: 14px; }
.contact-copy p,
.contact-copy small { font-size: 10px; line-height: 1.4; }
.contact-card button,
.contact-card .contact-actions button { font-size: 10px; }
.empty-kicker { font-size: 9px; }
.empty-contacts h3 { font-size: 17px; }
.empty-contacts p { font-size: 11px; }

/* Conversation */
.conversation-person h1 { font-size: 16px; }
.conversation-person span { font-size: 10px; line-height: 1.35; }
.day-label { font-size: 10px; }
.group-sender-name { font-size: 10px; }
.message-bubble p { font-size: 13px; line-height: 1.55; }
.message-bubble span,
.message-meta { font-size: 9px; }
.message-receipt { font-size: 10px; }
.message-composer input { font-size: 13px; }
.message-file-attachment b { font-size: 10px; }
.message-file-attachment small { font-size: 9px; }
.message-reactions b { font-size: 9px; }
.conversation-action-head small { font-size: 9px; }
.conversation-action-head h2 { font-size: 18px; }
.conversation-action-head p,
.conversation-action-grid small,
.forward-targets small,
.blocked-conversation-notice small { font-size: 9px; }
.conversation-action-grid b,
.forward-targets b,
.blocked-conversation-notice b { font-size: 11px; }
.conversation-menu-popover button,
.conversation-menu-popover a { font-size: 11px; }
.conversation-menu-popover small { font-size: 9px; }

/* Status composer and feed */
.status-page-header small { font-size: 9px; }
.status-page-header h1 { font-size: 27px; }
.status-page-header p { font-size: 11px; line-height: 1.45; }
.status-composer-head small { font-size: 9px; }
.status-composer-head h2 { font-size: 17px; }
.status-composer-head p { font-size: 10px; line-height: 1.4; }
.status-text-control textarea { font-size: 13px; line-height: 1.55; }
.status-text-control > span { font-size: 9px; }
.status-image-button,
.status-publish { font-size: 10px; }
.status-privacy { font-size: 10px; line-height: 1.45; }
.status-section-heading small { font-size: 9px; }
.status-section-heading h2 { font-size: 19px; }
.status-section-heading > span { font-size: 10px; }
.status-post > header h3 { font-size: 13px; }
.status-post > header time { font-size: 9px; }
.status-expiry { font-size: 8px; }
.status-post > p { font-size: 13px; line-height: 1.6; }
.status-post.text-only > p { font-size: 20px; }
.status-post > footer { font-size: 9px; line-height: 1.4; }
.status-social-actions button b,
.status-comment-count { font-size: 10px; }
.status-comment-avatar { font-size: 9px; }
.status-comment-name { font-size: 11px; }
.status-comment p { font-size: 11px; line-height: 1.5; }
.status-comment-meta > small,
.status-comment-meta > button,
.status-comment-reaction-form button { font-size: 9px; }
.status-comment-form input { font-size: 11px; }
.status-reply-context { font-size: 9px; }
.status-view-reactions { font-size: 9px !important; }
.status-reaction-sheet > header small { font-size: 9px; }
.status-reaction-sheet > header h2 { font-size: 17px; }
.status-reaction-people h3,
.status-reaction-people p,
.status-reaction-person b { font-size: 10px; }
.status-action-toast { font-size: 10px; }
.empty-status h3 { font-size: 15px; }
.empty-status p,
.empty-status a { font-size: 10px; }

/* Profile, contact details and group pages */
.profile-header small,
.profile-form-intro small,
.group-info-topbar small,
.group-section-heading small,
.group-member-summary > small { font-size: 9px; }
.profile-identity p,
.profile-form-intro p { font-size: 11px; }
.profile-field > span,
.group-name-field > span,
.group-edit-form > label > span { font-size: 10px; }
.profile-field input,
.profile-field textarea,
.group-name-field input,
.group-edit-form input,
.group-edit-form textarea,
.group-edit-form select { font-size: 12px; }
.profile-field > small,
.avatar-hint small,
.group-name-field > small,
.group-edit-form label small { font-size: 9px; }
.avatar-hint b { font-size: 10px; }
.profile-save,
.group-next,
.group-final-actions button,
.group-edit-form > button,
.group-add-form > button,
.group-permission-card > button { font-size: 10px; }
.group-identity-card > p,
.group-description { font-size: 11px; }
.group-section-heading h2 { font-size: 16px; }
.group-section-heading > span,
.group-role-badge { font-size: 9px; }
.group-permission-intro,
.group-permission-summary p,
.group-info-empty { font-size: 10px; }
.group-permission-row b,
.group-setting-row span b,
.group-add-list b,
.member-copy b { font-size: 11px; }
.group-permission-row small,
.group-setting-row span small,
.group-add-list small,
.member-copy small { font-size: 9px; line-height: 1.4; }
.group-setting-row strong { font-size: 10px; }
.group-member-row > em,
.group-member-row form select,
.group-member-row form button { font-size: 8px; }

@media (max-width: 360px) {
  .message-bubble p { font-size: 12px; }
  .status-post > p { font-size: 12px; }
  .account-popover { width: calc(100vw - 24px); }
}

/* Separate permanent Status posts and Instagram-style Story */
.status-delete-form { flex: 0 0 auto; margin: 0; }
.status-delete-form button {
  align-items: center;
  background: #fff0f2;
  border: 1px solid #ffd6dc;
  border-radius: 10px;
  color: #d8455b;
  cursor: pointer;
  display: flex;
  height: 31px;
  justify-content: center;
  width: 31px;
}
.status-delete-form svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.status-post.text-only .status-delete-form button { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; }

.home-story-slot { flex: 0 0 58px; position: relative; }
.home-story-slot .home-story { width: 58px; }
.home-story {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.home-story-add {
  align-items: center;
  background: #1598ed;
  border: 2px solid #0a315a;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: 1px;
  text-decoration: none;
  top: 34px;
  width: 20px;
  z-index: 4;
}

.story-manager-screen { background: #f2f6fa; height: 100%; overflow: hidden; }
.story-manager-header {
  align-items: center;
  background: linear-gradient(145deg,#06172e 0%,#0b315b 62%,#0d4a80 100%);
  color: #fff;
  display: flex;
  gap: 11px;
  min-height: 155px;
  padding: 48px 18px 22px;
}
.story-manager-header .back-button { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; display: flex; flex: 0 0 39px; height: 39px; justify-content: center; margin: 0; width: 39px; }
.story-manager-header .back-button svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.story-manager-header > div { flex: 1; min-width: 0; }
.story-manager-header small { color: #79ccff; display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.35px; }
.story-manager-header h1 { font-size: 24px; letter-spacing: -.5px; margin: 3px 0 0; }
.story-manager-header p { color: #afc8df; font-size: 11px; line-height: 1.4; margin: 4px 0 0; }
.story-view-own { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 900; padding: 8px 10px; text-decoration: none; }
.story-manager-content { height: calc(100% - 155px); overflow-y: auto; padding: 16px 15px 34px; scrollbar-width: none; }
.story-manager-content::-webkit-scrollbar { display: none; }
.story-composer .status-publish { flex-basis: 132px; }
.story-manager-list { display: grid; gap: 9px; }
.story-manager-card { background: #fff; border: 1px solid #e1e9ef; border-radius: 18px; box-shadow: 0 8px 22px rgba(28,61,89,.07); display: grid; gap: 8px; min-height: 82px; padding: 10px; }
.story-manager-main { align-items: center; color: inherit; display: flex; gap: 11px; min-width: 0; text-decoration: none; }
.story-manager-thumb { background: #e6edf3; border-radius: 13px; flex: 0 0 62px; height: 62px; overflow: hidden; }
.story-manager-thumb img { height: 100%; object-fit: cover; width: 100%; }
.story-manager-thumb.text-only { align-items: center; background: linear-gradient(145deg,#0877c7,#9d5ae0); color: #fff; display: flex; font-size: 8px; font-weight: 800; justify-content: center; line-height: 1.3; padding: 7px; text-align: center; }
.story-manager-copy { flex: 1; min-width: 0; }
.story-manager-copy b { color: #20364d; display: block; font-size: 12px; }
.story-manager-copy p { color: #708395; font-size: 10px; line-height: 1.4; margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-manager-copy small { color: #1688d4; font-size: 9px; }
.story-manager-stats { color: #617a91; display: flex; font-size: 9px; font-weight: 900; gap: 10px; padding-left: 73px; }
.story-manager-actions { border-top: 1px solid #edf2f6; display: grid; gap: 7px; grid-template-columns: 1fr 1fr; padding-top: 8px; }
.story-manager-actions > a,.story-manager-actions button { align-items: center; border: 0; border-radius: 11px; cursor: pointer; display: flex; font: inherit; font-size: 10px; font-weight: 900; height: 36px; justify-content: center; text-decoration: none; width: 100%; }
.story-manager-actions > a { background: #e8f5ff; color: #0b87d6; }
.story-manager-actions form { margin: 0; }
.story-manager-actions button { background: #fff0f2; color: #d9435a; }
.story-manager-actions button span { font-size: 15px; margin-right: 5px; }

/* Instagram-inspired Story creator */
body.story-editor-open { overflow: hidden; }
.story-create-layer {
  align-items: center;
  background: rgba(0,5,12,.92);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1350;
}
.story-create-layer.hidden { display: none; }
.story-create-editor {
  background: #050b14;
  color: #fff;
  height: min(920px,100dvh);
  max-width: 430px;
  overflow: hidden;
  position: relative;
  width: min(430px,100vw);
}
.story-editor-header {
  align-items: center;
  background: linear-gradient(180deg,rgba(0,5,13,.92),rgba(0,5,13,.08));
  display: flex;
  gap: 10px;
  left: 0;
  padding: max(20px,calc(env(safe-area-inset-top) + 10px)) 14px 24px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 8;
}
.story-editor-header > div { flex: 1; min-width: 0; }
.story-editor-header small { color: #7dceff; display: block; font-size: 8px; font-weight: 900; letter-spacing: 1.4px; }
.story-editor-header b { display: block; font-size: 16px; margin-top: 2px; }
.story-editor-close,.story-editor-change {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
}
.story-editor-close { border-radius: 50%; flex: 0 0 39px; font-size: 26px; height: 39px; line-height: 1; width: 39px; }
.story-editor-change { border-radius: 13px; font-size: 10px; font-weight: 850; padding: 9px 11px; }
.story-editor-stage { height: 100%; overflow: hidden; position: relative; width: 100%; }
.story-editor-stage canvas { -webkit-touch-callout: none; -webkit-user-select: none; cursor: grab; display: block; height: 100%; object-fit: contain; touch-action: none; user-select: none; width: 100%; }
.story-editor-stage canvas.dragging-element { cursor: grabbing; }
.story-editor-stage canvas.drawing { cursor: crosshair; }
.story-editor-gif-overlay { filter: drop-shadow(0 9px 14px rgba(0,0,0,.28)); object-fit: contain; pointer-events: none; position: absolute; transform-origin: center; z-index: 4; }
.story-editor-gif-overlay.hidden { display: none; }
.story-editor-trash {
  align-items: center;
  background: rgba(12,18,30,.88);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  bottom: 136px;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  left: 50%;
  min-width: 174px;
  opacity: 0;
  padding: 10px 16px 9px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%,18px) scale(.84);
  transition: opacity .16s ease,transform .2s cubic-bezier(.2,.9,.25,1.25),background .16s ease,border-color .16s ease;
  visibility: hidden;
  z-index: 19;
}
.story-editor-trash.show { opacity: 1; transform: translate(-50%,0) scale(1); visibility: visible; }
.story-editor-trash span { align-items: center; background: rgba(255,255,255,.14); border-radius: 50%; display: flex; height: 42px; justify-content: center; transition: .16s ease; width: 42px; }
.story-editor-trash svg { height: 25px; width: 25px; }
.story-editor-trash b { font-size: 10px; font-weight: 850; letter-spacing: .01em; white-space: nowrap; }
.story-editor-trash.armed { background: rgba(232,54,86,.97); border-color: rgba(255,255,255,.72); transform: translate(-50%,-5px) scale(1.09); }
.story-editor-trash.armed span { background: #fff; color: #e83656; transform: rotate(-6deg) scale(1.08); }
.story-editor-tools {
  display: grid;
  gap: 8px;
  position: absolute;
  right: 9px;
  top: max(92px,calc(env(safe-area-inset-top) + 76px));
  z-index: 8;
}
.story-editor-tools button {
  align-items: center;
  background: rgba(9,15,26,.64);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 43px;
  justify-content: center;
  position: relative;
  width: 43px;
}
.story-editor-tools button > span { font-size: 18px; font-weight: 900; line-height: 1; }
.story-editor-tools button > b {
  background: rgba(5,10,19,.76);
  border-radius: 7px;
  font-size: 8px;
  font-weight: 850;
  opacity: 0;
  padding: 4px 6px;
  pointer-events: none;
  position: absolute;
  right: 48px;
  transition: opacity .16s ease;
  white-space: nowrap;
}
.story-editor-tools button:hover > b,.story-editor-tools button:focus-visible > b,.story-editor-tools button.active > b { opacity: 1; }
.story-editor-tools button.active { background: #168fe6; border-color: #7bcaff; box-shadow: 0 8px 24px rgba(0,135,229,.35); }
.story-editor-footer {
  background: linear-gradient(180deg,transparent,rgba(1,7,16,.96) 25%);
  bottom: 0;
  display: grid;
  gap: 9px;
  left: 0;
  padding: 34px 13px max(13px,env(safe-area-inset-bottom));
  position: absolute;
  right: 0;
  z-index: 9;
}
.story-caption-control {
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 21px;
  display: flex;
  gap: 8px;
  min-height: 43px;
  padding: 0 13px;
}
.story-caption-control > span { color: #91d3ff; font-size: 16px; }
.story-caption-control input { background: transparent; border: 0; color: #fff; flex: 1; font: inherit; min-width: 0; outline: 0; }
.story-caption-control input::placeholder { color: rgba(255,255,255,.72); }
.story-editor-publish {
  align-items: center;
  background: linear-gradient(135deg,#168fe6,#6658ed);
  border: 0;
  border-radius: 19px;
  box-shadow: 0 12px 28px rgba(21,129,227,.26);
  color: #fff;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 45px;
  padding: 0 16px;
  position: relative;
}
.story-editor-publish b { align-items: center; background: rgba(255,255,255,.18); border-radius: 50%; display: flex; height: 30px; justify-content: center; position: absolute; right: 8px; width: 30px; }
.story-editor-publish:disabled { cursor: wait; opacity: .6; }
.story-editor-message { background: #0c6eae; border-radius: 9px; font-size: 10px; margin: 0; padding: 7px 9px; text-align: center; }
.story-editor-message.error { background: #922d42; }
.story-editor-panel {
  background: rgba(8,15,27,.94);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  bottom: 129px;
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
  left: 12px;
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  position: absolute;
  right: 62px;
  z-index: 10;
}
.story-editor-panel.hidden { display: none; }
.story-editor-panel-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 9px; }
.story-editor-panel-title b { font-size: 12px; }
.story-editor-panel-title > button { background: rgba(255,255,255,.1); border: 0; border-radius: 50%; color: #fff; font-size: 18px; height: 27px; width: 27px; }
.story-editor-panel > input,.story-mention-input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  min-height: 43px;
  outline: 0;
  padding: 0 12px;
  width: 100%;
}
.story-mention-input { align-items: center; gap: 5px; }
.story-mention-input input { background: transparent; border: 0; color: #fff; flex: 1; font: inherit; min-width: 0; outline: 0; }
.story-editor-panel > small { color: #9eb0c1; display: block; font-size: 9px; margin-top: 8px; }
.story-text-edit-mode {
  background: linear-gradient(180deg,rgba(1,5,10,.96),rgba(5,10,18,.84));
  border: 0;
  border-radius: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  inset: 0;
  max-height: none;
  overflow: hidden;
  padding: max(17px,env(safe-area-inset-top)) 13px max(14px,env(safe-area-inset-bottom));
  right: 0;
  z-index: 22;
}
.story-text-edit-mode.hidden { display: none; }
.story-text-edit-header { align-items: center; display: flex; flex: 0 0 auto; justify-content: space-between; min-height: 44px; }
.story-text-edit-header b { font-size: 13px; }
.story-text-edit-header button { background: transparent; border: 0; color: #fff; font: inherit; font-size: 12px; font-weight: 900; padding: 8px; }
.story-text-edit-header button:first-child { background: rgba(255,255,255,.11); border-radius: 50%; font-size: 24px; height: 40px; line-height: 1; width: 40px; }
.story-text-input-stage { align-items: center; display: flex; flex: 1 1 auto; min-height: 120px; padding: 8px 22px 4px 35px; position: relative; }
.story-text-input-stage textarea {
  background: rgba(3,8,16,.66);
  border: 0;
  border-radius: 17px;
  color: #fff;
  font-family: Inter,Arial,sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  max-height: 190px;
  outline: 0;
  padding: 12px 14px;
  resize: none;
  text-align: center;
  width: 100%;
}
.story-text-input-stage textarea::placeholder { color: rgba(255,255,255,.5); }
.story-text-input-stage input[type="range"] {
  appearance: none;
  background: transparent;
  height: 30px;
  left: -56px;
  position: absolute;
  top: 50%;
  touch-action: none;
  transform: translateY(-50%) rotate(-90deg);
  width: 160px;
  z-index: 2;
}
.story-text-input-stage input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,.38); border-radius: 3px; height: 4px; }
.story-text-input-stage input[type="range"]::-webkit-slider-thumb { appearance: none; background: #fff; border: 2px solid rgba(12,20,32,.28); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.34); height: 22px; margin-top: -9px; width: 22px; }
.story-text-input-stage input[type="range"]::-moz-range-track { background: rgba(255,255,255,.38); border-radius: 3px; height: 4px; }
.story-text-input-stage input[type="range"]::-moz-range-thumb { background: #fff; border: 2px solid rgba(12,20,32,.28); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.34); height: 20px; width: 20px; }
.story-font-picker { display: flex; flex: 0 0 auto; gap: 7px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.story-font-picker::-webkit-scrollbar { display: none; }
.story-font-picker button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; flex: 0 0 auto; font-size: 11px; min-height: 42px; padding: 0 15px; }
.story-font-picker button.active { background: #fff; border-color: #fff; color: #0c1420; }
.story-font-picker button[data-story-font="classic"] { font-family: Georgia,serif; font-weight: 700; }
.story-font-picker button[data-story-font="signature"] { font-family: "Brush Script MT","Segoe Script",cursive; font-size: 16px; font-style: italic; }
.story-font-picker button[data-story-font="strong"] { font-family: Impact,"Arial Black",sans-serif; }
.story-font-picker button[data-story-font="typewriter"] { font-family: "Courier New",monospace; }
.story-font-picker button[data-story-font="neon"] { color: #7ce8ff; font-family: "Trebuchet MS",Arial,sans-serif; font-weight: 900; text-shadow: 0 0 6px currentColor; }
.story-font-picker button[data-story-font="editorial"] { font-family: "Palatino Linotype","Book Antiqua",serif; font-style: italic; font-weight: 700; }
.story-font-picker button[data-story-font="rounded"] { font-family: "Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight: 800; }
.story-font-picker button[data-story-font="elegant"] { font-family: Didot,"Bodoni MT",Georgia,serif; letter-spacing: .6px; }
.story-font-picker button[data-story-font="poster"] { font-family: Impact,Haettenschweiler,sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.story-font-picker button[data-story-font="comic"] { font-family: "Comic Sans MS","Segoe Print",cursive; font-weight: 700; }
.story-font-picker button[data-story-font="literature"] { font-family: Garamond,"Times New Roman",serif; font-size: 14px; font-style: italic; }
.story-font-picker button.active[data-story-font="neon"] { background: #101928; color: #7ce8ff; }
.story-text-format-row { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; display: flex; flex: 0 0 auto; gap: 8px; padding: 8px; }
.story-text-format-row > button,.story-custom-color { align-items: center; background: rgba(255,255,255,.1); border: 0; border-radius: 10px; color: #fff; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; position: relative; }
.story-text-format-row > button[data-mode="light"] { background: #fff; color: #101722; }
.story-text-format-row > button[data-mode="none"] { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.story-custom-color { background: conic-gradient(#f33,#fc3,#4d6,#3cf,#65f,#e4f,#f33); }
.story-custom-color span { align-items: center; background: #111927; border-radius: 50%; display: flex; height: 25px; justify-content: center; width: 25px; }
.story-custom-color input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.story-text-format-row .story-color-row { flex: 1; flex-wrap: nowrap; margin: 0; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.story-text-format-row .story-color-row > button { flex: 0 0 25px; height: 25px; width: 25px; }
.story-text-shortcuts { align-items: center; display: flex; flex: 0 0 auto; gap: 9px; padding-top: 10px; }
.story-text-shortcuts button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; flex: 0 0 auto; font-size: 10px; font-weight: 850; padding: 9px 11px; }
.story-text-shortcuts span { color: #a9b7c6; font-size: 8px; line-height: 1.35; }
.story-color-row,.story-draw-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.story-color-row > button,.story-draw-controls > button:not(.story-draw-undo) {
  background: var(--swatch);
  border: 2px solid rgba(255,255,255,.48);
  border-radius: 50%;
  height: 27px;
  width: 27px;
}
.story-color-row > button.active,.story-draw-controls > button.active { box-shadow: 0 0 0 3px #168fe6; }
.story-draw-undo { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #fff; font-size: 9px; font-weight: 800; margin-left: auto; padding: 7px 9px; }
.story-sticker-grid { display: grid; gap: 7px; grid-template-columns: repeat(6,1fr); }
.story-sticker-grid button { background: rgba(255,255,255,.08); border: 1px solid transparent; border-radius: 11px; font-size: 24px; height: 43px; }
.story-sticker-grid button.active { background: rgba(22,143,230,.28); border-color: #50b7f7; }
.story-effect-row { display: flex; gap: 9px; overflow-x: auto; padding: 3px 1px; scrollbar-width: none; }
.story-effect-row button { background: transparent; border: 0; color: #fff; display: grid; flex: 0 0 50px; gap: 4px; justify-items: center; }
.story-effect-row i { background: linear-gradient(135deg,#2b72ad,#f1b36b); border: 2px solid transparent; border-radius: 12px; display: block; height: 46px; width: 46px; }
.story-effect-row button.active i { border-color: #fff; box-shadow: 0 0 0 2px #168fe6; }
.story-effect-row span { font-size: 8px; }
.story-effect-row .effect-vivid { filter: saturate(1.6) contrast(1.1); }
.story-effect-row .effect-warm { filter: sepia(.35) saturate(1.25); }
.story-effect-row .effect-cool { filter: saturate(1.1) hue-rotate(15deg); }
.story-effect-row .effect-mono { filter: grayscale(1) contrast(1.1); }
.story-effect-row .effect-film { filter: contrast(1.2) saturate(.75) sepia(.2); }
.story-effect-row .effect-fade { filter: contrast(.82) saturate(.7) brightness(1.12); }
.story-effect-row .effect-glow { filter: saturate(1.45) brightness(1.12); }
.story-more-actions { display: grid; gap: 7px; }
.story-more-actions button,.story-more-actions a { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #fff; font: inherit; font-size: 10px; font-weight: 800; padding: 10px; text-align: left; text-decoration: none; }
.story-editor-audio-chip {
  align-items: center;
  background: rgba(6,20,37,.82);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  display: flex;
  gap: 9px;
  left: 13px;
  max-width: calc(100% - 82px);
  padding: 8px 9px;
  position: absolute;
  top: max(91px,calc(env(safe-area-inset-top) + 76px));
  z-index: 7;
}
.story-editor-audio-chip.hidden { display: none; }
.story-editor-audio-chip > span { align-items: center; background: #168fe6; border-radius: 50%; display: flex; flex: 0 0 30px; height: 30px; justify-content: center; }
.story-editor-audio-chip > div { min-width: 0; }
.story-editor-audio-chip b,.story-editor-audio-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-editor-audio-chip b { font-size: 10px; }
.story-editor-audio-chip small { color: #a8bdd0; font-size: 7px; margin-top: 2px; }
.story-editor-audio-chip > button { background: transparent; border: 0; color: #fff; font-size: 18px; }
.story-editor-hint { background: rgba(4,13,24,.78); border-radius: 14px; bottom: 150px; font-size: 10px; left: 50%; opacity: 0; padding: 8px 11px; pointer-events: none; position: absolute; transform: translate(-50%,10px); transition: .18s ease; z-index: 7; }
.story-editor-hint.show { opacity: 1; transform: translate(-50%,0); }

/* Full Story composer: compact chrome, smart background and interactive sticker tray. */
.story-editor-header { justify-content: space-between; pointer-events: none; }
.story-editor-header > * { pointer-events: auto; }
.story-editor-header-actions { display: flex; flex: 0 0 auto !important; gap: 8px; margin-left: auto; }
.story-editor-header-actions button {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(9,14,23,.62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 17px;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.story-editor-tools { max-height: calc(100% - 260px); overflow-y: auto; padding-left: 50px; scrollbar-width: none; }
.story-editor-tools::-webkit-scrollbar { display: none; }
.story-editor-tools button { backdrop-filter: blur(11px); box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.story-editor-footer { gap: 10px; padding-top: 58px; }
.story-caption-control { backdrop-filter: blur(14px); }
.story-share-options { align-items: center; display: flex; gap: 8px; }
.story-share-options > button:not(.story-editor-publish) {
  align-items: center;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  color: #fff;
  display: flex;
  flex: 1;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
}
.story-share-options > button:not(.story-editor-publish) span { color: #fff; font-size: 13px; }
.story-share-options > button:not(.story-editor-publish) b { font-size: 10px; white-space: nowrap; }
.story-share-options > button[data-story-audience="close_friends"] span { color: #39df74; }
.story-share-options > button.active { background: #fff; color: #10141b; }
.story-share-options > button.active span { color: #1594e7; }
.story-share-options > button[data-story-audience="close_friends"].active span { color: #18b953; }
.story-editor-publish { border-radius: 50%; flex: 0 0 45px; font-size: 22px; height: 45px; min-height: 45px; padding: 0; width: 45px; }
.story-editor-publish b,.story-editor-publish span { display: none; }
.story-editor-panel[data-story-panel="stickers"] {
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  background: linear-gradient(180deg,rgba(44,35,36,.84),rgba(18,20,25,.96));
  border: 1px solid rgba(255,255,255,.13);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  bottom: 0;
  box-shadow: 0 -18px 52px rgba(0,0,0,.32);
  left: 0;
  max-height: min(700px,78%);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 14px max(20px,env(safe-area-inset-bottom));
  right: 0;
  scrollbar-width: none;
}
.story-editor-panel[data-story-panel="stickers"]::-webkit-scrollbar { display: none; }
.story-sticker-sheet-handle {
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  height: 4px;
  margin: 0 auto 13px;
  width: 36px;
}
.story-sticker-sheet-close {
  align-items: center;
  background: rgba(17,18,22,.56);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font: inherit;
  font-size: 19px;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 8px;
  width: 34px;
  z-index: 2;
}
.story-sticker-search {
  align-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 19px;
  display: flex;
  gap: 10px;
  margin: 0 42px 17px 0;
  min-height: 52px;
  padding: 0 16px;
}
.story-sticker-search span { color: rgba(255,255,255,.9); font-size: 23px; }
.story-sticker-search input { background: transparent; border: 0; color: #fff; flex: 1; font: inherit; font-size: 17px; min-width: 0; outline: 0; }
.story-sticker-search input::placeholder { color: rgba(255,255,255,.72); }
.story-widget-grid {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 8px;
  justify-content: center;
  margin: 0 auto 5px;
  max-width: 430px;
}
.story-widget-grid button {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
  color: #111318;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 7px;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
}
.story-widget-grid button:active { transform: scale(.96); }
.story-widget-grid button span { color: #fd2f86; font-size: 20px; font-weight: 900; line-height: 1; }
.story-widget-grid button:nth-child(4n+1) span { color: #7b3ff2; }
.story-widget-grid button:nth-child(4n+2) span { color: #ff6a00; }
.story-widget-grid button:nth-child(4n+3) span { color: #ef1779; }
.story-widget-grid button:nth-child(4n+4) span { color: #07b86b; }
.story-widget-grid button b { font-size: 14px; font-weight: 760; letter-spacing: -.15px; white-space: nowrap; }
.story-sticker-section-label {
  color: rgba(255,255,255,.72) !important;
  display: block;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .7px;
  margin: 19px 3px 9px !important;
  text-transform: uppercase;
}
.story-sticker-trending {
  column-count: 3;
  column-gap: 8px;
  min-height: 0;
}
.story-sticker-trending:empty { display: none; }
.story-sticker-trending button {
  background: transparent;
  border: 0;
  break-inside: avoid;
  display: block;
  margin: 0 0 8px;
  padding: 0;
  width: 100%;
}
.story-sticker-trending img {
  display: block;
  height: auto;
  max-height: 118px;
  object-fit: contain;
  width: 100%;
}
.story-editor-panel[data-story-panel="stickers"] .story-sticker-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6,1fr);
}
.story-editor-panel[data-story-panel="stickers"] .story-sticker-grid button {
  background: rgba(255,255,255,.07);
  border: 0;
  border-radius: 12px;
  font-size: 24px;
  min-height: 48px;
}
.story-location-panel {
  background: #0d1118;
  border: 0;
  border-radius: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  inset: 0;
  max-height: none;
  overflow: hidden;
  padding: max(18px,env(safe-area-inset-top)) 17px max(15px,env(safe-area-inset-bottom));
  right: 0;
  z-index: 26;
}
.story-location-panel.hidden { display: none; }
.story-location-header { align-items: center; display: grid; flex: 0 0 auto; grid-template-columns: 42px 1fr 42px; min-height: 48px; }
.story-location-header b { font-size: 15px; text-align: center; }
.story-location-header button { align-items: center; background: #252a32; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; color: #fff; display: flex; font: inherit; font-size: 22px; height: 40px; justify-content: center; width: 40px; }
.story-location-header .story-location-current { color: #9edaff; font-size: 19px; transform: rotate(-45deg); }
.story-location-intro { flex: 0 0 auto; padding: 21px 8px 16px; text-align: center; }
.story-location-intro strong { display: block; font-size: 14px; }
.story-location-intro p { color: #aab4c2; font-size: 10px; line-height: 1.45; margin: 7px auto 0; max-width: 310px; }
.story-location-search { align-items: center; background: #292e36; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; display: flex; flex: 0 0 auto; gap: 8px; min-height: 48px; padding: 0 7px 0 13px; }
.story-location-search > span { color: #aeb8c6; font-size: 21px; }
.story-location-search input { background: transparent; border: 0; color: #fff; flex: 1; font: inherit; font-size: 12px; min-width: 0; outline: 0; }
.story-location-search input::placeholder { color: #8f98a5; }
.story-location-search button { background: #1a92e6; border: 0; border-radius: 12px; color: #fff; font: inherit; font-size: 9px; font-weight: 900; min-height: 34px; padding: 0 13px; }
.story-location-status { color: #9ba7b6; flex: 0 0 auto; font-size: 9px; line-height: 1.4; margin: 11px 5px 7px; }
.story-location-status[data-state="loading"] { color: #84cfff; }
.story-location-status[data-state="success"] { color: #72dca1; }
.story-location-status[data-state="error"] { color: #ff9cab; }
.story-location-results { flex: 1 1 auto; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; padding: 0 1px; }
.story-location-results button { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; display: block; padding: 13px 9px; text-align: left; width: 100%; }
.story-location-results button.active { background: rgba(29,151,232,.16); border-color: rgba(74,185,255,.55); border-radius: 13px; }
.story-location-results strong { display: block; font-size: 13px; font-weight: 650; }
.story-location-results small { color: #98a3b1; display: block; font-size: 9px; line-height: 1.35; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-location-privacy { color: #7f8b99 !important; flex: 0 0 auto; font-size: 7.5px !important; line-height: 1.35; margin: 7px 4px 3px !important; }
.story-location-attribution { color: #77bce9; flex: 0 0 auto; font-size: 7.5px; margin: 0 4px 8px; text-decoration: none; }
.story-location-add { background: linear-gradient(135deg,#2975f0,#4332d4); border: 0; border-radius: 15px; color: #fff; flex: 0 0 auto; font: inherit; font-size: 11px; font-weight: 900; min-height: 48px; }
.story-location-add:disabled { filter: grayscale(.5); opacity: .42; }
.story-widget-config { bottom: 16px; max-height: min(420px,calc(100% - 90px)); right: 12px; }
.story-widget-config > label { display: grid; gap: 5px; margin-top: 10px; }
.story-widget-config > label > span { color: #aeb9c8; font-size: 9px; font-weight: 800; }
.story-widget-config > label > input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  min-height: 43px;
  outline: 0;
  padding: 0 12px;
}
.story-widget-config-actions { display: flex; gap: 8px; margin-top: 12px; }
.story-widget-config-actions button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; flex: 1; font: inherit; font-size: 10px; font-weight: 850; min-height: 39px; }
.story-widget-config-actions button:last-child { background: #168fe6; border-color: #168fe6; }
.story-brush-size { align-items: center; color: #b8c3d1; display: flex; font-size: 9px; gap: 10px; }
.story-brush-size input { accent-color: #fff; flex: 1; }
.story-background-options { display: grid; gap: 9px; grid-template-columns: repeat(4,1fr); }
.story-background-options button { background: transparent; border: 0; color: #fff; display: grid; gap: 5px; justify-items: center; }
.story-background-options i { border: 2px solid transparent; border-radius: 13px; display: block; height: 54px; width: 54px; }
.story-background-options button.active i { border-color: #fff; box-shadow: 0 0 0 2px #168fe6; }
.story-background-options span { font-size: 8px; }
.background-auto { background: linear-gradient(155deg,#9179b2,#d5a990 52%,#627aa0); }
.background-blur { background: linear-gradient(145deg,#416c8f,#bd8d71); filter: blur(2px); }
.background-gradient { background: linear-gradient(145deg,#6c38d8,#ed3f8f,#ffb53c); }
.background-black { background: #05070a; }

/* Story media pickers: contacts, music, Frame and official GIPHY results. */
.story-media-picker,.story-giphy-panel,.story-frame-panel,.story-mention-panel {
  background: #11151c;
  border: 0;
  border-radius: 25px 25px 0 0;
  bottom: 0;
  left: 0;
  max-height: min(650px,calc(100% - 48px));
  padding: 13px 15px max(16px,env(safe-area-inset-bottom));
  right: 0;
}
.story-media-picker-handle { background: #9da4ae; border-radius: 4px; height: 4px; margin: -3px auto 12px; opacity: .8; width: 42px; }
.story-media-search,.story-giphy-search {
  align-items: center;
  background: #2a2f37;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  display: flex;
  gap: 8px;
  min-height: 45px;
  padding: 0 11px;
}
.story-media-search input,.story-giphy-search input { background: transparent; border: 0; color: #fff; flex: 1; font: inherit; font-size: 11px; min-width: 0; outline: 0; }
.story-media-search input::placeholder,.story-giphy-search input::placeholder { color: #9ca5b2; }
.story-giphy-search button { background: #178fdf; border: 0; border-radius: 11px; color: #fff; font: inherit; font-size: 9px; font-weight: 900; min-height: 32px; padding: 0 12px; }
.story-media-tabs { display: flex; gap: 7px; margin: 11px 0; overflow-x: auto; }
.story-media-tabs button { background: #292e36; border: 0; border-radius: 11px; color: #fff; flex: 0 0 auto; font: inherit; font-size: 9px; font-weight: 850; min-height: 34px; padding: 0 13px; }
.story-media-tabs button.active { background: #fff; color: #111720; }
.story-music-upload { align-items: center; background: linear-gradient(135deg,rgba(29,144,225,.25),rgba(111,83,229,.22)); border: 1px solid rgba(106,192,255,.25); border-radius: 15px; color: #fff; display: flex; gap: 10px; margin-bottom: 8px; min-height: 55px; padding: 7px 11px; text-align: left; width: 100%; }
.story-music-upload > span { align-items: center; background: #168fe6; border-radius: 50%; display: flex; flex: 0 0 34px; font-size: 18px; height: 34px; justify-content: center; }
.story-music-upload b,.story-music-upload small { display: block; }
.story-music-upload b { font-size: 10px; }
.story-music-upload small { color: #a9bacb; font-size: 8px; margin-top: 2px; }
.story-music-list,.story-mention-list { max-height: 310px; overflow-y: auto; overscroll-behavior: contain; }
.story-music-list > button,.story-mention-list > button { align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; display: flex; gap: 10px; min-height: 58px; padding: 7px 4px; text-align: left; width: 100%; }
.story-music-list > button > span,.story-mention-list > button > span { align-items: center; background: linear-gradient(145deg,#dff4ff,#acdfff); border-radius: 12px; color: #087ec8; display: flex; flex: 0 0 42px; font-size: 14px; font-weight: 900; height: 42px; justify-content: center; overflow: hidden; }
.story-mention-list > button > span { border-radius: 50%; }
.story-mention-list img { height: 100%; object-fit: cover; width: 100%; }
.story-music-list > button > div,.story-mention-list > button > div { flex: 1; min-width: 0; }
.story-music-list b,.story-music-list small,.story-mention-list b,.story-mention-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-music-list b,.story-mention-list b { font-size: 11px; }
.story-music-list small,.story-mention-list small { color: #98a6b6; font-size: 8px; margin-top: 3px; }
.story-music-list i,.story-mention-list i { color: #9bd9ff; font-size: 16px; font-style: normal; padding: 8px; }
.story-media-empty { color: #9da9b7; font-size: 9px; line-height: 1.45; padding: 18px 7px; text-align: center; }
.story-giphy-status { color: #a8b4c2; font-size: 9px; margin: 9px 3px; }
.story-giphy-status[data-state="loading"] { color: #80ccff; }
.story-giphy-status[data-state="success"] { color: #66dda0; }
.story-giphy-status[data-state="error"] { color: #ff9daf; }
.story-giphy-grid { display: grid; gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 390px; overflow-y: auto; padding: 2px; }
.story-giphy-grid button { align-items: center; aspect-ratio: 1; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; display: flex; justify-content: center; min-width: 0; overflow: hidden; padding: 5px; width: 100%; }
.story-giphy-grid img { display: block; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
.story-giphy-attribution { color: #fff; display: block; font-size: 8px; font-weight: 900; letter-spacing: .7px; margin-top: 10px; text-align: right; text-decoration: none; }
.story-frame-panel > p { color: #aeb8c6; font-size: 9px; line-height: 1.4; }
.story-frame-preview { align-items: center; aspect-ratio: 1/1.12; background: #fff; border-radius: 6px; box-shadow: 0 14px 28px rgba(0,0,0,.26); display: flex; justify-content: center; margin: 10px auto; max-height: 290px; overflow: hidden; padding: 10px 10px 56px; position: relative; width: min(230px,75%); }
.story-frame-preview img { height: 100%; object-fit: cover; width: 100%; }
.story-frame-preview > span { align-items: center; color: #8792a0; display: flex; flex-direction: column; font-size: 34px; gap: 6px; }
.story-frame-preview > span small { font-size: 9px; font-weight: 800; }
.story-frame-caption { display: grid; gap: 5px; }
.story-frame-caption span { color: #abb7c5; font-size: 8px; font-weight: 800; }
.story-frame-caption input { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); border-radius: 13px; color: #fff; font: inherit; min-height: 42px; outline: 0; padding: 0 12px; }
.story-frame-actions { display: flex; gap: 8px; margin-top: 10px; }
.story-frame-actions button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #fff; flex: 1; font: inherit; font-size: 9px; font-weight: 900; min-height: 40px; }
.story-frame-actions button:last-child { background: #168fe6; border-color: #168fe6; }
.story-frame-actions button:disabled { filter: grayscale(.5); opacity: .42; }
.story-mention-panel .story-mention-input { margin-bottom: 9px; }

/* Instagram-style Story link editor. */
.story-link-panel {
  backdrop-filter: blur(26px) brightness(.48);
  -webkit-backdrop-filter: blur(26px) brightness(.48);
  background: rgba(16,16,19,.82);
  border: 0;
  border-radius: 24px 24px 0 0;
  bottom: 0;
  box-shadow: 0 -18px 52px rgba(0,0,0,.38);
  left: 0;
  max-height: none;
  overflow: hidden auto;
  padding: 9px 16px max(24px,env(safe-area-inset-bottom));
  right: 0;
  top: 66px;
  z-index: 18;
}
.story-link-handle { background: rgba(255,255,255,.66); border-radius: 5px; height: 4px; margin: 0 auto 12px; width: 42px; }
.story-link-header { align-items: center; display: grid; grid-template-columns: 48px 1fr 48px; min-height: 56px; }
.story-link-header > b { font-size: 15px; text-align: center; }
.story-link-close,.story-link-submit { align-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; display: flex; font: inherit; height: 44px; justify-content: center; width: 44px; }
.story-link-close { background: rgba(255,255,255,.11); color: #fff; font-size: 32px; font-weight: 300; line-height: 1; }
.story-link-submit { background: #fff; color: #111318; justify-self: end; }
.story-link-submit svg { height: 28px; width: 28px; }
.story-link-submit:disabled { background: rgba(255,255,255,.18); color: rgba(255,255,255,.42); }
.story-link-content { padding: 20px 1px 0; }
.story-link-url-field,.story-link-custom-field label { display: grid; gap: 4px; }
.story-link-url-field > span,.story-link-custom-field label > span { color: #9a9ca5; font-size: 11px; }
.story-link-url-field input,.story-link-custom-field input { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.13); border-radius: 0; color: #fff; font: inherit; font-size: 18px; min-height: 44px; outline: 0; padding: 0 0 8px; width: 100%; }
.story-link-url-field input::placeholder,.story-link-custom-field input::placeholder { color: #a7a9b1; opacity: .78; }
.story-link-content > p,.story-link-custom-field p { color: #a7aab3; font-size: 10px; line-height: 1.42; margin: 6px 0 0; }
.story-link-preview-action { background: transparent; border: 0; color: #7c97ff; font: inherit; font-size: 10px; padding: 2px 0; }
.story-link-preview-action:disabled { color: #777a83; }
.story-link-customize { align-items: center; background: transparent; border: 0; color: #a9abb3; display: flex; font: inherit; gap: 12px; margin: 30px 0 0; padding: 8px 0; width: 100%; }
.story-link-customize span { font-size: 27px; font-weight: 200; line-height: 1; transition: transform .18s ease; }
.story-link-customize b { font-size: 13px; font-weight: 500; }
.story-link-customize.active { color: #fff; }
.story-link-customize.active span { transform: rotate(45deg); }
.story-link-custom-field { margin-top: 7px; }
.story-link-preview { align-items: center; align-self: center; background: #fff; border-radius: 17px; box-shadow: 0 9px 22px rgba(0,0,0,.25); color: #13151a; display: flex; gap: 9px; margin: 34px auto 0; max-width: 260px; padding: 12px 18px; width: fit-content; }
.story-link-preview.hidden { display: none; }
.story-link-preview span { font-size: 24px; }
.story-link-preview b { font-size: 13px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Instagram-inspired Story hashtag editor and smart recommendations. */
.story-hashtag-panel {
  backdrop-filter: blur(18px) brightness(.42);
  -webkit-backdrop-filter: blur(18px) brightness(.42);
  background: rgba(5,9,15,.72);
  border: 0;
  border-radius: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  inset: 0;
  max-height: none;
  overflow: hidden;
  padding: max(16px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));
  right: 0;
  z-index: 27;
}
.story-hashtag-panel.hidden { display: none; }
.story-hashtag-header { align-items: center; display: grid; flex: 0 0 auto; grid-template-columns: 48px 1fr 68px; min-height: 48px; }
.story-hashtag-header > b { font-size: 14px; text-align: center; }
.story-hashtag-header button { background: transparent; border: 0; color: #fff; font: inherit; font-size: 11px; font-weight: 900; padding: 8px; }
.story-hashtag-header button:first-child { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.11); border-radius: 50%; display: flex; font-size: 27px; font-weight: 300; height: 42px; justify-content: center; line-height: 1; width: 42px; }
.story-hashtag-header button:last-child { justify-self: end; }
.story-hashtag-header button:disabled { color: rgba(255,255,255,.38); }
.story-hashtag-stage { align-items: center; display: flex; flex: 1 1 42%; flex-direction: column; justify-content: center; min-height: 150px; padding: 20px 8px 12px; }
.story-hashtag-pill { align-items: center; background: #fff; border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.3); display: flex; max-width: 94%; min-height: 56px; padding: 0 17px; width: fit-content; }
.story-hashtag-pill > span { background: linear-gradient(150deg,#ff2a9c,#8f3cff); -webkit-background-clip: text; background-clip: text; color: transparent; flex: 0 0 auto; font-size: 33px; font-weight: 900; line-height: 1; }
.story-hashtag-pill input { background: transparent; border: 0; color: #353943; font: 500 27px/1 Inter,Arial,sans-serif; max-width: 270px; min-width: 90px; outline: 0; padding: 0; width: 9ch; }
.story-hashtag-pill input::placeholder { color: #8b8e95; }
.story-hashtag-stage > p { color: rgba(255,255,255,.64); font-size: 8px; line-height: 1.45; margin: 12px auto 0; max-width: 300px; text-align: center; }
.story-hashtag-recommendations { background: rgba(14,18,25,.96); border: 1px solid rgba(255,255,255,.1); border-radius: 23px 23px 0 0; box-shadow: 0 -15px 42px rgba(0,0,0,.24); flex: 0 1 48%; margin: 0 -14px max(-12px,calc(env(safe-area-inset-bottom) * -1)); min-height: 190px; overflow: hidden; padding: 15px 15px max(14px,env(safe-area-inset-bottom)); }
.story-hashtag-recommendations > header { align-items: end; display: flex; justify-content: space-between; padding: 0 3px 10px; }
.story-hashtag-recommendations > header b { font-size: 13px; }
.story-hashtag-recommendations > header span { color: #8f9aa8; font-size: 7.5px; max-width: 190px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.story-hashtag-results { height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; }
.story-hashtag-result { align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.075); color: #fff; display: flex; gap: 11px; min-height: 57px; padding: 7px 3px; text-align: left; width: 100%; }
.story-hashtag-result > span { align-items: center; background: linear-gradient(145deg,#ff329b,#714cff); border-radius: 50%; box-shadow: 0 6px 16px rgba(184,47,198,.22); display: flex; flex: 0 0 39px; font-size: 21px; font-weight: 900; height: 39px; justify-content: center; }
.story-hashtag-result > div { flex: 1; min-width: 0; }
.story-hashtag-result b,.story-hashtag-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-hashtag-result b { font-size: 12px; }
.story-hashtag-result small { color: #98a5b4; font-size: 8px; margin-top: 3px; }
.story-hashtag-result > i { color: #9ba7b7; font-size: 18px; font-style: normal; padding: 8px; }
.story-hashtag-empty { color: #8f9aa8; font-size: 9px; line-height: 1.5; margin: 0; padding: 28px 10px; text-align: center; }

/* Hashtag mode mirrors the lightweight Instagram composer: photo stays visible,
   suggestions only appear as a horizontal strip above the keyboard. */
.story-hashtag-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(1,7,12,.48);
  padding: max(16px,env(safe-area-inset-top)) 0 0;
}
.story-hashtag-header { display: block; min-height: 48px; padding: 0 16px; position: relative; }
.story-hashtag-header > b { display: none; }
.story-hashtag-header button:first-child {
  align-items: center;
  background: rgba(16,20,28,.62);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex;
  font-size: 28px;
  font-weight: 300;
  height: 42px;
  justify-content: center;
  left: 14px;
  line-height: 1;
  padding: 0 0 3px;
  position: absolute;
  top: 0;
  width: 42px;
}
.story-hashtag-header button:last-child { color: #fff; font-size: 16px; padding: 8px 0; position: absolute; right: 16px; top: 0; }
.story-hashtag-header button:last-child:disabled { color: rgba(255,255,255,.82); }
.story-hashtag-stage { flex: 1 1 auto; min-height: 0; padding: 4px 10px 76px; }
.story-hashtag-stage > p { display: none; }
.story-hashtag-pill { border-radius: 15px; min-height: 51px; padding: 0 10px 0 14px; }
.story-hashtag-pill > span { font-size: 31px; }
.story-hashtag-pill input { font-size: 26px; max-width: 285px; min-width: 88px; }
.story-hashtag-clear {
  align-items: center;
  background: #e7e9ed;
  border: 0;
  border-radius: 50%;
  color: #555b65;
  display: flex;
  flex: 0 0 25px;
  font: 600 20px/1 Inter,Arial,sans-serif;
  height: 25px;
  justify-content: center;
  margin-left: 5px;
  padding: 0 0 2px;
  width: 25px;
}
.story-hashtag-recommendations {
  background: rgba(10,13,17,.48);
  border: 0;
  border-radius: 0;
  bottom: 0;
  box-shadow: none;
  flex: none;
  left: 0;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px 8px 10px;
  position: absolute;
  right: 0;
}
.story-hashtag-recommendations > header { display: block; padding: 0 1px 7px; }
.story-hashtag-recommendations > header b { font-size: 12px; }
.story-hashtag-recommendations > header span { display: none; }
.story-hashtag-results { display: flex; gap: 5px; height: auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; scrollbar-width: none; }
.story-hashtag-results::-webkit-scrollbar { display: none; }
.story-hashtag-result { background: rgba(235,239,238,.68); border: 0; border-radius: 5px; color: #fff; display: block; flex: 0 0 auto; min-height: 38px; padding: 7px 10px; width: auto; }
.story-hashtag-result b { font-family: Impact,"Arial Narrow Bold",sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .2px; }
.story-hashtag-empty { color: rgba(255,255,255,.78); flex: 0 0 auto; padding: 8px 4px; text-align: left; }

@media (max-width:600px) {
  .story-editor-header-actions button { height: 36px; width: 36px; }
  .story-editor-panel[data-story-panel="stickers"] { max-height: calc(100% - 64px); }
  body.keyboard-visible .story-widget-config { bottom: 8px; max-height: calc(100% - 16px); }
  body.keyboard-visible .story-location-panel { bottom: 0; max-height: none; padding-bottom: 8px; right: 0; }
  body.keyboard-visible .story-location-intro { display: none; }
  body.keyboard-visible .story-location-header { min-height: 42px; }
  body.keyboard-visible .story-location-header button { height: 36px; width: 36px; }
  body.keyboard-visible .story-location-search { min-height: 43px; }
  body.keyboard-visible .story-location-privacy { display: none; }
  body.keyboard-visible .story-link-panel { bottom: 0; left: 0; max-height: none; padding-bottom: 8px; right: 0; top: 0; }
  body.keyboard-visible .story-link-content { padding-top: 9px; }
  body.keyboard-visible .story-link-customize { margin-top: 16px; }
  body.keyboard-visible .story-hashtag-panel { bottom: 0; padding-bottom: 0; }
  body.keyboard-visible .story-hashtag-stage { flex: 1 1 auto; min-height: 0; padding: 0 8px 74px; }
  body.keyboard-visible .story-hashtag-recommendations { bottom: 0; flex: none; margin: 0; min-height: 0; }
}

.story-viewer-audio { align-items: center; background: rgba(4,18,34,.82); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; bottom: 12px; display: flex; gap: 7px; left: 12px; padding: 7px 9px; position: absolute; right: 12px; z-index: 4; }
.story-viewer-audio.hidden { display: none; }
.story-viewer-audio audio { height: 31px; max-width: 250px; width: 100%; }
.story-viewer-audio span { font-size: 9px; font-weight: 800; max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.story-viewer-layer {
  align-items: center;
  background: rgba(1,8,18,.78);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1200;
}
.story-viewer-layer.hidden { display: none; }
.story-viewer {
  background: #061327;
  box-shadow: 0 35px 95px rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: min(900px,calc(100dvh - 48px));
  max-width: 430px;
  overflow: hidden;
  position: relative;
  width: min(430px,100vw);
}
.story-viewer-progress { display: flex; gap: 4px; left: 12px; position: absolute; right: 12px; top: 13px; z-index: 5; }
.story-viewer-progress span { background: rgba(255,255,255,.28); border-radius: 3px; flex: 1; height: 3px; overflow: hidden; }
.story-viewer-progress i { background: #fff; display: block; height: 100%; transform: scaleX(0); transform-origin: left; }
.story-viewer-progress span.done i { transform: scaleX(1); }
.story-viewer-progress span.active i { animation: storyProgress 7s linear forwards; }
.story-viewer-layer.replying .story-viewer-progress span.active i { animation-play-state: paused; }
@keyframes storyProgress { to { transform: scaleX(1); } }
.story-viewer-header { align-items: center; background: linear-gradient(180deg,rgba(2,12,25,.92),rgba(2,12,25,.12)); display: flex; gap: 10px; left: 0; padding: 27px 14px 18px; position: absolute; right: 0; top: 0; z-index: 4; }
.story-viewer-avatar { align-items: center; background: #dff3ff; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #0878c3; display: flex; flex: 0 0 38px; font-size: 10px; font-weight: 900; height: 38px; justify-content: center; overflow: hidden; width: 38px; }
.story-viewer-avatar img { height: 100%; object-fit: cover; width: 100%; }
.story-viewer-header > div { flex: 1; min-width: 0; }
.story-viewer-header b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-header small { color: rgba(255,255,255,.7); display: block; font-size: 9px; margin-top: 2px; }
.story-viewer-header > button { background: rgba(255,255,255,.12); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 24px; height: 36px; line-height: 1; width: 36px; }
.story-viewer-stage { align-items: center; background: radial-gradient(circle at 50% 38%,#16395f,#061327 72%); display: flex; flex: 1; justify-content: center; min-height: 0; overflow: hidden; position: relative; }
.story-viewer-stage > img { height: 100%; object-fit: contain; width: 100%; }
.story-viewer-stage > img.hidden { display: none; }
.story-viewer-stage > .story-viewer-gif { height: auto; max-height: 70%; object-fit: contain; pointer-events: none; position: absolute; transform-origin: center; z-index: 2; }
.story-viewer-link-zone { background: transparent; border-radius: 999px; cursor: pointer; position: absolute; transform-origin: center; z-index: 5; }
.story-viewer-link-zone:focus-visible { outline: 3px solid #7bc9ff; outline-offset: 4px; }
.story-viewer-text { background: linear-gradient(145deg,rgba(8,119,199,.94),rgba(122,75,194,.94)); bottom: 76px; color: #fff; font-size: 20px; font-weight: 800; left: 22px; line-height: 1.45; max-height: 45%; overflow-y: auto; padding: 16px 18px; position: absolute; right: 22px; text-align: center; white-space: pre-wrap; z-index: 2; }
.story-viewer-text:empty { display: none; }
.story-viewer-stage:not(.has-image) .story-viewer-text { align-items: center; bottom: 0; display: flex; font-size: 25px; justify-content: center; left: 0; max-height: none; right: 0; top: 0; }
.story-viewer-nav { background: transparent; border: 0; bottom: 0; cursor: pointer; position: absolute; top: 80px; width: 34%; z-index: 3; }
.story-viewer-nav.previous { left: 0; }
.story-viewer-nav.next { right: 0; }
.story-viewer-footer { background: linear-gradient(180deg,rgba(3,15,31,.2),rgba(3,15,31,.98) 25%); flex: 0 0 auto; min-height: 118px; padding: 12px 13px 14px; position: relative; z-index: 6; }
.story-reaction-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 9px; }
.story-reaction-row button { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #fff; cursor: pointer; display: flex; font-size: 17px; gap: 3px; height: 34px; justify-content: center; min-width: 42px; padding: 0 7px; }
.story-reaction-row button.active { background: rgba(54,166,255,.3); border-color: #62c0ff; transform: translateY(-2px); }
.story-reaction-row b { font-size: 8px; }
.story-reaction-row b:empty { display: none; }
.story-reply-form { display: flex; gap: 8px; margin: 0; }
.story-reply-form input { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; color: #fff; flex: 1; font: inherit; font-size: 12px; height: 42px; min-width: 0; outline: 0; padding: 0 14px; }
.story-reply-form input::placeholder { color: rgba(255,255,255,.65); }
.story-reply-form button { background: #168fe6; border: 0; border-radius: 50%; color: #fff; cursor: pointer; flex: 0 0 42px; font-size: 17px; height: 42px; width: 42px; }
.story-owner-controls { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.story-owner-controls.hidden { display: none; }
.story-owner-controls button { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; color: #fff; cursor: pointer; display: flex; gap: 10px; min-height: 58px; padding: 9px 12px; text-align: left; }
.story-owner-controls button.danger { background: rgba(255,75,104,.12); border-color: rgba(255,105,130,.24); }
.story-owner-control-icon { align-items: center; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; flex: 0 0 34px; height: 34px; justify-content: center; width: 34px; }
.story-owner-control-icon svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.story-owner-controls button > span:last-child { min-width: 0; }
.story-owner-controls b { display: block; font-size: 11px; }
.story-owner-controls small { color: rgba(255,255,255,.65); display: block; font-size: 8px; margin-top: 2px; }
.story-owner-controls i { font-style: normal; }
.story-activity-sheet,.story-delete-confirm { inset: 0; position: absolute; z-index: 20; }
.story-activity-sheet.hidden,.story-delete-confirm.hidden { display: none; }
.story-sheet-backdrop { background: rgba(0,0,0,.48); border: 0; inset: 0; position: absolute; width: 100%; }
.story-activity-sheet > section { background: #10151c; border-radius: 24px 24px 0 0; bottom: 0; color: #fff; display: flex; flex-direction: column; left: 0; max-height: 72%; min-height: 48%; padding: 9px 14px max(14px,env(safe-area-inset-bottom)); position: absolute; right: 0; }
.story-sheet-handle { background: #67717c; border-radius: 4px; height: 4px; margin: 0 auto 10px; width: 42px; }
.story-activity-sheet header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 12px; padding: 4px 2px 13px; }
.story-activity-sheet header > div { flex: 1; }
.story-activity-sheet h3 { font-size: 15px; margin: 0; }
.story-activity-sheet header p { color: #97a5b4; font-size: 9px; margin: 3px 0 0; }
.story-activity-sheet header button { background: rgba(255,255,255,.1); border: 0; border-radius: 50%; color: #fff; cursor: pointer; font-size: 22px; height: 32px; width: 32px; }
.story-activity-list { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 0; scrollbar-width: none; }
.story-activity-list::-webkit-scrollbar { display: none; }
.story-activity-loading,.story-activity-empty { color: #8c9baa; font-size: 11px; line-height: 1.5; padding: 34px 18px; text-align: center; }
.story-activity-person { align-items: center; border-radius: 14px; color: #fff; display: flex; gap: 10px; padding: 8px 5px; text-decoration: none; }
.story-activity-person:hover { background: rgba(255,255,255,.05); }
.story-activity-avatar { align-items: center; background: linear-gradient(145deg,#dff4ff,#9fd9ff); border-radius: 50%; color: #0b80c9; display: flex; flex: 0 0 42px; font-size: 10px; font-weight: 900; height: 42px; justify-content: center; overflow: hidden; width: 42px; }
.story-activity-avatar img { height: 100%; object-fit: cover; width: 100%; }
.story-activity-person-copy { flex: 1; min-width: 0; }
.story-activity-person-copy b { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-activity-person-copy small { color: #8f9baa; display: block; font-size: 8px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-activity-reaction { align-items: center; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; font-size: 20px; height: 38px; justify-content: center; width: 38px; }
.story-activity-seen { color: #72808d; font-size: 15px; padding: 0 8px; }
.story-sheet-delete { align-items: center; background: rgba(255,70,101,.12); border: 1px solid rgba(255,92,119,.2); border-radius: 14px; color: #ff6f86; cursor: pointer; display: flex; font: inherit; font-size: 11px; font-weight: 900; gap: 8px; justify-content: center; min-height: 43px; }
.story-sheet-delete svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.story-delete-confirm { display: flex; align-items: center; justify-content: center; padding: 20px; }
.story-delete-confirm > section { background: #fff; border-radius: 22px; color: #14283e; max-width: 330px; padding: 22px; position: relative; text-align: center; width: 100%; }
.story-delete-icon { align-items: center; background: #fff0f2; border-radius: 50%; color: #e14760; display: flex; font-size: 26px; height: 52px; justify-content: center; margin: 0 auto 12px; width: 52px; }
.story-delete-confirm h3 { font-size: 17px; margin: 0; }
.story-delete-confirm p { color: #6f8091; font-size: 10px; line-height: 1.5; margin: 8px 0 18px; }
.story-delete-confirm section button { background: #eef3f7; border: 0; border-radius: 12px; color: #506579; cursor: pointer; display: block; font: inherit; font-size: 11px; font-weight: 900; height: 42px; margin-top: 8px; width: 100%; }
.story-delete-confirm section button.confirm { background: #ed4964; color: #fff; }
.story-viewer-layer.activity-open .story-viewer-progress span.active i,.story-viewer-layer.delete-confirm-open .story-viewer-progress span.active i { animation-play-state: paused; }
.story-viewer-toast { background: #0b3359; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; bottom: 124px; color: #fff; font-size: 10px; left: 50%; margin: 0; max-width: 300px; padding: 9px 12px; position: absolute; text-align: center; transform: translateX(-50%); width: max-content; z-index: 8; }

.message-story-quote { appearance: none; background: rgba(12,80,128,.08); border: 0; border-left: 3px solid #168fe6; border-radius: 9px; color: inherit; cursor: pointer; display: block; font: inherit; margin: 0 0 7px; max-width: 245px; overflow: hidden; padding: 8px; text-align: left; text-decoration: none; width: 100%; }
.mine .message-story-quote { background: rgba(255,255,255,.13); border-left-color: #bce8ff; }
.message-story-quote small { color: #1686d1; display: block; font-size: 8px; font-weight: 900; letter-spacing: .5px; }
.mine .message-story-quote small { color: #d4f0ff; }
.message-story-quote > div { align-items: center; display: flex; gap: 8px; margin-top: 5px; }
.message-story-quote img { border-radius: 7px; flex: 0 0 42px; height: 42px; object-fit: cover; width: 42px; }
.message-story-quote span { color: inherit !important; display: block !important; font-size: 10px !important; line-height: 1.35; margin: 0 !important; max-width: 180px; overflow: hidden; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; }
.message-story-quote strong { display: block; font-size: 10px; }
.message-story-quote em { display: block; font-size: 9px; font-style: normal; margin-top: 2px; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-story-quote.unavailable { cursor: not-allowed; opacity: .72; }

@media (max-width:600px) {
  .story-create-editor { height: 100dvh; max-width: none; width: 100vw; }
  .story-editor-tools button > b { opacity: 1; }
  body.keyboard-visible .story-create-layer {
    align-items: flex-start;
    bottom: auto;
    height: var(--keyboard-viewport-height,100dvh);
    top: var(--keyboard-viewport-top,0px);
  }
  body.keyboard-visible .story-create-editor { height: 100%; }
  body.keyboard-visible .story-editor-header { padding-top: 8px; }
  body.keyboard-visible .story-editor-tools { display: none; }
  body.keyboard-visible .story-editor-footer { padding-bottom: 8px; }
  body.keyboard-visible .story-editor-panel { bottom: 112px; right: 12px; }
  body.keyboard-visible .story-text-edit-mode { bottom: 0; inset: 0; padding-bottom: 8px; right: 0; }
  body.keyboard-visible .story-text-input-stage { min-height: 70px; }
  body.keyboard-visible .story-text-input-stage textarea { font-size: var(--story-text-preview-size, 30px) !important; max-height: 110px; }
  body.keyboard-visible .story-text-shortcuts { display: none; }
  .story-viewer { height: 100dvh; width: 100vw; }
  .story-manager-header { padding-top: max(48px,calc(env(safe-area-inset-top) + 38px)); }
  .story-viewer-footer { padding-bottom: max(14px,env(safe-area-inset-bottom)); }

  /* Keep the Story reply composer inside Safari's visible viewport. */
  body.keyboard-visible .story-viewer-layer {
    align-items: flex-start;
    bottom: auto;
    height: var(--keyboard-viewport-height,100dvh);
    left: 0;
    right: 0;
    top: var(--keyboard-viewport-top,0px);
  }
  body.keyboard-visible .story-viewer {
    height: 100%;
    max-height: none;
  }
  body.keyboard-visible .story-viewer-footer {
    background: linear-gradient(180deg,rgba(3,15,31,.08),rgba(3,15,31,.98) 30%);
    min-height: 66px;
    padding: 8px 12px max(8px,env(safe-area-inset-bottom));
  }
  body.keyboard-visible .story-reaction-row {
    display: none;
  }
  body.keyboard-visible .story-reply-form {
    align-items: center;
  }
  body.keyboard-visible .story-reply-form input {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.58);
    height: 46px;
  }
  body.keyboard-visible .story-reply-form button {
    flex-basis: 46px;
    height: 46px;
    width: 46px;
  }
  body.keyboard-visible .story-viewer-text {
    bottom: 62px;
  }
}

/* Compact premium contacts header */
.contacts-page .contacts-hero {
  background:
    radial-gradient(circle at 91% 4%,rgba(66,177,255,.34),transparent 34%),
    linear-gradient(145deg,#06172e 0%,#0a315c 64%,#0c4e83 100%);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 13px 32px rgba(4,30,58,.2);
  min-height: 184px;
  overflow: hidden;
  padding: 45px 17px 16px;
}
.contacts-page .contacts-hero::after {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  content: "";
  height: 150px;
  position: absolute;
  right: -55px;
  top: -62px;
  width: 150px;
}
.contacts-page .contacts-hero .premium-orb-one { height: 190px; right: -105px; top: -110px; width: 190px; }
.contacts-page .contacts-hero .premium-orb-two { bottom: -122px; height: 155px; left: -92px; width: 155px; }
.contacts-page .page-header { align-items: center; min-height: 54px; padding: 0; }
.contacts-page .page-header .back-button {
  backdrop-filter: blur(8px);
  border-radius: 12px;
  flex-basis: 36px;
  height: 36px;
  margin-right: 11px;
  width: 36px;
}
.contacts-title-meta { align-items: center; display: flex; gap: 7px; }
.contacts-page .page-header .contacts-title-meta small { color: #83d4ff; font-size: 8px; letter-spacing: 1.35px; }
.contacts-title-meta > span {
  background: rgba(126,218,255,.13);
  border: 1px solid rgba(137,222,255,.22);
  border-radius: 999px;
  color: #bfeaff;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .7px;
  padding: 2px 6px;
}
.contacts-page .page-header .page-title h1 { font-size: 21px; letter-spacing: -.45px; margin-top: 3px; }
.contacts-page .page-title p { color: #b0c9df; font-size: 9px; margin-top: 3px; }
.contacts-page .contacts-search {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 16px;
  bottom: auto;
  box-shadow: 0 11px 25px rgba(0,20,44,.2);
  height: 48px;
  left: auto;
  margin: 13px 0 0;
  padding: 0 6px 0 13px;
  position: relative;
  right: auto;
  width: 100%;
}
.contacts-page .contacts-search > svg { flex-basis: 18px; height: 18px; margin-right: 9px; width: 18px; }
.contacts-page .contacts-search input { font-size: 12px; height: 100%; }
.contacts-page .contacts-search > a { align-items: center; display: flex; height: 34px; justify-content: center; width: 27px; }
.contacts-search-submit {
  align-items: center;
  background: linear-gradient(145deg,#1ba2ed,#0878cb);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(9,119,196,.27);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}
.contacts-page .contacts-search .contacts-search-submit svg { height: 18px; margin: 0; stroke: currentColor; width: 18px; }
.contacts-page .contacts-content { padding-top: 0; }
.contacts-page .contacts-heading { padding: 16px 19px 10px; }
.contacts-page .contacts-heading small { margin-bottom: 2px; }
.contacts-page .contacts-heading h2 { font-size: 18px; }
.contacts-page .contacts-heading p { font-size: 10px; margin-top: 3px; }
.contacts-page .contacts-heading > span { border-radius: 10px; height: 26px; min-width: 26px; }
.contacts-page .contacts-list { padding: 0 12px 88px; }
.contacts-page .contact-card {
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,252,255,.95));
  border-color: rgba(220,231,240,.92);
  border-radius: 18px;
  box-shadow: 0 8px 21px rgba(25,61,93,.075);
  padding: 11px;
}
@media (max-width:600px) {
  .contacts-page .contacts-hero { min-height: 180px; padding-top: max(43px,calc(env(safe-area-inset-top) + 33px)); }
}

/* Safari zooms a page whenever focused text is rendered below 16px. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
body textarea:not([data-story-overlay-text]),
body select,
body [contenteditable="true"] {
  font-size: 16px !important;
}

/* Keep every IChat form stable when iOS opens and closes its keyboard. */
@media (max-width: 600px) {
  html,
  body {
    height: 100%;
    overscroll-behavior: none;
    width: 100%;
  }
  body.keyboard-visible {
    inset: 0;
    overflow: hidden;
    position: fixed;
  }
  body.keyboard-visible .phone-shell {
    bottom: auto;
    height: var(--keyboard-viewport-height, 100dvh);
    left: 0;
    max-height: none;
    position: fixed;
    right: 0;
    top: var(--keyboard-viewport-top, 0px);
    width: 100%;
  }
  body.keyboard-visible .bottom-nav {
    bottom: 0;
  }
  body.keyboard-visible .status-screen {
    padding-bottom: 68px;
  }
  .status-comment-form input {
    height: 44px;
  }
  .status-comment-composer > button {
    flex-basis: 42px;
    height: 42px;
    width: 42px;
  }
}

/* High-fidelity cinematic Premium effects. */
.premium-effect-panel button {
  grid-template-columns: 56px 1fr;
  min-height: 96px;
  overflow: hidden;
  padding: 9px;
  position: relative;
}
.premium-effect-panel button::after {
  background: radial-gradient(circle,rgba(94,207,255,.2),transparent 65%);
  content: "";
  height: 90px;
  left: -14px;
  pointer-events: none;
  position: absolute;
  top: -15px;
  width: 90px;
}
.premium-effect-panel button > .premium-effect-option-art {
  align-items: center;
  display: flex;
  grid-row: 1 / 3;
  height: 58px;
  justify-content: center;
  position: relative;
  width: 58px;
  z-index: 1;
}
.premium-effect-option-art img {
  display: block;
  filter: drop-shadow(0 9px 10px rgba(0,8,25,.52));
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.premium-effect-message {
  background:
    radial-gradient(circle at 16% 18%,rgba(129,229,255,.32),transparent 28%),
    linear-gradient(135deg,#031a3d,#07578f 62%,#078ab9);
  gap: 7px;
  max-width: 270px;
  min-height: 92px;
  min-width: 235px;
  padding: 9px 12px 9px 7px;
}
.premium-effect-message.effect-hearts { background:radial-gradient(circle at 20% 18%,rgba(255,179,225,.38),transparent 30%),linear-gradient(135deg,#3d092e,#a51972 63%,#ef61b7); }
.premium-effect-message.effect-fireworks { background:radial-gradient(circle at 20% 18%,rgba(255,231,146,.3),transparent 31%),linear-gradient(135deg,#170a4a,#4a20a1 60%,#157fba); }
.premium-effect-message.effect-confetti { background:radial-gradient(circle at 20% 18%,rgba(255,232,137,.35),transparent 30%),linear-gradient(135deg,#28134d,#8e2677 59%,#087ca5); }
.premium-effect-message.effect-lion { background:radial-gradient(circle at 17% 15%,rgba(255,213,117,.42),transparent 33%),linear-gradient(135deg,#211006,#6d370c 58%,#bd7917); }
.premium-effect-message.effect-ronaldo { background:radial-gradient(circle at 18% 16%,rgba(255,233,115,.38),transparent 31%),linear-gradient(135deg,#031d25,#075c4a 58%,#c29019); }
.premium-effect-message > .premium-effect-card-art,
.premium-effect-message.effect-whale > .premium-effect-card-art {
  animation: premiumCinematicCardFloat 3.1s cubic-bezier(.45,.05,.5,.95) infinite;
  flex: 0 0 88px;
  height: 72px;
  isolation: isolate;
  overflow: visible;
  position: relative;
  width: 88px;
}
.premium-effect-card-art img,
.premium-effect-message.effect-whale > .premium-effect-card-art img {
  animation: none;
  display: block;
  filter: drop-shadow(0 10px 10px rgba(0,12,40,.48));
  height: 100%;
  object-fit: contain;
  transform: none;
  width: 100%;
}
.premium-effect-message.effect-whale > .premium-effect-card-art img { width: 100px; }
.premium-effect-message.effect-lion > .premium-effect-card-art img,
.premium-effect-panel button[data-premium-effect="lion"] .premium-effect-option-art img {
  animation:premiumLionCard 2.45s cubic-bezier(.45,.05,.5,.95) infinite;
  filter:drop-shadow(0 10px 11px rgba(16,7,0,.58)) drop-shadow(0 0 9px rgba(255,187,63,.34));
  transform-origin:50% 82%;
}
.premium-effect-message.effect-ronaldo > .premium-effect-card-art img,
.premium-effect-panel button[data-premium-effect="ronaldo"] .premium-effect-option-art img {
  animation:premiumRonaldoCard 1.05s cubic-bezier(.32,.06,.3,1) infinite;
  filter:drop-shadow(0 10px 11px rgba(0,19,16,.62)) drop-shadow(0 0 8px rgba(255,218,76,.4));
  transform-origin:50% 90%;
}
.premium-effect-message > div { min-width: 0; }
.premium-effect-message b { font-size: 13px; line-height: 1.2; }
.premium-effect-message small { font-size: 8px; line-height: 1.35; }

.premium-effect-object-art {
  display: block;
  height: 100%;
  image-rendering: auto;
  object-fit: contain;
  transform: translateZ(0);
  width: 100%;
}
.premium-effect-object-depth .premium-effect-object-art {
  filter: blur(11px) brightness(.18) saturate(1.8);
  opacity: .78;
}
.premium-effect-object-core .premium-effect-object-art {
  animation: premiumCinematicAssetFloat 2.15s ease-in-out infinite;
  filter: drop-shadow(0 28px 22px rgba(0,8,28,.58)) drop-shadow(0 0 24px var(--fx-soft));
  transform-origin: 50% 55%;
  will-change: transform;
}
.premium-whale-rig {
  background: transparent;
  display: block;
  pointer-events: none;
}
.premium-whale-rig-card {
  filter: drop-shadow(0 10px 10px rgba(0,12,40,.5));
  height: auto;
  width: 100%;
}
.premium-whale-rig-stage {
  filter: drop-shadow(0 31px 24px rgba(0,8,32,.62)) drop-shadow(0 0 27px rgba(72,215,255,.43));
  height: auto;
  transform: translateZ(0);
  width: 100%;
  will-change: contents;
}
.premium-particle-rig {
  background:transparent;
  display:block;
  pointer-events:none;
}
.premium-particle-rig-card {
  filter:drop-shadow(0 8px 10px rgba(0,9,34,.42));
  height:100%;
  width:100%;
}
.premium-particle-rig-stage {
  height:100%;
  inset:0;
  position:absolute;
  transform:translateZ(42px);
  width:100%;
  will-change:contents;
  z-index:6;
}
.premium-effect-stage.effect-fireworks .premium-particle-rig-stage,
.premium-effect-stage.effect-hearts .premium-particle-rig-stage,
.premium-effect-stage.effect-confetti .premium-particle-rig-stage { mix-blend-mode:normal; }
.premium-effect-message.effect-fireworks > .premium-effect-card-art,
.premium-effect-message.effect-hearts > .premium-effect-card-art,
.premium-effect-message.effect-confetti > .premium-effect-card-art {
  border-radius:14px;
  overflow:hidden;
}
.premium-effect-stage.premium-effect-compact .premium-whale-rig-stage {
  filter:drop-shadow(0 16px 13px rgba(0,8,32,.54));
}
.premium-effect-stage.effect-whale {
  background: transparent;
}
.premium-whale-cinematic {
  align-items: center;
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.premium-whale-cinematic-media {
  display: block;
  filter: drop-shadow(0 20px 22px rgba(0,19,43,.38));
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  width: 100%;
}
.premium-whale-cinematic-fallback {
  image-rendering: auto;
}
.premium-effect-stage.premium-effect-compact .premium-particle-rig-stage {
  filter:none;
}
.premium-effect-object.object-whale .premium-effect-object-core {
  height: 125%;
  inset: -12.5%;
  width: 125%;
}
.premium-effect-object.object-whale .premium-effect-object-core .premium-effect-object-art {
  filter: drop-shadow(0 30px 25px rgba(0,8,32,.62)) drop-shadow(0 0 25px rgba(72,215,255,.4));
}
.premium-effect-stage.effect-hearts { background:transparent; }
.premium-effect-stage.effect-fireworks { background:transparent; }
.premium-effect-stage.effect-confetti { background:transparent; }
.premium-effect-stage.effect-lion { background:transparent; }
.premium-effect-stage.effect-ronaldo { background:transparent; }

.premium-lion-cinematic {
  align-items:flex-end;
  display:flex;
  height:100%;
  inset:0;
  justify-content:center;
  overflow:hidden;
  position:absolute;
  width:100%;
}
.premium-lion-actor {
  height:100dvh;
  max-width:none;
  overflow:hidden;
  position:relative;
  width:100vw;
}
.premium-lion-landscape {
  bottom:0;
  height:24%;
  inset-inline:0;
  overflow:hidden;
  pointer-events:none;
  position:absolute;
  z-index:2;
}
.premium-lion-earth {
  background:
    radial-gradient(ellipse at 18% 30%,rgba(174,108,42,.88),transparent 18%),
    radial-gradient(ellipse at 71% 45%,rgba(115,65,24,.82),transparent 24%),
    linear-gradient(to bottom,rgba(111,70,28,0),rgba(121,73,28,.84) 28%,rgba(60,35,16,.94));
  bottom:0;
  filter:drop-shadow(0 -4px 8px rgba(71,45,16,.2));
  height:82%;
  inset-inline:0;
  mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 100%);
  position:absolute;
}
.premium-lion-grass { bottom:46%;height:56%;inset-inline:0;position:absolute; }
.premium-lion-grass > span {
  animation:premiumLionGrass 1.1s ease-in-out infinite;
  animation-delay:var(--grass-delay);
  background:linear-gradient(to top,#173e1e,#5f9135 70%,#9fc96b);
  border-radius:90% 0 90% 0;
  bottom:0;
  height:var(--grass-height);
  left:var(--grass-x);
  opacity:.92;
  position:absolute;
  transform:rotate(var(--grass-lean));
  transform-origin:50% 100%;
  width:clamp(2px,.45vw,4px);
}
.premium-lion-runner,
.premium-lion-brake,
.premium-lion-figure {
  display:block;
  filter:drop-shadow(0 28px 24px rgba(25,9,0,.48)) drop-shadow(0 0 25px rgba(255,178,54,.26));
  object-fit:contain;
  object-position:center bottom;
  position:absolute;
  transform-origin:50% 88%;
  z-index:3;
}
.premium-lion-runner {
  animation:premiumLionRunAcross 3.05s cubic-bezier(.18,.5,.18,1) both;
  bottom:10%;
  height:54%;
  left:-92%;
  width:min(92vw,760px);
}
.premium-lion-brake {
  animation:premiumLionBrake 1.05s cubic-bezier(.18,.75,.22,1) 2.5s both;
  bottom:4%;
  height:72%;
  left:50%;
  opacity:0;
  width:min(88vw,710px);
}
.premium-lion-figure {
  animation:premiumLionRoarFigure 3s cubic-bezier(.16,.78,.21,1) 3.18s both;
  bottom:-2%;
  height:91%;
  left:50%;
  opacity:0;
  width:min(94vw,730px);
}
.premium-lion-aura {
  animation:premiumLionAura 6.2s ease-out both;
  background:radial-gradient(ellipse at center,rgba(255,218,122,.48) 0,rgba(255,151,28,.19) 35%,transparent 72%);
  border-radius:50%;
  bottom:5%;
  filter:blur(18px);
  height:72%;
  left:50%;
  position:absolute;
  transform:translateX(-50%);
  width:112%;
  z-index:1;
}
.premium-lion-roar {
  height:20%;
  left:52%;
  pointer-events:none;
  position:absolute;
  top:15%;
  width:28%;
  z-index:5;
}
.premium-lion-roar-ring {
  animation:premiumLionRoar 1.55s cubic-bezier(.12,.62,.26,1) both;
  animation-delay:calc(3.55s + var(--lion-ring) * 190ms);
  border:clamp(2px,.55vw,5px) solid rgba(255,224,140,.88);
  border-radius:50%;
  box-shadow:0 0 12px rgba(255,188,53,.76),inset 0 0 9px rgba(255,249,213,.64);
  height:48px;
  left:50%;
  opacity:0;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%) scale(.08);
  width:58px;
}
.premium-lion-sparks,
.premium-lion-dust { inset:0;pointer-events:none;position:absolute;z-index:4; }
.premium-lion-sparks > span {
  animation:premiumLionSpark var(--lion-duration) cubic-bezier(.15,.65,.28,1) both;
  animation-delay:var(--lion-delay);
  background:#ffd86d;
  border-radius:50%;
  box-shadow:0 0 9px #ffb42d,0 0 18px rgba(255,154,22,.72);
  height:var(--lion-size);
  left:var(--lion-x);
  opacity:0;
  position:absolute;
  top:var(--lion-y);
  width:var(--lion-size);
}
.premium-lion-dust > span {
  animation:premiumLionDust 2.5s ease-out both;
  animation-delay:calc(2.42s + var(--lion-dust-delay));
  background:radial-gradient(circle,rgba(255,218,150,.55),rgba(173,96,25,.24) 42%,transparent 72%);
  border-radius:50%;
  bottom:-3%;
  filter:blur(5px);
  height:var(--lion-dust-size);
  left:var(--lion-dust-x);
  opacity:0;
  position:absolute;
  transform:translate(-50%,20px) scale(.25);
  width:var(--lion-dust-width);
}
.premium-lion-trail { inset:0;pointer-events:none;position:absolute;z-index:4; }
.premium-lion-trail > span {
  animation:premiumLionTrail 1.45s cubic-bezier(.16,.72,.27,1) both;
  animation-delay:var(--trail-delay);
  background:linear-gradient(135deg,#c09251,#68401d);
  border-radius:50% 45% 55% 38%;
  bottom:12%;
  box-shadow:0 2px 3px rgba(46,25,9,.36);
  height:var(--trail-size);
  left:var(--trail-x);
  opacity:0;
  position:absolute;
  width:var(--trail-size);
}

.premium-ronaldo-cinematic {
  align-items:flex-end;
  display:flex;
  height:100%;
  inset:0;
  justify-content:center;
  overflow:hidden;
  position:absolute;
  width:100%;
}
.premium-ronaldo-actor {
  height:100dvh;
  overflow:hidden;
  position:relative;
  width:100vw;
}
.premium-ronaldo-stadium {
  background:
    linear-gradient(to bottom,rgba(0,20,35,0) 0,rgba(4,31,44,.08) 42%,rgba(2,27,28,.19) 72%,transparent 100%),
    radial-gradient(ellipse at 50% 96%,rgba(47,200,137,.17),transparent 55%);
  inset:0;
  overflow:hidden;
  position:absolute;
  z-index:1;
}
.premium-ronaldo-stadium > span {
  animation:premiumRonaldoStadiumLight 1.8s ease-in-out infinite;
  animation-delay:var(--stadium-delay);
  background:#e8fbff;
  border-radius:50%;
  box-shadow:0 0 7px #92e8ff,0 0 18px rgba(78,211,255,.58);
  height:clamp(2px,.45vw,4px);
  left:var(--stadium-x);
  opacity:0;
  position:absolute;
  top:var(--stadium-y);
  width:clamp(2px,.45vw,4px);
}
.premium-ronaldo-pitch {
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 6vw,rgba(0,0,0,.035) 6vw 12vw),
    linear-gradient(to bottom,rgba(24,131,78,0),rgba(17,127,71,.82) 24%,#09582d 100%);
  bottom:0;
  height:27%;
  inset-inline:0;
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 100%);
  position:absolute;
  z-index:2;
}
.premium-ronaldo-pitch::before {
  background:linear-gradient(90deg,transparent,rgba(217,255,227,.8),transparent);
  content:"";
  height:2px;
  left:4%;
  opacity:.72;
  position:absolute;
  right:4%;
  top:53%;
  transform:perspective(280px) rotateX(68deg);
}
.premium-ronaldo-touchline {
  border:clamp(2px,.4vw,4px) solid rgba(230,255,238,.78);
  border-radius:50%;
  bottom:-26%;
  height:72%;
  left:50%;
  opacity:.65;
  position:absolute;
  transform:translateX(-50%) perspective(240px) rotateX(68deg);
  width:min(56vw,650px);
}
.premium-ronaldo-goal {
  animation:premiumRonaldoGoalEnter 1.1s ease-out .85s both;
  bottom:12%;
  height:min(31vw,255px);
  position:absolute;
  right:2%;
  transform:perspective(580px) rotateY(-10deg);
  transform-origin:100% 100%;
  width:min(36vw,330px);
  z-index:3;
}
.premium-ronaldo-goal-ball {
  animation:premiumRonaldoGoalBall 1.15s cubic-bezier(.2,.72,.18,1) 3.03s both;
  bottom:47%;
  left:35%;
  opacity:0;
  position:absolute;
  z-index:0;
}
.premium-ronaldo-net {
  animation:premiumRonaldoNet 1.12s cubic-bezier(.18,.65,.2,1) 3.02s both;
  background:
    repeating-linear-gradient(90deg,rgba(234,251,255,.76) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(0deg,rgba(234,251,255,.68) 0 1px,transparent 1px 15px);
  border:2px solid rgba(244,255,255,.86);
  inset:0;
  opacity:.72;
  position:absolute;
  transform-origin:100% 50%;
  z-index:1;
}
.premium-ronaldo-goal-top,
.premium-ronaldo-goal-post {
  background:linear-gradient(90deg,#d5e9ea,#fff,#a8c7cc);
  border-radius:999px;
  box-shadow:0 2px 7px rgba(0,21,35,.45);
  position:absolute;
  z-index:2;
}
.premium-ronaldo-goal-top { height:clamp(5px,.75vw,8px);inset-inline:-3px;top:-3px; }
.premium-ronaldo-goal-post { bottom:-3px;right:-3px;top:-3px;width:clamp(5px,.75vw,8px); }
.premium-ronaldo-runner,
.premium-ronaldo-kick-windup,
.premium-ronaldo-kick-strike,
.premium-ronaldo-celebrate {
  display:block;
  filter:drop-shadow(0 25px 19px rgba(0,24,20,.44)) drop-shadow(0 0 18px rgba(255,221,83,.19));
  object-fit:contain;
  object-position:center bottom;
}
.premium-ronaldo-kick-windup,
.premium-ronaldo-kick-strike,
.premium-ronaldo-celebrate {
  position:absolute;
  transform-origin:50% 92%;
  z-index:5;
}
.premium-ronaldo-run-track {
  animation:premiumRonaldoRun 1.95s cubic-bezier(.14,.44,.16,1) both;
  bottom:7%;
  height:66%;
  left:-54%;
  position:absolute;
  transform-origin:50% 92%;
  width:min(76vw,650px);
  z-index:5;
}
.premium-ronaldo-runner {
  height:100%;
  inset:0;
  opacity:0;
  position:absolute;
  transition:opacity 82ms linear;
  width:100%;
}
.premium-ronaldo-runner.active {
  opacity:1;
}
.premium-ronaldo-kick-windup,
.premium-ronaldo-kick-strike {
  bottom:6%;
  height:64%;
  left:31%;
  opacity:0;
  width:min(48vw,500px);
}
.premium-ronaldo-kick-windup { animation:premiumRonaldoWindup .78s cubic-bezier(.18,.72,.2,1) 1.48s both; }
.premium-ronaldo-kick-strike { animation:premiumRonaldoStrike 1.48s cubic-bezier(.13,.72,.18,1) 1.91s both; }
.premium-ronaldo-dribble-ball,
.premium-ronaldo-ball,
.premium-ronaldo-goal-ball {
  background:
    radial-gradient(circle at 50% 48%,#121b22 0 10%,transparent 11%),
    radial-gradient(circle at 22% 31%,#162029 0 8%,transparent 9%),
    radial-gradient(circle at 75% 28%,#172129 0 7%,transparent 8%),
    radial-gradient(circle at 72% 72%,#172129 0 8%,transparent 9%),
    radial-gradient(circle at 30% 76%,#172129 0 7%,transparent 8%),
    radial-gradient(circle at 35% 27%,#fff 0,#f4fbff 55%,#a9bec8 100%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  box-shadow:0 7px 9px rgba(0,17,28,.4),0 0 12px rgba(255,255,255,.5);
  height:clamp(25px,4.4vw,51px);
  width:clamp(25px,4.4vw,51px);
}
.premium-ronaldo-dribble-ball {
  animation:premiumRonaldoDribbleBall 1.88s linear both;
  bottom:8%;
  left:70%;
  opacity:0;
  position:absolute;
  z-index:7;
}
.premium-ronaldo-ball {
  animation:premiumRonaldoBall 1.15s cubic-bezier(.12,.7,.2,1) 2.18s both;
  bottom:18%;
  left:50%;
  opacity:0;
  position:absolute;
  z-index:7;
}
.premium-ronaldo-goal-burst {
  bottom:27%;
  height:30px;
  pointer-events:none;
  position:absolute;
  right:15%;
  width:30px;
  z-index:7;
}
.premium-ronaldo-goal-burst > span {
  animation:premiumRonaldoGoalRay .82s ease-out both;
  animation-delay:calc(3.06s + var(--goal-ray-delay));
  background:linear-gradient(90deg,rgba(255,243,136,.96),transparent);
  border-radius:99px;
  height:2px;
  left:50%;
  opacity:0;
  position:absolute;
  top:50%;
  transform:rotate(var(--goal-ray)) translateX(5px) scaleX(.2);
  transform-origin:0 50%;
  width:clamp(24px,5vw,64px);
}
.premium-ronaldo-celebrate {
  animation:premiumRonaldoCelebrate 3.35s cubic-bezier(.15,.72,.2,1) 3.66s both;
  bottom:-3%;
  height:91%;
  left:50%;
  mask-image:radial-gradient(ellipse 56% 64% at 50% 53%,#000 48%,rgba(0,0,0,.9) 66%,transparent 92%);
  opacity:0;
  width:min(94vw,850px);
}
.premium-ronaldo-confetti { inset:0;pointer-events:none;position:absolute;z-index:8; }
.premium-ronaldo-confetti > span {
  animation:premiumRonaldoConfetti 2.45s cubic-bezier(.16,.63,.25,1) both;
  animation-delay:var(--ronaldo-delay);
  background:var(--ronaldo-color);
  border-radius:1px;
  box-shadow:0 0 7px var(--ronaldo-color);
  height:clamp(5px,.8vw,9px);
  left:var(--ronaldo-x);
  opacity:0;
  position:absolute;
  top:38%;
  width:clamp(2px,.35vw,4px);
}

@keyframes premiumRonaldoCard {
  0%,100% { transform:translate3d(-3px,1px,0) rotate(-2deg) scale(.96); }
  36% { transform:translate3d(4px,-3px,8px) rotate(1deg) scale(1.035); }
  58% { transform:translate3d(1px,-1px,8px) rotate(-3deg) scale(1.02); }
  70% { transform:translate3d(5px,-3px,8px) rotate(1.5deg) scale(1.045); }
}
@keyframes premiumRonaldoStadiumLight {
  0%,100% { opacity:.12;transform:scale(.65); }
  50% { opacity:.94;transform:scale(1.45); }
}
@keyframes premiumRonaldoGoalEnter {
  0% { opacity:0;transform:perspective(580px) rotateY(-18deg) translateX(30%) scale(.7); }
  100% { opacity:.94;transform:perspective(580px) rotateY(-10deg) translateX(0) scale(1); }
}
@keyframes premiumRonaldoNet {
  0%,100% { transform:skewX(0) scaleX(1);filter:brightness(1); }
  18% { transform:skewX(-9deg) scaleX(.9);filter:brightness(1.7); }
  38% { transform:skewX(7deg) scaleX(1.08); }
  57% { transform:skewX(-4deg) scaleX(.96); }
  75% { transform:skewX(2deg) scaleX(1.02); }
}
@keyframes premiumRonaldoRun {
  0% { left:-54%;opacity:0;transform:translate3d(0,7%,0) rotate(-2deg) scale(.66); }
  8% { opacity:1; }
  52% { left:12%;opacity:1;transform:translate3d(-18%,-1%,0) rotate(1deg) scale(.82); }
  84% { left:29%;opacity:1;transform:translate3d(-50%,0,0) rotate(-1deg) scale(.94); }
  100% { left:31%;opacity:0;transform:translate3d(-50%,1%,0) scale(.98); }
}
@keyframes premiumRonaldoWindup {
  0% { opacity:0;transform:translate(-50%,6%) rotate(-3deg) scale(.76); }
  20% { opacity:1;transform:translate(-50%,1%) rotate(-1deg) scale(.91); }
  72% { opacity:1;transform:translate(-50%,0) rotate(.5deg) scale(.99); }
  100% { opacity:0;transform:translate(-50%,-1%) rotate(1.4deg) scale(1.015); }
}
@keyframes premiumRonaldoStrike {
  0% { opacity:0;transform:translate(-50%,4%) rotate(-2deg) scale(.8); }
  13% { opacity:1;transform:translate(-50%,0) rotate(0) scale(.96); }
  38% { opacity:1;transform:translate(-50%,-1%) rotate(1.2deg) scale(1.015); }
  72% { opacity:1;transform:translate(-50%,0) rotate(-.5deg) scale(1); }
  100% { opacity:0;transform:translate(-50%,2%) rotate(-1deg) scale(.98); }
}
@keyframes premiumRonaldoDribbleBall {
  0% { bottom:8%;left:66%;opacity:0;transform:rotate(0) scale(.72); }
  7% { opacity:1; }
  23% { bottom:5%;left:69%;transform:rotate(220deg) scale(.78); }
  39% { bottom:12%;left:73%;transform:rotate(390deg) scale(.82); }
  56% { bottom:5%;left:70%;transform:rotate(570deg) scale(.84); }
  73% { bottom:12%;left:75%;transform:rotate(760deg) scale(.86); }
  91% { bottom:5%;left:72%;opacity:1;transform:rotate(970deg) scale(.88); }
  100% { bottom:10%;left:78%;opacity:0;transform:rotate(1080deg) scale(.9); }
}
@keyframes premiumRonaldoBall {
  0% { bottom:18%;left:61%;opacity:0;transform:rotate(0) scale(.88); }
  7% { opacity:1; }
  38% { bottom:35%;left:65%;opacity:1;transform:rotate(390deg) scale(.83); }
  72% { bottom:33%;left:80%;opacity:1;transform:rotate(730deg) scale(.7); }
  92% { bottom:30%;left:86%;opacity:1;transform:rotate(930deg) scale(.58); }
  100% { bottom:29%;left:88%;opacity:0;transform:rotate(1020deg) scale(.5); }
}
@keyframes premiumRonaldoGoalBall {
  0% { bottom:53%;left:18%;opacity:0;transform:rotate(0) scale(.62); }
  13% { opacity:1; }
  43% { bottom:36%;left:49%;opacity:1;transform:rotate(260deg) scale(.58); }
  72% { bottom:20%;left:69%;opacity:1;transform:rotate(470deg) scale(.53); }
  100% { bottom:13%;left:76%;opacity:.76;transform:rotate(590deg) scale(.49); }
}
@keyframes premiumRonaldoGoalRay {
  0% { opacity:0;transform:rotate(var(--goal-ray)) translateX(5px) scaleX(.2); }
  20% { opacity:1; }
  100% { opacity:0;transform:rotate(var(--goal-ray)) translateX(16px) scaleX(1.45); }
}
@keyframes premiumRonaldoCelebrate {
  0% { opacity:0;transform:translate(-50%,12%) scale(.64); }
  13% { opacity:1;transform:translate(-50%,1%) scale(.88); }
  27% { transform:translate(-50%,-1%) scale(.98) rotate(-.5deg); }
  36% { transform:translate(-50%,0) scale(1.015) rotate(.45deg); }
  48% { transform:translate(-50%,-.5%) scale(.995) rotate(-.2deg); }
  78% { opacity:1;transform:translate(-50%,0) scale(1); }
  100% { opacity:0;transform:translate(-50%,5%) scale(1.06); }
}
@keyframes premiumRonaldoConfetti {
  0% { opacity:0;transform:translate3d(0,-18vh,0) rotate(0) scale(.4); }
  16% { opacity:1; }
  78% { opacity:.92; }
  100% { opacity:0;transform:translate3d(var(--ronaldo-drift),50vh,0) rotate(620deg) scale(1.15); }
}

@keyframes premiumLionCard {
  0%,100% { transform:translate3d(0,2px,0) rotate(-1deg) scale(.96); }
  48% { transform:translate3d(0,-4px,10px) rotate(1deg) scale(1.045); }
  54% { transform:translate3d(-1px,-3px,10px) rotate(-1.2deg) scale(1.035); }
  61% { transform:translate3d(1px,-3px,10px) rotate(1deg) scale(1.04); }
}
@keyframes premiumLionGrass {
  0%,100% { transform:rotate(var(--grass-lean)) skewX(-2deg); }
  50% { transform:rotate(calc(var(--grass-lean) - 13deg)) skewX(-8deg); }
}
@keyframes premiumLionRunAcross {
  0% { left:-92%;opacity:0;transform:translate3d(0,10%,0) scale(.52); }
  7% { opacity:1; }
  58% { left:20%;opacity:1;transform:translate3d(-15%,-1%,0) scale(.72); }
  84% { left:50%;opacity:1;transform:translate3d(-50%,0,0) scale(.84); }
  100% { left:52%;opacity:0;transform:translate3d(-50%,3%,0) scale(.91); }
}
@keyframes premiumLionBrake {
  0% { opacity:0;transform:translate(-50%,10%) scale(.65); }
  16% { opacity:1;transform:translate(-50%,3%) scale(.82); }
  66% { opacity:1;transform:translate(-50%,0) scale(.96); }
  100% { opacity:0;transform:translate(-50%,-1%) scale(1.02); }
}
@keyframes premiumLionRoarFigure {
  0% { opacity:0;transform:translate(-50%,9%) scale(.7); }
  14% { opacity:1;transform:translate(-50%,0) scale(.91); }
  29% { transform:translate(-50%,-1%) scale(.98,1.02) rotate(-.4deg); }
  37% { transform:translate(-50%,0) scale(1.01,.99) rotate(.45deg); }
  45% { transform:translate(-50%,-.5%) scale(1.025,1.015) rotate(-.25deg); }
  58%,78% { opacity:1;transform:translate(-50%,0) scale(1); }
  100% { opacity:0;transform:translate(-50%,4%) scale(1.07); }
}
@keyframes premiumLionAura {
  0%,48%,100% { opacity:0;transform:translateX(-50%) scale(.4); }
  59% { opacity:.5;transform:translateX(-50%) scale(.9); }
  69% { opacity:.92;transform:translateX(-50%) scale(1.13); }
  84% { opacity:.42;transform:translateX(-50%) scale(1); }
}
@keyframes premiumLionRoar {
  0% { opacity:0;transform:translate(-50%,-50%) scale(.08); }
  14% { opacity:.95; }
  100% { opacity:0;transform:translate(-50%,-50%) scale(var(--lion-ring-scale)); }
}
@keyframes premiumLionSpark {
  0% { opacity:0;transform:translate3d(0,22px,0) scale(.2); }
  18% { opacity:1; }
  70% { opacity:.82; }
  100% { opacity:0;transform:translate3d(var(--lion-drift),-30vh,0) scale(1.8); }
}
@keyframes premiumLionDust {
  0% { opacity:0;transform:translate(-50%,20px) scale(.25); }
  24% { opacity:.78; }
  100% { opacity:0;transform:translate(-50%,-115px) scale(2.4); }
}
@keyframes premiumLionTrail {
  0% { opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.4); }
  18% { opacity:.94; }
  100% { opacity:0;transform:translate3d(var(--trail-drift),-18vh,0) rotate(280deg) scale(1.6); }
}

@keyframes premiumCinematicCardFloat {
  0%,100% { transform:translate3d(-2px,2px,0) rotate(-2deg) scale(.97); }
  50% { transform:translate3d(4px,-4px,16px) rotate(2deg) scale(1.04); }
}
@keyframes premiumCinematicAssetFloat {
  0%,100% { transform:translate3d(-2px,2px,0) rotateY(-4deg) rotateZ(-1deg) scale(.98); }
  50% { transform:translate3d(4px,-7px,28px) rotateY(6deg) rotateZ(1deg) scale(1.035); }
}
@media (max-width:600px) {
  .premium-effect-object { height:min(68vw,300px); width:min(68vw,300px); }
  .premium-effect-object.object-whale { height:min(50vw,220px); width:min(76vw,335px); }
  .premium-effect-stage.premium-effect-compact .premium-effect-object-core,
  .premium-effect-stage.premium-effect-compact .premium-effect-object.object-whale .premium-effect-object-core { filter:none; }
}

/* Dedicated archive inbox */
.archived-toggle { text-decoration:none; }
.archive-home-hero { min-height:190px; }
.archive-brand { flex:1;min-width:0; }
.archive-brand > div:last-child { min-width:0;transform:none; }
.archive-brand h1 { font-size:22px; }
.archive-brand p { color:rgba(204,226,243,.72);font-size:10px;line-height:1.35;margin:4px 0 0; }
.archive-back-button {
  align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  color:#fff;
  display:flex;
  flex:0 0 42px;
  height:42px;
  justify-content:center;
  text-decoration:none;
  width:42px;
}
.archive-back-button svg { fill:none;height:21px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.1;width:21px; }
.archive-view .section-heading { padding-top:18px; }
.archive-view .chat-list { padding-top:0; }
.archive-view .archived-chat-item { background:rgba(255,255,255,.92) !important; }
@media (max-width:600px) {
  .archive-home-hero { min-height:190px;padding-bottom:14px; }
}

/* Telegram-style chat folders */
.chat-folder-tabs {
  align-items:stretch;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #dfeaf4;
  display:flex;
  flex:0 0 auto;
  gap:3px;
  overflow-x:auto;
  padding:0 16px;
  scrollbar-width:none;
}
.chat-folder-tabs::-webkit-scrollbar { display:none; }
.chat-folder-tabs a {
  align-items:center;
  color:#7b8ea5;
  display:flex;
  flex:0 0 auto;
  font-size:12px;
  font-weight:800;
  gap:7px;
  justify-content:center;
  min-height:48px;
  padding:3px 12px 0;
  position:relative;
  text-decoration:none;
  white-space:nowrap;
}
.chat-folder-tabs a::after {
  background:transparent;
  border-radius:4px 4px 0 0;
  bottom:0;
  content:"";
  height:3px;
  left:8px;
  position:absolute;
  right:8px;
}
.chat-folder-tabs a.active { color:#078fe7; }
.chat-folder-tabs a.active::after { background:#078fe7; }
.chat-folder-tabs a b {
  align-items:center;
  background:#159bea;
  border-radius:999px;
  color:#fff;
  display:inline-flex;
  font-size:9px;
  height:18px;
  justify-content:center;
  min-width:18px;
  padding:0 5px;
}
.chat-folder-tabs .folder-tab-settings { font-size:17px;padding-inline:12px; }
.account-folder-link svg { color:#0d95e8; }

.folder-page { overflow:hidden; }
.folder-screen {
  background:linear-gradient(180deg,#eef5fb 0,#f8fbfe 100%);
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding-top:38px;
}
.folder-topbar {
  align-items:center;
  background:linear-gradient(135deg,#071b38,#0e416f);
  color:#fff;
  display:grid;
  flex:0 0 auto;
  grid-template-columns:46px 1fr 46px;
  min-height:82px;
  padding:12px 18px;
}
.folder-topbar > div { min-width:0;padding-left:10px; }
.folder-topbar small { color:#77ceff;font-size:9px;font-weight:900;letter-spacing:1.7px; }
.folder-topbar h1 { font-size:22px;line-height:1.08;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.folder-topbar .back-button,
.folder-add-button {
  align-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  color:#fff;
  display:flex;
  height:44px;
  justify-content:center;
  text-decoration:none;
  width:44px;
}
.folder-topbar .back-button svg { fill:none;height:22px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.1;width:22px; }
.folder-add-button { font-size:27px;font-weight:300;line-height:1; }
.folder-scroll { flex:1;min-height:0;overflow-y:auto;padding:18px 18px 34px; }
.folder-intro-card {
  align-items:center;
  background:linear-gradient(135deg,#0a325e,#0c86ce);
  border-radius:24px;
  box-shadow:0 16px 30px rgba(18,71,111,.18);
  color:#fff;
  display:flex;
  gap:15px;
  padding:18px;
}
.folder-intro-card > span { align-items:center;background:rgba(255,255,255,.14);border-radius:17px;display:flex;font-size:28px;height:58px;justify-content:center;width:58px; }
.folder-intro-card h2 { font-size:17px;margin:0 0 5px; }
.folder-intro-card p { color:rgba(228,242,253,.82);font-size:11px;line-height:1.55;margin:0; }
.folder-section-title { align-items:end;display:flex;justify-content:space-between;margin:25px 3px 10px; }
.folder-section-title small,.folder-editor-title small { color:#078fe7;font-size:9px;font-weight:900;letter-spacing:1.6px; }
.folder-section-title h2,.folder-editor-title h2 { color:#092848;font-size:17px;margin:3px 0 0; }
.folder-section-title > a { color:#078fe7;font-size:11px;font-weight:800;text-decoration:none; }
.folder-list,.folder-suggestions { display:grid;gap:9px; }
.folder-row,.folder-suggestions article {
  align-items:center;
  background:#fff;
  border:1px solid #dce8f2;
  border-radius:19px;
  box-shadow:0 8px 22px rgba(24,65,96,.07);
  display:flex;
  gap:12px;
  min-height:70px;
  padding:11px 12px;
}
.folder-row-icon,.folder-suggestions article > span { align-items:center;background:#eaf6ff;border-radius:14px;display:flex;font-size:22px;height:46px;justify-content:center;min-width:46px; }
.folder-row-main,.folder-row > div:nth-child(2),.folder-suggestions article > div { display:flex;flex:1;flex-direction:column;min-width:0;text-decoration:none; }
.folder-row b,.folder-suggestions b { color:#0b2b4f;font-size:13px; }
.folder-row small,.folder-suggestions small { color:#7d90a7;font-size:9.5px;line-height:1.35;margin-top:3px;overflow:hidden;text-overflow:ellipsis; }
.folder-row > i,.folder-suggestions article > i { color:#86a0b8;font-size:9px;font-style:normal;font-weight:800; }
.folder-row-actions { display:flex!important;flex:0 0 auto!important;flex-direction:row!important;gap:3px; }
.folder-row-actions form { margin:0; }
.folder-row-actions button,.folder-row-actions a {
  align-items:center;background:#eff7fd;border:0;border-radius:9px;color:#188dd5;display:flex;font-size:15px;height:29px;justify-content:center;padding:0;text-decoration:none;width:29px;
}
.folder-row-actions button:disabled { color:#c7d2dc;opacity:.55; }
.folder-suggestions article form { margin-left:auto; }
.folder-suggestions article button { background:#148fe0;border:0;border-radius:11px;color:#fff;font-size:10px;font-weight:800;padding:9px 12px; }
.folder-suggestions article > i { color:#33b989; }
.folder-empty { align-items:center;background:rgba(255,255,255,.62);border:1px dashed #c8dbea;border-radius:20px;color:#8193a6;display:flex;flex-direction:column;padding:22px;text-align:center; }
.folder-empty span { color:#1397e5;font-size:25px; }
.folder-empty b { color:#173959;font-size:13px;margin-top:6px; }
.folder-empty p { font-size:10px;line-height:1.45;margin:4px 0 0; }
.folder-limit-note { color:#8496aa;font-size:9.5px;line-height:1.55;margin:15px 8px 0;text-align:center; }

.folder-editor-scroll { padding-bottom:42px; }
.folder-editor-card,.folder-chat-picker {
  background:#fff;border:1px solid #dce8f2;border-radius:21px;box-shadow:0 8px 22px rgba(24,65,96,.07);margin:0 0 14px;overflow:hidden;
}
.folder-editor-card.identity { padding:17px; }
.folder-editor-card.identity > label { display:block; }
.folder-editor-card.identity > label > span,.folder-editor-card legend { color:#173959;font-size:11px;font-weight:800; }
.folder-editor-card.identity input[type="text"] { background:#f1f7fb;border:1px solid #d7e4ee;border-radius:13px;color:#092848;font-family:inherit;font-size:14px;font-weight:700;margin-top:7px;outline:0;padding:12px 13px;width:100%; }
.folder-editor-card.identity input[type="text"]:focus { border-color:#159be8;box-shadow:0 0 0 3px rgba(21,155,232,.11); }
.folder-editor-card.identity label small { color:#8ca0b4;display:block;font-size:9px;margin:5px 2px 0; }
.folder-editor-card fieldset { border:0;margin:18px 0 0;padding:0; }
.folder-icon-picker { display:flex;gap:7px;margin-top:8px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none; }
.folder-icon-picker::-webkit-scrollbar { display:none; }
.folder-icon-picker label { flex:0 0 auto; }
.folder-icon-picker input { height:0;opacity:0;position:absolute;width:0; }
.folder-icon-picker span { align-items:center;background:#eff6fb;border:2px solid transparent;border-radius:13px;display:flex;font-size:20px;height:43px;justify-content:center;width:43px; }
.folder-icon-picker input:checked + span { background:#e3f4ff;border-color:#159bea; }
.folder-editor-title { margin:23px 4px 10px; }
.folder-editor-title p { color:#8295aa;font-size:9.5px;line-height:1.45;margin:4px 0 0; }
.toggle-list > label { align-items:center;border-bottom:1px solid #edf2f6;display:flex;gap:11px;min-height:68px;padding:11px 15px; }
.toggle-list > label:last-child { border-bottom:0; }
.toggle-list .setting-icon { align-items:center;background:#edf7fe;border-radius:13px;display:flex;font-size:20px;height:43px;justify-content:center;min-width:43px; }
.toggle-list label > span:nth-child(2) { display:flex;flex:1;flex-direction:column; }
.toggle-list b { color:#0b2b4f;font-size:12px; }
.toggle-list small { color:#8295aa;font-size:9px;margin-top:3px; }
.toggle-list input { height:0;opacity:0;position:absolute;width:0; }
.toggle-list label > i { background:#ced8e2;border-radius:999px;height:25px;position:relative;transition:.2s;width:43px; }
.toggle-list label > i::after { background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);content:"";height:19px;left:3px;position:absolute;top:3px;transition:.2s;width:19px; }
.toggle-list input:checked + i { background:#20a4ec; }
.toggle-list input:checked + i::after { transform:translateX(18px); }
.folder-chat-picker summary { align-items:center;cursor:pointer;display:flex;list-style:none;min-height:62px;padding:11px 16px; }
.folder-chat-picker summary::-webkit-details-marker { display:none; }
.folder-chat-picker summary > span { display:flex;flex:1;flex-direction:column; }
.folder-chat-picker summary b { color:#0b2b4f;font-size:12px; }
.folder-chat-picker summary small { color:#8195aa;font-size:9px;margin-top:3px; }
.folder-chat-picker summary > i { color:#90a3b6;font-size:22px;font-style:normal;transform:rotate(0);transition:.2s; }
.folder-chat-picker[open] summary > i { transform:rotate(90deg); }
.folder-chat-picker > div { border-top:1px solid #edf2f6;max-height:280px;overflow-y:auto; }
.folder-chat-picker > div > label { align-items:center;border-bottom:1px solid #edf2f6;display:flex;gap:10px;min-height:58px;padding:9px 14px; }
.folder-chat-picker input { height:0;opacity:0;position:absolute;width:0; }
.folder-picker-avatar { align-items:center;background:#ebf6fd;border-radius:12px;display:flex;font-size:18px;height:40px;justify-content:center;min-width:40px; }
.folder-chat-picker label > span:nth-of-type(2) { display:flex;flex:1;flex-direction:column; }
.folder-chat-picker label b { color:#173959;font-size:11px; }
.folder-chat-picker label small { color:#8799ab;font-size:8.5px;margin-top:2px; }
.folder-chat-picker label > i { align-items:center;border:1px solid #c9d7e2;border-radius:50%;color:transparent;display:flex;font-size:10px;font-style:normal;height:22px;justify-content:center;width:22px; }
.folder-chat-picker input:checked ~ i { background:#159bea;border-color:#159bea;color:#fff; }
.danger-picker input:checked ~ i { background:#f05270;border-color:#f05270; }
.folder-save-button { background:linear-gradient(135deg,#087fc9,#17a8ed);border:0;border-radius:15px;box-shadow:0 10px 22px rgba(12,139,214,.23);color:#fff;font-size:12px;font-weight:900;margin-top:9px;padding:14px;width:100%; }
.folder-delete-form { margin:13px 0 0; }
.folder-delete-form button { background:#fff;border:1px solid #ffd5dd;border-radius:15px;color:#e04463;font-size:11px;font-weight:900;padding:13px;width:100%; }

@media (max-width:600px) {
  .chat-folder-tabs { padding-inline:10px; }
  .chat-folder-tabs a { min-height:46px;padding-inline:10px; }
  .folder-scroll { padding-inline:14px; }
}

/* Pull-down conversation search, like Telegram */
.home-screen {
  --search-pull-height:0px;
  --search-pull-margin:0px;
  --search-pull-progress:0;
  --search-pull-space:0px;
}
.home-screen .home-hero {
  min-height:calc(208px + var(--search-pull-space));
  transition:min-height .24s cubic-bezier(.2,.8,.2,1);
}
.home-screen .home-hero [data-home-search] {
  border-color:transparent;
  box-shadow:none;
  height:var(--search-pull-height);
  margin-top:var(--search-pull-margin);
  max-height:48px;
  min-height:0;
  opacity:var(--search-pull-progress);
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-12px);
  transform-origin:top center;
  transition:height .24s cubic-bezier(.2,.8,.2,1),margin-top .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease;
}
.home-screen .chat-list {
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.home-screen.search-pulling .home-hero,
.home-screen.search-pulling .home-hero [data-home-search] { transition:none; }
.home-screen.search-revealed {
  --search-pull-height:48px;
  --search-pull-margin:14px;
  --search-pull-progress:1;
  --search-pull-space:62px;
}
.home-screen.search-revealed .home-hero [data-home-search] {
  border-color:rgba(255,255,255,.68);
  box-shadow:0 14px 28px rgba(0,22,45,.2);
  pointer-events:auto;
  transform:translateY(0);
}
.home-screen.archive-view .home-hero {
  min-height:calc(128px + var(--search-pull-space));
}
@media (max-width:600px) {
  .home-screen .home-hero { min-height:calc(208px + var(--search-pull-space)); }
  .home-screen.archive-view .home-hero { min-height:calc(128px + var(--search-pull-space)); }
}

/* Facebook-inspired Status feed with circular Instagram-style Stories */
.status-page .phone-shell { background:#edf1f5; }
.status-page .status-screen { background:#edf1f5; padding-bottom:86px; }
.status-feed-topbar {
  align-items:center;background:#fff;border-bottom:1px solid #dfe5eb;display:flex;gap:12px;
  min-height:105px;padding:47px 18px 13px;position:relative;z-index:2;
}
.status-feed-brand { align-items:center;display:flex;flex:1;gap:10px;min-width:0; }
.status-feed-brand > img { background:#f1f7fc;border-radius:12px;height:40px;object-fit:contain;padding:4px;width:40px; }
.status-feed-brand small { color:#168fe6;display:block;font-size:8px;font-weight:900;letter-spacing:1.35px; }
.status-feed-brand h1 { color:#0b2c4d;font-size:24px;letter-spacing:-.6px;line-height:1;margin:4px 0 0; }
.status-feed-profile {
  align-items:center;background:linear-gradient(145deg,#e1f3ff,#addcf9);border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 0 2px #168fe6;color:#0d7fc6;display:flex;flex:0 0 42px;font-size:11px;font-weight:900;
  height:42px;justify-content:center;overflow:hidden;text-decoration:none;width:42px;
}
.status-feed-profile img { height:100%;object-fit:cover;width:100%; }
.status-page .status-content { padding:10px 0 24px; }
.status-page .status-content > .flash { margin:0 12px 9px; }

.status-story-section { background:#fff;border-bottom:1px solid #dfe5eb;border-top:1px solid #dfe5eb;padding:12px 0 9px; }
.status-story-section > header { align-items:center;display:flex;justify-content:space-between;padding:0 15px 10px; }
.status-story-section > header small { color:#168fe6;display:block;font-size:7px;font-weight:900;letter-spacing:1.15px; }
.status-story-section > header h2 { color:#142d47;font-size:15px;margin:2px 0 0; }
.status-story-section > header > span { background:#eef6fc;border-radius:999px;color:#66849e;font-size:8px;font-weight:800;padding:5px 9px; }
.status-story-rail { display:flex;gap:13px;overflow-x:auto;padding:2px 14px 8px;scroll-snap-type:x proximity;scrollbar-width:none; }
.status-story-rail::-webkit-scrollbar { display:none; }
.status-story-item { align-items:center;display:flex;flex:0 0 66px;flex-direction:column;position:relative;scroll-snap-align:start; }
.status-story-button { background:transparent;border:0;color:#23394f;cursor:pointer;font:inherit;margin:0;padding:0;text-align:center;text-decoration:none; }
.status-story-item.status-story-button { flex-basis:66px; }
.status-story-ring {
  align-items:center;background:linear-gradient(135deg,#ffca3a 2%,#ff477e 34%,#9b5de5 67%,#168fe6);border-radius:50%;
  box-shadow:0 5px 13px rgba(20,86,132,.16);display:flex;height:62px;justify-content:center;position:relative;width:62px;
}
.status-story-button:not(.has-story) .status-story-ring { background:#dbe5ed; }
.status-story-avatar {
  align-items:center;background:linear-gradient(145deg,#e8f6ff,#b6e1fa);border:3px solid #fff;border-radius:50%;color:#0f80c6;
  display:flex;font-size:11px;font-weight:900;height:55px;justify-content:center;overflow:hidden;width:55px;
}
.status-story-avatar img { height:100%;object-fit:cover;width:100%; }
.status-story-ring > i {
  align-items:center;background:#168fe6;border:2px solid #fff;border-radius:999px;bottom:-1px;color:#fff;display:flex;font-size:7px;
  font-style:normal;font-weight:900;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-2px;
}
.status-story-button > b { display:block;font-size:8px;margin-top:6px;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.status-story-add {
  align-items:center;background:#168fe6;border:2px solid #fff;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;
  font-weight:500;height:22px;justify-content:center;line-height:1;position:absolute;right:1px;top:40px;width:22px;z-index:2;
}
.status-story-empty { align-items:center;color:#8797a6;display:flex;flex:1;gap:8px;min-width:190px;padding:9px 8px; }
.status-story-empty > span { align-items:center;background:#edf4f9;border-radius:50%;color:#168fe6;display:flex;font-size:23px;height:42px;justify-content:center;width:42px; }
.status-story-empty p { font-size:8px;line-height:1.4;margin:0;max-width:125px; }

.status-page .status-composer {
  background:#fff;border:0;border-bottom:1px solid #dfe5eb;border-radius:0;border-top:1px solid #dfe5eb;box-shadow:none;margin:0;padding:0;
}
.status-page .status-story-section { margin-top:9px; }
.status-composer-quick { align-items:center;display:flex;gap:10px;padding:12px 14px; }
.status-composer-quick .status-author-avatar { flex-basis:43px;height:43px;width:43px; }
.status-composer-quick > button {
  background:#f7f9fb;border:1px solid #ccd6df;border-radius:999px;color:#536578;cursor:text;flex:1;font:inherit;font-size:11px;
  height:40px;min-width:0;padding:0 15px;text-align:left;
}
.status-composer-quick > .status-quick-photo { align-items:center;color:#168fe6;cursor:pointer;display:flex;flex:0 0 42px;height:42px;justify-content:center;padding:0;text-align:center;width:42px; }
.status-quick-photo svg { fill:none;height:23px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:23px; }
.status-composer-details { border-top:1px solid #e6ebf0;padding:13px 14px 14px; }
.status-composer-details.hidden { display:none; }
.status-page .status-composer-head { align-items:flex-start; }
.status-page .status-composer-head > div { flex:1; }
.status-page .status-composer-head > button { background:#edf1f5;border:0;border-radius:50%;color:#52667a;cursor:pointer;font-size:20px;height:31px;line-height:1;width:31px; }
.status-page .status-text-control { background:#fff;border:0;border-radius:0;margin-top:8px;padding:5px 0 4px; }
.status-page .status-text-control:focus-within { box-shadow:none; }
.status-page .status-text-control textarea { font-size:13px;min-height:86px; }
.status-page .status-image-preview { max-height:330px; }
.status-page .status-image-preview img { max-height:330px; }
.status-page .status-composer-actions { border-top:1px solid #e4eaf0;margin-top:8px;padding-top:10px; }
.status-page .status-image-button { background:#f4f8fb;border-color:#dfe8ef;color:#2f9e66; }
.status-page .status-publish { flex-basis:125px; }

.status-page .status-section-heading { padding:18px 15px 9px; }
.status-page .status-section-heading h2 { font-size:17px; }
.status-page .status-feed { gap:9px; }
.status-page .status-post {
  background:#fff;border:0;border-bottom:1px solid #dce3e9;border-radius:0;border-top:1px solid #dce3e9;box-shadow:0 1px 2px rgba(18,43,67,.06);overflow:visible;
}
.status-page .status-post > header { padding:12px 14px 9px; }
.status-page .status-post > header h3 { font-size:12px; }
.status-page .status-post > header time { font-size:8px; }
.status-page .status-expiry { background:transparent;color:#9aa7b3;font-size:10px;padding:0; }
.status-page .status-post > p { color:#263b50;font-size:12px;line-height:1.5;padding:4px 15px 13px; }
.status-page .status-media { background:#e7ebef;max-height:520px; }
.status-page .status-media img { max-height:520px;object-fit:contain; }
.status-page .profile-post-menu-wrap { margin-left:auto;z-index:30; }
.status-page .profile-post-menu-wrap > button { align-items:center;display:flex;font-size:21px;justify-content:center;line-height:1; }
.status-page .status-post.text-only {
  background:#fff!important;border-bottom:1px solid #dce3e9;border-top:1px solid #dce3e9;color:#263b50;min-height:0;
}
.status-page .status-post.text-only > header h3,
.status-page .status-post.text-only > header time,
.status-page .status-post.text-only > p { color:#263b50; }
.status-page .status-post.text-only .status-author-avatar { background:linear-gradient(145deg,#e2f3ff,#a9d9f8);border-color:#fff;color:#167dbd; }
.status-page .status-post.text-only > p { display:block;font-size:13px;font-weight:400;line-height:1.55;min-height:0;padding:5px 15px 15px;text-align:left; }
.status-page .status-post > footer { display:none; }
.status-page .status-social-actions {
  border-bottom:1px solid #e5eaf0;border-top:1px solid #e5eaf0;display:grid;gap:2px;grid-template-columns:1fr 1.2fr 1fr 1fr;margin:0 12px;padding:5px 0;
}
.status-page .status-social-actions form { min-width:0; }
.status-page .status-social-actions button,
.status-page .status-comment-count {
  align-items:center;background:transparent;border:0;border-radius:8px;color:#637486;display:flex;font-size:8px;font-style:normal;font-weight:800;
  gap:4px;height:33px;justify-content:center;margin:0;min-width:0;padding:0 4px;width:100%;
}
.status-page .status-social-actions button:hover { background:#f0f3f6; }
.status-page .status-social-actions button span { font-size:13px; }
.status-page .status-social-actions button em,
.status-page .status-comment-count em { font-size:7px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.status-page .status-social-actions button b,
.status-page .status-comment-count b { font-size:8px; }
.status-page .status-social-actions button.active { background:#e9f4fd;border:0;color:#087dcc; }
.status-page .status-social-actions button.active.dislike { background:#fff0f2;border:0;color:#d43b55; }
.status-page .status-comments { background:#fafbfd;border-top:0;max-height:none;padding:10px 14px; }
.status-page .status-comment-form { padding:9px 14px 12px; }
.status-page .status-comment-form input { font-size:10px;height:37px; }
.status-page .empty-status { border-radius:0;border-style:solid;margin:0; }

@media (max-width:600px) {
  .status-feed-topbar { min-height:105px;padding-top:max(47px,calc(env(safe-area-inset-top) + 37px)); }
  .status-page .status-screen { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* Full Facebook-style status editor */
body.status-editor-open { overflow:hidden; }
.status-quick-photo { background:transparent;border:0;padding:0; }
.status-editor-layer { align-items:center;background:rgba(4,12,22,.84);display:flex;inset:0;justify-content:center;position:fixed;z-index:1420; }
.status-editor-layer.hidden { display:none; }
.status-editor-modal { background:#fff;color:#142337;display:flex;flex-direction:column;height:min(920px,100dvh);max-width:430px;overflow:hidden;position:relative;width:min(430px,100vw); }
.status-editor-header { align-items:center;border-bottom:1px solid #e5e9ee;display:grid;flex:0 0 auto;grid-template-columns:48px 1fr 76px;min-height:74px;padding:max(20px,calc(env(safe-area-inset-top) + 8px)) 12px 8px; }
.status-editor-header > button:first-child { background:transparent;border:0;color:#17202d;font-size:31px;font-weight:300;height:42px;line-height:1;padding:0;width:42px; }
.status-editor-header h2 { font-size:17px;margin:0;text-align:center; }
.status-editor-submit { background:#168fe6;border:0;border-radius:10px;color:#fff;font-size:10px;font-weight:900;height:36px; }
.status-editor-submit:disabled { background:#dce3ea;color:#98a4b1; }
.status-editor-author { align-items:center;display:flex;flex:0 0 auto;gap:10px;padding:13px 15px 8px; }
.status-editor-author > span { align-items:center;background:#dff2ff;border-radius:50%;color:#0b83cc;display:flex;flex:0 0 45px;font-size:11px;font-weight:900;height:45px;justify-content:center;overflow:hidden;width:45px; }
.status-editor-author img { height:100%;object-fit:cover;width:100%; }
.status-editor-author b,.status-editor-author small { display:block; }
.status-editor-author b { font-size:14px; }
.status-editor-author small { color:#6d7d8d;font-size:8px;margin-top:3px; }
.status-editor-shortcuts { display:flex;flex:0 0 auto;gap:7px;overflow-x:auto;padding:4px 14px 9px;scrollbar-width:none; }
.status-editor-shortcuts::-webkit-scrollbar { display:none; }
.status-editor-shortcuts button { align-items:center;background:#fff;border:1px solid #dbe1e7;border-radius:999px;color:#202b37;display:flex;flex:0 0 auto;font:inherit;font-size:9px;font-weight:850;gap:6px;height:34px;padding:0 12px; }
.status-editor-shortcuts button span { color:#168fe6;font-size:14px; }
.status-editor-canvas { display:flex;flex:1 1 auto;min-height:210px;overflow:hidden;position:relative;transition:background .2s ease; }
.status-editor-canvas textarea { background:transparent;border:0;color:#192535;flex:1;font:inherit;font-size:18px;line-height:1.45;min-height:100%;outline:0;padding:17px 17px 60px;resize:none;width:100%; }
.status-editor-canvas:not(.status-background-none) { align-items:center;justify-content:center;margin:8px 14px;border-radius:18px; }
.status-editor-canvas:not(.status-background-none) textarea { color:#fff;font-size:28px;font-weight:850;min-height:260px;padding:55px 22px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.22); }
.status-editor-canvas:not(.status-background-none) textarea::placeholder { color:rgba(255,255,255,.72); }
.status-style-fab { background:linear-gradient(135deg,#ff3f81,#7d4bff);border:2px solid #fff;border-radius:11px;bottom:12px;box-shadow:0 5px 14px rgba(42,42,80,.22);color:#fff;font-size:14px;font-weight:900;height:38px;left:14px;position:absolute;width:42px; }
.status-editor-count { bottom:17px;color:#7b8997;font-size:8px;position:absolute;right:15px; }
.status-editor-canvas:not(.status-background-none) .status-editor-count { color:rgba(255,255,255,.8); }
.status-background-none { background:#fff; }
.status-background-rose { background:linear-gradient(145deg,#ff6ca8,#d42c73); }
.status-background-ocean { background:radial-gradient(circle at 20% 20%,#53ddf5,transparent 35%),linear-gradient(145deg,#063a70,#147ec4); }
.status-background-aurora { background:radial-gradient(circle at 80% 20%,#4cf1c3,transparent 28%),linear-gradient(135deg,#13265b,#7c47d7 55%,#ed5b9e); }
.status-background-sunset { background:linear-gradient(145deg,#ffbe6b,#f35e70 48%,#7e3cc7); }
.status-background-midnight { background:radial-gradient(circle at 70% 12%,#2c5f9c,transparent 32%),linear-gradient(160deg,#08121f,#111b38); }
.status-background-bloom { background:radial-gradient(circle at 20% 80%,#ffd8e8,transparent 34%),linear-gradient(135deg,#ff87ae,#74348d); }
.status-background-lime { background:linear-gradient(145deg,#e8ff27,#77c91f); }
.status-background-gold { background:linear-gradient(135deg,#fff0a0,#efad22 50%,#c56921); }
.status-background-violet { background:linear-gradient(135deg,#8d7aff,#6139be 48%,#221a6b); }
.status-background-hearts { background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.45) 0 4%,transparent 5%),radial-gradient(circle at 76% 70%,rgba(255,255,255,.28) 0 6%,transparent 7%),linear-gradient(145deg,#ff9ebe,#d92774); }
.status-background-birthday { background:radial-gradient(circle at 15% 20%,#ffe050 0 3%,transparent 4%),radial-gradient(circle at 80% 25%,#4ff3dc 0 3%,transparent 4%),linear-gradient(145deg,#6938ce,#f0478e); }
.status-background-coral { background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.3),transparent 27%),linear-gradient(145deg,#ff916f,#e74362); }
.status-background-emerald { background:radial-gradient(circle at 18% 22%,#71f7bf,transparent 30%),linear-gradient(145deg,#064d47,#0b9a72); }
.status-background-sky { background:radial-gradient(circle at 24% 18%,#fff 0 3%,transparent 4%),linear-gradient(150deg,#66d4ff,#3875d7); }
.status-background-lavender { background:radial-gradient(circle at 80% 15%,#fbd9ff,transparent 30%),linear-gradient(145deg,#9f7aea,#5c47b8); }
.status-background-candy { background:linear-gradient(135deg,#ff7eb3 0 28%,#8a7dff 28% 56%,#61d8ff 56% 78%,#ffe269 78%); }
.status-background-cocoa { background:radial-gradient(circle at 20% 20%,#d7a473,transparent 31%),linear-gradient(145deg,#2b1713,#75422e); }
.status-background-cosmos { background:radial-gradient(circle at 22% 25%,#fff 0 1.3%,transparent 1.8%),radial-gradient(circle at 74% 32%,#9cecff 0 1.5%,transparent 2%),radial-gradient(circle at 56% 72%,#e4b4ff 0 1.3%,transparent 1.8%),linear-gradient(145deg,#070923,#321261 52%,#0b4174); }
.status-background-tropical { background:radial-gradient(circle at 18% 22%,#fff47a,transparent 24%),linear-gradient(145deg,#00bda5,#0087c5 52%,#5546d8); }
.status-editor-meta { display:flex;flex:0 0 auto;flex-wrap:wrap;gap:6px;padding:6px 14px; }
.status-editor-meta.hidden { display:none; }
.status-editor-meta span { align-items:center;background:#eef6fc;border-radius:999px;color:#245675;display:flex;font-size:8px;font-weight:850;gap:5px;max-width:100%;padding:6px 9px; }
.status-editor-meta span b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.status-editor-meta span button { background:transparent;border:0;color:#71879a;font-size:14px;line-height:1;padding:0; }
.status-editor-media { flex:0 1 auto;margin:4px 14px 8px;max-height:260px;overflow:hidden;position:relative;text-align:center; }
.status-editor-media.hidden { display:none; }
.status-editor-media img,.status-editor-media video { border-radius:15px;display:block;height:auto;max-height:260px;object-fit:contain;width:100%; }
.status-editor-media audio { margin:25px 0;max-width:92%; }
.status-editor-media .hidden { display:none; }
.status-editor-media > button { background:rgba(9,22,38,.8);border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;font-size:21px;height:34px;position:absolute;right:8px;top:8px;width:34px; }
.status-editor-toolbar { align-items:center;border-top:1px solid #e3e8ed;display:grid;flex:0 0 auto;grid-template-columns:repeat(4,1fr);min-height:72px;padding:7px 9px max(8px,env(safe-area-inset-bottom)); }
.status-editor-toolbar label,.status-editor-toolbar button { align-items:center;background:transparent;border:0;color:#263849;display:flex;flex-direction:column;font:inherit;gap:3px;justify-content:center;min-height:50px; }
.status-editor-toolbar input { display:none; }
.status-editor-toolbar span { color:#168fe6;font-size:18px;font-weight:900; }
.status-editor-toolbar b { font-size:7px; }
.status-editor-sheet { inset:0;position:absolute;z-index:12; }
.status-editor-sheet.hidden { display:none; }
.status-editor-sheet-backdrop { background:rgba(3,11,20,.4);border:0;inset:0;position:absolute;width:100%; }
.status-editor-sheet > section { background:#f7f8fa;border-radius:24px 24px 0 0;bottom:0;box-shadow:0 -16px 50px rgba(6,17,31,.24);left:0;max-height:74%;min-height:42%;overflow:hidden;padding:0 15px max(14px,env(safe-area-inset-bottom));position:absolute;right:0; }
.status-editor-sheet-handle { background:#a8afb7;border-radius:9px;height:4px;margin:9px auto 2px;width:45px; }
.status-editor-sheet header { align-items:center;display:grid;grid-template-columns:45px 1fr 56px;min-height:48px; }
.status-editor-sheet header h3 { font-size:15px;margin:0;text-align:center; }
.status-editor-sheet header button { background:transparent;border:0;font:inherit;font-size:10px;font-weight:900; }
.status-editor-sheet header button:first-child { font-size:25px;font-weight:400; }
.status-editor-sheet header button:last-child { color:#168fe6; }
.status-editor-panel { max-height:calc(74vh - 70px);overflow-y:auto;padding:5px 0 18px; }
.status-editor-panel.hidden { display:none; }
.status-editor-panel > p { color:#536678;font-size:9px;font-weight:800;margin:2px 2px 10px; }
.status-background-grid { display:grid;gap:9px;grid-template-columns:repeat(4,1fr); }
.status-background-swatch { aspect-ratio:1;background-clip:padding-box;border:3px solid transparent;border-radius:16px;color:#6d7782;font-size:24px;min-width:0; }
.status-background-swatch.active { border-color:#168fe6;box-shadow:0 0 0 2px #fff inset; }
.status-editor-search,.status-editor-field,.status-giphy-search { align-items:center;background:#e9edf1;border-radius:14px;color:#7b8793;display:flex;gap:8px;margin-bottom:10px;min-height:44px;padding:0 12px; }
.status-editor-search input,.status-editor-field input,.status-giphy-search input { background:transparent;border:0;flex:1;font:inherit;font-size:10px;min-width:0;outline:0; }
.status-people-list,.status-music-list { display:grid; }
.status-people-list > button,.status-music-list > button { align-items:center;background:transparent;border:0;border-bottom:1px solid #e2e6ea;color:#1b2c3e;display:flex;gap:9px;min-height:57px;padding:6px 3px;text-align:left;width:100%; }
.status-people-list > button > span,.status-music-list > button > span { align-items:center;background:#dff2ff;border-radius:50%;color:#0b83cc;display:flex;flex:0 0 40px;font-size:13px;font-weight:900;height:40px;justify-content:center;overflow:hidden;width:40px; }
.status-people-list img { height:100%;object-fit:cover;width:100%; }
.status-people-list > button > div,.status-music-list > button > div { flex:1;min-width:0; }
.status-people-list b,.status-people-list small,.status-music-list b,.status-music-list small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.status-people-list b,.status-music-list b { font-size:10px; }
.status-people-list small,.status-music-list small { color:#7e8a97;font-size:8px;margin-top:3px; }
.status-people-list i,.status-music-list i { color:#168fe6;font-size:18px;font-style:normal;padding:7px; }
.status-people-list button.selected i { color:#21a56c; }
.status-current-location { background:#168fe6;border:0;border-radius:13px;color:#fff;font:inherit;font-size:10px;font-weight:900;min-height:43px;width:100%; }
.status-editor-panel > small { color:#84909c;display:block;font-size:8px;margin:10px 2px; }
.status-feeling-grid { display:grid;gap:7px;grid-template-columns:1fr 1fr; }
.status-feeling-grid button { background:#fff;border:1px solid #e0e5ea;border-radius:12px;color:#27394b;font:inherit;font-size:9px;font-weight:750;min-height:44px;padding:8px;text-align:left; }
.status-feeling-grid button.selected { background:#e9f6ff;border-color:#168fe6;color:#0879c3; }
.status-music-upload { align-items:center;background:#e9f6ff;border:1px solid #c8e8fb;border-radius:14px;color:#1a5275;display:flex;gap:10px;margin-bottom:8px;min-height:56px;padding:7px 10px; }
.status-music-upload input { display:none; }
.status-music-upload > span { align-items:center;background:#168fe6;border-radius:50%;color:#fff;display:flex;font-size:18px;height:36px;justify-content:center;width:36px; }
.status-music-upload b,.status-music-upload small { display:block;font-size:9px; }
.status-music-upload small { color:#718596;margin-top:3px; }
.status-giphy-search button { background:#168fe6;border:0;border-radius:10px;color:#fff;font:inherit;font-size:9px;font-weight:900;height:32px;padding:0 12px; }
.status-giphy-grid { align-content:start;display:grid;gap:9px;grid-auto-rows:112px;grid-template-columns:repeat(3,minmax(0,1fr));max-height:350px;overflow-x:hidden;overflow-y:auto;padding:2px 2px 10px;scrollbar-width:thin; }
.status-giphy-grid button { background:#e7ebef;border:1px solid #dce3e9;border-radius:13px;box-shadow:0 2px 8px rgba(22,42,61,.08);display:block;height:112px;min-height:0;overflow:hidden;padding:0;position:relative;width:100%; }
.status-giphy-grid img { display:block;height:100%;inset:0;object-fit:cover;position:absolute;width:100%; }
.status-editor-panel[data-status-panel="gif"] > a { color:#344b60;display:block;font-size:7px;font-weight:900;letter-spacing:.7px;margin-top:8px;text-align:right;text-decoration:none; }
.status-editor-empty { color:#788795;font-size:9px;padding:24px 10px;text-align:center; }
.status-post-context { display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 7px; }
.status-post-context span { background:#edf6fd;border-radius:999px;color:#347399;font-size:8px;font-weight:800;padding:5px 8px; }
.status-post-music { align-items:center;background:linear-gradient(135deg,#102e56,#196e9e);color:#fff;display:flex;gap:9px;margin:8px 12px 11px;padding:10px 11px;border-radius:14px; }
.status-post-music > span { align-items:center;background:rgba(255,255,255,.15);border-radius:50%;display:flex;font-size:19px;height:38px;justify-content:center;width:38px; }
.status-post-music > div { flex:1;min-width:0; }
.status-post-music b,.status-post-music small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.status-post-music b { font-size:10px; }.status-post-music small { color:#b8ddf4;font-size:7px;margin-top:3px; }
.status-post-music audio { height:30px;max-width:132px; }
.status-video-media video { display:block;max-height:420px;object-fit:contain;width:100%; }
.status-card-background-rose > p,.status-card-background-ocean > p,.status-card-background-aurora > p,.status-card-background-sunset > p,.status-card-background-midnight > p,.status-card-background-bloom > p,.status-card-background-lime > p,.status-card-background-gold > p,.status-card-background-violet > p,.status-card-background-hearts > p,.status-card-background-birthday > p,.status-card-background-coral > p,.status-card-background-emerald > p,.status-card-background-sky > p,.status-card-background-lavender > p,.status-card-background-candy > p,.status-card-background-cocoa > p,.status-card-background-cosmos > p,.status-card-background-tropical > p { color:#fff!important;font-size:22px!important;font-weight:850!important;line-height:1.35!important;margin:0!important;padding:48px 22px!important;text-align:center;text-shadow:0 2px 11px rgba(0,0,0,.24); }
.status-card-background-rose > p { background:linear-gradient(145deg,#ff6ca8,#d42c73); }.status-card-background-ocean > p { background:linear-gradient(145deg,#063a70,#147ec4); }.status-card-background-aurora > p { background:linear-gradient(135deg,#13265b,#7c47d7 55%,#ed5b9e); }.status-card-background-sunset > p { background:linear-gradient(145deg,#ffbe6b,#f35e70 48%,#7e3cc7); }.status-card-background-midnight > p { background:linear-gradient(160deg,#08121f,#111b38); }.status-card-background-bloom > p { background:linear-gradient(135deg,#ff87ae,#74348d); }.status-card-background-lime > p { background:linear-gradient(145deg,#9ad41e,#56a20b); }.status-card-background-gold > p { background:linear-gradient(135deg,#efbf43,#bd6f14); }.status-card-background-violet > p { background:linear-gradient(135deg,#8d7aff,#221a6b); }.status-card-background-hearts > p { background:linear-gradient(145deg,#ff9ebe,#d92774); }.status-card-background-birthday > p { background:linear-gradient(145deg,#6938ce,#f0478e); }.status-card-background-coral > p { background:linear-gradient(145deg,#ff916f,#e74362); }.status-card-background-emerald > p { background:linear-gradient(145deg,#064d47,#0b9a72); }.status-card-background-sky > p { background:linear-gradient(150deg,#66d4ff,#3875d7); }.status-card-background-lavender > p { background:linear-gradient(145deg,#9f7aea,#5c47b8); }.status-card-background-candy > p { background:linear-gradient(135deg,#ff7eb3,#8a7dff 46%,#61d8ff); }.status-card-background-cocoa > p { background:linear-gradient(145deg,#2b1713,#75422e); }.status-card-background-cosmos > p { background:linear-gradient(145deg,#070923,#321261 52%,#0b4174); }.status-card-background-tropical > p { background:linear-gradient(145deg,#00bda5,#0087c5 52%,#5546d8); }

@media (max-width:600px) {
  .status-editor-modal { height:100dvh;max-width:none;width:100vw; }
  body.keyboard-visible .status-editor-layer { align-items:flex-start;bottom:auto;height:var(--keyboard-viewport-height,100dvh);top:var(--keyboard-viewport-top,0); }
  body.keyboard-visible .status-editor-modal { height:100%; }
  body.keyboard-visible .status-editor-header { padding-top:7px; }
  body.keyboard-visible .status-editor-author { padding-top:7px; }
  body.keyboard-visible .status-editor-shortcuts { display:none; }
  body.keyboard-visible .status-editor-toolbar { padding-bottom:5px; }
}

/* Readable Facebook-style typography for the personal profile. */
.social-profile-identity .copy-username { font-size:12px; }
.social-profile-identity p { font-size:13px; }
.social-profile-actions a,.social-profile-actions label { font-size:13px; }
.social-profile-stats span { font-size:10px; }
.social-profile-about header small,
.social-profile-feed header small { font-size:9px; }
.social-profile-about header a,
.social-profile-feed header a { font-size:11px; }
.social-profile-about li small { font-size:10px; }
.social-profile-about li b { font-size:12px; }
.social-profile-editor > summary b { font-size:13px; }
.social-profile-editor > summary small { font-size:10px; }
.profile-feed-card h3 { font-size:14px; }
.profile-feed-card header small { font-size:10px; }
.profile-post-menu b { font-size:12px; }
.profile-post-menu small { font-size:10px; }
.profile-pinned-label { font-size:10px; }
.profile-post-context span { font-size:10px; }
.profile-feed-card > p { font-size:14px; }
.profile-feed-card > footer { font-size:11px; }
.social-profile-empty p,
.social-profile-empty a,.social-profile-empty button { font-size:11px; }
.profile-post-dialog [data-profile-edit-panel] label,
.profile-post-dialog [data-profile-privacy-panel] > p { font-size:12px; }
.profile-post-dialog [data-profile-privacy-panel] b { font-size:13px; }
.profile-post-dialog [data-profile-privacy-panel] small { font-size:10px; }

/* Telegram-inspired active device manager */
.devices-page { background:#eaf2f8; }
.devices-page .phone-shell { background:#f4f7fa; }
.devices-statusbar { background:#07182f;color:#fff; }
.devices-screen { background:#f4f7fa;display:flex;flex-direction:column;height:100%;min-height:0;padding-top:37px; }
.devices-topbar {
  align-items:center;background:linear-gradient(135deg,#07182f,#0b3e70);color:#fff;display:grid;flex:0 0 auto;
  grid-template-columns:48px 1fr 44px;min-height:78px;padding:8px 14px 10px;position:relative;
}
.devices-topbar .back-button { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;height:39px;width:39px; }
.devices-topbar .back-button svg { fill:none;height:21px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:21px; }
.devices-topbar small { color:#7fd0ff;display:block;font-size:7px;font-weight:900;letter-spacing:1.35px;margin-bottom:4px; }
.devices-topbar h1 { font-size:18px;letter-spacing:-.35px;margin:0; }
.devices-shield { align-items:center;background:rgba(103,202,255,.14);border-radius:13px;display:flex;height:39px;justify-content:center;width:39px; }
.devices-shield svg { fill:none;height:22px;stroke:#8ed7ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:22px; }
.devices-scroll { flex:1;min-height:0;overflow-y:auto;padding:14px 13px calc(24px + env(safe-area-inset-bottom));scrollbar-width:none; }
.devices-scroll::-webkit-scrollbar { display:none; }
.devices-flash { margin:0 0 11px; }
.devices-hero {
  align-items:center;background:linear-gradient(135deg,#0a2a4f,#0c73b9);border-radius:22px;box-shadow:0 14px 30px rgba(13,75,119,.18);
  color:#fff;display:flex;gap:13px;overflow:hidden;padding:17px;position:relative;
}
.devices-hero::after { border:1px solid rgba(255,255,255,.12);border-radius:50%;content:'';height:140px;position:absolute;right:-55px;top:-68px;width:140px; }
.devices-hero > span { align-items:center;background:linear-gradient(145deg,#dff5ff,#fff);border-radius:18px;box-shadow:0 8px 20px rgba(2,28,53,.24);display:flex;flex:0 0 57px;height:57px;justify-content:center;position:relative;width:57px; }
.devices-hero > span svg { fill:none;height:29px;stroke:#087fcc;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:29px; }
.devices-hero > span i { background:#3fd399;border:3px solid #fff;border-radius:50%;bottom:-2px;height:13px;position:absolute;right:-2px;width:13px; }
.devices-hero > div { min-width:0;position:relative;z-index:1; }
.devices-hero small { color:#89d9ff;font-size:7px;font-weight:900;letter-spacing:1.4px; }
.devices-hero h2 { font-size:15px;letter-spacing:-.2px;margin:5px 0; }
.devices-hero p { color:#c5e5f8;font-size:9px;line-height:1.45;margin:0; }
.devices-section { margin-top:19px; }
.devices-section > header { align-items:end;display:flex;justify-content:space-between;margin:0 3px 8px; }
.devices-section > header small { color:#168fe6;display:block;font-size:7px;font-weight:900;letter-spacing:1.3px;margin-bottom:4px; }
.devices-section > header h2 { color:#17283d;font-size:15px;letter-spacing:-.25px;margin:0; }
.devices-section > header > span { align-items:center;background:#e3f2fc;border-radius:999px;color:#087ecc;display:flex;font-size:8px;font-weight:900;height:23px;justify-content:center;min-width:23px;padding:0 8px; }
.devices-section > header .device-safe-label { background:#e5f8f0;color:#1ca36e; }
.devices-list { background:#fff;border:1px solid #e3eaf0;border-radius:20px;box-shadow:0 9px 24px rgba(28,66,99,.07);overflow:hidden; }
.device-session { align-items:center;display:flex;gap:11px;min-height:82px;padding:12px 12px;position:relative; }
.device-session + .device-session { border-top:1px solid #e8edf2; }
.device-session.current { background:linear-gradient(135deg,#fff,#f4fbff); }
.device-session-icon { align-items:center;background:linear-gradient(145deg,#e3f4ff,#c9e9fb);border-radius:16px;color:#087fcd;display:flex;flex:0 0 50px;height:50px;justify-content:center;width:50px; }
.device-session-icon.phone { background:linear-gradient(145deg,#dff7ef,#c7eedf);color:#199968; }
.device-session-icon.tablet { background:linear-gradient(145deg,#eee8ff,#ded2ff);color:#7357ce; }
.device-session-icon svg { fill:none;height:27px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.65;width:27px; }
.device-session-copy { flex:1;min-width:0; }
.device-session-copy > div { align-items:center;display:flex;gap:6px;min-width:0; }
.device-session-copy h3 { color:#17283d;font-size:12px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.device-session-copy > div > b { background:#e3f8ef;border-radius:999px;color:#159967;flex:0 0 auto;font-size:6px;letter-spacing:.55px;padding:4px 6px; }
.device-session-copy p { color:#50677d;font-size:8px;margin:4px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.device-session-copy small { color:#8b9aa9;display:block;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.device-session.current .device-session-copy small { color:#20a873;font-weight:800; }
.device-session > form { flex:0 0 auto; }
.device-session > form button { background:#fff0f2;border:0;border-radius:50%;color:#d84c61;font-size:21px;height:32px;line-height:1;width:32px; }
.terminate-all-form { margin-top:12px; }
.terminate-all-form > button { align-items:center;background:#fff;border:1px solid #f2dfe3;border-radius:18px;color:#d84257;display:flex;font:inherit;gap:10px;padding:11px 12px;text-align:left;width:100%; }
.terminate-all-form > button > span { align-items:center;background:#fff0f2;border-radius:13px;display:flex;height:40px;justify-content:center;width:40px; }
.terminate-all-form svg { fill:none;height:22px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:22px; }
.terminate-all-form div { flex:1;min-width:0; }
.terminate-all-form b,.terminate-all-form small { display:block; }
.terminate-all-form b { font-size:10px; }
.terminate-all-form small { color:#a97b83;font-size:7px;margin-top:3px; }
.terminate-all-form i { font-size:19px;font-style:normal; }
.devices-empty { color:#8494a4;padding:30px 16px;text-align:center; }
.devices-empty > span { align-items:center;background:#e4f8f0;border-radius:50%;color:#1aa471;display:flex;font-size:20px;height:44px;justify-content:center;margin:0 auto 9px;width:44px; }
.devices-empty b { color:#25394e;display:block;font-size:11px; }
.devices-empty p { font-size:8px;line-height:1.45;margin:5px auto 0;max-width:230px; }
.devices-security-note { align-items:flex-start;background:#eaf4fb;border:1px solid #dcebf6;border-radius:17px;color:#517086;display:flex;gap:9px;margin-top:17px;padding:12px; }
.devices-security-note > span { align-items:center;background:#fff;border-radius:50%;color:#168fe6;display:flex;flex:0 0 31px;font-size:17px;height:31px;justify-content:center;width:31px; }
.devices-security-note b { color:#24445d;display:block;font-size:9px;margin-bottom:3px; }
.devices-security-note p { font-size:7px;line-height:1.5;margin:0; }

@media (max-width:600px) {
  .devices-screen { padding-top:max(37px,env(safe-area-inset-top)); }
}

/* QR device pairing */
.devices-add-top { align-items:center;background:rgba(103,202,255,.14);border:0;border-radius:13px;color:#8ed7ff;display:flex;height:39px;justify-content:center;width:39px; }
.devices-add-top svg { fill:none;height:22px;stroke:currentColor;stroke-linecap:round;stroke-width:1.8;width:22px; }
.add-device-card { align-items:center;background:linear-gradient(135deg,#fff,#eef8ff);border:1px solid #d7eaf7;border-radius:19px;box-shadow:0 8px 22px rgba(28,74,110,.08);color:#183149;display:flex;gap:11px;margin-top:12px;padding:12px;text-align:left;width:100%; }
.add-device-card > span { align-items:center;background:linear-gradient(145deg,#178fe6,#0b70bd);border-radius:14px;color:#fff;display:flex;flex:0 0 44px;height:44px;justify-content:center;width:44px; }.add-device-card svg { fill:none;height:24px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:24px; }
.add-device-card > div { display:flex;flex:1;flex-direction:column;min-width:0; }.add-device-card small { color:#168fe6;font-size:6px;font-weight:900;letter-spacing:1px; }.add-device-card b { font-size:11px;margin-top:2px; }.add-device-card p { color:#778b9e;font-size:7px;line-height:1.35;margin:3px 0 0; }.add-device-card > i { color:#188dda;font-size:19px;font-style:normal; }
.device-scanner-layer { align-items:flex-end;background:rgba(3,15,29,.78);display:flex;inset:0;position:absolute;z-index:90; }.device-scanner-dialog { background:#f6f9fc;border-radius:27px 27px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.25);max-height:calc(100% - 28px);overflow-y:auto;padding:0 15px calc(20px + env(safe-area-inset-bottom));width:100%; }
.device-scanner-dialog > header { align-items:center;display:grid;grid-template-columns:43px 1fr 38px;padding:15px 0 12px; }.device-scanner-dialog > header button { background:#e9f0f6;border:0;border-radius:50%;color:#354a5f;font-size:22px;height:36px;width:36px; }
.device-scanner-dialog > header small { color:#168fe6;display:block;font-size:6px;font-weight:900;letter-spacing:1.2px; }.device-scanner-dialog > header h2 { font-size:16px;margin:3px 0 0; }.device-scanner-dialog > header > span { align-items:center;background:#e6f5ff;border-radius:12px;color:#168fe6;display:flex;height:36px;justify-content:center;width:36px; }.device-scanner-dialog > header svg { fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:20px; }
.device-scanner-camera { background:#07182f;border-radius:22px;height:310px;overflow:hidden;position:relative; }.device-scanner-camera video { height:100%;object-fit:cover;width:100%; }
.device-scanner-placeholder { align-items:center;background:radial-gradient(circle at 50% 40%,#153f69,#07182f 70%);color:#bcd9ed;display:flex;flex-direction:column;gap:9px;inset:0;justify-content:center;position:absolute; }.device-scanner-placeholder > span { align-items:center;background:rgba(255,255,255,.08);border-radius:18px;color:#78ceff;display:flex;height:62px;justify-content:center;width:62px; }.device-scanner-placeholder svg { fill:none;height:34px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:34px; }.device-scanner-placeholder b { font-size:9px; }
.device-scanner-frame { height:206px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:206px; }.device-scanner-frame > i { border-color:#61caff;border-style:solid;height:36px;position:absolute;width:36px;z-index:2; }.device-scanner-frame > i:nth-child(1){border-width:4px 0 0 4px;border-radius:15px 0 0;left:0;top:0}.device-scanner-frame > i:nth-child(2){border-width:4px 4px 0 0;border-radius:0 15px 0 0;right:0;top:0}.device-scanner-frame > i:nth-child(3){border-width:0 0 4px 4px;border-radius:0 0 0 15px;bottom:0;left:0}.device-scanner-frame > i:nth-child(4){border-width:0 4px 4px 0;border-radius:0 0 15px;bottom:0;right:0}
.device-scanner-frame > span { animation:scannerLine 2s ease-in-out infinite;background:linear-gradient(90deg,transparent,#52c5ff,transparent);box-shadow:0 0 12px #48bdff;height:2px;left:10px;position:absolute;right:10px;top:12px; }@keyframes scannerLine { 0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(178px);opacity:1} }.device-scanner-layer.scan-success .device-scanner-frame > span { background:#44df9e;box-shadow:0 0 18px #44df9e; }
.device-scanner-copy { padding:12px 4px 10px;text-align:center; }.device-scanner-copy b { color:#233b51;font-size:10px; }.device-scanner-copy b.error { color:#ce4055; }.device-scanner-copy p { color:#8090a0;font-size:7px;line-height:1.45;margin:4px auto 0;max-width:290px; }
.device-scanner-gallery { align-items:center;background:#fff;border:1px solid #dfe8ef;border-radius:17px;display:flex;gap:10px;padding:10px 11px; }.device-scanner-gallery input { display:none; }.device-scanner-gallery > span { align-items:center;background:#eaf6ff;border-radius:12px;color:#168fe6;display:flex;height:40px;justify-content:center;width:40px; }.device-scanner-gallery svg { fill:none;height:22px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:22px; }.device-scanner-gallery > div { display:flex;flex:1;flex-direction:column; }.device-scanner-gallery b { font-size:9px; }.device-scanner-gallery small { color:#8495a5;font-size:7px;margin-top:3px; }.device-scanner-gallery > i { color:#168fe6;font-size:18px;font-style:normal; }
.device-scanner-dialog > aside { align-items:center;color:#788b9b;display:flex;font-size:7px;gap:7px;justify-content:center;margin-top:11px; }.device-scanner-dialog > aside span { color:#168fe6;font-size:14px; }.device-scanner-dialog > aside p { margin:0; }
.qr-connect-screen { background:#f4f7fa;display:flex;flex-direction:column;height:100%;padding-top:37px; }.qr-connect-content { flex:1;overflow-y:auto;padding:24px 22px calc(28px + env(safe-area-inset-bottom));text-align:center; }
.qr-connect-illustration { height:145px;margin:0 auto 18px;position:relative;width:230px; }.qr-connect-illustration::before { background:radial-gradient(circle,#b9e6ff 0,rgba(185,230,255,0) 70%);content:'';inset:-30px;position:absolute; }.qr-connect-illustration span { position:absolute; }.qr-connect-illustration .laptop { bottom:6px;color:#0c75bd;left:15px; }.qr-connect-illustration .laptop svg { fill:#dff4ff;height:110px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:145px; }.qr-connect-illustration .phone { bottom:4px;color:#7257d7;right:23px;transform:rotate(6deg); }.qr-connect-illustration .phone svg { fill:#efeaff;height:106px;stroke:currentColor;stroke-linecap:round;stroke-width:1.5;width:70px; }.qr-connect-illustration .phone i { align-items:center;background:#35d391;border:3px solid #fff;border-radius:50%;color:#fff;display:flex;font-size:11px;font-style:normal;height:26px;justify-content:center;position:absolute;right:-5px;top:4px;width:26px; }
.qr-connect-content > small { color:#168fe6;font-size:7px;font-weight:900;letter-spacing:1.4px; }.qr-connect-content > h2 { color:#182c42;font-size:21px;letter-spacing:-.5px;margin:7px 0; }.qr-connect-content > p { color:#708398;font-size:9px;line-height:1.5;margin:0 auto 17px;max-width:320px; }
.qr-target-device { align-items:center;background:#fff;border:1px solid #dfe8ef;border-radius:19px;box-shadow:0 9px 22px rgba(30,70,104,.07);display:flex;gap:12px;padding:12px;text-align:left; }.qr-target-device > span { align-items:center;background:linear-gradient(145deg,#dff3ff,#c9e9fb);border-radius:15px;color:#0d82cf;display:flex;height:49px;justify-content:center;width:49px; }.qr-target-device svg { fill:none;height:27px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:27px; }.qr-target-device div { display:flex;flex-direction:column;min-width:0; }.qr-target-device b { color:#193149;font-size:11px; }.qr-target-device p { color:#5d758a;font-size:8px;margin:3px 0; }.qr-target-device small { color:#8c9baa;font-size:7px; }
.qr-connect-confirm { align-items:center;background:linear-gradient(135deg,#168fe6,#0875c3);border:0;border-radius:15px;box-shadow:0 9px 20px rgba(10,120,201,.23);color:#fff;display:flex;font-size:10px;font-weight:900;height:49px;justify-content:center;margin-top:14px;text-decoration:none;width:100%; }.qr-connect-confirm b { font-size:18px;margin-left:8px; }.qr-connect-confirm.link { margin-top:22px; }.qr-connect-cancel { color:#6f8294;display:block;font-size:9px;font-weight:800;margin-top:14px;text-decoration:none; }.qr-connect-content > aside { background:#fff7e9;border:1px solid #f5e6c9;border-radius:16px;color:#8b6e3d;margin-top:20px;padding:12px;text-align:left; }.qr-connect-content > aside b { display:block;font-size:8px; }.qr-connect-content > aside p { font-size:7px;line-height:1.5;margin:4px 0 0; }