<script lang="ts">
  import { onMount, untrack } from "svelte";
  import ProjectCard from "./ProjectCard.svelte";
  import SettingsDrawer from "./SettingsDrawer.svelte";
  import CommandPalette from "./CommandPalette.svelte";
  import ToastContainer from "./ToastContainer.svelte";
  import NotifDrawer from "./NotifDrawer.svelte";
  import StatusBar from "./StatusBar.svelte";
  import SearchOverlay from "./SearchOverlay.svelte";
  import SplashScreen from "./SplashScreen.svelte";
  import ProjectWizard from "./ProjectWizard.svelte";
  import { themeStore } from "./theme-store.svelte.ts";
  import { fontStore } from "./font-store.svelte.ts";
  import { keybindingStore } from "./keybinding-store.svelte.ts";
  import { setAgentToastFn } from "./agent-store.svelte.ts";
  import { appRpc } from "./rpc.ts";
  import { initI18n } from "./i18n.svelte.ts";
  import {
    getProjects,
    getGroups,
    getActiveGroupId,
    getActiveGroup, getFilteredProjects,
    getTotalCostDerived, getTotalTokensDerived,
    setActiveGroup,
    addProjectFromWizard,
    deleteProject,
    cloneCountForProject,
    handleClone,
    addGroup as wsAddGroup,
    loadGroupsFromDb,
    loadProjectsFromDb,
    trackAllProjects,
    type WizardResult,
  } from "./workspace-store.svelte.ts";
  import {
    getNotifications,
    clearAll as clearNotifications,
    getNotifCount,
  } from "./notifications-store.svelte.ts";
  import {
    getSettingsOpen,
    setSettingsOpen,
    toggleSettings,
    getPaletteOpen,
    setPaletteOpen,
    togglePalette,
    getSearchOpen,
    toggleSearch,
    getNotifDrawerOpen,
    setNotifDrawerOpen,
    toggleNotifDrawer,
    getShowWizard,
    setShowWizard,
    getProjectToDelete,
    setProjectToDelete,
    getShowAddGroup,
    setShowAddGroup,
    toggleAddGroup,
    getNewGroupName,
    setNewGroupName,
    resetAddGroupForm,
    toggleWizard,
  } from "./ui-store.svelte.ts";

  // ── Local view-only state (not shared across components) ────
  let appReady = $state(false);
  let sessionStart = $state(Date.now());

  // ── Stable derived values ──
  // NOTE: ALL derived values use plain function calls — NO $derived()
  // to prevent Svelte 5 reactive loops when store getters create new refs.
  function isProjectMounted(groupId: string): boolean {
    return groupId === getActiveGroupId();
  }
  // These are called directly in template — Svelte tracks the inner $state reads
  // but doesn't create intermediate $derived objects that could loop.

  // Blink is now in blink-store.svelte.ts — no prop passing needed

  // ── Session duration (plain JS, no reactive system) ──
  let sessionDuration = $state("0m");

  // ── Window controls ─────────────────────────────────────────
  function handleClose() {
    appRpc.request["window.close"]({}).catch(console.error);
  }
  function handleMaximize() {
    appRpc.request["window.maximize"]({}).catch(console.error);
  }
  function handleMinimize() {
    appRpc.request["window.minimize"]({}).catch(console.error);
  }

  // ── Window drag — delegates to GTK window manager ───────────
  function onDragStart(e: MouseEvent) {
    const target = e.target as HTMLElement;
    if (target.tagName === 'BUTTON' || target.tagName === 'INPUT' || target.closest('button') || target.closest('.rz')) return;
    // Delegate to GTK — the WM handles everything (smooth, zero CPU)
    appRpc.request['window.beginMove']({
      button: e.button + 1, // DOM: 0=left, GTK: 1=left
      rootX: e.screenX,
      rootY: e.screenY,
    }).catch(() => {});
    e.preventDefault();
  }

  // ── Window resize — JS edge detection + native C begin_resize_drag ──
  // The Wails pattern: JS detects the edge, C library has real GTK event data.
  function onResizeStart(e: MouseEvent, edge: string) {
    e.preventDefault();
    e.stopPropagation();
    // Tell the native C library to start a resize drag
    // It uses stored mouseButton/xroot/yroot from the real GTK button-press event
    appRpc.request['window.beginResize']({ edge }).catch(() => {});
  }

  // ── Window frame persistence (debounced 500ms) ──────────────
  let frameSaveTimer: ReturnType<typeof setTimeout> | null = null;
  function saveWindowFrame() {
    if (frameSaveTimer) clearTimeout(frameSaveTimer);
    frameSaveTimer = setTimeout(() => {
      appRpc.request["window.getFrame"]({})
        .then((frame) => {
          appRpc.request["settings.set"]({
            key: "win_x",
            value: String(frame.x),
          }).catch(console.error);
          appRpc.request["settings.set"]({
            key: "win_y",
            value: String(frame.y),
          }).catch(console.error);
          appRpc.request["settings.set"]({
            key: "win_width",
            value: String(frame.width),
          }).catch(console.error);
          appRpc.request["settings.set"]({
            key: "win_height",
            value: String(frame.height),
          }).catch(console.error);
        })
        .catch(console.error);
    }, 500);
  }

  // ── Wizard handler ──────────────────────────────────────────
  function handleWizardCreated(result: WizardResult) {
    addProjectFromWizard(result);
    setShowWizard(false);
  }

  async function confirmDeleteProject() {
    const toDelete = getProjectToDelete();
    if (!toDelete) return;
    await deleteProject(toDelete);
    setProjectToDelete(null);
  }

  // ── Group add (local UI + store) ────────────────────────────
  async function handleAddGroup() {
    const name = getNewGroupName().trim();
    if (!name) return;
    await wsAddGroup(name);
    resetAddGroupForm();
  }

  // ── Notification drawer ─────────────────────────────────────
  function handleClearNotifications() {
    clearNotifications();
    setNotifDrawerOpen(false);
  }

  // ── Toast ref for agent notifications ───────────────────────
  let toastRef: ToastContainer | undefined;

  function showToast(
    message: string,
    variant: "success" | "warning" | "error" | "info",
  ) {
    toastRef?.addToast(message, variant);
  }

  // ── Global error boundary ───────────────────────────────────
  function setupErrorBoundary() {
    window.addEventListener(
      "unhandledrejection",
      (e: PromiseRejectionEvent) => {
        const msg =
          e.reason instanceof Error ? e.reason.message : String(e.reason);
        console.error("[unhandled rejection]", e.reason);
        showToast(`Unhandled error: ${msg.slice(0, 100)}`, "error");
        e.preventDefault();
      },
    );
    window.addEventListener("error", (e: ErrorEvent) => {
      console.error("[uncaught error]", e.error);
      showToast(`Error: ${e.message.slice(0, 100)}`, "error");
    });
  }

  // ── DEBUG overlay ───────────────────────────────────────────
  const DEBUG_ENABLED =
    typeof window !== "undefined" &&
    new URLSearchParams(window.location.search).has("debug");
  let debugLog = $state<string[]>([]);

  // Debug overlay listeners are set up in onMount, not $effect

  // ── i18n: lang/dir sync is handled inside setLocale() — no $effect needed ──

  // ── Init ────────────────────────────────────────────────────
  onMount(() => {
    setAgentToastFn(showToast);
    setupErrorBoundary();

    // Resize handled by native C library — no JS mousemove/mouseup needed

    // Blink + session timers — MUST be in onMount, NOT $effect
    // $effect interacts with reactive graph and causes cycles
    // Blink timer is in blink-store — start it here
    import('./blink-store.svelte.ts').then(m => m.startBlink());
    const sessionId = setInterval(() => {
      const mins = Math.floor((Date.now() - sessionStart) / 60000);
      sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`;
    }, 10000);

    const initTasks = [
      initI18n().catch(console.error),
      themeStore.initTheme(appRpc).catch(console.error),
      fontStore.initFonts(appRpc).catch(console.error),
      keybindingStore.init(appRpc).catch(console.error),
      loadGroupsFromDb().catch(console.error),
      loadProjectsFromDb().catch(console.error),
    ];

    const timeout = new Promise((r) => setTimeout(r, 10000));
    Promise.race([Promise.allSettled(initTasks), timeout]).then(() => {
      appReady = true;
      trackAllProjects();
    });

    keybindingStore.on("palette", () => {
      togglePalette();
    });
    keybindingStore.on("settings", () => {
      toggleSettings();
    });
    keybindingStore.on("group1", () => setActiveGroup(getGroups()[0]?.id));
    keybindingStore.on("group2", () => setActiveGroup(getGroups()[1]?.id));
    keybindingStore.on("group3", () => setActiveGroup(getGroups()[2]?.id));
    keybindingStore.on("group4", () => setActiveGroup(getGroups()[3]?.id));
    keybindingStore.on("minimize", () => handleMinimize());

    function handleSearchShortcut(e: KeyboardEvent) {
      if (e.ctrlKey && e.shiftKey && e.key === "F") {
        e.preventDefault();
        toggleSearch();
      }
    }
    document.addEventListener("keydown", handleSearchShortcut);

    function handlePaletteCommand(e: Event) {
      const detail = (e as CustomEvent).detail;
      switch (detail) {
        case "settings":
          toggleSettings();
          break;
        case "search":
          toggleSearch();
          break;
        case "new-project":
          setShowWizard(true);
          break;
        case "toggle-sidebar":
          toggleSettings();
          break;
        default:
          console.log(`[palette] unhandled command: ${detail}`);
      }
    }
    window.addEventListener("palette-command", handlePaletteCommand);

    // Debug overlay (plain listeners, no $effect)
    let debugCleanup = () => {};
    if (DEBUG_ENABLED) {
      function debugClick(e: MouseEvent) {
        const el = e.target as HTMLElement;
        const tag = el?.tagName;
        const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
        debugLog = [...debugLog.slice(-8), `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`];
      }
      function debugDown(e: MouseEvent) {
        const el = e.target as HTMLElement;
        debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
      }
      document.addEventListener('click', debugClick, true);
      document.addEventListener('mousedown', debugDown, true);
      debugCleanup = () => {
        document.removeEventListener('click', debugClick, true);
        document.removeEventListener('mousedown', debugDown, true);
      };
    }

    const cleanup = keybindingStore.installListener();
    return () => {
      cleanup();
      debugCleanup();
      import('./blink-store.svelte.ts').then(m => m.stopBlink());
      clearInterval(sessionId);
      document.removeEventListener("keydown", handleSearchShortcut);
      window.removeEventListener("palette-command", handlePaletteCommand);
      // Native resize — no JS listeners to clean
    };
  });
</script>

<SplashScreen ready={appReady} />
<SettingsDrawer
  open={getSettingsOpen()}
  onClose={() => setSettingsOpen(false)}
/>
<CommandPalette open={getPaletteOpen()} onClose={() => setPaletteOpen(false)} />
<SearchOverlay open={getSearchOpen()} onClose={() => setSearchOpen(false)} />
<ToastContainer bind:this={toastRef} />
<NotifDrawer
  open={getNotifDrawerOpen()}
  notifications={getNotifications()}
  onClear={handleClearNotifications}
  onClose={() => setNotifDrawerOpen(false)}
/>

<!-- Resize handles — capture mouse + X11 FFI resize -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-n" onmousedown={(e) => onResizeStart(e, 'n')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-s" onmousedown={(e) => onResizeStart(e, 's')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-e" onmousedown={(e) => onResizeStart(e, 'e')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-w" onmousedown={(e) => onResizeStart(e, 'w')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-ne" onmousedown={(e) => onResizeStart(e, 'ne')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-nw" onmousedown={(e) => onResizeStart(e, 'nw')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-se" onmousedown={(e) => onResizeStart(e, 'se')}></div>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="rz rz-sw" onmousedown={(e) => onResizeStart(e, 'sw')}></div>

<div class="app-shell" role="presentation">
  <!-- Left sidebar icon rail — draggable for window move -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <aside class="sidebar" role="navigation" aria-label="Primary navigation" onmousedown={onDragStart}>
    <!-- AGOR vertical title -->
    <div class="agor-title" aria-hidden="true">AGOR</div>

    <!-- Group icons — numbered circles -->
    <div class="sidebar-groups" role="list" aria-label="Project groups">
      {#each getGroups() as group, i}
        <button
          class="group-btn"
          class:active={getActiveGroupId() === group.id}
          onclick={() => setActiveGroup(group.id)}
          aria-label="{group.name} (Ctrl+{i + 1})"
          title="{group.name} (Ctrl+{i + 1})"
        >
          <span class="group-circle" aria-hidden="true">{i + 1}</span>
          {#if group.hasNew}
            <span class="group-badge" aria-label="New activity"></span>
          {/if}
        </button>
      {/each}

      <!-- Add group button -->
      <button
        class="group-btn add-group-btn"
        onclick={() => toggleAddGroup()}
        aria-label="Add group"
        title="Add group"
      >
        <span class="group-circle" aria-hidden="true">+</span>
      </button>
    </div>

    {#if getShowAddGroup()}
      <div class="add-group-form">
        <input
          class="add-group-input"
          type="text"
          placeholder="Group name"
          value={getNewGroupName()}
          oninput={(e) => setNewGroupName((e.target as HTMLInputElement).value)}
          onkeydown={(e) => {
            if (e.key === "Enter") handleAddGroup();
            if (e.key === "Escape") setShowAddGroup(false);
          }}
          autofocus
        />
      </div>
    {/if}

    <!-- Add project button -->
    <button
      class="sidebar-icon"
      onclick={() => toggleWizard()}
      aria-label="Add project"
      title="Add project"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <line x1="12" y1="5" x2="12" y2="19" /><line
          x1="5"
          y1="12"
          x2="19"
          y2="12"
        />
      </svg>
    </button>

    <div class="sidebar-spacer"></div>

    <!-- Settings gear -->
    <button
      class="sidebar-icon"
      class:active={getSettingsOpen()}
      onclick={() => toggleSettings()}
      aria-label="Settings (Ctrl+,)"
      title="Settings (Ctrl+,)"
      data-testid="settings-btn"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <circle cx="12" cy="12" r="3" />
        <path
          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
        />
      </svg>
    </button>
  </aside>

  <!-- Main workspace -->
  <main class="workspace">
    <!-- Project grid -->
    <div
      class="project-grid"
      role="list"
      aria-label="{getActiveGroup()?.name ?? 'Projects'} projects"
    >
      {#each getProjects() as project (project.id)}
        {#if isProjectMounted(project.groupId ?? "dev")}
          <div
            role="listitem"
            style:display={(project.groupId ?? "dev") === getActiveGroupId()
              ? "flex"
              : "none"}
          >
            <ProjectCard
              id={project.id}
              name={project.name}
              cwd={project.cwd}
              accent={project.accent}
              provider={project.provider}
              profile={project.profile}
              model={project.model}
              contextPct={project.contextPct}
              burnRate={project.burnRate}
              clonesAtMax={cloneCountForProject(project.id) >= 3}
              onClone={handleClone}
              worktreeBranch={project.worktreeBranch}
              cloneOf={project.cloneOf}
            />
          </div>
        {/if}
      {/each}

      <!-- Empty group -->
      <div
        class="empty-group"
        role="listitem"
        style:display={getFilteredProjects().length === 0 ? "flex" : "none"}
      >
        <p class="empty-group-text">
          No projects in {getActiveGroup()?.name ?? "this group"}
        </p>
      </div>

      <!-- Project wizard overlay (display toggle) -->
      <div style:display={getShowWizard() ? "contents" : "none"}>
        <ProjectWizard
          onClose={() => setShowWizard(false)}
          onCreated={handleWizardCreated}
          groupId={getActiveGroupId()}
          groups={getGroups().map(g => ({ id: g.id, name: g.name }))}
          existingNames={getProjects().map(p => p.name)}
        />
      </div>

      <!-- Delete project confirmation -->
      {#if getProjectToDelete()}
        <div class="delete-overlay" role="listitem">
          <p class="delete-text">
            Delete project "{getProjects().find(
              (p) => p.id === getProjectToDelete(),
            )?.name}"?
          </p>
          <div class="add-card-actions">
            <button class="add-cancel" onclick={() => setProjectToDelete(null)}
              >Cancel</button
            >
            <button class="delete-confirm" onclick={confirmDeleteProject}
              >Delete</button
            >
          </div>
        </div>
      {/if}
    </div>
  </main>

  <!-- Right sidebar: window controls + notification bell -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <aside class="right-bar" aria-label="Window controls and notifications" onmousedown={onDragStart}>
    <div
      class="window-controls-vertical"
      role="toolbar"
      aria-label="Window controls"
    >
      <button
        class="wc-btn close-btn"
        onclick={handleClose}
        aria-label="Close window"
        title="Close">&#10005;</button
      >
      <button
        class="wc-btn"
        onclick={handleMaximize}
        aria-label="Maximize window"
        title="Maximize">&#9633;</button
      >
      <button
        class="wc-btn"
        onclick={handleMinimize}
        aria-label="Minimize window"
        title="Minimize">&#9472;</button
      >
    </div>

    <div class="right-spacer"></div>

    <button
      class="right-icon notif-btn"
      class:active={getNotifDrawerOpen()}
      onclick={() => toggleNotifDrawer()}
      aria-label={getNotifCount() > 0
        ? `${getNotifCount()} notifications`
        : "Notifications"}
      title="Notifications"
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path
          d="M13.73 21a2 2 0 0 1-3.46 0"
        />
      </svg>
      {#if getNotifCount() > 0}
        <span class="right-badge" aria-hidden="true">{getNotifCount()}</span>
      {/if}
    </button>
  </aside>
</div>

<!-- Status bar (health-backed) -->
<StatusBar
  projectCount={getFilteredProjects().length}
  totalTokens={getTotalTokensDerived()}
  totalCost={getTotalCostDerived()}
  {sessionDuration}
  groupName={getActiveGroup()?.name ?? ""}
/>

{#if DEBUG_ENABLED && debugLog.length > 0}
  <div
    style="position:fixed;bottom:0;left:0;right:0;background:#000;color:#0f0;font-family:monospace;font-size:10px;padding:4px 8px;z-index:9999;max-height:100px;overflow-y:auto;pointer-events:none;"
  >
    {#each debugLog as line}
      <div>{line}</div>
    {/each}
  </div>
{/if}

<style>
  :global(body) {
    overflow: hidden;
  }
  :global(#app) {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* ── Resize handles — 6px edges, 12px corners, fixed on viewport ── */
  .rz { position: fixed; z-index: 9999; }
  .rz-n  { top: 0; left: 12px; right: 12px; height: 6px; cursor: n-resize; }
  .rz-s  { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: s-resize; }
  .rz-e  { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: e-resize; }
  .rz-w  { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: w-resize; }
  .rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
  .rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
  .rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
  .rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }

  .app-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  /* ── Left sidebar ─────────────────────────────────────────── */
  .sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--ctp-mantle);
    border-right: 1px solid var(--ctp-surface0);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0 0.5rem;
    gap: 0.125rem;
    cursor: grab;
  }
  .sidebar:active { cursor: grabbing; }

  .agor-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    color: var(--ctp-overlay0);
    padding: 1rem 0;
    user-select: none;
    flex-shrink: 0;
    cursor: grab;
  }

  .sidebar-groups {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--ctp-surface0);
    margin-bottom: 0.125rem;
  }

  .sidebar-spacer {
    flex: 1;
  }

  .group-btn {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .group-circle {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1.5px solid var(--ctp-surface1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ctp-subtext0);
    transition: all 0.15s;
  }

  .group-btn:hover .group-circle {
    border-color: var(--ctp-overlay1);
    color: var(--ctp-text);
    background: var(--ctp-surface0);
  }

  .group-btn.active .group-circle {
    border-color: var(--accent, var(--ctp-mauve));
    color: var(--accent, var(--ctp-mauve));
    background: color-mix(
      in srgb,
      var(--accent, var(--ctp-mauve)) 10%,
      transparent
    );
  }

  .group-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--ctp-red);
  }

  .sidebar-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--ctp-overlay1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.15s,
      color 0.15s;
    padding: 0;
  }

  .sidebar-icon:hover {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
  }
  .sidebar-icon.active {
    background: var(--ctp-surface1);
    color: var(--ctp-text);
  }
  .sidebar-icon svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── Main workspace ───────────────────────────────────────── */
  .workspace {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .project-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--ctp-crust);
    overflow-y: auto;
    align-content: start;
  }

  .project-grid::-webkit-scrollbar {
    width: 0.375rem;
  }
  .project-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  .project-grid::-webkit-scrollbar-thumb {
    background: var(--ctp-surface1);
    border-radius: 0.25rem;
  }

  .empty-group {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: var(--ctp-overlay0);
  }

  .empty-group-text {
    font-size: 0.875rem;
    font-style: italic;
  }

  /* ── Right sidebar ────────────────────────────────────────── */
  .right-bar {
    width: 2.25rem;
    flex-shrink: 0;
    background: var(--ctp-mantle);
    border-left: 1px solid var(--ctp-surface0);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0;
    gap: 0.25rem;
  }

  .window-controls-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .wc-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ctp-overlay1);
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.12s,
      color 0.12s;
    padding: 0;
    font-family: var(--ui-font-family);
  }

  .wc-btn:hover {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
  }
  .close-btn:hover {
    background: var(--ctp-red);
    color: var(--ctp-base);
  }

  .right-spacer {
    flex: 1;
  }

  .right-icon {
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: none;
    color: var(--ctp-overlay1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    position: relative;
    transition:
      color 0.12s,
      background 0.12s;
    padding: 0;
  }

  .right-icon:hover {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
  }
  .right-icon.active {
    background: var(--ctp-surface1);
    color: var(--ctp-text);
  }
  .right-icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .right-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 0.875rem;
    height: 0.875rem;
    background: var(--ctp-red);
    color: var(--ctp-base);
    border-radius: 0.4375rem;
    font-size: 0.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.125rem;
    line-height: 1;
  }

  /* ── Add group form ─────────────────────────────────────────── */
  .add-group-form {
    padding: 0.25rem;
    width: 100%;
  }

  .add-group-input {
    width: 100%;
    padding: 0.25rem;
    background: var(--ctp-surface0);
    border: 1px solid var(--ctp-surface1);
    border-radius: 0.25rem;
    color: var(--ctp-text);
    font-size: 0.625rem;
    font-family: var(--ui-font-family);
    text-align: center;
  }
  .add-group-input:focus {
    outline: none;
    border-color: var(--ctp-blue);
  }

  /* ── Delete project overlay ──────────────────────────────────── */
  .add-card-actions {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
  }

  .add-cancel,
  .delete-confirm {
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--ui-font-family);
  }

  .add-cancel {
    background: transparent;
    border: 1px solid var(--ctp-surface1);
    color: var(--ctp-subtext0);
  }
  .add-cancel:hover {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
  }

  .delete-overlay {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--ctp-base);
    border: 1px solid var(--ctp-red);
    border-radius: 0.5rem;
  }

  .delete-text {
    font-size: 0.875rem;
    color: var(--ctp-text);
    margin: 0;
  }
  .delete-confirm {
    background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
    border: 1px solid var(--ctp-red);
    color: var(--ctp-red);
  }
  .delete-confirm:hover {
    background: color-mix(in srgb, var(--ctp-red) 35%, transparent);
  }
</style>
