/* Task 165 (owner, 2026-10-02): "more transparent / glass skin like Tango" on
   every tab. One shared skin: chips, tags, pills and bars become frosted glass
   (see-through + blur + thin white edge) instead of solid grey blocks.
   Active items stay orange so the selected state is still obvious. */
:root {
  /* Owner 2026-10-04: one theme on every tab — these read sg-row-theme.css,
     the single source of truth, instead of a second set of values. The blur
     drops 14px -> 8px with it: the sampled area grows about 3x the radius per
     side, which is the measured cause of scroll jank on phones. */
  --sg-glass-bg: var(--sg-row-btn-bg, rgba(255, 255, 255, .07));
  --sg-glass-bg-hover: rgba(255, 255, 255, .16);
  --sg-glass-edge: var(--sg-row-edge, rgba(255, 255, 255, .16));
  --sg-glass-blur: var(--sg-row-blur, blur(8px)) saturate(160%);
  --sg-glass-on: var(--sg-row-on, rgba(255, 109, 0, .78));
  --sg-glass-on-edge: var(--sg-row-on-edge, rgba(255, 170, 100, .9));
}

/* Utility for new UI */
.sg-glass-chip,
#reels-search-button,
.sg-glass-sheet {
  background: var(--sg-glass-bg) !important;
  border: 1px solid var(--sg-glass-edge) !important;
  -webkit-backdrop-filter: var(--sg-glass-blur);
  backdrop-filter: var(--sg-glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 18px rgba(0, 0, 0, .18);
}
.sg-glass-sheet { background: rgba(18, 20, 29, .62) !important; }

/* Chips / tags / pills across Home, Create, Shop, Chats, Profile */
[data-shop-cat],
.sv-chip,
.sv-mchip,
.tt-chip,
.sg-filter-pill,
.topic-pill,
.gd-pill,
.sg-pass-chip,
.sg-cal-quick-chip {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--sg-glass-edge) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* speed: no blur on chips */
  transition: background .15s ease, transform .1s ease;
}
[data-shop-cat]:active, .sv-chip:active, .sv-mchip:active, .tt-chip:active,
.sg-filter-pill:active, .topic-pill:active, .gd-pill:active, .sg-glass-chip:active { transform: scale(.96); }
@media (hover: hover) {
  [data-shop-cat]:hover, .sv-chip:hover, .sv-mchip:hover, .tt-chip:hover,
  .sg-filter-pill:hover, .topic-pill:hover, .gd-pill:hover, .sg-glass-chip:hover { background: var(--sg-glass-bg-hover) !important; }
}

/* Selected state: orange glass */
[data-shop-cat][style*="#FF6D00"],
.sv-chip.on,
.sv-chip.active,
.tt-chip.active,
.sg-filter-pill.active,
.topic-pill.active,
.sg-pass-chip.selected {
  background: var(--sg-glass-on) !important;
  border-color: var(--sg-glass-on-edge) !important;
}

/* Bottom tab bar: frosted, video shows through (Tango) */
.sg-tab-bar {
  background: rgba(10, 10, 14, .38) !important;
  -webkit-backdrop-filter: var(--sg-glass-blur) !important;
  backdrop-filter: var(--sg-glass-blur) !important;
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
}

/* Browsers without backdrop-filter: keep text readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-shop-cat], .sv-chip, .sv-mchip, .tt-chip, .sg-filter-pill, .topic-pill, .gd-pill,
  .sg-pass-chip, .sg-glass-chip { background: rgba(40, 44, 56, .85) !important; }
  .sg-tab-bar, .sg-glass-sheet { background: rgba(14, 16, 22, .92) !important; }
}

/* Task 165 pass 2 (owner, 2026-10-02, YouTube Shorts camera screenshots):
   "make the heart transparent: just the icon border, inside see-through".
   Every action icon is now a thin white outline (no solid fill), and the
   Home rail sits in one see-through glass pill, like YouTube's side rail. */
html:root {
  --sg-btn-bg: rgba(255, 255, 255, .08);
  --sg-btn-border-color: rgba(255, 255, 255, .24);
  --sg-btn-blur: none; /* speed: see-through without the costly blur */
  --sg-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
html body #sg-reel-row-host .reel-actions,
html body .reel-actions.sg-glass-rail {
  background: rgba(30, 30, 34, .28) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  -webkit-backdrop-filter: var(--sg-glass-blur) !important;
  backdrop-filter: var(--sg-glass-blur) !important;
  border-radius: 36px !important;
  padding: 12px 0 !important;
}
html body #sg-reel-row-host .reel-actions .icon,
html body #sg-reel-row-host .reel-actions .tt-action-btn {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) !important;
}
html body #sg-reel-row-host .reel-actions .icon svg,
html body #sg-reel-row-host .reel-actions .icon svg.tt-fill,
html body #sg-reel-row-host .reel-actions .icon svg.tt-bold,
html body #sg-reel-row-host .reel-actions .tt-action-btn svg {
  fill: none !important; stroke: #fff !important; stroke-width: 1.7 !important;
  stroke-linecap: round; stroke-linejoin: round;
}
html body #sg-reel-row-host .reel-actions .icon svg path,
html body #sg-reel-row-host .reel-actions .icon svg rect,
html body #sg-reel-row-host .reel-actions .tt-action-btn svg path { fill: none !important; stroke: #fff !important; }
html body #sg-reel-row-host .reel-actions .icon svg circle { fill: #fff !important; stroke: none !important; }
/* Liked / reposted keep their colour, still outline-first like YouTube */
html body #sg-reel-row-host .reel-actions .reel-action[data-action="like"].sg-on .icon svg,
html body #sg-reel-row-host .reel-actions .reel-action[data-action="like"].sg-on .icon svg path { fill: #fe2c55 !important; stroke: #fe2c55 !important; }
html body #sg-reel-row-host .reel-actions .reel-action[data-action="repost"].sg-on .icon svg path { stroke: #22c55e !important; }

/* Round icon buttons and pills everywhere: see-through glass, white edge */
.sg-row-btn, .sg-icon-btn, #reels-search-button, #sg-hp-plus {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Home top tabs (Stories / For You / Following): plain text like TikTok, no boxes */
#reels-top-bar .reels-tab, #reels-top-bar [role="tab"], #reels-top-bar .sg-home-tab {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#reels-search-button svg, .sg-row-btn svg, .sg-icon-btn svg { fill: none !important; stroke: #fff !important; stroke-width: 1.7 !important; }

/* Owner 2026-10-02: Home search is a plain white icon top right (TikTok), no box */
html body #reels-search-button { background: transparent !important; border: 0 !important; box-shadow: none !important; width: 36px !important; height: 36px !important; }
html body #reels-search-button svg { width: 24px !important; height: 24px !important; stroke-width: 2 !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }