/**
 * EventMesh Chat - Default Theme
 *
 * CSS Variables are defined in :root for easy theme switching.
 * To create a new theme, copy this file and change the variable values.
 */

/* ============================================
   CSS Variables (Theme Configuration)
   ============================================ */
:root {
    /* Primary Colors */
    --em-primary: #007bff;
    --em-primary-hover: #0056b3;
    --em-primary-light: #e7f1ff;

    /* Secondary Colors */
    --em-secondary: #6c757d;
    --em-secondary-light: #e9ecef;

    /* Status Colors */
    --em-success: #28a745;
    --em-success-bg: #d4edda;
    --em-success-text: #155724;
    --em-danger: #dc3545;
    --em-danger-bg: #f8d7da;
    --em-danger-text: #721c24;
    --em-warning: #ffc107;

    /* Background Colors */
    --em-bg-primary: #ffffff;
    --em-bg-secondary: #f8f9fa;
    --em-bg-tertiary: #e9ecef;

    /* Border Colors */
    --em-border: #dee2e6;
    --em-border-light: #eee;

    /* Text Colors */
    --em-text-primary: #212529;
    --em-text-secondary: #6c757d;
    --em-text-muted: #adb5bd;
    --em-text-light: #ffffff;

    /* Message Colors */
    --em-msg-sent-bg: var(--em-primary);
    --em-msg-sent-text: var(--em-text-light);
    --em-msg-received-bg: var(--em-bg-tertiary);
    --em-msg-received-text: var(--em-text-primary);
    --em-msg-topic-bg: #f0f7ff;

    /* Context/Gradient Colors */
    --em-gradient-start: #667eea;
    --em-gradient-end: #764ba2;

    /* Shadows */
    --em-shadow: rgba(0, 0, 0, 0.15);
    --em-shadow-light: rgba(0, 0, 0, 0.1);

    /* Accent */
    --em-accent: #6c757d;

    /* Transitions */
    --em-transition-fast: 0.15s;
    --em-transition-normal: 0.2s;

    /* Border Radius */
    --em-radius-sm: 5px;
    --em-radius-md: 8px;
    --em-radius-lg: 10px;
    --em-radius-pill: 15px;
}

/* ============================================
   Layout Components
   ============================================ */

#chat-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    gap: 0;
    position: relative;
    box-sizing: border-box;

    /* Safe Area oben: iOS-Notch / Dynamic Island / Android-Statusleiste freihalten.
       Ohne diesen Abstand zeichnet die App bis an den oberen Bildschirmrand, und die
       Kopfzeile liegt unter Uhrzeit und Akku des Betriebssystems. env() ist am Desktop
       und im Browser ohne Notch 0 — dort aendert sich nichts. box-sizing haelt die Hoehe
       trotz Polster bei 100dvh, damit unten nichts abgeschnitten wird. */
    padding-top: env(safe-area-inset-top, 0px);
}

#users-panel {
    width: 250px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    padding: 15px;
    background: var(--em-bg-secondary);
    display: flex;
    flex-direction: column;
}

#chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
}

#messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: var(--em-bg-primary);
}

#message-input-area {
    padding: 15px;
    border-top: 1px solid var(--em-border);
    background: var(--em-bg-secondary);
}

/* Reply Preview (shown when replying to a message) */
#reply-preview {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--em-bg-primary);
    border-left: 3px solid var(--em-primary);
    border-radius: 4px;
    gap: 10px;
}

#reply-preview.hidden {
    display: none;
}

.reply-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.reply-preview-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--em-primary);
    margin-bottom: 2px;
}

.reply-preview-text {
    font-size: 13px;
    color: var(--em-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-media {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--em-bg-tertiary);
}

.reply-preview-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--em-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.reply-preview-close:hover {
    background: var(--em-bg-tertiary);
    color: var(--em-text-primary);
}

/* Quoted Reply in Message */
.message-reply-quote {
    background: rgba(0, 0, 0, 0.05);
    border-left: 2px solid var(--em-primary);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
}

.message-sent .message-reply-quote {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.5);
}

.message-reply-quote:hover {
    background: rgba(0, 0, 0, 0.08);
}

.message-sent .message-reply-quote:hover {
    background: rgba(255, 255, 255, 0.2);
}

.reply-quote-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--em-primary);
    margin-bottom: 2px;
}

.message-sent .reply-quote-sender {
    color: rgba(255, 255, 255, 0.8);
}

.reply-quote-text {
    color: var(--em-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.message-sent .reply-quote-text {
    color: rgba(255, 255, 255, 0.7);
}

.reply-quote-media {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--em-text-secondary);
    font-size: 12px;
}

.message-sent .reply-quote-media {
    color: rgba(255, 255, 255, 0.7);
}

.reply-quote-media-icon {
    font-size: 14px;
}

/* Message selection for reply (touch/long-press) */
.message.selected-for-reply {
    background: var(--em-primary-light);
    border-radius: 8px;
}

.message.selected-for-reply .message-bubble {
    transform: scale(1.02);
    transition: transform 0.15s ease;
}

/* ============================================
   Messages
   ============================================ */

.message {
    margin-bottom: 10px;
    max-width: 70%;
    position: relative;
}

.message-bubble {
    position: relative;
}

.message-sent {
    margin-left: auto;
    position: relative;
}

.message-sent .message-bubble {
    background: var(--em-msg-sent-bg);
    color: var(--em-msg-sent-text);
    padding: 8px 12px;
    border-radius: var(--em-radius-lg);
}

.message-received {
    margin-right: auto;
    position: relative;
}

.message-received .message-bubble {
    background: var(--em-msg-received-bg);
    color: var(--em-msg-received-text);
    padding: 8px 12px;
    border-radius: var(--em-radius-lg);
}

.message-meta {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 4px;
}

.message-sender {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.message-sender.clickable {
    cursor: pointer;
    color: var(--em-primary);
}

.message-sender.clickable:hover {
    text-decoration: underline;
}

.message-sent .message-sender.clickable {
    color: rgba(255, 255, 255, 0.9);
}

/* Topic Messages */
.topic-message .message-bubble {
    background: var(--em-msg-topic-bg);
}

.topic-message.message-sent .message-bubble {
    background: var(--em-msg-sent-bg);
}

/* Context Bubble Messages */
.message.in-context-bubble {
    position: relative;
}

.message.message-sent.in-context-bubble .message-bubble {
    background: linear-gradient(135deg, var(--em-gradient-start) 0%, var(--em-gradient-end) 100%);
}

.message.message-received.in-context-bubble .message-bubble {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-left: 3px solid var(--em-gradient-end);
}

/* ============================================
   User & Topic List Items
   ============================================ */

.user-item,
.topic-item {
    padding: 8px;
    cursor: pointer;
    border-radius: var(--em-radius-sm);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.user-item:hover,
.topic-item:hover {
    background: var(--em-bg-tertiary);
}

.user-item.selected,
.topic-item.selected {
    background: var(--em-primary);
    color: var(--em-text-light);
}

.online-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--em-success);
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.online-indicator.webrtc-direct {
    background: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
}

.topic-icon {
    margin-right: 8px;
}

.topic-member-count {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 5px;
}

/* ============================================
   Contacts List (Online + Offline)
   ============================================ */

.online-indicator.offline {
    background: var(--em-text-muted);
}

.user-item-offline {
    opacity: 0.75;
    transition: opacity var(--em-transition-fast);
}

.user-item-offline:hover {
    opacity: 1;
}

.user-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-item-lastseen {
    font-size: 0.7rem;
    color: var(--em-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px 0;
    font-size: 0.7rem;
    color: var(--em-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contacts-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--em-border);
}

/* ============================================
   Section Headers
   ============================================ */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-header h6 {
    margin: 0;
    font-weight: 600;
}

.btn-create-topic {
    padding: 2px 8px;
    font-size: 0.75rem;
}

/* ============================================
   Modals
   ============================================ */

#create-topic-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#create-topic-modal.show {
    display: flex;
}

.modal-content {
    background: var(--em-bg-primary);
    padding: 20px;
    border-radius: var(--em-radius-md);
    width: 400px;
    max-width: 90%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-header h5 {
    margin: 0;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: var(--em-text-secondary);
}

.btn-close:hover {
    color: var(--em-text-primary);
}

/* ============================================
   Chat Context Banner
   ============================================ */

.chat-context-banner {
    background: linear-gradient(135deg, var(--em-gradient-start) 0%, var(--em-gradient-end) 100%);
    color: var(--em-text-light);
    padding: 10px 15px;
    margin: 10px 15px;
    border-radius: var(--em-radius-md);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.chat-context-banner .context-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-context-banner .context-icon {
    font-size: 1rem;
}

.chat-context-banner .back-link {
    color: var(--em-text-light);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: var(--em-radius-pill);
    font-size: 0.8rem;
    transition: background var(--em-transition-normal);
}

.chat-context-banner .back-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chat-context-banner.hidden {
    display: none;
}

/* ============================================
   Context Section Headers
   ============================================ */

.context-section-header {
    border-radius: var(--em-radius-md);
    padding: 8px 12px;
    margin: 15px 0 10px 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-section-header.context-topic {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #5a4a7a;
}

.context-section-header.context-direct {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.2);
    color: var(--em-text-secondary);
}

.context-section-header .context-section-icon {
    font-size: 1rem;
}

.context-section-header .context-section-link {
    margin-left: auto;
    color: var(--em-gradient-start);
    text-decoration: none;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--em-radius-lg);
    background: rgba(102, 126, 234, 0.1);
}

.context-section-header .context-section-link:hover {
    background: rgba(102, 126, 234, 0.2);
}

/* ============================================
   Login Panel
   ============================================ */

#login-panel {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-bg-secondary);
}

/* ============================================
   User Info & Status
   ============================================ */

#user-info {
    font-size: 0.9rem;
    color: var(--em-text-secondary);
    margin-bottom: 15px;

    /* Name links, Menue rechts. Vorher trugen die beiden Symbole daneben ein float und einen
       Rand als Inline-Stil — das Menue sitzt jetzt an ihrer Stelle. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-info-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--em-radius-lg);
    font-size: 0.75rem;
    margin-left: 10px;
}

.status-connected {
    background: var(--em-success-bg);
    color: var(--em-success-text);
}

.status-disconnected {
    background: var(--em-danger-bg);
    color: var(--em-danger-text);
}

.logout-btn {
    margin-top: 15px;
    font-size: 0.8rem;
}

/* ============================================
   Loading Overlay
   ============================================ */

.loading-overlay.hidden {
    display: none;
}

/* ============================================
   Unread Message Indicator
   ============================================ */

.unread-badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    background: var(--em-danger);
    color: var(--em-text-light);
    border-radius: var(--em-radius-lg);
    margin-left: auto;
    animation: pulse 1.5s infinite;
}

.user-item.selected .unread-badge,
.topic-item.selected .unread-badge {
    background: var(--em-text-light);
    color: var(--em-primary);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ============================================
   Typing Indicator
   ============================================ */

.typing-indicator {
    padding: 8px 15px;
    font-size: 0.85rem;
    color: var(--em-text-secondary);
    font-style: italic;
    display: none;
}

.typing-indicator.visible {
    display: block;
}

.typing-dots {
    display: inline-block;
}

.typing-dots span {
    animation: typingDot 1.4s infinite;
    display: inline-block;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

/* ============================================
   Emoji Picker
   ============================================ */

.emoji-picker-container {
    position: relative;
    display: flex;
    align-items: center;
}

.emoji-toggle-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--em-radius-sm);
    transition: background var(--em-transition-fast);
}

.emoji-toggle-btn:hover {
    background: var(--em-bg-tertiary);
}

.btn-emoji {
    border: 1px solid var(--em-border);
    background: var(--em-bg-primary);
    font-size: 1.2rem;
    padding: 6px 12px;
    border-radius: 0;
    border-right: none;
}

.btn-emoji:hover {
    background: var(--em-bg-secondary);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    padding: 10px;
    box-shadow: 0 4px 12px var(--em-shadow);
    display: none;
    z-index: 150;
    width: 280px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-picker.show {
    display: block;
}

.emoji-picker-header {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--em-border-light);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.emoji-item {
    font-size: 1.4rem;
    padding: 5px;
    cursor: pointer;
    border-radius: var(--em-radius-sm);
    text-align: center;
    transition: background var(--em-transition-fast);
}

.emoji-item:hover {
    background: var(--em-bg-tertiary);
}

/* ============================================
   Message Delivery Status Icons
   ============================================ */

.message-status {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Pending - Clock icon (⏱️) */
.message-status.status-pending {
    color: var(--em-text-muted);
}

.message-status.status-pending::before {
    content: "⏱";
    font-size: 0.85rem;
}

/* Sent - on the node, NOT yet delivered to the recipient device → still a clock (WhatsApp-Modell:
   ein Haken erst bei erfolgter Uebertragung zum Empfaenger, siehe status-delivered). */
.message-status.status-sent {
    color: var(--em-text-muted);
}

.message-status.status-sent::before {
    content: "⏱";
    font-size: 0.85rem;
}

/* Delivered - recipient device has it → SINGLE checkmark (✓) */
.message-status.status-delivered {
    color: var(--em-text-muted);
}

.message-status.status-delivered::before {
    content: "✓";
    font-weight: bold;
}

/* Read - recipient actually viewed it → DOUBLE checkmark, blue (✓✓) */
.message-status.status-read {
    color: var(--em-primary);
}

.message-status.status-read::before {
    content: "✓✓";
    font-weight: bold;
    letter-spacing: -3px;
}

/* Failed - Error icon (⚠) */
.message-status.status-failed {
    color: var(--em-danger);
}

.message-status.status-failed::before {
    content: "⚠";
}

/* Status on sent messages (light text) */
.message-sent .message-status.status-pending,
.message-sent .message-status.status-sent,
.message-sent .message-status.status-delivered {
    color: rgba(255, 255, 255, 0.7);
}

.message-sent .message-status.status-read {
    color: #90caf9;
}

.message-sent .message-status.status-failed {
    color: #ffcdd2;
}

/* Offline indicator bar */
.offline-bar {
    background: var(--em-warning);
    color: #856404;
    padding: 8px 15px;
    font-size: 0.85rem;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.offline-bar.visible {
    display: flex;
}

.offline-bar .offline-icon {
    font-size: 1rem;
}

/* Queued message styling */
.message.queued {
    opacity: 0.7;
}

/* Connection status animation */
.reconnecting-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 6px;
}

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

/* ============================================
   Chat Header with Topic Actions
   ============================================ */

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-header-actions.hidden {
    display: none;
}

.topic-header-actions .settings-icon {
    font-size: 1.1rem;
}

.pending-badge {
    background: var(--em-warning);
    color: #856404;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: var(--em-radius-lg);
    min-width: 18px;
    text-align: center;
}

.pending-badge.hidden {
    display: none;
}

/* ============================================
   Visibility Options (Create Topic Modal)
   ============================================ */

.visibility-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visibility-option {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    cursor: pointer;
    transition: all var(--em-transition-normal);
}

.visibility-option:hover {
    background: var(--em-bg-secondary);
}

.visibility-option input[type="radio"] {
    margin-right: 12px;
}

.visibility-option input[type="radio"]:checked + .visibility-label {
    color: var(--em-primary);
}

.visibility-option:has(input[type="radio"]:checked) {
    border-color: var(--em-primary);
    background: var(--em-primary-light);
}

.visibility-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.visibility-icon {
    font-size: 1.2rem;
}

.visibility-label strong {
    display: block;
}

.visibility-label small {
    display: block;
    color: var(--em-text-secondary);
    font-size: 0.75rem;
}

/* ============================================
   Side Panels (Settings, Members, Requests)
   ============================================ */

.side-panel {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background: var(--em-bg-primary);
    box-shadow: -4px 0 12px var(--em-shadow);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right var(--em-transition-normal) ease-in-out;
}

.side-panel.show {
    right: 0;
}

.side-panel.hidden {
    right: -350px;
}

.side-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid var(--em-border);
    background: var(--em-bg-secondary);
}

.side-panel-header h5 {
    margin: 0;
    flex: 1;
}

.side-panel-header .btn-back {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    color: var(--em-text-secondary);
}

.side-panel-header .btn-back:hover {
    color: var(--em-text-primary);
}

.side-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* Visibility Toggle Buttons */
.visibility-toggle {
    display: flex;
    gap: 8px;
}

.visibility-toggle .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--em-border);
    background: var(--em-bg-primary);
}

