/* ===========================================================================
   MAVEN RAGNAROK ONLINE — overlay UI re-theme
   AI companion · AFK farm · AI agency  →  the game client's own window chrome
   ---------------------------------------------------------------------------
   Per Ramil: "make the AI Chat and the AFK FARM UI same as the game client
   theme blue UI? not neon anymore to sync with the game UI."

   WHAT THE OVERLAYS WERE

   All three are built on one kit, `system-ui/system-ui.css`, whose own header
   says its colours were "sampled off refs/bar-system/solo-leveling-ref.jpg".
   That is a NEON system window: a near-black navy field (#08080f), a panel that
   glows from #1437a8 out to a #1275dc rim, a near-white #cfe2ff hairline, five
   stacked outward glows, and #52db58 neon green for variable values. It is a
   good-looking kit and it looks nothing like Ragnarok.

   WHAT THE GAME ACTUALLY LOOKS LIKE

   Sampled from a real in-world capture of this server
   (`features/level-cap/evidence/a01-inworld-lv98.png`, the BasicInfo window):

     titlebar light   #dcf1fd        titlebar mid   #b3c1dd
     body             #ffffff        body alt       #cad4e9
     border/edge      #5e5e5e → #1e1e1e
     type             near-black, bold, no tracking
     glow             none. RO windows do not emit light.

   So this file inverts the kit: panels go WHITE, the hairline goes DARK, ink
   goes near-black, and every neon bloom becomes a plain neutral drop shadow.

   WHY IT IS A TOKEN REMAP

   companion.css, afk-farm.css and agency.css contain almost no literal colours
   between them — they consume `--sys-*`. Rebinding those tokens re-themes all
   three at once and leaves every class name, element id and script untouched.
   Two literal fills in afk-farm.css are patched by selector at the bottom.

   Loaded AFTER system-ui.css, companion.css, afk-farm.css and agency.css.
   ======================================================================== */

:root {
  /* -- field / scrim ------------------------------------------------------
     Still dark: this is the wash behind a modal, and it has to sit over a
     rendered game map. Cooled toward RO's navy and lightened off pure black. */
  --sys-field:            #16233a;
  --sys-field-hi:         #223b5e;

  /* -- the blues, inverted into RO's window ------------------------------
     core was the panel centre (#1437a8) and edge was its neon rim (#1275dc).
     Now: core is the white body, edge is the titlebar's darker blue. */
  --sys-blue-core:        #ffffff;
  --sys-blue-mid:         #f5f9ff;
  --sys-blue-edge:        #b3c1dd;   /* sampled RO titlebar mid   */
  --sys-blue-lift:        #dcf1fd;   /* sampled RO titlebar light */
  --sys-blue-bright:      #eef7ff;

  /* The hairline MUST invert. On the neon kit it was the whitest thing on the
     panel; on a white panel a near-white line is invisible and the frame
     disappears entirely. */
  --sys-hairline:         #5b6b87;

  /* -- raw channels ------------------------------------------------------- */
  --sys-rgb-glow:         90 108 136;    /* neutral navy-grey. No neon.      */
  --sys-rgb-hairline:     91 107 135;    /* dark, to match the inverted line */
  --sys-rgb-glow-inner:   255 255 255;   /* light thrown inward is now white */
  --sys-rgb-lift:         179 193 221;   /* sampled RO titlebar mid          */
  --sys-rgb-accent:       31 122 52;

  /* -- accents, re-picked for legibility on white -------------------------
     The kit's green was #52db58 on near-black. The same green on white is
     roughly 1.9:1 and unreadable, so it darkens rather than being dropped —
     "the variable part is green" is the kit's whole idiom and it survives. */
  --sys-accent:           #1f7a34;
  --sys-accent-dim:       #4b8f57;
  --sys-accent-gold:      #a9791a;
  --sys-accent-red:       #c0392b;
  --sys-accent-violet:    #6b4fbb;
  --sys-accent-cyan:      #1c6fa8;

  /* -- ink inverts -------------------------------------------------------- */
  --sys-ink:              #1a2b45;
  --sys-ink-dim:          rgb(26 43 69 / 0.74);
  --sys-ink-faint:        rgb(26 43 69 / 0.50);

  /* -- glows become shadows ----------------------------------------------
     The kit stacks five outward glows to make the panel emit light. RO windows
     do not emit light; they sit on the map with a plain drop shadow. Redefined
     explicitly rather than by zeroing --sys-glow-strength, because that would
     leave the panel with no elevation at all. */
  --sys-glow-1: 0 1px 2px rgb(26 43 69 / 0.16);
  --sys-glow-2: 0 4px 10px rgb(26 43 69 / 0.14);
  --sys-glow-3: 0 12px 28px rgb(26 43 69 / 0.12);
  --sys-glow-4: none;
  --sys-glow-5: none;

  /* Was a dark inner vignette (inset 0 0 12px rgb(2 8 40 / 0.88)) designed to
     deepen a blue panel toward its centre. On white it reads as soot. */
  --sys-glow-inner-1: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --sys-glow-inner-2: inset 0 0 0 1px rgb(255 255 255 / 0.55);

  /* RO's windows are square. The kit's soft radii are pulled in a little. */
  --sys-r-panel: 3px;
  --sys-r-frame: 2px;
  --sys-r-pill:  3px;
  --sys-r-btn:   3px;

  /* RO's UI type is plain and untracked. The kit's wide letterspacing is the
     other half of what reads as "neon HUD". */
  --sys-track-title: 0.02em;
  --sys-track-meta:  0.08em;

  --sys-panel-alpha: 0.97;
  --sys-backdrop-blur: blur(2px);
}

