.camilla-flow {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

    .camilla-flow pre {
        margin: 0;
        width: max-content;
        min-width: 100%;
        font-family: Consolas, "Cascadia Code", monospace;
        font-size: 14px;
        line-height: 1.45;
        white-space: pre;
        color: #c9d1d9;
    }

    .title {
        color: Magenta
    }

    .camilla-flow {
        color: #ffffff;
        font-weight: bold;
    }

    .camilla-flow .line {
        color: #6e7681;
    }

    .camilla-flow .arrow {
        color: #ffffff;
    }

    .camilla-flow .component {
        color: #58a6ff;
    }

    .camilla-flow .input {
        color: #79c0ff;
    }

    .camilla-flow .command {
        color: #d2a8ff;
    }

    .camilla-flow .process {
        color: #a5d6ff;
    }

    .camilla-flow .knowledge {
        color: #7ee787;
    }

    .camilla-flow .memory {
        color: #56d4dd;
    }

    .camilla-flow .web {
        color: #e3b341;
    }

    .camilla-flow .special {
        color: #d2a8ff;
    }

    .camilla-flow .autonomous {
        color: #f0883e;
    }

    .camilla-flow .output {
        color: #7ee787;
    }

    .camilla-flow .control {
        color: #ffffff;
    }

    .camilla-flow .openai {
        color: #ff0000;
    }

    .camilla-flow .claude {
        color: #ffff00;
    }

    .camilla-flow .gemini {
        color: #8ab4f8;
    }

    .camilla-flow .grok {
        color: #00ff00;
    }

    .camilla-flow .qwen {
        color: #00ffff;
    }

/* Tablet */
@media (max-width: 900px) {
    .camilla-flow {
        padding: 16px;
    }

        .camilla-flow pre {
            font-size: 12px;
            line-height: 1.4;
        }
}

/* Mobile */
@media (max-width: 600px) {
    .camilla-flow {
        padding: 12px;
        border-radius: 6px;
    }

        .camilla-flow pre {
            font-size: 10px;
            line-height: 1.35;
        }
}

/* Very small screens */
@media (max-width: 400px) {
    .camilla-flow pre {
        font-size: 9px;
    }
}

.scroll-hint {
    display: none;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #8b949e;
}

@media (max-width: 600px) {
    .scroll-hint {
        display: block;
    }
}