/* index.voicemail.css — public terminal site (index.html): voicemail recorder. One of the index.*.css files, linked in order from index.html. */
/* Two layers, so it is never a question of which rule wins: "page" holds the normal stylesheet rules, "element" holds exact
   styles for single elements. Anything in "element" beats anything in "page", whatever the selectors look like. */
@layer page, element;

@layer page {
/* ─────────────────────────────────────────
   VOICEMAIL
   ───────────────────────────────────────── */
.voicemail-section {
  background: var(--bg-surface); border: 1px solid var(--border);
  padding: 20px; margin-top: 20px;
}
.voicemail-section h3 {
  font-size: 13px; font-weight: normal; color: var(--text-bright); margin-bottom: 12px;
}
.vm-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vm-btn {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  padding: 6px 14px; cursor: pointer;
}
.vm-btn:hover { border-color: var(--accent); }
.vm-btn.recording { border-color: var(--danger); color: var(--danger); animation: pulse 1s infinite; }
.vm-status { font-size: 11px; color: var(--text-dim); }
.vm-name-input {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
  padding: 6px 10px; outline: none; width: 160px;
}
}