/* ============================================================
 * faktoderfake.com — Chat-UI v4.0 (19.05.2026)
 * Mimikama-WhatsApp-Style Redesign
 * ============================================================ */

/* DSGVO-konform: KEIN Google-Fonts-Import. Manrope wird lokal aus
 * /assets/fonts/ geladen — siehe @font-face-Definitionen in index.php,
 * datenschutz.html und impressum.html. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === FARBPALETTE C — "RUHIG" (21.05.2026) === */
  /* Off-White Beige, Blaugrau (Mimikama-Brand 2026), Rotbraun für Aktion */
  --fof-paper: #FAFAF8;
  --fof-paper-warm: #FAFAF8;
  --fof-surface: #FFFFFF;
  --fof-ink: #2A2A2A;
  --fof-ink-soft: #4A4A4A;
  --fof-ink-mute: #8A8A8A;
  --fof-line: #EFEDE8;
  --fof-line-soft: #F5F3EE;

  --fof-teal: #5F7880;
  --fof-teal-dark: #485E66;
  --fof-teal-soft: #E4EBEE;
  --fof-offwhite: #EFEDE8;

  --fof-true: #5F7A5E;
  --fof-true-bg: #E8EDE6;
  --fof-true-deep: #3D5A3D;
  --fof-false: #A4574F;
  --fof-false-bg: #F0DAD6;
  --fof-false-deep: #7D3F39;
  --fof-warn: #B28A5C;
  --fof-warn-bg: #F1E5D2;
  --fof-warn-deep: #8F6C42;

  --fof-user-bubble: #E4EBEE;
}

html, body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--fof-paper-warm);
  color: var(--fof-ink);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
body { background: #FAFAF8; }

#fof-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 760px;
  margin: 0 auto;
  background: var(--fof-paper);
  box-shadow: 0 0 40px rgba(0,0,0,0.05);
}

/* ============ PAGE-FOOTER (außerhalb der App) ============ */
.fof-page-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--fof-line);
  font-size: 12px;
  color: var(--fof-ink-mute);
  line-height: 1.7;
}
.fof-page-footer-brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--fof-ink);
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
.fof-page-footer-brand .w-sep { color: var(--fof-ink-mute); font-weight: 500; margin: 0 4px; }
.fof-page-footer-brand .w-fake { color: var(--fof-false); }
.fof-page-footer-claim {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.fof-page-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
}
.fof-page-footer-links a {
  color: var(--fof-teal);
  text-decoration: none;
  font-weight: 700;
  padding: 0 8px;
  border-right: 1px solid var(--fof-line);
}
.fof-page-footer-links a:last-child { border-right: none; }
.fof-page-footer-links a:hover { color: var(--fof-teal-dark); text-decoration: underline; }
@media (max-width: 480px) {
  .fof-page-footer-links a { font-size: 11.5px; padding: 0 6px; }
}

.fof-header {
  padding: 14px 18px;
  background: var(--fof-paper-warm);
  border-bottom: 0.5px solid var(--fof-line);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; z-index: 10;
}
/* Mobile-Header-Logo (21.05.2026): Auf Mobile zeigen, auf Desktop versteckt (Sidebar übernimmt)
 * HINWEIS: Die kompletten Mobile-Override-Regeln stehen am ENDE der Datei,
 * damit sie die späteren CSS-Blöcke (v4.6 etc.) sicher überschreiben. */
.fof-header-logo-link {
  display: flex; align-items: center; line-height: 0; flex-shrink: 1; min-width: 0;
  text-decoration: none;
}
.fof-header-logo {
  display: block; max-height: 38px; width: auto; height: auto; max-width: 100%;
  object-fit: contain; object-position: center center;
}
.fof-header-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fof-teal) 0%, var(--fof-teal-dark) 100%);
  display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(77,112,118,0.25);
}
.fof-header-avatar .fof-owl { width: 28px; height: 28px; fill: #fff; }
.fof-header-avatar::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 13px; height: 13px; background: var(--fof-true);
  border: 2.5px solid var(--fof-paper-warm); border-radius: 50%;
}
.fof-header-info { flex: 1; min-width: 0; }
.fof-header-name {
  font-weight: 800; font-size: 17px; color: var(--fof-ink); letter-spacing: -0.6px;
  display: flex; align-items: center; gap: 2px;
}
.fof-header-name .w-sep { color: var(--fof-ink-mute); font-weight: 400; margin: 0 3px; }
.fof-header-name .w-fake { color: var(--fof-false); }
.fof-header-name-verified {
  width: 14px; height: 14px; background: var(--fof-teal); border-radius: 50%;
  color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-left: 6px;
}
.fof-header-status {
  font-size: 11.5px; color: var(--fof-ink-mute); font-weight: 600;
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.fof-header-status .live-dot {
  width: 6px; height: 6px; background: var(--fof-true); border-radius: 50%;
  animation: fof-pulse 1.6s ease-in-out infinite;
}
@keyframes fof-pulse { 50% { opacity: 0.4; transform: scale(0.85); } }
.fof-header-menu { color: var(--fof-ink); font-size: 24px; opacity: 0.5; cursor: pointer; padding: 0 6px; }

.fof-chat {
  flex: 1; overflow-y: auto;
  background-color: var(--fof-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%234D7076' fill-opacity='0.04'><circle cx='40' cy='40' r='12'/><circle cx='130' cy='95' r='12'/><circle cx='60' cy='150' r='12'/></g><g fill='%234D7076' fill-opacity='0.035' font-family='Manrope,sans-serif' font-weight='900' font-size='8'><text x='75' y='44'>F·F?</text><text x='15' y='105'>F·F?</text><text x='100' y='155'>F·F?</text></g></svg>");
  background-repeat: repeat; background-size: 180px 180px;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.fof-chat::-webkit-scrollbar { width: 4px; }
.fof-chat::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.fof-welcome { text-align: center; padding: 32px 24px 0; }
.fof-welcome-avatar {
  width: 80px; height: 80px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--fof-teal) 0%, var(--fof-teal-dark) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 12px 30px rgba(77,112,118,0.3), 0 0 0 5px rgba(255,255,255,0.7);
}
.fof-welcome-avatar .fof-owl { width: 50px; height: 50px; fill: #fff; }
.fof-welcome-pulse {
  position: absolute; inset: -8px; border: 2px solid var(--fof-teal);
  border-radius: 50%; opacity: 0.4; animation: fof-ripple 2.5s ease-out infinite;
}
@keyframes fof-ripple {
  0% { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1.18); opacity: 0; }
}
.fof-welcome-brand {
  font-weight: 800; font-size: 34px; letter-spacing: -1.5px; line-height: 1; margin-bottom: 8px;
}
.fof-welcome-brand .w-fakt { color: var(--fof-ink); }
.fof-welcome-brand .w-sep { color: var(--fof-ink-mute); font-weight: 500; }
.fof-welcome-brand .w-fake { color: var(--fof-false); }
.fof-welcome-sub {
  font-size: 14px; color: var(--fof-ink-soft); line-height: 1.45;
  max-width: 320px; margin: 0 auto; font-weight: 500;
  background: rgba(255,255,255,0.75); padding: 10px 14px; border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fof-welcome-stats {
  display: flex; margin: 18px 18px 0; padding: 14px 16px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.9);
}
.fof-welcome-stat { flex: 1; text-align: center; }
.fof-welcome-stat + .fof-welcome-stat { border-left: 0.5px solid var(--fof-line); }
.fof-welcome-stat-n {
  font-weight: 800; font-size: 22px; color: var(--fof-ink); letter-spacing: -0.8px; line-height: 1;
}
.fof-welcome-stat-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--fof-ink-mute);
  text-transform: uppercase; margin-top: 4px;
}

.fof-messages { padding: 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.fof-day-sep { text-align: center; margin: 10px 0 6px; }
.fof-day-sep-text {
  background: rgba(255,255,255,0.8); color: var(--fof-ink-soft);
  padding: 4px 12px; font-size: 11px; font-weight: 600; border-radius: 99px;
  backdrop-filter: blur(4px); display: inline-block;
}

.fof-msg-user {
  align-self: flex-end; max-width: 82%; background: var(--fof-user-bubble);
  color: var(--fof-ink); padding: 8px 12px 6px; border-radius: 14px 14px 4px 14px;
  font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08); position: relative;
  animation: fof-slide-r 0.25s ease-out;
}
.fof-msg-user::after {
  content: ''; position: absolute; bottom: 0; right: -7px;
  width: 10px; height: 13px; background: var(--fof-user-bubble);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@keyframes fof-slide-r {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}
.fof-msg-time {
  display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--fof-ink-mute);
  margin-top: 2px; justify-content: flex-end; font-weight: 500;
}
.fof-msg-time-check { color: var(--fof-teal); font-weight: 800; }

.fof-msg-app-wrap {
  display: flex; align-items: flex-end; gap: 8px; max-width: 92%;
  animation: fof-slide-l 0.25s ease-out;
}
@keyframes fof-slide-l {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.fof-msg-app-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--fof-teal) 0%, var(--fof-teal-dark) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 2px; box-shadow: 0 2px 6px rgba(77,112,118,0.25);
}
.fof-msg-app-avatar .fof-owl { width: 18px; height: 18px; fill: #fff; }
.fof-msg-app-avatar.fof-hidden { visibility: hidden; }

.fof-msg-app {
  background: var(--fof-surface); color: var(--fof-ink);
  padding: 9px 14px 7px; border-radius: 14px 14px 14px 4px;
  font-size: 15px; font-weight: 500; line-height: 1.4;
  flex: 1; min-width: 0; letter-spacing: -0.2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08); position: relative;
}
.fof-msg-app::before {
  content: ''; position: absolute; bottom: 0; left: -7px;
  width: 10px; height: 13px; background: var(--fof-surface);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.fof-msg-app strong { font-weight: 700; color: var(--fof-ink); }

.fof-typing {
  background: var(--fof-surface); padding: 12px 16px;
  border-radius: 14px 14px 14px 4px; display: flex; gap: 5px; align-items: center;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08); position: relative; width: fit-content;
}
.fof-typing::before {
  content: ''; position: absolute; bottom: 0; left: -7px;
  width: 10px; height: 13px; background: var(--fof-surface);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.fof-typing-dot {
  width: 8px; height: 8px; background: var(--fof-teal); border-radius: 50%;
  animation: fof-typing 1.4s infinite ease-in-out; opacity: 0.4;
}
.fof-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.fof-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fof-typing {
  0%, 60%, 100% { transform: scale(0.8); opacity: 0.4; }
  30% { transform: scale(1.1); opacity: 1; }
}

.fof-verdict {
  background: var(--fof-surface); border-radius: 16px; overflow: hidden;
  flex: 1; min-width: 0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 8px 20px rgba(26,24,21,0.08);
}
.fof-verdict-head { padding: 16px 18px 14px; position: relative; overflow: hidden; }
.fof-verdict-head::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.fof-verdict-head.is-true { background: var(--fof-true-bg); }
.fof-verdict-head.is-true::before { background: var(--fof-true); }
.fof-verdict-head.is-false { background: var(--fof-false-bg); }
.fof-verdict-head.is-false::before { background: var(--fof-false); }
.fof-verdict-head.is-warn { background: var(--fof-warn-bg); }
.fof-verdict-head.is-warn::before { background: var(--fof-warn); }
.fof-verdict-head.is-info { background: var(--fof-teal-soft); }
.fof-verdict-head.is-info::before { background: var(--fof-teal); }

.fof-verdict-watermark {
  position: absolute; top: 12px; right: 14px; font-size: 9.5px;
  font-weight: 800; letter-spacing: 0.3px; opacity: 0.4;
}
.fof-verdict-head.is-true .fof-verdict-watermark { color: var(--fof-true-deep); }
.fof-verdict-head.is-false .fof-verdict-watermark { color: var(--fof-false-deep); }
.fof-verdict-head.is-warn .fof-verdict-watermark { color: var(--fof-warn-deep); }
.fof-verdict-head.is-info .fof-verdict-watermark { color: var(--fof-teal-dark); }

.fof-verdict-row { display: flex; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.fof-verdict-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; font-weight: 800; font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
}
.fof-verdict-icon.is-true { background: var(--fof-true); }
.fof-verdict-icon.is-false { background: var(--fof-false); }
.fof-verdict-icon.is-warn { background: var(--fof-warn); }
.fof-verdict-icon.is-info { background: var(--fof-teal); }
.fof-verdict-text { flex: 1; min-width: 0; }
.fof-verdict-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
}
.is-true .fof-verdict-label { color: var(--fof-true-deep); }
.is-false .fof-verdict-label { color: var(--fof-false-deep); }
.is-warn .fof-verdict-label { color: var(--fof-warn-deep); }
.is-info .fof-verdict-label { color: var(--fof-teal-dark); }
.fof-verdict-title {
  font-size: 24px; font-weight: 800; letter-spacing: -1px;
  color: var(--fof-ink); margin-top: 4px; line-height: 1.1;
}
.fof-verdict-body {
  padding: 14px 18px; font-size: 13.5px; color: var(--fof-ink-soft);
  font-weight: 500; line-height: 1.45;
}
.fof-verdict-body strong { color: var(--fof-ink); font-weight: 700; }
.fof-verdict-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--fof-paper-warm); border-top: 0.5px solid var(--fof-line);
  text-decoration: none; color: var(--fof-ink); cursor: pointer; transition: background 0.15s;
}
.fof-verdict-link:hover { background: var(--fof-offwhite); }
.fof-verdict-link-icon {
  width: 32px; height: 32px; background: var(--fof-surface); border-radius: 8px;
  border: 0.5px solid var(--fof-line); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: var(--fof-teal); flex-shrink: 0; letter-spacing: -0.5px;
}
.fof-verdict-link-icon .w-fake { color: var(--fof-false); }
.fof-verdict-link-text { flex: 1; min-width: 0; }
.fof-verdict-link-title { font-size: 13.5px; font-weight: 700; color: var(--fof-ink); letter-spacing: -0.2px; }
.fof-verdict-link-meta { font-size: 11px; color: var(--fof-ink-mute); font-weight: 500; margin-top: 1px; }
.fof-verdict-link-arr {
  width: 28px; height: 28px; background: var(--fof-ink); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}

.fof-replies {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 36px;
}
.fof-reply {
  background: rgba(255,255,255,0.55);
  border: 0.5px solid rgba(207,195,181,0.4);
  color: var(--fof-ink-soft);
  padding: 7px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: none; transition: all 0.15s;
}
.fof-reply:hover, .fof-reply:focus {
  background: var(--fof-teal); color: #fff; border-color: var(--fof-teal); outline: none;
  box-shadow: 0 2px 6px rgba(77,112,118,0.18);
}
.fof-reply-emoji { font-size: 14px; }
.fof-reply-num {
  font-size: 11.5px; color: var(--fof-ink-mute); font-weight: 700;
  background: var(--fof-paper-warm); padding: 1px 7px; border-radius: 99px; margin-left: 2px;
}
.fof-reply:hover .fof-reply-num, .fof-reply:focus .fof-reply-num {
  background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9);
}

.fof-cards-bubble {
  background: var(--fof-surface); border-radius: 16px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 8px 20px rgba(26,24,21,0.06);
}
.fof-mini-card {
  display: block;
  background: var(--fof-paper-warm);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  padding: 12px 14px 0 18px;
  border-left: 4px solid var(--fof-line);
}
.fof-mini-card:hover {
  background: var(--fof-offwhite);
  transform: translateX(2px);
}
.fof-mini-card:hover .fof-mini-cta { color: var(--fof-teal-dark); }
.fof-mini-card:hover .fof-mini-cta-arr {
  background: var(--fof-teal-dark);
  transform: translateX(3px);
}
.fof-mini-card.is-true { border-left-color: var(--fof-true); }
.fof-mini-card.is-false { border-left-color: var(--fof-false); }
.fof-mini-card.is-warn { border-left-color: var(--fof-warn); }
.fof-mini-card.is-info { border-left-color: var(--fof-teal); }

.fof-mini-meta {
  font-size: 10.5px;
  color: var(--fof-ink-mute);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fof-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.fof-mini-badge.is-true { background: var(--fof-true-bg); color: var(--fof-true-deep); }
.fof-mini-badge.is-false { background: var(--fof-false-bg); color: var(--fof-false-deep); }
.fof-mini-badge.is-warn { background: var(--fof-warn-bg); color: var(--fof-warn-deep); }
.fof-mini-badge.is-info { background: var(--fof-teal-soft); color: var(--fof-teal-dark); }
.fof-mini-meta-dot {
  width: 3px; height: 3px;
  background: var(--fof-ink-mute);
  border-radius: 50%;
}
.fof-mini-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fof-ink);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

/* CTA-Zeile am Card-Ende: macht Klickbarkeit explizit */
.fof-mini-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 10px;
  border-top: 0.5px solid var(--fof-line);
  font-size: 12px;
  font-weight: 800;
  color: var(--fof-teal);
  letter-spacing: -0.1px;
  transition: color 0.15s;
}
.fof-mini-cta-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fof-mini-cta-icon {
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fof-mini-cta-arr {
  width: 24px; height: 24px;
  background: var(--fof-teal);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  transition: all 0.15s;
}

.fof-mini-aged {
  background: var(--fof-warn-bg);
  margin: 0 -14px 0 -18px;
  padding: 5px 14px 5px 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fof-warn-deep);
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fof-see-more {
  display: flex; align-items: center; justify-content: center; padding: 9px;
  font-size: 13px; font-weight: 700; color: var(--fof-teal); cursor: pointer;
  background: transparent; border: none; font-family: inherit; width: 100%;
}
.fof-see-more:hover { color: var(--fof-teal-dark); }

.fof-suggestions {
  background: var(--fof-surface); border-radius: 16px; padding: 6px;
  flex: 1; min-width: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.08); overflow: hidden;
}
.fof-suggestions-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--fof-ink-mute); padding: 10px 14px 6px;
}
.fof-suggestion-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px;
  cursor: pointer; border-radius: 11px;
  background: transparent; border: none; width: 100%; text-align: left; font-family: inherit;
}
.fof-suggestion-item:hover { background: var(--fof-paper-warm); }
.fof-suggestion-emoji {
  width: 36px; height: 36px; background: var(--fof-paper-warm); border: 0.5px solid var(--fof-line);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.fof-suggestion-text { flex: 1; font-size: 14px; font-weight: 700; color: var(--fof-ink); letter-spacing: -0.2px; }
.fof-suggestion-text small {
  display: block; font-size: 10.5px; font-weight: 500; color: var(--fof-ink-mute); margin-top: 1px;
}
.fof-suggestion-arr { color: var(--fof-ink-mute); font-size: 16px; font-weight: 700; }

.fof-goodbye {
  background: var(--fof-surface); border-radius: 16px; padding: 16px 18px 14px;
  flex: 1; min-width: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 8px 20px rgba(26,24,21,0.08);
  border-top: 4px solid var(--fof-teal);
}
.fof-goodbye-title {
  font-size: 15px; font-weight: 800; color: var(--fof-ink); letter-spacing: -0.3px; margin-bottom: 12px;
}
.fof-goodbye-cta {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--fof-paper-warm); border: 0.5px solid var(--fof-line); border-radius: 12px;
  text-decoration: none; color: inherit; margin-bottom: 6px; cursor: pointer;
  transition: all 0.15s; width: 100%; font-family: inherit; text-align: left;
}
.fof-goodbye-cta:last-child { margin-bottom: 0; }
.fof-goodbye-cta:hover { background: var(--fof-offwhite); transform: translateX(2px); }
.fof-goodbye-cta-icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.fof-goodbye-cta-text { flex: 1; }
.fof-goodbye-cta-title { font-size: 13.5px; font-weight: 800; color: var(--fof-ink); letter-spacing: -0.2px; }
.fof-goodbye-cta-sub { font-size: 11px; color: var(--fof-ink-mute); font-weight: 500; }
.fof-goodbye-cta-arr { color: var(--fof-ink); font-size: 18px; font-weight: 800; }

