/* DAO floating surfaces. Original CSS: no external shaders or screen capture.
   Layout stays inside the app viewport managed by viewport.js. */
:root {
  --float-gap:10px;
  --nav-total:calc(var(--nav-content-height) + var(--bottom-inset) + 2 * var(--float-gap));
  --float-solid:#192534;
  --float-core:rgba(19,32,47,.82);
  --float-sheet:rgba(17,28,42,.94);
  --float-edge:rgba(210,232,255,.28);
  --float-shine:rgba(255,255,255,.38);
  --float-shadow:rgba(0,7,18,.36);
  --float-wash:rgba(198,225,250,.12);
  --float-selected:rgba(225,236,246,.13);
}
:root[data-theme="light"] {
  --float-solid:#f7f8f6;
  --float-core:rgba(248,250,249,.84);
  --float-sheet:rgba(249,251,250,.95);
  --float-edge:rgba(255,255,255,.9);
  --float-shine:rgba(255,255,255,.96);
  --float-shadow:rgba(37,62,78,.15);
  --float-wash:rgba(190,216,229,.18);
  --float-selected:rgba(131,161,176,.16);
}

/* The bar and movable lens are sibling backdrop surfaces. Keeping the blur
   off the nav itself lets the lens sample the page, not an already blurred bar. */
