/* App shell with a left sidebar and the platform rail (owner's brief 2026-11-11, round 2). Scoped to .in-app (signed-in app only).
   Motion: one curve var(--ease); pills reveal their name with a clip-path in 500 ms ease-out; the phone fan-out staggers by 50 ms. */
.in-app .app.with-side{display:grid;grid-template-columns:256px minmax(0,1fr);align-items:start}
.in-app .app-col{min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ---- sidebar ---- */
.in-app .side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:60;display:flex;flex-direction:column;gap:1rem;padding:1rem .875rem 1rem;
  background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-right:1px solid var(--line);scrollbar-width:thin}
.in-app .side-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.125rem .25rem}
.in-app .logo{display:flex;align-items:center;gap:.55em;color:var(--ink);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;font-family:var(--font-d);border-radius:10px}
.in-app .logo img{width:32px;height:32px;border-radius:10px;padding:3px;background:var(--brand-l);transition:transform var(--t-slow) var(--ease)}.in-app .logo:hover img{transform:rotate(-8deg) scale(1.06)}
.in-app .side-close{display:none}
.in-app .side-cta{width:100%;min-height:46px;border-radius:14px}
.in-app .side .sections{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;overflow:visible;width:auto;order:0}
.in-app .side .snav{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.5rem .75rem;border-radius:12px;color:var(--muted);font-weight:600;text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.in-app .side .snav .ico{width:20px;height:20px}
.in-app .side .snav:hover{background:var(--hover);color:var(--ink)}.in-app .side .snav.on{color:var(--brand-d)}
.in-app .side .snav:hover .ico{transform:translateX(1px)}
.in-app .side .sections .sec-ind{border-radius:12px;background:var(--brand-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent)}
.in-app .side .sections .snav.on::before{content:"";position:absolute;left:-.875rem;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.in-app .side-h{font-family:var(--font);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 .25rem .5rem}
.in-app .side-foot{margin-top:auto;display:grid;gap:2px;padding-top:.75rem;border-top:1px solid var(--line)}
.in-app .side .snav.sm{min-height:38px;font-size:.9rem}

/* ---- platform rail: brand-gradient tiles; the name slides out over the neighbours (no layout shift) ---- */
.in-app .rail-list{display:grid;grid-template-columns:repeat(4,44px);justify-content:space-between;gap:.5rem;padding:0 .25rem}
.in-app .rail-list>div{position:relative}
.rp{--g:linear-gradient(135deg,#7c5cff,#4a28c4);position:relative;width:44px;height:44px;padding:0;border:0;border-radius:14px;cursor:pointer;color:#fff;background:transparent;font:inherit;isolation:isolate}
.rp::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--g);box-shadow:0 6px 14px -8px rgba(36,22,92,.55),inset 0 1px 0 rgba(255,255,255,.25);transition:filter var(--t) var(--ease),opacity var(--t)}
.rp-ic{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rp-ic .pmark path{fill:#fff}.rp-ic .ico{width:20px;height:20px}
.rp-t{position:absolute;z-index:1;top:0;left:0;height:44px;display:flex;align-items:center;padding:0 .9rem 0 50px;border-radius:14px;background:var(--g);white-space:nowrap;font-weight:650;font-size:.85rem;box-shadow:0 10px 24px -10px rgba(36,22,92,.6);
  clip-path:inset(0 calc(100% - 44px) 0 0 round 14px);opacity:0;pointer-events:none;transition:clip-path .5s cubic-bezier(.22,1,.36,1),opacity .2s ease-out}
.rail-list>div:nth-child(4n+3) .rp-t,.rail-list>div:nth-child(4n+4) .rp-t{left:auto;right:0;padding:0 50px 0 .9rem;clip-path:inset(0 0 0 calc(100% - 44px) round 14px)}
.rp:hover,.rp:focus-visible{z-index:5}
.rp:hover .rp-t,.rp:focus-visible .rp-t{opacity:1;clip-path:inset(0 0 0 0 round 14px)}
.rp:hover .rp-ic,.rp:focus-visible .rp-ic{transform:scale(1.14)}
.rp:active .rp-ic{transform:scale(.94);transition-duration:.08s}
.rp:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:14px}
.rp-st{position:absolute;z-index:3;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:var(--line-2);transform:scale(0);transition:transform var(--t) var(--ease)}
.rp.on .rp-st{background:#22c55e;transform:scale(1)}.rp.bad .rp-st{background:#ef4444;transform:scale(1);animation:pulse 1.6s ease-in-out infinite}
.rp:not(.on):not(.rp-add)::before{filter:grayscale(.85) brightness(1.35);opacity:.55}.rp:not(.on):not(.rp-add):hover::before{filter:none;opacity:1}
.rp.cur::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid var(--brand);pointer-events:none}
.rp[data-p=instagram]{--g:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 50%,#6228d7 100%)}
.rp[data-p=facebook]{--g:linear-gradient(135deg,#2d88ff,#0866ff 55%,#0a4fc7)}
.rp[data-p=youtube]{--g:linear-gradient(135deg,#ff4b4b,#ff0000 55%,#c4000a)}
.rp[data-p=telegram]{--g:linear-gradient(135deg,#47bdf0,#26a5e4 55%,#1a86c2)}
.rp[data-p=tiktok]{--g:linear-gradient(135deg,#25f4ee -30%,#111 35%,#111 65%,#fe2c55 130%)}
.rp[data-p=linkedin]{--g:linear-gradient(135deg,#1a7fd6,#0a66c2 55%,#004182)}
.rp[data-p=x]{--g:linear-gradient(135deg,#3a3a3a,#000)}
.rp-add{--g:#fff}.rp-add::before{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,var(--line-2))}.rp-add .rp-ic{color:var(--brand-d)}.rp-add .rp-t{background:var(--brand);color:#fff}
.rp-add:hover .rp-ic .ico{transform:rotate(90deg)}

/* ---- top bar (inside the content column) ---- */
.in-app .app-col>.topbar{position:sticky;top:0;z-index:50}
.in-app .app-col>.topbar .topbar-in{min-height:60px;gap:.5rem;flex-wrap:nowrap}
.in-app .top-logo,.in-app .side-toggle{display:none}

/* ---- phones and small tablets: the sidebar becomes a drawer ---- */
.side-scrim{display:none}
@media(max-width:1000px){
  .in-app .app.with-side{grid-template-columns:minmax(0,1fr)}
  .in-app .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100dvh;transform:translateX(-104%);transition:transform .32s var(--ease);box-shadow:0 30px 60px -20px rgba(36,22,92,.45);background:rgba(255,255,255,.97)}
  .in-app .nav-open .side{transform:none}
  .in-app .side-close,.in-app .side-toggle,.in-app .top-logo{display:inline-flex}
  .in-app .side-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(36,22,92,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
  .in-app .nav-open .side-scrim{opacity:1;pointer-events:auto}
}

/* ---- phone: networks fan out of a floating button ---- */
.fab-wrap{display:none}
@media(max-width:760px){
  .in-app .nav-open .fab-wrap{display:none}
  .in-app .fab-wrap{display:block;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:70}
  .in-app .fab{width:56px;height:56px;border-radius:18px;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;background:linear-gradient(135deg,#7350f0,#623be8 45%,#4a28c4);box-shadow:0 14px 30px -10px rgba(98,59,232,.7);transition:transform var(--t) var(--ease)}
  .in-app .fab .ico{width:24px;height:24px;transition:transform .32s var(--ease)}
  .in-app .fab-wrap.open .fab .ico{transform:rotate(-90deg) scale(.9)}
  .in-app .fab:active{transform:scale(.94)}
  .in-app .fab-list{position:absolute;right:6px;bottom:68px;display:flex;flex-direction:column-reverse;gap:.5rem;align-items:flex-end}
  .in-app .fab-list .rp{opacity:0;transform:translateY(14px) scale(.6);transition:opacity .28s var(--ease),transform .36s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(var(--i,0)*50ms)}
  .in-app .fab-list.in .rp{opacity:1;transform:none}
  .in-app .fab-list .rp-t{left:auto;right:0;padding:0 50px 0 .9rem;clip-path:inset(0 0 0 0 round 14px);opacity:1}
  .in-app .fab-list .rp:not(.on)::before{filter:none;opacity:1}
  .in-app #toasts{bottom:5.5rem;top:auto}
}
@media(prefers-reduced-motion:reduce){
  .rp-t,.rp-ic,.rp-st,.in-app .side,.in-app .side-scrim,.in-app .fab-list .rp{transition-duration:.01ms!important;transition-delay:0s!important}
  .rp.bad .rp-st{animation:none}
}