.fof-composer {
  background: #FFFFFF;
  border-top: 1px solid var(--fof-line);
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}
.fof-composer-attach {
  width: 42px; height: 42px;
  background: var(--fof-paper-warm); color: var(--fof-ink);
  border: 1px solid var(--fof-line); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fof-composer-attach:hover { background: var(--fof-offwhite); }
.fof-composer-attach svg { width: 22px; height: 22px; stroke: var(--fof-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.fof-composer-input-wrap {
  flex: 1;
  background: var(--fof-paper-warm);
  border: 1.5px solid var(--fof-line);
  border-radius: 24px;
  padding: 4px 4px 4px 18px;
  display: flex; align-items: center; gap: 8px; transition: border-color 0.15s;
}
.fof-composer-input-wrap:focus-within {
  border-color: var(--fof-teal);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(77,112,118,0.12);
}
.fof-composer-input {
  flex: 1; background: transparent; border: none; padding: 10px 0;
  font-size: 16px; font-family: inherit; font-weight: 500; color: var(--fof-ink);
  letter-spacing: -0.2px; min-width: 0;
}
.fof-composer-input:focus { outline: none; }
.fof-composer-input::placeholder { color: var(--fof-ink-mute); font-weight: 500; }
.fof-composer-camera {
  width: 36px; height: 36px; background: #FFFFFF; border: 1px solid var(--fof-line);
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fof-composer-camera:hover { background: var(--fof-paper-warm); }
.fof-composer-camera svg { width: 19px; height: 19px; stroke: var(--fof-ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fof-composer-send {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--fof-teal) 0%, var(--fof-teal-dark) 100%);
  color: #fff; border: none; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(77,112,118,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.1s;
}
.fof-composer-send:active { transform: scale(0.92); }
.fof-composer-send svg { width: 20px; height: 20px; fill: #fff; }

.fof-file-input { display: none; }

@media (max-width: 480px) {
  .fof-welcome-brand { font-size: 28px; }
  .fof-welcome-avatar { width: 70px; height: 70px; }
  .fof-welcome-avatar .fof-owl { width: 42px; height: 42px; }
  .fof-verdict-title { font-size: 22px; }
}

/* ============================================================
 * EULE als <img> (statt SVG-Symbol) — assets/owl.png
 * ============================================================ */
.fof-owl-img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
}
.fof-msg-app-avatar .fof-owl-img { width: 22px; height: 22px; }
.fof-welcome-avatar .fof-owl-img { width: 60px; height: 60px; }

/* ============================================================
 * BACKGROUND-Q&A-Box (Kurz erklärt)
 * ============================================================ */
.fof-bg-card {
  background: var(--fof-surface);
  border-radius: 16px;
  border: 0.5px solid var(--fof-line);
  flex: 1; min-width: 0;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.fof-bg-card-head {
  padding: 12px 16px;
  background: var(--fof-paper-warm);
  border-bottom: 0.5px solid var(--fof-line);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.fof-bg-card-icon {
  width: 28px; height: 28px;
  background: var(--fof-teal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.fof-bg-card-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fof-ink);
  letter-spacing: -0.2px;
}
.fof-bg-card-title small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fof-ink-mute);
  margin-top: 1px;
  letter-spacing: 0.3px;
}
.fof-bg-card-toggle { color: var(--fof-ink); font-size: 18px; font-weight: 800; }
.fof-bg-card-body {
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fof-ink-soft);
  display: none;
}
.fof-bg-card-body.is-open { display: block; }
.fof-bg-card-body p { margin-bottom: 8px; }
.fof-bg-card-body p:last-child { margin-bottom: 0; }
.fof-bg-card-body strong { color: var(--fof-ink); font-weight: 700; }

/* ============================================================
 * ALTER-WARNING auf Mini-Cards (in mini-card-Block oben definiert)
 * ============================================================ */
.fof-mini-aged-icon { font-size: 11px; }

/* ============================================================
 * FOOTER (im Stream als letzte App-Bubble nach Goodbye)
 * ============================================================ */
.fof-stream-footer {
  text-align: center;
  padding: 22px 18px 12px;
  color: var(--fof-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.fof-stream-footer a {
  color: var(--fof-teal);
  text-decoration: none;
  font-weight: 700;
  margin: 0 6px;
  white-space: nowrap;
}
.fof-stream-footer a:hover { text-decoration: underline; }
.fof-stream-footer-brand {
  font-weight: 800;
  color: var(--fof-ink);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.fof-stream-footer-brand .w-fake { color: var(--fof-false); }
.fof-stream-footer-links {
  margin-top: 4px;
  line-height: 1.8;
}

/* ============================================================
 * KOMPAKTE START-SUGGESTIONS (horizontal scrollbar)
 * ============================================================ */
.fof-suggests-row {
  margin: 6px 0 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fof-suggest-pill {
  background: var(--fof-surface);
  border: 1px solid var(--fof-line);
  color: var(--fof-ink);
  padding: 7px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.1px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  transition: all 0.15s;
}
.fof-suggest-pill:hover {
  background: var(--fof-teal);
  color: #fff;
  border-color: var(--fof-teal);
}
.fof-suggest-pill-icon { font-size: 14px; }

/* Welcome reduzieren */
.fof-welcome {
  padding: 24px 24px 6px;
}
.fof-welcome-avatar {
  width: 64px; height: 64px;
  margin-bottom: 12px;
}
.fof-welcome-avatar .fof-owl-img { width: 48px; height: 48px; }
.fof-welcome-brand {
  font-size: 28px;
  margin-bottom: 6px;
}
.fof-welcome-sub {
  font-size: 13px;
  padding: 8px 12px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Stats-Block ausblenden — verschwendet Platz */
.fof-welcome-stats { display: none !important; }

/* Stream-Footer im Chat raus (haben jetzt page-footer) */
.fof-stream-footer { display: none !important; }

/* ============================================================
 * DESKTOP-LAYOUT v4.1 (19.05.2026)
 * Shell mit linker Sidebar (Verlauf/Trending) + Chat + rechter Icon-Bar
 * Mobile bleibt unverändert: Sidebars ausgeblendet
 * ============================================================ */

/* Mobile-First Default: Sidebars unsichtbar */
.fof-sidebar { display: none; }
.fof-shell { display: block; }

@media (min-width: 1024px) {
  html, body { height: auto; min-height: 100vh; }
  body {
    padding: 24px 0 0;
    background: #EAE7DE;
  }

  .fof-shell {
    display: flex;
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    background: var(--fof-paper);
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    border-radius: 14px;
    overflow: hidden;
    min-height: calc(100vh - 48px);
  }

  #fof-app {
    flex: 1;
    max-width: none;
    height: auto;
    min-height: 0;
    box-shadow: none;
    border-left: 1px solid var(--fof-line);
    border-right: 1px solid var(--fof-line);
    min-width: 0;
  }

  /* Chat-Inhalt intern auf 760px begrenzen — Lesbarkeit */
  .fof-welcome,
  .fof-messages { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
  .fof-composer { padding-left: max(14px, calc((100% - 760px) / 2)); padding-right: max(14px, calc((100% - 760px) / 2)); }

  /* ============ LINKE SIDEBAR ============ */
  .fof-sidebar-left {
    display: flex;
    flex-direction: column;
    width: 270px;
    flex-shrink: 0;
    background: var(--fof-paper-warm);
  }

  .fof-sidebar-head {
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--fof-line);
  }
  .fof-sidebar-head-brand { font-weight: 800; font-size: 20px; letter-spacing: -0.4px; color: var(--fof-ink); }
  .fof-sidebar-head-brand .w-sep { color: var(--fof-ink-mute); margin: 0 4px; font-weight: 500; }
  .fof-sidebar-head-brand .w-fake { color: var(--fof-false); }
  .fof-sidebar-head-claim { font-size: 11.5px; color: var(--fof-ink-mute); margin-top: 3px; letter-spacing: 0.1px; }

  .fof-sidebar-tabs { display: flex; border-bottom: 1px solid var(--fof-line); }
  .fof-sidebar-tab {
    flex: 1; padding: 13px 0; background: transparent; border: 0; cursor: pointer;
    font: 600 13px/1 inherit; color: var(--fof-ink-mute); letter-spacing: -0.2px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  }
  .fof-sidebar-tab:hover { color: var(--fof-ink-soft); }
  .fof-sidebar-tab.is-active { color: var(--fof-teal-dark); border-bottom-color: var(--fof-teal); }
  .fof-sidebar-tab-count {
    background: var(--fof-line); color: var(--fof-ink-mute); font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; min-width: 20px; text-align: center; line-height: 1.4;
  }
  .fof-sidebar-tab.is-active .fof-sidebar-tab-count {
    background: var(--fof-teal-soft); color: var(--fof-teal-dark);
  }
  .fof-sidebar-tab-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--fof-warn);
    box-shadow: 0 0 0 2px rgba(178,138,92,.22);
  }

  .fof-sidebar-body { flex: 1; overflow-y: auto; padding: 6px 0; min-height: 0; }
  .fof-sidebar-body::-webkit-scrollbar { width: 4px; }
  .fof-sidebar-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
  .fof-sidebar-panel { display: none; }
  .fof-sidebar-panel.is-active { display: block; }

  .fof-sidebar-empty {
    padding: 36px 24px; text-align: center; color: var(--fof-ink-mute);
  }
  .fof-sidebar-empty-icon { font-size: 28px; opacity: .55; margin-bottom: 10px; }
  .fof-sidebar-empty-title { font-weight: 700; color: var(--fof-ink-soft); font-size: 14px; margin-bottom: 6px; }
  .fof-sidebar-empty-sub { font-size: 12px; line-height: 1.55; }

  .fof-sidebar-list { list-style: none; margin: 0; padding: 0; }
  .fof-sidebar-loading { padding: 28px 24px; text-align: center; color: var(--fof-ink-mute); font-size: 12px; font-style: italic; }

  .fof-sidebar-item {
    display: block; padding: 11px 18px 11px 17px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s, border-color .12s;
  }
  .fof-sidebar-item:hover { background: rgba(77,112,118,.06); border-left-color: var(--fof-teal-soft); }
  .fof-sidebar-item:active { background: rgba(77,112,118,.10); }
  .fof-sidebar-item-row1 {
    display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  }
  .fof-sidebar-item-pill {
    font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; line-height: 1.4;
  }
  .fof-sidebar-item-pill--false { background: var(--fof-false-bg); color: var(--fof-false-deep); }
  .fof-sidebar-item-pill--true  { background: var(--fof-true-bg);  color: var(--fof-true-deep); }
  .fof-sidebar-item-pill--warn  { background: var(--fof-warn-bg);  color: var(--fof-warn-deep); }
  .fof-sidebar-item-pill--info  { background: var(--fof-teal-soft); color: var(--fof-teal-dark); }
  .fof-sidebar-item-pill--none  { background: var(--fof-line); color: var(--fof-ink-mute); }
  .fof-sidebar-item-date { font-size: 11px; color: var(--fof-ink-mute); margin-left: auto; flex-shrink: 0; }
  .fof-sidebar-item-query {
    font-size: 13.5px; color: var(--fof-ink); font-weight: 500; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .fof-sidebar-item-meta {
    font-size: 11px; color: var(--fof-ink-mute); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .fof-sidebar-item--trending .fof-sidebar-item-row1 { margin-bottom: 2px; }
  .fof-sidebar-item-emoji { font-size: 17px; flex-shrink: 0; line-height: 1; }
  .fof-sidebar-item-count {
    font-size: 10.5px; color: var(--fof-ink-mute);
    background: var(--fof-line-soft); padding: 2px 6px; border-radius: 4px;
    margin-left: auto; font-weight: 700; flex-shrink: 0;
  }

  .fof-sidebar-foot {
    padding: 11px 18px 14px; border-top: 1px solid var(--fof-line);
    background: var(--fof-paper-warm);
  }
  .fof-sidebar-foot-btn {
    background: transparent; border: 0; color: var(--fof-ink-mute);
    font: 500 12px inherit; cursor: pointer; padding: 4px 0;
    letter-spacing: 0.1px;
  }
  .fof-sidebar-foot-btn:hover { color: var(--fof-false); }
  .fof-sidebar-foot-btn.is-hidden { display: none; }

  /* ============ RECHTE ICON-BAR + PANEL ============ */
  .fof-sidebar-right {
    display: flex;
    width: 72px;
    flex-shrink: 0;
    flex-direction: column;
    background: var(--fof-paper-warm);
    position: relative;
  }

  .fof-iconbar {
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 0; gap: 4px;
  }
  .fof-iconbar-btn {
    width: 58px; padding: 10px 4px; background: transparent; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: var(--fof-ink-soft); border-radius: 10px;
    transition: background .12s, color .12s;
  }
  .fof-iconbar-btn svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .fof-iconbar-btn:hover { background: var(--fof-teal-soft); color: var(--fof-teal-dark); }
  .fof-iconbar-btn.is-active {
    background: var(--fof-teal); color: #fff;
  }
  .fof-iconbar-label {
    font-size: 10px; font-weight: 600; letter-spacing: -0.1px; text-align: center; line-height: 1.2;
  }

  .fof-rightpanel {
    position: absolute; top: 14px; right: 80px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--fof-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(26,24,21,.14);
    padding: 0;
    transform: translateX(12px) scale(.98); opacity: 0; pointer-events: none;
    transition: transform .2s cubic-bezier(.2,.7,.3,1.2), opacity .15s;
    z-index: 50;
  }
  .fof-rightpanel.is-open {
    transform: translateX(0) scale(1); opacity: 1; pointer-events: auto;
  }
  .fof-rightpanel-head {
    display: flex; align-items: center; padding: 14px 14px 10px;
    border-bottom: 1px solid var(--fof-line-soft);
  }
  .fof-rightpanel-title {
    flex: 1; font-weight: 700; font-size: 14px; letter-spacing: -0.2px; color: var(--fof-ink);
  }
  .fof-rightpanel-close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 22px; color: var(--fof-ink-mute); line-height: 1; padding: 0 4px;
  }
  .fof-rightpanel-close:hover { color: var(--fof-ink); }
  .fof-rightpanel-body { padding: 14px; font-size: 13px; color: var(--fof-ink-soft); line-height: 1.55; }
  .fof-rightpanel-body p { margin-bottom: 10px; }
  .fof-rightpanel-body p:last-child { margin-bottom: 0; }
  .fof-rightpanel-body a.fof-rp-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fof-teal); color: #fff;
    padding: 9px 14px; border-radius: 8px; text-decoration: none;
    font-weight: 600; font-size: 13px; margin-top: 6px;
    transition: background .12s;
  }
  .fof-rightpanel-body a.fof-rp-cta:hover { background: var(--fof-teal-dark); }
  .fof-rightpanel-body a.fof-rp-cta--secondary {
    background: transparent; color: var(--fof-teal-dark);
    border: 1px solid var(--fof-line);
  }
  .fof-rightpanel-body a.fof-rp-cta--secondary:hover { background: var(--fof-teal-soft); }

  /* Page-Footer auf Desktop */
  .fof-page-footer {
    max-width: 1280px;
    margin: 16px auto 24px;
    background: transparent;
    border-top: 0;
  }
}

@media (min-width: 1440px) {
  .fof-shell { max-width: 1360px; }
  .fof-page-footer { max-width: 1360px; }
}

/* ============================================================
 * DESKTOP-POLISH v4.2 (19.05.2026) — "Option C"
 * Mimikama-Look bleibt, aber mit Messenger-Vibes:
 *  - Pill-Tabs statt Underline
 *  - Profil-Card oben mit Avatar
 *  - Icon-Circles in History-Items
 *  - Größere Trending-Bubbles
 *  - Right-Iconbar mit aktivem Pill-State
 * ============================================================ */

@media (min-width: 1024px) {

  /* ============ PROFIL-CARD OBEN ============ */
  .fof-sidebar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, #FCFAF5 0%, var(--fof-paper-warm) 100%);
    border-bottom: 1px solid var(--fof-line);
  }
  .fof-sidebar-head-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--fof-teal);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 2px 8px rgba(77,112,118,0.18);
  }
  .fof-sidebar-head-avatar .fof-owl-img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  }
  .fof-sidebar-head-avatar .fof-owl { width: 28px; height: 28px; fill: #fff; }
  .fof-sidebar-head-avatar::after {
    content: '';
    position: absolute;
    bottom: 1px; right: 1px;
    width: 11px; height: 11px;
    background: #5BAA6F;
    border: 2px solid var(--fof-paper-warm);
    border-radius: 50%;
  }
  .fof-sidebar-head-text { flex: 1; min-width: 0; }
  .fof-sidebar-head-brand {
    font-weight: 800; font-size: 18px;
    letter-spacing: -0.4px; color: var(--fof-ink);
    line-height: 1.15;
  }
  .fof-sidebar-head-claim {
    font-size: 11.5px; color: var(--fof-ink-mute);
    margin-top: 3px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .fof-head-livedot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #5BAA6F;
    box-shadow: 0 0 0 2px rgba(91,170,111,0.22);
  }

  /* ============ PILL-TABS (statt Underline) ============ */
  .fof-sidebar-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fof-line);
    background: var(--fof-paper-warm);
  }
  .fof-sidebar-tab {
    flex: 1;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: 600 12.5px/1.2 inherit;
    color: var(--fof-ink-mute);
    letter-spacing: -0.1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, color .15s;
    border-bottom: 0;
  }
  .fof-sidebar-tab:hover {
    background: rgba(77,112,118,0.08);
    color: var(--fof-ink-soft);
  }
  .fof-sidebar-tab.is-active {
    background: var(--fof-teal);
    color: #fff;
    border-bottom: 0;
    box-shadow: 0 2px 8px rgba(77,112,118,0.22);
  }
  .fof-sidebar-tab-count {
    background: rgba(0,0,0,0.08);
    color: inherit;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
  }
  .fof-sidebar-tab.is-active .fof-sidebar-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
  }
  .fof-sidebar-tab-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fof-warn);
  }
  .fof-sidebar-tab.is-active .fof-sidebar-tab-dot {
    background: #fff;
  }

  /* ============ HISTORY-ITEMS MIT ICON-CIRCLE ============ */
  .fof-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px 12px 14px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .fof-sidebar-item:hover {
    background: rgba(77,112,118,0.06);
    border-left-color: var(--fof-teal-soft);
  }
  /* Icon-Circle via ::before pseudo-element + data-pill */
  .fof-sidebar-item::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--fof-line) center / 18px no-repeat;
    background-image: var(--icon-svg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
  }
  .fof-sidebar-item[data-pill="false"]::before {
    background-color: var(--fof-false-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23883E37' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  }
  .fof-sidebar-item[data-pill="true"]::before {
    background-color: var(--fof-true-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6049' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
  }
  .fof-sidebar-item[data-pill="warn"]::before {
    background-color: var(--fof-warn-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F6C42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3L2 21h20L12 3z'/><path d='M12 10v5M12 18v.5'/></svg>");
  }
  .fof-sidebar-item[data-pill="info"]::before {
    background-color: var(--fof-teal-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A565B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>");
  }
  .fof-sidebar-item[data-pill="none"]::before {
    background-color: var(--fof-line);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B857E' stroke-width='2.5' stroke-linecap='round'><path d='M9 8c0-2 1.5-3.5 3-3.5s3 1.5 3 3.5-3 3-3 5'/><circle cx='12' cy='17' r='.6' fill='%238B857E'/></svg>");
  }
  .fof-sidebar-item-content {
    flex: 1;
    min-width: 0;
  }
  .fof-sidebar-item-row1 {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 3px;
  }
  /* Im neuen Layout: Pill versteckt (Symbol ist im Circle), nur Datum bleibt */
  .fof-sidebar-item-pill {
    display: none;
  }
  .fof-sidebar-item-date {
    font-size: 11px;
    color: var(--fof-ink-mute);
    margin-left: 0;
    font-weight: 500;
  }
  .fof-sidebar-item-query {
    font-size: 13.5px;
    color: var(--fof-ink);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -0.1px;
  }
  .fof-sidebar-item-meta {
    font-size: 11px;
    color: var(--fof-ink-mute);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ============ TRENDING-ITEMS MIT EMOJI-CIRCLE ============ */
  .fof-sidebar-item--trending::before {
    display: none; /* kein generischer Icon-Circle für Trending */
  }
  .fof-sidebar-item--trending {
    align-items: center;
  }
  .fof-sidebar-item--trending .fof-sidebar-item-row1 {
    flex: 1;
    margin-bottom: 0;
    gap: 11px;
  }
  .fof-sidebar-item-emoji {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fof-teal-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(77,112,118,0.12);
  }
  .fof-sidebar-item--trending .fof-sidebar-item-query {
    -webkit-line-clamp: 1;
    font-weight: 600;
    font-size: 13.5px;
  }
  .fof-sidebar-item-count {
    font-size: 10.5px;
    color: var(--fof-ink-mute);
    background: var(--fof-line-soft);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: auto;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.3;
  }

  /* ============ RIGHT-ICONBAR: aktiver Pill-State ============ */
  .fof-iconbar { padding: 16px 0 8px; gap: 2px; }
  .fof-iconbar-btn {
    width: 60px;
    padding: 11px 4px;
    gap: 6px;
    border-radius: 14px;
    margin: 0 6px;
    position: relative;
  }
  .fof-iconbar-btn:hover {
    background: var(--fof-teal-soft);
    color: var(--fof-teal-dark);
    transform: translateY(-1px);
  }
  .fof-iconbar-btn.is-active {
    background: var(--fof-teal);
    color: #fff;
    box-shadow: 0 4px 12px rgba(77,112,118,0.28);
  }
  .fof-iconbar-btn.is-active::before {
    content: '';
    position: absolute;
    left: -7px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    background: var(--fof-teal);
    border-radius: 0 3px 3px 0;
  }
  .fof-iconbar-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-transform: uppercase;
  }

  /* Right-Panel: leichter Polish */
  .fof-rightpanel {
    top: 16px;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(26,24,21,0.16), 0 0 0 1px rgba(26,24,21,0.04);
  }
  .fof-rightpanel-head {
    padding: 16px 16px 12px;
  }
  .fof-rightpanel-title {
    font-size: 15px;
  }

  /* ============ EMPTY-STATE POLISH ============ */
  .fof-sidebar-empty {
    padding: 44px 24px 20px;
  }
  .fof-sidebar-empty-icon {
    font-size: 36px;
    opacity: 0.4;
    margin-bottom: 14px;
  }
  .fof-sidebar-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fof-ink-soft);
    margin-bottom: 6px;
  }
  .fof-sidebar-empty-sub {
    font-size: 12px;
    line-height: 1.6;
    max-width: 240px;
    margin: 0 auto;
  }

  /* ============ FOOT POLISH ============ */
  .fof-sidebar-foot {
    padding: 12px 18px 16px;
    background: var(--fof-paper-warm);
  }
  .fof-sidebar-foot-btn {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background .12s, color .12s;
  }
  .fof-sidebar-foot-btn:hover {
    background: var(--fof-false-bg);
    color: var(--fof-false-deep);
  }

  /* ============ SIDEBAR-BODY: dezente Linie zwischen Items ============ */
  .fof-sidebar-list .fof-sidebar-item + .fof-sidebar-item {
    border-top: 1px solid var(--fof-line-soft);
  }
}

/* ============================================================
 * v4.3 GREEN-OVERRIDE (19.05.2026) — "lebendig"
 * Re-Coloring komplett: Teal → lebendiges Mimikama-Grün
 * Schärfere Kanten, klareres Akzentspiel, mehr Definition
 * ============================================================ */

:root {
  --fof-teal: #4FA873;
  --fof-teal-dark: #3D8559;
  --fof-teal-soft: #DCF0E4;
  --fof-user-bubble: #5BC388;
  --fof-paper: #F4F9F5;
  --fof-paper-warm: #F8FBF8;
  --fof-line: #DBE6DE;
  --fof-line-soft: #ECF3EE;
}

body { background: #D9E8DE; }

#fof-app {
  background: var(--fof-paper);
  box-shadow: 0 0 60px rgba(61,133,89,0.10);
}

/* ============ CHAT-PATTERN (jetzt grün) ============ */
.fof-chat {
  background-color: var(--fof-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='%234FA873' fill-opacity='0.06'><circle cx='40' cy='40' r='12'/><circle cx='130' cy='95' r='12'/><circle cx='60' cy='150' r='12'/></g><g fill='%234FA873' fill-opacity='0.05' font-family='Manrope,sans-serif' font-weight='900' font-size='8'><text x='75' y='44'>F%C2%B7F?</text><text x='15' y='105'>F%C2%B7F?</text><text x='100' y='155'>F%C2%B7F?</text></g></svg>");
  background-size: 180px 180px;
}

/* ============ HEADER ============ */
.fof-header {
  background: var(--fof-paper-warm);
  border-bottom: 1px solid var(--fof-line);
}
.fof-header-avatar {
  background: linear-gradient(135deg, #5BC388 0%, var(--fof-teal-dark) 100%);
  box-shadow: 0 3px 10px rgba(79,168,115,0.32);
}
.fof-header-avatar::after {
  background: #38C46F;
}
.fof-header-name-verified {
  color: var(--fof-teal);
  font-weight: 800;
}
.fof-header-status .live-dot {
  background: #38C46F !important;
  box-shadow: 0 0 0 2px rgba(56,196,111,0.22);
}

/* ============ WELCOME-BLOCK ============ */
.fof-welcome-avatar {
  background: linear-gradient(135deg, #5BC388 0%, var(--fof-teal-dark) 100%);
  box-shadow: 0 14px 36px rgba(79,168,115,0.38), 0 0 0 6px rgba(255,255,255,0.9);
}
.fof-welcome-pulse {
  border-color: var(--fof-teal);
}
.fof-welcome-sub {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(79,168,115,0.12);
}

/* ============ BUBBLES ============ */
/* User-Bubble: solid green, weißer Text */
.fof-msg-user {
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(79,168,115,0.30);
}
.fof-msg-user a { color: #fff; text-decoration: underline; }
.fof-msg-user strong { color: #fff; font-weight: 700; }
.fof-msg-time-check { color: var(--fof-teal); }

/* App-Bubble: klare Kante + leichter Schatten */
.fof-msg-app {
  background: #fff;
  border: 1px solid var(--fof-line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 16px rgba(61,133,89,0.05);
}
.fof-msg-app-avatar {
  background: linear-gradient(135deg, #5BC388 0%, var(--fof-teal-dark) 100%);
  box-shadow: 0 2px 8px rgba(79,168,115,0.32);
}
.fof-typing { background: #fff; border: 1px solid var(--fof-line); }

/* ============ COMPOSER ============ */
.fof-composer {
  background: var(--fof-paper-warm);
  border-top: 1px solid var(--fof-line);
  box-shadow: 0 -4px 16px rgba(61,133,89,0.04);
}
.fof-composer-input-wrap {
  background: #fff;
  border: 1px solid var(--fof-line);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: border-color .15s, box-shadow .15s;
}
.fof-composer-input-wrap:focus-within {
  border-color: var(--fof-teal);
  box-shadow: 0 0 0 3px rgba(79,168,115,0.18), 0 1px 3px rgba(0,0,0,0.03);
}
.fof-composer-send {
  background: var(--fof-teal);
  box-shadow: 0 4px 14px rgba(79,168,115,0.42);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.fof-composer-send:hover {
  background: var(--fof-teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79,168,115,0.52);
}
.fof-composer-send:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(79,168,115,0.4);
}
.fof-composer-attach,
.fof-composer-camera {
  color: var(--fof-teal-dark);
  transition: color .15s, transform .15s;
}
.fof-composer-attach:hover,
.fof-composer-camera:hover {
  color: var(--fof-teal);
  transform: scale(1.08);
}

/* ============ Cards & Verdict ============ */
.fof-verdict { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 30px rgba(61,133,89,0.10); }

/* ============ Quick-Reply-Pills (falls vorhanden) ============ */
.fof-quick-reply,
.fof-suggest-pill {
  background: #fff;
  border: 1px solid var(--fof-line);
  color: var(--fof-ink);
  transition: background .15s, border-color .15s, transform .15s;
}
.fof-quick-reply:hover,
.fof-suggest-pill:hover {
  background: var(--fof-teal-soft);
  border-color: var(--fof-teal);
  transform: translateY(-1px);
}

/* ============ DESKTOP-SPEZIFISCHE NACHSCHÄRFUNG ============ */
@media (min-width: 1024px) {
  body { background: #D9E8DE; }

  .fof-shell {
    background: var(--fof-paper);
    box-shadow: 0 16px 50px rgba(61,133,89,0.16), 0 0 0 1px rgba(61,133,89,0.06);
    border-radius: 16px;
  }
  .fof-sidebar-left,
  .fof-sidebar-right {
    background: var(--fof-paper-warm);
  }

  /* Profil-Avatar in linker Sidebar */
  .fof-sidebar-head-avatar {
    background: linear-gradient(135deg, #5BC388 0%, var(--fof-teal-dark) 100%);
    box-shadow: 0 4px 14px rgba(79,168,115,0.36);
  }
  .fof-sidebar-head-avatar::after {
    background: #38C46F;
  }
  .fof-head-livedot {
    background: #38C46F;
    box-shadow: 0 0 0 2px rgba(56,196,111,0.24);
  }

  /* Tabs: aktiver Schatten knackiger */
  .fof-sidebar-tab.is-active {
    box-shadow: 0 4px 14px rgba(79,168,115,0.36);
  }

  /* History-Items: knackigerer Hover */
  .fof-sidebar-item:hover {
    background: rgba(79,168,115,0.07);
    border-left-color: var(--fof-teal);
  }

  /* Info-Pill SVG-Icon: jetzt mit grünem Stroke (teal-dark wurde umgewertet) */
  .fof-sidebar-item[data-pill="info"]::before {
    background-color: var(--fof-teal-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D8559' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>");
  }

  /* Right-Iconbar */
  .fof-iconbar-btn:hover {
    background: var(--fof-teal-soft);
    color: var(--fof-teal-dark);
  }
  .fof-iconbar-btn.is-active {
    background: var(--fof-teal);
    box-shadow: 0 6px 16px rgba(79,168,115,0.40);
  }
  .fof-iconbar-btn.is-active::before {
    background: var(--fof-teal);
  }

  /* Right-Panel CTA-Button */
  .fof-rightpanel-body a.fof-rp-cta {
    background: var(--fof-teal);
    box-shadow: 0 3px 10px rgba(79,168,115,0.32);
  }
  .fof-rightpanel-body a.fof-rp-cta:hover {
    background: var(--fof-teal-dark);
    box-shadow: 0 5px 14px rgba(79,168,115,0.42);
  }

  /* ============ TRENDING-AVATAR-STRIP ============ */
  .fof-sidebar-trending-strip {
    padding: 16px 16px 0;
    border-bottom: 1px solid var(--fof-line);
    background: linear-gradient(180deg, var(--fof-paper-warm) 0%, rgba(248,251,248,0.5) 100%);
  }
  .fof-sidebar-trending-strip-title {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--fof-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .fof-sidebar-trending-strip-title-flame {
    color: var(--fof-warn);
    font-size: 14px;
  }
  .fof-sidebar-trending-strip-items {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .fof-sidebar-trending-strip-items::-webkit-scrollbar { display: none; }
  .fof-trending-bubble {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    width: 58px;
  }
  .fof-trending-bubble-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--fof-teal-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(79,168,115,0.20);
    transition: transform .18s, box-shadow .18s, background .18s;
  }
  .fof-trending-bubble:hover .fof-trending-bubble-circle {
    transform: translateY(-3px) scale(1.06);
    background: var(--fof-teal);
    box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(79,168,115,0.42);
  }
  .fof-trending-bubble-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--fof-ink-soft);
    text-align: center;
    line-height: 1.2;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.1px;
  }

  /* Foot polish */
  .fof-sidebar-foot {
    background: var(--fof-paper-warm);
    border-top: 1px solid var(--fof-line);
  }

  /* Page-Footer auf Desktop: transparent, lebt aus Body-Color */
  .fof-page-footer { background: transparent; }
}

/* ============================================================
 * v4.4 FONT + ICON-POLISH (19.05.2026)
 * Manrope-Tuning + Composer/Header/Iconbar in Soft-Circles
 * ============================================================ */

/* Manrope hat etwas größere x-height als Inter — leicht enger laufen */
html, body {
  letter-spacing: -0.005em;
}

/* Header-Menü als Soft-Circle-Button (statt Text-⋯) */
.fof-header-menu {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--fof-teal-soft);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fof-teal-dark);
  transition: background .15s, color .15s, transform .15s;
  opacity: 1;
}
.fof-header-menu svg {
  fill: currentColor;
}
.fof-header-menu:hover {
  background: var(--fof-teal);
  color: #fff;
  transform: scale(1.05);
}

/* ============ COMPOSER: Attach/Camera in Soft-Circle ============ */
.fof-composer-attach,
.fof-composer-camera {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--fof-teal-soft);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fof-teal-dark);
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .15s;
}
.fof-composer-attach svg,
.fof-composer-camera svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fof-composer-attach:hover,
.fof-composer-camera:hover {
  background: var(--fof-teal);
  color: #fff;
  transform: scale(1.06);
}

/* Camera-Btn (im Input-Wrap) wieder transparent damit es zur Input gehört */
.fof-composer-input-wrap .fof-composer-camera {
  background: transparent;
  color: var(--fof-teal-dark);
  width: 32px;
  height: 32px;
}
.fof-composer-input-wrap .fof-composer-camera:hover {
  background: var(--fof-teal-soft);
  color: var(--fof-teal);
  transform: none;
}

/* ============ DESKTOP-ICONBAR: filled Look, permanent Soft-BG ============ */
@media (min-width: 1024px) {
  .fof-iconbar-btn {
    background: var(--fof-teal-soft);
    color: var(--fof-teal-dark);
    margin: 0 6px 4px;
    padding: 12px 4px 10px;
    border-radius: 14px;
  }
  .fof-iconbar-btn svg {
    stroke-width: 2;
  }
  .fof-iconbar-btn:hover {
    background: var(--fof-teal);
    color: #fff;
    transform: translateY(-2px);
  }
  .fof-iconbar-btn.is-active {
    background: var(--fof-teal);
    color: #fff;
    box-shadow: 0 6px 18px rgba(79,168,115,0.42);
    transform: translateY(-1px);
  }
  .fof-iconbar-label {
    font-weight: 700;
    letter-spacing: 0.2px;
  }
}

/* ============ KLEINE FONT-TUNINGS für Manrope ============ */
.fof-header-name { letter-spacing: -0.3px; font-weight: 800; }
.fof-welcome-brand { font-weight: 800; letter-spacing: -1.2px; }
.fof-sidebar-head-brand { font-weight: 800; letter-spacing: -0.3px; }
.fof-msg-app strong, .fof-msg-user strong { font-weight: 700; }
.fof-verdict-title { font-weight: 800; }
.fof-suggest-pill, .fof-quick-reply { font-weight: 600; }
.fof-sidebar-tab { font-weight: 700; letter-spacing: -0.1px; }
.fof-sidebar-item-query { font-weight: 600; }
.fof-page-footer-brand { font-weight: 800; }
.fof-sidebar-trending-strip-title { font-weight: 800; }

/* Subtile Anpassung: Bubble-Text bei Manrope leicht mehr Tracking */
.fof-msg-app, .fof-msg-user {
  letter-spacing: -0.15px;
}

/* ============================================================
 * v4.5 FULL-BLEED + DENSITY (19.05.2026)
 * Edge-to-edge wie ein echtes Desktop-Tool
 * Header mit Action-Icons, kompakte Footer-Strip unten
 * ============================================================ */

@media (min-width: 1024px) {

  /* ============ FULL-BLEED LAYOUT ============ */
  html, body {
    height: 100vh;
    overflow: hidden;
  }
  body {
    padding: 0;
    background: var(--fof-paper-warm);
    display: flex;
    flex-direction: column;
  }

  .fof-shell {
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: var(--fof-paper);
  }

  /* Sidebars: klare Border-Right statt Shell-Border */
  .fof-sidebar-left {
    border-right: 1px solid var(--fof-line);
    width: 340px;
  }
  .fof-sidebar-right {
    border-left: 1px solid var(--fof-line);
    width: 80px;
  }
  #fof-app {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  /* ============ HEADER ============ */
  .fof-header {
    padding: 14px 24px;
    height: auto;
    min-height: 70px;
    gap: 14px;
  }
  .fof-header-avatar {
    width: 46px; height: 46px;
  }
  .fof-header-avatar .fof-owl-img {
    width: 46px; height: 46px;
  }
  .fof-header-name { font-size: 17px; }
  .fof-header-status { font-size: 12.5px; margin-top: 2px; }

  /* Header-Actions rechts: Search/Verlauf/Mehr */
  .fof-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .fof-header-action {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--fof-teal-soft);
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fof-teal-dark);
    transition: background .15s, color .15s, transform .15s;
  }
  .fof-header-action:hover {
    background: var(--fof-teal);
    color: #fff;
    transform: translateY(-1px);
  }
  .fof-header-menu {
    width: 40px; height: 40px;
  }

  /* ============ CHAT-AREA mit mehr Atem ============ */
  .fof-welcome { padding: 48px 24px 0; }
  .fof-welcome-avatar { width: 88px; height: 88px; }
  .fof-welcome-avatar .fof-owl { width: 56px; height: 56px; }
  .fof-welcome-brand { font-size: 38px; }
  .fof-welcome-sub { font-size: 15px; max-width: 380px; padding: 12px 18px; }

  .fof-messages { padding: 18px 18px; gap: 12px; }

  /* ============ COMPOSER: mehr Höhe + Breite ============ */
  .fof-composer {
    padding: 14px 0;
    min-height: 72px;
    gap: 10px;
  }
  .fof-composer-input-wrap {
    border-radius: 22px;
  }
  .fof-composer-input {
    padding: 12px 16px;
    font-size: 15px;
  }
  .fof-composer-send {
    width: 46px; height: 46px;
  }
  .fof-composer-send svg {
    width: 20px; height: 20px;
  }

  /* ============ SIDEBAR-LISTEN: mehr Padding ============ */
  .fof-sidebar-head {
    padding: 20px 22px 18px;
  }
  .fof-sidebar-tabs { padding: 14px 18px; }
  .fof-sidebar-item { padding: 14px 18px; gap: 13px; }
  .fof-sidebar-item::before { width: 40px; height: 40px; }
  .fof-sidebar-item-query { font-size: 14px; }
  .fof-sidebar-item-meta { font-size: 11.5px; margin-top: 4px; }
  .fof-sidebar-item-date { font-size: 11.5px; }

  /* Trending-Strip mehr Höhe */
  .fof-sidebar-trending-strip { padding: 18px 18px 0; }
  .fof-trending-bubble-circle { width: 56px; height: 56px; font-size: 25px; }
  .fof-trending-bubble { width: 62px; }
  .fof-trending-bubble-label { font-size: 10.5px; max-width: 62px; }

  /* Foot: noch dezenter weil eh kompakte Bottom-Strip kommt */
  .fof-sidebar-foot { padding: 12px 22px 14px; }

  /* ============ RIGHT-ICONBAR: größer wegen 80px Spalte ============ */
  .fof-sidebar-right { width: 80px; }
  .fof-iconbar { padding: 20px 0 12px; gap: 4px; }
  .fof-iconbar-btn {
    width: 64px;
    padding: 13px 4px 11px;
    margin: 0 8px 6px;
  }
  .fof-iconbar-btn svg { width: 24px; height: 24px; }
  .fof-iconbar-label { font-size: 10px; }

  /* ============ KOMPAKTE BOTTOM-FOOTER-STRIP ============ */
  .fof-page-footer {
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 24px;
    height: 38px;
    background: var(--fof-paper-warm);
    border-top: 1px solid var(--fof-line);
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11.5px;
  }
  .fof-page-footer-brand {
    font-size: 12px;
    margin-bottom: 0;
    margin-right: 8px;
  }
  .fof-page-footer-claim {
    font-size: 11px;
    margin-right: auto;
    color: var(--fof-ink-mute);
  }
  .fof-page-footer-links {
    display: flex;
    gap: 0;
    margin-left: auto;
  }
  .fof-page-footer-links a {
    font-size: 11.5px;
    padding: 0 10px;
    border-right: 1px solid var(--fof-line);
    color: var(--fof-ink-mute);
  }
  .fof-page-footer-links a:hover {
    color: var(--fof-teal-dark);
  }

  /* Chat-Stream interne max-width etwas weiter, mehr Atem */
  .fof-welcome,
  .fof-messages { max-width: 820px; }
  .fof-composer {
    padding-left: max(18px, calc((100% - 820px) / 2));
    padding-right: max(18px, calc((100% - 820px) / 2));
  }
}

@media (min-width: 1440px) {
  .fof-sidebar-left { width: 300px; }
  .fof-welcome, .fof-messages { max-width: 880px; }
  .fof-composer {
    padding-left: max(18px, calc((100% - 880px) / 2));
    padding-right: max(18px, calc((100% - 880px) / 2));
  }
}

/* ============ MOBILE: Header-Actions auf nur Menü reduzieren ============ */
@media (max-width: 1023px) {
  .fof-header-action--desktop { display: none; }
  .fof-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .fof-header-action {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--fof-teal-soft);
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fof-teal-dark);
    transition: background .15s, color .15s;
  }
  .fof-header-action:hover {
    background: var(--fof-teal);
    color: #fff;
  }
}

/* ============================================================
 * v4.6 CHATZY-ALIGN (19.05.2026)
 * Exakte Werte aus Chatzy HTML Template _variables.scss
 * + Original Pattern-PNG + asymmetrische Bubbles
 * ============================================================ */

:root {
  /* Aus _variables.scss übernommen */
  --fof-teal: #01AA85;
  --fof-teal-dark: #018F70;
  --fof-teal-soft: #e3f7f3;
  --fof-teal-light: #08cfa4;
  --fof-user-bubble: #01AA85;
  --fof-line: #e5e8e9;
  --fof-line-soft: rgba(127, 131, 132, 0.15);
  --fof-ink-mute: #7F8384;
  --fof-paper: #ffffff;
  --fof-paper-warm: #ffffff;
}

body {
  background: #eff1f2;
}

/* ============ CHAT-AREA: Pattern als Cover + Primary-Tint ============ */
.fof-chat {
  background-color: rgba(1, 170, 133, 0.08);
  background-image: url("chat-pattern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

/* ============ HEADER: Primary-Light Hintergrund (wie contact-details) ============ */
.fof-header {
  background: var(--fof-teal-soft);
  border-bottom: 1px solid rgba(127, 131, 132, 0.1);
  padding: 18px 24px;
  min-height: 80px;
}
.fof-header-avatar { width: 50px; height: 50px; }
.fof-header-avatar .fof-owl-img { width: 50px; height: 50px; }

/* ============ BUBBLES: asymmetrische Radien wie Chatzy ============ */
.fof-msg-app {
  background: #ffffff;
  border: 0;
  border-radius: 0 20px 20px 20px;
  padding: 14px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}
.fof-msg-app::before { display: none; }

.fof-msg-user {
  background: var(--fof-teal);
  color: #fff;
  border-radius: 20px 20px 0 20px;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(1, 170, 133, 0.24);
}
.fof-msg-user::after {
  background: var(--fof-teal);
  bottom: 0;
  right: -7px;
  width: 10px;
  height: 13px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Profile/Avatar in Chat: 30px wie Chatzy */
.fof-msg-app-avatar {
  width: 32px;
  height: 32px;
  box-shadow: 0 2px 6px rgba(1, 170, 133, 0.28);
}
.fof-msg-app-avatar .fof-owl { width: 20px; height: 20px; }

/* ============ COMPOSER ============ */
.fof-composer {
  background: #fff;
  border-top: 1px solid rgba(127, 131, 132, 0.1);
  box-shadow: none;
}
.fof-composer-input-wrap {
  background: #fff;
  border: 1px solid var(--fof-line);
  border-radius: 25px;
}
.fof-composer-input-wrap:focus-within {
  border-color: var(--fof-teal);
  box-shadow: 0 0 0 4px rgba(1, 170, 133, 0.12);
}
.fof-composer-input {
  font-weight: 500;
  font-size: 14px;
}
.fof-composer-send {
  background: var(--fof-teal);
  box-shadow: 0 4px 14px rgba(1, 170, 133, 0.40);
}
.fof-composer-send:hover {
  background: var(--fof-teal-dark);
  box-shadow: 0 6px 18px rgba(1, 170, 133, 0.50);
}
.fof-composer-attach,
.fof-composer-camera {
  background: var(--fof-teal-soft);
  color: var(--fof-teal-dark);
}
.fof-composer-attach:hover,
.fof-composer-camera:hover {
  background: var(--fof-teal);
  color: #fff;
}

/* ============ HEADER-MENÜ + ACTIONS ============ */
.fof-header-menu,
.fof-header-action {
  background: #fff;
  color: var(--fof-teal-dark);
  border: 0;
  width: 42px;
  height: 42px;
}
.fof-header-menu:hover,
.fof-header-action:hover {
  background: var(--fof-teal);
  color: #fff;
}

/* ============ WELCOME-BLOCK ============ */
.fof-welcome-avatar {
  background: linear-gradient(135deg, var(--fof-teal-light) 0%, var(--fof-teal) 100%);
  box-shadow: 0 14px 36px rgba(1, 170, 133, 0.36), 0 0 0 6px rgba(255,255,255,0.9);
}
.fof-welcome-pulse { border-color: var(--fof-teal); }
.fof-welcome-sub {
  background: #fff;
  border: 1px solid rgba(127, 131, 132, 0.12);
  box-shadow: 0 4px 14px rgba(1, 170, 133, 0.08);
}

/* ============ DESKTOP: SIDEBAR-BREITE 420px + Spacing 30px ============ */
@media (min-width: 1024px) {
  body { background: #ffffff; }

  .fof-sidebar-left {
    width: 420px;
    background: #fff;
    border-right: 1px solid rgba(127, 131, 132, 0.1);
  }
  .fof-sidebar-right {
    width: 84px;
    border-left: 1px solid rgba(127, 131, 132, 0.1);
  }

  /* Profil-Card oben */
  .fof-sidebar-head {
    padding: 28px 30px 22px;
    background: #fff;
  }
  .fof-sidebar-head-avatar {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, var(--fof-teal-light) 0%, var(--fof-teal) 100%);
    box-shadow: 0 4px 14px rgba(1, 170, 133, 0.32);
  }
  .fof-sidebar-head-avatar .fof-owl-img {
    width: 50px; height: 50px;
  }
  .fof-sidebar-head-brand { font-size: 20px; }

  /* Trending-Strip */
  .fof-sidebar-trending-strip {
    padding: 18px 30px 0;
    background: #fff;
  }
  .fof-trending-bubble-circle {
    width: 56px; height: 56px;
    background: var(--fof-teal-soft);
    box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(1, 170, 133, 0.18);
  }
  .fof-trending-bubble:hover .fof-trending-bubble-circle {
    background: var(--fof-teal);
    box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(1, 170, 133, 0.42);
  }

  /* Tabs */
  .fof-sidebar-tabs { padding: 16px 22px; }
  .fof-sidebar-tab.is-active {
    box-shadow: 0 4px 14px rgba(1, 170, 133, 0.36);
  }

  /* Listen-Items: großzügiger wie chat-main */
  .fof-sidebar-item {
    padding: 18px 30px;
    gap: 15px;
    border-left: 0;
    border-bottom: 1px solid rgba(127, 131, 132, 0.10);
    transition: background .2s;
  }
  .fof-sidebar-item:hover {
    background: rgba(1, 170, 133, 0.08);
  }
  .fof-sidebar-item::before {
    width: 44px; height: 44px;
  }
  .fof-sidebar-item-query {
    font-size: 14px;
    font-weight: 700;
  }
  .fof-sidebar-item-meta { font-size: 12px; }

  /* Right Iconbar */
  .fof-iconbar { padding: 22px 0 12px; }
  .fof-iconbar-btn {
    width: 68px;
    background: var(--fof-teal-soft);
    color: var(--fof-teal-dark);
    margin: 0 8px 8px;
    padding: 14px 4px 12px;
    border-radius: 16px;
  }
  .fof-iconbar-btn:hover,
  .fof-iconbar-btn.is-active {
    background: var(--fof-teal);
    color: #fff;
    box-shadow: 0 6px 18px rgba(1, 170, 133, 0.40);
  }

  /* Shell ohne Schatten/Radius — full edge-to-edge mit klaren Borders */
  .fof-shell {
    background: #fff;
    box-shadow: none;
    border-radius: 0;
  }

  /* Chat-Inhalt etwas breiter (Manrope/Bubble-Padding nutzen die Breite) */
  .fof-welcome, .fof-messages { max-width: 800px; }

  /* Page-Footer dezent */
  .fof-page-footer {
    background: #fff;
    border-top: 1px solid rgba(127, 131, 132, 0.1);
  }
}

@media (min-width: 1440px) {
  .fof-sidebar-left { width: 320px; }
}

/* ============================================================
 * v4.7 FULL-BLEED FIX (19.05.2026)
 * Chat-Area füllt volle Breite (wie Chatzy .messages)
 * ============================================================ */

@media (min-width: 1024px) {
  /* Aufhebung aller bisherigen max-width-Begrenzungen */
  .fof-welcome,
  .fof-messages {
    max-width: none;
    width: 100%;
  }
  .fof-messages {
    padding: 30px 45px;
    gap: 14px;
  }
  .fof-welcome {
    padding: 50px 45px 20px;
  }
  .fof-composer {
    padding: 16px 45px;
  }
  .fof-composer-input-wrap {
    flex: 1;
  }

  /* Bubbles brauchen sensible Max-Width damit sie nicht riesig werden */
  .fof-msg-app-wrap,
  .fof-msg-user {
    max-width: 70%;
  }
  .fof-msg-user {
    align-self: flex-end;
  }
}

@media (min-width: 1440px) {
  .fof-messages,
  .fof-welcome { padding-left: 60px; padding-right: 60px; }
  .fof-composer { padding-left: 60px; padding-right: 60px; }
  .fof-msg-app-wrap,
  .fof-msg-user { max-width: 65%; }
}

/* ============================================================
 * v4.8 EXAKTE CHATZY-TYPOGRAFIE + SPACING (19.05.2026)
 * Werte 1:1 aus _typography.scss + _content.scss + _chat-box.scss
 * Fluid font-sizes mit clamp() statt fixed
 * Technik bleibt unberührt - nur visuelle Anpassung
 * ============================================================ */

/* ============ BODY: weiß + fluid Font ============ */
html, body {
  font-size: clamp(12px, calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320))), 14px);
}
body {
  background: #ffffff;
}

/* ============ HEADINGS (Chatzy h4/h5/h6 1:1) ============ */
/* Item-Titel (war .fof-sidebar-item-query) - wie Chatzy h4 */
.fof-sidebar-item-query {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320))), 18px);
  font-weight: 500;
  color: #2C2C2C; /* dark-color */
  letter-spacing: -0.1px;
}
/* Item-Meta - wie Chatzy h5/h6 */
.fof-sidebar-item-meta {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px);
  font-weight: 400;
  color: #7F8384; /* muted-font */
}

