:root{color-scheme:dark;--bg:#151116;--panel:#242029;--panel2:#302b39;--tile:#4e475b;--line:#4c4455;--text:#f7f0f7;--muted:#b4acbd;--pink:#ff5289;--blue:#a6c8ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -10%,#31204a 0,transparent 36%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.48}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:var(--blue)}.shell{min-height:100vh;display:flex;max-width:1550px;margin:auto}.sidebar{width:248px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #37303c;background:#18141d;padding:32px 18px;position:sticky;height:100vh;top:0}.brand{display:flex;gap:12px;align-items:center;margin-bottom:54px}.brand strong{font-size:24px;letter-spacing:-1px}.brand strong span{color:#f78dc6}.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}.brand-symbol{font-size:31px}.nav{display:flex;width:100%;align-items:center;gap:16px;background:none;color:var(--muted);border:0;border-radius:15px;margin-bottom:8px;padding:15px 19px;text-align:left;font-size:22px}.nav span{font-size:15px}.nav:hover,.nav.active{background:var(--tile);color:var(--text)}.sidefoot{margin-top:auto;color:var(--muted);font-size:12px;line-height:2.2}.main{padding:33px clamp(20px,4vw,65px);flex:1;min-width:0;max-width:1200px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#b9a0ca;text-transform:uppercase}h1{font-size:clamp(30px,3vw,43px);line-height:1.1;margin:7px 0;letter-spacing:-1px}h1 span{font-size:.8em}h2{font-size:clamp(21px,2.1vw,27px);margin:0 0 10px}h3{font-size:19px;margin:0 0 10px}p{color:var(--muted);margin:6px 0 15px}.fine{font-size:13px;color:var(--muted)}.topright{display:flex;align-items:center;gap:12px}.pill{border:1px solid var(--line);padding:9px 15px;border-radius:25px;color:var(--muted);font-size:13px;white-space:nowrap}.pill.online{color:#91ebbd;border-color:#3d7864}.panel{border:1px solid #39333e;background:linear-gradient(145deg,#26212a,#211d26);border-radius:23px;padding:26px;margin-bottom:18px}.setup{max-width:600px;margin:55px auto;text-align:center;padding:42px}.setupIcon{font-size:60px;margin-bottom:12px}.setup label,.panel label{display:block;text-align:left;color:var(--muted);font-size:13px;margin:10px 0 6px}.setup input{margin-bottom:12px;text-align:center;font-size:20px;text-transform:none}input:not([type=color]):not([type=range]):not([type=file]),textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:#19151d;color:var(--text);padding:13px 16px;outline:none;resize:vertical}input:focus,textarea:focus{border-color:#d67db1;box-shadow:0 0 0 2px #d67db133}.primary,.ghost,.danger{border:0;border-radius:14px;padding:12px 19px;font-weight:650}.primary{background:#d89bf1;color:#1d1423}.ghost{background:var(--tile);color:var(--text)}.danger{background:#672d42;color:#ffe5eb}.link{border:0;background:none;color:var(--blue)}.helpSteps{background:#332a3d;padding:17px;text-align:left;border-radius:14px;color:#e2d7ec;margin:17px 0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}.partner{background:linear-gradient(120deg,#32223c,#22202b)}.partner h2{margin-top:18px}.bigHeart{display:block;margin:15px auto;font-size:53px;width:125px;height:125px;border:0;border-radius:36px;background:#133a60;touch-action:none;user-select:none;transition:transform .15s}.bigHeart:active,.bigHeart.holding{transform:scale(1.14);background:#6d2846}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.chip{font-size:12px;padding:6px 10px;border-radius:15px;background:#493755;color:#e6c1f6}.actions{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}.emojiRow{display:flex;gap:12px;overflow-x:auto;padding:5px 0}.emojiRow.wrap{flex-wrap:wrap;overflow:visible}.emojiRow button{border:0;background:var(--tile);border-radius:18px;min-width:86px;height:88px;font-size:30px;color:white}.emojiRow button:hover,.anim:hover{background:#685577}.emojiRow small{display:block;font-size:12px;margin-top:2px}.sendGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.drawTools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.drawTools label{margin:0}.drawTools input[type=range]{max-width:100px}#drawCanvas{display:block;width:100%;height:auto;background:#f9f6fb;border-radius:12px;touch-action:none;cursor:crosshair;margin-top:10px}#chatBox{margin-top:19px}.chatStreams{display:grid;grid-template-columns:1fr 1fr;gap:18px}.remoteText{min-height:100px;padding:15px;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:13px;background:var(--panel2)}.invite{background:#403046;padding:15px;border-radius:14px;margin-bottom:10px}.animGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:11px;margin-top:15px}.anim{border:1px solid var(--line);background:#18385a;padding:10px;border-radius:14px;color:white}.anim img{width:70px;height:70px;object-fit:contain}.anim span{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:11px}.fileLabel{display:inline-flex!important;background:var(--tile);padding:12px;border-radius:13px;color:white!important;cursor:pointer}.fileLabel input{display:none}.historyList{display:grid;gap:12px}.historyItem{background:var(--panel);border-radius:16px;padding:15px;display:flex;gap:12px;align-items:center}.historyItem .icon{font-size:25px}.historyItem .date{color:var(--muted);font-size:12px}.deviceList{display:grid;gap:10px}.deviceRow{padding:11px 0;border-bottom:1px solid var(--line)}footer{color:var(--muted);text-align:center;margin:35px 0;font-size:12px}#toast{position:fixed;right:20px;bottom:20px;z-index:40;background:#59426d;color:white;max-width:380px;box-shadow:0 9px 30px #0007;padding:15px 20px;border-radius:14px;display:none}#toast.visible{display:block}@media(max-width:820px){.sidebar{width:70px;padding:22px 8px}.brand{justify-content:center}.brand strong,.brand small,.nav span,.sidefoot{display:none}.nav{justify-content:center;padding:10px}.main{padding:24px 18px}.stats,.sendGrid,.chatStreams{grid-template-columns:1fr}}@media(max-width:560px){.sidebar{width:100%;height:68px;position:fixed;top:auto;bottom:0;z-index:10;display:flex;flex-direction:row;align-items:center;padding:0;background:#242029}.sidebar .brand,.sidebar .sidefoot{display:none}.sidebar nav{display:flex;width:100%;justify-content:space-around}.nav{width:auto;margin:0}.main{padding:22px 12px 88px}.panel{padding:18px;border-radius:18px}.emojiRow button{min-width:73px;height:76px}header{align-items:flex-start}.pill{font-size:11px;padding:8px}.setup{margin:15px auto}}

.catalogFilters{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}.catalogFilters select{background:#19151d;color:var(--text);border:1px solid var(--line);border-radius:13px;padding:12px}.emojiRow button img{display:block;margin:0 auto;width:46px;height:46px;object-fit:contain}.anim img{display:block;margin:auto}.animGrid .anim{min-height:104px}@media(max-width:600px){.catalogFilters{grid-template-columns:1fr}}


/* 0.1.1: Animierte Mediendateien statt technischer Kennungen. */
.historyItem{gap:19px;align-items:center;min-height:120px;padding:15px 20px}
.historyPreview{display:grid;place-items:center;flex:0 0 108px;width:108px;height:104px;padding:8px;background:linear-gradient(140deg,#273650,#3c2850);border:1px solid #574c67;border-radius:17px;color:var(--text);overflow:hidden}
.historyPreview:hover,.historyPreview:focus-visible{background:#534166;outline:2px solid #bd98e8;outline-offset:2px}
.historyPreview img{width:94px;height:90px;object-fit:contain;display:block}
.historyPreview .mediaSymbol,.historyPreview .mediaFallback{font-size:58px;line-height:1}
.historyPreview .mediaText{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;overflow-wrap:anywhere;text-align:center}
.historyDetails{min-width:0;overflow-wrap:anywhere}
.historyDetails strong{font-size:16px}
.historyDescription{font-size:14px;color:var(--muted);margin:4px 0 7px}
.historyItem .date{font-size:12px}
.incomingOverlay[hidden]{display:none!important}
.incomingOverlay{position:fixed;inset:0;z-index:100;background:rgba(13,7,18,.72);display:flex;justify-content:center;align-items:center;padding:28px;backdrop-filter:blur(7px)}
.incomingOverlay.position-top-right{justify-content:flex-end;align-items:flex-start;padding-top:48px;padding-right:50px;background:rgba(13,7,18,.26)}
.incomingCard{position:relative;width:min(100%,560px);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 40px;border-radius:29px;border:1px solid #82577e;background:linear-gradient(140deg,#2d223a,#191620);box-shadow:0 24px 90px #000a;animation:incomingPop .25s ease-out}
.incomingOverlay.position-top-right .incomingCard{width:min(100%,420px);min-height:220px;padding:20px}
.incomingEyebrow{color:#d7a6e0;font-size:12px;letter-spacing:2px;margin:0}
.incomingSender{display:block;font-size:clamp(18px,2vw,26px);overflow-wrap:anywhere}
.incomingType{max-width:100%;color:var(--muted);font-size:15px;overflow-wrap:anywhere;white-space:pre-wrap;margin:0}
.incomingMedia{min-height:135px;display:grid;place-items:center;width:100%;padding:6px}
.incomingMedia img{max-width:min(100%,390px);max-height:min(52vh,390px);width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 15px #0004)}
.incomingMedia .mediaSymbol,.incomingMedia .mediaFallback{font-size:clamp(110px,18vw,265px);line-height:1.35;filter:drop-shadow(0 12px 18px #0004)}
.incomingMedia .mediaText{font-size:clamp(24px,3vw,38px);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:42vh;overflow:auto}
.incomingOverlay.size-medium .incomingMedia img{max-width:230px;max-height:230px}
.incomingOverlay.size-medium .incomingMedia .mediaSymbol{font-size:155px}
.incomingOverlay.size-extra .incomingCard{width:min(100%,780px)}
.incomingOverlay.size-extra .incomingMedia img{max-width:min(100%,550px);max-height:min(65vh,550px)}
.incomingOverlay.size-extra .incomingMedia .mediaSymbol{font-size:clamp(175px,24vw,370px)}
.overlayClose{position:absolute;top:13px;right:15px;width:40px;height:40px;border:1px solid #62516b;border-radius:50%;background:#483950;color:white;font-size:27px;line-height:1}
.visualSettings{display:grid;grid-template-columns:160px minmax(180px,1fr);gap:10px 15px;align-items:center;max-width:550px}
.visualSettings label{margin:0!important}
.visualSettings select{width:100%;background:#19151d;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px}
@keyframes incomingPop{from{transform:scale(.93);opacity:.7}to{transform:scale(1);opacity:1}}
@media(max-width:650px){.incomingOverlay{padding:12px}.incomingOverlay.position-top-right{padding:10px}.incomingCard{padding:24px 16px}.incomingMedia img{max-width:75vw;max-height:44vh}.historyItem{padding:11px;gap:10px;min-height:96px}.historyPreview{flex-basis:82px;width:82px;height:80px}.historyPreview img{width:68px;height:67px}.visualSettings{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.incomingCard{animation:none}}

/* 0.1.2: reply affordance for live touch, captured-pointers do not self-cancel */
.touchReplyArea{width:100%;display:grid;justify-items:center;gap:8px;margin-top:6px}
.touchReplyArea[hidden]{display:none!important}
.touchReplyBtn{border:1px solid #ed73ac;border-radius:20px;background:#834069;color:#fff;font-weight:750;min-height:65px;padding:14px 24px;touch-action:none;user-select:none;cursor:pointer;box-shadow:0 5px 22px #df4f8630;max-width:96%}
.touchReplyBtn.holding{transform:scale(1.05);background:#c4518c;box-shadow:0 0 26px #fb72996b}
.feedbackPanel{margin-top:16px;padding:18px;background:#27202e;border-radius:16px}
.hapticLabel{display:flex!important;gap:10px;align-items:center;margin-top:16px!important}
.hapticLabel input{width:20px;height:20px;accent-color:#db89bf}
.incomingCard:has(.touchReplyArea:not([hidden])){max-height:min(90vh,850px);overflow:auto}