@aipanel/ui 1.2.0-beta.0

package/es/AI-panel-widget/composables/use-selection.mjs

@@ -0,0 +1,112 @@
+import { computed } from "vue";
+import { truncate } from "@aipanel/core";
+function getElementKey(element, index) {
+  if (element.filePath && element.line) {
+    return `${element.filePath}:${element.line}:${element.column ?? 0}`;
+  }
+  return `${element.description}-${index}`;
+}
+function getBubbleFileText(element) {
+  const fileName = element.filePath?.split("/").pop() || "";
+  const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
+  return `${fileName}${lineInfo}`;
+}
+function getPanelFileText(element) {
+  const fileName = element.filePath?.split("/").pop() || "\u672A\u77E5\u6587\u4EF6";
+  const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
+  const textPreview = element.innerText?.trim() ? `${truncate(element.innerText.trim(), 30)} \xB7 ` : "";
+  return `${textPreview}${fileName}${lineInfo}`;
+}
+function useSelection(options) {
+  const bubbleVisible = computed(() => options.selectMode.value);
+  const selectedElementItems = computed(
+    () => (options.selectedElements.value || []).map(
+      (element, index) => ({
+        key: getElementKey(element, index),
+        description: element.description || "\u672A\u77E5\u5143\u7D20",
+        bubbleFileText: getBubbleFileText(element),
+        panelFileText: getPanelFileText(element),
+        element
+      })
+    )
+  );
+  const hasSelectedElements = computed(() => selectedElementItems.value.length > 0);
+  function handleToggleSelectMode() {
+    options.onToggleSelectMode(!options.selectMode.value);
+  }
+  function handleClickSelectedNode(item) {
+    const description = item.element.description;
+    if (!description) return;
+    let targetElement = null;
+    if (description.includes("#")) {
+      const idMatch = description.match(/#([^.[\s]+)/);
+      if (idMatch) {
+        targetElement = document.getElementById(idMatch[1]);
+      }
+    }
+    if (!targetElement && description.includes(".")) {
+      const classMatch = description.match(/^([a-z]+)\.([^[\s]+)/i);
+      if (classMatch) {
+        const tagName = classMatch[1];
+        const classes = classMatch[2].split(".").filter(Boolean);
+        const selector = `${tagName}.${classes.join(".")}`;
+        targetElement = document.querySelector(selector);
+      }
+    }
+    if (!targetElement) {
+      const tagMatch = description.match(/^([a-z]+)/i);
+      if (tagMatch) {
+        const simpleSelector = description.split(/[.[\s]/)[0];
+        targetElement = document.querySelector(simpleSelector);
+      }
+    }
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      const highlightOverlay = document.createElement("div");
+      highlightOverlay.className = "aipanel-element-highlight-temp";
+      const widget = document.querySelector(".aipanel-widget");
+      let primary = "#3b82f6";
+      let primaryBg = "rgba(59, 130, 246, 0.1)";
+      if (widget) {
+        const style = getComputedStyle(widget);
+        primary = style.getPropertyValue("--ap-primary").trim() || primary;
+        primaryBg = style.getPropertyValue("--ap-primary-bg").trim() || primaryBg;
+      }
+      highlightOverlay.style.border = `2px solid ${primary}`;
+      highlightOverlay.style.background = primaryBg;
+      const rect = targetElement.getBoundingClientRect();
+      highlightOverlay.style.top = `${rect.top + window.scrollY}px`;
+      highlightOverlay.style.left = `${rect.left + window.scrollX}px`;
+      highlightOverlay.style.width = `${rect.width}px`;
+      highlightOverlay.style.height = `${rect.height}px`;
+      document.body.appendChild(highlightOverlay);
+      setTimeout(() => {
+        highlightOverlay.remove();
+      }, 2e3);
+    }
+  }
+  function handleRemoveSelectedNode(item, index, source) {
+    options.onRemoveSelectedNode({ element: item.element, index, source });
+  }
+  async function handleClearSelectedNodes() {
+    if (!options.selectedElements.value || options.selectedElements.value.length === 0) return;
+    const confirmed = await options.showConfirmDialog(
+      `\u786E\u5B9A\u8981\u6E05\u7A7A\u6240\u6709 ${options.selectedElements.value.length} \u4E2A\u5DF2\u9009\u8282\u70B9\u5417\uFF1F`
+    );
+    if (confirmed) {
+      options.onClearSelectedNodes();
+    }
+  }
+  return {
+    bubbleVisible,
+    hasSelectedElements,
+    selectedElementItems,
+    handleClearSelectedNodes,
+    handleClickSelectedNode,
+    handleRemoveSelectedNode,
+    handleToggleSelectMode
+  };
+}
+export {
+  useSelection
+};

package/es/AI-panel-widget/composables/use-session.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from "vue";
+import type { AIPanelWidgetSession, AIPanelWidgetSessionItem } from "../src/types";
+export interface UseSessionOptions {
+    sessions: Ref<AIPanelWidgetSession[]>;
+    currentSessionId: Ref<string | number | null>;
+    onCreateSession: () => void;
+    onSelectSession: (session: AIPanelWidgetSession) => void;
+    onDeleteSession: (session: AIPanelWidgetSession) => void;
+    showConfirmDialog: (message: string) => Promise<boolean>;
+}
+export declare function useSession(options: UseSessionOptions): {
+    sessionItems: import("vue").ComputedRef<AIPanelWidgetSessionItem[]>;
+    handleCreateSession: () => void;
+    handleDeleteSession: (item: AIPanelWidgetSessionItem) => Promise<void>;
+    handleSelectSession: (item: AIPanelWidgetSessionItem) => void;
+};

package/es/AI-panel-widget/composables/use-session.mjs

@@ -0,0 +1,47 @@
+import { computed } from "vue";
+function formatSessionMeta(session) {
+  if (session.meta) {
+    return session.meta;
+  }
+  if (!session.updatedAt) {
+    return "";
+  }
+  const date = new Date(session.updatedAt);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
+function useSession(options) {
+  const sessionItems = computed(
+    () => (options.sessions.value || []).map((session) => ({
+      key: session.id,
+      id: session.id,
+      title: session.title || "\u65B0\u4F1A\u8BDD",
+      meta: formatSessionMeta(session),
+      active: session.id === options.currentSessionId.value,
+      session
+    }))
+  );
+  function handleCreateSession() {
+    options.onCreateSession();
+  }
+  function handleSelectSession(item) {
+    options.onSelectSession(item.session);
+  }
+  async function handleDeleteSession(item) {
+    const confirmed = await options.showConfirmDialog(`\u786E\u5B9A\u8981\u5220\u9664\u4F1A\u8BDD "${item.title}" \u5417\uFF1F`);
+    if (confirmed) {
+      options.onDeleteSession(item.session);
+    }
+  }
+  return {
+    sessionItems,
+    handleCreateSession,
+    handleDeleteSession,
+    handleSelectSession
+  };
+}
+export {
+  useSession
+};

package/es/AI-panel-widget/composables/use-split.d.ts

@@ -0,0 +1,30 @@
+import { type Ref } from "vue";
+import type { DisplayMode, SplitModeOptions } from "@aipanel/core";
+export interface UseSplitModeOptions {
+    displayMode: Ref<DisplayMode>;
+    splitMode: Ref<SplitModeOptions | undefined>;
+    open: Ref<boolean>;
+    splitPosition?: Ref<"left" | "right">;
+    onOpenChange?: (open: boolean) => void;
+    onWidthChange?: (width: number) => void;
+    onPositionChange?: (position: "left" | "right") => void;
+}
+export declare function useSplitMode(options: UseSplitModeOptions): {
+    effectiveMode: import("vue").ComputedRef<"bubble" | "split">;
+    isSplitMode: import("vue").ComputedRef<boolean>;
+    isExtensionMode: import("vue").ComputedRef<boolean>;
+    panelWidth: Ref<number, number>;
+    splitConfig: import("vue").ComputedRef<{
+        width: number;
+        minWidth: number;
+        maxWidth: number;
+        resizable: boolean;
+        shrinkPage: boolean;
+        defaultOpen: boolean;
+        position: "left" | "right";
+    }>;
+    splitPosition: import("vue").ComputedRef<"left" | "right">;
+    handleResize: (width: number) => void;
+    handleToggle: () => void;
+    handleTogglePosition: () => void;
+};

package/es/AI-panel-widget/composables/use-split.mjs

@@ -0,0 +1,133 @@
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+const AUTO_MODE_THRESHOLD = 1440;
+function useSplitMode(options) {
+  const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+  const localSplitPosition = ref(options.splitPosition?.value ?? "right");
+  const isExtensionMode = computed(() => options.displayMode.value === "extension");
+  const shouldSkipBodyModification = computed(
+    () => isExtensionMode.value || options.displayMode.value === "extension-selector"
+  );
+  const splitConfig = computed(() => {
+    const config = options.splitMode.value || {};
+    const isExt = isExtensionMode.value;
+    return {
+      width: config.width ?? 500,
+      minWidth: config.minWidth ?? 400,
+      maxWidth: config.maxWidth ?? 800,
+      resizable: isExt ? false : config.resizable ?? true,
+      shrinkPage: isExt ? false : config.shrinkPage ?? true,
+      defaultOpen: isExt ? true : config.defaultOpen ?? true,
+      position: config.position ?? localSplitPosition.value
+    };
+  });
+  const panelWidth = ref(splitConfig.value.width);
+  const effectiveMode = computed(() => {
+    if (isExtensionMode.value) return "split";
+    if (options.displayMode.value === "bubble") {
+      return "bubble";
+    }
+    if (options.displayMode.value === "split") {
+      return "split";
+    }
+    return windowWidth.value >= AUTO_MODE_THRESHOLD ? "split" : "bubble";
+  });
+  const isSplitMode = computed(() => effectiveMode.value === "split");
+  const splitPosition = computed(() => splitConfig.value.position);
+  const handleResize = (width) => {
+    panelWidth.value = width;
+    options.onWidthChange?.(width);
+  };
+  const handleToggle = () => {
+    const nextOpen = !options.open.value;
+    options.onOpenChange?.(nextOpen);
+  };
+  const handleTogglePosition = () => {
+    const nextPosition = localSplitPosition.value === "right" ? "left" : "right";
+    localSplitPosition.value = nextPosition;
+    options.onPositionChange?.(nextPosition);
+  };
+  const handleWindowResize = () => {
+    if (typeof window !== "undefined") {
+      windowWidth.value = window.innerWidth;
+    }
+  };
+  const updateBodyClass = () => {
+    if (typeof document === "undefined") return;
+    if (shouldSkipBodyModification.value) {
+      document.body.classList.remove("has-aipanel-split");
+      document.body.classList.remove("has-aipanel-split-left");
+      document.body.classList.remove("has-aipanel-split-right");
+      document.body.style.removeProperty("--aipanel-split-width");
+      return;
+    }
+    const shouldShrink = isSplitMode.value && options.open.value && splitConfig.value.shrinkPage;
+    if (shouldShrink) {
+      document.body.classList.add("has-aipanel-split");
+      document.body.style.setProperty("--aipanel-split-width", `${panelWidth.value}px`);
+      if (splitPosition.value === "left") {
+        document.body.classList.add("has-aipanel-split-left");
+        document.body.classList.remove("has-aipanel-split-right");
+      } else {
+        document.body.classList.add("has-aipanel-split-right");
+        document.body.classList.remove("has-aipanel-split-left");
+      }
+    } else {
+      document.body.classList.remove("has-aipanel-split");
+      document.body.classList.remove("has-aipanel-split-left");
+      document.body.classList.remove("has-aipanel-split-right");
+      document.body.style.removeProperty("--aipanel-split-width");
+    }
+  };
+  watch([isSplitMode, options.open, panelWidth, splitPosition], updateBodyClass, {
+    immediate: true
+  });
+  watch(splitConfig, (config) => {
+    if (panelWidth.value < config.minWidth) {
+      panelWidth.value = config.minWidth;
+    }
+    if (panelWidth.value > config.maxWidth) {
+      panelWidth.value = config.maxWidth;
+    }
+  });
+  watch(
+    () => options.splitPosition?.value,
+    (val) => {
+      if (val && val !== localSplitPosition.value) {
+        localSplitPosition.value = val;
+      }
+    }
+  );
+  onMounted(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleWindowResize);
+      if (!isExtensionMode.value && isSplitMode.value && splitConfig.value.defaultOpen && !options.open.value) {
+        options.onOpenChange?.(true);
+      }
+    }
+  });
+  onUnmounted(() => {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("resize", handleWindowResize);
+      if (!isExtensionMode.value) {
+        document.body.classList.remove("has-aipanel-split");
+        document.body.classList.remove("has-aipanel-split-left");
+        document.body.classList.remove("has-aipanel-split-right");
+        document.body.style.removeProperty("--aipanel-split-width");
+      }
+    }
+  });
+  return {
+    effectiveMode,
+    isSplitMode,
+    isExtensionMode,
+    panelWidth,
+    splitConfig,
+    splitPosition,
+    handleResize,
+    handleToggle,
+    handleTogglePosition
+  };
+}
+export {
+  useSplitMode
+};

