.app-cctp-footer {
  display: block;
  visibility: visible;
  transform: translate3d(0,0,0);
  position: absolute;
  z-index: var(--app-cctp-layer-chrome);
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--app-cctp-footer-height) + var(--app-cctp-safe-bottom));
  padding-bottom: var(--app-cctp-safe-bottom);
  background: var(--app-cctp-chrome-bg);
  color: var(--app-cctp-chrome-fg);
  border: 0;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.app-cctp-footer-grid { height: var(--app-cctp-footer-height); display: grid; grid-template-columns: repeat(3,1fr); align-items: center; }
.app-cctp-footer-icon {
  width: 52px;
  height: 52px;
  justify-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #8b98ad;
  border-radius: 15px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 17%,rgba(255,255,255,.72) 0 4%,rgba(255,255,255,.18) 24%,transparent 43%),
    linear-gradient(145deg,#7f8da3 0%,#4f5e76 48%,#29364a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.78),
    inset 0 -3px 4px rgba(0,0,0,.3),
    0 2px 0 #1c2636,
    0 5px 8px rgba(0,0,0,.36);
  cursor: pointer;
  text-decoration: none;
}
.app-cctp-footer-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.32)); }
.app-cctp-footer-icon[data-app-cctp-open-panel="submit"] {
  border-color:#79dfad;
  background:
    radial-gradient(circle at 28% 17%,rgba(255,255,255,.72) 0 4%,rgba(255,255,255,.18) 24%,transparent 43%),
    linear-gradient(145deg,#54d493 0%,#25a96a 48%,#087147 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.78),inset 0 -3px 4px rgba(0,0,0,.28),0 2px 0 #045035,0 5px 8px rgba(0,0,0,.36);
}
.app-cctp-footer-icon[data-app-cctp-open-panel="search"] {
  border-color:#89d4ef;
  background:
    radial-gradient(circle at 28% 17%,rgba(255,255,255,.72) 0 4%,rgba(255,255,255,.18) 24%,transparent 43%),
    linear-gradient(145deg,#65c9ee 0%,#278fbd 48%,#15577f 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.78),inset 0 -3px 4px rgba(0,0,0,.28),0 2px 0 #103f5e,0 5px 8px rgba(0,0,0,.36);
}
.app-cctp-footer-icon-plus {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
}
.app-cctp-footer-icon[aria-current="page"] { box-shadow:inset 0 0 0 2px rgba(255,255,255,.38),inset 0 -3px 4px rgba(0,0,0,.3),0 2px 0 #1c2636,0 5px 8px rgba(0,0,0,.36); }
.app-cctp-footer-icon:active { transform:translate3d(0,2px,0) scale(.97); box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.28); }