/* /Components/Ai/FloatingAiButton.razor.rz.scp.css */
/* ============================================================================
   FLOATINGAIBUTTON.RAZOR.CSS

   Globaler Neon-FAB fuer den GlobalAiDrawer.
   ============================================================================ */

.global-ai-fab[b-nzovhj0cba] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(34, 211, 238, 0.40);
    border-radius: 15px;
    color: rgba(236, 254, 255, 0.96);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(34, 211, 238, 0.34), rgba(99, 102, 241, 0.26) 52%, rgba(168, 85, 247, 0.32)),
        rgba(8, 13, 28, 0.94);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.18),
        0 14px 34px rgba(0, 0, 0, 0.46),
        0 0 18px rgba(34, 211, 238, 0.20),
        0 0 28px rgba(168, 85, 247, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(34, 211, 238, 0.12);
    cursor: pointer;
    isolation: isolate;
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease,
        background 200ms ease;
}

.global-ai-fab[b-nzovhj0cba]::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.global-ai-fab-glow[b-nzovhj0cba] {
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(circle at 35% 35%, rgba(34, 211, 238, 0.28), transparent 52%),
        radial-gradient(circle at 70% 72%, rgba(168, 85, 247, 0.24), transparent 58%);
    opacity: .78;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.global-ai-fab:hover[b-nzovhj0cba] {
    transform: translateY(-3px);
    border-color: rgba(125, 211, 252, 0.66);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.28), transparent 30%),
        linear-gradient(135deg, rgba(34, 211, 238, 0.44), rgba(99, 102, 241, 0.34) 52%, rgba(168, 85, 247, 0.44)),
        rgba(8, 13, 28, 0.98);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.26),
        0 16px 38px rgba(0, 0, 0, 0.52),
        0 0 24px rgba(34, 211, 238, 0.28),
        0 0 36px rgba(168, 85, 247, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(34, 211, 238, 0.16);
}

.global-ai-fab:hover .global-ai-fab-glow[b-nzovhj0cba] {
    opacity: 1;
    transform: scale(1.06);
}

.global-ai-fab--active[b-nzovhj0cba] {
    border-color: rgba(34, 211, 238, 0.68);
}

.global-ai-fab--responding .global-ai-fab-glow[b-nzovhj0cba] {
    animation: pf-fab-pulse-b-nzovhj0cba 1.7s ease-in-out infinite;
}

.global-ai-fab-icon[b-nzovhj0cba] {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    filter:
        drop-shadow(0 0 10px rgba(34, 211, 238, 0.50))
        drop-shadow(0 0 18px rgba(168, 85, 247, 0.32));
}

