:root{--creme:#FFEDCB;--cs:#FFF9EE;--or:#FF9A03;--rd:#730030;--dk:#361823;--tr:#36C8C5;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Barlow',system-ui,sans-serif;background:var(--cs);color:var(--rd);line-height:1.6;}

/* TOPBAR */
.topbar{background:var(--creme);border-bottom:4px solid var(--or);padding:14px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.brand svg{height:34px;width:auto;display:block;}
.topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.topbar nav a{color:var(--rd);text-decoration:none;font-weight:600;font-size:14px;}
.topbar nav a:hover{color:#a1003f;}
.inline{display:inline;}
.linkish{background:none;border:0;color:rgba(115,0,48,0.55);font:inherit;font-size:13px;cursor:pointer;}
.linkish:hover{color:var(--rd);}

main{max-width:860px;margin:0 auto;padding:32px 24px 64px;}
h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;line-height:1.1;margin-bottom:6px;}
h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;margin:22px 0 10px;}
h2:first-child{margin-top:0;}
p{margin-bottom:12px;}
a{color:var(--rd);}
.muted{color:rgba(115,0,48,0.55);}
.small{font-size:13px;}
.right{text-align:right;}
.err{color:#a03030;font-size:13px;}
code{background:rgba(115,0,48,0.07);padding:1px 5px;border-radius:4px;font-size:13px;}

.card{background:var(--creme);border-radius:14px;padding:22px 26px;margin:20px 0;
  box-shadow:0 2px 10px rgba(115,0,48,0.07);}
.flash{background:var(--or);color:var(--rd);border-radius:10px;padding:12px 18px;margin-bottom:20px;
  font-weight:600;font-size:14px;}

/* TABEL */
.list{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px;background:var(--creme);
  border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(115,0,48,0.07);}
.list th{text-align:left;padding:12px 16px;font-family:'Barlow Condensed',sans-serif;font-size:12px;
  text-transform:uppercase;letter-spacing:1px;color:rgba(115,0,48,0.5);border-bottom:2px solid rgba(115,0,48,0.1);}
.list td{padding:13px 16px;border-bottom:1px solid rgba(115,0,48,0.07);vertical-align:top;}
.list tr:last-child td{border-bottom:0;}
.list a{font-weight:600;text-decoration:none;}
.list a:hover{color:var(--or);}

/* WACHTRIJ */
.queue-list{list-style:none;}
.queue-list li{padding:9px 0;border-bottom:1px solid rgba(115,0,48,0.08);display:flex;gap:10px;
  align-items:baseline;flex-wrap:wrap;font-size:14px;}
.queue-list li:last-child{border-bottom:0;}
.pill{background:var(--rd);color:var(--creme);border-radius:999px;padding:2px 10px;font-size:11px;
  text-transform:uppercase;letter-spacing:0.6px;font-weight:700;}

/* FORMULIEREN */
.form label,.card label{display:block;margin-bottom:14px;font-size:13px;font-weight:600;}
input[type=text],input[type=password],input[type=file],textarea{
  width:100%;margin-top:5px;padding:10px 12px;border:1px solid rgba(115,0,48,0.18);border-radius:9px;
  font:inherit;font-size:14px;font-weight:400;background:var(--cs);color:var(--rd);}
input:focus,textarea:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or);}
textarea{resize:vertical;line-height:1.6;}
.hint{display:block;margin-top:5px;font-size:12px;font-weight:400;color:rgba(115,0,48,0.55);}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.check{display:flex;align-items:center;gap:9px;font-weight:600;}
.check input{width:auto;margin:0;}

