/* ChatFlip — dark, chat-first design */
:root {
  --bg: #0b0d12;
  --bg2: #12151d;
  --panel: #171b26;
  --panel2: #1e2432;
  --line: #2a3040;
  --text: #e8ebf2;
  --muted: #8b93a7;
  --accent: #6c8cff;
  --accent2: #9b6cff;
  --ok: #3ddc84;
  --warn: #ffb454;
  --err: #ff6470;
  --yt: #ff4e45;
  --tw: #a970ff;
  --radius: 14px;
  --grad: linear-gradient(120deg, var(--accent), var(--accent2));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #1a2140 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Pretendard", "Noto Sans KR", "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.55;
}
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; }
input, select, textarea { font: inherit; color: var(--text); }
mark { background: none; background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[hidden] { display: none !important; }

/* ---------- landing ---------- */
#landing { max-width: 880px; margin: 0 auto; padding: 28px 20px 60px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.logo span { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo em { font-style: normal; font-size: 18px; }
.ghost-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 10px; transition: .15s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; white-space: nowrap; /* 버튼 글자가 중간에서 줄바꿈되지 않게 */
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ext-link { color: var(--accent); border-color: #33406b; }

.hero { text-align: center; padding: 64px 0 12px; }
.hero h1 { font-size: clamp(30px, 5.5vw, 46px); font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
.hero .sub { color: var(--muted); margin: 18px 0 30px; font-size: 15px; }

.url-box {
  display: flex; gap: 10px; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.url-box input[type=text] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  padding: 10px 12px; font-size: 15px;
}
.url-box input::placeholder { color: #5a6275; }
.lang-pick { display: flex; align-items: center; gap: 8px; padding: 0 6px; border-left: 1px solid var(--line); }
.lang-pick label { color: var(--muted); font-size: 12px; white-space: nowrap; }
select {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; outline: 0;
}
#connect-btn {
  background-image: var(--grad); color: #fff; font-weight: 700;
  padding: 10px 22px; white-space: nowrap; transition: .15s;
}
#connect-btn:hover { filter: brightness(1.12); }
#connect-btn:disabled { filter: grayscale(.6); cursor: wait; }
.error { color: var(--err); margin-top: 14px; font-size: 14px; }

.badges { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.badge {
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel);
}
.badge.yt { color: #ffb1ac; border-color: #5c2a27; }
.badge.tw { color: #d3b7ff; border-color: #45306b; }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 56px; }
.how-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.how-card b { font-size: 15px; }
.how-card span { color: var(--muted); font-size: 13px; }
.foot { margin-top: 46px; text-align: center; color: var(--muted); font-size: 13px; }
.foot code { background: var(--panel2); padding: 2px 7px; border-radius: 6px; font-size: 12px; }
@media (max-width: 720px) {
  .how { grid-template-columns: 1fr; }
  .url-box { flex-wrap: wrap; }
  .lang-pick { border-left: 0; }
  #connect-btn { flex: 1; }
}

/* ---------- session ---------- */
#session { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.session-top {
  display: flex; align-items: center; gap: 14px;
  /* 홈 화면 앱(PWA)으로 실행하면 화면 맨 위까지 우리 페이지가 차지한다.
     safe-area 만큼 위를 비워두지 않으면 버튼이 상태바·다이나믹 아일랜드에 가려 눌리지 않는다. */
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg2);
  position: relative; z-index: 5; /* 영상(iframe)이 절대 위로 올라오지 못하게 */
  flex: none;
}
.session-title { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.session-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
#status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); display: inline-block; }
#status-dot.live { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#status-dot.dead { background: var(--err); }

/* 좌: 영상 플레이어 / 우: 번역 채팅 */
#session-body { flex: 1; display: flex; min-height: 0; }
#player-wrap { flex: 1; background: #000; min-width: 0; display: flex; position: relative; }

/* 방송 음성 자막 (영상 위 오버레이 — 메인/음성 모드 공용)
   위 = 발화자 원문 / 아래 = 내 언어 번역 (2줄 이중 자막) */
#subtitle-bar, #v-subtitle-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px;
  max-width: 88%; text-align: center; z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .58); border-radius: 12px; padding: 8px 18px;
}
#sub-orig, #v-sub-orig {
  font-size: clamp(13px, 1.5vw, 17px); color: #d9e0ee; line-height: 1.35;
  text-shadow: 0 1px 4px #000; word-break: break-word;
}
#sub-tr, #v-sub-tr {
  font-size: clamp(16px, 2.2vw, 24px); font-weight: 700; color: #fff; line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0,0,0,.9); word-break: break-word; margin-top: 2px;
}
#sub-orig:empty, #v-sub-orig:empty, #sub-tr:empty, #v-sub-tr:empty { display: none; }
/* 스트리밍 중간 자막: 확정 전에는 살짝 연하게 */
#subtitle-bar.interim, #v-subtitle-bar.interim { opacity: .82; }

