.chat-voice { margin: 12px 0 4px; padding: 12px; border: 1px solid #d5e6dd; border-radius: 16px; background: linear-gradient(145deg, #f6fcf8, #ecf6f0); }
.chat-voice-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chat-voice [hidden] { display: none !important; }
.chat-voice .chat-voice-record {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #8fc9a0;
  border-radius: 999px;
  background: linear-gradient(#f6fff8, #e3f3e8);
  color: #1c4a38;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #2a6b4a, 0 10px 18px rgba(30,80,50,.18), 0 0 12px 2px rgba(72,210,130,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.chat-voice .chat-voice-record:not(:disabled):hover,
.chat-voice .chat-voice-record:focus-visible {
  transform: translateY(-2px);
  outline: 2px solid #246449;
  outline-offset: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 #245c40, 0 14px 22px rgba(30,80,50,.22), 0 0 16px 4px rgba(72,210,130,.3);
}
.chat-voice .chat-voice-record:not(:disabled):active { transform: translateY(2px); }
.chat-voice .chat-voice-record:disabled { opacity: .6; cursor: not-allowed; }
.chat-compose-actions {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 12px;
  width: 100%;
  max-width: 510px;
  margin-top: 4px;
}
.chat-compose-actions > :is(button[type="submit"], input[type="submit"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100% !important;
  height: 52px;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.2;
  letter-spacing: 0;
}
.chat-compose-actions > .chat-voice { display: contents; }
.chat-compose-actions .chat-voice-controls { grid-column: 2; grid-row: 1; min-width: 0; }
.chat-compose-actions .chat-voice .chat-voice-record {
  width: 100% !important;
  height: 52px;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}
.chat-compose-actions .chat-voice-record span { min-width: 0; }
.chat-compose-actions .chat-voice-status { grid-column: 1 / -1; margin: 0; }
.chat-compose-actions .chat-voice:not([data-state="idle"]) .chat-voice-controls { grid-column: 1 / -1; grid-row: 2; }
.chat-compose-actions .chat-voice-preview { min-width: 0; }
.chat-voice svg { width: 19px; height: 19px; flex: 0 0 auto; }
.chat-voice-status { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #496456; }
.chat-voice-status[role="alert"] { color: #a12d35; }
.chat-voice-clock { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: #873c41; }
.chat-voice[data-state="recording"] .chat-voice-clock::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #c6454f; animation: chat-voice-pulse 1.3s ease-in-out infinite; }
.chat-voice audio, .chat-voice-message audio { width: 100%; max-width: 340px; height: 42px; display: block; margin: 6px 0; }
.chat-voice-preview { width: 100%; }
.chat-voice-message { min-width: 180px; max-width: 100%; }
.chat-voice-message span { display: block; font-size: 13px; color: inherit; opacity: .8; }
@keyframes chat-voice-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chat-voice[data-state="recording"] .chat-voice-clock::before { animation: none; } .chat-voice .chat-voice-record { transition: none; } }
@media (max-width: 600px) { .chat-voice { padding: 10px; } .chat-voice-controls .btn { font-size: 14px; } }
@media (max-width: 400px) {
  .chat-compose-actions { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: 8px; }
  html .chat-compose-actions > :is(button[type="submit"], input[type="submit"]),
  html.is-phone .chat-compose-actions > :is(button[type="submit"], input[type="submit"]) {
    font-size: 13px !important;
    padding: 10px 6px !important;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .chat-compose-actions .chat-voice .chat-voice-record { gap: 5px; padding: 8px 7px !important; font-size: 13px !important; }
  .chat-compose-actions .chat-voice-record svg { width: 17px; height: 17px; }
}