/* ============================================================
   goud999safe — pagina-CSS: Online chat
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ─────────────────────────────────────────────
     Online chat — schermvullend chatvenster (TalkTo-widget in productie).
     Placeholder-inhoud; de .chat-frame regelt de schermvullende hoogte.
     Eigen chat-namespace.
     ───────────────────────────────────────────── */
  .chat-frame { display: flex; align-items: center; justify-content: center; min-height: 460px; height: calc(100vh - 230px); background: var(--paper); border: 1px solid var(--grey-line); border-radius: var(--r-md); overflow: hidden; }
  .chat-placeholder { max-width: 380px; text-align: center; padding: 24px; }
  .chat-placeholder-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--forest-tint); margin-bottom: 16px; }
  .chat-placeholder-icon svg { width: 28px; height: 28px; color: var(--forest); }
  .chat-placeholder-title { font-size: var(--fs-18); font-weight: 700; color: var(--forest); margin-bottom: 8px; }
  .chat-placeholder-text { font-size: var(--fs-14); color: var(--text-soft); line-height: 1.55; margin-bottom: 16px; }
  .chat-placeholder-note { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--text-muted); background: var(--grey-soft); padding: 7px 12px; border-radius: var(--r-sm); }
  .chat-placeholder-note svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

  @media (max-width: 768px) {
    /* Schermvullend zonder scrollbalk (zelfde aanpak als de prijsgrafieken-pagina):
       de pagina wordt op de viewport-hoogte vastgezet en de .chat-frame vult
       via flex exact de resterende ruimte tussen tabs en bottom-nav. */
    body.chat-page,
    body.chat-page .main { height: 100dvh; overflow: hidden; }
    body.chat-page .main { display: flex; flex-direction: column; }
    body.chat-page .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 74px; overflow: hidden; }
    /* Op mobiel: breadcrumb én tabs verbergen — enkel het schermvullende chatvenster. */
    body.chat-page .breadcrumb { display: none; }
    body.chat-page .chat-page-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.chat-page .sub-tabs { flex: 0 0 auto; }
    .chat-frame { flex: 1 1 auto; min-height: 0; height: auto; border-radius: var(--r-sm); }
  }