organify-ui 0.2.0 → 0.2.2

package/dist/chunk-2Y3W6JSG.js

@@ -0,0 +1,4143 @@
+import { cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ScrollArea, Skeleton, Avatar, AvatarFallback, Badge, useOrganifyApi, useOrganifyUser, useOrganifyWorkspace, useOrganifyGql } from './chunk-B3N3YGMA.js';
+import { OrgPlus, OrgSearch, OrgComment, OrgClose, OrgEdit, OrgTeam, OrgGlobe, OrgLock, OrgCheckCircle, OrgError, OrgWarning, OrgInfo, OrgChevronDown, OrgChevronRight, OrgDoor, OrgTrash, OrgCheck, OrgFolder, OrgChevronLeft } from './chunk-AHMA7OV3.js';
+import * as React7 from 'react';
+import React7__default, { useState, useCallback, useEffect } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'framer-motion';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ChevronDown, ChevronUp, Check, XIcon } from 'lucide-react';
+import { Drawer as Drawer$1 } from 'vaul';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+var orgLoaderVariants = cva("relative inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "h-4 w-4",
+      sm: "h-6 w-6",
+      default: "h-10 w-10",
+      lg: "h-16 w-16",
+      xl: "h-24 w-24",
+      full: "h-32 w-32"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var diamondSizes = {
+  xs: 3,
+  sm: 4,
+  default: 6,
+  lg: 8,
+  xl: 10,
+  full: 14
+};
+var strokeWidths = {
+  xs: 1.5,
+  sm: 1.5,
+  default: 2,
+  lg: 2,
+  xl: 2.5,
+  full: 2.5
+};
+function OrgLoader({
+  size = "default",
+  caption,
+  overlay = false,
+  className,
+  ...props
+}) {
+  const s = size ?? "default";
+  const d = diamondSizes[s];
+  const sw = strokeWidths[s];
+  const loader = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-3",
+        overlay && "pointer-events-none",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(orgLoaderVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { className: "h-full w-full", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "18",
+              className: "stroke-current opacity-10 dark:opacity-[0.08]",
+              strokeWidth: sw
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "18",
+              stroke: "url(#org-loader-gradient)",
+              strokeWidth: sw,
+              strokeLinecap: "round",
+              strokeDasharray: "85 28.27",
+              className: "origin-center",
+              style: { animation: "org-loader-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsx("g", { style: { animation: "org-loader-orbit 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }, className: "origin-center", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 24 - d / 2,
+              y: 6 - d / 2,
+              width: d,
+              height: d,
+              rx: d * 0.15,
+              transform: `rotate(45 24 6)`,
+              fill: "url(#org-loader-diamond)",
+              className: "drop-shadow-[0_0_6px_rgba(79,57,246,0.5)]"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "2",
+              className: "fill-current opacity-20",
+              style: { animation: "org-loader-pulse 1.4s ease-in-out infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: "org-loader-gradient", x1: "6", y1: "6", x2: "42", y2: "42", gradientUnits: "userSpaceOnUse", children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#4F39F6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#5b42f2" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#241979" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: "org-loader-diamond", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#4F39F6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#241979" })
+            ] })
+          ] })
+        ] }) }),
+        caption && /* @__PURE__ */ jsx("span", { className: cn(
+          "font-mono uppercase tracking-widest text-current opacity-40",
+          s === "xs" || s === "sm" ? "text-[8px]" : "text-[10px]"
+        ), children: caption })
+      ]
+    }
+  );
+  if (overlay) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm dark:bg-black/60", children: loader });
+  }
+  return loader;
+}
+function OrgLoaderInline({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("h-4 w-4", className),
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "status",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "18", className: "stroke-current opacity-10", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "24",
+            cy: "24",
+            r: "18",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "85 28.27",
+            className: "origin-center",
+            style: { animation: "org-loader-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { style: { animation: "org-loader-orbit 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }, className: "origin-center", children: /* @__PURE__ */ jsx("rect", { x: "21", y: "3", width: "6", height: "6", rx: "1", transform: "rotate(45 24 6)", fill: "currentColor" }) })
+      ]
+    }
+  );
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-wide uppercase rounded-sm transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-gradient-to-br from-primary-light to-primary !text-white hover:shadow-glow shadow-glow-primary",
+        secondary: "bg-transparent border border-glass-border-strong text-org-text hover:border-primary-light hover:bg-glass-highlight",
+        ghost: "bg-transparent text-org-text-secondary hover:bg-glass-highlight hover:text-org-text rounded-sm",
+        destructive: "bg-error !text-white hover:bg-error/90 shadow-glow-error",
+        outline: "bg-transparent border border-glass-border-strong text-org-text hover:bg-glass-highlight hover:border-primary-light",
+        link: "text-primary-light underline-offset-4 hover:underline rounded-none",
+        // ─── Cream Light theme buttons ─────────────
+        cream: "bg-primary text-white hover:shadow-cream-btn-primary hover:translate-y-[-1px] shadow-cream-btn",
+        "cream-secondary": "bg-transparent border border-primary text-primary hover:bg-primary/[0.03]"
+      },
+      size: {
+        default: "px-8 py-3",
+        sm: "px-4 py-2 text-xs",
+        lg: "px-10 py-4 text-base",
+        icon: "h-10 w-10",
+        "icon-sm": "h-8 w-8",
+        "icon-lg": "h-12 w-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React7.forwardRef(
+  ({ className, variant, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(OrgLoaderInline, { className: "shrink-0" }),
+          children
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var inputVariants = cva(
+  "flex w-full bg-glass-highlight backdrop-blur-md border border-glass-border rounded-sm px-4 py-3 text-sm font-light text-org-text transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-org-text-muted focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10),0_0_20px_rgba(79,57,246,0.08)]",
+        flat: "rounded-sm focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10)]",
+        rounded: "rounded-sm focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10)]",
+        error: "border-error/30 bg-error/5 text-red-100 placeholder:text-red-500/30 focus:border-error focus:shadow-[0_0_0_3px_rgba(224,17,95,0.10)]",
+        // ─── Cream Light theme (explicit light styling) ─────────────────────
+        cream: "bg-white/60 border-[rgba(36,25,121,0.06)] text-neutral-900 placeholder:text-neutral-400 focus:border-primary/40 focus:bg-white/80 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.08)] backdrop-blur-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Input = React7.forwardRef(
+  ({ className, variant, type, label, error, labelPosition = "left", ...props }, ref) => {
+    const id = React7.useId();
+    const effectiveVariant = error ? "error" : variant;
+    return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "absolute -top-3 z-10 px-2 text-label uppercase tracking-widest",
+            effectiveVariant === "cream" ? "bg-cream-base" : "bg-surface",
+            labelPosition === "left" ? "left-0 ml-2" : "right-0 mr-2",
+            error ? "text-error" : "text-primary-light"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type,
+          className: cn(inputVariants({ variant: effectiveVariant, className })),
+          ref,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${id}-error` : void 0,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { id: `${id}-error`, className: "mt-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-mono-xs text-error", children: error }) })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function getRoomIcon(room) {
+  if (room.type === "DIRECT") return /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4" });
+  if (room.visibility === "PRIVATE") return /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" });
+  return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "#" });
+}
+function ChatSidebar({
+  rooms,
+  activeRoomId,
+  loading,
+  onSelectRoom,
+  onCreateRoom,
+  onMobileClose
+}) {
+  const [search, setSearch] = React7.useState("");
+  const [channelsOpen, setChannelsOpen] = React7.useState(true);
+  const [dmsOpen, setDmsOpen] = React7.useState(true);
+  const filtered = React7.useMemo(
+    () => search ? rooms.filter(
+      (r) => r.name?.toLowerCase().includes(search.toLowerCase()) || r.slug?.toLowerCase().includes(search.toLowerCase())
+    ) : rooms,
+    [rooms, search]
+  );
+  const channels = filtered.filter((r) => r.type === "CHANNEL");
+  const dms = filtered.filter((r) => r.type === "DIRECT");
+  const handleSelect = (roomId) => {
+    onSelectRoom(roomId);
+    onMobileClose?.();
+  };
+  const renderRoom = (room) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => handleSelect(room.id),
+      className: cn(
+        "flex items-center gap-2.5 w-full px-2.5 py-2 rounded-sm text-left text-sm transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)]",
+        "active:scale-[0.98]",
+        room.id === activeRoomId ? "bg-primary/12 text-primary-light" : "text-theme-secondary hover:bg-theme-subtle hover:text-theme"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center h-7 w-7 rounded-sm text-sm shrink-0",
+              room.id === activeRoomId ? "bg-primary/20 text-primary-light" : "bg-theme-subtle-10 text-theme-muted"
+            ),
+            children: getRoomIcon(room)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-[13px] truncate", children: room.name || "Sem nome" }) }),
+        room.unreadCount > 0 && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "primary",
+            className: "text-[10px] px-1.5 py-0 min-w-[18px] h-[18px] flex items-center justify-center rounded-full animate-in zoom-in-50 duration-[400ms]",
+            children: room.unreadCount > 99 ? "99+" : room.unreadCount
+          }
+        )
+      ]
+    },
+    room.id
+  );
+  const renderSection = (title, items, isOpen, toggle) => /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: toggle,
+        className: "flex items-center gap-1 w-full px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-theme-muted hover:text-theme-secondary transition-colors",
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(OrgChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(OrgChevronRight, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] font-normal", children: items.length })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "space-y-0.5 animate-in fade-in-0 slide-in-from-top-1 duration-[400ms]", children: items.map(renderRoom) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full border-r border-theme-subtle bg-theme-surface", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-theme-subtle", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-theme", children: "Chat" }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onCreateRoom,
+            className: "h-7 w-7 p-0 text-theme-muted hover:text-primary-light hover:bg-primary/10 transition-colors",
+            children: /* @__PURE__ */ jsx(OrgPlus, { className: "w-4 h-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Nova conversa" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(OrgSearch, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-muted" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          variant: "flat",
+          placeholder: "Pesquisar...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: "h-8 text-xs bg-theme-subtle border-theme-subtle rounded-sm pl-8"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", className: "h-7 w-7 shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1.5", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }) })
+    ] }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-theme-muted", children: [
+      /* @__PURE__ */ jsx(OrgSearch, { className: "w-6 h-6 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: search ? "Sem resultados" : "Sem conversas" }),
+      !search && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCreateRoom,
+          className: "mt-3 text-xs text-primary-light/70 hover:text-primary-light transition-colors",
+          children: "Criar primeira conversa \u2192"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      channels.length > 0 && renderSection("Canais", channels, channelsOpen, () => setChannelsOpen(!channelsOpen)),
+      dms.length > 0 && renderSection("Mensagens Diretas", dms, dmsOpen, () => setDmsOpen(!dmsOpen))
+    ] }) }) })
+  ] });
+}
+var actionBarVariants = {
+  hidden: {
+    opacity: 0,
+    y: 8,
+    scale: 0.95
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      type: "spring",
+      stiffness: 400,
+      damping: 25,
+      staggerChildren: 0.03
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: 4,
+    scale: 0.98,
+    transition: { duration: 0.15 }
+  }
+};
+var actionItemVariants = {
+  hidden: { opacity: 0, scale: 0.8 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { type: "spring", stiffness: 500, damping: 30 }
+  }
+};
+var replyPreviewVariants = {
+  hidden: { opacity: 0, x: -10, height: 0 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    height: "auto",
+    transition: { duration: 0.2, ease: "easeOut" }
+  }
+};
+var reactionVariants = {
+  hidden: { scale: 0, opacity: 0 },
+  visible: {
+    scale: 1,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 500, damping: 25 }
+  },
+  tap: { scale: 1.2 }
+};
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString("pt-BR", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function getInitials(name) {
+  if (!name) return "??";
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function groupReactions(reactions) {
+  const map = /* @__PURE__ */ new Map();
+  reactions.forEach((r) => {
+    const existing = map.get(r.emoji);
+    if (existing) {
+      existing.count++;
+      existing.users.push(r.userId);
+    } else {
+      map.set(r.emoji, { count: 1, users: [r.userId] });
+    }
+  });
+  return Array.from(map.entries());
+}
+function truncate(str, len) {
+  if (str.length <= len) return str;
+  return str.slice(0, len) + "...";
+}
+var quickEmojis = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
+function renderContent(content) {
+  const parts = content.split(/(@\w+)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("@")) {
+      return /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "text-primary-light font-medium hover:underline cursor-pointer",
+          whileHover: { scale: 1.02 },
+          whileTap: { scale: 0.98 },
+          children: part
+        },
+        i
+      );
+    }
+    return part;
+  });
+}
+function ActionBar({
+  show,
+  onClose,
+  onEdit,
+  onReply,
+  onDelete,
+  onReact,
+  canEdit,
+  canDelete,
+  position
+}) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: actionBarVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      className: cn(
+        "absolute z-10 -top-12 flex items-center gap-1 p-1.5 rounded-sm",
+        "bg-theme-surface/95 backdrop-blur-md border border-theme-subtle shadow-lg",
+        position === "right" ? "right-0" : "left-0"
+      ),
+      children: [
+        onReact && /* @__PURE__ */ jsxs(Fragment, { children: [
+          quickEmojis.slice(0, 4).map((emoji) => /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              variants: actionItemVariants,
+              whileHover: { scale: 1.15 },
+              whileTap: { scale: 0.9 },
+              onClick: () => {
+                onReact(emoji);
+                onClose();
+              },
+              className: "w-8 h-8 flex items-center justify-center rounded-sm hover:bg-theme-highlight text-base transition-colors",
+              children: emoji
+            },
+            emoji
+          )),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-theme-subtle mx-1" })
+        ] }),
+        onReply && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              variants: actionItemVariants,
+              whileHover: { scale: 1.1 },
+              whileTap: { scale: 0.9 },
+              onClick: () => {
+                onReply();
+                onClose();
+              },
+              className: "p-2 rounded-sm text-theme-muted hover:text-theme hover:bg-theme-highlight transition-colors",
+              children: /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Responder" })
+        ] }) }),
+        canEdit && onEdit && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              variants: actionItemVariants,
+              whileHover: { scale: 1.1 },
+              whileTap: { scale: 0.9 },
+              onClick: () => {
+                onEdit();
+                onClose();
+              },
+              className: "p-2 rounded-sm text-theme-muted hover:text-theme hover:bg-theme-highlight transition-colors",
+              children: /* @__PURE__ */ jsx(OrgEdit, { className: "w-4 h-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Editar" })
+        ] }) }),
+        canDelete && onDelete && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              variants: actionItemVariants,
+              whileHover: { scale: 1.1 },
+              whileTap: { scale: 0.9 },
+              onClick: () => {
+                onDelete();
+                onClose();
+              },
+              className: "p-2 rounded-sm text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 transition-colors",
+              children: /* @__PURE__ */ jsx(OrgTrash, { className: "w-4 h-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Excluir" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            variants: actionItemVariants,
+            whileHover: { scale: 1.1 },
+            whileTap: { scale: 0.9 },
+            onClick: onClose,
+            className: "p-2 rounded-sm text-theme-muted hover:text-theme hover:bg-theme-highlight transition-colors md:hidden",
+            children: /* @__PURE__ */ jsx(OrgClose, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ReactionPill({ emoji, count, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      variants: reactionVariants,
+      initial: "hidden",
+      animate: "visible",
+      whileHover: { scale: 1.05 },
+      whileTap: "tap",
+      onClick,
+      className: "inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-theme-subtle border border-theme-subtle hover:bg-primary/10 hover:border-primary/20 transition-colors",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            animate: { rotate: [0, -10, 10, 0] },
+            transition: { duration: 0.3, delay: 0.1 },
+            children: emoji
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-theme-muted font-medium", children: count })
+      ]
+    }
+  );
+}
+function MessageBubble({
+  message,
+  isCurrentUser,
+  replyToMessage,
+  onEdit,
+  onReply,
+  onDelete,
+  onReact,
+  onScrollToMessage,
+  canEdit = false,
+  canDelete = false
+}) {
+  const [showActions, setShowActions] = React7.useState(false);
+  const bubbleRef = React7.useRef(null);
+  const isPending = message._status === "pending";
+  const isError = message._status === "error";
+  React7.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (bubbleRef.current && !bubbleRef.current.contains(e.target)) {
+        setShowActions(false);
+      }
+    };
+    if (showActions) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showActions]);
+  const handleMessageClick = (e) => {
+    if (e.target.closest("button")) return;
+    setShowActions((prev) => !prev);
+  };
+  if (isCurrentUser) {
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: bubbleRef,
+        "data-message-id": message.id,
+        initial: { opacity: 0, y: 10, x: 20 },
+        animate: { opacity: 1, y: 0, x: 0 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: cn(
+          "group flex flex-col items-end px-2 py-1.5 relative",
+          isPending && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: replyToMessage && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              variants: replyPreviewVariants,
+              initial: "hidden",
+              animate: "visible",
+              onClick: (e) => {
+                e.stopPropagation();
+                if (replyToMessage.id && onScrollToMessage) onScrollToMessage(replyToMessage.id);
+              },
+              className: cn(
+                "flex items-center gap-2 mb-1 mr-2 px-2 py-1 bg-theme-subtle/50 border-l-2 border-primary-light/50 rounded-r text-[11px] overflow-hidden",
+                onScrollToMessage && "cursor-pointer hover:bg-theme-subtle/80 transition-colors"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-theme-muted", children: [
+                  "Respondendo a ",
+                  /* @__PURE__ */ jsx("span", { className: "text-primary-light", children: replyToMessage.authorName || replyToMessage.authorId?.substring(0, 8) }),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-theme-muted truncate", children: truncate(replyToMessage.content, 40) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "max-w-[75%] flex flex-col items-end relative", children: [
+            /* @__PURE__ */ jsx(
+              ActionBar,
+              {
+                show: showActions,
+                onClose: () => setShowActions(false),
+                onEdit: onEdit ? () => onEdit(message) : void 0,
+                onReply: onReply ? () => onReply(message) : void 0,
+                onDelete: onDelete ? () => onDelete(message.id) : void 0,
+                onReact: onReact ? (emoji) => onReact(message.id, emoji) : void 0,
+                canEdit,
+                canDelete,
+                position: "right"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-0.5 justify-end", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-theme-muted", children: formatTime(message.createdAt) }),
+              message.edited && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  className: "text-[10px] text-theme-muted italic",
+                  children: "(editado)"
+                }
+              ),
+              isPending && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  animate: { opacity: [0.5, 1, 0.5] },
+                  transition: { duration: 1.5, repeat: Infinity },
+                  className: "text-[10px] text-theme-muted italic",
+                  children: "enviando..."
+                }
+              ),
+              isError && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: { scale: 0.8 },
+                  animate: { scale: 1 },
+                  className: "text-[10px] text-rose-400 font-medium",
+                  children: "erro \u2014 toque para reenviar"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                onClick: handleMessageClick,
+                whileTap: { scale: 0.98 },
+                className: cn(
+                  "rounded-sm rounded-br-none px-4 py-2.5 cursor-pointer select-none",
+                  "bg-primary !text-white",
+                  isError && "bg-rose-500/80",
+                  showActions && "ring-2 ring-primary-light/30"
+                ),
+                children: /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-relaxed break-words whitespace-pre-wrap !text-white", children: renderContent(message.content) })
+              }
+            ),
+            message.reactions.length > 0 && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { delay: 0.1 },
+                className: "flex flex-wrap gap-1 mt-1.5 justify-end",
+                children: groupReactions(message.reactions).map(([emoji, data]) => /* @__PURE__ */ jsx(
+                  ReactionPill,
+                  {
+                    emoji,
+                    count: data.count,
+                    onClick: () => onReact?.(message.id, emoji)
+                  },
+                  emoji
+                ))
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: bubbleRef,
+      "data-message-id": message.id,
+      initial: { opacity: 0, y: 10, x: -20 },
+      animate: { opacity: 1, y: 0, x: 0 },
+      transition: { duration: 0.2, ease: "easeOut" },
+      onClick: handleMessageClick,
+      className: cn(
+        "group flex gap-3 px-2 py-1.5 rounded-sm cursor-pointer select-none relative",
+        "transition-colors",
+        isPending && "opacity-60",
+        isError && "border-l-2 border-rose-500/50",
+        showActions && "bg-theme-subtle"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(motion.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, children: /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs font-semibold", children: getInitials(message.authorName || message.authorId) }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 relative", children: [
+          /* @__PURE__ */ jsx(
+            ActionBar,
+            {
+              show: showActions,
+              onClose: () => setShowActions(false),
+              onEdit: onEdit ? () => onEdit(message) : void 0,
+              onReply: onReply ? () => onReply(message) : void 0,
+              onDelete: onDelete ? () => onDelete(message.id) : void 0,
+              onReact: onReact ? (emoji) => onReact(message.id, emoji) : void 0,
+              canEdit,
+              canDelete,
+              position: "left"
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: replyToMessage && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              variants: replyPreviewVariants,
+              initial: "hidden",
+              animate: "visible",
+              onClick: (e) => {
+                e.stopPropagation();
+                if (replyToMessage.id && onScrollToMessage) onScrollToMessage(replyToMessage.id);
+              },
+              className: cn(
+                "flex items-center gap-2 mb-1 px-2 py-1 bg-theme-subtle/50 border-l-2 border-primary-light/50 rounded-r text-[11px] overflow-hidden",
+                onScrollToMessage && "cursor-pointer hover:bg-theme-subtle/80 transition-colors"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-theme-muted", children: [
+                  "Respondendo a ",
+                  /* @__PURE__ */ jsx("span", { className: "text-primary-light", children: replyToMessage.authorName }),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-theme-muted truncate", children: truncate(replyToMessage.content, 40) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-theme", children: message.authorName || message.authorId.substring(0, 8) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-theme-muted", children: formatTime(message.createdAt) }),
+            message.edited && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                className: "text-[10px] text-theme-muted italic",
+                children: "(editado)"
+              }
+            ),
+            isPending && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                animate: { opacity: [0.5, 1, 0.5] },
+                transition: { duration: 1.5, repeat: Infinity },
+                className: "text-[10px] text-theme-muted italic",
+                children: "enviando..."
+              }
+            ),
+            isError && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: { scale: 0.8 },
+                animate: { scale: 1 },
+                className: "text-[10px] text-rose-400 font-medium",
+                children: "erro ao enviar"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-[13px] text-theme-secondary leading-relaxed break-words whitespace-pre-wrap", children: renderContent(message.content) }),
+          message.reactions.length > 0 && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { delay: 0.1 },
+              className: "flex flex-wrap gap-1 mt-1.5",
+              children: groupReactions(message.reactions).map(([emoji, data]) => /* @__PURE__ */ jsx(
+                ReactionPill,
+                {
+                  emoji,
+                  count: data.count,
+                  onClick: () => onReact?.(message.id, emoji)
+                },
+                emoji
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+MessageBubble.displayName = "MessageBubble";
+function getInitials2(name) {
+  if (!name) return "?";
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function getMentionIcon(type) {
+  switch (type) {
+    case "user":
+      return /* @__PURE__ */ jsx(OrgTeam, { className: "w-4 h-4" });
+    case "project":
+      return /* @__PURE__ */ jsx(OrgFolder, { className: "w-4 h-4" });
+    case "task":
+      return /* @__PURE__ */ jsx(OrgCheck, { className: "w-4 h-4" });
+    default:
+      return null;
+  }
+}
+function getMentionLabel(type) {
+  switch (type) {
+    case "user":
+      return "Usu\xE1rio";
+    case "project":
+      return "Projeto";
+    case "task":
+      return "Tarefa";
+    default:
+      return "";
+  }
+}
+function MentionPopover({
+  open,
+  query,
+  options,
+  loading = false,
+  onSelect,
+  onClose,
+  position,
+  selectedIndex = 0
+}) {
+  const listRef = React7.useRef(null);
+  const groupedOptions = React7.useMemo(() => {
+    const groups = {
+      user: [],
+      project: [],
+      task: []
+    };
+    options.forEach((opt) => {
+      if (groups[opt.type]) {
+        groups[opt.type].push(opt);
+      }
+    });
+    return groups;
+  }, [options]);
+  React7.useEffect(() => {
+    if (listRef.current && selectedIndex >= 0) {
+      const items = listRef.current.querySelectorAll("[data-mention-item]");
+      const item = items[selectedIndex];
+      if (item) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [selectedIndex]);
+  if (!open) return null;
+  const hasResults = options.length > 0;
+  let flatIndex = -1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute z-50 w-72 max-h-64 overflow-y-auto",
+        "bg-theme-surface border border-theme-subtle rounded-sm shadow-lg",
+        "animate-in fade-in-0 zoom-in-95 duration-[400ms]"
+      ),
+      style: position ? { top: position.top, left: position.left } : void 0,
+      children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "w-2 h-2 rounded-full bg-primary-light/50 animate-bounce",
+          style: { animationDelay: `${i * 100}ms` }
+        },
+        i
+      )) }) }) : !hasResults ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-theme-muted", children: query ? `Nenhum resultado para "${query}"` : "Digite para pesquisar" }) }) : /* @__PURE__ */ jsx("div", { ref: listRef, className: "py-1", children: ["user", "project", "task"].map((type) => {
+        const typeOptions = groupedOptions[type];
+        if (typeOptions.length === 0) return null;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-theme-muted", children: getMentionIcon(type) }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-theme-muted uppercase tracking-wide", children: [
+              getMentionLabel(type),
+              "s"
+            ] })
+          ] }),
+          typeOptions.map((option) => {
+            flatIndex++;
+            const isSelected = flatIndex === selectedIndex;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-mention-item": true,
+                onClick: () => onSelect(option),
+                className: cn(
+                  "w-full flex items-center gap-3 px-3 py-2 text-left transition-colors",
+                  "hover:bg-theme-highlight focus:bg-theme-highlight focus:outline-none",
+                  isSelected && "bg-theme-highlight"
+                ),
+                children: [
+                  type === "user" ? /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "w-7 h-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-[10px] font-semibold", children: getInitials2(option.display) }) }) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "w-7 h-7 rounded flex items-center justify-center",
+                        type === "project" && "bg-purple-500/20 text-purple-400",
+                        type === "task" && "bg-emerald-500/20 text-emerald-400"
+                      ),
+                      children: getMentionIcon(type)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-theme truncate", children: option.display }),
+                    option.subtitle && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-theme-muted truncate", children: option.subtitle })
+                  ] })
+                ]
+              },
+              option.id
+            );
+          })
+        ] }, type);
+      }) })
+    }
+  );
+}
+MentionPopover.displayName = "MentionPopover";
+var bannerVariants = {
+  initial: { opacity: 0, y: -8, height: 0 },
+  animate: { opacity: 1, y: 0, height: "auto" },
+  exit: { opacity: 0, y: -8, height: 0 }
+};
+var bannerTransition = {
+  duration: 0.2,
+  ease: [0.4, 0, 0.2, 1]
+};
+function truncate2(str, len) {
+  if (str.length <= len) return str;
+  return str.slice(0, len) + "...";
+}
+function MessageInput({
+  value,
+  onChange,
+  onSend,
+  onTyping,
+  onStopTyping,
+  disabled = false,
+  placeholder = "Escreva uma mensagem...",
+  editingMessage,
+  onCancelEdit,
+  replyTo,
+  onCancelReply,
+  mentionOptions = [],
+  onMentionSearch,
+  mentionLoading = false
+}) {
+  const inputRef = React7.useRef(null);
+  const [showMentions, setShowMentions] = React7.useState(false);
+  const [mentionQuery, setMentionQuery] = React7.useState("");
+  const [mentionIndex, setMentionIndex] = React7.useState(0);
+  const [caretPosition, setCaretPosition] = React7.useState(null);
+  const detectMention = (text, cursorPos) => {
+    const beforeCursor = text.slice(0, cursorPos);
+    const match = beforeCursor.match(/@(\w*)$/);
+    if (match) {
+      setShowMentions(true);
+      setMentionQuery(match[1]);
+      setMentionIndex(0);
+      onMentionSearch?.(match[1], null);
+      if (inputRef.current) {
+        inputRef.current.getBoundingClientRect();
+        setCaretPosition({
+          top: -200,
+          // Above input
+          left: 0
+        });
+      }
+    } else {
+      setShowMentions(false);
+      setMentionQuery("");
+    }
+  };
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    onTyping?.();
+    detectMention(newValue, e.target.selectionStart || 0);
+  };
+  const handleKeyDown = (e) => {
+    if (showMentions && mentionOptions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setMentionIndex((i) => Math.min(i + 1, mentionOptions.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setMentionIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        handleMentionSelect(mentionOptions[mentionIndex]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setShowMentions(false);
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (value.trim()) {
+        onSend();
+      }
+    }
+  };
+  const handleMentionSelect = (option) => {
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const beforeCursor = value.slice(0, cursorPos);
+    const afterCursor = value.slice(cursorPos);
+    const match = beforeCursor.match(/@(\w*)$/);
+    if (match) {
+      const mentionStart = beforeCursor.length - match[0].length;
+      const newValue = beforeCursor.slice(0, mentionStart) + `@${option.display} ` + afterCursor;
+      onChange(newValue);
+    }
+    setShowMentions(false);
+    setMentionQuery("");
+    inputRef.current?.focus();
+  };
+  const handleBlur = () => {
+    setTimeout(() => {
+      setShowMentions(false);
+      onStopTyping?.();
+    }, 200);
+  };
+  React7.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;
+    }
+  }, [value]);
+  React7.useEffect(() => {
+    if (editingMessage && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [editingMessage]);
+  const isEditing = !!editingMessage;
+  const isReplying = !!replyTo;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      MentionPopover,
+      {
+        open: showMentions,
+        query: mentionQuery,
+        options: mentionOptions,
+        loading: mentionLoading,
+        onSelect: handleMentionSelect,
+        onClose: () => setShowMentions(false),
+        position: caretPosition ?? void 0,
+        selectedIndex: mentionIndex
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isReplying && replyTo && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        variants: bannerVariants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: bannerTransition,
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 mb-2 bg-theme-subtle border border-theme-subtle rounded-sm", children: [
+          /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4 text-primary-light shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[11px] font-medium text-primary-light", children: [
+              "Respondendo a ",
+              replyTo.authorName
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-[12px] text-theme-muted truncate", children: truncate2(replyTo.content, 60) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancelReply,
+              className: "p-1 rounded hover:bg-theme-highlight text-theme-muted hover:text-theme transition-colors",
+              children: /* @__PURE__ */ jsx(OrgClose, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      },
+      "reply-banner"
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isEditing && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        variants: bannerVariants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        transition: bannerTransition,
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 mb-2 bg-amber-500/10 border border-amber-500/30 rounded-sm", children: [
+          /* @__PURE__ */ jsx(OrgEdit, { className: "w-4 h-4 text-amber-400 shrink-0" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[12px] text-amber-300 flex-1", children: "Editando mensagem" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancelEdit,
+              className: "p-1 rounded hover:bg-amber-500/20 text-amber-400 hover:text-amber-300 transition-colors",
+              children: /* @__PURE__ */ jsx(OrgClose, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      },
+      "edit-banner"
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-end gap-2 bg-theme-subtle border border-theme-subtle rounded-sm px-3 py-2 transition-colors",
+          "focus-within:border-primary/50",
+          isEditing && "border-amber-500/30 focus-within:border-amber-500/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: inputRef,
+              value,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              placeholder,
+              disabled,
+              rows: 1,
+              className: cn(
+                "flex-1 bg-transparent border-none outline-none resize-none",
+                "text-[13px] text-theme placeholder:text-theme-muted",
+                "min-h-[24px] max-h-[120px]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: isEditing ? "secondary" : "default",
+              size: "sm",
+              onClick: onSend,
+              disabled: disabled || !value.trim(),
+              className: "h-7 px-3 text-xs shrink-0",
+              children: isEditing ? "Salvar" : "Enviar"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1 mt-1", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-theme-muted", children: [
+        /* @__PURE__ */ jsx("kbd", { className: "px-1 py-0.5 rounded bg-theme-subtle text-[10px]", children: "@" }),
+        " para mencionar"
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-theme-muted", children: [
+        /* @__PURE__ */ jsx("kbd", { className: "px-1 py-0.5 rounded bg-theme-subtle text-[10px]", children: "Enter" }),
+        " para enviar"
+      ] })
+    ] })
+  ] });
+}
+MessageInput.displayName = "MessageInput";
+var chatPanelVariants = {
+  hidden: { opacity: 0, x: 20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30
+    }
+  },
+  exit: {
+    opacity: 0,
+    x: -20,
+    transition: {
+      duration: 0.2
+    }
+  }
+};
+function formatDateSeparator(iso) {
+  const date = new Date(iso);
+  const today = /* @__PURE__ */ new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === today.toDateString()) return "Hoje";
+  if (date.toDateString() === yesterday.toDateString()) return "Ontem";
+  return date.toLocaleDateString("pt-BR", { day: "numeric", month: "long" });
+}
+function shouldShowDateSeparator(messages, index) {
+  if (index === 0) return true;
+  const curr = new Date(messages[index].createdAt).toDateString();
+  const prev = new Date(messages[index - 1].createdAt).toDateString();
+  return curr !== prev;
+}
+function TypingIndicator({ users }) {
+  if (users.length === 0) return null;
+  const text = users.length === 1 ? `${users[0].substring(0, 8)} est\xE1 digitando` : users.length === 2 ? `${users[0].substring(0, 8)} e ${users[1].substring(0, 8)} est\xE3o digitando` : `${users.length} pessoas est\xE3o digitando`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-5 py-1 animate-in fade-in-0 duration-[400ms]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "w-1.5 h-1.5 rounded-full bg-primary-light/50 animate-bounce",
+        style: { animationDelay: `${i * 150}ms` }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-theme-muted", children: text })
+  ] });
+}
+function ChatMessages({
+  room,
+  messages,
+  loading,
+  typingUsers = [],
+  currentUserId,
+  permissions,
+  onSendMessage,
+  onEditMessage,
+  onDeleteMessage,
+  onReactToMessage,
+  onTyping,
+  onStopTyping,
+  onOpenManagement,
+  onBack,
+  isMobile,
+  mentionUsers = [],
+  mentionProjects = [],
+  hasMore = false,
+  onLoadMore,
+  loadingMore = false
+}) {
+  const [inputValue, setInputValue] = React7.useState("");
+  const [editingMessage, setEditingMessage] = React7.useState(null);
+  const [replyTo, setReplyTo] = React7.useState(null);
+  const [mentionOptions, setMentionOptions] = React7.useState([]);
+  const scrollRef = React7.useRef(null);
+  const messagesById = React7.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    messages.forEach((m) => map.set(m.id, m));
+    return map;
+  }, [messages]);
+  const isInitialLoad = React7.useRef(true);
+  const prevMessageCount = React7.useRef(messages.length);
+  React7.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (isInitialLoad.current || messages.length > prevMessageCount.current) {
+      const nearBottom = isInitialLoad.current || el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+      if (nearBottom) {
+        requestAnimationFrame(() => {
+          el.scrollTop = el.scrollHeight;
+        });
+      }
+      isInitialLoad.current = false;
+    }
+    prevMessageCount.current = messages.length;
+  }, [messages]);
+  React7.useEffect(() => {
+    isInitialLoad.current = true;
+  }, [room?.id]);
+  const handleScroll = React7.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el || !hasMore || loadingMore || !onLoadMore) return;
+    if (el.scrollTop < 60) {
+      onLoadMore();
+    }
+  }, [hasMore, loadingMore, onLoadMore]);
+  React7.useEffect(() => {
+    if (editingMessage) {
+      setInputValue(editingMessage.content);
+    }
+  }, [editingMessage]);
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+    if (editingMessage) {
+      onEditMessage?.(editingMessage.id, inputValue.trim());
+      setEditingMessage(null);
+    } else {
+      onSendMessage(inputValue.trim(), replyTo?.id);
+      setReplyTo(null);
+    }
+    setInputValue("");
+  };
+  const handleCancelEdit = () => {
+    setEditingMessage(null);
+    setInputValue("");
+  };
+  const handleCancelReply = () => {
+    setReplyTo(null);
+  };
+  const handleEditMessage = (message) => {
+    setEditingMessage(message);
+    setReplyTo(null);
+  };
+  const handleReplyToMessage = (message) => {
+    setReplyTo({
+      id: message.id,
+      authorName: message.authorName || message.authorId.substring(0, 8),
+      content: message.content
+    });
+    setEditingMessage(null);
+  };
+  const handleScrollToMessage = React7.useCallback((messageId) => {
+    const el = scrollRef.current?.querySelector(`[data-message-id="${messageId}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      el.classList.add("bg-primary/10");
+      setTimeout(() => el.classList.remove("bg-primary/10"), 1500);
+    }
+  }, []);
+  const handleMentionSearch = (query) => {
+    const q = query.toLowerCase();
+    const options = [];
+    mentionUsers.filter((u) => u.displayName.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q)).slice(0, 5).forEach((u) => {
+      options.push({
+        id: u.id,
+        type: "user",
+        display: u.displayName,
+        avatarUrl: u.avatarUrl,
+        subtitle: u.email
+      });
+    });
+    mentionProjects.filter((p) => p.name.toLowerCase().includes(q) || p.key?.toLowerCase().includes(q)).slice(0, 3).forEach((p) => {
+      options.push({
+        id: p.id,
+        type: "project",
+        display: p.name,
+        subtitle: p.key
+      });
+    });
+    setMentionOptions(options);
+  };
+  if (!room) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center text-center px-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-sm bg-primary/10 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(OrgComment, { className: "w-8 h-8 text-primary-light/60" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-theme mb-2", children: "Selecione uma conversa" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-theme-muted max-w-[240px]", children: "Escolha um canal ou mensagem direta para come\xE7ar a conversar." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: chatPanelVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      className: "flex flex-col h-full overflow-hidden relative",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 md:px-5 py-3 border-b border-theme-subtle", children: [
+          isMobile && onBack && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onBack,
+              className: "p-1.5 rounded-sm text-theme-muted hover:text-theme hover:bg-theme-subtle transition-colors",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex items-center justify-center h-8 w-8 rounded-sm text-sm",
+                "bg-primary/15 text-primary-light"
+              ),
+              children: room.type === "DIRECT" ? /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4" }) : "#"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold text-theme truncate", children: room.name || "Sem nome" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-theme-muted truncate", children: [
+              room.memberCount,
+              " membro",
+              room.memberCount !== 1 ? "s" : ""
+            ] })
+          ] }),
+          onOpenManagement && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: onOpenManagement,
+                className: "h-8 w-8 p-0 text-theme-muted hover:text-theme",
+                children: /* @__PURE__ */ jsx(OrgTeam, { className: "w-4 h-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Detalhes do canal" })
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: scrollRef,
+            onScroll: handleScroll,
+            className: "flex-1 overflow-y-auto px-3 md:px-5 py-4 space-y-0.5",
+            children: [
+              loadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-theme-muted", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-primary-light/30 border-t-primary-light rounded-full animate-spin" }),
+                "Carregando mensagens anteriores..."
+              ] }) }),
+              hasMore && !loadingMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onLoadMore,
+                  className: "text-xs text-primary-light hover:text-primary transition-colors",
+                  children: "\u2191 Carregar mais mensagens"
+                }
+              ) }),
+              loading ? /* @__PURE__ */ jsx("div", { className: "space-y-4 py-4", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8 shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+                  /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })
+                ] })
+              ] }, i)) }) : messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-sm bg-primary/10 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(OrgComment, { className: "w-6 h-6 text-primary-light/50" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-theme-muted", children: "Ainda sem mensagens." }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted mt-1", children: "Comece a conversa!" })
+              ] }) : messages.map((msg, idx) => {
+                const isCurrentUser = msg.authorId === currentUserId;
+                const replyToMessage = msg.replyToId || msg.parentId ? messagesById.get(msg.replyToId || msg.parentId || "") : null;
+                return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+                  shouldShowDateSeparator(messages, idx) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-3", children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-theme-subtle-10" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-theme-muted font-medium", children: formatDateSeparator(msg.createdAt) }),
+                    /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-theme-subtle-10" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    MessageBubble,
+                    {
+                      message: msg,
+                      isCurrentUser,
+                      replyToMessage,
+                      onEdit: isCurrentUser ? handleEditMessage : void 0,
+                      onReply: handleReplyToMessage,
+                      onDelete: isCurrentUser ? (id) => onDeleteMessage?.(id) : void 0,
+                      onReact: (id, emoji) => onReactToMessage?.(id, emoji),
+                      onScrollToMessage: handleScrollToMessage,
+                      canEdit: isCurrentUser,
+                      canDelete: isCurrentUser
+                    }
+                  )
+                ] }, msg.id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TypingIndicator, { users: typingUsers }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 md:px-5 py-3 border-t border-theme-subtle", children: /* @__PURE__ */ jsx(
+          MessageInput,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onTyping,
+            onStopTyping,
+            editingMessage,
+            onCancelEdit: handleCancelEdit,
+            replyTo,
+            onCancelReply: handleCancelReply,
+            mentionOptions,
+            onMentionSearch: handleMentionSearch,
+            placeholder: "Escreva uma mensagem..."
+          }
+        ) })
+      ]
+    },
+    room.id
+  ) });
+}
+ChatMessages.displayName = "ChatMessages";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var textareaVariants = cva(
+  "flex w-full min-h-[100px] bg-glass-highlight backdrop-blur-md border border-glass-border rounded-sm px-4 py-3 text-sm font-light text-org-text transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] placeholder:text-org-text-muted focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+  {
+    variants: {
+      variant: {
+        default: "focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10),0_0_20px_rgba(79,57,246,0.08)]",
+        flat: "rounded-sm focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10)]",
+        rounded: "rounded-sm focus:border-primary-light/50 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10)]",
+        error: "border-error/30 bg-error/5 text-red-100 placeholder:text-red-500/30 focus:border-error focus:shadow-[0_0_0_3px_rgba(224,17,95,0.10)]",
+        cream: "bg-white/60 border-[rgba(36,25,121,0.06)] text-neutral-900 placeholder:text-neutral-400 focus:border-primary/40 focus:bg-white/80 focus:shadow-[0_0_0_3px_rgba(79,57,246,0.08)] backdrop-blur-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Textarea = React7.forwardRef(
+  ({ className, variant, label, error, labelPosition = "left", ...props }, ref) => {
+    const id = React7.useId();
+    const effectiveVariant = error ? "error" : variant;
+    return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "absolute -top-3 z-10 px-2 text-label uppercase tracking-widest",
+            effectiveVariant === "cream" ? "bg-cream-base" : "bg-surface",
+            labelPosition === "left" ? "left-0 ml-2" : "right-0 mr-2",
+            error ? "text-error" : "text-primary-light"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id,
+          className: cn(textareaVariants({ variant: effectiveVariant, className })),
+          ref,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${id}-error` : void 0,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { id: `${id}-error`, className: "mt-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-mono-xs text-error", children: error }) })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-theme-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-sm border border-theme-subtle p-6 shadow-glass backdrop-blur-[40px] saturate-[180%] duration-[400ms] sm:max-w-lg text-theme",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-theme-secondary text-sm", className),
+      ...props
+    }
+  );
+}
+function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
+}
+var DrawerTrigger = Drawer$1.Trigger;
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = Drawer$1.Close;
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn("fixed inset-0 z-50 bg-black/80", className),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Drawer$1.Content,
+      {
+        asChild: true,
+        "data-slot": "drawer-content",
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { y: "100%", opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: "100%", opacity: 0 },
+            transition: {
+              type: "spring",
+              stiffness: 400,
+              damping: 40
+            },
+            className: cn(
+              "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-theme-subtle bg-theme-surface text-theme",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-theme-subtle-20" }),
+              children
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-lg font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-theme-secondary", className),
+      ...props
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React7.useState(false);
+  React7.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function ResponsiveDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  desktopQuery = "(min-width: 768px)",
+  className,
+  contentClassName
+}) {
+  const isDesktop = useMediaQuery(desktopQuery);
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: cn(
+          "max-w-2xl max-h-[85vh] overflow-y-auto",
+          "border border-theme-subtle bg-theme-glass-heavy backdrop-blur-2xl",
+          "shadow-glass-xl rounded-sm",
+          contentClassName
+        ),
+        children: [
+          (title || description) && /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            title && /* @__PURE__ */ jsx(DialogTitle, { className: "text-lg", children: title }),
+            description && /* @__PURE__ */ jsx(DialogDescription, { className: "text-muted-foreground text-sm", children: description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className, children }),
+          footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DrawerContent,
+    {
+      className: cn(
+        "max-h-[90vh]",
+        "border-t border-theme-subtle bg-theme-glass-heavy backdrop-blur-2xl",
+        contentClassName
+      ),
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs(DrawerHeader, { className: "text-left", children: [
+          title && /* @__PURE__ */ jsx(DrawerTitle, { className: "text-lg", children: title }),
+          description && /* @__PURE__ */ jsx(DrawerDescription, { className: "text-muted-foreground text-sm", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("overflow-y-auto px-4 pb-4", className), children }),
+        footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
+      ]
+    }
+  ) });
+}
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var Tabs = TabsPrimitive.Root;
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "inline-flex h-10 items-center justify-center rounded-sm bg-theme-glass-heavy backdrop-blur-md border border-glass-border p-1 text-theme-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-glass-highlight data-[state=active]:text-theme data-[state=active]:shadow-inner-light",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function getInitials3(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function CreateRoomDialog({
+  open,
+  onOpenChange,
+  onCreateChannel,
+  onCreateDM,
+  workspaceMembers,
+  loadingMembers
+}) {
+  const [tab, setTab] = React7.useState("channel");
+  const [creating, setCreating] = React7.useState(false);
+  const [channelName, setChannelName] = React7.useState("");
+  const [channelDesc, setChannelDesc] = React7.useState("");
+  const [visibility, setVisibility] = React7.useState("WORKSPACE");
+  const [selectedMembers, setSelectedMembers] = React7.useState([]);
+  const [showAdvanced, setShowAdvanced] = React7.useState(false);
+  const [dmSearch, setDmSearch] = React7.useState("");
+  const [nameError, setNameError] = React7.useState("");
+  const validateName = (value) => {
+    if (!value.trim()) {
+      setNameError("Nome do canal \xE9 obrigat\xF3rio");
+      return false;
+    }
+    if (value.length < 2) {
+      setNameError("Nome deve ter pelo menos 2 caracteres");
+      return false;
+    }
+    if (!/^[a-zA-Z0-9À-ÿ\s\-_]+$/.test(value)) {
+      setNameError("Apenas letras, n\xFAmeros, espa\xE7os e h\xEDfens");
+      return false;
+    }
+    setNameError("");
+    return true;
+  };
+  const filteredMembers = React7.useMemo(() => {
+    if (!dmSearch) return workspaceMembers;
+    const q = dmSearch.toLowerCase();
+    return workspaceMembers.filter(
+      (m) => m.displayName.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q)
+    );
+  }, [workspaceMembers, dmSearch]);
+  const handleCreateChannel = async () => {
+    if (!validateName(channelName)) return;
+    setCreating(true);
+    try {
+      const result = await onCreateChannel({
+        name: channelName.trim(),
+        description: channelDesc.trim() || void 0,
+        visibility,
+        memberIds: selectedMembers
+      });
+      if (result) {
+        resetForm();
+        onOpenChange(false);
+      }
+    } finally {
+      setCreating(false);
+    }
+  };
+  const handleCreateDM = async (userId) => {
+    setCreating(true);
+    try {
+      const result = await onCreateDM(userId);
+      if (result) {
+        resetForm();
+        onOpenChange(false);
+      }
+    } finally {
+      setCreating(false);
+    }
+  };
+  const toggleMember = (userId) => {
+    setSelectedMembers(
+      (prev) => prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]
+    );
+  };
+  const resetForm = () => {
+    setChannelName("");
+    setChannelDesc("");
+    setVisibility("WORKSPACE");
+    setSelectedMembers([]);
+    setShowAdvanced(false);
+    setDmSearch("");
+    setNameError("");
+    setTab("channel");
+  };
+  return /* @__PURE__ */ jsx(
+    ResponsiveDialog,
+    {
+      open,
+      onOpenChange,
+      title: "Nova conversa",
+      description: "Crie um canal para a equipa ou inicie uma conversa direta.",
+      contentClassName: "sm:max-w-md",
+      children: /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-theme-subtle", children: [
+          /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: "channel",
+              className: "text-xs data-[state=active]:bg-primary/20 data-[state=active]:text-primary-light",
+              children: [
+                /* @__PURE__ */ jsx(OrgTeam, { className: "w-3.5 h-3.5 mr-1.5" }),
+                "Canal"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: "dm",
+              className: "text-xs data-[state=active]:bg-primary/20 data-[state=active]:text-primary-light",
+              children: [
+                /* @__PURE__ */ jsx(OrgComment, { className: "w-3.5 h-3.5 mr-1.5" }),
+                "Mensagem Direta"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "channel", className: "space-y-4 mt-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { className: "text-theme-secondary text-xs", children: "Nome do canal" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                variant: "flat",
+                placeholder: "ex: equipa-design",
+                value: channelName,
+                onChange: (e) => {
+                  setChannelName(e.target.value);
+                  if (nameError) validateName(e.target.value);
+                },
+                onBlur: () => channelName && validateName(channelName),
+                className: cn(
+                  "h-9 text-sm bg-theme-subtle border-theme-subtle",
+                  nameError && "border-rose-500/50 focus:border-rose-500"
+                ),
+                autoFocus: true
+              }
+            ),
+            nameError && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-rose-400 animate-in fade-in-0 slide-in-from-top-1 duration-[400ms]", children: nameError })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setVisibility("WORKSPACE"),
+                className: cn(
+                  "flex-1 flex items-center gap-2 px-3 py-2 rounded-sm text-xs transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] border",
+                  visibility === "WORKSPACE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-theme-subtle border-theme-subtle text-theme-muted hover:bg-theme-subtle"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(OrgGlobe, { className: "w-3.5 h-3.5" }),
+                  "P\xFAblico"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setVisibility("PRIVATE"),
+                className: cn(
+                  "flex-1 flex items-center gap-2 px-3 py-2 rounded-sm text-xs transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] border",
+                  visibility === "PRIVATE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-theme-subtle border-theme-subtle text-theme-muted hover:bg-theme-subtle"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" }),
+                  "Privado"
+                ]
+              }
+            )
+          ] }),
+          !showAdvanced ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowAdvanced(true),
+              className: "text-xs text-primary-light/70 hover:text-primary-light transition-colors",
+              children: "+ Adicionar descri\xE7\xE3o e membros"
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "space-y-4 animate-in fade-in-0 slide-in-from-top-2 duration-[400ms]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { className: "text-theme-secondary text-xs", children: "Descri\xE7\xE3o (opcional)" }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  placeholder: "Sobre o que \xE9 este canal...",
+                  value: channelDesc,
+                  onChange: (e) => setChannelDesc(e.target.value),
+                  className: "min-h-[60px] text-sm bg-theme-subtle border-theme-subtle text-theme"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Label, { className: "text-theme-secondary text-xs", children: [
+                "Adicionar membros (",
+                selectedMembers.length,
+                " selecionados)"
+              ] }),
+              /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[150px] rounded-sm border border-theme-subtle bg-theme-subtle", children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-0.5", children: loadingMembers ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+                /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-7 w-7" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+              ] }, i)) : workspaceMembers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted p-2 text-center", children: "Sem membros dispon\xEDveis" }) : workspaceMembers.map((member) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleMember(member.id),
+                  className: cn(
+                    "flex items-center gap-2 w-full p-2 rounded-sm text-left text-xs transition-colors",
+                    selectedMembers.includes(member.id) ? "bg-primary/15 text-primary-light" : "text-theme-secondary hover:bg-theme-subtle"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-[10px]", children: getInitials3(member.displayName) }) }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: member.displayName }),
+                    selectedMembers.includes(member.id) && /* @__PURE__ */ jsx(Badge, { variant: "primary", className: "text-[9px] px-1 py-0 h-4", children: "\u2713" })
+                  ]
+                },
+                member.id
+              )) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 mt-6", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onOpenChange(false),
+                className: "text-xs text-theme-muted",
+                children: "Cancelar"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                size: "sm",
+                onClick: handleCreateChannel,
+                disabled: !channelName.trim() || creating,
+                className: "text-xs",
+                children: creating ? "Criando..." : "Criar Canal"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "dm", className: "space-y-3 mt-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(OrgSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-muted" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                variant: "flat",
+                placeholder: "Pesquisar membro...",
+                value: dmSearch,
+                onChange: (e) => setDmSearch(e.target.value),
+                className: "h-9 text-sm bg-theme-subtle border-theme-subtle pl-9",
+                autoFocus: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[280px]", children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: loadingMembers ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-28" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-20" })
+            ] })
+          ] }, i)) : filteredMembers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-theme-muted", children: [
+            /* @__PURE__ */ jsx(OrgSearch, { className: "w-8 h-8 mb-2 opacity-50" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs", children: dmSearch ? "Nenhum membro encontrado" : "Sem membros no workspace" })
+          ] }) : filteredMembers.map((member) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleCreateDM(member.id),
+              disabled: creating,
+              className: "flex items-center gap-3 w-full p-2.5 rounded-sm text-left transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] hover:bg-theme-subtle active:scale-[0.98] disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials3(member.displayName) }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-theme truncate", children: member.displayName }),
+                  member.email && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-theme-muted truncate", children: member.email })
+                ] }),
+                member.status && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-2 h-2 rounded-full flex-shrink-0",
+                      member.status === "ONLINE" && "bg-emerald-400 animate-pulse",
+                      member.status === "AWAY" && "bg-amber-400",
+                      member.status === "BUSY" && "bg-rose-400",
+                      member.status === "OFFLINE" && "bg-theme-subtle-20"
+                    )
+                  }
+                )
+              ]
+            },
+            member.id
+          )) }) })
+        ] })
+      ] })
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React7.forwardRef(({ className, children, label, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+  label && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 right-0 z-10 mr-2 bg-theme-surface px-2 text-label uppercase tracking-widest text-theme-muted", children: label }),
+  /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex w-full items-center justify-between bg-theme-subtle backdrop-blur-md border border-theme-subtle px-4 py-3 text-sm font-light text-theme-secondary rounded-sm transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] focus:outline-none focus:shadow-[0_0_0_3px_rgba(79,57,246,0.10),0_0_20px_rgba(79,57,246,0.08)] focus:border-primary-light/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-primary-light opacity-60" }) })
+      ]
+    }
+  )
+] }));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-theme-muted" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-theme-muted" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-sm border border-glass-border bg-theme-glass-heavy backdrop-blur-[40px] saturate-[180%] text-theme shadow-glass data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm font-light text-theme-secondary outline-none transition-colors duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] focus:bg-theme-subtle-10 focus:text-theme data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary-light" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-theme-subtle-10", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-label uppercase tracking-widest text-theme-muted", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+function getInitials4(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+var roleBadgeColors = {
+  OWNER: "bg-amber-500/15 text-amber-300 border-amber-500/30",
+  ADMIN: "bg-blue-500/15 text-blue-300 border-blue-500/30",
+  MEMBER: "bg-white/5 text-white/40 border-white/10"
+};
+var roleLabels = {
+  OWNER: "Dono",
+  ADMIN: "Admin",
+  MEMBER: "Membro"
+};
+function RoomManagementPanel({
+  room,
+  members,
+  permissions,
+  currentUserId,
+  loading,
+  onClose,
+  onUpdateRoom,
+  onArchiveRoom,
+  onLeaveRoom,
+  onRemoveMember,
+  onUpdateMemberRole,
+  className
+}) {
+  const [view, setView] = React7.useState("info");
+  const [editName, setEditName] = React7.useState(room.name || "");
+  const [editDesc, setEditDesc] = React7.useState(room.description || "");
+  const [editVisibility, setEditVisibility] = React7.useState(room.visibility);
+  const [saving, setSaving] = React7.useState(false);
+  const [confirmArchive, setConfirmArchive] = React7.useState(false);
+  React7.useEffect(() => {
+    setEditName(room.name || "");
+    setEditDesc(room.description || "");
+    setEditVisibility(room.visibility);
+  }, [room]);
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onUpdateRoom(room.id, {
+        name: editName.trim(),
+        description: editDesc.trim() || void 0,
+        visibility: editVisibility
+      });
+      setView("info");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const renderHeader = (title, showBack) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-theme-subtle", children: [
+    showBack && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setView("info"),
+        className: "p-1 rounded-sm hover:bg-theme-subtle text-theme-muted hover:text-theme transition-colors",
+        children: /* @__PURE__ */ jsx(OrgChevronLeft, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { className: "flex-1 text-sm font-semibold text-theme", children: title }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "p-1 rounded-sm hover:bg-theme-subtle text-theme-muted hover:text-theme transition-colors",
+        children: /* @__PURE__ */ jsx(OrgClose, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+  const renderInfo = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader(room.name || "Detalhes"),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center h-12 w-12 rounded-sm text-lg",
+              "bg-primary/15 text-primary-light"
+            ),
+            children: room.type === "DIRECT" ? "\u{1F4AC}" : "#"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-[15px] font-semibold text-theme", children: room.name || "Sem nome" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: "text-[10px] px-1.5 py-0 h-4 border-theme-subtle-10 text-theme-muted",
+                children: room.type === "DIRECT" ? "DM" : room.visibility === "PRIVATE" ? "\u{1F512} Privado" : "\u{1F310} P\xFAblico"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-theme-muted", children: [
+              room.memberCount,
+              " membros"
+            ] })
+          ] })
+        ] })
+      ] }),
+      room.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted leading-relaxed", children: room.description }),
+      /* @__PURE__ */ jsx(Separator, { className: "bg-theme-subtle" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setView("members"),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-sm text-sm text-theme-secondary hover:bg-theme-subtle hover:text-theme transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgTeam, { className: "w-4 h-4 text-theme-muted" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Membros" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "default", className: "text-[10px] px-1.5 py-0 h-4 border-theme-subtle-10 text-theme-muted", children: members.length })
+            ]
+          }
+        ),
+        permissions.canEditRoomSettings && room.type !== "DIRECT" && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setView("edit"),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-sm text-sm text-theme-secondary hover:bg-theme-subtle hover:text-theme transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgEdit, { className: "w-4 h-4 text-theme-muted" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Editar canal" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { className: "bg-theme-subtle my-2" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onLeaveRoom(room.id),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-sm text-sm text-theme-muted hover:bg-rose-500/10 hover:text-rose-400 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgDoor, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Sair do canal" })
+            ]
+          }
+        ),
+        permissions.canArchiveRoom && /* @__PURE__ */ jsx(Fragment, { children: !confirmArchive ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setConfirmArchive(true),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-sm text-sm text-theme-muted hover:bg-rose-500/10 hover:text-rose-400 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgTrash, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Arquivar canal" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-sm bg-rose-500/10 border border-rose-500/20 animate-in fade-in-0 duration-[400ms]", children: [
+          /* @__PURE__ */ jsx("p", { className: "flex-1 text-xs text-rose-300", children: "Tem certeza?" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setConfirmArchive(false),
+              className: "h-6 px-2 text-[10px] text-theme-muted",
+              children: "N\xE3o"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              size: "sm",
+              onClick: () => onArchiveRoom(room.id),
+              className: "h-6 px-2 text-[10px]",
+              children: "Sim, arquivar"
+            }
+          )
+        ] }) })
+      ] })
+    ] })
+  ] });
+  const renderMembers = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader("Membros", true),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-3 space-y-0.5", children: loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-16" })
+      ] })
+    ] }, i)) : members.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-theme-muted text-center py-8", children: "Sem membros" }) : members.map((member) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-3 p-2 rounded-sm hover:bg-theme-subtle group transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials4(member.displayName || member.userId.substring(0, 8)) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-theme truncate", children: member.displayName || member.userId.substring(0, 8) }),
+              member.userId === currentUserId && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-theme-muted", children: "(voc\xEA)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: cn(
+                  "text-[9px] px-1 py-0 h-3.5 border mt-0.5",
+                  roleBadgeColors[member.role]
+                ),
+                children: roleLabels[member.role]
+              }
+            )
+          ] }),
+          permissions.canManageMembers && member.userId !== currentUserId && member.role !== "OWNER" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: member.role,
+                onValueChange: (val) => onUpdateMemberRole(room.id, member.userId, val),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "h-6 w-20 text-[10px] bg-theme-subtle border-theme-subtle-10", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "ADMIN", children: "Admin" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "MEMBER", children: "Membro" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onRemoveMember(room.id, member.userId),
+                className: "h-6 w-6 p-0 text-theme-muted hover:text-rose-400 hover:bg-rose-500/10",
+                children: /* @__PURE__ */ jsx(OrgClose, { className: "w-3 h-3" })
+              }
+            )
+          ] })
+        ]
+      },
+      member.id
+    )) }) })
+  ] });
+  const renderEdit = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader("Editar canal", true),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-theme-secondary text-xs", children: "Nome" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "flat",
+            value: editName,
+            onChange: (e) => setEditName(e.target.value),
+            className: "h-9 text-sm bg-theme-subtle border-theme-subtle"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-theme-secondary text-xs", children: "Descri\xE7\xE3o" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: editDesc,
+            onChange: (e) => setEditDesc(e.target.value),
+            className: "min-h-[60px] text-sm bg-theme-subtle border-theme-subtle text-theme",
+            placeholder: "Descri\xE7\xE3o do canal..."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-theme-secondary text-xs", children: "Visibilidade" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditVisibility("WORKSPACE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-sm text-xs transition-all duration-[400ms] border",
+                editVisibility === "WORKSPACE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-theme-subtle border-theme-subtle text-theme-muted hover:bg-theme-subtle"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgGlobe, { className: "w-3.5 h-3.5" }),
+                "P\xFAblico"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditVisibility("PRIVATE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-sm text-xs transition-all duration-[400ms] border",
+                editVisibility === "PRIVATE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-theme-subtle border-theme-subtle text-theme-muted hover:bg-theme-subtle"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" }),
+                "Privado"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setView("info"),
+            className: "text-xs text-theme-muted",
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: handleSave,
+            disabled: !editName.trim() || saving,
+            className: "text-xs",
+            children: saving ? "Salvando..." : "Salvar"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full border-l border-theme-subtle bg-theme-surface w-[280px] shrink-0",
+        "animate-in slide-in-from-right-5 duration-[400ms]",
+        className
+      ),
+      children: [
+        view === "info" && renderInfo(),
+        view === "members" && renderMembers(),
+        view === "edit" && renderEdit()
+      ]
+    }
+  );
+}
+
+// src/components/chat/types.ts
+function getRoomPermissions(role, isWorkspaceAdmin) {
+  const isOwnerOrAdmin = role === "OWNER" || role === "ADMIN" || isWorkspaceAdmin;
+  return {
+    canCreateChannel: true,
+    canCreateDM: true,
+    canDeleteRoom: role === "OWNER" || !!isWorkspaceAdmin,
+    canArchiveRoom: isOwnerOrAdmin ?? false,
+    canManageMembers: isOwnerOrAdmin ?? false,
+    canEditRoomSettings: isOwnerOrAdmin ?? false
+  };
+}
+
+// src/components/chat/use-chat.ts
+function useChat(options = {}) {
+  const {
+    workspaceRole,
+    initialRooms,
+    initialMessages
+  } = options;
+  const api = useOrganifyApi();
+  const { gatewayUrl, authToken } = api;
+  const user = useOrganifyUser();
+  const { workspace } = useOrganifyWorkspace();
+  const userId = user?.id ?? "";
+  const workspaceId = workspace?.id ?? "";
+  const [rooms, setRooms] = useState(initialRooms ?? []);
+  const [messages, setMessages] = useState(initialMessages ?? []);
+  const [activeRoomId, setActiveRoomId] = useState(null);
+  const [loadingRooms, setLoadingRooms] = useState(false);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [hasMoreMessages, setHasMoreMessages] = useState(false);
+  const [messageCursor, setMessageCursor] = useState(null);
+  const [loadingMoreMessages, setLoadingMoreMessages] = useState(false);
+  const [roomMembers, setRoomMembers] = useState([]);
+  const [myRoomRole, setMyRoomRole] = useState(null);
+  const [typingUsers, setTypingUsers] = useState([]);
+  const [error, setError] = useState(null);
+  const isWorkspaceAdmin = workspaceRole === "OWNER" || workspaceRole === "ADMIN";
+  const isDemoMode = !!(initialRooms && initialRooms.length > 0);
+  const permissions = getRoomPermissions(myRoomRole, isWorkspaceAdmin);
+  const centralGql = useOrganifyGql();
+  const gql = useCallback(
+    async (query, variables) => {
+      return centralGql("chat", query, variables);
+    },
+    [centralGql]
+  );
+  const [userCache, setUserCache] = useState(/* @__PURE__ */ new Map());
+  const enrichedMessages = React7__default.useMemo(() => {
+    return messages.map((msg) => {
+      const cached = userCache.get(msg.authorId);
+      if (cached && !msg.authorName) {
+        return { ...msg, authorName: cached.displayName, authorAvatar: cached.avatarUrl };
+      }
+      return msg;
+    });
+  }, [messages, userCache]);
+  useEffect(() => {
+    setUserCache((prev) => {
+      const next = new Map(prev);
+      if (userId && user?.name) {
+        next.set(userId, { displayName: user.name, avatarUrl: user.avatarUrl ?? void 0 });
+      }
+      if (options.workspaceMembers) {
+        for (const member of options.workspaceMembers) {
+          if (member.id && !next.has(member.id)) {
+            next.set(member.id, {
+              displayName: member.displayName || member.email || `User`,
+              avatarUrl: member.avatarUrl ?? void 0
+            });
+          }
+        }
+      }
+      return next;
+    });
+  }, [userId, user, options.workspaceMembers]);
+  const fetchRooms = useCallback(async () => {
+    if (initialRooms && initialRooms.length > 0) return;
+    if (!workspaceId || workspaceId.startsWith("temp-")) return;
+    if (!userId) return;
+    setLoadingRooms(true);
+    setError(null);
+    try {
+      const data = await gql(
+        `query($workspaceId: String!) {
+          rooms(workspaceId: $workspaceId) {
+            items {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+            total hasMore
+          }
+        }`,
+        { workspaceId }
+      );
+      setRooms(data.rooms?.items ?? []);
+    } catch (err) {
+      console.error("[organify-chat] fetchRooms:", err);
+      setError("N\xE3o foi poss\xEDvel carregar as conversas. Tente novamente.");
+    } finally {
+      setLoadingRooms(false);
+    }
+  }, [workspaceId, userId, gql, initialRooms]);
+  const MESSAGE_FIELDS = `
+    id roomId authorId parentId
+    content edited editedAt createdAt
+    mentions { type targetId display }
+    reactions { emoji userId }
+  `;
+  const fetchMessages = useCallback(
+    async (roomId) => {
+      if (initialMessages && initialMessages.length > 0) {
+        const roomMessages = initialMessages.filter((m) => m.roomId === roomId);
+        setMessages(roomMessages);
+        setHasMoreMessages(false);
+        setMessageCursor(null);
+        return;
+      }
+      if (!userId) return;
+      setLoadingMessages(true);
+      setError(null);
+      try {
+        const data = await gql(
+          `query($roomId: ID!, $filter: MessageFilterInput) {
+            messages(roomId: $roomId, filter: $filter) {
+              items { ${MESSAGE_FIELDS} }
+              total hasMore nextCursor
+            }
+          }`,
+          { roomId, filter: { limit: 50 } }
+        );
+        setMessages(data.messages?.items ?? []);
+        setHasMoreMessages(data.messages?.hasMore ?? false);
+        setMessageCursor(data.messages?.nextCursor ?? null);
+      } catch (err) {
+        console.error("[organify-chat] fetchMessages:", err);
+        setError("Erro ao carregar mensagens.");
+      } finally {
+        setLoadingMessages(false);
+      }
+    },
+    [gql, initialMessages, userId]
+  );
+  const loadMoreMessages = useCallback(
+    async () => {
+      if (!activeRoomId || !hasMoreMessages || !messageCursor || loadingMoreMessages || !userId) return;
+      setLoadingMoreMessages(true);
+      try {
+        const data = await gql(
+          `query($roomId: ID!, $filter: MessageFilterInput) {
+            messages(roomId: $roomId, filter: $filter) {
+              items { ${MESSAGE_FIELDS} }
+              total hasMore nextCursor
+            }
+          }`,
+          { roomId: activeRoomId, filter: { limit: 50, cursor: messageCursor } }
+        );
+        const olderMessages = data.messages?.items ?? [];
+        setMessages((prev) => [...olderMessages, ...prev]);
+        setHasMoreMessages(data.messages?.hasMore ?? false);
+        setMessageCursor(data.messages?.nextCursor ?? null);
+      } catch (err) {
+        console.error("[organify-chat] loadMore:", err);
+      } finally {
+        setLoadingMoreMessages(false);
+      }
+    },
+    [gql, activeRoomId, hasMoreMessages, messageCursor, loadingMoreMessages, userId]
+  );
+  const fetchRoomMembers = useCallback(
+    async (roomId) => {
+      if (isDemoMode) return;
+      try {
+        const data = await gql(
+          `query($roomId: ID!) {
+            room(id: $roomId) {
+              members {
+                id userId role muted pinned joinedAt
+              }
+            }
+          }`,
+          { roomId }
+        );
+        const members = data?.room?.members ?? [];
+        setRoomMembers(members);
+        const myMembership = members.find((m) => m.userId === userId);
+        setMyRoomRole(myMembership?.role ?? null);
+      } catch (err) {
+        console.error("[organify-chat] fetchRoomMembers:", err);
+      }
+    },
+    [gql, userId, isDemoMode]
+  );
+  const selectRoom = useCallback(
+    (roomId) => {
+      if (activeRoomId === roomId) return;
+      if (!workspaceId || workspaceId.startsWith("temp-")) {
+        setActiveRoomId(roomId);
+        setMessages([]);
+        setRoomMembers([]);
+        setMyRoomRole(null);
+        setTypingUsers([]);
+        setHasMoreMessages(false);
+        setMessageCursor(null);
+        return;
+      }
+      setActiveRoomId(roomId);
+      setMessages([]);
+      setRoomMembers([]);
+      setMyRoomRole(null);
+      setTypingUsers([]);
+      setHasMoreMessages(false);
+      setMessageCursor(null);
+      fetchMessages(roomId);
+      fetchRoomMembers(roomId);
+    },
+    [activeRoomId, workspaceId, fetchMessages, fetchRoomMembers]
+  );
+  const sendMessage = useCallback(
+    async (content, replyToId) => {
+      if (!activeRoomId || !content.trim()) return;
+      const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const optimisticMsg = {
+        id: tempId,
+        roomId: activeRoomId,
+        authorId: userId,
+        content: content.trim(),
+        edited: false,
+        editedAt: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        mentions: [],
+        reactions: [],
+        replyToId: replyToId ?? null,
+        _status: "pending"
+      };
+      setMessages((prev) => [...prev, optimisticMsg]);
+      if (isDemoMode) {
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...m, id: `demo_${Date.now()}`, _status: "sent" } : m)
+        );
+        return;
+      }
+      try {
+        const input = { roomId: activeRoomId, content: content.trim() };
+        if (replyToId) input.parentId = replyToId;
+        const data = await gql(
+          `mutation($input: SendMessageInput!) {
+            sendMessage(input: $input) {
+              id roomId authorId parentId
+              content edited editedAt createdAt
+              mentions { type targetId display }
+              reactions { emoji userId }
+            }
+          }`,
+          { input }
+        );
+        if (data?.sendMessage) {
+          setMessages(
+            (prev) => prev.map((m) => m.id === tempId ? { ...data.sendMessage, _status: "sent" } : m)
+          );
+        } else {
+          setMessages(
+            (prev) => prev.map((m) => m.id === tempId ? { ...m, _status: "error" } : m)
+          );
+        }
+      } catch (err) {
+        console.error("[organify-chat] sendMessage:", err);
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...m, _status: "error" } : m)
+        );
+      }
+    },
+    [activeRoomId, gql, userId, isDemoMode]
+  );
+  const createRoom = useCallback(
+    async (input) => {
+      setError(null);
+      if (isDemoMode) {
+        const newRoom = {
+          id: `demo_room_${Date.now()}`,
+          name: input.name,
+          slug: input.name.toLowerCase().replace(/\s+/g, "-"),
+          type: input.type,
+          visibility: input.visibility,
+          description: input.description ?? null,
+          memberCount: 1,
+          unreadCount: 0,
+          avatarUrl: null,
+          createdBy: userId,
+          archived: false,
+          lastMessageAt: null
+        };
+        setRooms((prev) => [newRoom, ...prev]);
+        return newRoom;
+      }
+      try {
+        const data = await gql(
+          `mutation($input: CreateRoomInput!) {
+            createRoom(input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+          }`,
+          {
+            input: {
+              ...input,
+              workspaceId
+            }
+          }
+        );
+        const newRoom = data?.createRoom;
+        if (!newRoom) throw new Error("Failed to create room");
+        setRooms((prev) => [newRoom, ...prev]);
+        return newRoom;
+      } catch (err) {
+        console.error("[organify-chat] createRoom:", err);
+        setError(err.message || "N\xE3o foi poss\xEDvel criar a sala.");
+        return null;
+      }
+    },
+    [gql, workspaceId, isDemoMode, userId]
+  );
+  const createDirectMessage = useCallback(
+    async (targetUserId) => {
+      setError(null);
+      if (isDemoMode) {
+        const dm = {
+          id: `demo_dm_${Date.now()}`,
+          name: targetUserId,
+          slug: null,
+          type: "DIRECT",
+          visibility: "PRIVATE",
+          description: null,
+          memberCount: 2,
+          unreadCount: 0,
+          avatarUrl: null,
+          createdBy: userId,
+          archived: false,
+          lastMessageAt: null
+        };
+        setRooms((prev) => [dm, ...prev]);
+        return dm;
+      }
+      try {
+        const data = await gql(
+          `mutation($input: CreateRoomInput!) {
+            createRoom(input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+              members { userId role }
+            }
+          }`,
+          {
+            input: {
+              workspaceId,
+              name: "DM",
+              type: "DIRECT",
+              visibility: "PRIVATE",
+              memberIds: [targetUserId]
+            }
+          }
+        );
+        const dm = data?.createRoom;
+        if (!dm) throw new Error("Failed to create DM");
+        setRooms((prev) => {
+          if (prev.find((r) => r.id === dm.id)) return prev;
+          return [dm, ...prev];
+        });
+        return dm;
+      } catch (err) {
+        console.error("[organify-chat] createDM:", err);
+        setError(err.message || "N\xE3o foi poss\xEDvel iniciar a conversa.");
+        return null;
+      }
+    },
+    [gql, workspaceId, isDemoMode, userId]
+  );
+  const updateRoom = useCallback(
+    async (roomId, updates) => {
+      if (!permissions.canEditRoomSettings) return;
+      if (isDemoMode) {
+        setRooms((prev) => prev.map((r) => r.id === roomId ? { ...r, ...updates } : r));
+        return;
+      }
+      try {
+        const data = await gql(
+          `mutation($id: ID!, $input: UpdateRoomInput!) {
+            updateRoom(id: $id, input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+          }`,
+          { id: roomId, input: updates }
+        );
+        if (data?.updateRoom) {
+          setRooms((prev) => prev.map((r) => r.id === roomId ? data.updateRoom : r));
+        }
+      } catch (err) {
+        setError(err.message || "Erro ao atualizar sala.");
+      }
+    },
+    [gql, permissions.canEditRoomSettings, isDemoMode]
+  );
+  const archiveRoom = useCallback(
+    async (roomId) => {
+      if (!permissions.canArchiveRoom) return;
+      if (isDemoMode) {
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+        return;
+      }
+      try {
+        await gql(
+          `mutation($id: ID!, $input: UpdateRoomInput!) {
+            updateRoom(id: $id, input: $input) { id archived }
+          }`,
+          { id: roomId, input: { archived: true } }
+        );
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+      } catch (err) {
+        setError(err.message || "Erro ao arquivar sala.");
+      }
+    },
+    [gql, permissions.canArchiveRoom, activeRoomId, isDemoMode]
+  );
+  const leaveRoom = useCallback(
+    async (roomId) => {
+      if (isDemoMode) {
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+        return;
+      }
+      try {
+        await gql(
+          `mutation($roomId: ID!) { leaveRoom(roomId: $roomId) }`,
+          { roomId }
+        );
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+      } catch (err) {
+        setError(err.message || "Erro ao sair da sala.");
+      }
+    },
+    [gql, activeRoomId, isDemoMode]
+  );
+  const addMember = useCallback(
+    async (roomId, targetUserId, _role = "MEMBER") => {
+      if (!permissions.canManageMembers) return;
+      if (isDemoMode) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $userId: String!) {
+            inviteToRoom(roomId: $roomId, userId: $userId) { id userId role }
+          }`,
+          { roomId, userId: targetUserId }
+        );
+        fetchRoomMembers(roomId);
+      } catch (err) {
+        setError(err.message || "Erro ao adicionar membro.");
+      }
+    },
+    [gql, permissions.canManageMembers, fetchRoomMembers, isDemoMode]
+  );
+  const removeMember = useCallback(
+    async (roomId, targetUserId) => {
+      if (!permissions.canManageMembers) return;
+      if (isDemoMode) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $targetUserId: String!) {
+            removeMember(roomId: $roomId, targetUserId: $targetUserId)
+          }`,
+          { roomId, targetUserId }
+        );
+        setRoomMembers((prev) => prev.filter((m) => m.userId !== targetUserId));
+      } catch (err) {
+        setError(err.message || "Erro ao remover membro.");
+      }
+    },
+    [gql, permissions.canManageMembers, isDemoMode]
+  );
+  const updateMemberRole = useCallback(
+    async (roomId, targetUserId, role) => {
+      if (!permissions.canManageMembers) return;
+      if (isDemoMode) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $targetUserId: String!, $role: MemberRole!) {
+            updateMemberRole(roomId: $roomId, targetUserId: $targetUserId, role: $role) { id userId role }
+          }`,
+          { roomId, targetUserId, role }
+        );
+        setRoomMembers(
+          (prev) => prev.map((m) => m.userId === targetUserId ? { ...m, role } : m)
+        );
+      } catch (err) {
+        setError(err.message || "Erro ao atualizar cargo.");
+      }
+    },
+    [gql, permissions.canManageMembers, isDemoMode]
+  );
+  const editMessage = useCallback(
+    async (messageId, content) => {
+      if (!content.trim()) return;
+      if (isDemoMode) {
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === messageId ? { ...m, content: content.trim(), edited: true, editedAt: (/* @__PURE__ */ new Date()).toISOString() } : m
+          )
+        );
+        return;
+      }
+      try {
+        const data = await gql(
+          `mutation($id: ID!, $input: EditMessageInput!) {
+            editMessage(id: $id, input: $input) {
+              id roomId authorId parentId
+              content edited editedAt createdAt
+              mentions { type targetId display }
+              reactions { emoji userId }
+            }
+          }`,
+          { id: messageId, input: { content: content.trim() } }
+        );
+        if (data?.editMessage) {
+          setMessages(
+            (prev) => prev.map((m) => m.id === messageId ? { ...data.editMessage, _status: "sent" } : m)
+          );
+        }
+      } catch (err) {
+        console.error("[organify-chat] editMessage:", err);
+        setError(err.message || "Erro ao editar mensagem.");
+      }
+    },
+    [gql, isDemoMode]
+  );
+  const deleteMessage = useCallback(
+    async (messageId) => {
+      if (isDemoMode) {
+        setMessages((prev) => prev.filter((m) => m.id !== messageId));
+        return;
+      }
+      const msg = messages.find((m) => m.id === messageId);
+      if (!msg) return;
+      try {
+        await gql(
+          `mutation($id: ID!, $roomId: ID!) {
+            deleteMessage(id: $id, roomId: $roomId)
+          }`,
+          { id: messageId, roomId: msg.roomId }
+        );
+        setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      } catch (err) {
+        console.error("[organify-chat] deleteMessage:", err);
+        setError(err.message || "Erro ao eliminar mensagem.");
+      }
+    },
+    [gql, isDemoMode, messages]
+  );
+  const addReaction = useCallback(
+    async (messageId, emoji) => {
+      if (isDemoMode) {
+        setMessages(
+          (prev) => prev.map((m) => {
+            if (m.id !== messageId) return m;
+            const hasReaction = m.reactions.some((r) => r.emoji === emoji && r.userId === userId);
+            if (hasReaction) return m;
+            return { ...m, reactions: [...m.reactions, { emoji, userId }] };
+          })
+        );
+        return;
+      }
+      try {
+        await gql(
+          `mutation($messageId: ID!, $emoji: String!) {
+            addReaction(messageId: $messageId, emoji: $emoji) { emoji userId createdAt }
+          }`,
+          { messageId, emoji }
+        );
+        setMessages(
+          (prev) => prev.map((m) => {
+            if (m.id !== messageId) return m;
+            return { ...m, reactions: [...m.reactions, { emoji, userId }] };
+          })
+        );
+      } catch (err) {
+        console.error("[organify-chat] addReaction:", err);
+      }
+    },
+    [gql, userId, isDemoMode]
+  );
+  const removeReaction = useCallback(
+    async (messageId, emoji) => {
+      if (isDemoMode) {
+        setMessages(
+          (prev) => prev.map((m) => {
+            if (m.id !== messageId) return m;
+            return { ...m, reactions: m.reactions.filter((r) => !(r.emoji === emoji && r.userId === userId)) };
+          })
+        );
+        return;
+      }
+      try {
+        await gql(
+          `mutation($messageId: ID!, $emoji: String!) {
+            removeReaction(messageId: $messageId, emoji: $emoji)
+          }`,
+          { messageId, emoji }
+        );
+        setMessages(
+          (prev) => prev.map((m) => {
+            if (m.id !== messageId) return m;
+            return { ...m, reactions: m.reactions.filter((r) => !(r.emoji === emoji && r.userId === userId)) };
+          })
+        );
+      } catch (err) {
+        console.error("[organify-chat] removeReaction:", err);
+      }
+    },
+    [gql, userId, isDemoMode]
+  );
+  const reactToMessage = useCallback(
+    async (messageId, emoji) => {
+      const msg = messages.find((m) => m.id === messageId);
+      if (!msg) return;
+      const hasReaction = msg.reactions.some((r) => r.emoji === emoji && r.userId === userId);
+      if (hasReaction) {
+        await removeReaction(messageId, emoji);
+      } else {
+        await addReaction(messageId, emoji);
+      }
+    },
+    [messages, userId, addReaction, removeReaction]
+  );
+  useEffect(() => {
+    if (!userId || !activeRoomId) return;
+    if (isDemoMode) return;
+    const chatServiceUrl = api?.services?.chat || gatewayUrl;
+    const wsUrl = chatServiceUrl.replace(/^http/, "ws") + "/graphql/chat";
+    let ws = null;
+    let pingInterval;
+    let reconnectTimer;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 8;
+    let disposed = false;
+    function connect() {
+      if (disposed || reconnectAttempts >= maxReconnectAttempts) return;
+      try {
+        ws = new WebSocket(wsUrl, "graphql-transport-ws");
+        ws.onopen = () => {
+          reconnectAttempts = 0;
+          ws?.send(JSON.stringify({
+            type: "connection_init",
+            payload: { userId, workspaceId }
+          }));
+        };
+        ws.onmessage = (event) => {
+          try {
+            const msg = JSON.parse(event.data);
+            switch (msg.type) {
+              case "connection_ack":
+                ws?.send(JSON.stringify({
+                  id: "sub_msg_created",
+                  type: "subscribe",
+                  payload: {
+                    query: `subscription($roomId: ID!) {
+                      messageCreated(roomId: $roomId) {
+                        ${MESSAGE_FIELDS}
+                      }
+                    }`,
+                    variables: { roomId: activeRoomId }
+                  }
+                }));
+                ws?.send(JSON.stringify({
+                  id: "sub_msg_updated",
+                  type: "subscribe",
+                  payload: {
+                    query: `subscription($roomId: ID!) {
+                      messageUpdated(roomId: $roomId) {
+                        ${MESSAGE_FIELDS}
+                      }
+                    }`,
+                    variables: { roomId: activeRoomId }
+                  }
+                }));
+                ws?.send(JSON.stringify({
+                  id: "sub_msg_deleted",
+                  type: "subscribe",
+                  payload: {
+                    query: `subscription($roomId: ID!) {
+                      messageDeleted(roomId: $roomId)
+                    }`,
+                    variables: { roomId: activeRoomId }
+                  }
+                }));
+                ws?.send(JSON.stringify({
+                  id: "sub_typing",
+                  type: "subscribe",
+                  payload: {
+                    query: `subscription($roomId: ID!) {
+                      typingIndicator(roomId: $roomId) {
+                        roomId userId isTyping
+                      }
+                    }`,
+                    variables: { roomId: activeRoomId }
+                  }
+                }));
+                pingInterval = setInterval(() => {
+                  if (ws?.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: "ping" }));
+                  }
+                }, 25e3);
+                break;
+              case "next":
+                if (msg.id === "sub_msg_created" && msg.payload?.data?.messageCreated) {
+                  const newMsg = msg.payload.data.messageCreated;
+                  if (newMsg.authorId === userId) {
+                    setMessages(
+                      (prev) => prev.map(
+                        (m) => m._status === "pending" && m.content === newMsg.content && m.authorId === newMsg.authorId ? { ...newMsg, _status: "sent" } : m
+                      )
+                    );
+                  } else {
+                    setMessages((prev) => {
+                      if (prev.find((m) => m.id === newMsg.id)) return prev;
+                      return [...prev, newMsg];
+                    });
+                  }
+                }
+                if (msg.id === "sub_msg_updated" && msg.payload?.data?.messageUpdated) {
+                  const updated = msg.payload.data.messageUpdated;
+                  setMessages(
+                    (prev) => prev.map((m) => m.id === updated.id ? { ...updated, _status: "sent" } : m)
+                  );
+                }
+                if (msg.id === "sub_msg_deleted" && msg.payload?.data?.messageDeleted) {
+                  const deletedId = msg.payload.data.messageDeleted;
+                  setMessages((prev) => prev.filter((m) => m.id !== deletedId));
+                }
+                if (msg.id === "sub_typing" && msg.payload?.data?.typingIndicator) {
+                  const { userId: typerId, isTyping } = msg.payload.data.typingIndicator;
+                  if (typerId !== userId) {
+                    if (isTyping) {
+                      setTypingUsers(
+                        (prev) => prev.includes(typerId) ? prev : [...prev, typerId]
+                      );
+                      setTimeout(() => {
+                        setTypingUsers((prev) => prev.filter((id) => id !== typerId));
+                      }, 4e3);
+                    } else {
+                      setTypingUsers((prev) => prev.filter((id) => id !== typerId));
+                    }
+                  }
+                }
+                break;
+              case "pong":
+                break;
+              case "error":
+                console.warn("[organify-chat] Subscription error:", msg.payload);
+                break;
+              case "complete":
+                break;
+            }
+          } catch {
+          }
+        };
+        ws.onerror = () => {
+        };
+        ws.onclose = () => {
+          clearInterval(pingInterval);
+          if (!disposed && reconnectAttempts < maxReconnectAttempts) {
+            const delay = Math.min(1e3 * Math.pow(2, reconnectAttempts) + Math.random() * 500, 3e4);
+            reconnectAttempts++;
+            reconnectTimer = setTimeout(connect, delay);
+          }
+        };
+      } catch {
+        if (!disposed && reconnectAttempts < maxReconnectAttempts) {
+          reconnectAttempts++;
+          reconnectTimer = setTimeout(connect, 3e3);
+        }
+      }
+    }
+    connect();
+    return () => {
+      disposed = true;
+      clearInterval(pingInterval);
+      clearTimeout(reconnectTimer);
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ id: "sub_msg_created", type: "complete" }));
+        ws.send(JSON.stringify({ id: "sub_msg_updated", type: "complete" }));
+        ws.send(JSON.stringify({ id: "sub_msg_deleted", type: "complete" }));
+        ws.send(JSON.stringify({ id: "sub_typing", type: "complete" }));
+        ws.close(1e3, "unmount");
+      } else {
+        ws?.close();
+      }
+    };
+  }, [api?.services?.chat, gatewayUrl, userId, workspaceId, activeRoomId, isDemoMode]);
+  const sendTyping = useCallback(() => {
+  }, []);
+  useEffect(() => {
+    if (workspaceId && !workspaceId.startsWith("temp-")) {
+      fetchRooms();
+    }
+  }, [fetchRooms]);
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 5e3);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+  return {
+    // State
+    rooms,
+    messages: enrichedMessages,
+    activeRoomId,
+    loadingRooms,
+    loadingMessages,
+    hasMoreMessages,
+    loadingMoreMessages,
+    roomMembers,
+    myRoomRole,
+    permissions,
+    typingUsers,
+    error,
+    // Room selection
+    selectRoom,
+    // Messaging
+    sendMessage,
+    editMessage,
+    deleteMessage,
+    reactToMessage,
+    sendTyping,
+    loadMoreMessages,
+    // Room CRUD
+    createRoom,
+    createDirectMessage,
+    updateRoom,
+    archiveRoom,
+    leaveRoom,
+    // Member management
+    addMember,
+    removeMember,
+    updateMemberRole,
+    // Refresh
+    fetchRooms,
+    fetchRoomMembers,
+    userCache
+  };
+}
+var alertVariants = cva(
+  "group relative overflow-visible border-l-4 border border-glass-border bg-glass-highlight/90 backdrop-blur-xl py-5 pl-14 pr-6 shadow-glass rounded-sm",
+  {
+    variants: {
+      variant: {
+        success: "border-l-emerald-500 bg-emerald-500/[0.06]",
+        error: "border-l-rose-500 bg-rose-500/[0.06]",
+        warning: "border-l-amber-400 bg-amber-400/[0.06]",
+        info: "border-l-blue-500 bg-blue-500/[0.06]"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+var alertIconVariants = cva(
+  "absolute -left-4 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-glass-border-strong shadow-lg transition-transform duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:rotate-0 rounded-sm",
+  {
+    variants: {
+      variant: {
+        success: "bg-emerald-500 text-black rotate-[-6deg]",
+        error: "bg-rose-500 text-white rotate-[6deg]",
+        warning: "bg-amber-400 text-black rotate-[-3deg]",
+        info: "bg-blue-500 text-white rotate-[3deg]"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  title,
+  description,
+  icon,
+  onClose,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(alertVariants({ variant }), className), role: "alert", ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: cn(alertIconVariants({ variant })), children: icon || /* @__PURE__ */ jsxs(Fragment, { children: [
+      variant === "success" && /* @__PURE__ */ jsx(OrgCheckCircle, { className: "w-5 h-5" }),
+      variant === "error" && /* @__PURE__ */ jsx(OrgError, { className: "w-5 h-5" }),
+      variant === "warning" && /* @__PURE__ */ jsx(OrgWarning, { className: "w-5 h-5" }),
+      variant === "info" && /* @__PURE__ */ jsx(OrgInfo, { className: "w-5 h-5" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-sm shadow-inner-light" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold text-org-text", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-light text-org-text-secondary", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: action.onClick,
+            className: cn(
+              "whitespace-nowrap px-3 py-1.5 text-xs font-semibold tracking-wide transition-all border rounded-sm",
+              variant === "error" && "border-rose-500/30 bg-rose-500/20 text-rose-300 hover:bg-rose-500/30",
+              variant === "success" && "border-emerald-500/30 bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30",
+              variant === "warning" && "border-amber-400/30 bg-amber-400/20 text-amber-300 hover:bg-amber-400/30",
+              variant === "info" && "border-blue-500/30 bg-blue-500/20 text-blue-300 hover:bg-blue-500/30"
+            ),
+            children: action.label
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 text-org-text-muted transition-colors hover:text-org-text",
+            "aria-label": "Close alert",
+            children: /* @__PURE__ */ jsx(OrgClose, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/chat/chat-mock-data.ts
+var MOCK_USERS = [
+  {
+    id: "user-1",
+    displayName: "Ana Silva",
+    email: "ana.silva@organify.dev",
+    avatarUrl: null,
+    status: "ONLINE"
+  },
+  {
+    id: "user-2",
+    displayName: "Bruno Costa",
+    email: "bruno.costa@organify.dev",
+    avatarUrl: null,
+    status: "ONLINE"
+  },
+  {
+    id: "user-3",
+    displayName: "Carla Santos",
+    email: "carla.santos@organify.dev",
+    avatarUrl: null,
+    status: "AWAY"
+  },
+  {
+    id: "user-4",
+    displayName: "Diego Ferreira",
+    email: "diego.ferreira@organify.dev",
+    avatarUrl: null,
+    status: "ONLINE"
+  },
+  {
+    id: "user-5",
+    displayName: "Elena Rodrigues",
+    email: "elena.rodrigues@organify.dev",
+    avatarUrl: null,
+    status: "BUSY"
+  },
+  {
+    id: "user-6",
+    displayName: "Fernando Lima",
+    email: "fernando.lima@organify.dev",
+    avatarUrl: null,
+    status: "ONLINE"
+  },
+  {
+    id: "user-7",
+    displayName: "Gabriela Alves",
+    email: "gabriela.alves@organify.dev",
+    avatarUrl: null,
+    status: "OFFLINE"
+  },
+  {
+    id: "user-8",
+    displayName: "Hugo Martins",
+    email: "hugo.martins@organify.dev",
+    avatarUrl: null,
+    status: "ONLINE"
+  }
+];
+var MOCK_PROJECTS = [
+  { id: "proj-1", name: "Organify Platform", key: "ORG" },
+  { id: "proj-2", name: "Mobile App", key: "MOB" },
+  { id: "proj-3", name: "Design System", key: "DS" },
+  { id: "proj-4", name: "Marketing Website", key: "WEB" },
+  { id: "proj-5", name: "API Gateway", key: "API" }
+];
+function getMockMentionOptions(query) {
+  const q = query.toLowerCase();
+  const options = [];
+  MOCK_USERS.filter(
+    (u) => u.displayName.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q)
+  ).slice(0, 5).forEach((u) => {
+    options.push({
+      id: u.id,
+      type: "user",
+      display: u.displayName,
+      avatarUrl: u.avatarUrl,
+      subtitle: u.email
+    });
+  });
+  MOCK_PROJECTS.filter(
+    (p) => p.name.toLowerCase().includes(q) || p.key.toLowerCase().includes(q)
+  ).slice(0, 3).forEach((p) => {
+    options.push({
+      id: p.id,
+      type: "project",
+      display: p.name,
+      subtitle: p.key
+    });
+  });
+  return options;
+}
+var REPLY_TEMPLATES = [
+  "Excelente ideia! \u{1F44D}",
+  "Concordo totalmente.",
+  "Vou verificar isso agora.",
+  "Obrigado pela atualiza\xE7\xE3o! \u{1F389}",
+  "Isso faz sentido.",
+  "Pode deixar comigo!",
+  "Bom ponto! N\xE3o tinha pensado nisso.",
+  "J\xE1 estou trabalhando nisso.",
+  "Perfeito, vamos em frente!",
+  "\xD3timo trabalho! \u{1F680}",
+  "Interessante... vou investigar.",
+  "Combinado!",
+  "Aceito o desafio! \u{1F4AA}",
+  "Bom demais!",
+  "Isso vai ajudar muito."
+];
+var RANDOM_COMMENTS = [
+  "Algu\xE9m viu o novo design? Est\xE1 incr\xEDvel!",
+  "Precisamos revisar a API de notifica\xE7\xF5es.",
+  "O deploy de hoje foi um sucesso! \u{1F38A}",
+  "Quem pode me ajudar com TypeScript?",
+  "Reuni\xE3o marcada para amanh\xE3 \xE0s 10h.",
+  "A feature de chat ficou muito boa!",
+  "Encontrei um bug no formul\xE1rio de login.",
+  "Code review pendente no PR #234",
+  "Algu\xE9m tem tempo para pair programming?",
+  "Nova sprint come\xE7a na segunda-feira!",
+  "Preciso de feedback no mockup.",
+  "Performance melhorou 40% com as \xFAltimas mudan\xE7as!",
+  "Documenta\xE7\xE3o atualizada no Notion.",
+  "Quem quer caf\xE9? \u2615",
+  "Cliente adorou a demo!"
+];
+function getRandomUser() {
+  return MOCK_USERS[Math.floor(Math.random() * MOCK_USERS.length)];
+}
+function getRandomTemplate() {
+  return REPLY_TEMPLATES[Math.floor(Math.random() * REPLY_TEMPLATES.length)];
+}
+function getRandomComment() {
+  return RANDOM_COMMENTS[Math.floor(Math.random() * RANDOM_COMMENTS.length)];
+}
+function generateAutoReplies(userMessage, roomId, count = 5) {
+  const replies = [];
+  const now = Date.now();
+  for (let i = 0; i < count; i++) {
+    const user = getRandomUser();
+    const isReply = Math.random() > 0.6;
+    const isComment = Math.random() > 0.7;
+    replies.push({
+      id: `mock-${Date.now()}-${i}`,
+      roomId,
+      authorId: user.id,
+      authorName: user.displayName,
+      content: isComment ? getRandomComment() : getRandomTemplate(),
+      createdAt: new Date(now + (i + 1) * 2e3).toISOString(),
+      // 2s interval
+      replyToId: isReply ? userMessage.id : null,
+      edited: false,
+      editedAt: null,
+      mentions: [],
+      reactions: []
+    });
+  }
+  return replies;
+}
+var TypingIndicatorMock = class {
+  typingUsers = /* @__PURE__ */ new Set();
+  timeouts = /* @__PURE__ */ new Map();
+  listeners = [];
+  constructor() {
+  }
+  /** Simula alguém começando a digitar */
+  startTyping(userId) {
+    const user = userId ? MOCK_USERS.find((u) => u.id === userId) : getRandomUser();
+    if (!user) return;
+    const existingTimeout = this.timeouts.get(user.id);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+    this.typingUsers.add(user.displayName);
+    this.notify();
+    const duration = 3e3 + Math.random() * 2e3;
+    const timeout = setTimeout(() => {
+      this.stopTyping(user.id);
+    }, duration);
+    this.timeouts.set(user.id, timeout);
+  }
+  /** Para de digitar */
+  stopTyping(userId) {
+    const user = MOCK_USERS.find((u) => u.id === userId);
+    if (!user) return;
+    this.typingUsers.delete(user.displayName);
+    const timeout = this.timeouts.get(userId);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(userId);
+    }
+    this.notify();
+  }
+  /** Subscribe to typing changes */
+  subscribe(callback) {
+    this.listeners.push(callback);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== callback);
+    };
+  }
+  notify() {
+    const users = Array.from(this.typingUsers);
+    this.listeners.forEach((cb) => cb(users));
+  }
+  /** Simula typing indicator aleatório */
+  simulateRandomTyping() {
+    const delay = 2e3 + Math.random() * 6e3;
+    setTimeout(() => {
+      if (Math.random() > 0.5) {
+        this.startTyping();
+      }
+      this.simulateRandomTyping();
+    }, delay);
+  }
+  clear() {
+    this.typingUsers.clear();
+    this.timeouts.forEach((timeout) => clearTimeout(timeout));
+    this.timeouts.clear();
+    this.notify();
+  }
+};
+var typingIndicator = new TypingIndicatorMock();
+if (typeof window !== "undefined") {
+  typingIndicator.simulateRandomTyping();
+}
+function useMediaQuery2(query) {
+  const [matches, setMatches] = React7.useState(false);
+  React7.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function OrganifyChat({
+  workspaceRole,
+  workspaceMembers = [],
+  initialRooms,
+  initialMessages,
+  className
+}) {
+  const user = useOrganifyUser();
+  const userId = user?.id ?? "";
+  const chat = useChat({
+    workspaceRole,
+    initialRooms,
+    initialMessages,
+    workspaceMembers
+  });
+  const isMobile = !useMediaQuery2("(min-width: 768px)");
+  const [createDialogOpen, setCreateDialogOpen] = React7.useState(false);
+  const [managementOpen, setManagementOpen] = React7.useState(false);
+  const [mobileView, setMobileView] = React7.useState("sidebar");
+  const activeRoom = React7.useMemo(
+    () => chat.rooms.find((r) => r.id === chat.activeRoomId),
+    [chat.rooms, chat.activeRoomId]
+  );
+  const handleRoomSelect = (roomId) => {
+    chat.selectRoom(roomId);
+    if (isMobile) {
+      setMobileView("room");
+    }
+  };
+  const handleBackToSidebar = () => {
+    setMobileView("sidebar");
+  };
+  const handleOpenManagement = () => {
+    if (isMobile) {
+      setMobileView("management");
+    } else {
+      setManagementOpen(true);
+    }
+  };
+  const handleCloseManagement = () => {
+    if (isMobile) {
+      setMobileView("room");
+    } else {
+      setManagementOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full min-h-[500px]",
+        "bg-theme-surface border border-theme-subtle rounded-sm overflow-hidden",
+        className
+      ),
+      children: [
+        chat.error && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 z-50 px-4 pt-2 animate-in slide-in-from-top-2 duration-[400ms]", children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "error",
+            title: "Erro",
+            description: chat.error,
+            className: "py-3 text-xs"
+          }
+        ) }),
+        !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[260px] shrink-0", children: /* @__PURE__ */ jsx(
+            ChatSidebar,
+            {
+              rooms: chat.rooms,
+              activeRoomId: chat.activeRoomId,
+              loading: chat.loadingRooms,
+              onSelectRoom: chat.selectRoom,
+              onCreateRoom: () => setCreateDialogOpen(true)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            ChatMessages,
+            {
+              room: activeRoom,
+              messages: chat.messages,
+              loading: chat.loadingMessages,
+              typingUsers: chat.typingUsers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onSendMessage: chat.sendMessage,
+              onEditMessage: chat.editMessage,
+              onDeleteMessage: chat.deleteMessage,
+              onReactToMessage: chat.reactToMessage,
+              onTyping: chat.sendTyping,
+              onStopTyping: chat.sendTyping,
+              onOpenManagement: () => setManagementOpen(true),
+              isMobile: false,
+              mentionUsers: workspaceMembers,
+              mentionProjects: MOCK_PROJECTS,
+              hasMore: chat.hasMoreMessages,
+              onLoadMore: chat.loadMoreMessages,
+              loadingMore: chat.loadingMoreMessages
+            }
+          ) }),
+          managementOpen && activeRoom && /* @__PURE__ */ jsx("div", { className: "w-[300px] shrink-0 border-l border-theme-subtle bg-theme-glass", children: /* @__PURE__ */ jsx(
+            RoomManagementPanel,
+            {
+              room: activeRoom,
+              members: chat.roomMembers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onClose: () => setManagementOpen(false),
+              onUpdateRoom: chat.updateRoom,
+              onArchiveRoom: chat.archiveRoom,
+              onLeaveRoom: chat.leaveRoom,
+              onRemoveMember: chat.removeMember,
+              onUpdateMemberRole: chat.updateMemberRole
+            }
+          ) })
+        ] }),
+        isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          mobileView === "sidebar" && /* @__PURE__ */ jsx("div", { className: "w-full animate-in fade-in-0 slide-in-from-left-5 duration-[400ms]", children: /* @__PURE__ */ jsx(
+            ChatSidebar,
+            {
+              rooms: chat.rooms,
+              activeRoomId: chat.activeRoomId,
+              loading: chat.loadingRooms,
+              onSelectRoom: handleRoomSelect,
+              onCreateRoom: () => setCreateDialogOpen(true)
+            }
+          ) }),
+          mobileView === "room" && activeRoom && /* @__PURE__ */ jsx("div", { className: "w-full animate-in fade-in-0 slide-in-from-right-5 duration-[400ms]", children: /* @__PURE__ */ jsx(
+            ChatMessages,
+            {
+              room: activeRoom,
+              messages: chat.messages,
+              loading: chat.loadingMessages,
+              typingUsers: chat.typingUsers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onSendMessage: chat.sendMessage,
+              onEditMessage: chat.editMessage,
+              onDeleteMessage: chat.deleteMessage,
+              onReactToMessage: chat.reactToMessage,
+              onTyping: chat.sendTyping,
+              onStopTyping: chat.sendTyping,
+              onOpenManagement: handleOpenManagement,
+              onBack: handleBackToSidebar,
+              isMobile: true,
+              mentionUsers: workspaceMembers,
+              mentionProjects: MOCK_PROJECTS,
+              hasMore: chat.hasMoreMessages,
+              onLoadMore: chat.loadMoreMessages,
+              loadingMore: chat.loadingMoreMessages
+            }
+          ) }),
+          mobileView === "management" && activeRoom && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-50 flex", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 bg-black/50 backdrop-blur-sm",
+                onClick: handleCloseManagement
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-[85%] max-w-sm h-full bg-theme-glass-heavy backdrop-blur-2xl border-l border-theme-subtle animate-in slide-in-from-right-5 duration-[400ms]", children: /* @__PURE__ */ jsx(
+              RoomManagementPanel,
+              {
+                room: activeRoom,
+                members: chat.roomMembers,
+                currentUserId: userId,
+                permissions: chat.permissions,
+                onClose: handleCloseManagement,
+                onUpdateRoom: chat.updateRoom,
+                onArchiveRoom: chat.archiveRoom,
+                onLeaveRoom: chat.leaveRoom,
+                onRemoveMember: chat.removeMember,
+                onUpdateMemberRole: chat.updateMemberRole
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CreateRoomDialog,
+          {
+            open: createDialogOpen,
+            onOpenChange: setCreateDialogOpen,
+            onCreateChannel: async (data) => {
+              const room = await chat.createRoom({
+                name: data.name,
+                type: "CHANNEL",
+                visibility: data.visibility,
+                description: data.description,
+                memberIds: data.memberIds
+              });
+              if (room) chat.selectRoom(room.id);
+              return room;
+            },
+            onCreateDM: async (targetUserId) => {
+              const room = await chat.createDirectMessage(targetUserId);
+              if (room) chat.selectRoom(room.id);
+              return room;
+            },
+            workspaceMembers
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Alert, Button, ChatMessages, ChatSidebar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Input, Label, MOCK_PROJECTS, MOCK_USERS, MentionPopover, MessageBubble, MessageInput, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, orgLoaderVariants, typingIndicator, useChat };
+//# sourceMappingURL=chunk-2Y3W6JSG.js.map
+//# sourceMappingURL=chunk-2Y3W6JSG.js.map