/* 플레이어 전체화면 버튼 — 자막을 유지한 채 전체화면 (모바일 필수: 유튜브 자체 전체화면은 자막이 가려짐) */
.fs-btn {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.45);
  color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.fs-btn:hover, .fs-btn:active { background: rgba(0,0,0,.72); }
/* 아이폰 등 요소 전체화면 미지원 브라우저용 CSS 유사 전체화면 */
.pseudo-full {
  position: fixed !important; inset: 0 !important; z-index: 9999;
  width: 100vw !important; height: 100dvh !important; background: #000;
  overflow: hidden;
  /* 가로로 눕히면 노치·홈바가 좌우에 생긴다 — 그만큼 뺀 영역을 실제 표시 공간으로 삼아야
     영상이 한쪽으로 밀리거나 잘리지 않는다 */
  --safe-w: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --safe-h: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* 유사 전체화면: 화면 안에 들어가는 가장 큰 16:9 영상을 가운데 배치.
   ※ iframe 에는 object-fit 이 통하지 않으므로(무시됨) aspect-ratio + max 로 직접 계산한다.
      가로로 돌리면 화면 높이를 꽉 채우고, 세로에서는 폭을 꽉 채운다. */
/* 절대 중앙 정렬을 쓴다 — flex 로 가운데 두면 요소가 화면보다 커졌을 때(확대 모드)
   한쪽만 잘려서 영상이 옆으로 밀린 것처럼 보인다. */
.pseudo-full iframe, .pseudo-full video {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  width: min(var(--safe-w), calc(var(--safe-h) * 16 / 9)) !important;
  height: auto !important;
  max-width: none !important; max-height: none !important;
  border: 0;
}
/* "꽉 채우기": 화면을 남김없이 채우되 16:9를 넘는 부분은 위아래(또는 좌우)를 잘라낸다.
   잘라내는 모드이므로 safe-area 를 빼지 않고 화면 전체를 기준으로 한다. */
.pseudo-full.fill-crop iframe,
.pseudo-full.fill-crop video,
#player-wrap.fill-crop:fullscreen iframe,
#voice-player-wrap.fill-crop:fullscreen iframe {
  width: max(100vw, calc(100dvh * 16 / 9)) !important;
}
.fill-btn { right: 56px; }

/* 네이티브 요소 전체화면(PC·안드로이드)도 같은 방식으로 중앙 정렬 */
#player-wrap:fullscreen, #voice-player-wrap:fullscreen {
  width: 100vw; height: 100vh; overflow: hidden;
  --safe-w: 100vw; --safe-h: 100vh;
}
#player-wrap:fullscreen iframe, #voice-player-wrap:fullscreen iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto; max-width: none; max-height: none;
}
/* 유사 전체화면 동안 뒤 페이지가 스크롤/튀는 것 방지 (iOS 사파리는 overflow:hidden 만으론 부족) */
body.fs-lock { overflow: hidden; position: fixed; width: 100%; }
/* 전체화면에선 자막을 좀 더 크게 */
#player-wrap:fullscreen #sub-tr, .pseudo-full #sub-tr,
#voice-player-wrap:fullscreen #v-sub-tr, .pseudo-full #v-sub-tr { font-size: clamp(18px, 3.4vw, 30px); }
#player-wrap:fullscreen #sub-orig, .pseudo-full #sub-orig,
#voice-player-wrap:fullscreen #v-sub-orig, .pseudo-full #v-sub-orig { font-size: clamp(14px, 2vw, 20px); }

