:root{
  --accent:#cfe8d7;
  --accent-strong:#8fb9a0;
  --accent-soft:#eef8f1;
  --mint:#dff3e6;
  --peach:#f7ead8;
  --bg:#f4f8f4;
  --card:#ffffff;
  --panel:rgba(255,255,255,.86);
  --text:#23332d;
  --muted:#6d7d74;
  --line:rgba(96,121,106,.18);
  --dark:#123d36;
  --danger:#9b2f42;
  --ok:#20624a;
  --shadow:0 24px 70px rgba(46,64,55,.14);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --app-height:100dvh;
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(207,232,215,.80), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(247,234,216,.72), transparent 32rem),
    var(--bg);
  color:var(--text);
}

body[data-palette="dark"],
body[data-palette="stern"]{
  --bg:#07140f;
  --card:#10231f;
  --panel:rgba(13,31,27,.92);
  --text:#edf7f1;
  --muted:#a8bbb2;
  --line:rgba(208,226,216,.16);
  --dark:#dff3e6;
}

a{color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}

.blocked-wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}
.blocked-card{
  width:min(520px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:28px;
  box-shadow:var(--shadow);
  text-align:center;
}
.blocked-icon{font-size:42px}
.soft-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:800;
}

.app-shell{
  height:var(--app-height);
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:16px;
  padding:14px;
  overflow:hidden;
}

.room-panel,
.chat-panel{
  min-height:0;
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.room-panel{
  border-radius:var(--radius-xl);
  display:flex;
  flex-direction:column;
}

.panel-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
}

.panel-user-block{
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}
.panel-user-block.hbn-self-contact-target-v68p{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.panel-user-block.hbn-self-contact-target-v68p:focus-visible,
.panel-user-block.hbn-self-contact-target-v68p:active{
  outline:none;
}
.panel-user-block span:last-child{
  min-width:0;
  display:grid;
}
.panel-user-block strong,
.panel-user-block span span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.panel-user-block span span{
  color:var(--muted);
  font-size:12px;
}

.panel-user-avatar,
.room-avatar,
.chat-room-icon,
.message-avatar,
.forward-avatar{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#17342e;
  background:linear-gradient(135deg,var(--accent),var(--peach));
  font-weight:900;
  border:1px solid rgba(255,255,255,.58);
}
.panel-user-avatar{
  width:50px;
  height:50px;
  border-radius:18px;
}
.panel-user-avatar img,
.room-avatar img,
.chat-room-icon img,
.message-avatar img,
.forward-avatar img,
.avatar-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.panel-actions{
  display:flex;
  align-items:center;
  gap:7px;
}
.panel-actions a,
.admin-link,
.panel-admin-link,
.panel-push-help-link{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:18px;
  text-decoration:none;
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
}

.mobile-room-close{
  display:none;
}

.room-list,
.direct-list,
.hbn-groups-list{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px;
  display:grid;
  gap:8px;
  -webkit-overflow-scrolling:touch;
}

.room-section-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 2px;
  padding:9px 10px;
  border:0;
  border-radius:18px;
  background:rgba(18,61,54,.08);
  color:var(--muted);
  text-align:left;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.room-section-title small{
  text-transform:none;
  font-weight:700;
  letter-spacing:0;
}

.room-item,
.direct-user{
  width:100%;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:9px;
  border:1px solid transparent;
  border-radius:20px;
  background:rgba(255,255,255,.50);
  color:var(--text);
  text-align:left;
}
.room-item:hover,
.direct-user:hover{
  border-color:rgba(143,185,160,.55);
  background:rgba(255,255,255,.78);
}
.room-item.active{
  background:linear-gradient(135deg,rgba(207,232,215,.96),rgba(247,234,216,.86));
  border-color:rgba(143,185,160,.65);
}
.room-item span:last-child,
.direct-user span:last-child{
  min-width:0;
}
.room-item strong,
.direct-user strong,
.room-item small,
.direct-user small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.room-item small,
.direct-user small{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
}

.admin-link{
  margin:10px;
  width:auto;
  padding:0 14px;
}

.chat-panel{
  border-radius:var(--radius-xl);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.chat-header{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.mobile-menu{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.70);
}

.chat-title-group{
  min-width:0;
  display:grid;
  gap:3px;
  flex:1 1 auto;
}
.chat-title-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.chat-room-icon{
  width:40px;
  height:40px;
  border-radius:15px;
}
#roomTitle{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#roomStatus{
  color:var(--muted);
  font-size:12px;
}
#roomStatus[data-mode="error"]{color:var(--danger)}
#roomStatus[data-mode="locked"]{color:#906117}

.chat-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
}
.chat-header-actions button,
.chat-header-actions a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.64);
  color:var(--text);
  text-decoration:none;
}

.messages{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),
    rgba(255,255,255,.22);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

.empty-state{
  margin:40px auto;
  max-width:420px;
  padding:24px;
  border:1px dashed var(--line);
  border-radius:24px;
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.45);
}
.empty-state.error{
  color:var(--danger);
}

.hbn-older-loader-v65t{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 28px);
  margin:0 auto 12px;
  padding:8px 12px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:rgba(248,250,252,.88);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hbn-older-loader-spinner-v65t{
  width:13px;
  height:13px;
  border-radius:999px;
  border:2px solid rgba(248,250,252,.28);
  border-top-color:var(--accent);
  animation:hbnOlderSpinV65t .75s linear infinite;
}
.hbn-older-loader-v65t.is-done,
.hbn-older-loader-v65t.is-end{
  background:rgba(16,185,129,.16);
  border-color:rgba(94,234,212,.24);
  color:rgba(236,253,245,.95);
}
.hbn-older-loader-v65t.is-error{
  background:rgba(127,29,29,.70);
  border-color:rgba(248,113,113,.42);
}
.hbn-older-loader-v65t.is-done .hbn-older-loader-spinner-v65t,
.hbn-older-loader-v65t.is-end .hbn-older-loader-spinner-v65t,
.hbn-older-loader-v65t.is-error .hbn-older-loader-spinner-v65t{
  display:none;
}
@keyframes hbnOlderSpinV65t{to{transform:rotate(360deg)}}

.message{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:0 0 12px;
  max-width:100%;
}
.message.mine{
  flex-direction:row-reverse;
  padding-left:58px;
}
.message:not(.mine){
  padding-right:58px;
}
.message-content{
  min-width:0;
  max-width:min(78%, 760px);
}
.message.mine .message-content{
  margin-left:auto;
}
.message:not(.mine) .message-content{
  margin-right:auto;
}
.message-avatar{
  width:36px;
  height:36px;
  border-radius:13px;
  font-size:12px;
}

.msg-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 2px 4px;
  color:var(--muted);
  font-size:12px;
}
.message.mine .msg-meta{
  text-align:right;
}
.msg-meta > span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bubble{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  padding:11px 13px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 10px 24px rgba(23,48,41,.08);
  line-height:1.45;
}
.message.mine .bubble{
  color:#13322b;
  background:linear-gradient(135deg,rgba(207,232,215,.98),rgba(223,243,230,.92));
}
body[data-bubble="sand"] .message.mine .bubble{background:#f7ead8}
body[data-bubble="blau"] .message.mine .bubble{background:#e1eefb}
body[data-bubble="rose"] .message.mine .bubble{background:#f8e1e7}
body[data-bubble="mint"] .message.mine .bubble{background:#dff3e6}

.message-actions{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.message-action{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.86);
  color:#fff;
  line-height:1;
  font-size:13px;
}
.message-delete{
  background:rgba(15,23,42,.96);
}

.message-reactions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:5px 2px 0;
}
.message.mine .message-reactions{
  justify-content:flex-end;
}
.reaction-pill{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:13px;
  font-weight:850;
  background:rgba(125,211,252,.14);
  border:1px solid rgba(125,211,252,.26);
}

.attachment{
  margin-top:8px;
}
.attachment-image{
  display:block;
  border:0;
  padding:0;
  background:transparent;
  cursor:zoom-in;
  line-height:0;
  max-width:100%;
}
.attachment-image img{
  display:block;
  max-width:min(410px, 74vw);
  max-height:270px;
  width:auto;
  height:auto;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.72);
}
.attachment-file-link{
  display:inline-grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  max-width:min(100%, 430px);
  width:100%;
  margin:0;
  padding:9px 10px;
  border:1px solid rgba(178,255,218,.18);
  border-radius:18px;
  background:rgba(2,18,27,.24);
  color:inherit;
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.attachment-file{
  display:inline-flex;
  align-items:center;
  min-width:0;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  overflow-wrap:anywhere;
}
.attachment-file-open-v68a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(191,255,231,.98), rgba(65,211,150,.92));
  color:#062017;
  font-size:.82em;
  font-weight:900;
  white-space:nowrap;
}
.attachment-audio-v63t{
  display:grid;
  gap:8px;
  width:min(100%,430px);
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:17px;
  background:rgba(2,8,23,.24);
  color:inherit;
}
.attachment-audio-head-v63t{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  font-size:.9rem;
}
.attachment-audio-icon-v63t{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(191,247,220,.18);
  border:1px solid rgba(191,247,220,.22);
}
.attachment-audio-name-v63t{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:850;
}
.attachment-audio-open-v63t{
  color:#bff7dc;
  text-decoration:none;
  font-weight:850;
}
.attachment-audio-open-v63t:hover{
  text-decoration:underline;
}
.attachment-audio-v63t audio{
  display:block;
  width:100%;
  height:38px;
}

/* HBN_AUDIO_PLAYER_COLOR_V65Y: Sprachnachrichten farblich an den Chat anpassen. */
html body .messages .attachment-audio-v63t,
html body #messages .attachment-audio-v63t{
  padding:10px!important;
  border-radius:18px!important;
  border:1px solid rgba(110,231,183,.18)!important;
  background:
    linear-gradient(135deg, rgba(17,70,55,.86), rgba(20,35,52,.76))!important;
  box-shadow:0 10px 24px rgba(2,6,23,.18)!important;
  color:#f8fafc!important;
}

html body .messages .message:not(.mine) .attachment-audio-v63t,
html body #messages .message:not(.mine) .attachment-audio-v63t{
  border-color:rgba(214,232,228,.16)!important;
  background:
    linear-gradient(135deg, rgba(20,35,52,.88), rgba(18,61,54,.64))!important;
}

html body .attachment-audio-head-v63t{
  color:#f8fafc!important;
}

html body .attachment-audio-icon-v63t{
  background:linear-gradient(135deg, rgba(191,247,220,.24), rgba(110,231,183,.12))!important;
  border-color:rgba(191,247,220,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}

html body .attachment-audio-name-v63t{
  color:#f8fafc!important;
}

html body .attachment-audio-open-v63t{
  color:#d7ffe9!important;
}

html body .attachment-audio-v63t audio{
  height:42px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:#bff7dc!important;
  accent-color:#2ca66f!important;
  box-shadow:inset 0 0 0 1px rgba(7,24,20,.10), 0 6px 16px rgba(2,6,23,.18)!important;
}

html body .attachment-audio-v63t audio::-webkit-media-controls-enclosure{
  border-radius:999px!important;
  background:linear-gradient(135deg, #d9fff0, #b8efd8)!important;
}

html body .attachment-audio-v63t audio::-webkit-media-controls-panel{
  border-radius:999px!important;
  background:linear-gradient(135deg, #d9fff0, #b8efd8)!important;
}

html body .attachment-audio-v63t audio::-webkit-media-controls-current-time-display,
html body .attachment-audio-v63t audio::-webkit-media-controls-time-remaining-display{
  color:#071814!important;
  font-weight:800!important;
  text-shadow:none!important;
}

html body .attachment-audio-v63t audio::-webkit-media-controls-timeline{
  accent-color:#1f8a5f!important;
}

@media(max-width:760px){
  html body .messages .attachment-audio-v63t,
  html body #messages .attachment-audio-v63t{
    padding:9px!important;
    border-radius:17px!important;
  }

  html body .attachment-audio-v63t audio{
    height:40px!important;
  }
}

.composer-wrap{
  flex:0 0 auto;
  padding:10px 12px 12px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.42);
}
.composer{
  display:grid;
  grid-template-columns:44px 44px 44px minmax(0,1fr) 50px;
  gap:8px;
  align-items:end;
}
.icon-btn,
.file-btn,
.send-btn{
  min-width:0;
  height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--text);
  display:grid;
  place-items:center;
}
.file-btn input{display:none}
.send-btn{
  background:linear-gradient(135deg,var(--accent-strong),var(--dark));
  color:#fff;
  font-weight:900;
}
.hbn-voice-toggle-v63t{
  touch-action:manipulation;
}
.hbn-voice-toggle-v63t.is-recording-v63t{
  color:#fff;
  background:linear-gradient(135deg,#b91c1c,#7f1d1d);
  border-color:rgba(254,202,202,.46);
  box-shadow:0 0 0 4px rgba(248,113,113,.18),0 12px 28px rgba(127,29,29,.22);
  animation:hbnVoicePulseV63t 1.08s ease-in-out infinite;
}
#messageInput{
  width:100%;
  min-height:44px;
  max-height:150px;
  min-width:0;
  resize:none;
  border:1px solid var(--line);
  border-radius:18px;
  padding:11px 13px;
  line-height:1.25;
  background:rgba(255,255,255,.90);
  color:var(--text);
  outline:none;
  overflow-y:auto;
}
#messageInput:focus{
  border-color:rgba(143,185,160,.85);
  box-shadow:0 0 0 4px rgba(143,185,160,.18);
}
.file-preview{
  margin:8px 0 0 150px;
  color:var(--muted);
  font-size:13px;
}

.emoji-panel{
  position:absolute;
  right:80px;
  bottom:76px;
  width:min(420px, calc(100vw - 40px));
  max-height:310px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(8, 42px);
  gap:8px;
  padding:12px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.97);
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  z-index:80;
}
.emoji-panel[hidden]{display:none}
.emoji-panel button{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
}

.teamchat-sheet-overlay,
.image-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  background:rgba(2,6,23,.54);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.teamchat-sheet{
  width:min(560px,100%);
  max-height:min(78dvh,680px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.20);
  border-radius:28px;
  background:rgba(13,25,35,.98);
  color:#f8fafc;
  box-shadow:0 30px 110px rgba(0,0,0,.55);
  padding:14px;
}
.sheet-head{
  position:sticky;
  top:-14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 2px 12px;
  background:rgba(13,25,35,.98);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sheet-close,
.image-viewer-close{
  width:40px;
  height:40px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
}
.reaction-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(38px,1fr));
  gap:8px;
  padding-top:12px;
}
.reaction-option{
  height:46px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
}
.forward-list{
  display:grid;
  gap:8px;
  padding-top:12px;
}
.forward-target{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 28px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  text-align:left;
}
.forward-main{
  min-width:0;
}
.forward-main strong,
.forward-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forward-main small{
  color:#cbd5e1;
}

