/* css/glass.css — backdrop blur on SMALL controls/panels only, never the
   whole page. */

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--ease);
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--panel-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.bubble {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: .85em;
  flex-shrink: 0;
}
.bubble-sm { width: 26px; height: 26px; font-size: .72em; }
.bubble-lg { width: 64px; height: 64px; font-size: 1.3em; }
.bubble-muted { opacity: .45; }

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 40;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 82dvh;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  z-index: 41;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: sheet-up .25s ease;
}
@keyframes sheet-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9em 1em;
  border-bottom: 1px solid var(--line);
}
.sheet-title { font-weight: 600; }
.sheet-body { overflow-y: auto; padding: 1em 1.2em 1.6em; }

.help-block { margin-bottom: 1.1em; }
.help-title { font-weight: 600; color: var(--gold); margin-bottom: .2em; }
.help-line { color: var(--text); margin: 0 0 .15em; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px);
  background: var(--panel-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .6em 1.1em;
  font-size: .9em;
  opacity: 0;
  transition: opacity var(--ease), transform var(--ease);
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }