/* BertaGPT — a late-2022 ChatGPT clone.
 *
 * The fidelity is the joke: the further the chrome sits from the content, the
 * better the content lands. So the palette, the alternating message rows, the
 * three-column splash and the little square avatars are all deliberate period
 * detail rather than laziness.
 *
 * What is NOT period detail: focus rings, hit targets, reduced-motion, and
 * contrast. A joke site still gets read by people on phones in the sun.
 */

:root {
  --sidebar: #202123;
  --main: #343541;
  --berta-row: #444654;
  --line: rgba(255, 255, 255, 0.12);
  --ink: #ececf1;
  --ink-2: #c5c5d2;
  --ink-3: #8e8ea0;
  --accent: #19c37d;
  --danger: #ef4146;
  --composer: #40414f;
  --radius: 6px;
  --sans: "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Söhne Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* The [hidden] attribute is display:none in the UA sheet, which ANY class-level
   display rule outranks. .gate is display:grid and .regen-wrap is display:flex,
   so both stayed visible while their JS dutifully set hidden = true -- the gate
   dismissed itself and remained on screen. Restore the attribute's authority
   once, here, rather than remembering it at every call site. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--main);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

button, textarea { font: inherit; color: inherit; }

a { color: var(--ink-2); }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only, .skip {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px;
  width: auto; height: auto; clip: auto;
  background: var(--accent); color: #06231a;
  padding: 10px 16px; border-radius: var(--radius); z-index: 60;
  font-weight: 600;
}

/* ---------------------------------------------------------------- consent */

.gate {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  display: grid; place-items: center;
  padding: 20px;
}
.gate-card {
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 560px;
  padding: 28px;
  max-height: 90vh; overflow-y: auto;
}
.gate-card h1 { margin: 0 0 14px; font-size: 24px; }
.gate-card ul { margin: 0 0 22px; padding-left: 20px; color: var(--ink-2); }
.gate-card li { margin-bottom: 11px; }
.gate-card b { color: var(--ink); }
.gate-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.primary {
  background: var(--accent); color: #06231a;
  border: 0; border-radius: var(--radius);
  padding: 11px 22px; font-weight: 600; cursor: pointer;
}
.primary:hover { filter: brightness(1.08); }
.gate-no { font-size: 14px; color: var(--ink-3); }


/* ------------------------------------------------------------- background */

.bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* The plate is a bright photograph -- yellow field, pale sky -- on a dark
     page, so it reads far stronger than the number suggests. Four percent, and
     desaturated, is where it stops looking like a picture behind the text and
     starts looking like the room has a window in it. */
  opacity: 0.042;
  filter: saturate(0.75);
}

/* Scrim. The brightest band of the plate is the sky, which lands exactly where
   the masthead and the composer sit, and lifting those two areas is what would
   cost text contrast. Darkening top and bottom keeps the middle open. */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    var(--main) 0%,
    rgba(52, 53, 65, 0.15) 22%,
    rgba(52, 53, 65, 0.15) 62%,
    var(--main) 100%
  );
}
/* object-fit: cover handles the sizing, and there is no second layer that has
   to stay registered against the first any more -- the pump moves inside the
   footage now rather than on top of it. */
.bg-video, .bg-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The still is the reduced-motion fallback and the poster is the same file, so
   there is no flash of a different image while the video loads. */
.bg-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
  .bg-still { display: block; }
}

.app { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ shell */

.app { display: flex; height: 100%; }

.sidebar {
  width: 260px; flex: none;
  background: rgba(32, 33, 35, 0.94);
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.newchat {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; text-align: left; cursor: pointer;
}
.newchat:hover { background: rgba(255, 255, 255, 0.06); }

.history { flex: 1; overflow-y: auto; margin-top: 8px; }
.hist-label {
  font-size: 12px; color: var(--ink-3);
  padding: 12px 10px 6px; text-transform: none;
}
.hist-item {
  display: flex; align-items: center;
  border-radius: var(--radius);
}
.hist-item:hover, .hist-item.on { background: rgba(255, 255, 255, 0.08); }
.hist-open {
  flex: 1; min-width: 0;
  background: none; border: 0; cursor: pointer;
  padding: 10px; text-align: left;
  font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-item:hover .hist-open, .hist-item.on .hist-open { color: var(--ink); }
/* The delete only appears on hover or keyboard focus -- and :focus-within is
   what keeps it reachable by tab, since a control that exists only on hover
   does not exist at all for anyone not using a mouse. */
.hist-del {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 17px; line-height: 1;
  padding: 8px 10px; opacity: 0; flex: none;
}
.hist-item:hover .hist-del, .hist-item:focus-within .hist-del { opacity: 1; }
.hist-del:hover { color: var(--danger); }
.hist-empty { padding: 12px 10px; font-size: 13px; color: var(--ink-3); }

.side-foot { border-top: 1px solid var(--line); padding-top: 8px; display: grid; }
.side-link {
  background: none; border: 0; text-align: left;
  padding: 10px; font-size: 14px; color: var(--ink-2);
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
}
.side-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: transparent; }

.mobile-bar {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--sidebar); font-size: 15px;
}
.icon-btn {
  background: none; border: 0; padding: 8px 12px;
  font-size: 18px; cursor: pointer; color: var(--ink);
}

.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* ----------------------------------------------------------------- splash */

.splash { max-width: 760px; margin: 0 auto; padding: 9vh 20px 32px; }
.brand {
  text-align: center; font-size: 30px; font-weight: 600;
  margin: 0 0 34px; letter-spacing: -0.01em;
}
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.col { display: grid; gap: 9px; align-content: start; }
.col-h {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 16px; margin-bottom: 2px;
}
.ico { font-size: 20px; }
.ex, .cap {
  background: rgba(255, 255, 255, 0.06);
  border: 0; border-radius: var(--radius);
  padding: 11px 12px; font-size: 13px; text-align: center;
  color: var(--ink-2); line-height: 1.4;
}
.ex { cursor: pointer; }
.ex:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }

