/* MUA Chat — compact premium phone-led redesign */
:root{--navy:#07131f;--navy2:#0b1c2b;--gold:#f4c84d;--gold2:#e3ad25;--blue:#238cff;--mint:#23c995;--paper:#eef5fb;--card:#fff;--line:#dfe8ef;--text:#10202d;--muted:#718293;--shadow:0 14px 40px rgba(14,34,52,.09)}
html{background:var(--paper)}body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 85% 8%,rgba(125,191,255,.22),transparent 26%),#f6f9fc;color:var(--text)}
.app{grid-template-columns:320px minmax(0,1fr);min-height:100vh}.side{position:sticky;top:0;height:100vh;overflow:auto;padding:22px 16px;background:linear-gradient(180deg,#061321,#071a2d 55%,#06111b);color:#fff;border-right:1px solid #142b3d;box-shadow:8px 0 30px rgba(7,19,31,.08)}
.brand{display:flex;align-items:center;gap:12px;font-size:26px;letter-spacing:-.7px}.brandMark{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe58b,var(--gold));color:#0b1823;font-weight:1000;box-shadow:0 9px 26px rgba(244,200,77,.22)}.brandCopy b{display:block}.brandCopy small{display:block;margin-top:3px;color:#d0d8e0;font-size:10px;letter-spacing:.75px;text-transform:uppercase}
.profile{margin-top:10px;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(255,255,255,.045)}.profile b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px}.profile span{display:block;color:#91a6b8;margin:4px 0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav{display:flex;flex-direction:column;gap:7px}.nav button{display:flex;align-items:center;gap:10px;margin:0;padding:15px 16px;border:1px solid transparent;border-radius:16px;color:#d2dce5;transition:.16s ease;font-size:15px}.nav button:hover{color:#fff;background:rgba(255,255,255,.045)}.nav button.on{color:#fff;background:linear-gradient(90deg,rgba(244,200,77,.17),rgba(255,255,255,.035));border-color:rgba(244,200,77,.22);box-shadow:inset 4px 0 var(--gold)}.studio{margin-top:auto;padding:16px;border-radius:16px;color:#ffe38a;border:1px solid rgba(244,200,77,.26);background:linear-gradient(135deg,rgba(244,200,77,.11),rgba(35,201,149,.05));font-size:15px}
.main{padding:22px clamp(18px,2.4vw,34px);min-width:0;max-width:1900px;width:100%;margin:auto}.premiumTop{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:12px}.premiumTop h1{font-size:clamp(42px,5vw,68px);margin:0;line-height:.95;letter-spacing:-3px}.premiumTop p{margin:8px 0 0;color:#486279;font-size:19px;max-width:720px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:2px;color:#46627b}.topBrand{display:flex;align-items:center;gap:10px}.topBrand small{display:block;color:#687f91}.topSearch,.topBell{width:46px;height:46px;border:1px solid #d8e3ec;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow)}.miniBrand{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe58b,var(--gold));font-weight:1000}.quickActions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px}.quickActions button{min-height:54px;padding:0 22px;font-size:15px}.status{background:#e9fff7;color:#116349;border:1px solid #bdeedc;padding:8px 12px}.notice{background:#ebfff6;color:#087b55;border:1px solid #c9f4e2;border-radius:13px;padding:12px 14px}.muted{color:var(--muted)}
.chatStage{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start}.chat{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:660px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.list{padding:14px;background:#fff;border-right:1px solid var(--line)}.searchChats{padding:13px 15px;border-radius:17px;background:#f5f8fb;color:#778a99;margin-bottom:10px}.listFilters{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}.pill{background:#edf4f7;color:#315d65}.activePill{background:#ffe797;color:#302610}.listTop{gap:8px}.listTop .btn,.listTop .btn2{border-radius:13px}.row{position:relative;min-height:66px;margin:5px 0;padding:13px 12px 13px 62px;border:1px solid transparent;border-radius:18px;transition:.15s}.row:before{content:attr(data-initial);position:absolute;left:11px;top:11px;width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#153a54,#0a2031);color:#fff;font-size:12px;font-weight:900}.row:hover{background:#f9fbfd;border-color:#e7ecef}.row.on{background:linear-gradient(90deg,#fff8dd,#fffdf7);border-color:#efd777;box-shadow:0 7px 18px rgba(129,91,0,.07)}.pane{min-width:0}.head{min-height:72px;padding:16px 20px;display:flex;align-items:center;background:#fff;border-bottom:1px solid var(--line);font-size:18px;font-weight:900}.msgs{padding:22px;background:linear-gradient(rgba(249,251,253,.92),rgba(249,251,253,.92)),radial-gradient(circle,#d7e3eb 1px,transparent 1px);background-size:auto,28px 28px}.bubble{max-width:min(72%,650px);padding:12px 14px;border-radius:18px 18px 18px 6px;border:1px solid #e2e8ec;background:#fff;box-shadow:0 5px 14px rgba(11,28,43,.05)}.bubble.me{margin-left:auto;border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,#fff7d1,#ffefae);border-color:#ecd46c}.composer{padding:13px 15px;background:#fff;align-items:center}.composer input[type=text]{padding:14px 15px;border-radius:18px;background:#f5f7f8;border:1px solid #dfe6ea}.toolbar{display:flex;gap:6px}.iconbtn{border-radius:15px}.sendRound{width:48px;height:48px;border-radius:50%;padding:0;font-size:20px}.replybar{background:#fff9df;border-color:#edda8c}.btn{border-radius:14px;background:linear-gradient(145deg,#ffdc69,var(--gold2));color:#111c25;border:1px solid #e0ae2b;box-shadow:0 6px 16px rgba(227,173,37,.17)}.btn:hover{transform:translateY(-1px)}.btn2,.iconbtn{border-radius:14px;background:#fff;border:1px solid #dce4e9}.box,.card,.product,.statusCard,.callTile,.communityCard{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
/* Compact promo: decorative, never allowed to dominate or block chat */
.phonePromo{position:relative;width:210px;min-height:0;height:auto;border-radius:24px;background:radial-gradient(circle at 30% 12%,rgba(35,140,255,.28),transparent 35%),radial-gradient(circle at 80% 82%,rgba(244,200,77,.30),transparent 34%),linear-gradient(160deg,#edf7ff,#f9fcff);border:1px solid rgba(35,140,255,.38);box-shadow:0 0 18px rgba(35,140,255,.28),0 0 34px rgba(244,200,77,.18),var(--shadow);padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;overflow:hidden;animation:promoGlow 3.2s ease-in-out infinite alternate}.phonePromo:before{content:"";position:absolute;inset:-2px;border-radius:25px;padding:2px;background:linear-gradient(135deg,#238cff,#ffe066,#238cff);background-size:220% 220%;animation:borderGlow 4s linear infinite;pointer-events:none;opacity:.75}.promoScript{font-family:"Segoe Script","Brush Script MT",cursive;font-size:16px;line-height:1.05;text-align:center;color:#12375a;transform:rotate(-3deg);margin:0 0 8px;max-width:185px}.promoScript:after{content:"";display:block;width:74px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--gold));margin:5px auto 0}.phoneFrame{width:150px;height:292px;border-radius:30px;background:linear-gradient(145deg,#238cff,#111820 18%,#f4c84d 20%,#0b0f13 25%,#12171c 82%,#238cff 84%,#f4c84d);padding:5px;box-shadow:0 0 18px rgba(35,140,255,.5),0 0 28px rgba(244,200,77,.28),0 15px 26px rgba(7,19,31,.25);position:relative;z-index:1}.phoneFrame:before{content:"";position:absolute;right:-3px;top:80px;width:3px;height:34px;border-radius:4px;background:#f4c84d}.phoneScreen{height:100%;border-radius:26px;background:radial-gradient(circle at 50% 35%,rgba(35,140,255,.23),transparent 28%),linear-gradient(180deg,#06111d,#071b2a 56%,#08131d);color:#fff;padding:39px 10px 10px;text-align:center;position:relative;overflow:hidden}.phoneNotch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:57px;height:13px;border-radius:999px;background:#020509;z-index:2}.phoneLogo{margin:0 auto 7px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe58b,var(--gold));color:#0a1620;font-weight:1000;font-size:15px;box-shadow:0 0 12px rgba(244,200,77,.5)}.phoneScreen h3{font-size:16px;margin:5px 0 2px}.phoneScreen p{margin:0 0 12px;color:#cad8e4;font-size:8px}.phoneGraphic{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0 15px}.phoneGraphic span{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#238cff,#7352ef);font-size:11px;box-shadow:0 0 12px rgba(35,140,255,.55)}.phoneScreen h4{font-size:12px;line-height:1.2;margin:0 0 11px}.phoneScreen button{width:100%;padding:8px 4px;border:0;border-radius:8px;background:linear-gradient(100deg,#238cff,#f4c84d);font-weight:900;font-size:9px;box-shadow:0 0 14px rgba(244,200,77,.35)}.phoneScreen small{display:block;margin-top:9px;color:#c5d0d8;font-size:7px}.promoCaption{margin-top:9px;text-align:center;font-family:"Segoe Script","Brush Script MT",cursive;font-size:14px;line-height:1.15;color:#16304c}.promoCaption:after{content:"";display:block;width:86px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--gold));margin:5px auto 0}.shareStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.shareStrip button,.shareStrip div{padding:15px;border:1px solid #dce7ee;border-radius:18px;background:rgba(255,255,255,.88);text-align:center;font-weight:700;box-shadow:0 8px 18px rgba(30,60,90,.04)}
@keyframes promoGlow{from{box-shadow:0 0 14px rgba(35,140,255,.24),0 0 25px rgba(244,200,77,.14),var(--shadow)}to{box-shadow:0 0 28px rgba(35,140,255,.48),0 0 42px rgba(244,200,77,.30),var(--shadow)}}@keyframes borderGlow{0%{background-position:0 50%}100%{background-position:200% 50%}}
.hero{border-radius:28px;padding:34px;background:radial-gradient(circle at 85% 10%,rgba(244,200,77,.18),transparent 26%),linear-gradient(135deg,#07131f,#0c2b3d);box-shadow:0 22px 60px rgba(7,19,31,.20)}.hero h2{font-size:clamp(30px,3vw,46px);letter-spacing:-1.6px}.hero .box{background:#fff;color:#10202d}.premiumBanner{margin:16px 0 22px;padding:24px;border-radius:24px;background:linear-gradient(135deg,#091827,#123b50);color:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:18px}.premiumBanner h3{margin:0 0 6px;font-size:24px}.premiumBanner p{margin:0;color:#bfd0dc}.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.communityGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.communityCard{padding:20px}.callGrid{gap:16px}.studioGrid{gap:14px}.metric{font-size:34px;letter-spacing:-1px}.product{overflow:hidden}.productVisual{height:145px;background:linear-gradient(135deg,#0d2d42,#1a5369 58%,#d9ae37);display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:900}.productBody{padding:17px}.modalShade{background:rgba(3,12,20,.72);backdrop-filter:blur(9px)}.modal{border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.34)}.field{border-radius:14px;background:#f8fafb;border-color:#dbe4e9}.glowDot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--mint);box-shadow:0 0 16px var(--mint);margin-right:7px}
@media(max-width:1280px){.chatStage{grid-template-columns:1fr}.phonePromo{display:none}}
@media(max-width:900px){.app{grid-template-columns:1fr;padding-bottom:74px}.side{position:fixed;z-index:50;left:0;right:0;bottom:0;top:auto;height:70px;padding:8px 9px;display:block;background:rgba(6,17,27,.97);backdrop-filter:blur(18px)}.side>.brand,.side>.profile,.side>.studio{display:none}.nav{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;height:100%}.nav button{margin:0;padding:8px 3px;justify-content:center;font-size:0}.nav button::first-letter{font-size:21px}.nav button.on{border:0;box-shadow:inset 0 -2px var(--gold);background:rgba(244,200,77,.11)}.main{padding:18px 12px}.premiumTop{display:block}.topBrand{display:none}.premiumTop h1{font-size:44px}.premiumTop p{font-size:16px}.chat{grid-template-columns:1fr;min-height:72vh}.list{border-right:0;border-bottom:1px solid var(--line);max-height:300px;overflow:auto}.premiumBanner{align-items:flex-start;flex-direction:column}.shareStrip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.quickActions{display:grid;grid-template-columns:1fr 1fr}.quickActions button{min-height:46px;padding:0 10px}.composer{flex-wrap:wrap}.composer input[type=text]{min-width:58%}.bubble{max-width:88%}.callGrid,.studioGrid,.studioForm{grid-template-columns:1fr}.shareStrip{grid-template-columns:1fr 1fr}}