@oro.ad/nuxt-claude-devtools 1.3.0 → 1.5.1

package/dist/runtime/overlay/components/ChatOverlay.vue

@@ -1,173 +1,76 @@
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useClaudeChat } from "../../shared/composables/useClaudeChat";
 import { useVoiceInput } from "../../shared/composables/useVoiceInput";
 import { useShare } from "../../shared/composables/useShare";
-import MarkdownContent from "./MarkdownContent.vue";
-import ToolCallBlock from "./ToolCallBlock.vue";
+import { useMessageContext } from "../composables/useMessageContext";
+import { useMobileSwipe, usePanelInteraction, usePanelPosition } from "../composables";
+import { ChatHeader, ChatInput, ChatMessages, ClaudeBadge, HistoryPanel, NicknameModal } from "./chat";
 const props = defineProps({
   socketUrl: { type: String, required: false }
 });
 const isOpen = ref(false);
-const inputMessage = ref("");
-const messagesContainer = ref(null);
-const textareaRef = ref(null);
+const isMobile = ref(false);
 const panelRef = ref(null);
 const headerRef = ref(null);
-const fabRef = ref(null);
-const FAB_STORAGE_KEY = "claude-overlay-fab-position";
-const fabPosition = ref(null);
-const isDraggingFab = ref(false);
-const fabDragStart = ref({ x: 0, y: 0, fabX: 0, fabY: 0 });
-const fabDragMoved = ref(false);
-function loadFabPosition() {
-  try {
-    const saved = localStorage.getItem(FAB_STORAGE_KEY);
-    if (saved) {
-      fabPosition.value = JSON.parse(saved);
-    }
-  } catch {
-  }
-}
-function saveFabPosition() {
-  if (fabPosition.value) {
-    try {
-      localStorage.setItem(FAB_STORAGE_KEY, JSON.stringify(fabPosition.value));
-    } catch {
-    }
-  }
-}
-function getFabStyle() {
-  if (!fabPosition.value) return {};
-  return {
-    left: `${fabPosition.value.x}px`,
-    top: `${fabPosition.value.y}px`,
-    right: "auto",
-    bottom: "auto"
-  };
-}
-function handleFabDragStart(e) {
-  const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-  const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
-  const fab = fabRef.value;
-  if (!fab) return;
-  const rect = fab.getBoundingClientRect();
-  fabDragStart.value = {
-    x: clientX,
-    y: clientY,
-    fabX: rect.left,
-    fabY: rect.top
-  };
-  isDraggingFab.value = true;
-  fabDragMoved.value = false;
-  window.addEventListener("mousemove", handleFabDragMove);
-  window.addEventListener("mouseup", handleFabDragEnd);
-  window.addEventListener("touchmove", handleFabDragMove, { passive: false });
-  window.addEventListener("touchend", handleFabDragEnd);
-}
-function handleFabDragMove(e) {
-  if (!isDraggingFab.value) return;
-  e.preventDefault();
-  const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-  const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
-  const deltaX = clientX - fabDragStart.value.x;
-  const deltaY = clientY - fabDragStart.value.y;
-  if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
-    fabDragMoved.value = true;
-  }
-  const fabSize = 56;
-  const padding = 16;
-  let newX = fabDragStart.value.fabX + deltaX;
-  let newY = fabDragStart.value.fabY + deltaY;
-  newX = Math.max(padding, Math.min(window.innerWidth - fabSize - padding, newX));
-  newY = Math.max(padding, Math.min(window.innerHeight - fabSize - padding, newY));
-  fabPosition.value = { x: newX, y: newY };
+const chatInputRef = ref(null);
+const chatMessagesRef = ref(null);
+function checkMobile() {
+  isMobile.value = window.innerWidth <= 640;
 }
