// MedBridge — iOS 26 Liquid Glass theme overlay.
// Wraps the existing prototype with a wallpaper layer + scoped CSS overrides
// so every screen picks up the floating-glass treatment without having to
// rewrite each component. The overrides target a small set of class markers
// (mb-tabbar, mb-header, mb-card, mb-action-tile, mb-input, mb-pill) that are
// added to the relevant components.
//
// Why this approach? Liquid Glass mostly changes:
//   - the body wallpaper (so the glass effect is visible against colour)
//   - the floating navigation chrome (tab bar detaches from edges; headers
//     become translucent + blur)
//   - corner radii (more rounded, continuous)
//   - subtle inner highlight on glass surfaces
// All of these can be applied via CSS without touching screen logic.

const LIQUID_CSS = `
  /* Wallpaper — gentle clinical gradient with two warm/cool blobs. We keep
     it muted because the audience is conservative; Liquid Glass needs
     *some* colour underneath to be visible at all but we don't push it. */
  .mb-liquid {
    position: absolute; inset: 0; overflow: hidden;
    background: linear-gradient(180deg, #E8F0F8 0%, #F2F4F8 45%, #E4ECF4 100%);
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Source Sans 3", system-ui, sans-serif;
  }
  .mb-liquid::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(circle at 18% 8%,  rgba(15,118,110,0.18), transparent 38%),
      radial-gradient(circle at 86% 18%, rgba(180,83,9,0.14),  transparent 36%),
      radial-gradient(circle at 50% 92%, rgba(31,78,140,0.16), transparent 42%);
  }
  .mb-liquid-content {
    position: absolute; inset: 0; overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Canvas surfaces — let the wallpaper show through. Inline-style backgrounds
     on screen wrappers use the static canvas colour; we replace with transparent. */
  .mb-liquid [style*="background: rgb(244, 246, 250)"],
  .mb-liquid [style*="background: #F4F6FA"] {
    background: transparent !important;
  }

  /* Floating glass tab bar — the most distinctive Liquid Glass element. */
  .mb-liquid .mb-tabbar {
    left: 12px !important;
    right: 12px !important;
    bottom: 14px !important;
    border-radius: 30px !important;
    padding: 6px 4px 10px !important;
    background: rgba(255,255,255,0.62) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    border: 0.5px solid rgba(255,255,255,0.7) !important;
    border-top: 0.5px solid rgba(255,255,255,0.95) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 -0.5px 0 rgba(15,27,45,0.04) inset,
      0 14px 40px rgba(15,27,45,0.18),
      0 1px 4px rgba(15,27,45,0.06) !important;
  }

  /* Frosted screen headers — used at the top of Suchen, Kalender, Chat list,
     Profile, and any SheetHeader. */
  .mb-liquid .mb-header {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.78) 0%,
      rgba(255,255,255,0.62) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.6) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 0.5px 0 rgba(15,27,45,0.04) !important;
  }

  /* Cards — softer + more rounded, with a 1px white inner highlight. */
  .mb-liquid .mb-card {
    border-radius: 22px !important;
    background: rgba(255,255,255,0.86) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.7) inset,
      0 1px 2px rgba(15,27,45,0.04),
      0 12px 28px rgba(15,27,45,0.08) !important;
  }

  /* Action tiles on Home — keep the Angebotstyp tint but glassier. */
  .mb-liquid .mb-action-tile {
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 14px 30px rgba(15,27,45,0.08) !important;
  }

  /* Inputs — glassy resting state. */
  .mb-liquid .mb-input {
    border-radius: 16px !important;
    background: rgba(255,255,255,0.72) !important;
    border-color: rgba(255,255,255,0.85) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
  }

  /* Buttons — continuous radius. */
  .mb-liquid button { border-radius: 14px; }

  /* Chips/pills — bigger radius (already 999, harmless) and slight glass. */
  .mb-liquid .mb-pill {
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
  }
`;

function LiquidScope({ children }) {
  return (
    <div className="mb-liquid">
      <style>{LIQUID_CSS}</style>
      <div className="mb-liquid-content">{children}</div>
    </div>
  );
}

Object.assign(window, { LiquidScope, LIQUID_CSS });