/* Chatwidget "Duinker Workforce Support": maten en kleuren. */
.frc{font-family:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:0;line-height:normal}
.frc [hidden]{display:none!important}
.frc-fab{position:fixed;bottom:24px;right:24px;width:64px;height:64px;border-radius:50%;background:#FFB71B;border:0;padding:1px 6px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease;z-index:9999}
.frc-fab:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.frc-fab:active{transform:scale(.97)}
.frc-fab svg{pointer-events:none}
.frc-fab:focus-visible,.frc-close:focus-visible,.frc-chip:focus-visible,.frc-rel-b:focus-visible,.frc-send:focus-visible{outline:2px solid #171A1B;outline-offset:2px}
.frc-close:focus-visible{outline-color:#FFB71B}

.frc-panel{position:fixed;bottom:24px;right:24px;width:400px;height:600px;max-height:calc(100vh - 48px);background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;z-index:9999;transform-origin:100% 100%;opacity:0;transform:scale(.96) translateY(8px);transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
.frc-panel.open{opacity:1;transform:none}
.frc-head{background:#171A1B;padding:16px 20px;display:flex;align-items:center;gap:12px;flex:none}
.frc-avatar{width:44px;height:44px;background:#FFB71B;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;color:#171A1B;flex:none}
.frc-title{flex:1;min-width:0}
.frc-name{color:#fff;font-weight:600;font-size:16px}
.frc-status{color:#9CA3AF;font-size:12px;display:flex;align-items:center;gap:6px}
.frc-dot{width:8px;height:8px;background:#10B981;border-radius:50%;flex:none}
.frc-close{background:none;border:0;color:#9CA3AF;cursor:pointer;padding:8px;border-radius:8px;display:flex;transition:background .2s}
.frc-close:hover{background:rgba(255,255,255,.1)}

.frc-log{flex:1;overflow-y:auto;padding:20px;background:#F9FAFB;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.frc-msg{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.frc-msg.user{align-items:flex-end}
.frc-cat{background:#FEF3C7;color:#92400E;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}
.frc-bubble{background:#fff;color:#1F2937;padding:14px 18px;border-radius:18px 18px 18px 4px;max-width:90%;font-size:14px;line-height:1.6;box-shadow:0 1px 3px rgba(0,0,0,.08);white-space:pre-wrap;overflow-wrap:anywhere}
.frc-msg.user .frc-bubble{background:#111827;color:#fff;border-radius:18px 18px 4px 18px;box-shadow:none}
.frc-bubble a{color:inherit;text-decoration:underline;text-decoration-color:#FFB71B;text-underline-offset:2px}
.frc-bubble a:hover{color:#B57900}
.frc-rel{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.frc-rel-h{font-size:11px;color:#6B7280;font-weight:500}
.frc-rel-b{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;font:inherit;font-size:13px;color:#374151;line-height:1.4;transition:border-color .2s,background-color .2s}
.frc-rel-b:hover{border-color:#FFB71B;background:#FFFBEB}
.frc-typing{display:flex;gap:4px;padding:14px 18px;background:#fff;border-radius:18px;width:fit-content}
.frc-typing span{width:8px;height:8px;background:#9CA3AF;border-radius:50%;animation:frc-typing 1s infinite}
.frc-typing span:nth-child(2){animation-delay:.2s}.frc-typing span:nth-child(3){animation-delay:.4s}
@keyframes frc-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.frc-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.frc-chip{background:#fff;border:1px solid #E5E7EB;border-radius:20px;padding:8px 14px;font:inherit;font-size:13px;color:#374151;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.frc-chip:hover{background:#FFB71B;border-color:#FFB71B;color:#111827}
.frc-chip:active,.frc-rel-b:active{transform:scale(.97)}

.frc-form{padding:16px 20px;border-top:1px solid #E5E7EB;background:#fff;display:flex;gap:12px;flex:none;margin:0}
.frc-input{flex:1;min-width:0;padding:14px 18px;border:1px solid #E5E7EB;border-radius:14px;font:inherit;font-size:14px;color:#111827;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.frc .frc-input:focus{outline:none;border-color:#FFB71B;box-shadow:0 0 0 3px rgba(255,183,27,.15)}
.frc-send{width:48px;height:48px;flex:none;border-radius:14px;border:0;background:#FFB71B;color:#171A1B;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .2s}
.frc-send:hover{background:#E5A617;transform:scale(1.05)}
.frc-send:disabled{background:#E5E7EB;color:#9CA3AF;cursor:not-allowed;transform:none}

/* De chat staat alleen op tablet en desktop; op de telefoon (tot 810 breed) is hij verborgen. */
@media(max-width:809.98px){.frc{display:none}}
@media(prefers-reduced-motion:reduce){.frc-fab,.frc-panel,.frc-send,.frc-chip,.frc-rel-b{transition:none}.frc-panel{transform:none}.frc-typing span{animation:none;opacity:.7}}

/* Zolang de cookiemelding onderaan staat, schuift de chat erboven. Anders valt de knop en de
   onderkant van het gesprek achter die balk. De maat volgt de hoogte van de balk, die op een
   telefoon hoger is omdat de knoppen daar onder elkaar staan. */
body:has(.dkck:not([hidden])) .frc-fab{ bottom:172px; }
body:has(.dkck:not([hidden])) .frc-panel{ bottom:172px; max-height:calc(100dvh - 196px); }
