/* QGuide 2.0：在這裡留下聲音。
   沿用站上既有的色票與圓角語彙（action-palette-v55 / visual-lock），
   不另外發明一套視覺。 */

.qg-voice-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ql-line, #e3d9cd);
}
.qg-voice-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.qg-voice-section-head h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 19px;
}

.qg-voice-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.qg-voice-tabs button {
  border: 1px solid var(--ql-line, #d8cbb7); border-radius: 999px;
  background: transparent; color: #665f52; padding: 6px 14px;
  font-size: 13px; cursor: pointer;
}
.qg-voice-tabs button.is-active {
  background: var(--ql-green, #53652c); border-color: var(--ql-green, #53652c); color: #fff;
}

.qg-voice-list { display: grid; gap: 12px; }

.qg-voice-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  border: 1px solid var(--ql-line, #ded3c2); border-radius: 14px;
  background: rgba(255, 253, 249, .78); padding: 14px;
}
.qg-voice-card > img {
  width: 76px; height: 76px; object-fit: cover; border-radius: 10px;
}
.qg-voice-card:not(:has(> img)) { grid-template-columns: 1fr; }
.qg-voice-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11px; color: #726b5f; margin-bottom: 6px;
}
.qg-voice-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* 現場標記用綠色，但文案是「錄音時人在附近」——GPS 是證據不是證明，
   不能寫成「已驗證到訪」。 */
.qg-voice-card-meta .is-onsite { color: #3f6b3a; font-weight: 700; }
.qg-voice-card-meta .is-pending { color: #8a6d1f; font-weight: 700; }
/* 被退回的：紅系，跟審核中（黃）分開。以前完全沒有標示，卡片看起來
   跟正常公開的一模一樣，投稿者不會知道這段沒有人看得到。 */
.qg-voice-card-meta .is-rejected { color: #9c3b2e; font-weight: 700; }
.qg-voice-card-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
  background: #fbeeea; color: #7d3527; font-size: 13px; line-height: 1.6; }
.qg-voice-card-text { margin: 0 0 10px; line-height: 1.65; color: #45433e; }
.qg-voice-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qg-voice-card-actions button {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--ql-line, #d5cab7); border-radius: 999px;
  background: #fffdf9; color: #4c5535; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.qg-voice-card-actions button.is-active { background: var(--ql-green, #53652c); color: #fff; }

.qg-voice-empty {
  display: grid; justify-items: center; gap: 8px;
  padding: 28px 16px; border: 1px dashed var(--ql-line, #d8cbb7);
  border-radius: 14px; color: #7b7466; text-align: center;
}
.qg-voice-empty p { margin: 0; font-size: 14px; }

/* ── 錄音流程的彈窗 ─────────────────────────────────────────────────── */
.qg-voice-modal { display: grid; gap: 14px; }
.qg-voice-modal h2 { margin: 0; font-size: 21px; }
.qg-voice-lead { margin: 0; color: #5f5a4f; line-height: 1.65; font-size: 14px; }
.qg-voice-prompt {
  margin: 0; display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid #ddd1be; border-radius: 12px; padding: 12px 14px;
  background: rgba(255, 253, 249, .7); color: #4a4740; line-height: 1.6;
}
.qg-voice-note {
  margin: 0; display: flex; gap: 6px; align-items: flex-start;
  font-size: 12px; color: #746d61; line-height: 1.6;
}
.qg-voice-note svg { flex: 0 0 auto; margin-top: 2px; }

.qg-voice-modes { display: grid; gap: 10px; }
.qg-voice-mode {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  border: 1px solid var(--ql-line, #d8cbb7); border-radius: 14px;
  background: #fffdf9; padding: 16px 18px; color: inherit;
}
.qg-voice-mode:hover { border-color: var(--ql-green, #53652c); }
.qg-voice-mode-icon { color: var(--ql-green, #53652c); }
.qg-voice-mode strong { font-size: 17px; }
.qg-voice-mode small { color: #6d6659; line-height: 1.55; }
.qg-voice-mode em { font-style: normal; font-size: 12px; color: var(--ql-green, #53652c); font-weight: 700; }

.qg-voice-speaker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qg-voice-speaker > span { font-size: 13px; color: #6d6659; }
.qg-voice-speaker button {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  border: 1px solid var(--ql-line, #d5cab7); border-radius: 12px;
  background: #fffdf9; color: #4c5535; padding: 7px 14px;
}
.qg-voice-speaker button small { font-size: 11px; color: #7b7466; }
.qg-voice-speaker button.is-active { background: var(--ql-green, #53652c); color: #fff; }
.qg-voice-speaker button.is-active small { color: rgba(255, 255, 255, .8); }

.qg-voice-record { display: grid; justify-items: center; gap: 8px; padding: 8px 0; }
.qg-voice-button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 14px 28px;
  background: var(--ql-green, #53652c); color: #fff; font-size: 16px; font-weight: 700;
}
.qg-voice-button.is-recording { background: #a5463a; }
/* 錄音中的呼吸效果。尊重 prefers-reduced-motion——這是裝飾不是資訊。 */
@media (prefers-reduced-motion: no-preference) {
  .qg-voice-button.is-recording { animation: qg-voice-pulse 1.4s ease-in-out infinite; }
}
@keyframes qg-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165, 70, 58, .45); }
  50%      { box-shadow: 0 0 0 12px rgba(165, 70, 58, 0); }
}
.qg-voice-timer {
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: #45433e;
}
.qg-voice-record small { font-size: 12px; color: #7b7466; }

.qg-voice-photo {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px dashed var(--ql-line, #d5cab7); border-radius: 12px;
  padding: 10px 16px; color: #5f5a4f; font-size: 14px; justify-self: start;
}
.qg-voice-photo-name { margin: 0; font-size: 12px; color: #6d6659; }

.qg-voice-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.qg-voice-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--ql-line, #ddd1be); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; color: #6d6659;
}
.qg-voice-badge.is-onsite { border-color: #9dbb95; color: #3f6b3a; font-weight: 700; }

.qg-voice-transcript {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--ql-line, #d2c4ab); border-radius: 12px;
  padding: 12px 14px; font: inherit; line-height: 1.7; color: #45433e;
  background: #fffdf9;
}