html body .dao-bottom-nav {
  --glass-tab:0;--nav-ink:#f6f7fb;--nav-muted:#a6a7b2;
  --nav-glass:rgba(22,23,31,.54);--nav-lens:rgba(151,161,183,.13);
  --nav-rim:rgba(242,243,255,.32);--nav-depth:rgba(2,3,12,.65);
  position:absolute;
  inset:auto max(18px,var(--safe-right)) calc(var(--bottom-inset) + var(--float-gap)) max(18px,var(--safe-left));
  width:auto;max-width:470px;height:var(--nav-content-height);box-sizing:border-box;
  margin-inline:auto;padding:5px;isolation:isolate;overflow:visible;
  border:1px solid transparent;border-radius:999px;
  background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"] body .dao-bottom-nav {
  --nav-ink:#152031;--nav-muted:#526073;--nav-glass:rgba(239,243,250,.53);
  --nav-lens:rgba(255,255,255,.28);--nav-rim:rgba(255,255,255,.8);--nav-depth:rgba(30,46,77,.22);
}
body[data-page="social"] .dao-bottom-nav {--glass-tab:1}
body[data-page="account"] .dao-bottom-nav {--glass-tab:2}
html body .dao-bottom-nav::after {
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
  border:1px solid var(--nav-rim);background:var(--float-solid);
  box-shadow:inset 0 1px 2px #ffffff30,inset 1px 0 1px #ffffff18,inset 0 -2px 4px #0000003d,0 10px 30px -9px var(--nav-depth);
}
html body .dao-nav-lens {
  position:absolute;inset:5px auto 5px 5px;z-index:0;pointer-events:none;
  width:var(--lens-width,calc((100% - 10px)/3));box-sizing:border-box;border-radius:999px;
  border:1px solid var(--nav-rim);background:linear-gradient(130deg,#ffffff10,transparent 60%),var(--nav-lens);
  box-shadow:inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #b5c6ff26,inset 2px 0 7px #a9b3ed12,0 3px 8px #00000030;
  transform:translate3d(var(--lens-x,calc(var(--glass-tab) * 100%)),var(--lens-y,0px),0) scaleX(var(--lens-stretch,1));
  transition:transform .34s cubic-bezier(.2,1.35,.35,1),top .24s ease,bottom .24s ease,box-shadow .24s ease,background .24s ease;
}
html body .dao-nav-lens::before,html body .dao-nav-lens::after {
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;opacity:.13;transition:opacity .22s ease;
}
html body .dao-nav-lens::before {
  padding:1.5px;
  background:conic-gradient(from 65deg at var(--lens-light,50%) 50%,transparent 0deg,#aeeeff 38deg,#eed4ff 53deg,#ffdba0 66deg,transparent 88deg,transparent 166deg,#bcadff 195deg,#fff 212deg,#8affed 225deg,transparent 254deg,transparent 304deg,#ddd7ff 331deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
html body .dao-nav-lens::after {
  background:radial-gradient(ellipse at 1% 55%,#8ef7ff36,transparent 24%),radial-gradient(ellipse at 100% 64%,#bda0ff52,transparent 23%),radial-gradient(ellipse at 50% 120%,#020410a6,transparent 52%),linear-gradient(180deg,#e0cdff14,transparent 28%,transparent 74%,#97aaff1a);
  box-shadow:inset 0 2px 3px #ffffff26,inset 0 -3px 5px #1311328c;
}
html body .dao-bottom-nav.is-pressing .dao-nav-lens {
  top:-5px;bottom:-5px;background:linear-gradient(115deg,#d6d0ff14,transparent 62%),var(--nav-lens);
  box-shadow:inset 0 2px 3px #ffffff69,inset 0 -2px 3px #a6beff5c,0 9px 20px -5px var(--nav-depth),0 0 16px #b6a0ff12;
}
html body .dao-bottom-nav.is-pressing .dao-nav-lens::before {opacity:.9}
html body .dao-bottom-nav.is-pressing .dao-nav-lens::after {opacity:1}
html body .dao-bottom-nav.is-dragging .dao-nav-lens {transition:top .2s ease,bottom .2s ease,box-shadow .2s ease;will-change:transform}
html body .dao-bottom-nav button {
  position:relative;z-index:1;flex:1 1 0;min-width:0;height:100%;padding:0 5px;
  border-radius:999px;font-size:12px;font-weight:550;gap:2px;color:var(--nav-muted);
  background:transparent;box-shadow:none;-webkit-tap-highlight-color:transparent;
  transition:color .18s ease;
}
html body .dao-bottom-nav button svg {width:25px;height:25px;transition:transform .24s cubic-bezier(.2,1.3,.35,1);transform-origin:50% 65%}
html body .dao-bottom-nav button.active {background:transparent;box-shadow:none;color:var(--nav-ink);font-weight:650}
html body .dao-bottom-nav button:active {transform:none}
html body .dao-bottom-nav.is-pressing button {color:var(--nav-muted)}
html body .dao-bottom-nav.is-pressing button.is-preview {color:var(--nav-ink)}
html body .dao-bottom-nav.is-pressing button.is-preview svg {transform:translateY(-1px) scale(1.19)}
html body .dao-bottom-nav button:focus-visible {outline:2px solid var(--accent);outline-offset:-3px}
body[data-page="social"].social-chrome-hidden .dao-bottom-nav {transform:translateY(calc(100% + var(--bottom-inset) + var(--float-gap) + 12px))}
:root[data-keyboard="open"] {--nav-total:0px}
/* Reserve the entire floating-navigation footprint outside the scroll viewport. */
html body .dao-page {bottom:var(--nav-total)}
html body .dao-page .dao-scroll {padding-bottom:16px;scroll-padding-bottom:16px}

/* Search glass has its own edge; editable text is never filtered. */
:root[data-theme] body #dao-social-layer .social-search-field,
html body #asset-picker #picker-query {
  border:1px solid var(--float-edge);border-radius:23px;
  background:var(--float-solid);
  box-shadow:inset 0 1px 1px var(--float-shine),0 4px 12px -6px var(--float-shadow);
  color:var(--text);transition:box-shadow .18s ease,border-color .18s ease;
}
:root[data-theme] body #dao-social-layer .social-search-field {min-height:46px;padding-inline:14px}
:root[data-theme] body #dao-social-layer .social-search-field input {color:var(--text);caret-color:var(--accent);padding-inline:0}
/* The rounded field owns focus; an outline on its rectangular input cuts
   through the search and clear controls. Keep one quiet, rounded edge. */
html body #dao-social-layer #social-search-input:focus {outline:none;outline-offset:0}
:root[data-theme] body #dao-social-layer .social-search-field input::placeholder {color:var(--muted)}
:root[data-theme] body #dao-social-layer .social-search-field svg {color:var(--muted)}
:root[data-theme] body #dao-social-layer .social-search-field:focus-within {
  border-color:var(--accent);outline:none;outline-offset:0;
}
html body #asset-picker #picker-query:focus-visible {
  border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px;
}
:root[data-theme] body #dao-social-layer #social-search-toggle {border:1px solid var(--float-edge);border-radius:50%;background:var(--float-solid);box-shadow:inset 0 1px 1px var(--float-shine),0 3px 10px -4px var(--float-shadow);color:var(--text)}

/* Only overlay shells are frosted; page surfaces and financial rows stay crisp. */
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker) {
  background:rgba(3,10,20,.38);-webkit-backdrop-filter:none;backdrop-filter:none;
}
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker)>.picker-sheet {
  position:relative;border:1px solid var(--float-edge);border-radius:30px;
  background:var(--float-solid);color:var(--text);
  box-shadow:inset 0 1px 1px var(--float-shine),inset 0 -1px 1px var(--float-wash),0 24px 64px -16px var(--float-shadow);
}
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker)>.picker-sheet::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at 8% 0,var(--float-wash),transparent 58%);
  box-shadow:inset 1px 0 1px var(--float-wash);
}
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat)) .favorites-head {padding:18px 20px;border-bottom:1px solid var(--line);background:transparent}
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat)) .favorites-head>.btn {border-radius:20px;min-height:44px}
:root[data-theme] body #arena-layer .agent-account {
  background:linear-gradient(145deg,var(--float-wash),transparent 70%),var(--surface-soft);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:inset 0 1px 0 var(--float-wash);
}
html body #social-detail-layer .social-profile {padding:22px 10px 26px}
:root[data-theme] body #social-detail-layer .social-portfolio {background:var(--surface);border-color:var(--line);box-shadow:none}
:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker).show>.picker-sheet {animation:dao-glass-enter .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes dao-glass-enter {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html body .dao-bottom-nav::after {
    background:linear-gradient(145deg,#ffffff0d,transparent 42%,#ffffff05),var(--nav-glass);
    -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  }
  html body .dao-nav-lens {
    -webkit-backdrop-filter:blur(3px) saturate(170%);backdrop-filter:blur(3px) saturate(170%);
  }
  :root[data-theme] body #dao-social-layer .social-search-field,html body #asset-picker #picker-query,:root[data-theme] body #dao-social-layer #social-search-toggle {
    background:var(--float-core);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
  }
  :root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker)>.picker-sheet {
    background:var(--float-sheet);-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  }
}
@media(max-width:600px) {
  :root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat)) {align-items:flex-end}
  :root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat))>.picker-sheet {width:100%;border-radius:28px}
}
@media(orientation:landscape) and (max-height:520px) {
  :root {--float-gap:5px}
  html body .dao-bottom-nav {max-width:430px}
  html body .dao-bottom-nav button {font-size:12px;flex-direction:row;gap:8px}
}
@media(prefers-reduced-motion:reduce) {
  html body .dao-bottom-nav,html body .dao-nav-lens,html body .dao-nav-lens::before,html body .dao-nav-lens::after,html body .dao-bottom-nav button,html body .dao-bottom-nav button svg,
  :root[data-theme] body #dao-social-layer .social-search-field,html body #asset-picker #picker-query {transition:none}
  html body .dao-bottom-nav button:active {transform:none}
  html body .dao-bottom-nav .dao-nav-lens {transform:translate3d(var(--lens-x,calc(var(--glass-tab) * 100%)),0,0);transition:none}
  html body .dao-bottom-nav.is-pressing .dao-nav-lens {top:5px;bottom:5px}
  html body .dao-bottom-nav.is-pressing button.is-preview svg {transform:none}
  :root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker).show>.picker-sheet {animation:none}
}
@media(prefers-reduced-transparency:reduce) {
  html body .dao-bottom-nav::after,html body .dao-nav-lens,:root[data-theme] body #dao-social-layer .social-search-field,html body #asset-picker #picker-query,
  :root[data-theme] body #dao-social-layer #social-search-toggle,:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker)>.picker-sheet {
    background:var(--float-solid);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  html body .dao-bottom-nav.is-pressing .dao-nav-lens {background:var(--float-solid)}
}
@media(forced-colors:active) {
  :root[data-theme] body #dao-social-layer .social-search-field:focus-within {
    outline:2px solid Highlight;outline-offset:2px;
  }
  html body .dao-bottom-nav::after,:root[data-theme] body #dao-social-layer .social-search-field,html body #asset-picker #picker-query,
  :root[data-theme] body #dao-social-layer #social-search-toggle,:root[data-theme] body :is(#arena-layer,#social-detail-layer:not(.is-chat),#asset-picker)>.picker-sheet {
    background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  html body .dao-nav-lens {display:none}
  html body .dao-bottom-nav button {color:ButtonText}
  html body .dao-bottom-nav.is-pressing button.is-preview {outline:2px solid Highlight;color:Highlight}
  html body .dao-bottom-nav button.active {outline:2px solid Highlight;outline-offset:-3px;color:Highlight}
}

