/* Voice glass components. Measured from the glass reference (inspo-buttons-panels.webp):
   smoked glass for panels, frosted glass only for the one control to press,
   a lit top rim instead of a border, and a soft dark band inside the curved ends. */

.glass {
  position: relative;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 26px 0 44px -30px var(--glass-thickness),
    inset 0 -2px 0 rgba(255, 255, 255, 0.05),
    0 30px 60px -34px var(--glass-shadow);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(170deg, var(--glass-rim) 0%, var(--glass-rim-mid) 22%, transparent 46%, transparent 62%, var(--glass-rim-low) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.smoked { background: var(--glass-smoked); }
.frosted { background: var(--glass-frosted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font: var(--weight-medium) var(--text-md) / 1 var(--font);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.btn.frosted:hover { background: var(--glass-frosted-hover); }
.btn:active { transform: scale(0.98); }
.btn[aria-busy="true"] { cursor: progress; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--glass-frosted); }
.icon-btn svg, .btn svg { width: 22px; height: 22px; flex: none; }

/* ---------- pill inputs (the "Ask AI" pill) ---------- */
.field { display: grid; gap: var(--space-2); }
.field > label { font-size: var(--text-sm); color: var(--ink-soft); padding-left: 22px; }
.pill-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 58px;
  padding: 0 8px 0 22px;
  border-radius: var(--radius-pill);
}
.pill-input > svg { width: 22px; height: 22px; flex: none; }
.pill-input input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: var(--weight-regular) var(--text-md) / 1.2 var(--font);
}
.pill-input input::placeholder { color: var(--ink-faint); }
.pill-input:focus-within { box-shadow: var(--focus), inset 26px 0 44px -30px var(--glass-thickness); }
.pill-input.invalid { box-shadow: 0 0 0 1.5px var(--danger), inset 26px 0 44px -30px var(--glass-thickness); }
.pill-input .icon-btn { width: 42px; height: 42px; }
.pill-input input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }

.hint { margin: 0; padding-left: 22px; font-size: var(--text-sm); color: var(--ink-soft); }
.hint.error { color: var(--danger-ink); display: flex; gap: var(--space-2); align-items: center; }
.hint.error::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }

/* ---------- dialog ---------- */
dialog.sheet {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  padding: 40px 36px 32px;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--ink);
  font-family: var(--font);
}
dialog.sheet::backdrop { background: rgba(12, 12, 18, 0.18); }
dialog.sheet[open] { animation: sheet-in var(--dur-slow) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ---------- keyboard focus ---------- */
.btn:focus-visible, .icon-btn:focus-visible { outline: 0; box-shadow: var(--focus); }

/* ---------- icons ---------- */
.ico-fill { fill: url(#voice-icon-fill); }
.ico-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  dialog.sheet[open] { animation: none; }
  .btn, .icon-btn { transition: none; }
}

/* ---------- check (glass tick box with a label) ---------- */
.check { display: inline-flex; align-items: center; gap: var(--space-3); padding-left: 22px; font-size: var(--text-md); color: var(--ink-soft); cursor: pointer; width: fit-content; }
.check input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.check-box { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; transition: background var(--dur-fast) linear; }
.check-box svg { width: 18px; height: 18px; color: var(--ink); opacity: 0; transform: scale(0.7); transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out); }
.check input:checked + .check-box { background: rgba(255, 255, 255, 0.24); }
.check input:checked + .check-box svg { opacity: 1; transform: none; }
.check input:checked ~ span:last-child { color: var(--ink); }
.check input:focus-visible + .check-box { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .check-box, .check-box svg { transition: none; } }