/* ==========================================================================
   AZRA Liquid Glass v2 — scope: BUTTONS and INPUT BOXES only.
   Pure CSS. No JS, no ripples, no animations, no SVG filters (fast).
   Top bars are returned to a flat, solid look (no glass).
   Cards, posts, page background are NOT touched.
   Load LAST (after azra-glass.css / azra-motion.css).
   ========================================================================== */
:root{
  --azl-gold:255,206,40;
  --azl-water:120,190,255;
}

/* ---------------------------------------------------------------- 1) TOP BARS: flat, no glass */
html body :is(.topbar,.hub-head.hub-top,.azn-header,.azn-header.azn-in-shell,.ws-top){
  background:#000!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
html body .azn-header.azn-in-shell{border-radius:0!important;border-top:0!important}
html body .hub-head.hub-top{background:#0a0a0a!important}
/* AZRA AI header: keep its layout, drop the floating glass */
html body .ai-top{
  inset-inline:0!important;top:0!important;border-radius:0!important;
  background:#000!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
}
/* small controls inside the bars: flat too */
html body :is(.topbar .icon-btn,.hub-ic,.ai-top .ai-icon,.ai-top .ai-pill){
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body :is(.topbar .icon-btn,.hub-ic,.ai-top .ai-icon,.ai-top .ai-pill):hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.2)!important}

/* ---------------------------------------------------------------- 2) BUTTONS: liquid glass */
html body :is(
  .btn,.hx-chip,.hx-cta,.hx-go,.hx-kbd-btn,.hub-back,
  .ai-mode,.ai-chip,.ai-btn,.ai-btn-ghost,
  .us-filter-row button,.us-provider-chip,.us-tool-buttons button,.us-pager button,.us-deep-research-btn,.us-ai-answer-btn,.us-ai-retry,.us-button
):not(.btn-primary):not(.ai-send):not(.hub-top *):not(.topbar *):not(.ai-top *):not(.azn-header *){
  background:
    radial-gradient(140% 90% at 20% -10%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),
    radial-gradient(80% 60% at 80% 125%,rgba(var(--azl-water),.20),transparent 62%),
    rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:
    inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.70),
    inset -1px -1px 1px -.5px rgba(255,255,255,.26),
    inset 0 -8px 12px -8px rgba(var(--azl-water),.30),
    0 6px 14px -8px rgba(0,0,0,.6)!important;
  transition:background .2s,border-color .2s;
}
html body :is(.btn,.hx-chip,.hx-cta,.hx-go,.ai-mode,.ai-chip,.us-filter-row button,.us-provider-chip,.us-pager button,.us-button):not(.btn-primary):not(.ai-send):hover{
  background:
    radial-gradient(140% 90% at 20% -10%,rgba(255,255,255,.42),rgba(255,255,255,0) 52%),
    radial-gradient(80% 60% at 80% 125%,rgba(var(--azl-water),.30),transparent 62%),
    rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.30)!important;
}
html body :is(.btn,.hx-chip,.hx-cta,.hx-go,.ai-chip,.us-filter-row button,.us-provider-chip,.us-pager button,.us-button,.hub-back){border-radius:999px!important}

/* selected state: gold glass drop */
html body :is(.ai-mode[aria-pressed=true],.hx-chip.on,.hx-chip.active,.us-filter-row button.active,.us-provider-chip.active,.us-pager button.active){
  background:
    radial-gradient(120% 80% at 22% -8%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),
    linear-gradient(160deg,rgba(var(--azl-gold),.40),rgba(var(--azl-gold),.12))!important;
  border-color:rgba(var(--azl-gold),.60)!important;
  color:#fff!important;
  box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.9),inset 0 -8px 12px -8px rgba(var(--azl-gold),.5),0 0 18px rgba(var(--azl-gold),.22)!important;
}

/* primary buttons: gold glass bead */
html body :is(.btn-primary,.ai-send,.us-search button,#newPost){
  background:
    radial-gradient(60% 42% at 30% 16%,rgba(255,255,255,.90),rgba(255,255,255,0) 70%),
    radial-gradient(70% 55% at 72% 96%,rgba(255,255,255,.30),transparent 70%),
    linear-gradient(155deg,rgba(255,232,100,.96),rgba(255,176,0,.86))!important;
  border:1px solid rgba(255,244,170,.80)!important;
  color:#2a1b00!important;
  box-shadow:
    inset 0 1.5px 2px rgba(255,255,255,.90),
    inset 0 -8px 12px rgba(176,92,0,.40),
    0 8px 20px -6px rgba(255,190,0,.45),
    0 2px 4px rgba(0,0,0,.4)!important;
}
html body :is(.btn-primary,#newPost,.us-search button){border-radius:999px!important}

/* ---------------------------------------------------------------- 3) BOXES (inputs, search, composer): liquid glass */
html body :is(
  .gsearch input,.hub-search,.hx-filter input,.hx-filter-inline input,.hx-pal-input,
  .composer textarea,.profile-readme-editor textarea
),
html body :is(#view,.modal,.hub-main,.hxm-panel,.composer,.ai-modal-card,.card,.field,.us-side-card,.us-direct-panel,.ws-main,.ws-dialog-inner)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),textarea,select){
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-top-color:rgba(255,255,255,.26)!important;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(3px) saturate(160%);
  backdrop-filter:blur(3px) saturate(160%);
}
html body :is(.gsearch input,.hub-search,.hx-filter input,.hx-filter-inline input){border-radius:999px!important}
html body :is(.gsearch input,.hx-filter input,.hx-filter-inline input,.hx-pal-input,.composer textarea):focus,
html body .hub-search:focus-visible,
html body :is(#view,.modal,.hub-main,.card,.field,.us-side-card,.ws-main) :is(input,textarea,select):focus{
  outline:0!important;
  border-color:rgba(var(--azl-gold),.70)!important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.40),0 0 0 4px rgba(var(--azl-gold),.14),0 0 24px rgba(var(--azl-gold),.20)!important;
}

/* big composer boxes: Ultra Search bar + AZRA AI message box (glass pill, light blur) */
html body :is(.ai-box,.us-search){
  border-radius:34px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:
    radial-gradient(120% 160% at 12% -40%,rgba(255,255,255,.34),rgba(255,255,255,0) 52%),
    radial-gradient(70% 100% at 92% 140%,rgba(var(--azl-water),.24),transparent 60%),
    rgba(14,18,30,.30)!important;
  box-shadow:
    inset 2px 2px 1.5px -1px rgba(255,255,255,.80),
    inset -1.5px -1.5px 1.5px -1px rgba(255,255,255,.34),
    inset 0 -14px 24px -16px rgba(var(--azl-water),.36),
    0 18px 40px -14px rgba(0,0,0,.75)!important;
  -webkit-backdrop-filter:blur(4px) saturate(190%) brightness(1.1)!important;
  backdrop-filter:blur(4px) saturate(190%) brightness(1.1)!important;
}
html body :is(.ai-box,.us-search):focus-within{
  border-color:rgba(var(--azl-gold),.65)!important;
  box-shadow:inset 2px 2px 1.5px -1px rgba(255,255,255,.9),0 0 0 4px rgba(var(--azl-gold),.13),0 0 34px rgba(var(--azl-gold),.22),0 18px 40px -14px rgba(0,0,0,.75)!important;
}
/* the text field inside those boxes stays flat */
html body :is(.ai-box textarea,.us-search input){
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}