-function handleFabDragEnd() {
-  isDraggingFab.value = false;
-  window.removeEventListener("mousemove", handleFabDragMove);
-  window.removeEventListener("mouseup", handleFabDragEnd);
-  window.removeEventListener("touchmove", handleFabDragMove);
-  window.removeEventListener("touchend", handleFabDragEnd);
-  if (fabDragMoved.value) {
-    saveFabPosition();
-  }
-}
-function handleFabClick() {
-  if (!fabDragMoved.value) {
-    toggleOverlay();
-  }
-}
-const touchStartY = ref(0);
-const touchDeltaY = ref(0);
-const isSwiping = ref(false);
-const isSwipeClosing = ref(false);
-const SWIPE_THRESHOLD = 100;
-function handleTouchStart(e) {
-  if (window.innerWidth > 640) return;
-  touchStartY.value = e.touches[0].clientY;
-  touchDeltaY.value = 0;
-  isSwiping.value = true;
-}
-function handleTouchMove(e) {
-  if (!isSwiping.value || window.innerWidth > 640) return;
-  const currentY = e.touches[0].clientY;
-  const delta = currentY - touchStartY.value;
-  if (delta > 0) {
-    e.preventDefault();
-    touchDeltaY.value = delta;
-    if (panelRef.value) {
-      panelRef.value.style.transform = `translateY(${delta}px)`;
-      panelRef.value.style.transition = "none";
-    }
-  }
+const {
+  badgePos,
+  panelSize,
+  panelScreenPos,
+  load: loadPanelState,
+  openPanel,
+  closePanel,
+  onBadgeDragEnd,
+  getPanelStyle
+} = usePanelPosition();
+const {
+  isDragging: isPanelDragging,
+  isResizing: isPanelResizing,
+  activeEdge: activeResizeEdge,
+  hoveredEdge,
+  cursor: resizeCursor,
+  startDrag: handlePanelDragStart,
+  startResize: handlePanelResizeStart,
+  onMouseMove: handlePanelMouseMove,
+  onMouseLeave: handlePanelMouseLeave
+} = usePanelInteraction({
+  panelScreenPos,
+  panelSize,
+  panelRef,
+  isMobile
+});
+function lockBodyScroll(lock) {
+  if (typeof document === "undefined") return;
+  document.body.style.overflow = lock ? "hidden" : "";
+  document.body.style.touchAction = lock ? "none" : "";
 }
-function handleTouchEnd() {
-  if (!isSwiping.value || window.innerWidth > 640) return;
-  isSwiping.value = false;
-  if (panelRef.value) {
-    panelRef.value.style.transition = "transform 0.3s ease-out";
-    if (touchDeltaY.value > SWIPE_THRESHOLD) {
-      isSwipeClosing.value = true;
-      panelRef.value.style.transform = "translateY(100%)";
-      setTimeout(() => {
-        isOpen.value = false;
-        lockBodyScroll(false);
-        nextTick(() => {
-          isSwipeClosing.value = false;
-          if (panelRef.value) {
-            panelRef.value.style.transform = "";
-            panelRef.value.style.transition = "";
-          }
-        });
-      }, 300);
-    } else {
-      panelRef.value.style.transform = "translateY(0)";
-      setTimeout(() => {
-        if (panelRef.value) {
-          panelRef.value.style.transition = "";
-        }
-      }, 300);
-    }
+const {
+  isSwipeClosing,
+  handleTouchStart,
+  handleTouchEnd,
+  setupTouchMoveListener,
+  cleanupTouchMoveListener
+} = useMobileSwipe({
+  panelRef,
+  headerRef,
+  onSwipeClose: () => {
+    isOpen.value = false;
+    lockBodyScroll(false);
   }
-  touchDeltaY.value = 0;
-}
+});
 const commands = ref([]);
-const showCommandsAutocomplete = ref(false);
 const showHistory = ref(false);
-const contextEnabled = ref({
-  viewport: true,
-  userAgent: true,
-  routing: true
-});
 const {
   userId,
   nickname,
-  users: _users,
   showNicknameModal,
   nicknameError,
   isShareMode,
-  sharingActiveOnServer: _sharingActiveOnServer,
   initShare,
   setNickname,
   needsNicknameImmediate,
@@ -179,11 +82,9 @@ const {
   isOwnMessage,
   copyShareLink
 } = useShare({
-  getTunnelUrl: () => props.socketUrl || null,
+  getBaseUrl: () => props.socketUrl || window.location.origin,
   log: (...args) => {
-    if (import.meta.env.DEV) {
-      console.log("[ChatOverlay:Share]", ...args);
-    }
+    if (import.meta.env.DEV) console.log("[ChatOverlay:Share]", ...args);
   }
 });
 const {
@@ -192,11 +93,11 @@ const {
   conversations,
   isConnected,
   isProcessing,
-  statusText,
   statusColor,
   connectSocket,
   disconnect,
   sendMessage: sendChatMessage,
+  stopGeneration,
   newChat,
   toggleHistory,
   selectConversation,
@@ -208,9 +109,7 @@ const {
     commands.value = cmds;
   },
   log: (...args) => {
-    if (import.meta.env.DEV) {
-      console.log("[ChatOverlay]", ...args);
-    }
+    if (import.meta.env.DEV) console.log("[ChatOverlay]", ...args);
   }
 });
 const {
@@ -221,227 +120,121 @@ const {
 } = useVoiceInput();
 const showShareCopied = ref(false);
 const pendingNicknameAction = ref(null);
-const nicknameInput = ref("");
-const filteredCommands = computed(() => {
-  if (!showCommandsAutocomplete.value) return [];
-  const match = inputMessage.value.match(/(?:^|\s)\/(\S*)$/);
-  if (!match) return [];
-  const query = match[1].toLowerCase();
-  return commands.value.filter(
-    (cmd) => cmd.name.toLowerCase().includes(query)
-  ).slice(0, 5);
-});
-function stripContextBlock(content) {
-  return content.replace(/^\[context\]\n[\s\S]*?\n\[\/context\]\n?/, "").trim();
-}
-function getDisplayContent(message) {
-  return stripContextBlock(message.content);
-}
+const { generateContextBlock } = useMessageContext();
 function collectContext() {
-  const parts = [];
-  if (contextEnabled.value.viewport) {
-    parts.push(`viewport: ${window.innerWidth}x${window.innerHeight}`);
-  }
-  if (contextEnabled.value.userAgent) {
-    const ua = navigator.userAgent;
-    let browser = "Unknown";
-    if (ua.includes("Firefox/")) browser = "Firefox";
-    else if (ua.includes("Edg/")) browser = "Edge";
-    else if (ua.includes("Chrome/")) browser = "Chrome";
-    else if (ua.includes("Safari/") && !ua.includes("Chrome")) browser = "Safari";
-    let os = "Unknown";
-    if (ua.includes("Windows")) os = "Windows";
-    else if (ua.includes("Mac OS")) os = "macOS";
-    else if (ua.includes("Linux")) os = "Linux";
-    else if (ua.includes("Android")) os = "Android";
-    else if (ua.includes("iPhone") || ua.includes("iPad")) os = "iOS";
-    parts.push(`browser: ${browser} on ${os}`);
-  }
-  if (contextEnabled.value.routing) {
-    parts.push(`route: ${window.location.pathname}`);
-    if (window.location.search) {
-      parts.push(`query: ${window.location.search}`);
+  const context = {
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    userAgent: navigator.userAgent,
+    routing: {
+      path: window.location.pathname,
+      fullPath: window.location.pathname + window.location.search,
+      query: window.location.search ? Object.fromEntries(new URLSearchParams(window.location.search)) : void 0
     }
-  }
-  if (parts.length === 0) return null;
-  return `[context]
-${parts.join("\n")}
-[/context]
-`;
-}
-function handleInput() {
-  const match = inputMessage.value.match(/(?:^|\s)\/\S*$/);
-  showCommandsAutocomplete.value = !!match;
-  autoResizeTextarea();
-}
-function autoResizeTextarea() {
-  const textarea = textareaRef.value;
-  if (!textarea) return;
-  textarea.style.height = "auto";
-  textarea.style.height = `${Math.min(textarea.scrollHeight, 280)}px`;
-}
-function selectCommand(cmd) {
-  const match = inputMessage.value.match(/(?:^|\s)(\/\S*)$/);
-  if (match) {
-    const slashIndex = inputMessage.value.length - match[1].length;
-    inputMessage.value = inputMessage.value.slice(0, slashIndex) + `/${cmd.name} `;
-  }
-  showCommandsAutocomplete.value = false;
-  textareaRef.value?.focus();
-  nextTick(autoResizeTextarea);
+  };
+  return generateContextBlock(context) + "\n";
 }
-function handleSubmit() {
-  if (!inputMessage.value.trim() || isProcessing.value) return;
+function handleMessageSubmit(message, attachments) {
   if (needsNicknameForMessage()) {
     pendingNicknameAction.value = "message";
     showNicknameModal.value = true;
-    nicknameInput.value = "";
     return;
   }
   const context = collectContext();
-  const messageWithContext = context ? context + inputMessage.value : inputMessage.value;
-  sendChatMessage(messageWithContext, isShareMode.value ? userId.value || void 0 : void 0, nickname.value || void 0);
-  inputMessage.value = "";
-  showCommandsAutocomplete.value = false;
-  if (textareaRef.value) {
-    textareaRef.value.style.height = "auto";
-  }
-}
-function handleKeydown(e) {
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    handleSubmit();
-  }
-  if (e.key === "Escape") {
-    if (showCommandsAutocomplete.value) {
-      showCommandsAutocomplete.value = false;
-    } else if (showHistory.value) {
-      showHistory.value = false;
-    } else {
-      isOpen.value = false;
-    }
-  }
-}
-function lockBodyScroll(lock) {
-  if (typeof document === "undefined") return;
-  if (lock) {
-    document.body.style.overflow = "hidden";
-    document.body.style.touchAction = "none";
-  } else {
-    document.body.style.overflow = "";
-    document.body.style.touchAction = "";
-  }
-}
-function toggleOverlay() {
-  isOpen.value = !isOpen.value;
-  if (isOpen.value) {
-    if (window.innerWidth <= 640) {
-      lockBodyScroll(true);
-    }
-    nextTick(() => {
-      textareaRef.value?.focus();
-      scrollToBottom();
-    });
-  } else {
-    lockBodyScroll(false);
-  }
-}
-function scrollToBottom() {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-  }
-}
-function handleToggleHistory() {
-  showHistory.value = !showHistory.value;
-  if (showHistory.value) {
-    toggleHistory();
-  }
-}
-function handleSelectConversation(id) {
-  selectConversation(id);
-  showHistory.value = false;
-}
-function handleVoiceInput() {
-  toggleVoiceInput((transcript) => {
-    inputMessage.value += transcript + " ";
-    nextTick(autoResizeTextarea);
-  });
+  sendChatMessage(
+    context + message,
+    isShareMode.value ? userId.value || void 0 : void 0,
+    nickname.value || void 0,
+    attachments
+  );
 }
 function handleShareClick() {
   if (needsNicknameForShare()) {
     pendingNicknameAction.value = "share";
     showNicknameModal.value = true;
-    nicknameInput.value = "";
   } else {
     doShareCopy();
   }
 }
 async function doShareCopy() {
-  const success = await copyShareLink();
-  if (success) {
+  if (await copyShareLink()) {
     showShareCopied.value = true;
     setTimeout(() => {
       showShareCopied.value = false;
     }, 2e3);
   }
 }
-function handleNicknameSubmit() {
-  const name = nicknameInput.value.trim();
-  if (name.length < 2 || name.length > 20) return;
+function handleNicknameSubmit(name) {
   setNickname(name);
-  if (socket.value) {
-    registerUser(socket.value);
-  }
+  if (socket.value) registerUser(socket.value);
   showNicknameModal.value = false;
   if (pendingNicknameAction.value === "share") {
     doShareCopy();
-  } else if (pendingNicknameAction.value === "message") {
-    handleSubmit();
   }
   pendingNicknameAction.value = null;
 }
 function handleNicknameCancel() {
   showNicknameModal.value = false;
   pendingNicknameAction.value = null;
-  nicknameInput.value = "";
 }
-watch(isOpen, (open) => {
-  if (!open) {
-    lockBodyScroll(false);
-  }
-  nextTick(() => {
-    if (open && headerRef.value) {
-      headerRef.value.addEventListener("touchmove", handleTouchMove, { passive: false });
-    }
+function handleToggleHistory() {
+  showHistory.value = !showHistory.value;
+  if (showHistory.value) toggleHistory();
+}
+function handleSelectConversation(id) {
+  selectConversation(id);
+  showHistory.value = false;
+}
+function handleVoiceInput() {
+  toggleVoiceInput((transcript) => {
+    chatInputRef.value?.appendText(transcript);
   });
-});
-watch(
-  () => messages.value.length,
-  () => {
-    nextTick(scrollToBottom);
+}
+function handleStopGeneration() {
+  stopGeneration();
+}
+function handleClose() {
+  closePanel();
+  isOpen.value = false;
+  lockBodyScroll(false);
+}
+function toggleOverlay() {
+  if (!isOpen.value) {
+    if (window.innerWidth <= 640) lockBodyScroll(true);
+    openPanel();
+    isOpen.value = true;
+    nextTick(() => {
+      chatInputRef.value?.focus();
+      chatMessagesRef.value?.scrollToBottom();
+    });
+  } else {
+    handleClose();
   }
-);
-watch(
-  () => messages.value[messages.value.length - 1]?.content,
-  () => {
-    nextTick(scrollToBottom);
+}
+function handleKeydown(e) {
+  if (e.key === "Escape") {
+    if (showHistory.value) {
+      showHistory.value = false;
+    } else {
+      handleClose();
+    }
   }
-);
+}
 function handleGlobalKeydown(e) {
   if (e.ctrlKey && e.shiftKey && e.key === "K") {
     e.preventDefault();
     toggleOverlay();
   }
 }
-onMounted(() => {
-  initShare();
-  connectSocket();
-  loadFabPosition();
-  window.addEventListener("keydown", handleGlobalKeydown);
-  if (needsNicknameImmediate()) {
-    showNicknameModal.value = true;
-    pendingNicknameAction.value = null;
-  }
+watch(isOpen, (open) => {
+  if (!open) lockBodyScroll(false);
+  nextTick(() => {
+    if (open) {
+      setupTouchMoveListener();
+    }
+  });
 });
 watch(isConnected, (connected) => {
   if (connected && socket.value) {
@@ -452,442 +245,139 @@ watch(isConnected, (connected) => {
     }
   }
 });
+onMounted(() => {
+  initShare();
+  connectSocket();
+  loadPanelState();
+  checkMobile();
+  window.addEventListener("keydown", handleGlobalKeydown);
+  window.addEventListener("resize", checkMobile);
+  if (needsNicknameImmediate()) {
+    showNicknameModal.value = true;
+    pendingNicknameAction.value = null;
+  }
+});
 onUnmounted(() => {
   disconnect();
   cleanupVoice();
   lockBodyScroll(false);
   window.removeEventListener("keydown", handleGlobalKeydown);
-  if (headerRef.value) {
-    headerRef.value.removeEventListener("touchmove", handleTouchMove);
-  }
+  window.removeEventListener("resize", checkMobile);
+  cleanupTouchMoveListener();
 });
-function getMessageClass(role) {
-  if (role === "user") return "claude-overlay-message-user";
-  if (role === "assistant") return "claude-overlay-message-assistant";
-  return "claude-overlay-message-system";
-}
-function formatDate(dateStr) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
 </script>
 
 <template>
   <Teleport to="body">
-    <!-- FAB Button (draggable) -->
-    <button
+    <!-- Badge -->
+    <ClaudeBadge
       v-if="!isOpen"
-      ref="fabRef"
-      :class="['claude-overlay-fab', { 'claude-overlay-fab-dragging': isDraggingFab, 'claude-overlay-fab-default': !fabPosition }]"
-      :style="getFabStyle()"
-      title="Chat with Claude (Ctrl+Shift+K) — drag to move"
-      @mousedown="handleFabDragStart"
-      @touchstart="handleFabDragStart"
-      @click="handleFabClick"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        class="claude-overlay-fab-icon"
-      >
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
-      </svg>
-      <span
-        :class="['claude-overlay-fab-status', `claude-overlay-fab-status-${statusColor}`]"
-      />
-    </button>
+      :position="badgePos"
+      :status-color="statusColor"
+      @click="toggleOverlay"
+      @drag-end="onBadgeDragEnd"
+    />
 
-    <!-- Backdrop (click outside to close) -->
-    <Transition name="claude-overlay-fade">
+    <!-- Backdrop -->
+    <Transition name="claude-fade">
       <div
         v-if="isOpen"
-        class="claude-overlay-backdrop"
-        @click="isOpen = false"
+        class="claude-backdrop"
+        @click="handleClose"
       />
     </Transition>
 
     <!-- Nickname Modal -->
-    <Transition name="claude-overlay-fade">
-      <div
-        v-if="showNicknameModal"
-        class="claude-overlay-modal-backdrop"
-        @click.self="handleNicknameCancel"
-      >
-        <div class="claude-overlay-modal">
-          <div class="claude-overlay-modal-header">
-            <h3>Enter your nickname</h3>
-            <button
-              class="claude-overlay-btn-icon"
-              @click="handleNicknameCancel"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="16"
-                height="16"
-              >
-                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-              </svg>
-            </button>
-          </div>
-          <div class="claude-overlay-modal-body">
-            <p class="claude-overlay-modal-hint">
-              Choose a nickname for collaborative chat sessions
-            </p>
-            <input
-              v-model="nicknameInput"
-              type="text"
-              class="claude-overlay-modal-input"
-              placeholder="Your nickname (2-20 characters)"
-              maxlength="20"
-              @keydown.enter="handleNicknameSubmit"
-            >
-            <p
-              v-if="nicknameError"
-              class="claude-overlay-modal-error"
-            >
-              {{ nicknameError }}
-            </p>
-          </div>
-          <div class="claude-overlay-modal-actions">
-            <button
-              class="claude-overlay-modal-btn-secondary"
-              @click="handleNicknameCancel"
-            >
-              Cancel
-            </button>
-            <button
-              class="claude-overlay-modal-btn-primary"
-              :disabled="nicknameInput.trim().length < 2"
-              @click="handleNicknameSubmit"
-            >
-              Save
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
+    <NicknameModal
+      :error="nicknameError"
+      :show="showNicknameModal"
+      @cancel="handleNicknameCancel"
+      @submit="handleNicknameSubmit"
+    />
 
     <!-- Chat Panel -->
-    <Transition :name="isSwipeClosing ? '' : 'claude-overlay-slide'">
+    <Transition :name="isSwipeClosing ? '' : 'claude-slide'">
       <div
         v-if="isOpen"
         ref="panelRef"
-        class="claude-overlay-panel"
+        :class="['claude-panel', { 'claude-panel-dragging': isPanelDragging, 'claude-panel-resizing': isPanelResizing }]"
+        :style="[isMobile ? {} : getPanelStyle(), { cursor: resizeCursor }]"
+        @keydown="handleKeydown"
+        @mouseleave="handlePanelMouseLeave"
+        @mousemove="handlePanelMouseMove"
       >
-        <!-- Header (swipe handle on mobile) -->
+        <!-- Resize edges -->
+        <template v-if="!isMobile">
+          <div
+            v-for="edge in ['n', 's', 'e', 'w']"
+            :key="edge"
+            :class="`claude-resize-edge claude-resize-${edge}`"
+            @mousedown="(e) => handlePanelResizeStart(edge, e)"
+          />
+          <div
+            v-for="corner in ['nw', 'ne', 'sw', 'se']"
+            :key="corner"
+            :class="['claude-resize-corner', `claude-resize-${corner}`, { 'claude-resize-active': hoveredEdge === corner || activeResizeEdge === corner }]"
+            @mousedown="(e) => handlePanelResizeStart(corner, e)"
+          />
+        </template>
+
+        <!-- Mobile drag bumper -->
         <div
+          v-if="isMobile"
           ref="headerRef"
-          class="claude-overlay-header"
-          @touchstart="handleTouchStart"
+          class="claude-drag-bumper"
           @touchend="handleTouchEnd"
+          @touchstart="handleTouchStart"
         >
-          <div class="claude-overlay-header-left">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="claude-overlay-header-icon"
-            >
-              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
-            </svg>
-            <span class="claude-overlay-header-title">Claude</span>
-            <span :class="['claude-overlay-status-badge', `claude-overlay-status-${statusColor}`]">
-              {{ statusText }}
-            </span>
-          </div>
-          <div class="claude-overlay-header-actions">
-            <!-- Share button -->
-            <button
-              class="claude-overlay-btn-icon"
-              :class="{ 'claude-overlay-btn-success': showShareCopied }"
-              :title="showShareCopied ? 'Link copied!' : 'Share chat'"
-              @click="handleShareClick"
-            >
-              <svg
-                v-if="showShareCopied"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="18"
-                height="18"
-              >
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-              </svg>
-              <svg
-                v-else
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="18"
-                height="18"
-              >
-                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" />
-              </svg>
-            </button>
-            <button
-              class="claude-overlay-btn-icon"
-              title="History"
-              @click="handleToggleHistory"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="18"
-                height="18"
-              >
-                <path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
-              </svg>
-            </button>
-            <button
-              class="claude-overlay-btn-icon"
-              title="New chat"
-              @click="newChat"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="18"
-                height="18"
-              >
-                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-              </svg>
-            </button>
-          </div>
+          <div class="claude-drag-handle-bar" />
         </div>
 
-        <!-- History Panel -->
-        <Transition name="claude-overlay-slide-right">
-          <div
-            v-if="showHistory"
-            class="claude-overlay-history"
-          >
-            <div class="claude-overlay-history-header">
-              <span>History</span>
-              <button
-                class="claude-overlay-btn-icon"
-                @click="showHistory = false"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="16"
-                  height="16"
-                >
-                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-                </svg>
-              </button>
-            </div>
-            <div class="claude-overlay-history-list">
-              <div
-                v-for="conv in conversations"
-                :key="conv.id"
-                class="claude-overlay-history-item"
-                @click="handleSelectConversation(conv.id)"
-              >
-                <div class="claude-overlay-history-title">
-                  {{ stripContextBlock(conv.title || "") || "Untitled" }}
-                </div>
-                <div class="claude-overlay-history-date">
-                  {{ formatDate(conv.updatedAt) }}
-                </div>
-              </div>
-              <div
-                v-if="conversations.length === 0"
-                class="claude-overlay-history-empty"
-              >
-                No conversations yet
-              </div>
-            </div>
-          </div>
-        </Transition>
-
-        <!-- Messages -->
-        <div
-          ref="messagesContainer"
-          class="claude-overlay-messages"
-        >
-          <div
-            v-if="messages.length === 0"
-            class="claude-overlay-empty"
-          >
-            <p>Start a conversation with Claude</p>
-            <p class="claude-overlay-empty-hint">
-              Type a message or use /commands
-            </p>
-          </div>
-
-          <div
-            v-for="message in messages"
-            :key="message.id"
-            :class="[
-  'claude-overlay-message',
-  getMessageClass(message.role),
-  {
-    'claude-overlay-message-own': message.role === 'user' && isOwnMessage(message.senderId),
-    'claude-overlay-message-other': message.role === 'user' && !isOwnMessage(message.senderId)
-  }
-]"
-          >
-            <!-- User message -->
-            <template v-if="message.role === 'user'">
-              <div
-                v-if="isShareMode && message.senderNickname"
-                class="claude-overlay-message-sender"
-              >
-                {{ message.senderNickname }}
-                <span
-                  v-if="isOwnMessage(message.senderId)"
-                  class="claude-overlay-message-you"
-                >(you)</span>
-              </div>
-              <div class="claude-overlay-message-content">
-                {{ getDisplayContent(message) }}
-              </div>
-            </template>
+        <!-- Header -->
+        <ChatHeader
+          :is-mobile="isMobile"
+          :show-share-copied="showShareCopied"
+          :status-color="statusColor"
+          @history="handleToggleHistory"
+          @share="handleShareClick"
+          @new-chat="newChat"
+          @drag-start="handlePanelDragStart"
+        />
 
-            <!-- Assistant message -->
-            <template v-else-if="message.role === 'assistant'">
-              <div class="claude-overlay-message-content">
-                <template v-if="message.contentBlocks?.length">
-                  <template
-                    v-for="(block, idx) in message.contentBlocks"
-                    :key="idx"
-                  >
-                    <MarkdownContent
-                      v-if="block.type === 'text' && block.text"
-                      :content="stripContextBlock(block.text)"
-                    />
-                    <ToolCallBlock
-                      v-else-if="block.type === 'tool_use'"
-                      :block="block"
-                      :result="findToolResult(message.contentBlocks, block.id)"
-                    />
-                  </template>
-                </template>
-                <template v-else-if="message.content">
-                  <MarkdownContent :content="getDisplayContent(message)" />
-                </template>
-                <span
-                  v-if="message.streaming"
-                  class="claude-overlay-cursor"
-                />
-              </div>
-            </template>
+        <!-- History -->
+        <HistoryPanel
+          :conversations="conversations"
+          :show="showHistory"
+          @close="showHistory = false"
+          @select="handleSelectConversation"
+        />
 
-            <!-- System message -->
-            <template v-else>
-              <div class="claude-overlay-message-content claude-overlay-message-system-content">
-                {{ getDisplayContent(message) }}
-              </div>
-            </template>
-          </div>
-        </div>
+        <!-- Messages -->
+        <ChatMessages
+          ref="chatMessagesRef"
+          :find-tool-result="findToolResult"
+          :is-own-message="isOwnMessage"
+          :is-share-mode="isShareMode"
+          :messages="messages"
+        />
 
         <!-- Input -->
-        <div class="claude-overlay-input-container">
-          <!-- Commands autocomplete -->
-          <div
-            v-if="showCommandsAutocomplete && filteredCommands.length > 0"
-            class="claude-overlay-autocomplete"
-          >
-            <button
-              v-for="cmd in filteredCommands"
-              :key="cmd.name"
-              class="claude-overlay-autocomplete-item"
-              @click="selectCommand(cmd)"
-            >
-              <span class="claude-overlay-autocomplete-name">/{{ cmd.name }}</span>
-              <span
-                v-if="cmd.description"
-                class="claude-overlay-autocomplete-desc"
-              >{{ cmd.description }}</span>
-            </button>
-          </div>
-
-          <div class="claude-overlay-input-wrapper">
-            <textarea
-              ref="textareaRef"
-              v-model="inputMessage"
-              class="claude-overlay-input"
-              placeholder="Ask Claude..."
-              rows="1"
-              :disabled="!isConnected || isProcessing"
-              @input="handleInput"
-              @keydown="handleKeydown"
-            />
-            <div class="claude-overlay-input-actions">
-              <!-- Voice input button -->
-              <button
-                v-if="isSpeechSupported"
-                :class="['claude-overlay-voice-btn', { 'claude-overlay-voice-recording': isRecording }]"
-                :disabled="!isConnected || isProcessing"
-                title="Voice input"
-                @click="handleVoiceInput"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="20"
-                  height="20"
-                >
-                  <path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" />
-                </svg>
-              </button>
-              <!-- Send button -->
-              <button
-                class="claude-overlay-send-btn"
-                :disabled="!inputMessage.trim() || !isConnected || isProcessing"
-                @click="handleSubmit"
-              >
-                <svg
-                  v-if="isProcessing"
-                  class="claude-overlay-spinner"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  width="20"
-                  height="20"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke-width="2"
-                    opacity="0.25"
-                  />
-                  <path
-                    d="M12 2a10 10 0 0 1 10 10"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                  />
-                </svg>
-                <svg
-                  v-else
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="20"
-                  height="20"
-                >
-                  <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
+        <ChatInput
+          ref="chatInputRef"
+          :commands="commands"
+          :is-connected="isConnected"
+          :is-processing="isProcessing"
+          :is-recording="isRecording"
+          :is-speech-supported="isSpeechSupported"
+          @submit="handleMessageSubmit"
+          @voice-input="handleVoiceInput"
+          @stop="handleStopGeneration"
+        />
       </div>
     </Transition>
   </Teleport>
 </template>
 
 <style>
-:root{--claude-primary:#10a37f;--claude-primary-hover:#0d8a6a;--claude-bg:#1a1a1a;--claude-bg-elevated:#252525;--claude-bg-hover:#2a2a2a;--claude-text:#fff;--claude-text-muted:#a0a0a0;--claude-border:#333;--claude-user-bg:#2d4a3e;--claude-system-bg:#3d3d3d;--claude-radius:12px;--claude-radius-sm:8px}.claude-overlay-fab{align-items:center;background:var(--claude-primary);border:none;border-radius:50%;bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.2);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;opacity:.6;position:fixed;transition:transform .2s,background .2s,opacity .2s,box-shadow .2s;width:56px;z-index:99998}.claude-overlay-fab:hover{background:var(--claude-primary-hover);box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:1;transform:scale(1.05)}.claude-overlay-fab-dragging{box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:grabbing;opacity:1;transform:scale(1.1);transition:none}.claude-overlay-backdrop{background:rgba(0,0,0,.3);inset:0;position:fixed;z-index:99997}.claude-overlay-fade-enter-active,.claude-overlay-fade-leave-active{transition:opacity .2s ease}.claude-overlay-fade-enter-from,.claude-overlay-fade-leave-to{opacity:0}.claude-overlay-fab-default{right:20px}.claude-overlay-fab-icon{height:28px;width:28px}.claude-overlay-fab-status{border:2px solid var(--claude-bg);border-radius:50%;height:12px;position:absolute;right:4px;top:4px;width:12px}.claude-overlay-fab-status-green{background:#22c55e}.claude-overlay-fab-status-blue{background:#3b82f6}.claude-overlay-fab-status-red{background:#ef4444}.claude-overlay-panel{background:var(--claude-bg);border-radius:var(--claude-radius);bottom:20px;box-shadow:0 8px 32px rgba(0,0,0,.4);color:var(--claude-text);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;height:calc(100vh - 40px);max-width:calc(100vw - 40px);overflow:hidden;position:fixed;right:20px;width:420px;z-index:99999}.claude-overlay-header{align-items:center;background:var(--claude-bg-elevated);border-bottom:1px solid var(--claude-border);display:flex;flex-shrink:0;justify-content:space-between;padding:12px 16px}.claude-overlay-header-left{align-items:center;display:flex;gap:8px}.claude-overlay-header-icon{color:var(--claude-primary);height:24px;width:24px}.claude-overlay-header-title{font-size:16px;font-weight:600}.claude-overlay-status-badge{background:var(--claude-bg);border-radius:10px;font-size:11px;padding:2px 8px}.claude-overlay-status-green{color:#22c55e}.claude-overlay-status-blue{color:#3b82f6}.claude-overlay-status-red{color:#ef4444}.claude-overlay-header-actions{display:flex;gap:4px}.claude-overlay-btn-icon{align-items:center;background:transparent;border:none;border-radius:var(--claude-radius-sm);color:var(--claude-text-muted);cursor:pointer;display:flex;height:32px;justify-content:center;transition:background .2s,color .2s;width:32px}.claude-overlay-btn-icon:hover{background:var(--claude-bg-hover);color:var(--claude-text)}.claude-overlay-btn-success{color:#22c55e!important}.claude-overlay-history{background:var(--claude-bg);bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0;z-index:10}.claude-overlay-history-header{align-items:center;background:var(--claude-bg-elevated);border-bottom:1px solid var(--claude-border);display:flex;font-weight:600;justify-content:space-between;padding:12px 16px}.claude-overlay-history-list{flex:1;overflow-y:auto;padding:8px}.claude-overlay-history-item{border-radius:var(--claude-radius-sm);cursor:pointer;padding:12px;transition:background .15s}.claude-overlay-history-item:hover{background:var(--claude-bg-hover)}.claude-overlay-history-title{font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.claude-overlay-history-date{color:var(--claude-text-muted);font-size:12px}.claude-overlay-history-empty{color:var(--claude-text-muted);padding:32px;text-align:center}.claude-overlay-messages{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.claude-overlay-empty{align-items:center;color:var(--claude-text-muted);display:flex;flex:1;flex-direction:column;justify-content:center;text-align:center}.claude-overlay-empty-hint{font-size:12px;margin-top:4px;opacity:.7}.claude-overlay-message{max-width:90%}.claude-overlay-message-user{align-self:flex-end}.claude-overlay-message-sender{color:var(--claude-primary);font-size:11px;font-weight:600;margin-bottom:4px;padding-left:2px}.claude-overlay-message-you{font-weight:400;opacity:.5}.claude-overlay-message-own{align-self:flex-end}.claude-overlay-message-own .claude-overlay-message-content{background:var(--claude-user-bg);border-radius:var(--claude-radius-sm);padding:10px 14px;white-space:pre-wrap;word-break:break-word}.claude-overlay-message-other{align-self:flex-start}.claude-overlay-message-other .claude-overlay-message-content{background:rgba(168,85,247,.2);border-radius:var(--claude-radius-sm);padding:10px 14px;white-space:pre-wrap;word-break:break-word}.claude-overlay-message-user .claude-overlay-message-content{background:var(--claude-user-bg);border-radius:var(--claude-radius-sm);padding:10px 14px;white-space:pre-wrap;word-break:break-word}.claude-overlay-message-assistant{align-self:flex-start}.claude-overlay-message-assistant .claude-overlay-message-content{background:var(--claude-bg-elevated);border-radius:var(--claude-radius-sm);padding:10px 14px}.claude-overlay-message-system{align-self:center}.claude-overlay-message-system-content{background:var(--claude-system-bg);border-radius:var(--claude-radius-sm);color:var(--claude-text-muted);font-size:12px;padding:8px 12px}.claude-overlay-cursor{animation:claude-blink 1s infinite;background:var(--claude-primary);display:inline-block;height:16px;margin-left:2px;width:8px}@keyframes claude-blink{0%,50%{opacity:1}51%,to{opacity:0}}.claude-overlay-input-container{background:var(--claude-bg-elevated);border-top:1px solid var(--claude-border);flex-shrink:0;padding:12px 16px;position:relative}.claude-overlay-autocomplete{background:var(--claude-bg);border:1px solid var(--claude-border);border-radius:var(--claude-radius-sm);bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.2);left:16px;overflow:hidden;position:absolute;right:16px}.claude-overlay-autocomplete-item{background:transparent;border:none;color:var(--claude-text);cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;text-align:left;transition:background .15s;width:100%}.claude-overlay-autocomplete-item:hover{background:var(--claude-bg-hover)}.claude-overlay-autocomplete-name{color:var(--claude-primary);font-family:monospace}.claude-overlay-autocomplete-desc{color:var(--claude-text-muted);font-size:12px}.claude-overlay-input-wrapper{align-items:flex-end;display:flex;gap:8px}.claude-overlay-input{background:var(--claude-bg);border:1px solid var(--claude-border);border-radius:var(--claude-radius-sm);color:var(--claude-text);flex:1;font-family:inherit;font-size:14px;line-height:1.4;max-height:280px;min-height:40px;overflow-y:auto;padding:10px 12px;resize:none}.claude-overlay-input:focus{border-color:var(--claude-primary);outline:none}.claude-overlay-input::-moz-placeholder{color:var(--claude-text-muted)}.claude-overlay-input::placeholder{color:var(--claude-text-muted)}.claude-overlay-input:disabled{cursor:not-allowed;opacity:.5}.claude-overlay-input-actions{display:flex;flex-shrink:0;gap:4px}.claude-overlay-voice-btn{align-items:center;background:var(--claude-bg);border:none;border-radius:var(--claude-radius-sm);color:var(--claude-text-muted);cursor:pointer;display:flex;height:40px;justify-content:center;transition:background .2s,color .2s;width:40px}.claude-overlay-voice-btn:hover:not(:disabled){background:var(--claude-bg-hover);color:var(--claude-text)}.claude-overlay-voice-btn:disabled{cursor:not-allowed;opacity:.5}.claude-overlay-voice-recording{animation:claude-pulse 1s infinite;background:#ef4444!important;color:#fff!important}@keyframes claude-pulse{0%,to{opacity:1}50%{opacity:.7}}.claude-overlay-send-btn{align-items:center;background:var(--claude-primary);border:none;border-radius:var(--claude-radius-sm);color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:background .2s;width:40px}.claude-overlay-send-btn:hover:not(:disabled){background:var(--claude-primary-hover)}.claude-overlay-send-btn:disabled{cursor:not-allowed;opacity:.5}.claude-overlay-spinner{animation:claude-spin 1s linear infinite}@keyframes claude-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.claude-overlay-slide-enter-active,.claude-overlay-slide-leave-active{transition:opacity .2s,transform .2s}.claude-overlay-slide-enter-from,.claude-overlay-slide-leave-to{opacity:0;transform:translateY(20px) scale(.95)}.claude-overlay-slide-right-enter-active,.claude-overlay-slide-right-leave-active{transition:transform .2s ease-out}.claude-overlay-slide-right-enter-from,.claude-overlay-slide-right-leave-to{transform:translateX(100%)}.claude-overlay-history-list::-webkit-scrollbar,.claude-overlay-messages::-webkit-scrollbar{width:6px}.claude-overlay-history-list::-webkit-scrollbar-track,.claude-overlay-messages::-webkit-scrollbar-track{background:transparent}.claude-overlay-history-list::-webkit-scrollbar-thumb,.claude-overlay-messages::-webkit-scrollbar-thumb{background:var(--claude-border);border-radius:3px}.claude-overlay-history-list::-webkit-scrollbar-thumb:hover,.claude-overlay-messages::-webkit-scrollbar-thumb:hover{background:var(--claude-text-muted)}@media (max-width:640px){.claude-overlay-fab{bottom:16px;height:52px;width:52px}.claude-overlay-fab-default{right:16px}.claude-overlay-panel{border-radius:var(--claude-radius) var(--claude-radius) 0 0;bottom:0;height:92vh;height:92dvh;left:0!important;max-height:92vh;max-height:92dvh;max-width:100%;right:0!important;width:100%}.claude-overlay-slide-enter-from,.claude-overlay-slide-leave-to{opacity:1;transform:translateY(100%)}.claude-overlay-slide-enter-active,.claude-overlay-slide-leave-active{transition:transform .3s ease-out}.claude-overlay-header{cursor:grab;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.claude-overlay-header:active{cursor:grabbing}.claude-overlay-header:before{background:var(--claude-border);border-radius:2px;content:"";height:4px;left:50%;position:absolute;top:8px;transform:translateX(-50%);width:36px}.claude-overlay-header{padding-top:20px;position:relative}.claude-overlay-btn-icon{height:40px;width:40px}.claude-overlay-input{font-size:16px}.claude-overlay-send-btn,.claude-overlay-voice-btn{height:44px;width:44px}.claude-overlay-input-container{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}}.claude-overlay-modal-backdrop{align-items:center;background:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:100000}.claude-overlay-modal{background:var(--claude-bg);border-radius:var(--claude-radius);box-shadow:0 8px 32px rgba(0,0,0,.4);max-width:360px;width:100%}.claude-overlay-modal-header{align-items:center;border-bottom:1px solid var(--claude-border);display:flex;justify-content:space-between;padding:16px 16px 12px}.claude-overlay-modal-header h3{font-size:16px;font-weight:600;margin:0}.claude-overlay-modal-body{padding:16px}.claude-overlay-modal-hint{color:var(--claude-text-muted);font-size:13px;margin:0 0 12px}.claude-overlay-modal-input{background:var(--claude-bg-elevated);border:1px solid var(--claude-border);border-radius:var(--claude-radius-sm);color:var(--claude-text);font-family:inherit;font-size:14px;padding:10px 12px;width:100%}.claude-overlay-modal-input:focus{border-color:var(--claude-primary);outline:none}.claude-overlay-modal-input::-moz-placeholder{color:var(--claude-text-muted)}.claude-overlay-modal-input::placeholder{color:var(--claude-text-muted)}.claude-overlay-modal-error{color:#ef4444;font-size:13px;margin:8px 0 0}.claude-overlay-modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px 16px}.claude-overlay-modal-btn-primary,.claude-overlay-modal-btn-secondary{border:none;border-radius:var(--claude-radius-sm);cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:background .2s,opacity .2s}.claude-overlay-modal-btn-secondary{background:var(--claude-bg-elevated);color:var(--claude-text)}.claude-overlay-modal-btn-secondary:hover{background:var(--claude-bg-hover)}.claude-overlay-modal-btn-primary{background:var(--claude-primary);color:#fff}.claude-overlay-modal-btn-primary:hover:not(:disabled){background:var(--claude-primary-hover)}.claude-overlay-modal-btn-primary:disabled{cursor:not-allowed;opacity:.5}
+:root{--claude-primary:#fe9a00;--claude-primary-hover:#ffb340;--claude-primary-dark:#e58a00;--claude-primary-glow:rgba(254,154,0,.5);--claude-glass:hsla(0,0%,100%,.05);--claude-glass-elevated:hsla(0,0%,100%,.08);--claude-glass-hover:hsla(0,0%,100%,.12);--claude-glass-solid:rgba(12,12,18,.88);--claude-text:hsla(0,0%,100%,.95);--claude-text-muted:hsla(0,0%,100%,.5);--claude-text-dim:hsla(0,0%,100%,.3);--claude-border:hsla(0,0%,100%,.1);--claude-border-light:hsla(0,0%,100%,.15);--claude-user-bg:linear-gradient(135deg,rgba(254,154,0,.25),rgba(251,191,36,.15));--claude-assistant-bg:hsla(0,0%,100%,.06);--claude-other-user-bg:linear-gradient(135deg,rgba(244,63,94,.2),rgba(254,154,0,.15));--claude-system-bg:hsla(0,0%,100%,.04);--claude-blur:20px;--claude-blur-heavy:40px;--claude-radius:20px;--claude-radius-sm:12px;--claude-radius-xs:8px;--claude-shadow:0 8px 32px rgba(0,0,0,.3);--claude-shadow-lg:0 25px 50px -12px rgba(0,0,0,.5);--claude-glow:0 0 40px var(--claude-primary-glow)}.claude-backdrop{background:rgba(0,0,0,.4);inset:0;position:fixed;z-index:99997}.claude-fade-enter-active,.claude-fade-leave-active{transition:opacity .3s ease}.claude-fade-enter-from,.claude-fade-leave-to{opacity:0}.claude-panel{backdrop-filter:blur(var(--claude-blur-heavy));-webkit-backdrop-filter:blur(var(--claude-blur-heavy));background:var(--claude-glass-solid);border:1px solid var(--claude-border-light);border-radius:var(--claude-radius);box-shadow:var(--claude-shadow-lg),inset 0 1px 0 hsla(0,0%,100%,.1),inset 0 -1px 0 rgba(0,0,0,.1);color:var(--claude-text);display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;max-height:calc(100vh - 48px);max-width:calc(100vw - 48px);min-height:400px;min-width:320px;overflow:hidden;position:fixed;z-index:99999}.claude-panel:before{background:linear-gradient(180deg,rgba(254,154,0,.04),transparent 30%,transparent 70%,rgba(251,191,36,.02));border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.claude-panel-dragging,.claude-panel-resizing{transition:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.claude-panel-dragging{cursor:grabbing}.claude-resize-edge{position:absolute;z-index:100}.claude-resize-n{top:0}.claude-resize-n,.claude-resize-s{cursor:ns-resize;height:8px;left:16px;right:16px}.claude-resize-s{bottom:0}.claude-resize-e{right:0}.claude-resize-e,.claude-resize-w{bottom:16px;cursor:ew-resize;top:16px;width:8px}.claude-resize-w{left:0}.claude-resize-corner{height:16px;position:absolute;width:16px;z-index:101}.claude-resize-corner:before{content:"";height:12px;opacity:0;position:absolute;transition:opacity .2s ease;width:12px}.claude-resize-active:before,.claude-resize-corner:hover:before{opacity:1}.claude-resize-nw{cursor:nwse-resize;left:0;top:0}.claude-resize-ne{cursor:nesw-resize;right:0;top:0}.claude-resize-sw{bottom:0;cursor:nesw-resize;left:0}.claude-resize-se{bottom:0;cursor:nwse-resize;right:0}.claude-resize-nw:before{border-left:3px solid var(--claude-primary);border-radius:4px 0 0 0;left:2px}.claude-resize-ne:before,.claude-resize-nw:before{border-top:3px solid var(--claude-primary);box-shadow:0 0 10px var(--claude-primary-glow);top:2px}.claude-resize-ne:before{border-radius:0 4px 0 0;border-right:3px solid var(--claude-primary);right:2px}.claude-resize-sw:before{border-left:3px solid var(--claude-primary);border-radius:0 0 0 4px;left:2px}.claude-resize-se:before,.claude-resize-sw:before{border-bottom:3px solid var(--claude-primary);bottom:2px;box-shadow:0 0 10px var(--claude-primary-glow)}.claude-resize-se:before{border-radius:0 0 4px 0;border-right:3px solid var(--claude-primary);right:2px}.claude-drag-bumper,.claude-drag-handle-bar{display:none}.claude-slide-enter-active,.claude-slide-leave-active{transition:all .35s cubic-bezier(.4,0,.2,1)}.claude-slide-enter-from,.claude-slide-leave-to{opacity:0;transform:scale(.3)}@media (max-width:640px){.claude-panel{border-radius:var(--claude-radius) var(--claude-radius) 0 0;bottom:0!important;height:96dvh!important;left:0!important;max-height:96dvh;max-width:100%;min-height:auto;min-width:auto;right:0!important;top:auto!important;transform-origin:bottom center;width:100%!important}.claude-slide-enter-from,.claude-slide-leave-to{opacity:1;transform:translateY(100%)}.claude-slide-enter-active,.claude-slide-leave-active{transition:transform .35s cubic-bezier(.4,0,.2,1)}.claude-drag-bumper{align-items:center;background:hsla(0,0%,100%,.06);border-bottom:1px solid hsla(0,0%,100%,.08);cursor:grab;display:flex;flex-shrink:0;justify-content:center;padding:10px 20px;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.claude-drag-bumper:active{background:hsla(0,0%,100%,.1);cursor:grabbing}.claude-drag-handle-bar{background:hsla(0,0%,100%,.35);border-radius:2px;display:block;height:4px;width:40px}}
 </style>