/* Homewell V0.7.1 — Liquid Glass material system. This is the ONLY file that declares backdrop-filter, glass tints,
   glass edges and glass shadows. A component picks one of five materials and keeps only its own shape (radius,
   padding, layout):
     liquid-clear      lightest: chat header, home widget, Dock
     liquid-light      input field, small round controls, notification, typing pill
     liquid-medium     bright frosted glass with dark text: my bubbles, prompts
     liquid-dark       smoky glass with white text: the other party's bubbles, toast
     liquid-prominent  strongest: sheets, menus, ⚙ panel, select bar, login/admin cards
   Each material = translucent tint (from the wallpaper) + backdrop blur & saturation + a very thin light edge
   (inset 0.5px) + a soft inner top highlight + a slight light→dark sheen + (at most) a soft outer shadow.
   Wallpaper-adaptive: liquid.js samples the current wallpaper and overrides the --wall-* variables (and sets
   html[data-wall-tone]); the values below are the fallback when sampling is not possible (login page, errors). */
:root{
  /* wallpaper (liquid.js) */
  --wall-rgb:58 66 62; --wall-deep:40 46 46; --wall-pale:246 247 245; --wall-lum:.18; --wall-lum-top:.18; --wall-lum-bottom:.18; --wall-busy:.35;
  /* text */
  --lg-ink:27 32 30;               /* on bright glass */
  --lg-on-wall:255 255 255;        /* on the wallpaper itself and on clear / light glass */
  --lg-on-wall-shadow:0 1px 2px rgb(0 0 0/.22),0 0 12px rgb(0 0 0/.16);
  --lg-accent:52 120 88;           /* Homewell green: primary buttons, checks */
  /* blur */
  --lg-blur-1:14px; --lg-blur-2:22px; --lg-blur-3:30px; --lg-sat:150%;
  --lg-wall-blur:2px;              /* light softening of the wallpaper behind the chat (nearly sharp; kaye V0.7.1) */
  /* tint strength (alpha) per material */
  --lg-clear-tint:var(--wall-deep); /* clear glass darkens a touch on dark wallpapers (white text), lightens on light ones */
  --lg-a-clear:.16; --lg-a-light:.2; --lg-a-medium:.82; --lg-a-prominent:.86;
  --lg-a-dark:clamp(.5,calc(.44 + var(--wall-lum)*.62 + var(--wall-busy)*.06),.86);
  /* shadows: almost none on content, soft on floating things */
  --lg-shadow-0:0 0 0 0 transparent;
  --lg-shadow-1:0 1px 1.5px rgb(0 0 0/.05),0 4px 14px rgb(0 0 0/.06);
  --lg-shadow-2:0 2px 6px rgb(0 0 0/.07),0 18px 44px rgb(0 0 0/.20);
  /* shapes */
  --lg-r-bubble:19px; --lg-r-join:6px; --lg-r-card:28px; --lg-r-field:22px;
}
/* Light wallpapers: text on the wallpaper and on clear/light glass turns dark, and clear/light glass gets denser. */
html[data-wall-tone=light],html[data-wall-top=light] .lg-top,html[data-wall-bottom=light] .lg-bottom{
  --lg-on-wall:27 32 30;--lg-on-wall-shadow:0 0 10px rgb(255 255 255/.45);--lg-clear-tint:var(--wall-pale);--lg-a-clear:.3;--lg-a-light:.46}
/* The header (.lg-top) and composer (.lg-bottom) follow the brightness of the wallpaper band they sit on. */
html[data-wall-top=dark] .lg-top,html[data-wall-bottom=dark] .lg-bottom{
  --lg-on-wall:255 255 255;--lg-on-wall-shadow:0 1px 2px rgb(0 0 0/.22),0 0 12px rgb(0 0 0/.16);--lg-clear-tint:var(--wall-deep);--lg-a-clear:clamp(.14,calc(.08 + var(--wall-lum-top)*.6),.36);--lg-a-light:.2}

/* 1) What each material is. Components may fine-tune these custom properties (e.g. --m-ink), never repaint. */
.liquid-clear{--m-ink:var(--lg-on-wall);--m-fill:rgb(var(--lg-clear-tint)/var(--lg-a-clear));--m-blur:blur(var(--lg-blur-1)) saturate(var(--lg-sat));
  --m-sheen:linear-gradient(180deg,rgb(255 255 255/.12),rgb(255 255 255/0) 60%);
  --m-edge:inset 0 0 0 .5px rgb(255 255 255/.24),inset 0 .5px 0 rgb(255 255 255/.34);--m-shadow:var(--lg-shadow-0);--m-text-shadow:var(--lg-on-wall-shadow)}
.liquid-light{--m-ink:var(--lg-on-wall);--m-fill:rgb(var(--wall-pale)/var(--lg-a-light));--m-blur:blur(var(--lg-blur-2)) saturate(var(--lg-sat));
  --m-sheen:linear-gradient(180deg,rgb(255 255 255/.16),rgb(255 255 255/.03) 55%,rgb(0 0 0/.03));
  --m-edge:inset 0 0 0 .5px rgb(255 255 255/.30),inset 0 1px 0 rgb(255 255 255/.22);--m-shadow:var(--lg-shadow-1);--m-text-shadow:var(--lg-on-wall-shadow)}
