/* Shared overlay material. Native selects keep the operating system's menu.
 * Page canvases, viewport geometry, drag handles and functional pseudos retain
 * their owners. Only an overlay's backdrop is filtered, never its content.
 */
:root[data-vovry-material="thin-glass"] {
 --og-solid:#202020; --og-tint:rgba(25,25,25,.76);
 --og-ink:#fafafa; --og-muted:#d6d6d6;
 --og-rim:var(--tg-edge-mid); --og-stroke:1px;
 --og-shadow:rgba(0,0,0,.32); --og-scrim:rgba(0,0,0,.24);
 --og-sticky:rgba(36,36,36,.92);
}
:root[data-vovry-material="thin-glass"][data-theme="light"] {
 --og-solid:#f4f4f4; --og-tint:rgba(250,250,250,.74);
 --og-ink:#171717; --og-muted:#454545;
 --og-shadow:rgba(0,0,0,.12); --og-scrim:rgba(0,0,0,.12);
 --og-sticky:rgba(248,248,248,.94);
}
/* Explicit overlay inventory, including lazily mounted tools. Keeping it in
 * CSS gives Safari and a failed/disabled enhancement script the full material.
 */
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,
 .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
 .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
 .paper-limit-popover,.barrage-popover,.asset-detail-bubble,.vovry-glass-overlay
) {
 --text:var(--og-ink); --muted:var(--og-muted);
 --vl-text:var(--og-ink); --vl-muted:var(--og-muted);
 --vi-ink:var(--og-ink); --vi-muted:var(--og-muted);
 background:var(--og-solid); background-clip:padding-box;
 color:var(--og-ink); border:var(--og-stroke) solid var(--og-rim);
 box-shadow:0 16px 40px -16px var(--og-shadow);
 -webkit-backdrop-filter:none; backdrop-filter:none;
}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-sheet,.overlay.error-mode .overlay-panel,.v-sb-detail
) {position:relative}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-sheet,.copy-dialog,.voice-selection,.avatar-editor,.vi-sheet,.vi-dialog,.vl-indicator-panel
) {border-radius:30px}
:root[data-vovry-material="thin-glass"][data-theme] body :is(.voice-context-menu,.barrage-popover,.paper-limit-popover) {border-radius:24px}
/* Match the existing UI's 1px outline and theme edge color without a bevel.
 * The asset introduction's functional arrow is deliberately not selected. */
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,
 .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
 .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
 .paper-limit-popover,.barrage-popover,.vovry-glass-overlay
)::before,
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,
 .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
 .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
 .paper-limit-popover,.barrage-popover,.vovry-glass-overlay
)::after {
 content:none; display:none; pointer-events:none;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
  .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,
  .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
  .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
  .paper-limit-popover,.barrage-popover,.asset-detail-bubble,.vovry-glass-overlay
 ) {
  background:var(--og-tint);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:var(--og-optics,blur(20px)) saturate(1.25);
 }
}
/* Scrims should not erase the background before the glass can sample it. */
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer),
 #favorites-layer,.v-sb-detail-scrim,.v-sb-scrim
) {background:var(--og-scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-vovry-material="thin-glass"][data-theme] body :is(.copy-dialog,.kronos-info-sheet,.voice-selection,.avatar-editor,.vi-dialog,.oc-dialog,.vovry-glass-overlay)::backdrop {
 background:var(--og-scrim);-webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-vovry-material="thin-glass"].limit-popover-open::before {background:var(--og-scrim)}
/* Dense moving content stays readable under sticky headers and action bars. */
:root[data-vovry-material="thin-glass"][data-theme] body :is(.copy-dialog-head,.copy-dialog-actions,.v-sb-detail-head) {
 background:var(--og-sticky);-webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Wallet/settings become full-screen pages on phones. On wider screens they
 * use the same material; their original bounds, safe areas and scrolling stay.
 */
@media(min-width:768px) {
 :root[data-vovry-material="thin-glass"][data-theme] body #dao-settings-layer {background:var(--og-scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
 :root[data-vovry-material="thin-glass"][data-theme] body #dao-settings-layer .dao-settings-sheet {
  background:var(--og-tint);border:var(--og-stroke) solid var(--og-rim);color:var(--og-ink);
  box-shadow:0 16px 40px -16px var(--og-shadow);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:var(--og-optics,blur(20px));
 }
}
@media(min-width:641px) {
 :root[data-vovry-material="thin-glass"][data-theme] body .oc-dialog {
  --oc-fg:var(--og-ink);--oc-muted:var(--og-muted);
  background:var(--og-tint);border:var(--og-stroke) solid var(--og-rim);border-radius:30px;
  box-shadow:0 16px 40px -16px var(--og-shadow);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:var(--og-optics,blur(20px));
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 :root[data-vovry-material="thin-glass"][data-theme] {--og-tint:var(--og-solid)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 :root[data-vovry-material="thin-glass"][data-theme] {--og-tint:var(--og-solid);--og-sticky:var(--og-solid)}
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
  #dao-settings-layer .dao-settings-sheet,
  .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,.oc-dialog,
  .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
  .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
  .paper-limit-popover,.barrage-popover,.asset-detail-bubble,.vovry-glass-overlay
 ) {-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--og-solid)}
}
@media(forced-colors:active) {
 :root[data-vovry-material="thin-glass"][data-theme] {--og-solid:Canvas;--og-tint:Canvas;--og-sticky:Canvas;--og-ink:CanvasText;--og-muted:CanvasText;--og-rim:CanvasText;--og-stroke:1px;--og-shadow:transparent}
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
  #dao-settings-layer .dao-settings-sheet,
  .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,.oc-dialog,
  .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
  .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
  .paper-limit-popover,.barrage-popover,.asset-detail-bubble,.vovry-glass-overlay
 ) {background:Canvas;border:1px solid CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
  #dao-settings-layer .dao-settings-sheet,
  .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,.oc-dialog,
  .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
  .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
  .paper-limit-popover,.barrage-popover,.vovry-glass-overlay
 )::before,
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
  #dao-settings-layer .dao-settings-sheet,
  .favorites-sheet,.overlay.error-mode .overlay-panel,.copy-dialog,.oc-dialog,
  .kronos-info-sheet,.vl-indicator-panel[data-vovry-lab],.vi-sheet,.vi-dialog,
  .v-sb-detail,.v-sb-progress-help,.voice-context-menu,.voice-selection,.avatar-editor,
  .paper-limit-popover,.barrage-popover,.vovry-glass-overlay
 )::after {display:none}
}

