.app-icon {
    background: var(--surface-hover, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    /* removed border */
    /* removed border bottom */
}

.workspace-bg {
    background-color: var(--bg, #fafdfa);
}

.workspace-grid {
    background-image:
        linear-gradient(to right, var(--border, #f0fdf4) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border, #f0fdf4) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Custom scrollbar for terminal */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--surface-active, #333);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover, #555);
}

/* Window Manager Core Styles (replacing missing Tailwind classes) */
.window-element {
    position: absolute;
    width: 700px;
    height: 500px;
    background-color: var(--surface, white);
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border, rgba(0,0,0,0.12));
    overflow: hidden;
    z-index: 100;
}

.window-header {
    height: 40px;
    background-color: var(--surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 2px solid var(--border, rgba(0,0,0,0.12));
    user-select: none;
    cursor: move;
    position: relative;
    z-index: 10;
}

.window-header .font-mono {
    font-family: "Fira Code", monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #16a34a); /* brand-600 */
    letter-spacing: 0.025em;
}

.window-header-controls {
    display: flex;
    gap: 12px;
    color: var(--text-muted, #9ca3af);
}

.window-header button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 14px;
}

.window-header .btn-minimize:hover,
.window-header .btn-maximize:hover {
    color: var(--text, #4b5563);
}

.window-header .btn-close:hover {
    color: var(--error, #ef4444);
}

.window-body {
    position: relative;
    flex: 1 1 0%;
    overflow-y: auto;
    background-color: var(--bg, #fafdfa);
    padding: 16px;
}

.w-\[700px\] {
    width: 700px;
}
.h-\[500px\] {
    height: 500px;
}
.bg-white {
    background-color: #fff;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.border {
    border-width: 1px;
    border-style: solid;
}
.border-gray-200 {
    border-color: #e5e7eb;
}
.overflow-hidden {
    overflow: hidden;
}
.absolute {
    position: absolute;
}

.h-10 {
    height: 2.5rem;
}
.bg-white\/95 {
    background-color: var(--surface, rgba(255, 255, 255, 0.95));
}
.backdrop-blur {
    backdrop-filter: blur(8px);
}
.items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.border-b {
    border-bottom-width: 1px;
}
.select-none {
    user-select: none;
}
.cursor-move {
    cursor: move;
}
.font-mono {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.text-brand-600 {
    color: var(--accent, #84d669);
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.text-gray-400 {
    color: var(--text-muted, #9ca3af);
}
.hover\:text-gray-600:hover {
    color: var(--text, #4b5563);
}
.hover\:text-red-500:hover {
    color: var(--error, #ef4444);
}
.relative {
    position: relative;
}
.flex-1 {
    flex: 1 1 0%;
}
.overflow-y-auto {
    overflow-y: auto;
}
.bg-\[\#fafdfa\] {
    background-color: var(--bg, #fafdfa);
}

.window-header {
    height: 40px;
    background-color: var(--surface, #ffffff);
    border-bottom: 2px solid var(--border, rgba(0,0,0,0.12));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    user-select: none;
    cursor: move;
    position: relative;
    z-index: 10;
}
.window-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
    background-color: var(--bg, #ffffff);
}

/* No dim/overlay — windows float naturally above content */

/* Maximized window fills workspace */
body.window-maximized .window-element {
    z-index: 9998 !important;
    top: 0 !important;
    height: calc(100vh - 56px) !important;
    width: 100% !important;
}
body.window-maximized .window-element-glass {
    z-index: 9998 !important;
    top: 0 !important;
    height: calc(100vh - 56px) !important;
    width: 100% !important;
    border-radius: 0 !important;
}

/* Ensure window body is opaque */
.window-body {
    background-color: var(--bg, #fafdfa) !important;
    opacity: 1 !important;
}

/* Ensure window element is fully opaque */
.window-element {
    background-color: var(--surface, #ffffff) !important;
    opacity: 1 !important;
}

/* Fix theme dropdown background - use surface color to adapt to theme */
/* This overrides hardcoded black background from other CSS files */
#themeDropdown,
select.theme-dropdown {
    background: var(--surface) !important;
}

/* ============================================ */
/* PHASE 2 — START MENU (Floating Central)      */
/* ============================================ */

.start-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: startMenuFadeIn 0.2s ease;
}

@keyframes startMenuFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.start-menu {
    width: 660px;
    max-width: 94vw;
    max-height: 560px;
    background: var(--glass-bg, rgba(20, 22, 35, 0.82));
    backdrop-filter: var(--glass-backdrop, blur(24px) saturate(180%));
    -webkit-backdrop-filter: var(--glass-backdrop, blur(24px) saturate(180%));
    border: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.4));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: startMenuSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes startMenuSlideUp {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.start-menu-search-wrap {
    padding: 16px 20px;
    border-bottom: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.10));
}

.start-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.start-menu-search:focus-within {
    border-color: var(--primary, #88ccff);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(136, 204, 255, 0.15);
}

.start-menu-search svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary, #888);
    flex-shrink: 0;
}

.start-menu-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text, #eee);
    font-size: 14px;
    font-family: inherit;
}

.start-menu-search input::placeholder {
    color: var(--text-secondary, #666);
}

.start-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.start-menu-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary, #777);
    padding: 8px 8px 6px;
}

.start-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 4px;
    margin-bottom: 12px;
}

.start-menu-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.start-menu-app:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.start-menu-app:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.12);
}

.start-menu-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.start-menu-app:hover .start-menu-app-icon {
    transform: scale(1.08);
}

.start-menu-app-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.start-menu-app-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text, #ddd);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 76px;
}

.start-menu-recent {
    border-top: 1px solid var(--glass-border-color, rgba(255, 255, 255, 0.06));
    padding: 4px 8px 8px;
}

.start-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--glass-border-color, rgba(255, 255, 255, 0.06));
}

.start-menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.start-menu-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary, #88ccff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.start-menu-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #ddd);
}

.start-menu-power {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary, #888);
}

.start-menu-power:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.start-menu-filter-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary, #777);
    font-size: 14px;
}

/* ============================================ */
/* PHASE 2b — Start Button in Taskbar           */
/* ============================================ */

#startBtn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    margin-right: 4px;
    flex-shrink: 0;
}

#startBtn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

#startBtn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text, #eee);
    transition: stroke 0.2s;
}

#startBtn:hover svg {
    stroke: var(--primary, #88ccff);
}

.start-menu-open #startBtn {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary, #88ccff);
}

.start-menu-open #startBtn svg {
    stroke: var(--primary, #88ccff);
}

/* ============================================ */
/* PHASE 3 — CHAT SIDEBAR                       */
/* ============================================ */

.chat-sidebar {
    width: 300px;
    height: 100%;
    background: var(--glass-bg, rgba(20, 22, 35, 0.6));
    backdrop-filter: var(--glass-backdrop, blur(16px) saturate(150%));
    -webkit-backdrop-filter: var(--glass-backdrop, blur(16px) saturate(150%));
    border-right: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.12));
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    flex-shrink: 0;
}

