/* ======================================== SIDEBAR (RECENT PLOTS) ======================================== */ .sidebar { position: fixed; top: 0; right: -350px; width: 330px; height: 100vh; background: var(--card-bg); border-left: 2px solid var(--border-color); z-index: 2000; transition: right 0.3s ease; overflow-y: auto; box-shadow: -4px 0 15px rgba(0,0,0,0.2); } .sidebar.open { right: 0; } .sidebar-header { padding: 1.2rem; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--card-bg); z-index: 1; } .sidebar-title { margin: 0; font-size: 1.2rem; color: var(--text-color); font-weight: 600; } .sidebar-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); padding: 0.2rem; border-radius: 4px; transition: background-color 0.2s ease; } .sidebar-close:hover { background: var(--border-color); } .sidebar-content { padding: 1rem; } .recent-plot { display: flex; gap: 0.7rem; padding: 0.8rem; margin-bottom: 0.8rem; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border-color); } .recent-plot:hover { background: var(--button-bg); color: white; transform: translateX(2px); } .recent-plot-thumb { width: 60px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .recent-plot-info { flex: 1; min-width: 0; } .recent-plot-name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-plot-path { font-size: 0.8rem; color: var(--breadcrumb-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1500; display: none; backdrop-filter: blur(2px); } .sidebar-overlay.open { display: block; }