* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: var(--font); background: var(--bg); color: var(--text);
overflow: hidden; display: flex;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.layout { display: flex; width: 100%; height: 100%; }
.sidebar {
width: 252px; min-width: 252px; height: 100%; background: var(--surface);
border-right: 1px solid var(--border-ghost); display: flex; flex-direction: column;
flex-shrink: 0; transition: width 0.2s, min-width 0.2s; overflow: hidden;
box-shadow: 10px 0 30px rgba(0,0,0,0.5);
}
.sidebar.collapsed { width: 56px; min-width: 56px; }
.sidebar-header { padding: 1.25rem; border-bottom: 1px solid var(--border-ghost); display: flex; align-items: flex-start; gap: 0.75rem; white-space: normal; overflow: hidden; transition: padding 0.2s, justify-content 0.2s; }
.sidebar.collapsed .sidebar-header { padding: 0; justify-content: center; align-items: center; gap: 0; height: 56px; min-height: 56px; max-height: 56px; overflow: hidden; }
.sidebar-brand { display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: width 0.2s, opacity 0.2s; }
.sidebar.collapsed .sidebar-brand { opacity: 0; width: 0; overflow: hidden; margin: 0; padding: 0; }
.sidebar-title { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.sidebar-subtitle { font-family: var(--font-headline); font-size: 0.625rem; line-height: 1.25; color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; opacity: 0.6; }
.robot-icon { flex-shrink: 0; margin-top: 2px; transition: width 0.2s, height 0.2s; }
.sidebar.collapsed .robot-icon { width: 20px; height: 20px; }
.agent-badge { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; padding: 0.375rem 0.75rem; max-width: 100%; background: var(--accent-dim); border-radius: var(--radius-sm); font-family: var(--font-headline); font-size: 0.625rem; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s, max-height 0.2s, margin 0.2s, padding 0.2s; max-height: 40px; }
.sidebar.collapsed .agent-badge { opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: statusPulse 2s ease-in-out infinite; }
.status-dot.warning { background: var(--warning); animation: none; }
.status-dot.error { background: var(--error); animation: none; }
@keyframes statusPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(125,233,255,0.4); } 50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(125,233,255,0.3); } }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; color: rgba(222, 229, 255, 0.4); text-decoration: none; font-family: var(--font-headline); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.2s, background 0.2s; cursor: pointer; white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .sidebar-nav a { justify-content: center; padding: 0.5rem 0; }
.sidebar-nav a .nav-label { transition: opacity 0.15s, max-width 0.2s; max-width: 200px; opacity: 1; overflow: hidden; }
.sidebar.collapsed .sidebar-nav a .nav-label { opacity: 0; max-width: 0; margin: 0; padding: 0; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
.ui-icon { width: 14px; height: 14px; flex-shrink: 0; color: currentColor; display: inline-block; }
.sidebar-nav a:hover { color: rgba(222, 229, 255, 0.8); background: var(--surface-4); }
.sidebar-nav a.active { color: var(--accent); background: var(--surface-4); border-left: 2px solid var(--accent); box-shadow: 0 0 15px rgba(193, 128, 255, 0.1); }
.sidebar-nav a:focus-visible,
.mobile-nav a:focus-visible,
.btn:focus-visible,
.tabs button:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.sidebar-collapse-btn {
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.625rem 1.25rem; border: none; background: none; color: var(--muted);
font-size: 0.75rem; font-family: var(--font); cursor: pointer;
transition: color 0.15s, background 0.15s; border-top: 1px solid var(--border-ghost);
white-space: nowrap; overflow: hidden;
}
.sidebar-collapse-btn:hover { color: var(--text); background: var(--surface-3); }
.sidebar-collapse-btn .collapse-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-icon { transform: rotate(180deg); }
.sidebar-collapse-btn .collapse-label { transition: opacity 0.15s, max-width 0.2s; max-width: 100px; opacity: 1; overflow: hidden; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-label { opacity: 0; max-width: 0; margin: 0; padding: 0; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border-ghost); font-family: var(--font-headline); font-size: 0.625rem; color: var(--outline); letter-spacing: 0.1em; white-space: normal; overflow: visible; transition: padding 0.2s, text-align 0.2s; }
.sidebar.collapsed .sidebar-footer { text-align: center; padding: 0.5rem 0.25rem; font-size: 0.625rem; }
.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
.header-bar { height: 56px; padding: 0 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border-ghost); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; backdrop-filter: blur(8px); position: relative; z-index: 100; }
.breadcrumb { font-family: var(--font-headline); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; }
.connection-status { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-headline); font-size: 0.625rem; color: var(--outline); letter-spacing: 0.1em; text-transform: uppercase; }
.connection-status .ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tertiary); flex-shrink: 0; box-shadow: 0 0 8px rgba(125,233,255,0.5); animation: statusPulse 2s ease-in-out infinite; }
.connection-status .ws-dot.off { background: var(--error); box-shadow: 0 0 8px rgba(253,111,133,0.5); animation: none; }
.content { flex: 1; overflow: auto; padding: 1.5rem; }