/* Philmagazine — Chat widget (dark, clean) */
:root{
  --chat-accent:#f59e0b;
  --chat-bg:#111827;
  --chat-text:#e5e7eb;
  --chat-user:#f59e0b;
  --chat-bot:#1f2937;
  --bg:#0f172a;
  --muted:#94a3b8;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --radius:16px;
}

/* Launcher + badge */
#pmg-chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:60px; height:60px; border-radius:50%;
  background:var(--chat-accent); color:#0b0b0b; border:none; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow);
  transition:transform .2s, filter .2s;
}
#pmg-chat-launcher:hover{ transform:translateY(-2px); filter:brightness(1.05); }
#pmg-chat-launcher svg{ width:28px; height:28px; }
#pmg-chat-launcher .pmg-badge{
  position:absolute; left:100%; margin-left:10px; top:50%; transform:translateY(-50%);
  display:none; white-space:nowrap; padding:6px 10px; border-radius:999px;
  background:var(--chat-accent); color:#0b0b0b; font-weight:700; font-size:12px;
  border:1px solid rgba(0,0,0,.15); box-shadow:0 6px 18px rgba(0,0,0,.2); pointer-events:none;
}
@media (max-width:480px){ #pmg-chat-launcher .pmg-badge{ display:none!important; } }

/* Panel – slide in (geen display:none) */
#pmg-chat-panel{
  position:fixed; right:20px; bottom:92px; z-index:9999;
  width:min(380px,90vw); height:min(560px,75vh);
  background:var(--chat-bg); color:var(--chat-text);
  border-radius:var(--radius); border:1px solid #243045; box-shadow:var(--shadow);
  display:block; opacity:0; transform:translateX(16px); pointer-events:none;
  transition:transform .22s ease, opacity .22s ease; overflow:hidden;
}
#pmg-chat-panel.open{ opacity:1; transform:translateX(0); pointer-events:auto; }