.msg.voicecap { border-left: 3px solid var(--accent2); background: rgba(155,108,255,.06); }
#stt-btn.on { color: #d3b7ff; border-color: var(--accent2); background: rgba(155,108,255,.1); }

/* 채팅 상단: 방송 자막 → 채팅 기록 슬라이더 토글 */
#caption-feed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg2);
}
/* 앱 설치(홈 화면에 추가) 버튼 & 안내 */
.install-btn { border-color: var(--accent); color: #cfe3ff; }
#install-guide { max-width: 520px; }
#install-guide h2 { margin-bottom: 6px; }
.guide-step {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  background: var(--bg2);
}
/* 제목 b 만 블록으로 — 문장 안의 <b> 까지 블록이 되면 단어마다 줄이 바뀐다 */
.guide-step > b { display: block; margin-bottom: 8px; font-size: 14.5px; color: var(--text); }
.guide-step ol { margin: 0; padding-left: 22px; }
.guide-step li { font-size: 13.5px; line-height: 1.75; color: var(--text); margin-bottom: 4px; }
.guide-step li b { font-weight: 700; color: #cfe3ff; }
.guide-step .hint { margin: 8px 0 0; line-height: 1.6; }
/* 지금 쓰는 기기에 해당하는 안내를 강조 */
.guide-step.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(108, 140, 255, .15); }
.kbd {
  display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px;
  background: #0e1118; font-size: 12px;
}
/* 아이폰 공유 아이콘 — SF Symbols 문자는 다른 기기에서 깨져 보이므로 직접 그린다 */
.guide-step .ic {
  width: 15px; height: 15px; vertical-align: -3px; margin: 0 2px; color: #cfe3ff;
}
@media (max-width: 640px) {
  #install-guide { width: 92vw; max-width: 92vw; padding: 18px 16px; }
  .guide-step { padding: 11px 12px; }
  .guide-step li { font-size: 13px; }
}

.cfb-label { font-size: 12.5px; color: var(--muted); }
#cap-audio-status { font-size: 12px; color: var(--ok); white-space: nowrap; }
#cap-audio-status.silent { color: var(--err); font-weight: 700; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: #e2574c; transition: background .18s ease;
}
.switch .slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.switch input:checked + .slider { background: #2ecc71; }
.switch input:checked + .slider::before { transform: translateX(22px); }
#player-wrap iframe { width: 100%; height: 100%; border: 0; }
#session-body.no-player #player-wrap { display: none; }
#chat-col {
  width: min(430px, 42%); min-width: 320px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); min-height: 0;
}
#session-body.no-player #chat-col { width: 100%; min-width: 0; border-left: 0; }
@media (max-width: 860px) {
  #session-body { flex-direction: column; }
  #player-wrap { flex: none; height: 38vh; }
  #chat-col { width: 100%; min-width: 0; flex: 1; border-left: 0; border-top: 1px solid var(--line); }
}

