/* ── BUTTONS ── */
.btn-primary { background: var(--ink); color: var(--paper); border: none; padding: 0.65rem 1.6rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--radius-sm); transition: all var(--transition); }
.btn-primary:hover { background: var(--rust); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--warm-gray); border: 1px solid var(--aged); padding: 0.55rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: all var(--transition); }
.btn-secondary:hover { border-color: var(--warm-gray); color: var(--ink); }

/* ── VOICE BUTTON ── */
.voice-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--aged); background: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--transition); flex-shrink: 0; color: var(--warm-gray); }
.voice-btn:hover { border-color: var(--rust); color: var(--rust); }
.voice-btn.listening { border-color: var(--rust); background: var(--rust); color: white; animation: voicePulse 1.2s infinite; }
.voice-btn--square { border-radius: var(--radius-sm); }
.voice-btn--rounded { border-radius: var(--radius-md); }

@keyframes voicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(196,98,45,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(196,98,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,98,45,0); }
}

/* ── VOICE HINT & WAVE ── */
.voice-hint { font-size: 0.65rem; color: var(--rust); letter-spacing: 0.06em; opacity: 0; transition: opacity 0.3s; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.voice-hint.visible { opacity: 1; }
.voice-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.voice-wave span { display: block; width: 2px; background: var(--rust); border-radius: 2px; animation: waveAnim 0.8s ease-in-out infinite; }
.voice-wave span:nth-child(1) { height: 3px;  animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 8px;  animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { height: 6px;  animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { height: 3px;  animation-delay: 0.4s; }

@keyframes waveAnim {
  0%, 100% { transform: scaleY(0.4); }
  50%       { transform: scaleY(1); }
}

/* ── TAGS FILTER ── */
.tags-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter-tag { padding: 0.28rem 0.7rem; border: 1px solid var(--aged); border-radius: var(--radius-full); font-size: 0.65rem; cursor: pointer; transition: all var(--transition); background: white; color: var(--warm-gray); }
.filter-tag.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }