/*
 * TravTools · © MUNLabs
 * Chat & Kommunikation
 * Tickets, Freunde, VIP, HC, Gruppenchat und Kontakt-Bereiche.
 */


/* Extrahiert aus superuser_freunde.php */
.tt-chat-wrap { border: 1px solid var(--tt-red); }
    .tt-msg.deleted .tt-msg-bubble { border: 1px dashed var(--tt-red); opacity: 0.6; background: rgba(255,92,92,0.05); }
    .tt-admin-del { color: var(--tt-red); cursor: pointer; margin-left: 8px; font-size: 12px; }
    .tt-active-name { color: var(--tt-red) !important; }


/* Phase 3 · Chat-Helper aus Inline-Styles */
.tt-msg-header.is-hidden{display:none;justify-content:space-between}
.tt-chat-actions{display:none}
.tt-chat-wrapper-hidden{display:none;flex:1;flex-direction:column;height:100%}
.tt-closed-notice.is-hidden{display:none}
.tt-chat-title-ref{font-weight:700;color:#fff}
.tt-chat-title-status{font-size:12px;color:var(--tt-muted)}
.tt-header-ref{font-weight:800;color:#fff}
.tt-header-info{font-size:11px;color:var(--tt-muted);margin-left:15px}
.tt-header-actions{display:none;gap:10px}
.tt-ticket-user{font-weight:400;color:var(--tt-muted)}
.tt-ticket-sub{color:var(--tt-muted)}
.tt-prio-dot{font-size:8px}


/* Phase 4 · einheitliche Chat-Shell */
.tt-chat-shell{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:18px;
  align-items:stretch;
}
.tt-chat-shell .tt-chat-list,
.tt-chat-shell .tt-ticket-list,
.tt-chat-shell .tt-chat-sidebar{
  min-height:620px;
}
.tt-chat-shell .tt-chat-main,
.tt-chat-shell .tt-ticket-main,
.tt-chat-shell .tt-chat-panel{
  min-height:620px;
}
@media (max-width: 1100px){
  .tt-chat-shell{grid-template-columns:1fr}
  .tt-chat-shell .tt-chat-list,
  .tt-chat-shell .tt-ticket-list,
  .tt-chat-shell .tt-chat-sidebar,
  .tt-chat-shell .tt-chat-main,
  .tt-chat-shell .tt-ticket-main,
  .tt-chat-shell .tt-chat-panel{
    min-height:unset;
  }
}


/* ===== MIGRIERT AUS account_freunde.css ===== */

/* account_freunde.css (Fixed Badges) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

/* --- BADGES ORIGINAL DESIGN (FIXED) --- */
.tt-badge {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%; position: relative; margin-left: 2px; vertical-align: -1px; flex-shrink: 0;
}
.tt-badge::after {
    content: ''; position: absolute; top: 45%; left: 50%; width: 3px; height: 5px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translate(-50%, -60%) rotate(45deg);
}
.tt-badge.is-gold { background: var(--tt-gold); box-shadow: 0 0 5px rgba(242, 193, 78, 0.4); }
.tt-badge.is-alpha, .tt-badge.is-silver { background: linear-gradient(135deg, #e0e0e0, var(--tt-muted)); border: 1px solid var(--tt-faint); }
.tt-badge.is-premium, .tt-badge.is-blue { background: var(--tt-blue); border: 1px solid var(--tt-gold); }
.tt-badge.is-premium::after { border-color: #fff; }
.tt-badge.is-elite { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

.tt-chat-wrap { display: grid; grid-template-columns:minmax(250px,290px) minmax(0,1fr); height: calc(100vh - 180px); min-height: 600px; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 12px; overflow: hidden; margin:0; }
.tt-chat-sidebar { width: 290px; min-width:290px; background: var(--darkPanel); border-right: 1px solid var(--lineColor); display: flex; flex-direction: column; }
.tt-chat-sb-header { padding: 15px; border-bottom: 1px solid var(--lineColor); background: rgba(255,255,255,0.02); }
.tt-sb-title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; color: var(--brandGold); text-transform: uppercase; }
.tt-sb-actions { display: flex; gap: 5px; }
.tt-icon-btn { background: transparent; border: 1px solid var(--lineColor); color: var(--tt-muted); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tt-icon-btn:hover { color: #fff; border-color: #fff; }
.tt-friend-list { flex: 1; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }

.tt-u-item { display: block; padding: 10px 15px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; position: relative; }
.tt-u-item:hover { background: rgba(255,255,255,0.04); }
.tt-u-item.active { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); }
.tt-u-name { font-weight: 700; color: #fff; font-size: 13px; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.tt-u-msg { font-size: 11px; color: var(--tt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-st-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.tt-st-dot.online { background: var(--tt-green); box-shadow: 0 0 5px rgba(61,220,132, 0.5); }
.tt-st-dot.offline { background: var(--tt-faint); }
.tt-st-dot.st-group { background: var(--brandGold); }
.tt-mute-btn { position: absolute; right: 10px; top: 12px; background: transparent; border: none; color: var(--tt-faint-2); cursor: pointer; }
.tt-mute-btn:hover { color: var(--tt-text-soft); }
.tt-mute-btn.muted { color: var(--tt-red); }

.tt-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--darkBg); }
.tt-msg-header { height: 50px; padding: 0 20px; border-bottom: 1px solid var(--lineColor); display: flex; align-items: center; justify-content: space-between; background: var(--darkPanel); }
.tt-active-user { display: flex; align-items: center; }
.tt-header-actions { display: flex; gap: 10px; }
.tt-act-btn { background: transparent; border: 1px solid var(--lineColor); color: var(--tt-muted); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.tt-act-btn:hover { color: #fff; border-color: #fff; }
.tt-act-btn.add:hover { color: var(--brandGold); border-color: var(--brandGold); }
.tt-act-btn.del:hover { color: var(--tt-red); border-color: var(--tt-red); }

.tt-msg-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background-color: var(--tt-bg-1); background-image: radial-gradient(var(--tt-surface-hover-solid) 1px, transparent 1px); background-size: 20px 20px; }
.tt-msg { display: flex; flex-direction: column; max-width: 80%; }
.tt-msg.own { align-self: flex-end; align-items: flex-end; }
.tt-msg.other { align-self: flex-start; align-items: flex-start; }
.tt-msg-bubble { padding: 8px 14px; font-size: 14px; line-height: 1.5; border-radius: 8px; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tt-msg.own .tt-msg-bubble { background: var(--royalBlue); border-bottom-right-radius: 2px; }
.tt-msg.other .tt-msg-bubble { background: #1f242c; border: 1px solid var(--lineColor); border-bottom-left-radius: 2px; border-left: 2px solid var(--brandGold); }
.tt-msg-meta { font-size: 10px; color: var(--tt-faint); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }

.tt-input-wrapper { background: var(--darkPanel); border-top: 1px solid var(--lineColor); padding: 15px; }
.tt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-chat-textarea { flex: 1; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 6px; padding: 10px; color: #fff; height: 45px; resize: none; font-family: inherit; }
.tt-chat-textarea:focus { border-color: var(--royalBlue); outline: none; }
.tt-send-btn { height: 45px; padding: 0 20px; background: var(--royalBlue); color: #fff; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.tt-send-btn:hover { filter: brightness(1.1); }

.tt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.tt-modal-overlay.active { display: flex; }
.tt-modal { background: var(--tt-surface-solid); width: 400px; max-width: 90%; border-radius: 8px; border: 1px solid var(--royalBlue); padding: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.tt-modal h3 { margin-top: 0; color: #fff; font-size: 16px; border-bottom: 1px solid var(--lineColor); padding-bottom: 10px; }
.tt-search-inp { width: 100%; padding: 10px; background: var(--darkBg); border: 1px solid var(--lineColor); color: #fff; border-radius: 4px; margin-bottom: 10px; box-sizing: border-box; }
.tt-res-list { max-height: 200px; overflow-y: auto; }
.tt-res-item { padding: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.tt-res-btn { background: var(--brandGold); border: none; color: #000; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 10px; }
.tt-modal-foot { margin-top: 15px; text-align: right; }
.tt-modal-foot button { background: transparent; border: none; color: var(--tt-muted); cursor: pointer; text-decoration: underline; }
@media (max-width: 980px) { .tt-chat-wrap { grid-template-columns:1fr; height:auto; } .tt-chat-sidebar { width:100%; min-width:0; height:auto; border-right:none; border-bottom: 1px solid var(--lineColor); } .tt-chat-main { height: 600px; } }

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationslisten vereinheitlicht */
.tt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-friend-list .tt-u-item,
.tt-list-click {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item .tt-act-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-item .tt-u-avatar,
.tt-friend-list .tt-u-item .tt-u-details,
.tt-friend-list .tt-u-item .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}
.tt-friend-list .tt-u-item .tt-u-name span,
.tt-friend-list .tt-u-item .tt-u-msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-friend-list .tt-u-item.active {
    box-shadow: inset 3px 0 0 var(--brandGold, #f2c14a);
}
.tt-friend-list .tt-u-item:hover {
    transform: none;
}


/* Follow-up: schönere Chatlisten */
.tt-friend-list{padding:10px;gap:8px;}
.tt-friend-list .tt-u-item{min-height:72px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.tt-friend-list .tt-u-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg, rgba(255,215,122,.95), rgba(242,193,74,.35));opacity:0;transition:opacity .18s ease, box-shadow .18s ease;}
.tt-friend-list .tt-u-item.active::before,.tt-friend-list .tt-u-item:hover::before{opacity:1;box-shadow:0 0 12px rgba(242,193,74,.25);}
.tt-friend-list .tt-u-item.active{background:linear-gradient(135deg, rgba(20,76,200,.22), rgba(242,193,74,.06));border-color:rgba(242,193,74,.18);box-shadow:0 0 0 1px rgba(242,193,74,.08) inset;}
.tt-u-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}


/* Block 6 UI final follow-up */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0!important;font-size:13px!important;line-height:1.2;}
.tt-friend-list .tt-u-item .tt-u-name .tt-badge{width:11px!important;height:11px!important;min-width:11px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-friend-list .tt-u-item .tt-u-name .tt-badge::after{width:2.5px!important;height:5px!important;border-width:0 1.2px 1.2px 0!important;}
.tt-msg-meta .tt-badge{width:10px!important;height:10px!important;min-width:10px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after{width:2px!important;height:4px!important;border-width:0 1.2px 1.2px 0!important;}


/* fix5 rebuild */
.tt-friend-list .tt-u-msg{display:none!important;}
.tt-friend-list .tt-u-item{align-items:center!important;}
.tt-friend-list .tt-u-name{display:inline-flex!important;align-items:center!important;gap:2px!important;flex-wrap:nowrap!important;}
.tt-friend-list .tt-u-name .tt-badge,.tt-friend-list .tt-u-name [class*="badge"]{width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;border-radius:999px!important;display:inline-flex!important;vertical-align:middle!important;transform:none!important;}
.tt-msg-meta .tt-badge,.tt-msg-meta [class*="badge"],.tt-sender-name .tt-badge,.tt-sender-name [class*="badge"]{width:10px!important;height:10px!important;min-width:10px!important;min-height:10px!important;border-radius:999px!important;display:inline-flex!important;vertical-align:middle!important;transform:none!important;}
.tt-msg-meta .tt-badge::after,.tt-msg-meta [class*="badge"]::after,.tt-sender-name .tt-badge::after,.tt-sender-name [class*="badge"]::after{width:2px!important;height:4px!important;border-right-width:1px!important;border-bottom-width:1px!important;}


/* fix6 friends/chat sizing */
.tt-chat-wrap{grid-template-columns:minmax(240px,270px) minmax(0,1fr)!important;height:calc(100vh - 145px)!important;min-height:680px!important;}
.tt-chat-sidebar{width:auto!important;min-width:240px!important;}
.tt-friend-list .tt-u-item{min-height:60px!important;padding:10px 12px!important;border-radius:16px!important;}


/* ===== MIGRIERT AUS kommunikation_discord.css ===== */

/* Discord-Link */


/* ===== MIGRIERT AUS kommunikation_gruppenchat.css ===== */

/* kommunikation_gruppenchat.css (Fixed Badges) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

/* --- BADGES ORIGINAL DESIGN (FIXED) --- */
.tt-badge {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%; position: relative; margin-left: 2px; vertical-align: -1px; flex-shrink: 0;
}
.tt-badge::after {
    content: ''; position: absolute; top: 45%; left: 50%; width: 3px; height: 5px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translate(-50%, -60%) rotate(45deg);
}
.tt-badge.is-gold { background: var(--tt-gold); box-shadow: 0 0 5px rgba(242, 193, 78, 0.4); }
.tt-badge.is-alpha, .tt-badge.is-silver { background: linear-gradient(135deg, #e0e0e0, var(--tt-muted)); border: 1px solid var(--tt-faint); }
.tt-badge.is-premium, .tt-badge.is-blue { background: var(--tt-blue); border: 1px solid var(--tt-gold); }
.tt-badge.is-premium::after { border-color: #fff; }
.tt-badge.is-elite { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

/* LAYOUT */
.tt-chat-wrap { display: flex; height: calc(100vh - 180px); min-height: 600px; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 12px; overflow: hidden; margin:0; }
.tt-chat-sidebar { width: 290px; background: var(--darkPanel); border-right: 1px solid var(--lineColor); display: flex; flex-direction: column; }
.tt-chat-sb-header { padding: 15px; border-bottom: 1px solid var(--lineColor); background: rgba(255,255,255,0.02); }
.tt-sb-title { font-size: 11px; font-weight: 800; color: var(--brandGold); text-transform: uppercase; letter-spacing: 1px; }
.tt-friend-list { flex: 1; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }

/* LIST ITEM */
.tt-u-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.tt-u-item:hover { background: rgba(255,255,255,0.04); }
.tt-u-item.active { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); }
.tt-u-content { flex: 1; display: flex; align-items: center; overflow: hidden; }
.tt-u-name { font-weight: 700; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-part-btn { background: transparent; border: none; color: var(--tt-faint-2); padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: 0.2s; margin-left: 5px; }
.tt-part-btn:hover { background: rgba(255,255,255,0.1); color: var(--tt-text-soft); }
.tt-u-item.active .tt-part-btn { color: var(--royalBlue); }

/* MAIN */
.tt-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--darkBg); }
.tt-msg-header { height: 50px; padding: 0 20px; border-bottom: 1px solid var(--lineColor); display: flex; align-items: center; background: var(--darkPanel); }
.tt-active-user { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; }

.tt-msg-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background-color: var(--tt-bg-1); background-image: radial-gradient(var(--tt-surface-hover-solid) 1px, transparent 1px); background-size: 20px 20px; }
.tt-msg-area::-webkit-scrollbar { width: 6px; }
.tt-msg-area::-webkit-scrollbar-thumb { background: var(--lineColor); border-radius: 3px; }

.tt-msg { display: flex; flex-direction: column; max-width: 80%; }
.tt-msg.own { align-self: flex-end; align-items: flex-end; }
.tt-msg.other { align-self: flex-start; align-items: flex-start; }
.tt-msg-bubble { padding: 8px 14px; font-size: 14px; line-height: 1.5; border-radius: 8px; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tt-msg.own .tt-msg-bubble { background: var(--royalBlue); border-bottom-right-radius: 2px; }
.tt-msg.other .tt-msg-bubble { background: #1f242c; border: 1px solid var(--lineColor); border-bottom-left-radius: 2px; border-left: 2px solid var(--brandGold); }
.tt-msg-meta { font-size: 10px; color: var(--tt-faint); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }

.tt-role-label { background: var(--tt-line-solid); color: var(--tt-text-soft); padding: 1px 4px; border-radius: 3px; font-size: 9px; text-transform: uppercase; font-weight: 700; }
.tt-role-hc { background: rgba(242, 193, 74, 0.15); color: var(--brandGold); border: 1px solid rgba(242, 193, 74, 0.3); }
.tt-ally-tag { color: var(--tt-blue-3); font-weight: 600; }

.tt-input-wrapper { background: var(--darkPanel); border-top: 1px solid var(--lineColor); padding: 15px; }
.tt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-chat-textarea { flex: 1; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 6px; padding: 10px; color: #fff; height: 45px; resize: none; font-family: inherit; }
.tt-chat-textarea:focus { border-color: var(--royalBlue); outline: none; }
.tt-send-btn { height: 45px; padding: 0 20px; background: var(--royalBlue); color: #fff; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.tt-send-btn:hover { filter: brightness(1.1); }

.tt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.tt-modal-overlay.active { display: flex; }
.tt-modal { background: var(--tt-surface-solid); width: 500px; max-width: 90%; border-radius: 8px; border: 1px solid var(--royalBlue); box-shadow: 0 25px 50px rgba(0,0,0,0.5); overflow: hidden; }
.tt-modal-header { padding: 12px 20px; background: rgba(37, 99, 235, 0.1); border-bottom: 1px solid var(--royalBlue); display: flex; justify-content: space-between; align-items: center; }
.tt-modal-title { margin: 0; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.tt-modal-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.tt-modal-body { padding: 0; max-height: 400px; overflow-y: auto; }
.tt-part-row { display: flex; justify-content: space-between; padding: 8px 15px; border-bottom: 1px solid var(--lineColor); align-items: center; }
.tt-part-row:last-child { border-bottom: none; }
.tt-part-name { font-weight: 700; font-size: 13px; color: var(--tt-text-soft); }
.tt-part-role { font-size: 11px; color: var(--tt-muted); }
@media (max-width: 900px) { .tt-chat-wrap { flex-direction: column; height: auto; } .tt-chat-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--lineColor); } .tt-chat-main { height: 600px; } }

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationslisten vereinheitlicht */
.tt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-friend-list .tt-u-item,
.tt-list-click {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item .tt-act-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-item .tt-u-avatar,
.tt-friend-list .tt-u-item .tt-u-details,
.tt-friend-list .tt-u-item .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}
.tt-friend-list .tt-u-item .tt-u-name span,
.tt-friend-list .tt-u-item .tt-u-msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-friend-list .tt-u-item.active {
    box-shadow: inset 3px 0 0 var(--brandGold, #f2c14a);
}
.tt-friend-list .tt-u-item:hover {
    transform: none;
}


/* Follow-up: schönere Chatlisten */
.tt-friend-list{padding:10px;gap:8px;}
.tt-friend-list .tt-u-item{min-height:72px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.tt-friend-list .tt-u-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg, rgba(255,215,122,.95), rgba(242,193,74,.35));opacity:0;transition:opacity .18s ease, box-shadow .18s ease;}
.tt-friend-list .tt-u-item.active::before,.tt-friend-list .tt-u-item:hover::before{opacity:1;box-shadow:0 0 12px rgba(242,193,74,.25);}
.tt-friend-list .tt-u-item.active{background:linear-gradient(135deg, rgba(20,76,200,.22), rgba(242,193,74,.06));border-color:rgba(242,193,74,.18);box-shadow:0 0 0 1px rgba(242,193,74,.08) inset;}
.tt-u-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}


/* Block 6 UI final follow-up */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0!important;font-size:13px!important;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge{width:10px!important;height:10px!important;min-width:10px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after,.tt-sender-name .tt-badge::after{width:2px!important;height:4px!important;border-width:0 1.2px 1.2px 0!important;}


/* fix6 gruppenchat consistency */
.tt-chat-wrap{grid-template-columns:minmax(240px,270px) minmax(0,1fr)!important;height:calc(100vh - 145px)!important;min-height:680px!important;}
.tt-chat-sidebar{width:auto!important;min-width:240px!important;}
.tt-user-list .tt-u-item,.tt-friend-list .tt-u-item,.tt-ticket-item{min-height:60px!important;padding:10px 12px!important;border-radius:16px!important;}


/* ===== MIGRIERT AUS kommunikation_nachricht_hcs.css ===== */

/* MASTER CHAT DESIGN (Royal Blue & Grid Background) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

/* HAUPT CONTAINER */
.tt-chat-wrap {
    display: flex;
    height: calc(100vh - 180px);
    min-height: 600px;
    width: 100%;
    margin: 0;
    background: var(--darkBg);
    border: 1px solid var(--lineColor);
    border-radius: 12px;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    color: var(--tt-text-soft);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* SIDEBAR (Links) */
.tt-chat-sidebar {
    width: 300px;
    background: var(--darkPanel);
    border-right: 1px solid var(--lineColor);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.tt-chat-sb-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--lineColor);
    background: rgba(255, 255, 255, 0.02);
}

.tt-sb-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--brandGold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tt-friend-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* LIST ITEM */
.tt-u-item {
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.tt-u-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tt-u-item.active {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}

.tt-u-name {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
}

.tt-u-msg {
    font-size: 11px;
    color: var(--tt-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MAIN CHAT BEREICH (Rechts) */
.tt-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--darkBg);
    position: relative;
}

/* HEADER */
.tt-msg-header {
    height: 55px;
    padding: 0 25px;
    border-bottom: 1px solid var(--lineColor);
    display: flex;
    align-items: center;
    background: var(--darkPanel);
    z-index: 10;
}

.tt-active-user {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CHAT AREA MIT GRID HINTERGRUND */
.tt-msg-area {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    /* DAS GRID MUSTER */
    background-color: var(--tt-bg-1);
    background-image: radial-gradient(#252a33 1px, transparent 1px);
    background-size: 20px 20px;
}

.tt-msg-area::-webkit-scrollbar { width: 8px; }
.tt-msg-area::-webkit-scrollbar-thumb { background: var(--lineColor); border-radius: 4px; }

/* NACHRICHTEN BUBBLES */
.tt-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    margin-bottom: 5px;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* EIGENE NACHRICHTEN (RECHTS) */
.tt-msg.own {
    align-self: flex-end;
    align-items: flex-end;
}

.tt-msg.own .tt-msg-bubble {
    background: var(--royalBlue);
    color: #fff;
    border-radius: 12px 12px 2px 12px; /* Zipfel unten rechts */
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* ANDERE NACHRICHTEN (LINKS) */
.tt-msg.other {
    align-self: flex-start;
    align-items: flex-start;
}

.tt-msg.other .tt-msg-bubble {
    background: #1f242c;
    color: #e0e0e0;
    border: 1px solid var(--lineColor);
    border-radius: 12px 12px 12px 2px; /* Zipfel unten links */
    /* Optional: Goldene Kante links für "Wichtig" Look */
    border-left: 3px solid var(--brandGold); 
}

.tt-msg-bubble {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
}

/* META INFOS (Name, Zeit, Rolle) */
.tt-msg-meta {
    font-size: 10px;
    color: var(--tt-faint);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.tt-msg.own .tt-msg-meta { justify-content: flex-end; }

/* BADGES & LABELS */
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }
.tt-chat-badge { transform: scale(0.8); }

.tt-role-label {
    background: var(--tt-line-solid);
    color: var(--tt-text-soft);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 700;
}

.tt-role-hc {
    background: rgba(242, 193, 74, 0.15);
    color: var(--brandGold);
    border: 1px solid rgba(242, 193, 74, 0.3);
}

.tt-ally-tag {
    color: var(--tt-blue-3);
    font-weight: 600;
}

/* INPUT BEREICH */
.tt-input-wrapper {
    background: var(--darkPanel);
    border-top: 1px solid var(--lineColor);
    padding: 20px;
}

.tt-input-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.tt-chat-textarea {
    flex: 1;
    background: var(--darkBg);
    border: 1px solid var(--lineColor);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    height: 50px;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s;
}

.tt-chat-textarea:focus {
    border-color: var(--royalBlue);
    outline: none;
}

.tt-send-btn {
    height: 50px;
    padding: 0 25px;
    background: var(--royalBlue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    transition: filter 0.2s;
}

.tt-send-btn:hover {
    filter: brightness(1.1);
}

@media (max-width: 900px) {
    .tt-chat-wrap { flex-direction: column; height: auto; }
    .tt-chat-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--lineColor); }
    .tt-chat-main { height: 600px; }
}

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationsbereich */
.tt-chat-main { min-width: 0; }
.tt-msg-area { min-height: 320px; }
.tt-input-row { width: 100%; }


/* Follow-up: schönere Chatlisten */
.tt-friend-list{padding:10px;gap:8px;}
.tt-friend-list .tt-u-item{min-height:72px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.tt-friend-list .tt-u-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg, rgba(255,215,122,.95), rgba(242,193,74,.35));opacity:0;transition:opacity .18s ease, box-shadow .18s ease;}
.tt-friend-list .tt-u-item.active::before,.tt-friend-list .tt-u-item:hover::before{opacity:1;box-shadow:0 0 12px rgba(242,193,74,.25);}
.tt-friend-list .tt-u-item.active{background:linear-gradient(135deg, rgba(20,76,200,.22), rgba(242,193,74,.06));border-color:rgba(242,193,74,.18);box-shadow:0 0 0 1px rgba(242,193,74,.08) inset;}
.tt-u-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}


/* Block 6 UI final follow-up */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0!important;font-size:13px!important;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge{width:10px!important;height:10px!important;min-width:10px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after,.tt-sender-name .tt-badge::after{width:2px!important;height:4px!important;border-width:0 1.2px 1.2px 0!important;}


/* fix6 hcs consistency */
.tt-chat-wrap{grid-template-columns:minmax(240px,270px) minmax(0,1fr)!important;height:calc(100vh - 145px)!important;min-height:680px!important;}


/* ===== MIGRIERT AUS kommunikation_vip_chat.css ===== */

/* kommunikation_gruppenchat.css (MASTER ROYAL DESIGN + PARTICIPANTS) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

.tt-chat-wrap { display: flex; height: calc(100vh - 180px); min-height: 600px; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 12px; overflow: hidden; margin:0; }
.tt-chat-sidebar { width: 290px; background: var(--darkPanel); border-right: 1px solid var(--lineColor); display: flex; flex-direction: column; }
.tt-chat-sb-header { padding: 15px; border-bottom: 1px solid var(--lineColor); background: rgba(255,255,255,0.02); }
.tt-sb-title { font-size: 11px; font-weight: 800; color: var(--brandGold); text-transform: uppercase; letter-spacing: 1px; }
.tt-friend-list { flex: 1; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }

/* LIST ITEM (Raum) - Flexbox für Button rechts */
.tt-u-item { 
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; 
}
.tt-u-item:hover { background: rgba(255,255,255,0.04); }
.tt-u-item.active { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); }

/* Klickbereich für Raumwechsel */
.tt-u-content { flex: 1; display: flex; align-items: center; overflow: hidden; }
.tt-u-name { font-weight: 700; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* NEU: Teilnehmer Button */
.tt-part-btn {
    background: transparent; border: none; color: var(--tt-faint-2); padding: 4px 8px; 
    border-radius: 4px; cursor: pointer; transition: 0.2s; margin-left: 5px;
}
.tt-part-btn:hover { background: rgba(255,255,255,0.1); color: var(--tt-text-soft); }
.tt-u-item.active .tt-part-btn { color: var(--royalBlue); }
.tt-u-item.active .tt-part-btn:hover { color: #fff; background: var(--royalBlue); }

/* MAIN AREA */
.tt-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--darkBg); }
.tt-msg-header { height: 50px; padding: 0 20px; border-bottom: 1px solid var(--lineColor); display: flex; align-items: center; background: var(--darkPanel); }
.tt-active-user { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; }

/* CHAT AREA WITH GRID */
.tt-msg-area { 
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; 
    background-color: var(--tt-bg-1); background-image: radial-gradient(var(--tt-surface-hover-solid) 1px, transparent 1px); background-size: 20px 20px;
}
.tt-msg-area::-webkit-scrollbar { width: 6px; }
.tt-msg-area::-webkit-scrollbar-thumb { background: var(--lineColor); border-radius: 3px; }

/* BUBBLES */
.tt-msg { display: flex; flex-direction: column; max-width: 80%; }
.tt-msg.own { align-self: flex-end; align-items: flex-end; }
.tt-msg.other { align-self: flex-start; align-items: flex-start; }

.tt-msg-bubble { padding: 8px 14px; font-size: 14px; line-height: 1.5; border-radius: 8px; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tt-msg.own .tt-msg-bubble { background: var(--royalBlue); border-bottom-right-radius: 2px; }
.tt-msg.other .tt-msg-bubble { background: #1f242c; border: 1px solid var(--lineColor); border-bottom-left-radius: 2px; border-left: 2px solid var(--brandGold); }

.tt-msg-meta { font-size: 10px; color: var(--tt-faint); margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }
.tt-chat-badge { transform: scale(0.8); }

/* BADGES */
.tt-role-label { background: var(--tt-line-solid); color: var(--tt-text-soft); padding: 1px 4px; border-radius: 3px; font-size: 9px; text-transform: uppercase; font-weight: 700; }
.tt-role-hc { background: rgba(242, 193, 74, 0.15); color: var(--brandGold); border: 1px solid rgba(242, 193, 74, 0.3); }
.tt-ally-tag { color: var(--tt-blue-3); font-weight: 600; }

/* INPUT */
.tt-input-wrapper { background: var(--darkPanel); border-top: 1px solid var(--lineColor); padding: 15px; }
.tt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-chat-textarea { flex: 1; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 6px; padding: 10px; color: #fff; height: 45px; resize: none; font-family: inherit; }
.tt-chat-textarea:focus { border-color: var(--royalBlue); outline: none; }
.tt-send-btn { height: 45px; padding: 0 20px; background: var(--royalBlue); color: #fff; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.tt-send-btn:hover { filter: brightness(1.1); }

/* MODALS */
.tt-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.tt-modal-overlay.active { display: flex; }
.tt-modal { background: var(--tt-surface-solid); width: 500px; max-width: 90%; border-radius: 8px; border: 1px solid var(--royalBlue); box-shadow: 0 25px 50px rgba(0,0,0,0.5); overflow: hidden; }
.tt-modal-header { padding: 12px 20px; background: rgba(37, 99, 235, 0.1); border-bottom: 1px solid var(--royalBlue); display: flex; justify-content: space-between; align-items: center; }
.tt-modal-title { margin: 0; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.tt-modal-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.tt-modal-body { padding: 0; max-height: 400px; overflow-y: auto; }

/* PARTICIPANT LIST IN MODAL */
.tt-part-row { display: flex; justify-content: space-between; padding: 8px 15px; border-bottom: 1px solid var(--lineColor); align-items: center; }
.tt-part-row:last-child { border-bottom: none; }
.tt-part-name { font-weight: 700; font-size: 13px; color: var(--tt-text-soft); }
.tt-part-role { font-size: 11px; color: var(--tt-muted); }

@media (max-width: 900px) {
    .tt-chat-wrap { flex-direction: column; height: auto; }
    .tt-chat-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--lineColor); }
    .tt-chat-main { height: 600px; }
}

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationslisten vereinheitlicht */
.tt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-friend-list .tt-u-item,
.tt-list-click {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item .tt-act-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-item .tt-u-avatar,
.tt-friend-list .tt-u-item .tt-u-details,
.tt-friend-list .tt-u-item .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}
.tt-friend-list .tt-u-item .tt-u-name span,
.tt-friend-list .tt-u-item .tt-u-msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-friend-list .tt-u-item.active {
    box-shadow: inset 3px 0 0 var(--brandGold, #f2c14a);
}
.tt-friend-list .tt-u-item:hover {
    transform: none;
}


/* Follow-up: schönere Chatlisten */
.tt-friend-list{padding:10px;gap:8px;}
.tt-friend-list .tt-u-item{min-height:72px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.tt-friend-list .tt-u-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg, rgba(255,215,122,.95), rgba(242,193,74,.35));opacity:0;transition:opacity .18s ease, box-shadow .18s ease;}
.tt-friend-list .tt-u-item.active::before,.tt-friend-list .tt-u-item:hover::before{opacity:1;box-shadow:0 0 12px rgba(242,193,74,.25);}
.tt-friend-list .tt-u-item.active{background:linear-gradient(135deg, rgba(20,76,200,.22), rgba(242,193,74,.06));border-color:rgba(242,193,74,.18);box-shadow:0 0 0 1px rgba(242,193,74,.08) inset;}
.tt-u-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}


/* Block 6 UI final follow-up */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-friend-list .tt-u-item{min-height:68px!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0!important;font-size:13px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge{width:10px!important;height:10px!important;min-width:10px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after,.tt-sender-name .tt-badge::after{width:2px!important;height:4px!important;border-width:0 1.2px 1.2px 0!important;}


/* fix6 vip chat consistency */
.tt-chat-wrap{grid-template-columns:minmax(240px,270px) minmax(0,1fr)!important;height:calc(100vh - 145px)!important;min-height:680px!important;}
.tt-chat-sidebar{width:auto!important;min-width:240px!important;}
.tt-user-list .tt-u-item,.tt-friend-list .tt-u-item,.tt-ticket-item{min-height:60px!important;padding:10px 12px!important;border-radius:16px!important;}


/* ===== MIGRIERT AUS kommunikation_whatsapp.css ===== */

/* WhatsApp-Link */


/* ===== MIGRIERT AUS superuser_ticket.css ===== */

/* superuser_ticket.css (Fixed Badges) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

/* --- BADGES ORIGINAL DESIGN (FIXED) --- */
.tt-badge {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%; position: relative; margin-left: 2px; vertical-align: -1px; flex-shrink: 0;
}
.tt-badge::after {
    content: ''; position: absolute; top: 45%; left: 50%; width: 3px; height: 5px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translate(-50%, -60%) rotate(45deg);
}
.tt-badge.is-gold { background: var(--tt-gold); box-shadow: 0 0 5px rgba(242, 193, 78, 0.4); }
.tt-badge.is-alpha, .tt-badge.is-silver { background: linear-gradient(135deg, #e0e0e0, var(--tt-muted)); border: 1px solid var(--tt-faint); }
.tt-badge.is-premium, .tt-badge.is-blue { background: var(--tt-blue); border: 1px solid var(--tt-gold); }
.tt-badge.is-premium::after { border-color: #fff; }
.tt-badge.is-elite { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

.tt-chat-wrap { display: flex; height: calc(100vh - 180px); min-height: 600px; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 12px; overflow: hidden; margin:0; }
.tt-chat-sidebar { width: 320px; background: var(--darkPanel); border-right: 1px solid var(--lineColor); display: flex; flex-direction: column; }
.tt-chat-sb-header { padding: 15px; border-bottom: 1px solid var(--lineColor); background: rgba(255,255,255,0.02); }
.tt-sb-title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; color: var(--brandGold); text-transform: uppercase; }
.tt-sb-actions { display: flex; gap: 5px; background: var(--tt-bg-2); padding: 2px; border-radius: 4px; border: 1px solid var(--lineColor); }
.tt-view-btn { background: transparent; border: none; color: var(--tt-faint); font-size: 10px; font-weight: 700; padding: 4px 8px; cursor: pointer; border-radius: 3px; }
.tt-view-btn.active { background: var(--royalBlue); color: #fff; }
.tt-friend-list { flex: 1; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }

.tt-u-item { display: block; padding: 12px 15px; border-radius: 6px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; border-left: 3px solid transparent; }
.tt-u-item:hover { background: rgba(255,255,255,0.04); }
.tt-u-item.active { background: rgba(37,99,235,0.08); border-left-color: var(--royalBlue); }
.tt-u-name { font-weight: 700; color: #fff; font-size: 13px; display: flex; justify-content: space-between; }
.tt-u-msg { font-size: 11px; color: var(--tt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tt-cnt-badge { background: var(--tt-red); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; float: right; margin-top: 5px; }

.tt-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--darkBg); position: relative; }
.tt-msg-header { height: 50px; padding: 0 20px; border-bottom: 1px solid var(--lineColor); display: flex; align-items: center; background: var(--darkPanel); }
.tt-act-btn { background: transparent; border: 1px solid var(--lineColor); color: var(--tt-muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.tt-act-btn:hover { color: #fff; border-color: #fff; }
.tt-act-btn.del:hover { color: var(--tt-red); border-color: var(--tt-red); }

.tt-msg-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background-color: var(--tt-bg-1); background-image: radial-gradient(var(--tt-surface-hover-solid) 1px, transparent 1px); background-size: 20px 20px; }
.tt-msg { display: flex; flex-direction: column; max-width: 80%; }
.tt-msg.own { align-self: flex-end; align-items: flex-end; }
.tt-msg.other { align-self: flex-start; align-items: flex-start; }
.tt-msg-bubble { padding: 10px 15px; font-size: 14px; line-height: 1.5; border-radius: 8px; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tt-msg.own .tt-msg-bubble { background: var(--royalBlue); border-bottom-right-radius: 2px; }
.tt-msg.other .tt-msg-bubble { background: #1f242c; border: 1px solid var(--lineColor); border-bottom-left-radius: 2px; border-left: 2px solid var(--brandGold); }
.tt-msg-meta { font-size: 10px; color: var(--tt-faint); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }
.tt-role-hc { background: rgba(242,193,74,0.15); color: var(--brandGold); border: 1px solid rgba(242,193,74,0.3); padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 700; }

.tt-input-wrapper { background: var(--darkPanel); border-top: 1px solid var(--lineColor); padding: 15px; }
.tt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-chat-textarea { flex: 1; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 6px; padding: 10px; color: #fff; height: 45px; resize: none; font-family: inherit; }
.tt-chat-textarea:focus { border-color: var(--royalBlue); outline: none; }
.tt-send-btn { height: 45px; padding: 0 20px; background: var(--royalBlue); color: #fff; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.tt-send-btn:hover { filter: brightness(1.1); }
.tt-closed-notice { background: var(--tt-line-solid); color: #fff; padding: 15px; text-align: center; border-top: 1px solid var(--lineColor); font-weight: 700; }
@media (max-width: 900px) { .tt-chat-wrap { flex-direction: column; height: auto; } .tt-chat-sidebar { width: 100%; height: 300px; border-right: none; border-bottom: 1px solid var(--lineColor); } .tt-chat-main { height: 600px; } }

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationslisten vereinheitlicht */
.tt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-friend-list .tt-u-item,
.tt-list-click {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item .tt-act-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-item .tt-u-avatar,
.tt-friend-list .tt-u-item .tt-u-details,
.tt-friend-list .tt-u-item .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}
.tt-friend-list .tt-u-item .tt-u-name span,
.tt-friend-list .tt-u-item .tt-u-msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-friend-list .tt-u-item.active {
    box-shadow: inset 3px 0 0 var(--brandGold, #f2c14a);
}
.tt-friend-list .tt-u-item:hover {
    transform: none;
}


/* Block 6 UI final follow-up */
.tt-chat-wrap{display:grid!important;grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0!important;font-size:13px!important;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge{width:10px!important;height:10px!important;min-width:10px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after,.tt-sender-name .tt-badge::after{width:2px!important;height:4px!important;border-width:0 1.2px 1.2px 0!important;}


/* ===== MIGRIERT AUS travtools_kontakt.css ===== */

/* travtools_kontakt.css (Final - Left Aligned Form) */

:root {
    --royalBlue: var(--tt-blue-2);
    --darkPanel: var(--tt-surface-solid);
    --darkBg: var(--tt-bg-2);
    --lineColor: var(--tt-line-solid);
    --brandGold: #f2c14a;
}

/* --- GAST VIEW --- */
.tt-guest-wrap { display: flex; justify-content: center; align-items: center; height: 70vh; }
.tt-guest-card { background: var(--darkPanel); border: 1px solid var(--lineColor); border-radius: 16px; padding: 40px; text-align: center; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.tt-guest-icon { font-size: 50px; color: var(--brandGold); margin-bottom: 20px; }
.tt-guest-card h1 { color: #fff; margin: 0 0 10px 0; }
.tt-guest-card p { color: var(--tt-muted); line-height: 1.6; margin-bottom: 30px; }
.tt-guest-actions { display: flex; gap: 15px; justify-content: center; }
.tt-btn-login { padding: 12px 25px; border-radius: 8px; font-weight: 800; text-decoration: none; background: var(--royalBlue); color: #fff; }

/* --- MAIN LAYOUT --- */
.tt-chat-wrap { display: grid; grid-template-columns: minmax(250px,290px) minmax(0,1fr); height: calc(100vh - 180px); min-height: 600px; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 12px; overflow: hidden; margin:0; }
.tt-chat-sidebar { width: 290px; min-width:290px; background: var(--darkPanel); border-right: 1px solid var(--lineColor); display: flex; flex-direction: column; }
.tt-chat-sb-header { padding: 15px; border-bottom: 1px solid var(--lineColor); background: rgba(255,255,255,0.02); }
.tt-sb-title { font-size: 11px; font-weight: 800; color: var(--brandGold); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.tt-icon-btn { background: transparent; border: 1px solid var(--lineColor); color: #fff; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; }
.tt-icon-btn:hover { background: var(--royalBlue); border-color: var(--royalBlue); }

.tt-friend-list { flex: 1; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }

/* ITEMS */
.tt-u-item { padding: 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid transparent; }
.tt-u-item:hover { background: rgba(255,255,255,0.04); }
.tt-u-item.active { background: rgba(37,99,235,0.08); border-left-color: var(--royalBlue); }
.tt-u-name { font-weight: 700; color: #fff; font-size: 13px; }
.tt-st-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 5px; }
.st-online { background: var(--tt-green); } 
.st-offline { background: var(--tt-faint); }
.tt-cnt-badge { background: var(--tt-red); color: #fff; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; }

/* MAIN AREA */
.tt-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--darkBg); position: relative; }
.tt-msg-header { height: 50px; padding: 0 20px; border-bottom: 1px solid var(--lineColor); display: flex; align-items: center; background: var(--darkPanel); }

/* --- CREATE FORM (LINKSBÜNDIG) --- */
.tt-form-container { padding: 40px; overflow-y: auto; height: 100%; color: #fff; }
.tt-form-container h2 { color: var(--brandGold); border-bottom: 1px solid var(--lineColor); padding-bottom: 15px; margin-top: 0; text-align: left; }
/* HIER: margin 0 statt margin auto */
.tt-form-box { max-width: 600px; margin: 0; } 
.tt-form-group { margin-bottom: 15px; }
.tt-form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--tt-muted); margin-bottom: 5px; text-transform: uppercase; }
.tt-inp { width: 100%; padding: 12px; background: var(--tt-bg-1); border: 1px solid var(--lineColor); color: #fff; border-radius: 6px; box-sizing: border-box; font-family: inherit; }
.tt-inp.readonly { background: rgba(255,255,255,0.02); color: var(--tt-muted); cursor: not-allowed; }
.tt-inp:focus { border-color: var(--royalBlue); outline: none; }
.tt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tt-form-check { margin: 20px 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tt-text-soft); }
.tt-form-actions { text-align: left; } /* Buttons links */

/* BUTTONS */
.tt-send-btn { height: 45px; padding: 0 20px; background: var(--royalBlue); color: #fff; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: 12px; }
.tt-send-btn:hover { filter: brightness(1.1); }
.tt-act-btn { background: transparent; border: 1px solid var(--lineColor); color: var(--tt-muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.tt-act-btn:hover { color: #fff; border-color: #fff; }

/* CHAT BUBBLES */
.tt-msg-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background-color: var(--tt-bg-1); background-image: radial-gradient(var(--tt-surface-hover-solid) 1px, transparent 1px); background-size: 20px 20px; }
.tt-msg { display: flex; flex-direction: column; max-width: 80%; }
.tt-msg.own { align-self: flex-end; align-items: flex-end; }
.tt-msg.other { align-self: flex-start; align-items: flex-start; }
.tt-msg-bubble { padding: 10px 15px; font-size: 14px; line-height: 1.5; border-radius: 8px; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.tt-msg.own .tt-msg-bubble { background: var(--royalBlue); border-bottom-right-radius: 2px; }
.tt-msg.other .tt-msg-bubble { background: #1f242c; border: 1px solid var(--lineColor); border-bottom-left-radius: 2px; border-left: 2px solid var(--brandGold); }
.tt-msg-meta { font-size: 10px; color: var(--tt-faint); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.tt-sender-name { font-weight: 700; color: var(--tt-muted); }
.tt-role-hc { background: rgba(242,193,74,0.15); color: var(--brandGold); border: 1px solid rgba(242,193,74,0.3); padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 700; }
.tt-chat-badge { transform: scale(0.8); }

/* INPUT */
.tt-input-wrapper { background: var(--darkPanel); border-top: 1px solid var(--lineColor); padding: 15px; }
.tt-input-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-chat-textarea { flex: 1; background: var(--darkBg); border: 1px solid var(--lineColor); border-radius: 6px; padding: 10px; color: #fff; height: 45px; resize: none; font-family: inherit; }
.tt-chat-textarea:focus { border-color: var(--royalBlue); outline: none; }

.tt-closed-notice { background: var(--tt-line-solid); color: #fff; padding: 15px; text-align: center; border-top: 1px solid var(--lineColor); font-weight: 700; }

@media (max-width: 900px) {
    .tt-chat-wrap { flex-direction: column; height: auto; }
    .tt-chat-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--lineColor); }
    .tt-chat-main { height: 600px; }
}

/* Voll klickbare Listen-Kacheln */
.tt-friend-list .tt-u-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-details,
.tt-friend-list .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}


/* Block 3 – Kommunikationslisten vereinheitlicht */
.tt-friend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-friend-list .tt-u-item,
.tt-list-click {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tt-friend-list .tt-u-item > * {
    pointer-events: none;
}
.tt-friend-list .tt-u-item .tt-mute-btn,
.tt-friend-list .tt-u-item .tt-part-btn,
.tt-friend-list .tt-u-item .tt-act-btn,
.tt-friend-list .tt-u-item button,
.tt-friend-list .tt-u-item a,
.tt-friend-list .tt-u-item [role="button"] {
    pointer-events: auto;
}
.tt-friend-list .tt-u-item .tt-u-avatar,
.tt-friend-list .tt-u-item .tt-u-details,
.tt-friend-list .tt-u-item .tt-u-content {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-friend-list .tt-u-name,
.tt-friend-list .tt-u-msg {
    min-width: 0;
}
.tt-friend-list .tt-u-item .tt-u-name span,
.tt-friend-list .tt-u-item .tt-u-msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-friend-list .tt-u-item.active {
    box-shadow: inset 3px 0 0 var(--brandGold, #f2c14a);
}
.tt-friend-list .tt-u-item:hover {
    transform: none;
}


/* Follow-up: schönere Ticketliste + mehr Platz für Chat */
.tt-friend-list{padding:10px;gap:8px;}
.tt-friend-list .tt-u-item{min-height:72px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.tt-friend-list .tt-u-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg, rgba(255,215,122,.95), rgba(242,193,74,.35));opacity:.0;transition:opacity .18s ease, box-shadow .18s ease;}
.tt-friend-list .tt-u-item.active::before,.tt-friend-list .tt-u-item:hover::before{opacity:1;box-shadow:0 0 12px rgba(242,193,74,.25);}
.tt-friend-list .tt-u-item.active{background:linear-gradient(135deg, rgba(20,76,200,.22), rgba(242,193,74,.06));border-color:rgba(242,193,74,.18);box-shadow:0 0 0 1px rgba(242,193,74,.08) inset;}
.tt-u-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px;}
.tt-msg-header{justify-content:space-between;}


/* Block 6 UI final follow-up */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:280px!important;min-width:280px!important;}
.tt-chat-main{min-width:0!important;}
.tt-friend-list .tt-u-item{align-items:center!important;min-height:68px!important;}
.tt-friend-list .tt-u-item .tt-u-name{display:flex;align-items:center;gap:0;font-size:14px!important;}
.tt-friend-list .tt-u-item .tt-u-msg{display:none!important;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge{width:11px!important;height:11px!important;min-width:11px!important;margin-left:2px!important;box-shadow:none!important;}
.tt-msg-meta .tt-badge::after,.tt-sender-name .tt-badge::after{width:2.5px!important;height:5px!important;border-width:0 1.4px 1.4px 0!important;}


/* fix5 rebuild */
.tt-chat-wrap{grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;}
.tt-chat-sidebar{width:auto!important;min-width:240px!important;}
.tt-friend-list .tt-u-msg,.tt-ticket-preview,.tt-last-msg{display:none!important;}
.tt-friend-list .tt-u-item,.tt-ticket-item{min-height:70px!important;border-radius:18px!important;}


/* fix6 contact/chat sizing */
.tt-chat-wrap{grid-template-columns:minmax(240px,270px) minmax(0,1fr)!important;height:calc(100vh - 145px)!important;min-height:680px!important;}
.tt-chat-sidebar{width:auto!important;min-width:240px!important;}
.tt-chat-main{min-width:0!important;}
.tt-friend-list .tt-u-item,.tt-ticket-item{min-height:60px!important;padding:10px 12px!important;border-radius:16px!important;}
.tt-msg-area{padding:18px!important;}
.tt-input-wrapper{padding:14px!important;}


/* ===== Repair Block 2 · Kontakt / Chat / Tickets ===== */
body.tt-app .tt-chat-wrap{display:grid!important;grid-template-columns:minmax(250px,300px) minmax(0,1fr)!important;gap:0;height:calc(100vh - 190px)!important;min-height:640px!important;background:rgba(11,16,28,.72);border:1px solid rgba(255,255,255,.10);border-radius:22px;overflow:hidden;}
body.tt-app .tt-chat-sidebar{width:auto!important;min-width:0!important;background:linear-gradient(180deg, rgba(20,30,52,.78), rgba(12,17,28,.94));border-right:1px solid rgba(255,255,255,.08);padding:0;display:flex;flex-direction:column;}
body.tt-app .tt-chat-sb-header{padding:18px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;}
body.tt-app .tt-sb-title{font-size:15px;font-weight:900;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
body.tt-app .tt-friend-list{padding:10px;gap:8px;}
body.tt-app .tt-u-item{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));position:relative;}
body.tt-app .tt-u-item:hover{background:linear-gradient(180deg, rgba(37,99,235,.18), rgba(18,28,48,.82));border-color:rgba(242,193,74,.22);}
body.tt-app .tt-u-item.active{background:linear-gradient(180deg, rgba(37,99,235,.20), rgba(18,28,48,.86));border-color:rgba(242,193,74,.28);box-shadow:inset 3px 0 0 #f2c14a;}
body.tt-app .tt-u-name{display:inline-flex;align-items:center;gap:2px;font-weight:800;color:#fff;}
body.tt-app .tt-u-msg{display:none!important;}
body.tt-app .tt-chat-main{min-width:0;background:linear-gradient(180deg, rgba(7,12,22,.72), rgba(4,7,13,.96));display:flex;flex-direction:column;}
body.tt-app .tt-msg-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:16px;}
body.tt-app .tt-active-user{font-size:24px;font-weight:900;color:#fff;}
body.tt-app .tt-form-container,.tt-app .tt-form-box{max-width:760px;}
body.tt-app .tt-form-container{padding:22px 22px 12px;}
body.tt-app .tt-form-box{background:transparent;border:none;padding:0;}
body.tt-app .tt-msg-area{flex:1;min-height:0;}
body.tt-app .tt-input-wrapper{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,12,22,.84);}
body.tt-app .tt-chat-textarea{min-height:56px;max-height:180px;}
@media (max-width:1000px){body.tt-app .tt-chat-wrap{grid-template-columns:1fr!important;height:auto!important;min-height:unset!important;}body.tt-app .tt-chat-main{min-height:560px;} }


/* ===== Repair Block 3 · Kontakt / Tickets / Chats ===== */
.tt-chat-wrap{
  width:100%;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}
.tt-chat-sidebar,
.tt-chat-main{
  min-height:720px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(20,29,52,.88), rgba(8,12,20,.92));
  box-shadow:0 16px 38px rgba(0,0,0,.24);
  overflow:hidden;
}
.tt-chat-sidebar{display:flex;flex-direction:column;}
.tt-chat-sb-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.tt-sb-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900;color:#fff;letter-spacing:.04em;font-size:15px;}
.tt-friend-list{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;}
.tt-u-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);cursor:pointer;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.tt-u-item:hover,.tt-u-item.active{background:rgba(37,99,235,.16);border-color:rgba(242,193,74,.26);box-shadow:0 0 0 1px rgba(37,99,235,.22) inset,0 0 16px rgba(37,99,235,.16);}
.tt-u-name{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;}
.tt-cnt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--brandGold);color:#111827;font-size:12px;font-weight:900;}
.tt-chat-main{display:flex;flex-direction:column;min-width:0;}
.tt-msg-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.tt-active-user{font-size:22px;font-weight:900;color:#fff;display:flex;align-items:center;gap:10px;}
.tt-form-container,.tt-chat-wrapper-hidden{display:block;flex:1;min-height:0;}
.tt-form-box{padding:22px;}
.tt-form-container h2{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:clamp(28px,2.5vw,42px);line-height:1.08;color:#fff;font-weight:900;}
.tt-form-container h2 i{color:var(--brandGold);}
.tt-msg-area{flex:1;min-height:520px;padding:20px;overflow:auto;background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:20px 20px;background-position:-8px -8px;}
.tt-input-wrapper{padding:16px 18px;border-top:1px solid rgba(255,255,255,.08);}
.tt-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;}
.tt-chat-textarea{min-height:92px;max-height:180px;}
.tt-closed-notice{padding:16px 18px;color:var(--tt-red-2);border-top:1px solid rgba(248,113,113,.18);background:rgba(127,29,29,.18);}
.tt-msg.other .tt-msg-bubble,.tt-msg.own .tt-msg-bubble{max-width:min(78%,760px);border-radius:18px;padding:14px 16px;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.tt-msg.other .tt-msg-bubble{background:#245fdb;color:#fff;}
.tt-msg.own .tt-msg-bubble{background:rgba(255,255,255,.06);color:#fff;margin-left:auto;}
.tt-msg{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.tt-msg.own{align-items:flex-end;}
.tt-msg.other{align-items:flex-start;}
.tt-msg-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.70);}
@media (max-width:1080px){.tt-chat-wrap{grid-template-columns:1fr;}.tt-chat-sidebar,.tt-chat-main{min-height:auto;}.tt-msg-area{min-height:360px;}}


/* ===== Final Pass · Block 4 · Kommunikation ===== */
.tt-chat-wrap{
  width:100%;
  display:grid!important;
  grid-template-columns:minmax(250px,290px) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
  min-height:unset!important;
  height:auto!important;
}
.tt-chat-sidebar,.tt-chat-main{
  min-height:640px!important;
  height:calc(100vh - 215px)!important;
  max-height:760px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(20,29,52,.88), rgba(8,12,20,.92));
  box-shadow:0 16px 38px rgba(0,0,0,.24);
  overflow:hidden;
}
.tt-chat-sidebar{display:flex;flex-direction:column;}
.tt-chat-main{display:flex;flex-direction:column;min-width:0;}
.tt-chat-sb-header,.tt-msg-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.tt-friend-list,.tt-ticket-list,.tt-chat-list{padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0;}
.tt-u-item,.tt-ticket-item,.tt-chat-list-item{
  min-height:64px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.03)!important;
  box-shadow:none!important;
  transform:none!important;
}
.tt-u-item:hover,.tt-u-item.active,.tt-ticket-item:hover,.tt-ticket-item.active,.tt-chat-list-item:hover,.tt-chat-list-item.active{
  background:rgba(37,99,235,.16)!important;
  border-color:rgba(242,193,74,.24)!important;
  box-shadow:0 0 0 1px rgba(37,99,235,.22) inset,0 0 18px rgba(37,99,235,.12)!important;
  transform:none!important;
}
.tt-u-name,.tt-active-user,.tt-sb-title{display:flex;align-items:center;gap:8px;}
.tt-u-name{font-size:14px;font-weight:800;color:#fff;}
.tt-friend-list .tt-u-item .tt-u-msg,
.tt-ticket-preview,
.tt-last-msg{display:none!important;}
.tt-msg-area{flex:1;min-height:0;height:auto!important;padding:18px;overflow:auto;}
.tt-form-container,.tt-chat-wrapper-hidden{display:block;flex:1;min-height:0;}
.tt-form-box{padding:22px;max-width:none;background:transparent;border:none;box-shadow:none;}
.tt-input-wrapper{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,12,22,.84);}
.tt-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;}
.tt-chat-textarea{min-height:88px;max-height:180px;}
.tt-msg-meta .tt-badge,.tt-sender-name .tt-badge,.tt-u-name .tt-badge{width:12px!important;height:12px!important;min-width:12px!important;display:inline-flex!important;vertical-align:middle;}
@media (max-width:1050px){
  .tt-chat-wrap{grid-template-columns:1fr!important;}
  .tt-chat-sidebar,.tt-chat-main{height:auto!important;max-height:none;min-height:unset!important;}
  .tt-msg-area{min-height:340px;}
}


/* =========================================================
   Repair Block 7 · Chatseiten angleichen
   ========================================================= */
body.tt-app .tt-chat-wrap,
body.tt-app .tt-chat-shell{
  width:100%!important;
  max-width:1320px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(250px,300px) minmax(0,1fr)!important;
  gap:18px!important;
  height:calc(100vh - 190px)!important;
  min-height:640px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
body.tt-app .tt-chat-sidebar,
body.tt-app .tt-ticket-list,
body.tt-app .tt-friend-list,
body.tt-app .tt-chat-list{
  min-height:640px!important;
  height:100%!important;
  overflow:auto!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025))!important;
}
body.tt-app .tt-chat-main,
body.tt-app .tt-ticket-main,
body.tt-app .tt-chat-wrapper-hidden,
body.tt-app .tt-form-container{
  min-height:640px!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025))!important;
}
body.tt-app .tt-msg-area{flex:1 1 auto!important;min-height:240px!important;overflow:auto!important;}
body.tt-app .tt-input-wrapper,
body.tt-app .tt-form-box,
body.tt-app .tt-closed-notice{margin-top:auto!important;border-top:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.03)!important;}
body.tt-app .tt-user-list .tt-u-item,
body.tt-app .tt-friend-list .tt-u-item,
body.tt-app .tt-ticket-item{
  min-height:62px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
}
body.tt-app .tt-friend-list .tt-u-item .tt-u-name,
body.tt-app .tt-user-list .tt-u-item .tt-u-name,
body.tt-app .tt-ticket-item .tt-u-name,
body.tt-app .tt-ticket-item .tt-ticket-ref{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}
@media (max-width: 980px){
  body.tt-app .tt-chat-wrap,
  body.tt-app .tt-chat-shell{grid-template-columns:1fr!important;height:auto!important;min-height:0!important;}
  body.tt-app .tt-chat-sidebar,
  body.tt-app .tt-ticket-list,
  body.tt-app .tt-friend-list,
  body.tt-app .tt-chat-list,
  body.tt-app .tt-chat-main,
  body.tt-app .tt-ticket-main,
  body.tt-app .tt-chat-wrapper-hidden,
  body.tt-app .tt-form-container{min-height:420px!important;}
}

.tt-guest-card,.tt-guest-card h1,.tt-guest-card p{text-align:center!important;}
.tt-guest-icon,.tt-guest-actions{display:flex;justify-content:center;}