.app{--composer-opacity:32%;--header-opacity:72%;--window-opacity:88%}

/* User-controlled glass density. Keep the wallpaper visible without changing layout. */
.app.chat-open .conversation>.composer-area>.composer,
.app .thread-composer-area>.composer{
  background:color-mix(in srgb,var(--panel) var(--composer-opacity),transparent)!important;
}

.app .conversation-head,
.app .thread>header{
  background:color-mix(in srgb,var(--panel) var(--header-opacity),transparent)!important;
}

.app .modal,
.app .thread,
.app .emoji-panel,
.app .message-menu,
.app .chat-context-menu{
  background:color-mix(in srgb,var(--panel) var(--window-opacity),transparent)!important;
}

.transparency-settings{display:grid;gap:12px;margin:4px 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 54%,transparent)}
.transparency-settings .settings-label{margin:0 0 1px}
.transparency-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:0!important}
.transparency-range>span{font-size:12px;font-weight:600;color:var(--text)}
.transparency-range output{min-width:42px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.transparency-range input[type=range]{grid-column:1/-1;width:100%;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--accent)}
.transparency-hint{font-size:10px;line-height:1.5;color:var(--muted);margin-top:-3px}