\n
\n\n// ā WRONG ā overflow hidden clips Bob's interactive elements\n\n
\n```\n\n### 4.2 Height Calculation Breakdown\n\n| Component | Height | Notes |\n|---|---|---|\n| CARFIX Header | 72px | `position: fixed; top: 0; z-index: 40` |\n| CARFIX Bottom Nav | 72px | `position: fixed; bottom: 0; z-index: 30` |\n| **Total chrome** | **144px** | Subtracted from viewport |\n| Safe area inset | Variable | For notched devices (iPhone, etc.) |\n| **Bob container** | `100dvh - 144px - safe-area` | Everything between header and nav |\n\n### 4.3 Header & Bottom Nav Requirements\n\nBob's UI layers (chat drawer at z-130, PTT at z-145) must sit **above** CARFIX navigation:\n\n```css\n/* CARFIX Header */\n.carfix-header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 72px;\n z-index: 40; /* Bob uses zIndexBase=100, so Bob layers above this */\n}\n\n/* CARFIX Bottom Nav */\n.carfix-bottom-nav {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n height: 72px;\n z-index: 30; /* Must be BELOW Bob's z-base of 100 */\n}\n```\n\n> **If your header or nav use `z-index: 50` or higher**, increase Bob's `zIndexBase` prop accordingly (e.g., `zIndexBase={150}`).\n\n### 4.4 Container Anti-Patterns (WILL CAUSE BUGS)\n\n| ā Don't Do This | Why It Breaks |\n|---|---|\n| `overflow: hidden` on container | Clips PTT button, chat drawer, and expand handle |\n| `overflow: auto/scroll` on container | Creates nested scroll context ā product shelf scroll breaks |\n| `transform` on container or ancestors | Creates new stacking context ā z-index layering fails |\n| `isolation: isolate` on container | Same stacking context issue (Bob manages its own isolation) |\n| Container height as `%` without parent height | Bob collapses to 0px |\n| Missing `position: relative` | Absolutely-positioned Bob layers escape the container |\n| Wrapping Bob in a scrollable parent | Bob has its own scroll management ā nesting causes conflicts |\n\n### 4.5 Pre-Mount Checklist\n\nBefore writing any integration code, verify:\n\n```\nā” Header is position: fixed, 72px tall, z-index ā¤ 49\nā” Bottom nav is position: fixed, 72px tall, z-index ā¤ 49\nā” Bob container uses calc(100dvh - 144px - env(safe-area-inset-bottom, 0px))\nā” Bob container has position: relative\nā” Bob container has NO overflow property set\nā” Bob container has NO transform property set\nā” No ancestor element between and Bob container has overflow: hidden\nā” No ancestor element has a transform that creates a stacking context\nā” Container renders at correct height (inspect element in DevTools)\nā” HTTPS is enabled (required for Push-to-Talk microphone access)\n```\n\n---\n\n### 4.6 Layout Diagram\n\n```\nāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā\nā CARFIX Header (72px, z-40) ā ā position: fixed; top: 0\nāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤\nā ā\nā Bob Container ā ā position: relative\nā height: calc(100dvh - 144px ā NO overflow property\nā - safe-area-inset) ā NO transform property\nā ā\nā āā Bob Internal Layers āāāā ā\nā ā PTT Button z-145 ā ā\nā ā Chat Drawer z-130 ā ā\nā ā Counter Overlay z-70 ā ā\nā ā Bob Character z-60 ā ā\nā ā Product Shelf z-55 ā ā\nā ā Backdrop z-10 ā ā\nā āāāāāāāāāāāāāāāāāāāāāāāāāāā ā\nā ā\nāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤\nā Bottom Nav (72px, z-30) ā ā position: fixed; bottom: 0\nāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā\n```\n\n**Bob's internal z-index stack (relative to `zIndexBase={100}`):**\n\n| Layer | z-index |\n|---|---|\n| Chat PTT Button | 145 |\n| Chat Drawer | 130 |\n| Counter Overlay | 70 |\n| Bob Character | 60 |\n| Product Shelf | 55 |\n| Backdrop | 10 |\n\n---\n\n## 5. Callback Signatures\n\n### onAddToCart\n\n```typescript\nonAddToCart: (item: {\n product_id: string;\n product_name: string;\n quantity: number;\n unit_price: number; // Final price (discount already applied for bundle items)\n sku?: string;\n brand?: string;\n image_url?: string;\n vehicle_id?: string;\n // Bundle metadata (present when item is part of a service package)\n is_bundle_item?: boolean;\n bundle_discount_percentage?: number;\n service_package_name?: string;\n service_package_id?: string;\n quality_tier?: string; // \"Economy\" | \"Standard\" | \"Premium\" | \"Performance\"\n}) => Promise