/* --------------------------------------------------------------- messages */

.row { border-bottom: 1px solid var(--line); }
.row.berta { background: rgba(68, 70, 84, 0.9); }
.row-inner {
  max-width: 768px; margin: 0 auto;
  padding: 20px 20px; display: flex; gap: 16px;
}
.avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 2px; /* squares, not circles — that's the period detail */
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.avatar.you { background: #9859b4; }
.avatar.him { background: var(--accent); }

.msg { min-width: 0; flex: 1; }
.msg p { margin: 0 0 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg p:last-child { margin-bottom: 0; }
.msg strong { color: #fff; }

/* Code: the joke and the mitigation in one component. Plausible-looking wrong
   code is the realest hazard on this site, and labelling it is funnier than
   hiding it. */
.code { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; }
.code-bar {
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  padding: 5px 12px; display: flex; justify-content: space-between;
}
.code-bar .lang { opacity: 0.85; font-weight: 400; letter-spacing: 0.03em; }
.code pre {
  margin: 0; background: #0d0d12; padding: 14px;
  overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
}
.msg code {
  font-family: var(--mono); font-size: 0.9em;
  background: rgba(0, 0, 0, 0.28); padding: 1px 5px; border-radius: 3px;
}

.cursor {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--ink); vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.votes { display: flex; gap: 4px; margin-top: 12px; }
.vote {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 5px 7px; border-radius: 4px; font-size: 14px;
}
.vote:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.vote[aria-pressed="true"] { color: var(--accent); }
.vote.down[aria-pressed="true"] { color: var(--danger); }

.note-box { display: flex; gap: 8px; margin-top: 10px; }
.note-box input {
  flex: 1; background: rgba(0, 0, 0, 0.25); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 11px; font: inherit; font-size: 14px;
}
.note-box button {
  background: rgba(255, 255, 255, 0.1); border: 0; color: var(--ink);
  border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font-size: 14px;
}
.thanks { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* --------------------------------------------------------------- composer */

.composer-wrap {
  padding: 0 20px 12px;
  background: linear-gradient(180deg, transparent, var(--main) 22%);
}
.regen-wrap { max-width: 768px; margin: 0 auto 10px; display: flex; justify-content: center; }
.regen {
  background: var(--composer); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--radius);
  padding: 9px 15px; font-size: 14px; cursor: pointer;
}
.regen:hover { background: #4a4b57; }

.composer {
  max-width: 768px; margin: 0 auto;
  background: var(--composer);
  border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 12px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
}
.composer textarea {
  flex: 1; background: none; border: 0; resize: none;
  max-height: 200px; padding: 2px 0; outline: none;
}
.composer textarea::placeholder { color: var(--ink-3); }
.send {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 4px 8px; border-radius: 4px; font-size: 15px;
}
.send:hover:not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.send:disabled { opacity: 0.35; cursor: default; }

.disclaimer {
  max-width: 768px; margin: 9px auto 0;
  text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.5;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; gap: 18px; }
  .splash { padding-top: 6vh; }
  .brand { margin-bottom: 28px; }
  .mobile-bar { display: flex; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .sidebar.open { transform: none; }
  .row-inner { padding: 20px 14px; gap: 13px; }
  .composer-wrap { padding: 0 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .cursor { visibility: visible; }
  /* The video is swapped for the still image above; nothing needs pausing. */
}

/* Turnstile. Rendered only when a sitekey is configured, and in
   interaction-only mode, so for almost everybody this is an empty div that
   never appears. */
.turnstile { max-width: 800px; margin: 0 auto 10px; display: flex; justify-content: center; }
.turnstile:empty { display: none; }