.voice-buttons { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.voice-button { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid #d9dce5; border-radius: 9999px; background: #fff; color: #4b5563; box-shadow: 0 1px 2px rgb(15 23 42 / 8%); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease, transform .15s ease; }
.voice-button:hover:not(:disabled) { transform: translateY(-1px); }
.voice-button:focus-visible { outline: 3px solid rgb(99 102 241 / 35%); outline-offset: 2px; }
.voice-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.voice-button--sofia { display: inline-flex; width: auto; min-width: 5.4rem; height: 2.65rem; align-items: center; justify-content: center; gap: .45rem; padding: .25rem .75rem .25rem .3rem; border-color: #c7d2fe; background: #eef2ff; color: #3730a3; font-size: .82rem; font-weight: 800; }
.voice-button--sofia img { width: 2.05rem; height: 2.05rem; flex: 0 0 auto; border-radius: 9999px; object-fit: cover; }
.voice-button--sofia:hover:not(:disabled), .voice-button--sofia[data-reader-state="playing"], .voice-button--sofia[data-reader-state="loading"] { border-color: #818cf8; background: #e0e7ff; color: #312e81; }
.voice-button--sofia[data-reader-state="loading"] { cursor: wait; opacity: .72; }
.voice-button--woman { border-color: #f0a4cb; background: #fff0f7; color: #b52f75; }
.voice-button--man { border-color: #8bbcf6; background: #eef6ff; color: #2468b8; }
.voice-button--woman:hover:not(:disabled), .voice-button--woman[data-reader-state="playing"], .voice-button--woman[data-reader-state="loading"] { border-color: #c084fc; background: #faf5ff; color: #9333ea; }
.voice-button--man:hover:not(:disabled), .voice-button--man[data-reader-state="playing"], .voice-button--man[data-reader-state="loading"] { border-color: #60a5fa; background: #eff6ff; color: #2563eb; }
.voice-button[data-reader-state="error"] { border-color: #fca5a5; color: #dc2626; }
.voice-button[data-reader-state="unavailable"], .voice-button:disabled:not([data-reader-state="loading"]):not([data-reader-state="playing"]) { cursor: wait; opacity: .45; }
@media (max-width: 480px) { .voice-buttons { gap: .3rem; } .voice-button { width: 2.15rem; height: 2.15rem; } .voice-button--sofia { width: auto; min-width: 5rem; height: 2.45rem; } .voice-button--sofia img { width: 1.85rem; height: 1.85rem; } .voice-button svg { width: 1.1rem; height: 1.1rem; } }