Extract magic numbers to named constants

[oliverames]

Problem

Timing values and layout dimensions are scattered throughout the codebase as magic numbers, making it hard to understand their purpose and maintain consistency.

Examples

• 100, 300, 350, 400, 500 ms timing values
• 85px header height
• 320px sidebar/popup widths
• 10000 ms API timeout

Proposed Solution

Add named constants at the top of the script section:

const TIMING = {
  POPUP_RENDER_DELAY: 100,
  MOBILE_EXPANSION_DELAY: 400,
  CSS_TRANSITION: 350,
  TOUCH_DEBOUNCE: 300,
  API_TIMEOUT: 10000,
  THANK_YOU_DISPLAY: 5000,
};

const LAYOUT = {
  HEADER_HEIGHT: 85,
  SIDEBAR_WIDTH: 320,
  POPUP_MAX_WIDTH: 320,
  POPUP_PADDING: 30,
  CLOSE_BUTTON_PADDING: 15,
};

Benefits

• Self-documenting code
• Single source of truth for shared values
• Easier to tune timing/layout values
• Reduces bugs from inconsistent values