.visibility-toggle .btn.active {
    background: var(--em-primary);
    border-color: var(--em-primary);
    color: var(--em-text-light);
}

.visibility-toggle .btn:not(.active):hover {
    background: var(--em-bg-secondary);
}

/* Edit Buttons in Settings */
.edit-btn {
    padding: 6px 10px;
}

.input-group input:read-only {
    background: var(--em-bg-secondary);
}

.input-group input:not(:read-only) {
    background: var(--em-bg-primary);
    border-color: var(--em-primary);
}

/* ============================================
   Member List
   ============================================ */

.member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-md);
    cursor: pointer;
    transition: background var(--em-transition-fast);
}

.member-item:hover {
    background: var(--em-bg-tertiary);
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--em-primary);
    color: var(--em-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 10px;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: 500;
}

.member-role {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
}

.member-role.admin {
    color: var(--em-warning);
}

.member-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.member-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--em-success);
}

.member-offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--em-text-muted);
}

.admin-badge {
    background: var(--em-warning);
    color: #856404;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: var(--em-radius-sm);
    margin-left: 5px;
}

/* ============================================
   Pending Requests List
   ============================================ */

.pending-requests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pending-request-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-md);
    border-left: 3px solid var(--em-warning);
}

.request-info {
    flex: 1;
}

.request-name {
    font-weight: 500;
}

.request-time {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
}

.request-actions {
    display: flex;
    gap: 8px;
}

.request-actions .btn {
    padding: 4px 12px;
    font-size: 0.85rem;
}

.btn-approve {
    background: var(--em-success);
    border-color: var(--em-success);
    color: var(--em-text-light);
}

.btn-approve:hover {
    background: #218838;
    border-color: #1e7e34;
}

.btn-reject {
    background: var(--em-bg-primary);
    border-color: var(--em-danger);
    color: var(--em-danger);
}

.btn-reject:hover {
    background: var(--em-danger);
    color: var(--em-text-light);
}

/* ============================================
   Invite Members Panel
   ============================================ */

.invite-users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-md);
}

.invite-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-user-info .online-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--em-success);
}

.invite-user-name {
    font-weight: 500;
}

/* ============================================
   Topic Invitations Panel
   ============================================ */

.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invitation-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-md);
    border-left: 3px solid var(--em-accent);
    gap: 8px;
}

.invitation-info {
    flex: 1;
}

.invitation-name {
    font-weight: 500;
    color: var(--em-accent);
}

.invitation-desc {
    font-size: 0.85rem;
    color: var(--em-text-secondary);
}

.invitation-actions {
    display: flex;
    gap: 8px;
}

.invitation-actions .btn {
    padding: 4px 12px;
    font-size: 0.85rem;
}

/* Invitations button in topics header */
.topic-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-invitations {
    position: relative;
}

.btn-invitations:not(.hidden) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================
   Context Menu
   ============================================ */

.context-menu {
    position: fixed;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    box-shadow: 0 4px 12px var(--em-shadow);
    /* MUSS ueber .context-menu-backdrop liegen (z-index 10000, im Drive-Menue-Block definiert und
       von beiden Menues geteilt). Mit 1002 lag der transparente Backdrop UEBER dem Menue — jeder
       Klick auf einen Eintrag traf den Backdrop und schloss nur, das Menue war nie anklickbar
       (View Profile/Send Message/Add Contact taten alle „nichts"). Gleiche Ordnung wie
       .chat-options-menu und .drive-context-menu (beide 10001). */
    z-index: 10001;
    min-width: 180px;
    padding: 5px 0;
}

.context-menu.hidden {
    display: none;
}

.context-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--em-text-primary);
    transition: background var(--em-transition-fast);
}

.context-menu-item:hover {
    background: var(--em-bg-secondary);
}

.context-menu-item.danger {
    color: var(--em-danger);
}

.context-menu-item.danger:hover {
    background: var(--em-danger-bg);
}

.context-menu-item.admin-only.hidden {
    display: none;
}

/* ============================================
   Topic Item Visibility Icon
   ============================================ */

.topic-item .visibility-icon {
    font-size: 0.8rem;
    margin-left: auto;
    margin-right: 5px;
}

.topic-item.private .visibility-icon::after {
    content: "🔒";
}

.topic-item.public .visibility-icon::after {
    content: "";
}

/* Panel Overlay */
.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
}

.panel-overlay.show {
    display: block;
}

/* ============================================
   User Info Clickable
   ============================================ */

.user-info-clickable {
    cursor: pointer;
    padding: 10px;
    border-radius: var(--em-radius-md);
    transition: background var(--em-transition-fast);
}

.user-info-clickable:hover {
    background: var(--em-bg-secondary);
}

/* ============================================
   User Item with Info Button
   ============================================ */

.user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--em-radius-sm);
    transition: background var(--em-transition-fast);
}

.user-item-main:hover {
    background: var(--em-bg-secondary);
}

.btn-user-info {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--em-transition-fast);
    font-size: 0.9rem;
}

.btn-user-info:hover {
    opacity: 1;
}

/* ============================================
   User Profile Panel
   ============================================ */

.profile-header {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--em-border);
    margin-bottom: 20px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--em-accent);
    color: var(--em-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 auto 10px;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.profile-id {
    font-size: 0.85rem;
    color: var(--em-text-secondary);
    font-family: monospace;
}

/* ============================================
   User Details Panel
   ============================================ */

.online-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.9rem;
}

.online-status .online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--em-text-secondary);
}

.online-status .online-indicator.online {
    background: var(--em-success);
}

.online-status .online-indicator.offline {
    background: var(--em-text-secondary);
}

.user-description {
    margin-bottom: 20px;
}

.user-description p {
    margin: 0;
    font-style: italic;
}

.user-topics-section {
    margin-bottom: 20px;
}

.user-topics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.user-topic-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    transition: background var(--em-transition-fast);
}

.user-topic-item:hover {
    background: var(--em-bg-tertiary);
}

.user-topic-item.shared {
    border-left: 3px solid var(--em-success);
}

.user-topic-item .topic-icon {
    font-size: 0.9rem;
}

.user-topic-item .topic-name {
    flex: 1;
    font-weight: 500;
}

.user-topic-item .shared-badge {
    font-size: 0.75rem;
    background: var(--em-success-bg);
    color: var(--em-success);
    padding: 2px 6px;
    border-radius: var(--em-radius-sm);
}

/* ============================================
   Media Upload & Preview
   ============================================ */

.media-preview-area {
    background: var(--em-bg-secondary);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-md);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.media-preview-area.hidden {
    display: none;
}

.media-preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-preview-img {
    max-width: 120px;
    max-height: 80px;
    border-radius: var(--em-radius-sm);
    object-fit: cover;
}

.media-preview-img.hidden {
    display: none;
}

.media-preview-video {
    max-width: 200px;
    max-height: 120px;
    border-radius: var(--em-radius-sm);
}

.media-preview-video.hidden {
    display: none;
}

.media-preview-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
}

.media-preview-file.hidden {
    display: none;
}

.media-preview-file .file-icon {
    font-size: 1.5rem;
}

.media-preview-file #media-preview-filename {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-preview-file #media-preview-filesize {
    font-size: 0.8rem;
    color: var(--em-text-secondary);
}

.btn-remove-media {
    background: var(--em-danger);
    color: var(--em-text-light);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--em-transition-fast);
}

.btn-remove-media:hover {
    background: #c82333;
}

.media-upload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--em-text-secondary);
}

.media-upload-progress.hidden {
    display: none;
}

.media-upload-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--em-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.media-upload-progress .progress-bar-fill {
    height: 100%;
    background: var(--em-primary);
    width: 0%;
    transition: width 0.3s ease;
}

.btn-attachment {
    border: 1px solid var(--em-border);
    background: var(--em-bg-primary);
    font-size: 1.2rem;
    padding: 6px 12px;
    border-radius: 0;
    border-right: none;
    cursor: pointer;
}

.btn-attachment:hover:not(:disabled) {
    background: var(--em-bg-secondary);
}

.btn-attachment:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Message Media Content
   ============================================ */

.message-media {
    margin-top: 8px;
    max-width: 300px;
}

.message-media img {
    max-width: 100%;
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    transition: opacity var(--em-transition-fast);
}

.message-media img:hover {
    opacity: 0.9;
}

.message-media video {
    max-width: 100%;
    border-radius: var(--em-radius-sm);
}

.message-media audio {
    width: 100%;
    max-width: 250px;
}

.message-media-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    transition: background var(--em-transition-fast);
}

.message-media-file:hover {
    background: rgba(0, 0, 0, 0.15);
}