.image-viewer-overlay{
  align-items:center;
}
.image-viewer-dialog{
  width:min(1120px, 94vw);
  max-height:92dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  background:rgba(15,23,42,.98);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.image-viewer-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  padding:12px 14px 13px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.image-viewer-title-row-v66n{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.image-viewer-head strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.image-viewer-head span,
.image-viewer-actions-v66n{
  display:flex;
  align-items:center;
  gap:8px;
}
.image-viewer-actions-v66n{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.image-viewer-head a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.image-viewer-original{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-decoration:none;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.image-viewer-body{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:12px;
}
.image-viewer-body img{
  max-width:100%;
  max-height:calc(92dvh - 132px);
  object-fit:contain;
  border-radius:18px;
}

.hbn-header-participant-search-panel[hidden]{display:none}
.hbn-header-participant-search-panel{
  position:fixed;
  inset:0;
  z-index:180;
  display:grid;
  place-items:start center;
  padding:80px 16px 16px;
  background:rgba(2,6,23,.45);
}
.hbn-header-participant-search-card{
  width:min(520px,100%);
  border-radius:24px;
  background:var(--card);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  padding:16px;
}
.hbn-header-participant-search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hbn-header-participant-search-head button,
.hbn-participant-search-clear{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.75);
}
.hbn-participant-search{
  margin-top:12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.hbn-participant-search input{
  min-width:0;
  flex:1;
  height:44px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0 12px;
}
.hbn-header-participant-search-hint,
.hbn-participant-search-empty{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

@media (max-width:900px){
  .app-shell{
    grid-template-columns:300px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }
  .chat-header-actions{
    gap:5px;
  }
  .chat-header-actions button,
  .chat-header-actions a{
    width:38px;
    height:38px;
  }
}

@media (max-width:760px){
  html,body{
    width:100%;
    max-width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    position:fixed;
    inset:0;
  }
  .app-shell{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    display:block;
    padding:0;
    overflow:hidden;
    background:var(--bg);
  }

  .room-panel,
  .chat-panel{
    position:absolute;
    inset:0;
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
    transition:transform .22s ease;
    overflow:hidden;
  }

  .room-panel{
    z-index:20;
    transform:translate3d(-100%,0,0);
    background:var(--panel);
  }
  .chat-panel{
    z-index:10;
    transform:translate3d(0,0,0);
  }

  body.mobile-pane-list .room-panel{
    transform:translate3d(0,0,0);
    pointer-events:auto;
  }
  body.mobile-pane-list .chat-panel{
    transform:translate3d(100%,0,0);
    pointer-events:none;
  }
  body.mobile-pane-messages .room-panel{
    transform:translate3d(-100%,0,0);
    pointer-events:none;
  }
  body.mobile-pane-messages .chat-panel{
    transform:translate3d(0,0,0);
    pointer-events:auto;
  }

  .mobile-menu{
    display:grid;
    place-items:center;
    flex:0 0 42px;
  }
  .mobile-room-close{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(15,23,42,.90);
    color:#fff;
    font-size:26px;
    line-height:1;
  }
  .panel-header{
    padding:10px 12px;
  }
  .room-list,
  .direct-list,
  .hbn-groups-list{
    max-height:none;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior:contain;
  }
  .chat-header{
    padding:8px 10px;
    gap:8px;
  }
  .chat-title-row{
    gap:8px;
  }
  .chat-room-icon{
    width:36px;
    height:36px;
    border-radius:18px;
  }
  .chat-header-actions{
    gap:4px;
  }
  .chat-header-actions button,
  .chat-header-actions a{
    width:36px;
    height:36px;
    border-radius:13px;
    font-size:13px;
  }
  #roomStatus{
    display:none;
  }
  .messages{
    padding:12px 10px 12px;
    overflow-y:auto;
    overflow-x:hidden;
    max-width:100vw;
    touch-action:pan-y;
  }
  .message{
    gap:8px;
    margin-bottom:10px;
  }
  .message.mine{
    padding-left:22px;
  }
  .message:not(.mine){
    padding-right:22px;
  }
  .message-content{
    max-width:calc(100vw - 82px);
  }
  .message-avatar{
    width:30px;
    height:30px;
    border-radius:12px;
  }
  .msg-meta{
    font-size:11px;
  }
  .message-actions{
    gap:3px;
  }
  .message-action{
    width:30px;
    height:30px;
    font-size:12px;
  }
  .bubble{
    padding:10px 12px;
    border-radius:18px;
  }
  .attachment-image img{
    max-width:calc(100vw - 110px);
    max-height:230px;
  }
  .composer-wrap{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .composer{
    grid-template-columns:40px 40px 40px minmax(0,1fr) 44px;
    gap:6px;
  }
  .icon-btn,
  .file-btn,
  .send-btn{
    height:42px;
    border-radius:15px;
  }
  #messageInput{
    min-height:42px;
    border-radius:16px;
  }
  .file-preview{
    margin-left:0;
  }
  .emoji-panel{
    position:fixed;
    left:8px;
    right:8px;
    bottom:72px;
    width:auto;
    max-height:40dvh;
    grid-template-columns:repeat(7, minmax(36px,1fr));
    z-index:120;
  }
  .emoji-panel button{
    width:auto;
    height:42px;
  }
  .reaction-grid{
    grid-template-columns:repeat(6, minmax(38px,1fr));
  }
  .teamchat-sheet-overlay{
    padding:0;
  }
  .teamchat-sheet{
    width:100%;
    max-height:78dvh;
    border-radius:28px 28px 0 0;
  }

  body.mobile-chat-mode::before,
  body.mobile-chat-mode::after,
  .room-panel::before,
  .room-panel::after,
  .chat-panel::before,
  .chat-panel::after,
  .drawer-handle,
  .room-drawer-handle,
  .mobile-drawer-handle,
  .side-handle,
  .edge-handle,
  .drawer-tab,
  .side-tab,
  .mobile-edge-tab,
  .mobile-room-handle,
  .room-panel-handle,
  .swipe-handle,
  .drag-handle,
  .offcanvas-handle,
  .offcanvas-tab,
  [class*="drawer-handle"],
  [class*="edge-handle"],
  [class*="side-handle"],
  [class*="drawer-tab"],
  [class*="edge-tab"],
  [class*="swipe-handle"],
  [class*="drag-handle"],
  [class*="offcanvas-handle"],
  [class*="offcanvas-tab"]{
    display:none!important;
    content:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* 2026-06-27: Cockpit-Overlay Header bereinigt + Chatbereiche korrekt einklappen */
.chat-header-actions [hidden],
.chat-header-actions .hbn-legacy-theme-compat,
.chat-header-actions #backgroundToggle,
.chat-header-actions #tilePaletteToggle,
.chat-header-actions #pwaInstallButton,
.chat-header-actions .header-install-btn{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}

.chat-header-actions{
  gap:8px!important;
}

.hbn-section-panel[hidden]{
  display:none!important;
}

.hbn-section-panel{
  display:grid;
  gap:8px;
}

.room-section-title[aria-expanded="false"] em{
  transform:rotate(0deg);
}

.room-section-title[aria-expanded="true"] em{
  transform:rotate(180deg);
}

.room-section-title small{
  min-width:max-content;
}

.room-section-title .hbn-section-unread-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#eeba30;
  box-shadow:0 0 0 3px rgba(238,186,48,.20);
  display:none;
}

.room-section-title.has-unread .hbn-section-unread-dot{
  display:inline-block;
}

@media(max-width:760px){
  .chat-header-actions{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none;
  }

  .chat-header-actions::-webkit-scrollbar{
    display:none;
  }

  .chat-header-actions .design-toggle,
  .chat-header-actions .bubble-toggle{
    flex:0 0 46px!important;
  }
}


/* 2026-06-27: Startzustand Chatbereiche */
.room-section-title.is-open,
.room-section-title[aria-expanded="true"]{
  background:rgba(207,232,215,.78);
  color:var(--text);
}

.hbn-section-panel.is-open{
  display:grid;
  gap:8px;
}

.hbn-section-panel[hidden]{
  display:none!important;
}


/* HBN_BUBBLE_SCHEMA_V63O: manuelle Bubble-Farbschemata mit Swatches */
/* 2026-06-27: echte Design- und Bubble-Auswahl */
body[data-palette="pastell"],
body[data-palette="pastellmix"]{
  --bg:#f6f8f4; --panel:#ffffff; --panel-2:#eef5ef; --text:#20312d; --muted:#718079; --line:rgba(18,61,54,.12);
  --accent:#8fb9a0; --accent-2:#eeba30; --bubble-in:#ffffff; --bubble-out:#d9f2e4;
}
body[data-palette="softrot"]{
  --bg:#fff7f5; --panel:#fffdfb; --panel-2:#fdecef; --text:#39272b; --muted:#7e6568; --line:rgba(185,61,83,.18);
  --accent:#d95f73; --accent-2:#d9a85f; --bubble-in:#fff8f4; --bubble-out:#ffd9df;
}
body[data-palette="hell"]{
  --bg:#fbfcfd; --panel:#ffffff; --panel-2:#f2f5f7; --text:#182230; --muted:#667085; --line:rgba(16,24,40,.12);
  --accent:#5c8d89; --accent-2:#d9a72f; --bubble-in:#ffffff; --bubble-out:#eaf7f1;
}
body[data-palette="modern"]{
  --bg:#eef2f6; --panel:#ffffff; --panel-2:#e6ebf1; --text:#17212f; --muted:#607083; --line:rgba(15,23,42,.14);
  --accent:#344e5c; --accent-2:#4f8ca8; --bubble-in:#ffffff; --bubble-out:#dfeaf2;
}
body[data-palette="natur"]{
  --bg:#f4efe6; --panel:#fffaf0; --panel-2:#efe5d1; --text:#26352b; --muted:#7a715f; --line:rgba(82,64,37,.16);
  --accent:#76916d; --accent-2:#c69344; --bubble-in:#fffaf0; --bubble-out:#e5efd8;
}
body[data-palette="gruenblau"]{
  --bg:#eef7f7; --panel:#ffffff; --panel-2:#dcefed; --text:#173130; --muted:#5f7a78; --line:rgba(18,61,54,.14);
  --accent:#159895; --accent-2:#3aa0c3; --bubble-in:#ffffff; --bubble-out:#d7f5ef;
}
body[data-palette="dark"]{
  --bg:#071015; --panel:rgba(9,18,24,.84); --panel-2:rgba(16,29,38,.82); --text:#f5f8f7; --muted:#a7b8b7; --line:rgba(214,232,228,.14);
  --accent:#78dec1; --accent-2:#e0bd67; --bubble-in:rgba(17,31,39,.90); --bubble-out:rgba(18,83,62,.92);
}
body[data-palette="stern"]{
  --bg:#050816; --panel:#0b1222; --panel-2:#111a2f; --text:#f8fafc; --muted:#a7b3c6; --line:rgba(255,255,255,.14);
  --accent:#a78bfa; --accent-2:#fbbf24; --bubble-in:#111a2f; --bubble-out:#1e2b4a;
  background:radial-gradient(circle at 20% 20%, rgba(167,139,250,.18), transparent 26%), radial-gradient(circle at 76% 12%, rgba(125,211,252,.14), transparent 24%), linear-gradient(180deg, #050816, #080b18)!important;
}
body[data-bubble="mint"]{ --bubble-out:#d9f7e8; }
body[data-bubble="sand"]{ --bubble-out:#f3e4c9; }
body[data-bubble="blau"]{ --bubble-out:#d8ebff; }
body[data-bubble="rose"]{ --bubble-out:#f8dbe5; }
body[data-bubble="gold"]{ --bubble-out:#e8c46a; }
body[data-bubble="gruen"]{ --bubble-out:#cfe9d7; }
body[data-bubble="petrol"]{ --bubble-out:#164e4a; }
body[data-bubble="violett"]{ --bubble-out:#5b4a86; }
body[data-bubble="hellgrau"]{ --bubble-out:#e7edf2; }
body[data-bubble="grau"]{ --bubble-out:#c9d1dc; }
body[data-bubble="schiefer"]{ --bubble-out:#354252; }
body[data-bubble="anthrazit"]{ --bubble-out:#263241; }
body[data-bubble="anthrazit"] .message.mine .bubble,
body[data-bubble="petrol"] .message.mine .bubble,
body[data-bubble="violett"] .message.mine .bubble,
body[data-bubble="schiefer"] .message.mine .bubble{ color:#f8fafc; }

.hbn-choice-overlay{
  position:fixed; inset:0; z-index:2147483700; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(2,6,23,.45); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.hbn-choice-sheet{
  width:min(580px,92vw); max-height:min(680px,82vh); overflow:auto; border-radius:24px; border:1px solid rgba(148,163,184,.22);
  background:var(--panel); color:var(--text); box-shadow:0 24px 80px rgba(2,6,23,.32);
}
.hbn-choice-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.hbn-choice-head strong{ display:block; font-size:15px; font-weight:900; }
.hbn-choice-head small{ display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.3; }
.hbn-choice-close{
  width:40px; height:40px; border-radius:14px; border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  display:grid; place-items:center; font-size:22px; cursor:pointer;
}
.hbn-choice-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:12px; }
.hbn-choice-option{
  min-height:72px; display:grid; grid-template-columns:40px minmax(0,1fr) 24px; align-items:center; gap:10px; padding:10px 11px;
  border-radius:18px; border:1px solid var(--line); background:var(--panel); color:var(--text); text-align:left; cursor:pointer;
}
.hbn-choice-option.active{
  border-color:var(--accent); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel));
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}
.hbn-choice-icon{
  width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:var(--panel-2); font-size:19px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.hbn-choice-sheet-bubble .hbn-choice-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.hbn-choice-sheet-design{
  overscroll-behavior:contain;
}
.hbn-choice-sheet-design .hbn-choice-grid{
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
}
.hbn-choice-swatch-v63o{
  position:relative;
  overflow:hidden;
  font-size:0!important;
  background:linear-gradient(135deg,var(--hbn-choice-swatch),var(--hbn-choice-swatch-2))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), 0 10px 22px rgba(2,6,23,.12);
}
.hbn-choice-swatch-v63o::before{
  content:"";
  position:absolute;
  inset:8px auto auto 8px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  box-shadow:0 0 0 1px rgba(15,23,42,.08);
}
.hbn-choice-swatch-v63o::after{
  content:"";
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
.hbn-choice-icon[data-choice="pastell"]{ background:linear-gradient(135deg,#d9f2e4,#f7ead8); }
.hbn-choice-icon[data-choice="softrot"]{ background:linear-gradient(135deg,#ffd9df,#d95f73); color:#7f1d2d; }
.hbn-choice-icon[data-choice="hell"]{ background:linear-gradient(135deg,#ffffff,#edf2f7); }
.hbn-choice-icon[data-choice="modern"]{ background:linear-gradient(135deg,#dfeaf2,#94a3b8); }
.hbn-choice-icon[data-choice="natur"]{ background:linear-gradient(135deg,#e5efd8,#c69344); }
.hbn-choice-icon[data-choice="gruenblau"]{ background:linear-gradient(135deg,#d7f5ef,#3aa0c3); }
.hbn-choice-icon[data-choice="dark"]{ background:linear-gradient(135deg,#071015,#17252e); color:#d8fff1; }
.hbn-choice-icon[data-choice="stern"]{ background:linear-gradient(135deg,#050816,#312e81); color:#fff; }
.hbn-choice-text strong{ display:block; font-size:14px; font-weight:900; }
.hbn-choice-text small{ display:block; margin-top:2px; font-size:11px; line-height:1.25; color:var(--muted); }
.hbn-choice-check{
  width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:var(--accent); color:#fff;
  opacity:0; transform:scale(.9);
}
.hbn-choice-option.active .hbn-choice-check{ opacity:1; transform:scale(1); }
body.hbn-choice-open{ overflow:hidden; }

@media(max-width:760px){
  .hbn-choice-overlay{ align-items:flex-end; padding:10px 10px 0; }
  .hbn-choice-sheet{ width:calc(100vw - 20px); max-height:78vh; border-radius:24px 24px 0 0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .hbn-choice-sheet-design{ max-height:82vh; }
  .hbn-choice-head{ padding:13px 14px; }
  .hbn-choice-head strong{ font-size:14px; }
  .hbn-choice-head small{ font-size:11px; }
  .hbn-choice-close{ width:38px; height:38px; font-size:20px; }
  .hbn-choice-grid{ grid-template-columns:1fr; gap:8px; padding:10px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .hbn-choice-option{ min-height:66px; grid-template-columns:36px minmax(0,1fr) 22px; gap:9px; padding:9px 10px; border-radius:16px; }
  .hbn-choice-icon{ width:36px; height:36px; border-radius:12px; font-size:17px; }
  .hbn-choice-text strong{ font-size:13px; }
  .hbn-choice-text small{ font-size:10px; }
  .hbn-choice-check{ width:22px; height:22px; font-size:12px; }
  .hbn-choice-sheet-design .hbn-choice-grid{ padding-bottom:calc(42px + env(safe-area-inset-bottom,0px)); }
}


/* 2026-06-27: Sternenhimmel-Design mit echten Background-Dateien
   Dateien liegen unter /teamchat/assets/backgrounds/ */
body[data-palette="stern"]{
  --bg:#050816;
  --panel:rgba(11,18,34,.78);
  --panel-2:rgba(17,26,47,.74);
  --text:#f8fafc;
  --muted:#a7b3c6;
  --line:rgba(255,255,255,.16);
  --accent:#7dd3fc;
  --accent-2:#fbbf24;
  --bubble-in:rgba(17,26,47,.86);
  --bubble-out:rgba(30,43,74,.88);
  background-color:#050816!important;
  background-image:
    linear-gradient(180deg, rgba(5,8,22,.12), rgba(5,8,22,.44)),
    url("backgrounds/teamchat-sternenhimmel-desktop-1600x900.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

body[data-palette="stern"] .app-shell{
  background:transparent!important;
}

body[data-palette="stern"] .room-panel,
body[data-palette="stern"] .chat-panel,
body[data-palette="stern"] .chat-header,
body[data-palette="stern"] .composer-wrap{
  background:rgba(5,8,22,.70)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

body[data-palette="stern"] .messages,
body[data-palette="stern"] #messages{
  background:rgba(5,8,22,.32)!important;
}

body[data-palette="stern"] .bubble,
body[data-palette="stern"] .message.mine .bubble{
  box-shadow:0 18px 52px rgba(0,0,0,.28)!important;
}

body[data-palette="stern"] .room-section-title,
body[data-palette="stern"] .room-item,
body[data-palette="stern"] .direct-user{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.12)!important;
}

body[data-palette="stern"] .room-item.active{
  background:linear-gradient(135deg, rgba(125,211,252,.22), rgba(167,139,250,.16))!important;
  border-color:rgba(125,211,252,.32)!important;
}

body[data-palette="stern"] .hbn-choice-sheet{
  background:rgba(11,18,34,.96)!important;
  border-color:rgba(255,255,255,.16)!important;
}

@media(max-width:760px){
  body[data-palette="stern"]{
    background-image:
      linear-gradient(180deg, rgba(5,8,22,.08), rgba(5,8,22,.42)),
      url("backgrounds/teamchat-sternenhimmel-mobile-720x1280.webp")!important;
    background-position:center top!important;
    background-attachment:scroll!important;
  }
}

@media(max-width:760px) and (-webkit-min-device-pixel-ratio:2),
       (max-width:760px) and (min-resolution:2dppx){
  body[data-palette="stern"]{
    background-image:
      linear-gradient(180deg, rgba(5,8,22,.08), rgba(5,8,22,.42)),
      url("backgrounds/teamchat-sternenhimmel-retina-1080x1920.webp")!important;
  }
}

/* 2026-06-27: Handy Performance-Fix */
@media(max-width:760px){
  body.teamchat-mobile-performance,
  body{
    -webkit-tap-highlight-color:transparent;
  }

  /* Teure GPU-Effekte auf Handy reduzieren */
  body.teamchat-mobile-performance .room-panel,
  body.teamchat-mobile-performance .chat-panel,
  body.teamchat-mobile-performance .chat-header,
  body.teamchat-mobile-performance .composer-wrap,
  body.teamchat-mobile-performance .hbn-choice-sheet,
  body.teamchat-mobile-performance .teamchat-sheet,
  body.teamchat-mobile-performance .image-viewer-dialog{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.teamchat-mobile-performance .room-item,
  body.teamchat-mobile-performance .direct-user,
  body.teamchat-mobile-performance .bubble,
  body.teamchat-mobile-performance .composer,
  body.teamchat-mobile-performance .message-action,
  body.teamchat-mobile-performance .hbn-choice-option{
    box-shadow:none!important;
  }

  /* Sternenhimmel auf Handy bewusst mit der leichteren Mobile-Datei, kein Retina-Zwang */
  body.teamchat-mobile-performance[data-palette="stern"]{
    background-image:
      linear-gradient(180deg, rgba(5,8,22,.10), rgba(5,8,22,.48)),
      url("backgrounds/teamchat-sternenhimmel-mobile-720x1280.webp")!important;
    background-size:cover!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-attachment:scroll!important;
  }

  /* Bestehende Retina-Regel auf Handy übersteuern */
  body.teamchat-mobile-performance[data-palette="stern"]::before{
    content:none!important;
    display:none!important;
  }

  /* Große Listen/Nachrichten günstiger rendern */
  body.teamchat-mobile-performance .messages,
  body.teamchat-mobile-performance #messages{
    contain:layout paint!important;
    will-change:scroll-position!important;
  }

  body.teamchat-mobile-performance .message{
    contain:layout paint style!important;
  }

  @supports (content-visibility:auto){
    body.teamchat-mobile-performance .message{
      content-visibility:auto;
      contain-intrinsic-size:92px;
    }
  }

  body.teamchat-mobile-performance .attachment.attachment-image img,
  body.teamchat-mobile-performance .bubble img{
    max-height:220px!important;
    object-fit:cover!important;
  }

  body.teamchat-mobile-performance .chat-header-actions{
    contain:layout paint!important;
  }

  /* Während Scrollen keine unnötigen Filter/Übergänge */
  body.teamchat-is-scrolling .message,
  body.teamchat-is-scrolling .bubble,
  body.teamchat-is-scrolling .message-action,
  body.teamchat-is-scrolling .reaction-pill{
    transition:none!important;
    animation:none!important;
  }

  body.teamchat-is-scrolling .message-action,
  body.teamchat-is-scrolling .reaction-pill{
    box-shadow:none!important;
  }

  /* Auswahlfenster auf Handy leichter */
  body.teamchat-mobile-performance .hbn-choice-overlay{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(2,6,23,.34)!important;
  }

  body.teamchat-mobile-performance .hbn-choice-grid{
    gap:8px!important;
  }

  body.teamchat-mobile-performance .hbn-choice-option{
    min-height:72px!important;
  }
}


/* 2026-06-27: Gruppen wirklich einklappen */
.hbn-section-item-hidden,
.room-item.hbn-section-item-hidden,
.direct-user.hbn-section-item-hidden{
  display:none!important;
}

.hbn-section-panel-groups[hidden]{
  display:none!important;
}


/* 2026-08-14: Darkmodus nutzt das Chat-Muster-Hintergrundbild */
body[data-palette="dark"]{
  --bg:#071015;
  --panel:rgba(9,18,24,.84);
  --panel-2:rgba(16,29,38,.82);
  --text:#f8fafc;
  --muted:#a7b8b7;
  --line:rgba(214,232,228,.14);
  --accent:#78dec1;
  --accent-2:#e0bd67;
  --bubble-in:rgba(17,31,39,.90);
  --bubble-out:rgba(18,83,62,.92);
  background-color:#071015!important;
  background-image:
    linear-gradient(180deg, rgba(7,16,21,.08), rgba(7,16,21,.34)),
    url("backgrounds/teamchat-doodle-dark-v65n-720x1280.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

body[data-palette="dark"] .app-shell{
  background:transparent!important;
}

body[data-palette="dark"] .messages,
body[data-palette="dark"] #messages,
body[data-palette="dark"] .chat-panel{
  background:rgba(7,16,21,.22)!important;
}

body[data-palette="dark"] .chat-header,
body[data-palette="dark"] .composer-wrap,
body[data-palette="dark"] .composer{
  background:rgba(7,16,21,.72)!important;
  border-color:rgba(214,232,228,.12)!important;
  backdrop-filter:blur(13px)!important;
  -webkit-backdrop-filter:blur(13px)!important;
}

body[data-palette="dark"] .composer-wrap{
  box-shadow:0 -18px 44px rgba(0,0,0,.42)!important;
}

body[data-palette="dark"] #messageInput,
body[data-palette="dark"] .composer textarea,
body[data-palette="dark"] textarea[name="message"]{
  background:rgba(8,18,26,.92)!important;
  color:#f8fafc!important;
  border-color:rgba(214,232,228,.16)!important;
}

body[data-palette="dark"] #messageInput::placeholder,
body[data-palette="dark"] .composer textarea::placeholder{
  color:rgba(226,232,240,.62)!important;
}

body[data-palette="dark"] .icon-btn,
body[data-palette="dark"] .file-btn,
body[data-palette="dark"] .send-btn{
  border-color:rgba(214,232,228,.16)!important;
}

body[data-palette="dark"] .bubble{
  background:rgba(17,31,39,.90)!important;
  color:#f8fafc!important;
  border-color:rgba(214,232,228,.16)!important;
}

body[data-palette="dark"] .message.mine .bubble{
  background:var(--bubble-out)!important;
  color:#f8fafc!important;
  border-color:rgba(120,222,193,.24)!important;
}

body[data-palette="dark"] .room-panel,
body[data-palette="dark"] .room-section-title,
body[data-palette="dark"] .room-item,
body[data-palette="dark"] .direct-user,
body[data-palette="dark"] .hbn-choice-sheet,
body[data-palette="dark"] .hbn-attachment-menu{
  background:rgba(15,29,38,.78)!important;
  border-color:rgba(214,232,228,.12)!important;
}

body[data-palette="dark"] .room-item.active,
body[data-palette="dark"] .direct-user.active{
  background:linear-gradient(135deg, rgba(18,83,62,.92), rgba(22,57,74,.76))!important;
  border-color:rgba(120,222,193,.34)!important;
}

@media(max-width:760px){
  body[data-palette="dark"]{
    background-position:center top!important;
    background-attachment:scroll!important;
  }
}

/* Zusätzliche dunkle Bubble-Farben */
body[data-bubble="nachtblau"]{ --bubble-out:#0f2742; }
body[data-bubble="tanne"]{ --bubble-out:#123326; }
body[data-bubble="tanne-anthrazit"]{ --bubble-out:#123326; }
body[data-bubble="bordeaux"]{ --bubble-out:#4a1723; }
body[data-bubble="graphit"]{ --bubble-out:#151a23; }

body[data-bubble="nachtblau"] .message.mine .bubble,
body[data-bubble="tanne"] .message.mine .bubble,
body[data-bubble="bordeaux"] .message.mine .bubble,
body[data-bubble="graphit"] .message.mine .bubble{
  color:#f8fafc!important;
  border-color:rgba(255,255,255,.12)!important;
}

/* Auch im Sternenhimmel darf die Eingabe nicht hell wirken */
body[data-palette="stern"] .composer-wrap,
body[data-palette="stern"] .composer{
  background:rgba(3,7,18,.92)!important;
  border-color:rgba(226,232,240,.13)!important;
}

body[data-palette="stern"] #messageInput,
body[data-palette="stern"] .composer textarea,
body[data-palette="stern"] textarea[name="message"]{
  background:rgba(11,18,32,.96)!important;
  color:#f8fafc!important;
  border-color:rgba(148,163,184,.22)!important;
}

body[data-palette="stern"] #messageInput::placeholder,
body[data-palette="stern"] .composer textarea::placeholder{
  color:#a7b3c6!important;
}

@media(max-width:760px){
  body[data-palette="dark"] .composer-wrap,
  body[data-palette="stern"] .composer-wrap{
    background:rgba(3,7,18,.98)!important;
  }

  body[data-palette="dark"] #messageInput,
  body[data-palette="stern"] #messageInput{
    min-height:46px!important;
  }
}


.hbn-choice-icon[data-choice="nachtblau"]{ background:linear-gradient(135deg,#0f2742,#07111f); color:#fff; }
.hbn-choice-icon[data-choice="tanne"]{ background:linear-gradient(135deg,#123326,#071b13); color:#fff; }
.hbn-choice-icon[data-choice="bordeaux"]{ background:linear-gradient(135deg,#4a1723,#1f0710); color:#fff; }
.hbn-choice-icon[data-choice="graphit"]{ background:linear-gradient(135deg,#151a23,#05070b); color:#fff; }


/* 2026-06-27: Desktop-Nachrichten wieder als lesbarer Verlauf links + breitere Chatleiste */
@media (min-width:761px){
  /* Linke Chatleiste etwas breiter */
  .app-shell{
    grid-template-columns:320px minmax(0,1fr)!important;
  }

  .room-panel{
    width:320px!important;
    min-width:320px!important;
    max-width:320px!important;
  }

  .chat-panel{
    min-width:0!important;
  }

  /* Nachrichten nicht mehr über die komplette Fläche rechts/links auseinanderziehen */
  .messages,
  #messages{
    display:block!important;
    padding:20px 24px 104px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .messages .message{
    width:min(760px, calc(100% - 24px))!important;
    max-width:760px!important;
    margin:0 0 12px 0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:end!important;
    gap:10px!important;
    justify-content:start!important;
    transform:none!important;
  }

  /* Eigene Nachrichten nur leicht versetzen, nicht ganz nach rechts schieben */
  .messages .message.mine{
    margin-left:46px!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    flex-direction:row!important;
    justify-content:start!important;
    grid-template-columns:38px minmax(0,1fr)!important;
  }

  .messages .message:not(.mine){
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .messages .message .message-content{
    width:auto!important;
    max-width:680px!important;
    min-width:0!important;
    margin:0!important;
  }

  .messages .message.mine .message-content,
  .messages .message:not(.mine) .message-content{
    margin:0!important;
  }

  .messages .message .message-avatar{
    grid-column:1!important;
    align-self:end!important;
    margin:0!important;
  }

  .messages .message .bubble{
    max-width:680px!important;
    width:max-content!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    text-align:left!important;
  }

  .messages .message .bubble:has(img),
  .messages .message .bubble:has(.attachment-image){
    width:auto!important;
  }

  .messages .message.mine .bubble{
    margin:0!important;
  }

  .messages .message .msg-meta{
    justify-content:flex-start!important;
    text-align:left!important;
    margin:0 0 4px!important;
  }

  .messages .message.mine .msg-meta{
    justify-content:flex-start!important;
    text-align:left!important;
  }

  .messages .message-actions{
    justify-content:flex-start!important;
  }

  .messages .message-reactions,
  .messages .reaction-row{
    justify-content:flex-start!important;
    margin-left:0!important;
  }

  .messages .message.mine + .message:not(.mine),
  .messages .message:not(.mine) + .message.mine{
    margin-top:14px!important;
  }

  /* Bilder im Verlauf kompakter halten */
  .messages .attachment.attachment-image img{
    max-width:min(410px, 100%)!important;
    max-height:300px!important;
    object-fit:cover!important;
  }
}

/* etwas breiter auch im Cockpit-Overlay bei mittelgroßer Breite */
@media (min-width:761px) and (max-width:1180px){
  .app-shell{
    grid-template-columns:300px minmax(0,1fr)!important;
  }

  .room-panel{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
  }

  .messages .message{
    width:min(680px, calc(100% - 20px))!important;
    max-width:680px!important;
  }

  .messages .message.mine{
    margin-left:34px!important;
  }

  .messages .message .message-content,
  .messages .message .bubble{
    max-width:610px!important;
  }
}


/* 2026-06-27: Bubble-Farbe wirklich erzwingen
   Ursache: ältere Regeln setzen .message.mine .bubble mit hellen Farben und !important.
   Diese Regeln stehen bewusst ganz am Ende und sind stärker. */

body[data-bubble="standard"]{
  --hbn-own-bubble-bg:var(--bubble-out, #d9f2e4);
  --hbn-own-bubble-text:var(--text, #20312d);
}

body[data-bubble="mint"]{
  --hbn-own-bubble-bg:#d9f7e8;
  --hbn-own-bubble-text:#173130;
}

body[data-bubble="sand"]{
  --hbn-own-bubble-bg:#f3e4c9;
  --hbn-own-bubble-text:#26352b;
}

body[data-bubble="blau"]{
  --hbn-own-bubble-bg:#d8ebff;
  --hbn-own-bubble-text:#17212f;
}

body[data-bubble="rose"]{
  --hbn-own-bubble-bg:#f8dbe5;
  --hbn-own-bubble-text:#2b2026;
}

body[data-bubble="gold"]{
  --hbn-own-bubble-bg:#e8c46a;
  --hbn-own-bubble-text:#182230;
}

body[data-bubble="gruen"]{
  --hbn-own-bubble-bg:#cfe9d7;
  --hbn-own-bubble-text:#173130;
}

body[data-bubble="petrol"]{
  --hbn-own-bubble-bg:#164e4a;
  --hbn-own-bubble-text:#f2fffb;
}

body[data-bubble="violett"]{
  --hbn-own-bubble-bg:#5b4a86;
  --hbn-own-bubble-text:#fbf8ff;
}

body[data-bubble="hellgrau"]{
  --hbn-own-bubble-bg:#e7edf2;
  --hbn-own-bubble-text:#182230;
}

body[data-bubble="grau"]{
  --hbn-own-bubble-bg:#c9d1dc;
  --hbn-own-bubble-text:#182230;
}

body[data-bubble="schiefer"]{
  --hbn-own-bubble-bg:#354252;
  --hbn-own-bubble-text:#f8fafc;
}

body[data-bubble="anthrazit"]{
  --hbn-own-bubble-bg:#263241;
  --hbn-own-bubble-text:#f8fafc;
}

body[data-bubble="nachtblau"]{
  --hbn-own-bubble-bg:#0f2742;
  --hbn-own-bubble-text:#f8fafc;
}

body[data-bubble="tanne"]{
  --hbn-own-bubble-bg:#123326;
  --hbn-own-bubble-text:#f8fafc;
}

body[data-bubble="tanne-anthrazit"]{
  --hbn-own-bubble-bg:#123326;
  --hbn-own-bubble-text:#f8fafc;
  --hbn-other-bubble-bg:#263241;
  --hbn-other-bubble-text:#f8fafc;
}

body[data-bubble="bordeaux"]{
  --hbn-own-bubble-bg:#4a1723;
  --hbn-own-bubble-text:#fff7f8;
}

body[data-bubble="graphit"]{
  --hbn-own-bubble-bg:#151a23;
  --hbn-own-bubble-text:#f8fafc;
}

/* Eigene Nachrichten: Desktop + Handy + Cockpit-Overlay */
html body[data-bubble] .messages .message.mine .bubble,
html body[data-bubble] #messages .message.mine .bubble,
html body[data-bubble] .message.mine .message-content .bubble,
html body[data-bubble] article.message.mine .bubble{
  background:var(--hbn-own-bubble-bg)!important;
  background-color:var(--hbn-own-bubble-bg)!important;
  background-image:none!important;
  color:var(--hbn-own-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-own-bubble-bg) 68%, white 18%)!important;
}

/* Text und Links innerhalb eigener dunkler Bubbles gut lesbar */
html body[data-bubble] .message.mine .bubble *,
html body[data-bubble] .message.mine .bubble a{
  color:inherit!important;
}

html body[data-bubble="graphit"] .message.mine .bubble,
html body[data-bubble="nachtblau"] .message.mine .bubble,
html body[data-bubble="tanne"] .message.mine .bubble,
html body[data-bubble="tanne-anthrazit"] .message.mine .bubble,
html body[data-bubble="bordeaux"] .message.mine .bubble,
html body[data-bubble="anthrazit"] .message.mine .bubble,
html body[data-bubble="petrol"] .message.mine .bubble,
html body[data-bubble="violett"] .message.mine .bubble,
html body[data-bubble="schiefer"] .message.mine .bubble{
  box-shadow:0 14px 34px rgba(0,0,0,.30)!important;
}

/* Reaktions-/Auswahlvorschau passend einfärben */
.hbn-choice-icon[data-choice="nachtblau"]{ background:linear-gradient(135deg,#0f2742,#07111f)!important; color:#fff!important; }
.hbn-choice-icon[data-choice="tanne"]{ background:linear-gradient(135deg,#123326,#071b13)!important; color:#fff!important; }
.hbn-choice-icon[data-choice="tanne-anthrazit"]{ background:linear-gradient(135deg,#123326 0 50%,#263241 50% 100%)!important; color:#fff!important; }
.hbn-choice-icon[data-choice="bordeaux"]{ background:linear-gradient(135deg,#4a1723,#1f0710)!important; color:#fff!important; }
.hbn-choice-icon[data-choice="graphit"]{ background:linear-gradient(135deg,#151a23,#05070b)!important; color:#fff!important; }


/* 2026-06-27: Partner-Bubbles an gewählte Bubble-Farbe angleichen
   Ziel: Bei dunkler eigener Bubble sollen fremde Nachrichten nicht mehr grell hell bleiben,
   sondern nur leicht abweichen. */

/* Helle Schemata bleiben freundlich, aber etwas harmonischer */
body[data-bubble="mint"]{
  --hbn-other-bubble-bg:#eef7f2;
  --hbn-other-bubble-text:#23332f;
}
body[data-bubble="sand"]{
  --hbn-other-bubble-bg:#f8eedb;
  --hbn-other-bubble-text:#302a20;
}
body[data-bubble="blau"]{
  --hbn-other-bubble-bg:#eaf4ff;
  --hbn-other-bubble-text:#1e2c3a;
}
body[data-bubble="rose"]{
  --hbn-other-bubble-bg:#faeaf0;
  --hbn-other-bubble-text:#30242a;
}
body[data-bubble="gold"]{
  --hbn-other-bubble-bg:#fff4cf;
  --hbn-other-bubble-text:#302811;
}
body[data-bubble="gruen"]{
  --hbn-other-bubble-bg:#eff8f1;
  --hbn-other-bubble-text:#23332f;
}
body[data-bubble="petrol"]{
  --hbn-other-bubble-bg:#256864;
  --hbn-other-bubble-text:#effffb;
}
body[data-bubble="violett"]{
  --hbn-other-bubble-bg:#70619b;
  --hbn-other-bubble-text:#fbf8ff;
}
body[data-bubble="hellgrau"]{
  --hbn-other-bubble-bg:#f5f7fa;
  --hbn-other-bubble-text:#273344;
}
body[data-bubble="grau"]{
  --hbn-other-bubble-bg:#edf0f4;
  --hbn-other-bubble-text:#273344;
}
body[data-bubble="schiefer"]{
  --hbn-other-bubble-bg:#46566a;
  --hbn-other-bubble-text:#f8fafc;
}

/* Dunkle Bubble-Schemata: fremde Bubbles nur leicht anders, nicht mehr hellgrau */
body[data-bubble="anthrazit"]{
  --hbn-other-bubble-bg:#303a48;
  --hbn-other-bubble-text:#eef4ff;
}
body[data-bubble="nachtblau"]{
  --hbn-other-bubble-bg:#173557;
  --hbn-other-bubble-text:#eef6ff;
}
body[data-bubble="tanne"]{
  --hbn-other-bubble-bg:#1c4636;
  --hbn-other-bubble-text:#edfdf5;
}
body[data-bubble="tanne-anthrazit"]{
  --hbn-other-bubble-bg:#263241;
  --hbn-other-bubble-text:#f8fafc;
}
body[data-bubble="bordeaux"]{
  --hbn-other-bubble-bg:#612737;
  --hbn-other-bubble-text:#fff1f4;
}
body[data-bubble="graphit"]{
  --hbn-other-bubble-bg:#262d39;
  --hbn-other-bubble-text:#eef4ff;
}

/* Eingehende/fremde Nachrichten passend einfärben */
html body[data-bubble="mint"] .messages .message:not(.mine) .bubble,
html body[data-bubble="sand"] .messages .message:not(.mine) .bubble,
html body[data-bubble="blau"] .messages .message:not(.mine) .bubble,
html body[data-bubble="rose"] .messages .message:not(.mine) .bubble,
html body[data-bubble="gold"] .messages .message:not(.mine) .bubble,
html body[data-bubble="gruen"] .messages .message:not(.mine) .bubble,
html body[data-bubble="petrol"] .messages .message:not(.mine) .bubble,
html body[data-bubble="violett"] .messages .message:not(.mine) .bubble,
html body[data-bubble="hellgrau"] .messages .message:not(.mine) .bubble,
html body[data-bubble="grau"] .messages .message:not(.mine) .bubble,
html body[data-bubble="schiefer"] .messages .message:not(.mine) .bubble,
html body[data-bubble="anthrazit"] .messages .message:not(.mine) .bubble,
html body[data-bubble="nachtblau"] .messages .message:not(.mine) .bubble,
html body[data-bubble="tanne"] .messages .message:not(.mine) .bubble,
html body[data-bubble="bordeaux"] .messages .message:not(.mine) .bubble,
html body[data-bubble="graphit"] .messages .message:not(.mine) .bubble,
html body[data-bubble="mint"] #messages .message:not(.mine) .bubble,
html body[data-bubble="sand"] #messages .message:not(.mine) .bubble,
html body[data-bubble="blau"] #messages .message:not(.mine) .bubble,
html body[data-bubble="rose"] #messages .message:not(.mine) .bubble,
html body[data-bubble="gold"] #messages .message:not(.mine) .bubble,
html body[data-bubble="gruen"] #messages .message:not(.mine) .bubble,
html body[data-bubble="petrol"] #messages .message:not(.mine) .bubble,
html body[data-bubble="violett"] #messages .message:not(.mine) .bubble,
html body[data-bubble="hellgrau"] #messages .message:not(.mine) .bubble,
html body[data-bubble="grau"] #messages .message:not(.mine) .bubble,
html body[data-bubble="schiefer"] #messages .message:not(.mine) .bubble,
html body[data-bubble="anthrazit"] #messages .message:not(.mine) .bubble,
html body[data-bubble="nachtblau"] #messages .message:not(.mine) .bubble,
html body[data-bubble="tanne"] #messages .message:not(.mine) .bubble,
html body[data-bubble="bordeaux"] #messages .message:not(.mine) .bubble,
html body[data-bubble="graphit"] #messages .message:not(.mine) .bubble{
  background:var(--hbn-other-bubble-bg)!important;
  background-color:var(--hbn-other-bubble-bg)!important;
  background-image:none!important;
  color:var(--hbn-other-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-other-bubble-bg) 70%, white 16%)!important;
}

/* Text/Links in fremden Bubbles */
html body[data-bubble] .message:not(.mine) .bubble *,
html body[data-bubble] .message:not(.mine) .bubble a{
  color:inherit!important;
}

/* In Dark/Stern-Designs auch Standard-Bubbles harmonischer abdunkeln */
html body[data-palette="dark"][data-bubble="standard"] .message:not(.mine) .bubble,
html body[data-palette="stern"][data-bubble="standard"] .message:not(.mine) .bubble{
  background:#172033!important;
  background-color:#172033!important;
  background-image:none!important;
  color:#eef4ff!important;
  border-color:rgba(226,232,240,.12)!important;
}

html body[data-palette="dark"][data-bubble="standard"] .message.mine .bubble,
html body[data-palette="stern"][data-bubble="standard"] .message.mine .bubble{
  background:#123d36!important;
  background-color:#123d36!important;
  background-image:none!important;
  color:#f8fafc!important;
  border-color:rgba(125,211,252,.14)!important;
}

/* HBN_INOUT_BUBBLE_TINT_V63S: Eingang/Ausgang leicht unterscheidbar je Schema */
html body[data-bubble] .messages .message.mine .bubble,
html body[data-bubble] #messages .message.mine .bubble,
html body[data-bubble] article.message.mine .bubble{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hbn-own-bubble-bg) 94%, white 6%),
      color-mix(in srgb, var(--hbn-own-bubble-bg) 93%, #0f172a 7%)
    )!important;
  background-color:var(--hbn-own-bubble-bg)!important;
  color:var(--hbn-own-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-own-bubble-bg) 72%, white 18%)!important;
  box-shadow:
    inset -2px 0 0 color-mix(in srgb, var(--hbn-own-bubble-bg) 72%, white 20%),
    0 10px 24px rgba(2,6,23,.12)!important;
}

html body[data-bubble] .messages .message:not(.mine) .bubble,
html body[data-bubble] #messages .message:not(.mine) .bubble,
html body[data-bubble] article.message:not(.mine) .bubble{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hbn-other-bubble-bg) 88%, white 12%),
      color-mix(in srgb, var(--hbn-other-bubble-bg) 96%, var(--hbn-own-bubble-bg) 4%)
    )!important;
  background-color:var(--hbn-other-bubble-bg)!important;
  color:var(--hbn-other-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-other-bubble-bg) 68%, white 22%)!important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--hbn-other-bubble-bg) 68%, white 22%),
    0 8px 20px rgba(2,6,23,.09)!important;
}

html body[data-bubble] .message.mine .bubble *,
html body[data-bubble] .message.mine .bubble a,
html body[data-bubble] .message:not(.mine) .bubble *,
html body[data-bubble] .message:not(.mine) .bubble a{
  color:inherit!important;
}

/* V65O: eigene Nachrichten Tannengruen, eingehende Anthrazit, beide weiss. */
html body[data-bubble="tanne-anthrazit"] .messages .message.mine .bubble,
html body[data-bubble="tanne-anthrazit"] #messages .message.mine .bubble,
html body[data-bubble="tanne-anthrazit"] article.message.mine .bubble{
  background:#123326!important;
  background-color:#123326!important;
  background-image:none!important;
  color:#f8fafc!important;
  border-color:rgba(248,250,252,.18)!important;
}

html body[data-bubble="tanne-anthrazit"] .messages .message:not(.mine) .bubble,
html body[data-bubble="tanne-anthrazit"] #messages .message:not(.mine) .bubble,
html body[data-bubble="tanne-anthrazit"] article.message:not(.mine) .bubble{
  background:#263241!important;
  background-color:#263241!important;
  background-image:none!important;
  color:#f8fafc!important;
  border-color:rgba(248,250,252,.16)!important;
}

html body[data-bubble="tanne-anthrazit"] .message.mine .bubble *,
html body[data-bubble="tanne-anthrazit"] .message.mine .bubble a,
html body[data-bubble="tanne-anthrazit"] .message:not(.mine) .bubble *,
html body[data-bubble="tanne-anthrazit"] .message:not(.mine) .bubble a{
  color:#f8fafc!important;
}

/* Metadaten bei dunklen Bubble-Schemata etwas heller lesbar */
body[data-bubble="anthrazit"] .msg-meta,
body[data-bubble="nachtblau"] .msg-meta,
body[data-bubble="tanne"] .msg-meta,
body[data-bubble="tanne-anthrazit"] .msg-meta,
body[data-bubble="bordeaux"] .msg-meta,
body[data-bubble="graphit"] .msg-meta,
body[data-bubble="petrol"] .msg-meta,
body[data-bubble="violett"] .msg-meta,
body[data-bubble="schiefer"] .msg-meta{
  color:rgba(226,232,240,.78)!important;
}

/* HBN_ICON_BUBBLE_SYNC_V63Q: Aktions-Icons an Bubble-Farbe koppeln */
html body[data-bubble] .messages .message.mine .message-action,
html body[data-bubble] #messages .message.mine .message-action{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hbn-own-bubble-bg) 86%, white 10%),
      color-mix(in srgb, var(--hbn-own-bubble-bg) 78%, #0f172a 22%)
    )!important;
  color:var(--hbn-own-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-own-bubble-bg) 66%, white 20%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 18px rgba(2,6,23,.16)!important;
}

html body[data-bubble] .messages .message:not(.mine) .message-action,
html body[data-bubble] #messages .message:not(.mine) .message-action{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hbn-other-bubble-bg) 86%, white 8%),
      color-mix(in srgb, var(--hbn-other-bubble-bg) 78%, #0f172a 22%)
    )!important;
  color:var(--hbn-other-bubble-text)!important;
  border-color:color-mix(in srgb, var(--hbn-other-bubble-bg) 64%, white 18%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 18px rgba(2,6,23,.14)!important;
}

html body[data-bubble] .messages .message-delete,
html body[data-bubble] #messages .message-delete{
  border-color:color-mix(in srgb, currentColor 24%, transparent)!important;
}

html body[data-bubble] .messages .reaction-pill,
html body[data-bubble] #messages .reaction-pill{
  background:color-mix(in srgb, var(--hbn-own-bubble-bg, var(--bubble-out)) 54%, transparent)!important;
  border-color:color-mix(in srgb, var(--hbn-own-bubble-bg, var(--bubble-out)) 70%, white 12%)!important;
  color:var(--hbn-own-bubble-text, var(--text))!important;
}

html body[data-bubble] .messages .message:not(.mine) .reaction-pill,
html body[data-bubble] #messages .message:not(.mine) .reaction-pill{
  background:color-mix(in srgb, var(--hbn-other-bubble-bg, var(--bubble-in)) 54%, transparent)!important;
  border-color:color-mix(in srgb, var(--hbn-other-bubble-bg, var(--bubble-in)) 70%, white 12%)!important;
  color:var(--hbn-other-bubble-text, var(--text))!important;
}

html body[data-bubble] .messages .message-action:active,
html body[data-bubble] #messages .message-action:active{
  transform:scale(.96);
  filter:brightness(1.04);
}


/* 2026-06-27: Profilbilder im Nachrichtenverlauf anzeigen */
.message-avatar.has-image,
.messages .message-avatar.has-image,
#messages .message-avatar.has-image{
  overflow:hidden!important;
  padding:0!important;
  background:transparent!important;
  border:1px solid rgba(148,163,184,.22)!important;
}

.message-avatar.has-image img,
.messages .message-avatar.has-image img,
#messages .message-avatar.has-image img,
.message-avatar .avatar-img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
}

/* 2026-06-27: Dark-/Stern-Modus Header-Buttons farblich harmonisieren
   Ziel: obere mobile Menüleiste wirkt nicht mehr grau/fremd,
   sondern passt zu Darkmodus und Sternenhimmel. */

body[data-palette="dark"] .chat-header-actions button,
body[data-palette="dark"] .chat-header-actions a,
body[data-palette="dark"] .mobile-menu,
body[data-palette="stern"] .chat-header-actions button,
body[data-palette="stern"] .chat-header-actions a,
body[data-palette="stern"] .mobile-menu{
  background:rgba(15,23,42,.72)!important;
  color:#f8fafc!important;
  border-color:rgba(226,232,240,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 22px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* Sternenhimmel: etwas weicherer Blau-/Violett-Akzent */
body[data-palette="stern"] .chat-header-actions button,
body[data-palette="stern"] .chat-header-actions a,
body[data-palette="stern"] .mobile-menu{
  background:linear-gradient(
    135deg,
    rgba(15,23,42,.78),
    rgba(30,41,74,.66)
  )!important;
  border-color:rgba(125,211,252,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 8px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(167,139,250,.06)!important;
}

/* Darkmodus: ruhig, kontrastreich, aber nicht mehr hellgrau */
body[data-palette="dark"] .chat-header-actions button,
body[data-palette="dark"] .chat-header-actions a,
body[data-palette="dark"] .mobile-menu{
  background:linear-gradient(
    135deg,
    rgba(15,23,42,.86),
    rgba(17,24,39,.74)
  )!important;
  border-color:rgba(148,163,184,.22)!important;
}

/* Touch-/Hover-Feedback */
body[data-palette="dark"] .chat-header-actions button:hover,
body[data-palette="dark"] .chat-header-actions a:hover,
body[data-palette="dark"] .mobile-menu:hover,
body[data-palette="dark"] .chat-header-actions button:active,
body[data-palette="dark"] .chat-header-actions a:active,
body[data-palette="dark"] .mobile-menu:active,
body[data-palette="stern"] .chat-header-actions button:hover,
body[data-palette="stern"] .chat-header-actions a:hover,
body[data-palette="stern"] .mobile-menu:hover,
body[data-palette="stern"] .chat-header-actions button:active,
body[data-palette="stern"] .chat-header-actions a:active,
body[data-palette="stern"] .mobile-menu:active{
  background:linear-gradient(
    135deg,
    rgba(30,41,59,.92),
    rgba(15,23,42,.86)
  )!important;
  border-color:rgba(125,211,252,.34)!important;
  transform:translateY(-1px);
}

/* Aktive/gedrückte Buttons sichtbar, aber passend */
body[data-palette="dark"] .chat-header-actions button.active,
body[data-palette="dark"] .chat-header-actions button.is-active,
body[data-palette="dark"] .chat-header-actions button[aria-pressed="true"],
body[data-palette="stern"] .chat-header-actions button.active,
body[data-palette="stern"] .chat-header-actions button.is-active,
body[data-palette="stern"] .chat-header-actions button[aria-pressed="true"]{
  background:linear-gradient(135deg, rgba(18,61,54,.94), rgba(15,23,42,.92))!important;
  border-color:rgba(125,211,252,.44)!important;
  color:#ffffff!important;
}

/* Benachrichtigung aktiv/erlaubt etwas freundlicher */
body[data-palette="dark"] .notify-toggle.is-active,
body[data-palette="dark"] .notify-toggle.active,
body[data-palette="dark"] .notify-toggle[aria-pressed="true"],
body[data-palette="stern"] .notify-toggle.is-active,
body[data-palette="stern"] .notify-toggle.active,
body[data-palette="stern"] .notify-toggle[aria-pressed="true"]{
  background:linear-gradient(135deg, rgba(32,98,74,.95), rgba(18,61,54,.92))!important;
  border-color:rgba(74,222,128,.36)!important;
}

/* Logout nicht mehr als heller Fremdkörper */
body[data-palette="dark"] .header-logout,
body[data-palette="stern"] .header-logout{
  background:linear-gradient(135deg, rgba(69,26,39,.58), rgba(15,23,42,.78))!important;
  border-color:rgba(251,113,133,.24)!important;
  color:#ffe4e6!important;
}

body[data-palette="dark"] .header-logout:hover,
body[data-palette="dark"] .header-logout:active,
body[data-palette="stern"] .header-logout:hover,
body[data-palette="stern"] .header-logout:active{
  background:linear-gradient(135deg, rgba(127,29,29,.74), rgba(69,26,39,.82))!important;
  border-color:rgba(251,113,133,.42)!important;
}

/* Mobile/PWA: Leiste kompakt halten, Buttons weiterhin horizontal scrollbar */
@media(max-width:760px){
  body[data-palette="dark"] .chat-header-actions button,
  body[data-palette="dark"] .chat-header-actions a,
  body[data-palette="stern"] .chat-header-actions button,
  body[data-palette="stern"] .chat-header-actions a{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 5px 14px rgba(0,0,0,.20)!important;
  }

  body[data-palette="dark"] .mobile-menu,
  body[data-palette="stern"] .mobile-menu{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 6px 16px rgba(0,0,0,.22)!important;
  }
}


/* 2026-06-27: Neueste Chats v2.4 – promoted/unread rooms oben optisch leicht priorisieren */
.room-item.hbn-latest-promoted-room{
  animation:hbnLatestRoomIn .18s ease-out;
}

.room-item.hbn-latest-unread-priority{
  border-color:rgba(74,222,128,.34)!important;
  box-shadow:0 10px 28px rgba(22,163,74,.10)!important;
}

body[data-palette="dark"] .room-item.hbn-latest-unread-priority,
body[data-palette="stern"] .room-item.hbn-latest-unread-priority{
  border-color:rgba(74,222,128,.30)!important;
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(15,23,42,.72))!important;
}

@keyframes hbnLatestRoomIn{
  from{transform:translateY(-4px); opacity:.68;}
  to{transform:translateY(0); opacity:1;}
}


/* 2026-06-27: Inbox-Komfort v2.5 – Neueste Chats als echte Inbox */
.hbn-inbox-toolbar-v25{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 10px 6px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.42);
}
.hbn-inbox-summary-v25{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.hbn-mark-all-read-v25{
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(143,185,160,.42);
  background:rgba(207,232,215,.84);
  color:#123d36;
  font-size:12px;
  font-weight:900;
}
.hbn-mark-all-read-v25[hidden]{display:none!important;}
.hbn-mark-all-read-v25:disabled{opacity:.55;cursor:wait;}
.room-item.hbn-v25-inbox-room{
  position:relative;
}
.room-item.hbn-v25-generated-room{
  outline:1px solid rgba(143,185,160,.18);
}
.room-item.hbn-inbox-unread,
.room-item.hbn-latest-unread-priority{
  border-color:rgba(32,98,74,.42)!important;
  background:linear-gradient(135deg,rgba(207,232,215,.92),rgba(255,255,255,.72))!important;
}
.hbn-room-unread-count{
  position:absolute;
  top:7px;
  right:8px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#22c55e;
  color:#052e16;
  font-size:11px;
  font-weight:950;
  line-height:1;
  box-shadow:0 0 0 3px rgba(34,197,94,.20);
  z-index:2;
}
.hbn-room-unread-count[hidden]{display:none!important;}
.direct-user.hbn-direct-has-latest-v25{
  opacity:.78;
}
.direct-user.hbn-direct-has-latest-v25 small{
  color:var(--ok)!important;
  font-weight:850;
}
.room-section-title.hbn-inbox-title-v25{
  background:linear-gradient(135deg,rgba(207,232,215,.86),rgba(247,234,216,.58));
  color:var(--text);
}
body[data-palette="dark"] .hbn-inbox-toolbar-v25,
body[data-palette="stern"] .hbn-inbox-toolbar-v25{
  background:rgba(15,23,42,.58)!important;
  border-color:rgba(226,232,240,.14)!important;
}
body[data-palette="dark"] .hbn-mark-all-read-v25,
body[data-palette="stern"] .hbn-mark-all-read-v25{
  background:linear-gradient(135deg,rgba(18,61,54,.92),rgba(15,23,42,.86))!important;
  color:#f8fafc!important;
  border-color:rgba(125,211,252,.24)!important;
}
body[data-palette="dark"] .room-item.hbn-inbox-unread,
body[data-palette="dark"] .room-item.hbn-latest-unread-priority,
body[data-palette="stern"] .room-item.hbn-inbox-unread,
body[data-palette="stern"] .room-item.hbn-latest-unread-priority{
  background:linear-gradient(135deg,rgba(18,61,54,.82),rgba(30,41,74,.62))!important;
  border-color:rgba(74,222,128,.30)!important;
}
body[data-palette="dark"] .hbn-room-unread-count,
body[data-palette="stern"] .hbn-room-unread-count{
  background:#4ade80;
  color:#042713;
}
@media(max-width:760px){
  .hbn-inbox-toolbar-v25{
    margin:0 10px 5px;
    padding:7px 8px;
  }
  .hbn-mark-all-read-v25{
    min-height:36px;
    padding:0 10px;
  }
}


/* 2026-06-28: v2.8d Inbox-Markierung ohne Browser-Alert */
.hbn-inbox-notice-v28d{
  width:100%;
  margin:6px 0 0;
  padding:8px 10px;
  border-radius:18px;
  border:1px solid rgba(238,186,48,.28);
  background:rgba(238,186,48,.10);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}
.hbn-inbox-notice-v28d[data-mode="error"]{
  border-color:rgba(251,113,133,.30);
  background:rgba(251,113,133,.12);
  color:#991b1b;
}
body[data-palette="dark"] .hbn-inbox-notice-v28d[data-mode="error"],
body[data-palette="stern"] .hbn-inbox-notice-v28d[data-mode="error"]{
  color:#fecdd3;
  background:rgba(127,29,29,.34);
  border-color:rgba(251,113,133,.24);
}

/* 2026-06-28: v31b Dark-/Sternmodus Chat-Karten abdunkeln
   Ziel: Neueste Chats / Direktchats / Gruppen wirken im Dark-Modus nicht mehr hellgrau,
   sondern passen zur dunklen Teamchat-Oberfläche. */
body[data-palette="dark"] .room-list .room-item,
body[data-palette="dark"] .direct-list .direct-user,
body[data-palette="dark"] .hbn-groups-list .room-item,
body[data-palette="stern"] .room-list .room-item,
body[data-palette="stern"] .direct-list .direct-user,
body[data-palette="stern"] .hbn-groups-list .room-item{
  background:linear-gradient(135deg, rgba(17,24,39,.88), rgba(24,34,52,.78))!important;
  border-color:rgba(226,232,240,.10)!important;
  color:#f8fafc!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 24px rgba(0,0,0,.18)!important;
}

body[data-palette="stern"] .room-list .room-item,
body[data-palette="stern"] .direct-list .direct-user,
body[data-palette="stern"] .hbn-groups-list .room-item{
  background:linear-gradient(135deg, rgba(12,20,38,.84), rgba(23,37,66,.70))!important;
  border-color:rgba(125,211,252,.13)!important;
}

body[data-palette="dark"] .room-list .room-item:hover,
body[data-palette="dark"] .direct-list .direct-user:hover,
body[data-palette="dark"] .hbn-groups-list .room-item:hover,
body[data-palette="stern"] .room-list .room-item:hover,
body[data-palette="stern"] .direct-list .direct-user:hover,
body[data-palette="stern"] .hbn-groups-list .room-item:hover{
  background:linear-gradient(135deg, rgba(30,41,59,.96), rgba(39,54,79,.84))!important;
  border-color:rgba(125,211,252,.26)!important;
}

body[data-palette="dark"] .room-list .room-item.active,
body[data-palette="dark"] .hbn-groups-list .room-item.active,
body[data-palette="dark"] .direct-list .direct-user.active,
body[data-palette="stern"] .room-list .room-item.active,
body[data-palette="stern"] .hbn-groups-list .room-item.active,
body[data-palette="stern"] .direct-list .direct-user.active{
  background:linear-gradient(135deg, rgba(18,61,54,.92), rgba(30,41,74,.76))!important;
  border-color:rgba(74,222,128,.36)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.24),
    0 0 0 1px rgba(74,222,128,.08)!important;
}

body[data-palette="dark"] .room-item strong,
body[data-palette="dark"] .direct-user strong,
body[data-palette="stern"] .room-item strong,
body[data-palette="stern"] .direct-user strong{
  color:#f8fafc!important;
}

body[data-palette="dark"] .room-item small,
body[data-palette="dark"] .direct-user small,
body[data-palette="stern"] .room-item small,
body[data-palette="stern"] .direct-user small{
  color:#aebed3!important;
}

body[data-palette="dark"] .direct-user.hbn-direct-has-latest-v25 small,
body[data-palette="stern"] .direct-user.hbn-direct-has-latest-v25 small{
  color:#86efac!important;
}

body[data-palette="dark"] .room-section-title,
body[data-palette="stern"] .room-section-title{
  background:rgba(15,23,42,.70)!important;
  color:#cbd5e1!important;
  border:1px solid rgba(226,232,240,.08)!important;
}

body[data-palette="dark"] .room-section-title.is-open,
body[data-palette="dark"] .room-section-title[aria-expanded="true"],
body[data-palette="dark"] .room-section-title.hbn-inbox-title-v25,
body[data-palette="stern"] .room-section-title.is-open,
body[data-palette="stern"] .room-section-title[aria-expanded="true"],
body[data-palette="stern"] .room-section-title.hbn-inbox-title-v25{
  background:linear-gradient(135deg, rgba(18,61,54,.90), rgba(30,41,74,.72))!important;
  color:#f8fafc!important;
  border-color:rgba(125,211,252,.18)!important;
}

body[data-palette="dark"] .hbn-inbox-toolbar-v25,
body[data-palette="stern"] .hbn-inbox-toolbar-v25{
  background:rgba(7,13,25,.72)!important;
  border-color:rgba(226,232,240,.12)!important;
  color:#f8fafc!important;
}

body[data-palette="dark"] .hbn-inbox-summary-v25,
body[data-palette="stern"] .hbn-inbox-summary-v25{
  color:#cbd5e1!important;
}

body[data-palette="dark"] .room-item.hbn-inbox-unread,
body[data-palette="dark"] .room-item.hbn-latest-unread-priority,
body[data-palette="stern"] .room-item.hbn-inbox-unread,
body[data-palette="stern"] .room-item.hbn-latest-unread-priority{
  background:linear-gradient(135deg, rgba(18,61,54,.96), rgba(20,49,77,.82))!important;
  border-color:rgba(74,222,128,.42)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.24),
    0 0 0 1px rgba(74,222,128,.10)!important;
}

/* Marker für PWA-Check */
/* HBN_DARK_CHAT_CARDS_V31B */


/* HBN_UPLOAD_CAMERA_MENU_V56F_START
   Upload/Kamera: sichtbar bleibt nur die Büroklammer; die Auswahl läuft über ein kleines Menü.
*/
.composer{
  position:relative;
}
.hbn-upload-input{
  display:none !important;
}
.hbn-attachment-menu[hidden]{
  display:none !important;
}
.hbn-attachment-menu{
  position:absolute;
  left:52px;
  bottom:54px;
  z-index:230;
  width:min(260px, calc(100vw - 24px));
  padding:8px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 54px rgba(15,23,42,.22);
  display:grid;
  gap:6px;
}
.hbn-attachment-menu button{
  width:100%;
  min-height:44px;
  border:1px solid rgba(18,61,54,.12);
  border-radius:18px;
  background:rgba(244,248,244,.92);
  color:var(--text);
  font:inherit;
  font-weight:850;
  text-align:left;
  padding:0 12px;
  cursor:pointer;
}
.hbn-attachment-menu button:active{
  transform:scale(.985);
}
.file-preview.hbn-file-preview-active{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.hbn-file-preview-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  max-width:min(520px, 100%);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(18,61,54,.14);
  background:rgba(255,255,255,.82);
  color:var(--text);
  font-weight:800;
}
.hbn-file-preview-action-v65z{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(191,247,220,.95), rgba(67,208,148,.86));
  color:#071814;
  font-size:.84em;
  font-weight:950;
  white-space:nowrap;
}
.hbn-file-preview-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hbn-file-preview-size{
  color:var(--muted);
  font-weight:700;
}
.hbn-file-preview-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  border:1px solid rgba(127,29,29,.18);
  border-radius:999px;
  background:rgba(254,226,226,.92);
  color:#7f1d1d;
  font-weight:950;
  cursor:pointer;
}
.hbn-voice-recording-preview-v63t .hbn-file-preview-pill{
  background:rgba(127,29,29,.10);
  border-color:rgba(248,113,113,.26);
}
.hbn-voice-recording-pill-v63z{
  gap:8px;
  padding-right:12px;
}
.hbn-voice-level-v63z{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:24px;
  height:18px;
}
.hbn-voice-level-v63z span{
  width:3px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(180deg, #fb7185 0%, #ef4444 100%);
  box-shadow:0 0 8px rgba(239,68,68,.20);
  transform-origin:center;
  animation:hbnVoiceLevelV63z .82s ease-in-out infinite;
}
.hbn-voice-level-v63z span:nth-child(2){
  animation-delay:.10s;
}
.hbn-voice-level-v63z span:nth-child(3){
  animation-delay:.20s;
}
.hbn-voice-level-v63z span:nth-child(4){
  animation-delay:.30s;
}
.hbn-voice-level-v63z span:nth-child(5){
  animation-delay:.40s;
}
.hbn-voice-permission-preview-v63u{
  align-items:stretch;
}
.hbn-voice-permission-pill-v63u{
  align-items:flex-start;
  flex-direction:column;
  border-radius:16px;
  background:rgba(127,29,29,.10);
  border-color:rgba(248,113,113,.30);
  color:var(--text);
}
.hbn-voice-permission-pill-v63u .hbn-file-preview-size{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.hbn-voice-preview-action-v63u{
  min-height:36px;
  border:1px solid rgba(20,184,166,.22);
  border-radius:999px;
  background:rgba(20,184,166,.14);
  color:var(--text);
  font:inherit;
  font-weight:850;
  padding:6px 12px;
  cursor:pointer;
}
.hbn-voice-preview-action-v63u.is-update-v63u{
  border-color:rgba(224,189,103,.35);
  background:rgba(224,189,103,.22);
}
.hbn-voice-preview-action-v63u.is-reload-v63w{
  border-color:rgba(148,163,184,.30);
  background:rgba(148,163,184,.16);
}
.hbn-voice-live-dot-v63t{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.35);
  animation:hbnVoiceDotV63t 1.05s ease-in-out infinite;
}
@keyframes hbnVoicePulseV63t{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.96)}
}
@keyframes hbnVoiceDotV63t{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}
}
@keyframes hbnVoiceLevelV63z{
  0%,100%{height:6px; opacity:.56}
  45%{height:18px; opacity:1}
  70%{height:10px; opacity:.78}
}
@media (prefers-reduced-motion: reduce){
  .hbn-voice-level-v63z span{
    animation:none;
    height:10px;
  }
}
@media (max-width:760px){
  .hbn-attachment-menu{
    left:46px;
    bottom:50px;
    width:min(280px, calc(100vw - 18px));
  }
  .hbn-attachment-menu button{
    min-height:48px;
    font-size:15px;
  }
  .file-preview{
    margin-left:0;
  }
}
body[data-palette="dark"] .hbn-attachment-menu,
body[data-palette="stern"] .hbn-attachment-menu{
  background:rgba(15,23,42,.98);
}
body[data-palette="dark"] .hbn-attachment-menu button,
body[data-palette="stern"] .hbn-attachment-menu button{
  background:rgba(31,41,55,.92);
  color:#eef4ff;
}
/* HBN_UPLOAD_CAMERA_MENU_V56F_END */

/* HBN_CAMERA_AFTER_CHOICE_V65H_START */
.hbn-camera-choice-overlay-v65h{
  position:fixed;
  inset:0;
  z-index:280;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hbn-camera-choice-sheet-v65h{
  width:min(440px, 100%);
  border:1px solid rgba(148,163,184,.22);
  border-radius:26px;
  background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(12,42,38,.98));
  color:#f8fafc;
  box-shadow:0 26px 90px rgba(0,0,0,.52);
  padding:14px;
}
.hbn-camera-choice-head-v65h{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.hbn-camera-choice-head-v65h strong{
  display:block;
  font-size:20px;
  line-height:1.15;
}
.hbn-camera-choice-head-v65h small{
  display:block;
  margin-top:4px;
  color:rgba(226,232,240,.78);
  font-weight:700;
}
.hbn-camera-choice-close-v65h{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:26px;
  font-weight:850;
  cursor:pointer;
}
.hbn-camera-choice-preview-v65h{
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(2,6,23,.72);
}
.hbn-camera-choice-preview-v65h img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.hbn-camera-choice-info-v65h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  margin:9px 2px 12px;
  color:rgba(226,232,240,.82);
  font-size:13px;
  font-weight:800;
}
.hbn-camera-choice-info-v65h span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hbn-camera-choice-info-v65h small{
  color:rgba(226,232,240,.64);
  white-space:nowrap;
}
.hbn-camera-choice-actions-v65h{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.hbn-camera-choice-actions-v65h button,
.hbn-camera-choice-retake-v65h{
  min-height:48px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  color:#f8fafc;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.hbn-camera-choice-actions-v65h button.is-primary-v65h{
  border-color:rgba(168,255,219,.40);
  background:linear-gradient(135deg, #b8ffe5 0%, #38d39f 100%);
  color:#08251f;
}
.hbn-camera-choice-retake-v65h{
  width:100%;
  margin-top:8px;
  background:rgba(15,23,42,.70);
}
.hbn-camera-choice-actions-v65h button:active,
.hbn-camera-choice-retake-v65h:active,
.hbn-camera-choice-close-v65h:active{
  transform:scale(.985);
}
body[data-palette="softrose"] .hbn-camera-choice-sheet-v65h,
body[data-palette="soft-rose"] .hbn-camera-choice-sheet-v65h,
body.theme-softrose .hbn-camera-choice-sheet-v65h{
  background:linear-gradient(145deg, rgba(88,28,47,.98), rgba(124,45,80,.98));
}
@media (min-width:761px){
  .hbn-camera-choice-overlay-v65h{
    align-items:center;
  }
}
@media (max-width:380px){
  .hbn-camera-choice-actions-v65h{
    grid-template-columns:1fr;
  }
}
/* HBN_CAMERA_AFTER_CHOICE_V65H_END */


/* HBN_UPLOAD_STATUS_V56F_START
   Sichtbarer Arbeitsstatus während Foto-/Datei-Upload. Bewusst leichtgewichtig, damit Handy/PWA sauber reagiert.
   HBN_UPLOAD_INLINE_ERROR_V56I: Fehler werden inline angezeigt, nicht mehr als blockierender Browser-Dialog.
*/
.hbn-upload-status-v56f[hidden]{
  display:none !important;
}
.hbn-upload-status-v56f{
  display:block;
  margin:8px 0 0 0;
  padding:9px 11px;
  border:1px solid rgba(18,61,54,.16);
  border-radius:16px;
  background:rgba(244,248,244,.96);
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  color:var(--text);
  font-size:13px;
}
.hbn-upload-status-main-v56f{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:22px;
}
.hbn-upload-spinner-v56f{
  width:16px;
  height:16px;
  border:2px solid rgba(18,61,54,.20);
  border-top-color:rgba(18,61,54,.88);
  border-radius:999px;
  animation:hbnUploadSpinV56f .8s linear infinite;
  flex:0 0 auto;
}
.hbn-upload-status-text-v56f{
  font-weight:900;
}
.hbn-upload-dots-v56f::after{
  content:'';
  display:inline-block;
  min-width:18px;
  text-align:left;
  animation:hbnUploadDotsV56f 1.1s steps(4,end) infinite;
}
.hbn-upload-status-detail-v56f{
  margin-left:auto;
  color:var(--muted);
  font-weight:750;
  white-space:nowrap;
}
.hbn-upload-progress-v56f{
  overflow:hidden;
  height:5px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(18,61,54,.10);
}
.hbn-upload-progress-v56f span{
  display:block;
  width:10%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(18,61,54,.72), rgba(238,186,48,.88));
  transition:width .18s ease;
}

.hbn-upload-status-v56f.is-error-v56i{
  border-color:rgba(153,27,27,.38);
  background:rgba(254,242,242,.98);
}
.hbn-upload-status-v56f.is-error-v56i .hbn-upload-spinner-v56f{
  animation:none;
  border-color:rgba(153,27,27,.35);
  border-top-color:rgba(153,27,27,.95);
}
.hbn-upload-status-v56f.is-error-v56i .hbn-upload-status-text-v56f{
  color:#991b1b;
}
.hbn-upload-status-v56f.is-error-v56i .hbn-upload-progress-v56f span{
  background:linear-gradient(90deg, rgba(153,27,27,.82), rgba(248,113,113,.88));
}
.hbn-upload-status-v56f.is-ok-v56i .hbn-upload-spinner-v56f{
  animation:none;
  border-color:rgba(22,101,52,.28);
  border-top-color:rgba(22,101,52,.95);
}

.composer.hbn-upload-busy-v56f .file-btn,
.composer.hbn-upload-busy-v56f textarea{
  opacity:.70;
}
@keyframes hbnUploadSpinV56f{to{transform:rotate(360deg)}}
@keyframes hbnUploadDotsV56f{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%,100%{content:'...'}
}
@media (max-width:760px){
  .hbn-upload-status-v56f{
    margin-top:7px;
    padding:10px 11px;
    border-radius:15px;
    font-size:13px;
  }
  .hbn-upload-status-main-v56f{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .hbn-upload-status-detail-v56f{
    width:100%;
    margin-left:23px;
    white-space:normal;
  }
}
body[data-palette="dark"] .hbn-upload-status-v56f,
body[data-palette="stern"] .hbn-upload-status-v56f{
  background:rgba(15,23,42,.96);
  border-color:rgba(226,232,240,.14);
  color:#eef4ff;
}
body[data-palette="dark"] .hbn-upload-progress-v56f,
body[data-palette="stern"] .hbn-upload-progress-v56f{
  background:rgba(226,232,240,.12);
}
body[data-palette="dark"] .hbn-upload-status-v56f.is-error-v56i,
body[data-palette="stern"] .hbn-upload-status-v56f.is-error-v56i{
  background:rgba(69,10,10,.94);
  border-color:rgba(248,113,113,.34);
}
body[data-palette="dark"] .hbn-upload-status-v56f.is-error-v56i .hbn-upload-status-text-v56f,
body[data-palette="stern"] .hbn-upload-status-v56f.is-error-v56i .hbn-upload-status-text-v56f{
  color:#fecaca;
}
/* HBN_UPLOAD_STATUS_V56F_END */

/* HBN_RELIABLE_SEND_TAP_V56G_START
   Absende-Button auf Handy/PWA: erster Tap zählt sofort, größere Touch-Zielzone, keine Tap-Verzögerung.
*/
.send-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  position:relative;
  z-index:24;
}
.send-btn[aria-busy="true"]{
  opacity:.88;
}
.composer.hbn-upload-busy-v56f .send-btn{
  box-shadow:0 0 0 3px rgba(238,186,48,.22), 0 10px 24px rgba(15,23,42,.18);
}
@media (max-width:760px){
  .composer{
    grid-template-columns:38px 38px 38px minmax(116px,1fr) 50px;
    gap:5px;
  }
  .icon-btn,
  .file-btn{
    width:38px;
    min-width:38px;
    height:40px;
    min-height:40px;
    border-radius:18px;
  }
  .send-btn{
    width:50px;
    min-width:50px;
    height:44px;
    min-height:44px;
    border-radius:18px;
    font-size:17px;
  }
  #messageInput{
    min-height:40px;
    height:40px;
    padding:9px 10px;
    font-size:16px;
    line-height:20px;
    border-radius:16px;
  }
  #messageInput::placeholder{
    white-space:nowrap;
    font-size:16px;
  }
}
/* HBN_RELIABLE_SEND_TAP_V56G_END */

/* HBN_UPLOAD_FALSE_ERROR_SUPPRESS_V56I_START */
.hbn-upload-status-v56f.is-ok-v56i{
  opacity:.94;
}
.hbn-upload-status-v56f.is-ok-v56i .hbn-upload-status-text-v56f{
  color:#166534;
}
body[data-palette="dark"] .hbn-upload-status-v56f.is-ok-v56i .hbn-upload-status-text-v56f,
body[data-palette="stern"] .hbn-upload-status-v56f.is-ok-v56i .hbn-upload-status-text-v56f{
  color:#bbf7d0;
}
/* HBN_UPLOAD_FALSE_ERROR_SUPPRESS_V56I_END */

/* HBN_COMPOSER_VOICE_RELOAD_V63W_START
   Harte mobile Composer-Regeln: alte mobile Bloecke duerfen das Eingabefeld nicht mehr schmaler machen.
*/
@media (max-width:760px){
  .composer{
    grid-template-columns:36px 36px 36px minmax(132px,1fr) 48px!important;
    gap:4px!important;
    align-items:center!important;
  }
  .composer .icon-btn,
  .composer .file-btn,
  .composer .hbn-voice-toggle-v63t{
    width:36px!important;
    min-width:36px!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:14px!important;
  }
  .composer .send-btn{
    width:48px!important;
    min-width:48px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:18px!important;
  }
  .composer #messageInput{
    min-width:0!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:118px!important;
    padding:9px 9px!important;
    font-size:16px!important;
    line-height:20px!important;
    border-radius:16px!important;
    overflow-y:auto!important;
  }
  .composer #messageInput::placeholder{
    white-space:nowrap!important;
    font-size:16px!important;
    opacity:.78!important;
  }
}
@media (max-width:370px){
  .composer{
    grid-template-columns:34px 34px 34px minmax(112px,1fr) 46px!important;
    gap:4px!important;
  }
  .composer .icon-btn,
  .composer .file-btn,
  .composer .hbn-voice-toggle-v63t{
    width:34px!important;
    min-width:34px!important;
  }
  .composer .send-btn{
    width:46px!important;
    min-width:46px!important;
  }
  .composer #messageInput{
    font-size:15px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .composer #messageInput::placeholder{
    font-size:15px!important;
  }
}
/* HBN_COMPOSER_VOICE_RELOAD_V63W_END */

/* HBN_MESSAGE_INPUT_AUTOGROW_V67F_START
   Nachrichtenfeld waechst zeilenweise bis zur Maximalhoehe, danach scrollt nur der Text. */
html body .composer{
  align-items:end!important;
}
html body #messageInput{
  max-height:min(32dvh, 240px)!important;
  overflow-y:hidden!important;
  scrollbar-gutter:stable;
}
html body #messageInput.hbn-message-input-scroll-v67f{
  overflow-y:auto!important;
}
@media (max-width:760px){
  html body .composer #messageInput{
    height:auto;
    min-height:40px!important;
    max-height:min(30dvh, 220px)!important;
    line-height:20px!important;
    overflow-y:hidden!important;
  }
  html body .composer #messageInput.hbn-message-input-scroll-v67f{
    overflow-y:auto!important;
  }
  html body .composer #messageInput.hbn-message-input-expanded-v67f{
    border-radius:18px!important;
  }
}
@media (max-height:720px){
  html body .composer #messageInput{
    max-height:180px!important;
  }
}
/* HBN_MESSAGE_INPUT_AUTOGROW_V67F_END */

/* HBN_MESSAGE_DRAFTS_V67G_START */
.room-item.hbn-has-draft-v67g{
  box-shadow:inset 0 0 0 1px rgba(110,231,183,.24), 0 10px 24px rgba(2,8,23,.12);
}
.hbn-room-draft-badge-v67g{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:4px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(185,239,214,.18);
  border:1px solid rgba(185,239,214,.34);
  color:#b9efd6;
  font-size:11px;
  font-style:normal;
  font-weight:850;
  line-height:1.25;
  letter-spacing:0;
}
body[data-palette="softrose"] .hbn-room-draft-badge-v67g,
body.theme-softrose .hbn-room-draft-badge-v67g,
body.theme-softrot .hbn-room-draft-badge-v67g{
  background:rgba(255,214,226,.26);
  border-color:rgba(244,143,177,.36);
  color:#ffe2eb;
}
@media (max-width:760px){
  .hbn-room-draft-badge-v67g{
    font-size:10px;
    padding:2px 7px;
  }
}
/* HBN_MESSAGE_DRAFTS_V67G_END */

/* HBN_LONG_MESSAGE_WRAP_V57C: lange Texte, Links und technische Zeichenketten in Nachrichten umbrechen. */
html body .messages .message .message-content,
html body #messages .message .message-content{
  min-width:0!important;
  max-width:min(680px, calc(100vw - 92px))!important;
}

html body .messages .message .bubble,
html body #messages .message .bubble{
  width:auto!important;
  max-width:min(680px, 100%)!important;
  min-width:0!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  hyphens:auto;
}

html body .messages .message .bubble a,
html body #messages .message .bubble a{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

@media(max-width:760px){
  html body .messages .message .message-content,
  html body #messages .message .message-content{
    max-width:calc(100vw - 70px)!important;
  }
  html body .messages .message .bubble,
  html body #messages .message .bubble{
    max-width:100%!important;
  }
}
/* HBN_EXISTING_LONG_MESSAGE_WRAP_V57D: auch alte/geladene Langtexte kompakter umbrechen. */
html body .messages .message .bubble.is-long-message-v57d,
html body #messages .message .bubble.is-long-message-v57d{
  max-width:min(560px, calc(100vw - 120px))!important;
  line-height:1.5!important;
  text-wrap:pretty;
}

html body .messages .message .bubble.is-long-message-v57d + .attachment,
html body #messages .message .bubble.is-long-message-v57d + .attachment{
  max-width:100%!important;
}

@media(max-width:760px){
  html body .messages .message .bubble.is-long-message-v57d,
  html body #messages .message .bubble.is-long-message-v57d{
    max-width:calc(100vw - 72px)!important;
  }
}
/* HBN_LONG_MESSAGE_MORE_V57E: lange bestehende Nachrichten auf 12 Zeilen kuerzen. */
html body .messages .message .bubble.is-long-message-v57d,
html body #messages .message .bubble.is-long-message-v57d{
  display:block!important;
}

html body .messages .message .bubble.is-long-message-v57d .hbn-message-text-v57e,
html body #messages .message .bubble.is-long-message-v57d .hbn-message-text-v57e{
  display:block;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

html body .messages .message .bubble.is-long-message-v57d.is-collapsed-v57e .hbn-message-text-v57e,
html body #messages .message .bubble.is-long-message-v57d.is-collapsed-v57e .hbn-message-text-v57e{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:12;
  overflow:hidden;
}

.hbn-message-more-v57e{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:inherit;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.hbn-message-more-v57e:hover,
.hbn-message-more-v57e:focus-visible{
  background:rgba(255,255,255,.22);
  outline:none;
}
/* HBN_MESSAGE_LINK_CONFIRM_V58A: Links in Nachrichten anklickbar mit Sicherheitsabfrage. */
.hbn-message-link-v58a{
  color:inherit;
  font-weight:850;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.hbn-message-link-v58a:hover,
.hbn-message-link-v58a:focus-visible{
  text-decoration-thickness:3px;
  outline:none;
}
/* HBN_REGISTER_LINK_BANNER_V64B: Registrierungslink als kleine TeamChat-Karte. */
.hbn-message-register-banner-v64b{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 46px;
  align-items:center;
  gap:12px;
  width:min(100%, 360px);
  margin:4px 0;
  padding:10px 10px 10px 12px;
  border:1px solid rgba(182,240,220,.22);
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(20,184,166,.14), rgba(11,18,32,.42)),
    rgba(255,255,255,.06);
  color:inherit;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.hbn-message-register-copy-v64b{
  display:grid;
  gap:2px;
  min-width:0;
}

.hbn-message-register-copy-v64b small{
  color:rgba(216,244,234,.82);
  font-size:11px;
  font-weight:850;
  line-height:1.1;
}

.hbn-message-register-copy-v64b strong{
  color:#fff;
  font-size:15px;
  font-weight:900;
  line-height:1.15;
}

.hbn-message-register-copy-v64b span{
  max-width:100%;
  overflow:hidden;
  color:rgba(232,240,247,.70);
  font-size:10.5px;
  font-weight:650;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hbn-message-register-banner-v64b img{
  width:46px;
  height:46px;
  border-radius:13px;
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  object-fit:cover;
}

.hbn-message-register-banner-v64b:hover,
.hbn-message-register-banner-v64b:focus-visible{
  border-color:rgba(182,240,220,.42);
  background:
    linear-gradient(135deg, rgba(20,184,166,.20), rgba(11,18,32,.50)),
    rgba(255,255,255,.08);
  outline:none;
}
/* HBN_TEAMCHAT_SHARE_LINK_V58B: Teamchat per Registrierungslink teilen. */
.teamchat-share-toggle{
  position:relative;
}

.teamchat-share-toggle:hover,
.teamchat-share-toggle:focus-visible{
  border-color:rgba(34,197,94,.42)!important;
  background:rgba(34,197,94,.14)!important;
  outline:none;
}
/* HBN_MOBILE_SAFE_TOP_V58G: iPhone/PWA-Statusleiste darf den Chat-Header nicht ueberdecken. */
@media (max-width:760px){
  :root{
    --hbn-mobile-safe-top-v58g:max(env(safe-area-inset-top, 0px), 18px);
  }

  html body .room-panel,
  html body .chat-panel{
    box-sizing:border-box!important;
    padding-top:var(--hbn-mobile-safe-top-v58g)!important;
  }

  html body .chat-header{
    min-height:58px!important;
    padding-top:10px!important;
    padding-bottom:8px!important;
    align-items:center!important;
  }

  html body .panel-header{
    padding-top:10px!important;
  }

  html body .chat-header-actions{
    align-self:center!important;
  }

  html body .messages,
  html body #messages{
    scroll-padding-top:calc(var(--hbn-mobile-safe-top-v58g) + 64px)!important;
  }
}
/* HBN_IMAGE_SHARE_V58H: Bild im Viewer direkt am Handy teilen. */
.image-viewer-head .image-viewer-share{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:18px;
  background:rgba(134,239,172,.16);
  border:1px solid rgba(134,239,172,.34);
  color:#fff;
  text-decoration:none;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.image-viewer-head .image-viewer-share:disabled{
  opacity:.72;
  cursor:wait;
}
@media(max-width:760px){
  .image-viewer-head{
    align-items:stretch;
  }
  .image-viewer-head a,
  .image-viewer-head .image-viewer-share,
  .image-viewer-original,
  .image-viewer-close{
    min-height:44px;
  }
  .image-viewer-head strong{
    white-space:nowrap;
    line-height:1.2;
    max-width:none;
  }
}
/* HBN_MOBILE_PERF_V58I: Handy-Ruckler weiter reduzieren. */
@media(max-width:760px){
  body.teamchat-mobile-performance .teamchat-sheet-overlay,
  body.teamchat-mobile-performance .image-viewer-overlay,
  body.teamchat-mobile-performance .hbn-header-participant-search-panel{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(2,6,23,.38)!important;
  }
  body.teamchat-mobile-performance .image-viewer-dialog,
  body.teamchat-mobile-performance .teamchat-sheet,
  body.teamchat-mobile-performance .hbn-header-participant-search-card{
    box-shadow:none!important;
  }
  body.teamchat-mobile-performance .image-viewer-body img{
    border-radius:10px!important;
  }
  body.teamchat-mobile-performance .message-actions{
    contain:layout paint!important;
  }
}

/* HBN_MEDIA_FRAME_VIDEO_PREVIEW_V63J */
.messages .message .bubble:has(.attachment-image),
.messages .message .bubble:has(.attachment-video-v60x){
  padding:8px!important;
  border-radius:20px!important;
  max-width:min(96vw,560px)!important;
}

.messages .attachment.attachment-image{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin-top:4px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:16px!important;
}

.messages .attachment.attachment-image img{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:min(510px,100%)!important;
  max-height:440px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 8px 22px rgba(2,6,23,.18)!important;
}

/* HBN_MEDIA_CENTER_V63P */
.messages .attachment-video-v60x.hbn-video-preview-v63j{
  width:min(100%,560px)!important;
  padding:6px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:18px!important;
}

.messages .attachment-video-frame-v63j{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  min-height:168px;
  background:
    radial-gradient(circle at 28% 22%,rgba(110,231,183,.26),transparent 34%),
    linear-gradient(135deg,#07111f,#12372a 58%,#2f1722);
}

.messages .attachment-video-frame-v63j video{
  position:relative;
  z-index:2;
  aspect-ratio:16/9;
  margin-left:auto;
  margin-right:auto;
  background:transparent!important;
}

.messages .attachment-video-poster-v63j{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#ecfff6;
  text-shadow:0 1px 2px rgba(0,0,0,.38);
  background:linear-gradient(180deg,rgba(2,6,23,.18),rgba(2,6,23,.52));
  transition:opacity .18s ease;
}

.messages .attachment-video-frame-v63j.has-frame-v63j .attachment-video-poster-v63j{
  opacity:.78;
}

.messages .attachment-video-frame-v63j.is-playing-v63j .attachment-video-poster-v63j{
  opacity:0;
}

.messages .attachment-video-play-v63j{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:999px;
  background:rgba(191,247,220,.92);
  color:#09251c;
  font-size:30px;
  font-weight:900;
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}

.messages .attachment-video-label-v63j{
  font-size:.94rem;
  font-weight:850;
  letter-spacing:0;
}

@media(max-width:760px){
  .messages .message .bubble:has(.attachment-image),
  .messages .message .bubble:has(.attachment-video-v60x){
    padding:6px!important;
    border-radius:18px!important;
    max-width:calc(100vw - 58px)!important;
  }

  .messages .attachment.attachment-image img{
    max-width:calc(100vw - 76px)!important;
    max-height:54vh!important;
    border-radius:13px!important;
  }

  .messages .attachment-video-v60x.hbn-video-preview-v63j{
    width:100%!important;
    padding:5px!important;
    border-radius:16px!important;
  }

  .messages .attachment-video-frame-v63j{
    min-height:156px;
    border-radius:12px;
  }

  .messages .attachment-video-play-v63j{
    width:54px;
    height:54px;
    font-size:26px;
  }
}

/* HBN_MEDIA_FRAME_REMOVE_V64Z
   Reine Mediennachrichten fast ohne Bubble-Rahmen anzeigen. */
html body .messages .message.is-media-only-v64z .message-content,
html body #messages .message.is-media-only-v64z .message-content{
  max-width:min(580px, calc(100vw - 78px))!important;
}

html body[data-bubble] .messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
html body[data-bubble] #messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
html body .messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
html body #messages .message.is-media-only-v64z .bubble.is-media-only-v64z{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:1px!important;
  margin:0!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

html body .messages .message.mine.is-media-only-v64z .bubble.is-media-only-v64z,
html body #messages .message.mine.is-media-only-v64z .bubble.is-media-only-v64z{
  margin-left:auto!important;
  margin-right:0!important;
}

html body .messages .message:not(.mine).is-media-only-v64z .bubble.is-media-only-v64z,
html body #messages .message:not(.mine).is-media-only-v64z .bubble.is-media-only-v64z{
  margin-left:0!important;
  margin-right:auto!important;
}

html body .messages .message.is-media-only-v64z .attachment,
html body #messages .message.is-media-only-v64z .attachment{
  margin-top:0!important;
}

html body .messages .message.is-media-only-v64z .attachment.attachment-image,
html body #messages .message.is-media-only-v64z .attachment.attachment-image{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-media-only-v64z .attachment.attachment-image img,
html body #messages .message.is-media-only-v64z .attachment.attachment-image img{
  display:block!important;
  width:auto!important;
  max-width:min(550px, calc(100vw - 96px))!important;
  max-height:64vh!important;
  object-fit:contain!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

html body .messages .message.is-media-only-v64z .attachment-video-v60x,
html body #messages .message.is-media-only-v64z .attachment-video-v60x{
  width:min(560px, 100%)!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-media-only-v64z .attachment-video-frame-v63j,
html body #messages .message.is-media-only-v64z .attachment-video-frame-v63j{
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:14px!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

@media(max-width:760px){
  html body .messages .message.is-media-only-v64z .message-content,
  html body #messages .message.is-media-only-v64z .message-content{
    max-width:calc(100vw - 66px)!important;
  }
  html body .messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
  html body #messages .message.is-media-only-v64z .bubble.is-media-only-v64z{
    padding:1px!important;
    border-radius:14px!important;
  }
  html body .messages .message.is-media-only-v64z .attachment.attachment-image img,
  html body #messages .message.is-media-only-v64z .attachment.attachment-image img{
    max-width:calc(100vw - 76px)!important;
    max-height:62vh!important;
    border-radius:13px!important;
  }
}

/* HBN_FORWARD_LABEL_SMALL_V65A */
html body .messages .message .bubble .hbn-forwarded-label-v65a,
html body #messages .message .bubble .hbn-forwarded-label-v65a{
  display:block!important;
  margin:0 0 6px!important;
  font-size:.52em!important;
  line-height:1.18!important;
  font-weight:750!important;
  letter-spacing:0!important;
  opacity:.78!important;
}

@media(max-width:760px){
  html body .messages .message .bubble .hbn-forwarded-label-v65a,
  html body #messages .message .bubble .hbn-forwarded-label-v65a{
    font-size:.5em!important;
    margin-bottom:5px!important;
  }
}

/* HBN_FORWARDED_BADGE_V66P */
html body .messages .message .bubble .hbn-forwarded-badge-v66p,
html body #messages .message .bubble .hbn-forwarded-badge-v66p{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:max-content!important;
  margin:0 0 4px!important;
  padding:3px 7px!important;
  border:1px solid rgba(176,236,210,.28)!important;
  border-radius:999px!important;
  background:rgba(9,35,31,.54)!important;
  color:rgba(222,255,239,.92)!important;
  font-size:.66rem!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:0!important;
  opacity:.9!important;
  box-shadow:none!important;
}

html body[data-message-style="kompakt"] .messages .message .bubble .hbn-forwarded-badge-v66p,
html body[data-message-style="kompakt"] #messages .message .bubble .hbn-forwarded-badge-v66p{
  margin-bottom:3px!important;
  padding:2px 6px!important;
  font-size:.6rem!important;
}

/* HBN_FORWARDED_MEDIA_FRAME_V65D
   Weitergeleitete reine Medien wie normale Bilder fast rahmenlos anzeigen. */
html body .messages .message.is-forwarded-media-v65d .message-content,
html body #messages .message.is-forwarded-media-v65d .message-content{
  max-width:min(580px, calc(100vw - 78px))!important;
}

html body[data-bubble] .messages .message.is-forwarded-media-v65d .bubble,
html body[data-bubble] #messages .message.is-forwarded-media-v65d .bubble,
html body .messages .message.is-forwarded-media-v65d .bubble,
html body #messages .message.is-forwarded-media-v65d .bubble{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:2px!important;
  margin:0!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

html body .messages .message.mine.is-forwarded-media-v65d .bubble,
html body #messages .message.mine.is-forwarded-media-v65d .bubble{
  margin-left:auto!important;
  margin-right:0!important;
}

html body .messages .message:not(.mine).is-forwarded-media-v65d .bubble,
html body #messages .message:not(.mine).is-forwarded-media-v65d .bubble{
  margin-left:0!important;
  margin-right:auto!important;
}

html body .messages .message.is-forwarded-media-v65d .attachment,
html body #messages .message.is-forwarded-media-v65d .attachment{
  margin-top:3px!important;
}

html body .messages .message.is-forwarded-media-v65d .attachment.attachment-image,
html body #messages .message.is-forwarded-media-v65d .attachment.attachment-image{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-forwarded-media-v65d .attachment.attachment-image img,
html body #messages .message.is-forwarded-media-v65d .attachment.attachment-image img{
  display:block!important;
  width:auto!important;
  max-width:min(550px, calc(100vw - 96px))!important;
  max-height:64vh!important;
  object-fit:contain!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

html body .messages .message.is-forwarded-media-v65d .attachment-video-v60x,
html body #messages .message.is-forwarded-media-v65d .attachment-video-v60x{
  width:min(560px, 100%)!important;
  padding:0!important;
  margin:3px auto 0!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-forwarded-media-v65d .attachment-video-frame-v63j,
html body #messages .message.is-forwarded-media-v65d .attachment-video-frame-v63j{
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:14px!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

@media(max-width:760px){
  html body .messages .message.is-forwarded-media-v65d .message-content,
  html body #messages .message.is-forwarded-media-v65d .message-content{
    max-width:calc(100vw - 66px)!important;
  }
  html body .messages .message.is-forwarded-media-v65d .bubble,
  html body #messages .message.is-forwarded-media-v65d .bubble{
    padding:1px!important;
    border-radius:14px!important;
  }
  html body .messages .message.is-forwarded-media-v65d .attachment.attachment-image img,
  html body #messages .message.is-forwarded-media-v65d .attachment.attachment-image img{
    max-width:calc(100vw - 76px)!important;
    max-height:62vh!important;
    border-radius:13px!important;
  }
}

/* HBN_FORWARDED_WITH_MEDIA_COMPACT_V65F
   Weitergeleitete Medien auch mit Bildtext ohne dicke Bubble-Flaeche anzeigen. */
html body .messages .message.is-forwarded-with-media-v65f .message-content,
html body #messages .message.is-forwarded-with-media-v65f .message-content{
  max-width:min(580px, calc(100vw - 78px))!important;
}

html body[data-bubble] .messages .message.is-forwarded-with-media-v65f .bubble,
html body[data-bubble] #messages .message.is-forwarded-with-media-v65f .bubble,
html body .messages .message.is-forwarded-with-media-v65f .bubble,
html body #messages .message.is-forwarded-with-media-v65f .bubble{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:1px!important;
  margin:0!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

html body .messages .message.mine.is-forwarded-with-media-v65f .bubble,
html body #messages .message.mine.is-forwarded-with-media-v65f .bubble{
  margin-left:auto!important;
  margin-right:0!important;
}

html body .messages .message:not(.mine).is-forwarded-with-media-v65f .bubble,
html body #messages .message:not(.mine).is-forwarded-with-media-v65f .bubble{
  margin-left:0!important;
  margin-right:auto!important;
}

html body .messages .message.is-forwarded-with-media-v65f .hbn-message-text-v57e,
html body #messages .message.is-forwarded-with-media-v65f .hbn-message-text-v57e{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0 0 4px!important;
  padding:0 1px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:.9em!important;
  line-height:1.25!important;
}

html body .messages .message.is-forwarded-with-media-v65f .hbn-forwarded-label-v65a,
html body #messages .message.is-forwarded-with-media-v65f .hbn-forwarded-label-v65a{
  margin-bottom:2px!important;
}

html body .messages .message.is-forwarded-with-media-v65f .attachment,
html body #messages .message.is-forwarded-with-media-v65f .attachment{
  margin-top:0!important;
}

html body .messages .message.is-forwarded-with-media-v65f .attachment.attachment-image,
html body #messages .message.is-forwarded-with-media-v65f .attachment.attachment-image{
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-forwarded-with-media-v65f .attachment.attachment-image img,
html body #messages .message.is-forwarded-with-media-v65f .attachment.attachment-image img{
  display:block!important;
  width:auto!important;
  max-width:min(550px, calc(100vw - 96px))!important;
  max-height:64vh!important;
  object-fit:contain!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

html body .messages .message.is-forwarded-with-media-v65f .attachment-video-v60x,
html body #messages .message.is-forwarded-with-media-v65f .attachment-video-v60x{
  width:min(560px, 100%)!important;
  padding:0!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body .messages .message.is-forwarded-with-media-v65f .attachment-video-frame-v63j,
html body #messages .message.is-forwarded-with-media-v65f .attachment-video-frame-v63j{
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:14px!important;
  box-shadow:0 5px 16px rgba(2,6,23,.16)!important;
}

@media(max-width:760px){
  html body .messages .message.is-forwarded-with-media-v65f .message-content,
  html body #messages .message.is-forwarded-with-media-v65f .message-content{
    max-width:calc(100vw - 66px)!important;
  }
  html body .messages .message.is-forwarded-with-media-v65f .attachment.attachment-image img,
  html body #messages .message.is-forwarded-with-media-v65f .attachment.attachment-image img{
    max-width:calc(100vw - 76px)!important;
    max-height:62vh!important;
    border-radius:13px!important;
  }
}

