Protokoll #17915

ID17915
Zeitstempel2025-12-26 19:42:14.746548
Clientroot
IP145.224.72.140
Modellclaude-sonnet-4-20250514
Statuscompleted
Tokens5,387 (Input: 2,691, Output: 2,696)
Dauer80 ms
Request-Zeit2025-12-26 19:42:14.746548
Response-Zeit2025-12-26 19:42:14.826762

Request

{
    "event": "PreToolUse",
    "tool_name": "Write",
    "tool_input": {
        "file_path": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/chat2.css",
        "content": "\/**\n * Chat Variante 2 - Ollama Desktop-Stil\n * Maximaler Content-Fokus, Settings als Panel\n *\/\n\n:root {\n    --c2-bg: #ffffff;\n    --c2-bg-elevated: #f4f4f5;\n    --c2-bg-input: #ffffff;\n    --c2-text: #18181b;\n    --c2-text-secondary: #71717a;\n    --c2-border: #e4e4e7;\n    --c2-accent: #18181b;\n    --c2-accent-subtle: #f4f4f5;\n    --c2-user-bg: #18181b;\n    --c2-user-text: #ffffff;\n    --c2-panel-bg: #fafafa;\n}\n\n[data-theme=\"dark\"] {\n    --c2-bg: #09090b;\n    --c2-bg-elevated: #18181b;\n    --c2-bg-input: #18181b;\n    --c2-text: #fafafa;\n    --c2-text-secondary: #a1a1aa;\n    --c2-border: #27272a;\n    --c2-accent: #fafafa;\n    --c2-accent-subtle: #27272a;\n    --c2-user-bg: #27272a;\n    --c2-user-text: #fafafa;\n    --c2-panel-bg: #18181b;\n}\n\n.chat2-layout {\n    min-height: 100vh;\n    background: var(--c2-bg);\n    color: var(--c2-text);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    display: flex;\n    flex-direction: column;\n}\n\n\/* Header *\/\n.c2-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--c2-border);\n    background: var(--c2-bg);\n    position: sticky;\n    top: 0;\n    z-index: 50;\n}\n\n.c2-header__left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.c2-header__title {\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.c2-header__model {\n    font-size: 13px;\n    color: var(--c2-text-secondary);\n    padding: 4px 10px;\n    background: var(--c2-accent-subtle);\n    border-radius: 6px;\n}\n\n.c2-header__right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.c2-btn {\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid var(--c2-border);\n    border-radius: 8px;\n    color: var(--c2-text);\n    font-size: 13px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: background 0.15s;\n}\n\n.c2-btn:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-btn--icon {\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    justify-content: center;\n}\n\n.c2-btn svg {\n    width: 18px;\n    height: 18px;\n}\n\n\/* Main Content *\/\n.c2-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    max-width: 900px;\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 20px;\n}\n\n\/* Messages *\/\n.c2-messages {\n    flex: 1;\n    padding: 32px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n}\n\n.c2-msg {\n    display: flex;\n    gap: 16px;\n}\n\n.c2-msg__avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 6px;\n    background: var(--c2-accent-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.c2-msg--user .c2-msg__avatar {\n    background: var(--c2-user-bg);\n    color: var(--c2-user-text);\n}\n\n.c2-msg__body {\n    flex: 1;\n    min-width: 0;\n}\n\n.c2-msg__role {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 6px;\n}\n\n.c2-msg__content {\n    line-height: 1.7;\n    font-size: 15px;\n}\n\n.c2-msg__content p {\n    margin: 0 0 12px;\n}\n\n.c2-msg__content p:last-child {\n    margin: 0;\n}\n\n.c2-msg__content ul, .c2-msg__content ol {\n    margin: 12px 0;\n    padding-left: 20px;\n}\n\n.c2-msg__content li {\n    margin: 6px 0;\n}\n\n.c2-msg__content code {\n    background: var(--c2-bg-elevated);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.9em;\n    font-family: 'SF Mono', Monaco, monospace;\n}\n\n.c2-msg__meta {\n    margin-top: 12px;\n    font-size: 12px;\n    color: var(--c2-text-secondary);\n    display: flex;\n    gap: 12px;\n}\n\n\/* Sources *\/\n.c2-sources {\n    margin-top: 16px;\n    background: var(--c2-bg-elevated);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.c2-sources__header {\n    padding: 10px 14px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.c2-sources__header:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sources__list {\n    display: none;\n    padding: 0 14px 14px;\n    gap: 8px;\n    flex-direction: column;\n}\n\n.c2-sources--open .c2-sources__list {\n    display: flex;\n}\n\n.c2-source {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--c2-border);\n    font-size: 13px;\n}\n\n.c2-source:last-child {\n    border-bottom: none;\n}\n\n\/* Input Area *\/\n.c2-input-area {\n    padding: 20px 0 32px;\n    border-top: 1px solid var(--c2-border);\n    background: var(--c2-bg);\n    position: sticky;\n    bottom: 0;\n}\n\n.c2-form {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.c2-input-wrapper {\n    display: flex;\n    gap: 12px;\n    align-items: flex-end;\n}\n\n.c2-input {\n    flex: 1;\n    padding: 14px 18px;\n    background: var(--c2-bg-input);\n    border: 1px solid var(--c2-border);\n    border-radius: 12px;\n    font-size: 15px;\n    color: var(--c2-text);\n    outline: none;\n    resize: none;\n    max-height: 150px;\n    transition: border-color 0.15s;\n}\n\n.c2-input:focus {\n    border-color: var(--c2-accent);\n}\n\n.c2-input::placeholder {\n    color: var(--c2-text-secondary);\n}\n\n.c2-send {\n    height: 48px;\n    padding: 0 20px;\n    background: var(--c2-accent);\n    color: var(--c2-bg);\n    border: none;\n    border-radius: 12px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: opacity 0.15s;\n}\n\n.c2-send:hover {\n    opacity: 0.9;\n}\n\n.c2-send:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n\/* Settings Panel *\/\n.c2-panel {\n    position: fixed;\n    top: 0;\n    right: -380px;\n    width: 380px;\n    height: 100vh;\n    background: var(--c2-panel-bg);\n    border-left: 1px solid var(--c2-border);\n    z-index: 100;\n    transition: right 0.25s ease;\n    display: flex;\n    flex-direction: column;\n}\n\n.c2-panel--open {\n    right: 0;\n}\n\n.c2-panel__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--c2-border);\n}\n\n.c2-panel__title {\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.c2-panel__close {\n    background: none;\n    border: none;\n    font-size: 20px;\n    color: var(--c2-text-secondary);\n    cursor: pointer;\n    padding: 4px;\n}\n\n.c2-panel__body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.c2-field {\n    margin-bottom: 20px;\n}\n\n.c2-field__label {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    margin-bottom: 8px;\n    color: var(--c2-text-secondary);\n}\n\n.c2-select {\n    width: 100%;\n    padding: 10px 14px;\n    background: var(--c2-bg);\n    border: 1px solid var(--c2-border);\n    border-radius: 8px;\n    color: var(--c2-text);\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.c2-select:focus {\n    outline: none;\n    border-color: var(--c2-accent);\n}\n\n.c2-checkboxes {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.c2-check {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.c2-check input {\n    width: 18px;\n    height: 18px;\n    accent-color: var(--c2-accent);\n}\n\n.c2-range {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.c2-range input[type=\"range\"] {\n    flex: 1;\n    height: 4px;\n    accent-color: var(--c2-accent);\n}\n\n.c2-range__value {\n    min-width: 32px;\n    text-align: right;\n    font-size: 14px;\n    font-weight: 500;\n}\n\n\/* Overlay *\/\n.c2-overlay {\n    display: none;\n    position: fixed;\n    inset: 0;\n    background: rgba(0,0,0,0.3);\n    z-index: 99;\n}\n\n.c2-panel--open ~ .c2-overlay {\n    display: block;\n}\n\n\/* Welcome *\/\n.c2-welcome {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 40px;\n}\n\n.c2-welcome__icon {\n    width: 64px;\n    height: 64px;\n    background: var(--c2-accent-subtle);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 28px;\n    margin-bottom: 20px;\n}\n\n.c2-welcome h2 {\n    font-size: 20px;\n    font-weight: 600;\n    margin: 0 0 8px;\n}\n\n.c2-welcome p {\n    color: var(--c2-text-secondary);\n    margin: 0;\n}\n\n\/* Loading *\/\n.c2-loading {\n    display: inline-flex;\n    gap: 4px;\n}\n\n.c2-loading span {\n    width: 6px;\n    height: 6px;\n    background: var(--c2-text-secondary);\n    border-radius: 50%;\n    animation: c2-pulse 1.4s infinite ease-in-out both;\n}\n\n.c2-loading span:nth-child(1) { animation-delay: -0.32s; }\n.c2-loading span:nth-child(2) { animation-delay: -0.16s; }\n\n@keyframes c2-pulse {\n    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n    40% { transform: scale(1); opacity: 1; }\n}\n\n\/* Sessions Dropdown *\/\n.c2-sessions {\n    position: relative;\n}\n\n.c2-sessions__dropdown {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    margin-top: 8px;\n    background: var(--c2-bg);\n    border: 1px solid var(--c2-border);\n    border-radius: 12px;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n    width: 300px;\n    max-height: 400px;\n    overflow-y: auto;\n    z-index: 60;\n}\n\n.c2-sessions--open .c2-sessions__dropdown {\n    display: block;\n}\n\n.c2-sessions__item {\n    display: block;\n    padding: 12px 16px;\n    color: var(--c2-text);\n    text-decoration: none;\n    border-bottom: 1px solid var(--c2-border);\n}\n\n.c2-sessions__item:last-child {\n    border-bottom: none;\n}\n\n.c2-sessions__item:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sessions__item--active {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sessions__title {\n    font-weight: 500;\n    font-size: 14px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.c2-sessions__meta {\n    font-size: 12px;\n    color: var(--c2-text-secondary);\n    margin-top: 2px;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n    .c2-header {\n        padding: 12px 16px;\n    }\n\n    .c2-content {\n        padding: 0 16px;\n    }\n\n    .c2-panel {\n        width: 100%;\n        right: -100%;\n    }\n\n    .c2-msg {\n        gap: 12px;\n    }\n\n    .c2-msg__av... [TRUNCATED-54c495481073012b]"
    }
}

