/* Basisstile für Messenger Modal */
.messenger-modal {
    display: none; /* Modal standardmäßig verstecken */
}

.messenger-modal .modal-dialog {
    margin: 0 auto;
    max-width: 1024px;
    width: 100%;
    height: auto;
}

.messenger-content {
    border-radius: 8px;
    overflow: hidden;
}

/* Basisstil für beide Sektionen */
.messenger__left,
.messenger__right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* Spezifische Stile für messenger__right */
.messenger__right {
    width: 100%;
    position: relative;
}

.messenger__right-inner {
    width: 100%;
}

.height-fix {
    height: calc(100vh - var(--height-adustment));
    height: calc((var(--vh, 1vh) * 100) - var(--height-adustment));
    overflow-y: scroll;
    overflow-x: hidden;
}

.messages.height-fix {
    overflow: hidden;
}

.chat-scroll {
    overflow-y: scroll;
    padding: 1.25rem;
    overflow-x: hidden;
    flex-grow: 1;
}

/* Stile für connection-header */
.connection-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.connection-header__info {
    text-align: center;
}

.connection-header__user {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.286em;
    line-height: 1.2;
    color: #949494;
    white-space: nowrap;
}

.connection-header__status {
    color: #949494;
    overflow: hidden;
    max-width: 250px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-header__nav {
    right: 0;
}

.connection-header__nav,
.connection-header__icons {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: auto 0;
}

.connection-header__icons {
    left: 0;
}

.connection-header__icons .icon {
    margin: 0 5px 0 0;
}

/* Zurück-Button */
.back-button {
    display: none;
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
}

/* Tabs für den Messenger */
.tabs--messenger {
    display: flex;
    height: 64px;
    justify-content: space-between;
}

.tabs--messenger .tabs__item:not(:last-child) {
    margin-right: 0;
}

.tabs--messenger .tabs__item {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 48%;
    padding: 0 5px;
    color: #949494;
    word-wrap: break-word;
}

.tabs__item.active {
    cursor: default;
    color: #FF002B;
}

.tabs__item:not(:last-child) {
    margin-right: 30px;
}

.tabs__item {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    cursor: pointer;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
}

.tabs__item.active::after {
    opacity: 1;
    border-color: #FF002B;
}

.tabs__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    border-bottom: 3px solid transparent;
    width: 100%;
    transition: opacity .2s;
}

/* Suche im Messenger */
.messenger__search {
    width: 300px;
    height: 72px;
    padding: 15px 20px;
}

.search-field {
    position: relative;
    margin: 5px 0;
}

.search-field__inner {
    position: relative;
}

.text-field {
    position: relative;
}

.search-field--messenger .text-field__input {
    border-color: transparent;
    border-radius: 8px;
    padding-left: 38px;
    background: #fafafa;
    font-size: 13px;
}

.search-field .text-field__input {
    margin: 0;
    padding-right: 35px;
    text-overflow: ellipsis;
}

.text-field--sm .text-field__input {
    height: 40px;
    padding: 0 15px;
    font-size: 14px;
    line-height: 1.2857;
}

.text-field__input {
    outline: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    width: 100%;
    height: 44px;
    padding: 0 20px;
    background: #fff;
    font: 300 16px/1.25 Stolzl, Helvetica, Arial, sans-serif;
    color: #6a6a6a;
    -webkit-font-smoothing: antialiased;
    transition: border-color .2s;
}

.text-field__input:hover,
.text-field__input:focus {
    border-color: #FF002B;
}

.search-field--messenger .search-field__icon {
    right: initial;
    left: 16px;
}

/* Kontaktliste */
.contacts__item {
    position: relative;
    opacity: 1;
    height: 80px;
    padding: 10px 20px;
    transition: background .15s linear, opacity .15s linear .15s, height .15s linear, padding .15s linear;
    cursor: pointer;
    border-bottom: #f2f2f2 1px solid;
    color: #6a6a6a;
}

.contacts__item:hover {
    background: #f7f7f7;
}

.chatlist__title {
    padding-left: 20px;
    font-size: 16px;
}

.contacts__item.current {
    background: #f7f7f7;
}

.contacts__item.current:hover {
    background: #f7f7f7;
}

.contacts__item .brick--lg {
    margin: 5px 0;
    width: 50px;
    height: 50px;
}

.contacts__item .brick {
    transition: box-shadow .15s linear;
}

.contacts__item:hover .brick > .brick {
    box-shadow: 0 0 0 2px #f7f7f7;
}

.contacts__item.current .brick > .brick {
    display: none;
}

.contacts__item--banner .brick,
.contacts__item--banner.current .brick > .brick {
    display: inline-block;
    box-shadow: 0 0 0 2px #fff;
}

.contacts__item--banner.current .brick > .brick {
    overflow: hidden;
}

.contacts__txt {
    margin: 0 0 0 14px;
    max-width: 160px;
    line-height: 1.3rem;
    font-size: 0.85rem !important;
}