.liquid-medium{--m-ink:var(--lg-ink);--m-fill:rgb(var(--wall-pale)/var(--lg-a-medium));--m-blur:blur(var(--lg-blur-2)) saturate(var(--lg-sat));
  --m-sheen:linear-gradient(180deg,rgb(255 255 255/.42),rgb(255 255 255/.10) 50%,rgb(255 255 255/0));
  --m-edge:inset 0 0 0 .5px rgb(255 255 255/.75),inset 0 1px 0 rgb(255 255 255/.85);--m-shadow:var(--lg-shadow-1);--m-text-shadow:none}
.liquid-dark{--m-ink:255 255 255;--m-fill:rgb(var(--wall-deep)/var(--lg-a-dark));--m-blur:blur(var(--lg-blur-2)) saturate(140%);
  --m-sheen:linear-gradient(180deg,rgb(255 255 255/.09),rgb(255 255 255/.02) 50%,rgb(0 0 0/.07));
  --m-edge:inset 0 0 0 .5px rgb(255 255 255/.16),inset 0 .5px 0 rgb(255 255 255/.24);--m-shadow:0 1px 2px rgb(0 0 0/.06);--m-text-shadow:none}
.liquid-prominent{--m-ink:var(--lg-ink);--m-fill:rgb(var(--wall-pale)/var(--lg-a-prominent));--m-blur:blur(var(--lg-blur-3)) saturate(160%);
  --m-sheen:linear-gradient(180deg,rgb(255 255 255/.5),rgb(255 255 255/.08) 38%,rgb(255 255 255/0));
  --m-edge:inset 0 0 0 .5px rgb(255 255 255/.78),inset 0 1px 0 rgb(255 255 255/.9);--m-shadow:var(--lg-shadow-2);--m-text-shadow:none}

/* Bright glass on a bright wallpaper: a slightly firmer hairline and shadow so it still separates. */
html[data-wall-tone=light] .liquid-medium{--m-edge:inset 0 0 0 .5px rgb(0 0 0/.07),inset 0 1px 0 rgb(255 255 255/.9);--m-shadow:0 1px 2px rgb(0 0 0/.07),0 4px 14px rgb(0 0 0/.07)}

/* 2) How every material is painted. The :is(*,#lg#lg) part only raises specificity so base rules in style.css
   (written before the material system) can never repaint glass; components adjust the --m-* properties instead. */
:is(.liquid-clear,.liquid-light,.liquid-medium,.liquid-dark,.liquid-prominent):is(*,#lg#lg){
  color:rgb(var(--m-ink));background-color:var(--m-fill);background-image:var(--m-sheen);
  -webkit-backdrop-filter:var(--m-blur);backdrop-filter:var(--m-blur);
  border:0;box-shadow:var(--m-edge),var(--m-shadow);text-shadow:var(--m-text-shadow)}
/* Glass inside glass does not blur again (a nested backdrop only sees its parent anyway); it gets denser instead. */
:is(.liquid-clear,.liquid-light,.liquid-medium,.liquid-dark,.liquid-prominent) :is(.liquid-clear,.liquid-light,.liquid-medium,.liquid-dark,.liquid-prominent){--m-blur:none;--lg-a-prominent:.95}
/* Content glass (chat bubbles, prompts) sits on the already-blurred chat wallpaper: no blur of its own, so long
   chats scroll smoothly on phones. Group edges are merged by the component (radius only). */
.lg-content{--m-blur:none}

/* Low power / accessibility. liquid.js adds html.lg-lite on data-saver or low-memory devices. */
html.lg-lite{--lg-blur-1:8px;--lg-blur-2:12px;--lg-blur-3:16px;--lg-sat:130%;--lg-wall-blur:2px}
@media (prefers-reduced-motion:reduce){:root{--lg-blur-1:10px;--lg-blur-2:16px;--lg-blur-3:20px}}
@media (prefers-reduced-transparency:reduce){
  :root{--lg-a-clear:.6;--lg-a-light:.72;--lg-a-medium:.95;--lg-a-prominent:.97;--lg-a-dark:.9;--lg-wall-blur:12px}
  :is(.liquid-clear,.liquid-light,.liquid-medium,.liquid-dark,.liquid-prominent){--m-blur:none}
  html:not([data-wall-tone=light]) :is(.liquid-clear,.liquid-light){--m-fill:rgb(var(--wall-deep)/.82)}
}
/* No backdrop-filter support: calm, denser fills so text stays readable. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--lg-a-medium:.94;--lg-a-prominent:.96;--lg-a-dark:.86}
  html:not([data-wall-tone=light]) :is(.liquid-clear,.liquid-light){--m-fill:rgb(var(--wall-deep)/.62)}
  html[data-wall-tone=light] :is(.liquid-clear,.liquid-light){--m-fill:rgb(var(--wall-pale)/.8)}
}