Response

{
    "tool_response": {
        "type": "create",
        "filePath": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/chat2.css",
        "content": "\/**\n * Chat Variante 2 - Ollama Desktop-Stil\n * Maximaler Content-Fokus, Settings als Panel\n *\/\n\n:root {\n    --c2-bg: #ffffff;\n    --c2-bg-elevated: #f4f4f5;\n    --c2-bg-input: #ffffff;\n    --c2-text: #18181b;\n    --c2-text-secondary: #71717a;\n    --c2-border: #e4e4e7;\n    --c2-accent: #18181b;\n    --c2-accent-subtle: #f4f4f5;\n    --c2-user-bg: #18181b;\n    --c2-user-text: #ffffff;\n    --c2-panel-bg: #fafafa;\n}\n\n[data-theme=\"dark\"] {\n    --c2-bg: #09090b;\n    --c2-bg-elevated: #18181b;\n    --c2-bg-input: #18181b;\n    --c2-text: #fafafa;\n    --c2-text-secondary: #a1a1aa;\n    --c2-border: #27272a;\n    --c2-accent: #fafafa;\n    --c2-accent-subtle: #27272a;\n    --c2-user-bg: #27272a;\n    --c2-user-text: #fafafa;\n    --c2-panel-bg: #18181b;\n}\n\n.chat2-layout {\n    min-height: 100vh;\n    background: var(--c2-bg);\n    color: var(--c2-text);\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    display: flex;\n    flex-direction: column;\n}\n\n\/* Header *\/\n.c2-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--c2-border);\n    background: var(--c2-bg);\n    position: sticky;\n    top: 0;\n    z-index: 50;\n}\n\n.c2-header__left {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.c2-header__title {\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.c2-header__model {\n    font-size: 13px;\n    color: var(--c2-text-secondary);\n    padding: 4px 10px;\n    background: var(--c2-accent-subtle);\n    border-radius: 6px;\n}\n\n.c2-header__right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.c2-btn {\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px solid var(--c2-border);\n    border-radius: 8px;\n    color: var(--c2-text);\n    font-size: 13px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: background 0.15s;\n}\n\n.c2-btn:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-btn--icon {\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    justify-content: center;\n}\n\n.c2-btn svg {\n    width: 18px;\n    height: 18px;\n}\n\n\/* Main Content *\/\n.c2-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    max-width: 900px;\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 20px;\n}\n\n\/* Messages *\/\n.c2-messages {\n    flex: 1;\n    padding: 32px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n}\n\n.c2-msg {\n    display: flex;\n    gap: 16px;\n}\n\n.c2-msg__avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 6px;\n    background: var(--c2-accent-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.c2-msg--user .c2-msg__avatar {\n    background: var(--c2-user-bg);\n    color: var(--c2-user-text);\n}\n\n.c2-msg__body {\n    flex: 1;\n    min-width: 0;\n}\n\n.c2-msg__role {\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 6px;\n}\n\n.c2-msg__content {\n    line-height: 1.7;\n    font-size: 15px;\n}\n\n.c2-msg__content p {\n    margin: 0 0 12px;\n}\n\n.c2-msg__content p:last-child {\n    margin: 0;\n}\n\n.c2-msg__content ul, .c2-msg__content ol {\n    margin: 12px 0;\n    padding-left: 20px;\n}\n\n.c2-msg__content li {\n    margin: 6px 0;\n}\n\n.c2-msg__content code {\n    background: var(--c2-bg-elevated);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.9em;\n    font-family: 'SF Mono', Monaco, monospace;\n}\n\n.c2-msg__meta {\n    margin-top: 12px;\n    font-size: 12px;\n    color: var(--c2-text-secondary);\n    display: flex;\n    gap: 12px;\n}\n\n\/* Sources *\/\n.c2-sources {\n    margin-top: 16px;\n    background: var(--c2-bg-elevated);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.c2-sources__header {\n    padding: 10px 14px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.c2-sources__header:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sources__list {\n    display: none;\n    padding: 0 14px 14px;\n    gap: 8px;\n    flex-direction: column;\n}\n\n.c2-sources--open .c2-sources__list {\n    display: flex;\n}\n\n.c2-source {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--c2-border);\n    font-size: 13px;\n}\n\n.c2-source:last-child {\n    border-bottom: none;\n}\n\n\/* Input Area *\/\n.c2-input-area {\n    padding: 20px 0 32px;\n    border-top: 1px solid var(--c2-border);\n    background: var(--c2-bg);\n    position: sticky;\n    bottom: 0;\n}\n\n.c2-form {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.c2-input-wrapper {\n    display: flex;\n    gap: 12px;\n    align-items: flex-end;\n}\n\n.c2-input {\n    flex: 1;\n    padding: 14px 18px;\n    background: var(--c2-bg-input);\n    border: 1px solid var(--c2-border);\n    border-radius: 12px;\n    font-size: 15px;\n    color: var(--c2-text);\n    outline: none;\n    resize: none;\n    max-height: 150px;\n    transition: border-color 0.15s;\n}\n\n.c2-input:focus {\n    border-color: var(--c2-accent);\n}\n\n.c2-input::placeholder {\n    color: var(--c2-text-secondary);\n}\n\n.c2-send {\n    height: 48px;\n    padding: 0 20px;\n    background: var(--c2-accent);\n    color: var(--c2-bg);\n    border: none;\n    border-radius: 12px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: opacity 0.15s;\n}\n\n.c2-send:hover {\n    opacity: 0.9;\n}\n\n.c2-send:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n\/* Settings Panel *\/\n.c2-panel {\n    position: fixed;\n    top: 0;\n    right: -380px;\n    width: 380px;\n    height: 100vh;\n    background: var(--c2-panel-bg);\n    border-left: 1px solid var(--c2-border);\n    z-index: 100;\n    transition: right 0.25s ease;\n    display: flex;\n    flex-direction: column;\n}\n\n.c2-panel--open {\n    right: 0;\n}\n\n.c2-panel__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--c2-border);\n}\n\n.c2-panel__title {\n    font-size: 15px;\n    font-weight: 600;\n}\n\n.c2-panel__close {\n    background: none;\n    border: none;\n    font-size: 20px;\n    color: var(--c2-text-secondary);\n    cursor: pointer;\n    padding: 4px;\n}\n\n.c2-panel__body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.c2-field {\n    margin-bottom: 20px;\n}\n\n.c2-field__label {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    margin-bottom: 8px;\n    color: var(--c2-text-secondary);\n}\n\n.c2-select {\n    width: 100%;\n    padding: 10px 14px;\n    background: var(--c2-bg);\n    border: 1px solid var(--c2-border);\n    border-radius: 8px;\n    color: var(--c2-text);\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.c2-select:focus {\n    outline: none;\n    border-color: var(--c2-accent);\n}\n\n.c2-checkboxes {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.c2-check {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.c2-check input {\n    width: 18px;\n    height: 18px;\n    accent-color: var(--c2-accent);\n}\n\n.c2-range {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.c2-range input[type=\"range\"] {\n    flex: 1;\n    height: 4px;\n    accent-color: var(--c2-accent);\n}\n\n.c2-range__value {\n    min-width: 32px;\n    text-align: right;\n    font-size: 14px;\n    font-weight: 500;\n}\n\n\/* Overlay *\/\n.c2-overlay {\n    display: none;\n    position: fixed;\n    inset: 0;\n    background: rgba(0,0,0,0.3);\n    z-index: 99;\n}\n\n.c2-panel--open ~ .c2-overlay {\n    display: block;\n}\n\n\/* Welcome *\/\n.c2-welcome {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 40px;\n}\n\n.c2-welcome__icon {\n    width: 64px;\n    height: 64px;\n    background: var(--c2-accent-subtle);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 28px;\n    margin-bottom: 20px;\n}\n\n.c2-welcome h2 {\n    font-size: 20px;\n    font-weight: 600;\n    margin: 0 0 8px;\n}\n\n.c2-welcome p {\n    color: var(--c2-text-secondary);\n    margin: 0;\n}\n\n\/* Loading *\/\n.c2-loading {\n    display: inline-flex;\n    gap: 4px;\n}\n\n.c2-loading span {\n    width: 6px;\n    height: 6px;\n    background: var(--c2-text-secondary);\n    border-radius: 50%;\n    animation: c2-pulse 1.4s infinite ease-in-out both;\n}\n\n.c2-loading span:nth-child(1) { animation-delay: -0.32s; }\n.c2-loading span:nth-child(2) { animation-delay: -0.16s; }\n\n@keyframes c2-pulse {\n    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n    40% { transform: scale(1); opacity: 1; }\n}\n\n\/* Sessions Dropdown *\/\n.c2-sessions {\n    position: relative;\n}\n\n.c2-sessions__dropdown {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    margin-top: 8px;\n    background: var(--c2-bg);\n    border: 1px solid var(--c2-border);\n    border-radius: 12px;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n    width: 300px;\n    max-height: 400px;\n    overflow-y: auto;\n    z-index: 60;\n}\n\n.c2-sessions--open .c2-sessions__dropdown {\n    display: block;\n}\n\n.c2-sessions__item {\n    display: block;\n    padding: 12px 16px;\n    color: var(--c2-text);\n    text-decoration: none;\n    border-bottom: 1px solid var(--c2-border);\n}\n\n.c2-sessions__item:last-child {\n    border-bottom: none;\n}\n\n.c2-sessions__item:hover {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sessions__item--active {\n    background: var(--c2-accent-subtle);\n}\n\n.c2-sessions__title {\n    font-weight: 500;\n    font-size: 14px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.c2-sessions__meta {\n    font-size: 12px;\n    color: var(--c2-text-secondary);\n    margin-top: 2px;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n    .c2-header {\n        padding: 12px 16px;\n    }\n\n    .c2-content {\n        padding: 0 16px;\n    }\n\n    .c2-panel {\n        width: 100%;\n        right: -100%;\n    }\n\n    .c2-msg {\n        gap: 12px;\n    }\n\n    .c2-msg__av... [TRUNCATED-54c495481073012b]",
        "structuredPatch": [],
        "originalFile": null
    }
}
← Vorheriger Zur Liste Nächster →