/* ============================================================
   DRE DICTATION — CLEAN STABLE VERSION
============================================================ */

.dre-dictation{
  --dre-blue:#18a5dd;
  --dre-pink:#ed4db4;
  --dre-grey-dark:#4F535D;
  --dre-border:#e4e4e4;

  width:100%;
  max-width:none;
  margin:0;
  padding:16px;

  background:#ffffff;
  border-radius:14px;
  box-sizing:border-box;

  font-family:Nunito, Arial, sans-serif;
  font-size:1rem;
  line-height:1.5;
}

.dre-dictation *{
  box-sizing:border-box;
}

.dre-dictation > * + *{
  margin-top:16px;
}

.dre-dictation-audio-tools + .dre-dictation-input{
  margin-top:22px;
}

/* ============================================================
   AUDIO CONTROL PANEL
============================================================ */

.dre-dictation-audio-panel{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  margin:6px auto 0;
  padding:0;
  background:transparent;
}

.dre-dictation-btn{
  all:unset;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:center;

  width:46px;
  height:46px;

  cursor:pointer;
  user-select:none;

  background:var(--dre-blue);
  color:#ffffff;
  border:none;
  box-shadow:none;

  font-family:Nunito, Arial, sans-serif;
  font-size:1.55rem;
  font-weight:900;
  line-height:1;

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

.dre-dictation-btn-main{
  border-radius:0;
  margin:0 2px;
}

.dre-dictation-btn-left{
  border-radius:16px 0 0 16px;
}

.dre-dictation-btn-right{
  border-radius:0 16px 16px 0;
}

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

  width:100%;
  height:100%;

  font-family:Nunito, Arial, sans-serif;
  font-size:1.55rem;
  font-weight:900;
  line-height:1;
  color:#ffffff;

  transform:translateY(-1px);
}

.dre-dictation-btn-main .dre-dictation-icon{
  font-size:1.6rem;
  transform:translateX(1px) translateY(-1px);
}

.dre-dictation-btn-left .dre-dictation-icon,
.dre-dictation-btn-right .dre-dictation-icon{
  font-size:1.55rem;
  letter-spacing:-0.12em;
}

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

.dre-dictation-btn:active,
.dre-dictation-btn:focus{
  background:var(--dre-grey-dark);
  color:#ffffff;
  outline:none;
  box-shadow:none;
}

.dre-dictation-btn:active .dre-dictation-icon,
.dre-dictation-btn:focus .dre-dictation-icon{
  color:#ffffff;
}

.dre-dictation-btn:focus-visible{
  outline:2px solid rgba(79,83,93,0.35);
  outline-offset:2px;
}

/* ============================================================
   AUDIO UTILITY TOOLS
============================================================ */

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

  width:fit-content;
  max-width:100%;
  margin:12px auto 22px;
  padding:7px 14px;

  background:#f6fbfe;
  border:1px solid #d7edf8;
  border-radius:999px;
}

.dre-dictation-tool{
  all:unset;
  box-sizing:border-box;

  display:inline;
  cursor:pointer;

  font-family:Nunito, Arial, sans-serif;
  font-size:0.9rem;
  font-weight:800;
  line-height:1.2;
  color:var(--dre-blue);

  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
}

.dre-dictation-tool:hover,
.dre-dictation-tool:focus,
.dre-dictation-tool:active{
  color:var(--dre-grey-dark);
  text-decoration:underline;
  outline:none;
  background:transparent;
  box-shadow:none;
}

.dre-dictation-tool-separator{
  color:#9aa0a6;
  font-weight:800;
}

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

.dre-dictation-input{
  display:block;
  width:100%;
  margin:0;

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

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

  color:var(--dre-grey-dark);

  border:2px solid var(--dre-blue);
  border-radius:12px;
  resize:vertical;
}

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

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

.dre-dictation .dre-dictation-check{
  display:block !important;
  width:100%;
  max-width:220px;
  min-width:160px;
  height:40px;

  margin:20px auto 0 !important;
  padding:0 22px;

  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  text-align:center;

  border-radius:26px;
  cursor:pointer;
}

.dre-dictation .dre-dictation-check:hover,
.dre-dictation .dre-dictation-check:active{
  background:var(--dre-pink) !important;
  color:#ffffff !important;
  border-color:var(--dre-pink) !important;
}


.dre-dictation .dre-dictation-check.is-native-completed,
.dre-dictation .dre-dictation-check.is-native-completed:hover,
.dre-dictation .dre-dictation-check.is-native-completed:focus,
.dre-dictation .dre-dictation-check.is-native-completed:active{
  background:#ffffff !important;
  color:#bfc2c7 !important;
  border-color:#bfc2c7 !important;
  border-width:1px !important;
  cursor:default !important;
  opacity:1 !important;
  box-shadow:none !important;
}

.dre-dictation .dre-dictation-check.dre-native-completed-btn:hover,
.dre-dictation .dre-dictation-check.dre-native-completed-btn:focus,
.dre-dictation .dre-dictation-check.dre-native-completed-btn:active{
  background:#ffffff !important;
  color:#7b8794 !important;
  border-color:#7b8794 !important;
}
/* ============================================================
   SYSTEM MESSAGE
============================================================ */

.dre-dictation .dre-dictation-message{
  color:var(--dre-blue) !important;
  text-align:center;
  font-weight:400;
  margin:8px 0;
}

/* ============================================================
   FEEDBACK CARD
============================================================ */

.dre-dictation-feedback{
  display:none;
  margin-top:16px;
}

.dre-dictation-feedback.show{
  display:block;
}

.dre-dictation-feedback-title{
  margin:0 auto 8px;
  text-align:center;
  color:var(--dre-grey-dark);
  font-size:1.25rem;
  font-weight:700;
}

.dre-dictation-score{
  margin:0 auto 18px;
  text-align:center;
  color:var(--dre-grey-dark);
  font-size:1rem;
  font-weight:700;
}

.dre-dictation-feedback-card{
  max-width:100%;
  margin:18px 12px 0;
  padding:16px 18px;

  background:#ffffff;
  border:1px solid #3ebe4e;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.dre-dictation-feedback-message{
  margin:0 0 12px;
  text-align:center;
  font-weight:700;
  color:var(--dre-blue);
}

.dre-dictation-feedback-detail{
  margin:0;
  text-align:center;
  color:var(--dre-grey-dark);
  line-height:1.6;
}

.dre-dictation-result{
  margin-top:14px;
  font-size:1rem;
  line-height:1.7;
  color:var(--dre-grey-dark);
}

.dre-dictation-error{
  color:var(--dre-pink);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.dre-dictation-feedback-next{
  margin:10px 0 16px;
  text-align:center;
  color:var(--dre-grey-dark);
}

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

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

.dre-dictation-toggle-transcript{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;
  padding:0 22px;
  border-radius:26px;

  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}

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

.dre-dictation-transcript{
  width:100%;
  margin:16px 0 0;

  padding:14px 16px;
  border:1px solid var(--dre-pink);
  border-radius:12px;

  font-size:1rem;
  line-height:1.6;
  color:var(--dre-grey-dark);
}

.dre-dictation-transcript span{
  cursor:pointer;
}

.dre-dictation-transcript span.is-active{
  color:var(--dre-blue) !important;
  font-weight:400 !important;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width:640px){

  .dre-dictation{
    padding-left:0;
    padding-right:0;
  }

  .dre-dictation-feedback-card,
  .dre-dictation-transcript{
    border-radius:14px;
  }

  .dre-dictation-input{
    min-height:110px;
  }

 .dre-dictation .dre-dictation-check{
  max-width:100% !important;
}
}