/* HBN_COMPACT_MESSAGE_STYLE_V65I
   Optionaler WhatsApp-naeherer Nachrichtenstil. Lokal pro Geraet umschaltbar. */
html body[data-message-style="kompakt"] .messages,
html body[data-message-style="kompakt"] #messages{
  padding:12px 14px 14px!important;
}

html body[data-message-style="kompakt"] .messages .message,
html body[data-message-style="kompakt"] #messages .message{
  gap:7px!important;
  margin:0 0 7px!important;
  align-items:flex-end!important;
}

html body[data-message-style="kompakt"] .messages .message.mine,
html body[data-message-style="kompakt"] #messages .message.mine{
  padding-left:42px!important;
}

html body[data-message-style="kompakt"] .messages .message:not(.mine),
html body[data-message-style="kompakt"] #messages .message:not(.mine){
  padding-right:42px!important;
}

html body[data-message-style="kompakt"] .messages .message-content,
html body[data-message-style="kompakt"] #messages .message-content{
  position:relative!important;
  max-width:min(82%, 620px)!important;
}

html body[data-message-style="kompakt"] .messages .message-avatar,
html body[data-message-style="kompakt"] #messages .message-avatar{
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  margin-bottom:2px!important;
  font-size:10px!important;
}

html body[data-message-style="kompakt"] .messages .msg-meta,
html body[data-message-style="kompakt"] #messages .msg-meta{
  min-height:0!important;
  margin:0 4px 2px!important;
  gap:5px!important;
  font-size:10.5px!important;
  line-height:1.12!important;
  opacity:.72!important;
}

