@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root{--ink:#2b3d3b;--forest:#375d57;--deep:#25453f;--cream:#f9f6f0;--sand:#eee7dc;--sage:#dbe6df;--muted:#7d8985;--line:rgba(49,83,75,.11);--shadow:0 22px 80px rgba(27,52,45,.13)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:#eae9e2}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}h1,h2{font-family:'Playfair Display',Georgia,serif}h1{font-size:clamp(2rem,4.5vw,2.7rem);line-height:1.16;letter-spacing:-.025em}h2{font-size:1.25rem}
.login-screen{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 12% 10%,#f5f0e4 0,transparent 45%),radial-gradient(circle at 90% 90%,#d6e0d4 0,transparent 52%),#e8ebe4}.login-panel,.setup-card{background:rgba(255,255,255,.88);border:1px solid #fff;border-radius:18px;box-shadow:var(--shadow);padding:clamp(28px,5vw,52px);width:min(100%,480px)}.brand-icon{display:grid;place-items:center;width:54px;height:54px;background:var(--forest);color:white;border-radius:15px;font-family:Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-2px;margin-bottom:24px}.eyebrow{font-size:.68rem;font-weight:700;color:var(--forest);letter-spacing:.19em;margin-bottom:13px}.login-description{color:var(--muted);line-height:1.6;margin:20px 0 30px}.form-label{font-weight:700;font-size:.82rem;margin-bottom:7px}.form-control{border:1px solid #dce5df;background:#fafcf9;min-height:46px;border-radius:9px}.form-control:focus{border-color:#6e9b88;box-shadow:0 0 0 .2rem rgba(73,121,104,.13)}.btn-raum{background:var(--forest);color:#fff;border-radius:9px;min-height:48px;font-weight:700;border:none}.btn-raum:hover,.btn-raum:focus{color:#fff;background:var(--deep)}.login-footer{font-size:.74rem;color:var(--muted);text-align:center;margin-top:30px}.lock-dot{color:#8aac9a}.form-error{color:#ab4343;font-size:.82rem;min-height:1.1rem;margin:12px 0}.setup-wrap{max-width:760px;padding:25px 15px;margin:auto}.setup-card{width:100%}.setup-card h2{font-size:1.1rem;margin:25px 0 12px;border-top:1px solid var(--line);padding-top:20px}
.chat-shell{width:min(100%,930px);height:100dvh;margin:0 auto;background:var(--cream);display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden;position:relative}.chat-top{display:flex;align-items:center;gap:24px;padding:16px 26px;border-bottom:1px solid var(--line);background:#fffefa;min-height:87px}.chat-brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mini{width:40px;height:40px;border-radius:12px;background:var(--forest);color:white;display:grid;place-items:center;font-family:Georgia,serif;font-size:19px;letter-spacing:-2px}.chat-brand-label{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;line-height:1.1}.chat-brand-caption{color:var(--muted);font-size:.67rem;margin-top:4px}.chat-partner{display:flex;align-items:center;gap:10px;margin-left:auto}.partner-avatar{width:39px;height:39px;border-radius:50%;background:#e8ece3;display:grid;place-items:center;font-weight:700;color:var(--forest);font-size:17px}.partner-name{font-size:.86rem;font-weight:700}.partner-state{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:5px}.status-dot{width:7px;height:7px;border-radius:50%;background:#bbbcb3;display:inline-block}.status-dot.active{background:#6ba683;box-shadow:0 0 0 3px rgba(107,166,131,.14)}.top-actions{display:flex;gap:4px}.icon-btn{border:0;background:transparent;color:#80938a;width:35px;height:35px;border-radius:7px;padding:8px}.icon-btn svg,.attach-button svg,.send-button svg{width:100%;height:100%}.icon-btn:hover,.icon-btn.enabled{background:#e3ede5;color:var(--deep)}.room-hero{text-align:center;display:flex;align-items:center;justify-content:center;gap:13px;padding:12px 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.19em;color:#8d988e;border-bottom:1px solid rgba(49,83,75,.055);background:#f8f7f1}.hero-ornament{color:#b6bd9c;font-size:.8rem}.messages{flex:1;overflow:auto;padding:26px clamp(14px,4vw,44px);scroll-behavior:smooth;background-image:radial-gradient(circle at 1px 1px,rgba(54,88,72,.045) 1px,transparent 0);background-size:22px 22px;overscroll-behavior:contain}.empty-state{text-align:center;color:var(--muted);margin:12vh auto 0;max-width:280px}.empty-state h2{color:var(--forest);font-size:1.4rem}.empty-sparkle{font-size:45px;color:#b1c4b4;margin-bottom:7px}.message-row{display:flex;margin:12px 0}.message-row.mine{justify-content:flex-end}.message-row.theirs{justify-content:flex-start}.message-bubble{max-width:min(77%,560px);min-width:110px;position:relative;padding:11px 13px 6px;border-radius:15px;box-shadow:0 2px 8px rgba(43,61,59,.045)}.mine .message-bubble{background:#dfeae1;border-bottom-right-radius:4px}.theirs .message-bubble{background:#fff;border:1px solid #f2eee7;border-bottom-left-radius:4px}.message-content{font-size:.89rem;line-height:1.52;overflow-wrap:anywhere}.message-text{white-space:pre-wrap}.message-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:.66rem;margin-top:6px;color:#8e9b93}.delivery-check{display:inline-flex;width:18px;height:15px;color:#839789}.delivery-check svg{width:18px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.delete-message{border:none;background:transparent;color:#a9b2ac;position:absolute;top:-5px;right:-23px;font-size:19px;opacity:0;padding:0 4px}.message-bubble:hover .delete-message,.delete-message:focus{opacity:1}.deleted-text{color:#9aa6a0;font-size:.82rem}.file-link{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--deep);margin-top:5px}.file-caption{font-size:.76rem;overflow-wrap:anywhere}.chat-image{display:block;max-width:100%;max-height:310px;object-fit:contain;border-radius:9px}.chat-bottom{padding:0 25px 11px;background:#fffefa;border-top:1px solid var(--line);padding-bottom:max(11px,env(safe-area-inset-bottom))}.typing-indicator{height:23px;padding:3px 5px;font-size:.72rem;color:#82948a}.composer{display:flex;gap:13px;align-items:flex-end;border:1px solid #e5eae2;border-radius:14px;background:#f8faf6;padding:8px 9px}.attach-button{width:36px;height:36px;display:grid;place-items:center;padding:8px;color:#6c897e;flex-shrink:0;cursor:pointer}.composer textarea{font:inherit;font-size:.9rem;resize:none;flex:1;min-width:0;height:36px;min-height:36px;max-height:140px;padding:7px 2px;outline:none;border:none;background:transparent;color:var(--ink)}.composer textarea::placeholder{color:#abb5ae}.send-button{width:38px;height:38px;border:0;border-radius:10px;background:var(--forest);color:#fff;padding:10px;flex-shrink:0}.send-button:hover{background:var(--deep)}.composer-tip{text-align:center;font-size:.68rem;color:#a3aca4;margin:6px 0 0}.attachment-preview{padding:8px 13px;background:#edf3eb;font-size:.75rem;border-radius:8px;margin:0 0 7px;display:flex;justify-content:space-between;align-items:center;gap:12px;overflow-wrap:anywhere}.attachment-preview button{background:none;border:0;font-size:20px}.chat-toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%) translateY(15px);background:#2f4b44;color:#fff;border-radius:8px;padding:10px 17px;font-size:.8rem;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:90%;text-align:center;z-index:20}.chat-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.chat-top{padding:12px 13px;gap:7px;min-height:74px}.chat-brand{gap:8px}.brand-mini{width:34px;height:34px;font-size:16px;border-radius:9px}.chat-brand-label{font-size:1.09rem}.chat-brand-caption{font-size:.59rem}.partner-avatar{width:32px;height:32px;font-size:14px}.chat-partner{gap:5px}.partner-name{font-size:.78rem}.partner-state{font-size:.63rem}.top-actions{gap:0}.icon-btn{width:30px;height:32px;padding:7px}.room-hero{padding:10px 0;font-size:.62rem}.messages{padding:14px 12px}.message-bubble{max-width:85%}.chat-bottom{padding-left:9px;padding-right:9px}.composer{gap:5px}.composer-tip{font-size:.63rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Chatraum auch vor dem Beitritt der zweiten Person */
.waiting-card{max-width:580px;margin:20px auto;padding:24px;background:var(--bs-body-bg,#fff);border:1px solid rgba(70,94,86,.19);border-radius:14px;box-shadow:0 8px 26px rgba(20,40,34,.07);color:#314b43}
.waiting-card h2{font-size:1.25rem;margin:0 0 10px}
.waiting-card p{line-height:1.55}
.waiting-card .btn{max-width:100%}
.waiting-card .form-control{max-width:100%}
@media(max-width:600px){.waiting-card{margin:12px;padding:16px}}

/* Raum21 2.1 – mobile-first Bildversand und integrierter Bildbetrachter */
.attach-button{border:0;background:transparent;min-width:42px;min-height:42px;border-radius:10px}
.attach-button:focus-visible,.chat-image-trigger:focus-visible{outline:3px solid #609d89;outline-offset:2px}
.attach-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:9px 0 12px}
.attach-menu.d-none{display:none!important}
.attach-menu button{border:1px solid #dce6dc;background:#f3f8f2;color:#35594f;padding:11px 7px;border-radius:10px;font-size:.79rem;min-height:46px;font-weight:600}
.upload-queue{border-radius:10px;background:#edf3eb;padding:9px;margin:0 0 8px}
.upload-queue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.77rem;margin-bottom:7px}
.upload-clear{border:0;background:transparent;text-decoration:underline;color:#48675c;font-size:.75rem}
.upload-items{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 6px}
.upload-item{width:72px;height:72px;flex-shrink:0;position:relative;border-radius:9px;background:#dbe5dc;overflow:hidden;scroll-snap-align:start}
.upload-item img{width:100%;height:100%;object-fit:cover}
.upload-file-icon{font-size:27px;display:grid;place-items:center;height:100%}
.upload-item button{position:absolute;right:2px;top:2px;border:0;border-radius:50%;background:rgba(25,39,34,.85);color:white;width:25px;height:25px;font-size:18px;line-height:1}
.upload-status{font-size:.75rem;color:#425f54}
.chat-image-trigger{display:block;width:100%;border:0;padding:0;background:transparent;text-align:left;margin-top:4px;border-radius:10px;overflow:hidden;cursor:zoom-in}
.chat-image{display:block;width:auto;max-width:100%;max-height:340px;border-radius:10px;object-fit:contain}
.message-row:has(.chat-image-trigger) .message-bubble{min-width:120px;max-width:min(80%,430px)}
body.lightbox-open{overflow:hidden}
.image-lightbox:not([hidden]){display:flex;position:fixed;inset:0;z-index:3000;background:rgba(12,17,17,.97);color:white;flex-direction:column;overscroll-behavior:contain}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top)) 15px 10px;gap:12px;font-size:.86rem;min-height:59px}
.lightbox-actions{display:flex;gap:12px}
.lightbox-action{border:0;background:rgba(255,255,255,.13);color:white;text-decoration:none;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-size:27px}
/* Bildbetrachter: das Bild immer innerhalb der tatsaechlichen Buehnenflaeche einpassen. */
.lightbox-stage{position:relative;flex:1 1 0%;min-height:0;min-width:0;display:block;overflow:hidden;touch-action:pan-x pan-y;user-select:none}
.lightbox-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;transition:transform .12s ease;transform-origin:center center;pointer-events:none}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:rgba(255,255,255,.12);color:white;border:0;border-radius:50%;width:44px;height:44px;font-size:36px;line-height:1}
.lightbox-nav:disabled{opacity:.2;cursor:default}
.lightbox-prev{left:12px}.lightbox-next{right:12px}
.lightbox-zoom{display:flex;justify-content:center;gap:12px;padding:10px 10px max(15px,env(safe-area-inset-bottom))}
.lightbox-zoom button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:white;border-radius:8px;min-width:48px;min-height:42px;padding:7px;font-size:1rem}
.lightbox-zoom button:nth-child(2){min-width:78px;font-size:.82rem}
@media(max-width:600px){.attach-menu{gap:5px}.attach-menu button{font-size:.74rem}.message-row:has(.chat-image-trigger) .message-bubble{max-width:85%;padding:7px 7px 5px}.chat-image{max-height:45dvh}.lightbox-nav{top:auto;bottom:75px;width:42px;height:42px}.lightbox-prev{left:14px}.lightbox-next{right:14px}.lightbox-zoom{padding-bottom:max(16px,env(safe-area-inset-bottom))}.composer textarea{font-size:16px}}

/* Raum21 v2.2 – Mobile-first Chatfunktionen */
.voice-button{border:0;background:transparent;font-size:23px;min-width:42px;min-height:42px;border-radius:8px;flex-shrink:0}.voice-button.recording{background:#ffe5e5;color:#a72222;box-shadow:0 0 0 2px #cd7070 inset}
.composer-options{display:flex;align-items:center;gap:8px;padding:6px 5px 0;color:#74877e;font-size:.72rem;flex-wrap:wrap}
.composer-options select{border:1px solid #dce5df;border-radius:6px;background:#f8faf6;padding:5px;max-width:160px;color:#36594d}
#voice-state{color:#9a2727;font-weight:600}.reply-banner{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;margin-bottom:5px;border-left:3px solid #679987;background:#f1f7f0;border-radius:5px;font-size:.8rem}.reply-banner button{border:0;background:transparent;font-size:23px;min-width:38px}
.message-actions{display:flex;align-items:center;gap:3px;margin-top:6px;flex-wrap:wrap}
.message-action{border:1px solid #dae6dc;color:#456f5d;background:rgba(255,255,255,.55);border-radius:9px;font-size:.74rem;min-height:33px;padding:5px 8px}
.reaction-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.reaction-pill{border:1px solid #dae4da;background:#f7faf6;border-radius:12px;padding:2px 7px;font-size:.8rem;min-height:27px}.reaction-pill.mine-react{border-color:#67a28d;background:#e0f2e8}
.emoji-picker{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.emoji-picker button{border:0;background:white;padding:6px;font-size:20px;border-radius:8px;min-width:39px;min-height:39px}
.message-reply{border-left:3px solid #95b7a5;background:rgba(255,255,255,.5);padding:5px 8px;font-size:.74rem;border-radius:4px;margin-bottom:6px;color:#537163}
.message-expiry{font-size:.64rem;color:#809789;margin-top:4px}
.chat-audio{display:block;max-width:min(100%,270px);width:260px;height:44px;margin-top:6px}
.feature-panel:not([hidden]){display:flex;position:fixed;inset:0;z-index:2600;flex-direction:column;background:#fcfdf9;color:#28483d;padding:max(14px,env(safe-area-inset-top)) 15px max(16px,env(safe-area-inset-bottom));overflow:auto}
.feature-panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dde8df;margin-bottom:15px;padding-bottom:12px}.feature-panel-header h2{font-size:1.2rem;margin:0}.feature-panel-header button{background:transparent;border:0;font-size:32px;min-height:44px;min-width:44px}
.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}.media-grid .gallery-photo{border:0;padding:0;background:transparent;aspect-ratio:1;overflow:hidden;border-radius:8px}.media-grid img{width:100%;height:100%;object-fit:cover}.media-file{grid-column:span 3;text-decoration:none;padding:12px;background:#eff5ee;border-radius:8px;overflow-wrap:anywhere}
.poll-form{display:flex;flex-direction:column;gap:10px;max-width:520px;width:100%;margin:0 auto}.poll-form label{font-weight:600;font-size:.86rem}.poll-form input{min-height:45px}.poll-form #poll-options{display:flex;flex-direction:column;gap:9px}.poll-form button{min-height:45px}
.chat-poll{min-width:min(255px,65vw);margin-top:3px}.poll-question{font-weight:700;margin-bottom:8px}.poll-vote{width:100%;text-align:left;min-height:43px;padding:8px 10px;border:1px solid #cfe1d4;background:#f9fcf9;border-radius:9px;margin-bottom:6px;font-size:.82rem;display:flex;justify-content:space-between;gap:8px}.poll-vote.selected{background:#d9ebe0;border-color:#55997a;font-weight:600}.poll-vote:disabled{opacity:.75}.poll-vote span{color:#668c74}
@media(min-width:750px){.feature-panel:not([hidden]){inset:5% max(15%,calc((100vw - 720px)/2));border-radius:14px;box-shadow:0 15px 70px #0004}}
@media(max-width:600px){.chat-top .icon-btn{min-width:30px}.chat-partner .partner-avatar{display:none}.message-actions{gap:3px}.message-action{min-height:36px}.composer{gap:3px}.voice-button{min-width:38px;padding:4px}.media-grid{gap:4px}}

/* Raum21 v2.2.2 – diskrete Nachrichtenaktionen */
.message-actions{justify-content:flex-end;gap:2px;margin-top:2px;flex-wrap:nowrap}
.message-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;min-height:28px;padding:5px;border:0;background:transparent;border-radius:6px;color:#789187;opacity:.68;transition:background-color .12s,color .12s,opacity .12s}
.message-action svg{display:block;width:16px;height:16px;flex:none}
.message-action:hover,.message-action:focus-visible,.message-action[aria-expanded="true"]{background:rgba(66,114,91,.09);color:#315b49;opacity:1}
.message-action:focus-visible{outline:2px solid #628d79;outline-offset:2px}
@media(max-width:600px){.message-actions{gap:1px;margin-top:1px}.message-action{width:36px;height:36px;min-height:36px;padding:9px}.message-action svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.message-action{transition:none}}

/* Raum21 v2.2.3 – zentrale Dienste ueber Plus-Menue */
.chat-bottom{position:relative}
.plus-button{border:1px solid #d7e3db;background:#f1f7f3;color:var(--forest);box-shadow:0 2px 6px rgba(32,58,49,.06)}
.plus-button span{display:block;font-size:1.8rem;line-height:1;font-weight:500;transform:translateY(-1px)}
.plus-button[aria-expanded="true"]{background:#dcebe2;color:var(--deep)}
.attach-menu{position:absolute;left:10px;bottom:118px;width:min(296px,calc(100% - 20px));display:block;padding:11px;border:1px solid #dbe6df;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 44px rgba(31,54,47,.15);backdrop-filter:blur(10px);z-index:45}
.attach-menu::after{content:"";position:absolute;left:22px;bottom:-8px;width:16px;height:16px;background:rgba(255,255,255,.98);border-right:1px solid #dbe6df;border-bottom:1px solid #dbe6df;transform:rotate(45deg)}
.attach-menu-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7d8c84;margin:0 0 9px 2px}
.attach-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.attach-menu button,.service-button{display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #dce6dc;background:#f5faf5;color:#35594f;padding:11px 9px;border-radius:12px;font-size:.81rem;line-height:1.25;min-height:50px;font-weight:600}
.attach-menu button:hover,.attach-menu button:focus-visible{background:#e7f1ea;color:#27473f;border-color:#bfd5c6;outline:none}
.service-button.enabled{background:#dfefe5;border-color:#9fc4b0;color:#23453d}
.service-danger{background:#fbf7f3!important;color:#7b4b40!important;border-color:#ead8cf!important}
#voice-record.recording{background:#ffe9e9;border-color:#e3a8a8;color:#9f2525;box-shadow:0 0 0 2px rgba(196,83,83,.08) inset}
@media(max-width:600px){
  .attach-menu{left:8px;right:8px;bottom:116px;width:auto;padding:10px}
  .attach-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .attach-menu button,.service-button{min-height:48px;font-size:.78rem}
  .plus-button{min-width:44px;min-height:44px}
  .plus-button span{font-size:1.9rem}
}

/* Raum21 v2.2.3a: Antworten/Reagieren links neben Uhrzeit/Lesestatus.
   Bewusst nur die Anzeige, die Chat- und Pollinglogik bleibt unveraendert. */
.message-bubble:has(> .message-meta > .message-actions){min-width:170px}
.message-meta{gap:5px;min-height:30px}
.message-meta .message-actions{margin:0 auto 0 0;justify-content:flex-start;gap:1px;flex:0 0 auto;align-self:center}
.message-meta time{margin-left:auto;white-space:nowrap;flex-shrink:0}
.message-meta .delivery-check{flex-shrink:0}
@media(max-width:600px){
 .message-bubble:has(> .message-meta > .message-actions){min-width:176px}
 .message-meta{min-height:36px}
 .message-meta .message-actions{gap:0}
}

/* Raum21 v2.2.3b – kompakter Fussbereich mit feiner Trennlinie. */
.message-bubble{padding-bottom:2px}
.message-meta{
  border-top:1px solid rgba(104,119,111,.24);
  margin-top:5px;
  padding-top:3px;
  min-height:27px;
}
@media(max-width:600px){
  .message-meta{min-height:32px;padding-top:2px}
  .message-meta .message-action{width:33px;height:32px;min-height:32px;padding:8px}
}

/* Raum21 v2.2.3c: Trennlinie ueber die komplette Blasenbreite,
   kleinere Abstaende ober- und unterhalb der Statuszeile. */
.message-bubble{
  --r21-bubble-padding-x:13px;
  padding-bottom:0;
}
.message-row:has(.chat-image-trigger) .message-bubble{
  --r21-bubble-padding-x:7px;
}
.message-meta{
  position:relative;
  border-top:0;
  margin-top:2px;
  padding-top:2px;
  padding-bottom:0;
  min-height:28px;
}
.message-meta::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(-1 * var(--r21-bubble-padding-x));
  right:calc(-1 * var(--r21-bubble-padding-x));
  border-top:1px solid rgba(104,119,111,.24);
  pointer-events:none;
}
@media(max-width:600px){
  .message-meta{min-height:31px;padding-top:1px}
  .message-meta .message-action{width:30px;height:30px;min-height:30px;padding:7px}
}


/* Raum21 v2.2.3d – Ablaufzeit ausschliesslich im Plus-Menue */
.chat-bottom{position:relative}
.attach-menu{
  bottom:calc(71px + env(safe-area-inset-bottom));
  max-height:min(75dvh,520px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.menu-ttl{border-top:1px solid #e0e8e1;margin-top:10px;padding:11px 3px 1px}
.menu-ttl label{display:block;font-weight:600;font-size:.78rem;color:#426357;margin-bottom:6px}
.menu-ttl select{display:block;width:100%;min-height:43px;border:1px solid #dce5df;border-radius:9px;padding:8px 12px;background:#f8faf6;color:#36594d;font:inherit;font-size:.88rem}
.menu-ttl select:focus-visible{outline:2px solid #679987;outline-offset:2px}
.menu-ttl p{font-size:.67rem;color:#83928a;margin:6px 2px 0;line-height:1.3}
.service-voice-state{display:block;margin-top:7px;font-size:.73rem;color:#a12f2f;font-weight:600}
.service-voice-state:empty{display:none}
/* Hinweis und Ablaufwahl werden nicht mehr unter dem Eingabefeld angezeigt. */
.composer-options,.composer-tip{display:none!important}
@media(max-width:600px){
  .attach-menu{bottom:calc(69px + env(safe-area-inset-bottom));max-height:min(73dvh,495px)}
}


/* Raum21 v2.2.3e: Reaktionen transparent, oben links auf der Blasenkante. */
/* Die Reaktionsliste ist absolut positioniert und benoetigt keine eigene Zeile. */
.message-bubble{position:relative;overflow:visible}
.message-bubble > .reaction-pills{
  position:absolute;
  z-index:4;
  top:-17px;
  left:-9px;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:3px;
  margin:0;
  padding:0;
  width:max-content;
  max-width:calc(100% + 9px);
  background:transparent;
  border:0;
}
.message-bubble > .reaction-pills:empty{display:none}
.message-bubble > .reaction-pills .reaction-pill,
.message-bubble > .reaction-pills .reaction-pill.mine-react{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border:0;
  background:transparent;
  border-radius:0;
  min-height:34px;
  min-width:34px;
  padding:3px 5px;
  margin:0;
  font-size:.82rem;
  line-height:1;
  color:#425f54;
  box-shadow:none;
}
.message-bubble > .reaction-pills .reaction-pill:hover,
.message-bubble > .reaction-pills .reaction-pill:focus-visible{
  background:transparent;
  outline:2px solid rgba(79,127,98,.45);
  outline-offset:0;
  border-radius:9px;
}
/* Verhindert Ueberlappungen mit der vorherigen Nachricht. */
.message-row:has(.reaction-pills:not(:empty)){margin-top:18px}
/* Alte PWA-/Browser-Layouts sollen keine Ablaufzeile anzeigen. */
.message-expiry{display:none!important}
@media(max-width:600px){
  .message-bubble > .reaction-pills{top:-19px;left:-9px}
  .message-bubble > .reaction-pills .reaction-pill,
  .message-bubble > .reaction-pills .reaction-pill.mine-react{min-height:38px;min-width:38px;font-size:.86rem}
  .message-row:has(.reaction-pills:not(:empty)){margin-top:20px}
}


/* Raum21 v2.2.3g – Termin vorschlagen (mobile first) */
.meeting-form{display:flex;flex-direction:column;gap:11px;max-width:480px;width:100%;margin:0 auto}
.meeting-form label{font-weight:700;font-size:.84rem;color:#35594f}
.meeting-form input{min-height:49px;font-size:1rem}
.meeting-form .btn{margin-top:7px}
.meeting-intro{margin:4px 0 5px;font-size:.88rem;color:#657c70;line-height:1.5}
.meeting-hint{font-size:.74rem;color:#7e9186;line-height:1.45;margin:2px 0}
.meeting-card{min-width:min(245px,65vw);max-width:100%;padding:4px 0 7px}
.meeting-card-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.035em;font-weight:700;color:#557969;margin-bottom:8px}
.meeting-card-date{font-size:.9rem;font-weight:700;color:#294b40}
.meeting-card-time{font-size:1.15rem;font-weight:700;color:#2d5c49;margin-top:2px}
.meeting-status{margin-top:10px;font-size:.74rem;color:#7b8b83}
.meeting-status.accepted{color:#236c46;font-weight:700}
.meeting-status.declined{color:#99554e;font-weight:700}
.meeting-actions{display:flex;gap:7px;margin-top:10px}
.meeting-response{border:1px solid #bdd6c5;background:#f2f9f3;color:#315f4b;padding:8px 12px;min-height:43px;border-radius:8px;font-size:.82rem;font-weight:700;flex:1}
.meeting-response:last-child{background:#f9f6f4;border-color:#e5d6d1;color:#806057}
.meeting-response.selected{background:#cce5d6;border-color:#71a88a}
.meeting-response:last-child.selected{background:#f0dcd7;border-color:#cb978c}
.meeting-response:disabled{opacity:.6}
@media(max-width:600px){.meeting-card{min-width:min(240px,70vw)}.meeting-response{min-height:45px}}


/* Raum21 v2.2.3h – eigene, touch-freundliche Terminwahl */
.meeting-form{gap:13px;max-width:460px;padding-bottom:max(9px,env(safe-area-inset-bottom))}
.meeting-intro{margin:0 0 2px;font-size:.84rem;color:#6b8074}
.meeting-picker-card{padding:15px;background:#fff;border:1px solid #dce8df;border-radius:15px;box-shadow:0 5px 18px rgba(31,56,43,.045)}
.meeting-section-title{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.meeting-step{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;background:#e4f0e8;border-radius:10px;color:#35644d;font-size:.79rem;font-weight:800}
.meeting-section-title h3{font-family:'DM Sans',system-ui,sans-serif;margin:0 0 1px;color:#27493c;font-size:.94rem;font-weight:700}
.meeting-section-caption{display:block;color:#7b9085;font-size:.72rem;line-height:1.35}
.meeting-calendar{border:1px solid #eaf0e9;border-radius:13px;background:#fcfdfb;padding:9px 8px 11px}
.meeting-month-nav{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:7px}
.meeting-month-nav strong{text-align:center;color:#304e42;font-size:.87rem;font-weight:750;text-transform:capitalize}
.meeting-month-nav button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#527768;font-size:1.65rem;line-height:1}
.meeting-month-nav button:hover:not(:disabled){background:#e8f1e9}
.meeting-month-nav button:disabled{opacity:.22;cursor:not-allowed}
.meeting-weekdays,.meeting-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.meeting-weekdays{margin:0 0 4px}
.meeting-weekdays span{padding:5px 0;color:#8a9b91;font-size:.7rem;font-weight:700}
.meeting-day,.meeting-day-empty{display:grid;place-items:center;width:100%;min-width:0;min-height:40px;aspect-ratio:1;max-height:48px;line-height:1;border:0;border-radius:11px;background:transparent;color:#304c40;font-size:.84rem;font-weight:600}
.meeting-day:not(:disabled):hover{background:#e8f2ea}
.meeting-day.is-today{box-shadow:inset 0 0 0 1px #a7c6b3;color:#2d6c4c}
.meeting-day.is-selected{background:#376553!important;color:#fff!important;box-shadow:0 3px 8px rgba(30,81,53,.17)}
.meeting-day:disabled{opacity:.22;cursor:not-allowed}
.meeting-time-adjust{display:flex;align-items:flex-end;justify-content:center;gap:7px}
.meeting-time-unit{flex:1;min-width:0}
.meeting-time-unit>span{display:block;text-align:center;color:#728a7b;font-size:.73rem;font-weight:700;margin-bottom:6px}
.meeting-time-controls{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px;background:#f3f8f3;border:1px solid #e5ece5;border-radius:12px}
.meeting-time-controls button{flex:0 0 39px;display:grid;place-items:center;width:39px;height:43px;min-height:43px;border:0;border-radius:9px;background:#fff;color:#406957;font-size:1.32rem;font-weight:500;box-shadow:0 1px 4px rgba(43,72,53,.05)}
.meeting-time-controls button:hover{background:#e3f0e7}
.meeting-time-controls output{flex:1;min-width:0;text-align:center;font-size:1.35rem;font-weight:750;color:#2a5440;font-variant-numeric:tabular-nums}
.meeting-time-separator{font-size:1.7rem;font-weight:700;color:#6f8978;padding-bottom:11px}
.meeting-selection{border:1px solid #bcd6c5;background:#ebf5ec;border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;color:#365b49}
.meeting-selection>span{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#628473}
.meeting-selection strong{font-size:.94rem;line-height:1.35}
.meeting-selection small{font-size:.7rem;color:#799184}
.meeting-selection small.is-invalid{color:#a24942;font-weight:650}
.meeting-submit{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;margin:0;min-height:50px}
.meeting-submit span{font-size:1.1rem}
.meeting-picker-card button:focus-visible,.meeting-submit:focus-visible{outline:3px solid #78aa90;outline-offset:2px}
@media(max-width:600px){
  #meeting-panel.feature-panel:not([hidden]){padding:calc(env(safe-area-inset-top) + 9px) 11px max(13px,env(safe-area-inset-bottom))}
  .meeting-picker-card{padding:11px 10px 12px;border-radius:13px}
  .meeting-form{gap:10px;width:100%;max-width:440px}
  .meeting-day{min-height:38px;font-size:.83rem}
  .meeting-time-controls button{flex-basis:37px;width:37px;height:43px}
  .meeting-selection{padding:11px 12px}
}
@media(max-width:360px){
  .meeting-calendar-days,.meeting-weekdays{gap:1px}
  .meeting-day{min-height:34px}
  .meeting-time-controls button{flex-basis:33px;width:33px}
}

/* Raum21 v2.2.3j: Select direkt im vorhandenen Uhrzeitfeld */
.meeting-time-unit>label{display:block;text-align:center;color:#728a7b;font-size:.73rem;font-weight:700;margin-bottom:6px}
.meeting-time-controls select.meeting-time-value{
  flex:1 1 0;display:block;width:100%;min-width:0;height:43px;min-height:43px;
  border:0;border-radius:8px;background-color:transparent;
  color:#2a5440;text-align:center;text-align-last:center;
  font:750 1.32rem/1 'DM Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums;
  -webkit-appearance:none;appearance:none;outline:0;
  padding:0 2px;cursor:pointer;touch-action:manipulation;
}
.meeting-time-controls select.meeting-time-value:hover,
.meeting-time-controls select.meeting-time-value:focus-visible{
  background:#e2f0e7;color:#244b38;
}
.meeting-time-controls select.meeting-time-value:focus-visible{outline:2px solid #78aa90;outline-offset:1px}
.meeting-time-controls select.meeting-time-value option{color:#2a5440;background:#fff;font-size:1rem}
@media(max-width:360px){
  .meeting-time-controls select.meeting-time-value{font-size:1.2rem;padding:0}
}

/* Raum21 v2.2.3o: persoenliche woechentliche Verfuegbarkeit – mobile first */
.meeting-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,520px);margin:0 auto 4px}
.meeting-mode-tabs button{border:1px solid #dbe7dc;background:#f4f8f3;color:#50705d;border-radius:10px;min-height:46px;padding:8px 5px;font-size:.78rem;font-weight:700;line-height:1.15}
.meeting-mode-tabs button.is-active{background:#345e4c;border-color:#345e4c;color:white}
.meeting-mode-tabs button:focus-visible,.availability-editor button:focus-visible,.availability-editor select:focus-visible{outline:3px solid #80ac91;outline-offset:2px}
.meeting-mode-info{width:min(100%,520px);margin:0 auto 11px;color:#738878;font-size:.8rem;line-height:1.45}
.availability-editor:not([hidden]){display:flex;flex-direction:column;gap:11px;width:min(100%,520px);margin:0 auto}
.availability-editor>p{color:#627e70;font-size:.83rem;margin:0;line-height:1.55}
.availability-days{display:grid;gap:7px}
.availability-day{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #dce6de;border-radius:12px;padding:9px 10px;background:#fff;min-height:61px}
.availability-day.is-disabled{background:#f8faf7}
.availability-day-label{display:flex;align-items:center;gap:8px;min-width:95px;font-size:.8rem;font-weight:700;cursor:pointer;color:#2d5341}
.availability-check{appearance:auto;accent-color:#376553;width:18px;height:18px;margin:0;flex-shrink:0}
.availability-range{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1;min-width:0}
.availability-range span{font-size:.71rem;color:#728a7b}
.availability-time{min-height:40px;max-width:100px;min-width:0;flex:0 1 100px;border:1px solid #d9e6db;border-radius:9px;background:#f2f8f3;color:#28523e;font-weight:700;font-size:.83rem;text-align:center;padding:4px 5px;cursor:pointer}
.availability-time:disabled{background:#f2f3f0;opacity:.55}
#availability-save{min-height:48px}
.availability-editor>small{font-size:.73rem;color:#829386}
#meeting-form[hidden],#availability-editor[hidden]{display:none!important}
@media(max-width:380px){
  .meeting-mode-tabs{gap:4px}.meeting-mode-tabs button{font-size:.71rem;padding:7px 2px;min-height:48px}
  .availability-day{padding:8px 6px;gap:5px}
  .availability-day-label{min-width:86px;gap:5px;font-size:.76rem}
  .availability-time{flex-basis:82px;font-size:.77rem;padding:4px 2px}
  .availability-range{gap:4px}
}

/* Raum21 v2.2.3p – freigegebene Zeiten direkt beim Terminvorschlag */
.meeting-mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.meeting-partner-times{display:flex;flex-direction:column;gap:6px}
.meeting-partner-heading{font-size:.73rem;font-weight:700;color:#5c7867}
.meeting-partner-slots{display:flex;flex-wrap:wrap;gap:6px}
.meeting-partner-slot{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;background:#f1f7f2;border:1px solid #d9e8dc;border-radius:9px;color:#355e4b;font-size:.79rem;line-height:1.3}
.meeting-partner-slot strong{font-weight:700}
.meeting-no-times{border:1px solid #eadfc8;background:#fcf9f0;border-radius:10px;padding:11px 13px;color:#77674c;font-size:.81rem;line-height:1.5;margin:0}
@media(max-width:380px){.meeting-mode-tabs button{font-size:.79rem;min-height:44px;padding:8px 5px}.meeting-partner-slot{font-size:.75rem;padding:7px 9px}}
.meeting-mode-info[hidden]{display:none!important}


/* Raum21 v2.2.3r - Web Push und PWA: kompakte, mobile Bedienung */
.pwa-install-banner[hidden],.push-menu-tools [hidden],.pwa-menu-install[hidden]{display:none!important}
.pwa-install-banner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:9px;row-gap:7px;padding:10px 14px;background:#e8f1e9;border-bottom:1px solid #cddfd2;color:#315449}
.pwa-install-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.pwa-install-copy strong{font-size:.82rem;line-height:1.2}
.pwa-install-copy span{font-size:.71rem;color:#6b7e72;line-height:1.35}
.pwa-install-action{border:0;border-radius:8px;background:#375d57;color:#fff;padding:9px 12px;font-weight:700;font-size:.77rem;min-height:38px}
.pwa-install-close{border:0;background:transparent;color:#71897e;font-size:21px;min-width:30px;min-height:36px;line-height:1}
#pwa-install-help{grid-column:1/-1;margin:0;font-size:.75rem;line-height:1.5;color:#385b4b;background:#f6faf5;padding:8px 10px;border-radius:8px}
.attach-menu .pwa-menu-install{width:100%;min-height:43px;margin-top:7px;background:#e5f0e8;border:1px solid #c6daca;border-radius:10px;font-size:.8rem;font-weight:700;color:#335d4e}
.push-menu-tools{margin-top:9px;border-top:1px solid #e0e9e2;padding-top:7px;font-size:.72rem;line-height:1.4;color:#71887a}
.push-menu-tools #push-test{border:1px solid #c8ddcf;border-radius:8px;background:#f6faf6;color:#315e4b;font-size:.73rem;min-height:36px;padding:7px 10px;margin-top:6px;font-weight:600;width:100%}
@media(max-width:600px){
 .pwa-install-banner{padding:9px 10px;column-gap:6px}
 .pwa-install-action{min-height:42px;padding:8px 10px}
 .pwa-install-copy strong{font-size:.79rem}
 .pwa-install-copy span{font-size:.68rem}
}

/* Raum21 v2.2.3s: mobile-freundliche PWA-Installationshilfe */
.pwa-guide[hidden]{display:none!important}
.pwa-guide{position:fixed;inset:0;z-index:3200;background:rgba(21,36,32,.58);display:flex;align-items:center;justify-content:center;padding:16px}
.pwa-guide-sheet{width:min(100%,480px);max-height:90dvh;overflow:auto;background:#fffefa;color:#304e43;border-radius:17px;box-shadow:0 20px 70px rgba(0,0,0,.23);padding:18px 20px 20px}
.pwa-guide-header{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #dce5de;padding-bottom:12px;margin-bottom:15px}
.pwa-guide-header h2{font-family:inherit;font-size:1.08rem;margin:0;font-weight:700}
.pwa-guide-header button{border:0;background:#eef4ee;border-radius:50%;color:#456a57;font-size:22px;width:42px;height:42px;line-height:1}
#pwa-install-help>strong{font-weight:700;font-size:.91rem}
#pwa-install-help ol{padding-left:22px;margin:12px 0;display:grid;gap:11px;line-height:1.4;font-size:.88rem}
#pwa-install-help li{padding-left:3px}
#pwa-install-help p{font-size:.8rem;line-height:1.5;background:#eff5ef;border-radius:9px;padding:11px 12px;margin:10px 0 0}
#pwa-install-help .pwa-install-diagnostic{background:#f8faf7;color:#687d70;border:1px solid #dce8df}
@media(max-width:600px){
  .pwa-guide{padding:0;align-items:flex-end}
  .pwa-guide-sheet{width:100%;max-height:86dvh;border-radius:18px 18px 0 0;padding:16px 16px max(22px,env(safe-area-inset-bottom))}
  #pwa-install-help ol{font-size:.86rem;gap:10px}
}


/* Raum21 v2.2.3w – mobil: Kopfzeile und Eingabe bleiben sichtbar.
   Die sichtbare Viewport-Hoehe (inkl. Bildschirmtastatur) kommt aus app.js.
   Kein Eingriff in Polling, Datenbank oder Chat-Nachrichten. */
html.chat-app-page,body.chat-app-page{
  height:100%;min-height:0;overflow:hidden;overscroll-behavior:none;
}
.chat-app-page .chat-shell{
  position:fixed;
  left:0;right:0;bottom:auto;
  top:var(--r21-viewport-top,0px);
  height:var(--r21-viewport-height,100dvh);
  max-height:var(--r21-viewport-height,100dvh);
  min-height:0;
  margin:0 auto;
}
.chat-app-page .chat-top,
.chat-app-page .chat-bottom,
.chat-app-page .pwa-install-banner{
  flex-shrink:0;
}
.chat-app-page .messages{
  min-height:0;
  flex:1 1 auto;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.chat-app-page .chat-bottom{
  position:relative;
  z-index:10;
}
.chat-app-page .attach-menu{
  max-height:max(110px,calc(var(--r21-viewport-height,100dvh) - 150px));
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* 2.2.3x: freiwillige, sichere Langzeit-Anmeldung */
.remember-login{display:flex;align-items:center;gap:10px;margin:16px 0 5px;font-size:.87rem;color:var(--forest);cursor:pointer;min-height:36px}
.remember-login input{width:19px;height:19px;accent-color:var(--forest);flex:none;margin:0}
.remember-login small{color:var(--muted);font-size:.78rem}
.remember-login:focus-within{outline:2px solid #80a695;outline-offset:3px;border-radius:5px}

/* Raum21 2.2.3ad: Admin-App-Verwaltung je Raum */
.attach-menu-grid button[hidden]{display:none!important}
.room-apps-description{margin:0 0 16px;color:#667b70;font-size:.91rem;line-height:1.5}
.room-apps-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 13px;background:#f4f8f3;border:1px solid #dce9df;border-radius:7px}
.room-apps-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.room-apps-info strong{font-size:.95rem;color:#274b3c}
.room-apps-info span{font-size:.8rem;color:#71857a}
.room-apps-toggle{flex:none;display:inline-flex;align-items:center;cursor:pointer;min-height:40px}
.room-apps-toggle input{position:absolute;width:1px;height:1px;opacity:0}
.room-apps-toggle-track{position:relative;display:block;width:46px;height:27px;background:#b3c0b8;border-radius:30px;transition:background .15s}
.room-apps-toggle-track:after{content:"";position:absolute;width:21px;height:21px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:transform .15s}
.room-apps-toggle input:checked+.room-apps-toggle-track{background:#457961}
.room-apps-toggle input:checked+.room-apps-toggle-track:after{transform:translateX(19px)}
.room-apps-toggle input:focus-visible+.room-apps-toggle-track{outline:2px solid #457961;outline-offset:3px}
.room-apps-toggle input:disabled+.room-apps-toggle-track{opacity:.5;cursor:wait}
.room-apps-status{min-height:1.5em;margin:12px 2px;color:#476953;font-size:.83rem}
.room-apps-upgrade{padding:13px;border-radius:7px;background:#fff9ec;border:1px solid #f0e0b5}
.room-apps-upgrade p{font-size:.85rem;margin:0 0 12px}
.room-apps-hint{border-top:1px solid #dce9df;margin-top:20px;padding-top:12px;font-size:.78rem;color:#748478}