/* Novicia Online - Mailbox + Party windows in the Settings sky frame (SKY-WINDOW-V2, 2026-09-30)
   js/sky-windows.js gives #mail-window and #party-window the class nv-skyframe and moves everything under the titlebar
   into <div class="nv-skyframe-body">. The old painted frames placed every part absolutely on their pictures; here the
   parts flow top to bottom inside the frame of css/sky-window.css. Loaded last (end of index.html) so it wins. */

/* ------------------------------------------------------------------ shared: frame, title, close X */
html body #hud#hud section#mail-window.nv-skyframe,
html body #hud#hud section#party-window.nv-skyframe {
  --w: min(540px, calc(100vw - 12px));
  --u: calc(var(--w) / 821);
  width: var(--w) !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important;
  max-height: calc(100dvh - 12px) !important; display: flex !important; flex-direction: column !important;
  padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  overflow: visible !important; container-type: inline-size; color: #10294f !important;
}
html body #hud#hud section#mail-window.nv-skyframe[hidden],
html body #hud#hud section#party-window.nv-skyframe[hidden] { display: none !important; }
html body #hud#hud section#mail-window.nv-skyframe::before,
html body #hud#hud section#party-window.nv-skyframe::before {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important;
  display: block !important; width: auto !important; height: auto !important; margin: 0 !important; background: none !important;
  border-style: solid !important; border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important;
  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 !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, .4)) !important;
}
html body #hud#hud section#mail-window.nv-skyframe::after,
html body #hud#hud section#party-window.nv-skyframe::after { content: none !important; display: none !important; }
html body #hud#hud section#mail-window.nv-skyframe > .titlebar,
html body #hud#hud section#party-window.nv-skyframe > .titlebar {
  position: absolute !important; left: 0 !important; right: 0 !important; top: calc(var(--u) * 78) !important; height: calc(var(--u) * 74) !important;
  padding: 0 calc(var(--u) * 120) !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important; cursor: grab;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-title,
html body #hud#hud section#party-window.nv-skyframe .pw-title {
  color: #ffffff !important; font-size: calc(var(--u) * 44) !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important;
  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) !important;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-title i { font-size: .7em !important; margin: 0 .3em !important; vertical-align: .1em !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-sub,
html body #hud#hud section#party-window.nv-skyframe .pw-tag { display: none !important; }
/* invisible hit area over the painted red X */
html body #hud#hud section#mail-window.nv-skyframe > .titlebar button,
html body #hud#hud section#party-window.nv-skyframe > .titlebar button {
  position: absolute !important; left: calc(var(--u) * 754) !important; top: calc(var(--u) * -3) !important; right: auto !important;
  width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; aspect-ratio: auto !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important;
  box-shadow: none !important; color: transparent !important; font-size: 0 !important; cursor: pointer;
}
html body #hud#hud section#mail-window.nv-skyframe > .titlebar button:hover,
html body #hud#hud section#party-window.nv-skyframe > .titlebar button:hover { background: rgba(255, 255, 255, .25) !important; }
html body #hud#hud section#mail-window.nv-skyframe > .nv-skyframe-body,
html body #hud#hud section#party-window.nv-skyframe > .nv-skyframe-body {
  position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
  margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important; padding: 0 calc(var(--u) * 36) calc(var(--u) * 10) calc(var(--u) * 40) !important;
  overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #7fa9d6 transparent;
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
}
/* 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#hud section#mail-window.nv-skyframe, html body #hud#hud section#party-window.nv-skyframe { max-height: calc(100dvh - 150px) !important; }
}
@media (max-height: 520px) {
  html body #hud#hud section#mail-window.nv-skyframe, html body #hud#hud section#party-window.nv-skyframe { --w: min(500px, calc(100vw - 12px), calc((100dvh - 8px) * 1.3)); }
}

/* sky panel (like a Settings section) */
html body #hud#hud section.nv-skyframe .nv-sky-panel,
html body #hud#hud section#mail-window.nv-skyframe .mail-top,
html body #hud#hud section#party-window.nv-skyframe .pw-panel,
html body #hud#hud section#party-window.nv-skyframe .pw-perks,
html body #hud#hud section#party-window.nv-skyframe #party-invite-form {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important;
  border: 1px solid #9ec2e6 !important; border-radius: 10px !important; background: linear-gradient(180deg, #ffffff, #eef6fe) !important;
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px #cfe2f5, 0 1px 3px rgba(20, 60, 120, .15) !important;
}