.contacts__name {
    overflow: hidden;
    max-width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contacts__msg {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lgrey {
    color: #949494;
}

.contacts__info-typing,
.writing .contacts__msg {
    display: none;
    color: #090;
    font-size: 11px;
}

.contacts__favorite {
    position: absolute;
    z-index: 2;
    top: 21px;
    right: 16px;
}

.inline {
    vertical-align: middle;
    display: inline-block;
}

/* BRICK */
/* Pseudoelemente für Brick */
.brick {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin: 5px 0;
    border-radius: 100%;
    width: 44px;
    height: 44px;
    background-clip: padding-box;
    text-align: center;
    transition: background .2s;
    -webkit-user-select: none;
    user-select: none;
}

.brick:before,
.brick:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    transition: background .2s;
}

/* Größe für kleine Bricks */
.brick--xsm {
    border-radius: 11px;
    width: auto;
    min-width: 22px;
    height: 22px;
    padding: 5px 4px 4px;
    font-weight: 400;
    font-size: .7857em;
    line-height: 1.2;
    color: #fff;
}

.firefox:not(.mac) .brick--xsm {
    line-height: 1.15;
}

.brick > .icon,
.brick > img,
.brick > .scale {
    position: absolute;
    top: -50px;
    right: -50px;
    bottom: -50px;
    left: -50px;
    margin: auto;
}

.brick > img {
    max-width: 100%;
    max-height: 100%;
}

.brick--hover > .icon {
    z-index: 1;
}

.brick-wrap:active .brick--hover > .icon {
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
}

/* Pseudoelement für kleine Brick-Symbole */
.brick--xsm > .icon--bubble-stroke {
    width: calc(100% + 4px);
    max-width: 26px;
    height: calc(100% + 4px);
    max-height: 26px;
}

.brick--sm > .icon--bubble-stroke {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
}

.loading .brick > .icon {
    opacity: 0;
}

/* Online-Status */
.brick > .online-status {
    position: absolute;
    right: -1px;
    bottom: 2px;
    border: 2px solid #fff;
}

/* BRICK Bilder */
.brick-img {
    position: absolute;
    top: 0;
    left: 0;
}

.brick .brick-img {
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.brick-img,
.brick-img > img {
    overflow: hidden;
    border-radius: inherit;
    width: 100%;
    height: 100%;
}

.brick-img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset;
    border-radius: inherit;
}

.brick--gift > .brick-img {
    margin: auto;
    width: 80%;
    height: 80%;
}

.brick > .brick {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* Farbe für Brick */
.brick--white,
.brick--stroke {
    background: #fff;
}

.brick--primary {
    background: #FF002B;
}

.brick--red {
    background: #FF002B;
}

.brick--like {
    background: #ff661b;
}

/* Messenger-Alarm */
#messenger_alert {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 65px;
    display: none;
}

.messages .cht {
    clear: both;
    float: left;
    width: 100%;
    font-size: 14.2px;
    display: flex;
    position: relative;
    margin-bottom: 25px;
    word-break: break-word;
}

.messages .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.messages .message-data {
    display: inline-block;
    border-radius: 5px;
    max-width: 300px;
    line-height: 1.3;
    margin-bottom: 0px;
    font-size:1.1em;
}

.messages .sent .message-data {
    color: #f3f3f3;
    float: right;
    order: 2;
    position: relative;
}

.chat-txt {
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
     word-break: break-word; /* Sicherstellen, dass lange Wörter umgebrochen werden */
   
}


.chat-txt .reply-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    border-radius:5px;
    padding:5px;

    border-left:#f00 4px solid;
}

.chat-txt .reply-username {
    font-size: 12px;
    font-weight: bold;

    margin-bottom: 2px; /* Minimaler Abstand zwischen Username und Nachricht */
}

.chat-txt .reply-message {
    font-size: 12px;

    line-height: 1.2;
    margin: 0;
}




.chat-code {
    padding: 5px;
    display: block;
    border-radius: 5px;
    line-height: 19px;
    white-space: pre-line;
    position: relative;
    overflow: hidden;
}

.chat-img img {
    border-radius: 4px;
}

.message-html,
.chat-img,
.chat-txt,
.chat-gif,
.chat-sticker {
    display: block;
    overflow: hidden;
}

.messages .sent .avatar {
    margin-left: 8px;
    float: right;
    order: 3;
}

.messages .replies .avatar {
    float: left;
    margin-right: 8px;
}

.messages .replies .message-data {
    float: left;
    position: relative;
    color: #777777;
}

.replies .message-meta {
    position: absolute;
    left: 5px;
    bottom: -18px;
}

.messages .chats {
    padding: 0;
}

.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section {
    background: #f3f3f3;
}

.dz-message {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0 !important;
}

.dz-message i {
    display: block;
    font-size: 50px;
    margin-bottom: 10px;
}

.new-date p {
    text-align: center;
    width: 100%;
    max-width: unset !important;
}

.new-date {
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom:#f1f1f1 1px solid;
}

.sent {
    justify-content: flex-end;
}

.sent .chat-img-sgl,
.sent .chat-img-duo,
.sent .chat-img-grp,
.sent .chat-gif,
.sent .chat-txt,
.sent .chat-code,
.chat-fwd,
.sent .link-meta,
.sent .file-section,
.sent .video-section {
    background: #2b3036;
}

.messages .sent .message-data {
    color: #fff;
    float: right;
    order: 2;
    position: relative;
}

.sent .message-data:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -4px;
    left: auto;
    top: 0px;
    bottom: auto;
    border: 7px solid;
}

.sent:hover .chat-actions {
    opacity: 1;
    margin-right: 10px;
}

