.playback-volume-row { flex-wrap: wrap; gap: 14px; }
.playback-volume-control { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px; max-width: 260px; margin-left: auto; }
.playback-volume-control input, .conversation-volume input { flex: 1; min-width: 0; min-height: 32px; accent-color: #d8b88e; cursor: pointer; }
.playback-volume-control input:focus-visible, .conversation-volume input:focus-visible { outline: 2px solid #d8b88e; outline-offset: 4px; border-radius: 4px; }
.playback-volume-control output { min-width: 42px; text-align: right; color: #ead4b5; font-variant-numeric: tabular-nums; }
.conversation-tools { align-items: center; justify-content: space-between; gap: 12px; }
.conversation-tools .log-reset-button { flex-shrink: 0; }
.conversation-volume { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 130px; max-width: 210px; }
.conversation-volume input { width: 90px; min-width: 48px; }
.conversation-volume output { min-width: 34px; color: #ead4b5; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.cast-focus .conversation-volume-toggle { flex-shrink: 0; width: 32px; height: 32px; color: #bda7c4; border-radius: 50%; }
.cast-focus .conversation-volume-toggle.selected { color: #ead4b5; }
.cast-focus .conversation-volume-toggle:hover { background: #e6c6a218; }
.conversation-volume-toggle:focus-visible { outline: 2px solid #e6c6a2; outline-offset: 2px; }
.conversation-volume-toggle svg { width: 17px; height: 17px; }
@media (max-width: 520px) {
  .playback-volume-control { flex-basis: 100%; max-width: none; margin-left: 0; }
  .conversation-tools { gap: 8px; }
  .conversation-volume { gap: 6px; max-width: 180px; }
  .conversation-volume input { min-height: 40px; }
  .cast-focus .conversation-volume-toggle { width: 36px; height: 36px; }
}