/* 사용 환경 전제: 태블릿을 손에 들지 않은 채, 거리도 자세도 일정하지 않다.
   그래서 조작 요소는 화면 대부분을 차지하고, 상태는 색/글자/움직임 세 가지로
   동시에 표현한다. 색만으로 구분되는 정보는 두지 않는다. */

:root {
  color-scheme: dark;
  --bg: #0e1117;
  --panel: #161b24;
  --line: #232b38;
  --fg: #e8edf5;
  --muted: #8b98ab;
  --accent: #38bd7d;
  --accent-ink: #06240f;
  --rec: #ef4444;
  --busy: #3b82f6;
  --warn: #f59e0b;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  overscroll-behavior: none;
}

/* 오조작 방지: 텍스트 영역 말고는 선택/드래그/확대를 막는다 */
body { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
textarea { -webkit-user-select: text; user-select: text; }

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* ---------------------------------------------------------------- 상태 바 */
#bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
#dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted); flex: none;
  transition: background .2s;
}
#hostname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#engine-badge { color: var(--muted); font-size: 13px; margin-left: auto; white-space: nowrap; }
#btn-info {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 15px; font-weight: 700; font-style: italic;
}

body[data-state="idle"] #dot,
body[data-state="recording"] #dot,
body[data-state="uploading"] #dot { background: var(--accent); }
body[data-state="offline"] #dot,
body[data-state="unauthorized"] #dot { background: var(--rec); }
body[data-state="connecting"] #dot { background: var(--warn); animation: blink 1s infinite; }

/* ------------------------------------------------------- 누르고 말하는 버튼 */
#stage { flex: 1 1 auto; display: flex; padding: 14px; min-height: 0; }

#ptt {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 3px solid var(--line);
  border-radius: 28px;
  background: #1b2331;
  color: var(--fg);
  font-family: inherit;
  padding: 16px;
  /* 정밀 조준 없이 눌러야 하므로, 스크롤/제스처로 새지 않게 고정한다 */
  touch-action: none;
  transition: background .12s, border-color .12s, transform .08s;
}
#ptt:disabled { opacity: .45; }
#ptt-icon { width: 26%; max-width: 190px; min-width: 76px; fill: currentColor; stroke: currentColor; }
#ptt-label { font-size: clamp(24px, 5.5vw, 46px); font-weight: 800; letter-spacing: -.5px; }
#ptt-sub { font-size: clamp(14px, 2.4vw, 20px); color: var(--muted); }
#timer { font-size: clamp(16px, 3vw, 24px); font-variant-numeric: tabular-nums; color: var(--muted); opacity: 0; }
#meter {
  width: 60%; max-width: 420px; height: 10px; border-radius: 6px;
  background: rgba(255,255,255,.10); overflow: hidden; opacity: 0;
}
#meter i { display: block; height: 100%; width: 0%; background: var(--fg); transition: width .06s linear; }

/* 녹음 중 — 색 + 글자 + 테두리 맥동, 세 가지가 동시에 바뀐다 */
body[data-state="recording"] #ptt {
  background: #3a1414;
  border-color: var(--rec);
  animation: pulse 1.1s ease-in-out infinite;
}
body[data-state="recording"] #ptt-icon { color: var(--rec); }
body[data-state="recording"] #timer,
body[data-state="recording"] #meter { opacity: 1; }

/* 전송/처리 중 */
body[data-state="uploading"] #ptt {
  background: #12213c;
  border-color: var(--busy);
}
body[data-state="uploading"] #ptt-icon { animation: spin 1.2s linear infinite; color: var(--busy); }

body[data-state="offline"] #ptt,
body[data-state="unauthorized"] #ptt,
body[data-state="connecting"] #ptt { background: #171b22; border-color: var(--line); }

body[data-state="error"] #ptt { border-color: var(--warn); }