/* ============ HEADER: 30px Padding + 60px Avatar ============ */
.fof-header {
  padding: 30px;
  min-height: auto;
  background: var(--fof-teal-soft);
  border-bottom: 1px solid rgba(127, 131, 132, 0.1);
}
.fof-header-avatar { width: 60px; height: 60px; }
.fof-header-avatar .fof-owl-img { width: 60px; height: 60px; }
.fof-header-avatar .fof-owl { width: 36px; height: 36px; }
.fof-header-name {
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320))), 18px);
  font-weight: 800;
  color: #2C2C2C;
}
.fof-header-status {
  font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px);
  font-weight: 400;
  color: #7F8384;
}

/* ============ BUBBLES: 14-16px ============ */
.fof-msg-app,
.fof-msg-user {
  font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px);
  font-weight: 600;
  letter-spacing: -0.1px;
}

/* ============ DESKTOP: Sidebar-Items + Composer ============ */
@media (min-width: 1024px) {

  /* Sidebar-Profil-Card oben: padding wie Chatzy left-sidebar-spacing 30px */
  .fof-sidebar-head {
    padding: 30px;
    gap: 16px;
  }
  .fof-sidebar-head-avatar { width: 60px; height: 60px; }
  .fof-sidebar-head-avatar .fof-owl-img { width: 60px; height: 60px; }
  .fof-sidebar-head-brand {
    font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))), 20px);
    font-weight: 800;
  }

  /* Trending-Strip 30px Padding */
  .fof-sidebar-trending-strip { padding: 22px 30px 6px; }

  /* Tabs */
  .fof-sidebar-tabs { padding: 14px 22px 18px; }
  .fof-sidebar-tab {
    font-size: 14px;
    font-weight: 700;
    padding: 11px 14px;
  }

  /* Listen-Items: 20px vertikal + 25px horizontal wie chat-main */
  .fof-sidebar-item {
    padding: 20px 25px;
    gap: 15px;
    align-items: center;
  }
  .fof-sidebar-item::before {
    width: 50px;
    height: 50px;
    background-size: 22px;
  }
  .fof-sidebar-item-date {
    font-size: 12px;
    font-weight: 600;
    color: #7F8384;
  }
  /* Pill (FALSCH/WAHR Badge - oben in row1, wenn wieder sichtbar) */
  .fof-sidebar-item-pill {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
  }

  /* Empty-State */
  .fof-sidebar-empty-title {
    font-size: 16px;
    font-weight: 500;
    color: #2C2C2C;
  }
  .fof-sidebar-empty-sub {
    font-size: 14px;
    font-weight: 400;
    color: #7F8384;
    line-height: 1.55;
  }

  /* Header-Actions: 44x44 statt 42 (etwas mehr Volumen) */
  .fof-header-actions { gap: 10px; }
  .fof-header-action,
  .fof-header-menu {
    width: 44px; height: 44px;
  }
  .fof-header-action svg { width: 20px; height: 20px; }

  /* Composer: 25px Padding wie chatzy message-input vermutlich */
  .fof-composer {
    padding: 22px 30px;
    min-height: 90px;
    gap: 14px;
  }
  .fof-composer-input-wrap { border-radius: 25px; }
  .fof-composer-input {
    font-size: 14px;
    padding: 14px 18px;
  }
  .fof-composer-send {
    width: 50px; height: 50px;
  }
  .fof-composer-send svg { width: 22px; height: 22px; }
  .fof-composer-attach,
  .fof-composer-camera {
    width: 42px; height: 42px;
  }

  /* Chat-Inhalt: 25-30px Padding (war auf 45px → zu viel) */
  .fof-messages { padding: 25px 30px; gap: 14px; }
  .fof-welcome { padding: 40px 30px 10px; }

  /* Right-Iconbar - leicht roomiger */
  .fof-iconbar-btn { width: 68px; }
  .fof-iconbar-btn svg { width: 24px; height: 24px; }
  .fof-iconbar-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Page-Footer-Strip: 14px font, mehr Höhe */
  .fof-page-footer { font-size: 13px; height: 42px; }
  .fof-page-footer-links a { font-size: 13px; padding: 0 12px; }
  .fof-page-footer-brand { font-size: 14px; }
  .fof-page-footer-claim { font-size: 12.5px; }

  /* Sidebar-Foot: Verlauf löschen größer */
  .fof-sidebar-foot {
    padding: 16px 30px 20px;
  }
  .fof-sidebar-foot-btn { font-size: 13px; }
}

