fix(frontend): policy card keeps its wells in the light theme, folder rules show their content, opened rule scrolls into view, rule removal asks first

frontend/src/lib/components/policy/PolicyCard.svelte

@@ -66,6 +66,7 @@
   let confirming = $state(false);
   let moving = $state(false);
   let moved = $state<TrashOutcome | null>(null);
+  let removing = $state(false);
 
   const isChat = $derived(scopeType === "chat");
   const isFolder = $derived(scopeType === "folder");
@@ -143,6 +144,7 @@
     try {
       await deletePolicy(rule.id);
       rule = null;
+      removing = false;
       onchange?.();
     } catch {
       problem = "Не удалось удалить правило";
@@ -344,9 +346,39 @@
     {/if}
 
     {#if rule && (isChat || isFolder)}
-      <button class="remove" disabled={saving} onclick={remove} type="button">
-        Удалить правило
-      </button>
+      {#if removing}
+        <div class="removal">
+          <span>Удалить правило?</span>
+          <Button
+            onclick={() => {
+              removing = false;
+            }}
+            smaller
+            variant="text"
+          >
+            Отмена
+          </Button>
+          <Button
+            disabled={saving}
+            onclick={remove}
+            pill
+            smaller
+            variant="danger"
+          >
+            Удалить
+          </Button>
+        </div>
+      {:else}
+        <button
+          class="remove"
+          onclick={() => {
+            removing = true;
+          }}
+          type="button"
+        >
+          Удалить правило
+        </button>
+      {/if}
     {/if}
   {/if}
 </div>
@@ -404,7 +436,7 @@
 
     &.on {
       color: var(--color-text);
-      background-color: var(--color-chat-hover);
+      background-color: var(--color-background);
     }
 
     &:focus-visible {
@@ -413,7 +445,7 @@
     }
 
     @media (pointer: coarse) {
-      height: 2.5rem;
+      height: 2.75rem;
     }
   }
 
@@ -517,7 +549,9 @@
     gap: 0.5rem;
     align-items: center;
 
-    margin: 0.5rem 0.75rem 0.25rem;
+    flex-wrap: wrap;
+
+    margin: 0.5rem 1rem 0.25rem;
     padding: 0.625rem 0.5rem 0.625rem 0.875rem;
     border-radius: 0.75rem;
 
@@ -531,7 +565,7 @@
 
   .files-text {
     display: flex;
-    flex: 1;
+    flex: 1 1 10rem;
     flex-direction: column;
     gap: 0.125rem;
 
@@ -557,6 +591,21 @@
     margin-top: 0.375rem;
   }
 
+  .removal {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+
+    margin: 0.25rem 0.5rem 0;
+    padding-left: 0.5rem;
+
+    font-size: 0.875rem;
+
+    span {
+      flex: 1;
+    }
+  }
+
   .remove {
     cursor: pointer;
 
@@ -573,6 +622,10 @@
 
     background: none;
 
+    @media (pointer: coarse) {
+      min-height: 2.75rem;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--color-error);
       outline-offset: -2px;