/* meZENger P1B – Nachtpost. Linke Achse, kein mittiger Block.
   Die Farbe kommt aus dem Gegenstand: ein Gespräch unter vier Augen, spät
   am Abend – dunkle Tinte als Grund, die eigene Stimme als warmes Glühen.
   Der eine Bruch: das ZEN im Schriftzug glüht im selben Verlauf wie die
   eigenen Nachrichten, sonst bleibt alles ruhig. */
:root {
  --grund: #0f1117; --flaeche: #161922; --erhaben: #1e2230; --linie: #2a2f3d;
  --tinte: #eef0f5; --leise: #8b91a3; --still: #5d6375;
  --glut-a: #ff7a45; --glut-b: #e8457c; --glut: linear-gradient(135deg, var(--glut-a), var(--glut-b));
  --gruen: #4fd1a5; --gelb: #f2c14e; --rot: #ff6b6b;
  --rund: 20px;
  font: 16px/1.45 "SF Pro Text", -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--tinte); background: var(--grund);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
b { font-weight: 800; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: var(--glut); color: #fff; padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; font-weight: 600; transition: transform .12s ease, filter .12s ease; }
button:hover { filter: brightness(1.08); }
button:active { transform: scale(.96); }
button.leise { background: transparent; color: var(--still); padding: .4rem 0; text-align: left; font-weight: 400; font-size: .8rem; border-radius: 0; }
button.leise:hover { color: var(--rot); }
input, textarea { border: 1px solid var(--linie); background: var(--erhaben); border-radius: 14px; padding: .65rem .9rem; width: 100%; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus { border-color: var(--glut-b); box-shadow: 0 0 0 3px rgba(232, 69, 124, .18); }
::placeholder { color: var(--still); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wortmarke b, h1 b { background: var(--glut); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Anmeldung: die Achse liegt links, der Raum rechts glüht leise. */
#anmeldung { min-height: 100dvh; display: flex;
  background: radial-gradient(60rem 40rem at 110% -10%, rgba(232, 69, 124, .22), transparent 60%),
              radial-gradient(40rem 30rem at 120% 110%, rgba(255, 122, 69, .14), transparent 60%), var(--grund); }
#anmeldung .achse { width: min(32rem, 100%); padding: 14vh 2rem 2rem clamp(1.5rem, 9vw, 8rem); border-left: 3px solid; border-image: var(--glut) 1; }
.marke { letter-spacing: .35em; font-size: .72rem; color: var(--leise); margin: 0; }
#anmeldung h1 { font-size: clamp(3rem, 12vw, 5rem); margin: .2rem 0 1rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.satz { color: var(--leise); margin: 0 0 2.4rem; max-width: 24rem; }
#anmelden { display: grid; gap: 1rem; }
#anmelden label { display: grid; gap: .35rem; font-size: .85rem; color: var(--leise); }
#anmelden button { justify-self: start; margin-top: .4rem; padding: .7rem 1.6rem; }
.fehler { color: var(--rot); min-height: 1.2em; margin: 0; }
.stand { margin-top: 3rem; font-size: .75rem; color: var(--still); }

/* Hauptansicht */
/* --hoehe setzt main.js aus dem sichtbaren Ausschnitt (Tastatur); ohne
   Skript gilt 100dvh. Die Seite selbst scrollt in der Hauptansicht nie,
   nur Liste und Verlauf – sonst schiebt Chrome sie beim Schreiben hoch.
   Die Anmeldung bleibt scrollbar, sonst schnitte die Tastatur sie ab. */
#haupt { display: grid; grid-template-columns: 20rem 1fr; height: var(--hoehe, 100dvh); }
body:has(> #haupt:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
aside { background: var(--flaeche); border-right: 1px solid var(--linie); padding: 1.4rem 1.1rem; display: flex; flex-direction: column; gap: 1.1rem; overflow: auto; }
aside h1 { font-size: 1.9rem; font-weight: 300; letter-spacing: -.02em; margin: 0; }
#ich { margin: .2rem 0 0; font-size: .75rem; color: var(--still); word-break: break-all; }
#neu { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }
#neu button { padding: .5rem .9rem; font-size: .85rem; }
#chats { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; flex: 1; align-content: start; }
#chats button { width: 100%; display: flex; align-items: center; gap: .8rem; text-align: left; background: transparent; color: var(--tinte); border-radius: 14px; padding: .55rem .7rem; font-weight: 500; }
#chats button:hover { background: var(--erhaben); filter: none; }
#chats button.aktiv { background: var(--erhaben); box-shadow: inset 3px 0 0 var(--glut-b); }
#chats button::before, #chat-kopf h2::before {
  content: attr(data-initial); flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, #5b6cff, #a45bff);
}
#anfragen { position: fixed; left: clamp(.8rem, 3vw, 1.2rem); top: 1rem; z-index: 5; display: grid; gap: .5rem; max-width: 22rem; }
.anfrage { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); border-left: 3px solid var(--gelb); background: var(--erhaben); border-radius: 12px; padding: .7rem .9rem; display: grid; gap: .45rem; font-size: .9rem; }
.anfrage button { justify-self: start; padding: .4rem .9rem; }
#verbindung { color: var(--gelb); font-size: .8rem; margin: 0; }

main { display: flex; flex-direction: column; min-height: 0;
  background: radial-gradient(50rem 30rem at 100% 0%, rgba(232, 69, 124, .07), transparent 70%), var(--grund); }
#chat-kopf { padding: .8rem 1.4rem; border-bottom: 1px solid var(--linie); display: flex; gap: .4rem 1rem; align-items: center; flex-wrap: wrap;
  background: rgba(15, 17, 23, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#chat-kopf h2 { margin: 0; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: .7rem; }
#chat-kopf h2::before { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
#schloss { margin: 0; font-size: .72rem; padding: .18rem .6rem; border-radius: 999px; border: 1px solid currentColor; }
#schloss.gruen { color: var(--gruen); } #schloss.gelb { color: var(--gelb); } #schloss.rot { color: var(--rot); }
#best-knopf { margin-left: auto; font-size: .8rem; padding: .4rem .9rem; }
#zurueck { display: none; }

#verlauf { flex: 1; overflow: auto; padding: 1.2rem 1.4rem .6rem; display: flex; flex-direction: column; gap: .55rem; }
.zeile { flex: none; max-width: min(34rem, 82%); padding: .6rem .9rem .45rem; border-radius: var(--rund); border-bottom-left-radius: 6px; background: var(--erhaben); align-self: flex-start; position: relative; }
.zeile.ich { align-self: flex-end; background: var(--glut); color: #fff; border-radius: var(--rund); border-bottom-right-radius: 6px; box-shadow: 0 6px 22px rgba(232, 69, 124, .22); }
.zeile.folge { margin-top: -.35rem; }
.zeile.du.folge { border-top-left-radius: 6px; }
.zeile.ich.folge { border-top-right-radius: 6px; }
.zeile.neu { animation: herein .28s cubic-bezier(.2, .8, .2, 1) both; }
.zeile.ich.neu { transform-origin: 100% 100%; }
.zeile.du.neu { transform-origin: 0 100%; }
@keyframes herein { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.zeile .text { white-space: pre-wrap; word-wrap: break-word; }
.zeile time { display: block; font-size: .66rem; opacity: .6; margin-top: .15rem; text-align: right; font-variant-numeric: tabular-nums; }
.zeile.fehlt { font-style: italic; color: var(--leise); background: transparent; border: 1px dashed var(--linie); box-shadow: none; }
.zeile.bild { padding: .3rem; overflow: hidden; }
.zeile.bild time, .zeile.bild a { padding: 0 .5rem .2rem; }
.zeile img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--rund) - 4px); }
.zeile a { color: inherit; font-size: .78rem; display: inline-block; margin-top: .3rem; opacity: .85; }
#hinweis { margin: 0 1.4rem; font-size: .8rem; color: var(--leise); min-height: 1.1em; }

#schreiben { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; padding: .7rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); align-items: end; }
#eingabe { resize: none; max-height: 10rem; border-radius: 22px; padding: .7rem 1.1rem; line-height: 1.35; }
.rund { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.foto { background: var(--erhaben); border: 1px solid var(--linie); cursor: pointer; color: var(--leise); transition: color .15s ease; }
.foto:hover { color: var(--tinte); }
.foto input { display: none; }
.senden svg { width: 20px; height: 20px; stroke-width: 2.4; }
#zurueck { background: transparent; color: var(--tinte); width: 2.2rem; height: 2.2rem; }

#bestaetigung { position: fixed; inset: 0; background: rgba(5, 6, 10, .7); backdrop-filter: blur(6px); display: flex; align-items: flex-start; z-index: 10; }
#bestaetigung > div { background: var(--flaeche); margin: 18vh 1rem 0 clamp(1rem, 9vw, 8rem); padding: 1.6rem 2rem; border-left: 3px solid; border-image: var(--glut) 1; max-width: 30rem; }
#best-zahlen { font: 600 2rem/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
#best-nein { margin-left: 1rem; }

/* Schlüsselsicherung: in der Liste, linke Achse wie die Anmeldung. */
#sicherung { border-left: 3px solid var(--gelb); background: var(--erhaben); border-radius: 0 14px 14px 0; padding: .8rem .95rem; display: grid; gap: .55rem; font-size: .88rem; }
#sicherung[data-zustand="schluessel"], #sicherung[data-zustand="fertig"] { border-left-color: var(--gruen); }
#sicherung p { margin: 0; }
#sicherung .marke { font-size: .66rem; }
#sicherung button { justify-self: start; padding: .45rem 1rem; font-size: .85rem; }
#sicherung button.leise { padding: .2rem 0; }
#sich-schluessel { font: 600 1rem/1.5 ui-monospace, Menlo, monospace; letter-spacing: .04em; word-spacing: .3em; background: var(--grund); border-radius: 10px; padding: .6rem .7rem; user-select: all; word-break: break-word; }
#sich-form { display: grid; gap: .45rem; }
#sich-eingabe { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.zeile button.einlesen { display: block; margin-top: .45rem; padding: .35rem .9rem; font-size: .8rem; }
#einlesen { position: fixed; inset: 0; background: rgba(5, 6, 10, .7); backdrop-filter: blur(6px); display: flex; align-items: flex-start; z-index: 10; }
#einlesen-form { background: var(--flaeche); margin: 18vh 1rem 0 clamp(1rem, 9vw, 8rem); padding: 1.6rem 2rem; border-left: 3px solid; border-image: var(--glut) 1; max-width: 30rem; display: grid; gap: .7rem; }
#einlesen-form p { margin: 0; }
#einlesen-form button { justify-self: start; }

#geteilt { position: fixed; left: clamp(.6rem, 3vw, 1.2rem); right: clamp(.6rem, 3vw, 1.2rem); bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 6;
  max-width: 30rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem;
  background: var(--erhaben); border-radius: 16px; border-left: 3px solid var(--glut-b); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
#geteilt p { margin: 0; flex: 1 1 100%; font-size: .9rem; word-break: break-word; }
#geteilt button.leise { padding: .4rem 0; }

@media (max-width: 720px) {
  #haupt { grid-template-columns: 1fr; }
  #haupt:has(#chat:not([hidden])) aside { display: none; }
  aside { border-right: 0; }
  #chat-kopf { padding: .6rem .8rem; padding-top: calc(.6rem + env(safe-area-inset-top)); }
  #zurueck { display: grid; }
  #schloss { order: 3; margin-left: 2.6rem; }
  #best-knopf { order: 4; margin-left: 0; padding: .3rem .8rem; font-size: .75rem; }
  #verlauf { padding: 1rem .8rem .5rem; }
  .zeile { max-width: 86%; }
  #schreiben { padding-left: .7rem; padding-right: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .zeile.neu { animation: none; } button { transition: none; } }