/* ============ MOBILE: kompakter aber gleiche Proportionen ============ */
@media (max-width: 1023px) {
  .fof-header { padding: 20px; }
  .fof-header-avatar { width: 50px; height: 50px; }
  .fof-header-avatar .fof-owl-img { width: 50px; height: 50px; }
  .fof-header-name {
    font-size: 16px;
    font-weight: 800;
  }
  .fof-header-status { font-size: 13px; }
}

/* ============================================================
 * v4.9 MIMIKAMA-PATTERN + SCHRIFT + EULE (19.05.2026)
 * - Pattern wechselt von Chatzy auf eigenes Mimikama-SVG
 * - Bubbles 14-16px fluid (war 13-14px)
 * - Welcome-Avatar dezenter (kein dicker Ring)
 * ============================================================ */

/* ============ PATTERN: Mimikama statt Chatzy ============ */
.fof-chat {
  background-color: rgba(1, 170, 133, 0.10);
  background-image: url("mimikama-pattern.png?v=423");
  background-repeat: repeat;
  background-size: 420px 420px;
  background-position: 0 0;
}

/* ============ BUBBLES: 14-16px fluid (war 13-14px) ============ */
.fof-msg-app,
.fof-msg-user {
  font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px);
  line-height: 1.5;
}

/* ============ WELCOME-AVATAR: dezenter ============ */
.fof-welcome-avatar {
  /* Nur subtiler Schatten - kein dicker weißer Ring, kein massiver Glow */
  box-shadow: 0 6px 18px rgba(1, 170, 133, 0.22);
}
.fof-welcome-pulse {
  /* Pulse-Border viel feiner */
  border: 1.5px solid var(--fof-teal);
  opacity: 0.25;
  inset: -4px;
}

@media (min-width: 1024px) {
  /* Welcome-Avatar Desktop: leicht größer aber gleichermaßen dezent */
  .fof-welcome-avatar {
    width: 84px;
    height: 84px;
    box-shadow: 0 8px 22px rgba(1, 170, 133, 0.26);
  }
  .fof-welcome-avatar .fof-owl-img {
    width: 84px;
    height: 84px;
  }
  .fof-welcome-pulse {
    inset: -5px;
    border-width: 1.5px;
  }
}

/* ============================================================
 * v5.0 FEINHEIT (19.05.2026)
 * Eulen-img-Bug, Sidebar-Brand prominenter, Items kompakter
 * ============================================================ */