/* ------------------------------------------------------------- 결과 영역 */
#result {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + var(--safe-b));
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* display 를 주는 선택자는 [hidden] 보다 우선하므로 명시적으로 되돌린다 */
#banner[hidden] { display: none; }
#banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #2a1f14; border: 1px solid #4a3418; color: #f0c98a;
  border-radius: 12px; padding: 10px 12px; font-size: 15px;
}
#banner-text { flex: 1 1 160px; }
#banner button {
  border: 1px solid #6b4c22; background: #3a2a15; color: #f5d9a6;
  border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 600;
}

#text {
  width: 100%;
  min-height: 4.2em;
  max-height: 26vh;
  resize: none;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0f141c;
  color: var(--fg);
  padding: 12px 14px;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.5;
  font-family: inherit;
}
#text:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#actions { display: flex; gap: 10px; }
#actions button {
  flex: 1;
  min-height: 68px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #202836;
  color: var(--fg);
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 700;
  font-family: inherit;
}
#actions #btn-clear { flex: 0 0 30%; color: var(--muted); }
#actions .primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#actions button:disabled { opacity: .4; }
#actions button:active:not(:disabled) { transform: scale(.985); }

/* ------------------------------------------------------------- 오버레이 */
#setup, #info {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8, 11, 16, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#setup[hidden], #info[hidden] { display: none; }
.panel {
  width: 100%; max-width: 520px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 24px;
}
.panel h2 { margin: 0 0 10px; font-size: 20px; }
.panel p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.panel .hint { font-size: 13px; margin-top: 14px; margin-bottom: 0; }
.panel pre {
  background: #0f141c; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; font-size: 12px; color: var(--muted);
  max-height: 46vh; overflow: auto; white-space: pre-wrap; word-break: break-all;
  -webkit-user-select: text; user-select: text;
}
.panel button {
  width: 100%; min-height: 60px; border-radius: 14px; border: none;
  font-size: 18px; font-weight: 700; font-family: inherit;
  background: var(--accent); color: var(--accent-ink);
}
#setup-urls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
#setup-urls a {
  display: block; padding: 14px; border-radius: 12px; text-align: center;
  background: #202836; color: var(--fg); text-decoration: none;
  font-size: 15px; word-break: break-all;
}

/* ------------------------------------------------------------ PIN 잠금 */
#lock {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#lock[hidden] { display: none; }
#lock .panel { text-align: center; max-width: 420px; }

#pin-dots {
  display: flex; justify-content: center; gap: 14px;
  min-height: 22px; margin: 6px 0 22px;
}
#pin-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: 2px solid var(--muted);
}
#pin-dots i.on { background: var(--accent); border-color: var(--accent); }

#keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#keypad button {
  min-height: 74px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #202836;
  color: var(--fg);
  font-size: 28px;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
}
#keypad button.alt { font-size: 18px; color: var(--muted); background: #171d27; }
#keypad button:active { background: #2b3648; }
#keypad button:disabled { opacity: .4; }

#lock-error { color: #f87171; min-height: 1.4em; margin: 16px 0 0; font-size: 15px; }
.panel p.err { color: #f87171; }

/* --------------------------------------------------------------- 토스트 */
#toast {
  position: fixed; left: 50%; bottom: calc(28px + var(--safe-b));
  transform: translate(-50%, 20px);
  background: #0b0f16; border: 1px solid var(--line);
  color: var(--fg); padding: 12px 20px; border-radius: 999px;
  font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: 90vw; text-align: center; z-index: 30;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { border-color: #7f1d1d; background: #2a1215; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  50%      { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  #ptt, #ptt-icon, #dot { animation: none !important; }
}

/* 가로가 넉넉하면 결과 영역을 옆으로 뺀다 (버튼 면적을 더 확보) */
@media (min-aspect-ratio: 13/10) and (min-width: 820px) {
  #app { flex-direction: row; }
  #bar {
    position: fixed; top: var(--safe-t); left: var(--safe-l); right: var(--safe-r);
    z-index: 10; background: rgba(14,17,23,.85); backdrop-filter: blur(6px);
  }
  #stage { padding-top: 66px; flex: 1 1 62%; }
  #result {
    flex: 0 0 38%; border-top: none; border-left: 1px solid var(--line);
    padding-top: 66px; justify-content: center;
  }
  #text { max-height: 40vh; min-height: 8em; }
}