html body[data-message-style="kompakt"] .messages .message.mine .msg-meta,
html body[data-message-style="kompakt"] #messages .message.mine .msg-meta{
  justify-content:flex-end!important;
}

html body[data-message-style="kompakt"] .messages .msg-meta > span:first-child,
html body[data-message-style="kompakt"] #messages .msg-meta > span:first-child{
  max-width:160px!important;
}

html body[data-message-style="kompakt"] .messages .message.mine .msg-meta > span:first-child,
html body[data-message-style="kompakt"] #messages .message.mine .msg-meta > span:first-child{
  display:none!important;
}

html body[data-message-style="kompakt"] .messages .bubble,
html body[data-message-style="kompakt"] #messages .bubble{
  padding:7px 10px 8px!important;
  border-radius:13px!important;
  border-width:1px!important;
  box-shadow:0 3px 10px rgba(2,6,23,.10)!important;
  line-height:1.31!important;
  font-size:15px!important;
}

html body[data-message-style="kompakt"] .messages .message.mine .bubble,
html body[data-message-style="kompakt"] #messages .message.mine .bubble{
  border-radius:13px 13px 4px 13px!important;
}

html body[data-message-style="kompakt"] .messages .message:not(.mine) .bubble,
html body[data-message-style="kompakt"] #messages .message:not(.mine) .bubble{
  border-radius:13px 13px 13px 4px!important;
}