/* ============ EULEN-IMG: Container-füllend statt natürliche Größe ============ */
.fof-owl-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Damit Container weiterhin definierte Größe gibt - das ist der Verwendungs-Punkt */
.fof-header-avatar,
.fof-sidebar-head-avatar,
.fof-welcome-avatar,
.fof-msg-app-avatar {
  overflow: hidden;
}

/* ============ HEADER + SIDEBAR-HEAD: einheitlich 56px Eule ============ */
.fof-header-avatar { width: 56px; height: 56px; }
@media (min-width: 1024px) {
  .fof-sidebar-head-avatar { width: 56px; height: 56px; }
}

/* ============ "FAKT · FAKE?" BRAND prominenter ============ */
.fof-sidebar-head-brand,
.fof-header-name {
  font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320))), 24px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.fof-sidebar-head-brand .w-fakt,
.fof-header-name .w-fakt { color: var(--fof-ink); }
.fof-sidebar-head-brand .w-sep,
.fof-header-name .w-sep {
  color: var(--fof-ink-mute);
  font-weight: 400;
  margin: 0 4px;
}
.fof-sidebar-head-brand .w-fake,
.fof-header-name .w-fake { color: var(--fof-false); }

/* ============ SIDEBAR-ITEMS: kompakter ============ */
@media (min-width: 1024px) {
  .fof-sidebar-item {
    padding: 13px 22px;
    gap: 12px;
  }
  .fof-sidebar-item::before {
    width: 38px;
    height: 38px;
    background-size: 18px;
  }
  /* Item-Titel: deutlich kleiner als vorher */
  .fof-sidebar-item-query {
    font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px);
    font-weight: 600;
    color: var(--fof-ink);
    line-height: 1.4;
    letter-spacing: -0.1px;
  }
  .fof-sidebar-item-meta {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--fof-ink-mute);
    margin-top: 2px;
  }
  .fof-sidebar-item-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--fof-ink-mute);
  }
  .fof-sidebar-item-row1 {
    margin-bottom: 2px;
  }

  /* Trending-Items: gleicher Maßstab */
  .fof-sidebar-item--trending .fof-sidebar-item-query {
    font-size: 13.5px;
  }
  .fof-sidebar-item-count {
    font-size: 10.5px;
    padding: 2px 7px;
  }

  /* Sidebar-Head Padding kompakter, damit Brand prominenter wirkt */
  .fof-sidebar-head {
    padding: 22px 22px 18px;
    gap: 13px;
  }
  .fof-sidebar-head-claim {
    font-size: 12px;
    font-weight: 500;
    color: var(--fof-ink-mute);
    margin-top: 4px;
  }

  /* Trending-Bubbles bleiben prominent */
  .fof-sidebar-trending-strip { padding: 16px 22px 4px; }
  .fof-trending-bubble-label { font-size: 10.5px; }

  /* Tabs */
  .fof-sidebar-tabs { padding: 10px 22px 14px; }
}

/* ============ HEADER (Chat): prominenter ============ */
.fof-header { gap: 14px; }
.fof-header-status {
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 3px;
}

/* ============================================================
 * v5.1 EXAKTE PROFILE-GRÖSSEN AUS CHATZY (19.05.2026)
 * Aus compiled style.css extrahiert:
 *   .profile          : 54x54 (Listen-Avatare)
 *   media-left .profile : 60x60 (Chat-Header)
 *   .profile.online:before : 13x13 mit 2px white border, right:3px bottom:2px
 *
 * Sidebar-Head-Avatar (Mimikama-Brand) auf 64x64 — prominenter weil Logo
 * ============================================================ */

/* ============ CHAT-HEADER AVATAR: exakt 60×60 wie Chatzy ============ */
.fof-header-avatar {
  width: 60px;
  height: 60px;
}

/* ============ SIDEBAR-HEAD AVATAR (Brand-Logo): 64×64 ============ */
@media (min-width: 1024px) {
  .fof-sidebar-head-avatar {
    width: 64px;
    height: 64px;
  }
}

/* ============ STATUS-DOT exakt wie Chatzy ============ */
.fof-header-avatar::after,
.fof-sidebar-head-avatar::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  right: 3px;
  bottom: 2px;
  background: #01AA85;  /* online */
  box-shadow: none;
}

/* ============ HEADER-NAME: nicht ganz so groß, mehr wie Chatzy ============ */
/* "Fakt · Fake?" als BRANDING bleibt prominent, aber wir nehmen Chatzy h4-Werte als Basis */
.fof-header-name,
.fof-sidebar-head-brand {
  font-size: clamp(18px, calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320))), 22px);
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* ============ STATUS-TEXT wie Chatzy h5/h6 ============ */
.fof-header-status,
.fof-sidebar-head-claim {
  font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px);
  font-weight: 400;
  color: #7F8384;
}

/* ============ Padding für Header (.contact-details) = 30px wie Chatzy ============ */
.fof-header {
  padding: 30px;
}
@media (min-width: 1024px) {
  .fof-sidebar-head {
    padding: 30px;
  }
}

/* ============================================================
 * v5.2 BUBBLE-AVATAR EXAKT 54x54 (19.05.2026)
 * Chatzy .profile { width:54px; height:54px } für ALLE Avatare
 * in Chat-Bubbles (App-Side)
 * ============================================================ */

.fof-msg-app-avatar {
  width: 54px !important;
  height: 54px !important;
  margin-right: 15px;
  margin-left: 0;
  box-shadow: 0 3px 10px rgba(1, 170, 133, 0.25);
}
.fof-msg-app-avatar .fof-owl { width: 32px; height: 32px; }

/* Gap im Wrap reduzieren, weil Avatar jetzt margin hat */
.fof-msg-app-wrap {
  gap: 0;
}

/* ============================================================
 * v5.3 BRAND-AKZENT "Fakt · Fake?" (19.05.2026)
 * Universal-Update für alle Wordmark-Vorkommen
 * .w-fakt | .w-sep (·) | .w-fake
 * ============================================================ */

/* Wordmark-Komponenten universal in allen Brand-Stellen */
.fof-sidebar-head-brand,
.fof-header-name,
.fof-welcome-brand,
.fof-page-footer-brand,
.fof-header-name-verified ~ * {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

/* "Fakt" — kräftig, ink */
.w-fakt {
  color: var(--fof-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

/* "·" — Mint-Akzent, etwas größer, kein Margin (sitzt direkt zwischen Fakt und Fake) */
.w-sep {
  color: var(--fof-teal) !important;
  font-weight: 900 !important;
  font-size: 1.15em !important;
  margin: 0 5px !important;
  line-height: 1;
  transform: translateY(-0.05em);
  display: inline-block;
}

/* "Fake?" — kräftig, Subtle-Red, mit Marker-Highlight darunter */
.w-fake {
  color: var(--fof-false) !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.w-fake::before {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 0.05em;
  height: 0.42em;
  background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(168, 81, 74, 0.20) 30%, rgba(168, 81, 74, 0.22) 100%);
  border-radius: 2px;
  z-index: -1;
  transform: skewX(-4deg);
}

/* Welcome-Brand (groß, Hero) — Highlight stärker */
.fof-welcome-brand .w-fake::before {
  background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(168, 81, 74, 0.22) 35%, rgba(168, 81, 74, 0.25) 100%);
  bottom: 0.06em;
  height: 0.38em;
  left: -4px;
  right: -4px;
}

/* Page-Footer Brand kleiner, weniger Effekt */
.fof-page-footer-brand .w-fake::before {
  background: rgba(168, 81, 74, 0.16);
  height: 0.32em;
  bottom: 0.05em;
}

/* Sidebar-Head: Brand etwas größer + leichter Text-Shadow für Tiefe */
@media (min-width: 1024px) {
  .fof-sidebar-head-brand {
    font-size: clamp(22px, calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320))), 28px);
    text-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .fof-header-name {
    font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320))), 24px);
  }
}

/* ============================================================
 * v5.4 USER-TIME WEIß + MINI-CARDS MODERN (19.05.2026)
 * ============================================================ */

/* ============ USER-TIME: weiß auf grünem Bubble-Hintergrund ============ */
.fof-msg-user .fof-msg-time {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  margin-top: 4px;
}
.fof-msg-user .fof-msg-time-check {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}

/* ============ MINI-CARDS: moderner, passend zu Bubbles ============ */
.fof-mini-card {
  background: #ffffff;
  border: 1px solid var(--fof-line);
  border-left: 4px solid var(--fof-line);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 18px 0 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .15s, box-shadow .18s, transform .15s;
}
.fof-mini-card:hover {
  background: #ffffff;
  border-color: var(--fof-teal);
  box-shadow: 0 4px 16px rgba(1, 170, 133, 0.12), 0 1px 2px rgba(0,0,0,0.04);
  transform: none;
}
.fof-mini-card.is-true:hover { border-left-color: var(--fof-true); }
.fof-mini-card.is-false:hover { border-left-color: var(--fof-false); }
.fof-mini-card.is-warn:hover { border-left-color: var(--fof-warn); }
.fof-mini-card.is-info:hover { border-left-color: var(--fof-teal); }

/* Pill-Badge: runder + sauberer */
.fof-mini-meta {
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  text-transform: none;
}
.fof-mini-badge {
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 800;
}

/* Title: etwas mehr Atem, Manrope passt */
.fof-mini-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--fof-ink);
}

/* CTA-Zeile: modern, Mimikama-Grün, kein Uppercase */
.fof-mini-cta {
  padding: 10px 0 12px;
  border-top: 1px solid var(--fof-line-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--fof-teal-dark);
  letter-spacing: 0;
  text-transform: none;
}
.fof-mini-cta-arr {
  background: var(--fof-teal);
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  transition: background .15s, transform .15s;
}
.fof-mini-card:hover .fof-mini-cta-arr {
  background: var(--fof-teal-dark);
  transform: translateX(2px);
}

/* Spacing zwischen Cards in Bubble */
.fof-msg-app .fof-mini-card + .fof-mini-card {
  margin-top: 10px;
}

/* Verdict-Card: gleiche Mini-Card-Logik */
.fof-verdict {
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(1, 170, 133, 0.08);
}

/* ============================================================
 * v5.5 KI-HILFE-BUBBLE Phase 1 (19.05.2026)
 * Visuell unterschieden vom Mimikama-Faktencheck:
 *  - Ocker-Tönung (Mimikama Warm Ocker #B28A5C)
 *  - Glühbirnen-Avatar statt Eule
 *  - Disclaimer-Header sichtbar
 *  - Warning-Signs als rote Pills
 *  - Quick-Replies in Ocker-Akzent
 * ============================================================ */

/* ---- KI-Avatar (Glühbirne statt Eule) ---- */
.fof-msg-ki-avatar {
  background: linear-gradient(135deg, #FFF6E5 0%, #FFE7B8 100%) !important;
  box-shadow: 0 3px 10px rgba(178, 138, 92, 0.28) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fof-ki-bulb {
  font-size: 26px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(178, 138, 92, 0.20));
}

/* ---- KI-Bubble: Ocker-Tönung, deutlich unterscheidbar ---- */
.fof-msg-ki {
  background: linear-gradient(180deg, #FFFBF2 0%, #FFF6E8 100%) !important;
  border: 1px solid rgba(178, 138, 92, 0.25) !important;
  box-shadow: 0 1px 2px rgba(178, 138, 92, 0.06), 0 6px 18px rgba(178, 138, 92, 0.10) !important;
  max-width: 580px;
}

/* ---- Header: Label-Pill + Disclaimer ---- */
.fof-ki-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(178, 138, 92, 0.18);
  flex-wrap: wrap;
}
.fof-ki-label {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #6B4F2A;
  text-transform: uppercase;
  background: rgba(178, 138, 92, 0.18);
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.fof-ki-disclaimer {
  font-size: 11.5px;
  color: #8B7355;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

/* ---- Summary: der eigentliche Text ---- */
.fof-ki-summary {
  font-size: 14px;
  color: var(--fof-ink);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* ---- Warning-Signs: rote Achtungs-Pills ---- */
.fof-ki-signs {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fof-ki-signs li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(168, 81, 74, 0.10);
  color: #8C3F39;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(168, 81, 74, 0.20);
}
.fof-ki-signs li::before {
  content: '⚠';
  font-size: 11px;
  color: #A8514A;
  line-height: 1;
}

/* ---- Hub-Links: Mini-Kacheln ---- */
.fof-ki-hubs {
  margin: 14px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fof-ki-hub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(178, 138, 92, 0.22);
  border-radius: 10px;
  color: var(--fof-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fof-ki-hub:hover {
  border-color: var(--fof-teal);
  box-shadow: 0 3px 12px rgba(1, 170, 133, 0.10);
  transform: translateX(2px);
}
.fof-ki-hub-arr {
  color: var(--fof-teal);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.fof-ki-hub-title {
  flex: 1;
}

/* ---- Quick-Replies: Ocker-getönt, klar als KI-Replies erkennbar ---- */
.fof-ki-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.fof-ki-reply {
  background: #ffffff;
  border: 1px solid rgba(178, 138, 92, 0.35);
  color: #6B4F2A;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: inherit;
}
.fof-ki-reply:hover {
  background: rgba(178, 138, 92, 0.12);
  border-color: rgba(178, 138, 92, 0.55);
}
.fof-ki-reply:active {
  transform: scale(0.97);
}
.fof-ki-reply:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ---- Vague-Hint bei low confidence: leiser Block ---- */
.fof-ki-vague-hint {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(178, 138, 92, 0.10);
  border-left: 3px solid rgba(178, 138, 92, 0.40);
  border-radius: 6px;
  font-size: 12.5px;
  color: #6B5640;
  line-height: 1.45;
}

/* ---- Zeit in KI-Bubble: Ocker statt grau ---- */
.fof-msg-ki .fof-msg-time {
  color: #B28A5C;
  margin-top: 10px;
}

/* ---- Mobile: Bubble breiter, Header umbrechen ---- */
@media (max-width: 600px) {
  .fof-ki-header { gap: 8px; }
  .fof-ki-disclaimer { width: 100%; }
}

/* ============================================================
 * v5.6 KI-HILFE-MODUS (Phase 2) – 19.05.2026
 * - Header-Button "KI-Hilfe" mit aktivem State
 * - Mode-Bar unter Header
 * ============================================================ */

/* ---- KI-Help-Button im Header ---- */
.fof-header-action--ki {
  position: relative;
  transition: background .15s, color .15s, box-shadow .15s;
}
.fof-header-action--ki:hover {
  background: rgba(178, 138, 92, 0.10);
  color: #8B6B3F;
}
.fof-header-action--ki.is-active {
  background: linear-gradient(135deg, #FFF6E5 0%, #FFE7B8 100%);
  color: #6B4F2A;
  box-shadow: 0 2px 6px rgba(178, 138, 92, 0.30), inset 0 0 0 1px rgba(178, 138, 92, 0.40);
}
.fof-header-action--ki.is-active::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B28A5C;
  box-shadow: 0 0 0 2px #fff;
}

/* ---- Mode-Bar: zeigt aktiven KI-Help-Modus ---- */
.fof-mode-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #FFFBF2 0%, #FFF4E0 100%);
  border-bottom: 1px solid rgba(178, 138, 92, 0.25);
  font-size: 13px;
  color: #6B4F2A;
  line-height: 1.4;
  flex-wrap: wrap;
}
.fof-mode-bar[hidden] { display: none; }
.fof-mode-bar-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.fof-mode-bar-text {
  flex: 1;
  min-width: 0;
}
.fof-mode-bar-text strong {
  font-weight: 700;
  color: #5A3F1E;
}
.fof-mode-bar-exit {
  background: #ffffff;
  border: 1px solid rgba(178, 138, 92, 0.40);
  color: #6B4F2A;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  font-family: inherit;
}
.fof-mode-bar-exit:hover {
  background: rgba(178, 138, 92, 0.12);
  border-color: rgba(178, 138, 92, 0.60);
}

@media (max-width: 600px) {
  .fof-mode-bar {
    padding: 8px 16px;
    gap: 8px;
    font-size: 12px;
  }
  .fof-mode-bar-exit {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
 * v5.7 HILFE-BUBBLE Schritt 1: Themen-Auswahl (19.05.2026)
 * Backend: api/help.php + help_responses.json (27 Bausteine)
 * Farbe: Muted-Teal (#4D7076) — unterscheidbar von Mimikama (#01AA85)
 *        und KI-Hint (Ocker)
 * ============================================================ */

.fof-msg-help-avatar {
  background: linear-gradient(135deg, #DCEEEA 0%, #BDD9D3 100%) !important;
  box-shadow: 0 3px 10px rgba(77, 112, 118, 0.25) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fof-msg-help-avatar > span {
  font-size: 26px;
  line-height: 1;
}

.fof-msg-help {
  background: linear-gradient(180deg, #FCFDFC 0%, #F2F7F6 100%) !important;
  border: 1px solid rgba(77, 112, 118, 0.22) !important;
  box-shadow: 0 1px 2px rgba(77, 112, 118, 0.06), 0 6px 18px rgba(77, 112, 118, 0.08) !important;
  max-width: 580px;
}

.fof-help-header {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(77, 112, 118, 0.18);
}
.fof-help-label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #2F4F55;
  text-transform: uppercase;
  background: rgba(77, 112, 118, 0.16);
  padding: 3px 10px;
  border-radius: 99px;
}

.fof-help-intro {
  margin-bottom: 14px;
}
.fof-help-intro strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--fof-ink);
  margin-bottom: 4px;
  line-height: 1.35;
}
.fof-help-sub {
  display: block;
  color: var(--fof-ink-mute);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.fof-help-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 480px) {
  .fof-help-topics {
    grid-template-columns: 1fr 1fr;
  }
}

.fof-help-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--fof-line);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fof-ink);
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.fof-help-topic:hover {
  border-color: #4D7076;
  background: rgba(77, 112, 118, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 112, 118, 0.10);
}
.fof-help-topic:active {
  transform: translateY(0);
}
.fof-help-topic:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.fof-help-topic-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.fof-help-topic-label {
  flex: 1;
}

.fof-msg-help .fof-msg-time {
  color: #7A9398;
  margin-top: 10px;
}

/* Header-Glühbirne klar als "Hilfe" markieren statt is-active KI-Style */
.fof-header-action--ki {
  color: var(--fof-ink);
}
.fof-header-action--ki:hover {
  background: rgba(77, 112, 118, 0.10);
  color: #2F4F55;
}

/* ============================================================
 * v5.8 SICHTBARKEITS-FIX + RISK-STATES (19.05.2026)
 * - Header-Button mit Text-Label "Hilfe" (Desktop sichtbar)
 * - Welcome-Invite-Bubble "Etwas Schlimmes passiert?"
 * - Risk-State-Liste pro Topic
 * ============================================================ */

/* ---- Header-Button mit Text-Label ---- */
.fof-header-action--ki {
  width: auto !important;
  padding: 0 14px;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  background: rgba(168, 81, 74, 0.10);
  color: #8C3F39;
  border-radius: 99px;
  height: 40px;
  font-family: inherit;
  font-weight: 700;
}
.fof-header-action--ki svg {
  stroke: currentColor;
}
.fof-header-action-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  white-space: nowrap;
}
.fof-header-action--ki:hover {
  background: rgba(168, 81, 74, 0.18);
  color: #6B2F2A;
}

/* Mobile: nur Icon, Label ausblenden */
@media (max-width: 600px) {
  .fof-header-action--ki {
    width: 40px !important;
    padding: 0;
    justify-content: center;
  }
  .fof-header-action-label { display: none; }
}

/* ---- Welcome-Invite-Bubble: prominenter sichtbarer Einstieg ---- */
.fof-help-invite-wrap {
  margin-top: 14px;
}
.fof-help-invite {
  background: linear-gradient(180deg, #FCFDFC 0%, #F2F7F6 100%) !important;
  border: 1px solid rgba(77, 112, 118, 0.25) !important;
  display: block;
  padding: 16px 20px !important;
}
.fof-help-invite strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fof-ink);
  margin-bottom: 4px;
}
.fof-help-invite-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fof-ink-mute);
  line-height: 1.45;
  margin-bottom: 12px;
}
.fof-help-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #4D7076;
  color: #ffffff;
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px 9px 18px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s, transform .12s;
  letter-spacing: -0.1px;
}
.fof-help-invite-btn:hover {
  background: #3A5A60;
}
.fof-help-invite-btn:active {
  transform: scale(0.97);
}
.fof-help-invite-btn-arr {
  font-size: 15px;
  font-weight: 800;
}

/* ---- Risk-State-Liste (Schritt 2): wie Topic-Liste aber 1-spaltig (längere Labels) ---- */
.fof-help-rstates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fof-help-rstate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--fof-line);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fof-ink);
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.fof-help-rstate:hover {
  border-color: #4D7076;
  background: rgba(77, 112, 118, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 112, 118, 0.10);
}
.fof-help-rstate:active {
  transform: translateY(0);
}
.fof-help-rstate:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.fof-help-rstate-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.fof-help-rstate-label {
  flex: 1;
  line-height: 1.4;
}