/* ---------------------------------------------------------------------------
   SELECTORS BELOW ARE THE REAL ONES — read out of the shipped sheets, not
   guessed. A first pass at this file invented .cmp-panel / .afk-panel /
   .agc-card, none of which exist; the override silently did nothing beyond the
   token remap. The actual inventory:

     kit     .sys-window .sys-panel .sys-frame .sys-head .sys-body .sys-btn
             .sys-iconbtn .sys-chip .sys-alert .sys-toast .sys-transcript
             .sys-msg .sys-stat .sys-prose .sys-scrim .sys-panel__bloom
             .sys-panel__flash
     afk     .afk-sidebar .afk-sec .afk-rot .afk-num .afk-sel .afk-status ...
     agency  .mag-confirm .mag-facts .mag-route .mag-status ...

   The AI companion declares almost no classes of its own — it IS a .sys-window.
   ------------------------------------------------------------------------ */

/* ---- the window shell ---------------------------------------------------- */

.sys-window,
.sys-panel,
.sys-alert,
.sys-toast,
.afk-sidebar {
  background: #ffffff !important;
  border: 1px solid #5b6b87 !important;
  box-shadow: var(--sys-glow-2), var(--sys-glow-3) !important;
  color: #1a2b45 !important;
  backdrop-filter: none !important;
}

