BotOverheadDebug {
    width: 180px;
    flex-direction: column;
    pointer-events: none;

    .overhead-card {
        background-color: rgba(10, 12, 16, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        padding: 6px 8px;
        flex-direction: column;

        .bot-header {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 3px;
            margin-bottom: 4px;

            .bot-name {
                font-size: 9px;
                font-weight: 800;
                color: #e2e8f0;
            }

            .bot-state {
                font-size: 8px;
                font-weight: 700;
                color: #e5a93c;
            }
        }

        .action-badges {
            flex-direction: row;
            gap: 3px;
            margin-bottom: 5px;

            .badge {
                padding: 1px 4px;
                border-radius: 2px;
                background-color: rgba(255, 255, 255, 0.08);
                font-size: 7px;
                font-weight: 800;
                color: #64748b;

                &.active {
                    background-color: #ef4444;
                    color: white;
                }

                &.active-blue {
                    background-color: #0284c7;
                    color: white;
                }

                &.active-red {
                    background-color: #b91c1c;
                    color: #fee2e2;
                }
            }
        }
    }
}