/* 
 * WIDGET Light Shell and Sizing Override
 * Reversible CSS-only refinement for warm light Aviary theme and consistent square geometry.
 *
 * Protected variables & structure preserved.
 */

:root {
  --widget-paper: #f8f3e7;
  --widget-paper-soft: #fffaf0;
  --widget-ink: #3d3428;
  --widget-sage: #6f8b68;
  --widget-teal: #3f7d70;
  --widget-gold: #c9a65c;
  --widget-frame: rgba(91, 119, 86, 0.42);
  --widget-shadow: 0 8px 24px rgba(43, 52, 42, 0.16);
  --widget-active-mint: #e2f0d9;
  --widget-active-border: #6f8b68;
}

/* ==========================================
   1. TOP COMMAND BAR
   ========================================== */

body.sol-glow .top-bar,
body.sol-glow .top-bar.collapsed,
body.sol-glow #topCommandBar {
  background: var(--widget-paper) !important;
  border: 1px solid var(--widget-frame) !important;
  box-shadow: var(--widget-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-radius: 16px !important;
  color: var(--widget-ink) !important;
  padding: 4px 6px !important;
  gap: 4px !important;
}

/* Top bar controls - uniform square frames */
body.sol-glow .top-bar button,
body.sol-glow .top-icon-btn,
body.sol-glow .top-pill-toggle,
body.sol-glow .sol-brand-mark,
body.sol-glow #topMimicToggle,
body.sol-glow #topLookToggle,
body.sol-glow #topFlockCount,
body.sol-glow #topQuietToggle,
body.sol-glow #topVisualizerToggle,
body.sol-glow #topMuteToggle,
body.sol-glow #topFullscreenToggle,
body.sol-glow #topSettingsToggle {
  background: var(--widget-paper-soft) !important;
  border: 1px solid var(--widget-frame) !important;
  color: var(--widget-ink) !important;
  border-radius: 12px !important;
  aspect-ratio: 1 !important;
  width: clamp(38px, 8vw, 46px) !important;
  height: clamp(38px, 8vw, 46px) !important;
  min-width: 38px !important;
  min-height: 38px !important;
  box-shadow: 0 2px 6px rgba(61, 52, 40, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease-in-out !important;
}

/* Text and icons inside top controls */
body.sol-glow .top-bar button *,
body.sol-glow .top-icon-btn *,
body.sol-glow .top-pill-toggle * {
  color: var(--widget-ink) !important;
  fill: var(--widget-ink) !important;
  stroke: var(--widget-ink) !important;
}

/* Let the canonical square artwork read at command-bar scale. The outer
   control remains the same touch target; only its visual fills more of it. */
body.sol-glow .top-pill-toggle {
  padding: 2px !important;
}

body.sol-glow .top-pill-toggle .sol-top-icon {
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 100% !important;
  border-radius: 10px !important;
}

/* The artwork is the visible command language; names remain in aria-labels. */
body.sol-glow .top-bar :is(.sol-top-label, .sol-brand-copy) {
  display: none !important;
}

body.sol-glow .top-bar .sol-brand {
  width: clamp(38px, 8vw, 46px) !important;
  height: clamp(38px, 8vw, 46px) !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--widget-frame) !important;
  border-radius: 12px !important;
  background: var(--widget-paper-soft) !important;
  box-shadow: 0 2px 6px rgba(61, 52, 40, 0.08) !important;
}

body.sol-glow .top-bar .sol-brand-mark {
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 100% !important;
  border-radius: 10px !important;
}

/* Active & Pressed states in top bar */
body.sol-glow .top-bar button.active,
body.sol-glow .top-bar button[aria-expanded="true"],
body.sol-glow .top-bar button:active,
body.sol-glow .top-icon-btn.active {
  background: var(--widget-active-mint) !important;
  border-color: var(--widget-sage) !important;
  box-shadow: inset 0 0 0 1px var(--widget-sage), 0 2px 8px rgba(111, 139, 104, 0.25) !important;
}