.sent .message-data:before {
    border-color: #2b3036 transparent transparent transparent;
}

.sent .reactions .reaction-btn .reaction-box {
    right: -25px;
}

.sent2 {
    position: relative;
    background: #2b3036;
    border-radius: .4em;
    line-height: 1;
    font-size: 13px;
    padding: 10px;
    line-height: 1.5;
    color: #acbdbd;
}

.sent2:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: #2b3036;
    border-top: 0;
    border-left: 0;
    margin-left: -10px;
    margin-top: -20px;
}

.chats .animate__animated {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

.messages .chats {
    padding: 10px;
}

.messages {
    position: relative;
    z-index: 1;
}

.messages:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.15;
    z-index: -1;
}

.sent .message-meta {
    position: absolute;
    right: 5px;
    bottom: -18px;
}

.message-time {
    color: rgba(10, 10, 10, 0.5);
    font-size: 10px;
}

.message-status {
    font-size: 9px;
    display:none;
}

.message-status.read {
    color: #547fff;
}

.message-html,
.chat-img,
.chat-txt,
.chat-gif,
.chat-sticker {
    display: block;
    overflow: hidden;
}

@media screen and (min-width: 735px) {
    .messages .message-data {
        max-width: 75%;
    }
}

.small-icon {
    display: inline-block;
    font-size: 0.9em; /* kleinere Größe für mobile Ansicht */
    margin-left: 5px;
    vertical-align: middle;
}

.small-icon i {
    color: inherit;
}

/* Fakecheck Icon in Grün */
#fake-check-icon {
    color: #00cc00;
}

/* Support-User Icon in Hellblau */
#support-user-icon {
    color: #1ab0ff;
}

/* Optional: Tooltip-Anzeige bei Hover */
.small-icon i[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
}

.back-button {
    position: relative;
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    display: none; /* Standardmäßig verstecken */
}

.badge {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: absolute;

    right: -15px;
}

/* Mobile Ansicht */
@media (max-width: 1023px) {
    
    
    
    .messenger__search {
    width: 100%;
    
}
    
    
    .contacts__txt {

    font-size: 1.2rem !important;
}
    
    
    
    .chat-scroll {
        -webkit-overflow-scrolling: touch; /* iOS-Fix für sanftes Scrollen */
    }
    .messages .message-data {
        max-width: 75%;
    }
    .back-button {
        display: flex; /* Nur in der mobilen Ansicht anzeigen */
    }
    .messenger__left {
        width: 100%;
        display: block;
    }
    .messages .message-data {
        max-width: 95%;
    }
    .messenger__right {
        display: none;
    }
    .messenger__right.show {
        display: flex;
    }
    .messenger__left.hide {
        display: none;
    }
    .messenger-modal .modal-content {
        flex-direction: column;
        height: 100%;
        border-radius: 0;
    }
    .messenger-modal .modal-dialog {
        margin: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        display: flex;
    flex-direction: column;
    }
    .modal-messenger {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    
    
    .messenger-tools__form {

    padding: 0 15px !important;

}

.messenger-tools__icons, .messenger-tools__controls {

    font-size: 0.75rem !important;
}
    
    
}

/* Desktop Ansicht */
@media (min-width: 1024px) {
    
    
    .centerBlock {
    min-height: 100%;

}
    
    .messenger__left {
        width: 30%; /* oder eine andere gewünschte Breite */
        border-right: 1px solid #ccc; /* optional für visuelle Trennung */
    }
    .messenger__right {
        width: 70%; /* oder eine andere gewünschte Breite */
        display: flex;
    }
    .messenger-modal .modal-content {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .modal-messenger {
        display: flex;
        height: auto;
    }
    .messenger-modal .modal-dialog {
        width: 1024px;
        height: auto;
    }
}

.messenger__header {
    position: relative;
    flex: none;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    height: 65px;
    padding: 0 10px;
}

/* General styles for the messenger tools */
.messenger-tools {
    position: relative;
    left: 2px;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 64px;
}

.messenger-tools__form {
    position: relative;
    z-index: 1;
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, .15);
    padding: 0 30px;
    background: #fff;
    z-index: 102;
}

.messenger-tools__field,
.messenger-tools__controls {
    display: flex;
    align-items: center;
    min-height: 64px;
    margin-right:5px;
}

.messenger-tools__field {
    flex: 1 1 360px;
    min-width: 0;
    padding: 15px 0;
}

.messenger-tools__controls {
    flex: none;
    margin-left: auto;
}

.messenger-tools__textarea {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-height: 110px;
}

.messenger-tools__input {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 18px;
    padding-right: 15px;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.3333;
    white-space: pre-wrap;
    border: none;
    word-wrap: break-word;
    font-smoothing: antialiased;
}

.messenger-tools__input:empty:before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin-right: -4px;
    cursor: text;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.3333;
    color: #bfbfbf;
}


.messenger-tools__input:focus ,messenger-tools__textarea:focus {
    
    outline: 0;
    
    
}
.messenger-tools__icons {
    display: flex;
}

.messenger-tools__icon {
    position: relative;
    cursor: pointer;
    color: #949494;
}

.messenger-tools__icon:hover {
    color: #7000e3;
}

.messenger-tools__icon + .messenger-tools__icon {
    margin-left: 12px;
}