/* ---- Divider + zweiter Hint in der Welcome-Invite ---- */
.fof-help-invite-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--fof-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fof-help-invite-divider::before,
.fof-help-invite-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fof-line);
}
.fof-help-invite-checkhint {
  display: block;
  font-size: 13px;
  color: var(--fof-ink);
  line-height: 1.5;
}
.fof-help-invite-checkhint strong {
  display: inline;
  font-weight: 700;
  color: var(--fof-ink);
  margin-right: 4px;
}

/* ============================================================
 * v5.9 HILFE-KARTE (Schritt 3) – 19.05.2026
 * Rendert die strukturierte Antwort von api/help.php
 * Variant-System: info | warning | danger | critical
 * ============================================================ */

.fof-helpcard {
  max-width: 620px;
  padding: 16px 22px 18px !important;
}

/* Variant: Akzent-Farben (info/warning = teal, danger/critical = rot) */
.fof-helpcard[data-variant="info"],
.fof-helpcard[data-variant="warning"] {
  --hc-accent: #4D7076;
  --hc-bg-soft: #DCEEEA;
  --hc-bg-stripe: rgba(77, 112, 118, 0.10);
  --hc-border: rgba(77, 112, 118, 0.25);
}
.fof-helpcard[data-variant="danger"],
.fof-helpcard[data-variant="critical"] {
  --hc-accent: #A8514A;
  --hc-bg-soft: #F4DDD8;
  --hc-bg-stripe: rgba(168, 81, 74, 0.10);
  --hc-border: rgba(168, 81, 74, 0.30);
  background: linear-gradient(180deg, #FDF8F7 0%, #FAEDEA 100%) !important;
  border-color: var(--hc-border) !important;
}

/* Eyebrow */
.fof-helpcard-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--hc-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fof-helpcard-eyebrow-label {
  background: var(--hc-bg-soft);
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 800;
}
.fof-helpcard-eyebrow-divider {
  opacity: 0.4;
}

/* Headline */
.fof-helpcard-headline {
  font-size: 18px;
  font-weight: 800;
  color: var(--fof-ink);
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .fof-helpcard-headline { font-size: 16px; }
}

/* Intro */
.fof-helpcard-intro {
  font-size: 14px;
  color: var(--fof-ink);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Emergency-Block: rote Box, prominent */
.fof-helpcard-emergency {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #FFF1ED 0%, #FDE5DE 100%);
  border: 1.5px solid rgba(168, 81, 74, 0.35);
  border-radius: 12px;
  margin: 14px 0 16px;
}
.fof-helpcard-emergency-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.fof-helpcard-emergency-content { flex: 1; min-width: 0; }
.fof-helpcard-emergency-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: #8C3F39;
  margin-bottom: 5px;
}
.fof-helpcard-emergency-text {
  font-size: 13.5px;
  color: var(--fof-ink);
  line-height: 1.45;
  margin-bottom: 10px;
}
.fof-helpcard-emergency-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fof-helpcard-emergency-phones a {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(168, 81, 74, 0.30);
  color: #8C3F39;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.fof-helpcard-emergency-phones a:hover {
  background: #fdf0ec;
  border-color: rgba(168, 81, 74, 0.50);
}

/* Steps */
.fof-helpcard-steps-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fof-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0 10px;
}
.fof-helpcard-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  counter-reset: helpstep;
}
.fof-helpcard-steps li {
  position: relative;
  padding: 10px 0 10px 38px;
  border-top: 1px solid var(--fof-line-soft);
  font-size: 14px;
  color: var(--fof-ink);
  line-height: 1.5;
}
.fof-helpcard-steps li:first-child { border-top: none; padding-top: 4px; }
.fof-helpcard-steps li:last-child { padding-bottom: 4px; }
.fof-helpcard-steps li::before {
  counter-increment: helpstep;
  content: counter(helpstep);
  position: absolute;
  left: 0;
  top: 11px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hc-bg-soft);
  color: var(--hc-accent);
  font-weight: 800;
  font-size: 12.5px;
  border-radius: 50%;
}
.fof-helpcard-steps li:first-child::before { top: 5px; }

/* Actions */
.fof-helpcard-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 16px;
}
.fof-helpcard-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--fof-line);
  border-radius: 10px;
  color: var(--fof-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.fof-helpcard-action:hover {
  border-color: var(--hc-accent);
  box-shadow: 0 3px 10px var(--hc-bg-stripe);
  transform: translateX(2px);
}
.fof-helpcard-action.is-tel {
  background: var(--hc-bg-soft);
  border-color: var(--hc-border);
  color: var(--hc-accent);
  font-weight: 700;
}
.fof-helpcard-action-icon {
  color: var(--hc-accent);
  font-weight: 800;
  flex-shrink: 0;
}

/* Related Mimikama */
.fof-helpcard-related {
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: var(--hc-bg-stripe);
  border-radius: 10px;
}
.fof-helpcard-related-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hc-accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.fof-helpcard-related-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--fof-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.fof-helpcard-related-item:hover { color: var(--hc-accent); }
.fof-helpcard-related-arr {
  color: var(--hc-accent);
  font-weight: 800;
}

/* Footer */
.fof-helpcard-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fof-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--fof-ink-mute);
  font-style: italic;
  line-height: 1.4;
}
.fof-helpcard-footer-link {
  color: var(--hc-accent);
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  white-space: nowrap;
}
.fof-helpcard-footer-link:hover {
  text-decoration: underline;
}

/* ============ v5.10: SVG-Flaggen + Action-Flag-Layout (19.05.2026) ============ */

.fof-flag-svg {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  vertical-align: middle;
}
.fof-flag-svg--square { border-radius: 2px; }

.fof-flag-card {
  display: inline-block;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

/* Phone-Pills: Flagge + Nummer nebeneinander */
.fof-helpcard-emergency-phones a {
  gap: 7px;
}

/* Action-Button mit Flagge: 3-spaltig (Flag | Label | Icon) */
.fof-helpcard-action-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.fof-helpcard-action-label {
  flex: 1;
  line-height: 1.3;
}

/* ============================================================
 * v5.11 MOBILE-POLISH (19.05.2026)
 * Komplette Durchsicht: Header, Bubbles, Hilfe-Cards, Helpcard
 * auf < 600px Viewport
 * ============================================================ */

@media (max-width: 600px) {

  /* ===== HEADER kompakter ===== */
  .fof-header {
    padding: 14px 16px !important;
    gap: 10px;
  }
  .fof-header-avatar {
    width: 44px !important;
    height: 44px !important;
  }
  .fof-header-avatar::after {
    width: 11px;
    height: 11px;
    right: 2px;
    bottom: 1px;
  }
  .fof-header-name,
  .fof-header .fof-header-name {
    font-size: 16px !important;
    line-height: 1.2;
  }
  .fof-header-status {
    font-size: 11px !important;
    margin-top: 2px !important;
  }
  .fof-header-actions {
    gap: 4px;
  }
  .fof-header-action {
    width: 36px;
    height: 36px;
  }
  .fof-header-action svg {
    width: 16px;
    height: 16px;
  }

  /* ===== BUBBLE-AVATAR auf Mobile kompakter ===== */
  .fof-msg-app-wrap {
    padding: 0 12px;
    margin-bottom: 14px;
  }
  .fof-msg-app-avatar,
  .fof-msg-app-avatar.fof-msg-help-avatar,
  .fof-msg-app-avatar.fof-msg-ki-avatar {
    width: 40px !important;
    height: 40px !important;
    margin-right: 8px !important;
  }
  .fof-msg-app-avatar .fof-owl,
  .fof-msg-app-avatar .fof-owl-img {
    width: 100% !important;
    height: 100% !important;
  }
  .fof-msg-app-avatar > span,
  .fof-msg-help-avatar > span,
  .fof-msg-ki-avatar .fof-ki-bulb {
    font-size: 20px !important;
  }

  /* ===== BUBBLE-INHALT auf Mobile kompakter ===== */
  .fof-msg-app {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.45;
    max-width: calc(100vw - 80px);
  }
  .fof-msg-user {
    padding: 11px 14px;
    font-size: 14px;
    max-width: calc(100vw - 40px);
  }

  /* ===== WELCOME-INVITE-BUBBLE kompakter ===== */
  .fof-help-invite {
    padding: 14px 16px !important;
  }
  .fof-help-invite strong {
    font-size: 14px;
    line-height: 1.3;
  }
  .fof-help-invite-sub {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .fof-help-invite-btn {
    padding: 8px 14px 8px 16px;
    font-size: 12.5px;
    gap: 8px;
  }
  .fof-help-invite-btn-arr {
    font-size: 13px;
  }
  .fof-help-invite-divider {
    margin: 12px 0 10px;
    font-size: 10px;
  }
  .fof-help-invite-checkhint {
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* ===== TOPIC-/RISK-STATE-AUSWAHL kompakter ===== */
  .fof-help-header {
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  .fof-help-label {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .fof-help-intro strong {
    font-size: 14px;
  }
  .fof-help-sub {
    font-size: 12px;
    line-height: 1.4;
  }
  .fof-help-topics {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .fof-help-topic,
  .fof-help-rstate {
    padding: 11px 12px;
    font-size: 13px;
    gap: 10px;
    line-height: 1.35;
  }
  .fof-help-topic-emoji,
  .fof-help-rstate-emoji {
    font-size: 18px;
  }

  /* ===== HELPCARD: gesamte Hilfe-Antwort kompakter ===== */
  .fof-helpcard {
    padding: 14px 16px 14px !important;
    max-width: 100% !important;
  }
  .fof-helpcard-eyebrow {
    font-size: 9.5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .fof-helpcard-eyebrow-label {
    padding: 3px 8px;
  }
  .fof-helpcard-headline {
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin-bottom: 6px;
  }
  .fof-helpcard-intro {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  /* Steps */
  .fof-helpcard-steps-label {
    font-size: 10.5px;
    margin: 6px 0 8px;
  }
  .fof-helpcard-steps li {
    padding: 9px 0 9px 32px;
    font-size: 13px;
    line-height: 1.45;
  }
  .fof-helpcard-steps li::before {
    width: 22px;
    height: 22px;
    font-size: 11.5px;
    top: 9px;
  }
  .fof-helpcard-steps li:first-child::before { top: 3px; }

  /* Emergency-Block: Notruf-Nummern als 2-Spalten-Grid (besser tippbar) */
  .fof-helpcard-emergency {
    padding: 12px 14px;
    gap: 10px;
    margin: 14px 0 14px;
  }
  .fof-helpcard-emergency-icon { font-size: 20px; }
  .fof-helpcard-emergency-label { font-size: 9.5px; margin-bottom: 4px; }
  .fof-helpcard-emergency-text {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .fof-helpcard-emergency-phones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .fof-helpcard-emergency-phones a {
    justify-content: center;
    font-size: 12px;
    padding: 7px 8px;
    gap: 6px;
    min-height: 38px;  /* gut tippbar */
  }
  .fof-flag-svg {
    width: 18px !important;
    height: 12px !important;
  }
  .fof-flag-svg--square {
    width: 12px !important;
    height: 12px !important;
  }

  /* Actions: kompakter, Label kann brechen */
  .fof-helpcard-actions {
    gap: 5px;
    margin: 4px 0 14px;
  }
  .fof-helpcard-action {
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 8px;
    min-height: 44px;  /* Apple-touch-target */
    line-height: 1.3;
  }
  .fof-helpcard-action-label {
    line-height: 1.3;
  }
  .fof-helpcard-action-icon {
    font-size: 13px;
  }

  /* Related */
  .fof-helpcard-related {
    padding: 10px 12px;
    margin: 8px 0 12px;
  }
  .fof-helpcard-related-label {
    font-size: 10.5px;
    margin-bottom: 6px;
  }
  .fof-helpcard-related-item {
    padding: 5px 0;
    font-size: 12.5px;
    gap: 6px;
  }

  /* Footer: vertikal stacken */
  .fof-helpcard-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 10.5px;
    line-height: 1.4;
  }
  .fof-helpcard-footer-link {
    font-size: 12px;
    align-self: flex-start;
  }

  /* Zeit in Bubble kompakter */
  .fof-msg-time {
    font-size: 10px;
  }
}

/* ===== Sehr kleine Geräte (< 380px Pixel-Lücke vermeiden) ===== */
@media (max-width: 380px) {
  .fof-helpcard-emergency-phones {
    grid-template-columns: 1fr !important;
  }
  .fof-helpcard-emergency-phones a {
    justify-content: flex-start;
    padding-left: 14px;
  }
}

/* ============================================================
 * v5.12 FOOTER + MOBILE-MENÜ (19.05.2026)
 * Footer auf Mobile ausgeblendet — alle Links jetzt im Burger-Menü
 * ============================================================ */

/* Burger-Menü-Bubble (Liste aller Footer-Links) */
.fof-msg-menu .fof-menu-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fof-ink-mute);
  margin-bottom: 8px;
}
.fof-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.fof-menu-list a,
.fof-menu-list button {
  display: block;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fof-ink);
  text-decoration: none;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  width: 100%;
}
.fof-menu-list a:hover,
.fof-menu-list button:hover {
  background: var(--fof-line-soft);
  color: var(--fof-teal-dark);
}

/* Footer auf Mobile komplett ausblenden — Links sind im Burger-Menü erreichbar */
@media (max-width: 600px) {
  .fof-page-footer {
    display: none !important;
  }
  /* Falls App-Shell Bottom-Padding für den Footer reserviert hatte: zurücksetzen */
  .fof-app-shell,
  .fof-chat-container {
    padding-bottom: 0 !important;
  }
}

/* ============ v5.13 Verdict-Link-Layout: Meta links, CTA rechts (19.05.2026) ============ */
.fof-verdict-link {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fof-verdict-link-icon {
  flex-shrink: 0;
}
.fof-verdict-link-meta {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--fof-ink-mute);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.fof-verdict-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--fof-teal-dark);
  font-weight: 700;
}
.fof-verdict-link-title {
  font-size: 13px;
  letter-spacing: -0.1px;
  white-space: nowrap;
}
.fof-verdict-link-arr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fof-teal);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  transition: background .15s, transform .15s;
}
.fof-verdict-link:hover .fof-verdict-link-arr {
  background: var(--fof-teal-dark);
  transform: translateX(2px);
}
.fof-verdict-link:hover .fof-verdict-link-cta {
  color: var(--fof-teal-dark);
}

/* Mobile: bei wenig Platz Titel verstecken, nur Pfeil */
@media (max-width: 480px) {
  .fof-verdict-link-title {
    display: none;
  }
  .fof-verdict-link-cta::before {
    content: 'Lesen';
    font-size: 12px;
    margin-right: 2px;
  }
}

/* ============ v5.14 Mini-CTA: Text + Pfeil rechtsbündig gruppiert (19.05.2026) ============ */
.fof-mini-cta {
  justify-content: flex-end !important;
  gap: 10px;
}
.fof-mini-cta-text {
  order: 1;
}
.fof-mini-cta-arr {
  order: 2;
}

/* ============================================================
 * v5.15 THEMEN-BIBLIOTHEK (19.05.2026)
 * Sektion zwischen Initial-Suggestions und Hilfe-Invite
 * Grid mit 8 Themen-Kacheln in pastellfarbigen Tönen
 * ============================================================ */

.fof-topics-section {
  margin: 18px 0 14px;
  padding: 0 12px;
}

.fof-topics-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 6px;
}
.fof-topics-section-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.fof-topics-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--fof-ink);
  margin: 0 0 3px;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.fof-topics-section-sub {
  font-size: 12.5px;
  color: var(--fof-ink-mute);
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

/* ===== Grid: 2 Spalten auf Mobile, 4 auf Desktop ===== */
.fof-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .fof-topics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .fof-topics-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Themen-Kachel ===== */
.fof-topic-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  background: var(--tt-bg, #F5F2EB);
  border: 1px solid var(--tt-border, rgba(0,0,0,0.06));
  border-radius: 14px;
  color: var(--fof-ink);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  cursor: pointer;
  min-height: 110px;
}
.fof-topic-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: var(--tt-accent, rgba(0,0,0,0.15));
}
.fof-topic-emoji {
  font-size: 26px;
  line-height: 1;
}
.fof-topic-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.1px;
  margin-top: auto;
}
.fof-topic-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--tt-accent, var(--fof-ink-mute));
  opacity: 0.85;
}

/* ===== Farb-Töne pro Thema (Mimikama-2026-Palette + Akzente) ===== */
.fof-topic-tile[data-tone="red"] {
  --tt-bg:     #FAEDEA;
  --tt-border: rgba(168, 81, 74, 0.18);
  --tt-accent: #A8514A;
}
.fof-topic-tile[data-tone="teal"] {
  --tt-bg:     #E5EFEE;
  --tt-border: rgba(77, 112, 118, 0.18);
  --tt-accent: #4D7076;
}
.fof-topic-tile[data-tone="blue"] {
  --tt-bg:     #E7ECF0;
  --tt-border: rgba(108, 130, 148, 0.20);
  --tt-accent: #5A7790;
}
.fof-topic-tile[data-tone="green"] {
  --tt-bg:     #E8F0EC;
  --tt-border: rgba(122, 154, 139, 0.22);
  --tt-accent: #5C8470;
}
.fof-topic-tile[data-tone="ocker"] {
  --tt-bg:     #F4ECDF;
  --tt-border: rgba(178, 138, 92, 0.22);
  --tt-accent: #8B6B3F;
}
.fof-topic-tile[data-tone="navy"] {
  --tt-bg:     #E6EAF0;
  --tt-border: rgba(70, 95, 130, 0.20);
  --tt-accent: #3D5A80;
}
.fof-topic-tile[data-tone="purple"] {
  --tt-bg:     #ECE5EE;
  --tt-border: rgba(110, 90, 130, 0.20);
  --tt-accent: #6B5680;
}
.fof-topic-tile[data-tone="gray"] {
  --tt-bg:     #EAEBED;
  --tt-border: rgba(137, 145, 148, 0.22);
  --tt-accent: #6B7378;
}

