/**
 * PSV Edge PWA — 醫療科技／長照友善 UI 補充樣式
 * （與 Tailwind 並用：動畫、錄音鈕光暈、LINE 閘道層級等）
 */

:root {
  --medical-blue: #00a3ff;
  --medical-blue-soft: #e6f7ff;
  --record-scale: 1;
}

/* 單螢幕：避免整頁捲動，僅轉錄區內可捲動 */
html,
body {
  height: 100%;
  overflow: hidden;
}

/* 模型路徑：多行、完整換行（相對路徑 + 絕對 URL） */
.edge-kv-model-path {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 狀態列：最多兩行，避免擠壓下方按鈕 */
.edge-status-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 2.6rem;
}

/* 轉錄區：避免長按／拖曳反白影響操作（複製請用右上角按鈕） */
.edge-transcript-no-select,
.edge-transcript-no-select * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 轉錄區：無內容時顯示溫暖提示（#transcript 須為空節點） */
#transcript:empty::before {
  content: "🧠 AI 語音翻譯結果將顯示在這裡…";
  color: #94a3b8;
  font-weight: 600;
  font-size: clamp(0.95rem, 3.2vw, 1.1rem);
  line-height: 1.45;
}

/* 主錄音鈕：醫療藍系光暈（錄音中變紅系） */
.edge-record-btn {
  position: relative;
  overflow: visible;
  transform: scale(var(--record-scale, 1));
  transition: transform 90ms linear, box-shadow 120ms linear, filter 120ms linear;
  /* 內層文字幾何置中（與 Tailwind inline-flex 併用） */
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 0 28px rgba(0, 163, 255, 0.5),
    0 0 56px rgba(56, 189, 248, 0.22),
    0 10px 22px rgba(0, 163, 255, 0.28);
}

/* 外圈漸層光暈（在鈕底層，僅外緣露出；待機時微動） */
.edge-record-btn::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px;
  z-index: -1;
  background: radial-gradient(
    circle,
    transparent 52%,
    rgba(0, 163, 255, 0.28) 56%,
    rgba(56, 189, 248, 0.14) 68%,
    transparent 76%
  );
  pointer-events: none;
  animation: edgeIdleGlow 2.8s ease-in-out infinite;
}

.edge-record-btn--compact::before {
  inset: -9px;
}

.edge-record-btn.recording {
  background: linear-gradient(145deg, #f87171, #ef4444) !important;
  box-shadow:
    0 0 40px rgba(239, 68, 68, 0.5),
    0 8px 24px rgba(239, 68, 68, 0.3);
}

.edge-record-btn.recording::before {
  animation: none;
  background: radial-gradient(
    circle,
    transparent 52%,
    rgba(248, 113, 113, 0.35) 58%,
    rgba(239, 68, 68, 0.12) 72%,
    transparent 78%
  );
}

.edge-record-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid rgba(0, 163, 255, 0.35);
  opacity: 0;
  pointer-events: none;
}

.edge-record-btn.recording::after {
  border-color: rgba(239, 68, 68, 0.45);
  animation: edgeRecPulse 1.15s ease-out infinite;
}

@keyframes edgeIdleGlow {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes edgeRecPulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}

/* 模型進度：不定進度時脈動 */
#modelLoadPanel.model-load-indeterminate #modelLoadBar {
  width: 100% !important;
  animation: edgeLoadPulse 1.1s ease-in-out infinite;
}

@keyframes edgeLoadPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* LINE／內建瀏覽器閘道：維持最高層 */
.in-app-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #eff6ff;
  box-sizing: border-box;
}

.in-app-gate[aria-hidden="false"] {
  display: flex;
}

.in-app-gate-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.in-app-gate-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border: 3px solid #e2e8f0;
  border-top-color: #00a3ff;
  border-radius: 50%;
  animation: inAppSpin 0.85s linear infinite;
}

@keyframes inAppSpin {
  to {
    transform: rotate(360deg);
  }
}

.in-app-gate-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a5f;
  margin: 0 0 12px;
}

.in-app-gate-body {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 24px;
  white-space: pre-line;
}

.in-app-gate-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}

.in-app-gate-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  margin-bottom: 12px;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

a.in-app-gate-btn-primary {
  color: #fff;
}

a.in-app-gate-btn-secondary {
  text-decoration: none;
}

.in-app-gate-btn-primary {
  background: #00a3ff;
  color: #fff;
}

.in-app-gate-btn-secondary {
  background: #fff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  font-weight: 600;
  font-size: 15px;
}

.in-app-gate-copy-hint {
  font-size: 13px;
  color: #64748b;
  min-height: 1.2em;
  margin-top: 4px;
}