/* Brand mark avatar framing */
body.sol-glow .sol-brand-mark {
  background:
    var(--widget-paper-soft)
    url("assets/ui/shell/home.webp") center / cover no-repeat !important;
  border-color: var(--widget-gold) !important;
  box-shadow: 0 2px 6px rgba(61, 52, 40, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}


/* ==========================================
   2. BOTTOM ROOT DOCK BAR
   ========================================== */

body.sol-glow .quick-actions,
body.sol-glow .quick-actions.dock-mode,
body.sol-glow .quick-actions.expanded-mode,
body.sol-glow #solActionBar {
  background: var(--widget-paper) !important;
  border: 1px solid var(--widget-frame) !important;
  box-shadow: var(--widget-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  padding: 6px !important;
  gap: 6px !important;
}

/* Six root dock buttons: HOME plus the five action categories. */
body.sol-glow .quick-actions > .quick-btn,
body.sol-glow .quick-actions > .sol-more-btn,
body.sol-glow .quick-actions > .sol-tricks-btn,
body.sol-glow .quick-actions > .sol-whistles-btn,
body.sol-glow .quick-actions > .sol-play-btn,
body.sol-glow .quick-actions > .bird-arcade-btn,
body.sol-glow #solActionBar > button {
  background: var(--widget-paper-soft) !important;
  border: 1px solid var(--widget-frame) !important;
  border-radius: 14px !important;
  color: var(--widget-ink) !important;
  box-shadow: 0 2px 6px rgba(61, 52, 40, 0.08) !important;
  aspect-ratio: 1 !important;
  transition: all 0.18s ease-in-out !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 3px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* The five permanent destinations are picture tiles, not icons floating in
   empty cells. Their artwork fills the grid cell and the stable category name
   sits in the same ivory overlay language as the action shelves. */
body.sol-glow .quick-actions > .quick-btn .btn-icon-slot {
  position: absolute !important;
  inset: 3px !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--widget-paper-soft) !important;
  box-shadow: none !important;
}

body.sol-glow .quick-actions > .quick-btn .btn-icon-slot img,
body.sol-glow .quick-actions > .quick-btn .btn-icon-slot img.widget-custom-icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transform: none !important;
  transform-origin: center !important;
}