html body[data-message-style="kompakt"] .messages .message-actions,
html body[data-message-style="kompakt"] #messages .message-actions{
  display:none!important;
}

html body[data-message-style="kompakt"] .messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions,
html body[data-message-style="kompakt"] #messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions{
  position:absolute!important;
  z-index:30!important;
  top:-32px!important;
  right:0!important;
  display:inline-flex!important;
  gap:4px!important;
  padding:3px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  border-radius:999px!important;
  background:rgba(10,18,32,.88)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}

html body[data-message-style="kompakt"] .messages .message:not(.mine):is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions,
html body[data-message-style="kompakt"] #messages .message:not(.mine):is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions{
  left:0!important;
  right:auto!important;
}

html body[data-message-style="kompakt"] .messages .message-action,
html body[data-message-style="kompakt"] #messages .message-action{
  width:27px!important;
  height:27px!important;
  font-size:12px!important;
  box-shadow:none!important;
}

html body[data-message-style="kompakt"] .messages .message-reactions,
html body[data-message-style="kompakt"] #messages .message-reactions{
  margin-top:3px!important;
  gap:3px!important;
}

html body[data-message-style="kompakt"] .messages .reaction-pill,
html body[data-message-style="kompakt"] #messages .reaction-pill{
  min-height:20px!important;
  padding:1px 7px!important;
  font-size:11.5px!important;
}

