:root {
  --user-font-size: 16px;
}

* { box-sizing: border-box; }

html {
  font-size: 16px; /* default */
}

/* ===== Scrollbar Styling for WebKit ===== */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: transparent; border-radius: 8px;}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--chat-scrollbar-thumb);
  border: 2px solid var(--chat-scrollbar-border);
}
::-webkit-scrollbar-thumb:hover { background: var(--chat-scrollbar-thumb-hover); }


body, .bg { background-color: var(--chat-bg-surface); color: var(--chat-text-body); }

body {
  font-family: "Segoe UI", sans-serif;
  font-size: var(--user-font-size, 16px); /* Set via html and prefs*/
  overflow: hidden;
  margin: 0;
  padding-top: 0;
}
body, main, .main-content {transition: background-color 0.4s ease, color 0.5s ease;}


main   { background-color: var(--chat-bg-surface); }
header { background-color: transparent; }

main {
  display: flex;
  flex-direction: column;
  position:relative;
  padding: 0;
  border-radius: 12px;
  margin-top: 0.25rem;
  height: calc(100vh - 9.25rem); /*TODO: Change this to take the spread */
  overflow: hidden;
}
/*
.main-content {
  xxx-padding: 0.5rem 0 1.5rem 8px;
  padding: 0.5rem 2px 1.5rem 1.0rem;

  border-radius: 12px;
  height:100%;
  overflow-y: auto;
  overflow-x: hidden;
}
*/
header {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: visible;
}
/* Gradient fade at header's bottom edge — content fades away as it scrolls up */
header::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, var(--chat-bg-surface), transparent);
}


footer {
  background-color: var(--chat-bg-surface);
  font-size: calc(var(--user-font-size) * 0.80);
  position: sticky;
  bottom: 0;
  z-index: 2;
  overflow: visible;
  padding: 0.25rem 0;
  height: 2rem;
  opacity: 0.5;
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 10px;
  height: 100%;
}

/* Gradient fade at footer's top edge */
footer::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top, var(--chat-bg-surface), transparent);
}

/* ── Home: intro/content section ─────────────────────────────────────────── */
.home-page, .entity-page { margin: 0 auto; padding: 1rem 4rem 2rem;  }

.home-intro { }
.intro-title { font-size: 1.85rem; margin: 0 0 1rem; color: var(--chat-text-primary); }
.intro-text { line-height: 1.8; font-size: var(--chat-font-size-xl); text-align:justify; }
.tagline {
    font-size: 2.0rem;
    text-align: center;
    font-weight: 700;
}


.footer-left  { text-align: left; }
.footer-center{ text-align: center; }
.footer-right { text-align: right; }

/* Main Footer Tagline (like Page Tagline)*/
.page-tagline{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.fade-down { top: 0;    background: linear-gradient(to bottom, var(--chat-bg-overlay) 5%, transparent 100%); }
.fade-up   { bottom: 0; background: linear-gradient(to top,   var(--chat-bg-overlay) 5%, transparent 100%); }

.fade-down, .fade-up {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4rem;
  pointer-events: none;
  z-index: 1;
}

.overlay {
  background: linear-gradient(to bottom, var(--chat-bg-overlay) 0%, transparent 50%, transparent 60%, var(--chat-bg-overlay) 100%);
  mix-blend-mode: destination-out;
  opacity: 1;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.muted {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(60%);
  user-select: none;
}

.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}
.hidden {pointer-events: none; display:none !important;}

code { color: var(--chat-code-color); }


/* === Character Colors & Glow === */
/*.male, .female, .non-binary, .unknown, .user {text-shadow: 0 0 1px #303030, 0 0 2px #303030;}*/
.male       { color: var(--chat-color-male); }
.female     { color: var(--chat-color-female); }
.non-binary { color: var(--chat-color-non-binary); }
.unknown, .user { color: var(--chat-color-unknown); }


.fade-10 {opacity: 0.10;} .fade-20 {opacity: 0.20;} .fade-30 {opacity: 0.30;} .fade-40 {opacity: 0.40;}
.fade-50 {opacity: 0.50;} .fade-60 {opacity: 0.60;} .fade-70 {opacity: 0.70;} .fade-80 {opacity: 0.80;}
.fade-90 {opacity: 0.90;}

h2, h3, h4 { margin-top: 0px; }
h2, h4 { margin-bottom: 0px; }
h3 { padding-left: 2em; }
h4 { font-variant: small-caps; margin-left:0.25rem; margin-right:0.25rem; }

.text-smaller {font-size: smaller;}
.text-larger {font-size: larger;}
.text-xsmall, .xsmall, .x-small{  font-size: calc(var(--user-font-size) * 0.65);}
.text-small, .small{  font-size: calc(var(--user-font-size) * 0.75);}
.text-med-small{  font-size: calc(var(--user-font-size) * 0.85);}
.text-med, .text-reg, .text-normal {  font-size: calc(var(--user-font-size) * 1.0);}
.text-med-large{  font-size: calc(var(--user-font-size) * 1.15);}
.text-large { font-size: large;}
.text-xl {font-size: x-large;}
.text-xxl {font-size: xx-large;}

h1, h1, h2, h4, h5{margin:0px;}
hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1.5em 0 0.25em 0;
}