.messenger-tools__icon.active {
    color: #7000e3;
}

.messenger-tools__disabled {
    position: relative;
    display: none;
    border-top: 1px solid rgba(0, 0, 0, .15);
    padding: 20px 30px;
    background: #fff;
    color: #b0b6bf;
    z-index: 102;
}



.messenger-tools__attach--loading {
    padding: 20px 0;
}

.messenger-tools__attach--stickers {
    height: 555px;
    max-height: 555px !important;
    text-align: right;
    background-color: transparent !important;
    border-top: 0 !important;
}

.messenger-tools__attach--photo .photo-list__photo-bar {
    background: #2d3238;
}

.loading.messenger-tools__attach--loading,
.stickers-show .messenger-tools__attach--stickers,
.photos-show .messenger-tools__attach--photo,
.gifts-show .messenger-tools__attach--gifts {
    transform: translateY(0);
}

.stickers-show.message-attach-animation-end .messenger-tools__attach--stickers,
.photos-show.message-attach-animation-end .messenger-tools__attach--photo,
.gifts-show.message-attach-animation-end .messenger-tools__attach--gifts {
    position: relative;
    bottom: 0;
}

.loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    margin: auto;
    width: 30px;
    height: 6px;
    font-size: 0;
    line-height: 0;
    transition: opacity .2s, visibility .2s;
}

.loader--grey::before, .loader--grey::after, .loader--grey > .loader_ {
    background: #949494;
}

.loader::before, .loader::after {
    content: '';
}

.loader::before, .loader::after, .loader_ {
    vertical-align: middle;
    display: inline-block;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    background: #6a6a6a;
}

.EmojiPanel {
    color: #777;
    margin-left: auto;
    margin-right: 30px;
}

.EmojiPanel__header,
.EmojiPanel__footer {
    background: #e8e8e8 !important;
    box-shadow: 3px 3px 10px grey;
    border: #a7a9b5 1px solid;
}

.EmojiPanel__results {
    box-shadow: 3px 3px 10px grey;
    border: #a7a9b5 1px solid;
}

.attatchIcon {
    margin-right: 10px;
    color: #949494;
    cursor: pointer;
}

.attatchIcon:active {
    color: #FF002B !important;
}


