@font-face{font-family:"Grablex Code Brand";src:url("/product-preview/grablex-chat/assets/branding/space-grotesk-latin.woff2") format("woff2");font-style:normal;font-weight:300 700;font-display:swap}
/* Shared stationary logo and sidebar geometry. */
.sidebar-logo-toggle{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--radius-xs);transition:background 160ms ease,transform 160ms ease}
.sidebar-logo-toggle img{display:block;width:36px;height:38px;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none}
.sidebar-logo-toggle:hover{background:rgba(255,255,255,.045)}
.sidebar-logo-toggle:active{transform:scale(.94)}
.sidebar-logo-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.sidebar-brand .brand-copy strong{font-family:"Grablex Code Brand",Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:-.055em;line-height:1.2}
.sidebar-brand .brand-copy small{font-size:10px;letter-spacing:.045em;margin-top:4px}
@media(prefers-reduced-motion:reduce){.desktop,.sidebar-logo-toggle{transition:none!important}}

/* Paired Code/Chat vectors remain readable and share stable button geometry. */
.product-switch button{min-height:40px;gap:8px;font-weight:500;transition:background 150ms ease,color 150ms ease}
.product-switch .product-mode-icon{display:grid;place-items:center;flex:none;width:18px;height:18px;line-height:1;color:inherit}
.product-switch .product-mode-icon svg{display:block;width:18px;height:18px;stroke-width:1.8;pointer-events:none}
.product-switch button[aria-pressed="true"] .product-mode-icon{color:var(--brand)}
.product-switch button:hover{color:var(--text)}
@media(prefers-reduced-motion:reduce){.product-switch button{transition:none}}