/* ------------------------------------------------------------------ Mailbox */
html body #hud#hud section#mail-window.nv-skyframe .mail-top {
  flex: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px !important; align-items: stretch !important; padding: 8px !important;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-stats { border: 0 !important; border-image: none !important; gap: 4px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-stat { margin: 0 !important; padding: 2px 4px !important; column-gap: 5px !important; border-radius: 8px !important; background: #eaf3fc !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-stat i { width: 18px !important; height: 18px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-stat b { font-size: 12px !important; color: #10294f !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-stat small { font-size: 10px !important; color: #5b7396 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-btn {
  border: 2px solid #1d4f9a !important; border-image: none !important; border-radius: 9px !important; padding: 0 10px !important; min-height: 36px !important; gap: 5px !important;
  background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; color: #ffffff !important; font-size: 12.5px !important; text-shadow: 0 1px 0 #0b2a66 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-btn.gold { border-color: #9c7a36 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-btn.cream { border-color: #b9d3ec !important; background: #ffffff !important; color: #1d4f9a !important; text-shadow: none !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-ico { width: 16px !important; height: 16px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-ico.chest { width: 20px !important; height: 20px !important; margin: -4px 0 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-list {
  position: static !important; inset: auto !important; flex: 1 1 auto !important; min-height: 120px !important; height: auto !important; max-height: none !important;
  display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 !important; overflow: visible !important;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-item {
  aspect-ratio: auto !important; min-height: 64px !important; padding: 8px 10px !important; grid-template-columns: 10px 44px minmax(0, 1fr) auto !important; column-gap: 8px !important;
  border: 1px solid #b9d3ec !important; border-radius: 10px !important; background: linear-gradient(180deg, #ffffff, #f2f8fe) !important;
  box-shadow: 0 1px 2px rgba(20, 60, 120, .12) !important;
}
html body #hud#hud section#mail-window.nv-skyframe .mail-item.unread { border-color: #3f86e0 !important; background: linear-gradient(180deg, #ffffff, #e6f1ff) !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-item.open { padding: 10px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-dot { margin-top: 18px !important; width: 9px !important; height: 9px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #9db9e8 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-item.open .mail-dot { margin-top: 4px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-art { width: 44px !important; height: 44px !important; border-radius: 8px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-art.gift { border: 1px solid #cfe0f2 !important; box-shadow: none !important; background-color: #eaf3fc !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-from { font-size: 13.5px !important; color: #1d3a78 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-subject { font-size: 12.5px !important; color: #10294f !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-text { font-size: 12px !important; padding: 6px 8px !important; border: 1px solid #cfe0f2 !important; border-radius: 8px !important; background: #f6fbff !important; color: #2d4c7a !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-atts { gap: 5px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-att { height: 24px !important; padding: 0 9px 0 5px !important; gap: 4px !important; border-width: 1px !important; border-radius: 12px !important; font-size: 11.5px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-att img,
html body #hud#hud section#mail-window.nv-skyframe .mail-coin { width: 16px !important; height: 16px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-taken { font-size: 11px !important; margin-left: 4px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-side { padding: 0 !important; gap: 6px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-time { font-size: 11px !important; margin-right: 0 !important; gap: 4px !important; color: #5b7396 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-ico.clock { width: 13px !important; height: 13px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-side .mail-btn { width: auto !important; min-width: 64px !important; height: 30px !important; min-height: 30px !important; font-size: 11.5px !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-empty { font-size: 14px !important; color: #3a5680 !important; padding: 30px 0 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-empty small { font-size: 12px !important; color: #5b7396 !important; }
html body #hud#hud section#mail-window.nv-skyframe .mail-note {
  position: static !important; inset: auto !important; height: auto !important; flex: none !important; margin: 0 !important;
  font-size: 11.5px !important; color: #3a5680 !important; white-space: normal !important; text-align: center !important; justify-content: center !important;
}
@media (max-width: 480px) {
  html body #hud#hud section#mail-window.nv-skyframe .mail-top { grid-template-columns: 1fr 1fr !important; }
  html body #hud#hud section#mail-window.nv-skyframe .mail-stats { grid-column: 1 / -1 !important; }
  html body #hud#hud section#mail-window.nv-skyframe .mail-item { grid-template-columns: 8px 36px minmax(0, 1fr) !important; }
  html body #hud#hud section#mail-window.nv-skyframe .mail-art { width: 36px !important; height: 36px !important; }
  html body #hud#hud section#mail-window.nv-skyframe .mail-side { grid-column: 3 !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
}

/* ------------------------------------------------------------------ Party */
html body #hud#hud section#party-window.nv-skyframe #party-invite-form { flex: none !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 8px 10px !important; }
html body #hud#hud section#party-window.nv-skyframe #party-invite-form label { font-size: 12.5px !important; font-weight: 800 !important; color: #1d3a78 !important; }
html body #hud#hud section#party-window.nv-skyframe .party-invite-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; height: 38px !important; width: 100% !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-search {
  border: 1.5px solid #9ec2e6 !important; border-image: none !important; border-radius: 9px !important; background: #ffffff !important; padding: 0 10px !important; gap: 6px !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-search::before { width: 16px !important; height: 16px !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-search input { font-size: 13px !important; color: #10294f !important; }
html body #hud#hud section#party-window.nv-skyframe button.pw-gold {
  border: 2px solid #9c7a36 !important; border-image: none !important; border-radius: 9px !important; padding: 0 14px !important;
  background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; font-size: 13px !important; font-weight: 800 !important; text-shadow: none !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-ico { width: 15px !important; height: 15px !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-panel { flex: none !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-panel-head {
  height: 34px !important; padding: 0 8px 0 10px !important; gap: 6px !important; background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-panel-head b { font-size: 13px !important; color: #fff !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-hint { font-size: 11px !important; color: #dbe9ff !important; }
html body #hud#hud section#party-window.nv-skyframe button.pw-refresh {
  width: auto !important; height: 26px !important; padding: 0 10px !important; border: 1.5px solid #ffffff !important; border-image: none !important; border-radius: 8px !important;
  background: rgba(255, 255, 255, .18) !important; color: #fff !important; font-size: 11.5px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-rows { max-height: min(240px, 34vh) !important; overflow-y: auto !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-foot {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important; flex: none !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 10px !important; padding: 2px 2px !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-share { width: 20px !important; height: 20px !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-share i { border-width: 2px !important; border-radius: 5px !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-share::after {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #1d3a78; pointer-events: none;
}
html body #hud#hud section#party-window.nv-skyframe #party-share-label { margin-right: 84px !important; }
html body #hud#hud section#party-window.nv-skyframe #party-share-label::after { content: "แบ่งของ"; }
html body #hud#hud section#party-window.nv-skyframe #party-auto-label { margin-right: 116px !important; }
html body #hud#hud section#party-window.nv-skyframe #party-auto-label::after { content: "รับอัตโนมัติ"; }
html body #hud#hud section#party-window.nv-skyframe .pw-expshare { height: 26px !important; padding: 0 12px !important; border-width: 2px !important; font-size: 12px !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-foot p { flex: 1 1 100% !important; order: 5 !important; font-size: 12px !important; white-space: normal !important; color: #2d4c7a !important; min-height: 0 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-foot p:empty { display: none !important; }
html body #hud#hud section#party-window.nv-skyframe button.pw-leave {
  width: auto !important; height: 30px !important; padding: 0 12px !important; margin-left: auto !important; border: 1.5px solid #b08b84 !important; border-image: none !important;
  border-radius: 8px !important; background: linear-gradient(#fff, #f6e6e4) !important; color: #8d2f22 !important; font-size: 12px !important; font-weight: 800 !important; text-shadow: none !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-count { font-size: 13px !important; gap: 5px !important; color: #1d3a78 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks { flex: none !important; padding: 8px 12px 10px !important; pointer-events: auto !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks > * { position: static !important; inset: auto !important; width: auto !important; height: auto !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-bubble { display: none !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks h4 {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 0 6px !important; padding: 3px 12px !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #ffffff !important; font-size: 12.5px !important;
}
html body #hud#hud section#party-window.nv-skyframe .pw-perks ul { display: grid !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks li { white-space: normal !important; font-size: 12px !important; line-height: 1.4 !important; color: #10294f !important; gap: 6px !important; align-items: flex-start !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks li::before { width: 12px !important; height: 12px !important; margin: 3px 0 0 !important; }
/* order: search -> player list -> party settings -> perks */
html body #hud#hud section#party-window.nv-skyframe #party-invite-form { order: 1 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-panel { order: 2 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-foot { order: 3 !important; }
html body #hud#hud section#party-window.nv-skyframe .pw-perks { order: 4 !important; }

/* Settings -> Session: "เลือกตัวละคร" (js/sky-windows.js) - same button as "ออกจากระบบ" (main css + ui-sky-2.css), stacked above it */
html body #hud section#settings-window [data-settings-section="session"] .settings-section-body:has(#nv-change-char) { grid-auto-flow: row dense; row-gap: calc(var(--u) * 12); }
html body #hud section#settings-window .settings-section-body:has(#nv-change-char) > #connection-monitor { grid-column: 1; grid-row: 1 / span 2; }
html body #hud section#settings-window .settings-section-body:has(#nv-change-char) > :is(#online-logout, #offline-home) { grid-column: 2; grid-row: 1; }
html body #hud section#settings-window .settings-section-body > #nv-change-char { grid-column: 2; grid-row: 2; order: 2 !important; }
html body #hud section#settings-window .settings-section-body:has(#nv-change-char) > #settings-links { grid-column: 1 / -1; }
html body #hud section#settings-window #nv-change-char {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); width: 100%; min-height: calc(var(--u) * 88); margin: 0;
  padding: 0 calc(var(--u) * 10); border: calc(var(--u) * 3.5) solid #0e2a66; border-radius: calc(var(--u) * 11);
  background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.5) #5f8bd6, inset 0 calc(var(--u) * -6) 0 #0003, 0 calc(var(--u) * 2) 0 #0b1a3a;
  color: #fff; font-family: inherit; font-size: calc(var(--u) * 26) !important; font-weight: 700; text-shadow: 0 calc(var(--u) * 2) 0 #0b1a3a; cursor: pointer;
}
html body #hud section#settings-window #nv-change-char::before {
  content: ""; flex: none; width: calc(var(--u) * 42); height: calc(var(--u) * 42); background: #fff;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-8 0a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 2c-2.330 0-7 1.170-7 3.500V19h14v-2.500C15 14.170 10.330 13 8 13zm8 0c-.290 0-.620.020-.970.050 1.160.840 1.970 1.970 1.970 3.450V19h6v-2.500c0-2.330-4.670-3.500-7-3.500z'/%3E%3C/svg%3E");
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
html body #hud section#settings-window #nv-change-char:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------ ผู้ช่วยล่าอัตโนมัติ (Bot window, js/bot-ui.js, BOT-UI-V2) */
html body #hud section#bot-window.nv-bot-v2 .bot-motto,
html body #hud section#bot-window.nv-bot-v2 .bot-zz { display: none !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-hero {
  display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: auto auto !important; align-items: center !important; gap: 4px 12px !important;
  padding: 10px 12px !important; border: 1px solid #9ec2e6 !important; border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff, #eef6fe) !important; box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgba(20, 60, 120, .15) !important;
}
html body #hud section#bot-window.nv-bot-v2 .bot-avatar { grid-row: 1 / 3 !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; overflow: hidden !important;
  background: radial-gradient(circle at 50% 40%, #dff0ff, #9ec2e6) !important; border: 2px solid #3f86e0 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 18% !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-state { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-state small { font-size: 12px !important; color: #5b7396 !important; }
html body #hud section#bot-window.nv-bot-v2 #bot-status {
  display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 3px 12px !important; border-radius: 999px !important; border: 0 !important;
  background: #fde0de !important; color: #b3261e !important; font-size: 13px !important; font-weight: 800 !important; text-shadow: none !important; box-shadow: none !important;
}
html body #hud section#bot-window.nv-bot-v2 #bot-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html body #hud section#bot-window.nv-bot-v2.nv-bot-running #bot-status { background: #dff5e6 !important; color: #1f7a45 !important; }
html body #hud section#bot-window.nv-bot-v2 #bot-run {
  grid-row: 1 / 3 !important; grid-column: 3 !important; min-width: 150px !important; height: 46px !important; padding: 0 16px !important;
  border: 2px solid #1b7a3a !important; border-image: none !important; border-radius: 12px !important; background: linear-gradient(180deg, #5fd07c, #23994a) !important;
  color: #fff !important; font-size: 15px !important; font-weight: 800 !important; text-shadow: 0 1px 0 #0d4d22 !important; box-shadow: 0 3px 0 #16693a !important; cursor: pointer;
}
html body #hud section#bot-window.nv-bot-v2 #bot-run.nv-on { border-color: #9c2a22 !important; background: linear-gradient(180deg, #ff7a6b, #d83a2c) !important; text-shadow: 0 1px 0 #6d1710 !important; box-shadow: 0 3px 0 #8f241b !important; }
html body #hud section#bot-window.nv-bot-v2 #bot-run:active { transform: translateY(2px); box-shadow: none !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-help { grid-column: 2 / 3 !important; margin: 0 !important; font-size: 11.5px !important; color: #3a5680 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-help::before, html body #hud section#bot-window.nv-bot-v2 .bot-help i { display: none !important; }
/* tabs */
html body #hud section#bot-window.nv-bot-v2 .nv-bot-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 10px 0 8px; }
html body #hud section#bot-window.nv-bot-v2 .nv-bot-tabs button {
  min-height: 38px; padding: 2px 4px; border: 2px solid #b9d3ec; border-radius: 10px; background: #ffffff; color: #3a5680;
  font: inherit; font-size: 13px !important; font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #hud section#bot-window.nv-bot-v2 .nv-bot-tabs button[aria-pressed="true"] { border-color: #1d4f9a; background: linear-gradient(180deg, #4f93f2, #1f5fd0); color: #fff; text-shadow: 0 1px 0 #0b2a66; }
