/* 좁은 화면과 휴대전화 가로 화면에서 관찰 공간을 확보한다. 데스크톱 규칙은 유지한다. */
@media (max-width:700px), (max-width:900px) and (max-height:500px) {
  :root { --am-safe-top:env(safe-area-inset-top,0px); --am-safe-bottom:env(safe-area-inset-bottom,0px); --am-safe-left:env(safe-area-inset-left,0px); --am-safe-right:env(safe-area-inset-right,0px); }
  #am-hud { inset:calc(8px + var(--am-safe-top)) calc(8px + var(--am-safe-right)) auto calc(8px + var(--am-safe-left)); height:44px; }
  #am-brand { display:none; }
  #am-liveStats { top:0; left:0; right:108px; transform:none; height:44px; max-width:340px; min-width:0; gap:5px; padding:0 9px; font-size:12px; }
  #am-liveStats .am-stat { gap:4px; flex:none; }
  #am-liveStats svg,#am-liveStats img { width:16px; height:16px; flex:none; }
  #am-liveStats .am-statSep { flex:none; height:14px; }
  #am-liveCapacity { font-size:10px; }
  #am-liveChannel { min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-height:44px; font-size:12px; }
  #am-liveChannel::after { width:8px; margin-left:1px; }
  /* 바깥 44px는 터치 영역이며, 원형 배경과 아이콘만 작게 그린다. */
  #am-leave { position:relative; width:44px; min-width:44px; height:44px; padding:0; border:0; font-size:0; background:transparent; backdrop-filter:none; }
  #am-leave::before { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--am-hud); border:1px solid #ffffff60; backdrop-filter:blur(12px); }
  #am-leave::after { content:''; position:absolute; inset:12px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4v16h6M9 12h12m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  #am-musicControl:not(.is-open) { background:transparent; backdrop-filter:none; }
  #am-musicControl:not(.is-open)::before { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--am-hud); border:1px solid #ffffff60; backdrop-filter:blur(12px); pointer-events:none; }
  #am-musicControl [data-speaker] { position:relative; padding:12px; min-width:44px; min-height:44px; }
  #am-hudRail { right:calc(8px + var(--am-safe-right)); top:calc(60px + var(--am-safe-top)); gap:6px; max-height:calc(100dvh - 76px - var(--am-safe-top) - var(--am-safe-bottom)); }
  #am-hudRail #am-wave,#am-snack>[data-open] { width:44px; height:44px; min-width:44px; max-width:44px; min-height:44px; max-height:44px; padding:9px; }
  #am-hudRail #am-wave { flex-basis:44px; }
  #am-wave img,#am-snack>[data-open] svg { width:24px; height:24px; }
  #am-controlHelp .am-helpButton { right:calc(8px + var(--am-safe-right)); bottom:calc(8px + var(--am-safe-bottom)); width:44px; height:44px; padding:0; border:0; font-size:18px; background:radial-gradient(circle closest-side,var(--am-hud) 72%,transparent 75%); backdrop-filter:none; }
  /* 상세창을 닫으면 뒤의 조작으로 돌아갈 수 있으므로 일어나기 안내만큼 띄우지 않는다. */
  #am-panel,body:has(#am-userPanel:not([hidden])) #am-panel,body:has(#am-standup:not([hidden])) #am-panel:not(:has(.am-detailTitle)) { top:auto; bottom:calc(8px + var(--am-safe-bottom)); left:calc(8px + var(--am-safe-left)); width:calc(100vw - 16px - var(--am-safe-left) - var(--am-safe-right)); min-width:0; max-width:330px; max-height:calc(100dvh - 76px - var(--am-safe-top) - var(--am-safe-bottom)); overflow:auto; z-index:40; }
}
/* 320px에서도 채널 번호를 생략하지 않고 두 줄로 읽을 수 있게 한다. */
@media (max-width:360px) {
  #am-liveChannel { white-space:normal; line-height:15px; text-align:left; overflow-wrap:anywhere; }
  #am-liveChannel::before,#am-liveChannel::after { display:none; }
}