/* Uedu FM（Focus Mode 專注模式）— 頂部列下拉播放器樣式
   品牌色：漸層 149deg #3C6F9A→#3C938A、primary #00b297
   觸發鈕在頂部列；下拉面板 fixed 在 header 下方右側，
   不再使用右下角浮動鈕（避開小優 / AI 助教等右下角元件）。 */

/* ── 頂部列觸發鈕（耳機）── */
.ua-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: relative;        /* 供外圍呼吸燈圈（::after）定位 */
  width: 34px;
  height: 34px;
  margin: 0 .35rem;
  padding: 0;
  border: 1px solid #e9ecef;
  border-radius: 50%;
  background: #f8fbfc;
  color: #3C6F9A;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.ua-trigger:hover {
  border-color: #00b297;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 178, 151, .15);
}
.ua-trigger.playing { color: #00b297; border-color: #00b297; }      /* 播放中：圖示與邊框轉青綠（靜態，不閃爍） */

/* 播放中：外圍緩慢呼吸燈圈（圖示本身不動）。緩慢、柔和、不干擾。 */
.ua-trigger.playing::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(0, 178, 151, .5);
  pointer-events: none;
  animation: ua-breathe 4.5s ease-in-out infinite;
}
/* 只呼吸明暗，半徑固定不變（不縮放、不外擴光暈） */
@keyframes ua-breathe {
  0%, 100% { opacity: .2; }
  50%      { opacity: .9; }
}
/* 尊重「減少動態」偏好：不動畫，僅留一圈靜態淡光環 */
@media (prefers-reduced-motion: reduce) {
  .ua-trigger.playing::after { animation: none; opacity: .5; }
}

/* ── 下拉面板 ── */
.ua-panel {
  position: fixed;
  top: 58px;            /* 頂部列下方；如 header 高度不同再微調 */
  right: 12px;
  width: 290px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  z-index: 1045;        /* 在 header 之上、Bootstrap modal(1050) 之下 */
}
.ua-header {
  background: linear-gradient(149deg, #3C6F9A, #3C938A);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ua-titlewrap { display: flex; flex-direction: column; line-height: 1.2; }
.ua-title { font-weight: 600; font-size: 15px; letter-spacing: .3px; }
.ua-subtitle { font-size: 10px; font-weight: 400; opacity: .85; }
.ua-iconbtn { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

.ua-now {
  padding: 8px 14px;
  font-size: 12px;
  color: #6c757d;
  border-bottom: 1px solid #eee;
}

.ua-channels {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 220px;
  overflow: auto;
}
.ua-channels li { margin: 2px 0; }
.ua-ch {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ua-ch:hover { border-color: #00b297; }
.ua-ch.active {
  background: rgba(0, 178, 151, .10);
  border-color: #00b297;
  color: #0a7d6b;
  font-weight: 600;
}
.ua-ch i { width: 16px; text-align: center; }

.ua-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #eee;
}
.ua-playpause {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: #fff;
  background: #00b297;
  cursor: pointer;
  flex: 0 0 auto;
}
.ua-playpause:disabled { opacity: .5; cursor: default; }
.ua-volume { flex: 1 1 auto; min-width: 0; accent-color: #00b297; }
.ua-timer {
  flex: 0 0 auto;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 2px 4px;
  background: #fff;
}
.ua-timer-status { padding: 0 14px 10px; font-size: 11px; color: #6c757d; }

/* 手機：面板改為左右留邊、寬度自適應 */
@media (max-width: 480px) {
  .ua-panel { top: 54px; right: 8px; left: 8px; width: auto; }
}