/*! © 2026 Philipp Kuljkin · kuljkin.de · Alle Rechte vorbehalten. */
/* IT-Check Chat Styles. Extern (CSP-konform, style-src self), geteilt von /it-check/ und /it-check-chat/. */
    /* ============================================================
       IT-Check (Chat). Messenger-Muster im kuljkin.de-Look:
       dunkel, Orange-Akzent, eingehende Blasen grau (links),
       eigene Blasen orange (rechts).
       ============================================================ */
    /* Das Fenster ist eine in sich geschlossene "App": feste Höhe, die auf den
       Schirm passt. Kopf + Antwort-Leiste bleiben IMMER sichtbar, nur der
       Verlauf in der Mitte scrollt intern. */
    .chat-window {
      background: var(--color-section);
      border: 1px solid var(--color-border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      height: min(560px, 72vh);
    }

    .chat-header {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 18px;
      background: var(--color-section-2);
      border-bottom: 1px solid var(--color-border);
    }
    .chat-header-avatar {
      width: 40px; height: 40px; flex: 0 0 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--color-orange-btn);
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 15px;
      letter-spacing: 0.02em;
    }
    .chat-header-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
    .chat-header-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-white); }
    .chat-header-sub { font-size: 12px; color: var(--color-grey); }
    .chat-header-restart {
      flex: 0 0 auto;
      background: transparent;
      border: 1px solid var(--color-border);
      color: var(--color-grey);
      font-family: var(--font-body);
      font-size: 12px;
      padding: 5px 11px;
      border-radius: 99px;
      cursor: pointer;
      transition: color 0.15s ease, border-color 0.15s ease;
    }
    .chat-header-restart:hover { color: var(--color-orange-text); border-color: var(--color-orange-text); }
    /* Fortschrittsleiste: zeigt, wie weit man im Check ist */
    .chat-header-progress { flex: 0 0 auto; display: flex; align-items: center; }
    .chat-header-bar {
      width: 64px; height: 7px; border-radius: 99px;
      background: var(--color-border);
      overflow: hidden;
    }
    .chat-header-bar-fill {
      display: block; height: 100%; width: 0%;
      border-radius: 99px;
      background: var(--color-orange-text);
      transition: width 0.5s ease;
    }
    @media (max-width: 600px) { .chat-header-bar { width: 52px; } }

    /* Fortschritts-Segmente unter dem Kopf: ein Feld pro Thema */
    .chat-steps {
      flex: 0 0 auto;
      display: flex;
      gap: 5px;
      padding: 11px 16px;
      background: var(--color-section-2);
      border-bottom: 1px solid var(--color-border);
    }
    .chat-steps span {
      flex: 1 1 0;
      height: 6px;
      border-radius: 99px;
      background: var(--color-border);
      transition: background 0.4s ease, opacity 0.4s ease;
    }
    .chat-steps span.done { background: var(--color-orange-text); }
    .chat-steps span.current { background: var(--color-orange-text); opacity: 0.5; }

    .chat-stream {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      /* -webkit-overflow-scrolling: touch BEWUSST entfernt: erzeugt auf iOS Safari einen
         Momentum-Scroll-Layer, der nach DOM-Entfernen ("Antwort aendern") einfriert -> program-
         matisches scrollTop wird erst nach manuellem Wischen uebernommen. Modernes iOS scrollt
         ohnehin nativ smooth. (Signatur des Bugs: "manuell scrollen, dann geht alles".) */
      padding: 18px 16px 6px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: smooth;
      scrollbar-width: none;            /* Firefox */
      -ms-overflow-style: none;         /* alte Edge/IE */
    }
    .chat-stream::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit/Chrome/Safari */
    .chat-stream-spacer { flex: 1 1 0; min-height: 0; }
    #chat-anchor { height: 1px; flex: 0 0 auto; }

    .chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; flex: 0 0 auto; }
    .chat-msg--in { justify-content: flex-start; }
    .chat-msg--out { justify-content: flex-end; }

    .chat-avatar {
      width: 28px; height: 28px; flex: 0 0 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--color-orange-btn); color: #fff;
      font-family: var(--font-heading); font-weight: 900; font-size: 11px;
      margin-bottom: 2px;
    }

    .chat-bubble {
      max-width: 80%;
      padding: 11px 15px;
      border-radius: 18px;
      font-size: 15px;
      line-height: 1.5;
      color: #ededed;
      background: #3a3a3c;
      border-bottom-left-radius: 5px;
      animation: chat-pop 0.28s ease both;
    }
    .chat-bubble--out {
      background: var(--color-orange-btn);
      color: #fff;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 5px;
    }
    .chat-bubble strong { color: var(--color-white); }
    .chat-bubble--out strong { color: #fff; }

    @keyframes chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

    /* Tipp-Indikator ••• */
    .chat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
    .chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-grey); display: inline-block; animation: chat-dot 1.2s infinite ease-in-out; }
    .chat-typing i:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing i:nth-child(3) { animation-delay: 0.4s; }
    @keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

    /* Themen-Trenner: orange Pille (Markenakzent) zwischen dünnen Linien */
    .chat-lead {
      align-self: stretch;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 2px 6px;
      animation: chat-pop 0.28s ease both;
    }
    .chat-lead::before, .chat-lead::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }
    .chat-lead-label {
      flex: 0 0 auto;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--color-orange-text);
      background: rgba(230, 86, 22, 0.12);
      border: 1px solid rgba(230, 86, 22, 0.32);
      padding: 5px 14px;
      border-radius: 999px;
      white-space: nowrap;
    }

    /* Antwort-Chips */
    .chat-dock {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 16px 14px;
      border-top: 1px solid var(--color-border);
      background: var(--color-section);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      min-height: 0;
      max-height: 60vh;
      overflow-y: auto;
    }
    .chat-dock.is-visible { opacity: 1; transform: none; }
    .chat-chip {
      display: flex; align-items: center; gap: 11px;
      width: 100%;
      text-align: left;
      padding: 13px 16px;
      border-radius: 12px;
      border: 1px solid var(--color-border);
      background: var(--color-section-2);
      color: var(--color-grey-light);
      font-family: var(--font-body);
      font-size: 14.5px;
      line-height: 1.35;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.1s ease;
    }
    .chat-chip:hover { border-color: var(--color-orange-text); background: #2f2f2f; }
    .chat-chip:active { transform: scale(0.99); }

    /* "Antwort ändern": dezenter Zurück-Button über den Chips */
    .chat-undo {
      align-self: flex-start;
      background: transparent;
      border: none;
      color: var(--color-grey);
      font-family: var(--font-body);
      font-size: 12.5px;
      padding: 2px 4px;
      margin-bottom: 2px;
      cursor: pointer;
      transition: color 0.15s ease;
    }
    .chat-undo:hover { color: var(--color-orange-text); }
    .chat-chip-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--color-grey); }
    .chat-chip-dot--good { background: #4ade80; }
    .chat-chip-dot--bad { background: var(--color-orange-text); }
    .chat-chip-dot--unsure { background: #f5c850; }
    .chat-chip-dot--skip { background: var(--color-grey-dark); border: 1px solid var(--color-grey); }

    /* ── Ergebnis ───────────────────────────────────────────── */
    .chat-result { margin-top: var(--space-5); text-align: center; }
    .chat-ring {
      --p: 0;
      width: 150px; height: 150px; margin: 0 auto var(--space-4);
      border-radius: 50%;
      background: conic-gradient(var(--color-orange-text) calc(var(--p) * 1%), var(--color-border) 0);
      display: flex; align-items: center; justify-content: center;
    }
    /* "Ergebnis wird berechnet und geladen …" Spannungsmoment beim Auswerten */
    .chat-calc {
      font-size: 13px; letter-spacing: 0.04em; color: var(--color-grey);
      margin: 0 0 var(--space-3); text-transform: uppercase; font-weight: 700;
      animation: chat-calc-pulse 1.1s ease-in-out infinite;
    }
    @keyframes chat-calc-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
    /* Befund-Text unter dem Ring */
    .chat-verdict { font-size: 1.05rem; line-height: 1.5; color: var(--color-grey-light); margin: 0 auto var(--space-5); max-width: 460px; }
    .chat-verdict strong { color: var(--color-white); font-family: var(--font-heading); font-size: 1.2rem; display: inline-block; margin-bottom: 4px; }
    .chat-verdict-sub { font-size: 13px; color: var(--color-orange-text); font-weight: 700; }
    .chat-ring-inner {
      width: 118px; height: 118px; border-radius: 50%;
      background: var(--color-bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: var(--font-heading); font-weight: 900;
    }
    .chat-ring-inner span { font-size: 40px; color: var(--color-white); line-height: 1; }
    .chat-ring-inner small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-grey); font-weight: 700; margin-top: 4px; }

    .chat-recs-title { font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; color: var(--color-white); margin: 0 0 var(--space-3); }
    .chat-recs-intro { font-size: 13px; line-height: 1.5; color: var(--color-grey); margin: 0 0 var(--space-4); text-align: left; }
    .chat-recs { display: grid; gap: 12px; text-align: left; }

    /* "Warum noch nicht 100 %" */
    .chat-why { text-align: center; margin-bottom: var(--space-5); }
    .chat-why-list { display: grid; gap: 10px; text-align: left; }
    .chat-why-item {
      display: flex; align-items: flex-start; gap: 11px;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--color-section-2);
      font-size: 14px; line-height: 1.5; color: var(--color-grey-light);
    }
    .chat-why-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; margin-top: 6px; }
    .chat-why-item strong { color: var(--color-white); }

    /* "dringend"-Label an einer Empfehlung */
    .chat-rec-urgent {
      display: inline-block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
      font-weight: 700; color: #ef4444; border: 1px solid #ef4444; border-radius: 6px;
      padding: 1px 6px; margin-left: 8px; vertical-align: middle;
    }

    /* Abstand zwischen Dienstleistungen und Artikel-Hinweisen */
    .chat-articles { margin-top: var(--space-6); }

    /* Ausbau-Block dezenter */
    .chat-expansion { margin-top: var(--space-5); }

    /* Vertrauenszeile über dem CTA */
    .chat-trust { font-size: 13px; line-height: 1.5; color: var(--color-grey-light); margin: var(--space-5) auto var(--space-3); max-width: 460px; }

    /* Ergebnis erhält Fokus (A11y), soll aber keinen Rahmen zeigen */
    .chat-result:focus { outline: none; }
    .chat-rec {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid var(--color-border);
      background: var(--color-section-2);
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .chat-rec:hover { border-color: var(--color-orange-text); transform: translateX(3px); }
    /* Artikel-Hinweiskarte: nicht klickbar -> kein Hover-Effekt, normaler Cursor, dezent abgesetzt */
    .chat-rec--article { cursor: default; background: transparent; border-style: dashed; }
    .chat-rec--article:hover { border-color: var(--color-border); transform: none; }
    /* Artikel-Karte MIT Link (als <a> gerendert): wieder klickbar-Optik, gestrichelter Rahmen bleibt */
    a.chat-rec--article { cursor: pointer; }
    a.chat-rec--article:hover { border-color: var(--color-orange-text); transform: translateX(3px); }
    .chat-rec-icon { font-size: 24px; flex: 0 0 auto; line-height: 1.2; }
    .chat-rec-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
    .chat-rec-tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-orange-text); font-weight: 700; }
    .chat-rec-title { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-white); }
    .chat-rec-text { font-size: 13.5px; line-height: 1.5; color: var(--color-grey-light); }
    .chat-rec-arrow { color: var(--color-orange-text); font-size: 18px; flex: 0 0 auto; align-self: center; }
    .chat-recs-empty { color: var(--color-grey-light); font-size: 15px; line-height: 1.6; }
    .chat-recs-empty a { color: var(--color-orange-text); text-decoration: underline; }

    .chat-result-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
    .chat-result-note { font-size: 12px; color: var(--color-grey); margin-top: var(--space-3); opacity: 0.85; }

    /* Datenschutz-Hinweis unter dem Check */
    .check-privacy {
      margin-top: 28px;
      padding: 18px 22px;
      background: var(--color-section-2);
      border-radius: 10px;
      font-size: 13px;
      color: var(--color-grey-light);
      line-height: 1.65;
    }
    .check-privacy strong { color: #fff; }

    /* Statischer Erklär-Abschnitt unter dem Check (Orientierung + SEO) */
    .check-about-title {
      font-family: var(--font-heading);
      font-size: clamp(20px, 3vw, 26px);
      color: #fff;
      margin: 0 0 16px;
    }
    .check-about p {
      color: var(--color-grey-light);
      line-height: 1.75;
      font-size: 15px;
      margin: 0 0 16px;
    }
    .check-topics {
      list-style: none;
      padding: 0;
      margin: 4px 0 20px;
      display: grid;
      gap: 10px;
    }
    .check-topics li {
      padding: 12px 16px;
      background: var(--color-section-2);
      border-radius: 10px;
      color: var(--color-grey-light);
      font-size: 14.5px;
      line-height: 1.55;
    }
    .check-topics strong { color: #fff; }

    /* Mobile: Trust-Signale (#warum) ausblenden, im Hero-Sub schon enthalten */
    @media (max-width: 700px) {
      #warum { display: none; }
    }

    @media (max-width: 600px) {
      .chat-window { height: min(72dvh, 600px); }
      .chat-bubble { font-size: 14.5px; max-width: 84%; }
      .chat-result-cta .cta-button, .chat-result-cta .cta-button-ghost { width: 100%; justify-content: center; }
    }

    /* H3: Querformat-Handys (kurze Hoehe). Ohne diese Regel fressen Fenster (72vh)
       + Antwort-Dock (60vh) zusammen mehr als den Schirm und der Verlauf wird
       unsichtbar. Hier nutzt das Fenster fast die volle Hoehe, das Dock bleibt
       kompakt. Greift nur bei niedrigen Viewports (Phones quer), nicht auf Desktop. */
    @media (orientation: landscape) and (max-height: 500px) {
      .chat-window { height: 90dvh; }
      .chat-dock { max-height: 44dvh; }
    }

    @media (prefers-reduced-motion: reduce) {
      .chat-bubble, .chat-dock, .chat-lead { animation: none !important; transition: none !important; }
      .chat-typing i { animation: none; opacity: 0.6; }
      .chat-stream { scroll-behavior: auto; }
      .chat-ring { transition: none; }
      .chat-header-bar-fill { transition: none; }
    }