/* ============================================================
   諮詢室對話體驗（WP-B4）
   1. 打字機分段  .tp-seg
   2. 降級低調標記  .response-via
   3. 轉介道長  .cs-refer
   ============================================================ */

/* ---------- 1. 打字機分段 ---------- */
.tp-seg {
  display: block;
  margin-bottom: .85em;
}
.tp-seg:last-child { margin-bottom: 0; }

/* ---------- 2. 降級低調標記 ---------- */
.response-via {
  position: relative;
  display: inline-block;
  margin: var(--s-3) 0 0;
  padding: 2px var(--s-3);
  font-family: var(--f-mono, var(--f-body));
  font-size: var(--fs-tiny);
  letter-spacing: .12em;
  line-height: 1.9;
  color: var(--c-fg-soft);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  cursor: help;
  opacity: .85;
  transition: opacity .25s ease, border-color .25s ease;
}
.response-via:hover,
.response-via:focus-visible {
  opacity: 1;
  border-color: var(--c-gold);
  outline: none;
}
.response-via.is-ai {
  color: var(--c-zhuan-deep, var(--c-gold-moon));
  border-color: color-mix(in srgb, var(--c-gold) 55%, transparent);
}
.response-via::before {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .7;
}

/* ---------- 3. 轉介道長 ---------- */
.cs-refer {
  margin-top: var(--s-8);
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m, 10px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25));
  text-align: center;
}
.cs-refer[hidden] { display: none; }

.cs-refer-tip {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--c-fg-soft);
}
.cs-refer-btns {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}
.cs-refer-btns .btn { min-width: 9.5rem; }

.cs-refer-note {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-tiny);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-fg-soft);
  opacity: .85;
}
.cs-refer-note b { color: var(--c-fg); font-weight: 500; }

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .cs-refer { padding: var(--s-5) var(--s-4); }
  .cs-refer-btns { flex-direction: column; }
  .cs-refer-btns .btn { width: 100%; }
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .response-via { transition: none; }
}