html body[data-message-style="kompakt"] .messages .hbn-message-more-v57e,
html body[data-message-style="kompakt"] #messages .hbn-message-more-v57e{
  min-height:28px!important;
  margin-top:7px!important;
  padding:5px 10px!important;
  font-size:.78rem!important;
}

html body[data-message-style="kompakt"] .messages .bubble .hbn-forwarded-label-v65a,
html body[data-message-style="kompakt"] #messages .bubble .hbn-forwarded-label-v65a{
  margin-bottom:2px!important;
  font-size:.64em!important;
  line-height:1.12!important;
  opacity:.74!important;
}

html body[data-message-style="kompakt"] .messages .message.is-forwarded-with-media-v65f .hbn-message-text-v57e,
html body[data-message-style="kompakt"] #messages .message.is-forwarded-with-media-v65f .hbn-message-text-v57e{
  font-size:.86em!important;
  line-height:1.2!important;
  margin-bottom:2px!important;
}

html body[data-message-style="kompakt"] .messages .message .bubble:has(.attachment-image),
html body[data-message-style="kompakt"] .messages .message .bubble:has(.attachment-video-v60x),
html body[data-message-style="kompakt"] #messages .message .bubble:has(.attachment-image),
html body[data-message-style="kompakt"] #messages .message .bubble:has(.attachment-video-v60x){
  padding:2px!important;
  border-radius:14px!important;
}

html body[data-message-style="kompakt"] .messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
html body[data-message-style="kompakt"] #messages .message.is-media-only-v64z .bubble.is-media-only-v64z,
html body[data-message-style="kompakt"] .messages .message.is-forwarded-media-v65d .bubble,
html body[data-message-style="kompakt"] #messages .message.is-forwarded-media-v65d .bubble,
html body[data-message-style="kompakt"] .messages .message.is-forwarded-with-media-v65f .bubble,
html body[data-message-style="kompakt"] #messages .message.is-forwarded-with-media-v65f .bubble{
  padding:1px!important;
  border-radius:14px!important;
  box-shadow:none!important;
}

html body[data-message-style="kompakt"] .messages .attachment,
html body[data-message-style="kompakt"] #messages .attachment{
  margin-top:4px!important;
}

html body[data-message-style="kompakt"] .messages .attachment.attachment-image,
html body[data-message-style="kompakt"] #messages .attachment.attachment-image{
  margin-left:auto!important;
  margin-right:auto!important;
}

html body[data-message-style="kompakt"] .messages .attachment.attachment-image img,
html body[data-message-style="kompakt"] #messages .attachment.attachment-image img{
  max-width:min(550px, calc(100vw - 88px))!important;
  max-height:64vh!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 3px 12px rgba(2,6,23,.14)!important;
}

html body[data-message-style="kompakt"] .messages .attachment-video-v60x,
html body[data-message-style="kompakt"] #messages .attachment-video-v60x{
  padding:1px!important;
  border-radius:13px!important;
}

html body[data-message-style="kompakt"] .messages .attachment-video-v60x video,
html body[data-message-style="kompakt"] #messages .attachment-video-v60x video{
  border-radius:12px!important;
}

html body[data-message-style="kompakt"] .messages .hbn-read-receipt-v55c,
html body[data-message-style="kompakt"] #messages .hbn-read-receipt-v55c{
  margin-top:1px!important;
  padding-right:3px!important;
  font-size:.68rem!important;
  line-height:1.05!important;
  opacity:.76!important;
}

html body[data-message-style="kompakt"] .messages .bubble.hbn-video-call-bubble-v64l,
html body[data-message-style="kompakt"] #messages .bubble.hbn-video-call-bubble-v64l{
  padding:4px 6px!important;
  border-radius:12px!important;
}

html body[data-message-style="kompakt"] .messages .hbn-video-call-card-v64l,
html body[data-message-style="kompakt"] #messages .hbn-video-call-card-v64l{
  min-width:min(100%,230px)!important;
  max-width:min(100%,350px)!important;
  gap:7px!important;
}

html body[data-message-style="kompakt"] .messages .hbn-video-call-title-v64l,
html body[data-message-style="kompakt"] #messages .hbn-video-call-title-v64l{
  font-size:.9rem!important;
}

html body[data-message-style="kompakt"] .messages .hbn-video-call-sub-v64l,
html body[data-message-style="kompakt"] #messages .hbn-video-call-sub-v64l{
  font-size:.58rem!important;
  max-width:118px!important;
}

html body[data-message-style="kompakt"] .hbn-choice-sheet-message-style .hbn-choice-grid{
  grid-template-columns:1fr!important;
}

html body[data-message-style="kompakt"] .hbn-choice-icon[data-choice="kompakt"],
.hbn-choice-icon[data-choice="kompakt"]{
  background:linear-gradient(135deg,#10213a,#123d36)!important;
  color:#bff7dc!important;
}

.hbn-choice-icon[data-choice="komfort"]{
  background:linear-gradient(135deg,#eaf2f7,#cfe8d7)!important;
  color:#123d36!important;
}

@media(max-width:760px){
  html body[data-message-style="kompakt"] .messages,
  html body[data-message-style="kompakt"] #messages{
    padding:9px 9px calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  html body[data-message-style="kompakt"] .messages .message,
  html body[data-message-style="kompakt"] #messages .message{
    gap:5px!important;
    margin-bottom:6px!important;
  }
  html body[data-message-style="kompakt"] .messages .message.mine,
  html body[data-message-style="kompakt"] #messages .message.mine{
    padding-left:34px!important;
  }
  html body[data-message-style="kompakt"] .messages .message:not(.mine),
  html body[data-message-style="kompakt"] #messages .message:not(.mine){
    padding-right:34px!important;
  }
  html body[data-message-style="kompakt"] .messages .message-content,
  html body[data-message-style="kompakt"] #messages .message-content{
    max-width:calc(100vw - 70px)!important;
  }
  html body[data-message-style="kompakt"] .messages .message-avatar,
  html body[data-message-style="kompakt"] #messages .message-avatar{
    width:25px!important;
    height:25px!important;
  }
  html body[data-message-style="kompakt"] .messages .bubble,
  html body[data-message-style="kompakt"] #messages .bubble{
    padding:6px 9px 7px!important;
    font-size:14.5px!important;
    line-height:1.29!important;
  }
  html body[data-message-style="kompakt"] .messages .msg-meta,
  html body[data-message-style="kompakt"] #messages .msg-meta{
    font-size:10px!important;
    margin-bottom:2px!important;
  }
  html body[data-message-style="kompakt"] .messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions,
  html body[data-message-style="kompakt"] #messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions{
    top:-31px!important;
  }
  html body[data-message-style="kompakt"] .messages .attachment.attachment-image img,
  html body[data-message-style="kompakt"] #messages .attachment.attachment-image img{
    max-width:calc(100vw - 76px)!important;
    max-height:62vh!important;
  }
}

/* HBN_COMPACT_ACTION_OVERLAY_V65J */
html body[data-message-style="kompakt"] .messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions,
html body[data-message-style="kompakt"] #messages .message:is(:hover,:focus-within,.hbn-message-actions-open-v65i) .message-actions{
  display:none!important;
}

html body[data-message-style="kompakt"] .messages .message.hbn-action-overlay-source-v65j .bubble,
html body[data-message-style="kompakt"] #messages .message.hbn-action-overlay-source-v65j .bubble{
  outline:1px solid rgba(191,247,220,.42)!important;
  outline-offset:2px!important;
}

