<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, getDir, getLocale } from './i18n.svelte.ts';
  import {
    getProjects, getGroups, getActiveGroupId,
    getMountedGroupIds, 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());

  // ── Blink timer (untracked — must not create reactive dependency) ────
  let blinkVisible = $state(true);
  let _blinkId: ReturnType<typeof setInterval>;
  $effect(() => {
    _blinkId = setInterval(() => { untrack(() => { blinkVisible = !blinkVisible; }); }, 500);
    return () => clearInterval(_blinkId);
  });

  // ── Session duration (untracked) ──────────────────────────────
  let sessionDuration = $state('0m');
  $effect(() => {
    function update() {
      const mins = Math.floor((Date.now() - sessionStart) / 60000);
      untrack(() => { sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`; });
    }
    update();
    const id = setInterval(update, 10000);
    return () => clearInterval(id);
  });

  // ── 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 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[]>([]);

  $effect(() => {
    if (!DEBUG_ENABLED) return;
    function debugClick(e: MouseEvent) {
      const el = e.target as HTMLElement;
      const tag = el?.tagName;
      const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
      const elAtPoint = document.elementFromPoint(e.clientX, e.clientY);
      let line = `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`;
      if (elAtPoint && elAtPoint !== el) {
        const overTag = (elAtPoint as HTMLElement).tagName;
        const overCls = ((elAtPoint as HTMLElement).className?.toString?.() ?? '').slice(0, 40);
        line += ` OVERLAY: ${overTag}.${overCls}`;
      }
      debugLog = [...debugLog.slice(-8), line];
    }
    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);
    return () => {
      document.removeEventListener('click', debugClick, true);
      document.removeEventListener('mousedown', debugDown, true);
    };
  });

  // ── i18n: keep <html> lang and dir in sync ──────────────────
  $effect(() => {
    document.documentElement.lang = getLocale();
    document.documentElement.dir = getDir();
  });

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

    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);

    const cleanup = keybindingStore.installListener();
    return () => {
      cleanup();
      document.removeEventListener('keydown', handleSearchShortcut);
      window.removeEventListener('palette-command', handlePaletteCommand);
    };
  });
</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)}
/>

<div
  class="app-shell"
  role="presentation"
>
  <!-- Left sidebar icon rail -->
  <aside class="sidebar" role="navigation" aria-label="Primary navigation">
    <!-- AGOR vertical title -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <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 getMountedGroupIds().has(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}
            {blinkVisible}
            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 -->
  <aside class="right-bar" aria-label="Window controls and notifications">
    <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; }

  .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;
  }

  .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>
