/* Novicia Online - the Settings window's sky frame for add-on windows (SKY-WINDOW-V1, 2026-09-30)
   <section class="window nv-skyframe"> + <div class="titlebar"><span>title</span><button data-close>×</button></div> + <div class="nv-skyframe-body">.
   Same painted frame as ตั้งค่า (/ui/settings/frame-sky.webp, 2112 x 745: top 492 px with the banner and the red X,
   bottom 145 px), measured in --u = window width / 821 like the Settings CSS. Used by แจ้งปัญหา and เลือกแชนแนล. */
html body #hud section.window.nv-skyframe {
  --w: min(500px, calc(100vw - 12px));
  --u: calc(var(--w) / 821);
  position: absolute !important; width: var(--w) !important; max-width: none !important; height: auto !important; max-height: calc(100dvh - 12px) !important;
  display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: visible !important; pointer-events: auto;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: #10294f !important; font-family: 'Noto Sans Thai', system-ui, sans-serif; font-weight: 500; line-height: 1.45;
}
html body #hud section.window.nv-skyframe[hidden] { display: none !important; }
html body #hud section.window.nv-skyframe::before {
  content: ""; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; margin: 0; background: none; z-index: -1; pointer-events: none; border-style: solid;
  border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4);
  border-image: url('/ui/settings/frame-sky.webp?v=1') 492 0 145 0 fill / calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) stretch;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, .4));
}
html body #hud section.window.nv-skyframe > .titlebar {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 78); height: calc(var(--u) * 74); padding: 0 calc(var(--u) * 120);
  display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: grab; touch-action: none;
}
html body #hud section.window.nv-skyframe > .titlebar > span {
  color: #ffffff; font-size: calc(var(--u) * 44) !important; font-weight: 800; line-height: 1; white-space: nowrap;
  text-shadow: -0.1em 0 #1b3a7a, 0.1em 0 #1b3a7a, 0 -0.08em #1b3a7a, 0 0.1em #1b3a7a, 0 0.15em 0.25em rgba(10, 30, 80, .6);
}
/* invisible hit area over the painted red X */
html body #hud section.window.nv-skyframe > .titlebar button {
  position: absolute; left: calc(var(--u) * 754); top: calc(var(--u) * -3); width: calc(var(--u) * 54); height: calc(var(--u) * 54);
  min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: transparent; font-size: 0 !important; cursor: pointer;
}
html body #hud section.window.nv-skyframe > .titlebar button:hover { background: rgba(255, 255, 255, .25); }
html body #hud section.window.nv-skyframe > .nv-skyframe-body {
  flex: 1 1 auto; min-height: 0; margin: calc(var(--u) * 196) 0 calc(var(--u) * 50); padding: 0 calc(var(--u) * 36) calc(var(--u) * 10) calc(var(--u) * 40);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #7fa9d6 transparent;
}
/* a sky panel with a blue ribbon heading, like the Settings sections */
html body #hud section.window.nv-skyframe .nv-skyframe-sec {
  margin: 0 0 10px; padding: 10px 12px; border: 1px solid #9ec2e6; border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #eef6fe);
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px #cfe2f5, 0 1px 3px rgba(20, 60, 120, .15);
}
html body #hud section.window.nv-skyframe .nv-skyframe-sec > h3 {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px;
  background: linear-gradient(180deg, #3f86e0, #1d58b0); color: #ffffff; font-size: 13px; font-weight: 800;
}
/* PC: stay clear of the menu icons along the top (the window is centred) */
@media (min-height: 521px) and (min-width: 701px) {
  html body #hud section.window.nv-skyframe { max-height: calc(100dvh - 170px) !important; }
}
@media (max-height: 520px) {
  html body #hud section.window.nv-skyframe { --w: min(460px, calc(100vw - 12px), calc((100dvh - 8px) * 1.25)); }
}

/* ---------- เลือกแชนแนล (js/channel-picker.js) ---------- */
#hud #channel-window .ch-map { margin: 0 0 8px; color: #3a5680; font-size: 13px; font-weight: 600; }
#hud #channel-window .ch-list { display: grid; gap: 6px; }
#hud #channel-window .ch-row {
  display: grid; grid-template-columns: 34px 1fr auto 64px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 10px;
  border: 2px solid #cfe0f2; border-radius: 10px; background: #ffffff; color: #10294f; font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#hud #channel-window .ch-row:hover:enabled { border-color: #3f86e0; background: #f3f9ff; }
#hud #channel-window .ch-row i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-weight: 800;
  background: linear-gradient(180deg, #4f93f2, #1f5fd0); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
}
#hud #channel-window .ch-row span { font-weight: 700; }
#hud #channel-window .ch-row span em { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: linear-gradient(180deg, #ffe39a, #e2ab33); color: #3d2806; font-style: normal; font-size: 11px; }
#hud #channel-window .ch-row small { color: #5b7396; font-size: 12px; font-variant-numeric: tabular-nums; }
#hud #channel-window .ch-row b { justify-self: end; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; }
#hud #channel-window .ch-row.free b { background: #dff5e6; color: #1f7a45; }
#hud #channel-window .ch-row.mid b { background: #fff3cd; color: #8a5d12; }
#hud #channel-window .ch-row.busy b { background: #ffe1cc; color: #a44a12; }
#hud #channel-window .ch-row.full b { background: #fde0de; color: #b3261e; }
#hud #channel-window .ch-row.on { border-color: #c99a2e; background: linear-gradient(180deg, #fffaf0, #fff1c9); cursor: default; }
#hud #channel-window .ch-row:disabled:not(.on) { opacity: .6; cursor: default; }
#hud #channel-window .ch-note { margin: 0; color: #3a5680; font-size: 12px; }