/* Conversation styling follows the event; message content and anonymity stay shared. */
.post-office{min-width:0;overflow:hidden}
.post-office :is(.message-paper,.post-heading>div,.conversation-choice>span:nth-child(2)){min-width:0}
.post-office .conversation-choice{min-height:64px}
.post-office .conversation-choice strong{font-weight:500;line-height:1.4}
.post-office .conversation-choice small{display:block;line-height:1.5;margin-top:3px}
.post-office .message-paper{display:flex;flex-direction:column}
.post-office #message-list{min-height:130px}
.post-office #message-form{margin-top:24px}
.post-office .chat-message{overflow-wrap:anywhere}
.post-office .chat-message time{opacity:1;font-size:10px;letter-spacing:0;margin-top:9px}
.post-office .chat-message small{font-size:10px;font-weight:500;letter-spacing:0}
.post-office .post-heading p{font-size:12px;line-height:1.65}
.post-office .message-input:focus-within{outline:2px solid var(--chat-focus,#a47c42);outline-offset:3px}
.post-office textarea{display:block;min-height:84px}
.post-office textarea:focus-visible{outline:0}
.post-office textarea::placeholder{color:#796666;opacity:1}
.post-office .compose-bottom>span,.post-office form>small{font-size:10px;line-height:1.6}
.post-office form>small{display:block;margin-top:10px}
.chat-mark{display:none;line-height:1}
.chat-mark svg{display:block;width:38px;height:44px}
body[data-theme=kerst] .chat-mark-kerst,body[data-theme=sinterklaas] .chat-mark-sint,body[data-theme=vrienden] .chat-mark-vrienden{display:block}
body[data-theme=sinterklaas] .postal-seal:before{display:none}

/* Standaard: a compact conversation list and plain, legible messages. */
body[data-theme=standaard] .post-office{--chat-focus:#63283e;grid-template-columns:230px minmax(0,1fr);border:1px solid #d6c7b3;border-radius:4px;box-shadow:none;background:#faf7ef}
body[data-theme=standaard] .post-office .post-sidebar{background:#f1ece2;color:#432431;border-right:1px solid #ded4c5;padding:26px 18px}
body[data-theme=standaard] .post-sidebar :is(h2,.post-emblem,.post-aside-quote,.post-privacy),body[data-theme=standaard] .post-office :is(.postal-seal,.post-date),body[data-theme=standaard] .post-heading .eyebrow{display:none}
body[data-theme=standaard] .post-sidebar>.eyebrow{font-size:10px;color:#71565c;letter-spacing:1px;margin-bottom:18px}
body[data-theme=standaard] .conversation-choices{gap:8px}
body[data-theme=standaard] .conversation-choice{border:1px solid transparent;background:none;color:#58323f;padding:12px 10px;border-radius:3px;transform:none}
body[data-theme=standaard] .conversation-choice.selected{background:#fffdf8;border-color:#baa895;box-shadow:inset 3px 0 #63283e}
body[data-theme=standaard] .conversation-choice:hover{background:#e8dfd3}
body[data-theme=standaard] .conversation-choice .correspondent,body[data-theme=standaard] .conversation-choice>span:nth-child(3){display:none}
body[data-theme=standaard] .conversation-choice small{color:#6e5960}
body[data-theme=standaard] .post-office .message-paper{background:#fffdf8;padding:26px 28px;color:#432431}
body[data-theme=standaard] .post-heading{padding-bottom:18px;border-color:#e1d7c9}
body[data-theme=standaard] .post-heading h2{font:500 21px/1.4 DM,Arial,sans-serif;letter-spacing:-.3px;margin:0 0 6px;color:#432431}
body[data-theme=standaard] .post-heading p{color:#71565c}
body[data-theme=standaard] .post-office #message-list{padding-top:10px}
body[data-theme=standaard] .post-office .chat-message{border:0;box-shadow:none;border-radius:4px;padding:13px 16px;animation:none}
body[data-theme=standaard] .post-office .chat-message.reply{background:#eee9e0;color:#432431}
body[data-theme=standaard] .post-office .chat-message.outgoing{background:#63283e;color:#fff9ed}
body[data-theme=standaard] .chat-message.reply :is(small,time){color:#72545d}
body[data-theme=standaard] .chat-message.outgoing :is(small,time){color:#f0dedc}
body[data-theme=standaard] .post-office .message-input{border:1px solid #c9bba8;background:#fffdf8;border-radius:4px;padding:12px}
body[data-theme=standaard] .post-office textarea{color:#432431}
body[data-theme=standaard] .compose-bottom{border-color:#e1d7c9}
body[data-theme=standaard] .post-office :is(.compose-bottom>span,form>small){color:#72545d}
body[data-theme=standaard] .compose-bottom .button{background:#63283e;border:0;border-radius:3px!important;font-size:11px;box-shadow:none;transform:none}

/* Kerst: evergreen velvet, fine gold rules and cream correspondence paper. */
body[data-theme=kerst] .post-office{--chat-focus:#9b7135;grid-template-columns:280px minmax(0,1fr);border:1px solid #c5a36a;border-radius:3px;box-shadow:0 18px 48px #31030030}
body[data-theme=kerst] .post-office .post-sidebar{background:radial-gradient(ellipse at 0 0,#54765b4d,transparent 70%),#193c2d;padding:32px 24px;color:#fff4dd;border-right:1px solid #c5a36a}
body[data-theme=kerst] .post-emblem{border:3px double #c5a36a;border-radius:50%;color:#e4c891;animation:none;font-size:32px}
body[data-theme=kerst] .post-sidebar .eyebrow{color:#e4c891;letter-spacing:2px}
body[data-theme=kerst] .post-sidebar h2{font:36px/1.1 Cormorant,Georgia,serif;color:#fff4dd}
body[data-theme=kerst] .post-sidebar h2 em{color:#e4c891}
body[data-theme=kerst] .conversation-choice{background:#0f2d2040;border-color:#bda16d66;border-radius:2px;color:#fff4dd}
body[data-theme=kerst] .conversation-choice.selected{background:#ebd7ac17;border-color:#d6b980;box-shadow:inset 3px 0 #d6b980}
body[data-theme=kerst] .conversation-choice:hover{background:#ebd7ac22;transform:none}
body[data-theme=kerst] .conversation-choice small{color:#dfd5bf}
body[data-theme=kerst] .correspondent{color:#e4c891;border-color:#c5a36a88}
body[data-theme=kerst] .post-aside-quote{color:#e4c891;font-size:24px}
body[data-theme=kerst] .post-privacy{color:#dfd5bf;border-color:#c5a36a55;line-height:1.8}
body[data-theme=kerst] .post-office .message-paper{background:linear-gradient(135deg,#fffcf3,#f4ecdc);padding:32px 36px;color:#48372a}
body[data-theme=kerst] .post-heading{border-bottom:3px double #b89a6666;padding-bottom:22px}
body[data-theme=kerst] .post-heading h2{font:44px/1.08 Cormorant,Georgia,serif;letter-spacing:-.7px;color:#234b37}
body[data-theme=kerst] .post-heading .eyebrow{color:#7b5d31;letter-spacing:1.8px}
body[data-theme=kerst] .post-heading p{color:#766046}
body[data-theme=kerst] .postal-seal{display:flex;width:66px;height:66px;border:3px double #ae864d;color:#8d6834;transform:rotate(-8deg);font-size:32px}
body[data-theme=kerst] .post-date{color:#80633a;letter-spacing:2px}
body[data-theme=kerst] .post-date span{background:#b89a66;opacity:.6}
body[data-theme=kerst] .post-office .chat-message{border:1px solid #cdb995;padding:18px 22px;box-shadow:0 4px 12px #543c2010;border-radius:3px}
body[data-theme=kerst] .post-office .chat-message.reply{background:#fffdf6;color:#48372a;border-left:3px solid #b59a66}
body[data-theme=kerst] .post-office .chat-message.outgoing{background:linear-gradient(135deg,#294f3c,#1c3c2e);color:#fff7e5;border-color:#a99462}
body[data-theme=kerst] .chat-message.reply :is(small,time){color:#766046}
body[data-theme=kerst] .chat-message.outgoing :is(small,time){color:#e4d1aa}
body[data-theme=kerst] .post-office .message-input{background:#fffdf6;border:1px solid #bfa477;border-radius:2px;padding:16px}
body[data-theme=kerst] .post-office textarea{color:#48372a}
body[data-theme=kerst] .compose-bottom{border-top:1px solid #c5ac7d66}
body[data-theme=kerst] .post-office :is(.compose-bottom>span,form>small){color:#766046}
body[data-theme=kerst] .compose-bottom .button{background:linear-gradient(115deg,#e6d1a5,#d2b77e);color:#3d3020;border:1px solid #b89a66;border-radius:2px;font-weight:500;font-size:11px}

/* Sinterklaas: a friendly red postbox, rounded notes and a little miter. */
body[data-theme=sinterklaas] .post-office{--chat-focus:#ac3043;grid-template-columns:265px minmax(0,1fr);border:2px solid #f1d298;border-radius:24px;box-shadow:0 12px 28px #4b112725}
body[data-theme=sinterklaas] .post-office .post-sidebar{background:#ac3043;color:#fffaf0;padding:28px 22px;border-right:0}
body[data-theme=sinterklaas] .post-emblem{display:grid;width:64px;height:68px;background:#fff5dc;border:0;border-radius:22px 22px 18px 18px;transform:rotate(-5deg);animation:none;box-shadow:0 4px 0 #79233855}
body[data-theme=sinterklaas] .post-sidebar .eyebrow{color:#ffe4af;font-size:10px;letter-spacing:1.2px}
body[data-theme=sinterklaas] .post-sidebar h2{font:500 26px/1.25 DM,Arial,sans-serif;letter-spacing:-.6px;color:#fffaf0}
body[data-theme=sinterklaas] .post-sidebar h2 em{font-style:normal;color:#ffe4af}
body[data-theme=sinterklaas] .conversation-choice{background:#8d243844;border:2px solid #e5ae9c66;border-radius:16px;padding:14px 10px;color:#fffaf0}
body[data-theme=sinterklaas] .conversation-choice.selected{background:#fff5dc;border-color:#ffe4af;color:#7b2536;box-shadow:0 4px 0 #73203733}
body[data-theme=sinterklaas] .conversation-choice:hover{transform:translateY(-1px);border-color:#ffe4af}
body[data-theme=sinterklaas] .conversation-choice small{color:#fff0db}
body[data-theme=sinterklaas] .conversation-choice.selected small,body[data-theme=sinterklaas] .conversation-choice.selected>span:last-child{color:#7b2536}
body[data-theme=sinterklaas] .correspondent{background:#fff5dc;color:#8b293b;border:0;border-radius:12px;font:500 22px DM}
body[data-theme=sinterklaas] .conversation-choice.selected .correspondent{background:#f2cd84;color:#742437}
body[data-theme=sinterklaas] .post-aside-quote{font:14px/1.8 DM,Arial,sans-serif;color:#fff0db;margin:28px 4px 18px}
body[data-theme=sinterklaas] .post-privacy{color:#fff0db;border-color:#f5d6a977;font-size:10px}
body[data-theme=sinterklaas] .post-office .message-paper{background:#fffdf8;color:#742437;padding:28px}
body[data-theme=sinterklaas] .post-heading{border-bottom:2px dashed #e9c786;padding-bottom:20px}
body[data-theme=sinterklaas] .post-heading h2{font:500 29px/1.25 DM,Arial,sans-serif;letter-spacing:-.7px;color:#8c283b}
body[data-theme=sinterklaas] .post-heading :is(p,.eyebrow){color:#875141}
body[data-theme=sinterklaas] .postal-seal{display:flex;width:62px;height:68px;border:0;border-radius:20px;background:#fff0c9;transform:rotate(7deg);box-shadow:0 3px 0 #e7c887}
body[data-theme=sinterklaas] .post-date{color:#88552f;letter-spacing:1px;font-size:9px}
body[data-theme=sinterklaas] .post-date span{width:8px;height:8px;border-radius:50%;background:#b87940;box-shadow:11px 3px 0 #d3a16a}
body[data-theme=sinterklaas] .post-office .chat-message{padding:16px 18px;border:1px solid #e5c988;box-shadow:0 3px 0 #dfbc7829;border-radius:20px 20px 20px 5px}
body[data-theme=sinterklaas] .post-office .chat-message.reply{background:#fff0c9;color:#742437}
body[data-theme=sinterklaas] .post-office .chat-message.outgoing{background:#ac3043;color:#fffaf0;border-color:#ac3043;border-radius:20px 20px 5px 20px;box-shadow:0 3px 0 #7a243625}
body[data-theme=sinterklaas] .chat-message.reply :is(small,time){color:#86503c}
body[data-theme=sinterklaas] .chat-message.outgoing :is(small,time){color:#ffe6cf}
body[data-theme=sinterklaas] .post-office .message-input{background:#fff;border:2px solid #e4c383;border-radius:20px;padding:16px}
body[data-theme=sinterklaas] .post-office textarea{color:#742437}
body[data-theme=sinterklaas] .compose-bottom{border:0;padding-top:8px}
body[data-theme=sinterklaas] .post-office :is(.compose-bottom>span,form>small){color:#875141}
body[data-theme=sinterklaas] .compose-bottom .button{background:#ac3043;color:#fffaf0;border:0;border-radius:12px;font-size:12px;box-shadow:0 3px 0 #7a2436}

/* Vriendenuitje: pastel stationery, pill-shaped choices and soft chat bubbles. */
body[data-theme=vrienden] .post-office{--chat-focus:#73508e;grid-template-columns:265px minmax(0,1fr);border:1px solid #c5b2d2;border-radius:28px;box-shadow:0 7px 0 #e6daed}
body[data-theme=vrienden] .post-office .post-sidebar{background:#e9ddf1;color:#503260;padding:28px 22px;border-right:0}
body[data-theme=vrienden] .post-emblem{display:grid;width:66px;height:70px;background:#fff5db;border:0;border-radius:24px;transform:rotate(-6deg);animation:none;box-shadow:3px 4px 0 #d1bedf}
body[data-theme=vrienden] .post-sidebar .eyebrow{color:#654578;font-size:10px;letter-spacing:1.2px}
body[data-theme=vrienden] .post-sidebar h2{font:500 27px/1.25 DM,Arial,sans-serif;letter-spacing:-.8px;color:#503260}
body[data-theme=vrienden] .post-sidebar h2 em{font-style:normal;color:#836042}
body[data-theme=vrienden] .conversation-choice{background:#f8f0fc;border:1px solid #c9b3d8;border-radius:18px;color:#503260;padding:14px 10px}
body[data-theme=vrienden] .conversation-choice.selected{background:#67467f;color:#fff;border-color:#67467f;box-shadow:0 4px 0 #c9b3d8}
body[data-theme=vrienden] .conversation-choice:hover{transform:translateY(-1px);border-color:#67467f}
body[data-theme=vrienden] .conversation-choice small{color:#745c80}
body[data-theme=vrienden] .conversation-choice.selected small,body[data-theme=vrienden] .conversation-choice.selected>span:last-child{color:#f5eafa}
body[data-theme=vrienden] .correspondent{background:#f4d4c7;border:0;color:#7d443b;border-radius:12px;font:500 22px DM}
body[data-theme=vrienden] .post-aside-quote{font:14px/1.8 DM,Arial,sans-serif;color:#654578;margin:28px 4px 18px}
body[data-theme=vrienden] .post-privacy{font-size:10px;color:#654578;border-color:#bda4cf}
body[data-theme=vrienden] .post-office .message-paper{background:#fffdf8;padding:28px;color:#493658}
body[data-theme=vrienden] .post-heading{border-color:#dac9e4;padding-bottom:20px;position:relative}
body[data-theme=vrienden] .post-heading h2{font:500 29px/1.25 DM,Arial,sans-serif;letter-spacing:-1px;color:#503260}
body[data-theme=vrienden] .post-heading :is(p,.eyebrow){color:#745c80}
body[data-theme=vrienden] .postal-seal{display:flex;width:64px;height:70px;background:#f9dfd3;border:0;border-radius:24px 24px 28px 16px;transform:rotate(7deg)}
body[data-theme=vrienden] .post-date{color:#745c80;font-size:9px;letter-spacing:1px}
body[data-theme=vrienden] .post-date span{width:7px;height:13px;background:#d29a61;border-radius:2px;transform:rotate(-25deg)}
body[data-theme=vrienden] .post-date span:last-child{background:#a58aba;transform:rotate(25deg)}
body[data-theme=vrienden] .post-office .chat-message{padding:16px 20px;box-shadow:0 3px 0 #c4d6b933;border:1px solid #c3d4b4;border-radius:24px 24px 24px 7px}
body[data-theme=vrienden] .post-office .chat-message.reply{background:#e5efd9;color:#36533d}
body[data-theme=vrienden] .post-office .chat-message.outgoing{background:#eadef3;color:#503260;border-color:#cdb6dd;border-radius:24px 24px 7px 24px;box-shadow:0 3px 0 #cdb6dd33}
body[data-theme=vrienden] .chat-message.reply :is(small,time){color:#4c6750}
body[data-theme=vrienden] .chat-message.outgoing :is(small,time){color:#745082}
body[data-theme=vrienden] .post-office .message-input{background:#fff5ec;border:1px solid #d6b79d;border-radius:24px;padding:16px}
body[data-theme=vrienden] .post-office textarea{color:#503260}
body[data-theme=vrienden] .compose-bottom{border-color:#e5cdb9}
body[data-theme=vrienden] .post-office :is(.compose-bottom>span,form>small){color:#745c80}
body[data-theme=vrienden] .compose-bottom .button{background:#67467f;color:white;border:0;font-size:12px;border-radius:999px;box-shadow:none}

@media(max-width:900px) and (min-width:621px){
 body[data-theme] .post-office{grid-template-columns:225px minmax(0,1fr)}
 body[data-theme] .post-office .message-paper{padding:26px 22px}
 body[data-theme] .post-office .post-sidebar{padding:26px 16px}
}
@media(max-width:620px){
 body[data-theme] .post-office{grid-template-columns:minmax(0,1fr)}
 body[data-theme] .post-office .post-sidebar{padding:18px 16px;border-right:0;border-bottom:1px solid #bfa47c66}
 body[data-theme] .post-sidebar :is(h2,.post-emblem,.post-aside-quote,.post-privacy){display:none}
 body[data-theme] .post-sidebar>.eyebrow{margin-bottom:0;font-size:9px}
 body[data-theme] .conversation-choices{margin-top:12px;gap:8px}
 body[data-theme] .conversation-choice{flex:1;min-width:0;min-height:64px;padding:12px 9px;gap:7px}
 body[data-theme] .conversation-choice strong{font-size:10px}
 body[data-theme] .conversation-choice small{font-size:9px}
 body[data-theme] .post-office .message-paper{padding:22px 17px}
 body[data-theme] .post-office .post-heading h2{font-size:26px;line-height:1.2}
 body[data-theme=kerst] .post-office .post-heading h2{font-size:34px}
 body[data-theme=standaard] .post-office .post-heading h2{font-size:20px}
 body[data-theme] .post-office .post-heading p{font-size:11px}
 body[data-theme] .post-office .postal-seal{width:45px;height:50px;flex-shrink:0}
 .chat-mark svg{width:30px;height:36px}
 body[data-theme] .post-office .chat-message{max-width:94%;padding:14px 16px}
 body[data-theme] .post-office .chat-message p{font-size:13px}
 body[data-theme] .post-office textarea{font-size:16px}
 body[data-theme] .post-office .compose-bottom .button{min-height:44px;font-size:12px}
 body[data-theme] .post-office .message-input{padding:12px}
}
@media(max-width:360px){.post-office .correspondent{display:none}}
