@import '../common/variables';

$agentSelectorSidebarWidth: 211px;

.bcs-is-wider {
    .bcs-BoxAISidebar {
        height: 100%;
        max-height: 100%;

        &.with-modal-open {
            display: none;
        }

        .bcs-content-header {
            padding: 0 var(--space-4);
        }

        .bcs-scroll-content {
            width: auto;
            height: 100%;
        }

        .bcs-BoxAISidebar-content {
            height: 100%;
        }

        .bcs-BoxAISidebar-title-part {
            display: flex;
            align-items: center;
            justify-content: left;
            width: 100%;
            margin: 0;
            padding: 0;
            font-weight: normal;
            font-size: var(--title-medium-font-size);

            .bcs-title {
                margin-right: var(--space-2);
                white-space: nowrap;
            }
        }

        // Limit the width of Agent Selector to accomodate action buttons
        .bcs-BoxAISidebar-agentSelector {
            max-width: 279px;
        }

        @include breakpoint($medium-screen) {
            .bcs-BoxAISidebar-agent-selector-container {
                max-width: none;
            }
        }

        .bcs-BoxAISidebar-chat-actions {
            display: flex;
            justify-content: right;
        }

        .sidebar-chip {
            max-width: $agentSelectorSidebarWidth;
            margin-inline-start: 0;

            button {
                width: 100%;
            }
        }

        .bcs-BoxAISidebar-expand {
            margin-left: var(--space-2);
        }
    }
}