/* PlatSjriever-chat: uitsluitend de presentatie; backend en verbruikslogica blijven apart. */
.psj-wrap{box-sizing:border-box;max-width:780px;margin:26px auto;padding:24px;background:#fff;border:1px solid #e4e9ef;border-radius:20px;box-shadow:0 10px 40px rgba(25,57,86,.055);color:#172b3c;font:inherit}
.psj-wrap *{box-sizing:border-box}
.psj-wrap .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.psj-top{position:relative;display:block;min-height:44px;margin-bottom:22px}
.psj-top h2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;line-height:1.25;margin:0;letter-spacing:-.025em;color:inherit;white-space:nowrap;transition:left .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1)}
.psj-wrap.psj-has-conversation .psj-top h2{left:0;transform:translate(0,-50%)}
.psj-wrap #psj-new{position:absolute;right:0;top:50%;transform:translate(5px,-50%);opacity:0;visibility:hidden;pointer-events:none;border:1px solid #e1eaf2;border-radius:11px;background:#f4f8fb;color:#456479;padding:10px 15px;font:inherit;font-size:.85rem;white-space:nowrap;cursor:pointer;transition:background .16s ease,opacity .22s ease,transform .34s ease,visibility 0s linear .34s}
.psj-wrap.psj-has-conversation #psj-new{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);transition:background .16s ease,opacity .25s ease .12s,transform .34s ease,visibility 0s}
.psj-wrap #psj-new:hover{background:#e9f2f8}
.psj-wrap #psj-new:disabled{opacity:.55;cursor:wait}

