/* NEW CONTACT BUTTON */
a.im-contact2 {transition: 0.2s; position: relative; width: auto; display: inline-flex; text-decoration:none; background:var(--mb-color-primary, #0d9ecc); color: #fff; border-radius: 4px;padding: 9px 10px; line-height:1.4; font-size: 15px;border:none; font-weight: bold;text-align:center;flex-direction: column; align-items: center; align-content: center;}
a.im-contact2:hover {background:var(--mb-color-primary-hover, #056786); color: #fff;text-decoration:none!important;}
a.im-contact2.im-disabled {opacity:0.75;cursor:help;}
a.im-contact2.im-disabled:hover {background:var(--mb-color-primary, #0d9ecc);}
a.im-contact2.im-hooked {margin:6px 0 20px 0;}
#sidebar a.im-contact2.im-hooked, #item-side a.im-contact2.im-hooked, .side a.im-contact2.im-hooked, #side-right a.im-contact2.im-hooked {width:100%;}
a.im-contact2 > span {margin:2px 0;display:flex;align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: center;gap: 6px;}
a.im-contact2 > span > svg {width:20px;height:20px;}

/* STYLE V2 */
.im-table-row .im-del-mes-box {position:absolute;width:32px;height:28px;right:-32px;left:auto;top:0px;margin:0;padding:0 0 0 4px;}
.im-table-row.im-from .im-del-mes-box {left:-32px;right:auto;padding:0 4px 0 0;}
.im-table-row .im-del-mes-box > a {width:28px;height:28px;padding:0;text-align:center;font-size:16px;color:#888;border-radius:5px;transition:0.1s;display:none;}
.im-table-row .im-del-mes-box > a i {line-height:28px;}
.im-table-row .im-del-mes-box > a:hover {background:rgba(0,0,0,0.1);}
.im-table-row:hover .im-del-mes-box > a {display:block;}
.im-limits-info {display:inline-block;width:100%;margin:0 0 16px 0;padding:10px;border:1px solid #ccc;border-radius:5px;border-left:4px solid #2196F3;background:#fff;}

/* PAGINATION */
.im-pagination {float:left;clear:both;width:100%;background:transparent;padding:15px 0;margin:15px 0 0 0;border-top:none;position:relative;z-index:2;text-align:center;}
.im-pagination a {text-decoration:none;display:inline-block;float:none;margin:0 2px;text-decoration:none;background:#fff;padding:6px 3px;min-width:32px;height:32px;line-height:18px;color:#444;font-weight:normal;border-radius:4px;border:1px solid rgba(0,0,0,0.15);font-size:14px;text-align:center;}
.im-pagination span {display:inline-block;text-decoration:none;float:none;margin:0 4px;padding:6px 3px;height:32px;line-height:18px;color:#999;font-weight:normal;font-size:14px;text-align:center;}
.im-pagination a:hover, .im-pagination a.im-active, .im-pagination a.im-page-active {background:#333;color:#fff;text-decoration:none;}


.im-html {float:left;clear:both;width:100%;}
body .im-threads .im-table-row.im-unread:before {display:none;}
body .im-threads .im-table-row.im-unread {border-left: 3px solid #4182c3; background: #f0f5fb;padding-left:10px;}
body .im-threads-exist a .im-title, body .im-threads-exist a .im-from-to strong {font-weight:600;}
body .im-threads-exist a .im-pms, body .im-threads-exist a .im-time {font-style:normal;font-size:14px;}
body .im-threads-exist a .im-title, body .im-threads-exist a .im-from-to, body .im-threads-exist a .im-from-to strong {font-size:14px;}
body .im-threads-exist a {border-radius:0px;padding:13px 15px;border:none;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.1);margin:0 0 5px 0;}
body .im-file-create-thread h2.im-head {display: block; text-align: left; width: 70%; float: left; margin: 5px 3% 20px 0; font-weight: 600; font-size: 28px; line-height: 32px; color: #111;}
body form#im-create-thread-form {float:left;clear:none;border:1px solid #ccc;box-shadow:0 1px 5px rgba(0,0,0,0.15);display:block;border-radius:6px;padding:20px 25px 30px 25px;margin:0 0 20px;background:#fff;width:100%;}
body .im-file-create-thread .im-error-list.error-list {float:left;clear:left;width:70%;margin:0 3% 0 0;}
body .im-file-create-thread .im-label {margin:0 0 2px 0;font-size:14px;}
body #im-create-thread-form .im-input {max-width:320px;margin-bottom:8px;padding: 10px 8px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); box-shadow: none; line-height: 18px;height:38px;}
body #im-create-thread-form  #im-message  {padding: 10px 8px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); box-shadow: none; line-height: 18px;overflow-y:auto;}
body #im-create-thread-form .im-textarea {height:120px;}
body #im-create-thread-form button.im-button-green {height:38px;padding:9px 16px;border:none!important;line-height:22px;font-size:14px;font-weight:bold;border-radius:5px;}
body #im-create-thread-form .im-attachment {margin:0 0 0 10px;}
body #im-create-thread-form .im-attachment .im-att-box .im-wrap {height:38px;padding:11px 14px;}
body .im-file-create-thread h3.im-head {margin:10px 0 5px 0;font-size:14px;font-weight:600;}
body .im-messages .im-message-extra.im-box-gray .im-col-10 {width:100%;}
body .im-messages .im-message-extra.im-box-gray {position:relative;padding:10px 44px 10px 0!important;margin:0;border:none;background:transparent;text-align:left;}
body .im-messages .im-message-extra a.im-download {float:left;width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:14px;}
body .im-messages .im-message-extra a.im-download .im-att-icon {display:none;}
body .im-messages .im-message-extra a.im-download > i {display:inline-block!important;margin-right:6px;float:left;line-height:14px;}
body .im-messages .im-message-extra a.im-hide > span {display:none!important;}
body .im-messages .im-message-extra a.im-hide > i {display:block!important;}
body .im-messages .im-message-extra a.im-hide {transition:0.1s;position:absolute;width:32px;height:32px;padding:6px;text-align:center;font-size:14px;color:#666;border-radius:4px;top:1px;right:0;}
body .im-messages .im-message-extra a.im-hide i {line-height:20px;}
body .im-messages .im-message-extra a.im-hide:hover {background:#f0f0f0;}
body .im-messages .im-message-extra .im-col-14.im-align-right {position:initial;}

body .im-table-row > div.no-img {padding-left:56px;}
body .im-threads .im-profile-img {width:40px;height:40px;margin-top:1px;border-radius:100px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,0.2);padding:0;border:0;background:#f0f0f0;}
body .im-block .im-table-row {background:#fff;padding:1px 0;margin:0;border-radius:0px;box-shadow:none;overflow:hidden;border:none;border-bottom:1px solid #ddd;}
body .im-block .im-table-row .im-col-22 {padding-left:3px;}
body .im-block .im-table-head + .im-table-row {border-top:1px solid #ddd;font-size:14px;}
body .im-block .im-table-row .im-align-left {font-size:14px;font-weight:600;}
body .im-table-head {border-bottom:none;font-weight:bold;}
body .im-block .im-remove-block {padding:8px;height:32px;width:32px;line-height:16px;text-align:center;border-radius:4px;font-size:14px;margin:-8px 0;transition:0.1s;display:inline-block;color:#666;}
body .im-block .im-remove-block i {line-height:16px;}
body .im-block .im-remove-block:hover {background:#e0e0e0;}
body .im-block .im-table-head {padding:0;white-space:nowrap;}
body .im-threads .im-line {float:left;clear:both;}
body .im-threads .im-title a {float:left;}
body .im-threads .im-title.im-recipient a {float:none;color:#000;text-decoration:underline;display:inline;font-size:13px;}
body .im-threads .im-title.im-recipient a:hover {color:#000;text-decoration:none;}
body .im-threads .im-table-head {font-weight:bold;color:#555;font-size:13px;border:none;padding:0;white-space:nowrap;}
body .im-threads .im-table-head > div, body .im-block .im-table-head > div {padding-left:3px;padding-right:3px;}
body .im-block .im-table-head {font-weight:bold;color:#555;font-size:13px;border:none;padding:0;white-space:nowrap;}
body .im-threads .im-title a.im-block-thread {padding:2px;line-height:16px;}
body .im-threads .im-table-row {margin:0 0 10px 0;border-radius:0px;border:none;overflow:hidden;padding:0 0 10px 0;background:#fff;border-bottom:1px solid #ddd;}
body .im-threads .im-table-head + .im-table-row {padding-top:10px;border-top:1px solid #ddd;}
body .im-block .im-table-head strong {line-height: 18px;}
body .im-threads .im-special i {font-size:16px;}
body .im-threads .im-special a {transition:0.1s;display:inline-block;width:34px;height:34px;text-align:center;padding:8px 5px;border-radius:4px;margin:-8px 0;}
body .im-threads .im-special a:hover {background:#e0e0e0;color:#666;}
body .im-threads .im-special a:hover i {color:#666;}
body .im-threads .im-title a {font-weight:600;font-size:14px;}
body .im-threads .im-time {font-style:normal;}
body .im-vertical {display:none;}
body .im-messages .im-message-content .im-align-left {font-size:14px;}
body .im-table-row .im-horizontal {top:0;right:auto;left:-52px;width:40px;height:40px;margin:0;}
body .im-table-row .im-horizontal .right {width:40px;height:40px;padding:0;border:none;border-radius:100px;background:#f6f6f6;box-shadow:0 2px 8px rgba(0,0,0,0.25);}
body .im-table-row .im-horizontal .right img {opacity:1;border-radius:100px;width:40px;height:40px;object-fit:cover;}
body .im-table-row.im-from .im-horizontal {right:-52px;left:auto;padding:0;}
body .im-table-row.im-from .im-horizontal .right {left:auto;border-radius:100px;border:none;}
body .im-table-row.im-from .im-horizontal .right img {opacity:1;border-radius:100px;}
body .im-messages .im-table-row {min-width:100px;max-width:85%;background:#f0f0f0!important;border:none;border-radius:10px;margin:0 0 35px 52px;width:auto;box-shadow:0 1px 3px rgba(0,0,0,0.1);padding:12px 18px 2px 18px;}
body .im-messages .im-table-row.im-to {background:#e8e8e8!important;border:none;border-radius:10px 10px 10px 0;box-shadow:none;}
body .im-messages .im-table-row.im-from {margin-left:0;margin-right:52px;background:var(--mb-color-primary, linear-gradient(7deg, #0d9ecc, #0ca8d9))!important;color:#fff;border:none;border-radius:10px;border-top-right-radius:0;box-shadow:0 1px 3px rgba(0,0,0,0.15);}
body .im-messages .im-table-row.im-from .im-message-content, body .im-messages .im-table-row.im-from .im-message-content a {color:#fff;}
body .im-messages .im-date {font-style:normal;font-size:10px;line-height:14px;color:#aaa;position: absolute; top: calc(100% + 5px); right: 2px;width:auto;}
body .im-messages .im-date > span {font-size:10px;}
body .im-messages .im-date:before {display:none;}
body .im-messages .im-date > i.fa-check {margin-left:2px;display:inline-block;line-height:14px;font-size:11px;color:var(--mb-color-primary, #0d9ecc);}
body .im-table-row > div.im-line {padding:0;margin:0 0 10px 0;}
body .im-table-row > div.im-line.im-box-empty {display:none;}
body .im-table-row > div.im-line.im-name-top {margin:0;padding:0;display:initial;}
body .im-table-row > div.im-line.im-name-top .im-name {display:none;}
body .im-file-messages > h2.im-head {display:none;}
body .im-alt-head {display:block!important;float:left;clear:both;width:100%;padding:0;margin:0 0 30px 0;}
body .im-alt-head .im-head2 {width: 100%;float:left;margin:0;font-weight: 600;font-size: 26px; line-height: 28px; color: #111;position:relative;padding-right:110px;}
body .im-alt-head .im-head2 > span {display:inline-block;width:100%;}
body .im-alt-head .im-head2 > em {margin:4px 0 0 0;display:inline-block;width:100%;font-size:15px;line-height:18px;color:#888;font-weight:normal;}
a.im-remove-thread {position:absolute;right:0;top:0;font-size:14px;padding:6px 8px;text-decoration:none;line-height:18px;font-weight:bold;color:#444;background:#e0e0e0;border-radius:4px;transition:0.1s;max-height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
a.im-remove-thread i {margin-right:4px;display:inline-block;}
a.im-remove-thread:hover {background:#d0d0d0;color:#333;text-decoration:none;}
body .im-alt-head .im-subhead2 {width: 100%;float:left; clear:both;font-size:15px;color:#999;line-height:16px;margin:5px 0 0 0;}
.im-table.im-messages {float:left;width:100%;margin:0;clear:both;}
.im-table.im-messages.im-errors {padding:0;}
.im-table .im-err {margin:8px 0 0 0;float:left;clear:both;width:100%;padding:10px 12px;font-size:14px;line-height:18px;border:1px solid rgba(0,0,0,0.1);background: #ffd7d7; color: #590000;}
.im-empty.flashmessage {float:left;clear:both;width:100%;margin:0 0 16px 0;}
body .im-file-messages #im-error-list {float:left;width:100%;margin:0;clear:both;}
body .im-row.im-item-related {display:none;}
body #im-message-form {padding:0;background:transparent;border:none;position:relative;width:100%;margin:20px 0;clear:both;}
body .im-row.im-item-context {display:flex;width:100%;margin:0 0 16px 0;padding:10px;border:1px solid #ccc;border-radius:5px;border-left:4px solid #2196F3;background:#fff;box-sizing:border-box;align-items:center;flex-wrap:nowrap;}
body .im-row.im-item-context .im-item-resource {float:none;width:auto;max-width:none;flex:0 0 auto;padding:0 14px 0 0;margin:0;}
body .im-row.im-item-context .im-item-resource a {display:block;line-height:0;}
body .im-row.im-item-context .im-item-resource img {display:block;width:64px;height:64px;max-width:64px;max-height:64px;object-fit:cover;border-radius:4px;border:1px solid rgba(0,0,0,0.08);background:#fff;}
body .im-row.im-item-context > .im-col-21 {float:none;width:auto;flex:1 1 auto;min-width:0;padding:0;margin:0;}
body .im-row.im-item-context .im-line {float:none;clear:none;width:100%;margin:0 0 4px 0;padding:0;}
body .im-row.im-item-context .im-line:last-child {margin-bottom:0;}
body .im-row.im-item-context .im-item-label {font-size:11px;line-height:14px;font-weight:normal;text-transform:uppercase;letter-spacing:0.3px;color:#888;margin:0 0 6px 0;}
body .im-row.im-item-context .im-item-title {font-size:15px;line-height:20px;font-weight:600;margin:0 0 4px 0;}
body .im-row.im-item-context .im-item-title a {color:#333;font-weight:600;text-decoration:none;}
body .im-row.im-item-context .im-item-title a:hover {color:var(--mb-color-primary, #0d9ecc);text-decoration:underline;}
body .im-row.im-item-context .im-item-price {font-size:14px;line-height:18px;font-weight:normal;color:#111;margin:0;}
body .im-row.im-item-context .im-item-location {display:none;}
body .im-row.im-target-bar {float:left;width:100%;margin:0 0 12px 0;padding:12px;background:#f8f8f8;border-radius:6px;box-sizing:border-box;}
body .im-row.im-target-bar .im-target-img {width:64px;}
body .im-row.im-target-bar .im-target-img img {max-width:64px;max-height:64px;border-radius:4px;}
body .im-row.im-target-bar .im-target-info {width:calc(100% - 64px);padding:0 12px;}
body .im-row.im-target-bar .im-line {font-size:13px;color:#666;margin:0 0 4px 0;}
body .im-row.im-target-bar .im-target-name {font-size:15px;font-weight:bold;color:#333;}
body #im-message {padding:15px 115px 15px 50px;overflow-y:hidden;font-size:14px;line-height:18px;color:#1c1e21;background:#fff;border:1px solid #e2e5e9;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,0.04);max-height:455px;height:50px;min-height:50px;width:100%;max-width:100%;min-width:100%;resize:none;transition:border-color 0.15s ease, box-shadow 0.15s ease;}
body #im-message:focus {outline:none;border-color:rgba(13,158,204,0.5);box-shadow:0 0 0 3px rgba(13,158,204,0.14), 0 1px 2px rgba(0,0,0,0.05);}
body #im-message::placeholder {color:#8a8d91;opacity:1;}
body #im-message-form img.im-logged-user-img {position:absolute;top:7px;left:8px;width:34px;height:34px;object-fit:cover;border-radius:100px;box-shadow:0 1px 2px rgba(0,0,0,0.12);z-index:3;}
body #im-message-form button:not(.im-button-alt) {display:none;}
body #im-message-form button.im-button-alt {display:block!important;position:absolute;right:7px;top:7px;height:36px;line-height:18px;border:none!important;border-radius:10px;padding:9px 5px;width:44px;text-align:center;font-size:15px;font-weight:bold;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
body #im-message-form button.im-button-alt i {text-align:center;line-height:16px;font-size:16px;}
body #im-message-form button.im-button-alt i:before {font-weight:900;}
body #im-message-form button.im-button-alt.btn-disabled, body #im-message-form button.im-button-alt:disabled {opacity:0.5;cursor:wait;}
body #im-message-form button.im-button-alt.im-btn-loading, body #im-message-form button.im-button-alt.im-btn-loading:disabled {opacity:0.65;cursor:wait;}
body #im-message-form button.im-button-alt.im-btn-loading i.fa {display:inline-block;line-height:16px;}
.im-html button.im-btn-loading, .im-html input.im-btn-loading {opacity:0.65;cursor:wait;}
.im-html button.im-btn-loading[disabled], .im-html button.im-btn-loading:disabled {opacity:0.65;}
.im-html button.im-btn-loading i.fa:before {content:"\f110";}
.im-html button.im-btn-loading i.fa {display:inline-block;animation:im-btn-spin 0.85s linear infinite;}
@keyframes im-btn-spin {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}
body #im-message-form .im-attachment {position:absolute;right:58px;top:7px;height:36px;margin:0;overflow:hidden;width:auto;}
body .im-attachment .im-att-box .im-status .im-wrap span {max-width: 100px; overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis;}
body .im-attachment .im-att-box .im-status .im-wrap span .im-def-text {display:none;}
body .im-attachment .im-att-box .im-wrap {padding:9px 10px;background:#e8eaed;border-radius:8px;color:#444;transition:0.1s;height:34px;}
body .im-attachment .im-att-box .im-wrap:hover {background:#d0d0d0;}
body .im-attachment .im-att-box .im-status i {font-size:16px;line-height:16px;text-align:center;margin:0;}
body .im-attachment .im-att-box .im-status {color:#666;}

.im-show-older {cursor:pointer;float:left;font-weight:bolder;clear:both;width:100%;padding:12px;font-size:14px;line-height:16px;background:#e4e4e4;border-radius:8px;color:#444;text-align:center;margin:-20px 0 20px 0;transition:0.1s;}
.im-show-older:hover {background:#e8e8e8;}

#im-message {scrollbar-width:thin;scrollbar-color: #9e9e9e rgba(0,0,0,0.05);}
#im-message::-webkit-scrollbar {box-shadow: none;height: 5px;background:rgba(0,0,0,0.05);}
#im-message::-webkit-scrollbar-thumb {border-radius:100px;background-color: rgba(0,0,0,0.3);background-clip: initial;box-shadow: none;}
#im-message::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0,0.6);}
#im-message::-webkit-scrollbar-corner {background: rgba(0,0,0,0.05);}
#im-message::-webkit-scrollbar-track { background: transparent; }

.im-threads .im-table-head > div {padding-top:6px;padding-bottom:6px;}
.im-empty-v2 {float:left;clear:both;width:100%;margin:0 0 10px 0;padding:30px 20px;background:#eee;border-radius:5px;text-align:center;font-size:15px;color:#888;}
.im-recipient.im-only-mobile {display:none;}


@media screen and (max-width: 1200px) {
  .im-messages .im-message-extra a.im-download {max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .im-threads .im-col-2.c3 {color: transparent; overflow: hidden;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .im-messages .im-table-row {width:85%;margin-bottom:35px;}
  .im-vertical {display:none;}
}

@media screen and (max-width: 767px) {
  body .im-alt-head .im-head2 {padding-right:36px;}
  a.im-remove-thread {width:32px;height:32px;padding:9px;text-align:center;}
  a.im-remove-thread span {display:none;}
  a.im-remove-thread i {margin:0;}
  
  body form#im-create-thread-form {width:100%;margin:0;}
  body #im-create-thread-form button.im-button-green {width:auto;}
  .im-threads-exist a .im-pms, .im-threads-exist a .im-time {display:none;}
  .im-threads-exist a .im-title {width:60%;}
  .im-threads-exist a .im-from-to {width:40%;}
  .im-table-head {display:none;}
  .im-threads .im-special {display:none;}
  .im-table-row .im-from-to {width:40%;}
  body .im-table-row > div.im-col-12 {width:60%;}
  .im-row.im-item-related {display:none;}
  body .im-row.im-item-context {padding:10px 12px;}
  body .im-row.im-item-context .im-item-resource {padding-right:10px;}
  body .im-row.im-item-context .im-item-resource img {width:56px;height:56px;max-width:56px;max-height:56px;}
  body .im-row.im-item-context .im-item-title {font-size:14px;line-height:18px;}
  body .im-file-messages #im-error-list, body .im-table.im-messages, body #im-message-form, .im-empty.flashmessage {width:100%;margin-right:0;}


  .im-button-green {width:100%;clear:both;}
  .im-messages .im-table-row {width:80%;margin-bottom:35px;}
  .im-vertical {display:none;}
  .im-table-row .im-horizontal, .im-table-row.im-from .im-horizontal {padding:0;top:-1px;background:transparent;}
  .im-table-row .im-horizontal .right {-webkit-border-radius: 30px; -webkit-border-top-left-radius: 0px; -moz-border-radius: 30px; -moz-border-radius-topleft: 0px; border-radius: 30px; border-top-left-radius: 0px;}
  .im-table-row.im-from .im-horizontal .right {-webkit-border-radius: 30px; -webkit-border-top-right-radius: 0px; -moz-border-radius: 30px; -moz-border-radius-topright: 0px; border-radius: 30px; border-top-right-radius: 0px;}
  .im-messages .im-table-row {padding:6px 0;margin:0 0 10px 0;}
  .im-item-related .im-item-resource {width:20%;max-width:20%;}
  .im-item-related .im-col-21 {width:80%;}

  .im-messages {padding:0;}
  .im-messages .im-message-extra a.im-hide {display:block;position:absolute;left:0;bottom:0;}
  .im-table-row .im-align-right, .im-table-head > div.im-align-right, .im-align-right {position:initial;}
  .im-messages .im-message-extra a.im-hide {margin:0;color:transparent;text-shadow:none;font-size:1px;overflow:hidden;width:24px;height:24px;top:55px;}
  .im-messages .im-message-extra a.im-hide:before {font-size:14px;text-align:center;width:24px;height:24px;line-height:24px;border-radius:3px;background:#00BCD4;color:#fff;font-family:"FontAwesome","Font Awesome 5 Free";text-indent:0;float:left;display:block;}
  .im-messages .im-message-extra a.im-hide:last-child {left:-29px;}
  .im-messages .im-message-extra a.im-hide:first-child {left:-55px;}
  .im-messages .im-message-extra a.im-hide:first-child:last-child {left:-40px;}
  .im-messages .im-message-extra a.im-hide:last-child:before {content:"\f127";}
  .im-messages .im-message-extra a.im-hide:first-child:before {content:"\f014";}
  .im-messages .im-message-extra.im-box-gray {padding:5px 8px!important}
  .im-messages .im-message-extra.im-box-gray .im-col-10 {width:100%;}
  .im-messages .im-message-extra a.im-download {max-width:100%;}
  .im-textarea {margin-bottom:10px;height:90px;}

  body h2.im-head {margin:-16px -16px 20px -16px;width:calc(100% + 32px);}
}

@media screen and (max-width: 490px) {
  body #im-create-thread-form button.im-button-green {width:100%;margin-bottom:10px;}
  body #im-create-thread-form .im-attachment {width:100%;margin:0}
  body #im-create-thread-form .im-attachment .im-att-box .im-wrap {width:100%;text-align:center;}
  body .im-attachment .im-att-box .im-status i {float: none; display: inline-block; vertical-align: -1px;}
  body .im-attachment .im-att-box .im-status {width:100%;}

  .im-table-row .im-from-to {display:none;}
  body .im-table-row > div.im-col-12 {width:100%;}
  body .im-messages .im-message-extra a.im-download {width:110px;}
  .im-recipient.im-only-mobile {display:inline-block;}
  .im-threads .im-item > a:after {content:",";}
  body .im-threads .im-item a, body .im-threads .im-item {color:#444;font-size:13px;line-height:16px;}
  body .im-threads .im-item a {border-bottom:1px dashed #ddd;display:inline-block;}
  body .im-threads .im-item a:hover {border-bottom:1px solid #aaa;}
}

@media screen and (max-width: 420px) {
  .im-threads-exist a .im-title {width:100%;}
  .im-threads-exist a .im-from-to {display:none;}

}

@media screen and (max-width: 360px) {
  body #im-message {height:85px;}
}

/* ------------ END OF STYLE V2 --------------- */


/* BLOCKS */
.im-block {float:left;clear:both;width:100%;margin-top:25px;}
.im-block .im-remove-block {font-size:16px;}
.im-block .im-remove-block:hover {color:#222;}
.im-block .im-table-row.im-empty {background:#f9f9f9;padding:20px;color:#999;}
.im-block .im-table-head strong {float:left;line-height:34px;}
.im-block .im-table-head form {float:left;margin-left:15px;}
.im-block .im-table-head form input[type="text"] {float: left; height: 34px!important; padding: 0 6px!important; line-height: 24px; margin: 0px 5px; width: 180px;}
.im-block .im-table-head form button[type="submit"] {float:left;height:24px!important;padding:0 6px!important;line-height:24px;margin:-3px 0 -3px 4px;border: 1px solid #03a9f4; background: #03a9f4; color: #fff;}
.im-block .im-table-head form button[type="submit"]:hover {background: #0695d6; border-color: #0695d6;}
.im-block .im-table-head form button i {font-size:14px;color:#fff;}
.im-threads .im-title a.im-block-thread {margin-left:3px;color:#888;font-weight:500;display:none;}
.im-threads .im-title a.im-block-thread:hover, .im-threads .im-title a.im-block-thread.active {color:#D32F2F;}
.im-threads .im-title a.im-block-thread.active, .im-table-row:hover .im-title a.im-block-thread {display:inline-block;}


.im-threads .im-profile-img {position:absolute;left:3px;width:40px;height:40px;margin-top:1px;-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;object-fit:cover;}
.im-profile-img.im-img-def {opacity:0.6;}
.im-profile-img.im-is-offer {opacity:1;color:#fff;font-weight:bold;letter-spacing:-0.5px;font-size:11px;line-height:12px;height:43px;padding:9px 1px;text-align:center;background:#007ea7;box-shadow:0 0 0 3px rgba(0, 126, 167, 0.50);}
.im-vertical {position:absolute;left:50%;margin-left:-1px;height:100%;width:2px;background:#eee;top:0;display:block;}
.im-vertical .bot {position:absolute;bottom:-3px;left:-9px;background:#fff;border:3px solid #ddd;width:20px;height:20px;-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;}
.im-table-row .im-horizontal {padding:3px 0;position:absolute;top:-28px;right:-55px;width:50px;display:block;overflow:visible;background:#fff;-webkit-border-radius: 30px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 30px; -moz-border-radius-bottomleft: 0; border-radius: 30px; border-bottom-left-radius: 0;}
.im-table-row .im-horizontal .right {float:left;display:block;width:50px;height:50px;border:1px solid #ddd;background:#fff;padding:2px;-webkit-border-radius: 30px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 30px; -moz-border-radius-bottomleft: 0; border-radius: 30px; border-bottom-left-radius: 0;}
.im-table-row .im-horizontal .right img {opacity:1;float:left;width:40px;height:40px;object-fit:cover;-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
.im-table-row .im-horizontal span {padding:0;}
.im-table-row.im-from .im-horizontal {left:-55px;right:auto;-webkit-border-radius: 30px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 30px; -moz-border-radius-bottomright: 0; border-radius: 30px; border-bottom-right-radius: 0;}
.im-table-row.im-from .im-horizontal .right {border:none;left:-55px;right:auto;border-radius:100px;}
.im-attachment {float:left;width:auto;clear:both;margin:4px 0 0 12px;clear:none!important;}
.im-attachment .im-att-box {float:left;width:100%;clear:both;margin:0;position:relative;}
.im-attachment .im-att-box input {cursor:pointer;opacity:0;padding:5px;position:absolute;top:0;left:0;z-index:0;background:transparent;}
.im-attachment .im-att-box .im-status {float:left;width:auto;cursor:pointer;padding:0;color:#00BCD4;position:relative;z-index:2;}
.im-attachment .im-att-box:hover .im-status .im-wrap span {text-decoration:underline;}
.im-attachment .im-att-box .im-wrap {float:left;width:auto;cursor:pointer;padding:5px 0 5px 2px;position:relative;z-index:2;}
.im-attachment .im-att-box .im-status i {float:left;cursor:pointer;font-size:16px;line-height:16px;width:18px;text-align:left;}
.im-attachment .im-att-box .im-status .im-wrap span {font-size:13px;cursor:pointer;line-height:16px;font-weight:500;}
.im-attachment .im-text {float:left;width:100%;clear:both;margin:1px 0;font-size:12px;color:#999;line-height:13px;}

.im-user-account-count {position: absolute; font-size: 9px; padding: 2px 4px; line-height: 12px; text-align: center; font-weight: bold; height: 16px; min-width: 16px; margin-left: 3px; border-radius: 5px; color: #fff; background: #333;}


/* CONTACT BUTTON */
.im-contact {float:left;display:inline-block;width:auto;margin:10px 15px 10px 0;color:#fff;padding:10px 46px 10px 10px;height:52px;background:#2196F3;border:1px solid #2196F3;position:relative;overflow:hidden;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.im-contact:hover {color:#fff;text-decoration:none;}
.im-contact:after {position:absolute;display:block;background:#fff;content:".";text-indent:-9999px;width:50px;height:100px;right:-15px;top:-20px;-ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);}
.im-contact .im-top {float:left;clear:both;width:100%;font-weight:bold;font-size:14px;line-height:15px;}
.im-contact:hover .im-top {text-decoration:underline;}
.im-contact .im-bot {float:left;clear:both;width:100%;font-weight:500;font-size:11px;line-height:15px;}
.im-contact i {position: absolute; top: 15px; right: 7px; font-size: 20px; color: #2196F3; z-index: 2;}
.im-contact:hover i {color:#1C76BD;}


/* ERROR LIST FOR VALIDATION */
.im-error-list.error-list {padding:0px;list-style-type:none;color:#D27C82;font-size:13px;position:relative;margin:0;}
.im-error-list.error-list li { background:#FFE2E4;padding:8px 10px 8px 30px;margin:0 0 3px 0;clear:both;border-left:1px solid #FFE2E4;border-right:1px solid #FFE2E4;position:relative;border-left: solid 3px #D27C82;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;overflow:hidden;}
.im-error-list.error-list li:before { position: absolute; top: 50%; margin-top: -10px; display: block; height: 20px; line-height: 20px; width: 20px; color: #D27C82; left: 8px; font-family: "FontAwesome","Font Awesome 5 Free"; content: "\f059"; font-size: 18px; }
.im-error-list.error-list li:last-child {margin-bottom:10px;}
.im-error-list.error-list li label {margin:0;font-size:14px;}


/* HEADER LINK */
#im-link {position:relative;}
#im-link > a {font-weight:bold;}
#im-link #im-thread-wrap {display:none;position:absolute;top:calc(100% - 3px);left:0;width:300px;min-height:100px;}
#im-link:hover #im-thread-wrap {display:block;}
#im-link .im-t-unread {display:inline-block;margin-left:4px;margin-right:8px;text-decoration:none;padding:0 3px;background:#F44336;color:#fff;font-weight:bold;-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
#im-link .im-thread-list {z-index:9999;color:#333;position:absolute;top:7px;left:0;width:300px;border:1px solid #ddd;background:#fff;font-size:12px;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#im-link .im-thread-list:before {content: ""; border:6px solid;border-color: transparent transparent #ddd transparent; position: absolute; top: -12px; left: 15px;}
#im-link .im-thread-list .im-entry {position:relative;margin:0;padding:4px 6px;background:#fff;border-bottom:1px solid #eee;border-top:1px solid #fff;}
#im-link .im-thread-list .im-entry:after {font-family:"FontAwesome","Font Awesome 5 Free";content:"\f1db";position:absolute;right:6px;top:4px;color:#ccc;font-size:8px;}
#im-link .im-thread-list .im-entry:hover {background:#E2EBF3!important;}
#im-link .im-thread-list .im-entry.im-unread {background:#f8f8f8;}
#im-link .im-thread-list .im-entry.im-unread:after {content:"\f111";color:#aaa;}
#im-link .im-thread-list .im-row {margin:0;}
#im-link .im-thread-list .im-img {padding-right:8px;}
#im-link .im-thread-list .im-img img {border:1px solid #ddd;padding:1px;background:#fff;width:auto;height:auto;max-width:100%;max-height:56px;}
#im-link .im-thread-list .im-name {margin-top:1px;font-size:12px;color:#000;font-weight:bold;height:18px;line-height:17px;overflow:hidden;}
#im-link .im-thread-list .im-text {font-size:11px;font-weight:500;color:#333;line-height:13px;margin:1px 0;height:14px;overflow:hidden;}
#im-link .im-thread-list .im-text .fa {color:#bbb;margin-right:2px;font-size:9px;}
#im-link .im-thread-list .im-time {font-size:10px;font-weight:500;color:#999;font-style:italic;height:18px;overflow:hidden;line-height:17px;}
#im-link .im-show-all {font-size:12px;padding:8px 0;text-align:center;}
#im-link .im-show-all a {color:#999!important;text-decoration:none!important;line-height:16px!important;font-size:12px;}
#im-link .im-show-all a:hover {text-decoration:underline;color:#00BCD4!important;}



/* OFFER */
.im-row.im-offer {margin:0 0 20px 0;padding:15px 40px 15px 15px;position:relative;background:#e2f7ff;color:#333;border:1px solid #007ea7;border-left-width:5px;font-size:14px;border-radius:6px;text-decoration:none;}
.im-row.im-offer:hover {background:#d6eff9}
.im-row.im-offer:after {position:absolute;right:10px;transition:0.15s;top:calc(50% - 12px);width:24px;text-align:center;line-height:24px;font-family:"FontAwesome","Font Awesome 5 Free";content:"\f105";font-weight:900;font-size:24px;color:#007ea7;}
.im-row.im-offer:hover:after {right:6px;}


/* ITEM RELATED TO THREAD */
.im-row.im-item-related {margin:5px 0 30px 0;padding-bottom:20px;border-bottom:1px solid #ddd;background:#f0f0f0;padding:10px;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.im-item-related, .im-item-related *:not(i) {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.im-item-related a {color:#2EACCE;font-size:12px;font-weight:bold;text-decoration:none;}
.im-item-related a:hover {text-decoration:underline;}
.im-item-related .im-line {padding:2px 8px;font-size:12px;color:#999;}
.im-item-related .im-item-price {font-weight:bold;font-size:14px;color:#000;}
.im-item-related .im-item-resource {width:auto;max-width:12.5%;padding-right:5px;}
.im-item-related .im-item-resource img {width:auto;height:auto;max-width:100%;max-height:66px;border:1px solid #ddd;padding:2px;background:#fff;-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}

/* THREADS LIST */
.im-threads {font-size:13px;}
.im-threads .im-table-row {padding:8px 0;position:relative;}
.im-threads .im-table-row.im-is-offer {background:#ffedab;}
.im-threads .im-table-row.im-unread:before {color:#fff;font-size:13px;line-height:24px;text-align:center;display:block;font-family:"FontAwesome","Font Awesome 5 Free";content:"\f070";position:absolute;left:-24px;width:24px;height:24px;background:#F44336;top:0;}
.im-threads .im-line {padding:2px;}
.im-threads .im-title a {font-size:13px;font-weight:bold;}
.im-threads .im-item a {font-size:12px;text-decoration:none;color:#888;}
.im-threads .im-item a:hover {color:#333;}
.im-threads .im-from-to {font-size:13px;color:#000;}
.im-threads .im-time {font-size:12px;color:#888;font-style:italic;}
.im-threads .im-special {padding:20px 5px;line-height:18px;}
.im-threads .im-special i {font-size:14px;line-height:18px;}
.im-threads .im-small {font-size:9px;}
.im-threads .im-flag-yes i {color:#F44336;}
.im-threads .im-flag-no i {color:#bbb;}
.im-threads .im-notify-yes i {color:#F44336;}
.im-threads .im-notify-no i {color:#bbb;}

/* CREATE THREAD */
#im-create-thread-form {padding:12px;border:1px solid #eee;background:#f0f0f0;display:inline-block;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#im-create-thread-form .im-input {clear:both;}
#im-create-thread-form .im-textarea {margin-top:0px;}
.im-threads-exist {margin:0 0 15px 0;display:inline-block;width:100%;clear:both;}
.im-threads-exist a {font-size:12px;padding:10px;background:#fff;border:1px solid #ddd;-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;margin:0 0 8px 0;}
.im-threads-exist a:hover {background:#f4f8fb;}
.im-threads-exist a .im-title {color:#2EACCE;text-decoration:none;line-height:18px;font-size:12px;}
.im-threads-exist a .im-title:hover {color:#2EACCE;text-decoration:underline;}
.im-threads-exist a .im-from-to {color:#333;font-weight:500;line-height:18px;font-size:12px;}
.im-threads-exist a .im-pms {color:#999;font-weight:500;font-style:italic;font-size:11px;line-height:18px;}
.im-threads-exist a .im-time {color:#999;font-weight:500;font-style:italic;font-size:11px;line-height:18px;}

/* LIST OF MESSAGES */
.im-messages {font-size:14px;position:relative;padding-top:20px;}
.im-messages .im-table-row {position:relative;font-size:13px;background:#f0f0f0!important;margin:0 0 25px 0;padding:12px 8px;width:47%;float:left;border:none;box-shadow:0 1px 3px rgba(0,0,0,0.1);border-radius:10px;}
.im-messages .im-table-row.hidden {display:none;}
.im-messages .im-table-row.im-from {background:var(--mb-color-primary, #0d9ecc)!important;border:none;float:right;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.15);}
.im-messages .im-table-row.im-to {background:#e8e8e8!important;border:none;border-radius:10px 10px 10px 0;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.im-messages .im-table-row.im-from:before {color:#2EACCE;right:16px;left:auto;line-height:18px;}
.im-messages .im-name {line-height:18px;color:#111;}
.im-messages .im-name span.im-identifier {font-size:11px;color:#fff;background:#555;padding:0 3px;line-height:16px;display:inline-block;font-weight:600;}
.im-messages .im-table-row.im-from .im-name span.im-identifier {background:#F44336;}
.im-messages .im-date {font-size:10px;line-height:18px;color:#bbb;}
.im-messages .im-message-content {margin:8px 0;}
.im-messages .im-message-extra {text-align:right;margin-bottom:-3px;margin-top:8px;height:18px;}
.im-messages .im-message-extra.im-box-gray {padding:10px 8px 4px 8px!important;margin-top:15px;height:auto;background:#fdfdfd;border-top:1px solid #eee;-webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
.im-messages .im-message-extra a.im-hide {color:#F44336;font-size:11px;font-weight:500;text-decoration:underline;display:none;float:right;margin-left:10px;}
.im-messages .im-message-extra a.im-hide:hover {text-decoration:none;}
.im-messages .im-table-row:hover .im-message-extra a.im-hide {display:block;}
.im-messages .im-message-extra a.im-download {font-size:11px;text-decoration:none;float:left;}
.im-messages .im-message-extra a.im-download:hover {text-decoration:underline;}
.im-messages .im-att-icon {margin-right:5px;vertical-align:-3px;}
#im-message-form {float:left;width:100%;margin:20px 0 30px 0;clear:both;padding:12px;border:1px solid #eee;background:#f0f0f0;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#im-message-form .im-file, #im-create-thread-form .im-file {background: #fff;width:auto;max-width:100%;min-width:0; border: 1px solid #ddd; padding: 3px; float: right; font-size: 12px; margin: 2px 0 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.im-textarea {color:#333;margin:0 0 15px 0;height:175px;outline:none;width:100%;padding:5px;font-size:13px;line-height:16px;border:1px solid #ddd;background:#fff;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; border-radius: 0px;}
.im-textarea:focus, .im-textarea:active {border-color:#eaa867;}
.im-input {color:#333;margin:0;outline:none;width:100%;max-width:220px;padding:5px;font-size:13px;line-height:16px;border:1px solid #ddd;background:#fff;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; border-radius: 0px;}
.im-input:focus, .im-input:active {border-color:#eaa867;}
.im-label {margin:5px 0 2px 0;font-size:13px;color:#333;width:100%;clear:both;display:inline-block;}



/* TABLE */
.im-table {display:inline-block;width:100%;clear:both;}
.im-table-head {display:inline-block;width:100%;clear:both;border: none; font-weight: normal; vertical-align: top; border-bottom: solid 1px #a0d0eb;color:#555;font-size:12px;}
.im-table-head > div {padding:8px;text-align:center;}
.im-table-row {display:block;width:100%;clear:both;float:left;background:#fff;font-size:12px;border-bottom:1px solid #EAEDEF;padding:4px 0;}
.im-table-row:nth-child(odd) {background:#FCFDFE;}
.im-table-row:hover {background:#f4f8fb;}
.im-table-row > div {overflow:hidden;padding:8px;text-align:center;}
.im-table-row > div.no-img {padding-left:56px;}
.im-table-row > div.im-line {overflow:hidden;padding:2px 8px;text-align:center;}
.im-table-row > div.im-line .im-unsafe-info {float:left;clear:both;width:auto;max-width:100%;border-radius:4px;text-align:left;letter-spacing:-0.2px;padding:4px 6px;font-size:13px;line-height:15px;background: #ffdbdb; color: #600000; border: 1px solid rgba(0, 0, 0, 0.1); margin: 0 0 12px 0;}
.im-table-row > div a {text-decoration:underline;color:#2EACCE;}
.im-table-row > div a:hover {text-decoration:none;}
.im-table-row > div.im-red {color:#F44336;}
.im-table-row .im-align-left, .im-table-head > div.im-align-left, .im-align-left {text-align:left;}
.im-table-row .im-align-right, .im-table-head > div.im-align-right, .im-align-right {text-align:right;}
.im-table-row .im-align-center, .im-table-head > div.im-align-center, .im-align-center {text-align:center;}
.im-table-row.im-table-row-summary {font-weight:bold;background:#E3F0FD;color:#000;border-bottom-color:#DDE2E4;}
.im-table-row.im-table-row-summary:nth-child(odd) {background:#EDF4FB}
.im-row-empty {text-align:center;padding:30px 25px 20px 25px;}
.im-row-empty i {color: #dedede; display: block; clear: both; font-size: 80px; text-shadow: #fff 1px 1px 0;}
.im-row-empty span {text-align: center; display: block; color: #999;font-size:14px;}


@media screen and (max-width: 767px) {
  .im-table-head > div.im-col-2 {display:none;}
}



/* BASE STYLES */
.im-i {font-style:italic;}
.im-u {text-decoration:underline;}
.im-b {font-weight:bold;}
.im-gray {color:#888;}
.im-row {width:100%;display:inline-block;margin:5px 0;clear:both;}
h2.im-head {font-size:20px;color:#363A41;display:inline-block;width:100%;padding:0;margin:0 0 25px 0;font-weight:bold;}
h3.im-head {font-size:16px;color:#363A41;display:inline-block;width:100%;padding:0;margin:50px 0 15px 0;font-weight:bold;}
.im-body {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;font-size:14px;line-height:18px;}


/* Buttons */
.im-button-white {outline:none;box-shadow:none;display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 8px; font-size: 13px; line-height: 17px; height:31px;border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;color: #363A41!important; background-color: #fff; border-color: #DEDEDE;}
.im-button-white:hover {color: #fff; background-color: #00aff0; border-color: #008abd; -webkit-box-shadow: none; box-shadow: none;}
.im-button-green, .im-body #uniform-undefined {text-shadow:none;background-position:0;float:left;outline:none;box-shadow:none;display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; font-weight:600;cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 8px 10px; font-size: 13px; line-height: 16px; height:34px;border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;color: #ffffff!important; background-color:var(--mb-color-primary, #0d9ecc); border-color:var(--mb-color-primary, #0d9ecc);}
.im-button-green:hover, .im-body #uniform-undefined:hover {color: #fff; background-position:0;background-color:var(--mb-color-primary-hover, #056786); border-color:var(--mb-color-primary-hover, #056786); -webkit-box-shadow: none; box-shadow: none;}
.im-button-red {outline:none;box-shadow:none;display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 8px; font-size: 13px; line-height: 17px; height:31px;border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;color: #ffffff!important; background-color: #E08F95; border-color: #da7b82;}
.im-button-red:hover {color: #fff; background-color: #d5676f; border-color: #cd4b55; -webkit-box-shadow: none; box-shadow: none;}
.im-body .uploader {float:right;margin:1px 0 0 0;width:auto;display:none;}



div[class^="im-col-"] {float:left;position:relative;}
.im-col-1 {width:4.16667%}
.im-col-2 {width:8.33333%}
.im-col-3 {width:12.5%}
.im-col-4 {width:16.66667%}
.im-col-5 {width:20.83333%}
.im-col-6 {width:25%}
.im-col-7 {width:29.16667%}
.im-col-8 {width:33.33333%}
.im-col-9 {width:37.5%}
.im-col-10 {width:41.66667%}
.im-col-11 {width:45.83333%}
.im-col-12 {width:50%}
.im-col-13 {width:54.16667%}
.im-col-14 {width:58.33333%}
.im-col-15 {width:62.5%}
.im-col-16 {width:66.66667%}
.im-col-17 {width:70.83333%}
.im-col-18 {width:75%}
.im-col-19 {width:79.16667%}
.im-col-20 {width:83.33333%}
.im-col-21 {width:87.5%}
.im-col-22 {width:91.66667%}
.im-col-23 {width:95.83333%}
.im-col-24 {width:100%}



/* RTL */
html[dir="rtl"] .im-body, html[dir="rtl"] .im-html, html[dir="rtl"] .im-table, html[dir="rtl"] .im-messages, html[dir="rtl"] .im-threads {direction:rtl;}
html[dir="rtl"] div[class^="im-col-"] {float:right;}
html[dir="rtl"] .im-button-green, html[dir="rtl"] .im-body #uniform-undefined {float:right;}
html[dir="rtl"] body #im-create-thread-form button.im-button-green {clear:none;}
html[dir="rtl"] body #im-create-thread-form .im-attachment {margin-right:10px;margin-left:0;margin-bottom:10px;}
html[dir="rtl"] body form#im-create-thread-form {float:right;clear:none;margin-left:20px;margin-right:0;}
html[dir="rtl"] body .im-row.im-item-related {float:left;}
html[dir="rtl"] body .im-row.im-item-context {border-left:none;border-right:4px solid #2196F3;}
html[dir="rtl"] body .im-row.im-item-context .im-item-resource {padding:0 0 0 14px;}
html[dir="rtl"] body .im-file-create-thread .im-error-list.error-list {float:right;clear:right;}
html[dir="rtl"] #user-main .user-custom-box h2 {float:right;text-align:right;width:100%;}
html[dir="rtl"] body .im-attachment .im-att-box .im-status i {float:right;margin-left:2px;transform:scaleX(-1);}
html[dir="rtl"] .im-contact {float:right;margin-left:15px;margin-right:0;padding-left:46px;padding-right:10px;text-align:right;}
html[dir="rtl"] .im-contact .im-top, html[dir="rtl"] .im-contact .im-bot {float:right;}
html[dir="rtl"] .im-contact i {left:7px;right:auto;}
html[dir="rtl"] .im-contact:after {left:-15px;right:auto;transform:rotate(-7deg);}
html[dir="rtl"] .im-input, html[dir="rtl"] body .im-input, html[dir="rtl"] .im-input, html[dir="rtl"] #im-create-thread-form .im-input, html[dir="rtl"] body #im-message {float:right;}
html[dir="rtl"] body .im-file-create-thread h2.im-head, html[dir="rtl"] h2.im-head {text-align:right;}
html[dir="rtl"] body .im-file-messages #im-error-list, html[dir="rtl"] .im-table.im-messages, html[dir="rtl"] body #im-message-form {float:right;clear:right;margin-left:5%;margin-right:0;}
html[dir="rtl"] .im-empty.flashmessage {float:right;clear:none;}
html[dir="rtl"] body .im-messages .im-table-row {margin-left:0;margin-right:52px;}
html[dir="rtl"] body .im-messages .im-table-row.im-from {margin-left:52px;margin-right:0;}
html[dir="rtl"] .im-messages .im-table-row {float:right;border-radius:10px;}
html[dir="rtl"] .im-messages .im-table-row.im-from {float:left;border-radius:10px;}
html[dir="rtl"] body .im-table-row .im-horizontal {left:auto;right:-52px;}
html[dir="rtl"] body .im-table-row.im-from .im-horizontal {left:-52px;right:auto;}
html[dir="rtl"] body #im-message {padding-left:115px;padding-right:15px;}
html[dir="rtl"] body #im-message-form button {float:left;}
html[dir="rtl"] body #im-message-form button.im-button-alt {float:left;left:7px;right:auto;}
html[dir="rtl"] body #im-message-form button.im-button-alt i.fa-paper-plane {transform:scaleX(-1);}
html[dir="rtl"] body #im-message-form button.im-button-alt i.fa-spinner {transform:none;}
html[dir="rtl"] .im-table-row .im-del-mes-box {left:-32px;right:auto;padding-right:4px;padding-left:0;}
html[dir="rtl"] .im-table-row.im-from .im-del-mes-box {right:-32px;left:auto;padding-left:4px;padding-right:0;}
html[dir="rtl"] .im-attachment .im-att-box .im-status {float:right;}
html[dir="rtl"] body #im-message-form .im-attachment {left:58px;right:auto;}
html[dir="rtl"] body .im-messages .im-message-extra.im-box-gray {padding-right:0px!important;padding-left:44px!important;text-align:right;}
html[dir="rtl"] body .im-messages .im-message-extra a.im-download {float:right;}
html[dir="rtl"] body .im-messages .im-message-extra a.im-download > i {float:right;margin-left:6px;margin-right:0;}
html[dir="rtl"] body .im-messages .im-message-extra a.im-hide {left:0;right:auto;}
html[dir="rtl"] body .im-alt-head .im-head2 {padding-left:110px;padding-right:0;}
html[dir="rtl"] body .im-threads .im-line, html[dir="rtl"] body .im-threads .im-title a, html[dir="rtl"] .im-block .im-table-head strong {float:right;}
html[dir="rtl"] body .im-table-row > div.no-img {padding-right:56px;padding-left:8px;}
html[dir="rtl"] .im-profile-img {right:3px;left:auto;}
html[dir="rtl"] .im-threads .im-title a.im-block-thread {margin-right:3px;margin-left:0;}
html[dir="rtl"] body .im-block .im-table-row .im-col-22 {padding-left:8px;padding-right:3px;text-align:right;}
html[dir="rtl"] .im-table.im-body {direction:ltr;}
html[dir="rtl"] .im-table.im-body > div, html[dir="rtl"] .im-table.im-body > span {direction:rtl;}
html[dir="rtl"] .im-table-head > div.im-align-left {text-align:right;}
html[dir="rtl"] .im-user-account-count {margin-left:0;margin-right:3px;}
html[dir="rtl"] .im-limits-info {border:1px solid #ccc;border-right:4px solid #2196F3;}

/* TGMarkt Messenger additions */
.tg-im-conversation-tools{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}.tg-im-tool{display:inline-flex;align-items:center;gap:5px;border:1px solid #dfe3e8;background:#fff;color:#2a2f36;border-radius:8px;padding:7px 9px;font-size:12px;font-weight:600;text-decoration:none}.tg-im-tool:hover{border-color:#ec2f8f;color:#d91c7b}


/* =========================================================
   TGMarkt Instant Messenger 2.8.2
   Embedded chat composer / desktop modal fix
   ========================================================= */

.tg-im-chat-shell {
  --tg-im-pink: #ff3b46;
  --tg-im-pink-dark: #e92e3b;
  --tg-im-line: #e7e9ed;
  --tg-im-soft: #f6f7f9;
  --tg-im-ink: #20242a;
}

/* Always establish correct float containment. */
.tg-im-chat-history {
  display: block !important;
  width: 100%;
  clear: both;
  box-sizing: border-box;
}

.tg-im-chat-history:after {
  content: "";
  display: table;
  clear: both;
}

/* Modern compact composer also works on the normal messages page. */
#im-message-form.tg-im-chat-composer {
  box-sizing: border-box;
  width: 100%;
  clear: both;
  float: none;
  margin: 12px 0 18px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--tg-im-line);
  border-radius: 14px;
  box-shadow: 0 -2px 14px rgba(18, 24, 34, .06);
}

#im-message-form.tg-im-chat-composer .im-logged-user-img {
  display: none !important;
}

#im-message-form .tg-im-compose-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  width: 100%;
}

#im-message-form.tg-im-chat-composer .im-textarea {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 120px;
  margin: 0;
  padding: 10px 12px;
  resize: none;
  overflow-y: auto;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: var(--tg-im-soft);
  color: var(--tg-im-ink);
  font-size: 14px;
  line-height: 20px;
}

#im-message-form.tg-im-chat-composer .im-textarea:focus {
  border-color: rgba(255,59,70,.55);
  box-shadow: 0 0 0 3px rgba(255,59,70,.08);
  outline: none;
}

#im-message-form .tg-im-send-button {
  height: 42px;
  min-width: 116px;
  margin: 0;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background: var(--tg-im-pink);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#im-message-form .tg-im-send-button:hover {
  background: var(--tg-im-pink-dark);
}

#im-message-form .tg-im-send-button i {
  font-size: 13px;
}

#im-message-form .im-attachment {
  clear: both;
  margin-top: 7px;
}

/*
 * In the listing modal / embedded iframe, the chat itself becomes the viewport.
 * The history scrolls; the composer remains permanently visible at the bottom.
 */
html.tg-im-embedded-html,
body.tg-im-embedded {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

body.tg-im-embedded {
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

body.tg-im-embedded .tg-im-chat-shell {
  box-sizing: border-box;
  height: 100vh;
  max-height: 100vh;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 0 12px 8px;
}

body.tg-im-embedded .tg-im-chat-shell > h2.im-head,
body.tg-im-embedded .tg-im-chat-shell > .im-alt-head,
body.tg-im-embedded .tg-im-chat-shell > .im-offer,
body.tg-im-embedded .tg-im-chat-shell > .im-item-related,
body.tg-im-embedded .tg-im-chat-shell > #im-error-list {
  flex: 0 0 auto;
}

/* The TGMarkt item context is kept above the scrollable history. */
body.tg-im-embedded .tg-im-chat-shell > .tg-im-item-context,
body.tg-im-embedded .tg-im-chat-shell > .im-row:not(#im-message-form) {
  flex: 0 0 auto;
}

body.tg-im-embedded .tg-im-chat-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 14px 7px 10px;
  margin: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.tg-im-embedded #im-message-form.tg-im-chat-composer {
  position: relative;
  z-index: 50;
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 9px 8px max(9px, env(safe-area-inset-bottom));
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -8px 22px rgba(18,24,34,.09);
}

body.tg-im-embedded .im-empty {
  flex: 1 1 auto;
  overflow: auto;
}

/* Existing TGMarkt bubble design: preserve it, but use full useful width. */
body.tg-im-embedded .tg-im-chat-history .im-table-row {
  max-width: 72%;
  box-sizing: border-box;
}

body.tg-im-embedded .tg-im-chat-history .im-table-row.im-from {
  background: var(--tg-im-pink) !important;
  color: #fff;
}

body.tg-im-embedded .tg-im-chat-history .im-table-row.im-from .im-message-content,
body.tg-im-embedded .tg-im-chat-history .im-table-row.im-from .im-message-content * {
  color: #fff;
}

/* Compact screens / narrow modal. */
@media screen and (max-width: 680px) {
  #im-message-form .tg-im-compose-main {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  #im-message-form .tg-im-send-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
  }

  #im-message-form .tg-im-send-button span {
    display: none;
  }

  body.tg-im-embedded .tg-im-chat-history .im-table-row {
    width: auto;
    max-width: 84%;
  }
}

/* TGMarkt 2.8.3 — desktop unread visual state */
#im-link.tg-im-header-link{position:relative}
#im-link.tg-im-header-link>a{display:inline-flex;align-items:center;gap:6px;position:relative}
#im-link.tg-has-unread>a,#im-link.tg-has-unread .tg-im-header-icon{color:#ec2f8f!important}
#im-link.tg-has-unread .tg-im-header-icon{transform:scale(1.08)}
#im-link .tg-im-header-badge{position:absolute;right:-11px;top:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex!important;align-items:center;justify-content:center;background:#ec2f8f!important;color:#fff!important;border:2px solid #fff;font-size:10px!important;font-weight:900;box-sizing:border-box;box-shadow:0 2px 8px rgba(236,47,143,.28)}
#im-link .im-entry.im-unread{background:#fff6fb!important;border-left:3px solid #ec2f8f}
#im-link .im-entry.im-unread .im-name{color:#c81f73;font-weight:700}

/* TGMarkt mobile chat: composer fixed full-width above bottom navigation */
@media screen and (max-width: 680px) {
  body:not(.tg-im-embedded) .tg-im-chat-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 9998 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -5px 18px rgba(18,24,34,.10) !important;
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
    gap: 8px !important;
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer .im-textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px;
    min-height: 50px;
    padding: 13px 16px;
    border-radius: 24px;
    background: #fff;
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer .tg-im-send-button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }
}

/* ================================================================
 * TGMarkt 2.8.4 — dauerhaft sichtbarer Nachrichten-Composer
 * App/iframe: volle Breite, fest am unteren Rand des Chat-Viewports.
 * Mobile Webseite: volle Viewport-Breite, oberhalb der Safe Area.
 * Desktop Webseite: sticky am unteren Rand des Chatbereichs.
 * ================================================================ */

/* Allgemein: Der Composer soll immer die komplette nutzbare Chatbreite belegen. */
#im-message-form.tg-im-chat-composer {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Normale Webseite / Desktop: am unteren Rand des Chatbereichs stehen bleiben. */
body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 9998 !important;
  margin: 8px 0 0 !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 -7px 22px rgba(18,24,34,.10) !important;
}

/* Eingebetteter App-Chat: Shell ist der feste Chat-Viewport. */
body.tg-im-embedded .tg-im-chat-shell {
  position: relative !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  padding-bottom: var(--tg-im-composer-height, 78px) !important;
}

/* Nur der Nachrichtenverlauf scrollt. */
body.tg-im-embedded .tg-im-chat-history {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 18px !important;
}

/* App: Composer wirklich fest und randlos über die komplette Breite. */
body.tg-im-embedded #im-message-form.tg-im-chat-composer {
  position: absolute !important;
  left: -12px !important;
  right: -12px !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  width: calc(100% + 24px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 -6px 22px rgba(18,24,34,.12) !important;
}

body.tg-im-embedded #im-message-form.tg-im-chat-composer .tg-im-compose-main {
  width: 100% !important;
}

/* Mobile Webseite: genau wie in der App, fest über volle Bildschirmbreite. */
@media screen and (max-width: 680px) {
  body:not(.tg-im-embedded) .tg-im-chat-shell {
    padding-bottom: calc(var(--tg-im-composer-height, 82px) + 74px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 -6px 22px rgba(18,24,34,.12) !important;
  }
}

/* ================================================================
 * TGMarkt 2.8.5 — ruhiger Composer ohne Höhen-Springen
 * Das Eingabefeld bleibt konstant hoch; längere Texte scrollen intern.
 * Gilt für Web und eingebetteten Messenger.
 * ================================================================ */
#im-message-form.tg-im-chat-composer .im-textarea,
#im-message-form.tg-im-chat-composer #im-message {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  overflow-y: auto !important;
  resize: none !important;
  box-sizing: border-box !important;
}

body.tg-im-embedded #im-message-form.tg-im-chat-composer .im-textarea,
body.tg-im-embedded #im-message-form.tg-im-chat-composer #im-message {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}


/* iPhone/App: Composer an den echten unteren Rand des Messenger-Viewports. */
body.tg-im-embedded #im-message-form.tg-im-chat-composer {
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; margin:0 !important;
  padding:7px 10px max(7px, env(safe-area-inset-bottom)) !important;
}
body.tg-im-embedded .tg-im-chat-shell {
  padding-bottom:calc(var(--tg-im-composer-height, 70px) + 6px) !important;
}


/* ================================================================
 * TGMarkt 2.9.0 — Desktop Layout Fix
 * ================================================================ */
@media screen and (min-width: 900px) {
  body:not(.tg-im-embedded) .tg-im-chat-shell {
    display: grid !important;
    grid-template-columns: 270px minmax(0,1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: sticky !important;
    top: 16px !important;
    width: 270px !important;
    height: min(760px, calc(100vh - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar-title {
    flex: 0 0 auto !important;
    padding: 15px 16px 13px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #171b20 !important;
    border-bottom: 1px solid #e7eaee !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item {
    display: block !important;
    width: 100% !important;
    padding: 14px 15px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    border-bottom: 1px solid #edf0f2 !important;
    border-left: 3px solid transparent !important;
    background: #fff !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item:hover {
    background: #f7f8fa !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item.is-active {
    background: #fff4f9 !important;
    border-left-color: #e72b87 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item strong,
  body:not(.tg-im-embedded) .tg-im-thread-side-item span {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item strong {
    color: #171b20 !important;
    font-size: 14px !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item span {
    margin-top: 3px !important;
    color: #7d8690 !important;
    font-size: 12px !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding-bottom: 110px !important;
  }

  body:not(.tg-im-embedded) .tg-im-mobile-back {
    display: none !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-history {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 110px !important;
    scroll-padding-bottom: 110px !important;
  }

  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer {
    position: sticky !important;
    bottom: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.98) !important;
  }
}

@media screen and (max-width: 899px) {
  .tg-im-thread-sidebar { display:none !important; }
  .tg-im-chat-main { width:100% !important; min-width:0 !important; }
}


/* ================================================================
 * TGMarkt 2.9.1 — feste Header-/Suchleisten-Korrektur
 * Beide linken Spalten bleiben unter dem Website-Header sichtbar.
 * ================================================================ */
@media screen and (min-width: 900px) {
  :root {
    /*
     * Fester Abstand für Website-Header + Suchleiste.
     * Der Screenshot zeigt den Inhaltsbeginn ungefähr bei 78–85px.
     */
    --tg-im-web-fixed-top: 86px;
  }

  /*
   * Messenger-Unterhaltungsliste:
   * nicht mehr bis unter Header/Suchleiste hochscrollen.
   */
  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    position: sticky !important;
    top: var(--tg-im-web-fixed-top) !important;
    height: calc(100vh - var(--tg-im-web-fixed-top) - 16px) !important;
    max-height: calc(100vh - var(--tg-im-web-fixed-top) - 16px) !important;
  }

  /*
   * Die vorhandene linke Konto-/Profilnavigation des Themes.
   * Mehrere gebräuchliche Osclass-/Stela-/user-account Selektoren,
   * damit nur tatsächlich vorhandene Elemente getroffen werden.
   */
  body.user-account #sidebar,
  body.user-account .user-sidebar,
  body.user-account .user-menu,
  body.user-account .user-account-sidebar,
  body.user-account .account-sidebar,
  body.user-account aside.user-sidebar,
  body:not(.tg-im-embedded) .user-sidebar,
  body:not(.tg-im-embedded) .user-menu {
    position: sticky !important;
    top: var(--tg-im-web-fixed-top) !important;
    align-self: flex-start !important;
    max-height: calc(100vh - var(--tg-im-web-fixed-top) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /*
   * Rechter Chatbereich bleibt normal im Dokumentfluss.
   * Sticky ist nur der Composer am unteren Rand.
   */
  body:not(.tg-im-embedded) .tg-im-chat-main {
    align-self: start !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.3 — Desktop: Sidebars bleiben dauerhaft unter Header
 * JS setzt die exakten left/width Werte aus dem bestehenden Layout.
 * ================================================================ */
@media screen and (min-width: 900px) {
  :root {
    --tg-im-web-fixed-top: 86px;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    top: var(--tg-im-web-fixed-top) !important;
    max-height: calc(100vh - var(--tg-im-web-fixed-top) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* The grid column remains reserved even though the sidebar itself is fixed. */
  body:not(.tg-im-embedded) .tg-im-chat-shell {
    grid-template-columns: 270px minmax(0,1fr) !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-main {
    grid-column: 2 !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.4 — Footer Stop
 * JS berechnet die freie Höhe zwischen Header und Footer dynamisch.
 * ================================================================ */
@media screen and (min-width: 900px) {
  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    overflow: hidden !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.5 — beide linken Menüs unter Breadcrumb verankert
 * ================================================================ */
@media screen and (min-width: 900px) {
  :root {
    --tg-im-sidebar-top: 112px;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    top: var(--tg-im-sidebar-top) !important;
    max-height: calc(100vh - var(--tg-im-sidebar-top) - 16px) !important;
  }

  body.user-account #sidebar,
  body.user-account .user-sidebar,
  body.user-account .user-menu,
  body.user-account .user-account-sidebar,
  body.user-account .account-sidebar,
  body.user-account aside.user-sidebar,
  body:not(.tg-im-embedded) .user-sidebar,
  body:not(.tg-im-embedded) .user-menu {
    top: var(--tg-im-sidebar-top) !important;
    max-height: calc(100vh - var(--tg-im-sidebar-top) - 16px) !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.6 — Desktop: Seite bleibt stehen, nur Chat scrollt
 * ================================================================ */
@media screen and (min-width: 900px) {
  :root {
    --tg-im-desktop-top-gap: 12px;
    --tg-im-desktop-height: calc(100vh - 150px);
  }

  /*
   * Wichtig: keine fixed/JS-Pinning-Logik mehr.
   * Die Seite selbst soll beim Lesen eines Chats nicht nach unten scrollen.
   */
  body:not(.tg-im-embedded) .tg-im-chat-shell {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
    min-height: 560px !important;
    height: var(--tg-im-desktop-height) !important;
    max-height: var(--tg-im-desktop-height) !important;
    padding: 0 !important;
    margin: var(--tg-im-desktop-top-gap) 0 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar {
    grid-column: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 270px !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-sidebar-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-main {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /*
   * Header/Anzeige/Fehler bleiben oben.
   * Der Nachrichtenverlauf ist der einzige flexible Scrollbereich.
   */
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-head,
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-alt-head,
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-item-related,
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-offer,
  body:not(.tg-im-embedded) .tg-im-chat-main > #im-error-list,
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-errors,
  body:not(.tg-im-embedded) .tg-im-chat-main > .flashmessage {
    flex: 0 0 auto !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-history {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px !important;
  }

  /*
   * Composer ist jetzt ein normaler fester Flex-Block am unteren Rand
   * des Chatbereichs. Kein Überdecken der letzten Nachricht.
   */
  body:not(.tg-im-embedded) #im-message-form.tg-im-chat-composer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  body:not(.tg-im-embedded) .tg-im-mobile-back {
    display: none !important;
  }

  /*
   * Undo old fixed sidebar styles on likely theme account navigation.
   * The outer page no longer needs to scroll while a chat is open,
   * so the normal theme position is the most stable solution.
   */
  body.user-account #sidebar,
  body.user-account .user-sidebar,
  body.user-account .user-menu,
  body.user-account .user-account-sidebar,
  body.user-account .account-sidebar,
  body.user-account aside.user-sidebar,
  body:not(.tg-im-embedded) .user-sidebar,
  body:not(.tg-im-embedded) .user-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }
}

/* Tablet/Desktop with shorter viewport: leave a little more breathing room. */
@media screen and (min-width: 900px) and (max-height: 760px) {
  :root {
    --tg-im-desktop-height: calc(100vh - 118px);
  }
}

/* Mobile/iPhone remains unchanged. */
@media screen and (max-width: 899px) {
  .tg-im-chat-main {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.7 — kompakte Sidebar + nur Anzeigenkarte rechts
 * ================================================================ */
@media screen and (min-width: 900px) {
  body:not(.tg-im-embedded) .tg-im-hidden-chat-heading,
  body:not(.tg-im-embedded) .im-alt-head {
    display: none !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    border-left: 3px solid transparent !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item.is-active {
    background: #fff4f9 !important;
    border-left-color: #e72b87 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open {
    display: block !important;
    padding: 14px 44px 14px 15px !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open:hover {
    background: #f7f8fa !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-item.is-active .tg-im-thread-side-open:hover {
    background: #fff4f9 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open strong,
  body:not(.tg-im-embedded) .tg-im-thread-side-open span,
  body:not(.tg-im-embedded) .tg-im-thread-lastseen {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open strong {
    color: #171b20 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-lastseen {
    margin-top: 3px !important;
    color: #8b939d !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open span {
    margin-top: 4px !important;
    color: #7d8690 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-remove {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #9aa1a9 !important;
    text-decoration: none !important;
    background: transparent !important;
    z-index: 3 !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-remove:hover {
    color: #d7263d !important;
    background: #f4f5f6 !important;
  }

  /*
   * Rechts bleibt am oberen Rand nur noch der Anzeige-Kontext.
   */
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-head,
  body:not(.tg-im-embedded) .tg-im-chat-main > .im-alt-head {
    display: none !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-main {
    padding-top: 0 !important;
  }
}


/* ================================================================
 * TGMarkt 2.9.8 — Threadliste: Anzeige > User > zuletzt online
 * Desktop/Web only. Mobile/App folgen separat.
 * ================================================================ */
@media screen and (min-width: 900px) {
  body:not(.tg-im-embedded) .tg-im-thread-side-open .tg-im-thread-item-title {
    display: block !important;
    margin: 0 !important;
    color: #171b20 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open .tg-im-thread-user-name {
    display: block !important;
    margin-top: 4px !important;
    color: #555e68 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body:not(.tg-im-embedded) .tg-im-thread-side-open .tg-im-thread-lastseen {
    display: block !important;
    margin-top: 3px !important;
    color: #929aa3 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.0 — MOBILE WEB Messenger
 * Desktop und eingebettete App bleiben unverändert.
 * ================================================================ */

/* Mobile conversation overview */
@media screen and (max-width: 899px) {
  .im-file-threads .tg-im-mobile-thread-summary {
    display: block !important;
  }

  .im-file-threads .im-table-head {
    display: none !important;
  }

  .im-file-threads .im-table-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #e3e6e9 !important;
    background: #fff !important;
  }

  .im-file-threads .im-table-row.im-unread {
    background: #fff6fb !important;
    border-left: 4px solid #ec2f8f !important;
  }

  .im-file-threads .im-col-12.no-img {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .im-file-threads .im-profile-img {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 14px 0 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 2px 8px 2px 0 !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary strong,
  .im-file-threads .tg-im-mobile-thread-summary span,
  .im-file-threads .tg-im-mobile-thread-summary small {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .im-file-threads .tg-im-mobile-thread-item {
    color: #171b20 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  .im-file-threads .tg-im-mobile-thread-user {
    margin-top: 4px !important;
    color: #555e68 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
  }

  .im-file-threads .tg-im-mobile-thread-lastseen {
    margin-top: 3px !important;
    color: #929aa3 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
  }

  /* Hide the old desktop/table layout details on mobile. */
  .im-file-threads .im-col-12.no-img > .im-line,
  .im-file-threads .im-from-to,
  .im-file-threads .im-special {
    display: none !important;
  }
}

/* Hide mobile summary on desktop. */
@media screen and (min-width: 900px) {
  .im-file-threads .tg-im-mobile-thread-summary {
    display: none !important;
  }
}


/* Open conversation: lock the PAGE and let only message history scroll. */
@media screen and (max-width: 899px) {
  html.tg-im-mobile-web-chat-html,
  body.tg-im-mobile-web-chat {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* Normal website footer must not appear inside an open conversation. */
  body.tg-im-mobile-web-chat footer,
  body.tg-im-mobile-web-chat #footer,
  body.tg-im-mobile-web-chat .footer,
  body.tg-im-mobile-web-chat .site-footer,
  body.tg-im-mobile-web-chat .main-footer,
  body.tg-im-mobile-web-chat .footer-main {
    display: none !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100dvh - var(--tg-im-mobile-shell-top, 150px)) !important;
    max-height: calc(100dvh - var(--tg-im-mobile-shell-top, 150px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat .tg-im-mobile-back {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 10px 8px !important;
    padding: 4px 0 !important;
    color: #20242a !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat .tg-im-thread-sidebar {
    display: none !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-main > .im-head,
  body.tg-im-mobile-web-chat .tg-im-chat-main > .im-alt-head {
    display: none !important;
  }

  /* Everything above the history stays fixed within the chat layout. */
  body.tg-im-mobile-web-chat .tg-im-chat-main > *:not(.tg-im-chat-history):not(#im-message-form) {
    flex: 0 0 auto !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-history {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    padding: 10px 0 14px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  /*
   * Composer is a normal last flex row inside the messenger viewport.
   * This overrides all older mobile position:fixed rules.
   */
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 -5px 18px rgba(18,24,34,.10) !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    grid-template-columns: minmax(0,1fr) 52px !important;
    gap: 8px !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    overflow-y: auto !important;
    resize: none !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 50px !important;
  }

  /* Keep listing context compact at the top. */
  body.tg-im-mobile-web-chat .tg-im-item-context,
  body.tg-im-mobile-web-chat .im-item-context,
  body.tg-im-mobile-web-chat .tg-item-context {
    margin-bottom: 8px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.1 — Mobile Web Composer über TGMarkt-Bottom-Navigation
 * ================================================================ */
@media screen and (max-width: 899px) {
  :root {
    --tg-im-mobile-bottom-nav: 78px;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-shell {
    height: calc(
      100dvh
      - var(--tg-im-mobile-shell-top, 150px)
      - var(--tg-im-mobile-bottom-nav, 78px)
    ) !important;

    max-height: calc(
      100dvh
      - var(--tg-im-mobile-shell-top, 150px)
      - var(--tg-im-mobile-bottom-nav, 78px)
    ) !important;

    min-height: 0 !important;
  }

  /*
   * The composer is part of the chat flex layout and therefore always sits
   * directly above the real TGMarkt bottom navigation.
   */
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 8px !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-history {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
    scroll-padding-bottom: 14px !important;
  }

  /*
   * Do not let older full-screen/mobile composer rules push the form below
   * the messenger viewport.
   */
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    transform: none !important;
    inset: auto !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.2 — Mobile Web: kompakter Composer
 * Entfernt den zu hohen weißen Bereich über der Bottom-Navigation.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 5px 8px 6px !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;

    box-shadow: 0 -3px 12px rgba(18,24,34,.08) !important;

    display: block !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0,1fr) 50px 50px !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 11px 16px !important;

    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    width: 50px !important;
    min-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer button[type="submit"] {
    width: 50px !important;
    min-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  /*
   * Der Chatverlauf darf bis direkt an den Composer reichen.
   * Kein zusätzlicher großer weißer Abstand mehr.
   */
  body.tg-im-mobile-web-chat .tg-im-chat-history {
    padding-bottom: 6px !important;
    scroll-padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.3 — Mobile Web Footer Composer
 * Eckiger, hervorgehobener Eingabebalken direkt an der Bottom-Navigation.
 * Attachment + Send sind optisch in denselben Balken integriert.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    border: 0 !important;
    border-top: 1px solid #d8dce2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 -5px 18px rgba(18,24,34,.10) !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 48px 52px !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #cfd4dc !important;
    border-bottom: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    background: #f7f8fa !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 !important;
    padding: 14px 15px !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    width: 48px !important;
    min-width: 48px !important;
    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #e0e3e8 !important;
    border-radius: 0 !important;
    background: #eef0f3 !important;
    box-shadow: none !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer button[type="submit"] {
    width: 52px !important;
    min-width: 52px !important;
    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-history {
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
    scroll-padding-bottom: 4px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.4 — Mobile Web Full-Width Composer
 * Der gesamte Composer nutzt die verfügbare Displaybreite.
 * Textfeld + Anhang + Senden bleiben als eine integrierte Leiste.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    grid-template-columns: minmax(0, 1fr) 52px 58px !important;

    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message {
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    width: 52px !important;
    min-width: 52px !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer button[type="submit"] {
    width: 58px !important;
    min-width: 58px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.5 — iOS Safari: kein Auto-Zoom beim Texteingabefeld
 * Safari zoomt Inputs/Textareas automatisch, wenn font-size < 16px ist.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer input[type="text"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  html.tg-im-mobile-web-chat-html,
  body.tg-im-mobile-web-chat {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.8 — iOS Keyboard Restore
 * Beim Öffnen der Tastatur darf der reduzierte iOS-Viewport nicht als
 * dauerhafte Messenger-Höhe gespeichert werden.
 * ================================================================ */
@media screen and (max-width: 899px) {
  :root {
    --tg-im-mobile-viewport-height: 100dvh;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-shell {
    height: calc(
      var(--tg-im-mobile-viewport-height, 100dvh)
      - var(--tg-im-mobile-shell-top, 150px)
      - var(--tg-im-mobile-bottom-nav, 78px)
    ) !important;

    max-height: calc(
      var(--tg-im-mobile-viewport-height, 100dvh)
      - var(--tg-im-mobile-shell-top, 150px)
      - var(--tg-im-mobile-bottom-nav, 78px)
    ) !important;
  }

  /*
   * During keyboard display Safari may pan the page to expose the textarea.
   * Keep the composer geometry itself unchanged; after blur JS restores the
   * normal viewport and scrolls the conversation back to the latest message.
   */
  body.tg-im-mobile-web-chat.tg-im-keyboard-open #im-message-form.tg-im-chat-composer {
    position: relative !important;
    transform: none !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.9 — Mobile Web: geschlossener Composer-Rahmen
 * Direkt auf der TGMarkt-Bottom-Navigation, ohne Zwischenraum.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px 62px !important;
    align-items: stretch !important;
    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid #cfd4dc !important;
    border-radius: 8px !important;
    background: #ffffff !important;

    box-shadow: 0 -3px 14px rgba(18,24,34,.10) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-textarea,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer #im-message {
    width: 100% !important;
    min-width: 0 !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 15px 16px !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: #ffffff !important;
    box-shadow: none !important;

    font-size: 16px !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    width: 54px !important;
    min-width: 54px !important;

    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #e0e3e8 !important;
    border-radius: 0 !important;

    background: #eef0f3 !important;
    box-shadow: none !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer button[type="submit"] {
    width: 62px !important;
    min-width: 62px !important;

    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
  }

  /*
   * Direkt an der TGMarkt-Navigation:
   * kein weißer Zwischenbereich unter dem Composer.
   */
  body.tg-im-mobile-web-chat .tg-im-chat-main {
    padding-bottom: 0 !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-history {
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
    scroll-padding-bottom: 4px !important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-shell {
    padding-bottom: 0 !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.10 — Full Width Mobile Composer
 * Eingabe auf Mobil über die komplette verfügbare Inhaltsbreite.
 * Icons bleiben innerhalb des Eingabebereichs.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-composer-inner,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-message-input-wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.12 — Mobile Composer balanced
 * Breiter als zuvor, aber mit sauberem Seitenabstand.
 * Büroklammer + Senden bleiben feste Grid-Spalten.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 54px 62px !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-send-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer button[type="submit"] {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.13 — Mobile Composer: fast volle Breite
 * Icon bleibt sichtbar; nur der äußere Seitenabstand wird reduziert.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 54px 62px !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-attach-button,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-attach,
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .im-file-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.14 — Mobile Composer edge-to-edge + direkt am Footer
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    bottom: var(--tg-mobile-nav-height, 72px) !important;
    box-sizing: border-box !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1fr) 54px 62px !important;
    box-sizing: border-box !important;
  }

  /* Kein künstlicher Leerraum zwischen Composer und mobiler Navigation */
  body.tg-im-mobile-web-chat .tg-im-chat-pane,
  body.tg-im-mobile-web-chat .tg-im-chat-messages,
  body.tg-im-mobile-web-chat .im-messages {
    margin-bottom: 0 !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.15 — Composer bündig an mobiles Footer-Menü
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    margin-bottom: 0 !important;
    bottom: var(--tg-mobile-nav-height, 72px) !important;
    transform: translateY(0) !important;
  }

  /* Eventuelle Wrapper-Abstände unter dem Composer entfernen */
  body.tg-im-mobile-web-chat .tg-im-chat-composer-wrap,
  body.tg-im-mobile-web-chat .tg-im-composer-wrap,
  body.tg-im-mobile-web-chat .im-compose-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Chatbereich endet direkt am Composer/Footer */
  body.tg-im-mobile-web-chat .tg-im-chat-pane,
  body.tg-im-mobile-web-chat .tg-im-chat-main {
    padding-bottom: 0 !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.16 — Composer wirklich direkt über Mobile-Footer
 * 2.10.15 entfernte Padding, positionierte den Composer aber nicht
 * am sichtbaren Footer. Jetzt viewport-fixed direkt darüber.
 * ================================================================ */
@media screen and (max-width: 899px) {
  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    bottom: var(--tg-mobile-nav-height, 72px) !important;
    z-index: 10020 !important;
    transform: none !important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer .tg-im-compose-main {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Nachrichten bekommen nur den Platz, den der fixierte Composer braucht,
     damit die letzte Nachricht nicht darunter verschwindet. */
  body.tg-im-mobile-web-chat .tg-im-chat-messages,
  body.tg-im-mobile-web-chat .im-messages {
    padding-bottom: 86px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.17 — Mobile Übersicht + Desktop Avatar
 * ================================================================ */

/* Mobile Nachrichtenübersicht: konsequent linksbündig + Papierkorb rechts */
@media screen and (max-width: 899px) {
  .im-file-threads .im-table-row,
  .im-file-threads .im-col-12.no-img,
  .im-file-threads .tg-im-mobile-thread-summary {
    text-align: left !important;
  }

  .im-file-threads .im-table-row {
    justify-content: flex-start !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary {
    position: relative !important;
    padding-right: 42px !important;
    margin: 0 !important;
  }

  .im-file-threads .tg-im-mobile-thread-item,
  .im-file-threads .tg-im-mobile-thread-user,
  .im-file-threads .tg-im-mobile-thread-lastseen {
    text-align: left !important;
  }

  .im-file-threads .tg-im-mobile-thread-remove {
    display: inline-flex !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9aa1a9 !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    z-index: 5 !important;
  }

  .im-file-threads .tg-im-mobile-thread-remove i {
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
}

/* Desktop-Web: Profilbild des Nachrichten-Absenders wieder sichtbar */
@media screen and (min-width: 900px) {
  body:not(.tg-im-embedded) .im-message .im-profile-img,
  body:not(.tg-im-embedded) .im-message .im-message-avatar,
  body:not(.tg-im-embedded) .im-message .im-avatar,
  body:not(.tg-im-embedded) .im-message img.im-profile-img,
  body:not(.tg-im-embedded) .tg-im-chat-history .im-profile-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body:not(.tg-im-embedded) .tg-im-chat-history .im-message {
    overflow: visible !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.18 — etwas Abstand zwischen Profilbild und Text
 * Nur mobile Nachrichtenübersicht.
 * ================================================================ */
@media screen and (max-width: 899px) {
  .im-file-threads .tg-im-mobile-thread-summary {
    column-gap: 12px !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary .im-profile-img,
  .im-file-threads .tg-im-mobile-thread-summary .im-avatar,
  .im-file-threads .tg-im-mobile-thread-summary img {
    margin-right: 12px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.19 — Mobile Nachrichtenübersicht:
 * Textblock sichtbar vom Profilbild abrücken.
 * ================================================================ */
@media screen and (max-width: 899px) {
  /* Nicht das Bild verschieben, sondern den eigentlichen Textblock. */
  .im-file-threads .tg-im-mobile-thread-summary {
    display: block !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary .tg-im-mobile-thread-item,
  .im-file-threads .tg-im-mobile-thread-summary .tg-im-mobile-thread-user,
  .im-file-threads .tg-im-mobile-thread-summary .tg-im-mobile-thread-lastseen {
    margin-left: 18px !important;
    padding-left: 0 !important;
  }

  /* Falls die drei Zeilen in einem gemeinsamen Textcontainer liegen. */
  .im-file-threads .tg-im-mobile-thread-summary .tg-im-mobile-thread-text,
  .im-file-threads .tg-im-mobile-thread-summary .im-thread-text,
  .im-file-threads .tg-im-mobile-thread-summary .im-thread-data {
    margin-left: 18px !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.20 — Online / Presence
 * ================================================================ */
.tg-im-avatar-presence {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
}

.tg-im-avatar-presence .im-profile-img {
  margin: 0 !important;
}

.tg-im-online-dot {
  position: absolute !important;
  right: -1px !important;
  bottom: 2px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #32c44a !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  z-index: 6 !important;
}

.im-file-threads .tg-im-avatar-presence {
  margin-right: 14px !important;
}

.im-file-threads .tg-im-avatar-presence .im-profile-img {
  margin-right: 0 !important;
}

/* Online text may be highlighted subtly. */
.tg-im-thread-lastseen {
  min-height: 14px !important;
}


/* ================================================================
 * TGMarkt 2.10.21 — Web Nachrichtenübersicht mit Presence
 * ================================================================ */
@media screen and (min-width: 900px) {
  .im-file-threads .tg-im-web-thread-summary {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  .im-file-threads .tg-im-web-avatar-presence {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .im-file-threads .tg-im-web-avatar-presence img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  .im-file-threads .tg-im-web-avatar-presence .tg-im-online-dot {
    right: -1px !important;
    bottom: 1px !important;
    width: 10px !important;
    height: 10px !important;
  }

  .im-file-threads .tg-im-web-thread-copy {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .im-file-threads .tg-im-web-thread-copy strong,
  .im-file-threads .tg-im-web-thread-copy span,
  .im-file-threads .tg-im-web-thread-copy small {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .im-file-threads .tg-im-web-thread-copy strong {
    color: #171b20 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  .im-file-threads .tg-im-web-thread-copy span {
    margin-top: 3px !important;
    color: #555e68 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .im-file-threads .tg-im-web-thread-copy small {
    margin-top: 2px !important;
    color: #929aa3 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /*
   * In der ersten Tabellenzelle ersetzen wir die alte Titel/Avatar-Darstellung
   * durch die neue kompakte Presence-Zeile. Die restlichen Spalten
   * (Nachrichten, Markierung, Benachrichtigen) bleiben erhalten.
   */
  .im-file-threads .im-table-row .im-col-12.no-img > .im-profile-img,
  .im-file-threads .im-table-row .im-col-12.no-img > .tg-im-avatar-presence,
  .im-file-threads .im-table-row .im-col-12.no-img > .im-line {
    display: none !important;
  }

  .im-file-threads .tg-im-mobile-thread-summary,
  .im-file-threads .tg-im-mobile-thread-remove {
    display: none !important;
  }
}

@media screen and (max-width: 899px) {
  .im-file-threads .tg-im-web-thread-summary {
    display: none !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.22 — Web Übersicht: Sperren + Löschen
 * ================================================================ */
@media screen and (min-width: 900px) {
  .im-file-threads .im-table-row {
    position: relative !important;
  }

  .im-file-threads .tg-im-web-thread-summary {
    padding-right: 86px !important;
  }

  .im-file-threads .tg-im-web-thread-actions {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    z-index: 20 !important;
  }

  .im-file-threads .tg-im-web-thread-action {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    color: #9aa1a9 !important;
    background: transparent !important;
  }

  .im-file-threads .tg-im-web-thread-action i {
    display: inline-block !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .im-file-threads .tg-im-web-thread-block:hover {
    color: #d39a00 !important;
    background: #fff7df !important;
  }

  .im-file-threads .tg-im-web-thread-remove:hover {
    color: #d7263d !important;
    background: #fff0f2 !important;
  }
}

@media screen and (max-width: 899px) {
  .im-file-threads .tg-im-web-thread-actions {
    display: none !important;
  }
}


/* ================================================================
 * TGMarkt 2.10.23 — Chat/User Meldungen
 * ================================================================ */
.tg-im-report-tools{display:flex!important;justify-content:flex-end!important;margin:8px 0!important;}
.tg-im-report-open{
  border:1px solid #d9dee5!important;background:#fff!important;color:#555e68!important;
  border-radius:9px!important;padding:7px 10px!important;font-size:12px!important;cursor:pointer!important;
}
.tg-im-report-modal{position:fixed!important;inset:0!important;z-index:99999!important;display:none!important;}
.tg-im-report-modal.open{display:block!important;}
.tg-im-report-backdrop{position:absolute!important;inset:0!important;background:rgba(0,0,0,.38)!important;}
.tg-im-report-card{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:min(92vw,480px)!important;box-sizing:border-box!important;background:#fff!important;border-radius:16px!important;
  padding:16px!important;box-shadow:0 16px 48px rgba(0,0,0,.22)!important;
}
.tg-im-report-head{display:flex!important;justify-content:space-between!important;align-items:center!important;}
.tg-im-report-head strong{font-size:16px!important;}
.tg-im-report-head button{border:0!important;background:#eef1f4!important;width:30px!important;height:30px!important;border-radius:50%!important;}
.tg-im-report-card>p{font-size:12px!important;color:#68717c!important;}
.tg-im-report-card>label{display:flex!important;align-items:center!important;gap:9px!important;min-height:38px!important;border-bottom:1px solid #edf0f3!important;}
.tg-im-report-card textarea{width:100%!important;box-sizing:border-box!important;margin:10px 0!important;padding:10px!important;font-size:16px!important;}
.tg-im-report-submit{width:100%!important;min-height:42px!important;border:0!important;border-radius:9px!important;background:#222!important;color:#fff!important;font-weight:700!important;}
.tg-im-report-result{margin-top:8px!important;font-size:12px!important;color:#555e68!important;}
.tg-im-review-pending{
  display:flex!important;flex-direction:column!important;gap:3px!important;
  margin:10px 0!important;padding:12px 14px!important;background:#eef1f5!important;border:1px solid #cdd4dc!important;
  border-radius:9px!important;color:#515963!important;
}
.tg-im-review-pending strong{color:#323840!important;font-size:13px!important;}
.tg-im-review-pending span{font-size:11px!important;}

@media(max-width:899px){
  .tg-im-report-card{top:auto!important;bottom:74px!important;transform:translateX(-50%)!important;width:calc(100vw - 20px)!important;}
}


/* TGMarkt 2.10.24 – gemeldete Unterhaltung in Übersicht */
.im-file-threads .tg-im-review-pending-row{
  background:#f1f3f5 !important;
  opacity:.72 !important;
}
.im-file-threads .tg-im-review-pending-row .tg-im-web-thread-copy small,
.im-file-threads .tg-im-review-pending-row .tg-im-mobile-thread-lastseen{
  color:#8a6410 !important;
  font-weight:800 !important;
}


/* =========================================================
   TGMarkt Messenger 2.10.25
   Ungelesene Nachrichten pro Unterhaltung
   ========================================================= */

body .im-threads .tg-im-web-thread-title-line {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

body .im-threads .tg-im-web-thread-title-text {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body .im-threads .tg-im-thread-unread-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#ef2b75;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}

body .im-threads .im-table-row.im-unread .tg-im-web-thread-summary {
  font-weight:600;
}

body .im-threads .tg-im-web-message-count {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}

body .im-threads .tg-im-unread-inline {
  display:inline-block;
  color:#ef2b75;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
}

body .im-threads .tg-im-mobile-thread-item {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

body .im-threads .tg-im-mobile-thread-item > span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

body .im-threads .tg-im-thread-unread-badge-mobile {
  min-width:21px;
  height:21px;
  font-size:10px;
}

@media(max-width:767px) {
  body .im-threads .tg-im-thread-unread-badge {
    min-width:20px;
    height:20px;
    padding:0 5px;
    font-size:10px;
  }
}


/* =========================================================
   TGMarkt Messenger 2.10.26
   Kompakter Unread-Badge + Detailansicht + Melden
   ========================================================= */

/* Übersicht: der Zähler ist ein echter kleiner Kreis, nie ein langer Balken. */
body .im-threads .tg-im-thread-unread-badge {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 22px !important;
  float:none !important;
  position:static !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  height:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  margin:0 0 0 6px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  background:#ef2b75 !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:22px !important;
  font-weight:800 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

/* Falls 99+ angezeigt wird: etwas breiter, aber weiterhin kompakt. */
body .im-threads .tg-im-thread-unread-badge:not(:empty) {
  vertical-align:middle !important;
}

/* Detailansicht links: Titel + Ungelesen-Zähler. */
body .tg-im-thread-sidebar .tg-im-thread-item-title {
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  width:100% !important;
}

body .tg-im-thread-sidebar .tg-im-thread-item-title-text {
  display:block !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

body .tg-im-thread-sidebar .tg-im-detail-unread-badge {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 20px !important;
  width:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  background:#ef2b75 !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:20px !important;
  font-weight:800 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/*
 * Meldebutton im rechten Chatbereich.
 * Der Block muss ein normaler fixer Flex-Abschnitt sein und darf nicht vom
 * scrollbaren Nachrichtenbereich verschluckt werden.
 */
body .tg-im-chat-main > .tg-im-report-tools-visible {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:100% !important;
  min-height:34px !important;
  margin:5px 0 6px !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:30 !important;
  overflow:visible !important;
}

body .tg-im-chat-main .tg-im-report-open {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:30px !important;
  margin:0 !important;
  padding:5px 10px !important;
  border:1px solid #d8dde3 !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#606874 !important;
  font-size:11px !important;
  line-height:18px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

body .tg-im-chat-main .tg-im-report-open:hover {
  border-color:#ef2b75 !important;
  color:#ef2b75 !important;
  background:#fff7fa !important;
}

body .tg-im-chat-main .tg-im-report-open i {
  color:#ef2b75 !important;
  font-size:12px !important;
}

/* Report modal itself must remain above chat/sidebar. */
body .tg-im-report-modal {
  z-index:99999 !important;
}

@media screen and (max-width:899px) {
  body .tg-im-chat-main > .tg-im-report-tools-visible {
    justify-content:flex-start !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* TGMarkt – Nachrichtenzahl rechts direkt oberhalb Löschen */
body .tg-im-thread-sidebar .tg-im-thread-right-actions {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  gap:7px !important;
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  margin-left:auto !important;
}

body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-detail-unread-badge-right {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:static !important;
  float:none !important;
  width:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#ef2b75 !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:20px !important;
  font-weight:800 !important;
  box-sizing:border-box !important;
}

body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-thread-remove {
  position:static !important;
  inset:auto !important;
  float:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}


/* TGMarkt – kompakte rechte Aktionsspalte in der Detail-Unterhaltungsliste */
body .tg-im-thread-sidebar .tg-im-thread-row {
  position:relative !important;
  min-height:0 !important;
}

body .tg-im-thread-sidebar .tg-im-thread-row > a.tg-im-thread-link {
  min-height:0 !important;
  padding-right:46px !important;
}

/* Zähler + Papierkorb kompakt als Einheit rechts mittig ausrichten */
body .tg-im-thread-sidebar .tg-im-thread-right-actions {
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  width:24px !important;
  min-width:24px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  z-index:5 !important;
}

/* Kleiner runder Nachrichten-Zähler direkt über Löschen */
body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-detail-unread-badge-right {
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 19px !important;
  width:19px !important;
  min-width:19px !important;
  max-width:19px !important;
  height:19px !important;
  min-height:19px !important;
  max-height:19px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  font-size:10px !important;
  line-height:19px !important;
}

/* Papierkorb unmittelbar darunter */
body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-thread-remove {
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:20px !important;
}

/* Ohne ungelesene Nachrichten bleibt nur der Papierkorb sauber mittig rechts. */
body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-thread-remove i {
  margin:0 !important;
}


/* TGMarkt – Feintuning: etwas mehr Abstand zwischen Zähler und Löschen */
body .tg-im-thread-sidebar .tg-im-thread-right-actions {
  gap:7px !important;
}


/* TGMarkt – Feintuning: Papierkorb etwas weiter nach unten */
body .tg-im-thread-sidebar .tg-im-thread-right-actions .tg-im-thread-remove {
  transform: translateY(4px) !important;
}


/* TGMarkt – Übersicht: Ungelesen-Zähler direkt vor Benutzer blockieren */
body .im-threads .tg-im-overview-unread-before-block {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important;
  width:20px !important;
  min-width:20px !important;
  max-width:20px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
  margin:0 10px 0 0 !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#ef2b75 !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:20px !important;
  font-weight:800 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* Den alten Badge am Unterhaltungstitel in der Desktop-Übersicht ausblenden,
   damit die Anzahl nur noch bei den Aktionen erscheint. */
body .im-threads .tg-im-web-thread-title-line > .tg-im-thread-unread-badge {
  display:none !important;
}


/* =========================================================
   TGMarkt – Mobile Nachrichtenübersicht
   1) Ungelesen-Zähler über Löschen
   2) Benutzerbild mobil sichtbar
   ========================================================= */

@media screen and (max-width: 899px) {

  /* Thread-Zeile als Bezugspunkt für rechte Aktionen */
  body .im-threads .im-table-row,
  body .im-threads .im-thread,
  body .im-threads .tg-im-web-thread-row {
    position:relative !important;
  }

  /*
   * Mobil: vorhandenen Badge am Titel lösen und rechts direkt
   * oberhalb des Papierkorbs platzieren.
   */
  body .im-threads .tg-im-thread-unread-badge {
    display:inline-flex !important;
    position:absolute !important;
    top:43px !important;
    right:27px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:20 !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    align-items:center !important;
    justify-content:center !important;
    background:#ef2b75 !important;
    color:#fff !important;
    font-size:10px !important;
    line-height:20px !important;
    font-weight:800 !important;
    box-sizing:border-box !important;
  }

  /*
   * Desktop-spezifischer Badge vor Blockieren soll mobil nicht zusätzlich
   * erscheinen. Mobil verwenden wir den bestehenden Thread-Badge oben.
   */
  body .im-threads .tg-im-overview-unread-before-block {
    display:none !important;
  }

  /*
   * Benutzerbild mobil wieder einblenden.
   * Das Plugin/Theme versteckt Avatar-Container in schmaler Ansicht teilweise.
   */
  body .im-threads .im-user-picture,
  body .im-threads .im-user-img,
  body .im-threads .im-avatar,
  body .im-threads .user-img,
  body .im-threads .tg-im-avatar,
  body .im-threads .tg-im-thread-avatar {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    overflow:hidden !important;
    border-radius:50% !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body .im-threads .im-user-picture img,
  body .im-threads .im-user-img img,
  body .im-threads .im-avatar img,
  body .im-threads .user-img img,
  body .im-threads .tg-im-avatar img,
  body .im-threads .tg-im-thread-avatar img {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    object-fit:cover !important;
    border-radius:50% !important;
  }
}

@media screen and (max-width:899px) {
  body .im-threads .tg-im-mobile-thread-summary {
    position:relative !important;
    padding-left:86px !important;
    padding-right:55px !important;
  }
  body .im-threads .tg-im-mobile-avatar-presence {
    display:flex !important;
    position:absolute !important;
    left:45px !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    z-index:8 !important;
  }
  body .im-threads .tg-im-mobile-avatar-img {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:#f1f3f5 !important;
  }
  body .im-threads .tg-im-mobile-avatar-presence .tg-im-online-dot {
    position:absolute !important;
    right:-1px !important;
    bottom:1px !important;
    width:9px !important;
    height:9px !important;
    border:2px solid #fff !important;
    border-radius:50% !important;
    z-index:10 !important;
  }

  /* Mobile unread badge: same right axis as trash, above it */
  body .im-threads .tg-im-thread-unread-badge-mobile {
    position:absolute !important;
    top:32px !important;
    right:27px !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:30 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
  }
  body .im-threads .tg-im-overview-unread-before-block {
    display:none !important;
  }
}


/* =========================================================
   TGMarkt – Mobile Nachrichtenübersicht sauber ausrichten
   ========================================================= */
@media screen and (max-width:899px) {

  /* Alte Desktop-/Legacy-Avataranzeige mobil komplett ausblenden.
     Dadurch verschwindet auch der doppelte grüne Online-Punkt links. */
  body .im-threads .im-col-12.no-img > .tg-im-avatar-presence,
  body .im-threads .im-col-12.no-img > .im-profile-img,
  body .im-threads .tg-im-web-thread-summary {
    display:none !important;
  }

  /* Jede Unterhaltung wieder kompakt und gleich hoch. */
  body .im-threads .im-table-row {
    position:relative !important;
    min-height:106px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  body .im-threads .im-col-12.no-img {
    width:100% !important;
    min-height:106px !important;
    padding:0 !important;
    position:relative !important;
  }

  /* Mobile Zeile nimmt die ganze Breite ein. */
  body .im-threads .tg-im-mobile-thread-summary {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    position:relative !important;
    width:100% !important;
    min-height:106px !important;
    margin:0 !important;
    padding:14px 58px 14px 88px !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
  }

  /* Avatar links, nicht mehr zu weit eingerückt. */
  body .im-threads .tg-im-mobile-avatar-presence {
    display:flex !important;
    position:absolute !important;
    left:54px !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:8 !important;
  }

  body .im-threads .tg-im-mobile-avatar-img {
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* Textblock sauber linksbündig und nicht unnötig nach rechts verschoben. */
  body .im-threads .tg-im-mobile-thread-item,
  body .im-threads .tg-im-mobile-thread-user,
  body .im-threads .tg-im-mobile-thread-lastseen {
    width:auto !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
    text-align:left !important;
  }

  body .im-threads .tg-im-mobile-thread-item {
    display:block !important;
    position:static !important;
    margin:0 0 2px 0 !important;
    line-height:18px !important;
  }

  body .im-threads .tg-im-mobile-thread-user {
    display:block !important;
    margin:0 0 1px 0 !important;
    line-height:17px !important;
  }

  body .im-threads .tg-im-mobile-thread-lastseen {
    display:block !important;
    margin:0 !important;
    line-height:16px !important;
  }

  /*
   * Rechte Aktionsspalte:
   * Zähler oben, Papierkorb darunter, beide auf derselben Achse.
   */
  body .im-threads .tg-im-thread-unread-badge-mobile {
    position:absolute !important;
    top:31px !important;
    right:25px !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    z-index:30 !important;
  }

  /* Bestehender Papierkorb rechts mittig/unten. */
  body .im-threads .tg-im-web-thread-actions {
    display:flex !important;
    position:absolute !important;
    top:50% !important;
    right:20px !important;
    transform:translateY(-50%) !important;
    width:30px !important;
    height:64px !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 0 5px 0 !important;
    z-index:25 !important;
  }

  body .im-threads .tg-im-web-thread-actions .tg-im-web-thread-block,
  body .im-threads .tg-im-web-thread-actions .tg-im-overview-unread-before-block {
    display:none !important;
  }

  body .im-threads .tg-im-web-thread-actions .tg-im-web-thread-remove {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    width:24px !important;
    height:24px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Active/ungelesene Zeile behält nur den linken pinken Streifen. */
  body .im-threads .im-table-row.im-unread {
    box-sizing:border-box !important;
  }
}


/* =========================================================
   TGMarkt – Mobile Feintuning NUR Nachrichtenanzahl + Löschen
   ========================================================= */
@media screen and (max-width:899px) {

  /* Den sichtbaren Papierkorb sauber rechts mittig platzieren. */
  body .im-threads .tg-im-web-thread-actions {
    position:absolute !important;
    top:50% !important;
    right:18px !important;
    transform:translateY(-50%) !important;
    width:28px !important;
    height:56px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    padding:0 !important;
    margin:0 !important;
    z-index:25 !important;
  }

  body .im-threads .tg-im-web-thread-actions .tg-im-web-thread-remove {
    position:absolute !important;
    right:2px !important;
    bottom:4px !important;
    width:24px !important;
    height:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  /* Falls ein zusätzliches mobiles/Legacy-Löschsymbol existiert, ausblenden. */
  body .im-threads .tg-im-mobile-thread-remove,
  body .im-threads .tg-im-thread-remove-mobile {
    display:none !important;
  }

  /* Anzahl exakt oberhalb des Papierkorbs auf derselben Achse. */
  body .im-threads .tg-im-thread-unread-badge-mobile {
    position:absolute !important;
    top:auto !important;
    right:20px !important;
    bottom:58px !important;
    left:auto !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    height:20px !important;
    min-height:20px !important;
    max-height:20px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    z-index:31 !important;
  }
}


/* ============================================================
   TGAnzeigen Instant Messenger 2.11.0 – Sprachnachrichten
   ============================================================ */
#im-message-form .tg-im-voice-button {
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  border:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef0f3;
  color:#515861;
  cursor:pointer;
  font-size:17px;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}

#im-message-form .tg-im-voice-button:hover {
  background:#e1e5e9;
}

#im-message-form .tg-im-voice-button.is-recording {
  background:#e53935;
  color:#fff;
  animation:tgImVoicePulse 1.1s infinite;
}

#im-message-form .tg-im-voice-button.is-sending {
  opacity:.55;
  cursor:wait;
}

#im-message-form .tg-im-voice-state {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  min-width:62px;
  height:34px;
  padding:0 7px;
  color:#555;
  font-size:12px;
  font-weight:700;
}

#im-message-form .tg-im-voice-state[hidden] {
  display:none!important;
}

#im-message-form .tg-im-record-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e53935;
}

#im-message-form .tg-im-voice-cancel {
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#777;
  cursor:pointer;
  padding:0;
}

.tg-im-voice-message {
  display:flex;
  align-items:center;
  gap:9px;
  width:min(100%, 330px);
  margin:2px 0;
}

.tg-im-voice-message .tg-im-voice-icon {
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.07);
}

.tg-im-voice-message audio {
  display:block;
  width:270px;
  max-width:calc(100% - 38px);
  height:36px;
}

@keyframes tgImVoicePulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.08); }
}

@media screen and (max-width:767px) {
  #im-message-form .tg-im-voice-button {
    flex-basis:36px;
    width:36px;
    min-width:36px;
    height:36px;
  }

  #im-message-form .tg-im-voice-state {
    min-width:55px;
    padding:0 4px;
    gap:5px;
  }

  .tg-im-voice-message {
    width:100%;
  }

  .tg-im-voice-message audio {
    width:235px;
  }
}


/* TGAnzeigen 2.11.1 – Mikrofon sichtbar im kompakten Composer */
#im-message-form .tg-im-voice-button {
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  margin:0 4px!important;
  padding:0!important;
  position:relative!important;
  z-index:5!important;
  border:0!important;
  border-radius:9px!important;
  align-items:center!important;
  justify-content:center!important;
  background:#eef0f3!important;
  color:#535b65!important;
}

#im-message-form .tg-im-voice-button i {
  display:block!important;
  font-size:16px!important;
  line-height:1!important;
}

#im-message-form .tg-im-voice-button.is-recording {
  background:#e53935!important;
  color:#fff!important;
}

#im-message-form .tg-im-voice-state {
  position:absolute!important;
  right:90px!important;
  bottom:48px!important;
  z-index:30!important;
  background:#fff!important;
  border:1px solid #e2e5e8!important;
  border-radius:10px!important;
  box-shadow:0 5px 18px rgba(0,0,0,.12)!important;
  padding:5px 8px!important;
}

@media screen and (max-width:767px) {
  #im-message-form .tg-im-voice-button {
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    margin:0 3px!important;
  }
}


/* ============================================================
   TGAnzeigen Instant Messenger 2.11.2
   Composer-Reihenfolge: Nachrichtenfeld | Senden | Büroklammer | Mikrofon
   ============================================================ */
#im-message-form .tg-im-compose-main {
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}

/* Textfeld bleibt ganz links */
#im-message-form #im-message {
  order:1!important;
  flex:1 1 auto!important;
  min-width:0!important;
}

/* Senden direkt hinter dem Nachrichtenfeld */
#im-message-form .tg-im-send-button,
#im-message-form button[type="submit"].im-button-green {
  order:2!important;
  flex:0 0 auto!important;
}

/* Bestehender Anhang-/Büroklammer-Bereich danach */
#im-message-form .im-file,
#im-message-form .im-attachment,
#im-message-form .tg-im-attachment,
#im-message-form label[for="im-file"],
#im-message-form .im-file-box {
  order:3!important;
  flex:0 0 auto!important;
}

/* Mikrofon ganz rechts */
#im-message-form .tg-im-voice-button {
  order:4!important;
  flex:0 0 38px!important;
  margin-left:4px!important;
  margin-right:0!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
}

/* Aufnahmeinfo darf die Reihenfolge der Buttons nicht verschieben */
#im-message-form .tg-im-voice-state {
  order:5!important;
}

@media screen and (max-width:767px) {
  #im-message-form .tg-im-compose-main {
    gap:4px!important;
  }

  #im-message-form .tg-im-voice-button {
    flex-basis:36px!important;
    margin-left:0!important;
  }
}

/* TGAnzeigen 2.11.3 – finale horizontale Composer-Anordnung */
#im-message-form .tg-im-compose-main{
 display:flex!important;flex-flow:row nowrap!important;align-items:center!important;width:100%!important;
}
#im-message-form #im-message{order:1!important;flex:1 1 0!important;min-width:0!important;}
#im-message-form #tgImSendButton,#im-message-form .tg-im-send-button{
 order:2!important;position:static!important;float:none!important;transform:none!important;flex:0 0 auto!important;margin:0 0 0 6px!important;
}
#im-message-form .tg-im-attach-button{
 order:3!important;position:static!important;float:none!important;transform:none!important;flex:0 0 38px!important;
 width:38px!important;min-width:38px!important;height:38px!important;margin:0 0 0 6px!important;
}
#im-message-form #tgImVoiceButton{
 order:4!important;position:static!important;float:none!important;transform:none!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
 flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;margin:0 0 0 6px!important;
}
#im-message-form #tgImVoiceState{position:absolute!important;right:0!important;bottom:46px!important;z-index:30!important;}
@media(max-width:767px){
 #im-message-form #tgImSendButton,#im-message-form .tg-im-send-button,#im-message-form .tg-im-attach-button,#im-message-form #tgImVoiceButton{margin-left:4px!important;}
 #im-message-form .tg-im-attach-button,#im-message-form #tgImVoiceButton{flex-basis:36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;}
}

/* ============================================================
   TGAnzeigen 2.11.4
   Textfeld höher | Senden gleich hoch | Büroklammer + Mikro untereinander
   ============================================================ */
#im-message-form .tg-im-compose-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 38px!important;
  grid-template-rows:26px 26px!important;
  column-gap:6px!important;
  row-gap:4px!important;
  align-items:stretch!important;
}

/* Eingabefeld: beide Reihen = 56px Gesamthöhe */
#im-message-form #im-message{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  order:initial!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  box-sizing:border-box!important;
  resize:none!important;
}

/* Senden: exakt gleiche Gesamthöhe wie Eingabefeld */
#im-message-form #tgImSendButton,
#im-message-form .tg-im-send-button{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  order:initial!important;
  height:56px!important;
  min-height:56px!important;
  align-self:stretch!important;
  margin:0!important;
  position:static!important;
}

/* Büroklammer oben rechts */
#im-message-form .tg-im-attach-button{
  grid-column:3!important;
  grid-row:1!important;
  order:initial!important;
  width:38px!important;
  min-width:38px!important;
  height:26px!important;
  min-height:26px!important;
  margin:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* Mikrofon direkt darunter */
#im-message-form #tgImVoiceButton{
  grid-column:3!important;
  grid-row:2!important;
  order:initial!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:26px!important;
  min-height:26px!important;
  margin:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border-radius:7px!important;
}

/* Aufnahmeinfo oberhalb der rechten Buttons */
#im-message-form #tgImVoiceState{
  position:absolute!important;
  right:0!important;
  bottom:64px!important;
  z-index:30!important;
}

@media(max-width:767px){
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) auto 36px!important;
    grid-template-rows:26px 26px!important;
    column-gap:4px!important;
    row-gap:4px!important;
  }
  #im-message-form #im-message,
  #im-message-form #tgImSendButton,
  #im-message-form .tg-im-send-button{
    height:56px!important;
    min-height:56px!important;
  }
  #im-message-form .tg-im-attach-button,
  #im-message-form #tgImVoiceButton{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:26px!important;
    min-height:26px!important;
    margin:0!important;
  }
}

/* ============================================================
   TGAnzeigen 2.11.5 – finale Anordnung
   LINKS: Textfeld volle Höhe
   RECHTS: Senden oben | Büroklammer unten | Mikrofon unten
   ============================================================ */
#im-message-form .tg-im-compose-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px 42px!important;
  grid-template-rows:30px 30px!important;
  gap:4px!important;
  align-items:stretch!important;
  width:100%!important;
}

/* Textfeld links über die volle Höhe */
#im-message-form #im-message{
  grid-column:1!important;
  grid-row:1 / 3!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  box-sizing:border-box!important;
  resize:none!important;
}

/* Senden rechts oben, über beide kleinen Button-Spalten */
#im-message-form #tgImSendButton,
#im-message-form .tg-im-send-button{
  grid-column:2 / 4!important;
  grid-row:1!important;
  width:88px!important;
  min-width:88px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* Büroklammer unten links */
#im-message-form .tg-im-attach-button{
  grid-column:2!important;
  grid-row:2!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* Mikrofon unten rechts */
#im-message-form #tgImVoiceButton{
  grid-column:3!important;
  grid-row:2!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  transform:none!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
}

/* Aufnahmeinfo oberhalb der rechten Bedienung */
#im-message-form #tgImVoiceState{
  position:absolute!important;
  right:0!important;
  bottom:72px!important;
  z-index:30!important;
}

@media(max-width:767px){
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) 38px 38px!important;
    grid-template-rows:30px 30px!important;
    gap:4px!important;
  }
  #im-message-form #im-message{
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
  }
  #im-message-form #tgImSendButton,
  #im-message-form .tg-im-send-button{
    width:80px!important;
    min-width:80px!important;
    height:30px!important;
    min-height:30px!important;
  }
  #im-message-form .tg-im-attach-button,
  #im-message-form #tgImVoiceButton{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:30px!important;
    min-height:30px!important;
  }
}

/* TGAnzeigen 2.11.6
   Textfeld | SENDEN volle Höhe | rechts Büroklammer/Mikro übereinander */
#im-message-form .tg-im-compose-main{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 54px 38px!important;
 grid-template-rows:30px 30px!important;
 gap:4px!important;
 align-items:stretch!important;
 width:100%!important;
}
#im-message-form #im-message{
 grid-column:1!important;grid-row:1 / 3!important;
 height:64px!important;min-height:64px!important;max-height:64px!important;
 margin:0!important;box-sizing:border-box!important;resize:none!important;
}
#im-message-form #tgImSendButton,
#im-message-form .tg-im-send-button{
 grid-column:2!important;grid-row:1 / 3!important;
 width:54px!important;min-width:54px!important;height:64px!important;min-height:64px!important;
 margin:0!important;padding:0!important;position:static!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box!important;transform:none!important;
}
#im-message-form .tg-im-attach-button{
 grid-column:3!important;grid-row:1!important;
 width:38px!important;min-width:38px!important;max-width:38px!important;
 height:30px!important;min-height:30px!important;margin:0!important;padding:0!important;
 position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box!important;transform:none!important;
}
#im-message-form #tgImVoiceButton{
 grid-column:3!important;grid-row:2!important;
 width:38px!important;min-width:38px!important;max-width:38px!important;
 height:30px!important;min-height:30px!important;margin:0!important;padding:0!important;
 position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box!important;transform:none!important;
 top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
}
#im-message-form #tgImVoiceState{
 position:absolute!important;right:0!important;bottom:72px!important;z-index:30!important;
}
@media(max-width:767px){
 #im-message-form .tg-im-compose-main{
  grid-template-columns:minmax(0,1fr) 50px 36px!important;
  grid-template-rows:30px 30px!important;gap:4px!important;
 }
 #im-message-form #tgImSendButton,#im-message-form .tg-im-send-button{
  width:50px!important;min-width:50px!important;height:64px!important;min-height:64px!important;
 }
 #im-message-form .tg-im-attach-button,#im-message-form #tgImVoiceButton{
  width:36px!important;min-width:36px!important;max-width:36px!important;
  height:30px!important;min-height:30px!important;margin:0!important;
 }
}

/* ============================================================
   TGAnzeigen 2.11.7 – doppelten Sendebutton beseitigen + finale Anordnung
   ============================================================ */

/* Der alte Legacy-Sendebutton darf niemals sichtbar werden. */
#im-message-form #tgImLegacySend,
#im-message-form .tg-im-legacy-send {
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  position:absolute!important;
  pointer-events:none!important;
}

/* Nur der echte sichtbare Sende-Button bekommt Layout-Regeln. */
#im-message-form .tg-im-compose-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px 38px!important;
  grid-template-rows:30px 30px!important;
  gap:4px!important;
  align-items:stretch!important;
  width:100%!important;
}

#im-message-form #im-message{
  grid-column:1!important;
  grid-row:1 / 3!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  box-sizing:border-box!important;
  resize:none!important;
}

/* ECHTER Senden-Button links neben Klammer/Mikro, volle Höhe. */
#im-message-form #tgImSendButton,
#im-message-form .tg-im-compose-main > .tg-im-send-button{
  grid-column:2!important;
  grid-row:1 / 3!important;
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* Text im roten Sendebutton ausblenden, nur Papierflieger zeigen. */
#im-message-form #tgImSendButton span,
#im-message-form .tg-im-compose-main > .tg-im-send-button span{
  display:none!important;
}

#im-message-form .tg-im-attach-button{
  grid-column:3!important;
  grid-row:1!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  transform:none!important;
}

#im-message-form #tgImVoiceButton{
  grid-column:3!important;
  grid-row:2!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  transform:none!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
}

#im-message-form #tgImVoiceState{
  position:absolute!important;
  right:0!important;
  bottom:72px!important;
  z-index:30!important;
}

@media(max-width:767px){
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) 50px 36px!important;
    grid-template-rows:30px 30px!important;
    gap:4px!important;
  }

  #im-message-form #tgImSendButton,
  #im-message-form .tg-im-compose-main > .tg-im-send-button{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:64px!important;
  }

  #im-message-form .tg-im-attach-button,
  #im-message-form #tgImVoiceButton{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
}

/* ============================================================
   TGAnzeigen 2.11.8
   Nur rechte Kleinbuttons korrigiert.
   Senden bleibt unverändert.
   ============================================================ */

/* Rechte Spalte etwas weiter nach rechts und klar getrennt. */
#im-message-form .tg-im-compose-main{
  grid-template-columns:minmax(0,1fr) 54px 40px!important;
  column-gap:6px!important;
}

/* Büroklammer: rechts oben */
#im-message-form .tg-im-attach-button{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:start!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
}

/* Mikrofon: exakt darunter */
#im-message-form #tgImVoiceButton{
  grid-column:3!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:end!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
}

@media(max-width:767px){
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) 50px 38px!important;
    column-gap:5px!important;
  }

  #im-message-form .tg-im-attach-button,
  #im-message-form #tgImVoiceButton{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}

/* TGAnzeigen 2.11.9 – rechte Buttons wirklich neben Senden stapeln.
   Sendebutton selbst bleibt unangetastet. */
#im-message-form .tg-im-compose-main{
  grid-template-columns:minmax(0,1fr) 54px 40px!important;
  grid-template-rows:30px 30px!important;
  gap:4px 6px!important;
  overflow:visible!important;
}

/* Alte Attachment-Positionierungen vollständig neutralisieren */
#im-message-form .tg-im-attach-button{
  grid-column:3!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  left:0!important;
  transform:none!important;
  translate:none!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  z-index:2!important;
}

/* Mikro exakt unter die Büroklammer */
#im-message-form #tgImVoiceButton{
  grid-column:3!important;
  grid-row:2!important;
  position:relative!important;
  inset:auto!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  left:0!important;
  transform:none!important;
  translate:none!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  z-index:2!important;
}

@media(max-width:767px){
 #im-message-form .tg-im-compose-main{
   grid-template-columns:minmax(0,1fr) 50px 38px!important;
   grid-template-rows:30px 30px!important;
   gap:4px 5px!important;
 }
 #im-message-form .tg-im-attach-button,
 #im-message-form #tgImVoiceButton{
   width:38px!important;
   min-width:38px!important;
   max-width:38px!important;
 }
}


/* ============================================================
   TGAnzeigen 2.12.0 – struktureller Composer-Fix
   HTML: Text | Send | [Attachment / Voice]
   ============================================================ */
#im-message-form .tg-im-compose-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px 40px!important;
  grid-template-rows:64px!important;
  gap:6px!important;
  align-items:stretch!important;
  width:100%!important;
  overflow:visible!important;
}

#im-message-form .tg-im-compose-text{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  height:64px!important;
}

#im-message-form .tg-im-compose-text #im-message{
  width:100%!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  box-sizing:border-box!important;
  resize:none!important;
}

/* Wrapper steuert nur Position; der Sende-Button selbst bleibt optisch unverändert. */
#im-message-form .tg-im-compose-send{
  grid-column:2!important;
  grid-row:1!important;
  width:54px!important;
  min-width:54px!important;
  height:64px!important;
  display:flex!important;
  align-items:stretch!important;
}

#im-message-form .tg-im-compose-send > #tgImSendButton,
#im-message-form .tg-im-compose-send > .tg-im-send-button{
  width:100%!important;
  height:100%!important;
  min-height:64px!important;
  margin:0!important;
  position:static!important;
}

/* Rechte Werkzeugspalte – jetzt tatsächlich gemeinsamer HTML-Container. */
#im-message-form .tg-im-compose-tools{
  grid-column:3!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:40px!important;
  grid-template-rows:30px 30px!important;
  gap:4px!important;
  width:40px!important;
  min-width:40px!important;
  height:64px!important;
  align-items:stretch!important;
}

#im-message-form .tg-im-compose-tools .tg-im-attach-button{
  grid-column:1!important;
  grid-row:1!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

#im-message-form .tg-im-compose-tools #tgImVoiceButton{
  grid-column:1!important;
  grid-row:2!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

#im-message-form #tgImVoiceState{
  position:absolute!important;
  right:0!important;
  bottom:72px!important;
  z-index:30!important;
}

@media(max-width:767px){
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) 50px 38px!important;
    gap:5px!important;
  }

  #im-message-form .tg-im-compose-send{
    width:50px!important;
    min-width:50px!important;
  }

  #im-message-form .tg-im-compose-tools{
    grid-template-columns:38px!important;
    width:38px!important;
    min-width:38px!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
}

/* ============================================================
   TGAnzeigen 2.12.1 – Attachment-Anzeige aus rechter Werkzeugspalte entfernen
   Sende-Button bleibt unverändert.
   ============================================================ */

/* In der rechten Spalte dürfen nur die zwei Symbolbuttons sichtbar sein. */
#im-message-form .tg-im-compose-tools{
  overflow:visible!important;
  font-size:0!important;
  line-height:0!important;
}

#im-message-form .tg-im-compose-tools > *:not(.tg-im-attach-button):not(#tgImVoiceButton){
  display:none!important;
}

/* Das native Datei-Input darf keinen Text / "Datei auswählen" erzeugen. */
#im-message-form .tg-im-compose-tools .tg-im-attach-button input[type="file"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Nur das Büroklammer-Symbol im oberen Button. */
#im-message-form .tg-im-compose-tools .tg-im-attach-button{
  overflow:hidden!important;
  white-space:nowrap!important;
  text-indent:0!important;
  font-size:0!important;
  line-height:30px!important;
}

#im-message-form .tg-im-compose-tools .tg-im-attach-button i,
#im-message-form .tg-im-compose-tools .tg-im-attach-button svg{
  display:inline-block!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Mikrofon analog sauber zentrieren. */
#im-message-form .tg-im-compose-tools #tgImVoiceButton{
  overflow:hidden!important;
  white-space:nowrap!important;
  font-size:0!important;
  line-height:30px!important;
}

#im-message-form .tg-im-compose-tools #tgImVoiceButton i,
#im-message-form .tg-im-compose-tools #tgImVoiceButton svg{
  display:inline-block!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Eventuell noch vorhandene alte Attachment-Anzeige außerhalb des Composers
   darf das Eingabefeld nicht mehr seitlich zusammendrücken. */
#im-message-form > .im-attachment,
#im-message-form .im-attachment:not(.tg-im-attach-button){
  display:none!important;
}

/* ============================================================
   TGAnzeigen 2.12.2 – farbliche Trennung der Werkzeug-Icons
   Sende-Button bleibt unverändert.
   ============================================================ */

/* Büroklammer: hellblauer Hintergrund + kräftiges Blau */
#im-message-form .tg-im-compose-tools .tg-im-attach-button{
  background:#eaf4ff!important;
  color:#1f6fb2!important;
  border:1px solid #cfe5fb!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

#im-message-form .tg-im-compose-tools .tg-im-attach-button:hover{
  background:#dceeff!important;
  color:#155a94!important;
}

/* Mikrofon: hellrosa Hintergrund + TGAnzeigen-Pink */
#im-message-form .tg-im-compose-tools #tgImVoiceButton{
  background:#ffe8f2!important;
  color:#ec168c!important;
  border:1px solid #ffd0e5!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

#im-message-form .tg-im-compose-tools #tgImVoiceButton:hover{
  background:#ffdbea!important;
  color:#cf0f78!important;
}

/* Aufnahme läuft: klarer, kräftiger Zustand */
#im-message-form .tg-im-compose-tools #tgImVoiceButton.is-recording{
  background:#ec168c!important;
  color:#ffffff!important;
  border-color:#ec168c!important;
  animation:tgImVoicePulseColor 1.05s ease-in-out infinite!important;
}

#im-message-form .tg-im-compose-tools #tgImVoiceButton.is-sending{
  background:#f7d5e5!important;
  color:#b96a91!important;
  border-color:#efbfd6!important;
  opacity:.8!important;
}

@keyframes tgImVoicePulseColor{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(236,22,140,.22);
  }
  50%{
    transform:scale(1.05);
    box-shadow:0 0 0 4px rgba(236,22,140,.08);
  }
}


/* ============================================================
   TGAnzeigen 2.12.3 – Mobile Composer Feinschliff
   Desktop bleibt unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Gesamte Eingabe kompakter und sauber in einer Reihe */
  #im-message-form .tg-im-compose-main{
    grid-template-columns:minmax(0,1fr) 58px 42px!important;
    grid-template-rows:31px 31px!important;
    gap:4px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  /* Textfeld volle Höhe */
  #im-message-form .tg-im-compose-text{
    height:66px!important;
    min-height:66px!important;
  }

  #im-message-form .tg-im-compose-text #im-message{
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    padding:10px 12px!important;
    font-size:16px!important;
    line-height:22px!important;
    border-radius:10px!important;
  }

  /* Senden: volle Höhe, aber schmaler als bisher */
  #im-message-form .tg-im-compose-send{
    width:58px!important;
    min-width:58px!important;
    height:66px!important;
  }

  #im-message-form .tg-im-compose-send > #tgImSendButton,
  #im-message-form .tg-im-compose-send > .tg-im-send-button{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    border-radius:10px!important;
    margin:0!important;
  }

  #im-message-form .tg-im-compose-send i{
    font-size:20px!important;
  }

  /* Rechte Werkzeugspalte: exakt 42px breit */
  #im-message-form .tg-im-compose-tools{
    width:42px!important;
    min-width:42px!important;
    height:66px!important;
    grid-template-columns:42px!important;
    grid-template-rows:31px 31px!important;
    gap:4px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    margin:0!important;
    padding:0!important;
    border-radius:8px!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button i,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton i{
    font-size:16px!important;
  }

  /* Keine zusätzliche graue Fläche um die Tools */
  #im-message-form .tg-im-compose-tools,
  #im-message-form .tg-im-compose-tools:before,
  #im-message-form .tg-im-compose-tools:after{
    box-shadow:none!important;
    border:0!important;
  }

  /* Aufnahmeinfo oberhalb des Composers */
  #im-message-form #tgImVoiceState{
    right:0!important;
    bottom:72px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.12.4 – Mobile Feinausrichtung
   Nur Büroklammer/Mikrofon, Senden bleibt unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Symbole optisch exakt mittig in der rechten Spalte */
  #im-message-form .tg-im-compose-tools .tg-im-attach-button,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button i,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton i,
  #im-message-form .tg-im-compose-tools .tg-im-attach-button svg,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton svg{
    margin:0!important;
    padding:0!important;
    position:relative!important;
    left:-1px!important;
    top:0!important;
    transform:none!important;
    line-height:1!important;
  }
}


/* ============================================================
   TGAnzeigen 2.12.5 – Mobile Bedienelemente horizontal
   Textfeld | Senden | Büroklammer | Mikrofon
   Desktop bleibt unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  #im-message-form .tg-im-compose-main{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 54px 38px 38px!important;
    grid-template-rows:58px!important;
    gap:4px!important;
    align-items:stretch!important;
    width:100%!important;
  }

  /* Textfeld links */
  #im-message-form .tg-im-compose-text{
    grid-column:1!important;
    grid-row:1!important;
    height:58px!important;
    min-height:58px!important;
  }

  #im-message-form .tg-im-compose-text #im-message{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:9px 10px!important;
    box-sizing:border-box!important;
  }

  /* Senden direkt hinter dem Textfeld */
  #im-message-form .tg-im-compose-send{
    grid-column:2!important;
    grid-row:1!important;
    width:54px!important;
    min-width:54px!important;
    height:58px!important;
  }

  #im-message-form .tg-im-compose-send > #tgImSendButton,
  #im-message-form .tg-im-compose-send > .tg-im-send-button{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
  }

  /* Tool-Container wird horizontal auf zwei Spalten verteilt */
  #im-message-form .tg-im-compose-tools{
    grid-column:3 / 5!important;
    grid-row:1!important;
    display:grid!important;
    grid-template-columns:38px 38px!important;
    grid-template-rows:58px!important;
    gap:4px!important;
    width:80px!important;
    min-width:80px!important;
    height:58px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }

  /* Büroklammer */
  #im-message-form .tg-im-compose-tools .tg-im-attach-button{
    grid-column:1!important;
    grid-row:1!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    align-self:stretch!important;
  }

  /* Mikrofon */
  #im-message-form .tg-im-compose-tools #tgImVoiceButton{
    grid-column:2!important;
    grid-row:1!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    align-self:stretch!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button i,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton i,
  #im-message-form .tg-im-compose-tools .tg-im-attach-button svg,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton svg{
    left:0!important;
    top:0!important;
    margin:0!important;
    transform:none!important;
  }

  #im-message-form #tgImVoiceState{
    right:0!important;
    bottom:64px!important;
  }
}

/* TGAnzeigen 2.12.6 – Mobil: Büroklammer exakt mittig */
@media screen and (max-width:767px){
  #im-message-form .tg-im-compose-tools .tg-im-attach-button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:0!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button i,
  #im-message-form .tg-im-compose-tools .tg-im-attach-button svg{
    position:static!important;
    inset:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    translate:none!important;
    line-height:1!important;
    vertical-align:middle!important;
  }
}


/* ============================================================
   TGAnzeigen 2.12.7 – Mobile oberer Chatbereich kompakter
   Desktop bleibt unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Weniger Leerraum oberhalb/unterhalb der Seitenüberschrift */
  .tg-im-chat-shell,
  .tg-im-chat-main {
    padding-top:0!important;
    margin-top:0!important;
  }

  .tg-im-chat-shell h1,
  .tg-im-chat-shell h2,
  .tg-im-chat-main h1,
  .tg-im-chat-main h2,
  .im-title,
  .im-heading {
    margin-top:10px!important;
    margin-bottom:12px!important;
    line-height:1.15!important;
  }

  /* Zugehörige Anzeige kompakter */
  .tg-im-related-item,
  .tg-im-item-card,
  .im-item,
  .im-item-box,
  .im-thread-item,
  .im-related-item {
    min-height:0!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
    margin-top:6px!important;
    margin-bottom:10px!important;
  }

  .tg-im-related-item img,
  .tg-im-item-card img,
  .im-item img,
  .im-item-box img,
  .im-related-item img {
    max-width:76px!important;
    max-height:76px!important;
    width:76px!important;
    height:76px!important;
    object-fit:cover!important;
  }

  .tg-im-related-item .title,
  .tg-im-item-card .title,
  .im-item .title,
  .im-item-box .title,
  .im-related-item .title {
    margin-top:2px!important;
    margin-bottom:0!important;
    line-height:1.2!important;
  }

  /* Melden-Button dichter an die Anzeigenbox */
  .tg-im-report,
  .im-report,
  .tg-report-wrap {
    margin-top:6px!important;
    margin-bottom:12px!important;
  }
}


/* TGAnzeigen 2.12.8 – Mobile Polish */
@media screen and (max-width:767px) {

  /* Audio-Nachrichten kompakter */
  .tg-im-voice-message {
    width:100%!important;
    max-width:320px!important;
    min-height:44px!important;
    margin:0!important;
    gap:7px!important;
    align-items:center!important;
    padding-top:2px!important;
    padding-bottom:2px!important;
  }

  .tg-im-voice-message .tg-im-voice-icon {
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:50%!important;
  }

  .tg-im-voice-message audio {
    width:240px!important;
    max-width:calc(100% - 37px)!important;
    height:34px!important;
    min-height:34px!important;
  }

  /* Voice-Zeilen flacher */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-message-text {
    min-height:0!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  /* Benutzerbilder exakt rund */
  .im-table-row .im-user-img,
  .im-table-row .im-avatar,
  .tg-im-chat-history .im-user-img,
  .tg-im-chat-history .im-avatar,
  .tg-im-chat-history img[class*="user"],
  .tg-im-chat-history img[class*="avatar"] {
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    object-fit:cover!important;
    object-position:center!important;
    overflow:hidden!important;
  }

  .im-table-row .im-from-user img,
  .im-table-row .im-to-user img {
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  /* Eingabefeld näher an Bottom-Navigation/Footer */
  #im-message-form.tg-im-chat-composer {
    margin-bottom:0!important;
    bottom:0!important;
  }

  body.tg-im-mobile-web-chat #im-message-form.tg-im-chat-composer {
    bottom:0!important;
    padding-bottom:2px!important;
  }

  body.tg-im-mobile-web-chat .tg-im-chat-shell,
  body.tg-im-mobile-web-chat .tg-im-chat-main {
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  :root,
  body {
    --tg-im-composer-bottom-gap:0px!important;
  }
}

/* TGAnzeigen 2.13.0 – Mobile Voice-Bubbles kompakt */
@media screen and (max-width:767px) {
  .tg-im-voice-message {
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
  }

  .tg-im-voice-message audio {
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }

  .tg-im-voice-message .tg-im-voice-icon {
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
  }

  .im-table-row:has(.tg-im-voice-message),
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-col-24,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }

  .im-table-row:has(.tg-im-voice-message) {
    padding-top:2px!important;
    padding-bottom:2px!important;
    margin-top:4px!important;
    margin-bottom:4px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message-extra {
    min-height:0!important;
    padding-top:2px!important;
    padding-bottom:0!important;
    margin-top:0!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.1 – Mobile Voice-Balken schmaler
   ============================================================ */
@media screen and (max-width:767px) {
  .tg-im-voice-message{
    width:auto!important;
    max-width:280px!important;
    min-height:38px!important;
    gap:6px!important;
  }

  .tg-im-voice-message audio{
    width:205px!important;
    max-width:205px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }

  .tg-im-voice-message .tg-im-voice-icon{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
  }

  /* komplette Nachrichtenblase enger um den Player */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:fit-content!important;
    max-width:330px!important;
    min-height:0!important;
    padding:7px 9px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.2 – Mobile Voice EXTRA SLIM
   Nur Sprachnachrichten. Composer/Text unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Gesamter Voice-Inhalt deutlich schmaler */
  .tg-im-voice-message{
    width:210px!important;
    max-width:210px!important;
    min-width:0!important;
    min-height:34px!important;
    gap:5px!important;
    padding:0!important;
  }

  /* Mikrofon links kompakter */
  .tg-im-voice-message .tg-im-voice-icon{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }

  /* Nativer Audio-Player stark verkürzt */
  .tg-im-voice-message audio{
    width:176px!important;
    min-width:176px!important;
    max-width:176px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }

  /* Rote/graue Außenblase eng um den Player */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:230px!important;
    max-width:230px!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:6px 7px!important;
  }

  .im-table-row:has(.tg-im-voice-message){
    min-height:0!important;
    padding-top:1px!important;
    padding-bottom:1px!important;
    margin-top:3px!important;
    margin-bottom:3px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.4
   Voice-Player wieder wie 2.13.2.
   Nur Hintergrundblase flacher + doppelten Delete im Balken ausblenden.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Player wieder vollständig sichtbar wie in 2.13.2 */
  .tg-im-voice-message{
    width:210px!important;
    max-width:210px!important;
    min-width:0!important;
    min-height:34px!important;
    height:auto!important;
    max-height:none!important;
    gap:5px!important;
    padding:0!important;
    overflow:visible!important;
  }

  .tg-im-voice-message audio{
    width:176px!important;
    min-width:176px!important;
    max-width:176px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }

  .tg-im-voice-message .tg-im-voice-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    max-width:24px!important;
    max-height:24px!important;
  }

  /* Nur die rote/graue Hintergrundblase enger um den Player legen */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:230px!important;
    max-width:230px!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .im-table-row:has(.tg-im-voice-message){
    min-height:0!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:3px!important;
    margin-bottom:3px!important;
  }
}


/* TGAnzeigen 2.13.4 – doppelten Löschbutton in Voice-Balken entfernen.
   Der Löschbutton außerhalb/vor der Blase bleibt erhalten. */
.tg-im-voice-message .im-delete,
.tg-im-voice-message .im-remove,
.tg-im-voice-message [class*="delete"],
.tg-im-voice-message [class*="remove"],
.im-message:has(.tg-im-voice-message) > .im-delete,
.im-message:has(.tg-im-voice-message) > .im-remove {
  display:none!important;
}


/* ============================================================
   TGAnzeigen 2.13.5 – Web Voice Delete Fix
   - innerer Attachment-Löschbutton bei Voice weg
   - äußerer Nachrichten-Löschbutton bleibt
   - Web-Voice-Blase etwas enger
   ============================================================ */
@media screen and (min-width:768px) {
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message-extra .im-hide,
  .im-table-row:has(.tg-im-voice-message) .im-message-extra a[href*="del-att-message-id"] {
    display:none!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.6
   Voice-Hintergrund in Mobile + Web flacher.
   Web-Bedienicons wieder sichtbar.
   ============================================================ */

/* ---------------- Voice-Blasen allgemein kompakter ---------------- */
.im-table-row:has(.tg-im-voice-message) .im-message,
.im-table-row:has(.tg-im-voice-message) .im-message-content,
.im-table-row:has(.tg-im-voice-message) .im-message-box,
.im-table-row:has(.tg-im-voice-message) .im-wrap,
.im-table-row:has(.tg-im-voice-message) .im-box,
.im-table-row:has(.tg-im-voice-message) .im-body {
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
  box-sizing:border-box!important;
}

/* Der eigentliche Voice-Inhalt bestimmt die Höhe */
.tg-im-voice-message {
  min-height:32px!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
}

/* ---------------- Desktop / Web ---------------- */
@media screen and (min-width:768px) {

  /* Voice-Blase enger um Player */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  /* Web-Composer: Büroklammer und Mikrofon wieder klar sichtbar */
  #im-message-form .tg-im-compose-tools .tg-im-attach-button,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    align-items:center!important;
    justify-content:center!important;
  }

  #im-message-form .tg-im-compose-tools .tg-im-attach-button i,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton i,
  #im-message-form .tg-im-compose-tools .tg-im-attach-button svg,
  #im-message-form .tg-im-compose-tools #tgImVoiceButton svg {
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    font-size:15px!important;
    line-height:1!important;
  }

  /* Web-Farben wieder aktiv */
  #im-message-form .tg-im-compose-tools .tg-im-attach-button {
    background:#eaf4ff!important;
    color:#1f6fb2!important;
    border:1px solid #cfe5fb!important;
  }

  #im-message-form .tg-im-compose-tools #tgImVoiceButton {
    background:#ffe8f2!important;
    color:#ec168c!important;
    border:1px solid #ffd0e5!important;
  }

  #im-message-form .tg-im-compose-tools #tgImVoiceButton.is-recording {
    background:#ec168c!important;
    color:#fff!important;
    border-color:#ec168c!important;
  }
}

/* ---------------- Mobile ---------------- */
@media screen and (max-width:767px) {
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    padding-top:4px!important;
    padding-bottom:4px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.7 – Voice-Darstellung Web + Mobile identisch
   Maximale Blasenhöhe wie Referenzbild.
   ============================================================ */

/* Voice-Inhalt kompakt und in beiden Ansichten identisch */
.tg-im-voice-message {
  width:270px!important;
  max-width:270px!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}

.tg-im-voice-message .tg-im-voice-icon {
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
}

.tg-im-voice-message audio {
  width:230px!important;
  max-width:230px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
}

/* Rote/graue Blase darf nicht höher als nötig werden */
.im-table-row:has(.tg-im-voice-message) .im-message,
.im-table-row:has(.tg-im-voice-message) .im-message-content,
.im-table-row:has(.tg-im-voice-message) .im-message-box,
.im-table-row:has(.tg-im-voice-message) .im-wrap,
.im-table-row:has(.tg-im-voice-message) .im-box,
.im-table-row:has(.tg-im-voice-message) .im-body {
  width:286px!important;
  max-width:286px!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:4px 8px!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/* Voice-Zeile nicht zusätzlich aufblasen */
.im-table-row:has(.tg-im-voice-message) {
  min-height:0!important;
  height:auto!important;
  padding-top:2px!important;
  padding-bottom:2px!important;
  margin-top:3px!important;
  margin-bottom:3px!important;
}

/* Web und Mobile nutzen bewusst dieselben Maße */
@media screen and (min-width:768px) {
  .tg-im-voice-message {
    width:270px!important;
    max-width:270px!important;
    height:36px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    width:286px!important;
    max-width:286px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
  }
}

@media screen and (max-width:767px) {
  .tg-im-voice-message {
    width:270px!important;
    max-width:270px!important;
    height:36px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    width:286px!important;
    max-width:286px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.8 – nur Mobile:
   Audio-Menü (⋮) vollständig sichtbar.
   Web bleibt unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  .tg-im-voice-message{
    width:300px!important;
    max-width:300px!important;
    min-width:0!important;
  }

  .tg-im-voice-message audio{
    width:260px!important;
    max-width:260px!important;
    min-width:260px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:316px!important;
    max-width:316px!important;
    min-width:0!important;

    /* Höhe aus 2.13.7 bewusst beibehalten */
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.13.9 – eigener Mobile-Voice-Menübutton
   Web/Desktop bleibt unverändert.
   ============================================================ */

.tg-im-voice-more{
  display:none;
}

@media screen and (max-width:767px) {

  .tg-im-voice-message{
    width:316px!important;
    max-width:316px!important;
    overflow:visible!important;
  }

  .tg-im-voice-message audio{
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
  }

  .tg-im-voice-more{
    display:block!important;
    position:relative!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:32px!important;
  }

  .tg-im-voice-more-button{
    width:28px!important;
    height:32px!important;
    min-width:28px!important;
    min-height:32px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    font-size:22px!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    border-radius:6px!important;
  }

  .tg-im-voice-more-button:active{
    background:rgba(0,0,0,.08)!important;
  }

  .tg-im-voice-more-menu{
    position:absolute!important;
    right:0!important;
    bottom:38px!important;
    z-index:9999!important;
    width:160px!important;
    padding:6px!important;
    background:#fff!important;
    border:1px solid #dfe3e8!important;
    border-radius:10px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
  }

  .tg-im-voice-more-menu[hidden]{
    display:none!important;
  }

  .tg-im-voice-more-menu a{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    padding:9px 10px!important;
    box-sizing:border-box!important;
    border-radius:7px!important;
    text-decoration:none!important;
    color:#222!important;
    font-size:14px!important;
    line-height:18px!important;
    white-space:nowrap!important;
  }

  .tg-im-voice-more-menu a:active{
    background:#f0f2f4!important;
  }

  .tg-im-voice-more-menu i{
    width:16px!important;
    text-align:center!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:332px!important;
    max-width:332px!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.0 – Mobile Voice kompakt wiederhergestellt
   Web/Desktop unverändert.
   ============================================================ */
.tg-im-voice-more,
.tg-im-voice-more-button,
.tg-im-voice-more-menu{
  display:none!important;
}

@media screen and (max-width:767px){
  .tg-im-voice-message{
    width:270px!important;
    max-width:270px!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .tg-im-voice-message .tg-im-voice-icon{
    flex:0 0 28px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
  }

  .tg-im-voice-message audio{
    width:230px!important;
    min-width:230px!important;
    max-width:230px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body{
    width:286px!important;
    max-width:286px!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
}


/* TGAnzeigen 2.14.1 – eigener Mobile-Audio-Player */
.tg-im-mobile-audio { display:none; }

@media screen and (max-width:767px) {
  .tg-im-voice-message > audio.tg-im-voice-audio {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .tg-im-voice-message {
    width:292px!important;
    max-width:292px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    overflow:visible!important;
  }

  .tg-im-mobile-audio {
    display:grid!important;
    grid-template-columns:26px 32px minmax(60px,1fr) 32px 26px 24px!important;
    align-items:center!important;
    gap:3px!important;
    width:252px!important;
    max-width:252px!important;
    height:32px!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
    background:rgba(0,0,0,.32)!important;
    color:#fff!important;
  }

  .tg-im-mobile-audio button {
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    padding:0!important;
    margin:0!important;
    height:28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .tg-im-audio-time {
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-align:center!important;
  }

  .tg-im-audio-progress {
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    accent-color:#fff!important;
  }

  .tg-im-audio-menu-wrap {
    position:relative!important;
    width:24px!important;
    height:28px!important;
  }

  .tg-im-audio-menu-btn {
    width:24px!important;
    font-size:20px!important;
  }

  .tg-im-audio-menu {
    position:absolute!important;
    right:0!important;
    bottom:34px!important;
    z-index:9999!important;
    width:150px!important;
    padding:5px!important;
    background:#fff!important;
    border:1px solid #dfe3e8!important;
    border-radius:9px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  }

  .tg-im-audio-menu[hidden] { display:none!important; }

  .tg-im-audio-menu a {
    display:block!important;
    padding:8px 9px!important;
    border-radius:6px!important;
    color:#222!important;
    text-decoration:none!important;
    font-size:13px!important;
    line-height:17px!important;
    white-space:nowrap!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    width:308px!important;
    max-width:308px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.2 – Mobile Custom Audio Player Feinschliff
   Alles in einer Zeile: ▶ | Zeit | Regler | Dauer | 🔊 | ⋮
   Außenblase bleibt unverändert kompakt.
   ============================================================ */
@media screen and (max-width:767px) {

  .tg-im-mobile-audio {
    grid-template-columns:24px 30px minmax(48px,1fr) 30px 24px 20px!important;
    gap:2px!important;
    width:246px!important;
    max-width:246px!important;
    padding:0 3px!important;
    overflow:visible!important;
  }

  .tg-im-audio-play {
    width:24px!important;
    min-width:24px!important;
  }

  .tg-im-audio-current,
  .tg-im-audio-duration {
    width:30px!important;
    min-width:30px!important;
    font-size:10px!important;
  }

  .tg-im-audio-progress {
    width:100%!important;
    min-width:48px!important;
    max-width:none!important;
  }

  .tg-im-audio-mute {
    width:24px!important;
    min-width:24px!important;
  }

  .tg-im-audio-menu-wrap {
    width:20px!important;
    min-width:20px!important;
  }

  .tg-im-audio-menu-btn {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:20px!important;
    min-width:20px!important;
    height:28px!important;
    padding:0!important;
    font-size:19px!important;
    line-height:1!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* Voice message width stays compact and must not clip right-side controls */
  .tg-im-voice-message {
    width:286px!important;
    max-width:286px!important;
    overflow:visible!important;
  }

  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    width:302px!important;
    max-width:302px!important;
    overflow:visible!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.3 – Mobile ⋮ sicher sichtbar
   Breite/Höhe des Players bleiben praktisch unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Genug feste Breite für alle Controls inkl. ⋮ */
  .tg-im-mobile-audio {
    grid-template-columns:24px 30px minmax(42px,1fr) 30px 24px 22px!important;
    gap:2px!important;
    width:246px!important;
    max-width:246px!important;
    min-width:246px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:3!important;
  }

  .tg-im-audio-menu-wrap {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:28px!important;
    position:relative!important;
    overflow:visible!important;
    z-index:10!important;
  }

  .tg-im-audio-menu-btn {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:11!important;
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:28px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:20px!important;
    font-weight:700!important;
    line-height:1!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  /* Übergeordnete Container dürfen den rechten Menübutton nicht abschneiden */
  .tg-im-voice-message,
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    overflow:visible!important;
  }

  /* Menü selbst über allem halten */
  .tg-im-audio-menu {
    z-index:99999!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.4 – Mobile ⋮ innerhalb des Playerbalkens
   Web/Desktop unverändert, Benachrichtigungston bleibt aus.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Player intern enger aufteilen, ohne die Außenbreite zu ändern */
  .tg-im-mobile-audio {
    grid-template-columns:24px 30px minmax(34px,1fr) 30px 24px 20px!important;
    gap:2px!important;
    width:246px!important;
    max-width:246px!important;
    min-width:246px!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /* Fortschrittsregler etwas kürzer */
  .tg-im-audio-progress {
    min-width:34px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }

  /* Lautsprecher kompakt */
  .tg-im-audio-mute {
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
  }

  /* ⋮ vollständig innerhalb der letzten Grid-Spalte */
  .tg-im-audio-menu-wrap {
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:28px!important;
    position:relative!important;
    overflow:visible!important;
    justify-self:end!important;
  }

  .tg-im-audio-menu-btn {
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:28px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:19px!important;
    line-height:1!important;
    color:#fff!important;
    background:transparent!important;
    transform:none!important;
    position:static!important;
  }

  /* Der eigentliche Playerbalken darf rechts nicht überlaufen */
  .tg-im-voice-message {
    overflow:visible!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.5 – FINAL Mobile Voice Layout
   Einheitliche Endregel, überschreibt alle alten Mobile-Voice-Regeln.
   Ziel: 🎤 | ▶ | 0:00 | Regler | 0:06 | 🔊 | ⋮ komplett innerhalb.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Außenblase */
  .im-table-row:has(.tg-im-voice-message) .im-message,
  .im-table-row:has(.tg-im-voice-message) .im-message-content,
  .im-table-row:has(.tg-im-voice-message) .im-message-box,
  .im-table-row:has(.tg-im-voice-message) .im-wrap,
  .im-table-row:has(.tg-im-voice-message) .im-box,
  .im-table-row:has(.tg-im-voice-message) .im-body {
    width:286px!important;
    max-width:286px!important;
    min-width:286px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:4px 8px!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Voice-Inhalt: 270px = Bubble-Innenbreite */
  .tg-im-voice-message {
    width:270px!important;
    max-width:270px!important;
    min-width:270px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /* Mikrofon links */
  .tg-im-voice-message > .tg-im-voice-icon {
    flex:0 0 28px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    margin:0!important;
  }

  /* Native Audio nur als unsichtbare Audio-Engine */
  .tg-im-voice-message > audio.tg-im-voice-audio {
    position:absolute!important;
    left:-9999px!important;
    top:auto!important;
    width:1px!important;
    min-width:1px!important;
    max-width:1px!important;
    height:1px!important;
    min-height:1px!important;
    max-height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  /* Custom Player nimmt EXAKT den Rest: 270 - 28 - 6 = 236px */
  .tg-im-voice-message > .tg-im-mobile-audio {
    flex:0 0 236px!important;
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    display:grid!important;
    grid-template-columns:20px 28px minmax(52px,1fr) 28px 22px 18px!important;
    grid-template-rows:32px!important;
    column-gap:2px!important;
    row-gap:0!important;
    align-items:center!important;
    justify-items:center!important;
    padding:0 4px!important;
    margin:0!important;
    border:0!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    position:relative!important;
    z-index:2!important;
    background:rgba(0,0,0,.32)!important;
    color:#fff!important;
  }

  .tg-im-mobile-audio > * {
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .tg-im-audio-play {
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:28px!important;
    padding:0!important;
    margin:0!important;
  }

  .tg-im-audio-current,
  .tg-im-audio-duration {
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    font-size:10px!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .tg-im-audio-progress {
    width:100%!important;
    min-width:52px!important;
    max-width:100%!important;
    height:18px!important;
    margin:0!important;
    padding:0!important;
    justify-self:stretch!important;
  }

  .tg-im-audio-mute {
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:28px!important;
    padding:0!important;
    margin:0!important;
  }

  .tg-im-audio-menu-wrap {
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:28px!important;
    padding:0!important;
    margin:0!important;
    position:relative!important;
    overflow:visible!important;
    justify-self:end!important;
    z-index:20!important;
  }

  .tg-im-audio-menu-btn {
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:28px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1!important;
    align-items:center!important;
    justify-content:center!important;
    position:static!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  .tg-im-audio-menu {
    position:absolute!important;
    right:0!important;
    bottom:34px!important;
    z-index:999999!important;
    width:150px!important;
    max-width:150px!important;
  }

  .tg-im-audio-menu[hidden] {
    display:none!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.6 – Mobile Player Inhalt näher an den Rand
   Nur Feinausrichtung. Web/Desktop unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Weniger Innenabstand links/rechts im dunklen Playerbalken */
  .tg-im-voice-message > .tg-im-mobile-audio {
    padding-left:1px!important;
    padding-right:1px!important;
    column-gap:1px!important;
  }

  /* Play etwas weiter nach links */
  .tg-im-audio-play {
    justify-self:start!important;
    margin-left:0!important;
  }

  /* Zeitfelder kompakt */
  .tg-im-audio-current,
  .tg-im-audio-duration {
    padding:0!important;
    margin:0!important;
  }

  /* Regler darf den gewonnenen Platz vollständig nutzen */
  .tg-im-audio-progress {
    width:100%!important;
    min-width:56px!important;
    justify-self:stretch!important;
    margin:0!important;
  }

  /* Lautsprecher und Menü ganz nach rechts */
  .tg-im-audio-mute {
    justify-self:end!important;
    margin:0!important;
  }

  .tg-im-audio-menu-wrap {
    justify-self:end!important;
    margin-right:0!important;
  }

  .tg-im-audio-menu-btn {
    justify-content:flex-end!important;
    padding-right:0!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.7 – Mobile Player-Inhalt nach links
   Nur Inhalt IM farbigen/dunklen Playerbalken verschieben.
   Außenblase, Höhe und Desktop bleiben unverändert.
   ============================================================ */
@media screen and (max-width:767px) {
  .tg-im-voice-message > .tg-im-mobile-audio {
    transform:translateX(-7px)!important;
  }
}


/* ============================================================
   TGAnzeigen 2.14.8 – Korrektur: NUR Controls nach links
   2.14.7 verschob den ganzen Balken; dadurch blieb der Inhalt
   relativ zum Balken optisch unverändert.
   ============================================================ */
@media screen and (max-width:767px) {

  /* Balken wieder an seiner ursprünglichen Position */
  .tg-im-voice-message > .tg-im-mobile-audio {
    transform:none!important;
  }

  /* NUR die sichtbaren Inhalte innerhalb des Balkens nach links */
  .tg-im-mobile-audio > .tg-im-audio-play,
  .tg-im-mobile-audio > .tg-im-audio-current,
  .tg-im-mobile-audio > .tg-im-audio-progress,
  .tg-im-mobile-audio > .tg-im-audio-duration,
  .tg-im-mobile-audio > .tg-im-audio-mute,
  .tg-im-mobile-audio > .tg-im-audio-menu-wrap {
    transform:translateX(-7px)!important;
  }

  /* Dropdown selbst nicht zusätzlich versetzen */
  .tg-im-audio-menu-wrap .tg-im-audio-menu {
    transform:translateX(7px)!important;
  }
}