#feed-wrap { flex: 1; position: relative; overflow: hidden; }
#feed {
  list-style: none; height: 100%; overflow-y: auto; padding: 14px 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  /* smooth 금지: 애니메이션 중간 프레임이 '바닥 근처' 판정을 깨서 자동 스크롤이 풀린다 */
}
#feed::-webkit-scrollbar { width: 8px; }
#feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.msg {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  padding: 7px 10px; border-radius: 10px; animation: pop .18s ease-out;
}
.msg:hover { background: var(--panel); }
@keyframes pop { from { opacity: 0; transform: translateY(5px); } }
.msg .avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--panel2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden;
}
.msg .avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.msg .author { font-weight: 700; font-size: 12.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.msg .time { color: #555d70; font-size: 11px; }
.msg .amount { color: var(--warn); font-size: 12px; font-weight: 700; }
.msg .translated { font-size: 14.5px; word-break: break-word; }
.msg .translated.pending { color: var(--muted); font-style: italic; }
.msg .original { color: var(--muted); font-size: 12px; word-break: break-word; margin-top: 1px; }
.msg.superchat { border-left: 3px solid var(--warn); background: rgba(255, 180, 84, .06); }
.msg.membership { border-left: 3px solid var(--ok); background: rgba(61, 220, 132, .06); }
.msg.same-lang .translated { color: var(--text); }
.msg .flag { font-size: 10px; color: #555d70; margin-left: 4px; }

#jump-latest {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-weight: 600; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* compose — 위: 언어 선택+번역 버튼 / 아래: 전체 폭 입력창 */
.compose { border-top: 1px solid var(--line); background: var(--bg2); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.compose-top { display: flex; gap: 8px; align-items: center; }
.compose-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
#compose-target { flex: 1; min-width: 0; }
#compose-input {
  width: 100%; resize: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; outline: 0; max-height: 140px; font-size: 14px;
}
#compose-input:focus { border-color: var(--accent); }
#compose-go { background-image: var(--grad); color: #fff; font-weight: 700; padding: 9px 20px; white-space: nowrap; }
.compose-result {
  margin-top: 10px; display: flex; gap: 10px; align-items: center;
  background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px;
}
#compose-translated { flex: 1; font-size: 14.5px; word-break: break-word; }
#copy-btn { background: var(--panel2); color: var(--text); padding: 8px 14px; border: 1px solid var(--line); }
#copy-btn.copied { background: var(--ok); color: #05240f; border-color: transparent; font-weight: 700; }

/* ---------- 음성 통역 모드 ---------- */
.voice-cta {
  margin-top: 16px; background: var(--panel); color: var(--text); border: 1px solid #33406b;
  border-radius: 12px; padding: 12px 22px; font-weight: 700; font-size: 15px; transition: .15s;
}
.voice-cta small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.voice-cta:hover { border-color: var(--accent); background: var(--panel2); }
.badge.mic { color: #8fd6ff; border-color: #274b63; }

#voice { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* 탭 캡처 시: 좌측 = 캡처 화면 / 우측 = 번역 말풍선 (채팅 모드와 동일한 분할) */
#voice-body { flex: 1; display: flex; min-height: 0; }
#voice-player-wrap { flex: 1; background: #000; min-width: 0; display: flex; position: relative; }
#voice-player { width: 100%; height: 100%; object-fit: contain; }
#voice-player-label {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  background: rgba(13,16,24,.82); color: var(--muted); font-size: 12px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
}
#voice-body.no-player #voice-player-wrap { display: none; }
#voice-embed { width: 100%; height: 100%; border: 0; }
#v-embed-close {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  background: rgba(13,16,24,.85); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 12px;
}
#v-embed-close:hover { color: var(--err); border-color: var(--err); }
#v-url {
  flex: 1; min-width: 200px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; outline: 0;
}
#v-url:focus { border-color: var(--accent); }
#voice-chat-col {
  width: min(430px, 42%); min-width: 320px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); min-height: 0;
}
#voice-body.no-player #voice-chat-col { width: 100%; min-width: 0; border-left: 0; }
@media (max-width: 860px) {
  #voice-body { flex-direction: column; }
  #voice-player-wrap { flex: none; height: 36vh; }
  #voice-chat-col { width: 100%; min-width: 0; flex: 1; border-left: 0; border-top: 1px solid var(--line); }
}

#vfeed-wrap { flex: 1; overflow: hidden; min-height: 0; }
#vfeed {
  list-style: none; height: 100%; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