body.sol-glow .quick-actions > .quick-btn::after {
  content: attr(data-label) !important;
  position: absolute !important;
  inset-inline: 6px !important;
  bottom: 6px !important;
  z-index: 2 !important;
  min-height: 19px !important;
  padding: 3px 4px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
  color: var(--widget-ink) !important;
  background: rgba(255, 252, 244, 0.92) !important;
  border: 1px solid rgba(111, 139, 104, 0.42) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 7px rgba(61, 52, 40, 0.14) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(7px, 1.55vw, 8.5px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Hover and Active states on root dock */
body.sol-glow .quick-actions > .quick-btn:hover,
body.sol-glow .quick-actions > .quick-btn:focus-visible {
  border-color: var(--widget-sage) !important;
  box-shadow: 0 0 0 2px rgba(111, 139, 104, 0.3) !important;
}

body.sol-glow .quick-actions > .quick-btn.active,
body.sol-glow .quick-actions > .quick-btn[aria-expanded="true"] {
  background: var(--widget-active-mint) !important;
  border-color: var(--widget-sage) !important;
  color: var(--widget-ink) !important;
  box-shadow: inset 0 0 0 1px var(--widget-sage), 0 3px 10px rgba(111, 139, 104, 0.28) !important;
}

/* Root dock button text labels and icons */
body.sol-glow .quick-actions .btn-label,
body.sol-glow #solActionBar .btn-label {
  color: var(--widget-ink) !important;
  font-family: 'Fredoka', 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

body.sol-glow .quick-actions .btn-icon-slot,
body.sol-glow #solActionBar .btn-icon-slot {
  color: var(--widget-ink) !important;
  font-size: 20px !important;
}


/* ==========================================
   3. EXPANDABLE SHELVES & TILE NODES
   ========================================== */

body.sol-glow .sol-trick-shelf,
body.sol-glow #solTrickShelf,
body.sol-glow #solSocialShelf,
body.sol-glow #solWhistleShelf,
body.sol-glow #solPlayShelf,
body.sol-glow #solArcadeShelf {
  background: var(--widget-paper) !important;
  border: 1px solid var(--widget-frame) !important;
  box-shadow: var(--widget-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  color: var(--widget-ink) !important;
  padding: 8px !important;
}

/* Shelf headers & page counters */
body.sol-glow .sol-shelf-title,
body.sol-glow .sol-shelf-page-counter,
body.sol-glow .sol-shelf-header,
body.sol-glow .sol-shelf-pager {
  color: var(--widget-ink) !important;
  font-family: 'Fredoka', 'Space Grotesk', sans-serif !important;
}

/* Shelf option tile buttons */
body.sol-glow .sol-trick-shelf .quick-btn,
body.sol-glow .sol-trick-shelf .trick-btn,
body.sol-glow .sol-trick-shelf .whistle-btn,
body.sol-glow .sol-trick-shelf .companion-game-btn,
body.sol-glow .sol-trick-shelf .arcade-game-btn,
body.sol-glow .sol-trick-shelf .sol-shelf-nav {
  background: var(--widget-paper-soft) !important;
  border: 1px solid var(--widget-frame) !important;
  border-radius: 14px !important;
  color: var(--widget-ink) !important;
  box-shadow: 0 2px 6px rgba(61, 52, 40, 0.08) !important;
  aspect-ratio: 1 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  transition: all 0.18s ease-in-out !important;
}

/* Each shelf tile is a small picture card. Keep the existing square geometry
   and touch behavior while allowing the canonical artwork to fill the frame. */
body.sol-glow .sol-shelf-grid .quick-btn {
  position: relative !important;
  padding: 3px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.sol-glow .sol-shelf-grid .quick-btn .btn-icon-slot {
  position: absolute !important;
  inset: 3px !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--widget-paper-soft) !important;
  box-shadow: none !important;
}

/* Hover and active states on shelf tiles */
body.sol-glow .sol-trick-shelf .quick-btn:hover,
body.sol-glow .sol-trick-shelf .quick-btn:focus-visible {
  border-color: var(--widget-sage) !important;
  box-shadow: 0 0 0 2px rgba(111, 139, 104, 0.3) !important;
}

body.sol-glow .sol-trick-shelf .quick-btn:active,
body.sol-glow .sol-trick-shelf .quick-btn.active {
  background: var(--widget-active-mint) !important;
  border-color: var(--widget-sage) !important;
  box-shadow: inset 0 0 0 1px var(--widget-sage), 0 3px 10px rgba(111, 139, 104, 0.28) !important;
}

/* Labels sit over the artwork so they remain legible without shrinking it.
   The attribute hook is ready for a later caregiver show/hide preference. */
body.sol-glow .sol-shelf-grid .quick-btn::after {
  content: attr(data-label) !important;
  position: absolute !important;
  inset-inline: 6px !important;
  bottom: 6px !important;
  z-index: 2 !important;
  min-height: 19px !important;
  max-width: none !important;
  padding: 3px 4px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  pointer-events: none !important;
  color: var(--widget-ink) !important;
  background: rgba(255, 252, 244, 0.92) !important;
  border: 1px solid rgba(111, 139, 104, 0.42) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 7px rgba(61, 52, 40, 0.14) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(7px, 1.55vw, 8.5px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.sol-glow.widget-shelf-labels-hidden .sol-shelf-grid .quick-btn::after,
body.sol-glow[data-widget-shelf-labels="hidden"] .sol-shelf-grid .quick-btn::after {
  display: none !important;
}

/* Image scaling inside shelf tiles */
body.sol-glow .sol-trick-shelf img,
body.sol-glow .sol-trick-shelf .btn-icon-slot img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

body.sol-glow .sol-trick-shelf .btn-icon-slot img.widget-custom-icon,
body.sol-glow .quick-actions .btn-icon-slot img.widget-custom-icon {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 28% !important;
  transform: scale(1.22) !important;
  transform-origin: 50% 30% !important;
}

body.sol-glow .sol-shelf-grid .btn-icon-slot img.widget-custom-icon {
  object-position: center !important;
  transform: none !important;
  transform-origin: center !important;
}


/* ==========================================
   4. CAREGIVER SETTINGS CENTER
   ========================================== */

body.sol-glow .settings-overlay {
  background: rgba(42, 54, 47, 0.48) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body.sol-glow .settings-drawer {
  color: var(--widget-ink) !important;
  border: 1px solid rgba(145, 116, 54, 0.48) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(196, 231, 210, 0.68), transparent 33%),
    linear-gradient(155deg, #fffaf0, #eee7d7) !important;
  box-shadow: 0 24px 74px rgba(38, 48, 41, 0.36), inset 0 1px rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sol-glow .settings-drawer .drawer-header {
  color: var(--widget-ink) !important;
  border-bottom: 1px solid rgba(145, 116, 54, 0.28) !important;
  background: rgba(255, 252, 244, 0.82) !important;
}

body.sol-glow .settings-drawer .drawer-title {
  color: #284b3d !important;
}

body.sol-glow .settings-drawer .drawer-subtitle,
body.sol-glow .settings-drawer .asset-mini,
body.sol-glow .settings-drawer .setting-help,
body.sol-glow .settings-drawer .widget-release-stamp,
body.sol-glow .settings-drawer .mode-description {
  color: #6b6255 !important;
}

body.sol-glow .settings-drawer .close-btn {
  color: #4f4435 !important;
  border: 1px solid rgba(145, 116, 54, 0.48) !important;
  border-radius: 14px !important;
  background: var(--widget-paper-soft) !important;
  box-shadow: 0 2px 7px rgba(61, 52, 40, 0.12) !important;
}

body.sol-glow .settings-drawer .close-btn:hover,
body.sol-glow .settings-drawer .close-btn:focus-visible {
  color: #21483a !important;
  border-color: var(--widget-active-border) !important;
  background: var(--widget-active-mint) !important;
}

body.sol-glow .settings-drawer .drawer-controls {
  border-bottom: 1px solid rgba(145, 116, 54, 0.25) !important;
  background: rgba(245, 238, 222, 0.86) !important;
}

body.sol-glow .settings-drawer .settings-tab {
  color: var(--widget-ink) !important;
  border-color: rgba(145, 116, 54, 0.42) !important;
  background: linear-gradient(155deg, #fffdf7, #eee3cd) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 2px 7px rgba(61, 52, 40, 0.08) !important;
}

body.sol-glow .settings-drawer .settings-tab:hover,
body.sol-glow .settings-drawer .settings-tab:focus-visible,
body.sol-glow .settings-drawer .settings-tab.active {
  color: #173f32 !important;
  border-color: var(--widget-active-border) !important;
  background: linear-gradient(155deg, #f1fbf5, #d4ecd9) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 4px 13px rgba(74, 104, 82, 0.18) !important;
}

body.sol-glow .settings-drawer .drawer-content {
  color: var(--widget-ink) !important;
  scrollbar-color: var(--widget-sage) rgba(111, 139, 104, 0.12);
}

body.sol-glow .settings-drawer .drawer-section {
  color: var(--widget-ink) !important;
  border-color: rgba(145, 116, 54, 0.3) !important;
  background: rgba(255, 252, 244, 0.9) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92), 0 5px 14px rgba(61, 52, 40, 0.07) !important;
}

body.sol-glow .settings-drawer .section-title {
  color: #315f50 !important;
  opacity: 1 !important;
}

body.sol-glow .settings-drawer .setting-row + .setting-row,
body.sol-glow .settings-drawer .widget-focus-row {
  border-color: rgba(111, 139, 104, 0.2) !important;
}

body.sol-glow .settings-drawer .widget-focus-row,
body.sol-glow .settings-drawer .solid-background-control,
body.sol-glow .settings-drawer .asset-card,
body.sol-glow .settings-drawer .mode-description,
body.sol-glow .settings-drawer .log,
body.sol-glow .settings-drawer details,
body.sol-glow .settings-drawer .custom-text-preview {
  color: var(--widget-ink) !important;
  border: 1px solid rgba(111, 139, 104, 0.26) !important;
  border-radius: 13px !important;
  background: rgba(250, 247, 237, 0.92) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72) !important;
}

body.sol-glow .settings-drawer .asset-card {
  padding: 12px !important;
}

body.sol-glow .settings-drawer .asset-row {
  color: var(--widget-ink) !important;
}

body.sol-glow .settings-drawer .status-pill {
  color: #315f50 !important;
  border-color: rgba(111, 139, 104, 0.32) !important;
  background: rgba(226, 240, 217, 0.68) !important;
}

body.sol-glow .settings-drawer :is(input[type="text"], input[type="search"], input[type="number"], input[type="file"], textarea, select) {
  color: var(--widget-ink) !important;
  border: 1px solid rgba(111, 139, 104, 0.42) !important;
  border-radius: 11px !important;
  background-color: #fffdf8 !important;
  box-shadow: inset 0 1px 3px rgba(61, 52, 40, 0.08) !important;
}

body.sol-glow .settings-drawer select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 12px 36px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #557261 50%),
    linear-gradient(135deg, #557261 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

body.sol-glow .settings-drawer :is(input, textarea, select, button):focus-visible {
  outline: 3px solid rgba(63, 125, 112, 0.3) !important;
  outline-offset: 2px !important;
}

body.sol-glow .settings-drawer input[type="checkbox"]:not(#crestToggle),
body.sol-glow .settings-drawer input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: inline-grid !important;
  place-content: center !important;
  border: 2px solid rgba(83, 111, 91, 0.58) !important;
  background: #fffdf8 !important;
  box-shadow: inset 0 1px 3px rgba(61, 52, 40, 0.08) !important;
  cursor: pointer !important;
}

body.sol-glow .settings-drawer input[type="checkbox"]:not(#crestToggle) {
  border-radius: 8px !important;
}

body.sol-glow .settings-drawer input[type="radio"] {
  border-radius: 50% !important;
}

body.sol-glow .settings-drawer input[type="checkbox"]:not(#crestToggle)::after {
  content: "";
  width: 11px;
  height: 6px;
  border: solid #fffdf8;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.14s ease;
}

body.sol-glow .settings-drawer input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fffdf8;
  transform: scale(0);
  transition: transform 0.14s ease;
}

body.sol-glow .settings-drawer input[type="checkbox"]:not(#crestToggle):checked,
body.sol-glow .settings-drawer input[type="radio"]:checked {
  border-color: #557b66 !important;
  background: #679077 !important;
}

body.sol-glow .settings-drawer input[type="checkbox"]:not(#crestToggle):checked::after,
body.sol-glow .settings-drawer input[type="radio"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

body.sol-glow .settings-drawer input[type="radio"]:checked::after {
  transform: scale(1);
}

body.sol-glow .settings-drawer input[type="range"] {
  accent-color: #679077 !important;
}

body.sol-glow .settings-drawer button:not(.settings-tab):not(.close-btn):not(.scene-thumb):not(.color-dot):not(.skin-option) {
  color: var(--widget-ink) !important;
  border: 1px solid rgba(111, 139, 104, 0.42) !important;
  border-radius: 11px !important;
  background: linear-gradient(155deg, #fffdf7, #eee4d1) !important;
  box-shadow: 0 2px 7px rgba(61, 52, 40, 0.09) !important;
  font-weight: 700 !important;
}

body.sol-glow .settings-drawer button:not(.settings-tab):not(.close-btn):not(.scene-thumb):not(.color-dot):not(.skin-option):hover,
body.sol-glow .settings-drawer button:not(.settings-tab):not(.close-btn):not(.scene-thumb):not(.color-dot):not(.skin-option):focus-visible,
body.sol-glow .settings-drawer button[aria-pressed="true"] {
  color: #173f32 !important;
  border-color: var(--widget-active-border) !important;
  background: var(--widget-active-mint) !important;
}

body.sol-glow .settings-drawer .scene-thumb,
body.sol-glow .settings-drawer .skin-option,
body.sol-glow .settings-drawer .color-dot {
  border-color: rgba(111, 139, 104, 0.42) !important;
  box-shadow: 0 2px 7px rgba(61, 52, 40, 0.1) !important;
}

body.sol-glow .settings-drawer .scene-thumb.active,
body.sol-glow .settings-drawer .skin-option.active,
body.sol-glow .settings-drawer .color-dot.active {
  border-color: #557b66 !important;
  box-shadow: 0 0 0 3px rgba(103, 144, 119, 0.24) !important;
}

/* Finish the light Settings conversion for late-loaded feature styles. */
body.sol-glow .settings-drawer .watch-r3-privacy,
body.sol-glow .settings-drawer .watch-r3-help {
  color: #566b5e !important;
}

body.sol-glow .settings-drawer .watch-r3-live {
  color: #315f50 !important;
  border: 1px solid rgba(111, 139, 104, 0.26) !important;
  background: rgba(226, 240, 217, 0.68) !important;
}

body.sol-glow .settings-drawer .skin-option {
  min-height: 76px !important;
  color: var(--widget-ink) !important;
  border: 1px solid rgba(111, 139, 104, 0.42) !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg, #fffdf7, #eee4d1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 2px 7px rgba(61, 52, 40, 0.09) !important;
}

body.sol-glow .settings-drawer .skin-option:hover,
body.sol-glow .settings-drawer .skin-option:focus-visible,
body.sol-glow .settings-drawer .skin-option.active {
  color: #173f32 !important;
  border-color: var(--widget-active-border) !important;
  background: var(--widget-active-mint) !important;
}

body.sol-glow .settings-drawer .skin-option > * {
  color: inherit !important;
  opacity: 1 !important;
}

body.sol-glow .settings-drawer .scene-thumb {
  position: relative !important;
  display: grid !important;
  place-content: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  padding: 8px 5px 27px !important;
  color: #173f32 !important;
}

body.sol-glow .settings-drawer .scene-thumb > span:last-child {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  min-height: 20px !important;
  display: grid !important;
  place-items: center !important;
  padding: 3px 5px !important;
  border: 1px solid rgba(145, 116, 54, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 244, 0.9) !important;
  color: #3d3428 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body.sol-glow .settings-drawer .widget-assets-section .asset-intro,
body.sol-glow .settings-drawer .widget-assets-section .asset-status,
body.sol-glow .settings-drawer .widget-assets-section .sound-manager-pane,
body.sol-glow .settings-drawer .widget-assets-section .sound-chip,
body.sol-glow .settings-drawer .widget-assets-section .sound-library-option,
body.sol-glow .settings-drawer .widget-assets-section .sound-empty {
  color: var(--widget-ink) !important;
  border-color: rgba(111, 139, 104, 0.28) !important;
  background: rgba(250, 247, 237, 0.92) !important;
}

body.sol-glow .settings-drawer .widget-assets-section .asset-intro,
body.sol-glow .settings-drawer .widget-assets-section .asset-status {
  background: linear-gradient(155deg, rgba(241, 251, 245, 0.96), rgba(226, 240, 217, 0.84)) !important;
}

body.sol-glow .settings-drawer .widget-assets-section :is(.sound-pane-title, label, .asset-help strong, .sound-chip strong, .sound-library-main strong) {
  color: #315f50 !important;
}

body.sol-glow .settings-drawer .widget-assets-section :is(.asset-help, .sound-chip small, .sound-library-main small) {
  color: #6b6255 !important;
}

body.sol-glow .settings-drawer .widget-assets-section .sound-prompt-link,
body.sol-glow .settings-drawer .widget-assets-section .sound-source {
  color: #315f50 !important;
  border-color: rgba(111, 139, 104, 0.34) !important;
  background: rgba(226, 240, 217, 0.68) !important;
}

body.sol-glow .settings-drawer .widget-assets-section .sound-row-action,
body.sol-glow .settings-drawer .widget-assets-section .sound-library-more,
body.sol-glow .settings-drawer .widget-assets-section .asset-actions button.secondary,
body.sol-glow .settings-drawer .widget-assets-section .asset-toggle[aria-pressed="false"] {
  color: var(--widget-ink) !important;
  border-color: rgba(111, 139, 104, 0.38) !important;
  background: linear-gradient(155deg, #fffdf7, #eee4d1) !important;
}

body.sol-glow .settings-drawer .widget-assets-section .sound-advanced,
body.sol-glow .settings-drawer .widget-assets-section .sound-advanced summary {
  color: #566b5e !important;
  border-color: rgba(111, 139, 104, 0.22) !important;
}


/* ==========================================
   5. RESPONSIVE SAFETY & OVERFLOW GUARDS
   ========================================== */

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

@media (max-width: 480px) {
  body.sol-glow .quick-actions,
  body.sol-glow #solActionBar {
    width: calc(100vw - 12px) !important;
    padding: 5px !important;
    gap: 4px !important;
  }

  body.sol-glow .top-bar {
    max-width: calc(100vw - 12px) !important;
  }

  /* Keep the 44px collapse handle from covering the Settings node. */
  body.sol-glow .top-bar:not(.collapsed) ~ .top-bar-handle {
    top: var(--top-bar-height) !important;
    right: 4px !important;
    border-radius: 0 0 9px 9px !important;
  }
}

@media (max-width: 700px), (hover: none), (pointer: coarse),
  (orientation: landscape) and (max-height: 560px) {
  body.sol-glow .top-bar button,
  body.sol-glow .top-bar .top-pill-toggle,
  body.sol-glow .top-bar .sol-brand,
  body.sol-glow #topMimicToggle,
  body.sol-glow #topLookToggle,
  body.sol-glow #topFlockCount,
  body.sol-glow #topQuietToggle,
  body.sol-glow #topVisualizerToggle,
  body.sol-glow #topMuteToggle,
  body.sol-glow #topFullscreenToggle,
  body.sol-glow #topSettingsToggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Keep caregiver controls readable without compressing the bird stage. */
body.sol-glow .top-bar > .top-bar-center {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: clamp(4px, .55vw, 8px) !important;
  padding-inline: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior-inline: contain;
}

body.sol-glow .top-bar > .top-bar-center::-webkit-scrollbar {
  display: none !important;
}

body.sol-glow .top-bar > .top-bar-center > * {
  flex: 0 0 auto !important;
}