.btn{display:inline-block;background:rgba(115,0,48,0.08);color:var(--rd);border:0;border-radius:9px;
  padding:11px 20px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.btn:hover{background:rgba(115,0,48,0.14);}
.btn-primary{background:var(--or);color:var(--rd);}
.btn-primary:hover{background:#e88a00;}
.btn-ghost{background:transparent;border:1px solid rgba(115,0,48,0.2);padding:7px 14px;font-size:13px;}
.btn-wide{width:100%;margin-top:6px;padding:13px;}

/* INLOGGEN */
body.plain{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(circle at 30% 20%,#8a0039,var(--rd) 60%);}
body.plain main{padding:0;max-width:none;}
.login-wrap{width:100%;max-width:400px;text-align:center;}
.login-card{background:var(--cs);border-radius:18px;padding:34px 32px 30px;text-align:left;
  box-shadow:0 18px 50px rgba(0,0,0,0.28);}
.login-logo{margin-bottom:22px;}
.login-logo svg{height:36px;width:auto;display:block;}
.login-card h1{font-size:26px;margin-bottom:2px;}
.login-sub{font-size:13px;color:rgba(115,0,48,0.55);margin-bottom:22px;}
.login-foot{margin-top:18px;font-size:12px;color:rgba(255,237,203,0.55);}
.login-wrap .flash{text-align:left;}

.foot{text-align:center;padding:20px;font-size:12px;color:rgba(115,0,48,0.4);}

@media(max-width:640px){
  .topbar{padding:12px 18px;}
  main{padding:22px 16px 48px;}
  .row{grid-template-columns:1fr;}
  .list thead{display:none;}
  .list td{display:block;border-bottom:0;padding:4px 16px;}
  .list tr{display:block;padding:12px 0;border-bottom:1px solid rgba(115,0,48,0.08);}
  .right{text-align:left;}
}

.setup{background:rgba(255,154,3,0.15);border-left:3px solid var(--or);border-radius:8px;padding:11px 14px;font-size:12.5px;margin-bottom:18px;}
.setup code{font-size:12px;}

/* WIJZIGEN MET EEN AANWIJZING */
.prompt-card{border-left:4px solid var(--or);}
.prompt-card textarea{margin-bottom:12px;}
.last-change{margin-top:14px;padding-top:12px;border-top:1px solid rgba(115,0,48,0.1);font-size:13px;}
.inline-form{display:inline;}
.nowrap{white-space:nowrap;}
.nowrap .btn{margin-left:6px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media(max-width:640px){ .nowrap .btn{margin:4px 6px 0 0;} }

/* AANNAMES: ingeklapt, want het is lange tekst */
details.notes summary{cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:19px;list-style:none;display:flex;align-items:center;justify-content:space-between;}
details.notes summary::-webkit-details-marker{display:none;}
details.notes summary::after{content:'▸';font-size:12px;opacity:0.4;}
details.notes[open] summary::after{transform:rotate(90deg);}
details.notes p{margin:12px 0 0;font-size:13px;line-height:1.7;}

/* ------------------------------------------------------------------ CHAT --- */
body.wide main{max-width:1380px;}
.chat-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0 26px;
  height:calc(100vh - 190px);min-height:560px;}
.chat-pane,.preview-pane{background:var(--creme);border-radius:14px;box-shadow:0 2px 10px rgba(115,0,48,0.07);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.chat-head,.preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid rgba(115,0,48,0.1);font-size:14px;}
.chat-head strong{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;margin-right:8px;}
.chat-status{font-size:12px;color:rgba(115,0,48,0.5);}
.chat-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;
  background:rgba(115,0,48,0.3);vertical-align:1px;}
.chat-status.ok::before{background:var(--tr);}
.chat-status.busy::before{background:var(--or);animation:pulse 1s infinite;}
.chat-status.down{color:#a03030;}
.chat-status.down::before{background:#E24B4A;}
.preview-head{font-size:12px;text-transform:uppercase;letter-spacing:0.8px;font-weight:700;color:rgba(115,0,48,0.5);}
.preview-head a{text-transform:none;letter-spacing:0;font-weight:600;color:var(--rd);text-decoration:none;}
.preview-pane iframe{flex:1;border:0;width:100%;background:#fff;}

.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--cs);}
.chat-empty{margin:auto 0;padding:10px 4px;font-size:14px;color:rgba(115,0,48,0.75);}
.chat-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chat-suggest button{background:#fff;border:1px solid rgba(115,0,48,0.15);border-radius:999px;padding:7px 13px;
  font:inherit;font-size:13px;color:var(--rd);cursor:pointer;text-align:left;}
.chat-suggest button:hover{border-color:var(--or);background:rgba(255,154,3,0.08);}

.msg{max-width:92%;font-size:14px;line-height:1.65;}
.msg-user{align-self:flex-end;background:var(--rd);color:var(--creme);border-radius:16px 16px 4px 16px;padding:10px 15px;}
.msg-ai{align-self:flex-start;width:92%;}
.msg-ai .msg-body{background:#fff;border-radius:16px 16px 16px 4px;padding:12px 16px;box-shadow:0 1px 4px rgba(115,0,48,0.06);}
.md p{margin:0 0 10px;} .md p:last-child{margin-bottom:0;}
.md h3,.md h4,.md h5,.md h6{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;margin:14px 0 6px;}
.md h3:first-child,.md h4:first-child{margin-top:0;}
.md ul,.md ol{margin:0 0 10px 20px;} .md li{margin-bottom:3px;}
.md a{color:#b35f00;font-weight:600;}
.md code{font-size:12.5px;}
.md pre{background:rgba(115,0,48,0.06);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:0 0 10px;font-size:12.5px;}
.md pre code{background:none;padding:0;}
.md blockquote{border-left:3px solid var(--or);padding:4px 0 4px 12px;margin:0 0 10px;color:rgba(115,0,48,0.8);}
.md hr{border:0;border-top:1px solid rgba(115,0,48,0.12);margin:12px 0;}
.md-table{overflow-x:auto;margin:0 0 10px;}
.md table{border-collapse:collapse;font-size:13px;width:100%;}
.md th,.md td{border-bottom:1px solid rgba(115,0,48,0.1);padding:6px 9px;text-align:left;vertical-align:top;}
.md th{font-weight:700;background:rgba(115,0,48,0.04);}

.chat-activity{font-size:12.5px;color:rgba(115,0,48,0.6);margin:0 0 6px 4px;}
.chat-activity summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;}
.chat-activity summary::-webkit-details-marker{display:none;}
.chat-activity summary::before{content:'▸';font-size:10px;transition:transform .15s;}
.chat-activity[open] summary::before{transform:rotate(90deg);}
.chat-activity ul{list-style:none;margin:6px 0 4px 2px;border-left:2px solid rgba(115,0,48,0.1);padding-left:10px;}
.chat-activity li{margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-activity .ai{display:inline-block;width:20px;}
.chat-activity a{color:inherit;}

.typing{display:flex;align-items:center;gap:4px;padding:8px 6px;color:rgba(115,0,48,0.5);font-size:12.5px;}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
.typing em{margin-left:6px;font-style:normal;}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.msg-error{margin-top:6px;background:rgba(226,75,74,0.08);border:1px solid rgba(226,75,74,0.25);color:#a03030;
  border-radius:9px;padding:8px 12px;font-size:13px;}
.msg-changed{margin-top:6px;font-size:12.5px;font-weight:600;color:#1f8f8c;padding-left:4px;}
.msg-changed::before{content:'● ';}
.msg-changed a{color:inherit;}

.chat-input{display:flex;gap:10px;align-items:flex-end;padding:12px 14px 6px;border-top:1px solid rgba(115,0,48,0.1);}
.chat-input textarea{margin:0;resize:none;min-height:44px;max-height:220px;background:#fff;}
.chat-input .btn{flex-shrink:0;height:44px;}
.chat-foot{padding:0 16px 10px;font-size:11.5px;}
.chat-foot .linkish{font-size:11.5px;}

@media(max-width:980px){
  .chat-shell{grid-template-columns:1fr;height:auto;}
  .chat-pane{height:78vh;min-height:480px;}
  .preview-pane{height:70vh;}
}