.message-sent .message-media-file {
    background: rgba(255, 255, 255, 0.2);
}

.message-sent .message-media-file:hover {
    background: rgba(255, 255, 255, 0.3);
}

.message-media-file .file-icon {
    font-size: 1.2rem;
}

.message-media-file .file-info {
    flex: 1;
    min-width: 0;
}

.message-media-file .file-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-media-file .file-size {
    font-size: 0.75rem;
    opacity: 0.7;
}

.message-media-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-sm);
}

.message-media-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--em-border);
    border-top-color: var(--em-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ============================================
   Media Action Buttons
   ============================================ */

.message-media {
    position: relative;
}

.media-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--em-transition-fast);
}

.message-media:hover .media-actions {
    opacity: 1;
}

.media-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    transition: background var(--em-transition-fast);
}

.media-action-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.media-action-btn span {
    font-size: 14px;
}

.message-media-file .file-download {
    flex-shrink: 0;
    background: transparent;
}

.message-media-file .file-download:hover {
    background: rgba(0, 0, 0, 0.1);
}

.message-sent .message-media-file .file-download:hover {
    background: rgba(255, 255, 255, 0.2);
}

.message-media-audio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-media-audio .audio-download {
    background: transparent;
    width: 32px;
    height: 32px;
}

/* ============================================
   Media Lightbox
   ============================================ */

.media-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
}

.media-lightbox.visible {
    display: block;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    background: var(--em-bg-primary);
    border-radius: var(--em-radius-md);
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--em-bg-secondary);
    border-bottom: 1px solid var(--em-border);
}

.lightbox-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.lightbox-actions {
    display: flex;
    gap: 8px;
}

.lightbox-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--em-bg-tertiary);
    border: none;
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    font-size: 18px;
    transition: background var(--em-transition-fast);
}

.lightbox-btn:hover {
    background: var(--em-border);
}

.lightbox-close {
    color: var(--em-danger);
}

.lightbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    min-height: 200px;
    max-height: calc(95vh - 70px);
    overflow: auto;
    background: #000;
}

.lightbox-image {
    max-width: 100%;
    max-height: calc(95vh - 70px);
    object-fit: contain;
}

.lightbox-video {
    max-width: 100%;
    max-height: calc(95vh - 70px);
}

.lightbox-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.lightbox-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.lightbox-error {
    color: var(--em-danger);
    padding: 40px;
    text-align: center;
}

/* ============================================
   Message Reactions
   ============================================ */

/* Reaction picker popup */
.reaction-picker {
    position: absolute;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 24px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 4px;
    z-index: 1000;
    animation: reactionPickerFadeIn 0.15s ease-out;
}

@keyframes reactionPickerFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reaction-picker-emoji {
    font-size: 24px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: transform 0.1s ease, background-color 0.1s ease;
    user-select: none;
}

.reaction-picker-emoji:hover {
    transform: scale(1.2);
    background: var(--em-bg-secondary);
}

.reaction-picker-emoji:active {
    transform: scale(1.1);
}

/* Reactions display under message */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 4px;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--em-bg-secondary);
    border: 1px solid var(--em-border-light);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.reaction-badge:hover {
    background: var(--em-bg-tertiary);
    border-color: var(--em-border);
}

.reaction-badge.user-reacted {
    background: var(--em-primary-light);
    border-color: var(--em-primary);
}

.reaction-badge .reaction-emoji {
    font-size: 16px;
}

.reaction-badge .reaction-count {
    font-size: 12px;
    color: var(--em-text-secondary);
    font-weight: 500;
}

.reaction-badge.user-reacted .reaction-count {
    color: var(--em-primary);
}

/* Position adjustments for sent vs received messages */
.message.sent .message-reactions {
    justify-content: flex-end;
}

.message.received .message-reactions {
    justify-content: flex-start;
}

/* Add reaction button (appears on hover) */
.message-reaction-trigger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 50%;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message:hover .message-reaction-trigger {
    opacity: 1;
}

.message.sent .message-reaction-trigger {
    left: -32px;
}

.message.received .message-reaction-trigger {
    right: -32px;
}

.message-reaction-trigger:hover {
    background: var(--em-bg-secondary);
}

/* Tooltip for reaction details */
.reaction-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1001;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
}

.reaction-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
}

/* ===== Blazor UI Extensions ===== */

/* --- Sidebar Tabs --- */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--em-border);
}

.sidebar-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--em-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.sidebar-tab:hover {
    color: var(--em-text-primary);
    background: var(--em-bg-tertiary);
}

.sidebar-tab.active {
    color: var(--em-primary);
    border-bottom-color: var(--em-primary);
}

/* Untersicht des Topics-Reiters: Liste / Karte / Kalender.
   Dieselbe Menge Topics, anders geordnet — die Leiste sitzt unter den Haupt-Reitern. */
.topics-subtabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--em-border);
}

.topics-subtab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--em-text-secondary);
    transition: background 0.15s, color 0.15s;
}

.topics-subtab:hover {
    background: var(--em-bg-tertiary);
    color: var(--em-text-primary);
}

.topics-subtab.active {
    background: var(--em-primary-light);
    color: var(--em-primary);
}

.topics-subtab .em-icon { width: 16px; height: 16px; }

/* Vorbereitete Flaechen fuer Karte, Kalender und "In der Naehe". */
.topics-view {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.topics-view-placeholder {
    margin: auto;
    padding: 32px 24px;
    text-align: center;
    color: var(--em-text-secondary);
}

.topics-view-placeholder .em-icon {
    width: 44px;
    height: 44px;
    color: var(--em-text-muted);
    margin-bottom: 12px;
}

.topics-view-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--em-text-primary);
}

.topics-view-hint {
    margin: 0 auto;
    max-width: 32ch;
    font-size: 0.85rem;
    line-height: 1.45;
}


.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--em-danger);
    color: white;
    font-size: 0.7rem;
    margin-left: 4px;
}

/* --- Logout Button --- */
.logout-btn {
    float: right;
    font-size: 1rem;
    color: var(--em-text-secondary);
}

.logout-btn:hover {
    color: var(--em-danger);
}

/* --- Icon Button --- */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1rem;
    color: var(--em-text-secondary);
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--em-bg-tertiary);
    color: var(--em-text-primary);
}

/* --- Topic Items --- */
.topic-list {
    padding: 0;
}

.topic-section-label {
    padding: 8px 15px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--em-text-muted);
    font-weight: 600;
}

.topic-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
    transition: background 0.2s;
    gap: 6px;
}

.topic-item:hover {
    background: var(--em-bg-tertiary);
}

.topic-item.selected {
    background: rgba(0, 123, 255, 0.1);
    border-left: 3px solid var(--em-primary);
}

.topic-icon {
    color: var(--em-text-muted);
    font-weight: bold;
    font-size: 0.9rem;
}

.topic-name {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visibility-badge {
    font-size: 0.75rem;
}

.member-count {
    font-size: 0.75rem;
    color: var(--em-text-muted);
}

.empty-hint {
    color: var(--em-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 10px 15px;
}

/* --- Chat Header --- */
.chat-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--em-border);
    background: var(--em-bg-primary);
    min-height: 48px;
}

.chat-header-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header-status {
    font-size: 0.75rem;
    color: var(--em-text-muted);
}

.chat-header-status.online {
    color: var(--em-success);
}

.chat-header-members {
    font-size: 0.75rem;
    color: var(--em-text-muted);
}

.chat-header-actions {
    display: flex;
    gap: 4px;
}

/* --- Connection Status --- */
.connection-status {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.connected {
    background: var(--em-success);
}

.status-dot.reconnecting {
    background: var(--em-warning, #ffc107);
    animation: pulse 1s infinite;
}

.status-dot.disconnected {
    background: var(--em-danger);
}

/* --- Reply Quote (in message bubble) --- */
.reply-quote {
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--em-primary);
    padding: 4px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.reply-quote-sender {
    font-weight: 600;
    color: var(--em-primary);
    font-size: 0.75rem;
}

.reply-quote-text {
    color: var(--em-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

/* --- Reply Preview (above input) --- */
.reply-preview {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--em-bg-tertiary);
    border-left: 3px solid var(--em-primary);
    border-radius: 4px;
    margin-bottom: 8px;
}

.reply-preview-content {
    flex: 1;
    overflow: hidden;
}

.reply-preview-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--em-primary);
    margin-right: 6px;
}

.reply-preview-text {
    font-size: 0.8rem;
    color: var(--em-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--em-text-muted);
    padding: 0 4px;
}

.reply-preview-close:hover {
    color: var(--em-text-primary);
}

/* --- Upload Preview --- */
.upload-preview {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--em-bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 8px;
    position: relative;
}

.upload-preview-image {
    max-width: 120px;
    max-height: 80px;
    border-radius: 6px;
    object-fit: cover;
}

.upload-preview-file {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.upload-preview-close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Input Row --- */
.input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.file-upload-btn {
    cursor: pointer;
    font-size: 1.3rem;
    padding: 4px 8px;
    color: var(--em-text-secondary);
    transition: color 0.2s;
}

.file-upload-btn:hover {
    color: var(--em-primary);
}

/* --- Message Actions (reply/react hover buttons) --- */
.message-actions {
    display: none;
    position: absolute;
    top: 0;
    gap: 2px;
}

/* Einblenden beim Ueberfahren — bewusst OHNE Bedingung.

   Die Regel stand in @media (pointer: fine). Meldet ein Browser dort etwas anderes als
   erwartet, greift sie nie, und die Knoepfe zum Antworten und Reagieren bleiben unsichtbar:
   die Grundregel darueber ist display:none. Man kommt dann nur noch ueber die rechte Maustaste
   an sie heran, und das sieht aus, als koenne man nicht reagieren.

   Eine Bedingung braucht es hier nicht: :hover greift von sich aus nur, wo es ein Ueberfahren
   gibt. Beruehrgeraete blendet der Block weiter unten ohnehin aus. */
.message:hover .message-actions {
    display: flex;
}

.message-sent .message-actions {
    left: -80px;
}

.message-received .message-actions {
    right: -80px;
}

.action-btn {
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;

    /* Die Farbe fehlte hier, und damit waren die Symbole fast schwarz.
     *
     * Sie zeichnen mit stroke: currentColor, und ein <button> erbt keine Textfarbe — er nimmt
     * die Vorgabe des Browsers, und die ist auf dunklem Grund praktisch unsichtbar. Aufgefallen
     * ist es nur beim Loeschen-fuer-alle-Knopf NICHT, weil der als einziger eine eigene Farbe
     * gesetzt bekommt; alle uebrigen verschwanden. */
    color: var(--em-fg-muted);
}

.action-btn:hover {
    background: var(--em-bg-tertiary);
    border-color: var(--em-accent);
    color: var(--em-accent);
}

/* Sichtbar auch fuer die Tastatur — wer sich durchtabbt, muss sehen, wo er steht. */
.action-btn:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 2px;
    color: var(--em-accent);
}

.action-btn:hover.action-btn-danger,
.action-btn:focus-visible.action-btn-danger {
    border-color: var(--em-danger);
    color: var(--em-danger);
}

/* --- Message Status Icons --- */
.message-status {
    font-size: 0.7rem;
    margin-left: 4px;
    color: var(--em-text-muted);
}

.status-read {
    color: var(--em-primary);
}

/* --- Media Display --- */
.media-container {
    margin: 4px 0;
}

.media-display {
    position: relative;
}

.media-thumbnail {
    max-width: 280px;
    max-height: 280px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.media-thumbnail:hover {
    opacity: 0.9;
}

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: var(--em-bg-tertiary);
    border-radius: 8px;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--em-text-secondary);
}

.media-placeholder.clickable {
    cursor: pointer;
}

.media-placeholder.clickable:hover {
    background: var(--em-bg-secondary);
}

.media-placeholder.retry-hint {
    cursor: pointer;
}

.retry-label {
    font-size: 0.7rem;
    color: var(--em-text-muted);
    margin-top: 2px;
}

.media-file.retry-hint {
    cursor: pointer;
}

.media-file.retry-hint:hover {
    background: var(--em-bg-secondary);
    border-radius: var(--em-radius-sm);
}

.media-icon {
    font-size: 2rem;
}

.file-size {
    font-size: 0.75rem;
    color: var(--em-text-muted);
}

/* Video player — YouTube-style with rounded corners */
.media-video {
    max-width: 480px;
    width: 100%;
    border-radius: 12px;
    background: #000;
    display: block;
}

/* Quality picker — pill bar below the video */
.media-quality-picker {
    display: flex;
    gap: 4px;
    padding: 6px 0 2px;
    flex-wrap: wrap;
    align-items: center;
}