#vfeed::-webkit-scrollbar { width: 8px; }
#vfeed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.vmsg { display: flex; }
.vmsg.me { justify-content: flex-end; }
.vmsg .bubble {
  max-width: min(640px, 78%); padding: 10px 14px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); animation: pop .18s ease-out;
}
.vmsg.me .bubble { background: #1d2742; border-color: #33406b; border-bottom-right-radius: 5px; }
.vmsg.peer .bubble { border-bottom-left-radius: 5px; }
.vhead { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.vmsg.me .vhead { text-align: right; }
.vmain { font-size: 15px; word-break: break-word; line-height: 1.5; }
.vorig { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }

.voice-controls { border-top: 1px solid var(--line); background: var(--bg2); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.vc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vc-lang { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { background: var(--panel); color: var(--muted); padding: 7px 13px; font-size: 12.5px; border-radius: 0; }
.seg button.on { background: var(--panel2); color: var(--text); font-weight: 700; }
.src-btn {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  padding: 9px 16px; font-weight: 600; font-size: 13.5px; transition: .15s;
}
.src-btn:hover:not(:disabled) { border-color: var(--accent); }
.src-btn.on { background: #35131a; border-color: #7a2733; color: #ff9aa4; }
.src-btn:disabled { opacity: .45; cursor: not-allowed; }
.vc-hint { color: var(--muted); font-size: 12px; flex: 1; min-width: 200px; }
.me-strip { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.me-line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.me-label { color: var(--accent); font-weight: 700; font-size: 12px; white-space: nowrap; }
#me-interim { color: var(--muted); flex: 1; word-break: break-word; }
.me-line.tr { border-top: 1px dashed var(--line); padding-top: 6px; }
#me-translated { flex: 1; font-size: 14.5px; word-break: break-word; }
#me-speak, #me-copy {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  padding: 6px 12px; font-size: 12.5px; white-space: nowrap;
}
#me-speak:not(:disabled) { background-image: var(--grad); color: #fff; border-color: transparent; font-weight: 700; }
#me-speak:disabled, #me-copy:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 모바일 (앱 스타일) ---------- */
html { -webkit-tap-highlight-color: transparent; }
@media (max-width: 640px) {
  /* 앱(PWA)에서 로고·버튼이 상태바에 가리지 않도록 */
  #landing { padding: calc(16px + env(safe-area-inset-top)) 14px 40px; }
  /* 상단 버튼 3개가 한 줄에 들어가도록 — 좁은 폰에서 글자가 쪼개지던 문제 */
  .hero-top { flex-wrap: wrap; gap: 8px; }
  .hero-top .logo { font-size: 19px; }
  .top-actions { gap: 6px; }
  .top-actions .ghost-btn { padding: 7px 9px; font-size: 12px; border-radius: 9px; }
  .hero { padding: 32px 0 8px; }
  .hero h1 { font-size: 27px; }
  .hero .sub { font-size: 13.5px; }
  .url-box { flex-direction: column; align-items: stretch; gap: 8px; }
  .url-box input[type=text] { font-size: 16px; padding: 12px; } /* 16px 미만이면 iOS가 화면을 확대함 */
  .lang-pick { border-left: 0; justify-content: space-between; padding: 0 4px; }
  .lang-pick select { flex: 1; margin-left: 8px; padding: 10px; font-size: 15px; }
  #connect-btn { width: 100%; padding: 13px; font-size: 16px; }
  .voice-cta { width: 100%; padding: 14px; }
  .how { margin-top: 32px; }

  /* 세션: 영상 위 / 번역 채팅 아래 / 입력창 하단 고정 — 앱 레이아웃 */
  .session-top { padding: calc(8px + env(safe-area-inset-top)) 10px 8px; gap: 8px; flex-wrap: wrap; }
  .session-title b { font-size: 12.5px; }
  .ghost-btn { padding: 6px 10px; font-size: 12.5px; }
  .session-status { font-size: 11.5px; }
  #player-wrap { height: 32vh; }
  .compose { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  #compose-input { font-size: 16px; }
  .msg .translated { font-size: 15px; }
  #caption-feed-bar { padding: 7px 12px; }

  /* 음성 통역 모드 */
  #voice-player-wrap { height: 30vh; }
  .voice-controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .vc-lang { flex: 1; }
  .vc-lang select, #v-url { font-size: 16px; }
  .src-btn { flex: 1; padding: 12px; font-size: 15px; }
  .vc-hint { flex-basis: 100%; min-width: 0; } /* 힌트는 버튼 줄 아래 한 줄 전체로 */
  .go { padding: 10px 16px; font-size: 15px; }
  #me-speak, #me-copy { padding: 10px 14px; font-size: 14px; }

  /* 자막 바 */
  #subtitle-bar, #v-subtitle-bar { bottom: 12px; max-width: 94%; padding: 6px 12px; }
  #sub-tr, #v-sub-tr { font-size: 17px; }
  #sub-orig, #v-sub-orig { font-size: 12.5px; }
}

/* settings dialog */
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; width: min(430px, 92vw);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h2 { font-size: 17px; margin-bottom: 16px; }
dialog .row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
dialog .row span { width: 64px; color: var(--muted); font-size: 13px; }
dialog .row select, dialog .row input { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; outline: 0; }
dialog .hint { color: var(--muted); font-size: 12px; margin: 8px 0 16px; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; }
#settings-save { background-image: var(--grad); color: #fff; font-weight: 700; padding: 8px 18px; }