fix: remaining LOTUS_BUGS.md items — hardcoded hex and a11y

- GifPicker: replace #FF6B00 and #060c14 with var(--lt-accent-orange) and
  var(--lt-bg-secondary); rgba opacity values use color-mix()
- VoiceMessageRecorder: replace #FF6B00 and #00FF88 waveform/dot colors
  with var(--lt-accent-orange) / var(--lt-accent-green)
- Presence: replace aria-labelledby referencing a lazy tooltip ID with a
  direct aria-label so screen readers always have the text in the DOM

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/presence/Presence.tsx

@@ -10,7 +10,7 @@ import {
   TooltipProvider,
   toRem,
 } from 'folds';
-import React, { ReactNode, useId } from 'react';
+import React, { ReactNode } from 'react';
 import * as css from './styles.css';
 import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
 
@@ -27,7 +27,7 @@ type PresenceBadgeProps = {
 };
 export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
-  const badgeLabelId = useId();
+  const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence];
 
   return (
     <TooltipProvider
@@ -36,7 +36,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
       offset={4}
       delay={200}
       tooltip={
-        <Tooltip id={badgeLabelId}>
+        <Tooltip>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
             <Text size="L400">{label[presence]}</Text>
             {status && <Text size="T200">•</Text>}
@@ -47,7 +47,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
     >
       {(triggerRef) => (
         <Badge
-          aria-labelledby={badgeLabelId}
+          aria-label={ariaLabel}
           ref={triggerRef}
           size={size}
           variant={PresenceToColor[presence]}