/* ============================================================
 * faktoderfake.com — Knall · Klar Override (27.05.2026 abends)
 * Basierend auf Mockup aus Designer-Chat
 *
 * Farben:
 *   Falsch     #E63946  (Knall-Rot)
 *   Vorsicht   #FF8C00  (Knall-Orange)
 *   Wahr       #00B894  (Knall-Grün)
 *   Info       #5F7880  (Mimikama-Blau)
 *
 * Layout:
 *   Verdict-Karte: voll-flächiges farbiges Band oben + weißer Body
 *   Mini-Cards:    4px Border-Stripe links + voll-flächiger Badge oben
 *
 * Bindet sich NACH style.css ein. !important überschreibt App-Inlines.
 * Rollback: <link> in index.php entfernen.
 * ============================================================ */

/* === VERDICT-CARD KNALL-VARIANTE === */
.fof-verdict-vb {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 0.5px solid #E5E0D6 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Voll-flächiger Knall-Header oben */
.fof-verdict-vb .fof-verdict-head {
  padding: 9px 16px !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.fof-verdict-vb .fof-verdict-head.is-false { background: #E63946 !important; }
.fof-verdict-vb .fof-verdict-head.is-warn  { background: #FF8C00 !important; }
.fof-verdict-vb .fof-verdict-head.is-true  { background: #00B894 !important; }
.fof-verdict-vb .fof-verdict-head.is-info  { background: #5F7880 !important; }

/* Icon + Label im Header (weißer Text, uppercase) */
.fof-verdict-vb .fof-verdict-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.fof-verdict-vb .fof-verdict-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fof-verdict-vb .fof-verdict-label {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* 5px Top-Stripe weg — der ganze Head IST jetzt die Knall-Farbe */
.fof-verdict-vb .fof-verdict-head::before { display: none !important; }

/* Watermark dezenter (oder weg) */
.fof-verdict-vb .fof-verdict-watermark {
  display: none !important;
}

/* Weißer Body unter dem Knall-Band */
.fof-verdict-vb .fof-verdict-content {
  padding: 12px 16px 14px !important;
  background: #FFFFFF !important;
}
.fof-verdict-vb .fof-verdict-claim {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2A2A2A !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
.fof-verdict-vb .fof-verdict-body {
  font-size: 13px !important;
  color: #5F7880 !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
}

/* Verdict-Link unten: meta links + "Faktencheck lesen" rechts */
.fof-verdict-vb .fof-verdict-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid #F0EEE8 !important;
  text-decoration: none !important;
  background: transparent !important;
}
.fof-verdict-vb .fof-verdict-link-icon { display: none !important; }
.fof-verdict-vb .fof-verdict-link-meta {
  color: #899194 !important;
  font-size: 11px !important;
  order: 1 !important;
  flex: 1 !important;
}
.fof-verdict-vb .fof-verdict-link-cta {
  color: #2A2A2A !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  order: 2 !important;
}
.fof-verdict-vb .fof-verdict-link-title { color: inherit !important; }
.fof-verdict-vb .fof-verdict-link-arr { font-size: 14px !important; }

/* === MINI-CARDS KNALL-VARIANTE === */
.fof-mini-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 10px 12px 9px 16px !important;
  background: #FFFFFF !important;
  border: 0.5px solid #EFEDE8 !important;
  border-left: 4px solid #899194 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
  overflow: visible !important;
  gap: 5px !important;
}
.fof-mini-card.is-false { border-left-color: #E63946 !important; }
.fof-mini-card.is-warn  { border-left-color: #FF8C00 !important; }
.fof-mini-card.is-true  { border-left-color: #00B894 !important; }
.fof-mini-card.is-info  { border-left-color: #5F7880 !important; }

.fof-mini-card:hover { background: #F7F5EF !important; }

/* Voll-flächiger Badge OBEN in der Card */
.fof-mini-card-verdict {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  margin: 0 0 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 4px !important;
  order: 0 !important;
}
.fof-mini-card-verdict.is-false { background: #E63946 !important; }
.fof-mini-card-verdict.is-warn  { background: #FF8C00 !important; }
.fof-mini-card-verdict.is-true  { background: #00B894 !important; }
.fof-mini-card-verdict.is-info  { background: #5F7880 !important; }

.fof-mini-card-verdict-icon {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}
.fof-mini-card-verdict-text {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  display: inline !important;
}
.fof-mini-card-verdict-date { display: none !important; }

/* Title in der Card (unter dem Badge) */
.fof-mini-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2A2A2A !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  order: 1 !important;
}

/* Meta-Zeile (Datum) rechts unten */
.fof-mini-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #8A8A8A !important;
  padding: 0 !important;
  margin: 0 !important;
  order: 2 !important;
}
.fof-mini-card .fof-mini-meta .fof-mini-badge { display: none !important; }
.fof-mini-meta-dot { display: none !important; }

/* Excerpt + Aged + CTA in Mini-Card verstecken */
.fof-mini-card-info,
.fof-mini-card-excerpt,
.fof-mini-aged,
.fof-mini-cta {
  display: none !important;
}

/* === MOBILE (≤480px) === */
@media (max-width: 480px) {
  .fof-mini-card { padding: 8px 10px 7px 14px !important; }
  .fof-mini-card-verdict { padding: 2px 6px !important; }
  .fof-mini-title { font-size: 12px !important; }
  .fof-mini-meta { font-size: 10px !important; }

  .fof-verdict-vb .fof-verdict-claim { font-size: 14px !important; }
  .fof-verdict-vb .fof-verdict-body { font-size: 12px !important; }
}

/* === ANDERES bleibt wie aus altem Override (Sidebar-Tabs, Phishing-Card etc.) === */
/* Sidebar-Tabs */
.fof-sidebar-tab {
  flex: 1 !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  border: 1px solid #EFEDE8 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  color: #4A4A4A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  user-select: none !important;
}
.fof-sidebar-tab:hover { background: #F5F3EE !important; border-color: #CFC3B5 !important; color: #2A2A2A !important; }
.fof-sidebar-tab.is-active { background: #5F7880 !important; border-color: #5F7880 !important; color: #fff !important; box-shadow: 0 1px 4px rgba(77,112,118,0.18) !important; }
.fof-sidebar-tab.is-active:hover { background: #485E66 !important; border-color: #485E66 !important; }
.fof-sidebar-tab-count { background: rgba(0,0,0,0.08) !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 1px 7px !important; border-radius: 999px !important; min-width: 18px !important; text-align: center !important; color: inherit !important; flex-shrink: 0 !important; }
.fof-sidebar-tab.is-active .fof-sidebar-tab-count { background: rgba(255,255,255,0.28) !important; color: #fff !important; }
.fof-sidebar-tab-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #B28A5C !important; flex-shrink: 0 !important; }
.fof-sidebar-tab.is-active .fof-sidebar-tab-dot { background: #fff !important; }

/* Send-Button Pending */
#fof-input.is-pending { background: rgba(143, 159, 162, 0.04); color: #5F7880; }
#fof-input.is-pending::placeholder { color: #899194; opacity: 0.85; font-style: italic; }
#fof-send-btn.is-pending { opacity: 0.55; cursor: progress; position: relative; }
#fof-send-btn.is-pending::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin-top: -7px; margin-left: -7px; border: 2px solid rgba(95, 120, 128, 0.25); border-top-color: #5F7880; border-radius: 50%; animation: fof-spinner-spin 0.7s linear infinite; pointer-events: none; }
@keyframes fof-spinner-spin { to { transform: rotate(360deg); } }

/* CB 622z5: Disclaimer-Streifen unter Composer — permanent sichtbar */
.fof-disclaimer {
  background: #F7F5EF !important;
  border-top: 0.5px solid #E2DDD2 !important;
  padding: 7px 16px 8px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #6B6862 !important;
  flex-shrink: 0 !important;
}
.fof-disclaimer-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
@media (min-width: 720px) {
  .fof-disclaimer-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
}
.fof-disclaimer-tip {
  color: #5F7880 !important;
  font-weight: 500 !important;
}
.fof-disclaimer-warn {
  color: #899194 !important;
}
.fof-disclaimer-warn a {
  color: #5F7880 !important;
  text-decoration: underline !important;
}
.fof-disclaimer-warn a:hover { color: #2F4F55 !important; }
/* ============================================================
 * HEADER MOBILE FIX (28.05.2026, CB 624d)
 * Logo: jetzt das saubere Marken-Icon (icon-f.svg) als kleines
 * Logo LINKS neben "Fakt·Fake?" (statt dem alten owl/logo.png).
 * Buttons HART rechts, kleiner -> nichts ueberlappt.
 * (img-src wird in index.php auf icon-f.svg gesetzt.)
 * ============================================================ */
@media (max-width: 1023px) {
  /* Marken-Icon sichtbar, klein, ohne Kreis-Crop (SVG = contain) */
  .fof-header-mobile-owl {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  /* Header: eine Zeile, links beginnend */
  .fof-header {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* Brand (Icon + Text) HART nach links, schiebt Buttons nach rechts */
  .fof-header-mobile-brand {
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 7px !important;            /* Abstand Icon <-> Text */
    min-width: 0 !important;
  }
  .fof-header-mobile-brand-text {
    white-space: nowrap !important;
  }

  /* Buttons HART rechts, kleiner, schrumpfen nicht */
  .fof-header-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  .fof-header-action,
  .fof-header-menu {
    width: 32px !important;
    height: 32px !important;
  }
  .fof-header-action svg,
  .fof-header-menu svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Sehr schmale Geraete (<380px): alles etwas kompakter */
@media (max-width: 380px) {
  .fof-header-mobile-owl { width: 24px !important; height: 24px !important; }
  .fof-header-action,
  .fof-header-menu { width: 30px !important; height: 30px !important; }
  .fof-header-action svg,
  .fof-header-menu svg { width: 14px !important; height: 14px !important; }
  .fof-header { gap: 6px !important; }
  .fof-header-actions { gap: 5px !important; }
}

/* ============================================================
 * ABOUT-BOX AVATAR FIX (28.05.2026, CB 624d)
 * Bug: showAboutBubble() nutzt .fof-msg-avatar (ohne "app") —
 * diese Klasse ist nirgends gestylt -> Bild rendert nativ 512px.
 * Fix: nur diese Klasse begrenzen (eng gescoped, betrifft sonst
 * nichts), runder Avatar in vernuenftiger Groesse.
 * ============================================================ */
.fof-msg-avatar {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.fof-msg-avatar .fof-owl-img,
.fof-msg-avatar img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}