.hbn-message-action-overlay-v65j{
  position:fixed;
  left:0;
  top:0;
  z-index:2147482500;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(8,16,30,.94),rgba(18,43,54,.90));
  color:#f8fafc;
  box-shadow:0 18px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.hbn-message-action-overlay-v65j button{
  min-width:54px;
  height:42px;
  display:grid;
  grid-template-rows:18px 12px;
  place-items:center;
  gap:2px;
  padding:4px 8px;
  border:1px solid rgba(226,232,240,.12);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#f8fafc;
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.hbn-message-action-overlay-v65j button:active{
  transform:translateY(1px) scale(.98);
}

.hbn-message-action-overlay-v65j button[data-action="share"]{
  background:linear-gradient(135deg,rgba(191,247,220,.22),rgba(67,208,148,.16));
  border-color:rgba(191,247,220,.24);
}

.hbn-message-action-overlay-v65j button[data-action="delete"]{
  background:rgba(127,29,29,.34);
  border-color:rgba(251,113,133,.28);
}

.hbn-message-action-overlay-v65j span{
  display:block;
  font-size:15px;
}

.hbn-message-action-overlay-v65j small{
  display:block;
  max-width:62px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(226,242,236,.82);
  font-size:10px;
  font-weight:850;
  letter-spacing:0;
}

.hbn-message-action-overlay-v65j button:disabled{
  opacity:.62;
  cursor:wait;
}

@media(max-width:760px){
  .hbn-message-action-overlay-v65j{
    gap:4px;
    padding:4px;
    max-width:calc(100vw - 14px);
  }
  .hbn-message-action-overlay-v65j button{
    min-width:50px;
    height:40px;
    padding:4px 7px;
  }
  .hbn-message-action-overlay-v65j small{
    font-size:9.5px;
  }
}

/* HBN_REPLY_QUOTE_OVERLAY_V65K */
.hbn-reply-quote-v65k{
  display:block;
  margin:0 0 7px;
  padding:7px 9px;
  border-left:3px solid rgba(110,231,183,.72);
  border-radius:10px;
  background:rgba(2,8,23,.12);
  color:inherit;
  white-space:normal;
}

.hbn-reply-quote-v65k small,
.hbn-reply-quote-v65k span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hbn-reply-quote-v65k small{
  margin-bottom:2px;
  color:rgba(191,247,220,.92);
  font-size:.72em;
  font-weight:900;
}

.hbn-reply-quote-v65k span{
  opacity:.82;
  font-size:.82em;
  line-height:1.22;
}

body[data-bubble="mint"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="sand"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="blau"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="rose"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="gold"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="gruen"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="hellgrau"] .message.mine .hbn-reply-quote-v65k,
body[data-bubble="grau"] .message.mine .hbn-reply-quote-v65k{
  background:rgba(15,23,42,.08);
  border-left-color:rgba(18,61,54,.54);
}

body[data-bubble="mint"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="sand"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="blau"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="rose"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="gold"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="gruen"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="hellgrau"] .message.mine .hbn-reply-quote-v65k small,
body[data-bubble="grau"] .message.mine .hbn-reply-quote-v65k small{
  color:#123d36;
}

.hbn-reply-preview-v65k{
  display:grid;
  grid-template-columns:4px minmax(0,1fr) 34px;
  align-items:center;
  gap:9px;
  margin:0 0 8px;
  padding:8px 9px;
  border:1px solid rgba(110,231,183,.24);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(15,42,60,.90),rgba(18,61,54,.82));
  color:#f8fafc;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

.hbn-reply-preview-v65k[hidden]{
  display:none!important;
}

.hbn-reply-preview-line-v65k{
  width:4px;
  height:38px;
  border-radius:999px;
  background:#6ee7b7;
}

.hbn-reply-preview-copy-v65k{
  display:block;
  min-width:0;
}

.hbn-reply-preview-copy-v65k strong,
.hbn-reply-preview-copy-v65k small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hbn-reply-preview-copy-v65k strong{
  font-size:.86rem;
  line-height:1.15;
  font-weight:950;
}

.hbn-reply-preview-copy-v65k small{
  margin-top:2px;
  color:rgba(226,242,236,.76);
  font-size:.78rem;
  line-height:1.2;
  font-weight:750;
}

.hbn-reply-preview-close-v65k{
  width:36px;
  height:36px;
  border:1px solid rgba(226,232,240,.15);
  border-radius:999px;
  background:rgba(15,23,42,.62);
  color:#f8fafc;
  font-size:20px;
  line-height:1;
}

.hbn-message-action-overlay-v65j button[data-action="reply"]{
  background:linear-gradient(135deg,rgba(110,231,183,.22),rgba(59,130,246,.14));
  border-color:rgba(110,231,183,.26);
}

@media(max-width:760px){
  .hbn-reply-preview-v65k{
    margin-bottom:7px;
    padding:7px 8px;
    border-radius:15px;
  }
  .hbn-reply-preview-copy-v65k strong{
    font-size:.82rem;
  }
  .hbn-reply-preview-copy-v65k small{
    font-size:.74rem;
  }
  .hbn-message-action-overlay-v65j button{
    min-width:48px;
  }
}

/* HBN_MEDIA_UNDERLAY_V65X: Fotos im Verlauf dezent farbig unterlegen. */
html body .messages .message.is-media-only-v64z .attachment.attachment-image,
html body #messages .message.is-media-only-v64z .attachment.attachment-image,
html body .messages .message.is-forwarded-media-v65d .attachment.attachment-image,
html body #messages .message.is-forwarded-media-v65d .attachment.attachment-image,
html body .messages .message.is-forwarded-with-media-v65f .attachment.attachment-image,
html body #messages .message.is-forwarded-with-media-v65f .attachment.attachment-image,
html body[data-message-style="kompakt"] .messages .attachment.attachment-image,
html body[data-message-style="kompakt"] #messages .attachment.attachment-image{
  padding:3px!important;
  border-radius:16px!important;
  border:1px solid rgba(214,232,228,.18)!important;
  background:linear-gradient(135deg, rgba(20,35,52,.72), rgba(14,54,47,.56))!important;
  box-shadow:0 10px 24px rgba(2,6,23,.20)!important;
}

html body .messages .message.mine .attachment.attachment-image,
html body #messages .message.mine .attachment.attachment-image{
  border-color:rgba(110,231,183,.22)!important;
  background:linear-gradient(135deg, rgba(17,70,55,.78), rgba(26,42,68,.58))!important;
}

html body .messages .attachment.attachment-image img,
html body #messages .attachment.attachment-image img{
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 4px 14px rgba(2,6,23,.18)!important;
}

body[data-palette="dark"] .hbn-file-preview-pill,
body[data-palette="stern"] .hbn-file-preview-pill{
  border-color:rgba(110,231,183,.22)!important;
  background:linear-gradient(135deg, rgba(14,54,47,.90), rgba(20,35,52,.88))!important;
  color:#f8fafc!important;
  box-shadow:0 8px 20px rgba(2,6,23,.25)!important;
}

body[data-palette="dark"] .hbn-file-preview-size,
body[data-palette="stern"] .hbn-file-preview-size{
  color:rgba(191,247,220,.78)!important;
}

body[data-palette="dark"] .hbn-file-preview-action-v65z,
body[data-palette="stern"] .hbn-file-preview-action-v65z{
  background:linear-gradient(135deg, #d9fff0, #73e4ae)!important;
  color:#061a13!important;
}

/* HBN_ATTACHMENT_PREVIEW_COMPACT_V66A: Anhang-Vorschau unten kompakter. */
html body .file-preview.hbn-file-preview-active{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  margin:6px 12px 0!important;
  max-width:calc(100% - 24px)!important;
}

html body .hbn-file-preview-pill{
  min-width:0!important;
  min-height:30px!important;
  max-width:calc(100% - 40px)!important;
  padding:4px 8px!important;
  gap:6px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}

html body .hbn-file-preview-action-v65z{
  min-height:20px!important;
  padding:2px 7px!important;
  font-size:.78em!important;
  line-height:1!important;
}

html body .hbn-file-preview-name{
  min-width:0!important;
  max-width:18ch!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

html body .hbn-file-preview-size{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  font-size:.92em!important;
}

html body .hbn-file-preview-clear{
  flex:0 0 auto!important;
  min-width:32px!important;
  min-height:32px!important;
  width:32px!important;
  height:32px!important;
  padding:0!important;
}

@media(max-width:760px){
  html body .file-preview.hbn-file-preview-active{
    margin:5px 12px 0!important;
    gap:6px!important;
  }

  html body .hbn-file-preview-pill{
    min-height:28px!important;
    padding:4px 8px!important;
    max-width:calc(100% - 38px)!important;
  }

  html body .file-preview[data-preview-kind="image"] .hbn-file-preview-name,
  html body .file-preview[data-preview-kind="video"] .hbn-file-preview-name{
    display:none!important;
  }

  html body .file-preview[data-preview-kind="voice"] .hbn-file-preview-action-v65z{
    max-width:15ch!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .hbn-file-preview-action-v65z{
    font-size:.76em!important;
  }
}

/* HBN_IMAGE_SEND_PREVIEW_V66B: Bild vor dem Senden gross pruefen. */
html body .hbn-file-preview-check-v66b{
  flex:0 0 auto!important;
  border:1px solid rgba(190,255,225,.45)!important;
  background:linear-gradient(135deg, #d9fff0, #56d79a)!important;
  color:#071b14!important;
  border-radius:999px!important;
  min-height:32px!important;
  padding:0 13px!important;
  font-weight:900!important;
  font-size:.86em!important;
  box-shadow:0 8px 22px rgba(28, 220, 145, .18)!important;
}

html body .hbn-file-preview-check-v66b:active{
  transform:translateY(1px)!important;
}

html body .file-preview[data-preview-kind="image"] .hbn-file-preview-pill{
  max-width:calc(100% - 116px)!important;
}

html body.hbn-image-send-preview-open-v66b{
  overflow:hidden!important;
}

html body .hbn-image-send-preview-overlay-v66b{
  position:fixed!important;
  inset:0!important;
  z-index:99990!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  background:rgba(1, 6, 16, .94)!important;
  color:#fff!important;
  padding-top:env(safe-area-inset-top)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

html body .hbn-image-send-preview-v66b{
  position:relative!important;
  width:100%!important;
  max-width:760px!important;
  min-height:100%!important;
  display:grid!important;
  grid-template-rows:auto minmax(0, 1fr) auto auto!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at top left, rgba(45, 178, 126, .22), transparent 38%),
    linear-gradient(180deg, rgba(7, 16, 33, .98), rgba(2, 7, 18, .99))!important;
}

html body .hbn-image-send-top-v66b{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:12px 12px 10px!important;
  min-height:58px!important;
  background:linear-gradient(180deg, rgba(4, 10, 24, .82), rgba(4, 10, 24, .22))!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}

html body .hbn-image-send-icon-v66b,
html body .hbn-image-send-tool-v66b{
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
}

html body .hbn-image-send-icon-v66b{
  border:0!important;
  font-size:1.75rem!important;
}

html body .hbn-image-send-title-v66b{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  line-height:1.15!important;
}

html body .hbn-image-send-title-v66b strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:.95rem!important;
}

html body .hbn-image-send-title-v66b small{
  color:rgba(255,255,255,.66)!important;
  font-size:.78rem!important;
  margin-top:3px!important;
}

html body .hbn-image-send-body-v66b{
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px!important;
}

html body .hbn-image-send-body-v66b img{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  border-radius:18px!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34)!important;
}
html body .hbn-image-send-album-grid-v68j{
  width:min(100%, 720px)!important;
  height:min(100%, 720px)!important;
  max-height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  grid-template-rows:repeat(2, minmax(0, 1fr))!important;
  gap:8px!important;
  align-self:center!important;
  justify-self:center!important;
  aspect-ratio:1/1!important;
}

html body .hbn-image-send-album-grid-v68j[data-count="2"]{
  grid-template-rows:1fr!important;
  aspect-ratio:16/9!important;
  height:auto!important;
}

html body .hbn-image-send-album-grid-v68j[data-count="3"] .hbn-image-send-album-tile-v68j:first-child{
  grid-row:span 2!important;
}

html body .hbn-image-send-album-tile-v68j{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  border:1px solid rgba(190,255,225,.28)!important;
  background:rgba(11, 25, 39, .92)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.26)!important;
}

html body .hbn-image-send-album-tile-v68j img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:block!important;
}

html body .hbn-image-send-album-more-v68j{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(2, 6, 18, .56)!important;
  color:#fff!important;
  font-size:clamp(1.7rem, 6vw, 3rem)!important;
  font-weight:950!important;
  text-shadow:0 2px 10px rgba(0,0,0,.45)!important;
}

html body .hbn-image-send-bottom-v66b{
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom))!important;
  background:linear-gradient(0deg, rgba(4, 10, 24, .94), rgba(4, 10, 24, .52))!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
}

html body .hbn-image-send-caption-v66b{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border-radius:999px!important;
  background:rgba(7, 19, 34, .92)!important;
  border:1px solid rgba(190,255,225,.22)!important;
  padding:8px 14px!important;
}

html body .hbn-image-send-caption-v66b span{
  flex:0 0 auto!important;
  color:rgba(255,255,255,.72)!important;
  font-weight:800!important;
  font-size:.85rem!important;
}

html body .hbn-image-send-caption-v66b textarea{
  flex:1 1 auto!important;
  min-width:0!important;
  max-height:120px!important;
  resize:none!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff!important;
  font:inherit!important;
  line-height:1.35!important;
  padding:2px 0!important;
}

html body .hbn-image-send-caption-v66b textarea::placeholder{
  color:rgba(255,255,255,.52)!important;
}

html body .hbn-image-send-submit-v66b{
  flex:0 0 auto!important;
  width:50px!important;
  min-width:50px!important;
  height:44px!important;
  min-height:44px!important;
  border-radius:18px!important;
  border:1px solid rgba(191,247,220,.28)!important;
  background:linear-gradient(135deg,var(--accent-strong),var(--dark))!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  font-size:1.1rem!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 10px 24px rgba(15,23,42,.24)!important;
}

html body .hbn-image-send-submit-v66b[aria-busy="true"]{
  opacity:.82!important;
  box-shadow:0 0 0 3px rgba(238,186,48,.22), 0 10px 24px rgba(15,23,42,.18)!important;
}

html body .hbn-image-send-preview-overlay-v66b.is-uploading-v66f .hbn-image-send-bottom-v66b{
  display:none!important;
}

html body .hbn-image-send-preview-overlay-v66b.is-uploading-v66f .hbn-image-send-top-v66b{
  opacity:.62!important;
  pointer-events:none!important;
}

html body .hbn-image-send-upload-status-v66f{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto minmax(0, 1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 12px calc(12px + env(safe-area-inset-bottom))!important;
  padding:15px 16px 22px!important;
  border-radius:20px!important;
  border:1px solid rgba(148, 163, 184, .24)!important;
  background:linear-gradient(135deg, rgba(8, 18, 38, .96), rgba(12, 30, 47, .94))!important;
  color:#f8fafc!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}

html body .hbn-image-send-upload-status-v66f[hidden]{
  display:none!important;
}

html body .hbn-image-send-upload-spinner-v66f{
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  border:4px solid rgba(110,231,183,.18)!important;
  border-top-color:#65e6a7!important;
  animation:hbnPreviewUploadSpinV66f .9s linear infinite!important;
}

html body .hbn-image-send-upload-copy-v66f{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}

html body .hbn-image-send-upload-copy-v66f strong{
  color:#bff7dc!important;
  font-size:1.08rem!important;
  font-weight:950!important;
  line-height:1.15!important;
}

html body .hbn-image-send-upload-copy-v66f small{
  color:rgba(226, 232, 240, .78)!important;
  font-size:.9rem!important;
  line-height:1.25!important;
}

html body .hbn-image-send-upload-more-v66f{
  color:rgba(226, 232, 240, .72)!important;
  font-size:1.35rem!important;
  font-weight:900!important;
  letter-spacing:2px!important;
}

html body .hbn-image-send-upload-line-v66f{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:10px!important;
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg, rgba(22, 101, 52, .75), rgba(234, 179, 8, .92), rgba(110, 231, 183, .78))!important;
  overflow:hidden!important;
}

html body .hbn-image-send-upload-line-v66f::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent)!important;
  transform:translateX(-100%)!important;
  animation:hbnPreviewUploadLineV66f 1.2s linear infinite!important;
}

html body .hbn-image-send-upload-status-v66f[data-state="ok"] .hbn-image-send-upload-spinner-v66f{
  border-color:rgba(110,231,183,.28)!important;
  border-top-color:#bff7dc!important;
  animation:none!important;
  display:grid!important;
  place-items:center!important;
}

html body .hbn-image-send-upload-status-v66f[data-state="ok"] .hbn-image-send-upload-spinner-v66f::after{
  content:'\2713'!important;
  color:#bff7dc!important;
  font-weight:950!important;
  font-size:1rem!important;
}

html body .hbn-image-send-upload-status-v66f[data-state="error"]{
  border-color:rgba(248,113,113,.4)!important;
  background:linear-gradient(135deg, rgba(69, 10, 10, .96), rgba(42, 14, 20, .94))!important;
}

html body .hbn-image-send-upload-status-v66f[data-state="error"] .hbn-image-send-upload-copy-v66f strong{
  color:#fecaca!important;
}

html body .hbn-image-send-upload-status-v66f[data-state="error"] .hbn-image-send-upload-spinner-v66f{
  border-color:rgba(248,113,113,.28)!important;
  border-top-color:#f87171!important;
  animation:none!important;
}

@keyframes hbnPreviewUploadSpinV66f{
  to{transform:rotate(360deg)}
}

@keyframes hbnPreviewUploadLineV66f{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

@media(max-width:760px){
  html body .file-preview[data-preview-kind="image"] .hbn-file-preview-pill{
    max-width:calc(100% - 118px)!important;
  }

  html body .hbn-file-preview-check-v66b{
    min-height:30px!important;
    padding:0 11px!important;
    font-size:.82em!important;
  }

  html body .hbn-image-send-preview-v66b{
    max-width:none!important;
  }

  html body .hbn-image-send-top-v66b{
    padding:10px 12px 8px!important;
  }

  html body .hbn-image-send-tool-v66b{
    width:38px!important;
    height:38px!important;
    font-size:.88rem!important;
  }

  html body .hbn-image-send-icon-v66b{
    width:40px!important;
    height:40px!important;
  }

  html body .hbn-image-send-title-v66b{
    display:none!important;
  }

  html body .hbn-image-send-body-v66b{
    padding:10px 0!important;
  }

  html body .hbn-image-send-body-v66b img{
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body .hbn-image-send-album-grid-v68j{
    width:calc(100% - 20px)!important;
    height:auto!important;
    max-height:calc(100dvh - 210px)!important;
  }

  html body .hbn-image-send-album-tile-v68j{
    border-radius:12px!important;
  }

  html body .hbn-image-send-album-tile-v68j img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  html body .hbn-image-send-bottom-v66b{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
  }

  html body .hbn-image-send-caption-v66b{
    border-radius:20px!important;
    padding:9px 12px!important;
  }

  html body .hbn-image-send-caption-v66b span{
    display:none!important;
  }

  html body .hbn-image-send-submit-v66b{
    width:50px!important;
    min-width:50px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:18px!important;
  }

  html body .hbn-image-send-upload-status-v66f{
    margin:0 12px calc(10px + env(safe-area-inset-bottom))!important;
    padding:14px 14px 21px!important;
    border-radius:18px!important;
  }

  html body .hbn-image-send-upload-copy-v66f strong{
    font-size:1rem!important;
  }

  html body .hbn-image-send-upload-copy-v66f small{
    font-size:.84rem!important;
  }
}

/* HBN_IMAGE_VIEWER_FRAME_V66G: vergroesserte Bilder klarer vom Chat absetzen. */
html body .image-viewer-overlay{
  background:rgba(1, 7, 18, .74)!important;
}

html body .image-viewer-dialog{
  border:2px solid rgba(118, 231, 197, .62)!important;
  background:linear-gradient(180deg, rgba(8, 17, 34, .98), rgba(3, 10, 20, .98))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.13),
    0 0 0 5px rgba(45, 212, 191, .12),
    0 24px 70px rgba(0,0,0,.58)!important;
}

html body .image-viewer-head{
  background:linear-gradient(135deg, rgba(8, 22, 37, .98), rgba(12, 58, 50, .94))!important;
  border-bottom:1px solid rgba(118, 231, 197, .34)!important;
}

html body .image-viewer-body{
  background:linear-gradient(135deg, rgba(3, 9, 18, .96), rgba(9, 33, 39, .93))!important;
  box-shadow:inset 0 0 0 1px rgba(118, 231, 197, .18)!important;
}

html body .image-viewer-body img{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 10px 28px rgba(0,0,0,.30)!important;
}

@media(max-width:760px){
  html body .image-viewer-dialog{
    border-color:rgba(142, 245, 215, .74)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 0 0 4px rgba(45, 212, 191, .14),
      0 18px 54px rgba(0,0,0,.62)!important;
  }
}

/* HBN_CONTACT_MENU_V66R_START */
.hbn-contact-menu-open-v66r {
  overflow: hidden !important;
}
.hbn-contact-menu-backdrop-v66r {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(12px);
}
.hbn-contact-menu-card-v66r {
  width: min(100%, 440px);
  max-height: min(82dvh, 720px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(8, 18, 34, .98), rgba(9, 43, 36, .98));
  color: #f8fafc;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
}
.hbn-contact-menu-card-v66r.is-loading-v66r {
  padding: 24px;
  text-align: center;
}
.hbn-contact-menu-head-v66r {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 52px;
  gap: 16px;
  align-items: center;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.hbn-contact-menu-avatar-v66r {
  width: 116px;
  height: 116px;
  border-radius: 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(110, 231, 183, .2), rgba(30, 41, 59, .85));
  border: 1px solid rgba(255, 255, 255, .16);
  color: #c9ffe8;
  font-weight: 900;
  font-size: 2rem;
}
.hbn-contact-menu-avatar-v66r img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hbn-contact-menu-title-v66r {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hbn-contact-menu-title-v66r strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25rem;
  line-height: 1.1;
}
.hbn-contact-menu-title-v66r small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(226, 242, 236, .68);
  font-weight: 700;
}
.hbn-contact-menu-close-v66r {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: rgba(15, 23, 42, .62);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
}
.hbn-contact-menu-fields-v66r {
  display: grid;
  gap: 10px;
  padding: 16px 18px 6px;
}
.hbn-contact-menu-field-v66r {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .48);
  border: 1px solid rgba(148, 163, 184, .14);
}
.hbn-contact-menu-field-v66r small {
  display: block;
  margin-bottom: 3px;
  color: rgba(203, 213, 225, .68);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
}
.hbn-contact-menu-field-v66r strong {
  display: block;
  color: #f8fafc;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.hbn-contact-menu-empty-v66r {
  margin: 16px 18px 6px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .38);
  border: 1px dashed rgba(148, 163, 184, .24);
  color: rgba(226, 232, 240, .74);
  font-weight: 750;
}
.hbn-contact-menu-actions-v66r {
  display: grid;
  gap: 10px;
  padding: 16px 18px 20px;
}
.hbn-contact-menu-actions-v66r button {
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  padding: 12px 16px;
  font-weight: 900;
  font-size: 1rem;
}
.hbn-contact-menu-primary-v66r {
  background: linear-gradient(135deg, #c7ffe6, #41d29d);
  color: #061812;
}
.hbn-contact-menu-secondary-v66r {
  background: rgba(244, 114, 182, .15);
  color: #ffd7e8;
  border: 1px solid rgba(244, 114, 182, .28) !important;
}
.hbn-contact-menu-ghost-v66r {
  background: rgba(15, 23, 42, .58);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .16) !important;
}
.hbn-contact-menu-actions-v66r button:disabled {
  opacity: .62;
}
@media (min-width: 760px) {
  .hbn-contact-menu-backdrop-v66r {
    align-items: center;
  }
}
/* HBN_CONTACT_MENU_V66R_END */
/* HBN_CONTACT_MENU_OPEN_FIX_V66S_START */
.room-item,
.direct-user{
  grid-template-columns:44px minmax(0,1fr) auto;
}

