/* ================
   GLOBAL UTILITIES
   ================ */

/* Green pulse glow (used for listening state) */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,255,128,.6); }
  50%     { box-shadow: 0 0 20px rgba(0,255,128,.9); }
}

/* Generic white glow on hover */
@keyframes glow {
  0%,100% { box-shadow: 0 0 5px rgba(255,255,255,.5); }
  50%     { box-shadow: 0 0 20px rgba(255,255,255,1); }
}

/* Clear floats inside ticket blocks */
.ticket-container::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   SIDEBAR BUTTONS / TOGGLE
   ========================= */

.sidebar button,
.support-btn,                  /* reuse same base for support button */
.download-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 15px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.2);
  transition: all .3s ease;
}

.toggle-btn {
  background:#333;
  color:#fff;
}

/* collapsible scroll container for many sidebar buttons */
.btn-scroll-container {
  max-height: 300px;
  overflow-y: auto;
  transition:max-height .3s ease;
}
.btn-scroll-container.collapsed { max-height:0; }

.btn-scroll-container::-webkit-scrollbar { width:6px; }
.btn-scroll-container::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.3); border-radius:3px;
}

/* ==========
   MAIN BTNS
   ========== */

/* Each functional button gets its own gradient + glow */
.smart-transcription-btn { background:linear-gradient(45deg,#007BFF,#0056b3); }
.stop-transcription-btn  { background:linear-gradient(45deg,#E53935,#C62828); }
.correct-btn             { background:linear-gradient(45deg,#43A047,#2E7D32); }
.report-btn              { background:linear-gradient(45deg,#8E24AA,#6A1B9A); }
.clear-btn               { background:linear-gradient(45deg,#FB8C00,#EF6C00); }
.modify-btn              { background:linear-gradient(45deg,#009688,#00796B); }
.replace-btn             { background:linear-gradient(45deg,#D81B60,#AD1457); }
.direct-transcription-btn{ background:linear-gradient(45deg,#00bfa5,#1de9b6); }

.sidebar button:hover,
.smart-transcription-btn:hover,
.stop-transcription-btn:hover,
.correct-btn:hover,
.report-btn:hover,
.clear-btn:hover,
.modify-btn:hover,
.replace-btn:hover,
.direct-transcription-btn:hover {
  animation:glow 1.5s infinite;
}

/* ==============
   LISTENING MODE
   ============== */
.glowing-button.glowing-listening {
  background:#28a745!important;
  color:#fff;
  box-shadow:0 0 15px 5px rgba(0,255,128,.6);
  animation:pulse 1.5s infinite;
}

/* ===========
   TEXTAREAS
   =========== */
textarea{
  font-size:1rem;
  border-radius:10px;
  padding:1rem;
  box-shadow:0 0 10px rgba(0,0,0,.05);
}

/* ====================
   DOWNLOAD / EXPORT BTNS
   ==================== */

.download-btn{
  border-radius:8px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  transition:background-color .3s, transform .2s;
}
.download-btn:hover{ transform:translateY(-2px); }

.word-btn{background:linear-gradient(45deg,#4e91f9,#1c61d7);}
.word-btn:hover{background:linear-gradient(45deg,#3a7be3,#1452c0);}
.pdf-btn {background:linear-gradient(45deg,#ff5f6d,#ff7a5c);}
.pdf-btn:hover{background:linear-gradient(45deg,#e64c57,#e0664f);}

/* ===========
   NOTIFICATION
   =========== */
#notification{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff; padding:10px 20px;
  border-radius:5px; font-size:16px; opacity:0;
  transition:opacity .5s ease; z-index:1000;
}
#notification.show{opacity:1;}

/* ============
   PROGRESS MODAL
   ============ */
#reportProgress{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; display:none;
}
#reportProgress>div{
  background:#fff; padding:20px 30px;
  border-radius:8px; text-align:center; min-width:300px;
}
#progressBarContainer{
  width:300px; height:20px; background:#e0e0e0;
  margin:20px auto; border-radius:10px; overflow:hidden;
}
#progressBar{ width:0%; height:100%; background:#76c7c0; }

/* =====================
   SUPPORT TICKET SECTION
   ===================== */

/* new-ticket toggle & form */
.new-ticket-container{ max-width:600px; margin-bottom:2em; border:1px solid #ddd; border-radius:.5em; overflow:hidden; }
.new-ticket-container>summary{ background:#667eea; color:#fff; padding:.75em 1.2em; font-weight:600; cursor:pointer; user-select:none; }

.new-ticket-form{ padding:1em; background:#fafafa; }
.new-ticket-form input,
.new-ticket-form textarea,
.new-ticket-form button{ width:100%; padding:.75em; margin-bottom:.5em; box-sizing:border-box; font-size:1rem; }
.new-ticket-form button{ background:#667eea; color:#fff; border:none; border-radius:.5em; cursor:pointer; font-weight:600; }

/* chat bubbles */
.ticket-container{ max-width:600px; margin-bottom:2em; }
.ticket-header{ font-size:1.1rem; font-weight:bold; margin-bottom:.5em; }
.message{ padding:.75em 1em; border-radius:1em; margin-bottom:.5em; max-width:70%; }
.sent    { background:#dcf8c6; float:right; }
.received{ background:#f1f1f1; float:left; }
.message .time{ display:block; font-size:.75em; color:#666; margin-top:.25em; }