/* ── Audio to Text Tool ──────────────────────────────────────────────────── */

/* Mode tabs */
.att-tab-row { display:flex; gap:8px; }
.att-tab {
  flex:1; padding:10px 14px; border-radius:10px; border:2px solid rgba(3,29,54,.12);
  background:#fff; color:var(--primary-color,#031D36); font-size:14px; font-weight:600;
  cursor:pointer; transition:border-color .2s,background .2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.att-tab.active { border-color:var(--accent-color,#0A49A6); background:rgba(10,73,166,.05); color:var(--accent-color,#0A49A6); }

/* Record button */
.att-record-btn {
  width:72px; height:72px; border-radius:50%; border:none;
  background:var(--accent-color,#0A49A6); color:#fff; font-size:28px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .15s;
  position:relative; flex-shrink:0;
}
.att-record-btn:hover { transform:scale(1.06); }
.att-record-btn.recording { background:#e53935; animation:att-pulse 1.4s ease-in-out infinite; }
.att-record-btn.recording::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:3px solid rgba(229,57,53,.35); animation:att-ring 1.4s ease-in-out infinite;
}
@keyframes att-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,.4)} 50%{box-shadow:0 0 0 14px rgba(229,57,53,0)} }
@keyframes att-ring  { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.5);opacity:0} }

/* Waveform canvas */
#waveCanvas {
  width:100%; height:60px; border-radius:10px;
  background:rgba(3,29,54,.04); display:block;
}

/* Timer */
.att-timer { font-size:22px; font-weight:700; color:var(--primary-color,#031D36); letter-spacing:.04em; }

/* Transcript box */
.att-transcript {
  min-height:180px; max-height:360px; overflow-y:auto;
  padding:14px 16px; border-radius:12px;
  background:rgba(3,29,54,.03); border:1.5px solid rgba(3,29,54,.08);
  font-size:15px; line-height:1.7; color:var(--primary-color,#031D36);
  white-space:pre-wrap; word-break:break-word;
}
.att-transcript .att-interim { color:#9ba8b8; font-style:italic; }

/* Counts */
.att-counts { font-size:12px; color:#9ba8b8; }

/* Upload zone for audio */
.att-audio-upload { border-radius:14px; }

/* Transcribe button */
#fileTranscribeBtn:disabled { opacity:.5; cursor:not-allowed; }

/* How-it-works */
.att-how { background:#fff; border-radius:20px; padding:40px; box-shadow:0 10px 40px rgba(3,29,54,.05); }
.att-how h3 { font-size:22px; font-weight:700; color:var(--primary-color,#031D36); }
.att-how h5 { font-size:16px; font-weight:700; color:var(--primary-color,#031D36); margin:12px 0 6px; }
.att-how p  { font-size:14px; color:#6b7a8d; }
.att-how-icon { font-size:40px; margin-bottom:4px; }