.room-item .hbn-contact-menu-trigger-v66s,
.direct-user .hbn-contact-menu-trigger-v66s{
  grid-column:3;
  justify-self:end;
  align-self:center;
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(196,244,219,.18);
  background:linear-gradient(145deg,rgba(21,43,54,.82),rgba(9,20,34,.92));
  color:rgba(255,255,255,.9);
  font-size:17px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.room-item .hbn-contact-menu-trigger-v66s:active,
.room-item .hbn-contact-menu-trigger-v66s:focus-visible,
.direct-user .hbn-contact-menu-trigger-v66s:active,
.direct-user .hbn-contact-menu-trigger-v66s:focus-visible{
  outline:none;
  border-color:rgba(128,239,191,.62);
  background:linear-gradient(145deg,rgba(23,82,74,.92),rgba(14,44,58,.96));
  color:#d9fff0;
}

body[data-palette="stern"] .room-item .hbn-contact-menu-trigger-v66s,
body[data-palette="stern"] .direct-user .hbn-contact-menu-trigger-v66s,
body[data-palette="dark"] .room-item .hbn-contact-menu-trigger-v66s,
body[data-palette="dark"] .direct-user .hbn-contact-menu-trigger-v66s{
  border-color:rgba(125,239,196,.2);
  background:linear-gradient(145deg,rgba(27,56,67,.86),rgba(10,18,33,.94));
}
/* HBN_CONTACT_MENU_OPEN_FIX_V66S_END */
/* HBN_CONTACT_MENU_APP_BROWSER_FIX_V66U_START */
.direct-user.hbn-contact-menu-ready-v66u,
.room-item.hbn-contact-menu-ready-v66u,
.direct-user.hbn-contact-menu-ready-v66u .room-avatar,
.room-item.hbn-contact-menu-ready-v66u .room-avatar,
.direct-user.hbn-contact-menu-ready-v66u .room-avatar img,
.room-item.hbn-contact-menu-ready-v66u .room-avatar img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.room-item .hbn-contact-menu-trigger-auto-v66u,
.direct-user .hbn-contact-menu-trigger-auto-v66u{
  display:inline-flex;
}

@media (max-width: 760px){
  .room-item .hbn-contact-menu-trigger-v66s,
  .direct-user .hbn-contact-menu-trigger-v66s{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:20px;
    font-size:18px;
  }
}
/* HBN_CONTACT_MENU_APP_BROWSER_FIX_V66U_END */
/* HBN_CONTACT_INFO_VISIBLE_V66V_START */
.room-item,
.direct-user{
  position:relative;
}

.direct-user{
  padding-right:58px;
}

.direct-user .hbn-contact-menu-trigger-v66s{
  position:absolute!important;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  grid-column:auto!important;
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:18px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  z-index:5;
  border:1px solid rgba(134,239,172,.42);
  background:linear-gradient(145deg,rgba(20,83,45,.92),rgba(15,23,42,.96));
  color:#ecfdf5;
  font-size:16px;
  font-weight:950;
  line-height:1;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
  pointer-events:auto;
}

.direct-user .hbn-contact-menu-trigger-v66s::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:24px;
}

body[data-palette="doodle"] .direct-user .hbn-contact-menu-trigger-v66s,
body[data-palette="stern"] .direct-user .hbn-contact-menu-trigger-v66s{
  background:linear-gradient(145deg,rgba(21,128,61,.92),rgba(8,47,73,.96));
  border-color:rgba(167,243,208,.52);
}

@media (max-width:760px){
  .direct-user{
    padding-right:54px;
  }

  .direct-user .hbn-contact-menu-trigger-v66s{
    right:10px;
    width:36px;
    height:36px;
    min-width:36px;
    font-size:16px;
  }
}
/* HBN_CONTACT_INFO_VISIBLE_V66V_END */
/* HBN_CONTACT_INFO_ROOM_ROWS_V66W_START */
.room-item[data-room-type="direkt"]{
  position:relative;
  padding-right:58px;
}

.room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s{
  position:absolute!important;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  grid-column:auto!important;
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:18px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  z-index:5;
  border:1px solid rgba(134,239,172,.42);
  background:linear-gradient(145deg,rgba(20,83,45,.92),rgba(15,23,42,.96));
  color:#ecfdf5;
  font-size:16px;
  font-weight:950;
  line-height:1;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
  pointer-events:auto;
}

.room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:24px;
}

body[data-palette="doodle"] .room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s,
body[data-palette="stern"] .room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s{
  background:linear-gradient(145deg,rgba(21,128,61,.92),rgba(8,47,73,.96));
  border-color:rgba(167,243,208,.52);
}

@media (max-width:760px){
  .room-item[data-room-type="direkt"]{
    padding-right:54px;
  }

  .room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s{
    right:10px;
    width:36px;
    height:36px;
    min-width:36px;
    font-size:16px;
  }
}
/* HBN_CONTACT_INFO_ROOM_ROWS_V66W_END */
/* HBN_CONTACT_INFO_QUIET_V66Y_START */
.direct-user,
.room-item[data-room-type="direkt"]{
  padding-right:10px!important;
}

.direct-user .hbn-contact-menu-trigger-v66s,
.room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border-color:transparent!important;
  border-width:0!important;
  box-shadow:none!important;
  color:transparent!important;
}

.direct-user .hbn-contact-menu-trigger-v66s::before,
.room-item[data-room-type="direkt"] .hbn-contact-menu-trigger-v66s::before{
  inset:-8px;
}
/* HBN_CONTACT_INFO_QUIET_V66Y_END */
/* HBN_MEDIA_ACTION_ZONE_V67B_START */
html body .messages .hbn-media-action-zone-v67b,
html body #messages .hbn-media-action-zone-v67b{
  display:none;
}

html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:20px;
  margin:0 0 3px;
  padding:0;
  border:1px solid rgba(191,247,220,.14);
  border-radius:11px 11px 7px 7px;
  background:linear-gradient(135deg,rgba(6,28,32,.46),rgba(20,52,71,.24));
  color:rgba(226,242,236,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b span,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b span{
  display:block;
  transform:translateY(-2px);
  font-size:18px;
  line-height:1;
  font-weight:900;
}

html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:active,
html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:focus-visible,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:active,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:focus-visible{
  border-color:rgba(191,247,220,.42);
  background:linear-gradient(135deg,rgba(20,184,166,.32),rgba(67,208,148,.18));
  color:#ecfff6;
  outline:0;
}

@media (hover:hover){
  html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b,
  html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b{
    opacity:.62;
  }
  html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:hover,
  html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b:hover{
    opacity:1;
  }
}
/* HBN_MEDIA_ACTION_ZONE_V67B_END */
/* HBN_MEDIA_BOUNDS_TEXT_ACTIONS_V67C_START */
html body .messages .message.has-media-attachment-v67b .message-content,
html body #messages .message.has-media-attachment-v67b .message-content{
  max-width:min(580px, calc(100% - 52px))!important;
}

html body .messages .message.has-media-attachment-v67b .bubble,
html body #messages .message.has-media-attachment-v67b .bubble{
  box-sizing:border-box!important;
  max-width:100%!important;
  overflow:hidden!important;
}

html body .messages .message.has-media-attachment-v67b .attachment,
html body #messages .message.has-media-attachment-v67b .attachment,
html body .messages .message.has-media-attachment-v67b .attachment.attachment-image,
html body #messages .message.has-media-attachment-v67b .attachment.attachment-image,
html body .messages .message.has-media-attachment-v67b .attachment-video-v60x,
html body #messages .message.has-media-attachment-v67b .attachment-video-v60x{
  box-sizing:border-box!important;
  max-width:100%!important;
}

html body .messages .message.has-media-attachment-v67b .attachment.attachment-image img,
html body #messages .message.has-media-attachment-v67b .attachment.attachment-image img,
html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .attachment.attachment-image img,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .attachment.attachment-image img{
  box-sizing:border-box!important;
  max-width:100%!important;
  width:auto!important;
  height:auto!important;
}

html body[data-message-style="kompakt"] .messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b,
html body[data-message-style="kompakt"] #messages .message.has-media-attachment-v67b .hbn-media-action-zone-v67b{
  box-sizing:border-box!important;
  width:100%!important;
}

@media (hover:none), (pointer:coarse){
  html body[data-message-style="kompakt"] .messages .message .bubble,
  html body[data-message-style="kompakt"] #messages .message .bubble,
  html body[data-message-style="kompakt"] .messages .message .hbn-message-text-v57e,
  html body[data-message-style="kompakt"] #messages .message .hbn-message-text-v57e{
    -webkit-touch-callout:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
  }
}
/* HBN_MEDIA_BOUNDS_TEXT_ACTIONS_V67C_END */
/* HBN_COMPOSER_BUTTONS_GREEN_V67D_START */
html body .composer #emojiToggle.icon-btn,
html body .composer #attachmentMenuToggle.icon-btn,
html body .composer #voiceRecordToggle.icon-btn{
  background:linear-gradient(135deg,var(--accent-strong),var(--dark))!important;
  color:#ffffff!important;
  border-color:rgba(223,243,230,.58)!important;
  box-shadow:0 10px 24px rgba(18,61,54,.18), inset 0 1px 0 rgba(255,255,255,.32)!important;
}

html body .composer #emojiToggle.icon-btn:active,
html body .composer #attachmentMenuToggle.icon-btn:active,
html body .composer #voiceRecordToggle.icon-btn:active{
  transform:translateY(1px) scale(.98);
  filter:saturate(1.06) brightness(1.02);
}

html body .composer #voiceRecordToggle.icon-btn.is-recording-v63t{
  background:linear-gradient(135deg,#b91c1c,#7f1d1d)!important;
  border-color:rgba(254,202,202,.46)!important;
  box-shadow:0 0 0 4px rgba(248,113,113,.18),0 12px 28px rgba(127,29,29,.22)!important;
}

body[data-palette="softrose"] .composer #emojiToggle.icon-btn,
body[data-palette="softrose"] .composer #attachmentMenuToggle.icon-btn,
body[data-palette="softrose"] .composer #voiceRecordToggle.icon-btn,
body[data-palette="soft-rose"] .composer #emojiToggle.icon-btn,
body[data-palette="soft-rose"] .composer #attachmentMenuToggle.icon-btn,
body[data-palette="soft-rose"] .composer #voiceRecordToggle.icon-btn,
body[data-palette="softrot"] .composer #emojiToggle.icon-btn,
body[data-palette="softrot"] .composer #attachmentMenuToggle.icon-btn,
body[data-palette="softrot"] .composer #voiceRecordToggle.icon-btn,
body.theme-softrot .composer #emojiToggle.icon-btn,
body.theme-softrot .composer #attachmentMenuToggle.icon-btn,
body.theme-softrot .composer #voiceRecordToggle.icon-btn,
body.theme-softrose .composer #emojiToggle.icon-btn,
body.theme-softrose .composer #attachmentMenuToggle.icon-btn,
body.theme-softrose .composer #voiceRecordToggle.icon-btn{
  background:linear-gradient(135deg,#f4b7c4,#7c2a3d)!important;
  border-color:rgba(255,218,225,.58)!important;
  box-shadow:0 10px 24px rgba(124,42,61,.18), inset 0 1px 0 rgba(255,255,255,.30)!important;
}
/* HBN_COMPOSER_BUTTONS_GREEN_V67D_END */
/* HBN_CONTACT_LOADING_CANCEL_V67E_START */
.hbn-contact-menu-card-v66r.is-loading-v66r{
  display:grid!important;
  gap:12px!important;
  justify-items:center!important;
  padding:22px 24px!important;
}
.hbn-contact-loading-spinner-v67e{
  width:28px;
  height:28px;
  border-radius:999px;
  border:3px solid rgba(199,255,230,.22);
  border-top-color:#8cf7ca;
  animation:hbnContactLoadSpinV67e .8s linear infinite;
}
.hbn-contact-loading-hint-v67e{
  color:rgba(226,242,236,.72);
  font-weight:750;
  line-height:1.35;
  text-align:center;
}
.hbn-contact-loading-cancel-v67e{
  min-height:42px;
  padding:10px 18px;
  border:1px solid rgba(199,255,230,.26);
  border-radius:999px;
  background:rgba(15,23,42,.58);
  color:#f8fafc;
  font-weight:900;
}
.hbn-contact-loading-cancel-v67e:active{
  transform:scale(.98);
}
@keyframes hbnContactLoadSpinV67e{to{transform:rotate(360deg)}}
/* HBN_CONTACT_LOADING_CANCEL_V67E_END */

/* HBN_ADMIN_OPEN_APP_FIX_V67H: Verwaltung in der Android-App direkt und dezent erreichbar */
.chat-header-actions .header-admin-link,
.panel-actions .panel-admin-link.hbn-admin-open-v67h,
.admin-link.hbn-admin-open-v67h{
  background:linear-gradient(135deg,rgba(18,61,54,.88),rgba(15,23,42,.78))!important;
  color:#f8fafc!important;
  border-color:rgba(125,211,252,.24)!important;
}
.chat-header-actions .header-admin-link:active,
.panel-actions .panel-admin-link.hbn-admin-open-v67h:active,
.admin-link.hbn-admin-open-v67h:active{
  transform:translateY(1px);
  border-color:rgba(94,234,212,.45)!important;
}
@media(max-width:760px){
  .chat-header-actions .header-admin-link{
    flex:0 0 36px!important;
  }
}

/* HBN_SETTINGS_HUB_V67J_START */
.chat-header-actions .hbn-settings-toggle-v67j{
  font-size:18px;
  font-weight:900;
}
.hbn-settings-sheet-v67j{
  display:grid;
  gap:12px;
  background:linear-gradient(180deg, rgba(9,18,31,.98), rgba(6,16,25,.98));
}
.hbn-settings-head-v67j strong{
  display:block;
  font-size:20px;
  font-weight:950;
}
.hbn-settings-head-v67j small{
  display:block;
  margin-top:3px;
  color:rgba(226,232,240,.68);
  font-size:12px;
  line-height:1.35;
}
.hbn-settings-section-v67j{
  display:grid;
  gap:10px;
  padding:13px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,27,43,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.hbn-settings-section-v67j h3{
  margin:0;
  font-size:15px;
  font-weight:950;
  letter-spacing:0;
  color:#f8fafc;
}
.hbn-settings-row-v67j{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:54px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(255,255,255,.045);
}
.hbn-settings-row-v67j span{
  display:grid;
  gap:2px;
  min-width:0;
}
.hbn-settings-row-v67j b{
  font-size:14px;
  font-weight:900;
  color:#f8fafc;
}
.hbn-settings-row-v67j small,
.hbn-settings-note-v67j{
  color:rgba(226,232,240,.65);
  font-size:12px;
  line-height:1.35;
}
.hbn-settings-row-v67j input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:50px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.82);
  position:relative;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.hbn-settings-row-v67j input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#cbd5e1;
  transition:transform .16s ease,background .16s ease;
}
.hbn-settings-row-v67j input[type="checkbox"]:checked{
  border-color:rgba(110,231,183,.55);
  background:linear-gradient(135deg,#7df5bf,#35c98b);
}
.hbn-settings-row-v67j input[type="checkbox"]:checked::after{
  transform:translateX(20px);
  background:#052016;
}
.hbn-settings-actions-v67j,
.hbn-settings-pill-grid-v67j,
.hbn-settings-segment-v67j{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hbn-settings-actions-v67j button,
.hbn-settings-pill-grid-v67j button,
.hbn-settings-segment-v67j button{
  min-height:38px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:15px;
  padding:9px 12px;
  background:rgba(255,255,255,.07);
  color:#f8fafc;
  font-weight:850;
  cursor:pointer;
}
.hbn-settings-actions-v67j button:active,
.hbn-settings-pill-grid-v67j button:active,
.hbn-settings-segment-v67j button:active{
  transform:translateY(1px);
}
.hbn-settings-pill-grid-v67j button.active,
.hbn-settings-segment-v67j button.active{
  border-color:rgba(110,231,183,.58);
  background:linear-gradient(135deg,rgba(110,231,183,.30),rgba(45,212,191,.16));
  color:#d8fff1;
}
.hbn-settings-meter-v67j{
  display:grid;
  gap:3px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(110,231,183,.20);
  background:linear-gradient(135deg,rgba(12,64,50,.56),rgba(15,23,42,.60));
}
.hbn-settings-meter-v67j strong{
  font-size:24px;
  line-height:1;
  font-weight:950;
  color:#bff7dc;
}
.hbn-settings-meter-v67j span{
  color:rgba(226,232,240,.72);
  font-size:13px;
  line-height:1.35;
}
@media(max-width:760px){
  .hbn-settings-sheet-v67j{
    width:100%;
    max-height:86dvh;
    border-radius:26px 26px 0 0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }
  .hbn-settings-section-v67j{
    padding:11px;
    border-radius:20px;
  }
  .hbn-settings-actions-v67j button,
  .hbn-settings-pill-grid-v67j button,
  .hbn-settings-segment-v67j button{
    flex:1 1 auto;
  }
}
/* HBN_SETTINGS_HUB_V67J_END */

/* HBN_SAVED_MESSAGES_V67T */
.hbn-saved-folder-room-v67t {
  border-color: rgba(178, 255, 218, .35) !important;
  background: linear-gradient(135deg, rgba(10, 84, 66, .62), rgba(18, 33, 58, .76)) !important;
}
.hbn-saved-folder-room-v67t.active {
  box-shadow: 0 0 0 1px rgba(178, 255, 218, .45), 0 12px 28px rgba(0, 0, 0, .28);
}
.hbn-saved-folder-avatar-v67t {
  background: linear-gradient(135deg, rgba(13, 48, 42, .96), rgba(24, 37, 58, .96)) !important;
  border: 1px solid rgba(178, 255, 218, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .24);
  color: #bfffe7 !important;
  font-size: .72em;
  font-weight: 900;
  letter-spacing: -1px;
  white-space: nowrap;
}
.app-shell.hbn-saved-folder-active-v67t #composer,
.app-shell.hbn-saved-folder-active-v67t .composer {
  display: none !important;
}
.message-save {
  color: #d9ffe9;
}
/* HBN_SAVED_TOAST_V68D */
.hbn-saved-toast-v68d {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  z-index: 2200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(460px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(178, 255, 218, .26);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8, 38, 33, .96), rgba(18, 32, 52, .96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #f3fff8;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.hbn-saved-toast-v68d.is-visible-v68d {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hbn-saved-toast-icon-v68d {
  display: inline-grid;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  place-items: center;
  border-radius: 15px;
  background: rgba(178, 255, 218, .13);
  border: 1px solid rgba(178, 255, 218, .24);
  color: #bfffe7;
  font-weight: 900;
}

.hbn-saved-toast-v68d strong {
  display: block;
  font-weight: 900;
  font-size: .98rem;
}

.hbn-saved-toast-v68d small {
  display: block;
  margin-top: 2px;
  color: rgba(225, 245, 238, .76);
  font-size: .82rem;
}

@media (max-width: 720px) {
  .hbn-saved-toast-v68d {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    border-radius: 18px;
  }
}

/* HBN_IMAGE_ALBUM_V68F_START */
.hbn-attachment-album-v68f {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 440px);
  margin-top: 4px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(7, 21, 27, .34);
  border: 1px solid rgba(160, 255, 220, .16);
}

.hbn-attachment-album-v68f .hbn-album-tile-v68f {
  position: relative;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: none !important;
}

.hbn-attachment-album-v68f[data-count="2"] .hbn-album-tile-v68f {
  aspect-ratio: 1 / .92;
}

.hbn-attachment-album-v68f .hbn-album-tile-v68f img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 0 !important;
}

.hbn-album-more-v68f {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.2rem, 6vw, 2.2rem);
  background: rgba(0, 0, 0, .48);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

@media (max-width: 760px) {
  .hbn-attachment-album-v68f {
    width: min(100%, 78vw);
    gap: 3px;
    border-radius: 12px;
  }
}
/* HBN_IMAGE_ALBUM_V68F_END */