/* Header */
.pmg-header{ display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(135deg,var(--chat-accent),#ffd37a); color:#0b0b0b; }
.pmg-header img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.pmg-title{ font-weight:800; line-height:1.1; }
.pmg-sub{ font-size:12px; opacity:.9; }
.pmg-close{ margin-left:auto; background:transparent; border:0; color:#0b0b0b; cursor:pointer; font-size:20px; }

/* Messages area */
.pmg-messages{ height:calc(100% - 160px); overflow:auto; padding:14px; background:var(--bg); }

/* Rows + avatars (enkel deze set gebruiken) */
.pmg-row{ display:flex; gap:8px; align-items:flex-start; margin:8px 0; }
.pmg-row.user{ flex-direction:row-reverse; }
.pmg-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 28px; margin-top:2px; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.pmg-bubble{ max-width:80%; padding:10px 12px; border-radius:14px; font-size:14px; line-height:1.35; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.pmg-row.user .pmg-bubble{ background:var(--chat-user); color:#0b0b0b; border-bottom-right-radius:4px; }
.pmg-row.bot  .pmg-bubble{ background:var(--chat-bot);  color:var(--chat-text); border-bottom-left-radius:4px; }
.pmg-typing{ font-size:12px; color:var(--muted); }

/* Quickbar */
.pmg-quickbar-wrap{ position:sticky; bottom:120px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; padding:6px 8px; background:#0b1221; border-top:1px solid #243045; z-index:2; }
.pmg-quickbar{ display:inline-flex; gap:8px; align-items:center; overflow-x:auto; scrollbar-width:thin; padding:2px; }
.pmg-qb-nav{ border:1px solid #334155; background:#0b1221; color:var(--chat-text); border-radius:10px; width:28px; height:28px; display:grid; place-items:center; font-weight:700; cursor:pointer; }
.pmg-qb-nav:disabled{ opacity:.35; cursor:not-allowed; }
.pmg-chip{ white-space:nowrap; border:1px solid #334155; border-radius:999px; padding:8px 12px; background:transparent; color:var(--chat-text); cursor:pointer; font-size:13px; }
.pmg-chip:hover{ background:rgba(255,255,255,.04); }

/* Input */
.pmg-input{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:#0b1221; border-top:1px solid #243045; }
.pmg-input input{ width:100%; padding:12px; border-radius:12px; border:1px solid #243045; background:#0a0f1d; color:var(--chat-text); outline:none; }
.pmg-input button{ padding:12px 14px; border-radius:12px; border:0; background:var(--chat-accent); color:#0b0b0b; cursor:pointer; }
.pmg-input button:hover{ filter:brightness(1.05); }

/* Nieuwsbrief card */
.pmg-nl-card{ border:1px solid #243045; border-radius:16px; background:#111827; padding:14px; box-shadow:var(--shadow); }
.pmg-nl-head{ margin-bottom:8px; }
.pmg-nl-title{ font-weight:800; margin-bottom:4px; }
.pmg-nl-sub{ font-size:13px; color:var(--muted); }
.pmg-nl-form{ display:grid; gap:10px; }
.pmg-nl-label{ display:grid; gap:6px; font-size:13px; color:var(--chat-text); }
.pmg-nl-optional{ color:var(--muted); font-weight:400; }
.pmg-nl-input{ width:100%; padding:12px; border-radius:12px; border:1px solid #243045; background:#0a0f1d; color:var(--chat-text); outline:none; }
.pmg-nl-input.invalid{ border-color:#ef4444; }
.pmg-nl-error{ color:#ef4444; min-height:1em; font-size:12px; }
.pmg-nl-cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pmg-nl-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; border:0; cursor:pointer; background:var(--chat-accent); color:#0b0b0b; font-weight:700; }
.pmg-nl-spinner{ width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:none; animation:pmg-spin .8s linear infinite; }
@keyframes pmg-spin{ to{ transform:rotate(360deg);} }
.pmg-nl-note{ color:var(--muted); }

/* Toast */
.pmg-toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:10000; background:rgba(10,15,29,.92); color:#e5e7eb; border:1px solid #243045; border-radius:14px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:opacity .2s, transform .2s; }
.pmg-toast.out{ opacity:0; transform:translateX(-50%) translateY(8px); }

/* Feedback popup – compact */
.pmg-feedback-pop{ position:fixed; right:calc(20px + 66px); bottom:28px; z-index:10000; background:rgba(17,24,39,.92); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.5); color:var(--chat-text); padding:10px 12px; width:max-content; max-width:260px; display:none; backdrop-filter:blur(8px) saturate(140%); }
.pmg-feedback-pop.open{ display:block; }
.pmg-feedback-title{ margin:0 22px 8px 0; font-size:14px; font-weight:600; }
.pmg-feedback-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.pmg-star{ background:transparent; border:1px solid #334155; color:var(--chat-accent); border-radius:999px; padding:6px 10px; cursor:pointer; font-size:14px; }
.pmg-feedback-close{ position:absolute; top:6px; right:6px; width:22px; height:22px; border:1px solid #334155; border-radius:999px; background:#0b1221; color:#cbd5e1; font-size:14px; cursor:pointer; }
/* AI toggle */
.pmg-ai-toggle{ margin-left:auto; margin-right:8px; display:flex; align-items:center; gap:8px; }
.pmg-switch{ position: relative; display:inline-flex; align-items:center; cursor:pointer; }
.pmg-switch input{ display:none; }
.pmg-knob{
  width: 42px; height: 22px; background:#0b1221; border:1px solid #334155;
  border-radius: 999px; position: relative; display:inline-block; transition: background .15s ease, border-color .15s ease;
}
.pmg-knob::after{
  content:""; position:absolute; top:50%; left:3px; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius:50%; background:#94a3b8; transition: left .15s ease, background .15s ease;
}
.pmg-switch input:checked + .pmg-knob{
  background: var(--chat-accent); border-color: rgba(0,0,0,.15);
}
.pmg-switch input:checked + .pmg-knob::after{
  left: 23px; background:#0b0b0b;
}
.pmg-ai-label{ margin-left:6px; font-weight:700; color:#0b0b0b; }
.pmg-header .pmg-ai-label{ color:#0b0b0b; } /* in gradient header blijft leesbaar */