hr.divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #444, transparent);
  opacity: 0.3;
  margin: 0.33rem 0 0.4rem 0;
}


a, a:focus, a:visited {
  color: var(--chat-text-link);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease-in-out, background-color 0.2s ease;
}
a:hover, a:active {
  color: var(--chat-text-hover);
  text-decoration: none;
}

/* === GLOWY SHADOW STYLES === */

/* Retro Glow – Cyan Arcade */
.outline-retro {
  text-shadow:
    0 0 2px #0ff,
    0 0 4px #0ff,
    0 0 6px #0ff,
    0 0 8px #0ff;
}

/* Magenta Neon – Bold and sexy */
.outline-pink {
  text-shadow:
    0 0 2px #f0f,
    0 0 4px #f0f,
    0 0 6px #f0f,
    0 0 10px #c0c;
}

/* Toxic Green – Glitchcore hacker vibes */
.outline-green {
  text-shadow:
    0 0 3px #0f0,
    0 0 6px #0f0,
    0 0 10px #090;
}

/* Amber Glow – Warm soft light */
.outline-amber {
  text-shadow:
    0 0 3px #ffb347,
    0 0 6px #ffb347,
    0 0 10px #ff9900;
}

/* Blood Red – Danger baby */
.outline-red {
  text-shadow:
    0 0 2px #f33,
    0 0 5px #c00,
    0 0 10px #900;
}


/* Section elements */
.row, .column {
    display: flex;
    gap: var(--chat-spacing-md);
    flex-wrap: nowrap;
}
.row {
    align-items: flex-start;
}
.column {
    xxx-justify-content: flex-start;
    align-items: flex-start;
}
/*Stretch the contents of a column across the entire width */
.column.stretch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.auth-step-desc{margin:0 0 1rem;color:var(--chat-text-secondary,#adb5bd);font-size:.92rem;line-height:1.5;}
.auth-modal-error{margin-top:.6rem;color:var(--chat-color-danger,#e74c3c);font-size:.875rem;}
.auth-code-input{flex:1;min-width:0;letter-spacing:.2em;text-align:center;font-size:1.15em;font-family:monospace;}
.auth-resend-row{margin-top:.85rem;font-size:.8rem;color:var(--chat-text-muted,#6c757d);}
.auth-resend-row a{color:var(--chat-color-primary,#750808);}


/* ── Chat preview container ──────────────────────────────────────────────── */
.chat-container {
    background: var(--chat-bg-primary, #262626);
    color: var(--chat-text-primary, #e0e0e0);
    overflow: hidden;
    border-radius: var(--chat-radius-md, 6px);
    margin: 0.5rem;
    margin-top: 1.25rem;
    padding: 0px !important;
}

.chat-story {
    font-size: 1.2em;
    display: inline-block;
    font-variant: small-caps;
    background-color: #4d4d4d;
    color: var(--chat-color-info);
    border-radius: 0.65em;
    padding: 2px 0.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
    line-height: normal;
    margin-left: 2%;
    margin-right: 2%;
}
.chat-heading {
    font-size: 1.2em;
    color: var(--chat-color-info);
    padding: 2px 0.5rem;
    margin: 1.25rem 0;
    margin-left: 2%;
    margin-right: 2%;

}

.bot-card .muted {
    cursor: not-allowed;
    opacity: 0.75;
    filter: blur(2px);
}