/* The navigation is a separate viewport-level dock. It intentionally owns
   the safe-area and floating gap so the glass capsule never inherits the
   app's transient WebKit height while the page is loading. */
/* This broader selector also covers the short interval before navigation.js
   moves the dock out of #app. */
html body .dao-bottom-nav-dock {
  position:fixed;z-index:65;inset:auto 0 0;width:100%;height:var(--nav-total);
  display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;
  padding:var(--float-gap) max(18px,var(--safe-right)) calc(var(--bottom-inset) + var(--float-gap)) max(18px,var(--safe-left));
  pointer-events:none;isolation:isolate;
}
html body .dao-bottom-nav-dock > .dao-bottom-nav {
  position:relative;inset:auto;flex:0 1 470px;width:100%;max-width:470px;height:var(--nav-content-height);
  margin:0;pointer-events:auto;
}
:root[data-keyboard="open"] body .dao-bottom-nav-dock {height:0;padding:0;}
html body > .dao-bottom-nav-dock {
  position:fixed;z-index:65;inset:auto 0 0;width:100%;height:var(--nav-total);
  display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;
  padding:var(--float-gap) max(18px,var(--safe-right)) calc(var(--bottom-inset) + var(--float-gap)) max(18px,var(--safe-left));
  pointer-events:none;isolation:isolate;
}
html body > .dao-bottom-nav-dock > .dao-bottom-nav {
  position:relative;inset:auto;flex:0 1 470px;width:100%;max-width:470px;height:var(--nav-content-height);
  margin:0;pointer-events:auto;
}
:root[data-keyboard="open"] body > .dao-bottom-nav-dock {height:0;padding:0;}