/* Global header tabs - visible on all views */
.global-header-tabs {
position: fixed;
top: 0;
left: 260px; /* sidebar width */
right: 0;
height: 60px;
background: var(--sidebar-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
padding: 0 20px;
z-index: 100;
}

/* Mobile hamburger button */
.sidebar-hamburger-btn {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
border-radius: 8px;
color: var(--text-secondary, #a0a0a0);
cursor: pointer;
flex-shrink: 0;
margin-right: 8px;
transition: background 0.2s, color 0.2s;
}
.sidebar-hamburger-btn:hover {
background: var(--hover-bg);
color: var(--text-primary);
}

@media (max-width: 768px) {
.global-header-tabs,
#skill-constructor-view {
    left: 0;
}
.sidebar-hamburger-btn {
    display: flex;
}
}

.global-header-tabs .header-tabs { 
display: flex; 
align-items: center; 
gap: 4px; 
padding: 4px; 
background: var(--bg-color); 
opacity: 0.8;
border-radius: 12px; 
}

.header-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
min-height: 44px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-secondary, #a0a0a0);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.header-tab:hover { 
color: var(--text-primary); 
background: var(--hover-bg); 
}
.header-tab.active { 
background: var(--hover-bg); 
color: var(--primary-color); 
box-shadow: var(--shadow-sm); 
}
.header-tab svg { 
width: 16px; 
height: 16px; 
}

.header-divider { 
width: 1px; 
height: 20px; 
background: var(--border-color); 
margin: 0 8px; 
}

/* Adjust main content to account for fixed header */
.main-content { 
margin-top: 60px; 
height: calc(100vh - 60px); 
}

/* Adjust other views to account for fixed header */
#dashboard-view,
#family-view,
#memory-view,
#settings-view,
#agent-settings-view,
#system-settings-view,
#admin-view,
#skill-constructor-view {
margin-top: 60px;
height: calc(100vh - 60px);
}

.chat-header { 
display: none; /* Hide old chat-header with tabs */
}

.global-header-model-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(0,0,0,0.2);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-secondary);
}

.global-header-model-badge:hover {
background: rgba(255,255,255,0.05);
}

.global-header-right-sect {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}

.header-balance-wrap {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 99px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--primary-color);
transition: all 0.2s;
}

.header-balance-wrap .material-symbols-outlined {
vertical-align: middle;
}

.beta-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: var(--accent-gradient);
color: white;
border-radius: 99px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
cursor: default;
transition: all 0.2s;
white-space: nowrap;
}
.beta-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.beta-badge .material-symbols-outlined {
font-size: 14px;
}

.model-badge { 
margin-left: auto; 
flex-shrink: 0; 
}

.settings-panel { display: none; flex-direction: column; height: 100%; width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; animation: fadeIn 0.3s ease-out; }
.settings-panel.active { display: flex; }

.settings-content { flex: 1; overflow-y: auto; padding: 24px; }
.settings-section { display: none; }
.settings-section.active { display: block; animation: slideUp 0.3s ease-out; }
.settings-section h3 { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: var(--text-primary); }

.skill-card, .tool-card, .reminder-card, .note-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; margin-bottom: 12px; transition: var(--transition); box-shadow: var(--card-shadow); }
.skill-card:hover, .tool-card:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); }

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.geo-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.geo-toggle-switch input { opacity: 0; width: 0; height: 0; }
.geo-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #3a3a3a; border-radius: 24px; transition: 0.3s; }
.geo-toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.geo-toggle-switch input:checked + .geo-toggle-slider { background: var(--primary-color, #6366f1); }
.geo-toggle-switch input:checked + .geo-toggle-slider:before { transform: translateX(20px); }

/* Settings gear dropdown */
.settings-gear-wrapper { position: relative; }
.settings-gear-btn {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border: none; border-radius: 10px;
background: rgba(255,255,255,0.05); color: var(--text-secondary, #a0a0a0);
cursor: pointer; transition: all 0.25s;
}
.settings-gear-btn:hover,
.settings-gear-btn.active {
background: rgba(255,255,255,0.1); color: var(--text-primary, #fff);
}
.settings-gear-btn:hover .material-symbols-outlined {
animation: gear-spin 0.6s ease;
}
@keyframes gear-spin { 0%{transform:rotate(0)} 100%{transform:rotate(60deg)} }
.settings-gear-btn .material-symbols-outlined { font-size: 22px; transition: transform 0.3s; }

.settings-gear-dropdown {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
min-width: 230px; background: var(--sidebar-bg, #161616);
border: 1px solid var(--border-color, #2a2a2a); border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden; z-index: 200;
animation: gear-dropdown-in 0.2s ease;
}
@keyframes gear-dropdown-in { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: translateY(0); } }
.settings-gear-dropdown.show { display: block; }

.settings-gear-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; cursor: pointer; transition: background 0.15s;
color: var(--text-secondary, #a0a0a0); font-size: 14px; font-weight: 500;
}
.settings-gear-item:hover {
background: rgba(var(--primary-rgb, 99,102,241), 0.1); color: var(--text-primary, #fff);
}
.settings-gear-item:first-child { border-bottom: 1px solid var(--border-color, #2a2a2a); }
.settings-gear-item .material-symbols-outlined { font-size: 20px; color: var(--primary-color, #6366f1); }