:root[data-vovry-material="thin-glass"][data-theme] body .voice-context-menu .btn {background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--og-ink);border-radius:16px}
:root[data-vovry-material="thin-glass"][data-theme] body .voice-context-menu .btn:active {background:var(--tg-soft)!important}

/* Preserve the approved B thought bubble: only neutral paint tokens belong
 * here. Its SVG owns the cloud shape, tail dots and one-shot animation; its
 * transparent layout frame never joins rectangular glass or refraction. */
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer-asset {
 filter:grayscale(1) drop-shadow(0 18px 28px var(--og-shadow));
}
/* Paint the entire SVG, including its tail dots, pure #fff in daylight. */
:root[data-vovry-material="thin-glass"][data-theme="light"] body .v-sb-composer-asset {
 filter:brightness(0) invert(1) drop-shadow(0 18px 28px var(--og-shadow));
}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer-content {color:var(--og-ink)}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer h2 {color:var(--og-ink)}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer-subtitle {color:var(--og-muted)}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-idea-field {color:var(--og-ink);caret-color:var(--og-ink)}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-idea-field::placeholder {color:var(--v-sb-placeholder,var(--og-muted));opacity:1}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer-actions .v-sb-progress-link {border-color:var(--tg-line);background:var(--tg-soft);color:var(--og-ink)}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-composer-actions .v-sb-send {background:var(--tg-action);color:var(--tg-action-ink);box-shadow:none}

