.workspace-container { display: flex; flex-direction: column; height: calc(100vh - 120px); overflow: hidden; }
.workspace-header { flex-shrink: 0; }
.workspace-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1.5rem; flex-grow: 1; min-height: 0; }
.workspace-col { overflow-y: auto; padding-right: 0.5rem; display: flex; flex-direction: column; gap: 1rem; }
.workspace-col-right { padding-right: 0; padding-left: 0.5rem; }

.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-top: 3px solid var(--c-gold); }
.chat-history { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; background: #f8f9fa; }
.chat-message { display: flex; flex-direction: column; max-width: 85%; }
.chat-message.agent { align-self: flex-end; align-items: flex-end; }
.chat-message.customer { align-self: flex-start; }
.chat-bubble { padding: 1rem; border-radius: var(--radius-md); line-height: 1.5; font-size: 0.95rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.chat-bubble.internal { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.chat-bubble.agent { background: var(--c-marine); color: white; border-bottom-right-radius: 0; }
.chat-bubble.customer { background: white; border: 1px solid var(--c-beige-light); border-bottom-left-radius: 0; }
.chat-input-area { padding: 1rem; background: white; border-top: 1px solid var(--c-beige-light); }
.chat-textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--c-blue-grey); border-radius: var(--radius-sm); font-family: inherit; resize: vertical; min-height: 150px; }

.slide-toggle-btn { width: 100%; background: none; border: none; text-align: center; color: var(--c-marine); font-weight: bold; cursor: pointer; padding: 0.5rem 0; }
.slide-toggle-btn.success { color: var(--c-success); }
.tabs-nav { display: flex; border-bottom: 1px solid var(--c-beige-light); margin-bottom: 1.5rem; }
.tab-btn { padding: 0.75rem 1.5rem; background: none; border: none; border-bottom: 2px solid transparent; font-family: inherit; font-weight: bold; color: var(--c-blue-grey); cursor: pointer; transition: all 0.2s; }
.tab-btn.active { color: var(--c-marine); border-bottom-color: var(--c-marine); }

select[id^="prio-select-"] { font-weight: bold; border-radius: 4px; padding: 0.2rem 0.5rem; cursor: pointer; border: 1px solid transparent; }
.prio-low { background-color: #f8f9fa; color: #6c757d; border-color: #dee2e6; }
.prio-normal { background-color: #e3f2fd; color: #0056b3; border-color: #b8daff; }
.prio-high { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
.prio-urgent { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; animation: pulse-border 2s infinite; }

.icon-gold { color: var(--c-gold); }
.icon-sm { width: 16px; }
.icon-xs { width: 12px; }
.icon-empty-state { width: 48px; height: 48px; opacity: 0.5; margin-bottom: 1rem; }
.ticket-list-card { overflow: hidden; }
.th-ticket-id, .td-ticket-id { padding-left: 24px; }
.th-action, .td-action { padding-right: 24px; text-align: right; }
.ticket-row { cursor: pointer; transition: background-color 0.2s; }
.ticket-row:hover { background-color: var(--c-beige-bg); }
.badge-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.td-prio { width: 150px; }
.ticket-prio-select { border: 1px solid var(--c-beige-light); padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); outline: none; }
.customer-link { text-decoration: none; }
.customer-link:hover { text-decoration: underline; }

.tag-bubble { text-decoration: none; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; transition: all 0.2s ease-in-out; border: 1px solid var(--c-beige-light); background-color: #f8f9fa; color: var(--c-muted); display: inline-flex; align-items: center; }
.tag-bubble:hover { border-color: var(--tag-color); color: var(--tag-color); }
.tag-bubble.active { border-color: var(--tag-color); background-color: var(--tag-color); color: #fff; }

/* --- MOBILE WEICHE: TICKET-ANSICHT --- */
@media (max-width: 768px) {
    /* 1. Haupt-Ticket-Container die starre Höhe wegnehmen */
    .workspace-container { display: block !important; height: auto !important; overflow: visible !important; }
    
    /* 2. GRID AUF 1 SPALTE STAPELN (Löst das Quetsch-Problem!) */
    .workspace-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
    
    /* 3. Spalten auf 100% Breite ziehen und Padding entfernen */
    .workspace-col, .workspace-col-right { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important; padding: 0 !important; border: none !important; }

    /* 4. CHAT-BOX CLIPPING BEHEBEN (Löst den abgeschnittenen Text unten!) */
    .chat-card { display: block !important; height: auto !important; overflow: visible !important; border-top: 3px solid var(--c-gold) !important; }
    .chat-history { display: block !important; height: auto !important; overflow: visible !important; max-height: none !important; padding: 15px 10px !important; }
    .chat-message { max-width: 95% !important; }

    /* 5. Header-Buttons für Daumenbedienung stapeln */
    .workspace-header { display: block !important; margin-bottom: 20px !important; }
    .workspace-header .d-flex { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; }
    .workspace-header .d-flex.gap-2 { flex-direction: row !important; flex-wrap: wrap !important; }
    .workspace-header .btn { flex: 1 1 auto !important; justify-content: center !important; }
}