/* ============================================================
   DRE DICTATION — BASE STYLES
   Listening → Transcription → Feedback
============================================================ */

/* ============================================================
   CONTAINER
============================================================ */

.dre-dictation{
  max-width:720px;
  margin:24px auto;
  padding:16px;
  background:#ffffff;
  border-radius:14px;
  box-sizing:border-box;
}

@media (min-width:960px){
  .dre-dictation{
    max-width:960px;
    padding:22px;
  }
}

/* ============================================================
   INNER RHYTHM
============================================================ */

.dre-dictation > * + *{
  margin-top:16px;
}
.dre-dictation-audio-panel + .dre-dictation-input{
  margin-top:24px;  /* overrides the default 16px */
}
/* ============================================================
   INSTRUCTIONS
============================================================ */

.dre-dictation-instructions{
  margin:0;
  color:#4F535D;
  line-height:1.5;
}

/* ============================================================
   AUDIO CONTROL PANEL (LOCAL, FINAL)
============================================================ */

.dre-dictation-audio-panel{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;

  margin:6px auto;
	margin-top:6px;
	margin-bottom:6px;
  padding:0;

  background:transparent;
}



/* ============================================================
   DRE DICTATION — AUDIO BUTTON SIZE FIX (MATCH OTHER UNITS)
============================================================ */

.dre-dictation-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:40px;     /* 🔑 match other activities */
  height:40px;    /* 🔑 match other activities */

  padding:0;
  margin:0;

  font-size:1.1rem;   /* smaller, matches other audio icons */
  font-weight:700;
  line-height:1;

  cursor:pointer;

  background:#18A5DD;
  color:#ffffff;

  border:2px solid #18A5DD;
  box-shadow:none;

  box-sizing:border-box; /* 🔑 critical */

  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .1s ease;
}


/* ============================================================
   BUTTON SHAPES
============================================================ */

/* Centre — square */
.dre-dictation-btn-main{
  border-radius:0;
}

/* Left — semi-lozenge */
.dre-dictation-btn-left{
  border-radius:999px 4px 4px 999px;
}

/* Right — semi-lozenge */
.dre-dictation-btn-right{
  border-radius:4px 999px 999px 4px;
}

/* ============================================================
   HOVER
============================================================ */

.dre-dictation-btn:hover{
  background:#1fb0ea;
  border-color:#1fb0ea;
}

/* ============================================================
   ACTIVE / PRESSED
============================================================ */

.dre-dictation-btn:active{
  background:#ffffff;
  color:#18A5DD;
  border-color:#18A5DD;
  transform:scale(0.96);
}
.dre-dictation .dre-dictation-btn:active,
.dre-dictation .dre-dictation-btn:focus:not(:focus-visible){
  color:#18A5DD !important;
}

/* ============================================================
   ACTIVE PERSISTENCE (MOUSE RELEASE)
============================================================ */

.dre-dictation-btn:focus:not(:focus-visible){
  background:#ffffff;
  color:#18A5DD;
  border-color:#18A5DD;
}

/* ============================================================
   KEYBOARD ACCESSIBILITY
============================================================ */

.dre-dictation-btn:focus-visible{
  outline:2px solid rgba(24,165,221,0.35);
  outline-offset:2px;

  background:#18A5DD;
  color:#ffffff;
}

/* ============================================================
   TEXTAREA INPUT
============================================================ */

.dre-dictation-input{
  width:calc(100% - 24px);
  margin:0 12px 16px;

  min-height:120px;
  padding:12px 14px;

  font-family:inherit;
  font-size:1rem;
  line-height:1.5;

  border:2px solid #18A5DD;
  border-radius:12px;
  box-sizing:border-box;
  resize:vertical;
}

.dre-dictation-input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(24,165,221,0.15);
}

/* ============================================================
   CHECK BUTTON
============================================================ */

.dre-dictation .dre-dictation-check{
  display:block;
  margin:20px auto 0;
}

/* ============================================================
   SYSTEM MESSAGE
============================================================ */

.dre-dictation .dre-dictation-message {
  color: #18A5DD !important;
  text-align: center;
  font-weight: 400;
  margin: 8px 0;
}

/* ============================================================
   DICTATION — FEEDBACK STRIP (FLUSH)
============================================================ */

.dre-dictation-feedback{
  margin-top:5px;

  padding:14px 16px;

 background:#F7FAFD;        
 

  border-radius:0;           /* square */
  
  /* flush to container edges */
  margin-left:-16px;
  margin-right:-16px;

  box-sizing:border-box;
}

/* Desktop adjustment (matches container padding change) */
@media (min-width:960px){
  .dre-dictation-feedback{
    margin-left:-22px;
    margin-right:-22px;
  }
}


.dre-dictation-result{
  font-size:1rem;
  line-height:1.7;
  color:#18A5DD; /* blue for correct text */
}

.dre-dictation-error{
  color:#4F535D;          /* dark grey */
  font-weight:700;

  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}


/* ============================================================
   TRANSCRIPT TOGGLE
============================================================ */

.dre-dictation-transcript-controls{
  text-align:center;
  margin-top:16px;
}

/* ============================================================
   TRANSCRIPT PANEL
============================================================ */

.dre-dictation-transcript{
  width:calc(100% - 24px);
  margin:16px 12px 0;

  padding:14px 16px;
  border:1px solid #ED4DB4;
  border-radius:12px;

  font-size:1rem;
  line-height:1.6;
  color:#4F535D;
}

.dre-dictation-transcript span.is-active{
  color:#18A5DD;
  font-weight:700;
}
/* ============================================================
   ASTRA HOVER TEXT OVERRIDE (DICTATION AUDIO BUTTONS)
============================================================ */

.dre-dictation .dre-dictation-btn,
.dre-dictation .dre-dictation-btn:hover,
.dre-dictation .dre-dictation-btn:active,
.dre-dictation .dre-dictation-btn:focus,
.dre-dictation .dre-dictation-btn:focus-visible{
  color:#ffffff !important;
}