/* 站對站轉錄：沿用 ../style.css，這裡只補上不同的部分 */

/* 來源站列 */
.srcbar { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr auto auto; gap: 0.5rem 0.6rem; align-items: center; flex: none; }
.srcbar select {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit; color: var(--text-color);
  border: 1px solid var(--input-border); border-radius: 6px; background: var(--card-bg);
}
.srcbar select:disabled { background: var(--bg-color); color: var(--text-muted); }
.srcbar select:focus-visible { outline: 3px solid rgba(217, 119, 6, 0.3); outline-offset: 0; border-color: var(--tea); }
.src-hint { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-muted); min-height: 1.4em; }
.src-hint.ok { color: var(--tea-dark); }
.src-hint.err { color: var(--danger); }
.src-hint .link { font-size: inherit; }

/* 左右兩個終端機：一直並排 */
.ws2 { position: relative; flex: 1; min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); }
.ws2 .pane { display: flex; flex-direction: column; min-width: 0; }
.ws2 .gutter { display: flex; align-items: center; justify-content: center; position: static !important; transform: none !important; }
.ws2[data-focus="left"] .p-src,
.ws2[data-focus="right"] .p-bbs {
  box-shadow: 0 0 0 3px var(--tea), 0 0 16px 3px var(--tea-glow), 0 0 44px 12px var(--tea-glow-far);
}
.ws2 .term-wrap { flex: 1; min-height: 0; }

/* 左邊：還沒連線時的說明 */
.src-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center;
  color: #9c9284; background: rgba(0, 0, 0, 0.6); font-size: 0.95rem; line-height: 1.7;
}

/* 浮在左半邊的「複製整篇文章」 */
.copy-float {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  display: flex; align-items: center; gap: 0.6rem; max-width: calc(100% - 24px);
}
.copy-status {
  background: rgba(24, 20, 14, 0.92); color: #f3e7d3; border: 1px solid rgba(217, 119, 6, 0.45);
  padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.85rem; line-height: 1.45;
}
.copy-status:empty { display: none; }
.copy-status.ok { color: #fde68a; }
.copy-status.err { color: #fca5a5; }
.copy-btns { display: flex; flex-direction: column; gap: 0.4rem; }
.copy-btns .btn { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.copy-btns .btn-plain { background: rgba(255, 255, 255, 0.95); color: #333; }

/* 貼上按鈕亮起：複製完成那一刻閃兩下 */
.paste.lit { animation: paste-lit 1s ease-out 2; }
@keyframes paste-lit {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.75), 0 4px 14px rgba(217, 119, 6, 0.35); }
  100% { box-shadow: 0 0 0 22px rgba(217, 119, 6, 0), 0 4px 14px rgba(217, 119, 6, 0.35); }
}

/* ===== 新手導引：圓圈數字 + 說明，外圈像雷達一樣往外擴散 ===== */
.srcbar { position: relative; }
.ws2 .gutter { position: relative !important; }
.guide { position: absolute; z-index: 30; display: flex; align-items: center; gap: 0.5rem; pointer-events: none; animation: g-in .35s ease-out; }
.g-num {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff;
  background: var(--tea); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, 0.35);
}
.g-num::before, .g-num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--tea);
  animation: g-ripple 1.8s ease-out infinite;
}
.g-num::after { animation-delay: .9s; }
@keyframes g-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(2.7); opacity: 0; } }
@keyframes g-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.g-text {
  background: rgba(24, 20, 14, 0.94); color: #fde68a; border: 1px solid rgba(217, 119, 6, 0.55);
  padding: 0.35rem 0.7rem; border-radius: 8px; font-size: 0.86rem; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
#g1 { top: -16px; left: -16px; }
#g2 { top: -18px; left: -10px; }
.guide.g-inline { position: static; animation: none; }
.ws2 .term-bar { min-height: 2.4rem; }
.g-inline .g-num { width: 26px; height: 26px; font-size: 0.88rem; }
.g-inline .g-num::before, .g-inline .g-num::after { animation-name: g-ripple-s; }
@keyframes g-ripple-s { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.g-inline .g-text { font-size: 0.82rem; padding: 0.2rem 0.55rem; }
#g4 { bottom: calc(100% + 10px); right: 0; }
#g6 { bottom: calc(50% + 48px); left: 50%; transform: translateX(-24%); flex-direction: column; animation: none; }
#g6 .g-text { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .g-num::before { animation: none; transform: scale(1.4); opacity: .55; }
  .g-num::after { animation: none; display: none; }
  .guide { animation: none; }
  .paste.lit { animation: none; }
}

/* 左下：標題與狀態 */
.ws2 .left-foot { padding: 0.55rem 0.85rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
.ws2 .title-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0; }
.ws2 .title-row label { font-weight: 600; }
.ws2 .title-row input { padding: 0.4rem 0.6rem; }
.tag-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-left: 4.6rem; }
.tag-row .radio { font-size: 0.88rem; }
.tag-note { color: var(--text-muted); font-size: 0.82rem; }

/* 手機：分頁切換 */
@media (max-width: 760px) {
  .srcbar { grid-template-columns: 1fr auto; }
  .srcbar select, .srcbar #custom { grid-column: 1 / -1; }
  .ws2 { display: flex; flex-direction: column; min-height: 480px; }
  .ws2 .pane { flex: 1; box-shadow: 0 0 0 1px var(--border-color) !important; }
  .ws2[data-ptab="right"] .p-src, .ws2[data-ptab="left"] .p-bbs { display: none; }
  .ws2 .gutter { padding: 0.6rem 0; }
  .ws2[data-ptab="right"] .gutter { display: none; }
  .ws2 .paste { flex-direction: row; width: 100%; justify-content: center; gap: 0.5rem; padding: 0.7rem; font-size: 1rem; }
  .tag-row { padding-left: 0; }
  .g-text { white-space: normal; max-width: 60vw; }
  .ws2 .title-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ws2 .title-row label { grid-column: 1 / -1; }
}