/* ===============================
   style2.overrides.css (cleaned)
   - mobile sidebar/backdrop fixed & unified
   - removed duplicate blocks and conflicting z-indexes
   - kept your visual polish and responsive rules
   =============================== */

/* ---------- Theme variables ---------- */
:root{
  --bg: #0a0a0a;
  --card: #141218;
  --muted: #9b95a8;
  --accent: #8c38d1;
  --accent-2: #b66dff;
  --panel-border: rgba(255,255,255,0.04);
  --text: #e9e9ee;
  --control-h: 56px;
  --max-width: 980px;
  --gap-main: 12px;
  --top-offset: 72px; /* header height + comfortable gap */
}

/* global safety */
* { box-sizing: border-box; }
:root { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* ---------- Layout container ---------- */
.page-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 20px;
  box-sizing:border-box;
}

/* center card using card surface from style2 */
.center-ui.card-surface {
  width:100%;
  max-width: var(--max-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 14px;
  padding: 26px;
  color: var(--text);
  box-shadow: 0 18px 50px rgba(140,56,209,0.10);
  border: 1px solid var(--panel-border);
  display:flex;
  flex-direction:column;
  gap:var(--gap-main);
  box-sizing:border-box;
}

/* Title & subtitle */
#gen-title { font-size:1.45rem; margin:0; font-weight:700; color:var(--text); }
.center-ui p { margin:0; color:var(--muted); font-size:0.95rem; }

/* Top mode buttons */
.modes { display:flex; gap:10px; justify-content:center; align-items:center; margin-top:6px; }
.mode-btn {
  padding:8px 14px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.03);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.mode-btn.active {
  background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#fff;
  box-shadow: 0 12px 36px rgba(140,56,209,0.12);
  transform: translateY(-2px);
}

/* ---------- Prompt area ---------- */
.prompt-wrap { width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }

/* TEXTAREA: long & sleek */
textarea.prompt {
  width:100%;
  max-width: calc(var(--max-width) - 28px);
  min-height: 56px;
  height: 56px;
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1.2;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 28px rgba(0,0,0,0.55);
  resize: vertical;
  overflow-x: auto;
  margin-bottom: 8px;
  transition: box-shadow .12s ease, border-color .12s ease;
}
textarea.prompt:focus {
  box-shadow: 0 12px 36px rgba(140,56,209,0.12);
  border-color: rgba(166,77,255,0.16);
}
textarea.prompt::placeholder { color:#8e98a0; }

/* ---------- Controls layout ---------- */
.controls {
  width:100%;
  max-width: calc(var(--max-width) - 28px);
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr minmax(120px, 260px);
  align-items: center;
  gap: 12px;
  height: var(--control-h);
  margin-top:4px;
  box-sizing:border-box;
}

/* SELECT styling with dropdown arrow */
select.format {
  width:100%;
  height:44px;
  padding:10px 36px 10px 12px;
  border-radius:10px;
  background: linear-gradient(180deg,#0f0f12,#141217);
  color: #f1f1f5;
  border: 1px solid rgba(255,255,255,0.03);
  font-weight:700;
  font-size:0.95rem;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  cursor:pointer;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23bfb7ff' d='M5 7l5 5 5-5z'/></svg>"),
    linear-gradient(180deg,#0f0f12,#141217);
  background-repeat: no-repeat, repeat;
  background-position: right 12px center, 0 0;
  background-size: 14px 14px, auto;
  transition: box-shadow .12s ease, transform .06s ease;
}
select.format:hover { transform: translateY(-1px); }
select.format:focus { outline: none; box-shadow: 0 12px 36px rgba(140,56,209,0.12); border-color: rgba(166,77,255,0.18); }
select.format option { background:#0f0f12; color:#fff; }

/* Generate button */
.generate {
  height:48px;
  padding: 10px 30px;
  border-radius: 12px;
  background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color: #fff;
  font-weight:900;
  font-size:1.05rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 20px 48px rgba(140,56,209,0.14), 0 6px 22px rgba(0,0,0,0.28);
  justify-self: center;
  align-self: center;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.generate:active { transform: translateY(1px); filter:brightness(.98); }
.generate:hover { box-shadow: 0 26px 64px rgba(140,56,209,0.18); }
.generate::after {
  content: "✦";
  display:inline-block;
  font-size:0.92rem;
  line-height:1;
  color: #fff9d6;
  text-shadow: 0 4px 12px rgba(182,109,255,0.18);
  transform: translateY(-1px);
  opacity:0.95;
}

/* ---------- Format description ---------- */
.format-desc {
  width:100%;
  max-width: calc(var(--max-width) - 28px);
  overflow:hidden;
  transition: max-height .32s cubic-bezier(.2,.9,.3,1), opacity .22s ease, padding .22s ease;
  max-height: 0;
  opacity: 0;
  border-radius: 10px;
  padding: 0 12px;
  box-sizing:border-box;
}
.format-desc.open {
  max-height: 260px;
  opacity: 1;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.03);
}

/* ---------- Result area ---------- */
.result { width:100%; max-width: calc(var(--max-width) - 28px); margin-top:6px; }
.result .box {
  padding:12px;
  border-radius:10px;
  background: linear-gradient(180deg,#171718,#121212);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.box.error { border-color: rgba(255,80,80,0.12); background: linear-gradient(180deg,#2c1414,#200b0b); color:#ffbdbd; }

/* ---------- Loading overlay (consistent) ---------- */
#hh-loading-overlay {
  position: fixed; left:0; top:0; right:0; bottom:0;
  display:none; align-items:center; justify-content:center; z-index:9999;
  padding:18px; box-sizing:border-box;
  backdrop-filter: blur(6px) saturate(120%);
  background: rgba(6,7,10,0.64);
  pointer-events:none;
}
#hh-loading-overlay.hh-active { display:flex !important; pointer-events:auto; opacity:1; }

/* ---------- Sidebar base ---------- */
.slim-sidebar { position: fixed; left:14px; top:92px; z-index:1400; display:flex; flex-direction:column; gap:10px; align-items:center; }

/* ---------- Prompting overrides – width + inputs ---------- */
.format {
  width: 100% !important;
  max-width: 600px !important;
  padding: 10px 14px;
  border-radius: 10px;
  background: #161616;
  border: 1px solid #333;
  color: #eee;
  appearance: none;
  position: relative;
}
.format::after {
  content: "▾";
  position: absolute;
  right: 14px;
  pointer-events: none;
  color: #aaa;
}
.prompt {
  width: 100% !important;
  max-width: 600px !important;
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #161616;
  color: #eee;
  resize: vertical;
  margin-top: 6px;
}

/* Generate Button more prominent */
.generate-btn {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 12px;
  background: linear-gradient(90deg,#a855f7,#7c3aed);
  color: white;
  border: none;
  cursor: pointer;
  position: relative;
}
.generate-btn::before {
  content: "✨";
  margin-right: 6px;
}

/* ---------- Force full width inputs inside center card ---------- */
.center-ui.card-surface {
  max-width: 980px !important;
  width: 100% !important;
  box-sizing: border-box;
}
.center-ui.card-surface .prompt-wrap,
.center-ui.card-surface .controls {
  width: 100% !important;
  max-width: 920px !important;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.center-ui.card-surface select.format,
.center-ui.card-surface textarea.prompt,
.center-ui.card-surface .format,
.center-ui.card-surface .prompt {
  width: 100% !important;
  max-width: 920px !important;
  box-sizing: border-box;
}
.center-ui.card-surface textarea.prompt {
  white-space: normal !important;
  overflow-x: auto;
}
.center-ui.card-surface .controls {
  grid-template-columns: minmax(260px, 360px) 1fr minmax(120px, 260px) !important;
  gap: 12px;
}

/* ===== Fix: Top bar / page spacing + title size improvements ===== */
.top-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1600;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(10,8,12,0.96), rgba(10,8,12,0.88));
  backdrop-filter: saturate(120%) blur(6px);
}
body { padding-top: calc(var(--top-offset,72px)); }

/* Slightly larger main title in center card */
#mainTitle { font-size: 1.6rem !important; font-weight: 800; margin-top: 4px; }
.center-ui.card-surface .subtitle { margin-top: 4px; font-size: 0.98rem; }

/* ----------------------
   Mobile + responsive blocks
   unified and conflict-free
   ---------------------- */

/* GENERAL mobile adjustments (<= 980px) */

/* SMALLER mobile fallback (<= 760 / <= 640) */
@media (max-width:760px) {
  .center-ui.card-surface { padding:16px; border-radius:12px; gap:10px; }
  textarea.prompt { min-height:80px; height:auto; white-space:normal; overflow-x:auto; }
  .controls { grid-template-columns: 1fr; gap:10px; height: auto; align-items: stretch; }
  select.format { padding:10px 12px; }
  .generate { width:100%; justify-self: stretch; font-size:1rem; }
}
@media (max-width:640px) {
  .plans { grid-template-columns: 1fr; }
  .center-ui.card-surface { padding:16px; }
}

/* VERY SMALL phones */
@media (max-width:420px) {
  .prompt { min-height: 120px; padding: 12px; font-size: 0.98rem; }
  .center-ui { padding: 14px; margin: 10px; }
  .controls .generate { padding: 12px; font-size: 1rem; }
}

/* Accessibility focus */
textarea.prompt:focus, select.format:focus, .generate:focus, .mode-btn:focus {
  outline: none;
  box-shadow: 0 10px 30px rgba(140,56,209,0.12);
  border-color: rgba(166,77,255,0.14);
}

/* keep auth controls on top */
#auth-controls {
  position: fixed !important;
  right: 18px !important;
  top: 12px !important;
  z-index: 200000 !important;
  display: flex !important;
  gap: 8px;
  align-items: center;
}

/* ensure controls grid fallback (non-overwritten) */
.controls {
  width:100%;
  max-width: calc(var(--max-width, 980px) - 28px);
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr minmax(120px, 260px);
  align-items: center;
  gap: 12px;
  height: var(--control-h, 56px);
  margin-top: 12px;
  box-sizing: border-box;
}

/* final defensive: ensure mobile-toggle hidden on desktop */
@media (min-width: 981px) {
  .mobile-toggle { display: none !important; }
  .mobile-sidebar-backdrop { display: none !important; }
}

/* ============================
   MOBILE UX TUNING (sidebar + loading)
   Drop-in override — paste at EOF of style2.overrides.css
   ============================ */

/* Sidebar: smoother motion + tighter spacing for mobile */

/* Loading overlay: mobile-friendly layout and text wrapping */
#hh-loading-overlay .hh-loader-wrap {
  width: min(760px, 92%);
  max-width: 92%;
  padding: 18px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* wrap long text and scale sizes on small screens */
@media (max-width: 720px) {
  #hh-loading-overlay .hh-loader-wrap {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    align-items: center;
    text-align: center;
  }

  /* orb centered above text */
  #hh-loading-overlay .hh-orb { margin: 0 auto; }

  /* make heading/text wrap nicely and be slightly smaller */
  #hh-loading-overlay .hh-loader-title {
    font-size: 1rem;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
  }
  #hh-loading-overlay .hh-loader-sub,
  #hh-loading-overlay .hh-loader-hint {
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }

  /* ribbons/particles: reduce visual footprint on mobile */
  .hh-ribbon, .hh-ribbon.r2, .hh-ribbon.r3 { display: none; }
  .hh-dot { display: none; }
}

/* small safeguard for very narrow screens so the loader never overflows */
@media (max-width: 420px) {
  #hh-loading-overlay .hh-loader-wrap { padding: 12px; }
  #hh-loading-overlay .hh-loader-sub, #hh-loading-overlay .hh-loader-hint { font-size: 0.88rem; }
}

/* A tiny performance/visual polish: prefer transform transitions */
.slm-transition {
  transition: transform .36s cubic-bezier(.18,.84,.32,1), opacity .28s ease;
}

/* ============================
   Mobile final fixes — paste at EOF
   ============================ */
@media (max-width: 980px) {
  /* Prevent horizontal scroll caused by overflow elements */
  html, body { overflow-x: hidden !important; width: 100% !important; }

  /* Ensure sr-only truly hidden (restore if other CSS overwrote it) */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Ensure the mobile toggle shows only the icon (hide any accidental text) */

  /* Main containers must never exceed viewport width */
  .container, .page-wrap, main, section, .center-ui.card-surface {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Controls => single column on mobile; prevent children from forcing width */
  .controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
  }
  .controls > * { min-width: 0 !important; }

  /* Inputs/Textareas/Selects fit the viewport */
  input, textarea, select, .format, .prompt, textarea.prompt, select.format {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  /* Make generate buttons full width and non-floating */
  .generate, .generate-btn {
    width: 100% !important;
    display: inline-flex !important;
    justify-self: stretch !important;
    align-items: center !important;
    position: static !important;
    right: auto !important;
    margin: 0 !important;
  }

  /* Prompt comfortable height */
  .prompt { min-height: 120px !important; line-height: 1.35 !important; }

  /* Center card smaller padding on phones */
  .center-ui.card-surface { padding: 12px !important; border-radius: 12px !important; }

  /* Sidebar: ensure we remove the desktop 'left' and use right-based mobile behaviour */
  .slim-sidebar, .slm-sidebar {
    left: auto !important;
    right: 10px !important;
    top: calc(var(--top-offset,72px) + 6px) !important;
    width: 64px !important;
    max-width: 64px !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
  }
  body.mobile-sidebar-open .slim-sidebar {
    right: 12px !important;
    width: min(72vw, 300px) !important;
    max-width: 72vw !important;
  }

  /* Backdrop stacking so sidebar remains usable */
  .mobile-sidebar-backdrop { z-index: 1720 !important; }

  /* Media: images/videos adapt to available width */
  img, video { max-width: 100% !important; height: auto !important; display: block !important; }

  /* Clean up possible leftover offsets */
  .card, .card-media { margin-left: 0 !important; margin-right: 0 !important; }
  body { padding-top: calc(var(--top-offset,72px) + 6px) !important; }
}

/* tiny device polishes */
@media (max-width: 420px) {
  .center-ui.card-surface { padding: 10px !important; }
  .generate, .generate-btn { width: 100% !important; }
  .prompt { min-height: 110px !important; }
}

/* === Tiny final mobile fixes (paste at EOF) === */
@media (max-width: 980px) {
  /* 1) Sidebar: komplett unsichtbar/kein Platzverbrauch, bis body.mobile-sidebar-open gesetzt wird */
  /* 2) Controls / Inputs: verhindern, dass Kinder die Breite sprengen */
  .controls {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .controls > * {
    min-width: 0 !important;      /* sehr wichtig damit Grid-Items schrumpfen können */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Select / .format: mehr Platz rechts für das Pfeil-Icon, verhindert horizontales Ragen */
  select.format,
  .format {
    padding-right: 44px !important; /* statt 36px, sichert Platz für das Icon */
    box-sizing: border-box !important;
  }

  /* Defensive: stellen sicher, dass Media/Thumbnails nie breiter als Viewport sind */
  img, video { max-width: 100% !important; height: auto !important; display: block !important; }

  /* Mobile-toggle sichtbar und kompakt (keine Textlecks) */
  .mobile-toggle { display:inline-flex !important; font-size:0 !important; line-height:0 !important; }
  .mobile-toggle svg { width: 20px !important; height: 14px !important; display:block !important; }
}

/* ---------- micro mobile fixes: sidebar toggle + safe inputs ---------- */
@media (max-width: 980px) {
  /* Icon-only toggle */

  /* Controls and children: prevent grid children from forcing width */
  .controls {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .controls > * {
    min-width: 0 !important;     /* CRUCIAL: allows items to shrink */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Give the select a bit more right padding so arrow won't overflow */
  select.format,
  .format { padding-right: 48px !important; box-sizing: border-box !important; }

  /* Defensive: never overflow viewport for medias */
  img, video { max-width: 100% !important; height: auto !important; display: block !important; }
}

/* ====== Tiny final fixes: stack controls, fix overflow, make Generate prominent ====== */
@media (max-width: 980px) {
  /* Force controls to stack vertically on mobile (select above button) */
  .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Ensure children shrink and never force horizontal overflow */
  .controls > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Ensure select is first, generate button second */
  .controls select.format { order: 1 !important; }
  .controls .format { order: 1 !important; }
  .controls .generate, .controls .generate-btn { order: 2 !important; }

  /* Make Generate a real, prominent button on mobile (and remove tiny pseudo glyph) */
  .generate, .generate-btn {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 1.06rem !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg,#b66dff,#8c38d1) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 22px 46px rgba(140,56,209,0.20) !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important; /* prevent floating / absolute */
    right: auto !important;
    margin: 0 !important;
  }
  .generate::after, .generate-btn::before { display: none !important; } /* hide decorative tiny glyphs */

  /* Fix prompt / select padding so arrow/icon doesn't cause overflow */
  textarea.prompt, select.format, .format {
    padding-left: 12px !important;
    padding-right: 44px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Defensive: prevent any horizontal scroll / slight left overflow */
  html, body, .page-wrap, .center-ui.card-surface, main, section {
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure no leftover margin/padding pushes elements off-screen */
  .controls { margin-left: 0 !important; margin-right: 0 !important; }

  /* Sidebar: keep hidden until toggle shows it, and when open allow wrapping for long labels */
  body.mobile-sidebar-open .slim-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    right: 12px !important;
    width: min(78vw, 320px) !important;
    max-width: 78vw !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
  }

  /* Long sidebar labels: allow wrapping / break so they never hang off the screen */
  body.mobile-sidebar-open .slim-sidebar .nav-item .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: calc(78vw - 120px) !important;
    display: inline-block !important;
  }

  /* Media: ensure images/videos never overflow */
  img, video { max-width: 100% !important; height: auto !important; display: block !important; }
}

/* ====== Mobile final micro-fixes (paste at EOF) ====== */
/* Applies only on mobile width where you had issues */
@media (max-width: 980px) {
  /* absolutely prevent horizontal scrolling */
  html, body { overflow-x: hidden !important; width: 100% !important; }

  /* Make the controls stack vertically: select above button, everything fits */
  .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  /* Ensure children can shrink and never overflow the grid/container */
  .controls > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* safer padding for inputs/select so arrow glyph won't cause overflow */
  select.format, .format, textarea.prompt {
    padding-right: 48px !important;
    padding-left: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make generate button a full-width, prominent CTA on mobile */
  .generate, .generate-btn {
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    font-size: 1.06rem !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg,#b66dff,#8c38d1) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 22px 46px rgba(140,56,209,0.20) !important;
    position: static !important; /* avoid absolute/fixed elsewhere */
    right: auto !important;
    margin: 0 !important;
  }
  /* remove tiny decorative glyphs that made it look like a dot */
  .generate::after, .generate-btn::before { display: none !important; }

  /* Defensive: make sure page containers never grow beyond viewport */
  .page-wrap, .center-ui.card-surface, .container, main, section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Sidebar hidden by default on small screens (no layout shift)
     Only shown when body.mobile-sidebar-open is present (JS toggles that). */
  #slimSidebar, .slim-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(6px) !important;
    right: auto !important;
    max-width: 72vw !important;
  }

  /* When JS toggles body.mobile-sidebar-open -> show sidebar nicely */
  body.mobile-sidebar-open #slimSidebar,
  body.mobile-sidebar-open .slim-sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    right: 12px !important;
    width: min(78vw, 320px) !important;
    max-width: 78vw !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: auto !important;
  }

  /* When sidebar is open, make labels readable (wrap if needed) */
  body.mobile-sidebar-open #slimSidebar .nav-item .label,
  body.mobile-sidebar-open .slim-sidebar .nav-item .label {
    display: inline-block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: calc(78vw - 120px) !important;
  }

  /* If sidebar remains collapsed (no open class), hide labels to avoid overflow */

  /* Extra safeguard: long labels in open state get ellipsis if still too long */
  body.mobile-sidebar-open #slimSidebar .nav-item .label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Fix: in other pages where .generate was absolutely placed to bottom right,
     force mobile to use static positioning (prevents "right-bottom" bug) */
  .generate[style], .generate { position: static !important; bottom: auto !important; right: auto !important; }
}

/* Dezenter Button oben links */
/* Dezenter Button oben links */
.ai-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;   /* feste Größe */
  height: 42px;  /* feste Größe */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  overflow: hidden;   /* verhindert dass das Bild größer zieht */
}

.ai-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.ai-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}

.ai-btn:active {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(0.95);
}

/* Floating Bar für Mobile */
@media (max-width: 760px) {
  .floating-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(0, 0, 0, 0.35); /* oder rgba(255,255,255,0.15) je nach Theme */
    backdrop-filter: blur(6px);
    z-index: 1500; /* hinter Buttons aber über Content */
  }

  .ai-btn,
  .mobile-toggle,
  .auth-buttons {
    z-index: 2000; /* über der Bar */
  }
}

@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0.6; transform: scale(1); }
}

.loading-screen {
  animation: pulse 1.5s infinite ease-in-out;
  will-change: transform, opacity;
}

@media (max-width: 760px) {
  .loading-screen {
    animation-play-state: running !important;
  }
}

/* hh credits small styling */
#hh-credits-wrap { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#hh-credits { color: #fff; background: linear-gradient(90deg,#7c3aed,#b66dff); padding:4px 8px; border-radius:8px; font-size:0.95rem; }
@media (max-width: 760px) {
  #hh-credits-wrap { font-size:0.92rem; }
  #hh-credits { padding:6px 10px; border-radius:10px; }
}

/* ---------- HH remaining badge (header + small responsive tweaks) ---------- */
.hh-user-remaining {
  display: inline-block;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(180deg,#6f3be6,#8c38d1);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  line-height: 1;
  cursor: default;
  box-shadow: 0 8px 26px rgba(140,56,209,0.08);
  margin-left: 8px;
  white-space: nowrap;
}

/* zero-state (upgrade CTA) */
.hh-user-remaining.hh-zero {
  background: linear-gradient(180deg,#3a0b0b,#6b1f1f);
  color: #ffe6e6;
  border-color: rgba(255,80,80,0.14);
  cursor: pointer;
}

/* small/mobile adjustments so the badge never overflows */
@media (max-width: 720px) {
  .hh-user-remaining {
    font-size: 0.9rem;
    padding: 5px 8px;
    min-width: 54px;
    margin-left: 6px;
  }
  #hh-credits-wrap { flex-wrap: wrap; gap:6px; align-items:center; justify-content:center; }
  #hh-credits { font-weight:800; white-space:normal; word-break:break-word; }
}

/* ensure visual credits area is compact on mobile */
#hh-credits-wrap { display:flex; align-items:center; gap:10px; }
#hh-credits-wrap .hint { display:flex; align-items:center; gap:8px; color:var(--muted); }

/* ---------- NEW: nicer loader + centered generate button ---------- */
/* Paste this at the END of style.css to override the older spinner/button styles */

/* Accessible prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .spinner::after,
  .spinner::before {
    animation: none !important;
  }
}

/* Big decorative conic spinner with inner mask + glowing pulse */
.spinner {
  width: 84px;
  height: 84px;
  margin: 22px auto;
  border-radius: 50%;
  position: relative;
  /* color uses existing accent var if present; fallbacks included */
  background: conic-gradient(from 0deg, var(--hh-accent, var(--accent, #a855f7)) 0deg, rgba(255,255,255,0.06) 40%, transparent 60%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 -6px 20px rgba(0,0,0,0.35);
  /* mask to create a ring instead of a full disc (inner hole) */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
  animation: hh-rotate 1.6s linear infinite;
  will-change: transform;
}

/* dark inner disc for depth */
.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: rgba(6,6,8,0.72);
  box-shadow: inset 0 4px 10px rgba(255,255,255,0.02);
  pointer-events: none;
}

/* subtle glowing pulse dot that traverses (visual cue) */
.spinner::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  right: 8px;
  top: 8px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--hh-accent, var(--accent, #a855f7)) 40%, rgba(140,56,209,0.95) 70%);
  box-shadow: 0 8px 28px rgba(168,85,247,0.18), 0 0 20px rgba(168,85,247,0.12);
  transform-origin: center;
  animation: hh-pulse 1.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* rotate the conic ring */
@keyframes hh-rotate {
  to { transform: rotate(360deg); }
}

/* pulse scale for the small dot */
@keyframes hh-pulse {
  0% { transform: scale(.85); opacity:.9; }
  50% { transform: scale(1.4); opacity:1; }
  100% { transform: scale(.85); opacity:.9; }
}

/* ---------- Generate button: centered and nicer hover ---------- */
/* Ensure controls container centers the button */
/* ---------- NEW: nicer loader + centered generate button ---------- */
/* Paste this at the END of style.css to override the older spinner/button styles */

/* Accessible prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .spinner::after,
  .spinner::before {
    animation: none !important;
  }
}

/* Big decorative conic spinner with inner mask + glowing pulse */
.spinner {
  width: 84px;
  height: 84px;
  margin: 22px auto;
  border-radius: 50%;
  position: relative;
  /* color uses existing accent var if present; fallbacks included */
  background: conic-gradient(from 0deg, var(--hh-accent, var(--accent, #a855f7)) 0deg, rgba(255,255,255,0.06) 40%, transparent 60%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 -6px 20px rgba(0,0,0,0.35);
  /* mask to create a ring instead of a full disc (inner hole) */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
  animation: hh-rotate 1.6s linear infinite;
  will-change: transform;
}

/* dark inner disc for depth */
.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: rgba(6,6,8,0.72);
  box-shadow: inset 0 4px 10px rgba(255,255,255,0.02);
  pointer-events: none;
}

/* subtle glowing pulse dot that traverses (visual cue) */
.spinner::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  right: 8px;
  top: 8px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--hh-accent, var(--accent, #a855f7)) 40%, rgba(140,56,209,0.95) 70%);
  box-shadow: 0 8px 28px rgba(168,85,247,0.18), 0 0 20px rgba(168,85,247,0.12);
  transform-origin: center;
  animation: hh-pulse 1.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* rotate the conic ring */
@keyframes hh-rotate {
  to { transform: rotate(360deg); }
}

/* pulse scale for the small dot */
@keyframes hh-pulse {
  0% { transform: scale(.85); opacity:.9; }
  50% { transform: scale(1.4); opacity:1; }
  100% { transform: scale(.85); opacity:.9; }
}

/* ---------- Generate button: centered and nicer hover ---------- */
/* Ensure controls container centers the button */
.controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Primary generate button styling */
.generate-btn,
.generate { /* both classes supported */
  display: inline-block;
  padding: 14px 34px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(90deg, var(--hh-accent, #b66dff) 0%, var(--hh-accent-dark, #8c38d1) 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(140,56,209,0.12);
  transition: transform .14s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
  margin: 0 auto; /* center if block-level */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Hover / focus states for pointer users */
.generate-btn:hover,
.generate:hover,
.generate-btn:focus,
.generate:focus {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 48px rgba(140,56,209,0.20);
  filter: brightness(1.03);
  outline: none;
}

/* Active (press) */
.generate-btn:active,
.generate:active {
  transform: translateY(-1px) scale(.995);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Disabled look */
.generate-btn[disabled],
.generate[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Make sure the button is full-width on very small screens (improves tap target) */
@media (max-width: 420px) {
  .generate-btn,
  .generate {
    width: 100% !important;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 12px;
  }
}

/* ========== PROMPTING FINAL FIX (paste at EOF) ========== */
/* Ziel: Inputs breiter (desktop + mobile), modes-buttons nicht abgeschnitten,
   und Inline-styles überschreiben. */

.page-wrap > .center-ui.card-surface {
  position: relative !important;
  overflow: visible !important;           /* verhindert Clipping */
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

/* Modes: scroll statt Clip; leichte innenabstände damit Buttons nicht am Rand abschneiden */
.page-wrap > .center-ui.card-surface .modes {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 8px !important;
  margin: 0 !important;                   /* inline margin-top wird ignoriert */
  scrollbar-width: none !important;       /* FF */
  -ms-overflow-style: none !important;    /* IE */
  z-index: 30 !important;
}
/* hide webkit scrollbar visually but keep scroll */
.page-wrap > .center-ui.card-surface .modes::-webkit-scrollbar { display: none !important; height: 6px !important; }

/* Mode buttons: lesbar, nicht zu schmal, nicht überdehnen */
.page-wrap > .center-ui.card-surface .mode-btn {
  flex: 0 0 auto !important;
  min-width: 96px !important;             /* genug Platz für Text */
  max-width: 38% !important;              /* verhindert, dass ein Button die Zeile dominiert */
  padding: 8px 12px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  z-index: 40 !important;
}

/* Inputs: Desktop angenehme Satz-Breite, aber nie breiter als die Karte.
   Mobile: 100% (nice tap targets). */
.page-wrap > .center-ui.card-surface textarea.prompt,
.page-wrap > .center-ui.card-surface .prompt,
.page-wrap > .center-ui.card-surface select.format,
.page-wrap > .center-ui.card-surface input[type="text"],
.page-wrap > .center-ui.card-surface input[type="email"] {
  box-sizing: border-box !important;
  width: min(100%, clamp(420px, 72%, calc(var(--max-width, 980px) - 64px))) !important;
  max-width: 100% !important;             /* niemals breiter als Karte */
  min-width: 320px !important;            /* komfortables Minimum auf Desktop */
  padding-right: 48px !important;         /* Platz für Pfeil/Icons */
  margin: 0 !important;
}

/* Make select arrow have space on narrow screens */
.page-wrap > .center-ui.card-surface select.format,
.page-wrap > .center-ui.card-surface .format {
  padding-right: 54px !important;
}

/* Controls: verhindern, dass Kinder die Box sprengen; auf Mobile stacked */
.page-wrap > .center-ui.card-surface .controls,
.page-wrap > .center-ui.card-surface .controls > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Make Generate centered on desktop, full-width on small screens */
.page-wrap > .center-ui.card-surface .controls {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-wrap > .center-ui.card-surface .controls > div { min-width: 0 !important; }

/* responsive: stack controls + full width CTA */
@media (max-width: 980px) {
  .page-wrap > .center-ui.card-surface textarea.prompt,
  .page-wrap > .center-ui.card-surface .prompt,
  .page-wrap > .center-ui.card-surface select.format {
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-wrap > .center-ui.card-surface .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
  }

  .page-wrap > .center-ui.card-surface .controls .generate,
  .page-wrap > .center-ui.card-surface .controls .generate-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    padding: 14px 18px !important;
  }

  /* modes on mobile: allow horizontal scroll and slightly smaller buttons */
  .page-wrap > .center-ui.card-surface .modes { justify-content: flex-start !important; padding-left: 6px !important; }
  .page-wrap > .center-ui.card-surface .mode-btn { min-width: 80px !important; max-width: none !important; }
}

/* defensive: verhindern von horizontalem Scrollen der Seite */
html, body, .page-wrap, .center-ui.card-surface {
  overflow-x: hidden !important;
}

/* Sehr hohe Spezifität falls andere Styles immer noch nerven */
.page-wrap > .center-ui.card-surface .modes,
.page-wrap > .center-ui.card-surface textarea.prompt,
.page-wrap > .center-ui.card-surface select.format {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================
   Simple, robust overlay + animation (replace previous heavy rules)
   Paste at EOF of style2.overrides.css
   ========================= */

#hh-loading-overlay {
  position: fixed;
  inset: 0;
  display: none; /* shown only with .hh-active */
  align-items: center;
  justify-content: center;
  z-index: 120000;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(6,7,10,0.60);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Active state: visible and interactive */
#hh-loading-overlay.hh-active {
  display: flex !important;
  pointer-events: auto !important;
}

/* Wrapper card */
#hh-loading-overlay .hh-loader-wrap {
  width: min(720px, 94%);
  max-width: 720px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 28px 80px rgba(2,3,8,0.65);
  overflow: hidden;
}

/* Mobile: stack */
@media (max-width:720px) {
  #hh-loading-overlay .hh-loader-wrap { flex-direction: column; padding: 12px; gap:10px; width: min(560px, 94%); }
}

/* Left: orb */
#hh-loading-overlay .hh-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), rgba(182,109,255,0.95) 28%, rgba(140,56,209,0.6) 68%, rgba(0,0,0,0.12) 100%);
  box-shadow: 0 10px 30px rgba(140,56,209,0.08), inset 0 -8px 18px rgba(0,0,0,0.25);
  flex: 0 0 auto;
  transform-origin: center;
  will-change: transform, box-shadow;
  opacity: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* slow orb pulse */
@keyframes hh-orb-pulse-simple {
  0% { transform: scale(1); filter: drop-shadow(0 6px 18px rgba(140,56,209,0.06)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 12px 36px rgba(140,56,209,0.10)); }
  100% { transform: scale(1); filter: drop-shadow(0 6px 18px rgba(140,56,209,0.06)); }
}
#hh-loading-overlay.hh-active .hh-orb {
  animation: hh-orb-pulse-simple 1.8s ease-in-out infinite;
}

/* subtle rotating ring behind orb */
#hh-loading-overlay .hh-orb-ring {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(182,109,255,0.06);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}
@keyframes hh-ring-rotate {
  0% { transform: rotate(0deg) scale(.98); opacity: 0; }
  10% { opacity: 0.28; }
  50% { transform: rotate(180deg) scale(1.02); opacity: 0.18; }
  100% { transform: rotate(360deg) scale(.98); opacity: 0; }
}
#hh-loading-overlay.hh-active .hh-orb-ring {
  opacity: 1;
  animation: hh-ring-rotate 4.6s linear infinite;
}

/* INFO column: title + hint. Ensure wrap & no overflow */
#hh-loading-overlay .hh-loader-info {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
  max-width: calc(100% - 110px);
  word-break: break-word;
}
#hh-loading-overlay .hh-loader-title { font-weight:800; color:#fff; font-size:1rem; line-height:1.12; margin:0; }
#hh-loading-overlay .hh-loader-sub { color: rgba(255,255,255,0.9); font-size:0.92rem; margin:0; }
#hh-loading-overlay .hh-loader-hint { color: rgba(255,255,255,0.72); font-size:0.86rem; margin-top:6px; }

/* Prevent text overflow on mobile */
@media (max-width:420px) {
  #hh-loading-overlay .hh-loader-title { font-size:0.96rem; }
  #hh-loading-overlay .hh-loader-sub { font-size:0.88rem; }
  #hh-loading-overlay .hh-loader-hint { font-size:0.80rem; }
}

/* Particles: simple upward-fading dots (works with JS-created .hh-dot elements) */
#hh-loading-overlay .hh-particles { position:absolute; inset:0; pointer-events:none; overflow:visible; }
#hh-loading-overlay .hh-dot {
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, rgba(182,109,255,0.95) 40%, rgba(140,56,209,0.65) 70%);
  box-shadow: 0 6px 14px rgba(182,109,255,0.10);
  opacity: 0;
  transform: translate3d(0,0,0) scale(.9);
  will-change: transform, opacity;
  pointer-events: none;
  display: none;
}

/* Particle simple float */
@keyframes hh-dot-simple {
  0% { transform: translate3d(var(--x,0px), 0px, 0) scale(.85); opacity: 0; }
  10% { opacity: 0.9; }
  60% { transform: translate3d(calc(var(--x,0px)), calc(-1 * var(--rise, 80px)), 0) scale(1); opacity: 0.6; }
  100% { transform: translate3d(calc(var(--x,0px)), calc(-1 * var(--rise, 80px) - 20px), 0) scale(.78); opacity: 0; }
}

/* When overlay active, show and animate dots */
#hh-loading-overlay.hh-active .hh-dot {
  display: block !important;
  animation-name: hh-dot-simple;
  animation-duration: var(--dot-duration, 1.8s);
  animation-delay: var(--dot-delay, 0s);
  animation-timing-function: cubic-bezier(.2,.9,.3,1);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* Mobile: smaller dots and shorter rise */
@media (max-width:720px) {
  #hh-loading-overlay .hh-dot { width:6px; height:6px; box-shadow: 0 4px 10px rgba(182,109,255,0.08); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #hh-loading-overlay .hh-orb,
  #hh-loading-overlay .hh-orb-ring,
  #hh-loading-overlay .hh-dot {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* Safety: do not allow overlay content to overflow the viewport */
#hh-loading-overlay .hh-loader-wrap { max-height: calc(100vh - 48px); overflow: auto; }

/* Ensure overlay is above most things but below system-level modals if needed */
#hh-loading-overlay { z-index: 120000 !important; }

/* End of lightweight overlay styles */

/* ================================
   Quick fixes: mode buttons + mobile toggle + spacing
   Paste this at EOF of style2.overrides.css
   ================================ */

/* 1) Make the mode row safe: horizontal scroll, compact buttons, no overlap */
.page-wrap > .center-ui.card-surface .modes {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 6px 8px !important;
  margin-bottom: 12px !important; /* separate from controls so no overlap */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 6 !important; /* stay above card content but below modals */
  box-sizing: border-box !important;
}

/* compact, shrinkable mode buttons */
.page-wrap > .center-ui.card-surface .mode-btn {
  flex: 0 0 auto !important; /* don't stretch to fill */
  min-width: 72px !important;
  max-width: 160px !important;
  padding: 6px 10px !important;
  font-size: 0.92rem !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* slightly smaller active visual on small screens to avoid pushing layout */
@media (max-width: 720px) {
  .page-wrap > .center-ui.card-surface .mode-btn {
    min-width: 64px !important;
    max-width: 120px !important;
    padding: 6px 8px !important;
    font-size: 0.88rem !important;
  }
}

/* 2) Ensure controls block is below modes (avoid overlapping) */
.page-wrap > .center-ui.card-surface .controls {
  margin-top: 8px !important; /* extra breathing room under the modes */
  z-index: 1 !important;
}

/* 3) Make mobile sidebar toggle visible & styled if present (#slimToggleMobile) */
#slimToggleMobile { display: none; } /* default off on desktop */

/* 4) Defensive: ensure the mode row doesn't overlap form elements if something else uses z-index */
.page-wrap > .center-ui.card-surface .modes,
.page-wrap > .center-ui.card-surface .controls { position: relative !important; }

/* 5) If the 'Generator' button was overflowing, cap width and allow wrap */
.page-wrap > .center-ui.card-surface .controls .generate,
.page-wrap > .center-ui.card-surface .controls .generate-btn {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

/* 6) Small tweak: if someone forced .modes absolute in other files, ensure we undo it */
.page-wrap > .center-ui.card-surface .modes[style*="position: absolute"],
.page-wrap > .center-ui.card-surface .modes[style*="position:absolute"] {
  position: relative !important;
}

/* 7) Accessibility: make sure mode-row stays visible to keyboard users */
.page-wrap > .center-ui.card-surface .modes:focus-within {
  outline: none !important;
  box-shadow: 0 8px 28px rgba(140,56,209,0.08) !important;
}

/* =========================
   HOTFIX: header layout, email ellipsis, hide header badge and prefer credits-wrap
   Paste this at EOF of style2.overrides.css
   ========================= */

/* 1) Make auth-controls layout stable and prevent email from pushing buttons */
#auth-controls {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  right: 18px !important;
  top: 12px !important;
  padding: 0 6px;
  box-sizing: border-box;
  z-index: 200000 !important;
}

/* the wrapper that currently contains #hh-user-email (inline style in markup).
   Override the inline margin-left:auto to avoid pushing other items. */
#auth-controls > div[style] {
  margin-left: 0 !important;
  text-align: right !important;
  min-width: 0 !important;
}

/* make the visible email compact and clipped so it never grows the header */
#hh-user-email {
  display: inline-block !important;
  max-width: 220px !important; /* tweak as needed */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #e7e6eb !important;
  font-size: .95rem;
}

/* 2) Hide header badge inside auth-controls by default (we will show the badge under generate) */
#auth-controls .hh-user-remaining {
  display: none !important;
}

/* 3) Ensure the credits visual area under the prompt is prominent and contains the badge */
#hh-credits-wrap {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 12px !important;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* If we move the header badge into the credits area we may rename its id;
   style both variants so they look the same */
#hh-user-remaining-moved,
#hh-credits-wrap .hh-user-remaining,
#hh-credits-wrap #hh-user-remaining {
  display: inline-block !important;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(180deg,#6f3be6,#8c38d1);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  line-height: 1;
  box-shadow: 0 8px 26px rgba(140,56,209,0.08);
}

/* zero-state look kept */
#hh-user-remaining-moved.hh-zero,
#hh-credits-wrap .hh-user-remaining.hh-zero {
  background: linear-gradient(180deg,#3a0b0b,#6b1f1f);
  color: #ffe6e6;
  border-color: rgba(255,80,80,0.14);
}

/* 4) Make sure the generate button cannot overflow and is responsive on small screens */
.page-wrap > .center-ui.card-surface .controls .generate,
.page-wrap > .center-ui.card-surface .controls .generate-btn {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

/* 5) Mobile toggle: ensure visible + positioned */

/* 6) Defensive: keep modes row and controls stacked (avoid overlap with toggle) */
.page-wrap > .center-ui.card-surface .modes { padding-left: 12px !important; }

/* ====== FIX: always-show 3 mode buttons side-by-side on narrow screens ======
   Paste this at EOF of style2.overrides.css
   Ensures all 3 buttons are fully visible, centered, with small side padding.
========================================================================= */
@media (max-width: 980px) {
  /* container: center, no horizontal scroll, small breathing room left/right */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;             /* space between buttons */
    padding: 0 12px !important;       /* small margin to card edges */
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;    /* prevent scroll — buttons will shrink instead */
    -webkit-overflow-scrolling: auto !important;
  }

  /* buttons: equal flexible width, allow wrapping of label, keep text readable */
  .page-wrap > .center-ui.card-surface .mode-btn {
    flex: 1 1 0 !important;           /* 3 items -> evenly divide available width */
    min-width: 0 !important;          /* allow shrinking */
    max-width: none !important;
    text-align: center !important;
    white-space: normal !important;   /* allow label to wrap if needed */
    padding: 8px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    font-size: clamp(0.82rem, 3.6vw, 0.96rem) !important; /* responsive text */
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ensure active state still looks correct but doesn't push layout */
  .page-wrap > .center-ui.card-surface .mode-btn.active {
    transform: none !important; /* keep subtle — prevents jumping on narrow screens */
    box-shadow: 0 10px 30px rgba(140,56,209,0.10) !important;
  }

  /* if labels are long: reduce padding slightly to keep them on one line when possible */
  .page-wrap > .center-ui.card-surface .mode-btn { padding-left: 10px !important; padding-right: 10px !important; }

  /* accessibility: ensure keyboard focus still visible */
  .page-wrap > .center-ui.card-surface .modes :focus { outline: none; box-shadow: 0 8px 28px rgba(140,56,209,0.08) !important; }
}

/* ============================
   MOBILE: Sidebar UX overhaul
   Paste at EOF of style2.overrides.css
   Applies only on small screens (<=980px)
   ============================ */
@media (max-width: 980px) {
  /* Header: ensure auth controls layout - keep space for email + landing + toggle */
  #auth-controls {
    display: flex !important;
    flex-direction: column !important; /* stack: email, then toggle, then buttons */
    gap: 6px !important;
    align-items: flex-end !important; /* keep controls to the right */
    min-width: 0 !important;
  }

  /* Make visible email compact and truncated; show full on hover via title attr */
  #hh-user-email {
    max-width: calc(100vw - 160px) !important; /* leave room for other controls */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

/* ================================
   Desktop: Modes row centered (>= 981px)
   Paste at EOF of style2.overrides.css
   ================================ */
@media (min-width: 981px) {
  /* Container: center the row, keep breathing room left/right */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important;  /* <-- center on desktop */
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 18px !important;
    margin: 8px 0 14px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;       /* allow content to remain visible, no forced scroll */
    -webkit-overflow-scrolling: auto !important;
    position: relative !important;       /* defensive reset (undo absolute if set elsewhere) */
  }

  /* Ensure inline/embedded style that set absolute don't break layout */ {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* Buttons: keep moderate, readable size; center text; don't stretch to edges */
  .page-wrap > .center-ui.card-surface .mode-btn {
    flex: 0 1 auto !important;            /* don't force equal full-width columns */
    min-width: 96px !important;           /* readable minimum */
    max-width: 280px !important;          /* prevents extreme stretching */
    width: auto !important;
    padding: 8px 14px !important;
    text-align: center !important;
    white-space: nowrap !important;       /* keep labels on one line on desktop */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Active Visual: keep subtle, avoid layout shift */
  .page-wrap > .center-ui.card-surface .mode-btn.active {
    transform: translateY(-2px) !important; /* subtle lift */
    box-shadow: 0 14px 36px rgba(140,56,209,0.10) !important;
  }

  /* Keyboard focus visible */
  .page-wrap > .center-ui.card-surface .mode-btn:focus {
    outline: none !important;
    box-shadow: 0 10px 32px rgba(140,56,209,0.12) !important;
  }
}

/* ===========================
   MOBILE FIXES (<=980px) — paste at EOF of style2.overrides.css
   Strictly mobile-only; desktop untouched.
   =========================== */
@media (max-width: 980px) {
  /* ----- Header: stable top row with Login/Logout/Email ----- */
  #auth-controls {
    display: flex !important;
    flex-direction: column !important; /* top-row (login/logout/email) then toggle beneath */
    gap: 6px !important;
    align-items: flex-end !important;
    min-width: 0 !important;
    z-index: 2200 !important;
  }

  /* top-row wrapper (JS will create .hh-top-row); style it */
  #auth-controls .hh-top-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* keep login & logout compact and side-by-side with email */
  #auth-controls button.hookhero-btn,
  #auth-controls button.hookhero-btn.ghost {
    flex: 0 0 auto !important;
  }

  /* email: truncated but visible and next to logout */
  #hh-user-email {
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* toggle: icon-only, placed to the right of the landing button (JS positions it).
     Visual style: small circular icon. */
  #slimToggleMobile {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
    font-size: 0 !important; /* hide stray text nodes */
    line-height: 0 !important;
    z-index: 2210 !important;
    position: fixed !important;
    top: 12px !important;
    left: calc(12px + 42px + 10px) !important; /* to the right of the landing .ai-btn (42px) + spacing */
  }
  #slimToggleMobile svg { width: 18px !important; height: 12px !important; display: block !important; }

  /* ensure the mode row has left padding so it doesn't collide with left fixed icons */
  .page-wrap > .center-ui.card-surface .modes { padding-left: 12px !important; }

  /* ----- Mode buttons: divide row equally, never ellipsis mid-word ----- */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-wrap > .center-ui.card-surface .mode-btn {
    flex: 1 1 0 !important;        /* evenly divide available width */
    min-width: 0 !important;
    padding: 8px 10px !important;
    white-space: normal !important; /* allow wrapping in the cell if needed */
    text-align: center !important;
    font-size: clamp(0.86rem, 3.6vw, 0.98rem) !important;
    line-height: 1.05 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
  }

  /* ensure label text is not clipped mid-word */
  .page-wrap > .center-ui.card-surface .mode-btn span,
  .page-wrap > .center-ui.card-surface .mode-btn > * {
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ----- Controls: stack, full-width generate button ----- */
  .page-wrap > .center-ui.card-surface .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .page-wrap > .center-ui.card-surface .controls > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .page-wrap > .center-ui.card-surface .controls .generate-btn,
  .page-wrap > .center-ui.card-surface .controls .generate {
    width: 100% !important;
  }

  /* ----- Sidebar: fixed right half, icons + full labels, no horizontal scroll ----- */
  .slim-sidebar,
  #slimSidebar {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    left: auto !important;
    width: min(78vw, 340px) !important;
    max-width: 78vw !important;
    height: calc(100vh - 72px) !important;
    background: linear-gradient(180deg, rgba(18,12,22,0.86), rgba(18,12,22,0.74)) !important;
    backdrop-filter: blur(6px) saturate(110%) !important;
    box-shadow: -20px 0 60px rgba(0,0,0,0.55) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* CRITICAL: disable horizontal scroll */
    transform: translateX(100%) !important; /* hidden by default; body.mobile-sidebar-open shows */
    transition: transform .28s cubic-bezier(.2,.9,.2,1) !important;
    z-index: 22000 !important;
    box-sizing: border-box !important;
  }
  body.mobile-sidebar-open .slim-sidebar,
  body.mobile-sidebar-open #slimSidebar {
    transform: translateX(0) !important;
  }

  /* nav items: icon (fixed), label (wrap), whole item clickable */
  .slim-sidebar nav, .slim-sidebar .slim-nav { width: 100% !important; box-sizing: border-box !important; }
  .slim-sidebar a.nav-item,
  .slim-sidebar .nav-item {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    text-decoration: none !important;
    color: inherit !important;
  }
  .slim-sidebar .nav-item .icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; }
  .slim-sidebar .nav-item .label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    display: inline-block !important;
  }

  /* backdrop for mobile sidebar */
  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.36);
    z-index: 21990;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }
  body.mobile-sidebar-open .mobile-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* global: prevent horizontal page scroll on mobile */
  html, body, .page-wrap, .center-ui.card-surface { overflow-x: hidden !important; width: 100% !important; }

}

/* --- Force desktop: center the 3 mode buttons (place at EOF of style2.overrides.css) --- */
@media (min-width: 981px) {
  /* center the whole mode-row */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important; /* <- centres the buttons */
    align-items: center !important;
    gap: 12px !important;
    padding-left: 18px !important; /* keep some breathing room */
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* keep each button readable and not full-width */
  .page-wrap > .center-ui.card-surface .mode-btn {
    flex: 0 1 auto !important;        /* don't stretch to full width */
    min-width: 96px !important;
    max-width: 280px !important;
    white-space: nowrap !important;   /* keep full label on one line on desktop */
    padding: 8px 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ==========================
   STRONG Desktop override: centre the 3 mode buttons (>=981px)
   Put this at the VERY END of style2.overrides.css (after all others)
   ========================== */
@media (min-width: 981px) {
  /* highest effort: explicit selector + !important on each property */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important; /* <- centres the three buttons */
    align-items: center !important;
    gap: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  .page-wrap > .center-ui.card-surface .modes .mode-btn {
    flex: 0 1 auto !important;    /* don't stretch to whole row */
    min-width: 96px !important;
    max-width: 320px !important;
    white-space: nowrap !important; /* keep full label on one line on desktop */
    padding: 8px 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Extra defensive selector for inline style overrides (rare) */
  .page-wrap > .center-ui.card-surface .modes[style] {
    justify-content: center !important;
  }
}

@media (max-width: 980px) {

  /* 1) Mode-Buttons: keine Ellipsen, ganze Worte lesbar,
     Buttons etwas kleiner damit alle 3 sichtbar bleiben */
  .page-wrap > .center-ui.card-surface .modes {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Verhindert scroll/… falls wir die Buttons anpassen */
  }
  .page-wrap > .center-ui.card-surface .modes .mode-btn {
    flex: 1 1 0 !important; /* drei Buttons teilen sich die Zeile */
    min-width: 0 !important; /* erlaubt schrumpfen */
    max-width: none !important;
    padding: 6px 8px !important; /* etwas kompakter */
    font-size: clamp(0.80rem, 3.4vw, 0.92rem) !important; /* responsive kleiner bei engen Bildschirmen */
    white-space: normal !important; /* erlauben, dass das Label umbrechen kann statt "..." */
    line-height: 1.05 !important;
    text-align: center !important;
    overflow: visible !important;
    word-break: break-word !important;
  }
  /* Falls die Buttons Icons + Text haben: erlauben, dass Text auf zweiter Zeile sichtbar wird */
  .page-wrap > .center-ui.card-surface .mode-btn > * { white-space: normal !important; }

  /* 2) Logout links von der Email (nicht darunter) - erzwinge Inline/Row Anordnung */
  #auth-controls {
    display: flex !important;
    flex-direction: row !important; /* wichtig: Reihenfolge in einer Zeile */
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Falls dein Markup Buttons/Links enthält: stelle sicher, dass Buttons vor der Email kommen */
  /* Wir setzen allen Buttons/Links eine niedrigere order als dem Email-Span */
  #auth-controls button,
  #auth-controls a,
  #auth-controls .hookhero-btn,
  #auth-controls .logout {
    order: 1 !important;
  }
  /* Email soll rechts davon stehen */
  #hh-user-email {
    order: 2 !important;
    max-width: 220px !important; /* verhindert Überlauf */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  /* Falls Ihr HTML eine hh-top-row benutzt, stell sicher, dass diese inline bleibt */
  #auth-controls .hh-top-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* 3) Sidebar: Icons leicht nach links verschieben + Label sichtbar (nicht nur Icons) */
  /* Ziel: Icon etwas links rücken, Label sichtbar und lesbar */
  .slim-sidebar,
  #slimSidebar {
    overflow-x: hidden !important; /* auf mobile nie horizontal scrollen */
  }
  .slim-sidebar .nav-item,
  #slimSidebar .nav-item {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    white-space: normal !important;
  }
  .slim-sidebar .nav-item .icon,
  #slimSidebar .nav-item .icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .slim-sidebar .nav-item .label,
  #slimSidebar .nav-item .label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: inline-block !important; /* sicherstellen, dass Label sichtbar ist */
    opacity: 1 !important;
    transform: none !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  /* Wenn zuvor Icons-only durch CSS versteckt wurden, erzwingen wir Sichtbarkeit */
}
/* =========================
   FINAL MOBILE: Sidebar + Header fixes (EOF)
   - Entfernt negative icon offsets
   - Zeigt Logo + Name immer nebeneinander
   - Label wrap only when sidebar open
   - High-specificity mobile overrides
   Paste this at EOF of style2.overrides.css
   ========================= */

@media (max-width: 980px) {
  /* Container safe */
  .slim-sidebar, #slimSidebar {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Nav item: full width, padding so icon never overlaps */
  .slim-sidebar .nav-item,
  #slimSidebar .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    word-break: normal !important;
  }

  /* Icon: fixed safe box, NO negative margin, ensure visible */
  .slim-sidebar .nav-item .icon,
  #slimSidebar .nav-item .icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Icon image: contain and never overflow */
  .slim-sidebar .nav-item .icon img,
  #slimSidebar .nav-item .icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Label: flexible, truncates only if sidebar closed; when open wrap allowed */
  .slim-sidebar .nav-item .label,
  #slimSidebar .nav-item .label {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* crucial to allow truncation */
    display: inline-block !important;
    white-space: nowrap !important; /* default: single line w/ ellipsis so layout stable */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* When sidebar is opened (mobile), allow wrapping so very long names show */
  body.mobile-sidebar-open .slim-sidebar .nav-item .label,
  body.mobile-sidebar-open #slimSidebar .nav-item .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: none !important;
    max-width: calc(78vw - 72px) !important;
  }

  /* Header: force logout left, email right in one row (stable layout) */
  #auth-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  /* Ensure logout/button group appear before email (order) */
  #auth-controls button, #auth-controls a, #auth-controls .hookhero-btn, #auth-controls .logout {
    order: 1 !important;
  }
  #hh-user-email {
    order: 2 !important;
    max-width: calc(100vw - 160px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
  }

  /* Prevent any negative margin leftover from earlier rules */
  .slim-sidebar .nav-item *[style*="margin-left:-"], #slimSidebar .nav-item *[style*="margin-left:-"] {
    margin-left: 0 !important;
  }

  /* Guarantee no horizontal scroll page-wide */
  html, body, .page-wrap, .center-ui.card-surface { overflow-x: hidden !important; width: 100% !important; }

  /* Small visual nicety: ensure sidebar anchor rows are fully clickable */
  .slim-sidebar .nav-item, #slimSidebar .nav-item { cursor: pointer !important; }
}

