/* DR Voice Reply — button + recorder modal. Zinc/orange to match the attach card. */

/* injected button, sits inside the #attachfiles card */
/* Match the qq "Select files from your computer" button (responsive.css:2358) so
   the two sit as an identical stacked pair. Injected into the same flex column,
   so width/alignment match automatically. */
.dr-voice-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 8px 14px;
  border: 1px solid #d6d3d1; border-radius: 4px;
  background: #fff; color: #44403c;
  font-family: Verdana, Arial, sans-serif; font-size: 11px; font-weight: bold; line-height: 1.3;
  text-align: center; width: auto; min-width: 160px;
  cursor: pointer; -webkit-appearance: none;
  transition: background .15s, border-color .15s;
}
.dr-voice-btn:hover { background: #fafaf9; border-color: #a8a29e; color: #44403c; }
.dr-voice-btn:active { background: #f5f5f4; }
.dr-voice-btn .dr-voice-ic { font-size: 13px; line-height: 1; }
.dr-voice-btn--off { background: #f4f4f5; border-color: #e7e5e4; color: #a8a29e; cursor: not-allowed; }

/* modal overlay */
.dr-voice-modal {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.6);
  -webkit-tap-highlight-color: transparent;
  align-items: center; justify-content: center; padding: 16px;
}
.dr-voice-modal.open { display: flex; }

.dr-voice-sheet {
  width: 100%; max-width: 420px;
  background: #27272a; color: #f4f4f5; border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.dr-voice-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #3f3f46; font-weight: 600;
}
.dr-voice-x {
  border: none; background: none; color: #a1a1aa; font-size: 24px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.dr-voice-body { padding: 22px 18px; }
.dr-voice-stage { text-align: center; }

.dr-voice-rec {
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  background: #ea580c; color: #fff; font: 600 15px/1 inherit;
  -webkit-appearance: none; transition: transform .1s, background .2s;
}
.dr-voice-rec:active { transform: scale(.95); }
.dr-voice-rec.rec-on { background: #dc2626; animation: dr-voice-pulse 1.4s infinite; }
@keyframes dr-voice-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%     { box-shadow: 0 0 0 16px rgba(220,38,38,0); }
}
.dr-voice-timer { font-size: 32px; font-variant-numeric: tabular-nums; margin: 16px 0 6px; letter-spacing: 1px; }
.dr-voice-status { color: #a1a1aa; font-size: 13px; min-height: 18px; }

.dr-voice-bar { height: 6px; background: #3f3f46; border-radius: 3px; overflow: hidden; margin-top: 14px; }
.dr-voice-bar > i { display: block; height: 100%; width: 0; background: #ea580c; transition: width .1s; }

.dr-voice-preview audio { width: 100%; margin-bottom: 10px; }
.dr-voice-meta { color: #a1a1aa; font-size: 13px; text-align: center; margin-bottom: 14px; }
.dr-voice-row { display: flex; gap: 10px; }
.dr-voice-row button {
  flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #3f3f46;
  background: #3f3f46; color: #f4f4f5; font: 600 14px/1 inherit; cursor: pointer; -webkit-appearance: none;
}
.dr-voice-row .dr-voice-use { background: #16a34a; border-color: #16a34a; }
.dr-voice-row button:active { opacity: .85; }
.dr-voice-row button[disabled] { opacity: .5; cursor: default; }

.dr-voice-err {
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  background: #7f1d1d; color: #fecaca; font-size: 13px;
}