.composer :is(button, summary, input, textarea, select),
#result-overlay button, .reading-control, .hud button, #mode-selection button {
  -webkit-tap-highlight-color: transparent;
}
.composer :is(button, summary):focus:not(:focus-visible),
#result-overlay button:focus:not(:focus-visible), .reading-control:focus:not(:focus-visible) {
  outline: none;
}
.composer :is(button, summary, input, textarea, select):focus-visible,
#result-overlay button:focus-visible, .reading-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #101b18, 0 0 0 4px var(--hc-gold, #ffcc00);
}
.composer :is(button, summary) :is(svg, img), .reading-control svg {
  pointer-events: none;
}
.reading-controls {
  --control-size: clamp(32px, 9vw, 48px);
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  gap: .6rem clamp(5px, 2vw, 14px);
  width: min(100%, 760px);
  margin: 12px auto 30px;
  flex-shrink: 0;
}
.reading-controls > [data-record-actions] { display: contents; }
.reading-icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 12px);
}
.reading-action-status { grid-column: 1 / -1; text-align: center; }
.reading-action-status:empty { display: none; }
.reading-controls .reading-control {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hc-gold, #ffcc00);
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease;
}
.reading-controls .reading-control svg { width: 48%; height: 48%; }
.reading-controls .reading-control[aria-pressed="true"] {
  background: transparent;
  color: var(--hc-gold, #ffcc00);
}
.reading-controls .restart-btn {
  grid-column: 2;
  grid-row: 1;
  border: 0;
  background: transparent;
  min-height: var(--control-size);
  margin: 0;
  padding: .2em clamp(6px, 2vw, 18px);
  border-radius: 999px;
  font-size: clamp(11px, 3vw, 15px);
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
  color: var(--hc-gold, #ffcc00);
  transition: transform .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .reading-controls :is(.reading-control, .restart-btn):hover { transform: scale(1.1); }
}
.reading-controls :is(.reading-control, .restart-btn):active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .reading-controls :is(.reading-control, .restart-btn) { transition: none; transform: none !important; }
}

.reading-control[aria-pressed="true"] svg { fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .reading-controls :is(.reading-control, .restart-btn):hover {
    background: var(--hc-gold, #ffcc00);
    color: #fff;
  }
}
.reading-controls :is(.reading-control, .restart-btn):active {
  background: var(--hc-gold, #ffcc00);
  color: #fff;
}

.composer .taosaga-send-button, .support-surface .taosaga-send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--send-size);
  height: var(--send-size);
  padding: 0;
  flex: none;
  border-radius: 50%;
  color: #000;
  background: var(--hc-gold, #ffcc00);
  transition: transform .16s ease;
}
:root { --send-size: 36px; }
@media (max-width: 600px) { :root { --send-size: 32.4px; } }
.support-surface form:has(.taosaga-send-button) { position: relative; }
.support-surface form:has(.taosaga-send-button) textarea {
  width: 100%;
  padding-block-end: calc(var(--send-size) + 16px);
  resize: none;
}
.support-surface form .taosaga-send-button {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-end: 10px;
}
.taosaga-send-button svg path { stroke: #000 !important; }
.taosaga-send-button svg { opacity: 1 !important; display: block; width: 50%; height: 50%; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .taosaga-send-button:hover:not(:disabled) { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .taosaga-send-button { transition: none; transform: none !important; }
}
