@if (debugging.enabled()) {
  @if (showLauncher()) {
    @if (launcherVariant() === 'floating') {
      <button
        type="button"
        class="fixed bottom-4 right-4 z-[80] inline-flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-lg transition-colors hover:bg-secondary"
        [class.bg-primary]="isOpen()"
        [class.text-primary-foreground]="isOpen()"
        [class.border-primary/50]="isOpen()"
        (click)="toggleConsole()"
        [attr.aria-expanded]="isOpen()"
        [attr.aria-label]="'shared.debugConsole.toggleAria' | translate"
        [title]="'shared.debugConsole.toggleTitle' | translate"
      >
        <ng-icon
          name="lucideBug"
          class="h-5 w-5"
        />

        @if (badgeCount() > 0) {
          <span
            class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold shadow-sm"
            [class.bg-destructive]="hasErrors()"
            [class.text-destructive-foreground]="hasErrors()"
            [class.bg-secondary]="!hasErrors()"
            [class.text-foreground]="!hasErrors()"
          >
            {{ formatBadgeCount(badgeCount()) }}
          </span>
        }
      </button>
    } @else if (launcherVariant() === 'compact') {
      <button
        type="button"
        class="relative inline-flex h-7 w-7 items-center justify-center rounded-lg transition-opacity hover:opacity-90"
        [class.bg-primary/20]="isOpen()"
        [class.text-primary]="isOpen()"
        [class.bg-secondary]="!isOpen()"
        [class.text-foreground]="!isOpen()"
        (click)="toggleConsole()"
        [attr.aria-expanded]="isOpen()"
        [attr.aria-label]="'shared.debugConsole.toggleAria' | translate"
        [title]="'shared.debugConsole.toggleTitle' | translate"
      >
        <ng-icon
          name="lucideBug"
          class="h-4 w-4"
        />

        @if (badgeCount() > 0) {
          <span
            class="absolute -right-1 -top-1 rounded-full px-1 py-0 text-[9px] font-semibold leading-tight shadow-sm"
            [class.bg-destructive]="hasErrors()"
            [class.text-destructive-foreground]="hasErrors()"
            [class.bg-secondary]="!hasErrors()"
            [class.text-foreground]="!hasErrors()"
          >
            {{ formatBadgeCount(badgeCount()) }}
          </span>
        }
      </button>
    } @else {
      <button
        type="button"
        class="relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-secondary"
        [class.bg-secondary]="isOpen()"
        [class.text-foreground]="isOpen()"
        [class.text-muted-foreground]="!isOpen()"
        (click)="toggleConsole()"
        [attr.aria-expanded]="isOpen()"
        [attr.aria-label]="'shared.debugConsole.toggleAria' | translate"
        [title]="'shared.debugConsole.toggleTitle' | translate"
      >
        <ng-icon
          name="lucideBug"
          class="h-4 w-4"
        />

        @if (badgeCount() > 0) {
          <span
            class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none shadow-sm"
            [class.bg-destructive]="hasErrors()"
            [class.text-destructive-foreground]="hasErrors()"
            [class.bg-secondary]="!hasErrors()"
            [class.text-foreground]="!hasErrors()"
          >
            {{ formatBadgeCount(badgeCount()) }}
          </span>
        }
      </button>
    }
  }

  @if (showPanel() && isOpen()) {
    <div class="pointer-events-none fixed inset-0 z-[79]">
      <section
        class="pointer-events-auto absolute flex min-h-0 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl"
        [class.bottom-20]="!detached()"
        [class.right-4]="!detached()"
        [style.height.px]="panelHeight()"
        [style.width.px]="panelWidth()"
        [style.left.px]="detached() ? panelLeft() : null"
        [style.top.px]="detached() ? panelTop() : null"
      >
        <!-- Left resize bar -->
        <button
          type="button"
          class="group absolute inset-y-0 left-0 z-[1] w-3 cursor-col-resize bg-transparent"
          (mousedown)="startLeftResize($event)"
          [attr.aria-label]="'shared.debugConsole.resizeWidthAria' | translate"
        >
          <span
            class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
          ></span>
        </button>

        <!-- Right resize bar -->
        <button
          type="button"
          class="group absolute inset-y-0 right-0 z-[1] w-3 cursor-col-resize bg-transparent"
          (mousedown)="startRightResize($event)"
          [attr.aria-label]="'shared.debugConsole.resizeWidthRightAria' | translate"
        >
          <span
            class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
          ></span>
        </button>

        <!-- Top resize bar -->
        <button
          type="button"
          class="group relative h-3 w-full cursor-row-resize bg-transparent"
          (mousedown)="startTopResize($event)"
          [attr.aria-label]="'shared.debugConsole.resizeAria' | translate"
        >
          <span
            class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
          ></span>
        </button>

        @if (detached()) {
          <button
            type="button"
            class="flex h-8 w-full cursor-move items-center justify-center border-b border-border bg-background/70 px-4 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground transition-colors hover:bg-background"
            (mousedown)="startDrag($event)"
            [attr.aria-label]="'shared.debugConsole.moveAria' | translate"
          >
            {{ 'shared.debugConsole.dragToMove' | translate }}
          </button>
        }

        <app-debug-console-toolbar
          [activeTab]="activeTab()"
          [detached]="detached()"
          [searchTerm]="searchTerm()"
          [selectedSource]="selectedSource()"
          [sourceOptions]="sourceOptions()"
          [levelState]="levelState()"
          [levelCounts]="levelCounts()"
          [visibleCount]="visibleCount()"
          [autoScroll]="autoScroll()"
          [networkSummary]="networkSummary()"
          (activeTabChange)="setActiveTab($event)"
          (detachToggled)="toggleDetached()"
          (searchTermChange)="updateSearchTerm($event)"
          (selectedSourceChange)="updateSelectedSource($event)"
          (levelToggled)="toggleLevel($event)"
          (autoScrollToggled)="toggleAutoScroll()"
          (clearRequested)="clearLogs()"
          (closeRequested)="closeConsole()"
          (exportLogsRequested)="exportLogs($event)"
          (exportNetworkRequested)="exportNetwork($event)"
        />

        @if (activeTab() === 'logs') {
          @if (isTruncated()) {
            <div class="flex items-center justify-between border-b border-border bg-muted/50 px-4 py-1.5">
              <span class="text-xs text-muted-foreground">
                {{ 'shared.debugConsole.showingLatest' | translate: { total: filteredEntries().length } }}
              </span>
              <button
                type="button"
                class="text-xs font-medium text-primary hover:underline"
                (click)="toggleShowAllEntries()"
              >
                {{ 'shared.debugConsole.showAll' | translate }}
              </button>
            </div>
          }
          <app-debug-console-entry-list
            class="min-h-0 flex-1 overflow-hidden"
            [entries]="visibleEntries()"
            [autoScroll]="autoScroll()"
            (entryExpanded)="disableAutoScroll()"
          />
        } @else {
          <app-debug-console-network-map
            class="min-h-0 flex-1 overflow-hidden"
            [snapshot]="networkSnapshot()"
          />
        }

        <!-- Bottom resize bar -->
        <button
          type="button"
          class="group relative h-3 w-full cursor-row-resize bg-transparent"
          (mousedown)="startBottomResize($event)"
          [attr.aria-label]="'shared.debugConsole.resizeHeightBottomAria' | translate"
        >
          <span
            class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
          ></span>
        </button>

        <!-- Bottom-right corner drag handle -->
        <button
          type="button"
          class="group absolute bottom-0 right-0 z-[2] flex h-5 w-5 cursor-nwse-resize items-center justify-center bg-transparent"
          (mousedown)="startCornerResize($event)"
          [attr.aria-label]="'shared.debugConsole.resizeCornerAria' | translate"
        >
          <svg
            class="h-3 w-3 text-border/80 transition-colors group-hover:text-primary/70"
            viewBox="0 0 10 10"
            fill="currentColor"
          >
            <circle
              cx="8"
              cy="8"
              r="1.2"
            />
            <circle
              cx="4"
              cy="8"
              r="1.2"
            />
            <circle
              cx="8"
              cy="4"
              r="1.2"
            />
          </svg>
        </button>
      </section>
    </div>
  }
}