@media (max-width: 980px) {
  .slim-sidebar, #slimSidebar {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .slim-sidebar .nav-item, #slimSidebar .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    word-break: normal !important;
    margin: 0 !important;
  }
  .slim-sidebar .nav-item .icon, #slimSidebar .nav-item .icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important; /* <- prevent negative margin from other styles */
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .slim-sidebar .nav-item .icon img, #slimSidebar .nav-item .icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .slim-sidebar .nav-item .label, #slimSidebar .nav-item .label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.mobile-sidebar-open .slim-sidebar .nav-item .label,
  body.mobile-sidebar-open #slimSidebar .nav-item .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: none !important;
    max-width: calc(78vw - 72px) !important;
  }
  /* Ensure no negative margin remains from previous inline styles */
  .slim-sidebar .nav-item *[style*="margin-left:-"], #slimSidebar .nav-item *[style*="margin-left:-"] {
    margin-left: 0 !important;
  }
  /* Header stable row: buttons left, email right */
  #auth-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  #auth-controls button, #auth-controls a, #auth-controls .hookhero-btn, #auth-controls .logout { order: 1 !important; }
  #hh-user-email { order: 2 !important; max-width: calc(100vw - 160px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display:inline-block !important; }
  html, body, .page-wrap, .center-ui.card-surface { overflow-x: hidden !important; width: 100% !important; }
}

