feat(ui): enhance branch delete confirmation flow

This update introduces a comprehensive and visually refined dialog component for confirming the deletion of branches. The logic now correctly distinguishes between deleting local and remote branches, providing tailored warnings and context to the user. Corresponding global styles were updated to implement the new layout and visual fidelity for this specific dialog type.

- Implements structured display for branch name and location
- Improves distinction between local and remote delete contexts
- Updates backdrop filter CSS properties for better compatibility

src/app.css

@@ -37,7 +37,7 @@
   --app-select-option-bg: #171d2b;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
-  --app-dialog-backdrop: #070a10;
+  --app-dialog-backdrop: rgba(4, 7, 12, 0.58);
   --app-dialog-bg: #101622;
   --app-dialog-chrome: #141b29;
   --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32);
@@ -103,7 +103,7 @@
   --app-select-option-bg: #ffffff;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.72), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(28, 44, 74, 0.12), inset 0 1px 0 rgba(255,255,255,0.86);
-  --app-dialog-backdrop: rgba(232, 238, 248, 0.96);
+  --app-dialog-backdrop: rgba(222, 229, 241, 0.56);
   --app-dialog-bg: #ffffff;
   --app-dialog-chrome: #f4f7fc;
   --app-dialog-shadow: 0 24px 72px rgba(28, 44, 74, 0.2), 0 2px 12px rgba(28,44,74,0.1);
@@ -3057,6 +3057,8 @@
     padding: 24px;
     background-color: var(--app-dialog-backdrop);
     background-image: none;
+    -webkit-backdrop-filter: blur(10px) saturate(0.78);
+    backdrop-filter: blur(10px) saturate(0.78);
   }
 
   .app-chrome-backdrop {
@@ -3249,6 +3251,16 @@
     max-height: calc(100vh - 32px);
     overflow: auto;
   }
+  .branch-delete-dialog {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    width: min(500px, calc(100vw - 32px));
+    height: auto;
+    max-height: calc(100vh - 32px);
+    border-color: rgba(255, 90, 103, 0.22);
+    box-shadow: var(--app-dialog-shadow), 0 0 0 1px rgba(255, 90, 103, 0.04);
+    overflow: auto;
+  }
   .ai-settings-dialog {
     display: block;
     width: min(560px, calc(100vw - 32px));
@@ -3753,7 +3765,30 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     gap: 14px;
-    padding: 18px 16px 16px;
+    padding: 20px 18px 18px;
+  }
+  .branch-delete-header {
+    padding: 15px 16px;
+    background:
+      linear-gradient(90deg, rgba(255, 90, 103, 0.08), transparent 42%),
+      var(--app-dialog-chrome);
+  }
+  .branch-delete-heading { display: flex; align-items: center; gap: 11px; }
+  .branch-delete-heading-icon {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    border: 1px solid rgba(255, 90, 103, 0.28);
+    border-radius: 8px;
+    color: #ff9aa4;
+    background: rgba(255, 90, 103, 0.09);
+  }
+  .branch-delete-heading-icon.force {
+    border-color: rgba(255, 174, 92, 0.34);
+    color: #ffc07a;
+    background: rgba(255, 151, 61, 0.1);
   }
   .discard-warning-icon {
     display: grid;
@@ -3794,6 +3829,61 @@
     align-items: center;
     gap: 6px;
   }
+  .branch-delete-lead { color: var(--color-ink); font-weight: 600; }
+  .branch-delete-target {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding: 10px 11px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.16);
+    box-shadow: inset 3px 0 0 rgba(255, 90, 103, 0.48);
+  }
+  .branch-delete-target-icon {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 auto;
+    border-radius: 7px;
+    color: var(--color-accent);
+    background: rgba(77, 182, 214, 0.1);
+  }
+  .branch-delete-target-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
+  .branch-delete-target-copy code {
+    overflow: hidden;
+    color: var(--color-ink);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .branch-delete-target-copy > span { color: var(--color-ink-faint); font-size: 10.5px; }
+  .branch-delete-scope {
+    flex: 0 0 auto;
+    padding: 3px 7px;
+    border: 1px solid rgba(77, 182, 214, 0.22);
+    border-radius: 999px;
+    color: #8ed8ee;
+    background: rgba(77, 182, 214, 0.08);
+    font-size: 9.5px;
+    font-weight: 800;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .branch-delete-scope.remote { border-color: rgba(167, 126, 255, 0.25); color: #c2a9ff; background: rgba(132, 88, 232, 0.1); }
+  .branch-delete-body .discard-warning-text {
+    padding: 9px 10px;
+    border-left: 2px solid rgba(255, 90, 103, 0.55);
+    color: #f2aeb5;
+    background: rgba(255, 90, 103, 0.055);
+    font-size: 11.5px;
+    font-weight: 600;
+  }
+  .branch-delete-confirm { min-width: 116px; }
   .discard-target-list {
     display: grid;
     gap: 4px;