package/es/AI-panel-widget/composables/use-widget.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+import type { AIPanelWidgetTheme } from "../src/types";
+export interface UseWidgetOptions {
+    theme: Ref<string>;
+    open: Ref<boolean>;
+    selectMode: Ref<boolean>;
+    iframeSrc: Ref<string>;
+    sessionListCollapsed: Ref<boolean>;
+    onToggle: (nextOpen: boolean) => void;
+    onToggleSelectMode?: (mode: boolean) => void;
+    onClose: () => void;
+    onToggleSessionList: (collapsed: boolean) => void;
+    onEmptyAction: () => void;
+    onToggleTheme?: (theme: AIPanelWidgetTheme) => void;
+}
+export declare function useWidget(options: UseWidgetOptions): {
+    buttonActive: import("vue").ComputedRef<boolean>;
+    containerClasses: import("vue").ComputedRef<string[]>;
+    iframeSource: import("vue").ComputedRef<string>;
+    sessionListTitle: import("vue").ComputedRef<"展开会话列表" | "折叠会话列表">;
+    resolvedTheme: import("vue").ComputedRef<"light" | "dark">;
+    handleClose: () => void;
+    handleEmptyAction: () => void;
+    handleToggle: () => void;
+    handleToggleSessionList: () => void;
+    handleToggleTheme: () => void;
+};