.media-quality-btn {
    background: var(--em-bg-secondary);
    border: 1px solid var(--em-border);
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--em-text-secondary);
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.media-quality-btn:hover {
    background: var(--em-surface-hover);
    color: var(--em-text-primary);
    border-color: var(--em-text-muted);
}

.media-quality-btn.active {
    background: var(--em-primary);
    color: white;
    border-color: var(--em-primary);
}

.media-quality-btn.on-demand {
    border-style: dashed;
    opacity: 0.7;
}

.media-quality-btn.on-demand:hover {
    opacity: 1;
    border-style: solid;
}

.media-quality-btn.transcoding {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

.transcoding-spinner-small {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--em-border);
    border-top-color: var(--em-accent);
    border-radius: 50%;
    animation: transcoding-spin 0.8s linear infinite;
    margin-right: 2px;
    vertical-align: middle;
}

.lightbox-quality-picker .media-quality-btn.on-demand {
    border-style: dashed;
    opacity: 0.6;
}

.lightbox-quality-picker .media-quality-btn.on-demand:hover {
    opacity: 1;
    border-style: solid;
}

.lightbox-quality-picker .media-quality-btn.transcoding {
    opacity: 0.5;
    cursor: wait;
    pointer-events: none;
}

.lightbox-quality-picker .transcoding-spinner-small {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

.media-transcoding-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--em-text-muted);
    padding: 4px 0;
    font-style: italic;
}

.transcoding-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--em-border);
    border-top-color: var(--em-accent);
    border-radius: 50%;
    animation: transcoding-spin 0.8s linear infinite;
}

@keyframes transcoding-spin {
    to { transform: rotate(360deg); }
}

.media-video-thumb {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.media-video-thumb img {
    max-width: 280px;
    border-radius: 8px;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.media-audio {
    max-width: 280px;
}

.media-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--em-bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
}

.media-file:hover {
    background: var(--em-bg-secondary);
}

.media-file-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.media-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

/* --- Lightbox --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    outline: none;

    /* Vollbild-Overlay: liegt ueber allem und ignoriert das Polster von #chat-container,
       deshalb hier direkt Notch oben und Home-Indicator unten freihalten. box-sizing haelt
       die Hoehe trotz Polster bei voller Viewport-Groesse. */
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: white;
}

.lightbox-filename {
    font-size: 0.9rem;
    opacity: 0.8;
}

.lightbox-actions {
    display: flex;
    gap: 8px;
}

.lightbox-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.lightbox-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-image.loading {
    filter: blur(4px);
}

.lightbox-video {
    max-width: 90vw;
    max-height: 80vh;
}

.lightbox-quality-picker {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 10px 0 4px;
}

.lightbox-quality-picker .media-quality-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
}

.lightbox-quality-picker .media-quality-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.lightbox-quality-picker .media-quality-btn.active {
    background: var(--em-accent);
    border-color: var(--em-accent);
    color: #fff;
}

.lightbox-loading {
    position: absolute;
    color: white;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Lightbox file download panel */
.lightbox-file-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: white;
}

.lightbox-file-icon {
    font-size: 4rem;
    opacity: 0.7;
}

.lightbox-file-name {
    font-size: 1.1rem;
    font-weight: 500;
    word-break: break-all;
    text-align: center;
}

.lightbox-file-size {
    font-size: 0.85rem;
    opacity: 0.6;
}

.lightbox-download-btn {
    margin-top: 12px;
    padding: 10px 28px;
    border: none;
    border-radius: 8px;
    background: var(--em-accent, #4a9eff);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.lightbox-download-btn:hover {
    background: var(--em-accent-hover, #3a8eef);
}

/* File attachment download icon */
.media-file-ready {
    cursor: pointer;
}

.media-download-icon {
    margin-left: auto;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.media-file-ready:hover .media-download-icon {
    opacity: 1;
}

/* --- Reaction Picker Popup (positioned via anchor) --- */
.reaction-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.reaction-picker-anchor {
    position: absolute;
    z-index: 100;
    bottom: 100%;
    margin-bottom: 4px;
}

.message-sent .reaction-picker-anchor {
    right: 0;
}

.message-received .reaction-picker-anchor {
    left: 0;
}

.reaction-option {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.15s, background 0.15s;
}

.reaction-option:hover {
    transform: scale(1.3);
    background: var(--em-bg-tertiary);
}

/* --- Reaction Badges --- */
.reaction-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    background: var(--em-bg-tertiary);
    border: 1px solid var(--em-border);
    cursor: pointer;
    transition: all 0.15s;
}

.reaction-badge:hover {
    background: var(--em-bg-secondary);
}

.reaction-badge.my-reaction {
    background: rgba(0, 123, 255, 0.1);
    border-color: var(--em-primary);
}

/* --- Typing Indicator --- */
.typing-indicator {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    font-size: 0.8rem;
    color: var(--em-text-muted);
    font-style: italic;
}

.typing-text {
    margin-right: 4px;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
}

.typing-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--em-text-muted);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* --- Loading Overlay --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--em-text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--em-border);
    border-top: 3px solid var(--em-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- Modal --- */
.modal-overlay,
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Safe Area: ein hoher Dialog auf einem Geraet mit Notch soll nicht dahinter geraten. */
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal-content,
.modal-dialog {
    background: var(--em-bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    min-width: 360px;
    max-width: 480px;
    width: 90%;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--em-border);
}

.modal-header h5 {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--em-text-muted);
}

.modal-close:hover {
    color: var(--em-text-primary);
}

.modal-body {
    padding: 16px 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--em-border);
}

/* --- Form Controls --- */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--em-text-secondary);
    margin-bottom: 4px;
}

textarea.form-control {
    resize: vertical;
}

select.form-control {
    appearance: auto;
}

.btn-secondary {
    background: var(--em-bg-tertiary);
    color: var(--em-text-primary);
    border: 1px solid var(--em-border);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--em-bg-secondary);
}

/* --- No Messages Placeholder --- */
.no-messages {
    color: var(--em-text-secondary);
    text-align: center;
    margin-top: 40px;
    font-style: italic;
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease;
    font-size: 0.9rem;
}

.toast-info {
    background: #e8f4fd;
    color: #1976d2;
    border-left: 4px solid #1976d2;
}

.toast-success {
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #2e7d32;
}

.toast-warning {
    background: #fff8e1;
    color: #f57c00;
    border-left: 4px solid #f57c00;
}

.toast-error {
    background: #fce4ec;
    color: #c62828;
    border-left: 4px solid #c62828;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6;
    padding: 0 4px;
    color: inherit;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Message Text --- */
.message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- User name in list --- */
.user-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Connection Banners (Offline / Reconnecting)
   ============================================ */

.connection-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    font-size: 0.85rem;
    gap: 8px;
    animation: slideDown 0.3s ease;
}

.disconnected-banner {
    background: var(--em-danger-bg);
    color: var(--em-danger-text);
}

.reconnecting-banner {
    background: #fff8e1;
    color: #f57c00;
}

/* Global connection banner — a top bar shown in ALL views (user list + conversation), unlike the
   per-conversation .connection-banner that lives inside ChatHeader. Driven by instant window
   online/offline detection so a dropped network is obvious immediately. */
.global-connection-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 15px;
    font-size: 0.85rem;
    position: relative;
    z-index: 50;
    animation: slideDown 0.3s ease;
}
.global-connection-banner.is-offline {
    background: var(--em-danger-bg);
    color: var(--em-danger-text);
}
.global-connection-banner.is-reconnecting {
    background: #fff8e1;
    color: #f57c00;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ============================================
   Invitation Banner (in Sidebar)
   ============================================ */

.invitation-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: var(--em-radius-md);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.invitation-banner .invitation-item {
    padding: 8px;
    border-left-color: var(--em-primary);
}

.invitation-banner .invitation-actions {
    margin-top: 4px;
}

.invitation-banner .invitation-actions .btn {
    padding: 2px 10px;
    font-size: 0.8rem;
}

/* ============================================
   Node Switcher (WASM only)
   ============================================ */

.node-switcher {
    margin-bottom: 4px;
}

.node-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 4px 8px;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-bg-primary);
    color: var(--em-text-primary);
}

/* ============================================
   Profile Editor Extensions
   ============================================ */

.profile-type-badge {
    margin-top: 6px;
}

.profile-avatar {
    position: relative;
}

.profile-avatar:hover::after {
    content: "Change";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================
   Clickable Username in Header
   ============================================ */

.chat-header-info .clickable {
    cursor: pointer;
    transition: color var(--em-transition-fast);
}

.chat-header-info .clickable:hover {
    color: var(--em-primary);
    text-decoration: underline;
}

/* ============================================
   Form Control (shared)
   ============================================ */

.form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-bg-primary);
    color: var(--em-text-primary);
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--em-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* ============================================
   Primary Button (shared)
   ============================================ */

.btn-primary {
    background: var(--em-primary);
    color: var(--em-text-light);
    border: 1px solid var(--em-primary);
    padding: 8px 16px;
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background var(--em-transition-fast);
}

.btn-primary:hover:not(:disabled) {
    background: var(--em-primary-hover);
    border-color: var(--em-primary-hover);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Hamburger Button (hidden on desktop)
   ============================================ */

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--em-text-secondary);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================
   Sidebar Edge Tab (swipe handle, mobile only)
   ============================================ */

.sidebar-edge-tab {
    display: none;
}

/* ============================================
   Sidebar Mobile Header (hidden on desktop)
   ============================================ */

.sidebar-header-mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid var(--em-border);
    font-size: 1.1rem;
}

.sidebar-close-btn {
    font-size: 1.4rem;
}

/* ============================================
   Sidebar Backdrop (hidden on desktop)
   ============================================ */

.sidebar-backdrop {
    display: none;
}

/* ============================================
   Emoji Picker Backdrop (click-outside close)
   ============================================ */

.emoji-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 149;
}

/* ============================================
   Action Sheet (Mobile Bottom Sheet)
   ============================================ */

.action-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9000;
    animation: fadeIn 0.15s ease;
}

.action-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--em-bg-primary);
    border-radius: 16px 16px 0 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9001;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.action-sheet-reactions {
    display: flex;
    justify-content: space-around;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--em-border);
}

.action-sheet-emoji {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: transform 0.15s, background 0.15s;
    min-width: 52px;
    min-height: 52px;
}

.action-sheet-emoji:active {
    transform: scale(1.2);
    background: var(--em-bg-tertiary);
}

.action-sheet-actions {
    padding: 8px 0;
}

.action-sheet-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--em-text-primary);
    border-radius: 8px;
    transition: background 0.15s;
}

.action-sheet-btn:active {
    background: var(--em-bg-tertiary);
}

.action-sheet-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.action-sheet-cancel {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background: var(--em-bg-tertiary);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--em-text-secondary);
}

.action-sheet-cancel:active {
    background: var(--em-border);
}

/* ============================================
   Responsive: Desktop (>= 1024px)
   ============================================ */

@media (min-width: 1024px) {
    #chat-container {
        gap: 20px;
        padding: 0;
    }

    #users-panel {
        width: 250px;
        flex-shrink: 0;
        position: relative;
    }
}

/* ============================================
   Responsive: Tablet + Phone (< 1024px)
   Sidebar becomes overlay drawer
   ============================================ */

@media (max-width: 1023px) {
    #users-panel {
        position: fixed;
        /* Die Spalte liegt fix am oberen Rand und ignoriert damit das Polster von
           #chat-container — deshalb bekommt sie den Safe-Area-Abstand direkt: unter der
           Notch beginnen, um die Notch-Hoehe kuerzer werden. */
        top: env(safe-area-inset-top, 0px);
        left: -300px;
        width: 280px;
        height: 100vh;
        height: calc(100dvh - env(safe-area-inset-top, 0px));
        z-index: 5000;
        transition: left 0.3s ease;
        overflow-y: auto;
        border-right: 1px solid var(--em-border);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        border-radius: 0;
    }

    #users-panel.sidebar-open {
        left: 0;
    }

    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 4999;
    }

    .sidebar-header-mobile {
        display: flex;
    }

    .hamburger-btn {
        display: flex;
    }

    .sidebar-edge-tab {
        display: flex;
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 4998;
        width: 28px;
        height: 56px;
        align-items: center;
        justify-content: center;
        background: var(--em-bg-secondary, #2a2a3e);
        border-radius: 0 12px 12px 0;
        border: 1px solid var(--em-border);
        border-left: none;
        cursor: pointer;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        opacity: 0.7;
        transition: opacity 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-edge-tab:active {
        opacity: 1;
    }

    .sidebar-edge-tab-icon {
        font-size: 1rem;
        color: var(--em-text-secondary, #aaa);
        line-height: 1;
    }

    #chat-panel {
        width: 100%;
    }

    #chat-container {
        gap: 0;
    }
}

