/* 말문 — 글자 없는 화면. 색은 두 가지만: 하늘색(내 차례) · 호박색(AI 차례) */
:root {
  --me: #5ec8ff;
  --ai: #ffb547;
  --glass: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.32);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0b1220; color: #fff;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; }
[hidden] { display: none !important; }

/* 장면 */
#stage { position: fixed; inset: 0; overflow: hidden; }
#sceneBg {
  position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover; filter: blur(32px) brightness(0.42) saturate(1.25);
}
#scene, #screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity 0.45s ease;
}
#scene.swap { opacity: 0; }
#screen { display: none; background: #000; }
body.sharing #screen { display: block; }
body.sharing #scene { opacity: 0; }
#shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 10, 20, 0.78) 0, rgba(5, 10, 20, 0) 34%),
    linear-gradient(to bottom, rgba(5, 10, 20, 0.45) 0, rgba(5, 10, 20, 0) 16%);
}

/* 유리 버튼 */
.ico {
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 15px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line), 0 6px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; transition: transform 0.15s ease, background 0.2s;
}
.ico svg { width: 100%; height: 100%; }
.ico:active { transform: scale(0.92); }
.ico.small { width: 44px; height: 44px; padding: 11px; }

#top {
  position: fixed; left: 0; right: 0; top: calc(12px + var(--safe-t));
  padding: 0 14px; display: flex; justify-content: space-between; align-items: center;
}
#top .right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
#btnEnd { visibility: hidden; }
body[data-phase="live"] #btnEnd, body[data-phase="paused"] #btnEnd { visibility: visible; }
body.sharing #btnScreen { background: rgba(94, 200, 255, 0.35); }

/* 오늘 대화한 시간: 고리가 차오른다 (목표 20분) */
#today { width: 40px; height: 40px; transform: rotate(-90deg); }
#today .track { stroke: rgba(255, 255, 255, 0.18); stroke-width: 3.2; }
#today .arc {
  stroke: var(--ai); stroke-width: 3.2; stroke-dasharray: 87.96; stroke-dashoffset: 87.96;
  transition: stroke-dashoffset 0.6s ease;
}
#today.done .arc { stroke: #ffd36b; filter: drop-shadow(0 0 4px #ffd36b); }

/* 아래 버튼줄 */
#dock {
  position: fixed; left: 0; right: 0; bottom: calc(26px + var(--safe-b));
  display: flex; justify-content: center; align-items: center; gap: 34px;
}

/* 가운데 구슬 */
#orb {
  --lvl: 0; --ring: rgba(255, 255, 255, 0.5);
  position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4), 0 10px 34px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: grid; place-items: center; transition: background 0.3s, box-shadow 0.3s;
}
#orb::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid var(--ring); opacity: calc(0.25 + var(--lvl));
  transform: scale(calc(1 + var(--lvl) * 0.42)); transition: transform 90ms linear, opacity 90ms linear;
}
#orb .mic { width: 40px; height: 40px; stroke-width: 1.9; }
#orb .bars { display: none; gap: 5px; align-items: center; height: 40px; }
#orb .bars i {
  display: block; width: 6px; border-radius: 3px; background: #fff;
  height: calc(8px + var(--lvl) * var(--k) * 30px); transition: height 90ms linear;
}
#orb .bars i:nth-child(1) { --k: 0.6; } #orb .bars i:nth-child(2) { --k: 1; }
#orb .bars i:nth-child(3) { --k: 0.85; } #orb .bars i:nth-child(4) { --k: 0.5; }
#orb .spin {
  display: none; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #fff; animation: spin 0.9s linear infinite;
}

body[data-phase="idle"] #orb { animation: breathe 3.2s ease-in-out infinite; }
body[data-phase="paused"] #orb { --ring: var(--ai); animation: breathe 3.2s ease-in-out infinite; }
body[data-phase="connecting"] #orb .spin { display: block; }
body[data-phase="connecting"] #orb::before { opacity: 0; }
body[data-phase="live"] #orb .mic { display: none; }
body[data-phase="live"] #orb .bars { display: flex; }
#orb.listening { --ring: var(--me); background: rgba(94, 200, 255, 0.26); }
#orb.speaking { --ring: var(--ai); background: rgba(255, 181, 71, 0.3); }

@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 알림 아이콘 (마이크 거부·연결 실패·키 없음) */
#notice {
  position: fixed; left: 50%; top: 42%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; padding: 22px; background: rgba(220, 60, 60, 0.85);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transform: scale(0.8);
  transition: opacity 0.25s, transform 0.25s;
}
#notice svg { width: 100%; height: 100%; display: none; stroke-width: 2; }
#notice.show { opacity: 1; transform: scale(1); animation: shake 0.45s ease; }
#notice[data-kind="mic"] svg[data-kind="mic"],
#notice[data-kind="net"] svg[data-kind="net"],
#notice[data-kind="key"] svg[data-kind="key"] { display: block; }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }

/* 잠금 (비밀 주소로 들어오지 않았을 때) */
#lock {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(8, 12, 22, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#lock svg { width: 88px; height: 88px; opacity: 0.85; }

@media (min-width: 900px) {
  #dock { gap: 48px; }
  #orb { width: 108px; height: 108px; }
}