/* The kit's frame is a second inset ring that carried the neon rim. */
.sys-frame {
  border-color: #8a99b5 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- titlebar: RO's pale blue band --------------------------------------- */

.sys-head {
  background: linear-gradient(180deg, #eaf6fe 0%, #dcf1fd 45%, #b3c1dd 100%) !important;
  border-bottom: 1px solid #5b6b87 !important;
  color: #16243c !important;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.85) !important;
}

.sys-head__title { color: #16243c !important; text-shadow: none !important; }
.sys-head__icon,
.sys-head__tools { color: #2f4568 !important; }

.sys-iconbtn {
  color: #2f4568 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}
.sys-iconbtn:hover {
  background: rgb(255 255 255 / 0.7) !important;
  border-color: #8a99b5 !important;
  color: #16243c !important;
}

/* ---- body / prose -------------------------------------------------------- */

.sys-body,
.sys-prose,
.afk-body {
  background: transparent !important;
  color: #1a2b45 !important;
}

/* ---- the AI chat transcript --------------------------------------------- */

.sys-transcript { background: #ffffff !important; color: #1a2b45 !important; }
.sys-msg        { color: #1a2b45 !important; }
.sys-msg__who   { color: #2f4568 !important; text-shadow: none !important; }
.sys-msg__text  { color: #1a2b45 !important; }
.sys-typing     { color: #6b7b96 !important; }

/* The kit marks the variable part of a message with the accent. The idiom is
   kept; the colour is now readable on white. */
.sys-accent { color: var(--sys-accent) !important; text-shadow: none !important; }

/* ---- stat rows ----------------------------------------------------------- */

.sys-stat__k    { color: #55688a !important; }
.sys-stat__v    { color: #16243c !important; text-shadow: none !important; }
.sys-stat__dots { color: #b3c1dd !important; opacity: 1 !important; }

/* ---- buttons ------------------------------------------------------------- */

.sys-btn {
  background: linear-gradient(180deg, #ffffff 0%, #e9f1fb 100%) !important;
  border: 1px solid #6b7b96 !important;
  color: #16243c !important;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.8) !important;
  box-shadow: var(--sys-glow-1) !important;
}
.sys-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dcf1fd 100%) !important;
  border-color: #4a5f80 !important;
}
.sys-btn[disabled],
.sys-btn[aria-disabled="true"] { opacity: 0.5; color: #6b7b96 !important; }

/* ---- chips: the dock launchers (PORING / AFK FARM) -----------------------
   In the in-world capture these are the brightest objects on screen, a
   saturated #1d3fa7 disc. RO's own on-map controls are pale. */

.sys-chip {
  background: linear-gradient(180deg, #ffffff 0%, #dcf1fd 55%, #b3c1dd 100%) !important;
  border: 1px solid #5b6b87 !important;
  color: #16243c !important;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.8) !important;
  box-shadow: var(--sys-glow-2) !important;
}
.sys-chip:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaf6fe 55%, #c4d2ea 100%) !important;
}
.sys-chip__dot { box-shadow: none !important; filter: none !important; }
.sys-chip__badge {
  background: #c0392b !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ---- scrim behind a modal ------------------------------------------------ */

.sys-scrim {
  background: rgb(22 35 58 / 0.42) !important;
  backdrop-filter: blur(2px) !important;
}

/* ---- kill the neon signals ---------------------------------------------- */

/* These two ARE the neon: a bloom layer and a rim flash on arrival. */
.sys-panel__bloom,
.sys-panel__flash { display: none !important; }

.sys-window *,
.sys-panel *,
.afk-sidebar *,
.sys-alert *,
.sys-toast * { text-shadow: none; }

/* ---- AFK farm sidebar ---------------------------------------------------- */

.afk-sec         { border-color: #d5dced !important; }
.afk-sec__t,
.afk-sec__n      { color: #2f4568 !important; text-shadow: none !important; }
.afk-note,
.afk-why,
.afk-empty       { color: #55688a !important; }
.afk-status      { color: #16243c !important; }
.afk-live        { color: var(--sys-accent) !important; }
.afk-mini        { color: #55688a !important; }
.afk-target-name { color: #16243c !important; }

/* the two literal dark fills left in afk-farm.css (~215 and ~264) */
.afk-num input,
.afk-sel select,
.afk-rot__lv {
  background: #ffffff !important;
  border: 1px solid #7c8aa4 !important;
  color: #16243c !important;
  text-shadow: none !important;
}

.afk-rot__i {
  background: #f6f9fd !important;
  border: 1px solid #d5dced !important;
}
.afk-rot__i[data-role="unusable"] { opacity: 0.55; }

.afk-rot__n, .afk-rot__c, .afk-rot__m, .afk-rot__r { color: #2f4568 !important; }
.afk-rot__x { color: #c0392b !important; }
.afk-check  { accent-color: #4a7fc0; }

/* ---- AI agency confirm --------------------------------------------------- */

.mag-confirm {
  background: #ffffff !important;
  border: 1px solid #5b6b87 !important;
  color: #1a2b45 !important;
}

.mag-facts, .mag-count   { color: #55688a !important; }
.mag-route__from,
.mag-route__to           { color: #16243c !important; }
.mag-route__arrow        { color: #8a99b5 !important; }
.mag-warn                { color: #a9791a !important; }
.mag-status              { color: #2f4568 !important; }
.mag-status--good        { color: #1f7a34 !important; }
.mag-status--bad         { color: #c0392b !important; }
.mag-status--warn        { color: #a9791a !important; }
.mag-status--info,
.mag-status--busy        { color: #1c6fa8 !important; }
.mag-status__detail      { color: #55688a !important; }

/* ---- form controls anywhere in the overlays ------------------------------ */

.sys-root input,
.sys-root select,
.sys-root textarea {
  background: #ffffff !important;
  border: 1px solid #7c8aa4 !important;
  color: #16243c !important;
  text-shadow: none !important;
}

.sys-root input:focus,
.sys-root select:focus,
.sys-root textarea:focus {
  border-color: #4a7fc0 !important;
  outline: 2px solid rgb(74 127 192 / 0.28);
  outline-offset: 0;
}

.sys-root ::placeholder { color: #8b98ad !important; }

/* ---- scrollbars ---------------------------------------------------------- */

.sys-root ::-webkit-scrollbar       { width: 10px; }
.sys-root ::-webkit-scrollbar-track { background: #eef3fa; }
.sys-root ::-webkit-scrollbar-thumb { background: #b3c1dd; border: 1px solid #8a99b5; }


/* ---- chat bubbles --------------------------------------------------------
   system-ui.css:1003 sets .sys-msg__text background to a LITERAL
   rgb(6 18 58 / 0.42) — a dark navy at 42%, designed to sit on the neon
   panel's blue core. On a white panel it composites to a muddy grey-blue and
   is the one thing left that does not look like Ragnarok. The token remap
   cannot reach a literal, so it is restated here.

   The companion speaks in pale blue, the player in pale parchment — the same
   two families the game's own windows and chat box use.
   ------------------------------------------------------------------------ */

.sys-msg__text {
  background: #eef4fb !important;
  color: #1a2b45 !important;
  box-shadow: inset 0 0 0 1px #d5e2f2 !important;
  border-radius: 4px !important;
}

.sys-msg[data-from="you"] .sys-msg__text {
  background: #f6f3e6 !important;
  color: #16243c !important;
  box-shadow: inset 0 0 0 1px #ddd3b8 !important;
}

.sys-msg[data-from="system"] .sys-msg__text {
  background: #eef6e9 !important;
  box-shadow: inset 0 0 0 1px rgb(31 122 52 / 0.35) !important;
}

.sys-msg__who { color: #55688a !important; }
.sys-msg[data-from="system"] .sys-msg__who { color: var(--sys-accent) !important; }