* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background: #0b1120;
    --sidebar: #111827;
    --card: #111827;
    --card-light: #172033;
    --input: #1e293b;
    --border: #243047;
    --border-light: #334155;
    --text: #f8fafc;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --danger: #991b1b;
    --danger-light: #fecaca;
    --success: #166534;
    --success-light: #86efac;
    --warning: #d97706;
    --agent: #7c3aed;
    --agent-hover: #6d28d9;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(124, 58, 237, 0.06),
            transparent 28%
        ),
        var(--background);
    color: var(--text);
}

/* ------------------ ALLGEMEIN ------------------ */

button,
input,
textarea,
select {
    font: inherit;
}

button,
summary,
select {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ------------------ LOGIN & REGISTER ------------------ */

.auth-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(135deg, #0b1120, #16213e);
}

.auth-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-card {
    width: 420px;
    max-width: 100%;
    background: #111827;
    padding: 40px;
    border-radius: 18px;
    border: 1px solid #243047;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.auth-card h1 {
    font-size: 34px;
    margin-bottom: 10px;
    text-align: center;
}

.auth-subtitle {
    text-align: center;
    color: #9ca3af;
    margin-bottom: 30px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form label {
    font-size: 14px;
    color: #cbd5e1;
}

.auth-form input {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: #1e293b;
    color: white;
    font-size: 15px;
}

.auth-form input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.auth-form button {
    margin-top: 10px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s;
}

.auth-form button:hover {
    background: #1d4ed8;
}

.auth-link {
    text-align: center;
    margin-top: 25px;
    color: #9ca3af;
}

.auth-link a {
    color: #60a5fa;
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* ------------------ FLASH-MELDUNGEN ------------------ */

.flash-message {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    line-height: 1.5;
}

.flash-message.success {
    background: rgba(20, 83, 45, 0.85);
    border-color: #166534;
}

.flash-message.error {
    background: rgba(127, 29, 29, 0.85);
    border-color: #991b1b;
}

.flash-message.info {
    background: rgba(30, 58, 138, 0.85);
    border-color: #1d4ed8;
}

/* ------------------ APP ------------------ */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    width: 320px;
    height: 100vh;
    flex-shrink: 0;
    background: rgba(17, 24, 39, 0.97);
    border-right: 1px solid var(--border);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: visible;
    z-index: 20;
}

.sidebar::-webkit-scrollbar {
    width: 7px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

.logo {
    padding: 0 10px;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 28px;
    letter-spacing: -0.03em;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar nav > a {
    display: block;
    color: var(--text-soft);
    text-decoration: none;
    padding: 12px;
    border-radius: 11px;
    transition: 0.2s;
}

.sidebar nav > a:hover {
    background: #1e293b;
    color: white;
}

.sidebar nav > a.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

/* ------------------ PROJEKT ERSTELLEN ------------------ */

.create-project-details {
    position: relative;
    margin-top: 2px;
}

.create-project-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    border-radius: 11px;
    color: var(--text-soft);
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.create-project-button:hover,
.create-project-details[open] > .create-project-button {
    background: #1e293b;
    color: white;
}

.create-project-form {
    margin-top: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #0f172a;
    border: 1px solid var(--border-light);
    border-radius: 13px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.create-project-form input[type="text"] {
    width: 100%;
    padding: 10px 11px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 9px;
}

.create-project-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.project-design-row {
    display: grid;
    grid-template-columns: 1fr 52px;
    gap: 8px;
}

.project-design-row input[type="color"] {
    width: 52px;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: var(--input);
    cursor: pointer;
}

.create-project-form button {
    padding: 10px;
    border: none;
    border-radius: 9px;
    background: var(--primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.create-project-form button:hover {
    background: var(--primary-hover);
}

/* ------------------ AGENT ERSTELLEN ------------------ */

.create-agent-details {
    position: relative;
    margin-top: 2px;
}

.create-agent-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    border-radius: 11px;
    color: #ddd6fe;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.create-agent-button:hover,
.create-agent-details[open] > .create-agent-button {
    background: rgba(124, 58, 237, 0.16);
    color: white;
}

.create-agent-form {
    margin-top: 8px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background:
        linear-gradient(
            145deg,
            rgba(30, 22, 55, 0.98),
            rgba(15, 23, 42, 0.98)
        );
    border: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 13px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.create-agent-form label {
    color: #ddd6fe;
    font-size: 12px;
    font-weight: bold;
}

.create-agent-form input,
.create-agent-form select,
.create-agent-form textarea {
    width: 100%;
    padding: 10px 11px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 9px;
}

.create-agent-form textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}

.create-agent-form input:focus,
.create-agent-form select:focus,
.create-agent-form textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.create-agent-form button {
    margin-top: 3px;
    padding: 11px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.create-agent-form button:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    transform: translateY(-1px);
}

/* ------------------ PROJEKTLISTE ------------------ */

.project-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0;
}

.sidebar-section-title {
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.project-group {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: 0.2s;
}

.project-group:hover {
    background: rgba(30, 41, 59, 0.35);
}

.active-project-group {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
}

.project-header {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px;
}

.project-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    color: var(--text-soft);
    text-decoration: none;
    border-radius: 10px;
    transition: 0.2s;
}

.project-link:hover {
    color: white;
    background: #1e293b;
}

.active-project-link {
    color: white;
    font-weight: bold;
}

.project-color {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.project-icon {
    flex-shrink: 0;
    font-size: 16px;
}

.project-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.project-chat-count {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #1e293b;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: bold;
}

/* ------------------ PROJEKTMENÜ ------------------ */

.project-menu-details {
    position: relative;
    flex-shrink: 0;
}

.project-menu-button {
    width: 32px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
}

.project-menu-button:hover,
.project-menu-details[open] > .project-menu-button {
    background: #334155;
    color: white;
}

.project-menu {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 200;
    width: 240px;
    padding: 13px;
    background: #111827;
    border: 1px solid var(--border-light);
    border-radius: 13px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.rename-project-form,
.delete-project-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rename-project-form label {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: bold;
}

.rename-project-form input {
    width: 100%;
    padding: 10px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.rename-project-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.rename-project-form button {
    padding: 9px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.rename-project-form button:hover {
    background: var(--primary-hover);
}

.delete-project-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.delete-project-button {
    width: 100%;
    padding: 9px;
    border: 1px solid #7f1d1d;
    border-radius: 8px;
    background: rgba(127, 29, 29, 0.2);
    color: #fecaca;
    cursor: pointer;
    transition: 0.2s;
}

.delete-project-button:hover {
    background: #7f1d1d;
    color: white;
}

/* ------------------ PROJEKT-UNTERTITEL ------------------ */

.project-subtitle {
    display: block;
    margin: 5px 0 4px;
    padding: 0 8px;
    color: #64748b;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* ------------------ AGENTEN IN PROJEKTEN ------------------ */

.project-agents {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 6px 20px;
}

.agent-sidebar-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #ddd6fe;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}

.agent-sidebar-item:hover {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(124, 58, 237, 0.28);
    color: white;
}

.active-agent-item {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(139, 92, 246, 0.55);
    color: white;
    box-shadow: inset 3px 0 0 #8b5cf6;
}

.inactive-agent-item {
    opacity: 0.58;
}

.agent-sidebar-icon {
    flex-shrink: 0;
    font-size: 15px;
}

.agent-sidebar-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.agent-status-dot.active {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

.agent-status-dot.inactive {
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.13);
}

/* ------------------ CHATS IN PROJEKTEN ------------------ */

.project-chats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 8px 20px;
}

.chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: 0.2s;
}

.chat-item:hover {
    background: rgba(30, 41, 59, 0.75);
}

.active-chat-item {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.45);
}

.chat-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 7px;
    overflow: hidden;
    color: var(--text-soft);
    text-decoration: none;
    border-radius: 9px;
    font-size: 13px;
    transition: 0.2s;
}

.chat-link:hover {
    color: white;
}

.chat-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.empty-project-chats,
.empty-chat-list {
    display: block;
    padding: 8px 10px;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
}

/* ------------------ ANGEHEFTETE CHATS ------------------ */

.pinned-chat {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.28);
}

.pinned-chat .chat-link {
    color: #fde68a;
    font-weight: bold;
}

.pinned-chat:hover {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
}

/* ------------------ CHAT-AKTIONSBUTTONS ------------------ */

.pin-chat-form,
.delete-chat-form {
    margin: 0;
    flex-shrink: 0;
}

.pin-chat-button,
.delete-chat-button,
.rename-chat-button {
    width: 29px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 13px;
    transition: 0.2s;
}

.pin-chat-button:hover,
.rename-chat-button:hover {
    background: #374151;
    transform: scale(1.04);
}

.delete-chat-button:hover {
    background: #7f1d1d;
    transform: scale(1.04);
}

.pinned-chat .pin-chat-button {
    background: rgba(245, 158, 11, 0.12);
}

/* ------------------ CHATMENÜ ------------------ */

.rename-chat-details {
    position: relative;
    flex-shrink: 0;
}

.chat-options-menu {
    position: absolute;
    top: 39px;
    right: -36px;
    z-index: 210;
    width: 250px;
    padding: 13px;
    background: #111827;
    border: 1px solid var(--border-light);
    border-radius: 13px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.rename-chat-form,
.move-chat-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rename-chat-form label,
.move-chat-form label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: bold;
}

.rename-chat-form input,
.move-chat-form select {
    width: 100%;
    padding: 10px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.rename-chat-form input:focus,
.move-chat-form select:focus {
    outline: none;
    border-color: var(--primary);
}

.rename-chat-form button,
.move-chat-form button {
    width: 100%;
    padding: 9px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.rename-chat-form button:hover,
.move-chat-form button:hover {
    background: var(--primary-hover);
}

.move-chat-form {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

/* ------------------ SIDEBAR UNTEN ------------------ */

.sidebar-bottom {
    margin-top: 30px;
    padding: 20px 8px 0;
    border-top: 1px solid var(--border);
}

.sidebar-bottom p {
    margin-bottom: 12px;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.sidebar-bottom button,
.sidebar-bottom a {
    width: 100%;
    display: block;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.sidebar-bottom button:hover,
.sidebar-bottom a:hover {
    background: var(--primary-hover);
}

/* ------------------ HAUPTINHALT ------------------ */

.main-content {
    flex: 1;
    min-width: 0;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
}

.small-text {
    color: var(--text-muted);
    margin-bottom: 5px;
}

header h1 {
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -0.04em;
}

.profile {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.active-project-label,
.active-agent-label {
    width: fit-content;
    max-width: 100%;
    margin-top: 12px;
    padding: 7px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 13px;
}

.active-project-label {
    border: 1px solid var(--border-light);
    background: rgba(30, 41, 59, 0.7);
}

.active-agent-label {
    border: 1px solid rgba(124, 58, 237, 0.4);
    background: rgba(124, 58, 237, 0.13);
    color: #ddd6fe;
}

.agent-active-text,
.agent-inactive-text {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-active-text {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.agent-inactive-text {
    background: rgba(100, 116, 139, 0.18);
    color: #cbd5e1;
}

/* ------------------ AGENTENKARTE ------------------ */

.agent-card {
    margin-bottom: 22px;
    padding: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(31, 23, 54, 0.98),
            rgba(15, 23, 42, 0.98)
        );
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 20px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.agent-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.agent-card-identity {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 17px;
}

.agent-large-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 17px;
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.38);
    font-size: 29px;
    box-shadow: 0 10px 24px rgba(76, 29, 149, 0.2);
}

.agent-card h2 {
    margin-bottom: 7px;
    font-size: 27px;
}

.agent-card p {
    max-width: 700px;
    color: var(--text-muted);
    line-height: 1.6;
}

.agent-status-button {
    flex-shrink: 0;
    padding: 11px 15px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.agent-status-button.deactivate {
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
}

.agent-status-button.deactivate:hover {
    background: rgba(245, 158, 11, 0.22);
}

.agent-status-button.activate {
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.agent-status-button.activate:hover {
    background: rgba(34, 197, 94, 0.22);
}

.agent-project-information {
    margin-top: 20px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    color: var(--text-muted);
    font-size: 14px;
}

.agent-project-information strong {
    color: var(--text-soft);
}

.agent-settings-details {
    margin-top: 17px;
}

.agent-settings-summary {
    padding: 12px 14px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 11px;
    background: rgba(124, 58, 237, 0.08);
    color: #ddd6fe;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.agent-settings-summary:hover,
.agent-settings-details[open] > .agent-settings-summary {
    background: rgba(124, 58, 237, 0.16);
    color: white;
}

.agent-settings-content {
    margin-top: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);
    gap: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.7);
}

.agent-update-form,
.agent-move-form,
.agent-delete-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-update-form {
    grid-row: span 2;
}

.agent-update-form label,
.agent-move-form label {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: bold;
}

.agent-update-form input,
.agent-update-form textarea,
.agent-move-form select {
    width: 100%;
    padding: 11px 12px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 9px;
}

.agent-update-form textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.55;
}

.agent-update-form input:focus,
.agent-update-form textarea:focus,
.agent-move-form select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.13);
}

.agent-update-form button,
.agent-move-form button {
    padding: 11px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.agent-update-form button:hover,
.agent-move-form button:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.agent-move-form {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.42);
}

.agent-delete-form {
    padding: 15px;
    border: 1px solid rgba(127, 29, 29, 0.5);
    border-radius: 12px;
    background: rgba(127, 29, 29, 0.08);
}

.agent-delete-form button {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #7f1d1d;
    border-radius: 9px;
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.agent-delete-form button:hover {
    background: #7f1d1d;
    color: white;
}

/* ------------------ HERO UND FORMULAR ------------------ */

.hero {
    background:
        linear-gradient(
            145deg,
            rgba(17, 24, 39, 0.98),
            rgba(15, 23, 42, 0.98)
        );
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}

.hero-label {
    margin-bottom: 8px !important;
    color: #60a5fa !important;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero h2 {
    margin-bottom: 10px;
    font-size: 27px;
}

.hero p {
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.task-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.task-form textarea {
    width: 100%;
    min-height: 165px;
    padding: 16px;
    resize: vertical;
    margin-bottom: 15px;
    background: var(--input);
    color: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font: inherit;
    line-height: 1.6;
}

.task-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.task-form textarea::placeholder {
    color: #64748b;
}

.task-form input[type="file"] {
    max-width: 100%;
    color: white;
    margin-bottom: 15px;
}

.task-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: #334155;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.task-form input[type="file"]::file-selector-button:hover {
    background: #475569;
}

.project-select-label {
    margin-bottom: 7px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: bold;
}

.project-select {
    width: min(100%, 390px);
    margin-bottom: 16px;
    padding: 11px 12px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 9px;
    cursor: pointer;
}

.project-select:focus {
    outline: none;
    border-color: var(--primary);
}

.task-form button {
    padding: 14px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.task-form button:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

/* ------------------ SCHNELL-AKTIONEN ------------------ */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.quick-actions button {
    min-height: 50px;
    padding: 14px;
    background: var(--card);
    color: #dbeafe;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.quick-actions button:hover {
    background: var(--input);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ------------------ CHAT-PROJEKT- UND AGENTENKARTE ------------------ */

.chat-project-card,
.chat-agent-card {
    margin-top: 20px;
    padding: 17px 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.chat-agent-card {
    border-color: rgba(124, 58, 237, 0.3);
    background:
        linear-gradient(
            135deg,
            rgba(17, 24, 39, 0.98),
            rgba(31, 23, 54, 0.65)
        );
}

.chat-project-card .small-text,
.chat-agent-card .small-text {
    font-size: 12px;
}

.main-move-chat-form,
.main-assign-agent-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-move-chat-form select,
.main-assign-agent-form select {
    min-width: 200px;
    max-width: 340px;
    padding: 10px;
    color: white;
    background: var(--input);
    border: 1px solid var(--border-light);
    border-radius: 9px;
}

.main-move-chat-form button,
.main-assign-agent-form button {
    padding: 10px 14px;
    color: white;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.main-move-chat-form button {
    background: var(--primary);
}

.main-move-chat-form button:hover {
    background: var(--primary-hover);
}

.main-assign-agent-form button {
    background: var(--agent);
}

.main-assign-agent-form button:hover {
    background: var(--agent-hover);
}

/* ------------------ NACHRICHTEN ------------------ */

.answer-card {
    margin-top: 25px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 25px;
}

.answer-card h3 {
    margin-bottom: 18px;
}

.message {
    max-width: 82%;
    margin: 12px 0;
    padding: 14px 16px;
    border-radius: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.user-message {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.assistant-message {
    background: #1f2937;
    margin-right: auto;
    border: 1px solid #293548;
    border-bottom-left-radius: 4px;
}

/* ------------------ RESPONSIVE ------------------ */

@media (max-width: 1150px) {
    .sidebar {
        width: 295px;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-content {
        padding: 32px;
    }

    .agent-settings-content {
        grid-template-columns: 1fr;
    }

    .agent-update-form {
        grid-row: auto;
    }
}

@media (max-width: 900px) {
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .app {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
        padding: 24px;
    }

    .sidebar-bottom {
        margin-top: 20px;
    }

    .project-menu,
    .chat-options-menu {
        right: 0;
    }

    .agent-card-header {
        flex-direction: column;
    }
}

@media (max-width: 650px) {
    .main-content {
        padding: 16px;
    }

    header {
        margin-bottom: 24px;
    }

    header h1 {
        font-size: 28px;
    }

    .profile {
        width: 42px;
        height: 42px;
    }

    .hero,
    .agent-card {
        padding: 20px;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .chat-project-card,
    .chat-agent-card {
        align-items: stretch;
        flex-direction: column;
    }

    .main-move-chat-form,
    .main-assign-agent-form {
        align-items: stretch;
        flex-direction: column;
    }

    .main-move-chat-form select,
    .main-assign-agent-form select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .message {
        max-width: 95%;
    }

    .auth-card {
        padding: 28px 22px;
    }

    .project-menu,
    .chat-options-menu {
        position: fixed;
        top: 50%;
        right: 16px;
        left: 16px;
        width: auto;
        transform: translateY(-50%);
    }

    .agent-card-identity {
        flex-direction: column;
    }

    .agent-settings-content {
        padding: 13px;
    }

    .agent-large-icon {
        width: 54px;
        height: 54px;
        font-size: 25px;
    }
}
/* CRM-Angebote direkt in der Kundenakte */
.offer-create-card {
    border: 1px solid #2a3d59;
    border-radius: 14px;
    background: #111f34;
    margin-bottom: 18px;
    overflow: hidden;
}

.offer-create-card summary {
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 700;
    color: #f5f8ff;
}

.offer-create-card[open] summary {
    border-bottom: 1px solid #2a3d59;
}

.offer-create-form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.offer-create-form textarea,
.offer-create-form input {
    width: 100%;
}

.offer-form-grid,
.offer-note {
    display: grid;
    gap: 7px;
}

.offer-position-head,
.offer-position-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 100px 170px 42px;
    gap: 10px;
    align-items: center;
}

.offer-position-head {
    color: #8fa1bc;
    font-size: 12px;
    font-weight: 700;
    padding: 0 3px;
}

.offer-list-heading {
    color: #8fa1bc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 8px 0 10px;
    text-transform: uppercase;
}

.remove-position {
    padding: 8px 0;
    font-size: 20px;
}

@media (max-width: 900px) {
    .offer-position-head { display: none; }
    .offer-position-row {
        grid-template-columns: 1fr 90px 130px 42px;
    }
}

@media (max-width: 650px) {
    .offer-position-row {
        grid-template-columns: 1fr 1fr;
    }
    .offer-position-row input:first-child { grid-column: 1 / -1; }
}

/* ==================== NOVAAI 5.0 DESIGN SYSTEM ==================== */
:root{--v5-bg:#050b16;--v5-panel:#0b1423;--v5-panel-2:#0e192a;--v5-border:#1c2a3e;--v5-purple:#7c3aed;--v5-purple-2:#a855f7;--v5-blue:#2583ff;--v5-green:#16c784;--v5-red:#ef4444;--v5-gold:#eab308}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 60% -10%,rgba(48,70,120,.16),transparent 30%),#050b16}
.app{background:transparent}.sidebar{width:260px;padding:18px 14px;background:linear-gradient(180deg,rgba(7,14,27,.99),rgba(6,12,23,.98));border-right:1px solid #172337}.logo{font-size:25px;margin-bottom:24px;color:#fff}.logo::first-letter{color:#8b5cf6}.sidebar nav{gap:3px}.sidebar nav>a,.create-project-button,.create-agent-button{padding:10px 12px;border-radius:8px;font-size:14px}.sidebar nav>a.active{background:linear-gradient(90deg,#5b21b6,#7c3aed);box-shadow:0 8px 25px rgba(124,58,237,.25)}.sidebar-section-title{font-size:10px;letter-spacing:.12em;color:#64748b;text-transform:uppercase}.main-content{padding:0 22px 30px;max-width:none;width:calc(100% - 260px)}.main-content>header{height:64px;margin:0 -22px 0;padding:0 24px;border-bottom:1px solid #172337;background:rgba(5,11,22,.82);backdrop-filter:blur(18px);display:flex;align-items:center}.main-content>header .small-text{display:none}.main-content>header h1{font-size:0}.main-content>header h1:after{content:'⌕  Suche nach Kunden, Angeboten, Rechnungen…';display:block;width:min(520px,42vw);padding:11px 16px;border-radius:10px;background:#0b1423;border:1px solid #1b293d;color:#64748b;font-size:13px;font-weight:400}.profile{background:linear-gradient(135deg,#5b21b6,#8b5cf6);box-shadow:0 8px 22px rgba(124,58,237,.3)}
.dashboard-v5{padding-top:10px}.v5-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px}.v5-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#7c8ba1;margin-bottom:5px}.v5-toolbar h2{font-size:26px;letter-spacing:-.03em}.v5-subtitle{margin-top:4px;color:#91a0b4}.v5-toolbar-actions{display:flex;gap:10px}.v5-button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border:1px solid var(--v5-border);border-radius:9px;color:#fff;text-decoration:none;font-weight:700;font-size:13px}.v5-button.primary{background:linear-gradient(90deg,#6d28d9,#8b5cf6);border-color:#8b5cf6}.v5-button.ghost{background:#0b1423}.v5-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}.v5-kpi{min-width:0;display:flex;gap:12px;align-items:flex-start;padding:18px 15px;background:linear-gradient(145deg,#0d1727,#0a1321);border:1px solid var(--v5-border);border-radius:11px;text-decoration:none;color:#fff}.v5-kpi>span:last-child{min-width:0}.v5-kpi small,.v5-kpi strong,.v5-kpi em{display:block}.v5-kpi small{color:#9aa8ba;font-size:12px}.v5-kpi strong{font-size:24px;margin:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v5-kpi em{font-style:normal;color:#22c55e;font-size:11px}.v5-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:20px;flex:0 0 auto}.v5-icon.purple{background:#2e1765}.v5-icon.blue{background:#0e3767}.v5-icon.green{background:#0c4c35}.v5-icon.gold{background:#4c3908;color:#facc15}.v5-icon.red{background:#4c1820}.v5-icon.violet{background:#32175b}.v5-main-grid{display:grid;grid-template-columns:1.25fr .9fr .95fr;gap:14px}.v5-panel{background:linear-gradient(145deg,#0c1626,#091321);border:1px solid var(--v5-border);border-radius:12px;padding:16px;min-width:0}.revenue-panel{grid-column:span 2}.activity-panel{grid-column:3;grid-row:1}.offers-panel{grid-column:1}.tasks-panel{grid-column:2 / span 2}.v5-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.v5-panel h3{font-size:15px}.v5-panel-head p{font-size:11px;color:#718096;margin-top:3px}.v5-panel-head a{color:#9b6cff;text-decoration:none;font-size:11px}.v5-select{font-size:11px;border:1px solid var(--v5-border);padding:7px 10px;border-radius:7px;color:#cbd5e1}.v5-chart{display:flex;height:210px}.chart-y{width:52px;display:flex;flex-direction:column;justify-content:space-between;padding:2px 8px 22px 0;color:#718096;font-size:10px}.chart-area{position:relative;flex:1}.chart-gridlines{position:absolute;inset:0 0 22px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 41px,#172337 42px)}.chart-area svg{position:absolute;inset:0 0 22px;width:100%;height:calc(100% - 22px)}.chart-months{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;color:#718096;font-size:9px}.v5-legend{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #172337;padding-top:12px;font-size:10px;color:#93a1b4}.v5-legend span{display:flex;align-items:center;gap:6px}.v5-legend b{color:#fff}.purple-dot,.red-dot,.green-dot,.blue-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#8b5cf6}.red-dot{background:#ef4444}.green-dot{background:#16c784}.blue-dot{background:#2583ff}.v5-donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px;min-height:210px}.v5-donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#16c784 0 62%,#2583ff 62% 78%,#8b5cf6 78% 92%,#eab308 92% 100%);display:grid;place-items:center}.v5-donut:before{content:'';width:88px;height:88px;border-radius:50%;background:#0b1423;position:absolute}.v5-donut>div{position:relative;text-align:center}.v5-donut strong,.v5-donut small{display:block}.v5-donut strong{font-size:25px}.v5-donut small{color:#91a0b4}.v5-donut-list{display:grid;gap:13px;font-size:11px}.v5-donut-list span{display:flex;align-items:center;gap:7px}.v5-donut-list b{margin-left:auto}.v5-list{display:grid}.v5-list-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:53px;border-top:1px solid #172337}.v5-list-row:first-child{border-top:0}.v5-list-row strong,.v5-list-row small{display:block}.v5-list-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v5-list-row small{font-size:10px;color:#7f8da0;margin-top:2px}.v5-list-row time{font-size:9px;color:#8b99ac;text-align:right}.v5-list-row time.overdue{color:#ef4444}.v5-mini-icon{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:#5c2a0a;color:#fb923c}.v5-mini-icon.green{background:#084c35;color:#34d399}.v5-status{font-size:9px;border-radius:5px;padding:4px 7px;background:#12376a;color:#93c5fd}.v5-check{width:14px;height:14px;border:1px solid #516076;border-radius:3px}.v5-new-task{display:block;text-align:center;border:1px solid #6636b7;color:#a879ff;padding:8px;border-radius:7px;text-decoration:none;font-size:11px;margin-top:8px}.v5-ai-panel{margin-top:14px;padding:16px 18px;background:linear-gradient(135deg,#0d1727,#081320);border:1px solid var(--v5-border);border-radius:12px}.v5-ai-title{font-size:17px;font-weight:800}.v5-ai-title span{font-size:10px;background:#6332b8;padding:3px 7px;border-radius:5px}.v5-ai-panel p{font-size:11px;color:#8d9bad;margin:2px 0 10px}.v5-ai-actions{display:flex;gap:8px;flex-wrap:wrap}.v5-ai-actions button{background:#0b1423;border:1px solid #25334a;color:#cbd5e1;border-radius:8px;padding:8px 12px;font-size:10px}.v5-ai-input{display:flex;gap:8px;margin-top:12px}.v5-ai-input input{flex:1;background:#07101d;border:1px solid #1d2b40;border-radius:10px;padding:12px 14px;color:white}.v5-ai-input button{width:42px;border:0;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#8b5cf6);color:white;font-size:18px}
@media(max-width:1400px){.v5-kpis{grid-template-columns:repeat(3,1fr)}.v5-main-grid{grid-template-columns:1fr 1fr}.revenue-panel,.activity-panel,.offers-panel,.tasks-panel{grid-column:auto;grid-row:auto}.tasks-panel{grid-column:span 2}}
@media(max-width:900px){.sidebar{width:84px}.sidebar .logo{font-size:0}.sidebar .logo:after{content:'⚡';font-size:26px}.sidebar nav>a,.create-project-button,.create-agent-button{font-size:0;text-align:center}.main-content{width:calc(100% - 84px)}.v5-kpis,.v5-main-grid{grid-template-columns:1fr 1fr}.tasks-panel{grid-column:span 2}.v5-toolbar{align-items:flex-start}.main-content>header h1:after{width:48vw}}
@media(max-width:650px){.main-content{padding:0 12px 20px}.v5-toolbar{display:block}.v5-toolbar-actions{margin-top:12px}.v5-kpis,.v5-main-grid{grid-template-columns:1fr}.tasks-panel{grid-column:auto}.revenue-panel{overflow:hidden}.v5-donut-wrap{flex-direction:column}.v5-toolbar h2{font-size:21px}}

/* ================== NOVAAI 5.3 DESIGN SYSTEM ================== */
:root{--v53-bg:#070d19;--v53-surface:#0d1727;--v53-surface-2:#111d30;--v53-line:#1d2b42;--v53-text:#f8fafc;--v53-muted:#8ea0b9;--v53-purple:#7c3aed;--v53-purple-2:#9b4dff;--v53-blue:#2583ff;--v53-green:#18c983;--v53-red:#ef476f;--v53-amber:#f5b942}
.v53-body{background:radial-gradient(circle at 80% 0,rgba(90,44,190,.12),transparent 34%),var(--v53-bg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--v53-text)}
.v53-app{display:flex;min-height:100vh}.v53-sidebar{width:242px;position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--v53-line);background:rgba(7,13,25,.96);display:flex;flex-direction:column;justify-content:space-between;z-index:30}.v53-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;color:#fff;text-decoration:none;font-size:24px;font-weight:850;letter-spacing:-.04em}.v53-brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,#5328ff,#a348ff);box-shadow:0 0 24px rgba(124,58,237,.45)}.v53-nav-label{padding:18px 9px 7px;color:#64748b;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.v53-nav{display:grid;gap:4px}.v53-nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;color:#cbd5e1;text-decoration:none;font-size:14px;transition:.18s}.v53-nav a:hover{background:#101b2e;color:#fff}.v53-nav a.active{background:linear-gradient(90deg,#5225d7,#8737ef);color:#fff;box-shadow:0 8px 24px rgba(85,37,215,.25)}.v53-nav a span{width:18px;text-align:center}.v53-nav em{margin-left:auto;padding:2px 6px;border-radius:999px;background:#2a194f;color:#c4a7ff;font-size:9px;font-style:normal}.v53-nav-muted{opacity:.82}.v53-account{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:13px 9px;border-top:1px solid var(--v53-line)}.v53-avatar,.v53-mini-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#6933db,#9a48f4);color:#fff;font-weight:800}.v53-avatar{width:38px;height:38px}.v53-mini-avatar{width:37px;height:37px}.v53-account-copy{min-width:0}.v53-account-copy strong,.v53-account-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v53-account-copy strong{font-size:13px}.v53-account-copy span{font-size:11px;color:var(--v53-muted);margin-top:3px}.v53-account>a{color:var(--v53-muted);text-decoration:none}.v53-shell{min-width:0;flex:1}.v53-topbar{height:68px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--v53-line);background:rgba(7,13,25,.88);backdrop-filter:blur(18px)}.v53-menu{display:none;background:none;border:0;color:#fff;font-size:22px}.v53-search{width:min(520px,52vw);display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--v53-line);border-radius:10px;background:#0c1626}.v53-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff}.v53-search kbd{padding:3px 6px;border-radius:5px;background:#171d33;color:#aeb9c8;font-size:10px}.v53-top-actions{display:flex;align-items:center;gap:13px;position:relative}.v53-icon-button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6231de,#9b48ff);color:#fff;text-decoration:none;font-size:20px}.v53-notification{position:absolute;right:43px;top:-4px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#ef4444;font-size:9px;font-weight:800}.v53-content{padding:28px 30px 56px;max-width:1500px;margin:0 auto}.v53-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:24px}.v53-eyebrow{color:#a66cff;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.v53-page-head h1{font-size:32px;line-height:1.1;margin:6px 0 7px;letter-spacing:-.035em}.v53-page-head p,.v53-panel-head p{color:var(--v53-muted)}.v53-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.v53-kpi{display:flex;align-items:center;gap:14px;min-height:118px;padding:18px;border:1px solid var(--v53-line);border-radius:14px;background:linear-gradient(145deg,rgba(17,29,48,.95),rgba(10,20,35,.96));box-shadow:0 14px 35px rgba(0,0,0,.12)}.v53-kpi i{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:12px;font-style:normal;font-size:21px;font-weight:800}.v53-kpi i.violet{background:#2f1768;color:#a778ff}.v53-kpi i.blue{background:#102e59;color:#4c9dff}.v53-kpi i.green{background:#0d4735;color:#33df9d}.v53-kpi i.red{background:#551d2c;color:#ff6e8d}.v53-kpi i.amber{background:#513b0e;color:#ffc94f}.v53-kpi span,.v53-kpi small{display:block;color:var(--v53-muted)}.v53-kpi span{font-size:12px}.v53-kpi strong{display:block;margin:5px 0;font-size:24px;letter-spacing:-.025em}.v53-kpi small{font-size:11px}.v53-panel{overflow:hidden;border:1px solid var(--v53-line);border-radius:15px;background:rgba(13,23,39,.96)}.v53-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 13px}.v53-panel-head h2{font-size:17px;margin-bottom:5px}.v53-toolbar{display:flex;gap:10px;padding:13px 20px 17px;border-bottom:1px solid var(--v53-line)}.v53-toolbar.invoice{display:grid;grid-template-columns:1fr 190px auto auto}.v53-field{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid #263650;border-radius:9px;background:#101c2e}.v53-field.search{flex:1}.v53-field input{width:100%;padding:11px 10px 11px 0;border:0;background:transparent;color:#fff;outline:0}.v53-field span{padding-left:12px;color:#71839b}.v53-select{padding:10px 12px;border:1px solid #2b3c57;border-radius:9px;background:#111d30;color:#fff}.v53-select.compact{padding:8px 9px}.v53-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 13px;border:1px solid #293a54;border-radius:9px;background:#111d30;color:#eef2ff;text-decoration:none;font-weight:750;cursor:pointer;white-space:nowrap}.v53-btn:hover{border-color:#6f49d8}.v53-btn.primary{border-color:transparent;background:linear-gradient(135deg,#5b2dde,#913ef1);box-shadow:0 8px 22px rgba(95,42,221,.22)}.v53-btn.compact{padding:8px 10px;font-size:12px}.v53-table-wrap{overflow:auto}.v53-table{width:100%;border-collapse:collapse;min-width:840px}.v53-table th,.v53-table td{padding:15px 20px;text-align:left;border-top:1px solid var(--v53-line);vertical-align:middle}.v53-table th{color:#7f91aa;font-size:10px;text-transform:uppercase;letter-spacing:.11em;background:#0c1728}.v53-table td{font-size:13px}.v53-table tr:hover td{background:rgba(87,52,164,.055)}.v53-table small{display:block;margin-top:4px;color:var(--v53-muted)}.v53-main-link{color:#fff;text-decoration:none;font-weight:700}.v53-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.v53-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#202c40;color:#cbd5e1;font-size:11px;font-weight:750}.v53-badge.violet{background:#2d175e;color:#c5a4ff}.v53-badge.blue,.v53-badge.open{background:#102f55;color:#79b7ff}.v53-badge.paid{background:#103d2f;color:#65dfa9}.v53-badge.overdue{background:#50202a;color:#ff8ca2}.v53-badge.cancelled{background:#2b3442;color:#a9b5c5}.v53-overdue td{background:rgba(112,24,47,.10)}.v53-empty{text-align:center!important;color:var(--v53-muted);padding:40px!important}
@media(max-width:1050px){.v53-kpis{grid-template-columns:repeat(2,1fr)}.v53-sidebar{width:214px}.v53-content{padding:24px 20px}.v53-toolbar.invoice{grid-template-columns:1fr 170px}.v53-toolbar.invoice .v53-btn{width:100%}}
@media(max-width:760px){.v53-sidebar{position:fixed;left:-250px;transition:.2s}.v53-menu-open .v53-sidebar{left:0;box-shadow:20px 0 60px rgba(0,0,0,.45)}.v53-menu{display:block}.v53-topbar{padding:0 15px}.v53-search{width:auto;flex:1;margin:0 12px}.v53-search kbd{display:none}.v53-content{padding:20px 14px}.v53-page-head{align-items:flex-start;flex-direction:column}.v53-kpis{grid-template-columns:1fr}.v53-toolbar,.v53-toolbar.invoice{display:grid;grid-template-columns:1fr}.v53-kpi{min-height:100px}}

/* NovaAI 5.4 – Kundenakte Professional */
.cw-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px}.cw-head h1{margin:7px 0 4px;font-size:34px}.cw-head p,.cw-back{color:var(--v53-muted,#91a0b7)}.cw-back{text-decoration:none;font-size:13px}.cw-head-actions,.cw-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.cw-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.cw-kpis article,.cw-card{background:#0f1b2e;border:1px solid #243550;border-radius:16px;padding:18px}.cw-kpis span,.cw-kpis small{display:block;color:#91a0b7}.cw-kpis strong{display:block;font-size:25px;margin:8px 0 5px}.cw-hero{display:grid;grid-template-columns:auto minmax(240px,1fr) minmax(320px,.9fr);gap:18px;align-items:center;background:linear-gradient(135deg,#111e35,#171636);border:1px solid #2b3a59;border-radius:18px;padding:22px;margin-bottom:16px}.cw-avatar{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#5b21b6,#8b5cf6);font-size:30px;font-weight:800}.cw-identity h2{margin:7px 0 2px;font-size:25px}.cw-identity p{margin:0;color:#9eacc1}.cw-contact-line{display:flex;flex-wrap:wrap;gap:13px;margin-top:13px;color:#cbd5e1;font-size:13px}.cw-badges{display:flex;gap:7px}.cw-ai{border-left:1px solid #354463;padding-left:20px}.cw-ai-title{color:#b98cff;font-weight:800}.cw-ai p{color:#cbd5e1;line-height:1.55;margin-bottom:0}.cw-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.cw-main{overflow:hidden}.cw-tabs{display:flex;overflow:auto;border-bottom:1px solid #253653;padding:0 13px}.cw-tabs button{border:0;background:none;color:#91a0b7;padding:16px 13px;border-bottom:2px solid transparent;font-weight:700;white-space:nowrap}.cw-tabs button.active{color:#fff;border-color:#8b5cf6}.cw-tabs b{background:#252f47;border-radius:99px;padding:2px 7px;margin-left:4px}.cw-tab{display:none;padding:20px}.cw-tab.active{display:block}.cw-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cw-card h3{margin:0 0 14px}.cw-card dl{display:grid;grid-template-columns:110px 1fr;gap:10px;margin:0}.cw-card dt{color:#91a0b7}.cw-card dd{margin:0;overflow-wrap:anywhere}.cw-notes{white-space:pre-wrap;color:#cbd5e1;line-height:1.6}.cw-card-title,.cw-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.cw-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cw-contacts>div{background:#14233a;border:1px solid #2a3b59;border-radius:12px;padding:13px}.cw-contacts strong,.cw-contacts small,.cw-contacts span{display:block}.cw-contacts small,.cw-contacts span,.cw-row small{color:#91a0b7;margin-top:4px}.cw-row{padding:14px;border-bottom:1px solid #263650}.cw-row:last-child{border-bottom:0}.cw-row .done{text-decoration:line-through;color:#7f8ca1}.cw-inline-form{display:grid;grid-template-columns:1fr 150px 120px auto;gap:9px;margin-bottom:12px}.cw-inline-form input,.cw-inline-form select,.cw-form input,.cw-form select,.cw-form textarea{width:100%;box-sizing:border-box;background:#0b1627;color:#eef4ff;border:1px solid #30425f;border-radius:9px;padding:10px}.cw-side{display:grid;gap:14px}.cw-card summary{cursor:pointer;font-weight:800}.cw-form{display:grid;gap:9px;margin-top:14px}.cw-form textarea{min-height:76px}.v53-btn.full{width:100%;margin-top:12px}.cw-timeline>div{display:grid;grid-template-columns:20px 1fr;gap:10px;position:relative;padding-bottom:18px}.cw-timeline i{width:10px;height:10px;background:#8b5cf6;border-radius:50%;margin-top:5px;box-shadow:0 0 0 5px rgba(139,92,246,.12)}.cw-timeline p{margin:5px 0;color:#cbd5e1}.cw-timeline small{color:#7f8da3}@media(max-width:1050px){.cw-grid{grid-template-columns:1fr}.cw-side{grid-template-columns:1fr 1fr}.cw-kpis{grid-template-columns:repeat(2,1fr)}.cw-hero{grid-template-columns:auto 1fr}.cw-ai{grid-column:1/-1;border-left:0;border-top:1px solid #354463;padding:16px 0 0}}@media(max-width:700px){.cw-head{align-items:flex-start;flex-direction:column}.cw-kpis,.cw-two,.cw-contacts,.cw-side{grid-template-columns:1fr}.cw-hero{grid-template-columns:1fr}.cw-inline-form{grid-template-columns:1fr}.cw-contact-line{flex-direction:column}}

/* Kundenakte: E-Mail-Entwürfe */
.cw-email-draft {
    align-items: flex-start;
    gap: 20px;
}

.cw-email-content {
    flex: 1;
    min-width: 0;
}

.cw-email-content > strong,
.cw-email-content > small {
    display: block;
}

.cw-email-content > small {
    margin-top: 5px;
}

.cw-email-body {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(8, 15, 29, 0.45);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

@media (max-width: 850px) {
    .cw-email-draft {
        display: block;
    }

    .cw-email-draft .cw-actions {
        margin-top: 16px;
    }
}

/* NovaAI Markdown-Ausgabe */
.nova-markdown {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.nova-markdown > :first-child {
    margin-top: 0;
}

.nova-markdown > :last-child {
    margin-bottom: 0;
}

.nova-markdown p {
    margin: 0 0 1em;
}

.nova-markdown h1,
.nova-markdown h2,
.nova-markdown h3,
.nova-markdown h4 {
    margin: 1.25em 0 0.55em;
    line-height: 1.25;
}

.nova-markdown ul,
.nova-markdown ol {
    margin: 0.75em 0 1em;
    padding-left: 1.7em;
}

.nova-markdown li {
    margin: 0.3em 0;
}

.nova-markdown blockquote {
    margin: 1em 0;
    padding: 0.7em 1em;
    border-left: 4px solid #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 0 8px 8px 0;
}

.nova-markdown pre {
    margin: 1em 0;
    padding: 1em;
    overflow-x: auto;
    background: #080f1d;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
}

.nova-markdown code {
    padding: 0.15em 0.35em;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, monospace;
}

.nova-markdown pre code {
    padding: 0;
    background: transparent;
}

.nova-markdown table {
    display: block;
    width: 100%;
    margin: 1em 0;
    overflow-x: auto;
    border-collapse: collapse;
}

.nova-markdown th,
.nova-markdown td {
    padding: 0.65em 0.8em;
    border: 1px solid rgba(148, 163, 184, 0.25);
    text-align: left;
}

.nova-markdown th {
    background: rgba(30, 41, 59, 0.85);
}

.nova-markdown a {
    text-decoration: underline;
}

/* Kopieren-Button für KI-Antworten */
.assistant-message {
    position: relative;
}

.assistant-message-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.65rem;
}

.copy-answer-button {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    background: rgba(15, 23, 42, 0.65);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.copy-answer-button:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(148, 163, 184, 0.45);
    transform: translateY(-1px);
}

.copy-answer-button:active {
    transform: translateY(0);
}

/* NovaAI Live-Streaming */
.streaming-message {
    min-height: 130px;
}

.streaming-content {
    white-space: pre-wrap;
}

.streaming-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    opacity: 0.85;
}

.streaming-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.streaming-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    animation: nova-stream-dot 1.15s infinite ease-in-out;
}

.streaming-dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.streaming-dots i:nth-child(3) {
    animation-delay: 0.3s;
}

.streaming-error {
    border-color: rgba(239, 68, 68, 0.55);
}

@keyframes nova-stream-dot {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

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

/* NovaAI Streaming stoppen */
.stop-stream-button {
    background: rgba(185, 28, 28, 0.92) !important;
    border-color: rgba(248, 113, 113, 0.7) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

.stop-stream-button:hover {
    background: rgba(220, 38, 38, 0.98) !important;
}

.streaming-stopped-notice {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Stop-Button während des Streamings sichtbar halten */
.stop-stream-button {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 9999 !important;
    min-width: 150px;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
    .stop-stream-button {
        right: 16px !important;
        bottom: 16px !important;
        min-width: 130px;
    }
}


/* ========================================================
   NovaAI kompaktes Chat-Layout
   ======================================================== */

.nova-chat-layout {
    padding-bottom: 210px !important;
}

/*
 * Eingabefeld dauerhaft am unteren Bildschirmrand.
 */
.task-form.nova-sticky-chat-form {
    position: fixed !important;
    left: 274px !important;
    right: 24px !important;
    bottom: 18px !important;
    z-index: 1000 !important;

    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto !important;
    align-items: end !important;
    gap: 10px !important;

    border: 1px solid rgba(96, 165, 250, 0.28) !important;
    border-radius: 18px !important;

    background:
        rgba(15, 23, 42, 0.96) !important;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.025)
        inset !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

/*
 * Texteingabe kompakt halten.
 */
.task-form.nova-sticky-chat-form textarea {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-height: 54px !important;
    max-height: 150px !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    resize: vertical !important;
    line-height: 1.45 !important;

    border-radius: 13px !important;
}

/*
 * Dateiupload und Button in einer kompakten Zeile.
 */
.task-form.nova-sticky-chat-form input[type="file"] {
    min-width: 0 !important;
    max-width: 290px !important;
    margin: 0 !important;
}

.task-form.nova-sticky-chat-form button[type="submit"] {
    min-width: 150px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 10px 18px !important;

    white-space: nowrap !important;
}

/*
 * Die große Unterhaltungskarte verkleinern.
 */
.answer-card,
.answer-card.nova-compact-answer-card {
    min-height: 0 !important;
    height: auto !important;

    margin-top: 18px !important;
    padding: 18px 22px !important;

    border-radius: 18px !important;
}

/*
 * Überschrift kompakter darstellen.
 */
.answer-card > h3 {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/*
 * Jede Nachricht wird zu einer normalen Chat-Blase.
 */
.answer-card .message {
    position: relative !important;

    width: fit-content !important;
    max-width: min(860px, 86%) !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 10px 0 !important;
    padding: 14px 18px !important;

    line-height: 1.55 !important;
    border-radius: 17px !important;
}

/*
 * Eigene Nachrichten rechts.
 */
.answer-card .user-message {
    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 14px 18px !important;
}

/*
 * KI-Nachrichten links und ohne riesige Leerflächen.
 */
.answer-card .assistant-message {
    margin-left: 0 !important;
    margin-right: auto !important;

    padding:
        16px
        18px
        50px !important;
}

/*
 * Markdown darf keine künstliche Höhe erzeugen.
 */
.answer-card .nova-markdown,
.answer-card .streaming-content {
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Normale Abstände innerhalb einer Antwort.
 */
.answer-card .nova-markdown > :first-child {
    margin-top: 0 !important;
}

.answer-card .nova-markdown > :last-child {
    margin-bottom: 0 !important;
}

.answer-card .nova-markdown p {
    margin: 0.55em 0 !important;
}

.answer-card .nova-markdown ul,
.answer-card .nova-markdown ol {
    margin: 0.65em 0 !important;
    padding-left: 1.5em !important;
}

.answer-card .nova-markdown li {
    margin: 0.25em 0 !important;
}

/*
 * Tabellen kompakt und horizontal scrollbar.
 */
.answer-card .nova-markdown table {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;

    margin: 12px 0 !important;

    overflow-x: auto !important;
    border-collapse: collapse !important;
}

.answer-card .nova-markdown th,
.answer-card .nova-markdown td {
    padding: 8px 11px !important;
    white-space: nowrap !important;
}

/*
 * Codeblöcke ebenfalls kompakter.
 */
.answer-card .nova-markdown pre {
    max-height: 420px !important;
    margin: 12px 0 !important;
    padding: 14px !important;

    overflow: auto !important;
    border-radius: 12px !important;
}

/*
 * Kopieren-Button klein unten rechts platzieren.
 */
.answer-card .copy-answer-button {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    top: auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 6px 10px !important;

    font-size: 0.78rem !important;
    border-radius: 9px !important;
}

/*
 * Streaming-Nachricht nicht unnötig vergrößern.
 */
.answer-card .streaming-message {
    min-height: 70px !important;
}

/*
 * Die schwebende Stop-Schaltfläche bleibt über
 * dem Eingabefeld sichtbar.
 */
.stop-stream-button {
    bottom: 195px !important;
}

/*
 * Tablet.
 */
@media (max-width: 1050px) {
    .task-form.nova-sticky-chat-form {
        left: 252px !important;
        right: 14px !important;
        bottom: 12px !important;
    }

    .answer-card .message {
        max-width: 92% !important;
    }
}

/*
 * Smartphone.
 */
@media (max-width: 760px) {
    .nova-chat-layout {
        padding-bottom: 245px !important;
    }

    .task-form.nova-sticky-chat-form {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;

        grid-template-columns: 1fr !important;
        padding: 11px !important;
    }

    .task-form.nova-sticky-chat-form textarea,
    .task-form.nova-sticky-chat-form input[type="file"],
    .task-form.nova-sticky-chat-form button[type="submit"] {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .answer-card {
        padding: 14px !important;
    }

    .answer-card .message {
        max-width: 96% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .stop-stream-button {
        bottom: 250px !important;
    }
}

/* ===== Premium Chat Feed ===== */

.chat-feed {
    width: 100%;
    margin-top: 20px;
    padding: 0 22px 150px;
}

.chat-feed-header {
    max-width: 920px;
    margin: 0 auto 24px;
}

.chat-feed-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.chat-feed-messages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.chat-feed .message {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-width: 78%;
    margin: 0;
    padding: 13px 16px;
    border-radius: 18px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
}

.chat-feed .user-message {
    align-self: flex-end;
    margin-left: auto;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 0;
    border-bottom-right-radius: 6px;
    color: #ffffff;
}

.chat-feed .assistant-message {
    position: relative;
    align-self: flex-start;
    margin-right: auto;
    padding: 15px 16px;
    background: rgba(30, 41, 59, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-bottom-left-radius: 6px;
}

.chat-feed .assistant-message-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.chat-feed .copy-answer-button {
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.72rem;
    line-height: 1.2;
}

.chat-feed .nova-markdown {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.chat-feed .nova-markdown > :first-child {
    margin-top: 0;
}

.chat-feed .nova-markdown > :last-child {
    margin-bottom: 0;
}

.chat-feed .nova-markdown p {
    margin: 0.55em 0;
}

.chat-feed .nova-markdown ul,
.chat-feed .nova-markdown ol {
    margin: 0.65em 0;
    padding-left: 1.4em;
}

.chat-feed .nova-markdown pre {
    max-width: 100%;
    overflow: auto;
}

@media (max-width: 760px) {
    .chat-feed {
        padding: 0 12px 190px;
    }

    .chat-feed-messages {
        gap: 14px;
    }

    .chat-feed .message {
        max-width: 92%;
        padding: 12px 14px;
    }
}

/* ===== Premium Chat Polish ===== */

.chat-feed {
    padding-left: 24px;
    padding-right: 24px;
}

.chat-feed-header {
    display: none;
}

.chat-feed-messages {
    width: 100%;
    max-width: 920px;
    gap: 14px;
}

.chat-feed .message {
    max-width: 68%;
}

.chat-feed .assistant-message {
    padding: 16px 48px 16px 18px;
}

.chat-feed .assistant-message-toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.chat-feed .copy-answer-button {
    opacity: 0.72;
    padding: 4px 7px;
    font-size: 0.7rem;
}

.chat-feed .copy-answer-button:hover {
    opacity: 1;
}

.chat-feed .user-message {
    max-width: 60%;
}

@media (max-width: 760px) {
    .chat-feed {
        padding-left: 12px;
        padding-right: 12px;
    }

    .chat-feed-messages {
        max-width: 100%;
        gap: 16px;
    }

    .chat-feed .message,
    .chat-feed .user-message {
        max-width: 88%;
    }

    .chat-feed .assistant-message {
        padding-right: 44px;
    }
}

/* ===== Copy Button Fix ===== */

.chat-feed .assistant-message {
    padding-top: 38px;
    padding-right: 16px;
    padding-bottom: 14px;
    padding-left: 16px;
}

.chat-feed .assistant-message-toolbar {
    top: 9px;
    right: 10px;
}

.chat-feed .copy-answer-button {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* ===== Chat-Abstand korrigieren ===== */
.nova-chat-layout {
    padding-bottom: 190px !important;
}

.chat-feed {
    padding-bottom: 20px !important;
}

@media (max-width: 760px) {
    .nova-chat-layout {
        padding-bottom: 230px !important;
    }

    .chat-feed {
        padding-bottom: 16px !important;
    }
}

/* ===== Chat-Formular ohne künstlichen Leerraum ===== */
.nova-chat-layout {
    padding-bottom: 20px !important;
}

.chat-feed {
    padding-bottom: 12px !important;
}

.task-form.nova-sticky-chat-form {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 12px !important;

    width: 100% !important;
    margin: 24px 0 0 !important;
}

@media (max-width: 760px) {
    .nova-chat-layout {
        padding-bottom: 12px !important;
    }

    .chat-feed {
        padding-bottom: 8px !important;
    }

    .task-form.nova-sticky-chat-form {
        left: auto !important;
        right: auto !important;
        bottom: 8px !important;
        margin-top: 16px !important;
    }
}

/* Dashboard-Finanzkarten */
.dashboard-v5 .v5-finance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.dashboard-v5 .v5-finance-card {
    display: block;
    min-width: 0;
    padding: 17px;
    border: 1px solid #1d2b40;
    border-radius: 10px;
    background: rgba(7, 16, 29, .68);
}

.dashboard-v5 .v5-finance-card small,
.dashboard-v5 .v5-finance-card strong,
.dashboard-v5 .v5-finance-card span {
    display: block;
}

.dashboard-v5 .v5-finance-card small {
    color: #8290a4;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.dashboard-v5 .v5-finance-card strong {
    margin: 9px 0 6px;
    color: #fff;
    font-size: 20px;
}

.dashboard-v5 .v5-finance-card span {
    color: #8997aa;
    font-size: 10px;
}

.dashboard-v5 .v5-finance-card.success {
    border-color: rgba(22, 199, 132, .35);
}

.dashboard-v5 .v5-finance-card.success strong {
    color: #34d399;
}

.dashboard-v5 .v5-finance-card.danger {
    border-color: rgba(239, 68, 68, .5);
}

.dashboard-v5 .v5-finance-card.danger strong,
.dashboard-v5 .v5-finance-card.danger span {
    color: #f87171;
}

.dashboard-v5 .v5-conversion-row {
    display: grid;
    grid-template-columns: minmax(190px, auto) 1fr;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #172337;
}

.dashboard-v5 .v5-conversion-row small,
.dashboard-v5 .v5-conversion-row strong {
    display: block;
}

.dashboard-v5 .v5-conversion-row small {
    color: #8190a4;
    font-size: 10px;
}

.dashboard-v5 .v5-conversion-row strong {
    margin-top: 4px;
    font-size: 20px;
}

.dashboard-v5 .v5-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #131f31;
}

.dashboard-v5 .v5-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d28d9, #22c55e);
}

@media (max-width: 1200px) {
    .dashboard-v5 .v5-finance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .dashboard-v5 .v5-finance-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-v5 .v5-conversion-row {
        grid-template-columns: 1fr;
    }
}

/* Dashboard: echte 12-Monats-Zeitreihe */
.dashboard-v5 .v5-monthly-section {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid #172337;
}

.dashboard-v5 .v5-monthly-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.dashboard-v5 .v5-monthly-head h4 {
    margin: 0;
    color: #f8fafc;
    font-size: 13px;
}

.dashboard-v5 .v5-monthly-head p {
    margin: 4px 0 0;
    color: #718096;
    font-size: 10px;
}

.dashboard-v5 .v5-monthly-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #94a3b8;
    font-size: 9px;
}

.dashboard-v5 .v5-monthly-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-v5 .v5-monthly-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.dashboard-v5 .v5-monthly-legend i.offer {
    background: #8b5cf6;
}

.dashboard-v5 .v5-monthly-legend i.paid {
    background: #22c55e;
}

.dashboard-v5 .v5-monthly-legend i.open {
    background: #ef4444;
}

.dashboard-v5 .v5-monthly-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(24px, 1fr));
    gap: 7px;
    min-height: 190px;
    padding: 14px 10px 4px;
    border: 1px solid #18263a;
    border-radius: 10px;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(30, 45, 67, .6) 0,
            rgba(30, 45, 67, .6) 1px,
            transparent 1px,
            transparent 42px
        ),
        rgba(6, 14, 26, .48);
}

.dashboard-v5 .v5-month-column {
    display: grid;
    grid-template-rows: 155px auto;
    gap: 7px;
    min-width: 0;
}

.dashboard-v5 .v5-month-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    height: 155px;
}

.dashboard-v5 .v5-month-bar {
    display: block;
    width: 28%;
    min-height: 0;
    border-radius: 4px 4px 1px 1px;
    transition:
        opacity .15s ease,
        transform .15s ease;
}

.dashboard-v5 .v5-month-bar:hover {
    opacity: .8;
    transform: translateY(-2px);
}

.dashboard-v5 .v5-month-bar.offer {
    background: linear-gradient(
        to top,
        #6d28d9,
        #a78bfa
    );
}

.dashboard-v5 .v5-month-bar.paid {
    background: linear-gradient(
        to top,
        #15803d,
        #4ade80
    );
}

.dashboard-v5 .v5-month-bar.open {
    background: linear-gradient(
        to top,
        #b91c1c,
        #f87171
    );
}

.dashboard-v5 .v5-month-column small {
    overflow: hidden;
    color: #77869a;
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .dashboard-v5 .v5-monthly-chart {
        gap: 4px;
        overflow-x: auto;
        grid-template-columns: repeat(12, minmax(38px, 1fr));
    }

    .dashboard-v5 .v5-monthly-head {
        display: block;
    }

    .dashboard-v5 .v5-monthly-legend {
        margin-top: 10px;
    }
}


/* Dashboard: Monatschart-Politur */
.dashboard-v5 .v5-monthly-chart-shell {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.dashboard-v5 .v5-monthly-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 0 20px;
    color: #64748b;
    font-size: 8px;
    text-align: right;
}

.dashboard-v5 .v5-month-column.current {
    border-radius: 8px;
    background: rgba(139, 92, 246, .08);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .18);
}

.dashboard-v5 .v5-month-column.current small {
    color: #c4b5fd;
    font-weight: 700;
}

.dashboard-v5 .v5-month-bar.empty {
    height: 2px !important;
    min-height: 2px;
    opacity: .18;
}

.dashboard-v5 .v5-month-bar {
    position: relative;
    cursor: help;
}

.dashboard-v5 .v5-month-bar::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 7px 9px;
    border: 1px solid #2b3b52;
    border-radius: 7px;
    background: #07101d;
    color: #e2e8f0;
    font-size: 9px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition:
        opacity .15s ease,
        transform .15s ease;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.dashboard-v5 .v5-month-bar:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 900px) {
    .dashboard-v5 .v5-monthly-chart-shell {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .dashboard-v5 .v5-monthly-axis {
        font-size: 7px;
    }
}

@media (max-width: 650px) {
    .dashboard-v5 .v5-monthly-chart-shell {
        overflow-x: auto;
        grid-template-columns: 42px minmax(520px, 1fr);
    }
}

/* Dashboard: anklickbare Listenzeilen */
.dashboard-v5 .v5-list-link {
    position: relative;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 7px;
    transition:
        background .15s ease,
        transform .15s ease,
        border-color .15s ease;
}

.dashboard-v5 .v5-list-link:hover {
    background: rgba(124, 58, 237, .09);
    transform: translateX(2px);
}

.dashboard-v5 .v5-list-link:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

.dashboard-v5 .v5-list-link strong,
.dashboard-v5 .v5-list-link b {
    color: #f8fafc;
}

.dashboard-v5 .v5-row-arrow {
    color: #64748b;
    font-size: 19px;
    line-height: 1;
    transition:
        color .15s ease,
        transform .15s ease;
}

.dashboard-v5 .v5-list-link:hover .v5-row-arrow {
    color: #a78bfa;
    transform: translateX(2px);
}

/* Aufgaben und Angebote besitzen jetzt eine zusätzliche Pfeilspalte */
.dashboard-v5 .offers-panel .v5-list-row,
.dashboard-v5 .tasks-panel .v5-list-row,
.dashboard-v5 .activity-panel .v5-list-row {
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        auto;
}

.dashboard-v5 .offers-panel .v5-list-row {
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto
        auto;
}

@media (max-width: 650px) {
    .dashboard-v5 .v5-row-arrow {
        display: none;
    }

    .dashboard-v5 .offers-panel .v5-list-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;
    }

    .dashboard-v5 .tasks-panel .v5-list-row,
    .dashboard-v5 .activity-panel .v5-list-row {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }
}

/* Angebots-Pipeline */
.offer-pipeline-kpis .v53-kpi {
    color: inherit;
    text-decoration: none;
    transition:
        transform .15s ease,
        border-color .15s ease;
}

.offer-pipeline-kpis .v53-kpi:hover {
    border-color: #7046cf;
    transform: translateY(-2px);
}

.offer-pipeline-toolbar {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        170px
        220px
        160px
        auto
        auto;
}

.offer-result-count {
    color: #8493a8;
    font-size: 12px;
}

.offer-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--v53-line);
}

.offer-active-filters span {
    padding: 5px 9px;
    border: 1px solid #3a2a61;
    border-radius: 999px;
    background: #21163a;
    color: #c4a7ff;
    font-size: 10px;
}

.v53-badge.offer-draft {
    background: #322050;
    color: #c4a7ff;
}

.v53-badge.offer-sent {
    background: #102f55;
    color: #79b7ff;
}

.v53-badge.offer-viewed {
    background: #4b390e;
    color: #ffd36b;
}

.v53-badge.offer-accepted {
    background: #103d2f;
    color: #65dfa9;
}

.v53-badge.offer-rejected {
    background: #50202a;
    color: #ff8ca2;
}

.v53-badge.offer-expired {
    background: #303744;
    color: #aeb9c8;
}

.offer-pipeline-table {
    min-width: 1180px;
}

@media (max-width: 1250px) {
    .offer-pipeline-toolbar {
        grid-template-columns:
            minmax(220px, 1fr)
            160px
            200px;
    }

    .offer-pipeline-toolbar .v53-btn,
    .offer-pipeline-toolbar input[type="month"] {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .offer-pipeline-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Angebotsstatus automatisch speichern */
.offer-status-select {
    min-width: 132px;
    transition:
        opacity .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.offer-status-select:hover {
    border-color: #7046cf;
}

.offer-status-select.saving,
.offer-status-select:disabled {
    opacity: .62;
    cursor: wait;
    border-color: #8b5cf6;
    background:
        linear-gradient(
            90deg,
            #111d30,
            #1d1640,
            #111d30
        );
    background-size: 200% 100%;
    animation: offer-status-saving 1s linear infinite;
}

@keyframes offer-status-saving {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/* Dashboard: Sales-Funnel */
.dashboard-v5 .funnel-panel {
    grid-column: span 2;
}

.dashboard-v5 .v5-funnel {
    display: grid;
    gap: 9px;
}

.dashboard-v5 .v5-funnel-stage {
    display: grid;
    grid-template-columns: 145px minmax(120px, 1fr) 48px;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.dashboard-v5 .v5-funnel-stage:hover {
    border-color: #293a54;
    background: rgba(124, 58, 237, .07);
    transform: translateX(2px);
}

.dashboard-v5 .v5-funnel-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-v5 .v5-funnel-copy span {
    color: #cbd5e1;
    font-size: 11px;
}

.dashboard-v5 .v5-funnel-copy strong {
    color: #fff;
    font-size: 15px;
}

.dashboard-v5 .v5-funnel-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #142137;
}

.dashboard-v5 .v5-funnel-track i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    transition: width .35s ease;
}

.dashboard-v5 .v5-funnel-stage small {
    color: #8190a5;
    font-size: 9px;
    text-align: right;
}

.dashboard-v5 .v5-funnel-stage.sent .v5-funnel-track i {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.dashboard-v5 .v5-funnel-stage.viewed .v5-funnel-track i {
    background: linear-gradient(90deg, #d97706, #facc15);
}

.dashboard-v5 .v5-funnel-stage.accepted .v5-funnel-track i {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.dashboard-v5 .v5-funnel-stage.invoiced .v5-funnel-track i {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.dashboard-v5 .v5-funnel-stage.paid .v5-funnel-track i {
    background: linear-gradient(90deg, #059669, #34d399);
}

.dashboard-v5 .v5-funnel-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3px 14px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #172337;
}

.dashboard-v5 .v5-funnel-summary span {
    color: #8b99ac;
    font-size: 10px;
}

.dashboard-v5 .v5-funnel-summary strong {
    grid-row: span 2;
    color: #34d399;
    font-size: 23px;
}

.dashboard-v5 .v5-funnel-summary small {
    color: #64748b;
    font-size: 9px;
}

@media (max-width: 1400px) {
    .dashboard-v5 .funnel-panel {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .dashboard-v5 .v5-funnel-stage {
        grid-template-columns: 125px minmax(90px, 1fr) 44px;
    }
}

@media (max-width: 650px) {
    .dashboard-v5 .funnel-panel {
        grid-column: auto;
    }

    .dashboard-v5 .v5-funnel-stage {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dashboard-v5 .v5-funnel-stage small {
        text-align: left;
    }
}

/* Angebots-Pipeline: Tabelle/Kanban */
.offer-view-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--v53-line);
    background: #0b1627;
}

.offer-view-bar > small {
    color: var(--v53-muted);
}

.offer-view-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid #293a54;
    border-radius: 9px;
    background: #091321;
}

.offer-view-switch a {
    padding: 7px 12px;
    border-radius: 6px;
    color: #8291a6;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}

.offer-view-switch a.active {
    color: #fff;
    background: linear-gradient(135deg, #5b2dde, #8b3fea);
}

.offer-table-hidden {
    display: none;
}

.offer-kanban {
    display: grid;
    grid-template-columns: repeat(6, minmax(250px, 1fr));
    gap: 13px;
    padding: 16px;
    overflow-x: auto;
    background: #08111e;
}

.offer-kanban-column {
    min-height: 440px;
    padding: 11px;
    border: 1px solid #1c2a3e;
    border-radius: 12px;
    background: linear-gradient(180deg, #0d192a, #091321);
}

.offer-kanban-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.offer-kanban-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-kanban-head strong {
    font-size: 12px;
}

.offer-kanban-head b {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 999px;
    background: #17243a;
    font-size: 10px;
}

.offer-kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
}

.offer-kanban-column.blue .offer-kanban-dot {
    background: #3b82f6;
}

.offer-kanban-column.amber .offer-kanban-dot {
    background: #f59e0b;
}

.offer-kanban-column.green .offer-kanban-dot {
    background: #22c55e;
}

.offer-kanban-column.red .offer-kanban-dot {
    background: #ef4444;
}

.offer-kanban-column.gray .offer-kanban-dot {
    background: #64748b;
}

.offer-kanban-value {
    margin: 6px 0 12px 16px;
    color: #728198;
    font-size: 10px;
}

.offer-kanban-cards {
    display: grid;
    align-content: start;
    gap: 9px;
}

.offer-kanban-card {
    padding: 12px;
    border: 1px solid #22324a;
    border-radius: 10px;
    background: #0e1b2e;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
}

.offer-kanban-card:hover {
    border-color: #6541be;
}

.offer-kanban-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
}

.offer-kanban-card-top a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.offer-kanban-card-top strong {
    color: #e9e5ff;
    font-size: 11px;
    white-space: nowrap;
}

.offer-kanban-customer {
    margin-top: 10px;
}

.offer-kanban-customer strong,
.offer-kanban-customer small {
    display: block;
}

.offer-kanban-customer strong {
    font-size: 11px;
}

.offer-kanban-customer small {
    margin-top: 3px;
    color: #76869d;
    font-size: 9px;
}

.offer-kanban-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #1b2a40;
    color: #77879d;
    font-size: 9px;
}

.offer-kanban-meta .invoice {
    color: #60a5fa;
    text-decoration: none;
}

.offer-kanban-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.offer-kanban-actions form,
.offer-kanban-actions select {
    width: 100%;
    min-width: 0;
}

.offer-kanban-empty {
    display: grid;
    place-items: center;
    min-height: 90px;
    border: 1px dashed #26364e;
    border-radius: 9px;
    color: #607087;
    font-size: 10px;
}

@media (max-width: 760px) {
    .offer-view-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .offer-kanban {
        grid-template-columns: repeat(6, 260px);
    }
}

/* Angebots-Kanban: Drag & Drop */
.offer-kanban-card[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.offer-kanban-card[draggable="true"]:active {
    cursor: grabbing;
}

.offer-kanban-card.dragging {
    opacity: .42;
    transform: rotate(1deg) scale(.98);
    border-color: #8b5cf6;
}

.offer-kanban-card.saving {
    pointer-events: none;
    opacity: .68;
}

.offer-kanban-column {
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.offer-kanban-column.drag-over {
    border-color: #8b5cf6;
    background:
        linear-gradient(
            180deg,
            rgba(91, 45, 222, .18),
            #091321
        );
    transform: translateY(-2px);
}

.offer-kanban-column.drag-over
.offer-kanban-cards {
    outline: 1px dashed rgba(167, 139, 250, .65);
    outline-offset: 5px;
    border-radius: 8px;
}

.offer-kanban-column.saving::after {
    content: "Speichert …";
    position: absolute;
    top: 10px;
    right: 44px;
    color: #a78bfa;
    font-size: 9px;
}

.offer-kanban-column {
    position: relative;
}

.offer-kanban-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    max-width: min(390px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid #285c48;
    border-radius: 10px;
    background: #0c3529;
    color: #7ff0bd;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
    font-size: 12px;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.offer-kanban-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.offer-kanban-toast.error {
    border-color: #713241;
    background: #421923;
    color: #ff9daf;
}

@media (max-width: 760px) {
    .offer-kanban-card[draggable="true"] {
        cursor: default;
    }

    .offer-kanban-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}

/* Angebots-Detailpanel */
.offer-detail-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.offer-detail-trigger:hover {
    color: #b89cff;
}

.offer-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(2, 7, 15, .66);
    opacity: 0;
    backdrop-filter: blur(3px);
    transition: opacity .2s ease;
}

.offer-detail-backdrop.visible {
    opacity: 1;
}

.offer-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9991;
    width: min(440px, 94vw);
    height: 100vh;
    overflow-y: auto;
    border-left: 1px solid #293a54;
    background:
        linear-gradient(
            180deg,
            #101c2f,
            #08121f
        );
    box-shadow: -30px 0 70px rgba(0, 0, 0, .45);
    transform: translateX(105%);
    transition: transform .22s ease;
}

.offer-detail-panel.visible {
    transform: translateX(0);
}

body.offer-detail-open {
    overflow: hidden;
}

.offer-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border-bottom: 1px solid #213149;
    background: rgba(12, 24, 41, .96);
    backdrop-filter: blur(16px);
}

.offer-detail-header small {
    color: #9d72ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.offer-detail-header h2 {
    margin-top: 5px;
    font-size: 22px;
    letter-spacing: -.025em;
}

.offer-detail-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid #2c3c55;
    border-radius: 50%;
    background: #111e31;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.offer-detail-close:hover {
    border-color: #8b5cf6;
}

.offer-detail-body {
    display: grid;
    gap: 15px;
    padding: 20px 22px 40px;
}

.offer-detail-customer,
.offer-detail-section,
.offer-detail-kpis article {
    border: 1px solid #213149;
    border-radius: 12px;
    background: rgba(13, 27, 46, .86);
}

.offer-detail-customer {
    padding: 18px;
}

.offer-detail-customer span,
.offer-detail-customer strong,
.offer-detail-customer small {
    display: block;
}

.offer-detail-customer span,
.offer-detail-kpis span {
    color: #71839b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.offer-detail-customer strong {
    margin-top: 7px;
    font-size: 19px;
}

.offer-detail-customer small {
    margin-top: 4px;
    color: #8796aa;
}

.offer-detail-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.offer-detail-kpis article {
    padding: 16px;
}

.offer-detail-kpis strong {
    display: block;
    margin-top: 7px;
    font-size: 18px;
}

.offer-detail-section {
    padding: 17px;
}

.offer-detail-section h3 {
    margin-bottom: 12px;
    font-size: 13px;
}

.offer-detail-section > small {
    display: block;
    margin-top: 9px;
    color: #71839b;
    font-size: 10px;
}

.offer-detail-section select {
    width: 100%;
}

.offer-detail-invoice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border-radius: 9px;
    background: #0a1525;
}

.offer-detail-invoice strong {
    font-size: 12px;
}

.offer-detail-invoice span {
    color: #69dbaa;
    font-size: 10px;
}

.offer-detail-actions {
    display: grid;
    gap: 9px;
}

.offer-detail-actions .v53-btn {
    width: 100%;
}

@media (max-width: 650px) {
    .offer-detail-panel {
        width: 100vw;
    }

    .offer-detail-kpis {
        grid-template-columns: 1fr;
    }
}

/* Lumidiasoo Dashboard Branding */
.lumidiasoo-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.lumidiasoo-dashboard-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
}

.lumidiasoo-dashboard-brand span {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

@media (max-width: 900px) {
    .lumidiasoo-dashboard-brand span {
        display: none;
    }

    .lumidiasoo-dashboard-logo {
        width: 40px;
        height: 40px;
    }
}

/* ======================================================
   LUMIDIASOO BRAND SYSTEM
   ====================================================== */

.lumidiasoo-dashboard-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    color: #fff;
    text-decoration: none;
}

.lumidiasoo-dashboard-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 12px;
    background: radial-gradient(
        circle at 65% 25%,
        rgba(168, 85, 247, .24),
        rgba(37, 99, 235, .08) 58%,
        transparent 72%
    );
    filter: drop-shadow(0 8px 18px rgba(109, 40, 217, .35));
}

.lumidiasoo-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lumidiasoo-brand-copy strong {
    font-size: 20px;
    line-height: 1;
    letter-spacing: .015em;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 58%,
        #c084fc 79%,
        #6366f1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lumidiasoo-brand-copy small {
    color: #8291aa;
    font-size: 8px;
    letter-spacing: .06em;
    white-space: nowrap;
}

.lumidiasoo-module-brand {
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    min-width: 0;
}

.lumidiasoo-module-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 10px;
    filter: drop-shadow(0 7px 16px rgba(124, 58, 237, .4));
}

.lumidiasoo-module-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.lumidiasoo-module-copy strong {
    font-size: 18px;
    line-height: 1;
    letter-spacing: .01em;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 62%,
        #c084fc 83%,
        #6366f1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lumidiasoo-module-copy small {
    color: #718198;
    font-size: 7px;
    letter-spacing: .07em;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .lumidiasoo-brand-copy,
    .lumidiasoo-module-copy {
        display: none;
    }

    .lumidiasoo-dashboard-logo,
    .lumidiasoo-module-logo {
        width: 42px;
        height: 42px;
    }
}

/* =====================================================
   LUMIDIASOO GLOBAL BRAND
   ===================================================== */

.lumidiasoo-global-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 2px;
    color: #ffffff;
    text-decoration: none;
    min-width: 0;
}

.lumidiasoo-global-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
    filter:
        drop-shadow(0 6px 14px rgba(37, 99, 235, .28))
        drop-shadow(0 7px 20px rgba(147, 51, 234, .28));
}

.lumidiasoo-global-wordmark {
    font-size: 19px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .025em;
    white-space: nowrap;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 54%,
        #c084fc 76%,
        #6366f1 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sidebar .lumidiasoo-global-brand,
.v53-sidebar .lumidiasoo-global-brand {
    margin-bottom: 18px;
}

@media (max-width: 900px) {
    .lumidiasoo-global-wordmark {
        display: none;
    }

    .lumidiasoo-global-icon {
        width: 40px;
        height: 40px;
    }
}


/* ==========================================================
   LUMIDIASOO DASHBOARD V6
========================================================== */

.v5-panel,
.v5-kpi{
    background:rgba(17,24,39,.72);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.05);
    transition:.28s;
}

.v5-panel:hover,
.v5-kpi:hover{
    transform:translateY(-6px);
    border-color:#5b8cff;
    box-shadow:
        0 30px 80px rgba(37,99,235,.22),
        inset 0 1px rgba(255,255,255,.08);
}

.v5-panel-head h3{
    font-size:24px;
    font-weight:800;
}

.v5-panel-head p{
    color:#94a3b8;
}

.v5-kpi strong{
    font-size:34px;
}

.v5-kpi small{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#7dd3fc;
}

.v5-kpi em{
    color:#94a3b8;
}

.v5-list-row{
    border-radius:16px;
    transition:.22s;
}

.v5-list-row:hover{
    background:rgba(255,255,255,.04);
    transform:translateX(5px);
}

.v5-ai-panel{
    border-radius:26px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    box-shadow:0 30px 70px rgba(37,99,235,.28);
}

.v5-ai-panel button{
    border-radius:12px;
}

.v5-month-column.current{
    transform:scale(1.08);
}

.v5-month-bar{
    border-radius:20px 20px 8px 8px;
}



/* ==========================================================
   LUMIDIASOO CHAT V7
   ========================================================== */

.task-form.nova-sticky-chat-form{
    border-radius:26px !important;
    padding:18px !important;
    border:1px solid rgba(99,102,241,.25) !important;
    background:rgba(15,23,42,.94) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;

    box-shadow:
        0 30px 90px rgba(59,130,246,.18),
        inset 0 1px rgba(255,255,255,.06) !important;
}

.task-form.nova-sticky-chat-form textarea{
    min-height:74px !important;
    max-height:220px !important;

    padding:18px 20px !important;

    border-radius:20px !important;
    border:1px solid rgba(255,255,255,.08) !important;

    background:#0f172a !important;
    color:white !important;

    font-size:16px !important;
    line-height:1.65 !important;
}

.task-form.nova-sticky-chat-form textarea:focus{
    border-color:#6366f1 !important;

    box-shadow:
        0 0 0 4px rgba(99,102,241,.15),
        0 0 35px rgba(99,102,241,.18) !important;
}

.task-form.nova-sticky-chat-form button[type="submit"]{

    border-radius:18px !important;

    padding:14px 24px !important;

    font-weight:700 !important;

    background:
        linear-gradient(135deg,#2563eb,#7c3aed) !important;

    transition:.25s;
}

.task-form.nova-sticky-chat-form button[type="submit"]:hover{

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

    box-shadow:
        0 20px 45px rgba(99,102,241,.35);
}

.task-form.nova-sticky-chat-form input[type=file]{

    border-radius:14px !important;

    padding:8px !important;

    background:rgba(255,255,255,.03);
}



/* ==========================================================
   LUMIDIASOO AI COMPOSER V8
   Moderne KI-Eingabe im Stil aktueller AI-Anwendungen
   ========================================================== */

.task-form.ai-composer-form {
    display: block;
    width: 100%;
}

.ai-composer-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(129, 140, 248, 0.30);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 90% 110%,
            rgba(147, 51, 234, 0.16),
            transparent 35%
        ),
        rgba(8, 16, 34, 0.92);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.ai-composer-shell:focus-within {
    border-color: rgba(168, 85, 247, 0.78);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.38),
        0 0 0 4px rgba(124, 58, 237, 0.10),
        0 0 45px rgba(124, 58, 237, 0.16);
}

.task-form.ai-composer-form .ai-composer-shell > textarea {
    display: block;
    width: 100%;
    min-height: 116px;
    max-height: 320px;
    margin: 0;
    padding: 20px 20px 12px;
    resize: vertical;
    border: 0;
    border-radius: 18px;
    outline: 0;
    color: #f8fafc;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1.65;
}

.task-form.ai-composer-form .ai-composer-shell > textarea:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.task-form.ai-composer-form .ai-composer-shell > textarea::placeholder {
    color: #718096;
}

.ai-composer-toolbar {
    display: flex;
    width: 100%;
    align-items: flex-end;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid rgba(100, 116, 139, 0.16);
}

.task-form.ai-composer-form .ai-composer-toolbar input[type="file"] {
    width: auto;
    min-width: 210px;
    max-width: 300px;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, 0.24);
    border-radius: 13px;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-form.ai-composer-form
.ai-composer-toolbar
input[type="file"]::file-selector-button {
    margin-right: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(129, 140, 248, 0.20);
    border-radius: 9px;
    color: #e2e8f0;
    background: rgba(51, 65, 85, 0.65);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease;
}

.task-form.ai-composer-form
.ai-composer-toolbar
input[type="file"]::file-selector-button:hover {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(76, 29, 149, 0.55);
}

.task-form.ai-composer-form
.ai-composer-toolbar
.project-select-label {
    display: none;
}

.task-form.ai-composer-form
.ai-composer-toolbar
.project-select {
    width: auto;
    min-width: 190px;
    max-width: 260px;
    min-height: 44px;
    margin: 0;
    padding: 10px 36px 10px 13px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 12px;
    color: #dbeafe;
    background-color: rgba(15, 23, 42, 0.72);
    font-size: 0.82rem;
    cursor: pointer;
}

.task-form.ai-composer-form
.ai-composer-toolbar
.project-select:focus {
    border-color: rgba(168, 85, 247, 0.75);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}

.task-form.ai-composer-form
.ai-composer-toolbar
button[type="submit"] {
    width: auto;
    min-width: 170px;
    min-height: 46px;
    margin: 0 0 0 auto;
    padding: 11px 19px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background:
        linear-gradient(
            105deg,
            #2563eb 0%,
            #7c3aed 54%,
            #c026d3 100%
        );
    box-shadow:
        0 12px 28px rgba(109, 40, 217, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease;
}

.task-form.ai-composer-form
.ai-composer-toolbar
button[type="submit"]:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 17px 36px rgba(109, 40, 217, 0.36),
        0 0 24px rgba(147, 51, 234, 0.15);
}

.task-form.ai-composer-form
.ai-composer-toolbar
button[type="submit"]:disabled {
    cursor: not-allowed;
    filter: grayscale(0.55);
    opacity: 0.5;
}

/* Auch in einem geöffneten Chat bleibt der Composer kompakt. */
.task-form.ai-composer-form.nova-sticky-chat-form {
    position: sticky !important;
    right: auto !important;
    bottom: 12px !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.task-form.ai-composer-form.nova-sticky-chat-form
.ai-composer-shell
> textarea {
    grid-column: auto !important;
    min-height: 88px !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 18px 18px 10px !important;
}

.task-form.ai-composer-form.nova-sticky-chat-form
.ai-composer-toolbar
input[type="file"] {
    margin: 0 !important;
}

.task-form.ai-composer-form.nova-sticky-chat-form
.ai-composer-toolbar
button[type="submit"] {
    min-width: 170px !important;
    min-height: 46px !important;
    margin-left: auto !important;
    padding: 11px 19px !important;
}

@media (max-width: 1000px) {
    .ai-composer-toolbar {
        flex-wrap: wrap;
    }

    .task-form.ai-composer-form
    .ai-composer-toolbar
    input[type="file"] {
        max-width: none;
        flex: 1 1 260px;
    }

    .task-form.ai-composer-form
    .ai-composer-toolbar
    .project-select {
        flex: 1 1 190px;
        max-width: none;
    }
}

@media (max-width: 680px) {
    .ai-composer-shell {
        padding: 6px;
        border-radius: 20px;
    }

    .task-form.ai-composer-form
    .ai-composer-shell
    > textarea {
        min-height: 105px;
        padding: 17px 15px 10px;
        font-size: 0.95rem;
    }

    .ai-composer-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    .task-form.ai-composer-form
    .ai-composer-toolbar
    input[type="file"],
    .task-form.ai-composer-form
    .ai-composer-toolbar
    .project-select,
    .task-form.ai-composer-form
    .ai-composer-toolbar
    button[type="submit"] {
        width: 100%;
        min-width: 0 !important;
        max-width: none;
    }

    .task-form.ai-composer-form
    .ai-composer-toolbar
    button[type="submit"] {
        margin-left: 0 !important;
    }
}


/* ==========================================================
   LUMIDIASOO AI COMPOSER V9
   Finale, stabile Composer-Toolbar
   ========================================================== */

.task-form.ai-composer-form .ai-composer-shell {
    overflow: visible;
}

.task-form.ai-composer-form
.ai-composer-shell
> textarea {
    min-height: 86px !important;
    height: 86px;
    max-height: 240px !important;
    resize: none !important;
    overflow-y: auto;
    padding: 18px 18px 12px !important;
}

.task-form.ai-composer-form .ai-composer-toolbar {
    display: flex !important;
    width: 100%;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 10px !important;
}

.ai-composer-tools {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}

.ai-composer-submit {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.task-form.ai-composer-form
.ai-composer-tools
input[type="file"] {
    width: 190px !important;
    min-width: 0 !important;
    max-width: 190px !important;
    height: 42px;
    margin: 0 !important;
    padding: 4px !important;
    flex: 0 1 190px;
}

.task-form.ai-composer-form
.ai-composer-tools
input[type="file"]::file-selector-button {
    height: 32px;
    margin-right: 7px;
    padding: 6px 10px;
}

.task-form.ai-composer-form
.ai-composer-tools
.project-select {
    width: auto !important;
    min-width: 160px !important;
    max-width: 230px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding-top: 8px;
    padding-bottom: 8px;
    flex: 0 1 220px;
}

.task-form.ai-composer-form
.ai-composer-tools
.project-select-label {
    display: none !important;
}

.task-form.ai-composer-form
.ai-composer-submit
button[type="submit"] {
    display: inline-flex !important;
    width: auto !important;
    min-width: 168px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 10px 18px !important;
    flex: 0 0 auto;
    visibility: visible !important;
    opacity: 1;
}

.task-form.ai-composer-form
.ai-composer-submit
button[type="submit"]:disabled {
    opacity: 0.5;
}

.task-form.ai-composer-form.nova-sticky-chat-form
.ai-composer-shell
> textarea {
    min-height: 86px !important;
    height: 86px;
    max-height: 240px !important;
}

@media (max-width: 1050px) {
    .task-form.ai-composer-form .ai-composer-toolbar {
        align-items: stretch !important;
        flex-wrap: wrap;
    }

    .ai-composer-tools {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .ai-composer-submit {
        width: 100%;
    }

    .task-form.ai-composer-form
    .ai-composer-submit
    button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    .task-form.ai-composer-form
    .ai-composer-shell
    > textarea {
        min-height: 90px !important;
        height: 90px;
    }

    .ai-composer-tools {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .task-form.ai-composer-form
    .ai-composer-tools
    input[type="file"],
    .task-form.ai-composer-form
    .ai-composer-tools
    .project-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* ==========================================================
   LUMIDIASOO FILE UPLOAD V10
   Eigener Datei-Upload für den AI Composer
   ========================================================== */

.ai-file-control {
    display: flex;
    min-width: 0;
    max-width: 310px;
    align-items: center;
}

.ai-native-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ai-file-trigger {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 13px !important;
    border: 1px solid rgba(129, 140, 248, 0.22) !important;
    border-radius: 12px !important;
    color: #dbeafe !important;
    background: rgba(30, 41, 59, 0.58) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 0.78rem !important;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.ai-file-trigger:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(168, 85, 247, 0.58) !important;
    background: rgba(76, 29, 149, 0.38) !important;
}

.ai-file-trigger span {
    font-size: 0.95rem;
}

.ai-file-trigger strong {
    font-weight: 750;
}

.ai-file-info {
    display: flex;
    min-width: 0;
    max-width: 310px;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 6px 7px 6px 12px;
    border: 1px solid rgba(168, 85, 247, 0.30);
    border-radius: 12px;
    color: #e2e8f0;
    background:
        linear-gradient(
            120deg,
            rgba(49, 46, 129, 0.36),
            rgba(88, 28, 135, 0.25)
        );
}

.ai-file-info[hidden] {
    display: none !important;
}

.ai-file-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-file-remove {
    display: grid !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    flex: 0 0 29px;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(248, 113, 113, 0.20) !important;
    border-radius: 9px !important;
    color: #fca5a5 !important;
    background: rgba(127, 29, 29, 0.25) !important;
    box-shadow: none !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    cursor: pointer;
}

.ai-file-remove:hover {
    transform: none !important;
    border-color: rgba(248, 113, 113, 0.52) !important;
    background: rgba(153, 27, 27, 0.42) !important;
}

@media (max-width: 680px) {
    .ai-file-control,
    .ai-file-info,
    .ai-file-trigger {
        width: 100% !important;
        max-width: none;
    }
}


/* ==========================================================
   LUMIDIASOO DRAG DROP V12
   Datei direkt auf den AI Composer ziehen
   ========================================================== */

.ai-composer-shell::after {
    position: absolute;
    z-index: 20;
    inset: 8px;
    display: grid;
    place-items: center;
    border: 2px dashed rgba(167, 139, 250, 0.70);
    border-radius: 18px;
    color: #f5f3ff;
    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.88),
            rgba(124, 58, 237, 0.90),
            rgba(192, 38, 211, 0.86)
        );
    box-shadow:
        0 24px 70px rgba(76, 29, 149, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    content: "📎 Datei hier ablegen";
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.ai-composer-shell.is-dragging-file::after {
    opacity: 1;
    transform: scale(1);
}

.ai-composer-shell.is-dragging-file {
    border-color: rgba(192, 132, 252, 0.95) !important;
    box-shadow:
        0 0 0 4px rgba(124, 58, 237, 0.15),
        0 28px 80px rgba(76, 29, 149, 0.35) !important;
}

@media (max-width: 680px) {
    .ai-composer-shell::after {
        inset: 6px;
        border-radius: 15px;
        font-size: 0.9rem;
    }
}


/* ==========================================================
   LUMIDIASOO FILE LOADING V13
   Spinner während der Dateianalyse
   ========================================================== */

.task-form.ai-composer-form
button[type="submit"].is-analyzing-file {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: wait !important;
    opacity: 0.88 !important;
}

.ai-upload-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: lumidiasoo-upload-spin 0.75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .ai-upload-spinner {
        animation-duration: 1.6s;
    }
}


/* LUMIDIASOO SPINNER FIX V14 */

.task-form.ai-composer-form
button[type="submit"].is-analyzing-file
.ai-upload-spinner {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    border: 3px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    border-right-color: #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: lumidiasoo-upload-spin 0.7s linear infinite !important;
}

.task-form.ai-composer-form
button[type="submit"].is-analyzing-file
.ai-upload-spinner::before,
.task-form.ai-composer-form
button[type="submit"].is-analyzing-file
.ai-upload-spinner::after {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   LUMIDIASOO MULTI FILE UPLOAD V15
   Mehrere Dateien pro Nachricht
   ========================================================== */

.ai-file-control {
    max-width: none !important;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-multi-file-list {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 7px;
}

.ai-multi-file-list:empty {
    display: none;
}

.ai-multi-file-item {
    display: inline-flex;
    min-width: 0;
    max-width: 230px;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 6px 7px 6px 10px;
    border: 1px solid rgba(168, 85, 247, 0.34);
    border-radius: 12px;
    color: #e2e8f0;
    background:
        linear-gradient(
            120deg,
            rgba(49, 46, 129, 0.38),
            rgba(88, 28, 135, 0.30)
        );
}

.ai-multi-file-icon {
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.ai-multi-file-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-multi-file-remove {
    display: grid !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(248, 113, 113, 0.24) !important;
    border-radius: 8px !important;
    color: #fca5a5 !important;
    background: rgba(127, 29, 29, 0.28) !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.ai-multi-file-remove:hover {
    transform: none !important;
    border-color: rgba(248, 113, 113, 0.58) !important;
    background: rgba(153, 27, 27, 0.46) !important;
}

@media (max-width: 680px) {
    .ai-file-control,
    .ai-multi-file-list,
    .ai-multi-file-item {
        width: 100%;
        max-width: none;
    }
}

/* LUMIDIASOO Kunden-Timeline */
.cw-timeline-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.cw-timeline-head h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.cw-timeline-count {
    padding: 6px 10px;
    border: 1px solid #26364d;
    border-radius: 999px;
    color: #9ba9bc;
    font-size: 11px;
    white-space: nowrap;
}

.cw-timeline {
    position: relative;
    display: grid;
    gap: 14px;
    padding-left: 52px;
}

.cw-timeline::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 19px;
    width: 2px;
    background: linear-gradient(
        180deg,
        #8b5cf6,
        #26364d 35%,
        #26364d 75%,
        transparent
    );
}

.cw-timeline-item {
    position: relative;
    min-width: 0;
}

.cw-timeline-marker {
    position: absolute;
    top: 15px;
    left: -52px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 4px solid #091321;
    border-radius: 50%;
    background: #32205d;
    color: #c4a7ff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 0 0 1px #4f347e;
}

.cw-timeline-card {
    padding: 16px 18px;
    border: 1px solid #223149;
    border-radius: 12px;
    background: linear-gradient(145deg, #0d1828, #0a1422);
    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.cw-timeline-card:hover {
    transform: translateY(-1px);
    border-color: #4b3a72;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .16);
}

.cw-timeline-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.cw-timeline-meta time {
    color: #8492a6;
    font-size: 10px;
    white-space: nowrap;
}

.cw-activity-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #292044;
    color: #c4a7ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cw-timeline-title {
    display: block;
    color: #f4f7fb;
    font-size: 14px;
    line-height: 1.4;
}

.cw-timeline-details {
    margin: 8px 0 0;
    color: #aab5c4;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cw-timeline-item.type-invoice .cw-timeline-marker,
.cw-timeline-item.type-offer .cw-timeline-marker {
    background: #123c2e;
    color: #5ee0a6;
    box-shadow: 0 0 0 1px #23664d;
}

.cw-timeline-item.type-invoice .cw-activity-badge,
.cw-timeline-item.type-offer .cw-activity-badge {
    background: #123c2e;
    color: #67e8ad;
}

.cw-timeline-item.type-email .cw-timeline-marker {
    background: #12365e;
    color: #7cc4ff;
    box-shadow: 0 0 0 1px #245b91;
}

.cw-timeline-item.type-email .cw-activity-badge {
    background: #12365e;
    color: #8bcaff;
}

.cw-timeline-item.type-call .cw-timeline-marker,
.cw-timeline-item.type-contact .cw-timeline-marker {
    background: #4a3310;
    color: #f8cb66;
    box-shadow: 0 0 0 1px #79561c;
}

.cw-timeline-item.type-call .cw-activity-badge,
.cw-timeline-item.type-contact .cw-activity-badge {
    background: #4a3310;
    color: #f8cf77;
}

.cw-timeline-item.type-support_note .cw-timeline-marker,
.cw-timeline-item.type-support .cw-timeline-marker {
    background: #4b1d35;
    color: #ff91bd;
    box-shadow: 0 0 0 1px #813054;
}

.cw-timeline-item.type-support_note .cw-activity-badge,
.cw-timeline-item.type-support .cw-activity-badge {
    background: #4b1d35;
    color: #ff9bc2;
}

.cw-timeline-item.type-task .cw-timeline-marker {
    background: #34245f;
    color: #bba2ff;
}

.cw-timeline-empty {
    padding: 42px 22px;
    border: 1px dashed #2b3b53;
    border-radius: 12px;
    text-align: center;
    color: #8997aa;
}

.cw-timeline-empty > span {
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
}

.cw-timeline-empty strong {
    display: block;
    color: #d8dee8;
    font-size: 14px;
}

.cw-timeline-empty p {
    max-width: 460px;
    margin: 7px auto 0;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .cw-timeline-head {
        align-items: flex-start;
    }

    .cw-timeline {
        padding-left: 42px;
    }

    .cw-timeline::before {
        left: 15px;
    }

    .cw-timeline-marker {
        left: -42px;
        width: 32px;
        height: 32px;
        top: 17px;
        border-width: 3px;
        font-size: 12px;
    }

    .cw-timeline-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .cw-timeline-meta time {
        white-space: normal;
    }
}
/* Ende LUMIDIASOO Kunden-Timeline */

/* Lumidiaso Supportbereich in der Kundenakte */
.cw-support-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.cw-support-head h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.cw-support-summary {
    display: flex;
    gap: 8px;
}

.cw-support-summary span {
    min-width: 78px;
    padding: 8px 12px;
    border: 1px solid #273750;
    border-radius: 9px;
    background: #0b1524;
    color: #8998ac;
    font-size: 10px;
    text-align: center;
}

.cw-support-summary strong {
    display: block;
    margin-bottom: 2px;
    color: #f1f5f9;
    font-size: 16px;
}

.cw-support-section + .cw-support-section {
    margin-top: 28px;
}

.cw-support-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.cw-support-ticket {
    position: relative;
    overflow: hidden;
    border: 1px solid #24344c;
    border-radius: 11px;
    background: linear-gradient(145deg, #0d1828, #091321);
}

.cw-support-ticket::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #8b5cf6;
}

.cw-support-ticket.priority-high::before {
    background: #ef4444;
}

.cw-support-ticket.priority-medium::before {
    background: #f59e0b;
}

.cw-support-ticket.priority-low::before {
    background: #22c55e;
}

.cw-support-ticket.is-completed::before {
    background: #64748b;
}

.cw-support-ticket-main {
    padding: 15px 17px 15px 20px;
}

.cw-support-ticket-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cw-support-ticket-top > strong {
    color: #b89cff;
    font-size: 12px;
    letter-spacing: .03em;
}

.cw-support-ticket h4 {
    margin: 9px 0;
    color: #f3f6fa;
    font-size: 14px;
    line-height: 1.4;
}

.cw-support-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    color: #8795a8;
    font-size: 10px;
}

.cw-support-priority,
.cw-support-done {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cw-support-priority.high {
    background: #4b1d25;
    color: #ff929f;
}

.cw-support-priority.medium {
    background: #493411;
    color: #facc65;
}

.cw-support-priority.low {
    background: #123c2e;
    color: #63dda7;
}

.cw-support-done {
    background: #253245;
    color: #a7b2c2;
}

.cw-support-section.completed .cw-support-ticket {
    opacity: .82;
}

.cw-support-empty {
    padding: 24px;
    border: 1px dashed #2b3b53;
    border-radius: 11px;
    color: #8d9bad;
    text-align: center;
}

.cw-support-empty.large {
    padding: 45px 24px;
}

.cw-support-empty > span {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
}

.cw-support-empty strong {
    display: block;
    color: #dbe2eb;
    font-size: 14px;
}

.cw-support-empty p {
    margin: 6px auto 0;
    max-width: 460px;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .cw-support-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cw-support-summary {
        width: 100%;
    }

    .cw-support-summary span {
        flex: 1;
    }

    .cw-support-ticket-top {
        align-items: flex-start;
    }

    .cw-support-ticket-meta {
        flex-direction: column;
        gap: 5px;
    }
}
/* Ende Supportbereich Kundenakte */

/* Aufklappbare Support-Ticketdetails */
.cw-support-ticket > summary {
    list-style: none;
}

.cw-support-ticket > summary::-webkit-details-marker {
    display: none;
}

.cw-support-ticket-summary {
    display: block;
    cursor: pointer;
    user-select: none;
}

.cw-support-ticket-summary:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: -2px;
}

.cw-support-ticket-status {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cw-support-chevron {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #18253a;
    color: #91a0b4;
    font-size: 20px;
    line-height: 1;
    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease;
}

.cw-support-ticket[open] .cw-support-chevron {
    transform: rotate(90deg);
    background: #352365;
    color: #c4a7ff;
}

.cw-support-ticket[open] {
    border-color: #4a3971;
}

.cw-support-ticket-details {
    padding: 0 18px 17px 20px;
    border-top: 1px solid #1f2d42;
}

.cw-support-ticket-details dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0 0;
}

.cw-support-ticket-details dl > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #213149;
    border-radius: 8px;
    background: #091321;
}

.cw-support-ticket-details dt {
    margin-bottom: 4px;
    color: #748399;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cw-support-ticket-details dd {
    margin: 0;
    color: #dce3ec;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.cw-support-ticket-hint {
    margin: 12px 0 0;
    color: #79889c;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .cw-support-ticket-details dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .cw-support-ticket-details dl {
        grid-template-columns: 1fr;
    }
}
/* Ende aufklappbare Support-Ticketdetails */

/* Support-Ticketaktionen */
.cw-support-ticket-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #1f2d42;
}

.cw-support-action {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #30415b;
    border-radius: 8px;
    background: #111d2e;
    color: #cbd5e1;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.cw-support-action:hover {
    transform: translateY(-1px);
    border-color: #7453b7;
    background: #21183a;
    color: #e4d9ff;
}

.cw-support-action:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

.cw-support-action.danger {
    border-color: #63303a;
    background: #2d1720;
    color: #ffadb7;
}

.cw-support-action.danger:hover {
    border-color: #b64858;
    background: #421d27;
    color: #ffd1d6;
}

@media (max-width: 560px) {
    .cw-support-ticket-actions {
        flex-direction: column;
    }

    .cw-support-action {
        width: 100%;
    }
}
/* Ende Support-Ticketaktionen */

/* Lumidiaso 360-Grad-Kundenübersicht */
.cw-customer-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.cw-customer-kpi {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 106px;
    padding: 15px;
    border: 1px solid #223149;
    border-radius: 11px;
    background: linear-gradient(145deg, #0e1929, #091321);
}

.cw-customer-kpi-icon {
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #2f1d61;
    color: #c4a7ff;
    font-size: 17px;
    font-weight: 800;
}

.cw-customer-kpi > div {
    min-width: 0;
}

.cw-customer-kpi small,
.cw-customer-kpi strong,
.cw-customer-kpi > div > span {
    display: block;
}

.cw-customer-kpi small {
    color: #8290a4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cw-customer-kpi strong {
    margin: 6px 0 4px;
    color: #f4f7fb;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.cw-customer-kpi > div > span {
    color: #77869a;
    font-size: 10px;
    line-height: 1.4;
}

.cw-customer-kpi-activity-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.cw-customer-kpi.revenue .cw-customer-kpi-icon {
    background: #123c2e;
    color: #61dda7;
}

.cw-customer-kpi.pipeline .cw-customer-kpi-icon {
    background: #30205c;
    color: #bda5ff;
}

.cw-customer-kpi.invoices .cw-customer-kpi-icon {
    background: #12375f;
    color: #83c8ff;
}

.cw-customer-kpi.tasks .cw-customer-kpi-icon {
    background: #493511;
    color: #f5cc69;
}

.cw-customer-kpi.support .cw-customer-kpi-icon {
    background: #4b1d35;
    color: #ff9ac1;
}

.cw-customer-kpi.activity .cw-customer-kpi-icon {
    background: #263245;
    color: #c3cedc;
}

@media (max-width: 1050px) {
    .cw-customer-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .cw-customer-kpis {
        grid-template-columns: 1fr;
    }

    .cw-customer-kpi {
        min-height: auto;
    }
}
/* Ende Lumidiaso 360-Grad-Kundenübersicht */

/* Strukturiertes Lumidiaso Kunden-Briefing */
.cw-briefing {
    min-width: 0;
}

.cw-briefing-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.cw-briefing-metrics > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(167, 139, 250, .2);
    border-radius: 8px;
    background: rgba(7, 14, 28, .32);
}

.cw-briefing-metrics small,
.cw-briefing-metrics strong {
    display: block;
}

.cw-briefing-metrics small {
    color: #a89bbf;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cw-briefing-metrics strong {
    margin-top: 4px;
    color: #f5f1ff;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.cw-briefing-recommendation {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #a855f7;
    border-radius: 0 8px 8px 0;
    background: rgba(8, 15, 30, .36);
}

.cw-briefing-recommendation > span {
    display: block;
    margin-bottom: 4px;
    color: #c4a7ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cw-briefing-recommendation p {
    margin: 0;
    color: #eef1f7;
    font-size: 11px;
    line-height: 1.5;
}

.cw-briefing-activity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(167, 139, 250, .18);
}

.cw-briefing-activity small {
    color: #9486aa;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.cw-briefing-activity strong {
    min-width: 0;
    color: #ddd5ec;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cw-briefing-activity span {
    color: #9486aa;
    font-size: 8px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .cw-briefing-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .cw-briefing-metrics {
        grid-template-columns: 1fr;
    }

    .cw-briefing-activity {
        grid-template-columns: 1fr;
    }

    .cw-briefing-activity strong {
        white-space: normal;
    }
}
/* Ende strukturiertes Kunden-Briefing */

/* Lumidiaso Kundengesundheit */
.cw-briefing-health {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 9px;
    background: rgba(7, 14, 28, .32);
}

.cw-briefing-health small,
.cw-briefing-health strong {
    display: block;
}

.cw-briefing-health small {
    color: #a89bbf;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cw-briefing-health strong {
    margin-top: 4px;
    color: #f8fafc;
    font-size: 16px;
}

.cw-briefing-health > span {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.cw-briefing-health.excellent > span {
    background: #123c2e;
    color: #67e8ad;
}

.cw-briefing-health.good > span {
    background: #16395d;
    color: #8bcaff;
}

.cw-briefing-health.warning > span {
    background: #493511;
    color: #f8cf77;
}

.cw-briefing-health.critical > span {
    background: #4b1d25;
    color: #ff929f;
}

.cw-briefing-health-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cw-briefing-health-reasons li {
    padding: 4px 7px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 999px;
    background: rgba(7, 14, 28, .28);
    color: #b7c0ce;
    font-size: 8px;
}
/* Ende Lumidiaso Kundengesundheit */

/* Lumidiaso Entscheidungskarte */
.cw-decision-card {
    margin-top: 11px;
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, .26);
    border-left-width: 4px;
    border-radius: 10px;
    background: rgba(6, 13, 27, .44);
}

.cw-decision-card.critical {
    border-left-color: #ef4444;
}

.cw-decision-card.high {
    border-left-color: #f97316;
}

.cw-decision-card.medium {
    border-left-color: #f59e0b;
}

.cw-decision-card.low {
    border-left-color: #22c55e;
}

.cw-decision-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cw-decision-card-head small,
.cw-decision-card-head strong {
    display: block;
}

.cw-decision-card-head small {
    color: #b7a8cc;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cw-decision-card-head strong {
    margin-top: 4px;
    color: #fff;
    font-size: 16px;
}

.cw-decision-score {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(196, 167, 255, .28);
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    color: #d8c7ff;
    font-size: 9px;
    font-weight: 800;
}

.cw-decision-recommendation {
    margin: 10px 0 0;
    color: #edf1f7;
    font-size: 11px;
    line-height: 1.55;
}

.cw-decision-reasons {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.cw-decision-reasons li {
    position: relative;
    padding-left: 13px;
    color: #aeb8c7;
    font-size: 9px;
    line-height: 1.4;
}

.cw-decision-reasons li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #c4a7ff;
}

.cw-decision-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.cw-decision-footer > span {
    color: #8996a9;
    font-size: 8px;
}

.cw-decision-action {
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid #7652bd;
    border-radius: 8px;
    background: #392268;
    color: #f1eaff;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.cw-decision-action:hover {
    transform: translateY(-1px);
    border-color: #a78bfa;
    background: #4a2c83;
}

.cw-decision-action:focus-visible {
    outline: 2px solid #c4a7ff;
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .cw-decision-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .cw-decision-action {
        width: 100%;
    }
}
/* Ende Lumidiaso Entscheidungskarte */

/* Lumidiaso AI Manager Dashboard */
.ai-manager-dashboard {
    margin: 18px 0 22px;
    padding: 20px;
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(91, 33, 182, .20),
            rgba(30, 41, 59, .72)
        );
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .18);
}

.ai-manager-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.ai-manager-eyebrow {
    margin: 0;
    color: #bca7ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ai-manager-dashboard h3 {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: 22px;
}

.ai-manager-summary {
    max-width: 720px;
    margin: 8px 0 0;
    color: #aeb9ca;
    font-size: 13px;
    line-height: 1.55;
}

.ai-manager-dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.ai-manager-dashboard-stats span {
    min-width: 72px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 10px;
    background: rgba(7, 14, 28, .42);
    color: #aeb8c7;
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
}

.ai-manager-dashboard-stats strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 16px;
}

.ai-manager-priorities {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.ai-manager-priority {
    display: grid;
    grid-template-columns:
        34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-left-width: 4px;
    border-radius: 12px;
    background: rgba(7, 14, 28, .36);
    color: inherit;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.ai-manager-priority:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, .58);
    background: rgba(15, 23, 42, .72);
}

.ai-manager-priority.critical {
    border-left-color: #ef4444;
}

.ai-manager-priority.high {
    border-left-color: #f97316;
}

.ai-manager-priority.medium {
    border-left-color: #f59e0b;
}

.ai-manager-priority.low {
    border-left-color: #22c55e;
}

.ai-manager-rank {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(139, 92, 246, .15);
    color: #d8c7ff;
    font-size: 11px;
    font-weight: 900;
}

.ai-manager-priority-main {
    min-width: 0;
}

.ai-manager-priority-main strong,
.ai-manager-priority-main small,
.ai-manager-priority-main em {
    display: block;
}

.ai-manager-priority-main strong {
    color: #f8fafc;
    font-size: 12px;
}

.ai-manager-priority-main small {
    margin-top: 2px;
    color: #8592a5;
    font-size: 9px;
}

.ai-manager-priority-main em {
    margin-top: 5px;
    overflow: hidden;
    color: #b9c2d0;
    font-size: 10px;
    font-style: normal;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-manager-priority-meta {
    text-align: right;
}

.ai-manager-priority-meta b,
.ai-manager-priority-meta small {
    display: block;
}

.ai-manager-priority-meta b {
    color: #f8fafc;
    font-size: 11px;
}

.ai-manager-priority-meta small {
    margin-top: 4px;
    color: #bca7ff;
    font-size: 9px;
    font-weight: 700;
}

.ai-manager-empty {
    margin-top: 16px;
    padding: 16px;
    border: 1px dashed rgba(148, 163, 184, .24);
    border-radius: 12px;
    color: #8f9bad;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 800px) {
    .ai-manager-dashboard-head {
        flex-direction: column;
    }

    .ai-manager-dashboard-stats {
        justify-content: flex-start;
    }

    .ai-manager-priority {
        grid-template-columns:
            34px minmax(0, 1fr);
    }

    .ai-manager-priority-meta {
        grid-column: 2;
        text-align: left;
    }
}
/* Ende Lumidiaso AI Manager Dashboard */

/* Lumidiaso Chief of Staff */
.chief-dashboard {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto
        minmax(240px, .85fr);
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-left: 4px solid #8b5cf6;
    border-radius: 13px;
    background: rgba(7, 14, 28, .38);
}

.chief-dashboard.critical {
    border-left-color: #ef4444;
}

.chief-dashboard.high {
    border-left-color: #f97316;
}

.chief-dashboard.medium {
    border-left-color: #f59e0b;
}

.chief-dashboard.low {
    border-left-color: #22c55e;
}

.chief-dashboard-focus {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.chief-dashboard-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(139, 92, 246, .16);
    color: #d8c7ff;
    font-size: 17px;
    font-weight: 900;
}

.chief-dashboard small,
.chief-dashboard strong,
.chief-dashboard em {
    display: block;
}

.chief-dashboard small {
    color: #8f9bad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.chief-dashboard-focus strong {
    margin-top: 3px;
    color: #f8fafc;
    font-size: 13px;
}

.chief-dashboard-focus p {
    margin: 5px 0 0;
    color: #aeb8c7;
    font-size: 10px;
    line-height: 1.45;
}

.chief-dashboard-meta {
    display: flex;
    gap: 8px;
}

.chief-dashboard-meta span {
    min-width: 74px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 9px;
    background: rgba(15, 23, 42, .48);
    text-align: center;
}

.chief-dashboard-meta strong {
    margin-top: 4px;
    color: #f8fafc;
    font-size: 11px;
}

.chief-dashboard-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(139, 92, 246, .34);
    border-radius: 10px;
    background: rgba(91, 33, 182, .15);
    color: inherit;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.chief-dashboard-action:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, .70);
    background: rgba(91, 33, 182, .25);
}

.chief-dashboard-action strong {
    margin-top: 3px;
    color: #fff;
    font-size: 11px;
}

.chief-dashboard-action em {
    max-width: 290px;
    margin-top: 4px;
    overflow: hidden;
    color: #aeb8c7;
    font-size: 9px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chief-dashboard-action b {
    flex: 0 0 auto;
    color: #cdbdff;
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .chief-dashboard {
        grid-template-columns: 1fr;
    }

    .chief-dashboard-meta {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .chief-dashboard-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .chief-dashboard-meta span {
        min-width: 0;
    }

    .chief-dashboard-action {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Ende Lumidiaso Chief of Staff */

/* Lumidiaso Decision Explainability */
.ai-manager-explanation {
    margin-top: 9px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 9px;
    background: rgba(3, 8, 19, .34);
}

.ai-manager-explanation summary {
    position: relative;
    padding: 8px 28px 8px 10px;
    color: #c7b8ee;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ai-manager-explanation summary::-webkit-details-marker {
    display: none;
}

.ai-manager-explanation summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #a78bfa;
    font-size: 13px;
}

.ai-manager-explanation[open] summary::after {
    content: "−";
}

.ai-manager-explanation > p {
    margin: 0;
    padding: 0 10px 9px;
    color: #aeb8c7;
    font-size: 9px;
    line-height: 1.5;
}

.ai-manager-explanation-block {
    margin: 0 10px 9px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    background: rgba(15, 23, 42, .38);
}

.ai-manager-explanation-block small {
    display: block;
    margin-bottom: 5px;
    color: #9ca8ba;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-manager-explanation-block ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-manager-explanation-block li {
    position: relative;
    padding-left: 11px;
    color: #b9c2d0;
    font-size: 9px;
    line-height: 1.4;
}

.ai-manager-explanation-block li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #a78bfa;
}

.ai-manager-explanation-block.risk {
    border-color: rgba(239, 68, 68, .18);
    background: rgba(127, 29, 29, .10);
}

.ai-manager-explanation-block.risk small,
.ai-manager-explanation-block.risk li::before {
    color: #fca5a5;
}

.ai-manager-explanation-block.opportunity {
    border-color: rgba(34, 197, 94, .18);
    background: rgba(20, 83, 45, .10);
}

.ai-manager-explanation-block.opportunity small,
.ai-manager-explanation-block.opportunity li::before {
    color: #86efac;
}

.ai-manager-priority:has(
    .ai-manager-explanation[open]
) {
    align-items: flex-start;
}

.ai-manager-priority:has(
    .ai-manager-explanation[open]
) .ai-manager-priority-main em {
    white-space: normal;
}

@media (max-width: 700px) {
    .ai-manager-explanation-block {
        margin-left: 8px;
        margin-right: 8px;
    }
}
/* Ende Lumidiaso Decision Explainability */

/* Lumidiasoo Agent Action Center */
.ai-manager-priority {
    text-decoration: none;
}

.agent-action-form {
    margin: 0;
}

.agent-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(124, 92, 255, 0.28);
    border-radius: 10px;
    background: rgba(124, 92, 255, 0.08);
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.agent-action-button:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 92, 255, 0.55);
    background: rgba(124, 92, 255, 0.14);
}

.agent-action-button.accounting {
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(245, 158, 11, 0.11);
}

.agent-action-button.sales {
    border-color: rgba(59, 130, 246, 0.34);
    background: rgba(59, 130, 246, 0.10);
}

.chief-dashboard-action.agent-action-form {
    display: block;
}

.chief-action-content {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chief-action-content span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.chief-action-content b {
    flex: 0 0 auto;
}
/* Ende Lumidiasoo Agent Action Center */

/* Lumidiasoo Agent Activity Feed */
.v5-mini-icon.agent-accounting {
    border-color: rgba(245, 158, 11, 0.30);
    background: rgba(245, 158, 11, 0.12);
}

.v5-mini-icon.agent-sales {
    border-color: rgba(59, 130, 246, 0.30);
    background: rgba(59, 130, 246, 0.12);
}

.v5-mini-icon.agent-support {
    border-color: rgba(20, 184, 166, 0.30);
    background: rgba(20, 184, 166, 0.12);
}

.agent-feed-content {
    min-width: 0;
}

.agent-feed-label {
    display: block;
    width: max-content;
    margin-bottom: 3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.agent-feed-label.accounting {
    color: #f59e0b;
}

.agent-feed-label.sales {
    color: #60a5fa;
}

.agent-feed-label.support {
    color: #2dd4bf;
}
/* Ende Lumidiasoo Agent Activity Feed */


/* Dashboard: Tarifübersicht */

.dashboard-v5 .plan-overview-card {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid #263653;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(124, 58, 237, .18),
            transparent 34%
        ),
        linear-gradient(145deg, #0d1727, #091321);
}

.dashboard-v5 .plan-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.dashboard-v5 .plan-overview-eyebrow {
    margin: 0 0 5px;
    color: #a879ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.dashboard-v5 .plan-overview-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-v5 .plan-overview-title h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
}

.dashboard-v5 .plan-overview-head p:last-child {
    margin: 6px 0 0;
    color: #8493a8;
    font-size: 11px;
}

.dashboard-v5 .plan-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: #27203f;
    color: #c4a7ff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-v5 .plan-badge.plan-pro {
    background: #2d175e;
    color: #c5a4ff;
}

.dashboard-v5 .plan-badge.plan-business {
    background: #49350d;
    color: #ffd166;
}

.dashboard-v5 .plan-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.dashboard-v5 .plan-overview-grid article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #1d2b40;
    border-radius: 10px;
    background: rgba(7, 16, 29, .72);
}

.dashboard-v5 .plan-overview-grid article > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #24184a;
    font-size: 17px;
}

.dashboard-v5 .plan-overview-grid small,
.dashboard-v5 .plan-overview-grid strong,
.dashboard-v5 .plan-overview-grid em {
    display: block;
}

.dashboard-v5 .plan-overview-grid small {
    color: #8190a4;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dashboard-v5 .plan-overview-grid strong {
    margin: 5px 0 4px;
    color: #fff;
    font-size: 17px;
}

.dashboard-v5 .plan-overview-grid em {
    color: #78879b;
    font-size: 9px;
    font-style: normal;
}

.dashboard-v5 .plan-overview-grid .limit-warning {
    border-color: rgba(239, 68, 68, .5);
}

.dashboard-v5 .plan-overview-grid .limit-warning strong,
.dashboard-v5 .plan-overview-grid .limit-warning em {
    color: #f87171;
}

@media (max-width: 1100px) {
    .dashboard-v5 .plan-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .dashboard-v5 .plan-overview-head {
        flex-direction: column;
    }

    .dashboard-v5 .plan-overview-grid {
        grid-template-columns: 1fr;
    }
}