package/es/AI-panel-widget/composables/use-widget.mjs

@@ -0,0 +1,78 @@
+import { computed, ref, onMounted, onUnmounted } from "vue";
+const THEME_CYCLE = ["auto", "light", "dark"];
+function useWidget(options) {
+  const systemTheme = ref("light");
+  function getSystemTheme() {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  let mediaQuery = null;
+  let handleChange = null;
+  onMounted(() => {
+    if (typeof window === "undefined") return;
+    systemTheme.value = getSystemTheme();
+    mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    handleChange = (e) => {
+      systemTheme.value = e.matches ? "dark" : "light";
+    };
+    mediaQuery.addEventListener("change", handleChange);
+  });
+  onUnmounted(() => {
+    if (mediaQuery && handleChange) {
+      mediaQuery.removeEventListener("change", handleChange);
+    }
+  });
+  const resolvedTheme = computed(() => {
+    if (options.theme.value === "auto") {
+      return systemTheme.value;
+    }
+    return options.theme.value;
+  });
+  const containerClasses = computed(() => [
+    "aipanel-widget",
+    `aipanel-theme-${resolvedTheme.value}`
+  ]);
+  const buttonActive = computed(() => !!(options.open.value || options.selectMode.value));
+  const iframeSource = computed(() => options.iframeSrc.value || "about:blank");
+  const sessionListTitle = computed(
+    () => options.sessionListCollapsed.value ? "\u5C55\u5F00\u4F1A\u8BDD\u5217\u8868" : "\u6298\u53E0\u4F1A\u8BDD\u5217\u8868"
+  );
+  function handleToggle() {
+    if (options.selectMode.value) {
+      options.onToggleSelectMode?.(false);
+      return;
+    }
+    const nextOpen = !options.open.value;
+    options.onToggle(nextOpen);
+  }
+  function handleClose() {
+    options.onClose();
+  }
+  function handleToggleSessionList() {
+    options.onToggleSessionList(!options.sessionListCollapsed.value);
+  }
+  function handleEmptyAction() {
+    options.onEmptyAction();
+  }
+  function handleToggleTheme() {
+    const currentIndex = THEME_CYCLE.indexOf(options.theme.value);
+    const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
+    const nextTheme = THEME_CYCLE[nextIndex];
+    options.onToggleTheme?.(nextTheme);
+  }
+  return {
+    buttonActive,
+    containerClasses,
+    iframeSource,
+    sessionListTitle,
+    resolvedTheme,
+    handleClose,
+    handleEmptyAction,
+    handleToggle,
+    handleToggleSessionList,
+    handleToggleTheme
+  };
+}
+export {
+  useWidget
+};

package/es/AI-panel-widget/index.d.ts

@@ -0,0 +1,5 @@
+import AIPanelWidget from "./src/index.vue";
+import AIPanelLogo from "./src/components/AIPanelLogo.vue";
+export { AIPanelWidget, AIPanelLogo };
+export default AIPanelWidget;
+export * from "./src/types";

package/es/AI-panel-widget/index.mjs

@@ -0,0 +1,9 @@
+import AIPanelWidget from "./src/index.vue.mjs";
+import AIPanelLogo from "./src/components/AIPanelLogo.vue.mjs";
+var AI_panel_widget_default = AIPanelWidget;
+export * from "./src/types.mjs";
+export {
+  AIPanelLogo,
+  AIPanelWidget,
+  AI_panel_widget_default as default
+};

package/es/AI-panel-widget/src/assets/logo.svg

@@ -0,0 +1,13 @@
+<svg t="1775402599580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5390" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+  <defs>
+    <linearGradient id="aipanel-logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea"/>
+      <stop offset="100%" style="stop-color:#764ba2"/>
+    </linearGradient>
+  </defs>
+  <g transform="rotate(180 512 512)">
+  <path d="M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z" fill="url(#aipanel-logo-gradient)" p-id="5391"/>
+  <path d="M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z" fill="url(#aipanel-logo-gradient)" p-id="5392"/>
+  <path d="M640 448m-64 0a64 64 0 1 0 128 0a64 64 0 1 0 -128 0Z" fill="url(#aipanel-logo-gradient)" p-id="5393"/>
+  </g>
+</svg>

package/es/AI-panel-widget/src/components/AIPanelLogo-sfc.css

@@ -0,0 +1 @@
+.aipanel-logo svg{display:block;width:100%;height:100%}

package/es/AI-panel-widget/src/components/AIPanelLogo.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    size?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/AI-panel-widget/src/components/AIPanelLogo.vue.mjs

@@ -0,0 +1,40 @@
+import "./AIPanelLogo-sfc.css";
+import { defineComponent as _defineComponent } from "vue";
+import { computed, useId } from "vue";
+import logoSvg from "../assets/logo.svg?raw";
+const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
+  __name: "AIPanelLogo",
+  props: {
+    size: { type: [String, Number], required: false, default: "100%" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const baseId = useId();
+    const gradientId = `aipanel-logo-gradient-${baseId}`;
+    const rendered = computed(
+      () => logoSvg.replace('id="aipanel-logo-gradient"', `id="${gradientId}"`).replace(/url\(#aipanel-logo-gradient\)/g, `url(#${gradientId})`)
+    );
+    const sizeStyle = computed(() => {
+      const value = typeof props.size === "number" ? `${props.size}px` : props.size;
+      return { width: value, height: value };
+    });
+    const __returned__ = { props, baseId, gradientId, rendered, sizeStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+import { normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["innerHTML"];
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock(), _createElementBlock("span", {
+    class: "aipanel-logo",
+    style: _normalizeStyle([{ display: "inline-block", lineHeight: 0 }, $setup.sizeStyle]),
+    innerHTML: $setup.rendered
+  }, null, 12, _hoisted_1);
+}
+__vue_sfc__.render = __vue_render__;
+var AIPanelLogo_vue_default = __vue_sfc__;
+export {
+  AIPanelLogo_vue_default as default
+};

package/es/AI-panel-widget/src/components/ChatPanel-sfc.css

@@ -0,0 +1 @@
+.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;display:flex;flex-direction:column;z-index:99999}.aipanel-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease;transform:translate3d(var(---animationOrigin\.x),var(---animationOrigin\.y),0) scale(.95)}.aipanel-chat.split-mode{position:fixed;top:0;bottom:0;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--ap-shadow-lg);overflow:visible;opacity:1;visibility:visible;transition:transform .3s ease}.aipanel-chat.split-mode.split-right{right:0;border-left:1px solid var(--ap-border-primary);transform:translate(100%)}.aipanel-chat.split-mode.split-left{left:0;border-right:1px solid var(--ap-border-primary);transform:translate(-100%)}.aipanel-chat.split-mode .aipanel-chat-content{overflow:hidden;flex:1}.aipanel-chat.split-mode.open{transform:translate(0)}.aipanel-chat.split-mode.dragging{transition:none}.aipanel-chat.dragging .aipanel-iframe{pointer-events:none}.aipanel-chat.extension-mode{position:static;width:100%;height:100%;bottom:auto;left:auto;right:auto;border-radius:0;border-left:none;border-right:none;max-height:none;box-shadow:none;transform:none;opacity:1;visibility:visible}.aipanel-chat:not(.split-mode){opacity:0;visibility:hidden;transition:all .3s ease}.aipanel-chat:not(.split-mode).open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized:not(.split-mode){width:320px;height:320px}.aipanel-chat.minimized:not(.split-mode) .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-session-empty{padding:24px;text-align:center;color:var(--ap-text-placeholder);font-size:14px}.aipanel-split-toggle-btn{position:absolute;left:-21px;top:50%;transform:translateY(-50%);width:20px;height:48px;background:#fff;border:none;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#667eea;box-shadow:0 4px 12px #667eea66;transition:all .3s ease;z-index:5;transform-origin:right center}.aipanel-split-toggle-btn.split-left{left:auto;right:-21px;border-radius:0 8px 8px 0;transform-origin:left center}.aipanel-split-toggle-btn:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 16px #667eea80}.aipanel-split-toggle-btn.split-left:hover{transform:translateY(-50%) scale(1.1)}.aipanel-split-toggle-btn.aipanel-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.aipanel-split-toggle-btn.aipanel-theme-dark:before{content:"";position:absolute;inset:-2px 0 -2px -2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.aipanel-split-toggle-btn.aipanel-theme-dark.split-left:before{left:0;right:-2px;border-radius:0 8px 8px 0}.aipanel-split-toggle-btn.aipanel-theme-dark:hover{box-shadow:0 6px 16px #667eea66}.aipanel-split-toggle-btn.thinking{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;animation:split-thinking-glow 2s ease-in-out infinite,split-thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}.aipanel-split-toggle-btn.thinking:before{content:"";position:absolute;inset:-2px 0 -2px -2px;border-radius:8px 0 0 8px;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.aipanel-split-toggle-btn.thinking.split-left:before{left:0;right:-2px;border-radius:0 8px 8px 0}.aipanel-split-toggle-btn.thinking:after{content:"";position:absolute;inset:-3px -1px -3px -3px;border-radius:8px 0 0 8px;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:split-thinking-rotate 2s linear infinite reverse;filter:blur(8px)}.aipanel-split-toggle-btn.thinking.split-left:after{left:-1px;right:-3px;border-radius:0 8px 8px 0}@keyframes split-thinking-glow{0%,to{box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33}50%{box-shadow:0 0 30px #667eeacc,0 0 60px #764ba299,0 0 90px #667eea4d}}@keyframes split-thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes split-thinking-pulse{0%,to{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(.92)}}.aipanel-split-toggle-icon{display:flex;align-items:center;justify-content:center;transition:transform .25s ease}.aipanel-split-toggle-btn:hover .aipanel-split-toggle-icon{transform:scale(1.1)}