/* ===== "Alle Themen ansehen →" Link ===== */
.fof-topics-all-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--fof-teal-dark);
  text-decoration: none;
  letter-spacing: -0.1px;
}
.fof-topics-all-link:hover {
  text-decoration: underline;
}

/* ===== Mobile-Anpassungen ===== */
@media (max-width: 600px) {
  .fof-topics-section {
    margin: 16px 0 12px;
    padding: 0 8px;
  }
  .fof-topics-section-head {
    margin-bottom: 12px;
    gap: 10px;
  }
  .fof-topics-section-title {
    font-size: 15px;
  }
  .fof-topics-section-sub {
    font-size: 12px;
  }
  .fof-topics-grid {
    gap: 6px;
  }
  .fof-topic-tile {
    padding: 12px 12px 10px;
    min-height: 100px;
    border-radius: 12px;
  }
  .fof-topic-emoji {
    font-size: 22px;
  }
  .fof-topic-name {
    font-size: 12.5px;
  }
  .fof-topic-count {
    font-size: 10.5px;
  }
}

/* ============================================================
 * v5.16 THEMEN-BUTTON + THEMEN-BUBBLE (19.05.2026)
 * Themen eingeklappt als 1 Trigger-Button → öffnet Bubble mit Kacheln
 * Klick auf Kachel: submitQuery() (User bleibt im Chat)
 * ============================================================ */

/* Trigger-Button: gleicher Style wie andere Suggest-Pills, etwas prominenter */
.fof-suggests-row--topics {
  margin-top: 4px;
}
.fof-topics-trigger {
  background: linear-gradient(135deg, #FCFDFC 0%, #F2F7F6 100%) !important;
  border-color: rgba(77, 112, 118, 0.30) !important;
  color: #2F4F55 !important;
  font-weight: 700;
}
.fof-topics-trigger:hover {
  background: rgba(77, 112, 118, 0.10) !important;
  border-color: rgba(77, 112, 118, 0.50) !important;
}

/* ===== Themen-Bubble: ist Sub-Element der App-Bubble ===== */
.fof-topics-bubble {
  max-width: 720px;
}
.fof-topics-bubble-head {
  margin-bottom: 14px;
}
.fof-topics-bubble-head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fof-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.fof-topics-bubble-sub {
  display: block;
  font-size: 12.5px;
  color: var(--fof-ink-mute);
  line-height: 1.4;
}

/* Themen-Tile innerhalb der Bubble = button (statt <a>), Layout bleibt gleich */
.fof-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .fof-topics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .fof-topics-grid { grid-template-columns: repeat(4, 1fr); }
}

button.fof-topic-tile {
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.fof-topic-tile:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Mobile: Bubble bleibt kompakt */
@media (max-width: 600px) {
  .fof-topics-bubble { max-width: 100%; }
  .fof-topics-bubble-head strong { font-size: 14px; }
  .fof-topics-bubble-sub { font-size: 12px; }
}

/* ============================================================
 * v5.17 SIDEBAR-HINT-BOXEN (19.05.2026)
 * Hinweise pro Tab: Verlauf = privat, Trending = öffentlich+ungeprüft
 * ============================================================ */

.fof-sidebar-hint {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 14px 12px;
  background: rgba(77, 112, 118, 0.07);
  border-left: 3px solid rgba(77, 112, 118, 0.35);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fof-ink-mute);
}
.fof-sidebar-hint[data-hint="trending"] {
  background: rgba(178, 138, 92, 0.08);
  border-left-color: rgba(178, 138, 92, 0.40);
}
.fof-sidebar-hint-icon {
  font-size: 14px;
  line-height: 1.1;
  flex-shrink: 0;
}
.fof-sidebar-hint-text {
  flex: 1;
  min-width: 0;
}
.fof-sidebar-hint-text strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fof-ink);
  margin-bottom: 2px;
}
.fof-sidebar-hint-text em {
  font-style: normal;
  color: #A8514A;
  font-weight: 600;
}

/* ============================================================
 * v5.18 KOMPAKTERES WELCOME (19.05.2026)
 * - Hero-Block (Eule+Brand+Subtitle) entfernt
 * - Greeting jetzt als normale 1. App-Bubble
 * - Hilfe-Invite ohne Divider und 2. Hint
 * - Themen-Trigger inline bei den Quick-Replies
 * ============================================================ */

/* Welcome-Block bleibt evtl. noch in JS referenziert — defensiv ausblenden */
.fof-welcome {
  display: none !important;
}

/* Greeting-Bubble: erstes <strong> nicht ganz so fett */
.fof-msg-app strong {
  font-weight: 700;
}

/* ============================================================
 * v5.19 GREETING-INLINE-HELP-LINK + HILFE-PILL ROT (19.05.2026)
 * ============================================================ */

/* Inline-Hilfe-Hinweis am Ende der Greeting-Bubble */
.fof-greeting-help-link {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--fof-line-soft);
  font-size: 12.5px;
  color: var(--fof-ink-mute);
  line-height: 1.4;
}
.fof-greeting-help-link a {
  color: var(--fof-false);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.fof-greeting-help-link a:hover {
  text-decoration: underline;
}

/* Hilfe-Pill (rot getönt — als "Notfall-Action" erkennbar) */
.fof-suggest-pill.fof-help-pill {
  background: rgba(168, 81, 74, 0.10) !important;
  border-color: rgba(168, 81, 74, 0.30) !important;
  color: #8C3F39 !important;
  font-weight: 700;
}
.fof-suggest-pill.fof-help-pill:hover {
  background: rgba(168, 81, 74, 0.18) !important;
  border-color: rgba(168, 81, 74, 0.50) !important;
}

@media (max-width: 600px) {
  .fof-greeting-help-link {
    font-size: 12px;
  }
}

/* ============================================================
 * v5.20 PILLS-EINRÜCKUNG (19.05.2026)
 * Suggest-Pills bündig zur Bubble-Content-Position
 * Bubble-Avatar Desktop = 54px + 15px gap = 69px
 * Bubble-Avatar Mobile = 40px + 8px gap = 48px
 * ============================================================ */

.fof-suggests-row {
  margin-left: 69px !important;
}
@media (max-width: 600px) {
  .fof-suggests-row {
    margin-left: 48px !important;
  }
}

/* ============================================================
 * v5.21 HEADER-SLIM (19.05.2026)
 * Header oben in der Mitte: nur Eule mit Online-Dot AUSSERHALB
 * Brand-Text + Subtitle entfernt (redundant zur Sidebar)
 * ============================================================ */

/* Spacer schiebt Header-Actions nach rechts (vorher hat fof-header-info diesen Platz beansprucht) */
.fof-header-spacer {
  flex: 1;
}

/* Avatar bekommt Online-Indikator als externer Punkt rechts neben dem Kreis */
.fof-header-avatar--solo {
  position: relative;
  overflow: visible !important;  /* Punkt darf rausragen */
}
.fof-header-avatar--solo::after {
  display: none !important;  /* alten internen Pulse-Dot ausblenden */
}

/* Online-Dot AUSSERHALB des Kreises */
.fof-header-online-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #01AA85;
  right: -4px;
  bottom: 2px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 3;
}
.fof-header-online-dot::before {
  /* sanfter Pulse-Effekt */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(1, 170, 133, 0.4);
  animation: fof-pulse-ring 2s ease-out infinite;
}
@keyframes fof-pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 600px) {
  .fof-header-online-dot {
    width: 12px;
    height: 12px;
    right: -3px;
    bottom: 1px;
    border-width: 2.5px;
  }
}

/* ============================================================
 * v5.22 TRENDING-STRIP KOMPAKTER (19.05.2026)
 * Letztes Item war abgeschnitten - Icons + Gaps verkleinern
 * ============================================================ */

.fof-sidebar-trending-strip {
  padding: 14px 16px 4px !important;
}
.fof-sidebar-trending-strip-items {
  gap: 6px !important;
}
.fof-sidebar-trending-strip-item {
  min-width: 58px !important;
  max-width: 64px !important;
}
.fof-sidebar-trending-strip-item-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
}
.fof-sidebar-trending-strip-item-label {
  font-size: 10.5px !important;
  margin-top: 4px !important;
}

/* ============================================================
 * v5.23 FOLLOWUP-REPLIES BÜNDIG (19.05.2026)
 * "Hat geholfen", "Anders formulieren", "Zur Prüfung melden" Pills
 * jetzt bündig zur Bubble-Content-Position (gleich wie Suggests-Row)
 * ============================================================ */

.fof-replies {
  margin-left: 69px !important;  /* Avatar 54px + gap 15px */
}
@media (max-width: 600px) {
  .fof-replies {
    margin-left: 48px !important;  /* Avatar 40px + gap 8px */
  }
}

/* ============================================================

/* ============================================================
/* ============================================================
 * MOBILE-HEADER FINAL OVERRIDE (21.05.2026)
 * Steht am Ende der Datei, damit die späten CSS-Blöcke
 * (v4.6 CHATZY-ALIGN etc.) sicher überschrieben werden.
 * ============================================================ */
@media (max-width: 1023px) {
  /* Header-Hintergrund auf Logo-PNG-Hintergrund anpassen → nahtlos
     (Logo ist jetzt transparent → Header bleibt hellgrün wie der Rest) */
  .fof-header {
    background: var(--fof-teal-soft, #E3F7F3) !important;
    position: relative !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 14px 18px !important;
  }
  /* Spacer raus, Logo wird via flex zentriert */
  .fof-header-spacer { display: none !important; }
  /* Action-Buttons absolute rechts, damit Logo wirklich mittig sitzt */
  .fof-header-actions {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  /* Logo sichtbar */
  .fof-header-logo-link { display: flex !important; }
}
@media (min-width: 1024px) {
  .fof-header-logo-link { display: none !important; }
}
@media (max-width: 380px) {
  .fof-header-logo { max-height: 32px !important; }
  /* "Hilfe"-Label auf sehr kleinen Phones verstecken */
  .fof-header-action-label { display: none !important; }
}

/* ============================================================
 * MOBILE: PAGE-FOOTER VERBERGEN (21.05.2026)
 * Alle Footer-Links sind im 3-Punkte-Menü oben rechts erreichbar
 * → unten ist Footer redundant und nimmt nur Platz weg.
 * ============================================================ */
@media (max-width: 1023px) {
  .fof-page-footer { display: none !important; }
}

/* ============================================================
 * INFO-BUBBLE "Was ist das?" (21.05.2026)
 * Kompakte Erklärung des Tools für Erstnutzer
 * ============================================================ */
.fof-about-bubble {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fof-ink);
}
.fof-about-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--fof-ink);
}
.fof-about-title strong { color: var(--fof-teal-dark); font-weight: 800; }
.fof-about-lead {
  margin: 0 0 14px;
  color: var(--fof-ink-soft);
}
.fof-about-h4 {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fof-teal-dark);
  margin: 14px 0 6px;
}
.fof-about-list {
  margin: 0 0 4px;
  padding-left: 22px;
}
.fof-about-list li {
  margin-bottom: 4px;
  color: var(--fof-ink-soft);
}
.fof-about-list li strong {
  color: var(--fof-ink);
  font-weight: 700;
}
.fof-about-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 0.5px solid var(--fof-line);
  font-size: 13.5px;
  color: var(--fof-ink-mute);
}
.fof-about-bubble a {
  color: var(--fof-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.fof-about-bubble a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
 * LADE-SPLASH (21.05.2026): WhatsApp-Web-Style
 * Wird beim Erst-Laden gezeigt, fade-out nach ca. 1.2s.
 * Klasse "is-hidden" → opacity 0 + pointer-events none,
 * danach komplettes display:none per Transition-End.
 * ============================================================ */
.fof-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FCFBF7;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.fof-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.fof-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  max-width: 90%;
}
.fof-splash-logo {
  max-width: min(420px, 70vw);
  height: auto;
  animation: fofSplashFade 0.6s ease-out both;
}
.fof-splash-progress-track {
  width: min(280px, 60vw);
  height: 4px;
  background: rgba(207, 195, 181, 0.3);
  border-radius: 99px;
  overflow: hidden;
  animation: fofSplashFade 0.6s ease-out 0.1s both;
}
.fof-splash-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #4D7076 0%, #5F7880 100%);
  border-radius: 99px;
  animation: fofSplashProgress 3.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
}
.fof-splash-status {
  font-size: 13.5px;
  color: #5F7880;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.2px;
  font-weight: 500;
  text-align: center;
  min-height: 20px;
  margin-top: -8px;
  transition: opacity 0.25s ease;
  animation: fofSplashFade 0.6s ease-out 0.15s both;
}
.fof-splash-status.is-changing { opacity: 0; }
.fof-splash-foot {
  font-size: 13px;
  color: #899194;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.3px;
  animation: fofSplashFade 0.6s ease-out 0.25s both;
}
@keyframes fofSplashProgress {
  0%   { width: 0%; }
  20%  { width: 18%; }
  45%  { width: 42%; }
  70%  { width: 68%; }
  90%  { width: 92%; }
  100% { width: 100%; }
}
@keyframes fofSplashFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .fof-splash-logo { max-width: 80vw; }
  .fof-splash-progress-track { width: 70vw; }
}

/* ============================================================
 * MESSENGER-PROFIL-HEADER (21.05.2026)
 * Großer Avatar + Name + Untertitel oben im Chat,
 * wie bei WhatsApp/Messenger beim Öffnen eines Chats.
 * ============================================================ */
.fof-chat-intro {
  text-align: center;
  padding: 28px 24px 12px;
  margin-bottom: 4px;
  animation: fofIntroFade 0.5s ease-out;
}
.fof-chat-intro-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.fof-chat-intro-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.fof-chat-intro-online {
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #5BB85B;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
  z-index: 2;
}
.fof-chat-intro-name {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #1A1A1A;
  margin-bottom: 8px;
  line-height: 1.2;
}
.fof-chat-intro-sub {
  font-size: 14px;
  font-weight: 500;
  color: #5F7880;
  margin-bottom: 2px;
}
.fof-chat-intro-meta {
  font-size: 12.5px;
  color: #899194;
  letter-spacing: 0.2px;
}
.fof-chat-time-divider {
  text-align: center;
  margin: 18px 0 14px;
  font-size: 11.5px;
  color: #899194;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.fof-chat-time-divider span {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 99px;
  text-transform: uppercase;
}
@keyframes fofIntroFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .fof-chat-intro { padding: 22px 16px 8px; }
  .fof-chat-intro-avatar { width: 84px; height: 84px; }
  .fof-chat-intro-name { font-size: 21px; }
}

/* ============================================================
 * MOBILE FIXED LAYOUT (21.05.2026)
 * Header oben und Composer unten bleiben sichtbar,
 * nur der Chat-Bereich scrollt. Wie WhatsApp/Messenger.
 * 100dvh statt 100vh = berücksichtigt iOS-Safari URL-Bar korrekt.
 * ============================================================ */
@media (max-width: 1023px) {
  html, body {
    height: 100vh;        /* Fallback für ältere Browser */
    height: 100dvh;       /* Modern: dynamic viewport, berücksichtigt URL-Bar */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    overscroll-behavior: none;
  }
  #fof-app {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }
  /* Header bleibt oben sichtbar */
  .fof-header { flex-shrink: 0 !important; }
  /* Composer bleibt unten sichtbar */
  .fof-composer { flex-shrink: 0 !important; }
  /* Nur der Chat-Bereich scrollt */
  .fof-chat {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
  }
}

/* ============================================================
 * DESKTOP-HEADER HÖHE REDUZIEREN (21.05.2026)
 * Von ~105px auf ~63px (40% weniger) — kompakter, mehr Platz für Chat
 * ============================================================ */
