:root{
  --bg: #0a0f1e;
  --grid: rgba(0, 229, 255, .08);
  --panel: #0f1529;
  --panel-2: #121a34;
  --text: #e5f0ff;
  --muted: #a5b4d6;
  --accent: #00e5ff;
  --accent-2: #a855f7;
  --danger: #ff3d71;
  --success: #00ffa2;
  --chip-bg: #121a34;
  --glow: 0 0 12px rgba(0,229,255,.35), 0 0 28px rgba(168,85,247,.2);
}

body.theme-synthwave, :root{
  --gg-bg0:#07060C; --gg-bg1:#0C0F1E; --gg-bg2:#121735;
  --gg-border:#2C2F5C;
  --gg-text:#F3F6FF; --gg-muted:#95A0D8;
  --gg-accent:#FF2BD6;     /* hot magenta */
  --gg-accent-2:#00E5FF;   /* electric cyan */
  --gg-warn:#FF3B6E;

  /* glow/alpha helpers */
  --gg-accent-border: rgba(255,43,214,.42);
  --gg-accent-soft:   rgba(255,43,214,.10);
  --gg-accent-glow:   rgba(255,43,214,.22);
  --gg-accent2-border:rgba(0,229,255,.38);
  --gg-accent2-soft:  rgba(0,229,255,.10);
  --gg-accent2-glow:  rgba(0,229,255,.20);

  /* background flares */
  --gg-glow1: rgba(255,43,214,.26);
  --gg-glow2: rgba(0,229,255,.18);
}

body.theme-cyberlime{
  --gg-bg0:#05070A; --gg-bg1:#071018; --gg-bg2:#0C1620;
  --gg-border:#1C2E2A;
  --gg-text:#EAF7FF; --gg-muted:#89A9B8;
  --gg-accent:#39FF14;     /* neon lime */
  --gg-accent-2:#00B3FF;   /* electric blue */
  --gg-warn:#FF4D76;

  --gg-accent-border: rgba(57,255,20,.40);
  --gg-accent-soft:   rgba(57,255,20,.10);
  --gg-accent-glow:   rgba(57,255,20,.22);
  --gg-accent2-border:rgba(0,179,255,.38);
  --gg-accent2-soft:  rgba(0,179,255,.10);
  --gg-accent2-glow:  rgba(0,179,255,.20);

  --gg-glow1: rgba(57,255,20,.22);
  --gg-glow2: rgba(0,179,255,.18);
}


body.theme-inferno{
  --gg-bg0:#0B090C; --gg-bg1:#13101A; --gg-bg2:#1A1426;
  --gg-border:#3B2A3E;
  --gg-text:#FDEFFE; --gg-muted:#C5A7C9;
  --gg-accent:#FF6A00;     /* inferno orange */
  --gg-accent-2:#FF1F77;   /* hot pink */
  --gg-warn:#FFD000;

  --gg-accent-border: rgba(255,106,0,.42);
  --gg-accent-soft:   rgba(255,106,0,.10);
  --gg-accent-glow:   rgba(255,106,0,.24);
  --gg-accent2-border:rgba(255,31,119,.40);
  --gg-accent2-soft:  rgba(255,31,119,.10);
  --gg-accent2-glow:  rgba(255,31,119,.20);

  --gg-glow1: rgba(255,106,0,.24);
  --gg-glow2: rgba(255,31,119,.18);
}

body.theme-crt{
  --gg-bg0:#000405; --gg-bg1:#030A0A; --gg-bg2:#051012;
  --gg-border:#0F2A20;
  --gg-text:#D7FFE2; --gg-muted:#7ED4A0;
  --gg-accent:#00FF88;     /* acid mint */
  --gg-accent-2:#00FF3C;   /* neon green */
  --gg-warn:#FF4D4D;

  --gg-accent-border: rgba(0,255,136,.42);
  --gg-accent-soft:   rgba(0,255,136,.10);
  --gg-accent-glow:   rgba(0,255,136,.22);
  --gg-accent2-border:rgba(0,255,60,.40);
  --gg-accent2-soft:  rgba(0,255,60,.10);
  --gg-accent2-glow:  rgba(0,255,60,.18);

  --gg-glow1: rgba(0,255,136,.22);
  --gg-glow2: rgba(0,255,60,.16);
}


* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, rgba(168,85,247,.18), transparent),
              radial-gradient(1000px 600px at 10% 110%, rgba(0,229,255,.12), transparent),
              var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  overflow: hidden;
}

/* Neon grid background */
.gg-grid {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.9), rgba(0,0,0,.1) 70%, transparent 85%);
  animation: ggGridShift 18s linear infinite;
}
@keyframes ggGridShift { from { background-position: 0 0, 0 0; } to { background-position: 40px 40px, 40px 40px; } }