/* Sicherstellen, dass die Modal-Dialoge und ihre Inhalte die volle Höhe nutzen */
.messenger-modal .modal-dialog {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.messenger-modal .modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Stile für den Messenger */
.messenger__left,
.messenger__right {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.messenger__right {
    flex: 1;
    position: relative;
}

.messenger__right-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-scroll {
  flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    transition: height 0.3s ease; /* Sanfter Übergang */
   
}

.messages .chats {
    padding: 10px;
    overflow: hidden;
}

.messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.messages .cht {
    clear: both;
    float: left;
    width: 100%;
    font-size: 14.2px;
    display: flex;
    position: relative;
    margin-bottom: 25px;
    word-break: break-word;
}

/* Messenger-Tools fix am unteren Rand */
.messenger-tools {
    position: relative;
    bottom: 0;
    width: 100%;
    background: #fff; /* Hintergrundfarbe anpassen */

  
    z-index: 100;
}



.messenger-tools__icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.messenger-tools__textarea {
    display: flex;
    align-items: center;
}



.messenger-tools__controls {
    display: flex;
    justify-content: flex-end;

  
}

/* Mobile Ansicht */
@media (max-width: 1023px) {
    .chat-scroll {
        -webkit-overflow-scrolling: touch; /* iOS-Fix für sanftes Scrollen */
    }

    .messenger__left {
        width: 100%;
        display: block;
    }

    .messenger__right {
        display: none;
    }

    .messenger__right.show {
        display: flex;
    }

    .messenger__left.hide {
        display: none;
    }

    .messenger-modal .modal-content {
        flex-direction: column;
        height: 100%;
        border-radius: 0;
    }

   .messenger-modal .modal-dialog {
        margin: 0;
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .modal-messenger {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

/* Desktop Ansicht */
@media (min-width: 1024px) {
    .messenger__left {
        width: 30%; /* oder eine andere gewünschte Breite */
        border-right: 1px solid #ccc; /* optional für visuelle Trennung */
    }

    .messenger__right {
        width: 70%; /* oder eine andere gewünschte Breite */
        display: flex;
    }

    .messenger-modal .modal-content {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .modal-messenger {
        display: flex;
        height: auto;
    }

   .messenger-modal .modal-dialog {
        width: 1024px;
        height: auto;
    }
}

.modal-messenger .more {

    margin-right: 10px;
}

.modal-messenger .hidden {
    display: none !important;
}

.modal-messenger .disabled-message {
    padding: 10px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

 .contacts__item.current {
     background: #ff002b;
     color:#fff !important;
}
 .contacts__item.current span {
     color:#fff !important;
}
 .contacts__item.current:hover {
     background: #ff002b;
}

.modal-messenger .no-messages {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    color: #666; /* Farbe des Textes */
}

.modal-messenger .no-messages h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.modal-messenger .no-messages p {
    font-size: 1em;
    color: #999;
}

.fake-check-border {
    
    border-right-color:#00cc00 !important;
    
    
}


.support-border {
    
    border-right-color:rgb(26, 176, 255) !important;
    
    
}




.centerBlock {

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: table;
    height: 50%;
    width: 100%;
    text-align: center;
    table-layout: fixed;
	color:#CCCCCC;
}

.centerBlock__item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}


.type-message {
    width: 100%;
    z-index: 999;
    height: 54px;
    flex-shrink: 0;
    flex-grow: 0;
  
}

.is-typing {
    position: absolute;
    top: -22px;
    left: 0;

    display: none;
    padding: 2px 15px;

    font-size: 12px;
    border-top-right-radius: 5px;
        background: #ff002b;
    color: #fff !important;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.blink {
    animation: blink 1s infinite;
}

.wiggle {
    animation: wiggle 0.5s infinite;
}

@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.is-typing {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    display: none; /* Initial versteckt */
}

.slideInUp {
    animation-name: slideInUp;
}

.slideOutDown {
    animation-name: slideOutDown;
}





.messenger-tools__attach {
    position: absolute;
    z-index: 101;
    bottom: 64px;
    overflow-y: auto;
    border-top: #e1e1e1 1px solid;
    width: 100%;
    height:300px;
    max-height: 300px;
    min-height: 190px;
    background: #fff;
    transform: translateY(100%);
    transition: transform .3s linear;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}





.redb {
    
    border:#f00 1px solid;
    
}


.messenger-gallery__action-bar {
position: relative;
    display: flex;
    color:white;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(20% - 8px); /* 5 items per row, subtracting gap */
    height: auto;
    background: #FF002B;
   margin:3px;
   border:#99002b 1px solid;
    min-height: 128px;
   z-index:3;
}


.messenger-gallery__action-bar input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}


.messenger-gallery__name{
    
    position:absolute;
    bottom:0px;
    background-color:#333;
    opacity:0.75;
    color:white;
    width:100%;
    font-size:0.75rem;
    text-align: center;
    
    
}


.messenger-gallery__action-title {
    position: relative;
    display: block;
    color: rgb(255, 255, 255);
    padding: 10px 5px 0px;
}

.messenger-gallery__slide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.messenger-gallery__item {
    position: relative;
    vertical-align: top;
    display: inline-block;
    width: calc(20% - 8px); /* 5 items per row, subtracting gap */
    height: auto;
    cursor: pointer;
    overflow: hidden;
    margin:3px;
    border:#777777 1px solid;
}

@media (max-width: 600px) {
    .messenger-gallery__item, .messenger-gallery__action-bar {
        width: calc(50% - 8px); /* 2 items per row in mobile view */
    }
    
        .messenger-gallery__name{


        font-size:0.9rem;



    }

}







.messenger-gallery__action {
    position: absolute;
    top: 0px;
    display: none;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.classic-upload-btn input {
    position: absolute;
    top: 0px;
    left: -300px;
    opacity: 0;
}

.messenger-gallery__item:hover > .messenger-gallery__action {
  display: -webkit-flex;
  display: flex; }

 .messenger-gallery__action-bar--application {

  background-color: red;
      position: relative;
  
    display: inline-block;
    width: calc(20% - 8px); /* 5 items per row, subtracting gap */
    height: auto;
    cursor: pointer;
    overflow: hidden;
 
 
 }

 
 .modal-messenger__giphy-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.modal-messenger__giphy-search {
    margin-bottom: 10px;
}

.modal-messenger__giphy-search input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-size: 16px;
}

.modal-messenger__giphy-response {
    flex-grow: 1;
    height: 240px;
    overflow-y: auto;
    border-top: 1px solid #e1e1e1;
    padding-top: 10px;
}


.modal-messenger__giphy-response {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.giphy-result {
    flex: 1 1 128px;
    max-width: 128px;
    height: 128px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 1px solid #ddd;
}

.giphy-result img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild vollständig gefüllt ist und das Seitenverhältnis beibehalten wird */
}
/* Media Query für Tablets */
@media (max-width: 768px) {
    
     .chat-gif img {
        width: 100px !important;
        height: 75px !important;
    }
    
    
    .giphy-result {
        flex: 1 1 100px;
        max-width: 100px;
        height: 100px;
    }
}

/* Media Query für Smartphones */
@media (max-width: 480px) {
    
         .chat-gif img {
        width: 220px !important;
        height: 150px !important;
    }
    
    
    .giphy-result {
        flex: 1 1 120px;
        max-width: 120px;
        height: 120px;
    }
}


.chat-gif {
    padding: 5px !important;
}


.chat-gif img {
    border-radius: 5px;
}

.sent div.chat-gif img {
    object-fit: cover;
    object-position: center;
}

.chat-img-duo, .chat-img-grp, .chat-img-sgl, .chat-gif {
    padding: 5px !important;;
    border-radius: 5px;
}

.chat-audio {
	padding: 3px !important;
	position: relative;
	width: auto;
	margin-top:13px;
	height: 40px;
	display: flex;
	align-items: center;
}


.audio-icon {
	

	margin: 10px;

	border-radius: 5px;
	font-size: 18px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
}


.sent .chat-audio{
	background: #2b3036;
	color: #ffffff;
}

.sent .audio-icon{
	background: #566574;
	color: #ffffff;
}


/* Styling für den Audio-Player */
audio {
    width: 250px;
    height: 50px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 0; /* Ecken nicht abgerundet */
    appearance: none;
    outline: none;
    
    box-shadow: none;
}

/* Entfernen der Standard-Player-Styles und Hinzufügen eigener Styles */
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button {
    background-color: #f1f1f1;
    border-radius: 0; /* Ecken nicht abgerundet */
    color: #333;
}

/* Für Firefox */
audio::-moz-range-track,
audio::-moz-range-progress {
    background-color: #f1f1f1;
    border-radius: 0; /* Ecken nicht abgerundet */
}

/* Für Microsoft Edge */
audio::-ms-track {
    background-color: #f1f1f1;
    border-radius: 0; /* Ecken nicht abgerundet */
}

/* Zusätzliche Stile, um den Player zu verbessern */
audio::-webkit-media-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0; /* Ecken nicht abgerundet */
}

.video-section {
    display: inline-block;
    padding: 5px !important;
    position: relative;
    border-radius: 5px;
    transition: 0.3s;
}


.video-link {
    color: #fff;
    transition: 0.5s;
}

.messenger-modal .video-thumb {
    object-fit: cover;
    object-position: center;
    width: 255px;
    height: 155px;
    border-radius: 5px;
}

.video-section .video-link:before {
    top: 30%;
}

.more-dropdown .divider {
    border-bottom: 1px solid #ccc;
    margin: 5px 0;
}



#uploadProgress {
    
    display:none; 
    position:absolute; 
    width:100%; 
    top:-5px;
    z-index:103; 
    background-color:#0b0; 
    color:#fff; 
    text-align:center; 
    font-size:8px; 
    margin:0;
    
}

.enter-check {
   

    font-size: 12px;
    color: #515365;

    font-weight: 700;
}

#enter-send-checkbox, #sounds-checkbox {
    display:block;
    left: -45px;
    

}

.messages .replies .message-data small {
    display: block;
    font-weight: bold;
    color: #FF002B;
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 10px;
    margin-bottom:-5px;
    border-top-right-radius: 5px;
}

.replies .message-data:after {
    border-color: #f3f3f3 transparent transparent transparent !important;
}





.replies .message-data:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -4px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 7px solid;
}



.messenger-blocker__profile {

    padding:20px;
    
}

.chat-messager8 {
    
    text-align:right;
    position:absolute;
    bottom:-10px;
    right:30px;
    
}

.chat-messager8 img {
    
    width:200px;
    
}




/* ============================================================
   HornyHearts — Dark-Theme-Override fuer den Messenger
   ============================================================ */
.messenger-modal .modal-content, .messenger-content { background:#141416 !important; color:#ededee !important; }
.messenger__left { background:#101012 !important; border-right:1px solid rgba(255,255,255,.07) !important; }
.messenger__right, .messenger__right-inner, .messages, .chat-scroll { background:#141416 !important; }
.messenger__header { border-bottom:1px solid rgba(255,255,255,.07) !important; }
.messenger__header, .messenger__header *, .connection-header__name, .connection-header__status { color:#ededee !important; }
.tabs--messenger .tabs__item { color:rgba(255,255,255,.55) !important; }
.tabs--messenger .tabs__item.active { color:#fff !important; }
/* Suche / Inputs */
.text-field__input, .search-field--messenger .text-field__input { background:#1a1a1d !important; color:#fff !important; border-color:rgba(255,255,255,.10) !important; }
.text-field__input::placeholder { color:rgba(255,255,255,.4) !important; }
/* Kontaktliste */
.contacts__item { border-bottom:1px solid rgba(255,255,255,.06) !important; color:rgba(255,255,255,.72) !important; }
.contacts__item:hover { background:rgba(255,255,255,.04) !important; }
.contacts__item.current, .contacts__item.current:hover { background:#e0163a !important; color:#fff !important; }
.chatlist__title { color:rgba(255,255,255,.5) !important; }
/* Empfangene Bubbles -> dunkel */
.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section { background:#23232a !important; }
.messages .replies .message-data { color:#ededee !important; }
.replies .message-data:after { border-color:#23232a transparent transparent transparent !important; }
/* Gesendete Bubbles -> Markenrot */
.sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .sent .chat-code, .chat-fwd, .sent .link-meta, .sent .file-section, .sent .video-section, .sent2, .sent .chat-audio { background:#e0163a !important; color:#fff !important; }
.sent .message-data:before, .sent2:after { border-color:#e0163a transparent transparent transparent !important; }
.messages .sent .message-data { color:#fff !important; }
/* Eingabe-Leiste / Anhang */
.messenger-tools, .messenger-tools__form, .messenger-tools__disabled, .messenger-tools__attach { background:#141416 !important; border-top-color:rgba(255,255,255,.07) !important; }
.messenger-tools__input, .messenger-tools__textarea, .type-message, [contenteditable] { color:#fff !important; }
.messenger-tools__input:empty:before { color:rgba(255,255,255,.4) !important; }
/* Leerzustand / Hinweise */
.centerBlock { color:rgba(255,255,255,.7) !important; }
.centerBlock h3 { color:#fff !important; }
.modal-messenger .no-messages, .modal-messenger .no-messages p, .modal-messenger .disabled-message { color:rgba(255,255,255,.6) !important; }
.modal-messenger .no-messages h3 { color:#fff !important; }
.brick--white, .brick--stroke { background:#23232a !important; }
.more-dropdown .divider { border-bottom-color:rgba(255,255,255,.1) !important; }

/* ============================================================
   HornyHearts — Voll-Glas (Glasmorphismus), dunkel  [hh-glass v1]
   Liegt NACH dem Dark-Override -> gewinnt. Rein additiv/reversibel.
   ============================================================ */
:root{
  --hh-rot:#e0163a;
  --hh-glas:rgba(20,20,24,.86);
  --hh-glas-rand:rgba(255,255,255,.12);
  --hh-blur:saturate(150%) blur(22px);
}
/* etwas mehr Tiefe hinter dem Panel (Glas braucht Durchblick) */
.modal-backdrop.in, .modal-backdrop.show, .modal-backdrop.modal-stack{ background:#05050a !important; opacity:.6 !important; -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; }

/* Panel + Spalten = Glas */
.messenger-modal .modal-content, .messenger-content{
  background:var(--hh-glas) !important;
  -webkit-backdrop-filter:var(--hh-blur); backdrop-filter:var(--hh-blur);
  border:1px solid var(--hh-glas-rand) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.55) !important;
}
.messenger__left{ background:rgba(14,14,18,.80) !important; border-right:1px solid var(--hh-glas-rand) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.messenger__right, .messenger__right-inner, .messages, .chat-scroll{ background:transparent !important; }
.messenger__header{ background:rgba(255,255,255,.04) !important; border-bottom:1px solid var(--hh-glas-rand) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Suche / Inputs = Glas-Pill */
.text-field__input, .search-field--messenger .text-field__input{
  background:rgba(255,255,255,.06) !important; color:#fff !important;
  border:1px solid var(--hh-glas-rand) !important; border-radius:22px !important;
}

/* Kontaktliste = transparent + dezente Tints, aktiver Eintrag rotes Glas */
.contacts__item{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,.05) !important; }
.contacts__item:hover{ background:rgba(255,255,255,.06) !important; }
.contacts__item.current, .contacts__item.current:hover{ background:rgba(224,22,58,.20) !important; box-shadow:inset 3px 0 0 var(--hh-rot) !important; color:#fff !important; }

/* Empfangene Bubbles = helles Glas */
.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .message-data small, .replies .chat-fwd, .replies .link-meta, .replies .file-section, .replies .video-section,
.message__bubble, .message__img-container{
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
}
/* Gesendete Bubbles = rotes Glas */
.sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .sent .chat-code, .sent .chat-fwd, .sent .link-meta, .sent .file-section, .sent .video-section, .sent2, .sent .chat-audio{
  background:rgba(224,22,58,.62) !important; color:#fff !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,90,120,.45) !important;
  border-radius:16px !important;
}
/* opake Dreieck-Spitzen entfernen (passen nicht zu transparentem Glas) */
.replies .message-data:after, .sent .message-data:before, .sent2:after{ display:none !important; border-color:transparent !important; }

/* Eingabe-Leiste = Glas, Eingabefeld als Pill */
.messenger-tools, .messenger-tools__form, .messenger-tools__disabled, .messenger-tools__attach{
  background:rgba(14,14,18,.82) !important;
  -webkit-backdrop-filter:var(--hh-blur); backdrop-filter:var(--hh-blur);
  border-top:1px solid var(--hh-glas-rand) !important;
}
.messenger-tools__field{ background:rgba(255,255,255,.06) !important; border:1px solid var(--hh-glas-rand) !important; border-radius:22px !important; }

/* schwache Geraete / reduzierte Transparenz -> opak als Fallback */
@media (prefers-reduced-transparency: reduce){
  .messenger-modal .modal-content, .messenger-content{ background:#141416 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .messenger__left{ background:#101012 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .replies .chat-txt, .replies .chat-gif, .replies .file-section, .replies .video-section{ background:#23232a !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .sent .chat-txt, .sent .chat-gif, .sent .file-section, .sent .video-section, .sent .chat-audio{ background:#e0163a !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .messenger-tools, .messenger-tools__form, .messenger-tools__attach{ background:#141416 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ============================================================
   HornyHearts — Chat-Tools Welle 1 (Reaktionen, Bearbeitet, Pin, Suche)
   ============================================================ */
.current-chat-reactions{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.hh-react-chip{ display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12px; cursor:pointer; line-height:1.7; }
.hh-react-chip.mine{ background:rgba(224,22,58,.32); border-color:rgba(255,90,120,.5); }
.hh-react-chip i{ font-style:normal; opacity:.85; font-size:11px; }
.hh-react-picker{ position:fixed; display:flex; gap:6px; padding:6px 9px; border-radius:14px; background:rgba(20,20,24,.92); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:99999; }
.hh-react-picker span{ font-size:20px; cursor:pointer; transition:transform .1s ease; }
.hh-react-picker span:hover{ transform:scale(1.3); }
.hh-edited{ font-size:11px; color:rgba(255,255,255,.45); margin-right:4px; }
.cht.hh-pinned .message-data{ position:relative; box-shadow:inset 0 0 0 1px rgba(255,200,60,.55) !important; }
.hh-edit-input{ width:100%; min-width:180px; background:rgba(0,0,0,.30); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:6px 9px; font:inherit; resize:vertical; }
.cht.hh-hidden{ display:none !important; }
.cht.hh-hit .message-data{ box-shadow:inset 0 0 0 1px rgba(224,22,58,.6) !important; }
.hh-chat-search{ display:flex; align-items:center; gap:8px; padding:6px 12px; }
.hh-chat-search i{ color:rgba(255,255,255,.4); }
.hh-chat-search input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; color:#fff; padding:6px 12px; outline:none; }
.chat-txt.deleted{ opacity:.65; font-style:italic; }

/* ============================================================
   HornyHearts — Glas-Feinschliff (premium, kein Glow/Neon)  [hh-polish]
   ============================================================ */
@keyframes hhFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.chat-scroll{ padding:4px 16px 12px !important; }
.chats .cht{ margin:11px 0 !important; animation:hhFadeIn .18s ease both; }

/* Bubble-Breite begrenzen + weiche asymmetrische Ecken + sanfte Tiefe */
.message-html .chat-txt, .message-html .chat-code{ max-width:460px; padding:9px 13px !important; line-height:1.45; font-size:14.5px; word-break:break-word; }
.replies .chat-txt, .replies .chat-code{ border-radius:17px 17px 17px 6px !important; box-shadow:0 3px 12px rgba(0,0,0,.24) !important; }
.sent .chat-txt, .sent .chat-code{ border-radius:17px 17px 6px 17px !important; box-shadow:0 3px 14px rgba(224,22,58,.16) !important; }

/* Reaktions-Chips dezent an den Bubble-Fuss */
.current-chat-reactions{ margin-top:-7px; }
.cht.sent .current-chat-reactions{ justify-content:flex-end; }

/* Datums-Trenner als zentrierte Glas-Pille statt Linie */
.new-date{ text-align:center; margin:16px 0 10px; border:0 !important; background:none !important; }
.new-date p{ display:inline-block !important; width:auto !important; max-width:none !important; margin:0 auto; padding:3px 14px; font-size:11.5px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:20px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Senden = runder Akzent-Button */
.messenger-tools__controls a{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#e0163a; transition:transform .12s ease, background .12s ease; }
.messenger-tools__controls a:hover{ background:#ff1f48; transform:scale(1.06); }
.messenger-tools__controls a i{ color:#fff !important; font-size:1.15em !important; }

/* Composer-Icons gedaempft */
.messenger-tools__icons .attatchIcon{ opacity:.7; transition:opacity .12s; }
.messenger-tools__icons .attatchIcon:hover{ opacity:1; }

/* Kontaktliste: mehr Luft + runde Hover/aktiv */
.contacts__item{ border-radius:12px; margin:2px 6px; padding:8px 10px !important; }

/* Duenne, dezente Scrollleiste */
.chat-scroll::-webkit-scrollbar{ width:8px; }
.chat-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
.chat-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
.chat-scroll::-webkit-scrollbar-track{ background:transparent; }

/* Pin-Indikator: runder Rahmen am Bubble + kleines Pin-Icon (kein eckiger Kasten) */
.cht.hh-pinned .message-data{ box-shadow:none !important; }
.cht.hh-pinned .message-html .chat-txt,
.cht.hh-pinned .message-html .chat-code,
.cht.hh-pinned .message-html .chat-gif,
.cht.hh-pinned .message-html .file-section,
.cht.hh-pinned .message-html .video-section{ box-shadow:0 0 0 1px rgba(255,200,60,.5), 0 3px 12px rgba(0,0,0,.24) !important; }
.cht.hh-pinned .message-html{ position:relative; overflow:visible; }
.cht.hh-pinned .message-html .chat-txt{ position:relative; overflow:visible; }
.cht.hh-pinned .message-html .chat-txt::after{ content:"\1F4CC"; position:absolute; top:-9px; right:-4px; font-size:12px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); }

/* Reaktions-Chip sauber UNTER der Bubble (nicht ueberlappend/abgeschnitten) */
.current-chat-reactions{ margin-top:3px !important; }
.message-data{ overflow:visible !important; }

/* 3-Punkte (Aktions-Menue) dauerhaft sichtbar — iboys.css setzt .chat-actions opacity:0 (nur :hover),
   das gibt es auf Touch nicht. '.messages'-Scope (NICHT .messenger__right, das ist mobil display:none). */
.messages .chat-actions{ opacity:1 !important; align-self:center !important; }
.messages .chat-actions .dropdown-toggle{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; border:0; cursor:pointer; }
.messages .chat-actions .fa-ellipsis-v, .messages .chat-actions .fas.fa-ellipsis-v, .msgr-white{ color:rgba(255,255,255,.85) !important; }
.messages .chat-actions .dropdown-toggle:hover{ background:rgba(255,255,255,.10); }
.messages .chat-actions .fas.fa-ellipsis-v:hover{ color:#fff !important; }
.messages .chat-actions .dropdown-menu{ background:rgba(20,20,24,.96) !important; border:1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.messages .chat-actions .dropdown-item{ color:#ededee !important; }
.messages .chat-actions .dropdown-item:hover{ background:rgba(224,22,58,.30) !important; color:#fff !important; }
/* Such-Leiste sichtbar/erreichbar machen (JS-Filter war korrekt, nur Sichtbarkeit fehlte) */
.hh-chat-search{ flex:0 0 auto; position:relative; z-index:5; background:rgba(20,20,24,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.hh-chat-search input::placeholder{ color:rgba(255,255,255,.4); }