/* A dialog owns its frame before its data arrives. Lists scroll inside that
 * frame, so loading, empty, error and populated states never resize the shell. */
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer),
 .favorites-layer
) {align-items:center}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 #asset-picker,#dao-feed-layer,#social-detail-layer:not(.is-chat),#arena-layer,#analysis-layer,#dao-trade-layer
)>.picker-sheet {
 box-sizing:border-box;height:min(680px,calc(var(--viewport-height,100dvh) * .8),100%);max-height:100%;
}
:root[data-vovry-material="thin-glass"][data-theme] body :is(.favorites-sheet,.copy-dialog,.kronos-info-sheet) {
 box-sizing:border-box;height:min(560px,calc(var(--viewport-height,100dvh) * .8));
}
:root[data-vovry-material="thin-glass"][data-theme] body .kronos-info-sheet {
 inset:0;margin:auto;width:min(520px,calc(100vw - 24px));border:var(--og-stroke) solid var(--og-rim);border-radius:30px;
}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 #dao-feed-layer,#social-detail-layer:not(.is-chat),#arena-layer,#dao-trade-layer
)>.picker-sheet>.dao-scroll,
:root[data-vovry-material="thin-glass"][data-theme] body :is(#picker-results,#analysis-content) {flex:1;min-height:0}

/* Keep the localized loading announcement for assistive technology. The
 * visible placeholder is neutral and only belongs to an initial request. */
.overlay-placeholder {display:none;pointer-events:none}
[data-overlay-loading] .overlay-placeholder {display:grid;gap:24px;padding:12px 2px}
.overlay-placeholder i {display:block;position:relative;height:72px;color:var(--og-ink);opacity:.09}
.overlay-placeholder i::before {content:"";position:absolute;left:0;top:0;width:40px;height:40px;background:currentColor;border-radius:14px}
.overlay-placeholder i::after {
 content:"";position:absolute;left:56px;right:8px;top:3px;height:60px;
 background:linear-gradient(currentColor,currentColor) 0 0/42% 12px no-repeat,
  linear-gradient(currentColor,currentColor) 0 26px/100% 9px no-repeat,
  linear-gradient(currentColor,currentColor) 0 47px/72% 9px no-repeat;
 border-radius:5px;
}
.overlay-placeholder-profile {padding-top:22px!important}
.overlay-placeholder-profile i:first-child {height:132px}
.overlay-placeholder-profile i:first-child::before {left:calc(50% - 32px);width:64px;height:64px;border-radius:24px}
.overlay-placeholder-profile i:first-child::after {top:84px;left:25%;right:25%;height:44px;background-size:100% 14px,70% 9px,0 0;background-position:center 0,center 30px,0 0}
:is(#dao-feed-layer,#social-detail-layer)[data-overlay-loading] :is(#dao-feed-status,#social-detail-status) {
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* Scale a pre-sized frame about its centre; never animate layout dimensions.
 * Content fades in after the small, very rounded frame starts unfolding.
 * Closing immediately cancels the CSS animation; no timer controls visibility. */
:root[data-vovry-material="thin-glass"] {--og-enter-duration:420ms;--og-enter-ease:cubic-bezier(.16,1,.3,1)}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer.show:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-layer.show>.favorites-sheet,
 dialog[open]:is(.copy-dialog,.kronos-info-sheet,.vi-dialog,.voice-selection,.avatar-editor,.vovry-glass-overlay),
 .v-sb-detail-scrim.is-open>.v-sb-detail
) {
 transform-origin:center;animation:vovry-overlay-enter var(--og-enter-duration) var(--og-enter-ease) backwards;
}
:root[data-vovry-material="thin-glass"][data-theme] body :is(
 .picker-layer.show:not(.dao-page):not(#social-detail-layer.is-chat):not(#dao-settings-layer)>.picker-sheet,
 .favorites-layer.show>.favorites-sheet,
 dialog[open]:is(.copy-dialog,.kronos-info-sheet,.vi-dialog,.voice-selection,.avatar-editor,.vovry-glass-overlay),
 .v-sb-detail-scrim.is-open>.v-sb-detail
)>* {animation:vovry-overlay-content var(--og-enter-duration) ease-out backwards}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-detail-scrim {
 align-items:center;padding:calc(12px + var(--safe-top,0px)) max(12px,var(--safe-right,0px)) calc(12px + var(--safe-bottom,0px)) max(12px,var(--safe-left,0px));
}
:root[data-vovry-material="thin-glass"][data-theme] body .v-sb-detail {
 height:min(680px,80%);max-height:100%;border-radius:30px;padding-bottom:24px;transition:none;
}
@keyframes vovry-overlay-enter {
 from {opacity:.25;transform:scale(.22,.16);border-radius:160px}
 to {opacity:1;transform:none;border-radius:var(--og-enter-radius,30px)}
}
@keyframes vovry-overlay-content {0%,18%{opacity:0}65%,100%{opacity:1}}
@media(min-width:768px) {
 :root[data-vovry-material="thin-glass"][data-theme] body #dao-settings-layer.show>.picker-sheet {--og-enter-radius:22px;animation:vovry-overlay-enter var(--og-enter-duration) var(--og-enter-ease) backwards}
}
@media(min-width:641px) {
 :root[data-vovry-material="thin-glass"][data-theme] body .oc-dialog[open] {animation:vovry-overlay-enter var(--og-enter-duration) var(--og-enter-ease) backwards}
}
@media(prefers-reduced-motion:reduce) {
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer.show:not(.dao-page)>.picker-sheet,.favorites-layer.show>.favorites-sheet,
  dialog[open]:is(.copy-dialog,.kronos-info-sheet,.vi-dialog,.voice-selection,.avatar-editor,.oc-dialog,.vovry-glass-overlay),
  .v-sb-detail-scrim.is-open>.v-sb-detail
 ),
 :root[data-vovry-material="thin-glass"][data-theme] body :is(
  .picker-layer.show:not(.dao-page)>.picker-sheet,.favorites-layer.show>.favorites-sheet,
  dialog[open]:is(.copy-dialog,.kronos-info-sheet,.vi-dialog,.voice-selection,.avatar-editor,.oc-dialog,.vovry-glass-overlay),
  .v-sb-detail-scrim.is-open>.v-sb-detail
 )>* {animation:none!important}
}