@media (min-width: 1024px) {
  .fof-header {
    padding: 12px 24px !important;
    min-height: auto !important;
  }
  .fof-header-avatar {
    width: 38px !important;
    height: 38px !important;
  }
  .fof-header-avatar .fof-owl-img {
    width: 38px !important;
    height: 38px !important;
  }
  .fof-header-action {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ============================================================
 * LINKE SIDEBAR WEISS + LOGO OHNE BOX (21.05.2026)
 * Nur die linke Sidebar wird weiß. Header und Composer bleiben
 * unverändert (hellgrün wie vorher).
 * ============================================================ */
@media (min-width: 1024px) {
  .fof-sidebar-left {
    background: #FFFFFF !important;
  }
  .fof-sidebar-head {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}

/* Profil-Header-Avatar (in der Begrüßung): ohne Box, ohne Schatten, ohne weißen Kreis-Background */
.fof-chat-intro-avatar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.fof-chat-intro-online {
  border-color: rgba(252, 251, 247, 0.95) !important;
}

/* ============================================================
 * HEADER-BUTTONS: alle gleich groß als Kreise (21.05.2026)
 * Hilfe, Info, Menü = einheitliche 40x40 runde Buttons
 * Label "Hilfe" wird ausgeblendet, Icon bleibt
 * Tooltip per title-Attribut, Aria-Label für Screenreader
 * ============================================================ */
.fof-header-action--ki,
.fof-header-action,
.fof-header-menu {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: #FFFFFF !important;
  color: var(--fof-teal-dark, #4D7076) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}
.fof-header-action--ki:hover,
.fof-header-action:hover,
.fof-header-menu:hover {
  background: var(--fof-teal, #4D7076) !important;
  color: #FFFFFF !important;
}
/* Label "Hilfe" verbergen - Tooltip bleibt für UX */
.fof-header-action-label {
  display: none !important;
}

/* ============================================================
 * COMPOSER HELLGRÜN STATT WEISS (21.05.2026)
 * Composer soll farblich zum Header/Chat passen (--fof-teal-soft)
 * ============================================================ */
.fof-composer {
  background: var(--fof-teal-soft, #E3F7F3) !important;
  border-top: 1px solid rgba(127, 131, 132, 0.1) !important;
}

/* ============================================================
 * DROPDOWN-MENÜ (21.05.2026): WhatsApp-Style
 * Klassisches Floating-Dropdown beim Klick aufs Burger-Menü.
 * ============================================================ */
.fof-dropdown-menu {
  position: fixed;
  z-index: 10000;
  min-width: 240px;
  max-width: 280px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: fofDropdownIn 0.12s ease-out;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
@keyframes fofDropdownIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fof-dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  color: #2A2A2A;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.12s ease;
  box-sizing: border-box;
}
.fof-dropdown-item:hover,
.fof-dropdown-item:focus {
  background: rgba(0, 0, 0, 0.045);
  outline: none;
}
.fof-dropdown-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #5F7880;
  stroke: currentColor;
}
.fof-dropdown-item:hover .fof-dropdown-icon {
  color: #2A2A2A;
}
.fof-dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 6px 8px;
}
/* Mobile-Anpassung */
@media (max-width: 480px) {
  .fof-dropdown-menu {
    min-width: 220px;
    max-width: calc(100vw - 24px);
  }
  .fof-dropdown-item {
    font-size: 15px;
    padding: 12px 12px;
  }
}

/* ============================================================
 * MOBILE APP-ICON-HEADER (21.05.2026, Iteration 2)
 * Ersetzt das breite Logo durch kompaktes Eulen-Icon + Schriftzug.
 * Wirkt mehr nach App, weniger nach Webseite.
 * ============================================================ */
.fof-header-mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1A1A1A;
}
.fof-header-mobile-owl {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.fof-header-mobile-brand-text {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1;
}
.fof-header-mobile-brand-text .w-fakt { color: #1A1A1A; }
.fof-header-mobile-brand-text .w-sep  { color: #B28A5C; margin: 0 4px; }
.fof-header-mobile-brand-text .w-fake { color: #A4574F; font-style: italic; }

@media (max-width: 1023px) {
  /* Mobile-Brand sichtbar, breites Logo versteckt */
  .fof-header-logo-link { display: none !important; }
  .fof-header-mobile-brand { display: inline-flex !important; }
}
@media (min-width: 1024px) {
  .fof-header-mobile-brand { display: none !important; }
}

/* ============================================================
 * MOBILE PROFIL-HEADER: prominenter Eulen-Hero (21.05.2026)
 * Eule größer, mit dezentem Glow-Ring (Mimikama-Teal)
 * für App-Feeling — wie Bluesky/Threads.
 * ============================================================ */
@media (max-width: 1023px) {
  .fof-chat-intro {
    padding: 28px 20px 12px !important;
  }
  .fof-chat-intro-avatar {
    width: 104px !important;
    height: 104px !important;
    position: relative !important;
  }
  /* Subtle Glow-Ring um die Eule */
  .fof-chat-intro-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(77, 112, 118, 0.15);
    pointer-events: none;
  }
  .fof-chat-intro-avatar::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(77, 112, 118, 0.08);
    pointer-events: none;
  }
  .fof-chat-intro-name {
    font-size: 23px !important;
    margin-top: 4px;
  }
  .fof-chat-intro-sub {
    font-size: 14px !important;
  }
  .fof-chat-intro-online {
    width: 20px !important;
    height: 20px !important;
    bottom: 6px !important;
    right: 8px !important;
    border-width: 3px !important;
    z-index: 3;
  }
}

/* ============================================================
 * MOBILE BRAND-AKZENTE (21.05.2026)
 * Send-Button prominenter mit Teal-Gradient + Schatten
 * für mehr App-Charakter
 * ============================================================ */
@media (max-width: 1023px) {
  .fof-composer-send {
    background: linear-gradient(135deg, #5F7880 0%, #4D7076 100%) !important;
    box-shadow: 0 4px 12px rgba(77, 112, 118, 0.32),
                0 2px 4px rgba(77, 112, 118, 0.18) !important;
    width: 44px !important;
    height: 44px !important;
  }
  .fof-composer-send:active {
    transform: scale(0.93) !important;
    box-shadow: 0 2px 6px rgba(77, 112, 118, 0.24) !important;
  }
  /* Eingabe-Wrap mit subtle Border in Mimikama-Teal */
  .fof-composer-input-wrap {
    border: 1px solid rgba(77, 112, 118, 0.18) !important;
    background: #FFFFFF !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .fof-composer-input-wrap:focus-within {
    border-color: rgba(77, 112, 118, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(77, 112, 118, 0.10) !important;
  }
  /* Chat-Pattern auf Mobile etwas präsenter */
  .fof-chat {
    background-color: rgba(77, 112, 118, 0.06) !important;
  }
}

/* ============================================================
 * SPLASH MIT F-LOGO + SCHRIFTZUG (21.05.2026)
 * Ersetzt das alte Banner-Logo-Layout durch
 * App-Icon + Mimikama-Schriftzug
 * ============================================================ */
.fof-splash-icon {
  width: 180px;
  height: 180px;
  max-width: 42vw;
  max-height: 42vw;
  animation: fofSplashFade 0.6s ease-out both;
}
.fof-splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: fofSplashFade 0.6s ease-out 0.08s both;
}
.fof-splash-brand-mimikama {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5F7880;
}
.fof-splash-brand-faktfake {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.fof-splash-brand-faktfake .w-fakt { color: #1A1A1A; }
.fof-splash-brand-faktfake .w-sep  { color: #B28A5C; margin: 0 6px; }
.fof-splash-brand-faktfake .w-fake { color: #A4574F; font-style: italic; }
@media (max-width: 480px) {
  .fof-splash-icon { width: 140px; height: 140px; }
  .fof-splash-brand-faktfake { font-size: 24px; }
  .fof-splash-brand-mimikama { font-size: 12px; }
}
/* Alte logo-Klasse entfernen (war für Banner-Logo) */
.fof-splash-logo { display: none !important; }

/* ============================================================
 * NEUE EULE: kein Kreis-Container — Ohren-Spitzen sichtbar lassen
 * (21.05.2026, Iteration mit neuem Eulen-Logo)
 * ============================================================ */
.fof-header-mobile-owl {
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}
.fof-chat-intro-avatar {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.fof-chat-intro-avatar::before,
.fof-chat-intro-avatar::after {
  display: none !important;
}
.fof-chat-intro-avatar img {
  border-radius: 0 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}
/* Online-Dot rechts unten bei der Eule */
.fof-chat-intro-online {
  bottom: 4px !important;
  right: 12px !important;
}
/* Sidebar-Head: F-Icon + Schriftzug */
.fof-sidebar-head-brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.fof-sidebar-head-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 12px;
}
.fof-sidebar-head-brand-link .fof-sidebar-head-text {
  flex: 1;
  min-width: 0;
}

/* ============================================================
 * SCHRIFTZUG "Fakt · Fake?" KONSISTENT ZUM NEUEN LOGO (21.05.2026)
 * Vorher: schwarz + ocker + rotbraun-italic (verspielt)
 * Jetzt: Anthrazit + Mimikama-Teal-Punkt (passt zum F-Logo)
 * ============================================================ */
.w-fakt,
.fof-welcome-brand .w-fakt,
.fof-sidebar-head-brand .w-fakt,
.fof-header-name .w-fakt,
.fof-header-mobile-brand-text .w-fakt,
.fof-chat-intro-name .w-fakt,
.fof-splash-brand-faktfake .w-fakt,
.fof-page-footer-brand .w-fakt {
  color: #454449 !important;
  font-weight: 800 !important;
  font-style: normal !important;
}

.w-sep,
.fof-welcome-brand .w-sep,
.fof-sidebar-head-brand .w-sep,
.fof-header-name .w-sep,
.fof-header-mobile-brand-text .w-sep,
.fof-chat-intro-name .w-sep,
.fof-splash-brand-faktfake .w-sep,
.fof-page-footer-brand .w-sep {
  color: #4D7076 !important;
  font-weight: 800 !important;
  margin: 0 4px !important;
  font-style: normal !important;
}

.w-fake,
.fof-welcome-brand .w-fake,
.fof-sidebar-head-brand .w-fake,
.fof-header-name .w-fake,
.fof-header-mobile-brand-text .w-fake,
.fof-chat-intro-name .w-fake,
.fof-splash-brand-faktfake .w-fake,
.fof-page-footer-brand .w-fake {
  color: #454449 !important;
  font-weight: 800 !important;
  font-style: normal !important;
}

/* Eventuell dekorative ::before-Pseudo-Elemente am .w-fake entfernen */
.w-fake::before,
.fof-welcome-brand .w-fake::before,
.fof-page-footer-brand .w-fake::before {
  content: none !important;
  display: none !important;
}

/* ============================================================
 * EULE WIE PROFILBILD + BOT-AVATAR OHNE GRÜN (21.05.2026)
 * Tom-Feedback: Profil-Header braucht weißen Kreis als Avatar-Container,
 * Bot-Bubbles dürfen keinen grünen Gradient-Hintergrund haben.
 * ============================================================ */

/* PROFIL-HEADER (Begrüßungs-Bubble): weißer Kreis als Avatar, Eule größer */
.fof-chat-intro-avatar {
  width: 130px !important;
  height: 130px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0 auto 18px !important;
}
.fof-chat-intro-avatar::before,
.fof-chat-intro-avatar::after {
  display: none !important;
}
.fof-chat-intro-avatar img {
  width: 80% !important;
  height: 80% !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  display: block !important;
}
.fof-chat-intro-online {
  position: absolute !important;
  bottom: 6px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  background: #5BB85B !important;
  border-radius: 50% !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
  z-index: 3 !important;
}
@media (max-width: 1023px) {
  .fof-chat-intro-avatar {
    width: 120px !important;
    height: 120px !important;
  }
}

/* BOT-AVATAR (kleine Eule bei jeder Bot-Nachricht): kein Teal-Gradient */
.fof-msg-app-avatar {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.fof-msg-app-avatar .fof-owl-img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
/* Falls Fallback-SVG (alte einfache Eule) gerendert wird: in Teal färben */
.fof-msg-app-avatar .fof-owl {
  fill: #4D7076 !important;
}

/* ============================================================
 * PAGE-FOOTER AUCH AUF DESKTOP VERBERGEN (21.05.2026)
 * Alle Links sind im Burger-Menü erreichbar — Footer ist redundant.
 * (Mobile war bereits versteckt, jetzt auch Desktop.)
 * ============================================================ */
.fof-page-footer {
  display: none !important;
}

/* ============================================================
 * GRÖSSEN-ANPASSUNG (21.05.2026, Tom-Feedback)
 * - F-Logo in Sidebar GRÖSSER, "Fakt · Fake?" KLEINER
 * - Eulen im Profil-Header und Bot-Bubbles deutlich größer
 * ============================================================ */

/* SIDEBAR-HEAD: F-Icon groß, Schriftzug kleiner */
.fof-sidebar-head-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
}
.fof-sidebar-head-brand-link {
  gap: 14px !important;
}
.fof-sidebar-head-brand {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
}
.fof-sidebar-head-claim {
  font-size: 11.5px !important;
  margin-top: 4px !important;
}

/* PROFIL-HEADER (Begrüßung): Eule füllt den Kreis fast komplett aus */
.fof-chat-intro-avatar img {
  width: 95% !important;
  height: 95% !important;
}

/* BOT-AVATAR: Container und Eule größer */
.fof-msg-app-avatar {
  width: 38px !important;
  height: 38px !important;
}
.fof-msg-app-avatar .fof-owl-img {
  width: 32px !important;
  height: 32px !important;
}

/* Schriftzug-Punkt synchron zum neuen Logo-Teal */
.w-sep,
.fof-sidebar-head-brand .w-sep,
.fof-header-mobile-brand-text .w-sep,
.fof-chat-intro-name .w-sep,
.fof-splash-brand-faktfake .w-sep,
.fof-page-footer-brand .w-sep,
.fof-welcome-brand .w-sep,
.fof-header-name .w-sep {
  color: #01AA85 !important;
}

/* ============================================================
 * SIDEBAR-VERBESSERUNGEN (22.05.2026, Tom-Feedback)
 * - Zeit-Gruppen-Header, Verdict-Farb-Dot, sichtbarer Hover
 * - 2-zeilige Trending-Labels + Counter
 * - Privacy-Hinweis in Sidebar-Footer
 * - Mehr Atemluft zwischen Logo und HEUTE HEISS
 * ============================================================ */

/* Mehr Abstand zwischen Sidebar-Head und HEUTE HEISS */
.fof-sidebar-head {
  padding-bottom: 18px !important;
  margin-bottom: 6px !important;
}

/* Zeit-Gruppen-Header im Verlauf ("Heute" / "Gestern" / etc.) */
.fof-sidebar-group-header {
  list-style: none;
  padding: 14px 18px 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #899194;
  background: transparent;
  pointer-events: none;
}
.fof-sidebar-group-header:first-child {
  padding-top: 4px;
}

/* Sidebar-Item neu strukturiert: Verdict-Dot + Content */
.fof-sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 18px !important;
  cursor: pointer;
  border-radius: 0 !important;
  transition: background-color 0.12s ease;
  position: relative;
}
.fof-sidebar-item:hover {
  background: rgba(1, 170, 133, 0.06) !important;
}
.fof-sidebar-item:hover .fof-sidebar-item-verdict-dot {
  transform: scale(1.15);
}
/* Verdict-Farb-Dot links */
.fof-sidebar-item-verdict-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #C7CCCE; /* default grau */
  transition: transform 0.12s ease;
}
.fof-sidebar-item-verdict-dot--false   { background: #D44A3A; } /* rot */
.fof-sidebar-item-verdict-dot--caution { background: #E6A93C; } /* gelb */
.fof-sidebar-item-verdict-dot--true    { background: #4FA873; } /* grün */
.fof-sidebar-item-verdict-dot--unclear { background: #899194; } /* grau */
.fof-sidebar-item-verdict-dot--none    { background: #C7CCCE; }

/* Item-Content (Query + Meta) */
.fof-sidebar-item-content {
  flex: 1;
  min-width: 0;
}
.fof-sidebar-item-query {
  font-size: 14px;
  font-weight: 500;
  color: #2A2A2A;
  line-height: 1.35;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.fof-sidebar-item-meta {
  font-size: 11.5px;
  color: #899194;
  margin-top: 2px;
}

/* Datum/Pill aus Item entfernen (jetzt in Gruppen-Headern) */
.fof-sidebar-item-row1,
.fof-sidebar-item-date,
.fof-sidebar-item-pill {
  display: none !important;
}

/* TRENDING-STRIP: 2-zeilige Labels + Counter */
.fof-trending-bubble-label {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.2 !important;
  font-size: 11px !important;
  max-height: 28px;
}
.fof-trending-bubble-count {
  font-size: 9.5px !important;
  color: #B83A2A !important;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.fof-trending-bubble:hover .fof-trending-bubble-count {
  color: #8C2E20 !important;
}

/* TRENDING-LIST: Item-Counter (Tab "Trending") */
.fof-sidebar-item-count {
  font-size: 11px;
  font-weight: 700;
  color: #B83A2A;
  background: rgba(184, 58, 42, 0.08);
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: auto;
  flex-shrink: 0;
}
.fof-sidebar-item-emoji {
  font-size: 18px;
  flex-shrink: 0;
  margin-right: 2px;
}
.fof-sidebar-item--trending {
  display: flex !important;
}
.fof-sidebar-item--trending .fof-sidebar-item-row1 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.fof-sidebar-item--trending .fof-sidebar-item-query {
  -webkit-line-clamp: 2 !important;
  flex: 1;
  min-width: 0;
}

/* SIDEBAR-FOOTER mit Privacy + Verlauf-Button */
.fof-sidebar-foot {
  padding: 12px 16px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.fof-sidebar-foot-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #899194;
  cursor: help;
}
.fof-sidebar-foot-privacy-icon {
  font-size: 12px;
}
.fof-sidebar-foot-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #899194 !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}
.fof-sidebar-foot-btn:hover {
  color: #D44A3A !important;
  border-color: rgba(212, 74, 58, 0.4) !important;
  background: rgba(212, 74, 58, 0.04) !important;
}
.fof-sidebar-foot-btn.is-hidden {
  display: none !important;
}

/* ============================================================
 * SIDEBAR-HINT KOMPAKTER (22.05.2026)
 * "Frisch von Mimikama" nimmt zu viel Platz weg
 * ============================================================ */
.fof-sidebar-hint {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: rgba(1, 170, 133, 0.04) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  color: #5F7880 !important;
  line-height: 1.35 !important;
}
.fof-sidebar-hint-icon {
  font-size: 14px !important;
  flex-shrink: 0;
}
.fof-sidebar-hint-text {
  flex: 1;
  min-width: 0;
}
.fof-sidebar-hint-text strong {
  font-weight: 700;
  color: #2A2A2A;
  display: inline;
}

/* ============================================================
 * TRENDING-STRIP FADE-OUT (22.05.2026)
 * Sanfter Übergang rechts statt harter Cut beim 5. Kreis
 * + Info-Icon im Titel mit Tooltip-Hint
 * ============================================================ */
#fof-trending-strip-wrap {
  position: relative;
}
/* Fade-out rechts: subtler Verlauf zur weißen Sidebar-Farbe */
#fof-trending-strip-wrap::after {
  content: '';
  position: absolute;
  top: 32px; /* unter dem Title */
  right: 0;
  bottom: 8px;
  width: 32px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
  z-index: 1;
}
/* Info-Icon im Titel */
.fof-sidebar-trending-strip-title {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: help;
}
.fof-sidebar-trending-strip-title-help {
  margin-left: auto;
  font-size: 13px;
  color: #C7CCCE;
  font-weight: 400;
  font-family: 'Manrope', -apple-system, sans-serif;
}
.fof-sidebar-trending-strip-title:hover .fof-sidebar-trending-strip-title-help {
  color: #5F7880;
}

/* ============================================================
 * SIDEBAR KOMPAKTER (22.05.2026, Tom-Feedback)
 * T1 + I1 + G2 — kleinere Tabs, kompaktere Items, dezentere Gruppen
 * ============================================================ */

/* I1 — Lupe-Icon kleiner, Padding reduziert */
.fof-sidebar-item {
  padding: 8px 16px !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.fof-sidebar-item::before {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
}
.fof-sidebar-item .fof-sidebar-item-query {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.fof-sidebar-item .fof-sidebar-item-meta {
  font-size: 11px !important;
  margin-top: 1px !important;
}
/* Verdict-Dot etwas kleiner */
.fof-sidebar-item-verdict-dot {
  width: 7px !important;
  height: 7px !important;
}

/* G2 — Gruppen-Header dezenter: kleinere Schrift, kein UPPERCASE, weniger Padding */
.fof-sidebar-group-header {
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  padding: 10px 16px 4px !important;
  font-weight: 600 !important;
  color: #ABB1B3 !important;
}
.fof-sidebar-group-header:first-child {
  padding-top: 6px !important;
}

/* Tab-Padding etwas reduzieren bei kürzeren Labels */
.fof-sidebar-tab {
  padding: 8px 14px !important;
}

/* ============================================================
 * TRENDING-ARTICLE-CARD (22.05.2026)
 * Wird in Chat eingefügt wenn User auf "Aktuell"-Topic klickt
 * — direkter Artikel statt FTS5-Search-Antwort.
 * ============================================================ */
.fof-trending-article-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(1, 170, 133, 0.06);
  border: 1px solid rgba(1, 170, 133, 0.18);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.fof-trending-article-card:hover {
  background: rgba(1, 170, 133, 0.12);
  border-color: rgba(1, 170, 133, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 170, 133, 0.18);
}
.fof-trending-article-emoji {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.fof-trending-article-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.fof-trending-article-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.3;
}
.fof-trending-article-cta {
  font-size: 12.5px;
  font-weight: 600;
  color: #018F70;
}
.fof-trending-article-card:hover .fof-trending-article-cta {
  color: #016655;
}

/* ============================================================
 * DAILY HOST AVATAR (22.05.2026)
 * Avatar bringt eigenen grünen Background-Kreis mit → kein
 * weißer Container drumherum, sonst Doppel-Kreis.
 * ============================================================ */
.fof-chat-intro-avatar--host {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  overflow: visible !important;
  width: 130px !important;
  height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fof-chat-intro-avatar--host::before,
.fof-chat-intro-avatar--host::after {
  display: none !important;
}
.fof-chat-intro-avatar--host img {
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: 0 4px 14px rgba(1, 170, 133, 0.20) !important;
}
.fof-chat-intro-avatar--host .fof-chat-intro-online {
  bottom: 6px !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  background: #5BB85B !important;
  border: 3px solid #FFFFFF !important;
  border-radius: 50% !important;
  position: absolute !important;
  z-index: 3 !important;
}
@media (max-width: 1023px) {
  .fof-chat-intro-avatar--host,
  .fof-chat-intro-avatar--host img {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ============================================================
 * MSG-AVATAR — HOST-VARIANTE (22.05.2026)
 * Bei der Begrüßungs-Bubble: Host-Avatar statt Eule.
 * Kein grünes Gradient-Background, das Avatar-PNG hat schon den grünen Kreis.
 * ============================================================ */
.fof-msg-app-avatar--host {
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 48px !important;
  height: 48px !important;
}
.fof-msg-app-avatar--host img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* MSG-AVATAR Host-Variante bleibt */