/* ===========================
   STRONG MOBILE SIDEBAR FIXES
   -- Paste THIS at EOF of style2.overrides.css (LAST file!)
   Fixes: icons visible, labels readable, no horizontal scroll, close on outside-click
   =========================== */

@media (max-width: 980px) {

  /* container: never allow horizontal scroll */
  .slim-sidebar, #slimSidebar {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    position: fixed !important; /* if you want fixed mobile panel */
    right: 0 !important;
    left: auto !important;
  }

  /* nav row: full-width, align items horizontally */
  .slim-sidebar .nav-item,
  #slimSidebar .nav-item,
  .slim-sidebar a.nav-item,
  #slimSidebar a.nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important; /* prevent absolute child overlap */
  }

  /* ICON: stable box on left, NO negative margin, NO absolute positioning */
  .slim-sidebar .nav-item .icon,
  #slimSidebar .nav-item .icon {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ensure images inside icon never overflow */
  .slim-sidebar .nav-item .icon img,
  #slimSidebar .nav-item .icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* LABEL: flexible, visible; truncate when sidebar closed, wrap when open */
  .slim-sidebar .nav-item .label,
  #slimSidebar .nav-item .label {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;               /* CRUCIAL: allows truncation */
    margin-left: 6px !important;
    white-space: nowrap !important;        /* default: single line w/ ellipsis */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
  }

  /* When sidebar is opened (mobile), allow wrap so very long names show fully */
  body.mobile-sidebar-open .slim-sidebar .nav-item .label,
  body.mobile-sidebar-open #slimSidebar .nav-item .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: none !important;
    max-width: calc(78vw - 84px) !important; /* leaves room for icon + paddings */
  }

  /* Defensive: if some inline style had negative margin on icon, reset it */
  .slim-sidebar .nav-item .icon[style*="margin-left:-"],
  #slimSidebar .nav-item .icon[style*="margin-left:-"] {
    margin-left: 0 !important;
  }

  /* Defensive: if label was hidden via inline style, force show */
  .slim-sidebar .nav-item .label[style*="display:none"],
  #slimSidebar .nav-item .label[style*="display:none"] {
    display: inline-block !important;
  }

  /* anchors inside nav-item: full-range clickable */
  .slim-sidebar .nav-item > a,
  #slimSidebar .nav-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    box-sizing: border-box !important;
    padding: 6px 2px !important;
  }

  /* prevent any child from causing horizontal scroll */
  .slim-sidebar, #slimSidebar, .slim-sidebar * , #slimSidebar * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* ensure page never horizontally scrolls on mobile due to sidebar content */
  html, body, .page-wrap, .center-ui.card-surface { overflow-x: hidden !important; width: 100% !important; }

  /* close the sidebar when user clicks outside — just visual hint rule (JS handles actual close) */
  .mobile-sidebar-backdrop { display:block !important; } /* kept so backdrop exists and gets pointer-events toggled by JS */
}

