/* Lemada — drie maskers */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; background: #f3f3f3; color: #222; }
.app { display: flex; flex-direction: column; height: 100vh; }
.main { flex: 1; display: flex; min-height: 0; }
.grow { flex: 1; }
textarea, input, button { font: inherit; }
.dim { opacity: .55; }

/* ---------- gedeeld: mysterie ---------- */
.ghost { animation: fade linear forwards; }
@keyframes fade {
  0% { opacity: 1; filter: none; }
  80% { opacity: .7; filter: blur(0); }
  92% { opacity: .35; filter: blur(1px); }
  94% { opacity: .8; }
  96% { opacity: .2; filter: blur(2px); }
  100% { opacity: 0; filter: blur(4px); }
}
.sys { font-style: italic; opacity: .6; letter-spacing: .02em; }
.panic #input { visibility: hidden; }

/* gedeeld: avatars */
.av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 600; flex: none; background: #888; }
.coauthors { display: inline-flex; gap: 0; margin-right: 10px; }
.coauthors .av { border: 2px solid currentColor; margin-left: -6px; }

/* gedeeld: menu */
.menu { position: fixed; z-index: 50; background: #fff; color: #222; border: 1px solid #ccc; box-shadow: 0 8px 24px rgba(0,0,0,.18); border-radius: 6px; padding: 4px; min-width: 260px; font-size: 12.5px; }
.menu .mh2 { padding: 6px 10px; color: #888; font-size: 11px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.menu .mi { padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: pre; font-family: Consolas, monospace; }
.menu .mi:hover { background: #eee; }

/* gedeeld: aanmelddialoog */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; z-index: 40; }
.dlg { width: 360px; background: #fff; color: #222; border: 1px solid #bbb; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.dlg-t { display: flex; justify-content: space-between; padding: 8px 12px; font-weight: 600; }
.dlg-b { padding: 4px 16px 16px; }
.dlg-b p { margin: 4px 0 12px; color: #555; }
.dlg label { display: block; font-size: 12px; margin: 8px 0 3px; }
.dlg input { width: 100%; padding: 5px 7px; border: 1px solid #999; border-radius: 2px; }
.dlg input:focus { outline: 2px solid var(--accent, #b7472a); outline-offset: -1px; border-color: transparent; }
.dlg .err { color: #c00; min-height: 18px; margin-top: 8px; font-size: 12px; }
.dlg-a { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.dlg-a a { margin-right: auto; color: var(--accent, #b7472a); font-size: 12px; }
.dlg button { padding: 4px 16px; border: 1px solid #999; background: #f4f4f4; border-radius: 2px; cursor: pointer; min-width: 76px; }
.dlg button[type=submit] { background: var(--accent, #b7472a); border-color: var(--accent, #b7472a); color: #fff; }

/* =====================================================================
   POWERPOINT
   ===================================================================== */
.t-ppt { --accent: #b7472a; }
.t-ppt .titlebar { height: 32px; background: #b7472a; color: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 12px; }
.t-ppt .tb-left, .t-ppt .tb-right { flex: 1; display: flex; align-items: center; gap: 8px; }
.t-ppt .tb-right { justify-content: flex-end; color: #fff; }
.t-ppt .tb-title { flex: 1; text-align: center; }
.t-ppt .autosave { display: inline-flex; align-items: center; gap: 4px; }
.t-ppt .toggle { width: 26px; height: 13px; border-radius: 7px; border: 1px solid #fff; position: relative; display: inline-block; }
.t-ppt .toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.t-ppt .share { background: #fff; color: #b7472a; padding: 2px 10px; border-radius: 3px; font-weight: 600; margin-right: 8px; }
.t-ppt .tabs { background: #b7472a; color: #fff; display: flex; gap: 2px; padding: 0 6px; font-size: 12.5px; }
.t-ppt .tab { padding: 5px 10px 6px; cursor: default; }
.t-ppt .tab.file { cursor: pointer; }
.t-ppt .tab.file:hover { background: #9e3c22; }
.t-ppt .tab.on { background: #f3f3f3; color: #b7472a; border-radius: 3px 3px 0 0; font-weight: 600; }
.t-ppt .ribbon { background: #f3f3f3; border-bottom: 1px solid #d6d6d6; display: flex; height: 92px; padding: 4px 4px 0; overflow: hidden; }
.t-ppt .group { display: flex; flex-direction: column; border-right: 1px solid #dadada; padding: 0 10px; }
.t-ppt .gbody { flex: 1; display: flex; gap: 10px; align-items: flex-start; }
.t-ppt .gname { font-size: 11px; color: #666; text-align: center; padding: 2px 0 3px; }
.t-ppt .big { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; padding: 3px 5px; border-radius: 3px; cursor: default; }
.t-ppt .big i { font-style: normal; font-size: 26px; line-height: 34px; }
.t-ppt #newchan { cursor: pointer; }
.t-ppt .big:hover, .t-ppt .small:hover { background: #e3e3e3; }
.t-ppt .small { font-size: 11.5px; line-height: 22px; padding: 0 4px; color: #333; white-space: nowrap; }
.t-ppt .fakeinput { display: inline-block; border: 1px solid #c8c8c8; background: #fff; padding: 0 6px; line-height: 18px; width: 120px; }
.t-ppt .fakeinput.s { width: 34px; }
.t-ppt .main { background: #e6e6e6; }
.t-ppt .thumbs { width: 190px; overflow-y: auto; padding: 10px 8px 10px 4px; background: #f0f0f0; border-right: 1px solid #d6d6d6; }
.t-ppt .thumb { display: flex; gap: 6px; margin-bottom: 12px; cursor: pointer; }
.t-ppt .thumb .num { width: 18px; text-align: right; font-size: 11px; color: #555; position: relative; }
.t-ppt .thumb .dot { position: absolute; left: 4px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: #b7472a; }
.t-ppt .mini { flex: 1; aspect-ratio: 16/9; background: #fff; border: 1px solid #c8c8c8; padding: 8px 10px; overflow: hidden; }
.t-ppt .thumb.on .mini { outline: 3px solid #d35230; outline-offset: -1px; border-color: transparent; }
.t-ppt .thumb:hover:not(.on) .mini { border-color: #999; }
.t-ppt .mini-t { font-size: 9px; font-weight: 600; margin-bottom: 6px; color: #333; }
.t-ppt .mini-l { height: 3px; background: #ccc; margin: 5px 0; width: 85%; border-radius: 2px; }
.t-ppt .mini-l:nth-child(3) { width: 65%; }
.t-ppt .mini-l.short { width: 40%; }
.t-ppt .stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.t-ppt .slide { flex: 1; margin: 22px auto 14px; width: min(92%, calc((100vh - 280px) * 16 / 9)); max-height: calc(100% - 36px); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); padding: 4% 6% 3%; display: flex; flex-direction: column; min-height: 0; }
.t-ppt .slide-title { font: 300 34px/1.15 "Segoe UI Light", "Segoe UI", sans-serif; color: #222; margin-bottom: 18px; }
.t-ppt .bullets { flex: 1; overflow-y: auto; margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.45; color: #333; }
.t-ppt .bullets li { margin-bottom: 8px; word-wrap: break-word; }
.t-ppt .bullets li::marker { color: #b7472a; }
.t-ppt .bullets li.sys { list-style: none; margin-left: -18px; font-size: 14px; color: #888; }
.t-ppt .bullets .t { color: #aaa; font-size: 11px; margin-left: 8px; }
.t-ppt .notes { height: 74px; background: #fff; border-top: 1px solid #d0d0d0; }
.t-ppt .notes textarea { width: 100%; height: 100%; border: 0; resize: none; padding: 10px 18px; outline: none; font-size: 13px; color: #333; }
.t-ppt .notes textarea::placeholder { color: #888; }
.t-ppt .status { height: 24px; background: #f3f3f3; border-top: 1px solid #d6d6d6; display: flex; gap: 18px; align-items: center; padding: 0 14px; font-size: 11.5px; color: #555; }
.t-ppt .coauthors { color: #b7472a; }
.t-ppt .bullets::-webkit-scrollbar, .t-ppt .thumbs::-webkit-scrollbar { width: 8px; }
.t-ppt .bullets::-webkit-scrollbar-thumb, .t-ppt .thumbs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.t-ppt .dlg-t { background: #fff; }

/* =====================================================================
   VS CODE
   ===================================================================== */
.t-code { --accent: #0078d4; background: #1e1e1e; color: #ccc; }
.t-code .titlebar { height: 32px; background: #3c3c3c; color: #ccc; display: flex; align-items: center; font-size: 12.5px; }
.t-code .tb-left { flex: 1; display: flex; overflow: hidden; }
.t-code .menuitem { padding: 0 8px; line-height: 32px; cursor: default; white-space: nowrap; }
.t-code #menu { cursor: pointer; padding: 0 12px; }
.t-code .menuitem:hover { background: #505050; }
.t-code .tb-search { flex: 0 1 420px; background: #2a2a2a; border: 1px solid #555; border-radius: 6px; text-align: center; font-size: 12px; line-height: 22px; color: #999; }
.t-code .tb-right { flex: 1; text-align: right; padding-right: 12px; color: #999; }
.t-code .activity { width: 48px; background: #333; display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 8px; font-size: 20px; color: #858585; }
.t-code .activity span { width: 48px; text-align: center; line-height: 40px; }
.t-code .activity .on { color: #fff; border-left: 2px solid #fff; }
.t-code .side { width: 240px; background: #252526; overflow-y: auto; font-size: 13px; }
.t-code .side-h { padding: 10px 12px 8px 20px; font-size: 11px; letter-spacing: .04em; display: flex; justify-content: space-between; color: #bbb; }
.t-code #newchan { cursor: pointer; font-size: 14px; }
.t-code .tree-h { font-size: 11px; font-weight: 700; padding: 3px 8px; margin-top: 4px; color: #ccc; }
.t-code .tree-d { padding: 1px 0 1px 18px; color: #ccc; white-space: pre; }
.t-code .file { padding: 1px 10px 1px 34px; cursor: pointer; display: flex; align-items: center; white-space: pre; color: #ccc; }
.t-code .file:hover { background: #2a2d2e; }
.t-code .file.on { background: #37373d; outline: 1px solid #0078d4; outline-offset: -1px; }
.t-code .file .ts { color: #3178c6; font-size: 10px; font-weight: 700; }
.t-code .file .m { margin-left: auto; color: #e2c08d; font-size: 11px; }
.t-code .pres { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.t-code .editor { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #1e1e1e; }
.t-code .etabs { display: flex; background: #252526; height: 35px; }
.t-code .etab { padding: 0 14px; line-height: 35px; background: #2d2d2d; color: #969696; border-right: 1px solid #252526; white-space: pre; font-size: 13px; }
.t-code .etab.on { background: #1e1e1e; color: #fff; border-top: 1px solid #0078d4; }
.t-code .crumbs { padding: 2px 16px; color: #a0a0a0; font-size: 12.5px; }
.t-code .code { flex: 1; overflow-y: auto; font: 14px/20px Consolas, "Cascadia Code", "Courier New", monospace; counter-reset: ln; padding: 2px 0 20px; }
.t-code .ln { counter-increment: ln; white-space: pre-wrap; word-break: break-word; padding-left: 70px; position: relative; color: #d4d4d4; min-height: 20px; }
.t-code .ln::before { content: counter(ln); position: absolute; left: 0; width: 50px; text-align: right; color: #6e7681; }
.t-code .ln:hover { background: #2a2d2e; }
.t-code .kw { color: #569cd6; }
.t-code .fn { color: #dcdcaa; }
.t-code .str { color: #ce9178; }
.t-code .cm { color: #6a9955; font-style: normal; }
.t-code .var { color: #9cdcfe; }
.t-code .panel { height: 180px; border-top: 1px solid #414141; display: flex; flex-direction: column; }
.t-code .ptabs { display: flex; gap: 20px; padding: 6px 20px; font-size: 11px; color: #969696; }
.t-code .ptabs .on { color: #e7e7e7; border-bottom: 1px solid #e7e7e7; }
.t-code .term { flex: 1; padding: 6px 20px; font: 14px Consolas, "Cascadia Code", monospace; display: flex; align-items: flex-start; }
.t-code .prompt { color: #ccc; white-space: pre; }
.t-code .term input { flex: 1; background: transparent; border: 0; color: #ccc; outline: none; font: inherit; caret-color: #fff; padding: 0; }
.t-code .status { height: 22px; background: #007acc; color: #fff; display: flex; gap: 14px; align-items: center; padding: 0 10px; font-size: 12px; }
.t-code .code::-webkit-scrollbar { width: 14px; }
.t-code .code::-webkit-scrollbar-thumb { background: rgba(121,121,121,.4); }
.t-code .overlay { background: rgba(0,0,0,.4); }
.t-code .dlg { background: #252526; color: #ccc; border-color: #454545; }
.t-code .dlg-t { background: #3c3c3c; }
.t-code .dlg-b p { color: #aaa; }
.t-code .dlg input { background: #3c3c3c; color: #ccc; border-color: #3c3c3c; }
.t-code .dlg button { background: #3a3d41; color: #ccc; border-color: #3a3d41; }
.t-code .dlg-a a { color: #3794ff; }
.t-code .err { color: #f48771; }

/* =====================================================================
   OUTLOOK
   ===================================================================== */
.t-outlook { --accent: #0f6cbd; background: #f5f5f5; }
.t-outlook .topbar { height: 48px; background: #0f6cbd; color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.t-outlook .waffle { cursor: pointer; font-size: 14px; letter-spacing: -3px; line-height: 10px; width: 24px; }
.t-outlook .brand { font-weight: 600; font-size: 15px; }
.t-outlook .search { margin-left: 120px; width: 460px; background: #fff; color: #666; border-radius: 4px; padding: 5px 12px; }
.t-outlook .coauthors { color: #0f6cbd; }
.t-outlook .ribbon { height: 44px; background: #fff; margin: 8px 8px 0; border-radius: 8px; display: flex; align-items: center; gap: 4px; padding: 0 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-size: 13px; }
.t-outlook .ribbon span { padding: 5px 9px; border-radius: 4px; white-space: nowrap; }
.t-outlook .ribbon span:hover { background: #f0f0f0; }
.t-outlook .ribbon .primary { background: #0f6cbd; color: #fff; cursor: pointer; }
.t-outlook .ribbon .primary:hover { background: #115ea3; }
.t-outlook .main { gap: 8px; padding: 8px; }
.t-outlook .folders { width: 220px; overflow-y: auto; font-size: 13.5px; }
.t-outlook .fh { font-weight: 600; padding: 8px 10px 4px; }
.t-outlook .folder { padding: 6px 10px 6px 26px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; }
.t-outlook .folder:hover { background: #e8e8e8; }
.t-outlook .folder.on { background: #d0e3f5; font-weight: 600; }
.t-outlook .folder.bold { font-weight: 600; }
.t-outlook .folder .cnt { margin-left: auto; color: #0f6cbd; font-weight: 600; }
.t-outlook .list { width: 340px; background: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.t-outlook .lh { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; font-size: 15px; }
.t-outlook .lh span { font-size: 12.5px; color: #666; }
.t-outlook #mlist { flex: 1; overflow-y: auto; }
.t-outlook .item { padding: 9px 16px 9px 20px; border-bottom: 1px solid #f0f0f0; border-left: 3px solid transparent; }
.t-outlook .item:first-child { border-left-color: #0f6cbd; background: #f5f9fd; }
.t-outlook .item .ir { display: flex; justify-content: space-between; }
.t-outlook .item .t { font-size: 12px; color: #666; }
.t-outlook .item .is { color: #0f6cbd; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-outlook .item .ip { color: #666; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-outlook .reading { flex: 1; background: #fff; border-radius: 8px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.t-outlook .subject { font-size: 18px; font-weight: 600; padding: 16px 22px 10px; }
.t-outlook .thread { flex: 1; overflow-y: auto; padding: 0 22px; }
.t-outlook .mail { border: 1px solid #e6e6e6; border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; }
.t-outlook .mail.sys { border-style: dashed; color: #777; text-align: center; padding: 6px; }
.t-outlook .mh { display: flex; gap: 10px; align-items: center; }
.t-outlook .mh .av { width: 32px; height: 32px; font-size: 11px; }
.t-outlook .mh .to { font-size: 12px; color: #666; }
.t-outlook .mh .t { margin-left: auto; font-size: 12px; color: #666; }
.t-outlook .mb { padding: 8px 0 2px 42px; white-space: pre-wrap; word-wrap: break-word; }
.t-outlook .reply { margin: 10px 22px 16px; border: 1px solid #d1d1d1; border-radius: 6px; }
.t-outlook .reply-h { padding: 6px 12px; font-size: 12px; color: #0f6cbd; border-bottom: 1px solid #eee; }
.t-outlook .reply textarea { width: 100%; border: 0; resize: none; padding: 10px 12px; outline: none; border-radius: 0 0 6px 6px; }
.t-outlook .dlg { border-radius: 8px; }

.typing { font-style: italic; opacity: .8; }
.reply-h .typing { margin-left: 12px; color: #666; }

/* =====================================================================
   WORD
   ===================================================================== */
.t-word { --accent: #185abd; }
.t-word .titlebar { height: 32px; background: #185abd; color: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 12px; }
.t-word .tb-left, .t-word .tb-right { flex: 1; display: flex; align-items: center; gap: 8px; }
.t-word .tb-right { justify-content: flex-end; }
.t-word .tb-title { flex: 1; text-align: center; white-space: nowrap; }
.t-word .autosave { display: inline-flex; align-items: center; gap: 4px; }
.t-word .toggle { width: 26px; height: 13px; border-radius: 7px; border: 1px solid #fff; position: relative; display: inline-block; }
.t-word .toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.t-word .share { background: #fff; color: #185abd; padding: 2px 10px; border-radius: 3px; font-weight: 600; margin-right: 8px; }
.t-word .coauthors { color: #185abd; }
.t-word .tabs { background: #185abd; color: #fff; display: flex; gap: 2px; padding: 0 6px; font-size: 12.5px; }
.t-word .tab { padding: 5px 10px 6px; cursor: default; }
.t-word .tab.file { cursor: pointer; }
.t-word .tab.file:hover { background: #124a9c; }
.t-word .tab.on { background: #f3f3f3; color: #185abd; border-radius: 3px 3px 0 0; font-weight: 600; }
.t-word .ribbon { background: #f3f3f3; border-bottom: 1px solid #d6d6d6; display: flex; height: 92px; padding: 4px 4px 0; overflow: hidden; }
.t-word .group { display: flex; flex-direction: column; border-right: 1px solid #dadada; padding: 0 10px; }
.t-word .gbody { flex: 1; display: flex; gap: 10px; align-items: flex-start; }
.t-word .gname { font-size: 11px; color: #666; text-align: center; padding: 2px 0 3px; }
.t-word .big { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; padding: 3px 5px; border-radius: 3px; }
.t-word .big i { font-style: normal; font-size: 26px; line-height: 34px; }
.t-word .small { font-size: 11.5px; line-height: 22px; padding: 0 4px; color: #333; white-space: nowrap; }
.t-word #newchan { cursor: pointer; }
.t-word #newchan:hover { text-decoration: underline; }
.t-word .fakeinput { display: inline-block; border: 1px solid #c8c8c8; background: #fff; padding: 0 6px; line-height: 18px; width: 120px; }
.t-word .fakeinput.s { width: 34px; }
.t-word .styles { display: flex; background: #fff; border: 1px solid #d6d6d6; height: 62px; }
.t-word .sty { width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; border-right: 1px solid #eee; color: #222; }
.t-word .sty small { font-size: 10px; color: #555; margin-top: 2px; }
.t-word .sty.h1 { color: #185abd; font-size: 17px; }
.t-word .sty.au { font-weight: 700; font-size: 12px; }
.t-word .sty.mi { background: #eef3fb; }
.t-word .sty.sy { color: #888; font-style: italic; }
.t-word .sty:first-child { outline: 2px solid #185abd; outline-offset: -2px; }
.t-word .nav { width: 250px; background: #fff; border-right: 1px solid #d6d6d6; overflow-y: auto; font-size: 13px; }
.t-word .nav-h { display: flex; justify-content: space-between; padding: 12px 14px 8px; font-size: 15px; }
.t-word .nav-s { margin: 0 14px 10px; border: 1px solid #c8c8c8; padding: 4px 8px; color: #777; font-size: 12px; }
.t-word .nav-t { display: flex; gap: 16px; padding: 0 14px 8px; font-size: 12.5px; color: #555; }
.t-word .nav-t b { color: #185abd; border-bottom: 2px solid #185abd; }
.t-word .toc { padding: 5px 14px 5px 22px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; border-left: 3px solid transparent; }
.t-word .toc:hover { background: #f0f0f0; }
.t-word .toc.on { background: #dfe9f8; border-left-color: #185abd; }
.t-word .toc .un { color: #185abd; font-family: Consolas, monospace; font-size: 11.5px; white-space: nowrap; }
.t-word .canvas { flex: 1; overflow-y: auto; background: #e8e8e8; padding: 24px 0 40px; }
.t-word .page { width: min(816px, 92%); min-height: calc(100% - 10px); margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); padding: 40px 96px 60px; font: 15px/1.5 Aptos, Calibri, "Segoe UI", sans-serif; color: #222; display: flex; flex-direction: column; }
.t-word .hdr { font-size: 12px; color: #888; border-bottom: 1px dashed transparent; padding-bottom: 18px; font-family: Consolas, monospace; }
.t-word .page h1 { font-size: 26px; font-weight: 400; color: #0f4799; margin: 6px 0 6px; }
.t-word .page h2 { font-size: 17px; font-weight: 400; color: #185abd; margin: 20px 0 6px; text-transform: capitalize; }
.t-word #msgs { flex: 1; }
.t-word .p-author { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #333; }
.t-word .p-author span { font-weight: 400; color: #999; }
.t-word .p-text { margin: 0 0 2px; white-space: pre-wrap; word-wrap: break-word; }
.t-word .p-mine { margin-left: 36px; background: #eef3fb; padding: 2px 10px 4px; border-left: 2px solid #9db8e6; }
.t-word .p-mine + .p-mine { margin-top: 0; }
.t-word .p-mine .p-author { margin-top: 4px; }
.t-word .p-sys { color: #888; font-style: italic; margin: 6px 0; font-size: 13.5px; }
.t-word mark { background: #ffff00; color: inherit; padding: 0 1px; }
.t-word #input { border: 0; outline: none; resize: none; font: inherit; padding: 6px 0; width: 100%; color: #222; field-sizing: content; min-height: 30px; }
.t-word #input::placeholder { color: #bbb; }
.t-word .ftr { margin-top: 30px; font-size: 12px; color: #888; font-style: italic; min-height: 18px; }
.t-word .status { height: 24px; background: #f3f3f3; border-top: 1px solid #d6d6d6; display: flex; gap: 18px; align-items: center; padding: 0 14px; font-size: 11.5px; color: #555; }
.t-word .canvas::-webkit-scrollbar { width: 12px; }
.t-word .canvas::-webkit-scrollbar-thumb { background: #c4c4c4; border: 3px solid #e8e8e8; border-radius: 6px; }

/* =====================================================================
   MESSENGER (klassiek)
   ===================================================================== */
.t-msn { --accent: #2b67c3; font: 12px/1.4 Tahoma, "Segoe UI", Verdana, sans-serif; }
.t-msn .desk { position: fixed; inset: 0; overflow: hidden; user-select: none;
  background: radial-gradient(ellipse 120% 55% at 30% 105%, #5fae3a 0 45%, transparent 46%),
              radial-gradient(ellipse 90% 40% at 85% 108%, #4f9a2f 0 50%, transparent 51%),
              radial-gradient(ellipse 30% 8% at 20% 22%, rgba(255,255,255,.75), transparent),
              radial-gradient(ellipse 25% 6% at 70% 15%, rgba(255,255,255,.6), transparent),
              linear-gradient(#2f6fd6, #6fb2ef 60%, #a9d6f5); }
.t-msn .icons { position: absolute; right: 18px; top: 16px; display: flex; flex-direction: column; gap: 18px; }
.t-msn .icon { width: 84px; text-align: center; color: #fff; text-shadow: 1px 1px 2px #000; font-size: 11px; }
.t-msn .icon span { display: block; font-size: 32px; line-height: 40px; }

/* gedeeld vensterframe */
.t-msn .contacts, .t-msn .win { position: absolute; background: #eef4fc; border: 1px solid #5a7fb5; border-radius: 8px 8px 4px 4px; box-shadow: 0 6px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.t-msn .wt { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; cursor: move;
  background: linear-gradient(#e9f1fb, #c4d8f2 55%, #b3cdee); border-bottom: 1px solid #94b2dc; color: #1c3a6b; font-weight: bold; }
.t-msn .win:not(.active) .wt { background: linear-gradient(#f3f6fa, #dde5ef); color: #6b7d96; }
.t-msn .wtitle { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-msn .wbtns { display: flex; gap: 2px; }
.t-msn .wbtn { width: 24px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #8aa6cf; border-radius: 3px; background: linear-gradient(#fff, #dbe6f4); font-size: 11px; cursor: pointer; color: #345; font-weight: normal; }
.t-msn .wbtn.x { background: linear-gradient(#f5b1a3, #d9573a); border-color: #a2402a; color: #fff; }
.t-msn .wbtn:hover { filter: brightness(1.08); }

/* status-poppetjes */
.t-msn .buddy { display: inline-block; width: 11px; height: 13px; border-radius: 6px 6px 3px 3px; flex: none; position: relative; vertical-align: -2px; }
.t-msn .buddy::before { content: ""; position: absolute; left: 2px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: inherit; filter: brightness(1.15); }
.t-msn .buddy.on { background: #3fb93a; }
.t-msn .buddy.off { background: #b5b5b5; }
.t-msn .buddy.room { background: #4a86d8; }

/* contactenlijst */
.t-msn .contacts { width: 280px; height: min(600px, calc(100vh - 80px)); }
.t-msn .contacts .me { display: flex; gap: 10px; padding: 10px; background: linear-gradient(#ffffff, #e3edf9); border-bottom: 1px solid #c5d6ee; }
.t-msn .dp { width: 52px; height: 52px; padding: 3px; border: 1px solid #9ab5da; border-radius: 6px; background: #fff; flex: none; box-shadow: inset 0 0 0 2px #e8f0fa; }
.t-msn .dp span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 3px; color: #fff; font-size: 18px; font-weight: bold; background: #6a8fc7; }
.t-msn .dp .room { background: linear-gradient(#78a7e6, #3c6fbf); font-size: 26px; }
.t-msn .myname { font-weight: bold; font-size: 13px; color: #1c3a6b; }
.t-msn .myname span { font-weight: normal; color: #5a6f8f; font-size: 11px; }
.t-msn .pm { color: #8a9ab3; font-style: italic; margin: 2px 0; }
.t-msn .mailline { color: #3b63a3; font-size: 11px; }
.t-msn .csearch { display: flex; justify-content: space-between; align-items: center; margin: 6px 8px; padding: 3px 6px; background: #fff; border: 1px solid #a9bfdf; color: #8a9ab3; }
.t-msn #newchan { cursor: pointer; color: #2b67c3; }
.t-msn .clist { flex: 1; overflow-y: auto; background: #fff; margin: 0 8px; border: 1px solid #c5d6ee; padding: 4px 0; }
.t-msn .gh { font-weight: bold; color: #1c3a6b; padding: 4px 8px 2px; }
.t-msn .contact { padding: 2px 8px 2px 20px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.t-msn .contact:hover { background: #e5effb; border-color: #b9d0ef; border-radius: 3px; }
.t-msn .contact.unread { font-weight: bold; }
.t-msn .contact .cnt { color: #c25a00; }
.t-msn .cfoot { padding: 6px 10px 8px; font-size: 10.5px; color: #7f8fa8; }

/* gespreksvenster */
.t-msn .win { width: 500px; height: 430px; resize: both; min-width: 380px; min-height: 320px; }
.t-msn .win.min { display: none; }
.t-msn .wtool { display: flex; gap: 2px; padding: 4px 6px; background: linear-gradient(#f7fafe, #dfe9f6); border-bottom: 1px solid #c5d6ee; overflow: hidden; }
.t-msn .wtool span { padding: 2px 6px; border-radius: 3px; white-space: nowrap; color: #234; font-size: 11px; }
.t-msn .wtool span:hover { background: #fff; box-shadow: inset 0 0 0 1px #a9c1e2; }
.t-msn .wbody { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; }
.t-msn .wleft { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.t-msn .wto { padding: 3px 6px; background: #fff; border: 1px solid #c5d6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-msn .wto .mail { color: #8a9ab3; }
.t-msn .whist { flex: 1; overflow-y: auto; background: #fff; border: 1px solid #a9bfdf; padding: 6px 8px; user-select: text; font: 13px/1.35 "Segoe UI", Tahoma, sans-serif; }
.t-msn .msay { color: #6d6d6d; margin-top: 6px; }
.t-msn .msay span { color: #9a9a9a; font-size: 11px; }
.t-msn .mline { padding-left: 12px; color: #111; white-space: pre-wrap; word-wrap: break-word; }
.t-msn .msys { color: #7a8aa0; margin: 6px 0; font-size: 12px; border-top: 1px dotted #d0dbea; padding-top: 4px; }
.t-msn .msys.nudged { color: #c25a00; font-weight: bold; }
.t-msn .wfmt { display: flex; gap: 4px; padding: 2px 0; }
.t-msn .wfmt span { padding: 1px 6px; border-radius: 3px; cursor: pointer; color: #234; }
.t-msn .wfmt span:hover { background: #fff; box-shadow: inset 0 0 0 1px #a9c1e2; }
.t-msn .wfmt .nudge { margin-left: auto; font-weight: bold; color: #2b67c3; }
.t-msn .wcompose { display: flex; gap: 6px; height: 64px; }
.t-msn .wtext { flex: 1; resize: none; border: 1px solid #a9bfdf; padding: 4px 6px; outline: none; font: 13px "Segoe UI", Tahoma, sans-serif; user-select: text; }
.t-msn .wtext:focus { border-color: #5a8ad0; }
.t-msn .wcompose button { width: 76px; border: 1px solid #7f9fcf; border-radius: 3px; background: linear-gradient(#fff, #d7e4f5); cursor: pointer; font: inherit; color: #1c3a6b; }
.t-msn .wcompose button:hover { background: linear-gradient(#fff, #c7daf3); }
.t-msn .wright { width: 100px; display: flex; flex-direction: column; justify-content: space-between; }
.t-msn .wright .dp { width: 96px; height: 96px; }
.t-msn .wright .dp span { font-size: 30px; }
.t-msn .wstatus { height: 20px; flex: none; padding: 0 8px; font-size: 11px; color: #5a6f8f; border-top: 1px solid #c5d6ee; background: #e3ecf8; line-height: 19px; white-space: nowrap; overflow: hidden; }

/* nudge */
.t-msn .win.shake { animation: shake .6s linear; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-14px, 6px); } 20% { transform: translate(12px, -8px); } 30% { transform: translate(-12px, -6px); }
  40% { transform: translate(14px, 8px); } 50% { transform: translate(-10px, 4px); } 60% { transform: translate(10px, -6px); }
  70% { transform: translate(-8px, -4px); } 80% { transform: translate(6px, 4px); } 90% { transform: translate(-4px, 2px); }
}

/* taakbalk */
.t-msn .taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; display: flex; align-items: center; gap: 4px; z-index: 100000;
  background: linear-gradient(#3b78e0, #245edb 15%, #1f53c6 85%, #1a43a8); border-top: 1px solid #0f2f8a; }
.t-msn .start { height: 32px; padding: 0 18px 0 12px; display: flex; align-items: center; color: #fff; font: italic bold 16px Tahoma, sans-serif; text-shadow: 1px 1px 1px #222;
  background: linear-gradient(#58b44f, #3a9a32 50%, #2f8a2a); border-radius: 0 12px 12px 0; margin-right: 6px; }
.t-msn #tasks { display: flex; gap: 3px; overflow: hidden; }
.t-msn .task { height: 24px; min-width: 120px; max-width: 170px; padding: 0 8px; display: flex; align-items: center; gap: 5px; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden;
  background: linear-gradient(#4f8ff0, #3a78e2); border: 1px solid #1c46a8; border-radius: 3px; }
.t-msn .task.on { background: linear-gradient(#1e4fb8, #2a62d0); box-shadow: inset 1px 1px 3px rgba(0,0,0,.4); }
.t-msn .task.flash { animation: flash 1s steps(1) infinite; }
@keyframes flash { 0%, 100% { background: linear-gradient(#ffb64d, #f08a00); color: #222; } 50% { background: linear-gradient(#4f8ff0, #3a78e2); color: #fff; } }
.t-msn .tray { height: 32px; display: flex; align-items: center; padding: 0 14px; color: #fff; background: linear-gradient(#18a0f0, #0d8ad9); border-left: 1px solid #0b5fa8; font-size: 11.5px; }

/* "zojuist aangemeld"-melding */
.t-msn #toasts { position: absolute; right: 10px; bottom: 40px; display: flex; flex-direction: column; gap: 8px; z-index: 100001; }
.t-msn .toast { width: 220px; background: linear-gradient(#fff, #dde9f8); border: 1px solid #5a7fb5; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.3); animation: slideup .4s ease-out; transition: opacity .6s, transform .6s; }
.t-msn .toast.out { opacity: 0; transform: translateY(20px); }
.t-msn .toast-t { display: flex; justify-content: space-between; padding: 3px 8px; font-weight: bold; color: #1c3a6b; background: linear-gradient(#e9f1fb, #c4d8f2); border-radius: 6px 6px 0 0; font-size: 11px; }
.t-msn .toast-b { padding: 12px 10px 16px; color: #234; display: flex; gap: 8px; align-items: center; }
@keyframes slideup { from { transform: translateY(60px); opacity: 0; } }

/* paniek: alles weg, alleen het bureaublad blijft */
.t-msn.panic .contacts, .t-msn.panic #wins, .t-msn.panic #toasts, .t-msn.panic #tasks { display: none; }
.t-msn .overlay { background: rgba(0,0,40,.25); }
.t-msn .dlg { border-radius: 8px; border-color: #5a7fb5; }
.t-msn .dlg-t { background: linear-gradient(#e9f1fb, #c4d8f2); color: #1c3a6b; border-radius: 8px 8px 0 0; }

/* ---------- beheerpaneel ("Opties") ---------- */
.overlay.admin { z-index: 200000; }
.adm-dlg { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; font: 12.5px/1.4 "Segoe UI", system-ui, sans-serif; }
.adm-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid #ccc; }
.adm-tab { padding: 6px 14px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; margin-bottom: -1px; color: #555; }
.adm-tab.on { background: #fff; border-color: #ccc; color: #111; font-weight: 600; }
.adm-body { flex: 1; overflow-y: auto; padding: 10px 12px; background: #fff; }
.adm { width: 100%; border-collapse: collapse; }
.adm th { text-align: left; font-weight: 600; color: #555; border-bottom: 1px solid #ddd; padding: 5px 6px; font-size: 11.5px; }
.adm td { padding: 5px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.adm td small { color: #888; }
.adm td.txt { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm td.acts { text-align: right; white-space: nowrap; }
.adm tr.banned td { color: #999; text-decoration: line-through; }
.adm tr.banned td.acts { text-decoration: none; }
.adm button { padding: 2px 10px; margin-left: 4px; border: 1px solid #aaa; background: #f6f6f6; border-radius: 3px; cursor: pointer; font: inherit; min-width: 0; color: #222; }
.adm button:hover { background: #eaeaea; }
.adm button.danger { color: #b3261e; border-color: #d9a5a1; }
.adm button.danger:hover { background: #fbeceb; }
.adm-note { color: #777; margin: 6px 0; }
.adm-foot { padding: 8px 12px 10px; margin: 0; }
.adm-foot .adm-note { margin-right: auto; }
.t-code .adm-tabs { border-color: #454545; }
.t-code .adm-tab { color: #999; }
.t-code .adm-tab.on { background: #1e1e1e; border-color: #454545; color: #eee; }
.t-code .adm-body { background: #1e1e1e; }
.t-code .adm th { color: #aaa; border-color: #3c3c3c; }
.t-code .adm td { border-color: #2a2a2a; color: #ccc; }
.t-code .adm button { background: #3a3d41; color: #ddd; border-color: #555; }
.t-code .adm button.danger { color: #f48771; }

/* zichtbaar beheerknopje voor admins */
.opts { cursor: pointer; white-space: nowrap; }
.t-msn .wbtn.opts { width: auto; padding: 0 6px; }
.t-outlook .opts { font-size: 13px; }