/**
* Context Sidebar Styles
* Responsive design with AI-enhanced styling
*/
.context-sidebar {
width: 320px;
height: 100vh;
background: var(--cds-layer-01);
border-right: 1px solid var(--cds-border-subtle-01);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 150ms ease;
&.collapsed {
width: 0;
border-right: none;
}
.sidebar-header {
padding: var(--cds-spacing-04);
border-bottom: 1px solid var(--cds-border-subtle-01);
background: var(--cds-layer-02);
.header-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--cds-spacing-03);
.sidebar-title {
margin: 0;
font-size: var(--cds-productive-heading-02-font-size);
font-weight: var(--cds-productive-heading-02-font-weight);
color: var(--cds-text-primary);
}
.header-buttons {
display: flex;
gap: var(--cds-spacing-02);
}
}
.search-section {
margin-top: var(--cds-spacing-03);
}
}
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 0;
.section {
padding: var(--cds-spacing-04);
border-bottom: 1px solid var(--cds-border-subtle-01);
&:last-child {
border-bottom: none;
}
.section-title {
margin: 0 0 var(--cds-spacing-03) 0;
font-size: var(--cds-productive-heading-01-font-size);
font-weight: var(--cds-productive-heading-01-font-weight);
color: var(--cds-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
}
// Session List Styles
.session-list {
display: flex;
flex-direction: column;
gap: var(--cds-spacing-02);
.session-item {
padding: var(--cds-spacing-03);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 110ms ease;
&:hover {
background: var(--cds-layer-hover-01);
}
.session-info {
flex: 1;
.session-title {
font-size: var(--cds-body-compact-01-font-size);
font-weight: 600;
color: var(--cds-text-primary);
margin-bottom: var(--cds-spacing-01);
}
.session-meta {
display: flex;
align-items: center;
gap: var(--cds-spacing-02);
font-size: var(--cds-helper-text-01-font-size);
color: var(--cds-text-secondary);
svg {
flex-shrink: 0;
}
}
}
}
}
// Context List Styles
.context-list {
display: flex;
flex-direction: column;
gap: var(--cds-spacing-03);
.context-item {
padding: var(--cds-spacing-04);
border: 1px solid var(--cds-border-subtle-01);
border-radius: 4px;
transition: all 150ms ease;
position: relative;
&:hover {
background: var(--cds-layer-hover-01);
border-color: var(--cds-border-strong-01);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
&.ai-enhanced {
background: var(--ai-background);
border: 1px solid transparent;
background-clip: padding-box;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--ai-border);
border-radius: 4px;
z-index: -1;
margin: -1px;
}
}
.context-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--cds-spacing-03);
.context-title {
font-size: var(--cds-body-compact-01-font-size);
font-weight: 600;
color: var(--cds-text-primary);
line-height: 1.4;
margin-right: var(--cds-spacing-02);
word-break: break-word;
}
}
.context-meta {
display: flex;
align-items: center;
gap: var(--cds-spacing-02);
margin-bottom: var(--cds-spacing-03);
flex-wrap: wrap;
.token-count {
font-size: var(--cds-helper-text-01-font-size);
color: var(--cds-text-secondary);
}
.updated-time {
font-size: var(--cds-helper-text-01-font-size);
color: var(--cds-text-secondary);
}
}
.context-tags {
display: flex;
gap: var(--cds-spacing-02);
margin-bottom: var(--cds-spacing-03);
flex-wrap: wrap;
.more-tags {
font-size: var(--cds-helper-text-01-font-size);
color: var(--cds-text-secondary);
align-self: center;
}
}
.resume-button {
width: 100%;
margin-top: var(--cds-spacing-02);
}
}
}
// Empty State
.empty-state {
text-align: center;
padding: var(--cds-spacing-07) var(--cds-spacing-04);
color: var(--cds-text-secondary);
svg {
margin-bottom: var(--cds-spacing-04);
opacity: 0.5;
}
p {
margin-bottom: var(--cds-spacing-04);
font-size: var(--cds-body-compact-01-font-size);
}
}
// Loading State
.loading-container {
display: flex;
justify-content: center;
align-items: center;
padding: var(--cds-spacing-05);
}
}
// Collapsed Sidebar
.context-sidebar-collapsed {
width: 48px;
height: 100vh;
background: var(--cds-layer-01);
border-right: 1px solid var(--cds-border-subtle-01);
display: flex;
flex-direction: column;
align-items: center;
padding-top: var(--cds-spacing-04);
.sidebar-toggle {
transform: rotate(0deg);
transition: transform 150ms ease;
&:hover {
transform: rotate(0deg) scale(1.1);
}
}
}
// Responsive Design
@media (max-width: 768px) {
.context-sidebar {
width: 280px;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
&.collapsed {
transform: translateX(-100%);
width: 280px;
}
}
.context-sidebar-collapsed {
width: 40px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
}
@media (max-width: 480px) {
.context-sidebar {
width: 100vw;
.context-item {
.context-tags {
.cds--tag {
font-size: 0.75rem;
}
}
}
}
}
// Dark Theme Support
[data-carbon-theme="g100"] {
.context-sidebar {
.context-item {
&:hover {
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
}
}
}
// Animation for sidebar toggle
.sidebar-enter {
width: 0;
opacity: 0;
}
.sidebar-enter-active {
width: 320px;
opacity: 1;
transition: width 150ms ease, opacity 150ms ease;
}
.sidebar-exit {
width: 320px;
opacity: 1;
}
.sidebar-exit-active {
width: 0;
opacity: 0;
transition: width 150ms ease, opacity 150ms ease;
}
// AI Enhancement Indicators
.ai-context-indicator {
position: absolute;
top: var(--cds-spacing-02);
right: var(--cds-spacing-02);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ai-primary-start);
box-shadow: var(--ai-glow);
animation: pulse-ai 2s infinite;
}
@keyframes pulse-ai {
0% {
box-shadow: 0 0 0 0 rgba(15, 98, 254, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(15, 98, 254, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(15, 98, 254, 0);
}
}
