/* VirtualGiant credits ring (Oct 22, owner) - see vg-credits.js.
   Oct 22 (owner): the button is see-through like LibreChat's header buttons - black text in light mode, white in dark
   mode (LibreChat puts class "dark" on <html>). The panel stays SOLID (a see-through panel let the chat show through):
   white with black text in light mode, dark navy with white text in dark mode. Fixed colours, not theme variables
   (some themes make their surfaces translucent). */
#vg-credits { position: fixed; z-index: 2147483000; display: none; font: 500 13px/1.4 system-ui, sans-serif;
  --vg-fg: #111827; --vg-dim: #4a5568; --vg-line: rgba(0, 0, 0, .22); --vg-bg: #ffffff; --vg-btn: #f2f4f8; --vg-hover: #e9f0ff;
  --vg-track: rgba(0, 0, 0, .15); --vg-note: #e3f5ee; --vg-note-fg: #14532d; color: var(--vg-fg); }
html.dark #vg-credits { --vg-fg: #ffffff; --vg-dim: #b6c0d2; --vg-line: rgba(255, 255, 255, .28); --vg-bg: #111b2d; --vg-btn: #1a2740;
  --vg-hover: #22345a; --vg-track: rgba(255, 255, 255, .22); --vg-note: #12372b; --vg-note-fg: #c9f2df; }
#vg-credits .vg-pill { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 system-ui, sans-serif; color: var(--vg-fg); background: transparent; border: 1px solid var(--vg-line); }
#vg-credits .vg-pill:hover { background: var(--vg-track); }
#vg-credits .vg-pill:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
#vg-credits .vg-track { stroke: var(--vg-track); }
#vg-credits.vg-ok .vg-fill { stroke: #2fae80; }
#vg-credits.vg-amber .vg-fill { stroke: #e09a2a; }
#vg-credits.vg-red .vg-fill { stroke: #e25555; }
#vg-credits .vg-panel { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow: auto; padding: 14px; border-radius: 12px;
  background: var(--vg-bg); color: var(--vg-fg); border: 1px solid var(--vg-line); box-shadow: 0 12px 36px rgba(0, 0, 0, .45); }
#vg-credits.vg-open .vg-panel { display: block; }
#vg-credits .vg-total { font-size: 14px; margin-bottom: 8px; }
#vg-credits .vg-total b { font-size: 22px; }
#vg-credits .vg-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--vg-dim); }
#vg-credits .vg-row b { color: var(--vg-fg); font-weight: 600; }
#vg-credits .vg-h { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-dim); }
#vg-credits .vg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#vg-credits .vg-grid button, #vg-credits .vg-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: var(--vg-fg); background: var(--vg-btn); border: 1px solid var(--vg-line); }
#vg-credits .vg-grid button:hover, #vg-credits .vg-manage:hover { border-color: #3b82f6; background: var(--vg-hover); }
#vg-credits .vg-grid button span { font-size: 11px; color: var(--vg-dim); }
#vg-credits .vg-manage { width: 100%; margin-top: 10px; align-items: center; font-weight: 600; }
#vg-credits .vg-note { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; background: var(--vg-note); color: var(--vg-note-fg); font-weight: 600; }
#vg-credits .vg-fine { margin-top: 10px; font-size: 11px; color: var(--vg-dim); }
#vg-credits button:disabled { opacity: .6; cursor: progress; }
/* Oct 22 (owner): in the top header next to "Add multi-conversation" - in the flow, panel opens below */
#vg-credits.vg-head { position: relative; flex-shrink: 0; margin-left: 4px; vertical-align: middle; }
#vg-credits.vg-head .vg-pill { height: 36px; padding: 3px 12px 3px 7px; }
#vg-credits.vg-head .vg-panel { bottom: auto; top: calc(100% + 8px); left: 0; right: auto; }