.chat-sidebar.collapsed {
    width: 51px;
}

.chat-sidebar-toggle {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.10));
    flex-shrink: 0;
}

.chat-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-sidebar-toggle svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-secondary, #888);
    transition: all 0.3s;
}

.chat-sidebar-toggle:hover svg {
    stroke: var(--primary, #88ccff);
}

.chat-sidebar.collapsed .chat-sidebar-toggle {
    justify-content: center;
}

.chat-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-sidebar.collapsed .chat-sidebar-content {
    display: none;
}

.chat-sidebar-header {
    padding: 14px 16px 10px;
    border-bottom: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.10));
}

.chat-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #eee);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-sidebar-title .glow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, #88ccff);
    box-shadow: 0 0 8px var(--primary, #88ccff);
    animation: chatDotPulse 2s ease-in-out infinite;
}

@keyframes chatDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.chat-sidebar-conversations {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.chat-sidebar-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.chat-sidebar-conv-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-sidebar-conv-item.active {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-sidebar-conv-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary, #88ccff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-sidebar-conv-icon svg {
    width: 16px;
    height: 16px;
    stroke: #111;
}

.chat-sidebar-conv-info {
    flex: 1;
    min-width: 0;
}

.chat-sidebar-conv-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-sidebar-conv-preview {
    font-size: 11px;
    color: var(--text-secondary, #777);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.chat-sidebar-conv-time {
    font-size: 10px;
    color: var(--text-secondary, #666);
    flex-shrink: 0;
}

.chat-sidebar-new-chat {
    margin: 8px;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 13px;
    transition: all 0.2s;
}

.chat-sidebar-new-chat:hover {
    border-color: var(--primary, #88ccff);
    color: var(--primary, #88ccff);
    background: rgba(255, 255, 255, 0.04);
}

.chat-sidebar-collapsed-icons {
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 4px;
}

.chat-sidebar.collapsed .chat-sidebar-collapsed-icons {
    display: flex;
}

.chat-sidebar-collapsed-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    color: var(--text-secondary, #888);
}

.chat-sidebar-collapsed-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #eee);
}

.chat-sidebar-collapsed-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* ============================================ */
/* PHASE 4 — MODERN TASKBAR                     */
/* ============================================ */

.toolbar-v15 {
    height: 56px;
    background: var(--glass-bg, rgba(20, 22, 35, 0.65));
    backdrop-filter: var(--glass-backdrop, blur(20px) saturate(180%));
    -webkit-backdrop-filter: var(--glass-backdrop, blur(20px) saturate(180%));
    border-top: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.10));
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 2000;
    position: relative;
}

.toolbar-v15 .taskbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 2px;
    height: 100%;
}

.toolbar-v15 .taskbar-dock-item {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.toolbar-v15 .taskbar-dock-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.toolbar-v15 .taskbar-dock-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary, #88ccff);
    box-shadow: 0 0 6px var(--primary, #88ccff);
}

.toolbar-v15 .taskbar-dock-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary, #aaa);
    transition: all 0.2s;
}

.toolbar-v15 .taskbar-dock-item:hover svg {
    stroke: var(--text, #eee);
}

.toolbar-v15 .taskbar-dock-item.active svg {
    stroke: var(--primary, #88ccff);
}

.toolbar-v15 .taskbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.toolbar-v15 .taskbar-clock {
    font-family: "Fira Code", monospace;
    font-size: 12px;
    color: var(--text-secondary, #999);
    text-align: right;
    line-height: 1.3;
    padding: 0 8px;
    user-select: none;
}

.toolbar-v15 .taskbar-widget {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary, #888);
}

.toolbar-v15 .taskbar-widget:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #eee);
}

.toolbar-v15 .taskbar-widget svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* ============================================ */
/* PHASE 5 — GLASS WINDOWS                      */
/* ============================================ */

.window-element-glass {
    position: absolute;
    width: 700px;
    height: 500px;
    background: var(--glass-bg, rgba(20, 22, 35, 0.78));
    backdrop-filter: var(--glass-backdrop, blur(20px) saturate(180%));
    -webkit-backdrop-filter: var(--glass-backdrop, blur(20px) saturate(180%));
    border-radius: 16px;
    box-shadow: var(--glass-shadow, 0 12px 48px rgba(0, 0, 0, 0.5));
    display: flex;
    flex-direction: column;
    border: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.15));
    overflow: hidden;
    z-index: 100;
    animation: windowOpenIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes windowOpenIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes windowCloseOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.92); opacity: 0; }
}

