.side-panel{--side-panel-width:280px;position:fixed;top:0;bottom:0;left:0;width:calc(var(--side-panel-width) + var(--safe-area-left));background:var(--background-secondary-solid);box-shadow:var(--shadow-panel);border-radius:0 var(--radius-xl) var(--radius-xl) 0;z-index:calc(var(--z-sidebar) - 1);display:flex;flex-direction:column;overflow:hidden;transform:translateX(-100%);transition:transform var(--duration-normal) var(--ease-out);pointer-events:none}.side-panel.visible{transform:translateX(0);pointer-events:auto}.side-panel__back{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:16px 16px 8px var(--safe-area-left);padding:0;border-radius:var(--radius-sm);background:#0000;border:none;color:var(--ink-tertiary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);flex-shrink:0}.side-panel__back:hover{background:var(--background-hover);color:var(--ink-primary)}.side-panel__back:active{transform:translateY(1px)}.side-panel__back svg{width:20px;height:20px}.side-panel__title{font-size:var(--text-lg);font-weight:600;color:var(--ink-primary);margin:0 16px 12px var(--safe-area-left);flex-shrink:0}.side-panel__content{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 24px var(--safe-area-left)}.side-panel__close{position:absolute;top:16px;right:12px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--radius-sm);background:#0000;border:none;color:var(--ink-tertiary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.side-panel__close:hover{background:var(--background-hover);color:var(--ink-primary)}.side-panel__close:active{transform:translateY(1px)}