/* Generic page shells */
.gg-page { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; }
.gg-center { min-height: 100dvh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.gg-card {
  width: min(640px, 94%); background: var(--panel-2);
  border:1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px;
  box-shadow: var(--glow); text-align:center;
}

/* Topbar */
.gg-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.gg-brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px; text-shadow: 0 0 6px rgba(0,229,255,.35); }
.gg-logo { width:26px; height:26px; border-radius:6px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%), radial-gradient(circle at 70% 70%, var(--accent-2), transparent 60%), #0b1226; box-shadow: var(--glow); }

.gg-actions { display:flex; align-items:center; gap:8px; }
.gg-chip {
  padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius:999px;
  background: var(--chip-bg); color: var(--text); font-size: 12px; user-select:none;
}

.gg-meter { --pct:0%; width: 130px; height: 10px; border-radius: 999px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.gg-meter > i { position:absolute; inset:0; width:var(--pct); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }

/* Buttons */
.gg-btn {
  border: 1px solid rgba(255,255,255,.15); border-radius:10px;
  background: linear-gradient(180deg, #101934, #0c142a);
  color: var(--text); padding: 8px 12px; cursor:pointer; font-weight:700;
  box-shadow: 0 0 0 0 rgba(0,229,255,0); transition: box-shadow .2s, transform .05s;
}
.gg-btn:hover { box-shadow: var(--glow); }
.gg-btn:active { transform: translateY(1px); }
.gg-btn-primary { border-color: transparent; background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(168,85,247,.18)); }
.gg-btn-danger  { background: linear-gradient(90deg, rgba(255,61,113,.18), rgba(168,85,247,.18)); }

/* Character chips bar */
.gg-charbar {
  padding: 8px 12px; display:flex; gap:8px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gg-char {
  padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px;
  background:#0e1630; cursor:pointer; user-select:none; font-size:13px; color:var(--text);
  transition: transform .05s, box-shadow .2s;
}
.gg-char:hover { box-shadow: var(--glow); }
.gg-char:active { transform: translateY(1px); }
.gg-char.active { border-color: var(--accent); box-shadow: var(--glow); }

/* Chat area */
.gg-chat { display:flex; flex-direction:column; overflow-y:auto; padding:14px; gap:6px; }
.gg-msg {
  max-width:72%; padding:12px 14px; border-radius:12px; line-height:1.45;
  background:#0e1630; border:1px solid rgba(255,255,255,.12); color:var(--text);
}
.gg-me { align-self:flex-end; background:#10203b; }
.gg-ai { align-self:flex-start; }
.gg-msg strong.gg-author { display:inline-block; margin-bottom:4px; color: var(--accent); }
.gg-msg small { color: var(--muted); }
.gg-msg a { color: var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent);}
.gg-msg a:hover { text-decoration:underline; }

/* Composer */
.gg-composer {
  display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.gg-input {
  flex:1; display:flex; align-items:center; gap:8px;
  background: var(--panel); border:1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
#inputLine { flex:1; background:transparent; color:var(--text); border:none; outline:none; font-size:16px; }

/* Modal */
.gg-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(6,9,20,.75); }
.gg-modal.show { display:flex; }
.gg-dialog {
  width: min(560px, 92%); background: var(--panel-2); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:18px; box-shadow: var(--glow);
}
.gg-dialog h2 { margin:0 0 6px 0; }
.gg-dialog p { color: var(--muted); margin:6px 0; }
.gg-features { display:grid; grid-template-columns: 1fr 1fr; gap:6px 14px; margin:10px 0 14px; }
.gg-features li { list-style:"✔  "; color: var(--text); }

/* Spinner (shared) */
.gg-spinner {
  width:46px; height:46px; border-radius:50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: ggSpin 1s linear infinite; margin: 0 auto 12px;
}
@keyframes ggSpin { to { transform: rotate(360deg); } }

/* Toast */
.gg-toast {
  position: fixed; right: 12px; bottom: 12px; max-width: 60ch;
  background: #101934; color: var(--text); border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 10px 12px; box-shadow: var(--glow);
  z-index: 9999; opacity: 0; transform: translateY(12px); transition: opacity .15s, transform .15s;
}
.gg-toast.show { opacity: 1; transform: translateY(0); }

/* Mobile tweaks */
@media (max-width: 720px){
  .gg-msg { max-width: 86%; }
  .gg-features { grid-template-columns: 1fr; }
}

/* ==== Hotfix: Composer sizing (put at END of gameguide.css) ==== */
:root { --composer-h: 44px; }               /* desktop/tablet */
@media (max-width: 480px){ :root { --composer-h: 50px; } }  /* mobile */

.gg-composer{ gap:8px; align-items:center; } /* make row items align to center, not stretch */

.gg-input{
  flex:1; display:flex; align-items:center; min-width:0;   /* prevent stretch + text overflow */
}

.gg-input input{
  height: var(--composer-h);                 /* hard cap height */
  min-height: 0;                             /* flexbox quirk fix */
  padding: 0 14px;                           /* remove vertical padding so height is exact */
  border-radius:12px;
  font-size:16px; line-height:1;             /* iOS: avoid zoom + normalize vertical centering */
  -webkit-appearance:none; appearance:none;  /* cross‑browser consistency */
}

.gg-btn{
  height: var(--composer-h);
  padding: 0 14px;                           /* match input height */
  display:inline-grid; place-items:center;   /* vertical centering of text/icon */
}

/* ==== Layout fix: pin composer to bottom; chat fills leftover ==== */
.gg-page{
  /* Fill the viewport reliably on mobile/desktop */
  height: 100vh;           /* fallback */
  height: 100svh;          /* small viewport units */
  height: 100dvh;          /* dynamic viewport units */
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* ensure only .gg-chat scrolls */
}

/* Override the earlier fixed height/min-height */
.gg-chat{
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;  /* critical for Safari/Firefox flex overflow */
  overflow: auto;
  /* keep your existing padding/border/radius/background as-is */
}

/* Composer already sized; just keep it at the bottom with the flex layout */
.gg-composer{ margin-top: 12px; }

/* Keep the palette FAB above safe areas */
.gg-fab{ bottom: max(16px, env(safe-area-inset-bottom)); }


/* ===== Theme hook: use variables for glow/border colors ===== */
.gg-msg.gg-ai{
  border:1px solid var(--gg-accent-border, rgba(106,92,255,.35));
  background:linear-gradient(180deg, var(--gg-accent-soft, rgba(106,92,255,.08)), rgba(255,255,255,.03));
  box-shadow:0 10px 28px var(--gg-accent-glow, rgba(106,92,255,.18));
}
.gg-msg.gg-me{
  border:1px solid var(--gg-accent2-border, rgba(38,224,160,.35));
  background:linear-gradient(180deg, var(--gg-accent2-soft, rgba(38,224,160,.08)), rgba(255,255,255,.03));
  box-shadow:0 10px 28px var(--gg-accent2-glow, rgba(38,224,160,.18));
}
.gg-meter i{
  background:linear-gradient(90deg, var(--gg-accent), var(--gg-accent-2));
}
.gg-logo{
  background:conic-gradient(from 0deg, var(--gg-accent), var(--gg-accent-2), var(--gg-accent));
  box-shadow:0 0 16px color-mix(in srgb, var(--gg-accent) 55%, transparent),
             inset 0 0 8px color-mix(in srgb, var(--gg-accent-2) 35%, transparent);
}
.gg-grid{
  background:
    radial-gradient(1200px 700px at 70% -10%, var(--gg-glow1, rgba(106,92,255,.28)), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, var(--gg-glow2, rgba(38,224,160,.18)), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--gg-bg2) 92%, black), var(--gg-bg0));
}

/* ==== Neutralize text + labels; stop UA link blue ==== */

/* Use neutral off‑whites (no blue cast) for body text & labels */
:root{
  --gg-text:  #F2F4F5; /* neutral off-white */
  --gg-muted: #9AA3AE; /* neutral gray for author labels, chips */
  --gg-link:  var(--gg-accent); /* links follow your accent by default */
}

/* If a theme set bluish values earlier, pin neutrals here */
body[class*="theme-"]{
  --gg-text:  #F2F4F5;
  --gg-muted: #9AA3AE;
}

/* Make sure all primary surfaces inherit neutral text */
body, .gg-msg, .gg-dialog, .gg-topbar, .gg-composer, .gg-chip { color: var(--gg-text); }

/* Author label and any small muted text */
.gg-msg .gg-author,
.gg-muted { color: var(--gg-muted) !important; }

/* Links: override browser default blue/purple */
.gg-msg a, .gg-dialog a {
  color: var(--gg-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
.gg-msg a:hover, .gg-dialog a:hover { text-decoration-color: currentColor; }
.gg-msg a:visited, .gg-dialog a:visited { color: var(--gg-link); }

/* Synthwave */
body.theme-synthwave { --gg-text:#F8FAFC; --gg-muted:#B8C2D9; }
/* Cyber Lime */
body.theme-cyberlime { --gg-text:#F5FAFF; --gg-muted:#A7B3BF; }
/* Inferno (warmer) */
body.theme-inferno   { --gg-text:#FFF7F3; --gg-muted:#D7C1C9; }
/* CRT Matrix (green UI, neutral text) */
body.theme-crt       { --gg-text:#E8FFF0; --gg-muted:#A7D9BA; }

/* Ensure the HTML [hidden] attribute wins over any display rules */
[hidden] { display: none !important; }

/* Add to CSS */
#charLabel {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}