/* ============================================
   Responsive: Phone (< 768px)
   ============================================ */

@media (max-width: 767px) {
    #users-panel {
        width: 100%;
        left: -100%;
    }

    #users-panel.sidebar-open {
        left: 0;
    }

    .message {
        max-width: 85%;
    }

    .media-thumbnail {
        max-width: 200px;
        max-height: 200px;
    }

    #message-input-area {
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .input-row {
        gap: 4px;
    }

    .chat-header {
        padding: 8px 12px;
    }

    #messages {
        padding: 10px;
    }

    /* Emoji picker as bottom panel on phones */
    .emoji-picker.show {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        max-height: 40vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    }

    .emoji-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ============================================
   Responsive: Small Phone (< 480px)
   ============================================ */

@media (max-width: 479px) {
    .message {
        max-width: 90%;
    }

    .message-bubble {
        padding: 6px 10px;
    }

    #messages {
        padding: 8px;
    }
}

/* ============================================
   Responsive: Landscape Phone (short viewport)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .chat-header {
        min-height: 36px;
        padding: 4px 12px;
    }

    #messages {
        padding: 6px;
    }

    .message {
        margin-bottom: 6px;
    }

    #message-input-area {
        padding: 4px 8px;
    }

    .action-sheet {
        max-height: 60vh;
        overflow-y: auto;
    }

    .action-sheet-reactions {
        padding: 4px 0 8px;
    }

    .action-sheet-emoji {
        font-size: 1.6rem;
        padding: 4px 8px;
    }
}

/* ============================================
   Touch-specific: Pointer Coarse (touch devices)
   ============================================ */