html body #hud section#bot-window.nv-bot-v2 .nv-bot-hide { display: none !important; }
/* section headers: a plain line with the icon instead of the ribbon banners */
html body #hud section#bot-window.nv-bot-v2 .bot-ribbon {
  background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; padding: 0 2px 4px !important; margin: 4px 0 !important; height: auto !important;
  color: #1d3a78 !important; font-size: 13px !important; font-weight: 800 !important; text-shadow: none !important; border-bottom: 2px solid #cfe2f5 !important;
}
html body #hud section#bot-window.nv-bot-v2 .bot-ribbon::before, html body #hud section#bot-window.nv-bot-v2 .bot-ribbon::after { display: none !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-card { border-radius: 12px !important; border: 1px solid #b9d3ec !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-saved { display: block; text-align: center; color: #5b7396 !important; font-size: 11px !important; }
@media (max-width: 480px) {
  html body #hud section#bot-window.nv-bot-v2 .bot-hero { grid-template-columns: auto 1fr !important; }
  html body #hud section#bot-window.nv-bot-v2 #bot-run { grid-row: 3 !important; grid-column: 1 / 3 !important; width: 100% !important; }
  html body #hud section#bot-window.nv-bot-v2 .nv-bot-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body #hud section#bot-window.nv-bot-v2 .bot-ribbon { display: flex !important; align-items: center !important; gap: 6px !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-ribbon > * { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-ribbon img, html body #hud section#bot-window.nv-bot-v2 .bot-ribbon i { width: 20px !important; height: 20px !important; flex: none !important; }
html body #hud section#bot-window.nv-bot-v2 #bot-run::before, html body #hud section#bot-window.nv-bot-v2 #bot-run::after { display: none !important; content: none !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-help { position: static !important; inset: auto !important; grid-row: 2 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-state { grid-row: 1 !important; grid-column: 2 !important; }
html body #hud section#bot-window.nv-bot-v2 .bot-section::before, html body #hud section#bot-window.nv-bot-v2 .bot-section::after,
html body #hud section#bot-window.nv-bot-v2 #auto-play-settings::before, html body #hud section#bot-window.nv-bot-v2 #auto-play-settings::after { display: none !important; content: none !important; }
@media (max-width: 480px) {
  html body #hud section#bot-window.nv-bot-v2 .bot-avatar { grid-row: 1 !important; }
  html body #hud section#bot-window.nv-bot-v2 .bot-help { grid-column: 1 / 3 !important; }
}