.window-element-glass.closing {
    animation: windowCloseOut 0.2s ease forwards;
}

.window-header-glass {
    height: 48px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 2px solid var(--glass-border-color, rgba(255, 255, 255, 0.12));
    user-select: none;
    cursor: move;
    flex-shrink: 0;
}

.window-header-glass .window-dot-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
}

.window-dot-close { background: #ff5f57; }
.window-dot-close:hover { background: #ff3b30; }
.window-dot-minimize { background: #febc2e; }
.window-dot-minimize:hover { background: #f5a623; }
.window-dot-maximize { background: #28c840; }
.window-dot-maximize:hover { background: #1da830; }

.window-header-glass .window-title {
    flex: 1;
    text-align: center;
    font-family: "Fira Code", "Inter", monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #999);
    pointer-events: none;
}

.window-body-glass {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    padding: 0;
    position: relative;
}

/* Snap layout hints */
.snap-hint {
    position: fixed;
    background: rgba(136, 204, 255, 0.2);
    border: 2px solid rgba(136, 204, 255, 0.5);
    border-radius: 12px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.snap-hint.visible { opacity: 1; }
.snap-hint-left { top: 56px; left: 0; width: 50vw; height: calc(100vh - 56px); }
.snap-hint-right { top: 56px; right: 0; width: 50vw; height: calc(100vh - 56px); }
.snap-hint-top { top: 56px; left: 0; width: 100vw; height: 100vh; }

/* ============================================ */
/* PHASE 6 — DYNAMIC BACKGROUND                 */
/* ============================================ */

.workspace-v15 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg,
        var(--bg, #0a0a0a) 0%,
        hsla(210, 80%, 60%, 0.04) 30%,
        hsla(160, 70%, 50%, 0.03) 60%,
        var(--bg, #0a0a0a) 100%
    );
    position: relative;
}

.workspace-v15::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, hsla(210, 80%, 60%, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, hsla(160, 70%, 50%, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================ */
/* RESPONSIVE ADJUSTMENTS                       */
/* ============================================ */

@media (max-width: 768px) {
    .start-menu { width: 100vw; max-height: 70vh; border-radius: 20px 20px 0 0; margin-top: auto; }
    .chat-sidebar { width: 100%; height: auto; position: absolute; bottom: 56px; z-index: 300; border-radius: 16px 16px 0 0; }
    .chat-sidebar.collapsed { width: 51px; border-radius: 16px 0 0 16px; }
}