/* Toolbar container (blue background) */
.bel-tts-toolbar {
  display:flex; 
  gap:.5rem; 
  align-items:center;
  padding:.75rem 1rem; 
  margin:0 0 1rem;
  background:#14326B;              /* 🔵 UHD Blue */
  border:1px solid #0f2858;        /* darker blue border */
  border-radius:.75rem;
  color:#fff;                      /* toolbar + status text white */
}

/* Buttons (red with white text/icons) */
.bel-tts-btn, 
.bel-tts-stop {
  display:inline-flex; 
  align-items:center; 
  gap:.4rem;
  background:#ab1c3c;              /* 🔴 UHD Red */
  border:none;
  color:#fff;                      /* text white */
  padding:.45rem .7rem; 
  border-radius:.5rem; 
  cursor:pointer;
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  transition: background .2s ease;
}
.bel-tts-btn:hover, 
.bel-tts-stop:hover { 
  background:#8e162f;              /* darker red hover */
}

/* Icon size + white fill */
.bel-tts-ic {
  width:20px;
  height:20px;
  display:block;
}
.bel-tts-btn .bel-tts-ic path,
.bel-tts-stop .bel-tts-ic path {
  fill:#fff;
}

/* Status text */
.bel-tts-status { 
  margin-left:auto; 
  font-size:13px; 
  opacity:.9; 
  color:#fff; 
}

/* Floating toolbar (bottom-left by default) */
.bel-tts-float {
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 640px){
  .bel-tts-float { left: 12px; bottom: 12px; }
}

/* Round speaker button in floating bar (icon only) */
.bel-tts-float .bel-tts-btn {
  width:44px; 
  height:44px; 
  border-radius:999px; 
  padding:0; 
  justify-content:center;
}
.bel-tts-float .bel-tts-btn span { 
  display:none; 
}