@media (pointer: coarse) {
    /* Hide hover-based message actions on touch devices */
    .message-actions {
        display: none !important;
    }

    /* Prevent text selection on long-press for messages */
    .message-bubble {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Allow text selection inside message text specifically */
    .message-text {
        -webkit-user-select: text;
        user-select: text;
    }

    /* Larger touch targets (minimum 44x44px) */
    .action-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .sidebar-tab {
        padding: 12px;
        min-height: 44px;
    }

    .user-item,
    .topic-item {
        padding: 12px 8px;
        min-height: 44px;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .reaction-option {
        font-size: 1.6rem;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    .emoji-item {
        font-size: 1.5rem;
        padding: 6px;
        min-width: 44px;
        min-height: 44px;
    }

    .reaction-badge {
        padding: 4px 10px;
        min-height: 36px;
    }

    .hamburger-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   Desktop: Pointer Fine (mouse/trackpad)
   ============================================ */

/* ============================================
   WebRTC Direct P2P Indicator
   ============================================ */
.online-indicator.webrtc {
    background: #2196F3;
    box-shadow: 0 0 4px #2196F3;
}

/* ============================================
   Node Switcher
   ============================================ */
.node-switcher {
    padding: 4px 8px;
    border-top: 1px solid var(--em-border-light, #eee);
}

.node-select {
    width: 100%;
    font-size: 0.8rem;
    padding: 4px;
    border: 1px solid var(--em-border, #dee2e6);
    border-radius: 4px;
    background: var(--em-bg-primary, #fff);
    color: var(--em-text-primary, #212529);
}

/* ============================================
   Debug Node Panel
   ============================================ */
.debug-node-panel {
    padding: 6px 8px;
    border-top: 1px solid var(--em-border-light, #eee);
    background: var(--em-bg-secondary, #f8f9fa);
    font-size: 0.75rem;
}

.debug-section {
    margin-bottom: 4px;
}

.debug-section-label {
    display: block;
    font-weight: 600;
    color: var(--em-text-muted, #6c757d);
    margin-bottom: 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.debug-select {
    width: 100%;
    font-size: 0.72rem;
    padding: 2px 4px;
    border: 1px solid var(--em-border, #dee2e6);
    border-radius: 3px;
    background: var(--em-bg-primary, #fff);
    color: var(--em-text-primary, #212529);
    font-family: monospace;
}

/* ============================================
   Sidebar Footer (Version + Debug)
   ============================================ */
.sidebar-footer {
    margin-top: auto;
    padding: 6px 12px;
    border-top: 1px solid var(--em-border-light, #eee);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--em-text-muted, #6c757d);
}

.version-label {
    opacity: 0.7;
}

.debug-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.debug-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ============================================
   Debug Info (Message IDs)
   ============================================ */
.debug-info {
    font-size: 0.6rem;
    color: var(--em-text-muted, #999);
    opacity: 0.7;
    padding: 2px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: monospace;
    line-height: 1.2;
}

.debug-info span {
    background: rgba(0, 0, 0, 0.05);
    padding: 0 3px;
    border-radius: 2px;
}

/* ============================================
   Forward Header (in message bubble)
   ============================================ */
.forward-header {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    margin-bottom: 4px;
    padding: 2px 0;
}

.forward-header strong {
    color: var(--em-primary);
}

.message-sent .forward-header {
    color: rgba(255, 255, 255, 0.8);
}

.message-sent .forward-header strong {
    color: var(--em-text-light);
}

/* ============================================
   Forward Dialog
   ============================================ */
.forward-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.forward-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--em-bg-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1001;
    padding: 16px;
}

.forward-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.forward-dialog-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--em-text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.forward-dialog-close:hover {
    color: var(--em-text-primary);
}

.forward-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    box-sizing: border-box;
    outline: none;
}

.forward-search:focus {
    border-color: var(--em-primary);
}

.forward-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--em-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
}

.forward-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--em-text-primary);
    transition: background 0.15s;
    text-align: left;
}

.forward-item:hover {
    background: var(--em-bg-tertiary);
}

.forward-item:active {
    background: var(--em-secondary-light);
}

.forward-empty {
    text-align: center;
    color: var(--em-text-muted);
    padding: 20px 0;
    font-size: 0.9rem;
}

/* ============================================
   Context Menu Backdrop + Contacts/Friends
   ============================================ */

.contact-divider {
    margin: 12px 0 8px;
    padding: 0 8px;
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.user-lastseen {
    font-size: 0.7rem;
    color: var(--em-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.user-lastseen-detail {
    font-size: 0.8rem;
    color: var(--em-text-muted);
    margin-top: 4px;
    text-align: center;
}

.friend-badge {
    font-size: 0.7rem;
    margin-left: 4px;
    color: var(--em-warning);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--em-border);
    color: var(--em-text-primary);
    padding: 8px 16px;
    border-radius: var(--em-radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background var(--em-transition-fast);
}

.btn-outline:hover {
    background: var(--em-bg-secondary);
}

.btn-outline.danger {
    color: var(--em-danger);
    border-color: var(--em-danger);
}

.btn-outline.danger:hover {
    background: var(--em-danger-bg);
}

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.contact-actions .btn-outline {
    width: 100%;
    text-align: center;
}

.user-item .offline-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--em-text-muted);
    flex-shrink: 0;
}

/* ============================================
   Debug Log Panel
   ============================================ */
.debug-log-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: var(--em-bg-primary);
    border-top: 2px solid var(--em-primary);
    z-index: 900;
    display: flex;
    flex-direction: column;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.78rem;
}

.debug-log-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--em-bg-secondary);
    border-bottom: 1px solid var(--em-border);
    flex-shrink: 0;
}

.debug-log-title {
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 8px;
}

.debug-filter-btn {
    padding: 2px 8px;
    border: 1px solid var(--em-border);
    border-radius: 10px;
    background: transparent;
    color: var(--em-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    font-family: inherit;
}
.debug-filter-btn.active {
    background: var(--em-primary);
    color: white;
    border-color: var(--em-primary);
}
.debug-filter-btn:hover:not(.active) {
    background: var(--em-bg-tertiary);
}

.debug-log-clear {
    margin-left: auto;
    padding: 2px 10px;
    border: 1px solid var(--em-border);
    border-radius: 10px;
    background: transparent;
    color: var(--em-text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    font-family: inherit;
}
.debug-log-clear:hover {
    background: var(--em-danger-bg);
    color: var(--em-danger);
    border-color: var(--em-danger);
}

.debug-log-entries {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.debug-log-entry {
    padding: 1px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.debug-log-entry:hover {
    background: var(--em-bg-secondary);
}

.debug-log-time {
    color: var(--em-text-muted);
}
.debug-log-cat {
    font-weight: 600;
    margin: 0 4px;
}

/* Category colors */
.debug-cat-MSG { color: #5b9bd5; }
.debug-cat-MEDIA { color: #6bc76b; }
.debug-cat-REACT { color: #e6c84c; }
.debug-cat-CONTACT { color: #4cc9c9; }
.debug-cat-TOPIC { color: #c77dba; }
.debug-cat-WEBRTC { color: #e89c4c; }
.debug-cat-SYSTEM { color: var(--em-text-muted); }

.debug-log-entry.error {
    color: var(--em-danger);
    font-weight: 500;
}
.debug-log-entry.warn {
    color: var(--em-warning);
}

/* Close button in debug panel header */
.debug-log-close {
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--em-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    margin-left: 6px;
}
.debug-log-close:hover {
    color: var(--em-danger);
}

/* Push chat content up when debug panel is open */
.debug-open #chat-panel {
    padding-bottom: 220px;
}
.debug-open #messages {
    margin-bottom: 0;
}

/* ============================================
   Deleted Message Styles
   ============================================ */

.message-deleted {
    opacity: 0.7;
    font-style: italic;
}
.message-deleted .deleted-icon {
    margin-right: 4px;
}
.message-deleted .deleted-text {
    color: var(--em-text-muted);
}

/* Danger action buttons */
.action-btn-danger {
    color: var(--em-danger) !important;
}
.action-sheet-btn-danger {
    color: var(--em-danger);
}

/* --- Video Compression Progress --- */
.compress-progress {
    width: 100%;
    height: 20px;
    background: var(--em-bg-secondary, #2a2a2a);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 6px;
    position: relative;
}
.compress-progress-bar {
    height: 100%;
    background: var(--em-accent, #4a9eff);
    border-radius: 10px;
    transition: width 0.2s ease;
}
.compress-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--em-text-primary);
    pointer-events: none;
}
.compress-result {
    margin-top: 4px;
    font-size: 11px;
    color: var(--em-text-muted, #999);
}

/* --- Lazy-loading older messages --- */
.loading-older {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    min-height: 36px;
}
.loading-older-hint {
    font-size: 0.75rem;
    color: var(--em-text-secondary);
    opacity: 0.6;
}
.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--em-border);
    border-top-color: var(--em-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* --- Call history entries in chat --- */
.call-entry { justify-content: center; display: flex; }
.call-entry-bubble {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--em-bg-secondary, #f0f0f0);
    border-radius: 20px;
    font-size: 13px;
    color: var(--em-text-secondary, #666);
    max-width: 320px;
}
.call-entry-bubble.missed { color: #e53935; }
.call-entry-bubble.active-meeting {
    background: linear-gradient(135deg, #1a5276, #2471a3);
    color: #fff;
}
.call-entry-bubble.active-meeting .call-entry-time { color: rgba(255,255,255,0.6); }
.call-entry-icon { font-size: 18px; flex-shrink: 0; }
.call-entry-info { display: flex; flex-direction: column; gap: 2px; }
.call-entry-label { font-weight: 500; }
.call-entry-duration { opacity: 0.7; font-size: 11px; }
.call-entry-time { opacity: 0.5; font-size: 11px; margin-left: auto; white-space: nowrap; }
.call-entry-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.call-entry-rejoin {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.call-entry-rejoin:hover { background: #219a52; }
.call-entry-dismiss {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.call-entry-dismiss:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* === Chat Options Menu === */
.chat-options-menu {
    position: absolute;
    right: 8px;
    top: 48px;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    /* Farbe setzen, nicht erben: das Menue hatte eine Flaeche, aber keine Textfarbe. Der Text
       kam vom Elternteil und war hell — auf der Flaeche, die mangels passender Variable auf
       #fff zurueckfiel, also weiss auf weiss. Ein Popup ohne Eintraege. */
    color: var(--em-text-primary);

    /* Ueber das Backdrop. Mit 100 lag das Menue darunter und war nicht anklickbar — jeder
       Klick auf einen Eintrag traf das Backdrop und schloss nur.
       1000 reichte nicht: .context-menu-backdrop war zweimal definiert, 999 und 10000, und
       die spaetere gewinnt. Doppelte Definitionen sind deshalb jetzt untersagt. */
    z-index: 10001;
    min-width: 200px;
    padding: 4px 0;
}

/* === Avatar Styles === */

/* Small avatar (sidebar, header) */
.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    margin-right: 8px;
    position: relative;
}

.user-avatar-small img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.user-avatar-default {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--em-bg-tertiary, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--em-text-secondary, #6c757d);
}

/* Online/offline status dot on avatar */
.avatar-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--em-bg-secondary, #f8f9fa);
}

.avatar-status-dot.online {
    background: var(--em-success, #28a745);
}

.avatar-status-dot.online.webrtc {
    background: #00d4aa;
}

.avatar-status-dot.offline {
    background: var(--em-text-muted, #adb5bd);
}

/* User item layout with avatar */
.user-item {
    display: flex;
    align-items: center;
}

/* Hide old standalone indicators when avatar is present */
.user-item .online-indicator,
.user-item .offline-indicator {
    display: none;
}

/* Message avatar (next to received messages) */
.msg-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-right: 6px;
    align-self: flex-end;
    margin-bottom: 4px;
}

.msg-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.msg-avatar .user-avatar-default {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

/* Message layout: received messages with avatar */
.message-received {
    display: flex;
    align-items: flex-end;
}

/* Chat header info with avatar */
.chat-header-info {
    display: flex;
    align-items: center;
}

/* Profile avatar edit overlay */
.profile-avatar {
    position: relative;
}

.profile-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--em-primary, #007bff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    border: 2px solid var(--em-bg-primary, #fff);
}

.profile-avatar-edit:hover {
    background: var(--em-primary-hover, #0056b3);
}

/* Avatar popup/lightbox */
.avatar-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.avatar-popup-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

/* ==================== Cloud Drive ==================== */

.drive-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--em-bg-primary, #ffffff);
    color: var(--em-text-primary, #212529);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Vollbild-Seite "Meine Files": Notch oben / Home-Indicator unten freihalten. */
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.drive-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    overflow: hidden;
}

.drive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.drive-toolbar h3 {
    margin: 0;
    font-size: 1.2em;
}

.drive-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Der Schliessen-Knopf stand als nacktes, gedaempftes Zeichen neben zwei richtigen Knoepfen mit
   Flaeche und Beschriftung — er nahm sich mit "background: none; border: none" genau das wieder,
   was .btn-sm ihm gab, und war dadurch kaum zu finden. Jetzt: eigene Flaeche, kraeftige Farbe
   und eine Trefferflaeche, die auch mit dem Finger zu bedienen ist. */
.btn-close-drive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 1.5em;
    line-height: 1;
    color: var(--em-text-primary);
    cursor: pointer;
}

.btn-close-drive:hover {
    background: var(--em-danger-bg);
    color: var(--em-danger-text);
}

.btn-close-drive:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 1px;
}

.drive-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    flex-shrink: 0;
    font-size: 0.9em;
    color: var(--em-text-secondary, #6c757d);
}

.breadcrumb-item {
    background: none;
    border: none;
    color: var(--em-primary, #007bff);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.breadcrumb-item:hover {
    background: var(--em-bg-tertiary, #e9ecef);
}

.breadcrumb-item.current {
    color: var(--em-text-primary, #212529);
    cursor: default;
}

.breadcrumb-separator {
    color: var(--em-text-secondary, #6c757d);
}

.drive-file-list {
    flex: 1;
    overflow-y: auto;
}

.drive-file-item {
    display: grid;
    grid-template-columns: 40px 1fr 80px 140px 120px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--em-border-light, #eee);
    gap: 8px;
    cursor: default;
}

.drive-file-item:hover:not(.drive-header) {
    background: var(--em-bg-secondary, #f8f9fa);
}

.drive-file-item.selected {
    background: rgba(0, 123, 255, 0.08);
    outline: 1px solid var(--em-primary, #007bff);
    outline-offset: -1px;
}

.drive-file-item.selected:hover {
    background: rgba(0, 123, 255, 0.12);
}

.drive-file-item.drag-over {
    background: rgba(0, 123, 255, 0.15);
    outline: 2px dashed var(--em-primary, #007bff);
    outline-offset: -2px;
    border-radius: 4px;
}

.drive-file-item[draggable="true"] {
    cursor: default;
    user-select: none;
}

.drive-file-item[draggable="true"]:active {
    opacity: 0.6;
}

.drive-selection-count {
    font-size: 0.85em;
    color: var(--em-primary, #007bff);
    font-weight: 500;
    padding: 0 4px;
}

/* Drive Context Menu */
.context-menu-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
}

.drive-context-menu {
    position: fixed;
    z-index: 10001;
    background: var(--em-bg-primary, #fff);
    border: 1px solid var(--em-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 180px;
    padding: 4px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.1s;
}

.context-menu-item:hover {
    background: var(--em-bg-secondary, #f8f9fa);
}

.context-menu-item.danger {
    color: #dc3545;
}

.context-menu-item.danger:hover {
    background: rgba(220,53,69,0.08);
}

.context-menu-divider {
    height: 1px;
    background: var(--em-border, #dee2e6);
    margin: 4px 0;
}

.drive-header {
    font-weight: bold;
    font-size: 0.85em;
    color: var(--em-text-secondary, #6c757d);
    border-bottom: 2px solid var(--em-border, #dee2e6);
}

.file-icon {
    text-align: center;
    font-size: 1.3em;
}

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size {
    font-size: 0.85em;
    color: var(--em-text-secondary, #6c757d);
    text-align: right;
}

.file-date {
    font-size: 0.85em;
    color: var(--em-text-secondary, #6c757d);
}

.file-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.btn-icon-sm {
    background: none;
    border: none;
    color: var(--em-text-secondary, #6c757d);
    cursor: pointer !important;
    padding: 4px;
    font-size: 0.9em;
    border-radius: 4px;
}

.btn-icon-sm:hover {
    color: var(--em-text-primary, #212529);
    background: var(--em-bg-tertiary, #e9ecef);
}

.drive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--em-text-secondary, #6c757d);
}

.drive-empty span {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.5;
}

.upload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

/* Drive: Move-To Dialog */
.drive-move-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--em-border-light, #eee);
    font-size: 0.95em;
}

.drive-move-item:hover {
    background: var(--em-bg-secondary, #f8f9fa);
}

.drive-move-item.selected {
    background: rgba(0, 123, 255, 0.1);
    outline: 1px solid var(--em-primary, #007bff);
    outline-offset: -1px;
}

/* --- Drive: Responsive / Mobile --- */
.hide-mobile { display: initial; }
.hide-desktop { display: none; }

.btn-more {
    font-size: 1.2em;
    font-weight: bold;
}

.drive-file-item.is-directory .file-name {
    cursor: pointer;
    color: var(--em-primary, #007bff);
}

.drive-file-item.is-directory .file-name:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
    .hide-desktop { display: initial !important; }

    .drive-view {
        padding: 8px;
    }

    .drive-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .drive-toolbar h3 {
        font-size: 1em;
        flex: 1;
        min-width: 0;
    }

    .drive-toolbar-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .drive-toolbar-actions .btn {
        font-size: 0.8em;
        padding: 4px 8px;
    }

    .drive-file-item {
        grid-template-columns: 36px 1fr auto;
        padding: 12px 4px;
        min-height: 48px;
    }

    .drive-file-item .file-name {
        font-size: 0.95em;
    }

    .drive-header {
        display: none;
    }

    .file-actions {
        gap: 2px;
    }

    .btn-icon-sm {
        padding: 8px;
        font-size: 1.1em;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .drive-context-menu {
        min-width: 220px;
    }

    .context-menu-item {
        padding: 12px 16px;
        font-size: 1em;
        min-height: 44px;
    }

    .drive-selection-count {
        width: 100%;
        text-align: center;
    }

    .drive-empty {
        padding: 32px 16px;
    }

    .drive-upload-actions {
        flex-direction: column;
    }

    .drive-upload-btn {
        padding: 16px;
    }

    .drive-drop-zone {
        padding: 24px;
        min-height: 100px;
    }
}

/* --- Drive: External Drop Overlay --- */
.drive-file-list.external-drag-active {
    position: relative;
}

.drive-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 123, 255, 0.08);
    border: 3px dashed var(--em-primary, #007bff);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    pointer-events: none;
}

.drive-drop-overlay .drop-zone-icon {
    font-size: 3em;
    animation: drop-bounce 0.8s ease-in-out infinite alternate;
}

.drive-drop-overlay .drop-zone-text {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--em-primary, #007bff);
}

@keyframes drop-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

/* --- Drive: Empty State with Upload Buttons --- */
.drive-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--em-text-secondary, #6c757d);
    min-height: 200px;
}

.drive-empty-icon {
    font-size: 3.5em;
    opacity: 0.4;
    margin-bottom: 12px;
}

.drive-empty-text {
    font-size: 1em;
    margin-bottom: 20px;
}

.drive-empty-hint {
    font-size: 0.8em;
    color: var(--em-text-secondary, #6c757d);
    margin-top: 12px;
}

.drive-upload-actions-inline {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

.drive-upload-btn-inline {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border: 2px solid var(--em-border, #dee2e6);
    border-radius: 12px;
    background: var(--em-bg-primary, #fff);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--em-text-primary, #212529);
    transition: all 0.15s;
}

.drive-upload-btn-inline span:first-child {
    font-size: 2em;
}

.drive-upload-btn-inline:hover {
    border-color: var(--em-primary, #007bff);
    background: rgba(0, 123, 255, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.drive-upload-btn-inline:active {
    transform: scale(0.97);
    background: rgba(0, 123, 255, 0.08);
}

/* --- Drive: Drop Hint at bottom of file list --- */
.drive-drop-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    margin-top: 8px;
    border-top: 1px dashed var(--em-border, #dee2e6);
    color: var(--em-text-secondary, #6c757d);
    font-size: 0.8em;
}

.drive-drop-hint-btn {
    background: none;
    border: none;
    color: var(--em-primary, #007bff);
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
}

/* --- Drive: Floating Action Button --- */
.drive-fab {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--em-primary, #007bff);
    color: #fff;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.35);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.drive-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.45);
}

.drive-fab:active {
    transform: scale(0.95);
}

/* --- Drive: New Folder Dialog (Material-style, touch-friendly) --- */
.drive-folder-dialog {
    background: var(--em-bg-primary, #fff);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    padding: 28px 24px 20px;
    min-width: 320px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: folder-dialog-in 0.2s ease-out;
}

@keyframes folder-dialog-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.folder-dialog-icon {
    font-size: 2.8em;
    margin-bottom: 8px;
    opacity: 0.8;
}

.folder-dialog-title {
    margin: 0 0 20px 0;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--em-text-primary, #212529);
}

.folder-dialog-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1em;
    border: 2px solid var(--em-border, #dee2e6);
    border-radius: 12px;
    background: var(--em-bg-secondary, #f8f9fa);
    color: var(--em-text-primary, #212529);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}

.folder-dialog-input:focus {
    border-color: var(--em-primary, #007bff);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    background: var(--em-bg-primary, #fff);
}

.folder-dialog-input::placeholder {
    color: var(--em-text-secondary, #adb5bd);
}

.folder-dialog-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.folder-dialog-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 0.95em;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

.folder-dialog-btn-cancel {
    background: var(--em-bg-tertiary, #e9ecef);
    color: var(--em-text-secondary, #6c757d);
}

.folder-dialog-btn-cancel:hover {
    background: var(--em-border, #dee2e6);
}

.folder-dialog-btn-cancel:active {
    transform: scale(0.97);
}

.folder-dialog-btn-create {
    background: var(--em-primary, #007bff);
    color: #fff;
}

.folder-dialog-btn-create:hover:not(:disabled) {
    background: var(--em-primary-hover, #0069d9);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.folder-dialog-btn-create:active:not(:disabled) {
    transform: scale(0.97);
}

.folder-dialog-btn-create:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 640px) {
    .drive-folder-dialog {
        min-width: 0;
        width: 95%;
        padding: 24px 16px 16px;
    }

    .folder-dialog-btn {
        padding: 16px;
        font-size: 1em;
        min-height: 52px;
    }

    .folder-dialog-input {
        padding: 16px;
        font-size: 1.05em;
    }
}

/* --- Drive: Pointer-Drag Banner --- */
.drive-drag-banner {
    position: absolute;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--em-primary, #007bff);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.85em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.35);
    z-index: 25;
    white-space: nowrap;
    animation: drag-banner-in 0.2s ease-out;
}

@keyframes drag-banner-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.drive-drag-cancel {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9em;
}

.drive-drag-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Drive Upload Dialog --- */
.drive-upload-dialog {
    max-width: 480px;
}

.drive-drop-zone {
    border: 2px dashed var(--em-border, #dee2e6);
    border-radius: 12px;
    padding: 32px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    background: var(--em-bg-secondary, #f8f9fa);
    cursor: pointer;
    margin-bottom: 16px;
}

.drive-drop-zone.drag-active {
    border-color: var(--em-primary, #007bff);
    background: rgba(0, 123, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

.drive-drop-zone:hover {
    border-color: var(--em-primary, #007bff);
    background: rgba(0, 123, 255, 0.04);
}

.drop-zone-icon {
    font-size: 2.5em;
    opacity: 0.6;
}

.drag-active .drop-zone-icon {
    opacity: 1;
    transform: scale(1.15);
    transition: transform 0.2s;
}

.drop-zone-text {
    font-size: 1em;
    font-weight: 600;
    color: var(--em-text-primary, #212529);
}

.drop-zone-hint {
    font-size: 0.8em;
    color: var(--em-text-secondary, #6c757d);
}

/* Upload Action Buttons — Android Explorer style */
.drive-upload-actions {
    display: flex;
    gap: 10px;
}

.drive-upload-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    border: 1px solid var(--em-border, #dee2e6);
    border-radius: 12px;
    background: var(--em-bg-primary, #fff);
    cursor: pointer;
    transition: all 0.15s;
}

.drive-upload-btn:hover {
    border-color: var(--em-primary, #007bff);
    background: rgba(0, 123, 255, 0.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.drive-upload-btn:active {
    transform: scale(0.97);
    background: rgba(0, 123, 255, 0.08);
}

.upload-btn-icon {
    font-size: 2em;
}

.upload-btn-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--em-text-primary, #212529);
}

.upload-btn-hint {
    font-size: 0.75em;
    color: var(--em-text-secondary, #6c757d);
}

.upload-filename {
    font-size: 0.85em;
    color: var(--em-text-secondary, #6c757d);
    margin-left: 4px;
}

/* Inline drop zone in empty drive view */
.drive-drop-zone-inline {
    border: 2px dashed var(--em-border, #dee2e6);
    border-radius: 12px;
    transition: all 0.2s;
    gap: 12px;
}

.drive-drop-zone-inline:hover {
    border-color: var(--em-primary, #007bff);
}

.drive-upload-cta {
    margin-top: 8px;
    padding: 10px 24px;
    font-size: 0.95em;
    border-radius: 8px;
}

/* Call/Stream/Recording CSS moved to chat-call.css (lazy-loaded) */

/* --- Nicht darstellbare Formate ------------------------------------------
 *
 * Fuer Bilder, die vollstaendig da sind und die der Browser trotzdem nicht
 * zeigen kann (HEIC ausserhalb von Safari). Sieht bewusst aus wie ein Anhang
 * und nicht wie ein Fehler: die Datei ist in Ordnung, nur dieser Browser
 * kann sie nicht darstellen.
 */
.media-file-unsupported {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--em-bg-tertiary);
}

.media-unsupported-note {
    display: block;
    font-size: 0.78rem;
    color: var(--em-text-muted);
    margin-top: 2px;
}

/* Farbe ausdruecklich setzen: die Symbole zeichnen mit stroke: currentColor,
 * und ein <button> erbt keine Textfarbe. Ohne diese Zeile ist der Knopf auf
 * dunklem Grund fast schwarz — derselbe Fehler wie bei .action-btn. */
.media-download-btn {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: transparent;
    color: var(--em-fg-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.media-download-btn:hover {
    background: var(--em-bg-primary);
    border-color: var(--em-accent);
    color: var(--em-accent);
}

.media-download-btn:focus-visible {
    outline: 2px solid var(--em-accent);
    outline-offset: 2px;
    color: var(--em-accent);
}

/* Hinweis waehrend der HEIC-Umwandlung. Ein 12-Megapixel-Bild braucht dafuer
 * spuerbar Zeit, und ohne sichtbares Zeichen wirkt die Anwendung eingefroren. */
.file-converting {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--em-bg-tertiary);
    color: var(--em-text-muted);
    font-size: 0.82rem;
}

/* Mehrzeiliges Nachrichtenfeld.

   Die Hoehe setzt JavaScript beim Tippen (siehe interop.js, resizeTextarea); hier steht nur,
   was unabhaengig vom Inhalt gilt. resize: none, weil der Anfasser des Browsers neben einer
   Hoehe, die sich selbst regelt, nur stoert — und weil er in der schmalen Ansicht ueber die
   Bedienleiste ragt. */
.message-textarea {
    resize: none;
    overflow-y: hidden;
    min-height: 38px;
    max-height: 25vh;
    line-height: 1.4;
    font-family: inherit;
    font-size: inherit;
}

/* Anzeige waehrend des Einlesens einer Datei.

   Sie sitzt ueber der Eingabezeile, an derselben Stelle wie spaeter die Vorschau — der Platz
   springt beim Wechsel also nicht. Name und Groesse stehen sofort, der Balken fuellt sich mit
   dem FileReader. */
.file-preparing {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line);
    border-radius: 8px;
    margin-bottom: 8px;
}

.file-preparing-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.file-preparing-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--em-text-primary);
    font-size: 0.9rem;
}

.file-preparing-size {
    flex: none;
    color: var(--em-text-muted);
    font-size: 0.8rem;
}

.file-preparing-track {
    height: 4px;
    border-radius: 999px;
    background: var(--em-surface-sunken);
    overflow: hidden;
}

.file-preparing-bar {
    height: 100%;
    background: var(--em-accent);
    border-radius: 999px;
    transition: width .15s linear;
}

/* Ein laufender Balken statt eines Prozentwerts.

   Der echte Fortschritt kam per Rueckruf aus dem FileReader zurueck nach .NET, waehrend .NET
   auf eben dieses Versprechen wartete. Das hat sich verklemmt: der Balken blieb bei 0 Prozent
   stehen, die Anzeige haing, und weil der Handler nie zurueckkam, half auch das finally nicht,
   das ihn haette aufraeumen sollen.

   Eine Angabe, die den Vorgang aufhaengt, den sie begleiten soll, ist keine gute Angabe. Der
   laufende Balken sagt nur "es passiert etwas" — und genau darum ging es. */
.file-preparing-bar.is-indeterminate {
    width: 35%;
    animation: filePreparingSlide 1.1s ease-in-out infinite;
}

@keyframes filePreparingSlide {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}

.file-preparing-text {
    color: var(--em-text-muted);
    font-size: 0.78rem;
}

/* Fusszeile der Vollbildansicht: reagieren und antworten, ohne das Bild zu schliessen.

   Vorher fuehrte der Weg dorthin ueber Schliessen, Suchen der Nachricht im Verlauf und das
   Kontextmenue — drei Schritte fuer etwas, das man beim Ansehen tun will. */
.lightbox-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
    z-index: 10;
}

.lightbox-reactions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lightbox-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    min-height: 40px;
    padding: 4px 10px;
    font-size: 1.25rem;
    line-height: 1;
    background: rgba(255, 255, 255, .12);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}

.lightbox-reaction:hover { background: rgba(255, 255, 255, .2); }
.lightbox-reaction:active { transform: scale(.94); }

/* Die eigene Reaktion hervorheben — sonst weiss man nach dem Tippen nicht, ob es ankam. */
.lightbox-reaction.is-mine {
    background: var(--em-accent-wash);
    border-color: var(--em-accent);
}

.lightbox-reaction-count {
    font-size: .78rem;
    color: #fff;
}

.lightbox-compose {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-compose-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font: inherit;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.lightbox-compose-input::placeholder { color: rgba(255, 255, 255, .55); }

.lightbox-compose-input:focus {
    outline: none;
    border-color: var(--em-accent);
}

.lightbox-compose-send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--em-accent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox-compose-send:disabled {
    opacity: .4;
    cursor: default;
}

/* ============================================
   Dateien eines Gespraechs — Album
   ============================================ */

.convfiles-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .6);
}

.convfiles-panel {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: 100%;
    background: var(--em-surface-panel);
    border: 1px solid var(--em-line);
    border-radius: 12px;
    overflow: hidden;
}

.convfiles-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--em-line);
}

.convfiles-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--em-text-primary);
}

.convfiles-count {
    padding: 1px 8px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--em-accent);
    background: var(--em-accent-wash);
    border-radius: 999px;
}

.convfiles-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--em-text-primary);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.convfiles-close:hover {
    background: var(--em-danger-bg);
    color: var(--em-danger-text);
}

/* Die Leiste bricht um, statt die Suche auf ein Guckloch zu schrumpfen. */
.convfiles-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--em-line);
}

.convfiles-search {
    flex: 1 1 220px;
    min-width: 0;
    padding: 8px 12px;
    font: inherit;
    color: var(--em-text-primary);
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: 8px;
}

.convfiles-search:focus {
    outline: none;
    border-color: var(--em-accent);
}

.convfiles-sort,
.convfiles-dir {
    padding: 8px 10px;
    font: inherit;
    color: var(--em-text-primary);
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line-strong);
    border-radius: 8px;
    cursor: pointer;
}

.convfiles-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--em-text-muted);
}

.convfiles-zoom input { width: 110px; }

/* Das Raster fuellt die Breite selbst auf: auto-fill mit einer Mindestbreite je Kachel, die
   der Regler setzt. Damit stimmen Spalten und Zeilen auf jedem Schirm ohne Umbruchpunkte. */
.convfiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--convfiles-tile), 1fr));
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.convfiles-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.convfiles-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    color: var(--em-text-muted);
    background: var(--em-surface-raised);
    border: 1px solid var(--em-line);
    border-radius: 8px;
    font-size: 1.6rem;
}

.convfiles-tile:hover .convfiles-thumb { border-color: var(--em-accent); }

.convfiles-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.convfiles-thumb-video { color: var(--em-accent); }

.convfiles-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    color: var(--em-text-primary);
}

.convfiles-meta {
    font-size: .74rem;
    color: var(--em-text-muted);
}

.convfiles-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--em-text-muted);
}

/* Auf schmalen Schirmen fuellt die Uebersicht den Platz — ein zentriertes Kaestchen mit Rand
   verschenkt dort genau die Flaeche, auf die es beim Durchsehen ankommt. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    /* Vollbild auf dem Telefon — aber die Notch oben und den Home-Indicator unten freihalten,
       sonst liegt die Kopfzeile der Datei-Uebersicht unter Uhrzeit/Akku. */
    .convfiles-overlay {
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
        box-sizing: border-box;
    }

    .convfiles-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
}

/* ============================================
   Topic anlegen — Event-Felder (Ort/Zeit/Tags)
   ============================================ */
.topic-geo { position: relative; }

.topic-geo-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: var(--em-bg-primary);
    box-shadow: 0 6px 18px var(--em-shadow-light);
}
.topic-geo-list li > button {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--em-text-primary);
}
.topic-geo-list li > button:hover { background: var(--em-bg-tertiary); }
.topic-geo-list li > button span {
    font-size: 0.78rem;
    color: var(--em-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topic-geo-chosen {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--em-primary-light);
    color: var(--em-primary);
    font-size: 0.85rem;
}
.topic-geo-clear, .topic-tag > button {
    margin-left: auto;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
}
.topic-geo-hint { margin-top: 4px; font-size: 0.8rem; color: var(--em-text-secondary); }

.topic-when-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.topic-when-row .form-control { flex: 1; min-width: 0; }
.topic-when-sep { color: var(--em-text-secondary); }
.topic-recur { margin-top: 6px; }

.topic-tags-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: var(--em-bg-primary);
}
.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    border-radius: 12px;
    background: var(--em-bg-tertiary);
    color: var(--em-text-primary);
    font-size: 0.82rem;
}
.topic-tag > button { margin-left: 2px; font-size: 1rem; color: var(--em-text-secondary); }
.topic-tag-input {
    flex: 1;
    min-width: 80px;
    border: none;
    background: none;
    outline: none;
    color: var(--em-text-primary);
    font-size: 0.9rem;
    padding: 4px;
}

/* ============================================
   Kalender (Topics mit Datum) — Monatsraster
   ============================================ */
.cal {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--em-bg-primary);
}
.cal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--em-border);
}
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: var(--em-bg-secondary);
    color: var(--em-text-primary);
    cursor: pointer;
    font-size: 1.1rem; line-height: 1;
}
.cal-btn:hover { background: var(--em-bg-tertiary); }
.cal-today {
    padding: 6px 12px;
    border: 1px solid var(--em-border);
    border-radius: 8px;
    background: var(--em-bg-secondary);
    color: var(--em-text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}
.cal-title { font-size: 1.1rem; font-weight: 600; color: var(--em-text-primary); text-transform: capitalize; }
.cal-count { margin-left: auto; font-size: 0.8rem; color: var(--em-text-secondary); }

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--em-border);
}
.cal-weekday {
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--em-text-secondary);
    text-align: right;
    text-transform: uppercase;
}
.cal-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    overflow-y: auto;
}
.cal-cell {
    border-right: 1px solid var(--em-border-light);
    border-bottom: 1px solid var(--em-border-light);
    padding: 4px;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.cal-cell-out { background: var(--em-bg-secondary); }
.cal-cell-out .cal-daynum { color: var(--em-text-muted); }
.cal-cell-today .cal-daynum {
    background: var(--em-primary);
    color: #fff;
}
.cal-daynum {
    align-self: flex-end;
    min-width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--em-text-primary);
}
.cal-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event {
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 4px;
    padding: 1px 5px;
    background: var(--em-primary-light);
    color: var(--em-primary);
    cursor: pointer;
    font-size: 0.72rem;
    overflow: hidden;
}
.cal-event:hover { filter: brightness(0.97); }
.cal-event-time { font-weight: 600; flex-shrink: 0; }
.cal-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .cal-cell { min-height: 58px; }
    .cal-event-name { display: none; }   /* eng: nur Zeit/Punkt zeigen */
    .cal-event { justify-content: center; }
}

/* Topics-Hauptflaeche (Karte/Kalender in der breiten Spalte statt in der schmalen Sidebar) */
.topics-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.topics-main .topics-view,
.topics-main .cal { flex: 1; min-height: 0; }

/* Leaflet-Karte (Topics mit Ort) */
.topic-map-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    width: 100%;
}
.topic-map {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    background: var(--em-bg-secondary);
}
.topic-map-empty {
    position: absolute;
    top: 12px; left: 0; right: 0;
    z-index: 500;
    margin: 0 auto;
    width: max-content;
    max-width: 90%;
    padding: 10px 16px;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px var(--em-shadow-light);
    pointer-events: none;
    text-align: center;
}
/* Leaflet-Bedienelemente ueber der eigenen Notch/Overlay-Ebene halten */
.leaflet-top, .leaflet-bottom { z-index: 400; }

/* Tri-axialer Topic-Filter (Chips) */
.topic-filter { padding: 6px 10px; border-bottom: 1px solid var(--em-border); }
.topic-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.topic-fchip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 4px 2px 8px; border-radius: 12px;
    background: var(--em-bg-tertiary); color: var(--em-text-primary); font-size: 0.78rem;
}
.topic-fchip > button { border: none; background: none; color: var(--em-text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.topic-fchip-geo { background: var(--em-primary-light); color: var(--em-primary); }
.topic-fchip-date { background: var(--em-success-bg); color: var(--em-success-text); }
.topic-filter-input { flex: 1; min-width: 90px; border: none; background: none; outline: none; color: var(--em-text-primary); font-size: 0.85rem; padding: 3px; }

/* Datumsbereich im Kalenderkopf */
.cal-range { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 0.8rem; color: var(--em-text-secondary); }
.cal-range input { padding: 3px 5px; border: 1px solid var(--em-border); border-radius: 6px; background: var(--em-bg-secondary); color: var(--em-text-primary); font-size: 0.78rem; }
.cal-range-clear { border: none; background: none; color: var(--em-text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; }

/* ============================================
   Kalender — Ansichts-Umschalter + Woche/Tag/Agenda
   ============================================ */
.cal-views { display: inline-flex; gap: 2px; margin-left: 8px; }
.cal-view {
    padding: 5px 10px; border: 1px solid var(--em-border); background: var(--em-bg-secondary);
    color: var(--em-text-secondary); cursor: pointer; font-size: 0.8rem;
}
.cal-view:first-child { border-radius: 8px 0 0 8px; }
.cal-view:last-child { border-radius: 0 8px 8px 0; }
.cal-view:not(:first-child) { border-left: none; }
.cal-view.active { background: var(--em-primary); color: #fff; border-color: var(--em-primary); }

/* Zeitgitter (Woche/Tag) */
.cal-timegrid-head {
    --cal-cols: 7;
    display: grid;
    grid-template-columns: 56px repeat(var(--cal-cols), 1fr);
    border-bottom: 1px solid var(--em-border);
}
.cal-timegutter-head { border-right: 1px solid var(--em-border-light); }
.cal-dayhead {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 5px 2px; border-left: 1px solid var(--em-border-light);
    font-size: 0.75rem; color: var(--em-text-secondary);
}
.cal-dayhead-num { font-size: 1.05rem; font-weight: 600; color: var(--em-text-primary); }
.cal-dayhead-today .cal-dayhead-num {
    background: var(--em-primary); color: #fff; border-radius: 50%;
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-timegrid-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-timegrid {
    --cal-cols: 7;
    --cal-hour-h: 44px;
    display: grid;
    grid-template-columns: 56px repeat(var(--cal-cols), 1fr);
    position: relative;
    height: calc(24 * var(--cal-hour-h));
}
.cal-timegutter { position: relative; }
.cal-hourlabel {
    position: absolute; right: 6px; transform: translateY(-6px);
    font-size: 0.68rem; color: var(--em-text-muted);
}
.cal-daycol { position: relative; border-left: 1px solid var(--em-border-light); }
.cal-daycol-today { background: var(--em-primary-light); }
.cal-hourline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--em-border-light); }
.cal-tevent {
    position: absolute; left: 2px; right: 2px;
    display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 2px 5px; border: none; border-left: 3px solid var(--em-primary);
    border-radius: 4px; background: var(--em-primary-light); color: var(--em-primary);
    cursor: pointer; font-size: 0.72rem; text-align: left; z-index: 1;
}
.cal-tevent:hover { filter: brightness(0.97); }
.cal-tevent-time { font-weight: 600; }
.cal-tevent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Agenda */
.cal-agenda { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
.cal-agenda-empty { padding: 40px; text-align: center; color: var(--em-text-secondary); }
.cal-agenda-day { display: flex; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--em-border-light); }
.cal-agenda-today { background: var(--em-primary-light); }
.cal-agenda-date {
    display: flex; flex-direction: column; align-items: center; min-width: 44px;
    color: var(--em-text-secondary);
}
.cal-agenda-dow { font-size: 0.7rem; text-transform: uppercase; }
.cal-agenda-dnum { font-size: 1.3rem; font-weight: 600; color: var(--em-text-primary); }
.cal-agenda-mon { font-size: 0.7rem; text-transform: uppercase; }
.cal-agenda-items { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cal-agenda-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 6px 10px; border: none; border-left: 3px solid var(--em-primary);
    border-radius: 6px; background: var(--em-bg-secondary); color: var(--em-text-primary);
    cursor: pointer; text-align: left;
}
.cal-agenda-item:hover { background: var(--em-bg-tertiary); }
.cal-agenda-time { font-size: 0.78rem; font-weight: 600; color: var(--em-primary); min-width: 54px; }
.cal-agenda-name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .cal-views .cal-view { padding: 5px 7px; font-size: 0.72rem; }
    .cal-range { display: none; }   /* eng: der Datumsbereich ist ueber die Liste erreichbar */
}

/* Map-Kopf: Adress-Autocomplete (schwebt ueber der Karte) */
.topic-map-head {
    position: absolute;
    top: 10px; left: 50px; right: 10px;
    z-index: 600;
    max-width: 420px;
}
.topic-map-search {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 10px;
    box-shadow: 0 4px 14px var(--em-shadow-light);
}
.topic-map-search .em-icon { color: var(--em-text-secondary); flex-shrink: 0; }
.topic-map-search-input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    color: var(--em-text-primary); font-size: 0.9rem;
}
.topic-map-search-spin { color: var(--em-text-secondary); }
.topic-map-suggest {
    list-style: none; margin: 4px 0 0; padding: 0;
    max-height: 260px; overflow-y: auto;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px var(--em-shadow-light);
}
.topic-map-suggest li > button {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
    text-align: left; padding: 8px 12px; border: none; background: none;
    cursor: pointer; color: var(--em-text-primary);
}
.topic-map-suggest li > button:hover { background: var(--em-bg-tertiary); }
.topic-map-suggest li > button span {
    font-size: 0.76rem; color: var(--em-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Topic-Sortierung im Kopf der Liste */
.topic-sort {
    margin-left: auto; margin-right: 6px;
    padding: 3px 6px; border: 1px solid var(--em-border); border-radius: 6px;
    background: var(--em-bg-secondary); color: var(--em-text-secondary); font-size: 0.78rem;
}

/* ============================================
   User Interaction History (Rechtsklick -> History)
   ============================================ */
.history-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--em-bg-primary, #ffffff);
    color: var(--em-text-primary, #212529);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.history-view { display: flex; flex-direction: column; height: 100%; }
.history-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--em-border);
    flex: 0 0 auto;
}
.history-header h5 { margin: 0; font-size: 1.05rem; display: flex; align-items: baseline; gap: 8px; }
.history-with { color: var(--em-primary, #4c8bf5); font-weight: 600; }
.history-header .btn-back {
    background: none; border: none; color: var(--em-text-secondary);
    cursor: pointer; padding: 6px; border-radius: 8px; display: flex;
}
.history-header .btn-back:hover { background: var(--em-bg-secondary); color: var(--em-text-primary); }
.history-content { flex: 1 1 auto; overflow-y: auto; padding: 12px 18px 24px; }
.history-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 160px; color: var(--em-text-secondary); font-size: 0.95rem;
}
.history-grid-wrap { overflow-x: auto; }
.history-grid {
    width: 100%; border-collapse: collapse; font-size: 0.92rem;
    background: var(--em-bg-secondary);
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--em-border);
}
.history-grid thead th {
    text-align: left; padding: 10px 14px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--em-text-secondary);
    background: var(--em-bg-tertiary, var(--em-bg-primary));
    border-bottom: 1px solid var(--em-border);
}
.history-grid tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--em-border);
    vertical-align: middle;
}
.history-grid tbody tr:last-child td { border-bottom: none; }
.history-grid tbody tr.clickable { cursor: pointer; }
.history-grid tbody tr.clickable:hover { background: rgba(127,127,127,0.10); }
.history-type { display: inline-flex; align-items: center; gap: 6px; color: var(--em-primary, #4c8bf5); font-weight: 500; }
.history-type svg { width: 16px; height: 16px; }

/* ============================================
   Eingehende Freundschaftsanfragen (Sidebar + Profil-Panel)
   ============================================ */
.friend-requests-section {
    padding: 10px 12px;
    border-bottom: 1px solid var(--em-border);
    background: var(--em-bg-secondary);
}
.friend-requests-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--em-text-secondary); margin-bottom: 8px;
}
.friend-requests-badge {
    background: var(--em-primary, #4c8bf5); color: #fff;
    border-radius: 999px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700;
}
.friend-request-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 10px;
    background: var(--em-bg-primary);
    border: 1px solid var(--em-border);
    margin-bottom: 6px;
}
.friend-request-card:last-child { margin-bottom: 0; }
.fr-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--em-primary, #4c8bf5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; text-transform: uppercase; flex: 0 0 auto;
}
.fr-info { flex: 1 1 auto; min-width: 0; }
.fr-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-note { font-size: 0.78rem; color: var(--em-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.fr-accept, .fr-decline {
    width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fr-accept { background: var(--em-success, #2ecc71); color: #fff; }
.fr-decline { background: var(--em-bg-tertiary, var(--em-bg-secondary)); color: var(--em-text-secondary); border: 1px solid var(--em-border); }
.fr-accept:hover { filter: brightness(1.08); }
.fr-decline:hover { color: var(--em-danger, #e74c3c); }
.fr-accept svg, .fr-decline svg { width: 16px; height: 16px; }

.udp-friend-request {
    margin-top: 16px; padding: 12px;
    border-radius: 10px;
    background: var(--em-bg-secondary);
    border: 1px solid var(--em-primary, #4c8bf5);
}
.udp-fr-text { font-size: 0.88rem; color: var(--em-text-secondary); margin-bottom: 8px; }
.udp-fr-actions { display: flex; gap: 8px; }
.udp-fr-actions .btn, .udp-fr-actions .btn-outline { flex: 1 1 0; }