/* =====================================================================
   MAX – öffentliche Seite (/max/)
   Dunkles, cleanes Layout im Stil von ibetmax.com. Fokus liegt ganz
   auf Max und der Kommunikation. Namespace: .max-page / max-*.
   ===================================================================== */
:root{
  --bg:      #07080b;
  --fg:      rgba(255,255,255,.92);
  --muted:   rgba(255,255,255,.72);
  --faint:   rgba(255,255,255,.50);
  --teal:    #12c5bc;
  --violet:  #b39dff;
  --border:  rgba(255,255,255,.10);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body.max-page{
  background:
    radial-gradient(900px 620px at 50% 32%, rgba(18,197,188,.08), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}

/* ── Bühne / Chat-Shell ─────────────────────────────────────── */
.max-main{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:8px 24px 24px; width:100%; max-width:720px; margin:0 auto;
}
.max-shell{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:8px;
}
/* hidden-Attribut muss auch gegen display:flex-Regeln gewinnen –
   sonst blockieren unsichtbare Elemente (z. B. die Beispiel-Chips)
   weiterhin Platz zwischen Verlauf und Eingabe.                     */
.max-chat[hidden], .max-examples[hidden], .max-jump[hidden],
.max-shell-title[hidden]{ display:none !important; }
.max-stage-mount{ width:min(52vmin, 320px); }

/* Kopf: vor der ersten Frage gestapelt (große Figur mittig),
   im Chat-Modus kompakte horizontale Leiste                          */
.max-shell-head{
  display:flex; flex-direction:column; align-items:center; gap:4px; width:100%;
}
.max-shell-info{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.max-shell-title{
  font-family:'Courier New', monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}

/* ══ Chat-Modus: Shell füllt den Viewport zwischen Header und Fuß ══
   Kopf und Eingabe bleiben sichtbar, nur der Verlauf scrollt.        */
.max-page--chatting .max-main{
  justify-content:flex-start; padding-top:10px; padding-bottom:10px;
}
.max-page--chatting .max-shell{
  height:calc(100vh - var(--ibm-gh-height, 60px) - 28px);
  height:calc(100dvh - var(--ibm-gh-height, 60px) - 28px);
  gap:4px;
}
.max-page--chatting .max-shell-head{
  flex-direction:row; justify-content:center; gap:14px; flex-shrink:0;
  padding:4px 0 6px; border-bottom:1px solid var(--border);
}
.max-page--chatting .max-stage-mount{ width:min(24vmin, 96px); }
.max-page--chatting .max-shell-info{ align-items:flex-start; }
.max-page--chatting .max-line{
  margin-top:2px; font-size:13px; justify-content:flex-start; text-align:left;
  min-height:1.4em; padding:0;
}

/* ── Terminal-Textzeile (Hero-Schrift-Verwandt) ─────────────── */
.max-line{
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:'Courier New', Courier, monospace;
  font-size:clamp(15px, 2.4vw, 20px); letter-spacing:.03em;
  color:var(--teal); min-height:1.6em; margin-top:18px;
  max-width:100%; text-align:center; justify-content:center;
  padding:0 8px; word-break:break-word;
}
/* Symbol vor dem Text – leicht austauschbar über data-symbol / CSS */
.max-line-symbol{ display:inline-block; min-width:12px; text-align:center; flex-shrink:0; }
.max-line-text{ display:inline-block; }
.max-line-cursor{
  display:inline-block; line-height:1; flex-shrink:0;
  animation:maxCurBlink .7s step-end infinite;
}
@keyframes maxCurBlink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Eingabe ────────────────────────────────────────────────── */
/* Eingabeleiste: im Chat-Modus fester unterer Bereich der Shell */
.max-shell-foot{
  width:100%; max-width:680px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-top:18px;
}
.max-page--chatting .max-shell-foot{
  margin-top:0; padding-top:5px;
  border-top:1px solid var(--border);
  background:linear-gradient(rgba(7,8,11,0), rgba(7,8,11,.6));
}
.max-composer{
  display:flex; align-items:flex-end; gap:10px; width:100%; max-width:560px;
}
.max-page--chatting .max-composer{ max-width:640px; }
.max-input{
  flex:1; resize:none;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:16px;
  color:var(--fg); font-family:inherit; font-size:15px; line-height:1.5;
  padding:13px 16px; min-height:50px; max-height:140px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.max-input::placeholder{ color:var(--faint); }
.max-input:focus{
  border-color:rgba(18,197,188,.55);
  box-shadow:0 0 0 3px rgba(18,197,188,.10);
}
.max-input:disabled{ opacity:.55; }

.max-send{
  flex-shrink:0; width:50px; height:50px; border-radius:14px;
  background:var(--teal); color:#04201f; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; transition:background .2s, box-shadow .2s, transform .12s;
}
.max-send:hover{ background:#0fb5ac; box-shadow:0 0 22px rgba(18,197,188,.4); }
.max-send:active{ transform:scale(.94); }
.max-send:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.max-send:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ── Fußzeile: Datenschutz links, Sound rechts (eine Zeile) ── */
.max-foot-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; max-width:640px; margin-top:2px;
}
.max-sound{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Courier New', monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
  background:transparent; border:1px solid var(--border); border-radius:100px;
  padding:6px 13px; cursor:pointer; transition:.2s;
}
.max-sound:hover{ color:var(--muted); border-color:rgba(18,197,188,.4); }
.max-sound:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.max-sound[aria-pressed="true"]{ color:var(--teal); border-color:rgba(18,197,188,.4); }
.max-sound .max-sound-ico{ font-size:12px; }

.max-foot{
  text-align:center; color:var(--faint); font-size:12px;
  padding:16px; border-top:1px solid var(--border);
}

/* ══ Sprint 4: Gesprächsverlauf, Quellen, Beispiele, Hinweise ══ */

/* ── Verlauf ──
   Im Chat-Modus füllt er den Raum zwischen Kopf und Eingabeleiste
   (flex:1) und scrollt ausschließlich intern.                       */
.max-chat{
  width:100%; max-width:680px; position:relative;
  display:flex; flex-direction:column; min-height:0;
}
.max-page--chatting .max-chat{ flex:1; }
.max-chat-log{
  display:flex; flex-direction:column; gap:12px;
  flex:1; min-height:0; overflow-y:auto;
  padding:6px 6px 8px;                  /* unten Luft: Blasen-Rundung bleibt sichtbar */
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
@media (prefers-reduced-motion: reduce){
  .max-chat-log{ scroll-behavior:auto; }
}

/* „Zur neuesten Antwort“, wenn der Nutzer weit hochgescrollt hat */
.max-jump{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(7,8,11,.92); color:var(--teal);
  border:1px solid rgba(18,197,188,.45); border-radius:100px;
  font-family:inherit; font-size:12.5px; padding:8px 14px; min-height:38px;
  cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.max-jump:hover{ background:rgba(18,197,188,.12); }
.max-jump:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.max-msg{ display:flex; width:100%; }
.max-msg--user{ justify-content:flex-end; }
.max-msg--max{
  flex-direction:column; align-items:flex-start; gap:8px;
}
/* Max-Antwort + Quellen nutzen die volle Log-Breite: linke Kante bleibt,
   die rechte endet auf Höhe der rechten Kante der Nutzerfrage.
   Beide Blöcke exakt gleich breit (Anforderung Layoutkorrektur #2).     */
.max-msg--max .max-bubble,
.max-msg--max .max-msg-sources{
  width:100%; max-width:100%;
}

.max-bubble{
  max-width:86%; border-radius:16px; padding:11px 15px;
  font-size:15px; line-height:1.6; word-break:break-word;
  overflow-wrap:anywhere;
}
.max-msg--user .max-bubble{
  background:rgba(255,255,255,.07); border:1px solid var(--border);
  color:var(--fg); border-bottom-right-radius:6px;
}
.max-msg--max .max-bubble{
  background:rgba(18,197,188,.07); border:1px solid rgba(18,197,188,.22);
  color:var(--fg); border-bottom-left-radius:6px;
}
.max-bubble-text{ white-space:pre-wrap; }
.max-bubble--typing{ cursor:pointer; }
.max-bubble--typing .max-bubble-text::after{
  content:'▌'; color:var(--teal);
  animation:maxCurBlink .7s step-end infinite;
}
@media (prefers-reduced-motion: reduce){
  .max-bubble--typing .max-bubble-text::after{ animation:none; }
}

/* ── Grounding-Kennzeichnung + Quellenkarten ──
   Eigener Block UNTER der Antwortblase (nicht mehr darin),
   bleibt aber im selben .max-msg der jeweiligen Antwort.            */
.max-msg-sources{
  width:100%;
}
.max-grounded{
  font-family:'Courier New', monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); opacity:.85; margin-bottom:6px;
}
.max-sources{ display:flex; flex-direction:column; gap:7px; }
.max-source{
  display:flex; flex-direction:column; gap:1px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:11px; padding:9px 12px; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.max-source:hover{ border-color:rgba(18,197,188,.5); background:rgba(18,197,188,.06); }
.max-source:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.max-source-title{ color:var(--fg); font-size:13.5px; font-weight:600; }
.max-source-heading{ color:var(--muted); font-size:12.5px; }
.max-source-cta{ color:var(--teal); font-size:12px; margin-top:3px; }

/* ── Offtopic-Tipp: eigener Geschwisterblock UNTER der Blase ──
   (überlagert die Blase nicht, alle vier Rundungen bleiben frei)   */
.max-hint{
  width:100%; max-width:100%;
  background:rgba(255,255,255,.03); border:1px dashed var(--border);
  border-radius:11px; padding:8px 12px;
  color:var(--muted); font-size:13px;
}
/* Abschlussmarker: Blase nach dem Typewriter eindeutig geschlossen */
.max-bubble--done{ }

/* ── Beispiel-Fragen ── */
.max-examples{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  width:100%; max-width:560px; margin-top:18px;
  transition:opacity .4s, transform .4s;
}
.max-example{
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--muted); border-radius:100px; padding:9px 14px;
  font-family:inherit; font-size:13px; cursor:pointer; min-height:38px;
  transition:color .2s, border-color .2s;
}
.max-example:hover{ color:var(--teal); border-color:rgba(18,197,188,.5); }
.max-example:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.max-examples--gone{ opacity:0; transform:translateY(4px); pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .max-examples{ transition:none; }
}

/* ── Zeichenzähler + Datenschutzhinweis ── */
.max-counter{
  width:100%; max-width:560px; text-align:right;
  font-family:'Courier New', monospace; font-size:11px;
  color:var(--faint); margin-top:2px; padding-right:62px;
}
.max-counter:empty{ display:none; }
.max-privacy{
  flex:1; min-width:0; margin:0;
  color:var(--faint); font-size:10.5px; line-height:1.5; text-align:left;
}
.max-privacy a{ color:var(--muted); text-decoration:underline; }
.max-privacy a:hover{ color:var(--teal); }
.max-privacy a:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* ── Reduzierte Bewegung ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .max-badge .max-dot{ animation:none; }
  .max-line-cursor{ animation:none; }
}

@media (max-width:600px){
  .max-stage-mount{ width:min(48vmin, 210px); }
  .max-main{ justify-content:flex-start; padding-top:14px; padding-left:14px; padding-right:14px; }
  .max-page--chatting .max-stage-mount{ width:64px; }
  .max-page--chatting .max-shell{
    height:calc(100vh - var(--ibm-gh-height, 60px) - 20px);
    height:calc(100dvh - var(--ibm-gh-height, 60px) - 20px);
  }
  .max-page--chatting .max-shell-head{ gap:10px; }
  .max-page--chatting .max-line{ font-size:12px; }
  .max-bubble{ max-width:94%; font-size:14.5px; }
  .max-examples{ margin-top:14px; }
  .max-example{ font-size:12.5px; padding:9px 12px; }
  .max-counter{ padding-right:0; }
  .max-foot-row{ gap:10px; }
  .max-privacy{ font-size:9.5px; }
}