:root {
    --kinma-charcoal: #1a1a1a;
    --kinma-charcoal-rgb: 26, 26, 26;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow selection in input fields and content areas */
input,
textarea,
[contenteditable="true"],
.story-content,
.chapter-content,
.book-page-content,
.message-text,
p,
span.selectable,
.selectable {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

html {
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for Safari */
    height: -webkit-fill-available; /* Fallback for older Safari */
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for Safari */
    min-height: -webkit-fill-available; /* Fallback for older Safari */
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for Safari */
    height: -webkit-fill-available; /* Fallback for older Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    padding-top: 140px;
    padding-bottom: 140px;
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
    /* Support for safe area insets on iOS */
    padding-top: calc(140px + env(safe-area-inset-top));
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* When tree container is present, hide body overflow and ensure no white shows */
body:has(.tree-container) {
    overflow: hidden;
    background: #ffffff;
    padding: 0; /* Remove padding when tree is shown */
}

/* Add padding-bottom when global music controller is visible */
body:has(.global-music-controller[style*="display: flex"]) {
    padding-bottom: calc(140px + 70px); /* Original padding + controller height */
}

.container {
    background: #ffffff;
    max-width: 500px;
    width: 100%;
    padding: 48px 32px;
    margin: 0 auto;
}

/* Full width for Namen step */
.wizard-step-namen .name-preview-container,
.wizard-step-namen .name-fields-container {
    max-width: 100%;
    width: 100%;
}

/* Container full width when Namen step is active */
body:has(.wizard-step-namen:not(.hidden)) .container,
.container.full-width {
    max-width: 100% !important;
}

/* Wizard Island */
.wizard-island {
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 36px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw; /* Responsive max width */
    width: auto;
    min-width: 500px; /* Minimum width to fit 4 steps */
    z-index: 1000;
}

.wizard-island-top {
    top: 40px;
}

.wizard-island-bottom {
    bottom: 40px;
}

.wizard-title {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    letter-spacing: -0.5px;
    flex-shrink: 0;
    white-space: nowrap;
}

h1 {
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.wizard-steps {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    position: relative;
    margin: 0;
    padding: 0;
    min-width: 0; /* Allow flex shrinking */
}

.wizard-steps::before {
    content: '';
    position: absolute;
    top: 16px; /* Center on step-number (32px / 2 = 16px) */
    left: 16px;
    right: 16px;
    height: 2px;
    background: #e9ecef;
    z-index: 0;
}

.wizard-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0; /* Remove gap, we use margin-top on label instead */
    flex: 0 0 auto; /* Don't grow or shrink, use natural width */
    min-width: 0; /* Allow flex shrinking */
    margin: 0;
    padding: 0;
    width: auto; /* Let content determine width */
}

/* Fixed 50px spacing between every circle */
.wizard-step:not(:last-child) .step-number {
    margin-right: 50px;
}

.wizard-step .step-number {
    margin-left: 0;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    flex-shrink: 0; /* Prevent shrinking */
}

.step-label {
    position: absolute;
    top: calc(100% + 8px); /* Position below the step-number with 8px gap */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    width: auto;
    max-width: none; /* Allow label to be wider than circle if needed */
    line-height: 1.2;
    overflow: visible; /* Allow text to overflow if needed */
    text-overflow: clip; /* Don't use ellipsis, just clip */
    text-align: center;
    z-index: 3;
    /* Ensure label is centered exactly under the circle */
    display: block;
    /* Position relative to step-number parent */
    pointer-events: none; /* Allow clicks to pass through to circle */
}

.wizard-step.active .step-number {
    background: #1a1a1a;
    color: #ffffff;
}

.wizard-step.completed .step-number {
    background: #28a745;
    color: #ffffff;
}

.wizard-step.active .step-label {
    color: #1a1a1a;
    font-weight: 600;
}

.wizard-content {
    min-height: 280px;
}

/* Compact layout for Grunddaten step (step 2) */
.wizard-step-grunddaten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    align-items: start;
}

/* Name preview spans full width */
.wizard-step-grunddaten .name-preview-container {
    grid-column: 1 / -1;
    margin: 0 0 100px 0;
    padding: 24px 0; /* Symmetrischer Abstand oben und unten */
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

/* Vorname and Nachname side by side */
.wizard-step-grunddaten .wizard-form-group:has(#vorname),
.wizard-step-grunddaten .wizard-form-group:has(#nachname) {
    margin-bottom: 12px;
}

/* Name inputs container spans full width */
.wizard-step-grunddaten .name-inputs-container {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Gender toggle, Geburtsdatum, Herkunft in grid */
.wizard-step-grunddaten .wizard-form-group:has(#geschlecht),
.wizard-step-grunddaten .wizard-form-group:has(#geburtsdatum),
.wizard-step-grunddaten .wizard-form-group:has(#herkunft) {
    margin-bottom: 12px;
}

/* Full width for Namen step */
.wizard-step-namen {
    width: 100%;
    max-width: 100%;
}

.wizard-step-namen .name-preview-container,
.wizard-step-namen .name-fields-container {
    max-width: 100%;
    width: 100%;
}

.wizard-form-group {
    margin-bottom: 24px;
}

/* Reduced margin for Grunddaten step */
.wizard-step-grunddaten .wizard-form-group {
    margin-bottom: 12px;
}

.wizard-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
}

.wizard-form-group input {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #e9ecef;
    font-size: 16px;
    background: transparent;
    transition: border-color 0.2s ease;
    color: #1a1a1a;
}

.wizard-form-group input:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
}

.wizard-form-group input::placeholder {
    color: #adb5bd;
}

/* Land/Stadt-Combobox: Text + Chevron in einer Zeile (Material-Linie unten) */
.wizard-form-group .country-combobox-wrapper,
.wizard-form-group .city-combobox-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin-top: 0;
    gap: 4px;
    min-height: 44px;
    border-bottom: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.wizard-form-group .country-combobox-wrapper:focus-within,
.wizard-form-group .city-combobox-wrapper:focus-within {
    border-bottom-color: #1a1a1a;
}

.wizard-form-group .country-combobox-wrapper .country-text-input,
.wizard-form-group .city-combobox-wrapper .city-text-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 12px 4px 12px 0;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent;
}

.wizard-form-group .country-dropdown-toggle,
.wizard-form-group .city-dropdown-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    border-radius: 8px;
    align-self: center;
}

.wizard-form-group .country-dropdown-toggle:hover,
.wizard-form-group .city-dropdown-toggle:hover {
    color: #1a1a1a;
    background: rgba(26, 26, 26, 0.06);
}

.wizard-form-group .country-combobox-wrapper .country-select-dropdown,
.wizard-form-group .city-combobox-wrapper .city-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0;
}

/* Geschlecht: Label und Kreis in einer Zeile */
.wizard-form-group--gender-inline .gender-inline-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.wizard-form-group--gender-inline .gender-inline-label {
    display: inline-block;
    margin: 0;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
}

.wizard-form-group--gender-inline .gender-toggle {
    margin-top: 0;
    justify-content: flex-start;
    flex-shrink: 0;
}

.preview-section {
    background: #f8f9fa;
    padding: 24px;
    margin-bottom: 24px;
}

.preview-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

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

.preview-label {
    font-weight: 500;
    color: #6c757d;
    font-size: 14px;
}

.preview-value {
    color: #1a1a1a;
    font-weight: 500;
}

/* Profile Preview Styles */
.profile-preview {
    background: #ffffff;
    margin-bottom: 24px;
}

.profile-banner-container {
    position: relative;
    width: 100%;
}

.profile-banner {
    width: 100%;
    height: 200px;
    background: #f8f9fa;
    position: relative;
    overflow: visible;
}

/* When a real banner image is applied, remove country-outline + color layer */
.profile-banner-new.kinma-has-banner-image .profile-country-outline-banner,
.profile-banner.kinma-has-banner-image .profile-country-outline-banner {
    display: none !important;
}

.profile-contact-buttons {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.profile-contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.profile-contact-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.profile-contact-btn svg {
    flex-shrink: 0;
    color: #6c757d;
}

.profile-banner-image {
    width: 100%;
    height: 100%;
}

.profile-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-banner-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 14px;
    font-weight: 400;
}

.profile-header {
    padding: 0 0 32px 20px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.profile-picture-container {
    flex-shrink: 0;
    margin-top: -80px;
    position: relative;
    z-index: 2;
}

.profile-picture {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #f8f9fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-placeholder {
    font-size: 48px;
    color: #adb5bd;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    padding-top: 10px;
}

.profile-name {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

.profile-name span {
    margin-right: 8px;
}

.profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.profile-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    font-size: 15px;
}

.profile-detail-icon {
    display: none;
}

.profile-content {
    padding: 0 0 32px 0;
}

.profile-section {
    margin-bottom: 40px;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.profile-section-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
}

.profile-info-label {
    font-weight: 400;
    color: #6c757d;
    font-size: 14px;
    min-width: 100px;
    flex-shrink: 0;
}

.profile-info-value {
    color: #1a1a1a;
    font-size: 14px;
    flex: 1;
}

.profile-locations-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-location-item {
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

.profile-location-label {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
    margin-bottom: 4px;
}

.profile-location-address {
    color: #6c757d;
    font-size: 13px;
}

/* Family Selection Styles */
.family-selection {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.family-title {
    font-size: 36px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 12px;
}

.family-subtitle {
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    margin-bottom: 40px;
}

.family-options {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.family-option-card {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.family-option-card:hover {
    border-color: #1a1a1a;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.family-option-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.family-option-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.family-option-description {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 24px;
    line-height: 1.6;
}

.family-option-btn {
    width: 100%;
    padding: 14px 24px;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.family-option-btn:hover {
    background: #1a1a1a;
}

.family-form-container {
    max-width: 500px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 32px;
}

.family-form-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 24px;
    text-align: center;
}

.family-form-group {
    margin-bottom: 24px;
}

.family-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.family-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 15px;
    color: #1a1a1a;
    transition: border-color 0.2s ease;
}

.family-form-input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.family-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.family-form-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.family-form-btn-primary {
    background: #1a1a1a;
    color: #ffffff;
}

.family-form-btn-primary:hover {
    background: #1a1a1a;
}

.family-form-btn-secondary {
    background: #f8f9fa;
    color: #1a1a1a;
    border: 1px solid #dee2e6;
}

.family-form-btn-secondary:hover {
    background: #e9ecef;
}

.logout-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: #f8f9fa;
    color: #1a1a1a;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    z-index: 1000;
}

.logout-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Family Welcome Animation – professional motion system (duration: --family-welcome-total) */
.family-welcome-animation {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    /* Über Nav-Island, Mobile-Bottom-Nav, Float-Tabs, Call-Video (bis 2147483646) */
    z-index: 2147483647 !important;
    pointer-events: none;
    isolation: isolate;
    background: transparent;
    --family-welcome-total: 2.35s;
}

/* Erst bei Tab-Wechsel sichtbar machen (nicht bei Reload/Navigation) */
.family-welcome-animation-pending {
    visibility: hidden;
    pointer-events: none;
}

/* Wenn sichtbar: Klicks/Touch zum Überspringen erlauben */
.family-welcome-animation:not(.family-welcome-animation-pending) {
    pointer-events: auto;
}

.family-welcome-overlay {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 1;
    z-index: 9999;
}

.family-welcome-animation-out .family-welcome-overlay {
    animation: family-welcome-overlay-fade var(--family-welcome-total) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes family-welcome-overlay-fade {
    0% { opacity: 1; }
    7% { opacity: 0; }
    68% { opacity: 0; }
    78% { opacity: 0.18; }
    100% { opacity: 0; }
}

.family-welcome-color-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(140px, 34vmax, 700px);
    aspect-ratio: 18 / 10;
    height: auto;
    background: #3f47c6;
    border-radius: 0;
    transform: translate(-50%, -50%) scale(0.01);
    transform-origin: center center;
    opacity: 0;
    z-index: 10000;
}

.family-welcome-white-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(90vw, 1120px);
    height: min(66vh, 620px);
    background: #ffffff;
    border-radius: clamp(4px, 0.6vmax, 12px);
    transform: translate(-50%, -50%) scale(0.02);
    transform-origin: center center;
    opacity: 0;
    z-index: 10001;
    box-shadow: 0 16px 44px rgba(10, 20, 60, 0.24);
}

.family-welcome-animation-out .family-welcome-color-wave {
    animation: family-welcome-color-wave var(--family-welcome-total) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.family-welcome-animation-out .family-welcome-white-stage {
    animation: family-welcome-white-stage var(--family-welcome-total) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes family-welcome-color-wave {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.01); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(13); } /* blue fills screen ~0.28s */
    76% { opacity: 1; transform: translate(-50%, -50%) scale(13); }
    88% { opacity: 1; transform: translate(-50%, -50%) scale(12.6); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.08); }
}

@keyframes family-welcome-white-stage {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); }
    2.5% { opacity: 0; transform: translate(-50%, -50%) scale(0.02); }
    4% { opacity: 1; transform: translate(-50%, -50%) scale(0.11); } /* card appears quickly */
    40% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    76% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    88% { opacity: 1; transform: translate(-50%, -50%) scale(4); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
}

/* Kinma logo (assets + flag ring wie Nav-Island) + Skip-Hinweis */
.family-welcome-brand {
    position: absolute;
    left: 50%;
    top: max(18px, env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    z-index: 10003;
    width: 60px;
    height: 60px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.family-welcome-kinma-outline {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
    z-index: 0;
}

.family-welcome-kinma-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 1;
}

.family-welcome-kinma-logo {
    position: relative;
    z-index: 2;
    width: 30px;
    height: auto;
    max-height: 30px;
    object-fit: contain;
}

.family-welcome-skip-hint {
    position: absolute;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    z-index: 10003;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: min(260px, 46vw);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.96);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
    text-align: center;
}

.family-welcome-skip-icon {
    display: block;
    flex-shrink: 0;
}

.family-welcome-skip-hint-text {
    font-size: clamp(0.95rem, 2.2vw, 1.08rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.family-welcome-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    z-index: 10002;
    pointer-events: none;
    transform-origin: center center;
    transform: scale(0.88);
    opacity: 0;
}

.family-welcome-animation-out .family-welcome-content {
    animation: family-welcome-content-out var(--family-welcome-total) cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Skip: Animation schnell beenden (Tastatur/Maus) */
.family-welcome-skip.family-welcome-animation-out .family-welcome-overlay,
.family-welcome-skip.family-welcome-animation-out .family-welcome-color-wave,
.family-welcome-skip.family-welcome-animation-out .family-welcome-white-stage,
.family-welcome-skip.family-welcome-animation-out .family-welcome-content {
    animation-duration: 0.2s !important;
}

.family-welcome-greeting {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(0.42rem, 0.9vw, 0.75rem);
    font-size: clamp(0.82rem, 1.25vw, 0.98rem);
    font-weight: 700;
    color: #5b677a;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.1;
    opacity: 1;
}

.family-welcome-meta {
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    font-weight: 600;
    color: #465366;
    opacity: 1;
}

.family-welcome-greeting-label {
    opacity: 0.9;
}

.family-welcome-greeting-user {
    font-size: clamp(0.96rem, 1.5vw, 1.18rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #1f2b3d;
}

.family-welcome-meta--inline {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.3rem, 0.75vw, 0.7rem);
    line-height: 1.22;
    max-width: min(94vw, 760px);
}

.family-welcome-meta-label {
    font-size: clamp(0.94rem, 1.28vw, 1.08rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #5d6a7d;
}

.family-welcome-meta-value {
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    font-weight: 800;
    color: #1f2b3d;
}

.family-welcome-meta-inline-item {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(0.22rem, 0.5vw, 0.45rem);
}

.family-welcome-meta-inline-sep {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 700;
    color: #7a869b;
    opacity: 0.8;
}

@keyframes family-welcome-fade-out {
    0%, 50% { opacity: 1; }
    100% { opacity: 0; }
}

.family-welcome-card {
    width: min(86vw, 980px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.46rem, 0.85vw, 0.86rem);
    padding: clamp(0.4rem, 0.7vw, 0.7rem) clamp(0.75rem, 1.2vw, 1.15rem);
}

.family-welcome-name-large {
    position: relative;
    font-size: clamp(2.2rem, 7.4vw, 4.25rem);
    font-weight: 800;
    color: #1a2433;
    line-height: 0.96;
    white-space: normal;
    text-align: center;
    max-width: min(92vw, 900px);
    letter-spacing: -0.02em;
    opacity: 1;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.82),
        0 18px 34px rgba(26, 43, 71, 0.22);
}

@keyframes family-welcome-content-out {
    0% { opacity: 0; transform: scale(0.88); }
    2.5% { opacity: 0; transform: scale(0.08); }
    4% { opacity: 1; transform: scale(0.11); }
    40% { opacity: 1; transform: scale(1.04); }
    76% { opacity: 1; transform: scale(1.04); }
    88% { opacity: 1; transform: scale(2); }
    100% { opacity: 0; transform: scale(0.12); }
}

/* Extras-Nav (Desktop): Flyout-Insel rechts — modules/navigation.css + Spiegelung hier */
.left-nav-cluster .nav-extras-reveal {
    display: none !important;
}

/* Extras-Button: Outline zur Hervorhebung */
.nav-extras-btn,
.left-nav-cluster .nav-extras-btn {
    border: 1px solid rgba(0, 0, 0, 0.15);
    outline: none;
    background: transparent;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.nav-extras-btn:focus {
    outline: none;
}
.nav-extras-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
body.dark-mode .nav-extras-btn,
body.dark-mode .left-nav-cluster .nav-extras-btn {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ── Floating shared tooltip (mirrored from navigation.css) ──────── */
.left-nav-cluster .nav-label {
    display: none !important;
}

.nav-floating-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    background: #ffffff;
    color: #1a1a1a;
    padding: 10px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.07);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
    /* top/left: no transition – position snaps instantly when moving between items */
    transition:
        opacity 0.16s ease,
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}
.nav-floating-tooltip.nft-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Einheitliche Hover-Beschriftung – überall gleicher Stil */
.nav-floating-tooltip.nft-cache,
.nav-floating-tooltip.nft-admin,
.nav-floating-tooltip.nft-kinma,
.nav-floating-tooltip.nft-voice,
.nav-floating-tooltip.nft-election {
    background: #fef2f2;
    color: #991b1b;
    border-color: rgba(220, 38, 38, 0.25);
}

.nav-floating-tooltip.nft-default {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.nav-floating-tooltip.nft-active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.nav-floating-tooltip.nft-intro.nft-visible {
    animation: nftIntro 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes nftIntro {
    0%   { opacity: 0; transform: translateY(-50%) translateX(-24px) scale(0.82); }
    55%  { opacity: 1; }
    80%  { transform: translateY(-50%) translateX(3px) scale(1.04); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

.nav-floating-tooltip:not(.nft-logout-mode) .nav-floating-tooltip-logout-btn {
    display: none !important;
}
.nav-floating-tooltip.nft-logout-mode .nav-floating-tooltip-text {
    display: none !important;
}
.nav-floating-tooltip.nft-logout-mode {
    pointer-events: auto;
    padding: 4px;
}
.nav-floating-tooltip.nft-anchor-right.nft-visible {
    transform: translateY(-50%) translateX(0);
}
.nav-floating-tooltip.nft-anchor-right:not(.nft-visible) {
    transform: translateY(-50%) translateX(10px);
}
.nav-floating-tooltip.nft-logout-mode .nav-floating-tooltip-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 14px;
    border: none;
    border-radius: 9999px;
    background: #dc2626;
    color: #ffffff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.nav-floating-tooltip.nft-logout-mode .nav-floating-tooltip-logout-btn:hover,
.nav-floating-tooltip.nft-logout-mode .nav-floating-tooltip-logout-btn:focus-visible {
    background: #b91c1c;
    outline: none;
}
.nav-floating-tooltip.nft-logout-mode .nav-floating-tooltip-logout-btn:active {
    transform: scale(0.97);
}
/* ─────────────────────────────────────────────────────────────────── */

.left-nav-cluster-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65em;
    flex-shrink: 0;
    min-width: 0;
    max-width: calc(100vw - 48px - env(safe-area-inset-left, 0px));
}

/* Left Navigation Cluster - Single wrapper containing all three elements */
.left-nav-cluster {
    position: fixed;
    --nav-cluster-inset: 24px;
    left: calc(var(--nav-cluster-inset) + env(safe-area-inset-left, 0px));
    top: calc(var(--nav-cluster-inset) + env(safe-area-inset-top, 0px));
    bottom: calc(var(--nav-cluster-inset) + env(safe-area-inset-bottom, 0px));
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    z-index: 1000;
    /* Über Chat-Fenster (100004 aktiv): modules/chat.css body:has(.chat-popup.active) → 100011 */
    /* Volle Säule + Lücken zwischen Inseln: Klicks zum Stammbaum dahinter */
    pointer-events: none;
    --nav-cluster-font-size: 16px;
    --nav-cluster-gap: 0.75em;
    font-size: var(--nav-cluster-font-size);
    gap: var(--nav-cluster-gap);
    padding: 0;
    min-height: 0;
    transition: none !important;
}

/* Insel-Hüllen durchlässig (Padding zwischen Icons); nur echte Steuerungen fangen Events */
.left-nav-cluster .nav-island,
.left-nav-cluster .kinma-nav-island,
.left-nav-cluster .chat-nav-island,
.left-nav-cluster .admin-nav-island,
.left-nav-cluster .admin-stats-nav-island,
.left-nav-cluster .kinma-hw-accel-nav-island,
.left-nav-cluster .utility-islands-container,
.left-nav-cluster .utility-island:not(.kinma-logo-island),
.left-nav-cluster .feedback-highlight-fab,
.left-nav-cluster .election-vote-fab,
.left-nav-cluster .nav-divider,
.left-nav-cluster .nav-extras-btn-wrapper {
    pointer-events: none;
}

.left-nav-cluster .nav-extras-hover-zone .nav-extras-btn {
    pointer-events: auto;
}

.left-nav-cluster .left-nav-cluster-top-row,
.left-nav-cluster .kinma-logo-island,
.left-nav-cluster .nav-item,
.left-nav-cluster .nav-item-wrapper,
.left-nav-cluster .kinma-hw-accel-nav-btn,
.left-nav-cluster .utility-btn,
.left-nav-cluster .nav-extras-btn,
.left-nav-cluster button.nav-extras-collapse-btn,
.left-nav-cluster .feedback-highlight-fab-btn,
.left-nav-cluster .election-vote-fab-btn,
body.nav-extras-expanded .left-nav-cluster .nav-extras-reveal {
    pointer-events: auto;
}

/* Filler at bottom: same height as KINMA island so nav stays centered */
.nav-cluster-bottom-filler {
    flex-shrink: 0;
    width: 3em;
    height: 3em;
    min-height: 3em;
    visibility: hidden;
    pointer-events: none;
}

.nav-cluster-ai-slot-filler {
    flex-shrink: 0;
    width: 3.75em;
    box-sizing: border-box;
    height: calc(3em + 0.75em);
    min-height: calc(3em + 0.75em);
    visibility: hidden;
    pointer-events: none;
}

.left-nav-cluster .chat-ai-nav-island {
    gap: 0.2em;
}

/* Spacer: KINMA oben, Mitte zentriert, Voice unten */
.nav-cluster-spacer {
    flex: 1;
    min-height: 0;
}

.left-nav-cluster * {
    transition: none !important;
}

/* Gleiche Nav-Island-Optik auf allen Screens – alle Inseln gleiche Breite wie Nav-Island */
.left-nav-cluster .nav-island:not(.kinma-nav-island),
.left-nav-cluster .chat-nav-island,
.left-nav-cluster .admin-nav-island,
.left-nav-cluster .admin-stats-nav-island,
.left-nav-cluster .kinma-hw-accel-nav-island {
    padding: 0.375em;
    gap: 0.25em;
    width: 3.75em;
    min-width: 3.75em;
    max-width: 3.75em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Kontur wie Galerie-/Media-Suchpille (.gallery-bottom-search-pill) */
    background: var(--gallery-island-surface, #ffffff);
    border-radius: 9999px;
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05)
    );
}

/* KINMA-Insel: vollständig rund (kein Pill), ohne Hover-Beschriftung */
.left-nav-cluster .kinma-nav-island {
    padding: 0;
    gap: 0;
    width: 3.75em;
    height: 3.75em;
    min-width: 3.75em;
    max-width: 3.75em;
    min-height: 3.75em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    overflow: visible;
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05)
    );
    pointer-events: none;
}

.left-nav-cluster .kinma-nav-island .kinma-logo-btn {
    pointer-events: auto;
}

body.dark-mode .left-nav-cluster .kinma-nav-island,
[data-theme='dark'] .left-nav-cluster .kinma-nav-island {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

.left-nav-cluster .utility-island,
.left-nav-cluster .feedback-highlight-fab,
.left-nav-cluster .election-vote-fab {
    width: 3.75em;
    min-width: 3.75em;
    max-width: 3.75em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.left-nav-cluster .utility-island:not(.kinma-logo-island) {
    background: var(--gallery-island-surface, #ffffff);
    border-radius: 9999px;
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.06));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05)
    );
}

body.dark-mode .left-nav-cluster .nav-island:not(.kinma-nav-island),
body.dark-mode .left-nav-cluster .chat-nav-island,
body.dark-mode .left-nav-cluster .admin-nav-island,
body.dark-mode .left-nav-cluster .admin-stats-nav-island,
[data-theme='dark'] .left-nav-cluster .nav-island:not(.kinma-nav-island),
[data-theme='dark'] .left-nav-cluster .chat-nav-island,
[data-theme='dark'] .left-nav-cluster .admin-nav-island,
[data-theme='dark'] .left-nav-cluster .admin-stats-nav-island,
.left-nav-cluster .kinma-hw-accel-nav-island {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

body.dark-mode .left-nav-cluster .utility-island:not(.kinma-logo-island),
[data-theme='dark'] .left-nav-cluster .utility-island:not(.kinma-logo-island) {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

/* KINMA-Button = Island (wie Mobile), gleiche Optik */
.left-nav-cluster .kinma-logo-island.kinma-logo-btn {
    flex-shrink: 0;
    width: 3.75em;
    height: 3.75em;
    min-width: 3.75em;
    max-width: 3.75em;
    padding: 0;
    border-radius: 50%;
}

.left-nav-cluster .kinma-logo-btn {
    position: relative;
    width: 3.75em;
    height: 3.75em;
    min-width: 3.75em;
    min-height: 3.75em;
    padding: 0;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
}

.left-nav-cluster .kinma-logo-btn .kinma-lang-outline {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
}

.left-nav-cluster .kinma-logo-btn .kinma-lang-inner {
    position: absolute;
    inset: 12%;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 50%;
    background: #ffffff;
    z-index: 1;
    pointer-events: none;
}

.left-nav-cluster .kinma-logo-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 48%;
    height: 48%;
    margin: 0;
    object-fit: contain;
    display: block;
}

/* Kein „KINMA“-Text-Pill neben dem Logo-Button */
.left-nav-cluster .kinma-logo-btn .nav-label {
    display: none !important;
}

.left-nav-cluster .nav-item {
    width: 3em;
    height: 3em;
}

.left-nav-cluster .nav-item svg,
.left-nav-cluster .nav-island > svg {
    width: 1.5em;
    height: 1.5em;
}

.left-nav-cluster .nav-item.ai-chat-btn svg.left-nav-ai-icon {
    width: 1.375em;
    height: 1.375em;
}

/* Extras einklappen: nur kleines Chevron (Duplikat zu modules/navigation.css für Seiten ohne Modul-CSS) */
.left-nav-cluster .nav-extras-collapse-btn-wrap {
    margin-top: 0.125em;
}

.left-nav-cluster button.nav-item.nav-extras-collapse-btn {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 0.25em;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.left-nav-cluster .nav-extras-collapse-btn svg {
    width: 1em;
    height: 1em;
    display: block;
}

.left-nav-cluster .nav-extras-collapse-btn:hover,
.left-nav-cluster .nav-extras-collapse-btn:focus-visible {
    background: rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
}

.left-nav-cluster .nav-extras-collapse-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.left-nav-cluster .nav-island .nav-label,
.left-nav-cluster .chat-nav-island .nav-label,
.left-nav-cluster .admin-nav-island .nav-label {
    left: calc(100% + 0.75em);
    padding: 0.5em 0.75em;
    font-size: 0.875em;
}

.left-nav-cluster .nav-island .nav-divider {
    width: 2em;
    height: 0.125em;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 0.125em;
    margin: 0.0625em auto;
    flex-shrink: 0;
    align-self: center;
}
body.dark-mode .left-nav-cluster .nav-island .nav-divider,
body.dark-mode .left-nav-cluster .nav-extras-reveal-clip > .nav-extras-group-top-divider,
[data-theme='dark'] .left-nav-cluster .nav-island .nav-divider,
[data-theme='dark'] .left-nav-cluster .nav-extras-reveal-clip > .nav-extras-group-top-divider {
    background: rgba(255, 255, 255, 0.12);
}

/* Profil: kein zweiter Kreis — nur der Avatar, kein weißer/grauer Kreis vom .nav-item */
.left-nav-cluster .nav-profile-avatar {
    width: 3em;
    height: 3em;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease;
}

.left-nav-cluster .nav-item.nav-profile {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible;
}

.left-nav-cluster .nav-item.nav-profile:hover,
.left-nav-cluster .nav-item.nav-profile:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}

.left-nav-cluster .nav-item.nav-profile.active,
.left-nav-cluster .nav-item.nav-profile.active:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.left-nav-cluster .nav-item.nav-profile:hover .nav-profile-avatar,
.left-nav-cluster .nav-item.nav-profile:focus-visible .nav-profile-avatar {
    transform: none;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.2);
}

.left-nav-cluster .nav-item.nav-profile.active .nav-profile-avatar {
    box-shadow: 0 0 0 2px #1a1a1a;
}

body.dark-mode .left-nav-cluster .nav-item.nav-profile.active .nav-profile-avatar,
[data-theme="dark"] .left-nav-cluster .nav-item.nav-profile.active .nav-profile-avatar {
    box-shadow: 0 0 0 2px rgba(248, 250, 252, 0.9);
}

.left-nav-cluster .utility-island {
    padding: 0.375em;
}

.left-nav-cluster .utility-btn {
    width: 3em;
    height: 3em;
    font-size: 1em;
}

.left-nav-cluster .utility-btn svg {
    width: 1.5em;
    height: 1.5em;
}

.left-nav-cluster .utility-label {
    left: calc(100% + 0.75em);
    padding: 0.5em 0.75em;
    font-size: 0.875em;
}

.left-nav-cluster .utility-islands-container {
    gap: 1em;
}

.left-nav-cluster .utility-island {
    padding: 0.375em;
}

.left-nav-cluster .feedback-highlight-fab,
.left-nav-cluster .election-vote-fab {
    padding: 0.375em;
}

.left-nav-cluster .feedback-highlight-fab-btn,
.left-nav-cluster .election-vote-fab-btn {
    width: 3em;
    height: 3em;
}

.left-nav-cluster .feedback-highlight-fab-btn svg,
.left-nav-cluster .election-vote-fab-btn svg {
    width: 1.5em;
    height: 1.5em;
}

.left-nav-cluster .feedback-highlight-fab-btn .nav-label,
.left-nav-cluster .election-vote-fab-btn .nav-label {
    left: calc(100% + 0.75em);
    padding: 0.5em 0.75em;
    font-size: 0.875em;
}

/* Überall nur eine KINMA-Box: die kreisförmige in der linken Nav; die in der Top-Leiste ausblenden */
body:has(.left-nav-cluster) .settings-top-left .settings-logo-btn {
    display: none !important;
}
/* Leere Logo-Gruppe (ohne Profil-Selector) komplett ausblenden, damit keine leere Pill bleibt */
body:has(.left-nav-cluster) .settings-top-left .settings-logo-group:not(:has(.profile-selector-bar-new)) {
    display: none !important;
}

/* Mobile Navigation - Hidden on desktop (only show on mobile) */
/* Navigation Island */
.nav-island {
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1000; /* Below feedback button */
}

/* Utility Islands Container */
.utility-islands-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Remove individual positioning - elements are now in cluster */
.left-nav-cluster .feedback-highlight-fab,
.left-nav-cluster .election-vote-fab,
.left-nav-cluster .nav-island,
.left-nav-cluster .utility-islands-container {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
}

/* Mobile: Hide elections button in left-nav-cluster (it's in settings-controls on mobile) */
/* Feedback page uses same navigation as other pages - no special hiding needed */

.utility-island {
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    will-change: transform;
}

.utility-island:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(26, 26, 26, 0.05);
}

.utility-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
    font-size: 16px;
    font-weight: 700;
}

.utility-btn:hover {
    background: var(--hover-bg-color, #f8f9fa);
    color: var(--hover-icon-color, #1a1a1a);
}

.utility-btn.active {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

.utility-btn.active:hover {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

.utility-btn.has-notifications {
    background: #ef4444;
    color: #ffffff;
    animation: pulse-red 2s infinite;
}

.utility-btn.has-notifications:hover {
    background: #dc2626;
    color: #ffffff;
}

.utility-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

.utility-btn.has-notifications svg {
    display: none;
}

.utility-btn-count {
    display: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.utility-btn.has-notifications .utility-btn-count {
    display: block;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.utility-label {
    position: absolute;
    left: calc(100% + 12px);
    white-space: nowrap;
    background: #1a1a1a;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Arrow for utility label */
.utility-label::before {
    display: none;
}

.utility-btn:hover .utility-label {
    opacity: 1;
    transform: translateX(0);
}

/* Island labels: show whole group on hover + marquee for long labels */
.left-nav-cluster .nav-label,
.left-nav-cluster .utility-label {
    max-width: 180px;
    overflow: hidden;
}

.left-nav-cluster .nav-island:hover .nav-label,
.left-nav-cluster .chat-nav-island:hover .nav-label,
.left-nav-cluster .admin-nav-island:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0) !important;
}

/* Desktop behavior: labels always visible (no hover required) */
.left-nav-cluster .nav-island .nav-label,
.left-nav-cluster .chat-nav-island .nav-label,
.left-nav-cluster .admin-nav-island .nav-label,
.left-nav-cluster .utility-island .utility-label {
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(0) !important;
}

.left-nav-cluster .utility-island .utility-label {
    transform: translateX(0) !important;
}

.left-nav-cluster .utility-island:hover .utility-label {
    opacity: 1;
    transform: translateX(0);
}

.left-nav-cluster .nav-label .island-hover-label-track,
.left-nav-cluster .utility-label .island-hover-label-track {
    display: inline-block;
    white-space: nowrap;
}

@keyframes island-hover-label-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.3333%); }
}

.left-nav-cluster .nav-item:hover .nav-label.is-marquee .island-hover-label-track,
.left-nav-cluster .utility-btn:hover .utility-label.is-marquee .island-hover-label-track,
.left-nav-cluster .nav-island:hover .nav-label.is-marquee .island-hover-label-track,
.left-nav-cluster .chat-nav-island:hover .nav-label.is-marquee .island-hover-label-track,
.left-nav-cluster .admin-nav-island:hover .nav-label.is-marquee .island-hover-label-track,
.left-nav-cluster .utility-island:hover .utility-label.is-marquee .island-hover-label-track {
    animation: island-hover-label-marquee 6s linear infinite;
}

/* Chat Popup - Always default size */
.chat-popup {
    position: fixed;
    bottom: 24px;
    right: 24px;
    --kinma-chat-nav-rail-width: 64px;
    --kinma-chat-sidebar-width: 280px;
    --kinma-chat-collapsed-total-width: calc(var(--kinma-chat-nav-rail-width) + var(--kinma-chat-sidebar-width));
    --kinma-chat-vertical-tabs-extra-w: 0px;
    width: 1000px !important;
    height: 600px !important;
    min-width: 1000px !important;
    min-height: 600px !important;
    max-width: 1000px !important;
    max-height: 600px !important;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    transition: none; /* Remove transition to prevent size changes */
    resize: none !important; /* Disable resize */
}

/* Desktop: box-shadow Transition — siehe modules/chat.css */
.chat-popup.active:not(.chat-popup-mobile-fullscreen):not(.chat-popup--resizing):not(.kinma-chat-popup--docked-float):not(.kinma-chat-popup-flip-anim) {
    transition-property: box-shadow;
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.chat-popup.active.chat-popup-maximizing:not(.chat-popup-mobile-fullscreen),
.chat-popup.active.chat-popup-header-dbl-fullscreen:not(.chat-popup-mobile-fullscreen),
.chat-popup.active.kinma-chat-popup--wall-snapped:not(.chat-popup-mobile-fullscreen) {
    box-shadow: none !important;
}

.chat-popup.kinma-chat-opening-contact.active:not(.chat-popup-mobile-fullscreen):not(.chat-popup--user-layout):not(.chat-popup--resizing) {
    transition:
        width 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
        max-width 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
        left 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.chat-popup.active {
    display: flex;
}

.chat-popup.kinma-chat-popup-clone {
    z-index: 100003;
}

.chat-popup.kinma-chat-popup-instance-active {
    z-index: 100004;
}

body.kinma-chat-embed {
    margin: 0;
    overflow: hidden;
    background: #111;
}

body.kinma-chat-embed .chat-popup.kinma-chat-embed-window {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
}

/* Expand chatbox when profile panel is open */
.chat-popup.has-profile-open:not(.chat-popup-mobile-fullscreen) {
    width: 1320px !important; /* 1000px + 320px */
}

/* Nur Nav-Leiste + Kontaktliste, wenn keine Konversation gewählt */
.chat-popup:not(.has-active-contact):not(.chat-popup-mobile-fullscreen):not(.chat-popup--user-layout) {
    width: min(
        calc(var(--kinma-chat-collapsed-total-width) + var(--kinma-chat-vertical-tabs-extra-w, 0px)),
        calc(100vw - 16px)
    ) !important;
    min-width: 0 !important;
    max-width: min(90vw, calc(100vw - 16px)) !important;
}

/* Volle Breite nur mit aktiver Konversation */
.chat-popup.active.has-active-contact:not(.chat-popup-mobile-fullscreen):not(.view-calls):not(.view-stories):not(.view-new-contacts):not(.view-settings):not(.chat-popup--user-layout) {
    width: calc(1000px + var(--kinma-chat-vertical-tabs-extra-w, 0px)) !important;
    min-width: calc(1000px + var(--kinma-chat-vertical-tabs-extra-w, 0px)) !important;
    max-width: 90vw !important;
}

.chat-popup.active.chat-popup--header-tabs-vertical:not(.has-active-contact):not(.chat-popup-mobile-fullscreen):not(
        .chat-popup--user-layout
    ) {
    width: min(
        calc(var(--kinma-chat-collapsed-total-width) + var(--kinma-chat-vertical-tabs-extra-w, 0px)),
        calc(100vw - 16px)
    ) !important;
    min-width: 0 !important;
    max-width: min(90vw, calc(100vw - 16px)) !important;
}

.chat-popup.chat-popup--user-layout.chat-popup--header-tabs-vertical:not(.has-active-contact):not(
        .chat-popup-mobile-fullscreen
    ) {
    min-width: min(
        calc(var(--kinma-chat-collapsed-total-width) + var(--kinma-chat-vertical-tabs-extra-w, 0px)),
        calc(100vw - 16px)
    ) !important;
}

.chat-popup.chat-popup--user-layout:not(.chat-popup-mobile-fullscreen):not(.kinma-chat-popup--wall-snapped) {
    width: var(--kinma-chat-w, 1000px) !important;
    height: var(--kinma-chat-h, 600px) !important;
    min-width: min(
        calc(var(--kinma-chat-min-w, 1000px) + var(--kinma-chat-vertical-tabs-extra-w, 0px)),
        calc(100vw - 16px)
    ) !important;
    min-height: min(var(--kinma-chat-min-h, 1000px), calc(100vh - 16px)) !important;
    max-width: min(96vw, calc(100vw - 16px)) !important;
    max-height: min(96vh, calc(100vh - 16px)) !important;
}

.chat-popup.active.kinma-chat-popup--wall-snapped.chat-popup--user-layout:not(.chat-popup-mobile-fullscreen),
.chat-popup.active.kinma-chat-popup--wall-snapped.chat-popup--resizing:not(.chat-popup-mobile-fullscreen) {
    max-height: none !important;
    min-height: 0 !important;
}

.chat-popup.chat-popup--user-layout.has-profile-open:not(.chat-popup-mobile-fullscreen) {
    width: calc(var(--kinma-chat-w, 1000px) + 320px) !important;
    min-width: min(
        calc(var(--kinma-chat-min-w, 1000px) + var(--kinma-chat-vertical-tabs-extra-w, 0px) + 320px),
        calc(100vw - 16px)
    ) !important;
    max-width: min(96vw, calc(100vw - 16px)) !important;
}

.chat-popup.chat-popup--resizing:not(.chat-popup-mobile-fullscreen) {
    user-select: none;
}

.chat-popup.chat-popup--resizing .chat-popup-window-tab,
.chat-popup.chat-popup--resizing .chat-popup-window-tab-inner,
.chat-popup.chat-popup--resizing .chat-popup-window-tab-label,
.chat-popup.chat-popup--resizing .chat-popup-window-tab-leading,
.chat-popup.chat-popup--resizing .chat-popup-header-tabs-inner {
    transition: none !important;
}

.chat-popup-resize-handles {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10060;
    pointer-events: none;
    box-sizing: border-box;
    isolation: isolate;
}

.chat-popup.active:not(.chat-popup-mobile-fullscreen):not(.kinma-chat-popup-minimize-anim):not(
        .chat-popup-header-dbl-fullscreen
    ):not(.chat-popup-maximizing):not(.kinma-chat-popup--wall-snapped) .chat-popup-resize-handles {
    display: block;
}

.chat-popup.active.chat-popup-header-dbl-fullscreen:not(.chat-popup-mobile-fullscreen) .chat-popup-resize-handles,
.chat-popup.active.chat-popup-maximizing:not(.chat-popup-mobile-fullscreen) .chat-popup-resize-handles,
.chat-popup.active.kinma-chat-popup--wall-snapped:not(.chat-popup-mobile-fullscreen) .chat-popup-resize-handles {
    display: none !important;
    pointer-events: none !important;
}

.chat-popup-header,
.chat-popup-body,
.chat-popup #callStatusBar {
    position: relative;
    z-index: 1;
}

.chat-popup-resize-handle {
    position: absolute;
    pointer-events: auto !important;
    background: transparent;
    z-index: 2;
}

.chat-popup-resize-handle--n {
    top: 0;
    left: 8px;
    right: 8px;
    height: 12px;
    cursor: ns-resize;
}

.chat-popup-resize-handle--s {
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 12px;
    cursor: ns-resize;
}

.chat-popup-resize-handle--e {
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 12px;
    cursor: ew-resize;
}

.chat-popup-resize-handle--w {
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 12px;
    cursor: ew-resize;
}

.chat-popup-resize-handle--nw {
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
}

.chat-popup-resize-handle--ne {
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: nesw-resize;
}

.chat-popup-resize-handle--sw {
    bottom: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: nesw-resize;
}

.chat-popup-resize-handle--se {
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
}

.chat-popup-header {
    background: #1a1a1a;
    color: #ffffff;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    cursor: move;
    user-select: none;
    transition: background 0.3s ease;
    min-height: 48px;
    position: relative;
    --kinma-chat-header-tab-fade: #1a1a1a;
}

/* Stories Wrapper (Dark grey background) */
.chat-stories-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 40%;
    overflow: visible;
    outline: 2px solid rgb(255, 255, 255);
    background: #1a1a1a;
    border-radius: 24px;
    padding: 0 0 0 10px;
    margin: 0 auto;
    min-height: 40px;
    height: auto;
    order: 2;
    justify-content: flex-start;
}

/* Leerer Story-Bereich nimmt nur nötigen Platz ein (nicht größer als eine Story) */
.chat-stories-wrapper:has(.chat-stories-empty) {
    flex: 0 0 auto;
    max-width: none;
    min-height: 0;
}

.chat-stories-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 4px;
}

/* Stories Header (White pill bar inside wrapper) */
.chat-stories-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: visible;
    background: #ffffff;
    border-radius: 50px;
    padding: 6px;
    min-height: 40px;
    height: auto;
    justify-content: center;
}

.chat-stories-header:has(.chat-stories-empty) {
    flex: 0 0 auto;
    padding: 4px 6px;
    min-height: 0;
}

.chat-stories-scroll-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 0;
    min-width: 0;
    height: 100%;
}

.chat-stories-scroll-header:has(.chat-stories-empty) {
    flex: 0 0 auto;
}

.chat-stories-scroll-header::-webkit-scrollbar {
    height: 4px;
}

.chat-stories-scroll-header::-webkit-scrollbar-track {
    background: transparent;
}

.chat-stories-scroll-header::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.chat-stories-scroll-header::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.chat-stories-add-btn-header {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-stories-add-btn-header:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #1a1a1a;
    transform: scale(1.05);
}

.chat-stories-add-btn-header svg {
    width: 18px;
    height: 18px;
}

/* Adjust story items for horizontal layout */
.chat-stories-header .chat-story-item {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.chat-stories-header .chat-story-avatar {
    position: relative;
    width: 32px;
    height: 32px;
}

.chat-stories-header .chat-story-initials {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    font-size: 13px;
    box-shadow: 0 0 0 2px #1a1a1a;
}

.chat-stories-header .chat-story-segments {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.chat-stories-header .chat-story-segments-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    display: block;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.chat-stories-header .chat-story-segments-svg path,
.chat-stories-header .chat-story-segments-svg circle {
    shape-rendering: geometricPrecision;
    paint-order: stroke fill markers;
}

.chat-popup-header-drag-handle {
    order: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: var(--kinma-chat-nav-rail-width);
    width: var(--kinma-chat-nav-rail-width);
    padding: 0;
    box-sizing: border-box;
    cursor: grab;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.15s ease, background 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.chat-popup-header-drag-handle:hover {
    color: rgba(255, 255, 255, 0.72);
}

.chat-popup-header-drag-handle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.chat-popup-header-drag-handle-icon svg {
    display: block;
    flex-shrink: 0;
}

/* Mehrere Chat-Fenster: Tab-Zeile nutzt gesamte Breite zwischen Griff und Controls */
.chat-popup-header-tabs-wrap {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    margin: 0 4px 0 0;
    min-height: 0;
    --kinma-chat-tab-row-height: 36px;
}

.chat-popup-header-drag-spacer {
    order: 2;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    min-height: 48px;
    align-self: stretch;
    overflow: hidden;
    pointer-events: none;
}

.chat-popup-header-tabs-scroll-clip {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    --kinma-chat-header-tab-fade: inherit;
}

.chat-popup-header-tabs-scroll-clip::before,
.chat-popup-header-tabs-scroll-clip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(72px, 26%);
    max-width: 104px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.chat-popup-header-tabs-scroll-clip::before {
    left: 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 96%, transparent) 0%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 72%, transparent) 18%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 42%, transparent) 38%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 20%, transparent) 58%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 8%, transparent) 76%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 2%, transparent) 91%,
        transparent 100%
    );
}

.chat-popup-header-tabs-scroll-clip::after {
    right: 0;
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 96%, transparent) 0%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 72%, transparent) 18%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 42%, transparent) 38%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 20%, transparent) 58%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 8%, transparent) 76%,
        color-mix(in srgb, var(--kinma-chat-header-tab-fade, #1a1a1a) 2%, transparent) 91%,
        transparent 100%
    );
}

.chat-popup-header-tabs-scroll-clip.kinma-tabs-fade-left::before {
    opacity: 1;
}

.chat-popup-header-tabs-scroll-clip.kinma-tabs-fade-right::after {
    opacity: 1;
}

.chat-popup-header-tabs-scroll {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
    display: flex;
    align-items: flex-end;
    cursor: grab;
    padding-bottom: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.chat-popup-header-tabs-scroll::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

.chat-popup-header-tabs-scroll::-webkit-scrollbar-thumb,
.chat-popup-header-tabs-scroll::-webkit-scrollbar-track,
.chat-popup-header-tabs-scroll::-webkit-scrollbar-corner {
    background: transparent !important;
    border: 0 !important;
}

.chat-popup-header-tabs-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.chat-popup-header-tabs-add-slot {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    align-self: stretch;
}

.chat-popup-header-tabs-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 0;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll'] {
    flex: 0 0 auto;
    width: max-content;
    min-width: min(100%, max-content);
}

.chat-popup-window-tab {
    --kinma-chat-tab-close-size: 22px;
    --kinma-chat-tab-min-width: 32px;
    container-type: inline-size;
    container-name: kinma-chat-tab;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    flex: 1 1 0;
    min-width: var(--kinma-chat-tab-min-width, 32px);
    max-width: none;
    height: var(--kinma-chat-tab-row-height, 36px);
    min-height: var(--kinma-chat-tab-row-height, 36px);
    max-height: var(--kinma-chat-tab-row-height, 36px);
    padding: 4px 6px 4px 8px;
    box-sizing: border-box;
    border: none;
    border-radius: 10px 10px 0 0;
    background: #1a1a1a;
    color: #e8e8e8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    align-self: stretch;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
    touch-action: none;
}

.chat-popup-window-tab-inner {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    gap: 4px;
    justify-content: flex-start;
    box-sizing: border-box;
    padding-right: 0;
    transition:
        justify-content 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        padding-right 0.16s ease;
}

.chat-popup-window-tab-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    line-height: 0;
    opacity: 1;
    transition: opacity 0.16s ease;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='roomy'] .chat-popup-window-tab,
.chat-popup-header-tabs-inner[data-kinma-tab-layout='shared'] .chat-popup-window-tab {
    justify-content: flex-start;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll'] .chat-popup-window-tab,
.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll-compact'] .chat-popup-window-tab,
.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll-icon'] .chat-popup-window-tab {
    flex: 0 0 var(--kinma-chat-tab-slot-width, var(--kinma-chat-tab-min-width, 32px));
    width: var(--kinma-chat-tab-slot-width, var(--kinma-chat-tab-min-width, 32px));
    min-width: var(--kinma-chat-tab-min-width, 32px);
    max-width: var(--kinma-chat-tab-slot-width, var(--kinma-chat-tab-min-width, 32px));
    justify-content: flex-start;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll'] .chat-popup-window-tab-label {
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll-compact'] .chat-popup-window-tab {
    gap: 3px;
    padding-left: 5px;
    padding-right: 4px;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='scroll-icon'] .chat-popup-window-tab,
.chat-popup-header-tabs-inner[data-kinma-tab-layout='tight'] .chat-popup-window-tab {
    padding-left: 6px;
    padding-right: 6px;
}

.chat-popup-window-tab:hover {
    background: #1a1a1a;
    color: #fff;
}

.chat-popup-window-tab.is-active {
    background: #ffffff;
    color: #1a1a1a;
}

/*
 * Inaktive Fenster-Tabs: Farbe nach data-kinma-window-tab-mode (Tab-Zustand),
 * nicht nach globalem .chat-popup.ai-mode.
 */
.chat-popup-window-tab[data-kinma-window-tab-mode='chat']:not(.is-active) {
    background: #1a1a1a;
    color: #e8e8e8;
}

.chat-popup-window-tab[data-kinma-window-tab-mode='chat']:not(.is-active):hover {
    background: color-mix(in srgb, #1a1a1a 88%, #ffffff);
    color: #ffffff;
}

.chat-popup-window-tab[data-kinma-window-tab-mode='ai']:not(.is-active) {
    background: #4f46e5;
    color: #e0e7ff;
}

.chat-popup-window-tab[data-kinma-window-tab-mode='ai']:not(.is-active):hover {
    background: color-mix(in srgb, #4f46e5 88%, #ffffff);
    color: #ffffff;
}

.chat-popup-window-tab-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 12rem;
    opacity: 1;
    text-align: left;
    line-height: 1;
    transition:
        max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.18s ease,
        flex 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='roomy'] .chat-popup-window-tab-label,
.chat-popup-header-tabs-inner[data-kinma-tab-layout='shared'] .chat-popup-window-tab-label {
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='compact'] .chat-popup-window-tab-label {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='compact'] .chat-popup-window-tab {
    gap: 3px;
    padding-left: 4px;
    padding-right: 0;
}

.chat-popup-header-tabs-inner[data-kinma-tab-layout='tight'] .chat-popup-window-tab {
    gap: 0;
    padding-left: 2px;
    padding-right: 0;
}

.chat-popup-window-tab-close {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kinma-chat-tab-close-size, 22px);
    height: var(--kinma-chat-tab-close-size, 22px);
    min-width: 0;
    max-width: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    cursor: default;
    box-sizing: border-box;
    transform: translateY(-50%);
    transition: max-width 0.14s ease, opacity 0.14s ease, background 0.14s ease;
}

.chat-popup-window-tab-close-icon {
    display: block;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.chat-popup-window-tab--shows-label:hover .chat-popup-window-tab-inner,
.chat-popup-window-tab--shows-label:has(.chat-popup-window-tab-close:focus-visible) .chat-popup-window-tab-inner {
    padding-right: calc(var(--kinma-chat-tab-close-size, 22px) + 4px);
}

.chat-popup-window-tab--shows-label:hover .chat-popup-window-tab-close,
.chat-popup-window-tab--shows-label:has(.chat-popup-window-tab-close:focus-visible) .chat-popup-window-tab-close {
    max-width: var(--kinma-chat-tab-close-size, 22px);
    min-width: var(--kinma-chat-tab-close-size, 22px);
    opacity: 0.88;
    pointer-events: auto;
    cursor: pointer;
    transform: translateY(-50%);
}

.chat-popup-window-tab--shows-label.is-active:hover .chat-popup-window-tab-close {
    opacity: 0.72;
}

.chat-popup-window-tab--icon-only:not(.is-active):hover .chat-popup-window-tab-close {
    max-width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}

.chat-popup-window-tab--icon-only:not(.is-active):hover .chat-popup-window-tab-inner {
    padding-right: 0 !important;
}

.chat-popup-window-tab--icon-only:not(.is-active):hover .chat-popup-window-tab-leading {
    opacity: 1;
}

@container kinma-chat-tab (max-width: 32px) {
    .chat-popup-window-tab {
        padding-left: 0;
        padding-right: 0;
    }

    .chat-popup-window-tab-inner {
        justify-content: center;
        gap: 0;
        padding-right: 0 !important;
    }

    .chat-popup-window-tab-label {
        flex: 0 0 0;
        max-width: 0;
        opacity: 0;
    }

    .chat-popup-window-tab--icon-only:not(.is-active):hover .chat-popup-window-tab-inner {
        padding-right: 0 !important;
    }

    .chat-popup-window-tab--icon-only:not(.is-active):hover .chat-popup-window-tab-leading {
        opacity: 1;
    }
}

.chat-popup-window-tab-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 40px;
    height: var(--kinma-chat-tab-row-height, 36px);
    min-height: var(--kinma-chat-tab-row-height, 36px);
    max-height: var(--kinma-chat-tab-row-height, 36px);
    padding: 2px 8px 3px;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: flex-end;
    border: none;
    border-radius: 10px 10px 0 0;
    background: #ffffff;
    color: #1a1a1a;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-popup-window-tab-add-plus {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

.chat-popup-window-tab-add-caption {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.chat-popup-window-tab-add:hover {
    background: #ececec;
}

.chat-header-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
    order: 10;
    margin-left: auto;
    padding-right: 4px;
    z-index: 2;
}

.chat-header-controls-divider {
    display: none;
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 20px;
    margin: 0;
    background: rgba(255, 255, 255, 0.24);
    border-radius: 1px;
    pointer-events: none;
}

.chat-popup.active:not(.chat-popup-mobile-fullscreen) .chat-header-controls-divider {
    display: block;
}

.chat-popup.ai-mode .chat-header-controls-divider {
    background: rgba(255, 255, 255, 0.38);
}

@media (max-width: 1024px) {
    .chat-header-controls-divider {
        display: none !important;
    }
}

/* AI Mode Header — flache Farbe */
.chat-popup.ai-mode .chat-popup-header {
    background: #4f46e5;
    --kinma-chat-header-tab-fade: #4f46e5;
}

.chat-popup.ai-mode .chat-popup-header-drag-handle {
    color: rgba(255, 255, 255, 0.5);
}

.chat-popup.ai-mode .chat-popup-header-drag-handle:hover {
    color: rgba(255, 255, 255, 0.85);
}

.kinma-chat-float-window {
    position: fixed;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    max-width: min(400px, 90vw);
    height: auto;
    max-height: none;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    padding: 0;
    cursor: default;
    user-select: none;
    overflow: hidden;
}

.kinma-chat-float-window:not(.kinma-float-active) .kinma-chat-float-popup-host {
    display: none;
}

.kinma-chat-float-window.kinma-float-active {
    width: min(1000px, 94vw);
    min-width: min(360px, 94vw);
    max-width: min(1000px, 94vw);
    height: min(640px, calc(100vh - 40px));
    max-height: min(88vh, calc(100vh - 40px));
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.kinma-chat-float-window.kinma-float-active .kinma-chat-float-window-tabs {
    display: none;
}

.kinma-chat-float-window--embed {
    width: min(1000px, calc(100vw - 32px));
    min-width: 340px;
    max-width: min(1000px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 32px));
    max-height: min(600px, calc(100vh - 32px));
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.kinma-chat-embed-host {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.kinma-chat-embed-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.kinma-chat-embed-drag-overlay {
    position: fixed;
    inset: 0;
    z-index: 100006;
    cursor: move;
    background: transparent;
}

.kinma-chat-float-popup-host {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
}

.chat-popup.kinma-chat-popup--docked-float {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 16px;
    z-index: 1;
}

.kinma-chat-float-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.kinma-chat-float-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.kinma-chat-float-window-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    max-width: 100%;
    flex-shrink: 0;
    cursor: grab;
    --kinma-chat-header-tab-fade: #1a1a1a;
    --kinma-chat-tab-row-height: 36px;
}

.kinma-chat-float-window-tabs .chat-popup-header-tabs-scroll-clip {
    flex: 1 1 0;
    min-width: 0;
}

.kinma-chat-float-window-tabs .chat-popup-header-tabs-scroll {
    max-width: 100%;
}

.kinma-chat-float-window-tabs .chat-popup-header-tabs-add-slot {
    flex-shrink: 0;
}

.kinma-chat-tab-drag-ghost {
    position: fixed;
    z-index: 100005;
    pointer-events: none;
    padding: 6px 12px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.kinma-chat-tab-drag-ghost--tab {
    max-width: none;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: grabbing;
}

.chat-popup-window-tab.kinma-chat-tab-drag-ghost.kinma-chat-tab-drag-ghost--tab {
    position: fixed !important;
    z-index: 100005 !important;
    pointer-events: none !important;
    display: inline-flex !important;
    flex: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    container-type: normal !important;
}

.chat-popup-window-tab.kinma-chat-tab-drag-ghost.kinma-chat-tab-drag-ghost--tab.kinma-chat-tab-drag-ghost--detached {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.kinma-chat-tab-drop-hover::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 2px dashed rgba(99, 102, 241, 0.75);
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.kinma-chat-tab-reorder-gap {
    flex: 0 0 auto;
    box-sizing: border-box;
    align-self: stretch;
    border-radius: 10px 10px 0 0;
    background: rgba(99, 102, 241, 0.08);
    border: 2px dashed rgba(99, 102, 241, 0.45);
    pointer-events: none;
    overflow: hidden;
}

.chat-popup-header-tabs-inner.kinma-chat-tabs-reordering {
    min-height: var(--kinma-chat-tab-row-height, 36px);
}

.chat-popup-header-tabs-inner.kinma-chat-tabs-reordering .chat-popup-window-tab:not(.kinma-chat-tab-drag-source) {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-popup-header-tabs-inner.kinma-chat-tabs-reordering .chat-popup-window-tab.kinma-chat-tab-drag-source {
    visibility: hidden !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.kinma-chat-tab-drag-ghost--tab .chat-popup-window-tab-close,
.kinma-chat-tab-drag-ghost--tab [data-kinma-tab-close],
.kinma-chat-tab-drag-ghost--tab [data-kinma-clone-tab-close] {
    display: none !important;
}

.kinma-chat-tab-drag-ghost--tab .chat-popup-window-tab-inner {
    padding-right: 0 !important;
}

@media (max-width: 1024px) {
    .kinma-chat-float-window {
        display: none !important;
    }
}

.chat-header-ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    margin-right: 12px;
}

.chat-header-ai-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.chat-header-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 8px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 40px;
    min-width: 40px;
    height: 100%;
    min-height: 48px;
    flex-shrink: 0;
}

.chat-header-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-header-fullscreen-btn svg {
    width: 18px;
    height: 18px;
}

.chat-header-ai-btn svg {
    width: 18px;
    height: 18px;
}

.chat-popup-close {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    margin: 8px 8px 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    align-self: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-popup-close[data-kinma-chat-header-mode="minimize"]:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.chat-popup-close[data-kinma-chat-header-mode="minimize"]:hover svg {
    stroke: #ffffff;
}

.chat-popup-close[data-kinma-chat-header-mode="close"]:hover {
    background: rgba(220, 53, 69, 0.35);
    color: #ffb3b8;
}

.chat-popup-close[data-kinma-chat-header-mode="close"]:hover svg {
    stroke: #ffb3b8;
}

/* Mobile Chatbox: X-Button ausblenden (Family + AI, Fullscreen) */
@media (max-width: 1024px) {
    .chat-popup.active.chat-popup-mobile-fullscreen .chat-popup-close {
        display: none !important;
    }
}

/* Chat Status Indicator */
.chat-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.chat-status-indicator[data-status="green"] {
    background-color: #28a745;
}

.chat-status-indicator[data-status="yellow"] {
    background-color: #ffc107;
}

.chat-status-indicator[data-status="red"] {
    background-color: #dc3545;
}

.chat-popup-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    align-items: stretch;
}

/* Stories Sidebar (Leftmost) */
.chat-stories-sidebar {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    flex-shrink: 0;
    position: relative;
}

.chat-stories-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    min-height: 0;
}

.chat-stories-scroll:has(.chat-stories-empty) {
    flex: 0 0 auto;
    padding: 0;
}

.chat-stories-scroll::-webkit-scrollbar {
    width: 4px;
}

.chat-stories-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.chat-stories-scroll::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}

.chat-stories-scroll::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* Empty State - Keine Stories */
.chat-stories-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-height: auto;
    height: auto;
    width: 100%;
}

/* Im Header: kompakte Höhe wie ein Story-Thumbnail (32px) */
.chat-stories-header .chat-stories-empty {
    padding: 0 2px;
}
.chat-stories-header .chat-stories-empty-circle {
    width: 32px;
    height: 32px;
    border-width: 2px;
}
.chat-stories-header .chat-stories-empty-text {
    font-size: 7px;
    padding: 0 2px;
    line-height: 1.15;
}

/* Gestrichelter Circle mit Text (Sidebar verwendet 56px) */
.chat-stories-empty-circle {
    width: 56px;
    height: 56px;
    border: 3px dashed #dee2e6; /* Gestrichelte Outline */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin: 0 auto;
}

.chat-stories-empty-text {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    color: #9ca3af;
    text-align: center;
    padding: 4px;
    letter-spacing: -0.3px;
}

/* ============================================================================
   CHAT STORIES - AVATAR STYLES
   NEU GESCHRIEBEN - Optimiert für segmentierte Outlines
   ============================================================================ */

/* Story Item Container */
.chat-story-item {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    border: none !important; /* Keine durchgehende Outline */
    outline: none !important; /* Keine Outline */
    box-shadow: none !important; /* Kein Schatten der als Outline wirkt */
}

/* Ausgegraut wenn alle Stories angeschaut wurden */
.chat-story-item.all-viewed {
    opacity: 0.5;
}

.chat-story-item.all-viewed:hover {
    opacity: 0.7;
}

/* Aktiver Story-Circle (wird gerade angeschaut) - Bläulicher Hintergrund */
.chat-story-item.active {
    background: rgba(99, 102, 241, 0.15); /* Bläulicher Hintergrund */
    border-radius: 50%;
    padding: 2px;
}

.chat-story-item.active .chat-story-avatar {
    /* Background wird dynamisch gesetzt, daher kein statischer Hintergrund */
    border-radius: 50%;
}

/* Avatar Circle (enthält Initialen + optional Segmente) */
.chat-story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Wichtig für SVG-Segmente */
    border: none; /* Keine durchgehende Outline */
    outline: none; /* Keine Outline */
}

/* Segmente Container (für Multi-Stories) */
.chat-story-segments {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    pointer-events: none;
    z-index: 0; /* Unter den Initialen, aber über dem Hintergrund */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* SVG für Segmente - PERFEKT GLATT UND FLÜSSIG */
.chat-story-segments-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;  /* Exakte Größe */
    height: 56px; /* Exakte Größe */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
    z-index: 0;
    border: none !important;
    outline: none !important;
    
    /* Anti-Aliasing & Glättung */
    shape-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Hardware-Beschleunigung für glatte Darstellung */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Perfekte glatte Strokes für Paths und Circles */
.chat-story-segments-svg path,
.chat-story-segments-svg circle {
    shape-rendering: geometricPrecision;
    paint-order: stroke fill markers;
    stroke-opacity: 1 !important;
    fill-opacity: 1 !important;
}

/* Initialen Circle (immer oben) - OPTIMIERT */
.chat-story-initials {
    position: relative;
    z-index: 2; /* Über den Segmenten */
    width: 40px; /* Optimiert für größeres SVG und besseren Gap */
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 17px;
    border: none !important; /* Keine Outline */
    outline: none !important; /* Keine Outline */
    box-shadow: none !important; /* Kein Schatten der als Outline wirkt */
    /* Kein weißer Ring mehr - keine Outline zwischen Segmenten und Circle */
    
    /* Anti-Aliasing für perfekte Kreisform */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ausgegraut wenn alle Stories angeschaut wurden */
.chat-story-item.all-viewed .chat-story-initials {
    background: linear-gradient(135deg, #adb5bd 0%, #868e96 100%);
    opacity: 0.7;
}

.chat-story-item.all-viewed .chat-story-segments-svg path,
.chat-story-item.all-viewed .chat-story-segments-svg circle {
    stroke: #adb5bd;
    opacity: 0.7;
}

/* Legacy Classes (werden nicht mehr verwendet, aber für Kompatibilität behalten) */
/* .chat-story-item.unviewed, .chat-story-item.viewed, .chat-story-item.multiple-stories - removed */

.chat-stories-add-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-stories-add-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    color: #1a1a1a;
    transform: scale(1.1);
}

.chat-stories-add-btn svg {
    width: 24px;
    height: 24px;
}

/* Chat Sidebar (Left) */
.chat-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    transition: width 0.25s ease, max-width 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
    will-change: width;
    border-right: 1px solid #e9ecef; /* Add border as split line */
}

/* Full width when no contact is selected */
.chat-popup:not(.has-active-contact) .chat-sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

/* In default chat view keep sidebar fixed so chat area stays visible next to it */
.chat-popup.active:not(.view-calls):not(.view-stories):not(.view-archived):not(.view-new-contacts):not(.view-settings):not(.view-notes) .chat-sidebar,
.chat-popup.active:not(.view-calls):not(.view-stories):not(.view-archived):not(.view-new-contacts):not(.view-settings):not(.view-notes) #chatSidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

/* Ensure sidebar keeps its width when contact is selected */
.chat-popup.has-active-contact:not(.view-notes) .chat-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

/* Always show chat-main (right side) - never collapse, unless story is active */
.chat-main {
    display: flex;
    flex: 1;
    min-width: 0;
}

/* Hide chat-main when story creation is active (handled by JS, but ensure it stays hidden) */
.chat-popup:has(#chatStoryCreation[style*="display: flex"]) .chat-main,
.chat-popup:has(#chatStoryCreation[style*="display: block"]) .chat-main {
    display: none !important;
}

.chat-sidebar.collapsed {
    width: 0;
    min-width: 0;
}

.chat-sidebar.collapsed > * {
    visibility: hidden;
}

/* Prevent sidebar from being collapsed - always show right side */
.chat-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

.chat-popup.has-active-contact:not(.view-notes) .chat-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
}

/* Vertical Divider / Split Line between chat and contact section */
.chat-divider {
    width: 1px;
    background: #e9ecef;
    cursor: default;
    position: relative;
    display: flex; /* Show divider as visual split line */
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
    border-left: none;
    border-right: none;
    pointer-events: none; /* Disable interaction */
}

.chat-divider:hover {
    background: #adb5bd;
}

.chat-divider-handle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    opacity: 0; /* Always hidden */
    pointer-events: none;
}

.chat-divider-icon {
    transition: transform 0.25s ease;
    will-change: transform;
}

/* Collapsed state styling - show expanded variant with handle */
.chat-sidebar.collapsed ~ .chat-divider {
    width: 24px;
    background: #1a1a1a;
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
}

.chat-sidebar.collapsed ~ .chat-divider:hover {
    background: #1a1a1a;
}

.chat-sidebar.collapsed ~ .chat-divider .chat-divider-handle {
    opacity: 1;
    color: #ffffff;
    pointer-events: auto;
}

.chat-sidebar.collapsed ~ .chat-divider .chat-divider-icon {
    transform: rotate(180deg);
}

.chat-tabs {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 10px;
    gap: 6px;
}

.chat-sidebar.collapsed .chat-tabs {
    display: none;
}

.chat-tabs-row {
    display: flex;
    gap: 6px;
}

.chat-tabs-archived {
    display: none; /* Hidden by default, shown when archived tab exists */
}

/* Section-Tabs wie Nav-Island: gleicher Auswahlstil */
.chat-tab {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
    line-height: 1.3;
    box-shadow: none;
}

.chat-tabs-archived .chat-tab {
    padding: 6px 14px;
    font-size: 12px;
    min-height: auto;
    height: auto;
    line-height: 1.4;
}

.chat-tabs-archived .chat-tab svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: middle;
}

.chat-tab:hover {
    color: #1a1a1a;
    background: #f8f9fa;
}

.chat-tab.active {
    color: #1a1a1a;
    background: #e9ecef;
    background-color: #e9ecef;
    box-shadow: none;
}

.chat-tab.active:hover {
    background: #dee2e6;
    background-color: #dee2e6;
}

.chat-search-container {
    padding: 10px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.chat-sidebar.collapsed .chat-search-container {
    display: none;
}

.chat-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s ease;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.chat-search-wrapper:focus-within {
    background: #ffffff;
    border-color: #e9ecef;
}

.chat-search-back-btn {
    width: 32px;
    height: 32px;
    margin: 2px 4px 2px 2px;
    border-radius: 8px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    flex-shrink: 0;
}

.chat-search-back-btn:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-search-back-btn svg {
    width: 18px;
    height: 18px;
}

.chat-search-icon {
    position: absolute;
    left: 10px;
    color: #6c757d;
    pointer-events: none;
    z-index: 1;
    width: 16px;
    height: 16px;
    transition: left 0.2s ease;
}

/* Wenn Zurück-Pfeil sichtbar ist, verschiebe Suchfeld-Icon */
.chat-search-wrapper.has-back-btn .chat-search-icon {
    left: 46px; /* 32px Button + 4px margin + 10px padding */
}

.chat-search-wrapper.has-back-btn .chat-search-input {
    padding-left: 58px; /* 46px Icon Position + 12px padding */
}

.chat-search-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px 8px 32px;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    outline: none;
    transition: all 0.2s ease;
    background: transparent;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.chat-search-input::placeholder {
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-filter-btn {
    width: 28px;
    height: 28px;
    margin: 2px;
    border-radius: 8px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    flex-shrink: 0;
    min-width: 28px;
}

.chat-filter-btn:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-filter-btn.active {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 12px;
    margin-top: 4px;
    width: 200px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: none;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
}

.chat-filter-dropdown.active {
    display: flex;
}

.chat-filter-header {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.chat-filter-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.chat-filter-group {
    padding: 6px 12px;
    border-bottom: 1px solid #f8f9fa;
}

.chat-filter-group:last-of-type {
    border-bottom: none;
}

.chat-filter-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.chat-filter-options-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-filter-option-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a1a;
    user-select: none;
    transition: color 0.15s ease;
}

.chat-filter-option-compact:hover {
    color: #1a1a1a;
}

.chat-filter-option-compact input[type="checkbox"],
.chat-filter-option-compact input[type="radio"] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
}

.chat-filter-option-compact span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-filter-actions {
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #f8f9fa;
}

.chat-filter-clear {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-filter-clear:hover {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #1a1a1a;
}

/* Custom scrollbar for filter dropdown */
.chat-filter-content::-webkit-scrollbar {
    width: 4px;
}

.chat-filter-content::-webkit-scrollbar-track {
    background: transparent;
}

.chat-filter-content::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}

.chat-filter-content::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

.chat-contacts-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.chat-sidebar.collapsed .chat-contacts-list {
    display: none;
}

/* AI Assistant Button Container */
.chat-ai-assistant-container {
    padding: 12px;
    border-top: 1px solid #e9ecef;
    background: #ffffff;
    flex-shrink: 0;
}

.chat-sidebar.collapsed .chat-ai-assistant-container {
    display: none;
}

.chat-ai-assistant-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

/* KI-Modus: gleicher Lila-Akzent wie Senden / Header */
.chat-popup.ai-mode .chat-ai-assistant-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.chat-popup.ai-mode .chat-ai-assistant-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.chat-ai-assistant-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

/* Navigation Section — layered rail: modules/chat.css (.chat-nav-rail-back / .chat-nav-rail-front) */
.chat-navigation-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 64px;
    min-height: 100%;
    padding: 0;
    background: transparent;
    border-right: none;
    box-shadow: none;
}

/* Top Navigation Buttons */
.chat-nav-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
}

/* Archiv: eigene Nav-Sektion (Details in modules/chat.css) */
.chat-nav-archive-section,
.chat-nav-top-archived {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding: 10px 0 8px;
    margin-top: 6px;
    border-top: 1px solid #e2e8f0;
    gap: 6px;
}

.chat-nav-archive-section.chat-nav-top-archived--visible,
.chat-nav-top-archived.chat-nav-top-archived--visible {
    display: flex;
}

.chat-popup.ai-mode .chat-nav-archive-section,
.chat-popup.ai-mode .chat-nav-top-archived {
    display: none !important;
}

/* KI-Modus: linke Leiste nur auf Mobile-Vollbild aus (Desktop: schmale Leiste mit KI-Chat + Umschalter, siehe modules/chat.css) */
.chat-popup.ai-mode.chat-popup-mobile-fullscreen .chat-navigation-section {
    display: none !important;
}

/* Story-Balken nur im normalen Chat-Modus anzeigen, nicht im AI-Modus */
.chat-popup.ai-mode .chat-stories-wrapper {
    display: none !important;
}

/* Bottom: Einstellungen */
.chat-nav-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 0;
    width: 100%;
}

.chat-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    background-color: transparent;
    color: #6c757d;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
}

/* Simple active state - no indicator bar */

/* AI Button - Same size as others for consistency */
.chat-nav-ai {
    position: relative;
    width: 48px;
    height: 48px;
}

.chat-nav-btn:hover {
    background: #f8f9fa;
    background-color: #f8f9fa;
    color: #1a1a1a;
}

.chat-nav-btn:hover svg {
    color: #1a1a1a;
}

/* Ensure AI button icon doesn't turn black on hover */
.chat-nav-ai:hover svg {
    color: #6c757d !important;
}

/* Selected section: dark grey circle + white icon (like mobile) */
.chat-nav-btn.active {
    background: #1a1a1a;
    background-color: #1a1a1a;
    color: #ffffff;
}

.chat-nav-btn.active:hover {
    background: #1a1a1a;
    background-color: #1a1a1a;
    color: #ffffff;
}

.chat-nav-btn.active svg {
    color: #ffffff;
}

.chat-nav-btn svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    transition: color 0.15s ease;
    color: inherit;
}

/* AI Assistant Button - Same style as settings button, with icon switching */
.chat-nav-ai {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chat-nav-ai svg {
    width: 22px;
    height: 22px;
    transition: color 0.15s ease;
    display: block;
    margin: 0;
    flex-shrink: 0;
}

/* Icon switching for AI button */
.chat-nav-ai-icon,
.chat-nav-family-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 22px !important;
    height: 22px !important;
    margin: 0;
    padding: 0;
}

.chat-nav-ai-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.chat-nav-family-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

/* When in AI mode, show family icon, hide AI icon */
.chat-popup.ai-mode .chat-nav-ai .chat-nav-ai-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.chat-popup.ai-mode .chat-nav-ai .chat-nav-family-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    display: block !important;
}

.chat-nav-ai svg path {
    fill: url(#aiIconGradient);
}

/* AI Button uses same hover/active styles as other nav buttons */
.chat-nav-ai:hover {
    background: #f8f9fa;
    background-color: #f8f9fa;
    color: #1a1a1a;
}

.chat-nav-ai:hover .chat-nav-ai-icon,
.chat-nav-ai:hover .chat-nav-family-icon {
    transform: translate(-50%, -50%);
}

/* Colorful moving shadow animation for AI icon */
@keyframes aiIconColorfulShadow {
    0% {
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 16px rgba(236, 72, 153, 0.3));
    }
    20% {
        filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.6)) drop-shadow(0 0 14px rgba(251, 146, 60, 0.4)) drop-shadow(0 0 18px rgba(34, 197, 94, 0.3));
    }
    40% {
        filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6)) drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)) drop-shadow(0 0 16px rgba(99, 102, 241, 0.3));
    }
    60% {
        filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6)) drop-shadow(0 0 14px rgba(99, 102, 241, 0.4)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.3));
    }
    80% {
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)) drop-shadow(0 0 12px rgba(236, 72, 153, 0.4)) drop-shadow(0 0 16px rgba(251, 146, 60, 0.3));
    }
    100% {
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 16px rgba(236, 72, 153, 0.3));
    }
}

/* AI Button - Active state with animated gradient background */
.chat-nav-ai.active,
.nav-item.ai-chat-btn.active {
    background: linear-gradient(
        90deg,
        #6366f1 0%,
        #8b5cf6 20%,
        #ec4899 40%,
        #fb923c 60%,
        #22c55e 80%,
        #3b82f6 100%,
        #6366f1 100%
    ) !important;
    background-size: 300% 100% !important;
    animation: aiButtonGradientMove 3s ease infinite, aiButtonHueRotate 3s ease infinite !important;
    color: #ffffff !important;
}

.chat-nav-ai.active:hover {
    animation: aiButtonGradientMove 3s ease infinite, aiButtonHueRotate 3s ease infinite !important;
}

.nav-item.ai-chat-btn.active:hover {
    animation: aiButtonGradientMove 1.5s ease infinite, aiButtonHueRotate 1.5s ease infinite !important;
    transform: translateY(-1px);
}

/* AI Button Icon - White when active */
.chat-nav-ai.active svg path,
.nav-item.ai-chat-btn.active svg.left-nav-ai-icon path {
    fill: #ffffff !important;
    opacity: 1 !important;
}

.chat-nav-ai.active .chat-nav-ai-icon,
.chat-nav-ai.active .chat-nav-family-icon {
    transform: translate(-50%, -50%) scale(1);
}

/* Linke Nav-Insel: KI-Icon ohne position:absolute — kein Zentrier-Transform aus der Chat-Leiste */
.nav-item.ai-chat-btn.active .left-nav-ai-icon {
    transform: none;
}

.chat-nav-ai.active:hover .chat-nav-ai-icon,
.chat-nav-ai.active:hover .chat-nav-family-icon {
    transform: translate(-50%, -50%) scale(1);
}

.nav-item.ai-chat-btn.active:hover .left-nav-ai-icon {
    transform: scale(1.05);
}

/* AI Button Gradient Animations */
@keyframes aiButtonGradientMove {
    0% { background-position: 0% 50%; }
    20% { background-position: 100% 50%; }
    40% { background-position: 200% 50%; }
    60% { background-position: 100% 50%; }
    80% { background-position: 0% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes aiButtonHueRotate {
    0% { filter: hue-rotate(0deg); }
    20% { filter: hue-rotate(60deg); }
    40% { filter: hue-rotate(120deg); }
    60% { filter: hue-rotate(180deg); }
    80% { filter: hue-rotate(240deg); }
    100% { filter: hue-rotate(300deg); }
}

/* Colorful shadow animation - pale and colorful */
@keyframes aiButtonColorfulShadow {
    0% {
        box-shadow: 
            0 0 8px rgba(99, 102, 241, 0.25),
            0 0 16px rgba(139, 92, 246, 0.15),
            0 0 24px rgba(236, 72, 153, 0.1);
    }
    20% {
        box-shadow: 
            0 0 10px rgba(236, 72, 153, 0.25),
            0 0 18px rgba(251, 146, 60, 0.15),
            0 0 26px rgba(34, 197, 94, 0.1);
    }
    40% {
        box-shadow: 
            0 0 8px rgba(34, 197, 94, 0.25),
            0 0 16px rgba(59, 130, 246, 0.15),
            0 0 24px rgba(99, 102, 241, 0.1);
    }
    60% {
        box-shadow: 
            0 0 10px rgba(59, 130, 246, 0.25),
            0 0 18px rgba(99, 102, 241, 0.15),
            0 0 26px rgba(139, 92, 246, 0.1);
    }
    80% {
        box-shadow: 
            0 0 8px rgba(139, 92, 246, 0.25),
            0 0 16px rgba(236, 72, 153, 0.15),
            0 0 24px rgba(251, 146, 60, 0.1);
    }
    100% {
        box-shadow: 
            0 0 8px rgba(99, 102, 241, 0.25),
            0 0 16px rgba(139, 92, 246, 0.15),
            0 0 24px rgba(236, 72, 153, 0.1);
    }
}

/* Notification badge for nav buttons */
.chat-nav-btn[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #dc3545;
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
    line-height: 1;
}

/* Smooth focus states for accessibility */
.chat-nav-btn:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

.chat-nav-profile:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    border-radius: 50%;
}

.chat-nav-settings {
    position: relative;
}

/* Profile Avatar in Navigation */
.chat-nav-bottom .chat-nav-profile {
    margin-top: auto;
}

.chat-nav-profile {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0;
    flex-shrink: 0;
    overflow: visible;
}

.chat-nav-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    border: 2px solid transparent;
}

.chat-nav-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.chat-nav-profile:hover,
.chat-nav-profile:hover .chat-nav-profile-avatar,
.chat-nav-profile:active .chat-nav-profile-avatar,
.chat-nav-profile:hover .chat-nav-profile-status,
.chat-nav-profile:active .chat-nav-profile-status {
    transform: none;
    box-shadow: none;
}

.chat-nav-profile-status {
    /* Größe/Farbe: chat-box-v2.css */
}

.chat-nav-profile-status[data-status="offline"] {
    background: #6c757d;
}

.chat-nav-profile-status[data-status="away"] {
    background: #ffc107;
}

/* Notifications View */
.chat-notifications-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
}

.chat-notifications-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
}

.chat-notifications-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-notifications-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.chat-notifications-list.is-empty {
    justify-content: center;
    align-items: center;
}

/* Calls View */
.chat-calls-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
    min-width: 0;
    min-height: 200px;
}

.chat-calls-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
}

.chat-calls-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-calls-columns {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 200px;
}

.chat-calls-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid #e9ecef;
}

.chat-calls-col:last-child {
    border-right: none;
}

.chat-calls-col-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    flex-shrink: 0;
}

.chat-calls-col-header-prev,
.chat-calls-col-header-next {
    display: none;
}

.chat-calls-col-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chat-calls-col-header .chat-calls-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-calls-col-header .chat-calls-col-icon svg {
    display: block;
}

.chat-calls-col-header-called {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
}

.chat-calls-col-header-accepted {
    color: #198754;
    background: rgba(25, 135, 84, 0.08);
}

.chat-calls-col-header-declined {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}

.chat-calls-col-header-missed {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.08);
}

.chat-calls-col-label {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.chat-calls-col-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    min-height: 120px;
}

.chat-calls-col-list.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 13px;
}

.chat-calls-empty-msg {
    padding: 12px 16px;
    text-align: center;
    max-width: 180px;
    line-height: 1.4;
}

.chat-calls-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.chat-calls-date-group {
    margin-bottom: 12px;
}

.chat-calls-date-header {
    padding: 4px 0;
    font-size: 10px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-align: center;
}

.chat-calls-date-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-call-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 0;
}

.chat-call-item:hover {
    background: #f8f9fa;
}

.chat-call-item.missed {
    background: rgba(108, 117, 125, 0.08);
}

.chat-call-item.missed:hover {
    background: rgba(108, 117, 125, 0.14);
}

.chat-call-item.declined {
    background: rgba(220, 53, 69, 0.06);
}

.chat-call-item.declined:hover {
    background: rgba(220, 53, 69, 0.12);
}

.chat-call-item.answered {
    background: rgba(40, 167, 69, 0.05);
}

.chat-call-item.answered:hover {
    background: rgba(40, 167, 69, 0.1);
}

.chat-call-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-call-avatar-initials {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-call-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-call-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-call-details {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6c757d;
}

.chat-call-icon {
    font-size: 14px;
}

.chat-call-direction {
    font-size: 12px;
}

.chat-call-status {
    font-weight: 500;
}

.chat-call-item.missed .chat-call-status {
    color: #6c757d;
}

.chat-call-item.declined .chat-call-status {
    color: #dc3545;
}

.chat-call-item.answered .chat-call-status {
    color: #28a745;
}

.chat-call-duration {
    color: #6c757d;
    font-weight: 400;
}

.chat-call-time {
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-call-item.unread {
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
}

.chat-call-item.unread:hover {
    background: rgba(220, 53, 69, 0.15);
}

.chat-user-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.chat-user-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-user-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-user-profile-status-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-user-profile-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.chat-user-profile-status-indicator[data-status="green"] {
    background-color: #28a745;
}

.chat-user-profile-status-indicator[data-status="yellow"] {
    background-color: #ffc107;
}

.chat-user-profile-status-indicator[data-status="red"] {
    background-color: #dc3545;
}

.chat-user-profile-status-indicator[data-status="offline"],
.chat-user-profile-status-indicator[data-status="gray"] {
    background-color: #9ca3af;
}

.chat-user-profile-status {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
}

.chat-user-profile-settings {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-user-profile-settings:hover {
    background: #e9ecef;
    color: #1a1a1a;
    border-color: #adb5bd;
}

.chat-user-profile-settings svg {
    width: 18px;
    height: 18px;
}

.chat-ai-assistant-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.chat-ai-assistant-btn svg {
    flex-shrink: 0;
}

/* AI Chat Mode Styles */
.ai-chat-header {
    cursor: default !important;
    position: relative;
}

.ai-chat-header:hover {
    background: transparent !important;
}

.ai-chat-new-conversation-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #ffffff;
    flex-shrink: 0;
}

.ai-chat-new-conversation-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Prominent pill button – main action in AI placeholder area */
.ai-chat-switch-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 36px;
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.ai-chat-switch-mode-btn:hover {
    background: #ffffff;
    transform: scale(1.04);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.ai-chat-switch-mode-btn:active {
    transform: scale(0.97);
}

.ai-chat-switch-mode-btn svg {
    flex-shrink: 0;
}

/* AI Conversations Sidebar */
.ai-conversations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
}

.ai-conversations-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-new-conversation-sidebar-btn {
    background: #f8f9fa;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6366f1;
    flex-shrink: 0;
}

.ai-new-conversation-sidebar-btn:hover {
    background: #e9ecef;
    color: #4f46e5;
}

.ai-conversations-list {
    flex: 1;
    overflow-y: auto;
}

.ai-conversation-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    border-bottom: none;
}

.ai-conversation-item:hover {
    background: #f8f9fa;
}

.chat-popup.ai-mode .ai-conversation-item.active {
    --kinma-ai-conversation-active-purple: #4f46e5;
    --kinma-ai-conversation-active-accent: #6366f1;
    --kinma-ai-conversation-active-text-shadow:
        0 0 6px rgba(255, 255, 255, 0.95),
        0 0 14px rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(255, 255, 255, 0.9);
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.72) 0%,
        rgba(99, 102, 241, 0.38) 34%,
        rgba(99, 102, 241, 0.12) 58%,
        transparent 100%
    ) !important;
    border-left: none !important;
    padding-left: 12px !important;
    box-shadow: inset 2px 0 0 var(--kinma-ai-conversation-active-accent);
}

.chat-popup.ai-mode .ai-conversation-item.active:hover {
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.8) 0%,
        rgba(99, 102, 241, 0.44) 34%,
        rgba(99, 102, 241, 0.16) 58%,
        transparent 100%
    ) !important;
}

.chat-popup.ai-mode .ai-conversation-item.active .ai-conversation-title {
    color: var(--kinma-ai-conversation-active-purple) !important;
    font-weight: 600;
    text-shadow: var(--kinma-ai-conversation-active-text-shadow);
}

.chat-popup.ai-mode .ai-conversation-item.active .ai-conversation-preview {
    color: var(--kinma-ai-conversation-active-purple) !important;
    font-weight: 400;
    text-shadow: var(--kinma-ai-conversation-active-text-shadow);
}

.chat-popup.ai-mode .ai-conversation-item.active .ai-conversation-time {
    color: var(--kinma-ai-conversation-active-purple) !important;
    font-size: 11px;
    font-weight: 400;
    text-shadow: none;
}

.ai-conversation-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

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

.ai-conversation-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ai-conversation-preview {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-conversation-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ai-conversation-time {
    font-size: 11px;
    color: #9ca3af;
}

.ai-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    text-align: center;
}

.ai-chat-empty-state svg {
    color: #dee2e6;
    margin-bottom: 16px;
}

.ai-chat-empty-state p {
    font-size: 14px;
    margin: 0;
}

.ai-chat-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #e9ecef;
    background: #ffffff;
}

/* AI Mode - Additional Color Changes */
.chat-popup.ai-mode .chat-popup-body {
    background: #ffffff;
}

.chat-popup.ai-mode .chat-messages {
    background: #ffffff;
}

.chat-popup.ai-mode #chatMainHeader:not(.chat-main-header-call-active) {
    display: flex !important;
}

.chat-popup.ai-mode #chatMainHeader.chat-main-header-call-active {
    display: flex !important;
}

.chat-popup.ai-mode .chat-main-header-normal #chatUserInfo {
    display: none !important;
}

.chat-popup.ai-mode #aiChatHeader {
    display: flex !important;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: default !important;
}

.chat-popup.ai-mode #chatCallButtons,
.chat-popup.ai-mode #chatHeaderCallControls {
    display: none !important;
}

.chat-popup.active.ai-mode #chatMain > .chat-main-header-row {
    display: flex !important;
}

.chat-popup.active.ai-mode #chatMain > .chat-main-header-row > #chatMainHeader:not(.chat-main-header-call-active) {
    display: flex !important;
}

.chat-popup.chat-popup-mobile-fullscreen.ai-mode.ai-mobile-conversation-picker #chatChatRightPanel {
    display: none !important;
}

.chat-popup.chat-popup-mobile-fullscreen.ai-mode.ai-mobile-conversation-picker #chatContactsPanel {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

.chat-popup.chat-popup-mobile-fullscreen.ai-mode.ai-mobile-conversation-picker #chatViewSplit {
    display: flex !important;
}

.chat-popup.ai-mode #chatContactsToolbar #chatSearchBackBtn,
.chat-popup.ai-mode #chatContactsToolbar #chatContactsToolbarSearchSlot,
.chat-popup.ai-mode #chatContactsToolbar #normalChatSearchContainer,
.chat-popup.ai-mode #normalChatSearchContainer {
    display: none !important;
}

.chat-popup.ai-mode #chatContactsToolbar #aiConversationsSearchContainer {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.chat-popup.ai-mode #aiConversationsSearchContainer {
    display: flex !important;
}

.chat-popup.ai-mode #chatContactsPanel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.chat-popup.ai-mode #chatContactsPanel #aiConversationsList {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
}

.chat-popup.ai-mode #chatContactsPanel #chatContactAddPlaceholder {
    flex-shrink: 0 !important;
    margin: 0 !important;
    z-index: auto !important;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.45) !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    background-color: #6366f1 !important;
}

.chat-popup.ai-mode:not(.chat-popup-mobile-fullscreen) #chatContactsPanel #aiConversationsList {
    position: absolute !important;
    inset: 0 !important;
    flex: none !important;
    width: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-top: 0 !important;
    padding-bottom: calc(var(--kinma-chat-contacts-toolbar-reserve, 64px) + 6px) !important;
    box-sizing: border-box !important;
}

.chat-popup.ai-mode #chatContactsPanel #chatContactAddPlaceholder:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    background-color: #4f46e5 !important;
}

/* AI Mode - Message Colors (Alignment mit modules/chat.css / Family-Bubbles) */
.chat-popup.ai-mode .chat-message-content {
    border: none;
    outline: none;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border: none;
    outline: none;
    box-shadow: 0 2px 16px rgba(79, 70, 229, 0.38);
    hyphens: manual;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    word-break: normal;
    overflow-wrap: break-word;
}

.chat-popup.ai-mode .kinma-ai-message-detail-action {
    margin-top: 6px;
    align-self: flex-start;
}

.chat-popup.ai-mode .kinma-ai-detail-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid rgba(79, 70, 229, 0.45);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-popup.ai-mode .kinma-ai-detail-expand-btn:hover:not(:disabled) {
    background: #e0e7ff;
    border-color: rgba(67, 56, 202, 0.65);
    color: #312e81;
}

.chat-popup.ai-mode .kinma-ai-detail-expand-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text,
.chat-popup.ai-mode .chat-message-bot .chat-message-content p {
    color: #ffffff;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link {
    color: #c7d2fe;
    text-decoration: underline;
    word-break: break-word;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link:hover {
    color: #eef2ff;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link--internal {
    font-weight: 600;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list {
    margin: 6px 0 6px 18px;
    padding: 0;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list ol.kinma-ai-rt-list,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list ol.kinma-ai-rt-list {
    margin-top: 4px;
    margin-bottom: 4px;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list li,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list li {
    margin: 2px 0;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-linehead {
    margin: 6px 0 2px;
    font-weight: 600;
    line-height: 1.4;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list--inline-semi {
    margin: 2px 0 8px 1.25rem;
    padding-left: 1.1rem;
    list-style-type: disc;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text code.kinma-ai-rt-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 1px 6px;
    color: #f8fafc;
}

/* ``` fenced blocks (not inline `code` pills) */
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.15);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-lang {
    display: block;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 4px 10px;
    color: rgba(248, 250, 252, 0.88);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-pre {
    margin: 0;
    padding: 8px 10px;
    overflow-x: auto;
    font-size: 0.88em;
    line-height: 1.45;
    background: transparent;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: #f8fafc;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* ```markdown … ``` — render inner as rich text (headings, lists, bold), not raw monospace */
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap--rendered-md .kinma-ai-rt-fence-md {
    padding: 8px 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #f8fafc;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap--rendered-md .kinma-ai-rt-fence-md > br:first-child:last-child {
    display: none;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h1,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h2,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h3,
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h4 {
    font-weight: 800;
    margin: 8px 0 4px;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h1 { font-size: 1.14em; }
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h2 { font-size: 1.10em; }
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h3 { font-size: 1.06em; }
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h4 { font-size: 1.03em; }

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .katex {
    font-size: 1.08em;
    color: inherit;
}
.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .katex-display {
    margin: 0.65em 0;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap,
.chat-popup.ai-mode .chat-message-user .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap,
.chat-popup.ai-mode .chat-message-user .chat-message-body .chat-message-text .kinma-ai-chat-iframe-wrap {
    -webkit-overflow-scrolling: touch;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .chat-message-text .kinma-ai-math-fallback code {
    font-size: 0.9em;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-popup.ai-mode .chat-message-user .chat-message-content {
    background: var(--kinma-outgoing-bubble-bg, #d4cff5);
    color: #1a1a1a;
    border: none;
    outline: none;
    box-shadow: none;
}

.chat-popup.ai-mode .chat-message-user .chat-message-content .chat-message-text,
.chat-popup.ai-mode .chat-message-user .chat-message-body .chat-message-text {
    color: #1a1a1a;
}

.chat-popup.ai-mode .chat-message[style*="flex-direction: row-reverse"] .chat-message-content {
    background: var(--kinma-outgoing-bubble-bg, #d4cff5);
    color: #1a1a1a;
    border: none;
    outline: none;
    box-shadow: none;
}

.chat-popup.ai-mode .chat-message[style*="flex-direction: row-reverse"] .chat-message-content p {
    color: #1a1a1a;
}

.chat-popup.ai-mode .chat-message-user[style*="flex-direction: row-reverse"] .chat-message-content .chat-message-text {
    color: #1a1a1a;
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .ai-typing-dots span {
    background: rgba(255, 255, 255, 0.9);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .ai-typing-model-line {
    color: rgba(255, 255, 255, 0.95);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .ai-typing-progress-track {
    background: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .ai-typing-progress-fill {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content .ai-typing-eta {
    color: rgba(255, 255, 255, 0.88);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-reaction {
    background: rgba(255, 255, 255, 0.18);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-reaction:hover {
    background: rgba(255, 255, 255, 0.28);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-reaction-count {
    color: rgba(255, 255, 255, 0.88);
}

.chat-popup.ai-mode .chat-message-bot .chat-message-reaction-active {
    background: rgba(255, 255, 255, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.chat-popup.ai-mode .kinma-ai-chat-error-bubble {
    border-left: 3px solid #ef4444 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.12);
    outline: none;
}

.chat-popup.ai-mode .kinma-ai-chat-error-bubble .chat-message-text {
    color: #ef4444 !important;
}

/* AI Typing Indicator */
.ai-typing-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: min(100%, 320px);
    margin-bottom: 2px;
}

.ai-typing-header-leading {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 1.35em;
    padding-top: 1px;
}

.ai-typing-header-body {
    flex: 1;
    min-width: 0;
}

#ai-typing-indicator.ai-typing-mode-minimal .ai-typing-header-body,
#ai-typing-indicator.ai-typing-mode-minimal .ai-typing-progress-wrap {
    display: none;
}

.ai-typing-dots {
    display: flex;
    gap: 5px;
    padding: 0;
    align-items: center;
}

.ai-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    animation: typingDot 1.4s infinite ease-in-out;
}

.ai-typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

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

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

/* KI-Chat: Modell + ETA + Fortschritt (Schätzung aus früheren Antwortzeiten) */
.ai-typing-model-line {
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ai-typing-progress-wrap {
    width: 100%;
    max-width: min(100%, 320px);
    margin-top: 8px;
}

.ai-typing-progress-track {
    height: 6px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.ai-typing-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    transition: width 0.25s ease-out;
}

.ai-typing-progress-track.ai-typing-progress-indeterminate {
    position: relative;
    overflow: hidden;
}

.ai-typing-progress-track.ai-typing-progress-indeterminate .ai-typing-progress-fill {
    width: 38%;
    transition: none;
    animation: kinmaAiTypingIndeterminate 1.15s ease-in-out infinite;
}

@keyframes kinmaAiTypingIndeterminate {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(320%);
    }
}

.ai-typing-eta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 6px;
    line-height: 1.35;
}

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.ai-assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    flex-shrink: 0;
}

.ai-assistant-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.ai-assistant-title svg {
    flex-shrink: 0;
}

.ai-assistant-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #ffffff;
    flex-shrink: 0;
}

.ai-assistant-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ai-assistant-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

.ai-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8f9fa;
}

.ai-assistant-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 85%;
}

.ai-assistant-message.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-assistant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.ai-assistant-message.user-message .ai-assistant-avatar {
    background: #1a1a1a;
}

.ai-assistant-message-content {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-assistant-message.user-message .ai-assistant-message-content {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
}

.ai-assistant-message-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1a1a;
}

.ai-assistant-message.user-message .ai-assistant-message-content p {
    color: #ffffff;
}

.ai-assistant-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #e9ecef;
    background: #ffffff;
    flex-shrink: 0;
}

.ai-assistant-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.ai-assistant-input:focus {
    border-color: #6366f1;
}

.ai-assistant-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ai-assistant-send-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: scale(1.05);
}

.ai-assistant-send-btn:active {
    transform: scale(0.95);
}

/* Custom scrollbar for AI messages */
.ai-assistant-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-assistant-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-assistant-messages::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.ai-assistant-messages::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

.chat-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: none;
}

.chat-contact-item[data-conversation-id]:has(.chat-contact-drag-handle) {
    gap: 6px;
    padding: 10px 12px 10px 3px;
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.chat-contact-item.active:has(.chat-contact-drag-handle) {
    padding-left: 3px !important;
}

.chat-contact-item:not(.active):hover {
    background: #f1f3f5;
}

body.dark-mode .chat-contact-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-contact-item.active {
    --kinma-chat-contact-active-grey: #1c1c1c;
    background: linear-gradient(
        90deg,
        rgba(28, 28, 28, 0.72) 0%,
        rgba(28, 28, 28, 0.38) 34%,
        rgba(28, 28, 28, 0.12) 58%,
        transparent 100%
    ) !important;
    border-left: none !important;
    padding-left: 12px !important;
    box-shadow: inset 2px 0 0 #1c1c1c;
}

.chat-contact-item.active:hover {
    background: linear-gradient(
        90deg,
        rgba(28, 28, 28, 0.8) 0%,
        rgba(28, 28, 28, 0.44) 34%,
        rgba(28, 28, 28, 0.16) 58%,
        transparent 100%
    ) !important;
}

/* Mobil: kein „ausgewählt“-Zustand mit blauem Balken */
@media (max-width: 768px) {
    .chat-contact-item.active {
        background: transparent !important;
        border-left: none !important;
        padding-left: 12px !important;
        font-weight: inherit !important;
    }

    .chat-contact-item.active:has(.chat-contact-drag-handle) {
        padding-left: 3px !important;
    }

    .chat-contact-item.active:hover {
        background: #f8f9fa !important;
    }
}

/* Self-Chat (Notizen): gleiche Darstellung wie andere Kontakte (Profilfarbe aus inline style) */

/* Context Menu for Chat Contacts */
.chat-contact-context-menu {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 4px;
    min-width: 180px;
    z-index: 200080;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@media (max-width: 768px) {
    .chat-contact-context-menu.chat-contact-context-menu--mobile {
        min-width: min(300px, calc(100vw - 32px));
        max-width: calc(100vw - 24px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
    }

    .chat-contact-context-menu.chat-contact-context-menu--mobile .chat-context-menu-item {
        padding: 12px 14px;
        font-size: 15px;
    }
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    color: #1a1a1a;
    font-size: 14px;
    transition: background 0.15s ease;
}

.chat-context-menu-item:hover {
    background: #f8f9fa;
}

.chat-context-menu-item svg {
    flex-shrink: 0;
    color: #6c757d;
}

.chat-context-menu-item:hover svg {
    color: #1a1a1a;
}

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

.chat-context-menu-item-danger:hover {
    background: #fee;
    color: #c82333;
}

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

.chat-context-menu-item-danger:hover svg {
    color: #c82333;
}

/* Archive - Blue */
.chat-context-menu-item-archive {
    color: #0d6efd;
}

.chat-context-menu-item-archive:hover {
    background: #e7f1ff;
    color: #0a58ca;
}

.chat-context-menu-item-archive svg {
    color: #0d6efd;
}

.chat-context-menu-item-archive:hover svg {
    color: #0a58ca;
}

/* Unarchive - Green */
.chat-context-menu-item-unarchive {
    color: #198754;
}

.chat-context-menu-item-unarchive:hover {
    background: #d1e7dd;
    color: #146c43;
}

.chat-context-menu-item-unarchive svg {
    color: #198754;
}

.chat-context-menu-item-unarchive:hover svg {
    color: #146c43;
}

/* Close - Orange */
.chat-context-menu-item-close {
    color: #fd7e14;
}

.chat-context-menu-item-close:hover {
    background: #fff3e0;
    color: #e65100;
}

.chat-context-menu-item-close svg {
    color: #fd7e14;
}

.chat-context-menu-item-close:hover svg {
    color: #e65100;
}

/* Block - Red */
.chat-context-menu-item-block {
    color: #dc3545;
}

.chat-context-menu-item-block:hover {
    background: #fee;
    color: #c82333;
}

.chat-context-menu-item-block svg {
    color: #dc3545;
}

.chat-context-menu-item-block:hover svg {
    color: #c82333;
}

/* Unblock - Green */
.chat-context-menu-item-unblock {
    color: #198754;
}

.chat-context-menu-item-unblock:hover {
    background: #d1e7dd;
    color: #146c43;
}

.chat-context-menu-item-unblock svg {
    color: #198754;
}

.chat-context-menu-item-unblock:hover svg {
    color: #146c43;
}

/* Report - Yellow/Orange */
.chat-context-menu-item-report {
    color: #ffc107;
}

.chat-context-menu-item-report:hover {
    background: #fff8e1;
    color: #e0a800;
}

.chat-context-menu-item-report svg {
    color: #ffc107;
}

.chat-context-menu-item-report:hover svg {
    color: #e0a800;
}

.chat-context-menu-divider {
    height: 1px;
    background: #e9ecef;
    margin: 4px 0;
}

/* Chat Message Context Menu */
.chat-message-context-menu {
    position: fixed;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 4px;
    min-width: 180px;
    z-index: 100120;
    animation: contextMenuFadeIn 0.15s ease-out;
}

@media (max-width: 768px) {
    .chat-message-context-menu.chat-message-context-menu--mobile {
        min-width: min(320px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        border-radius: 22px;
        box-shadow: 0 14px 40px rgba(26, 26, 26, 0.22);
        padding: 8px;
    }

    .chat-message-context-menu.chat-message-context-menu--mobile .context-menu-item {
        min-height: 50px;
        padding: 12px 14px;
        font-size: 15px;
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    color: #1a1a1a;
    font-size: 14px;
    transition: background 0.15s ease;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
}

.context-menu-item:hover {
    background: #f8f9fa;
}

.context-menu-item svg {
    flex-shrink: 0;
    color: #6c757d;
}

.context-menu-item:hover svg {
    color: #1a1a1a;
}

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

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

.context-menu-item.context-menu-item-danger:hover {
    background: #fff1f2;
    color: #b91c1c;
}

.context-menu-item.context-menu-item-danger:hover svg {
    color: #b91c1c;
}

/* Reply UI above input */
.chat-reply-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 8px 8px 0 0;
    margin-bottom: 8px;
}

.chat-reply-content {
    flex: 1;
    min-width: 0;
}

.chat-reply-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #007bff;
}

.chat-reply-name {
    color: #007bff;
}

.chat-reply-text {
    font-size: 13px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-references {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-reply-reference-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.chat-reply-reference-name {
    font-weight: 600;
    color: #6c757d;
}

.chat-reply-reference-text {
    color: #868e96;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.chat-reply-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.chat-reply-close:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

/* Reply reference in messages — minimalistisch */
.chat-message-reply {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 6px 0;
    padding: 6px 10px;
    background: rgba(26, 26, 26, 0.045);
    border: none;
    border-radius: 8px;
    border-left: 3px solid rgba(59, 130, 246, 0.5);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    font-size: 11px;
}

.chat-message-reply.has-nested-references {
    position: relative;
}

.chat-message-reply::before {
    display: none;
}

.chat-message-reply:hover {
    background: rgba(26, 26, 26, 0.075);
}

.chat-message-reply-header {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.chat-message-reply-line {
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 1em;
}

.chat-message-reply-line:hover {
    opacity: 0;
}

.chat-message-reply-content {
    flex: 1;
    min-width: 0;
    padding-left: 0;
    pointer-events: none;
}

.chat-message-reply-name {
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 2px;
    line-height: 1.25;
}

.chat-message-reply-text {
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Reaction Picker */
.chat-reaction-picker {
    position: fixed;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 8px;
    display: flex;
    gap: 4px;
    z-index: 10001;
    animation: contextMenuFadeIn 0.15s ease-out;
}

.chat-reaction-emoji {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s ease;
}

.chat-reaction-emoji:hover {
    background: #f8f9fa;
    transform: scale(1.2);
}

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

/* Message Reactions */
.chat-message-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.chat-message-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat-message-reaction:hover {
    background: rgba(0, 0, 0, 0.1);
}

.chat-message-reaction-emoji {
    font-size: 14px;
}

.chat-message-reaction-count {
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.chat-message-reaction-active {
    background: rgba(0, 123, 255, 0.15);
    border: 1px solid rgba(0, 123, 255, 0.3);
}

/* Eingangsblasen (nicht KI-Modus): Reactions auf dunklem Grund — Duplikat: modules/chat.css */
.chat-popup:not(.ai-mode) .chat-message-bot .chat-message-content .chat-message-reaction {
    background: rgba(255, 255, 255, 0.14);
}

.chat-popup:not(.ai-mode) .chat-message-bot .chat-message-content .chat-message-reaction:hover {
    background: rgba(255, 255, 255, 0.22);
}

.chat-popup:not(.ai-mode) .chat-message-bot .chat-message-content .chat-message-reaction-count {
    color: rgba(255, 255, 255, 0.88);
}

.chat-popup:not(.ai-mode) .chat-message-bot .chat-message-content .chat-message-reaction-active {
    background: rgba(96, 165, 250, 0.22);
    border: 1px solid rgba(96, 165, 250, 0.45);
}

.chat-message,
.chat-date-separator,
.chat-new-unread-divider {
    transition: filter 0.22s ease, opacity 0.22s ease;
}

.chat-messages.chat-messages-focus-active,
#chatMessages.chat-messages-focus-active {
    isolation: isolate;
}

#chatMessages.chat-messages-focus-active > .chat-message:not(.chat-message-focus-target),
#chatMessages.chat-messages-focus-active > .chat-date-separator,
#chatMessages.chat-messages-focus-active > .chat-new-unread-divider,
.chat-messages.chat-messages-focus-active > .chat-message:not(.chat-message-focus-target),
.chat-messages.chat-messages-focus-active > .chat-date-separator,
.chat-messages.chat-messages-focus-active > .chat-new-unread-divider {
    filter: blur(1px);
    opacity: 0.3;
    /* Kein Hover/Klick auf Inhalt (Umfragen, „Ausführlicher“, Reaktionen, …) während Fokus-Navigation */
    pointer-events: none;
}

.chat-message-focus-target {
    z-index: 2;
    pointer-events: auto;
}

/* Message References — minimalistisch */
.chat-message-references {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: none;
    position: relative;
}

.chat-message-references::before {
    display: none;
}

.chat-message-references-toggle {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: none;
    background: rgba(26, 26, 26, 0.04);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s ease;
    flex-shrink: 0;
    border-radius: 6px;
}

.chat-message-references-toggle:hover {
    background: rgba(26, 26, 26, 0.08);
}

.chat-message-references-toggle .toggle-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
    color: #64748b;
    width: 8px;
    height: 8px;
    opacity: 0.85;
}

.chat-message-references-toggle[data-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
    opacity: 1;
}

.chat-message-references-toggle:hover .toggle-icon {
    opacity: 1;
}

.chat-message-references-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.chat-message-reference {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 5px 10px;
    margin-left: 0;
    background: rgba(26, 26, 26, 0.03);
    border: none;
    border-radius: 6px;
    border-left: 2px solid rgba(100, 116, 139, 0.35);
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 11px;
    position: relative;
}

.chat-message-reference:hover {
    background: rgba(26, 26, 26, 0.055);
}

.chat-message-reference.has-nested-references {
    position: relative;
}

.chat-message-reference-header {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.chat-message-reply.has-nested-references {
    position: relative;
}

.chat-message-reply.has-nested-references.has-expanded-nested::after,
.chat-message-reference.has-nested-references.has-expanded-nested::after {
    display: none;
}

.chat-message-reference.has-nested-references {
    position: relative;
}

.chat-message-nested-references {
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-top: 0;
    margin: 6px 0 0 6px;
    border-left: 1px solid rgba(148, 163, 184, 0.45);
    border-top: none;
    display: none;
}

.chat-message-nested-references.is-expanded {
    display: block !important;
}

.chat-message-references-list.is-expanded {
    display: flex !important;
}

.chat-message-quote-above .chat-message-references-list,
.chat-message-quote-above .chat-message-references-list.is-expanded,
.chat-message-quote-stack .chat-message-references-list,
.chat-message-quote-stack .chat-message-references-list.is-expanded {
    display: grid !important;
}

.chat-message-quote-above .chat-message-nested-references,
.chat-message-quote-above .chat-message-nested-references.is-expanded,
.chat-message-quote-stack .chat-message-nested-references,
.chat-message-quote-stack .chat-message-nested-references.is-expanded {
    display: grid !important;
}

.chat-message-nested-references.is-expanded::before {
    display: none;
}

.chat-message-nested-references .chat-message-reference.has-nested-references.has-expanded-nested::after,
.chat-message-nested-references .chat-message-nested-references.is-expanded::before {
    display: none;
}

.chat-message-nested-references .chat-message-nested-references {
    padding-left: 10px;
    margin-left: 6px;
    border-left: 1px solid rgba(148, 163, 184, 0.28);
}

.chat-message-reference-toggle {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: none;
    background: rgba(26, 26, 26, 0.04);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s ease;
    flex-shrink: 0;
    margin-right: 0;
    border-radius: 6px;
    position: relative;
    pointer-events: auto;
}

.chat-message-reply-toggle {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: none;
    background: rgba(26, 26, 26, 0.04);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s ease;
    flex-shrink: 0;
    margin-right: 0;
    border-radius: 6px;
    position: relative;
    pointer-events: auto;
}

.chat-message-reply-toggle:hover {
    background: rgba(59, 130, 246, 0.12);
}

.chat-message-reply-toggle .toggle-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
    color: #3b82f6;
    width: 8px;
    height: 8px;
    opacity: 0.85;
}

.chat-message-reply-toggle[data-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
    opacity: 1;
}

.chat-message-reply-toggle:hover .toggle-icon {
    opacity: 1;
}

.chat-message-reference-toggle:hover {
    background: rgba(26, 26, 26, 0.08);
}

.chat-message-reference-toggle .toggle-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
    color: #64748b;
    width: 8px;
    height: 8px;
    opacity: 0.85;
}

.chat-message-reference-toggle[data-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
    opacity: 1;
}

.chat-message-reference-toggle:hover .toggle-icon {
    opacity: 1;
}

.chat-message-reference-spacer {
    width: 0;
    min-width: 0;
    flex-shrink: 0;
}

.chat-message-reference-line {
    width: 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 1em;
}

.chat-message-reference-line:hover {
    opacity: 0;
}

.chat-message-reference-content {
    flex: 1;
    min-width: 0;
    padding-left: 0;
}

.chat-message-reference-name {
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
    line-height: 1.25;
}

.chat-message-reference-text {
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

.chat-message-nested-references[style*="block"] {
    display: block !important;
}

.chat-message-nested-references-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.chat-message-nested-references-list[data-depth="1"] {
    margin-left: 0;
}

.chat-message-nested-references-list[data-depth="2"] {
    margin-left: 0;
}

.chat-message-nested-references-list[data-depth="3"] {
    margin-left: 0;
}

.chat-message-nested-references-list[data-depth="4"] {
    margin-left: 0;
}

.chat-message-nested-references-list[data-depth="5"] {
    margin-left: 0;
}

.chat-message-nested-references .chat-message-nested-references {
    margin-top: 6px;
    border-top: none;
}

.chat-message-nested-references .chat-message-nested-references .chat-message-nested-references {
    border-top: none;
}

.chat-message-nested-references .chat-message-nested-references .chat-message-nested-references .chat-message-nested-references {
    border-top: none;
}

/* Message Reference Selector */
.chat-message-reference-selector {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    animation: fadeIn 0.2s ease-out;
}

.chat-reference-selector-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.2s ease-out;
}

.chat-reference-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
}

.chat-reference-selector-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-reference-selector-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #6c757d;
    font-size: 24px;
    line-height: 1;
    transition: all 0.2s ease;
}

.chat-reference-selector-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.chat-reference-selector-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.chat-reference-selector-hint {
    margin: 0 0 16px 0;
    color: #1a1a1a;
    font-size: 14px;
}

.chat-reference-messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.chat-reference-message-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.chat-reference-message-item:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.chat-reference-message-item.selected {
    border-color: #007bff;
    background: rgba(0, 123, 255, 0.05);
}

.chat-reference-message-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #ffffff;
}

.chat-reference-message-item.selected .chat-reference-message-checkbox {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

.chat-reference-message-item.selected .chat-reference-message-checkbox svg {
    display: block;
}

.chat-reference-message-item:not(.selected) .chat-reference-message-checkbox svg {
    display: none;
}

.chat-reference-message-content {
    flex: 1;
    min-width: 0;
}

.chat-reference-message-sender {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.chat-reference-message-text {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reference-message-time {
    font-size: 11px;
    color: #adb5bd;
}

.chat-reference-selector-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    justify-content: flex-end;
}

.chat-reference-selector-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-reference-selector-btn-cancel {
    background: #f8f9fa;
    color: #1a1a1a;
}

.chat-reference-selector-btn-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-reference-selector-btn-confirm {
    background: #007bff;
    color: #ffffff;
}

.chat-reference-selector-btn-confirm:hover {
    background: #0056b3;
}

/* Inline Reference Selection Mode — see modules/chat.css (synced) */
.chat-messages,
#chatMessages {
    --kinma-chat-messages-pad-x: 16px;
    --kinma-chat-wall-gradient-fade: 72%;
    --kinma-chat-wall-gradient-mid: 42%;
    --kinma-chat-wall-gradient-mid-in: 58%;
    --kinma-chat-wall-gradient-fade-in: 28%;
}

.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded) {
    cursor: pointer;
    position: relative;
}

.chat-message-reference-mode.chat-message-reference-excluded {
    cursor: not-allowed;
    position: relative;
}

.chat-message-reference-excluded-nudge {
    animation: kinma-reference-excluded-nudge 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

@keyframes kinma-reference-excluded-nudge {
    0% { transform: translateX(0); }
    38% { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded) > .chat-message-wrapper,
.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded)
    .chat-message-edited-below-stack
    > .chat-message-wrapper {
    transform: translateX(0);
    will-change: transform;
}

.chat-message-reference-mode .chat-message-avatar,
.chat-message-reference-mode .chat-message-avatar-column,
.chat-message-reference-mode .chat-message-avatar-column--with-delivery,
.chat-message-reference-mode .chat-message-avatar-spacer,
.chat-message-reference-mode .chat-message-edited-below-avatar-wrap {
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

.chat-message-bot.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded).chat-message-reference-nudge
    > .chat-message-wrapper,
.chat-message-bot.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded).chat-message-reference-nudge
    .chat-message-edited-below-stack
    > .chat-message-wrapper {
    animation: kinma-reference-nudge-incoming 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

.chat-message-user.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded).chat-message-reference-nudge
    > .chat-message-wrapper,
.chat-message-user.chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded).chat-message-reference-nudge
    .chat-message-edited-below-stack
    > .chat-message-wrapper {
    animation: kinma-reference-nudge-outgoing 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

@keyframes kinma-reference-nudge-incoming {
    0% {
        transform: translateX(0);
    }
    38% {
        transform: translateX(8px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes kinma-reference-nudge-outgoing {
    0% {
        transform: translateX(0);
    }
    38% {
        transform: translateX(-8px);
    }
    100% {
        transform: translateX(0);
    }
}

.chat-message-reference-checkbox {
    display: none !important;
}

.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active).chat-message-reference-selected::before,
.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active).chat-message-reference-highlight-out::before,
.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active):hover:not(.chat-message-reference-selected)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    right: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    width: auto;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
}

.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active):hover:not(.chat-message-reference-selected)::before {
    animation: none !important;
    opacity: 1;
    transform: scaleX(1);
}

.chat-message-reference-selected::before {
    animation: kinma-reference-highlight-in 0.48s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.chat-message-reference-instant::before,
.chat-message-reference-selected.chat-message-reference-instant::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

.chat-message-bot.chat-message-reference-instant::before,
.chat-message-bot.chat-message-reference-selected.chat-message-reference-instant::before {
    transform-origin: left center !important;
}

.chat-message-user.chat-message-reference-instant::before,
.chat-message-user.chat-message-reference-selected.chat-message-reference-instant::before {
    transform-origin: right center !important;
}

.chat-message-reference-highlight-out::before {
    animation: kinma-reference-highlight-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes kinma-reference-highlight-in {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes kinma-reference-highlight-out {
    0% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded) > .chat-message-wrapper,
    .chat-message-reference-mode:not(.chat-message-base-reply):not(.chat-message-reference-excluded)
        .chat-message-edited-below-stack
        > .chat-message-wrapper {
        transform: none !important;
        will-change: auto;
        animation: none !important;
    }

    .chat-message-reference-selected::before,
    .chat-message-reference-highlight-out::before {
        animation: none;
        transform: none;
    }

    .chat-message-reference-selected::before {
        opacity: 1;
    }

    .chat-message-reference-highlight-out::before {
        opacity: 0;
    }
}

.chat-message-bot.chat-message-reference-selected::before,
.chat-message-bot.chat-message-reference-highlight-out::before {
    transform-origin: left center;
    background: linear-gradient(
        to left,
        transparent var(--kinma-chat-wall-gradient-fade-in, 28%),
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 38%, transparent)
            var(--kinma-chat-wall-gradient-mid-in, 58%),
        var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 100%
    );
}

.chat-message-user.chat-message-reference-selected::before,
.chat-message-user.chat-message-reference-highlight-out::before {
    transform-origin: right center;
    background: linear-gradient(
        to left,
        var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 0%,
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 38%, transparent)
            var(--kinma-chat-wall-gradient-mid, 42%),
        transparent var(--kinma-chat-wall-gradient-fade, 72%)
    );
}

.chat-message-bot.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active):hover:not(.chat-message-reference-selected)::before {
    transform-origin: left center;
    background: linear-gradient(
        to left,
        transparent var(--kinma-chat-wall-gradient-fade-in, 28%),
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 8%, transparent)
            var(--kinma-chat-wall-gradient-mid-in, 58%),
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 22%, transparent) 100%
    );
}

.chat-message-user.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active):hover:not(.chat-message-reference-selected)::before {
    transform-origin: right center;
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 22%, transparent) 0%,
        color-mix(in srgb, var(--kinma-chat-referenzen-bg, rgba(254, 243, 199, 0.98)) 8%, transparent)
            var(--kinma-chat-wall-gradient-mid, 42%),
        transparent var(--kinma-chat-wall-gradient-fade, 72%)
    );
}

.chat-message-reference-selected > *,
.chat-message-reference-mode:not(.chat-message-reference-excluded):not(.chat-message-base-reply):not(.chat-message-reply-target-active):hover:not(.chat-message-reference-selected) > * {
    position: relative;
    z-index: 1;
}

.chat-message-reply-target-active::before,
.chat-message-reply-target-highlight-out::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    right: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    width: auto;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
}

.chat-message-reply-target-active:not(.chat-message-reply-target-instant)::before {
    animation: kinma-reply-target-highlight-in 0.48s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.chat-message-reply-target-active.chat-message-reply-target-instant::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

.chat-message-bot.chat-message-reply-target-active.chat-message-reply-target-instant::before {
    transform-origin: left center !important;
}

.chat-message-user.chat-message-reply-target-active.chat-message-reply-target-instant::before {
    transform-origin: right center !important;
}

.chat-message-reply-highlight-committed::before,
.chat-message-reply-target-active.chat-message-reply-highlight-committed::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

.chat-message-bot.chat-message-reply-highlight-committed::before,
.chat-message-bot.chat-message-reply-target-active.chat-message-reply-highlight-committed::before {
    transform-origin: left center !important;
}

.chat-message-user.chat-message-reply-highlight-committed::before,
.chat-message-user.chat-message-reply-target-active.chat-message-reply-highlight-committed::before {
    transform-origin: right center !important;
}

/* Mobile Swipe: blauer Verlauf folgt dem Zug (Stärke über --kinma-reply-highlight-strength) */
.chat-message-reply-swipe-preview::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    right: calc(-1 * var(--kinma-chat-messages-pad-x, 16px));
    width: auto;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
    animation: none !important;
    opacity: var(--kinma-reply-highlight-strength, 0);
    transform: scaleX(var(--kinma-reply-highlight-strength, 0));
}

.chat-message-bot.chat-message-reply-swipe-preview::before {
    transform-origin: left center !important;
    background: linear-gradient(
        to left,
        transparent var(--kinma-chat-wall-gradient-fade-in, 28%),
        color-mix(in srgb, var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 35%, transparent)
            var(--kinma-chat-wall-gradient-mid-in, 58%),
        var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 100%
    );
}

.chat-message-user.chat-message-reply-swipe-preview::before {
    transform-origin: right center !important;
    background: linear-gradient(
        to left,
        var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 0%,
        color-mix(in srgb, var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 35%, transparent)
            var(--kinma-chat-wall-gradient-mid, 42%),
        transparent var(--kinma-chat-wall-gradient-fade, 72%)
    );
}

.chat-message-reply-target-active.chat-message-reply-swipe-preview::before,
.chat-message-reply-swipe-preview.chat-message-reply-target-active::before {
    animation: none !important;
    transition: none !important;
    opacity: var(--kinma-reply-highlight-strength, 1) !important;
    transform: scaleX(var(--kinma-reply-highlight-strength, 1)) !important;
}

.chat-message-reply-swipe-preview > * {
    position: relative;
    z-index: 1;
}

.chat-message-reply-target-highlight-out::before {
    animation: kinma-reply-target-highlight-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes kinma-reply-target-highlight-in {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes kinma-reply-target-highlight-out {
    0% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(0);
    }
}

.chat-message-bot.chat-message-reply-target-active::before,
.chat-message-bot.chat-message-reply-target-highlight-out::before {
    transform-origin: left center;
    background: linear-gradient(
        to left,
        transparent var(--kinma-chat-wall-gradient-fade-in, 28%),
        color-mix(in srgb, var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 35%, transparent)
            var(--kinma-chat-wall-gradient-mid-in, 58%),
        var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 100%
    );
}

.chat-message-user.chat-message-reply-target-active::before,
.chat-message-user.chat-message-reply-target-highlight-out::before {
    transform-origin: right center;
    background: linear-gradient(
        to left,
        var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 0%,
        color-mix(in srgb, var(--kinma-chat-reply-highlight-bg, rgba(214, 231, 255, 0.96)) 35%, transparent)
            var(--kinma-chat-wall-gradient-mid, 42%),
        transparent var(--kinma-chat-wall-gradient-fade, 72%)
    );
}

.chat-message-reply-target-active > .chat-message-wrapper,
.chat-message-reply-target-active .chat-message-edited-below-stack > .chat-message-wrapper {
    transform: translateX(0);
    will-change: transform;
}

.chat-message-bot.chat-message-reply-target-nudge > .chat-message-wrapper,
.chat-message-bot.chat-message-reply-target-nudge .chat-message-edited-below-stack > .chat-message-wrapper {
    animation: kinma-reference-nudge-incoming 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

.chat-message-user.chat-message-reply-target-nudge > .chat-message-wrapper,
.chat-message-user.chat-message-reply-target-nudge .chat-message-edited-below-stack > .chat-message-wrapper {
    animation: kinma-reference-nudge-outgoing 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

.chat-message-reply-target-active > *,
.chat-message-reply-target-highlight-out > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .chat-message-reply-target-active::before,
    .chat-message-reply-target-highlight-out::before {
        animation: none;
        transform: none;
    }

    .chat-message-reply-target-active::before {
        opacity: 1;
    }

    .chat-message-reply-target-highlight-out::before {
        opacity: 0;
    }

    .chat-message-reply-target-nudge > .chat-message-wrapper,
    .chat-message-reply-target-nudge .chat-message-edited-below-stack > .chat-message-wrapper {
        animation: none !important;
    }
}

.chat-message-reference-mode:not(.chat-message-base-reply) .chat-message-quote-above,
.chat-message-reference-mode:not(.chat-message-base-reply) .chat-message-references--in-quote-stack,
.chat-message-reference-mode:not(.chat-message-base-reply) .chat-message-quote-stack {
    cursor: pointer;
}

/* Reference Search Bar */
.chat-reference-search-bar {
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-reference-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 24px;
    padding: 8px 16px;
    width: 100%;
    max-width: 500px;
    transition: all 0.2s ease;
}

.chat-reference-search-wrapper:focus-within {
    background: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.chat-reference-search-wrapper svg {
    flex-shrink: 0;
    color: #6c757d;
}

.chat-reference-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #1a1a1a;
    min-width: 0;
}

.chat-reference-search-input::placeholder {
    color: #adb5bd;
}

.chat-reference-search-cancel {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.chat-reference-search-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

/* Chat Attachment Menu */
.chat-attachment-menu {
    position: fixed;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 8px;
    min-width: 220px;
    z-index: 100126;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: contextMenuFadeIn 0.15s ease-out;
}

.chat-attachment-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #1a1a1a;
    font-size: 14px;
}

.chat-attachment-menu-item:hover {
    background: #f8f9fa;
}

.chat-attachment-menu-item svg {
    flex-shrink: 0;
    color: #6c757d;
}

.chat-attachment-menu-item:hover svg {
    color: #1a1a1a;
}

.chat-attachment-menu-item span {
    flex: 1;
}

/* Share Dialog */
.chat-share-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease-out;
}

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

.chat-share-dialog-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.2s ease-out;
}

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

.chat-share-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
}

.chat-share-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-share-dialog-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #6c757d;
    font-size: 24px;
    line-height: 1;
    transition: all 0.2s ease;
}

.chat-share-dialog-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.chat-share-dialog-body {
    padding: 24px;
}

.chat-share-dialog-body p {
    margin: 0 0 16px 0;
    color: #1a1a1a;
    font-size: 14px;
}

.chat-share-dialog-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-share-dialog-options label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat-share-dialog-options label:hover {
    background: #f8f9fa;
}

.chat-share-dialog-options input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.chat-share-dialog-options span {
    flex: 1;
    color: #1a1a1a;
    font-size: 14px;
}

.chat-share-dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    justify-content: flex-end;
}

.chat-share-dialog-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-share-dialog-btn-cancel {
    background: #f8f9fa;
    color: #1a1a1a;
}

.chat-share-dialog-btn-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-share-dialog-btn-confirm {
    background: #007bff;
    color: #ffffff;
}

.chat-share-dialog-btn-confirm:hover {
    background: #0056b3;
}

/* Camera Dialog */
.chat-camera-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.chat-camera-dialog-content {
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    padding: 24px;
}

.chat-camera-dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.chat-camera-btn {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-camera-btn-capture {
    background: #28a745;
    color: #ffffff;
    width: 100%;
}

.chat-camera-btn-capture:hover {
    background: #218838;
}

.chat-contact-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
}

.chat-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.chat-contact-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    transition: background-color 0.3s ease;
}

.chat-contact-status[data-status="green"] {
    background-color: #28a745;
}

.chat-contact-status[data-status="yellow"] {
    background-color: #ffc107;
}

.chat-contact-status[data-status="red"] {
    background-color: #dc3545;
}

.chat-contact-status[data-status="offline"],
.chat-contact-status[data-status="gray"] {
    background-color: #9ca3af;
}

.chat-contact-status[data-status="online"] {
    background-color: #28a745;
}

.chat-contact-status[data-status="away"] {
    background-color: #ffc107;
}

.chat-contact-status[data-status="dnd"] {
    background-color: #dc3545;
}

.chat-contact-item.active .chat-contact-status[data-status="green"],
.chat-contact-item.active .chat-contact-status[data-status="online"] {
    background-color: #22c55e !important;
}

.chat-contact-item.active .chat-contact-status[data-status="yellow"],
.chat-contact-item.active .chat-contact-status[data-status="away"] {
    background-color: #facc15 !important;
}

.chat-contact-item.active .chat-contact-status[data-status="red"],
.chat-contact-item.active .chat-contact-status[data-status="dnd"] {
    background-color: #ef4444 !important;
}

.chat-contact-item.active .chat-contact-status[data-status="gray"],
.chat-contact-item.active .chat-contact-status[data-status="offline"] {
    background-color: #9ca3af !important;
}

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

.chat-contact-name-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-contact-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.chat-contact-closed-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    margin-left: 6px;
    border: 1px solid #dee2e6;
}

.chat-contact-preview {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.3;
}

.chat-contact-preview-typing {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.chat-contact-preview-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-weight: 600;
}
.chat-contact-preview-call-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: chatLiveCallPulse 1.35s ease-in-out infinite;
}
.chat-contact-preview-call-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-contact-typing-text { flex-shrink: 0; }
.chat-contact-typing-dots {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}
.chat-contact-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: chatTypingDot 1.2s infinite ease-in-out;
}
.chat-contact-typing-dots span:nth-child(1) { animation-delay: -0.24s; }
.chat-contact-typing-dots span:nth-child(2) { animation-delay: -0.12s; }
.chat-contact-typing-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes chatTypingDot {
    0%, 70%, 100% { transform: scale(0.85); opacity: 0.5; }
    35% { transform: scale(1); opacity: 1; }
}
@keyframes chatLiveCallPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.88); }
}

.chat-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 1px;
}

.chat-contact-time {
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
}

.chat-contact-unread {
    background: #ef4444;
    color: #ffffff;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1.4;
}
.chat-contact-live-call-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Chat Main (Right) */
.chat-main {
    flex: 1;
    display: flex; /* Always visible when chat popup is open */
    flex-direction: column;
    background: #ffffff;
    position: relative;
}

.chat-main-header {
    padding: 16px 20px;
    border-bottom: none;
    background: #ffffff;
    transition: background 0.2s ease;
}

.chat-main-header:hover {
    background: #f8f9fa;
}

/* Chat Profile Panel - Expands chatbox to the right */
.chat-profile-panel {
    width: 0;
    min-width: 0;
    height: 100%;
    background: #ffffff;
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-profile-panel.active {
    width: 320px;
    min-width: 320px;
    border-right: 1px solid #e9ecef;
}

.chat-profile-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
}

.chat-profile-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
}

.chat-profile-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.chat-profile-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chat-profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 16px;
}

.chat-profile-name {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    text-align: center;
}

.chat-profile-status {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 24px;
}

.chat-profile-section {
    width: 100%;
    margin-bottom: 24px;
}

.chat-profile-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.chat-profile-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
}

.chat-profile-info-item svg {
    color: #6c757d;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-profile-info-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 2px;
}

.chat-profile-info-value {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}

.chat-profile-actions {
    width: 100%;
    margin-top: auto;
}

.chat-profile-btn-primary {
    width: 100%;
    padding: 12px 16px;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.chat-profile-btn-primary:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeIn 0.3s ease;
    justify-content: space-between;
    width: 100%;
}

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

.chat-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.chat-user-details {
    flex: 1;
}

.chat-user-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-user-status-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.chat-user-status-indicator:not(.chat-user-avatar-status-dot):not(.chat-header-profile-overlay-avatar-status-dot):not(.profile-picture-presence-dot) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.chat-user-status-indicator[data-status="green"] {
    background-color: #28a745;
}

.chat-user-status-indicator[data-status="yellow"] {
    background-color: #ffc107;
}

.chat-user-status-indicator[data-status="red"] {
    background-color: #dc3545;
}

.chat-user-status-indicator[data-status="offline"],
.chat-user-status-indicator[data-status="gray"] {
    background-color: #9ca3af;
}

.chat-user-status {
    font-size: 12px;
    color: #6c757d;
}

#chatMain {
    --kinma-chat-reply-reserve: 0px;
}

#chatMain > .chat-messages {
    padding-bottom: calc(16px + var(--kinma-chat-reply-reserve, 0px));
    scroll-padding-bottom: calc(8px + var(--kinma-chat-reply-reserve, 0px));
}

.chat-messages {
    --kinma-chat-meta-reveal-duration: 260ms;
    --kinma-chat-meta-reveal-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --kinma-chat-meta-hover-reveal-wait: 0.175s;
    --kinma-chat-meta-hover-reveal-delay: 0s;
    --kinma-chat-messages-pad-x: 16px;
    flex: 1;
    overflow-y: auto;
    overflow-anchor: none;
    /* Horizontal inset on list rows (see modules/chat.css) so wall gradients are not clipped by overflow-x. */
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    transition: opacity 0.25s ease-in-out;
}

.chat-messages:not(.loading)::before {
    content: '';
    display: block;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.chat-messages.loading::before,
.chat-messages:not(:has(.chat-message))::before {
    display: none;
    margin-top: 0;
}

.chat-messages > .chat-message {
    overflow-anchor: none;
}

.chat-messages.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Smooth scroll behavior */
.chat-messages {
    scroll-behavior: auto;
}

.chat-messages.kinma-chat-messages-pin-bottom {
    overflow: hidden !important;
    scroll-behavior: auto !important;
}

/* Chat Date Separator (Modern minimal style) */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 16px 0;
    position: relative;
    width: 100%;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #1a1a1a;
    flex-basis: 0;
    max-width: 50%;
}

.chat-date-separator::before {
    margin-right: 16px;
}

.chat-date-separator::after {
    margin-left: 16px;
}

.chat-date-separator span {
    background: transparent;
    color: #1a1a1a;
    padding: 0 8px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
    border: none;
}

.chat-new-unread-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0 12px 0;
    gap: 12px;
}

.chat-new-unread-divider-line {
    flex: 1 1 0;
    min-width: 0;
    height: 2px;
    background: #ef4444;
    border-radius: 1px;
}

.chat-new-unread-divider-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ef4444;
}

/* New Messages Bar (WhatsApp style) */
.chat-new-messages-bar {
    position: sticky;
    top: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    width: fit-content;
    background: #ffffff;
    color: #6366f1;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
}

/* Pfeil links: zum Nach-unten-Scrollen wenn hochgescrollt */
.chat-new-messages-bar.chat-scroll-to-bottom {
    margin: 0 0 12px 12px;
    left: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
}

.chat-scroll-to-bottom-arrow {
    font-size: 20px;
    line-height: 1;
}

.chat-new-messages-bar:hover {
    background: #f3f4f6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.chat-new-messages-bar:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    text-align: center;
}

.chat-empty-state svg {
    color: #dee2e6;
    margin-bottom: 16px;
}

.chat-empty-state h3 {
    margin: 12px 0 8px 0;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 600;
}

.chat-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* Notifications View */
.notifications-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.notifications-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.notifications-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.notifications-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

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

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.notification-avatar-info {
    background: #6366f1;
}

.notification-avatar-success {
    background: #28a745;
}

.notification-avatar-warning {
    background: #ffc107;
    color: #1a1a1a;
}

.notification-avatar-error {
    background: #dc3545;
}

/* System notification styles - compact, modern, clean */
.notification-item.notification-system {
    padding: 10px 16px;
    gap: 10px;
    border-radius: 12px;
    margin: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.notification-item.notification-system:hover {
    background: #ffffff;
    border-color: #dee2e6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.notification-system-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.notification-system-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}

.notification-system-name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-system-message {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.4;
    margin-top: 2px;
}

/* Call status specific colors */
.notification-call-connecting .notification-system-icon {
    background: rgba(0, 123, 255, 0.1);
}

.notification-call-active .notification-system-icon {
    background: rgba(40, 167, 69, 0.1);
}

.notification-call-ended .notification-system-icon {
    background: rgba(220, 53, 69, 0.1);
}

.notification-call-declined .notification-system-icon {
    background: rgba(220, 53, 69, 0.1);
}

.notification-call-missed .notification-system-icon {
    background: rgba(108, 117, 125, 0.1);
}

.notification-call-connecting .notification-system-message {
    color: #0056b3;
}

.notification-call-active .notification-system-message {
    color: #1e7e34;
}

.notification-call-ended .notification-system-message {
    color: #c82333;
}

.notification-call-declined .notification-system-message {
    color: #c82333;
}

.notification-call-missed .notification-system-message {
    color: #1a1a1a;
}

/* Callback button for missed calls */
.notification-callback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.notification-callback-btn:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
    transform: translateY(-1px);
}

.notification-callback-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.2);
}

.notification-callback-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

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

.notification-sender {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
}

.notification-time {
    font-size: 12px;
    color: #6c757d;
}

.notification-title {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.notification-message {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.5;
    word-wrap: break-word;
}

.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-align: center;
    padding: 40px 20px;
}

.notifications-empty svg {
    color: #dee2e6;
    margin-bottom: 16px;
}

.notifications-empty p {
    font-size: 16px;
    margin: 0;
    color: #6c757d;
}

.chat-new-messages-empty svg {
    color: #dee2e6;
    margin-bottom: 16px;
}

.chat-new-messages-empty p {
    font-size: 14px;
    margin: 0;
}

/* Custom scrollbar for new messages list */
.chat-new-messages-list::-webkit-scrollbar {
    width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

/* Custom scrollbar for chat messages */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

/* Custom scrollbar for contacts list */
.chat-contacts-list::-webkit-scrollbar {
    width: 6px;
}

.chat-contacts-list::-webkit-scrollbar-track {
    background: transparent;
}

.chat-contacts-list::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.chat-contacts-list::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

.chat-message {
    display: flex;
    gap: 10px;
    max-width: 75%;
    align-items: flex-start;
    position: relative;
    margin-bottom: 6px;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.chat-message-grouped {
    margin-top: 0;
}

/* Ensure grouped messages align properly on both sides */
.chat-message-bot.chat-message-grouped {
    margin-top: 0;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: 0;
}

.chat-message-user.chat-message-grouped {
    margin-top: 0;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: 0;
}

.chat-message-grouped .chat-message-content {
    margin-top: 0;
    margin-bottom: 0;
}

.chat-message-avatar-spacer {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    flex-shrink: 0;
    /* Invisible spacer to maintain exact same alignment as avatar */
    visibility: hidden;
    pointer-events: none;
}

.chat-message-edit-btn-spacer {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    flex-shrink: 0;
    /* Invisible spacer to maintain alignment for edit button */
    visibility: hidden;
    pointer-events: none;
}

/* Ensure spacers maintain exact alignment for grouped messages */
.chat-message-user .chat-message-avatar-spacer {
    order: 2;
    align-self: flex-end;
}

.chat-message-user .chat-message-edit-btn-spacer {
    order: 0;
}

.chat-message-bot {
    align-self: flex-start;
    flex-direction: row;
    margin-right: auto;
    margin-left: 0;
}

.chat-message-user {
    align-self: flex-end;
    align-items: flex-end;
    flex-direction: row;
    margin-left: auto;
    margin-right: 0;
}

#chatMessages {
    --kinma-chat-reply-bg: rgba(147, 197, 253, 0.92);
    --kinma-chat-reply-highlight-bg: rgba(214, 231, 255, 0.96);
    --kinma-chat-referenzen-bg: rgba(254, 243, 199, 0.98);
    --kinma-chat-referenzen-bg-hover: rgba(245, 158, 11, 0.14);
    --kinma-outgoing-bubble-bg: #d4cff5;
    --kinma-outgoing-reply-thread-line: #d4cff5;
    --kinma-incoming-bubble-bg: #212121;
    --kinma-incoming-reply-thread-line: #212121;
    --kinma-quote-card-r: 20px;
    --kinma-quote-card-r-expanded: 16px;
    --kinma-quote-card-r-row: 12px;
}

#chatMessages > .chat-message {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#chatMessages > .chat-message.chat-message-user {
    justify-content: flex-end;
}

#chatMessages > .chat-message.chat-message-bot {
    justify-content: flex-start;
}

#chatMessages > .chat-message > .chat-message-wrapper,
#chatMessages > .chat-message > .chat-message-edited-below-stack {
    max-width: 75%;
    min-width: 0;
}

#chatMessages .chat-message-avatar-spacer,
#chatMessages .chat-message-edit-btn-spacer {
    pointer-events: auto;
}

.chat-message-user .chat-message-avatar {
    order: 2;
    align-self: flex-end;
}

.chat-message-user .chat-message-wrapper {
    order: 1;
}

.chat-message-user .chat-message-edit-btn {
    order: 0;
}

.chat-message-avatar {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: var(--chat-message-line-avatar-size, 30px);
    min-height: var(--chat-message-line-avatar-size, 30px);
    max-width: var(--chat-message-line-avatar-size, 30px);
    max-height: var(--chat-message-line-avatar-size, 30px);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.chat-message-avatar--interactive {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .chat-message-avatar--interactive:hover {
        transform: scale(1.06);
        box-shadow: 0 2px 8px rgba(26, 26, 26, 0.2);
    }
}

.chat-message-avatar--interactive:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.chat-message-avatar-column {
    position: relative;
    width: var(--chat-message-line-avatar-size, 30px);
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-message-user .chat-message-avatar-column {
    order: 2;
    align-self: flex-end;
}

.chat-message-edited-pencil {
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    color: #64748b;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chat-message-edited-pencil-icon {
    display: block;
    pointer-events: none;
}

.chat-message-edited-pencil--slot {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    min-width: var(--chat-message-line-avatar-size, 30px);
    min-height: var(--chat-message-line-avatar-size, 30px);
}

.chat-message-user .chat-message-edited-pencil--slot {
    order: 2;
}

/* Bearbeitet unter der Bubble (letzte / einzige im 5-Min-Cluster mit Avatar) */
.chat-message-edited-pencil--below {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    min-width: var(--chat-message-line-avatar-size, 30px);
    min-height: var(--chat-message-line-avatar-size, 30px);
    margin-top: 6px;
    align-self: flex-end;
}

.chat-message-bot .chat-message-edited-pencil--below {
    align-self: flex-start;
}

/* Bearbeitet-Stift unter Bubble: Grid — Avatar nur Zeile 1 neben Bubble, Stift nur unter Bubble (nicht unter Avatar) */
.chat-message-edited-below-stack {
    display: grid;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    column-gap: 6px;
    row-gap: 0;
    align-items: start;
}

/* Grid-Platzierung ignorieren ggf. flex order von .chat-message-user */
.chat-message-edited-below-stack > .chat-message-wrapper,
.chat-message-edited-below-stack > .chat-message-avatar,
.chat-message-edited-below-stack > .chat-message-edited-pencil--below {
    order: 0;
}

.chat-message-user .chat-message-edited-below-stack {
    grid-template-columns: minmax(0, max-content) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "bubble avatar"
        "pencil .";
    justify-items: stretch;
}

.chat-message-user .chat-message-edited-below-stack > .chat-message-wrapper {
    grid-area: bubble;
    justify-self: end;
    min-width: 0;
}

.chat-message-user .chat-message-edited-below-stack > .chat-message-avatar {
    grid-area: avatar;
    align-self: end;
}

.chat-message-user .chat-message-edited-below-stack > .chat-message-edited-pencil--below {
    grid-area: pencil;
    justify-self: end;
    align-self: end;
}

.chat-message-bot .chat-message-edited-below-stack {
    grid-template-columns: auto minmax(0, max-content);
    grid-template-rows: auto auto;
    grid-template-areas:
        "avatar bubble"
        ". pencil";
    justify-items: stretch;
}

.chat-message-bot .chat-message-edited-below-stack > .chat-message-avatar {
    grid-area: avatar;
    align-self: start;
}

.chat-message-bot .chat-message-edited-below-stack > .chat-message-wrapper {
    grid-area: bubble;
    justify-self: start;
    min-width: 0;
}

.chat-message-bot .chat-message-edited-below-stack > .chat-message-edited-pencil--below {
    grid-area: pencil;
    justify-self: start;
    align-self: start;
}

.chat-message-edited-pencil--on-avatar {
    position: absolute;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    bottom: -2px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.chat-message-bot .chat-message-edited-pencil--on-avatar {
    left: -2px;
}

.chat-message-user .chat-message-edited-pencil--on-avatar {
    right: -2px;
}

@media (hover: hover) and (pointer: fine) {
    .chat-message-edited-pencil:hover {
        background: rgba(26, 26, 26, 0.08);
        color: #1a1a1a;
    }

    .chat-message-edited-pencil--on-avatar:hover {
        background: #f1f5f9;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }
}

.chat-message-edited-pencil:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

body.dark-mode .chat-message-edited-pencil {
    color: #94a3b8;
}

body.dark-mode .chat-message-edited-pencil--on-avatar {
    background: rgba(26, 26, 26, 0.96);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) and (pointer: fine) {
    body.dark-mode .chat-message-edited-pencil:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #e2e8f0;
    }

    body.dark-mode .chat-message-edited-pencil--on-avatar:hover {
        background: #1a1a1a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
}

.chat-message-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    flex: 0 1 auto;
    position: relative;
}

/* Ensure both sides have the same alignment behavior - reversed */
.chat-message-bot .chat-message-wrapper {
    align-items: flex-start;
}

.chat-message-user .chat-message-wrapper {
    align-items: flex-end;
}

/* Ensure grouped messages have the same wrapper alignment */
.chat-message-bot.chat-message-grouped .chat-message-wrapper {
    align-items: flex-start;
}

.chat-message-user.chat-message-grouped .chat-message-wrapper {
    align-items: flex-end;
}

/* Ensure both sides have the same alignment behavior - reversed */
.chat-message-bot .chat-message-wrapper {
    align-items: flex-start;
}

.chat-message-user .chat-message-wrapper {
    align-items: flex-end;
}

.chat-message {
    gap: 10px;
    margin-top: 0;
    margin-bottom: 0.5px;
}

.chat-message-time-cluster-start {
    margin-top: 16px;
}

.chat-message-after-side-break {
    margin-top: 10px;
}

.chat-message-content {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    border: none;
    outline: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message-content.chat-message-pill {
    border-radius: 24px;
    padding: 8px 16px;
    gap: 4px;
}

.chat-message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Temporary photo button */
.chat-attachment-temporary-photo {
    margin: 8px 0;
}

.chat-temporary-photo-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.chat-temporary-photo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.chat-temporary-photo-btn:active {
    transform: translateY(0);
}

.chat-temporary-photo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.chat-temporary-photo-deleted {
    padding: 12px 24px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

/* Poll Dialog */
.chat-poll-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-poll-dialog-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.chat-poll-dialog-header {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-poll-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.chat-poll-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.chat-poll-dialog-close:hover {
    background: #f8f9fa;
}

.chat-poll-dialog-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.chat-poll-input-group {
    margin-bottom: 20px;
}

.chat-poll-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.chat-poll-input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.chat-poll-input-group input:focus {
    outline: none;
    border-color: #667eea;
}

.chat-poll-options-container {
    margin-bottom: 16px;
}

.chat-poll-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.poll-option-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
}

.poll-option-input:focus {
    outline: none;
    border-color: #667eea;
}

.poll-option-remove {
    background: #dc3545;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s ease;
}

.poll-option-remove:hover {
    background: #c82333;
}

.chat-poll-add-option-btn {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    color: #6c757d;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

.chat-poll-add-option-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #1a1a1a;
}

.chat-poll-dialog-footer {
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.chat-poll-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.chat-poll-btn-cancel {
    background: #f8f9fa;
    color: #6c757d;
}

.chat-poll-btn-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-poll-btn-create {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.chat-poll-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.chat-poll-input-group textarea#pollAiContext {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    min-height: 72px;
}

.chat-poll-input-group textarea#pollAiContext:focus {
    outline: none;
    border-color: #667eea;
}

.chat-poll-optional-label {
    font-weight: 400;
    color: #6c757d;
    font-size: 13px;
}

.chat-poll-ai-hint {
    font-size: 13px;
    color: #6c757d;
    margin-top: 12px;
    line-height: 1.45;
}

.chat-attachment-ai-poll {
    margin-top: 8px;
    max-width: 100%;
}

.kinma-ai-poll-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(102, 126, 234, 0.35);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06);
}

.kinma-ai-poll-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.kinma-ai-poll-card-context {
    font-size: 13px;
    color: #1a1a1a;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
}

.kinma-ai-poll-card-options {
    margin: 0 0 10px 0;
    padding-left: 1.25rem;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.5;
}

.kinma-ai-poll-card-options li {
    margin-bottom: 4px;
}

.kinma-ai-poll-card-note {
    font-size: 11px;
    color: #64748b;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    padding-top: 8px;
    margin-top: 4px;
}

/* Poll in Messages */
.chat-message-poll {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    padding: 16px;
    margin: 8px 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.08);
}

.chat-poll-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.chat-poll-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}

.chat-poll-question {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: #1a1a1a;
    margin-bottom: 14px;
}

.chat-poll-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-poll-option {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.chat-poll-option:hover {
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
}

.chat-poll-option.voted {
    border-color: rgba(79, 70, 229, 0.45);
    background: #f8faff;
}

.chat-poll-option-bar-bg {
    position: absolute;
    inset: 0;
    background: rgba(241, 245, 249, 0.85);
}

.chat-poll-option-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    min-width: 10px;
    opacity: 0.18;
    transition: width 0.3s ease;
}

.chat-poll-option-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.chat-poll-option-main {
    min-width: 0;
    flex: 1 1 auto;
}

.chat-poll-option-text {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.35;
}

.chat-poll-option-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 700;
}

.chat-poll-option-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
}

.chat-poll-option-percentage {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
}

.chat-poll-option-votes {
    font-size: 12px;
    color: #64748b;
}

.chat-poll-total-votes {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* Location in Messages */
.chat-message-content--location-card {
    min-width: min(100%, 280px);
    max-width: 320px;
}

.chat-message-location {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(26, 26, 26, 0.08);
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06);
    background: #fff;
}

.chat-message-location--card .chat-location-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 8px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.chat-location-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.chat-location-card-badge {
    font-size: 11px;
    font-weight: 600;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.chat-location-map {
    width: 100%;
    height: 200px;
    background: #e2e8f0;
    border-radius: 0;
}

.chat-message-location--card .chat-location-map {
    min-height: 200px;
}

.chat-location-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 12px;
    background: #f8fafc;
    border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.chat-location-live-hint {
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
    flex: 1;
    min-width: 0;
}

.chat-location-label {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}

.chat-location-link {
    font-size: 12px;
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s ease;
}

.chat-location-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

.chat-message-location.expired {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 16px;
}

.chat-location-expired-message {
    text-align: center;
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
}

/* Location Dialog Map */
.chat-location-map-container {
    position: relative;
}

.chat-location-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Temporary photo modal */
.chat-temporary-photo-modal {
    animation: fadeIn 0.2s ease;
}

.chat-main {
    position: relative;
}

.chat-temporary-photo-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

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

/* Image modal */
.chat-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.chat-image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 1;
}

.chat-image-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-image-modal-close:hover {
    opacity: 0.7;
}

.chat-image-modal-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.chat-image-modal-name {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 14px;
}

.chat-message-meta {
    display: none; /* Hide time from inside message box */
}

.chat-message-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.chat-message-bot .chat-message-actions {
    justify-content: flex-start;
}

.chat-message-user .chat-message-actions {
    justify-content: flex-end;
}

.chat-message-bot .chat-message-content {
    --kinma-incoming-fg: #ffffff;
    --kinma-incoming-fg-muted: rgba(255, 255, 255, 0.72);
    background: var(--kinma-incoming-bubble-bg, #212121);
    color: var(--kinma-incoming-fg);
    border: none;
    outline: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    align-self: flex-start;
    box-shadow: none;
}

/* Markdown in eingehenden Blasen — Duplikat-Kette: muss mit modules/chat.css übereinstimmen */
.chat-message-bot .chat-message-content .chat-message-text,
.chat-message-bot .chat-message-content p {
    color: inherit;
}

.chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list,
.chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list {
    margin: 6px 0 6px 18px;
    padding: 0;
}

.chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list ol.kinma-ai-rt-list,
.chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list ol.kinma-ai-rt-list {
    margin-top: 4px;
    margin-bottom: 4px;
}

.chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list li,
.chat-message-bot .chat-message-content .chat-message-text ol.kinma-ai-rt-list li {
    margin: 2px 0;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-linehead {
    margin: 6px 0 2px;
    font-weight: 600;
    line-height: 1.4;
}

.chat-message-bot .chat-message-content .chat-message-text ul.kinma-ai-rt-list--inline-semi {
    margin: 2px 0 8px 1.25rem;
    padding-left: 1.1rem;
    list-style-type: disc;
}

.chat-message-bot .chat-message-content .chat-message-text code.kinma-ai-rt-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 1px 6px;
    color: #f8fafc;
}

.chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link {
    color: #7dd3fc;
    text-decoration: underline;
    word-break: break-word;
}

.chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link:hover {
    color: #bae6fd;
}

.chat-message-bot .chat-message-content .chat-message-text a.kinma-ai-chat-link--internal {
    font-weight: 600;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h1,
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h2,
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h3,
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h4 {
    font-weight: 800;
    margin: 8px 0 4px;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h1 { font-size: 1.14em; }
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h2 { font-size: 1.10em; }
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h3 { font-size: 1.06em; }
.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-h4 { font-size: 1.03em; }

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.35);
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-lang {
    display: block;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-pre {
    margin: 0;
    padding: 8px 10px;
    overflow-x: auto;
    font-size: 0.88em;
    line-height: 1.45;
    background: transparent;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e2e8f0;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap--rendered-md .kinma-ai-rt-fence-md {
    padding: 8px 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #e2e8f0;
}

.chat-message-bot .chat-message-content .chat-message-text .katex {
    font-size: 1.05em;
    color: inherit;
}

.chat-message-bot .chat-message-content .chat-message-text .katex-display {
    margin: 0.55em 0;
    overflow-x: auto;
    max-width: 100%;
}

.chat-message-bot .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap {
    position: relative;
    margin: 10px 0;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-chat-iframe-wrap {
    position: relative;
    margin: 10px 0;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(26, 26, 26, 0.06);
    border: 1px solid rgba(26, 26, 26, 0.12);
}

.kinma-ai-chat-embed-iframe {
    display: block;
    width: 100%;
    min-height: 200px;
    max-height: min(70vh, 520px);
    border: 0;
    vertical-align: bottom;
}

.kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.55);
    border-radius: inherit;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading--hidden {
    opacity: 0;
}

.kinma-ai-chat-iframe-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    animation: kinma-ai-iframe-loading-spin 0.75s linear infinite;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading {
    background: rgba(248, 250, 252, 0.94);
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading-spinner,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-chat-iframe-wrap .kinma-ai-chat-iframe-loading-spinner {
    border-color: rgba(26, 26, 26, 0.12);
    border-top-color: rgba(26, 26, 26, 0.55);
}

@keyframes kinma-ai-iframe-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Kinma same-origin preview: 16:9- bzw. 9:16-Box, Stage füllt Box; iframe 1280×720 / 390×693 + transform im JS */
.kinma-ai-chat-iframe-wrap--same-site-preview {
    position: relative;
}

.kinma-ai-chat-iframe-wrap--same-site-preview .kinma-ai-iframe-preview-box {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.kinma-ai-chat-iframe-wrap--preview-desktop .kinma-ai-iframe-preview-box {
    aspect-ratio: 16 / 9;
}

.kinma-ai-chat-iframe-wrap--preview-mobile .kinma-ai-iframe-preview-box {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 420px);
    margin-left: auto;
    margin-right: auto;
}

.kinma-ai-chat-iframe-wrap--same-site-preview .kinma-ai-iframe-preview-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.kinma-ai-chat-iframe-wrap--same-site-preview .kinma-ai-chat-embed-iframe {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    max-height: none;
    max-width: none;
    border: 0;
    vertical-align: bottom;
    pointer-events: none;
}

.chat-message-user .chat-message-content {
    --kinma-outgoing-fg: #1a1a1a;
    --kinma-outgoing-fg-muted: rgba(26, 26, 26, 0.72);
    background: var(--kinma-outgoing-bubble-bg, #d4cff5);
    color: var(--kinma-outgoing-fg);
    border: none;
    outline: none;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    align-self: flex-end;
    box-shadow: none;
}

.chat-message-user .chat-message-content .chat-message-text ul.kinma-ai-rt-list,
.chat-message-user .chat-message-content .chat-message-text ol.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ul.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ol.kinma-ai-rt-list {
    margin: 6px 0 6px 18px;
    padding: 0;
}

.chat-message-user .chat-message-content .chat-message-text ul.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-user .chat-message-content .chat-message-text ul.kinma-ai-rt-list ol.kinma-ai-rt-list,
.chat-message-user .chat-message-content .chat-message-text ol.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-user .chat-message-content .chat-message-text ol.kinma-ai-rt-list ol.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ul.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ul.kinma-ai-rt-list ol.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ol.kinma-ai-rt-list ul.kinma-ai-rt-list,
.chat-message-user .chat-message-body .chat-message-text ol.kinma-ai-rt-list ol.kinma-ai-rt-list {
    margin-top: 4px;
    margin-bottom: 4px;
}

.chat-message-user .chat-message-content .chat-message-text ul.kinma-ai-rt-list li,
.chat-message-user .chat-message-content .chat-message-text ol.kinma-ai-rt-list li,
.chat-message-user .chat-message-body .chat-message-text ul.kinma-ai-rt-list li,
.chat-message-user .chat-message-body .chat-message-text ol.kinma-ai-rt-list li {
    margin: 2px 0;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-linehead,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-linehead {
    margin: 6px 0 2px;
    font-weight: 600;
    line-height: 1.4;
}

.chat-message-user .chat-message-content .chat-message-text ul.kinma-ai-rt-list--inline-semi,
.chat-message-user .chat-message-body .chat-message-text ul.kinma-ai-rt-list--inline-semi {
    margin: 2px 0 8px 1.25rem;
    padding-left: 1.1rem;
    list-style-type: disc;
}

.chat-message-user .chat-message-content .chat-message-text code.kinma-ai-rt-code,
.chat-message-user .chat-message-body .chat-message-text code.kinma-ai-rt-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    color: #1a1a1a;
}

.chat-message-user .chat-message-content .chat-message-text a.kinma-ai-chat-link,
.chat-message-user .chat-message-body .chat-message-text a.kinma-ai-chat-link {
    color: #4f46e5;
    text-decoration: underline;
    word-break: break-word;
}

.chat-message-user .chat-message-content .chat-message-text a.kinma-ai-chat-link:hover,
.chat-message-user .chat-message-body .chat-message-text a.kinma-ai-chat-link:hover {
    color: #4338ca;
}

.chat-message-user .chat-message-content .chat-message-text a.kinma-ai-chat-link--internal,
.chat-message-user .chat-message-body .chat-message-text a.kinma-ai-chat-link--internal {
    font-weight: 600;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h1,
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h2,
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h3,
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h4,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h1,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h2,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h3,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h4 {
    font-weight: 800;
    margin: 8px 0 4px;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h1,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h1 { font-size: 1.14em; }
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h2,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h2 { font-size: 1.10em; }
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h3,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h3 { font-size: 1.06em; }
.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-h4,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-h4 { font-size: 1.03em; }

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-fence-wrap {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-fence-lang,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-fence-lang {
    display: block;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 4px 10px;
    color: #1a1a1a;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-pre,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-pre {
    margin: 0;
    padding: 8px 10px;
    overflow-x: auto;
    font-size: 0.88em;
    line-height: 1.45;
    background: transparent;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-fence-body,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-fence-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1a1a1a;
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.chat-message-user .chat-message-content .chat-message-text .kinma-ai-rt-fence-wrap--rendered-md .kinma-ai-rt-fence-md,
.chat-message-user .chat-message-body .chat-message-text .kinma-ai-rt-fence-wrap--rendered-md .kinma-ai-rt-fence-md {
    padding: 8px 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #1a1a1a;
}

.chat-message-user .chat-message-content .chat-message-text .katex,
.chat-message-user .chat-message-body .chat-message-text .katex {
    font-size: 1.05em;
    color: inherit;
}

.chat-message-user .chat-message-content .chat-message-text .katex-display,
.chat-message-user .chat-message-body .chat-message-text .katex-display {
    margin: 0.55em 0;
    overflow-x: auto;
    max-width: 100%;
}

/* Only messages with avatars (not grouped) get rounded bottom corner */
.chat-message-bot:not(.chat-message-grouped) .chat-message-content {
    border-bottom-left-radius: 12px;
}

.chat-message-user:not(.chat-message-grouped) .chat-message-content {
    border-bottom-right-radius: 12px;
}

/* Middle grouped messages: no rounding on avatar side (both top and bottom corners) */
.chat-message-bot.chat-message-middle-grouped .chat-message-content {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.chat-message-user.chat-message-middle-grouped .chat-message-content {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Last message in a group: no top corner rounding on avatar side, but rounded bottom corner (has avatar) */
.chat-message-bot.chat-message-last-in-group .chat-message-content {
    border-top-left-radius: 0;
    border-bottom-left-radius: 12px;
}

.chat-message-user.chat-message-last-in-group .chat-message-content {
    border-top-right-radius: 0;
    border-bottom-right-radius: 12px;
}

/* Message directly before system message: same rounded bottom corner (already 12px) */
.chat-message-user.chat-message-last-before-system .chat-message-content {
    border-bottom-right-radius: 12px;
}

.chat-message-bot.chat-message-last-before-system .chat-message-content {
    border-bottom-left-radius: 12px;
}

/* Message directly after system message: rounded top corner (new group start) */
.chat-message-user.chat-message-first-after-system .chat-message-content {
    border-top-right-radius: 12px !important;
}

.chat-message-bot.chat-message-first-after-system .chat-message-content {
    border-top-left-radius: 12px !important;
}

.chat-message-bot .chat-message-content.chat-message-pill {
    border-bottom-left-radius: 12px;
}

.chat-message-user .chat-message-content.chat-message-pill {
    border-bottom-right-radius: 12px;
}

/* 5-Minuten-Cluster: Ecken zur Avatar-Seite (rechts = user, links = bot) — schlägt .chat-message-pill und alte Gruppierung */
/* Einzelnachricht: zur Avatar-Seite (rechts) oben rund, unten eckig */
.chat-message-user.chat-message-cluster-only .chat-message-content {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 6px !important;
}

.chat-message-user.chat-message-cluster-only .chat-message-content.chat-message-pill {
    border-top-left-radius: 24px !important;
    border-bottom-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 8px !important;
}

.chat-message-user.chat-message-cluster-first .chat-message-content {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: var(--kinma-protrude-bl, 0px) !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 0 !important;
}

.chat-message-user.chat-message-cluster-first .chat-message-content.chat-message-pill {
    border-top-left-radius: 24px !important;
    border-bottom-left-radius: var(--kinma-protrude-bl, 0px) !important;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 0 !important;
}

.chat-message-user.chat-message-cluster-middle .chat-message-content {
    border-top-left-radius: var(--kinma-protrude-tl, 0px) !important;
    border-bottom-left-radius: var(--kinma-protrude-bl, 0px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.chat-message-user.chat-message-cluster-middle .chat-message-content.chat-message-pill {
    border-top-left-radius: var(--kinma-protrude-tl, 0px) !important;
    border-bottom-left-radius: var(--kinma-protrude-bl, 0px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Letzte im 5-Min-Cluster: oben zur Mitte eckig (Stapel), unten Außenecke leicht gerundet */
.chat-message-user.chat-message-cluster-last .chat-message-content {
    border-top-left-radius: var(--kinma-protrude-tl, 0px) !important;
    border-bottom-left-radius: 18px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 6px !important;
}

.chat-message-user.chat-message-cluster-last .chat-message-content.chat-message-pill {
    border-top-left-radius: var(--kinma-protrude-tl, 0px) !important;
    border-bottom-left-radius: 24px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 8px !important;
}

/* Einzelnachricht: Ecke zur Avatar-Seite (links) wie ausgehend unten-rechts (6px / 8px Pill) */
.chat-message-bot.chat-message-cluster-only .chat-message-content {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

.chat-message-bot.chat-message-cluster-only .chat-message-content.chat-message-pill {
    border-top-left-radius: 24px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
}

.chat-message-bot.chat-message-cluster-first .chat-message-content {
    border-top-left-radius: 18px !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 18px !important;
    border-bottom-right-radius: var(--kinma-protrude-br, 0px) !important;
}

.chat-message-bot.chat-message-cluster-first .chat-message-content.chat-message-pill {
    border-top-left-radius: 24px !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: var(--kinma-protrude-br, 0px) !important;
}

.chat-message-bot.chat-message-cluster-middle .chat-message-content {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--kinma-protrude-tr, 0px) !important;
    border-bottom-right-radius: var(--kinma-protrude-br, 0px) !important;
}

.chat-message-bot.chat-message-cluster-middle .chat-message-content.chat-message-pill {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--kinma-protrude-tr, 0px) !important;
    border-bottom-right-radius: var(--kinma-protrude-br, 0px) !important;
}

/* Letzte im 5-Min-Cluster: Ecke zur Avatar-Seite (links) wie ausgehend (unten-rechts 6px / Pill 8px) */
.chat-message-bot.chat-message-cluster-last .chat-message-content {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: var(--kinma-protrude-tr, 0px) !important;
    border-bottom-right-radius: 18px !important;
}

.chat-message-bot.chat-message-cluster-last .chat-message-content.chat-message-pill {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: var(--kinma-protrude-tr, 0px) !important;
    border-bottom-right-radius: 24px !important;
}

/* 5-Min-Cluster: höhere Zeilen zuerst malen (z-index), damit Bubble-Schatten nicht nach oben auf die vorige Nachricht fallen */
.chat-message.chat-message-user.chat-message-cluster-first,
.chat-message.chat-message-user.chat-message-cluster-middle,
.chat-message.chat-message-user.chat-message-cluster-last,
.chat-message.chat-message-bot.chat-message-cluster-first,
.chat-message.chat-message-bot.chat-message-cluster-middle,
.chat-message.chat-message-bot.chat-message-cluster-last {
    position: relative;
    z-index: var(--kinma-cluster-stack-z, auto);
}

/* 5-Min-Cluster: keine Bubble-Schatten (flache Blasen) */
.chat-message-user.chat-message-cluster-middle .chat-message-content,
.chat-message-user.chat-message-cluster-last .chat-message-content,
.chat-message-bot.chat-message-cluster-middle .chat-message-content,
.chat-message-bot.chat-message-cluster-last .chat-message-content {
    box-shadow: none;
}

/* Nach Systemnachricht: oberste Ecke zur Avatar-Seite nur bei Cluster-Anfang / Einzelnachricht */
.chat-message-user.chat-message-first-after-system.chat-message-cluster-first .chat-message-content,
.chat-message-user.chat-message-first-after-system.chat-message-cluster-only .chat-message-content {
    border-top-right-radius: 18px !important;
}

.chat-message-user.chat-message-first-after-system.chat-message-cluster-first .chat-message-content.chat-message-pill,
.chat-message-user.chat-message-first-after-system.chat-message-cluster-only .chat-message-content.chat-message-pill {
    border-top-right-radius: 24px !important;
}

.chat-message-user.chat-message-first-after-system.chat-message-cluster-middle .chat-message-content,
.chat-message-user.chat-message-first-after-system.chat-message-cluster-last .chat-message-content {
    border-top-right-radius: 0 !important;
}

.chat-message-user.chat-message-first-after-system.chat-message-cluster-middle .chat-message-content.chat-message-pill,
.chat-message-user.chat-message-first-after-system.chat-message-cluster-last .chat-message-content.chat-message-pill {
    border-top-right-radius: 0 !important;
}

.chat-message-bot.chat-message-first-after-system.chat-message-cluster-first .chat-message-content,
.chat-message-bot.chat-message-first-after-system.chat-message-cluster-only .chat-message-content {
    border-top-left-radius: 18px !important;
}

.chat-message-bot.chat-message-first-after-system.chat-message-cluster-first .chat-message-content.chat-message-pill,
.chat-message-bot.chat-message-first-after-system.chat-message-cluster-only .chat-message-content.chat-message-pill {
    border-top-left-radius: 24px !important;
}

.chat-message-bot.chat-message-first-after-system.chat-message-cluster-middle .chat-message-content,
.chat-message-bot.chat-message-first-after-system.chat-message-cluster-last .chat-message-content {
    border-top-left-radius: 0 !important;
}

.chat-message-bot.chat-message-first-after-system.chat-message-cluster-middle .chat-message-content.chat-message-pill,
.chat-message-bot.chat-message-first-after-system.chat-message-cluster-last .chat-message-content.chat-message-pill {
    border-top-left-radius: 0 !important;
}

/* Nur Sprachmemo(s), kein Text/Antwort/Umfrage: äußere Bubble weglassen — nur .chat-message-voice-Pill */
.chat-message-bot .chat-message-content.chat-message-content--voice-only,
.chat-message-user .chat-message-content.chat-message-content--voice-only {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0;
    border-radius: 0 !important;
    color: inherit;
}

.chat-message-bot:not(.chat-message-grouped) .chat-message-content.chat-message-content--voice-only,
.chat-message-user:not(.chat-message-grouped) .chat-message-content.chat-message-content--voice-only,
.chat-message-bot.chat-message-middle-grouped .chat-message-content.chat-message-content--voice-only,
.chat-message-user.chat-message-middle-grouped .chat-message-content.chat-message-content--voice-only,
.chat-message-bot.chat-message-last-in-group .chat-message-content.chat-message-content--voice-only,
.chat-message-user.chat-message-last-in-group .chat-message-content.chat-message-content--voice-only,
.chat-message-user.chat-message-last-before-system .chat-message-content.chat-message-content--voice-only,
.chat-message-bot.chat-message-last-before-system .chat-message-content.chat-message-content--voice-only,
.chat-message-user.chat-message-first-after-system .chat-message-content.chat-message-content--voice-only,
.chat-message-bot.chat-message-first-after-system .chat-message-content.chat-message-content--voice-only {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Reine Attachment-Nachrichten: keine äußere Message-Bubble */
.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
    border-radius: 0 !important;
}

.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-message-body {
    gap: 0;
    width: fit-content;
    max-width: 100%;
}

.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-message-attachments {
    margin: 0;
    display: block;
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-attachment-image,
.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-attachment-video,
.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-message-attachment,
.chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)) .chat-attachment-document-preview {
    margin-top: 0 !important;
}

.chat-message-user .chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)):has(.chat-message-delivery-footer) {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.chat-message-user .chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)):has(.chat-message-delivery-footer) .chat-message-delivery-footer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin-top: 0;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(26, 26, 26, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.chat-message-user .chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)):has(.chat-message-delivery-footer) .chat-message-delivery-status {
    color: rgba(255, 255, 255, 0.95);
}

.chat-message-user .chat-message-content:has(.chat-message-attachments):not(:has(.chat-message-text)):not(:has(.chat-message-voice)):not(:has(.chat-message-poll)):has(.chat-message-delivery-footer) .chat-message-delivery-status--read {
    color: #7dd3fc;
}

/* Removed .chat-message-footer - now using .chat-message-meta inside .chat-message-content */

.chat-message-time-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease var(--kinma-chat-meta-hover-reveal-delay);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.chat-message-bot .chat-message-time-wrap {
    left: 100%;
    right: auto;
    margin-left: 8px;
}

.chat-message-user .chat-message-time-wrap {
    right: 100%;
    left: auto;
    margin-right: 8px;
    flex-direction: row-reverse;
}

.chat-message:has(.chat-message-content:hover) .chat-message-time-wrap {
    opacity: 1;
}

.chat-message-time {
    font-size: 11px;
    white-space: nowrap;
    color: rgba(26, 26, 26, 0.6);
}

.chat-message-bot .chat-message-time-wrap .chat-message-time {
    color: rgba(255, 255, 255, 0.72);
}

.chat-message-user .chat-message-time-wrap .chat-message-time {
    color: rgba(26, 26, 26, 0.6);
}

.chat-message-content-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.chat-message-user .chat-message-content-meta {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
    align-self: flex-end;
    box-sizing: border-box;
}

.chat-message-user .chat-message-content-meta .chat-message-time-inline,
.chat-message-user .chat-message-content-meta .chat-message-delivery-footer {
    flex-shrink: 0;
}

.chat-message-bot .chat-message-content-meta {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    box-sizing: border-box;
}

.chat-message-bot .chat-message-content-meta .chat-message-time-inline {
    flex-shrink: 0;
}

.chat-message-user .chat-message-content.chat-message-delivery--inline .chat-message-content-meta {
    margin-top: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.chat-message-content-meta .chat-message-delivery-footer {
    margin-top: 0;
}

.chat-message-content-meta--typing {
    margin-top: 6px;
}

.chat-message-time-inline--always,
.chat-message-content-meta--typing .chat-message-time-inline {
    opacity: 1 !important;
    max-width: none !important;
    overflow: visible !important;
}

.chat-message-time-inline--always .chat-message-time,
.chat-message-content-meta--typing .chat-message-time-inline .chat-message-time {
    visibility: visible !important;
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    @supports (interpolate-size: allow-keywords) {
        .chat-messages,
        #chatMessages {
            interpolate-size: allow-keywords;
        }
    }

    #chatMessages > .chat-message:not(.chat-message-history-item):has(.chat-message-content:hover) {
        --kinma-chat-meta-hover-reveal-delay: var(--kinma-chat-meta-hover-reveal-wait);
    }

    #chatMessages > .chat-message:not(.chat-message-history-item):not(:has(.chat-message-content:hover)) {
        --kinma-chat-meta-hover-reveal-delay: 0s;
    }

    /*
     * Desktop: Meta-Zeile (Zeit) ein-/ausklappen.
     * Vertikal: max-height auf .chat-message-time-inline.
     * Horizontal: grid-template-columns 0fr → 1fr auf .chat-message-content-meta (zuverlässige Interpolation;
     * max-width: 0 → min(22rem,100%) animiert in vielen Engines nicht sichtbar).
     */
    .chat-message-user:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta)
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        max-height: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
        flex-shrink: 1;
        min-height: 0;
        transition: none;
        pointer-events: none;
    }

    .chat-message.chat-message-user:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        display: grid;
        grid-template-columns: 0fr;
        justify-items: end;
        margin-top: 0;
        min-height: 0;
        min-width: 0;
        max-width: min(22rem, 100%);
        overflow: hidden;
        transition: none;
    }

    .chat-message.chat-message-user:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing)
        > .chat-message-time-inline:not(.chat-message-time-inline--always) {
        min-width: 0;
        overflow: hidden;
    }

    .chat-message-user:not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(
            .chat-message-time-inline:not(.chat-message-time-inline--always)
        ),
    .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(
            .chat-message-time-inline:not(.chat-message-time-inline--always)
        ) {
        position: relative;
    }

    .chat-message-user:not(.chat-message-history-item):has(.chat-message-content:hover)
        .chat-message-content:has(.chat-message-content-meta)
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        max-height: 2.75rem;
        opacity: 1;
        min-height: 0;
        transition:
            max-height var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
        pointer-events: auto;
    }

    .chat-message.chat-message-user:has(.chat-message-content:hover):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: end;
        margin-top: 4px;
        max-width: min(22rem, 100%);
        overflow: hidden;
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content-meta
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        max-height: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
        flex-shrink: 1;
        min-height: 0;
        transition: none;
        pointer-events: none;
    }

    .chat-message.chat-message-bot:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        display: grid;
        grid-template-columns: 0fr;
        justify-items: start;
        margin-top: 0;
        min-height: 0;
        max-width: min(22rem, 100%);
        min-width: 0;
        overflow: hidden;
        transition: none;
    }

    .chat-message.chat-message-bot:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing)
        > .chat-message-time-inline:not(.chat-message-time-inline--always) {
        min-width: 0;
        overflow: hidden;
    }

    .chat-message-bot:not(.chat-message-history-item):has(.chat-message-content:hover)
        .chat-message-content-meta
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        max-height: 2.75rem;
        opacity: 1;
        min-height: 0;
        transition:
            max-height var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
        pointer-events: auto;
    }

    .chat-message.chat-message-bot:has(.chat-message-content:hover):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        margin-top: 4px;
        max-width: min(22rem, 100%);
        overflow: hidden;
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }
}

/*
 * Nach erstem Paint setzt JS data-chat-meta-tx-ready="1" auf #chatMessages:
 * Meta ein-/ausblenden und Bubble-Breite animieren (auch beim Hover-Verlassen),
 * ohne „Schrumpf“ beim ersten Laden.
 * border-radius wird hier nicht animiert: --kinma-protrude-* folgt der Breite pro Frame (JS).
 */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-user:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta)
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        transition:
            max-height var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message.chat-message-user:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content-meta
        .chat-message-time-inline:not(.chat-message-time-inline--always) {
        transition:
            max-height var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            opacity var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message.chat-message-bot:not(:has(.chat-message-content:hover)):not(.chat-message-history-item)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-user:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta) {
        transition:
            padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            gap var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta):not(:has(> .chat-message-quote-stack)),
    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content:has(> .chat-message-quote-stack):has(.chat-message-content-meta) {
        transition:
            padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            gap var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-user:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta)
        .chat-message-content-meta {
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message-bot:not(.chat-message-history-item)
        .chat-message-content:has(.chat-message-content-meta)
        .chat-message-content-meta {
        transition:
            margin-top var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay),
            grid-template-columns var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
                var(--kinma-chat-meta-hover-reveal-delay);
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message.chat-message-user:not(.chat-message-history-item):has(.chat-message-content:hover)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        align-self: flex-end;
        max-width: min(22rem, 100%);
        justify-items: end;
    }

    #chatMessages[data-chat-meta-tx-ready="1"].chat-messages
        .chat-message.chat-message-bot:not(.chat-message-history-item):has(.chat-message-content:hover)
        .chat-message-content:not(:has(.chat-message-delivery-footer)):has(.chat-message-time-inline:not(.chat-message-time-inline--always))
        .chat-message-content-meta:not(.chat-message-content-meta--typing) {
        align-self: flex-start;
        max-width: min(22rem, 100%);
        justify-items: start;
    }
}

@media (max-width: 1024px) {
    /* 5-Minuten-Cluster: Uhrzeit nur auf der letzten Nachricht der Gruppe (cluster-last / cluster-only) */
    .chat-message.chat-message-cluster-first:not(.chat-message-history-item)
        .chat-message-content-meta:not(.chat-message-content-meta--typing):not(:has(.chat-message-delivery-footer)),
    .chat-message.chat-message-cluster-middle:not(.chat-message-history-item)
        .chat-message-content-meta:not(.chat-message-content-meta--typing):not(:has(.chat-message-delivery-footer)) {
        display: none !important;
    }

    .chat-message .chat-message-content-meta .chat-message-time-inline {
        max-width: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    .chat-message .chat-message-content-meta .chat-message-time-inline .chat-message-time {
        opacity: 1 !important;
    }

    .chat-message-user .chat-message-content-meta {
        align-self: flex-end !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    .chat-message-bot .chat-message-content-meta {
        align-self: flex-start !important;
        justify-content: flex-start !important;
        width: auto !important;
    }

    .chat-message-user .chat-message-content-meta .chat-message-time {
        text-align: right;
    }

    .chat-message-bot .chat-message-content-meta .chat-message-time {
        text-align: left;
    }
}

.chat-popup.ai-mode .chat-message-bot .chat-message-content-meta .chat-message-time {
    color: rgba(255, 255, 255, 0.78);
}

.chat-popup.ai-mode .chat-message-user .chat-message-content-meta .chat-message-time {
    color: rgba(26, 26, 26, 0.55);
}

.chat-message-bot .chat-message-content-meta .chat-message-time {
    color: var(--kinma-incoming-fg-muted, rgba(255, 255, 255, 0.72));
}

.chat-message-bot .chat-message-content:has(> .chat-message-quote-stack) > .chat-message-content-meta {
    margin-top: 6px;
    padding-left: 2px;
}

.chat-message-bot .chat-message-content:has(> .chat-message-quote-stack) > .chat-message-content-meta .chat-message-time {
    color: rgba(255, 255, 255, 0.72);
}

/* Outgoing: delivery ticks — 1 text line = beside message; 2+ lines = full-width text, ticks below */
.chat-message-user .chat-message-content {
    position: relative;
    padding: 10px 10px 10px 14px;
    transition:
        padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
}

.chat-message-bot .chat-message-content {
    position: relative;
    padding: 10px 14px 10px 10px;
    transition:
        padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
}

/* Bubble nur so breit wie Inhalt: Meta (Zeit+Häkchen) nicht mit width:100% aufblasen */
/* Kein width/max-width/gap-Transition im Default: sonst „Schrumpfen“ beim ersten Paint (Meta startet eingeklappt). */
.chat-message-user .chat-message-content:has(.chat-message-content-meta) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    transition:
        padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        gap var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
}

.chat-message-bot .chat-message-content:has(.chat-message-content-meta) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    transition:
        padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        gap var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
}

.chat-message-bot .chat-message-content:has(> .chat-message-quote-stack):has(.chat-message-content-meta) {
    gap: 8px;
}

.chat-message-user .chat-message-content:has(.chat-message-content-meta) .chat-message-content-meta {
    transition: none;
}

.chat-message-bot .chat-message-content:has(.chat-message-content-meta) .chat-message-content-meta {
    transition: none;
}

.chat-message-bot:not(.chat-message-history-item) .chat-message-content:has(.chat-message-content-meta):not(:has(> .chat-message-quote-stack)),
.chat-message-bot:not(.chat-message-history-item) .chat-message-content:has(> .chat-message-quote-stack):has(.chat-message-content-meta) {
    transition:
        padding var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        gap var(--kinma-chat-meta-reveal-duration) var(--kinma-chat-meta-reveal-ease)
            var(--kinma-chat-meta-hover-reveal-delay),
        box-shadow 0.22s ease var(--kinma-chat-meta-hover-reveal-delay);
}

.chat-message-user .chat-message-content .chat-message-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Eine Zeile (Pill): Text zum Außenrand der Bubble; mehrzeilig: normal links (start) */
.chat-message-user .chat-message-content.chat-message-pill .chat-message-body {
    text-align: end;
}

.chat-message-user .chat-message-content:not(.chat-message-pill) .chat-message-body {
    text-align: start;
}

.chat-message-user .chat-message-content:has(.chat-message-content-meta) .chat-message-body {
    flex: 0 1 auto;
}

.chat-message-user .chat-message-content.chat-message-pill {
    padding: 8px 12px 8px 16px;
}

.chat-message-bot .chat-message-content.chat-message-pill {
    padding: 8px 16px 8px 12px;
}

@media (max-width: 1024px) {
    /* Outgoing normal messages: delivery tick visually closer to the right edge */
    .chat-message-user .chat-message-content {
        padding-right: 8px;
    }
    .chat-message-user .chat-message-content.chat-message-pill {
        padding-right: 10px;
    }

    /* Incoming: Zeit näher an der linken (Avatar-)Kante */
    .chat-message-bot .chat-message-content {
        padding-left: 8px;
    }
    .chat-message-bot .chat-message-content.chat-message-pill {
        padding-left: 10px;
    }

    /* Reference/reply quote block: more usable width on mobile */
    .chat-message-user .chat-message-outgoing-stack,
    .chat-message-bot .chat-message-incoming-stack {
        max-width: 100%;
    }
    .chat-message:has(.chat-message-quote-stack),
    .chat-message.chat-message-user.chat-message-user-has-outgoing-quote,
    .chat-message.chat-message-bot.chat-message-bot-has-incoming-quote {
        max-width: 96%;
    }
    .chat-message-user .chat-message-outgoing-stack .chat-message-quote-above {
        padding-right: 10px;
    }
    .chat-message-bot .chat-message-incoming-stack .chat-message-quote-above {
        padding-left: 10px;
    }
    .chat-message-user .chat-message-outgoing-stack .chat-message-quote-primary,
    .chat-message-user .chat-message-outgoing-stack .chat-message-quote-context {
        border-top-left-radius: var(--kinma-quote-card-r, 20px) !important;
        border-bottom-left-radius: var(--kinma-quote-card-r, 20px) !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: var(--kinma-quote-card-r, 20px) !important;
    }

    .chat-message-bot .chat-message-incoming-stack .chat-message-quote-primary,
    .chat-message-bot .chat-message-incoming-stack .chat-message-quote-context {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: var(--kinma-quote-card-r, 20px) !important;
        border-top-right-radius: var(--kinma-quote-card-r, 20px) !important;
        border-bottom-right-radius: var(--kinma-quote-card-r, 20px) !important;
    }

}

.chat-message-user .chat-message-content.chat-message-pill:has(.chat-message-content-meta) {
    padding-bottom: 8px;
}

.chat-message-bot .chat-message-content.chat-message-pill:has(.chat-message-content-meta) {
    padding-bottom: 8px;
}

.chat-message-user .chat-message-content.chat-message-pill:has(.chat-message-content-meta) .chat-message-body {
    width: fit-content;
    max-width: 100%;
    align-self: flex-end;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .chat-message.chat-message-user:not(:has(.chat-message-content:hover)) .chat-message-content.chat-message-pill:has(.chat-message-content-meta) {
        padding-bottom: 8px;
        gap: 2px;
    }

    .chat-message.chat-message-bot:not(:has(.chat-message-content:hover)) .chat-message-content.chat-message-pill:has(.chat-message-content-meta) {
        padding-bottom: 8px;
        gap: 2px;
    }
}

.chat-message-edited {
    font-size: 11px;
    color: #6c757d;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: color 0.2s ease;
}

.chat-message-edited:hover {
    color: #1a1a1a;
}

.chat-message-bot .chat-message-content .chat-message-edited {
    color: rgba(255, 255, 255, 0.65);
}

.chat-message-bot .chat-message-content .chat-message-edited:hover {
    color: #ffffff;
}

.chat-message-edit-btn {
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    padding: 0;
    border: none;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.2s ease var(--kinma-chat-meta-hover-reveal-delay),
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    border-radius: 50%;
    color: #6c757d;
    flex-shrink: 0;
    align-self: center;
    order: -1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-message-user:has(.chat-message-content:hover, .chat-message-edit-btn:hover) .chat-message-edit-btn {
    opacity: 1;
}

.chat-message-edit-btn:hover {
    color: #1a1a1a;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.chat-message-edit-btn svg {
    width: 16px;
    height: 16px;
}

.chat-message-editing {
    background: #f8f9fa !important;
}

.chat-message-editing-indicator {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 8px;
}

.chat-message-edit-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 8px;
}

.chat-message-edit-input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.chat-message-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.chat-message-edit-save,
.chat-message-edit-cancel {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-message-edit-save {
    background: #1a1a1a;
    color: #ffffff;
}

.chat-message-edit-save:hover {
    background: #1a1a1a;
}

.chat-message-edit-cancel {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.chat-message-edit-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.chat-message-history-placeholder {
    /* Ensure the placeholder doesn't interfere with message alignment */
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: -2px;
    margin-bottom: 2px;
}

.chat-message-history-load-more {
    text-align: center;
    padding: 8px 12px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #0d6efd;
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat-message-history-load-more:hover {
    text-decoration: underline;
    background: rgba(13, 110, 253, 0.06);
}

.chat-message-history-load-more:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.chat-message-history-load-more[aria-busy='true'] {
    opacity: 0.55;
    pointer-events: none;
}

body.dark-mode .chat-message-history-load-more {
    color: #6ea8fe;
}

body.dark-mode .chat-message-history-load-more:hover {
    background: rgba(110, 168, 254, 0.08);
}

.chat-message-history-item {
    opacity: 0;
    animation: slideUpFromMessage 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: bottom center;
    margin-bottom: -4px;
    /* Inherit all base styles from .chat-message - it already has display: flex, max-width: 75%, etc. */
}

.chat-message-history-item:hover {
    opacity: 0.7 !important;
}

/* Nur frühere Versionen (Bearbeitungs-Historie): vollständig abgerundet — nicht die aktuelle Nachricht */
.chat-message-history-item .chat-message-content {
    border-radius: 9999px !important;
    border-top-left-radius: 9999px !important;
    border-top-right-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

/* Historie: Zeit/Datum neben der Bubble, immer sichtbar */
.chat-message-history-item .chat-message-time-inline {
    opacity: 1 !important;
    max-width: none !important;
    overflow: visible !important;
}

.chat-message-history-item .chat-message-content-meta .chat-message-time {
    visibility: visible !important;
    opacity: 1 !important;
}

.chat-message-history-item .chat-message-time {
    white-space: nowrap;
    font-size: 10px;
}

@keyframes slideUpFromMessage {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 0.45;
        transform: translateY(0) scale(1);
    }
}

.chat-message-history-avatar-spacer {
    /* Match exact size of normal avatar */
    width: var(--chat-message-line-avatar-size, 30px);
    height: var(--chat-message-line-avatar-size, 30px);
    border-radius: 50%;
    flex-shrink: 0;
    /* Make it invisible but maintain layout space */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* Ensure it maintains its size and spacing */
    min-width: var(--chat-message-line-avatar-size, 30px);
    min-height: var(--chat-message-line-avatar-size, 30px);
    margin: 0;
    padding: 0;
}

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

.chat-message-history-error {
    font-size: 12px;
    color: #dc3545;
    text-align: center;
    padding: 12px;
}

.chat-message-history-empty {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    padding: 12px;
    font-style: italic;
}

.chat-input-container {
    padding: 16px 20px;
    border-top: 1px solid #ffffff;
    display: flex;
    align-items: center;
    position: relative;
}

.kinma-chat-ai-file-input--sr-only,
.kinma-chat-composer-file-input--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px 0 0 -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0.01;
    z-index: 0;
}

.chat-popup:not(.ai-mode) .kinma-chat-ai-file-input--sr-only {
    pointer-events: none;
}

.chat-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 28px;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-input-wrapper:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-input-wrapper:focus-within {
    border-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.chat-popup.ai-mode .chat-input-wrapper:focus-within {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.chat-input {
    width: 100%;
    padding: 12px 50px 12px 92px;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    background: transparent;
    color: #1a1a1a;
    transition: all 0.2s ease;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* Never show scrollbar when placeholder is visible */
.chat-input:placeholder-shown {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.chat-input::placeholder {
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input:focus {
    outline: none;
}

/* Kamera links, Datei-Anhang daneben — symmetrischer Abstand zu Mic/Senden rechts */
.chat-camera-inline-btn {
    position: absolute;
    left: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 10;
    pointer-events: auto;
}

.chat-attachment-btn {
    position: absolute;
    left: 48px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 10;
    pointer-events: auto;
}

/* Hide camera + attachment during voice recording */
.chat-input-wrapper.recording .chat-attachment-btn,
.chat-input-wrapper.recording .chat-camera-inline-btn,
#chatInputWrapper.recording .chat-attachment-btn,
#chatInputWrapper.recording .chat-camera-inline-btn {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure camera + attachment visible when not recording */
.chat-input-wrapper:not(.recording) .chat-attachment-btn,
.chat-input-wrapper:not(.recording) .chat-camera-inline-btn,
#chatInputWrapper:not(.recording) .chat-attachment-btn,
#chatInputWrapper:not(.recording) .chat-camera-inline-btn {
    display: flex !important;
    pointer-events: auto !important;
}

.chat-camera-inline-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
    transform: scale(1.05);
}

.chat-camera-inline-btn:active {
    transform: scale(0.95);
}

.chat-attachment-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
    transform: scale(1.05);
}

.chat-attachment-btn:active {
    transform: scale(0.95);
}

.chat-send-btn {
    position: absolute;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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

.chat-send-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: 0 6px 16px rgba(26, 26, 26, 0.14);
}

.chat-send-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* AI Mode Send Button - Gradient */
.chat-popup.ai-mode .chat-send-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.chat-popup.ai-mode .chat-send-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.chat-popup.ai-mode .chat-send-btn:disabled {
    background: #d1d5db;
}

.chat-send-btn.editing {
    background: #28a745;
}

.chat-send-btn.editing:hover {
    background: #218838;
}

/* Voice Recording Button — absolute only when mic is inside .chat-input-wrapper (legacy) */
.chat-voice-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    z-index: 1;
}

.chat-input-wrapper > .chat-voice-btn {
    position: absolute;
    right: 6px;
}

.chat-voice-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
    transform: scale(1.05);
}

.chat-voice-btn:active {
    transform: scale(0.95);
}

/* When cancel icon is visible (recording mode), make button red */
.chat-voice-btn .voice-cancel-icon {
    display: none;
}

.chat-voice-btn .voice-cancel-icon[style*="display: block"],
.chat-voice-btn:has(.voice-cancel-icon[style*="display: block"]) {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.1) !important;
}

.chat-voice-btn:has(.voice-cancel-icon[style*="display: block"]):hover {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #c82333 !important;
}

/* Fallback for browsers that don't support :has() */
.chat-voice-btn.recording-cancel {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.1) !important;
}

.chat-voice-btn.recording-cancel:hover {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #c82333 !important;
}

.chat-edit-cancel-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-edit-cancel-btn:hover {
    background: #e9ecef;
    color: #1a1a1a;
    border-color: #adb5bd;
}

.chat-message-being-edited {
    opacity: 0.6;
}

.chat-message-being-edited .chat-message-content {
    position: relative;
}

.chat-message-being-edited .chat-message-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(40, 167, 69, 0.1);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

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

/* Feedback Modal */
.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.feedback-modal.active {
    display: flex;
}

.feedback-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.feedback-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 540px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.feedback-modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feedback-modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.feedback-modal-close {
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.feedback-modal-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.feedback-modal-body {
    padding: 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Custom scrollbar for feedback modal */
.feedback-modal-body::-webkit-scrollbar {
    width: 8px;
}

.feedback-modal-body::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.feedback-modal-body::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 4px;
}

.feedback-modal-body::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

.feedback-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-label {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
}

.rating-stars {
    display: flex;
    gap: 8px;
}

.rating-star {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
    color: #dee2e6;
}

.rating-star:hover {
    transform: scale(1.1);
}

.rating-star.active {
    color: #ffc107;
}

.rating-star svg {
    display: block;
}

.feedback-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}

.feedback-textarea:focus {
    border-color: #1a1a1a;
}

.feedback-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
}

.feedback-btn-cancel,
.feedback-btn-submit {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.feedback-btn-cancel {
    background: #f8f9fa;
    color: #6c757d;
}

.feedback-btn-cancel:hover {
    background: #e9ecef;
    color: #1a1a1a;
}

.feedback-btn-submit {
    background: #1a1a1a;
    color: #ffffff;
}

.feedback-btn-submit:hover {
    background: #1a1a1a;
}

/* Feedback Page Styles */
.feedback-page {
    overflow: hidden;
}

.feedback-fullscreen {
    position: fixed;
    top: 0;
    left: 80px;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Progress Bar */
.feedback-progress-bar {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    position: relative;
}

.feedback-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1a1a1a 0%, #1a1a1a 100%);
    transition: width 0.2s ease;
    width: 0%;
}

/* Step Indicators */
.feedback-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feedback-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    opacity: 0.4;
    transition: all 0.15s ease;
}

.feedback-step.active {
    opacity: 1;
}

.feedback-step.completed {
    opacity: 0.7;
}

.feedback-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    color: #6c757d;
    transition: all 0.3s ease;
}

.feedback-step.active .feedback-step-number {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
    transform: scale(1.1);
}

.feedback-step.completed .feedback-step-number {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.feedback-step-label {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    transition: color 0.15s ease;
}

.feedback-step.active .feedback-step-label {
    color: #1a1a1a;
}

/* Content Wrapper */
.feedback-content-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

.feedback-step-content {
    display: none;
    width: 100%;
    max-width: 800px;
    animation: fadeIn 0.2s ease;
}

.feedback-step-content.active {
    display: block;
}

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

.feedback-step-inner {
    text-align: center;
}

.feedback-title {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.feedback-subtitle {
    font-size: 20px;
    color: #6c757d;
    margin: 0 0 60px 0;
}

/* Large Rating Stars */
.rating-stars-large {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
}

.rating-star-large {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 16px;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
}

.rating-star-large:hover {
    transform: translateY(-10px) scale(1.1);
    background: #f8f9fa;
}

.rating-star-large.selected {
    transform: scale(1.15);
}

.rating-star-large svg {
    display: block;
}

.rating-label {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rating-star-large:hover .rating-label {
    opacity: 1;
}

/* Large Textarea */
.feedback-textarea-large {
    width: 100%;
    max-width: 700px;
    padding: 24px;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    font-size: 18px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.15s ease;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feedback-textarea-large:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feedback-textarea-large::placeholder {
    color: #9ca3af;
}

/* Navigation Buttons */
.feedback-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    background: #ffffff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.feedback-nav-btn {
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feedback-prev-btn {
    background: #f8f9fa;
    color: #1a1a1a;
}

.feedback-prev-btn:hover {
    background: #e9ecef;
    transform: translateX(-4px);
}

.feedback-next-btn,
.feedback-submit-btn {
    background: #1a1a1a;
    color: #ffffff;
}

.feedback-next-btn:hover,
.feedback-submit-btn:hover {
    background: #1a1a1a;
    transform: translateX(4px);
}

.feedback-submit-btn:hover {
    transform: scale(1.05);
}

/* Success Screen */
.feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    animation: fadeIn 0.2s ease;
}

.feedback-success-icon {
    margin-bottom: 32px;
    animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.feedback-success-title {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px 0;
}

.feedback-success-text {
    font-size: 20px;
    color: #6c757d;
    margin: 0 0 40px 0;
    max-width: 600px;
}

.feedback-success-btn {
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    transition: all 0.3s ease;
}

.feedback-success-btn:hover {
    background: #1a1a1a;
    transform: scale(1.05);
}

/* Highlight Button */
.feedback-highlight-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    background: #f8f9fa;
    color: #1a1a1a;
    border: 2px dashed #dee2e6;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.feedback-highlight-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

/* Feedback Page Selector */
.feedback-page-selector {
    margin-bottom: 24px;
}

.feedback-page-selector label {
    display: block;
    margin-bottom: 12px;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 15px;
}

.feedback-page-dropdown {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 15px;
    border: 2px solid #e9ecef;
    background: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.feedback-page-dropdown:hover {
    border-color: #1a1a1a;
}

.feedback-page-dropdown:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

/* Feedback Mode Banner – Desktop & Mobile: dunkle Island, vollständig gerundet, Buttons in einer Zeile */
.feedback-mode-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    padding: 14px 18px;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid #1a1a1a;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90%;
    animation: slideDown 0.3s ease;
    color: #ffffff;
}
.feedback-mode-content {
    color: #ffffff;
}
.feedback-mode-content svg {
    display: none;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

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

.feedback-mode-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.feedback-mode-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.feedback-mode-highlight-btn {
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: #10b981;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.feedback-mode-highlight-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.feedback-mode-skip-btn {
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.feedback-mode-skip-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.feedback-mode-cancel-btn {
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.9);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.feedback-mode-cancel-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Mobile: Feedback-Modus-Banner – kompakte dunkle Island, alles sauber ausgerichtet */
@media (max-width: 1024px) {
    .feedback-mode-banner {
        top: calc(var(--kinma-mobile-viewport-inset-band, 80px) + env(safe-area-inset-top, 0) + 12px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border-radius: 9999px !important;
        background: #1a1a1a !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #1a1a1a !important;
        color: #ffffff !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px 12px !important;
    }
    .feedback-mode-banner .feedback-mode-content,
    .feedback-mode-banner .feedback-mode-content span {
        color: #ffffff !important;
    }
    .feedback-mode-content {
        font-size: 12px !important;
        line-height: 1.35 !important;
        flex: 1 1 100% !important;
        justify-content: center;
        text-align: center;
        color: #ffffff !important;
        order: -1 !important;
    }
    .feedback-mode-content svg {
        display: none !important;
    }
    .feedback-mode-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
    }
    .feedback-mode-highlight-btn {
        background: #10b981 !important;
        color: #fff !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }
    .feedback-mode-highlight-btn:hover {
        background: #059669 !important;
        color: #fff !important;
    }
    .feedback-mode-skip-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }
    .feedback-mode-skip-btn:hover {
        background: rgba(255, 255, 255, 0.28) !important;
        color: #fff !important;
    }
    .feedback-mode-cancel-btn {
        background: rgba(239, 68, 68, 0.9) !important;
        color: #fff !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        border-radius: 9999px !important;
    }
    .feedback-mode-cancel-btn:hover {
        background: #ef4444 !important;
        color: #fff !important;
    }
    /* Overlay-Header beim Markieren: gleiche kompakte Island-Optik */
    .feedback-highlight-header {
        top: calc(var(--kinma-mobile-viewport-inset-band, 80px) + env(safe-area-inset-top, 0) + 12px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 12px 14px 14px !important;
        border-radius: 20px !important;
        background: #1a1a1a !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #1a1a1a !important;
        color: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .feedback-highlight-instructions {
        font-size: 12px !important;
        line-height: 1.4 !important;
        gap: 8px !important;
        justify-content: center;
        text-align: center;
        color: #ffffff !important;
        padding: 0 4px !important;
    }
    .feedback-highlight-instructions span {
        color: #ffffff !important;
    }
    .feedback-highlight-instructions svg {
        display: none !important;
    }
    .feedback-highlight-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .feedback-highlight-skip {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        border-radius: 9999px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }
    .feedback-highlight-skip:hover {
        background: rgba(255, 255, 255, 0.28) !important;
        color: #ffffff !important;
    }
    .feedback-highlight-cancel {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        border-radius: 9999px !important;
        color: #ffffff !important;
        background: rgba(239, 68, 68, 0.9) !important;
    }
    .feedback-highlight-cancel:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
}

/* Highlight Overlay */
.feedback-highlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* No background on main overlay - individual sections provide it */
    z-index: 10000;
    display: none;
    cursor: crosshair;
    pointer-events: auto; /* Enable pointer events for dragging */
}

/* Individual overlay sections that darken areas around selection */
.feedback-highlight-overlay-top,
.feedback-highlight-overlay-bottom,
.feedback-highlight-overlay-left,
.feedback-highlight-overlay-right {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Don't block interactions - just visual */
    z-index: 10000;
}

.feedback-highlight-overlay-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.feedback-highlight-overlay-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
}

.feedback-highlight-overlay-left {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}

.feedback-highlight-overlay-right {
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
}

.feedback-highlight-overlay.active {
    display: block;
    touch-action: none;
}

.feedback-highlight-header {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    padding: 14px 18px;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10001;
    pointer-events: all;
    cursor: default;
    color: #ffffff;
}

.feedback-highlight-instructions {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.feedback-highlight-instructions svg {
    display: none;
}

.feedback-highlight-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback-highlight-skip {
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.feedback-highlight-skip:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.feedback-highlight-cancel {
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.9);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.feedback-highlight-cancel:hover {
    background: #ef4444;
}

.feedback-highlight-selection {
    position: absolute;
    border: 3px dashed #fbbf24;
    background: transparent; /* Transparent center so user can see what they're screenshotting */
    pointer-events: none;
    display: none;
    z-index: 10000;
    /* Add a subtle shadow to make the border more visible */
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3);
}

/* Highlights List */
.feedback-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    max-height: 200px;
    overflow-y: auto;
}

.feedback-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.feedback-highlight-item:hover {
    background: #e9ecef;
}

.feedback-highlight-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px solid #28a745;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.feedback-highlight-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.feedback-highlight-time {
    font-size: 12px;
    color: #6c757d;
}

.feedback-highlight-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feedback-highlight-remove:hover {
    background: #fee2e2;
}

/* Toast Notification */
.feedback-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10002;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    max-width: 400px;
}

.feedback-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.feedback-toast svg {
    flex-shrink: 0;
}

.feedback-toast span {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.5;
}

/* Hide feedback button on feedback page - already defined above */

.feedback-highlight-fab {
    position: relative;
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    will-change: transform;
    z-index: 1001; /* Ensure it's above nav-island */
}

/* Hide duplicate feedback buttons outside left-nav-cluster */
.feedback-highlight-fab:not(.left-nav-cluster .feedback-highlight-fab) {
    display: none;
}

.feedback-highlight-fab:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(26, 26, 26, 0.05);
}

.feedback-highlight-fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    color: #1a1a1a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.feedback-highlight-fab-btn:hover {
    background: var(--hover-bg-color, #f8f9fa);
    color: var(--hover-icon-color, #1a1a1a);
}

.feedback-highlight-fab-btn.active {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

.feedback-highlight-fab-btn.active:hover {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

.feedback-highlight-fab-btn svg {
    transition: transform 0.2s ease;
    stroke-width: 1.5;
}

.feedback-highlight-fab-btn:hover svg {
    transform: scale(1.05);
}

/* Add label to feedback button */
/* Feedback and Election buttons use unified nav-label style */
.feedback-highlight-fab-btn .nav-label,
.election-vote-fab-btn .nav-label {
    /* Inherits base .nav-label styles */
}

.feedback-highlight-fab-btn:hover .nav-label,
.election-vote-fab-btn:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.feedback-highlight-menu {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px) scale(0.95);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform-origin: left center;
}

/* Election Vote FAB - Similar to feedback FAB */
.election-vote-fab {
    position: relative;
    background: #ffffff;
    border-radius: 9999px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    will-change: transform;
    z-index: 1001;
}

.election-vote-fab:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(26, 26, 26, 0.05);
}

.election-vote-fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    color: #1a1a1a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.election-vote-fab-btn svg,
.utility-btn.election-btn svg {
    display: block;
    margin: 0 auto;
    stroke-width: 1.5;
}

.election-vote-fab-btn .election-icon-default,
.utility-btn.election-btn .election-icon-default {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;
}

.election-icon-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.election-vote-fab-btn:hover {
    background: var(--hover-bg-color, #f8f9fa);
    color: var(--hover-icon-color, #1a1a1a);
}

/* Election button uses unified nav-label style */
.election-vote-fab-btn:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Active state - red pulsing notification */
.election-vote-fab-btn.election-active {
    background: #dc3545;
    color: #ffffff;
    animation: electionPulse 2s ease-in-out infinite;
}

.election-vote-fab-btn.election-active svg {
    color: #ffffff;
}

.election-vote-fab-btn.election-active:hover {
    background: #c82333;
}

/* Leadership election - gold background */
.election-vote-fab-btn.election-active.election-leadership {
    background: #f4d03f;
    animation: electionPulseGold 2s ease-in-out infinite;
}

.election-vote-fab-btn.election-active.election-leadership:hover {
    background: #f1c40f;
}

@keyframes electionPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
}

@keyframes electionPulseGold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 208, 63, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(244, 208, 63, 0);
    }
}

/* Crown icon - centered */
.election-icon-crown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.election-icon-crown svg {
    display: block;
    margin: 0 auto;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(2px); /* Adjust to center vertically - move down slightly */
}

.election-vote-menu {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px) scale(0.95);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px;
    min-width: 320px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform-origin: left center;
    z-index: 1002;
}

.election-vote-menu[style*="display: block"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.election-menu-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.election-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.election-menu-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Election menu content in large menu */
.nav-large-menu-overlay#nav-large-menu-elections .election-menu-content {
    gap: 24px;
    padding: 0;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-menu-active-card {
    padding: 24px;
    margin-bottom: 0;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-menu-item {
    padding: 20px 24px;
    font-size: 16px;
    border-radius: 12px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view {
    padding: 0;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view-header h3 {
    font-size: 24px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view-info {
    padding: 20px;
    border-radius: 12px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view-form {
    gap: 24px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-not-eligible-msg {
    padding: 16px 20px;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.45;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-participation {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #6b7280;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-view-form h4 {
    font-size: 18px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-candidate-option {
    padding: 16px;
    border-radius: 12px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-candidate-info strong {
    font-size: 16px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-candidate-info small {
    font-size: 14px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-vote-submit-btn {
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 12px;
}

.nav-large-menu-overlay#nav-large-menu-elections .election-menu-empty {
    padding: 48px;
    font-size: 16px;
}

.election-menu-active-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.election-menu-active-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.election-type-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.election-menu-active-info {
    flex: 1;
    min-width: 0;
}

.election-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    word-wrap: break-word;
}

.election-type {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.election-end {
    margin: 0;
    font-size: 12px;
    color: #868e96;
}

.election-vote-action-btn {
    flex-shrink: 0;
    width: 48px;
    height: 64px;
    padding: 0;
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.election-vote-action-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.election-vote-action-btn:active {
    transform: translateY(0);
}

.election-voted-badge {
    flex-shrink: 0;
    padding: 12px 20px;
    background: #d4edda;
    color: #155724;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.election-voted-badge svg {
    flex-shrink: 0;
}

.election-menu-active-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.election-stop-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #dc3545;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.election-stop-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

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

.election-stop-btn svg {
    width: 16px;
    height: 16px;
}

/* Election Vote View */
.election-vote-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.election-vote-view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.election-back-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.election-back-btn:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.election-vote-view-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
}

.election-vote-view-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.election-vote-type {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.election-vote-meta {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

.election-vote-view-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.election-vote-view-form h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.election-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 8px 0;
}

.election-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: all 0.2s;
}

.election-menu-item:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.election-menu-item-primary {
    background: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

.election-menu-item-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.election-menu-item-vote {
    background: #28a745;
    color: #ffffff;
    border-color: #28a745;
}

.election-menu-item-vote:hover {
    background: #218838;
    border-color: #218838;
}

.election-menu-empty {
    text-align: center;
    padding: 24px;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Election Vote Form in Menu */
.election-menu-vote-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.election-menu-voted {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #d4edda;
    border-radius: 6px;
    color: #155724;
    margin-top: 12px;
}

.election-menu-voted svg {
    flex-shrink: 0;
}

.election-vote-candidates {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.election-candidate-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.election-candidate-option:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.election-candidate-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.election-candidate-option input[type="radio"]:checked + .election-candidate-info {
    color: #007bff;
}

.election-candidate-option:has(input[type="radio"]:checked) {
    border-color: #007bff;
    background: #e7f3ff;
}

.election-candidate-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.election-candidate-info strong {
    font-size: 14px;
    color: #1a1a1a;
}

.election-candidate-info small {
    font-size: 12px;
    color: #6c757d;
}

.election-vote-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.election-vote-submit-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.election-vote-submit-btn:active {
    transform: translateY(0);
}

.feedback-highlight-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.feedback-highlight-menu-item {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.feedback-highlight-menu-item:hover {
    background: #f8f9fa;
}

.feedback-highlight-menu-item svg {
    stroke-width: 1.5;
}

.feedback-highlight-menu-item.positive:hover {
    background: #d1fae5;
    color: #065f46;
}

.feedback-highlight-menu-item.positive:hover svg {
    stroke: #065f46;
}

.feedback-highlight-menu-item.improvement:hover {
    background: #fef3c7;
    color: #92400e;
}

.feedback-highlight-menu-item.improvement:hover svg {
    stroke: #92400e;
}

.feedback-highlight-menu-item.bug:hover {
    background: #fee2e2;
    color: #991b1b;
}

.feedback-highlight-menu-item.bug:hover svg {
    stroke: #991b1b;
}

.feedback-highlight-menu-item.feature:hover {
    background: #dbeafe;
    color: #1e40af;
}

.feedback-highlight-menu-item.feature:hover svg {
    stroke: #1e40af;
}

.feedback-highlight-menu-item.question:hover {
    background: #e0e7ff;
    color: #3730a3;
}

.feedback-highlight-menu-item.question:hover svg {
    stroke: #3730a3;
}

.feedback-highlight-menu-item.general:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.feedback-highlight-menu-item.general:hover svg {
    stroke: #1f2937;
}

.feedback-highlight-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* Feedback Comment Popup - Fullscreen */
.feedback-comment-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
}

.feedback-comment-modal.active {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.feedback-comment-overlay {
    display: none;
}

.feedback-comment-content {
    position: relative;
    background: #ffffff;
    width: 100%;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    animation: feedbackModalFullscreenIn 0.3s ease;
    overflow: hidden;
}

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

@keyframes popupSlideIn {
    from {
        transform: scale(0.92) translateY(30px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.feedback-comment-header {
    padding: 28px 32px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.feedback-comment-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.feedback-comment-close {
    width: 40px;
    height: 40px;
    border: none;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
}

.feedback-comment-close:hover {
    background: #f1f5f9;
    color: #1a1a1a;
    transform: rotate(90deg);
}

.feedback-comment-body {
    padding: 16px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fafbfc;
    min-height: 0;
}

.feedback-comment-textarea {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    resize: vertical;
    min-height: 100px;
    max-height: 200px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1a1a1a;
    line-height: 1.6;
}

.feedback-comment-textarea::placeholder {
    color: #94a3b8;
}

.feedback-comment-textarea:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.05);
}

.feedback-comment-actions {
    padding: 20px 32px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: #ffffff;
}

.feedback-comment-cancel-btn,
.feedback-comment-submit-btn {
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.feedback-comment-cancel-btn {
    background: #f8fafc;
    color: #64748b;
}

.feedback-comment-cancel-btn:hover {
    background: #f1f5f9;
    color: #1a1a1a;
    transform: translateY(-1px);
}

.feedback-comment-submit-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.2);
}

.feedback-comment-submit-btn:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.3);
    transform: translateY(-2px);
}

.feedback-comment-submit-btn svg {
    width: 18px;
    height: 18px;
}

/* Annotation Editor - Modern Design */
.feedback-annotation-editor {
    display: flex;
    gap: 16px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    flex: 1;
    min-height: 0;
}

.annotation-tools-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    align-self: flex-start;
}

.annotation-tool-btn {
    width: 52px;
    height: 52px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
    position: relative;
}

.annotation-tool-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.annotation-tool-btn:hover {
    background: #f1f5f9;
    color: #1a1a1a;
    transform: scale(1.05);
}

.annotation-tool-btn.active {
    background: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.3);
}

.annotation-tool-btn.active::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: #1a1a1a;
    border-radius: 2px;
}

.annotation-tools-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 4px;
}

.annotation-canvas-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

.annotation-canvas-container {
    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 2px solid #e2e8f0;
    transition: border-color 0.2s ease;
}

.annotation-canvas-container:hover {
    border-color: #cbd5e1;
}

.annotation-base-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    user-select: none;
    border-radius: 8px;
    object-fit: contain;
}

.annotation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

.annotation-canvas.eraser {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4" y1="4" x2="20" y2="20"/></svg>') 12 12, auto;
}

.annotation-canvas.picker {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M2 22l6-2 12-12a3 3 0 0 0 0-4.24l-.76-.76a3 3 0 0 0-4.24 0L3 15l-1 6z"/></svg>') 0 24, auto;
}

/* Action buttons - Modern floating style */
.annotation-step-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.annotation-skip-btn,
.annotation-continue-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.annotation-skip-btn {
    background: #ffffff;
    color: #64748b;
}

.annotation-skip-btn:hover {
    background: #f8fafc;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.annotation-continue-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    color: #ffffff;
}

.annotation-continue-btn:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.3);
    transform: translateY(-2px);
}

.annotation-continue-btn svg {
    width: 18px;
    height: 18px;
}

/* Mobile: Weiter/Überspringen und Abbrechen nur in der Bottom-Nav, nicht im Modal */
@media (max-width: 1024px) {
    .feedback-comment-modal .annotation-step-actions {
        display: none !important;
    }
    .feedback-comment-modal .feedback-comment-cancel-btn {
        display: none !important;
    }
}

/* Farbauswahl als Insel – ein-/ausklappbar */
.annotation-color-island {
    position: relative;
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.annotation-color-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #64748b;
}

.annotation-color-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.annotation-color-toggle-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.annotation-color-toggle-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.annotation-color-island.is-collapsed .annotation-color-toggle-chevron {
    transform: rotate(-90deg);
}

.annotation-color-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    align-items: center;
    transition: opacity 0.25s ease, transform 0.25s ease, margin 0.25s ease;
    overflow: hidden;
}

.annotation-color-island.is-collapsed .annotation-color-sidebar {
    opacity: 0;
    transform: scale(0.95);
    margin-left: 0;
    padding: 0;
    width: 0;
    min-width: 0;
    pointer-events: none;
    visibility: hidden;
}

.annotation-color-wheel-container {
    position: relative;
    width: 200px;
    height: 200px;
}

.annotation-color-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: crosshair;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease;
}

.annotation-color-wheel:hover {
    transform: scale(1.02);
}

.annotation-color-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid #f1f5f9;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.annotation-current-color-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.annotation-current-color {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.annotation-current-color:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.annotation-color-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    text-align: center;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    background: #f8fafc;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.annotation-color-input:focus {
    outline: none;
    border-color: #1a1a1a;
    background: #ffffff;
}

/* Comment Form (Step 2) - Clean design */
.feedback-comment-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feedback-comment-preview-clickable {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
}

.feedback-comment-preview-clickable:hover {
    transform: translateY(-2px);
    border-color: #1a1a1a;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.feedback-comment-preview-clickable::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feedback-comment-preview-clickable:hover::before {
    opacity: 1;
}

.feedback-comment-preview-clickable::after {
    content: '✏️ Zum Bearbeiten klicken';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feedback-comment-preview-clickable:hover::after {
    opacity: 1;
}

.feedback-comment-preview-clickable img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
}

.feedback-comment-preview {
    margin-bottom: 20px;
}

.feedback-preview-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.feedback-preview-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-preview-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.feedback-preview-box span {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.feedback-comment-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    max-height: 150px;
    transition: border-color 0.2s ease;
}

.feedback-comment-textarea:focus {
    outline: none;
    border-color: #1a1a1a;
}

.feedback-comment-actions {
    padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.feedback-comment-cancel-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    background: #f8f9fa;
    color: #1a1a1a;
    border: 2px solid #e9ecef;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-comment-cancel-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.feedback-comment-submit-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feedback-comment-submit-btn:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Feedback Toast */
.feedback-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10002;
    opacity: 0;
    transition: all 0.3s ease;
}

.feedback-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.feedback-toast span {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

/* Responsive */
.nav-item {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-item.nav-item--disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    color: #94a3b8;
    background: transparent;
}
.nav-item.nav-item--disabled:hover {
    background: transparent;
    color: #94a3b8;
}
.nav-item.nav-item--disabled svg {
    stroke: #94a3b8;
}

/* Ensure all nav island icons have equally thin stroke and same stroke color */
.nav-item svg,
.nav-island svg,
.feedback-highlight-fab-btn svg,
.election-vote-fab-btn svg,
.utility-btn svg,
.nav-submenu-icon svg,
.quick-access-item svg,
.feedback-highlight-menu-item svg {
    stroke-width: 2;
    stroke: #1a1a1a;
}

/* Active/selected states - white stroke on dark background */
.nav-item.active svg,
.nav-item.has-notifications svg,
.utility-btn.active svg,
.feedback-highlight-fab-btn.active svg,
.election-vote-fab-btn.election-active svg {
    stroke: #ffffff;
}

.nav-item:hover {
    background: var(--hover-bg-color, #f8f9fa);
    color: var(--hover-icon-color, #1a1a1a);
}

.nav-item.active {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

/* Notification Styles */
.nav-item.has-notifications {
    background: #ef4444;
    color: #ffffff;
    animation: pulse-red 2s infinite;
}

.nav-item.has-notifications:hover {
    background: #dc2626;
    color: #ffffff;
}

.nav-item.has-notifications.active {
    background: #b91c1c;
    color: #ffffff;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.nav-item {
    position: relative;
}

.notification-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border: 2px solid #ffffff;
}

/* Unified Nav Label - Professional Base Style */
.nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    white-space: nowrap;
    background: #ffffff;
    color: #1a1a1a;
    padding: 10px 14px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #1a1a1a;
    line-height: 1.4;
    margin: 0;
}

/* Ensure nav-item-wrapper provides positioning context */
.nav-item-wrapper {
    position: relative;
}

/* Ensure nav-label positioning works in all islands */
.nav-island .nav-label,
.chat-nav-island .nav-label,
.admin-nav-island .nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
}

.nav-island .nav-item:hover .nav-label,
.chat-nav-island .nav-item:hover .nav-label,
.admin-nav-island .nav-item:hover .nav-label {
    transform: translateY(-50%) translateX(0) !important;
    top: 50% !important;
    left: calc(100% + 12px) !important;
}

/* Arrow pointer - removed */
.nav-label::before {
    display: none;
}

/* Hover state - unified */
.nav-item:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0) !important;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    letter-spacing: 0.01em;
    top: 50% !important;
    left: calc(100% + 12px) !important;
}

/* Active/Selected state - unified */
.nav-item.active:hover .nav-label {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

.nav-item.active:hover .nav-label::before {
    border-right-color: #1a1a1a;
}

/* AI Button Label - Animated Gradient Effect (matching icon logic) */
@keyframes aiLabelGradientMove {
    0% { background-position: 0% 50%; }
    20% { background-position: 100% 50%; }
    40% { background-position: 200% 50%; }
    60% { background-position: 100% 50%; }
    80% { background-position: 0% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes aiLabelHueRotate {
    0% { filter: hue-rotate(0deg); }
    20% { filter: hue-rotate(60deg); }
    40% { filter: hue-rotate(120deg); }
    60% { filter: hue-rotate(180deg); }
    80% { filter: hue-rotate(240deg); }
    100% { filter: hue-rotate(300deg); }
}

/* Unselected - White background with animated outline and text */
.nav-item.ai-chat-btn:not(.active) .nav-label {
    background: #ffffff !important;
    color: #6366f1 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #6366f1 !important;
    animation: aiLabelTextColor 3s ease infinite, aiLabelBorderColor 3s ease infinite !important;
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-8px) !important;
    opacity: 0 !important;
    z-index: 1001;
}

/* Selected - Filled gradient background with white text */
.nav-item.ai-chat-btn.active .nav-label {
    background: linear-gradient(
        90deg,
        #6366f1 0%,
        #8b5cf6 20%,
        #ec4899 40%,
        #fb923c 60%,
        #22c55e 80%,
        #3b82f6 100%,
        #6366f1 100%
    ) !important;
    background-size: 300% 100% !important;
    animation: aiLabelGradientMove 3s ease infinite, aiLabelHueRotate 3s ease infinite !important;
    color: #ffffff !important;
    border-color: transparent !important;
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-8px) !important;
    opacity: 0 !important;
    z-index: 1001;
}

.nav-item.ai-chat-btn:hover .nav-label {
    animation: aiLabelTextColor 1.5s ease infinite, aiLabelBorderColor 1.5s ease infinite !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4), 0 0 24px rgba(139, 92, 246, 0.3), 0 0 32px rgba(236, 72, 153, 0.2) !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

.nav-item.ai-chat-btn.active:hover .nav-label {
    animation: aiLabelGradientMove 1.5s ease infinite, aiLabelHueRotate 1.5s ease infinite !important;
}

@keyframes aiLabelTextColor {
    0% { color: #6366f1; }
    20% { color: #ec4899; }
    40% { color: #22c55e; }
    60% { color: #3b82f6; }
    80% { color: #8b5cf6; }
    100% { color: #6366f1; }
}

@keyframes aiLabelBorderColor {
    0% { 
        border-color: #6366f1;
    }
    20% { 
        border-color: #ec4899;
    }
    40% { 
        border-color: #22c55e;
    }
    60% { 
        border-color: #3b82f6;
    }
    80% { 
        border-color: #8b5cf6;
    }
    100% { 
        border-color: #6366f1;
    }
}

@keyframes aiLabelArrowColorSync {
    0% { 
        border-right-color: #6366f1;
    }
    20% { 
        border-right-color: #ec4899;
    }
    40% { 
        border-right-color: #22c55e;
    }
    60% { 
        border-right-color: #3b82f6;
    }
    80% { 
        border-right-color: #8b5cf6;
    }
    100% { 
        border-right-color: #6366f1;
    }
}

/* AI Button Label - Arrow pointer removed */
.nav-item.ai-chat-btn .nav-label::before {
    display: none !important;
}

.nav-item.active:hover .nav-label::before {
    display: none;
}

/* Desktop: show labels under icons (no hover needed) */
@media (min-width: 1025px) {
    .left-nav-cluster .nav-item,
    .left-nav-cluster .utility-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: auto !important;
        min-height: 3em;
        width: 3em;
        max-width: 100%;
        padding: 2px 1px;
        box-sizing: border-box;
    }

    .left-nav-cluster .nav-item > svg,
    .left-nav-cluster .utility-btn > svg {
        flex-shrink: 0;
    }

    .left-nav-cluster .nav-label,
    .left-nav-cluster .utility-label {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 1px !important;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        font-size: 8px;
        line-height: 1.15;
        color: currentColor;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .left-nav-cluster .nav-label .island-hover-label-track,
    .left-nav-cluster .utility-label .island-hover-label-track {
        display: inline-block;
        white-space: nowrap;
    }

    .left-nav-cluster .nav-label.is-marquee .island-hover-label-track,
    .left-nav-cluster .utility-label.is-marquee .island-hover-label-track {
        animation: island-hover-label-marquee 6s linear infinite;
    }

    /*
     * KI-Button: .nav-item.ai-chat-btn .nav-label ist spezifischer als .left-nav-cluster .nav-label
     * und hätte sonst weiter opacity:0 + position:absolute (nur Side-Tooltip) — auf Desktop wie Chat darunter.
     */
    .left-nav-cluster .nav-item.ai-chat-btn .nav-label,
    .left-nav-cluster .nav-item.ai-chat-btn:not(.active) .nav-label,
    .left-nav-cluster .nav-item.ai-chat-btn.active .nav-label {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        animation: none !important;
        background: transparent !important;
        color: currentColor !important;
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
    }

    .left-nav-cluster .nav-item.ai-chat-btn:hover .nav-label,
    .left-nav-cluster .nav-item.ai-chat-btn.active:hover .nav-label {
        animation: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Kein „KINMA“-Text-Pill neben dem Logo (nur Kreis-Button) */
    .left-nav-cluster .kinma-logo-btn .nav-label,
    .left-nav-cluster .kinma-logo-btn:hover .nav-label,
    .left-nav-cluster .kinma-logo-btn:focus-visible .nav-label {
        display: none !important;
    }

    .left-nav-cluster .nav-island:has(.nav-extras-hover-zone) {
        overflow: visible !important;
    }

    .left-nav-cluster .nav-extras-hover-zone {
        --nav-extras-flyout-gap: 12px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        z-index: 2601;
        overflow: visible;
        pointer-events: none;
    }

    .left-nav-cluster .nav-extras-btn-wrapper {
        position: relative;
        max-height: none;
        overflow: visible;
        opacity: 1;
        pointer-events: none;
        margin: 0;
        transition: none !important;
    }

    .left-nav-cluster .nav-extras-btn-wrapper .nav-extras-btn {
        pointer-events: auto;
    }

    .left-nav-cluster .nav-extras-hover-zone--open .nav-extras-btn-wrapper::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        width: var(--nav-extras-flyout-gap);
        height: 2.1em;
        transform: translateY(-50%);
        pointer-events: auto;
        z-index: 2601;
    }

    body.nav-extras-expanded .left-nav-cluster .nav-extras-btn-wrapper,
    body.nav-extras-expanded .left-nav-cluster .nav-extras-btn {
        max-height: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        margin: 0;
    }

    .left-nav-cluster .nav-extras-btn-glyphs {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.35em;
        height: 1em;
        flex-shrink: 0;
    }

    .left-nav-cluster .nav-extras-glyph {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1.35em;
        height: 1em;
        margin: 0;
        transform: translate(-50%, -50%);
        transition: opacity 0.16s ease;
    }

    .left-nav-cluster .nav-extras-glyph--arrow {
        opacity: 0;
    }

    .left-nav-cluster .nav-extras-btn:hover .nav-extras-glyph--dots,
    .left-nav-cluster .nav-extras-hover-zone--open .nav-extras-glyph--dots {
        opacity: 0;
    }

    .left-nav-cluster .nav-extras-btn:hover .nav-extras-glyph--arrow,
    .left-nav-cluster .nav-extras-hover-zone--open .nav-extras-glyph--arrow {
        opacity: 1;
    }

    .left-nav-cluster button.nav-item.nav-extras-btn {
        width: 3.4em !important;
        height: 2.1em !important;
        min-height: 2.1em !important;
        max-height: 2.1em !important;
        min-width: 0 !important;
        max-width: 3.4em !important;
        border-radius: 9999px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.3em 0.5em !important;
        gap: 0 !important;
        box-sizing: border-box;
    }

    .left-nav-cluster .nav-extras-btn .nav-label {
        display: none !important;
    }

    .left-nav-cluster .nav-extras-flyout-island {
        position: absolute;
        left: calc(100% + var(--nav-extras-flyout-gap));
        top: 50%;
        transform: translateY(-50%) translateX(0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
        padding: 0.375em;
        min-width: 3.75em;
        background: #ffffff;
        border-radius: 9999px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        z-index: 2602;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: none;
    }

    .left-nav-cluster .nav-extras-hover-zone--open > .nav-extras-flyout-island {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%) translateX(0);
        transition:
            opacity 0.14s ease,
            visibility 0s;
    }

    .left-nav-cluster .nav-extras-flyout-island .nav-item-wrapper,
    .left-nav-cluster .nav-extras-flyout-island .nav-item {
        pointer-events: none;
    }

    .left-nav-cluster .nav-extras-hover-zone--open > .nav-extras-flyout-island .nav-item-wrapper,
    .left-nav-cluster .nav-extras-hover-zone--open > .nav-extras-flyout-island .nav-item {
        pointer-events: auto;
    }

    .left-nav-cluster .nav-extras-flyout-island .nav-item {
        width: 3em;
        min-height: 3em;
        height: auto;
        padding: 2px 1px;
        transition: none !important;
    }

    .left-nav-cluster .nav-extras-flyout-island .nav-label,
    .left-nav-cluster .nav-extras-flyout-island .nav-label .island-hover-label-track {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 1px !important;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        white-space: normal !important;
        word-break: break-word;
        text-align: center;
        font-size: 8px;
        line-height: 1.15;
        color: currentColor;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        animation: none !important;
        transition: none !important;
    }

    .left-nav-cluster .nav-island {
        overflow: visible;
    }

    body.dark-mode .left-nav-cluster .nav-extras-flyout-island,
    [data-theme='dark'] .left-nav-cluster .nav-extras-flyout-island {
        background: #1a1a1a;
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }

    .left-nav-cluster .nav-item.nav-extras-collapse-btn {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        min-height: 0 !important;
        height: auto !important;
        width: auto !important;
        max-width: none;
        padding: 0.2em !important;
        padding-bottom: 0.2em !important;
    }

    /* Profil: nicht die „Icon+Label untereinander“-Zelle mit rundem 3em-Hintergrund */
    .left-nav-cluster .nav-item.nav-profile {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
    }
}

/* Legal Info Menu */
.legal-info-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.legal-info-btn.active {
    background: var(--active-bg-color, #1a1a1a);
    color: var(--active-icon-color, #ffffff) !important;
}

/* Legal Selector Island */
.legal-selector {
    position: relative;
}

.legal-info-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 400px;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.legal-info-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.legal-info-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.legal-info-menu-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

.legal-info-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.2s ease;
    border-radius: 8px;
    width: 32px;
    height: 32px;
}

.legal-info-menu-close:hover {
    color: #1a1a1a;
    background: #f8f9fa;
    transform: rotate(90deg);
}

.legal-info-menu-close svg {
    width: 18px;
    height: 18px;
}

.legal-info-menu-content {
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.legal-info-menu-content::-webkit-scrollbar {
    width: 6px;
}

.legal-info-menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.legal-info-menu-content::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

.legal-info-menu-content::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

.legal-info-accordion-item {
    margin-bottom: 4px;
}

.legal-info-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-align: left;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 600;
}

.legal-info-accordion-header:hover {
    background: #f8f9fa;
}

.legal-info-accordion-header.active {
    background: #f0f0f0;
}

.legal-info-accordion-header .accordion-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.legal-info-accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

.legal-info-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}

.legal-info-accordion-content.open {
    max-height: 1000px;
    padding: 0 16px 16px 16px;
}

.legal-info-text {
    padding-top: 12px;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.6;
}

.legal-info-text p {
    margin: 0 0 12px 0;
}

.legal-info-text p:last-child {
    margin-bottom: 0;
}

.nav-divider {
    width: 32px;
    height: 2px;
    background: #1a1a1a;
    margin: 1px auto;
    border-radius: 1px;
    align-self: center;
}

.nav-profile {
    margin-top: 4px;
}

.nav-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #667eea; /* Default, will be overridden by inline style */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-profile-avatar span {
    color: white;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

/* Navigation Submenu */
.nav-item-wrapper {
    position: relative;
}

/* Quick Access Pin Bar */
.quick-access-pin-bar {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    z-index: 11000;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
}

.nav-item-wrapper.has-quick-access.show-quick-access .quick-access-pin-bar,
.election-vote-fab.has-quick-access.show-quick-access .quick-access-pin-bar,
.utility-island.has-quick-access.show-quick-access .quick-access-pin-bar,
.settings-island.has-quick-access.show-quick-access .quick-access-pin-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Desktop: Structured wave animation for quick access items */
.quick-access-item {
    min-width: 48px;
    height: 40px;
    padding: 0 14px;
    border-radius: 50px;
    display: flex;
    position: relative;
    z-index: 11001;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                filter 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.quick-access-item svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.quick-access-item-label {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Person erstellen (Submenü): gleiche Pillen wie Join/Register (join-invite-btn in auth-mobile.css) */
.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    min-width: min(280px, calc(100vw - 48px));
    max-width: 320px;
    width: max-content;
    height: auto;
    min-height: 48px;
    white-space: normal;
    line-height: 1.25;
    gap: 0;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn .quick-access-item-label {
    font-size: 1rem;
    font-weight: 500;
    text-shadow: none;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary .quick-access-item-label {
    color: #ffffff;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary .quick-access-item-label {
    color: #1a1a1a;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary {
    background: #1a1a1a;
    color: #ffffff;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary:hover {
    background: #1a1a1a;
    color: #fff;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary {
    background: #f8f9fa;
    color: #1a1a1a;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #1a1a1a;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary {
    background: #f3f4f6;
    color: #1a1a1a;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary:hover {
    background: #e5e7eb;
    color: #1a1a1a;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary {
    background: #1a1a1a;
    color: #e2e8f0;
    border-color: #1a1a1a;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #f8fafc;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary .quick-access-item-label {
    color: #1a1a1a;
}

body.dark-mode .quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary .quick-access-item-label {
    color: #e2e8f0;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn:hover {
    transform: translateX(4px);
    filter: none;
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-primary:hover {
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quick-access-pin-bar .quick-access-item.quick-access-item-register.join-invite-btn-secondary:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quick-access-item:hover {
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-access-item.active {
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.6);
    filter: brightness(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-access-item.selected {
    transform: scale(1.3) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    z-index: 1000 !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

/* Dark Mode */
body.dark-mode .quick-access-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .quick-access-item.active {
    filter: brightness(1.4);
}

/* Quick Access Overlay - Dim everything except active button */
.quick-access-overlay {
    display: none !important;
}

/* Keep active nav item highlighted when quick access is active */
.nav-item.quick-access-active,
.election-vote-fab-btn.quick-access-active,
.utility-island-btn.quick-access-active,
.settings-island-btn.quick-access-active {
    filter: brightness(1.2) !important;
    transform: scale(1.05);
    z-index: 2001;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}

/* Keep the wrapper/container of active item highlighted too */
.nav-item-wrapper:has(.quick-access-active),
.election-vote-fab:has(.quick-access-active),
.utility-island:has(.quick-access-active),
.settings-island:has(.quick-access-active) {
    filter: brightness(1.2) !important;
    opacity: 1 !important;
}

/* Quick Access Pin Bar styling - no dimming of nav island */

/* Keep Quick Access Pin Bar buttons bright - they should never be dimmed */
.quick-access-pin-bar,
.quick-access-pin-bar .quick-access-item,
.nav-island:has(.show-quick-access) .quick-access-pin-bar,
.nav-island:has(.show-quick-access) .quick-access-pin-bar .quick-access-item,
body:has(.show-quick-access) .quick-access-pin-bar,
body:has(.show-quick-access) .quick-access-pin-bar .quick-access-item {
    filter: brightness(1) !important;
    opacity: 1 !important;
}

/* Quick Access active state - no dimming */

/* Keep Quick Access Pin Bar buttons bright when body has quick-access-active class */
body.quick-access-active .quick-access-pin-bar,
body.quick-access-active .quick-access-pin-bar .quick-access-item,
body.quick-access-active .nav-island .quick-access-pin-bar,
body.quick-access-active .nav-island .quick-access-pin-bar .quick-access-item {
    filter: brightness(1) !important;
    opacity: 1 !important;
}

/* Chat Attachment Quick Access Bar - Stacked vertically above button */
.chat-attachment-quick-access-bar {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 2000;
}

.chat-input-wrapper.has-chat-quick-access.show-chat-quick-access .chat-attachment-quick-access-bar,
.chat-composer-attachment-host.has-chat-quick-access.show-chat-quick-access .chat-attachment-quick-access-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.chat-quick-access-item {
    min-width: 120px;
    height: 40px;
    padding: 0 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    cursor: pointer;
}

.chat-quick-access-item svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.chat-quick-access-item-label {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chat-quick-access-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
}

.chat-quick-access-item.active {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.6);
    filter: brightness(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #1a1a1a 0%, #1a1a1a 100%);
}

/* Keep chat attachment button bright when quick access is active */
.chat-attachment-btn.quick-access-active {
    filter: brightness(1.3) !important;
    transform: scale(1.05);
    z-index: 2001;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}

.chat-input-wrapper.has-chat-quick-access.show-chat-quick-access,
.chat-composer-attachment-host.has-chat-quick-access.show-chat-quick-access {
    position: relative;
    z-index: 2000;
}

body.quick-access-active .nav-item.quick-access-active,
body.quick-access-active .election-vote-fab-btn.quick-access-active,
body.quick-access-active .utility-island-btn.quick-access-active,
body.quick-access-active .settings-island-btn.quick-access-active {
    filter: brightness(1.2) !important;
    transform: scale(1.05);
    z-index: 2001;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}

/* Keep the wrapper/container of active item highlighted too */
body.quick-access-active .nav-item-wrapper:has(.quick-access-active),
body.quick-access-active .election-vote-fab:has(.quick-access-active),
body.quick-access-active .utility-island:has(.quick-access-active),
body.quick-access-active .settings-island:has(.quick-access-active) {
    filter: brightness(1.2) !important;
    opacity: 1 !important;
}

.nav-submenu {
    position: absolute;
    left: calc(100% + 12px);
    top: 0;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    z-index: 1002;
    pointer-events: none;
}

.nav-submenu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.nav-submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.nav-submenu-item:hover {
    background: #f8f9fa;
}

.nav-submenu-item.active {
    background: #e9ecef;
    font-weight: 500;
}

.nav-submenu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.nav-submenu-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.nav-submenu-label {
    display: block;
}

/* Navigation Large Menu - Full Screen Container */
.nav-large-menu-overlay {
    position: fixed;
    top: 0;
    left: 88px;
    width: calc(100vw - 88px);
    height: 100vh;
    background: #ffffff;
    z-index: 998;
    display: none;
    overflow-y: auto;
}

.nav-large-menu-overlay.active {
    display: flex;
    flex-direction: column;
}

.nav-large-menu-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 96px 144px;
    max-width: 1600px;
    margin: 0 auto;
}

.nav-large-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 64px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e9ecef;
}

.nav-large-menu-header h2 {
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.nav-large-menu-close {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
}

.nav-large-menu-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.nav-large-menu-close:active {
    transform: scale(0.95);
}

.nav-large-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.nav-large-menu-button {
    display: block;
    background: transparent;
    padding: 36px 0;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid #f1f3f5;
    position: relative;
}

.nav-large-menu-button:last-child {
    border-bottom: none;
}

.nav-large-menu-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #1a1a1a;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-large-menu-button:hover {
    padding-left: 24px;
    color: #1a1a1a;
}

.nav-large-menu-button:hover::before {
    width: 3px;
}

.nav-large-menu-button-label {
    font-size: 28px;
    font-weight: 400;
    color: #1a1a1a;
    display: block;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.nav-large-menu-button:hover .nav-large-menu-button-label {
    color: #1a1a1a;
    font-weight: 500;
}

.nav-large-menu-button.active {
    padding-left: 24px;
}

.nav-large-menu-button.active::before {
    width: 3px;
}

.nav-large-menu-button.active .nav-large-menu-button-label {
    font-weight: 600;
    color: #1a1a1a;
}

/* Tree Container */
.tree-container {
    position: fixed;
    inset: 0;
    inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    width: 100vw;
    width: 100dvw; /* Dynamic viewport width for Safari */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for Safari */
    height: -webkit-fill-available; /* Fallback for older Safari */
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Enable touch panning and pinch zoom on mobile */
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* Ensure container covers entire viewport including safe areas */
    margin: 0;
    padding: 0;
    background: #ffffff;
    z-index: 1;
}

.tree-container:active {
    cursor: grabbing;
}

.tree-trunk {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Center Button - Go to Yourself */
.tree-center-button-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tree-center-button-container > .tree-center-button-inside,
.tree-center-button-container > .tree-search-wrapper,
.tree-center-button-container > .tree-orientation-toggle-wrap {
    pointer-events: auto;
}

.tree-center-button-container > .tree-orientation-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Pin Button */
.tree-pin-button {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tree-pin-button:hover {
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tree-pin-button svg {
    transition: transform 0.2s ease;
}

.tree-pin-button:hover svg {
    transform: rotate(15deg);
}

/* Pinned Menu */
.tree-pinned-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    background: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 400px;
    max-height: 400px;
    overflow: hidden;
    pointer-events: auto;
    z-index: 10002;
}

/* Mobile: Style pinned menu to match website design */
.tree-pinned-menu-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
}

.tree-pinned-menu-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.tree-pinned-menu-content {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}

.tree-pinned-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.2s;
    margin-bottom: 4px;
}

.tree-pinned-item:hover {
    background: #f8f9fa;
}

.tree-pinned-item-content {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tree-pinned-item-name {
    font-size: 0.9rem;
    color: #1a1a1a;
    font-weight: 500;
}

.tree-pinned-item-unpin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.tree-pinned-item:hover .tree-pinned-item-unpin {
    opacity: 1;
}

.tree-pinned-item-unpin:hover {
    background: #fee2e2;
    color: #dc2626;
}

.tree-pinned-empty {
    text-align: center;
    padding: 32px 16px;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Modal Styles (if not already defined) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Über Mobile Top/Bottom-Nav (~10002–10010), sonst UI scheint durch */
    z-index: 10120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.modal-large {
    max-width: 900px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.modal-close {
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.modal-body {
    padding: 24px;
}

/* Election Form Styles */
.election-form .form-group {
    margin-bottom: 20px;
}

.election-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
}

.election-form .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.election-form .form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.election-form .form-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6c757d;
}

.election-form .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.election-form .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.election-form .btn-primary {
    background: #007bff;
    color: #ffffff;
}

.election-form .btn-primary:hover {
    background: #0056b3;
}

.election-form .btn-secondary {
    background: #6c757d;
    color: #ffffff;
}

.election-form .btn-secondary:hover {
    background: #5a6268;
}

/* Person Context Menu */
.tree-person-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    z-index: 10003;
    min-width: 160px;
}

.tree-person-context-menu .context-menu-item {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #1a1a1a;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.tree-person-context-menu .context-menu-item:hover {
    background: #f8f9fa;
}

.tree-person-context-menu .context-menu-item svg {
    flex-shrink: 0;
    color: #6c757d;
}

.tree-center-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 50px;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    letter-spacing: 0.3px;
    font-family: inherit;
}

.tree-center-button:hover {
    background: #1a1a1a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.tree-center-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tree-center-button svg {
    flex-shrink: 0;
}

/* Family Tree */
.family-tree {
    position: absolute;
}

/* Tree Lines SVG Layer */
.tree-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* Tree Line Styles - Simple solid lines, no effects */

.tree-line-parent-child {
    stroke: #1a1a1a;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

.tree-line-spouse {
    stroke: #1a1a1a;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

.tree-line-sibling {
    stroke: #48bb78;
    stroke-width: 1.5;
    stroke-dasharray: var(--tree-line-dash, 32) var(--tree-line-gap, 20);
    stroke-linecap: round;
    opacity: 1;
}

/* Ensure person boxes are above lines */
.tree-person-box {
    position: relative;
    z-index: 2;
}

/* Family Tree positioning */
.family-tree {
    top: 0;
    left: 100px; /* Abstand zur linken Seite, damit Content nicht mit Navigation überlappt */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Empty parent slot styles */
.tree-empty-parent-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

.tree-empty-parent-box {
    width: 200px;
    min-height: 100px;
    background: #f8f9fa;
    border: 2px dashed #6c757d;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
    opacity: 0.4;
}

.tree-empty-parent-box:hover {
    background: #e9ecef;
    border-color: #6c757d;
    opacity: 0.6;
}

.tree-empty-parent-icon {
    font-size: 32px;
    color: #6c757d;
    font-weight: bold;
    margin-bottom: 8px;
}

.tree-empty-parent-label {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

/* Empty child slot styles */
.tree-empty-child-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    position: relative;
}

.tree-empty-child-box {
    width: 200px;
    min-height: 100px;
    background: #f8f9fa;
    border: 2px dashed #6c757d;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
    opacity: 0.4;
    position: relative;
}

.tree-empty-child-box:hover {
    background: #e9ecef;
    border-color: #6c757d;
    opacity: 0.6;
}

/* Empty child slot for adding siblings (when children already exist) */
.tree-empty-child-slot-sibling .tree-empty-child-box {
    width: 150px;
    min-height: 80px;
    background: #f0f4f8;
    border: 2px dashed #4a90e2;
    border-radius: 6px;
    padding: 15px;
    opacity: 0.5;
}

.tree-empty-child-slot-sibling .tree-empty-child-box:hover {
    background: #e1ecf4;
    border-color: #4a90e2;
    opacity: 0.7;
}

.tree-empty-child-slot-sibling .tree-empty-child-icon {
    font-size: 24px;
    color: #4a90e2;
    margin-bottom: 6px;
}

.tree-empty-child-slot-sibling .tree-empty-child-label {
    font-size: 12px;
    color: #4a90e2;
}

.tree-empty-child-icon {
    font-size: 32px;
    color: #6c757d;
    font-weight: bold;
    margin-bottom: 8px;
}

.tree-empty-child-label {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

.tree-empty-child-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    color: #6c757d;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    z-index: 11;
}

.tree-empty-child-close:hover {
    opacity: 1;
    color: #dc3545;
}

/* Sibling add button - Round + button in middle of horizontal connection line */
.tree-sibling-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 5;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    position: absolute;
}

.tree-sibling-add-button-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.tree-sibling-add-button-circle:hover {
    background: #1a1a1a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transform: scale(1.08);
}

.tree-sibling-add-button-icon {
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    line-height: 1;
    transition: color 0.3s ease;
}

.tree-sibling-add-button-circle:hover .tree-sibling-add-button-icon {
    color: #ffffff;
}

/* Tree end marker - Large X to symbolize end of family tree */
.tree-end-marker {
    font-size: 48px;
    color: #6c757d;
    font-weight: bold;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    pointer-events: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 0);
    opacity: 0.6;
}

/* Flag Background Container - BELOW person box */
.tree-person-flag-container {
    position: absolute;
    padding: 15px; /* Space for flag border */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Container selbst hat keinen Hintergrund - wird durch ::before erstellt */
    background: transparent;
    border-radius: 18px;
    z-index: 1; /* Below person box */
    pointer-events: none; /* Allow clicks to pass through to person box */
}

/* Pseudo-Element für Flaggenhintergrund - nur dieses wird ausgegraut und blass */
.tree-person-flag-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    /* Verwende CSS-Variablen für den Hintergrund */
    background: var(--flag-gradient, #f5f5f5);
    /* Ausgegraut und blass standardmäßig - etwas stärkerer Grauton */
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease; /* Sanfter Übergang */
    z-index: -1; /* Hinter dem Container-Inhalt */
    pointer-events: none;
}

/* Inner box to create outline effect */
.tree-person-flag-container::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 15px;
    background: #ffffff;
    z-index: -1;
    pointer-events: none;
}

/* Volle Flaggenfarbe beim Hover über die Person */
.tree-person-flag-container:hover::before,
.tree-person-flag-container.flag-hover::before {
    filter: grayscale(0%) brightness(1); /* Volle Farbe beim Hover */
    opacity: 1; /* Volle Deckkraft beim Hover */
}

/* Person Box - Außenradius = Innenkarte (12px) + Einzug (9.3px) für gleichmäßige Rundung */
.tree-person-box {
    --tree-person-inner-r: 12px;
    --tree-person-card-inset: 9.3px;
    background: #ffffff;
    border-radius: calc(var(--tree-person-inner-r) + var(--tree-person-card-inset));
    padding: 0;
    width: 280px;
    aspect-ratio: 1/1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    transition: none;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* sichtbar: .tree-person-name-below (direktes Kind) sitzt unter der Kachel; Inhalt clippt .tree-person-box-inner */
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Prevent browser zoom and scroll when touching person box - let tree handle panning */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* White inner box - positioned between flag and content */
/* Extends to cover the entire content area including dates section */
/* Has colored border based on gender */
.tree-person-box::before {
    content: '';
    position: absolute;
    top: var(--tree-person-card-inset);
    left: var(--tree-person-card-inset);
    right: var(--tree-person-card-inset);
    bottom: var(--tree-person-card-inset);
    border-radius: var(--tree-person-inner-r);
    background: #ffffff;
    z-index: 1;
    pointer-events: none;
    filter: none;
    opacity: 1;
    border: 5px solid rgba(0, 0, 0, 0.06);
    transition: none;
}

/* Gender-based border colors - removed, using icon instead */
.tree-person-box[data-gender="m"]::before {
    border-color: rgba(0, 0, 0, 0.06);
}

.tree-person-box[data-gender="w"]::before {
    border-color: rgba(0, 0, 0, 0.06);
}

.tree-person-box[data-gender="d"]::before {
    border-color: rgba(0, 0, 0, 0.06);
}

.tree-empty-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    padding: 40px;
}

/* Cross flag type (Switzerland, Denmark, etc.) - base background */
.tree-person-flag-container[data-flag-type="cross"] {
    background: transparent; /* Wird durch ::before dargestellt */
}

.tree-person-flag-container[data-flag-type="cross"]::before {
    background: var(--flag-bg, #dc2626);
}

/* Switzerland - centered cross (equal arms, same width on both axes) */
.tree-person-flag-container[data-flag-type="cross"][data-country-code="CH"]::before,
.tree-person-flag-container[data-flag-type="cross"][data-country-code="CHE"]::before {
    background-image: 
        /* Vertical arm - centered horizontally, equal width */
        linear-gradient(to right, transparent 0%, transparent 41.67%, #FFFFFF 41.67%, #FFFFFF 58.33%, transparent 58.33%, transparent 100%),
        /* Horizontal arm - centered vertically, same width as vertical */
        linear-gradient(to bottom, transparent 0%, transparent 41.67%, #FFFFFF 41.67%, #FFFFFF 58.33%, transparent 58.33%, transparent 100%);
}

/* Denmark - cross offset to left (vertical bar at 1/3 from left, horizontal centered, cross width 1/7 of flag width) */
.tree-person-flag-container[data-flag-type="cross"][data-country-code="DK"]::before,
.tree-person-flag-container[data-flag-type="cross"][data-country-code="DNK"]::before {
    background-image: 
        linear-gradient(to bottom, transparent 0%, transparent 44%, #FFFFFF 44%, #FFFFFF 56%, transparent 56%, transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 30%, #FFFFFF 30%, #FFFFFF 37.14%, transparent 37.14%, transparent 100%);
}

/* Sweden - blue with yellow cross offset to left (vertical at 1/3, horizontal centered, cross width wider than Denmark) */
.tree-person-flag-container[data-flag-type="cross"][data-country-code="SE"]::before,
.tree-person-flag-container[data-flag-type="cross"][data-country-code="SWE"]::before {
    background-image: 
        linear-gradient(to bottom, transparent 0%, transparent 42%, #FECC00 42%, #FECC00 58%, transparent 58%, transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 28%, #FECC00 28%, #FECC00 40%, transparent 40%, transparent 100%);
}

/* Norway - red with blue cross outlined in white, offset to left (vertical at 1/3, horizontal centered) */
.tree-person-flag-container[data-flag-type="cross"][data-country-code="NO"]::before,
.tree-person-flag-container[data-flag-type="cross"][data-country-code="NOR"]::before {
    background-image: 
        /* White outline horizontal */
        linear-gradient(to bottom, transparent 0%, transparent 42%, #FFFFFF 42%, #FFFFFF 58%, transparent 58%, transparent 100%),
        /* Blue cross horizontal */
        linear-gradient(to bottom, transparent 0%, transparent 44%, #00205B 44%, #00205B 56%, transparent 56%, transparent 100%),
        /* White outline vertical */
        linear-gradient(to right, transparent 0%, transparent 28%, #FFFFFF 28%, #FFFFFF 40%, transparent 40%, transparent 100%),
        /* Blue cross vertical */
        linear-gradient(to right, transparent 0%, transparent 30%, #00205B 30%, #00205B 37.14%, transparent 37.14%, transparent 100%);
}

/* Finland - white with blue cross offset to left (vertical at 1/3, horizontal centered) */
.tree-person-flag-container[data-flag-type="cross"][data-country-code="FI"]::before,
.tree-person-flag-container[data-flag-type="cross"][data-country-code="FIN"]::before {
    background-image: 
        linear-gradient(to bottom, transparent 0%, transparent 44%, #003580 44%, #003580 56%, transparent 56%, transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 30%, #003580 30%, #003580 37.14%, transparent 37.14%, transparent 100%);
}

/* United Kingdom - Union Jack (complex pattern using background-image layers) */
:root {
    --uk-blue: #012169;
    --uk-red: #C8102E;
}

.tree-person-flag-container[data-flag-type="unionjack"] {
    background: transparent; /* Wird durch ::before dargestellt */
}

.tree-person-flag-container[data-flag-type="unionjack"]::before {
    background: #012169;
    background-image: 
        /* Red diagonal saltire (St. Patrick's Cross) - top-right to bottom-left, OFFSET (narrower, inside white border) - TOP LAYER */
        /* Offset: shifted asymmetrically - creates wider white border on bottom-right, narrower on top-left */
        linear-gradient(-45deg, transparent 0%, transparent 27%, #C8102E 27%, #C8102E 37%, transparent 37%, transparent 63%, #C8102E 63%, #C8102E 73%, transparent 73%, transparent 100%),
        /* White border around red saltire (St. Patrick's Cross) - top-right to bottom-left, OFFSET */
        /* The offset creates wider white border on one side, narrower on the other */
        linear-gradient(-45deg, 
            transparent 0%, transparent 24%, 
            #FFFFFF 24%, #FFFFFF 30%, 
            transparent 30%, transparent 34%, 
            #FFFFFF 34%, #FFFFFF 40%, 
            transparent 40%, transparent 60%, 
            #FFFFFF 60%, #FFFFFF 66%, 
            transparent 66%, transparent 70%, 
            #FFFFFF 70%, #FFFFFF 76%, 
            transparent 76%, transparent 100%),
        /* White diagonal saltire (St. Andrew's Cross) - top-left to bottom-right, wider */
        linear-gradient(45deg, transparent 0%, transparent 25%, #FFFFFF 25%, #FFFFFF 45%, transparent 45%, transparent 55%, #FFFFFF 55%, #FFFFFF 75%, transparent 75%, transparent 100%),
        /* Red cross (St. George's Cross) - vertical and horizontal, wider, on top of white border */
        linear-gradient(to bottom, transparent 0%, transparent 42%, #C8102E 42%, #C8102E 58%, transparent 58%, transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 42%, #C8102E 42%, #C8102E 58%, transparent 58%, transparent 100%),
        /* White border around red cross (St. George's Cross) - base layer */
        linear-gradient(to bottom, transparent 0%, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%, transparent 100%),
        linear-gradient(to right, transparent 0%, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%, transparent 100%);
}

/* United States - 13 stripes with blue canton */
.tree-person-flag-container[data-flag-type="usa"] {
    background: transparent; /* Wird durch ::before dargestellt */
}

.tree-person-flag-container[data-flag-type="usa"]::before {
    background: #FFFFFF;
    background-image: 
        /* 13 horizontal stripes: red-white-red-white... (7 red, 6 white) - starts with red */
        linear-gradient(to bottom, 
            #B22234 0%, #B22234 7.69%,
            #FFFFFF 7.69%, #FFFFFF 15.38%,
            #B22234 15.38%, #B22234 23.08%,
            #FFFFFF 23.08%, #FFFFFF 30.77%,
            #B22234 30.77%, #B22234 38.46%,
            #FFFFFF 38.46%, #FFFFFF 46.15%,
            #B22234 46.15%, #B22234 53.85%,
            #FFFFFF 53.85%, #FFFFFF 61.54%,
            #B22234 61.54%, #B22234 69.23%,
            #FFFFFF 69.23%, #FFFFFF 76.92%,
            #B22234 76.92%, #B22234 84.62%,
            #FFFFFF 84.62%, #FFFFFF 92.31%,
            #B22234 92.31%, #B22234 100%),
        /* Blue canton (top-left, ~40% width, covers first 7 stripes = 53.85% height) - on top of stripes */
        linear-gradient(to bottom, #3C3B6E 0%, #3C3B6E 53.85%, transparent 53.85%, transparent 100%);
    background-size: 100% 100%, 40% 53.85%;
    background-position: center center, top left;
    background-repeat: no-repeat, no-repeat;
}

/* Greece - Blue canton with white cross, 9 horizontal stripes */
/* Canton is a square with side = 5 stripes (55.56% of flag height) */
/* Cross width = 1 stripe (11.11% of flag height) */
.tree-person-flag-container[data-flag-type="greece"] {
    background: transparent; /* Wird durch ::before dargestellt */
}

.tree-person-flag-container[data-flag-type="greece"]::before {
    background: var(--flag-stripe-white, #FFFFFF);
    background-image: 
        /* 9 equal horizontal stripes: blue-white-blue-white... (5 blue, 4 white) - starts with blue */
        linear-gradient(to bottom, 
            var(--flag-stripe-blue, #005BAE) 0%, var(--flag-stripe-blue, #005BAE) 11.11%,
            var(--flag-stripe-white, #FFFFFF) 11.11%, var(--flag-stripe-white, #FFFFFF) 22.22%,
            var(--flag-stripe-blue, #005BAE) 22.22%, var(--flag-stripe-blue, #005BAE) 33.33%,
            var(--flag-stripe-white, #FFFFFF) 33.33%, var(--flag-stripe-white, #FFFFFF) 44.44%,
            var(--flag-stripe-blue, #005BAE) 44.44%, var(--flag-stripe-blue, #005BAE) 55.56%,
            var(--flag-stripe-white, #FFFFFF) 55.56%, var(--flag-stripe-white, #FFFFFF) 66.66%,
            var(--flag-stripe-blue, #005BAE) 66.66%, var(--flag-stripe-blue, #005BAE) 77.77%,
            var(--flag-stripe-white, #FFFFFF) 77.77%, var(--flag-stripe-white, #FFFFFF) 88.88%,
            var(--flag-stripe-blue, #005BAE) 88.88%, var(--flag-stripe-blue, #005BAE) 100%),
        /* Blue canton (top-left square: width = 5 stripes = 55.56% of flag height, height = 5 stripes = 55.56%) */
        linear-gradient(to bottom, var(--flag-canton-blue, #005BAE) 0%, var(--flag-canton-blue, #005BAE) 55.56%, transparent 55.56%, transparent 100%);
    background-size: 100% 100%, 55.56% 55.56%;
    background-position: center center, top left;
    background-repeat: no-repeat, no-repeat;
}

/* White cross in Greek canton */
/* Cross width = 1 stripe = 11.11% of flag height */
/* Cross centered in canton */
.tree-person-flag-container[data-flag-type="greece"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55.56%; /* Canton width (5 stripes) */
    height: 55.56%; /* Canton height (5 stripes) */
    background-image: 
        /* Vertical arm of cross - centered, width = 11.11% of flag (1 stripe) = 20% of canton */
        linear-gradient(to right, transparent 0%, transparent calc(50% - 5.555%), var(--flag-cross-white, #FFFFFF) calc(50% - 5.555%), var(--flag-cross-white, #FFFFFF) calc(50% + 5.555%), transparent calc(50% + 5.555%), transparent 100%),
        /* Horizontal arm of cross - centered, height = 11.11% of flag (1 stripe) = 20% of canton */
        linear-gradient(to bottom, transparent 0%, transparent calc(50% - 5.555%), var(--flag-cross-white, #FFFFFF) calc(50% - 5.555%), var(--flag-cross-white, #FFFFFF) calc(50% + 5.555%), transparent calc(50% + 5.555%), transparent 100%);
    z-index: 0; /* Über ::before, aber unter Person-Box */
    pointer-events: none;
    /* Ausgegraut und blass standardmäßig - etwas stärkerer Grauton */
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Volle Farbe beim Hover für Greece ::after */
.tree-person-flag-container[data-flag-type="greece"]:hover::after,
.tree-person-flag-container[data-flag-type="greece"].flag-hover::after {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* Triangle flag type (Czech Republic) */
.tree-person-flag-container[data-flag-type="triangle"] {
    background: transparent; /* Wird durch ::before dargestellt */
    position: relative;
}

.tree-person-flag-container[data-flag-type="triangle"]::before {
    background: linear-gradient(to bottom, var(--flag-top, #ffffff) 0%, var(--flag-top, #ffffff) 50%, var(--flag-bottom, #d7141a) 50%, var(--flag-bottom, #d7141a) 100%);
}

.tree-person-flag-container[data-flag-type="triangle"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--flag-triangle, #11457e);
    /* Czech flag: triangle comes from left side, point centered on y-axis (50%) */
    clip-path: polygon(0 0, var(--flag-triangle-width, 33%) 50%, 0 100%);
    z-index: 0; /* Über ::before, aber unter Person-Box */
    border-radius: 18px;
    pointer-events: none;
    /* Ausgegraut und blass standardmäßig - etwas stärkerer Grauton */
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Volle Farbe beim Hover für Triangle ::after */
.tree-person-flag-container[data-flag-type="triangle"]:hover::after,
.tree-person-flag-container[data-flag-type="triangle"].flag-hover::after {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.tree-person-box * {
    cursor: pointer;
}

.tree-person-box.tree-person-box--hovered:not(.highlighted):not(.kinma-tree-box-long-press-pressing):not(.kinma-hold-anim-in),
.tree-person-box.tree-mobile-center-hover:not(.highlighted):not(.kinma-tree-box-long-press-pressing):not(.kinma-hold-anim-in) {
    border-color: rgba(0, 0, 0, 0.12);
}

.family-tree:not(.tree-cluster-mode) .tree-person-box:hover:not(.highlighted):not(.kinma-tree-box-long-press-pressing):not(.kinma-hold-anim-in):not(.tree-person-box--hovered):not(.tree-mobile-center-hover) {
    border-color: rgba(0, 0, 0, 0.11);
}

.tree-person-box.highlighted {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.6), 0 16px 40px rgba(99, 102, 241, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
    animation: highlightPulse 1.8s ease-in-out infinite;
    transform: none;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.6), 0 16px 40px rgba(99, 102, 241, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.7), 0 20px 48px rgba(99, 102, 241, 0.35), 0 8px 20px rgba(0, 0, 0, 0.16);
    }
}

.tree-person-avatar {
    position: absolute;
    top: 14.3px;
    left: 14.3px;
    right: 14.3px;
    bottom: 14.3px;
    width: auto;
    height: auto;
    border-radius: 7px;
    overflow: hidden;
    margin: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    flex-shrink: 0;
    z-index: 5;
    opacity: 1;
    visibility: visible;
}

.tree-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tree-person-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 48px;
    font-weight: 800;
    color: #4f46e5;
    line-height: 1;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    letter-spacing: 0.04em;
}

.tree-person-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0;
}

/* Name Section - Additional names only */
.tree-person-name-section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
}

/* Additional Names Section - Cleaner */
.tree-person-additional-names {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.tree-person-name-item {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.3;
    justify-content: center;
}

.tree-person-name-label {
    font-weight: 700;
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    flex-shrink: 0;
    min-width: auto;
}

.tree-person-name-value {
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    flex: 0;
    text-align: left;
}

/* Demographics Section - Country */
/* Location styling - Country - City */
.tree-person-location {
    margin: 0;
    padding: 1px 0 0 0;
    border-top: 1px solid rgba(26, 26, 26, 0.38);
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

/* Profile hint at bottom - outside main content */
.tree-person-profile-hint {
    position: absolute;
    bottom: 9.3px;
    left: 9.3px;
    right: 9.3px;
    width: auto;
    font-size: 10px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    margin: 0;
    padding: 6px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 20;
    pointer-events: none;
}

/* Gender Icon - shown in info area */
.tree-person-gender {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.tree-person-gender-icon {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

/* Gender colors */
.tree-person-box[data-gender="m"] .tree-person-gender-icon {
    color: #3b82f6;
    stroke: #3b82f6;
}

.tree-person-box[data-gender="w"] .tree-person-gender-icon {
    color: #ec4899;
    stroke: #ec4899;
}

.tree-person-box[data-gender="d"] .tree-person-gender-icon {
    color: #a855f7;
    stroke: #a855f7;
}

.tree-person-country {
    display: block;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.5;
    font-size: 13px;
}

/* Stats Section - Generation only, age moved to name */
.tree-person-stats {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 0;
    padding: 0;
    font-size: 11px;
    text-align: center;
    color: #64748b;
    font-weight: 600;
    background: transparent;
    border-radius: 0;
    border: none;
    justify-content: center;
    align-items: center;
}

.tree-person-age {
    display: none; /* Hidden, shown next to name */
}

.tree-person-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    overflow: visible;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
    letter-spacing: -0.3px;
    display: block;
}

.tree-person-name-text {
    display: inline;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

.tree-person-age-inline {
    display: inline;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

/* Age display below name */
.tree-person-age-display {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
}

.tree-person-name-age {
    display: inline;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.tree-person-role {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    margin-bottom: 8px;
}

.tree-person-meta {
    font-size: 11px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.3;
}

.tree-person-age,
.tree-person-generation {
    display: inline-block;
    line-height: 1;
    font-size: 11px;
}

.tree-person-age::after {
    content: '•';
    margin-left: 8px;
    color: #cbd5e1;
}

/* Dates Section - Below header */
.tree-person-alias-strip {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    margin: 0;
    flex-shrink: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.38);
    border-bottom: 1px solid rgba(26, 26, 26, 0.38);
}

.tree-person-alias-strip .tree-person-geburtsname,
.tree-person-alias-strip .tree-person-nickname {
    border-top: none;
    padding: 0;
    margin: 0;
    line-height: 1.25;
}

.tree-person-alias-strip + .tree-person-birth,
.tree-person-alias-strip + .tree-person-death,
.tree-person-alias-strip + .tree-person-location {
    border-top: none;
}

.tree-person-geburtsname {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 1px 0;
}

.tree-person-geburtsname-label {
    font-weight: 600;
    color: #1a1a1a;
}

/* Nickname styling */
.tree-person-nickname {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    font-style: italic;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 1px 0;
    line-height: 1.25;
}

.tree-person-nickname-label {
    font-weight: 600;
    color: #1a1a1a;
    font-style: normal;
}

/* Birth date styling - simple */
.tree-person-birth {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 1px 0;
    border-top: 1px solid rgba(26, 26, 26, 0.38);
}

/* Death date styling - with cross */
.tree-person-death {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 1px 0;
}

.tree-person-date-value {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
}

.tree-person-birth .tree-person-date-value {
    color: #64748b;
}

.tree-person-death {
    color: #dc2626;
}

.tree-person-death .tree-person-date-value {
    color: #dc2626;
    font-weight: 700;
}

/* Stammbaum-Flagge: volle Farbe (tree.css maßgeblich; hier Previews/ältere Selektoren) */
.tree-person-flag {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 13px;
    z-index: 0;
    filter: none;
    opacity: 1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tree-person-flag[data-flag-type="japan"] {
    background: #FFFFFF !important;
}
.tree-person-flag:not([data-flag-type="japan"])::after {
    content: '';
    position: absolute;
    top: 17.3px;
    left: 17.3px;
    right: 17.3px;
    bottom: 17.3px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    z-index: 1;
    pointer-events: none;
}
.tree-person-flag[data-flag-type="japan"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #BC002D;
    z-index: 1;
}

.tree-person-box.tree-person-box--hovered .tree-person-avatar,
.tree-person-box.tree-mobile-center-hover .tree-person-avatar,
.tree-person-box.flag-hover .tree-person-avatar {
    opacity: 0;
    visibility: hidden;
}

.tree-person-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    gap: 6px;
    text-align: center;
}

/* Name styling - with age in parentheses */
.tree-person-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* Large Background Flag Symbol - appears on hover inside white box */
.tree-person-flag-symbol-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: transparent;
}

.tree-person-flag-symbol-background[data-symbol-type="emoji"] {
    font-size: 262px; /* 75% of 350px */
    line-height: 1;
}

.tree-person-flag-symbol-background[data-symbol-type="text"] {
    font-size: 210px; /* 75% of 280px */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.tree-person-flag-symbol-background[data-symbol-type="svg"] svg {
    width: 75%; /* Reduced from 100% */
    height: 75%; /* Reduced from 100% */
    opacity: 0.15;
}

.tree-person-flag-symbol-background[data-symbol-type="image"] img {
    width: 75%; /* Reduced from 100% */
    height: 75%; /* Reduced from 100% */
    object-fit: contain;
    opacity: 0.15;
}

.tree-person-box.tree-person-box--hovered .tree-person-flag-symbol-background,
.tree-person-box.tree-mobile-center-hover .tree-person-flag-symbol-background {
    opacity: 1 !important;
    display: flex !important;
}

.tree-person-box.tree-person-box--hovered .tree-person-flag-symbol-background[data-symbol-type="svg"] svg,
.tree-person-box.tree-mobile-center-hover .tree-person-flag-symbol-background[data-symbol-type="svg"] svg {
    opacity: 0.2 !important;
}

.tree-person-box.tree-person-box--hovered .tree-person-flag-symbol-background[data-symbol-type="image"] img,
.tree-person-box.tree-mobile-center-hover .tree-person-flag-symbol-background[data-symbol-type="image"] img {
    opacity: 0.2 !important;
}

.tree-person-flag-symbol {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    z-index: 0;
    background: transparent;
    border-radius: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    aspect-ratio: 1;
    box-shadow: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.06;
    pointer-events: none;
}

.tree-person-box.tree-person-box--hovered .tree-person-flag-symbol,
.tree-person-box.tree-mobile-center-hover .tree-person-flag-symbol {
    transform: translateY(-50%) scale(1.05);
    box-shadow: none;
    opacity: 0.1;
}

.tree-person-flag-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tree-person-flag-symbol svg {
    width: 100%;
    height: 100%;
}

.tree-person-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    text-decoration: none;
}

.tree-person-birth-date,
.tree-person-death-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tree-person-death-date {
    color: #8b0000;
}

.death-cross {
    font-size: 14px;
    line-height: 1;
}

/* Tree Search Bar – eine Leiste mit integrierten Buttons (Person links, Pin rechts) */
.tree-search-container {
    display: none;
}

.tree-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
    width: min(520px, calc(100vw - 140px));
    max-width: calc(100vw - 140px);
    min-height: 54px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.tree-search-wrapper .tree-search-inner {
    flex: 1;
    min-width: 0;
    position: relative;
}

.tree-search-wrapper .tree-search-input {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Lupe: siehe assets/css/modules/tree.css (.kinma-ai-search-pill__search-icon im Flex) */
.tree-search-wrapper .tree-search-inner .kinma-ai-search-pill__search-icon {
    color: #1a1a1a;
    pointer-events: none;
}

.tree-search-input {
    width: 100%;
    height: 42px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    outline: none;
    font-family: inherit;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.tree-search-input:focus {
    background: transparent;
}

.tree-search-input::placeholder {
    color: #94a3b8;
}

.tree-search-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    gap: 0;
}

.tree-search-count .search-count-number {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.tree-search-count .search-count-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
    text-transform: lowercase;
}

.tree-search-results {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 8px 8px 0 0;
    border: 2px solid #1a1a1a;
    border-bottom: none;
    margin-bottom: -2px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1001;
    pointer-events: auto;
    /* Prevent text selection during drag */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Custom scrollbar for search results */
.tree-search-results::-webkit-scrollbar {
    width: 4px;
    transition: width 0.2s ease;
}

.tree-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.tree-search-results::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
    transition: background 0.2s ease, width 0.2s ease;
}

.tree-search-results:hover::-webkit-scrollbar {
    width: 8px;
}

.tree-search-results:hover::-webkit-scrollbar-thumb {
    background: #94a3b8;
}

/* Firefox scrollbar */
.tree-search-results {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.tree-search-results:hover {
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 transparent;
}

.tree-search-results.show {
    display: block;
}

/* On mobile open search results below input instead of above */
.tree-search-result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.tree-search-result-item:hover {
    background-color: #f8f9fa;
}

.tree-search-result-item.active {
    background-color: #e7f3ff;
}

/* Avatar and Initials in search results */
.tree-search-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tree-search-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
}

.tree-search-result-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

.tree-search-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.tree-search-result-initials {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

.tree-search-result-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}

/* Profile Page */
.profile-page-container {
    margin-left: 88px;
    min-height: 100vh;
    padding: 40px;
    background: #f8f9fa;
    width: calc(100vw - 88px);
}

.profile-page-content {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Persons Page */
.persons-page-container {
    margin-left: 88px;
    min-height: 100vh;
    padding: 40px;
    background: #f8f9fa;
    width: calc(100vw - 88px);
}

.persons-page-content {
    width: 100%;
    max-width: none;
    margin: 0;
}

.persons-page-content h1 {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.persons-page-content p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 30px;
}

.profile-actions {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.profile-action-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.profile-action-logout {
    background: #6c757d;
    color: #ffffff;
}

.profile-action-logout:hover {
    background: #5a6268;
}

.profile-action-leave {
    background: #ffc107;
    color: #1a1a1a;
}

.profile-action-leave:hover {
    background: #e0a800;
}

.profile-action-delete {
    background: #dc3545;
    color: #ffffff;
}

.profile-action-delete:hover {
    background: #c82333;
}

.delete-account-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.delete-confirm-input {
    padding: 10px 16px;
    border: 1px solid #dc3545;
    border-radius: 6px;
    font-size: 14px;
}

.profile-action-delete-confirm {
    background: #dc3545;
    color: #ffffff;
}

.profile-action-delete-confirm:hover {
    background: #c82333;
}

.profile-action-cancel {
    background: #6c757d;
    color: #ffffff;
}

.profile-action-cancel:hover {
    background: #5a6268;
}

/* Family Info Bar */

.chat-btn-above-family svg {
    width: 24px;
    height: 24px;
}

/* Family Info Bar - Bottom Right Corner (standalone) */
/* Hide on desktop by default, show on mobile and on desktop map view */
.family-info-bar:not(.settings-controls .family-info-bar) {
    display: none !important; /* Hidden on desktop by default */
    visibility: hidden !important;
}

/* Show family-info-bar on desktop when map view is active - position above map */
/* Hide mobile-profile-btn on desktop - hide ALL mobile-profile-btn elements */
.mobile-profile-btn {
    display: none !important;
    visibility: hidden !important;
}

/* Show on mobile - This is now handled in the main mobile media query below */

/* Family Info Bar - Desktop: Bottom Left, Mobile: In settings-controls */
.family-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.family-label {
    font-size: 20px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: none;
}

.family-name-display {
    font-size: 36px;
    text-shadow: none;
}

/* Desktop: Clean, no shadows */
.family-name-display {
    font-weight: 700;
    color: #1a1a1a;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.family-code-click-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    letter-spacing: 0.08em;
    text-shadow: none !important;
}

.family-code-click-reveal:hover {
    opacity: 0.85;
}

.family-code-blurred {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.2s ease;
}

.family-code-blurred.family-code-revealed {
    filter: none;
    user-select: text;
}

.family-code-popup {
    position: fixed;
    z-index: 10002;
    padding: 12px 18px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.08);
    transition: background-color 0.25s ease;
}

.family-code-popup.family-code-popup-copied {
    background-color: #d4edda;
}

.family-code-popup-code {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.15em;
    color: #1a1a1a;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.family-name-display-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-shadow: none !important;
}

.family-name-display-btn:hover {
    opacity: 0.85;
}

a.family-name-display.family-name-display-btn {
    text-decoration: none;
    color: inherit;
}

.family-names-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: calc(1.2em * 3); /* Max 3 lines */
    overflow: hidden;
    line-height: 1.2em;
    align-items: flex-start;
}

.family-name-item {
    display: inline-block;
    white-space: nowrap;
}

.family-name-item:not(:last-child)::after {
    content: ' ';
}

.family-name-display.clickable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.family-name-display.clickable:hover {
    opacity: 0.8;
}

.family-name-edit-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

.family-name-display.clickable:hover .family-name-edit-icon {
    display: none !important;
    opacity: 0 !important;
}

/* Family Name Selector Modal - Modern & Clean */
.family-name-selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.family-name-selector-content {
    background: #ffffff;
    border-radius: 0;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.family-name-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.family-name-selector-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.family-name-selector-close {
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.2s;
}

.family-name-selector-close:hover {
    color: #1a1a1a;
}

.family-name-selector-body {
    padding: 24px 32px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Search Container */
.family-name-search-container {
    position: relative;
}

.family-name-search {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 1rem;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: #1a1a1a;
    transition: all 0.2s;
}

.family-name-search:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
}

.family-name-search::placeholder {
    color: #6c757d;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* Quick Actions */
.family-name-quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-action-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-action-btn:hover {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

.selected-count {
    margin-left: auto;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* Tags Grid */
.family-name-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.family-name-tag {
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    color: #6c757d;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    border-radius: 0;
    position: relative;
}

.family-name-tag:hover {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    padding-left: 20px;
}

.family-name-tag.selected {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    font-weight: 600;
}

.family-name-tag.selected::after {
    content: '✓';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
}

/* Actions */
.family-name-selector-actions {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-save-family-names {
    width: 100%;
    padding: 14px 32px;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-family-names:hover {
    background: #1a1a1a;
}

.family-actions-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Lock Button - Toggle Button */
.family-lock-btn {
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.family-lock-btn:hover {
    color: #1a1a1a;
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.family-lock-btn.active {
    color: #1a1a1a;
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Lock Button in Settings Controls (Top Island) */
.settings-logo-wrapper .family-lock-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin-left: 8px;
    flex-shrink: 0;
    background: transparent;
    box-shadow: none;
}

.settings-logo-wrapper .family-lock-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Family Code Display in Settings Controls */
.settings-logo-wrapper .family-code-display {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

/* Code Display - With background */
.family-code-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.family-code-text {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

.family-code-copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.family-code-copy-btn:hover {
    color: #1a1a1a;
    background: #f8f9fa;
}

/* Old styles removed - cleaned up */

.family-copy-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.family-copy-btn:hover {
    color: #1a1a1a;
}

/* Tree Settings Button */
.tree-settings-btn {
    background: #ffffff;
    border: 2px solid #6c757d;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.tree-settings-btn:hover {
    background: #f8f9fa;
    border-color: #1a1a1a;
    color: #1a1a1a;
    transform: rotate(90deg);
}

.tree-settings-btn:active {
    transform: rotate(90deg) scale(0.95);
}

/* Tree Settings Modal */
.tree-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Lower nav island z-index when modal is open */
.tree-settings-modal.active ~ .nav-island,
body:has(.tree-settings-modal.active) .nav-island,
.tree-settings-modal.active ~ .utility-islands-container,
body:has(.tree-settings-modal.active) .utility-islands-container {
    z-index: 500;
}

.tree-settings-modal.active {
    display: flex;
    pointer-events: auto;
}

.tree-settings-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.tree-settings-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 1000px;
    width: 95%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tree-settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 36px;
    border-bottom: 1px solid #f1f3f5;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
}

.tree-settings-modal-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.tree-settings-modal-close {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.tree-settings-modal-close:hover {
    background: #f8f9fa;
    color: #1a1a1a;
}

.tree-settings-modal-body {
    padding: 36px;
    overflow-y: auto;
    flex: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: #fafbfc;
}

.tree-settings-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.tree-settings-left {
    flex: 1.2;
    min-width: 0;
}

.tree-settings-right {
    flex: 0.8;
    min-width: 0;
    position: sticky;
    top: 0;
}

.tree-settings-section {
    margin-bottom: 36px;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tree-settings-section:last-of-type {
    margin-bottom: 0;
}

.tree-settings-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    color: #6c757d;
}

.tree-settings-field {
    margin-bottom: 24px;
}

.tree-settings-field:last-child {
    margin-bottom: 0;
}

.tree-settings-field label {
    display: block;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
}

.tree-settings-color-input {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tree-settings-color-input input[type="color"] {
    width: 120px;
    height: 44px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    padding: 3px;
    background: #ffffff;
    flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tree-settings-color-input input[type="color"]:hover {
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tree-settings-color-input input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.tree-settings-color-input input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.tree-settings-color-text {
    width: 100px;
    padding: 11px 14px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: #1a1a1a;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.tree-settings-color-text:hover {
    border-color: #adb5bd;
}

.tree-settings-color-text:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

.tree-settings-color-text:focus {
    outline: none;
    border-color: #1a1a1a;
}

.tree-settings-image-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tree-settings-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px dashed #6c757d;
    border-radius: 8px;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tree-settings-upload-btn:hover {
    background: #e9ecef;
    border-color: #1a1a1a;
    color: #1a1a1a;
}

.tree-settings-image-preview {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e9ecef;
}

.tree-settings-image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.tree-settings-image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.tree-settings-image-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

.tree-settings-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 2px solid #f1f3f5;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tree-settings-btn-save,
.tree-settings-btn-reset {
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tree-settings-btn-save {
    background: #1a1a1a;
    color: #ffffff;
}

.tree-settings-btn-save:hover {
    background: #1a1a1a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.tree-settings-btn-save:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tree-settings-btn-reset {
    background: #ffffff;
    color: #1a1a1a;
    border: 2px solid #e9ecef;
}

.tree-settings-btn-reset:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tree-settings-btn-reset:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tree Settings Preview */
.tree-settings-preview {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 32px;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tree-settings-preview-container {
    position: relative;
    width: 100%;
    height: 400px;
    transform: scale(0.85);
    transform-origin: center center;
}

.tree-settings-preview-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tree-settings-preview-box {
    position: absolute;
    background: #ffffff;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 130px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tree-settings-preview-initials {
    font-size: 20px;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.tree-settings-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

/* Wizard Buttons Island */
.wizard-buttons-island {
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: fit-content;
    z-index: 1000;
    bottom: 40px;
    gap: 12px;
    opacity: 1 !important; /* Always visible */
    visibility: visible !important; /* Always visible */
}

.wizard-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: 0;
}

.wizard-buttons .btn {
    padding: 16px 32px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto; /* Don't grow or shrink, use natural width */
    min-width: 100px; /* Minimum width for all buttons */
    width: auto; /* Allow buttons to size based on content */
    background: transparent;
    border-radius: 999px;
    white-space: nowrap;
    text-align: center !important; /* Ensure text is centered */
    display: inline-flex !important; /* Force display */
    align-items: center !important; /* Center vertically */
    justify-content: center !important; /* Center horizontally */
    opacity: 1 !important; /* Always visible */
    visibility: visible !important; /* Always visible */
}

.wizard-buttons .btn.hidden {
    display: none !important;
}

.wizard-buttons .btn-primary,
.wizard-buttons .btn-danger,
.wizard-buttons .btn-secondary {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

.wizard-buttons .btn-primary {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.wizard-buttons .btn-primary:hover {
    background: #1a1a1a !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background: #1a1a1a;
    color: #ffffff;
}

.btn-primary:hover {
    background: #1a1a1a;
}

.btn-primary:active {
    background: #1a1a1a;
}

.wizard-buttons .btn-secondary:hover {
    color: #1a1a1a !important;
    background: #f8f9fa !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    color: #6c757d;
}

.btn-secondary:hover {
    color: #1a1a1a;
}

.wizard-buttons .btn-danger {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.wizard-buttons .btn-danger:hover {
    background: #c82333 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-danger {
    background: #dc3545;
    color: #ffffff;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-danger:active {
    background: #bd2130;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.wizard-buttons .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #adb5bd !important;
    background: #e9ecef !important;
    border-color: #e9ecef !important;
}

.wizard-buttons .btn-primary:disabled {
    background: #6c757d !important;
    color: #ffffff !important;
    opacity: 0.6;
}

.error-message {
    color: #dc3545;
    padding: 12px 0;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.success-message {
    color: #28a745;
    padding: 12px 0;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.login-form {
    margin-top: 32px;
}

.login-2fa-hint {
    margin-top: 16px;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-size: 15px;
}
.login-form-2fa .login-button { margin-top: 16px; }
.login-2fa-resend { margin-top: 16px; font-size: 14px; }
.login-2fa-resend a { color: #0d6efd; }
.login-back-link { margin-top: 24px; font-size: 14px; }
.login-back-link a { color: #1a1a1a; }

.login-form-group {
    margin-bottom: 24px;
}

.login-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
}

.login-form-group input,
.login-form .wizard-form-group input[type="text"],
.login-form .wizard-form-group input[type="email"],
.login-form .wizard-form-group input[type="password"],
body.page-register #registerForm .wizard-form-group:has(> label) input.input-field,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="text"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="email"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="password"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="date"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="tel"] {
    width: 100%;
    padding: 12px 18px;
    border: 1.5px solid #e9ecef;
    border-radius: 0 9999px 9999px 9999px;
    font-size: 16px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #1a1a1a;
    box-sizing: border-box;
}

.login-form-group input:focus,
.login-form .wizard-form-group input[type="text"]:focus,
.login-form .wizard-form-group input[type="email"]:focus,
.login-form .wizard-form-group input[type="password"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input.input-field:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="text"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="email"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="password"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="date"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="tel"]:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

.login-form-group input::placeholder,
.login-form .wizard-form-group input::placeholder,
body.page-register #registerForm .wizard-form-group input::placeholder {
    color: #adb5bd;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.login-button:hover {
    background: #1f2937;
}

.login-button:active {
    background: #1a1a1a;
}

.links {
    text-align: center;
    margin-top: 32px;
}

.links a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}

.links a:hover {
    color: #6c757d;
}

.hidden {
    display: none;
}

/* Input validation states */
input[style*="border-color: #c62828"] {
    border-bottom-color: #dc3545 !important;
}

/* Live Validation States */
.input-field.validating {
    border-bottom-color: #ffc107 !important;
}

.input-field.valid {
    border-bottom-color: #28a745 !important;
}

.input-field.invalid {
    border-bottom-color: #dc3545 !important;
}

.select-field.validating {
    border-bottom-color: #ffc107 !important;
}

.select-field.valid {
    border-bottom-color: #28a745 !important;
}

.select-field.invalid {
    border-bottom-color: #dc3545 !important;
}

/* Validation message */
.validation-message {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
    transition: opacity 0.2s ease;
}

.validation-message.validating {
    color: #ffc107;
}

.validation-message.valid {
    color: #28a745;
}

.validation-message.invalid {
    color: #dc3545;
}

/* Gender Toggle */
.gender-toggle {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wizard-form-group--gender-inline .gender-toggle {
    margin-top: 0;
}

/* Compact gender toggle for Grunddaten step */
.wizard-step-grunddaten .gender-toggle {
    margin-top: 4px;
}

.wizard-step-grunddaten .wizard-form-group--gender-inline .gender-toggle {
    margin-top: 0;
}

.wizard-step-grunddaten .gender-toggle-btn {
    width: 60px;
    height: 60px;
}

.gender-toggle-text {
    display: none;
}

.gender-toggle-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.gender-toggle-btn:hover {
    transform: scale(1.05);
}

.gender-toggle-btn:active {
    transform: scale(0.95);
}

/* Weiblich - Rosa/Pink */
.gender-toggle-btn[data-gender="w"] {
    border-color: #ff69b4;
    background: #fff0f5;
}

.gender-toggle-btn[data-gender="w"]:hover {
    border-color: #ff1493;
    background: #ffe4e9;
}

.gender-toggle-btn[data-gender="w"] .gender-icon {
    color: #db2777;
}

/* Männlich - Blau */
.gender-toggle-btn[data-gender="m"] {
    border-color: #4169e1;
    background: #f0f8ff;
}

.gender-toggle-btn[data-gender="m"]:hover {
    border-color: #1e90ff;
    background: #e6f3ff;
}

.gender-toggle-btn[data-gender="m"] .gender-icon {
    color: #2563eb;
}

.gender-toggle-btn[data-gender="unknown"] {
    border-color: rgba(17, 24, 39, 0.28);
    border-style: dashed;
    background: #f9fafb;
}

.gender-toggle-btn[data-gender="unknown"] .gender-icon {
    color: #64748b;
}

.gender-toggle-btn[data-gender="unknown"]:hover {
    border-color: rgba(17, 24, 39, 0.4);
    border-style: dashed;
    background: #f3f4f6;
}

/* Other — neutral gray, same background as unknown */
.gender-toggle-btn[data-gender="d"] {
    border-color: #d1d5db;
    border-style: solid;
    background: #f9fafb;
}

.gender-toggle-btn[data-gender="d"]:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.gender-toggle-btn[data-gender="d"] .gender-icon {
    color: #64748b;
}

.gender-icon-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gender-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    color: #1a1a1a;
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.2s ease;
    pointer-events: none;
}

.gender-toggle-btn[data-gender="w"] .gender-icon-female {
    opacity: 1;
    transform: scale(1);
}

.gender-toggle-btn[data-gender="m"] .gender-icon-male {
    opacity: 1;
    transform: scale(1);
}

.gender-toggle-btn[data-gender="unknown"] .gender-icon-unknown {
    opacity: 1;
    transform: scale(1);
}

.gender-toggle-btn[data-gender="d"] .gender-icon-other {
    opacity: 1;
    transform: scale(1);
}

/* Country Select Dropdown */
.country-select-wrapper {
    position: relative;
    margin-top: 8px;
}

.country-select-btn {
    width: 100%;
    padding: 16px;
    border: none;
    background: transparent;
    border-bottom: 2px solid #e9ecef;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.country-select-btn:hover {
    border-bottom-color: #1a1a1a;
}

.country-select-btn[aria-expanded="true"] {
    border-bottom-color: #1a1a1a;
    border-bottom-width: 3px;
}

.country-select-display {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.country-placeholder {
    color: #6c757d;
}

.country-name {
    color: #1a1a1a;
    font-weight: 500;
}

.country-select-arrow {
    color: #6c757d;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.country-select-btn[aria-expanded="true"] .country-select-arrow {
    transform: rotate(180deg);
}

.country-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: none;
    flex-direction: column;
    margin-top: 4px;
}

.country-select-dropdown.open {
    display: flex;
}

.country-select-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
}

.country-search-input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.country-search-input:focus {
    border-color: #1a1a1a;
}

.search-icon {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.country-select-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.country-option:hover {
    background-color: #f8f9fa;
}

.country-option[aria-selected="true"] {
    background-color: #e9ecef;
    font-weight: 500;
}

.country-flag {
    width: 20px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e9ecef;
}

.country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* City Select Styles - Similar to Country Select */
.city-select-wrapper {
    position: relative;
    margin-top: 8px;
}

.city-select-btn {
    width: 100%;
    padding: 16px;
    border: none;
    background: transparent;
    border-bottom: 2px solid #e9ecef;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.city-select-btn:hover {
    border-bottom-color: #1a1a1a;
}

.city-select-btn[aria-expanded="true"] {
    border-bottom-color: #1a1a1a;
    border-bottom-width: 3px;
}

.city-select-display {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.city-placeholder {
    color: #6c757d;
}

.city-name {
    color: #1a1a1a;
    font-weight: 500;
}

.city-select-arrow {
    color: #6c757d;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.city-select-btn[aria-expanded="true"] .city-select-arrow {
    transform: rotate(180deg);
}

.city-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: none;
    flex-direction: column;
    margin-top: 4px;
}

.city-select-dropdown.open {
    display: flex;
}

.city-select-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
}

.city-search-input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.city-search-input:focus {
    border-color: #1a1a1a;
}

.city-select-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.city-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.city-option:hover {
    background-color: #f8f9fa;
}

.city-option[aria-selected="true"] {
    background-color: #e9ecef;
    font-weight: 500;
}

.city-option-name {
    color: #1a1a1a;
}

.country-option-name {
    color: #1a1a1a;
    font-size: 14px;
}

/* Phone Input with Country Code Selector */
.phone-input-container {
    position: relative;
}

/* Validation message for phone input should appear below the input container */
.wizard-form-group .phone-input-container + .validation-message {
    position: static;
    display: block;
    width: 100%;
    margin-top: 4px;
    clear: both;
}

/* Ensure validation message doesn't appear inside phone-input-container */
.phone-input-container .validation-message {
    display: none !important;
}

.phone-input-container {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 2px solid #e9ecef;
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
}

.phone-input-container:focus-within {
    border-bottom-color: #1a1a1a;
    border-bottom-width: 2px; /* Same as other fields */
    outline: none !important;
    box-shadow: none !important;
}

.phone-input-inner {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    gap: 0;
}

/* Validation states for phone input container - same as other fields */
.phone-input-container.validating {
    border-bottom-color: #ffc107 !important;
    border-bottom-width: 2px; /* Same as other fields */
}

.phone-input-container.valid {
    border-bottom-color: #28a745 !important;
    border-bottom-width: 2px; /* Same as other fields */
}

.phone-input-container.invalid {
    border-bottom-color: #dc3545 !important;
    border-bottom-width: 2px; /* Same as other fields */
}

.phone-country-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.phone-country-btn:hover {
    background-color: #f8f9fa;
}

.phone-country-btn.active {
    background-color: #f8f9fa;
}

.phone-country-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-country-flag {
    font-size: 18px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px; /* Ensure enough space for flag */
    flex-shrink: 0;
}

.phone-country-flag .phone-country-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #e9ecef;
    display: block;
}

.phone-country-code {
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

.phone-country-arrow {
    color: #6c757d;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.phone-country-btn[aria-expanded="true"] .phone-country-arrow {
    transform: rotate(180deg);
}

.phone-number-input {
    flex: 1;
    padding: 16px 0;
    border: none !important;
    border-bottom: none !important; /* Ensure no bottom border on input itself */
    background: transparent;
    font-size: 16px;
    color: #1a1a1a;
    outline: none !important;
    box-shadow: none !important;
}

.phone-number-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Override any input-field styles that might add borders */
.phone-number-input.input-field {
    border: none !important;
    border-bottom: none !important;
}

/* Override validation states for phone input - container handles the border */
.phone-number-input.input-field.validating,
.phone-number-input.input-field.valid,
.phone-number-input.input-field.invalid {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.phone-number-input.input-field.validating:focus,
.phone-number-input.input-field.valid:focus,
.phone-number-input.input-field.invalid:focus {
    outline: none !important;
    box-shadow: none !important;
}

.phone-number-input::placeholder {
    color: #6c757d;
}

.phone-country-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    display: none;
    flex-direction: column;
    margin-top: 4px;
}

.phone-country-dropdown.open {
    display: flex;
}

.phone-country-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
}

.phone-country-search-input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.phone-country-search-input:focus {
    border-color: #1a1a1a;
}

.phone-country-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.phone-country-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.phone-country-option:hover {
    background-color: #f8f9fa;
}

.phone-country-option[aria-selected="true"] {
    background-color: #e9ecef;
    font-weight: 500;
}

.phone-country-option-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.phone-country-option-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #e9ecef;
    display: block;
}

.phone-country-option-code {
    display: none; /* Hide country code letters, show only flag */
}

.phone-country-option-prefix {
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
    min-width: 50px;
    flex-shrink: 0;
}

.phone-country-option-name {
    color: #1a1a1a;
    font-size: 14px;
    flex: 1;
}

/* Dark Mode for Phone Input */
body.dark-mode .phone-input-container {
    border-bottom-color: #1a1a1a;
}

body.dark-mode .phone-input-container:focus-within {
    border-bottom-color: #e5e7eb;
}

body.dark-mode .phone-country-btn:hover,
body.dark-mode .phone-country-btn.active {
    background-color: #1a1a1a;
}

body.dark-mode .phone-country-code {
    color: #e5e7eb;
}

body.dark-mode .phone-number-input {
    color: #e5e7eb;
}

body.dark-mode .phone-number-input::placeholder {
    color: #6c757d;
}

body.dark-mode .phone-country-dropdown {
    background: #1a1a1a;
    border-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .phone-country-search {
    border-bottom-color: #1a1a1a;
}

body.dark-mode .phone-country-search-input {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #e5e7eb;
}

body.dark-mode .phone-country-search-input:focus {
    border-color: #e5e7eb;
}

body.dark-mode .phone-country-option:hover {
    background-color: #1a1a1a;
}

body.dark-mode .phone-country-option[aria-selected="true"] {
    background-color: #1a1a1a;
}

body.dark-mode .phone-country-option-prefix,
body.dark-mode .phone-country-option-name {
    color: #e5e7eb;
}

body.dark-mode .phone-country-option-flag-img {
    border-color: #4b5563;
}

/* Select Dropdown */
.select-field {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #e9ecef;
    font-size: 16px;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 top 50%;
    padding-right: 24px;
}

.select-field:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
}

.select-field option {
    background: #ffffff;
    color: #1a1a1a;
}

/* Name Preview */
.name-preview-container {
    margin: 40px 0;
    padding: 40px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    width: 100%;
    overflow: visible;
}

/* Compact name preview for Grunddaten step */
.wizard-step-grunddaten .name-preview-container {
    margin: 0 0 100px 0;
    padding: 24px 0; /* Symmetrischer Abstand oben und unten */
}

.name-preview-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    min-height: auto;
    width: 100%;
    position: relative;
    overflow: visible;
}

/* Compact name preview row for Grunddaten step */
.wizard-step-grunddaten .name-preview-main-row {
    min-height: 60px;
    margin-bottom: 0;
}

.name-preview-main {
    font-size: 80px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
    z-index: 1;
}

.name-preview-main span {
    display: inline-block;
    font-weight: 600;
}

/* Name preview display - simple large text */
.name-preview-display {
    font-size: 80px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    padding: 0;
}

/* Larger name preview for Grunddaten step */
.wizard-step-grunddaten .name-preview-display {
    font-size: 64px; /* Größer als vorher (48px) */
    min-height: auto;
    margin-bottom: 0; /* Kein zusätzlicher Abstand unten */
    line-height: 1;
}

.name-preview-text {
    display: inline;
    font-size: 80px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    text-align: center;
    overflow: visible;
    position: relative;
}

.name-preview-display .name-placeholder {
    display: inline;
    font-size: 80px;
    font-weight: 400;
    line-height: 1.2;
}

.name-placeholder-main {
    color: #adb5bd;
    font-weight: 400;
    display: inline;
}

.name-placeholder-geb {
    color: #ced4da;
    font-weight: 300;
    display: inline;
    font-size: inherit; /* Inherit from parent, but will be overridden for Grunddaten */
}

.wizard-step-grunddaten .name-placeholder-geb {
    font-size: 48px; /* Match the actual geb prefix size (64px name / 48px geb) */
}

.name-placeholder-spitzname {
    display: block;
    font-size: 32px;
    font-weight: 300;
    color: #ced4da;
    line-height: 1.2;
    text-align: center;
    margin-top: 12px;
    font-style: italic;
}

/* Larger text for Grunddaten step */
.wizard-step-grunddaten .name-preview-text,
.wizard-step-grunddaten .name-preview-display .name-placeholder {
    font-size: 64px; /* Größer als vorher (48px) */
}

.wizard-step-grunddaten .name-placeholder-spitzname {
    font-size: 24px;
    margin-top: 20px;
}

.name-preview-spitzname {
    font-size: 32px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.2;
    text-align: center;
    margin-top: 12px;
    display: block;
    font-style: italic;
    width: 100%;
}

.wizard-step-grunddaten .name-preview-spitzname {
    font-size: 24px;
    margin-top: 20px; /* Mehr Abstand vom Namen */
}

.name-preview-geb-prefix {
    color: #6c757d;
    font-weight: 400;
}

.name-preview-geb-value {
    color: #1a1a1a;
    font-weight: 600;
}

.wizard-step-grunddaten .name-preview-geb-prefix,
.wizard-step-grunddaten .name-preview-geb-value {
    font-size: 48px; /* Kleiner als der Name (64px) */
}

/* Dark mode */
body.dark-mode .name-preview-geb-prefix {
    color: #adb5bd;
}

body.dark-mode .name-preview-geb-value {
    color: #e5e7eb;
}

.name-preview-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-preview-titel {
    flex-shrink: 0;
    position: absolute;
    right: calc(50% + 0px);
    transform: translateX(-100%);
    margin-right: 12px;
    z-index: 2;
    min-width: 0;
}

.name-preview-namenszusatz {
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    transform: translateX(12px);
    z-index: 2;
    min-width: 0;
}

.name-preview-geburtsname-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 80px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-top: 12px;
    white-space: nowrap;
}

.name-preview-geburtsname-display .name-preview-label {
    font-size: 80px;
    font-weight: 600;
    color: #6c757d;
}

.name-preview-geburtsname-text {
    font-size: 80px;
    font-weight: 600;
    color: #1a1a1a;
}

.name-preview-select {
    font-size: 80px;
    padding: 0;
    padding-right: 32px;
    border: none;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 top 50%;
    width: auto;
    min-width: 0;
    max-width: none;
    font-weight: 400;
    line-height: 1;
    height: auto;
    flex-shrink: 0;
}

.name-preview-select option {
    font-size: 16px;
    padding: 8px 12px;
}

.name-preview-select option:first-child {
    color: #adb5bd;
}

.name-preview-select:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
}

.name-preview-input {
    font-size: 16px;
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid #e9ecef;
    background: transparent;
    color: #1a1a1a;
    transition: border-color 0.2s ease;
    min-width: 200px;
    font-weight: 500;
    flex: 1;
}

.name-preview-field label {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    margin-right: 8px;
    white-space: nowrap;
}

.name-preview-input:focus {
    outline: none;
    border-bottom-color: #1a1a1a;
}

.name-preview-input::placeholder {
    color: #adb5bd;
    font-weight: 400;
}

.name-preview-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.name-inputs-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
    width: 100%;
}

.name-input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

/* Compact name input fields for Grunddaten step */
.wizard-step-grunddaten .name-input-field {
    min-width: 0;
    margin: 0;
}

.wizard-step-grunddaten .name-input-field label {
    font-size: 12px;
    margin-bottom: 4px;
}

.name-input-field label {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.name-preview-secondary .name-preview-field {
    flex-direction: row;
    align-items: center;
    align-items: flex-start;
    gap: 6px;
}

.name-preview-secondary label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.name-fields-container {
    margin-top: 40px;
}

.name-field-row {
    margin-bottom: 24px;
}

/* Responsive */
/* Location Map Styles */
.location-map-container {
    margin-top: 16px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Fullscreen background map for wizard location step - only when step is visible and not hidden */
.wizard-content > div:not(.hidden):has(.location-map-container) .location-map-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    flex-direction: column !important;
}

.wizard-content > div:not(.hidden):has(.location-map-container) .location-map-wrapper {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.wizard-content > div:not(.hidden):has(.location-map-container) .location-map {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
}

.wizard-content > div:not(.hidden):has(.location-map-container) .location-list-container {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    max-height: calc(100vh - 40px) !important;
    z-index: 10 !important;
    flex: 0 0 auto !important;
    min-width: 300px !important;
}

body.dark-mode .wizard-content > div:not(.hidden):has(.location-map-container) .location-list-container {
    background: rgba(26, 26, 26, 0.95) !important;
}

/* Ensure wizard navigation and buttons are above the map - only on location step */
body:has(.wizard-content > div:not(.hidden):has(.location-map-container)) .wizard-island,
body:has(.wizard-content > div:not(.hidden):has(.location-map-container)) .wizard-buttons-island {
    position: relative !important;
    z-index: 100 !important;
}

.location-map-wrapper {
    flex: 1;
    min-width: 0;
}

.location-map {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    overflow: hidden;
}

.location-list-container {
    flex: 0 0 300px;
    min-width: 300px;
}

.location-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.location-list::-webkit-scrollbar {
    width: 6px;
}

.location-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.location-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.location-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.location-list-empty {
    padding: 24px;
    text-align: center;
    color: #6c757d;
    font-size: 14px;
    background: #f8f9fa;
    border-radius: 8px;
}

.location-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 16px;
}

.location-list-item-content {
    flex: 1;
}

.location-list-item-content strong {
    display: block;
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 15px;
}

.location-list-item-address {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.4;
}

.btn-location-remove {
    background: #dc3545;
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
    padding: 0;
    line-height: 1;
}

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

.location-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.location-dialog-content {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.location-dialog-content h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.location-dialog-field {
    margin-bottom: 20px;
}

.location-dialog-field label {
    display: block;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 14px;
}

.location-dialog-field input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s ease;
    background: #ffffff;
    color: #1a1a1a;
}

.location-dialog-field input:focus {
    outline: none;
    border-color: #1a1a1a;
}

.location-dialog-field input[readonly] {
    background: #f8f9fa;
    color: #6c757d;
}

.location-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.btn-location-cancel,
.btn-location-save {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-location-cancel {
    background: #e9ecef;
    color: #1a1a1a;
}

.btn-location-cancel:hover {
    background: #dee2e6;
}

.btn-location-save {
    background: #1a1a1a;
    color: #ffffff;
}

.btn-location-save:hover {
    background: #1a1a1a;
}

/* Leaflet Geocoder Styles Override */
.leaflet-control-geocoder {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leaflet-control-geocoder-form input {
    padding: 10px 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
}

/* Full width container for location step */
.wizard-content > div:has(.location-map-container) .container,
body:has(.location-map-container:not(.hidden)) .container {
    max-width: 1000px !important;
}

/*
 * Profil-Vorschau: echte Vollfläche (Kante an Kante). Fixiert unter dem Viewport,
 * Wizard-Köpfe/-Buttons schweben darüber. Klasse: wizard.js → kinma-wizard-profile-preview-step.
 */
body.kinma-wizard-profile-preview-step,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)),
body:has(> #profile-preview-wrapper) {
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Kein seitlicher Body-Padding: sonst wirkt es wie ein Rand: In Dark Mode (#1a1a1a) sichtbar */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Vorfahren-Filter/Transform machen fixed ans „kleine“ Box gebunden — Viewport-Bezug erzwingen */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

html:has(body.kinma-wizard-profile-preview-step),
html:has(body:has(> #profile-preview-wrapper)) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

body.kinma-wizard-profile-preview-step #profile-preview-wrapper,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper {
    position: fixed !important;
    /* Nur inset + width/height auto: volle Viewport-Box; kein 100% (sonst Inhalt schmaler als Scrollport → Streifen rechts). */
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    /* Innerhalb von .wizard-form-layer: unter den Insel-Geschwistern (die z-index 1002 haben) */
    z-index: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    box-sizing: border-box !important;
    /* Global scrollbars.css: 3px dunkler Balken — wirkt wie Lücke am rechten Rand; Scroll per Rad/Touch bleibt */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Register-Vorschau: im Form-Layer scrollen (register-wizard-layout.css), nicht viewport-fixed */
body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper,
body.page-register:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
}

body.kinma-wizard-profile-preview-step #profile-preview-wrapper::-webkit-scrollbar,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper::-webkit-scrollbar,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Dark Mode: volle Fläche wie Body, falls 1px-Lücke — kein grauer Ring */
body.dark-mode.kinma-wizard-profile-preview-step #profile-preview-wrapper,
body.dark-mode:has(> #profile-preview-wrapper) #profile-preview-wrapper,
body.dark-mode:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper {
    background-color: #1a1a1a;
}

body.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-background,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper .profile-background,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper .profile-background {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
}

body.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-content-new,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper .profile-content-new,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper .profile-content-new {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-banner-new,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper .profile-banner-new,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper .profile-banner-new {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Abstand unten, damit der fixierte Button-Balken nichts verdeckt */
body.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-menu-surface,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) #profile-preview-wrapper .profile-menu-surface,
body:has(> #profile-preview-wrapper) #profile-preview-wrapper .profile-menu-surface {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

body.kinma-wizard-profile-preview-step .wizard-layout,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout,
body:has(> #profile-preview-wrapper) .wizard-layout {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: transparent !important;
    pointer-events: none;
    overflow: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.kinma-wizard-profile-preview-step .wizard-layout .wizard-island-top,
body.kinma-wizard-profile-preview-step .wizard-layout .wizard-buttons-island,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-island-top,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-buttons-island,
body:has(> #profile-preview-wrapper) .wizard-layout .wizard-island-top,
body:has(> #profile-preview-wrapper) .wizard-layout .wizard-buttons-island {
    pointer-events: auto;
    z-index: 1002 !important;
}

/* Desktop: obere Insel sonst top:40px → Lücke zur Fensterkante */
body.kinma-wizard-profile-preview-step .wizard-island.wizard-island-top,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-island.wizard-island-top,
body:has(> #profile-preview-wrapper) .wizard-island.wizard-island-top {
    top: max(0px, env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
}

body.kinma-wizard-profile-preview-step .wizard-island.wizard-island-bottom,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-island.wizard-island-bottom,
body:has(> #profile-preview-wrapper) .wizard-island.wizard-island-bottom {
    bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
}

body.kinma-wizard-profile-preview-step .wizard-layout .wizard-form-layer,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-form-layer,
body:has(> #profile-preview-wrapper) .wizard-layout .wizard-form-layer {
    position: relative;
    z-index: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

body.kinma-wizard-profile-preview-step .wizard-layout .wizard-form-layer .container,
body:has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-form-layer .container,
body:has(> #profile-preview-wrapper) .wizard-layout .wizard-form-layer .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* File Upload Styles */
.file-uploads-form-group {
    margin-top: 24px;
}

.file-upload-section {
    margin-bottom: 32px;
}

.file-upload-label {
    display: block;
    margin-bottom: 12px;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 15px;
}

.file-upload-area {
    border: 2px dashed #e9ecef;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-unified {
    min-height: 300px;
    width: 100%;
}

.file-upload-area:hover {
    border-color: #1a1a1a;
    background: #f8f9fa;
}

.file-upload-area.dragover {
    border-color: #1a1a1a;
    background: #f0f0f0;
    border-style: solid;
}

.file-upload-profile,
.file-upload-banner {
    min-height: 200px;
}

.file-upload-profile {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.file-upload-banner {
    min-height: 150px;
    width: 100%;
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.file-upload-icon {
    font-size: 48px;
    line-height: 1;
}

.file-upload-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.file-upload-primary {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 16px;
}

.file-upload-secondary {
    display: block;
    color: #6c757d;
    font-size: 14px;
}

.file-upload-format {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.file-upload-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-profile .file-upload-preview {
    border-radius: 50%;
    overflow: hidden;
}

.file-upload-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-upload-profile .file-upload-image {
    border-radius: 50%;
}

.file-upload-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
    padding: 0;
    line-height: 1;
}

.file-upload-remove:hover {
    background: #dc3545;
}

.file-upload-list {
    width: 100%;
    padding: 16px;
}

.file-upload-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-upload-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 16px;
}

.file-upload-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.file-upload-item-name {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 14px;
    word-break: break-word;
}

.file-upload-item-size {
    color: #6c757d;
    font-size: 12px;
}

.file-upload-item-remove {
    background: #dc3545;
    color: #ffffff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
    padding: 0;
    line-height: 1;
}

.file-upload-item-remove:hover {
    background: #c82333;
}

.file-upload-item--with-purpose {
    align-items: flex-start;
}

.file-upload-item-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-upload-item-thumb-doc {
    font-size: 28px;
    line-height: 1;
}

.file-upload-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-upload-item-purpose-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.file-upload-item-purpose-label {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}

.file-upload-item-purpose-select {
    flex: 1;
    min-width: 160px;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

/* Relationships Form */
.relationships-form {
    margin: 30px 0;
}

.relationship-entry {
    margin-bottom: 12px;
}

.relationship-select-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.relationship-type-select {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 15px;
    background: #ffffff;
}

.relationship-type-select:focus {
    outline: none;
    border-color: #1a1a1a;
}

.relationship-member-select {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 15px;
    background: #ffffff;
}

.relationship-member-select:focus {
    outline: none;
    border-color: #1a1a1a;
}

.relationship-remove-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #dc3545;
    color: #ffffff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

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

/* Name analysis: Popup + geblurter Hintergrund (kein schweres Vollbild-Modal) */
.name-analysis-popout-layer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.name-analysis-popout-layer[hidden] {
    display: none !important;
}

.name-analysis-popout-layer:not([hidden]) {
    display: block !important;
    pointer-events: auto;
}

.name-analysis-popout-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}

.name-analysis-popout-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: min(500px, calc(100vw - 32px));
    max-width: 500px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.name-analysis-popout {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.06),
        0 12px 28px rgba(15, 23, 42, 0.14);
    border: 1px solid #e9ecef;
}

body.name-analysis-popout-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .name-analysis-popout-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 23, 42, 0.45);
    }
}

.analysis-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.analysis-feedback-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.analysis-feedback-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: color 0.2s ease, transform 0.2s ease;
}

.analysis-feedback-toggle:hover {
    color: #1a1a1a;
}

.analysis-feedback-toggle svg {
    transition: transform 0.2s ease;
}

.analysis-feedback-content {
    display: block;
}

.analysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.analysis-item:last-of-type {
    border-bottom: none;
}

.analysis-item label {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 16px;
}

.analysis-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.analysis-value span {
    color: #1a1a1a;
    font-size: 14px;
    text-align: right;
    word-break: break-word;
}

.analysis-edit-btn {
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    color: #6c757d;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.analysis-edit-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #1a1a1a;
}

.analysis-feedback-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    justify-content: center;
}

.analysis-correct-btn,
.analysis-wrong-btn {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1a1a1a;
}

.analysis-correct-btn:hover {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.analysis-wrong-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.analysis-correct-btn:disabled,
.analysis-wrong-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark Mode */
body.dark-mode .name-analysis-feedback {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .name-analysis-feedback:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

body.dark-mode .analysis-feedback-header h3 {
    color: #e5e7eb;
}

body.dark-mode .analysis-feedback-toggle {
    color: #adb5bd;
}

body.dark-mode .analysis-feedback-toggle:hover {
    color: #e5e7eb;
}

body.dark-mode .analysis-item {
    border-bottom-color: #1a1a1a;
}

body.dark-mode .analysis-item label {
    color: #adb5bd;
}

body.dark-mode .analysis-value span {
    color: #e5e7eb;
}

body.dark-mode .analysis-edit-btn {
    border-color: #1a1a1a;
    color: #adb5bd;
}

body.dark-mode .analysis-edit-btn:hover {
    background: #1a1a1a;
    border-color: #6c757d;
    color: #e5e7eb;
}

body.dark-mode .analysis-feedback-actions {
    border-top-color: #1a1a1a;
}

body.dark-mode .analysis-correct-btn,
body.dark-mode .analysis-wrong-btn {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #e5e7eb;
}

body.dark-mode .analysis-correct-btn:hover {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

body.dark-mode .analysis-wrong-btn:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

/* ============================================
   LOGIN MENU - MOBILE VERSION
   ============================================ */

/* Extra small mobile devices */

/* Desktop labels under buttons: force much smaller text */
@media (min-width: 1025px) {
    .left-nav-cluster .nav-label,
    .left-nav-cluster .utility-label,
    .left-nav-cluster .nav-label .island-hover-label-track,
    .left-nav-cluster .utility-label .island-hover-label-track {
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .left-nav-cluster .nav-item,
    .left-nav-cluster .utility-btn {
        gap: 4px !important;
    }

    .left-nav-cluster .nav-item.active .nav-label,
    .left-nav-cluster .utility-btn.active .utility-label {
        font-weight: 700 !important;
    }

    /* No text label for profile button */
    .left-nav-cluster .nav-item.nav-profile .nav-label {
        display: none !important;
    }
}
/* ============================================
   REGISTER MENU - MOBILE VERSION
   ============================================ */

/* Extra small mobile devices */