@keyframes pf-fab-pulse-b-nzovhj0cba {
    0%, 100% {
        transform: scale(1);
        opacity: .58;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 899px) {
    .global-ai-fab[b-nzovhj0cba] {
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .global-ai-fab[b-nzovhj0cba]::before {
        border-radius: 11px;
    }

    .global-ai-fab-glow[b-nzovhj0cba] {
        border-radius: 19px;
    }
}
/* /Components/Ai/GlobalAiDrawer.razor.rz.scp.css */
/* ============================================================================
   GLOBALAIDDRAWER.RAZOR.CSS

   Zweck:
   Layout und Animationen für den globalen KI-Seitenbereich (Drawer).
   Desktop: 460px breites Slide-in-Panel von rechts, volle Höhe.
   Mobile (≤899px): Vollbild-Slide-up von unten.
   Enthält Backdrop-Varianten für Focus- und Workspace-Modus sowie
   Tab-Navigation, Chat-Verlauf, Input-Bereich und Markdown-Rendering.

   Funktionen:
   - Backdrop-Varianten (Focus, Workspace)
   - Drawer-Panel mit Slide-In-Animation
   - Tab-Leiste (Focus / Workspace / Diagnostics)
   - Chat-Nachrichten-Layout (User / Assistant)
   - Textarea-Chat-Input mit Auto-Resize
   - Responsive Vollbild-Modus ≤899px

   Eigenschaften:
   - z-index 920 (Panel), 910 (Backdrop)
   - CSS-Variablen: --pf-surface, --pf-border, --pf-primary

   Verwendung:
   - GlobalAiDrawer.razor

   Zugehörige Dateien:
   - GlobalAiDrawer.razor
   - FloatingAiButton.razor.css
   - clipboard-interop.js
   ============================================================================ */

/* ── Backdrop (Desktop only) ── */
.global-ai-backdrop[b-l0m5sy7mxm] {
    position: fixed;
    inset: 0;
    z-index: 910;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.global-ai-backdrop--focus[b-l0m5sy7mxm] {
    background: rgba(2, 6, 18, 0.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.global-ai-backdrop--workspace[b-l0m5sy7mxm] {
    background: rgba(2, 6, 18, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.global-ai-backdrop--visible[b-l0m5sy7mxm] {
    opacity: 1;
}

.global-ai-backdrop--focus.global-ai-backdrop--visible[b-l0m5sy7mxm] {
    pointer-events: all;
}

/* ── Drawer panel ── */
.global-ai-drawer[b-l0m5sy7mxm] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(400px, 460px, 520px);
    height: 100dvh;
    max-height: 100dvh;
    z-index: 920;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background:
        linear-gradient(180deg, rgba(13, 22, 42, 0.97) 0%, rgba(7, 11, 22, 0.99) 100%);
    border-left: 1px solid rgba(99, 102, 241, 0.14);
    box-shadow:
        -24px 0 72px rgba(0, 0, 0, 0.54),
        0 0 0 1px rgba(99, 102, 241, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.028);

    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.global-ai-drawer--focus[b-l0m5sy7mxm] {
    backdrop-filter: blur(28px) saturate(1.9);
    -webkit-backdrop-filter: blur(28px) saturate(1.9);
}

.global-ai-drawer--workspace[b-l0m5sy7mxm] {
    border-left-color: rgba(148, 163, 184, 0.18);
    box-shadow:
        -12px 0 34px rgba(0, 0, 0, 0.28),
        inset 1px 0 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.global-ai-drawer--open[b-l0m5sy7mxm] {
    transform: translateX(0);
}

/* ── Header ── */
.gad-header[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.10);
    background: rgba(10, 15, 30, 0.80);
    gap: 8px;
}

.gad-header-title[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.gad-title-text[b-l0m5sy7mxm] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pf-text, #F9FAFB);
    white-space: nowrap;
    flex-shrink: 0;
}

.gad-context-chip[b-l0m5sy7mxm] {
    max-width: 150px;
    overflow: hidden;
    padding: 2px 8px;
    border: 1px solid rgba(6, 182, 212, 0.24);
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.10);
    color: rgba(6, 182, 212, 0.88);
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status dots */
.gad-status-dot[b-l0m5sy7mxm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(113, 113, 122, 0.5);
    transition: background 300ms ease, box-shadow 300ms ease;
}

.gad-dot--live[b-l0m5sy7mxm] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.gad-dot--loading[b-l0m5sy7mxm] {
    background: #eab308;
    animation: pf-dot-blink-b-l0m5sy7mxm 1s ease infinite;
}

.gad-dot--offline[b-l0m5sy7mxm] {
    background: #ef4444;
}

@keyframes pf-dot-blink-b-l0m5sy7mxm {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

.gad-header-actions[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.gad-model-badge[b-l0m5sy7mxm] {
    max-width: 120px;
    overflow: hidden;
    padding: 1px 7px;
    border: 1px solid rgba(99, 102, 241, 0.26);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.13);
    color: #c7d2fe;
    font-size: 0.64rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gad-spin[b-l0m5sy7mxm] {
    animation: pf-spin-b-l0m5sy7mxm 0.7s linear infinite;
}

@keyframes pf-spin-b-l0m5sy7mxm {
    to { transform: rotate(360deg); }
}

/* ── Chat Stream ── */
.gad-chat-stream[b-l0m5sy7mxm] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.gad-chat-stream[b-l0m5sy7mxm]::-webkit-scrollbar {
    width: 4px;
}

.gad-chat-stream[b-l0m5sy7mxm]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.22);
    border-radius: 2px;
}

/* Empty state */
.gad-empty-state[b-l0m5sy7mxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 6px;
    padding: 48px 16px;
    text-align: center;
    pointer-events: none;
}

.gad-empty-glow[b-l0m5sy7mxm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 70%);
    margin-bottom: 6px;
}

.gad-empty-title[b-l0m5sy7mxm] {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.65);
    margin: 0;
    font-weight: 400;
}

.gad-empty-ctx[b-l0m5sy7mxm] {
    font-size: 0.72rem;
    color: rgba(6, 182, 212, 0.55);
    margin: 0;
}

/* Messages */
.gad-message[b-l0m5sy7mxm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.55;
    max-width: 100%;
}

.gad-message--user[b-l0m5sy7mxm] {
    background: rgba(99, 102, 241, 0.09);
    border: 1px solid rgba(99, 102, 241, 0.16);
    align-self: flex-end;
    max-width: 90%;
}

.gad-message--assistant[b-l0m5sy7mxm] {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.09);
    align-self: flex-start;
}

.gad-message--error[b-l0m5sy7mxm] {
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #fca5a5;
    align-self: stretch;
}

.gad-message--error p[b-l0m5sy7mxm] { margin: 0; font-size: 0.82rem; }

.gad-apply-panel[b-l0m5sy7mxm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
}

.gad-apply-header[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gad-apply-header strong[b-l0m5sy7mxm] {
    display: block;
    color: var(--pf-text, #F9FAFB);
    font-size: 0.82rem;
    line-height: 1.2;
}

.gad-apply-eyebrow[b-l0m5sy7mxm] {
    display: block;
    margin-bottom: 2px;
    color: rgba(148, 163, 184, 0.72);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gad-apply-chip[b-l0m5sy7mxm],
.gad-editable-chip[b-l0m5sy7mxm] {
    flex-shrink: 0;
    border-color: rgba(6, 182, 212, 0.24);
    background: rgba(6, 182, 212, 0.10);
    color: rgba(103, 232, 249, 0.88);
}

.gad-apply-chip[b-l0m5sy7mxm] {
    padding: 2px 8px;
    border: 1px solid rgba(6, 182, 212, 0.24);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
}

.gad-apply-preview[b-l0m5sy7mxm] {
    max-height: 320px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 10px;
    background: rgba(2, 6, 18, 0.35);
}

.gad-apply-preview--raw[b-l0m5sy7mxm] {
    margin: 0;
    color: rgba(226, 232, 240, 0.94);
    font-family: var(--pf-font-mono, "Cascadia Code", Consolas, monospace);
    font-size: 0.78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.gad-apply-actions[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gad-message-head[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.50);
}

.gad-copy-btn[b-l0m5sy7mxm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    opacity: 0.62;
    width: 26px;
    height: 26px;
    padding: 0;
    transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
    border-radius: 7px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    background: rgba(15, 23, 42, 0.36);
    color: rgba(148, 163, 184, 0.72);
    cursor: pointer;
    box-shadow: none;
}

.gad-copy-btn svg[b-l0m5sy7mxm] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gad-copy-btn:hover:not(:disabled)[b-l0m5sy7mxm],
.gad-copy-btn--copied[b-l0m5sy7mxm] {
    opacity: 1;
    background: rgba(99, 102, 241, 0.13);
    border-color: rgba(99, 102, 241, 0.28);
    color: rgba(224, 231, 255, 0.96);
}

.gad-copy-btn:disabled[b-l0m5sy7mxm] {
    opacity: 0.32;
    cursor: not-allowed;
}

.gad-message:hover .gad-copy-btn[b-l0m5sy7mxm] { opacity: 0.96; }

.gad-status-toast[b-l0m5sy7mxm] {
    align-self: center;
    max-width: calc(100% - 24px);
    padding: 6px 10px;
    border: 1px solid rgba(34, 197, 94, 0.20);
    border-radius: 999px;
    background: rgba(22, 101, 52, 0.16);
    color: rgba(187, 247, 208, 0.92);
    font-size: 0.72rem;
    font-weight: 650;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Typing indicator */
.gad-typing[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.gad-typing-dot[b-l0m5sy7mxm] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.65);
    animation: pf-typing-bounce-b-l0m5sy7mxm 1.2s ease-in-out infinite;
}

.gad-typing-dot:nth-child(2)[b-l0m5sy7mxm] { animation-delay: 0.2s; }
.gad-typing-dot:nth-child(3)[b-l0m5sy7mxm] { animation-delay: 0.4s; }

@keyframes pf-typing-bounce-b-l0m5sy7mxm {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.6; }
    30%            { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer ── */
.gad-composer[b-l0m5sy7mxm] {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(99, 102, 241, 0.09);
    background: rgba(6, 9, 20, 0.55);
}

.gad-chips[b-l0m5sy7mxm] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.gad-chip[b-l0m5sy7mxm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 27px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(148, 163, 184, 0.70);
    font-size: 0.74rem;
    cursor: pointer;
    transition: border-color 140ms ease;
}

.gad-chip:hover[b-l0m5sy7mxm] { border-color: rgba(148, 163, 184, 0.24); }

.gad-mode-select-chip[b-l0m5sy7mxm] {
    padding: 0 8px;
}

.gad-chip svg[b-l0m5sy7mxm] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.gad-chip-select[b-l0m5sy7mxm] {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.74rem;
    cursor: pointer;
    outline: none;
    max-width: 130px;
}

.gad-chip-select option[b-l0m5sy7mxm] {
    background: #0D1424;
    color: #E5E7EB;
}

/* Chat bar */
.gad-chatbar[b-l0m5sy7mxm] {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 12px;
    background: rgba(10, 15, 30, 0.72);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.gad-chatbar:focus-within[b-l0m5sy7mxm] {
    border-color: rgba(99, 102, 241, 0.38);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.09);
}

.gad-chatbar-input[b-l0m5sy7mxm] {
    width: 100%;
    min-height: 52px;
    max-height: 200px;
    padding: 10px 12px 4px;
    background: transparent;
    border: none;
    color: var(--pf-text, #E5E7EB);
    font-family: var(--pf-font-ui, inherit);
    font-size: 0.84rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.gad-chatbar-input[b-l0m5sy7mxm]::placeholder {
    color: rgba(148, 163, 184, 0.38);
}

.gad-chatbar-footer[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
    gap: 6px;
}

.gad-chatbar-hint[b-l0m5sy7mxm] {
    font-size: 0.60rem;
    color: rgba(148, 163, 184, 0.32);
    white-space: nowrap;
}

.gad-chatbar-btns[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Icon buttons (refresh, close, clear) */
.gad-icon-btn[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: transparent;
    color: rgba(148, 163, 184, 0.60);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.gad-icon-btn svg[b-l0m5sy7mxm] {
    width: 14px;
    height: 14px;
}

.gad-icon-btn:hover:not(:disabled)[b-l0m5sy7mxm] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--pf-text, #F9FAFB);
}

.gad-icon-btn:disabled[b-l0m5sy7mxm] {
    opacity: 0.30;
    cursor: not-allowed;
}

.gad-refresh-btn[b-l0m5sy7mxm], .gad-close-btn[b-l0m5sy7mxm] {
    width: 30px;
    height: 30px;
}

/* Send button */
.gad-send-btn[b-l0m5sy7mxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(99, 102, 241, 0.32);
    background: rgba(99, 102, 241, 0.20);
    color: #c7d2fe;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    position: relative;
    overflow: hidden;
}

.gad-send-btn svg[b-l0m5sy7mxm] {
    width: 15px;
    height: 15px;
}

.gad-send-btn:hover:not(:disabled)[b-l0m5sy7mxm] {
    background: rgba(99, 102, 241, 0.34);
    border-color: rgba(99, 102, 241, 0.50);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
}

.gad-send-btn:disabled[b-l0m5sy7mxm] {
    opacity: 0.35;
    cursor: not-allowed;
}

.gad-send-pulse[b-l0m5sy7mxm] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.90);
    animation: pf-dot-blink-b-l0m5sy7mxm 0.9s ease infinite;
}

.gad-validation[b-l0m5sy7mxm] {
    font-size: 0.74rem;
    color: #fca5a5;
    margin: 0;
    padding: 0 2px;
}

/* ── Mobile: fullscreen slide-up ── */
@media (max-width: 899px) {
    .global-ai-backdrop[b-l0m5sy7mxm] {
        display: none;
    }

    .global-ai-drawer[b-l0m5sy7mxm] {
        top: var(--pf-mobile-header-height, 76px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        max-height: calc(100dvh - var(--pf-mobile-header-height, 76px));
        border-left: none;
        border-top: 1px solid rgba(99, 102, 241, 0.14);
        transform: translateY(100%);
    }

    .global-ai-drawer--open[b-l0m5sy7mxm] {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .global-ai-drawer[b-l0m5sy7mxm] {
        top: 0;
        bottom: auto;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .gad-header[b-l0m5sy7mxm] {
        padding-top: env(safe-area-inset-top);
        height: calc(52px + env(safe-area-inset-top));
    }

    .gad-chat-stream[b-l0m5sy7mxm] {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .gad-composer[b-l0m5sy7mxm] {
        position: sticky;
        bottom: 0;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
        transform: none;
    }

    .gad-chatbar[b-l0m5sy7mxm],
    .gad-chips[b-l0m5sy7mxm],
    .gad-chip[b-l0m5sy7mxm],
    .gad-mode-select-chip[b-l0m5sy7mxm] {
        max-width: 100%;
        transform: none;
    }

    .global-ai-drawer input[b-l0m5sy7mxm],
    .global-ai-drawer textarea[b-l0m5sy7mxm],
    .global-ai-drawer select[b-l0m5sy7mxm],
    .gad-chatbar-input[b-l0m5sy7mxm],
    .gad-chip-select[b-l0m5sy7mxm] {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .global-ai-drawer input[b-l0m5sy7mxm]::placeholder,
    .global-ai-drawer textarea[b-l0m5sy7mxm]::placeholder,
    .gad-chatbar-input[b-l0m5sy7mxm]::placeholder {
        font-size: 16px !important;
        line-height: 1.45;
    }

    .gad-chatbar-input[b-l0m5sy7mxm] {
        min-height: 50px;
        max-height: min(32dvh, 180px);
        padding: 10px 12px 4px;
    }

    .gad-chatbar-hint[b-l0m5sy7mxm] {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
    }

    .gad-chip[b-l0m5sy7mxm] {
        min-width: 0;
        height: 30px;
        padding: 0 8px;
    }

    .gad-chip-select[b-l0m5sy7mxm] {
        min-width: 0;
        max-width: min(100%, 170px);
    }

    .gad-chatbar-footer[b-l0m5sy7mxm] {
        align-items: center;
        padding: 4px 6px 6px;
    }

    .gad-icon-btn[b-l0m5sy7mxm] {
        width: 30px;
        height: 30px;
    }

    .gad-send-btn[b-l0m5sy7mxm] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
}
/* /Components/Ai/ImageGeneration/KiImgCanvasPanel.razor.rz.scp.css */
/* ============================================================================
   KIIMGCANVASPANEL.RAZOR.CSS

   Zweck:
   Styling für den Fabric.js-Canvas-Arbeitsbereich im KI-IMG Workspace.
   Enthält Toolbar-Layout, Canvas-Rahmen und Werkzeug-Buttons für
   Zoom, Pan und Bildlade-Aktionen.

   Funktionen:
   - Canvas-Workspace-Layout (column flex, full height)
   - Toolbar-Leiste mit gruppierten Buttons
   - Canvas-Container mit Border und Overflow-Clip

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border

   Verwendung:
   - KiImgCanvasPanel.razor

   Zugehörige Dateien:
   - KiImgCanvasPanel.razor
   - ki-img-canvas.js
   ============================================================================ */

.kiimg-canvas-workspace[b-s6m4mbfhms] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

.kiimg-canvas-toolbar[b-s6m4mbfhms] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.kiimg-toolbar-group[b-s6m4mbfhms] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kiimg-toolbar-group--right[b-s6m4mbfhms] {
    margin-left: auto;
}

.kiimg-toolbar-spacer[b-s6m4mbfhms] {
    flex: 1 1 auto;
}

.kiimg-toolbar-btn[b-s6m4mbfhms] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kiimg-toolbar-divider[b-s6m4mbfhms] {
    width: 1px;
    height: 24px;
    background: var(--pf-border);
    margin: 0 6px;
}

.kiimg-canvas-container[b-s6m4mbfhms] {
    flex: 1;
    background: #0d1117;
    border: 1px solid var(--pf-border);
    border-top: none;
    border-bottom: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    position: relative;
}

.kiimg-canvas-container canvas[b-s6m4mbfhms] {
    display: block;
}

.kiimg-canvas-placeholder[b-s6m4mbfhms] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pf-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.kiimg-canvas-placeholder--idle svg[b-s6m4mbfhms] {
    opacity: 0.3;
}

.kiimg-canvas-placeholder--idle p[b-s6m4mbfhms] {
    margin: 0;
    opacity: 0.65;
}

.kiimg-canvas-statusbar[b-s6m4mbfhms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 0 0 10px 10px;
    flex-shrink: 0;
}

.kiimg-status-text[b-s6m4mbfhms] {
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kiimg-status-hint[b-s6m4mbfhms] {
    font-size: 0.75rem;
    color: rgba(161, 161, 170, 0.5);
}

.kiimg-status-badge[b-s6m4mbfhms] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.kiimg-status-badge--pan[b-s6m4mbfhms] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--pf-primary);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

@media (max-width: 760px) {
    .kiimg-canvas-toolbar[b-s6m4mbfhms],
    .kiimg-canvas-statusbar[b-s6m4mbfhms] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .kiimg-status-hint[b-s6m4mbfhms] {
        width: 100%;
    }
}
/* /Components/Ai/ImageGeneration/KiImgExportPanel.razor.rz.scp.css */
/* ============================================================================
   KIIMGEXPORTPANEL.RAZOR.CSS

   Zweck:
   Layout und Styling für den Bild-Export-Tab im KI-IMG Workspace.
   Zweispaltiges Grid (Formular links, Vorschau rechts) mit Export-
   Formular, Preset-Auswahl und Vorschau-Bereich.

   Funktionen:
   - Zweispaltiges Grid-Layout (380px + 1fr)
   - Export-Formular mit Eingabefeldern
   - Vorschau-Bereich mit Bild-Darstellung

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border

   Verwendung:
   - KiImgExportPanel.razor

   Zugehörige Dateien:
   - KiImgExportPanel.razor
   - ki-img-export.js
   ============================================================================ */

.kiimg-export-layout[b-ic4r1tgl00] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
}

.kiimg-export-form[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.kiimg-export-preview[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kiimg-export-section[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.kiimg-export-select[b-ic4r1tgl00] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 8px 12px;
    font-family: inherit;
    width: 100%;
}

.kiimg-export-select:focus[b-ic4r1tgl00] {
    outline: none;
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiimg-format-tabs[b-ic4r1tgl00] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kiimg-format-tab[b-ic4r1tgl00] {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kiimg-format-tab:hover:not(:disabled)[b-ic4r1tgl00] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.28);
    color: var(--pf-text);
}

.kiimg-format-tab:focus-visible[b-ic4r1tgl00] {
    outline: none;
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiimg-format-tab--active[b-ic4r1tgl00] {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #a5b4fc !important;
}

.kiimg-format-tab:disabled[b-ic4r1tgl00] {
    opacity: 0.4;
    cursor: not-allowed;
}

.kiimg-format-tab--disabled[b-ic4r1tgl00] {
    opacity: 0.35;
    cursor: not-allowed;
}

.kiimg-format-note[b-ic4r1tgl00] {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--pf-border);
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 500;
    padding: 1px 4px;
    color: var(--pf-text-muted);
}

.kiimg-format-tab--fallback[b-ic4r1tgl00] {
    border-color: rgba(250, 204, 21, 0.15);
}

.kiimg-format-note--soon[b-ic4r1tgl00] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

.kiimg-format-info-box[b-ic4r1tgl00] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    line-height: 1.45;
}

.kiimg-format-info-box svg[b-ic4r1tgl00] {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.6;
}

.kiimg-format-unavailable-hint[b-ic4r1tgl00] {
    font-size: 0.75rem;
    color: var(--pf-text-muted);
    opacity: 0.6;
    margin: 0;
    padding: 0 2px;
}

.kiimg-format-hint[b-ic4r1tgl00] {
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    background: rgba(250, 204, 21, 0.06);
    border: 1px solid rgba(250, 204, 21, 0.15);
    border-radius: 6px;
    padding: 7px 10px;
    margin: 0;
    line-height: 1.4;
}

.kiimg-export-empty-state[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    color: var(--pf-text-muted);
    text-align: center;
}

.kiimg-export-empty-state p[b-ic4r1tgl00] {
    margin: 0;
    font-size: 0.85rem;
}

.kiimg-export-empty-hint[b-ic4r1tgl00] {
    font-size: 0.78rem !important;
    opacity: 0.65;
}

.kiimg-size-row[b-ic4r1tgl00] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiimg-export-size-tabs[b-ic4r1tgl00] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.kiimg-export-size-tab[b-ic4r1tgl00] {
    display: grid;
    gap: 2px;
    min-height: 48px;
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 8px;
    text-align: center;
}

.kiimg-export-size-tab span[b-ic4r1tgl00] {
    overflow: hidden;
    color: var(--pf-text-muted);
    font-size: 0.64rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiimg-export-size-tab:hover[b-ic4r1tgl00],
.kiimg-export-size-tab:focus-visible[b-ic4r1tgl00] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.32);
    background: rgba(99, 102, 241, 0.08);
    color: var(--pf-text);
}

.kiimg-export-size-tab--active[b-ic4r1tgl00] {
    border-color: rgba(99, 102, 241, 0.44);
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

.kiimg-export-x[b-ic4r1tgl00] {
    color: var(--pf-text-muted);
    font-size: 0.875rem;
}

.kiimg-export-input[b-ic4r1tgl00] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 7px 10px;
    font-family: inherit;
    flex: 1;
    transition: border-color 0.15s;
}

.kiimg-export-input:focus[b-ic4r1tgl00] {
    outline: none;
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiimg-export-label[b-ic4r1tgl00] {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
    font-weight: 500;
}

.kiimg-quality-row[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kiimg-quality-slider[b-ic4r1tgl00] {
    width: 100%;
    accent-color: var(--pf-primary);
}

.kiimg-preset-group[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pf-border);
}

.kiimg-preset-group:last-child[b-ic4r1tgl00] {
    border-bottom: none;
    padding-bottom: 0;
}

.kiimg-preset-group-label[b-ic4r1tgl00] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kiimg-preset-btns[b-ic4r1tgl00] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.kiimg-export-size-presets[b-ic4r1tgl00] {
    margin-top: 2px;
}

.kiimg-preset-btn[b-ic4r1tgl00] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem !important;
}

.kiimg-preset-dim[b-ic4r1tgl00] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
}

.kiimg-export-btn[b-ic4r1tgl00] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    font-size: 0.875rem;
    font-weight: 600;
}

.kiimg-export-error[b-ic4r1tgl00] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 7px;
    padding: 9px 12px;
    color: #f87171;
    font-size: 0.85rem;
}

.kiimg-export-success[b-ic4r1tgl00] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 7px;
    padding: 9px 12px;
    color: #4ade80;
    font-size: 0.85rem;
}

/* Preview */
.kiimg-preview-area[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    gap: 16px;
    min-height: 300px;
}

.kiimg-preview-empty[b-ic4r1tgl00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--pf-text-muted);
}

.kiimg-preview-img[b-ic4r1tgl00] {
    max-width: 100%;
    max-height: min(62vh, 720px);
    object-fit: contain;
    border-radius: var(--pf-radius-sm);
    border: 1px solid var(--pf-border);
}

.kiimg-preview-info[b-ic4r1tgl00] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--pf-text-muted);
}

.kiimg-preview-format-badge[b-ic4r1tgl00] {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
}

@media (max-width: 900px) {
    .kiimg-export-layout[b-ic4r1tgl00] {
        grid-template-columns: 1fr;
    }

    .kiimg-export-preview[b-ic4r1tgl00] {
        min-height: 420px;
    }
}

@media (max-width: 520px) {
    .kiimg-export-size-tabs[b-ic4r1tgl00] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiimg-preview-info[b-ic4r1tgl00] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (min-width: 1700px) {
    .kiimg-export-layout[b-ic4r1tgl00] {
        grid-template-columns: 420px 1fr;
    }
}
/* /Components/Ai/ImageGeneration/KiImgGalleryPanel.razor.rz.scp.css */
/* ============================================================================
   KIIMGGALLERYPANEL.RAZOR.CSS

   Zweck:
   Styling für den Galerie-Tab im KI-IMG Workspace. Zeigt generierte
   Bilder in einem responsiven Grid mit Filterleiste, Bildkarten und
   Auswahl-Interaktion.

   Funktionen:
   - Galerie-Workspace-Layout (column flex)
   - Filterleiste mit Dropdown und Suche
   - Responsive Bildkarten-Grid

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border

   Verwendung:
   - KiImgGalleryPanel.razor
   ============================================================================ */

.kiimg-gallery-workspace[b-wr2o619s9g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.kiimg-gallery-filterbar[b-wr2o619s9g] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
}

.kiimg-filter-group[b-wr2o619s9g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kiimg-filter-label[b-wr2o619s9g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiimg-filter-input[b-wr2o619s9g] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 7px 12px;
    font-family: inherit;
    min-width: 220px;
    transition: border-color 0.15s;
}

.kiimg-filter-input:focus[b-wr2o619s9g] {
    outline: none;
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiimg-filter-select[b-wr2o619s9g] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    color: var(--pf-text);
    font-size: 0.875rem;
    min-height: 34px;
    padding: 7px 12px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kiimg-filter-select:focus[b-wr2o619s9g] {
    outline: none;
    border-color: var(--pf-primary);
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiimg-filter-select option[b-wr2o619s9g] {
    background: var(--pf-surface);
    color: var(--pf-text);
}

.kiimg-filter-input--sm[b-wr2o619s9g] {
    min-width: 160px;
}

.kiimg-filter-toggle[b-wr2o619s9g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--pf-text);
    cursor: pointer;
    user-select: none;
    padding-bottom: 2px;
}

/* Loading */
.kiimg-gallery-loading[b-wr2o619s9g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px;
    color: var(--pf-text-muted);
}

.kiimg-loading-skeleton--gallery[b-wr2o619s9g] {
    width: 100%;
    max-width: 800px;
    height: 200px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: kiimg-skeleton-shimmer-b-wr2o619s9g 1.5s infinite;
}

@keyframes kiimg-skeleton-shimmer-b-wr2o619s9g {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty */
.kiimg-gallery-empty[b-wr2o619s9g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-height: 300px;
    color: var(--pf-text-muted);
    position: relative;
}

.kiimg-gallery-empty-glow[b-wr2o619s9g] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.kiimg-gallery-empty-mark[b-wr2o619s9g] {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-family: Orbitron, sans-serif;
    font-weight: 800;
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(99, 102, 241, 0.14));
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.18);
    z-index: 1;
}

/* Grid */
.kiimg-gallery-grid[b-wr2o619s9g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    overflow-y: auto;
}

.kiimg-gallery-card[b-wr2o619s9g] {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kiimg-gallery-card:hover[b-wr2o619s9g] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.kiimg-gallery-count[b-wr2o619s9g] {
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.kiimg-gallery-img-wrap[b-wr2o619s9g] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0d1117;
    position: relative;
    cursor: pointer;
    border: 0;
    padding: 0;
    width: 100%;
    color: inherit;
}

.kiimg-gallery-img[b-wr2o619s9g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    opacity: 0.58;
    transition: transform 0.2s, filter 0.42s ease, opacity 0.42s ease;
    animation: kiimg-gallery-image-sharpen-b-wr2o619s9g 0.5s ease forwards;
}

@keyframes kiimg-gallery-image-sharpen-b-wr2o619s9g {
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.kiimg-gallery-img-wrap:hover .kiimg-gallery-img[b-wr2o619s9g] {
    transform: scale(1.03);
}

.kiimg-gallery-overlay[b-wr2o619s9g] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.kiimg-gallery-img-wrap:hover .kiimg-gallery-overlay[b-wr2o619s9g] {
    opacity: 1;
}

.kiimg-gallery-info[b-wr2o619s9g] {
    padding: 10px 12px 6px;
    flex: 1;
}

.kiimg-gallery-prompt[b-wr2o619s9g] {
    font-size: 0.82rem;
    color: var(--pf-text);
    line-height: 1.4;
    margin: 0 0 6px;
    word-break: break-word;
}

.kiimg-gallery-meta[b-wr2o619s9g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.kiimg-gallery-badge[b-wr2o619s9g] {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    font-size: 0.72rem;
    padding: 1px 6px;
}

.kiimg-gallery-dim[b-wr2o619s9g],
.kiimg-gallery-date[b-wr2o619s9g] {
    font-size: 0.72rem;
    color: var(--pf-text-muted);
}

.kiimg-gallery-actions[b-wr2o619s9g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--pf-border);
}

.kiimg-delete-btn[b-wr2o619s9g] {
    margin-left: auto;
    color: var(--pf-danger) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.kiimg-delete-btn:hover[b-wr2o619s9g] {
    background: rgba(239, 68, 68, 0.1) !important;
}

.kiimg-delete-confirm-btn[b-wr2o619s9g] {
    font-size: 0.72rem;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

.kiimg-delete-confirm-btn:hover[b-wr2o619s9g] {
    background: rgba(239, 68, 68, 0.18) !important;
}

.kiimg-gallery-error[b-wr2o619s9g] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #f87171;
    font-size: 0.84rem;
    line-height: 1.4;
}

.kiimg-gallery-error svg[b-wr2o619s9g] {
    flex-shrink: 0;
    margin-top: 1px;
}

.kiimg-gallery-load-more[b-wr2o619s9g] {
    display: flex;
    justify-content: center;
    padding: 4px 0 10px;
}

.kiimg-gallery-lightbox[b-wr2o619s9g] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 24px;
    animation: kiimg-gallery-backdrop-fade-b-wr2o619s9g 0.18s ease;
}

.kiimg-gallery-lightbox:focus[b-wr2o619s9g] {
    outline: none;
}

.kiimg-gallery-lightbox-backdrop[b-wr2o619s9g] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(8px);
    cursor: zoom-out;
}

.kiimg-gallery-lightbox-panel[b-wr2o619s9g] {
    position: relative;
    z-index: 1;
    width: min(1180px, 96vw);
    max-height: 92vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: stretch;
    animation: kiimg-gallery-lightbox-scale-b-wr2o619s9g 0.2s ease;
}

.kiimg-gallery-lightbox-img[b-wr2o619s9g] {
    width: 100%;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #050816;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.kiimg-gallery-lightbox-meta[b-wr2o619s9g] {
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.86);
    padding: 16px;
    color: var(--pf-text);
    backdrop-filter: blur(10px);
}

.kiimg-gallery-lightbox-meta p[b-wr2o619s9g] {
    margin: 0 0 14px;
    line-height: 1.5;
}

.kiimg-gallery-lightbox-meta dl[b-wr2o619s9g] {
    display: grid;
    gap: 9px;
    margin: 0;
}

.kiimg-gallery-lightbox-meta dl div[b-wr2o619s9g] {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
}

.kiimg-gallery-lightbox-meta dt[b-wr2o619s9g] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiimg-gallery-lightbox-meta dd[b-wr2o619s9g] {
    margin: 3px 0 0;
    font-size: 0.84rem;
    word-break: break-word;
}

.kiimg-gallery-lightbox-actions[b-wr2o619s9g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.kiimg-gallery-lightbox-close[b-wr2o619s9g],
.kiimg-gallery-lightbox-nav[b-wr2o619s9g] {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.kiimg-gallery-lightbox-close[b-wr2o619s9g] {
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.35rem;
}

.kiimg-gallery-lightbox-nav[b-wr2o619s9g] {
    top: 50%;
    width: 42px;
    height: 56px;
    border-radius: 10px;
    transform: translateY(-50%);
    font-size: 2rem;
}

.kiimg-gallery-lightbox-nav--left[b-wr2o619s9g] {
    left: 10px;
}

.kiimg-gallery-lightbox-nav--right[b-wr2o619s9g] {
    right: 378px;
}

@keyframes kiimg-gallery-backdrop-fade-b-wr2o619s9g {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kiimg-gallery-lightbox-scale-b-wr2o619s9g {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
    .kiimg-gallery-filterbar[b-wr2o619s9g] {
        align-items: stretch;
        gap: 10px;
    }

    .kiimg-filter-group[b-wr2o619s9g],
    .kiimg-filter-input[b-wr2o619s9g],
    .kiimg-filter-select[b-wr2o619s9g] {
        width: 100%;
        min-width: 0;
    }

    .kiimg-gallery-grid[b-wr2o619s9g] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .kiimg-gallery-actions[b-wr2o619s9g] {
        flex-wrap: wrap;
    }

    .kiimg-gallery-lightbox[b-wr2o619s9g] {
        padding: 12px;
    }

    .kiimg-gallery-lightbox-panel[b-wr2o619s9g] {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: 96vh;
    }

    .kiimg-gallery-lightbox-img[b-wr2o619s9g] {
        max-height: 58vh;
    }

    .kiimg-gallery-lightbox-meta[b-wr2o619s9g] {
        max-height: 34vh;
    }

    .kiimg-gallery-lightbox-nav--right[b-wr2o619s9g] {
        right: 10px;
    }
}

@media (min-width: 1700px) {
    .kiimg-gallery-grid[b-wr2o619s9g] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}
/* /Components/Ai/ImageGeneration/KiImgGeneratePanel.razor.rz.scp.css */
/* ============================================================================
   KIIMGGENERATEPANEL.RAZOR.CSS

   Zweck:
   Styling für den Generierungs-Tab im KI-IMG Workspace. Zweispaltiges
   Grid mit Prompt-Formular und Generierungs-Einstellungen links sowie
   dem Bildvorschau-Bereich rechts.

   Funktionen:
   - Zweispaltiges Grid-Layout (400px + 1fr)
   - Prompt-Formular und Parameter-Eingaben
   - Bildvorschau-Bereich mit Generierungs-Status

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border

   Verwendung:
   - KiImgGeneratePanel.razor
   ============================================================================ */

/* ============================================================
   LAYOUT
   ============================================================ */

.kiimg-generate-layout[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
}

.kiimg-generate-form[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
}

.kiimg-generate-results[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kiimg-workspace-grid[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.kiimg-results-panel[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.kiimg-session-layout[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 16px;
    height: min(72vh, 760px);
    min-height: 420px;
    min-width: 0;
}

.kiimg-session-main[b-tlj0twqmbj] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}

.kiimg-session-main-image[b-tlj0twqmbj] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    width: 100%;
    border: 0;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    background:
        radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.08), transparent 38%),
        #080d1a;
}

.kiimg-session-main-image img[b-tlj0twqmbj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: blur(10px);
    opacity: 0.58;
    animation: kiimg-image-sharpen-b-tlj0twqmbj 0.52s ease forwards;
}

.kiimg-session-main-info[b-tlj0twqmbj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(10, 15, 30, 0.74);
}

.kiimg-session-main-info p[b-tlj0twqmbj] {
    margin: 0 0 4px;
    color: var(--pf-text);
    font-size: 0.88rem;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.kiimg-session-main-info span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.74rem;
}

.kiimg-session-main-actions[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.kiimg-session-main-actions .kiimg-icon-action[b-tlj0twqmbj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding-inline: 10px;
}

.kiimg-session-history[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}

.kiimg-session-history-head[b-tlj0twqmbj] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.kiimg-session-history-head span[b-tlj0twqmbj] {
    color: var(--pf-text);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kiimg-session-history-head small[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.kiimg-session-history-list[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
}

.kiimg-session-history-item[b-tlj0twqmbj] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 70px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
    background: rgba(255,255,255,0.035);
    color: var(--pf-text);
    cursor: pointer;
    padding: 7px;
    text-align: left;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.kiimg-session-history-select[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.kiimg-session-delete[b-tlj0twqmbj] {
    position: relative;
    z-index: 2;
    min-width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 7px;
    background: rgba(255,255,255,0.035);
    color: var(--pf-text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
}

.kiimg-session-delete:hover[b-tlj0twqmbj],
.kiimg-session-delete:focus-visible[b-tlj0twqmbj],
.kiimg-session-delete--confirm[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

.kiimg-session-delete--confirm[b-tlj0twqmbj] {
    min-width: 74px;
    font-size: 0.68rem;
    font-weight: 700;
}

.kiimg-session-history-item:hover[b-tlj0twqmbj],
.kiimg-session-history-item:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.07);
}

.kiimg-session-history-item--active[b-tlj0twqmbj] {
    border-color: rgba(34, 211, 238, 0.52);
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
}

.kiimg-session-history-item img[b-tlj0twqmbj] {
    width: 58px;
    height: 58px;
    border-radius: 7px;
    object-fit: cover;
    background: #0d1117;
}

.kiimg-session-history-copy[b-tlj0twqmbj] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.kiimg-session-history-copy strong[b-tlj0twqmbj],
.kiimg-session-history-copy small[b-tlj0twqmbj] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiimg-session-history-copy strong[b-tlj0twqmbj] {
    color: var(--pf-text);
    font-size: 0.76rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kiimg-session-history-copy small[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.kiimg-session-active-dot[b-tlj0twqmbj] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.75);
}

.kiimg-generation-stack[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding-right: 4px;
}

.kiimg-generation-group[b-tlj0twqmbj] {
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    padding: 12px;
}

.kiimg-generation-group + .kiimg-generation-group[b-tlj0twqmbj] {
    opacity: 0.78;
}

.kiimg-generation-status[b-tlj0twqmbj] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    padding: 3px 9px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kiimg-generation-status--current[b-tlj0twqmbj] {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.09);
    color: #67e8f9;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.1);
}

.kiimg-generation-head[b-tlj0twqmbj] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kiimg-generation-head p[b-tlj0twqmbj] {
    margin: 0 0 4px;
    color: var(--pf-text);
    font-size: 0.9rem;
    line-height: 1.4;
}

.kiimg-generation-head span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.75rem;
}

.kiimg-history-panel[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
}

.kiimg-history-list[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    overflow-y: auto;
}

.kiimg-history-item[b-tlj0twqmbj] {
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    color: var(--pf-text);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.kiimg-history-item:hover[b-tlj0twqmbj],
.kiimg-history-item:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.08);
}

.kiimg-history-item span[b-tlj0twqmbj],
.kiimg-history-item small[b-tlj0twqmbj] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiimg-history-item span[b-tlj0twqmbj] {
    font-size: 0.78rem;
    line-height: 1.35;
}

.kiimg-history-item small[b-tlj0twqmbj] {
    margin-top: 4px;
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.kiimg-history-star[b-tlj0twqmbj] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--pf-border);
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    cursor: pointer;
}

.kiimg-history-star--active[b-tlj0twqmbj] {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.35);
    background: rgba(250, 204, 21, 0.1);
}

.kiimg-history-empty[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    border: 1px dashed var(--pf-border);
    border-radius: 10px;
    padding: 18px;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */

.kiimg-form-body[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.kiimg-field[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kiimg-field-row[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.kiimg-label[b-tlj0twqmbj] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0;
}

.kiimg-required[b-tlj0twqmbj] {
    color: #f87171;
    margin-left: 2px;
}

/* ============================================================
   INPUTS
   ============================================================ */

.kiimg-textarea[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 10px 12px;
    min-height: 44px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    line-height: 1.5;
}

.kiimg-textarea[b-tlj0twqmbj]::placeholder {
    color: rgba(255,255,255,0.22);
}

.kiimg-textarea:focus[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(99, 102, 241, 0.04);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.12),
        0 0 20px rgba(99, 102, 241, 0.08);
}

.kiimg-textarea--neg[b-tlj0twqmbj] {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.2);
}

.kiimg-textarea--neg:focus[b-tlj0twqmbj] {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    background: rgba(239, 68, 68, 0.03);
}

.kiimg-input[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 8px 12px;
    min-height: 38px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.kiimg-input:focus[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.kiimg-input--sm[b-tlj0twqmbj] {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.kiimg-input--error[b-tlj0twqmbj] {
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.kiimg-validation-msg[b-tlj0twqmbj] {
    font-size: 0.78rem;
    color: #f87171;
}

.kiimg-select[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text);
    font-size: 0.875rem;
    padding: 8px 12px;
    min-height: 38px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.kiimg-select:focus[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.kiimg-select option[b-tlj0twqmbj] {
    background: var(--pf-surface);
    color: var(--pf-text);
}

/* ============================================================
   PROMPT FOOTER (Zeichenzähler)
   ============================================================ */

.kiimg-prompt-footer[b-tlj0twqmbj] {
    display: flex;
    justify-content: flex-end;
    margin-top: -2px;
}

.kiimg-prompt-helper[b-tlj0twqmbj] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding: 8px 10px;
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.035);
}

.kiimg-prompt-helper-label[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
}

.kiimg-prompt-helper-actions[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kiimg-prompt-helper-btn[b-tlj0twqmbj] {
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 650;
    min-height: 30px;
    padding: 5px 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kiimg-prompt-helper-btn:hover[b-tlj0twqmbj],
.kiimg-prompt-helper-btn:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.38);
    background: rgba(99, 102, 241, 0.1);
    color: var(--pf-text);
}

.kiimg-prompt-helper-btn--primary[b-tlj0twqmbj] {
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.08);
    color: #a5f3fc;
}

.kiimg-prompt-examples[b-tlj0twqmbj] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 6px;
    max-height: min(340px, 55vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 10px;
    background: rgba(13, 19, 35, 0.98);
    box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}

.kiimg-prompt-examples button[b-tlj0twqmbj] {
    display: grid;
    gap: 3px;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    color: var(--pf-text);
    cursor: pointer;
    font-family: inherit;
    padding: 9px 10px;
    text-align: left;
}

.kiimg-prompt-examples button:hover[b-tlj0twqmbj],
.kiimg-prompt-examples button:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.08);
}

.kiimg-prompt-examples strong[b-tlj0twqmbj] {
    font-size: 0.78rem;
}

.kiimg-prompt-examples span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.kiimg-prompt-auto-status[b-tlj0twqmbj] {
    margin-top: 7px;
    color: #a5f3fc;
    font-size: 0.74rem;
    font-weight: 650;
}

.kiimg-prompt-auto-toggle[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    background: rgba(255,255,255,0.025);
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.kiimg-prompt-auto-toggle input[b-tlj0twqmbj] {
    width: 15px;
    height: 15px;
    accent-color: #22d3ee;
}

.kiimg-used-prompt-preview span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kiimg-char-count[b-tlj0twqmbj] {
    font-size: 0.7rem;
    color: var(--pf-text-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    transition: color 0.2s, opacity 0.2s;
}

.kiimg-char-count--warn[b-tlj0twqmbj] {
    color: #fb923c;
    opacity: 1;
}

.kiimg-source-box[b-tlj0twqmbj] {
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: rgba(255,255,255,0.025);
    padding: 9px;
}

.kiimg-source-box--active[b-tlj0twqmbj] {
    border-style: solid;
    border-color: rgba(34, 211, 238, 0.24);
    background: rgba(34, 211, 238, 0.045);
}

.kiimg-source-upload[b-tlj0twqmbj] {
    position: relative;
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 74px;
    color: var(--pf-text-muted);
    cursor: pointer;
    text-align: center;
}

.kiimg-source-upload input[b-tlj0twqmbj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.kiimg-source-upload span[b-tlj0twqmbj] {
    color: var(--pf-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.kiimg-source-upload small[b-tlj0twqmbj] {
    font-size: 0.7rem;
    line-height: 1.35;
}

.kiimg-source-preview[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.kiimg-source-preview img[b-tlj0twqmbj] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: #0d1117;
}

.kiimg-source-preview strong[b-tlj0twqmbj],
.kiimg-source-preview span[b-tlj0twqmbj] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiimg-source-preview strong[b-tlj0twqmbj] {
    color: var(--pf-text);
    font-size: 0.8rem;
    white-space: nowrap;
}

.kiimg-source-preview span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.7rem;
    margin-top: 3px;
}

.kiimg-source-remove[b-tlj0twqmbj] {
    min-height: 30px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    padding: 5px 9px;
}

.kiimg-source-remove:hover[b-tlj0twqmbj],
.kiimg-source-remove:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(248, 113, 113, 0.10);
    color: #fecaca;
}

.kiimg-source-strength[b-tlj0twqmbj] {
    display: grid;
    gap: 5px;
    margin-top: 9px;
}

.kiimg-source-strength span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.kiimg-source-strength input[b-tlj0twqmbj] {
    width: 100%;
    accent-color: #22d3ee;
}

.kiimg-negative-suggestions[b-tlj0twqmbj] {
    display: grid;
    gap: 9px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid rgba(248, 113, 113, 0.14);
    border-radius: 9px;
    background: rgba(248, 113, 113, 0.035);
}

.kiimg-negative-suggestions-title[b-tlj0twqmbj] {
    color: var(--pf-text);
    font-size: 0.78rem;
    font-weight: 750;
}

.kiimg-negative-suggestion-group[b-tlj0twqmbj] {
    display: grid;
    gap: 5px;
}

.kiimg-negative-suggestion-group > span[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.kiimg-negative-suggestion-group > div[b-tlj0twqmbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kiimg-negative-chip[b-tlj0twqmbj] {
    min-height: 28px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: var(--pf-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.73rem;
    font-weight: 650;
    padding: 4px 10px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.kiimg-negative-chip:hover[b-tlj0twqmbj],
.kiimg-negative-chip:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(248, 113, 113, 0.10);
    color: var(--pf-text);
}

.kiimg-negative-chip--active[b-tlj0twqmbj] {
    border-color: rgba(248, 113, 113, 0.48);
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

.kiimg-used-prompt-preview[b-tlj0twqmbj] {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 9px;
    background: rgba(255,255,255,0.025);
    padding: 9px 10px;
}

.kiimg-used-prompt-preview summary[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 750;
}

.kiimg-used-prompt-preview div[b-tlj0twqmbj] {
    display: grid;
    gap: 3px;
    margin-top: 8px;
}

.kiimg-used-prompt-preview p[b-tlj0twqmbj] {
    margin: 0;
    color: var(--pf-text);
    font-size: 0.76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.kiimg-analysis-badges[b-tlj0twqmbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.kiimg-analysis-badge[b-tlj0twqmbj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.03em;
}

.kiimg-analysis-rules[b-tlj0twqmbj] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.kiimg-analysis-rules li[b-tlj0twqmbj] {
    font-size: 0.73rem;
    color: #a5f3fc;
    line-height: 1.4;
}

/* ============================================================
   STIL-CHIPS
   ============================================================ */

.kiimg-style-chips[b-tlj0twqmbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kiimg-style-chip[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 13px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    white-space: nowrap;
}

.kiimg-style-chip:hover[b-tlj0twqmbj] {
    border-color: rgba(99, 102, 241, 0.45);
    color: var(--pf-text);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.12);
}

.kiimg-style-chip--active[b-tlj0twqmbj] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(139, 92, 246, 0.18));
    border-color: rgba(139, 92, 246, 0.6);
    color: #c4b5fd;
    box-shadow:
        0 0 12px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ============================================================
   QUALITÄTS-CHIPS — Segmented Control
   ============================================================ */

.kiimg-format-chips[b-tlj0twqmbj],
.kiimg-quality-chips[b-tlj0twqmbj],
.kiimg-upscale-style-chips[b-tlj0twqmbj] {
    display: grid;
    gap: 6px;
}

.kiimg-format-chips[b-tlj0twqmbj] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kiimg-quality-chips[b-tlj0twqmbj] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kiimg-upscale-style-chips[b-tlj0twqmbj] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kiimg-format-chip[b-tlj0twqmbj],
.kiimg-quality-chip[b-tlj0twqmbj],
.kiimg-upscale-style-chip[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    position: relative;
}

.kiimg-format-chip:hover[b-tlj0twqmbj],
.kiimg-quality-chip:hover[b-tlj0twqmbj],
.kiimg-upscale-style-chip:hover[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.08);
    color: var(--pf-text);
}

.kiimg-format-chip--active[b-tlj0twqmbj],
.kiimg-quality-chip--active[b-tlj0twqmbj],
.kiimg-upscale-style-chip--active[b-tlj0twqmbj] {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.12));
    border-color: rgba(99, 102, 241, 0.42);
    color: #a5b4fc;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
}

.kiimg-quality-steps[b-tlj0twqmbj] {
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

.kiimg-upscale-style-chip small[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.25;
}

/* ============================================================
   RENDER-MODUS
   ============================================================ */

.kiimg-render-mode-chips[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.kiimg-render-mode-chip[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    text-align: center;
}

.kiimg-render-mode-chip:hover[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.08);
    color: var(--pf-text);
}

.kiimg-render-mode-chip--active[b-tlj0twqmbj] {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.12));
    border-color: rgba(99, 102, 241, 0.42);
    color: #a5b4fc;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
}

.kiimg-render-mode-hint[b-tlj0twqmbj] {
    display: block;
    font-size: 0.73rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 6px;
}

.kiimg-render-mode-hint--local[b-tlj0twqmbj] {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.18);
}

.kiimg-render-mode-hint--remote[b-tlj0twqmbj] {
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.06);
    border: 1px solid rgba(34, 211, 238, 0.16);
}

.kiimg-model-help[b-tlj0twqmbj],
.kiimg-model-hint[b-tlj0twqmbj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
}

.kiimg-model-help p[b-tlj0twqmbj],
.kiimg-model-hint[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.kiimg-model-help p[b-tlj0twqmbj] {
    margin: 0;
}

.kiimg-model-badge[b-tlj0twqmbj] {
    flex-shrink: 0;
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
    color: #a5f3fc;
    font-size: 0.66rem;
    font-weight: 750;
    padding: 2px 7px;
}

/* ============================================================
   AUFLÖSUNG
   ============================================================ */

.kiimg-resolution-presets[b-tlj0twqmbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.kiimg-resolution-custom[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kiimg-resolution-x[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ============================================================
   NEGATIVER PROMPT TOGGLE
   ============================================================ */

.kiimg-neg-toggle[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--pf-text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 8px;
    margin: -5px -8px;
    transition: all 0.15s;
    width: fit-content;
}

.kiimg-neg-toggle:hover[b-tlj0twqmbj] {
    color: var(--pf-text);
    border-color: var(--pf-border);
    background: rgba(255,255,255,0.03);
}

.kiimg-neg-dot[b-tlj0twqmbj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    margin-left: 4px;
    flex-shrink: 0;
}

/* ============================================================
   CHEVRON ANIMATION
   ============================================================ */

.kiimg-chevron[b-tlj0twqmbj] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.kiimg-chevron--open[b-tlj0twqmbj] {
    transform: rotate(90deg);
}

/* ============================================================
   EXPERTENMODUS TOGGLE & SECTION
   ============================================================ */

.kiimg-expert-toggle[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
}

.kiimg-expert-toggle:hover[b-tlj0twqmbj] {
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--pf-text);
    background: rgba(99, 102, 241, 0.04);
}

.kiimg-expert-active-badge[b-tlj0twqmbj] {
    margin-left: auto;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kiimg-expert-section[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kiimg-batch-btns[b-tlj0twqmbj] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================================
   INFO-ICON & TOOLTIP
   ============================================================ */

.kiimg-info-icon[b-tlj0twqmbj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--pf-text-muted);
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.6;
    transition: opacity 0.15s;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.kiimg-info-icon:hover[b-tlj0twqmbj] {
    opacity: 1;
}

.kiimg-info-icon[b-tlj0twqmbj]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    padding: 7px 11px;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--pf-text);
    white-space: normal;
    width: 200px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 200;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    line-height: 1.45;
}

.kiimg-info-icon:hover[b-tlj0twqmbj]::after {
    opacity: 1;
}

/* ============================================================
   HELP-BUTTON & GLOSSAR
   ============================================================ */

.kiimg-panel-head-actions[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kiimg-help-btn[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    color: var(--pf-text-muted);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.kiimg-help-btn:hover[b-tlj0twqmbj],
.kiimg-help-btn--active[b-tlj0twqmbj] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    color: #a5b4fc;
}

.kiimg-help-glossary[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 2px;
}

.kiimg-help-glossary-head[b-tlj0twqmbj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pf-text-muted);
    margin-bottom: 12px;
}

.kiimg-help-close[b-tlj0twqmbj] {
    background: none;
    border: none;
    color: var(--pf-text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    transition: all 0.15s;
}

.kiimg-help-close:hover[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.06);
    color: var(--pf-text);
}

.kiimg-glossary-list[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.kiimg-glossary-item[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.kiimg-glossary-item:last-child[b-tlj0twqmbj] {
    border-bottom: none;
    padding-bottom: 0;
}

.kiimg-glossary-item dt[b-tlj0twqmbj] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--pf-text);
    font-family: 'JetBrains Mono', monospace;
}

.kiimg-glossary-item dd[b-tlj0twqmbj] {
    font-size: 0.76rem;
    color: var(--pf-text-muted);
    margin: 0;
    line-height: 1.45;
}

.kiimg-glossary-item dd em[b-tlj0twqmbj] {
    color: #fca5a5;
    font-style: normal;
    font-weight: 600;
}

/* ============================================================
   PROVIDER BADGE
   ============================================================ */

.kiimg-provider-badge[b-tlj0twqmbj] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.kiimg-provider-badge--active[b-tlj0twqmbj] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

/* ============================================================
   GENERATE BUTTON — Hero Level
   ============================================================ */

.kiimg-generate-btn[b-tlj0twqmbj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    margin-top: 6px;
    background: linear-gradient(135deg, #5b5ef4 0%, #7c4ef0 50%, #9f65f5 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-radius: 10px !important;
    color: #fff !important;
    cursor: pointer;
    position: relative;
    box-shadow:
        0 0 28px rgba(99, 102, 241, 0.35),
        0 5px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transition: box-shadow 0.22s ease, transform 0.18s ease !important;
    animation: kiimg-btn-pulse-b-tlj0twqmbj 3s ease-in-out infinite;
}

.kiimg-generate-btn:not(:disabled):hover[b-tlj0twqmbj] {
    box-shadow:
        0 0 48px rgba(139, 92, 246, 0.6),
        0 8px 32px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-2px);
    animation-play-state: paused;
}

.kiimg-generate-btn:not(:disabled):active[b-tlj0twqmbj] {
    transform: translateY(0px);
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.4),
        0 2px 10px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.kiimg-generate-btn:disabled[b-tlj0twqmbj] {
    opacity: 0.35 !important;
    cursor: not-allowed;
    animation: none;
    box-shadow: none !important;
    transform: none !important;
}

.kiimg-generating-row[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.kiimg-generating-label[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.kiimg-cancel-btn[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 10px;
    color: #fca5a5;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.kiimg-cancel-btn:hover[b-tlj0twqmbj],
.kiimg-cancel-btn:focus-visible[b-tlj0twqmbj] {
    outline: none;
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fecaca;
}

.kiimg-cancelled-msg[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
}

@keyframes kiimg-btn-pulse-b-tlj0twqmbj {
    0%, 100% {
        box-shadow:
            0 0 28px rgba(99, 102, 241, 0.32),
            0 5px 20px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.15);
    }
    50% {
        box-shadow:
            0 0 44px rgba(139, 92, 246, 0.52),
            0 5px 20px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.15);
    }
}

/* ============================================================
   ERROR / NO PROVIDER
   ============================================================ */

.kiimg-error-msg[b-tlj0twqmbj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 8px;
    padding: 10px 12px;
    color: #f87171;
    font-size: 0.85rem;
    line-height: 1.4;
}

.kiimg-no-provider-banner[b-tlj0twqmbj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(250, 204, 21, 0.07);
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fde047;
    font-size: 0.84rem;
    line-height: 1.4;
    margin-top: 4px;
}

.kiimg-no-provider-banner svg[b-tlj0twqmbj] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   ERGEBNIS-BEREICH — Loading
   ============================================================ */

.kiimg-results-loading[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px 20px;
}

.kiimg-loading-grid[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: 14px;
    justify-content: center;
    width: 100%;
}

.kiimg-loading-skeleton[b-tlj0twqmbj] {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: linear-gradient(
        110deg,
        rgba(255,255,255,0.03) 25%,
        rgba(99, 102, 241, 0.07) 50%,
        rgba(255,255,255,0.03) 75%
    );
    background-size: 300% 100%;
    animation: kiimg-skeleton-shimmer-b-tlj0twqmbj 1.6s ease-in-out infinite;
    border: 1px solid rgba(99, 102, 241, 0.1);
    overflow: hidden;
    position: relative;
}

.kiimg-blur-preview[b-tlj0twqmbj] {
    position: absolute;
    inset: 14%;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.25), transparent 34%),
        radial-gradient(circle at 70% 65%, rgba(139, 92, 246, 0.28), transparent 38%),
        rgba(255,255,255,0.04);
    filter: blur(18px);
    opacity: 0.7;
    animation: kiimg-blur-preview-b-tlj0twqmbj 2.4s ease-in-out infinite;
}

@keyframes kiimg-blur-preview-b-tlj0twqmbj {
    0%, 100% { transform: scale(0.94); opacity: 0.45; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

@keyframes kiimg-skeleton-shimmer-b-tlj0twqmbj {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.kiimg-elapsed-display[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pf-text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.kiimg-loading-hint[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    text-align: center;
    max-width: 320px;
    margin: 0;
    line-height: 1.5;
}

.kiimg-progress-card[b-tlj0twqmbj] {
    width: min(420px, 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.05);
    padding: 14px;
}

.kiimg-progress-head[b-tlj0twqmbj] {
    display: flex;
    justify-content: space-between;
    color: var(--pf-text);
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.kiimg-progress-track[b-tlj0twqmbj] {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}

.kiimg-progress-track div[b-tlj0twqmbj] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7);
    transition: width 0.35s ease;
}

.kiimg-progress-card p[b-tlj0twqmbj] {
    margin: 10px 0 0;
    color: var(--pf-text-muted);
    font-size: 0.76rem;
}

/* Ultra 4K Phase-Liste */
.kiimg-phase-list[b-tlj0twqmbj] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kiimg-phase-item[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    transition: background 0.2s, color 0.2s;
}

.kiimg-phase-item--active[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--pf-text);
}

.kiimg-phase-item--active .kiimg-phase-icon[b-tlj0twqmbj] {
    color: #6366f1;
}

.kiimg-phase-item--done[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    opacity: 0.6;
}

.kiimg-phase-item--done .kiimg-phase-icon[b-tlj0twqmbj] {
    color: #22d3ee;
}

.kiimg-phase-item--pending[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    opacity: 0.38;
}

.kiimg-phase-icon[b-tlj0twqmbj] {
    font-size: 0.72rem;
    text-align: center;
    line-height: 1;
}

.kiimg-phase-name[b-tlj0twqmbj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiimg-phase-res[b-tlj0twqmbj] {
    font-size: 0.7rem;
    color: var(--pf-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kiimg-phase-item--active .kiimg-phase-res[b-tlj0twqmbj] {
    color: #a5b4fc;
}

/* ============================================================
   ERGEBNIS-BEREICH — Empty State
   ============================================================ */

.kiimg-results-empty[b-tlj0twqmbj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 280px;
    color: var(--pf-text-muted);
    position: relative;
    overflow: hidden;
}

.kiimg-results-empty-glow[b-tlj0twqmbj] {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
    pointer-events: none;
    animation: kiimg-empty-pulse-b-tlj0twqmbj 4s ease-in-out infinite;
}

@keyframes kiimg-empty-pulse-b-tlj0twqmbj {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%       { transform: scale(1.15); opacity: 1; }
}

.kiimg-results-empty svg[b-tlj0twqmbj] {
    opacity: 0.25;
}

.kiimg-empty-orbit[b-tlj0twqmbj] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #a5b4fc;
    font-family: Orbitron, sans-serif;
    font-weight: 800;
    border: 1px solid rgba(99, 102, 241, 0.3);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(99, 102, 241, 0.14)),
        rgba(255,255,255,0.03);
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.18);
    position: relative;
}

.kiimg-results-empty p[b-tlj0twqmbj] {
    position: relative;
    margin: 0;
}

.kiimg-results-empty .text-secondary[b-tlj0twqmbj] {
    font-size: 0.82rem;
    opacity: 0.6;
}

/* ============================================================
   ERGEBNIS-GRID
   ============================================================ */

.kiimg-results-grid[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 4px;
    overflow-y: auto;
    align-content: start;
}

/* ============================================================
   RESULT CARD
   ============================================================ */

.kiimg-result-card[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    animation: kiimg-card-fade-in-b-tlj0twqmbj 0.32s ease forwards;
    animation-delay: calc(var(--stagger-i, 0) * 80ms);
    opacity: 0;
}

.kiimg-result-card:hover[b-tlj0twqmbj] {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 0 24px rgba(99, 102, 241, 0.12),
        0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(-3px) scale(1.015);
}

.kiimg-result-card--new[b-tlj0twqmbj] {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.15),
        0 4px 16px rgba(0,0,0,0.3);
    animation: kiimg-card-fade-in-b-tlj0twqmbj 0.38s ease forwards, kiimg-card-new-glow-b-tlj0twqmbj 2s ease 0.4s forwards;
    animation-delay: calc(var(--stagger-i, 0) * 80ms), calc(var(--stagger-i, 0) * 80ms + 0.4s);
}

@keyframes kiimg-card-fade-in-b-tlj0twqmbj {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kiimg-card-new-glow-b-tlj0twqmbj {
    0% {
        border-color: rgba(139, 92, 246, 0.55);
        box-shadow:
            0 0 32px rgba(139, 92, 246, 0.28),
            0 4px 16px rgba(0,0,0,0.3);
    }
    100% {
        border-color: var(--pf-border);
        box-shadow: none;
    }
}

/* ============================================================
   RESULT CARD — Bild + Overlay
   ============================================================ */

.kiimg-result-img-wrap[b-tlj0twqmbj] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    position: relative;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: zoom-in;
}

.kiimg-result-img[b-tlj0twqmbj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(10px);
    opacity: 0.55;
    transition: transform 0.28s ease, filter 0.42s ease, opacity 0.42s ease;
    animation: kiimg-image-sharpen-b-tlj0twqmbj 0.52s ease forwards;
}

@keyframes kiimg-image-sharpen-b-tlj0twqmbj {
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.kiimg-img-focus[b-tlj0twqmbj] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.16);
    padding: 4px 9px;
    font-size: 0.68rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
}

.kiimg-result-card:hover .kiimg-result-img[b-tlj0twqmbj] {
    transform: scale(1.04);
}

.kiimg-result-card:hover .kiimg-img-focus[b-tlj0twqmbj] {
    opacity: 1;
    transform: translateY(0);
}

.kiimg-result-actions[b-tlj0twqmbj] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.kiimg-icon-action[b-tlj0twqmbj] {
    min-height: 30px;
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    cursor: pointer;
}

.kiimg-icon-action:hover[b-tlj0twqmbj],
.kiimg-icon-action:focus-visible[b-tlj0twqmbj] {
    outline: none;
    color: var(--pf-text);
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.08);
}

.kiimg-result-overlay[b-tlj0twqmbj] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 30%,
        rgba(10, 6, 30, 0.88) 100%
    );
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.kiimg-result-card:hover .kiimg-result-overlay[b-tlj0twqmbj] {
    opacity: 1;
}

.kiimg-overlay-action[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex: 1;
    justify-content: center;
}

.kiimg-overlay-action:hover[b-tlj0twqmbj] {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.kiimg-overlay-action--primary[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
}

.kiimg-overlay-action--primary:hover[b-tlj0twqmbj] {
    background: rgba(99, 102, 241, 0.45);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
}

/* ============================================================
   RESULT CARD — Metadata Bar
   ============================================================ */

.kiimg-result-meta-bar[b-tlj0twqmbj] {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kiimg-meta-top[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.kiimg-meta-pill[b-tlj0twqmbj] {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    color: #a5b4fc;
    padding: 2px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.kiimg-meta-stats[b-tlj0twqmbj] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.kiimg-meta-stat[b-tlj0twqmbj] {
    font-size: 0.68rem;
    color: var(--pf-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kiimg-meta-sep[b-tlj0twqmbj] {
    font-size: 0.68rem;
    color: var(--pf-text-muted);
    opacity: 0.4;
}

.kiimg-meta-seed[b-tlj0twqmbj] {
    font-size: 0.65rem;
    color: var(--pf-text-muted);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .kiimg-generate-layout[b-tlj0twqmbj] {
        grid-template-columns: 360px 1fr;
    }
}

@media (max-width: 860px) {
    .kiimg-generate-layout[b-tlj0twqmbj] {
        grid-template-columns: 1fr;
    }

    .kiimg-workspace-grid[b-tlj0twqmbj] {
        grid-template-columns: 1fr;
    }

    .kiimg-session-layout[b-tlj0twqmbj] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(320px, 58vh) auto;
        height: auto;
        min-height: 0;
    }

    .kiimg-session-history[b-tlj0twqmbj] {
        max-height: none;
    }

    .kiimg-session-history-list[b-tlj0twqmbj] {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;
    }

    .kiimg-session-history-item[b-tlj0twqmbj] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        width: 118px;
        min-width: 118px;
        min-height: 0;
        align-items: start;
    }

    .kiimg-session-history-select[b-tlj0twqmbj] {
        grid-template-columns: 72px;
        grid-template-rows: 72px auto;
    }

    .kiimg-session-history-item img[b-tlj0twqmbj] {
        width: 72px;
        height: 72px;
    }

    .kiimg-session-delete[b-tlj0twqmbj] {
        width: 100%;
        min-width: 0;
    }

    .kiimg-session-history-copy strong[b-tlj0twqmbj] {
        -webkit-line-clamp: 2;
        font-size: 0.7rem;
    }

    .kiimg-session-history-copy small[b-tlj0twqmbj] {
        display: none;
    }

    .kiimg-generate-results[b-tlj0twqmbj] {
        min-height: 420px;
    }

    .kiimg-results-grid[b-tlj0twqmbj] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    .kiimg-format-chips[b-tlj0twqmbj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiimg-quality-chips[b-tlj0twqmbj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .kiimg-session-main-info[b-tlj0twqmbj] {
        flex-direction: column;
    }

    .kiimg-session-main-actions[b-tlj0twqmbj],
    .kiimg-session-main-actions .kiimg-icon-action[b-tlj0twqmbj] {
        width: 100%;
    }

    .kiimg-session-main-actions[b-tlj0twqmbj] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kiimg-prompt-helper[b-tlj0twqmbj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .kiimg-prompt-helper-actions[b-tlj0twqmbj],
    .kiimg-prompt-helper-btn[b-tlj0twqmbj] {
        width: 100%;
    }

    .kiimg-prompt-helper-btn[b-tlj0twqmbj] {
        justify-content: center;
    }

    .kiimg-generate-form[b-tlj0twqmbj] {
        padding-bottom: 84px;
    }

    .kiimg-generate-btn[b-tlj0twqmbj] {
        position: sticky;
        bottom: 12px;
        z-index: 20;
        min-height: 48px;
    }

    .kiimg-results-grid[b-tlj0twqmbj] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .kiimg-result-overlay[b-tlj0twqmbj] {
        opacity: 1;
        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,6,30,0.8) 100%);
    }

    .kiimg-overlay-action[b-tlj0twqmbj] {
        font-size: 0.72rem;
        padding: 5px 8px;
    }
}

.kiimg-lightbox[b-tlj0twqmbj] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 18px;
    animation: kiimg-backdrop-fade-b-tlj0twqmbj 0.18s ease;
}

.kiimg-lightbox:focus[b-tlj0twqmbj] {
    outline: none;
}

.kiimg-lightbox-backdrop[b-tlj0twqmbj] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: zoom-out;
}

.kiimg-lightbox-panel[b-tlj0twqmbj] {
    position: relative;
    z-index: 1;
    width: min(1680px, 98vw);
    max-height: 96vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: stretch;
    animation: kiimg-lightbox-scale-b-tlj0twqmbj 0.2s ease;
}

.kiimg-lightbox-img[b-tlj0twqmbj] {
    width: 100%;
    max-height: 96vh;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #050816;
    box-shadow:
        0 28px 90px rgba(0,0,0,0.52),
        0 0 42px rgba(34, 211, 238, 0.10);
    transform: translateY(-2px);
}

.kiimg-lightbox-meta[b-tlj0twqmbj] {
    max-height: 96vh;
    overflow-y: auto;
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.86);
    padding: 16px;
    color: var(--pf-text);
    backdrop-filter: blur(10px);
}

.kiimg-lightbox-meta p[b-tlj0twqmbj] {
    margin: 0 0 14px;
    line-height: 1.5;
}

.kiimg-lightbox-meta dl[b-tlj0twqmbj] {
    display: grid;
    gap: 9px;
    margin: 0;
}

.kiimg-lightbox-meta dl div[b-tlj0twqmbj] {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
}

.kiimg-lightbox-meta dt[b-tlj0twqmbj] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiimg-lightbox-meta dd[b-tlj0twqmbj] {
    margin: 3px 0 0;
    font-size: 0.84rem;
    word-break: break-word;
}

.kiimg-lightbox-actions[b-tlj0twqmbj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.kiimg-lightbox-close[b-tlj0twqmbj],
.kiimg-lightbox-nav[b-tlj0twqmbj] {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.kiimg-lightbox-close[b-tlj0twqmbj] {
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.35rem;
}

.kiimg-lightbox-nav[b-tlj0twqmbj] {
    top: 50%;
    width: 36px;
    height: 46px;
    border-radius: 12px;
    transform: translateY(-50%);
    font-size: 1.55rem;
    background: rgba(15, 23, 42, 0.54);
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.kiimg-lightbox-nav:hover[b-tlj0twqmbj],
.kiimg-lightbox-nav:focus-visible[b-tlj0twqmbj] {
    outline: none;
    border-color: rgba(34, 211, 238, 0.36);
    background: rgba(34, 211, 238, 0.14);
    box-shadow:
        0 12px 34px rgba(0,0,0,0.28),
        0 0 22px rgba(34, 211, 238, 0.22);
    transform: translateY(-50%) scale(1.04);
}

.kiimg-lightbox-nav--left[b-tlj0twqmbj] {
    left: 10px;
}

.kiimg-lightbox-nav--right[b-tlj0twqmbj] {
    right: 338px;
}

@keyframes kiimg-backdrop-fade-b-tlj0twqmbj {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kiimg-lightbox-scale-b-tlj0twqmbj {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 820px) {
    .kiimg-lightbox[b-tlj0twqmbj] {
        padding: 12px;
    }

    .kiimg-lightbox-panel[b-tlj0twqmbj] {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: 96vh;
    }

    .kiimg-lightbox-img[b-tlj0twqmbj] {
        max-height: 58vh;
    }

    .kiimg-lightbox-meta[b-tlj0twqmbj] {
        max-height: 34vh;
    }

    .kiimg-lightbox-nav--right[b-tlj0twqmbj] {
        right: 10px;
    }
}

@media (min-width: 1600px) {
    .kiimg-generate-layout[b-tlj0twqmbj] {
        grid-template-columns: 440px 1fr;
    }

    .kiimg-results-grid[b-tlj0twqmbj] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (min-width: 1900px) {
    .kiimg-generate-layout[b-tlj0twqmbj] {
        grid-template-columns: 460px 1fr;
        gap: 24px;
    }

    .kiimg-results-grid[b-tlj0twqmbj] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
/* /Components/Ai/ImageGeneration/KiImgLogoPanel.razor.rz.scp.css */
.kiimg-logo-layout[b-icrx67s563] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    min-height: 0;
}

.kiimg-logo-panel[b-icrx67s563],
.kiimg-logo-preview[b-icrx67s563] {
    min-width: 0;
}

.kiimg-logo-grid[b-icrx67s563] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kiimg-logo-field[b-icrx67s563] {
    display: grid;
    gap: 6px;
}

.kiimg-logo-field--wide[b-icrx67s563] {
    grid-column: 1 / -1;
}

.kiimg-logo-field span[b-icrx67s563] {
    color: var(--pf-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kiimg-logo-input[b-icrx67s563] {
    min-height: 38px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--pf-text);
    font: inherit;
    font-size: 0.86rem;
    padding: 8px 11px;
}

.kiimg-logo-input:focus[b-icrx67s563] {
    outline: none;
    border-color: rgba(34, 211, 238, 0.36);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

.kiimg-logo-note[b-icrx67s563] {
    margin-top: 14px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.055);
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 10px 12px;
}

.kiimg-logo-actions[b-icrx67s563] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.kiimg-logo-preview p[b-icrx67s563] {
    margin: 0;
    color: var(--pf-text);
    font-size: 0.92rem;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .kiimg-logo-layout[b-icrx67s563] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .kiimg-logo-grid[b-icrx67s563] {
        grid-template-columns: 1fr;
    }

    .kiimg-logo-actions[b-icrx67s563] {
        flex-direction: column;
    }
}
/* /Components/Ai/ImageGeneration/KiImgModelsPanel.razor.rz.scp.css */
/* ============================================================================
   KIIMGMODELSPANEL.RAZOR.CSS

   Zweck:
   Styling für den Modelle/Provider-Tab im KI-IMG Workspace. Listet
   verfügbare Bildgenerierungsanbieter (z.B. Easy Diffusion) mit
   Verbindungsstatus und Modell-Konfiguration.

   Funktionen:
   - Provider-Listen-Layout
   - Verbindungsstatus-Anzeige pro Provider
   - Modell-Konfigurations-Karten

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border

   Verwendung:
   - KiImgModelsPanel.razor
   ============================================================================ */

.kiimg-models-workspace[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   PROVIDER LISTE
   ============================================================ */

.kiimg-providers-list[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.kiimg-provider-card[b-bmess3flrv] {
    border-radius: var(--pf-radius-sm);
    border: 1px solid var(--pf-border);
    background: rgba(255,255,255,0.02);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Karten-Varianten per Status */
.kiimg-provider-card--online[b-bmess3flrv] {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.02);
}

.kiimg-provider-card--offline[b-bmess3flrv] {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.02);
}

.kiimg-provider-card--timeout[b-bmess3flrv],
.kiimg-provider-card--error[b-bmess3flrv] {
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(248, 113, 113, 0.025);
}

.kiimg-provider-card--models-loaded[b-bmess3flrv] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.025);
}

.kiimg-provider-card--disabled[b-bmess3flrv] {
    border-color: rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.05);
}

.kiimg-provider-card--unchecked[b-bmess3flrv] {
    border-color: rgba(250, 204, 21, 0.15);
}

.kiimg-provider-card--stub[b-bmess3flrv] {
    border-color: rgba(255,255,255,0.06);
    border-style: dashed;
}

/* ============================================================
   PROVIDER HEADER
   ============================================================ */

.kiimg-provider-header[b-bmess3flrv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kiimg-provider-title[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kiimg-provider-title strong[b-bmess3flrv] {
    font-size: 0.9rem;
    color: var(--pf-text);
}

.kiimg-provider-key[b-bmess3flrv] {
    font-size: 0.72rem;
    color: var(--pf-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   STATUS DOT
   ============================================================ */

.kiimg-status-dot[b-bmess3flrv] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kiimg-status-dot--online[b-bmess3flrv] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}

.kiimg-status-dot--offline[b-bmess3flrv] {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.kiimg-status-dot--timeout[b-bmess3flrv],
.kiimg-status-dot--error[b-bmess3flrv] {
    background: #f87171;
    box-shadow: 0 0 4px rgba(248, 113, 113, 0.4);
}

.kiimg-status-dot--models-loaded[b-bmess3flrv] {
    background: #22c55e;
    box-shadow: 0 0 7px rgba(34, 197, 94, 0.6);
}

.kiimg-status-dot--disabled[b-bmess3flrv] {
    background: rgba(255,255,255,0.2);
}

.kiimg-status-dot--unchecked[b-bmess3flrv] {
    background: #facc15;
    box-shadow: 0 0 5px rgba(250, 204, 21, 0.4);
}

.kiimg-status-dot--stub[b-bmess3flrv] {
    background: rgba(255,255,255,0.12);
}

/* ============================================================
   STATUS BADGE
   ============================================================ */

.kiimg-status-badge[b-bmess3flrv] {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.kiimg-status-badge--online[b-bmess3flrv] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.kiimg-status-badge--offline[b-bmess3flrv] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.kiimg-status-badge--timeout[b-bmess3flrv],
.kiimg-status-badge--error[b-bmess3flrv] {
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.kiimg-status-badge--models-loaded[b-bmess3flrv] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.kiimg-status-badge--disabled[b-bmess3flrv] {
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    border: 1px solid var(--pf-border);
}

.kiimg-status-badge--unchecked[b-bmess3flrv] {
    background: rgba(250, 204, 21, 0.08);
    color: #fde047;
    border: 1px solid rgba(250, 204, 21, 0.2);
}

.kiimg-status-badge--stub[b-bmess3flrv] {
    background: rgba(255,255,255,0.04);
    color: var(--pf-text-muted);
    border: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   KONFIGURATIONS-ZEILEN
   ============================================================ */

.kiimg-settings-grid[b-bmess3flrv] {
    display: grid;
    grid-template-columns: minmax(140px, 0.5fr) minmax(260px, 1.5fr) minmax(180px, 0.8fr);
    gap: 12px;
    align-items: end;
}

.kiimg-toggle-row[b-bmess3flrv],
.kiimg-field[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--pf-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kiimg-toggle-row[b-bmess3flrv] {
    min-height: 64px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    background: rgba(0,0,0,0.16);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    padding: 0 12px;
}

.kiimg-toggle-row input[b-bmess3flrv] {
    width: 16px;
    height: 16px;
    accent-color: #22c55e;
}

.kiimg-input[b-bmess3flrv] {
    width: 100%;
    min-height: 38px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.22);
    color: var(--pf-text);
    padding: 8px 10px;
    font: 0.84rem 'JetBrains Mono', monospace;
    outline: none;
}

.kiimg-input:focus[b-bmess3flrv] {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.kiimg-timeout-input[b-bmess3flrv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kiimg-timeout-input span[b-bmess3flrv] {
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.kiimg-provider-status-grid[b-bmess3flrv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kiimg-status-mini-card[b-bmess3flrv] {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    background: rgba(0,0,0,0.14);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.kiimg-status-mini-card span[b-bmess3flrv] {
    color: var(--pf-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kiimg-status-mini-card strong[b-bmess3flrv] {
    color: var(--pf-text);
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kiimg-provider-note[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--pf-text-muted);
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
}

.kiimg-provider-note--online[b-bmess3flrv],
.kiimg-provider-note--models-loaded[b-bmess3flrv] {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.14);
    background: rgba(34, 197, 94, 0.06);
}

.kiimg-provider-note--offline[b-bmess3flrv],
.kiimg-provider-note--timeout[b-bmess3flrv],
.kiimg-provider-note--error[b-bmess3flrv],
.kiimg-provider-note--warn[b-bmess3flrv] {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.16);
    background: rgba(239, 68, 68, 0.06);
}

.kiimg-provider-note--disabled[b-bmess3flrv],
.kiimg-provider-note--unchecked[b-bmess3flrv] {
    color: var(--pf-text-muted);
}

.kiimg-provider-config-row[b-bmess3flrv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 0.8rem;
}

.kiimg-provider-config-label[b-bmess3flrv] {
    color: var(--pf-text-muted);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 60px;
}

.kiimg-provider-config-value[b-bmess3flrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--pf-text);
    background: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   SETUP-KARTE (Easy Diffusion deaktiviert)
   ============================================================ */

.kiimg-setup-card[b-bmess3flrv] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kiimg-setup-card-head[b-bmess3flrv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--pf-text);
}

.kiimg-setup-card-head svg[b-bmess3flrv] {
    flex-shrink: 0;
    color: #a5b4fc;
}

.kiimg-setup-steps[b-bmess3flrv] {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 0.82rem;
    color: var(--pf-text-muted);
    line-height: 1.7;
}

.kiimg-setup-steps code[b-bmess3flrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--pf-text);
}

.kiimg-setup-code[b-bmess3flrv] {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #c9d1d9;
    margin: 0;
    white-space: pre;
    overflow-x: auto;
    line-height: 1.6;
}

.kiimg-setup-hint[b-bmess3flrv] {
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================================
   OFFLINE HINWEIS
   ============================================================ */

.kiimg-provider-offline-hint[b-bmess3flrv] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 0.8rem;
    color: #fca5a5;
    line-height: 1.45;
}

.kiimg-provider-offline-hint svg[b-bmess3flrv] {
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.7;
}

.kiimg-provider-offline-hint code[b-bmess3flrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    padding: 1px 4px;
    color: #fca5a5;
}

/* ============================================================
   PROVIDER INFO / PING
   ============================================================ */

.kiimg-provider-info[b-bmess3flrv] {
    font-size: 0.85rem;
    color: var(--pf-text-muted);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiimg-provider-todo-list[b-bmess3flrv] {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
}

.kiimg-provider-todo-list li[b-bmess3flrv] {
    margin-bottom: 2px;
}

.kiimg-provider-ping-row[b-bmess3flrv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    align-self: flex-start;
}

.kiimg-ping--ok[b-bmess3flrv] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.kiimg-ping--fail[b-bmess3flrv] {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.kiimg-ping-time[b-bmess3flrv] {
    font-weight: 400;
    opacity: 0.65;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

/* ============================================================
   MODELL-CHIPS
   ============================================================ */

.kiimg-provider-models[b-bmess3flrv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiimg-provider-models-label[b-bmess3flrv] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiimg-models-chips[b-bmess3flrv] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.kiimg-model-chip[b-bmess3flrv] {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.75rem;
    color: var(--pf-text);
    font-family: 'JetBrains Mono', monospace;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   ACTIONS
   ============================================================ */

.kiimg-provider-actions[b-bmess3flrv] {
    display: flex;
    gap: 8px;
}

/* ============================================================
   ERWEITERBARKEITS-KARTE
   ============================================================ */

@media (max-width: 760px) {
    .kiimg-provider-header[b-bmess3flrv],
    .kiimg-provider-actions[b-bmess3flrv] {
        flex-wrap: wrap;
    }

    .kiimg-settings-grid[b-bmess3flrv],
    .kiimg-provider-status-grid[b-bmess3flrv] {
        grid-template-columns: 1fr;
    }

    .kiimg-provider-config-row[b-bmess3flrv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .kiimg-status-badge[b-bmess3flrv] {
        margin-left: 21px;
    }
}
/* /Components/Ai/Management/KiTabNavigation.razor.rz.scp.css */
/* ============================================================================
   KITABNAVIGATION.RAZOR.CSS

   Zweck:
   Styling für die Tab-Navigationsleiste in der KI-Verwaltung.
   Horizontale Tab-Leiste mit aktiven/inaktiven Zuständen und
   überlaufendem horizontalen Scroll auf kleinen Bildschirmen.

   Funktionen:
   - Tab-Bar-Layout (flex, no-wrap, horizontal scroll)
   - Aktiver Tab-Indikator
   - Hover- und Fokus-Zustände

   Verwendung:
   - KiTabNavigation.razor
   ============================================================================ */

.kiv-tab-bar[b-vsw2lznljc] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 8px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

.kiv-tab-bar[b-vsw2lznljc]::-webkit-scrollbar {
    display: none;
}

.kiv-tab-btn[b-vsw2lznljc] {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--pf-text-muted, #A1A1AA);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    font-family: var(--pf-font-ui, 'Inter', system-ui);
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.kiv-tab-btn[b-vsw2lznljc]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background 0.15s;
}

.kiv-tab-btn:hover[b-vsw2lznljc] {
    background: rgba(255,255,255,0.05);
    color: var(--pf-text, #F9FAFB);
}

.kiv-tab-btn:focus-visible[b-vsw2lznljc] {
    outline: none;
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

.kiv-tab-btn--active[b-vsw2lznljc] {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.24);
    color: #a5b4fc;
}

.kiv-tab-btn--active[b-vsw2lznljc]::after {
    background: #818cf8;
}

@media (max-width: 640px) {
    .kiv-tab-bar[b-vsw2lznljc] {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .kiv-tab-btn[b-vsw2lznljc] {
        flex: 1 1 auto;
        min-width: 96px;
    }
}
/* /Components/Communication/EmailWorkspace.razor.rz.scp.css */
/* EmailWorkspace – scoped styles */

.comm-email-card[b-vuwzcbl3wx] {
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    background: var(--pf-surface);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.comm-email-card + .comm-email-card[b-vuwzcbl3wx] {
    margin-top: 10px;
}

.comm-email-card--fav[b-vuwzcbl3wx] {
    border-color: rgba(251, 191, 36, 0.22);
}

.comm-email-card--expanded[b-vuwzcbl3wx] {
    border-color: rgba(34, 211, 238, 0.28);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10), 0 8px 28px rgba(0, 0, 0, 0.32);
}

/* ── Header ── */
.comm-email-card-header[b-vuwzcbl3wx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
}

.comm-email-card-header--clickable[b-vuwzcbl3wx] {
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease;
}

.comm-email-card-header--clickable:hover[b-vuwzcbl3wx] {
    background: rgba(255, 255, 255, 0.025);
}

.comm-email-card-expand-icon[b-vuwzcbl3wx] {
    flex-shrink: 0;
    margin-top: 3px;
    color: rgba(148, 163, 184, 0.5);
}

.comm-email-chevron[b-vuwzcbl3wx] {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.comm-email-chevron--open[b-vuwzcbl3wx] {
    transform: rotate(180deg);
}

.comm-email-card-meta[b-vuwzcbl3wx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comm-email-card-subject[b-vuwzcbl3wx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-email-card-subject--placeholder[b-vuwzcbl3wx] {
    font-style: italic;
    color: var(--pf-text-muted);
    font-weight: 400;
}

.comm-email-card-badges[b-vuwzcbl3wx] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-email-card-sub-badge[b-vuwzcbl3wx] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: rgba(165, 180, 252, 0.85);
}

.comm-email-lang-badge[b-vuwzcbl3wx] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
    color: rgba(34, 211, 238, 0.75);
}

.comm-email-date-badge[b-vuwzcbl3wx] {
    font-size: 0.68rem;
    color: var(--pf-text-muted);
    opacity: 0.7;
}

.comm-email-card-preview[b-vuwzcbl3wx] {
    font-size: 0.775rem;
    color: var(--pf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.75;
}

.comm-email-card-actions[b-vuwzcbl3wx] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── Expanded body ── */
.comm-email-card-body-wrap[b-vuwzcbl3wx] {
    border-top: 1px solid var(--pf-border);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Language sections ── */
.comm-email-section[b-vuwzcbl3wx] {
    border-radius: 7px;
    overflow: hidden;
}

.comm-email-section--de[b-vuwzcbl3wx] {
    background: rgba(251, 191, 36, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.14);
}

.comm-email-section--en[b-vuwzcbl3wx] {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.comm-email-section-toggle[b-vuwzcbl3wx] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--pf-text-muted);
    transition: background 120ms ease;
}

.comm-email-section-toggle:hover[b-vuwzcbl3wx] {
    background: rgba(255, 255, 255, 0.03);
}

.comm-email-section-header[b-vuwzcbl3wx] {
    padding: 7px 10px 4px;
}

.comm-email-lang-label[b-vuwzcbl3wx] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comm-email-lang-label--de[b-vuwzcbl3wx] {
    color: rgba(251, 191, 36, 0.85);
}

.comm-email-lang-label--en[b-vuwzcbl3wx] {
    color: rgba(34, 197, 94, 0.85);
}

.comm-email-section-text[b-vuwzcbl3wx] {
    padding: 4px 10px 10px;
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--pf-text-soft);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Footer edit button ── */
.comm-email-card-footer-actions[b-vuwzcbl3wx] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ── Edit mode ── */
.comm-email-edit-row[b-vuwzcbl3wx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.comm-email-edit-col[b-vuwzcbl3wx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comm-email-edit-col--de .comm-add-input[b-vuwzcbl3wx] {
    border-color: rgba(251, 191, 36, 0.22);
}

.comm-email-edit-col--en .comm-add-input[b-vuwzcbl3wx] {
    border-color: rgba(34, 197, 94, 0.22);
}

.comm-email-edit-actions[b-vuwzcbl3wx] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .comm-email-edit-row[b-vuwzcbl3wx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Communication/MeetingWorkspace.razor.rz.scp.css */
/* MeetingWorkspace – Komponentenstile */

.mw-root[b-ixx46r2rrk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding: 14px;
    gap: 0;
    box-sizing: border-box;
}

/* ── Leerer Zustand ── */
.mw-empty[b-ixx46r2rrk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    opacity: 0.7;
    padding: 40px 0;
    text-align: center;
    gap: 12px;
}

.mw-empty button[b-ixx46r2rrk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(148, 163, 184, 0.75);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 130ms, color 130ms;
    white-space: nowrap;
    opacity: 1;
}

.mw-empty button:hover[b-ixx46r2rrk] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.95);
}

/* ── Eingeklappte Karte ── */
.mw-card[b-ixx46r2rrk] {
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    background: var(--pf-surface);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.mw-card:hover[b-ixx46r2rrk] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.04);
}

.mw-card--expanded[b-ixx46r2rrk] {
    cursor: default;
    border-color: rgba(99, 102, 241, 0.3);
    background: var(--pf-surface);
    margin-bottom: 8px;
}

.mw-card--expanded:hover[b-ixx46r2rrk] {
    border-color: rgba(99, 102, 241, 0.3);
    background: var(--pf-surface);
}

.mw-card-header[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}

.mw-card-title[b-ixx46r2rrk] {
    font-size: 0.88rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pf-text);
}

.mw-card-sub-badge[b-ixx46r2rrk] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: rgba(165, 180, 252, 0.85);
    white-space: nowrap;
    flex-shrink: 0;
}

.mw-card-date[b-ixx46r2rrk] {
    font-size: 0.7rem;
    color: var(--pf-text-muted);
    opacity: 0.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.mw-card-chevron[b-ixx46r2rrk] {
    opacity: 0.35;
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.mw-card-preview[b-ixx46r2rrk] {
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    opacity: 0.6;
    padding: 0 14px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Neu anlegen button ── */
.mw-new-btn[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--pf-border);
    border-radius: 8px;
    background: transparent;
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
    margin-top: 4px;
}

.mw-new-btn:hover[b-ixx46r2rrk] {
    border-color: rgba(99, 102, 241, 0.5);
    color: rgba(165, 180, 252, 0.9);
}

/* ── Titelzeile ── */
.mw-topbar[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--pf-border);
    background: var(--pf-surface);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mw-topbar-left[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: var(--pf-text-muted);
}

.mw-topbar-right[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mw-title-input[b-ixx46r2rrk] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--pf-text);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 3px 4px;
    outline: none;
    transition: border-color 180ms ease;
}

.mw-title-input:focus[b-ixx46r2rrk] {
    border-bottom-color: rgba(99, 102, 241, 0.45);
}

.mw-title-input[b-ixx46r2rrk]::placeholder {
    color: var(--pf-text-muted);
    opacity: 0.5;
    font-weight: 400;
}

.mw-date-badge[b-ixx46r2rrk] {
    font-size: 0.7rem;
    color: var(--pf-text-muted);
    opacity: 0.55;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ── Panel-Schaltflächen (Favoriten / Quick Phrases) ── */
.mw-panel-btn[b-ixx46r2rrk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    background: transparent;
    color: var(--pf-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    white-space: nowrap;
}

.mw-panel-btn:hover[b-ixx46r2rrk] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(165, 180, 252, 0.9);
}

.mw-panel-btn--translate[b-ixx46r2rrk] {
    border-color: rgba(34, 211, 238, 0.3);
    color: rgba(34, 211, 238, 0.8);
    background: rgba(34, 211, 238, 0.06);
}

.mw-panel-btn--translate:hover:not(:disabled)[b-ixx46r2rrk] {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.5);
    color: rgba(34, 211, 238, 0.95);
}

.mw-panel-btn--translate:disabled[b-ixx46r2rrk] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mw-panel-btn--save[b-ixx46r2rrk] {
    border-color: rgba(99, 102, 241, 0.35);
    color: rgba(165, 180, 252, 0.85);
    background: rgba(99, 102, 241, 0.08);
}

.mw-panel-btn--save:hover:not(:disabled)[b-ixx46r2rrk] {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.5);
    color: rgba(199, 210, 254, 0.95);
}

.mw-panel-btn--save:disabled[b-ixx46r2rrk] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mw-panel-btn--delete[b-ixx46r2rrk] {
    border-color: rgba(248, 113, 113, 0.25);
    color: rgba(248, 113, 113, 0.7);
    background: rgba(248, 113, 113, 0.05);
}

.mw-panel-btn--delete:hover[b-ixx46r2rrk] {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
    color: rgba(248, 113, 113, 0.95);
}


/* ── Speichermeldung ── */
.mw-save-msg[b-ixx46r2rrk] {
    padding: 7px 14px;
    font-size: 0.8rem;
    color: rgba(34, 197, 94, 0.9);
    background: rgba(34, 197, 94, 0.07);
    border-bottom: 1px solid rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

.mw-save-msg--error[b-ixx46r2rrk] {
    color: rgba(248, 113, 113, 0.9);
    background: rgba(248, 113, 113, 0.07);
    border-bottom-color: rgba(248, 113, 113, 0.18);
}

/* ── Hauptbereich DE / EN ── */
.mw-sheets[b-ixx46r2rrk] {
    display: flex;
    min-height: 500px;
}

/* ── Einzelne Spalte (DE / EN) ── */
.mw-sheet[b-ixx46r2rrk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mw-sheet-header[b-ixx46r2rrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--pf-border);
    flex-shrink: 0;
}

.mw-sheet-lang[b-ixx46r2rrk] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

.mw-sheet-lang--de[b-ixx46r2rrk] {
    color: rgba(251, 191, 36, 0.9);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.mw-sheet-lang--en[b-ixx46r2rrk] {
    color: rgba(34, 211, 238, 0.9);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.mw-sheet-hint[b-ixx46r2rrk] {
    font-size: 0.72rem;
    color: var(--pf-text-muted);
    opacity: 0.5;
}

/* ── Notizblock-Textarea ── */
.mw-textarea[b-ixx46r2rrk] {
    flex: 1;
    width: 100%;
    min-height: 300px;
    resize: none;
    overflow-y: auto;
    background: transparent;
    border: none;
    color: var(--pf-text);
    font-family: var(--pf-font-ui, 'Inter', sans-serif);
    font-size: 0.92rem;
    line-height: 1.8;
    padding: 16px 20px;
    outline: none;
    box-sizing: border-box;
    transition: background 180ms ease;
}

.mw-textarea:focus[b-ixx46r2rrk] {
    background: rgba(255, 255, 255, 0.012);
}

.mw-textarea[b-ixx46r2rrk]::placeholder {
    color: var(--pf-text-muted);
    opacity: 0.35;
    font-size: 0.87rem;
    line-height: 2;
}

.mw-textarea--de:focus[b-ixx46r2rrk] {
    box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.25);
}

.mw-textarea--en:focus[b-ixx46r2rrk] {
    box-shadow: inset 2px 0 0 rgba(34, 211, 238, 0.25);
}

/* ── Bearbeiten-Schaltfläche in der Spaltenüberschrift ── */
.mw-sheet-edit-btn[b-ixx46r2rrk] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--pf-border);
    border-radius: 5px;
    background: transparent;
    color: var(--pf-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 140ms ease, border-color 140ms ease;
}

.mw-sheet-edit-btn:hover[b-ixx46r2rrk] {
    opacity: 1;
    border-color: rgba(99, 102, 241, 0.4);
    color: rgba(165, 180, 252, 0.9);
}

/* ── Vorschau-Ansicht (zeilenweise gerendert) ── */
.mw-en-preview[b-ixx46r2rrk] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    cursor: text;
    font-family: var(--pf-font-ui, 'Inter', sans-serif);
    font-size: 0.92rem;
    line-height: 1.8;
}

.mw-en-line[b-ixx46r2rrk] {
    color: var(--pf-text);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.8em;
}

.mw-en-line--empty[b-ixx46r2rrk] {
    min-height: 1.8em;
}

.mw-en-line--comment[b-ixx46r2rrk] {
    color: #4ade80;
    font-style: italic;
    opacity: 0.85;
}

/* DE preview – normale Zeilen in amber-Tönung */
.mw-de-preview .mw-en-line:not(.mw-en-line--comment):not(.mw-en-line--empty)[b-ixx46r2rrk] {
    color: rgba(251, 191, 36, 0.85);
}

/* ── Trennlinie zwischen den Spalten ── */
.mw-divider[b-ixx46r2rrk] {
    width: 1px;
    background: var(--pf-border);
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Responsives Layout ── */
@media (max-width: 860px) {
    .mw-sheets[b-ixx46r2rrk] {
        flex-direction: column;
    }

    .mw-divider[b-ixx46r2rrk] {
        width: auto;
        height: 1px;
    }

    .mw-qt-input[b-ixx46r2rrk] {
        width: 130px;
    }

    .mw-panel-btn span:not(svg)[b-ixx46r2rrk] {
        display: none;
    }
}
/* /Components/Communication/TranslationHelper.razor.rz.scp.css */
/* TranslationHelper – scoped styles */

.comm-helper-panel[b-vt7ufmafal] {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    background: var(--pf-surface);
    overflow: hidden;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* ── Sections ── */
.comm-helper-section[b-vt7ufmafal] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pf-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comm-helper-section:last-child[b-vt7ufmafal] {
    border-bottom: none;
}

.comm-helper-section-title[b-vt7ufmafal] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-text-muted);
    opacity: 0.8;
}

/* ── Quick translate ── */
.comm-helper-input[b-vt7ufmafal] {
    width: 100%;
    min-height: 60px;
    resize: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
    color: var(--pf-text);
    font-family: var(--pf-font-ui, 'Inter', sans-serif);
    font-size: 0.84rem;
    padding: 8px 10px;
    line-height: 1.55;
    transition: border-color 180ms ease;
}

.comm-helper-input:focus[b-vt7ufmafal] {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

.comm-helper-translate-btn[b-vt7ufmafal] {
    align-self: flex-end;
}

.comm-helper-result[b-vt7ufmafal] {
    background: rgba(34, 211, 238, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 7px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comm-helper-result-text[b-vt7ufmafal] {
    font-size: 0.835rem;
    line-height: 1.6;
    color: var(--pf-text-soft);
    white-space: pre-wrap;
    word-break: break-word;
}

.comm-helper-result-actions[b-vt7ufmafal] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.comm-helper-error[b-vt7ufmafal] {
    font-size: 0.78rem;
    color: rgba(239, 68, 68, 0.85);
    padding: 4px 0;
}

/* ── Fachbegriffe chips ── */
.comm-helper-chips[b-vt7ufmafal] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.comm-fachbegriff-chip[b-vt7ufmafal] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.07);
    border: 1px solid rgba(34, 211, 238, 0.18);
    color: rgba(34, 211, 238, 0.8);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.comm-fachbegriff-chip:hover[b-vt7ufmafal] {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.35);
}

.comm-fachbegriff-de[b-vt7ufmafal] {
    color: rgba(251, 191, 36, 0.8);
}

.comm-fachbegriff-en[b-vt7ufmafal] {
    color: rgba(34, 211, 238, 0.9);
}

/* ── Satzbausteine ── */
.comm-helper-satzbaustein-list[b-vt7ufmafal] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comm-satzbaustein-btn[b-vt7ufmafal] {
    text-align: left;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--pf-border);
    background: rgba(255, 255, 255, 0.025);
    color: var(--pf-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: normal;
    word-break: break-word;
}

.comm-satzbaustein-btn:hover[b-vt7ufmafal] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--pf-text);
}

/* ── AI tone grid ── */
.comm-helper-ai-grid[b-vt7ufmafal] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.comm-ai-tone-btn[b-vt7ufmafal] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.07);
    color: rgba(165, 180, 252, 0.85);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    text-align: center;
}

.comm-ai-tone-btn:hover:not(:disabled)[b-vt7ufmafal] {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.4);
}

.comm-ai-tone-btn:disabled[b-vt7ufmafal] {
    opacity: 0.45;
    cursor: not-allowed;
}

.comm-helper-ai-working[b-vt7ufmafal] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--pf-text-muted);
    padding: 4px 0;
}
/* /Components/Communication/UtilityPanels.razor.rz.scp.css */
/* UtilityPanels – scoped styles */

.comm-utility-host[b-va69k9pf6p] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-shrink: 0;
}

/* ── Trigger button strip ── */
.comm-utility-btns[b-va69k9pf6p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    border-left: 1px solid var(--pf-border);
    background: var(--pf-surface-soft);
    border-radius: 0 0 6px 0;
}

.comm-utility-btn[b-va69k9pf6p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: rgba(148, 163, 184, 0.55);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    padding: 0;
}

.comm-utility-btn:hover[b-va69k9pf6p] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(148, 163, 184, 0.85);
}

.comm-utility-btn--active[b-va69k9pf6p] {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.28);
    color: rgba(165, 180, 252, 0.9);
}

/* ── Slide panel ── */
.comm-utility-panel[b-va69k9pf6p] {
    overflow: hidden;
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1),
                min-width 220ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border-left: 1px solid transparent;
    background: var(--pf-surface);
    display: flex;
    flex-direction: column;
}

.comm-utility-panel--closed[b-va69k9pf6p] {
    width: 0;
    min-width: 0;
}

.comm-utility-panel--open[b-va69k9pf6p] {
    width: 300px;
    min-width: 300px;
    border-left-color: var(--pf-border);
}

.comm-utility-panel-header[b-va69k9pf6p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--pf-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.comm-utility-panel-inner[b-va69k9pf6p] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Empty state ── */
.comm-utility-empty[b-va69k9pf6p] {
    font-size: 0.8rem;
    color: var(--pf-text-muted);
    text-align: center;
    padding: 24px 8px;
    opacity: 0.7;
}

/* ── Favorites ── */
.comm-favorites-header-row[b-va69k9pf6p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 2px;
}

.comm-favorites-col-label[b-va69k9pf6p] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 2px;
}

.comm-favorites-col-label--de[b-va69k9pf6p] {
    color: rgba(251, 191, 36, 0.7);
}

.comm-favorites-col-label--en[b-va69k9pf6p] {
    color: rgba(34, 211, 238, 0.7);
}

.comm-favorites-row[b-va69k9pf6p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-bottom: 1px solid var(--pf-border);
    padding-bottom: 5px;
}

.comm-favorites-cell[b-va69k9pf6p] {
    text-align: left;
    padding: 5px 7px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-favorites-cell--de[b-va69k9pf6p] {
    color: rgba(251, 191, 36, 0.8);
}

.comm-favorites-cell--de:hover[b-va69k9pf6p] {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
}

.comm-favorites-cell--en[b-va69k9pf6p] {
    color: rgba(34, 211, 238, 0.8);
}

.comm-favorites-cell--en:hover[b-va69k9pf6p] {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.2);
}

/* ── Phrases ── */
.comm-phrases-group[b-va69k9pf6p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.comm-phrases-group-label[b-va69k9pf6p] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-text-muted);
    opacity: 0.6;
    padding: 2px 0;
}

.comm-phrase-chip[b-va69k9pf6p] {
    text-align: left;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid var(--pf-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--pf-text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: normal;
    word-break: break-word;
}

.comm-phrase-chip:hover[b-va69k9pf6p] {
    background: rgba(34, 211, 238, 0.06);
    border-color: rgba(34, 211, 238, 0.2);
    color: var(--pf-text);
}
/* /Components/DeveloperLibrary/DeveloperEntryEditor.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERENTRYEDITOR.RAZOR.CSS

   Zweck:
   Styling für den Markdown-Editor-Bereich in der Developer Library.
   Grid-basiertes dreizeiliges Layout mit Header, Toolbar und
   Textarea für die Echtzeit-Bearbeitung von Developer-Einträgen.

   Funktionen:
   - Dreizeiliges Grid-Layout (auto auto 1fr)
   - Relativer Container für KI-Overlay-Positionierung
   - Full-Height-Textarea-Bereich

   Verwendung:
   - DeveloperEntryEditor.razor

   Zugehörige Dateien:
   - DeveloperEntryEditor.razor
   - DeveloperLibraryAiOverlay.razor.css
   ============================================================================ */

.developer-entry-editor[b-480pev4fpq] {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.developer-editor-header[b-480pev4fpq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
}

.developer-editor-title-block[b-480pev4fpq] {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.developer-entry-type[b-480pev4fpq] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    height: 22px;
    color: rgba(152, 225, 255, 0.7);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Colored type badges */

.dev-type-badge[b-480pev4fpq] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 22px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dev-type-badge--default[b-480pev4fpq]      { background: rgba(148, 163, 184, 0.10); color: rgba(203, 213, 225, 0.65); }
.dev-type-badge--markdown[b-480pev4fpq]     { background: rgba(99, 102, 241, 0.14); color: rgba(165, 180, 252, 0.88); }
.dev-type-badge--snippet[b-480pev4fpq]      { background: rgba(34, 197, 94, 0.12); color: rgba(134, 239, 172, 0.88); }
.dev-type-badge--script[b-480pev4fpq]       { background: rgba(249, 115, 22, 0.14); color: rgba(253, 186, 116, 0.88); }
.dev-type-badge--bash[b-480pev4fpq]         { background: rgba(249, 115, 22, 0.12); color: rgba(253, 186, 116, 0.80); }
.dev-type-badge--powershell[b-480pev4fpq]   { background: rgba(59, 130, 246, 0.14); color: rgba(147, 197, 253, 0.88); }
.dev-type-badge--sql[b-480pev4fpq]          { background: rgba(168, 85, 247, 0.14); color: rgba(216, 180, 254, 0.88); }
.dev-type-badge--docker[b-480pev4fpq]       { background: rgba(6, 182, 212, 0.12); color: rgba(103, 232, 249, 0.88); }
.dev-type-badge--template[b-480pev4fpq]     { background: rgba(20, 184, 166, 0.12); color: rgba(94, 234, 212, 0.88); }
.dev-type-badge--architecture[b-480pev4fpq] { background: rgba(99, 102, 241, 0.18); color: rgba(199, 210, 254, 0.88); }
.dev-type-badge--checklist[b-480pev4fpq]    { background: rgba(34, 197, 94, 0.10); color: rgba(134, 239, 172, 0.75); }
.dev-type-badge--note[b-480pev4fpq]         { background: rgba(234, 179, 8, 0.10); color: rgba(253, 224, 71, 0.80); }
.dev-type-badge--link[b-480pev4fpq]         { background: rgba(59, 130, 246, 0.10); color: rgba(147, 197, 253, 0.75); }
.dev-type-badge--prompt[b-480pev4fpq]       { background: rgba(236, 72, 153, 0.12); color: rgba(249, 168, 212, 0.88); }

.developer-editor-title[b-480pev4fpq] {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: clamp(1.25rem, 2vw, 1.95rem);
    font-weight: 780;
    letter-spacing: 0;
    outline: none;
    padding: 2px 0;
}

.developer-editor-title[b-480pev4fpq]::placeholder {
    color: rgba(232, 247, 255, 0.36);
}

.developer-editor-controls[b-480pev4fpq] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}

.developer-editor-modebar[b-480pev4fpq] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.developer-editor-mode[b-480pev4fpq] {
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(232, 247, 255, 0.58);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    cursor: pointer;
}

.developer-editor-mode:hover[b-480pev4fpq],
.developer-editor-mode--active[b-480pev4fpq] {
    background: rgba(255, 255, 255, 0.075);
    color: #ffffff;
}

.developer-code-insert-menu[b-480pev4fpq] {
    position: relative;
}

.developer-code-insert-menu > summary[b-480pev4fpq] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(232, 247, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.developer-code-insert-menu > summary[b-480pev4fpq]::-webkit-details-marker {
    display: none;
}

.developer-code-insert-menu[open] > summary[b-480pev4fpq],
.developer-code-insert-menu > summary:hover[b-480pev4fpq] {
    border-color: rgba(58, 207, 255, 0.24);
    color: #ffffff;
}

.developer-code-insert-panel[b-480pev4fpq] {
    position: absolute;
    z-index: 22;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 150px;
    padding: 6px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 10px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.developer-code-insert-panel button[b-480pev4fpq] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.78);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    padding: 0 10px;
}

.developer-code-insert-panel button:hover[b-480pev4fpq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-more-menu[b-480pev4fpq] {
    position: relative;
    justify-self: end;
}

.developer-more-menu > summary[b-480pev4fpq] {
    display: grid;
    place-items: center;
    width: 30px;
    min-height: 30px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(232, 247, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.developer-more-menu > summary[b-480pev4fpq]::-webkit-details-marker {
    display: none;
}

.developer-more-menu[open] > summary[b-480pev4fpq],
.developer-more-menu > summary:hover[b-480pev4fpq] {
    border-color: rgba(58, 207, 255, 0.24);
    color: #ffffff;
}

.developer-more-menu-panel[b-480pev4fpq] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 220px;
    padding: 6px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 10px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.developer-more-menu-panel button[b-480pev4fpq] {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.78);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    padding: 0 10px;
}

.developer-more-menu-panel button:hover:not(:disabled)[b-480pev4fpq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-more-menu-panel button:disabled[b-480pev4fpq] {
    cursor: default;
    opacity: 0.42;
}

.developer-more-menu-action-missing[b-480pev4fpq] {
    display: grid;
    gap: 2px;
    height: auto;
    min-height: 42px;
    align-content: center;
}

.developer-more-menu-action-missing small[b-480pev4fpq] {
    color: rgba(194, 207, 232, 0.52);
    font-size: 0.68rem;
    font-weight: 600;
}

.developer-more-menu-label[b-480pev4fpq] {
    margin: 6px 8px 3px;
    color: rgba(152, 225, 255, 0.56);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.developer-editor-status[b-480pev4fpq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(194, 207, 232, 0.52);
    font-size: 0.7rem;
}

.developer-editor-status-saving[b-480pev4fpq] {
    color: rgba(255, 213, 128, 0.9);
}

.developer-editor-status-saved[b-480pev4fpq] {
    color: rgba(126, 231, 171, 0.74);
}

.developer-ai-placeholder[b-480pev4fpq] {
    grid-row: 2;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(202, 232, 247, 0.74);
    font-size: 0.78rem;
}

.developer-editor-workspace[b-480pev4fpq] {
    grid-row: 3;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    width: 100%;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.developer-editor-workspace--split[b-480pev4fpq] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: rgba(3, 8, 18, 0.24);
}

.developer-editor-workspace--edit[b-480pev4fpq] {
    min-height: clamp(560px, calc(100vh - 230px), 1400px);
    background: rgba(3, 8, 18, 0.28);
    align-self: stretch;
}

.developer-editor-textarea[b-480pev4fpq] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    display: block;
    resize: none;
    border: 0;
    border-right: 0;
    background: rgba(3, 8, 18, 0.58);
    color: rgba(232, 247, 255, 0.94);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.65;
    outline: none;
    overflow: auto;
    padding: clamp(22px, 2.4vw, 36px);
}

.developer-editor-preview[b-480pev4fpq] {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    max-width: 1180px;
    width: 100%;
    margin: 0;
    padding: clamp(26px, 3.2vw, 54px) clamp(18px, 3vw, 44px);
    color: rgba(231, 238, 250, 0.86);
    line-height: 1.78;
}

.developer-editor-preview[b-480pev4fpq]  h1,
.developer-editor-preview[b-480pev4fpq]  h2 {
    margin: 0 0 16px;
    color: #ffffff;
    letter-spacing: 0;
}

.developer-editor-preview[b-480pev4fpq]  h1 {
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    line-height: 1.18;
}

.developer-editor-preview[b-480pev4fpq]  h2 {
    font-size: 1.18rem;
    margin-top: 26px;
}

.developer-editor-preview[b-480pev4fpq]  p {
    margin: 0 0 18px;
}

.developer-editor-preview[b-480pev4fpq]  ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.developer-editor-preview[b-480pev4fpq]  li {
    margin: 0 0 7px;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-shell {
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: #0d1117;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: #111827;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-language {
    color: rgba(205, 213, 224, 0.68);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(205, 213, 224, 0.68);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy-icon--done {
    display: none;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy-status {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    color: rgba(195, 232, 141, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: max-width 0.15s ease, opacity 0.15s ease;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy:hover,
.developer-editor-preview[b-480pev4fpq]  .developer-code-copy--done {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy:hover {
    transform: translateY(-1px);
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy--done .developer-code-copy-icon--copy {
    display: none;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy--done .developer-code-copy-icon--done {
    display: block;
    color: #c3e88d;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-copy--done .developer-code-copy-status {
    max-width: 58px;
    opacity: 1;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-block {
    overflow: auto;
    margin: 0;
    padding: 18px 20px 20px;
    border: 0;
    border-radius: 0;
    background: #0d1117;
}

.developer-editor-preview[b-480pev4fpq]  code {
    color: rgba(232, 247, 255, 0.95);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.86rem;
}

.developer-editor-preview[b-480pev4fpq]  .developer-inline-code {
    padding: 0.12em 0.34em;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(213, 232, 255, 0.94);
    font-size: 0.88em;
}

.developer-editor-preview[b-480pev4fpq]  .hljs {
    background: transparent;
    color: #d4d4d4 !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-keyword,
.developer-editor-preview[b-480pev4fpq]  .hljs-selector-tag {
    color: #c586c0 !important;
    font-weight: 700;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-built_in,
.developer-editor-preview[b-480pev4fpq]  .hljs-type,
.developer-editor-preview[b-480pev4fpq]  .hljs-class .hljs-title {
    color: #4ec9b0 !important;
    font-weight: 650;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-title.function_,
.developer-editor-preview[b-480pev4fpq]  .hljs-function .hljs-title,
.developer-editor-preview[b-480pev4fpq]  .hljs-title {
    color: #dcdcaa !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-string,
.developer-editor-preview[b-480pev4fpq]  .hljs-regexp,
.developer-editor-preview[b-480pev4fpq]  .hljs-template-string {
    color: #ce9178 !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-number,
.developer-editor-preview[b-480pev4fpq]  .hljs-literal,
.developer-editor-preview[b-480pev4fpq]  .hljs-symbol {
    color: #b5cea8 !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-comment {
    color: #6a9955 !important;
    font-style: italic;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-name,
.developer-editor-preview[b-480pev4fpq]  .hljs-tag {
    color: #569cd6 !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-attr,
.developer-editor-preview[b-480pev4fpq]  .hljs-attribute {
    color: #9cdcfe !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-variable,
.developer-editor-preview[b-480pev4fpq]  .hljs-params,
.developer-editor-preview[b-480pev4fpq]  .hljs-property,
.developer-editor-preview[b-480pev4fpq]  .hljs-variable.language_ {
    color: #9cdcfe !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-meta,
.developer-editor-preview[b-480pev4fpq]  .hljs-meta .hljs-keyword {
    color: #d7ba7d !important;
}

.developer-editor-preview[b-480pev4fpq]  .hljs-operator,
.developer-editor-preview[b-480pev4fpq]  .hljs-punctuation {
    color: #d4d4d4 !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair {
    font-weight: 800;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-1 {
    color: #ffd700 !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-2 {
    color: #da70d6 !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-3 {
    color: #179fff !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-4 {
    color: #49c95b !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-5 {
    color: #ff8c42 !important;
}

.developer-editor-preview[b-480pev4fpq]  .developer-code-pair-6 {
    color: #ff6bcb !important;
}

.developer-entry-editor-empty[b-480pev4fpq] {
    display: grid;
    height: 100%;
    min-height: 260px;
    place-items: center;
    color: rgba(194, 207, 232, 0.62);
    text-align: center;
}

@media (max-width: 860px) {
    .developer-editor-workspace--split[b-480pev4fpq] {
        grid-template-columns: 1fr;
    }

    .developer-editor-textarea[b-480pev4fpq] {
        border: 0;
    }
}

@media (max-width: 720px) {
    .developer-editor-header[b-480pev4fpq] {
        display: grid;
    }

    .developer-editor-controls[b-480pev4fpq] {
        justify-items: start;
    }

    .developer-editor-status[b-480pev4fpq] {
        justify-content: flex-start;
    }
}
/* /Components/DeveloperLibrary/DeveloperEntryList.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERENTRYLIST.RAZOR.CSS

   Zweck:
   Styling für die Eintrags-Liste in der Developer Library. Zeigt
   Einträge mit Typ-Icon, Titel und Aktions-Buttons in einem
   kompakten Grid-Layout mit Suchleiste und Neu-Button.

   Funktionen:
   - Grid-Layout (auto auto 1fr) mit scrollbarem Listenbereich
   - Topbar mit Suche, Filter und Neu-Button (74px + 32px)
   - Eintrags-Zeilen mit Hover- und Auswahl-Zustand

   Verwendung:
   - DeveloperEntryList.razor
   ============================================================================ */

.developer-entry-list[b-smyjell8uk] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
}

.developer-entry-topbar[b-smyjell8uk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 32px;
    gap: 6px;
}

.developer-entry-search[b-smyjell8uk],
.developer-entry-sort[b-smyjell8uk] {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(245, 248, 255, 0.86);
    font: inherit;
    font-size: 0.8rem;
    outline: none;
}

.developer-entry-search[b-smyjell8uk] {
    padding: 9px 10px;
}

.developer-entry-sort[b-smyjell8uk] {
    padding: 0 7px;
}

.developer-entry-search:focus[b-smyjell8uk],
.developer-entry-sort:focus[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.07);
}

.developer-entry-create[b-smyjell8uk] {
    position: relative;
}

.developer-entry-create > summary[b-smyjell8uk] {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(232, 247, 255, 0.72);
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
}

.developer-entry-create > summary[b-smyjell8uk]::-webkit-details-marker {
    display: none;
}

.developer-entry-create[open] > summary[b-smyjell8uk],
.developer-entry-create > summary:hover[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.075);
    color: #ffffff;
}

.developer-entry-create-panel[b-smyjell8uk] {
    position: absolute;
    z-index: 25;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 140px;
    padding: 5px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 9px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.developer-entry-create-panel button[b-smyjell8uk] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.76);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    padding: 0 9px;
}

.developer-entry-create-panel button:hover:not(:disabled)[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-entry-create-panel button:disabled[b-smyjell8uk] {
    cursor: default;
    opacity: 0.4;
}

.developer-entry-create-group[b-smyjell8uk] {
    display: block;
    padding: 6px 9px 3px;
    color: rgba(148, 163, 184, 0.45);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.developer-entry-count[b-smyjell8uk] {
    color: rgba(194, 207, 232, 0.48);
    font-size: 0.74rem;
}

.developer-entry-items[b-smyjell8uk] {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.developer-entry-item[b-smyjell8uk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px 6px 10px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(239, 245, 255, 0.78);
    cursor: pointer;
    text-align: left;
}

.developer-entry-item:hover[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.92);
}

.developer-entry-item--selected[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
}

.developer-entry-title[b-smyjell8uk],
.developer-entry-meta[b-smyjell8uk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.developer-entry-copy[b-smyjell8uk] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.developer-entry-title[b-smyjell8uk] {
    font-size: 0.87rem;
    font-weight: 620;
}

.developer-entry-meta[b-smyjell8uk] {
    color: rgba(194, 207, 232, 0.46);
    font-size: 0.72rem;
}

.developer-entry-menu[b-smyjell8uk] {
    position: relative;
    justify-self: end;
    opacity: 0;
}

.developer-entry-item:hover .developer-entry-menu[b-smyjell8uk],
.developer-entry-menu[open][b-smyjell8uk] {
    opacity: 1;
}

.developer-entry-menu > summary[b-smyjell8uk] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 6px;
    color: rgba(232, 247, 255, 0.56);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.developer-entry-menu > summary[b-smyjell8uk]::-webkit-details-marker {
    display: none;
}

.developer-entry-menu > summary:hover[b-smyjell8uk],
.developer-entry-menu[open] > summary[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.developer-entry-menu-panel[b-smyjell8uk] {
    position: absolute;
    z-index: 24;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 130px;
    padding: 5px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 9px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.developer-entry-menu-panel button[b-smyjell8uk] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.76);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    padding: 0 9px;
}

.developer-entry-menu-panel button:hover[b-smyjell8uk] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-entry-empty[b-smyjell8uk] {
    display: grid;
    min-height: 160px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: rgba(194, 207, 232, 0.5);
    font-size: 0.84rem;
    text-align: center;
}

@media (max-width: 720px) {
    .developer-entry-topbar[b-smyjell8uk] {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .developer-entry-sort[b-smyjell8uk] {
        display: none;
    }
}
/* /Components/DeveloperLibrary/DeveloperEntryViewer.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERENTRYVIEWER.RAZOR.CSS

   Zweck:
   Styling für den Eintrags-Viewer in der Developer Library. Zeigt
   den gerenderten Markdown-Inhalt eines Developer-Eintrags mit
   Header, Metadaten und scrollbarem Content-Bereich.

   Funktionen:
   - Zweizeiliges Grid-Layout (auto 1fr)
   - Header mit Titel, Tags und Aktions-Buttons
   - Scrollbarer Markdown-Content-Bereich

   Verwendung:
   - DeveloperEntryViewer.razor

   Zugehörige Dateien:
   - DeveloperEntryViewer.razor
   - AiMarkdownRenderer.razor.css
   ============================================================================ */

.developer-entry-viewer[b-3dnb2loufw] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
}

.developer-entry-viewer-header[b-3dnb2loufw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(160, 178, 210, 0.14);
}

.developer-entry-viewer-header h2[b-3dnb2loufw] {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: clamp(1.24rem, 2vw, 1.9rem);
    letter-spacing: 0;
}

.developer-entry-viewer-header time[b-3dnb2loufw] {
    flex: 0 0 auto;
    color: rgba(194, 207, 232, 0.58);
    font-size: 0.78rem;
}

.developer-entry-type[b-3dnb2loufw] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(58, 207, 255, 0.24);
    border-radius: 999px;
    background: rgba(58, 207, 255, 0.08);
    color: rgba(152, 225, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.developer-markdown-body[b-3dnb2loufw] {
    min-height: 0;
    overflow: auto;
    padding: 18px 6px 8px 0;
    color: rgba(231, 238, 250, 0.86);
    line-height: 1.68;
}

.developer-markdown-body :deep(h1)[b-3dnb2loufw],
.developer-markdown-body :deep(h2)[b-3dnb2loufw] {
    margin: 0 0 14px;
    color: #ffffff;
    letter-spacing: 0;
}

.developer-markdown-body :deep(h1)[b-3dnb2loufw] {
    font-size: 1.32rem;
}

.developer-markdown-body :deep(h2)[b-3dnb2loufw] {
    font-size: 1.08rem;
}

.developer-markdown-body :deep(p)[b-3dnb2loufw] {
    margin: 0 0 14px;
}

.developer-markdown-body :deep(ul)[b-3dnb2loufw] {
    margin: 0 0 16px;
    padding-left: 20px;
}

.developer-markdown-body :deep(li)[b-3dnb2loufw] {
    margin: 0 0 7px;
}

.developer-markdown-body :deep(.developer-code-block)[b-3dnb2loufw] {
    overflow: auto;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(58, 207, 255, 0.18);
    border-radius: 8px;
    background: rgba(3, 8, 18, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.developer-markdown-body :deep(code)[b-3dnb2loufw] {
    color: rgba(232, 247, 255, 0.95);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.86rem;
}

.developer-entry-viewer-empty[b-3dnb2loufw] {
    display: grid;
    height: 100%;
    min-height: 260px;
    place-items: center;
    color: rgba(194, 207, 232, 0.62);
    text-align: center;
}

@media (max-width: 720px) {
    .developer-entry-viewer-header[b-3dnb2loufw] {
        display: grid;
    }
}
/* /Components/DeveloperLibrary/DeveloperLibraryAiOverlay.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERLIBRARYAIOVERLAY.RAZOR.CSS

   Zweck:
   Styling für das KI-Overlay im Developer Library Editor. Positioniert
   den KI-Trigger-Button und das Overlay-Panel über dem Editor-Bereich,
   ohne den Textfluss zu unterbrechen.

   Funktionen:
   - Absolut positionierter Overlay-Host (pointer-events: none)
   - KI-Trigger-Button mit Hover-Aktivierung
   - Overlay-Panel mit Eingabe und Aktions-Buttons

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border, --pf-primary

   Verwendung:
   - DeveloperLibraryAiOverlay.razor

   Zugehörige Dateien:
   - DeveloperEntryEditor.razor.css
   ============================================================================ */

.dev-ai-host[b-dy99gnw33e] {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    pointer-events: none;
}

.dev-ai-trigger[b-dy99gnw33e] {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 13px;
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.10);
    color: rgba(219, 228, 255, 0.96);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    pointer-events: all;
    backdrop-filter: blur(12px) saturate(1.35);
    -webkit-backdrop-filter: blur(12px) saturate(1.35);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease, visibility 160ms ease;
}

.dev-ai-trigger:hover[b-dy99gnw33e] {
    background: rgba(99, 102, 241, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
    transform: translateY(-1px);
}

.dev-ai-star[b-dy99gnw33e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    filter: none;
}

.dev-ai-trigger--hidden[b-dy99gnw33e] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dev-ai-overlay[b-dy99gnw33e] {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 250px;
    max-height: none;
    overflow: hidden;
    border: 1px solid rgba(160, 178, 210, 0.14);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(15, 22, 43, 0.72), rgba(6, 10, 22, 0.70)),
        var(--pf-surface-elevated, #0d1424);
    opacity: 0;
    pointer-events: none;
    transform: translateY(112%);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(99, 102, 241, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 220ms ease, opacity 180ms ease;
}

.dev-ai-overlay--open[b-dy99gnw33e] {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.dev-ai-overlay-header[b-dy99gnw33e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    background: rgba(255, 255, 255, 0.018);
    flex: 0 0 auto;
}

.dev-ai-overlay-title[b-dy99gnw33e],
.dev-ai-overlay-header-actions[b-dy99gnw33e] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.dev-ai-overlay-title[b-dy99gnw33e] {
    gap: 6px;
    color: rgba(232, 238, 255, 0.94);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dev-ai-overlay-header-actions[b-dy99gnw33e] {
    justify-content: flex-end;
    gap: 6px;
}

.dev-ai-model-badge[b-dy99gnw33e] {
    max-width: 190px;
    overflow: hidden;
    padding: 1px 7px;
    border: 1px solid rgba(99, 102, 241, 0.26);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.13);
    color: #c7d2fe;
    font-size: 0.66rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-ai-close-btn[b-dy99gnw33e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(232, 238, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 250, 255, 0.9);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.dev-ai-close-btn:hover[b-dy99gnw33e] {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.dev-ai-overlay-body[b-dy99gnw33e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding: 10px 12px 12px;
}

[b-dy99gnw33e] .ai-action-section,
[b-dy99gnw33e] .ai-free-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-dy99gnw33e] .ai-section-label {
    margin: 0;
    color: rgba(194, 207, 232, 0.62);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.055em;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(160, 178, 210, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.052);
    color: rgba(232, 238, 255, 0.84);
    font-size: 0.76rem;
    font-weight: 720;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact > * {
    flex: 0 0 auto;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact:hover:not(:disabled) {
    border-color: rgba(99, 102, 241, 0.44);
    background: rgba(99, 102, 241, 0.16);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact.ai-action-card--active,
.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact.ai-action-card--active:hover {
    border-color: rgba(99, 102, 241, 0.72);
    background: rgba(99, 102, 241, 0.24);
    color: #dbe4ff;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.22), 0 8px 22px rgba(99, 102, 241, 0.14);
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-icon.ai-action-icon--compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 14px;
    margin: 0;
    font-size: 0.94rem;
    line-height: 1;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-name.ai-action-name--compact {
    display: inline;
    overflow: hidden;
    max-width: 142px;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-dy99gnw33e] .ai-free-input {
    margin-top: 2px;
}

[b-dy99gnw33e] .ai-free-textarea {
    min-height: 64px;
    height: 68px;
    max-height: 74px;
    resize: vertical;
    padding: 8px 10px;
    margin-bottom: 9px;
    border-color: rgba(160, 178, 210, 0.12);
    border-radius: 10px;
    background: rgba(16, 24, 43, 0.46);
    color: rgba(245, 248, 255, 0.92);
    font-size: 0.8rem;
    line-height: 1.32;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

[b-dy99gnw33e] .ai-free-textarea:focus {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(18, 27, 49, 0.58);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[b-dy99gnw33e] .ai-submit-row,
[b-dy99gnw33e] .ai-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

[b-dy99gnw33e] .ai-submit-row {
    padding-top: 0;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 8px;
    font-size: 0;
    font-weight: 750;
}

[b-dy99gnw33e] .ai-preview-actions .btn {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 750;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 1;
}

.dev-ai-overlay-body[b-dy99gnw33e]  .ai-submit-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0;
}

[b-dy99gnw33e] .btn-ghost,
[b-dy99gnw33e] .btn-sm {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.72rem;
}

[b-dy99gnw33e] .ai-loading-panel,
[b-dy99gnw33e] .ai-error-message {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
}

[b-dy99gnw33e] .ai-preview-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
}

[b-dy99gnw33e] .ai-preview-header {
    padding: 8px 11px;
}

[b-dy99gnw33e] .ai-preview-content {
    max-height: none;
    overflow: visible;
    padding: 8px 0;
}

[b-dy99gnw33e] .ai-preview-text {
    font-size: 0.78rem;
    line-height: 1.5;
}

[b-dy99gnw33e] .ai-preview-actions {
    padding: 8px 11px;
}

[b-dy99gnw33e] .ai-empty-hint {
    margin: 0;
    font-size: 0.74rem;
}

@media (max-width: 1180px) {
    .dev-ai-overlay[b-dy99gnw33e] {
        min-height: 276px;
    }
}

@media (max-width: 720px) {
    .dev-ai-overlay[b-dy99gnw33e] {
        min-height: 300px;
        max-height: none;
        border-radius: 12px;
    }

    .dev-ai-overlay-header[b-dy99gnw33e] {
        padding: 0 12px;
    }

    .dev-ai-overlay-body[b-dy99gnw33e] {
        overflow: visible;
        padding: 8px 11px 11px;
    }

    .dev-ai-trigger[b-dy99gnw33e] {
        right: 14px;
        bottom: 14px;
    }

    .dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-card.ai-action-card--compact {
        max-width: 100%;
    }

    .dev-ai-overlay-body[b-dy99gnw33e]  .ai-action-name.ai-action-name--compact {
        max-width: 120px;
    }
}
/* /Components/DeveloperLibrary/DeveloperTreeNode.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERTREENODE.RAZOR.CSS

   Zweck:
   Styling für einzelne Knoten im Developer Library Verzeichnisbaum.
   Unterstützt beliebige Verschachtelungstiefe über CSS-Variable
   --developer-tree-depth und zeigt Ordner- sowie Eintrags-Zeilen.

   Funktionen:
   - Grid-Zeilen-Layout (24px Icon + 1fr Text + 30px Aktionen)
   - Dynamischer Einzug über CSS-Variable --developer-tree-depth
   - Hover- und Auswahl-Zustände
   - Expand/Collapse-Icon-Animation

   Eigenschaften:
   - Dynamischer Einzug: calc(var(--developer-tree-depth) * 17px)

   Verwendung:
   - DeveloperTreeNode.razor
   ============================================================================ */

.developer-tree-node[b-ky2cx29mfq] {
    min-width: 0;
}

.developer-tree-row[b-ky2cx29mfq] {
    --developer-tree-indent: calc(var(--developer-tree-depth) * 17px);
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    align-items: center;
    min-height: 38px;
    padding-left: var(--developer-tree-indent);
    padding-right: 4px;
    border-radius: 8px;
    color: rgba(232, 240, 255, 0.74);
}

.developer-tree-row:hover[b-ky2cx29mfq] {
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.92);
}

.developer-tree-row--selected[b-ky2cx29mfq] {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.developer-tree-toggle[b-ky2cx29mfq],
.developer-tree-select[b-ky2cx29mfq] {
    border: 0;
    background: transparent;
    color: inherit;
}

.developer-tree-toggle[b-ky2cx29mfq] {
    display: grid;
    width: 24px;
    height: 34px;
    place-items: center;
    padding: 0;
    cursor: pointer;
}

.developer-tree-toggle:disabled[b-ky2cx29mfq] {
    cursor: default;
    opacity: 0.18;
}

.developer-tree-chevron[b-ky2cx29mfq] {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.15s ease;
}

.developer-tree-chevron--open[b-ky2cx29mfq] {
    transform: rotate(90deg);
}

.developer-tree-select[b-ky2cx29mfq] {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 8px 0 0;
    cursor: pointer;
    text-align: left;
}

.developer-tree-icon[b-ky2cx29mfq] {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(152, 225, 255, 0.82);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.developer-tree-name[b-ky2cx29mfq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    line-height: 1.2;
}

.developer-tree-menu[b-ky2cx29mfq] {
    position: relative;
    justify-self: end;
    opacity: 0;
}

.developer-tree-row:hover .developer-tree-menu[b-ky2cx29mfq],
.developer-tree-menu[open][b-ky2cx29mfq] {
    opacity: 1;
}

.developer-tree-menu > summary[b-ky2cx29mfq] {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 7px;
    color: rgba(232, 247, 255, 0.56);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.developer-tree-menu > summary[b-ky2cx29mfq]::-webkit-details-marker {
    display: none;
}

.developer-tree-menu > summary:hover[b-ky2cx29mfq],
.developer-tree-menu[open] > summary[b-ky2cx29mfq] {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.developer-tree-menu-panel[b-ky2cx29mfq] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 150px;
    padding: 5px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 9px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.developer-tree-menu-panel button[b-ky2cx29mfq] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.76);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    padding: 0 9px;
}

.developer-tree-menu-panel button:hover[b-ky2cx29mfq] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
/* /Components/DeveloperLibrary/DeveloperTreeView.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERTREEVIEW.RAZOR.CSS

   Zweck:
   Styling für den Verzeichnisbaum-Container in der Developer Library.
   Scrollbarer Bereich mit kompaktem Grid-Layout für alle Tree-Knoten.

   Funktionen:
   - Grid-Container mit align-content: start
   - Überlaufendes Y-Scroll
   - Kompakter 2px-Gap zwischen Knoten

   Verwendung:
   - DeveloperTreeView.razor

   Zugehörige Dateien:
   - DeveloperTreeNode.razor.css
   ============================================================================ */

.developer-tree-view[b-mwtcf24ogd] {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 4px;
    overflow-y: auto;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ============================================================================
   RECONNECTMODAL.RAZOR.CSS

   Zweck:
   Styling für den Blazor Reconnect-Modal-Dialog. Steuert die sichtbaren
   und versteckten Zustände des Verbindungsunterbrechungs-Dialogs und
   dessen Animationen (Spinner, Fortschrittsanzeige).

   Funktionen:
   - Zustandsbasierte Sichtbarkeit (show, failed, paused, resume-failed)
   - Reconnect-Spinner-Animation
   - Modal-Overlay und Dialog-Layout

   Verwendung:
   - ReconnectModal.razor

   Zugehörige Dateien:
   - ReconnectModal.razor.js
   ============================================================================ */

.components-reconnect-first-attempt-visible[b-hq8bqg0qga],
.components-reconnect-repeated-attempt-visible[b-hq8bqg0qga],
.components-reconnect-failed-visible[b-hq8bqg0qga],
.components-pause-visible[b-hq8bqg0qga],
.components-resume-failed-visible[b-hq8bqg0qga],
.components-rejoining-animation[b-hq8bqg0qga] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-retrying[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-failed[b-hq8bqg0qga],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-hq8bqg0qga] {
    display: block;
}


#components-reconnect-modal[b-hq8bqg0qga] {
    background-color: var(--pf-surface);
    color: var(--pf-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--pf-border);
    border-radius: 0.5rem;
    box-shadow: var(--pf-shadow-md);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-hq8bqg0qga 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-hq8bqg0qga 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-hq8bqg0qga 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-hq8bqg0qga]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-hq8bqg0qga 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-hq8bqg0qga {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-hq8bqg0qga {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-hq8bqg0qga {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-hq8bqg0qga] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-hq8bqg0qga] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-hq8bqg0qga] {
    border: 0;
    background-color: var(--pf-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-hq8bqg0qga] {
        background-color: var(--pf-primary-hover);
    }

    #components-reconnect-modal button:active[b-hq8bqg0qga] {
        background-color: var(--pf-primary);
    }

.components-rejoining-animation[b-hq8bqg0qga] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-hq8bqg0qga] {
        position: absolute;
        border: 3px solid var(--pf-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-hq8bqg0qga 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-hq8bqg0qga] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-hq8bqg0qga {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Shared/AiMarkdownRenderer.razor.rz.scp.css */
/* ============================================================================
   AIMARKDOWNRENDERER.RAZOR.CSS

   Zweck:
   Styling für gerenderte Markdown-Inhalte in KI-Antworten. Definiert
   Typografie, Abstände, Code-Block-Darstellung und Tabellen für den
   KI-Chat-Drawer und andere Markdown-Darstellungsbereiche.

   Funktionen:
   - Basis-Typografie (Überschriften, Text, Listen)
   - Inline-Code und Code-Block-Styling
   - Tabellen-Layout
   - Blockquote-Darstellung

   Eigenschaften:
   - Verwendet ::deep für Scoped-CSS in Blazor-Komponenten

   Verwendung:
   - AiMarkdownRenderer.razor
   - GlobalAiDrawer.razor (indirekt)
   ============================================================================ */

.ai-markdown-renderer[b-cr0a24vurz] {
    color: rgba(231, 238, 250, 0.88);
    line-height: 1.68;
}

.ai-markdown-renderer[b-cr0a24vurz]  h1,
.ai-markdown-renderer[b-cr0a24vurz]  h2 {
    margin: 0 0 12px;
    color: #ffffff;
    letter-spacing: 0;
}

.ai-markdown-renderer[b-cr0a24vurz]  h1 {
    font-size: 1.18rem;
}

.ai-markdown-renderer[b-cr0a24vurz]  h2 {
    font-size: 1.02rem;
    margin-top: 20px;
}

.ai-markdown-renderer[b-cr0a24vurz]  p {
    margin: 0 0 10px;
}

.ai-markdown-renderer[b-cr0a24vurz]  ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.ai-markdown-renderer[b-cr0a24vurz]  li {
    margin: 0 0 6px;
}

/* ── Code shell ── */

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-shell {
    overflow: hidden;
    margin: 14px 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 9px;
    background: #0d1117;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: #111827;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-language {
    color: rgba(205, 213, 224, 0.68);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* ── Copy button ── */

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(205, 213, 224, 0.68);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy-icon--done {
    display: none;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy-status {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    color: rgba(195, 232, 141, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: max-width 0.15s ease, opacity 0.15s ease;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy:hover,
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy--done {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy:hover {
    transform: translateY(-1px);
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy--done .developer-code-copy-icon--copy {
    display: none;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy--done .developer-code-copy-icon--done {
    display: block;
    color: #c3e88d;
}

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-copy--done .developer-code-copy-status {
    max-width: 58px;
    opacity: 1;
}

/* ── Code block (pre) ── */

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-block {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 16px 20px 18px;
    border: 0;
    border-radius: 0;
    background: #0d1117;
}

.ai-markdown-renderer[b-cr0a24vurz]  code {
    color: rgba(232, 247, 255, 0.95);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.62;
}

/* ── Inline code ── */

.ai-markdown-renderer[b-cr0a24vurz]  .developer-inline-code {
    padding: 0.12em 0.34em;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(213, 232, 255, 0.94);
    font-size: 0.88em;
}

/* ── hljs syntax colours (VS Code Dark+) ── */

.ai-markdown-renderer[b-cr0a24vurz]  .hljs {
    background: transparent;
    color: #d4d4d4 !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-keyword,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-selector-tag {
    color: #c586c0 !important;
    font-weight: 700;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-built_in,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-type,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-class .hljs-title {
    color: #4ec9b0 !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-title\.function_,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-function .hljs-title,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-title {
    color: #dcdcaa !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-string,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-regexp,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-template-string {
    color: #ce9178 !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-number,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-literal,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-symbol {
    color: #b5cea8 !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-comment {
    color: #6a9955 !important;
    font-style: italic;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-name,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-tag {
    color: #569cd6 !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-attr,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-attribute {
    color: #9cdcfe !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-variable,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-params,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-property {
    color: #9cdcfe !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-meta,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-meta .hljs-keyword {
    color: #d7ba7d !important;
}

.ai-markdown-renderer[b-cr0a24vurz]  .hljs-operator,
.ai-markdown-renderer[b-cr0a24vurz]  .hljs-punctuation {
    color: #d4d4d4 !important;
}

/* ── Bracket pair colours ── */

.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair { font-weight: 800; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-1 { color: #ffd700 !important; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-2 { color: #da70d6 !important; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-3 { color: #179fff !important; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-4 { color: #49c95b !important; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-5 { color: #ff8c42 !important; }
.ai-markdown-renderer[b-cr0a24vurz]  .developer-code-pair-6 { color: #ff6bcb !important; }
/* /Components/Shared/AiTextAssistant.razor.rz.scp.css */
/* ============================================================================
   AITEXTASSISTANT.RAZOR.CSS

   Zweck:
   Styling für den eingebetteten KI-Textassistenten-Widget, der in
   Formular-Seiten (Prompt, Script, Skill usw.) als Toggle-Bereich
   unterhalb von Textarea-Feldern erscheint.

   Funktionen:
   - Toggle-Button mit Sparkle-Icon und animiertem Expand
   - Ergebnis-Vorschau-Karte mit Aktions-Buttons (Einfügen, Kopieren)
   - Ladeindikator während KI-Verarbeitung

   Eigenschaften:
   - Verwendet --pf-surface, --pf-border, --pf-primary

   Verwendung:
   - AiTextAssistant.razor

   Zugehörige Dateien:
   - clipboard-interop.js
   ============================================================================ */

.ai-assistant[b-n9hg3v6u5o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 0 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

/* ── Sparkle Toggle Button ── */
.ai-toggle-btn[b-n9hg3v6u5o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    height: 34px;
    padding: 0 13px 0 10px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 10px;
    background: rgba(10, 22, 36, 0.55);
    color: rgba(34, 211, 238, 0.72);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ai-toggle-btn:hover[b-n9hg3v6u5o] {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.38);
    color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
}

.ai-toggle-btn--open[b-n9hg3v6u5o] {
    background: rgba(34, 211, 238, 0.10);
    border-color: rgba(34, 211, 238, 0.32);
    color: #22d3ee;
}

.ai-sparkle-icon[b-n9hg3v6u5o] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.55));
    transition: filter 150ms ease;
}

.ai-toggle-btn:hover .ai-sparkle-icon[b-n9hg3v6u5o],
.ai-toggle-btn--open .ai-sparkle-icon[b-n9hg3v6u5o] {
    filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.85));
}

.ai-toggle-label[b-n9hg3v6u5o] {
    letter-spacing: 0.04em;
}

.ai-panel[b-n9hg3v6u5o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-action-bar[b-n9hg3v6u5o] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.20) transparent;
    padding-bottom: 2px;
}

.ai-action-bar[b-n9hg3v6u5o]::-webkit-scrollbar {
    height: 3px;
}

.ai-action-bar[b-n9hg3v6u5o]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.20);
    border-radius: 999px;
}

.ai-action-pill[b-n9hg3v6u5o] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.032);
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    white-space: nowrap;
}

.ai-action-pill:hover:not(:disabled)[b-n9hg3v6u5o] {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(148, 163, 184, 0.25);
    color: #f8fafc;
}

.ai-action-pill:disabled[b-n9hg3v6u5o] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ai-free-input[b-n9hg3v6u5o] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.ai-free-label[b-n9hg3v6u5o] {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.68rem;
    font-weight: 700;
}

.ai-free-control[b-n9hg3v6u5o] {
    height: 30px;
    min-height: 30px;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(8, 13, 25, 0.42);
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--pf-text, #e5e7eb);
    font-size: 0.76rem;
}

.ai-free-control:focus[b-n9hg3v6u5o] {
    border-color: rgba(99, 102, 241, 0.42);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
}

.ai-free-submit[b-n9hg3v6u5o] {
    height: 30px;
    padding: 0 10px;
}

.ai-loading-panel[b-n9hg3v6u5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.ai-spinner[b-n9hg3v6u5o] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(148, 163, 184, 0.22);
    border-top-color: #818cf8;
    border-radius: 50%;
    flex-shrink: 0;
    animation: ai-spin-b-n9hg3v6u5o 0.7s linear infinite;
}

@keyframes ai-spin-b-n9hg3v6u5o {
    to { transform: rotate(360deg); }
}

.ai-loading-text[b-n9hg3v6u5o] {
    flex: 1;
    color: rgba(148, 163, 184, 0.82);
    font-size: 0.76rem;
}

.ai-preview-panel[b-n9hg3v6u5o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 9px;
    background: rgba(10, 16, 29, 0.46);
}

.ai-preview-header[b-n9hg3v6u5o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-preview-title[b-n9hg3v6u5o] {
    color: rgba(199, 210, 254, 0.88);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ai-preview-content[b-n9hg3v6u5o] {
    max-height: 220px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 8px;
    background: rgba(2, 6, 18, 0.32);
}

.ai-preview-text[b-n9hg3v6u5o] {
    margin: 0;
    color: rgba(226, 232, 240, 0.94);
    font-family: var(--pf-font-mono, "Cascadia Code", Consolas, monospace);
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-preview-actions[b-n9hg3v6u5o] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-error-message[b-n9hg3v6u5o] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    font-size: 0.78rem;
    line-height: 1.45;
}

.ai-error-icon[b-n9hg3v6u5o] {
    flex-shrink: 0;
    font-weight: 800;
}

.ai-empty-hint[b-n9hg3v6u5o] {
    margin: 0;
    color: rgba(148, 163, 184, 0.62);
    font-size: 0.74rem;
}

@media (max-width: 640px) {
    .ai-free-input[b-n9hg3v6u5o] {
        grid-template-columns: 1fr auto;
    }

    .ai-free-label[b-n9hg3v6u5o] {
        display: none;
    }
}
/* /Pages/Ai/KiImg.razor.rz.scp.css */
/* ============================================================================
   KIIMG.RAZOR.CSS

   Zweck:
   Seitenspezifisches Styling für die KI-IMG Seite. Enthält Header-
   Statusanzeige, Provider-Status-Chip und Tab-Container-Layout für
   die sechs KI-Bild-Workspace-Tabs.

   Funktionen:
   - Provider-Status-Chip (Online/Offline-Indikator)
   - Tab-Container-Layout
   - Header-Bereich mit Status-Informationen

   Verwendung:
   - KiImg.razor

   Zugehörige Dateien:
   - KiImgCanvasPanel.razor.css
   - KiImgGeneratePanel.razor.css
   - KiImgGalleryPanel.razor.css
   - KiImgExportPanel.razor.css
   - KiImgModelsPanel.razor.css
   ============================================================================ */

.kiimg-header-status[b-ys8jy4pb2f] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================
   PROVIDER STATUS CHIP
   ============================================================ */

.kiimg-provider-status-chip[b-ys8jy4pb2f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
}

.kiimg-chip--ok[b-ys8jy4pb2f] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #4ade80;
}

.kiimg-chip--na[b-ys8jy4pb2f] {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pf-border);
    color: var(--pf-text-muted);
}

.kiimg-chip-dot[b-ys8jy4pb2f] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kiimg-chip-dot--ok[b-ys8jy4pb2f] {
    background: var(--pf-success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: kiimg-dot-pulse-b-ys8jy4pb2f 2.5s ease-in-out infinite;
}

.kiimg-chip-dot--na[b-ys8jy4pb2f] {
    background: rgba(255,255,255,0.2);
}

@keyframes kiimg-dot-pulse-b-ys8jy4pb2f {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); }
    50%       { box-shadow: 0 0 12px rgba(34, 197, 94, 0.9); }
}

.kiimg-chip--btn[b-ys8jy4pb2f] {
    background: none;
    border-style: solid;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.18s;
}

.kiimg-chip--btn:hover[b-ys8jy4pb2f] {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.kiimg-chip--btn:focus-visible[b-ys8jy4pb2f] {
    outline: none;
    box-shadow: 0 0 0 3px var(--pf-focus-ring);
}

/* ============================================================
   TAB CONTENT
   ============================================================ */

.kiimg-tab-content[b-ys8jy4pb2f] {
    margin-top: 0;
    padding-top: 4px;
    min-height: 0;
}

/* Große Bildschirme: zentrierter Max-Container */
@media (min-width: 1800px) {
    .kiimg-tab-content[b-ys8jy4pb2f] {
        max-width: 1600px;
        margin-right: auto;
    }
}

/* Kleine Bildschirme */
@media (max-width: 640px) {
    .kiimg-header-status[b-ys8jy4pb2f] {
        display: none;
    }
}
/* /Pages/CodeBase/CodeBase.razor.rz.scp.css */
/* ============================================================================
   CODEBASE.RAZOR.CSS

   Zweck:
   Seitenspezifisches Styling für die CodeBase-Seite. Verwaltet das
   dreispaltige Layout mit Sidebar (Dateibaum), Hauptbereich (Code-
   Viewer) und optionalem Detailbereich.

   Funktionen:
   - Flex-Column-Layout für die Seite (full height)
   - Dreispaltiges Grid mit scrollbaren Bereichen
   - Code-Viewer-Styling

   Verwendung:
   - CodeBase.razor
   ============================================================================ */

.codebase-page[b-f4ikwaneva] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
    min-height: 0;
}

/* Header */

.codebase-header[b-f4ikwaneva] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 14px;
}

.codebase-header-left[b-f4ikwaneva] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.codebase-kicker[b-f4ikwaneva] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.65);
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.25);
}

.codebase-header h1[b-f4ikwaneva] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.codebase-mobile-explorer-btn[b-f4ikwaneva] {
    display: none;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.codebase-mobile-explorer-btn:hover[b-f4ikwaneva] {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

/* Tabs */

.codebase-tabs[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    margin-bottom: 12px;
    padding-bottom: 0;
}

.codebase-tab[b-f4ikwaneva] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: rgba(148, 163, 184, 0.72);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}

.codebase-tab:hover[b-f4ikwaneva] {
    color: rgba(226, 232, 240, 0.9);
}

.codebase-tab--active[b-f4ikwaneva] {
    color: rgba(199, 210, 254, 0.95);
    border-bottom-color: rgba(99, 102, 241, 0.85);
}

.codebase-tab-badge[b-f4ikwaneva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.18);
    color: rgba(165, 180, 252, 0.85);
    font-size: 0.68rem;
    font-weight: 700;
}

/* Loading */

.codebase-loading[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.88rem;
}

.codebase-loading-icon[b-f4ikwaneva] {
    animation: codebase-spin-b-f4ikwaneva 1s linear infinite;
    flex-shrink: 0;
}

@keyframes codebase-spin-b-f4ikwaneva {
    to { transform: rotate(360deg); }
}

/* Flat section (Scripts / Snippets tabs) */

.codebase-flat-section[b-f4ikwaneva] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.codebase-flat-toolbar[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.codebase-flat-search[b-f4ikwaneva] {
    flex: 1 1 220px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.9);
    font: inherit;
    font-size: 0.84rem;
    outline: none;
    transition: border-color 140ms ease, background 140ms ease;
}

.codebase-flat-search:focus[b-f4ikwaneva] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.codebase-flat-filter[b-f4ikwaneva] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
}

.codebase-flat-count[b-f4ikwaneva] {
    margin-left: auto;
    color: rgba(148, 163, 184, 0.52);
    font-size: 0.78rem;
    white-space: nowrap;
}

.codebase-flat-empty[b-f4ikwaneva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 40px;
    border: 1px dashed rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.88rem;
    text-align: center;
}

/* Card grid */

.codebase-card-grid[b-f4ikwaneva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-content: start;
}

.codebase-card[b-f4ikwaneva] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 50%),
        rgba(17, 24, 39, 0.6);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.codebase-card:hover[b-f4ikwaneva] {
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.codebase-card-header[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.codebase-card-title[b-f4ikwaneva] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
    color: rgba(226, 232, 240, 0.95);
    font-family: var(--pf-font-ui);
    line-height: 1.4;
}

.codebase-card-desc[b-f4ikwaneva] {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.7);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.codebase-card-tags[b-f4ikwaneva] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.codebase-tag[b-f4ikwaneva] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.12);
    color: rgba(165, 180, 252, 0.76);
    font-size: 0.7rem;
    font-weight: 600;
}

.codebase-card-footer[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.07);
}

.codebase-card-date[b-f4ikwaneva] {
    color: rgba(148, 163, 184, 0.44);
    font-size: 0.72rem;
}

.codebase-card-link[b-f4ikwaneva] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(99, 102, 241, 0.82);
    text-decoration: none;
    transition: color 140ms ease;
}

.codebase-card-link:hover[b-f4ikwaneva] {
    color: rgba(165, 180, 252, 0.95);
    text-decoration: none;
}

/* Type badges */

.codebase-type-badge[b-f4ikwaneva] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.codebase-type-badge--script[b-f4ikwaneva] {
    background: rgba(249, 115, 22, 0.14);
    color: rgba(253, 186, 116, 0.9);
}

.codebase-type-badge--snippet[b-f4ikwaneva] {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.9);
}

/* Language badge */

.codebase-lang-badge[b-f4ikwaneva] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.10);
    color: rgba(203, 213, 225, 0.65);
    font-size: 0.7rem;
    font-weight: 600;
}

.codebase-lang-badge--framework[b-f4ikwaneva] {
    background: rgba(125, 211, 252, 0.08);
    color: rgba(125, 211, 252, 0.65);
}

/* =========================================================
   Developer Library Shell / Panel layout
   (reused inside CodeBase — isolated copy since Blazor
    scopes .razor.css per component)
   ========================================================= */

.developer-library-shell[b-f4ikwaneva] {
    position: relative;
    display: grid;
    grid-template-columns: 320px 420px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    width: 100%;
}

.developer-library-ai-layer[b-f4ikwaneva] {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 330px;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.developer-library-panel[b-f4ikwaneva] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(160, 178, 210, 0.08);
    border-radius: 8px;
    background: rgba(9, 14, 25, 0.62);
}

.developer-library-tree-panel[b-f4ikwaneva],
.developer-library-list-panel[b-f4ikwaneva],
.developer-library-content-panel[b-f4ikwaneva] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 14px;
}

.developer-library-content-panel[b-f4ikwaneva] {
    grid-template-rows: minmax(0, 1fr);
    padding: 22px 20px;
    background: rgba(9, 14, 25, 0.42);
}

.developer-library-panel-header[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin-bottom: 10px;
    color: rgba(245, 248, 255, 0.82);
    font-size: 0.84rem;
    font-weight: 700;
}

.developer-library-panel-header small[b-f4ikwaneva] {
    color: rgba(194, 207, 232, 0.56);
    font-size: 0.72rem;
    font-weight: 600;
}

.developer-library-quick-edit[b-f4ikwaneva] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    margin-bottom: 10px;
    align-self: start;
}

.developer-library-quick-edit input[b-f4ikwaneva] {
    min-width: 0;
    flex: 1 1 auto;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(245, 248, 255, 0.94);
    font: inherit;
    font-size: 0.84rem;
    outline: none;
    padding: 0 10px;
}

.developer-library-quick-edit button[b-f4ikwaneva] {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.08);
    color: rgba(232, 247, 255, 0.92);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.developer-library-quick-edit button:hover[b-f4ikwaneva] {
    border-color: rgba(99, 102, 241, 0.42);
    background: rgba(99, 102, 241, 0.13);
}

.developer-library-panel-menu[b-f4ikwaneva] {
    position: relative;
}

.developer-library-panel-menu > summary[b-f4ikwaneva] {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 7px;
    color: rgba(232, 247, 255, 0.56);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.developer-library-panel-menu > summary[b-f4ikwaneva]::-webkit-details-marker { display: none; }

.developer-library-panel-menu > summary:hover[b-f4ikwaneva],
.developer-library-panel-menu[open] > summary[b-f4ikwaneva] {
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
}

.developer-library-panel-menu-content[b-f4ikwaneva] {
    position: absolute;
    z-index: 35;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 140px;
    padding: 5px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 9px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.developer-library-panel-menu-content button[b-f4ikwaneva] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.76);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    padding: 0 9px;
}

.developer-library-panel-menu-content button:hover[b-f4ikwaneva] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-library-mobile-backdrop[b-f4ikwaneva] {
    display: none;
}

@media (max-width: 1180px) {
    .developer-library-shell[b-f4ikwaneva] {
        grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.15fr);
        min-height: 680px;
    }

    .developer-library-ai-layer[b-f4ikwaneva] { left: 0; }

    .developer-library-tree-panel[b-f4ikwaneva] {
        position: fixed;
        z-index: 45;
        top: 76px;
        bottom: 18px;
        left: 18px;
        width: min(340px, calc(100vw - 36px));
        transform: translateX(-118%);
        transition: transform 0.18s ease;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5);
    }

    .developer-library-shell--tree-open .developer-library-tree-panel[b-f4ikwaneva] {
        transform: translateX(0);
    }

    .developer-library-shell--tree-open .developer-library-mobile-backdrop[b-f4ikwaneva] {
        position: fixed;
        z-index: 44;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.48);
    }
}

@media (max-width: 720px) {
    .developer-library-shell[b-f4ikwaneva] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .developer-library-ai-layer[b-f4ikwaneva] {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .developer-library-list-panel[b-f4ikwaneva],
    .developer-library-content-panel[b-f4ikwaneva] {
        min-height: 360px;
    }

    .developer-library-content-panel[b-f4ikwaneva] {
        padding: 16px;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 860px) {
    .codebase-mobile-explorer-btn[b-f4ikwaneva] {
        display: inline-flex;
    }

    .codebase-card-grid[b-f4ikwaneva] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .codebase-flat-toolbar[b-f4ikwaneva] {
        flex-direction: column;
        align-items: stretch;
    }

    .codebase-flat-count[b-f4ikwaneva] {
        margin-left: 0;
    }

    .codebase-tabs[b-f4ikwaneva] {
        overflow-x: auto;
    }
}
/* /Pages/Communication/Communication.razor.rz.scp.css */
/* ============================================================================
   COMMUNICATION.RAZOR.CSS

   Zweck:
   Seitenspezifisches Styling für den Communication-Workspace.
   IDE-artiges, kompaktes Layout. Kein CRUD-Backend-Look.
   Dark/Cyan-Cyberpunk-Ästhetik passend zum PromptForge-Design-System.
   ============================================================================ */

/* ── Page Shell ─────────────────────────────────────────────────────────── */

.comm-page[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.comm-header[b-zb3luv5n5m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 14px;
}

.comm-header-left[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comm-kicker[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.65);
    text-shadow: 0 0 12px rgba(103, 232, 249, 0.25);
}

.comm-header h1[b-zb3luv5n5m] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.comm-mobile-sidebar-btn[b-zb3luv5n5m] {
    display: none;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms;
}

.comm-mobile-sidebar-btn:hover[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(226, 232, 240, 1);
}

/* ── Body: Sidebar + Main ────────────────────────────────────────────────── */

.comm-body[b-zb3luv5n5m] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}

/* ── Local Sidebar ───────────────────────────────────────────────────────── */

.comm-sidebar[b-zb3luv5n5m] {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 14px 16px 0;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    margin-right: 24px;
}

.comm-sidebar-section-label[b-zb3luv5n5m] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
    padding: 0 8px 10px 8px;
}

.comm-cat-group[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comm-cat-btn[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 130ms, color 130ms;
}

.comm-cat-btn:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.08);
    color: #67e8f9;
}

.comm-cat-btn--active[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.12);
    color: #67e8f9;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.12);
    text-shadow: 0 0 14px rgba(103, 232, 249, 0.35);
}

.comm-cat-btn--active:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.16);
}

.comm-cat-icon[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.75;
}

.comm-cat-btn:hover .comm-cat-icon[b-zb3luv5n5m],
.comm-cat-btn--active .comm-cat-icon[b-zb3luv5n5m] {
    opacity: 1;
}

.comm-cat-badge[b-zb3luv5n5m] {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comm-cat-btn--active .comm-cat-badge[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.18);
    color: rgba(103, 232, 249, 0.9);
}

.comm-subcat-list[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 30px;
    margin-top: 2px;
}

.comm-subcat-btn[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(226, 232, 240, 0.65);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    transition: background 130ms, color 130ms;
}

.comm-subcat-btn:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.07);
    color: #67e8f9;
}

.comm-subcat-btn--active[b-zb3luv5n5m] {
    color: #67e8f9;
    background: rgba(103, 232, 249, 0.09);
    font-weight: 500;
}

.comm-subcat-badge[b-zb3luv5n5m] {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.7rem;
    font-weight: 500;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.comm-subcat-btn--active .comm-subcat-badge[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.15);
    color: rgba(103, 232, 249, 0.9);
}

/* ── Main Area ───────────────────────────────────────────────────────────── */

.comm-main[b-zb3luv5n5m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

/* ── Quick Translate Box ─────────────────────────────────────────────────── */

.comm-translate-box[b-zb3luv5n5m] {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(103, 232, 249, 0.12);
    border-radius: 11px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    box-shadow: 0 0 24px rgba(103, 232, 249, 0.04);
}

.comm-translate-header[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
}

.comm-translate-toggle[b-zb3luv5n5m] {
    width: 100%;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.comm-translate-toggle:hover .comm-translate-label[b-zb3luv5n5m] {
    color: rgba(103, 232, 249, 1);
}

.comm-translate-chevron[b-zb3luv5n5m] {
    color: rgba(103, 232, 249, 0.5);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.comm-translate-chevron--open[b-zb3luv5n5m] {
    transform: rotate(180deg);
}

.comm-translate-label[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.75);
    text-shadow: 0 0 10px rgba(103, 232, 249, 0.2);
}

.comm-translate-input-row[b-zb3luv5n5m] {
    display: flex;
    gap: 8px;
}

.comm-translate-input[b-zb3luv5n5m] {
    flex: 1;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: var(--pf-text);
    font: inherit;
    font-size: 0.97rem;
    padding: 10px 13px;
    resize: vertical;
    min-height: 58px;
    transition: border-color 150ms, box-shadow 150ms;
    line-height: 1.6;
}

.comm-translate-input:focus[b-zb3luv5n5m] {
    outline: none;
    border-color: rgba(103, 232, 249, 0.35);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}

.comm-translate-input[b-zb3luv5n5m]::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

.comm-translate-controls[b-zb3luv5n5m] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Custom Category Dropdown ────────────────────────────────────────────── */

.comm-custom-select[b-zb3luv5n5m] {
    position: relative;
    flex: 1;
}

.comm-custom-select-trigger[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 10px 0 12px;
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: rgba(209, 213, 219, 0.92);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms, box-shadow 150ms;
}

.comm-custom-select-trigger:hover[b-zb3luv5n5m] {
    border-color: rgba(103, 232, 249, 0.25);
}

.comm-custom-select--open .comm-custom-select-trigger[b-zb3luv5n5m] {
    border-color: rgba(103, 232, 249, 0.4);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}

.comm-custom-select-icon[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(103, 232, 249, 0.6);
}

.comm-custom-select-label[b-zb3luv5n5m] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-custom-select-chevron[b-zb3luv5n5m] {
    flex-shrink: 0;
    color: rgba(103, 232, 249, 0.55);
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-custom-select--open .comm-custom-select-chevron[b-zb3luv5n5m] {
    transform: rotate(180deg);
}

.comm-custom-select-panel[b-zb3luv5n5m] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #0d1222;
    border: 1px solid rgba(103, 232, 249, 0.15);
    border-radius: 9px;
    padding: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(103, 232, 249, 0.04);
    animation: comm-dropdown-in-b-zb3luv5n5m 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes comm-dropdown-in-b-zb3luv5n5m {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.comm-custom-select-option[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(226, 232, 240, 0.88);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    transition: background 110ms, color 110ms;
}

.comm-custom-select-option:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.07);
    color: rgba(226, 232, 240, 0.95);
}

.comm-custom-select-option--active[b-zb3luv5n5m] {
    color: rgba(103, 232, 249, 0.95);
    background: rgba(103, 232, 249, 0.09);
}

.comm-custom-select-option--active:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.13);
}

.comm-custom-select-option-icon[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(103, 232, 249, 0.5);
}

.comm-custom-select-option--active .comm-custom-select-option-icon[b-zb3luv5n5m] {
    color: rgba(103, 232, 249, 0.8);
}

.comm-custom-select-check[b-zb3luv5n5m] {
    margin-left: auto;
    flex-shrink: 0;
    color: rgba(103, 232, 249, 0.75);
}

.comm-translate-btn[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 7px;
    background: rgba(103, 232, 249, 0.14);
    color: rgba(103, 232, 249, 0.95);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms, color 150ms, box-shadow 150ms;
}

.comm-translate-btn:hover:not(:disabled)[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.22);
    box-shadow: 0 0 12px rgba(103, 232, 249, 0.15);
}

.comm-translate-btn:disabled[b-zb3luv5n5m] {
    opacity: 0.45;
    cursor: not-allowed;
}

.comm-translate-result[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.04);
    border: 1px solid rgba(103, 232, 249, 0.14);
    border-radius: 8px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comm-translate-result-label[b-zb3luv5n5m] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.7);
}

.comm-translate-result-text[b-zb3luv5n5m] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.96);
    line-height: 1.65;
    white-space: pre-wrap;
    font-weight: 400;
}

.comm-translate-result-actions[b-zb3luv5n5m] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.comm-result-btn[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(226, 232, 240, 0.82);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 130ms, color 130ms;
}

.comm-result-btn:hover[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.95);
}

.comm-result-btn--save[b-zb3luv5n5m] {
    border-color: rgba(99, 102, 241, 0.2);
    color: rgba(129, 140, 248, 0.85);
}

.comm-result-btn--save:hover[b-zb3luv5n5m] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(129, 140, 248, 1);
}

.comm-result-btn--clear[b-zb3luv5n5m] {
    border-color: rgba(239, 68, 68, 0.15);
    color: rgba(239, 68, 68, 0.7);
}

.comm-result-btn--clear:hover[b-zb3luv5n5m] {
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 68, 68, 0.9);
}

.comm-result-btn--ki[b-zb3luv5n5m] {
    border-color: rgba(103, 232, 249, 0.2);
    color: rgba(103, 232, 249, 0.8);
}

.comm-result-btn--ki:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.08);
    color: rgba(103, 232, 249, 1);
    border-color: rgba(103, 232, 249, 0.4);
}

.comm-translate-error[b-zb3luv5n5m] {
    font-size: 0.8rem;
    color: rgba(239, 68, 68, 0.85);
    padding: 6px 0 0;
}

/* ── Add Form ─────────────────────────────────────────────────────────────── */

.comm-add-form[b-zb3luv5n5m] {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.comm-add-form-row[b-zb3luv5n5m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.comm-add-input[b-zb3luv5n5m] {
    width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: var(--pf-text);
    font: inherit;
    font-size: 0.97rem;
    padding: 10px 13px;
    resize: vertical;
    min-height: 58px;
    transition: border-color 150ms;
    box-sizing: border-box;
    line-height: 1.6;
}

.comm-add-input:focus[b-zb3luv5n5m] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);
}

.comm-add-input[b-zb3luv5n5m]::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

.comm-add-form-actions[b-zb3luv5n5m] {
    display: flex;
    gap: 8px;
}

.comm-checkbox-label[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.75);
    cursor: pointer;
}

.comm-form-error[b-zb3luv5n5m] {
    font-size: 0.78rem;
    color: rgba(239, 68, 68, 0.85);
}

/* E-Mail Add Form */
.comm-add-form--email[b-zb3luv5n5m] {
    gap: 14px;
}

.comm-add-email-top-row[b-zb3luv5n5m] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.comm-add-email-top-row .comm-add-email-field[b-zb3luv5n5m] {
    flex: 1;
    min-width: 0;
}

.comm-add-email-field[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comm-add-deonly-toggle[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 150ms, background 150ms;
    margin-bottom: 1px;
}

.comm-add-deonly-toggle:hover[b-zb3luv5n5m] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.06);
}

.comm-add-deonly-toggle input[type="checkbox"][b-zb3luv5n5m] {
    accent-color: #6366f1;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.comm-add-deonly-toggle span[b-zb3luv5n5m] {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.8);
    user-select: none;
}

.comm-add-deonly-toggle:has(input:checked)[b-zb3luv5n5m] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.1);
}

.comm-add-deonly-toggle:has(input:checked) span[b-zb3luv5n5m] {
    color: rgba(165, 180, 252, 0.95);
}

.comm-add-label[b-zb3luv5n5m] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.65);
}

.comm-add-input-line[b-zb3luv5n5m] {
    width: 100%;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: var(--pf-text);
    font: inherit;
    font-size: 0.97rem;
    padding: 9px 13px;
    transition: border-color 150ms;
    box-sizing: border-box;
}

.comm-add-input-line:focus[b-zb3luv5n5m] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);
}

.comm-add-email-body-row[b-zb3luv5n5m] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: start;
}

/* When only DE column is present (Nur Deutsch mode) */
.comm-add-email-body-row:has(> .comm-add-email-col:only-child)[b-zb3luv5n5m] {
    grid-template-columns: 1fr;
}

.comm-add-email-col[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comm-add-input--tall[b-zb3luv5n5m] {
    min-height: 130px;
    resize: vertical;
}

.comm-add-email-translate-col[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    padding-top: 22px;
}

.comm-add-translate-btn[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(103, 232, 249, 0.25);
    background: rgba(103, 232, 249, 0.05);
    color: rgba(103, 232, 249, 0.8);
    cursor: pointer;
    transition: all 150ms;
    flex-shrink: 0;
}

.comm-add-translate-btn:hover:not(:disabled)[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.12);
    border-color: rgba(103, 232, 249, 0.45);
    color: rgba(103, 232, 249, 1);
}

.comm-add-translate-btn:disabled[b-zb3luv5n5m] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.comm-toolbar[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.comm-search-wrap[b-zb3luv5n5m] {
    position: relative;
    flex: 1;
}

.comm-search-icon[b-zb3luv5n5m] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 0.4);
    pointer-events: none;
}

.comm-search[b-zb3luv5n5m] {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: var(--pf-text);
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
}

.comm-search:focus[b-zb3luv5n5m] {
    outline: none;
    border-color: rgba(103, 232, 249, 0.3);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.06);
}

.comm-search[b-zb3luv5n5m]::placeholder {
    color: rgba(148, 163, 184, 0.38);
}

.comm-toolbar-right[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.comm-count-badge[b-zb3luv5n5m] {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.65);
    white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.comm-btn[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 7px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 130ms, color 130ms, box-shadow 130ms;
    white-space: nowrap;
}

.comm-btn:disabled[b-zb3luv5n5m] {
    opacity: 0.45;
    cursor: not-allowed;
}

.comm-btn--primary[b-zb3luv5n5m] {
    background: rgba(99, 102, 241, 0.18);
    color: rgba(129, 140, 248, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.comm-btn--primary:hover:not(:disabled)[b-zb3luv5n5m] {
    background: rgba(99, 102, 241, 0.27);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}

.comm-btn--ghost[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(148, 163, 184, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.comm-btn--ghost:hover:not(:disabled)[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.95);
}

/* ── Loading / Empty ─────────────────────────────────────────────────────── */

.comm-loading[b-zb3luv5n5m],
.comm-empty[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.97rem;
    text-align: center;
}

/* ── Table View ──────────────────────────────────────────────────────────── */

.comm-table-wrap[b-zb3luv5n5m] {
    flex: 1;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(11, 15, 25, 0.5);
}

.comm-table[b-zb3luv5n5m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.comm-th[b-zb3luv5n5m] {
    padding: 11px 16px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.025);
}

.comm-th--de[b-zb3luv5n5m]    { width: 40%; color: rgba(251, 191, 36, 0.75); }
.comm-th--en[b-zb3luv5n5m]    { width: 42%; color: rgba(34, 211, 238, 0.75); }
.comm-th--sub[b-zb3luv5n5m]   { width: 6%; }
.comm-th--actions[b-zb3luv5n5m] { width: 12%; }

.comm-row[b-zb3luv5n5m] {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    transition: background 120ms, box-shadow 120ms;
    cursor: default;
}

.comm-row:last-child[b-zb3luv5n5m] {
    border-bottom: none;
}

.comm-row:hover[b-zb3luv5n5m] {
    background: rgba(34, 211, 238, 0.06);
    box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.25);
}

.comm-row--fav[b-zb3luv5n5m] {
    background: rgba(245, 158, 11, 0.04);
}

.comm-row--fav:hover[b-zb3luv5n5m] {
    background: rgba(245, 158, 11, 0.07);
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.35);
}

.comm-row--editing[b-zb3luv5n5m] {
    background: rgba(99, 102, 241, 0.06);
    box-shadow: inset 3px 0 0 rgba(99, 102, 241, 0.4);
}

.comm-td[b-zb3luv5n5m] {
    padding: 1rem 1rem;
    vertical-align: top;
}

.comm-td-text[b-zb3luv5n5m] {
    display: block;
    line-height: 1.6;
    word-break: break-word;
}

.comm-td--de .comm-td-text[b-zb3luv5n5m] {
    color: rgba(251, 191, 36, 0.95);
    font-size: 0.97rem;
}

.comm-td--en .comm-td-text[b-zb3luv5n5m] {
    color: #22d3ee;
    font-weight: 500;
    font-size: 0.97rem;
}

.comm-sub-badge[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(148, 163, 184, 0.78);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.comm-inline-input[b-zb3luv5n5m] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    color: var(--pf-text);
    font: inherit;
    font-size: 0.97rem;
    padding: 7px 10px;
    resize: vertical;
    min-height: 52px;
    box-sizing: border-box;
    line-height: 1.6;
}

.comm-inline-input:focus[b-zb3luv5n5m] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.comm-td--actions[b-zb3luv5n5m] {
    vertical-align: middle;
}

/* ── Icon Buttons ────────────────────────────────────────────────────────── */

.comm-icon-btn[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(148, 163, 184, 0.65);
    cursor: pointer;
    transition: background 120ms, color 120ms;
    padding: 0;
    flex-shrink: 0;
}

.comm-icon-btn:hover[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(226, 232, 240, 0.9);
}

.comm-icon-btn--fav[b-zb3luv5n5m] {
    color: #f59e0b;
}

.comm-icon-btn--fav:hover[b-zb3luv5n5m] {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

.comm-icon-btn--danger:hover[b-zb3luv5n5m] {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(239, 68, 68, 0.9);
}

.comm-icon-btn--ki[b-zb3luv5n5m] {
    color: rgba(103, 232, 249, 0.7);
}

.comm-icon-btn--ki:hover[b-zb3luv5n5m] {
    background: rgba(103, 232, 249, 0.1);
    color: rgba(103, 232, 249, 1);
}

.comm-icon-btn--save[b-zb3luv5n5m] {
    color: rgba(34, 197, 94, 0.8);
}

.comm-icon-btn--save:hover[b-zb3luv5n5m] {
    background: rgba(34, 197, 94, 0.1);
    color: rgba(34, 197, 94, 1);
}

.comm-td--actions[b-zb3luv5n5m] {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: nowrap;
}

/* ── E-Mail Card View ────────────────────────────────────────────────────── */

.comm-email-list[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comm-email-card[b-zb3luv5n5m] {
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 150ms;
}

.comm-email-card:hover[b-zb3luv5n5m] {
    border-color: rgba(103, 232, 249, 0.12);
}

.comm-email-card--fav[b-zb3luv5n5m] {
    border-color: rgba(245, 158, 11, 0.14);
    background: rgba(245, 158, 11, 0.02);
}

.comm-email-card-header[b-zb3luv5n5m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.comm-email-card-meta[b-zb3luv5n5m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

.comm-email-card-subject[b-zb3luv5n5m] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.95);
    line-height: 1.4;
}

.comm-email-card-subject--placeholder[b-zb3luv5n5m] {
    color: rgba(148, 163, 184, 0.5);
    font-style: italic;
    font-weight: 400;
}

.comm-email-card-sub-badge[b-zb3luv5n5m] {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.7);
    background: rgba(103, 232, 249, 0.06);
    border: 1px solid rgba(103, 232, 249, 0.12);
    border-radius: 4px;
    padding: 2px 7px;
    width: fit-content;
}

.comm-email-card-actions[b-zb3luv5n5m] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.comm-email-card-de[b-zb3luv5n5m] {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.6);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 5px;
    margin-top: 10px;
}

.comm-email-card-divider[b-zb3luv5n5m] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 12px 0 8px;
}

.comm-email-card-en-label[b-zb3luv5n5m] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(103, 232, 249, 0.5);
    margin-bottom: 6px;
}

.comm-email-card-body[b-zb3luv5n5m] {
    font-size: 0.93rem;
    color: rgba(209, 213, 219, 0.88);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: var(--pf-font-mono);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 6px;
    padding: 12px 14px;
    border-left: 2px solid rgba(103, 232, 249, 0.22);
}

.comm-email-card-sub[b-zb3luv5n5m] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(148, 163, 184, 0.72);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.comm-spinner[b-zb3luv5n5m] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(103, 232, 249, 0.2);
    border-top-color: rgba(103, 232, 249, 0.8);
    border-radius: 50%;
    animation: comm-spin-b-zb3luv5n5m 0.65s linear infinite;
    flex-shrink: 0;
}

.comm-spinner--lg[b-zb3luv5n5m] {
    width: 22px;
    height: 22px;
}

.comm-spinner--xs[b-zb3luv5n5m] {
    width: 10px;
    height: 10px;
}

@keyframes comm-spin-b-zb3luv5n5m {
    to { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .comm-mobile-sidebar-btn[b-zb3luv5n5m] {
        display: inline-flex;
    }

    .comm-body[b-zb3luv5n5m] {
        position: relative;
    }

    .comm-sidebar[b-zb3luv5n5m] {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 50;
        width: 240px;
        min-width: 240px;
        height: 100%;
        background: #0d1222;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0 10px 10px 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
        padding: 12px;
        transform: translateX(-110%);
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .comm-sidebar--open[b-zb3luv5n5m] {
        transform: translateX(0);
    }

    .comm-add-form-row[b-zb3luv5n5m] {
        grid-template-columns: 1fr;
    }

    .comm-th--sub[b-zb3luv5n5m],
    .comm-td--sub[b-zb3luv5n5m] {
        display: none;
    }
}

@media (max-width: 600px) {
    .comm-header h1[b-zb3luv5n5m] {
        font-size: 1.25rem;
    }

    .comm-toolbar[b-zb3luv5n5m] {
        flex-wrap: wrap;
    }

    .comm-count-badge[b-zb3luv5n5m] {
        display: none;
    }
}

/* ── Sidebar Accordion Chevron (Phase 1) ─────────────────────────────────── */
.comm-cat-row[b-zb3luv5n5m] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.comm-cat-row .comm-cat-btn[b-zb3luv5n5m] {
    flex: 1;
    min-width: 0;
}

.comm-cat-chevron-btn[b-zb3luv5n5m] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: rgba(148, 163, 184, 0.45);
    border-radius: 5px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    padding: 0;
}

.comm-cat-chevron-btn:hover[b-zb3luv5n5m] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(148, 163, 184, 0.80);
}

.comm-cat-chevron[b-zb3luv5n5m] {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.comm-cat-chevron--open[b-zb3luv5n5m] {
    transform: rotate(180deg);
}

/* ── Auto-Grow Textarea Baseline (Phase 2) ───────────────────────────────── */
.comm-translate-input[b-zb3luv5n5m] {
    min-height: 80px;
    max-height: 40vh;
    resize: none;
    overflow-y: hidden;
}

.comm-add-input[b-zb3luv5n5m] {
    min-height: 90px;
    max-height: 50vh;
    resize: none;
    overflow-y: hidden;
}

.comm-add-input--tall[b-zb3luv5n5m] {
    min-height: 160px;
    max-height: 50vh;
}

.comm-inline-input[b-zb3luv5n5m] {
    min-height: 80px;
    max-height: 30vh;
    resize: none;
    overflow-y: auto;
    width: 100%;
}
/* /Pages/Communication/FavoritesPanel.razor.rz.scp.css */
/* FavoritesPanel – popup window styles */

.cp-root[b-r30ydvy2k9] {
    min-height: 100vh;
    background: #0f1117;
    color: #e2e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    padding: 0 0 80px;
    position: relative;
}

.cp-header[b-r30ydvy2k9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #161b27;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cp-badge[b-r30ydvy2k9] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(165, 180, 252, 0.8);
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    padding: 1px 7px;
}

.cp-loading[b-r30ydvy2k9] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.cp-spinner[b-r30ydvy2k9] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-top-color: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    animation: cp-spin-b-r30ydvy2k9 0.7s linear infinite;
}

@keyframes cp-spin-b-r30ydvy2k9 {
    to { transform: rotate(360deg); }
}

.cp-empty[b-r30ydvy2k9] {
    padding: 40px 16px;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.82rem;
}

.cp-list[b-r30ydvy2k9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
}

.cp-card[b-r30ydvy2k9] {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.cp-card-title[b-r30ydvy2k9] {
    padding: 7px 12px 4px;
    font-size: 0.77rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-card-row[b-r30ydvy2k9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-section[b-r30ydvy2k9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
}

.cp-section--de[b-r30ydvy2k9] {
    background: rgba(251, 191, 36, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-section--en[b-r30ydvy2k9] {
    background: rgba(34, 211, 238, 0.03);
}

.cp-lang[b-r30ydvy2k9] {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    margin-top: 1px;
}

.cp-lang--de[b-r30ydvy2k9] {
    color: rgba(251, 191, 36, 0.9);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.cp-lang--en[b-r30ydvy2k9] {
    color: rgba(34, 211, 238, 0.9);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
}

.cp-text[b-r30ydvy2k9] {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.85);
    word-break: break-word;
}

.cp-copy-btn[b-r30ydvy2k9] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(148, 163, 184, 0.4);
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.cp-copy-btn:hover[b-r30ydvy2k9] {
    color: rgba(148, 163, 184, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.cp-toast[b-r30ydvy2k9] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: rgba(34, 197, 94, 0.95);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 100;
}

/* Group label (used by PhrasesPanel) */
.cp-group[b-r30ydvy2k9] {
    margin-bottom: 4px;
}

.cp-group-label[b-r30ydvy2k9] {
    padding: 10px 16px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.5);
}
/* /Pages/Communication/PhrasesPanel.razor.rz.scp.css */
/* PhrasesPanel – popup window styles (mirrors FavoritesPanel) */

.cp-root[b-i0mtcqdj30] {
    min-height: 100vh;
    background: #0f1117;
    color: #e2e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    padding: 0 0 80px;
    position: relative;
}

.cp-header[b-i0mtcqdj30] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #161b27;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cp-badge[b-i0mtcqdj30] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(165, 180, 252, 0.8);
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    padding: 1px 7px;
}

.cp-loading[b-i0mtcqdj30] {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.cp-spinner[b-i0mtcqdj30] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-top-color: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    animation: cp-spin-b-i0mtcqdj30 0.7s linear infinite;
}

@keyframes cp-spin-b-i0mtcqdj30 {
    to { transform: rotate(360deg); }
}

.cp-empty[b-i0mtcqdj30] {
    padding: 40px 16px;
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.82rem;
}

.cp-group[b-i0mtcqdj30] {
    margin-bottom: 4px;
}

.cp-group-label[b-i0mtcqdj30] {
    padding: 10px 16px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.5);
}

.cp-list[b-i0mtcqdj30] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 12px;
}

.cp-card[b-i0mtcqdj30] {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
}

.cp-card-row[b-i0mtcqdj30] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-section[b-i0mtcqdj30] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
}

.cp-section--de[b-i0mtcqdj30] {
    background: rgba(251, 191, 36, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-section--en[b-i0mtcqdj30] {
    background: rgba(34, 211, 238, 0.03);
}

.cp-lang[b-i0mtcqdj30] {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    margin-top: 1px;
}

.cp-lang--de[b-i0mtcqdj30] {
    color: rgba(251, 191, 36, 0.9);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.cp-lang--en[b-i0mtcqdj30] {
    color: rgba(34, 211, 238, 0.9);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
}

.cp-text[b-i0mtcqdj30] {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.85);
    word-break: break-word;
}

.cp-copy-btn[b-i0mtcqdj30] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(148, 163, 184, 0.4);
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.cp-copy-btn:hover[b-i0mtcqdj30] {
    color: rgba(148, 163, 184, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.cp-toast[b-i0mtcqdj30] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: rgba(34, 197, 94, 0.95);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 100;
}
/* /Pages/DeveloperLibrary/DeveloperLibrary.razor.rz.scp.css */
/* ============================================================================
   DEVELOPERLIBRARY.RAZOR.CSS

   Zweck:
   Seitenspezifisches Styling für die Developer Library Seite. Überschreibt
   den Standard-Page-Content-Container für Vollbreitennutzung und definiert
   das dreispaltige Grid-Layout mit Verzeichnisbaum, Eintrags-Liste und
   Eintrags-Viewer/Editor.

   Funktionen:
   - Vollbreiten-Override für .page-content
   - Dreispaltiges Grid-Layout (Baum | Liste | Viewer/Editor)
   - Responsive Höhenanpassung

   Eigenschaften:
   - max-width: none (überschreibt Standard-Content-Breite)

   Verwendung:
   - DeveloperLibrary.razor

   Zugehörige Dateien:
   - DeveloperTreeView.razor.css
   - DeveloperEntryList.razor.css
   - DeveloperEntryViewer.razor.css
   - DeveloperEntryEditor.razor.css
   ============================================================================ */

.page-content:has(.developer-library-page)[b-mx4lk0vz2i] {
    width: 100%;
    max-width: none;
    padding: clamp(18px, 1.45vw, 26px);
}

.developer-library-page[b-mx4lk0vz2i] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - clamp(36px, 2.9vw, 52px));
    min-height: 620px;
    width: 100%;
}

.developer-library-header[b-mx4lk0vz2i] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.developer-library-kicker[b-mx4lk0vz2i] {
    display: block;
    margin-bottom: 5px;
    color: rgba(58, 207, 255, 0.68);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.developer-library-header h1[b-mx4lk0vz2i] {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 0;
}

.developer-library-tree-button[b-mx4lk0vz2i] {
    display: none;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(58, 207, 255, 0.24);
    border-radius: 8px;
    background: rgba(58, 207, 255, 0.08);
    color: rgba(232, 247, 255, 0.95);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
}

.developer-library-shell[b-mx4lk0vz2i] {
    position: relative;
    display: grid;
    grid-template-columns: 320px 420px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    width: 100%;
}

.developer-library-ai-layer[b-mx4lk0vz2i] {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    left: 330px;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.developer-library-panel[b-mx4lk0vz2i] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(160, 178, 210, 0.08);
    border-radius: 8px;
    background: rgba(9, 14, 25, 0.62);
    box-shadow: none;
}

.developer-library-tree-panel[b-mx4lk0vz2i],
.developer-library-list-panel[b-mx4lk0vz2i],
.developer-library-content-panel[b-mx4lk0vz2i] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 14px;
}

.developer-library-content-panel[b-mx4lk0vz2i] {
    grid-template-rows: minmax(0, 1fr);
    padding: 22px 20px;
    background: rgba(9, 14, 25, 0.42);
}

.developer-library-panel-header[b-mx4lk0vz2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin-bottom: 10px;
    color: rgba(245, 248, 255, 0.82);
    font-size: 0.84rem;
    font-weight: 700;
}

.developer-library-panel-header small[b-mx4lk0vz2i] {
    color: rgba(194, 207, 232, 0.56);
    font-size: 0.72rem;
    font-weight: 600;
}

.developer-library-quick-edit[b-mx4lk0vz2i] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    margin-bottom: 10px;
    align-self: start;
}

.developer-library-quick-edit button[b-mx4lk0vz2i] {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(58, 207, 255, 0.2);
    border-radius: 8px;
    background: rgba(58, 207, 255, 0.08);
    color: rgba(232, 247, 255, 0.92);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.developer-library-quick-edit button:hover[b-mx4lk0vz2i] {
    border-color: rgba(58, 207, 255, 0.42);
    background: rgba(58, 207, 255, 0.13);
}

.developer-library-panel-menu[b-mx4lk0vz2i] {
    position: relative;
}

.developer-library-panel-menu > summary[b-mx4lk0vz2i] {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 7px;
    color: rgba(232, 247, 255, 0.56);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.developer-library-panel-menu > summary[b-mx4lk0vz2i]::-webkit-details-marker {
    display: none;
}

.developer-library-panel-menu > summary:hover[b-mx4lk0vz2i],
.developer-library-panel-menu[open] > summary[b-mx4lk0vz2i] {
    background: rgba(255, 255, 255, 0.065);
    color: #ffffff;
}

.developer-library-panel-menu-content[b-mx4lk0vz2i] {
    position: absolute;
    z-index: 35;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 140px;
    padding: 5px;
    border: 1px solid rgba(160, 178, 210, 0.12);
    border-radius: 9px;
    background: rgba(9, 14, 25, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.developer-library-panel-menu-content button[b-mx4lk0vz2i] {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(232, 247, 255, 0.76);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    padding: 0 9px;
}

.developer-library-panel-menu-content button:hover[b-mx4lk0vz2i] {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.developer-library-quick-edit input[b-mx4lk0vz2i] {
    min-width: 0;
    flex: 1 1 auto;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(245, 248, 255, 0.94);
    font: inherit;
    font-size: 0.84rem;
    outline: none;
    padding: 0 10px;
}

.developer-library-loading[b-mx4lk0vz2i] {
    display: grid;
    min-height: 420px;
    place-items: center;
    border: 1px solid rgba(160, 178, 210, 0.14);
    border-radius: 8px;
    background: rgba(9, 15, 29, 0.72);
    color: rgba(194, 207, 232, 0.72);
}

.developer-library-mobile-backdrop[b-mx4lk0vz2i] {
    display: none;
}

@media (max-width: 1180px) {
    .developer-library-page[b-mx4lk0vz2i] {
        height: auto;
        min-height: 0;
    }

    .developer-library-tree-button[b-mx4lk0vz2i] {
        display: inline-flex;
        align-items: center;
    }

    .developer-library-shell[b-mx4lk0vz2i] {
        grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.15fr);
        min-height: 680px;
    }

    .developer-library-ai-layer[b-mx4lk0vz2i] {
        left: 0;
    }

    .developer-library-tree-panel[b-mx4lk0vz2i] {
        position: fixed;
        z-index: 45;
        top: 76px;
        bottom: 18px;
        left: 18px;
        width: min(340px, calc(100vw - 36px));
        transform: translateX(-118%);
        transition: transform 0.18s ease;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5);
    }

    .developer-library-shell--tree-open .developer-library-tree-panel[b-mx4lk0vz2i] {
        transform: translateX(0);
    }

    .developer-library-shell--tree-open .developer-library-mobile-backdrop[b-mx4lk0vz2i] {
        position: fixed;
        z-index: 44;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.48);
    }
}

@media (max-width: 720px) {
    .page-content:has(.developer-library-page)[b-mx4lk0vz2i] {
        padding: 18px;
    }

    .developer-library-page[b-mx4lk0vz2i] {
        gap: 14px;
    }

    .developer-library-header[b-mx4lk0vz2i] {
        align-items: flex-start;
    }

    .developer-library-shell[b-mx4lk0vz2i] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .developer-library-ai-layer[b-mx4lk0vz2i] {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .developer-library-list-panel[b-mx4lk0vz2i],
    .developer-library-content-panel[b-mx4lk0vz2i] {
        min-height: 360px;
    }

    .developer-library-content-panel[b-mx4lk0vz2i] {
        padding: 16px;
    }
}