/* v141bs Bug-Hunt R7: Global !important for .hidden to beat inline-styles */


/* Grund: 98 von 98 hidden Elements waren sichtbar weil inline 'display:flex' die .hidden-Regel überschrieb */


/* Inline-Styles gewinnen IMMER gegen normale CSS-Regeln - nur !important schlägt sie */


.hidden { display: none !important; }





/* ============================================================================
   DESIGN-TOKENS (v142: einheitliche Skala)
   - Border-Radius: xs=4, sm=6, md=8, lg=12, xl=14, 2xl=20, 3xl=28, full=9999
   - Spacing: 4er-Raster (4, 8, 12, 16, 20, 24, 32, 40, 48)
   - Font-Size: 11, 12, 13, 14, 15, 16, 18, 20, 24, 32
   - Button-Höhen: 32, 36, 40, 44
   ============================================================================ */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 15px;
  --font-xl: 16px;
  --font-2xl: 18px;
  --font-3xl: 20px;
  --font-4xl: 24px;
  --font-5xl: 32px;

  --btn-height-sm: 32px;
  --btn-height-md: 36px;
  --btn-height-lg: 40px;
  --btn-height-xl: 44px;

  --btn-pad-x: 14px;
  --btn-pad-y: 8px;

  --modal-content-width: 540px;
  --modal-content-max-width: 96vw;
  --modal-content-max-height: 90vh;

  /* === Color-Palette (v142: konsolidiert) === */
  --bg-app: #0f1426;
  --bg-card: #1a1f3a;
  --bg-elevated: #2a3050;
  --bg-hover: #202c33;
  --bg-input: #2a3050;
  --bg-overlay: rgba(15, 20, 38, 0.85);

  --text-primary: #e9edef;
  --text-secondary: #aebac1;
  --text-tertiary: #8b95b0;
  --text-muted: #6b7280;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #a78bfa;
  --secondary: #ec4899;
  --success: #00a884;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* === v141cv137: Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.40);

  /* === v141cv137: Motion === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* === v141cv137: Avatar sizes === */
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  --avatar-xl: 64px;
  --avatar-2xl: 96px;

  /* === v141cv137: Sidebar width === */
  --sidebar-width: 320px;
  --sidebar-width-compact: 76px;

}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ============================================================================


   FRITZ-MESSENGER-PLUS — "Cosmic Aurora" Design


   Modern dark theme with glassmorphism, animated aurora background, and


   vibrant gradient accents. Inspired by premium chat apps (Telegram, iMessage).


   ============================================================================ */





* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





:root {


    /* ==========================================================================


       FRITZ-MESSENGER — "Cosmic Violet" Design Tokens (Phase CC)


       Single source of truth. Old --wa-* names still resolve via alias section


       below for backwards compatibility (deprecated, will be removed in CC.2).


       ========================================================================== */





    /* === Brand (Cosmic Violet) === */


    --color-primary: #7c3aed;


    --color-primary-dark: #6d28d9;


    --color-primary-light: #a78bfa;


    --color-primary-50: rgba(124, 58, 237, 0.08);


    --color-primary-20: rgba(124, 58, 237, 0.20);


    --color-pink: #ec4899;





    /* === Semantic === */


    --color-success: #00a884;       /* online, call-accept, success */


    --color-success-light: #25d3ae;


    --color-success-dark: #008f72;


    --color-danger: #ef4444;


    --color-danger-light: #fca5a5;


    --color-info: #06b6d4;


    --color-warning: #f59e0b;


    --color-warning-light: #fbbf24;





    /* === Surfaces (Dark default) === */


    --bg-base: #1a1d2e;


    --bg-deep: #2a2839;


    --bg-card: rgba(38, 41, 65, 0.75);


    --bg-card-solid: #262941;


    --bg-elevated: rgba(50, 54, 82, 0.85);


    --bg-input: rgba(20, 22, 38, 0.7);


    --bg-hover: rgba(124, 58, 237, 0.18);


    --bg-overlay: rgba(15, 17, 32, 0.85);





    /* === Text - High contrast for readability === */


    --text-primary: #ffffff;


    --text-secondary: #e8e6f5;


    --text-muted: #c0bfd6;


    --text-on-primary: #ffffff;


    --text-strong: #ffffff;





    /* === Borders === */


    --border: rgba(255, 255, 255, 0.08);


    --border-strong: rgba(255, 255, 255, 0.16);


    --border-focus: var(--color-primary);





    /* === Gradients === */


    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);


    --gradient-primary-soft: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(236,72,153,0.22));


    --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%);


    --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);


    --gradient-success: linear-gradient(135deg, #00a884 0%, #06b6d4 100%);


    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);


    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));





    /* === Radius (5-step scale) === */


    --radius-xs: 6px;


    --radius-sm: 10px;


    --radius-md: 14px;


    --radius-lg: 20px;


    --radius-xl: 28px;


    --radius-full: 999px;





    /* === Spacing (8px base) === */


    --space-1: 0.25rem;


    --space-2: 0.5rem;


    --space-3: 0.75rem;


    --space-4: 1rem;


    --space-5: 1.5rem;


    --space-6: 2rem;


    --space-7: 2.5rem;


    --space-8: 3rem;





    /* === Type Scale (iMessage-inspired) === */


    --text-xs: 0.75rem;


    --text-sm: 0.875rem;


    --text-base: 0.9375rem;


    --text-md: 1rem;


    --text-lg: 1.125rem;


    --text-xl: 1.25rem;


    --text-2xl: 1.5rem;


    --text-3xl: 1.875rem;


    --text-display: 2.5rem;


    --text-mega: 3.5rem;





    --leading-tight: 1.2;


    --leading-normal: 1.5;


    --leading-relaxed: 1.6;





    --weight-normal: 400;


    --weight-medium: 500;


    --weight-semibold: 600;


    --weight-bold: 700;


    --weight-extrabold: 800;





    --tracking-tight: -0.02em;


    --tracking-normal: 0;


    --tracking-wide: 0.02em;


    --tracking-wider: 0.05em;





    /* === Shadows (3-layer) === */


    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);


    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);


    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);


    --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.40);


    --shadow-glow-success: 0 0 24px rgba(0, 168, 132, 0.40);


    --shadow-glow-danger: 0 0 24px rgba(239, 68, 68, 0.40);


    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);





    /* === Animation === */


    --dur-instant: 0.08s;


    --dur-fast: 0.15s;


    --dur-base: 0.25s;


    --dur-slow: 0.4s;


    --dur-slower: 0.6s;





    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);


    --ease-ios: cubic-bezier(0.2, 0.8, 0.2, 1);


    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);


    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);





    --transition-fast: var(--dur-fast) var(--ease-standard);


    --transition: var(--dur-base) var(--ease-standard);


    --transition-slow: var(--dur-slow) var(--ease-standard);


    --transition-ios: var(--dur-base) var(--ease-ios);


    --transition-bounce: var(--dur-base) var(--ease-bounce);





    /* === Glass (frosted glass) === */


    --glass-sm: blur(8px) saturate(140%);


    --glass-md: blur(16px) saturate(140%);


    --glass-lg: blur(24px) saturate(160%);





    /* === Z-Index Scale (semantic) === */


    --z-base: 0;


    --z-content: 1;


    --z-sticky: 10;


    --z-header: 20;


    --z-mobile-sidebar: 30;


    --z-overlay: 50;


    --z-dropdown: 100;


    --z-popover: 200;


    --z-call: 600;


    --z-modal: 1000;


    --z-toast: 1100;


    --z-tooltip: 1200;


    --z-max: 9999;





    /* === Sizes === */


    --sidebar-width: 340px;


    --chat-header-height: 64px;


    --composer-min-height: 56px;


    --composer-max-height: 140px;


    --touch-target: 44px;


    --nav-h: 60px;





    /* === Mobile safe-area === */


    --safe-top: env(safe-area-inset-top, 0px);


    --safe-bottom: env(safe-area-inset-bottom, 0px);


    --safe-left: env(safe-area-inset-left, 0px);


    --safe-right: env(safe-area-inset-right, 0px);





    /* ==========================================================================


       Legacy aliases (Phase CC back-compat)


       Old --wa-* names resolve to the new semantic tokens. Deprecated, will be


       removed in a later phase. Keeps the existing 8000+ lines working.


       ========================================================================== */


    --primary: var(--color-primary);


    --primary-dark: var(--color-primary-dark);


    --primary-light: var(--color-primary-light);


    --secondary: var(--color-pink);


    --accent: var(--color-info);


    --accent-2: var(--color-warning);


    --success: var(--color-success);


    --warning: var(--color-warning);


    --danger: var(--color-danger);


    --info: var(--color-info);


    --shadow-glow-pink: 0 0 30px rgba(236, 72, 153, 0.40);


    --radius: var(--radius-md);


    --wa-green: var(--color-success);


    --wa-green-dark: var(--color-success-dark);


    --wa-green-light: var(--color-success-light);


    --wa-bg: var(--bg-base);


    --wa-bg-2: var(--bg-deep);


    --wa-panel: var(--bg-card);


    --wa-panel-2: var(--bg-card-solid);


    --wa-hover: var(--bg-hover);


    --wa-text: var(--text-primary);


    --wa-text-secondary: var(--text-secondary);


    --wa-text-muted: var(--text-muted);


    --wa-bubble-out: var(--gradient-primary);


    --wa-bubble-in: var(--bg-card-solid);


    --wa-divider: var(--border);


    --wa-unread: var(--color-success);


    --wa-call-green: var(--color-success);


    --wa-call-red: var(--color-danger);


    --kpi-1: #7c3aed;


    --kpi-2: #ec4899;


    --kpi-3: #06b6d4;


    --kpi-4: #f59e0b;


    --kpi-5: #00d856;


    --kpi-bg: rgba(38, 41, 65, 0.6);


    --kpi-border: rgba(255, 255, 255, 0.08);


}





html, body {


    margin: 0;


    padding: 0;


    height: 100%;


    min-height: 100vh;


    min-height: 100dvh;


    overflow: hidden;


    overscroll-behavior: none;


    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',


        'Helvetica Neue', Arial, sans-serif;


    font-size: 15px;


    line-height: 1.5;


    color: var(--text-primary);


    background: var(--bg-base);


    -webkit-font-smoothing: antialiased;


    -moz-osx-font-smoothing: grayscale;


    -webkit-tap-highlight-color: transparent;


}





/* ============================================================================


   ANIMATED AURORA BACKGROUND (Phase CC — Cosmic Violet, performance-tuned)


   Single 3-layer gradient, max blur(30px), reduced-motion respected.


   ============================================================================ */


body::before {


    content: '';


    position: fixed;


    inset: 0;


    z-index: 0;


    pointer-events: none;


    background:


        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(124, 58, 237, 0.45) 0%, transparent 60%),


        radial-gradient(ellipse 50% 60% at 85% 80%, rgba(236, 72, 153, 0.40) 0%, transparent 60%),


        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(6, 182, 212, 0.28) 0%, transparent 70%),


        radial-gradient(ellipse 30% 30% at 80% 20%, rgba(245, 158, 11, 0.22) 0%, transparent 70%);


    filter: blur(40px);


    animation: aurora-drift 22s ease-in-out infinite alternate;


    will-change: transform;


    mix-blend-mode: screen;


}





body::after { display: none; }





@keyframes aurora-drift {


    0%   { transform: translate(0, 0) scale(1); }


    100% { transform: translate(-3%, 2%) scale(1.05); }


}





@media (prefers-reduced-motion: reduce) {


    body::before { animation: none; }


}


@media (max-width: 768px) {


    body::before { filter: blur(20px); }

    /* v142: Sidebar z-index lowered on mobile so modals are visible */
    .sidebar { z-index: 50 !important; }



}





/* ============================================================================


   CUSTOM SCROLLBARS


   ============================================================================ */


::-webkit-scrollbar {


    width: 8px;


    height: 8px;


}


::-webkit-scrollbar-track {


    background: transparent;


}


::-webkit-scrollbar-thumb {


    background: linear-gradient(180deg, rgba(124, 58, 237, 0.4), rgba(236, 72, 153, 0.4));


    border-radius: var(--radius-full);


    transition: background var(--transition);


}


::-webkit-scrollbar-thumb:hover {


    background: linear-gradient(180deg, rgba(124, 58, 237, 0.7), rgba(236, 72, 153, 0.7));


}


* {


    scrollbar-width: thin;


    scrollbar-color: rgba(124, 58, 237, 0.4) transparent;


}





/* ============================================================================


   LOGIN / AUTH SCREEN


   ============================================================================ */





/* === Epic animated background for the auth screen === */


#auth-screen {


    position: relative;


    overflow: hidden;


    isolation: isolate;


}





/* Layer 1: Deep cosmic gradient */


#auth-screen::before {


    content: '';


    position: absolute;


    inset: 0;


    z-index: -2;


    background:


        radial-gradient(ellipse 80% 60% at 30% 20%, rgba(124, 58, 237, 0.55), transparent 60%),


        radial-gradient(ellipse 70% 50% at 80% 30%, rgba(236, 72, 153, 0.50), transparent 60%),


        radial-gradient(ellipse 60% 60% at 50% 90%, rgba(6, 182, 212, 0.42), transparent 60%),


        radial-gradient(ellipse 50% 40% at 90% 80%, rgba(245, 158, 11, 0.35), transparent 60%),


        radial-gradient(ellipse 50% 50% at 10% 60%, rgba(34, 211, 238, 0.30), transparent 60%),


        linear-gradient(135deg, #0a0e2a 0%, #1a0e2e 50%, #0a1a2e 100%);


    filter: blur(40px);


    animation: auth-bg-drift 18s ease-in-out infinite alternate;


}





/* Layer 2: Floating orbs */


#auth-screen::after {


    content: '';


    position: absolute;


    inset: -10%;


    z-index: -1;


    pointer-events: none;


    background:


        radial-gradient(circle 220px at 15% 25%, rgba(167, 139, 250, 0.45), transparent 70%),


        radial-gradient(circle 180px at 85% 35%, rgba(244, 114, 182, 0.40), transparent 70%),


        radial-gradient(circle 240px at 75% 85%, rgba(34, 211, 238, 0.35), transparent 70%),


        radial-gradient(circle 160px at 25% 75%, rgba(251, 191, 36, 0.32), transparent 70%);


    filter: blur(50px);


    animation: auth-orbs-drift 14s ease-in-out infinite alternate;


}





@keyframes auth-bg-drift {


    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }


    50%  { transform: translate(2%, -2%) scale(1.05) rotate(3deg); }


    100% { transform: translate(-2%, 2%) scale(0.97) rotate(-3deg); }


}





@keyframes auth-orbs-drift {


    0%   { transform: translate(0, 0) rotate(0deg); }


    50%  { transform: translate(-3%, 2%) rotate(8deg); }


    100% { transform: translate(3%, -2%) rotate(-6deg); }


}





/* Star field (small twinkle dots) */


#auth-screen .auth-stars {


    position: absolute;


    inset: 0;


    z-index: -1;


    pointer-events: none;


    background-image:


        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, transparent),


        radial-gradient(1px 1px at 60px 120px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1.5px 1.5px at 130px 80px, rgba(255,255,255,0.6), transparent),


        radial-gradient(1px 1px at 200px 50px, #ffffff, transparent),


        radial-gradient(2px 2px at 250px 150px, rgba(167, 139, 250, 0.8), transparent),


        radial-gradient(1px 1px at 310px 200px, rgba(244, 114, 182, 0.7), transparent),


        radial-gradient(1.5px 1.5px at 50px 220px, #ffffff, transparent),


        radial-gradient(1px 1px at 180px 260px, rgba(255,255,255,0.7), transparent),


        radial-gradient(1.5px 1.5px at 280px 30px, rgba(255,255,255,0.6), transparent),


        radial-gradient(1px 1px at 100px 180px, #ffffff, transparent);


    background-size: 350px 300px;


    background-repeat: repeat;


    animation: stars-twinkle 6s ease-in-out infinite alternate;


    opacity: 0.55;


}





@keyframes stars-twinkle {


    0%   { opacity: 0.35; }


    50%  { opacity: 0.75; }


    100% { opacity: 0.45; }


}





.auth-container {


    min-height: 100vh;     /* Fallback für ältere Browser */


    min-height: 100dvh;    /* iOS: dynamische Viewport-Höhe (URL-Bar) */


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    padding: 1.5rem;


    position: relative;


    z-index: 1;


}





.auth-box {


    width: 100%;


    max-width: 440px;


    background: rgba(20, 22, 50, 0.55);


    backdrop-filter: blur(28px) saturate(160%);


    -webkit-backdrop-filter: blur(28px) saturate(160%);


    border: 1px solid rgba(255, 255, 255, 0.12);


    border-radius: var(--radius-xl);


    padding: 2.5rem 2.25rem;


    box-shadow:


        0 25px 60px -10px rgba(0, 0, 0, 0.6),


        0 0 80px rgba(124, 58, 237, 0.35),


        inset 0 1px 0 rgba(255, 255, 255, 0.08);


    animation: fade-in-up 0.6s var(--ease-bounce);


    position: relative;


    overflow: hidden;


}





/* Animated conic gradient border glow around the box */


.auth-box::before {


    content: '';


    position: absolute;


    inset: -2px;


    border-radius: calc(var(--radius-xl) + 2px);


    background: conic-gradient(


        from var(--auth-angle, 0deg),


        rgba(124, 58, 237, 0.6),


        rgba(236, 72, 153, 0.6),


        rgba(6, 182, 212, 0.6),


        rgba(245, 158, 11, 0.5),


        rgba(124, 58, 237, 0.6)


    );


    z-index: -1;


    opacity: 0.5;


    filter: blur(15px);


    animation: auth-conic-spin 8s linear infinite;


    pointer-events: none;


}





@property --auth-angle {


    syntax: '<angle>';


    initial-value: 0deg;


    inherits: false;


}





@keyframes auth-conic-spin {


    to { --auth-angle: 360deg; }


}





/* Soft inner highlight */


.auth-box::after {


    content: '';


    position: absolute;


    top: 0;


    left: 10%;


    right: 10%;


    height: 1px;


    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);


    pointer-events: none;


}





.auth-hero {


    display: flex;


    justify-content: center;


    margin-bottom: 1rem;


}





.auth-hero-icon,


.auth-hero-icon-img {


    font-size: 3.5rem;


    width: 90px;


    height: 90px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(236, 72, 153, 0.25));


    border: 1px solid rgba(255, 255, 255, 0.15);


    border-radius: 50%;


    box-shadow:


        0 0 40px rgba(124, 58, 237, 0.5),


        inset 0 0 20px rgba(255, 255, 255, 0.1);


    animation: auth-icon-pulse 3s ease-in-out infinite;


    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.7));


}





@keyframes auth-icon-pulse {


    0%, 100% {


        transform: scale(1);


        box-shadow: 0 0 40px rgba(124, 58, 237, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1);


    }


    50% {


        transform: scale(1.06);


        box-shadow: 0 0 60px rgba(236, 72, 153, 0.7), inset 0 0 25px rgba(255, 255, 255, 0.15);


    }


}





/* === Performance: Animationen pausieren, wenn der User tippt ===


   Hintergrund-Drift, Orbs, Border-Glow und Icon-Pulsing verursachen


   GPU-Overload im Android-WebView, besonders hinter backdrop-filter.


   Sobald ein Input fokussiert ist, werden die Animationen eingefroren


   → kein Flackern mehr beim Tippen, flüssige IME-Interaktion. */


#auth-screen:focus-within::before,


#auth-screen:focus-within::after,


#auth-screen:focus-within .auth-stars,


#auth-screen:focus-within .auth-hero-icon,


#auth-screen:focus-within .auth-box::before {


    animation-play-state: paused !important;


}





/* prefers-reduced-motion: alle Auth-Animationen komplett deaktivieren */


@media (prefers-reduced-motion: reduce) {


    #auth-screen::before,


    #auth-screen::after,


    #auth-screen .auth-stars,


    #auth-screen .auth-hero-icon,


    .auth-box::before {


        animation: none !important;


    }


}





.auth-tagline {


    text-align: center;


    color: var(--text-secondary);


    font-size: 0.875rem;


    margin: -0.5rem 0 1.5rem;


    font-weight: 400;


    letter-spacing: 0.01em;


}





/* === Cosmic Violet version badge (Phase CC v46.2) === */


.version-badge {


    display: inline-flex;


    align-items: center;


    gap: 0.5rem;


    margin: 0 auto 1.5rem;


    padding: 0.4rem 0.875rem;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.18));


    border: 1px solid rgba(167, 139, 250, 0.35);


    border-radius: var(--radius-full);


    font-size: 0.72rem;


    font-weight: 600;


    letter-spacing: 0.08em;


    text-transform: uppercase;


    color: #e9d5ff;


    box-shadow:


        0 0 20px rgba(124, 58, 237, 0.25),


        inset 0 1px 0 rgba(255, 255, 255, 0.08);


    backdrop-filter: blur(12px);


    -webkit-backdrop-filter: blur(12px);


    text-align: center;


    position: relative;


    animation: badge-pulse 3.5s ease-in-out infinite;


}


.version-badge { /* centering trick for inline-flex inside block */


    display: flex;


    width: max-content;


    margin-left: auto;


    margin-right: auto;


    margin-bottom: 1.5rem;


}


.version-badge__dot {


    width: 8px;


    height: 8px;


    border-radius: 50%;


    background: linear-gradient(135deg, #a78bfa, #f472b6);


    box-shadow: 0 0 8px rgba(167, 139, 250, 0.9);


    animation: badge-dot 2s ease-in-out infinite;


    flex-shrink: 0;


}


@keyframes badge-pulse {


    0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }


    50%      { box-shadow: 0 0 32px rgba(236, 72, 153, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }


}


@keyframes badge-dot {


    0%, 100% { transform: scale(1);   opacity: 1;   }


    50%      { transform: scale(1.4); opacity: 0.7; }


}





.auth-box h1 {


    font-size: 1.85rem;


    font-weight: 800;


    text-align: center;


    margin-bottom: 0.4rem;


    background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 40%, #fcd34d 100%);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


    letter-spacing: -0.02em;


    text-shadow: 0 0 30px rgba(167, 139, 250, 0.4);


    position: relative;


    z-index: 1;


}





.auth-box h2 {


    font-size: 0.9375rem;


    text-align: center;


    color: var(--text-secondary);


    margin-bottom: 1.75rem;


    font-weight: 400;


}





.auth-tabs {


    display: flex;


    background: var(--bg-input);


    border-radius: var(--radius-full);


    padding: 4px;


    margin-bottom: 1.5rem;


    border: 1px solid var(--border);


}





/* === Login-Screen Language-Switcher (v141bo) === */


.login-lang-switcher {


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    gap: 4px;


    margin: 0 0 1rem 0;


    padding: 6px 8px;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


}


.login-lang-btn {


    background: transparent;


    border: 1px solid transparent;


    border-radius: var(--radius);


    padding: 4px 6px;


    font-size: 18px;


    line-height: 1;


    cursor: pointer;


    transition: all 0.15s ease;


    min-width: 32px;


    text-align: center;


    filter: grayscale(40%);


    opacity: 0.7;


}


.login-lang-btn:hover {


    background: var(--bg-hover, rgba(255,255,255,0.06));


    filter: grayscale(0%);


    opacity: 1;


    transform: translateY(-1px);


}


.login-lang-btn.active {


    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);


    border-color: #8b5cf6;


    filter: grayscale(0%);


    opacity: 1;


    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);


}


.login-lang-btn:focus-visible {


    outline: 2px solid #8b5cf6;


    outline-offset: 2px;


}


@media (max-width: 480px) {


    .login-lang-switcher { gap: 2px; padding: 4px 6px; }


    .login-lang-btn { font-size: 16px; padding: 3px 5px; min-width: 28px; }


}





.auth-tab {


    flex: 1;


    padding: 0.6rem;


    border: none;


    background: transparent;


    color: var(--text-secondary);


    font-size: 0.875rem;


    font-weight: 600;


    border-radius: var(--radius-full);


    cursor: pointer;


    transition: all var(--transition);


}





.auth-tab.active {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    box-shadow: var(--shadow-glow);


}





.auth-form {


    display: none;


    flex-direction: column;


    gap: 0.875rem;


}





.auth-form.active {


    display: flex;


    animation: fade-in 0.35s ease;


}





.auth-form input, .auth-form select {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.875rem 1rem;


    color: var(--text-primary);


    font-size: 0.9375rem;


    font-family: inherit;


    transition: all var(--transition);


    outline: none;


}





.auth-form input:focus, .auth-form select:focus {


    border-color: var(--primary);


    background: rgba(124, 58, 237, 0.05);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);


}





.auth-form input::placeholder {


    color: var(--text-muted);


}





/* Password-Input mit Anzeige-Toggle */


.password-wrapper {


    position: relative;


    display: flex;


    align-items: center;


}


.password-wrapper input {


    flex: 1;


    width: 100%;


    padding-right: 2.6rem !important;  /* Platz für Toggle-Button */


}


.pw-toggle {


    position: absolute;


    right: 0.4rem;


    top: 50%;


    transform: translateY(-50%);


    background: rgba(124, 58, 237, 0.12);


    border: 1.5px solid rgba(124, 58, 237, 0.3);


    color: var(--primary);


    font-size: 1.5rem;


    cursor: pointer;


    padding: 0.5rem 0.75rem;


    border-radius: 10px;


    line-height: 1;


    -webkit-tap-highlight-color: transparent;


    transition: all 0.2s;


    min-width: 44px;


    min-height: 44px;


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 4px;


    font-weight: 600;


}


.pw-toggle:hover {


    color: white;


    background: var(--primary);


    transform: translateY(-50%) scale(1.05);


}


.pw-toggle.active {


    color: white;


    background: var(--primary);


    border-color: var(--primary);


}


.pw-toggle-text {


    font-size: 0.75rem;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





.auth-submit {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border: none;


    border-radius: var(--radius);


    padding: 0.875rem 1rem;


    font-size: 1rem;


    font-weight: 700;


    cursor: pointer;


    margin-top: 0.5rem;


    transition: all var(--transition);


    box-shadow: var(--shadow-glow);


    letter-spacing: 0.02em;


}





.auth-submit:hover {


    transform: translateY(-2px);


    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.4);


}





.auth-submit:active {


    transform: translateY(0);


}





.auth-error {


    background: rgba(239, 68, 68, 0.12);


    color: #fca5a5;


    border: 1px solid rgba(239, 68, 68, 0.25);


    border-radius: var(--radius);


    padding: 0.6rem 0.875rem;


    font-size: 0.875rem;


    text-align: center;


}





.auth-remember {


    display: flex;


    align-items: center;


    gap: 0.5rem;


    color: var(--text-secondary);


    font-size: 0.875rem;


    margin-top: 0.3rem;


    cursor: pointer;


}





.auth-remember input {


    width: auto;


    margin: 0;


    cursor: pointer;


    accent-color: var(--primary);


}





/* ============================================================================


   APP LAYOUT


   ============================================================================ */


.app-container {


    display: flex;


    width: 100%;


    height: 100vh;


    height: 100dvh;


    min-height: 100vh;


    min-height: 100dvh;


    overflow: hidden;


    background: transparent;


    position: relative;


}





/* === Sidebar === */


.sidebar {


    width: 320px;


    background: var(--bg-card);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


    border-right: 1px solid var(--border);


    display: flex;


    flex-direction: column;


    flex-shrink: 0;
    z-index: 100;


    z-index: 50;


    position: relative;


    overflow-y: auto;


    overflow-x: hidden;


}





.sidebar-header {


    padding: 1rem 1.125rem 0.875rem;


    border-bottom: 1px solid var(--border);


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 0.5rem;


    background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, transparent 100%);


}





.user-profile {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    flex: 1;


    min-width: 0;


    cursor: pointer;


    padding: 0.4rem;


    border-radius: var(--radius);


    transition: background var(--transition);


}





.user-profile:hover {


    background: var(--bg-hover);


}





.user-avatar {


    width: 42px;


    height: 42px;


    border-radius: var(--radius-full);


    background: var(--gradient-primary);


    display: flex;


    align-items: center;


    justify-content: center;


    color: white;


    font-weight: 700;


    font-size: 1.125rem;


    flex-shrink: 0;


    position: relative;


    box-shadow: var(--shadow-glow);


    overflow: hidden;


}





.user-avatar img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.user-avatar::after {


    content: '';


    position: absolute;


    bottom: 0;


    right: 0;


    width: 12px;


    height: 12px;


    background: var(--success);


    border: 2px solid var(--bg-card);


    border-radius: var(--radius-full);


    box-shadow: 0 0 8px var(--success);


}





.user-info {


    flex: 1;


    min-width: 0;


}





.user-name {


    font-weight: 700;


    font-size: 0.9375rem;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    color: var(--text-primary);


}





.user-status {


    font-size: 0.75rem;


    color: var(--text-secondary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





.icon-btn {


    background: var(--bg-input);


    border: 1px solid var(--border);


    color: var(--text-primary);


    width: 38px;


    height: 38px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 1.125rem;


    transition: all var(--duration-fast) var(--ease-out);


    flex-shrink: 0;


}


/* v111.8.9: Sound-Toggle-Button (off state) */


.icon-btn.sound-toggle.sound-off {


    opacity: 0.55;


    background: rgba(244, 63, 94, 0.12);


    border-color: rgba(244, 63, 94, 0.3);


}





.icon-btn:hover {


    background: var(--bg-hover);


    border-color: var(--primary);


    transform: translateY(-1px);


    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);


}





.icon-btn:active {


    transform: translateY(0);


}





/* === B.22: Space-Switcher (Multi-Messenger) - WEG in v111 === */


.active-space-btn {


    width: 100%;


    display: flex;


    align-items: center;


    gap: 0.6rem;


    padding: 0.55rem 0.875rem;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: 12px;


    color: var(--text-primary);


    font-size: 0.92rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);


    font-family: inherit;


    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);


}


.active-space-btn:hover {


    border-color: var(--primary);


    background: var(--bg-elevated);


    transform: translateY(-1px);


}


.active-space-icon {


    font-size: 1.25rem;


    line-height: 1;


}


.active-space-name {


    flex: 1;


    text-align: left;


}


.active-space-caret {


    color: var(--text-secondary);


    font-size: 0.8rem;


}


.space-menu-popover {


    position: fixed;


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: 14px;


    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);


    z-index: 250;


    padding: 6px;


    min-width: 240px;


    max-height: 70vh;


    overflow-y: auto;


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


}


.space-menu-item {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    width: 100%;


    padding: 0.65rem 0.875rem;


    background: transparent;


    color: var(--text-primary);


    border: none;


    border-radius: 8px;


    cursor: pointer;


    font-size: 0.9375rem;


    text-align: left;


    font-family: inherit;


    transition: background 0.15s;


}


.space-menu-item:hover {


    background: var(--bg-hover);


}


.space-menu-item.active {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


}


.space-menu-item .smi-icon {


    font-size: 1.25rem;


    line-height: 1;


}


.space-menu-item .smi-name {


    flex: 1;


    font-weight: 600;


}


.space-menu-item .smi-check {


    font-size: 0.875rem;


    opacity: 0.8;


}


.space-menu-divider {


    height: 1px;


    background: var(--border);


    margin: 4px 8px;


}


.space-menu-help {


    padding: 0.5rem 0.875rem;


    font-size: 0.75rem;


    color: var(--text-muted, rgba(255,255,255,0.45));


    line-height: 1.4;


}





/* === B.23: Conference-Call Tiles (Multi-Peer) === */


.conference-tiles {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));


    gap: 8px;


    width: 100%;


    max-width: 100%;


    padding: 0.5rem;


}


.conf-tile {


    position: relative;


    background: #1a1a1a;


    border-radius: 12px;


    overflow: hidden;


    aspect-ratio: 4/3;


    display: flex;


    align-items: center;


    justify-content: center;


}


.conf-tile video {


    width: 100%;


    height: 100%;


    object-fit: cover;


    background: #000;


}


.conf-tile-waiting {


    color: var(--text-muted, rgba(255,255,255,0.5));


    font-size: 0.875rem;


    text-align: center;


    padding: 1rem;


}


.conf-tile-label {


    position: absolute;


    bottom: 6px;


    left: 6px;


    background: rgba(0, 0, 0, 0.55);


    color: #fff;


    padding: 2px 8px;


    border-radius: 6px;


    font-size: 0.75rem;


    font-weight: 600;


    max-width: calc(100% - 12px);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.conf-tile-local {


    border: 2px solid var(--primary, #7c3aed);


}





/* === B.20: Bubble-Buttons (Sidebar-Tabs + Composer im Message-Style) === */


.bubble-btn {


    background: var(--bg-card);


    border: 1px solid transparent;


    color: var(--text-primary);


    width: 42px;


    height: 42px;


    border-radius: 16px;


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 1.15rem;


    transition: all 0.18s ease;


    flex-shrink: 0;


    backdrop-filter: blur(10px);


    -webkit-backdrop-filter: blur(10px);


    box-shadow: var(--shadow-sm);


    position: relative;


    overflow: hidden;


}


.bubble-btn::before {


    content: "";


    position: absolute;


    inset: 0;


    background: var(--gradient-primary);


    opacity: 0;


    transition: opacity 0.18s ease;


    border-radius: inherit;


    z-index: -1;


}


.bubble-btn:hover {


    border-color: rgba(124, 58, 237, 0.4);


    transform: translateY(-2px) scale(1.05);


    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);


}


.bubble-btn:active {


    transform: translateY(0) scale(0.97);


}


.bubble-btn.primary {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border: none;


    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);


}


.bubble-btn.primary:hover {


    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5);


    transform: translateY(-2px) scale(1.05);


}


.bubble-btn.danger {


    background: linear-gradient(135deg, #ef4444, #ec4899);


    color: #fff;


    border: none;


    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);


}


.bubble-btn.accent {


    background: linear-gradient(135deg, #06b6d4, #10b981);


    color: #fff;


    border: none;


}


/* Sidebar-Tabs als Bubble-Grid */


.sidebar-actions.bubble-grid {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: 8px;


    padding: 0.5rem 0.75rem;


}


.sidebar-actions.bubble-grid .sidebar-action-btn {


    aspect-ratio: 1;


    width: 100%;


    min-width: 0;


    padding: 0;


    font-size: 1.5rem;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    flex-direction: column;


    gap: 2px;


    line-height: 1;


}


.sidebar-actions.bubble-grid .sidebar-action-btn .sidebar-action-label {


    font-size: 0.6rem;


    font-weight: 600;


    opacity: 0.8;


}





/* Voice button: prominent with a red recording dot */


.voice-btn {


    position: relative;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.18));


    border-color: rgba(236, 72, 153, 0.5);


    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);


    animation: voice-btn-attention 2.4s ease-in-out infinite;


}


.voice-btn::after {


    content: '';


    position: absolute;


    top: 4px;


    right: 4px;


    width: 8px;


    height: 8px;


    background: #ef4444;


    border-radius: 50%;


    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);


    animation: voice-dot-blink 1.4s ease-in-out infinite;


    pointer-events: none;


}


.voice-btn:hover {


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(236, 72, 153, 0.32));


    border-color: rgba(236, 72, 153, 0.9);


}





/* Voice memo button: blue/cyan to differentiate from the voice-to-text button */


.voice-memo-btn {


    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(59, 130, 246, 0.18));


    border-color: rgba(34, 197, 94, 0.5);


}


.voice-memo-btn:hover {


    background: linear-gradient(135deg, rgba(34, 197, 94, 0.32), rgba(59, 130, 246, 0.32));


    border-color: rgba(34, 197, 94, 0.9);


}


.voice-memo-btn:active {


    background: rgba(239, 68, 68, 0.5);


    transform: scale(0.95);


}


@keyframes voice-dot-blink {


    0%, 100% { opacity: 1;   transform: scale(1); }


    50%      { opacity: 0.3; transform: scale(0.7); }


}


@keyframes voice-btn-attention {


    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45); }


    50%      { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); }


}





/* Rich custom tooltip on long-hover for any element with [data-tooltip] */


[data-tooltip] {


    position: relative;


}


[data-tooltip]:hover::before {


    content: attr(data-tooltip);


    position: absolute;


    bottom: calc(100% + 8px);


    left: 50%;


    transform: translateX(-50%);


    background: rgba(15, 17, 35, 0.95);


    color: #fff;


    padding: 0.45rem 0.7rem;


    border-radius: 8px;


    font-size: 0.78rem;


    white-space: nowrap;


    z-index: 1000;


    pointer-events: none;


    box-shadow: 0 6px 18px rgba(0,0,0,0.4);


    border: 1px solid rgba(124, 58, 237, 0.4);


    animation: tooltip-in 0.2s ease;


}


[data-tooltip]:hover::after {


    content: '';


    position: absolute;


    bottom: 100%;


    left: 50%;


    transform: translateX(-50%);


    border: 5px solid transparent;


    border-top-color: rgba(15, 17, 35, 0.95);


    z-index: 1000;


    pointer-events: none;


}


@keyframes tooltip-in {


    from { opacity: 0; transform: translateX(-50%) translateY(4px); }


    to   { opacity: 1; transform: translateX(-50%) translateY(0); }


}





/* === Search === */


.search-container {


    padding: 0.75rem 1.125rem;


    position: sticky;


    top: 0;


    z-index: 5;


    background: var(--bg-card);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


}





/* Plus-Button Popover — relative zur search-container, kein position: fixed */


.add-friend-popover {


    position: absolute;


    top: calc(100% + 4px);


    left: 1.125rem;


    min-width: 200px;


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: 12px;


    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);


    z-index: 100;


    padding: 6px;


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.add-friend-popover.hidden { display: none; }


.add-friend-popover .afp-btn {


    background: transparent;


    border: none;


    color: var(--text);


    text-align: left;


    padding: 8px 12px;


    border-radius: 8px;


    cursor: pointer;


    font-size: 0.92rem;


    font-family: inherit;


    transition: background 0.12s;


}


.add-friend-popover .afp-btn:hover { background: var(--bg-input); }





#user-search {


    width: 100%;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius-full);


    padding: 0.6rem 0.875rem 0.6rem 2.3rem;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-family: inherit;


    transition: all var(--transition);


    outline: none;


}





#user-search:focus {


    border-color: var(--primary);


    background: rgba(124, 58, 237, 0.05);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);


}





/* === Filter-Chips für Freundesliste (Alle/Online/Ungelesen) === */


.friend-filter-chips {


    display: flex;


    gap: 6px;


    padding: 0 0.75rem 0.5rem;


    overflow-x: auto;


    -webkit-overflow-scrolling: touch;


    scrollbar-width: none;


    position: sticky;


    top: 56px; /* ungefähre Höhe der .search-container */


    z-index: 4;


    background: var(--bg-card);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


}


.friend-filter-chips::-webkit-scrollbar { display: none; }


.ff-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, rgba(233, 237, 239, 0.65));
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.ff-chip svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.ff-chip.active svg {
    opacity: 1;
}


.ff-chip:hover {


    background: rgba(255, 255, 255, 0.08);


    color: var(--text-primary);


}


.ff-chip.active {


    background: rgba(0, 168, 132, 0.18);


    color: var(--wa-green, #00a884);


    border-color: rgba(0, 168, 132, 0.4);


}


.friends-list .friend-item.hidden-by-filter {


    display: none;


}





/* Sort-Button + Dropdown */


.ff-sort-btn {


    flex-shrink: 0;


    margin-left: auto;


    background: rgba(255, 255, 255, 0.05);


    border: 1px solid rgba(255, 255, 255, 0.1);


    color: var(--text-secondary, rgba(233, 237, 239, 0.65));


    width: 28px;


    height: 26px;


    border-radius: 14px;


    font-size: 0.875rem;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    -webkit-tap-highlight-color: transparent;


    padding: 0;


    transition: all 0.15s;


    font-family: inherit;


}


.ff-sort-btn:hover {


    background: rgba(0, 168, 132, 0.18);


    color: var(--wa-green, #00a884);


}





/* Search-Highlighting (Phase L) */


mark.search-highlight {


    background: linear-gradient(135deg, #fbbf24, #f59e0b);


    color: #0b141a;


    padding: 1px 3px;


    border-radius: 4px;


    font-weight: 700;


    box-shadow: 0 1px 2px rgba(251, 191, 36, 0.4);


    animation: hl-pulse 0.3s ease-out;


}


@keyframes hl-pulse {


    0%   { background: #fde68a; transform: scale(1.05); }


    100% { background: linear-gradient(135deg, #fbbf24, #f59e0b); transform: scale(1); }


}





/* Visuelles Highlight nach Klick auf "Freunde"-KPI */


@keyframes friends-list-flash {


    0%   { background: transparent; box-shadow: inset 0 0 0 0 rgba(0, 168, 132, 0); }


    20%  { background: rgba(0, 168, 132, 0.16); box-shadow: inset 0 0 0 2px rgba(0, 168, 132, 0.4); }


    100% { background: transparent; box-shadow: inset 0 0 0 0 rgba(0, 168, 132, 0); }


}


.friends-list-flash { animation: friends-list-flash 1.4s ease-out; border-radius: 8px; }


.ff-sort-btn.active {


    background: rgba(0, 168, 132, 0.18);


    color: var(--wa-green, #00a884);


    border-color: rgba(0, 168, 132, 0.4);


}


.ff-sort-menu {


    position: absolute;


    background: var(--wa-panel, #202c33);


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 8px;


    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);


    z-index: 50;


    min-width: 180px;


    padding: 4px 0;


}


.ff-sort-menu button {


    display: flex;


    align-items: center;


    gap: 8px;


    width: 100%;


    background: none;


    border: none;


    color: var(--text-primary, #e9edef);


    padding: 8px 14px;


    text-align: left;


    cursor: pointer;


    font-size: 0.88rem;


    font-family: inherit;


}


.ff-sort-menu button:hover {


    background: rgba(255, 255, 255, 0.06);


}


.ff-sort-menu button.active {


    color: var(--wa-green, #00a884);


}


.ff-sort-menu button.active::before{


  content: '';


  display: inline-block;


  width: 1em;


  height: 1em;


  vertical-align: middle;


  background-color: currentColor;


  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  margin-right: 0.4em;


 }





.online-indicator {


    position: absolute;


    right: 1.25rem;


    top: 50%;


    transform: translateY(-50%);


    background: rgba(34, 197, 94, 0.18);


    color: var(--wa-text, #e9edef);


    font-size: 0.78rem;


    font-weight: 600;


    padding: 2px 7px;


    border-radius: 10px;


    border: 1px solid rgba(34, 197, 94, 0.4);


    pointer-events: none;


    white-space: nowrap;


}


.online-indicator b {


    color: #4ade80;


    margin-left: 2px;


}


.online-indicator.hidden {


    display: none;


}





#user-search::placeholder {


    color: var(--text-muted);


}





.search-icon {


    position: absolute;


    left: 1.85rem;


    top: 50%;


    transform: translateY(-50%);


    color: var(--text-muted);


    font-size: 0.875rem;


    pointer-events: none;


}





.search-results {


    position: absolute;


    top: 100%;


    left: 1.125rem;


    right: 1.125rem;


    background: var(--bg-elevated);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    margin-top: 4px;


    max-height: 320px;


    overflow-y: auto;


    z-index: 100;


    box-shadow: var(--shadow-md);


}





.search-results.hidden { display: none; }





.search-result-item {


    padding: 0.7rem 0.875rem;


    display: flex;


    align-items: center;


    gap: 0.7rem;


    cursor: pointer;


    transition: background var(--transition);


    border-bottom: 1px solid var(--border);


}





.search-result-item:last-child { border-bottom: none; }


.search-result-item:hover { background: var(--bg-hover); }





.search-result-menu-btn {


    background: transparent;


    border: none;


    color: var(--text-secondary);


    font-size: 1.25rem;


    line-height: 1;


    width: 28px;


    height: 28px;


    border-radius: 50%;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    flex-shrink: 0;


    transition: background 0.15s ease, color 0.15s ease;


    padding: 0;


    margin-left: 0.4rem;


}





.search-result-menu-btn:hover {


    background: var(--bg-secondary, rgba(255, 255, 255, 0.1));


    color: var(--text-primary);


}





/* === Friends / Groups list === */


.friends-list {


    flex: 1;


    /* v141cv113-chat-header: war visible, dehnte #app auf 1150px statt 1080px,


       wodurch .chat-header bei y=-70 (ausserhalb Viewport) lag und unsichtbar war. */


    overflow-y: auto;


    padding: 0.4rem 0.5rem 1rem;


}





.friend-item {


    display: flex;


    align-items: center;


    gap: 0.875rem;


    padding: 0.875rem 0.9375rem;


    border-radius: var(--radius);


    cursor: pointer;


    transition: var(--duration-fast) var(--ease-out);


    position: relative;


    margin-bottom: 4px;


}





.friend-item:hover {


    background: var(--bg-hover);


    transform: translateX(2px);


}





.friend-item.active {


    background: var(--gradient-primary-soft);


    box-shadow: inset 3px 0 0 var(--primary);


}





.friend-item .user-avatar::after {


    border-color: var(--bg-card);


}





/* Friend list avatar (direct <img>, NOT wrapped in .user-avatar) */


.friend-item > img {


    width: 44px;


    height: 44px;


    min-width: 44px;


    min-height: 44px;


    max-width: 44px;


    max-height: 44px;


    border-radius: var(--radius-full);


    object-fit: cover;


    background: var(--gradient-primary);


    flex-shrink: 0;


    display: block;


}





/* New wrapper for friend avatar (proper overflow handling) */


.friend-avatar-wrap {


    width: 44px;


    height: 44px;


    min-width: 44px;


    min-height: 44px;


    max-width: 44px;


    max-height: 44px;


    border-radius: var(--radius-full);


    overflow: hidden;


    background: var(--gradient-primary);


    flex-shrink: 0;


    display: flex;


    align-items: center;


    justify-content: center;


}





.friend-avatar-wrap img {


    width: 100% !important;


    height: 100% !important;


    min-width: 100% !important;


    min-height: 100% !important;


    max-width: 100% !important;


    max-height: 100% !important;


    object-fit: cover !important;


    border-radius: 0 !important;


    display: block !important;


}





/* Friend list 3-dot menu button (positioned inside .friend-item) */


.friend-menu-btn {


    background: transparent;


    border: 1px solid transparent;


    color: var(--text-secondary);


    width: 28px;


    height: 28px;


    min-width: 28px;


    min-height: 28px;


    border-radius: var(--radius-sm);


    font-size: 1.125rem;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    transition: all var(--transition);


    flex-shrink: 0;


    padding: 0;


    line-height: 1;


}





.friend-item:hover .friend-menu-btn,


.friend-menu-btn:focus {


    opacity: 1;


}





.friend-menu-btn:hover {


    background: var(--primary);


    color: white;


    border-color: var(--primary);


}





/* Friend context menu (3-dot dropdown) */


.friend-context-menu {


    position: fixed;


    background: var(--bg-elevated);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


    border: 1px solid var(--border-strong);


    border-radius: var(--radius);


    box-shadow: var(--shadow-lg);


    min-width: 220px;


    max-width: calc(100vw - 16px);


    max-height: 70vh;


    overflow-y: auto;


    z-index: 1000;


    padding: 0.4rem;


    animation: fade-in-up 0.2s var(--ease-bounce);


    font-family: inherit;


    color: var(--text-primary);


    -webkit-overflow-scrolling: touch;


}





.friend-context-header {


    padding: 0.6rem 0.875rem;


    font-size: 0.875rem;


    font-weight: 700;


    color: var(--text-secondary);


    border-bottom: 1px solid var(--border);


    margin-bottom: 0.3rem;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    max-width: 100%;


}





.friend-context-item {


    display: block;


    width: 100%;


    text-align: left;


    background: transparent;


    border: none;


    color: var(--text-primary);


    padding: 0.65rem 0.875rem;


    font-size: 0.875rem;


    cursor: pointer;


    border-radius: var(--radius-sm);


    transition: background var(--transition);


    font-family: inherit;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





.friend-context-item:hover {


    background: var(--bg-hover);


}





.friend-context-item.danger {


    color: #fca5a5;


}





.friend-context-item.danger:hover {


    background: rgba(239, 68, 68, 0.18);


}





.friend-info {


    flex: 1;


    min-width: 0;


}





.friend-name {


    font-weight: 600;


    font-size: 0.92rem;


    color: var(--text-primary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    display: flex;


    align-items: center;


    gap: 0.4rem;


}





.friend-preview {


    font-size: 0.78rem;


    color: var(--text-secondary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    margin-top: 1px;


    display: flex;


    align-items: center;


    gap: 4px;


}


.friend-preview.has-unread {


    color: var(--text-primary, #e9edef);


    font-weight: 600;


}


.lm-prefix {


    color: var(--text-muted, rgba(255,255,255,0.45));


    font-weight: 500;


}


.friend-time-inline {


    margin-left: auto;


    padding-left: 8px;


    font-size: 0.68rem;


    color: var(--text-muted, rgba(255,255,255,0.4));


    flex-shrink: 0;


}


.friend-preview.has-unread .friend-time-inline {


    color: var(--wa-green, #00a884);


}





.friend-time {


    font-size: 0.7rem;


    color: var(--text-muted);


    align-self: flex-start;


    margin-top: 2px;


    white-space: nowrap;


}





.unread-badge {


    background: var(--gradient-warm);


    color: white;


    font-size: 0.7rem;


    font-weight: 700;


    min-width: 20px;


    height: 20px;


    border-radius: var(--radius-full);


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 0 6px;


    box-shadow: var(--shadow-glow-pink);


    animation: pulse-badge 2s ease-in-out infinite;


}





/* === Quick-Action-Buttons im Friend-Row (Anruf / Video) === */


.friend-quick-actions {


    display: flex;


    gap: 4px;


    flex-shrink: 0;


    margin-left: auto;


    align-items: center;


}


.fqa-btn {


    width: 32px;


    height: 32px;


    border-radius: 50%;


    border: none;


    background: rgba(255, 255, 255, 0.05);


    color: var(--text-secondary, rgba(233, 237, 239, 0.7));


    font-size: 0.9375rem;


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    transition: background 0.15s, color 0.15s, transform 0.1s;


    -webkit-tap-highlight-color: transparent;


    padding: 0;


    line-height: 1;


}


.fqa-btn:hover {


    background: rgba(0, 168, 132, 0.18);


    color: var(--wa-green, #00a884);


}


.fqa-btn:active {


    transform: scale(0.92);


}


.fqa-videocall {


    font-size: 0.875rem;


}


/* Desktop: nur on hover zeigen (sonst zu eng) */


@media (hover: hover) and (pointer: fine) {


    .friend-quick-actions {


        opacity: 0;


        transition: opacity 0.15s;


    }


    .friend-item:hover .friend-quick-actions {


        opacity: 1;


    }


}





@keyframes pulse-badge {


    0%, 100% { transform: scale(1); }


    50% { transform: scale(1.08); }


}





.online-dot {


    width: 8px;


    height: 8px;


    background: var(--success);


    border-radius: var(--radius-full);


    display: inline-block;


    box-shadow: 0 0 6px var(--success);


    flex-shrink: 0;


}





.offline-dot {


    width: 8px;


    height: 8px;


    background: var(--text-muted);


    border-radius: var(--radius-full);


    display: inline-block;


    flex-shrink: 0;


}





/* === Chat area === */


.chat-area {


    flex: 1;


    display: flex;


    flex-direction: column;


    background: transparent;


    min-width: 0;


    position: relative;


}





.chat-header {


    padding: calc(0.875rem + env(safe-area-inset-top, 0px)) 1.25rem 0.875rem;


    background: var(--bg-card);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


    border-bottom: 1px solid var(--border);


    display: flex;


    align-items: center;


    gap: 0.875rem;


    z-index: 10;


    flex-shrink: 0;


}





.chat-header-info {


    flex: 1;


    min-width: 0;


}





.chat-header-name {


    font-weight: 700;


    font-size: 1.0625rem;


    color: var(--text-primary);


    display: flex;


    align-items: center;


    gap: 0.5rem;


}





.chat-header-status {


    font-size: 0.78rem;


    color: var(--text-secondary);


    display: flex;


    align-items: center;


    gap: 0.4rem;


}





.chat-header-actions {


    display: flex;


    gap: 0.4rem;


}





/* === Messages === */


.messages {


    flex: 1 1 0;


    min-height: 0;


    overflow-y: auto;


    overflow-x: hidden;


    -webkit-overflow-scrolling: touch;


    overscroll-behavior: contain;


    touch-action: pan-y;


    padding: 1.5rem 1.25rem 1rem;


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


    scroll-behavior: smooth;


    position: relative;


}





/* === Audio message player === */


.message-audio {


    display: flex;


    align-items: center;


    gap: 0.6rem;


    padding: 0.55rem 0.75rem;


    background: rgba(255, 255, 255, 0.06);


    border: 1px solid var(--border);


    border-radius: 14px;


    min-width: 220px;


    max-width: 320px;


    margin-top: 4px;


}


.message.sent .message-audio {


    background: rgba(255, 255, 255, 0.12);


    border-color: rgba(255, 255, 255, 0.2);


}


.audio-play-btn {


    flex-shrink: 0;


    width: 38px;


    height: 38px;


    border-radius: 50%;


    border: none;


    background: var(--gradient-primary);


    color: white;


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 1rem;


    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);


    transition: transform 0.15s ease, box-shadow 0.15s ease;


    padding: 0;


}


.audio-play-btn:hover { transform: scale(1.08); }


.audio-play-btn:active { transform: scale(0.95); }


.message-audio.playing .audio-play-btn {


    background: linear-gradient(135deg, #ef4444, #f97316);


    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);


}


.audio-info {


    flex: 1;


    min-width: 0;


    display: flex;


    flex-direction: column;


    gap: 4px;


}


.audio-waveform {


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.audio-progress {


    height: 6px;


    background: rgba(255, 255, 255, 0.18);


    border-radius: 4px;


    cursor: pointer;


    overflow: hidden;


    position: relative;


}


.message.received .audio-progress { background: rgba(124, 58, 237, 0.2); }


.audio-progress-fill {


    position: absolute;


    inset: 0 auto 0 0;


    width: 0%;


    background: var(--gradient-primary);


    border-radius: 4px;


    transition: width 0.08s linear;


}


.audio-time {


    font-size: 0.7rem;


    color: rgba(255, 255, 255, 0.7);


    font-variant-numeric: tabular-nums;


}


.message.received .audio-time { color: var(--text-muted); }





/* ====================================================================


   PHASE Y: Voice-Message Waveform (Bars statt flacher Progress-Bar)


   ==================================================================== */


.audio-waveform.has-peaks {


    flex-direction: column;


    gap: 4px;


}


.wf-bars {


    display: flex;


    align-items: center;


    justify-content: space-between;


    height: 28px;


    gap: 1px;


    cursor: pointer;


    user-select: none;


    padding: 2px 0;


}


.wf-bar {


    flex: 1 1 0;


    min-width: 2px;


    max-width: 3px;


    background: rgba(255, 255, 255, 0.42);


    border-radius: 1.5px;


    transition: background 0.12s ease, transform 0.12s ease;


    align-self: center;


}


.message.sent .wf-bar { background: rgba(255, 255, 255, 0.5); }


.message.received .wf-bar { background: rgba(124, 58, 237, 0.55); }


.wf-bar.wf-played {


    background: var(--wa-green, #00a884) !important;


}


.wf-bar.wf-current {


    background: var(--wa-green, #00a884) !important;


    transform: scaleY(1.1);


}


.wf-bars:hover .wf-bar { opacity: 0.7; }


.wf-bars:hover .wf-bar:hover { opacity: 1; transform: scaleY(1.15); }


/* Light Mode: heller Hintergrund, gespielte Bars bleiben grün */


body.theme-light .wf-bar { background: rgba(0, 0, 0, 0.32); }


body.theme-light .wf-bar.wf-played,


body.theme-light .wf-bar.wf-current { background: #008f72 !important; }


.audio-meta {


    font-size: 0.7rem;


    color: rgba(255, 255, 255, 0.65);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.message.received .audio-meta { color: var(--text-muted); }


.audio-download-btn {


    flex-shrink: 0;


    width: 32px;


    height: 32px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(255, 255, 255, 0.1);


    border: 1px solid var(--border);


    border-radius: 8px;


    text-decoration: none;


    color: inherit;


    font-size: 0.9375rem;


    transition: all 0.15s ease;


}


.audio-download-btn:hover {


    background: rgba(124, 58, 237, 0.25);


    border-color: var(--primary);


    transform: translateY(-1px);


}





.message {


    max-width: 70%;


    display: flex;


    flex-direction: column;


    gap: 2px;


    animation: message-in 0.3s var(--ease-bounce);


}





@keyframes message-in {


    from { opacity: 0; transform: translateY(8px) scale(0.96); }


    to { opacity: 1; transform: translateY(0) scale(1); }


}





.message.sent {


    align-self: flex-end;


    align-items: flex-end;


}





.message.received {


    align-self: flex-start;


    align-items: flex-start;


}





.message.pending {


    opacity: 0.6;


}





.message-bubble {


    padding: 0.65rem 0.875rem;


    border-radius: var(--radius-lg);


    word-wrap: break-word;


    overflow-wrap: break-word;


    position: relative;


    backdrop-filter: blur(10px);


    -webkit-backdrop-filter: blur(10px);


    line-height: 1.45;


    box-shadow: var(--shadow-sm);


}





.message.sent .message-bubble {


    background: var(--gradient-primary);


    color: #ffffff !important;


    border-bottom-right-radius: 6px;


    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);


}





.message.received .message-bubble {


    background: var(--bg-card);


    border: 1px solid var(--border);


    color: #ffffff !important;


    border-bottom-left-radius: 6px;


}





.message-sender {


    font-size: 0.75rem;


    color: var(--text-secondary);


    padding: 0 0.3rem 0.1rem;


    font-weight: 600;


}





.message-meta {


    display: flex;


    align-items: center;


    gap: 4px;


    font-size: 0.68rem;


    color: var(--text-muted);


    padding: 2px 4px 0;


}





.message.sent .message-meta {


    color: rgba(255, 255, 255, 0.75);


}





/* === Phase S: Message Reactions === */


.msg-reactions {


    display: none;


    flex-wrap: wrap;


    gap: 4px;


    margin-top: 4px;


    padding: 0 2px;


}


.msg-reactions.has-reactions {


    display: flex;


}


.msg-reaction-chip {


    display: inline-flex;


    align-items: center;


    gap: 4px;


    padding: 2px 8px;


    background: rgba(255, 255, 255, 0.08);


    border: 1px solid rgba(255, 255, 255, 0.12);


    border-radius: 12px;


    font-size: 0.78rem;


    color: inherit;


    cursor: pointer;


    transition: background 0.15s, transform 0.12s, border-color 0.15s;


    line-height: 1.2;


    user-select: none;


}


.msg-reaction-chip:hover {


    background: rgba(255, 255, 255, 0.16);


    transform: translateY(-1px);


}


.msg-reaction-chip:active {


    transform: scale(0.95);


}


.msg-reaction-chip.mine {


    background: rgba(0, 168, 132, 0.22);


    border-color: rgba(0, 168, 132, 0.55);


    color: #fff;


}


.msg-reaction-chip.mine:hover {


    background: rgba(0, 168, 132, 0.35);


}


.mrc-emoji { font-size: 0.9375rem; line-height: 1; }


.mrc-count { font-weight: 600; font-size: 0.72rem; opacity: 0.85; }





/* Picker */


.reaction-picker {


    position: fixed;


    z-index: 9999;


    display: flex;


    gap: 2px;


    padding: 6px 8px;


    background: rgba(20, 28, 36, 0.96);


    border: 1px solid rgba(255, 255, 255, 0.12);


    border-radius: var(--radius-full);


    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);


    backdrop-filter: blur(8px);


    -webkit-backdrop-filter: blur(8px);


    transform: translateY(8px) scale(0.85);


    opacity: 0;


    transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), opacity 0.14s ease-out;


}


.reaction-picker.in {


    transform: translateY(0) scale(1);


    opacity: 1;


}


/* kleiner Dreieck-Pfeil nach unten */


.reaction-picker::after {


    content: '';


    position: absolute;


    bottom: -6px;


    left: 50%;


    transform: translateX(-50%) rotate(45deg);


    width: 12px;


    height: 12px;


    background: rgba(20, 28, 36, 0.96);


    border-right: 1px solid rgba(255, 255, 255, 0.12);


    border-bottom: 1px solid rgba(255, 255, 255, 0.12);


}


.reaction-picker-emoji {


    appearance: none;


    background: transparent;


    border: 0;


    font-size: 1.5rem;


    line-height: 1;


    padding: 4px 6px;


    border-radius: 8px;


    cursor: pointer;


    transition: background 0.12s, transform 0.12s;


}


.reaction-picker-emoji:hover {


    background: rgba(255, 255, 255, 0.12);


    transform: scale(1.25) translateY(-2px);


}


.reaction-picker-emoji:active {


    transform: scale(0.9);


}


@media (max-width: 600px) {


    .reaction-picker-emoji { font-size: 1.65rem; padding: 6px 8px; }


}





/* === Phase T: Link Previews === */


/* v141w: Klickbare Links in Text-Nachrichten */


.message-content a.msg-link,


.message-content a {


    color: #60a5fa;


    text-decoration: underline;


    text-decoration-color: rgba(96, 165, 250, 0.4);


    text-underline-offset: 2px;


    word-break: break-all;


    transition: color 0.15s, text-decoration-color 0.15s;


}


.message-content a.msg-link:hover,


.message-content a:hover {


    color: #93c5fd;


    text-decoration-color: #93c5fd;


}


body.theme-light .message-content a.msg-link,


body.theme-light .message-content a {


    color: #2563eb;


    text-decoration-color: rgba(37, 99, 235, 0.4);


}


body.theme-light .message-content a.msg-link:hover,


body.theme-light .message-content a:hover {


    color: #1d4ed8;


    text-decoration-color: #1d4ed8;


}





.msg-link-preview {


    display: none;


    margin-top: 6px;


    max-width: 100%;


}


.msg-link-preview.has-preview {


    display: block;


}


.lp-card {


    display: flex;


    flex-direction: column;


    background: rgba(255, 255, 255, 0.06);


    border: 1px solid rgba(255, 255, 255, 0.14);


    border-radius: 10px;


    overflow: hidden;


    text-decoration: none;


    color: inherit;


    max-width: 360px;


    transition: background 0.15s, border-color 0.15s, transform 0.12s;


}


.lp-card:hover {


    background: rgba(255, 255, 255, 0.1);


    border-color: rgba(255, 255, 255, 0.22);


    transform: translateY(-1px);


}


.lp-card:active { transform: scale(0.99); }


.message.sent .lp-card {


    background: rgba(255, 255, 255, 0.14);


    border-color: rgba(255, 255, 255, 0.24);


}


.message.sent .lp-card:hover {


    background: rgba(255, 255, 255, 0.2);


}


.lp-image {


    width: 100%;


    aspect-ratio: 16 / 9;


    background: rgba(0, 0, 0, 0.2);


    overflow: hidden;


}


.lp-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    display: block;


}


.lp-image-broken {


    aspect-ratio: auto;


    min-height: 0;


    background: transparent;


}


.lp-body {


    padding: 8px 10px 9px;


    display: flex;


    flex-direction: column;


    gap: 2px;


    min-width: 0;


}


.lp-site {


    display: flex;


    align-items: center;


    gap: 6px;


    font-size: 0.72rem;


    opacity: 0.7;


    line-height: 1.2;


    margin-bottom: 1px;


}


.lp-favicon {


    width: 14px;


    height: 14px;


    border-radius: 4px;


    flex-shrink: 0;


}


.lp-site-name {


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    max-width: 240px;


}


.lp-title {


    font-size: 0.92rem;


    font-weight: 600;


    line-height: 1.25;


    overflow: hidden;


    text-overflow: ellipsis;


    display: -webkit-box;


    -webkit-line-clamp: 2;


    -webkit-box-orient: vertical;


}


.lp-desc {


    font-size: 0.78rem;


    opacity: 0.78;


    line-height: 1.35;


    overflow: hidden;


    text-overflow: ellipsis;


    display: -webkit-box;


    -webkit-line-clamp: 2;


    -webkit-box-orient: vertical;


    margin-top: 1px;


}


/* Skeleton waehrend des Ladens */


.lp-skeleton {


    display: flex;


    flex-direction: column;


    gap: 6px;


    padding: 10px 12px;


    background: rgba(255, 255, 255, 0.05);


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 10px;


    max-width: 320px;


}


.lp-skel-line {


    height: 10px;


    background: linear-gradient(90deg,


        rgba(255, 255, 255, 0.05) 0%,


        rgba(255, 255, 255, 0.15) 50%,


        rgba(255, 255, 255, 0.05) 100%);


    background-size: 200% 100%;


    border-radius: 4px;


    animation: lp-shimmer 1.4s ease-in-out infinite;


}


.lp-skel-line.w90 { width: 90%; }


.lp-skel-line.w70 { width: 70%; }


.lp-skel-line.w50 { width: 50%; }


@keyframes lp-shimmer {


    0% { background-position: 100% 0; }


    100% { background-position: -100% 0; }


}


@media (max-width: 600px) {


    .lp-card { max-width: 280px; }


    .lp-body { padding: 7px 9px 8px; }


}





/* === Phase U: Disappearing Messages === */


.icon-btn.disappearing-active {


    background: rgba(251, 191, 36, 0.18);


    color: #fbbf24;


    border-color: rgba(251, 191, 36, 0.4);


}


.disappearing-popover {


    position: fixed;


    z-index: 9999;


    width: 300px;


    background: var(--wa-bg-2, #0b141a);


    border: 1px solid var(--wa-divider, #313d45);


    border-radius: 12px;


    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);


    padding: 0;


    overflow: hidden;


    transform: translateY(-6px) scale(0.96);


    opacity: 0;


    transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), opacity 0.14s ease-out;


}


.disappearing-popover.in {


    transform: translateY(0) scale(1);


    opacity: 1;


}


.dp-header {


    padding: 12px 14px 6px;


    font-weight: 600;


    font-size: 0.9375rem;


    color: var(--wa-text, #e9edef);


}


.dp-sub {


    padding: 0 14px 10px;


    font-size: 0.78rem;


    color: var(--wa-text-secondary, #aebac1);


    line-height: 1.4;


}


.dp-options {


    display: flex;


    flex-direction: column;


}


.dp-option {


    appearance: none;


    background: transparent;


    border: 0;


    border-top: 1px solid var(--wa-divider, #313d45);


    padding: 10px 14px;


    color: var(--wa-text, #e9edef);


    cursor: pointer;


    display: grid;


    grid-template-columns: 18px auto 1fr;


    align-items: center;


    gap: 10px;


    text-align: left;


    transition: background 0.12s;


    font: inherit;


}


.dp-option:first-child { border-top: 0; }


.dp-option:hover { background: rgba(255, 255, 255, 0.05); }


.dp-option:active { background: rgba(255, 255, 255, 0.1); }


.dp-option.selected { background: rgba(0, 168, 132, 0.12); }


.dp-option.selected .dp-check { color: var(--wa-green, #00a884); }


.dp-check {


    font-weight: 700;


    font-size: 0.9375rem;


    color: transparent;


    text-align: center;


}


.dp-label {


    font-weight: 600;


    font-size: 0.875rem;


}


.dp-desc {


    font-size: 0.75rem;


    color: var(--wa-text-secondary, #aebac1);


    grid-column: 2 / 4;


    margin-top: -2px;


}





.msg-disappearing {


    display: inline-flex;


    align-items: center;


    gap: 4px;


    margin-top: 4px;


    padding: 2px 8px;


    background: rgba(251, 191, 36, 0.12);


    border: 1px solid rgba(251, 191, 36, 0.3);


    border-radius: 10px;


    font-size: 0.7rem;


    color: #fde68a;


    line-height: 1.2;


    font-weight: 500;


    animation: dp-fade-in 0.3s ease-out;


}


@keyframes dp-fade-in {


    from { opacity: 0; transform: translateY(2px); }


    to { opacity: 1; transform: translateY(0); }


}





/* ====================================================================


   PHASE X: Per-Chat Wallpaper (10 Presets + Custom Upload + Dim-Slider)


   ==================================================================== */





/* Aktives Wallpaper auf .messages: Preset als background-gradient, Custom-Bild als <img>


   → bessere Aspect-Ratio, kein Verzerren/Crop, Browser-native lazy */


#messages.wallpaper-active {


    position: relative;


    background: var(--bg-chat, var(--wa-bg, #0b141a));


}


#messages.wallpaper-active .chat-wallpaper-img {


    position: absolute;


    inset: 0;


    width: 100%;


    height: 100%;


    object-fit: cover;


    object-position: center;


    z-index: 0;


    pointer-events: none;


    user-select: none;


    -webkit-user-drag: none;


    background: var(--chat-wallpaper, none) center / cover no-repeat;


}


#messages.wallpaper-active::before {


    content: '';


    position: absolute;


    inset: 0;


    background: rgba(0, 0, 0, calc(1 - var(--chat-wallpaper-dim, 0.4)));


    pointer-events: none;


    z-index: 1;


    transition: background 0.25s ease;


}


#messages.wallpaper-active > *:not(.chat-wallpaper-img) {


    position: relative;


    z-index: 2;


}


/* Light-Theme: helleres Overlay, damit Bilder sichtbar bleiben */


body.theme-light #messages.wallpaper-active::before {


    background: rgba(255, 255, 255, calc(1 - var(--chat-wallpaper-dim, 0.4)));


}


body.theme-light #messages.wallpaper-active {


    background: #f0f2f5;


}





/* Wallpaper-Picker-Modal: Section-Label */


.wp-section-label {


    font-size: 0.78rem;


    font-weight: 600;


    color: var(--wa-text-secondary, #aebac1);


    text-transform: uppercase;


    letter-spacing: 0.04em;


    margin: 0 0 8px;


}





/* 10 Preset-Tiles (5 Spalten x 2 Reihen) */


.wp-presets {


    display: grid;


    grid-template-columns: repeat(5, 1fr);


    gap: 8px;


}


.wp-tile {


    appearance: none;


    background: transparent;


    border: 2px solid transparent;


    border-radius: 10px;


    padding: 0;


    cursor: pointer;


    display: flex;


    flex-direction: column;


    align-items: stretch;


    overflow: hidden;


    transition: border-color 0.15s ease, transform 0.15s ease;


    color: var(--wa-text, #e9edef);


}


.wp-tile:hover { transform: translateY(-1px); }


.wp-tile.selected {


    border-color: var(--wa-green, #00a884);


    box-shadow: 0 0 0 1px var(--wa-green, #00a884) inset;


}


.wp-tile-bg {


    width: 100%;


    aspect-ratio: 1;


    border-radius: 6px;


    background-size: cover;


    background-position: center;


}


.wp-tile > span {


    font-size: 0.7rem;


    text-align: center;


    padding: 4px 0 2px;


    color: var(--wa-text-secondary, #aebac1);


}


.wp-tile.selected > span { color: var(--wa-green, #00a884); font-weight: 600; }





/* Preset-Hintergruende (kleine Tiles) */


.wp-default { background: var(--wa-bg, #0b141a); }


.wp-aurora { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }


.wp-beach { background: linear-gradient(180deg, #87ceeb 0%, #f0e68c 100%); }


.wp-forest { background: linear-gradient(180deg, #134e5e 0%, #71b280 100%); }


.wp-sunset { background: linear-gradient(180deg, #ff512f 0%, #f09819 100%); }


.wp-mountains { background: linear-gradient(180deg, #2c3e50 0%, #4ca1af 50%, #c4e0e5 100%); }


.wp-ocean { background: linear-gradient(180deg, #1a2980 0%, #26d0ce 100%); }


.wp-stars { background: linear-gradient(180deg, #000428 0%, #004e92 100%); }


.wp-flowers { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); }


.wp-city { background: linear-gradient(180deg, #232526 0%, #414345 100%); }





/* Custom-Upload-Zeile */


.wp-upload-row {


    display: flex;


    align-items: center;


    gap: 12px;


    flex-wrap: wrap;


}


.wp-upload-btn {


    appearance: none;


    background: var(--wa-bg-2, #202c33);


    color: var(--wa-text, #e9edef);


    border: 1px solid var(--wa-border, #2a3942);


    border-radius: 8px;


    padding: 8px 14px;


    font-size: 0.88rem;


    cursor: pointer;


    transition: background 0.15s ease;


}


.wp-upload-btn:hover { background: var(--wa-bg-3, #2a3942); }


.wp-upload-hint {


    font-size: 0.78rem;


    color: var(--wa-text-secondary, #aebac1);


}





/* Dim-Slider */


.wp-dim-row {


    display: flex;


    align-items: center;


    gap: 12px;


    margin-bottom: 12px;


}


.wp-dim-row input[type=range] {


    flex: 1;


    accent-color: var(--wa-green, #00a884);


}


.wp-dim-value {


    min-width: 44px;


    text-align: right;


    font-variant-numeric: tabular-nums;


    font-size: 0.88rem;


    color: var(--wa-text, #e9edef);


    font-weight: 500;


}





/* Preview-Bereich (grosses Mockup) */


.wp-preview {


    position: relative;


    height: 160px;


    border-radius: 10px;


    overflow: hidden;


    background: var(--wa-bg, #0b141a);


    margin-top: 6px;


}


.wp-preview-bg {


    position: absolute;


    inset: 0;


    background-size: cover;


    background-position: center;


}


.wp-preview-bg.wp-default::after {


    content: '';


    position: absolute;


    inset: 0;


    background: rgba(0, 0, 0, 0);


}


.wp-preview-bg::after {


    content: '';


    position: absolute;


    inset: 0;


    background: rgba(0, 0, 0, calc(1 - var(--preview-dim, 0.4)));


    pointer-events: none;


}


.wp-preview-bubbles {


    position: relative;


    z-index: 1;


    padding: 18px 14px;


    display: flex;


    flex-direction: column;


    gap: 6px;


}


.wp-bubble {


    padding: 6px 10px;


    border-radius: 8px;


    font-size: 0.8rem;


    max-width: 70%;


    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);


}


.wp-bubble-in {


    background: var(--wa-bubble-in, #202c33);


    color: var(--wa-text, #e9edef);


    align-self: flex-start;


}


.wp-bubble-out {


    background: var(--wa-bubble-out, #005c4b);


    color: var(--wa-text, #e9edef);


    align-self: flex-end;


}





/* Action-Buttons */


.wp-actions {


    display: flex;


    gap: 8px;


    margin-top: 16px;


    justify-content: flex-end;


}


.wp-reset-btn,


.wp-apply-btn {


    appearance: none;


    border-radius: 10px;


    padding: 8px 18px;


    font-size: 0.875rem;


    font-weight: 500;


    cursor: pointer;


    border: 1px solid var(--wa-border, #2a3942);


    transition: all var(--duration-fast) var(--ease-out);


}


.wp-reset-btn {


    background: transparent;


    color: var(--wa-text-secondary, #aebac1);


    margin-right: auto;


}


.wp-reset-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--wa-text, #e9edef); }


.wp-apply-btn {


    background: var(--wa-green, #00a884);


    color: #fff;


    border-color: var(--wa-green, #00a884);


}


.wp-apply-btn:hover { background: #008f72; }


.wp-apply-btn:active { transform: scale(0.97); }





/* Light-Mode Anpassungen */


body.theme-light #messages.wallpaper-active {


    background: var(--chat-wallpaper) center / cover no-repeat,


        var(--wa-bg, #efeae2);


}


body.theme-light #messages.wallpaper-active::before {


    background: rgba(255, 255, 255, calc(1 - var(--chat-wallpaper-dim, 0.4)));


}


body.theme-light .wp-tile-bg.wp-default { background: var(--wa-bg-2, #f0f2f5); }


body.theme-light .wp-upload-btn { background: var(--wa-bg-2, #f0f2f5); }


body.theme-light .wp-reset-btn { color: var(--wa-text-secondary, #667781); }





/* ====================================================================


   PHASE Z: Star / Bookmark Messages


   ==================================================================== */





/* Stern-Button in der Message-Meta-Zeile (sichtbar bei Hover) */


.msg-star-btn {


    appearance: none;


    background: transparent;


    border: none;


    color: rgba(255, 255, 255, 0.55);


    font-size: 0.875rem;


    cursor: pointer;


    padding: 1px 4px;


    margin-left: 2px;


    border-radius: 4px;


    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;


    opacity: 0;


}


.message:hover .msg-star-btn,


.msg-star-btn:focus { opacity: 1; }


.msg-star-btn:hover { color: #f5b800; background: rgba(245, 184, 0, 0.12); transform: scale(1.15); }


.message.received .msg-star-btn { color: var(--text-muted, #8696a0); }


body.theme-light .msg-star-btn { color: rgba(0, 0, 0, 0.4); }


body.theme-light .msg-star-btn:hover { color: #d97706; background: rgba(217, 119, 6, 0.1); }





/* Goldener Stern direkt unter dem Bubble-Inhalt */


.msg-star-badge {


    display: inline-flex;


    align-items: center;


    gap: 3px;


    margin-top: 3px;


    margin-bottom: 2px;


    padding: 1px 6px;


    background: rgba(245, 184, 0, 0.18);


    border: 1px solid rgba(245, 184, 0, 0.35);


    border-radius: 8px;


    font-size: 0.7rem;


    color: #fbbf24;


    font-weight: 500;


    line-height: 1.2;


    align-self: flex-start;


}


.message.sent .msg-star-badge { align-self: flex-end; }


body.theme-light .msg-star-badge {


    background: rgba(217, 119, 6, 0.12);


    border-color: rgba(217, 119, 6, 0.3);


    color: #b45309;


}





/* Sidebar-Badge "Markiert" Counter */


.sidebar-action-badge {


    display: inline-block;


    margin-left: 6px;


    padding: 1px 7px;


    background: var(--wa-green, #00a884);


    color: #fff;


    border-radius: 10px;


    font-size: 0.7rem;


    font-weight: 600;


    min-width: 20px;


    text-align: center;


}





/* Starred-Modal: Tabs */


.starred-tabs {


    display: flex;


    gap: 4px;


    padding: 10px 14px 0;


    border-bottom: 1px solid var(--wa-border, #2a3942);


}


body.theme-light .starred-tabs { border-bottom-color: rgba(0, 0, 0, 0.1); }


.starred-tab {


    appearance: none;


    background: transparent;


    border: none;


    color: var(--wa-text-secondary, #aebac1);


    padding: 8px 12px;


    font-size: 0.875rem;


    cursor: pointer;


    border-bottom: 2px solid transparent;


    transition: color 0.15s ease, border-color 0.15s ease;


    margin-bottom: -1px;


}


.starred-tab:hover { color: var(--wa-text, #e9edef); }


.starred-tab.active {


    color: var(--wa-green, #00a884);


    border-bottom-color: var(--wa-green, #00a884);


    font-weight: 600;


}





/* Starred-Liste */


.starred-list { padding: 4px 0; }


.starred-loading, .starred-empty {


    text-align: center;


    padding: 40px 20px;


    color: var(--wa-text-secondary, #aebac1);


}


.starred-empty-icon {


    font-size: 2.5rem;


    margin-bottom: 8px;


    opacity: 0.5;


}


.starred-empty-hint {


    font-size: 0.8rem;


    margin-top: 4px;


    opacity: 0.7;


}


.starred-item {


    position: relative;


    padding: 12px 38px 12px 14px;


    border-bottom: 1px solid var(--wa-border, rgba(255,255,255,0.06));


    cursor: pointer;


    transition: background 0.12s ease;


}


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


body.theme-light .starred-item { border-bottom-color: rgba(0, 0, 0, 0.06); }


body.theme-light .starred-item:hover { background: rgba(0, 0, 0, 0.04); }


.starred-item-head {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 4px;


    font-size: 0.78rem;


    color: var(--wa-text-secondary, #aebac1);


}


.starred-direction { font-weight: 500; }


.starred-time { font-variant-numeric: tabular-nums; }





/* v113: Global Search Modal */


.search-input-wrap {


    display: flex;


    gap: 8px;


    padding: 14px 16px;


    border-bottom: 1px solid var(--wa-border, rgba(255,255,255,0.08));


    background: rgba(255,255,255,0.02);


}


.search-input {


    flex: 1;


    padding: 10px 14px;


    background: var(--bg-input, #0f1426);


    border: 1px solid var(--wa-border, #2a3050);


    border-radius: 10px;


    color: var(--wa-text, #e0e6f0);


    font-size: 0.9375rem;


    font-family: inherit;


    outline: none;


}


.search-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }


.search-btn {


    padding: 10px 18px;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    color: #fff;


    border: none;


    border-radius: 10px;


    font-weight: 700;


    cursor: pointer;


    font-family: inherit;


    white-space: nowrap;


}


.search-btn:hover { transform: translateY(-1px); }


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


.search-results-info {


    padding: 10px 16px;


    font-size: 0.875rem;


    color: var(--wa-text-secondary, #aebac1);


    border-bottom: 1px solid var(--wa-border, rgba(255,255,255,0.06));


}


.search-spinner {


    display: inline-block;


    width: 12px;


    height: 12px;


    border: 2px solid rgba(124, 58, 237, 0.3);


    border-top-color: #7c3aed;


    border-radius: 50%;


    animation: spin 0.8s linear infinite;


    vertical-align: middle;


    margin-right: 6px;


}


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


.search-results { padding: 0; }


.search-empty {


    padding: 60px 20px;


    text-align: center;


    color: var(--wa-text-secondary, #aebac1);


    font-size: 0.9375rem;


}


.search-result-item {


    display: flex;


    gap: 12px;


    padding: 12px 16px;


    border-bottom: 1px solid var(--wa-border, rgba(255,255,255,0.06));


    cursor: pointer;


    transition: background 0.12s;


}


.search-result-item:hover { background: rgba(124, 58, 237, 0.12); }


.search-result-avatar {


    flex-shrink: 0;


    width: 40px;


    height: 40px;


    border-radius: 50%;


    overflow: hidden;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 700;


    font-size: 1rem;


}


.search-result-avatar img { width: 100%; height: 100%; object-fit: cover; }


.search-result-body { flex: 1; min-width: 0; }


.search-result-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    font-size: 0.82rem;


    color: var(--wa-text-secondary, #aebac1);


    margin-bottom: 4px;


}


.search-result-who { font-weight: 600; }


.search-result-when { font-variant-numeric: tabular-nums; opacity: 0.8; }


.search-result-text {


    font-size: 0.88rem;


    line-height: 1.4;


    color: var(--wa-text, #e0e6f0);


    word-break: break-word;


    overflow: hidden;


    display: -webkit-box;


    -webkit-line-clamp: 3;


    -webkit-box-orient: vertical;


}


.search-result-text mark {


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(236, 72, 153, 0.4));


    color: #fff;


    padding: 1px 4px;


    border-radius: 4px;


    font-weight: 600;


}


.starred-item-body {


    color: var(--wa-text, #e9edef);


    font-size: 0.875rem;


    line-height: 1.4;


    word-break: break-word;


    white-space: pre-wrap;


    display: -webkit-box;


    -webkit-line-clamp: 3;


    -webkit-box-orient: vertical;


    overflow: hidden;


}


.starred-unstar {


    position: absolute;


    top: 50%;


    right: 8px;


    transform: translateY(-50%);


    appearance: none;


    background: transparent;


    border: 1px solid transparent;


    color: var(--wa-text-secondary, #aebac1);


    width: 28px;


    height: 28px;


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.9375rem;


    transition: all 0.12s ease;


    opacity: 0;


}


.starred-item:hover .starred-unstar { opacity: 1; }


.starred-unstar:hover {


    background: rgba(239, 68, 68, 0.12);


    color: #ef4444;


    border-color: rgba(239, 68, 68, 0.3);


}





/* Flash-Animation beim Scroll-zu-Nachricht */


@keyframes msg-flash-anim {


    0% { background: rgba(245, 184, 0, 0.0); }


    20% { background: rgba(245, 184, 0, 0.35); }


    100% { background: rgba(245, 184, 0, 0.0); }


}


.message.msg-flash { animation: msg-flash-anim 2s ease-out; }


body.theme-light .message.msg-flash { animation-name: msg-flash-anim-light; }


@keyframes msg-flash-anim-light {


    0% { background: rgba(217, 119, 6, 0.0); }


    20% { background: rgba(217, 119, 6, 0.25); }


    100% { background: rgba(217, 119, 6, 0.0); }


}





/* Mobile: 2 Spalten statt 5 */


@media (max-width: 520px) {


    .wp-presets { grid-template-columns: repeat(3, 1fr); }


    .wp-preview { height: 130px; }


}





/* === Phase V: Pinned Chats + Mute Chat === */


.friend-section-header {


    padding: 10px 14px 4px;


    font-size: 0.7rem;


    font-weight: 700;


    color: var(--wa-text-secondary, #aebac1);


    text-transform: uppercase;


    letter-spacing: 0.04em;


    user-select: none;


}


.friend-item.is-pinned {


    background: rgba(0, 168, 132, 0.06);


    border-left: 2px solid rgba(0, 168, 132, 0.5);


}


.friend-item.is-pinned:hover {


    background: rgba(0, 168, 132, 0.1);


}


.friend-item.is-muted .friend-name {


    opacity: 0.78;


}


.friend-item.is-muted .friend-preview,


.friend-item.is-muted .friend-status {


    opacity: 0.55;


    font-style: italic;


}


.fi-pin {


    display: inline-block;


    margin-right: 4px;


    font-size: 0.78rem;


    filter: saturate(1.2);


}


.fi-mute {


    display: inline-block;


    margin-right: 4px;


    font-size: 0.78rem;


    opacity: 0.7;


}





.read-receipt {


    font-size: 0.875rem;


    display: inline-flex;


    align-items: center;


    line-height: 1;


}





.read-receipt.sent { opacity: 0.7; }


.read-receipt.delivered { color: rgba(255, 255, 255, 0.85); }


.read-receipt.read { color: #93c5fd; font-weight: 700; }





.message-translated {


    margin-top: 0.5rem;


    padding-top: 0.5rem;


    border-top: 1px dashed rgba(255, 255, 255, 0.18);


    font-size: 0.875rem;


    font-style: italic;


    color: rgba(255, 255, 255, 0.85);


}





.message.received .message-translated {


    border-top-color: var(--border);


    color: var(--text-secondary);


}





.translate-badge {


    display: inline-block;


    font-size: 0.7rem;


    padding: 2px 6px;


    background: rgba(255, 255, 255, 0.18);


    border-radius: var(--radius-sm);


    margin-bottom: 0.3rem;


}





.message-content {


    word-wrap: break-word;


    color: #ffffff !important;


}





/* B.7: Sticker-Nachricht im Chat */


.message-sticker {


    display: block;


    text-align: center;


    padding: 4px 0;


}


.message.sent .message-bubble:has(.message-sticker),


.message.received .message-bubble:has(.message-sticker) {


    background: transparent;


    border: none;


    box-shadow: none;


    padding: 4px;


}





/* B.7: Chat-Sticker-Picker Modal */


#chat-sticker-modal .modal-content {


    padding: 0;


}


#chat-sticker-tabs button:hover {


    transform: translateY(-1px);


}


#chat-sticker-grid button:hover {


    transform: scale(1.1);


    background: var(--bg-hover, rgba(255,255,255,0.05));


}


#chat-sticker-grid button:active {


    transform: scale(0.95);


}





.deleted-notice {


    font-style: italic;


    opacity: 0.7;


    font-size: 0.875rem;


}





.message img {


    max-width: 100%;


    border-radius: var(--radius);


    margin-top: 0.3rem;


    cursor: pointer;


    display: block;


}





.message .file-attachment {


    display: flex;


    align-items: center;


    gap: 0.6rem;


    padding: 0.6rem 0.8rem;


    background: rgba(0, 0, 0, 0.15);


    border-radius: var(--radius);


    margin-top: 0.3rem;


    text-decoration: none;


    color: inherit;


    transition: background var(--transition);


}





.message .file-attachment:hover {


    background: rgba(0, 0, 0, 0.25);


}





.file-icon {


    width: 36px;


    height: 36px;


    background: var(--gradient-cool);


    border-radius: var(--radius-sm);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.25rem;


    color: white;


    flex-shrink: 0;


}





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


.file-name { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.file-size { font-size: 0.72rem; opacity: 0.75; }





.message audio {


    width: 100%;


    margin-top: 0.3rem;


    border-radius: var(--radius);


}





/* Message action buttons (translate, delete, etc.) */


.msg-action {


    position: absolute;


    top: -8px;


    background: var(--bg-elevated);


    border: 1px solid var(--border);


    color: var(--text-primary);


    width: 24px;


    height: 24px;


    border-radius: var(--radius-full);


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 0.7rem;


    opacity: 0;


    transition: all var(--transition);


    z-index: 2;


}





.message:hover .msg-action { opacity: 1; }


.msg-action:hover { background: var(--primary); color: white; transform: scale(1.1); }


.msg-translate-btn { right: 30px; }


.msg-delete-btn { right: 4px; }





/* === Typing indicator (sticky above input) === */


.typing-indicator {


    font-size: 0.8rem;


    color: var(--text-secondary);


    padding: 0.4rem 1rem;


    font-style: italic;


    background: var(--bg-card);


    backdrop-filter: blur(10px);


    -webkit-backdrop-filter: blur(10px);


    border-top: 1px solid var(--border);


    display: flex;


    align-items: center;


    gap: 6px;


    z-index: 5;


    min-height: 32px;


    animation: fade-in 0.25s ease;


}





.typing-indicator.hidden { display: none !important; }





.typing-dots {


    display: inline-flex;


    gap: 3px;


    margin-left: 4px;


}





.typing-dots span {


    display: inline-block;


    width: 6px;


    height: 6px;


    background: var(--primary-light);


    border-radius: var(--radius-full);


    animation: typing-bounce 1.4s infinite;


    opacity: 0.5;


}





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


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





@keyframes typing-bounce {


    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }


    30% { transform: translateY(-6px); opacity: 1; }


}





/* === Message input === */


.message-input-container {


    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));


    background: var(--bg-card);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


    border-top: 1px solid rgba(255,255,255,0.05);


    display: flex;


    align-items: flex-end;


    gap: 0.5rem;


    position: relative;


    min-height: 64px;


}


}





/* v141ay: Per-Chat Draft-Indikator in der Sidebar (Chat-Übersicht) */


.draft-indicator {


    padding: 0.45rem 1.25rem 0.55rem;


    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12));


    border-top: 1px solid var(--border);


    display: flex;


    align-items: center;


    gap: 0.5rem;


    font-size: 0.875rem;


    color: var(--text-primary);


    backdrop-filter: blur(10px);


    -webkit-backdrop-filter: blur(10px);


    animation: draft-indicator-slide 0.25s ease-out;


}


.draft-indicator.hidden { display: none !important; }


.draft-icon { font-size: 1rem; flex-shrink: 0; }


.draft-text {


    flex: 1;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    opacity: 0.85;


    font-style: italic;


}


.draft-text strong { font-weight: 600; font-style: normal; opacity: 0.95; }


.draft-jump, .draft-discard {


    background: transparent;


    border: 0;


    padding: 0.25rem 0.5rem;


    cursor: pointer;


    border-radius: 0.4rem;


    color: var(--text-secondary);


    font-size: 1rem;


    transition: background 0.15s, color 0.15s;


    flex-shrink: 0;


}


.draft-jump:hover, .draft-discard:hover {


    background: rgba(255, 255, 255, 0.08);


    color: var(--text-primary);


}


.draft-discard:hover { color: #ef4444; }


@keyframes draft-indicator-slide {


    from { opacity: 0; transform: translateY(-8px); }


    to { opacity: 1; transform: translateY(0); }


}





/* v141az: Draft-Badge in der Sidebar (unter dem Friend-Namen) */


.friend-draft {


    font-size: 0.72rem;


    color: #a78bfa; /* lila Akzent */


    margin-top: 2px;


    font-weight: 500;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    max-width: 100%;


    opacity: 0.9;


    font-style: italic;


}


.friend-item.has-draft .friend-info { /* wenn Draft da, leichtes Glow */


    border-left: 2px solid rgba(167, 139, 250, 0.5);


    padding-left: 4px;


}


    flex-shrink: 0;


    z-index: 5;


}





#message-input {


    flex: 1;


    background: var(--bg-input);


    border: 1px solid transparent;


    border-radius: 1.5rem;


    padding: 0.875rem 1.25rem;


    color: var(--text-primary);


    font-size: 1rem;


    font-family: inherit;


    outline: none;


    transition: border-color 0.15s, background 0.15s;


    /* Phase Q: Auto-Growing Textarea */


    min-height: 52px;


    max-height: 160px; /* ~6 Zeilen */


    line-height: 1.5;


    resize: none;


    overflow-y: hidden;


    overflow-x: hidden;


    word-wrap: break-word;


    word-break: break-word;


    white-space: pre-wrap;


    align-self: stretch;


}


#message-input:hover { border-color: rgba(255,255,255,0.06); }


#message-input:focus { border-color: rgba(99,102,241,0.4); background: var(--bg-input); }





#message-input:focus {


    border-color: var(--primary);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);


}





#message-input::placeholder { color: var(--text-muted); }





.send-btn {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border: none;


    width: 42px;


    height: 42px;


    border-radius: var(--radius-full);


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 1.125rem;


    font-weight: 700;


    box-shadow: var(--shadow-glow);


    transition: all var(--transition);


    flex-shrink: 0;


}
.send-btn:hover { transform: scale(1.05); box-shadow: var(--shadow-glow); }
.send-btn:active { transform: scale(0.95); }





.send-btn:hover {


    transform: scale(1.08) rotate(-12deg);


    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);


}





.send-btn:active { transform: scale(0.96); }





/* ============================================================================


   MODALS


   ============================================================================ */


.modal {


    position: fixed;


    inset: 0;


    background: var(--bg-overlay);


    backdrop-filter: blur(8px);


    -webkit-backdrop-filter: blur(8px);


    display: flex;


    align-items: center;


    justify-content: center;


    z-index: 1000;


    padding: 1rem;


    animation: fade-in 0.2s ease;


}





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





.modal-content {


    background: var(--bg-card);


    backdrop-filter: blur(24px) saturate(140%);


    -webkit-backdrop-filter: blur(24px) saturate(140%);


    border: 1px solid var(--border);


    border-radius: var(--radius-xl);


    max-width: 720px; /* v141cv23: 540px -> 720px (Stefans' target format like Features-Modal) */


    width: min(720px, 95vw);


    max-height: 90vh;


    overflow-y: auto;


    box-shadow: var(--shadow-lg);


    animation: fade-in-up 0.3s var(--ease-bounce);


}





.modal-content h2 {


    font-size: 1.25rem;


    font-weight: 700;


    padding: 1.5rem 1.5rem 0.5rem;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.modal-body { padding: 1.25rem 1.5rem 1.5rem; }





.modal-close {


    position: absolute;


    top: 1rem;


    right: 1rem;


    background: transparent;


    border: none;


    color: var(--text-secondary);


    font-size: 1.5rem;


    cursor: pointer;


    width: 32px;


    height: 32px;


    border-radius: var(--radius-full);


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all var(--transition);


}





.modal-close:hover {


    background: var(--bg-hover);


    color: var(--text-primary);


}





.form-group { margin-bottom: 1rem; }





.form-group label {


    display: block;


    margin-bottom: 0.4rem;


    color: var(--text-secondary);


    font-size: 0.875rem;


    font-weight: 600;


}





.form-group input,


.form-group select,


.form-group textarea {


    width: 100%;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.65rem 0.875rem;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-family: inherit;


    outline: none;


    transition: all var(--transition);


}





.form-group input:focus,


.form-group select:focus,


.form-group textarea:focus {


    border-color: var(--primary);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);


}





.btn {


    background: var(--bg-hover);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-radius: 10px;


    padding: 0.6rem 1.125rem;


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    transition: all var(--duration-fast) var(--ease-out);


    font-family: inherit;


}





.btn:hover { background: var(--bg-elevated); transform: translateY(-1px); }


.btn:active { transform: translateY(0); }





.btn-primary {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border-color: transparent;


    box-shadow: var(--shadow-glow);


}


.btn-primary:hover { box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45); }





.btn-danger {


    background: rgba(239, 68, 68, 0.12);


    color: #fca5a5;


    border-color: rgba(239, 68, 68, 0.3);


}


.btn-danger:hover { background: var(--danger); color: white; }





.btn-success {


    background: rgba(16, 185, 129, 0.12);


    color: #6ee7b7;


    border-color: rgba(16, 185, 129, 0.3);


}


.btn-success:hover { background: var(--success); color: white; }





.btn-row { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }


.btn-row .btn { flex: 1; min-width: 100px; }





.error-msg {


    background: rgba(239, 68, 68, 0.12);


    color: #fca5a5;


    border: 1px solid rgba(239, 68, 68, 0.25);


    border-radius: var(--radius);


    padding: 0.6rem 0.875rem;


    font-size: 0.875rem;


    margin-top: 0.5rem;


}





.ok-msg {


    background: rgba(16, 185, 129, 0.12);


    color: #6ee7b7;


    border: 1px solid rgba(16, 185, 129, 0.25);


    border-radius: var(--radius);


    padding: 0.6rem 0.875rem;


    font-size: 0.875rem;


    margin-top: 0.5rem;


}





.hidden { display: none !important; }





/* ============================================================================


   ADMIN DASHBOARD


   ============================================================================ */



/* v141cv140: Unified 2-line friend-item format */
.friend-line1 {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.friend-line2 {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.friend-line2.online {
    color: var(--success);
}
.friend-line2 .ci-icon {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: -2px;
}
/* Admin-Modal: breit + scrollbarer Body (wa-modal-Pattern) */


.wa-modal.admin-modal-shell {


    width: min(1300px, 96vw);


    max-width: none;


    height: 94vh;


    max-height: 94vh;


    display: flex;


    flex-direction: column;


    overflow: hidden;


}


.wa-modal.admin-modal-shell .wa-modal-header { flex-shrink: 0; }


.wa-modal.admin-modal-shell .admin-tabs { flex-shrink: 0; }


.wa-modal.admin-modal-shell .admin-body {


    flex: 1 1 0;


    overflow-y: auto;


    overflow-x: hidden;


    display: flex;


    flex-direction: column;


    min-height: 0;


    padding: 0;


}


.admin-modal-shell .admin-content {


    flex: 1 1 auto;


    overflow-y: auto;


    min-height: 0;


    max-height: none;


    padding: 1.5rem 1.75rem 2rem;


    scrollbar-gutter: stable;


}


.wa-modal.admin-modal-shell .admin-body::-webkit-scrollbar { width: 10px; }


.wa-modal.admin-modal-shell .admin-body::-webkit-scrollbar-track { background: rgba(124, 58, 237, 0.08); border-radius: 6px; }


.wa-modal.admin-modal-shell .admin-body::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; min-height: 40px; }


.wa-modal.admin-modal-shell .admin-body::-webkit-scrollbar-thumb:hover { background: #6d28d9; }


.admin-modal-shell .admin-content::-webkit-scrollbar { width: 10px; }


.admin-modal-shell .admin-content::-webkit-scrollbar-track { background: rgba(124, 58, 237, 0.08); border-radius: 6px; }


.admin-modal-shell .admin-content::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; min-height: 40px; }


.admin-modal-shell .admin-content::-webkit-scrollbar-thumb:hover { background: #6d28d9; }


.admin-list::-webkit-scrollbar { width: 8px; }


.admin-list::-webkit-scrollbar-track { background: transparent; }


.admin-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }


.admin-list::-webkit-scrollbar-thumb:hover { background: var(--primary); }


/* Admin-Context-Menu (z-index 1100) muss ueber wa-modal-overlay (9999) liegen */


/* v141cv23: #admin-modal.wa-modal-overlay rule removed (admin-modal uses class='modal', not 'wa-modal-overlay') */



/* v141bl: Modal-Width-Overrides (groessere Modals) */


/* v141cv23b: Per-Modal-Width-Overrides - both width + max-width (max-width needed because .modal-content base = max-width:720px) */


#call-modal .modal-content { width: min(500px, 92vw); max-width: 500px; }


#friend-requests-modal .modal-content { width: min(500px, 92vw); max-width: 500px; }


#location-modal .modal-content { width: min(500px, 92vw); max-width: 500px; }


#group-members-modal .modal-content { width: min(500px, 92vw); max-width: 500px; }


#translate-modal .modal-content { width: min(500px, 92vw); max-width: 500px; }


#map-modal .modal-content { width: min(900px, 95vw); max-width: 900px; }


#group-modal .modal-content { width: min(600px, 92vw); max-width: 600px; }


#settings-modal .modal-content {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 540px !important;
  max-width: 96vw !important;
  max-height: 90vh !important;
  min-width: 540px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  z-index: 5001 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}
#settings-modal .modal-content::-webkit-scrollbar { width: 5px; }
#settings-modal .modal-content::-webkit-scrollbar-thumb { background: var(--border-color, #ccc); border-radius: 4px; }
#settings-modal { z-index: 5000; }


#admin-newuser-modal .modal-content { width: min(540px, 92vw); max-width: 540px; }


#profile-modal .modal-content { width: min(720px, 95vw); max-width: 720px; }


#chat-sticker-modal .modal-content { width: min(480px, 92vw); max-width: 480px; }


#admin-modal .modal-content { width: min(720px, 95vw); max-width: 720px; } /* Admin braucht Platz */





.wa-modal-overlay { z-index: 1000; }





/* v141bj-tabwrap: Tabs umbrechen auf 2+ Zeilen statt horizontal scrollen */


.admin-tabs {


    display: flex;


    flex-wrap: wrap;


    gap: 6px;


    padding: 0.75rem 1.5rem 0;


    border-bottom: 2px solid var(--border);


    overflow-x: visible;


    overflow-y: visible;


    background: var(--bg-overlay, rgba(0,0,0,0.02));


}





.admin-tabs::-webkit-scrollbar { display: none; }





.admin-tab {


    background: transparent;


    border: none;


    color: var(--text-secondary);


    padding: 0.875rem 1.25rem;


    font-size: 0.92rem;


    font-weight: 600;


    cursor: pointer;


    border-radius: var(--radius) var(--radius) 0 0;


    transition: all var(--transition);


    white-space: nowrap;


    position: relative;


    font-family: inherit;


    display: flex;


    align-items: center;


    gap: 4px;


}





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





.admin-tab.active {


    color: var(--text-primary);


    background: var(--bg-card, #fff);


    box-shadow: 0 -2px 0 0 var(--primary) inset;


}





.admin-tab.active::after {


    content: '';


    position: absolute;


    bottom: -2px;


    left: 0;


    right: 0;


    height: 3px;


    background: var(--gradient-primary);


    border-radius: var(--radius-full);


}





.admin-content {


    padding: 1.5rem 1.75rem 2rem;


    min-height: 400px;


    max-height: calc(94vh - 130px);


    overflow-y: auto;


}


.wa-modal.admin-modal-shell .admin-panel { display: block; padding: 1.25rem 1.5rem 1.5rem; }


.wa-modal.admin-modal-shell .admin-panel.hidden { display: none; }





.admin-section { animation: fade-in 0.3s ease; }


.admin-section.hidden { display: none; }





.admin-section h3 {


    font-size: 1.125rem;


    margin: 0 0 1.25rem;


    color: var(--text-primary);


    font-weight: 700;


    display: flex;


    align-items: center;


    gap: 0.5rem;


    padding-bottom: 0.75rem;


    border-bottom: 1px solid var(--border);


}





.admin-toolbar {


    display: flex;


    gap: 0.75rem;


    margin-bottom: 1.25rem;


    align-items: center;


    flex-wrap: wrap;


    padding: 0.75rem 1rem;


    background: var(--bg-card, rgba(255,255,255,0.03));


    border: 1px solid var(--border);


    border-radius: var(--radius);


}





.admin-toolbar input,


.admin-toolbar select {


    flex: 1;


    min-width: 200px;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.65rem 0.9375rem;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-family: inherit;


    outline: none;


}





.admin-toolbar input:focus,


.admin-toolbar select:focus {


    border-color: var(--primary);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);


}





.admin-user-list {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));


    gap: 1rem;


}





.admin-user-card {


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.65rem 0.875rem;


    transition: all var(--transition);


    display: flex;


    align-items: center;


    gap: 0.75rem;


}





.admin-user-card:hover {


    border-color: var(--primary);


    transform: translateY(-2px);


    box-shadow: var(--shadow-md);


}





.admin-user-card .user-avatar {


    width: 40px;


    height: 40px;


    font-size: 1rem;


    flex-shrink: 0;


}





.admin-user-card .user-info { min-width: 0; }





.admin-user-card h4 {


    font-size: 0.875rem;


    font-weight: 700;


    color: var(--text-primary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    margin: 0;


}





.admin-user-card p {


    font-size: 0.75rem;


    color: var(--text-secondary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    margin: 1px 0;


}





.admin-user-card .admin-user-actions {


    display: flex;


    gap: 4px;


    margin-top: 0.7rem;


    flex-wrap: wrap;


}





.admin-user-card .admin-user-actions button {


    background: var(--bg-input);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-radius: var(--radius-sm);


    padding: 0.3rem 0.55rem;


    font-size: 0.75rem;


    cursor: pointer;


    transition: all var(--transition);


    font-family: inherit;


    font-weight: 500;


}





.admin-user-card .admin-user-actions button:hover {


    background: var(--primary);


    color: white;


    border-color: var(--primary);


}





.admin-user-card .admin-user-actions button.danger:hover {


    background: var(--danger);


    border-color: var(--danger);


}





.admin-user-card .admin-user-actions button.success:hover {


    background: var(--success);


    border-color: var(--success);


}





.admin-user-card .admin-user-actions button:disabled {


    opacity: 0.4;


    cursor: not-allowed;


}





.admin-stat-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


    gap: 1rem;


    margin-bottom: 1.5rem;


}





.admin-stat-card {


    background: var(--gradient-glass);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 1.125rem;


    transition: all var(--transition);


    position: relative;


    overflow: hidden;


}





.admin-stat-card::before {


    content: '';


    position: absolute;


    top: 0; left: 0; right: 0;


    height: 3px;


    background: var(--gradient-primary);


}





.admin-stat-card:hover {


    transform: translateY(-3px);


    box-shadow: var(--shadow-md);


    border-color: var(--primary);


}


.admin-stat-card-action { background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(236, 72, 153, 0.08)); border-color: rgba(124, 58, 237, 0.4); }


.admin-stat-card-action::before { background: linear-gradient(90deg, #7c3aed, #ec4899); height: 4px; }


.admin-stat-card-action .label { color: var(--primary); }


/* v142c: modal-content is the scroll container, form is just a layout container */
#settings-form {
  overflow: visible;
  padding-right: 0;
  box-sizing: border-box;
}




/* v142c-mobile: Settings modal responsive (min-width nur auf desktop) */
@media (max-width: 600px) {
  #settings-modal .modal-content {
    width: 96vw !important;
    min-width: 0 !important;
    left: 2vw !important;
    right: 2vw !important;
    transform: translate(0, -50%) !important;
  }
}

/* v142: Admin-Stat-Card Font-Scale (konsistent mit Chat/Settings) */
.admin-stat-card .label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.admin-stat-card .value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.admin-stat-card .sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.admin-service-row .svc-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.admin-service-row .svc-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-family: monospace;
}
.admin-service-row .svc-type {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.admin-service-row .svc-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
}
.admin-service-row .svc-status.running {
    background: rgba(34,197,94,0.18);
    color: #22c55e;
}
.admin-service-row .svc-status.stopped {
    background: rgba(239,68,68,0.18);
    color: #ef4444;
}



.admin-rl-info { font-size: 0.875rem; color: var(--text-secondary); margin: 0.5rem 0 0.8rem; line-height: 1.5; }


#admin-rl-reset-btn { width: 100%; padding: 0.7rem 1rem; font-size: 0.9375rem; font-weight: 700; }





/* v111.9: Admin-Reset-Codes-Karten */


.admin-user-card.is-used { opacity: 0.5; background: rgba(0,0,0,0.05); }


.admin-user-card.is-expired { opacity: 0.55; background: rgba(255,165,0,0.04); }


.admin-toolbar-hint { margin-left: auto; font-size: 0.82rem; color: var(--text-secondary, #888); font-style: italic; }





/* v111.9: Passwort-Vergessen-Modal */


.forgot-pw-step.hidden { display: none; }


.forgot-pw-msg { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem; }


.forgot-pw-msg.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }


.forgot-pw-msg.success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }


.forgot-pw-devcode { margin-top: 8px; padding: 8px 12px; background: rgba(124, 58, 237, 0.15); border-radius: 6px; font-size: 0.875rem; color: #c4b5fd; }


.forgot-pw-step { padding: 8px 0; }


.forgot-pw-step .fm-input { margin-bottom: 12px; }


.forgot-pw-step .fm-btn { width: 100%; margin-top: 8px; }


.auth-forgot-link { text-align: center; margin-top: 12px; }


.auth-forgot-link a { color: #c4b5fd; text-decoration: none; font-size: 0.88rem; }


.auth-forgot-link a:hover { text-decoration: underline; color: #ddd6fe; }





.admin-stat-label {


    font-size: 0.78rem;


    color: var(--text-secondary);


    text-transform: uppercase;


    letter-spacing: 0.05em;


    font-weight: 600;


    margin-bottom: 0.3rem;


}





.admin-stat-value {


    font-size: 1.75rem;


    font-weight: 800;


    color: var(--text-primary);


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


    line-height: 1.1;


}





.admin-stat-unit {


    font-size: 0.875rem;


    color: var(--text-muted);


    margin-left: 4px;


}





.admin-form-row {


    display: flex;


    align-items: center;


    gap: 1rem;


    padding: 0.75rem 0;


    border-bottom: 1px solid var(--border);


}





.admin-form-row:last-child { border-bottom: none; }





.admin-form-row label {


    flex: 1;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-weight: 500;


}





.admin-form-row input[type="text"],


.admin-form-row input[type="number"],


.admin-form-row select {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius-sm);


    padding: 0.45rem 0.7rem;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-family: inherit;


    min-width: 80px;


    max-width: 200px;


    outline: none;


}





.admin-form-row input:focus, .admin-form-row select:focus {


    border-color: var(--primary);


}





/* Toggle switch */


.switch {


    position: relative;


    display: inline-block;


    width: 44px;


    height: 24px;


    flex-shrink: 0;


}





.switch input { opacity: 0; width: 0; height: 0; }





.slider {


    position: absolute;


    cursor: pointer;


    inset: 0;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius-full);


    transition: all var(--transition);


}





.slider::before {


    position: absolute;


    content: '';


    height: 18px;


    width: 18px;


    left: 2px;


    top: 2px;


    background: var(--text-secondary);


    border-radius: var(--radius-full);


    transition: all var(--transition);


}





input:checked + .slider {


    background: var(--gradient-primary);


    border-color: var(--primary);


}





input:checked + .slider::before {


    transform: translateX(20px);


    background: white;


    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);


}





.admin-log {


    background: var(--bg-deep);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 1rem;


    font-family: 'Courier New', monospace;


    font-size: 0.78rem;


    color: var(--text-secondary);


    max-height: 240px;


    overflow-y: auto;


    white-space: pre-wrap;


}





/* ============================================================================


   LOCATION / FILE / TRANSLATE PICKER MODALS


   ============================================================================ */


.location-modal-content {


    max-width: 420px;


}





.duration-picker {


    display: flex;


    gap: 0.4rem;


    margin: 0.6rem 0 1rem;


    flex-wrap: wrap;


}





.duration-btn {


    background: var(--bg-input);


    border: 1px solid var(--border);


    color: var(--text-primary);


    border-radius: var(--radius-full);


    padding: 0.4rem 0.875rem;


    font-size: 0.875rem;


    cursor: pointer;


    transition: all var(--transition);


    font-family: inherit;


}





.duration-btn:hover { border-color: var(--primary); }


.duration-btn.active {


    background: var(--gradient-primary);


    color: white;


    border-color: transparent;


}





/* Language picker grid */


.lang-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));


    gap: 0.5rem;


    max-height: 360px;


    overflow-y: auto;


    padding: 0.25rem;


}





.lang-btn {


    background: var(--bg-input);


    border: 1px solid var(--border);


    color: var(--text-primary);


    border-radius: var(--radius);


    padding: 0.6rem 0.4rem;


    cursor: pointer;


    font-size: 0.875rem;


    transition: all var(--transition);


    display: flex;


    align-items: center;


    gap: 0.4rem;


    justify-content: center;


    font-family: inherit;


}





.lang-btn:hover {


    border-color: var(--primary);


    transform: translateY(-1px);


}





.lang-btn.active {


    background: var(--gradient-primary-soft);


    border-color: var(--primary);


    color: var(--text-primary);


}





/* Emoji picker */


.emoji-picker {


    position: fixed !important;


    z-index: 99999 !important;


    background: var(--bg-card, #1a1a2e) !important;


    border: 1px solid var(--border, rgba(255,255,255,0.1)) !important;


    border-radius: 0.75rem !important;


    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;


    overflow: hidden;


    max-width: calc(100vw - 16px);


    display: flex !important;


    flex-direction: column !important;


    grid-template-columns: none !important;


    gap: 0 !important;


    max-height: 480px !important;


    height: 480px !important;


    padding: 0 !important;


}


    overflow-y: auto !important;


    padding: 0.5rem !important;


    background: var(--bg-card) !important;


    border: 1px solid var(--border) !important;


    border-radius: var(--radius) !important;


    margin-top: 0.4rem !important;


    z-index: 9999 !important;


    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;


    position: fixed !important;


}





.emoji-picker button {


    background: transparent;


    border: none;


    font-size: 1.25rem;


    cursor: pointer;


    padding: 4px;


    border-radius: var(--radius-sm);


    transition: background var(--transition);


}





.emoji-picker button:hover {


    background: var(--bg-hover);


}





/* Chat menu */


.chat-menu {


    position: absolute;


    top: 60px;


    right: 1rem;


    background: var(--bg-elevated);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    box-shadow: var(--shadow-md);


    z-index: 50;


    min-width: 220px;


    overflow: hidden;


}





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





.chat-menu-item {


    display: block;


    width: 100%;


    text-align: left;


    background: transparent;


    border: none;


    color: var(--text-primary);


    padding: 0.7rem 1rem;


    font-size: 0.88rem;


    cursor: pointer;


    transition: background var(--transition);


    font-family: inherit;


}





.chat-menu-item:hover { background: var(--bg-hover); }


.chat-menu-item.danger { color: #fca5a5; }


.chat-menu-item.danger:hover { background: rgba(239, 68, 68, 0.15); }





/* ============================================================================


   AVATARS / GROUP MEMBERS / FRIEND PROFILE


   ============================================================================ */


.member-list {


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


    padding: 0.5rem 0;


}





.member-item {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    padding: 0.6rem 0.875rem;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    transition: all var(--transition);


}





.member-item:hover { border-color: var(--primary); }





.member-item .user-avatar { width: 36px; height: 36px; font-size: 0.9375rem; }


.member-item .user-avatar::after { width: 9px; height: 9px; }





/* ============================================================================


   TOAST NOTIFICATIONS


   ============================================================================ */


.toast {


    position: fixed;


    bottom: 1.5rem;


    left: 50%;


    transform: translateX(-50%);


    background: var(--bg-elevated);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    color: var(--text-primary);


    padding: 0.8rem 1.5rem;


    border-radius: var(--radius-full);


    border: 1px solid var(--border);


    box-shadow: var(--shadow-lg);


    z-index: 9999;


    animation: toast-in 0.3s var(--ease-bounce);


    max-width: 90%;


    text-align: center;


    font-size: 0.875rem;


    font-weight: 500;


}





@keyframes toast-in {


    from { transform: translate(-50%, 30px); opacity: 0; }


    to { transform: translate(-50%, 0); opacity: 1; }


}





.toast.error { border-color: var(--danger); background: rgba(239, 68, 68, 0.15); }


.toast.success { border-color: var(--success); background: rgba(16, 185, 129, 0.15); }





/* Toast container + notifications (used by showToast JS) */


#toast-container {


    position: fixed;


    bottom: 1.5rem;


    right: 1.5rem;


    z-index: 9999;


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


    pointer-events: none;


}





.toast-notification {


    background: var(--bg-elevated);


    backdrop-filter: blur(20px) saturate(140%);


    -webkit-backdrop-filter: blur(20px) saturate(140%);


    color: var(--text-primary);


    padding: 0.875rem 1.25rem;


    border-radius: var(--radius);


    border: 1px solid var(--border);


    box-shadow: var(--shadow-lg);


    font-size: 0.92rem;


    font-weight: 500;


    max-width: 380px;


    pointer-events: auto;


    opacity: 0;


    transform: translateX(40px);


    transition: all 0.3s var(--ease-bounce);


}





.toast-notification.show {


    opacity: 1;


    transform: translateX(0);


}





.toast-notification.error {


    border-color: var(--danger);


    background: rgba(239, 68, 68, 0.18);


    color: #fecaca;


}





.toast-notification.success {


    border-color: var(--success);


    background: rgba(16, 185, 129, 0.18);


    color: #bbf7d0;


}





/* v141bo: Rich-Notification (Message+Call Popups unten rechts mit Action-Buttons) */


.rich-notification {


    background: var(--bg-elevated);


    backdrop-filter: blur(24px) saturate(160%);


    -webkit-backdrop-filter: blur(24px) saturate(160%);


    border: 1px solid var(--border-strong, var(--border));


    border-radius: 14px;


    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);


    padding: 0.875rem 1rem 0.875rem 0.875rem;


    display: flex;


    align-items: center;


    gap: 0.875rem;


    min-width: 320px;


    max-width: 380px;


    pointer-events: auto;


    cursor: pointer;


    transition: all 0.3s var(--ease-bounce, cubic-bezier(0.4, 0, 0.2, 1));


    opacity: 0;


    transform: translateX(40px) scale(0.95);


    position: relative;


    overflow: hidden;


}


.rich-notification.show {


    opacity: 1;


    transform: translateX(0) scale(1);


}


.rich-notification:hover {


    transform: translateX(-4px) scale(1);


    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.2);


}


.rich-notification::before {


    content: '';


    position: absolute;


    left: 0; top: 0; bottom: 0;


    width: 4px;


    background: var(--primary);


}


.rich-notification--call::before { background: linear-gradient(180deg, #10b981, #059669); }


.rich-notification--call.video::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }


.rich-notification--message::before { background: linear-gradient(180deg, #7c3aed, #ec4899); }


.rich-notification--friend-request::before { background: linear-gradient(180deg, #f59e0b, #d97706); }





.rich-notif-avatar {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    background: var(--gradient-primary, linear-gradient(135deg, #7c3aed, #ec4899));


    display: flex;


    align-items: center;


    justify-content: center;


    color: white;


    font-weight: 700;


    font-size: 1rem;


    flex-shrink: 0;


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);


}


.rich-notif-avatar.video { background: linear-gradient(135deg, #3b82f6, #2563eb); }


.rich-notif-avatar.call { background: linear-gradient(135deg, #10b981, #059669); }


.rich-notif-avatar.group { background: linear-gradient(135deg, #f59e0b, #d97706); }





.rich-notif-body {


    flex: 1;


    min-width: 0;


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.rich-notif-title {


    font-size: 0.875rem;


    font-weight: 700;


    color: var(--text-primary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    display: flex;


    align-items: center;


    gap: 0.35rem;


}


.rich-notif-subtitle {


    font-size: 0.82rem;


    color: var(--text-secondary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.rich-notif-actions {


    display: flex;


    gap: 0.4rem;


    flex-shrink: 0;


}


.rich-notif-btn {


    background: var(--bg-input);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-radius: 8px;


    padding: 0.4rem 0.75rem;


    font-size: 0.78rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.18s ease;


    font-family: inherit;


    white-space: nowrap;


}


.rich-notif-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }


.rich-notif-btn.primary { background: var(--primary); color: white; border-color: var(--primary); }


.rich-notif-btn.primary:hover { background: #6d28d9; }


.rich-notif-btn.success { background: #10b981; color: white; border-color: #10b981; }


.rich-notif-btn.success:hover { background: #059669; }


.rich-notif-btn.danger { background: #ef4444; color: white; border-color: #ef4444; }


.rich-notif-btn.danger:hover { background: #dc2626; }


.rich-notif-close {


    position: absolute;


    top: 6px;


    right: 6px;


    width: 22px;


    height: 22px;


    border-radius: 50%;


    background: transparent;


    border: none;


    color: var(--text-secondary);


    cursor: pointer;


    font-size: 0.875rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all 0.15s ease;


    opacity: 0;


}


.rich-notification:hover .rich-notif-close { opacity: 1; }


.rich-notif-close:hover { background: var(--bg-hover); color: var(--text-primary); }


.rich-notif--leaving { opacity: 0; transform: translateX(40px) scale(0.95); }





@media (max-width: 480px) {


    .rich-notification { min-width: 0; max-width: calc(100vw - 2rem); }


}





/* ============================================================================


   ANIMATIONS


   ============================================================================ */


@keyframes fade-in {


    from { opacity: 0; }


    to { opacity: 1; }


}





@keyframes fade-in-up {


    from { opacity: 0; transform: translateY(20px); }


    to { opacity: 1; transform: translateY(0); }


}





@keyframes shake {


    0%, 100% { transform: translateX(0); }


    25% { transform: translateX(-4px); }


    75% { transform: translateX(4px); }


}





/* ============================================================================


   RESPONSIVE


   ============================================================================ */


@media (max-width: 768px) {


    .sidebar {


        position: fixed;


        inset: 0 auto 0 0;


        width: 85%;


        max-width: 340px;


        transform: translateX(-100%);


        transition: transform var(--transition);


        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);


    }





    .sidebar.open { transform: translateX(0); }





    /* Backdrop for the open sidebar on mobile */


    .sidebar-backdrop {


        display: none;


        position: fixed;


        inset: 0;


        background: rgba(0, 0, 0, 0.5);


        backdrop-filter: blur(4px);


        -webkit-backdrop-filter: blur(4px);


        z-index: 19;


        animation: fade-in 0.2s ease;


    }


    .sidebar-backdrop.open { display: block; }





    .chat-area { width: 100%; }





    .messages { padding: 1rem 0.75rem 0.5rem; }


    .message { max-width: 88%; }





    .message-input-container {


        padding: 0.7rem;


        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));


        gap: 0.3rem;


    }


    #message-input { padding: 0.6rem 0.875rem; font-size: 16px; }  /* 16px prevents iOS zoom */


    .icon-btn { width: 40px; height: 40px; font-size: 1.0625rem; }


    .send-btn { width: 44px; height: 44px; }





    .admin-user-list { grid-template-columns: 1fr; }


    .admin-stat-grid { grid-template-columns: 1fr 1fr; }


    .admin-tabs { padding: 0.5rem 0.75rem 0; }


    .admin-content { padding: 1rem; }





    /* Friend items: bigger touch targets */


    .friend-item {


        padding: 0.7rem 0.875rem;


        min-height: 64px;


    }





    /* Full-screen modals on mobile */


    .modal {


        padding: 0;


        align-items: flex-end;


    }


    .modal-content {


        max-width: 100%;


        max-height: 92vh;


        border-radius: var(--radius-xl) var(--radius-xl) 0 0;


        width: 100%;


        animation: slide-up 0.3s var(--ease-bounce);


    }


    /* Settings/admin modals stay centered but full-width */


    .modal-content.modal-center {


        border-radius: var(--radius-xl);


        margin: 0.5rem;


    }





    /* Chat header more compact on mobile */


    .chat-header {


        padding-left: 0.875rem;


        padding-right: 0.875rem;


        gap: 0.6rem;


        min-width: 0;


        overflow: hidden;


    }


    .chat-header-name { font-size: 1rem; }


    .chat-header-status { font-size: 0.72rem; }


    .chat-user-info { min-width: 0; flex: 1; }


    .chat-user-info > div { min-width: 0; overflow: hidden; }


    .chat-user-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


    .chat-header-actions { flex-shrink: 0; gap: 0.25rem; }


    .chat-header-actions .icon-btn { min-width: 38px; min-height: 38px; padding: 0.4rem; }


    .chat-area { max-width: 100vw; overflow-x: hidden; }





    /* Auth box on mobile */


    .auth-box {


        padding: 2rem 1.5rem 1.75rem;


    }


.auth-hero-icon,


.auth-hero-icon-img {


    font-size: 2.8rem;


    width: 72px; height: 72px;


}


    .auth-box h1 { font-size: 1.55rem; }





    /* Voice overlay: larger buttons for touch */


    #voice-cancel-btn, #voice-send-btn {


        padding: 0.875rem 1.5rem;


        font-size: 1rem;


    }





    /* === Phase J2: Mobile UI-Fixes v2 (User-Markierung Lila/Rot/Gelb/Blau) === */


    /* ROT: Sidebar-Header DEUTLICH kompakter */


    .sidebar-header { padding: 0.3rem 0.5rem !important; gap: 0.25rem !important; }


    .sidebar-header .user-avatar { width: 28px !important; height: 28px !important; font-size: 0.875rem !important; }


    .sidebar h2 { font-size: 0.78rem !important; letter-spacing: -0.3px !important; }


    .user-profile { gap: 0.35rem !important; padding: 0.2rem !important; }





    /* LILA: 3 Top-Buttons (Admin/Settings/Logout) NOCH kleiner */


    .user-menu { gap: 0.12rem !important; }


    .user-menu .icon-btn { width: 26px !important; height: 26px !important; font-size: 0.78rem !important; border-radius: 6px !important; min-width: 26px !important; }





    /* GELB: Action-Buttons + Filter-Chips kompakt */


    .sidebar-actions { padding: 0.25rem 0.5rem !important; gap: 0.2rem !important; }


    .sidebar-action-btn {


        flex: 1 1 0 !important;


        padding: 0.3rem 0.1rem !important;


        font-size: 0.62rem !important;


        border-radius: 7px !important;


        min-width: 0 !important;


        white-space: nowrap !important;


        overflow: hidden !important;


        text-overflow: ellipsis !important;


        display: flex !important;


        align-items: center !important;


        justify-content: center !important;


        gap: 0.15rem !important;


        line-height: 1.1 !important;


    }


    .friend-filter-chips { padding: 0.3rem 0.5rem !important; gap: 3px !important; }


    .ff-chip { padding: 4px 8px !important; font-size: 0.66rem !important; }


    .ff-sort-btn { width: 22px !important; height: 22px !important; font-size: 0.7rem !important; }


    .search-container { padding: 0.35rem 0.5rem !important; }


    .search-container input { font-size: 13px !important; padding: 0.35rem 0.6rem !important; }


    .add-friend-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.875rem !important; }


    .online-indicator { font-size: 0.65rem !important; padding: 1px 5px !important; }





    /* BLAU: Status-Bubble Symbole SEHR sichtbar */


    .status-feed { padding: 10px 12px !important; gap: 10px !important; }


    .status-bubble { min-width: 60px !important; }


    .status-bubble .sb-avatar {


        width: 60px !important; height: 60px !important;


        font-size: 1.5rem !important;


        background: linear-gradient(135deg, #2a3942, #1d282f) !important;


        color: #ffffff !important;


        border: 3px solid #00d856 !important;


        box-shadow: 0 0 0 2px rgba(0, 216, 86, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5) !important;


    }


    .status-bubble.is-mine .sb-avatar { background: linear-gradient(135deg, #00a884, #008069) !important; }


    .status-bubble.is-mine .sb-avatar::after {


        background: #00d856 !important;


        color: #0b141a !important;


        width: 20px !important; height: 20px !important;


        font-size: 0.9375rem !important;


        font-weight: 700 !important;


        border: 2px solid #0b141a !important;


    }


    .status-bubble .sb-name { font-size: 0.72rem !important; max-width: 60px !important; color: var(--wa-text) !important; }





    /* KPI-Leiste: 2 Reihen (3+2), passt sicher in 340px */


    .wa-dashboard { grid-template-columns: repeat(3, 1fr) !important; padding: 5px 5px !important; gap: 4px !important; }


    .wa-kpi { padding: 5px 3px 4px !important; min-height: 48px !important; }


    .wa-kpi .kpi-value { font-size: 0.9375rem !important; }


    .wa-kpi .kpi-label { font-size: 0.58rem !important; letter-spacing: 0 !important; }


    .wa-kpi .kpi-icon { font-size: 0.75rem !important; }


    .wa-kpi .kpi-avatar { width: 22px !important; height: 22px !important; font-size: 0.875rem !important; }





    /* Top-Tab (Status) auch kompakter */


    .wa-sidebar-tab { padding: 8px 20px !important; font-size: 0.75rem !important; }


}





/* === Phase J7: Mobile-Layout = PC-Layout (nur essenzielle Anpassungen) === */


/* Auf dem Handy soll es GENAUSO aussehen wie am PC. Nur die noetigsten mobilen Anpassungen. */


@media (max-width: 1024px), (hover: none) and (pointer: coarse) {


    /* Vollbild + Safe-Area (iPhone Notch) */


    .app-container { height: 100dvh; }


    #message-input { font-size: 16px; } /* verhindert iOS-Zoom */


}





@keyframes slide-up {


    from { transform: translateY(100%); opacity: 0.6; }


    to   { transform: translateY(0);    opacity: 1; }


}





/* ============================================================================


   UTILITIES


   ============================================================================ */


.text-muted { color: var(--text-muted); }


.text-secondary { color: var(--text-secondary); }


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


.mb-1 { margin-bottom: 0.5rem; }


.mb-2 { margin-bottom: 1rem; }


.mt-1 { margin-top: 0.5rem; }


.mt-2 { margin-top: 1rem; }


.flex { display: flex; }


.flex-1 { flex: 1; }


.gap-1 { gap: 0.5rem; }


.gap-2 { gap: 1rem; }





/* Mobile hamburger */


#sidebar-toggle {


    display: none;


    position: fixed;


    top: 0.75rem;


    left: 0.75rem;


    z-index: 200;


    background: var(--bg-card);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    width: 40px;


    height: 40px;


    cursor: pointer;


    font-size: 1.125rem;


    color: var(--text-primary);


    align-items: center;


    justify-content: center;


}





@media (max-width: 768px) {


    #sidebar-toggle { display: flex; }


}





#back-to-sidebar {


    display: none;


    background: var(--bg-input);


    border: 1px solid var(--border);


    color: var(--text-primary);


    width: 36px;


    height: 36px;


    border-radius: var(--radius);


    align-items: center;


    justify-content: center;


    cursor: pointer;


    font-size: 1rem;


}





@media (max-width: 768px) {


    #back-to-sidebar { display: flex; }


    .chat-area.hidden-mobile { display: none; }


}





/* Voice record overlay */


#voice-record-overlay {


    position: fixed;


    inset: 0;


    background: rgba(5, 7, 20, 0.92);


    backdrop-filter: blur(20px);


    -webkit-backdrop-filter: blur(20px);


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 16px;


    z-index: 9999;


    animation: fade-in 0.2s ease;


    pointer-events: auto;


}





#voice-record-overlay.hidden,


#voice-record-overlay[hidden] {


    display: none !important;


    pointer-events: none !important;


}





#voice-record-pulse {


    width: 90px;


    height: 90px;


    border-radius: var(--radius-full);


    background: var(--gradient-warm);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 40px;


    box-shadow: 0 0 60px rgba(245, 158, 11, 0.6);


    animation: voice-pulse 1.4s ease-in-out infinite;


}





@keyframes voice-pulse {


    0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(245, 158, 11, 0.5); }


    50% { transform: scale(1.12); box-shadow: 0 0 80px rgba(245, 158, 11, 0.8); }


}





#voice-record-time {


    color: white;


    font-size: 1.5rem;


    font-weight: 700;


    font-variant-numeric: tabular-nums;


}





#voice-record-transcript {


    color: var(--text-primary);


    font-size: 1.15rem;


    max-width: 85%;


    text-align: center;


    min-height: 2.4em;


    line-height: 1.5;


    padding: 0.875rem 1.25rem;


    background: rgba(124, 58, 237, 0.12);


    border: 1px solid rgba(124, 58, 237, 0.3);


    border-radius: var(--radius);


    backdrop-filter: blur(8px);


    -webkit-backdrop-filter: blur(8px);


    transition: all 0.2s ease;


    word-wrap: break-word;


}





#voice-record-transcript:empty::before,


#voice-record-transcript[data-empty="true"]::before {


    content: "🎤 Sprich jetzt … dein Text erscheint hier live";


    color: var(--text-muted);


    font-style: italic;


    font-size: 0.9375rem;


}





#voice-record-transcript-label {


    color: var(--primary-light, #a78bfa);


    font-size: 0.75rem;


    font-weight: 700;


    letter-spacing: 0.12em;


    text-transform: uppercase;


    margin-top: 4px;


}





.sidebar-action-btn {


    background: var(--bg-input);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.7rem 1.25rem;


    font-size: 0.92rem;


    font-weight: 600;


    cursor: pointer;


    transition: all var(--transition);


    font-family: inherit;


    display: inline-flex;


    align-items: center;


    gap: 0.4rem;


    line-height: 1.2;


}





.sidebar-action-btn:hover {


    background: var(--bg-elevated);


    transform: translateY(-1px);


    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);


}


.sidebar-action-btn:active { transform: translateY(0); }


.sidebar-action-btn.primary {


    background: linear-gradient(135deg, #6366f1, #8b5cf6);


    color: #fff;


    border-color: transparent;


    width: 100%;


    justify-content: center;


}


.sidebar-action-btn.primary:hover {


    background: linear-gradient(135deg, #4f46e5, #7c3aed);


    color: #fff;


}





/* ============================================================================


   COMPATIBILITY — class names used in existing HTML


   ============================================================================ */





/* Screen switching (only one screen visible at a time) */


.screen { display: none; width: 100%; height: 100%; min-height: 100vh; min-height: 100dvh; }


.screen.active { display: flex; flex: 1 1 auto; min-height: 100vh; min-height: 100dvh; }


#auth-screen.screen.active { align-items: center; justify-content: center; }


#chat-screen.screen.active { flex-direction: row; overflow: hidden; height: 100%; }





/* Auth tab buttons (use .tab-btn.active) */


.tab-btn {


    flex: 1;


    padding: 0.6rem;


    border: none;


    background: transparent;


    color: var(--text-secondary);


    font-size: 0.875rem;


    font-weight: 600;


    border-radius: var(--radius-full);


    cursor: pointer;


    transition: all var(--transition);


    font-family: inherit;


}





.tab-btn.active {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    box-shadow: var(--shadow-glow);


}





/* Auth form: shown by default, hidden with .hidden */


.auth-form {


    display: flex;


    flex-direction: column;


    gap: 0.875rem;


    margin-top: 0.5rem;


}


.auth-form.hidden { display: none !important; }





.auth-form input,


.auth-form select {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.875rem 1rem;


    color: var(--text-primary);


    font-size: 0.9375rem;


    font-family: inherit;


    transition: all var(--transition);


    outline: none;


}





.auth-form input:focus,


.auth-form select:focus {


    border-color: var(--primary);


    background: rgba(124, 58, 237, 0.05);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);


}





.auth-form input::placeholder { color: var(--text-muted); }





.auth-form button[type="submit"] {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border: none;


    border-radius: var(--radius);


    padding: 0.875rem 1rem;


    font-size: 1rem;


    font-weight: 700;


    cursor: pointer;


    margin-top: 0.5rem;


    transition: all var(--transition);


    box-shadow: var(--shadow-glow);


    font-family: inherit;


    letter-spacing: 0.02em;


}





.auth-form button[type="submit"]:hover {


    transform: translateY(-2px);


    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.4);


}





.auth-form button[type="submit"]:active { transform: translateY(0); }





/* Checkbox label (remember me) */


.checkbox-label {


    display: flex !important;


    align-items: center;


    gap: 0.5rem;


    color: var(--text-secondary);


    font-size: 0.875rem;


    margin-top: 0.3rem;


    cursor: pointer;


    font-weight: 400 !important;


    background: transparent !important;


    border: none !important;


    padding: 0 !important;


    box-shadow: none !important;


}





.checkbox-label input[type="checkbox"] {


    width: auto !important;


    margin: 0;


    cursor: pointer;


    accent-color: var(--primary);


}





/* Logo / h2 in sidebar */


.logo, h2 { color: var(--text-primary); font-weight: 700; }





/* Settings form */


.form-row {


    display: flex;


    flex-direction: column;


    gap: 0.4rem;


    margin-bottom: 1rem;


}





.form-row label {


    color: var(--text-secondary);


    font-size: 0.875rem;


    font-weight: 600;


}





.form-row input,


.form-row textarea,


.form-row select {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.65rem 0.875rem;


    color: var(--text-primary);


    font-size: 0.875rem;


    font-family: inherit;


    outline: none;


    transition: all var(--transition);


}





.form-row input:focus,


.form-row textarea:focus,


.form-row select:focus {


    border-color: var(--primary);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);


}





.form-actions {


    display: flex;


    gap: 0.6rem;


    margin-top: 1.5rem;


    flex-wrap: wrap;


    padding-top: 1rem;


    border-top: 1px solid var(--border, #2a3050);


}





.form-actions .btn { flex: 1; min-width: 110px; }





/* v111.8: Install-Link in form-actions soll klein und oben sein */


.form-actions .install-link-btn {


    flex: 1 1 100%;


    margin-bottom: 4px !important;


    width: 100%;


}





.btn.primary,


.primary-btn {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border-color: transparent;


    box-shadow: var(--shadow-glow);


}





.btn.primary:hover,


.primary-btn:hover { box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45); }





.btn.secondary,


.secondary-btn {


    background: var(--bg-input);


    color: var(--text-primary);


    border-color: var(--border);


}





.form-error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--radius); padding: 0.6rem 0.875rem; font-size: 0.875rem; margin-top: 0.5rem; }


.form-success { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.25); border-radius: var(--radius); padding: 0.6rem 0.875rem; font-size: 0.875rem; margin-top: 0.5rem; }


.form-error.hidden, .form-success.hidden { display: none !important; }





/* Settings form uses <label> wrapping <input> — style this pattern */


#settings-form > label,


#password-form > label,


#settings-form h3,


#password-form h3,


#admin-newuser-form .form-row label {


    display: block;


    color: var(--text-secondary);


    font-size: 0.88rem;


    font-weight: 600;


    margin-bottom: 0.4rem;


}





#settings-form h3,


#password-form h3 {


    font-size: 1.0625rem;


    color: var(--text-primary);


    margin-top: 1.5rem;


    margin-bottom: 1rem;


    font-weight: 700;


}





#settings-form input,


#settings-form select,


#settings-form textarea,


#password-form input,


#password-form select {


    display: block;


    width: 100%;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.7rem 0.875rem;


    color: var(--text-primary);


    font-size: 0.92rem;


    font-family: inherit;


    outline: none;


    transition: all var(--transition);


    margin-top: 0.3rem;


    box-sizing: border-box;


}





#settings-form input:focus,


#settings-form select:focus,


#settings-form textarea:focus,


#password-form input:focus {


    border-color: var(--primary);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);


}





#settings-form > label,


#password-form > label {


    margin-bottom: 1rem;


}





#settings-form > hr,


#password-form > hr,


.modal-divider {


    border: none;


    border-top: 1px solid var(--border);


    margin: 1.5rem 0;


}





/* Toggle row (e.g. location sharing switch) */


.toggle-row {


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 1rem;


    cursor: pointer;


    padding: 0.5rem 0;


}





.toggle-row > span:first-child {


    flex: 1;


}





/* Toggle-Status-Label (AN/AUS) erscheint rechts neben dem Switch */


.toggle-row .toggle-status {


    font-size: 0.7rem;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    padding: 3px 8px;


    border-radius: 8px;


    background: rgba(120, 120, 120, 0.2);


    color: var(--text-secondary, #888);


    margin-right: 8px;


    min-width: 36px;


    text-align: center;


}





.toggle-row .toggle-status.on {


    background: rgba(34, 197, 94, 0.25);


    color: var(--success, #22c55e);


}





.toggle-row input[type="checkbox"] {


    appearance: none;


    -webkit-appearance: none;


    width: 48px;


    height: 26px;


    background: rgba(120, 120, 130, 0.35);


    border: 1px solid rgba(255, 255, 255, 0.08);


    border-radius: 14px;


    position: relative;


    cursor: pointer;


    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;


    margin: 0;


    flex-shrink: 0;


}





.toggle-row input[type="checkbox"]::after {


    content: '';


    position: absolute;


    top: 2px;


    left: 2px;


    width: 20px;


    height: 20px;


    background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 100%);


    border-radius: 50%;


    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s ease;


    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);


}





.toggle-row input[type="checkbox"]:hover:not(:disabled) {


    border-color: rgba(255, 255, 255, 0.18);


}





.toggle-row input[type="checkbox"]:checked {


    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);


    border-color: rgba(34, 197, 94, 0.6);


    box-shadow: 0 0 16px rgba(34, 197, 94, 0.4);


}





.toggle-row input[type="checkbox"]:checked::after {


    transform: translateX(22px);


    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);


}





/* Synchronisiere Status-Label via :has() wo verfuegbar */


.toggle-row:has(input:checked) > .toggle-status {


    background: rgba(34, 197, 94, 0.25);


    color: var(--success, #22c55e);


}





.toggle-row:has(input:not(:checked)) > .toggle-status {


    background: rgba(120, 120, 120, 0.2);


    color: var(--text-secondary, #888);


}





/* Modal header / divider */


.modal-header {


    padding: 1.5rem 1.5rem 0.5rem;


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 1rem;


}





.modal-header h2 {


    font-size: 1.25rem;


    font-weight: 700;


    padding: 0;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}





.modal-divider {


    border: none;


    border-top: 1px solid var(--border);


    margin: 0.5rem 0;


}





.close-btn {


    background: transparent;


    border: none;


    color: var(--text-secondary);


    font-size: 1.5rem;


    cursor: pointer;


    width: 32px;


    height: 32px;


    border-radius: var(--radius-full);


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all var(--transition);


    line-height: 1;


}





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





/* Sidebar h2 (Fritz-Messenger-Plus logo) */


.sidebar h2 {


    font-size: 1.125rem;


    font-weight: 800;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


    flex: 1;


    text-align: center;


    margin: 0;


}





/* Current user bar */


.current-user-bar {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    padding: 0.75rem 1.125rem;


    border-bottom: 1px solid var(--border);


    background: rgba(124, 58, 237, 0.05);


    cursor: pointer;


    transition: background var(--transition);


}





.current-user-bar:hover { background: var(--bg-hover); }





.current-user-bar img {


    width: 38px;


    height: 38px;


    min-width: 38px;


    min-height: 38px;


    max-width: 38px;


    max-height: 38px;


    border-radius: var(--radius-full);


    object-fit: cover;


    background: var(--gradient-primary);


    flex-shrink: 0;


}





.user-menu {


    display: flex;


    gap: 0.3rem;


    align-items: center;


}





.icon-btn.mobile-only { display: none; }


@media (max-width: 768px) {


    .icon-btn.mobile-only { display: flex; }


}





/* Chat container (some legacy markup) */


.chat-container {


    display: flex;


    flex-direction: column;


    flex: 1;


    overflow: hidden;


    min-width: 0;


    min-height: 0;


    height: 100%;


}





#chat-container:not(.hidden) {


    height: 100%;


}





.no-chat {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    color: var(--text-secondary);


    font-size: 1.125rem;


    flex-direction: column;


    gap: 1rem;


    padding: 2rem;


    text-align: center;


}





.empty-state {


    text-align: center;


    padding: 2.5rem 1.5rem;


    color: var(--text-secondary);


    font-size: 0.9375rem;


}





/* === Phase J: Rich Empty States (mit Icon, Titel, Text, CTA) === */


.empty-state-rich {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    text-align: center;


    padding: 2.5rem 1.25rem;


    color: var(--text-secondary);


    gap: 0.5rem;


    animation: empty-state-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);


}


.empty-state-rich .empty-state-icon,


.empty-state-rich .empty-state-icon-img {


    font-size: 2.5rem;


    line-height: 1;


    margin-bottom: 0.4rem;


    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));


    animation: empty-state-icon-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);


    width: 96px;


    height: 96px;


    object-fit: contain;


}


.empty-state-rich .empty-state-title {


    font-size: 1.02rem;


    font-weight: 600;


    color: var(--text-primary, #e9edef);


    margin: 0;


}


.empty-state-rich .empty-state-text {


    font-size: 0.88rem;


    color: var(--text-secondary);


    max-width: 28rem;


    line-height: 1.45;


    margin: 0;


}


.empty-state-rich .empty-state-cta {


    margin-top: 0.7rem;


    padding: 0.55rem 1.125rem;


    border: none;


    border-radius: var(--radius-full);


    background: linear-gradient(135deg, #00a884, #008069);


    color: #fff;


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.35);


    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;


}


.empty-state-rich .empty-state-cta:hover {


    transform: translateY(-1px);


    box-shadow: 0 4px 14px rgba(0, 168, 132, 0.5);


    background: linear-gradient(135deg, #06cf9f, #00a884);


}


.empty-state-rich .empty-state-cta:active {


    transform: translateY(0);


}


.empty-state-rich.variant-compact {


    padding: 1.125rem 0.8rem;


    gap: 0.3rem;


}


.empty-state-rich.variant-compact .empty-state-icon {


    font-size: 1.75rem;


    margin-bottom: 0.2rem;


}


.empty-state-rich.variant-compact .empty-state-title {


    font-size: 0.875rem;


}


.empty-state-rich.variant-compact .empty-state-text {


    font-size: 0.8rem;


}


.empty-state-rich.variant-success .empty-state-icon {


    filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.35));


}


@keyframes empty-state-in {


    from { opacity: 0; transform: translateY(6px); }


    to   { opacity: 1; transform: translateY(0); }


}


@keyframes empty-state-icon-pop {


    0%   { transform: scale(0.6); opacity: 0; }


    60%  { transform: scale(1.08); opacity: 1; }


    100% { transform: scale(1); opacity: 1; }


}





/* Chat-spezifische Empty-State (zentriert in der Mitte) */


.chat-empty-state {


    position: absolute;


    inset: 0;


    display: flex;


    align-items: center;


    justify-content: center;


    pointer-events: none;


    background: transparent;


}


.chat-empty-state .empty-state-rich {


    pointer-events: auto;


    background: rgba(17, 27, 33, 0.85);


    backdrop-filter: blur(8px);


    border-radius: 1rem;


    padding: 2rem 2.5rem;


    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);


    max-width: 28rem;


}





/* === Phase M: Date-Separators im Chat === */


.date-separator {


    display: flex;


    align-items: center;


    justify-content: center;


    margin: 1.25rem 0 0.75rem;


    position: relative;


    animation: date-sep-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);


}


.date-separator span {


    background: linear-gradient(135deg, rgba(32, 44, 51, 0.95), rgba(25, 35, 42, 0.95));


    color: #e9edef;


    font-size: 0.74rem;


    font-weight: 600;


    letter-spacing: 0.3px;


    padding: 0.3rem 0.875rem;


    border-radius: var(--radius-full);


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);


    border: 1px solid rgba(255, 255, 255, 0.05);


}


.date-separator::before,


.date-separator::after {


    content: '';


    flex: 1;


    height: 1px;


    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);


    margin: 0 0.5rem;


}


@keyframes date-sep-in {


    from { opacity: 0; transform: translateY(-4px); }


    to   { opacity: 1; transform: translateY(0); }


}





/* === Phase M: Scroll-to-Bottom FAB === */


.scroll-fab {


    position: absolute;


    right: 1.125rem;


    bottom: 5.5rem; /* über dem Input-Feld */


    width: 44px;


    height: 44px;


    border-radius: 50%;


    background: linear-gradient(135deg, #00a884, #008069);


    color: #fff;


    border: none;


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    box-shadow: 0 4px 14px rgba(0, 168, 132, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);


    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, box-shadow 0.2s;


    z-index: 30;


    animation: fab-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);


}


.scroll-fab:hover {


    transform: translateY(-2px) scale(1.05);


    box-shadow: 0 6px 20px rgba(0, 168, 132, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35);


}


.scroll-fab:active {


    transform: translateY(0) scale(0.95);


}


.scroll-fab.hidden {


    opacity: 0;


    transform: translateY(20px) scale(0.8);


    pointer-events: none;


}


.scroll-fab svg {


    display: block;


}


.scroll-fab-badge {


    position: absolute;


    top: -4px;


    right: -4px;


    min-width: 20px;


    height: 20px;


    padding: 0 5px;


    border-radius: var(--radius-full);


    background: #ef4444;


    color: #fff;


    font-size: 0.7rem;


    font-weight: 700;


    line-height: 20px;


    text-align: center;


    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);


    border: 2px solid var(--wa-bg, #111b21);


    animation: fab-badge-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);


}


@keyframes fab-in {


    from { opacity: 0; transform: translateY(20px) scale(0.6); }


    

}


@keyframes fab-badge-pop {


    0%   { transform: scale(0.4); }


    60%  { transform: scale(1.15); }


    100% { transform: scale(1); }


}





/* === Phase N: Emoji-Picker === */


.emoji-picker {


    position: fixed;


    width: 320px;


    max-width: calc(100vw - 16px);


    height: 380px;


    max-height: 70vh;


    background: linear-gradient(180deg, #202c33, #1a2529);


    border: 1px solid rgba(255, 255, 255, 0.08);


    border-radius: 12px;


    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);


    display: flex;


    flex-direction: column;


    overflow: hidden;


    z-index: 1300; /* v141ad: ÜBER wa-modal-overlay (1100) und ff-modal etc. */


    animation: ep-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);


    font-family: inherit;


    color: var(--text-primary, #e9edef);


}


@keyframes ep-in {


    from { opacity: 0; transform: translateY(8px) scale(0.96); }


    

}


.ep-header {


    padding: 0.6rem 0.6rem 0.4rem;


    border-bottom: 1px solid rgba(255, 255, 255, 0.05);


}


/* Phase N+: Hautton-Selector (Fitzpatrick-Skala) */


.ep-skin-tones {


    display: flex;


    gap: 0.2rem;


    margin-top: 0.4rem;


    padding: 0.15rem 0;


    justify-content: space-between;


}


.ep-skin-btn {


    flex: 1 1 0;


    min-width: 0;


    height: 28px;


    border: 1px solid rgba(255, 255, 255, 0.06);


    background: rgba(0, 0, 0, 0.2);


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.9375rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s, transform 0.12s, border-color 0.15s;


    padding: 0;


}


.ep-skin-btn:hover {


    background: rgba(255, 255, 255, 0.06);


    transform: translateY(-1px);


}


.ep-skin-btn.active {


    background: rgba(0, 168, 132, 0.2);


    border-color: rgba(0, 168, 132, 0.5);


    transform: scale(1.05);


}


.ep-search-wrap {


    position: relative;


}


.ep-search {


    width: 100%;


    padding: 0.4rem 0.6rem 0.4rem 1.85rem;


    background: rgba(0, 0, 0, 0.25);


    border: 1px solid rgba(255, 255, 255, 0.06);


    border-radius: var(--radius-full);


    color: #e9edef;


    font-size: 0.875rem;


    outline: none;


    transition: border-color 0.15s;


}


.ep-search::placeholder { color: rgba(233, 237, 239, 0.4); }


.ep-search:focus { border-color: rgba(0, 168, 132, 0.5); }


.ep-search-wrap::before{


  content: '';


  display: inline-block;


  width: 1em;


  height: 1em;


  vertical-align: middle;


  background-color: currentColor;


  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  margin-right: 0.4em;


 }


.ep-categories {


    display: flex;


    gap: 0.15rem;


    padding: 0.4rem 0.4rem;


    border-bottom: 1px solid rgba(255, 255, 255, 0.05);


    overflow-x: auto;


    scrollbar-width: none;


}


.ep-categories::-webkit-scrollbar { display: none; }


.ep-cat-tab {


    flex: 0 0 auto;


    width: 32px;


    height: 32px;


    border: none;


    background: transparent;


    border-radius: 8px;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.0625rem;


    transition: background 0.15s, transform 0.15s;


    color: rgba(233, 237, 239, 0.7);


}


.ep-cat-tab:hover {


    background: rgba(255, 255, 255, 0.05);


}


.ep-cat-tab.active {


    background: rgba(0, 168, 132, 0.18);


    transform: scale(1.05);


}


.ep-cat-icon { display: block; line-height: 1; }


.ep-content {


    flex: 1;


    overflow-y: auto;


    padding: 0.5rem 0.6rem 0.6rem;


    scrollbar-width: thin;


    scrollbar-color: rgba(255,255,255,0.15) transparent;


}


.ep-content::-webkit-scrollbar { width: 6px; }


.ep-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }


.ep-cat-name {


    font-size: 0.7rem;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 0.5px;


    color: rgba(233, 237, 239, 0.5);


    padding: 0.5rem 0.2rem 0.35rem;


}


.ep-grid {


    display: grid;


    grid-template-columns: repeat(8, 1fr);


    gap: 2px;


}


.ep-emoji {


    aspect-ratio: 1;


    border: none;


    background: transparent;


    border-radius: 6px;


    cursor: pointer;


    font-size: 1.25rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.12s, transform 0.12s;


    padding: 0;


}


.ep-emoji:hover {


    background: rgba(255, 255, 255, 0.08);


    transform: scale(1.15);


}


.ep-emoji:active {


    background: rgba(0, 168, 132, 0.3);


    transform: scale(0.92);


}


.ep-empty {


    text-align: center;


    color: rgba(233, 237, 239, 0.5);


    padding: 2rem 1rem;


    font-size: 0.875rem;


}


@media (max-width: 480px) {


    .emoji-picker {


        width: calc(100vw - 16px);


        left: 8px !important;


        height: 60vh;


    }


    .ep-grid {


        grid-template-columns: repeat(7, 1fr);


    }


}





/* === Phase O: Image-Lightbox === */


body.il-open {


    overflow: hidden;


}


.image-lightbox {


    position: fixed;


    inset: 0;


    z-index: 500;


    background: rgba(0, 0, 0, 0.92);


    backdrop-filter: blur(10px);


    -webkit-backdrop-filter: blur(10px);


    display: flex;


    align-items: center;


    justify-content: center;


    animation: il-fade-in 0.2s ease-out;


    user-select: none;


    touch-action: none;


}


@keyframes il-fade-in {


    from { opacity: 0; }


    to   { opacity: 1; }


}


.il-topbar {


    position: absolute;


    top: 0;


    left: 0;


    right: 0;


    height: 56px;


    padding: 0 1rem;


    display: flex;


    align-items: center;


    justify-content: space-between;


    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent);


    z-index: 2;


    pointer-events: none;


}


.il-topbar > * { pointer-events: auto; }


.il-counter {


    color: #fff;


    font-size: 0.875rem;


    font-weight: 600;


    background: rgba(0, 0, 0, 0.5);


    padding: 0.3rem 0.75rem;


    border-radius: var(--radius-full);


    backdrop-filter: blur(8px);


}


.il-actions {


    display: flex;


    gap: 0.4rem;


    align-items: center;


}


.il-btn {


    width: 38px;


    height: 38px;


    border: none;


    background: rgba(255, 255, 255, 0.1);


    color: #fff;


    border-radius: 8px;


    cursor: pointer;


    font-size: 1rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s, transform 0.1s;


    backdrop-filter: blur(8px);


    font-family: inherit;


}


.il-btn:hover {


    background: rgba(255, 255, 255, 0.18);


}


.il-btn:active {


    transform: scale(0.92);


}


.il-zoom-reset {


    width: auto;


    padding: 0 0.6rem;


    font-size: 0.82rem;


    font-weight: 600;


    min-width: 52px;


}


.il-nav {


    position: absolute;


    top: 50%;


    transform: translateY(-50%);


    width: 50px;


    height: 50px;


    border: none;


    background: rgba(255, 255, 255, 0.08);


    color: #fff;


    border-radius: 50%;


    font-size: 2rem;


    line-height: 1;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s, transform 0.15s;


    z-index: 2;


    backdrop-filter: blur(8px);


    font-family: inherit;


    font-weight: 300;


}


.il-nav:hover {


    background: rgba(255, 255, 255, 0.18);


    transform: translateY(-50%) scale(1.05);


}


.il-prev { left: 1rem; }


.il-next { right: 1rem; }


.il-nav.hidden { display: none; }


.il-stage {


    position: relative;


    width: 100%;


    height: 100%;


    display: flex;


    align-items: center;


    justify-content: center;


    overflow: hidden;


}


.il-img {


    max-width: 92vw;


    max-height: 84vh;


    object-fit: contain;


    cursor: zoom-in;


    transition: transform 0.15s ease-out;


    user-select: none;


    -webkit-user-drag: none;


    animation: il-img-in 0.2s ease-out;


}


.il-img.zoomed {


    cursor: grab;


    transition: none;


}


.il-img.zoomed:active {


    cursor: grabbing;


}


@keyframes il-img-in {


    from { opacity: 0; transform: scale(0.95); }


    

}


.il-bottombar {


    position: absolute;


    bottom: 0;


    left: 0;


    right: 0;


    padding: 1rem;


    display: flex;


    justify-content: center;


    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);


    pointer-events: none;


    z-index: 2;


}


.il-filename {


    color: rgba(255, 255, 255, 0.75);


    font-size: 0.875rem;


    background: rgba(0, 0, 0, 0.5);


    padding: 0.4rem 0.875rem;


    border-radius: var(--radius-full);


    max-width: 80vw;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    backdrop-filter: blur(8px);


}


@media (max-width: 768px) {


    .il-topbar { height: 50px; padding: 0 0.6rem; }


    .il-btn { width: 34px; height: 34px; font-size: 0.9375rem; }


    .il-nav { width: 42px; height: 42px; font-size: 1.5rem; }


    .il-prev { left: 0.5rem; }


    .il-next { right: 0.5rem; }


    .il-img { max-width: 100vw; max-height: 80vh; }


    .il-zoom-reset { font-size: 0.75rem; min-width: 46px; padding: 0 0.5rem; }


}





/* === Phase P: Profil-Popover === */


img.is-clickable {


    cursor: pointer;


    transition: transform 0.15s, box-shadow 0.15s;


    border-radius: 50%;


}


img.is-clickable:hover {


    transform: scale(1.06);


    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.4);


}





/* === Phase R: In-Chat Search === */


.chat-search-bar {


    display: flex;


    align-items: center;


    gap: 0.4rem;


    padding: 0.5rem 0.8rem;


    background: linear-gradient(180deg, #1a2529, #181f23);


    border-bottom: 1px solid rgba(255, 255, 255, 0.06);


    animation: cs-bar-in 0.18s ease-out;


}


@keyframes cs-bar-in {


    from { opacity: 0; transform: translateY(-6px); }


    to   { opacity: 1; transform: translateY(0); }


}


.chat-search-bar.hidden { display: none; }


.cs-icon {


    font-size: 0.9375rem;


    opacity: 0.7;


    flex-shrink: 0;


}


#chat-search-input {


    flex: 1;


    min-width: 0;


    background: rgba(0, 0, 0, 0.25);


    border: 1px solid rgba(255, 255, 255, 0.08);


    border-radius: var(--radius-full);


    padding: 0.4rem 0.8rem;


    color: #e9edef;


    font-size: 0.88rem;


    outline: none;


    font-family: inherit;


    transition: border-color 0.15s, background 0.15s;


}


#chat-search-input:focus {


    border-color: rgba(0, 168, 132, 0.5);


    background: rgba(0, 0, 0, 0.35);


}


#chat-search-input::placeholder { color: rgba(233, 237, 239, 0.4); }


.cs-counter {


    color: rgba(233, 237, 239, 0.65);


    font-size: 0.78rem;


    font-weight: 600;


    white-space: nowrap;


    padding: 0 0.2rem;


    min-width: 50px;


    text-align: center;


    flex-shrink: 0;


}


.cs-nav, .cs-close {


    flex-shrink: 0;


    width: 30px;


    height: 30px;


    border: none;


    background: rgba(255, 255, 255, 0.06);


    color: #e9edef;


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.78rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s, transform 0.1s;


    font-family: inherit;


}


.cs-nav:hover, .cs-close:hover { background: rgba(255, 255, 255, 0.12); }


.cs-nav:active, .cs-close:active { transform: scale(0.92); }


.cs-close { font-size: 0.9375rem; }





/* Such-Highlights in Messages */


mark.chat-search-hit {


    background: rgba(251, 191, 36, 0.35);


    color: inherit;


    padding: 1px 2px;


    border-radius: 4px;


    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4);


    transition: background 0.2s, box-shadow 0.2s;


}


mark.chat-search-hit.current {


    background: rgba(251, 191, 36, 0.9);


    color: #0b141a;


    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 8px rgba(251, 191, 36, 0.6);


    font-weight: 700;


    animation: cs-current-pulse 1s ease-in-out infinite;


}


@keyframes cs-current-pulse {


    0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 8px rgba(251, 191, 36, 0.6); }


    50%      { box-shadow: 0 0 0 2px rgba(251, 191, 36, 1.0), 0 0 14px rgba(251, 191, 36, 0.9); }


}


@media (max-width: 480px) {


    .cs-counter { min-width: 42px; font-size: 0.72rem; }


    .cs-nav, .cs-close { width: 28px; height: 28px; }


}


.profile-popover {


    position: fixed;


    z-index: 250;


    width: 320px;


    max-width: calc(100vw - 16px);


    background: linear-gradient(180deg, #202c33, #1a2529);


    border: 1px solid rgba(255, 255, 255, 0.08);


    border-radius: 14px;


    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);


    overflow: hidden;


    animation: pp-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);


    color: #e9edef;


    font-family: inherit;


}


@keyframes pp-in {



    

}


.pp-header {


    position: relative;


    height: 80px;


    background: linear-gradient(135deg, #00a884 0%, #008069 60%, #075e54 100%);


    display: flex;


    align-items: flex-end;


    justify-content: center;


}


.pp-avatar {


    width: 84px;


    height: 84px;


    border-radius: 50%;


    border: 4px solid #202c33;


    background: #202c33;


    object-fit: cover;


    transform: translateY(50%);


    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);


}


.pp-close {


    position: absolute;


    top: 8px;


    right: 8px;


    width: 30px;


    height: 30px;


    border: none;


    background: rgba(0, 0, 0, 0.35);


    color: #fff;


    border-radius: 50%;


    cursor: pointer;


    font-size: 0.875rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s;


}


.pp-close:hover { background: rgba(0, 0, 0, 0.55); }


.pp-body {


    padding: 50px 1.125rem 0.875rem;


    text-align: center;


}


.pp-name-row {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 0.5rem;


    margin-bottom: 0.1rem;


}


.pp-name {


    font-size: 1.15rem;


    font-weight: 700;


    line-height: 1.2;


}


.pp-status-dot {


    width: 10px;


    height: 10px;


    border-radius: 50%;


    flex-shrink: 0;


}


.pp-status-dot.online {


    background: #22c55e;


    box-shadow: 0 0 0 2px #202c33, 0 0 6px rgba(34, 197, 94, 0.6);


}


.pp-status-dot.offline {


    background: #6b7280;


    box-shadow: 0 0 0 2px #202c33;


}


.pp-username {


    font-size: 0.875rem;


    color: rgba(233, 237, 239, 0.55);


    margin-bottom: 0.4rem;


}


.pp-status-msg {


    font-size: 0.88rem;


    color: rgba(233, 237, 239, 0.85);


    font-style: italic;


    margin: 0.3rem auto 0.5rem;


    max-width: 90%;


    line-height: 1.35;


}


.pp-last-seen {


    font-size: 0.75rem;


    color: rgba(233, 237, 239, 0.45);


    margin-bottom: 0.4rem;


}


.pp-fields {


    text-align: left;


    margin: 0.6rem 0 0.4rem;


    display: flex;


    flex-direction: column;


    gap: 0.35rem;


}


.pp-field {


    display: flex;


    align-items: center;


    gap: 0.6rem;


    background: rgba(255, 255, 255, 0.04);


    border-radius: 8px;


    padding: 0.45rem 0.6rem;


}


.pp-field-icon {


    font-size: 1.125rem;


    width: 28px;


    text-align: center;


    flex-shrink: 0;


}


.pp-field-body {


    min-width: 0;


    flex: 1;


}


.pp-field-label {


    font-size: 0.7rem;


    color: rgba(233, 237, 239, 0.5);


    text-transform: uppercase;


    letter-spacing: 0.3px;


    font-weight: 600;


}


.pp-field-value {


    font-size: 0.875rem;


    color: #e9edef;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.pp-hobbies {


    display: flex;


    flex-wrap: wrap;


    gap: 0.3rem;


    justify-content: center;


    margin-top: 0.4rem;


}


.pp-chip {


    display: inline-block;


    padding: 0.2rem 0.6rem;


    background: rgba(0, 168, 132, 0.18);


    color: #06cf9f;


    border-radius: var(--radius-full);


    font-size: 0.75rem;


    font-weight: 500;


    border: 1px solid rgba(0, 168, 132, 0.25);


}


.pp-footer {


    padding: 0.7rem 1rem 1rem;


    border-top: 1px solid rgba(255, 255, 255, 0.06);


    background: rgba(0, 0, 0, 0.15);


}


.pp-full-btn {


    width: 100%;


    padding: 0.55rem 0.8rem;


    border: none;


    border-radius: 8px;


    background: linear-gradient(135deg, #00a884, #008069);


    color: #fff;


    font-size: 0.88rem;


    font-weight: 600;


    cursor: pointer;


    transition: transform 0.15s, box-shadow 0.15s;


    font-family: inherit;


}


.pp-full-btn:hover {


    transform: translateY(-1px);


    box-shadow: 0 4px 14px rgba(0, 168, 132, 0.4);


}


.pp-full-btn:active { transform: translateY(0); }


@media (max-width: 480px) {


    .profile-popover {


        left: 8px !important;


        right: 8px;


        width: auto;


    }


}





.status { font-size: 0.78rem; color: var(--text-secondary); }





/* Chat header user info (avatar + name + status in a row) */


.chat-user-info {


    display: flex;


    align-items: center;


    gap: 0.75rem;


    flex: 1;


    min-width: 0;


    overflow: hidden;


}





.chat-user-info > div {


    display: flex;


    flex-direction: column;


    min-width: 0;


    flex: 1;


}





.chat-user-info > div > span {


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





/* The chat header avatar image (used by selectFriend) */


#chat-avatar {


    width: 42px;


    height: 42px;


    min-width: 42px;


    min-height: 42px;


    max-width: 42px;


    max-height: 42px;


    border-radius: var(--radius-full);


    object-fit: cover;


    background: var(--gradient-primary);


    flex-shrink: 0;


    display: block;


}





.chat-actions { display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center; }


.chat-actions .bubble-btn { width: 38px; height: 38px; border-radius: 14px; font-size: 1rem; }





/* Sidebar actions */


.sidebar-actions {


    display: flex;


    gap: 0.4rem;


    padding: 0.5rem 1.125rem;


    border-top: 1px solid var(--border);


}





/* Blocked users, map, etc. */


.blocked-users-list,


.map-friend-list,


.group-member-list,


.group-members-list {


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


}
/* v141cv94: Group-Modal Search + Badges */
.group-member-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}
.group-member-search:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
}
.gm-name { display: inline-flex; align-items: center; gap: 0.4em; }
.gm-online-dot {
    width: 8px;
    height: 8px;
    background: var(--success, #22c55e);
    border-radius: 50%;
    display: inline-block;
}
.gm-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}
.gm-friend { background: var(--success, #22c55e); color: #fff; }
.gm-pending { background: var(--warning, #f59e0b); color: #fff; }
.group-member-row { display: flex; align-items: center; gap: 0.5rem; }






/* Avatar upload area */


.avatar-upload {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 0.6rem;


    padding: 1rem;


}





.avatar-upload img,


#settings-avatar-preview {


    width: 100px;


    height: 100px;


    min-width: 100px;


    min-height: 100px;


    max-width: 100px;


    max-height: 100px;


    border-radius: var(--radius-full);


    object-fit: cover;


    border: 3px solid var(--primary);


    box-shadow: var(--shadow-glow);


    display: block;


}





.upload-btn {


    background: var(--bg-input);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.55rem 1rem;


    font-size: 0.875rem;


    cursor: pointer;


    transition: all var(--transition);


    font-family: inherit;


    font-weight: 500;


}





.upload-btn:hover {


    border-color: var(--primary);


    background: var(--bg-hover);


}





.upload-hint {


    font-size: 0.75rem;


    color: var(--text-muted);


}





/* Incoming call UI — wird jetzt innerhalb des Call-Containers angezeigt (siehe unten) */


.incoming-call-ui {


    position: absolute;


    inset: 0;


    background: var(--bg-deep);


    z-index: 3;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    padding: var(--space-5);


    gap: var(--space-4);


}


.incoming-call-ui.hidden { display: none !important; }


.incoming-call-avatar {


    width: 80px;


    height: 80px;


    border-radius: var(--radius-full);


    background: var(--gradient-primary);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 2.5rem;


    flex-shrink: 0;


    overflow: hidden;


}


.incoming-call-avatar img { width: 100%; height: 100%; object-fit: cover; }


.incoming-call-info {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: var(--space-2);


    text-align: center;


}


.incoming-call-name { font-weight: var(--weight-bold); color: var(--text-primary); font-size: var(--text-lg); }


.incoming-call-type { font-size: var(--text-sm); color: var(--text-secondary); }


.incoming-call-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }





.call-action {


    min-width: 110px;


    height: 44px;


    padding: 0 16px;


    border-radius: 22px;


    border: none;


    cursor: pointer;


    font-size: 0.9375rem;


    font-weight: 700;


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 6px;


    transition: all var(--transition);


}





.call-action.accept { background: var(--success); color: white; }


.call-action.reject { background: var(--danger); color: white; }


.call-action:hover { transform: scale(1.05); }


.call-action:active { transform: scale(0.95); }





/* Call-Modal: jetzt nur noch ein transparenter Wrapper, das Call-Widget


   ist die schwebende Box rechts unten. So bleibt der Chat sichtbar. */


#call-modal {


    position: fixed;


    inset: 0;


    background: transparent;


    backdrop-filter: none;


    -webkit-backdrop-filter: none;


    z-index: var(--z-call);


    display: block;


    padding: 0;


    pointer-events: none; /* Klicks gehen durch zum Chat, nur das Widget fängt sie */


}


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


#call-modal > * { pointer-events: auto; } /* Widget selbst fängt wieder Klicks */





/* v100: Eingehender Anruf — Call-Modal blockiert Klicks (sonst geht Klick durch zum Chat)


   Das ist wichtig damit der Annehmen-Button auf Mobile zuverlaessig klickbar ist */


#call-modal:not(.hidden) { pointer-events: auto !important; background: rgba(0, 0, 0, 0.4) !important; }





/* ============================================================================


   CALL CONTAINER (Phase CC — Floating Widget)


   ----------------------------------------------------------------------------


   Calls laufen jetzt als schwebendes Widget (rechts unten) statt als


   Vollbild-Overlay. So bleibt der Chat sichtbar während eines Anrufs.


   ============================================================================ */


.call-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: calc(100vw - 32px);
    height: 700px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    /* v141cv158: changed from PiP widget bottom-right to centered 600x700 modal */
    background: var(--bg-card);
    backdrop-filter: var(--glass-md);
    -webkit-backdrop-filter: var(--glass-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-call);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cc-callIn var(--dur-base) var(--ease-ios);
}


@keyframes cc-callIn {


    from { opacity: 0; transform: translateY(20px) scale(0.95); }


    

}





.call-container.hidden { display: none !important; }





/* Header kompakter */


.call-header {


    padding: var(--space-3) var(--space-4);


    background: var(--bg-elevated);


    border-bottom: 1px solid var(--border);


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: var(--space-2);


    flex-shrink: 0;


}


#call-title {


    font-size: var(--text-sm);


    font-weight: var(--weight-semibold);


    color: var(--text-primary);


}


.call-status {


    color: var(--text-secondary);


    font-weight: var(--weight-medium);


    display: flex;


    align-items: center;


    gap: var(--space-2);


    font-size: var(--text-xs);


}


.call-header #call-close {


    width: 28px;


    height: 28px;


    border-radius: var(--radius-full);


    background: transparent;


    border: none;


    color: var(--text-secondary);


    font-size: 1rem;


    cursor: pointer;


    display: grid;


    place-items: center;


    transition: var(--transition-fast);


}


.call-header #call-close:hover {


    background: var(--bg-hover);


    color: var(--text-primary);


}





/* Video-Container: relative, füllt den Raum zwischen Header und Controls */


.call-video {


    flex: 1 1 auto;


    display: flex;


    align-items: center;


    justify-content: center;


    background: #000;


    position: relative;


    overflow: hidden;


    min-height: 0;


}





/* Remote-Video als Hauptbild: contain, damit nichts abgeschnitten wird */


#remote-video {


    width: 100%;


    height: 100%;


    object-fit: contain;


    background: #000;


    display: block;


}





/* Local-Video als Picture-in-Picture oben rechts im Widget */


#local-video {


    position: absolute;


    top: var(--space-3);


    right: var(--space-3);


    width: 140px;


    height: 200px;


    object-fit: cover;


    background: #000;


    border: 2px solid rgba(255, 255, 255, 0.5);


    border-radius: var(--radius-sm);


    z-index: 2;


    box-shadow: var(--shadow-md);


    /* Spiegel-Effekt */


    transform: scaleX(-1);


    -webkit-transform: scaleX(-1);


}





/* Audio-only: hide videos, show avatar placeholder */


.call-video.audio-only #remote-video,


.call-video.audio-only #local-video { display: none; }


.call-video.audio-only::before{


  content: '';


  display: inline-block;


  width: 1em;


  height: 1em;


  vertical-align: middle;


  background-color: currentColor;


  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a3%203%200%200%200-3%203v7a3%203%200%200%200%206%200V5a3%203%200%200%200-3-3Z%22%2F%3E%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%2222%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a3%203%200%200%200-3%203v7a3%203%200%200%200%206%200V5a3%203%200%200%200-3-3Z%22%2F%3E%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%2222%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


  margin-right: 0.4em;


 }





.call-video video {


    max-width: 100%;


    max-height: 100%;


    background: #000;


    border-radius: var(--radius-sm);


}





/* Incoming-Call-UI innerhalb des Call-Containers: full overlay */


.incoming-call-ui {


    position: absolute;


    inset: 0;


    background: var(--bg-deep);


    z-index: 3;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    padding: var(--space-5);


    gap: var(--space-4);


}


.incoming-call-ui.hidden { display: none !important; }


.incoming-call-info {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: var(--space-2);


    text-align: center;


}


.incoming-call-avatar {


    width: 80px;


    height: 80px;


    border-radius: var(--radius-full);


    background: var(--gradient-primary);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 2.5rem;


    flex-shrink: 0;


    overflow: hidden;


}


.incoming-call-avatar img { width: 100%; height: 100%; object-fit: cover; }


.incoming-call-name {


    font-weight: var(--weight-bold);


    color: var(--text-primary);


    font-size: var(--text-lg);


}


.incoming-call-type {


    font-size: var(--text-sm);


    color: var(--text-secondary);


}


.incoming-call-actions {


    display: flex;


    gap: var(--space-3);


}





/* v141cv159: Mobile: Call-Widget fullscreen (war PiP bottom-right mit fehlendem Annehmen-Button) */
@media (max-width: 768px) {
    .call-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        transform: none;
        border-radius: 0;
        border: none;
    }
    #local-video {
        width: 100px;
        height: 140px;
    }
}





.call-controls {


    padding: 1rem;


    display: flex;


    gap: 0.6rem;


    justify-content: center;


    background: var(--bg-card);


    border-top: 1px solid var(--border);


}





.call-btn {


    width: 48px;


    height: 48px;


    border-radius: var(--radius-full);


    border: none;


    cursor: pointer;


    font-size: 1.25rem;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: all var(--transition);


    background: var(--bg-input);


    color: var(--text-primary);


}





.call-btn:hover { background: var(--bg-elevated); transform: scale(1.05); }


.call-btn.end { background: var(--danger); color: white; }


.call-btn.accept { background: var(--success); color: white; }


.call-btn.reject { background: var(--danger); color: white; }





/* Translate picker */


.translate-search-wrap {


    position: relative;


    margin-bottom: 0.7rem;


}





.translate-lang-list {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));


    gap: 0.5rem;


    max-height: 320px;


    overflow-y: auto;


    padding: 0.25rem;


}





/* Location options */


.location-options {


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


    margin: 0.5rem 0;


}





/* Admin section naming aliases (HTML uses admin-* but CSS uses .admin-*) */


.admin-body { padding: 1.25rem 1.5rem 1.5rem; }


.admin-list { display: flex; flex-direction: column; gap: 0.5rem; }


.admin-search {


    flex: 1; min-width: 180px;


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.55rem 0.875rem;


    color: var(--text-primary);


    font-size: 0.88rem;


    font-family: inherit;


    outline: none;


}


.admin-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }


.admin-select, .admin-form select {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 0.55rem 0.875rem;


    color: var(--text-primary);


    font-size: 0.88rem;


    font-family: inherit;


    outline: none;


}


.admin-stats-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


    gap: 1rem;


    margin-bottom: 1.5rem;


}


.admin-panel { display: flex; flex-direction: column; gap: 0.75rem; }


.admin-form { display: flex; flex-direction: column; gap: 0.75rem; }





/* ==== ADMIN: PER-USER ZAHNRAD DETAIL ==== */


.admin-usr-detail {


    display: flex;


    flex-direction: column;


    gap: 14px;


    padding: 4px 0 20px;


}


.admin-usr-header {


    display: flex;


    align-items: center;


    gap: 14px;


    padding: 16px;


    background: linear-gradient(135deg, var(--bg-2, #1a1d24) 0%, var(--bg-3, #14171c) 100%);


    border: 1px solid var(--border);


    border-radius: 14px;


}


.admin-usr-avatar {


    width: 64px;


    height: 64px;


    flex-shrink: 0;


    border-radius: 16px;


    background: var(--accent);


    color: white;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.5rem;


    font-weight: 800;


    overflow: hidden;


}


.admin-usr-avatar img { width: 100%; height: 100%; object-fit: cover; }


.admin-usr-header h3 {


    margin: 0 0 6px;


    font-size: 1.15rem;


    font-weight: 700;


}


.admin-usr-username {


    font-size: 0.875rem;


    color: var(--text-secondary);


    font-weight: 400;


    margin-left: 6px;


}


.admin-usr-meta {


    display: flex;


    flex-wrap: wrap;


    gap: 6px 14px;


    font-size: 0.78rem;


    color: var(--text-secondary);


}


.admin-usr-meta code {


    background: var(--bg-3, #14171c);


    padding: 1px 5px;


    border-radius: 4px;


    font-size: 0.72rem;


}


.badge {


    padding: 2px 8px;


    border-radius: 6px;


    font-size: 0.72rem;


    font-weight: 700;


}


.badge.ok { background: rgba(34, 197, 94, 0.2); color: #22c55e; }


.badge.off { background: rgba(120, 120, 130, 0.2); color: var(--text-secondary); }


.admin-usr-kpis {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));


    gap: 10px;


}


.admin-usr-kpi {


    background: var(--bg-2, #1a1d24);


    border: 1px solid var(--border);


    border-radius: 12px;


    padding: 14px 12px;


    text-align: center;


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.admin-usr-kpi-val {


    font-size: 1.5rem;


    font-weight: 800;


    color: var(--accent);


}


.admin-usr-kpi-lbl {


    font-size: 0.75rem;


    color: var(--text-secondary);


    text-transform: uppercase;


    letter-spacing: 0.05em;


}


.admin-usr-section {


    background: var(--bg-2, #1a1d24);


    border: 1px solid var(--border);


    border-radius: 14px;


    padding: 16px;


    display: flex;


    flex-direction: column;


    gap: 8px;


}


.admin-usr-section h4 {


    margin: 0 0 6px;


    font-size: 0.875rem;


    font-weight: 700;


    color: var(--text-primary);


    text-transform: uppercase;


    letter-spacing: 0.05em;


}


.admin-usr-section.danger-zone {


    border-color: rgba(231, 76, 60, 0.35);


    background: rgba(231, 76, 60, 0.05);


}


.admin-usr-section.danger-zone h4 { color: var(--wa-call-red, #e74c3c); }


.admin-form-inline {


    display: flex;


    gap: 8px;


    align-items: center;


}


.admin-form-inline input { flex: 1; }


.sidebar-action-btn.danger {


    background: var(--wa-call-red, #e74c3c);


    color: white;


    border-color: var(--wa-call-red, #e74c3c);


}


.sidebar-action-btn.danger:hover { filter: brightness(1.15); transform: translateY(-1px); }


.admin-empty {


    padding: 40px 20px;


    text-align: center;


    color: var(--text-secondary);


    font-size: 0.875rem;


}


.admin-empty.danger { color: var(--wa-call-red, #e74c3c); }


.admin-form-row-wide {


    display: flex;


    flex-direction: column;


    gap: 0.4rem;


    padding: 0.75rem 0;


    border-bottom: 1px solid var(--border);


}


.admin-form-row-wide label {


    color: var(--text-primary);


    font-size: 0.875rem;


    font-weight: 500;


}


.admin-form-row-wide input,


.admin-form-row-wide select,


.admin-form-row-wide textarea {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius-sm);


    padding: 0.5rem 0.75rem;


    color: var(--text-primary);


    font-size: 0.88rem;


    font-family: inherit;


    outline: none;


}


.admin-form-row-wide input:focus,


.admin-form-row-wide select:focus { border-color: var(--primary); }





/* Auth h1 needs explicit styling because the global h1 style may not apply */


.auth-container h1 {


    font-size: 1.85rem;


    font-weight: 800;


    text-align: center;


    margin-bottom: 0.4rem;


    background: var(--gradient-primary);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


    letter-spacing: -0.02em;


    color: transparent;


}





/* Mobile-only helper */


@media (max-width: 768px) {


    .mobile-only { display: initial; }


    .icon-btn.mobile-only { display: flex; }


}


@media (min-width: 769px) {


    .mobile-only { display: none !important; }


    .icon-btn.mobile-only { display: none !important; }


}





/* ===== Profile Modal ===== */


.profile-modal-content {


    max-width: 640px;


    max-height: 90vh;


    overflow-y: auto;


    padding: 0;


}





.profile-cover {


    height: 140px;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    background-size: cover;


    background-position: center;


    border-radius: var(--radius) var(--radius) 0 0;


}





.profile-modal-content .modal-header {


    position: relative;


    margin-top: -50px;


    padding: 0 1.5rem 0 1.5rem;


    background: transparent;


    border: none;


}





.profile-view {


    padding: 0 1.5rem 1.5rem 1.5rem;


}





.profile-view-header {


    display: flex;


    gap: 1rem;


    align-items: center;


    margin-top: -40px;


    margin-bottom: 1.5rem;


    flex-wrap: wrap;


}





.profile-view-avatar {


    width: 88px;


    height: 88px;


    min-width: 88px;


    border-radius: 50%;


    border: 4px solid var(--bg-elevated);


    box-shadow: var(--shadow-md);


    object-fit: cover;


    background: var(--bg-elevated);


}





.profile-view-name {


    margin: 0;


    font-size: 1.5rem;


    font-weight: 700;


    color: var(--text-primary);


}





.profile-view-username {


    color: var(--text-secondary);


    font-size: 0.875rem;


    margin-top: 2px;


}





.profile-view-status {


    color: var(--text-muted);


    font-size: 0.88rem;


    font-style: italic;


    margin-top: 4px;


}





.profile-view-fields {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 0.7rem;


    margin-bottom: 1.25rem;


}





.profile-field {


    display: flex;


    align-items: flex-start;


    gap: 0.7rem;


    padding: 0.7rem;


    background: var(--bg-input);


    border-radius: var(--radius);


    border: 1px solid var(--border);


}





.profile-field-icon {


    font-size: 1.25rem;


    flex-shrink: 0;


    line-height: 1.2;


}





.profile-field-body {


    flex: 1;


    min-width: 0;


}





.profile-field-label {


    font-size: 0.72rem;


    color: var(--text-muted);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 2px;


}





.profile-field-value {


    color: var(--text-primary);


    font-size: 0.92rem;


    word-wrap: break-word;


}





.profile-field-value a {


    color: var(--primary);


    text-decoration: none;


}





.profile-field-value a:hover {


    text-decoration: underline;


}





.profile-empty {


    grid-column: 1 / -1;


    text-align: center;


    padding: 2rem 1rem;


    color: var(--text-secondary);


    background: var(--bg-input);


    border-radius: var(--radius);


    border: 1px dashed var(--border);


}





/* Full-width fields (textareas) */


.profile-field-full {


    grid-column: 1 / -1;


}





/* Profile Edit Form */


.profile-edit-form {


    padding: 0 1.5rem 1.5rem 1.5rem;


}





.profile-edit-section {


    background: var(--bg-input);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 1rem 1.125rem;


    margin-bottom: 0.875rem;


}





.profile-edit-section h4 {


    margin: 0 0 0.7rem 0;


    color: var(--text-primary);


    font-size: 0.9375rem;


}





.profile-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 0.7rem;


}





.profile-grid > label,


.profile-edit-section > label {


    display: block;


    color: var(--text-secondary);


    font-size: 0.82rem;


    margin: 0;


}





.profile-grid > label input,


.profile-grid > label select,


.profile-grid > label textarea,


.profile-edit-section > label input,


.profile-edit-section > label select,


.profile-edit-section > label textarea {


    width: 100%;


    margin-top: 4px;


    padding: 0.5rem 0.7rem;


    background: var(--bg-elevated);


    border: 1px solid var(--border);


    border-radius: 8px;


    color: var(--text-primary);


    font-size: 0.92rem;


    font-family: inherit;


}





.profile-edit-avatar-row {


    display: flex;


    gap: 1rem;


    align-items: center;


    flex-wrap: wrap;


}





.profile-edit-avatar {


    width: 64px;


    height: 64px;


    min-width: 64px;


    border-radius: 50%;


    object-fit: cover;


    border: 2px solid var(--primary);


}





.profile-edit-avatar-actions {


    display: flex;


    flex-direction: column;


    gap: 0.4rem;


    flex: 1;


}





@media (max-width: 600px) {


    .profile-view-fields,


    .profile-grid {


        grid-template-columns: 1fr;


    }


    .profile-view-header {


        flex-direction: column;


        text-align: center;


    }


}





/* ===== Map empty state ===== */


.map-empty-state {


    position: absolute;


    top: 60px;


    left: 50%;


    transform: translateX(-50%);


    background: var(--bg-elevated);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 1.5rem 1.5rem;


    z-index: 500;


    display: flex;


    flex-direction: column;


    align-items: center;


    box-shadow: var(--shadow-md);


    max-width: 360px;


    text-align: center;


}





.map-empty-state.hidden { display: none; }





/* ===== Map Container (WICHTIG: explizite Höhe für Leaflet) ===== */


#map-container {


    width: 100%;


    height: 60vh;          /* Desktop: 60% des Viewports */


    min-height: 400px;


    background: var(--bg-input);


    position: relative;


    z-index: 1;


}





.map-actions {


    display: flex;


    gap: 0.5rem;


    padding: 0.6rem 0.8rem;


    flex-wrap: wrap;


}





.map-actions .btn {


    flex: 1;


    min-width: 140px;


    font-size: 0.875rem;


    padding: 0.5rem 0.8rem;


}





/* ===== Search results subheaders ===== */


.search-results-subheader {


    padding: 0.45rem 0.875rem 0.3rem 0.875rem;


    font-size: 0.7rem;


    color: var(--text-muted);


    text-transform: uppercase;


    letter-spacing: 0.5px;


    background: rgba(124, 58, 237, 0.08);


    border-bottom: 1px solid var(--border);


    font-weight: 600;


}





.search-results-subheader:first-of-type {


    border-top: 1px solid var(--border);


}





.search-result-badge.pending {


    background: rgba(245, 158, 11, 0.18);


    color: #f59e0b;


    font-size: 0.7rem;


    padding: 2px 8px;


    border-radius: 10px;


    font-weight: 600;


}





.search-result-item.is-pending {


    opacity: 0.7;


}





/* ===== Add-friend button in search ===== */


.search-container {


    display: flex;


    align-items: center;


    gap: 0.4rem;


}





.add-friend-btn {


    flex-shrink: 0;


    width: 36px;


    height: 36px;


    min-width: 36px;


    border-radius: 50%;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    color: white;


    border: none;


    cursor: pointer;


    font-size: 1.125rem;


    display: flex;


    align-items: center;


    justify-content: center;


    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);


    transition: all 0.2s ease;


}





.add-friend-btn:hover {


    transform: scale(1.08);


    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.5);


}





.add-friend-btn:active {


    transform: scale(0.95);


}





.add-friend-btn .badge {


    position: absolute;


    top: -4px;


    right: -4px;


    background: #ef4444;


    color: white;


    border-radius: 50%;


    min-width: 18px;


    height: 18px;


    font-size: 0.7rem;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 0 4px;


    border: 2px solid var(--bg-elevated);


}





#user-search { flex: 1; padding-left: 0.875rem; }





/* ===== New-users banner ===== */



.banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.new-users-banner {


    margin: 0 0.7rem 0.4rem 0.7rem;


    padding: 0.6rem 0.7rem;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.18));


    border: 1px solid rgba(124, 58, 237, 0.4);


    border-radius: var(--radius);


    display: flex;


    align-items: center;


    gap: 0.5rem;


    font-size: 0.875rem;


    color: var(--text-primary);


    animation: banner-slide-in 0.3s ease-out;


}





.new-users-banner.hidden { display: none; }





.new-users-banner #new-users-banner-text { flex: 1; }





.new-users-banner button {


    border: none;


    background: var(--primary);


    color: white;


    padding: 0.3rem 0.7rem;


    border-radius: 6px;


    font-size: 0.8rem;


    cursor: pointer;


    font-weight: 600;


}





.new-users-banner button:hover { opacity: 0.85; }





.new-users-banner #new-users-banner-close {


    background: transparent;


    color: var(--text-secondary);


    padding: 0.2rem 0.4rem;


    font-size: 1rem;


}





@keyframes banner-slide-in {


    from { opacity: 0; transform: translateY(-8px); }


    to { opacity: 1; transform: translateY(0); }


}





/* ===== Friend requests banner ===== */


.friend-requests-banner {


    margin: 0 0.7rem 0.4rem 0.7rem;


    padding: 0.6rem 0.7rem;


    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(59, 130, 246, 0.18));


    border: 1px solid rgba(34, 197, 94, 0.5);


    border-radius: var(--radius);


    display: flex;


    align-items: center;


    gap: 0.5rem;


    font-size: 0.875rem;


    color: var(--text-primary);


    animation: banner-slide-in 0.3s ease-out;


}





.friend-requests-banner.hidden { display: none; }





.friend-requests-banner #friend-requests-banner-text { flex: 1; }





.friend-requests-banner button {


    border: none;


    background: var(--success, #22c55e);


    color: white;


    padding: 0.3rem 0.7rem;


    border-radius: 6px;


    font-size: 0.8rem;


    cursor: pointer;


    font-weight: 600;


}





.friend-requests-banner button:hover { opacity: 0.85; }





/* v141bs Bug-Hunt R6: X close button (X zum Schließen des Banners) */


.friend-requests-banner .banner-close-btn {


    background: transparent;


    color: var(--text-primary);


    font-size: 1rem;


    line-height: 1;


    padding: 0.2rem 0.5rem;


    border-radius: 50%;


    min-width: 24px;


    height: 24px;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0.7;


    transition: opacity 0.15s, background 0.15s;


}





.friend-requests-banner .banner-close-btn:hover {


    opacity: 1;


    background: rgba(0, 0, 0, 0.1);


}





/* ===== Friend requests modal ===== */


.friend-requests-modal-content {


    max-width: 420px;


    width: 92vw;


    max-height: 80vh;


    display: flex;


    flex-direction: column;


}





.friend-requests-list {


    padding: 0.5rem 1rem 1rem;


    overflow-y: auto;


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


}





.friend-request-card {


    display: flex;


    align-items: center;


    gap: 0.75rem;


    padding: 0.6rem 0.75rem;


    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));


    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));


    border-radius: 12px;


    transition: background 0.15s ease;


}





.friend-request-card:hover {


    background: var(--bg-hover, rgba(255, 255, 255, 0.08));


}





.friend-request-avatar {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    object-fit: cover;


    flex-shrink: 0;


}





.friend-request-info {


    flex: 1;


    min-width: 0;


    display: flex;


    flex-direction: column;


    gap: 0.15rem;


}





.friend-request-name {


    font-weight: 600;


    color: var(--text-primary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





.friend-request-sub {


    font-size: 0.78rem;


    color: var(--text-secondary);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





.friend-request-actions {


    display: flex;


    gap: 0.4rem;


    flex-shrink: 0;


}





.friend-request-accept,


.friend-request-decline {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    border: none;


    cursor: pointer;


    font-size: 1.125rem;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: transform 0.1s ease, opacity 0.15s ease;


    color: white;


}





.friend-request-accept {


    background: #22c55e;


}





.friend-request-decline {


    background: #ef4444;


}





.friend-request-accept:hover,


.friend-request-decline:hover {


    transform: scale(1.08);


    opacity: 0.92;


}





.friend-request-accept:active,


.friend-request-decline:active {


    transform: scale(0.96);


}





/* ===== Location message ===== */


.message-location {


    display: flex;


    flex-direction: column;


    gap: 0.4rem;


    min-width: 200px;


}





.location-header {


    font-weight: 600;


    font-size: 0.875rem;


}





.location-address {


    font-size: 0.9375rem;


    line-height: 1.3;


    color: var(--text-primary);


    word-break: break-word;


}





.location-coords {


    font-size: 0.8rem;


    color: var(--text-secondary);


    font-family: monospace;


}





.location-map {


    margin-top: 0.2rem;


}





.location-map a {


    display: inline-block;


    padding: 0.35rem 0.7rem;


    background: rgba(99, 102, 241, 0.18);


    color: #6366f1;


    border-radius: 8px;


    text-decoration: none;


    font-size: 0.875rem;


    font-weight: 600;


    transition: background 0.15s ease;


}





.location-map a:hover {


    background: rgba(99, 102, 241, 0.32);


}





.location-duration {


    font-size: 0.75rem;


    color: var(--text-secondary);


}





/* ============================================================================


   PHASE 1 - V2: WhatsApp-style sidebar, dashboard, location toggle


   ============================================================================ */





/* === Top dashboard / KPI cards (kompakt, WhatsApp-Style) === */


.wa-dashboard {


    display: grid;


    grid-template-columns: repeat(5, 1fr);


    gap: 3px;


    padding: 4px 5px 5px;


    background: var(--wa-bg-2);


    border-bottom: 1px solid var(--wa-divider);


}


.wa-kpi {


    background: var(--kpi-bg);


    border: 1px solid var(--kpi-border);


    border-radius: 8px;


    padding: 3px 2px 2px;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 1px;


    min-height: 42px;


    cursor: pointer;


    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;


    position: relative;


    overflow: hidden;


    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);


}


.wa-kpi:hover {


    transform: translateY(-1px);


    background: rgba(58, 62, 92, 0.7);


    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.15);


}


.wa-kpi .kpi-label {


    font-size: 0.52rem;


    text-transform: uppercase;


    letter-spacing: 0.2px;


    color: var(--wa-text-muted);


    font-weight: 600;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


    max-width: 100%;


}


.wa-kpi .kpi-value {


    font-size: 0.92rem;


    font-weight: 700;


    color: var(--wa-text);


    line-height: 1;


    min-height: 1em;


}


.wa-kpi .kpi-icon {


    font-size: 0.78rem;


    opacity: 0.75;


    line-height: 1;


}


.wa-kpi.kpi-messages { border-top: 2px solid var(--kpi-1); }


.wa-kpi.kpi-requests  { border-top: 2px solid var(--kpi-2); }


.wa-kpi.kpi-calls     { border-top: 2px solid var(--kpi-3); }


.wa-kpi.kpi-friends   { border-top: 2px solid var(--kpi-4); }


.wa-kpi.kpi-status    { border-top: 2px solid var(--kpi-5); }


/* v111.6: Action-KPIs (Status erstellen, Freunde finden) */


.wa-kpi.kpi-find-friends  { border-top: 2px solid #06b6d4; }





/* v111.8.9: Mini-Badge an Freunde-KPI für versteckte Chats */


.kpi-mini-badge {


    position: absolute;


    top: 2px;


    right: 4px;


    min-width: 16px;


    height: 16px;


    padding: 0 4px;


    border-radius: 8px;


    background: linear-gradient(135deg, #f43f5e, #ec4899);


    color: #fff;


    font-size: 0.65rem;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    box-shadow: 0 2px 5px rgba(244, 63, 94, 0.4);


    border: 1.5px solid var(--wa-bg-2);


    line-height: 1;


}


.kpi-mini-badge.hidden { display: none !important; }





/* === Sidebar section tabs (Chats / Status / Calls) === */


.wa-sidebar-tabs {


    display: flex;


    background: var(--wa-panel);


    border-bottom: 1px solid var(--wa-divider);


    padding: 0 8px;


    justify-content: center;


}


.wa-sidebar-tab {


    flex: 0 0 auto;


    padding: 12px 28px;


    background: transparent;


    border: none;


    color: var(--wa-text-secondary);


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    position: relative;


    transition: color var(--transition-fast);


    text-transform: uppercase;


    letter-spacing: 0.5px;


}


.wa-sidebar-tab:hover { color: var(--wa-text); }


.wa-sidebar-tab.active { color: var(--wa-green); }


.wa-sidebar-tab.active::after {


    content: "";


    position: absolute;


    bottom: 0;


    left: 25%;


    right: 25%;


    height: 3px;


    background: var(--wa-green);


    border-radius: 3px 3px 0 0;


}


.wa-sidebar-tab .tab-badge {


    display: inline-block;


    margin-left: 4px;


    background: var(--wa-unread);


    color: var(--bg-deep);


    font-size: 0.65rem;


    padding: 1px 5px;


    border-radius: 8px;


    font-weight: 700;


    min-width: 16px;


    text-align: center;


}





/* === Standort-Block in den Einstellungen === */


.settings-location-block {


    background: var(--wa-bg-2);


    border: 1px solid var(--wa-divider);


    border-radius: 10px;


    padding: 10px 12px;


    margin: 8px 0 12px;


    display: flex;


    flex-direction: column;


    gap: 8px;


}


.settings-location-block label.toggle-row {


    margin: 0;


    padding: 0;


    background: none;


}


.settings-location-block label {


    display: flex;


    flex-direction: column;


    gap: 4px;


    font-size: 0.875rem;


    color: var(--wa-text-muted);


}


.settings-location-block label select,


.settings-location-block label input {


    background: var(--wa-panel);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    padding: 6px 8px;


    font-size: 0.875rem;


}


.settings-location-status {


    font-size: 0.875rem;


    color: var(--wa-green-light);


    font-weight: 500;


    padding: 4px 0;


}





/* === Profile card (top of sidebar) === */


.wa-profile-card {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 12px 16px;


    background: var(--wa-panel);


    border-bottom: 1px solid var(--wa-divider);


    cursor: pointer;


    transition: background var(--transition-fast);


}


.wa-profile-card:hover { background: var(--wa-panel-2); }


.wa-profile-card .avatar {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    background: var(--wa-green);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 600;


    font-size: 1.125rem;


    flex-shrink: 0;


    overflow: hidden;


}


.wa-profile-card .avatar img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}


.wa-profile-card .profile-info { flex: 1; min-width: 0; }


.wa-profile-card .profile-name {


    font-size: 0.9375rem;


    font-weight: 600;


    color: var(--wa-text);


    margin: 0;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.wa-profile-card .profile-status {


    font-size: 0.8rem;


    color: var(--wa-text-secondary);


    margin: 2px 0 0;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.wa-profile-card .profile-chevron {


    color: var(--wa-text-muted);


    font-size: 1.25rem;


}





/* === Location toggle card === */


.location-toggle-card {


    margin: 12px 16px;


    padding: 14px 16px;


    background: var(--wa-panel);


    border: 1px solid var(--wa-divider);


    border-radius: 12px;


    display: flex;


    flex-direction: column;


    gap: 10px;


}


.location-toggle-card .loc-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 10px;


}


.location-toggle-card .loc-title {


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.location-toggle-card .loc-title strong {


    color: var(--wa-text);


    font-size: 0.9375rem;


    font-weight: 600;


}


.location-toggle-card .loc-title small {


    color: var(--wa-text-muted);


    font-size: 0.75rem;


}





/* iOS-style toggle */


.wa-switch {


    position: relative;


    width: 46px;


    height: 26px;


    flex-shrink: 0;


}


.wa-switch input {


    opacity: 0;


    width: 0;


    height: 0;


}


.wa-switch .slider {


    position: absolute;


    inset: 0;


    background: var(--wa-panel-2);


    border-radius: 26px;


    transition: background var(--transition);


    cursor: pointer;


}


.wa-switch .slider::before {


    content: "";


    position: absolute;


    width: 20px;


    height: 20px;


    left: 3px;


    top: 3px;


    background: #fff;


    border-radius: 50%;


    transition: transform var(--transition);


    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);


}


.wa-switch input:checked + .slider { background: var(--wa-green); }


.wa-switch input:checked + .slider::before { transform: translateX(20px); }





.location-toggle-card .loc-actions {


    display: flex;


    gap: 8px;


    flex-wrap: wrap;


}


.loc-btn {


    flex: 1;


    min-width: 0;


    padding: 8px 10px;


    background: var(--wa-panel-2);


    border: 1px solid var(--wa-divider);


    color: var(--wa-text);


    border-radius: 8px;


    font-size: 0.8rem;


    font-weight: 500;


    cursor: pointer;


    transition: background var(--transition-fast);


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.loc-btn:hover { background: var(--wa-hover); }


.loc-btn.danger { color: var(--wa-call-red); }


.loc-btn.primary {


    background: var(--wa-green);


    border-color: var(--wa-green);


    color: #fff;


}


.loc-btn.primary:hover { background: var(--wa-green-dark); }





.location-toggle-card .loc-status {


    font-size: 0.75rem;


    color: var(--wa-text-muted);


    display: flex;


    align-items: center;


    gap: 6px;


}


.location-toggle-card .loc-status::before {


    content: "";


    width: 8px;


    height: 8px;


    border-radius: 50%;


    background: var(--wa-text-muted);


    flex-shrink: 0;


}


.location-toggle-card.is-on .loc-status::before {


    background: var(--wa-green);


    box-shadow: 0 0 6px var(--wa-green);


}


.location-toggle-card.is-on .loc-status { color: var(--wa-green-light); }





/* === Search bar (sidebar top) === */


.wa-search {


    padding: 8px 12px;


    background: var(--wa-bg-2);


    border-bottom: 1px solid var(--wa-divider);


}


.wa-search input {


    width: 100%;


    padding: 8px 12px;


    background: var(--wa-panel);


    border: none;


    border-radius: 8px;


    color: var(--wa-text);


    font-size: 0.875rem;


    outline: none;


}


.wa-search input::placeholder { color: var(--wa-text-muted); }


.wa-search input:focus { background: var(--wa-panel-2); }





/* === Nav rail (sidebar) === */


.wa-nav-rail {


    display: flex;


    flex-direction: column;


    background: var(--wa-panel);


    border-right: 1px solid var(--wa-divider);


    padding: 8px 0;


    gap: 2px;


    overflow-y: auto;


    overflow-x: hidden;


}


.wa-nav-item {


    display: flex;


    align-items: center;


    gap: 14px;


    padding: 10px 18px;


    color: var(--wa-text-secondary);


    cursor: pointer;


    transition: background var(--transition-fast), color var(--transition-fast);


    border-left: 3px solid transparent;


    font-size: 0.875rem;


    font-weight: 500;


    background: transparent;


    border-top: none;


    border-right: none;


    border-bottom: none;


    text-align: left;


    width: 100%;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}


.wa-nav-item:hover { background: var(--wa-hover); color: var(--wa-text); }


.wa-nav-item.active {


    background: var(--wa-hover);


    color: var(--wa-text);


    border-left-color: var(--wa-green);


}


.wa-nav-item .nav-icon { font-size: 1.125rem; min-width: 20px; text-align: center; }


.wa-nav-item .nav-badge {


    margin-left: auto;


    background: var(--wa-unread);


    color: var(--bg-deep);


    font-size: 0.7rem;


    font-weight: 700;


    padding: 1px 6px;


    border-radius: 10px;


    min-width: 18px;


    text-align: center;


}





/* === Modal: Report / Block === */


.wa-modal-overlay {


    position: fixed;


    inset: 0;


    background: rgba(0, 0, 0, 0.6);


    backdrop-filter: blur(4px);


    -webkit-backdrop-filter: blur(4px);


    z-index: 9999;


    display: flex;


    align-items: center;


    justify-content: center;


    animation: wa-fade-in 0.18s ease-out;


}


@keyframes wa-fade-in {


    from { opacity: 0; }


    to   { opacity: 1; }


}


.wa-modal {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-radius: 14px;


    width: min(440px, 92vw);


    max-height: 90vh;


    overflow-y: auto;


    box-shadow: var(--shadow-lg);


    animation: wa-slide-up 0.22s ease-out;


}


@keyframes wa-slide-up {


    from { transform: translateY(20px); opacity: 0; }


    to   { transform: translateY(0); opacity: 1; }


}


.wa-modal-header {


    padding: 18px 24px;


    border-bottom: 1px solid var(--wa-divider);


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 1rem;


}


.wa-modal-header h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }


.wa-modal-body { padding: 20px 24px; }


.wa-modal-footer {


    padding: 14px 24px;


    border-top: 1px solid var(--wa-divider);


    display: flex;


    gap: 0.6rem;


    justify-content: flex-end;


}


.wa-modal-footer button { margin: 0; }





/* v141i: Section-Header + Divider für Modals */


.wa-modal-section { 


    margin: 1.25rem 0 0.75rem; 


    padding-bottom: 0.5rem; 


    border-bottom: 1px solid var(--wa-divider); 


    font-size: 0.75rem; 


    text-transform: uppercase; 


    letter-spacing: 0.5px; 


    color: var(--wa-text-secondary, #8a92a8); 


    font-weight: 600;


    display: flex;


    align-items: center;


    gap: 0.4rem;


}


.wa-modal-section:first-child { margin-top: 0; }


.wa-modal-divider { 


    height: 1px; 


    background: var(--wa-divider); 


    margin: 1rem 0; 


}





/* v141i: Form-Row mehr Abstand */


.wa-modal .form-row { margin-bottom: 1rem; }


.wa-modal .form-row:last-child { margin-bottom: 0; }


.wa-modal input[type="text"],


.wa-modal input[type="email"],


.wa-modal input[type="password"],


.wa-modal input[type="tel"],


.wa-modal input[type="number"],


.wa-modal textarea,


.wa-modal select {


    padding: 0.65rem 0.875rem !important;


    font-size: 0.92rem !important;


}


}


.wa-modal-close {


    background: transparent;


    border: none;


    color: var(--wa-text-muted);


    font-size: 1.5rem;


    cursor: pointer;


    line-height: 1;


    padding: 0;


}


.wa-reason-pick {


    display: grid;


    gap: 6px;


    margin-bottom: 12px;


}


.wa-reason-pick label {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 10px 12px;


    background: var(--wa-panel-2);


    border: 1px solid var(--wa-divider);


    border-radius: 8px;


    cursor: pointer;


    font-size: 0.875rem;


    transition: background var(--transition-fast);


}


.wa-reason-pick label:hover { background: var(--wa-hover); }


.wa-reason-pick input[type="radio"] { accent-color: var(--wa-green); }


.wa-modal textarea {


    width: 100%;


    min-height: 80px;


    padding: 10px 12px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 8px;


    font-family: inherit;


    font-size: 0.875rem;


    resize: vertical;


    outline: none;


}


.wa-modal textarea:focus { border-color: var(--wa-green); }





@media (max-width: 720px) {


    .wa-dashboard { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }


    .wa-kpi { min-height: 56px; padding: 8px 10px; }


    .wa-kpi .kpi-value { font-size: 1.25rem; }


    .wa-kpi .kpi-icon { font-size: 0.9375rem; top: 6px; right: 8px; }


    .wa-nav-rail { display: none; }


    .wa-profile-card { padding: 10px 12px; }


    .location-toggle-card { margin: 8px 10px; padding: 12px; }


}





/* ============================================================================


   PHASE 2 - V2: Status / Stories (24h) UI


   ============================================================================ */





/* === Status feed (horizontal scroll above friend list) === */


.status-feed {


    display: flex;


    gap: 10px;


    padding: 12px 16px;


    background: var(--wa-bg-2);


    border-bottom: 1px solid var(--wa-divider);


    overflow-x: auto;


    overflow-y: hidden;


    -webkit-overflow-scrolling: touch;


    scrollbar-width: none;


}


.status-feed::-webkit-scrollbar { display: none; }





.status-bubble {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 4px;


    cursor: pointer;


    min-width: 64px;


    flex-shrink: 0;


    user-select: none;


    transition: transform var(--transition-fast);


}


.status-bubble:hover { transform: translateY(-1px); }


.status-bubble:active { transform: scale(0.96); }





.status-bubble .sb-avatar {


    width: 56px;


    height: 56px;


    border-radius: 50%;


    background: linear-gradient(135deg, #374045, #2a3942);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 600;


    font-size: 1.25rem;


    position: relative;


    overflow: hidden;


    /* Default ring (brighter = sichtbar auf dunklem BG) */


    border: 2.5px solid #8696a0;


    padding: 2px;


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);


}


.status-bubble .sb-avatar::before {


    content: '';


    position: absolute;


    inset: -4px;


    border-radius: 50%;


    padding: 2px;


    background: conic-gradient(from 0deg, var(--wa-text-muted), var(--wa-text-muted));


    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);


    -webkit-mask-composite: xor;


    mask-composite: exclude;


    pointer-events: none;


    opacity: 0;


    transition: opacity var(--transition);


}


.status-bubble.has-new .sb-avatar::before {


    opacity: 1;


    background: conic-gradient(from 0deg, #00d856, #00a884, #06b6d4, #00d856);


}


.status-bubble.viewed .sb-avatar {


    border-color: var(--wa-text-muted);


}


.status-bubble .sb-avatar img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    border-radius: 50%;


}


.status-bubble .sb-name {


    font-size: 0.7rem;


    color: var(--wa-text-secondary);


    max-width: 64px;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    text-align: center;


}


.status-bubble.is-mine .sb-avatar {


    background: var(--wa-green);


    border: 2px dashed var(--wa-text-muted);


    color: #fff;


}


.status-bubble.is-mine .sb-avatar::after {


    content: '';


    display: inline-block;


    width: 14px;


    height: 14px;


    background-color: #0b141a;


    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


    mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;


    position: absolute;


    top: -2px;


    right: -2px;


    border-radius: 50%;


    width: 18px;


    height: 18px;


}


.status-bubble.is-mine.has-status .sb-avatar {


    background: var(--wa-green);


    border: 2px solid var(--wa-green);


    border-style: solid;


}


.status-bubble.is-mine.has-status .sb-avatar::after { display: none; }





/* === Status viewer (fullscreen) === */


.status-viewer {


    position: fixed;


    inset: 0;


    z-index: 10000;


    background: #000;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    animation: sv-fade-in 0.2s ease-out;


}


@keyframes sv-fade-in { from { opacity: 0; } to { opacity: 1; } }





.status-viewer .sv-header {


    position: absolute;


    top: 0;


    left: 0;


    right: 0;


    padding: 12px 16px;


    z-index: 5;


    color: #fff;


    background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);


}





.status-viewer .sv-progress {


    display: flex;


    gap: 4px;


    margin-bottom: 12px;


}


.status-viewer .sv-progress .seg {


    flex: 1;


    height: 3px;


    background: rgba(255,255,255,0.3);


    border-radius: 4px;


    overflow: hidden;


    position: relative;


}


.status-viewer .sv-progress .seg .fill {


    height: 100%;


    background: #fff;


    width: 0;


    transition: width 0.1s linear;


}


.status-viewer .sv-progress .seg.done .fill { width: 100%; }


.status-viewer .sv-progress .seg.active .fill {


    width: 0;


    animation: sv-progress-fill 5s linear forwards;


}


@keyframes sv-progress-fill { from { width: 0; } to { width: 100%; } }





.status-viewer .sv-user {


    display: flex;


    align-items: center;


    gap: 10px;


    margin-bottom: 4px;


}


.status-viewer .sv-user .avatar {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    background: var(--wa-green);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 600;


    overflow: hidden;


}


.status-viewer .sv-user .avatar img { width: 100%; height: 100%; object-fit: cover; }


.status-viewer .sv-user .name { font-weight: 600; font-size: 0.9375rem; }


.status-viewer .sv-user .time { font-size: 0.75rem; opacity: 0.75; margin-left: 6px; }


.status-viewer .sv-close {


    position: absolute;


    top: 14px;


    right: 14px;


    background: rgba(255,255,255,0.15);


    border: none;


    color: #fff;


    width: 36px;


    height: 36px;


    border-radius: 50%;


    font-size: 18px;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;
    z-index: 10;
}


.status-viewer .sv-close:hover { background: rgba(255,255,255,0.25); }





.status-viewer .sv-content {


    flex: 1;


    width: 100%;


    display: flex;


    align-items: center;


    justify-content: center;


    position: relative;


}


.status-viewer .sv-text {


    max-width: 90%;


    text-align: center;


    padding: 30px 20px;


    color: #fff;


    font-size: 1.5rem;


    font-weight: 600;


    word-wrap: break-word;


    line-height: 1.3;


    text-shadow: 0 1px 4px rgba(0,0,0,0.4);


}


.status-viewer .sv-text.font-classic { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }


.status-viewer .sv-text.font-modern { font-family: 'Helvetica Neue', sans-serif; letter-spacing: -0.5px; }


.status-viewer .sv-text.font-neon { font-family: 'Courier New', monospace; text-shadow: 0 0 12px var(--wa-green), 0 0 24px var(--wa-green); color: #fff; }


.status-viewer .sv-text.font-typewriter { font-family: 'Courier New', monospace; }


.status-viewer .sv-media {


    max-width: 100%;


    max-height: 80vh;


    object-fit: contain;


}





.status-viewer .sv-footer {


    position: absolute;


    bottom: 0;


    left: 0;


    right: 0;


    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));


    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);


    color: #fff;


    display: flex;


    flex-direction: column;


    gap: 8px;


    z-index: 10; /* v141ab: ÜBER sv-nav (z-3), sonst werden Klicks verschluckt */


    pointer-events: auto; /* explizit klickbar */


}


.status-viewer .sv-reactions {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


    justify-content: center;


    margin-bottom: 4px;


}


.status-viewer .sv-reactions .emo {


    background: rgba(255,255,255,0.15);


    border: none;


    color: #fff;


    width: 40px;


    height: 40px;


    border-radius: 50%;


    font-size: 1.25rem;


    cursor: pointer;


    transition: transform var(--transition-fast);


}


.status-viewer .sv-reactions .emo:hover { transform: scale(1.15); background: rgba(255,255,255,0.25); }


.status-viewer .sv-reply-row {


    display: flex;


    gap: 8px;


}


.status-viewer .sv-reply-row input {


    flex: 1;


    padding: 10px 14px;


    border-radius: 24px;


    border: none;


    background: rgba(255,255,255,0.18);


    color: #fff;


    font-size: 0.875rem;


    outline: none;


}


.status-viewer .sv-reply-row input::placeholder { color: rgba(255,255,255,0.6); }


.status-viewer .sv-reply-row button {


    padding: 10px 16px;


    border-radius: 24px;


    background: var(--wa-green);


    color: #fff;


    border: none;


    font-weight: 600;


    cursor: pointer;


}


.status-viewer .sv-reply-row button:disabled { opacity: 0.5; cursor: default; }





.status-viewer .sv-nav {


    position: absolute;


    inset: 0;


    display: flex;


    z-index: 3;


}


.status-viewer .sv-nav .sv-prev,


.status-viewer .sv-nav .sv-next {


    flex: 1;


    background: transparent;


    border: none;


    cursor: pointer;


}


.status-viewer .sv-viewers {


    position: absolute;


    top: 60px;


    right: 14px;


    background: rgba(0,0,0,0.6);


    color: #fff;


    padding: 6px 10px;


    border-radius: 16px;


    font-size: 0.8rem;


    display: flex;


    align-items: center;


    gap: 4px;


    cursor: pointer;


    border: none;
    z-index: 10;
}





/* === Status composer modal === */


.status-composer {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-radius: 14px;


    width: min(500px, 95vw);


    max-height: 90vh;


    overflow-y: auto;


    box-shadow: var(--shadow-lg);


    animation: wa-slide-up 0.22s ease-out;


}


.status-composer .sc-header {


    padding: 14px 18px;


    border-bottom: 1px solid var(--wa-divider);


    display: flex;


    align-items: center;


    justify-content: space-between;


}


.status-composer .sc-header h3 { margin: 0; font-size: 1.0625rem; }


.status-composer .sc-tabs {


    display: flex;


    background: var(--wa-bg-2);


    border-bottom: 1px solid var(--wa-divider);


    overflow-x: auto;


    scrollbar-width: none;


}


.status-composer .sc-tabs::-webkit-scrollbar { display: none; }


.status-composer .sc-tab {


    flex-shrink: 0;


    padding: 10px 14px;


    background: transparent;


    border: none;


    color: var(--wa-text-secondary);


    font-size: 0.875rem;


    font-weight: 500;


    cursor: pointer;


    border-bottom: 2px solid transparent;


    white-space: nowrap;


}


.status-composer .sc-tab.active {


    color: var(--wa-green);


    border-bottom-color: var(--wa-green);


}


.status-composer .sc-body { padding: 16px 18px; }


.status-composer .sc-body textarea {


    width: 100%;


    min-height: 100px;


    padding: 12px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 8px;


    font-family: inherit;


    font-size: 0.9375rem;


    resize: vertical;


    outline: none;


}


.status-composer .sc-body textarea:focus { border-color: var(--wa-green); }





.status-composer .sc-bg-pick {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


    margin-top: 10px;


}


.status-composer .sc-bg-pick button {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    border: 2px solid transparent;


    cursor: pointer;


}


.status-composer .sc-bg-pick button.active { border-color: #fff; }





.status-composer .sc-font-pick {


    display: flex;


    gap: 6px;


    flex-wrap: wrap;


    margin-top: 10px;


}


.status-composer .sc-font-pick button {


    padding: 6px 12px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.8rem;


}


.status-composer .sc-font-pick button.active {


    background: var(--wa-green);


    border-color: var(--wa-green);


    color: #fff;


}





.status-composer .sc-preview {


    margin-top: 14px;


    aspect-ratio: 9 / 16;


    max-height: 320px;


    border-radius: 12px;


    display: flex;


    align-items: center;


    justify-content: center;


    color: #fff;


    font-size: 1.25rem;


    font-weight: 600;


    text-align: center;


    padding: 20px;


    word-wrap: break-word;


    background: var(--wa-bg-2);


    transition: background 0.2s;


}


.status-composer .sc-preview.font-modern { font-family: 'Helvetica Neue', sans-serif; letter-spacing: -0.5px; }


.status-composer .sc-preview.font-neon { font-family: 'Courier New', monospace; text-shadow: 0 0 10px var(--wa-green); }


.status-composer .sc-preview.font-typewriter { font-family: 'Courier New', monospace; }


.status-composer .sc-preview.empty { color: var(--wa-text-muted); }





.status-composer .sc-privacy {


    margin-top: 14px;


    display: flex;


    flex-direction: column;


    gap: 6px;


}


.status-composer .sc-privacy label {


    display: flex;


    align-items: center;


    gap: 8px;


    padding: 8px 10px;


    background: var(--wa-bg-2);


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.875rem;


}


.status-composer .sc-privacy input[type="radio"] { accent-color: var(--wa-green); }





.status-composer .sc-footer {


    padding: 12px 18px;


    border-top: 1px solid var(--wa-divider);


    display: flex;


    gap: 10px;


    justify-content: flex-end;


}


.status-composer .sc-footer button {


    padding: 8px 16px;


    border-radius: 8px;


    font-size: 0.875rem;


    cursor: pointer;


    border: none;


}


.status-composer .sc-footer .sc-cancel {


    background: var(--wa-bg-2);


    color: var(--wa-text-secondary);


}


.status-composer .sc-footer .sc-publish {


    background: var(--wa-green);


    color: #fff;


    font-weight: 600;


}


.status-composer .sc-footer .sc-publish:disabled { opacity: 0.5; cursor: default; }





/* Sticker picker */


.status-composer .sc-stickers {


    display: flex;


    flex-direction: column;


    gap: 10px;


}


.status-composer .sc-stickers .pack-tabs {


    display: flex;


    gap: 4px;


    flex-wrap: wrap;


}


.status-composer .sc-stickers .pack-tabs button {


    padding: 6px 10px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.8rem;


}


.status-composer .sc-stickers .pack-tabs button.active {


    background: var(--wa-green);


    color: #fff;


}


.status-composer .sc-stickers .grid {


    display: grid;


    grid-template-columns: repeat(8, 1fr);


    gap: 4px;


    max-height: 200px;


    overflow-y: auto;


}


.status-composer .sc-stickers .grid button {


    background: transparent;


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    font-size: 1.5rem;


    cursor: pointer;


    padding: 6px 0;


    line-height: 1;


}


.status-composer .sc-stickers .grid button:hover {


    background: var(--wa-hover);


    transform: scale(1.1);


}





/* Poll creator */


.status-composer .sc-poll .poll-opt-input {


    display: flex;


    gap: 6px;


    margin-bottom: 6px;


}


.status-composer .sc-poll .poll-opt-input input {


    flex: 1;


    padding: 8px 10px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    outline: none;


    font-size: 0.875rem;


}


.status-composer .sc-poll .poll-add-btn {


    background: var(--wa-bg-2);


    color: var(--wa-text-secondary);


    border: 1px dashed var(--wa-divider);


    border-radius: 6px;


    padding: 6px;


    cursor: pointer;


    width: 100%;


    font-size: 0.875rem;


}





/* === Visitors list === */


.status-viewers-list {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-radius: 14px;


    width: min(420px, 92vw);


    max-height: 80vh;


    overflow-y: auto;


    box-shadow: var(--shadow-lg);


}


.status-viewers-list .svl-row {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 10px 16px;


    border-bottom: 1px solid var(--wa-divider);


}


.status-viewers-list .svl-row:last-child { border-bottom: none; }


.status-viewers-list .avatar {


    width: 38px;


    height: 38px;


    border-radius: 50%;


    background: var(--wa-green);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 600;


    flex-shrink: 0;


    overflow: hidden;


}


.status-viewers-list .avatar img { width: 100%; height: 100%; object-fit: cover; }


.status-viewers-list .name { flex: 1; font-size: 0.9375rem; }


.status-viewers-list .time { font-size: 0.75rem; color: var(--wa-text-muted); }





@media (max-width: 720px) {


    .status-feed { padding: 10px 12px; gap: 10px; background: linear-gradient(180deg, var(--wa-bg-2), rgba(17,27,33,0.95)); }


    .status-bubble { min-width: 60px; }


    .status-bubble .sb-avatar { width: 54px; height: 54px; border-width: 2.5px; box-shadow: 0 2px 10px rgba(0, 216, 86, 0.25); }


    .status-bubble .sb-name { font-size: 0.7rem; max-width: 60px; color: var(--wa-text); }


    .status-composer .sc-stickers .grid { grid-template-columns: repeat(6, 1fr); }


}





/* ============================================================================


   PHASE 3 - V2: Chat upgrade (edit, reply, pin, forward, receipts)


   ============================================================================ */





/* === Reply preview banner above input (v111.8.9: mit Avatar + Bar) === */


.reply-preview {


    display: none;


    align-items: center;


    gap: 10px;


    padding: 8px 12px;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.04));


    border-bottom: 1px solid var(--wa-divider);


    position: relative;


}


.reply-preview .rp-bar {


    position: absolute;


    left: 0; top: 0; bottom: 0;


    width: 3px;


    background: linear-gradient(180deg, #7c3aed, #ec4899);


    border-radius: 0 2px 2px 0;


}


.reply-preview .rp-avatar {


    width: 32px;


    height: 32px;


    border-radius: 50%;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 700;


    font-size: 0.875rem;


    overflow: hidden;


    flex-shrink: 0;


}


.reply-preview .rp-avatar img { width: 100%; height: 100%; object-fit: cover; }


.reply-preview.show { display: flex; }


.reply-preview .rp-content {


    flex: 1;


    min-width: 0;


    overflow: hidden;


}


.reply-preview .rp-author {


    font-size: 0.78rem;


    color: var(--wa-text-muted);


    font-weight: 400;


    margin: 0;


}


.reply-preview .rp-author #rp-name {


    color: var(--wa-green);


    font-weight: 600;


}


.reply-preview .rp-text {


    font-size: 0.875rem;


    color: var(--wa-text-secondary);


    margin: 2px 0 0;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.reply-preview .rp-cancel {


    background: transparent;


    border: none;


    color: var(--wa-text-muted);


    cursor: pointer;


    font-size: 1.25rem;


    padding: 0 4px;


}





/* === Reply quote inside a message bubble === */


.msg-reply {


    display: flex;


    gap: 8px;


    padding: 6px 8px;


    margin-bottom: 6px;


    background: rgba(255, 255, 255, 0.08);


    border-left: 3px solid var(--wa-green);


    border-radius: 6px;


    cursor: pointer;


    min-width: 0;


    max-width: 100%;


}


.msg-reply .mr-content {


    flex: 1;


    min-width: 0;


    overflow: hidden;


}


.msg-reply .mr-author {


    font-size: 0.75rem;


    color: var(--wa-green);


    font-weight: 600;


}


.msg-reply .mr-text {


    font-size: 0.8rem;


    color: var(--wa-text-secondary);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.msg-reply .mr-icon {


    color: var(--wa-text-muted);


    font-size: 0.9375rem;


}


.message.sent .msg-reply { background: rgba(255, 255, 255, 0.12); }


.message.sent .msg-reply .mr-author { color: #b3f0d8; }





/* === Edited indicator === */


.msg-edited {


    font-size: 0.7rem;


    color: var(--wa-text-muted);


    font-style: italic;


    margin-left: 4px;


}





/* === Pinned banner above chat === */


.pinned-banner {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 8px 12px;


    background: var(--wa-panel);


    border-bottom: 1px solid var(--wa-divider);


    cursor: pointer;


    overflow-x: auto;


    scrollbar-width: none;


}


.pinned-banner::-webkit-scrollbar { display: none; }


.pinned-banner.empty { display: none; }


.pinned-banner .pin-icon {


    color: var(--wa-text-muted);


    font-size: 1rem;


    flex-shrink: 0;


}


.pinned-banner .pin-text {


    flex: 1;


    font-size: 0.875rem;


    color: var(--wa-text);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    min-width: 0;


}


.pinned-banner .pin-author {


    color: var(--wa-text-muted);


    margin-right: 4px;


}


.pinned-banner .pin-close {


    background: transparent;


    border: none;


    color: var(--wa-text-muted);


    cursor: pointer;


    font-size: 1.125rem;


    padding: 0 4px;


    flex-shrink: 0;


}





/* === Read receipts (double check marks) === */


.msg-receipts {


    display: inline-flex;


    align-items: center;


    margin-left: 4px;


    font-size: 0.875rem;


}


.msg-receipts.sent { color: var(--wa-text-muted); }


.msg-receipts.read { color: #53bdeb; }





/* === Forward modal === */


.forward-modal {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-radius: 14px;


    width: min(440px, 92vw);


    max-height: 80vh;


    overflow-y: auto;


    box-shadow: var(--shadow-lg);


}


.forward-modal .fw-list {


    padding: 8px 0;


    max-height: 50vh;


    overflow-y: auto;


}


.forward-modal .fw-item {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 10px 16px;


    cursor: pointer;


    transition: background var(--transition-fast);


}


.forward-modal .fw-item:hover { background: var(--wa-hover); }


.forward-modal .fw-item input[type="checkbox"] {


    accent-color: var(--wa-green);


    width: 18px;


    height: 18px;


}


.forward-modal .fw-avatar {


    width: 40px;


    height: 40px;


    border-radius: 50%;


    background: var(--wa-green);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 600;


    overflow: hidden;


    flex-shrink: 0;


}


.forward-modal .fw-avatar img { width: 100%; height: 100%; object-fit: cover; }


.forward-modal .fw-name { flex: 1; font-size: 0.9375rem; }


.forward-modal .fw-preview {


    padding: 10px 16px;


    margin: 8px 16px;


    background: var(--wa-bg-2);


    border-radius: 8px;


    font-size: 0.875rem;


    color: var(--wa-text-secondary);


    max-height: 80px;


    overflow: hidden;


}





/* === Edit input inline (appears over the message) === */


.edit-msg-input {


    width: 100%;


    padding: 6px 8px;


    background: var(--wa-bg-2);


    color: var(--wa-text);


    border: 1px solid var(--wa-green);


    border-radius: 6px;


    font-family: inherit;


    font-size: 0.9375rem;


    outline: none;


}





/* === Message action menu (long-press / right-click) === */


.msg-action-menu {


    position: fixed;


    z-index: 1000;


    background: var(--wa-panel);


    border: 1px solid var(--wa-divider);


    border-radius: 10px;


    box-shadow: var(--shadow-md);


    padding: 4px 0;


    min-width: 180px;


}


.msg-action-menu button {


    display: flex;


    align-items: center;


    gap: 10px;


    width: 100%;


    padding: 8px 14px;


    background: transparent;


    border: none;


    color: var(--wa-text);


    font-size: 0.875rem;


    text-align: left;


    cursor: pointer;


}


.msg-action-menu button:hover { background: var(--wa-hover); }


.msg-action-menu button.danger { color: var(--wa-call-red); }





/* === Swipe-reply visual indicator === */


.message.swiping {


    transition: transform 0.1s linear;


    will-change: transform;


}


.message.swipe-revealed {


    transform: translateX(60px);


}


.swipe-indicator {


    position: absolute;


    left: -50px;


    top: 50%;


    transform: translateY(-50%);


    color: var(--wa-green);


    font-size: 1.5rem;


    opacity: 0;


    transition: opacity 0.1s;


    pointer-events: none;


}


.message.swipe-revealed .swipe-indicator { opacity: 1; }





@media (max-width: 720px) {


    .reply-preview { padding: 6px 10px; }


    .pinned-banner { padding: 6px 10px; }


    .msg-action-menu { min-width: 160px; }


}





/* =====================================================


   PHASE 4 - V2: Call history, group calls, in-call chat


   ===================================================== */





/* === Call history modal === */


.call-history-modal {


    background: var(--wa-panel);


    border-radius: 14px;


    width: 92%;


    max-width: 520px;


    max-height: 86vh;


    display: flex;


    flex-direction: column;


    overflow: hidden;


    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);


    color: var(--wa-text);


}


.chm-tabs {


    display: flex;


    gap: 4px;


    padding: 12px 12px 8px;


    border-bottom: 1px solid var(--border);


}





.chm-tab {


    background: transparent;


    border: none;


    color: var(--text-secondary);


    padding: 6px 14px;


    border-radius: 16px;


    font-size: 0.875rem;


    cursor: pointer;


    transition: all 0.15s;


}





.chm-tab:hover {


    background: var(--bg-hover);


}





.chm-tab.active {


    background: var(--accent);


    color: white;


}





.chm-toolbar {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 10px 14px;


    background: rgba(0, 0, 0, 0.15);


    border-bottom: 1px solid var(--border);


}


.chm-count {


    font-size: 0.8rem;


    color: var(--text-secondary);


    font-weight: 600;


}


.chm-bulk-action {


    background: var(--wa-call-red, #e74c3c);


    color: #fff;


    border: none;


    border-radius: 8px;


    padding: 5px 12px;


    font-size: 0.78rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.15s;


}


.chm-bulk-action:hover { filter: brightness(1.15); transform: translateY(-1px); }


.chm-actions {


    display: flex;


    align-items: center;


    gap: 8px;


}


.chm-delete-btn {


    background: transparent;


    color: var(--text-secondary);


    border: 1px solid var(--border);


    border-radius: 6px;


    padding: 4px 9px;


    font-size: 0.875rem;


    cursor: pointer;


    transition: all 0.15s;


    flex-shrink: 0;


}


.chm-delete-btn:hover {


    background: var(--wa-call-red, #e74c3c);


    color: #fff;


    border-color: var(--wa-call-red, #e74c3c);


}


.chm-row {


    cursor: default;


}


.chm-row:hover .chm-delete-btn {


    border-color: var(--wa-call-red, #e74c3c);


    color: var(--wa-call-red, #e74c3c);


}


.chm-tab {


    background: transparent;


    border: none;


    color: var(--wa-text-secondary);


    padding: 6px 12px;


    border-radius: 16px;


    cursor: pointer;


    font-size: 0.875rem;


    white-space: nowrap;


    transition: background 0.15s, color 0.15s;


}


.chm-tab:hover { background: var(--wa-hover); }


.chm-tab.active {


    background: var(--wa-green);


    color: #fff;


}


.chm-list {


    flex: 1;


    overflow-y: auto;


    padding: 4px 0;


}


.chm-row {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 10px 14px;


    border-bottom: 1px solid var(--wa-divider);


    cursor: pointer;


    transition: background 0.12s;


}


.chm-row:hover { background: var(--wa-hover); }


.chm-row .chm-avatar {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    background: var(--wa-bg-2);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.25rem;


    color: var(--wa-text);


    flex-shrink: 0;


    overflow: hidden;


}


.chm-row .chm-avatar img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}


.chm-row .chm-info {


    flex: 1;


    min-width: 0;


}


.chm-row .chm-name {


    font-weight: 600;


    color: var(--wa-text);


    font-size: 0.9375rem;


    margin-bottom: 2px;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.chm-row .chm-meta {


    color: var(--wa-text-secondary);


    font-size: 0.8rem;


    display: flex;


    align-items: center;


    gap: 6px;


}


.chm-row .chm-meta .chm-missed-dot {


    width: 8px;


    height: 8px;


    border-radius: 50%;


    background: var(--wa-call-red);


    display: inline-block;


}


.chm-row.missed .chm-name { color: var(--wa-call-red); }


.chm-row .chm-icon {


    width: 28px;


    height: 28px;


    border-radius: 50%;


    background: var(--wa-green);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    flex-shrink: 0;


    font-size: 0.875rem;


}


.chm-row.missed .chm-icon { background: var(--wa-call-red); }


.chm-row.outgoing .chm-icon { background: var(--wa-blue, #3390ec); }


.chm-row.rejected .chm-icon { background: #888; }





@media (max-width: 720px) {


    .call-history-modal { max-height: 90vh; }


    .chm-row { padding: 8px 10px; }


    .chm-row .chm-avatar { width: 40px; height: 40px; }


}





/* === Group call modal === */


.gcm-type {


    display: flex;


    gap: 12px;


    margin-bottom: 12px;


    padding: 8px 0;


    border-bottom: 1px solid var(--wa-divider);


}


.gcm-type label {


    display: flex;


    align-items: center;


    gap: 6px;


    color: var(--wa-text);


    cursor: pointer;


}


.gcm-friends {


    max-height: 50vh;


    overflow-y: auto;


    border: 1px solid var(--wa-divider);


    border-radius: 8px;


    background: var(--wa-bg-2);


}


.gcm-friend-row {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 8px 12px;


    border-bottom: 1px solid var(--wa-divider);


    cursor: pointer;


    transition: background 0.1s;


}


.gcm-friend-row:last-child { border-bottom: none; }


.gcm-friend-row:hover { background: var(--wa-hover); }


.gcm-friend-row.selected { background: rgba(0, 168, 132, 0.18); }


.gcm-friend-row .gcm-checkbox {


    width: 18px;


    height: 18px;


    border-radius: 4px;


    border: 2px solid var(--wa-divider);


    display: flex;


    align-items: center;


    justify-content: center;


    flex-shrink: 0;


    color: #fff;


    font-size: 0.8rem;


    font-weight: 700;


}


.gcm-friend-row.selected .gcm-checkbox {


    background: var(--wa-green);


    border-color: var(--wa-green);


}


.gcm-friend-row .gcm-fav {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    background: var(--wa-panel);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.125rem;


    overflow: hidden;


    flex-shrink: 0;


}


.gcm-friend-row .gcm-fav img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}


.gcm-friend-row .gcm-name {


    color: var(--wa-text);


    font-size: 0.875rem;


    font-weight: 500;


    flex: 1;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}





/* === Screen share button === */


#screen-share-btn {


    background: var(--wa-bg-2);


    color: var(--wa-text);


}


#screen-share-btn.active {


    background: var(--wa-green);


    color: #fff;


}







/* === KPI: missed call highlight === */


.kpi-calls.has-missed .kpi-value {


    color: var(--wa-call-red);


    font-weight: 700;


}





/* =====================================================


   PHASE 5 - V2: Notification settings UI


   ===================================================== */





.ns-container {


    display: flex;


    flex-direction: column;


    gap: 8px;


}


.ns-rows {


    display: flex;


    flex-direction: column;


    gap: 8px;


}


.ns-row {


    display: grid;


    grid-template-columns: minmax(0, 1fr) auto auto auto;


    align-items: center;


    gap: 10px;


    padding: 10px 12px;


    border-radius: 10px;


    background: var(--wa-bg-2, rgba(255,255,255,0.04));


    border: 1px solid var(--wa-divider, rgba(255,255,255,0.08));


}


.ns-row .ns-label {


    display: flex;


    align-items: center;


    gap: 8px;


    color: var(--wa-text);


    font-size: 0.875rem;


    font-weight: 500;


    min-width: 0;


}


.ns-row .ns-label-icon { font-size: 1.125rem; }


.ns-row select {


    background: var(--wa-bg, #1a1a1a);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    padding: 4px 8px;


    font-size: 0.875rem;


    max-width: 150px;


}


.ns-row input[type="range"] {


    width: 90px;


    accent-color: var(--wa-green, #00a884);


}


.ns-row .ns-test {


    background: var(--wa-green, #00a884);


    color: #fff;


    border: none;


    border-radius: 6px;


    padding: 4px 10px;


    font-size: 0.8rem;


    cursor: pointer;


}


.ns-row .ns-test:hover { filter: brightness(1.1); }


.ns-row.ns-disabled { opacity: 0.5; }





.ns-dnd {


    display: flex;


    flex-direction: column;


    gap: 8px;


    padding: 10px 12px;


    background: var(--wa-bg-2);


    border-radius: 10px;


    border: 1px solid var(--wa-divider);


}


.ns-dnd-duration {


    display: flex;


    align-items: center;


    gap: 8px;


    color: var(--wa-text);


    font-size: 0.875rem;


}


.ns-dnd-duration select {


    background: var(--wa-bg);


    color: var(--wa-text);


    border: 1px solid var(--wa-divider);


    border-radius: 6px;


    padding: 4px 8px;


    font-size: 0.875rem;


}





@media (max-width: 720px) {


    .ns-row {


        grid-template-columns: 1fr 1fr;


        gap: 6px;


    }


    .ns-row .ns-label { grid-column: 1 / -1; }


    .ns-row .ns-test { grid-column: span 2; }


    .ns-row input[type="range"] { width: 100%; }


}





/* =====================================================


   PHASE 7 - V2: Security UI (2FA, sessions, login history)


   ===================================================== */





.sec-container {


    display: flex;


    flex-direction: column;


    gap: 12px;


}


.sec-2fa, .sec-sessions, .sec-history {


    padding: 10px 12px;


    background: var(--wa-bg-2, rgba(255,255,255,0.04));


    border-radius: 10px;


    border: 1px solid var(--wa-divider, rgba(255,255,255,0.08));


}


.sec-2fa-actions {


    display: flex;


    flex-wrap: wrap;


    gap: 8px;


    margin-top: 4px;


}





.sec-sessions-list, .sec-history-list {


    display: flex;


    flex-direction: column;


    gap: 6px;


    margin-top: 8px;


}


.sec-session-row, .sec-history-row {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 8px 10px;


    background: var(--wa-bg);


    border: 1px solid var(--wa-divider);


    border-radius: 8px;


}


.sec-session-row.current {


    border-color: var(--wa-green, #00a884);


    background: rgba(0, 168, 132, 0.08);


}


.sec-session-row .sec-icon, .sec-history-row .sec-icon {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    background: var(--wa-bg-2);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.125rem;


    flex-shrink: 0;


}


.sec-session-row .sec-info, .sec-history-row .sec-info {


    flex: 1;


    min-width: 0;


}


.sec-session-row .sec-name, .sec-history-row .sec-name {


    color: var(--wa-text);


    font-size: 0.875rem;


    font-weight: 600;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.sec-session-row .sec-meta, .sec-history-row .sec-meta {


    color: var(--wa-text-secondary);


    font-size: 0.75rem;


    margin-top: 1px;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.sec-session-row .sec-action, .sec-history-row .sec-action {


    background: var(--wa-call-red, #e74c3c);


    color: #fff;


    border: none;


    border-radius: 8px;


    padding: 6px 12px;


    font-size: 0.78rem;


    font-weight: 600;


    cursor: pointer;


    flex-shrink: 0;


    transition: all 0.2s;


}


.sec-session-row .sec-action:hover { filter: brightness(1.15); transform: translateY(-1px); }


.sec-sessions-toolbar {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 10px 12px;


    background: var(--bg-secondary, rgba(255,255,255,0.04));


    border-radius: 10px;


    margin-bottom: 8px;


}


.sec-sessions-count {


    font-size: 0.82rem;


    color: var(--text-secondary, #888);


    font-weight: 600;


}


.sec-bulk-action {


    background: var(--wa-call-red, #e74c3c);


    color: #fff;


    border: none;


    border-radius: 8px;


    padding: 6px 14px;


    font-size: 0.8rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s;


}


.sec-bulk-action:hover { filter: brightness(1.15); transform: translateY(-1px); }


.sec-current-badge {


    font-size: 0.7rem;


    background: rgba(34, 197, 94, 0.2);


    color: var(--success, #22c55e);


    padding: 2px 8px;


    border-radius: 6px;


    margin-left: 6px;


    font-weight: 600;


}


.sec-current-pill {


    background: rgba(34, 197, 94, 0.25);


    color: var(--success, #22c55e);


    padding: 5px 12px;


    border-radius: 8px;


    font-size: 0.78rem;


    font-weight: 700;


    flex-shrink: 0;


}


.sec-history-row.failed { border-color: var(--wa-call-red, #e74c3c); }


.sec-history-row.failed .sec-name { color: var(--wa-call-red); }


.sec-history-row.failed .sec-icon { color: var(--wa-call-red); }





#sec-2fa-status.enabled { color: var(--wa-green, #00a884); }


#sec-2fa-status.disabled { color: var(--wa-text-secondary); }





/* === 2FA setup modal extras === */


.twofa-secret-display {


    margin-top: 12px;


}


#twofa-qr img, #twofa-qr canvas {


    max-width: 200px;


    height: auto;


}





@media (max-width: 720px) {


    .sec-2fa-actions { flex-direction: column; }


    .sec-2fa-actions button { width: 100%; }


    .sec-session-row .sec-meta, .sec-history-row .sec-meta {


        font-size: 0.7rem;


    }


}





/* ============================================================================


   PHASE W: Light Mode (Theme Switcher)


   ----------------------------------------------------------------------------


   Override der globalen CSS-Variablen fuer body.theme-light.


   Die Cosmic-Aurora-Background wird auf sehr dezente Pastell-Tints gedimmt


   (oder per data-attr deaktiviert). Auth-Screen (.auth-screen) bleibt


   absichtlich dunkel (Brand).


   ============================================================================ */





/* Sanfter Uebergang zwischen Themes */


html, body, .app-shell, .sidebar, .chat-container, .modal-content,


.friend-item, .message-bubble, .msg-input-wrap, .auth-box, .ns-container,


.admin-section, .sec-panel, .react-tabs__tab-list, .ms-container {


    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;


}





body.theme-light,


html.pre-theme-light body {


    /* Surfaces */


    --bg-base: #f0f2f5;


    --bg-deep: #e7eaef;


    --bg-card: rgba(255, 255, 255, 0.85);


    --bg-card-solid: #ffffff;


    --bg-elevated: rgba(255, 255, 255, 0.95);


    --bg-hover: rgba(124, 58, 237, 0.1);


    --bg-input: rgba(255, 255, 255, 0.95);


    --bg-overlay: rgba(0, 0, 0, 0.32);





    /* Text - improved contrast */


    --text-primary: #1a1d2e;


    --text-secondary: #2a2e3a;


    --text-muted: #4a5160;


    --text-on-primary: #ffffff;





    /* Borders / shadows */


    --border: rgba(0, 0, 0, 0.1);


    --border-strong: rgba(0, 0, 0, 0.16);


    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);


    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);


    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.14);


    --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.18);


    --shadow-glow-pink: 0 0 20px rgba(236, 72, 153, 0.18);





    /* WhatsApp-Tokens (Light) */


    --wa-green: #008f72;


    --wa-green-dark: #007a62;


    --wa-green-light: #25d3ae;


    --wa-bg: #efeae2;          /* warmer, leicht beige Hintergrund (WA-like) */


    --wa-bg-2: #f7f5f0;


    --wa-panel: #ffffff;


    --wa-panel-2: #f4f6f8;


    --wa-hover: #f0f2f5;


    --wa-text: #111b21;


    --wa-text-secondary: #54656f;


    --wa-text-muted: #667781;


    --wa-bubble-out: #d9fdd3;  /* WA-typisches Hellgruen */


    --wa-bubble-in: #ffffff;


    --wa-divider: #e9edef;


    --wa-unread: #008f72;





    /* KPI */


    --kpi-bg: rgba(255, 255, 255, 0.85);


    --kpi-border: rgba(0, 0, 0, 0.08);


}





/* Body Background & Aurora im Light Mode dimmen */


body.theme-light {


    background: var(--wa-bg-2);


}


body.theme-light::before,


body.theme-light::after {


    opacity: 0.15;            /* aurora fast unsichtbar */


}





/* Auth-Screen explizit NICHT umschalten (Brand bleibt dunkel) */


body.theme-light .auth-screen,


body.theme-light .auth-screen * {


    color: inherit;            /* erbt weiterhin die Originalwerte */


}





/* === Light-Mode spezifische Anpassungen, die Variablen nicht abdecken === */





/* Sidebar / Friend-List */


body.theme-light .sidebar,


body.theme-light .friends-list-wrap,


body.theme-light .friends-section,


body.theme-light #friends-list {


    background: var(--wa-panel);


    color: var(--wa-text);


}


body.theme-light .friend-item:hover {


    background: var(--wa-hover);


}


body.theme-light .friend-item.active {


    background: var(--wa-hover);


    border-left-color: var(--wa-green);


}


body.theme-light .friend-item.is-pinned {


    background: rgba(0, 143, 114, 0.06);


    border-left-color: var(--wa-green);


}


body.theme-light .friend-search input,


body.theme-light .friend-search .search-input {


    background: var(--wa-bg);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}





/* Chat-Bereich */


body.theme-light .chat-container,


body.theme-light .chat-header,


body.theme-light #messages {


    background: var(--wa-bg);


    color: var(--wa-text);


}


body.theme-light .chat-header {


    background: var(--wa-panel);


    border-bottom-color: var(--wa-divider);


}


body.theme-light .message-bubble {


    background: var(--wa-bubble-in);


    color: var(--wa-text);


    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08);


}


body.theme-light .message.sent .message-bubble {


    background: var(--wa-bubble-out);


    color: #111b21;


}


body.theme-light .message-meta {


    color: var(--wa-text-secondary);


}


body.theme-light .message.sent .message-meta {


    color: #54656f;


}


body.theme-light .msg-input-wrap,


body.theme-light #message-input,


body.theme-light .input-wrap,


body.theme-light .msg-input {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}





/* Modals & Settings */


body.theme-light .modal-content,


body.theme-light .modal,


body.theme-light .ns-container,


body.theme-light .admin-section,


body.theme-light .sec-panel,


body.theme-light .auth-box {


    background: var(--wa-panel);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}


body.theme-light .modal-header {


    border-bottom-color: var(--wa-divider);


}


body.theme-light input[type="text"],


body.theme-light input[type="email"],


body.theme-light input[type="password"],


body.theme-light input[type="search"],


body.theme-light select,


body.theme-light textarea {


    background: var(--wa-bg);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}


body.theme-light input::placeholder,


body.theme-light textarea::placeholder {


    color: var(--wa-text-muted);


}





/* Reactions / Link-Preview / Disappearing in Light Mode anpassen */


body.theme-light .msg-reaction-chip {


    background: rgba(0, 0, 0, 0.05);


    border-color: rgba(0, 0, 0, 0.1);


    color: var(--wa-text);


}


body.theme-light .msg-reaction-chip.mine {


    background: rgba(0, 143, 114, 0.18);


    border-color: var(--wa-green);


    color: #0a3a2e;


}


body.theme-light .lp-card {


    background: rgba(255, 255, 255, 0.7);


    border-color: rgba(0, 0, 0, 0.1);


    color: var(--wa-text);


}


body.theme-light .lp-card:hover {


    background: rgba(255, 255, 255, 0.9);


}


body.theme-light .lp-skeleton {


    background: rgba(0, 0, 0, 0.04);


    border-color: rgba(0, 0, 0, 0.08);


}


body.theme-light .lp-skel-line {


    background: linear-gradient(90deg,


        rgba(0, 0, 0, 0.04) 0%,


        rgba(0, 0, 0, 0.1) 50%,


        rgba(0, 0, 0, 0.04) 100%);


    background-size: 200% 100%;


}


body.theme-light .msg-disappearing {


    background: rgba(245, 158, 11, 0.12);


    border-color: rgba(245, 158, 11, 0.35);


    color: #92400e;


}





/* Pinned banner */


body.theme-light .pinned-banner {


    background: var(--wa-panel-2);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}





/* Buttons (primary) auf Light-Mode etwas abdunkeln fuer Kontrast */


body.theme-light .btn.primary {


    background: var(--wa-green);


    color: #fff;


}


body.theme-light .btn.secondary {


    background: var(--wa-hover);


    color: var(--wa-text);


    border-color: var(--wa-divider);


}





/* Quick-Toggle Button (im Header) */


.theme-toggle {


    appearance: none;


    background: transparent;


    border: 1px solid transparent;


    color: inherit;


    font-size: 1rem;


    line-height: 1;


    padding: 6px 8px;


    border-radius: 8px;


    cursor: pointer;


    transition: background 0.15s, border-color 0.15s, transform 0.12s;


    display: inline-flex;


    align-items: center;


    justify-content: center;


}


.theme-toggle:hover {


    background: var(--bg-hover);


    border-color: var(--border);


}


.theme-toggle:active { transform: scale(0.95); }





/* Theme-Settings-Selector (in Settings-Modal) */


.theme-options {


    display: grid;


    grid-template-columns: 1fr 1fr 1fr;


    gap: 8px;


    margin-top: 6px;


}


.theme-option {


    appearance: none;


    background: var(--wa-bg);


    border: 2px solid var(--wa-divider);


    border-radius: 10px;


    padding: 10px 6px;


    color: var(--wa-text);


    cursor: pointer;


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 4px;


    font: inherit;


    font-size: 0.78rem;


    transition: background 0.12s, border-color 0.12s, transform 0.12s;


}


.theme-option:hover { background: var(--wa-hover); }


.theme-option.selected {


    border-color: var(--wa-green);


    background: rgba(0, 143, 114, 0.1);


    color: var(--wa-text);


}


.theme-option-icon { font-size: 1.5rem; line-height: 1; }


.theme-option-label { font-weight: 600; }





@media (max-width: 600px) {


    .theme-options { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }


    .theme-option { padding: 8px 4px; font-size: 0.72rem; }


}





/* === Phase AA: Polls in Chats === */


.poll-card {


    background: rgba(255, 255, 255, 0.06);


    border: 1px solid rgba(255, 255, 255, 0.14);


    border-radius: 10px;


    padding: 10px 12px;


    margin-top: 4px;


    min-width: 240px;


    max-width: 360px;


}


.message.sent .poll-card { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); }


body.theme-light .poll-card { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); }





.poll-question { font-size: 0.9375rem; font-weight: 600; margin: 0 0 8px 0; line-height: 1.3; word-break: break-word; }


.poll-multi-badge {


    display: inline-block;


    font-size: 0.7rem;


    background: rgba(0, 168, 132, 0.18);


    color: var(--wa-green, #00a884);


    padding: 1px 6px;


    border-radius: 6px;


    margin-left: 4px;


    vertical-align: middle;


    font-weight: 500;


}





.poll-option {


    position: relative;


    display: flex; align-items: center; gap: 8px;


    padding: 6px 10px;


    margin: 4px 0;


    background: rgba(255, 255, 255, 0.05);


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 8px;


    cursor: pointer;


    overflow: hidden;


    transition: background 0.15s, border-color 0.15s;


    user-select: none;


}


.poll-option:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }


.poll-option-closed { cursor: default; opacity: 0.85; }


.poll-option-bar {


    position: absolute; left: 0; top: 0; bottom: 0;


    background: rgba(0, 168, 132, 0.25);


    width: 0%;


    transition: width 0.4s ease;


    z-index: 0;


}


.poll-option-voted { border-color: var(--wa-green, #00a884); background: rgba(0, 168, 132, 0.12); }


.poll-option-voted .poll-option-bar { background: rgba(0, 168, 132, 0.35); }


.poll-option-content {


    position: relative; z-index: 1;


    display: flex; align-items: center; justify-content: space-between; gap: 8px;


    width: 100%;


}


.poll-option-text { font-size: 0.88rem; word-break: break-word; }


.poll-option-percent { font-size: 0.78rem; font-weight: 600; opacity: 0.85; min-width: 36px; text-align: right; }


.poll-option-check { color: var(--wa-green, #00a884); font-weight: 700; margin-left: 4px; }





.poll-meta {


    display: flex; align-items: center; justify-content: space-between;


    margin-top: 8px; padding-top: 6px;


    border-top: 1px solid rgba(255, 255, 255, 0.08);


    font-size: 0.78rem; opacity: 0.7;


}


.poll-vote-count { font-weight: 500; }


.poll-show-voters { background: none; border: none; color: var(--wa-green, #00a884); cursor: pointer; font-size: 0.78rem; padding: 0; }


.poll-show-voters:hover { text-decoration: underline; }


.poll-delete {


    background: none; border: none; color: #e74c3c; cursor: pointer;


    font-size: 0.78rem; padding: 0;


    margin-top: 6px;


    display: block;


    text-align: right;


    width: 100%;


}


.poll-delete:hover { text-decoration: underline; }





.poll-closed-banner { font-size: 0.78rem; color: #f39c12; margin-top: 6px; text-align: center; font-weight: 500; }


.poll-deleted-notice {


    font-size: 0.875rem;


    color: #888;


    font-style: italic;


    text-align: center;


    padding: 8px 0;


    opacity: 0.85;


}





body.theme-light .poll-option { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }


body.theme-light .poll-option:hover { background: rgba(0, 0, 0, 0.06); }


body.theme-light .poll-option-voted { background: rgba(0, 168, 132, 0.12); }


body.theme-light .poll-meta { border-top-color: rgba(0, 0, 0, 0.08); }


body.theme-light .poll-multi-badge { background: rgba(0, 143, 114, 0.15); }





/* Poll Creator Modal inputs */


#poll-creator-modal .wa-modal-body label {


    display: block;


    font-size: 0.875rem;


    font-weight: 600;


    margin-bottom: 4px;


    opacity: 0.85;


}


#poll-creator-modal input[type="text"] {


    width: 100%;


    padding: 8px 10px;


    border: 1px solid var(--wa-border, rgba(255,255,255,0.18));


    border-radius: 6px;


    background: var(--wa-input-bg, rgba(255,255,255,0.06));


    color: inherit;


    font-size: 0.875rem;


    box-sizing: border-box;


    font-family: inherit;


}


#poll-creator-modal input[type="text"]:focus {


    outline: none;


    border-color: var(--wa-green, #00a884);


}


.poll-option-input { margin-bottom: 6px; }


.poll-checkbox {


    display: flex !important;


    align-items: center;


    gap: 6px;


    margin-top: 12px !important;


    font-weight: 500 !important;


    cursor: pointer;


    font-size: 0.88rem !important;


}


.poll-checkbox input { margin: 0; cursor: pointer; }





/* Poll Voters Modal */


#poll-voters-body { padding: 8px 4px; }


.poll-voter-group { margin-bottom: 14px; }


.poll-voter-group-title {


    font-weight: 600;


    font-size: 0.875rem;


    padding: 4px 8px;


    background: var(--wa-hover, rgba(255,255,255,0.06));


    border-radius: 6px;


    margin-bottom: 6px;


}


.poll-voter {


    display: flex; align-items: center; gap: 10px;


    padding: 4px 8px;


    border-radius: 6px;


}


.poll-voter:hover { background: var(--wa-hover, rgba(255,255,255,0.05)); }


.poll-voter-avatar {


    width: 32px; height: 32px;


    border-radius: 50%;


    background: var(--wa-green, #00a884);


    color: #fff;


    display: flex; align-items: center; justify-content: center;


    font-weight: 600;


    font-size: 0.875rem;


    overflow: hidden;


    flex-shrink: 0;


}


.poll-voter-avatar img { width: 100%; height: 100%; object-fit: cover; }


.poll-voter-name { font-size: 0.875rem; }





/* ============================================================================


   PHASE CC — COSMIC VIOLET COMPONENT SYSTEM


   ----------------------------------------------------------------------------


   Modernized, unified components that supersede the scattered


   .bubble-btn/.send-btn/.icon-btn/.btn-primary/.btn-success variants and the


   parallel .modal vs .wa-modal-overlay systems.





   Strategy: additive classes. Old class names keep working.


   ============================================================================ */





/* ============================================================================


   B.1 — BUTTON SYSTEM (one .btn, many modifiers)


   ============================================================================ */


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: var(--space-2);


    min-height: 40px;


    padding: 0 var(--space-4);


    font: inherit;


    font-size: var(--text-base);


    font-weight: var(--weight-semibold);


    line-height: 1;


    border: 1px solid var(--border);


    border-radius: var(--radius-md);


    background: var(--bg-card);


    color: var(--text-primary);


    cursor: pointer;


    transition: var(--transition-fast);


    user-select: none;


    -webkit-tap-highlight-color: transparent;


    text-decoration: none;


    white-space: nowrap;


}


.btn:hover {


    background: var(--bg-hover);


    transform: translateY(-1px);


}


.btn:active { transform: translateY(0); }


.btn:focus-visible {


    outline: 2px solid var(--border-focus);


    outline-offset: 2px;


}


.btn:disabled {


    opacity: 0.5;


    cursor: not-allowed;


    transform: none !important;


}





/* Variants */


.btn--primary {


    background: var(--gradient-primary);


    border: none;


    color: var(--text-on-primary);


    box-shadow: var(--shadow-glow);


}


.btn--primary:hover {


    box-shadow: var(--shadow-glow), var(--shadow-md);


    background: var(--gradient-primary);


    filter: brightness(1.05);


}





.btn--secondary {


    background: var(--bg-elevated);


    border-color: var(--border-strong);


}





.btn--ghost {


    background: transparent;


    border-color: transparent;


    color: var(--text-secondary);


}


.btn--ghost:hover {


    background: var(--bg-hover);


    color: var(--text-primary);


}





.btn--danger {


    background: var(--color-danger);


    color: var(--text-on-primary);


    border: none;


    box-shadow: var(--shadow-glow-danger);


}


.btn--danger:hover { filter: brightness(1.05); }





.btn--success {


    background: var(--color-success);


    color: var(--text-on-primary);


    border: none;


    box-shadow: var(--shadow-glow-success);


}


.btn--success:hover { filter: brightness(1.05); }





/* Icon-only */


.btn--icon {


    width: 40px;


    height: 40px;


    padding: 0;


    border-radius: var(--radius-md);


    flex-shrink: 0;


}





/* Pill shape for primary CTAs */


.btn--pill {


    border-radius: var(--radius-full);


    padding: 0 var(--space-5);


}





/* Sizes */


.btn--sm {


    min-height: 32px;


    padding: 0 var(--space-3);


    font-size: var(--text-sm);


}


.btn--lg {


    min-height: 48px;


    padding: 0 var(--space-5);


    font-size: var(--text-lg);


}







/* v141cv23: System 3 modal-overlay/modal (single source of truth) removed — UNUSED, conflicted with .modal/.modal-content system 1. Kept cc-fadeIn/cc-modalIn keyframes for .wa-modal-overlay + .wa-modal + .toast-notification. */

@keyframes cc-fadeIn {


    from { opacity: 0; }


    to   { opacity: 1; }


}


@keyframes cc-modalIn {


    from { opacity: 0; transform: translateY(8px) scale(0.98); }


    

}







/* ============================================================================


   B.3 — TOGGLE SYSTEM (one .toggle)


   ============================================================================ */


.toggle {


    position: relative;


    display: inline-block;


    width: 46px;


    height: 26px;


    flex-shrink: 0;


}


.toggle input {


    opacity: 0;


    width: 0;


    height: 0;


    position: absolute;


}


.toggle__slider {


    position: absolute;


    inset: 0;


    background: var(--bg-elevated);


    border-radius: var(--radius-full);


    transition: var(--transition-ios);


    cursor: pointer;


    border: 1px solid var(--border);


}


.toggle__slider::before {


    content: '';


    position: absolute;


    top: 3px;


    left: 3px;


    width: 18px;


    height: 18px;


    background: var(--text-primary);


    border-radius: var(--radius-full);


    box-shadow: var(--shadow-sm);


    transition: var(--transition-ios);


}


.toggle input:checked + .toggle__slider {


    background: var(--color-success);


    border-color: var(--color-success);


}


.toggle input:checked + .toggle__slider::before {


    transform: translateX(20px);


}


.toggle input:focus-visible + .toggle__slider {


    outline: 2px solid var(--border-focus);


    outline-offset: 2px;


}


.toggle input:disabled + .toggle__slider {


    opacity: 0.5;


    cursor: not-allowed;


}





/* ============================================================================


   B.4 — TOAST SYSTEM (single container, one .toast)


   ============================================================================ */


.toast-container {


    position: fixed;


    bottom: var(--space-5);


    right: var(--space-5);


    left: auto;


    z-index: var(--z-toast);


    display: flex;


    flex-direction: column-reverse;


    gap: var(--space-2);


    pointer-events: none;


    max-width: calc(100vw - var(--space-5) * 2);


}


.toast {


    background: var(--bg-elevated);


    backdrop-filter: var(--glass-md);


    -webkit-backdrop-filter: var(--glass-md);


    border: 1px solid var(--border);


    border-radius: var(--radius-md);


    padding: var(--space-3) var(--space-4);


    color: var(--text-primary);


    font-size: var(--text-base);


    box-shadow: var(--shadow-md);


    display: flex;


    align-items: center;


    gap: var(--space-3);


    min-width: 240px;


    max-width: 360px;


    pointer-events: auto;


    animation: cc-toastIn var(--dur-base) var(--ease-ios);


}


.toast--success { border-color: var(--color-success); }


.toast--error   { border-color: var(--color-danger); }


.toast--info    { border-color: var(--color-info); }


.toast--warning { border-color: var(--color-warning); }


.toast--leaving {


    animation: cc-toastOut var(--dur-base) var(--ease-ios) forwards;


}


.toast__icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }


.toast__text { flex: 1 1 auto; min-width: 0; }





@keyframes cc-toastIn {


    from { opacity: 0; transform: translateX(20px); }


    to   { opacity: 1; transform: translateX(0); }


}


@keyframes cc-toastOut {


    from { opacity: 1; transform: translateX(0); }


    to   { opacity: 0; transform: translateX(20px); }


}





/* ============================================================================


   C.5 — BUBBLE STYLE (iMessage-like)


   ============================================================================ */


.message {


    display: flex;


    flex-direction: column;


    max-width: 70%;


    margin-bottom: var(--space-2);


    animation: cc-messageIn var(--dur-base) var(--ease-ios);


}


.message-bubble {


    padding: var(--space-3) var(--space-4);


    border-radius: var(--radius-lg);


    font-size: var(--text-base);


    line-height: var(--leading-relaxed);


    word-wrap: break-word;


    box-shadow: var(--shadow-sm);


    position: relative;


}


.message.sent {


    align-self: flex-end;


}


.message.sent .message-bubble {


    background: var(--gradient-primary);


    color: var(--text-on-primary);


    border-bottom-right-radius: var(--radius-sm);


}


.message.received {


    align-self: flex-start;


}


.message.received .message-bubble {


    background: var(--bg-card-solid);


    color: var(--text-primary);


    border: 1px solid var(--border);


    border-bottom-left-radius: var(--radius-sm);


}


.message.sent-grouped { margin-top: -4px; }


.message.received-grouped { margin-top: -4px; }





@keyframes cc-messageIn {


    from { opacity: 0; transform: translateY(8px); }


    to   { opacity: 1; transform: translateY(0); }


}





/* ============================================================================


   C.7 — LIGHT THEME (token-override pattern, single block)


   ============================================================================ */


body.theme-light,


html.pre-theme-light body {


    --bg-base: #f5f5f9;


    --bg-deep: #e8e8ee;


    --bg-card: rgba(255, 255, 255, 0.85);


    --bg-card-solid: #ffffff;


    --bg-elevated: rgba(245, 245, 249, 0.95);


    --bg-input: rgba(255, 255, 255, 0.9);


    --bg-hover: rgba(124, 58, 237, 0.10);


    --bg-overlay: rgba(0, 0, 0, 0.5);





    --text-primary: #1a1d2e;


    --text-secondary: #2a2e3a;


    --text-muted: #4a5160;


    --text-on-primary: #ffffff;





    --border: rgba(0, 0, 0, 0.08);


    --border-strong: rgba(0, 0, 0, 0.16);





    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);


    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);


    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);


    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);





    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));





    --wa-bg: #f5f5f9;


    --wa-bg-2: #e8e8ee;


    --wa-panel: #ffffff;


    --wa-panel-2: #f4f6f8;


    --wa-hover: rgba(124, 58, 237, 0.10);


    --wa-text: #1a1d2e;


    --wa-text-secondary: #4a4a6a;


    --wa-text-muted: #7a7a92;


    --wa-bubble-out: var(--gradient-primary);


    --wa-bubble-in: #ffffff;


    --wa-divider: rgba(0, 0, 0, 0.08);


    --wa-green: #008f72;


    --wa-green-dark: #007a62;


    --wa-unread: #008f72;


}





/* Light mode: aurora noch subtiler */


body.theme-light::before {


    opacity: 0.35;


}


body.theme-light .message.received .message-bubble {


    background: var(--bg-card-solid);


    border-color: var(--border);


}


body.theme-light .message.sent .message-bubble {


    color: var(--text-on-primary);


}





/* Auth screen bleibt dunkel (Brand) */


body.theme-light #auth-screen,


body.theme-light #auth-screen * {


    color: inherit;


}





/* ============================================================================


   PHASE CC — BRIDGE: Old class names inherit new design tokens


   ----------------------------------------------------------------------------


   Maps the legacy wa-modal / wa-switch / toast-notification / toggle-row


   markup onto the new .modal-overlay / .toggle / .toast system without


   requiring 100+ HTML edits. Old classes still work, new classes are


   preferred for new code.


   ============================================================================ */





/* Modal: wa-modal-overlay is the full-screen overlay, wa-modal is the box */


.wa-modal-overlay {


    position: fixed;


    inset: 0;


    background: var(--bg-overlay);


    backdrop-filter: var(--glass-sm);


    -webkit-backdrop-filter: var(--glass-sm);


    z-index: var(--z-modal);


    display: flex;


    align-items: center;


    justify-content: center;


    padding: var(--space-4);


    animation: cc-fadeIn var(--dur-fast) var(--ease-ios);


}


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


/* v141bm: Scrollbar statt clip - das wa-modal scrollt selbst wenn Inhalt > max-height */


.wa-modal {


    background: var(--bg-card);


    backdrop-filter: var(--glass-lg);


    -webkit-backdrop-filter: var(--glass-lg);


    border: 1px solid var(--border);


    border-radius: var(--radius-xl);


    box-shadow: var(--shadow-lg);


    width: min(540px, 100%);


    max-height: 90vh;


    animation: cc-modalIn var(--dur-base) var(--ease-ios);


    overflow-y: auto;


    overflow-x: hidden;


    scrollbar-gutter: stable;


}


.wa-modal-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: var(--space-3);


    padding: var(--space-4) var(--space-5);


    border-bottom: 1px solid var(--border);


    flex-shrink: 0;


}


.wa-modal-header h2,


.wa-modal-header h3 {


    margin: 0;


    font-size: var(--text-xl);


    font-weight: var(--weight-semibold);


    color: var(--text-primary);


}


.wa-modal-body {


    padding: var(--space-5);


    overflow-y: auto;


    flex: 1 1 auto;


}


.wa-modal-footer {


    display: flex;


    gap: var(--space-3);


    justify-content: flex-end;


    padding: var(--space-4) var(--space-5);


    border-top: 1px solid var(--border);


    flex-shrink: 0;


}


.wa-modal-close {


    width: 32px;


    height: 32px;


    border-radius: var(--radius-full);


    background: transparent;


    border: none;


    color: var(--text-secondary);


    font-size: 1.25rem;


    cursor: pointer;


    display: grid;


    place-items: center;


    transition: var(--transition-fast);


    flex-shrink: 0;


    -webkit-tap-highlight-color: transparent;


}


.wa-modal-close:hover {


    background: var(--bg-hover);


    color: var(--text-primary);


}





/* Toast: old toast-notification uses the new .toast styling */


.toast-notification {


    background: var(--bg-elevated);


    backdrop-filter: var(--glass-md);


    -webkit-backdrop-filter: var(--glass-md);


    border: 1px solid var(--border);


    border-radius: var(--radius-md);


    padding: var(--space-3) var(--space-4);


    color: var(--text-primary);


    font-size: var(--text-base);


    box-shadow: var(--shadow-md);


    animation: cc-toastIn var(--dur-base) var(--ease-ios);


    transition: opacity 0.3s ease, transform 0.3s ease;


}


.toast-notification.error,


.toast--error   { border-color: var(--color-danger); }


.toast-notification.success,


.toast--success { border-color: var(--color-success); }


.toast-notification.info,


.toast--info    { border-color: var(--color-info); }


.toast-notification.warning,


.toast--warning { border-color: var(--color-warning); }





/* Toggle: old .switch and .wa-switch use the new .toggle styling */


.switch,


.wa-switch {


    position: relative;


    display: inline-block;


    width: 46px;


    height: 26px;


    flex-shrink: 0;


}


.switch input,


.wa-switch input {


    opacity: 0;


    width: 0;


    height: 0;


    position: absolute;


}


.switch .slider,


.wa-switch .slider {


    position: absolute;


    inset: 0;


    background: var(--bg-elevated);


    border-radius: var(--radius-full);


    transition: var(--transition-ios);


    cursor: pointer;


    border: 1px solid var(--border);


}


.switch .slider::before,


.wa-switch .slider::before {


    content: '';


    position: absolute;


    top: 3px;


    left: 3px;


    width: 18px;


    height: 18px;


    background: var(--text-primary);


    border-radius: var(--radius-full);


    box-shadow: var(--shadow-sm);


    transition: var(--transition-ios);


}


.switch input:checked + .slider,


.wa-switch input:checked + .slider {


    background: var(--color-success);


    border-color: var(--color-success);


}


.switch input:checked + .slider::before,


.wa-switch input:checked + .slider::before {


    transform: translateX(20px);


}








/* ============================================================================


   PHASE CC v46.2 — UNMISSABLE COSMIC BANNER


   Top-of-page gradient banner that appears on every page load. Slides down


   from top, has a glow, gradient text, and a close button. Auto-dismisses


   after 8 seconds. Cannot be missed.


   ============================================================================ */





/* Ensure #app sits ABOVE the aurora (z-index 0) so content is readable */


#app {


    position: relative;


    z-index: 1;


    height: 100%;


    min-height: 100%;


    width: 100%;


    max-width: 100vw;


    overflow: hidden;


}





.cosmic-banner {


    position: fixed;


    top: 0;


    left: 0;


    right: 0;


    z-index: var(--z-max, 9999);


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 0.75rem;


    padding: 0.875rem 1rem;


    background: linear-gradient(135deg,


        rgba(124, 58, 237, 0.95) 0%,


        rgba(236, 72, 153, 0.95) 50%,


        rgba(245, 158, 11, 0.95) 100%);


    color: #ffffff;


    font-size: 0.9375rem;


    font-weight: 500;


    letter-spacing: 0.01em;


    box-shadow:


        0 4px 24px rgba(124, 58, 237, 0.6),


        0 1px 0 rgba(255, 255, 255, 0.2) inset;


    backdrop-filter: blur(12px);


    -webkit-backdrop-filter: blur(12px);


    animation: cosmic-banner-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,


               cosmic-banner-glow 3.5s ease-in-out infinite;


    border-bottom: 1px solid rgba(255, 255, 255, 0.15);


}


.cosmic-banner.cosmic-banner--leaving {


    animation: cosmic-banner-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;


}


.cosmic-banner__icon {


    font-size: 1.5rem;


    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));


    animation: cosmic-banner-icon 2s ease-in-out infinite;


}


.cosmic-banner__text strong {


    font-weight: 700;


    background: linear-gradient(90deg, #ffffff 0%, #fef3c7 100%);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);


}


.cosmic-banner__close {


    background: rgba(255, 255, 255, 0.18);


    border: 1px solid rgba(255, 255, 255, 0.3);


    color: #ffffff;


    width: 28px;


    height: 28px;


    border-radius: 50%;


    cursor: pointer;


    font-size: 1.125rem;


    line-height: 1;


    display: grid;


    place-items: center;


    transition: background 0.15s ease, transform 0.15s ease;


    flex-shrink: 0;


    -webkit-tap-highlight-color: transparent;


}


.cosmic-banner__close:hover {


    background: rgba(255, 255, 255, 0.32);


    transform: scale(1.1);


}


.cosmic-banner__close:active { transform: scale(0.95); }





@keyframes cosmic-banner-in {


    from { transform: translateY(-100%); opacity: 0; }


    to   { transform: translateY(0);     opacity: 1; }


}


@keyframes cosmic-banner-out {


    from { transform: translateY(0);     opacity: 1; }


    to   { transform: translateY(-100%); opacity: 0; }


}


@keyframes cosmic-banner-glow {


    0%, 100% { box-shadow: 0 4px 24px rgba(124, 58, 237, 0.6), 0 1px 0 rgba(255,255,255,0.2) inset; }


    50%      { box-shadow: 0 4px 36px rgba(236, 72, 153, 0.8), 0 1px 0 rgba(255,255,255,0.3) inset; }


}


@keyframes cosmic-banner-icon {


    0%, 100% { transform: rotate(0deg)   scale(1);    }


    50%      { transform: rotate(20deg)  scale(1.15); }


}





/* Push the entire app down when banner is showing */


body.cosmic-banner-visible #app {


    padding-top: 56px;


}


@media (max-width: 768px) {


    .cosmic-banner {


        font-size: 0.82rem;


        padding: 0.7rem 0.75rem;


        gap: 0.5rem;


    }


    body.cosmic-banner-visible #app {


        padding-top: 52px;


    }


}





/* Light theme banner: still bold, but adjusted for light backgrounds */


body.theme-light .cosmic-banner {


    color: #1a1d2e;


    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.3);


}


body.theme-light .cosmic-banner__text strong {


    background: linear-gradient(90deg, #1a1d2e 0%, #4c1d95 100%);


    -webkit-background-clip: text;


    background-clip: text;


    -webkit-text-fill-color: transparent;


}


body.theme-light .cosmic-banner__close {


    background: rgba(0, 0, 0, 0.12);


    border-color: rgba(0, 0, 0, 0.2);


    color: #1a1d2e;


}


body.theme-light .cosmic-banner__close:hover {


    background: rgba(0, 0, 0, 0.2);


}








/* ================================================================


   v99: Fullscreen Incoming-Call Overlay (gross, klickbar, immer sichtbar)


   ================================================================ */


.incoming-call-overlay {


    position: fixed !important;


    inset: 0 !important;


    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.97));


    backdrop-filter: blur(16px);


    -webkit-backdrop-filter: blur(16px);


    z-index: 99999 !important;


    display: flex;


    align-items: center;


    justify-content: center;


    animation: ico-fade-in 220ms ease-out;


}


.incoming-call-overlay.hidden { display: none !important; }


@keyframes ico-fade-in {



    to { opacity: 1; transform: scale(1); }


}


.ico-content {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 16px;


    max-width: 360px;


    width: 90%;


    padding: 32px 24px;


    text-align: center;


    color: #f1f5f9;


}


.ico-pulse-ring {


    position: absolute;


    top: 35%;


    left: 50%;


    transform: translate(-50%, -50%);


    width: 200px;


    height: 200px;


    border-radius: 50%;


    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0) 70%);


    animation: ico-pulse 2s ease-in-out infinite;


    pointer-events: none;


}


@keyframes ico-pulse {


    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }


    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }


}


.ico-avatar {


    width: 120px;


    height: 120px;


    border-radius: 50%;


    background: linear-gradient(135deg, var(--accent, #6366f1), #8b5cf6);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 3.5rem;


    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.4);


    z-index: 2;


    position: relative;


}


.ico-name {


    margin: 8px 0 0;


    font-size: 1.5rem;


    font-weight: 700;


    color: #f1f5f9;


}


.ico-type {


    margin: 0 0 16px;


    font-size: 1rem;


    color: rgba(241, 245, 249, 0.7);


}


.ico-actions {


    display: flex;


    gap: 24px;


    margin-top: 24px;


    justify-content: center;


    width: 100%;


}


.ico-btn {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 6px;


    min-width: 110px;


    height: 110px;


    border-radius: 50%;


    border: none;


    cursor: pointer;


    color: white;


    font-size: 0.875rem;


    font-weight: 700;


    transition: all 180ms cubic-bezier(0.34, 1.4, 0.64, 1);


    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);


    touch-action: manipulation;


    -webkit-tap-highlight-color: transparent;


}


.ico-btn:hover { transform: scale(1.08); }


.ico-btn:active { transform: scale(0.95); }


.ico-btn-icon { font-size: 2rem; }


.ico-btn-label { font-size: 0.875rem; }


.ico-accept { background: linear-gradient(135deg, #10b981, #059669); }


.ico-accept:hover { background: linear-gradient(135deg, #34d399, #10b981); }


.ico-reject { background: linear-gradient(135deg, #ef4444, #dc2626); }


.ico-reject:hover { background: linear-gradient(135deg, #f87171, #ef4444); }





/* ============== SIDEBAR LOGO (Header) ============== */


.sidebar-logo {


    flex: 1;


    display: flex;


    align-items: center;


    gap: 0.5rem;


    min-width: 0;


}


.sidebar-logo-icon {


    font-size: 1.5rem;


    line-height: 1;


    width: 32px;


    height: 32px;


    object-fit: contain;


    display: inline-block;


    vertical-align: middle;


}


.sidebar-title {


    font-size: 1.125rem;


    font-weight: 700;


    margin: 0;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}





/* ============== USER TILE (eigene Zeile unter Header) ============== */


.me-tile {


    display: flex;


    align-items: center;


    gap: 0.65rem;


    margin: 0.4rem 0.75rem 0.2rem;


    padding: 0.5rem 0.7rem;


    border-radius: 14px;


    cursor: pointer;


    transition: all 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);


    background: rgba(124, 58, 237, 0.06);


    border: 1px solid rgba(124, 58, 237, 0.15);


}


.me-tile:hover { background: rgba(124, 58, 237, 0.1); }


.me-avatar {


    width: 38px;


    height: 38px;


    border-radius: 50%;


    object-fit: cover;


    border: 2px solid var(--primary, #7c3aed);


    flex-shrink: 0;


}


.me-info {


    display: flex;


    flex-direction: column;


    min-width: 0;


    flex: 1;


}





/* v111.8.6: Status-Popup-Trigger rechts in User-Tile (öffnet Status-Aktionen) */


.me-tile { position: relative; }


.me-status-trigger {


    width: 38px;


    height: 38px;


    border-radius: 50%;


    flex-shrink: 0;


    border: 2px solid transparent;


    background:


        linear-gradient(var(--bg-card, #1a1f3a), var(--bg-card, #1a1f3a)) padding-box,


        linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) border-box;


    color: #ec4899;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: transform 0.15s, box-shadow 0.15s;


    padding: 0;


    font-family: inherit;


    position: relative;



    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.me-status-trigger:hover { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2); }


.me-status-trigger:active { transform: scale(0.95); }


.me-status-trigger.open {


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    border-color: #fff;


}


.me-status-trigger .mst-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}


.me-status-trigger .mst-badge {


    position: absolute;


    top: -4px;


    right: -4px;


    min-width: 18px;


    height: 18px;


    padding: 0 5px;


    border-radius: 8px;


    background: linear-gradient(135deg, #f43f5e, #ec4899);


    color: #fff;


    font-size: 0.68rem;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.5);


    border: 2px solid var(--bg-card, #1a1f3a);


    animation: pulseBadge 2s ease-in-out infinite;


}


@keyframes pulseBadge {


    0%, 100% { transform: scale(1); }


    50% { transform: scale(1.15); }


}



/* v141d: Status-Aktionen-Modal - inherits .modal backdrop + centering */
/* Only override: max-width so it stays compact like a status menu */

/* ============================================================
   Status Aktionen — unified modal pattern
   Outer uses .modal class (full backdrop + flex centering)
   Inner uses .modal-content.me-status-menu-inner (card styling)
   ============================================================ */

.me-status-menu {
    /* Just max-width constraint — .modal class provides backdrop + centering */
    max-width: 340px;
    width: 100%;
    z-index: 9999;  /* v141cv129: high z-index to be above all backdrop-filtered parents */
}

/* Inner card: no duplicate backdrop/border — .modal-content provides those */
.me-status-menu-inner {
    min-width: 280px;
    max-width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px;
    width: auto;
    position: relative;  /* v141cv130: for absolute X-button positioning */
}

.msm-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary, #888);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s;
    z-index: 10;
}

.msm-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text, #fff); }
.msm-close:active { background: rgba(255, 255, 255, 0.2); }

/* Menu items */
.msm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: var(--text, #e0e6f0);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
    font-family: inherit;
}

.msm-item:hover { background: rgba(124, 58, 237, 0.15); }
.msm-item:active { background: rgba(124, 58, 237, 0.25); }
.msm-item .msm-ic { width: 22px; text-align: center; font-size: 1rem; }
.msm-item.msm-danger { color: #fca5a5; }
.msm-item.msm-danger:hover { background: rgba(244, 63, 94, 0.15); color: #fecaca; }
.msm-divider { height: 1px; background: var(--border, #2a3050); margin: 4px 0; }

/* ============================================================
   v141d2: Unified modal-content for Freunde + Status Aktionen
   Inherit all .modal-content styles + override max-width per modal
   ============================================================ */

/* Freunde: modal-content card with max-width 500px (like friend-requests) */
#all-friends-modal { z-index: 6001; }

#friend-requests-modal { z-index: 6001; }
#call-history-modal { z-index: 6001; }
.modal-content.afm-card {
    /* modal-content already gives: bg-card, blur, border, shadow, border-radius,
       fade-in-up animation. Only override width. */
    border-radius: var(--radius-xl);
    width: min(500px, 94vw);
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

/* Status Aktionen: modal-content card with compact max-width 340px */
.modal-content.me-status-menu-inner {
    border-radius: var(--radius-xl);
    min-width: 280px;
    max-width: 340px;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px;
    animation: fade-in-up 0.2s var(--ease-bounce);
}


/* ============================================================
   Override rules: .modal-content.X overrides conflicting props
   from .X and enforces unified modal style
   ============================================================ */

/* Freunde: reset .afm-card conflicting props, use modal-content fully */
.modal-content.afm-card {
    background: var(--bg-card);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(500px, 94vw);
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fade-in-up 0.2s var(--ease-bounce);
}

/* Status Aktionen: reset .me-status-menu-inner conflicting props */
.modal-content.me-status-menu-inner {
    background: var(--bg-card);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(340px, 92vw);
    max-width: 340px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px;
    animation: fade-in-up 0.2s var(--ease-bounce);
}

.me-name {


    font-size: 0.9375rem;


    font-weight: 700;


    color: var(--text, #e0e6f0);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.me-status {


    font-size: 0.75rem;


    color: var(--text-muted, #8b95b0);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}





/* ============== ATTACH-POPUP (Composer) ============== */


.attach-popup {


    position: absolute;


    bottom: calc(100% + 0.5rem);


    left: 0;


    background: var(--surface, #1a1f3a);


    border: 1px solid var(--border, #2a3050);


    border-radius: 14px;


    padding: 0.5rem;


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 0.4rem;


    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);


    z-index: 1000;


    min-width: 240px;


}


.attach-popup.hidden { display: none; }


.ap-btn {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 0.25rem;


    padding: 0.6rem 0.4rem;


    background: transparent;


    border: none;


    border-radius: 10px;


    color: var(--text, #e0e6f0);


    font-size: 0.75rem;


    cursor: pointer;


    transition: background 0.15s;


}


.ap-btn:hover { background: rgba(124, 58, 237, 0.2); }


.ap-btn span { font-size: 0.7rem; }





/* ============== ADD-FRIEND-BAR (v111.3) ============== */


.add-friend-bar {


    padding: 0.4rem 0.75rem;


    border-bottom: 1px solid var(--border);


}


.find-friends-btn {


    width: 100%;


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 0.5rem;


    padding: 0.55rem 0.875rem;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    border: none;


    border-radius: 12px;


    color: #fff;


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);


    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);


    font-family: inherit;


}


.find-friends-btn:hover {


    transform: translateY(-1px);


    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.4);


}


.find-friends-btn:active { transform: translateY(0); }


.ff-icon { font-size: 1.125rem; line-height: 1; }





/* ============== VOICE-MEMO-BTN (v111.3) ============== */


.voice-memo-btn {


    background: rgba(124, 58, 237, 0.15);


    color: #c084fc;


    transition: all 0.18s;


}


.voice-memo-btn:hover { background: rgba(124, 58, 237, 0.3); }


.voice-memo-btn.recording {


    background: linear-gradient(135deg, #ef4444, #dc2626);


    color: #fff;


    animation: pulse-rec 1.2s ease-in-out infinite;


}


@keyframes pulse-rec {


    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }


    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }


}





/* ============== FIND-FRIENDS-MODAL (v111.3) ============== */


.ff-modal {


    position: fixed;


    inset: 0;


    z-index: 1000;


    display: flex;


    align-items: center;


    justify-content: center;


}


.ff-modal.hidden { display: none; }


.ff-modal-backdrop {


    position: absolute;


    inset: 0;


    background: rgba(0, 0, 0, 0.6);


    backdrop-filter: blur(6px);


    -webkit-backdrop-filter: blur(6px);


    cursor: pointer;


    animation: ff-fade 0.2s ease;


}


.ff-modal-card {


    position: relative;


    width: min(480px, 92vw);


    max-height: 85vh;


    background: var(--bg-card, #1a1f3a);


    border: 1px solid var(--border, #2a3050);


    border-radius: 16px;


    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);


    display: flex;


    flex-direction: column;


    overflow: hidden;


    animation: ff-pop 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);


}


@keyframes ff-fade { from { opacity: 0; } to { opacity: 1; } }


@keyframes ff-pop {


    from { opacity: 0; transform: scale(0.92); }


    to { opacity: 1; transform: scale(1); }


}


.ff-modal-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    padding: 1rem 1.25rem;


    border-bottom: 1px solid var(--border, #2a3050);


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(236, 72, 153, 0.08));


}


.ff-modal-header h3 {


    margin: 0;


    font-size: 1.125rem;


    font-weight: 700;


    color: var(--text, #e0e6f0);


}


.ff-modal-close {


    width: 32px;


    height: 32px;


    border-radius: 50%;


    border: none;


    background: rgba(255, 255, 255, 0.08);


    color: var(--text, #e0e6f0);


    font-size: 1rem;


    cursor: pointer;


    transition: background 0.15s;


    display: flex;


    align-items: center;


    justify-content: center;


}


.ff-modal-close:hover { background: rgba(239, 68, 68, 0.3); }


.ff-modal-tabs {


    display: flex;


    gap: 2px;


    padding: 0.4rem 0.6rem;


    border-bottom: 1px solid var(--border, #2a3050);


    background: var(--bg-elevated, rgba(255, 255, 255, 0.02));


    overflow-x: auto;


    scrollbar-width: none;


}


.ff-modal-tabs::-webkit-scrollbar { display: none; }


.ff-tab {


    flex: 1;


    min-width: fit-content;


    padding: 0.5rem 0.7rem;


    background: transparent;


    border: none;


    color: var(--text-secondary, #8b95b0);


    font-size: 0.82rem;


    font-weight: 600;


    cursor: pointer;


    border-radius: 8px;


    transition: all 0.15s;


    white-space: nowrap;


    font-family: inherit;


    position: relative;


}


.ff-tab:hover { background: rgba(124, 58, 237, 0.12); color: var(--text, #e0e6f0); }


.ff-tab.active {


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(236, 72, 153, 0.15));


    color: #fff;


}


.ff-badge {


    display: inline-block;


    min-width: 18px;


    height: 18px;


    padding: 0 5px;


    border-radius: 8px;


    background: linear-gradient(135deg, #ef4444, #dc2626);


    color: #fff;


    font-size: 0.7rem;


    font-weight: 700;


    line-height: 18px;


    text-align: center;


    margin-left: 4px;


}


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


.ff-modal-body {


    flex: 1;


    overflow-y: auto;


    padding: 1rem 1.25rem;


}


.ff-tab-pane { display: none; }


.ff-tab-pane.active { display: block; }


.ff-input {


    width: 100%;


    padding: 0.65rem 0.875rem;


    background: var(--bg-input, #0f1426);


    border: 1px solid var(--border, #2a3050);


    border-radius: 10px;


    color: var(--text, #e0e6f0);


    font-size: 0.9375rem;


    margin-bottom: 0.8rem;


    font-family: inherit;


}


.ff-input:focus {


    outline: none;


    border-color: var(--primary, #7c3aed);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);


}


.ff-hint {


    color: var(--text-secondary, #8b95b0);


    font-size: 0.875rem;


    text-align: center;


    margin: 1rem 0;


}


.ff-results {


    display: flex;


    flex-direction: column;


    gap: 0.5rem;


}


.ff-user-card {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    padding: 0.65rem 0.8rem;


    background: var(--bg-elevated, rgba(255, 255, 255, 0.04));


    border: 1px solid var(--border, #2a3050);


    border-radius: 12px;


    transition: background 0.15s;


}


.ff-user-card:hover { background: rgba(124, 58, 237, 0.1); }


.ff-user-card { cursor: pointer; }


.ff-manage-card { cursor: pointer; outline: none; }


.ff-manage-card:focus,


.ff-manage-card:focus-visible { box-shadow: 0 0 0 2px #7c3aed; }


.ff-manage-btn {


    background: rgba(124, 58, 237, 0.15);


    border: none;


    color: #fff;


    width: 36px; height: 36px;


    border-radius: 50%;


    cursor: pointer;


    font-size: 1rem;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 0.15s, transform 0.15s;


    flex-shrink: 0;


}


.ff-manage-btn:hover { background: rgba(124, 58, 237, 0.4); transform: scale(1.05); }


.ff-user-card img, .ff-avatar-placeholder {


    width: 42px;


    height: 42px;


    border-radius: 50%;


    object-fit: cover;


    flex-shrink: 0;


    background: linear-gradient(135deg, #7c3aed, #ec4899);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 700;


    font-size: 1rem;


}


.ff-user-info { flex: 1; min-width: 0; }


.ff-user-name {


    font-weight: 600;


    color: var(--text, #e0e6f0);


    font-size: 0.9375rem;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.ff-user-status {


    font-size: 0.78rem;


    color: var(--text-secondary, #8b95b0);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.ff-user-actions {


    display: flex;


    gap: 0.3rem;


    flex-shrink: 0;


}


.ff-btn {


    padding: 0.4rem 0.7rem;


    border: none;


    border-radius: 8px;


    font-size: 0.78rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.15s;


    font-family: inherit;


    white-space: nowrap;


}


.ff-btn.primary { background: linear-gradient(135deg, #7c3aed, #ec4899); color: #fff; }


.ff-btn.primary:hover { transform: translateY(-1px); }


.ff-btn.success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }


.ff-btn.danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; }


.ff-btn.danger:hover { background: rgba(239, 68, 68, 0.4); }


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


.ff-invite-link {


    display: flex;


    gap: 0.5rem;


    margin: 0.8rem 0;


}


.ff-invite-link .ff-input { margin-bottom: 0; flex: 1; }


.ff-invite-link .ff-btn { flex-shrink: 0; }


.ff-invite-qr {


    text-align: center;


    margin: 1rem 0;


    padding: 1rem;


    background: #fff;


    border-radius: 12px;


    display: inline-block;


    width: 100%;


}


.ff-invite-qr img {


    max-width: 200px;


    width: 100%;


    height: auto;


    display: inline-block;


}





/* ============== STATUS-BEREICH (v111.5) ============== */


.status-section {


    padding: 0 0.75rem 0.6rem;


    border-bottom: 1px solid var(--border);


    transition: background 0.4s;


}


.status-section.flash-highlight {


    background: rgba(124, 58, 237, 0.18);


}


.create-status-btn {


    width: 100%;


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 0.5rem;


    padding: 0.55rem 0.875rem;


    margin: 0.5rem 0;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    border: none;


    border-radius: 12px;


    color: #fff;


    font-size: 0.88rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);


    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);


    font-family: inherit;


}


.create-status-btn:hover {


    transform: translateY(-1px);


    box-shadow: 0 5px 14px rgba(124, 58, 237, 0.4);


}


.create-status-btn:active { transform: translateY(0); }


.cs-icon { font-size: 1.0625rem; line-height: 1; }


.cs-text { letter-spacing: 0.2px; }





/* v111.7: Friend-Management-Modal (Bearbeiten + Alias + Visibility) */


.fm-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl, 28px);
    padding: 0;
    width: min(92vw, 460px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.16));
    display: flex;
    flex-direction: column;
    animation: fade-in-up 0.3s var(--ease-bounce);

    transition: all var(--duration-fast) var(--ease-out);
}


.fm-card .sc-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 14px 18px;


    border-bottom: 1px solid var(--wa-divider);


}


.fm-card h3 { margin: 0; font-size: 1.0625rem; color: var(--wa-text); }


.fm-body {


    padding: 18px;


    display: flex;


    flex-direction: column;


    gap: 18px;


}


.fm-header {


    display: flex;


    align-items: center;


    gap: 14px;


    padding-bottom: 12px;


    border-bottom: 1px solid var(--wa-divider);


}


.fm-avatar {


    width: 60px;


    height: 60px;


    border-radius: 50%;


    object-fit: cover;


    border: 2px solid var(--primary, #7c3aed);


    flex-shrink: 0;


}


.fm-name { margin: 0; font-size: 1.15rem; color: var(--wa-text); font-weight: 700; }


.fm-username { color: var(--wa-text-muted, #8b95b0); font-size: 0.875rem; margin-top: 2px; }


.fm-section {


    display: flex;


    flex-direction: column;


    gap: 8px;


}


.fm-section-actions {


    border-top: 1px solid var(--wa-divider);


    padding-top: 16px;


    gap: 10px;


}


.fm-label {


    font-size: 0.82rem;


    font-weight: 600;


    color: var(--wa-text-secondary, #b5bdd0);


    margin-bottom: 2px;


}


.fm-input {


    width: 100%;


    background: var(--wa-bg-2, #0f1426);


    color: var(--wa-text, #e0e6f0);


    border: 1px solid var(--wa-divider, #2a3050);


    border-radius: 8px;


    padding: 10px 12px;


    font-size: 0.92rem;


    outline: none;


    font-family: inherit;


    transition: border-color 0.15s, box-shadow 0.15s;


}


.fm-input:focus {


    border-color: var(--primary, #7c3aed);


    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);


}


.fm-hint {


    font-size: 0.75rem;


    color: var(--wa-text-muted, #8b95b0);


    margin-top: 2px;


}


.fm-toggle {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 8px 10px;


    background: var(--wa-bg-2, #0f1426);


    border: 1px solid var(--wa-divider, #2a3050);


    border-radius: 8px;


    cursor: pointer;


    transition: border-color 0.15s;


    font-size: 0.88rem;


    color: var(--wa-text, #e0e6f0);


}


.fm-toggle:hover { border-color: var(--primary, #7c3aed); }


.fm-toggle input { width: 16px; height: 16px; cursor: pointer; }


.fm-btn {


    width: 100%;


    padding: 11px 14px;


    border: 1px solid var(--wa-divider, #2a3050);


    border-radius: 8px;


    background: var(--wa-bg-2, #0f1426);


    color: var(--wa-text, #e0e6f0);


    font-size: 0.92rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.15s;


    font-family: inherit;


}


.fm-btn:hover { transform: translateY(-1px); }


.fm-btn.primary {


    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);


    border-color: transparent;


    color: #fff;


    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);


}


.fm-btn.danger {


    background: rgba(239, 68, 68, 0.12);


    border-color: rgba(239, 68, 68, 0.4);


    color: #fca5a5;


}


.fm-btn.danger:hover { background: rgba(239, 68, 68, 0.2); }





/* v111.7: Alias-Badge im Friend-Item */


.fi-alias-badge {


    display: inline-block;


    margin-left: 6px;


    font-size: 0.6rem;


    padding: 1px 6px;


    background: rgba(236, 72, 153, 0.15);


    color: #f9a8d4;


    border-radius: 6px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.4px;


    vertical-align: 1px;


}





/* v111.8: Install-Modal — Download-Grid für PC/Handy/Android/iOS */


.install-card {


    max-width: 720px;


    width: 92vw;


    max-height: 88vh;


    display: flex;


    flex-direction: column;


    overflow: hidden;


}


.install-body {


    padding: 18px 20px 20px;


    overflow-y: auto;


    flex: 1;


    line-height: 1.45;


}


.install-intro {


    margin: 0 0 16px;


    color: var(--text-secondary, #b5bdd0);


    font-size: 0.88rem;


}


.install-intro code {


    background: var(--bg-secondary, #0f1426);


    padding: 2px 6px;


    border-radius: 4px;


    font-size: 0.78rem;


}


.install-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 12px;


    margin-bottom: 16px;


}


@media (max-width: 540px) {


    .install-grid { grid-template-columns: 1fr; }


}


.install-tile {


    background: var(--bg-secondary, #0f1426);


    border: 1px solid var(--border, #2a3050);


    border-radius: 12px;


    padding: 16px;


    display: flex;


    flex-direction: column;


    align-items: center;


    text-align: center;


    gap: 8px;


    transition: all 0.18s;


}


.install-tile:hover {


    border-color: var(--primary, #7c3aed);


    transform: translateY(-2px);


    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.15);


}


.install-tile .it-icon {


    font-size: 2.4rem;


    line-height: 1;


}


.install-tile .it-title {


    font-size: 1.125rem;


    font-weight: 700;


    color: var(--text, #e0e6f0);


}


.install-tile .it-meta {


    font-size: 0.78rem;


    color: var(--text-muted, #8b95b0);


    margin-bottom: 4px;


}


.it-btn {


    width: 100%;


    padding: 9px 10px;


    border-radius: 8px;


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    text-align: center;


    text-decoration: none;


    display: inline-block;


    transition: all 0.15s;


    border: 1px solid transparent;


    font-family: inherit;


}


.it-btn.primary {


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2);


}


.it-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); }


.it-btn.secondary {


    background: var(--bg-primary, #1a1f3a);


    color: var(--text, #e0e6f0);


    border-color: var(--border, #2a3050);


}


.it-btn.secondary:hover { border-color: var(--primary, #7c3aed); }


.it-badge {


    font-size: 0.7rem;


    padding: 2px 8px;


    background: rgba(124, 58, 237, 0.15);


    color: #c4b5fd;


    border-radius: 6px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.3px;


}


.it-badge.soon {


    background: rgba(245, 158, 11, 0.15);


    color: #fcd34d;


}


.install-tips {


    background: var(--bg-secondary, #0f1426);


    border: 1px solid var(--border, #2a3050);


    border-radius: 10px;


    padding: 14px 18px;


    margin-bottom: 12px;


}


.install-tips h4 {


    margin: 0 0 8px;


    font-size: 0.9375rem;


    color: var(--text, #e0e6f0);


}


.install-tips ol {


    margin: 0;


    padding-left: 22px;


    color: var(--text-secondary, #b5bdd0);


    font-size: 0.875rem;


    line-height: 1.7;


}


.install-tip-box {


    margin-top: 12px;


    padding: 12px 16px;


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(59, 130, 246, 0.1));


    border-radius: 10px;


    font-size: 0.83rem;


    color: var(--text-secondary, #b5bdd0);


    border: 1px solid rgba(124, 58, 237, 0.25);


}


.install-update-box {


    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.1)) !important;


    border-color: rgba(16, 185, 129, 0.4) !important;


}


.install-update-box code {


    background: rgba(0, 0, 0, 0.2);


    padding: 1px 6px;


    border-radius: 4px;


    font-size: 0.78rem;


    color: #6ee7b7;


}





/* v111.8: Admin-Stat — Top-Chatter Karte */


.admin-stat-card-wide {


    grid-column: 1 / -1;


    padding: 14px 16px;


}


.admin-tu-list {


    margin-top: 10px;


    display: flex;


    flex-direction: column;


    gap: 6px;


}


.admin-tu-row {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 8px 10px;


    background: var(--bg-secondary, #0f1426);


    border: 1px solid var(--border, #2a3050);


    border-radius: 8px;


    transition: all 0.15s;


}


.admin-tu-row:hover { border-color: var(--primary, #7c3aed); transform: translateX(2px); }


.admin-tu-rank {


    font-size: 1.25rem;


    min-width: 32px;


    text-align: center;


}


.admin-tu-avatar {


    width: 36px;


    height: 36px;


    border-radius: 50%;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 0.9375rem;


    flex-shrink: 0;


}


.admin-tu-info {


    flex: 1;


    min-width: 0;


}


.admin-tu-name {


    font-size: 0.92rem;


    font-weight: 600;


    color: var(--text, #e0e6f0);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.admin-tu-sub {


    font-size: 0.75rem;


    color: var(--text-muted, #8b95b0);


}


.admin-tu-count {


    font-weight: 700;


    color: var(--primary, #7c3aed);


    font-size: 0.9375rem;


    background: rgba(124, 58, 237, 0.1);


    padding: 4px 10px;


    border-radius: 8px;


}





/* v111.8: Admin-User 3-Punkte-Menu */


.admin-user-menu {


    background: var(--wa-bg-1, #1a1f3a);


    border: 1px solid var(--wa-divider, #2a3050);


    border-radius: 12px;


    padding: 6px;


    min-width: 260px;


    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);


    z-index: 100;


    display: flex;


    flex-direction: column;


    gap: 2px;


}


.admin-menu-header {


    padding: 10px 12px 8px;


    color: var(--wa-text, #e0e6f0);


    font-weight: 700;


    border-bottom: 1px solid var(--wa-divider, #2a3050);


    margin-bottom: 4px;


    font-size: 0.875rem;


    display: flex;


    align-items: center;


    gap: 6px;


}


.admin-menu-section {


    padding: 8px 12px 4px;


    font-size: 0.7rem;


    text-transform: uppercase;


    letter-spacing: 0.5px;


    color: var(--wa-text-secondary, #8a92a8);


    font-weight: 600;


    margin-top: 6px;


}


.admin-menu-section:first-child { margin-top: 0; }


.admin-menu-item {


    display: flex;


    align-items: center;


    gap: 8px;


    width: 100%;


    text-align: left;


    background: transparent;


    border: none;


    padding: 9px 12px;


    border-radius: 7px;


    color: var(--wa-text, #e0e6f0);


    cursor: pointer;


    font-size: 0.88rem;


    font-family: inherit;


    transition: background 0.12s, transform 0.08s;


    line-height: 1.3;


}


.admin-menu-item:hover { background: rgba(124, 58, 237, 0.18); transform: translateX(2px); }


.admin-menu-item.danger { color: #fca5a5; }


.admin-menu-item.danger:hover { background: rgba(239, 68, 68, 0.18); }


.admin-menu-item.success { color: #86efac; }


.admin-menu-item.success:hover { background: rgba(34, 197, 94, 0.18); }


.admin-menu-divider {


    height: 1px;


    background: var(--wa-divider, #2a3050);


    margin: 4px 8px;


}





/* v111.8: Admin-Buttons — 3-Punkte + Pakete */


.admin-btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    background: rgba(124, 58, 237, 0.1);


    border: 1px solid rgba(124, 58, 237, 0.3);


    border-radius: 8px;


    color: var(--primary, #7c3aed);


    font-size: 0.875rem;


    cursor: pointer;


    transition: background 0.15s, border-color 0.15s, transform 0.1s;


    padding: 6px 10px;


    min-width: 36px;


    min-height: 36px;


}


.admin-btn:hover {


    background: rgba(124, 58, 237, 0.22);


    border-color: rgba(124, 58, 237, 0.6);


}


.admin-btn:active { transform: scale(0.96); }


.admin-btn.danger {


    background: rgba(239, 68, 68, 0.12);


    border-color: rgba(239, 68, 68, 0.35);


    color: #fca5a5;


}


.admin-btn.danger:hover {


    background: rgba(239, 68, 68, 0.22);


    border-color: rgba(239, 68, 68, 0.6);


}


.admin-btn-menu { padding: 6px 10px; font-size: 1.125rem; }


.admin-btn-features { padding: 6px 10px; }


.admin-user-features {


    margin-top: 4px;


    font-size: 0.72rem;


    color: var(--primary, #7c3aed);


    background: rgba(124, 58, 237, 0.1);


    padding: 2px 8px;


    border-radius: 6px;


    display: inline-block;


}





/* v111.8: Feature-Pakete Modal */


.auf-card {


    background: var(--wa-bg-1, #1a1f3a);


    border-radius: 14px;


    padding: 0;


    width: min(95vw, 640px);


    max-height: 88vh;


    display: flex;


    flex-direction: column;


    overflow: hidden;


    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);


}


.auf-card .sc-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 14px 18px;


    border-bottom: 1px solid var(--wa-divider, #2a3050);


}


.auf-card h3 { margin: 0; font-size: 1rem; color: var(--wa-text); }


.auf-body {


    padding: 18px;


    overflow-y: auto;


    flex: 1;


}


.auf-hint {


    margin: 0 0 14px;


    color: var(--wa-text-muted, #8b95b0);


    font-size: 0.875rem;


    padding: 8px 12px;


    background: rgba(245, 158, 11, 0.12);


    border-left: 3px solid #fcd34d;


    border-radius: 6px;


}


.auf-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));


    gap: 10px;


    margin-bottom: 16px;


}


.auf-tile {


    padding: 14px 12px;


    background: var(--wa-bg-2, #0f1426);


    border: 2px solid var(--border, #2a3050);


    border-radius: 10px;


    cursor: pointer;


    text-align: center;


    transition: all 0.15s;


    user-select: none;


}


.auf-tile:hover { border-color: var(--primary, #7c3aed); transform: translateY(-2px); }


.auf-tile.active {


    background: rgba(124, 58, 237, 0.18);


    border-color: var(--primary, #7c3aed);


    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);


}


.auf-icon { font-size: 1.5rem; margin-bottom: 4px; }


.auf-name { font-size: 0.88rem; font-weight: 600; color: var(--wa-text); margin-bottom: 2px; }


.auf-desc { font-size: 0.72rem; color: var(--wa-text-muted, #8b95b0); margin-bottom: 8px; }


.auf-check { font-size: 0.75rem; color: var(--wa-text-muted, #8b95b0); font-weight: 600; }


.auf-tile.active .auf-check { color: #86efac; }


.auf-actions {


    display: flex;


    justify-content: flex-end;


    padding-top: 12px;


    border-top: 1px solid var(--wa-divider, #2a3050);


}





/* v111.8.7: Alle-Freunde Modal */


.afm-modal {


    position: fixed;


    inset: 0;


    background: rgba(0, 0, 0, 0.55);


    backdrop-filter: blur(4px);


    z-index: 200;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 20px;


    animation: fadeIn 0.18s ease-out;


}


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


.afm-card {


    background: var(--bg-card, #1a1f3a);


    border: 1px solid var(--border, #2a3050);


    border-radius: 14px;


    box-shadow: 0 12px 48px rgba(0,0,0,0.5);


    width: 100%;


    max-width: 480px;


    max-height: 80vh;


    display: flex;


    flex-direction: column;


    overflow: hidden;


}


.afm-header {


    display: flex;


    align-items: center;


    justify-content: space-between;


    padding: 14px 16px;


    border-bottom: 1px solid var(--border, #2a3050);


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));


}


.afm-header h3 {


    margin: 0;


    font-size: 1rem;


    color: var(--text-primary, #ffffff);


}


.afm-tabs {


    display: flex;


    gap: 4px;


    padding: 8px 12px 0;


    border-bottom: 1px solid var(--border, #2a3050);


    background: var(--bg-card, rgba(38,41,65,0.75));


}


.afm-tab {


    flex: 1;


    padding: 8px 4px;


    background: transparent;


    border: none;


    border-bottom: 2px solid transparent;


    color: var(--text-muted, #c0bfd6);


    font-size: 0.78rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.12s;


    font-family: inherit;


    border-radius: 0;



    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.afm-tab:hover { color: var(--text-primary, #ffffff); }


.afm-tab.active {


    color: var(--text-primary, #ffffff);


    border-bottom-color: #7c3aed;


}


.afm-close {


    background: transparent;


    border: none;


    color: var(--text-muted, #c0bfd6);


    font-size: 1.25rem;


    cursor: pointer;


    width: 30px;


    height: 30px;


    border-radius: 50%;


    transition: background 0.12s;


    font-family: inherit;


}


.afm-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #ffffff); }


.afm-search {


    border: none;


    border-bottom: 1px solid var(--border, #2a3050);


    background: var(--bg-card, rgba(38,41,65,0.75));


    color: var(--text-primary, #ffffff);


    padding: 12px 16px;


    font-size: 0.875rem;


    outline: none;


    font-family: inherit;


}


.afm-search::placeholder { color: var(--text-muted, #8b95b0); }


.afm-list {


    flex: 1;


    overflow-y: auto;


    padding: 8px;


}


.afm-item {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 8px 12px;


    border-radius: 8px;


    cursor: pointer;


    transition: background 0.12s;


}


.afm-item:hover { background: rgba(124, 58, 237, 0.15); }


.afm-item.is-hidden { opacity: 0.65; }


.afm-item.is-hidden:hover { opacity: 1; }


.afm-more-btn {


    background: transparent;


    border: none;


    color: var(--text-muted, #c0bfd6);


    cursor: pointer;


    width: 32px;


    height: 32px;


    border-radius: 50%;


    font-size: 1.25rem;


    line-height: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    transition: opacity 0.12s, background 0.12s, color 0.12s;


    flex-shrink: 0;


    font-family: inherit;


}


.afm-item:hover .afm-more-btn { opacity: 1; }


.afm-more-btn:hover { background: rgba(124, 58, 237, 0.25); color: var(--text-primary, #ffffff); }


.afm-hidden-text { color: var(--text-muted, #8b95b0); font-style: italic; font-size: 0.78rem; }





/* v111.8.8: AFM Context-Menu (3-Punkte-Dropdown) */


.afm-context-menu {


    background: var(--bg-card, rgba(38,41,65,0.95));


    border: 1px solid var(--border, #2a3050);


    border-radius: 10px;


    box-shadow: 0 8px 32px rgba(0,0,0,0.45);


    padding: 4px;


    min-width: 200px;


    z-index: 7000;


    animation: dropFade 0.18s ease-out;


}


.afm-ctx-header {


    padding: 6px 12px;


    font-size: 0.78rem;


    color: var(--text-muted, #c0bfd6);


    border-bottom: 1px solid var(--border, #2a3050);


    margin-bottom: 4px;


    font-weight: 600;


}


.afm-ctx-item {


    display: flex;


    align-items: center;


    gap: 8px;


    width: 100%;


    padding: 8px 12px;


    background: transparent;


    border: none;


    color: var(--text-primary, #ffffff);


    font-size: 0.875rem;


    text-align: left;


    cursor: pointer;


    border-radius: 6px;


    transition: background 0.12s;


    font-family: inherit;


}


.afm-ctx-item:hover { background: rgba(124, 58, 237, 0.2); }


.afm-ctx-divider { height: 1px; background: var(--border, #2a3050); margin: 4px 0; }


.afm-avatar {


    width: 40px;


    height: 40px;


    border-radius: 50%;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    display: flex;


    align-items: center;


    justify-content: center;


    font-weight: 700;


    font-size: 1rem;


    flex-shrink: 0;


    overflow: hidden;


    position: relative;


}


.afm-avatar img { width: 100%; height: 100%; object-fit: cover; }


.afm-dot {


    position: absolute;


    bottom: 2px;


    right: 2px;


    width: 10px;


    height: 10px;


    border-radius: 50%;


    background: #64748b;


    border: 2px solid var(--bg-card, #1a1f3a);


}


.afm-dot.online { background: #22c55e; }


.afm-info { flex: 1; min-width: 0; }


.afm-name {


    font-size: 0.875rem;


    font-weight: 600;


    color: var(--text-primary, #ffffff);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.afm-meta { font-size: 0.75rem; color: var(--text-muted, #c0bfd6); margin-top: 1px; }


.afm-online-text { color: #22c55e; font-weight: 600; }


.afm-empty {


    text-align: center;


    padding: 40px 20px;


    color: var(--text-muted, #c0bfd6);


}


.afm-empty-icon { font-size: 2.5rem; margin-bottom: 8px; }


.afm-empty-sub { font-size: 0.82rem; margin-top: 4px; }


.afm-footer {


    padding: 10px 12px;


    border-top: 1px solid var(--border, #2a3050);


    background: var(--bg-card-2, #131830);


}


.afm-footer-btn {


    width: 100%;


    padding: 10px;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    border: none;


    border-radius: 8px;


    font-size: 0.875rem;


    font-weight: 600;


    cursor: pointer;


    transition: transform 0.12s;


    font-family: inherit;


}


.afm-footer-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3); }





/* v111.8.7: Friend-Action Modal */


.fam-modal {


    position: fixed;


    inset: 0;


    background: rgba(0, 0, 0, 0.55);


    backdrop-filter: blur(4px);


    z-index: 210;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 20px;


    animation: fadeIn 0.18s ease-out;


}


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


.fam-card {


    background: var(--bg-card, #1a1f3a);


    border: 1px solid var(--border, #2a3050);


    border-radius: 14px;


    box-shadow: 0 12px 48px rgba(0,0,0,0.5);


    width: 100%;


    max-width: 380px;


    overflow: hidden;


}


.fam-header {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 14px 16px;


    border-bottom: 1px solid var(--border, #2a3050);


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));


}


.fam-avatar {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    object-fit: cover;


    border: 2px solid rgba(255,255,255,0.1);


}


.fam-info { flex: 1; min-width: 0; }


.fam-name {


    font-size: 0.9375rem;


    font-weight: 700;


    color: var(--text-primary, #ffffff);


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.fam-status { font-size: 0.78rem; color: var(--text-muted, #c0bfd6); margin-top: 2px; }


.fam-close {


    background: transparent;


    border: none;


    color: var(--text-muted, #c0bfd6);


    font-size: 1.125rem;


    cursor: pointer;


    width: 28px;


    height: 28px;


    border-radius: 50%;


    transition: background 0.12s;


    font-family: inherit;


}


.fam-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #ffffff); }


.fam-actions {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 8px;


    padding: 12px;


}


.fam-action {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    gap: 6px;


    padding: 14px 8px;


    min-height: 80px;


    background: var(--bg-card-2, #131830);


    border: 1px solid var(--border, #2a3050);


    border-radius: 10px;


    color: var(--text-primary, #ffffff);


    cursor: pointer;


    transition: all 0.15s;


    font-family: inherit;


    font-size: 0.875rem;


    font-weight: 600;


}


.fam-action > span:not(.fam-icon) {


    color: var(--text-primary, #ffffff);


    font-size: 0.875rem;


    font-weight: 600;


    line-height: 1.2;


}


.fam-action:hover {


    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.15));


    transform: translateY(-1px);


    border-color: rgba(124, 58, 237, 0.5);


}


.fam-action.fam-danger {


    grid-column: span 2;


    flex-direction: row;


    justify-content: center;


    color: #fca5a5;


}


.fam-action.fam-danger:hover {


    background: rgba(244, 63, 94, 0.15);


    border-color: rgba(244, 63, 94, 0.5);


}


.fam-icon { font-size: 1.5rem; }





/* v111.8.4: Mein-Status KPI-Kachel (gleiche Größe wie andere KPIs) */


.kpi-my-status .kpi-avatar {


    width: 26px;


    height: 26px;


    border-radius: 50%;


    background: linear-gradient(135deg, var(--bg-card, #1a1f3a), var(--bg-card, #1a1f3a)) padding-box,


                linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) border-box;


    border: 2px solid transparent;


    display: flex;


    align-items: center;


    justify-content: center;


    color: #ec4899;


    font-weight: 700;


    font-size: 0.9375rem;


    overflow: hidden;


    margin-bottom: 2px;


}


.kpi-my-status .kpi-avatar img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    border-radius: 50%;


}


.kpi-my-status.has-status .kpi-avatar {


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


}


.kpi-my-status.has-status .kpi-value {


    color: #f9a8d4;


    font-weight: 700;


}





/* v111.8: Settings-Modal — Buttons fixen, nicht überlappen */


.wa-modal-body { position: relative; }


.modal-fixed-actions {


    position: sticky;


    bottom: 0;


    background: linear-gradient(180deg, transparent 0%, var(--bg-card, #1a1f3a) 30%);


    padding: 16px 0 0;


    margin-top: 24px;


    border-top: 1px solid var(--border, #2a3050);


    display: flex;


    justify-content: flex-end;


    gap: 10px;


    z-index: 2;


}





/* v111.6: Stories-Modal */


.stories-card {


    background: var(--wa-bg-1, #1a1f3a);


    border-radius: 14px;


    padding: 0;


    width: min(92vw, 560px);


    max-height: 80vh;


    min-height: 280px;


    overflow: hidden;


    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);


    display: flex;


    flex-direction: column;


}


.stories-card .sc-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 14px 18px;


    border-bottom: 1px solid var(--wa-divider);


}


.stories-card h3 { margin: 0; font-size: 1.0625rem; color: var(--wa-text); }


.stories-grid {


    padding: 18px;


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));


    gap: 14px;


    overflow-y: auto;


    flex: 1;


}


.stories-grid:empty::before {


    content: 'Noch keine Status-Updates von anderen Usern';


    display: block;


    grid-column: 1 / -1;


    text-align: center;


    color: var(--wa-text-muted, #8b95b0);


    font-size: 0.875rem;


    padding: 40px 12px;


}


.story-card {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 6px;


    padding: 10px 6px;


    border-radius: 12px;


    cursor: pointer;


    transition: all 0.15s;


    border: 1px solid transparent;


}


.story-card:hover { background: rgba(124, 58, 237, 0.1); transform: translateY(-2px); }


.story-card .sc-avatar {


    width: 60px;


    height: 60px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-input, #0f1426);


    color: var(--text, #e0e6f0);


    font-weight: 700;


    font-size: 1.5rem;


    overflow: hidden;


    border: 2.5px solid var(--border, #2a3050);


}


.story-card .sc-avatar img { width: 100%; height: 100%; object-fit: cover; }


.story-card.has-new .sc-avatar {


    border: 3px solid transparent;


    background: linear-gradient(var(--bg-input, #0f1426), var(--bg-input, #0f1426)) padding-box,


                linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) border-box;


}


.story-card.viewed .sc-avatar { opacity: 0.55; }


.story-card.is-mine .sc-avatar {


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


}


.story-card .sc-name {


    font-size: 0.78rem;


    font-weight: 600;


    color: var(--text, #e0e6f0);


    max-width: 96px;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


    text-align: center;


}


.story-card .sc-meta {


    font-size: 0.65rem;


    color: var(--wa-text-muted, #8b95b0);


}





/* v111.5: KPI-Status Badge (Notification) */


.wa-kpi.has-badge .kpi-value {


    background: #ef4444;


    color: #fff;


    border-radius: 12px;


    min-width: 22px;


    padding: 1px 7px;


    font-weight: 700;


    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);


    animation: kpi-badge-pulse 1.6s ease-in-out infinite;


}


.wa-kpi.has-badge .kpi-icon { transform: scale(1.1); }


@keyframes kpi-badge-pulse {


    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3); }


    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.0); }


}





/* Status-Feed (Stories) - horizontal scrollbare Bubbles */


.status-feed {


    display: flex;


    gap: 0.5rem;


    padding: 0.4rem 0 0.6rem;


    overflow-x: auto;


    scrollbar-width: thin;


    min-height: 80px;


}


.status-feed::-webkit-scrollbar { height: 4px; }


.status-feed::-webkit-scrollbar-thumb { background: var(--border, #2a3050); border-radius: 2px; }


.status-bubble {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 0.25rem;


    cursor: pointer;


    flex-shrink: 0;


    min-width: 56px;


    text-align: center;


    transition: transform 0.15s;


}


.status-bubble:hover { transform: translateY(-2px); }


.status-bubble .sb-avatar {


    width: 50px;


    height: 50px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-input, #0f1426);


    color: var(--text, #e0e6f0);


    font-weight: 700;


    font-size: 1.125rem;


    overflow: hidden;


    border: 2px solid var(--border, #2a3050);


}


.status-bubble .sb-avatar img { width: 100%; height: 100%; object-fit: cover; }


.status-bubble.has-new .sb-avatar {


    border: 2.5px solid transparent;


    background: linear-gradient(var(--bg-input, #0f1426), var(--bg-input, #0f1426)) padding-box,


                linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) border-box;


}


.status-bubble.viewed .sb-avatar {


    border: 2px solid var(--text-muted, #8b95b0);


    opacity: 0.6;


}


.status-bubble.is-mine.has-status .sb-avatar {


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    border-color: #fff;


}


.status-bubble.is-mine .sb-avatar {


    position: relative;


}


.status-bubble.is-mine:not(.has-status) .sb-avatar::after {


    content: "+";


    position: absolute;


    bottom: -2px;


    right: -2px;


    width: 18px;


    height: 18px;


    border-radius: 50%;


    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);


    color: #fff;


    font-size: 0.875rem;


    font-weight: 700;


    display: flex;


    align-items: center;


    justify-content: center;


    border: 2px solid var(--bg-card, #1a1f3a);


}


.status-bubble .sb-name {


    font-size: 0.7rem;


    color: var(--text, #e0e6f0);


    max-width: 56px;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.status-bubble.is-mine .sb-name { color: var(--text-secondary, #8b95b0); }


/* v115: Memory-Management — Load-Older-Messages Hint */


.load-more-prompt {


    padding: 12px 16px;


    text-align: center;


    border-bottom: 1px solid var(--wa-divider, #2a3050);


}


.load-more-btn {


    background: var(--wa-bg-2, #1a1f3a);


    border: 1px solid var(--wa-divider, #2a3050);


    border-radius: 8px;


    padding: 8px 16px;


    color: var(--wa-text, #e5e7eb);


    cursor: pointer;


    font-size: 0.875rem;


    transition: background 0.15s, transform 0.15s;


}


.load-more-btn:hover {


    background: var(--wa-purple, #7c3aed);


    color: #fff;


    transform: translateY(-1px);


}


.load-more-btn:active {


    transform: translateY(0);


}





/* v115: Performance — Audio/Video Lazy-Indicator (während Memory-Cleanup) */


.message-bubble.is-cleaned {


    opacity: 0.5;


    pointer-events: none;


}











/* === v141bd: CHAT-INPUT-BAR KOMPLETT NEU (Rebuild) === */


/* Alte bubble-btn/message-input-container/attach-popup sind inaktiv (HTML nutzt neue ci-* Klassen) */





/* === Brand-Farben v141bd: subtilerer Lila-Ton === */


:root {


    --ci-accent: #7c3aed;


    --ci-accent-2: #ec4899;


    --ci-accent-soft: rgba(124, 58, 237, 0.12);


    --ci-accent-glow: rgba(124, 58, 237, 0.28);


    --ci-mic-color: #06b6d4;


    --ci-mic-soft: rgba(6, 182, 212, 0.15);


    --ci-voice-color: #ec4899;


    --ci-voice-soft: rgba(236, 72, 153, 0.15);


    --ci-text-on-accent: #ffffff;


    --ci-bar-bg: rgba(15, 23, 42, 0.72);


    --ci-input-bg: rgba(255, 255, 255, 0.06);


    --ci-input-bg-focus: rgba(255, 255, 255, 0.10);


    --ci-divider: rgba(255, 255, 255, 0.06);


}





/* === Hauptcontainer: Glas-Bar am unteren Rand === */


.chat-input-bar {


    display: flex;


    align-items: flex-end;


    gap: 0.5rem;


    padding: 0.75rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom, 0px));


    background: var(--ci-bar-bg);


    backdrop-filter: blur(24px) saturate(180%);


    -webkit-backdrop-filter: blur(24px) saturate(180%);


    border-top: 1px solid var(--ci-divider);


    position: sticky;


    bottom: 0;


    z-index: 5;


    min-height: 64px;


    flex-shrink: 0;


    width: 100%;


}





/* === Cluster (links/rechts) === */


.ci-cluster {


    display: flex;


    align-items: center;


    gap: 0.25rem;


    flex-shrink: 0;


}


.ci-cluster-left { padding-right: 0; }


.ci-cluster-right { padding-left: 0; }





/* === Textarea-Wrapper === */


.ci-textarea-wrap {


    flex: 1;


    min-width: 0;


    display: flex;


    align-items: stretch;


}





/* === Textarea === */


.ci-textarea {


    flex: 1;


    width: 100%;


    background: var(--ci-input-bg);


    border: 1px solid transparent;


    border-radius: 22px;


    padding: 0.7rem 1.125rem;


    color: var(--text-primary);


    font-size: 1rem;


    font-family: inherit;


    line-height: 1.45;


    outline: none;


    resize: none;


    overflow-y: auto;


    overflow-x: hidden;


    min-height: 44px;


    max-height: 140px;


    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;


    word-wrap: break-word;


    word-break: break-word;


    white-space: pre-wrap;


}


.ci-textarea::placeholder { color: var(--text-muted, rgba(255,255,255,0.45)); }


.ci-textarea:hover { background: var(--ci-input-bg-focus); }


.ci-textarea:focus {


    background: var(--ci-input-bg-focus);


    border-color: var(--ci-accent-glow);


    box-shadow: 0 0 0 3px var(--ci-accent-soft);


}





/* === Button-Basis === */


.ci-btn {


    position: relative;


    width: 44px;


    height: 44px;


    min-width: 44px;


    border-radius: 50%;


    border: 1px solid transparent;


    background: var(--ci-input-bg);


    color: var(--text-primary);


    cursor: pointer;


    display: inline-flex;


    align-items: center;


    justify-content: center;


    transition: background 0.18s, transform 0.12s, box-shadow 0.18s, color 0.18s, border-color 0.18s;


    flex-shrink: 0;


    -webkit-tap-highlight-color: transparent;


    user-select: none;


}


.ci-btn:hover {


    background: var(--ci-input-bg-focus);


    transform: translateY(-1px);


}


.ci-btn:active { transform: translateY(0) scale(0.94); }


.ci-btn:focus-visible { outline: 2px solid var(--ci-accent-glow); outline-offset: 2px; }





/* === Send-Button (Primary, Lila-Gradient) === */


.ci-btn-send {


    background: linear-gradient(135deg, var(--ci-accent), var(--ci-accent-2));


    color: var(--ci-text-on-accent);


    box-shadow: 0 4px 14px var(--ci-accent-glow);


    width: 48px;


    height: 48px;


}


.ci-btn-send:hover {


    box-shadow: 0 6px 22px var(--ci-accent-glow);


    transform: translateY(-1px) scale(1.04);


}


.ci-btn-send:disabled {


    background: var(--ci-input-bg);


    color: var(--text-muted, rgba(255,255,255,0.35));


    box-shadow: none;


    cursor: not-allowed;


    transform: none;


}





/* === Sprachmemo-Button (Pink/Red Gradient) === */


.ci-btn-voice-memo {


    background: linear-gradient(135deg, var(--ci-voice-color), #f43f5e);


    color: var(--ci-text-on-accent);


    box-shadow: 0 4px 14px var(--ci-voice-soft);


}


.ci-btn-voice-memo:hover { box-shadow: 0 6px 22px var(--ci-voice-soft); transform: translateY(-1px) scale(1.04); }


.ci-btn-voice-memo.recording {


    background: linear-gradient(135deg, #ef4444, #dc2626);


    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);


    animation: ci-pulse-rec 1.2s ease-in-out infinite;


}


@keyframes ci-pulse-rec {


    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }


    50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }


}





/* === Sprache-zu-Text-Button (Cyan) === */


.ci-btn-voice-text {


    background: var(--ci-mic-soft);


    color: var(--ci-mic-color);


}


.ci-btn-voice-text:hover { background: rgba(6, 182, 212, 0.22); }


.ci-btn-voice-text.listening {


    background: var(--ci-mic-color);


    color: var(--ci-text-on-accent);


    animation: ci-pulse-mic 1s ease-in-out infinite;


}


@keyframes ci-pulse-mic {


    0%, 100% { box-shadow: 0 0 0 0 var(--ci-mic-soft); }


    50% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }


}





/* === Pulsing Dot für Voice-Listening === */


.ci-pulse {


    position: absolute;


    top: 6px;


    right: 6px;


    width: 8px;


    height: 8px;


    border-radius: 50%;


    background: #ef4444;


    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);


    animation: ci-pulse-dot 1.4s ease-in-out infinite;


    display: none;


}


.ci-btn-voice-text.listening .ci-pulse { display: block; }


@keyframes ci-pulse-dot {


    0%, 100% { transform: scale(0.85); opacity: 1; }


    50% { transform: scale(1.15); opacity: 0.5; }


}





/* === SVG-Icon === */


.ci-icon {


    width: 22px;


    height: 22px;


    stroke-width: 2;


    display: block;


}


.ci-btn-send .ci-icon { width: 22px; height: 22px; stroke-width: 2.2; }


.ci-btn-voice-memo .ci-icon, .ci-btn-voice-text .ci-icon { width: 20px; height: 20px; }





/* === Attach-Popup (Datei + Standort) === */


.attach-popup {


    position: absolute;


    bottom: calc(100% + 8px);


    left: 0.5rem;


    display: flex;


    flex-direction: column;


    gap: 4px;


    padding: 0.5rem;


    background: rgba(15, 23, 42, 0.92);


    backdrop-filter: blur(24px) saturate(180%);


    -webkit-backdrop-filter: blur(24px) saturate(180%);


    border: 1px solid var(--ci-divider);


    border-radius: 16px;


    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);


    min-width: 180px;


    z-index: 30;


    transform-origin: bottom left;


    animation: ci-popup-in 0.18s ease-out;


}


.attach-popup.hidden { display: none; }


@keyframes ci-popup-in {


    from { opacity: 0; transform: translateY(8px) scale(0.95); }


    to { opacity: 1; transform: translateY(0) scale(1); }


}


.ap-btn {


    display: flex;


    align-items: center;


    gap: 0.7rem;


    padding: 0.6rem 0.8rem;


    background: transparent;


    border: none;


    color: var(--text-primary);


    border-radius: 12px;


    cursor: pointer;


    font-size: 0.92rem;


    font-family: inherit;


    text-align: left;


    transition: background 0.15s;


    -webkit-tap-highlight-color: transparent;


}


.ap-btn:hover { background: var(--ci-accent-soft); }


.ap-btn:focus-visible { outline: 2px solid var(--ci-accent-glow); outline-offset: -2px; }


.ap-btn .ci-icon { width: 20px; height: 20px; color: var(--ci-accent); flex-shrink: 0; }


.ap-btn span { font-weight: 500; }





/* === Mobile Anpassungen === */


@media (max-width: 600px) {


    .chat-input-bar {


        gap: 0.3rem;


        padding: 0.6rem 0.65rem calc(0.6rem + env(safe-area-inset-bottom, 0px));


        min-height: 60px;


    }


    .ci-btn { width: 40px; height: 40px; min-width: 40px; }


    .ci-btn-send { width: 44px; height: 44px; }


    .ci-icon { width: 20px; height: 20px; }


    .ci-textarea { padding: 0.6rem 0.875rem; font-size: 0.9375rem; min-height: 40px; }


    .attach-popup { left: 0.25rem; min-width: 160px; }


    .ap-btn { padding: 0.55rem 0.7rem; font-size: 0.88rem; }


}





/* === High-DPI / Touch Optimierungen === */


@media (hover: none) {


    .ci-btn:hover { transform: none; }


    .ci-btn:active { transform: scale(0.92); }


}





/* Phase 4: Call-History Loesch-UI */


.chm-delete {


    background: transparent;


    border: none;


    color: #94a3b8;


    font-size: 16px;


    cursor: pointer;


    padding: 4px 8px;


    border-radius: 4px;


    transition: background 0.15s, color 0.15s;


    margin-right: 4px;


}


.chm-delete:hover {


    background: #fee2e2;


    color: #dc2626;


}


.chm-clear-all {


    background: transparent;


    border: 1px solid #fca5a5;


    color: #dc2626;


    padding: 6px 12px;


    border-radius: 6px;


    cursor: pointer;


    font-size: 13px;


    font-weight: 500;


    margin-right: 8px;


    transition: background 0.15s;


}


.chm-clear-all:hover {


    background: #fee2e2;


}


.chm-clear-all:disabled {


    opacity: 0.4;


    cursor: not-allowed;


}





/* v2.3.0: Aktive Sitzungen UI - aktuelle Sitzung markieren + Bulk-Action */


.sec-sessions-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 6px 0 10px;


    border-bottom: 1px solid var(--wa-border, #e5e7eb);


    margin-bottom: 8px;


}


.sec-sessions-count {


    font-size: 0.875rem;


    color: var(--wa-text-secondary, #6b7280);


}


.sec-bulk-action {


    background: transparent;


    border: 1px solid #ef4444;


    color: #ef4444;


    padding: 4px 10px;


    border-radius: 6px;


    cursor: pointer;


    font-size: 0.82rem;


    transition: all 0.15s;


}


.sec-bulk-action:hover {


    background: #ef4444;


    color: white;


}


.sec-session-row.current {


    background: rgba(34, 197, 94, 0.08);


    border-left: 3px solid #22c55e;


    padding-left: 8px;


}


.sec-current-badge {


    display: inline-block;


    background: #22c55e;


    color: white;


    font-size: 0.7rem;


    padding: 1px 6px;


    border-radius: 8px;


    margin-left: 6px;


    font-weight: 600;


    vertical-align: middle;


}


.sec-session-row.revoked {


    opacity: 0.5;


}





/* v2.4.0: Login-Verlauf Loesch-Buttons + Header */


.sec-history-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 6px 0 10px;


    border-bottom: 1px solid var(--wa-border, #e5e7eb);


    margin-bottom: 8px;


}


.sec-history-count {


    font-size: 0.875rem;


    color: var(--wa-text-secondary, #6b7280);


}


.sec-history-row {


    display: flex;


    align-items: center;


    gap: 8px;


    padding: 6px 0;


    border-bottom: 1px solid rgba(0,0,0,0.04);


}


.sec-history-row.failed .sec-icon {


    opacity: 0.6;


}




/* v141cv28: PIN-Setup + PIN-Verify Modal */
.pin-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}
.pin-modal.hidden { display: none !important; }
.pin-modal-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #232938 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    width: min(420px, 92vw);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pin-modal-header h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #e9edef;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pin-modal-header h3 svg { color: #7c3aed; }
.pin-modal-close {
    background: transparent;
    border: 0;
    color: rgba(233, 237, 239, 0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pin-modal-close:hover { background: rgba(255, 255, 255, 0.06); color: #e9edef; }
.pin-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.pin-modal-body label {
    display: block;
    color: rgba(233, 237, 239, 0.7);
    font-size: 0.875rem;
    margin: 0.6rem 0 0.3rem;
}
.pin-modal-hint {
    color: rgba(233, 237, 239, 0.65);
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0 0 0.6rem;
}
.pin-input {
    width: 100%;
    padding: 0.7rem 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e9edef;
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: 0.15em;
    text-align: center;
}
.pin-input:focus {
    outline: none;
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}
.pin-input-large {
    font-size: 1.5rem;
    padding: 1rem;
    margin: 0.5rem 0;
}
.pin-error {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #fca5a5;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.88rem;
    margin: 0.6rem 0;
}
.pin-error.hidden { display: none; }
.pin-modal-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    justify-content: flex-end;
}
.pin-btn {
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-full);
    border: 0;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.pin-btn.primary {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #fff;
}
.pin-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); }
.pin-btn.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(233, 237, 239, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pin-btn.secondary:hover { background: rgba(255, 255, 255, 0.1); color: #e9edef; }
.pin-setup-link {
    text-align: center;
    margin: 0.8rem 0 0;
    font-size: 0.82rem;
}
.pin-setup-link a { color: #7c3aed; text-decoration: none; }
.pin-setup-link a:hover { text-decoration: underline; }

/* v141cv28: Lock-Button im chat-menu (sichtbarer Status) */
#lock-chat-menu-btn.locked { color: #ec4899; }
#lock-chat-menu-btn.locked svg { color: #ec4899; }



/* v141cv30: Sidebar-Suchfeld für Geheimcode + User-Suche */
.sidebar-pin-search {
    position: relative;
    margin: 0.5rem 0.75rem 0.3rem;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    padding: 0 0.6rem 0 0.7rem;
    transition: all 0.15s;
}
.sidebar-pin-search:focus-within {
    border-color: rgba(124, 58, 237, 0.5);
    background: rgba(124, 58, 237, 0.06);
}
.sidebar-pin-search .pin-search-icon {
    color: rgba(233, 237, 239, 0.5);
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
}
.pin-search-input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #e9edef;
    font-size: 0.875rem;
    padding: 0.5rem 0;
    font-family: inherit;
    outline: none;
}
.pin-search-input::placeholder { color: rgba(233, 237, 239, 0.4); }
.pin-search-input.code-mode {
    letter-spacing: 0.3em;
    text-align: center;
    font-weight: 600;
}
.pin-search-clear {
    background: transparent;
    border: 0;
    color: rgba(233, 237, 239, 0.5);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pin-search-clear:hover { color: #e9edef; background: rgba(255, 255, 255, 0.08); }
.pin-search-clear.hidden { display: none; }

/* v141cv30: Geheime Chats Modal */
.hidden-chats-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(4px);
}
.hidden-chats-modal.hidden { display: none !important; }
.hidden-chats-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #232938 100%);
    border-radius: 16px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    width: min(440px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.hidden-chats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hidden-chats-header h3 {
    margin: 0;
    font-size: 1.0625rem;
    color: #e9edef;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hidden-chats-header h3 svg { color: #ec4899; }
.hidden-chats-close {
    background: transparent;
    border: 0;
    color: rgba(233, 237, 239, 0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
}
.hidden-chats-close:hover { background: rgba(255, 255, 255, 0.06); color: #e9edef; }
.hidden-chats-body { padding: 1rem 1.5rem 1.5rem; overflow: auto; }
.hidden-chats-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hidden-chats-list .hc-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.hidden-chats-list .hc-item:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}
.hidden-chats-list .hc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9375rem;
    flex-shrink: 0;
}
.hidden-chats-list .hc-info { flex: 1; min-width: 0; }
.hidden-chats-list .hc-name { color: #e9edef; font-weight: 600; font-size: 0.92rem; }
.hidden-chats-list .hc-meta { color: rgba(233, 237, 239, 0.5); font-size: 0.78rem; margin-top: 2px; }
/* v141cv91: 3-Punkte-Menu Button in Geheime-Chats Liste */
.hc-item {
    position: relative;
}
.hc-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
    align-self: stretch;
}
.hc-item:hover .hc-menu-btn,
.hc-menu-btn:focus {
    opacity: 1;
}
.hc-menu-btn:hover {
    background: var(--primary);
    color: #fff;
}
.hc-menu-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}
/* v141cv91: chat-menu-item hover in hidden chat context menu */
.hidden-chat-context-menu .chat-menu-item:hover {
    background: var(--bg-card) !important;
}

.hidden-chats-empty {
    text-align: center;
    color: rgba(233, 237, 239, 0.6);
    padding: 2rem 1rem;
}
.hidden-chats-empty svg { color: #7c3aed; opacity: 0.5; }
.hidden-chats-empty p { margin: 0.5rem 0 0; font-size: 0.875rem; }
.hidden-chats-empty p.hint { font-size: 0.78rem; color: rgba(233, 237, 239, 0.4); }
.hidden-chats-empty.hidden { display: none; }
.hidden-chats-footer {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.hidden-chats-footer .pin-btn {
    width: 100%;
}


/* === v141cv76: Call-Vollbild + dragable PiP === */
#call-modal.fullscreen-mode {
    background: rgba(0, 0, 0, 0.95) !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#call-modal.fullscreen-mode .call-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100vw, 1280px) !important;
    height: min(100vh, 800px) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}
#call-modal.fullscreen-mode .call-video {
    flex: 1;
    min-height: 0;
}
#call-modal.fullscreen-mode #remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#call-modal .call-header {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#call-modal .call-header:active {
    cursor: grabbing;
}
#call-fullscreen-btn {
    background: var(--wa-bg-2);
    color: var(--wa-text);
}
#call-fullscreen-btn:hover {
    background: var(--wa-bg-3, rgba(255, 255, 255, 0.15));
}


/* === v141cv77: Karte - User-Chips unten ausblenden === */
#map-friend-chips { display: none !important; }


/* === v141cv79: Sidebar User-Suche (User suchen oder Geheimcode eingeben) === */
#sidebar-user-results {
    position: relative;
    margin: 0.25rem 0.75rem 0.5rem;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}
#sidebar-user-results.hidden { display: none; }
#sidebar-user-results:empty { display: none; }
.search-user-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary, #1f2937);
}
.search-user-item:last-child { border-bottom: none; }
.search-user-item:hover { background: var(--bg-hover, rgba(124,58,237,0.12)); }
.search-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.search-user-info { flex: 1; min-width: 0; }
.search-user-name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-user-username {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}
.sidebar-user-empty {
    padding: 1rem;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    font-size: 13px;
}


/* === v141cv79: Sidebar User-Suche (User suchen oder Geheimcode eingeben) === */
#sidebar-user-results {
    position: relative;
    margin: 0.25rem 0.75rem 0.5rem;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
}
#sidebar-user-results.hidden { display: none; }
#sidebar-user-results:empty { display: none; }
.search-user-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary, #1f2937);
}
.search-user-item:last-child { border-bottom: none; }
.search-user-item:hover { background: var(--bg-hover, rgba(124,58,237,0.12)); }
.search-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.search-user-info { flex: 1; min-width: 0; }
.search-user-name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-user-username {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}
.sidebar-user-empty {
    padding: 1rem;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    font-size: 13px;
}


/* v141cv88u: Action-Button in Modal-Header (z.B. Alle Anrufe loeschen) */
.wa-modal-action-btn {
    background: transparent;
    border: 1px solid var(--wa-call-red, #e74c3c);
    color: var(--wa-call-red, #e74c3c);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
}
.wa-modal-action-btn:hover {
    background: var(--wa-call-red, #e74c3c);
    color: #fff;
}
.wa-modal-action-btn svg {
    width: 14px;
    height: 14px;
}

/* v141e2e Phase E: Audio->Video Upgrade Button Highlight */
#video-off-btn.upgrade-hint {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 0 12px rgba(118, 75, 162, 0.6);
  animation: upgrade-pulse 2s ease-in-out infinite;
}
@keyframes upgrade-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(118, 75, 162, 0.6); }
  50% { box-shadow: 0 0 20px rgba(118, 75, 162, 0.9); }
}



/* v141v2: Fix Emoji-Picker gaps (right/bottom border bleed) */
emoji-picker {
    --background-color: var(--bg-card, #1a1a2e);
    --category-label-color: var(--text-secondary, #a0a0b0);
    --secondary-color: var(--bg-hover, rgba(255,255,255,0.08));
    --indicator-color: #7c3aed;
    --icon-color: var(--text-muted, #888);
    --border-color: var(--border, rgba(255,255,255,0.1));
    --font-family: inherit;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

emoji-picker::part(skin-tone-palette) {
    display: none !important;
}

emoji-picker::part(search) {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
    padding: 6px 8px !important;
}

emoji-picker::part(button) {
    color: var(--text-secondary) !important;
}

emoji-picker::part(button:hover),
emoji-picker::part(button[selected]) {
    color: var(--text-primary) !important;
}

emoji-picker::part(emoji) {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

emoji-picker::part(scrollbar)::-webkit-scrollbar {
    width: 6px !important;
}

emoji-picker::part(scrollbar)::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 200, 0.4) !important;
    border-radius: 3px !important;
}

::selection { background: rgba(124, 58, 237, 0.30); color: inherit; }


/* ---------- v141cv147: Status-Menu zentriert (wie andere Modals) ---------- */
#me-status-menu.modal {
    width: 340px !important;
    max-width: 90vw !important;
    height: auto !important;
    background: var(--bg-elevated) !important;
    pointer-events: auto !important;
    padding: 0.5rem !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1000 !important;
    overflow: visible !important;
}
@media (min-width: 900px) {
    /* v141cv147: Center in chat area (right of 380px sidebar) */
    #me-status-menu.modal {
        position: fixed !important;
        top: 50% !important;
        left: calc(50% + 190px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}
@media (max-width: 899px) {
    /* v141cv147: Center on full screen (mobile) */
    #me-status-menu.modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}
#me-status-menu .modal-content.me-status-menu-inner {
    pointer-events: auto !important;
    position: relative !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    animation: none !important;
}


/* v141cv161: PiP-Mode - Overlay durchlassen damit Chat darunter nutzbar ist */
#call-modal.pip-mode {
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}
#call-modal.pip-mode > * {
    pointer-events: auto !important;
}