{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "email",
  "title": "Email",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 4 email variants: https://avaraui.com/view/email. This item holds 4 of them as looks of one component (default, minimal, glass, liquid-glass). Skip the question if the user already named one. A full email client layout with folders, labels, message list, reading pane and attachments. Use it as the shell for an inbox or ticketing view.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/Email.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Archive,\n  Bold,\n  Check,\n  ChevronLeft,\n  ChevronRight,\n  Edit3,\n  FileText,\n  Image as ImageIcon,\n  Italic,\n  Link as LinkIcon,\n  Mail,\n  MailOpen,\n  Menu,\n  Minus,\n  MoreVertical,\n  Paperclip,\n  RefreshCw,\n  Search,\n  Send,\n  Star,\n  Trash2,\n  X,\n} from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\n\nexport function LiquidGlassSvgFilter() {\n  return (\n    <>\n      <img\n        src=\"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        style={{\n          position: \"fixed\",\n          top: \"-9999px\",\n          left: \"-9999px\",\n          width: \"1px\",\n          height: \"1px\",\n          opacity: 0,\n          pointerEvents: \"none\",\n        }}\n      />\n      <svg\n        style={{\n          position: \"fixed\",\n          top: \"-9999px\",\n          left: \"-9999px\",\n          width: 0,\n          height: 0,\n          pointerEvents: \"none\",\n        }}\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <filter\n            id=\"glass-blur\"\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            filterUnits=\"objectBoundingBox\"\n          >\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency=\"0.003 0.007\"\n              numOctaves=\"1\"\n              result=\"turbulence\"\n            />\n            <feDisplacementMap\n              in=\"SourceGraphic\"\n              in2=\"turbulence\"\n              scale=\"200\"\n              xChannelSelector=\"R\"\n              yChannelSelector=\"G\"\n            />\n          </filter>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\n// ==========================================\n// VARIANT & COLOR CONFIGURATION\n// ==========================================\nexport type EmailVariant = \"default\" | \"minimal\" | \"glass\" | \"liquid-glass\";\n\n// Added (string & {}) so it accepts arbitrary hex codes without losing IDE autocomplete for the presets\nexport type EmailColor =\n  | \"primary\"\n  | \"indigo\"\n  | \"rose\"\n  | \"emerald\"\n  | \"lavender\"\n  | \"blue\"\n  | \"zinc\"\n  | (string & {});\n\nconst emailVariants: Record<EmailVariant, Record<string, string>> = {\n  default: {\n    wrapper:\n      \"bg-background border border-border shadow-xl rounded-2xl\",\n    sidebar:\n      \"bg-card/90 backdrop-blur-xl border-r border-border\",\n    main: \"bg-background\",\n    header:\n      \"bg-background/80 border-b border-border backdrop-blur-xl\",\n    searchBg: \"bg-muted border border-transparent\",\n    emailItem:\n      \"bg-background hover:bg-muted border-b border-border\",\n    composeModal:\n      \"bg-card text-card-foreground border border-border shadow-2xl\",\n  },\n  minimal: {\n    wrapper: \"bg-transparent border-none shadow-none rounded-none\",\n    sidebar:\n      \"bg-muted/50 rounded-2xl border border-border lg:mr-4\",\n    main: \"bg-transparent\",\n    header:\n      \"bg-transparent border-b border-border mb-2 pb-2\",\n    searchBg:\n      \"bg-muted/50 border border-border\",\n    emailItem:\n      \"bg-transparent hover:bg-muted/50 border-b border-border rounded-xl my-1\",\n    composeModal:\n      \"bg-card text-card-foreground border border-border shadow-2xl\",\n  },\n  glass: {\n    wrapper:\n      \"bg-white/70 dark:bg-black/40 backdrop-blur-2xl border border-white/50 dark:border-white/10 shadow-2xl rounded-2xl text-black dark:text-foreground [--foreground:#000000] [--muted-foreground:#18181b] [--color-foreground:#000000] [--color-muted-foreground:#18181b] dark:[--foreground:oklch(1_0_0)] dark:[--muted-foreground:oklch(0.654_0.001_286.359)] dark:[--color-foreground:oklch(1_0_0)] dark:[--color-muted-foreground:oklch(0.654_0.001_286.359)]\",\n    sidebar:\n      \"bg-white/20 dark:bg-black/10 border-r border-black/10 dark:border-white/10\",\n    main: \"bg-transparent\",\n    header:\n      \"bg-white/20 dark:bg-black/10 border-b border-black/10 dark:border-white/10 backdrop-blur-md\",\n    searchBg:\n      \"bg-white/50 dark:bg-black/30 border border-black/10 dark:border-white/10 backdrop-blur-md text-foreground placeholder:text-muted-foreground\",\n    emailItem:\n      \"bg-transparent hover:bg-white/40 dark:hover:bg-white/5 border-b border-black/5 dark:border-white/5 transition-colors\",\n    composeModal:\n      \"bg-white/95 dark:bg-black/70 backdrop-blur-2xl border border-black/10 dark:border-white/10 shadow-2xl text-black dark:text-foreground\",\n  },\n  \"liquid-glass\": {\n    wrapper:\n      \"bg-transparent border-0 shadow-[0_25px_60px_rgba(0,0,0,0.45)] text-white rounded-[22px] sm:rounded-[28px] [--foreground:#ffffff] [--muted-foreground:rgba(255,255,255,0.75)] [--color-foreground:#ffffff] [--color-muted-foreground:rgba(255,255,255,0.75)]\",\n    sidebar:\n      \"bg-white/[0.07] dark:bg-black/25 border-r border-white/20 dark:border-white/10\",\n    main: \"bg-transparent\",\n    header:\n      \"bg-white/[0.07] dark:bg-black/25 border-b border-white/20 dark:border-white/10\",\n    searchBg:\n      \"bg-white/15 dark:bg-black/30 border border-white/20 dark:border-white/10 text-white placeholder:text-white/60\",\n    emailItem:\n      \"bg-transparent hover:bg-white/15 dark:hover:bg-white/10 border-b border-white/10 dark:border-white/10 text-white transition-colors\",\n    composeModal:\n      \"bg-black/75 dark:bg-black/85 backdrop-blur-2xl border border-white/20 dark:border-white/15 shadow-2xl text-white\",\n  },\n};\n\nconst colorThemes: Record<string, Record<string, string>> = {\n  primary: {\n    text: \"text-primary\",\n    bg: \"bg-primary hover:bg-primary/90 text-primary-foreground shadow-primary/20\",\n    lightBg: \"bg-primary/10 text-primary\",\n    border: \"border-primary/30\",\n    focusRing:\n      \"focus:border-primary/30 focus:ring-primary/10 dark:focus:ring-primary/20\",\n    dot: \"bg-primary\",\n    checkboxBg: \"bg-primary border-primary\",\n    checkboxText: \"text-primary-foreground\",\n    checkboxFocus: \"peer-focus-visible:ring-primary/40\",\n  },\n  indigo: {\n    text: \"text-indigo-600 dark:text-indigo-400\",\n    bg: \"bg-indigo-500 hover:bg-indigo-600 text-white shadow-indigo-500/20\",\n    lightBg:\n      \"bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300\",\n    border: \"border-indigo-500\",\n    focusRing:\n      \"focus:border-indigo-500/30 focus:ring-indigo-500/10 dark:focus:ring-indigo-500/20\",\n    dot: \"bg-indigo-500\",\n    checkboxBg: \"bg-indigo-600 border-indigo-600\",\n    checkboxText: \"text-white\",\n    checkboxFocus: \"peer-focus-visible:ring-indigo-500/40\",\n  },\n  rose: {\n    text: \"text-rose-600 dark:text-rose-400\",\n    bg: \"bg-rose-500 hover:bg-rose-600 text-white shadow-rose-500/20\",\n    lightBg: \"bg-rose-50 dark:bg-rose-500/10 text-rose-700 dark:text-rose-300\",\n    border: \"border-rose-500\",\n    focusRing:\n      \"focus:border-rose-500/30 focus:ring-rose-500/10 dark:focus:ring-rose-500/20\",\n    dot: \"bg-rose-500\",\n    checkboxBg: \"bg-rose-600 border-rose-600\",\n    checkboxText: \"text-white\",\n    checkboxFocus: \"peer-focus-visible:ring-rose-500/40\",\n  },\n  emerald: {\n    text: \"text-emerald-600 dark:text-emerald-400\",\n    bg: \"bg-emerald-500 hover:bg-emerald-600 text-white shadow-emerald-500/20\",\n    lightBg:\n      \"bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300\",\n    border: \"border-emerald-500\",\n    focusRing:\n      \"focus:border-emerald-500/30 focus:ring-emerald-500/10 dark:focus:ring-emerald-500/20\",\n    dot: \"bg-emerald-500\",\n    checkboxBg: \"bg-emerald-600 border-emerald-600\",\n    checkboxText: \"text-white\",\n    checkboxFocus: \"peer-focus-visible:ring-emerald-500/40\",\n  },\n  lavender: {\n    text: \"text-[#9b8afb]\",\n    bg: \"bg-[#9b8afb] hover:bg-[#8b79f7] text-white shadow-[#9b8afb]/20\",\n    lightBg: \"bg-[#9b8afb]/10 text-[#9b8afb]\",\n    border: \"border-[#9b8afb]\",\n    focusRing:\n      \"focus:border-[#9b8afb]/30 focus:ring-[#9b8afb]/10 dark:focus:ring-[#9b8afb]/20\",\n    dot: \"bg-[#9b8afb]\",\n    checkboxBg: \"bg-[#9b8afb] border-[#9b8afb]\",\n    checkboxText: \"text-white\",\n    checkboxFocus: \"peer-focus-visible:ring-[#9b8afb]/40\",\n  },\n  blue: {\n    text: \"text-blue-600 dark:text-blue-400\",\n    bg: \"bg-blue-600 hover:bg-blue-700 text-white shadow-blue-600/20\",\n    lightBg: \"bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-300\",\n    border: \"border-blue-500\",\n    focusRing:\n      \"focus:border-blue-500/30 focus:ring-blue-500/10 dark:focus:ring-blue-500/20\",\n    dot: \"bg-blue-500\",\n    checkboxBg: \"bg-blue-600 border-blue-600\",\n    checkboxText: \"text-white\",\n    checkboxFocus: \"peer-focus-visible:ring-blue-500/40\",\n  },\n  zinc: {\n    text: \"text-zinc-900 dark:text-zinc-100\",\n    bg: \"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200 text-white dark:text-zinc-900 shadow-zinc-900/10\",\n    lightBg: \"bg-zinc-100 dark:bg-zinc-800/50 text-zinc-900 dark:text-zinc-100\",\n    border: \"border-zinc-500 dark:border-zinc-400\",\n    focusRing:\n      \"focus:border-zinc-500/30 focus:ring-zinc-500/10 dark:focus:ring-zinc-500/20\",\n    dot: \"bg-zinc-900 dark:bg-zinc-100\",\n    checkboxBg: \"bg-zinc-900 dark:bg-zinc-100 border-zinc-900 dark:border-zinc-100\",\n    checkboxText: \"text-white dark:text-zinc-900\",\n    checkboxFocus: \"peer-focus-visible:ring-zinc-500/40\",\n  },\n};\n\nexport type EmailLabel = {\n  color: string;\n  name: string;\n  pill: string;\n};\n\nexport type Attachment = {\n  name: string;\n  type: string;\n  size?: string;\n};\n\nexport type Email = {\n  id: string | number;\n  sender: string;\n  email: string;\n  subject: string;\n  time: string;\n  fullDate: string;\n  isStarred: boolean;\n  isRead: boolean;\n  folder?: string;\n  avatar?: string;\n  initials?: string;\n  color?: string;\n  labels?: EmailLabel[];\n  body: string;\n  attachments?: Attachment[];\n};\n\nconst BulletproofAvatar = ({\n  src,\n  initials,\n  color,\n  size = 40,\n}: {\n  src?: string;\n  initials?: string;\n  color?: string;\n  size?: number;\n}) => (\n  <div\n    className=\"relative shrink-0 flex-none rounded-full overflow-hidden shadow-sm bg-muted flex items-center justify-center\"\n    style={{ width: size, height: size, minWidth: size, minHeight: size }}\n  >\n    {src ? (\n      <img\n        src={src}\n        alt=\"Avatar\"\n        className=\"w-full h-full object-cover block m-0 p-0\"\n      />\n    ) : (\n      <div\n        className={`w-full h-full flex items-center justify-center font-semibold text-sm m-0 p-0 tracking-wider ${color}`}\n      >\n        {initials}\n      </div>\n    )}\n  </div>\n);\n\nexport default function EmailApp({\n  initialEmails,\n  variant = \"default\",\n  color = \"primary\",\n}: {\n  initialEmails: Email[];\n  variant?: EmailVariant;\n  color?: EmailColor;\n}) {\n  const [emails, setEmails] = useState<Email[]>(() =>\n    (initialEmails || []).map((e) => ({\n      ...e,\n      folder: e.folder || \"inbox\",\n      isRead: e.isRead ?? true,\n    })),\n  );\n\n  // Custom hex injection logic\n  const isCustomHex = color?.startsWith(\"#\");\n  const customVars = isCustomHex\n    ? ({\n        \"--email-custom\": color,\n        \"--email-custom-10\": `${color}1a`,\n        \"--email-custom-20\": `${color}33`,\n        \"--email-custom-50\": `${color}80`,\n      } as React.CSSProperties)\n    : {};\n\n  const theme = isCustomHex\n    ? {\n        text: \"text-[var(--email-custom)]\",\n        bg: \"bg-[var(--email-custom)] hover:brightness-110 text-white shadow-[0_4px_14px_0_var(--email-custom-20)]\",\n        lightBg: \"bg-[var(--email-custom-10)] text-[var(--email-custom)]\",\n        border: \"border-[var(--email-custom)]\",\n        focusRing:\n          \"focus:border-[var(--email-custom-50)] focus:ring-2 focus:ring-[var(--email-custom-20)]\",\n        dot: \"bg-[var(--email-custom)]\",\n        checkboxBg: \"bg-[var(--email-custom)] border-[var(--email-custom)]\",\n        checkboxText: \"text-white\",\n        checkboxFocus: \"peer-focus-visible:ring-[var(--email-custom)]/40\",\n      }\n    : colorThemes[color] || colorThemes[\"primary\"];\n\n  const styles = emailVariants[variant];\n\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [selectedEmails, setSelectedEmails] = useState<Array<string | number>>(\n    [],\n  );\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\n  const [activeEmailId, setActiveEmailId] = useState<string | number | null>(\n    null,\n  );\n\n  const [activeFolder, setActiveFolder] = useState(\"inbox\");\n  const [activeLabel, setActiveLabel] = useState<string | null>(null);\n  const [isComposeOpen, setIsComposeOpen] = useState(false);\n\n  const filteredEmails = useMemo(() => {\n    return emails.filter((email) => {\n      const matchesSearch =\n        email.sender.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        email.subject.toLowerCase().includes(searchQuery.toLowerCase());\n      let matchesNavigation: boolean;\n      if (activeLabel) {\n        matchesNavigation =\n          email.labels?.some((l) => l.name === activeLabel) ?? false;\n      } else if (activeFolder === \"starred\") {\n        matchesNavigation = email.isStarred;\n      } else {\n        matchesNavigation = email.folder === activeFolder;\n      }\n      return matchesSearch && matchesNavigation;\n    });\n  }, [emails, searchQuery, activeFolder, activeLabel]);\n\n  const activeEmail = emails.find((e) => e.id === activeEmailId);\n  const activeEmailIndex = filteredEmails.findIndex(\n    (e) => e.id === activeEmailId,\n  );\n\n  // Opening an email marks it read. This belongs to the act of opening, not to\n  // an effect watching the id: an effect also re-fired on unrelated re-renders\n  // and cost an extra render every time a message was opened.\n  const openEmail = (id: string | number) => {\n    setActiveEmailId(id);\n    setEmails((prev) =>\n      prev.map((e) => (e.id === id ? { ...e, isRead: true } : e)),\n    );\n  };\n\n  const handlePrevEmail = () => {\n    if (activeEmailIndex > 0)\n      openEmail(filteredEmails[activeEmailIndex - 1].id);\n  };\n  const handleNextEmail = () => {\n    if (activeEmailIndex >= 0 && activeEmailIndex < filteredEmails.length - 1)\n      openEmail(filteredEmails[activeEmailIndex + 1].id);\n  };\n\n  const handleNavClick = (folder: string, label: string | null = null) => {\n    setActiveFolder(folder);\n    setActiveLabel(label);\n    setActiveEmailId(null);\n    setSelectedEmails([]);\n    if (typeof window !== \"undefined\" && window.innerWidth < 1024)\n      setIsSidebarOpen(false);\n  };\n\n  const toggleStar = (id: string | number) =>\n    setEmails(\n      emails.map((email) =>\n        email.id === id ? { ...email, isStarred: !email.isStarred } : email,\n      ),\n    );\n  const toggleRead = (id: string | number) =>\n    setEmails(\n      emails.map((email) =>\n        email.id === id ? { ...email, isRead: !email.isRead } : email,\n      ),\n    );\n  const toggleSelect = (id: string | number) =>\n    setSelectedEmails((prev) =>\n      prev.includes(id)\n        ? prev.filter((emailId) => emailId !== id)\n        : [...prev, id],\n    );\n\n  const toggleSelectAll = () => {\n    if (\n      selectedEmails.length === filteredEmails.length &&\n      filteredEmails.length > 0\n    ) {\n      setSelectedEmails([]);\n    } else {\n      setSelectedEmails(filteredEmails.map((e) => e.id));\n    }\n  };\n\n  const moveSelectedToFolder = (targetFolder: string) => {\n    if (selectedEmails.length === 0) return;\n    setEmails(\n      emails.map((e) =>\n        selectedEmails.includes(e.id) ? { ...e, folder: targetFolder } : e,\n      ),\n    );\n    setSelectedEmails([]);\n  };\n\n  const deleteEmail = (id: string | number) => {\n    if (activeFolder === \"trash\") {\n      setEmails(emails.filter((e) => e.id !== id));\n    } else {\n      setEmails(\n        emails.map((e) => (e.id === id ? { ...e, folder: \"trash\" } : e)),\n      );\n    }\n    if (activeEmailId === id) setActiveEmailId(null);\n    setSelectedEmails((prev) => prev.filter((emailId) => emailId !== id));\n  };\n\n  const handleSendEmail = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const newEmail: Email = {\n      id: Date.now(),\n      sender: \"Me\",\n      email: \"me@example.com\",\n      subject: formData.get(\"subject\") as string,\n      body: formData.get(\"message\") as string,\n      time: new Date().toLocaleTimeString([], {\n        hour: \"2-digit\",\n        minute: \"2-digit\",\n      }),\n      fullDate: new Date().toLocaleString(),\n      isStarred: false,\n      isRead: true,\n      folder: \"sent\",\n      avatar: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto/v1790148864/80-1-1790148865111.jpg\",\n      labels: [],\n      attachments: [],\n    };\n    setEmails([newEmail, ...emails]);\n    setIsComposeOpen(false);\n    setActiveFolder(\"sent\");\n    setActiveLabel(null);\n  };\n\n  const getFolderCount = (folder: string) =>\n    emails.filter((e) => e.folder === folder && !e.isRead).length;\n\n  return (\n    <div\n      style={customVars}\n      className={cn(\n        \"w-full max-w-full h-[700px] sm:h-[800px] flex overflow-hidden relative font-sans box-border transition-colors duration-300 isolate [contain:paint] [transform:translateZ(0)]\",\n        styles.wrapper,\n      )}\n    >\n      <LiquidGlassSvgFilter />\n      {variant === \"liquid-glass\" && (\n        <>\n          {/* Inner Clipping Container for Liquid Background Stack */}\n          <div className=\"absolute inset-0 overflow-hidden rounded-[22px] sm:rounded-[28px] pointer-events-none z-0\">\n            {/* Layer 0: Liquid SVG Displaced Wave Background */}\n            <div\n              className=\"absolute -inset-10\"\n              style={{\n                backgroundImage:\n                  'url(\"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\")',\n                backgroundSize: \"cover\",\n                backgroundPosition: \"center\",\n                filter: \"url(#glass-blur)\",\n                transform: \"scale(1.1)\",\n              }}\n            />\n\n            {/* Layer 1: Contrast overlay & soft backdrop blur */}\n            <div className=\"absolute inset-0 bg-black/30 dark:bg-black/45 backdrop-blur-[2px]\" />\n\n            {/* Layer 2: Ambient Drop Shadow & Subtle Glow */}\n            <div\n              className=\"absolute inset-0 rounded-[22px] sm:rounded-[28px]\"\n              style={{\n                boxShadow:\n                  \"0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.08)\",\n              }}\n            />\n          </div>\n\n          {/* Layer 3: Specular Inner Border Highlight */}\n          <div\n            className=\"absolute inset-0 z-40 pointer-events-none rounded-[22px] sm:rounded-[28px] border border-white/40 dark:border-white/15\"\n            style={{\n              boxShadow:\n                \"inset 2px 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 2px 0 rgba(255, 255, 255, 0.3)\",\n            }}\n          />\n        </>\n      )}\n      {/* === LEFT SIDEBAR === */}\n      <aside\n        className={cn(\n          `absolute lg:relative z-30 w-[260px] h-full shrink-0 flex-none flex flex-col transition-transform duration-300 ease-in-out overflow-hidden ${isSidebarOpen ? \"translate-x-0\" : \"-translate-x-full lg:translate-x-0\"}`,\n          styles.sidebar,\n          variant === \"liquid-glass\" && \"rounded-l-[22px] sm:rounded-l-[28px] max-lg:rounded-r-2xl max-lg:border-r max-lg:border-white/20\",\n          variant === \"glass\" && \"max-lg:rounded-r-2xl max-lg:bg-white/80 max-lg:dark:bg-black/60 max-lg:backdrop-blur-2xl max-lg:shadow-2xl\",\n          variant === \"default\" && \"max-lg:rounded-r-2xl max-lg:shadow-2xl\",\n        )}\n      >\n        {variant === \"liquid-glass\" && (\n          <div className=\"absolute inset-0 pointer-events-none z-0 overflow-hidden\">\n            {/* Liquid SVG Displaced Wave Background in Sidebar */}\n            <div\n              className=\"absolute -inset-10\"\n              style={{\n                backgroundImage:\n                  'url(\"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\")',\n                backgroundSize: \"cover\",\n                backgroundPosition: \"left center\",\n                filter: \"url(#glass-blur)\",\n                transform: \"scale(1.1)\",\n              }}\n            />\n            <div className=\"absolute inset-0 bg-black/35 dark:bg-black/50 backdrop-blur-[2px]\" />\n          </div>\n        )}\n\n        <div className=\"relative z-10 flex flex-col h-full\">\n          <div className={cn(\n            \"p-5 shrink-0\",\n            variant === \"liquid-glass\" ? \"border-b border-white/20 dark:border-white/10\" : \"border-b border-border\"\n          )}>\n            <div className=\"flex items-center justify-between mb-4 lg:hidden\">\n              <h2 className={cn(\n                \"font-semibold\",\n                variant === \"liquid-glass\" ? \"text-white\" : \"text-foreground\"\n              )}>\n                Mailbox\n              </h2>\n              <button\n                onClick={() => setIsSidebarOpen(false)}\n                className={cn(\n                  \"p-1 rounded-md transition-colors cursor-pointer\",\n                  variant === \"liquid-glass\" ? \"text-white/80 hover:text-white hover:bg-white/10\" : \"text-muted-foreground hover:text-foreground\"\n                )}\n              >\n                <X className=\"w-5 h-5\" />\n              </button>\n            </div>\n            <button\n              onClick={() => {\n                setIsComposeOpen(true);\n                if (typeof window !== \"undefined\" && window.innerWidth < 1024) {\n                  setIsSidebarOpen(false);\n                }\n              }}\n              className={cn(\n                \"w-full py-2.5 rounded-xl font-medium transition-all shadow-md active:scale-95 cursor-pointer flex justify-center items-center gap-2\",\n                theme.bg,\n              )}\n            >\n              <Edit3 className=\"w-4 h-4\" /> Compose\n            </button>\n          </div>\n\n          <div className=\"flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] py-4\">\n            <nav className=\"space-y-0.5 px-3 mb-8\">\n              {[\n                { id: \"inbox\", icon: Mail, label: \"Inbox\" },\n                { id: \"sent\", icon: Send, label: \"Sent\" },\n                { id: \"draft\", icon: FileText, label: \"Drafts\" },\n                { id: \"starred\", icon: Star, label: \"Starred\" },\n                { id: \"trash\", icon: Trash2, label: \"Trash\" },\n              ].map((item) => {\n                const isActive = activeFolder === item.id && !activeLabel;\n                const unreadCount =\n                  item.id === \"starred\" ? 0 : getFolderCount(item.id);\n\n                return (\n                  <div\n                    key={item.id}\n                    onClick={() => handleNavClick(item.id)}\n                    className={`flex items-center justify-between px-3 py-2.5 rounded-lg cursor-pointer transition-all ${\n                      isActive\n                        ? variant === \"liquid-glass\"\n                          ? \"bg-white text-zinc-900 font-semibold shadow-md\"\n                          : cn(\"font-semibold\", theme.lightBg)\n                        : variant === \"liquid-glass\"\n                          ? \"text-white/80 hover:bg-white/10 hover:text-white font-medium\"\n                          : \"text-muted-foreground hover:bg-muted hover:text-foreground font-medium\"\n                    }`}\n                  >\n                    <div className=\"flex items-center gap-3 text-sm\">\n                      <item.icon\n                        className={cn(\n                          \"w-[18px] h-[18px]\",\n                          isActive && variant !== \"liquid-glass\" ? \"opacity-70\" : \"\",\n                        )}\n                      />\n                      {item.label}\n                    </div>\n                    {unreadCount > 0 && (\n                      <span\n                        className={cn(\n                          \"text-[10px] font-semibold px-2 py-0.5 rounded-full shadow-sm\",\n                          isActive && variant === \"liquid-glass\"\n                            ? \"bg-zinc-900 text-white\"\n                            : theme.bg,\n                        )}\n                      >\n                        {unreadCount}\n                      </span>\n                    )}\n                  </div>\n                );\n              })}\n            </nav>\n\n            <div className=\"px-6\">\n              <p className={cn(\n                \"text-[11px] font-semibold uppercase tracking-wider mb-3\",\n                variant === \"liquid-glass\" ? \"text-white/60\" : \"text-muted-foreground\"\n              )}>\n                Labels\n              </p>\n              <div className=\"space-y-0.5 -mx-3\">\n                {[\n                  { id: \"Private\", color: \"bg-rose-500\" },\n                  { id: \"Company\", color: \"bg-indigo-500\" },\n                  { id: \"Important\", color: \"bg-amber-500\" },\n                ].map((label) => (\n                  <div\n                    key={label.id}\n                    onClick={() => handleNavClick(\"inbox\", label.id)}\n                    className={`flex items-center gap-3 text-sm cursor-pointer px-3 py-2 rounded-lg transition-all font-medium ${\n                      activeLabel === label.id\n                        ? variant === \"liquid-glass\"\n                          ? \"bg-white text-zinc-900 font-semibold shadow-md\"\n                          : \"bg-muted text-foreground\"\n                        : variant === \"liquid-glass\"\n                          ? \"text-white/80 hover:bg-white/10 hover:text-white\"\n                          : \"text-muted-foreground hover:bg-muted hover:text-foreground\"\n                    }`}\n                  >\n                    <div\n                      className={`w-2.5 h-2.5 rounded-full shadow-sm ${label.color}`}\n                    ></div>\n                    {label.id}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </aside>\n\n      {isSidebarOpen && (\n        <div\n          className={cn(\n            \"absolute inset-0 z-20 lg:hidden cursor-pointer rounded-[22px] sm:rounded-[28px]\",\n            variant === \"liquid-glass\"\n              ? \"bg-black/25 backdrop-blur-[2px]\"\n              : variant === \"glass\"\n                ? \"bg-black/30 backdrop-blur-sm\"\n                : \"bg-black/40 dark:bg-black/60 backdrop-blur-sm\",\n          )}\n          onClick={() => setIsSidebarOpen(false)}\n        />\n      )}\n\n      {/* === MAIN CONTENT AREA === */}\n      <main\n        className={cn(\n          \"flex-1 flex flex-col min-w-0 relative z-10 transition-colors duration-300\",\n          styles.main,\n        )}\n      >\n        {!activeEmailId || !activeEmail ? (\n          <>\n            {/* Top Header */}\n            <header\n              className={cn(\n                \"h-[72px] flex items-center justify-between px-4 sm:px-6 shrink-0 flex-none z-10 transition-colors duration-300\",\n                styles.header,\n              )}\n            >\n              <div className=\"flex items-center gap-3 flex-1 min-w-0\">\n                <button\n                  className=\"lg:hidden p-2 -ml-2 text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer\"\n                  onClick={() => setIsSidebarOpen(true)}\n                >\n                  <Menu className=\"w-5 h-5\" />\n                </button>\n                <div className=\"relative w-full max-w-md min-w-0 group\">\n                  <Search className=\"w-4 h-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2 shrink-0 group-focus-within:text-muted-foreground transition-colors\" />\n                  <input\n                    type=\"text\"\n                    placeholder={`Search ${activeLabel || activeFolder}...`}\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                    className={cn(\n                      \"w-full min-w-0 rounded-full py-2 pl-9 pr-4 text-sm outline-none text-foreground transition-all placeholder:text-muted-foreground\",\n                      styles.searchBg,\n                      theme.focusRing,\n                    )}\n                  />\n                </div>\n              </div>\n            </header>\n\n            {/* Action Bar */}\n            <div\n              className={cn(\n                \"flex items-center justify-between px-4 sm:px-6 py-2.5 shrink-0 transition-colors duration-300 border-l-[3px] border-transparent\",\n                variant === \"liquid-glass\"\n                  ? \"bg-white/10 dark:bg-black/20 border-b border-white/15 dark:border-white/10 backdrop-blur-md text-white\"\n                  : variant === \"glass\"\n                    ? \"bg-white/10 dark:bg-black/5 border-b border-black/10 dark:border-white/10\"\n                    : \"border-b border-border bg-muted/50\",\n              )}\n            >\n              <div className=\"flex items-center gap-3 sm:gap-4\">\n                <div className=\"flex items-center gap-2 shrink-0\">\n                  <label className=\"relative inline-flex items-center justify-center cursor-pointer select-none\">\n                    <input\n                      type=\"checkbox\"\n                      className=\"sr-only peer\"\n                      checked={\n                        selectedEmails.length > 0 &&\n                        selectedEmails.length === filteredEmails.length\n                      }\n                      onChange={toggleSelectAll}\n                    />\n                    <div\n                      className={cn(\n                        \"w-4 h-4 rounded-[4px] border flex items-center justify-center transition-all duration-150 cursor-pointer shrink-0\",\n                        \"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1\",\n                        theme.checkboxFocus,\n                        selectedEmails.length > 0\n                          ? cn(\"shadow-xs\", theme.checkboxBg, theme.checkboxText)\n                          : variant === \"liquid-glass\"\n                            ? \"border-white/40 dark:border-white/20 bg-white/15 dark:bg-white/10 hover:border-white/70\"\n                            : variant === \"glass\"\n                              ? \"border-black/30 dark:border-white/20 bg-white/20 dark:bg-black/20 hover:border-black/50 dark:hover:border-white/60\"\n                              : \"border-border bg-background hover:border-foreground/30\",\n                      )}\n                      style={\n                        selectedEmails.length > 0 && isCustomHex\n                          ? { backgroundColor: color, borderColor: color }\n                          : undefined\n                      }\n                    >\n                      {selectedEmails.length > 0 &&\n                        (selectedEmails.length === filteredEmails.length ? (\n                          <Check className=\"w-3 h-3 stroke-[3]\" />\n                        ) : (\n                          <Minus className=\"w-3 h-3 stroke-[3]\" />\n                        ))}\n                    </div>\n                  </label>\n                  <span\n                    onClick={toggleSelectAll}\n                    className={cn(\n                      \"text-xs font-semibold cursor-pointer select-none\",\n                      variant === \"liquid-glass\" ? \"text-white/80\" : \"text-muted-foreground\"\n                    )}\n                  >\n                    {selectedEmails.length > 0\n                      ? `${selectedEmails.length} Selected`\n                      : \"Select All\"}\n                  </span>\n                </div>\n\n                {selectedEmails.length > 0 && (\n                  <div className={cn(\n                    \"flex items-center gap-1 border-l pl-3 animate-in fade-in zoom-in-95 duration-200\",\n                    variant === \"liquid-glass\" ? \"border-white/20\" : \"border-border\"\n                  )}>\n                    <button\n                      onClick={() => moveSelectedToFolder(\"trash\")}\n                      className=\"p-1.5 sm:p-2 text-muted-foreground hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-md transition-colors cursor-pointer\"\n                      title=\"Delete Selected\"\n                    >\n                      <Trash2 className=\"w-4 h-4\" />\n                    </button>\n                    <button\n                      onClick={() => moveSelectedToFolder(\"archive\")}\n                      className=\"p-1.5 sm:p-2 text-muted-foreground hover:text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-500/10 rounded-md transition-colors cursor-pointer\"\n                      title=\"Archive Selected\"\n                    >\n                      <Archive className=\"w-4 h-4\" />\n                    </button>\n                  </div>\n                )}\n              </div>\n              <div className={cn(\n                \"flex items-center gap-1\",\n                variant === \"liquid-glass\" ? \"text-white/70\" : \"text-muted-foreground\"\n              )}>\n                <button\n                  onClick={() => setSearchQuery(\"\")}\n                  className={cn(\n                    \"p-2 rounded-md transition-colors cursor-pointer\",\n                    variant === \"liquid-glass\" ? \"hover:bg-white/10 hover:text-white\" : \"hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <RefreshCw className=\"w-4 h-4\" />\n                </button>\n                <button className={cn(\n                  \"p-2 rounded-md transition-colors cursor-pointer\",\n                  variant === \"liquid-glass\" ? \"hover:bg-white/10 hover:text-white\" : \"hover:bg-muted hover:text-foreground\"\n                )}>\n                  <MoreVertical className=\"w-4 h-4\" />\n                </button>\n              </div>\n            </div>\n\n            {/* Email List */}\n            <div className=\"flex-1 overflow-y-auto\">\n              {filteredEmails.length > 0 ? (\n                <div className=\"flex flex-col\">\n                  {filteredEmails.map((email) => (\n                    <div\n                      key={email.id}\n                      onClick={() => openEmail(email.id)}\n                      className={cn(\n                        `group flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 px-4 sm:px-6 py-3.5 sm:py-4 relative transition-all cursor-pointer border-l-[3px]`,\n                        styles.emailItem,\n                        selectedEmails.includes(email.id)\n                          ? cn(theme.lightBg, theme.border)\n                          : !email.isRead\n                            ? theme.border\n                            : \"border-transparent\",\n                      )}\n                    >\n                      <div\n                        className=\"flex items-center gap-3 sm:gap-4 shrink-0\"\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <label className=\"relative inline-flex items-center justify-center cursor-pointer select-none\">\n                          <input\n                            type=\"checkbox\"\n                            checked={selectedEmails.includes(email.id)}\n                            onChange={() => toggleSelect(email.id)}\n                            className=\"sr-only peer\"\n                          />\n                          <div\n                            className={cn(\n                              \"w-4 h-4 rounded-[4px] border flex items-center justify-center transition-all duration-150 cursor-pointer shrink-0\",\n                              \"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1\",\n                              theme.checkboxFocus,\n                              selectedEmails.includes(email.id)\n                                ? cn(\"shadow-xs\", theme.checkboxBg, theme.checkboxText)\n                                : variant === \"liquid-glass\"\n                                  ? \"border-white/40 dark:border-white/20 bg-white/15 dark:bg-white/10 hover:border-white/70\"\n                                  : variant === \"glass\"\n                                    ? \"border-black/30 dark:border-white/20 bg-white/20 dark:bg-black/20 hover:border-black/50 dark:hover:border-white/60\"\n                                    : \"border-border bg-background hover:border-foreground/30\",\n                            )}\n                            style={\n                              selectedEmails.includes(email.id) && isCustomHex\n                                ? { backgroundColor: color, borderColor: color }\n                                : undefined\n                            }\n                          >\n                            {selectedEmails.includes(email.id) && (\n                              <Check className=\"w-3 h-3 stroke-[3]\" />\n                            )}\n                          </div>\n                        </label>\n                        {/* Desktop Star Button */}\n                        <button\n                          onClick={() => toggleStar(email.id)}\n                          className={cn(\n                            \"hidden sm:block cursor-pointer transition-colors\",\n                            variant === \"liquid-glass\"\n                              ? \"text-white/40 hover:text-amber-300\"\n                              : \"text-foreground/40 hover:text-amber-400\"\n                          )}\n                        >\n                          <Star\n                            className={`w-[18px] h-[18px] ${email.isStarred ? \"fill-amber-400 text-amber-400\" : \"\"}`}\n                          />\n                        </button>\n                        <div className=\"flex shrink-0\">\n                          <BulletproofAvatar\n                            src={email.avatar}\n                            initials={email.initials}\n                            color={email.color}\n                            size={36}\n                          />\n                        </div>\n                      </div>\n\n                      <div className=\"flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 pr-8 sm:pr-0\">\n                        <div className=\"flex items-center justify-between sm:w-48 shrink-0\">\n                          <span\n                            className={`text-[15px] truncate ${!email.isRead ? \"font-semibold text-foreground\" : \"font-medium text-foreground/90 dark:text-foreground/80\"}`}\n                          >\n                            {email.sender}\n                          </span>\n                          <span className={cn(\n                            \"sm:hidden text-xs font-medium shrink-0 ml-2\",\n                            variant === \"liquid-glass\" ? \"text-white/60\" : \"text-muted-foreground\"\n                          )}>\n                            {email.time}\n                          </span>\n                        </div>\n                        <div className=\"flex-1 min-w-0 flex items-center gap-2\">\n                          {!email.isRead && (\n                            <span\n                              className={cn(\n                                \"w-2 h-2 rounded-full shrink-0\",\n                                theme.dot,\n                              )}\n                            />\n                          )}\n                          <span\n                            className={`text-sm truncate ${!email.isRead ? \"font-semibold text-foreground\" : variant === \"liquid-glass\" ? \"text-white/80 font-medium\" : \"text-muted-foreground font-medium\"}`}\n                          >\n                            {email.subject}{\" \"}\n                            <span className={cn(\n                              \"font-normal ml-1 hidden lg:inline-block\",\n                              variant === \"liquid-glass\" ? \"text-white/60\" : \"text-muted-foreground/85 dark:text-muted-foreground/70\"\n                            )}>\n                              - {email.body.substring(0, 40)}...\n                            </span>\n                          </span>\n                        </div>\n                      </div>\n\n                      {/* Desktop Right Time & Hover Actions */}\n                      <div className=\"hidden sm:flex absolute right-6 top-1/2 -translate-y-1/2 items-center justify-end w-24\">\n                        <span className={cn(\n                          \"text-xs font-medium group-hover:hidden whitespace-nowrap\",\n                          variant === \"liquid-glass\" ? \"text-white/70\" : \"text-muted-foreground\"\n                        )}>\n                          {email.time}\n                        </span>\n                        <div className=\"hidden group-hover:flex items-center gap-2 animate-in fade-in slide-in-from-right-2 duration-200\">\n                          <button\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              deleteEmail(email.id);\n                            }}\n                            className={cn(\n                              \"p-2 rounded-md transition-colors shadow-sm cursor-pointer\",\n                              variant === \"liquid-glass\"\n                                ? \"bg-white/20 border border-white/20 text-white hover:bg-rose-500/80 hover:text-white backdrop-blur-md\"\n                                : \"hover:bg-rose-50 dark:hover:bg-rose-500/10 text-muted-foreground hover:text-rose-500 bg-card border border-border\"\n                            )}\n                          >\n                            <Trash2 className=\"w-4 h-4\" />\n                          </button>\n                          <button\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              toggleRead(email.id);\n                            }}\n                            className={cn(\n                              \"p-2 rounded-md transition-colors shadow-sm cursor-pointer\",\n                              variant === \"liquid-glass\"\n                                ? \"bg-white/20 border border-white/20 text-white hover:bg-white/30 backdrop-blur-md\"\n                                : \"text-muted-foreground bg-card border border-border\",\n                              theme.focusRing,\n                            )}\n                          >\n                            {email.isRead ? (\n                              <Mail className=\"w-4 h-4\" />\n                            ) : (\n                              <MailOpen className=\"w-4 h-4\" />\n                            )}\n                          </button>\n                        </div>\n                      </div>\n\n                      {/* Mobile Star Button anchored at bottom-right (Gmail Reference) */}\n                      <button\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          toggleStar(email.id);\n                        }}\n                        className=\"sm:hidden absolute bottom-3 right-4 cursor-pointer text-foreground/25 hover:text-amber-400 transition-colors p-1\"\n                        title=\"Star email\"\n                      >\n                        <Star\n                          className={`w-5 h-5 ${email.isStarred ? \"fill-amber-400 text-amber-400\" : \"\"}`}\n                        />\n                      </button>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <div className=\"flex flex-col items-center justify-center h-full text-center p-8\">\n                  <div\n                    className={cn(\n                      \"w-16 h-16 flex items-center justify-center mb-4 transition-all\",\n                      variant === \"liquid-glass\"\n                        ? \"rounded-2xl border bg-white/20 border-white/30 text-white backdrop-blur-md shadow-sm\"\n                        : variant === \"glass\"\n                          ? \"rounded-2xl border bg-white/40 dark:bg-white/10 border-black/10 dark:border-white/10 text-foreground backdrop-blur-md shadow-sm\"\n                          : \"bg-muted rounded-full\",\n                    )}\n                  >\n                    <Mail\n                      className={cn(\n                        \"w-8 h-8\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white\"\n                          : \"text-muted-foreground\",\n                      )}\n                    />\n                  </div>\n                  <h3\n                    className={cn(\n                      \"text-lg font-semibold mb-1\",\n                      variant === \"liquid-glass\"\n                        ? \"text-white\"\n                        : \"text-foreground\",\n                    )}\n                  >\n                    Nothing to see here\n                  </h3>\n                  <p\n                    className={cn(\n                      \"text-sm\",\n                      variant === \"liquid-glass\"\n                        ? \"text-white/70\"\n                        : \"text-muted-foreground\",\n                    )}\n                  >\n                    No emails found in {activeLabel || activeFolder}.\n                  </p>\n                </div>\n              )}\n            </div>\n          </>\n        ) : (\n          // === EMAIL DETAIL VIEW ===\n          <div className=\"flex flex-col h-full bg-transparent\">\n            <header\n              className={cn(\n                \"h-[72px] flex items-center justify-between px-4 sm:px-6 shrink-0 flex-none z-10 transition-colors duration-300\",\n                styles.header,\n              )}\n            >\n              <div className=\"flex items-center gap-2 sm:gap-3 overflow-hidden min-w-0\">\n                <button\n                  className=\"lg:hidden p-2 -ml-2 text-muted-foreground hover:text-foreground shrink-0 cursor-pointer\"\n                  onClick={() => setIsSidebarOpen(true)}\n                >\n                  <Menu className=\"w-5 h-5\" />\n                </button>\n                <button\n                  onClick={() => setActiveEmailId(null)}\n                  className={cn(\n                    \"flex items-center gap-1 p-1.5 sm:p-2 -ml-1 sm:-ml-2 rounded-md transition-colors shrink-0 cursor-pointer text-xs sm:text-sm font-semibold\",\n                    variant === \"liquid-glass\"\n                      ? \"text-white/80 hover:text-white hover:bg-white/10\"\n                      : \"text-muted-foreground hover:text-foreground hover:bg-muted\"\n                  )}\n                >\n                  <ChevronLeft className=\"w-5 h-5\" />\n                  <span>Back</span>\n                </button>\n                <div className=\"flex flex-wrap items-center gap-1.5 shrink-0\">\n                  {activeEmail?.labels?.map((lbl, i) => (\n                    <span\n                      key={i}\n                      className={`px-2 py-0.5 sm:px-2.5 rounded-md text-[10px] sm:text-[11px] font-semibold tracking-wide uppercase ${lbl.pill}`}\n                    >\n                      {lbl.name}\n                    </span>\n                  ))}\n                </div>\n              </div>\n\n              <div className={cn(\n                \"flex items-center gap-1 shrink-0 ml-2 sm:ml-4\",\n                variant === \"liquid-glass\" ? \"text-white/80\" : \"text-muted-foreground\"\n              )}>\n                <button\n                  onClick={handlePrevEmail}\n                  disabled={activeEmailIndex === 0}\n                  className={cn(\n                    \"p-1.5 sm:p-2 rounded-md disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\",\n                    variant === \"liquid-glass\"\n                      ? \"hover:bg-white/10 hover:text-white text-white/80\"\n                      : \"hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <ChevronLeft className=\"w-5 h-5\" />\n                </button>\n                <button\n                  onClick={handleNextEmail}\n                  disabled={activeEmailIndex === filteredEmails.length - 1}\n                  className={cn(\n                    \"p-1.5 sm:p-2 rounded-md disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\",\n                    variant === \"liquid-glass\"\n                      ? \"hover:bg-white/10 hover:text-white text-white/80\"\n                      : \"hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <ChevronRight className=\"w-5 h-5\" />\n                </button>\n              </div>\n            </header>\n\n            <div\n              className={cn(\n                \"flex items-center justify-between px-3 sm:px-6 py-2.5 sm:py-3 shrink-0 transition-colors duration-300\",\n                variant === \"liquid-glass\"\n                  ? \"bg-white/10 dark:bg-black/20 border-b border-white/15 dark:border-white/10 backdrop-blur-md text-white\"\n                  : variant === \"glass\"\n                    ? \"bg-white/10 dark:bg-black/5 border-b border-black/10 dark:border-white/10\"\n                    : \"border-b border-border bg-muted/50\",\n              )}\n            >\n              <div className=\"flex items-center gap-1 sm:gap-2\">\n                <button\n                  onClick={() => activeEmail && deleteEmail(activeEmail.id)}\n                  className=\"p-1.5 sm:p-2 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-md transition-colors cursor-pointer\"\n                  title=\"Delete\"\n                >\n                  <Trash2 className=\"w-4 h-4 sm:w-[18px] sm:h-[18px]\" />\n                </button>\n                <button\n                  onClick={() => {\n                    if (activeEmail) {\n                      setActiveEmailId(null);\n                      toggleRead(activeEmail.id);\n                    }\n                  }}\n                  className={cn(\n                    \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer\",\n                    theme.focusRing,\n                  )}\n                  title=\"Mark Unread\"\n                >\n                  <Mail className=\"w-4 h-4 sm:w-[18px] sm:h-[18px]\" />\n                </button>\n                <button\n                  onClick={() => {\n                    setActiveEmailId(null);\n                    moveSelectedToFolder(\"archive\");\n                  }}\n                  className=\"p-1.5 sm:p-2 hover:text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-500/10 rounded-md transition-colors cursor-pointer\"\n                  title=\"Archive\"\n                >\n                  <Archive className=\"w-4 h-4 sm:w-[18px] sm:h-[18px]\" />\n                </button>\n              </div>\n              <div className=\"flex items-center gap-1 sm:gap-2\">\n                <button\n                  onClick={() => activeEmail && toggleStar(activeEmail.id)}\n                  className={cn(\n                    \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer\",\n                    variant === \"liquid-glass\" ? \"hover:bg-white/10\" : \"hover:bg-muted\"\n                  )}\n                >\n                  <Star\n                    className={`w-4 h-4 sm:w-[18px] sm:h-[18px] ${activeEmail?.isStarred ? \"fill-amber-400 text-amber-400\" : \"\"}`}\n                  />\n                </button>\n                <button className={cn(\n                  \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer\",\n                  variant === \"liquid-glass\" ? \"hover:bg-white/10 hover:text-white\" : \"hover:bg-muted hover:text-foreground\"\n                )}>\n                  <MoreVertical className=\"w-4 h-4 sm:w-[18px] sm:h-[18px]\" />\n                </button>\n              </div>\n            </div>\n\n            <div className=\"flex-1 overflow-y-auto p-4 sm:p-8 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\">\n              <div className=\"max-w-3xl mx-auto\">\n                <h1 className=\"text-lg sm:text-2xl font-semibold text-foreground mb-4 sm:mb-8 break-words leading-snug\">\n                  {activeEmail?.subject}\n                </h1>\n                <div className={cn(\n                  \"flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4 mb-6 sm:mb-8 pb-4 sm:pb-0\",\n                  variant === \"liquid-glass\"\n                    ? \"border-b sm:border-b-0 border-white/15\"\n                    : \"border-b sm:border-b-0 border-border\"\n                )}>\n                  <div className=\"flex items-center gap-3 sm:gap-4 min-w-0\">\n                    <BulletproofAvatar\n                      src={activeEmail?.avatar}\n                      initials={activeEmail?.initials}\n                      color={activeEmail?.color}\n                      size={40}\n                    />\n                    <div className=\"min-w-0 flex-1\">\n                      <h3 className=\"text-sm sm:text-base font-semibold text-foreground truncate\">\n                        {activeEmail?.sender}\n                      </h3>\n                      <p className=\"text-xs sm:text-sm text-muted-foreground font-medium truncate\">\n                        to me{\" \"}\n                        <span className=\"text-foreground/20 mx-1\">\n                          •\n                        </span>{\" \"}\n                        <span className=\"font-normal text-muted-foreground\">\n                          {activeEmail?.email}\n                        </span>\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 text-xs sm:text-sm font-medium text-muted-foreground shrink-0\">\n                    <span>{activeEmail?.fullDate}</span>\n                  </div>\n                </div>\n\n                <div className=\"text-sm sm:text-[15px] text-foreground leading-relaxed whitespace-pre-wrap mb-8 sm:mb-10 font-medium break-words\">\n                  {activeEmail?.body}\n                </div>\n\n                {activeEmail?.attachments &&\n                  activeEmail.attachments.length > 0 && (\n                    <div\n                      className={cn(\n                        \"pt-6\",\n                        variant === \"liquid-glass\"\n                          ? \"border-t border-white/15\"\n                          : variant === \"glass\"\n                            ? \"border-t border-black/10 dark:border-white/10\"\n                            : \"border-t border-border\",\n                      )}\n                    >\n                      <p className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4\">\n                        Attachments ({activeEmail.attachments.length})\n                      </p>\n                      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4\">\n                        {activeEmail.attachments.map((file, idx) => (\n                          <div\n                            key={idx}\n                            className={cn(\n                              \"flex items-center gap-3 sm:gap-4 p-3 rounded-xl cursor-pointer transition-all group min-w-0\",\n                              variant === \"liquid-glass\"\n                                ? \"bg-white/10 dark:bg-white/5 border border-white/20 dark:border-white/10 hover:bg-white/20 dark:hover:bg-white/10\"\n                                : variant === \"glass\"\n                                  ? \"bg-white/40 dark:bg-white/5 border border-black/10 dark:border-white/10 hover:bg-white/60 dark:hover:bg-white/10\"\n                                  : \"border border-border bg-muted hover:shadow-sm\",\n                              theme.focusRing,\n                            )}\n                          >\n                            <div className=\"w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center shrink-0\">\n                              <FileText className=\"w-4 h-4 sm:w-5 sm:h-5 text-rose-600 dark:text-rose-400\" />\n                            </div>\n                            <div className=\"min-w-0 flex-1\">\n                              <p\n                                className={cn(\n                                  \"text-xs sm:text-sm font-semibold text-foreground truncate transition-colors\",\n                                  `group-hover:${theme.text}`,\n                                )}\n                              >\n                                {file.name}\n                              </p>\n                              <p className=\"text-[11px] sm:text-xs font-medium text-muted-foreground\">\n                                {file.size}\n                              </p>\n                            </div>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n\n                <div className=\"mt-8 sm:mt-10 flex flex-row gap-3\">\n                  <button\n                    onClick={() => setIsComposeOpen(true)}\n                    className={cn(\n                      \"flex-1 sm:flex-none cursor-pointer px-5 sm:px-6 py-2.5 font-semibold text-xs sm:text-sm rounded-lg transition-colors shadow-sm text-center justify-center flex items-center\",\n                      variant === \"liquid-glass\"\n                        ? \"bg-white/15 dark:bg-white/10 hover:bg-white/25 dark:hover:bg-white/20 text-white border border-white/25 dark:border-white/15 backdrop-blur-md\"\n                        : variant === \"glass\"\n                          ? \"bg-black/5 dark:bg-white/10 hover:bg-black/10 dark:hover:bg-white/20 text-foreground dark:text-white border border-black/10 dark:border-white/10\"\n                          : \"bg-muted hover:bg-muted text-foreground\",\n                    )}\n                  >\n                    Reply\n                  </button>\n                  <button\n                    onClick={() => setIsComposeOpen(true)}\n                    className={cn(\n                      \"flex-1 sm:flex-none cursor-pointer px-5 sm:px-6 py-2.5 font-semibold text-xs sm:text-sm rounded-lg transition-colors shadow-sm text-center justify-center flex items-center\",\n                      variant === \"liquid-glass\"\n                        ? \"bg-white/15 dark:bg-white/10 hover:bg-white/25 dark:hover:bg-white/20 text-white border border-white/25 dark:border-white/15 backdrop-blur-md\"\n                        : variant === \"glass\"\n                          ? \"bg-black/5 dark:bg-white/10 hover:bg-black/10 dark:hover:bg-white/20 text-foreground dark:text-white border border-black/10 dark:border-white/10\"\n                          : \"bg-muted hover:bg-muted text-foreground\",\n                    )}\n                  >\n                    Forward\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </main>\n\n      {/* --- COMPOSE MODAL --- */}\n      {isComposeOpen && (\n        <div\n          className=\"absolute inset-0 z-50 flex items-center justify-center sm:items-end sm:justify-end bg-black/50 backdrop-blur-sm p-2.5 sm:p-6 cursor-pointer rounded-[inherit] overflow-hidden\"\n          onClick={() => setIsComposeOpen(false)}\n        >\n          <div\n            className={cn(\n              \"w-full max-w-[calc(100%-0.5rem)] sm:w-[600px] sm:max-w-[600px] max-h-[calc(100%-1rem)] sm:max-h-[calc(100%-2rem)] flex flex-col relative overflow-hidden animate-in slide-in-from-bottom-6 duration-300 cursor-default isolate [contain:paint] [transform:translateZ(0)] shadow-2xl\",\n              variant === \"liquid-glass\"\n                ? \"rounded-[20px] sm:rounded-[28px] text-white shadow-[0_25px_60px_rgba(0,0,0,0.5)] border-0\"\n                : cn(\"rounded-2xl\", styles.composeModal),\n            )}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {variant === \"liquid-glass\" && (\n              <>\n                {/* Inner Clipping Container for Modal Liquid Background Stack */}\n                <div className=\"absolute inset-0 overflow-hidden rounded-[20px] sm:rounded-[28px] pointer-events-none z-0\">\n                  {/* Modal Layer 0: Liquid SVG Displaced Wave Background */}\n                  <div\n                    className=\"absolute -inset-10\"\n                    style={{\n                      backgroundImage:\n                        'url(\"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\")',\n                      backgroundSize: \"cover\",\n                      backgroundPosition: \"center\",\n                      filter: \"url(#glass-blur)\",\n                      transform: \"scale(1.1)\",\n                    }}\n                  />\n\n                  {/* Modal Layer 1: Contrast overlay & soft backdrop blur */}\n                  <div className=\"absolute inset-0 bg-black/35 dark:bg-black/55 backdrop-blur-[2px]\" />\n\n                  {/* Modal Layer 2: Ambient Drop Shadow & Subtle Glow */}\n                  <div\n                    className=\"absolute inset-0 rounded-[20px] sm:rounded-[28px]\"\n                    style={{\n                      boxShadow:\n                        \"0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.08)\",\n                    }}\n                  />\n                </div>\n\n                {/* Modal Layer 3: Specular Inner Border Highlight */}\n                <div\n                  className=\"absolute inset-0 z-30 pointer-events-none rounded-[20px] sm:rounded-[28px] border border-white/40 dark:border-white/15\"\n                  style={{\n                    boxShadow:\n                      \"inset 2px 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 2px 0 rgba(255, 255, 255, 0.3)\",\n                  }}\n                />\n              </>\n            )}\n\n            {/* Modal Layer 4: Content */}\n            <div className=\"relative z-40 flex flex-col flex-1 min-h-0 overflow-hidden\">\n              <div\n                className={cn(\n                  \"flex items-center justify-between px-3.5 sm:px-5 py-2.5 sm:py-3.5 border-b shrink-0\",\n                  variant === \"liquid-glass\"\n                    ? \"bg-white/10 dark:bg-white/5 border-white/20 dark:border-white/15 text-white\"\n                    : variant === \"glass\"\n                      ? \"bg-black/5 dark:bg-black/20 border-black/10 dark:border-white/10\"\n                      : \"bg-muted border-border\",\n                )}\n              >\n                <div className=\"flex items-center gap-2 sm:gap-2.5\">\n                  {variant === \"liquid-glass\" && (\n                    <div className=\"w-6 h-6 sm:w-7 sm:h-7 rounded-lg flex items-center justify-center border bg-white/20 border-white/30 text-white backdrop-blur-md\">\n                      <Edit3 className=\"w-3 h-3 sm:w-3.5 sm:h-3.5\" />\n                    </div>\n                  )}\n                  <h3 className=\"font-semibold text-xs sm:text-sm text-foreground\">\n                    New Message\n                  </h3>\n                </div>\n                <button\n                  onClick={() => setIsComposeOpen(false)}\n                  className={cn(\n                    \"p-1 rounded-md transition-colors cursor-pointer\",\n                    variant === \"liquid-glass\"\n                      ? \"text-white/80 hover:text-white hover:bg-white/10\"\n                      : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                  )}\n                >\n                  <X className=\"w-4 h-4\" />\n                </button>\n              </div>\n\n              <form onSubmit={handleSendEmail} className=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n                <div\n                  className={cn(\n                    \"px-3.5 sm:px-5 py-2 sm:py-2.5 border-b flex items-center gap-3 sm:gap-4 shrink-0\",\n                    variant === \"liquid-glass\"\n                      ? \"border-white/15 dark:border-white/10\"\n                      : variant === \"glass\"\n                        ? \"border-black/10 dark:border-white/10\"\n                        : \"border-border\",\n                  )}\n                >\n                  <span className={cn(\n                    \"text-xs sm:text-sm font-medium shrink-0\",\n                    variant === \"liquid-glass\" ? \"text-white/70\" : \"text-muted-foreground\"\n                  )}>To</span>\n                  <input\n                    required\n                    type=\"email\"\n                    name=\"to\"\n                    placeholder=\"recipient@example.com\"\n                    className={cn(\n                      \"flex-1 min-w-0 bg-transparent text-xs sm:text-sm font-medium outline-none text-foreground\",\n                      variant === \"liquid-glass\" ? \"placeholder:text-white/40\" : \"placeholder:text-muted-foreground/50\"\n                    )}\n                  />\n                </div>\n                <div\n                  className={cn(\n                    \"px-3.5 sm:px-5 py-2 sm:py-2.5 border-b flex items-center gap-3 sm:gap-4 shrink-0\",\n                    variant === \"liquid-glass\"\n                      ? \"border-white/15 dark:border-white/10\"\n                      : variant === \"glass\"\n                        ? \"border-black/10 dark:border-white/10\"\n                        : \"border-border\",\n                  )}\n                >\n                  <span className={cn(\n                    \"text-xs sm:text-sm font-medium shrink-0\",\n                    variant === \"liquid-glass\" ? \"text-white/70\" : \"text-muted-foreground\"\n                  )}>\n                    Subject\n                  </span>\n                  <input\n                    required\n                    type=\"text\"\n                    name=\"subject\"\n                    placeholder=\"Subject line\"\n                    className={cn(\n                      \"flex-1 min-w-0 bg-transparent text-xs sm:text-sm font-semibold outline-none text-foreground\",\n                      variant === \"liquid-glass\" ? \"placeholder:text-white/40\" : \"placeholder:text-muted-foreground/50\"\n                    )}\n                  />\n                </div>\n\n                <div className=\"p-3 sm:p-5 flex-1 min-h-[100px] sm:min-h-[180px] overflow-y-auto flex flex-col\">\n                  <textarea\n                    required\n                    name=\"message\"\n                    placeholder=\"Type your message here...\"\n                    className={cn(\n                      \"w-full flex-1 bg-transparent text-xs sm:text-[15px] outline-none resize-none text-foreground font-medium min-h-[80px] leading-relaxed\",\n                      variant === \"liquid-glass\" ? \"placeholder:text-white/40\" : \"placeholder:text-muted-foreground\"\n                    )}\n                  ></textarea>\n                </div>\n\n                <div\n                  className={cn(\n                    \"px-3 sm:px-5 py-2 sm:py-2.5 border-t flex items-center justify-between gap-2 shrink-0 flex-nowrap\",\n                    variant === \"liquid-glass\"\n                      ? \"bg-white/10 dark:bg-black/30 border-white/15 dark:border-white/10\"\n                      : variant === \"glass\"\n                        ? \"bg-black/5 dark:bg-black/20 border-black/10 dark:border-white/10\"\n                        : \"bg-muted border-border\",\n                  )}\n                >\n                  <div className=\"flex items-center flex-nowrap shrink-0 gap-0.5 sm:gap-1\">\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer shrink-0 flex items-center justify-center\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white/70 hover:text-white hover:bg-white/10\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                      )}\n                    >\n                      <Bold className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer shrink-0 flex items-center justify-center\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white/70 hover:text-white hover:bg-white/10\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                      )}\n                    >\n                      <Italic className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer shrink-0 flex items-center justify-center\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white/70 hover:text-white hover:bg-white/10\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                      )}\n                    >\n                      <LinkIcon className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                    </button>\n                    <div\n                      className={cn(\n                        \"w-px h-4 sm:h-5 mx-0.5 sm:mx-1 shrink-0\",\n                        variant === \"liquid-glass\"\n                          ? \"bg-white/20\"\n                          : variant === \"glass\"\n                            ? \"bg-black/15 dark:bg-white/20\"\n                            : \"bg-muted\",\n                      )}\n                    ></div>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer shrink-0 flex items-center justify-center\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white/70 hover:text-white hover:bg-white/10\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                      )}\n                    >\n                      <Paperclip className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"p-1.5 sm:p-2 rounded-md transition-colors cursor-pointer shrink-0 flex items-center justify-center\",\n                        variant === \"liquid-glass\"\n                          ? \"text-white/70 hover:text-white hover:bg-white/10\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n                      )}\n                    >\n                      <ImageIcon className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                    </button>\n                  </div>\n                  <button\n                    type=\"submit\"\n                    className={cn(\n                      \"cursor-pointer flex items-center gap-1.5 sm:gap-2 px-3.5 sm:px-5 py-1.5 sm:py-2.5 rounded-xl text-xs sm:text-sm font-semibold transition-all active:scale-95 shadow-md shrink-0 ml-auto\",\n                      theme.bg,\n                    )}\n                  >\n                    Send <Send className=\"w-3 h-3 sm:w-3.5 sm:h-3.5\" />\n                  </button>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/Email.tsx"
    }
  ],
  "docs": "Named exports: EmailApp, plus Email, EmailLabel and Attachment types. The largest block in the registry — a complete application layout with demo data to replace, not a single element. Variants: default | minimal | glass.",
  "categories": [
    "communication"
  ],
  "type": "registry:component"
}