/* Berichten en invoer vormen één visueel geheel. */
.psj-wrap .psj-chat-panel{border:1px solid #dde7ee;border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(22,60,93,.035)}
.psj-wrap .psj-chat-panel .psj-messages{height:340px;min-height:230px;overflow-y:auto;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:24px 20px 16px;display:flex;flex-direction:column;gap:14px;border:0!important;border-radius:0!important;background:#f9fbfd!important;scrollbar-color:#d5e1e9 transparent}
.psj-wrap .psj-messages .psj-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;text-align:center;gap:7px;padding:22px;color:#70879a}
.psj-wrap .psj-messages .psj-empty[hidden]{display:none!important}
.psj-empty-title{font-size:1.04rem;font-weight:650;color:#46647a}
.psj-empty-caption{font-size:.88rem;line-height:1.5;max-width:270px}
.psj-wrap .psj-chat-panel .psj-bubble{white-space:pre-wrap;overflow-wrap:anywhere;max-width:min(88%,620px);padding:12px 16px;border-radius:16px;font-size:.94rem;line-height:1.65;box-shadow:0 2px 7px rgba(16,45,69,.025);animation:psj-appear .18s ease-out both}
.psj-wrap .psj-chat-panel .psj-user{align-self:flex-end;background:#e5eff7;border:1px solid #dbe8f3;color:#1c425d;border-bottom-right-radius:5px}
.psj-wrap .psj-chat-panel .psj-assistant{align-self:flex-start;background:#fff;border:1px solid #e1eaf1;color:#233f52;border-bottom-left-radius:5px}
.psj-wrap .psj-chat-panel .psj-typing{display:inline-flex;align-items:center;gap:11px;max-width:95%;min-height:43px;padding:12px 15px}
.psj-typing-label{font-size:.84rem;color:#718496}
.psj-typing-dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.psj-typing-dots i{width:5px;height:5px;border-radius:50%;background:#6d91ad;animation:psj-bounce 1.15s infinite ease-in-out}
.psj-typing-dots i:nth-child(2){animation-delay:.15s}
.psj-typing-dots i:nth-child(3){animation-delay:.30s}

/* De chatbalk is vast onderdeel van het berichtvenster, geen tweede kaart. */
.psj-wrap .psj-chat-panel #psj-form{margin:0;border-top:1px solid #e3ebf2;padding:12px 13px 9px;background:#fff}
.psj-composer-row{display:flex;align-items:flex-end;gap:9px;padding:4px 4px 4px 12px;border:1px solid #d6e2ed;border-radius:15px;background:#fff;transition:border-color .18s,box-shadow .18s}
.psj-composer-row:focus-within{border-color:#7ca8c4;box-shadow:0 0 0 3px rgba(68,127,164,.10)}
.psj-wrap .psj-chat-panel #psj-input{display:block;flex:1;min-width:0;height:43px;min-height:43px;max-height:210px;box-sizing:border-box;margin:0!important;padding:10px 3px 10px 2px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:#172b3c;font:inherit;font-size:1rem;line-height:1.45;resize:none;overflow-y:auto;border-radius:0!important}
.psj-wrap .psj-chat-panel #psj-input::placeholder{color:#8899a8;opacity:1}
.psj-wrap .psj-chat-panel #psj-send{display:flex;align-items:center;justify-content:center;flex:0 0 43px;width:43px;height:43px;min-width:43px;margin:0;padding:0!important;border:0!important;border-radius:11px!important;background:#174d81!important;color:#fff!important;cursor:pointer;transition:background .16s,transform .16s}
.psj-wrap .psj-chat-panel #psj-send:hover{background:#103a64!important;transform:translateY(-1px)}
.psj-wrap .psj-chat-panel #psj-send:disabled{opacity:.55;cursor:wait;transform:none}
.psj-send-icon{width:19px;height:19px;display:block}
.psj-wrap .psj-draft-count{margin:6px 5px 0;color:#728596;text-align:right;font-size:.75rem;line-height:1.45;font-variant-numeric:tabular-nums}
.psj-wrap .psj-draft-count[hidden]{display:none!important}
.psj-wrap .psj-draft-count.psj-draft-excess{color:#b42318}
.psj-wrap #psj-error{font-size:.85rem;line-height:1.5;color:#b42318;margin:9px 1px 0;min-height:0}
.psj-wrap #psj-error:empty{display:none}
/* Verbruik komt discreet onder het chatvenster, nooit erboven. */
.psj-wrap .psj-usage-wrap{margin:17px 5px 0}
.psj-wrap .psj-usage-wrap[hidden]{display:none!important}
.psj-wrap .psj-usage-progress{height:7px;overflow:hidden;background:#e7edf2;border-radius:999px}
.psj-wrap .psj-usage-fill{display:block;width:0;height:100%;background:#7398b2;border-radius:inherit;transition:width .25s ease}
.psj-wrap .psj-usage{font-size:.76rem;color:#728596;margin:7px 0 0;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.psj-wrap .psj-guest-note{font-size:.78rem;color:#61798a;margin:5px 0 0;line-height:1.5;text-align:center}
.psj-wrap .psj-guest-note[hidden]{display:none!important}
.psj-wrap .psj-guest-note a{color:#174d81;text-decoration:underline;text-underline-offset:2px}

@keyframes psj-bounce{0%,65%,100%{opacity:.35;transform:translateY(0)}32%{opacity:1;transform:translateY(-4px)}}
@keyframes psj-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
 .psj-wrap{margin:12px auto;padding:15px;border-radius:16px}
 .psj-top{margin-bottom:18px}
 .psj-top h2{font-size:1.32rem}
 .psj-wrap #psj-new{padding:9px 11px;font-size:.77rem}
 .psj-wrap .psj-chat-panel .psj-messages{height:310px;min-height:200px;padding:16px 12px 12px;gap:11px}
 .psj-wrap .psj-chat-panel .psj-bubble{max-width:95%;padding:11px 13px;font-size:.9rem}
 .psj-wrap .psj-chat-panel #psj-form{padding:9px}
 .psj-composer-row{padding-left:10px}
 .psj-wrap .psj-usage-wrap{margin:14px 3px 0}
}
@media(prefers-reduced-motion:reduce){.psj-wrap .psj-bubble,.psj-typing-dots i{animation:none!important}.psj-wrap #psj-send{transition:none;transform:none!important}.psj-top h2,.psj-wrap #psj-new{transition:none!important}}

/* v0.2.6 — allow touch-scroll to flow from the chat area to the page on phones. */
@media(hover:none) and (pointer:coarse){
 .psj-wrap,.psj-chat-panel{touch-action:pan-y}
 .psj-wrap .psj-chat-panel .psj-messages{overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y}
}