/* === FINAL: force-correct sidebar icons + labels (LAST RULES) === */
@media (max-width: 980px) {
  /* ensure no negative offset survives */
  .slim-sidebar .nav-item .icon,
  #slimSidebar .nav-item .icon {
    margin-left: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* always show label; truncate when sidebar closed, wrap when open */
  .slim-sidebar .nav-item .label,
  #slimSidebar .nav-item .label {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
  }
  body.mobile-sidebar-open .slim-sidebar .nav-item .label,
  body.mobile-sidebar-open #slimSidebar .nav-item .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: none !important;
    max-width: calc(78vw - 84px) !important;
  }

  /* ensure modes don't get big left offset and don't overlap */
  .page-wrap > .center-ui.card-surface .modes {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
}

/* Defensive: override inline style attempts for margin-left on icons */
.sl i m-sidebar .nav-item .icon[style*="margin-left:-"],
#slimSidebar .nav-item .icon[style*="margin-left:-"] {
  margin-left: 0 !important;
}

/* SIMPLE MOBILE: hide sidebar icons (ONLY on mobile) — PUT THIS AT EOF of style2.overrides.css */
@media (max-width: 980px) {
  /* hide icon container and any icon images */
  .slim-sidebar .nav-item .icon,
  #slimSidebar .nav-item .icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .slim-sidebar .nav-item .icon img,
  #slimSidebar .nav-item .icon img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
  }

  /* make label use the freed space and avoid leftover offsets */
  .slim-sidebar .nav-item,
  #slimSidebar .nav-item,
  .slim-sidebar a.nav-item,
  #slimSidebar a.nav-item {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .slim-sidebar .nav-item .label,
  #slimSidebar .nav-item .label {
    margin-left: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* defensive: remove any inline negative margins left by other scripts */
  .slim-sidebar .nav-item *[style*="margin-left:-"],
  #slimSidebar .nav-item *[style*="margin-left:-"] {
    margin-left: 0 !important;
  }

  /* prevent page horizontal scroll caused by sidebar changes */
  html, body, .page-wrap, .center-ui.card-surface { overflow-x: hidden !important; width: 100% !important; }
}