feat: Explicit answer/reject for inbound calls (#2504)

src/scss/call-controls.scss

@@ -45,12 +45,28 @@
   pointer-events: none;
 }
 
+// Wrapper around each button group. The pre/post-answer ternary swaps which
+// `.buttons` element is in the DOM, so the pop-animation swap fires when the
+// user accepts (or, more generally, whenever the answered state flips
+// mid-call).
+.buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  @include pop-swap;
+}
+
 ha-icon-button {
   color: var(--advanced-camera-card-button-color);
   background: var(--advanced-camera-card-button-background);
   border-radius: var(--advanced-camera-card-button-border-radius);
 
-  &.critical {
-    color: var(--advanced-camera-card-call-controls-critical-color);
+  &.negative {
+    color: var(--advanced-camera-card-call-controls-negative-color);
+  }
+
+  &.positive {
+    color: var(--advanced-camera-card-call-controls-positive-color);
   }
 }

src/scss/pop-animation.scss

@@ -13,6 +13,14 @@
   animation: pop-out 0.25s ease-out forwards;
 }
 
+// Lighter "swap" pop: a subtle in-place fade/scale used when an overlay's
+// contents change without the overlay itself entering or leaving the DOM.
+// Quieter than `pop-in` so it can sit inside an already-popped panel without
+// fighting the parent animation.
+@mixin pop-swap {
+  animation: pop-swap 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
+}
+
 @keyframes pop-in {
   0% {
     opacity: 0;
@@ -44,3 +52,18 @@
     transform: translateY(20px) scale(0.95);
   }
 }
+
+@keyframes pop-swap {
+  0% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

src/scss/themes/base.scss

@@ -14,6 +14,7 @@
 
   --advanced-camera-card-active-color: var(--accent-color, orange);
   --advanced-camera-card-warning-color: var(--error-color, red);
+  --advanced-camera-card-success-color: var(--success-color, #43a047);
 
   --advanced-camera-card-text-color: var(--primary-text-color);
   --advanced-camera-card-divider-color: var(--divider-color);
@@ -74,11 +75,16 @@
     --advanced-camera-card-control-background-transparent
   );
 
-  // The color of the call controls end-call (critical) button.
-  --advanced-camera-card-call-controls-critical-color: var(
+  // The color of the call controls negative button (end / reject).
+  --advanced-camera-card-call-controls-negative-color: var(
     --advanced-camera-card-warning-color
   );
 
+  // The color of the call controls positive button (answer).
+  --advanced-camera-card-call-controls-positive-color: var(
+    --advanced-camera-card-success-color
+  );
+
   /******
    * Menu
    ******/